/* CSS Document */

body {
font-size: 0.8em;
margin: 0 ;
padding: 0 ;
}

#header {
height: 150px;
background-color: #FFFFFF;
}

#conteneur {
position: relative;
width: 1024px;
margin: 0 auto; 
background-color:#FFFFFF;
}

#centre {
background-color:#FFFFFF;
background-image:url(images/fond.gif);
background-repeat:no-repeat;
margin-left: 220px;
height: 677px;
}
#gauche {
background-image:url(images/barre_gauche.jpg);
background-repeat:no-repeat;
position: absolute;
left:0;
width: 220px;
height: 320px;
}

a.image { /* définition de la classe "image" de la balise <a> */
     position: absolute;
	 margin-top:400px;
	 left:0;
	 margin-left:80px;
	 display: block; /* la balise a doit être en bloc */
     width: 64px; /* largeur de l'image réactive */
     height: 82px; /* hauteur de l'image réactive */
     background-image: url(images/mail.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }

ul#menu
{
	margin: 25px ;
	padding: 30px ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 150px ;
	line-height: 40px ;
	color: #000 ;
	text-indent: 10px ; /* On décale le texte de 40px du bord gauche */
	font-family:"Monotype Corsiva";
	font-size:23px;
	color:#CC9933;
	
	text-decoration: none ;
	background: url(images/boutons.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	/*border: 1px solid #dbd ;*/
}

ul#menu li a:hover
{
	background: url(images/bouton.gif) no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	/*border: 1px solid #f97 ;*/
}

p {margin: 0 0 10px 0;}