/* Marron du fond : #5D3A27
	 Texte blanc cassé : #F2D794
	 texte marron clair : #B49255
 */

* {
 margin: 0;
 padding: 0;
}

html { font-size: 100% }

body {
 font-family: Verdana,Arial,Helvetica,sans-serif;
 margin: 0;
 background: #8A3204 url(images/fond-extensible.jpg) top center repeat-y; 
 color: #FFDDA3;
 font-size: 0.80em;
 text-align: center;
}

a         { text-decoration:none; color: white; border-bottom: 1px dotted white; } 	
a:visited { text-decoration:none; } 	
a:hover	  { color: #F2D794; border-bottom: 1px solid #F2D794; }
a:active  { border-bottom: 0; color : #F2D794; }

/****** Définition des zones ******/


/* #haut {
 height: 310px;
 background: url(images/bg-haut.jpg) 2px 0 repeat-x;  
} */



#global {
 text-align: left;
 margin: 0 auto; 
}

#haut {
 width: 100%;
 height: 343px;
 background: url(images/fond-haut.jpg) top center no-repeat; 
}

#menu {
 position: relative;
 margin: 0 auto;
 width: 770px;
 height: 320px;
 border: 0px blue solid;
}


#main {
 width: 772px;
 margin: 0 auto;
 padding-bottom: 70px;
 min-height: 700px;
}


#main img {
  float: right;
	margin: 0 0 0 15px !important;
  border: 1px solid #0c792e;
}


/****** Les boutons des sections du menu ********/


#id2,#id4,#id5,#id6,#id36 {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 155px;
 height: 39px;
 border: 0px red solid;
}


#id2   { }
#id4   { left: 155px; }
#id5   { left: 310px; }
#id6   { left: 465px; }
#id36  { left: 620px; width: 153px;  }

#menu  a {
 display: block;
 width: 100%;
 height: 39px;
 background-image: url(images/menu.jpg);
 border: 0;
}

#menu #id2  a { background-position: left top }
#menu #id4  a { background-position: -155px 0 }
#menu #id5  a { background-position: -310px 0 }
#menu #id6  a { background-position: -465px 0 }
#menu #id36 a { background-position: -620px 0 }


#menu #id2  a:hover, #menu .here#id2  a { background-position:    0px bottom }
#menu #id4  a:hover, #menu .here#id4  a { background-position: -155px bottom }
#menu #id5  a:hover, #menu .here#id5  a { background-position: -310px bottom }
#menu #id6  a:hover, #menu .here#id6  a { background-position: -465px bottom }
#menu #id36 a:hover, #menu .here#id36 a { background-position: -620px bottom }

#menu span {
	position:absolute;
	left: -1500px;
	top: 0;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Les sous-menus */

#menu ul {
 text-align:center;
 font-size: 10px;
}

#menu ul li {
 list-style-type: none;
 height: 16px;
 background: transparent url(images/fond-sousmenu.png) top left no-repeat;
}
 
#menu ul a {
 position: relative;
 display: block;
 color: #F7DE8A;
 width: 100%;
 height: 14px;
 background: none;
}

#menu ul a:hover {
 color: white;
 background-position: top left;
}


 
#menu div.apparent {
 position: absolute;
 bottom: 39px;
 width: 155px;
 z-index: 20;
} 

#sousmenu2   { left: 0; }
#sousmenu4   { left: 155px; }
#sousmenu5   { left: 310px; }
#sousmenu6   { left: 465px; }
#sousmenu36  { left: 620px; }




#menu .apparent {
   visibility: visible;
   display: block;
}

#menu .cache {
   visibility: hidden;
   display: none;
}





/****** Main ******/

#main h1#titre {
 margin-left: 37px;
}

#main h1 {
 font-size: 15px;
 margin: 0 10px 0px 10px;
 font-weight: bold;
 text-align: left;
 border-bottom: 0px solid white;
 color: #F2D794;
 background: transparent url(images/h1-bas.jpg) bottom left repeat-x;
 height: 25px;
}

#main h2 {
 font-size: 13px;
 margin: 20px 0 15px 15px;
 font-weight: bold;
 border-bottom: 1px solid #A15D38;
 color: #F2D794;
}

#main h3 {
 font-size: 12px;
 margin: 15px 0 10px 10px;
 font-weight: bold;
 color: #FFECBF;
}

#main h4 {
 color: #44975F;
 font-size: 12px;
 margin: 0px 10px 0px 0px;
 font-weight: bold;
 border-bottom: 0px dashed #44975F;
 font-style :italic;
}

#main label {
 display: block;
 margin-bottom: 5px;
}

#main input {
 margin: 0 5px 0 10px;
}

#main p {
 margin: 0px 10px 10px 10px;
 line-height: 1.3em;
 text-align: left;
 font-size: 12px;
 color: white;
}

#main p.droite {
 text-align: right;
 font-style: italic;
 margin-bottom: 20px;
}


