body
{
   width: 760px;
   margin:auto;
   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:#ddf4ec;
   background-image: url("images/bonhomme4a.jpg");
   background-position: bottom left; /* Le fond est aligné en haut à droite */
   background-attachment: fixed; /* Le fond est fixé */
   background-repeat: no-repeat;
}

#en_tete
{
   width: 760px;
   height: 235px;
   margin-bottom: 10px;
   }
   
#menu
{
   float: right; /* Le menu flottera à droite */
   width: 170px; /* Très important : donner une taille au menu */
   font-size : small;
   font-family: "Comic sans MS", Arial, Verdana, serif;

}

.element_menu
{
   background-color: #cbf8ae;
   margin-bottom: 40px; /* Pour éviter que les éléments du menu ne soient trop collés */

 
}

.element_menu h3 /* Tous les titres de menus */
{   
   color: #3177ec;
   font-family: "Comic sans MS", Arial, Verdana, serif;
   text-align: center;
  }
  
  .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   background-color :#cbf8ae;
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 25px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 33 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 0px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #12aee9;
   text-decoration:none;
   }
   
  a:hover /* Quand le visiteur pointe sur le lien */
{
   color: #ffe101;
   }
  a 
{
   color: #12aee9;
   text-decoration:none;
   }
   
   a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

#corps
{
   margin-right: 100px; /* 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: green;
   border: 2px green; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

.imageblock
{
   display: block;
    border: none;
	width: 350px;
	padding: 12px;
	margin: auto;
}

.imageblock2
{
   display: block;
    border: none;
	padding: 12px;
	margin: auto;
}

.imageflottanteg
{
   float: left;
}

.imageflottanted
{
   float: right;
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #3177ec;
   text-align: left;
   font-family: "comic sans MS", Arial, "Arial Black", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   font-family: "comic sans MS", Arial, "Arial Black", Times, serif;  
   font-size:large;
   padding-left: 30px;
   color: #12aee9;
   text-align: left;
   }
   
 #corps h3
 {
 color: #3177ec;
 font-family: "Comic sans MS", Arial, Verdana, serif;
 font-size:medium;
 padding-left: 40px;
 text-align: left;
 }
 
 #corps p
 {
  font-family: "Comic sans MS", Arial, Verdana, serif;
  text-align:justify;
  font-size:small;
  }
  p:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
   color: green; 
  }
  ul
  {
   font-family: "comic sans MS", Arial, "Arial Black", Times, serif;
   color:green;
   font-size:small;
   }
   
#pied_de_page
{
   padding: 5px;
   text-align: center;
   font-family: "Comic sans MS", Arial, Verdana, serif;
   font-size:small;
   color: green;  
   }