/*
  Pour vider le cache, remplacer les v=8 par v=9, etc...
  Modifier egalement le fichier index.html pour modifier le <link href="css/style.css?v=8

*/
html, body {
     margin:0; /* remove default margin */
     padding:0; /* remove default padding */
     width:100%; /* take full browser width */
     height:100%; /* take full browser height*/
}

@font-face {
    font-family: AnimeAce20BB;
    src: url(fonts/animeace2bb_tt/animeace2_reg.ttf);
}
@font-face {
    font-family: AnimeAce20BB;
    src: url(fonts/animeace2bb_tt/animeace2_bld.ttf);
    font-weight: bold;
}
@font-face {
    font-family: AnimeAce20BB;
    src: url(fonts/animeace2bb_tt/animeace2_ital.ttf);
    font-size: italic;
}

#load{
    text-align:center;
    position:absolute;
    width:100%;
    top:200px;
}

.hidden {
    visibility:hidden;
}
.hiddenForAnimation{
    display:none;
    visibility:hidden;
}
.clickable{
  cursor:pointer;
}
#sound{
    position:absolute;
    right:10px;
    top:5px;
    z-index:1000;
}
#sound img{
    cursor:pointer;
    height:30px;
}
#commands{
    position:absolute;
    right:40px;
    top:5px;
    z-index:1000;
}
#commands img{
    cursor:pointer;
    width:30px;
    height:30px;
}
#langs{
    position:absolute;
    left:10px;
    top:5px;
    z-index:1000;
}
#langs img{
    cursor:pointer;
    width:30px;
    height:30px;
    border:1px solid white;
}
#langs img.active{
    border : 1px solid red;
}
#slider-container{
    position:absolute;
    height: 50px;
    left: 100px;
    max-width: 1000px;
    z-index: 1000;
}
#splash_logo {
    width: 684px;
    height: 331px;
    background: url(../images/logo.jpg?v=8) no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin-top:200px;
}
#splash_presente{
    text-align:center;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    font-size:30px;
    transform: scale(0.1);
}
#splash_titre{
    text-align:center;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    font-size:50px;
    transform: scale(0.1);
}
#splash_sous_titre{
    text-align:center;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    font-size:30px;
    transform: scale(0.1);
}
#a-suivre{
    font-size:60px;
    width:100%;
    text-align:center;
    top: 230px;
    position:absolute;
    z-index:1002;
}
#a-suivre .texte-2{
    font-size:50px;
}
#voir-animation-anesthesie,
#voir-animation-coloscopie{
    font-size:50px;
    position : absolute;
    top : 320px;
    width:100%;
    text-align:center;
  
}
#header{
            max-width:1200px;
            height:40px;
            margin-left: auto;
            margin-right: auto;
            background-color:#FFFFFF;
            position:relative;
            overflow:hidden;
            font-family: "AnimeAce20BB", Helvetica, Arial, sans-serif;
        } 
