body
{
   width: 900px; /* pour ceux qui ont un ptit écran */
   margin: auto;
   margin-top: 20px;
   background-image: url("imagesbrico/carte.jpg");
   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 corps de la page */
#corps
{
   margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 4px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   border: 3px ridge #a0a0ff; /* Une bordure fine pour bien marquer les limites du corps */
   background-image: url("imagesbrico/violet.jpg");
}
p
{
   color: black;
   font-size: 16px;
   font-family: "Comic Sans MS", Verdana, Georgia, serif; 
   text-align: justify; /* Le paragraphe sera justifié */
   text-indent: 0px; /* Les paragraphes ne seront pas indentés */
   padding: 9px; /* Marge intérieure de 12px */
}
.pasindent
{
text-indent: 0px; /* Les paragraphes ne seront pas indentés */
}
.indent
{
   text-indent: 30px; /* Le texte commence 30 pixels sur la droite */
   text-align: justify; /* Le paragraphe sera justifié */
   padding: 12px; /* Marge intérieure de 12px */
}
h1
{
   color: #ff2000;
   font-size: 35px;
}
h2
{
   color: #8000ff;
   font-size: 33px;
}
h3
{
   color: #8000ff;
   font-size: 24px;
}
h4
{
   color: #8000ff;
   font-size: 20px;
   font-style: italic; /*  en italique ! */
}
h5
{
   color: #8080ff;
   font-size: 18px;
}
h6
{
   color: #a0a0ff;
   font-size: 16px;
}
li
{
   font-size: 16px;
   color: black;
}
ul
{
   font-size: 16px;
   color: #a00040;
}
.peureduit
{
   font-size: 17px;
   font-weight: bold;
   color: #8000ff;
   font-variant: small-caps;
}
.reduit /* énumération du menu avec les puces non lues et non pointées */
{
   font-size: 16px;
   color: #8000ff;
}
.gras  /* du réduit qui est gras */
{
   font-size: 16px;
   color: #8000ff;
   font-weight: bold;
}
.grand  /* plus grand */
{
   font-size: 32px;
}
.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: #8000c0;
}
.tresreduit  /* pour éventuel complément */
{
   font-size: 13px;
   color: #a00040;
}
em
{
   font-size: 18px;
   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;
   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;
   text-transform: capitalize; /* Les premières lettres des mots du lien dans titre h3 contenus dans un lien seront en majuscules */
}
a  /* Les liens du corps */
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   font-size: 17px;
   font-family: Georgia, Garamond, "Comic Sans MS", serif;
   color: #8000c0;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: #600080; /* Le lien prendra la couleur  violet foncé quand on pointera dessus */
}
h3 a:hover /* Quand on pointe sur un titre h3 */
{
   text-decoration: underline; /* Le lien titre h3 deviendra souligné quand on pointera dessus */
   color: #600080; /* Le lien h3 "kefir de lait" sera écrit en foncé quand on pointera dessus */
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
    color: #6000ff; /* Le lien sera écrit en 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/listmauve.gif");
   color: #8000ff;
}
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 épaisse dessous  */
{
   border-bottom: 4px ridge #a0a0ff;
}
.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.1em; /* Fasse une hauteur de 1,25 ligne */
   font-weight: bold; /* Soit écrite en gras */
   color: #8020c0;
   font-family: Georgia, Garamond, "Comic Sans MS", serif;
}
h1:first-letter /* Je veux que la première lettre de mes titres h1... */
{
   font-size: 1.35em; /* Fasse une hauteur de 1,4 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 */
}
table
{
   color: black;
   font-size: 13px;
   font-family: "Comic Sans MS", Garamond, Georgia, serif;
   border: 2px ridge #a0a0ff; /* Une bordure fine pour bien marquer les limites du corps */
}
.carre 
{
   font-size: 18px;
   font-family: "Comic Sans MS", Garamond, Georgia, serif;
   text-align: justify;
   padding: 9px; /* Marge intérieure de 12px */
}
.centre
{
   text-align: center; /* Pour centrer */
}
.fine
{
   color: black;
   font-size: 15px;
   font-family: Verdana, "Comic Sans MS", Georgia, serif; 
}