body{
margin:0px;
padding:0px;
background:#ffffff url('img/fond-mer-littoral.gif') repeat-y 50% 0%;
color: #441111;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
text-align:center; /* so the container div centers itself in IE5/win */
}




/*********************************************************************/
/*************** Mise en page du contour *****************************/


.global-haut{
position:relative; 
width:778px;
/*height: 130px;*/
margin-left:auto;
margin-right:auto;
padding-top:0px;
background:#50fa05 url('') no-repeat;
/*border: 1px solid #00ff00;*/
/*overflow: auto;*/
}

.global-centre{
position:relative; 
width:778px;
margin-left:auto;
margin-right:auto;
/*overflow: auto;*/
/*border: 1px solid #ff00ff;*/
}

.global-bas{
position:relative; 
width:778px;
/*height: 30px;*/
margin-left:auto;
margin-right:auto;
/*overflow: auto;*/
/*border: 1px solid #00ffff;*/
}

.global{          /*conteneur du site*/
position:relative; 
width:778px;
margin-left:auto;
margin-right:auto;
}

/*********************************************************************/
/*************** Mise en page  ***************************************/

.haut {          /*image en haut du site*/
float: left;
padding:0px;
margin:0px;
width: 100%;
height: 150px;
background:#ffffff url('img/bandeau-fixe.jpg');
overflow: hidden;
z-index:4;
/*border-bottom: 0px solid #000000;*/
}

.petit{
float:left;
width: 250px;
height: 150px;
z-index:3;
}

.publicite{
z-index:10;
float: left;
padding:0px;
margin-left:20px;
margin-top:35px;/*valide =45*/
width:468px;
/*height:60px;*/
overflow: hidden;
z-index:5;
}

.menu{          /*barre de menu rouge*/
float: left;
width: 100%;
height: 19px;
padding-top:1px;
background:#8ab0bd url('img/menu.jpg');
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
text-align: right;
overflow: hidden;
z-index:5;
}

.conteneur{          /*conteneur sous le menu*/
float: left;
width: 100%;
background:url('img/fond-gauffre.jpg');
border-top: 1px solid #000000;
}


#cote{          /*coté gauche*/
float:left;
width:20px;
height:600px;
background: url('img/cote-mer-littoral.gif') no-repeat 0px 477px;
/*display:block;*/
visibility: hidden;
}

.img-deco {          /*conteneur de la page avec image de fond*/
float: left;
width: 756px;
background:url('img/img-deco.jpg') no-repeat 240px 200px;
}

.bas-page{          /*conteneur sous le menu bas*/
float: left;
width: 100%;
background:url('img/fond-gauffre.jpg');
}

/*********************************************************************/
/************* Positionnement dans la page ***************************/

.volume1{          /*div double colonne centrale*/
float: left;
width: 266px;
text-align: justify;
margin-left: 5px;
margin-right: 20px;
margin-top: 20px;
padding: 0px;
overflow: hidden;
}

.volume2{          /*div colonne de droite*/
float: left;
width: 144px;
margin-left: 5px;
margin-right: 5px;
margin-top: 20px;
padding: 0px;
overflow: hidden;
}

.volume3{          /*div menu bas*/
float: left;
width: 700px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
padding:10px;

/*height: 40px;*/
overflow: hidden;
}

/*********************************************************************/
/************* Formats des titres  ***********************************/

h2.schema{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
font-size: 1.3em;
font-weight: bold;
text-align: left;
color: #002277;
margin-left: 0px;
margin-bottom: 10px;
border-bottom: 1px solid #998070;
}

h2.schemab{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 1.3em;
font-weight: normal;
text-align: left;
color: #002277;
margin-left: 0px;
margin-bottom: 10px;
padding:0px;
border-bottom: 1px solid #998070;
}


h3{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: italic;
font-size: 1.1em;
font-weight: bold;
text-align: center;
color: #441111;
padding-left:0px;
margin-left:0px;
padding-top:5px;
padding-bottom: 10px;
}


/*********************************************************************/
/************* Formats des textes et des liens  **********************/

p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}

p.marron{ 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin:0px;
color: #441111;
text-align: justify;
}

p.bleu{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin:0px;
color: #002277;
text-align: justify;
}

p.question{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin:0px;
color: #4f6e87;
text-align: justify;

}

p.question{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin:0px;
color: #441111;
text-align: justify;
padding:0px;
margin:0px;
}

span.reponse{
color: #2c5a7f;
padding:0px;
margin:0px;
}


/*********************************************************************/
/************* positionnement dans la page ***************************/









.volume4{          /*div colonne centrale unique --- conteneur pour 2 volume1*/
float: left;
width: 588px;
text-align: justify;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: 1px solid #000000;*/
}



