@import url('./reset.css');
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url('./forms.css');
@import url('./code.css');

html{
	height:100%;
	font-size:13px;
	overflow-y: scroll;
}
body{
	height:100%;
	font-family:"Open Sans", Verdana, sans-serif;
	font-weight:lighter;
	color:#666666;
	background: radial-gradient(50% 0%, #505050 , #202020) fixed;
	background: -webkit-radial-gradient(50% 0%, #505050 , #202020) fixed;
	background: -o-radial-gradient(50% 0%, #505050 , #202020) fixed;
	background: -ms-radial-gradient(50% 0%, #505050 , #202020) fixed;
	background: -moz-radial-gradient(50% 0%, #505050 , #202020) fixed;
	background-repeat:no-repeat;
	background-size:100% 100%;
	line-height:20px;
}
*, *:before, *:after{
	box-sizing:border-box;
}
.gheader{
	height:50px;
	position:absolute;
	top:0;
	z-index:6;
	width:100%;
	background:transparent;
	box-shadow:inset 0px 0px 1px transparent;
	overflow:hidden;
}
.gfooter{
	background:transparent;
	height:40px;
	width:100%;
	line-height:20px;
	padding:10px 20px 10px 20px;
	box-sizing:border-box;
	overflow:hidden;
	font-size:0.9em
}
.gfooter p{
	margin:0;
	width:50%;
	float:left;
}
.gfooter p:last-child{
	text-align:right;
}
.gfooter p, .gfooter p a, .gfooter p a:hover{
	color:#808080;
}
h2{
	font-size:1.4em;
	font-family:"Open Sans", Verdana, sans-serif;
	text-transform:uppercase;
	line-height:30px;
	color:#cccccc;
	font-weight:normal;
	border-bottom:1px dashed #404040;	
}
.middle h2{
	border-bottom:1px dashed #cccccc;
	margin-bottom:10px;
	color:#999;
}
.bloc_content{
	color:#999999;
	padding-top:10px;
	clear:both;
}
h2:not(:first-child){
	margin-top:20px;
}
h3{
	color:#999999;
	font-family:"Open Sans", Verdana, sans-serif;
	font-size:1.2em;
	line-height:20px;
	font-weight:normal;
}
.left h3, .right h3{
	color:#dfdfdf;
}
h3:not(:first-child){
	margin-top:20px;
}
.middle h3:first-letter{
	text-transform:uppercase;
}
a{
	text-decoration:none;
	color:#cccccc;
}
p{
	margin-bottom:10px;	
}
p, .bloc_content{
	line-height:20px;
	text-align:justify;
}
.bloc_content{
	white-space:pre-wrap;
}
strong{
	font-weight:normal;	
}
em{
	font-style:italic;
}
article h3:not(:first-child){
	margin-top:15px;
}
ul{
	list-style-type:none;
	list-style-position:inside;
}
.right ul li:before{
	content:"-";
	padding-right:5px;
	float:left;
}
ol{
	list-style-type:decimal;
	list-style-position:inside;
}
ol li{
	line-height:25px;
	height:25px;
	font-family:"Open Sans", Arial, sans-serif;
	font-weight:lighter;
}
a{
	color:#36a3eb;
}
a:hover{
	color:#3498db;
}
sup{
	font-size:0.8em;
	vertical-align:super;
}
h3 + aside{
	margin-top:5px;	
}
.hidden{
	display:none;	
}
/* HEADER LOGO */
#top_section{
	background:url('../../images/logo.png') no-repeat 50%50%;
	background-size:300px;
}
.logo{
	display:inline-block;
	color:#ffffff;
	font-family:"Open Sans", Verdana, sans-serif;
	font-size:3.25em;
	height:60px;
	line-height:60px;

}
.logo strong{
	font-weight:bold;
	color:#E74C3C;
}
h1 a, h1 a:hover{
	color:#ffffff;
}
.logo a{
	float:left;
	display:block;
	height:inherit;	
	text-shadow:0px 0px 20px #252525;
}
#cup{
	cursor:pointer;
	float:left;
}
.banner{
	padding-top:110px;
	text-align:center;
}
/* SOCIAL ICONS */
.disabled_icon, .disabled_icon:hover{
	opacity:0.25;
	cursor:default;
}
.social{
	display:table;
	height:inherit;
	float:right;
	width:210px;
}
.social li{
	display:table-cell;
	height:inherit;
	min-width:70px;
	text-align:center;
	border-left:1px solid transparent;
}
.social li:last-child{
	margin-right:0px;
	border-right:1px solid transparent;
}
.twitch{
	background-image:url('./images/twitch.png');
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:50% 50%;
}
.facebook{
	background-image:url('./images/facebook.png');
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:50% 50%;
}
.twitter{
	background-image:url('./images/twitter.png');
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:50% 50%;
}
.social li a{
	width:100%;
	height:100%;
	text-transform:uppercase;
	font-family:"Open Sans", Verdana, sans-serif;
	display:block;
	line-height:50px;
}
.social li a:hover{
	color:#ffffff;
}
.social li a.selected{
	background:#151a1f;
	border-bottom:4px solid #e74c3c;
	box-sizing:border-box;
	color:#ffffff;
}
.fix:after{
	content:' ';
	clear:both;
	height:0;
	display:block;	
}

/* PARTS */
.left, .middle, .right{
	padding:15px;
	box-sizing:border-box;
	float:left;
	min-height:1000px;
}
.left{
	background:rgba(38,38,38,0.75);
	position:relative;
}
.right{
	background:rgba(38,38,38,0.75);
}
.middle{
	background:#ffffff;
}
.wrapper{
	margin-right:auto;
	margin-left:auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:-o-flexbox;
	display:flex;
	min-height:100%;
	position:relative;
}
.wrap{
	margin:auto;
	height:inherit;	
}

@media (max-width:1440px){

	.left{
		width:300px;
	}
	.right{
		width:300px;
	}
	.middle{
		width:600px;
	}
	.wrapper, .wrap{
		width:1200px;
	}
	.grp_bg{
		width:273px;
	}
}
@media (min-width:1440px) and (max-width:1920px){

	.left{
		width:300px;
	}
	.right{
		width:300px;
	}
	.middle{
		width:800px;
	}
	.wrapper, .wrap{
		width:1400px;
	}
	.grp_bg{
		width:374px;
	}
}
@media (min-width:1920px){

	.left{
		width:300px;
	}
	.right{
		width:300px;
	}
	.middle{
		width:1200px;
	}
	.wrapper, .wrap{
		width:1700px;
	}
	.grp_bg{
		width:calc(100% / 4 - 10px);
		box-sizing:border-box !important;
	}
}
.middle h3{
	margin-bottom:10px;
	padding-bottom:5px;
}
.middle h3:not(:first-child){
	margin-top:20px;
}
.handle_dark{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0, 0, 0, 0.5);
	width:100%;
	min-height:100%;
	z-index:8;
}
.trigger{
	position:absolute;
	width:40px;
	height:40px;
	border:none;
	background:transparent;
	z-index:20;
	cursor:pointer;
	outline:none !important;
}
/* LEFT SIDE */
.bloc_img{
	width:100%;
	max-width:270px;
	max-height:270px;
}

.actions li{
	width:inherit;
	font-size:1em;
	height:40px;
	line-height:40px;
	margin-bottom:10px;
}
.actions li:last-child{
	margin-bottom:0;
}
.actions li a{
	display:block;
	width:100%;
	height:100%;
	line-height:20px;
	padding:10px 20px 10px 20px;
	box-sizing:border-box;	
}
.ac_w a{
	color:#666666;
	background:#f3f3f3 url('./images/arrow.png');
	background-repeat:no-repeat;
	background-size:32px 32px;
	background-position:calc(100% - 15px) 50%;	
}
.ac_w a.parameters{
	background:#f3f3f3 url('./images/engrenage.png');
	background-repeat:no-repeat;
	background-size:28px 28px;
	background-position:calc(100% - 15px) 50%;		
}
.ac_w a:hover{
	color:#404040;
	background-color:#f8f8f8;
}
.ac_r a{
	color:#ffffff;
	background:#e74c3c;	
}
.ac_r a:hover{
	background:#f35241;	
}
.ac_b a{
	color:#ffffff;
	background:#2980b9;	
}
.ac_b a:hover{
	background:#3498db;
}
.ac_g a{
	color:#ffffff;
	background:#a7a7a7;
}
.ac_g a:hover{
	background:#adadad;
}

/* RIGHT SIDE */
.partner{
	width:100%;
}
.host{
	display:block;
	color:#adadad;
}
.host:hover{
	color:#979797;	
}

/* MIDDLE */

/* GROUPS */
.admin{
	cursor:pointer !important;
}
.group_empty{
	background:#f3f3f3;
	height:180px;
	box-sizing:border-box;
	float:left;
}
.group{
	box-sizing:content-box;
	margin-bottom:10px;
	float:left;
	height:25px;
	line-height:25px;
}
.group caption{	
	background:linear-gradient(#e0e0e0 20%, #e8e8e8 20%);
	color:#505050;
	text-align:center;
	box-shadow:inset 0px 0px 1px #656565;
	height:50px;
	line-height:50px;
	cursor:default;
}
.group-color_square{
	float:right;
	height:50px;
	width:25px;
	box-shadow:inset 0px 0px 1px #000000;
	opacity:0.75;
}
.gc_green{
	background:#2ecc71;
}
.gc_yellow{
	background:#f1c40f;
}
.gc_orange{
	background:#e67e22;
}
.gc_red{
	background:#e74c3c;
}
.gc_magenta{
	background:#dd56dd;
}
.gc_purple{
	background:#80379e;
}
.gc_blue{
	background:#36a3eb;
}
.gc_cyan{
	background:#36d3eb;
}
.group tr{
	background:#f9f9f9;
	width:100%;
	line-height:25px;
	height:25px;
	border-bottom:1px solid #e7e7e7;
}
.group td{
	padding:0px 5px 0px 5px;
}
.group td:nth-child(1){
	width:10%;
	border-left:1px solid #dddddd;
}
.group td:nth-child(2){
	width:60%;
}
.group td:nth-child(3){
	width:30%;
	border-right:1px solid #dddddd;
	text-align:right;
	color:#bcbcbc;
}
.grp_bg{
	margin:5px;
}
/* TREE */
.tree{
	float:left;
	width:calc((100% - (2 * 120px)) / 3);
}
.game_slot, .game_slot_off{
	min-width:80px;
	position:relative;
	border:4px solid #ececec;
	height:40px;
	padding:5px 10px 5px 10px;
	line-height:22px;
	font-size:0.9em;
	overflow:hidden;
	box-shadow:0px 0px 1px #ffffff, inset 0px 0px 1px #797979;
	background:linear-gradient(#eeeeee 0%, #ffffff 100%);
	border-radius:4px;
	word-break:break-all;
}
.tree li .empty{
	background:linear-gradient(#eeeeee 0%, #ffffff 100%);
	padding-left:10px;
}
.tree li div img.flag{
	padding:7px 0px;
	margin-right:5px;
	float:left;
}
.group caption img.flag{
	padding:5px 10px;
	float:left;
}
.tree li{
	margin-bottom:110px;
}
.tree{
	margin-bottom:20px;
}
.tree li:last-child{
	margin-bottom:0;
}
.tree.part4 li{
	border-radius:5px;
}
.tree li .empty:first-child{
	border-top:4px solid #ececec;
}
.link{
	width:100px;
	float:left;
	margin:0px 10px;
}
.link tr{
	width:inherit;
	height:40px;
}
.link td{
	width:50px;
	height:55px;
	box-sizing:border-box;
}
.pos_top{
	border-top:3px solid #ececec;
}
.pos_bottom{
	border-bottom:3px solid #ececec;
}
.pos_left{
	border-left:3px solid #ececec;
}
.pos_right{
	border-right:3px solid #ececec;
}
.version_8 .final{
	margin-top:330px;
}
.version_8 .demi{
	margin-top:110px;
}
.version_8 .demi li:last-child{
	margin-top:330px;
}
.version_8 .quarter{
	margin-top:0;
}

.version_4 .final{
	margin-top:110px;
}
.version_4 .demi{
	margin-top:0px;
}
.version_4 .demi li:last-child{
	margin-top:80px;
}	
.version_4 .winner{
	margin-top:145px;
}

/* TREE ELEMENTS */
.flag{
	width:21px;
	height:14px;
}
.score{
	float:right;
	width:20px;
	height:22px;
	text-align:right;
	border-left:1px solid #e0e0e0;
	color:#BCBCBC;
	font-weight:normal;
}
.grey{
	color:#656565;	
}
.grey:hover{
	color:#adadad;
}
.score.red{
	color:#ba2e2e;
}
.score.green{
	color:#2eba33;
}
.score.blue{
	color:#2e89ba;
}
.empty{
	text-align:center;
}

/* BLOC TABLES */
.bloc_group.hgr{
	float:left;
	width:calc(50% - 10px);
	margin-right:20px;
}
.bloc_group.hgr:last-child{
	margin:0;
}
.table{
	width:100%;
	margin-bottom:20px;
}
tbody, td, tr{
	vertical-align:top !important;
}
.table caption{
	text-align:left;
	height:40px;
	line-height:40px;
	font-size:1.1em;
}
.table tr{
	background:#f3f3f3;
	width:100%;
	height:40px;
	line-height:40px;
	max-height:40px;
}
.table tr:nth-child(even){
	background:#fcfcfc;
}
.history_list td{
	cursor:pointer;
}
.history_list tr.filled:hover{
	background:#6eaacf;
	color:#ffffff;
}
.history_list tr.inbound{
	background:#dcdcdc;
	color:#ffffff;
}
.table thead th{
	background:#90b9c6;
	color:#ffffff;
	border-left:1px solid #f1f1f1;
	padding:0px 7.5px 0px 7.5px;
}
.table thead th:first-child{
	border:none;
}
.table tr td, .table tr th{
	height:inherit;
	overflow:hidden;
	padding:0px 7.5px 0px 7.5px;
	text-align:center;
	position:relative;
}
.bloc_group tr td:nth-child(2), .bloc_group tr th:nth-child(2){
	text-align:left;
}
.table tr td a.icon, .table tr td span{
	width:100%;
	height:40px;
}
.bloc_info:hover td:nth-child(2){
	color:#36a3eb !important;
}
.bloc_grp_empty{
	color:#dadada;
	content:"";
}
td img.flag{
	position:absolute;
	left:calc(50% - 10.5px);
	top:14px;
}
.underline{
	text-decoration: underline;
}
/* LANGUAGE */
.language_choice{
	width:21px;
	height:50px;
	float:right;
	margin:0px 15px;
}
.language_choice li{
	width:inherit;
	height:14px;
	opacity:0.9;
}
.language_choice li:hover{
	opacity:1;
}
.language_choice li:first-child{
	margin-bottom:8px;
	margin-top:6px;
}
/* MESSAGE BOX */
button + warning{
	margin-top:20px;	
}
.warning a, .warning a:hover{
	color:#e74c3c;
}
.notice{
	padding:10px 20px;
	background: #e0ecf3;
	background-position:5px 50%;
	border:1px solid #c5dee9;
	background-size:42px 42px;	
	color:#3498db;
	border-radius:4px;
}
.notice.warning{
	background-color:#f3e0e0;
	border:1px solid #e0c0c4;
	color:#e74c3c;
}
.notice.green{
	background-color:#fcf8e3;
	border:1px solid #fbeed5;
	color:#c09853;
}
.notice.blue a, .notice.blue a:hover{
	color:#afafaf;
}
/* TICKETS */
.tickets{
	height:inherit;
	background:#f8f8f8;
	margin-bottom:10px;
	overflow:visible;
	clear:both;
}
.tickets li{
	float:left;
	width:calc((100% - 120px) / 4);
	height:40px;
	line-height:40px;
	font-size:0.9em;
	text-align:left;
	margin:0px 10px;
	overflow:visible;
	background:transparent;
	z-index:7;
	position:relative;
	cursor:pointer;
}
.tickets li .group-color_round{
	margin-right:10px;
	margin-top:13px;
}
.tree li .group-color_round{
	margin-right:10px;
	margin-top:4px;
}
.group-color_round{
	float:left;
	height:14px;
	width:14px;
	box-shadow:inset 0px 0px 3px #252525;
	border-radius:100%;
	opacity:0.75;
}
.size_small{
	height:40px;
}
.size_big{
	height:80px;
}
.game_slot.selected{
	box-shadow: inset 0px 0px 1px 1px #0d88da !important;
}
.tree li{
	position:relative;
}
.game_info{	
	position:absolute;
	width:300px;
	min-height:160px;
	background:transparent;
	z-index:6;
}
.tree li:hover .game_info{
	display:block;
	top:-40px;
	right:-310px;
}
.game_slot .close{
	top:5px;
	right:5px;
	z-index:4;
}

/* CHOIX */
.dialog-wrapper.choix{
	padding:0px 20px;
}
.choix_total{
	/*float:left;
	width:50%;*/
	font-size:25px;
	margin-bottom:0;
	text-align:center;
	height:200px;
	line-height:200px;
	box-sizing:border-box;
	cursor:pointer;
}
.choix_total:hover{
	background:#fbfbfb;
	transition:all ease 1s;
}
/* TREE SCORE */
.editable{
	cursor:pointer;
	border-radius:4px;
	transition:all ease 2s;
}
.editable:hover > .match_team{	
	transition:all ease 2s;
	box-shadow: inset 0px 0px 0px 1px #36a3eb;
}
.match_team{
	overflow:hidden;
}
.match_map{
	height:30px;
	line-height:30px;
	text-align:center;
	font-weight:bold;
}
label .group-color_round{
	margin-top:9px;
	margin-right:10px;
}
#results input[type=number]{
	margin:0;
}
#results label{
	margin:0;
}
/* MAP POOL */
.map_pool_el{
	float:left;
	width:calc((100% - 64px) / 7);
	margin-right:10px;
	margin-bottom:10px;
	box-sizing:content-box;
	overflow:hidden;
}
.map_pool_el:nth-child(7n){
	margin-right:0px;
}
.map_pool_el img{
	width:100%;
	height:100%;
	border-radius:2px;
}
.map_pool_el.empty_map img, .missing_img img{
	opacity:0.25;
	border:1px dashed #d4d4d4;
	border-radius:2px;
}
.missing_img img{
	opacity:0.75;
}

/* SESSION SPE */
.session_actions li a{
	text-align:center;
}
.session_actions li{
	float:left;
	width:50%;
}

/* LOT */
#lot_list{
	margin-bottom:15px;
	overflow:auto;
	height:218px;	
}
.bloc_auto{
	padding-top:10px;
	color:#999999;
}
.lot_countdown{
	display:block;
	font-weight:bold;
}
.lot_list_side li{
	margin-bottom:5px;
}
.lot_countdown.middle_list{
	display:inline-block;
	min-width:80px;
}

/* BANNER */
.navigation{
	height:45px;
}
.navigation ul{
	height:inherit;
	display:table;
}
.navigation ul:first-child{
	float:left;
}
.navigation ul:last-child{
	float:right;
}
.navigation ul li{
	height:inherit;
	display:table-cell;
	min-width:160px;
}
.navigation a{
	display:inline-block;
	line-height:45px;
	width:100%;
	height:100%;
	color:#ffffff;
	font-size:1.35em;
	text-align:center;
}
.navigation a:hover{
	color:#ffffff;
}
.navigation a span{
	display:inline-block;
	height:37px;
	border-bottom:2px solid transparent;
	transition:none;
}
.navigation a.nav_selected span{
	border-bottom:2px solid #E74C3C;	
}
.navigation a:not(.nav_selected):hover span{
	color:#dadada;
}