/****************************************/
/*   				 	*/
/*   FEUILLE DE STYLE DE L'INTERFACE 	*/
/* 					*/
/* Auteur : Juliette FABRE LEPSE-INRA   */
/* Date : mars 2008			*/
/*					*/
/****************************************/



/**************************/
/* Suppression des marges */
/**************************/

* 
{ 
	margin : 0;
	padding : 0; 
}

img
{
	border : 0px;
}


/*******************************************/
/* Définition de la mise en forme générale */
/*******************************************/

body
{
	margin : 10px 0; 			/* On définit les marges extérieures haute et basse à 10px et les marges droite et gauche à 0 */
	text-align : center;			/* Pour Internet Explorer */
	font : 82% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	background : #dea;
}



/****************************************************************************************/
/* 					CONTENEURS 					*/
/****************************************************************************************/



/*********************************/
/* Définition du cadre conteneur */
/*********************************/

div#conteneur
{
	overflow : auto;		 /*barre de défilement */	
	width : 93%;	
	margin : 0 auto;		/* Centré */
	padding-right : 10px;		/* Marges intérieures */
	text-align : left;
	border : 4px solid #ab4;	/* Bordure autour de l'ensemble du conteneur  */
	background : #fff;		/* Couleur blanche pour le fond du conteneur */ 
}



/*******************************/
/* Cadre conteneur moins large */
/*******************************/

div#conteneurPetit
{
	overflow : auto;
	width : 85%;		
	margin : 0 auto;				
	text-align : left;
	border : 4px solid #ab4;
	background : #fff;	
	padding-right : 10px;	
}

div#conteneurPetit img.gauche
{
	margin-left : 8%;
	
}

/*********************************************/
/* cadre conteneur moins large et moins haut */
/*********************************************/

div#conteneurPetit2
{
	overflow : auto;		
	height : 600px;				
	width : 85%;		
	margin : 0 auto;				
	text-align : left;
	border : 4px solid #ab4;		
	background : #fff;			
	padding-right : 10px;
	padding-left : 10px;
}



/****************************************************************************************/
/* 				LES 2 DIVISIONS DES CONTENEURS 				*/
/****************************************************************************************/



/********************************/
/* Menu à gauche		*/
/********************************/

div#menuGauche
{
	margin-top : 5px;
	width : 10%;
	max-width : 200px;		
	float : left;			
	text-align : center;
	margin-left : 5px;
	font : 90% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #8a0;
}

div#menuGauche a
{
	color : #8a0;
}

div#menuGauche a:hover	
{
	color : #868c85;
}



/********************************/
/* Reste de la page		*/
/********************************/

div#page
{ 
	margin-left : 14%;
}




/****************************************************************************************/
/* 					HEADER						*/
/****************************************************************************************/



/*********************************************/
/* Définition de la partie titre de la page  */
/*********************************************/


div#header
{
	height : 140px;				/* Hauteur de la partie header */
	width : 100%;
	border : 1px solid #fff;		/* bordure blanche */
	color : #9b2;				/* Couleur du titre */
	text-align : right;
	margin : 10px 0 30px 0;			/* Marges autour du header : top right bottom left */
}

div#header h2
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif; /* 1.3 em */
}

div#header a
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif; /* 1.3 em */
	color : #8a0;
}

div#header a:hover	
{
	color : #868c85; 				/* Couleur des liens quand on passe la souris*/
}

div#header img
{
	float : left;
}

div#header h1
{
	font : italic small-caps bold 150% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif; /* 2.3 em */
	margin-bottom : 20px;
}




/****************************************************************************************/
/* 					MENUS						*/
/****************************************************************************************/



/*************************************/
/* Définition des menus horizontaux 	 */
/*************************************/

ul#menuInfo
{
	float : left;				/* Hauteur du bandeau de menu*/
	margin : 20px 20px 0px 0px;		
	list-style : none;   	 	/* On cache les puces */
}

ul#menuInfo li
{
	float : left;				/* On rend les li en flottant pour pouvoir les afficher horizontalement */
	margin-left : 5px;
}

