p.note {
text-align: center;
color: #d4120f;
font-style: italic;
	}

#reserv
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#reserv td, #reserv th 
{
text-align: center;
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#reserv th 
{
font-size:1.1em;
text-align: center;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#reserv tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}


#petit
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
width:50%;
border-collapse:collapse;
}
#petit td
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}


table.page	{
width:960px;
height:800px;
padding:0px;
margin: auto;
}
table.squelette	{
width:980px;
padding:0px;
border:0px;
border-spacing:0;
 border-collapse: collapse;
margin: 0 auto;
text-align:left;
}
td.nospace	{
border-spacing:0;
border:0px;
 border-collapse: collapse;
 padding:0px;
}
.ssdom	{
position: relative;
width:85%;

background-color: #eeeebb;
}
.annu	{
float: left;
width: 50%;
margin: 1em 0;
background-color: #ffffcc;
}
.annu1	{
float: left;
width: 50%;
margin: 1em 0;
background-color: #ffffcc;
}
.just	{
text-align:justify;
}
td.couleur	{
background-color: #FFFFF7;
}
td.couleurmenu	{
background-color: #0155AA;
}
td.couleurssmenu	{
background-color: #518bC5;
}
A.menulink
{
float:left;
display: block;
vertical-align: middle;
padding: 5px;
border: 5px;
text-align: left;
text-decoration: none;
font-family: Verdana,arial;
font-size :9pt; 
color: #FFFFFF;
font-weight: bolder;
}

A.menulink:hover
{

background-color:#8ec7ff;
text-decoration: none;
}
A.menulink2
{
float:left;
display: block;
vertical-align: middle;
padding: 5px;
border: 5px;
text-align: left;
text-decoration: none;
font-weight: bolder;
font-family: Verdana,arial;
font-size :9pt; 
color: #FFFFFF;
background-color:#8ec7ff;
}
A.ssmenulink
{
display: block;
float:left;
position: relative;
left:20px;
padding: 5px;
border: 5px;
text-align: left;
text-decoration: none;
font-family: Verdana,arial;
font-size:9px;
color: #FFFFFF;
}

A.ssmenulink:hover
{
background-color:#8ec7ff;
text-decoration: none;
}

.titre {
font-weight: bold;
font-family: Verdana,arial;
font-size: 1.1em;
}

.titrefest {
font-weight: bold;
text-align: left;
font-family: Verdana,arial;
font-size:12px;
padding:3 px;
margin:5 px;
color:#703030;
/*background-color:#703030;*/
text-transform:uppercase;
border-bottom:2px solid #703030;
width:auto;
height:18px;
}

.date {
font-style: italic;
}
A.dateFilm {
text-decoration: none;
font-weight: bolder;
color: brown;
}
.contact {
font-size:12pt;
}
.titre_assoc {
font-weight: bold;
font-size:12px;
}

.actu {
font-size:0,5em;
}

.titre_page {
font-weight: bold;
font-size:16px;
text-align:center;
}
.titre_rubrik {
font-weight: bold;
font-size:12px;
text-align:center;
}
.erreur {
font-weight: bold;
color:red;
}
.em {
font-weight: bold;
font-size:22px;
}
table.dem {
border-color:#FFFFFF;
}
td.dem {
background:#c07040;
text-align: right;
margin : 5 px;
font-weight: bold;
}
td.dem2 {
background:#e0a060;
margin : 5 px;
}
.fich {
border-width:2px;
border-style:dotted;
width:650px;
}
td.bouton {
text-align: center;
font-weight: bold;
font-size:18px;
background:#ffcc99;
border-style:solid;
border-right-color:#ffeebb;
border-top-color:#ffeebb;
border-left-color:#ddaa77;
border-bottom-color:#ddaa77;
}
td.bouton2 {
text-align: center;
font-weight: bold;
font-size:18px;
background:#72e2da;
border-style:solid;
border-right-color:#ffeebb;
border-top-color:#ffeebb;
border-left-color:#ddaa77;
border-bottom-color:#ddaa77;
}
a.lien {
text-decoration:none;
color:#000000;
}
a.lien:hover {
text-decoration:none;
color:#333333;
}
.bloc	{
display: block;
float:left;
position: relative;
left:400px;
padding: 5px;
border: 5px;
text-align: left;
text-decoration: none;
font-family: Times,serif ;
font-size:10px;
}

.tarif {
display: block;
float: none;
position: relative;
padding: 5px;
margin:5px;
border: 5px;
text-align: left;
text-decoration: none;
font-family: Times,serif ;
font-size: 13px;
background:#c2e2bd;
}

div.poeme {
position:absolute; 
border: 2px solid #CCC7C7;

background: #EEE7E7;
padding:5px;
left:50%; 
top:150px; 
width:380px; 
height:400px; 
z-index:6; 
visibility: hidden; 
overflow:auto;
text-align:center;
}
  .cadre {
background: #EEEEE7;
}

