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

.prechargement {display: none;}

h1,h3,h4,h5,p {color: #009900;} /*----- vert : couleur de "SOMMAIRE" et des titres -----*/

h1 {font-size: 190%; line-height: 0.9em;}

span {font: 95%/1.4em sans-serif;}   /* Ecriture des chiffres avec la police Sans-Serif plus lisible */

ins
{background-color: rgb(255,255,185);
text-decoration: none;}

ins.rose
{background-color: rgb(244,202,203);
text-decoration: none;}

p.en_vert, p.sous_titre
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #008800;          /*----- vert : couleur de certains paragraphes -----*/
 margin-left: 60px;}
 
p.en_vert big , p.sous_titre big
{font: 97%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: red;}
 
 p.en_vert strong , p.sous_titre strong
{font-style: normal;
 font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: black;}

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.nouvel_onglet
{font: 96%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
color: black;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 60px;
padding-right: 10px;
margin-top: 10px;
margin-bottom: -17px;
background-color: rgb(255,255,139);
border: 1px solid rgb(249,249,248);}

p.nouvel_onglet big , p.nouvel_onglet small
{font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: red;}
 
p.nouvel_onglet em
{font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #008800;}

p.titre_sommaire , h5#sommaire a.titre_sommaire , h5#sommaire a:hover.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%;
color: #009900;  /*----- vert : couleur des sous-titres -----*/
 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;
 background-image:url('img/background_4.jpg');
 background-repeat: no-repeat;}
 
h5#sommaire a
{font: 115%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 color: #007700;}    /*----- vert : couleur des liens du sommaire -----*/

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: 97%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-align: center;
 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: #007700;      /*----- vert : couleur de "Index de www.mespdf.fr" -----*/
 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;}

/*--------------------------- 4 BOUTONS DU HAUT ------------------------------*/

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

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

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

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

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

div#commentaires a , div#contact a , div#evaluation a , div#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 */

div#commentaires a:hover , div#contact a:hover , div#evaluation a:hover , div#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;}

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

div#evaluation a:hover span img
{display: inline;  /* La bulle apparaît quand le curseur passe sur le lien Contact */
 position:absolute;
 top: 50px;
 left: 45%;
 width: 300px;
 border-style: none;}

div#phpmyvisites span img {display: none;} /* La bulle est cachée quand le curseur ne passe pas sur le lien PhpMyVisites */
		   		  
div#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 -----------------------------*/

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

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

div#logo
{float: right;
 margin-right: 2%;
 width: 128px;}

div#pdf
{position: relative;
 bottom: 176px;
 left: 160px;
 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/logo_pdf.gif) 0 100% no-repeat;
 border-bottom: 1px dotted #66CC33;} /* Trait vert qui s'étend presque jusqu'au bord droit de la page */

h1#pour
{position: relative;
 font: 169%/1em Georgia,Times,Helvetica,Arial,sans-serif;  /*ligne ajoutée*/
 color: #009900;     /*----- vert : "Informatique pour les débutants....vidéo" -----*/
 text-align: left;
 margin-top: 25px;
 bottom: 180px;
 left: 85px;}

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

