@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Cabin);
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(https://fonts.googleapis.com/css?family=Play);
@import url(https://fonts.googleapis.com/css?family=Sniglet);
@import url(https://fonts.googleapis.com/css?family=Khula);
@import url(https://fonts.googleapis.com/css?family=Shanti);
@import url(https://fonts.googleapis.com/css?family=Mandali);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Hind);
@import url(https://fonts.googleapis.com/css?family=Oxygen);
@import url(https://fonts.googleapis.com/css?family=Fira+Sans);
@import url(https://fonts.googleapis.com/css?family=Questrial);


section.wotbox {
  display: table;
  width: 100%;
}

section.front_payments{
    background-image: url('/assets/images/table_football_girl_large.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    background-color: rgb(212, 102, 121);
    background-attachment: fixed;
}

.navbar-nav > li > .dropdown-menu{
/*	background-color: aliceblue; */
}


.wot-dropup {
  top: auto;
  bottom: 100%;
  margin-bottom: .125rem;
}

.wot-dropup-right{
    left: -100px;
}

.grey-icon{
    opacity:0.6;
}

.red-icon:before{
	color: red;
    opacity:0.6;
}

.invert{
    -webkit-filter: invert(100%);
}

.invert2{
    filter:brightness(200%);
}


ul.navbar-nav > li > div.wot-dropdown{
    position:relative;
    top: auto;
/*    width: 400px;
    left: -200px;
    */
}

ul.wot-nav-dropdown{
/*    max-width:100px; */
}

div.container{
    padding-left:8px;
    padding-right:8px;
}

table.challenge-table td:not(:last-child){
    white-space: nowrap;
}

table.challenge-table td:last-child{
    width: 100%;
}

.table td{
/*	padding:0.6em;*/
}

.table th{
/*	padding:0.6em;*/
}

div.wot-nav {
	color:white;
}

button.wot-nav {
	color:white;
}

span.wot-nav {
	color:white;
}

a.wot-nav {
	color:white;
}

img.menu-icon-space {
	margin-right:10px;
}

li > a.wot-nav{
	padding:0px 4px 0px 4px;
	color:white; 
}

.image-loader{
	max-width:400px;
}

label.white{
	color: white;
}

h1.wothero__text{
	font-family: sniglet;
}

h1.faq-header{
	font-family: sniglet;
	color: white;
}

h2.front-title{
	margin:10px 0px 10px 30px;
	font-family: sniglet;
	color:#505050;
	/*color:white;*/
}

div.caption > p{
/*	color:white;*/
}

p.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
	height : 60px;
	margin-left: 15px;
	max-width: 20px;
}


section.wotsection {
  overflow: hidden;
  padding: 0 20px;
  position: relative;
}
.wotsection-full-height {
  height: 100vh;
  min-height: 1024px;
}

section.wotsection-bg-adapted-1 {
	background-image: url('/assets/images/office_table_tennis_large.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-2 {
	background-image: url('/assets/images/gaming_girls.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-3 {
	background-image: url('/assets/images/office_table_tennis_large.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-a1 {
	background-image: url('/assets/images/office_table_tennis_large.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-a2 {
	background-image: url('/assets/images/gaming_girls.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-a3 {
	background-image: url('/assets/images/office_table_tennis_large.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-b1 {
	background-image: url('/assets/images/father_son_tennis.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-b2 {
	background-image: url('/assets/images/father_son_tennis.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

section.wotsection-bg-adapted-b3 {
	background-image: url('/assets/images/father_son_tennis.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}

div.wotintro3{
    background-color: #ffa7514d;
}

div.wotintro6{
/*    background-color: #ffc10769;*/
	background-color: #fafafa;
/*    border-color: #c96;*/
	border-color: ##cdcde4;
	border-radius: 5px;
	border-width:5px;
}

div.wotintro6 h4 img{
    vertical-align:top;
}

img.large-icon{
	width: 80%;
	margin: auto;
	padding-top: 10px;
	max-width: 250px;
	
}

img.large-icon-full{
	width: 90%;
	margin: 5%;
}

form.no-shadow{
	box-shadow: inset 0 0px 0;
}

div.login-control{
    margin:0.2em;
}

section.wotparallax-background{
  background-size: auto 130%;
  background-attachment: fixed !important;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover !important;
}

.menu-1 {
  -webkit-transition: background 0.5s cubic-bezier(0.7, 0.01, 0.3, 1) 0.15s;
  -o-transition: background 0.5s cubic-bezier(0.7, 0.01, 0.3, 1) 0.15s;
  transition: background 0.5s cubic-bezier(0.7, 0.01, 0.3, 1) 0.15s;
/*  padding-left: 10px;*/
/*  padding-right: 10px; */
  position: absolute;
  width: 100%;
  z-index: 100;
}
div.wotbox_magnet {
  display: table-cell;
  float: none;
  height: 80%;
  margin-bottom: 0;
  margin-top: 0;
  vertical-align: middle;
}
div.wotbox_magnet-sm-padding {
  padding: 41px 0;
}

div.wotoverlay{
  background: #222;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

div.wotbox-container {
  height: 50%;
}

div.wothero {
  color: #fff;
  position: relative;
  margin-top: 20px;
}

div.wotbox-stretched {
  height: 100%;
}

div.wotsection-container {
  padding: 0;
  position: relative;
  z-index: 3;
}

div.transparent{
	background-color: transparent;
	background-image: transparent;
}

span.hol-item {
    width: 6px;
    border: 1px solid #C0C0C0;
    border-radius: 2px;
    margin-right: 2px;
    float: left;
    display: block;
    height: 32px;
}

span.hol-filled-green {
    background-color: #359658;
}

span.hol-filled-red {
    background-color: #FF4040;
}

span.hol-filled-orange {
    background-color: #FF9000;
}


iframe.navbar-fb-like {
	margin: 10px;
}

select.select2{
/*	min-width:200px; */
/*	margin-left:10px; */
}

span.select2{
	min-width:200px;
	margin-left:10px;
}

td.playerrow{
    padding:0.2em;
    padding-bottom:0.6em;
    padding-top:0.6em;
}

td.playerrow-thin{
    padding:0em;
    padding-bottom:0.6em;
    padding-top:0.6em;
}

td.winner{
    background-repeat: repeat-y;
	background-image: url('/assets/images/up.png');	
}
td.onfire{
/*    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 18px;
    background-image: url('/assets/images/fire2.png');
*/
    background-repeat: no-repeat;
    background-image: url('/assets/images/gold_star.png');
    background-position:top right;
    background-size: 20px;
    background-origin: content-box;
}

td.zzz{
    background-repeat: no-repeat;
    background-image: url('/assets/images/zzz.png');
    background-position:right;
    background-size: 30px;
}

td.decay{
    background-repeat: no-repeat;
    background-image: url('/assets/images/decay.png');
    background-position:right;
    background-size: 20px;
}

td.unstarted{
/*	background-color: #cff0c8; */
	background-color: #A0A0A0; 

	color: white;
}

td.winnerx:after{
  font-family: "Glyphicons Halflings";
  content:"\e093";
  color: green;
}

.glyphicon{
	line-height: 1.2;
}

tr.ladder-user{
  border-width: 2px;
  border-style: solid;
  background-color: #F0F8FF;
}

iframe.wot-fb{
	border:none; overflow:hidden; width:100px; height:20px;vertical-align:middle;
}

form.simple {
	display : inline;
}

div.wotmain{
/*	background-color: #ffb0a0; */
}

img.club{
	float: right;
	padding: 10px;
}

li.grab{
	cursor: move;
	height: 30px;
	padding:5px;
	width:80%;
	margin:10px;
}

li.player{
	height:25px;
}

div.fc-highlight{
	background:#5a6c97;
}

.ui-state-highlight {
	margin:10px;
	height:40px;
}

.navbar .username {
/*  float: left; */
  display: inline;
  padding: 15px 10px 15px;
/*  #margin-left: -20px; */
  font-size: 16px;
  font-weight: 200;
  color: #000080;
  vertical-align: -5px;
}

.hero-backdrop {
	background-repeat: no-repeat;
	background-color: #fcfcff;
	background-position: right;
	padding: 20px 25px 25px 25px;
	height: 280px;
  	margin-bottom: 10px
  	margin-top: 5px;
  	font-size: 18px;
  	font-weight: 200;
  	line-height: 30px;
  	border: 1px solid #eeeeee;
	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
}
.hero1 {
	color: white;
	background-image: url("/assets/images/tennis3.jpg");
}

.hero2 {
	background-image: url("/assets/images/front_back4.jpg");
	color: black;
}

.hero3 {
	background-image: url("/assets/images/front_back5.jpg");
	color: black;
}

.hero4 {
	background-image: url("/assets/images/front_back6.jpg");
	color: black;
}

img.fixed {
	max-width: none;
}

input.finishDate{
	position: relative;
	z-index: 10000;
	
}

span.label-as-badge {
    border-radius: 1em;
    font-size: 100%;
}

.wotnail:hover {
    position:relative;
    display:block;
    width:100px;
    height:auto;
    z-index:999;
    transition-delay:0.2s;
}
.intro {
  max-width: 480px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  background: white; 
  border: #solid 10px #0000FF; 
  background-color: rgba(255,255,255,0.8);
  border-color: solid 10px rgba(0,0,255,0.9);
  vertical-align: bottom;
}

.popover{
	max-width: 80%;
}

div.wot-popover{
	width:40em;
}

div.paragraph-vertscroll{
    overflow: scroll;
    max-height: 16em;
    overflow-x: hidden;
}


h3.wot-popover-header{
	color: white;
	background-color: #5a965d;
}

div.wot-demo-text {
	font-size: larger;
}


.border-text-white {
	text-shadow:  
	1px 1px #f0f0f0, 
	-1px -1px 0 #f0f0f0, 
	1px -1px 0 #f0f0f0, 
	-1px 1px 0 #f0f0f0;
}

.border-text-black {
	text-shadow:  
	1px 1px #303030, 
	-1px -1px 0 #303030, 
	1px -1px 0 #303030, 
	-1px 1px 0 #303030;
}

.intro-black {
	max-width: 650px;
 	-moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  background: black; 
  color: white;
  border: #solid 10px #0000FF; 
  background-color: rgba(255,255,255,0.4);
  border-color: solid 10px rgba(0,0,255,0.8);
  vertical-align: bottom;
  padding: 5px;
}

.heading-row {
	height : 130px;
}

.intro-bottom {
	position : absolute; 
	bottom: 0;
}

img.nav-user {
	margin: 2px 2px 0px 2px;
	width : 36px;
	height : 36px;
	border-width: 1px;
	border-color: white;
	border-style: solid;
}

.nav-item {
	height : 36px;
}

ul.pushed-right {
	right:-40px;
}

a.logout{
	vertical-align: baseline;
	padding:4px 4px 10px 4px;
	margin-right:2px;
}

.circle {
	line-height: 0.5em;
	border-radius : 100%;
	padding: 4px 4px 4px 4px;
}

.circle-accept {
	line-height: 0.5em;
	border-radius : 100%;
	padding: 4px 4px 4px 4px;
/*	line-height: normal; */
/*	height:29px; */
}

a.circle-suggest {
	border-radius : 100%;
	padding: 4px 4px 4px 4px;
	line-height: 1em;
/*	line-height: normal; */
/*	height:29px; */
}

.circle-record {
	line-height: 0.5em;
	border-radius : 100%;
	padding: 4px 4px 4px 4px;
/*	line-height: normal; */
/*	height:29px; */
}

.competition_description{
/*	#line-height: 120%; */
}


span.cancel-reason {
/*	#text-shadow: 0 2px 0 #white; */
/*	#background-color: white; */
/*	#color : white; */
/*	#-webkit-text-stroke: 2px black; */
  	text-shadow:
   		-1px -1px 0 white,  
    	1px -1px 0 white,
    	-1px 1px 0 white,
     	1px 1px 0 white;
}

.input-xmlarge {
  width: 350px;
}

img.img-small {
	height: 20px;
	width: 20px;
}

td.ladder-pic {
	padding: 4px;
	width: 48px;
}

td.ladder-name {
	padding-left: 0px;
}

td.league-table-disabled {
	background-color: gray;
}

div.challenge {
	background-color: rgb(245, 245, 255);
}

div.match-box.challenge-expiring {
	background-color: #FF890E;
	color: white;
    border: 2px solid #ff4040;
}

div.match-box.challenge-expiring a {
	color: white;
    text-decoration: underline;

}

div.match-box {
	padding: 4px 4px 0px 4px;
	margin-bottom: 0px;
	margin-top: 5px;
/*	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */
	border: 1px solid #ccdddd;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	width: 100%;
	
}

img.player-remove {
    vertical-align: initial;
}

button.match-name {
    padding-top:1px;
/*    margin-bottom:2px;*/
    padding-left:2px;
}

b.match-name {
    padding-top:1px;
}

input.challenge-team-name{
    height: 2rem;
    padding: 4px;
}


button.grad-button, a.grad-button {
}
/* Shine */
button.grad-button:after, a.grad-button:after {
	content:'';
  	top:0;
	left: 0;
  	transform: translateX(100%);
  	width: 50%;
  	max-width: 50px;
	height:100%;
	position: absolute;
	z-index:1;
	border-radius:20px;
	animation: slide 2.3s infinite;
 background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(30,196,180,0) 99%, rgba(30,196,180,0) 100%); /* FF3.6+ */ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(30,196,180,0) 99%,rgba(30,196,180,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(30,196,180,0) 99%,rgba(30,196,180,0) 100%); /* Opera 11.10+ */ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(30,196,180,0) 99%,rgba(30,196,180,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(25,165,148,0) 0%,rgba(255,255,255,0.8) 50%,rgba(30,196,180,0) 99%,rgba(30,196,180,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
/* animation */
@keyframes slide {
	0% {transform:translateX(-40%);opacity:0;}
	20% {opacity: 1;}
	80% {transform:translateX(100%); opacity: 0;}
	100% {transform:translateX(140%); opacity: 0;}
}

div.banner{
/*	background-color: #C73DC7; */
/*	background-color: #a07e99; */
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius:10px;
	color: white;
}

div.banner2{
/*	background-color: #C73DC7; */
/*	background-color: #a07e99; */
/*	background-color: #d03b55; */
	background-color: #ad3f58;
	padding: 10px;
	border-radius:10px;
}

div.admin-box{
	padding: 5px 5px 5px 5px;
}
div.message-box {
	padding: 2px 12px 8px 12px;
	margin-bottom: 5px;
	margin-top: 5px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	border: 1px solid #cccccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	width: 90%;
}

div.message-box-header{
	width : 100%;
}


div.match-loss {
	background-color: rgb(252, 227, 227);
	}
	
div.match-win {
	background-color: rgb(192, 245, 187);
}

div.match-neutral{
	background-color: rgb(245, 245, 255);
}

div.match-badge {
	min-width: 32px;
	min-height:20px;
}

div.match-close {
    width:120px;
	float:right !important
}

div.message-content {
	min-height: 250px;
/*	line-height: 14px; */
}

input.match-date {
	padding : 2px;
	width: 120px;
	background: transparent;
}

textarea.vertresize {
	resize : vertical;
}

.hero-unit {
/*  background-color: #ffffcc; */
/*  background-color: #ffff99; */
   padding: 60px;
}


.chats{
	list-style-type: none;
	margin: 0px;
}

.chats li{
	margin-bottom: 8px;
	padding-bottom: 8px;
}


.chats .by-me .chat-meta{
	font-size: 10px;
	color: #777;
}

.chats .by-other .chat-meta{
	font-size: 10px;
	color: #777;
}

.chats .by-me .chat-content{
	margin-left: 20px;
	position: relative; 
	background: #F9F9F9; 
	border: 1px solid #ddd;
	padding: 2px 5px;
	border-radius: 10px;
	font-size: 14px;
}

.chats .by-other .chat-content{
	margin-right: 20px;
	position: relative; 
	background: #fff; 
	border: 1px solid #ddd;
	padding: 2px 5px;
	border-radius: 10px;
	font-size: 14px;
	}

.chats .by-me .chat-content:after, .chats .by-me .chat-content:before { 
	right: 100%; 
	border: solid transparent; 
	content: " "; 
	height: 0; 
	width: 0; 
	position: absolute; 
	pointer-events: none; 
} 

.chats .by-other .chat-content:after, .chats .by-other .chat-content:before { 
	left: 100%; 
	border: solid transparent; 
	content: " "; 
	height: 0; 
	width: 0; 
	position: absolute; 
	pointer-events: none; 
} 

.chats .by-me .chat-content:after { 
	border-color: rgba(255, 255, 255, 0); 
	border-right-color: #F9F9F9; 
	border-width: 10px; 
	top: 40%; 
	margin-top: -10px; 
} 

.chats .by-me .chat-content:before { 
	border-color: rgba(238, 238, 238, 0); 
	border-right-color: #ccc; 
	border-width: 11px; 
	top: 40%; 
	margin-top: -11px; 
}

.chats .by-other .chat-content:after { 
	border-color: rgba(255, 255, 255, 0); 
	border-left-color: #fff; 
	border-width: 10px; 
	top: 40%; 
	margin-top: -10px; 
} 

.chats .by-other .chat-content:before { 
	border-color: rgba(238, 238, 238, 0); 
	border-left-color: #ccc; 
	border-width: 11px; 
	top: 40%; 
	margin-top: -11px; 
}

div.user-backdrop-players {
	background-image: url("/assets/images/players.png");
	background-repeat: no-repeat;
}

div.user-backdrop-friends {
	background-image: url("/assets/images/friends2.png");
	background-size: contain;
	background-repeat: no-repeat;
}

div.user-backdrop-women {
	background-image: url("/assets/images/squash_women.png");
	background-size: contain;
	background-repeat: no-repeat;
}


@media (min-width: 501px) {

	div.logo {
		background-image: url("/assets/images/wot2.png");
		background-repeat: no-repeat;
	/*	background-position: -10px 4px; */
		height: 40px;
	}

	img.logo {
	/*	background-position: -10px 4px; */
		height: 40px;
	}

	div.inline {
		display : inline;
		position: relative;
		float: left;
	}

	div.challenge-content{
	    width: calc(100% - 170px);
/*		width:90%;*/
	}

	table#challenge-table td{
	    padding-top:0em;
	    padding-left:0.7em;
	    padding-right:0.6em;
	}

	div.match-content{
		width:90%;
	/*	padding-left:5px; */
	}

	div.user-backdrop {
		background-repeat: no-repeat;
		min-height:180px;
		background-position: right top;
		background-size: contain;
	/*    height:auto !important; */
	/*    bottom : 40px; */
	/*    margin-bottom : 0px; */
	/*    height:300px; */
	}


	div.intro-form{
		margin-bottom: 0px;
	}

	h3.intro-greeting{
		margin-top:10px;
	}

}

@media (max-width: 500px) {

	div.inline {
		display : inline;
		position: relative;
		float: left;
	}

	div.challenge-content{
/*		margin-top: 8px; */
/*		margin-left:10px; */
		min-width:150px;
	}

	div.match-content{
		width:100%;
	/*	padding-left:5px; */
	}


	div.logo {
		background-image: url("/assets/images/football_li.png");
		background-repeat: no-repeat;
		margin: 5px;
		height: 20px;
	}

}