body{
	height:768px;
	font-family: "Courier New", Courier, monospace;
}

/*BACKGROUND*/
#index{
margin:30px auto;
background-image : url('img/p1.png');
width:800px;
height:566px;
vertical-align:middle;
position:fixed;
right: 100px;left: 100px;
z-index: 2;
 

}


} 

  
#octave{
margin:30px auto;
background-image : url('img/p2.png');
width:600px;
height:600px;

}


#p5{
margin:30px auto;
background-image : url('img/p5.png');
width:800px;
height:566px;
}

#p2{
margin:30px auto;
background-image : url('img/p2.png');
width:600px;
height:600px;
}

#p3{
margin:30px auto;
background-image : url('img/p3.png');
width:800px;
height:800px;
}

#p4{
margin:30px auto;
background-image : url('img/p4.png');
width:800px;
height:566px;
}

#p6{
margin:30px auto;
background-image : url('img/p6.png');
width:800px;
height:566px;
}

#p7{
margin:30px auto;
background-image : url('img/p7.png');
width:600px;
height:424px;
}

#p8{
margin:80px auto;
width:720px;
height:424px;
}

p{
font-family : Courier ;
vertical-align : middle ; 
text-align : left ;
}

#p9{
margin:30px auto;
background-image : url('img/p9.png');
width:800px;
height:566px;
}

#p10{
margin:30px auto;
background-image : url('img/p10.png');
width:800px;
height:566px;

}

#p11{
	
margin:30px auto;
width:800px;
height:566px;
vertical-align:top;
position:fixed;
right: 150px;left: 50px;
z-index: 2;

margin:30px auto;
background-image : url('img/p11.png');
width:700px;
height:525px;

}

a{
text-decoration:none;

}

#replay{
color:#C00;
}

#replay:hover{
color:#C00;
}

#pw:hover{
color:#33F;
}

#pw{
color:#C00;
font-style: italic;
}

ul{
position: relative;
top: -220px;
z-index: 0;
}


#first{
background: url(img/gris-rouge.png) no-repeat 60px 0;
background-size: 100%;
width:113px;
height:70px;
display: block;
text-indent: -9999px;
}
#first:hover{
background-position:0 0;
}

#second{
background: url(img/gris-JAUNE.png) no-repeat 60px 0;
background-size: 100%;
width:113px;
height:70px;
display: block;
text-indent: -9999px;
}
#second:hover{
background-position:0 0;
}

#third{
background: url(img/gris-BLEU.png) no-repeat 60px 0;
background-size: 100% ;
width:113px;
height:70px;
display: block;
text-indent: -9999px;

}
#third:hover{
background-position:0 0;
}
#mask{
margin-top: 100px;
width: 60px;
height: 210px;
background-color: #fff;
position: relative;
left: 40px;
z-index: 3;

}

#replay{
color:#C00;
}

li{
list-style: none;
}


nav{
display:inline-block;
float:right;
margin-right: 100px;
position:fixed;
right: 0;
top: 0;
z-index: 1;
}



h1{

}

footer{
width: 97%;
height: 40px;
border-top: 1px solid #000;
padding-right:20px;

font-size: 0.8em;
float:right;
position:absolute;
top:650px
}