/* styles mise en page globale */
			
				body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
				background-color: #000000;
				background-image: url(../images/fond.jpg);
				font-family: Helvetica, sans-serif;
				font-size: 75%;
				color: #FFFFFF;
				padding: 0;
				margin: 0;
				text-align: center; /* pour corriger le bug de centrage IE */
				}

			div { padding: 0; 	margin: 0; } /* pour rendre tout homogène selon les navigateurs...*/

			div.page {  position: relative; /* on positionne le conteneur pour centrer la page */
						
				width:840px; 
				margin:0 auto 0 auto;
				text-align: left; /* on r�tablit l'alignement normal du texte */
				}

			#content {	/* pour une boire pour le corps de page en lien avec le pied de page fixe avec javascript */
				padding: 0px;
				}




			#footer {position: absolute;  /* N�cessaire pour Safari pour le pied de page fixe avec javascript */
				padding: 0px;
				left: 12px ;
				z-index: 15;
				}
	
			div#tete {  position: relative; /* on positionne le conteneur pour centrer la page */
				top: 0px;				
				width:840px; 
				margin:0 auto 0 auto;
				text-align: left; /* on r�tablit l'alignement normal du texte */
				}

				div#videoclaude  { position: absolute; 
				left: 40px;				
				}


/* les différents liens...*/



			a:link {
			color: #FFFFFF;
			text-decoration: none;
			border-bottom: 1px solid #FC8A32;
				}

			a:visited {
			color: #FFFFFF;
			text-decoration: none;
			border-bottom: 1px solid #FC8A32;
			}

			a:hover {color: #FC8A32;
			text-decoration: none; 
			border-bottom: 1px solid #FFFFFF;
			}

			a:active { color: #FC8A32; }

	

a.lien2:link {
	color: #FFFFFF;
	text-decoration: none;
	border: none;
}
a.lien2:visited {
	color: #FFFFFF;
	text-decoration: none;
	border: none;
}
a.lien2:hover {
	color: #FC8A32;
	text-decoration: none;
	border: none;
}
a.lien2:active {
	text-decoration: none;
	border: none;
}


a img {  border:  none ; }




/* le menu tout en bas */


div.titreenterre { position:absolute; left:165px; top:135px; width:408px; height:45px; z-index:20;
visibility: hidden; text-align: center ;}


/* le menu tout en haut */


	
ul.menuenhaut {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 14px;
left: 5px;
width: 100%; /* precision pour Opera */
}

ul.menuenhaut li {float: left; }


.menuenhaut a {
font-size: 1.1em; 
width: 100px;
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #FFFFFF;
color: #FFFFFF;
background: transparent url(../images/terre.jpg) 0 0 fixed; 
margin-left: 5px; 
}

.menuenhaut a:hover {
border: 1px solid  #FC8A32;  
color: #FFFFFF;  
background-image: url(../images/bleu.jpg)
}




.menuenhaut a span {
display: none;
}

.menuenhaut a:hover span {
display: block;
position: absolute;
top: 25px;
left: 0;
width: 713px;
text-align: left;
color: #FFFFFF;
}


/* les titres et styles de paragraphes */


h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 2.0em;
	font-weight: bold;
	margin : 0;
  	padding : 0;
}
h2 { font-family: "Times New Roman", Times, serif;
	font-size: 1.8em; 
	font-weight: bold;
	margin : 0;
  	padding : 0;
	}
h3 {font-size: 1.5em;
	font-weight: bold;
	margin : 0;
  	padding : 0;
	}
h4 { font-size: 1.3em; 
	font-weight: bold;
	margin : 0;
  	padding : 0; line-height: 150%}
h5 { font-size: 1.1em; 
	font-weight: bold;
	margin : 0;
  	padding : 0; }
h6 { font-size: 1.0em; 
	margin : 0;
  	padding : 0;}
p { font-size: 1.1em; margin : 0; padding : 0; }

.plusfin { font-weight: normal;  }

.commeh5 { font-size: 1.1em; 
	font-weight: bold;
	margin : 0;
  	padding : 0; }

.commeh4 { font-size: 1.3em; 
	font-weight: bold;
	margin : 0;
  	padding : 0;}

.commeh3 {font-size: 1.5em;
	font-weight: bold;
	margin : 0;
  	padding : 0;
	}
.haudio { font-size: 1.3em; 
	font-weight: bold; 
	text-align: center;
	margin : 0;
  	padding : 0;
	}
.italique {font-style: italic ;}

	
.centre { text-align: center;
	margin : 0;
  	padding : 0;
	}

ul.un { list-style-image: url(../images/etoile2.png); line-height: 25px ; text-indent: 6px ; font-size: 1.1em; }

ul.deux  { list-style-image: url(../images/etoile.png); line-height: 20px ; text-indent: 3px}




/* La colonne de gauche du menu */
div#menu {position:absolute; top: 23px ; left: 0px; width: 150px; }
	
	#titremenu { position: absolute; 
	top: 0px;
	left: 0px;
	width: 150px;
	height: 50px ;