ul#menuInfo li a
{
	float: left;				/* Pour pouvoir dimensionner les liens a en mode block */
	padding-left : 5px;		/* Marges à l'intérieur des cellules du menu */
	font : small-caps bold 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;	
	letter-spacing : 0.8px;			
	color: #fff;				
	text-decoration : none ;
	background : url(Images/MenuOngletGauche.jpg); 
	background-repeat: no-repeat;
	background-position: 0% 0px;
}

ul#menuInfo li a span
{
	float: left;
	padding-left : 5px;				
	padding-top: 9px;
  	padding-bottom: 8px;
  	padding-right: 10px;
	background-image : url(Images/MenuOngletDroit.jpg);
	background-repeat: no-repeat;
	background-position: 100% 0px;	
}

ul#menuInfo li a:hover
{
	background-image : url(Images/MenuOngletGauche.jpg); /* Image en fond de la cellule quand on passe la souris */
	background-position : 0% -100px;
}

ul#menuInfo li a:hover span
{
	background-image : url(Images/MenuOngletDroit.jpg);
	background-position : 100% -100px;
}



/*******************************************/
/* Définition du menu horizontal de retour */
/*******************************************/

ul#menuRetour 
{
	/*height : 40px ; */
	margin : 50px 0 0 0;					
	list-style-type : none ;   	 	
}

ul#menuRetour  li
{
	float : right ;				
	text-align : center ;padding : 10px;	
}
/*

ul#menuRetour  li a
{
	/*display : block;   */ 			
	/*line-height : 15px;*/
	/*padding : 10px;	*/			
	/*font : small-caps bold 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;	
	letter-spacing : 0.7px;			
	color : #8a0;		*/		
	/*text-decoration : none ;*/
	/*border-right : 2px solid #fff;*/		
/*}*/
/*
ul#menuRetour  li a:hover
{
	color : #868c85;
}
*/


/************************************/
/* Définition des menus verticaux  */
/***********************************/

ul#menuVertical
{
	float : left;
	margin-top : 10px;
	padding : 0;	
	list-style-type : none;			
	width : 160px;
}

ul#menuVertical li
{
	margin-top : 8px;
	text-align : center;
}

ul#menuVertical li p
{
	font : bold 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	display : block;
	letter-spacing : 0.4px;
	color : #8a0;
	text-decoration : none;
	padding : 4px;
}

ul#menuVertical li a
{
	display : block;
	padding : 9px 5px;
	font : small-caps bold 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	letter-spacing : 0.4px;
	color : #fff;
	text-decoration : none;
	background : url(Images/MenuOngletDroit.jpg) repeat-x 0 0; 
}

ul#menuVertical li a:hover
{
	background : url(Images/MenuOngletDroit.jpg)  repeat-x 100% -100px;
}


/***********************************************************************/
/* Définition du menu des pages de gestion des groupes et utilisateurs */
/***********************************************************************/

ul#menuGestion
{
	height : 20px; 				
	margin : 40px 0px 50px 0;	
	list-style-type : none;   	 	
}

ul#menuGestion li
{
	float : left;				
	margin-left : 5px;
}

ul#menuGestion li a
{
	float: left;
	padding-left : 5px;
	font : small-caps bold 115% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;	
	letter-spacing : 0.8px;			
	color: #fff;				
	background : url(Images/MenuOngletGauche.jpg); 
	background-repeat: no-repeat;
	background-position: 0% 0px;
	text-decoration : none ;
}

ul#menuGestion li a span
{
	float: left;
	padding-left : 5px;			
	padding-top: 9px;
  	padding-bottom: 8px;
  	padding-right: 10px;
	background-image : url(Images/MenuOngletDroit.jpg); 
	background-repeat: no-repeat;
	background-position: 100% 0px;	
}


ul#menuGestion li a:hover
{
	background-image : url(Images/MenuOngletGauche.jpg); 
	background-position : 0% -100px; 
}


