/* attention :
 - ouvrir et fermer les parenthèses accolades, 
 - les point-virgules entre les paramètres, 
 - ouvrir et fermer les commentaires avec les étoiles et les barres de slash
*/
html { width: 100% }
body {
    font-family: arial, sans-serif;
    font-size: 90%;
    margin:50px 10% 20px 10%;
    padding:0;
    background-color: #999999
} /* ceci est un commentaire dans la feuille de style */

h1,h2 {
    font-family: verdana, arial, sans-serif;
    font-size: 130%;
    color: #dcdcdc
}
h2 {
    font-size: 110%;
    border: 1px solid #bcbcbc; /* bordure de 1px autour des titres de niveau 2 */
    padding: 5px /* marge intérieure de 5 pixels */
}
p {
    font-family: Verdana, arial, sans-serif;;
    font-size: 100%;
    margin: 0 0 5px 0
    /* distances du tag paragraphe : dessus droite dessous gauche,
    ici 5 pixels au-dessous */
}
code { 
	background-color: #dcdcdc; /* #FF80C0 rose */ 
} 
a:link { /* les liens  */
    text-decoration: none; /* pas de soulignement */
    font-weight : bold; /* en gras */
    color: yellow; /* en jaune */
    background-color: navy /* fond en bleu navy */
}
a:visited {
    /* les liens qui ont été déjà visités se présenteront avec : */
    text-decoration: none;
    border-top: 1px solid purple; /* une bordure de 1 pixel en haut du texte, de couleur pourpre */
    border-left: 4px solid purple; /* une bordure de 4 pixels à droite */
    padding: 0 4px 10px 5px; /* de l'espace en nombre de pixels au-dessus, à droite, en-dessous et à gauche des mots */
    color: purple; /* le texte pourpre */
    background-color: #999999
}
a:hover { /* voici comment les liens "réagissent" quand la souris passe au-dessus d'eux (over) */
    color: navy;
    border-top: 1px solid yellow;
    border-right: 4px solid yellow;
    background-color: yellow
} 

/* désactive ces styles (en commentaires) ::
            div#colonnedegauche {
                    border:1px dotted yellow;
                    position: absolute;
                    top: 0; left: 0; width:20%;
                    background: silver;
                    margin:0;
                    padding:4px
            }
            
            div#grandframededroite {
                    position:absolute;
                    top: 0; left: 20%;  right: 0; width:79%;
                    margin:0;
                    padding:0
            }
  :: find de la desactivation
*/
div#colonnedegauche {
    border:3px dotted yellow;
    float: left;
    width:18%;
    background: silver;
    margin:0;
    padding:4px
}
div#grandframededroite {
    float:left;
    width:72%;
    margin:0;
    padding:0
}

div#navigation {
    width:99%;
    margin:0;
    padding:4px;
    border:3px dotted #ff88ff;
    font-family:Courier;
    font-weight:bold;
    font-size:110%;
    color:white;
    background: gray
}


div#colonne_a_droite {
    border-top:1px none blue;
    border-left:3px dotted blue;
    width:99%;
    margin:0;
    padding:20px 4px;
    overflow: visible;
    background: #999999
}
div#colonnedegauche ul {
    margin:1px 0 0 5px;
    padding:0
}
div#colonnedegauche li {
    list-style-type: none;
    margin:0;
    padding:0
}

div#colonnedegauche a:link , div#colonnedegauche a:visited {
    text-decoration:none;
    border: none;
    background-color: navy;
    padding:0
}
div#colonnedegauche a:visited {
	background-color: #dcdcdc
}
div#colonnedegauche a:hover { 
    color: navy;
    background-color: yellow
}

#current { 
	color: red;
	background-color: white 
}
a.ltop:link,a.ltop:visited,a.ltop:hover {font-size:70%;font-family:Arial;text-decoration:none;border:none;background:none;color:white}