/* ==============================*/
/* STRUCTURATION DES PAGES */
/* ==============================*/

body { 
    font-family: "Georgia Serif", Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 95%;
	color: #505050;
	background-color: #E8E8E8;
	text-align: center;
	/*width: 1333px ; /*1008px;*/
	padding:0px;
	margin: auto;
	margin-top: 20px;
	margin-bottom:20px;
    }

#cadre_general{
	/* cadre dans lequel se dessine l'entête, le milieu et le bas de page
	un seul inérêt : être sur que IE affiche bien les tableaux au milieu */
	max-width: 1333px ; /*1008px;*/
	margin: auto;
	padding: 0px;
	border: none;
	text-align: left;
	box-shadow: 0px 0px 20px 8px silver;
	-moz-box-shadow: 0px 0px 20px 8px silver;
	-webkitbox-shadow: 0px 0px 20px 8px silver;
	-o-box-shadow: 0px 0px 20px 8px silver;
	}

/*====================================
	BANNIERE : logo et titres du haut
=======================================*/

#cadre_general #logo {
	position: absolute ;
	border: none ;
	width: 170px;
    transition: width 0.4s ease-in;
    -moz-transition: width 0.4s ease-in;
	-webkit-transition: width 0.4s ease-in;
    -o-transition: width 0.4s ease-in;
	}

#cadre_general #logo:hover {
	width: 175px ;
	}
	
#banniere, #banniere_accueil {
	padding-left: 120px;
	background-color: #E7511E;
	text-align:center;
	vertical-align:middle;
	}

#banniere  .titre, #banniere_accueil .titre {
	font-weight:bold;
	font-family: Rockwell, "Arial Black"; 
	color: #6875A0;
	}
#banniere .titre  {font-size:25px; text-shadow: 0px 2px 10px #FFFFFF;}
#banniere_accueil .titre  {font-size:40px; text-shadow: -1px -1px 1px #EEE, 1px -1px 1px #EEE, -1px 1px 1px #EEE, 1px 1px 1px #EEE; }
	
#banniere  .soustitre, #banniere_accueil .soustitre {
	font-family: Rockwell, "Arial Black"; 
	font-weight: bold;
	color: white;
	}
#banniere .soustitre  {font-size:16px;}
#banniere_accueil .soustitre  {font-size:20px;}

#banniere  .instituts, #banniere_accueil .instituts  {
	font-size: 100%;
	font-family: Rockwell, "Arial Black"; 
	color: #FF9999; /* #666666;*/
	}
.instituts a  { 
	color: #FF9999; 
	text-decoration: none; 
    transition: all 1s ease;
    -moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
	}
.instituts a:hover 	{ 
	color: #FFDDDD; 
	text-shadow: 5px 0px 15px #FCC, -5px 0px 15px #FCC;
	}

/*========================================
	   MENUS : entête, pied de page, 
		menus droite et gauche
=======================================*/

#table_general{	
	/* tableau dans lequel se dessine le menu de gauche, le menu horizontal haut, l'article ou l'accueil, et l'éventuel menu de droite */
	max-width: 1333px ; /*1008px;*/
	background-color: white;
	overflow:hidden;	
	table-layout:fixed;
	}
#table_pages {
	width:100%;
	}
#table_general #cell_conteneur { 
	/* le conteneur est la cellule de 'table_general', qui contient le menu horizontal en haut, et en dessous le tableau 'table_pages' ou 'table_accueil' */
	width:100%;
	padding: 0; 
	vertical-align: top; 
	}

/*====================================
	MENU HORIZONTAL DU HAUT
=======================================*/

#table_general #div_menu {
	background-color: #E7511E;
	padding-left:30px;
	padding-right:30px;
	}
	
.menu_table, .menu_table2 {
	font-family:Rockwell;
	margin:auto;
	width:100%;
	/*max-width:800px; /*800px;*/
	table-layout:fixed;
	text-align:center;
	}
	
/* cellule de catégorie actuelle n'ayant qu'un seul article */
.menu_cell_cat_mono 			{ color: white; font-weight:bold; }
.menu_cell_cat_mono a 		{ color: white; }
.menu_cell_cat_mono a:hover 	{ color: white; }
/* cellule de catégorie actuelle ayant plusieurs articles */
.menu_cell_cat_plus 			{ color: white;  font-weight:bold;} /* #666666; background-color: #EF8059; }*/
.menu_cell_cat_plus a 		{ color: white; }
.menu_cell_cat_plus a:hover 	{ color: white; }
/* cellule des autres catégories disponibles */
.menu_cell_cat_autre		{  }
.menu_cell_cat_autre a 		{ 
	display:block; 
	color: #666666; 
	text-decoration: none; 
    transition: all .5s ease;
    -moz-transition: all .5s ease;
	-webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
	}
.menu_cell_cat_autre a:hover { 
	color: white; 
	background-color: #FFB89F;
	}
