/* =============================================================================
   CONTENT
   ========================================================================== */
#home {
  position:relative;
	overflow:hidden;
	float:left;	
	width: 100%;
	height:auto;
	z-index:3;
	margin-top:10px;
	padding:0px 0px 20px 10px; 
	background: rgba(0,0,0,.7);
  /* padding: top right bottom left; */
}

/* =============================================================================
   BLOCS
   ========================================================================== */
#home .normal-content {display:block;}
#home .mobile-content {display:none;}

#home .bloc {
	position: relative;
	float:left;
	display: inline-block;
	width: 33%;
	padding: 0px 1.2%;
}
#home .bloc_content {
	width: 100%;
	height: 100%;
	position: relative;
}
#home .bloc-left {	
	position: absolute;
	top:9px;
	left:-8px;
	display:none;
}
#home .bloc-texte {
	position:absolute;
	z-index:0;
	right: 8px;
	width:100%;
	font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-align: right;
	padding: 10px 10px 10px 5px;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0.69) 99%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(12%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.69)), color-stop(100%,rgba(0,0,0,0.85))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0.69) 99%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0.69) 99%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0.69) 99%,rgba(0,0,0,0.85) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0.69) 99%,rgba(0,0,0,0.85) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 */
	text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
#home h2 {	
	color: #ea8f00;
	font-size:20px; 
	line-height:25px;
	margin:0;
	padding:0;
	text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
#home .bloc:hover h2 {
	color: #fff;
}
#home p {	
	color: #fff;
	font-size: 12px;
	margin:0;
	padding:0;
}

#home .normal-content {
	display: block;
}
#home .mobile-content {
	display: none;
}


/* =============================================================================
   BLOCS 1ERE LIGNE
   ========================================================================== */ 
#hgame, 
#hstory, 
#hshop {
	height:160px;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
}
	 
/* =============================================================================
   BLOC GAME
   ========================================================================== */ 
#hgame .bloc_content {
	background: #000 url(../img/home/bloc_game.jpg) no-repeat center;
}
#hgame .bloc_left {
	position: absolute;
	top: -16px;
	left: -16px;
}
#hgame .bloc_right {
	position: absolute;
	top: 0px;
	right: 0px;
}
#hgame .bloc-texte {
	bottom:15px;
}

/* =============================================================================
   BLOC FACTIONS
   ========================================================================== */ 
#hstory .bloc_content {
	background: #000 url(../img/home/bloc_story.jpg) no-repeat center;
}
#hstory .bloc_left {
	position: absolute;
	top: -13px;
	left: -1px;
}
#hstory .bloc_right {
	position: absolute;
	top: -16px;
	right: 0px;
}
#hstory .bloc-texte {
	bottom:15px;
}

/* =============================================================================
   BLOC SHOP
   ========================================================================== */ 
#hshop .bloc_content {
	background: #000 url(../img/home/bloc_shop.jpg) no-repeat center;
}
#hshop .bloc_left {
	position: absolute;
	top: 0px;
	left: 0px;
}
#hshop .bloc_right {
	position: absolute;
	top: -4px;
	right: -20px;
}
#hshop .bloc-download {	
	position: absolute;
	text-align: center;
	background-color:#f39100;
	padding:10px 15px 10px 15px;
	color: #000;
	z-index:10;
	top: 45px;
	right:30px;
	font-size:12px;
	text-transform: uppercase;
}
#hshop:hover .bloc-download {
	background: #fff;
	color: #000;
}
#hshop .bloc-pack {	
	position: absolute;
	top:12px;
	left:8px;
}
#hshop .bloc-pack img {	
	width:120px;
}
#hshop .bloc-logo {	
	position: absolute;
	top:40px;
	right:26px;
	width:55%;
}
#hshop .bloc-logo img {	
	width:100%;
}
#hshop .bloc-texte {
	bottom:5px;
	right: 5px;
	color: #fff;
	font-size: 18px;
}


/* =============================================================================
   BLOCS 2EME LIGNE
   ========================================================================== */ 
#home .bloc-social {	
	position: relative;
	margin:auto;
	width: 100%;
	margin-top: 20px;
}
#home .bloc-top {
	height: 38px;
	width: 100%;
	font-family: 'ringbearermedium', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-transform: lowercase;
	padding: 6px 3px 0px 40px;
	text-shadow: 1px 1px 5px #000000;
	display: block;
}
#home .bloc-top img {
	float:left;
}


