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




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


.global-haut{            /* le site est divisé en trois, global-haut, global-centre, global-bas*/
position:relative; 
width:980px;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
/*background:#50fa05 url('') no-repeat;*/
border-left: 1px solid #4f6e87;
border-right: 1px solid #4f6e87;
overflow: hidden;       /* corrige un bug de Mozilla Firefox*/
}

.global-centre{
position:relative; 
width:980px;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
/*background:#fa5005 url('') no-repeat;*/
border-top: 1px solid #000000;
border-left: 1px solid #4f6e87;
border-right: 1px solid #4f6e87;
overflow: hidden;       /* corrige un bug de Mozilla Firefox*/
}

.global-bas{
position:relative; 
width:980px;
/*height: 30px;*/
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
/*background:#00faff url('') no-repeat;*/
border-left: 1px solid #4f6e87;
border-right: 1px solid #4f6e87;
overflow: hidden;       /* corrige un bug de Mozilla Firefox*/
}


.global{           /*conteneur du site*/
position:relative; 
width:980px;
margin:0px;
margin-left:auto;
margin-right:auto;
background: url('img-css/fond-gauffre.jpg');
padding:0px;
overflow: hidden;       /*corrige un bug de Mozilla Firefox*/
}

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

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


.flash{           /* flash Mer et littoral */
float:left;
width: 778px;
height: 150px;
padding:0px;
margin:0px;
z-index:3;
}

.logo{           /* Logo Mer et littoral */
float:left;
width: 300px;
height: 150px;
padding:0px;
margin:0px;
z-index:3;
}

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

.haut-gauche{    /* bannière flash  */
float: left;
width:778px;
height:100px;
padding:0px;
margin:0px;
}

.haut-droit{     /* menu Rss, Facebook, Twitter */
float: left;
width:180px;
height:150px;
padding:0px;
margin:0px;
padding-left:20px;
/*background: #ff00ff;*/
border: 0px solid #00fff0;
}

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

.menu-gauche{
float:left;
width: 130px;
margin:0px;
padding:0px;
margin-left:42px;
}

.menu-centre{
float:left;
width: 585px;
margin:0px;
padding:0px;
}

.menu-droit{
float:left;
width: 170px;
margin:0px;
padding:0px;
}

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



.cote{                /* coté gauche contenant barre du M de Mer et littoral */
float:left;
width:13px;
height:600px;
/*background: url('../img-deco/cote-mer-littoral.gif') no-repeat 0px 477px fixed;*/
display:block;
/*visibility: hidden;*/
/*overflow: hidden;*/
border: 0px solid #00ff00;
}

.img-deco {           /*conteneur de la page avec image de fond*/
float: left;
width: 965px;
background: url('../img-deco/img-deco.jpg') no-repeat 340px 220px;
border: 0px solid #ff7802;
}

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

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


.colonne-gauche{
float: left;
width: 130px;/*152 vaide */
text-align: center;
margin: 0px;
margin-top:20px;
margin-right:11px;
margin-left:11px;
padding: 0px;
border: 0px solid #00ff55;
}

.colonne-centre{
float: left;
width: 602px;/*580 vaide */
text-align: justify;
margin: 0px;
margin-top:20px;
margin-right:11px;
margin-left:11px;
padding: 0px;
overflow: hidden;
border: 0px solid #0ffff0;
}

.colonne-galerie{
float: left;
width: 760px; /*760*/
text-align: justify;
margin: 0px;
margin-top:20px;
margin-left:11px;
padding: 0px;
overflow: hidden;
border: 0px solid #0ffff0;
}

.colonne-droite{
float: left;
width: 152px;
text-align: center;
margin: 0px;
margin-top:20px;
margin-left:11px;
padding: 0px;
border: 0px solid #0f40f0;
overflow: hidden;
z-index:5;
}

