@charset "utf-8";
/* CSS Document */

@font-face {  
font-family:'Nilland';  
src: url('/font/Nilland.ttf') format('opentype'); } 
@font-face {  
font-family:'Nilland-Black';  
src: url('/font/Nilland-Black.ttf') format('opentype'); }  

/* generic*/

* { margin:0; padding:0}
body { background:url(../img/bg_body.jpg) repeat #43859d;color:#fff; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px;padding:0 }
.centreur { width:940px; margin:auto;/* border:solid 1px #fff; */}
section { display:block; position:relative}
/*generic */

.disclaimer { display:none }
header {background:url(../img/bg_header.png) repeat-x top ; width:100%; height:141px; display:block;}
	 .logo{padding:40px 0 0 20px; }
	 .html5_rub { float:right; height:196px;width:50px; margin:0 30px 0; background:url(../img/rub_html5.png) top no-repeat; position:relative; z-index:10}
	

.TAGZONE {font-family:Nilland;  display:block; height:160px; margin:0 0 30px}
.TAGZONE .photo { background:url(../img/photo_ond.png) no-repeat top;  float:left; width:170px; height:151px; margin:20px 0 0}
.TAGZONE .tag { width:700px;  float:left;  margin:-10px 0 0 30px; text-shadow:0 1px 2px #07394c}
.TAGZONE .tag h1 { font-size:26px;}
.TAGZONE .tag strong { font-family:Nilland-Black;}

.SHOWCASE {background:url(../img/bg_zone_visuel.png) repeat-x top ; height:421px; width:100%; display:block; padding:30px 0 0}
.SHOWCASE .contenu_case { width:913px; height:367px; margin:auto; background:url(../img/bg_transparent.png) repeat; -moz-border-radius:5px;-webkit-border-radius:5px}
.SHOWCASE .rub_showcase { background:url(../img/rub_showcase.png) top no-repeat; height:123px; width:123px; position:absolute; z-index:100; margin:0 0 0 12px }

.ZONE_TXT {padding:0 0 50px}
.ZONE_TXT .bloc { width:250px;  float:left; margin:0 30px 0}
.ZONE_TXT .bloc  h2 { font-size:26px; color:#0c3d57; font-family:Nilland-Black; margin:0 0 10px;  background:url(../img/border_h2.png) repeat-x bottom;padding:0 0 5px; text-shadow:0 1px #86b4c3 }
	 .ZONE_TXT .about p { font-size:15px; }
	  .ZONE_TXT .link_list {margin:0  20px}
	 .ZONE_TXT .link_list img {margin:0 10px 0; vertical-align:middle }
	 .ZONE_TXT .link_list li {display:block; list-style:none; margin:0 0 5px; }
	 .ZONE_TXT .link_list li:hover {}
 	 .ZONE_TXT .link_list li a { color:#fff; text-decoration:none }
	 .ZONE_TXT .link_list li a:hover {border-bottom:dotted 1px #fff;}
	 
	 .bloc .service_info {width:100%; background:url(../img/border_h2.png) repeat-x bottom; padding:10px 0 10px;}
	 .bloc .service_info h3 { font-size:17px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff;}
	 .bloc .card {background:url(../img/card.png) no-repeat; width:301px; height:195px; z-index:50; position:relative; margin:40px 0 -65px}




footer { /*max-height:212px;*/ background:#48311a url(../img/bg_footer.jpg) repeat-x top; width:100%; display:block; clear:both; margin:50px 0 0;  border-top:solid 7px #866d54; color:#cba674 ; }
footer p { margin:20px 0 0; font-size:12px; clear:both}
footer a { color:#cba674; text-decoration:none}
	.cont_reward {margin:10px 0 0 ; clear:both; height:50px; padding:0 0 10px }
	.cont_reward .logo {height:2px;  no-repeat; float:left;display:block; }
	.cont_reward .logo:hover{   display:block; }
		/* logos */
		.cssmayo {  background:url(../img/logos_rewards1.png) no-repeat; width:116px; }
			.cssmayo:hover {background:url(../img/logos_rewards1.png) no-repeat 0 -43px; }
		.cssdose { background:url(../img/logos_rewards1.png) no-repeat -130px 0px; width:116px;  }
			.cssdose:hover{background:url(../img/logos_rewards1.png)  -130px -43px}
		.designmart {background:url(../img/logos_rewards1.png) no-repeat -270px 0px ; width:130px; }
			.designmart:hover {background:url(../img/logos_rewards1.png) -270px -43px ; }
		.cssgarden {background:url(../img/logos_rewards1.png) no-repeat -430px 0px ; width:130px; }
			.cssgarden:hover {background:url(../img/logos_rewards1.png) -430PX -43px ; }
		.CSSVAULT {background:url(../img/logos_rewards1.png)no-repeat -590px 1px ; width:110px; }
			.CSSVAULT:hover {background:url(../img/logos_rewards1.png) -590px -42px ; }				
		

/*carousel*/

.work { position:relative; }
.work ul{ list-style-type: none;overflow:hidden; width:900px; position:relative;  }
.work ul li{ float:left; width:895px; height:350px; background:url(images/project.png) no-repeat 0 0; padding:8px; }
	 .work-info{ float:left; width:290px; padding:10px; margin:0 0 0 20px; color:#edd0b3; font-size:12px; line-height:18px; }
	 .work-info .scred_link{color:#edd0b3; font-size:12px; line-height:18px; text-decoration:none }

		.work-info h3 { font-size:20px; margin:10px 0 30px; color:#fff }
		.work-info .cont_feat { height:30px; width:100%; padding:15px 5px 0; margin:10px 0 0; border-top:dashed 1px #71593e; }
		
		.cont_feat .tag { box-shadow:0 1px #333;padding:2px 5px ;font-size:11px;-moz-border-radius:2px;-webkit-border-radius:2px; text-transform:uppercase; margin:0 5px 0 }
			.blue { background:#97e3fc;  color:#3d7d95; }
			.blanc { background:#fff; color:#666; }
		 	.green { background:#c2e111;  color:#515e04; }
		 	.pink { background:#b86e81;  color:#fedfe7; }
			.brown{ background:#a1886d; color:#f2d9be;}
			.generic {background: #a1886d; color:#f2d9be}
		.link_visit { color:#fff; font-size:bold; float:right; font-size:10px; border: solid 1px transparent;text-decoration:none; padding:2px 4px;}
		.link_visit:hover { color:#d6cec6;border:dashed 1px #d6cec6;  }
		.sign {  -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg); float:right; margin:20px 0  }


.work ul li .work-image{ float:left; width:547px; height:351px; position:relative; overflow:hidden; font-size:0; line-height:0; margin:3px 0 0 5px;}
.work p { padding-bottom:15px; }
.work h4 { padding:5px 0 10px 0; }

.about { font-size:14px; color:#fff; font-weight:bold}
	
	/** jCarousel **/
.projects .jcarousel-clip { width:913px; height:270px; overflow:hidden; position:relative; }

.jcarousel-prev,.jcarousel-next { font-size:0; line-height:0; width:49px; height:49px; cursor:pointer; position:absolute; top:136px; z-index:2;}
.jcarousel-prev { left:-30px; background:url(../img/btn_shwocase.png) right top; height:61px; width:30px; }
.jcarousel-next { right:-30px; background:url(../img/btn_shwocase.png) left top; height:61px; width:30px;  }

/*carousel*/