/*______________________________________________________________________________
Cette feuille de style contient les styles :
1. Elements communs ŕ toutes les pages (propriétés, conteneur global, entęte)
2. Page d'accueil (Menu principal, pratique et zone "ŕ noter")
3. Contenu (Menu principal, pratique et mise en forme du texte)
4. Pied de page
5. Galerie photo (Vignettes et grandes photos)
6. Calendrier
7. Politique
______________________________________________________________________________*/

/*______________________________________________________________________________

POUR VERIFIER LES EVENTUELS PBS DE MISE EN PAGE : VISUALISATION DU DECOUPAGE 
______________________________________________________________________________
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid red}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
*/

/*______________________________________________________________________________

      1. ELEMENTS COMMUNS
______________________________________________________________________________*/

/* __________________________ 1.1 Propriétés de la page __________________________ */
body {
	/* Dimensions et position */
	/* Marges */
	margin: 10px 0;
	padding: 0;
	/* Polices */
	text-align: center;
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* Décoration */
	background: #fff ;
}

img{
	/* Dimensions et position */
	display: block; /* Résout un bug d'affichage dans IE */
	/* Marges */
	/* Polices */
	/* Décoration */
}

/* __________________________ 1.2 Conteneur global __________________________ */
div#conteneur {
	/* Dimensions et position */
	width: 742px ;
	/* Marges */
	margin: 0 auto ;
	/* Polices */
	text-align: left ;
	/* Décoration */
	border: 1px solid #FF8C00 ;
}

/* __________________________ 1.3 Entęte de page __________________________ */		

/* _____ Image de fond______ */
div#header {
	/* Dimensions et position */
	height: 102px ;
	/* Marges */
	margin: 0 ;
	/* Polices */
	/* Décoration */
	background: url(../images/commun/header.jpg) no-repeat right top ;
}
	
/* _____ Lien vers la page d'accueil _____ */	
div#header a {
	/* Dimensions et position 
	width: 300px ;
	height: 70px ;
	display: block ;
	position: relative ;*/
	/* Marges */
	left: 10px ;
	top: 10px ;
	/* Polices */
	/* Décoration */
}

div#header a img{
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	border: 0;
}

/* _____ Titre du site (invisible) _____ */
div#header a span {
	/* Dimensions et position */
	display: none ;
	/* Marges */
	/* Polices */
	/* Décoration */
}

/*______________________________________________________________________________

     2. PAGE D'ACCUEIL
______________________________________________________________________________*/	


/* __________________________ 2.1 Menu principal de la page d'accueil __________________________ */

/* _____ Bloc Menu______ */
ul#menu_index {
	/* Dimensions et position */
	float: left;
	width: 548px;
	height: 137px ;
	/* Marges */
	margin: 0;
	padding: 0;
	/* Polices */
	background: url(../images/index/menu.gif) top left no-repeat;
	/* Décoration */
	list-style: none;
}

/* _____ Alignement de l'item de menu _____ */		
ul#menu_index li {
	/* Dimensions et position */
	float: left ;
	/* Marges */
	margin: 0;
	padding: 0;
	/* Polices */
	text-align: center ;
	/* Décoration */
}

/* _____ Texte du menu _____ */
ul#menu_index li a {
	/* Dimensions et position */
	width: 107px ;
	height: 137px;
	display: block ;
	/* Marges */
	margin: 0;
	padding: 0;
	/* Polices */
	text-indent: -9999px;
	/* Décoration */
	text-decoration: none;
}

/* _____ Texte du menu _____ */
ul#menu_index li a:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background: url(../images/index/menuover.gif);
}

ul#menu_index li a#menu1:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background-position: 0 0%;
}

ul#menu_index li a#menu2:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background-position: -107px 0%;
}

ul#menu_index li a#menu3:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background-position: -214px 0%;
}

ul#menu_index li a#menu4:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background-position: -321px 0%;
}

ul#menu_index li a#menu5:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	background-position: -428px 0%;
}

/* __________________________ 2.2 Menu pratique de la page d'accueil __________________________ */	

/* _____ Bloc Menu _____ */
ul#menu_pratique_index {
	/* Dimensions et position */
	height: 21px;
	/* Marges */
	margin: 0 ;
	padding: 0 15px 0 0;
	/* Polices */
	/* Décoration */
	list-style-type: none ;
	background: url(../images/commun/fd_menu_pratique.gif) top left no-repeat;
}

