/* =============================================================================
   HEADER
   ========================================================================== */
#header {	
	z-index: 100;
	margin:auto;
  width: 100%;
  color: #000;
	background-repeat: no-repeat;
	background-position: top center;
}
#header-content {	
	position: relative;
  margin:auto;
  width: 100%;
	height:100%;
	max-width: 1000px;
	text-align:left;
}
#nav-logo {  
	display:none;
}

/* =============================================================================
   NAV
   ========================================================================== */
#nav {	
	background-color: #6a0000;
  background-image:url(../img/nav/nav_back.jpg);
  background-repeat: repeat-x;
  font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;
  text-transform:uppercase;	
  text-align: left;
}
#nav ul {
	margin:0;
	padding:0;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav-btn {
  display: none;
}



/* =============================================================================
   ICONES SOCIAL
   ========================================================================== */
#icons_social {
	position: absolute;
	z-index:101;	
	top:0px;
	left: 100%;
	width:auto;
	padding:10px 10px 0px 10px;
	background: rgba(0, 0, 0, 0.3);
	text-align:center;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition:all 0.8s ease;
}
#icons_social.icons_sticked {	
	top:128px;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition:all 0.8s ease;
}
#icons_social a {
	display: block;
	height: 35px;
	width: 35px;
	margin: 0px 0px 10px 0px;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	color: #fff;
}
#icons_social a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-webkit-transition:opacity 0.3s ease;
	-moz-transition:opacity 0.3s ease;
	-o-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}
#icons_social a img {
	width: 100%;
	padding: 15%;
}

#icons_social .facebook {
	background: #3C5998;
	font-size: 23px;
	padding-top: 3px;
}
#icons_social .twitter {
	background: #00ABF0;
	font-size: 20px;
	padding-top: 5px;
}
#icons_social .youtube {
	background: #EF2C26;
	font-size: 25px;
	padding-top: 2px;
}

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

/* =============================================================================
   NAV HORIZONTALE ( DESKTOP + TABLET )
  ========================================================================== */
	 
@media screen and (min-width: 501px) {	
	#nav {
		width:100%;
	}
	#nav li {
		display: inline-block;
		float:left;		
		text-align:center;
		height:42px;		
  }
		
	#nav li a {  
		height:42px;
		display: block; 
		text-align:center;	
		border-right: 1px solid #896901;  
		color: #000;
		font-size:22px;	
	}

	#nav #nav-shop a {
		border-right: none;
	}

	#nav li a h3 {
		font-size: 22px;
		font-weight: normal;
		font-style: normal;
		padding-top:10px;
		margin:auto;
		text-decoration: none;
	}
	
	/* NAV ROLLOVER */
	#nav a:link, #nav a:visited {
		background-image:url(../img/nav/nav_back.jpg);
		background-repeat: repeat-x; 
		outline: none;
		color: #fff;
		text-shadow: 0 1px 0 #9b0000;
	}
	#nav a:hover,
	#nav a.active {  
		background-image:url(../img/nav/nav_back_over.jpg);
		text-shadow: 0 1px 0 #918066;
		color: #2e2e2e;
	}
	

/* =============================================================================
   LARGEUR DES RUBRIQUES
  ========================================================================== */
	
	#nav #nav-news {
		width:15%;
  }
	#nav #nav-game {
		width:15%;
  }
	#nav #nav-media {
		width:12%;
  }
	#nav #nav-forum {
		width:12%;
  }
	#nav #nav-community {
		width:19%;
  }
	#nav #nav-devblog {
		width:12%;
  }	
	#nav #nav-shop {
		width:15%;
  }
	
	/* Eléments visible uniquement pour la version sticky */
	#nav-news img {
		float:left;
		padding-left:15%;
		display:none;
  }
	.header_sticked #nav-news h3 {
		display:none;
  }
	.header_sticked #nav-news img {
		display:block;
  }
	
	/* Eléments visible uniquement pour la version mobile */
	#nav #nav-game-m-rd, 
	#nav #nav-game-m-ab,	
	#nav #nav-game-m-ee {
		display:none;
  }
	
	/* =============================================================================
   SOUS-NAV
  ========================================================================== */
	
	/* RUBRIQUE AVEC SOUS-RUBRIQUE */
	#nav li.hasChildren a span {
		background: url(../img/nav/nav_sprite.gif);
		background-position: right top;
		background-repeat: no-repeat;
		display: block;
		height:42px;
		padding-right:20px;
	}
	#nav li.hasChildren a:hover span,
	#nav li.hasChildren a.active span,
	#nav li.hasChildren.hover a span {
		background-position: right -60px;
	}
	
	/* SOUS NAV */

	#nav li:hover > ul {
		display: block;
	}
	#nav li ul {
		display: none;  
		margin:0;
		padding:0;
		position: relative;
		border: none !important;
		z-index: 1000;
		width: 100%;
		*zoom: 1;
		-moz-box-shadow: 0px 1px 5px #000; 
		-webkit-box-shadow: 0px 1px 5px #000; 
		box-shadow: 0px 1px 5px #000;
	}
	#nav li ul:before,
	#nav li ul:after {
		display: table;
		content: "";
	}
	#nav li ul:after {
		clear: both;
	}
	#nav li ul a {
		float: none; 
	}
	#nav li ul li {
		border-bottom: 1px solid #1e1e21;    
	}
	

	/* SOUS-RUBRIQUES JEUX & BOUTIQUE */
	#nav #nav-game ul, 
	#nav #nav-shop ul {
		width: 280px;
	}
	#nav #nav-shop ul {
		float:right;
	}	
	#nav #nav-game ul li, 
	#nav #nav-shop ul li {
		width: 100%;
		height:60px;
		overflow:hidden;
		padding-left:0px;
		padding-top:0px;   
	}
	#nav #nav-game ul li a, 
	#nav #nav-shop ul li a {
		height:60px;
		background:#2a2a28;
		padding-left:0px;
		padding-top:0px;  
	}	
	#nav #nav-game ul li a img, 
	#nav #nav-shop ul li a img {  
		zoom: 1;
		opacity: 0.7;
		filter: alpha(opacity=70);
		-webkit-transition:opacity 1s ease;
		-moz-transition:opacity 1s ease;
		-o-transition:opacity 1s ease;
		transition:opacity 1s ease;
	}
	#nav #nav-game ul li a:hover img, 
	#nav #nav-shop ul li a:hover img, 
	#nav #nav-game ul li a.active img, 
	#nav #nav-shop ul li a.active img {
		zoom: 1;
		opacity: 1.0;
		filter: alpha(opacity=100);
		-webkit-transition:opacity 0.3s ease;
		-moz-transition:opacity 0.3s ease;
		-o-transition:opacity 0.3s ease;
		transition:opacity 0.3s ease;
	}
	#nav #nav-game ul li a em, 
	#nav #nav-shop ul li a em {
		display:none;
	}

		
}