.menu_cell_sel .menu_lien
	{ color: white; background-color: #FFB89F;font-weight:bold;}

.menu_cell_art_other 
	{ color: #666666; background-color: #EF8059; border:1px outset #9F4700; border-radius:6px; -moz-border-radius:6px; }
.menu_cell_art_other  a { 
	color: #666666;
	text-decoration: none; 
	display: block; 
	height: 100%; 
	width: 100%;
    transition: all .2s ease;
    -moz-transition: all .2s ease-in;
	-webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
	}
.menu_cell_art_other a:hover	{ 
	color: white;
	background-color: #E7511E; 
	text-shadow: 5px 0px 15px #FFF, -5px 0px 15px #FFF;
	}
.menu_cell_art_this  { color: white; font-weight:bold; background-color: #EF754A; border:1px inset #9F4700; border-radius:6px; -moz-border-radius:6px;}
.menu_cell_art_this a 		{ color: white; text-decoration: none; }
.menu_cell_art_this a:hover { color: white; background-color: #E7511E; border-radius:6px; -moz-border-radius:6px; }

/*====================================
		MENU DE GAUCHE
======================================*/

#table_general #cell_menu_gauche {
	/* cellule pour le menu de gauche */
	width: 120px;
	vertical-align: top;
	padding-left: 8px;
	padding-right: 12px;
	padding-top: 40px;
	padding-bottom:10px;
	font-family: Rockwell;
	background-color: #97BE0D;
	overflow:hidden;
	}

/* correction pour Firefox car Firefox ajoute les padding à la largeur (8+12) */
@-moz-document url-prefix() {
	#table_general #cell_menu_gauche {width: 120px;}
	}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#table_general #cell_menu_gauche {width: 140px;}
	}

#cell_menu_gauche p{
	margin-top:30px;
	margin-bottom: 5px;
	text-align: center;
	color:#4E5F12;
	}

#cell_menu_gauche ul{
	width:120px;
	overflow:hidden;
	margin:0;
	padding:0;
	list-style-type:none;
	}

#cell_menu_gauche ul li{
	text-align:center;
	color: #EDFFAF;
	margin-top:2px;
	border: 2px outset #BDDF45; 
	background-color: #C3DF61; /*#ADCF33; */
	border-radius: 10px;
	-moz-border-radius: 10px;
	}
#cell_menu_gauche ul li a { 
	padding:0.6em 0; 
	display:block; 
	color: #758F1A;
	text-decoration: none; 
    transition: all .6s ease;
    -moz-transition: all .6s ease;
	-webkit-transition: all .6s ease;
    -o-transition: all .6s ease;
	}
#cell_menu_gauche ul li a:hover { 
	color:white; 
	background-color: #E7511E; 
	border-radius: 10px; 
	-moz-border-radius: 10px;
	box-shadow: 0px 0px 20px #FFF;
	-moz-box-shadow: 0px 0px 20px #FFF;
	-webkitbox-shadow: 0px 0px 20px #FFF;
	-o-box-shadow: 0px 0px 20px #FFF;
	}
#cell_menu_gauche img {
	_width:100px;	/* pour gérer internet explorer */
	max-height: 150px;
	max-width: 100px;
	}

/*====================================
		CELLULE DE CONTENU
======================================*/

#table_general #cell_pages {
	/*width: 1183px ; /*1980px;*/
	/*width:100%;*/
	}
	
.cell_pages_2col {
	padding-right:40px;
	}

.cell_pages_1col {
	}

#div_contenu {
	/* cellule pour le contenu de la page */
	/*_width:810px;
	width:795px;
	min-width:795px;*/
	max-width:800px;
	min-width:760px;
	margin:auto;
	vertical-align: top;
	padding-top: 10px;
	padding-bottom: 30px;
	background-color: white;
	overflow:hidden;
	}
		
#table_general #cell_accueil {	
	/* cellule pour le contenu de la page d'accueil */
	vertical-align:top;
	padding-left: 20px;
	padding-right: 10px; 
	padding-top: 10px;
	padding-bottom: 0px;
	background-color: white;
	overflow:hidden;
	}


	
/* ====================================
		CELLULE DU SOMMAIRE
=====================================*/

#cell_sommaire {
	width:220px;
	border-left:1px solid #EEE;
	vertical-align:top;
	background-color: #FAFAFA;
	}
	
#cell_sommaire > div:first-of-type {
	position: fixed;
	}

#cell_sommaire > div:first-of-type > div {
	/* menu sommaire de droite */
	position: absolute;
	width: 220px;
	padding:10px;
	left:-22px;
	top:10px;
	border-top-left-radius:16px;
	border-bottom-left-radius:16px;
	border: 1px solid #EEE;
	background-color: #FAFAFA;
	}
	
#cell_sommaire > div:first-of-type > div p {
	text-align:justify;
	margin-right:10px;
	margin-left:5px;
	padding:0px;
	}
#cell_sommaire > div:first-of-type > div h2 {
	margin-top:0px;
	margin-left:0px;
	}
