/* Le css générique*/

html{ width:800px;
     height:600px;
	 background:#fff;
	 overflow : hidden;
}

body{
width:800px;
height:auto;
margin: 0 auto;
background: #fff;
overflow : hidden;
}

/*----------------------------------Panneau 1-------------------------------*/
  #img1,   #img2,  #img3{ cursor: pointer;border:none;}/* pour IE*/

#scene{
width:800px;
height: 600px;
background: transparent;
position: relative;
top:0;
/*left:540px;*/
}

#bandeau_container{
width:800px;
height:101px;
position: absolute;
top:53px;
left:800px;
/*left:0;*/
background:transparent;
z-index:1;
}  

#texte_sce_container{
width:454px;
height:60px;
position:absolute;
z-index:1;
top:89px;
left:-454px;
/*left:332px;*/
background:transparent;
}

#vous_container{
width:121px;
height:18px;
position:absolute;
z-index:1;
background:transparent;
top:-18px;
/*top:57px;*/
left:332px;
}

#slash_gh_container{
width:337px;
height:19px;
position:absolute;
z-index:1;
background:transparent;
top:57px;
/*left:463px;*/
left:800px;
}

#fleche_container{
width:34px;
height:29px;
position:absolute;
z-index:1;
background:transparent;
top:148px;
left:-34px;
/*left:65px;*/
}

#voici_container{
width:259px;
height:24px;
position:absolute;
z-index:1;
background:transparent;
top:159px;
left:-259px;
/*left:97px;*/

}

#img1{

width:154px;
height:308px;
position:absolute;
z-index:1;
background:transparent;
top:600px;
/*top:210px;*/
left:95px;
}

#img2{
width:155px;
height:307px;
position:absolute;
z-index:1;
background:transparent;
top:600px;
/*top:210px;*/
left:265px;
}

#img3{
width:154px;
height:307px;
position:absolute;
z-index:1;
background:transparent;
top:600px;
/*top:210px;*/
left:440px;
}

#slash_db_container{
width:465px;
height:47px;
position:absolute;
z-index:0;
background:transparent;
top:494px;
/*left:0px;*/
left:-465px;
}

#bulle1{

width:94px;
height:45px;
position:absolute;
z-index:3;
background:transparent;
top:224px;
left:107px;

}

#bulle2{
width:128px;
height:87px;
position:absolute;
z-index:3;
background:transparent;
top:210px;
left:308px;

}
#bulle3{
width:128px;
height:90px;
position:absolute;
z-index:3;
background:transparent;
top:212px;
left:481px;

}

#bulle1,#bulle2, #bulle3 { opacity:0}

/*--------------------------------Panneau 2--------------------------------------*/

#img1_p2, #img2_p2, #img3_p2, #img4_p2, #img5_p2, #img6_p2,#slash1_p2, #slash2_p2, #prejuges, #handicap, #former_p2, #bulle_p2 , #fleche_p2{display:none}

#img1_p2{
width:144px;
height:358px;
position:absolute;
z-index:3;
background:transparent;
top:20px;
left:-144px;
/*left:13px;*/       
}

#img2_p2{
width:106px;
height:186px;
position:absolute;
z-index:0;
background:transparent;
top:166px;
left:800px;
/*left:690px;*/       
}

#img3_p2{
width:236px;
height:314px;
position:absolute;
z-index:2;
background:transparent;
/*top:217px;*/
top:600px;
left:225px;       
}

#img4_p2{
width:235px;
height:302px;
position:absolute;
z-index:1;
background:transparent;
top:292px;
left:-235px;
/*left:39px;*/
}

#img5_p2{
width:682px;
height:301px;
position:absolute;
z-index:1;
background:transparent;
/*top:0px;*/
top:-301px;
left:0px;
}

#img6_p2{
width:404px;
height:113px;
position:absolute;
z-index:0;
background:transparent;
top:0px;
left:800px;
/*left:395px;*/       
}

#slash1_p2{
width:231px;
height:28px;
position:absolute;
z-index:2;
background:transparent;
top:304px;
left:-231px;
/*left:0px; */
}

#slash2_p2{
width:405px;
height:41px;
position:absolute;
z-index:2;
background:transparent;
top:500px;
left:800px;
/*left:395px;*/       
}

#bulle_p2{
width:204px;
height:146px;
position:absolute;
z-index:0;
background:transparent;
/*top:283px;*/
top:600px;
left:478px;       
}

#prejuges{
width:124px;
height:72px;
position:absolute;
z-index:1;
background:transparent;
/*top:308px;*/
top:600px;
left:542px;       
}

#handicap{
width:208px;
height:53px;
position:absolute;
z-index:1;
background:transparent;
/*top:374px;*/
top:600px;
left:586px;       
}

#former_p2{
width:137px;
height:72px;
position:absolute;
z-index:1;
background:transparent;
/*top:219px;*/
top:-72px;
left:541px;       
}

#fleche_p2{
width:34px;
height:29px;
position:absolute;
z-index:1;
background:transparent;
/*top:556px;*/
top:600px;
left:756px; 
cursor: pointer;      
}


/*--------------------------------Panneau 3--------------------------------------*/

#img1_p3, #img2_p3, #img3_p3, #img4_p3, #img5_p3, #img6_p3, #barres, #former_p3, #fond_violet, #xml_p3, #slash1_p3, #slash2_p3, #cross_media, #bulle_rose, #fleche_p3 {display: none}

