/* Fichiers CSS*/
/* Feuille de style du site d'Olivier Capelle */


/*Elements Globaux*/
body{
	font-family: Verdana, Arial, sans-serif;
	background-color:#cccccc;
	margin: 0;
	padding: 0;
	font-size: 14px;
}
.portrait{
	background-image: url(images/bouclefond.jpg);
	background-attachment:scroll;
	background-repeat:repeat-y;
	font-family: Verdana, Arial, sans-serif;
	margin: 0;
	padding: 0;
}
#Page{
	position: relative;
	width: 1021px;
}
p{
	font-size: 14px;
	font-family: Verdana, Arial, sans-serif;
}
h1, h2, h3 {
	font-size: 20px; 
	font-family: GeosansLight, Arial, Verdana, sans-serif;
}
h1.temps{
	font-size: 20px; 
	color:#609496;
	font-family: Courier, "Courier New", monospace;
}
.bleu-gris{
	color:#609496;
}
a:link, a:visited {
	color:#07007b;
	font-weight: normal;
	text-decoration: none;
}
a:link:hover, a:visited:hover {
	color:#000000;
	font-weight: normal;
}
a.petit {
	font-size:9px;
}
a img{
border: 2px solid #cccccc;	
}
a:hover img{
border: 2px solid #FFFFFF;	
}
.footer{
	position: absolute;
	top: 110px;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
}
.middle {
	text-align:center;
	width: 1021px;
}




/* Page Spectacles*/

#spectacles{
	position: relative;
	left: 120px;
	top: 130px;
	font-size:16px;
}
.texture-fond{
	position: absolute;
	left: 52px;
	top: 140px;
}
.olivier-chant{
	position: absolute;
	left: 450px;
	top: 360px;
}
.texte-chant{
position: absolute;
	left: 630px;
	top: 410px;
}
.texte-spectacles{
position: absolute;
	left: 780px;
	top: 325px;
}




/*Page spectacle Récital*/

#fond-recital{
	position: absolute;
	left: 40px;
	top: 140px;
}

#presentation-recital{
	position: relative;
	left: 95px;
	top: 160px;
	width: 450px;
	text-align: justify;
	font-size: 14px;
}
#recital-le-bijou{
	position: relative;
	left: 95px;
	top:160px;
	width: 600px;
	text-align: justify;
	font-size: 14px;
}
#titre-intégral{
position: relative;
	left: 95px;
	top: 160px;
}
#texte-recital{
	position: relative;
	left: 85px;
	top:160px;
	width: 600px;
	height: 400px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	margin-right: 20px; 
	margin-bottom: 10px;
	text-align: justify;
	font-size: 14px;
}
#piano-recital{
	position: absolute;
	left: 691px;
	top: 111px;
}
#logo-recital{
	position: absolute;
	left: 165px;
	top: 180px;
}
#affiche-recital{
	position: absolute;
	left: 570px;
	top: 230px;
}
#griboullis-recital{
	position: absolute;
	left: 700px;
	top: 480px;
}
#papa-maman-recital{
	position: absolute;
	left: 871px;
	top: 580px;
}
#mozaic{
	float: left;
	padding-right: 30px;
	padding-bottom: 10px;
	border: 1px none #cccccc;
}
img.vignette{
	width: 65px;
	height: 65px; 
}

#cahier-recital{
	position: absolute;
	left: 0px;
	top: 1520px;
}
#partition-recital{
	position: absolute;
	left: 0px;
	top: 960px;
}
#lecteur-recital{
	position: absolute;
	left: 740px;
	top: 1150px;
	font-size:12px;
}	

#date-recital{

	position: absolute;
	left: 740px;
	top: 880px;
	width: 260px;
	height: 220px;
	border: 1px solid #cccccc;
	overflow: auto;
	font-size: 14px;
}



/*Page spectacle Une orange sur un lapiaz*/

#voix{
	position: relative;
	left: 200px;
	top: 120px;
	width: 450px;
	text-align: justify;
	font-size: 14px;
}
#voyageurs{
	position: relative;
	left: 140px;
	top:120px;
	width: 500px;
	height: 350px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	margin-right: 20px; 
	margin-bottom: 250px;
	text-align: justify;
	font-size: 14px;
}

#texture-affiche-lapiaz{
	position: absolute;
	left: 745px;
	top: 130px;
}	