font-size: 16px; color: #FC8A32;  text-align: center ;
	}
	

div#navigcie { position:absolute; top: 173px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigcie a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 5px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}




	div#navigbulb { position:absolute; top: 53px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigbulb a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 5px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navigbulb a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navigbulb a img {height: 0; width: 0; border-width: 0;}
			div#navigbulb a:hover img {position: absolute; top: 270px; left: 16px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planetebulb { position:absolute; top: 303px ; left: 15px; width: 140px; }


	div#navigprinc { position:absolute; top: 63px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigprinc a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 5px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navigprinc a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navigprinc a img {height: 0; width: 0; border-width: 0;}
			div#navigprinc a:hover img {position: absolute; top: 293px; left: -1px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planeteprinc { position:absolute; top: 293px ; left: 15px; width: 140px; }
	
	
	
	
		div#navigcaravane { position:absolute; top: 63px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigcaravane a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 5px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navigcaravane a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navigcaravane a img {height: 0; width: 0; border-width: 0;}
			div#navigcaravane a:hover img {position: absolute; top: 283px; left: 1px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planetecaravane { position:absolute; top: 283px ; left: 15px; width: 140px; }

	
	
	
	
	
		div#navigclaude { position:absolute; top: 63px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigclaude a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 5px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navigclaude a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navigclaude a img {height: 0; width: 0; border-width: 0;}
			div#navigclaude a:hover img {position: absolute; top: 278px; left: 37px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planeteclaude { position:absolute; top: 293px ; left: 0px; }


	div#navighist { position:absolute; top: 83px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navighist a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 3px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navighist a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navighist a img {height: 0; width: 0; border-width: 0;}
			div#navighist a:hover img {position: absolute; top: 293px; left: -1px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planetehist { position:absolute; top: 313px ; left: 15px; width: 140px; }



	div#navigpetite { position:absolute; top: 50px ; left: 15px; width: 140px; z-index: 4 ;}
		div#navigpetite a {display: block; background: url(../images/menugauche.gif) no-repeat 0 0 ; text-indent: 12px ; font: bold 13px sans-serif; 
 		  padding: 3px 10px; margin: 0 0 10px;  
 		  text-decoration: none; color: white ;  border: none ;}
		div#navigpetite a:hover {background: url(../images/menugauche.gif) no-repeat -150px 0px ; color: #FC8A32 ;  border: none ;}
			div#navigpetite a img {height: 0; width: 0; border-width: 0;}
			div#navigpetite a:hover img {position: absolute; top: 264px; left: -1px; height: 119px; width: 118px; _width: 0px ; _height : 0px ;}

	div#planetepetite { position:absolute; top: 230px ; left: 15px; width: 140px; }





/* invisible */

#boiteinvisible { left: -1000px;
		height: 0px;
		width: 0px ;
		}




/* styles mise en page */


	/* Page d'accueil des spectacles, coupées en deux */

	#textepagespectacle {
	position:absolute;
	left:10px;
	top:35px;
	width:580px;
	overflow: auto; 
	text-align: justify ;
		}
	
	#textepagespectacle img	
	 {
	float: right;
	padding-left: 25px ;
		padding-top: 35px ;
	}


	#textepagespectacle div	
	 {
	float: right;
	padding-left: 15px ;
	}
	
	
	/* pour une page comme celle de la liste de liens */
	#corpsdepagetotale {
	position:absolute;
	left:20px;
	top:25px;
	width:800px;
	height:530px;
	padding-left: 0px;
	padding-top: 0px;
	overflow: auto; 
	}

	
/* pour les pages de la cie avec logo a gauche...*/
#logogauche { position:absolute;
	width: 200px;
	left:80px;
	top:45px;
		}

#droitedelogo { position:absolute;
	width: 440px;
	left:320px;
	top:45px;
	z-index:2 ;
		}
		
	
/* pour les pages des gens avec phoo a gauche...*/
#gensgauche { position:absolute;
	width: 250px;
	left:0px;
	top:45px;
		}
		
#gensdroite { position:absolute;
	width: 340px;
	left:250px;
	top:5px;
	text-align: justify ;
		}

#gensgaucheirene { position:absolute;
	width: 300px;
	left:20px;
	top:85px;
		}

#gensdroiteirene { position:absolute;
	width: 530px;
	left:240px;
	top:25px;
	text-align: justify ;
		}


/* Pour les pages qui presentent les spectacles */

#pageaucentre { position:absolute;
	width: 840px;
	left:0px;
	top:45px;
	text-align: center;
		}

div.corpsdepage {
	position:absolute;
	left:160px;
	top:25px;
	width:660px;
	height:530px;
	padding-left: 0px;
	padding-top: 0px;
	overflow: auto; 
}




div.pagespectacle  {
	overflow: auto; 
}