#img1_p3{
width:351px;
height:231px;
position:absolute;
z-index:2;
background:transparent;
/*top:371px;*/
left:389px;
top:600px;       
}

#img2_p3{
width:301px;
height:280px;
position:absolute;
z-index:2;
background:transparent;
top:320px;
/*left:47px;*/
left:-301px;
}

#img3_p3{
width:121px;
height:194px;
position:absolute;
z-index:1;
background:transparent;
top:0px;
/*left:679px;*/
left:800px;      
}

#img4_p3{
width:186px;
height:177px;
position:absolute;
z-index:2;
background:transparent;
/*top:12px;*/
left:309px;
top:-177px;      
}

#img5_p3{
width:297px;
height:299px;
position:absolute;
z-index:1;
background:transparent;
/*top:0px;*/
left:0px;
top:-299px;
}

#img6_p3{
width:166px;
height:292px;
position:absolute;
z-index:1;
background:transparent;
/*top:128px;*/
top:-297px;
left:297px;
}

#barres{
width:72px;
height:271px;
position:absolute;
z-index:1;
background:transparent;
/*top:0px;*/
left:293px;
top:-271px;       
}

#former_p3{
width:136px;
height:59px;
position:absolute;
z-index:2;
background:transparent;
/*top:139px;*/
left:537px;
top:-59px;       
}

#fond_violet{
width:432px;
height:320px;
position:absolute;
z-index:0;
background:transparent;
top:282px;
/*left:74px;*/
left:-432px;       
}


#xml_p3{
width:168px;
height:46px;
position:absolute;
z-index:2;
background:transparent;
top:219px;
/*left:507px;*/
left:800px;       
}

#slash1_p3{
width:244px;
height:20px;
position:absolute;
z-index:0;
background:transparent;
top:111px;
/*left:556px;*/
left:800px;      
}

#slash2_p3{
width:399px;
height:33px;
position:absolute;
z-index:3;
background:transparent;
top:568px;
/*left:0px;*/
left:-33px;       
}

#cross_media{
width:167px;
height:29px;
position:absolute;
z-index:2;
background:transparent;
top:272px;
/*left:536px;*/
left:800px;
}

#bulle_rose{
width:200px;
height:147px;
position:absolute;
z-index:1;
background:transparent;
/*top:200px;*/
left:529px;
top:-147px;       
}

#fleche_p3{
width:34px;
height:29px;
position:absolute;
z-index:1;
background:transparent;
/*top:556px;*/
top:600px;
left:756px; 
cursor: pointer;      
}

/*--------------------------------Panneau 4--------------------------------------*/
#img1_p4, #img2_p4, #img3_p4, #img4_p4, #img5_p4, #securite, #accolade, #former_p4, #fond_bleu, #bulle_orange, #slash1_p4, #slash2_p4, #compagnie, #fleche_p4{display:none}

#img1_p4{
width:146px;
height:331px;
position:absolute;
z-index:2;
background:transparent;
/*top:62px;*/
left:247px;
top:-331px;       
}

#img2_p4{
width:364px;
height:258px;
position:absolute;
z-index:1;
background:transparent;
/*top:0px;*/
left:379px;
top:-258px;       
}

#img3_p4{
width:155px;
height:222px;
position:absolute;
z-index:1;
background:transparent;
/*top:377px;*/
left:308px;
top:600px;       
}

#img4_p4{
width:124px;
height:199px;
position:absolute;
z-index:1;
background:transparent;
top:401px;
/*left:463px;*/
left:800px;       
}

#img5_p4{
width:551px;
height:345px;
position:absolute;
z-index:0;
background:transparent;
top:256px;
/*left:0px;*/
left:-551px;       
}

#securite{
width:208px;
height:41px;
position:absolute;
z-index:2;
background:transparent;
top:263px;
/*left:468px;*/
left:800px;      
}

#accolade{
width:26px;
height:92px;
position:absolute;
z-index:3;
background:transparent;
top:159px;
/*left:98px;*/
left:-26px;      
}

#former_p4{
width:128px;
height:61px;
position:absolute;
z-index:3;
background:transparent;
/*top:174px;*/
left:122px;
top:-61px;       
}

#fond_bleu{
width:79px;
height:298px;
position:absolute;
z-index:0;
background:transparent;
top:40px;
/*left:721px;*/
left:800px;       
}

#bulle_orange{
width:215px;
height:159px;
position:absolute;
z-index:1;
background:transparent;
top:241px;
/*left:473px;*/
left:800px;       
}

#slash1_p4{
width:375px;
height:66px;
position:absolute;
z-index:0;
background:transparent;
/*top:534px;*/
left:405px;
top:600px;       
}

#slash2_p4{
width:166px;
height:26px;
position:absolute;
z-index:0;
background:transparent;
/*top:145px;*/
left:0px;
top:-26px;       
}

#compagnie{
width:148px;
height:52px;
position:absolute;
z-index:2;
background:transparent;
top:302px;
/*left:502px;*/
left:800px;      
}

#fleche_p4{
width:34px;
height:29px;
position:absolute;
z-index:1;
background:transparent;
/*top:556px;*/
top:600px;
left:756px; 
cursor: pointer;      
}
/*---------SVG--------------
#mask{
width:120px;
height:120px;
position:absolute;
z-index:3;
background:transparent;
top:214px;
left:110px;
/*pointer-events:none;*/
}