/* Feuille de style pour le contenu des pages 
 * C'est cette feuille de style qui doit être liée aux pages du site
 * La feuille de style de la charte est appelée depuis cette feuille.
 */
 
/* Import des style pour la charte */
@import "charte.css";

/* styles globaux
*********************/
*{
  margin: 0;
  padding: 0;
  }
a:active, a:focus{
  outline: none;
  }
a img{
  border: none;
  }
.floatleft{
  float: left;
  }
.clearer{
  clear: both;
  }


/* typographie
*********************/
/* typo > headlines
*********************/
#contenu h1.main{
  height: 46px;
  width: 350px;
  position: absolute;
  top: 2px;
  right: 0;
  }
#contenu h2{
  font: bold 14px Arial, Helvetica, sans-serif;
  margin: 20px 0 10px;
  border-bottom: 1px solid #002F69;
  color: #002F69;
  }
#contenu h3{
  font: bold 18px Arial, Helvetica, sans-serif;
  margin: 0 0 5px;
  color: #002F69;
  }

/* typo > blocs
*********************/
#contenu p{
  font: 12px/16px Arial, Helvetica, sans-serif;
  margin: 16px 0 0 0;
  text-align: justify;
  color: #fff;
  }
#contenu ul{
  font: 12px/16px Arial, Helvetica, sans-serif;
  margin: 16px 0 0 20px;
  text-align: justify;
  color: #fff;
  }
#contenu dt{
  font: 12px/16px Arial, Helvetica, sans-serif;
  margin: 8px 0 0;
  text-align: justify;
  color: #fff;
  }
#contenu dd{
  margin: 0 0 0 10px;
  }
  
#contenu .bloc-films .txt01 {font-style:italic; padding:0; margin:5px 0 20px 0; font-weight:normal;}

/* typo > emphases
*********************/
#contenu em{
  font-variant: small-caps;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2em;
  color: #FFE3B7;
  }
#contenu strong{
  font-variant: small-caps;
  font-style: normal;
  text-decoration: underline;
  font-size: 1.2em;
  }
#contenu .small{
  font-size: 0.9em;
  }
#contenu p.couleur, .couleur{
font-weight:bold;
color:#002b67;
}

/* typo > liens
*********************/
#contenu a{
  font-weight: bold;
  text-decoration: underline;
  color: #002b67;
  }
#contenu a:hover{
  color: #fff;
  }
#contenu a.download{
  background: url(../images/charte/down.png) no-repeat 0 2px;
  padding: 0 0 0 12px;
  }
#contenu a.download:hover{
  background-position: 0 4px;
  }

/* tableaux horaires
*********************/
#contenu #legende{
  font: bold 12px/18px Arial, Helvetica, sans-serif;
  color: #FFF;
  text-align: center;
  }
#contenu #legende img{
  margin: 0 5px 0 0;
  }
  
  
#contenu #horaires
{
	font: bold 12px/18px Arial, Helvetica, sans-serif;
	color: #FFF;
	margin: 20px 0;
	border-collapse:collapse;
}

#contenu #horaires *
{
	text-align: center;
}

#contenu #horaires td,#contenu #horaires th
{
	border-bottom: 1px solid #03548B;
}

#contenu #horaires th.titre
{	width:150px;

	border-left: 1px solid #03548B;
	cursor: pointer;
}

#contenu #horaires th.titre:hover
{
	background: #37A4D5;
}
  
#contenu #horaires th.titre h2
{
	font: 15px Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	margin: 0;
	border: none;
	color: #002b67;
}

#contenu #horaires th.titre p
{
	font: 10px Arial, Helvetica, sans-serif;
	margin: 0;
}
  
#contenu #horaires .jour
{
	width:200px;
} 
  
#contenu #horaires .crenau
{
	vertical-align:top;
	padding:2px;
} 
  
#contenu #horaires .couleur1
{
} 
  
#contenu #horaires .couleur2
{
	background-color:#057EB5;
} 

#contenu #horaires .salle1
{
	background: url(../images/charte/salle_1.png);
	height: 25px;
	padding: 0;
	margin:1px;
	border: none;
	color: #A9174A;
	font-size: 11px;
}

#contenu #horaires .salle2
{
	background: url(../images/charte/salle_2.png);
	height: 25px;
	padding: 0;
	margin:1px;
	border: none;
	color: #0E4899;
	font-size: 11px;
}

#contenu #horaires .salle3
{
	background: url(../images/charte/salle_3.png);
	height: 25px;
	padding: 0;
	margin:1px;
	border: none;
	color: #144C16;
	font-size: 11px;
}

/* synopsis
*********************/
#contenu .synopsis{
  display: none;
  width: 440px;
  height: 250px;
  position: absolute;
  padding: 25px 30px;
  overflow: hidden;
  background: url(../images/charte/synopsis_bck.jpg);
  }
#contenu .synopsis .affiche{
  width: 150px;
  float: left;
  }
#contenu .synopsis .affiche img{
  display: block;
  margin: 0 0 3px;
  }
#contenu .synopsis .affiche img.closeSyn{
  cursor: pointer;
  }
#contenu .synopsis h2,
#contenu .synopsis p{
  float: left;
  margin: 0 0 0 20px;
  width: 270px;
  border: none;
  }
