/* =============================================================================
   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:center;
}
#nav-logo {  
	display:none;
}

/* =============================================================================
   NAV
   ========================================================================== */
#nav {	
	background-color: #18211f;
	background-image:url(../img/nav/nav_back.jpg);
	background-repeat: repeat-x;
	font-family: 'elan_itc_t_otregular', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	text-align: left;
	position: relative;
	z-index: 3;
}
#nav ul {
	margin:0;
	padding:0;
}
#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
#nav-btn {
  display: none;
}
#nav li a .nav-icon {  
	display:none;
}


/* =============================================================================
   BTN SHOP
   ========================================================================== */
#btn_shop {
	position: absolute;
	z-index:100;	
	top:-58px;
	width: 100%;
	text-align:center;
}	 
	 
#btn_shop a {
	background:url(../img/shop/btn.jpg);
	background-repeat:repeat-x;
	background-position:50% 0%;
	border:1px solid #48575c;
	height: 50px;
	padding: 10px 15px 8px 15px;
	position: relative;
	margin:auto;
	font-family: 'elan_itc_t_otregular', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform:uppercase;	
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	letter-spacing:1px;
	color:#fff;
	text-shadow: 1px 2px 1px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=2);
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}	 
#btn_shop a:hover {
	background-position:50% -50px;
	color: #fff;
}	 

/* =============================================================================
   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:160px;
	-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 ( RESOLUTION > TABLET )
  ========================================================================== */
	 
@media screen and (min-width: 481px) {	
	#nav {
		width:100%;
	}
	#nav li {
		display: inline-block;
		float:left;		
		text-align:center;
		height:42px;
  }
	#nav li #nav-shop {
		border-right: none;
	}
		
	#nav li a {  
		height:42px;
		width:100%; 
		display: block; 
		text-align:center;	
		border-right: 1px solid rgba(255,255,255,0.1);  
		color: #fff;
	}
	#nav li a .nav-icon {  
		float:left;
		margin-top:5px;
		margin-left:5px;		
	}
	#nav li a h3 {
		font-size: 18px;
		font-weight: normal;
		font-style: normal;
		letter-spacing:1px;
		margin:0;
		padding-top:10px;
		color: #fff;
		text-decoration: none;
		text-align: center;
	}
	
	/* NAV ROLLOVER */
	#nav a:link, #nav a:visited {
		background-repeat: repeat-x; 
		outline: none;
		text-shadow: 1px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=2);
	}
	#nav a:hover,
	#nav a.active {
		background: rgba(210,2,2,0.2);  
	}
	#nav li a:hover h3,
	#nav li a.active h3 {
		color: #fff;
		text-shadow: 1px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=2);
	}
	
	
	/* =============================================================================
   LARGEUR DES RUBRIQUES
  ========================================================================== */
	
	#nav #nav-news {
		width:15%;
		background: transparent url(../img/nav/nav_back_first.jpg) no-repeat top left;
  }
	#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%;
		background: transparent url(../img/nav/nav_back_shop.jpg) repeat-x top left;
  }
	#nav #nav-shop h3 {
		position:absolute;
		z-index:3;
		color: #000;
		text-shadow:none;
		filter:none;
		font-weight:bold;
		padding-top:11px;
  }
	#nav #nav-shop img {
		position:absolute;
		top:0px;
		right:0px;
		z-index:0;
  }
	#nav #nav-shop a:hover,
	#nav #nav-shop a.active {
		background:none;  
	}
	#nav #nav-shop img {
		zoom: 1;
		opacity: 1.0;
  }
	
	/* Eléments visible uniquement pour la version sticky */
	#nav-news #nav-sticky {
		float:left;
		padding:0;
		margin:0;
		display:none;
  }
	.header_sticked #nav-news .nav-icon {
		display:none;
  }
	.header_sticked #nav-news h3 {
		display:none;
  }
	.header_sticked #nav-news #nav-sticky {
		display:block;
  }
	
	
	/* FR */
	#nav #nav-news.nav-fr {width:13%;}
	#nav #nav-news.nav-fr a {padding-left:10px;}
	#nav #nav-news.nav-fr a #nav-sticky {margin-left:-6px;}
	#nav #nav-game.nav-fr {width:12%;}
	#nav #nav-media.nav-fr {width:13%;}
	#nav #nav-media.nav-fr a {padding-left:5px;}
	#nav #nav-forum.nav-fr {width:14%;}
	#nav #nav-community.nav-fr {width:19%;}
	#nav #nav-devblog.nav-fr {width:13%;}
	#nav #nav-shop.nav-fr {width:16%;}
	#nav #nav-shop.nav-fr a {padding-left:13%;}
	/* EN */
	#nav #nav-news.nav-en {width:13%;}
	#nav #nav-news.nav-en a {padding-left:10px;}
	#nav #nav-news.nav-en a #nav-sticky {margin-left:-6px;}
	#nav #nav-game.nav-en {width:15%;}
	#nav #nav-media.nav-en {width:11%;}
	#nav #nav-forum.nav-en {width:13%;}
	#nav #nav-forum.nav-en a {padding-left:5px;}
	#nav #nav-community.nav-en {width:19%;}
	#nav #nav-devblog.nav-en {width:13%;}
	#nav #nav-shop.nav-en {width:14%;}	
	#nav #nav-shop.nav-en a {padding-left:33%;}
	/* DE */
	#nav #nav-news.nav-de {width:13%;}
	#nav #nav-news.nav-de a {padding-left:10px;}
	#nav #nav-news.nav-de a #nav-sticky {margin-left:-6px;}
	#nav #nav-game.nav-de {width:15%;}
	#nav #nav-game.nav-de a {padding-left:10px;}
	#nav #nav-media.nav-de {width:13%;}
	#nav #nav-media.nav-de a {padding-left:7px;}
	#nav #nav-forum.nav-de {width:12%;}
	#nav #nav-forum.nav-de a {padding-left:4px;}
	#nav #nav-community.nav-de {width:18%;}
	#nav #nav-devblog.nav-de {width:14%;}
	#nav #nav-shop.nav-de {width:15%;}	
	#nav #nav-shop.nav-de a {padding-left:28%;}	
	/* SP */
	#nav #nav-news.nav-sp {width:15%;}
	#nav #nav-news.nav-sp a {padding-left:5px;}
	#nav #nav-news.nav-sp a #nav-sticky {margin-left:10px;}
	#nav #nav-game.nav-sp {width:14%;}
	#nav #nav-media.nav-sp {width:11%;}
	#nav #nav-media.nav-sp a {padding-left:4px;}
	#nav #nav-forum.nav-sp {width:11%;}
	#nav #nav-forum.nav-sp a {padding-left:4px;}
	#nav #nav-community.nav-sp {width:18%;}
	#nav #nav-devblog.nav-sp {width:14%;}
	#nav #nav-devblog.nav-sp a {padding-left:4px;}	
	#nav #nav-shop.nav-sp {width:15%;}
	#nav #nav-shop.nav-sp a {padding-left:29%;}	
	
	#nav #nav-game.nav-fr ul li a, 
	#nav #nav-shop.nav-fr ul li a,
	#nav #nav-game.nav-en ul li a,  
	#nav #nav-shop.nav-en	ul li a, 
	#nav #nav-game.nav-de ul li a,  
	#nav #nav-shop.nav-de ul li a, 
	#nav #nav-game.nav-sp ul li a, 
	#nav #nav-shop.nav-sp ul li a {
		padding:0;
		margin:0; 
	}
	
}