#content{
            max-width:1200px;
            height:823px;
            margin-left: auto;
            margin-right: auto;
            background-color:#FFFFFF;
            position:relative;
            overflow:hidden;
            font-family: "AnimeAce20BB", Helvetica, Arial, sans-serif;
        }
       #fond {
            position: absolute;
            width: 613px;
            height: 397px;
            top:237px;
            left:-333px;
        }
        .en #fond {
            background: url(../images/salle-1-fond-en.png?v=8) no-repeat;
        }
        .fr #fond {
            background: url(../images/salle-1-fond.png?v=8) no-repeat;
        }
        #bloc-operatoire{
            width:1200px;
            height:823px;
            background: url(../images/bloc-operatoire.png?v=8) no-repeat; 
            position:absolute;   
        }
        #haut {
            position: absolute;
            width: 1200px;
            height: 237px;
            background: url(../images/salle-1-haut.png?v=8) no-repeat;
            top:-280px;
            left:0px;
        }
        #bas {
            position: absolute;
            width: 1200px;
            height: 191px;
            background: url(../images/salle-1-bas.png?v=8) no-repeat;
            bottom:-280px;
            left:0px;
        }
        #gauche {
            position: absolute;
            width: 347px;
            height: 823px;
            background: url(../images/salle-1-gauche.png?v=8) no-repeat;
            top:0px;
            left:-350px
        }
        #droite {
            position: absolute;
            width: 242px;
            height: 823px;
            background: url(../images/salle-1-droite.png?v=8) no-repeat;
            top:0px;
            right:-380px;
        }
        
        /* bulles */
        .bulle-1{   
            position: absolute;
            width: 378px;
            height: 160px;
            background:rgba(0, 0, 0, 0) url("../images/globales/bulle-1.png?v=8") no-repeat;
            
        } 
        .bulle-1 .texte{
          margin-left: 40px;
            margin-right: 56px;
            margin-top: 43px;
            position: absolute;
            text-align:center;
        }
        .bulle-2{   
            position: absolute;
            width: 378px;
            height: 160px;
            background:rgba(0, 0, 0, 0) url("../images/globales/bulle-2.png?v=8") no-repeat;
            
        } 
        .bulle-2 .texte{
            margin-left: 57px;
            margin-right: 36px;
            margin-top: 43px;
            position: absolute;
            text-align: center;
        } 
         .bulle-3{   
            position: absolute;
            width: 378px;
            height: 323px;
            background:rgba(0, 0, 0, 0) url("../images/globales/bulle-3.png?v=8") no-repeat;
            
        } 
        .bulle-3 .texte{
             height: 74px;
            margin-left: 36px;
            margin-right: 36px;
            margin-top: 62px;
            position: absolute;
            text-align: center;
        }    
        .bulle-4{   
            position: absolute;
            width: 300px;
            height: 291px;
            background:rgba(0, 0, 0, 0) url("../images/globales/bulle-4.png?v=8") no-repeat;
            
        } 
        .bulle-4 .texte{
            height: 74px;
            margin-left: 25px;
            margin-right: 21px;
            margin-top: 52px;
            position: absolute;
            text-align: center;
        }   
        
        #medecin-1 {
            position: absolute;
            width: 213px;
            height: 400px;
            background: url(../images/salle-1-medecin-1.png?v=8) no-repeat;
            top: 393px;
            left: -179px;
        }
        #bulle-medecin-1 {
            left: 588px;
            top: 320px;
            
        }
        
        
        
        
        #medecin-2 {
            position: absolute;
            width: 240px;
            height: 350px;
            background: url(../images/salle-1-medecin-2.png?v=8) no-repeat;
            top: 443px;
            right: -236px;
        }
        #bulle-medecin-2 {
            top: 314px;
            left: 390px;
            
        }
        #bulle-2-medecin-2 {
            top: 144px;
            left: 735px;
        }
        #bulle-3-medecin-2 {
            top: 144px;
            left: 505px;
        }
        #bulle-3-medecin-2 .texte {
             margin-left: 46px;
             margin-top: 75px;
        }
        .en #bulle-2-medecin-2 .texte{
            margin-top:45px;
        } 
        #patients {
            position: absolute;
            width: 262px;
            height: 350px;
            background: url(../images/salle-1-patients.png?v=8) no-repeat;
            top: 442px;
            left: -268px;
        }
        
        #bulle-medecin-2 .texte-medecin-1{
            position: absolute;
            margin-left: 45px;
            margin-right: 15px;
            margin-top: 56px;
        }
        #fond-gris-current-timeline,
        #fond-gris-autre-timeline,
        #fond-gris-autre-timeline-header{
            background-color: #FFFFFF;
            height: 100%;
            opacity: 0.9;
            position: absolute;
            width: 100%;
            z-index:1001;
        }
        .devant-fond-gris-current{
          z-index: 1002;
        }
        .choix{
            
            position: absolute;
            background-color: white;
            border: 2px solid red;
            border-radius: 160px;
            height: 281px;
            width: 294px;
            z-index:1003;
        }
        .choix-lueur{
            background-color: red;
            border-radius: 160px;
            height: 294px;
            opacity: 0.5;
            position: absolute;
            width: 308px;
            z-index:1002;
        }
        #choix-1 {
            left: 210px;
            top: 234px;
        }
        #choix-1-lueur{
            left: 205px;
            top: 230px;
        }
        #choix-1 .texte-1{
            font-size: 27px;
            margin-left: 3px;
            margin-right: 9px;
            margin-top: 73px;
            position: absolute;
            text-align: center;
            width: 290px;
        }
        .fr  #choix-1 .texte-1{
            margin-top:62px;
        }
        #choix-2 {
            left: 732px;
            top: 234px;
        }
        #choix-2-lueur{
            left: 727px;
            top: 230px;
        }
        #choix-2 .texte-1{
            font-size: 27px;
            margin-left: 6px;
            margin-right: 9px;
            margin-top: 73px;
            position: absolute;
            text-align: center;
            width:290px;
        }
        .fr  #choix-2 .texte-1{
            margin-top:62px;
        }
        /*Dernier choix, à la fin*/
        #choix-dernier {
            left: 450px;
            top: 254px;
        }
        #choix-dernier-lueur{
            left: 445px;
            top: 250px;
        }
        #choix-dernier .texte-coloscopie{
            font-size: 27px;
            margin-left: 3px;
            margin-right: 9px;
            margin-top: 73px;
            position: absolute;
            text-align: center;
            width: 290px;
        }
        .fr  #choix-dernier .texte-coloscopie{
            margin-top:62px;
        }
        #choix-dernier .texte-anesthesie{
            font-size: 27px;
            margin-left: 3px;
            margin-right: 9px;
            margin-top: 73px;
            position: absolute;
            text-align: center;
            width: 290px;
        }
        .fr  #choix-dernier .texte-anesthesie{
            margin-top:62px;
        }
        #bulle-coloscopie-1{
            left: 331px;
            top: 141px;
        }
        #bulle-coloscopie-1 .texte{
            margin-top:81px;
        }
        #bulle-anesthesie-1{
            left: 331px;
            top: 141px;
        }
        #bulle-anesthesie-1 .texte{
            margin-top:81px;
        }
        #appareil-coloscopie-1{
            background:rgba(0, 0, 0, 0) url("../images/appareil-coloscopie-1.png?v=8") no-repeat;
        }
        #appareil-coloscopie-2{
            background:rgba(0, 0, 0, 0) url("../images/appareil-coloscopie-2.png?v=8") no-repeat;
        }
        #appareil-coloscopie-3{
            background:rgba(0, 0, 0, 0) url("../images/appareil-coloscopie-3.png?v=8") no-repeat;
        }
        #appareil-coloscopie-4{
            background:rgba(0, 0, 0, 0) url("../images/appareil-coloscopie-4.png?v=8") no-repeat;
        }
        #appareil-coloscopie-4 .texte{
            position:absolute;
            font-size:27px;
            line-height:27px;
            font-family:'Arial';
            text-transform:uppercase;
        }
        #appareil-coloscopie-4 .ecran{
            font-style:italic;
            left: 388px;
            top: 20px;
        }
        #appareil-coloscopie-4 .colon{
            left: 867px;
            top: 15px;
        }
        #appareil-coloscopie-4 .muqueuse{
            left: 369px;
            text-align: right;
            top: 161px;
        }
        #appareil-coloscopie-4 .rectum{
            left: 694px;
            top: 226px;
        }
        #appareil-coloscopie-4 .anus{
            left: 887px;
            top: 392px;
        }
        #appareil-coloscopie-4 .optique{
            left: 836px;
            top: 520px;
        }
        #appareil-coloscopie-4 .tube{
            left: 634px;
            top: 585px;
        }
        #appareil-coloscopie-4 .manette{
            left: 355px;
            text-align: center;
            top: 627px;
        }
        #appareil-coloscopie-5{
            background:rgba(0, 0, 0, 0) url("../images/appareil-coloscopie-5.png?v=8") no-repeat;
        }
        
        .appareil-coloscopie{
            position:absolute;
            width:989px;
            height:800px;
            left: 80px;
            top: 0px;
            
        }
        #colon{
            position:absolute;
            background:rgba(0, 0, 0, 0) url("../images/colon.gif?v=8") no-repeat;
            width:804px;
            height:800px;
            top:0px;
            left:270px;
        }
        #colon .texte-1{
            background-color: #fce700;
            border: 3px solid black;
            font-size: 22px;
            left: 31px;
            padding: 15px 0;
            position: absolute;
            text-align: center;
            top: 33px;
            width: 713px;
            
        }
        #colon .texte{
            position:absolute;
            font-size:24px;
            font-family:'Arial';
            text-transform:uppercase;
        }
        #colon .muqueuse{
            left: 21px;
            top: 358px;
        }
        .en #colon .muqueuse{
            left:61px;
        }
        #colon .anus{
            left: 142px;
            top: 693px;
        }
        #colon .coloscope{
            left: 604px;
            top: 611px;
        }
        #coloscopie-1{
            background: rgba(0, 0, 0, 0) url("../images/coloscopie-1.png?v=8") no-repeat scroll 0 0;
            height: 1200px;
            left: -90px;
            position: absolute;
            top: 20px;
            width: 1512px;
        }
        #coloscopie-2{
            background: rgba(0, 0, 0, 0) url("../images/coloscopie-2.png?v=8") no-repeat scroll 0 0;
            height: 1200px;
            left: -90px;
            position: absolute;
            top: 20px;
            width: 1512px;
        }
        #bulle-coloscopie-2{
            left: 231px;
            top: 114px;
        }
        #bulle-coloscopie-2 .texte{
            margin-top:78px;
        }
        #bulle-coloscopie-3{
            left: 261px;
            top: 24px;
        }
        #bulle-coloscopie-3 .texte{
            margin-top:33px;
            margin-left: 48px;
        }
        
        #anesthesie-1{
            background: rgba(0, 0, 0, 0) url("../images/anesthesie-1.png?v=8") no-repeat scroll 0 0;
            height: 400px;
            left: 520px;
            position: absolute;
            top: 370px;
            width: 246px;
        }
        #bulle-anesthesie-2{
            left: 711px;
            top: 254px;
        }
        #anesthesie-2{
            background: rgba(0, 0, 0, 0) url("../images/anesthesie-2.png?v=8") no-repeat scroll 0 0;
            height: 400px;
            left: 520px;
            position: absolute;
            top: 370px;
            width: 145px;
        }
        #bulle-anesthesie-3{
            left: 580px;
            top: 290px;
        }
        #bulle-anesthesie-3 .texte{
            margin-top: 26px;
        }
        .en #bulle-anesthesie-3 .texte{
            margin-top: 36px;
        }