/* CSS Document */
/* -------------------------------------------------------------------

NAVIGATION HORIZONTALE

------------------------------------------------------------------- */
 
/* Paramètres généraux de la liste (ul). Toujours mes marges à zéro,
* le padding (marge intérieure) servira à dégager le texte en haut et en
* bas de 5 pixels tout en le décollant également de 1em du bord droit
* ce dernier point est indispensable pour Internet Explorer, comme on
* le verra pour ul#nav-box li a { }.
* list-style-type : none; déclare que je ne place pas de puces devant
* chaque item.
*/

ul#nav-box {
margin :0 0 /*1.5em*/;  /*le 1.5em sert à agrandir la cel de la barre et à laisser sous la barre une dimension de 1.5 celle de la barre*/
padding : 5px 1em 5px 0;
list-style-type : none;
background-color: #c77909;/*COULEUR DU FOND DE LA BARRE*/
color: #FFFFFF;/*cette couleur ne sert à rien ???*/
font-weight : bold;
font-size : 0.9em;
text-align: center;
}

/* Paramètres des items. display : inline; donne comme instruction de ne
* pas faire de saut de ligne pour chaque item. Je redonne également une
* marge intérieure haute et basse de 5 pixels pour que les items occupent
* toute la place verticale créée pour la liste
*/
ul#nav-box li {
display: inline;
padding : 5px 0;
}

/* On retrouve le padding haut et bas de 5 pixels (car sinon Internet Explorer
* va n'en faire qu'à sa tête) et j'ajoute un espace latéral de 1em de chaque
* côté des liens. J'indique également la couleur des caractères des liens et je
* place un bord gauche continu et blanc de 1 pixel de large. text-decoration :
* none; indique que je ne veux pas que les liens soient soulignés (ce qui serait
* le cas par défaut.
*/
ul#nav-box li a {
padding : 5px 1em 5px 1em;
color: #FFFFFF;/*COULEUR DES CARACTERES */
text-decoration: none;
border-left: 1px solid #fff;
}

/* Ici, ce qui se passe au survol des liens : changement de la couleur du fond,
* de la couleur des caractères, je n'oublie pas de remettre à ce lien survolé le
* bord gauche que j'ai défini pour les liens « au repos ».
*/
ul#nav-box li a:hover {
background-color: #4b4b69;
color: #d9d940;
border-left: 1px solid #fff;
}