body	{
	font-family: 			verdana, arial, sans-serif	;			/* la derniere police doit etre une police generique */
	text-align:			center				;
/*      background:                     #94DE9D                         ; */                    /* Fond vert */
        background:                     #5BDDDB                         ;                       /* Fond bleu clair */
	margin:				3px 0 3px 1px				;
	padding:			3px 0 3px 1px				;
/*	background:			#1494E2				; */ 			/* Fond bleu */
	}

/*
body 	{
	margin: 			0 				;
	padding: 			0 				;
	position: 			absolute 			;
	width: 				100% 				;
	height: 			100% 				;
	font-family: 			verdana, arial, sans-serif	;
	}
*/

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* la bande superieure de presentation */
.bandesup
	{
	width:				97%				;
	margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
	float:				left				;
	display:			none				;
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande superieure, a gauche le logo */
.logo	{
	width:                          8%                             ;
	height:                         15%                             ;
	float:                          left                            ;
	margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
	display:			none				;
	}

.logo a	img {
	border:				none				;
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande superieure, on trouve ensuite le logo et l'affiliation a la CNIL */
.count	{
	display:			block				;
	width:                          14%                             ;
        height:                         15%                             ;
	margin:				0 0 0 0				;
	padding:			0 0 0 0				;
	line-height:			1.5em				;
        float:                          left                            ;
        margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
	display:                        none                            ;
	}

.count h1       {
        font-family:                    sans-serif                      ;
        text-align:                     center                          ;
        font-size:                      60%                             ;
	line-height:			1.1em				;
	margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
		}

.count p	{	
        font-family:                    sans-serif                      ;
        text-align:                     center                          ;
        font-size:                      60%                             ;
	line-height:			1.1em				;
	margin:				0 0 0 0				;
	padding:			0 0 0 0				;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande superieure, on trouve ensuite le bandeau avec l'image de presentation qui pourrait varier */
.bandeau	{
	width:                          75%                             ;
        float:                          left                            ;
        margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
        text-align:                     center                          ;
        font-family:                    sans-serif                      ;
        font-style:                     normal    			;
	display:			none				;
		}

.bandeau h1	{
                text-align:             center                  ;
                font-size:              95%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
		}

.bandeau p	{
                text-align:             center                  ;
                font-size:              70%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande superieure, a gauche le logo */
.lastinfo	{
	float:                          left                            ;
	margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
	border: 			none		;
	display:			none				;
	}

.lastinfo a	img {
	border:				none				;
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Tentative de definition de la classe des boutons radio  */
.radiobut	{
	background-color:		#DDFFFF; 
	border:				1px solid #DDDDDD;
	width:				1.2em;
	height:				1.2em;
	display:			none;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Definition du style des auteurs des compte rendus  */
.signeauteurs   {
                float:                  right;
                border:                 none;
                font-weight:            bold;
                margin:                 0 0 0 0 ;
                padding:                0 0 0 0 ;
                }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Definition de la classe des apercu pour afficher le debut d'une page  */
.apercu {
        width:                          74%                             ;
        height:                         40%                             ;
        overflow-y:                     auto                            ;
        overflow-x:                     auto                            ;
        float:                          left                            ;
        margin:                         0 0 0 0                         ;
        padding:                        0 0 0 0                         ;
        text-align:                     center                          ;
        font-family:                    sans-serif                      ;
        font-style:                     normal                          ;
        border:                         solid 1px grey                  ;
		display:		none			;
                }

.apercu h1      {
                text-align:             center                  ;
                font-size:              50%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
                }

.apercu h2      {
                text-align:             center                  ;
                font-size:              80%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
                }



.apercu p       {
                text-align:             justify                  ;
                font-size:              70%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
                }

.buttonedit     {
                width:                  25%                     ;
                border:                 none            ;
                margin:                 50px 0 50px 0           ;
                padding:                0 0 0 0                 ;
                float:                  left                    ;
		display:		none			;
                }

.generaledit    {
                width:                  95%                     ;
                border:                 none            ;
                margin:                 0 0 0 0                 ;
                padding:                0 0 0 0                 ;
                float:                  left                    ;
		display:		none			;
                }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* le cadre du warning en bas de page */
.warning	{
        background:             #bfb656					;
        border:                 solid 1px black                         ;
        width:                  97%                                     ;
        float:                          left                            ;
        text-align:                     center                          ;
	display:			none				;
                margin:                         5px 0 5px 0px                      ;
                padding:                        0px 0 0px 5px                ;
		}

.warning p 	{
                font-family:            Verdana, Helvetica                      ;
                font-size:              11px                     ;
                line-height:                    0.9em                           ;
                margin:                         0px 5px 0px 5px                      ;
                padding:                        0px 5px 0px 5px                ;
                }

.warning a 	{
                font-family:            Verdana, Helvetica                      ;
                font-size:              11px                     ;
                line-height:                    0.9em                           ;
                margin:                         0px 0 0px 0                      ;
                padding:                        0px 0 0px 0                ;
                }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* la bande superieure de menu general */
.menuhaut	{
                width:                  98%                     ;
                margin:                 5px 0 5px 5px                         ;
                padding:                5px 0 5px 0                         ;
                float:                  left                    ;
                line-height:            0.9em                           ;
		display:                        none                            ;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande superieure de menu general, on trouve les items sur lesquels on clique */
#menuitem                {
                float:                  left;
                font-size:              80%;
                font-family:            arial, verdana, sans-serif      ;
                line-height:            0.8em;
                padding:                0 ;
                margin:                 0 ;
		display:                        none                            ;
                }

#menuitem ul     {
                padding:                0px 0px 0 0px ;                 /* Marge en haut de 3px, a droite de 1px , en bas de 0 , a gauche de 1px */
                margin:                 0;
                list-style:             none;                           /* Supprime les listes par defaut */
                }

#menuitem li     {
                float:                  left;                           /* Place les elements des listes les uns a cote des autre de gauche a droite */
                margin:                 3px 2px 3px 2px;
                padding:                3px 2px 3px 2px;
                border:                 solid black                     ;
                border-width:           1px 3px 3px 1px         ;
                background-color:       yellow                        ;
                }

#menuitem a      {
                display:                block;
                padding:                2px 4px 4px 4px;
                text-decoration:        none;
                font-weight:            bold;
                color:                  gray;
                }

    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
#menuitem a      {
                float:none;
                }
    /* End IE5-Mac hack */

#menuitem a:hover {
/*               color:                  yellow; */
                color:                  blue;
                }

#menuitem #current_mitem {
/*              background-color:       white   ;               */
                }

