body
{
	margin: 10px 0 ;
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 20px;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "verdana", helvetica, sans-serif ;
	background-image: url("Images_Index/fond.gif") ;
	color: #630000 ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */

body  a
{
	color: #630000;text-decoration: none;
}

body  a:hover
{
	color: #630000 ;text-decoration: underline; COLOR:#B7A3AD;FONT-FAMILY:0.8em "verdana", helvetica, sans-serif;
}

div#conteneur
{
	width: 770px ;
	-moz-border-radius:15px ;
	margin: auto ;
	text-align: left ;
	font-style: bold;
	border: 1px dotted #630000 ;
	background: #fff ;
}
/* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci */

h1#header
{
	height: 100px;
	background: url("Images_Index/HW_logo.jpg") no-repeat center;
}
/* Une image de fond correspondant aux 258 pixels de tout à l'heure, attention à bien compresser vos images */

div#menu
{
	height: 40px ;
	font-size: 1.2em ;
	text-align: center ;
	border-bottom: 1px dotted #630000 ;
	margin:10px;
	border-top: 1px dotted #630000 ;
}
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */

div#menu  a
{
	width: 191px ;
	line-height: 40px ;
	font-size: 1.1em ;
	font-style: bold ;
	color: #630000 ;
	text-decoration: none ;
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

div#menu  a:hover
{
	text-decoration: underline; COLOR:#B7A3AD;FONT-FAMILY:"verdana", helvetica, sans-serif;font-style: bold ;
	}/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */


div#contenu
{
	padding: 0 30px 0 30px ;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */

li
{
	margin-top:10px

}



div#contenu h2
{
	margin-top:50px;
	line-height: 25px ;
	font-style:normal;
	font-size: 1.1em ;
	color: #D630000 ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

h3
{
	font-style:normal;
	padding:10px;
	width:380px;
	text-align:center;
	font-size: 1em ;
	margin:auto;
	border: 1px outset #630000 ;
}

div#contenu p
{
	text-align: justify ;
	margin-top:20px;
	line-height: 1.3em ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu a
{
	color: #630000 ;
}

div#contenu a:hover
{
	color: #630000;
}
/* On met en forme les liens contenu dans la page */

p#footer
{
	padding-right: 10px ;
	font-style: italic ;
	font-size: 0.8em;
	text-align: right ;
	margin-top: 20px;
	margin-bottom:100 px;
	
}

div#coordonnees
{
	font-size:small;
	font-family:verdana;
	text-align:center;
	margin-bottom: 30px;
	color:#630000;
}

div#coordonnees a
{
	color:#630000;
	text-decoration:none;
}

div#coordonnees a:hover
{
	color:#630000;
	text-decoration:underline;
}

div#pied
{
	font-size:x-small;
	font-family:verdana;
	text-align:center;
	color:#B7A3AD;
}

div#pied a
{
	color:#B7A3AD;
	text-decoration:none;
}

div#pied a:hover
{
	color:#B7A3AD;
	text-decoration:underline;
}