*{	
		margin: 0px;
		padding: 0px;
		outline: none;
		}
	html,body{
		/* permet d'avoir la scrollbar même sur les pages qui n'en ont pas besoin,
		et évite au body de bouger en passant d'une page à l'autre.
		ça force le body de la page à être toujours un poil plus grand que la page */
		height: 100.1%;		
		}
	body{
		background-color: #000;
		}
	#page{
		width: 960px;
		margin:0 auto;
		background-color:#FFF;
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; /* peut-on mettre autre chose que Arial-Helvetica ??? */
			border-top-width: 8px;
			border-bottom-width: 8px;
			border-top-style: solid;
			border-right-style: none;
			border-bottom-style: solid;
			border-left-style: none;
			border-top-color: #bd4219;
			border-bottom-color: #bd4219;
		}
/* ------------------------------------ HEADER ----------------------*/
	#page #header{
		width:960px;
		height: 230px;
		background-image: url(images/background.png); 
		background-repeat:no-repeat;
		position:relative;
		}
	#page #header #titre h1 a{
		display:block;
		text-indent: -2000px;
		overflow: hidden;
		background-image:url(images/titre.png);
		background-repeat:no-repeat;
		width: 244px;
		height: 156px;
		position: absolute;
		top: 1px;
		left: 1px;
		} 
	#page #header #etoile{
		position: absolute;
		top: 12px;
		left: 348px;
		width: 316px;
		height: 156px;
		} 
	#page #header #phrase1 h2{
		clear:both;
		width: 560px;
		height: 74px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: #FFF;
		position: absolute;
		top: 175px;
		left: 15px;
		}  
	#page #header #phrase2 h2{
		clear:both;
		width: 560px;
		height: 74px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: #FFF;
		position: absolute;
		top: 165px;
		left: 15px;
		} 		
	#dessin{
		position: absolute;  /* Pour positionner le dessin en position absolue */
		right:0px;
		bottom: 0px;
		width: 400px;
		height: 200px;
		background-repeat:no-repeat;
		}
	#dessin.d1{background-image:url(images/d1.png);	}
	#dessin.d2{background-image:url(images/d2.png);	}
	#dessin.d3{background-image:url(images/d3.png);	}
	#dessin.d4{background-image:url(images/d4.png);	}
	#dessin.d5{background-image:url(images/d5.png);	}
	#dessin.d6{background-image:url(images/d6.png);	}
	#dessin.d7{background-image:url(images/d7.png);	}
	#dessin.d8{background-image:url(images/d8.png);	}
	#dessin.d9{background-image:url(images/d9.png);	}
	#dessin.d10{background-image:url(images/d10.png);	}
	
/* ------------------------------------ NAVIGATION HAUT DE PAGE --- */
	#page #nav0{
		position:absolute;
		top:10px;
		right:26px;
		}
	#page #nav0 li{
		float:left; /* à la pace de : display: inline; !!!!!!!!!!!!!!!!!!!!!!!! */
		list-style-type: none;
		}
	#page #nav0 li a{
		text-decoration: none;
		font-size: 11px;
		font-weight: bold;
		color: #FFF;
		display: block;
		height: 20px;
		}
	#page #nav0 a:hover{
		color: #F60;
		}
	#page #nav0 #but{
		width: 96px;
		}
	#page #nav0 #plan{
		width: 60px;
		}
	#page #nav0 #email{
		background: url("images/mail.png") no-repeat 0 0;
		width:  20px;
		margin-top:2px;
		text-indent: -2000px;
		overflow: hidden;
		}

/* ------------------------------------ NAVIGATION CHAPITRES ---------*/
	#page #nav {
		width:960px;
		height: 50px;
		}
	#page #nav ul{
		list-style-type: none;
		}
	#page #nav li{
		display: inline;			
		}
	#page #nav li a{
		display: block;	
		height: 50px;
		float: left;			
		text-decoration: none;
		text-indent: -2000px;
		overflow: hidden;
		background-image: url(images/nav.gif);
		background-repeat: none;
		}	
				#nav li a.p1{
					width: 123px;
					background-position letf: top left;	}
				#nav a.p1:hover{
					background-position: bottom left;	}
				#nav li a.p2{
					width: 123px;
					background-position: -123px 0px;	}
				#nav a.p2:hover{
					background-position: -123px -50px;	}	
				#nav li a.p3{
					width: 67px;
					background-position: -246px 0px;	}
				#nav a.p3:hover{
					background-position: -246px -50px;	}	
				#nav li a.p4{
					width: 92px;
					background-position: -313px 0px;	}
				#nav a.p4:hover{
					background-position: -313px -50px;	}
				#nav li a.p5{
					width: 132px;
					background-position: -405px 0px;	}
				#nav a.p5:hover{
					background-position: -405px -50px;	}
				#nav li a.p6{
					width: 113px;
					background-position: -537px 0px;	}
				#nav a.p6:hover{
					background-position: -537px -50px;	}
				#nav li a.p7{
					width: 129px;
					background-position: -650px 0px;	}
				#nav a.p7:hover{
					background-position: -650px -50px;	}		
				#nav li a.p8{
					width: 81px;
					background-position: -779px 0px;	}
				#nav a.p8:hover{
					background-position: -779px -50px;	}		
				#nav li a.p9{
					width: 100px;
					background-position: -860px 0px;	}
				#nav a.p9:hover{
					background-position: -860px -50px;	}	
					
		 					#nav .navon .p1{background-position: bottom left;	}
		 					#nav .navon .p2{background-position: -123px -50px;	}
		 					#nav .navon .p3{background-position: -246px -50px;	}
		 					#nav .navon .p4{background-position: -313px -50px;	}
		 					#nav .navon .p5{background-position: -405px -50px;	}
		 					#nav .navon .p6{background-position: -537px -50px;	}
		 					#nav .navon .p7{background-position: -650px -50px;	}
		 					#nav .navon .p8{background-position: -779px -50px;	}									
		 					#nav .navon .p9{background-position: -860px -50px;	}
							