#main ul,#main ol {
 margin: 0px 0px 20px 30px;
 color: white;
}

#main ul li {
 margin: 0px 0px 0px 0px;
 font-size: 12px;
 list-style-image: url(images/folder-petit-vert.gif); 
 list-style-type: square;
}

#main ul ul {
 margin: 0px 0px 0px 25px;
}

#main ul ul li {
 font-size: 10px;
 margin: 0px 0px 0px 0px;
 list-style-image: url(images/sous-puce.jpg);
}

#main img {
 margin: 5px;
}

#main img.patte {
 float: left;
 margin: 7px 0 0 0 !important;
 border: 0;
}

#main ul.nopuce li {
 list-style-image: none;
 list-style-type: none;
}

a.dld,a.link {
 display: block;
 font-size: 14px;
 height: 37px;
 width: 400px;
 margin: 10px auto;
 padding-left: 60px;
 padding-top: 14px;
 background: transparent url(images/telecharger.jpg) top left no-repeat;
 border: 1px #CBDEA7 solid;
 -moz-border-radius: 15px;
}

a.dld:hover,a.link:hover {
 border: 1px #44975F solid;
}

a.dld span {
 font-size: 9px;
 font-style: italic;
 color: #44975F;
 float:right;
 margin-right: 5px;
 margin-top: -12px;
}

a.two-lines {
 height: 45px;
 padding-top: 5px;
}

a.link {
 background-image: url(images/link.jpg);
}

/* Formulaire */

#main div#coordonnees p {
 margin: 5px 10px;
}

#main div#coordonnees p label {
 float: left;
 margin-bottom: 0;
 width: 90px
}

#main div#coordonnees select {
 margin-left: 10px;
}

/* Lightbox */

div#lightbox {
 color: black
}


div#lightbox a {
 border: 0;
}

/* La page d'Accueil et sa colonne de droite */

div#colonne-gauche {
 width: 507px;
 margin-left: 5px;
}

div#colonne-gauche h2 {
 margin: 10px;
 padding-top: 5px;
}

div#colonne-gauche p {
 margin: 10px;
}

div#colonne-gauche ul {
 margin-right: 5px;
}


div#colonne-gauche img {
 margin: 10px;
 float: right;
 border: 0;
}

div#colonne-droite {
 float: right;
 width: 252px;
 margin: 0 0 20px 0;
 text-align: center;
 border-left: 1px solid #A15D38;
}

div#colonne-droite div.haut {
 width: 238px ;
 margin: 0px auto 15px;
 background: #a15d38 url(images/encart-colonne-h.jpg) top left no-repeat;
 border-left: 0px solid white;
}

div#colonne-droite div.bas {
 background: transparent url(images/encart-colonne-b.jpg) bottom left no-repeat;
 padding: 1px 0;
}

div#colonne-droite h3 {
 margin: 0 auto 5px 7px;
 font-size: 13px;
 text-align: left;
}

div#colonne-droite p {
 margin: 5px 7px;
 font-size: 0.85em;
}

div#colonne-droite ul {
 margin: 5px 7px 5px 20px;
 font-size: 0.85em;
 text-align: left;
}


/****** Encarts photos ******/

div.encart-photo {
 position: absolute;
 top: 250px;
 left: 435px;
}

/****** Les chantiers ******/



#main div.liste-chantiers {
 width: 450px !important;
 margin: 0px auto 20px 30px;
}

#main div.liste-chantiers p {
 font-size: 10px;
 margin: 5px 10px 7px;
}

#main div.liste-chantiers p b {
 color: #F2D794;
}

div.chantier-bas {
 background: transparent url(images/encart-chantier-b.jpg) bottom left no-repeat;
 padding-bottom: 1px;
}

div.chantier-haut {
 padding-top: 1px;
 margin: 0px auto 10px;
 background: #a15d38 url(images/encart-chantier-h.jpg) top left no-repeat;
 border-left: 0px solid white;
}

#main div.liste-chantiers p.complet {
 float: right;
 font-size: 35px;
 font-weight: bold;
 margin: -17px -1px auto auto;
 color: #984D25;
 font-variant: small-caps;
}

#pied {
 position: relative;
 width: 804px;
 margin: 0 auto;
 background: transparent url(images/pied.jpg) 0px bottom no-repeat;
}

/*******************************/
/* Zone de crédits             */
/*******************************/


#credits { 
 position: absolute;
 right: 30px;
 bottom: 3px;
 width: 700px;
 color: #DFA98B;
 font-size: 9px;
 clear: both;
 Text-align: right;
}

#credits a { 
 color: #DFA98B;
 border: 0px;  
}

#credits a:hover { 
 color: white;
 border-bottom: 1px solid white;
}
 

/****** Classes utiles ******/

.centrage { text-align: center; }
.spacer { clear: both; }
img.gauche { float: left; }
img.droite { float: right; }
span.note { font-size: 8px; font-weight: bold; color: red; vertical-align: super }