/* CSS Document */

/* RESET CSS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
	behavior: url(iepngfix.htc);
}

a img, :link img, :visited img, a, a:hover, a:link, a:active {
	border: 0;
	text-decoration: none;

}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
}
/* --------------------------------------------------------*/
h1, h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size:22px;
	color: #FFF;
}
/* solution pour poser une ombre sur un texte */
/*h1 span {
     color: #F90;
     display: block;
     position: absolute;
     top: 1px;
     left: 1px;
     
     }*/

h2, .obligatorio{
font-size:12px;
color:#FFF;
}

.rowElem h2{
	color:#666;
}
.ie7 #last .rowElem h2{
	color:#666;
	width:400px;
	float:left;
}
body{
background-color:#7F3BB6;
}

#container{
	width:950px;
	margin: 0 auto;
}

#content{
	width:950px;
	min-height:100px;
	background-image:url(../images/fond_content_V2.jpg);
	background-repeat: repeat-y;
	float:left;
}
#content_bottom, #content_bottom2, #content_bottom3{
	width:950px;
	height:306px;
	background-image:url(../images/fond_content_bootom.jpg);
	background-repeat:no-repeat;
	float:left;
	margin-top:-306px;
	position:relative;
	z-index:0;
}
.ie6 #content_bottom{
	margin-top:-306px;
}

#content_bottom2{
	margin-top:-276px;
	
}
#content_bottom3{
	margin-top:-296px;
	
}
#content_mode{
	width:800px;
	background-image:url(../images/fond_content_V2.jpg);
	background-repeat: repeat-y;
	height:400px;
	float:left;	
}
#content_devis{
	width:100%;
	height:auto;
		
}
#header{
	width:950px;
	height:249px;
	background-image:url(../images/fond_header_V2.jpg);
	background-repeat:no-repeat;
	float:left;
}
#footer{
	width:950px;
	height:35px;
	background-image:url(../images/fond_1px.jpg);
	background-repeat:repeat-y;
	float:left;
	
}
#footer p{
	font-size:10px;
	color:#CCC;
}
#footer_copy p{
	width:200px;
	margin-top:5px;
	margin-left:30px;
}
#footer_text p{
	width:400px;
	text-align:center;
	float:left;
	margin:-25px 0 0 270px;
}
.ie6 #footer_text p{
	margin:-25px 0 0 135px;
}
#footer_ac p{
	width:200px;
	float:left;
	text-align:right;
	margin:-18px 0 0 720px;
}
.ie6 #footer_ac p{
	margin:-18px 0 0 360px;
}
#menu{
	width:480px;
	height:60px;
	float:left;
	margin:-141px 0 0 445px;
	position:relative;
	z-index:0;
	
}
.ie6 #menu{
	margin:-141px 0 0 223px;
}
.titre_index{
	width:950px;
	float:left;
	margin:-50px 0 0 40px;
	position:relative;
	z-index:3;
}
.titre_index_mode{
	width:auto;
	float:left;
	*float:none;
	margin:10px 0 30px 10px;
	*margin:10px 0 30px 20px;
	position:relative;
	z-index:3;
}
.titre_index_devis{
	margin:10px 0 0px 10px;
	z-index:3;
}
.ie6 .titre_index{
	margin:-50px 0 0 20px;
}

.text_index, .text_solution{
	width:460px;
	margin:0px 0 0 40px;
	text-align:justify;
	position:relative;
	z-index:1;
	line-height:12px;
}

.maison{
	float:left;
	margin:-310px 0 0 522px;
	position:relative;
	z-index:1;
}
.ie6 .maison{
	margin:-370px 0 0 262px;	
}
#bt_visiter{
	width:350px;
	float:left;
	margin:-130px 0 0 620px;
	position:relative;
	z-index:2;
}
.ie6 #bt_visiter{
	margin:-130px 0 0 310px;
}

