body{
	background:#060201 url(../img/unknown.jpg) top center no-repeat;
}
#content{
	width:300px;
	margin:auto;
}
header{
	position:relative;
	z-index:100;
	padding-top:60px;		
	text-align:center;	
}
header span{
	font-size:6em;
	text-transform:uppercase;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,0.9)),to(rgba(0,0,0,0.8)));	
}
header span#bonne{
	font-size:6.58em;
	line-height:0.8em;
}
header ul{
	margin:17px 0px;
	font-size:0.8em;
	font-family:'Verdana','Arial';
	line-height:1.3em;
}
header ul li:last-child{
	line-height:0.1em;
}
header span#prenez{
	font-size:3.7em;
	margin-left:-2px;
	margin-top:2px;
	display:block;
	
}
header span#moi{
	font-size:7em;
	line-height:0.8em;
}

#main{
	top:488px;
	position:absolute;
}
#arrow{
	display:none;
	margin-top:20px;
	margin-left:182px;
	z-index:99;
	position:relative;
}
.but{
	display:none;
	position:absolute;
	z-index:100;
	cursor:pointer;
	background:url(../img/but.png) no-repeat;
}
#but1{
	width:57px;
	height:59px;	
	top:36px;
	left:118px;
}
#but2{
	width:52px;
	height:57px;	
	top:176px;
	left:133px;	
	background-position:0px -67px;
}
#but3{
	width:55px;
	height:58px;	
	top:373px;
	left:127px;	
	background-position:-1px -130px;
}
#but4{
	width:54px;
	height:58px;	
	top:575px;
	left:126px;	
	background-position:-1px -196px
}
.but:hover{
	-webkit-transform: translate(-2px,0px) rotate(10deg);
	-moz-transform: translate(-2px,0px) rotate(10deg);
	-o-transform: translate(-2px,0px) rotate(10deg);
	-ms-transform: translate(-2px,0px) rotate(10deg);
}
.step{
	display:none;
	position:absolute;
	background:url(../img/step.png);
}
#step0{
	display:block;
	width:763px;
	height:801px;	
	top:-181px;
	left:-204px;
	z-index:10;
}
#step1{		
	width:763px;
	height:801px;
	top:-146px;
	left:-204px;
	z-index:9;
	background-position: -5px -796px;
}
#step2{			
	width:653px;
	height:765px;
	top:-143px;
	left:-165px;
	z-index:8;
	background-position:-29px -1585px;
}
#text{
	display:none;
	position:absolute;
	top:34px;
	left:0px;
	width:300px;
	font-family:'Verdana','Arial';
	text-align:center;
	font-size:0.9em;
	line-height:1.3em;
	z-index:7;
}
#text li:first-child{
	font-weight:bold;
}
#link{
	position:absolute;
	left:-221px;
	top:665px;
	line-height: 30px;
	width:800px;
}
#rencontrer{
	display:block;
	line-height:35px;
	width: 133px;
	margin-left: 86px;
	margin-top: 11px;
	text-transform:uppercase;
	font-family:'Impact';
	font-size:1.3em;
	border:1px solid #2a0001;
	color:white;
	background: #830000; 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#981515', endColorstr='#830000'); /* for IE */
	background:-webkit-gradient(linear, left top, left bottom, from(#981515), to(#830000)); /* for webkit browsers */
	background:-moz-linear-gradient(top,  #981515,  #830000); /* for firefox 3.6+ */ 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

footer{
	background:rgba(0,0,0,0.6);
	padding: 15px;
	margin-top:720px;
	z-index:20;
	text-align:center;
}

/*#preload{
	position:absolute;
	z-index:10000;
	width:100%;
	height:100%;
	top:0px;
	background:rgba(0,0,0,1);
	text-align:center;
	padding-top:20%;
	overflow:hidden;	
	font-size:1.2em;
	line-height:1.2em;
}

#preload img {
	margin-top:20px;
}*/