body
{
   width: 900px; /* pour ceux qui ont un ptit écran */
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("imagesfrblanc/fondfrblanc.gif");
   background-attachment: fixed; /* Le fond restera fixe */
}

/* L'en-tête */
#en_tete
{
   width: 760px;
   height: 100px;
   background-repeat: no-repeat; /* Le logo sera unique */
   margin-bottom: 10px;
   }

/* Le menu */
#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 175px; /* Très important : donner une taille au menu */
   color: #ff0000; /* orange pour autres rubriques en construction */
}
.element_menu
{
   border: 4px ridge #ff0000;  /* une bordure moyenne pr entourer chq élt du menu  */
   margin-bottom: 9px; /* Pour éviter que les éléments du menu ne soient trop collés */
   padding-right: 7px; /* Pour éviter que les éléments du menu ne soient trop collés */
   font-size: 17px;
   background-image: url("imagesfrblanc/treillis.gif");
}

/* Le corps de la page */
#corps
{
   margin-left: 180px; /* 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 */
   border: 3px ridge #ff0000; /* Une bordure fine pour bien marquer les limites du corps */
   background-image: url("imagesfrblanc/fond-fromage-fm.jpg");
}
p
{
   color: black;
   font-size: 16px;
   font-family: "Comic Sans MS", Verdana, Georgia, serif; 
   text-align: justify; /* Le paragraphe sera justifié */
   padding: 9px; /* Marge intérieure de 12px */
}
h1
{
   color: #ff2000;
   font-size: 35px;

}
h2
{
   color: #ff4060;
   font-size: 35px;
}
.grand  /* plus grand */
{
   font-size: 38px;
}
.grand:first-letter /* Je veux que la première lettre de mes titres h1... */
{
   font-size: 1.35em; /* Fasse une hauteur de 1,4 ligne */
   color: #ff0000;
}
h3
{
   color: #ff4020;
   font-size: 24px;
}
h4
{
   color: #ff4040;
   font-size: 20px;
}
h5
{
   color: #ff6000;
   font-size: 18px;
}
h6
{
   color: #ff6040;
   font-size: 16px;
}
li
{
   font-size: 16px;
   font-family: "Comic Sans MS", Garamond, Georgia, serif;
}
.gras  /* du réduit qui est gras */
{
   font-size: 16px;
   color: #ff4020;
   font-weight: bold;
}
.reduit
{
   font-size: 16px;
   color: #ff4020;
}
.tresreduit  /* from, tofu pain du menu */
{
   font-size: 13px;
}
.petit
{
   font-size: 13px;
}
em
{
   font-size: 22px;
   font-style: italic; /* Les importants em seront en italique ! */
   font-family: Garamond, "Bookman Old Style", "Courier New", serif;
}
h1, h2, h3, h4, h5, h6
{
   font-family: Georgia, "Trebuchet MS", "Arial Black", Arial, serif; /* On essaie d'avoir Georgia en priorité */
   padding: 10px; /* Marge intérieure de 12px */
}
h1, h2, h3
{
   text-align: center; /* Pour centrer les titres h1, h2, h3*/
}
.navig
{
   text-align: center; /* Pour centrer les flèches de navigation en bas */
}
h3 a
{
   font-size: 20px;
}
a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   font-size: 17px;
   font-family: Georgia, Garamond, "Comic Sans MS", serif;
   color: #ff4020;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: #ff4020; /* Le lien prendra la couleur  marine quand on pointera dessus */
}
h3 a:hover /* Quand on pointe sur un titre h3 */
{
   text-decoration: underline; /* Le lien titre h3 "kefir de lait" deviendra souligné quand on pointera dessus */
   color: #ff0000; /* Le lien h3 "kefir de lait" sera écrit en bleu foncé quand on pointera dessus */
}
li a:hover /* Quand on pointe sur un li */
{
   color: #ff0020; /* Le li sera écrit en foncé quand on pointera dessus */
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
    color: #ff6040; /* Le lien sera écrit en bleu plus clair quand on aura déjà vu le lien */
} 
ul /* Ma liste aura des puces en forme de puces clignotantes*/
{
   list-style-image: url("../imagessite/listr.gif");
}
a img /* Toutes les balises img> contenues dans un lien a  */
{
   border: none; /* Pas de bordure aux images-liens */
}
h2 /* Tous les titres h2 auront une ligne de séparation bleue épaisse dessous  */
{
   border-bottom: 4px ridge #ff0000;
}
.imageflottanteleft
{
   float: left;
   margin-right: 20px; /* Qu'il y ait une marge de 20px à droite pour que ça colle pas trop au texte */
   margin-bottom: 15px; /* Qu'il y ait une marge de 15px dessous pour que ça colle pas trop au texte */
}
.imageflottanteright
{
   float: right;
   margin-left: 20px; /* Qu'il y ait une marge de 20px à gauche pour que ça colle pas trop au texte */
   margin-bottom: 15px; /* Qu'il y ait une marge de 15px dessous pour que ça colle pas trop au texte */
} 
.dessous /* Je veux que le texte revienne dessous l'image flottante */
{
   clear: both;
}
h2:first-letter /* Je veux que la première lettre de mes titres h2, titres en haut du corps soient lettrines... */
{
   font-size: 1.2em; /* Fasse une hauteur de 1,25 ligne */
   font-weight: bold; /* Soit écrite en gras */
   color: #ff0000;
   font-family: Georgia, Garamond, "Comic Sans MS", serif;
}
.signature
{
  text-align: right; /* Pour aligner à droite ma signature */
}
strong
{
   font-weight: bold;
}
center
{
   text-align: center; 
   font-size: 18px;
   font-family: "Comic Sans MS", Garamond, Georgia, serif;
}
table  /*le tableau */
{
   font-size: 15px;
   background-image: url("imagesfrblanc/filsblancs.gif");
   border: 1px ridge #ff0000; /* Une bordure fine pour bien marquer les limites du tableau */
}
.merci
{
   color: black;
   font-size: 15px;
   font-family: Verdana, "Comic Sans MS", Georgia, serif; 
}
.fine
{
   color: black;
   font-size: 14px;
   font-family: Verdana, "Comic Sans MS", Georgia, serif; 
}
.centre
{
   text-align: center; /* Pour centrer */
}
.strong  /* gras */
{
   font-size: 15px;
   font-weight: bold; /* en gras  ! */
}