/* =============================================================================
   NAV
   ========================================================================== */
#header {	
	position:fixed;
	top:0px;
	z-index: 100;
  width: 100%;
	height:92px;
  color: #fff;
	transition: all 0.2s ease;
}
#header-content {	
	position: relative;
  margin:auto;  
	width: 100%;
}
#header.sticky {	
	top:-22px;
}


/* =============================================================================
   LOGO
   ========================================================================== */
#nav-logo {  
	position: absolute;
	left:10px;
	top:-2px;
	width:242px;
	transition: all 0.2s ease;
}
#nav-logo img {
	width:100%;
}

#nav-logo.sticky {
	left:16px;
	top:18px;
	width:160px;
}


/* =============================================================================
   SOCIAL
   ========================================================================== */
#header-social { 
	position:absolute;
	top:91px;
	right:13px;	
	height:20px;
	width:460px;
	border-top: 1px solid #333;
	background: transparent url(../img/nav/nav_social_pattern.png) repeat top left;
	padding: 0px;
	font-size: 11px;
}
#header-social-corner { 
	position:absolute;
	top:91px;
	right:473px;	
	height:20px;
	width:39px;
	border-top: 1px solid #333;
}
.socialicons { 
	color: #fff;
	float: left;
}
.socialicons .icons { 
	display:inline-block;
	float: left;
	font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform:lowercase;	
	font-size:18px;
	line-height:17px;
	font-style: normal;
	text-shadow: 1px 2px 1px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=2);
	margin-right:10px;
}
.socialicons .icons a { 
	color:#fff;
}
.socialicons .icons a:hover { 
	color:#ffda74;
}
.socialicons .icons img { 
	float:left;
}
.socialicons .icons span { 
	float:left;
	margin-top:2px;
	margin-left:2px;
}
.langselect { 
	float: right;
}
.flagselect { 
	width:125px;
	height:20px;
	cursor: pointer;
	position: relative;
	font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform:lowercase;	
	font-size:15px;
	font-weight: normal;
	font-style: normal;
	text-shadow: 1px 2px 1px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=2);
	color: #fff;
}
.flagselect .current { 
	overflow: auto;
	padding-left:4px;
}
.flagselect .current:hover { 
	color: #fff;
}
.flagselect .icon-sort-down { 
	display:inline-block;
	float: right;
	font-size:19px;
	color: #fff;
	margin:-7px 6px 0px 0px;
}
.flagselect:hover .icon-sort-down { 
	color: #ffda74;
}
.flagselect .name { 
	display: block;
	float: left;
	margin:1px 0px 0px 10px;
}
.flagselect .submenu { 
	display: none;
	position: absolute;
	top:20px;
	left:0px; 
	background: transparent url(../img/nav/nav_social_flagselect.png) repeat top left;
	overflow: auto;	
	z-index: 10;
	width: inherit;
	border-top: 1px solid #444;
}
.flagselect .submenu a { 
	display: block;
	clear: both;
	height:20px;
	padding-left: 5px;
	color: #fff;
	border-bottom: 1px solid #444;
}
.flagselect .submenu a:hover { 
	color: #ffda74;
}
.flag { 
	margin-top:3px;
	width: 18px; 
	height: 14px;
	display: block;
	float: left;
	background: url(../img/nav/flags.png) 0px 0px no-repeat; 	
}
.flag.fr { background-position: 0px -14px;}       .flag.fr.faded { background-position: -18px -14px;}
.flag.en { background-position: 0px 0px;}         .flag.en.faded { background-position: -18px 0px;}
.flag.de { background-position: 0px -28px;}       .flag.de.faded { background-position: -18px -28px;}
.flag.sp { background-position: 0px -42px;}       .flag.sp.faded { background-position: -18px -42px;}

/* =============================================================================
   NAV
   ========================================================================== */
#nav {
	position: absolute;
	top:0px;
	right:0px;	
}
#nav ul, #nav-left, #nav-right {
	position: relative;
	float:left;
	display:inline-block;
}
#nav ul {	
	margin:0;
	padding:0;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav li {
	padding: 0;
	list-style: none;
	display: inline-block;
}
#nav li a {
	display: block;
	font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
	font-weight: normal;
	font-style: normal;		
	outline: none;
	color: #fff;	
}
/* CURRENT */
#nav li a:hover, 
#nav li.current a {
	color: #ffbc27;
}