#menuitem #current_mitem a    {
                        color:                  red;                  /* au lieu de rouge : #333; */
                        }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* la bande gauche de navigation */
.navgauche	{
		width:                  22%                     ;
                margin:                         0 0 0 0                         ;
                padding:                        0 0 0 0                         ;
		float:                  left                    ;
		display:                        none                            ;
                }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande de menu gauche, on trouve le cadre des nouveautes */
.neuf	{
	background-color:               #CAC0C0                         ;
	border: 			solid 2px black 		;
        border-width: 			1px 3px 3px 1px ;
        width:                          99%				;
	float:				left				;
	padding:                0 0 0 0                         ;
        margin:                 0 0 0 0                         ;
	display:                        none                            ;
	}

.neuf	p	{
		color:			red				;
		text-indent: 		1px				;	/* indentation par rapport a la bordure gauche */
		padding:		0 0 0 0 			;
		margin:			0 0 0 0				;
		text-align:			center				;
		}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande de menu gauche, on trouve ensuite le cadre du sous menu */
.sousmenu	{
	background-color:               yellow                          ;
	border: 			solid 2px green 		;
        border-width: 			1px 3px 3px 1px                 ;
	width:				98%				;   
/*	height:				41%				;	*/
/*	overflow:			auto				;	*/
	font-size:			94%				;
	text-align:                     left				;
	float:                          left                            ;
	display:                        none                            ;
	}

/* --------------------------------------------------------------------------------------------------------------------- */
/* Styles des onglets de menu de gauche */

