/* declarations generale -------------------------------------------*/

body {
    behavior: url(../styles/csshover.htc); 
    background: #000000 url(../images/blue_background.jpg);
    color: black;
    font-family:  Verdana, Helvetica, arial, Sans-Serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* valeurs standard--------------------------------------------------*/
h1 {
    color:#FFF200;
    font-size: 130%;
    font-weight:bold;
    }
h2 {
    color:#deeaff;
    font-size: 120%;
    font-weight:bold;
    }    
h3 {
    color:#deeaff;
    font-size: 105%;
    font-weight:bold;
    border-bottom:1px solid #8A8A8A;  /** pour mare **/
    text-align: left; /** pour mare **/
    }    
img {
   border:none;
}
.grotrait {
border-bottom:2px solid #ffff00;    
}
.titrait {
border-bottom:1px solid #8A8A8A;
}

/* top ---------------------------------------------------------------*/
.toulao{
position:absolute;
top: 0;
left: 1%;
width: 098%;
z-index: 2;
text-align: center;
background: #000000 url(../images/blue_background.jpg); 
line-height: 2em;
margin: 0;
}
html>body .toulao{
position: fixed
}

#menutop {
position: relative;
height: 28px;
margin: 0 10px 1em 20px;
clear: both;
background: transparent url("../images/blue_menutop.gif") left top no-repeat;
}
#menucoin {
float: right;
position: relative;
left: 1px;
width: 30px;
height: 28px;
background: transparent url("../images/blue_menucoin.gif") left top no-repeat;
}

#menutop ul, #menutop li {
margin:0;
padding: 0;
list-style-type: none;
}
#menutop ul {
position: absolute;
height: 28px;
width: 725px; /** a allonger si plus ou moins de liens par ideal 650 ou 725 */
left: 25px;
}
#menutop li {
float: left;
}
#menutop li a { 
display: block;  
height: 28px;
width: 80px;
color: #FFFF00;
font: 17px/28px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
text-decoration: none;
border-left: 1px solid #fff;
text-align: center;
}
#menutop li a.small {
width: 50px;
}
#menutop li a.vlarge {
width: 200px;
}
#menutop li a.large {
width: 125px;
}
#menutop li a.last {
width: 110px;
border-right: 1px solid #fff;
}
#menutop a:visited {
color: #FCD500;
}
#menutop a:hover {
color: #FFFFFF;
background: transparent url("../images/blue_menutop.gif") no-repeat 100% -28px ;
}

/* Positionement general -------------------------------------------*/

.corps {
    z-index: 1;
    margin-top:8em;
    margin-left:20%;
    margin-right: 1%;
    text-align: center;
    color:#C0C0C0;
    background: #085294;    
    padding: 0.9em;
    border-left:1px solid #494949;    
    font-family:  Verdana, Helvetica, arial, Sans-Serif;
    font-size:11pt;
} 

.corps img { 
    margin:0px;
    padding:0px;
    border: 1px solid #000000;
} 
.corps a:link    {text-decoration: none; text-decoration: underline; color: #deeaff;}
.corps a:visited {text-decoration: none; text-decoration: underline; color: #C0C0C0;}
.corps a:hover   {text-decoration: underline;  color: #FFFFFF; }

/* Menu Left mare ----------------------------------------------------------*/

div#menuleft {
         z-index: 2; 
         position: absolute;
         top: 10em;  
         left: 1%;
         width: 18%;
         font: 12px verdana, sans-serif;
         text-align: center;
         }
html>body #menuleft{
position: fixed
}

div#menuleft ul.niveau1 {
           padding: 0;
           width: 100%;
           border-top:1px solid #8A8A8A;
           border-left:1px solid #8A8A8A;
           border-right:1px solid #8A8A8A;
           margin:0px;
           text-align: left;
           font-weight:bold;
            }
div#menuleft ul.niveau1 li {
           position:relative;
           list-style: none; 
           border-bottom:1px solid #8A8A8A;
           padding: 4px 0 4px 4px; 
           background: #085294;                           
               }
div#menuleft ul.niveau2 {
           padding: 0;
           width: 100%;
           border-left:2px solid #8A8A8A;
           margin:0px;
           text-align: right;
            }
div#menuleft ul.niveau2 li {
           position:relative;
           list-style: none; 
           padding: 4px 0 4px 4px;                     
               }
               
               
                                       
div#menuleft li a {    
          display: block;     
          color:#ffff00;
          text-decoration: none; 
          }  
div#menuleft ul li:hover {
          color: #ffffff; 
                  }         
div#menuleft ul.niveau1 li:hover {
          background: #2BACFA;  
}                                     
div#menuleft ul a:hover {
          color: #ffffff;
                  }    


.mare {
        text-align: left;
    }

    
/* infobulles pour Mare */    
.info {
  position:relative;
 /* border-bottom:1px dashed #808080; */
  text-decoration: none; 
  font-weight: bold;
}
a:hover.info {
  text-decoration: none;
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline;
  position: absolute; 
  /*top:1.5em;*/
  top:0;
  left:55px;
  z-index: 20;
  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:100px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}            

.infv {
  position:relative;
 /* border-bottom:1px dashed #808080; */
  text-decoration: none; 
  font-weight: bold;
}
a:hover.infv {
  text-decoration: none;
  background: none;
}
a.infv span {display: none;}
a:hover.infv span {
  display: inline;
  position: absolute; 
  /*top:1.5em;*/
  top:0;
  left:17px;
  z-index: 20;
  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:100px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}                   

/* lettrine pour mare **/
.lettrine {  /* merci a alsacreation */
float: left;
font-size: 2.7em;
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: #88adbf;
margin: 1px;
margin-right:4px;
padding: 1px;
line-height: 0.8em;
}