/* ------------------------------------ VIDEO EXODRAP -------------------------*/		
		#page #video{
			margin-top:25px;
			margin-left:190px;
			margin-bottom:40px;
			}														
/* ------------------------------------ FOOTER -------------------------*/						
		#page #footer{
			clear: both;
			background-image: url(images/footer.png);
			background-repeat: no-repeat;
			width: 960px;
			height: 179px;
			}
		 #page #footer p{
			font-size: 8px;
			color: #FFF;
			padding-left: 30px;
			padding-top:162px;
			}
		#page #footer a{
			color: #FFF;
			text-decoration:none;
			}
		#page #footer a:hover{
			color: #97BF0D;
			}
			
/* ------------------------------------ CONTENU TEXTE ! -------------------------------------------------------*/	
	#page #content{
		width: 750px;
		margin-left: 90px;
		margin-right: 120px;
		font-size: 13px;
			padding-top:14px;
			padding-bottom:20px;		
		} 
	#page #content #liens{
		padding-top: 30px;
		}
	#page #content #liens a{
		font-weight: bold;
		text-decoration:none;
		color: #999;
		}
	#page #content #liens a:hover{
		color:#97BF0D;
		}
	#page #content p.sentence{
		font-size: 20px;
		font-weight: bold;
		font-style:italic;
		text-align:center;
		color:#bd4219;
		margin-left: 40px;
		margin-top: 24px;
		}
	#page #content p.lapsus{
		font-size: 20px;
		font-weight: bold;
		font-style:italic;
		text-align:center;
		color:#bd4219;
		margin-left: 40px;
		margin-top:10px;
		}
	#page #content p.signature{
		font-size: 14px;
		font-style:italic;
		text-align:center;
		color: #999;
		}		
	#page #content h1{
		clear:both;
		font-size: 20px;
		font-weight: bold;
		color:#97BF0D;
		margin-left: 60px;
		margin-top: 24px;
		}
	#page #content h1.scenario{
		font-size: 16px;
		font-weight: bold;
		color:#97BF0D;
		margin-left: 120px;
		margin-top: 10px;
		}	
	#page #content p.chapeau{
		font-size:14px;
		text-align: justify;
		margin-left: 120px;
		margin-top: 4px;
		color:#000;		
		}	
	#page #content p.legende{
		font-size:12px;
		font-style:italic;
		line-height:1.2;
		margin-left: 120px;
		color:#000;		
		}
	#page #content p.textcourant{
		text-align: justify;
		margin-left: 120px;
		margin-top: 6px;
		color:#000;		
		}	
	#page #content p.textcourant img{
		float:left;
		}
	#page #content ul.list{
		font-size:14px;
		text-align: justify;
		margin-left: 138px;
		margin-top: 6px;
		color:#000;			
		}
	#page #content ul.list a{
		text-decoration: none;
		color:#97BF0D;		
		}
	#page #content ul.list a:hover{
		color:#bd4219;
		}
	#page #content ul.list li{
		list-style-image:url(images/soucoupe-bullet.gif);
		padding-top:6px;	
		}
	#page #content ul.list li:hover{
		list-style-image:url(images/soucoupe-bullet-on.gif);
		}			
	#page #content ul.list2{
		font-size:14px;
		text-align: justify;
		margin-left: 138px;
		margin-top: 6px;
		color:#000;			
		}		
	#page #content ul.list2 li{
		list-style-image:url(images/soucoupe-bullet.gif);
		padding-top:6px;	
		}		
	#page #content p.textlist{
		text-align: justify;
		margin-left: 120px;
		margin-top: 6px;
		color:#000;		
		}
	#page h4{
		color: #bd4219; 
		margin-top: 24px;
		margin-left: 60px;
		margin-bottom:2px;
		font-style:italic;
		}
	#page .liensbas{
		font-size: 11px;
		text-align:justify;
		color: #000;
		margin-left: 60px;
		}
	#page em{
		letter-spacing:14px;
		}
	#page .liensbas a{
		font-weight: bold;
		text-decoration:none;
		color: #999;
		}
	#page .liensbas a:hover{
		color:#97BF0D;
		}
		
	table{
		padding-top:40px;
		margin-left:120px;
		border-collapse:collapse;
		width:540px;
		}
	td{
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color:#97BF0D;
	/* l'alignement du texte dans la cellule se mets toujours dans les td */
		vertical-align: top;
		padding-top:10px;
		}
		
/* ------------------------------------ STYLE POUR JAVA SCRIPT ----------------------*/
.titreboite{ 
font-size:12px; 
color: #999;   /* OU VERT 97BF0D */
cursor: hand;
cursor: pointer;
border-bottom:1px 110px solid #999;
margin-left: 120px;
}

.titreboite-scenario{ 
font-size:14px; 
font-weight:bold;
color: #97BF0D;  
cursor: hand;
cursor: pointer;
border-bottom:1px 110px solid #999;
margin-left: 120px;
}

.texteboite{ 
font-size:13px;
text-align:justify;
margin-left: 120px;
}

.texteboite img{ 
float:left;
}

.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}