/* gère la barre de menus des pages HTML, classe '.menuDeroulant' et les menus des popUpMenus de saisie, classe '.popUpMenuDeroulant'*/

/* propriétés communes à tous les menus */
#container > nav {
    font-size: 0.8em;
}
.barreMenus{
    padding: 5px 0px 10px 5px; /* top right bottom left */
}
.barreMenus > a > span{
    font-size: 1.05em; /* font des liens */
    font-weight: bold;
}

.menuDeroulant {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuDeroulant a {
    display:block;
    text-decoration:none;
    color: silver;
    text-shadow: 0 0 0;
    height: 1.2em;
    padding: 5px 7px 5px 7px;/* haut | droit | bas | gauche */
}

/* ici le menu est supposé en colonne : sinon il faut ajouter display:inline-block */
.menuDeroulant > li,
.menuDeroulant > li li {
    position: relative;
    list-style: none;
    text-align: left;
}

/* pour tous les enfants li et li / li d'une classe menuDeroulant */
.menuDeroulant > li {
    zoom:1;
}
.menuDeroulant > li li {
    background: transparent none;
    width: 13em;/* fixer la largeur  */
}
.menuDeroulant li:hover > a {color: white;}

/* position du sous menu */
.menuDeroulant ul {
    position: absolute;
    top: 0em;/* position du sous menu par rapport au sur menu */
    left: 7.5em;
    max-height: 0em;
    margin: 0;
    padding: 0;
    background: black;
    overflow:hidden;
    -webkit-transition: 1s max-height 0.3s;
    -moz-transition: 1s max-height 0.3s;
    -ms-transition: 1s max-height 0.3s;
    -o-transition: 1s max-height 0.3s;
    transition: 1s max-height 0.3s;
}
.menuDeroulant ul li:first-child a:after {
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
/* 'pointeur' vers le sur menu */
.menuDeroulant ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}

.menuDeroulant>li:hover ul {
    /* need an adaptation, lower is better, but see it large ;) */
    max-height:15em;
}


/* spécificité des popUpMenusDéroulants */
.popUpMenuDeroulant {
    position: absolute;
}

.popUpMenuDeroulant .menuDeroulant {
    width: 7.5em;/* fixer la largeur (la valeur ressert au positionnement du sous menu) */
    background: dimgray;
    -moz-box-shadow: 5px 5px 10px dimgray;
    -webkit-box-shadow: 5px 5px 10px dimgray;
    box-shadow: 5px 5px 10px dimgray;
}

.popUpMenuDeroulant .menuDeroulant a {
    height: 0.6em;
    font-size: 0.85em;
}

.popUpMenuDeroulant .menuDeroulant ul {
    background: dimgray;
    -moz-box-shadow: 5px 5px 10px dimgray;
    -webkit-box-shadow: 5px 5px 10px dimgray;
    box-shadow: 5px 5px 10px dimgray;
}



/* ****** Gestion des petits écrans ****** */
@media screen and (max-width: 640px) and (orientation:portrait), screen and (max-width: 768px) and (orientation:landscape) {
    .menuDeroulant a {
        display:inline-block;
    }
}


/* ****** spécificités portrait ****** */
@media screen and (max-width: 640px) and (orientation:portrait) {
    .menuDeroulant > li li {
        display:block;
    }
    
    nav a:link
    {
        opacity: 1.0;
    }
    
    .menuDeroulant ul {
        left: 3em;
}

/* ****** spécificités paysage ****** */
@media screen and (max-width: 768px) and (orientation:landscape) {
    .menuDeroulant > li,
    .menuDeroulant > li li {
        display:inline-block;
    }

    nav a:link
    {
        opacity: 1.0;
    }
}