﻿html {font-size:100%}
body{font-family: Candara, Georgia, Arial, cursive;font-size:14px;background:url("../img/bg.png") repeat-x;}
p {color:#505050; font-size:18px;}
#general{position:relative;width:1080px;height:930px;margin:0 auto;background:url("../img/contour.png") no-repeat center;}
#contenu_index{	position:absolute;width:1060px;height:870px; left:30px;padding:0px 0px 0px;}
#fond_accueil{position:absolute;left:270px;top:75px; width:477px;height:434px}
#fond_ml{position:absolute;left:270px;top:0px; width:477px;height:340px;background: url("../img/fond_mentions_legales.jpg") no-repeat;}
#contenu_ml{position:absolute;width:800px;height:150px; top: 340px;left:120px;padding:0px 0px 0px;}
#fond404{position:absolute;left:270px;top:275px; width:477px;height:434px;background: url("../img/fond_mentions_legales.jpg") no-repeat;}
#contenu_main{position:absolute;width:1060px;height:434px; top: 50px;left:30px;padding:0px 0px 0px;}
#menu_ctn{position:absolute;width:900px;height:51px; top: 640px;left:60px;padding:0px 0px 0px;}
#menu_ctn_img{position:absolute;width:960px;height:110px; top: 510px;left:60px;padding:0px 0px 0px;}
#menu_formulaire{position:absolute;width:530px;height:500px; top: 120px;left:260px;padding:0px 0px 0px}
#mentions{position:absolute;width:1030px;height:30px; top: 865px;text-align:center;padding:0px 0px 0px;font: 0.9em ; color:#771ca7}
#mentions a {color:#7e1eb0; font-weight:bold; text-decoration: none;}
#mentions a:hover, #mentions a:focus, #mentions a:active {color:#9933CC; font-weight:bold; text-decoration: none;}


/***********/
/* ACCUEIL */
/***********/
#accueil_btn {
	background:url("../img/puce_accueil.png") no-repeat left top;
	float: left ;
	width: 965px ;
	height: 40px ;
	border: none;
	}
#accueil_btn a{
margin-left:68px;
color:#7e1eb0;
font-weight:bold;
text-decoration: none;
font-size: 18px;
line-height: 2.2em ;
padding: 10px 0px;
}

#accueil_btn a:hover, #accueil_btn a:focus, #accueil_btn a:active  {
color:#FF6600;
}

/******************/
/* Menu graphique */
/******************/
#nav {
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;		/* Création du contexte de formatage */
	}
#nav li {
	float: left ;
	width: 177px ;
	border: none;
	margin-right: 3px ;
	color: #fff ;
	}
#nav li a {
	height: 39px ;
	display: block ;
	background: url(../img/btn_off.jpg);
	color: #9933CC ;
	font-size: 22px;
	font-weight:bold;
	line-height: 0.8em ;
	padding: 6px 0 ;
	text-align: center ;
	text-decoration: none ;
	}
#nav li a:hover, #nav li a:focus, #nav li a:active {
	background: url(../img/btn_on.jpg);
	color: white;
	text-decoration: none ;
	}
	

ul#nav li ul.sous_menu{
display:none;
	padding:0;
	margin:0;
}

ul#nav li ul.sous_menu li{
	padding:0;
	margin:0;
	height: 39px ;
	display: block ;
	background: url(../img/btn_off.jpg);
	color: #9933CC ;
	font-weight:bold;
	line-height: 0.8em ;
	text-align: center ;
	text-decoration: none ;
}

ul#nav li ul.sous_menu li a:hover, ul#nav li ul.sous_menu li a:focus, ul#nav li ul.sous_menu li a:active {
	background: url(../img/btn_on.jpg);
	color: white;
	text-decoration: none ;
	}

ul#nav li:hover ul{
display:block;
}
	
#menuimg {
	float: left ;
	width: 180px ;
	height: 110px ;
	border: none;
	margin-right: 0px ;
	}
	

/******************/
/* CARTE SECTEURS */
/******************/

#conteneur_carte {width: 893px;position:relative;left:60px; top:35px}
#conteneur404 {width: 893px;position:relative;left:60px; top:35px}

ul#carte {
	list-style: none;
	background: url(../img/carte.png) no-repeat 0 0;
	position: relative;
	width: 883px;
	height: 660px;	
	margin: 0;
	padding: 0;
}

ul#carte li {
	position: absolute;
}

ul#carte li a{
	display: block;
	height: 100%;
	text-indent: -9000px;
}

#secteur1 {
	z-index:18;
	width: 412px;
	height: 326px;
	top: 10px;
	left: 181px;
}

#secteur2 {
	z-index:19;
	width: 680px;
	height: 375px;
	top: 272px;
	left: 192px;
}

