/* styles globaux de la page */

body, div, form, fieldset, ul, ol, table {padding:0;margin:0;}

h1{
font-size:1.4em;
margin:3em 0 1em 1em;
}


a{
color:black;
text-decoration:none;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size:0.75em;
color: black;
text-decoration:none;
}

#global{
position:relative; /*necessaire pour left:0 de~"menugauche, necessaire pour contenu pas de decalage à margin-left:220px */
width:980px;
margin:auto;
background-color:white;
text-align: left; /*pour ie 5.5, sinon centre le texte avec margin:auto */

}

/* suppression de la bordure bleue sur toutes les images lien */
a img{
border:0;
}

/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:visited,
a:hover,
a:active { 
outline: none; 
}

.defaut {
display:block;
}



/* styles de la partie gauche */

#menugauche{
position:absolute; 
left:0;
width:220px;
}

/*
#anglegauche{
display:block; 
position:absolute; 
} */

#navigation{
 /* position:relative; indispensable pour FF, plus depuis absolute a la place de float */
width:220px;
height:70px
}

#boutonHome{
position:absolute; 
left:10px;
top:28px;
}

#boutonMail{
position:absolute;
left:45px;
top:28px;
}

#boutonPrecedent{
position:absolute;
left:142px;
top:28px;
}

#boutonSuivant{
position:absolute;
left:180px;
top:28px;
}

#menuVertical {
/* position:relative; indispensable pour FF & IE6, ne remonte que yannick depuis que absolute a la place de float*/
}

#menu {
list-style: none; /*indispensable pour FF */
}

#menu li a {
height:19px;
color:black;
text-decoration:none;
Text-align:center;
padding:5px;
} 


#menu li a:active{
color:red;
}

.mouettes {
background: url("../images/global/menugauche1.jpg") no-repeat left top;
}

.mouettes a:hover,
.mouettes a:focus{
background:green;
background:url("../images/global/menugauche1survole.jpg");
}

.camelia {
background: url("../images/global/menugauche2.jpg") no-repeat left top;
}

.camelia a:hover,
.camelia a:focus{
background:green;
background-image: url("../images/global/menugauche2survole.jpg");
}

.goeland{
background: url("../images/global/menugauche3.jpg") no-repeat left top;
}

.goeland a:hover,
.goeland a:focus{
background:green;
background:url("../images/global/menugauche3survole.jpg") no-repeat left top;
}

.hortensia {
background: url("../images/global/menugauche4.jpg") no-repeat left top;
}

.hortensia a:hover,
.hortensia a:focus{
background:green;
background:url("../images/global/menugauche4survole.jpg") no-repeat left top;
}
   
.albatros {
background: url("../images/global/menugauche5.jpg") no-repeat left top;
}

.albatros a:hover,
.albatros a:focus{
background:green;
background:url("../images/global/menugauche5survole.jpg") no-repeat left top;
}

.yannick{
position:absolute;
left:0;
top:340px;
}







#contenu{
margin-left:220px; /*decale colonne gauche si pas #menugauche left:0*/
width:760px; /* ie 7 & 6 */
position:absolute; /* a réglé le probleme de decalage du menu horizontal vers le bas */
background:url("../images/global/feuillesback.jpg") no-repeat 0 20px; /* si 4%, decalage + fort qu'en 1.x em pour le texte */
}

#menuHorizontal{
font-size:0.90em;
color:black;
text-decoration:none;
border:none;
display:block;
list-style-type:none;
text-align:left; 
}

#menuHorizontal li{
color:black;
text-decoration:none;
float:left; /*sauf IE6 */
z-index:auto !important; /* non IE6, rester au dessus de tout autre élément. */
z-index:1000; /* IE6 prend mal !important, donc on met une valeur élevé */
height:20px;
width:120px;
}


#menuHorizontal li a {  /* avant #mH ul li a  =  La couleur black et text decoration ne marche pas */
float:left; /*IE6 */
display:block;
color: black;
text-decoration:none;
height:20px; /*IE6*/
width:120px; /*IE6*/
}

#menuHorizontal li a:active{
color:red;
}

.menu {
/* color:black;  peut-etre plus indispensable depuis .menu a{ */
/* text-decoration:none; peut-etre plus indispensable depuis .menu a{ */
background: url("../images/global/menuhautprincipal.gif") no-repeat;
display:block;
width:120px;
height:20px;
}

.menu  a{  /* pour IE 6 */
color:black;
text-decoration:none;
display:block;
width:120px;
height:18px;
padding:2px 0 0 0;
}


.menu a:hover{
color:black;
text-decoration:none;
display:block;
width:120px;
height:18px;
background: url("../images/global/menuhautprincipalsurvole.gif") no-repeat;

} 

/* image fin menu horizontal */

#fin{
position:absolute;
}



/*pied de page */

#pied{
list-style-type:none;
margin:0;
padding:0;
font-size:0.9em;
display:inline;

}

#pied li{
float:left;
}

#pied li a{
padding:0 7px;

float:left;
text-align:center;
border-right:1px solid black;
}

#pied li a:hover{
color:red;
}

#pied li.dernier a{
border-right:none;
}