body
{
   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 */
   margin-right: 20px;
   margin-left:20px;
   background-image: url("../img/png/fond.png");
  }

  /* L'en-tête */

#en_tete
{
   margin:auto;
   width: 582px;
   height: 70px;
   background-image: url("../img/png/banniere.png"); 
   background-repeat: no-repeat;
   border-bottom: 2px solid black;
   margin-bottom: 20px;
}
#bandeau
{  font-size: 12px;
   font-weight: bold;
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   margin-bottom: 10px;
   background-color: rgb(220,220,225);
   border: 2px solid navy;
   height:20px
   }

#bandeau a
{ color: navy;}

/* Le menu */

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

.element_menu
{
   border: 2px solid navy;
   margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
   margin-right: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
   background-color: rgb(200,200,230);
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif; color: navy; font-size: 16px;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("../img/png/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   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 */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif; color: navy; font-size: 16px; text-decoration: none; font-style: italic}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{background-color: rgb(136,150,180) ; /* Le fond du paragraphe change de couleur */
 text-decoration: underline;}

/* Le corps de la page */

#corps
{
   margin-left: 150px; /* 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: navy;
   background-color: rgb(220,220,225);
   /* Une couleur de fond pour le corps */   
   border: 2px solid navy; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps p
{   color: navy;
   font-size: 14px;
   font-weight: bold;
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   text-indent: 20px; /* Les paragraphes commenceront 30 pixels sur la droite */
   margin-top: 40px;
   }

#corps p:hover /* Quand on pointe sur un paragraphe */
{
   background-color: rgb(136,150,180) ; /* Le fond du paragraphe change de couleur */
}

.clignotant {text-decoration:blink;}

#corps a {  color: navy; text-decoration: none; font-style: italic}
#corps a:hover {  color: green; text-decoration: underline}
#corps a img /* Toutes les images contenues dans un lien */{border: none; /* Pas de bordure */}


#corps blockquote p
{
 background-image:url("../img/jpg/heaven-on-earth.jpg");
 background-repeat: no-repeat;
font-style: italic;
position: relative;
top: 10px
}

#corps div iframe
{color: navy;
   font-size: 18px;
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
   width:95%;
   top:10px;
   overflow: auto;}
   
   .cit
   {color: navy;
   font-size: 18px;
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
   width:50%;
   height: 150px;
   overflow: auto;}

#corps ol
{ color: green;
list-style-image:url("../img/png/ekon.png");
}
 .flottant 
{float: left;
margin-right:10px;
margin-bottom:10px;}

.flottant_droite 
{float: right;
margin-right:10px;
margin-bottom:10px;}

.twitter-follow-button
{
border: 2px solid black;
background-image: url("../img/png/twitter-a.png");
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{  clear:left;
   padding: 5px;
   text-align:left;
   border: 2px solid navy;
   background-image: url("../img/jpg/goubhet.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-color: rgb(200,200,230);
}
#pied_de_page a /* Tous les liens se trouvant dans un menu */
{font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif; color: navy; font-size: 14px; font-weight:bold; text-decoration: none; font-style: italic}

#pied_de_page a:hover /* Quand on pointe sur un lien du menu */
/*{background-color: #CFE1EB; color:green; text-decoration: underline}*/
{background-color: rgb(136,150,180) ; /* Le fond du paragraphe change de couleur */
 text-decoration: underline;}
.aca{float:right;
margin-right:10px;}

/*page menu*/
.aligne li
{margin-left:25%;
margin-top:25px;
}