#secteur3 {
	z-index:20;
	width: 354px;
	height: 350px;
	top: 184px;
	left: 0px;
}

ul#carte li a:hover {
	background: url(../img/carte.png) no-repeat 0 0;	
}

ul#carte li#secteur1 a:hover {
	z-index:29;
	background-position: -408px -694px;
}

ul#carte li#secteur2 a:hover {
	z-index:28;
	background-position: -192px -1071px;
}

ul#carte li#secteur3 a:hover {
	z-index:30;
	background-position: 0 -678px;
}

h1 {
	color: #505050;
	font-size: 22px;
	font-weight:bold;
	line-height:1em;
}
h2 {
	float:right;
	color: #7e1eb0;
	font-size: 22px;
	font-weight:bold;
	line-height:1em;
}
h3 {
	text-align:center;
	color: #7e1eb0;
	font-size: 20px;
	font-weight:bold;
	line-height:1em;

}
h4 {
	text-align:left;
	color: #7e1eb0;
	font-size: 14px;
	font-weight:bold;
	line-height:0.7em;
}
h5 {
	text-align:left;
	color: #505050;
	font-size: 14px;
	font-weight:bold;
	line-height:1em;
}


/*******************/
/* FICHES PRODUITS */
/*******************/

.scroll {
    height: 780px;
    width: 1040px;
    overflow: auto;
   /* overflow-x: hidden; */
    position: relative;
    clear: left;
}

.scrollContainer div.panel {
/*	border:1px solid #aeaeae;*/
    padding-left: 10px;
    height: 760px;
    width: 1010px;
}

#reference {
    float:left;
	margin:0px;
    height: 40px;
    width: 300px;
}

#prix {
    float:left;
	margin:0px;
    height: 40px;
    width: 420px;
}

#descriptif {
	/*border:1px solid #aeaeae;*/
	position:relative;
	margin:0px;
	padding:0px;
    height: 180px;
    width: 720px;
	float:left;
	text-align: justify;
	overflow:auto;
}

#conteneur {
	width: 1080px;
	padding: 0px;
	margin: 0 auto;
}
#slider {
    width: 1080px;
    margin: 0 auto;
    position: relative;
}

#conteneur_img {
    float:left;
	padding-top:10px;
	width:720px;
	height:540px;
}

#outils {
	/*border:1px solid #aeaeae;*/
	padding-top:30px;
	width:245px;
	height:140px;
    float:right;
}

#outils a {padding-left:5px;font-size: 20px;color:#505050; font-weight:bold; text-decoration: none;}
#outils a:hover, #outils a:focus, #outils a:active {padding-left:5px;font-size: 20px;color:#777777; font-weight:bold; text-decoration: none;}


#navigation {
	/*border:1px solid #aeaeae;*/
	padding-top:10px;
	width:245px;
	height:74px;
	float:right;
}

#suivant {
	padding-bottom:8px;
	background:url(../img/btnsuivant.png) no-repeat;	
/*	border:1px solid #aeaeae;*/
	width:245px;
	height:22px;
    float:right;
}
#precedent {
	padding-bottom:8px;
	background:url(../img/btnprecedent.png) no-repeat;	
/*	border:1px solid #aeaeae;*/
	width:245px;
	height:22px;
    float:right;
}

#suivant a {line-height:1.1em;padding-left:35px;font-size: 18px;color:#FEFEFE; font-weight:bold; text-decoration: none;}
#suivant a:hover, #suivant a:focus, #suivant a:active {line-height:1.1em;padding-left:37px;font-size: 18px;color:#FFFFFF; font-weight:bold; text-decoration: none;}

#precedent a {line-height:1.1em;padding-left:35px;font-size: 18px;color:#FEFEFE; font-weight:bold; text-decoration: none;}
#precedent a:hover, #precedent a:focus, #precedent a:active {line-height:1.1em;padding-left:37px;font-size: 18px;color:#FFFFFF; font-weight:bold; text-decoration: none;}

#dpe {
/*	border:1px solid #aeaeae;*/
	padding-top:54px;
	width:245px;
	height:240px;
    float:right;
}

#slider {
    width: 1080px;
    margin: 0 auto;
    position: relative;
}


/**************/
/* FORMULAIRE */
/**************/

.cssform2 {
width: 300px;
height:30px;
float: right;
margin: 0;
padding: 0;
}

.cssform2 fieldset{
border:1px solid #7e1eb0;
font-size:13px;
font-weight:bold;
color: #7e1eb0;
}

.cssform2 select{
border:1px solid #ccc;
width:90px;
float: left;
margin: 0;
padding: 0;
}

.cssform p{
font-size:16px;
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 260px; /*width of left column containing the label elements*/
/*border-top: 1px dashed gray;*/
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -260px; /*width of left column*/
width: 250px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type=&quot;text&quot;]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 250px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
} 