/* _____ Alignement de l'item de menu _____ */		
ul#menu_pratique_index li {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	text-align: right ;
	/* Décoration */
}

/* _____ Texte du menu _____ */
ul#menu_pratique_index li a {
	/* Dimensions et position */
	width: 30px ;
	display: block ;
	/* Marges */
	/* Polices */
	line-height: 1.9em;
	font-size: 0.8em ;
	font-style: italic;
	color: #FFF ;
	text-decoration: none ;
	/* Décoration */
}

/* _____ Au rollover _____ */
ul#menu_pratique_index li a:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #630 ;
	/* Décoration */
}

/* __________________________ 2.3 Zone A noter (prochains spectacles) __________________________ */		

div#a_noter {
	/* Dimensions et position */
	float: left;
	width: 188px;
	/* Marges */
	margin: 0;
	padding: 3px;
	/* Polices */
	font-size: 0.85em;
	/* Décoration */
	background: #F90;
}

/* _____ Titre "ŕ noter" _____ */
a_noter {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	/* Décoration */
}

/* _____ Italique _____ */
em {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	font-size: 1em;
	/* Décoration */
}

/*______________________________________________________________________________

     3. CONTENU
______________________________________________________________________________*/	

/* __________________________ 3.1 Menu principal __________________________ */	

/* _____ Bloc Menu _____ */
ul#menu {
	/* Dimensions et position */
	height: 26px ;
	/* Marges */
	margin: 0 ;
	padding: 0 ;
	/* Polices */
	/* Décoration */
	background: #FF9900 ;
	list-style-type: none ;
}

/* _____ Alignement de l'item de menu _____ */		
ul#menu li {
	/* Dimensions et position */
	float: left ;
	/* Marges */
	/* Polices */
	text-align: center ;
	/* Décoration */
}

/* _____ Texte du menu _____ */
ul#menu li a {
	/* Dimensions et position */
	width: 121.5px ;
	display: block ;
	/* Marges */
	/* Polices */
	line-height: 26px ;
	font-size: 1em ;
	font-weight: bold ;
	font-style: italic;
	letter-spacing: 2px ;
	color: #630 ;
	text-decoration: none ;
	/* Décoration */
	border-right: 2px solid #FFF9AE ;
}

/* _____ Au rollover _____ */
ul#menu li a:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #FFF ;
	/* Décoration */
	background: #663300;
}


/* __________________________ 3.2 Menu pratique __________________________ */	

/* ______ Bloc Menu ______ */
ul#menu_pratique {
	/* Dimensions et position */
	height: 27px ;
	/* Marges */
	margin: 0 ;
	padding: 0 15px 0 0;
	/* Polices */
	/* Décoration */
	list-style-type: none ;
	background: url(../images/commun/fd_menu_pratique.gif) top right no-repeat;
}

/* ______ Alignement de l'item de menu ______ */		
ul#menu_pratique li {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	text-align: right ;
	/* Décoration */
}

/* ______ Texte du menu ______ */
ul#menu_pratique li a {
	/* Dimensions et position */
	display: block ;
	width: 30px;
	/* Marges */
	/* Polices */
	line-height: 2em ;
	font-size: 0.8em ;
	font-style: italic;
	color: #FFF ;
	text-decoration: none ;
	/* Décoration */
}

/* ______ Au rollover ______ */
ul#menu_pratique li a:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #630 ;
	/* Décoration */
}

/* __________________________ 3.3 Contenu et mise en forme du texte __________________________ */

/* ______ Bloc Contenu ______ */
div#contenu {
	/* Dimensions et position */
	/* Marges */
	padding: 0 40px 0 80px ;
	/* Polices */
	/* Décoration */
}

/* ______ Sous menu ______ */
ul#sousmenu {
	/* Dimensions et position */
	/* Marges */
	margin: 0 0 0 7em;
	padding: 2px 2px 2px 10px;
	/* Polices */
	/* Décoration */
	list-style-type: none;
	list-style-position: inside;
	border-left: 3px solid #FFA940;
}

