/* =============================================================================
   NAV
   ========================================================================== */
#header {	
	position:fixed;
	top:0px;
	z-index: 100;
  width: 100%;
	height:100px;
  color: #fff;
	background-image:url('../img/nav/nav.png');
	background-repeat: no-repeat;
	background-position: top center;
}
#header-content {	
	position: relative;
  margin:auto;
  width: 100%;
	height:100%;   
	max-width: 1000px;
}



/* =============================================================================
   LOGO
   ========================================================================== */
#nav-logo {  
	position: absolute;
	left:0px;
	top:5px;
}



/* =============================================================================
   SOCIAL
   ========================================================================== */
#header-social { 
	position:absolute;
	top:62px;
	right:0px;	
	height: 20px;
	width:530px;
	background: transparent url(../img/nav/nav_social_pattern.png) repeat top left;
	padding: 0px;
	font-size: 11px;
}
#header-social-corner { 
	position:absolute;
	top:62px;
	right:530px;	
	height: 20px;
	width:39px;
}
.socialicons { 
	color: #fff;
	float: left;
}
.socialicons .icons { 
	display:inline-block;
	float: left;
	font-family: 'microgrammabold', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	font-size:13px;
	font-weight: normal;
	font-style: normal;
	letter-spacing:0.8px;
	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: 135px;
	height: 20px;
	cursor: pointer;
	position: relative;
	font-family: 'microgrammabold', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	font-size:10px;
	font-weight: normal;
	font-style: normal;
	letter-spacing:0.8px;
	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: 3px 10px 0px;
}
.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 #9d1504;
}
.flagselect .submenu a { 
	display: block;
	clear: both;
	height:20px;
	padding-left: 5px;
	color: #fff;
	border-bottom: 1px solid #9d1504;
}
.flagselect .submenu a:hover { 
	color: #ffda74;
}
.flag { 
	margin-top: 4px;
	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 {
	margin: 0;
	padding: 5;
}
#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: 'microgrammabold', Arial, "Helvetica CY", Helvetica, sans-serif;	
	font-weight: normal;
	font-style: normal;		
	text-transform:uppercase;
	outline: none;	
}
#nav li a:hover {
  color: #fff;
	/* border-top: 1px solid #fff; */
  /* background: rgba(1, 1, 1, 0.3); */
}
#nav li.current a {
  color: #fff;
}

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

/* =============================================================================
   HEADER QUI SE FIXE EN HAUT QUAND ON SCROLL
   ========================================================================== */
.header_sticked {	
	position:fixed;
	top:0px;
	z-index:200;	
}

/* =============================================================================
   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-twitter i {
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
	background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: linear-gradient(top, #5bc0de, #2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #2f96b4;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

/* =============================================================================
   NAV DESKTOP
   ========================================================================== */
@media screen and (min-width: 601px) {		
	#nav {
		width:76%;
	}
	#nav li {
    display: inline-block;
		float:left;		
		text-align:center;
		max-height:57px;
    background: transparent url(../img/nav/nav_separator.png) top right no-repeat;
		/* border-right: 1px solid rgba(255, 255, 255, 0.5);*/	
  }
	#nav li a {
		color:#ffc000;
		font-size:15px;
		letter-spacing:0.8px;
		padding-top:25px;
		height:58px;
		background-position: 50% -90px;
		background-repeat:no-repeat;
  }	
	/* CURRENT */
	#nav li a:hover, 
	#nav li.current a {
		background-image:url('../img/nav/current_14.png');
		background-repeat:no-repeat;
		background-position: 50% 0px;
	}
	
	#nav li.nav-home {
		display:none;
  }		
	#nav li.nav-social {
		display:none;
  }	
	#nav li.nav-shop {
		background: transparent;
  }
		
	/* LARGEUR DES RUBRIQUES POUR LE EN */
	#nav li.nav-news.nav-en {	width:14%; }
	#nav li.nav-game.nav-en {	width:20%; }
	#nav li.nav-media.nav-en { width:14%; }	
	#nav li.nav-community.nav-en { width:24%; }
	#nav li.nav-forum.nav-en { width:14%; }	
	#nav li.nav-shop.nav-en {	width:14%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE FR */
	#nav li.nav-news.nav-fr {	width:14%; }
	#nav li.nav-game.nav-fr {	width:14%; }
	#nav li.nav-media.nav-fr { width:14%;	}
	#nav li.nav-community.nav-fr { width:25%; }
	#nav li.nav-forum.nav-fr { width:14%; }
	#nav li.nav-shop.nav-fr {	width:18%; }	
	
	/* LARGEUR DES RUBRIQUES POUR LE DE */
	#nav li.nav-news.nav-de {	width:14%; }
	#nav li.nav-game.nav-de {	width:20%; }
	#nav li.nav-media.nav-de { width:14%; }	
	#nav li.nav-community.nav-de { width:24%; }
	#nav li.nav-forum.nav-de { width:14%; }	
	#nav li.nav-shop.nav-de {	width:14%; }
	
	/* LARGEUR DES RUBRIQUES POUR LE SP */
	#nav li.nav-news.nav-sp {	width:17.5%; }
	#nav li.nav-game.nav-sp {	width:17.5%; }
	#nav li.nav-media.nav-sp { width:14%; }
	#nav li.nav-community.nav-sp { width:23%; }
	#nav li.nav-forum.nav-sp { width:14%; }	
	#nav li.nav-shop.nav-sp {	width:14%; }
	
	
	/* IMAGE DE FOND DES RUBRIQUES POUR LE FR */	
	#nav  li.nav-community.nav-fr a:hover, 
	#nav  li.current.nav-community.nav-fr a 	{
		background-image:url('../img/nav/current_25.png');
	}
	#nav  li.nav-shop.nav-fr a:hover, 
	#nav  li.current.nav-shop.nav-fr a	{
		background-image:url('../img/nav/current_18.png');
	}
	
	/* IMAGE DE FOND DES RUBRIQUES POUR LE EN */		
	#nav  li.nav-game.nav-en a:hover, 
	#nav  li.current.nav-game.nav-en a {
		background-image:url('../img/nav/current_20.png');
	}
	#nav  li.nav-community.nav-en a:hover, 
	#nav  li.current.nav-community.nav-en a 	{
		background-image:url('../img/nav/current_24.png');
	}	
	
	/* IMAGE DE FOND DES RUBRIQUES POUR LE DE */		
	#nav  li.nav-game.nav-de a:hover, 
	#nav  li.current.nav-game.nav-de a {
		background-image:url('../img/nav/current_20.png');
	}
	#nav  li.nav-community.nav-de a:hover, 
	#nav  li.current.nav-community.nav-de a 	{
		background-image:url('../img/nav/current_24.png');
	}	
	
	/* IMAGE DE FOND DES RUBRIQUES POUR LE SP */
	#nav  li.nav-news.nav-sp a:hover, 
	#nav  li.current.nav-news.nav-sp a {
		background-image:url('../img/nav/current_18.png');
	}
	#nav  li.nav-game.nav-sp a:hover, 
	#nav  li.current.nav-game.nav-sp a {
		background-image:url('../img/nav/current_18.png');
	}
	#nav  li.nav-community.nav-sp a:hover, 
	#nav  li.current.nav-community.nav-sp a 	{
		background-image:url('../img/nav/current_23.png');
	}
	
}


