.vignette {
    display : block;
    *border : 1px solid black;
    max-width : 100%;
    max-height : 100%;
    margin : auto;
}

#selectionImages {
    width: 100%;    
}


/**** CSS pour l'affichage des photos en grand ****/


#layoutEcran {
    display : none;
    position : fixed;
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    background-color: rgba(10,10,10,0.7);
    z-index : 1;
}


#bigPicture {
    position: fixed;
    top : 0;
    left : 0;
    z-index: 4;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:none;
    user-select:none;
    -o-user-select:none;
}

#layoutPreviousPic {
    position : fixed;
    z-index: 5;
    left : 0;
    top : 0;
    width : 100px;
    height : 100%;
    background-color : rgba(0, 0, 0, 0);
}

#layoutNextPic {
    position : fixed;
    z-index: 5;
    right : 0;
    top : 0;
    width : 100px;
    height : 100%;
    background-color : rgba(0, 0, 0, 0);
}

#closePicture {
    position : fixed;
    z-index : 6;
    top : 0;
    right : 0;
    width : 100px;
    height : 100px;
    background-color : rgba(0, 0, 0, 0);
}

#boutonPrecedent {
    margin-top : 350%;
    width : 100%;
    height : auto;
}

#boutonSuivant {
    margin-top : 350%;
    width : 100%;
    height : auto;
}

#boutonFermer {
    width : 100%;
    height : auto;
}

#layoutItems {
    position : relative;
    width : 100%;
    height : 100%;
    z-index : 3
}

#layoutNothing {
    position : relative;
    width : 100%;
    height : 100%;
    z-index: 2
}


#main {
    float : none;
    width : 100%;
}
#content {
    float : none;
    width : 100%;
}
.article {
    float : none;
    position : relative;
    width : 100%;
    padding : 0;
}


.photos_sections {
    float : left;
    width : 25%;
    margin-left : 7%;
}

#liste_pages_wrapper {
    display : inline-block;
    width : 100%;
    margin-bottom : 2%;
}

#liste_pages {
    display : block;
    text-align : center;
    text-decoration : none;
    font-size : 0.5em;
}
#liste_pages a {
    text-decoration : none;
}
.numPage {
    color : black;
}
.numPage:hover {
    color : red;
}
#currentPage {
    color : red;
}
#currentPage:hover {
}
.nextprev {
    color : black;
}
.nextprev:hover {
    color : red;
}

#liste_albums {
    display:block;
    margin : auto;
    float : left;
    width : 15%;
}

#photoList {
    *margin-left : 15%;
    padding-left : 2%;
    *border-left : 1px solid black;
}

.imgthumbnails {
    display : inline-block;
    width : 20%;
    height : 200px;
    margin-left : 3%;
    margin-bottom : 1%;
}


/*****
 * CSS pour gérer les sections dans photos.php
 ****/

/** photos collés au bord gauche **/

#section_container {
}


.section_box {
    position : relative;
    display : inline-block;

    width : 30%;
    height : 300px;

    margin-left : 2%;
    margin-bottom : 2em;

    border : 1px solid black;
    color: black;
}
.section_box a {
outline:none;
}
.section_box:hover {
    color : red;
}

.image_box {
    width : 95%;
    margin-left : 2.5%;
    height : 85%;

}

.image_box img {
    max-width : 100%;
    max-height : 100%;

}


.text_box {
    display : block;
    position : relative;
    width : 100%;
    height : 10%;

    text-align : center;
    text-decoration : underline;
    font-weight : bold;

}


@media screen and (min-width: 768px) and (max-width: 1400px) {
    #img_ntj {
        margin-left: 2%;
    }

    #img_club {
        margin-left: 0%;
    }
}


@media screen and (min-width: 1401px) and (max-width: 1800px) {
    .section_box {
        height : 350px;
    }
    .image_box img {
        margin-left : 5%;
    }
    #img_ntj {
        margin-left: 15%;
    }
    #img_club {
        margin-left : 3%;
    }
}


@media screen and (min-width: 1801px) and (max-width: 2000px) {
    .section_box {
       height : 450px;
    }
    .image_box img {
        margin-left : 3%;
    }
    #img_ntj {
        margin-left : 10%;
    }
    #img_club {
        margin-left : 0%;
    }
}

@media screen and (min-width: 2001px) and (max-width: 4000px) {
    .section_box {
       height : 650px;
    }
    .image_box img {
        margin-left : 2%;
    }
    #img_ntj {
        margin-left : 16%;
    }
    #img_club {
        margin-left : 8%;
    }
}





/** css pour les liste d'albums **/


.saison_box {
    position : relative;
    vertical-align:top;
    display : inline-block;
    width : 45%;
    margin-left : 2%;
    text-align : center;
}
.saison_box h3 {
    text-decoration : underline;
    text-align : center;
}
.saison_box a{
    color : black;
    text-decoration : none;
    font-size : 0.9em;
}
.saison_box a:hover {
    color : red;
}



#loading_icon {
    position : fixed;
    display : none;
    z-index : 7;
    width : 10%;
    margin-left: 45%;
    background-color : rgba(0,0,0,0.2);
}