#affiche-lapiaz{
	position: absolute;
	left: 785px;
	top: 170px;
}

#footer-lapiaz{
	position: relative;
	bottom: 0;
}
#rocher-lapiaz{
	position: absolute;
	left: 0px;
	top: 270px;
}
#lecteur-lapiaz{
	position: absolute;
	width: 250px;
	left: 740px;
	top: 450px;
	font-size: 12px; 
}	
#pochette-lapiaz{
vertical-align: middle;
}
#date-lapiaz{
	position: absolute;
	left: 710px;
	top: 1100px;
	width: 260px;
	height: 220px;
	border: 1px solid #cccccc;
	overflow: auto;
}
#video{
	position: absolute;
	left: 700px;
	top: 760px;
	font-size: 14px;
}




/* Spectacle Temps réel - l'araignée*/

#affiche-temps{
	position: absolute;
	left: 685px;
	top: 170px;
}
#presentation-temps{
	position: relative;
	left: 130px;
	top: 180px;
	width: 500px;
	text-align: justify;
	font-size: 14px;
}
#fond-temps{
	position: absolute;
	left: 35px;
	top: 260px;
}
.temps{
position: absolute;
	left: 200px;
	top: 150px;
	text-align: center;
}
#suite-temps{
	position: relative;
	left: 140px;
	top:180px;
	width: 550px;
	height: 500px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	margin-right: 20px; 
	margin-bottom: 450px;
	text-align: justify;
	font-size: 14px;
}
#photo1{
	position: absolute;
	left: 650px;
	top: 550px;
}
#photo2{
	position: absolute;
	left: 750px;
	top: 1000px;
}
#photo3{
	position: absolute;
	left: 10px;
	top: 900px;
}
#images-temps{
	position: absolute;
	left: 825px;
	top: 320px;
}
#musique-temps{
	position: absolute;
	left: 10px;
	top: 720px;
}
#lame{
	position: absolute;
	left: 0px;
	top: 170px;
	width: 200px;
}
#pedale{
	position: absolute;
	left: 963px;
	top: 115px;
}
#poesie-temps{
	position: absolute;
	left: 0px;
	top: 1350px;
}
#percu-rouge{
	position: absolute;
	left: 940px;
	top: 1560px;
}
#lecteur-temps{
	position: absolute;
	width: 250px;
	left: 800px;
	top: 430px;
	font-size: 12px; 
}	
#lecteur-temps2{
	position: absolute;
	left: 740px;
	top: 1150px;
	font-size:12px;
}	
#date-temps{
	position: absolute;
	left: 740px;
	top: 700px;
	width: 260px;
	height: 220px;
	border: 1px solid #cccccc;
	overflow: auto;
}





/* Le bal des pendus*/
#description-bal{
	position: relative;
	left: 10px;
	top: 30px;
	width: 520px;
	text-align: justify;
	font-size: 14px;
}
.center{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#contenu-bal{
	position: relative;
	left: 250px;
	top: 130px;
	width: 500px;
	text-align: center;
	font-size: 14px;
}
.fond-bal{
	position: absolute;
	left: 55px;
	top: 240px;
}
#groupe-bal{
	position: absolute;
	left: 700px;
	top: 260px;
	border: 1px none #cccccc;
}
#rond1{
	position: absolute;
	left: 932px;
	top: 1303px;
	border: 1px none #cccccc;
}
#rond2{
	position: absolute;
	left: 870px;
	top: 145px;
	border: 1px none #cccccc;
}
#rond3{
	position: absolute;
	left: 900px;
	top: 105px;
	border: 1px none #cccccc;
}
#rond4{
	position: absolute;
	left: 80px;
	top: 415px;
	border: 1px none #cccccc;
}
#lecteur-bal{
	position: absolute;
	width: 250px;
	left: 30px;
	top: 730px;
	font-size: 12px; 
}
#date-bal{
	position: absolute;
	left: 800px;
	top: 600px;
	width: 210px;
	height: 320px;
	border: 1px solid #cccccc;
	overflow: auto;
}





/*Pages Ciné concert*/
#titre-cineconcert{
	position: relative;
	left:350px;
	top: 10px;
}

.fond-cine{
	position: absolute;
	left: 45px;
	top: 160px;
}
#projecteur-cine{
	position: absolute;
	left:10px;
	top: 140px;
} 
#contenu-cine {
	position: relative;
	left:250px;
	top: 30px;
	width: 680px;
	text-align: justify;
	font-size: 14px;
}