.onglet         {
		float:                  left; 
                width:                  99%;
		border: 		none				;
                font-size:              70%;
                font-family:            arial, verdana, sans-serif      ;
		font-style:		italic				;
                line-height:            normal;
		text-align:		left				;
                padding:                0 0 0 0 ;
                margin:                 0 0 0 0 ;
		display:                        none                            ;
                }

.onglet ul      {
                padding:                3px 2px 0 1px ;                 /* Marge en haut de 3px, a droite de 1px , en bas de 0 , a gauche de 1px */
                margin:                 0;
                list-style:             none;                           /* Supprime les listes par defaut */
                }

.onglet li      {
		float:                  left;    
                width:                  100%;
                margin:                 0 0 0 4px;
                padding:                0 0 0 0;                        /* Marges autour des noms des onglets */
                border-left-style:      none    ;
                }

.onglet a       {
                text-decoration:        none;
                font-weight:            bold;
                color:                  #765;
                }

    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
.onglet a       {
                float:none;
                }
    /* End IE5-Mac hack */

.onglet a:hover {
                color:                  red;
/*                border:                 solid 1px black ; */
                padding:                2px 4px 4px 4px;
                }

.onglet #current {
/*              background-color:       white   ;               */
                border:                 solid 1px black ;
	background-color:               yellow                          ;
                }

.onglet #current a      {
                        color:                  green;                  /* au lieu de rouge : #333; */
                        }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dans cette bande de menu gauche, on trouve enfin la place des vignettes */