ul#menuGestion li a:hover span
{
	background-image : url(Images/MenuOngletDroit.jpg);
	background-position : 100% -100px;
}


/******************************************************************************************************************/
/* 							CONTENUS 						  */
/******************************************************************************************************************/



/****************************************************************/
/* Définition du contenu de la page par défaut			*/
/****************************************************************/

div#contenu
{
	margin : 10px 10px 0 0;
}

div#contenu h1
{
	text-align : center;	
	line-height : 35px;		
	font-size : 160%;
	color : #9b2;							
	margin-bottom : 30px;
	margin-top : 20px;
}

div#contenu h2	/* Titre h2 */
{
	padding-left : 30px;		
	line-height : 35px;		
	font-size : 140%;
	background : url(Images/PetiteArabido2.jpg) no-repeat left bottom;
	color : #9b2;							
	border-bottom : 1px solid #9b2;		
	margin-bottom : 15px;
	margin-top : 5px;
}

div#contenu h3	/* Titre h3 */
{
	margin-top : 5px;
	color : #9b2;
	margin-bottom : 15px;
	font-size : 110%;
}

div#contenu h3.gris
{
	margin-top : 5px;
	margin-left : 15px;
	color : #868c85;
	margin-bottom : 15px;
}

div#contenu p	/* Paragraphes */
{
	padding-left : 10px;
	text-align : justify;
	line-height : 20px;
	font-size : 100%;
	margin-bottom : 10px;
}

div#contenu span.normal
{
	font-size : 90%;
	color : #000000;
	font-weight : normal;
}

div#contenu span.vert	
{
	font-weight : bold;
	color : #9b2;
}

div#contenu span.gris	
{
	color : #868c85;	
}

div#contenu p.centre	/* Paragraphes centré */
{
	text-align : center;
}

div#contenu p.petit /* Paragraphe plus petit */
{
	font : 90% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
}

div#contenu p.gris	/* Paragraphes gris */
{
	color : #868c85;
}

div#contenu p.rouge	/* Paragraphes rouges */
{
	color : #ff0000;
}

div#contenu p.vert	/* Paragraphes verts */
{
	font-weight : bold;
	color : #9b2;
}

div#contenu p.rose
{
	color : #cf0061;
	font-weight : bold;
}

div#contenu p.invisible
{
	padding-left : 0px;
}

div#contenu p#requete	/* Requêtes */
{
	padding-left : 10px;
	padding-right : 20px;
	text-align : justify;
	line-height : 20px;
	color : #868c85;
	font-size : 90%;
}

div#contenu p.warning
{
	color : #ff0000;
	font : small-caps bold 120% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	margin-bottom : 30px;
}

div#contenu p.lien:hover 
{
	color : #9b2;
	cursor: pointer;
}

div#contenu label
{
	display : block;
	float : left;
	font-weight : bold;
	width : 230px;	
}

div#contenu ul	/* Listes */
{
	padding-left : 30px;
	text-align : justify;
	line-height : 20px;
	list-style-type : square; 
	margin-bottom : 15px;
}

div#contenu ul li
{
	margin-top : 8px;
}

div#contenu ul.gris
{
	padding-left : 60px;
	text-align : justify;
	line-height : 20px;
	list-style-type : square; 
	margin-bottom : 15px;
	color : #868c85;
}

div#contenu ul#erreur	/* Listes des erreurs */
{
	margin-top : 30px;
	margin-bottom : 30px;
	padding-left : 10px;
	text-align : justify;
	line-height : 20px;
	color : #cf0061;
	list-style-type : none; 
	font : small-caps bold 120% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	/* border: 2px solid #ab4 ; */	
}

div#contenu ul#declarer	/* Liste de la page Saisie */
{
	padding-left : 30px;
	text-align : justify;
	line-height : 20px;
	list-style-type : none; 
	font-size : 100%;
}

div#contenu ul.listeGenotype
{
	padding-left : 5px;
	border : 1px solid #a6a5a5;
	list-style-type : none;
	background : #dea;
	overflow : auto;	
	height : 235px;
	width : 250px;	
	margin-left : 10px;
}