.centre-gauche{
float: left;
width: 279px;
text-align: justify;
margin: 0px;
margin-right:11px;
padding: 0px;
overflow: hidden;
border: 0px solid #0ffff0;
z-index:5;
}

.centre-droit{
float: left;
width: 279px;
text-align: justify;
margin: 0px;
margin-left:11px;
padding: 0px;
overflow: hidden;
border: 0px solid #0ffff0;
}

.chemin{
float: left;          
width: 602px;
height:18px;
text-align: justify;
margin:0px;
margin-bottom: 20px;
padding: 0px;
/*overflow: hidden;*/
}

.page{
float: left;
width: 602px;
text-align: justify;
margin:0px;
margin-bottom: 20px;
padding: 0px;
overflow: hidden;
border: 0px solid #ff000f;
}

.menu-bas{
float: left;
width: 952px;
text-align: center;
margin: 0px;
padding: 0px;
padding-top: 20px;
padding-bottom: 10px;
overflow: hidden;
}

.recherche{
float:left;
width: 152px; 
height:41px; 
margin:0px; 
margin-top:17px; 
padding:0px; 
}

.galerie-fiche{
position:relative;
width: 152px;
height:468px;/**/
top: 0px;
left: 0px;
margin:0px;
margin-top:58px;
padding:0px;
overflow:hidden;
z-index:20;
}

.conteneur-photos-fiche{
position:relative;
width: 152px;
top: 0px;
left: 0px;
margin:0px;
padding:0px;
overflow:hidden;
}

.div-photos-fiche{
position:relative; 
top: 0px;  
left: 0px; 
z-index:2;
}

.numerotation-photo-fiche{
position: relative; 
margin:0px; 
padding:0px; 
height:17px; 
top:-87px; 
left: 67px; 
z-index:6;
}

.conteneur-scroll{
position:relative;
width: 152px;
height:348px;
top: 0px;
left: 0px;
margin:0px;
padding:0px;
overflow:hidden;
z-index:20;
}

.scroll{
float:left;
margin:0px;
padding:0px;
overflow:hidden;
}

.fond-tamise{
float:left;
width: 140px;
padding:5px;
border: 1px solid #9ac6c9;
border-top: 1px solid #346db4;
border-left: 1px solid #346db4;
background:url('../img-deco/fond-blanc-tamise.png');
}

.fleche-photo{
float:left; 
margin:0px; 
margin-top:10px; 
padding:0px; 
width: 152px; 
height:30px; 
display: none; 
overflow:hidden;
}

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

h1.h1-haut{
font-family: Trebuchet MS, Times new roman, Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.2px; 
word-spacing: 0.2px;
text-align: right;
color: #325b87;
margin-left: 0px;
margin-bottom: 0px;
padding:0px;
border-bottom: 1px solid #998070;
}



h2.h1-bas{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
text-align: right;
color: #2c5a7f;
margin-top:0px;
padding:0px;
margin-left: 0px;
margin-bottom: 10px;
}

h2.h2-rubrique{
font-family: Trebuchet MS, Times new roman, Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 18px;
font-weight: bold;
text-align: left;
color: #325b87;
margin-left: 0px;
margin-bottom: 10px;
border-bottom: 1px solid #998070;
}

h4.h4-rubrique{
display: inline-block;
font-family: Trebuchet MS, Times new roman, Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.4px; 
word-spacing: 0.4px;
margin:0px;
padding:0px;
color: #325b87;
margin-bottom:4px;
}

.span-font-size-11{
font-size: 11px;
}

.span-cache{
display: inline;
}

.span-marron-gras{
font-weight: bold;
color: #6a4444;
}

.div-cache{
display:block;
}

.impression{
display:none;
}


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




/*********************************************************************/
/******************** Formats des liens  *****************************/

A.liens-menu:link, A.liens-menu:active, A.liens-menu:visited {
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 15px;
color: #ffffff;
}

A.liens-menu:hover {
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
font-size:15px; /*16*/
color: #ffffff; 
}