.photo	{
	width:                          98%                             ;
	float:                          left                            ;
	padding:			0 0 0 0				;
	margin:				0 0 0 0				;
	display:                        none                            ;
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Description de chaque vignette qui doit s'afficher dans chaque photo */
.vignette  {
        margin:                         3px 3px 3px 3px                 ;
        padding:                         0 0 0 0                         ;
        float:                          left                            ;
        border:                         none				;
	display:                        none                            ;
        }





/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  */
hr {
clear: both;
visibility: hidden;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Creation de la boite corps ou les documents apparaissent. C'est le cors du site */
.corps	{
	width:				97%				;
	float:				left				;
	border: 			none		 		; /* au lieu de dotted 2px black */ 
	text-align:			justify				;
	font-size:                      80%                     ;
	padding:                        0 0 0 5px                         ;
        margin:                         0 0 0 0                         ;

	}

.corps h1       {
        text-align:                     left                           ;
        line-height:                    1.5em                           ;
        padding:                        0 0 0 0                         ;
        margin:                         0 0 0 0                         ;
        font-size:                      105%                            ;
        color:                          #553388                           ;
        font-style:                     italic                          ;
                }


.corps h2	{
	text-align:			center				;
	line-height:			1.1em				;
	padding:			0 0 0 0 			;
	margin:				0 0 0 0				;
		}

.corps h3       {
        text-align:                     center                          ;
        line-height:                    1.1em                           ;
        padding:                        0 0 0 0                         ;
        margin:                         0 0 0 0                         ;
        font-size:                      110%                            ;
        color:                          brown                           ;
                }


.corps	h4	{
	color:				red				;
	text-align:                     center                          ;
        line-height:                    2em                           ;
	font-size:                      300%                     ;
	font-family: 			arial, sans-serif      ;                       /* la derniere police doit etre une police generique */
		}

.corps	h5	{
	color:				pink				;
	text-align:                     center                          ;
        line-height:                    2em                           ;
	font-size:                      300%                     ;
	font-family: 			arial, sans-serif      ;                       /* la derniere police doit etre une police generique */
		}

.titrepresent	{
		border:			solid 1px black		;
		background-color:	#c4c4c4			;
		margin:			100px 0 0 150px 		;
		padding:		0 0 0 0			;
		width:			60%			;
		} 

.titrepresent h4 	{
			text-align:	center			;
			color:		#81268f			;
			font-size:	160%			;
			}

.titrepresent h3	{
			text-align:	center			;
			color:		black			;
			font-size:	140%			;
			}
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* le cadre du pied de page */
.footer         {
        background:             #F8E0F7                                 ;
        border:                 solid 1px black                         ;
        width:                  97%                                     ;
        float:                          left                            ;
        text-align:                     center                          ;
                margin:                         5px 0 5px 0px                      ;
                padding:                        0px 0 0px 5px                ;
		display:                        none                            ;
                }

.footer p       {
                font-family:            Verdana, Helvetica                      ;
                font-size:              9px                     ;
                line-height:                    0.9em                           ;
                margin:                         0px 0 0px 0                      ;
                padding:                        0px 0 0px 0                ;
                }


.footer a       {
                border:                 none  ;
                text-decoration:        none;
                }


.footer a:hover {
                border:                 none ;
                }



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher les images        */
.images         {
        list-style:                     none;
	text-align:			center;
                }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste pour les reunions   */
.reunion	{
	list-style-type:		none;
	margin:				0 0 0 0 ;
	padding:			0 0 0 0 ;
	line-height:			1em ;
		}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher des coordonnées simplement           */
.adresses	{
	float:                          left;
		}

.adresses li	{
	list-style:             	none;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher un simuli tableau                     */
.tableh1 ul	{
	list-style-type: 		none;
		}

.tableh1 li	{
	width: 				30%;
	float: 				left;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher un simuli tableau                     */
.tableh2 li     {
        list-style-type:                none;
	float:                          left;
        font-family:                    helvetica, sans-serif		;			/* la derniere police doit etre une police generique */
	font-size:                      75%                             ;
	font-style:			normal				;
	text-align:			left				;
                }

.tableh2a 	{
	width:				20%				;	/* 19% */
		}

.tableh2b       {
        width:                          17%                             ; 	/* 19% */
                }

.tableh2c       {
        width:                          45%                             ;	/* 51% */
                }

.tableh2d       {
        width:                          10%                             ;	/* 11% */
                }


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonné Liste des Palmares des neuf */
.tablehp li     {
        list-style-type: none;
        float: left;
        font-family: helvetica, sans-serif;                              /* la derniere police doit etre une police generique */
        font-size:  68% ;						/* Original : 75% ME nok , 72% pas mieux , 68% ME ok cf BL 19/05/05 */
        font-style: normal ;
        text-align: center ;
                }

.tablehpa { width: 10% ; }

.tablehpb { width: 15% ; }

.tablehpc { width: 15% ; }

.tablehpd { width: 15% ; }

.tablehpe { width: 15% ; }

.tablehpf { 
		width: 11% ;
	 }

.tablehpg { width: 11% ; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de tableau pour le top diagonales */
.tableautopd	{
	border:			none	;
	border-collapse:	collapse		;
	width:			100%			;
		}

.tableautopd th	{
	font-family:		monospace		;
		}

.tableautopd td  {
        text-align:		center			;
                }

/* ------------------------------------------------------------------------ */
/* Definir un style de tableau pour le palmares des eurodiagonales */
.tableauediagos {
        border:                 none   ;
        border-collapse:        collapse                ;
        font-size:              98%                     ;
        width:                  100%                    ;
                }

.tableauediagos th      {
        font-family:            monospace               ;
        border:                 none                    ;
                        }

.ordreed         {
        width:                  8%                      ;
                                }

.presuied        {
        width:                  10%                     ;
                                }

.nomed      {
        width:                  18%                     ;
                                }

.prenomed      {
        width:                  18%                     ;
                                }

.depted      {
        width:                  4%                     ;
                                }

.fcycleed      {
        width:                  17%                     ;
                                }

.ftempsed      {
        width:                  11%                     ;
                                }

.tableauediagos td      {
        text-align:             center                  ;
                        }



/* ------------------------------------------------------------------------ */
/* Definir un style de tableau pour le palmares des neuf diagonales */
.tableau9diagos {
        border:                 none   ;
        border-collapse:        collapse                ;
        font-size:              98%                     ;
        width:                  100%                    ;
                }

.tableau9diagos th      {
        font-family:            monospace               ;
        border:                 none                    ;
                        }

.ordre9         {
        width:                  8%                      ;
                                }

.presui9        {
        width:                  10%                     ;
                                }

.nom9      {
        width:                  18%                     ;
                                }

.prenom9      {
        width:                  18%                     ;
                                }

.dept9      {
        width:                  4%                     ;
                                }

.fcycle9      {
        width:                  17%                     ;
                                }

.ftemps9      {
        width:                  11%                     ;
                                }

.tableau9diagos td      {
        text-align:             center                  ;
                        }

/* ------------------------------------------------------------------------ */
/* Definir un style de tableau pour le palmares des dix-huit diagonales */
.tableau18diagos {
        border:                 none   ;
        border-collapse:        collapse                ;
        font-size:              102%                     ;
        width:                  100%                    ;
                }

.tableau18diagos th      {
        font-family:            monospace               ;
        border:                 none                    ;
                        }

.ordre18         {
        width:                  8%                      ;
                                }

.presui18        {
        width:                  10%                     ;
                                }

.nom18      {
        width:                  18%                     ;
                                }

.prenom18      {
        width:                  18%                     ;
                                }

.dept18      {
        width:                  4%                     ;
                                }

.fcycle18      {
        width:                  17%                     ;
                                }

.ftemps18      {
        width:                  11%                     ;
                                }

.tableau18diagos td      {
        text-align:             center                  ;
                        }




/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de tableau pour les hotels */
.tableauhotel    {
        border:                 dashed 1px red    ;
        width:                  100%                    ;
                }

.tableauhotel th {
        font-family:            monospace               ;
	font-size:              90%                     ;
                }

.tableauhotel td  {
        text-align:             center                  ;
	font-size:              80%                     ;
                }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste pour les photos a visualiser              */
#phgallery    {
                text-align:             center;
                width:                  100%;
                margin-left:            5px;
                margin-right:           5px;
                }


#phgallery li {
                list-style-type:        none;
                }

.photoitem      {
                width:                  180px;
                text-align:             center;
                border:                 solid 1px black;
                background-color:       #F8F8F8;
                padding:                10px;
                height:                 230px;
                margin-left:            10px;
                margin-right:           10px;
                margin-bottom:          20px;
                float:                  left;
                }


html>body .photoitem {
                height:                 auto;
                min-height:             230px;
                }

.titrephoto     {
                font-size:              16px;
                font-weight:            bold;
                color:                  #aa2800;
                text-decoration:        none;
                }

.commentphoto   {
                font-weight:            bold;
                color:                  black;
                text-decoration:        none;
                }

.detailphoto    {
                margin:                 5px;
                }

.linkphoto      {
                text-decoration:        none;
                }




/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher un simuli tableau                     */
.tableha ul     {
        list-style-type:                none;
                }

.tableha li     {
	width: 				30%;
        float:                          left;
                }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* */
.tablefic	{
	text-align:			center;
	float:				left ;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style de liste non ordonnée pour afficher les lettres de l'adf			*/
.lettre		{
	position:			absolute;
	width:				20%;
	left:				40%;
	list-style-type:                none;
	text-align:			center;
		}

.lettre li      {
        float:                          left;
                }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*  Definir un style pour une simple boite                                                      */
.boiteOLD		{
	position: 			absolute				;
	width:				40%					;
	background-color:		yellow					;
	text-align:			center					;
	border:				solid 2px black				;
	left:				30%					;
		}

.boite		{
	background-color:		yellow					;
	text-align:			center					;
	border:				solid 2px black				;
	left:				30%					;
	margin:				0 0 0 0 ;
	padding:			0 0 0 0 ;
		}



/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Definition des styles de sous menus dans les onglets  */


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* Definition des styles de sous menus dans les onglets  */
.ssmenu		{
		font-family:		arial, verdana, sans-serif		;		/* la derniere police doit etre une police generique */
		font-size:		80%			;
		text-align:		left			;
		margin:			0                       ;
		padding:		0 0 0 2px                ;
		}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*              Classes de zoom sur hover                       */
/* Classe 600x450 (photo) et 200x150 (vignette) en format horizontal */
.popup 		{
	border:			2px solid red 		;
	background:		#667788 ;
		}

/* ----------------------------------------------------------------------------------------------- */
/* Classe de zoom pour les photos                                                     */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/*              Classes de zoom sur hover                       */
/* Classe 600x450 (photo) et 200x150 (vignette) en format horizontal */
.zoomh           {
        border:			none			;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  98%;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
}

.zoomh p {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
        }

.zoomh a img     {
        float:          right;
        width:          200px; 
        height:         150px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                }

.zoomh a:hover img {
        width:          600px;
        height:         450px;  
                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoomh a:hover   {
        padding:        0;
                }

/* ----------------------------------------------------------------------------------------------- */
/* Classe 450x600 (photo) et 150x200 (vignette) en format vertical */
.zoomv           {
        border:                 none		;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  98%;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
}

.zoomv  p {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
        }

.zoomv  a img    {
        float:          right;
        width:          150px;
        height:         200px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                }

.zoomv  a:hover img {
        width:          450px;
        height:         600px;
                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoomv  a:hover  {
        padding:        0;
                }









/* ----------------------------------------------------------------------------------------------- */
/* Classe 600x254 (photo) et 200x85 (vignette) en format horizontal */
.zoom600x254-200x85h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
}

.zoom600x254-200x85h  p 	{
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
        			}

.zoom600x254-200x85h  a img    	{
        float:          right;
        width:          200px;
        height:         85px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                		}

.zoom600x254-200x85h  a:hover img {
        width:          600px;
        height:         254px;
                		}

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom600x254-200x85h  a:hover  {
        padding:        0;
                		}


/* ----------------------------------------------------------------------------------------------- */
/* Classe 600x322 (photo) et 200x107 (vignette) en format horizontal */
.zoom600x322-200x107h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
}

.zoom600x322-200x107h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom600x322-200x107h  a img     {
        float:          right;
        width:          200px;
        height:         107px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom600x322-200x107h  a:hover img {
        width:          600px;
        height:         322px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom600x322-200x107h  a:hover  {
        padding:        0;
                                }


/* ----------------------------------------------------------------------------------------------- */
/* Classe 600x634 (photo) et 200x211 (vignette) en format horizontal */
.zoom600x634-200x211h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
				}

.zoom600x634-200x211h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom600x634-200x211h  a img     {
        float:          right;
        width:          200px;
        height:         211px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom600x634-200x211h  a:hover img {
        width:          600px;
        height:         634px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom600x634-200x211h  a:hover  {
        padding:        0;
                                }


/* ----------------------------------------------------------------------------------------------- */
/* Classe 400x300 (photo) et 200x150 (vignette) en format horizontal */
.zoom400x300-200x150h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom400x300-200x150h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom400x300-200x150h  a img     {
        float:          right;
        width:          200px;
        height:         150px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom400x300-200x150h  a:hover img {
        width:          400px;
        height:         300px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom400x300-200x150h  a:hover  {
        padding:        0;
                                }


/* ----------------------------------------------------------------------------------------------- */
/* Classe 600x533 (photo) et 200x178 (vignette) en format horizontal */
.zoom600x533-200x178h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom600x533-200x178h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom600x533-200x178h  a img     {
        float:          right;
        width:          200px;
        height:         178px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom600x533-200x178h  a:hover img {
        width:          600px;
        height:         533px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom600x533-200x178h  a:hover  {
        padding:        0;
                                }

/* ----------------------------------------------------------------------------------------------- */
/* Classe 600x371 (photo) et 200x124 (vignette) en format horizontal */
.zoom600x371-200x124h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom600x371-200x124h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom600x371-200x124h  a img     {
        float:          right;
        width:          200px;
        height:         124px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom600x371-200x124h  a:hover img {
        width:          600px;
        height:         371px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom600x371-200x124h  a:hover  {
        padding:        0;
                                }


/* ----------------------------------------------------------------------------------------------- */
/* reportage andre tignon 11/2003 photo de groupe */
.zoom400x264-200x132h           {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom400x264-200x132h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom400x264-200x132h  a img     {
        float:          right;
        width:          200px;
        height:         132px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom400x264-200x132h  a:hover img {
        width:          400px;
        height:         264px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom400x264-200x132h  a:hover  {
        padding:        0;
                                }



/* ----------------------------------------------------------------------------------------------- */
/* reportage andre tignon 11/2003 photo etrun */
.zoom400x330-200x165h       {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom400x330-200x165h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom400x330-200x165h  a img     {
        float:          right;
        width:          200px;
        height:         165px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom400x330-200x165h  a:hover img {
        width:          400px;
        height:         330px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom400x330-200x165h  a:hover  {
        padding:        0;
                                }



/* ----------------------------------------------------------------------------------------------- */
/* reportage andre tignon 11/2003 photo bouteillier lebon */
.zoom400x288-200x144h      {
        border:                 1px solid #000          ;
        background:             #ddd;
        color:                  #000;
        float:                  left            ;/* Les blocs d'images se placent les uns a cote des autres , mais c'est trop grand , retour a la ligne */
        width:                  700px;
        margin:                 5px;                    /* valeur initiale: 20px */
        padding:                5px;                    /* valeur initiale: 10px */
        font:                   12px verdana, helvetica, arial, sans-serif;
                                }

.zoom400x288-200x144h  p         {
        padding:                0;
        margin:                 0;
        margin-bottom:          10px;
                                }

.zoom400x288-200x144h  a img     {
        float:          right;
        width:          200px;
        height:         144px;
        border:         1px solid #000;
        margin:         0 0 5px 5px;
                                }

.zoom400x288-200x144h  a:hover img {
        width:          400px;
        height:         288px;
                                }

/* Il faut faire croire a IE que c'est un lien sinon il ne reagit pas au passage de la souris */
/* On lui fixe le padding a zero, histoire de faire quelque chose, pour plus d'informations,  */
/* il faut demander a Bill Gates mais pas a JPB */
.zoom400x288-200x144h  a:hover  {
        padding:        0;
                                }


/* ----------------------------------------------------------------------------------------------- */
/* Classes pour les images sepia 								   */
/* ----------------------------------------------------------------------------------------------- */
.boite_sepiaH		{
	border:			solid 1px black		;
	background-color:	#ddd			;
	width:			175px		;
	height:			260px		;
	margin:			2px 2px 2px 2px	;
	padding:		5px 2px 0px 2px ;
			}

.boite_sepiaH a img  	{
	border:			none		;
        		}

.boite_sepiaH p		{
	padding:		0 0 0 0		;
	margin:			0 0 0 0		;
	text-align:             center          ;
        line-height:            0.5em           ;
        font:                   10px verdana, helvetica, arial, sans-serif;
			}

.boite_sepiaV           {
	border:			solid 1px black		;
	background-color:	#ddd			;
	width:			175px		;
	height:			260px		;
	margin:			2px 2px 2px 2px	;
	padding:		5px 0px 0px 3px ;
			}

.boite_sepiaV a img	{
        border:                 none            ;
                        }

.boite_sepiaV p		{
	padding:		0 0 0 0		;
	margin:			0 0 0 0		;
	text-align:             center          ;
        line-height:            0.5em           ;
        font:                   10px verdana, helvetica, arial, sans-serif;
			}

.boite_sepiaP           {
        border:                 solid 1px black         ;
        background-color:       #ddd                    ;
        width:                  630px           ;
        margin:                 2px 2px 2px 2px ;
        padding:                5px 2px 50px 2px ;
                        }

.boite_sepiaP a img     {
        border:                 none            ;
                        }

.boite_sepiaP p         {
        padding:                0 0 0 0         ;
        margin:                 0 0 0 0         ;
        text-align:             center          ;
        line-height:            0.5em           ;
        font:                   10px verdana, helvetica, arial, sans-serif;
                        }


p.id_photo		{
	color:			green		;
	padding:		0 0 0 0		;
	margin:			0 0 0 0		;
        font-size:              9px             ; 
        font-style:             italic          ;
        text-align:             right           ;
			}

/* ------------------------------------------------------------------------------------------------ */
/*                 Fin de la Feuille de style                                                       */
/* ------------------------------------------------------------------------------------------------ */