.colonne	{
float:left;
overflow:auto;
position:relative; 
border: 1px solid #CCC7C7;
padding:3px;
margin:2px;
width:100%;
height:230px;
font-size:0.9em;
}
.colonne3	{
float:left;
overflow:auto;
position:relative; 
border: 1px solid #CCC7C7;
padding:3px;
margin:2px;
width:100%;
font-size:0.9em;
}
.colonneprincipale {
}

.colonne2 {
float:left;
width:100%;
margin:0px;
}
.colonne p	{
text-align:left;
}

.datenews   {
text-align: 'justify';
color: #CC3300; 
font-weight: bold; 
font-size:  11px; 
}

.colonned	{
margin:2px;
padding: 8px;
width:50%;
display: block;
float:left;
position: relative;

}
.colonned2	{
margin:2px;
padding: 4px;
width:35%;
display: block;
position: relative;
float:right;
}
.colonnec	{
margin-left: 155px;
margin-right:170px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 155px;
margin-right:170px;
padding: 8px;

}
.colonnedr	{
margin:2px;
padding: 8px;
width:220px;
right:5px;
float: left;
}
.colonneprincipaledroite	{
margin:2px;
padding: 8px;
width:200px;
height:600 px;
right:5px;
float: left;
}
.colonneg	{
margin:5px;
padding: 8px;
left:5px;
width:30%px;
float: left;
}
.colonnect	{
margin:2px;
padding: 8px;
left:5px;
width:220px;
float: left;
}

.colonneAuto	{
margin:2px;
padding: 8px;
right:5px;

float: left;
}

.colonneleft	{
float: left;
width:436px ;
}
.colonneleft2	{
float: left;
width:564px ;
}

.articleIndex	{
margin:2px;
padding: 8px;
right:5px;
margin-left: auto;
margin-right: auto;
float: left;
}

.ligne{
height:350px;
}

div.article {
display:block;
float: left;
width : 250 px;
}

.colonneimg {
margin:2px;
padding: 8px;
background-color:#ffe0a0;
width:210px;
}

.alert {
background-color:#ffe0a0;
width:300px;
padding:3px;
text-align:center;
color:white;
}

a.alert {
color:white;
}

.alert2 {
text-align:left;
border: 1px solid #CCC7C7;
width:300px;
padding:3px;
color:black;
}
.Manif {
margin:2px;
padding: 8px;
width:95%;
display:block;
float: left;
/* background:#ffffc0; */
border : ridge 5px #703030
}

.titremanif {
font-size:  14pt; 
font-family: Times,serif ;
font-weight: bold;
}

.description	{
margin:2px;
padding: 8px;
width:64%;
font-weight: normal;
font-size:  10pt; 
float: left;
text-align:justify;

}
.photo	{
margin:5px;
padding: 8px;
float: left;
width:25%;

}

.ManifR {
margin:2px;
padding: 8px;
width:75%;
display:block;
float: left;
/* background:#ffffc0; */
border : ridge 5px #703030
}

.colonneR {
width:20%;
display:block; 
float: right;
background:#d89d98;
padding:5px;
margin:5 px;
}

.spectacles {
/*float: left; */
}

.titremanifR {
font-size:  14pt; 
font-family: Times,serif ;
font-weight: bold;
}

.descriptionR	{
margin:2px;
padding: 2px;
width:80%;
font-weight: normal;
font-size:  10pt; 
float: left;
text-align:justify;

}
.photoR	{
margin:5px;
padding: 8px;
float: left;
width:80px;

}


#cinema {
margin:2px;
padding: 8px;
width:250 px;
display:block;
float: left;
background:#ffffc0;
border : solid 1px #000;
  text-align:justify;
}

div#cinema img{
  float:left;
  background-color:#fafbfc;
  border:1px solid #b0b0b0;
  margin:0 0 10px 10px;
  padding:5px;
}
hr{
  clear:left;
}


.film	{
margin:2px;
padding: 5px;
width:32%;
font-size:  12pt; 
float: left;
text-align:left;

}
.affiche	{
margin:2px;
padding: 5px;
float: left;
width:258px;

}
.film2	{
margin:2px;
padding: 5px;
width:210px;
font-size:  12pt; 
float: left;
text-align:left;

}
.affiche2	{
margin:2px;
padding: 5px;
float: left;
width:200px;

}

/* Pour le site MAIRIE */

.ficheelu	{
margin:2px;
padding: 8px;
width:30%;
display:block;
float: left;
background:#ffffc0;
border : solid 1px #000

}
.descriptionElu	{
margin:2px;
padding: 8px;
float: left;
text-align:left;
}
.photoElu	{
margin:2px;
padding: 8px;
float: left;
}

p.titrecommission {
font-weight: bold;
font-family: Verdana,arial;
font-size:10px;
}

