body , h4
{font: 100%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;}

.prechargement {display: none;}

h1,h3,h4,h5,p {color: #00AA00;}
h1 {font-size: 190%; line-height: 0.9em;}

p.en_vert, p.sous_titre
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #008700;
 margin-left: 60px;}
 
p.en_vert big , p.sous_titre big
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: red;}

p.en_rouge
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: red;
 margin-left: 60px;} 

p.en_gris
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #444;
 margin-left: 60px;}
 
p.titre_sommaire
{font: 120%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #008800;
 margin-bottom: 5px;}

h3.titre
{font-size: 100%;
 margin-left: 20px;
 margin-bottom: 25px;}

h4 {font-size: 90%;}

/*------------------------ H5 RETOUR SOMMAIRE ET HAUT ------------------------*/

h5
{margin-left: 0;
 margin-bottom: 15px;
 border: 1px solid red;
 text-align: center;
 padding: 10px 10px;}

h5 a.ancre , h5 a.ancre_haut
{text-decoration: underline;
 color: #66CC00;
 font: 97%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;}

h5 a:hover.ancre , h5 a:hover.ancre_haut
{color: red;}

h5#sommaire
{font: 80%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 margin-top: -20px;
 margin-bottom: -20px;
 margin-right: 10px;}
 
h5#sommaire a
{font: 115%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #008800;}   /*-----au lieu de #009900 un peu plus clair-----*/

h5#sommaire a:hover
{color: #CC0000;}
 
h5#index
{border-color: #FFF;
 font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 font-weight: normal;
 text-align: left;
 color: #008800;
 line-height: 1.8em;
 margin-top: 0;
 margin-bottom: 0;}
 
h5#vers_index
{border-color: #FFF;
 font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-align: center;
 color: #008800;
 line-height: 1.8em;
 margin-top: 0;
 margin-bottom: 0;}

h5#index a b {color: red;}

h5#index a:hover , h5#index a:hover b
{color: #66CC33;}

h5#vers_index a
{color: #008800;
 text-decoration: none;}
 
h5#vers_index a:hover  {color: red;}

h5.retour_sommaire a.ancre , h5.retour_haut a.ancre , h5#index a
{color: rgb(122,122,122);
 font: 97%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;}

h5.retour_sommaire a:hover.ancre , h5.retour_haut a:hover.ancre
{text-decoration: underline;
 color: red;}

h5.retour_sommaire , h5.retour_haut
{border: 1px solid white;
 margin-top: -10px;
 margin-bottom: -20px;}

/*----------------------------------------------------------------------------*/

#page
{width: 100%;
 margin-left: auto;
 margin-right: auto;}

#contenu {margin-top: -160px;}  /* Pour remonter le bloc Contenu vers "Des fichiers d'aide à ..."*/

#menu_gauche
{float: left;
 width: 35%;
 margin-top: 30px;  /* Pour faire remonter le menu gauche */
 margin-left: 3%;}

#menu_droite
{float: right;
 width: 55%;
 margin-top: 30px;  /* Pour faire remonter le menu droit */
 margin-right: 2px;}
 
 
/*--------------------------- 3 BOUTONS DU HAUT ------------------------------*/

#commentaires , #contact , #evalation , #phpmyvisites
{position: relative;
 margin-bottom: 15px;}

#commentaires
{float: left;
 width: 22%;
 margin-top: -10px;}

#contact
{float: left;
 width: 20%;
 margin-top: -10px;}

#evaluation
{float: left;
 width: 25%;
 margin-top: -10px;
 margin-bottom: 30px;} /* Pour éloigner "Evaluez ces pages" (et les 3 autres boutons) de "Mes" */

#phpmyvisites
{float: right;
 width: 20%;
 margin-top: -10px;}

#commentaires a , #contact a , #evaluation , #phpmyvisites a
{display: block;
 text-align: center;
 border-top: 3px solid rgb(255,255,255);
 border-right: 3px solid rgb(134,134,134);
 border-bottom: 3px solid rgb(134,134,134);
 border-left: 3px solid rgb(255,255,255);
 padding-top: 2px;
 padding-bottom: 4px;
 margin-top: 10px;
 margin-right: 3px;
 text-decoration: none;
 background-color: rgb(242,242,242);
 color: #663200;}  /* Liens de couleur marron */

#commentaires a:hover , #contact a:hover , #evaluation a:hover , #phpmyvisites a:hover
{display: block;
 color: rgb(255,89,89);
 background-color: rgb(242,242,242);
 border-top: 3px solid rgb(134,134,134);
 border-right: 3px solid rgb(255,255,255);
 border-bottom: 3px solid rgb(255,255,255);
 border-left: 3px solid rgb(134,134,134);
 padding-top: 2px;
 padding-bottom: 4px;
 margin-right: 3px;}


#contact span img {display: none;} /* La bulle est cachée quand le curseur ne passe pas sur le lien Contact */
		   		  
#contact a:hover span img
{display: inline;  /* La bulle apparaît quand le curseur passe sur le lien Contact */
 position:absolute;
 top: 50px;
 left: 80%;
 width: 300px;
 border-style: none;}
							 
#phpmyvisites span img {display: none;} /* La bulle est cachée quand le curseur ne passe pas sur le lien PhpMyVisites */
		   		  
#phpmyvisites a:hover span img
{display: inline;  /* La bulle apparaît quand le curseur passe sur le lien PhpMyVisites */
 position:absolute;
 top: 50px;
 right: 80%;
 width: 300px;
 border-style: none;}

/*--------------------------- SOUS LES 3 BOUTONS -----------------------------*/

.ligne_horiz
{clear: both;
 visibility: hidden;}

#mes
{clear: left;
 float: left;
 margin-left: 2%;
 width : 10%;}

#imprimante
{float: right;
 width: 13%;}

#pdf
{position: relative;
 bottom: 176px;
 left: 155px;
 width : 80%;  /* Pour que le trait vert aille jusqu'au milieu de l'imprimante*/
 height: 140px;                    /* Hauteur à partir du bord haut de la page*/
 background: url(img/pdf_logo.jpg) 0 100% no-repeat;
 border-bottom: 1px dotted #66CC33;} /* Trait vert qui s'étend presque jusqu'au bord droit de la page */

#pour
{position: relative;
 text-align: left;
 margin-top: 25px;
 bottom: 180px;
 left: 110px;}

strong
{font-size: 65%;
 font-style: italic;}

h1 strong big
{font-size: 100%;
 color: #CC3300;}
 
#cadre_pointilles_1
{border: 2px dotted #66CC33;
 padding: 20px;}
 
#cadre_pointilles_2
{border: 10px dotted white;
 padding: 15px;
 background-color: rgb(246,246,246);}

#cadre_pointilles_3
{border: 8px dotted white;
 padding: 5px;
 background-color: rgb(242,242,242);
 margin-bottom: 15px;}

#texte_souligne {text-decoration:underline;}

/*--------------------------- CATEGORIES DU MENU------------------------------*/
 
.menu , #menu_active , .menu_autre , .menu_en_vert
{border: 1px solid #66CC33;
 padding: 5px 5px 9px 5px;
 margin-bottom: 10px;
 text-align: center;}

#menu_active
{background-color: #CCC;}

.menu a , #menu_active a
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: red;}
 
.menu_autre a
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #CC0000;}
 
.menu_en_vert a
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #009900;}   /*-----au lieu de #00AA00 un peu plus clair-----*/

.menu a:hover, #menu_active a:hover , .menu_autre a:hover , .menu_en_vert a:hover
{color: #66CC33;
 text-decoration: none;}
 
 /*----------------------------- MENU DE DROITE ------------------------------*/
 
.traits_verts
{position: relative;    /* Positionnement relatif sans valeurs: ".traits_verts" positionné devient ainsi le bloc conteneur. */
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 40px;    /* Pour que les listes ne soient pas trop collées verticalement */
 border-top: 2px dotted #66CC33;
 border-left: 3px solid #66CC33;}
 
.traits_blancs
{position: relative;    /* Positionnement relatif sans valeurs: ".traits_verts" positionné devient ainsi le bloc conteneur. */
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 40px;    /* Pour que les listes ne soient pas trop collées verticalement */
 border-top: 2px dotted #FFF;
 border-left: 3px solid #FFF;}
 
 .fleche_verte
{position: absolute; /* Position absolue par rapport au premier ancêtre positionné ".traits_verts" */
 background: url(img/fleche_verte.gif) 0 100% no-repeat;
 width: 5%;
 padding-top: 60px;
 bottom: -25px;  /* La flèche descend de 25px sous chaque liste */
 left: -7px;}
 
 .fond_gris              /* Cadre gris regroupant <ul> jusqu'à </ul>. */
{margin-top: 10px;       /* Il est presque collé aux deux traits verts,en haut */
 margin-left: 10px;      /* et à gauche */
 padding-top: 10px;     /* Espace au-dessus du premier lien de chaque liste */
 padding-bottom: 10px;  /* Espace au-dessous du dernier lien de chaque liste*/
 background-color: #FFF;
 color: rgb(249,249,248);}

.fond_gris a , .fond_gris a:hover
{display: block;
 padding-top: 3px;
 padding-left: 60px; /* Distance entre la puce pdf (ou web) et le lien */
 padding-bottom: 3px;
 margin-bottom: 2px;
 margin-left : -40px; /* Pour aligner le bord gauche du cadre vert sur le bord gauche du cadre gris */
 text-decoration: none;
 color: #663300;}    /* Liens de couleur marron */

li
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 list-style-type: none;}

li.pdf a
{background: url(img/pdf_liste.jpg) 18px 4px no-repeat; /* 18px pour que la puce ne soit pas collée au bord gauche du cadre vert */
 background-color: rgb(247,247,247);
 border: 1px solid rgb(249,249,248);}

li.pdf_gris a
{background: url(img/pdf_liste.jpg) 18px 4px no-repeat;
 background-color: rgb(235,235,235);
 border: 1px solid rgb(249,249,248);}

li.pdf a:hover, li.pdf_gris a:hover
{background: url(img/pdf_liste.jpg) 18px 4px no-repeat;
 background-color: #C1E9B4;
 border: 1px dotted red;}

li.web a
{background: url(img/web.jpg) 18px 4px no-repeat;
 background-color: rgb(247,247,247);
 border: 1px solid rgb(249,249,248);}

li.web_gris a
{background: url(img/web.jpg) 18px 4px no-repeat;
 background-color: rgb(235,235,235);
 border: 1px solid rgb(249,249,248);}

li.web a:hover , li.web_gris a:hover
{background: url(img/web.jpg) 18px 4px no-repeat;
 background-color: #C1E9B4;
 border: 1px dotted #FFCC00;}
 
li.swf a
{background: url(img/swf_liste.jpg) 18px 4px no-repeat;
 background-color: rgb(254,241,241);
 border: 1px solid rgb(234,234,234);}

li.swf_gris a
{background: url(img/swf_liste.jpg) 18px 4px no-repeat;
 background-color: rgb(254,241,241);
 border: 1px solid rgb(234,234,234);}

li.swf a:hover , li.swf_gris a:hover
{background: url(img/swf_liste.jpg) 18px 4px no-repeat;
 background-color: #C1E9B4;
 border: 1px dotted red;}

li.pdf a , li.pdf a:hover ,
li.pdf_gris a , li.pdf_gris a:hover ,
li.web a , li.web a:hover ,
li.web_gris a , li.web_gris a:hover,
li.swf a , li.swf a:hover ,
li.swf_gris a , li.swf_gris a:hover
{padding-top: 4px;
 padding-bottom: 4px;}
 

li.gris a
{background: url(img/gris.jpg) 18px 3px no-repeat; /* 18px pour que la puce ne soit pas collée
                                                           au bord gauche du cadre vert */
 background-color: rgb(249,249,249);
 border: 1px solid rgb(249,249,248);}
 
li.gris span
{background-color: rgb(249,249,248);
 color: rgb(249,249,249);}

li.pdf span , li.pdf_gris span , li.web span ,  li.web_gris span , li.swf span , li.swf_gris span , p.titre_sommaire span
{font: 95%/1.4em sans-serif;}

li.pdf big , li.pdf_gris big , li.web big , li.web_gris big , li.swf big ,  li.swf_gris big , a:hover.ancre big
{font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 font-size: normal;
 color: red;}

li.pdf em , li.pdf_gris em , li.web em , li.web_gris em , li.swf em , li.swf_gris em
{font: 98%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
font-style: normal;
color: #008800;}

a.ancre big , a.ancre_haut big
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-decoration: underline;
 color: #CC9000;}
 
 a.ancre small , a.ancre_haut small
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-decoration: underline;
 color: red;}

a:hover.ancre big , a:hover.ancre_haut big , a:hover.ancre small , a:hover.ancre_haut small
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #CC0000;}

li.invisible
{color: #FFE;
 background-color:#FFF;}

li.puce
{list-style-type: none;}
 
.en_blanc
{background-color: #FFF;
color: #FFFFFE;}

.passe_ligne
{display: block;
 background-color: rgb(249,249,249);
 color: rgb(249,249,248);
 margin-left: -40px;
 margin-bottom: 2px;
 padding-bottom: 10px;}

.icone {padding-left: 43%;} /* Icône qui sépare des catégories de liens dans
                               onglet_windows.html et onglet_emails.html */
                               
a:focus
{outline: none;}