/* =============================================================================
   ELÉMENTS VISIBLE UNIQUEMENT POUR LA VERSION MOBILE
   ========================================================================== */
#nav-btn {
  display: none;
}


/* =============================================================================
   NAV MOBILE ICONES SOCIAL
   ========================================================================== */
.nav-social-facebook i {
	background-image: -moz-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -ms-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5f7cb6), to(#3b5998));
	background-image: -webkit-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: -o-linear-gradient(top, #5f7cb6, #3b5998);
	background-image: linear-gradient(top, #5f7cb6, #3b5998);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#466fa9', endColorstr='#466fa9', GradientType=0);
	border-color: #466fa9 #466fa9 #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #466fa9;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-social-youtube i {
	background-color: #bd362f;
	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: linear-gradient(top, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
	border-color: #bd362f #bd362f #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #bd362f;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav-social-tumblr i {
	background-color: #304e6c;
	background: rgb(72,118,163); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(72,118,163,1) 1%, rgba(48,78,108,1) 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(72,118,163,1)), color-stop(99%,rgba(48,78,108,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(72,118,163,1) 1%,rgba(48,78,108,1) 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4876a3', endColorstr='#304e6c',GradientType=0 ); /* IE6-9 */

}

/* =============================================================================
   NAV DESKTOP
   ========================================================================== */
@media screen and (min-width: 601px) {		
	#header-content {	
		height:92px;   
		max-width: 1031px;
		background-image:url('../img/nav/nav.png');
		background-repeat: no-repeat;
		background-position: top center;
	}	
	#nav {
		top:33px;
		width:73%;
		padding-right:1%;
		height:50px;		
		/* border: 2px solid rgba(255, 255, 255, 0.2); */
	}
	#nav ul {
		background: transparent url(../img/nav/nav_center.jpg) 0px 0px repeat-x; 
		width:94%;
		text-align:right;
	}
	#nav li {
    display: inline-block;
		float:left;		
		text-align:center;
		max-height:50px;
    background-image: url(../img/nav/nav_separator.png);
		background-repeat: no-repeat;
		background-position: right top;
		padding-top:10px;
  }
	#nav li a {				
		font-size:26px;
		line-height:26px;
		height:50px;
  }	
	#nav li.nav-home {
		display:none;
  }		
	#nav li.nav-social {
		display:none;
  }	
	#nav li.nav-shop {
		background: transparent;
  }
		
	/* LARGEUR DES RUBRIQUES POUR LE FR */
	#nav li.nav-fr  a { text-align:center;	padding-right:40%; }	
	#nav li.nav-news.nav-fr {	width:16%; }
	#nav li.nav-game.nav-fr {	width:17.5%; }
	#nav li.nav-media.nav-fr { width:17.5%;	}
	#nav li.nav-community.nav-fr { width:31%; }
	#nav li.nav-shop.nav-fr {	width:17%; }	
	
	/* LARGEUR DES RUBRIQUES POUR LE EN */
	#nav li.nav-en  a { text-align:center;	padding-right:25%; }	
	#nav li.nav-news.nav-en {	width:18%; }
	#nav li.nav-game.nav-en {	width:25%; }
	#nav li.nav-media.nav-en { width:19%; }	
	#nav li.nav-community.nav-en { width:28%; }
	#nav li.nav-shop.nav-en {	width:10%; }	
	
	/* LARGEUR DES RUBRIQUES POUR LE DE */
	#nav li.nav-de  a { text-align:center;	padding-right:30%; }
	#nav li.nav-news.nav-de {	width:18%; }
	#nav li.nav-game.nav-de {	width:24%; }
	#nav li.nav-media.nav-de { width:20%; }	
	#nav li.nav-community.nav-de { width:28%; }
	#nav li.nav-shop.nav-de {	width:10%; }
	
	
}


