/* CSS Document */


/*****************	STYLES	*/
*{
margin: 0px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
border:none;
}
ul li{
list-style: none;
}
a{
text-decoration:none;
}
#body{
}
/******************	STRUCTURE*/
#contener{
	position:relative;
	margin: auto;
	width: 965px;
	height:630px;
}

/*****************	TOP		*/
#top{
position:relative;
top:0px;
left:0px;
width: auto;
height: 16px;
background: #202020;
}
#reseaux{
position:absolute;
margin:auto;
width:965px;
top:-180px;
left:0px;
z-index:99;
}
#reseaux_btn{
position:relative;
margin:auto;
float:right;
background: url(../img/reseaux/reseaux.png) no-repeat right bottom;
width:91px;
height:26px;
}
#reseaux_content{
position:relative;
width:965px;
height:180px;
background:#202020;
color:#FFFFFF;
}

#reseaux_content a{
color:#FFFFFF;
text-align:center;
}
#reseaux_content a:hover{
color:#666666;
}
	#reseaux_content table{
	margin-left:0px;
	
	}
		#reseaux_content table td{
		padding: 15px 20px 10px 20px;
		}
			#reseaux_content table form div{
			float:left;
			
			padding:10px 10px 0px 5px;
			}
			#reseaux_content table form input{
			margin:5px 10px 0px 0px;
			background:#666666;
			width: 130px;
			color:#FFFFFF;
			}
			#reseaux_content table form #reseaux_submit{
			background: url(../img/reseaux/btn_valide.jpg) no-repeat;
			width:69px;
			height:23px;
			padding:0px;
			margin:0px;
			}
				#reseaux_content table form #reseaux_submit:hover{
				color:#333333;
				cursor:pointer;
				}
			
/*****************	HEAD	*/
#head{
clear:both;
height:170px;
}
#logo{
position:relative;
float:left;
width: 250px;
height: 160px;
}
	#logo img{
	position:relative;
	top: 35px;
	left:55px;
	}

#menu{
float:left;
width:715px;
}
	#menu #menu_rubrique{
	position:relative;
	float:left;
	background: #FFFFFF url(../img/separator_menu.jpg) no-repeat left bottom;
	padding: 45px 0px 0px 165px;
	height:24px;
	z-index:50;
	
	}
	#menu li{
	float:left;
	height:18px;
	padding: 0px 10px 0px 10px;
	/*border-bottom:#c70000 solid 5px;*/
	}
		#menu li a{
		font-weight:bold;
		color: #b2b2b2;
		}
		#menu li a:hover{
		color:#000000;
		}
		#menu .sousmenu{
		position:absolute;
		top:60px;
		left:0px;
		width:390px;
		height:25px;
		}
			#menu .sousmenu li{
			position:relative;
			float:left;
			padding: 2px;
			margin-top:8px;
			}
			#menu .sousmenu li a{ 
			display:block;
			position:relative;
			float:left;
			color:#c70000;
			}
				#menu .sousmenu li a:hover{
				color:#333333;
				} 
			#menu #menu_reference{
			left: 308px;
			}
			#menu #menu_savoir-faire{
			left: 396px;
			}
#titre{
position:relative;
float:left;
left: 95px;
top: 50px;

}
	.img_titre{
	float:left;
	}
	.ss_titre{
	position:relative;
	float:left;
	top:11px;
	left:10px;
	font-size:13px;
	font-weight:normal;
	color:#a6a6a6;
	
	}
	.etoile{
	position:absolute;
	top:115px;
	left: 855px;
	width: 111px;
	height:113px;
	}
		.brochure{
		background: url(../img/brochure_1.png) no-repeat;
		}
		.brochure:hover{
		background: url(../img/brochure_2.png) no-repeat;
		}
		.devis{
		background: url(../img/devis_1.png) no-repeat;
		}
		.devis:hover{
		background: url(../img/devis_2.png) no-repeat;
		}
		.contact{
		background: url(../img/contact_1.png) no-repeat;
		}
		.contact:hover{
		background: url(../img/contact_2.png) no-repeat;
		}
