H1 {color: #f00; text-Align:center; background-color: #0F0}
H2 {color: #080; background-color: #fF0; margin-right: 5% ; margin-left : 5%}
H3 {color: #00f; background-color: #0F0; margin-right: 10% ; margin-left : 10%}
BODY {font-size : 1.2em;}
P {text-align: justify; text-indent : 20px; margin-bottom : 0px; margin-top : 0px ; color: #000000;  text-decoration : none ; font-weight: normal}
.liste { color: #000000; text-decoration: none ; font-weight: normal}
.liste:first-letter { color: #fff ; text-decoration: underline; font-weight: bold; font-style: oblique; background-color: #00f; letter-spacing: 3px}
A:hover { color : #f0f ; background-color : #0f0}
P:first-line { margin-left : 10px ;}
P:first-letter { color: #fff ; text-decoration: underline; font-weight: bold; font-style: oblique; background-color: #000; letter-spacing: 3px}


/***** menu CSS *****/

.dessus, .menu, .ssmenu, .sssmenu a {
/* Il est important de laisser une largeur, au cas où le Javascript soit désactivé.
margin aussi */
 text-indent : 0px;
 background: #88ff72 url(/Images/bouton_vert.jpg) no-repeat center;
 color: #8888ff;
 font-size:12px;
 font-weight:bold;
 border: solid #feB;
 border-width: 0px 0px 1px 0px;
 padding:0;
 margin:0;
}

p.dessus, p.ssmenu { border: 0px;}

.menu {
/* Il est important de laisser une largeur, au cas où le Javascript soit désactivé.
margin aussi */
 width:110px;
}

p.dessus, p.ssmenu, .sssmenu {
/* Il est important de laisser une largeur, au cas où le Javascript soit désactivé.
margin aussi */
 width:180px;
}

.dessus, .ssmenu, .menu, .sssmenu p {
 text-align:center;
}

a.dessus, .menu a, a.ssmenu, .sssmenu a, .menu a:visited, a:visited.ssmenu, .sssmenu a:visited {
/* Les liens qui ne sont pas sous le curseur.
 Le display:block et le width:100% permettent de faire le lien sur toute la longueur
 Eviter de modifier le padding et le margin... à moins de trouver un truc qui marche
 bien sur IE, Opéra, Mozilla, Konqueror...
 */
 font-family:MS Sans Serif, arial, sans-serif, Verdana;
 text-decoration:none;
 color: #000;
 width:100%;
 display:block;
 padding:2px 0px;
 margin:2px;
}



a.dessus, .sssmenu a:hover, .sssmenu a:focus, a:hover.ssmenu , a:focus.ssmenu , .menu a:hover, .menu a:focus {
/* Les liens sous le curseur.
 On change les couleurs du texte et de fond, et on enlève le soulignement.
 */
 background: #88ff72 url(/Images/bouton_vert_jaune.jpg) no-repeat center;
 color:#00c;
 text-decoration:none;
}


.dessus span, li span, .menu span, .ssmenu span, .sssmenu span {
/* pour cacher les ; en fin de <li>, ce qui permet aux synthèses vocales de prendre une
 pause dans l'élocution */
 display:none;
}

.dessus img, .menu img, .ssmenu img, .sssmenu img {
/* pour cacher les ; en fin de <li>, ce qui permet aux synthèses vocales de prendre une
 pause dans l'élocution */
 border:0;
 float:right;
}


.dessus, .ssmenu {
/* Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
 padding:0;
 margin:0;
 list-style-type:none;
 z-index:4;
}


/* par Troumad */

.menu { z-index:2;}

.sssmenu {position: absolute;left:182px;visibility:hidden;margin:0;padding:0;z-index:6;}