A.liens-chemin:link, A.liens-chemin:active, A.liens-chemin:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-chemin:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #2c5a7f;
text-decoration: underline; 
}

A.liens-texte:link, A.liens-texte:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-texte:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-texte:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #2c5a7f;
text-decoration: underline;
}

A.liens-galerie:link, A.liens-texte:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-galerie:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-galerie:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: underline;
color: #2c5a7f;
}

a.info {
/*position: relative;*/  /* sup pour IE et Mozilla */
text-decoration: none;
/*background: #cccccc;*/
color: #441111;
border-bottom: 1px gray dotted;
z-index:24;
}

a.info span {
/*display: none;*/
position:absolute; /* ajouté pour chrome */


/* ci dessous ajouté pour chrome */
font-style: italic;

z-index: 500;
width: 152px;
/*top: 20px;
left: 20px;*/
margin: 0px;
margin-top:15px;
margin-left:-3000px;/*   retirer top et left pour IE et Mozilla et ajouter margin */
background: #9ac6c9  url('../img-deco/info-bulle.png');   /*fond-info.jpg');*/ /* #fef2d4 */
text-align: center;
color: #441111;
padding: 4px;
padding-top:20px;
border:0px;
border-bottom: 1px solid  #441111;
overflow: hidden;
/*
  border: 0px solid grey;
  border-left: 2px solid #------;
  border-right: 2px solid #------;
  border-top: 2px solid #------;
  border-bottom: 2px solid #------;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  -moz-border-radius-topleft: 8px;
*/


}

a.info:hover {
background: none; /* correction d'un bug IE */

z-index:25; 
}



a.info:hover span {
font-style: italic;
/*display: block;*/
display: inline; /* si block, mozilla met à la ligne */
position: absolute; /*supprimé pour chrome mais marche avec ie + moz */
z-index: 500;
width: 152px;
/*top: 20px;
left: 20px;*/
margin: 0px;
margin-top:15px;
margin-left:-160px;/*   retirer top et left pour IE et Mozilla et ajouter margin */
background: url('../img-deco/info-bulle.png');   /*fond-info.jpg');*/ /* #fef2d4 */
text-align: center;
color: #441111;
padding: 4px;
padding-top:20px;
border:0px;
border-bottom: 1px solid  #441111;
overflow: hidden;
}

/*  */




/* */



A.liens-legende:link, A.liens-legende:active, A.liens-legende:visited {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #2c5a7f;
}

A.liens-legende:hover {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2c5a7f;
text-decoration: underline; 
}



/*********************************************************************/
/******************* Formats des images  *****************************/

/*.photo-ficheb{
float: left;
clear: none; 
width: 302px;
height: 202px;
margin-right:18px;
margin-bottom:5px;
padding: 0px;
padding-top:-200px;
overflow: hidden;
border: 0px solid #22ff00;
}*/


/*.img-fiche-300b{
float: left;
clear: none; 
width: 300px;
height: 200px;
margin: 0px;
margin-top;
padding:0px;
overflow: hidden;
border: 1px solid #220000;
}*/

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

.img-fiche-150{
float: left;
clear: none;
width: 150px;
height: 100px;
margin:0px;
/*margin-bottom:20px;*/
padding:0px;
border: 1px solid #220000; /*#000000;*/
}

.img-fleche-haut{
border: 0px;
margin:0px;
margin-right:10px;
padding:0px;
}

.img-fleche-bas{
border: 0px;
margin:0px;
margin-left:10px;
padding:0px;
}

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

p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: justify;
margin:0px;
padding:0px;
padding-left:20px;
}

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

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.p-galerie{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
margin:0px;
padding:0px;
}

p.p-legende{
font-family: trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
margin:0px;
padding:0px;
}





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








/*********************************************************************/
/************* Liste embranchement ***********************************/