#hyoutube .bloc-content,
#hdevblog .bloc-content {
	overflow:hidden;
	width: 100%;
	height:155px;
	background: #1E1E1E;
	border: #484848 1px solid;
	border-top: none;
}


#hfacebook .bloc-top .border_left,
#hyoutube .bloc-top .border_left,
#hdevblog .bloc-top .border_left {
	position: absolute;
	top: 0px;
	left: -2px;
}

#hfacebook .bloc-top .border_right,
#hyoutube .bloc-top .border_right,
#hdevblog .bloc-top .border_right {
	position: absolute;
	top: 0px;
	right: -2px;
}

#hfacebook .texte,
#hyoutube .texte,
#hdevblog .texte {
	background: rgba(0,0,0,0.8);
	height: 28px;
	float: right;
	display: block;
	padding:4px 10px 0px 45px; 
	position: relative;
	color: #fff;
	font-size:20px;
}

#hfacebook .social_corner,
#hyoutube .social_corner,
#hdevblog .social_corner {
	position: absolute;
	top: 0px;
	left: -26px;
	float: none;
}

#hfacebook .bloc-top:hover img,
#hyoutube .bloc-top:hover img,
#hdevblog .bloc-top:hover img {
	opacity: 1 !important;
}

/* =============================================================================
   BLOC FACEBOOK
   ========================================================================== */ 
#hfacebook .bloc-top {
	background: transparent url(../img/home/barre_facebook.jpg) no-repeat top left;
	position: relative;
}

#hfacebook .bloc-content {
	position:relative;
	overflow:hidden;
	width: 100%;
	height:155px;
	background:#d3d2d0;
	border: #484848 1px solid;
	border-top: none;
	padding:80px 0px 0px 0px;
}

#hfacebook .social_icon {
	position: absolute;
	top: -4px;
	left: 0px;
}

#hfacebook .bloc-content {
	padding:80px 0px 0px 0px;
}

#facebook-logout {  
	position:absolute;
	z-index:0;
	top:0px;
	left:0px;
	width:100%;
	text-align:center;
}
#facebook-logout:hover img {  
	opacity:1;
}
/* FLUX FACEBOOK */
#fb-root {  
	display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	margin-top:-50px !important;
	width: 102.5% !important;
	z-index:2;
}
.fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	background:#d3d2d0;
}
.shareSubtext{
	border:none;
}
.profileLink {  
	color: #1E1E1E;
}

/* =============================================================================
   BLOC YOUTUBE
   ========================================================================== */

#hyoutube .bloc-content {
	background: #000 url(../img/home/video.jpg) no-repeat center;
	display: block;
}

#hyoutube .bloc-content img {
	width: 100%;
}
#hyoutube .bloc-top {
	background: transparent url(../img/home/barre_youtube.jpg) no-repeat top left;
}

#hyoutube .social_icon {
	position: absolute;
	top: -3px;
	left: 0px;
}

/* =============================================================================
   BLOC DEVBLOG
   ========================================================================== */


#hdevblog .bloc-top {
	background: transparent url(../img/home/barre_devblog.jpg) no-repeat top left;
}

#hdevblog .social_icon {
	position: absolute;
	top: -4px;
	left: 0px;
}


/* FLUX TUMBLR */
#hdevblog .bloc-content {
	background: #1e1e1e;
	width: 100%;
	height:155px;
}
#hdevblog #tumblr_posts {
	width:100%;
	height:155px;
	overflow:hidden;
	font-size:12px;	
}
#hdevblog #tumblr_posts .loading img{
	margin-top:60px;
}
#hdevblog #tumblr_posts ul, #tumblr_posts li {
	list-style: none;
	margin:0;
	padding:0;
}
#hdevblog #tumblr_posts li {	
	padding-top:5px;
	margin-top:0px;
	padding-bottom:10px;
	margin-bottom:5px;
	border-bottom: 1px solid #3d3d3d;
	padding-left:10px;
	padding-right:10px;
}
#hdevblog #tumblr_posts a {
	color: #ff9d00;
}
#hdevblog #tumblr_posts a:hover {
	color: #fff; 
}
#hdevblog #tumblr_posts .tumblr_desc {
	display:none;
}
#hdevblog #tumblr_posts .tumblr_time {
	color:#808080;
	font-size:10px;
	text-transform:uppercase;	
}