@font-face {
    font-family: Belwe;
    src: url('../font/Belwe.ttf') format('truetype');
}
	
@font-face {
    font-family: Bauhaus;
    src: url('../font/Bauhaus.otf') format('opentype');
}

@media screen {
	
	body {
		font-family: Bauhaus, Arial, Verdana, Geneva, sans-serif;
		margin:0px;
		margin-top:20px;
		background-color:#c2c0b7;

    }
    .float-left { float: left; }
    .float-right { float: right; }
    .clear { clear: both; }
	
	#page {
		margin:auto;
		width:1190px;
		text-align: center;
		background-color:#f3f2ed;
		box-shadow:  0px 0px 5px grey;
		min-height:780px;
		position:relative;
	}
	
	#title_frame {
		width:490px;
	}
	

	
	#bt_retour {
		position:relative;
		float:left;
		top:-20px;
	}	
	
	.bt_back {
		background-image:url("../img/fleche_retour.png");
		border:none;
		background-color:transparent;
		width:371px;
		height:107px;
				cursor: pointer;
	}
	
	.titre_retour{ 
		position:relative;
		float:left;
		font-family:Belwe, Times, serif;
		font-size:28px;
		margin-left:10px;
		top:-12px;
	}
	
	.menu_numeros{ 
		position:relative;
		float:right;
		right:10px;
		margin-top:-20px;
		
	}
	

	#quest1_home {
		position:absolute;
		left:550px;
		top:10px;
	}
	
	#quest2_home {
		position:absolute;
		left:790px;
		top:200px;
	}
	
	#quest3_home {
		position:absolute;
		left:700px;
		top:415px;
	}
	
	#fleche1{
		position:relative;
		float:left;	
		width:116px;
		height:85px;	
		left:0px;
		top:150px;
	}
	
	
	#fleche2{
		position:relative;
		float:left;	
		left:-200px;
		top:130px;
		width:202px;
		height:66px;	
	}	

	#fleche3{
		position:relative;
		float:left;	
		left:-100px;
		top:50px;
		width:153px;
		height:108px;	
	}		
	

	.home_quest1, .home_quest2 {
		width:283px;
		height:150px;
		padding:94px 30px 0 30px;	

	}
	.home_quest3 {
		width:283px;
		height:150px;
		padding:94px 30px 0 30px;	

	}	
	
	
	
	.bt_quest {
		font-family: Bauhaus, Arial, Verdana, Geneva, sans-serif;
		font-size:22px;
		line-height:25px;
		background:none;
		border:none;
				cursor: pointer;
	}

	
	.grand {
		font-size:26px;
		line-height:28px;
	}
	
	.moyen {
		font-size:22px;
		line-height:25px;
	}
	
	.petit {
		font-size:21px;
		line-height:21px;
	}	
	
	
	.quotegrand {
		font-size:30px;
		line-height:35px;
	}
	
	.quotemoyen {
		font-size:25px;
		line-height:29px;
	}
	
	.quotepetit {
		font-size:21px;
		line-height:24px;
	}	
	
	
	#home_citation {
		margin-left:55px;
		width:400px;
		height:97px;	
		padding:40px 20px 0 20px;
		position:absolute;
		left:40px;		
		top:560px;
	}	
	
	
	#home_video {
		width:370px;
		height:336px;	
		background-image: url("../img/home_fondvideo.png");		
		padding-top:40px;
		position:absolute;
		left:160px;
		top:190px;
	}
	
	#home_video_pic {
		padding:0;
		box-shadow:  0px 0px 5px grey;
		width:319px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#home_video_tit {
		font-family:Belwe, Times, serif;	
		font-size:26px;
		padding-top:15px;	
	}
	
	#home_video_stit {
		font-size:21px;	
	}	
	
	#pcol1 {
		position:relative;
		float:left;	
		height:550px;
		margin-left:50px;
	}
    
	#pcol2 {
		position:relative;
		float:left;	
		margin-left:90px;
		margin-top:100px;
		height:550px;
	}
	


	
	#pcol1 #questp {
		width:507px;
		height:456px;
		font-size:26px;
		padding:130px 45px 15px 45px;	
	}
	
	#mascotte{
		position:absolute;
		float:left;	
		width:127px;
		height:180px;
		background-image: url("../img/mascotte.png");	
		left:335px;
		top:300px;
	}
	
	
	#pmascotte{
		position:relative;
		float:left;	
		width:127px;
		height:180px;
		background-image: url("../img/mascotte2.png");	
		top:-145px;
		left:-40px
	}
	
	.video {
		margin-top:10px;
	}

		
	
	.doccomp {
		position:relative;
		float:left;		
		width:369px;
		height:600px;		
		text-align:center;
		top:-100px;
	}
	
	
	.doccomp_tit {
		font-size:14px;	
		margin-left:10px;
		margin-right:10px;
	}	
	
	#cont_doccomp {
		display: inline-block;
    vertical-align: middle
	}

	
	#pcitation {
		margin-left:55px;
		width:278px;
		height:117px;	
		background-image: url("../img/home_fondcitation.png");		
		font-size:25px;	
		padding:20px 20px 0 20px;
	}	
	

	

	
	#footer {
		height:40px;
		position:absolute;
		top:740px;
		width:1190px;
	}
	
	#logo {
		position:relative;
		float:middle;		
	}
	
	#bt_credits {
		position:relative;
		float:left;
		top:-20px;
		left:15px;
	}
	#bt_credits button {
		background: none;
		border: none;
		cursor: pointer;
	}
	#credits {
		display: none;
		position: relative;
		top: -150px;
		left:10px;
		width: 430px;
		height: 130px;
		background: #FFF;
	}
	#credits #credits-content {
		text-align: left;
		padding:5px 15px 15px 15px;
		font-size:14px;
	}
	#credits #credits-close  button{
		float: right;
		background: none;
		border: none;		
	}
	
	.bt_gopage {
		background:none;
		border:none;
				cursor: pointer;
	}
	
    button.disable {  }

}