div.pagespectacle img { float:left; margin: 10px }

#pagedetexte { position:absolute;
	top:40px;
	width:600px;
	left:20px; }


div#titredepage { position:absolute;
	left:35px;
	top:0px ;
	font-size: 1.5em; 
	font-weight: bold;
	}

div#soustitredepage { position:absolute;
	left:45px;
	font-size: 1.3em; 
	font-weight: bold;
	}

div.titre1 { position:absolute; left:79px; top:61px; width:479px; height:35px; }

div.block1 { position:absolute; left:130px; top:80px; width:390px; height:239px; }

div.tableautitre {
	position:absolute;
	left:2px;
	top:20px;
	width:635px;
	height:114px;
	padding: 5px;
	border-top: 1px solid #242424;
	border-left: 1px solid #242424;
	border-right: 1px solid #242424;
} 

div.tableaucorps {position:absolute; left:2px; top:122px; width:645px; height:340px;
overflow: auto; 
border-left: 1px solid #242424; border-right: 1px solid #242424; border-bottom: 1px solid #242424; }

.datesbulbille { color : red ;}
.datesprincesse { color : blue ;}
.datespetite { color : green ;}
.dateshistoire { color : yellow ;}
.datesclaude { color : #D900F1 ;}
.datescaravane { color : #FF6F00 ;}

div.titreinstrument {position:absolute; left:40px; top:36px; width:319px; height:43px;
	 padding-left: 10px ; padding-top: 5px ;
	 border-top: 1px solid #242424; border-left: 1px solid #242424; border-right: 1px solid #242424; 
	 font-size: 1.3em; 	font-weight: bold; }

div.texteinstrument {
	position:absolute;
	left:40px;
	top:80px;
	width:309px;
	height:120px;
	border-left: 1px solid #242424;
	border-right: 1px solid #242424;
	border-bottom: 1px solid #242424;
	overflow: auto;
	padding: 10px;
	text-align: justify;
} 
	
div.titredansspect	 {position:absolute; left:285px; top:260px; width:290px; height:39px;
	padding-left: 10px ; padding-top: 5px ; 
	border-top: 1px solid #242424; border-left: 1px solid #242424; border-right: 1px solid #242424;
	font-size: 1.3em; font-weight: bold; }
	
div.textedansspect  {position:absolute; left:285px; top:304px; width:280px; height:100px;
	border-left: 1px solid #242424 ; border-right: 1px solid #242424 ; border-bottom: 1px solid #242424 ;
	overflow: auto; padding: 10px;  text-align: justify; }
	
div.extrait {
	position:absolute;
	left:60px;
	top:281px;
	width:201px;
	height:120px;
	border: 1px solid #242424;  padding-top: 5px;
}
	
div.liensinstruments {
	position:absolute;
	left:19px;
	top:426px;
	width:540px;
	height: 68px;
	
}

div.bullemusic {
	position:absolute; left:400px; top:47px; }



#textegauche {
	position:absolute;
	left:10px;
	top:40px;
	width:260px;
	height:250px;
	border-left: 1px solid #D4D0C8;
	border-right: 1px solid #D4D0C8;
	border-bottom: 1px solid #D4D0C8;
	border-top: 1px solid #D4D0C8;
	overflow: auto;
	padding: 10px;
	text-align: justify;
} 

#imagedroite {
	position:absolute;
	left:315px;
	top:60px;
} 


#juke-box {
	position:absolute;
	left:365px;
	top:0px;
} 

#photomus {
	position:absolute; left:380px; top:25px; width:220px; height:220px; z-index:38
} 


/* VIDEO */

#video { position:absolute;
	left:180px;
	top:400px;
	width:400px;
	height:300px;
	}


#telechargervideo 
{ position:absolute;
	left:440px;
	top:130px;

	}


/* le cadre tout autour de la page : */


#cadrebas {
	background-image: url(../images/cadrebas.gif);
	background-repeat: repeat-x;
	position: fixed;
	bottom: 0;
	left: 100%;
	width: 100%; _width: 0px ;
	height: 16px; _height : 0px ;
	margin-left: -100%;
	z-index: 10;
}

#cadrehaut {
	background-image: url(../images/cadrehaut.gif);
	background-repeat: repeat-x;
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%; _width: 0px ;
	height: 16px; _height : 0px ;
	margin-left: -100%;
	z-index: 10;
}

#cadregauche {
	background-image: url(../images/cadregauche.gif);
	background-repeat: repeat-y;
	position: fixed;
	top: 0;
	left: 0;
	width: 16px; _width: 0px ;
	height: 100%; _height : 0px ;
	margin: 0;
	z-index: 9;
}

#cadredroit {
	background-image: url(../images/cadredroit.gif);
	background-repeat: repeat-y;
	position: fixed;
	top: 0;
	right: 0;
	width: 16px; _width: 0px ;
	height: 100%; _height : 0px ;
	margin: 0;
	z-index: 9;
}