#bts_flash{
	width:450px;
	height:80px;
	float:left;
	margin:60px 0 0 20px;
	position:relative;
	z-index:1;
}
.bts_index{
	width:150px;
	height:75px;
	float:left;
	margin:0;
}
#solutions{
	width:950px;
	height:152px;
	background:url(../images/fond_solutions.jpg);
	background-repeat:no-repeat;
	float:left;
}
.sol_serenite{
	width:267px;
	height:95px;
	float:left;
	padding:20px 20px 20px 25px;
	margin-top:10px;
}

/*------------------------------
VALEURS
------------------------------*/
.text_valeurs, .text_valeurs_emploi{
	width:400px;
	height:80px;
	margin:0px 0 0px 50px;
	float:left;
	
}

.ie6 .text_valeurs, .ie6 .text_valeurs_emploi{	
	height:80px;
	margin:0px 0 0px 30px;	
}
.text_valeurs_emploi{
	width:850px;
	height:auto;
	margin-bottom:20px;
}
.text_valeurs_emploi_mode{
	width:770px;
	height:auto;
	margin-bottom:20px;
	float:left;
}
.text_valeurs_emploi h2 p{
	width:850px;
}
.text_valeurs_emploi_mode h2, .text_valeurs_emploi_mode h2 p{
	width:750px;
	margin-left:10px;
}
.text_valeurs h2 p{
	margin:-5px 0 0 0;
}
.ie6 .text_valeurs h2 p{
	margin:0px 0 0 0;
}
.text_valeurs img{
	margin:10px 0 10px 0px;
}

.ie6 .text_valeurs img{
	margin:0px;
}
.text_valeurs h2{
	width:400px;
	height:50px;
	margin:0px 0 0px 50px;
	line-height:14px;
}

.box_valeurs, .box_mode{
	width:800px;
	height:auto;
	float:left;
	margin:-10px 0 0 10px;
	position:relative;
	z-index:3;
}
.box_mode{
	width:700px;
	margin:0px 0 0 0px;
	
}
.box_valeurs h2{
	margin:7px 0 0 38px;
	line-height:15px;
	width:500px;
}
#couple{
	width:278px;
	height:218px;
	background:url(../images/couple.png);
	background-repeat:no-repeat;
	float:left;
	margin:-130px 0 10px 672px;
	position:relative;
	z-index:2;
}
.ie6 #couple{	
	margin:-130px 0 10px 336px;
}
.check{
	margin:-2px 15px 0 0;
	float:left;
}
/*------------------------------
OUTILS
------------------------------*/
.tabbed_area{
	margin:0px 0 0 10px;
	color: #fff;
	position:relative;
	z-index:2;
	
}

ul.tabs {  
	width:180px;
	height:360px;
    margin:0px 0 20px 40px; 
	
} 
 

ul.tabs li {  
	border-bottom:1px solid #CCC;
	width:180px;
}
ul.tabs li a{  
	font-size:11px;
    color:#CCC;
	width:170px;
	*width:auto;
}
.ie6 ul.tabs li a{  
	width:140px;
	margin:-30px 0 0 40px;
}

ul.tabs a, ul.tabs a:link, ul.tabs a:active{
	line-height:40px;
	display:block;
}
ul.tabs a:hover{
	color:#F90;	
}

.icon_outils{
	width:28px;
	margin-top:8px;
	margin-right:8px;
	float:left;
}

.content{
	width:650px;
	margin:-430px 0 100px 250px;
	*margin:-430px 0 100px 250px;
	text-align:justify;
	float:left;
	*float:none;
	color:#fff;
}
.ie6 .content{
	margin:-430px 0 100px 250px;
	position:relative;
	z-index:3;
	
}
.content img{
	margin-bottom:20px;
}
.bt_exemple{
	width:100%;
	float:left;
	margin:10px 0 0 0px;
	padding:10px;
}
#content_3 .bt_exemple, #content_5 .bt_exemple{
	padding:0px;
}
#content_4 .bt_exemple{
	border:1px solid #fff;
}

