body {
font-family: Verdana,Arial,  Helvetica, sans-serif;
font-size: 10px;
width:700px;
height:600px;
margin:auto;
}

#page {  margin-left: auto; margin-right: auto; width:640px; background-color:#FFFFFF;	}

/*<!-- ******************* les menus ****************************** -->*/

#logo1{ height: 64px; }

li{ display:inline; vertical-align:middle; padding-left:60px; padding-top:0px; }

#bandeau{ width:100%; height: 75px; }

#tabnav{ width:100%; float:left; height: 20px; }

#logo2{}

a { text-decoration : none; color : #000000; font-weight:bold; }
a :hover{  color : #86377f; }

a.menu { color : #000; }
a.menu:hover { color : #86377f; text-decoration : underline; }


a.liens { color : #000; text-decoration : underline;  font-weight: bold; font-size:11px; }
a.liens:hover {  color : #86377f; }

a.rsi { 
color: #000000;
text-align: center;
vertical-align: middle;
text-decoration: none;
}

.labilletterie{  
text-align: center;
vertical-align: top;
font-weight: bold;
}

/*<!-- ********************** la partie du milieu ********************************* -->*/

#contenu {  border:3px solid #86377f; }

.contenu_gauche { float:left; width:55%; padding-left:0px; }
.contenu_droit 	{ float:right; width:40%; vertical-align: top; margin-right: 0px; }

img 	{ border : none; }

a.image  { 
background-color:transparent;
border-width:0;
} 

/*<!-- ********************** Elements pour toutes les pages ********************************* -->*/			

.vide_image{  height: 20px;   width: 35px;  float:left;  }

.titre_image{ height: 20px; width: 35px; float:left; }

.titre_texte {
float:left ;
font-weight: bold;
font-size:10px;
color: #86377f;
text-transform:uppercase;
width:85%;
}

.texte_image{
float:left;
height: 30px;
width: 35px;
float:left;
}

.texte_texte {
float:left ;
text-align: left;
width:85%;
}

.texte_attention {
float:left;
text-align: left;
width:70%;
color: #FF0000;
}

.clear{
clear:both;
}

.clear_espace{
clear:both;
height: 20px;
}

.image{
border:0;
}

/*<!-- ********************** page accueil ********************************* -->*/	

.div_intro { float:left; width:100%; }
.div_selection{ float:left; width:100%; }

/*<!-- ********************** page identification ou premiere visite ********************************* -->*/			

.div_choix { float:left; width:100%; }

.div_choix_detail { float:left; width:100%; }

#Layer7    { position: relative; z-index: 3; top: 29px; left: 45px; width: 200px; height: 42px; visibility: visible }
#visuel1   { position: relative; z-index: 3; top: 30px; left: 5px; width: 81px; height: 113px; visibility: visible }
#visuel2   { position: relative; z-index: 4; top: -30px; left: 110px; width: 81px; height: 113px; visibility: visible }
#visuel3   { position: relative; z-index: 5; top: -50px; left: 200px; width: 81px; height: 113px; visibility: visible }
#t1   {  z-index: 9; top: 100px;margin-left: auto; margin-right: auto; visibility: visible }
#t2   {  z-index: 10; top:40px;margin-left: auto; margin-right: auto; visibility: hidden }
#t3   { z-index: 11; top: -70px; margin-left: auto; margin-right: auto; visibility: hidden ;}

.validation { width:50%; margin-left: auto; margin-right: auto; }

.annuler { float:left; }
.valider { float:right;}

.div_identification { float:left; text-align:left; }

.over_types { float:left; overflow: scroll; width:350px; height:150px; }
.over_spectacles { float:left; overflow: scroll; width:350px; height:150px; }

/*<!-- ********************** detail sepctacle et representations disponibles ********************************* -->*/

.over_detail  	{ float:left; overflow: scroll; width:350px; height:150px; }
.over_representations  { overflow: scroll; width:400px; height:150px; }

/*<!-- ********************** Selection de places ********************************* -->*/

.div_selectionplaces { float:left; text-align:left; width:100%; }
.div_selectionplacestitres	{  float:left; width:30%; text-align:left; }
.div_prixtotal	{ float:left; width:100%; text-align:right; }

#calqueinvisible {  position: absolute; top: 226px; left: 40px; width: 308px; height: 62px; visibility: hidden; }


/*<!-- ********************** recapitulatif places ********************************* -->*/
.contenu_gaucherecap 	{float:left;	width:20%; height:500px; padding-left:40px}
.contenu_droitrecap 	{float:right;	width:70%; vertical-align: top; margin-right: 10px; }
.recap_liste {width:100%;  border-style:double}
.recap_texte        		{ color: #000006; text-align: left;vertical-align: top;}
.recap_montant      	{  color: #000006; text-align: right;vertical-align: top; }
.explications     		{  color: #000006; text-align: left;vertical-align: top;}


/*<!-- ********************** inscription ********************************* -->*/
#formRecap  {  	width: 100%;}
#formRecap p {	margin: 2px 0;}

/* fieldset , legend */

#formRecap fieldset {	margin-bottom: 5px;	border: #CCC 1px solid;}

fieldset .code_envoi {	display: block;}

/* Label */
#formRecap label
{
	display: block;
	width: 30%;
	float: left;
	padding-right: 1%;
	text-align: left;
	letter-spacing: 1px;
}

#formRecap label:hover { 	font-weight: bold; }

/* Input */

.inscrip, #formRecap select { 	margin-left: 1%; 	width: 58%; 	border: #CCC 1px solid;}

.date { 	margin-left: 1%; 	width: 10%;	border: #CCC 1px solid;}


.input_cp { 	margin-left: 1%; width: 20%; 	border: #CCC 1px solid; }

#formRecap input:hover, #formRecap select:hover, #formRecap input:focus, #formRecap select:focus
{
	background-color: #DDEEFF;
}

/*<!-- ********************** log + perdu ********************************* -->*/
legend.coordonnees {color:#555555;}
 label.oblig{ float:left; width:150px ; text-align:left;	 vertical-align:top}
 input.oblig { border:1px solid #555555; 		width:110px;}
 input.oblig { border:1px solid #555555; 		width:110px;}

/*<!-- ********************** conditions generales de vente ********************************* -->*/

.titre_conditions_ventes      		{ font-size: 14px; color: #000006; text-decoration: none; font-weight: bold; text-align:center}
.textec      		{ font-size: 09px; color: #000006; text-align: center;vertical-align: top;font-weight: bold }


/*<!-- ********************** les abonnements ********************************* -->*/

table.choixplace		{float:left }

.contenu_abo 	{float:left;	width:80%; height:500px; padding-left:60px	}

input.quantite 	{ 	border:1px solid #666666; 	color:#666666; 	width:50px; size:8; text-align:left ; }
input.formule 	{ 	border:1px solid #666666; 	color:#666666; 	width:180px; size:8; text-align:left ; }
input.tarif 		{	border:1px solid #666666; 	color:#666666; 	width:50px; size:8; text-align:left ; }


/*<!-- ********************** les places pour les abonnements ********************************* -->*/
select.input_liste {	border:1px solid #666666; 	color:#666666; 	 text-align:left; width:auto }
/*<!-- ********************** la partie basse ********************************* -->*/



#piedpage   {clear:both;position:relative;	text-align:center; padding-top:10px; width:100%; height:40px;}
					/*<!-- les elements RSI -->*/

.tempsrestant  { color: #ff0000; font-size:11px; text-align: justify;text-decoration: none; font-weight:normal} 

.hr 				{color: #CCC; height: 2px; width: 100%; text-align: center }
.billetterie 	{ font-size: 18px; color: #FFFFFF; vertical-align: middle;  text-decoration: none; font-weight: bold}
.texte        		{ font-size: 09px; color: #000006; text-align: left;vertical-align: top;font-weight: bold }
.titre        		{ font-size: 14px; color: #000006; text-decoration: none; font-weight: bold}
.soustitre     	{ font-size: 12px; color: #86377f; font-weight: bold; text-decoration: none; font-style: normal; line-height: 1.2em; }
#ulaire{height: 496px;float:left}