ul#sousmenu li {
	/* Dimensions et position */
	/* Marges */
	padding-left: 20px;
	/* Polices */
	line-height: 1.5em;
	/* Décoration */
	background: url(../images/contenu/puce_soustitre.gif) bottom left no-repeat;
}

/* ______ Titre de la rubrique ______ */
div#contenu h1 {
	/* Dimensions et position */
	/* Marges */
	padding-left: 25px ;
	/* Polices */
	line-height: 25px ;
	font-size: 1.4em ;
	color: #630 ;
	font-style: italic;
	font-weight:bold;
	/* Décoration */
	background: url(../images/contenu/puce_titre.gif) no-repeat left bottom ;
	border-bottom: 1px solid #630 ;
}

/* ______ Sous-titre de la rubrique ______ */
div#contenu h2 {
	/* Dimensions et position */
	/* Marges */
	margin-left: 10px ;
	padding-left: 25px ;
	/* Polices */
	font-size: 1.2em ;
	color: #FFA940 ;
	/* Décoration */
	background: url(../images/contenu/puce_soustitre.gif) no-repeat left bottom ;
}

/* ______ Sous-titre de la rubrique ______ */
div#contenu h3 {
	/* Dimensions et position */
	/* Marges */
	margin-left: 50px ;
	/* Polices */
	font-size: 0.9em ;
	color: #630 ;
	/* Décoration */
	border-bottom: 1px solid #630;
}

/* ______ Sous-titre de la rubrique ______ */
div#contenu h4 {
	/* Dimensions et position */
	/* Marges */
	margin-left: 70px ;
	padding-left: 10px;
	/* Polices */
	font-size: 0.9em ;
	color: #630 ;
	/* Décoration */
	border-left: 3px solid #630;
}

/* ______ Paragraphe ______ */
div#contenu p {
	/* Dimensions et position */
	width: 100% ;
	/* Marges */
	/* Polices */
	text-indent: 2em ;
	line-height: 1.7em ;
	/* Décoration */
}

/* ______ Picto fichier pdf ______ */
div#contenu p img.picto {
	/* Dimensions et position */
	float: none;
	width: 16px;
	height: 17px;
	display: inline;
	/* Marges */
	margin: 0 5px 0 0;
	/* Polices */
	/* Décoration */
	border: 0;
}

/* ______ Texte plus petit ______ */
pluspetit {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	font-style: italic;
	font-size: smaller;
	/* Décoration */
}

/* ______ Lien ______ */
div#contenu a {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #F90 ;
	/* Décoration */
}

/* ______ Lien au rollover ______ */
div#contenu a:hover {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #630 ;
	/* Décoration */
}

/* ______ Bouton Haut de page _______ */
haut {
	/* Dimensions et position */
	width: 100%;
	/* Marges */
	margin: 10px 0 10px 0;
	/* Polices */
	font-size: 0.85em;
	font-weight: bold;
	text-align: right;
	/* Décoration */
	border-bottom: 1px dotted #666;
}

haut a {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	/* Décoration */
	text-decoration: none;
}

/* ______ Legende ______ */
div#contenu img {
	/* Dimensions et position */
	width: 150px ;
	height: 132px ;
	float: right ;
	/* Marges */
	margin-left: 10px;
	/* Polices */
	/* Décoration */
}

/*______________________________________________________________________________

     4. PIED DE PAGE
______________________________________________________________________________*/		

/* __________ Bloc pied-de-page __________ */
div#footer {
	/* Dimensions et position */
	clear:both;
	height: 25px;
	/* Marges */
	padding-top: 5px;
	padding-left: 10px ;
	/* Polices */
	color: #FFF000 ;
	font-size: 0.75em ;
	/* Décoration */
	background: #000;
}

/* __________ Lien __________ */
div#footer a {
	/* Dimensions et position */
	/* Marges */
	/* Polices */
	color: #FFF000 ;
	/* Décoration */
	text-decoration: none;
}

/* __________ Image __________ */
div#footer a img{
	/* Dimensions et position */
	display: inline;
	/* Marges */
	/* Polices */
	/* Décoration */
	vertical-align: middle;
}

/*______________________________________________________________________________

      5. GALERIES PHOTOS
______________________________________________________________________________*/