#contenu .synopsis p{
  width: 260px;
  height: 200px;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0 10px 0 0;
  }
#contenu .synopsis h2{
  font: 17px Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  color: #002b67;
  border-bottom: 1px solid #002b67;
  margin: 0 0 10px 20px;
  }

/* cinéma 3 casinos
*********************/
#contenu #postit{
  float: right;
  position: relative;
  top: -15px;
  }

/* gardanne action
*********************/
#contenu #acces_prive{
  background: url(../images/charte/acces_pro_bck.png);
  width: 158px;
  height: 78px;
  float: right;
  margin: 16px 0 16px 16px;
  padding: 15px 20px;
  }
#contenu #acces_prive input{
  width: 124px;
  height: 14px;
  border: 1px solid #0596D5;
  padding: 0 3px;
  font: 10px/13px Arial, Helvetica, sans-serif;
  color: #0596d5;
  background: url(../images/charte/programme_input.png);
  vertical-align: middle;
  }
#contenu #acces_prive input.bouton{
  width: auto;
  height: auto;
  border: none;
  background: none;
  }

/* presentation festiv
**********************/
#contenu #invit_festival{
  width: 268px;
  float: right;
  background: url(../images/charte/col_bck.jpg);
  border-bottom: 2px solid #25CDED;
  margin: 0 0 32px 32px; 
  padding: 16px;
  }

/* tarifs
**********************/
#contenu #tarifs_abo{
  background: url(../images/charte/tarifs_bck.png);
  width: 168px;
  height: 128px;
  float: right;
  margin: 16px 0 16px 16px;
  padding: 0 15px;
  }

/* événements
*/
#contenu .semicol{
  width: 320px;
  float: left;
  }
#contenu .even_item
{
  width: 268px;
  background-image:url(../images/charte/col_bck.jpg);
  background-repeat:repeat-x;
  background-color:#0572AB;
  border-bottom: 2px solid #25CDED;
  margin: 0 0 32px 32px; 
  padding: 16px;
  float: left;
  }
#contenu .even_item img{
  display: block;
  }


/* LES INVITES */
.bloc-invites {
	width:800px;
	margin:0 0 0 50px;
	padding-left:10px;
	border-left:1px solid #25CDED;
	}
	
.invite{
	width:550px;
	float:left;
	padding-bottom:30px;
}
#contenu #bloc-invites p {margin: 5px 0 0 0;}
#contenu #bloc-invites h2 {margin:0;}
.bloc-img-invite {float:left; width:160px; height:160px; margin:35px 0 0 30px;}
.bloc-img-invite img {border:1px solid #FFF;}


/* LES RENCONTRES */
.bloc-rencontres {
	width:800px;
	margin:0 0 0 50px;
	padding-left:10px;
	border-left:1px solid #25CDED;
	}
	
.rencontre{
	width:550px;
	float:left;
	padding-bottom:0;
}
#contenu .bloc-rencontres p {margin: 5px 0 0 0;}
#contenu .bloc-rencontres h2 {margin:0;}
.bloc-img-rencontre {float:left; width:90px; height:90px; margin:15px 0 0 30px;}
.bloc-img-rencontre img {border:1px solid #FFF;}


/* LES TARIFS */
.bloc-tarifs {
	width:800px;
	margin:0 0 0 50px;
	padding-left:10px;
	border-left:1px solid #25CDED;
	}
	
.tarif{
	width:550px;
	float:left;
	margin-bottom:30px;
}
#contenu .bloc-tarifs p {margin: 5px 0 0 0;}
#contenu .bloc-tarifs h2 {margin:0;}


/* LES FILMS */
.bloc-films {
	width:400px;
	margin:0 0 0 50px;
	padding-left:10px;
	border-left:1px solid #25CDED;
	float:left;
	}
	
.film{
	width:400px;
	float:left;
	padding-bottom:30px;
}
#contenu .bloc-films p {margin: 5px 0 0 0; padding:0; font-weight:bold;}
#contenu .bloc-films h2 {margin:0;}


/*** ***/

#contenu .en-attendant{
color:#fff;
border:none;
/*padding:40px 0 0 40px;*/
}

/************************* FORMULAIRE INSCRIPTION ************************/

#formulaire input{
	background-color:#FFFFFF;
	border:1px solid #002F69;
	width:300px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #002F69;
	margin-left:5px;
}
#formulaire textarea{
	width:300px;
	background-color:#FFFFFF;
	border:1px solid #002F69;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#002F69;
	height:75px;
	margin-left:5px;
}
#formulaire .boutons{
	padding-left:130px;
}
*html #formulaire .boutons{
	padding-left:133px;
}
#contenu #formulaire .boutons input{
	width:147px;
}
#contenu #formulaire p{
	margin:6px 0;
}
#contenu #formulaire p.comment, #contenu #formulaire p.comment{
	font-style:italic;
	margin:20px 0;
	color:#FFFFFF;
}

#formulaire label{
	width:300px;
	float:left;
}

#contenu p.reglement{
	color:#002F69;
	font-weight:bold;
}
.persone{
  	float:left;
}
#image{
	float:left;
}
.nom{
	float:left;
	width:85%;
	font-size:22px;
	font-weight:200;
	padding-left:20px;
}
.info{
	width:80%;
	padding-left:20px;
	float:left;
}