/*  #536878 bleu foncé
    #CCD0D8 bleu clair
    #E6F0D0 blanc cassé
    #C2EC6E vert clair
    #78A547 vert foncé
*/

/* Conteneur Menu */
#menuHorizontal {
    margin: 0 auto;
    width: 53em;
}

/* Liste */
#menu, #menu ul {
    padding: 0; /* pas de marge intérieure */
    margin: 0; /* ni extérieure */
    list-style: none; /* on supprime le style par défaut de la liste */
    line-height: 2.2em; /* on définit une hauteur pour chaque élément */
    text-align: center; /* on centre le texte qui se trouve dans la liste */
}

/* Ensemble du menu */
#menu {
    /*font-weight: bold;  on met le texte en gras */
    /*font-family: Arial;  on utilise Arial, c'est plus beau ^^ */
    /*font-size: 12px;  hauteur du texte : 12 pixels */
}

/* Contenu des listes */
#menu a {
    display: block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding: 0; /* aucune marge intérieure */
    background: #284E00; /* couleur de fond */
    color: #DDD; /* couleur du texte */
    text-decoration: none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width: 7.32em; /* largeur */
	
}

/* Lorsque la souris passe sur un des liens */
#menu a:hover {
    color: #000; /* On passe le texte en noir... */
    background: #769C17; /* ... et au contraire, le fond en blanc */
}

/* Elements des listes */
#menu li {
    float: left;
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right: 0.05em solid #DDD; /* on met une bordure #CCD0D8 à droite de chaque élément */
}

#menu li span {
    font-size:0.8em;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Sous-sous-listes lorsque la souris passe sur un élément de liste */
#menu li:hover ul ul, #menu li.sfhover ul ul {
    left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
    left: auto; /* Repositionnement normal */
    min-height: 0; /* Corrige un bug sous IE */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li {
    border-right: 0.05em solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

/* Sous-listes */
#menu li ul {
    position: absolute; /* Position absolue */
    width: 7.32em; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
}

/* Éléments de sous-listes */
#menu li ul li {
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-top: 0.05em solid #DDD; /* on met une bordure #CCD0D8 en haut de chaque élément d'une sous liste */
}

#menu li ul li span {
    font-size:0.8em;
    font-weight: normal;
    letter-spacing: normal;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li {
    border-top: 0.05em solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul {
    margin: -2.3em 0 0 7.37em; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left: 0.05em solid #DDD; /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul {
    border-left: 0.05em solid transparent; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu li ul li ul li {
    margin: 0 0 0 -0.1em; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left: 0.05em solid transparent; /* Petite bordure à gauche pour ne pas coller ... */
}