/* ------------------------------------------
 Feuille de style pour la barre supérieure de l'appli Web  Histoire
 --------------------------------------------*/

/*------------------------------- barre menu ----------------------------------------*/
#barreSup {
    /*background:#413447;*/
    background:url(./images/bande_bleue_top.png);
    background-repeat: repeat-x;
    margin-left:605px;
    height:78px;
    /*width:100%;*/
}
#titreGauche {
    position:absolute;
    background:url(./images/barre_titre2.png);
    width:605px;
    height:114px;
    top:0px;
    left:0px;
    cursor:pointer;
}
#barreDroite {
    position:absolute;
    background:url(./images/barre_droite2.png);
    width:40px;
    height:62px;
    top:0px;
    right:0px;
}
#titreBarre {
    position:absolute;
    background:url(./images/titre_page.png);
    top:14px;
    left:5px;
    width:772px;
    height:36px;
}
#ombreBarre {
    height:15px;
    width:100%;
    background:url(./images/ombre_basse.png);
    background-repeat: repeat-x;
}
#fondLycee {
    position:fixed;
    background:url(./images/lycee_bas_droite.png);
    background-attachment: scroll;
    background-size:100%;
    width:408px; /*583px;*/
    height:325px; /*465px;*/
    top:calc(100vh - 325px);
    left:calc(100vw - 408px);
    z-index:-1;
}
#fondPlaques {
    position:absolute;
    background:url(./images/plaque_haut_gauche.png);
    background-size:100%;
    width:218px; /*312px;*/
    height:507px; /*725px;*/
    left:0px;
    top:10px;
    z-index:-1;
}
#barreDuHaut {
    position:absolute;
    height:78px;
    width:100%;
    top:0px;
    left:0px;
    z-index:20;
    color:#fff;
}
#barreDuHaut a {
    text-decoration: none;
    color:#fff;
}

/*------- menu connexion / utilisateur / déconnexion --------*/
#menuGauche {
    /* display:inline; */
    float:left;
    margin-left: 10px;
}

#menuDroit {
    position:absolute;
    right:0px;
    margin-right: 10px;
    top:16px;
    font-size:1.1em;
    /*background:#777;*/
}

/*#titreM {
    font-weight: bold;
    font-style:italic;
    margin-right: 100px;
    color:#fb0;
}*/

.menuSel {
    /* background:#444; */
    padding:2px 12px 4px 12px;
    background-image:linear-gradient(to bottom, #89A, #444); /*#39c, #27a);*/
    /* border-radius: 8px; */
}
.elemMenu {
    padding:2px 12px 4px 12px;
}

.elemMenu:hover {
    background-color:#444;
}

#idUser {
    float:left;
    padding:2px 5px 0px 15px;
}

#icoUser {
    float:left;
    background:url(./images/glyphicons-white.png) no-repeat -117px -1px;
    /*background-color: #aaa;*/
    background-size:370px; /* soit 80% de 463px;*/
    width:19px;
    height:19px;
    /*padding:0px 0px 0px 14px;   */
    margin:5px 0 0 0;
    /*vertical-align: -2px;*/
}

#deCnx {
    /*float:left;*/
    background:url(./images/glyphicons-white.png) no-repeat -117px -231px;
    background-size:370px;
    /*background-color: #aaa;*/
    width:18px;
    height:19px;
    /*padding:0px 0px 0px 14px;    */
    /*vertical-align: -3px;*/
    margin:0px 0 0 0px;
}
#contDeCnx {
    float:left;
    /*width:25px;*/
    padding:5px 5px 5px 5px ;
    margin:0 0px 0 0;
    cursor: pointer;
}
#contDeCnx:hover {
    background-color:#06a;
}

.barreSep {
    float:left;
    color:#bce;
    /*padding: 0 5px 0 5px;*/
    margin:0 10px 0 10px;
    font-size:1.1em;
}
#btnCnx {
    float:left;
    cursor:pointer;
    font-style:italic;
    font-size:1.1em;
    margin:0 30px 0 0;
    height:30px;
}
#contourBtnCnx {
    position:absolute;
    top:-4px;
    left:-20px;
    display:block;
}
#contourBtnCnxSurvol {
    position:absolute;
    top:-4px;
    left:-22px;
    display:none;
}