/* =============================================================================
   NAV TABLET
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 1030px) {
	#header, #header.sticky {	
		height:70px;
		top:0px;
	}
	#header-content {	
		height:70px;
		background-position: center center;
	}
	#nav-logo, #nav-logo.sticky {
		left:5px;
		top:-3px;	
		width:160px;
	}
	#header-social { 		
		top:68px;
	}
	#header-social-corner { 
		top:68px;
	}
	#nav {
		top:10px;
		width:80%;
		padding-right:0;
	}	
	#nav li a {
		font-size:23px;
		line-height:23px;
  }	
	#nav li.nav-home {
		display:none;
  }
}
@media screen and (min-width: 601px) and (max-width: 849px) {
	#nav-logo, #nav-logo.sticky {
		left:3px;
		top:3px;
		width:120px;
	}
	#nav ul {
		height:48px;
		width:95%;
		border-right:2px solid #222;
	}
	#nav-right {
		display:none;
	}
	#nav li {
		padding-top:15px;
  }	
	#nav li a {		
		font-size:16px;
		line-height:16px;
  }
}

/* =============================================================================
   NAV MOBILE
   ========================================================================== */
@media screen and (max-width: 600px) {
		
	#header, #header.sticky {		
		position:fixed;
		top:0px;
		height:45px;
		background: url(../img/nav/nav_mobile.jpg) no-repeat top left;
		/* border-bottom:1px solid #b81c09; */
		width:100%;
	}	
	#nav {
		width:100%;
		right:0px;
	}
	#nav-btn {
		display: block;
		position:absolute;
		cursor:pointer;
		z-index:2;
		top:0px;
		right:0px;
		width:60%;
		height:45px;
	}
	#nav-btn span {				
		background: url(../img/nav/nav_btn.jpg) no-repeat top left;
		display: inline-block;
		position: relative;
		float: right;
		width:90px;
		height:32px;
		margin: 6px;
		padding: 6px;
		font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
		font-size:19px;
		line-height:19px;
		vertical-align: top;
		text-align:center;			
		color:#000;
	}
	#nav-btn #nav-icon {
		font-size: 16px;
		line-height:18px;
	}
	
	#nav-logo, #nav-logo.sticky {
		position:absolute;
		z-index:5;
		top:-2px;
		left:8px;
		display:block;
		width:100px;
	}
	
	#nav-left, #nav-right {
		display:none;
	}
	#nav ul {
		width:100%;
		background:none; 
		position: absolute;		
		top:0px;
		left:0px;
		min-height:50px;
		padding:0;
		margin:0;
	}
	#nav li {
		display: none; /* hide all <li> items */
		width:auto;
		margin: 0;
		min-height:0px;		
	}
	
	#header-social, 
	#header-social-corner	{ 
		display: none;
	}
	
	
	#nav.mobile ul {
		background-image:url(../img/nav/nav_mobile.jpg);
		background-repeat: no-repeat;
		background-position:0px 0px;
		padding-bottom:20px;
		padding-top:45px;
	}	
	#nav.mobile ul li {
		display: block;
		width:auto;
		height:40px;
	}
	#nav.mobile li a {		
		width:100%;		
		display: block;
		text-align: left;
		padding:8px 5px 5px 40px;
		font-size: 22px;
		line-height:30px;
		color: #fff;
	}
	#nav.mobile ul li.current {
		display: block;
		/*
		background-image:url('../img/nav/current_mobile.png');
		background-repeat: repeat-x;
		background-position:0px 7px;	
		*/		
	}	
	#nav.mobile ul li.current a {
		color: #ffb415;
		background-image:url('../img/nav/current_mobile_icone.png');
		background-repeat:no-repeat;
		background-position: 4px 7px;
	}
	
	
	#nav.mobile ul li.nav-social {			
		height:45px;
	}	
	#nav.mobile ul li.nav-social a {			
		color:#fff;
		float:left;
		display:inline-block;		
		border-bottom:none;
		width:35px;
		height:35px;
		padding-right:15px;
	}	
	#nav.mobile ul li.nav-social a.nav-social-facebook i, 
	#nav.mobile ul li.nav-social a.nav-social-tumblr i, 
	#nav.mobile ul li.nav-social a.nav-social-youtube i {
		font-size:21px;
		width:35px;
		height:35px;	
		padding: 2px 6px 0px 6px;
	}
	#nav.mobile ul li.nav-social a.nav-social-youtube i {
		font-size:23px;	
	}

}