#participant-cine{
	position: relative;
	left:140px;
	top: 60px;
	width: 460px;
	text-align: justify;
	font-size: 14px;
}
#fond-fauteuils{
	position: absolute;
	left: 620px;
	top: 530px;
}
#film{
	position: absolute;
	left: 655px;
	top: 545px;	
	text-align: justify;
	font-size: 14px;
	margin-bottom: 250px;
}
#dessin-cine{
	position: absolute;
	left: 0px;
	top: 580px;
}
#date-cine{
	position: absolute;
	left: 660px;
	top: 400px;
	width: 290px;
	height: 120px;
	border: 1px solid #cccccc;
	overflow: auto;
	font-size: 12px;
}


/* Page enseignement*/

#fond-pedagogie {
	position: absolute;
	left: 300px;
	top: 150px;
}
#fond-choeur {
	position: absolute;
	left: 120px;
	top: 685px;
}
#montage-alea {
	position: absolute;
	left: 10px;
	top: 150px;
}
#pedagogie {
	position: relative;
	left:370px;
	top: 80px;
	width: 570px;
	text-align: justify;
	font-size: 14px;
}
#lecteur-choeur {
	position: absolute;
	width: 250px;
	left: 30px;
	top: 530px;
	font-size: 12px; 
}
#choeur {
	position: relative;
	left: 190px;
	top: 260px;
	width: 600px;
	height: 300px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	margin-right: 20px; 
	margin-bottom: 10px;
	text-align: justify;
	font-size: 14px;
}
#arimp {
	position: absolute;
	left: 30px;
	top: 740px;
}
#musichall {
	position: absolute;
	left: 10px;
	top: 900px;
}
#choeur-large {
	position: relative;
	left: 100px;
	top: 300px;
}
#dessin-arbre {
	position: absolute;
	left: 853px;
	top: 700px;
}



/* template nouveau spectacle*/
#fond-template{
	position: absolute;
	top: 0px;
	left: 0px;
}
#presentation-new-spectacle{
	position: relative;
	left: 140px;
	top:90px;
	width: 420px;
	height: 550px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	text-align: justify;
	font-size: 14px;
}
#mp3-new-spectacle{
	position: absolute;
	font-size:12px;
}
#grandes-photos{
	position: absolute;
	left: 580px;
	top: 250px;
	width: 300px;
	height: 550px;
	font-size:12px;
	overflow:hidden;
}
#petites-photos{
	position: absolute;
	left: 10px;
	top: 150px;
	height: 700px;
	overflow:hidden;
	font-size:12px;
}
#paroles-new-spectacle{
	position: relative;
	left: 140px;
	top:50px;
	width: 550px;
	height: 300px;  
	overflow: auto; 
	border: 1px solid #cccccc; 
	padding: 10px; 
	background-color: #ffffff; 
	text-align: justify;
	font-size: 14px;
}
#dates-new-spectacle{
position: absolute;
	left: 740px;
	top: 800px;
	width: 300px;
	font-size:12px;
}





/* Page biographie*/

#fond-bio{
	position: absolute;
	left: 10px;
	top: 180px;
}
.dessin{
	position: absolute;
	left: 886px;
	top: 1280px;
}

#parcours {
	position: relative;
	left: 45px;
	top: 120px;
	width: 550px; 
	text-align: justify;
	padding-left: 10px;
	font-size: 14px;
}
.photo1 {
	position : absolute;
	left: 700px;
	width: 160px;
	top: 280px;
	border: 1px solid #cccccc;
}
.bandeau {
	float: left;
	left: 30px;
	right: 30px;
	width: 200px;
	border: 1px none #cccccc;
	padding-right: 30px;
	padding-bottom: 10px;
}
.scotch1{
position : absolute;
	left: 830px;
	width: 60px;
	top: 250px;
	border: 1px none #cccccc;
}
.scotch2{
position : absolute;
	left: 680px;
	width: 60px;
	top: 410px;
	border: 1px none #cccccc;
}
h2 {
position: relative;
left: 50px;
}
#cevegramme{
	position: relative;
	left: 30px;
	top: 80px;
	width: 750px;
	height: 880px;
	overflow: auto;
	text-align: justify;
	padding-right: 10px;
	font-size: 14px;
}
#cevegramme1 {
	position: relative;
	left: 30px;
	top: 80px;
	width: 700px; 
	text-align: justify;
	font-size: 14px;
}