.volume5{          /*div colonne centrale unique --- avec marge --- justifié*/
float: left;
width: 563px;

text-align: justify;
margin-left: 5px;
margin-right: 20px;
margin-top: 20px;
padding: 0px;
overflow: hidden;
}

.volume5-chemin{          /*div colonne centrale unique --- avec marge --- justifié*/
float: left;          
width: 563px;

text-align: justify;
margin-left: 5px;
margin-right: 20px;
margin-top: 20px;
padding: 0px;
/*overflow: hidden;*/
}

.volume6{          /*div colonne centrale unique --- avec marge --- centré*/
float: left;
width: 563px;
text-align: center;
margin-left: 15px;
margin-bottom: 30px;
padding: 0px;
overflow: hidden;
}

.volume7{          /*div colonne 2/3 --- a associer avec volume8*/
float: left;
width: 378px;/*378*/
text-align: justify;
margin-left: 5px;
margin-right: 20px;
margin-top: 20px;
padding: 0px;
/*overflow: hidden;*/
}

.volume8{          /*div colonne 1/3 --- a associer avec volume7*/
float: left;
width: 154px;
text-align: justify;
margin-left: 5px;
margin-right: 0px;
margin-top: 20px;
padding: 0px;
/*overflow: hidden;*/

}

.volume9{          /*div colonne centrale unique - conteneur pour les messages*/
float: left;
width: 754px;
text-align: justify;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: 1px solid #000888;*/
}

/*********************************************************************/
/********** formats des textes, liens, et autres caractères **********/



h2.titre{
font-style: italic;
font-size: 1.2em;
font-weight: normal;
text-align: right;
color: #002277;
margin-left: 0px;
margin-bottom: 10px;
border-bottom: 1px solid #998070;
}








.gris{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin:0px;
color: #999999;
text-align: justify;
}


A.liens1:link, A.liens1:active, A.liens1:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
/*color: rgb(94,127,134); */
color: #4f6e87;
}


A.liens1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
/*color: rgb(67,84,87);*/  
color: #4f6e87;
text-decoration: underline; 
}

A.liens2:link, A.liens2:active, A.liens2:visited {
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 1.2em;
color: #ffffff;
}

A.liens2:hover {
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size: 1.2em;
color: #ffffff; 
}

A.liens3:link, A.liens3:active, A.liens3:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
color: #441111;
}


A.liens3:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #441111; 
text-decoration: underline; 
}

/*A.lexique:link, A.lexique:active, A.lexique:visited {
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
color: #441111;
}*/

/*A.lexique:hover {
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #441111; 
text-decoration: underline;
cursor: help;
}*/

li{
text-align: left;
/*list-style-type: square;*/ 
list-style-position: inside;
/*color: #BB1102;*/

}

ul.ul-rouge{
list-style-image: url("img/puce-carre-rouge.gif");
text-align: left;
margin:0;
padding:0;
}

ul.ul-bleu{
list-style-image: url("img/puce-carre-bleu.gif");
text-align: left;
color: #002277;
margin:0;
padding:0;
}



ul.ul-embr{

list-style-image: url("../../img-deco/puce-embr.gif");
text-align: left;
margin:0;
padding:0;
}

li.li-embr1{
margin-left:10px;
}

li.li-embr2{
margin-left:20px;
}

li.li-embr3{
margin-left:30px;
}

li.li-embr4{
margin-left:40px;
}

li.li-embr5{
margin-left:50px;
}

li.li-embr6{
margin-left:60px;
}

li.li-embr7{
margin-left:70px;
}

li.li-embr8{
margin-left:80px;
}

li.li-embr9{
margin-left:90px;
}

li.li-embr10{
margin-left:100px;
}

li.li-embr11{
margin-left:110px;
}

li.li-embr12{
margin-left:120px;
}

li.li-embr13{
margin-left:130px;
}

li.li-embr14{
margin-left:140px;
}

li.li-embr15{
margin-left:150px;
}

/****************************************/
/****** positionnement du contenu *******/



.fonts-centre{
float: left;
text-align: center;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 1em;*/
color: #441111;
padding-left:0px;
margin-left:0px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dashed #998070;
}

.fonts-gauche{
float: left;
text-align: left;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #441111;
padding: 10px;
padding-top: 0px;
margin-bottom: 10px;
border-bottom: 1px dashed #998070;
}

.marge150{
margin-left: 150px;
}


/****************************************/
/********** formats des images **********/
.image-1{
position: absolute;
z-index:40;
text-align: left;
/*width: 826px;*/
left: 0px;
bottom: 0px;

}

.image-2{
/*height: 100%;*/
margin:0px;
padding:0px;
}

.image-3{
margin-bottom:5px;
/*border: 0px;*/
border: 1px solid #000000;
}