/*****************	MID	*/	
#mid{
clear:both;
height: 400px;
}
#left{
float:left;
width:365px;
height: 400px;
}
#right{
position:relative;
float:left;
width:600px;
height:400px;

}
#full{
position:relative;
float:left;
width:965px;
height: 400px;
overflow:hidden;
}
/*****************	BOT	*/
#footer{
text-align:center;
font-size:9px;
line-height:12px;
color:#ababab;	
}
/********************************************************************	BTN	*/
.lien_exemple{
display:block;
width:164px;
height:26px;
background:url(../img/exemples.jpg) no-repeat;
margin-top: 20px;
float:left;
}
.lien_retour{
display:block;
width:75px;
height:26px;
background:url(../img/retour.jpg) no-repeat;
margin-top: 20px;
float:left;
}
.lien_savoirplus{
display:block;
width:114px;
height:26px;
background:url(../img/en-savoir-plus.jpg) no-repeat;
margin-top: 20px;
float:left;
}
.lien_visite{
display:block;
width:107px;
height:26px;
background:url(../img/visiter-le-site.jpg) no-repeat;
margin-top: 20px;
float:left;
}
.lien_temoignage{
display:block;
width:157px;
height:26px;
background:url(../img/temoignage_client.jpg) no-repeat;
margin-top: 20px;
float:left;
}

/********************************************************************	accueil	*/
#citation_accueil{
position:relative;
width:300px;
height:105px;
top: 20px;
left:15px;
}
	#citation_accueil a{
	display:block;
	padding:5px;
	font-size:15px;
	font-weight:bold;
	color:#ababab;
	text-transform:uppercase;
	}
	#citation_accueil a:hover{
	color:#868686;
	}
#encart_accueil{
position:relative;
float:left;
top: 73px;
}
	#encart_accueil #encart_gauche{
	color:#FFFFFF;
	position:relative;
	display:block;
	width:162px;
	height:162px;
	float:left;
	}

	#encart_accueil #encart_droit{
	color:#FFFFFF;
	position:relative;
	display:block;
	width:161px;
	height:161px;
	float:left;
	}	
		#encart_accueil img, #encart_accueil a{
		margin:0px;
		padding:0px;
		border:none;
		}

#slide_acueil{
position:relative;
height:358px;
width:577px;
overflow:hidden;

}
	#slide_acueil_content{
	position:relative;
	}
		#slide_acueil_content div {
		position:relative;
		float:left;
		width:577px;
		}
		
			#fleche_left{
			position:absolute;
			background: url(../img/fleche_gauche_n.jpg) no-repeat;
			width: 22px;
			height:35px;
			left:-25px;
			top:155px;
			}
				#fleche_left:hover{
				background: url(../img/fleche_gauche_g.jpg) no-repeat;
				}
			#fleche_right{
			position:absolute;
			background: url(../img/fleche_droite_n.jpg) no-repeat;
			width: 22px;
			height:35px;
			left:577px;
			top:155px;
			}
				#fleche_right:hover{
				background: url(../img/fleche_droite_g.jpg) no-repeat;
				}
				
/********************************************************************	agence	*/
#encart_agence img{
position:absolute;
top:-4px;
}
#encart_agence p{
text-align:justify;
border: 2px #666666 dashed;
margin: 35px 0px 0px 25px;
padding: 20px 10px 10px 10px;
}
#magazine_agence{
width:358px;
height:340px;
overflow:hidden;
}
	#magazine_agence #magazine_agence_content{
	width:3580px;
	}
	#magazine_agence #magazine_agence_content div{
	float:left;
	}
.img_valeur{
position:absolute;
top:300px;
left:15px;
}
/********************************************************************	savoir faire	*/

#slide_savoirfaire_content{
width:5400px;
height:400px;
}
	.slide_savoirfaire{
	width:965px;
	height:400px;
	float:left;
	margin:0px 50px 0px 50px;
	}
		.slide_savoirfaire_left{
		width:785px;
		height:250px;
		float:left;
		padding-top:20px;
		}
		.slide_savoirfaire_right{
		position:relative;
		width:180px;
		height:250px;
		float:left;
		}
		.slide_savoirfaire_bot{
		width:965px;
		height:150px;
		clear:both;
		margin-right:5px;
		text-align:center;
		background:#999999;
		}
			.slide_savoirfaire_right ul{
			border: 2px #666666 dashed;
			margin: 20px 0px 5px 0px;
			padding: 25px 25px 15px 25px;
			font-weight:bold;
			color:#999999;
			}
			.slide_savoirfaire_right ul strong{
			color:#C70000;
			line-height:30px;
			}
			.slide_savoirfaire_right img{
			position:absolute;
			top:0px;
			left:8px;
			}
		#savoirfaire div{
		width:420px;
		height:170px;
		float:left;
		margin: 20px 60px 0px 0px;
		}
.tab_savoirfaire .lien_exemple, .tab_savoirfaire .lien_retour{
margin-top:10px;
} 
/********************************************************************	REFERENCE -------- WEB 	*/
#slide_web{
position:relative;
width:915px;
height:400px;
overflow:hidden;
margin-left:22px;
}