#cell_sommaire > div:first-of-type > div ul{
	margin-left:20px;
	padding:0px;
	}
#cell_sommaire > div:first-of-type > div ol{
	margin-left:20px;
	padding:0px;
	}
#cell_sommaire > div:first-of-type > div li {
	margin-top:10px;
	margin-bottom:10px;
	display : list-item;
	list-style-image : url("img/perm/puce.png");
	}		

/*====================================
		MENU DE DROITE
======================================*/

#struct_menu_droite {	
	/* cellule pour le menu de droite */
	background-color: #FAFAFA;
	width: 140px;
	vertical-align: top;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-left: 1px solid #EEEEEE; 
	font-size: 0.8em;	
	overflow:hidden;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
	-webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
	}

#struct_menu_droite:hover {
	background-color: #FFDCBF; 
	border-left: 1px solid #FFDCBF; 
	}

#struct_menu_droite a .element  {
	width: 110px;
	margin:auto;
	margin-top:20px; 
	margin-bottom: 0;
	border:2px solid #FAFAFA; 
	border-radius:8px; -moz-border-radius:8px;
    transition: border .8s ease;
    -moz-transition: border .8s ease;
	-webkit-transition: border .8s ease;
    -o-transition: border .8s ease;
	}

#struct_menu_droite:hover a .element  {
	border:2px solid #FFDCBF; 
	}
	
#struct_menu_droite a {
	text-decoration:none;
	}
		
#struct_menu_droite a .element p {
	color: #AAAAAA;
	font-family:"Rockwell";
	font-size:1.2em; 
	margin:0px;
    transition: color .8s ease;
    -moz-transition: color .8s ease;
	-webkit-transition: color .8s ease;
    -o-transition: color .8s ease;
	}
	
#struct_menu_droite:hover a .element p {
	color: #333333;
	}
	
#struct_menu_droite:hover a:hover p {
	color: black;
	}
	
#struct_menu_droite:hover a .element {
    transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
	}

#struct_menu_droite:hover a:hover  .element {
	border:2px solid #E7511E;
	background-color: #FFB070;
	box-shadow: 2px 2px 2px 1px #888;
	-moz-box-shadow: 2px 2px 2px 1px #888;
	-webkitbox-shadow: 2px 2px 2px 1px #888;
	-o-box-shadow: 2px 2px 2px 1px #888;
	}
	
#struct_menu_droite:hover a .element img {
    transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
	}

#struct_menu_droite:hover a:hover .element img {
	transform: rotate(3deg);
	-moz-transform: rotate(3deg);  
	-webkit-transform: rotate(3deg); 	
	-o-transform: rotate(3deg);  
	}

#struct_menu_droite a .element img, #struct_menu_droite input { 
	opacity: .6;
    transition: opacity .8s ease;
    -moz-transition: opacity .8s ease;
	-webkit-transition: opacity .8s ease;
    -o-transition: opacity .8s ease;
	}

#struct_menu_droite:hover  a .element img, #struct_menu_droite:hover  input:hover {
	opacity: 1;
	}





/*====================================
				PIED DE PAGE
=======================================*/

#pieddepage table{
	width: 100%;
	border: 0; 
	padding: 10px;
	border-spacing: 1px;
	border-collapse:separate;
	border-top: 1px solid #E7511E;
	background-color: #6875A0; /*#F0F0F0;*/
	color: #CCCCCC;
	text-align:center;
	}
#pieddepage td  { 
	font-size: 90%; 
	}
#pieddepage a  { 
	color: #CCCCCC; 
	text-decoration:none;
	padding-left:40px; 
	padding-right:40px; 
    transition: all .8s ease;
    -moz-transition: all .8s ease;
	-webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
	}
#pieddepage a:hover {
	background-color: #E7511E;
	color: white; border-radius: 10px;
	box-shadow: 0px 0px 10px #BBB;
	}


/* =============*/
/* STYLES       */
/* =============*/

table {
	font-family: "Georgia Serif", Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 95% ! important;
	color: #505050;
	_font-size: 100%;
	}

h1 { 
	/* style de titre niveau 1 */
	font-family: Rockwell, 'Berlin Sans FB',Verdana, Lucida, Helvetica, fantaisy;
	border-style: none;
    font-weight: normal;
    text-align: center;
    text-transform: none;
    font-variant: small-caps;
	margin-top: 10px;
    margin-bottom: -10px;
    font-size: 1.6em;
    background-color: transparent;
    background-image: url(img/perm/cartouche_h1.png);
    background-position: top center;
	background-repeat: no-repeat;
    padding-top: 6px;
	color: white;
    text-decoration: none;
    min-height: 75px;
	height:75px;
	}