div#contenu ul.listeGenotype li
{
	line-height : 7px;
}

div#contenu ul.listeGenotype li.gris
{
	color : #868c85;
}


div#contenu a	/* Liens */
{
	color : #8a0;
}

div#contenu a:hover	
{
	color : #868c85;
}

div#contenu a.gris	/* Liens */
{
	color : #868c85;	
}

div#contenu a.fiche	/* Liens */
{
	color : #cf0061;
	font-weight : bold;	
}

div#contenu a.gris:hover	
{
	color : #8a0;
}


div#contenu select  /*  liste déroulante */
{
	width : 170px;
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
}

div#contenu select.largeur70  /*  liste déroulante */
{
	width : 70px;
	text-align : center;
}

div#contenu select.largeur100  /*  liste déroulante */
{
	width : 100px;
	text-align : center;
}

div#contenu select.largeur250  /*  liste déroulante */
{
	width : 250px;
}

div#contenu select.largeur300  /*  liste déroulante */
{
	width : 300px;
}

div#contenu select.largeur450  /*  liste déroulante */
{
	width : 450px;
}

div#contenu select.largeur600  /*  liste déroulante */
{
	width : 600px;
}

div#contenu div.bloc /* flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 0;
	width : 48%;
}

div#contenu div.bloc2 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 4%;
	width : 48%;
}

div#contenu div.bloc3 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 1%;
	width : 31%;
}

div#contenu div.bloc4 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 0;
	width : 100%;
}

div#contenu div.bloc5 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 5%;
	width : 30%;
	border-left : 1px solid;
}

div#contenu div.bloc6 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 0;
	width : 50%;
}

div#contenu div.bloc7 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 1%;
	width : 18%;
}

div#contenu div.bloc8 /* bloc flottant à gauche */
{
	display : block;
	float : left;
	padding-left : 1%;
	width : 58%;
}

div#contenu div.bloc9 /* bloc centré */
{
	display : block;
	margin : 0 auto;
	width : 90%;
	border : 1px solid #868c85;
	padding : 5px;
	padding-right : 10px;
}


div#contenu div.partie /* bloc flottant à gauche */
{
	float : left;
	padding-left : 0;
	width : 18%;
	height : 20px;
}

div#contenu div.partie2 /* bloc flottant à gauche */
{
	float : left;
	padding-left : 2%;
	width : 12%;
	height : 20px;
}

div#contenu div.partie3 /* bloc flottant à gauche */
{
	float : left;
	padding-left : 2%;
	width : 20%;
	height : 20px;
}

div#contenu div.partie4 /* bloc flottant à gauche */
{
	float : left;
	padding-left : 2%;
	width : 44%;
	height : 40px;
}

div#contenu img
{
	border : 0px;
}

div#contenu div.menuConsult /* menu affiché en haut des tableaux de données consultées */
{
	display : block;
	float : left;
	margin-left : 10px;
	margin-right : 5px;	
	padding : 6px 4px;
	background : #cf0061;
	text-align : center;
	height : 35px;
	width : 180px;
}

div#contenu a.bouton	/* Liens */
{
	color : #fff;
	border : 0px;
	font : small-caps bold 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	margin : 0px;
	background : #cf0061;
	padding : 0px;
	text-decoration : none;
	cursor : pointer;	
}

div#contenu a.bouton2	/* Liens */
{
	background : #fff;
	border : 0px;
	font : small-caps bold 120% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #8a0;
	margin : 0px;
	padding : 5px;
	text-decoration : none;
	cursor : pointer;
}

/* Définition des boutons Submit */

.submit
{
	color : #fff;
	border : 0px;
	font : small-caps bold 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	margin : 0px;
	padding : 0px;
	cursor : pointer;	
	background : #cf0061;
	width : 180px;
}

.submit2
{
	color : #fff;
	border : 0px;
	font : small-caps bold 115% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	margin : 0px;
	padding : 4px;
	background : #8a0;
}