.img-goodies{
width:133px;
height:100px;
border: 1px solid #000000;
}

.img-ico{
width:102px;
height:69px;
float: right;
margin-left:10px;
border:0px;
}

.img-site{
width: 150px;
height: 100px;
border: 0px;
}

.img-banniere{
margin-left: 40px;
}

.img-bouton{
float: left;
width: 88px;
height: 31px;
border: 0px;
margin-right:5px;
}





.lettrine {  /* merci a alsacreation */
float: left;
font-size: 4em;
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: #88adbf;
/*border: 0px solid rgb(153,181,186); */
/*background-color: #FEF2D4; */
margin: 1px;
margin-right:4px;
padding: 1px;
line-height: 0.8em;
}

.lettrine-bis {  /* merci a alsacreation */
float: left;
font-size: 3em;
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: rgb(153,181,186);
border: 1px solid rgb(153,181,186); 
background-color: #FEF2D4; 
margin: 1px;
margin-right:2px;
padding: 1px;
line-height: 1em;
}


.lettrine2 {
/*float: left;*/ 
font-size: 2em;
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: rgb(153,181,186);
border: 1px solid rgb(153,181,186);
background-color: #FEF2D4; 
margin: 3px;
padding: 1px;
line-height: 1em;
text-align:left;
}

.lettrine3 {
/*float: left;*/ 
font-size: 2em;
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: rgb(153,181,186);
border: 1px solid rgb(153,181,186);
background-color: #FEF2D4;
background-image: url('../img-deco/fond-gauffre.JPG'); 
margin: 1px;
padding: 1px;
/*line-height: 1em;*/
}

input.code{
font-family: Georgia, Times New Roman, Times, serif;
margin-left: 40px;
}


/***************CSS des fiches***********************/
/****************************************************/

.img-fiche{
float: left;
clear: none; 
width: 300px;
height: 200px;
margin-right:18px;
margin-bottom:5px;
border: 1px solid #000000;
}

.img-forum{
float: right;
width: 150px;
height: 100px;
border: 1px solid #000000;
margin-left: 10px;
margin-bottom: 10px;
}

.img-faune{
float: left;
clear: none; 
width: 140px;
height: 140px;
margin-right:18px;
margin-bottom:5px;
margin-top:10px;
/*border: 1px solid #000000;*/
}


/*.img-essai1{
float: left;
clear: none; 
width: 60px;
height: 30px;
margin-right:18px;
margin-bottom:5px;
margin-top:10px;
border: 1px solid #000000;
}*/

h1.h1-faune-haut{
font-style: italic;
font-size: 1.3em;
font-weight: normal;
text-align: left;
color: #002277;
margin-left: 0px;
margin-bottom: 0px;
padding:0px;
border-bottom: 1px solid #998070;
}


img.img-galerie{
float: left;
clear: none; 
width: 150px;
height: 100px;
margin-left:13px;
margin-top:7px;
//padding:0px;
margin-bottom:12px;
margin-right:10px;
border: 0px solid #000000;
}


.div-galerie{
float: left;
clear: none; 
width: 186px;
height: 160px;
padding:0px;
margin-right:2px;
margin-bottom:5px;
background:url('../../img-deco/fond-galerie.jpg') no-repeat;
/*text-align: center;*/
//border: 0px solid #000000;
}

.div-galerie-remplissage{
float: left;
clear: none; 
width: 186px;
height: 160px;
margin-right:2px;
margin-bottom:5px;
text-align: center;
}

.div-galerie3{
float: left;
clear: none; 
width: 186px;
height: 160px;
margin-right:0px;
margin-bottom:5px;
background:url('../../img-deco/fond-galerie.jpg') no-repeat;
/*text-align: center;*/
}

.div-galerie3-remplissage{
float: left;
clear: none; 
width: 186px;
height: 160px;
margin-right:0px;
margin-bottom:5px;
text-align: center;
}

.img-texte{
float: left;
clear: none; 

border: 1px solid #000000;

}


.img-vol1{
float: left;
clear: none; 
width: 200px;
height: 300px;
margin-left:33px;
margin-bottom:5px;
border: 1px solid #000000;

}



h1.h1-haut{
font-style: italic;
font-size: 1.3em;
font-weight: normal;
text-align: right;
color: #002277;
margin-left: 0px;
margin-bottom: 0px;
padding:0px;
border-bottom: 1px solid #998070;
}


h2.h1-bas{
/*font-style: italic;*/
font-size: 1em;
font-weight: normal;
text-align: right;
color: #002277;
margin-top:0px;
padding:0px;
margin-left: 0px;
margin-bottom: 10px;

}



h4{

float: left;
font-size: 1em;
font-weight: bold;
margin:0px;
padding:0px;
color: #4f6e87;
/*margin-bottom:2px;*/
}