h2 {
	/* style de titre niveau 2 */
	font-family: Rockwell, 'Berlin Sans FB','Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
	font-size: 1.4em;
	color: #5068A0;
	font-weight: lighter;
	margin:0px;
	padding:0px;
	margin-top:20px;
	margin-left:20px;
	padding-left: 20px;
	padding-bottom: 15px;
	padding-top: 00px;
	background-image: url(img/perm/cartouche_h2.png);
    background-position: bottom left;
	background-repeat: no-repeat;
	overflow:hidden;
	}

h3 {
	font-family: Rockwell,'Berlin Sans FB','Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
	color: #6875A0;
	margin-left:30px;
	margin-top:30px;
	margin-bottom:0px;
	}

h3 span { padding-bottom: 1px; border-bottom: 1px dashed #996600; }
	
p { color: #505050; }
	
ul 			{ list-style-type: square; margin-top: 1em; }
ul li 		{ _margin-left: 40px; margin-top: 4px; }

ol 			{ list-style-type: decimal; margin-top: 1em; }
ol li 		{ _margin-left: 40px; margin-top: 4px; }

/* ============ LIENS =================*/

/* Liens normaux */

#table_pages a, #cell_accueil a, .article .detail_ancre { 
	color: #E7511E; 
	text-decoration: none;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
	-webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
	}

#table_pages a:hover, #cell_accueil a:hover, .article .detail_ancre:hover { 
	color: white; 
	background-color: #E7511E;
	box-shadow: 0px 0px 2px #E7511E, 4px 4px 6px 1px silver;
	-moz-box-shadow: 0px 0px 2px #E7511E, 4px 4px 6px 1px silver;
	-webkitbox-shadow: 0px 0px 2px #E7511E, 4px 4px 6px 1px silver;
	-o-box-shadow: 0px 0px 2px #E7511E, 4px 4px 6px 1px silver;
	}	
	
/* liens sur des images (éviter l'effet sur l'ancrage du lien) */

a.img_lien, #table_pages a.img_lien, #cell_accueil a.img_lien, #div_picasa a {
    transition: none;
    -moz-transition: none;
	-webkit-transition: none;
    -o-transition: none;
	}
	
a.img_lien:hover, #table_pages a.img_lien:hover, #cell_accueil a.img_lien:hover, #div_picasa a:hover{
	box-shadow: none;
	-moz-box-shadow: none;
	-webkitbox-shadow: none;
	-o-box-shadow: none;
	background-color:transparent;
	}
	

.renvoi img {
	vertical-align: middle;
	}
#cell_accueil .renvoi, .article .renvoi {
	text-align:left; 
	margin-left:60px; 
	margin-top:10px; 
	}
.introduction .renvoi {
	/* renvoi au haut à droite de l'introduction, avec flèche orange */
	float: right;
	margin-top:-40px;
	text-align: right;
	}
	

	
	
/* ============ IMAGES ============== */

/* images normales : effets du hover */

img { border: 0px; }
a img { border: 0px; }
	
#table_pages a img, #cell_accueil a img, .img_hover, .dewslider, .dewslider_hover {
	/* images ayant un lien */
	background-color: white;
	transition: all .8s ease;
	-moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    }

#table_pages a img:hover, #cell_accueil a img:hover, .img_hover:hover, .dewslider_hover:hover {
	/* animation du lien : cadre orange et ombrage légèrement orange */
	box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;
	-moz-box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;
	-webkitbox-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;
	-o-box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;
	}
	
/* images dans les articles : encadrées */	

.article img, .introduction img, .img_cadre, .dewslider, .dewslider_hover {
	/* images avec encadrement arrondi et ombrage */
	background-color: white;
	padding: 6px;
	border-radius:8px;
	box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-moz-box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-webkitbox-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-o-box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	}
	
.dewslider, .dewslider_hover {
	padding: 8px ;
	margin:auto;
	overflow:hidden;
	}
	
.article a img, .introduction a img, a .img_cadre {
	/* images avec lien, on met en évidence par un léger cadre orangé */
	box-shadow: 0px 0px 6px #DDD, 0px 0px 0px 1px #E29D85, 6px 6px 6px #E5B7A7;
	-moz-box-shadow: 0px 0px 6px #DDD, 0px 0px 0px 1px #E29D85, 6px 6px 6px #E5B7A7;
	-webkitbox-shadow: 0px 0px 6px #DDD, 0px 0px 0px 1px #E29D85, 6px 6px 6px #E5B7A7;
	-o-box-shadow: 0px 0px 6px #DDD, 0px 0px 0px 1px #E29D85, 6px 6px 6px #E5B7A7;
	}
	
/* images dont on ne veut pas d'encadrement : images petites */

.article .img_petit, .introduction .img_petit, .img_petit {
	padding: 2px;
	border-radius: 4px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkitbox-shadow: none;
	-o-box-shadow: none;
	}
	
.article a .img_petit, .introduction a .img_petit, a .img_petit {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkitbox-shadow: none;
	-o-box-shadow: none;
	}

