body
{ 
  
   width: 850px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color:#988a67;
   font-family: Verdana, Trebuchet, Arial, serif;
   }
   
 
#en_tete
{
   width:850px;
   height: 223px;
   background-image: url("images/bann2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 5px;
}

#menu_horizontal
{
width:100%;
height:30px;
 background-image: url("images/ornement5.png");
 background-repeat: repeat-x; 
margin-bottom: 10px;
}

  .element_menu_horizontal
{

display:block; /*Pour que le "bloc" soit un vrai bloc*/
float:left; /*Pour que les blocs soient alignés horizontalement (essayez de l'enlever pour voir)*/
width:16%; /*J'explique en détail après*/
height:30px; /*La même hauteur que notre menu*/
border:none; /*On enlève les bordures (enfin on les met pas, même s'il n'y en avait pas)*/
text-align:center; /*Pour que les liens soient centrés par rapport à l'horizontale*/
}

#menu_horizontal a, #menu_horizontal a:visited    /*on utilisera les propriétés qui suivront sur les liens dans menu, et les liens visités dans menu*/
{
color:#788381;    /*la couleur*/
text-align:center; /*on le centre horizontalement*/
text-decoration:none; 
padding-top:3px; /*on le centre verticalement*/
}

#menu_horizontal a:hover, #menu_horizontal a:visited:hover   /*on utilisera les propriétés qui suivront sur les liens survolés dans menu, et les liens survolés et visités dans menu*/
{
color:#c0424b; 
text-decoration:underline; 
}

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 105px; /* Très important : donner une taille au menu */
}

.element_menu
{
   
   background-color: #d2cbbc;
   border: 1px solid #bde24b;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   background-image: url("images/ornement6.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}

.element_menu h3 /* Tous les titres de menus */
{    
   color: #788381;
   text-align: center;
   font-size: small;
   text-decoration: none;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   
   color: #788381;
   font-size: small;
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
#menu a, #menu a:visited    /*on utilisera les propriétés qui suivront sur les liens dans menu, et les liens visités dans menu*/
{
color:  #788381;   /*la couleur*/
text-align:center; /*on le centre horizontalement*/
text-decoration:none; 

 margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

#menu a:hover, #menu a:visited:hover
{
color: #c0424b; 
text-decoration:underline; 
}
ul li ul {
    display:none;
    background-color: #d2cbbc;
    border:1px solid #bde24b;
}

ul li:hover ul {
    display:block;
    position:relative;
    top:-52px;
    left:84px;
}

ul li {
    height:18px;
}

.element_menu a {
    font-size:8pt;
    font-family:"Trebuchet MS";
}

p
{
   width: 100%;
   text-align: justify;
   text-indent: 30px; 
   font-size: small;
   }
   
   

  
h1
{
font-size: x-large;
font-weight: bold;
text-align: center;
text-decoration: none;
}
h2
{
color:#847859;
font-size: large;
font-style: italic;
text-align: center;
border-bottom: 2px ridge black;
}
h4
{
font-size: large;
font-style: italic;
text-align: center;
}
h5
{
 color: #c0424b;
 font-style: italic;
 }
 
#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: #676767;
   background-color:#eeebe6; /* Une couleur de fond pour le corps */
   background-image: url("images/ornement6.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   
   border: 2px solid #bde24b; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
.souligne
{
   text-decoration: underline;
}



td /* Toutes les cellules des tableaux... */
{
   border: 1px solid #bde24b;/* ... auront une bordure de 1px */
   font-size: small;
}

#corps a, #corps a:visited    /*on utilisera les propriétés qui suivront sur les liens dans menu, et les liens visités dans menu*/
{
color:#847859;    /*la couleur*/
text-decoration:none; 
font-style: italic;
 margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

#corps a:hover, #corps a:visited:hover
{
color:#c0424b; 
text-decoration:underline; 
}

#pied_de_page
{
    margin-left: 140px;
   text-align: center;
   color: #676767;
   background-color: #eeebe6;
   font-size: small;
   
   border: 2px solid #bde24b;

}

ul 
{
   list-style-type: square;
  }

li
{
 list-style-type: square;
font-family: Verdana;
font-size: small;