body{
margin:0;
padding:0;
font-family : tahoma;
font-size: 0.8em; /*em correspond à une unité de valeur comme px par exemple pour en savoir plus ----->   http://batraciens.net/css-astuces/apprendre-css.htm  en bas de la page*/
text-align : center;
height : 100%;
width : 100%;
background:#000 url(./img/fond.jpg) no-repeat center top ;/*texture de fond #b2fb5d*/
}

html, body {
           height : 100%;
           width : 100%;
           padding : 0;
           margin : 0;
           text-align : center;/*permet de centrer l'enssemble du site*/
		   }

#global { /*englobe toute les divs*/
background:url(./img/fond_site.gif) repeat-y center;
width:775px;
height:500px;
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
margin:20px auto;
margin-bottom:0px;
text-align:left;
padding:0px;
}

#hautcadre{/*baniere*/
width:765px;
height:134px;
margin:0 auto;
background:url(./img/baniere.jpg) no-repeat center;
}

#hautcadreh{/*baniere*/
width:822px;
height:103px;
margin:0px auto;
background:url(./img/baniereh.jpg) no-repeat center;
padding:0px;
}

#bascadre{/*pemret d'intégrer une image en bas de cadre*/
width:765px;
height:40px;
margin:0px auto;
padding:0px;
background-color:#6dd210;
font-size:10px;
}

div#global p.pamargbas{
margin:10px 0 0 0;
}
 
div#global p{/*s'applique à tout les p de la div global*/
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
text-align:left;
z-index:-1;
line-height: 1.6em;
margin: 15px 0px ;
padding:0;
}

html>body #global {/*taille minimum hack*/
	min-height: 500px;/*450*/
	height:auto;
	}

#contenu{/*permet de placé et customiser le contenu de la page*/
border:1px;
padding:10px 0 0px 20px;
margin:0px;;
z-index:0;
width:745px;/* IE hack*/
font-family: verdana, arial, times, sans-serif; 
height:270px;/* IE hack*/
font-size: 0.9em;
color:#333333; 
line-height: 18px;
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
}

#contenu li{
list-style-type: disc;
}

#contenu ul{
 list-style-position: inside;
}

html>body #contenu {/*taille minimum du contenu  HACK*/
	min-height:270px;/*hack FF 270*/
	margin:0px;
	height:auto;
	width:740px;
	}

h1{/*apparence des titres de 1er niveau*/
color: #5aab0c;
font-size: 18px;
font-weight:normal;
margin:0;
}


h2{/*personnalisation des titre h2*/
color:#452e0e;
margin:20px 0 10px 0px;
font-size:16px;
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:600;
}

p.important{
padding:15px !important;
background-color:#e3f9a9;
border:2px solid #7cd90e;
color:#422d00;
font-style:italic;
font-weight:bold;
}

/*--------------------------------------menu haut --------------------------------------------------------*/
#menu{
position: absolute;
width:450px;
height:20px;
top:115px;
left:320px;
/*margin: 140px 0 0 420px;*/
}

ul#menu_h{/*personnalisation de la liste menu*/
top:0px;
position:absolute; 
margin:0 0 0 10px;
padding:0;  
list-style-type:none;
font-size:0.90em;
}

#menu_h li, #liste_menu_rea li{/*transformer le positionnement en colonne des liste à unpositionnement en ligne.*/
display: inline;
}

#menu_h a, #liste_menu_rea li a{/*personnalisation des liens du menu */
color:#503a09;
text-decoration:none;
}

#menu_h a:hover {/*personnalisation des liens du menu au survol*/
color:#ffffff;
text-decoration:underline;
}

#liste_menu_rea{ 
text-align:center;
margin:20px 0px 0px 0px;
padding:0px;
}

#liste_menu_rea li a{
color:#4d3310;
}

#liste_menu_rea li a:hover{
color:#6dd210;
text-decoration:underline;
}

#bascadre ul{
margin:0px;
}

#menu_bas li{
display: inline;
padding:0px;
margin:0px;
}

#pied {/*positionnement du pied de page*/
margin:-20px 0 0 0;
padding:0;
text-align:center;
font-size:0.9em;
color:#a3a8aa;
}

#pied a{/*personnalisation des liens du pied de page*/
color:#FD7E1A;
font-size:0.9em;
text-decoration:none;
}

.orange{/*changement de couleurs */
color:#fff;
}
.vert{/*changement de couleurs */
color:#6dd210;
}

.gras{/*mise en gras de caractères*/
font-weight:bold;
}

#contenu #creation{
margin:20px 0 0 15px;
padding:0px;
width:740px;
}

#contenu #creation li{
display:inline;
margin:0;
}

#contenu li a, #contenu li img{
border:none;
}

.champs{/*personnalisation des champs de saisies*/
border:1px solid #a8a5a1;
}

.champs:focus{/*personnalisation des champs de saisies au survol*/
border:1px solid #fd7e1a;
background-color:#fff4eb;
}

.envoi{/*personnalisation des bouton de class  envoi*/
position:absolute;
left:160px;
background-color:#fbd7bb;
color:black;
border:1px solid #a8a5a1;
}

.envoi:hover{/*personnalisation des bouton de class  envoi au survol*/
position:absolute;
left:160px;
background-color:#b2fb5d;
color:black;
border:1px solid #529406;
}

#contenu a{
color:#6DD210;
font-family:verdana;
}

#contenu a:hover { 
color:#503A09;
font-family:verdana;
text-decoration:underline;
}

#bascadre a{
color:#53430c;
font-family:verdana;
text-decoration:none;
}
#bascadre a:hover{
color:#fff;
font-family:verdana;
text-decoration:underline;
}

#zone1{    /* zone cliquable  compagnie des fustes*/
	z-index:600;/*permet de passer la div par dessus les autres, ainsi on peut interagir avec*/
	float:left;
	position:absolute;/*la posiotion absolute permet de placer cette div par rapport à la div "parent" qui a une position relative*/
	width : 450px;
	height: 70px;
	margin-left:30px;
	margin-top:-110px;
}

.cache {
display : none;
}

strong{
font-weight:bold;
}