body
{
   width: 960px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 10px;    /* Idem pour le bas du navigateur */
   background-color:#DDDDDD;
   font-family:"Trebuchet MS", Arial, serif;
   font-size-adjust:inherit;
}
/* L'en-tête */

#en_tete
{
   width: 960px;
   background:url(images/bandeau.jpg) repeat;
   height: 110px;
   margin-bottom: 5px;
   border-top:1px solid silver;
   border-left:1px solid silver;
   border-bottom:1px solid black;
   border-right:1px solid black;
   
}

#barre
{ 
   width: 950px;
   vertical-align:middle;
   height:50px;
   background-color:#8BA6B6;
   border-top:1px solid silver;
   border-left:1px solid silver;
   border-bottom:1px solid black;
   border-right:1px solid black;
   padding:5px;
   margin:0px;
   margin-bottom:5px;
   font-size:medium
} 
/* Je séléctionne mes <li> par les sélecteurs (<li> est contenu par le <div>), inutil de lui rajouter une class */
div#barre li 
{
        display : inline;
        padding-left: 5%;
        padding-right: 5%;
}

div#barre ul {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
#barre ul
{
   text-align:center;
}
#barre a
{
   text-decoration: none;
   font-size:large;
   color:#0033CC;
   font-style: italic;
   margin:0px;
}
#barre a:hover
{
   color:#000000;
   text-decoration: underline;
}  
/* Le menu */

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

.element_menu
{
   background-color:#8BA6B6;
   border-top:1px solid silver;
   border-left:1px solid silver;
   border-bottom:1px solid black;
   border-right:1px solid black;
   margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
/* Quelques effets sur les menus */


.element_menu h3 /* Tous les titres de menus */
{   
   color:#000080;
   font-size:105%;
   text-align: center;
   margin-bottom:0px ;
   margin-top:0px ; 
}

.element_menu h4 /* Tous les soustitres de menus */
{   
   color:#333333;
   font-size:90%;
   text-align: left;
   margin-top:0px;
   margin-bottom: 0px;
}


.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   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 */
   list-style-type: square;
   
}   

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color:#0033CC;
   font-size:85%;
   text-decoration:underline;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   color:#000000;
}
/* Le corps de la page */
#corps
{
   margin:auto; 
   margin-bottom: 5px; /* 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 */
   width:760px;
   color:#000000;
   background-color:#ADBEC7; /* Une couleur de fond pour le corps */
   border-top:1px solid silver;
   border-left:1px solid silver;
   border-bottom:1px solid black;
   border-right:1px solid black;
   float:right;
   padding-bottom:20px;
  /* Une bordure pour bien marquer les limites du corps et pour faire joli */

}
#corps h2 /* Tous les titres h3 du corps */
{
   text-align: center;
   margin-bottom:0px ;
   margin-top:0px ;
   color:#333333;
   font-weight:bold;
   font-size:150%;
   font-variant: small-caps;
   border-bottom:dashed #333333 2px;
   border-top:dashed #333333 2px;
}
#corps h3 /* Tous les titres h3 du corps */
{
   color:#003366;
   text-align: left;
   margin-bottom:0px ;
   margin-top:5px ; 
   font-size:100%;
   border-bottom:solid 1px #003366;
   
}
#corps h4 /* Tous les titres h3 du corps */
{
   color:black;
   text-align: left;
   margin-bottom:0px ;
   margin-top:5px ; 
   font-size:95%;
   text-decoration:underline;
   
}
#corps h5
{
display: inline; 
border-bottom: 1px solid #074381; 
padding-bottom: 2px; 
font-family: Tahoma;
font-style: italic; 
font-weight: bold;
font-size: 12px; 
color: #074381;
}
#corps h6 /* Tous les titres h6 du corps */
{
   color:black;
   margin-bottom:0px ;
   margin-top:0px ; 
   font-size:85%;
   font-style:italic;
}
#corps table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
   margin:auto;
   border:2px groove black;
}
#corps td, th
{
   border: 1px solid black;  
}
#corps td
{
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */ background-color:#D2D3DF;
}
#corps marquee /* Tous les marquee du corps */
{
   margin:0px;
}
#corps .chiffre /* Tous les marquee du corps */
{
   color:red;
   font-weight:bold;
}
#corps ul
{
   list-style-type: square;
}
#corps a
{
   color:#0033CC;
}
#corps a:hover
{
   color:#333333;
}
#corps p, .pages
{
   font-size:95%;
}
#pied_de_page p
{
   padding: 5px;
   text-align: center;
   color:#000000;
   background-color: #8BA6B6;
   border-top:1px solid silver;
   border-left:1px solid silver;
   border-bottom:1px solid black;
   border-right:1px solid black;
   font-size:small;
   clear:both;
}
#pied_de_page
{
clear:both;
}
#pied_de_page a
{
   text-decoration:none;
   color:#0000FF;
}
#pied_de_page a:hover
{
   color:black;
   text-decoration:underline;
}


   /* Polices */
.arial { font-family: Arial; }
.times { font-family: Times New Roman; }
.courier { font-family: Courier; }
.impact { font-family: Impact; }
.verdana { font-family: Verdana; }
/* Tailles */
.minuscule { font-size: 8px; }
.petit { font-size: 10px; }
.moyenpetit { font-size: 11px; }
.moyengrand { font-size: 13px; }
.grand { font-size: 14px; }
.enorme { font-size: 18px; }
/* Alignement */
.gauche { text-align: left; }
.droite { text-align: right; }
.centre { text-align: center; }
.justifie { text-align: justify; }
/* Styles */
.gras { font-weight: bold; }
.italique { font-style: italic; }
.souligne { text-decoration: underline; }
.barre { text-decoration: line-through; }
.suligne { text-decoration: overline; }
.encadre { border: 1px solid #0f3863; padding: 1px; padding-left: 3px; padding-right: 3px; margin-left: 1px; margin-right: 1px; }
.surligne { padding: 0px; padding-left: 1px; padding-right: 1px; background-color: #0f3863; color: #f7f7f7; }
/* Titres */
.titre1 { display: inline; margin-bottom: 3px; font-family: Tahoma; font-size: 16px; font-variant: small-caps; font-weight: bold; color: #074381; } /* A personnaliser */
.titre2 { display: inline; border-bottom: 1px solid #074381; padding-bottom: 2px; font-family: Tahoma; font-style: italic; font-weight: bold; font-size: 12px; color: #074381; } /* A personnaliser */
/* Separation */
.separation { height: 3px; background-color: #000000; margin-top: 2px; margin-bottom: 2px; } /* A personnaliser */
/* Citation */
.citation_auteur { margin: 5px; margin-bottom: 0px; padding: 0px; padding-left: 5px; font-weight: bold; color: #0f3863; }
.citation { margin: 5px; margin-top: 0px; padding: 5px; padding-top: 2px; padding-bottom: 2px; border: 1px dashed #0f3863; }
/* Liste */
.puce { list-style-type: disc; list-style-position: outside; }
/* Code */
pre { margin: 0px; padding: 0px; white-space: nowrap; }
pre a { text-decoration: none; }
.code_type { margin: 5px; margin-bottom: 0px; padding: 0px; padding-left: 5px; font-weight: bold; color: #0f3863; }
.code_nom { font-variant: small-caps; }
.code { background-color: #f7f7f7; margin: 5px; margin-top: 0px; padding: 5px; padding-top: 2px; padding-bottom: 2px; border: 1px dashed #0f3863; }
.red
{
color:red;
}