#content_3 .bt_exemple img, #content_4 .bt_exemple img, #content_5 .bt_exemple img{
	float:left;
	border:2px solid #FFF;
}
#content_3 .bt_exemple img:hover, #content_4 .bt_exemple img:hover, #content_5 .bt_exemple img:hover{
	float:left;
	border:2px solid #F93;
}
.text_exemple{
	width:300px;
	height:auto;
	padding-left:10px;
	float:left;
}
.bt_exemple img{
	margin:0px 0 0 0px;
}
#content_4 ul li p{
	margin-bottom:20px;
}
.illust_bois{
	width:250px;
	height:100px;
	float:left;
	margin:20px 20px 0 0px;
	border:1px solid white;
}
.camera{
	width:200px;
	position:absolute;
	height:163px;
	margin:450px 0 0 -220px;
	-margin:-40px 0 0 -220px;
}
.ie7 .camera{
	width:200px;
	
	height:163px;
	margin:50px 0 0 -900px;
	
}
/*------------------------------
SOLUTIONS
------------------------------*/
.box_solution, .box_solution2{
	width:900px;
	min-height:300px;
	float:left;
	margin:0px 0 -10px 10px;
	position:relative;
	z-index:3;

}
.box_solution2{
	min-height:400px;
	margin:0px 0 -30px 10px;
}
.ligne{
	width:800px;
	height:1px;
	background:#FFF;
	float:left;
	margin:10px 0 20px 90px;
}

.text_solution h2{
	margin:7px 0 0 38px;
	line-height:15px;
	width:650px;
}
.table_solution_serenite ul{
	width:800px;
	height:100px;
	
	padding-left:35px;
	
}
.table_solution_serenite ul li{
	width:130px;
	min-height:100px;
	margin:10px 5px 0 5px;
	border:1px dotted #CCC;
	float:left;
}
.table_solution_serenite ul li h2{
	width:120px;
	padding:0 5px;
	margin:0;
	float:left;
	text-align:center;
}
.icon_solution{
	width:150px;
	margin:10px 0 10px 55px;
	float:left;
}
.visuel_sol, .visuel_sol2{
	width:200px;
	height:100px;
	float:left;
	/*margin:-140px 0 0 50px;*/
}
.visuel_sol2{
	width:351px;
	height:50px;
	margin:20px 0 0px 140px;
}
/*------------------------------
MODE D'EMPLOI
------------------------------*/
.box_mode_emploi{
	width:750px;
	height:auto;
	float:left;
	*float:none;
	margin:0px 0 10px 10px;
	*margin:0px 0 10 50px;
	position:relative;
	z-index:3;
}
.box_mode_emploi a{
	color:#FFF;
}
/*------------------------------
CONTACT
------------------------------*/
#contact{
	width:830px;
	height:auto;
	float:left;
	margin:20px 0 0 40px;
	-margin:20px 0 0 20px;
	padding:20px;
	z-index:3;
	position:relative;
	background-color:#FFF;
	opacity:.8;
}
#contact_devis{
	width:760px;
	height:360px;
	float:left;
	margin:0px 0 0 0px;
	padding:20px;
	z-index:3;
	position:relative;
	background-color:#FFF;
	overflow:hidden;
}
#formulario{
	float:left;
}
#contact img{
	margin-left:30px;
	margin-top:0px;
	*margin:-120px 0 0 -470px;
	-margin:-120px 0 0 -450px;
}