a .img_petit:hover, #table_pages a .img_petit:hover, #cell_accueil a .img_petit:hover {
	/* petites images ayant un fonctionnement simplifié */
	background-color:white;
	box-shadow: 0px 0px 0px 2px #E7511E;
	-moz-box-shadow: 0px 0px 0px 2px #E7511E;
	-webkitbox-shadow: 0px 0px 0px 2px #E7511E;
	-o-box-shadow: 0px 0px 0px 2px #E7511E;
	}
	
/* images qui pivotent quand hover */

a .img_pivote, #div_picasa a img {
	transition: transform .8s ease;
	-moz-transition: all .8s ease;
    -webkit-transition: -webkitbox-transform .8s ease;
    -o-transition: -o-transform .8s ease;
	}

a .img_pivote:hover, #div_picasa a img:hover {
	transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	}

.image_droite, .div_dewslider {
	float: right;
	max-width: 160px;
	margin-left:40px;
	}
	
.article_etroit .image_droite {
	margin-right:-240px ;
	}

.div_dewslider {
	background-color: white;
	max-width: 220px;
	margin-right: -60px ;
	}

/* ====== CADRE INTRODUCTIF EN HAUT DES PAGES ======== */
	
.introduction {
	/* Cadre introductif en haut des articles */
	margin-top: 20px;
	margin-left: 50px;
	margin-right: 50px;
	padding-top: 6px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 40px;
	background-image: url(img/perm/cartouche_intro.png);
    background-position: 80px bottom;
	background-repeat: no-repeat;
	}

.introduction li {
	margin-top: 4px;
	margin-bottom: 4px;
	}
	
/* ====== SUITE DES ARTICLES ======== */

.article{
	/* délimite un article */
	padding-top: 40px;
	padding-bottom: 10px;
	/*border-bottom: 2px dotted RGB(220,200,200);*/
	}
.article_etroit { margin-right: 240px ;}
	
.article p { padding-left: 40px; }
.article ul, .article ol { margin-left: 40px; }
.article form  { margin-left: 40px !important; _margin-left: 0px; }

.article .premier { margin-top: 40px; }

.article > p:first-of-type::first-letter, .introduction > p:first-of-type::first-letter, .premier:first-letter { 
	/* le premier paragraphe d'un article est de classe premier : sa 1ère lettre est affichée en évidence */
	font-size: 1.5em;
	font-weight: normal;
	color: #5068A0;
    }
	
.article .detail_ancre {
	margin-left:80px;
	padding-left:30px;
	padding-right:30px;
	text-align:center;
	float:left;
	border-radius:8px;
	box-shadow: 0px 0px 6px #DDD;
	-moz-box-shadow: 0px 0px 6px #DDD;
	-webkitbox-shadow: 0px 0px 6px #DDD;
	-o-box-shadow: 0px 0px 6px #DDD;
	}

.article .affiche_ancre {
	/* quand on clique sur 'detail_ancre', une fonction javascript ajoute la classe 'affiche' */
	margin-top:40px;
	margin-left:40px;
	padding-left:6px;
	padding-right:6px;
	max-width:50px;
	}
	
.article .detail_texte {
	margin-left:80px;
	display:none;
	}
	
.agenda_genre {
	margin-left:60px ;
	border:1px solid silver;
	padding-left:20px;
	padding-right:20px;
	width:460px;
	}
	
.introduction .agenda_genre { margin-left:0px;}

.agenda_td_genre {
	padding-right:20px;
	}
	
	
/* ====== PAGE D'ACCUEIL ===========
	"A la Une", "Evenements", et "Activité"  ======== */

/* Table des 2 colonnes en page d'accueil */
#accueil_tbl_3col {
	margin-top: 10px;
	width:100%;
	table-layout: fixed;
	overflow:hidden;
	}

/* Les 2 colonnes, puis précisions pour les colonnes n°1 et n°2 */
#accueil_tbl_3col td {
	vertical-align:top; 
	text-align: center;
	}
#accueil_tbl_3col td:nth-of-type(1) { 
	padding-right: 20px;
	}
#accueil_tbl_3col td:nth-of-type(2) { 
	padding-left: 20px;
	padding-right: 20px;
	border-left : 1px solid #EEEEEE;
	}
#accueil_tbl_3col td:nth-of-type(3) { 
	padding-left: 20px;
	border-left : 1px solid #EEEEEE;
	}

/* Titres h2 dans les colonnes */
#accueil_tbl_3col td h2 {
	margin-top: 50px;
	margin-left: 0px;
	padding-left: 20px;
	text-align: left;
	}
#accueil_tbl_3col td h2:first-of-type { margin-top: 0px;}

#accueil_tbl_3col td p {
	padding-left:20px;
	padding-right:10px;
	text-align: justify;
	}

/* =========== AGENDA SUR LA PAGE D'ACCUEIL =========== */

#cell_accueil .accueil_agenda ol {
	margin: 0px;
	margin-top:2px;
	padding: 0px;
	list-style-type: none;
	}
	