/* __________________________ 5.1 Vignettes __________________________ */
#galerie {
	/* ___Dimensions et positionnement */
	width:100%;
	/* ___Marges */
	/* ___Texte */
	text-align: center;
	color: #000;
	font-size: 0.85em;
	/* ___Décoration */
}

ul#galerie_mini {
	/* ___Dimensions et positionnement */
	/* ___Marges */
	/* ___Texte */
	/* ___Décoration */
	list-style-type: none ;
}

ul#galerie_mini li {
	/* ___Dimensions et positionnement */
	width: 120px ;
	float: left ;
	/* ___Marges */
	margin: 5px;
	/* ___Texte */
	/* ___Décoration */
}

ul#galerie_mini li span {
	/* ___Dimensions et positionnement */
	/* ___Marges */
	margin-bottom: 15px;
	/* ___Texte */
	text-align: center;
	color: #ccc;
	font-size: 0.8em;
	/* ___Décoration */
}

ul#galerie_mini li a img {
	/* ___Dimensions et positionnement */
	width: 120px ;
	height: 90px ;
	/* ___Marges */
	padding: 3px ;
	/* ___Texte */
	/* ___Décoration */
	border: 1px solid #F90 ;
}

/* __________________________ 5.2 Grande photo __________________________ */
dl#photo {
	/* ___Dimensions et positionnement */
	clear: both ;
	/* ___Marges */ 
	/* ___Texte */
	/* ___Décoration */ 
}

dl#photo dt {
	/* ___Dimensions et positionnement */
	clear: both ;
	/* ___Marges */
	margin: 5px;
	/* ___Texte */
	/* ___Décoration */
	
}

dl#photo dd {
	/* ___Dimensions et positionnement */
	/* ___Marges */
	/* ___Texte */
	/* ___Décoration */
}

dl#photo img {
	/* ___Dimensions et positionnement */
	float: none;
	width: 400px ;
	height: 300px;
	/* ___Marges */
	margin: 0 auto;
	padding: 4px;
	/* ___Texte */
	/* ___Décoration */
	border: 1px solid #F90;
}

/*______________________________________________________________________________

      6. CALENDRIER
______________________________________________________________________________*/

/* __________________________ 6.1 Bloc __________________________ */
dl.event {
	/* ___Dimensions et positionnement */
	/* ___Marges */
	margin: 0 0 0 8em;
	padding: 0;
	/* ___Texte */
	/* ___Décoration */
}

/* __________________________ 6.2 Titre __________________________ */
event dt {
	/* ___Dimensions et positionnement */
	position: relative;
	width: 6em;
	/* ___Marges */
	/* ___Texte */
	font-weight: bold;
	text-align: center;
	font-family: georgia, times, serif;
	font-size: 1.1em;
	color: #630;
	/* ___Décoration */
}

/* __________________________ 6.3 Texte __________________________ */
event dd {
	/* ___Dimensions et positionnement */
	/* ___Marges */
	margin: 0 0 0 9em;
	padding: 0 0 .5em .5em;
	/* ___Texte */
	/* ___Décoration */
	border-left: 1px solid #F90;
}

/*__________________________________________________________________________________________________________________________

      7. POLITIQUE
__________________________________________________________________________________________________________________________*/	

/* __________________________ 7.1 Code __________________________ */
kbd {
	/* ___Dimensions et positionnement */
	width: auto;
	display: inline;
	/* ___Marges */
	padding: 0px 2px 0px 2px;
	/* ___Texte */
	font-size : 1.1em;
	line-height: 1.5em;
	/* ___Décoration */
	border: 1px solid gray;
}

/* __________________________ 7.2 boutons raccourcis __________________________ */
#conteneur #contenu ul li.btn_raccourcis img{
	/* ___Dimensions et positionnement */
	width: 33px;
	display: inline;
	float: none;
	height: 34px;
	/* ___Marges */
	margin: 0;
	padding: 2px;
	/* ___Texte */
	/* ___Décoration */
	vertical-align: middle;
}

/* __________________________ 7.3 Liste ŕ puces __________________________ */
liste_pol{
	/* ___Dimensions et positionnement */
	/* ___Marges */
	margin: 0 0 0 9em;
	padding: 0;
	/* ___Texte */
	/* ___Décoration */
	list-style: square;
	list-style-position: inside;
}