/* CSS Document */


/************ Catégorie de jeux ******************/

#conteneur {
    position: absolute;
    top: 12%;
    left: 10%;
    width: 80%;
    height: 80%;
    border: 1px solid #1a1a1a;
    overflow-y: scroll;
}


/* DREAM */

.vignette {
    float: left;
    width: 35%;
    height: 200px;
    background-color: white;
    border: 1px solid #1a1a1a;
    margin: 10px 7%;
    transition: 0.3s;
    -webkit-transition: 1s;
}



#categorie-jeux {
    overflow: scroll;
    float: left;
    padding: 10px;
}

#colonne-gauche {
    float: left;
    width: 240px;
    margin: 8px;
    padding-top: 25px;
    display: none;
}

#colonne-gauche img {
    height: 150px;
}

ol {
    margin: 20px;
    list-style: decimal;
}


/****************** JEU À OLIVIER *********************/


/* étape 0 rien */


/* étape 1 */

#jeu-oc {
    position: relative;
    margin: auto;
    width: 90%;
    margin-top: 15px;
    padding: 10px;
    text-align: center;
}

#zone-img-jeu-oc {
    list-style-type: none;
}

#zone-img-jeu-oc img {
    height: 200px;
}

#zone-img-jeu-oc li {
    display: inline;
}

#jeu-oc img {
    margin: 2px;
}

#paires-trouvees-oc {
    width: 245px;
    margin-top: 10px;
    border: 1px solid #dab69c;
}

#paires-trouvees-oc h2,
#paires-trouvees-oc p {
    text-align: center;
}

#paires-trouvees-oc img {
    margin: 5px;
}

#stats-oc {
    margin: 20px auto;
    padding: 10px;
    width: 225px;
    text-align: center;
    border: 1px solid #dab69c;
    color: #fff;
}

#message-oc {
    text-align: center;
    font-weight: bold;
    color: #fff;
}


/* code pour changer le curseur */

#btnDebuter {
    cursor: pointer;
}


/************ Colonne droite ******************/

#col-droite {
    margin-left: 262px;
    padding: 10px;
}


/************ Pied de page ******************/

#pied-page {
    position: relative;
    background: url(../images/pied_page.jpg) no-repeat;
    padding: 25px;
}

#pied-page p {
    margin: 0;
    color: #F8EBF7;
    text-align: center;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu-pied-page {
    text-align: center;
}

#menu-pied-page li {
    display: inline;
    padding-left: 40px;
    padding-right: 40px;
}

#menu-pied-page a {
    font-size: 110%;
    font-weight: bold;
    color: #E3C4E5;
    line-height: 40px;
    /* centrer verticalement */
    text-decoration: none;
    outline: none;
}

#menu-pied-page a:hover {
    text-decoration: underline;
    color: #AC66BF;
}


/************ les classes ******************/

.clearHR {
    margin: 0;
    clear: both;
    visibility: hidden;
}

.centre {
    text-align: center;
}

.galerie-images img {
    border: 1px solid #000000;
    padding: 2px;
    /* Espace bordure */
    margin: 0 3px;
    /* Espace entre image */
}