/* Généralités              www.emrolle.ch - Joëlle Gaillard, Vincent Gentizon - */

html  
{
		 background-color:      	#99CC99;
		 margin:                	0;
		 padding:               	0;
		 height:                	100%;
		 text-align:            	center;                        /*pr centrer sur IE*/
		 font-family:           	Comic Sans MS;
}

body  
{
     	background-image:      	url("../menu/img/main.png");
     	margin:                	0 auto;
     	width:                 	760px;
     	text-align:            	center;
     	font-family:          	Comic Sans MS;
     	min-height:            	100%;
     	height:                	auto!important;                /*cette ligne ne sera pas ecrasée par la suivante dans firefox et garde donc le block etirable en hauteur */
     	height:                	100%;                            /*ie ecrase la ligne precedente, mais l'interprete comme un min-height */
     	padding-bottom:        	1px;                             /*rajoute un px en bas de page->oblige firefox a mettre un ascenseur*/
}

/*Design*/

.tete  
{
     	background-image:      	url("../menu/img/tete.png");
     	width:                 	760px;
     	height:                	120px;
     	margin:                	0 auto;
}


#espace_menu  
{
     	position:              	relative;
     	background-image:      	url("../menu/img/menu.png");
     	width:                 	760px;
     	height:                	32px;
     	margin:                	0 auto;
     	z-index:               	1;
}

.arrondi  
{
     	position:              	relative;
     	background-image:      	url("../menu/img/arrondi.png");
     	background-repeat:     	no-repeat;                     /*pr IE*/
     	width:                 	760px;
     	min-height:            	309px;
     	height:                	auto!important;
     	height:                	309px;
     	margin:                	0 auto;
		padding-top: 			100px;
}

/*Mise en page des textes*/

h1  
{
     	position:              	relative;
     	width:                 	450px;
     	margin:                	0 auto;
     	font-size:             	1.4em;
     	text-align:            	center;
     	padding-bottom:         30px;
}

h2   
{
     	width:                 	500px;
     	margin:                	0 auto;
     	font-size:             	1em;
     	text-align:            	left;
     	padding:               	.4em 0 .1em 0 ;
     	font-weight:           	normal;
}

h3   
{
     	width:                 	500px;
     	margin:                	0 auto;
     	font-size:             	.8em;
     	text-align:            	center;
     	padding:               	1.5em 0 1.5em 0 ;
     	font-weight:           	normal;
}

p.avec_h1  
{
		position:              	relative;
     	width:                 	500px;
     	margin:                	0 auto;
     	font-size:             	13px;
     	text-align:            	justify;
     	line-height:           	200%;
}

p
{
     	position:              	relative;
     	width:                	500px;
     	padding:               	.1em;
		margin:               	0 auto;
     	font-size:             	13px;
     	text-align:            	justify;
     	line-height:           	200%;
}

p.centre  
{
     	position:              	relative;
     	width:                 	350px;
     	padding:               	0;
     	margin:                	0 auto;
     	font-size:            	13px;
     	text-align:            	center;
     	line-height:           	200%;
}

span
{
     	text-align: 			left;
     	font-size: 				.9em;
     	padding: 				.4em 0 0 0;
     	display: 				block;
}

.centre
{
		display:				block;
		text-align:				center;
		margin: 				0 auto;
}

#align_extrait
{
		display:				block;
		text-align:				left;
		margin: 				0 auto;
		padding-left :			2.2em;
		font-size:				.7em;

}

.big
{
		font-size:				1.3em;
}

a.lien_ext:  
{
     	content:               "\0000a0[\2197]";
}
a:link 
{
     	color:                 #008000;
     	text-decoration:       underline ;
}	
a:visited  
{
     	color:                 #008000;
     	text-decoration:       underline;
}
a:active  
{
     	color:                 #8080C0;
     	text-decoration:       underline;
}
a:hover  
{
     	color:                 #99CC99;
     	text-decoration:       underline;
}

/*a*/ #legal
{ 
		font-size :				.8em;
}

li.base   
{
		text-align:            justify ;
		font-size:             14px;
		font-family:           Comic Sans MS;
		line-height:           200%;
}