/* =============================================================================
   NAV TABLET
   ========================================================================== */

@media only screen  and (min-width: 661px) and (max-width: 768px) {
	#nav li a h3 {
	  font-size: 19px;
	}
	#nav-news img {
		padding-left:0;
  }	
}	 	 
	 
@media screen and (min-width: 501px) and (max-width: 660px) {
	#nav li a h3 {
	  font-size: 16px;
	  padding-top:13px;
	}	
	#nav-news img {
		padding-left:0;
		padding-top:5px;
		width:100%;
  }	
}
@media screen and (min-width: 501px) and (max-width:  550px) {
	#nav-news img {
		padding-top:7px;
  }	
}
/* =============================================================================
   NAV MOBILE (VERTICALE)
   ========================================================================== */
@media screen and (max-width: 500px) {	
	
	#logo_rd, #logo_ab, #logo_ee, #logo_esl {
		display:none;
	}	
	
	#header {		
		position:fixed;
		height:55px;
		width:100%;
		background:url('../img/nav/nav_back_mobile.jpg') repeat-x;
	}
	#container {	
		margin-top:45px;	
	}
	#nav {
		width:100%;
	}
	#nav-btn {
		display: block;
		position:absolute;
		cursor:pointer;
		z-index:2;
		top:0px;
		right:0px;
		width:60%;
		height:45px;
	}
	#nav-btn span {		
		font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;
		background-color: #e6e6e6;		
		display: inline-block;
		position: relative;
		float: right;
		width:90px;
		height:32px;
		margin: 6px;
		padding: 6px;
		font-size: 20px;
		line-height:20px;
		text-transform: uppercase;
		vertical-align: top;
		text-align:center;			
		color:#212121;
	}
	/* OVER EFFECT */
	/*
	#nav-btn span:hover {
		background-color: #fff;
		color:#444343;
	}
	*/
	#nav-btn #nav-icon {
		font-size: 17px;
		line-height:20px;
	}
	
	#nav-logo {  
		position:absolute;
		z-index:0;
		top:2px;
		left:4px;
		display:block;
	}		
	#nav ul {
		width:100%;
		position: absolute;
		top:0px;
		left:0px;
		min-height:55px;
		padding:0;
		margin:0;
	}
	#nav li {
		display: none; /* hide all <li> items */
		width:auto;
		margin: 0;
		min-height:0px;		
	}
	
	#nav.mobile ul {
		/* background: rgba(0,0,0,.8); */
		background:url('../img/nav/nav_back_mobile.jpg') repeat;
		padding-bottom:20px;
	}	
	#nav.mobile ul li {
		display: block;
		padding-top:5px;
		width:auto;
		height:40px;
	}
	#nav.mobile #nav-news {
		margin-top:35px;
  }	
	#nav.mobile li a {		
		width:auto;		
		display: block;
		text-align: left;
		padding-left:35px;	
	}
	#nav.mobile ul li a.active {
		display: block;
		background: url(../img/nav/nav-current.png) no-repeat 8px -2px;
	}	
	#nav.mobile ul li a h3 {
		width:auto;
		color:#fff;
		font-size: 19px;
		line-height:20px;		
	}
	#nav.mobile li a:hover h3,
	#nav.mobile li a.active h3 {
		color:#ff9d00;
	}
	
	/* On cache les sous nav et la partie jeu */
	#nav li ul {
		display: none;  
	}
	#nav li:hover > ul {
		display: none;
	}
	#nav #nav-game {
		display:none;
  }
	
	#nav #nav-news img {
		display:none;
  }	
	
}

/* On enlève les boutons sociaux à droite sous 1121px */
@media only screen and (max-width: 1121px) {
	#icons_social {
		display:none;
	}
}