@media screen and (max-width:800px) {
    @viewport {width:600px;}
    @-ms-viewport {width:600px;} 
    @-webkit-viewport {width:600px;}
    @-moz-viewport {width:600px;}   
}
@media screen and (min-width:801px) {
    @viewport {width:600px;}
    @-ms-viewport {width:600px;} 
    @-webkit-viewport {width:600px;}
    @-moz-viewport {width:600px;}   
}

body {font-family:'Open sans',400;font-size:16px}
a {text-decoration:none}

.txt_blanc {color:#fff}

#page {position:relative;width:90%;margin:auto}

/* INDEX */
#logo_home {width:600px;height:300px;margin:auto;background-image:URL('../graph/logo_home.jpg');background-repeat:no-repeat;background-position:center center;background-size:100%}
#deconnexion {margin:1em auto;background-color:#7d696d;color:#fff;font-weight:800;padding:1em;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,0.1);text-align:center}
#jouer {margin:1em auto;background-color:#f4cd50;color:#fff;font-weight:800;padding:1em;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,0.1);text-align:center}

#retour_carte {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#niveau {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#rubis {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#rubis img {width:15px;}
#credits {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#score {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#roue {float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#chrono {display:none;float:left;background-color:#000;color:#fff;font-weight:800;text-align:right;margin:1em 0.5em;padding:1em}
#clics {text-align:center;font-size:3em;font-weight:800;}
#clics_txt {text-align:center;font-size:1em;font-weight:700;}
.continuer, .poursuivre, .recommencer, .reprendre {margin:1em auto;background-color:#f4cd50;color:#fff;font-weight:800;padding:1em;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,0.1);text-align:center}
#tableau {border-spacing:5px;margin:auto;z-index:0}
.cell {position:relative;width:70px;height:70px;background-color:#f1f1f1;z-index:0;text-align:center;font-size:1.5em;font-weight:800;box-sizing:border-box;background-repeat:no-repeat;background-size:75%;background-position:center center}
.cell_fond_mer {background-color:#0066dd;background-repeat:no-repeat;background-size:75%;background-position:center center;background-image:URL('../graph/mer.jpg')}
.cell_fond_sable {background-color:#f4cd50;background-repeat:no-repeat;background-size:75%;background-position:center center;background-image:URL('../graph/sable.jpg')}
.cell_fond_glace {background-color:#fff;background-repeat:no-repeat;background-size:75%;background-position:center center;background-image:URL('../graph/glace.jpg')}
.cell_gain {display:none;position:absolute;top:0;left:0;width:70px;background-color:#000;color:#fff;text-align:center;z-index:0}
#messages {position:relative;height:3em}
#troptard {position:absolute;width:100%;top:0;left:0;display:none;margin:1em auto;padding:1em;background-color:#7d696d;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;text-align:center}
#epuise {position:absolute;width:100%;top:0;left:0;display:none;margin:1em auto;padding:1em;background-color:#7d696d;color:#fff;font-weight:400;text-align:center}
#renouveler {position:absolute;width:100%;top:0;left:0;display:none;margin:1em auto;padding:1em;background-color:#7d696d;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;text-align:center}
.poursuivre {display:none}
.reprendre {display:none}
#objectif {position:absolute;top:45%;left:0;width:100%;background-color:#7d696d;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;padding:1em;text-align:center;z-index:1}
#objectif_ok {margin:1em auto;background-color:#f4cd50;color:#fff;font-weight:800;padding:1em;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,0.1);text-align:center}
#info {position:absolute;top:45%;left:0;width:100%;background-color:#7d696d;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;padding:1em;text-align:center;z-index:1}
#info_ok {margin:1em auto;background-color:#f4cd50;color:#fff;font-weight:800;padding:1em;cursor:pointer;box-shadow:5px 5px 0 rgba(0,0,0,0.1);text-align:center}
#gagne {position:absolute;width:100%;top:0;left:0;display:none;margin:1em auto;padding:1em;background-color:#f4cd50;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;text-align:center;z-index:1}
#perdu {position:absolute;top:45%;left:0;width:100%;display:none;background-color:#7d696d;box-shadow:5px 5px 0 rgba(0,0,0,0.1);color:#fff;font-weight:800;padding:1em;text-align:center;z-index:1}

/* BOOSTERS */
.booster {position:relative;float:left;width:70px;height:70px;margin:0.5em;background-color:#f4cd50;background-repeat:no-repeat;background-size:75%;background-position:center center;cursor:pointer}
.booster_legende {position:absolute;width:70px;bottom:-20px;left:0;font-size:0.75em;text-align:center}
#booster_canon {background-image:URL('../graph/canon.jpg');}
#booster_perroquet {background-image:URL('../graph/perroquet.jpg');}
#booster_persil {background-image:URL('../graph/persil.jpg');}
#booster_viande {background-image:URL('../graph/viande.jpg');}
#booster_botte {background-image:URL('../graph/botte.jpg');}

/* TABLEAU */
.big {font-size:3em}
.objectif_img {width:150px;height:150px;margin:1em auto}
.objectif_img img {height:100%}

/* PROGRESSION */
.acces {position:relative;float:left;width:50px;height:50px;margin:0.25em;background-color:#7d696d;cursor:pointer;padding:0.5em;color:rgba(255,255,255,0.25);text-align:center;font-weight:800;font-size:1.5em}
.acces_niveau {color:#fff;cursor:pointer;background-color:#f4cd50;}
.acces_mode {position:relative;width:25px;height:25px;overflow:hidden;margin:auto}
.acces_mode img {height:100%;}
.niveau_fond_mer {background-color:#0066dd;background-repeat:no-repeat;background-size:100%;background-position:center center;background-image:URL('../graph/mer.jpg')}
.niveau_fond_sable {background-color:#f4cd50;background-repeat:no-repeat;background-size:100%;background-position:center center;background-image:URL('../graph/sable.jpg')}
.niveau_fond_glace {background-color:#fff;background-repeat:no-repeat;background-size:100%;background-position:center center;background-image:URL('../graph/glace.jpg')}

.clear {clear:both}