h1 strong big
{font-size: 100%;
 color: #CC3300;}
 
div#cadre_pointilles_1
{border: 2px dotted #66CC33; /*--17 catégories au choix--*/
 padding: 20px;}
 
div#cadre_pointilles_2       /*--Index des pages de www.mespdf.fr--*/
{border: 10px dotted white;
 padding: 15px;
 background-color: rgb(246,246,246);}

div#cadre_pointilles_3       /*--Vers l'index des pages de www.mespdf.fr--*/
{border: 8px dotted white;
 padding: 5px;
 background-color: rgb(242,242,242);
 margin-bottom: 15px;}

#texte_souligne {text-decoration:underline;}

/*-------------------------- MENU DROITE ET GAUCHE ---------------------------*/

#page
{width: 100%;
min-width: 800px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
background-image:url('img/background_3.gif');
background-repeat: repeat-x;
border-left: 3px dotted rgb(235,235,235);
border-right: 3px dotted rgb(235,235,235);}

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

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

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

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

div#menu_active
{background-color: #CCC;}

div.menu a , div#menu_active a
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: red;}
 
div.menu_autre a
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #CC0000;}
 
div.menu_en_vert a , div.menu a small
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #008800;}  /*----- vert : couleur de "TUTORIELS VIDEO A VISIONNER ..." -----*/

div.menu a:hover, div#menu_active a:hover , div.menu_autre a:hover , div.menu_en_vert a:hover , div.menu a:hover small , div#menu_active a:hover small
{color: #66CC33;
 text-decoration: none;}
 
div#menu_active a small
{font: 90%/1.4em Georgia,Times,Helvetica,Arial,sans-serif;
 color: #009900;
 text-decoration: none;}

 /*----------------------------- MENU DE DROITE ------------------------------*/
 
div.traits_verts
{position: relative;    /* Positionnement relatif sans valeurs: ".traits_verts" positionné devient ainsi le bloc conteneur. */
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 background-image:url('img/background_5.jpg');
background-repeat: repeat-x;
 margin-bottom: 40px;    /* Pour que les listes ne soient pas trop collées verticalement */
 border-top: 2px dotted #66CC33;           /*----- vert : couleur des pointillés horizontaux -----*/
 border-left: 3px solid rgb(94,189,47);}   /*----- vert : couleur des traits verticaux -----*/
 
.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;}
 
div.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;}
 
div.fond_gris              /* Cadre gris regroupant <ul> jusqu'à </ul>. */
{margin-top: 60px;       /* Il est presque collé aux deux traits verts,en haut */
 margin-left: 10px;      /* et à gauche */
 padding-top: 0;     /* 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);}
 
 div.fond_sommaire              /* Cadre gris regroupant <ul> jusqu'à </ul>. */
{margin-top: 20px;       /* Il est presque collé aux deux traits verts,en haut */
 margin-left: 10px;      /* et à gauche */
 padding-top: 0;     /* 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_sommaire 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 */
 
/*--------------------------------- LISTES -----------------------------------*/

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.pdf big , li.pdf_gris big , li.web big , li.web_gris big , li.swf big ,  li.swf_gris big , a:hover.ancre big , p.titre_sommaire big
{font: 100%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 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: rgb(187,140,0);}      /*-- Couleur orange sur les liens du sommaire --*/
 
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 , a:hover.ancre strong , a:hover.ancre_haut strong, a:hover.ancre small ins, a:hover.ancre_haut small ins
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #CC0000;}
 
a.ancre strong , a.ancre_haut strong
{font: 95%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
 text-decoration: none;
 color: #777;}

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

li.passe_ligne
{background-color: rgb(249,249,249);
 color: rgb(249,249,248);
 margin-left: -40px;
 margin-bottom: 2px;
 padding-bottom: 10px;}
 
div.icone {padding-left: 43%;} /* Icône qui sépare des catégories de liens dans
                               onglet_windows.html et onglet_emails.html */
                               
                               
/*--------------- SOULIGNEMENT DU TEXTE EN NOIR,ROUGE OU VERT ----------------*/

del , del.noir
{font: 98%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
font-style: normal;
text-decoration: underline;
color: #663300;}  /* texte presque noir,couleur la plus fréquente dans la page*/

del.rouge
{font: 98%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
font-style: normal;
text-decoration: underline;
color: red;}

del.vert
{font: 98%/1.5em Georgia,"Times New roman",Times,Helvetica,Arial,sans-serif;
font-style: normal;
text-decoration: underline;
color: #008800;}

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

.en_blanc
{background-color: #FFF;
color: #FFFFFE;}

a:focus
{outline: none;}

/*--html {overflow-x: hidden;}--*/

/*--li.puce
{list-style-type: none;}--*/