.submit2:hover
{
	color : #8a0;
	cursor : pointer;	
	background : #fff; 
}

div#contenu div.imageDroite
{
	float : right;
	padding-left : 15px;
}

div#contenu div.imageDroite p
{
	font-size : 80%;
	width : 100%;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}

fieldset.menu /* division dans les formulaires de recherche */
{
	width : 98%;
	max-width : 1000px;
	border : 1px solid #868c85;
	padding : 15px 10px 5px 5px;
	margin : 10px 0 20px 10px;
}

fieldset.menu legend
{
	font-weight : bold;
}

fieldset.menu a
{	
	font-weight : bold;
	font-size : 110%;
}

fieldset.acces 
{
	width : 80%;
	max-width : 1000px;
	border : 0px;
	background : #cf0061;
	padding : 10px 5px 0px 10px;
	margin : 0 0 5px 0;
}

fieldset.acces p
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #fff;
}

fieldset.acces li
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #fff;
}



div#contenu ul#menuInfo
{
	float : left;				/* Hauteur du bandeau de menu*/
	margin-top : 10px;	
	margin-left : 10px;		
	list-style : none;   	 	/* On cache les puces */
	padding : 0;
}

div#contenu ul#menuInfo li
{
	float : left;				/* On rend les li en flottant pour pouvoir les afficher horizontalement */
	margin-right : 5px;
}

div#contenu ul#menuInfo li a
{
	float: left;				/* Pour pouvoir dimensionner les liens a en mode block */
	padding-left : 5px;		/* Marges à l'intérieur des cellules du menu */
	font : small-caps bold 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;	
	letter-spacing : 0.8px;			
	color: #fff;				
	text-decoration : none ;
	background : url(Images/MenuOngletGauche.jpg); 
	background-repeat: no-repeat;
	background-position: 0% 0px;
}

div#contenu ul#menuInfo li a span
{
	float: left;
	padding-left : 5px;				
	padding-top: 9px;
  	padding-bottom: 8px;
  	padding-right: 10px;
	background-image : url(Images/MenuOngletDroit.jpg);
	background-repeat: no-repeat;
	background-position: 100% 0px;	
}

div#contenu ul#menuInfo li a:hover
{
	background-image : url(Images/MenuOngletGauche.jpg); /* Image en fond de la cellule quand on passe la souris */
	background-position : 0% -100px;
}

div#contenu ul#menuInfo li a:hover span
{
	background-image : url(Images/MenuOngletDroit.jpg);
	background-position : 100% -100px;
}



/*******************************************************/
/* Définition du contenu de la page avec menu vertical */
/*******************************************************/

div#contenuV
{
	margin-top : 0;			
	padding : 0 10px 0 180px;
}

div#contenuV h2	
{
	padding-left : 30px;
	line-height : 35px;
	font-size : 140%;
	font-weight :bold;
	background : url(Images/PetiteArabido2.jpg) no-repeat left bottom;
	color : #9b2;
	border-bottom : 1px solid #9b2;
	margin-bottom : 15px;
	margin-top : 5px;
}

div#contenuV h3	/* Titre h3 */
{
	margin-left : 15px;
	padding-left : 5px;	
	font : bold 120% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #9b2;
	margin-bottom : 15px;
	margin-top : 5px;
}

div#contenuV p	/* Paragraphes */
{
	padding-left : 10px;
	text-align : justify;
	line-height : 20px;
	margin-bottom : 10px;
}

div#contenuV p.gris	/* Paragraphes gris */
{
	color : #868c85;
}

div#contenuV p.rose	/* Paragraphes gris */
{
	color : #cf0061;
	font-size : 110%;
	font-weight : bold;
}

div#contenuV ul	/* Listes */
{
	padding-left : 30px;
	text-align : justify;
	line-height : 20px;
	list-style-type : square; 
	margin-bottom : 15px;
}

div#contenuV a
{
	color : #8a0;	
}

div#contenuV a:hover	
{
	color : #868c85; 
}