#cell_accueil .accueil_agenda li {
	margin: 0px;
	padding: 0px;
	margin-bottom:6px;
	border: 0; /*2px solid #DDDDDD;*/
	text-align:left;
	margin-left:10px;
	padding-left:00px;
	background-color: white; /*#F0F0F0; /* rgb(255, 160, 122);*/
	background-image: url(img/perm/rond_orange.png);
	background-repeat:no-repeat;
	background-position:10px;
	font-weight: normal;
	}
	
#cell_accueil .accueil_agenda  li a{
	text-decoration:none;
	padding:3px;
	padding-left:40px;
	display:block;
	/*border:1px solid white;*/
	}
	
#cell_accueil .accueil_agenda li a:link{
	color: #666666; /* #5068A0;*/
	}
	
#cell_accueil .accueil_agenda  li a:visited{
	color: #666666; /* #5068A0; */
	}
	
#cell_accueil .accueil_agenda  li a:hover{
	color:white;
	background-color: #E7511E;
	/*border:1px solid #DDDDDD;*/
	box-shadow: 4px 4px 4px silver;
	}
	
	
/* =========== LA UNE EN PAGE D'ACCUEIL =========== */

#cell_accueil #une {
	margin-right:auto;
	margin-left:auto;
	max-width:230px;
	margin-top: 10px;
	padding: 6px;
	border-radius: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid #DDDDDD;
	background-color: #F0F0F0;
	box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-moz-box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-webkitbox-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	-o-box-shadow: 0px 0px 6px #DDD, 6px 6px 6px #DDD;
	transition: all .8s ease;
	-moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
	}
	
#cell_accueil #une:hover {
	background-color: #FFEEEE;
	/*box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;*/
	/*-moz-box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;*/
	/*-webkitbox-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;*/
	/*-o-box-shadow: 0px 0px 2px 2px #E7511E, 6px 6px 6px #E5A995;*/
	}

#cell_accueil #une img		{ max-height: 250px; max-width: 210px; }
#cell_accueil #une p 		{ margin:0px; margin-top:6px; text-align: center; }
#cell_accueil #une p a 		{ text-decoration: none; }
	
#cell_accueil #introduction { 
	font-size:0.8em; 
	color:#606060; 
	text-align:justify; 
	}
	
#cell_accueil #referencement { 
	font-size: 0.8em; 
	color: #CCCCCC;
	text-align: justify; 
	border-top: 1px dotted #CCCCCC; 
	margin-top: 30px; 
	padding-top: 10px; 
	cursor: help; 
    transition: all 1.2s ease;	
    -moz-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
	}
#cell_accueil #referencement:hover { color: #888888; }
#cell_accueil #referencement span { color: #606060; text-decoration: underline; }

/* Les div de classe 'divimg' servent à afficher des popup :
ils sont invisibles, et contiennent un contenu en positionnement relatif 
qui s'affichera avec du javascript */
.divimg {
	position:relative !important;
	_height: 0;
	_width: 0;
	_position: absolute;
	_left: 0; 
	height: 1px;
	width: 1px;
	}
	
.divimg img{
	display: none;
	position: relative;
	left: 220px;
	top: 10px;
	/*border: 1px solid #CCCCCC;
	border-right: 3px solid #AAAAAA;
	border-bottom: 3px solid #AAAAAA;
	background-color: #FFFFF0; /*#DFDAC3;*/
	background-color:white;
	padding:8px;
	border:2px solid #DDD;
	border-radius:8px;
	box-shadow: 2px 2px 6px #DDD;
	-moz-box-shadow: 2px 2px 6px #DDD;
	-webkitbox-shadow: 2px 2px 6px #DDD;
	-o-box-shadow: 2px 2px 6px #DDD;
	/*max-width: 200px;
	max-height: 150px;*/
	_width:100px;	/* pour gérer internet explorer */
	/*padding: 10px;*/
	z-index: 10;
	}

.divimg  div{
	display: none;
	position: relative;
	left: 0px;
	top: 20px;
	border: 2px solid #99C1DF;
	background-color: #DFF1FF;
	text-align:center;
	z-index: 20;
	overflow:hidden;
	min-width:100px;
	}

.divimg div img {
	position:static;
	display:inline;
	left:0;
	top:0;
	border:0;
	background-color:#DFF1FF;
	max-width:80px;
	max-height:80px;
	}

.divimg div ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
	}

.divimg div ul li{
	margin: 0px;
	padding: 0px;
	border-bottom:1px dotted #99C1DF;
	margin-bottom:0px;
	background-color: #DFF1FF; 
	font-weight: normal;
	}

.divimg div ul li a{
	text-decoration:none;
	padding-top:6px;
	padding-bottom:6px;
	display:block;
	}

.divimg div ul li a:link{
	color:#4F7D9F;
	}
	
.divimg div ul li a:visited{
	color:#4F7D9F;
	}
	
.divimg div ul li a:hover{
	color:#DFDAC3;
	background-color: #4F7D9F;
	}
	

