html
{
background-color: rgb(21,66,184);
height: 98%;
margin: 1% 0;
padding: 0;
}

body
{
height: 100%;
}

#bloc_page
{

width: 92%;
min-width: 640px;
padding-bottom: 150px;
min-height: 100%;
margin: auto;
padding: 0 5px;
border-radius: 60px 30px 0 0;
position: relative;
background: white url('../image/logo_descend2.jpg') right 600px no-repeat;
}

input[type="submit"]
{
cursor: pointer;
}

h1
{
color: rgb(114,10,10);
}

section
{
margin: 0;
height: 100%;
min-height:600px;
width: 100%;
padding-bottom: 165px;
position: relative;
}

div#index_droite
{

width: 290px;
float: right;
padding: 0;
margin: 0 40px;

}

div#index_mystere
{

border: 2px solid silver;
background-color: rgba(240,240,245,0.8);
text-align: center;
padding: 10px 20px;
overflow:hidden;
}

div#index_mystere img
{
height:159px;
}

div#index_reputation
{
margin-top: 30px;
text-align: center;
border: 2px solid silver;
padding: 10px 20px;
background-color: rgba(240,240,245,0.8);
}

div#index_reputation td
{
padding: 3px 5px;
}

div#index_droite h2
{
text-align:center;
margin:2px;
padding:0;
}

div#index_reputation h2
{
color: blue;
}


div.marge_hauteur
{
height: 40px;
width: 100%;
}

#entrainement
{
margin-left: 35%;
color: green;
font-weight:bold;
}

article#chat
{
background-color: rgba(245,245,248,0.8);
padding: 0;
margin: 5px 40px 20px 40px;
min-width: 270px;
border: 2px solid silver;
position:relative;
overflow: hidden;

clear:both;
}
#chat_scroll
{
overflow-x:hidden;
overflow-y: scroll;
height: 212px;
}

article#chat form
{
position: relative;
padding: 10px 50px;
background-color: rgba(230,230,235,0.8);
border-bottom:2px solid silver;

}
article#chat form input
{
font-size:1.1em;
}

article#chat form input[type="text"]
{
width: 80%;

}

p.chat
{
border-top: 1px dotted rgb(230,230,235);
padding: 6px 15px;
margin: 0;
}

a
{
text-decoration:none;
color: blue;
}

div#choix_theme
{
padding: 0 5%; 
margin:auto;
height: 120px;
border: 2px solid grey;
border-radius: 10px;
overflow: auto;
text-align: center;
background-color: rgba(240,240,245,0.8);
}

a.theme
{
padding:10px;
line-height: 32px;
}

a.theme:hover
{
background-color: rgba(225,225,230,0.8);
}

#enonce
{
position: relative;

height: 210px;
margin: 0 35px;

padding-right: 10px;
border: 2px solid silver;
background-color: #fbfbfb;
font-family: arial;
text-align: center;
}

#alignement
{
display: inline-block;
height: 210px;
width: 1px;

}

#question
{
min-width: 40%;
max-width: 64%;
height: 180px;
padding:0 10px;
margin: auto;
padding-top:30px;
display: inline-block;
text-align: center;
vertical-align:top;
position: relative;
z-index: 3;
}


#question h3
{
font-size:1em;
padding: 5px;
margin:0;
text-decoration: underline;
}

#question h2
{
margin-top: 1em;
font-weight: normal;

font-size: 1.5em;
}

#question h2 mark
{
background-color: rgba(252,252,252,0.7);
}



div#photo
{
padding:0;
margin: auto;
width: 30%;
height: 210px;
display: inline-block;
margin-left:0;

position: relative;
}

#photo img
{
position:absolute;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 20px 0px silver;
left: 0;
right: 0;
top:25px;
height:160px;
z-index: 2;
    transition: all 0.5s;
}

#photo img.question:hover
{
transform: scale(2.5);

}

a.bad
{
display: block;
position: absolute;
padding:6px;
bottom:0;
left:0;
color: white;
cursor: pointer;
background: red url('../image/minicroix.jpg') top right no-repeat;
z-index:5;
}

#bouton_chrono
{
position: absolute;
left: -35px;
top: -35px;
width: 70px;
height: 70px;
font-size: 2em;

color: black;
border-radius: 35px;
border: 1px solid red;
box-shadow: 0px 0px 4px red;
cursor: wait;
}





#reponse_qcm
{
position: relative;
text-align:center;
width: 90%;
margin-right: 1%;

font-size: 1.1em;
}

.bouton_reponse
{
position: relative;
width: 40%; 
height: 100px;
margin: 0 0 4% 3%;
background-color: rgba(240,240,245,0.8);
z-index: 3;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(120,90,240);
box-shadow: 2px 2px 2px grey;
overflow: auto;
}

.bouton_reponse:hover
{
background-color: rgba(230,230,240,0.8);
}

#reponse_cash
{
position: relative;
width: 75%;
text-align:center;
margin:0;
padding:0;
font-size: 1.4em;
}


#resultat
{
display: inline-block;
position: relative;
width:73%;
margin: 20px 0 0 1%;
text-align:center;
vertical-align: top;
font-size: 1.2em;
}

#resultat_droite
{
display: inline-block;
width:24%;
margin: 20px 0 0 1%;
text-align:right;
position: relative;
vertical-align: top;
font-size: 1.1em;
}

input.vote
{
width: 40px; 
height: 40px; 
cursor: pointer;
border-radius: 20px;
border: 1px solid black;
margin:10px 0;
}

input.vote:hover
{
background-color: #fbfbfb;
}

p.détails
{
font-size: 0.8em;
}

p.message
{
color: red;
}


footer
{
height: 150px;
background-color: rgba(222,222,245,0.9);
border-top: 1px solid red;
position: absolute;
bottom: 0;
left: -0.5%;
width: 101%;

}

footer ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

#bas_gauche
{
vertical-align: top;
width: 47%;
display: inline-block;
margin-left:0;
position: absolute;
left:0;
top: 0;
text-align: left;
padding: 1%;

}


#bas_droite
{
vertical-align: top;
width: 47%;
display: inline-block;
text-align: right;
position: absolute;
right:0;
top: 0;
padding: 1%;
}