body /*le corps de la page*/
{
 font: 0.8em trebuchet, sans-serif; /*police de caractere par defaut utilisee pour le site*/
 background: #cccccc; /*couleur de fond gris clair*/
 margin: auto; /*pour centrer le design*/
 padding: 10px; /*ecart par rapport au haut de la fenetre*/
 width: 910px;
 text-align: center; /*pour centrer le texte par defaut dans le design*/
}



#top /*en tete de la page*/
{
 position: absolute;
 width: 910px;
 height: 102px;
 margin: 0;
 padding: 0;
 border: 0;
 top: 0;
 background: #3d3d3d;
 z-index: 100;
 text-align: left;
}
 
#menuDeroulant /*le container principal du menu deroulant*/
{
 position: absolute;
 width: 910px;
 margin: 0;
 padding: 0;
 border: 0;
 top: 102px;
 list-style-type: none; 
 z-index:100;
}

#menuDeroulant li /*les listes a puce du menu deroulant*/
{
 float: left; /* c est ce qui positionne les elements du menu cote a cote*/
 margin: 0;
 padding: 0;
 border: 0;
 width: 182px; /*dimension obligatoire pour la taille des elements de menu*/
}

#menuDeroulant .sousMenu /*les sous menu du menu deroulant*/
{
 list-style-type: none; /*pour supprimer l affichage des puces dans la liste*/
 margin: 0;
 padding: 0;
 border: 0;
 display: none; /*pour cacher le sous menu*/
}

#menuDeroulant .sousMenu li /*les listes a puce du sous menu*/
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 182px;
 border-top: 1px solid transparent; 
 border-right: 1px solid transparent;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited /*style des liens du menu deroulant*/
{
 display: block;
 height: 1%;
 color: #ffffff;
 background: #000000;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #ffffff;
 text-decoration: none;
}

#menuDeroulant li a:hover { background-color: #3d3d3d; } /*style des liens du menu deroulant*/
#menuDeroulant li a:active { background-color: #3d3d3d; } /*style des liens du menu deroulant*/
#menuDeroulant .sousMenu li a:link, /*style des liens du menu deroulant*/
#menuDeroulant .sousMenu li a:visited /*style des liens du menu deroulant*/
{
 display: block;
 color: #ffffff;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat; /*image de fond pour les sous menus*/
}

#menuDeroulant .sousMenu li a:hover /*apparence des sous menus au survol de la souris*/
{
 background-image: none;
 background-color: #cccccc;
}

#menuDeroulant li:hover > .sousMenu { display: block; } /*apparence des sous menus au survol de la souris*/
.banniere_animee /*partie sous le menu deroulant ou on peut placer une image ou une animation flash*/
{
 background: #cccccc; /*gris clair*/
 position: absolute; 
 width: 910px;
 height: 100px;
 margin: 0;
 padding: 0;
 border: 0;
 top: 102px;
 margin: auto;
}

.contenu /*container pour le corps du site qui contient le bloc texte*/
{
 background: #000000 top center url("background.jpg") no-repeat; /*gris clair*/
 position: absolute;
 width: 910px;
 height: 720px;
 margin: 0;
 padding: 0;
 border: 0;
 top: 125px;
 margin: auto;
}

.picsengine /*container principal pour picsengine*/
{
 padding-left : 10px; /* Pour eviter que le texte a l'interieur du corps ne colle trop a la bordure */
 padding-top : 10px;
 padding-bottom : 10px;
 padding-right : 10px;
 width: 910px;
 height:720px;
 position: absolute;
}

div.scroll {
 height: 630px;
 width: 550px;
 left: 300px;
 top: 10px;
 overflow: auto;
 border: 1px solid #666666;
 background-color: #cccccc;
 background: rgba(204, 204, 204, 0.5);
 padding: 10px;
 position: absolute;
 font: 0.9em trebuchet, sans-serif; /*police de caractere pour ce cadre*/
 color: #000000; /*couleur du texte*/
 text-align: left;
}

div.scroll h3 /* Tous les textes h3 dans le cadre scroll */
{
 font: 1.3em trebuchet, sans-serif;
 color: #000000;
}
div.scroll h2 /* Tous les textes h3 dans le cadre scroll */
{
 font: 1.1em trebuchet, sans-serif;
 color: #000000;
}
div.scroll a:link
{
 color: #000000;
 font: 1.1em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.scroll a:visited
{
 color: #000000;
 font: 1.1em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.scroll a:hover /* Quand on pointe sur un lien */
{
 color: #ffffff;
 font: 1.1em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}

div.scroll a:active
{
 color: #ffffff;
 font: 01.1em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.scroll a:focus
{
 color: #ffffff;
 font: 1.1em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}

div.pied_de_page /*pied de page avec copyrights, mentions legales etc*/
{
 background: #3d3d3d;
 width: 910px;
 height: 168px;
 margin: 0;
 padding: 0;
 border: 0;
 top: 845px;
 position: absolute;
 margin: auto;
}
div.pied_de_page h3 /* Tous les textes h3 du pied de page */
{
 font: 0.9em trebuchet, sans-serif;
 color: #ffffff;
 text-align: center;
 padding: 2px;   
}
div.pied_de_page a:link
{
 color: #ffffff;
 font: 0.9em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.pied_de_page a:visited
{
 color: #ffffff;
 font: 0.9em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.pied_de_page a:hover /* Quand on pointe sur un lien */
{
 color: #000000;
 font: 0.9em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}

div.pied_de_page a:active
{
 color: #000000;
 font: 0.9em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
div.pied_de_page a:focus
{
 color: #000000;
 font: 0.9em trebuchet, sans-serif;
 text-decoration: none;
 font-weight: bold;
}
/* maintenons stylons les formulaires */
input, textarea
{
   font: 1.1em trebuchet, sans-serif; /* police du texte tapé l'intérieur des champs */
}
 
input:focus, textarea:focus /* Quand le curseur est sur un champ */
{
   background-color: #cccccc;
}
 
label
{
   color: #000000; /* couleur des labels */
}

legend /* On met un peu plus en valeur les titres des fieldset */
{
   font-family: 1.1em trebuchet, sans-serif;
   color: #000000;
   font-weight: bold;
}
 
fieldset
{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: #cccccc;
}