ul.liens  
{
     	width:                 350px;
     	margin:                0 auto;
     	padding:               30px 0 0 0 ;
     	text-align:            left;
}

ul.liens_autres  
{
     	width:                 	65%;
     	margin:                	0 auto;
     	padding:               	30px 0 0 0 ;
     	text-align:            	left;
}

li.titre  
{
		font:                  	bold 16px Comic Sans MS;
		text-align:            	left;
}

ol  
{
     	padding-top:           	1em;
		padding-bottom:			1em;
     	text-align:            	left ;
     	font:                  	bold 14px Comic Sans MS;
}

li.liens  
{
     	text-align:            	left ;
     	margin-left:           	1em;
     	font-size:             	13px;
     	font-family:           	Comic Sans MS;
     	line-height:			200%;
}

/*TABLEAUX*/

table 
{
		margin: 				0 auto;
		text-align: 			center;
		border:					2px solid #000000;
		border-collapse:		collapse;
		width: 					60%;
		font-size: 				80%;
		margin-bottom: 			.7em;
}

table#manifestations
{
		width: 					75%;
}

caption 
{
		text-align: 			center;
		margin: 				0 auto;
		font-size: 				16px;
		padding: 				0 0 4% 0;
}

caption.plusieurs 
{               /*à utiliser si il y a plusieurs tableaux dans la page*/
		text-align: 			center;
		margin: 				0 auto;
		font-size: 				16px;
		padding: 				30px 0 2%;  0;
}

th 
{
		border: 				thin solid #000000;
		width: 					33%;
		padding: 				5px;
		background-color: 		#99CC99;
}
	
td 
{
		border: 				thin solid #000000;
		padding: 				5px;
		text-align: 			center;
		background-color: 		#ffffff;
}

/*Formulaire*/

form.table
{
	border: 			0;
	width:				100%;
}

.validTable
{
	text-align: 		center;
	margin: 			0 auto;
	display: 			block;
}

form 
{
		padding: 				1.5em 0 1em 0;
		width: 					60%;        /*** Largeur du formulaire ***/
		margin: 				0 auto;
}

#titreForm, #piedForm 
{        /*** Mise en forme du titre et du pied de formulaire ***/	
		font: 					bold.9em arial, hevetica, sans-serif;
		color: 					black;
		background: 			#99CC99;
		margin: 				0;
		padding: 				.4em;
		border: 				1px solid black;
}

#piedForm 
{
		text-align:				center; /*** Les boutons sont alignés au centre ***/
}

#piedForm input 
{
		margin:					0 0 0 1em;
		padding:				0;
}

#corpForm 
{        /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
		border-left: 			1px solid black;
		border-right: 			1px solid black;
		color: 					black;
		background: 			#E4EDE4;
		margin: 				0;
		padding: 				1em;
		text-align:				left;
}

#corpForm fieldset 
{        /*** Mise en forme des cadres ***/
		margin: 				0;
		font-style: 			normal;
		padding: 				0 1em 1em;
}

#corpForm legend 
{        /*** Mise en forme des titres des cadres ***/
		font-weight: 			normal;
		color: 					black;
		background: 			transparent;
}

#corpForm p 
{        /*** Mise en forme des lignes du formulaire ***/
		padding: 				.2em 0;
		margin: 				0 0 .2em 0;
		width: 					100%;
}

/*formulaire du livre d'or*/

label.formulaire 
{        /*** Mise en forme des intitulés de champs ***/
		float: 					left;        	/*** Très important, ne pas suprimer ! ***/
		width: 					40%;        	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
		text-align: 			right;        	/*** ... et ils sont alignés à droite... ***/
		margin: 				0;
		padding: 				0 .5em 0 0;
		line-height: 			1.8;        	/*** ... et centrés verticalement. ***/
}

/**/

a.sondage:link, a.sondage:visited, a.sondage:active 
{
		color: 					#515151; 
		text-decoration: 		underline;   
		font-size: 				13px;
}

a.sondage:hover 
{
		color: 					black; 
		text-decoration: 		underline; 
		font-size: 				13px;
}

/*livre d' or*/

div.livre_or_tete, div.livre_or_pied
{
		font: 					bold 100% arial, Comic Sans MS;
		width: 					417px;
		margin: 				0 auto;
		text-align: 			left;
}