/* =============================================================================
   NAV HORIZONTALE ( RESOLUTION > DESKTOP )
  ========================================================================== */
@media screen and (min-width: 1001px) {
	#nav li a {  
		text-align:left;	
	}
	#nav li a h3 {
		font-size:20px;
		padding-top:10px;
	}
	#nav li a .nav-icon {  
		display:block;		
	}	
	#nav #nav-shop h3 {
		padding-top:10px;
  }
	
}

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

@media only screen  and (min-width: 661px) and (max-width: 768px) {
	#nav li a h3 {
	  font-size: 16px;
		padding-top:11px;
	}
	#nav-news #nav-sticky {
		padding-left:0;
		padding-top:5px;
		width:100%;
  }	
}	 	 
	 
@media screen and (min-width: 481px) and (max-width: 660px) {
	#nav li a h3 {
	  font-size: 12px;
	  padding-top:14px;
	}	
	#nav-news #nav-sticky {
		padding-left:0;
		padding-top:5px;
		width:100%;
  }	
	#nav #nav-shop h3 {
		padding-top:14px;
  }
	
	#nav #nav-shop.nav-en a {padding-left:15%;}
	#nav #nav-shop.nav-sp a {padding-left:6%;}	
	
}
@media screen and (min-width: 481px) and (max-width:  550px) {
	#nav-news #nav-sticky {
		padding-top:7px;
  }	
}
/* =============================================================================
   NAV MOBILE (VERTICALE)
   ========================================================================== */
@media screen and (max-width: 480px) {	
	
	#logo {
		display:none;
	}	
	#header {
		height: 55px;
		width:100%;
		background:url('../img/nav/nav_back.jpg') repeat-x;
		position:fixed;
	}
	#container {	
		margin-top:42px;	
	}	
	#nav {
		width:100%;
	}
	#nav-btn {
		display: block;
		position:absolute;
		cursor:pointer;
		z-index:4;
		top:0px;
		right:0px;
		width:60%;
		height:30px;
	}
	#nav-btn span {		
		font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;
		background-color: rgba(0,0,0,.5);		
		display: inline-block;
		position: relative;
		float: right;
		width:90px;
		height:30px;
		margin: 6px;
		padding: 6px;
		font-size: 20px;
		line-height:20px;
		text-transform: uppercase;
		vertical-align: top;
		text-align:center;			
		color:#e6e6e6;
	}
	#nav-btn #nav-icon-mini {
		font-size: 17px;
	}
	#nav-logo {  
		position:absolute;
		z-index:5;
		top:2px;
		left:4px;
		display:block;		
	}	
	#nav #nav-home {
		display:none;
  }	
	#nav ul {
		width:100%;
		position: absolute;
		top:0px;
		left:0px;
		min-height:55px;
		padding:0;
		margin:0;
	}
	#nav li {
		display: none;
		width:auto;
		margin: 0;
		min-height:0px;	
	}
	#nav.mobile ul {
		/* background: rgba(0,0,0,.8); */
		background:url('../img/pattern/pattern_grey.gif') repeat;
		padding-bottom:30px;
	}	
	#nav.mobile ul li {
		display: block;
		padding-top:5px;
		width:auto;
		height:40px;
	}
	#nav.mobile #nav-news {
		margin-top:20px;
  }	
	#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 0px;		
	}	
	#nav.mobile ul li a h3 {
		width:auto;
		color:#c1c0bd;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		letter-spacing:1px;
		line-height:30px;		
	}
	#nav.mobile li a:hover h3,
	#nav.mobile li a.active h3 {
		color:#fff;
	}
		
	#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;
	}
}