div#contenuV div.imageDroite
{
	float : right;
	margin-left : 15px;
}

div#contenuV div.imageDroite p
{
	font-size : 80%;
	width : 235px;
	margin : 5px auto 5px auto;
	padding-left: 0;
	text-align : center;
}

div#contenuV div.imageGaucheConsult
{
	float : left;
	margin : 20px 20px;
}

div#contenuV div.imageGaucheConsult p
{
	font-size : 80%;
	width : 290px;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}


/*****************************************************/
/* Formulaire de connection de la page d'accueil   */
/*****************************************************/

div#contenuV div#connection
{
	float : right;
	margin-left : 20px;
	border : 1px solid #868c85;
	padding : 5px 5px 5px 0;
	max-width : 35%;
}

div#contenuV p.connecter	
{
	margin-bottom : 10px;
	font : small-caps bold 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #8a0;	
}

div#contenuV p.connecterPetit	
{
	font : 85% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	margin : 2px 3px 2px 0px;
}

div#contenuV p.erreur	
{
	margin-bottom : 5px;
	font :  85% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #868c85;	
}

div#contenuV div.edito
{
	float : center;
	padding : 5px 5px 5px 5px;
	margin-left : 50px;
}

/************************************/
/* Compteur sur la page d'accueil   */
/************************************/

div#contenuV div.compteur
{
	float : right;
	margin-left : 20px;
	border : 1px solid #868c85;
	padding : 1px;
}

div#contenuV div.compteur p
{
	margin : 2px 3px 2px 0px;
}

div#contenuV div.compteur p.vert
{
	color : #8a0;
	font-weight : bold;
}

/******************************************/
/* Définition du contenu de la page Info  */
/******************************************/

div#contenuInfo
{
	margin-right : 15px; 			
	padding-left : 10px ;			
}

div#contenuInfo h2	/* Titre h2 */
{
	margin-bottom : 20px;
	margin-right : 20px;
	padding-top : 20px;
	padding-left : 30px;			
	line-height : 30px;			
	font-size : 140%;
	background : url(Images/PetiteArabido2.jpg) no-repeat left bottom;	
	color : #9b2;								
	border-bottom : 1px solid #9b2;		
}

div#contenuInfo p	/* Paragraphes */
{
	padding-right : 20px;
	text-align : justify;
	line-height : 20px;
	margin-bottom : 10px;
}

div#contenuInfo p.centre	/* Paragraphes centré */
{
	padding-left : 30px;
	padding-right : 20px;
	text-align : center;
	margin-bottom : 5px;
}

div#contenuInfo p.gris	/* Paragraphes gris */
{
	color : #868c85;
}

div#contenuInfo span.vert	/* Texte vert */
{
	color : #7a9810;
}

div#contenuInfo span.gris	/* Paragraphes gris */
{
	color : #868c85;
}

div#contenuInfo ul	/* Listes */
{
	padding-left : 60px;
	text-align : justify;
	line-height : 20px;
	list-style-type : square; 
	margin-bottom : 15px;
}

div#contenuInfo a	
{
	color : #8a0;	
}

div#contenuInfo a:hover	
{
	color : #868c85; 
}

div#contenuInfo img
{
	border : 0px;
}

div#contenuInfo div.imageDroite
{
	float : right;
}

div#contenuInfo div.imageDroite p
{
	font-size : 80%;
	width : 100%;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}

div#contenuInfo div.imageGauche
{
	float : left;
	margin-left : 30px;
}

div#contenuInfo div.imageGauche p
{
	font-size : 80%;
	width : 400px;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}

div#contenuInfo div.imageCentre
{
	text-align : center;
	margin : 20px auto 10px auto;
	
}

div#contenuInfo div.imageCentre p
{
	font-size : 80%;
	width : 400px;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}



/****************************************************************************************/
/* 					DIVERS						*/
/****************************************************************************************/


/********************************/
/* Définition des textarea  	*/
/********************************/

textarea
{	
	overflow : auto;
}



/********************************/
/* Définition des tableaux  	*/
/********************************/