div.livre_or_tete
{ 
		
		height:					25px;
		margin-top:				20px;
		border: 				1px ridge black;
		background-color:		#99CC99;
}

div.livre_or_pied
{ 
		height:					30px;
		padding-top:			5px;
		font-size:				.7em;
		font-weight:			normal;
		text-align:				left;
}

span.livre_or_gauche, span.livre_or_droite
{
		font-size: 				.9em;
		padding:				0;
		margin:				 	0;
		height: 				20px;
		padding-top:			6px;
}

span.livre_or_gauche
{ 
		text-align:				left;  
		float: 					left;
		padding-left: 			10px;
}

span.livre_or_droite
{
		text-align:				right; 
		float:					right;
		padding-right:			10px; 
}

p.livre_or
{
		width: 					417px;
		padding:				0;
		margin: 				0 auto;
		border-bottom: 			1px solid black;
		font-size: 				13px;
		text-align: 			justify;
		line-height: 			200%;
}

/*instruments page php*/

div.instrum 
{
		width:					70%;
		margin: 				0 auto;
}

div.tete_instrum
{
	font: 						bold 100% arial, Comic Sans MS;
	background: 				#81b9dc;
	/*3EAAC1 = ancienne couleur*/
	margin: 					0 auto;
	padding: 					0 0 0 .3em;
	border-right: 				1px solid black;
	border-left:				1px solid black;
	border-top:					1px solid black;			
	text-align:					left;
	paddimg-bottom:				1em;
	height: 					25px;

}

div.corps_instrum
{
	border: 					1px solid black;
	background: 				#CBD6D4;
	margin: 					0 auto;
	padding: 					.5em 0 .5em 0;
	width:						auto;	
	height: 					auto;
	min-height: 				4em;
	_height:					 4em;
	/*hack pour IE qui ne reconnait pas les min-height. interprête height pr min-height
	les _ ne sont pas reconnu par les autres navigateurs. _height= non valide*/
}

div.corps_instrum p
{
	position : 					static;
}

img.instrum
{
	padding: 					.8em;
	display: 					block;
}

img.photo_sup
{
	width:						70%;
	display: 					block;
	border: 					1px solid black;
	margin:						0 auto;
}

div.corps_instrum p
{
	padding: 					0 .6em 0 .6em;
	margin: 					0 auto;
	text-align: 				justify;
	width: 						auto;
}

div.corps_instrum p, span.info_droite 
{
	font-size: 					13px;
	line-height: 				200%;
}

span.info_droite 
{
	text-align: 				left;
	display:					block;
	width: 						100px;
	padding: 					0 0 0 1em;
}

div.instrum_droite
{
	float: 						right;
	/*padding-left: 				.3em;*/
	margin: 					0;
	/*padding-right:				.2em;*/	
	text-align: 				center;
	width:						150px;
}

/*float*/

span.gauche, span.droite
{
	width:						48%;
	color: 						black;
	margin: 					0;
	padding:					0;
}

span.gauche 
{
	text-align: 				left;  
	float: 						left;
}
span.droite 
{
	text-align:				 	right; 
	float: 						right;
}

div.spacer 
{
	clear: 						both;
}

/*album photo liste d'event*/

div.photo 
{
	width:						60%;
	font-size: 					1.1em;
	margin: 					0 auto;
	padding-left: 				2em;
}

div.photo div.spacer
{
	border-bottom: 				2px solid black;
}

div.photo table 
{
	width:						100%;
	font-size: 					.8em;
	border: 					none;	
	margin-top: 				.5em;
}

div.photo td 
{
	padding: 					.2em;
	border: 					none;
	background: 				transparent;
	vertical-align: 			bottom;
}

td.nb, td.date 
{ 
	font-size: 					.8em;
}

td.date
{ 
	text-align: 				center;
}

td.titre 
{
	text-align: 				left;
}

div.photo a:link     {color: #000000;  text-decoration: none;}
div.photo a:visited  {color: #000000;  text-decoration: none;}
div.photo a:active   {color: #FF0000;  text-decoration: none;}
div.photo a:hover    {color: #FF0000;  text-decoration: none;}