ul.ul-embr{
list-style-image: url("../img-deco/puce-embr.png");
text-align: left;
margin: 0px;
padding: 0px;
padding-left:20px;
}


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 *******/






/****************************************/
/********** formats des images **********/






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

img.img-galerie{
float: left;
clear: none; 
width: 150px;
height: 100px;
margin-top:4px;
margin-bottom:10px;
margin-left:12px;
margin-right:8px;
padding:0px;
border: 1px solid #4f6e87; /*#000000;*/
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

img.img-galerie:hover {
float: left;
clear: none; 
width: 150px;
height: 100px;
margin-top:0px;
margin-bottom:14px;
margin-left:10px;
margin-right:10px;
padding:0px;
border: 1px solid #4f6e87; /*#000000;*/
}

.div-galerie{
float: left;
clear: none; 
width: 178px;
height: 170px;
margin:0px;
margin-right:12px;
margin-bottom:5px;
padding:0px;
background:url('../img-deco/ombre-img-galerie.png') 15px 6px no-repeat;
/*text-align: center;*/
border: 0px solid #2c5a7f;
}

.div-galerie3{
float: left;
clear: none; 
width: 178px;
height: 170px;
margin:0px;
margin-right:0px;
margin-bottom:5px;
padding:0px;
background:url('../img-deco/ombre-img-galerie.png') 15px 6px no-repeat;
/*text-align: center;*/
border: 0px solid #2c5a7f;
}

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


/***************CSS Galerie (nouvelles)***********************/
/****************************************************/


img.img-galerie2{
float: left;
clear: none; 
width: 150px;
height: 100px;
margin-top:7px;
margin-left:13px;
margin-bottom:14px;
padding:0px;
border: 1px solid #441111; /*#000000;*/
/*border-bottom: 0px solid #ffffff;
border-right: 0px solid #ffffff;*/
}


.div-galerie1234{
float: left;
clear: none; 
width: 196px;
height: 170px;
margin:0px;
padding:0px;
background:url('../img-deco/ombre-img-galerie.png') 15px 14px no-repeat;
border: 0px solid #2c5a7f;
}



.div-photo-galerie{
float: left;
clear: none; 
width: 178px;
height: 116px;
margin:0px;
margin-left:9px;
margin-top:9px;
margin-right:9px;
margin-bottom:5px;
padding:0px;
/*padding-left:8px;
padding-top:7px;*/
background:url('../img-deco/div-photo-galerie.png') 0px 0px no-repeat;
/*text-align: center;*/
border: 0px solid #2c5a7f;
}

.div-photo-galerie:hover{
float: left;
clear: none; 
width: 178px;
height: 116px;
margin:0px;
margin-left:6px;
margin-top:5px;/*6px;*/
margin-right:12px;
margin-bottom:9px;/*14px;*/
padding:0px;
/*padding-left:8px;
padding-top:7px;*/
background:url('../img-deco/div-photo-galerie.png') 0px 0px no-repeat;
/*text-align: center;*/
border: 0px solid #2c5a7f;
}




/*********************************************************************/
/**************** Formats des formulaires  ***************************/


#recherche-texte {
	
width: 116px;
	
height: 16px;
	
background: #fefaf1  url('../img-deco/fond-recherche.png') right top no-repeat;
	
border: none;
	
margin: 0px;
	
vertical-align: middle;
	
color: #666;
	
padding: 0px;

padding-top:2px;
padding-bottom: 2px;
padding-left:4px;
border: 1px solid #164886;
border-bottom: 1px solid #9ac6c9;
border-right: 0px solid #9ac6c9;
}


#recherche-ok {
	
width: 24px;
	
height: 24px;
	
border: none;
	
margin: 0px;

margin-left:0px;
/*margin-top:-1px;*/
padding: 0px;
	
color: #fff;
	
background: url('../img-deco/bouton-recherche.png') left top no-repeat;
	
vertical-align: middle;
	
font-weight: bold;
	
cursor: pointer;
}