div#tableau
{
	overflow : auto; 
	max-height : 550px;
	width : 100%;
}

table /* Tableau centré */
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	border-collapse : collapse;
	border : 1px solid #868c85;
	margin : 10px auto 15px auto;
}

table.gauche /* Tableau pas centré */
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	border-collapse : collapse;
	border : 1px solid #868c85;
	margin: 10px 0 0 10px;
}

table.gauche2 
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	border-collapse : collapse;
	border : 1px solid #868c85;
	margin: 10px 0 20px 20px;
}

table.gauche3 
{
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	border-collapse : collapse;
	border : 0px;
	margin: 10px 0 10px 10px;
}

table.gauche3 td
{
	width : 400px;
	text-align : left;
	padding-left : 10px;
}

th, th.tableau /* Nom des colonnes */
{
	border : thin solid #868c85;
	padding : 5px;
	text-align : center;
}

th.tableau:hover
{
	color : #9b2;
	cursor: pointer;
}

td /* Colonnes */
{
	border : thin solid #868c85;
	padding : 5px;
	text-align : center;
}

tr /* Lignes */
{
	height : 30px;
}




	
/***********************************************/
/* Définition du cadre de bienvenue de l'index */
/***********************************************/

div#index
{
	margin : 0 auto;
	width : 85%;		
}	

div#index h2
{
	text-align : center;
	font : small-caps bold 250% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #9b2;
	margin-bottom : 15px;
	margin-top : 20px;
}

div#index h3
{
	text-align : center;
	font :  small-caps bold 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #9b2;
	margin-bottom : 15px;
}

div#index p
{
	text-align : center;
	font :  small-caps bold 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #9b2;
	margin-bottom : 15px;
}

div#index div.centrage 
{
	margin : 0 auto;
	text-align: center;
	width : 100%;
}

div#index div.centrage div.image
{
	float : left;
	width : 40%;
}

/************************************************/
/* Définition du cadre des sommaires à 2 images */
/************************************************/

div#sommaire
{
	height : 240px;	
	width : 85%;
	margin : 0 auto;
	border : 1px solid #ab4;
	padding : 20px 20px 0 0;
	margin-top : 30px;
	text-align : center;
}	

div#sommaire div.image
{
	float : left;
	margin-left : 10px;
	width : 48%;
}

div#sommaire div.image img
{
	max-height : 150px;
	border : 0;
}

div#sommaire div.image p
{
	width : 70%;
	height : 65px;
	margin : 0 auto 20px auto;
	text-align : center;
}

div#sommaire div.image p.petit
{
	width : 70%;
	height : 40px;
	margin : 0 auto 20px auto;
	text-align : center;
}

div#sommaire div.image a
{
	color : #8a0;
	font : small-caps bold 125% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	text-decoration : none;
}

div#sommaire div.image a:hover
{
	color : #868c85;
}



/************************************************************/
/* Définition du cadre des sommaires d'insertion de données */
/************************************************************/

div#sommaire2
{
	height : 300px;	
	width : 60%;
	margin : 0 auto;
	border : 1px solid #ab4;
	padding : 10px 50px 10px 50px;
	text-align : center;
}	

div#sommaire2 a	/* Liens */
{
	color : #8a0;
	font : small-caps bold 125% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	text-decoration : none;
}

div#sommaire2 a:hover	
{
	color : #868c85;
}



/************************************************/
/* Définition du cadre des sommaires à 3 images */
/************************************************/

div#sommaire3
{
	height : 280px;	
	width : 95%;
	margin : 0 auto;
	border : 1px solid #ab4;
	padding : 20px 5px 0 0;
	margin-top : 30px;
	text-align : center;
}	

div#sommaire3 div.image
{
	float : left;
	margin-left : 0px;
	width : 25%;
}

div#sommaire3 div.image img
{
	max-height : 170px;
	border : 0;
}

div#sommaire3 div.image p
{
	width : 70%;
	height : 60px;
	margin : 0 auto 20px auto;
	text-align : center;
}