/* ============================
		DIFFERENTS STYLES
===============================*/
	

.date_article {
	/* permet d'afficher la date de publication de l'article */
	color: gray;
	font-size: 0.8em;
	text-align: right;
	clear:both;
	}

/* cadre flottant pour afficher le bouton qui permet le retour en haut */
.separation { text-align: center; margin-top: 10px; clear:both; }
.separation img { height:20px; vertical-align: middle; }
.article_etroit .separation {margin-right:-240px;}

.agenda_liste .article img {
	/*max-width: 200px;
	max-height: 150px;*/
	}

.horaire { 
	color: #7F7867;
    font-weight: bold;
    }

.horaire_par {
	margin-left: 40px;
	background-image: url(img/perm/calendar.png);
	line-height: 30px;
	background-repeat: no-repeat;
	}

.a_la_une 
	{
	background-color: rgb(153, 51, 153);
	padding: 20px;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: 30px;
	margin-right: 30px;
	text-align: center;
	}

.attention {
	/* pour attirer l'attention */
	color : red ;
	box-shadow: 0px 0px 2px silver;
	-moz-box-shadow: 0px 0px 2px silver;
	-webkit-box-shadow: 0px 0px 2px silver;
	-o-box-shadow: 0px 0px 2px silver;
	font-weight: bold ;
	text-shadow : 2px 2px 8px yellow;
	}
	
.agenda_partie {
	/* un encart dans l'agenda, correspondant à une partie insérée dans un évènement */
	clear: both;
	margin-top: 30px;
	margin-left:60px;
	border: 2px solid #97BE0D;
	background-color: #F0FFBF;
	border-radius:20px;
	padding:20px;
	}

/*==================================
	STYLES POUR  LA NEWSLETTER
===================================*/

#newsletter_cadre { 
	margin-top: 20px;
	margin-left:10px;
	margin-right:10px;
	border:2px solid #CCC ;
	background-color: #F0F0F0 ;
	border-radius: 16px ;
	padding:8px;
	box-shadow: 2px 2px 6px #DDD;
	-moz-box-shadow: -3px -3px 4px #DDD, 4px 4px 6px #DDD;
	-webkitbox-shadow: 2px 2px 6px #DDD;
	-o-box-shadow: 2px 2px 6px #DDD;
	}

#newsletter_contenu { 
	background-color: white ;
	padding: 8px ;
	border:2px solid #CCC;
	border-radius: 8px;
	}

.newsletter_contenu h2, .newsletter_contenu h3, .newsletter_contenu h4 {
	/*color: black;*/
	font: bold 18px Arial;
	margin-left: 0;
	/*border-top: 1px dotted #CCCCCC;*/
	margin-top:10px;
	padding-top:20px;
	padding-bottom:20px;
	}
.newsletter_contenu h1 {font-size:28px;}
.newsletter_contenu h2 {font-size:22px;}
.newsletter_contenu h3 {font-size:18px;}
.newsletter_contenu h4 {font-size:14px;}

/*==================================
	STYLES POUR LES ACTIVITES
	  (page "activites.php")
===================================*/

.activite {	
	margin-left:40px;
	margin-bottom:0px;
	}
.activite h3 {
	padding:0;
	margin-left:0px;
	margin-bottom:0;
	}
.activite p {
	margin:0;
	margin-left:40px;
	margin-top:10px;
	padding:0px;
	}
.activite table { margin-left:30px; }

.activites_en_attente {
	color: gray;
	font-size: 0.8em;
	margin-left: 80px;
	border-left: 4px dotted gray;
	}

.activites_en_attente p {
	font-weight:normal;
	color: gray;
	text-decoration: underline;
	margin-left: 0px;
	padding-left:10px;
	font-size: 120%;
	}

.activites_en_attente ul {
	margin-left: 10px;
	}
	
.table_liens {
	/* Pour la page liens, style des tables */
	margin-top: 20px;
	margin-bottom: 50px;
	width: 50%; 
	text-align: left; 
	margin-left: auto; 
	margin-right: auto;
	border: 0px solid black;
	border-collapse: collapse;
	}

.table_liens td {
	/* Pour la page liens, style des tables */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-top: 1px outset gray;
	border-bottom: 1px outset gray;
	}

	
/*==================================
	AFFICHAGE DU SEMAINIER
===================================*/

.table_semaine {
	text-align: center;
	width:820px;
	padding: 0px;
	margin : 0px;
	margin-bottom: 20px;
	border-collapse: collapse;
	empty-cells: show;
	}

.table_semaine caption {
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 6px;
	}

.table_semaine th {
	padding-top: 10px;
    padding-bottom: 10px;
	color: white; 
	background-color: #C1C9DD;
    }

.table_semaine td {
	font-size: 90%;
	margin: 0px;
	padding: 2px;
	border : 2px inset rgb(255, 255, 204);
	}