.obligatorio{
	margin-top:5px;
	float:left;
}
.required{
	float:left;
	width:250px;
	height:20px;
	background: url(../images/fond_input.jpg);
	background-repeat:repeat-x;
	margin:-15px 0 0 130px;
	border:1px solid #000;
}
.required2{
	width:380px;
	height:auto;
	border:1px solid #000;
	background:url(../images/fond_input2.jpg);
	background-repeat:repeat-x;
	background-color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.submit{
	width:70px;
	float:left;
	margin:10px 0 0 310px;
	font-size:14px;
	
}
#mentions{
	float:left;
	margin:-300px 0 0 600px;
	*margin:-290px 0 0 600px;
	-margin:-310px 0 0 300px;
}
 #mentions2{
	float:left;
	margin:-200px 0 0 600px;
	*margin:-190px 0 0 600px;
	-margin:-210px 0 0 300px;
}
#mentions h2, #mentions2 h2{
	line-height:18px;
	color:#999;
}
#mentions h2 a{
	color:#F90;
}

#flashAlert{
	width:auto;
	min-height:350px;
	z-index:99;
	position:relative;
	padding-left:40px;
}
#flashAlert.text_soustitre{
	font-size:12px;
	color:#FFF;
}
#flashAlert_devis.text_soustitre{
	font-size:12px;
	color:#ccc;
}
.alert{
	font-size:14px;
}
.intitule{
	width:150px;
	padding:3px 0;
	color:#CCC;
	float:left;
}
.valeur{
	width:300px;
	height:auto;
	padding:3px 0;
}
.valeur label.noObligatorio2{
	float:left;
	width:400px;
}
#gracias{
	width:200px;
	float:left;
	margin:-100px 0 0 600px;
}
#gracias_devis{
	width:200px;
	float:left;
	margin:-100px 0 0 500px;
}
#gracias .check, #gracias_devis .check{
	float:left;
	margin-left:-50px;
}
/*------------------------------
SLIDER
------------------------------*/

p { text-align: justify; margin: 0px 0 }

		
		p, ul { font-size: 12px; line-height: 1.3em } 
		
		p a, li a { color: #FC6; text-decoration: none }
		
		p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
		
		p#cross-links { text-align: center }
		
		p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
		
		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }
		
		a:focus { outline:none }
		
		img { border: 0 }
		
		h3 { font-size:15px; font-weight:bold; margin-bottom: 5px; padding-bottom: 3px; text-align: left; color: #FC6; }
		
		body {
			font-family:Arial, Helvetica, sans-serif;
			background: #000;
			color: #000;
			
		}
		
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 0px 0;
			position: relative;
			width: 100%;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			border:none; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 950px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 400px;
			clear: both;
			background:none;
			
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 950px; /* Also specified in  .stripViewer  above */
		}
		
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
		}
		
		
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			position:relative;
			z-index:3;
			margin:auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
			width:550px;
			float:left;
			margin:135px 0 0 430px;
			position:relative;
			z-index:3;

		}
		.ie6 .stripNav, .ie6 .stripNav ul, .ie6 .stripNav ul li, .ie6 .stripNav ul li{
			
			position:relative;
			z-index:3;
		}
		.ie6 .stripNav ul {
			width:auto;
			margin:120px 0 0 223px;
			
		}
		.stripNav ul li {
			height:60px;
			width:90px;
			float: left;
			margin-right: 7px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
			position:relative;
			z-index:5;
			
			
		}
		.ie6 .stripNav ul li {
			height:50px;
			width:auto;
			margin-right: 9px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
	
			
			
		}
		
		.stripNav li a { /* The nav links */
			height:40px;
			width:88px;
			font-size: 11px;
			font-weight: bold;
			text-align: center;
			line-height: 48px;
			background: none;
			color: #fff;
			text-decoration: none;
			display: block;
			padding: 0px;
			float:left;
			margin:-10px 0 0 15px;
			
			
		}
		.ie6 .stripNav li a { /* The nav links */
			height:40px;
			width:88px;
			padding: 0;
			line-height: 60px;
			margin:0;
		}
		
		
		
		
		.stripNav li a:hover {
			background: none;
			color: #FFF;
		}
		
		.stripNav li a.current {
			background: none;
			color: #333;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
		}