.fichecommission	{
margin:2px;
padding: 8px;
width:47%;
height:210px;
display:block;
float: left;
background:#ffffc0;
border : solid 1px #000

}
.DescriptionCommission	{
margin:2px;
padding: 8px;
float: left;
text-align:left;
}
.photoCommission	{
margin:2px;
padding: 8px;
float: left;
}

p.legende {
font-size:10px;
text-align:center;
}

.ldm	{
width: 215px;
height :200px;
text-align:center;
padding: 10px;
float: left;
margin-right: 1em;
}

.ldm img	{
border: solid 1px #000;
}

.cadresimple {
border: solid 1px #000;
margin:5px;
padding:5px;
background:#EEEEFF;
}

.cadresimple img {
vertical-align:baseline;
}

.cadresimple a {
text-decoration: none;
color:#000066;
}

.cadresimple a:hover {
text-decoration:none;
color:#0000FF;
background: #DDDDFF;
}

p.small {
font-size:0.7 em;
font-style:italic;
}

/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 08
   � Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propri�t�s background) et les couleurs
   du texte (propri�t� color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie �positionnement�. */

/* G�n�ral */
body {
	background-color: #fff;
	font-family :Times,serif ;
font-size :10pt; 
margin-top:0 px;
}


/* Navigation */
#navigation {
}


/* Bloc central */
#centre {
}

/* Contenu principal */
#principal {
}
#principal a {
}
#principal a:hover, #principal a:focus {
}
#principal strong {
}

/* Contenu secondaire */
#secondaire {
}



/* --- POSITIONNEMENT --- */

/* Page */
body {

}
#global {
	width: 1000px;
	margin: 0 auto; /* -> 3 */
}

/* En-t�te */
#entete {
	padding: 0px;
	margin : 0px ;
	height : 161px;
}
#entete2 {
	padding: 0px;
	margin : 0px ;
	height : 241px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
/*	float: left;*/
}
#entete .sous-titre {
}

/* Menu de navigation */

/* Bloc central */
#centre {
	width: 100%; /* -> 4 */
	overflow: hidden; /* -> 4 */
}

/* Contenu principal */
#principal {
	float: left; /* -> 5 */
	width: 720px;
	padding: 10px 5px;
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
	margin-left: 735px; /* -> 6 */
	margin-right: 20px;
	padding: 10px 5px;
}

/* Mention de copyright */
#copyright {
	margin: 20px 0;
	font-size: .85em;
	text-align: left;
}


/* --- NOTES ---

1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe
	div#principal et div#secondaire uniquement. C'est ce conteneur que l'on
	utilise pour placer une image de fond r�p�t�e en hauteur, qui dessine
	le fond de la 
	
	ne de gauche et de la colonne de droite.
	Ainsi, quelle que soit la colonne la plus longue, on aura bien,
	visuellement, deux colonnes de hauteurs �gales.

2.	On utilise ici des couleurs de fond pour div#principal et div#secondaire.
	Et pourtant, nous avons d�j� une image de fond, sur div#centre, qui
	�dessine� nos deux colonnes. Pourquoi rajouter des couleurs de fond �
	ces blocs, alors? C'est en fait une s�curit�, au cas o�:
	- l'image de fond mettrait du temps � se charger (�a arrive);
	- l'image de fond ne peut pas �tre charg�e (rare, mais �a arrive aussi).
	Ainsi, si ces probl�mes surviennent, le contenu restera lisible. Notamment
	le contenu de div#principal, qui est sombre, tandis que le fond de la page
	est d�j� sombre.
	Notez que dans certains cas ce genre de �s�curit�� sera difficile � mettre
	en place, par exemple parce que la couleur de fond des blocs masquerait
	une image de fond comportant des motifs.
	Mais, plus g�n�ralement, un bon design de site web devrait rester lisible
	m�me si les images sont d�sactiv�es (ce qui est une option de beaucoup
	de navigateurs).

3.	Les marges automatiques � gauche et � droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global � gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global � droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global � droite avec un retrait (� droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

4.	On utilise ces propri�t�s pour emp�cher le d�passement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).
	Le overflow:hidden cr�e un contexte de formatage qui vient contenir les
	flottants. Le width:100% a le m�me r�le, mais uniquement pour Internet
	Explorer 6 (utilisation du HasLayout). Dans l'id�al, on le placera avec
	des correctifs destin�s � IE6 dans une feuille de styles appel�e via un
	commentaire conditionnel.

5.	C'est la propri�t� "float" qui nous permet de placer deux blocs
	c�te-�-c�te. Notez bien que l'�l�ment flottant (ici, notre contenu
	principal) doit �tre plac� en premier dans le code HTML. Il est
	pr�f�rable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 560px;" (mais � cause du padding la largeur r�elle sera de 600px).

6.	Les �l�ments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu secondaire forme
	une colonne distincte du contenu principal, on lui donne donc une marge �
	gauche de 620px (largeur r�elle de div#principal + 20px).
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le pr�c�dent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/