/*----------------------
   Styles de l'Habillage (structures)
---------------------------*/
/* bien regler la marge (bugs IE) */

html, body {
background: white;
font: 12px Verdana, Arial, sans-serif;
margin: 10px;
padding: 0;
height: 100%;
}

a { text-decoration: none; color: #505050; }
a:hover { text-decoration: none; color: #303030; background: #e8e8e8; }


ul {
list-style-type : none;
list-style-type : url('puce.gif');
margin:0;
padding:0;
}

ol {
list-style-type: none;
margin:0;
padding:0;
}

li {
float: left;
}


/*--- Structure des cadres --- */
#contenu {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color: #C8DBE4;
}

#header {
height: 110px;
background-color: #FFFFFF;
background-image : url('IMG/w_LogoSite2a.jpg');
background-repeat: no-repeat;
}

#haut {
height: 40px;
background-color: #EBF2F5;
}

#centre {
background-color: #EBF2F5;
margin-left: 150px;
padding:5px;
}


#gauche {
position: absolute;
left:4px;
top: 155px;
width: 150px;
}

#pied {
height: 30px;
background-color: #FFFFDD;
/*background-image : url('IMG/OiseauxRouge.jpg');*/
text-align: right;
border-top: 3px solid #427488;
border-bottom: 2px solid #C8DBE4;

/*background-repeat: no-repeat;*/
}

/*---	
	Structure du menu haut 
	sur la base d'un menu horizontal avec un commentaire au survol
---*/
.menusommaire {
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
position: absolute;	/* positionnement pour IE5 et IE5.5 */
top: 100;
left: 0px;
background: transparent url('IMG/menuIndex3.jpg') top left no-repeat;	/* arrière-plan général du menu */
width: 530px;
text-align: center;
}

.menusommaire a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 400px;
width: 105px;
color: #9999CC;
font-size: 10px;
line-height: 210px;	/* hauteur de ligne pour éviter les paddings */
font-weight: bold;
font-family:  Helvetica,Tahoma, Arial, sans-serif;
text-decoration: none;
}

.menusommaire a:hover {
background: transparent url('IMG/menuIndex3.jpg') top left no-repeat;
}

.menusommaire a#menu1 {
background: transparent url('IMG/menuIndex3.jpg') top left no-repeat;
background-position: -530px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
}
.menusommaire a#menu2:hover {
background-position: -635px 0%;
}
.menusommaire a#menu3:hover {
background-position: -740px 0%;
}
.menusommaire a#menu4:hover {
background-position: -845px 0%;
}
.menusommaire a#menu5:hover {
background-position: -950px 0%;
}

/*---	
	Structure du menu haut 
	sur la base d'un menu horizontal avec un commentaire au survol
---*/

.menuhaut {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
}


.menuhaut a { /* définition de chaque bouton du menu */
width: 100px; /* largeur du bouton, que vous pouvez changer à loisir */
height: 30px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #fff;
}

.menuhaut a:hover {
height: 30px;
color: #411;
background: #AAA;
border: 1px solid #fff;
border-bottom: 0px;
color: #fff;

background-image : url('IMG/OiseauxGris.jpg');
background-position : 380px;
}

.menuhaut a:active {
background: #427488;
border: 1px solid #fff;
color: #fff;
}

.menuhaut a span { /* définition de la balise <span> inclue dans <a> */
display: none;
margin:0;
padding:0;

}

.menuhaut a:hover span { /* définition de la balise <span> au survol */

display: none;
margin:0;
padding:0;
/*
display: block;
position: absolute;
top: 20px;
left: 0;
width: 500px; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: center;
border-top: 1px solid #fff;
color: #000;
*/
}


/*--- Structure de menu gauche #eaeaff #9999CC #CCCCFF #EECCFF---*/
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}

.menugauche a { /* définition de chaque bouton du menu */
width: 140px; /* largeur du bouton, que vous pouvez changer à loisir */
height: 30px;
float: top;
display: block;
text-align: center;
border: 1px solid #fff;
border-bottom: 1px solid #427488;
text-decoration: none;
color: #000;
background: #FFFFDD;
}

.menugauche a.titre {
color: #fff;
background-image : url('IMG/OiseauxGris.jpg');
background-position : 430px;
font-size: 120%;
}


.menugauche a:hover {
color: #411;
background: #AAA;
border: 1px solid #fff;
color: #fff;
background-image : url('IMG/OiseauxRouge.jpg');
background-position : 430px;
}

.menugauche a:active {
background: #427488;
/*border: 1px solid #fff;
color: #fff;
*/
}

.encart {
	float: right;
	width: 205px;
	margin-top: 0px;
	margin-bottom: 0em;
	padding: 2px;
	background-color: #FFFFDD;
	border: 1px solid #427488;
}

/*.breves {background-color: #ffeaea; } */


/*
 * Mise en page des textes (bordures...)
 */

.chapo {
	line-height: 1.5em;
	margin-top: 0em;
}

.texte {
	line-height: 1.3em;
	margin-top: 1em;

}

.ps {
	padding-top: 0.6em;
	margin-top: 0.6em;
	border-top: 1px dashed #404040;
}

.notes {
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	border-top: 1px solid #a0a0a0;
	padding: 1.5em;


dl { /* positionnement du cadre, que vous pouvez modifier */
float: right;
width: 200px; /* largeur du cadre, selon votre image de fond */
}

dl, dt, dd { /* suppression de toutes les marges et paddings */
margin: 0;
padding: 0;
}

dl { /* arrière-plan par défaut sur l'ensemble du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px; /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}

dt { /* définitions du titre du cadre */
height: 40px;
background: url(haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}

dd {
padding: 0 20px 0 10px; /* gestion des espaces internes du cadre */
text-align: justify;
background: url(milieu.gif) top left repeat-y; /* arrière-plan intérieur */
}





/*--- Structure des paragraphes ---*/
p {
margin: 0 0 10px 0;
}