.table_semaine td .horaire {
	color: rgb(150,100,0);
	font-weight: normal;
	}

#table_pages .table_semaine a {
	padding-right: 5px;
	padding-left: 5px;
	font-weight: bold;
	color: black;
	}

#table_pages .table_semaine a:hover {
	color: rgb(255, 255, 204);
	padding-top: 2px;
	padding-bottom: 2px;
	}
	
.semaine_horaire {
	color: white; 
	background-color: #C1C9DD;
	vertical-align: top;
	padding-top: 4px;
	}

.semaine_vide 		{ background-color: #F0F0F0; }
.semaine_ouvert 		{ background-color: rgb(255, 204, 204); }
.semaine_convivial	{ background-color: rgb(255, 153, 255); }
.semaine_seformer 	{ background-color: rgb(153, 255, 153); }
.semaine_prier 		{ background-color: rgb(255, 255, 102); }
.semaine_agir 		{ background-color: rgb(180, 180, 255); }
.semaine_eventuel 	{	background-color: #DDDDDD; }
	
.semaine_commentaire {
	margin-top: 6px;
	text-align: center;
	}

/* ======================================
	TABLEAU DU FORMULAIRE
	POUR ECRIRE UN EMAIL
=====================================*/	

.email_form {
	margin-left:auto;
	margin-right:auto;
	width:750px;
	margin-top: 30px;
	border: 1px solid #DDDDDD;
	background-color: #F0F0F0;
	text-align:left;
	padding:10px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	box-shadow: 0px 0px 10px 2px silver;
	-moz-box-shadow: 0px 0px 10px 2px silver;
	-webkitbox-shadow: 0px 0px 10px 2px silver;
	-o-box-shadow: 0px 0px 10px 2px silver;
	}

.email_form td{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 20px;
	}
	
.email_form img {
	padding: 10px ;
	background-color: white ;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 0px 0px 6px gray, 6px 6px 10px 3px silver;
	-moz-box-shadow: 0px 0px 6px gray, 6px 6px 10px 3px silver;
	-webkitbox-shadow: 0px 0px 6px gray, 6px 6px 10px 3px silver;	
	-o-box-shadow: 0px 0px 6px gray, 6px 6px 10px 3px silver;
	}

/* ==============================
	PRECISION POUR LES MENUS
================================*/
	

.divmenu {
	display:block;
	position:relative;
	height: 0px;
	width: 0px;
	}
	
.divmenu  div{
	display: none;
	position: relative;
	left: -2px;
	top: 18px;
	border: 2px solid #E7511E;
	background-color: #FFB89F; 
	text-align:center;
	z-index: 20;
	overflow:hidden;
	min-width:100px;
	margin:0px;
	padding:0px;
	}

.divmenu img {
	position:static;
	display:inline;
	left:0;
	top:0;
	border:0;
	background-color: #FFB89F; 
	max-width:80px;
	max-height:80px;
	}
	
.divmenu ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
	}

.divmenu li{
	margin: 0px;
	padding: 0px;
	border-bottom:1px dotted #E7511E;
	margin-bottom:0px;
	background-color: #FFB89F;
	font-weight: normal;
	}

.divmenu li a{
	color: #666666;
	padding-top:6px;
	padding-bottom:6px;
	display:block;
	}
	
.divmenu li a:hover { color:white; background-color: #E7511E;}
	
.divmenu > div > a > img {
    transition: all 1s ;
    -moz-transition: all 1s ;
	-webkit-transition: all 1s ;
    -o-transition: all 1s ;
	}
.divmenu > div > a > img:hover {min-width:90px;min-height:90px;}


/*==================================
	AFFICHAGE DU PLAN DU SITE
===================================*/

#plandusite {
	margin-left:100px;
	}
#plandusite td {
	width: 200px;
	padding-top:15px;
	padding-left:15px;
	vertical-align: top;
	}
#plandusite .plan_cell_droite {
	width: 200px;
	padding-left:40px;
	padding-top:30px;
	}
#plandusite p {
	font-size: 120%;
	}


/*==================================
	AFFICHAGE DES ALBUMS PICASA
===================================*/

.picasa_entete 			{margin-top:-40px;text-align:right;}
.picasa_entete img  		{vertical-align:middle;height:60px;}
.picasa_contenu 			{margin-top:20px;text-align:center;}
.picasa_description		{margin-top:10px;margin-bottom:20px;margin-right:60px;margin-left:60px;text-align:justify;}
.picasa_apostrophe1		{font-size:300%;color:#6875A0;vertical-align:top;padding-right:10px;}
.picasa_apostrophe2		{font-size:300%;color:#6875A0;vertical-align:bottom;padding-left:10px;}
.picasa_contenu table 	{width:800px;margin:auto;text-align:center;table-layout:fixed;}
.picasa_contenu td		{padding:5px;}
.picasa_lien 			{margin-top:20px;text-align:right;}
.picasa_lien img  		{vertical-align:middle;height:40px;}