div#sommaire3 div.image a
{
	color : #8a0;
	font : small-caps bold 125% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	text-decoration : none;
}

div#sommaire3 div.image a:hover
{
	color : #868c85;
}




/***************************************************************/
/* Définition du cadre de message de demande d'authentification  */
/***************************************************************/

div#authentification
{
	height : 250px;	
	width : 50%;
	margin : 20px auto;
	border : 1px solid #ab4;
	padding : 10px 50px 10px 50px;
}	

div#authentification h2
{
	margin-top : 15px;
	margin-bottom : 25px;
	text-align : center;
	font : bold 140% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #9b2;
}

div#authentification p
{
	margin-bottom : 8px;
	text-align : center;
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #868c85;
}	

div#authentification p.grand
{
	margin-bottom : 15px;
	text-align : center;
	font : bold 120% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #868c85;
}

div#authentification a
{
	color : #8a0;
	font : 100% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
}

div#authentification a:hover	
{
	color : #868c85;
}



/************************************************/
/* Définition de la ligne horizontale invisible */
/************************************************/

hr 
{
	clear : both;
	visibility : hidden;
	margin-top : 10px;
	margin-bottom : 10px;
}


/**********************************/
/* Définition de parties centrées */
/**********************************/

div.centrage 
{
	margin : 0 auto;
	text-align: center;
	width : 100%;
}

div#centre
{
	height : 200px;	
	width : 100%;
	margin : 0 auto;
	border : 0px;
	padding : 10px 0 0 0;
	text-align : center;
}	

div#centre img
{
	border : 0px;
}

div#centre div.image
{
	float : left;
	margin-left : 20px;
	width : 45%;
}

div#centre div.image2
{
	float : left;
	width : 50%;
}

div#centre div.image p
{
	font-size : 80%;
	width : 70%;
	margin : 0 auto 5px auto;
	padding-left: 0;
	text-align : center;
}




/******************************************/
/* Définitions des bandeaux d'image titre */
/******************************************/


img.bandeau
{
	width : 65%;
	max-width : 550px;
}

img.bandeau2
{
	width : 60%;
	max-width : 400px;
}


/******************************/
/* Définitions des graphiques */
/******************************/

img.graph
{
	width : 100%;
	max-width : 700px;
}

img.graph2
{
	width : 100%;
	max-width : 1000px;
}


/***************************************/
/* Définitions des images de l'accueil */
/***************************************/


div.imageAccueil
{
	float : left;
	margin-right : 15px;
	margin-top : 20px;
	text-align : center;
}

div.imageAccueil p
{
	font-size : 80%;
	width : 100%;
	margin : 0 auto;
	padding-left: 0;
	text-align : center;
	font-style : italic;
}

div.imageAccueil img
{
	height : 50px;
	border : 0;
}



/*******************************************/
/* Définition du lien vers le haut de page */
/*******************************************/

p#hautPage
{
	font : bold 90% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;	
	float : right;
	text-align: right; 
	font-weight : bold;
}

p#hautPage a
{
	color : #868c85;	
}

p#hautPage a:hover	
{
	color : #8a0; 
}


/*****************************************/
/* Définition de l'affichage des erreurs */
/*****************************************/

span.erreur
{
	color : #FF0000;
	display : none;
	font-weight : bold;
	margin-left : 20px;
}



/******************************/
/* Définition des info-bulles */
/******************************/

span.infobulle
{
	display : none;
	position : absolute;
	background : #cf0061;
	padding : 8px;
	font : 110% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #fff;
	max-width : 400px;
	text-align : justify;
}


/*******************************************/
/* Définition de la div qui affiche du XML */
/*******************************************/

div#contenu div.xml
{
	margin-left : 20px;
	text-align : left;
	background : #cf0061;
	padding : 15px 5px;
	font : bold 90% "Trebuchet MS", Verdana, "Lucida Grande", Helvetica, sans-serif;
	color : #fff;
	width : 550px;
}

div#contenu div.xml p
{
	line-height : 12px;	
}