li {
	list-style-type: circle; 
}

#ratamague{
	position: absolute;
	left: 800px;
	top: 600px;
	width: 200px;
	border: 1px solid #cccccc;
	
}
#gang{
	position: absolute;
	left: 810px;
	top: 1000px;
	width: 200px;
	border: 1px solid #cccccc;
}

#impro{
	float: right;
	width: 200px;
	padding-left: 20px;
	border: 1px none #cccccc;
}

/* Livre d'or*/
#titre_livreor{
	position: relative;
	left: 440px;
	top: 20px;
	width:130px;
	height:30px;
	text-align:center;
	font-size:18px;
}

#sous-titre-livreor{
	position: relative;
	left: 420px;
	top: 70px;
	width:230px;
	height:20px;
	font-size:14px;
}

#sous-titre-livreor2{
position: relative;
	left: 390px;
	top: 63px;
	width:260px;
	height:20px;
}

#auteur-livreor{
	position: relative;
	left: 180px;
	top: 120px;
	width:70px;
	height:20px;
	font-size:14px;
}

#input-auteur{
	position: relative;
	left: 270px;
	top: 100px;
	width:510px;
	height:185px;
}

#email_livreor{
	position: relative;
	left: 130px;
	top: -50px;
	width:120px;
	height:20px;
	font-size:14px;
}


#input-email-livreor{
	position: relative;
	left: 270px;
	top: -70px;
	width:260px;
	height:23px;
}

#message-livreor{
	position: relative;
	left: 160px;
	top: -60px;
	width:90px;
	height:20px;
	font-size:14px;
}

#input-message-livreor{
	position: relative;
	left: 270px;
	top: -75px;
	width:260px;
	height:23px;
}

#bouton-livreor{
	position: relative;
	left: 120px;
	top: 30px;
	width:75px;
	height:23px;
}

#retour{
	position: absolute;
	left: -40px;
	top: 280px;
	width:60px;
	height:20px;
}

/* Page collaboration*/
#collaborations{
	position:relative;
	padding-left: 30px;
}
#capharnaum{
	position: absolute;
	width:400px;
	top: 300px;
	left: 600px;
}


/* Revue de presse*/
#revue-presse{
	position: absolute;
	width: 1000px;
}

/* Page contact*/
#titre_contact{
	position: relative;
	left: 450px;
	top: 20px;
	width:70px;
	height:20px;
	text-align:center;
	font-size:18px;
}

#objet{
	position: relative;
	left: 150px;
	top: 80px;
	width:230px;
	height:20px;
	font-size:14px;
}

#input-objet{
position: relative;
	left: 380px;
	top: 63px;
	width:260px;
	height:20px;
}

#message-contact{
	position: relative;
	left: 228px;
	top: 80px;
	width:160px;
	height:20px;
	font-size:14px;
}

#input-message{
	position: relative;
	left: 380px;
	top: 65px;
	width:510px;
	height:185px;
}

#coordonnes{
	position: relative;
	left: 425px;
	top: 120px;
	width:165px;
	height:20px;
	font-size:14px;
}

#nom-contact{
	position: relative;
	left: 325px;
	top: 170px;
	width:50px;
	height:20px;
	font-size:14px;
}

#input-nom-contact{
	position: relative;
	left: 400px;
	top: 150px;
	width:260px;
	height:23px;
}

#prenom-contact{
	position: relative;
	left: 300px;
	top: 165px;
	width:80px;
	height:20px;
	font-size:14px;
}

#input-prenom-contact{
	position: absolute;
	left: 400px;
	top: 643px;
	width:260px;
	height:23px;
}

#email-contact{
	position: absolute;
	left: 318px;
	top: 680px;
	width:60px;
	height:20px;
	font-size:14px;
}

#input-email-contact{
	position: absolute;
	left: 400px;
	top: 680px;
	width:260px;
	height:23px;
}

#bouton-contact{
	position: absolute;
	left: 470px;
	top: 745px;
	width:75px;
	height:23px;
}

#retour{
	position: absolute;
	left: 180px;
	top: 800px;
	width:60px;
	height:20px;
}


/* Pages Mentions légales*/
.mentions{
	position: relative;
	left: 30px;
	}