html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color:#ffffff;
}

#construction{
	position: absolute;
	left: 50px;
	top: 100px;
	width: 378px;
	height: 361px;
	z-index:100;
}
#book{
	position:absolute; 
    left: 50%; 
    top: 50%;
    width: 860px;
    height: 730px;
    margin-top: -385px; /* moitié de la hauteur */
    margin-left: -430px; /* moitié de la largeur 
	border: 1px dashed #ccc;*/
	z-index:2;
}

#taches{
	position:absolute; 
    left: 50%; 
    top: 50%;
    width: 1000px;
    height: 800px;
    margin-top: -525px; /* moitié de la hauteur */
    margin-left: -405px; /* moitié de la largeur 
	border: 1px dashed #ccc;*/
	z-index:1;
	
}
#taches1{
	position:absolute; 
	left: -130px; 
    top: 360px;
    width: 116px;
    height: 359px;
	z-index:1;
}

#taches2{
	position:absolute; 
	left: 520px; 
    top: 810px;
    width: 249px;
    height: 112px;
	z-index:1;
}

#taches3{
	position:absolute; 
	left: 745px; 
    top: 430px;
    width: 180px;
    height: 383px;
	z-index:1;
}

#accueil{
	position:absolute; 
	left: 85px; 
    top: 11px;
    width: 119px;
    height: 56px;
	z-index:15;
}
#accueil2{
	position:absolute; 
	left: 85px; 
    top: 11px;
    width: 119px;
    height: 75px;
	z-index:15;
}

#titre{
	position:absolute; 
	left: 70px; 
    top: 80px;
    width: 358px;
    height: 67px;
	z-index:5;
}

#lien_mail{
	position : absolute;
	left : 500px;
	top : 345px;
	z-index:50;
}

#mda{
	position : absolute;
	left : 475px;
	top : 660px;
	z-index:50;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	color : Black;
}

.lien{
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	color : Black;
	text-decoration : underline;
	text-align : left;

}

.lien2{
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px;
	color : Black;
	text-decoration : underline;
	text-align : left;

}

.lien3{
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	color : Black;
	text-decoration : underline;
	text-align : left;

}


#texte_contact1{
	position : absolute;
	left : 210px;
	top : 225px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	line-height : 11px;
	color : Black;
	z-index:10;
	
}
#images_contact{
	position : absolute;
	left : 83px;
	top : 224px;
	z-index:75;
	
}

#texte_contact2{
	position : absolute;
	left : 252px;
	top : 360px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	line-height : 11px;
	z-index:10;
}

#texte_contact3{
	position : absolute;
	left : 85px;
	top : 510px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 10px;
	line-height : 11px;
	z-index:10;
}

#fleche_port{
	position : absolute;
	left : 85px;
	top : 592px;
	z-index:50;
}

#lien_port{
	position : absolute;
	left : 95px;
	top :590px;
	z-index:50;
}



#menu1{
	position:absolute; 
	left: 808px; 
    top: 115px;
    width: 165px;
    height: 99px;
	z-index:23;
}
#menu1_2{
	position:absolute; 
	left: 798px; 
    top: 115px;
    width: 165px;
    height: 99px;
	z-index:23;
}
#menu2{
	position:absolute; 
	left: 815px; 
    top: 226px;
    width: 165px;
    height: 88px;
	z-index:23;
}

#menu2_2{
	position:absolute; 
	left: 776px; 
    top: 226px;
    width: 190px;
    height: 88px;
	z-index:23;
}

#menu3{
	position:absolute; 
	left: 813px; 
    top: 312px;
    width: 165px;
    height: 89px;
	z-index:23;
}

#menu3_2{
	position:absolute; 
	left: 778px; 
    top: 312px;
    width: 187px;
    height: 89px;
	z-index:23;
}

#menu4{
	position:absolute; 
	left: 480px; 
    top: 682px;
    width: 165px;
    height: 89px;
	z-index:23;
}

#menu4_2{
	position:absolute; 
	left: 480px; 
    top: 682px;
    width: 187px;
    height: 89px;
	z-index:23;
}

#titre_liens{
	position:absolute; 
	left: 75px; 
    top: 80px;
    width: 258px;
    height: 67px;
	z-index:10;
}

#textes_liens{
	position : absolute;
	left : 85px;
	top : 170px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	line-height : 16px;
	z-index:20;
}

#texte_sauvegarde1{
	position : absolute;
	left : 80px;
	top : 140px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	line-height : 16px;
	z-index:20;
	text-align : justify;
	margin-right : 450px;
}

