/* 
    Document   : style
    Created on : 29 janv. 2014, 12:07:32
    Author     : stricher
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
body{
    background:url('../img/font.jpg') no-repeat center fixed;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover;
    font-family: 'Nunito', sans-serif;
    color:whitesmoke;
    overflow: hidden;
}
#titre{
    font-weight: bold;
    font-size: 3em;
    color:white;
    text-align:left;
    margin-left:3%;
}
#vie{
    font-size: 2em;
    margin-left:30%;
}
#choix0,#choix1{
    height:50%;
    width:25%;
    position:relative;
    float:left;
    text-align:center;
    font-weight:bold;
    font-size:1.5em;
    margin-top:1%;
}
#choix0 p,#choix1 p{
    margin-top:70%;
    color:white;
    text-shadow:
        #000000 1px 1px 1px,
        #000000 -1px 1px 1px,
        #000000 -1px -1px 1px,
        #000000 1px -1px 1px;
    text-decoration:none;
}
#wrapp {
    background-color:rgba(255,255,255,0.3);
    position:absolute;
    top:15%; right:5%;
    width:90%;
    height:80%;
    border-top-left-radius: 10%;
    z-index: -100;
    box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.60);
    -moz-box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.6);
}
#nom{
    font-family:"Calibri";
    font-size:5em;
    color:gold;
    text-align:center;
    font-weight:bold;
    margin-top:25%;
}
#choix0{
    background-image: url(../img/poke.png);
    background-size:cover;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
}
#choix1{
    background-image: url(../img/digi.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
}
#ecran{
    position:relative;
    float:left;
    height:50%;
    width:50%;
    margin-top:1%;
}
#score{
    font-weight:bold;
    color:red;
}
#message{
    margin-top:45%;
}
ul li{
    list-style-type : none;
    margin-top:15%;
    margin-left:5%;
}
#nav{width:100%; height:100%;}

#commandes{
    float:left;
    width:15%;
    position:relative;
    margin-left:0;
    margin-top:10%;
    padding-left:2%;
    z-index:50;
}
#legende{
    margin-top:-3%;
    margin-left:4%;
}
.grand{
    font-size: 5em;
}
.grand:hover{
    color: gray;
    cursor: pointer;
}
#fermer{
    color:azure;
    position:absolute;
    top:3%;
    right:5%;
    text-decoration:none;
    font-size:0.7em;
    z-index:200;
}
.content{
    width:100%;
    height:100%;
    z-index: -75;
    overflow:auto
}
.vign{
    width:320px;
    height:180px;
    border: solid 1px black;
    margin-top: 5%;
    margin-left:3%;
    margin-bottom:5%;
    position:relative;
    float:left;
    opacity:0.5;
}
.vign:hover{
    opacity:1;
}
figure{
    margin:0;
    color:black;
    text-align:center;
}
#player{
    position:fixed;
    float:left;
    margin-left:20%;
    margin-top:10%;
    height:40%;
    width:50%;
    opacity:0;
    box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.60);
    -moz-box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0px 8px 10px 4px rgba(255, 255, 255, 0.6);
}
#contenu{width:95%;height:100%}
#popup{
    position:absolute;
    top:0;left:0;
    opacity:0;
    background-color:black;
    height:100%;
    width:100%;
    z-index:-150;
}
#lecteur{
    width:100%;
    height:100%;
}