html, body {
    margin: 0px;
    padding: 0px;

}

#conteneur {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: none;
    background-image: url(Images/background.png);

}

#machine {
    position: relative;
    width: 1000px;
    height: 500px;
    margin: auto;
    border: 1px solid black;
    overflow: hidden;
    background-image: url(Images/background_machine.png);
    background-repeat: no-repeat;
    background-position: center center;
}

#block {
    position: absolute;
    top: 25%;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;

}

.blocPierre {
    background-image: url(Images/pierre.png);

}

.blocPierreFusion {
    background-image: url(Images/pierre_fusion.png);
}

.blocMetal{
    background-image: url(Images/blocMetal.png);
}

.blocMetalFusion{
    background-image: url(Images/blocMetalFusion.png);
}

#feuHaut {
    position: absolute;
    background-image: url(Images/feu.png);
    background-repeat: no-repeat;
    top: 15%;
    left: 18%;
    height: 150px;
    width: 150px;
    z-index: 99;

}

#feuBas {
    position: absolute;
    background-image: url(Images/feu.png);
    background-repeat: no-repeat;
    top: 65%;
    left: 60%;
    height: 30%;
    width: 15%;
    z-index: 99;

}

.feuHover {
    background-image: url(Images/feu_hover.png);
    background-repeat: no-repeat;

}

#Presse {
    position: absolute;

}

#tapisRoulant1 {
    position: absolute;
    top: 45%;
    width: 87%;
    height: 5%;
    background: black;
    border-radius: 20px;

}

#tapisRoulant2 {
    position: absolute;
    top: 95%;
    left: 10%;
    width: 90%;
    height: 5%;
    background: black;
    border-radius: 20px;

}

#roue {
    position: absolute;
    top: 0%;
    height: 100%;
    width: 25px;
    background: grey;
    border-radius: 50%;

}

.presseHaut {
    background-image: url(Images/Presse_haut.png);
    background-repeat: no-repeat;
    height: 400px;
    width: 200px;
    top: -30%;
    left: 45%;

}

.presseBas {
    background-image: url(Images/Presse_bas.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 200px;
    top: 50%;
    left: 30%;

}

.roueDroite {
    right: 0px;
}

.roueGauche {
    left: 0px;
}

#panneauControl {
    position: relative;
    text-align: center;
    margin: auto;
    height: 500px;
    width: 1000px;

}

#panneauControl p {
    position: absolute;
    top: 5%;
    left: 41%;
    font-family: Arial;
    font-size: 20px;

}

#bouton_Ouverture_Pc {
    position: absolute;
    top: 7.5%;
    left: 36%;
    width: 40px;
    height: 40px;
    background-image: url(Images/bouton_PC.png);
    background-repeat: no-repeat;

}

#bouton_Ouverture_Pc:hover {
    background-image: url(Images/bouton_Pc_Hover.png);
}

#plaque {
    position: absolute;
    background-image: url(Images/plaque.png);
    background-position: center;
    height: 300px;
    width: 1000px;
    background-repeat: no-repeat;

}

h1 {
    position: absolute;
    top: 15%;
    left: 25%;
    font-family: arial;
    font-size: 20px;
    font-weight: lighter;

}

h2 {
    position: absolute;
    top: 14%;
    left: 45%;
    font-family: arial;
    font-size: 20px;
    font-weight: lighter;

}

h3 {
    position: absolute;
    top: 14%;
    left: 65%;
    font-family: arial;
    font-size: 20px;
    font-weight: lighter;

}

#vitesse {
    position: absolute;
    top: 30%;
    left: 47%;
    width: 40px;
    height: 120px;

}

#V1 {
    background-image: url(Images/boutonVitesse1.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;

}

#V1:hover {
    background-image: url(Images/boutonVitesse1Hover.png);

}

#V2 {
    background-image: url(Images/boutonVitesse2.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;

}

#V2:hover {
    background-image: url(Images/boutonVitesse2Hover.png);

}

#V3 {
    background-image: url(Images/boutonVitesse3.png);
    height: 40px;
    width: 40px;

}

#V3:hover {
    background-image: url(Images/boutonVitesse3Hover.png);

}

#modeles {
    position: absolute;
    top: 37%;
    left: 24.5%;
    width: 82px;
    height: 82px;

}

#modele1 {
    position: absolute;
    background-image: url(Images/boutonStatue1.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;
    float: left;

}

#modele1:hover {
    background-image: url(Images/boutonStatue1Hover.png);
}

#modele2 {
    position: absolute;
    top: 0%;
    left: 50%;
    background-image: url(Images/boutonStatue2.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;

}

#modele2:hover {
    background-image: url(Images/boutonStatue2Hover.png);
}

#modele3 {
    position: absolute;
    top: 50%;
    background-image: url(Images/boutonStatue3.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;

}

#modele3:hover {
    background-image: url(Images/boutonStatue3Hover.png);
}

#modele4 {
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(Images/boutonStatue4.png);
    height: 40px;
    width: 40px;
    margin-bottom: 2px;

}

#modele4:hover {
    background-image: url(Images/boutonStatue4Hover.png);
}

.statue1 {
    background-image: url(Images/statue_1.png);
}

.statue1Fusion {
    background-image: url(Images/statue_1_fusion.png);

}

.statue2 {
    background-image: url(Images/statue_2.png);
}

.statue2Fusion {
    background-image: url(Images/statue_2_fusion.png);

}

.statue3 {
    background-image: url(Images/statue_3.png);
}

.statue3Fusion {
    background-image: url(Images/statue_3_fusion.png);

}

.statue4 {
    background-image: url(Images/statue_4.png);
}

.statue4Fusion {
    background-image: url(Images/statue_4_fusion.png);

}

#matieres {
    position: absolute;
    top: 35%;
    left: 66%;
    width: 50px;
    height: 102px;

}


#matiere1{
    position: absolute;
    top: 0%;
    background-image: url(Images/boutonMetal.jpg);
    width: 50px;
    height: 50px;

}

#matiere1:hover{
    background-image: url(Images/boutonMetalFusion.png);

}

#matiere2{
    position: absolute;
    top: 51%;
    background-image: url(Images/boutonPierre.png);
    width: 50px;
    height: 50px;

}

#matiere2:hover{
    background-image: url(Images/boutonPierreFusion.png);

}