#slide_web_content{
height:auto;
}
.slide_web{
position:relative;
float:left;
width:921px;
height:400px;
}
.lien_references{
float:left;
margin: 0px 16px 32px 16px
}

			#fleche_left_ref{
			position:absolute;
			background: url(../img/fleche_gauche_n.jpg) no-repeat;
			width: 22px;
			height:35px;
			left:0px;
			top:345px;
			}
				#fleche_left_ref:hover{
				background: url(../img/fleche_gauche_g.jpg) no-repeat;
				}
			#fleche_right_ref{
			position:absolute;
			background: url(../img/fleche_droite_n.jpg) no-repeat;
			width: 22px;
			height:35px;
			left:937px;
			top:345px;
			}
				#fleche_right_ref:hover{
				background: url(../img/fleche_droite_g.jpg) no-repeat;
				}
/********************************************************************	REFERENCE -------- open 	*/
#left_ref{
position:relative;
float:left;
width:490px;
height: 395px;
border: solid 5px #CCCCCC;
overflow:hidden;
}
#right_ref{
position:relative;
float:left;
width:445px;
height:auto;
margin-left:15px;
position:relative;
top: 0px;
}
	.slide_ref{
	position:relative;
	width:495px;
	height:395px;
	float:left;
	}
#right_ref h3{
color:#C70000;
font-size:20px;
text-transform:uppercase;
}
#right_ref a{
color:#C70000;
text-align:left;

}
#right_ref a:hover{
color:#999999;
}
/**************** ACCORDION */
#right_ref #accordion span{
background: url(../img/slide_bg.png) no-repeat;
display:block;
height:18px;
cursor:pointer;
margin-bottom:3px;
}
#right_ref #accordion span:hover{
background: url(../img/slide_bg_hover.png) no-repeat;
}
#right_ref #accordion span strong{
position:relative;
display:block;
background:#ffffff url(../img/puce_fleche.jpg) no-repeat left;
height:18px;
width:100px;
margin-top:0px;
padding:0px 0px 0px 25px;
}
#right_ref #accordion .element {
clear:both;
margin-bottom:3px;
}
#right_ref #accordion .element p{
padding: 5px 0px 10px 10px;
margin-bottom:3px;
text-align:justify;
}
/********************************************************************	TEMOIGNAGE */
#temoignage{
position:relative;
float:left;
width:965px;
height: 380px;
overflow:hidden;
}
#temoignage_content{
position:relative;
}
.temoignages{
position:relative;
width: 875px;
} 
.temoignages tr{
text-align:justify;
vertical-align:bottom;
}
.temoignages td{
padding-bottom: 20px;
}
	.temoignages a{
	margin:0px 25px 0px 0px;;
	}
	.temoignages h3{
	color:#C70000;
	font-size:15px;
	text-transform:uppercase;
	}
	.temoignages b{
	color:#000;
	font-size:15px;
	text-transform:uppercase;
	display:block;
	margin-bottom: 10px;
	}
	.temoignages i{
	color:#999999;
	font-size:15px;
	font-weight:bold;
	display:block;
	margin-top: 10px;
	}
	#fleche_bas_tem{
			position:absolute;
			background: url(../img/fleche_bas_n.jpg) no-repeat;
			width: 35px;
			height:22px;
			left:898px;
			top:530px;
			}
				#fleche_bas_tem:hover{
				background: url(../img/fleche_bas_g.jpg) no-repeat;
				}
			#fleche_haut_tem{
			position:absolute;
			background: url(../img/fleche_haut_n.jpg) no-repeat;
			width: 35px;
			height:22px;
			left:932px;
			top:530px;
			}
				#fleche_haut_tem:hover{
				background: url(../img/fleche_haut_g.jpg) no-repeat;
				}
/********************************************************************	CONTACT */
#encart_contact{
text-align:justify;
border: 2px #666666 dashed;
margin: 10px 0px 0px 0px;
padding: 20px 0px 30px 80px;
}
	#encart_contact h3{
	color:#C70000;
	font-size:15px;
	text-transform:uppercase;
	}
	#encart_contact a{ /*mailto*/
	color:#C70000;
	}
#form_contact{

}
#form_contact td{
height: 30px;
}
#form_contact span{
display:block;
width: 100px;
}
#form_contact input, #form_contact textarea{
border: solid 1px #999999;
width:300px;
}
#form_contact .submit{
width: 100px;
height:20px;
}
#form_contact .submit:hover{
background:#CCCCCC;
}
#form_contact .check{
position:relative;
top:2px;
width:auto;
margin-right:2px;
margin-left:3px;
}