#texte_sauvegarde2{
	position : absolute;
	left : 462px;
	top : 140px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 11px;
	line-height : 16px;
	z-index:20;
	text-align : justify;
	margin-right : 74px;
	
}
#visuel{
	position : absolute;
	left : 455px;
	top : 439px;
	width: 350px;
    height: 258px;
	z-index:10;
}

#credits{
	position : absolute;
	left : 20px;
	top : 722px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 9px;
	line-height : 14px;
	z-index:5;
	color : Gray;
}
#exclam{
	position : absolute;
	left : 340px;
	top : 580px;
	width: 141px;
    height: 175px;
	z-index:10;
}

#monstre{
	position : absolute;
	left : 455px;
	top : 125px;
	width: 250px;
    height: 520px;
	z-index:10;
}

#bonus1{
	position:absolute; 
	left: 70px; 
    top: 80px;
	z-index:50;
}

#bonus2{
	position:absolute; 
	left: 90px; 
    top: 155px;
	z-index:50;
}

#bonus3{
	position:absolute; 
	left: 470px; 
    top: 100px;
	z-index:50;
}

#bonus4{
	position:absolute; 
	left: 570px; 
    top: 430px;
	z-index:50;
}
#bonus5{
	position:absolute; 
	left:65px; 
    top: 480px;
	z-index:50;
}

#prev{
	position:absolute; 
	z-index:50;
	padding:5px;
	top: 150px;
	left:60px;
	height: 472px; width: 356px;
}

#prev_fleche{
	position:absolute; 
	z-index:30;
	padding:5px;
	top: 350px;
	left:53px;
	height: 16px; 
	width: 22px;
}

#next{
	position:absolute; 
	z-index:50;
	top: 150px;
	padding:5px;
	left:440px;
	height: 472px; width: 356px;
}

#next_fleche{
	position:absolute; 
	z-index:30;
	top: 350px;
	padding:5px;
	left:787px;
	height: 16px; 
	width: 23px;
}

#matiere{
	position:absolute; 
	z-index:10;
	top: 50px;
	left:0;
}

#intro{
	position:absolute; 
	z-index:5;
	left: 70px; 
    top: 68px;
}
#intro1{
	position:absolute; 
	z-index:5;
	
}
#intro2{
	position:absolute; 
	z-index:5;
	left: 378px; 
	 top: 35px;
}


#page{
	position:absolute; 
	z-index:5;
	left: 65px; 
    top: 155px;
	width: 1000px;
}
#page1{
	overflow: hidden;
	left:14px;
	float:left;
	
}
#page2{
	left:14px;
	overflow: hidden;
}
#fond{
	position:absolute; 
	z-index:3;
	top: 50px;
}


#titre1, #titre2 {font-family:Verdana,"Bitstream Vera Sans",Arial,Geneva,Helvetica,sans-serif; font-size:10px; font-weight: bold; color:#24201F;}
#planche1, #planche2 {font-family:Verdana,"Bitstream Vera Sans",Arial,Geneva,Helvetica,sans-serif; font-size:10px; font-weight: normal; color:#24201F;}
#descriptif1, #descriptif2 {font-family:Verdana,"Bitstream Vera Sans",Arial,Geneva,Helvetica,sans-serif; font-size:10px; font-weight: normal; color:#24201F;}
#zoom1{top: 635px;position:absolute; left :360px;z-index:50;} 
#zoom2 {top: 635px;position:absolute; left :720px;z-index:50;}


#legende1{
	position:absolute; 
	z-index:50;
	top: 635px;
	left:80px;
}
#legende2{
	position:absolute; 
	z-index:50;
	top: 635px;
	left:460px
}

pre { display:none }
#main h2 { text-align: center }

#main { background: #fff; margin: 0 20px 20px 20px }
#main h1 { padding:0; margin-top: 20px }
#header { background-color: #eee; font-weight: normal; margin:0; padding:10px; font-size: small }

div.example { padding: 20px; margin: 5px 0 15px 0px; background: #ffe; clear:left; border: 1px dashed #ccc; text-align: left }

.pics { height: 472px; width: 356px; padding:0;  margin:0; overflow: hidden }
.pics img { height: 472px; width: 356px;  top:0; left:0 ; border-right:20px;}

table { margin: auto; border-collapse: separate; border-spacing: 20px }
td { vertical-align: top; text-align:center; width: 235px }
#main h2 { text-align: left }
hr { margin-top: 20px; }

pre { text-align: left; overflow: visible }
code { background-color: #ffc }
pre code { background-color: #eee }