/* =============================================================================
   NAV TABLET
   ========================================================================== */
@media screen and (min-width: 800px) and (max-width: 1024px) {
	#header {	
		background-image:url('../img/nav/nav_tablet.png');
		background-repeat: no-repeat;
		background-position: top left;
	}
	#nav-logo {
		left:5px;
		top:12px;
		width:190px;
	}
	#nav-logo img  {
		float:left;
		width:100%;
	}
	#nav {
		width:80%;
	}
	#nav li a {
		font-size:13px;
  }	
	#nav li.nav-home {
		display:none;
  }
}
@media screen and (min-width: 601px) and (max-width: 799px) {
	#header {	
		background-image:url('../img/nav/nav_tablet.png');
		background-repeat: no-repeat;
		background-position: -220px 0px;
	}
	#nav-logo {
		left:7px;
		top:15px;
		width:120px;
	}
	#nav-logo img  {
		float:left;
		width:100%;
	}
	#nav {
		width:86%;
	}
	#nav li a {
		font-size:10px;
  }	
	#nav li.nav-home {
		display:none;
  }
}

/* =============================================================================
   NAV MOBILE
   ========================================================================== */
@media screen and (max-width: 600px) {
		
	#header {		
		position:fixed;
		top:0px;
		height:45px;
		background: url(../img/nav/nav_mobile.gif) repeat;
		/* 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/pattern/pattern_red.gif) repeat;
		display: inline-block;
		position: relative;
		float: right;
		width:90px;
		height:32px;
		margin: 6px;
		padding: 6px;
		font-family: 'microgrammabold', Arial, "Helvetica CY", Helvetica, sans-serif;	
		font-size: 15px;
		line-height:18px;
		text-transform: uppercase;
		vertical-align: top;
		text-align:center;			
		color:#fff;
	}
	#nav-btn #nav-icon {
		font-size: 16px;
		line-height:18px;
	}
	
	#nav-logo {
		position:absolute;
		z-index:0;
		top:8px;
		left:8px;
		display:block;
	}
	#nav-logo img  {
		width:120px;
	}	
	
	#nav ul {
		width:100%;
		position: absolute;
		top:45px;
		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: url(../img/nav/nav_mobile.gif) repeat;
		padding-bottom:10px;
	}	
	#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: #eeefef;
		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;
		display:inline-block;
		float:left;
		border-bottom:none;
		width:35px;
		height:35px;
		padding-right:15px;
	}	
	#nav.mobile ul li.nav-social a.nav-social-facebook i {
		font-size:22px;
		width:35px;
		height:35px;	
		padding: 1px 6px 1px 6px;
	}
	#nav.mobile ul li.nav-social a.nav-social-twitter i {
		font-size:20px;
		width:35px;
		height:35px;	
		padding: 2px 6px 0px 6px;
	}
	#nav.mobile ul li.nav-social a.nav-social-youtube i {
		font-size:23px;
		width:35px;
		height:35px;	
		padding: 1px 6px 0px 6px;
	}

}