body
{
    margin: 0 0;
    overflow: hidden;
    background: rgb(216,224,222); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(216,224,222,1) 0%, rgba(174,191,188,1) 22%, rgba(153,175,171,1) 33%, rgba(142,166,162,1) 50%, rgba(130,157,152,1) 67%, rgba(78,92,90,1) 82%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(216,224,222,1)), color-stop(22%,rgba(174,191,188,1)), color-stop(33%,rgba(153,175,171,1)), color-stop(50%,rgba(142,166,162,1)), color-stop(67%,rgba(130,157,152,1)), color-stop(82%,rgba(78,92,90,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
canvas
{
    width: 1280px;
    height: 720px;
    border: 1px solid black;
    background:url(../medias/images/Titrebis.png);
}
#HUD
{
    position: absolute;
    top: 0px;
    font-family: 'neuropol';
}
#play
{
    position: absolute;
    top: 400px;
    left: 570px;
}
#loading
{
    position: absolute;
    display: none;
    top: 380px;
    left: 530px;
    color: black;
}
#credit
{
    position: absolute;
    top: 500px;
    left: 540px;
}

#logo
{
    position: absolute;
    font-size: 124px;
    top: 100px;
}
.button
{
    font-size: 48px;
}
.button:hover
{
    color : #666699;
}
#male 
{
    position: absolute;
    display: none;
    background: url(../medias/images/mal.png);
    top: 380px;
    left: 400px;
    width: 191px;
    height: 191px;
}
#male:hover
{

}
#female
{
    position: absolute;
    display: none;;
    background: url(../medias/images/fem.png);
    top: 380px;
    left: 660px;
    width: 191px;
    height: 191px;
}
#female:hover
{
    
}
#return
{
    display: none;
    position: absolute;
    color: white;
    top: 650px;
    left: 1050px;
}
#menu
{
    display: none;
    position: absolute;
    top: 600px;
    left: 600px;
}

.credit
{
    position: absolute;
    font-size: 24px;
    width: 800px;
    left: 300px;
}
#GC
{
    position: absolute;
    display: none;
    top: 400px;
}
#GD
{
    position: absolute;
    display: none;
    top: 450px;
}
#GA
{
    position: absolute;
    display: none;
    top: 500px;
}
#DEV
{
    position: absolute;
    display: none;
    top: 550px;
}
#SD
{
    position: absolute;
    display: none;
    top: 600px;
}
#color
{
    position: absolute;
    display: none;
    top: 650px;
}
#global
{
    position: absolute;
    background: url(../medias/images/GGJ14_logo.png);
    top: 30px;
    left: 30px;
    width: 124px;
    height: 124px;
    background-size: 100% 100%;
}