/* ************************************************************************************************ */
/*                                                                                                  */
/*                                  Sommaire juillet 2013                                             */
/*                                                                                                  */
/*  1: - Multicolonnage SAUF POUR IE9 À CE JOUR                                                     */
/*  2: - Liens                                                                                      */
/*  3: - Affiches illustrations incrusté dans le texte des comptes rendus                           */
/*  4: - Photos - Illustrations  format Paysage pour compte rendu laissant visible les légendes     */
/*  5: - Photos - Illustrations  format Portrait pour compte rendu laissant visible les légendes    */
/*  6: - Boutons en relief                                                                          */
/*  7: - Boutons flèches haut et bas                                                                */
/*  8: - Infobulle personnalisée                                                                    */
/*  9: - Elément couvrant tout l'écran                                                              */
/* 10: - Tables                                                                                     */
/* 11: - Blocs                                                                                      */
/* 12: - Fonte Snowdrft (pour Noël)                                                                 */
/* 13: - Centrer un élémént                                                                         */
/* 14: - Rotation de 360 degrés dans les 2 sens d'une image                                         */
/* 15: - Survol d'une image                                                                         */
/*                                                                                                  */
/* ************************************************************************************************ */
/*                                                                                                  */
/*                                  Auteur: Alain Van Boxel                                         */
/*                                                                                                  */
/* ************************************************************************************************ */
/*                                  Remarques                                                       */
/*                                                                                                  */
/* Ces styles ne sont complétement interprétés que par les dernières version des navigateurs.       */
/*                                                                                                  */
/* Préfixes prioritaires utilisés:                                                                  */
/*	          -webkit-   pour  Chrome et Safari,                                                    */
/*	          -moz-      pour  Firefox,                                                              */
/*	          -o-        pour  Opera,                                                                */
/*	          -ms-       pour  IE.                                                                   */
/*                                                                                                  */
/* Rappel:   .toto -->  class="toto"                                                                */
/*           #toto -->  id="toto"                                                                   */
/*                                                                                                  */
/* ************************************************************************************************ */


/* 1: - Multicolonnage SAUF POUR IE9 À CE JOUR */

/* 1-1: Texte toujourd visible */

.encolonnes {
	-webkit-column-count: 2;															/* texte sur 2 colonnes */
	-webkit-column-gap: 30px;															/* espace de 30 pixels entre les colonnes */
	-webkit-column-rule: dashed #343434 1px;										/* tirets de séparation gris entre les colonnes */
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-rule: dashed #343434 1px;
	-o-column-count: 2;
	-o-column-gap: 30px;
	-o-column-rule: dashed #343434 1px;
	-ms-column-count: 2;
	-ms-column-gap: 30px;
	-ms-column-rule: dashed #343434 1px;

	column-count: 2;
	column-gap: 30px;
	column-rule: dashed #343434 1px;

	font-family: Comic Sans MS;														/* Police du texte */
	font-size: 12pt;																		/* taille du texte */
	text-align:justify;																	/* Texte justifié */
	}

/* 1-2: Texte visible à la demande: en cliquant sur le titre */
	
.multicolonne {
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-rule: dashed #343434 1px;
	-moz-column-count: 2;																/* texte sur 2 colonnes */
	-moz-column-gap: 30px;																/* écart de 30 pixels entre lescolonnes */
	-moz-column-rule: dashed #343434 1px;											/* Trait gris de 1 pixel d'épaisseur entre les colonnes */
	-o-column-count: 2;
	-o-column-gap: 30px;
	-o-column-rule: dashed #343434 1px;
	-ms-column-count: 2;
	-ms-column-gap: 30px;
	-ms-column-rule: dashed #343434 1px;

	column-count: 2;
	column-gap: 30px;
	column-rule: dashed #343434 1px;

	font-family: Comic Sans MS;														/* Police du texte */
	font-size: 12pt;																		/* taille du texte */
	text-align:justify;
	margin-bottom: 12px;
	display: none;
	}
  
/* *************************************************************************************************************** */
	
/* 2: - Liens */
	
.Lien-local a {
	padding: 5px 15px 10px 15px;														/* Marge: top, right, bottom, left */
	font-weight: normal;
	font-family: Comic Sans MS;														/* Police du texte */
	font-size: 15pt;																		/* taille du texte */
	color: #0000cc;																		/* Couleur du texte bleu */
	color: rgba(0, 0, 204, 1);															/* Couleur du texte bleu opaque */
	}
	
.Lien-local a:hover {
	color: #cc0000;
	background: rgba(0, 0, 0, 0.1);													/* Couleur du fond noir transparence 10%*/

	-webkit-border-radius: 14px;														/* Arrondi du cadre */
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	border-radius: 14px;

	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;												/* Transition */
	}

	.Lien-menu a {
	padding: 5px 15px 10px 15px;														/* Marge: top, right, bottom, left */
	font-weight: normal;
	color: #0000cc;																		/* Couleur du texte bleu */
	color: rgba(0, 0, 204, 1);															/* Couleur du texte bleu opaque */
		cursor:pointer;
	}
	
	.Lien-menu a:hover {
	color: #cc0000;
	background: rgba(0, 0, 0, 0.1);													/* Couleur du fond noir transparence 10%*/
		cursor:pointer;

	-webkit-border-radius: 14px;														/* Arrondi du cadre */
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	border-radius: 14px;

	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
	}
	
	.Lien-titre img {
	padding: 5px 15px;																	/* Marge au  tour du texte */
	font-weight: normal;
	color: #0000cc;																		/* Couleur du texte bleu */
	color: rgba(0, 0, 204, 1);															/* Couleur du texte bleu opaque */
	}
	
	.Lien-titre img:hover {
	color: #cc0000;
	background: rgba(0, 0, 0, 0.1);													/* Couleur du fond et transparence 10%*/

	-webkit-border-radius: 14px;														/* Arrondi du cadre */
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	border-radius: 14px;

	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
	}

	.Lien-info avb {
	padding: 5px 15px;																	/* Marge au  tour du texte */
	font-family:Comic Sans MS;
	font-weight: normal;
	color: #0000CC;																		/* Couleur du texte bleu */
	color: rgba(0, 0, 204, 1);															/* Couleur du texte bleu opaque */
	}
	
	.Lien-info avb:hover {
	color: #cc0000;
	font-family:Comic Sans MS;
	background: rgba(0, 0, 0, 0.1);													/* Couleur du fond noir transparence 10%*/

	-webkit-border-radius: 14px;														/* Arrondi du cadre */
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	border-radius: 14px;

	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
	}
	
	.Lien-conf avb {
	padding: 5px 15px;																	/* Marge au  tour du texte */
	font-family:Comic Sans MS;
	font-weight: normal;
	color: #000000;																		/* Couleur du texte noir */
	color: rgba(0, 0, 0, 1);															/* Couleur du texte noir opaque */
	}
	
	.Lien-conf avb:hover {
	color: #cc0000;
	font-family:Comic Sans MS;
	background: rgba(0, 0, 0, 0.1);													/* Couleur du fond noir transparence 10%*/

	-webkit-border-radius: 14px;														/* Arrondi du cadre */
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	border-radius: 14px;

	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
	}

/* *************************************************************************************************************** */

/* 3: - Affiches illustration incrustées dans le texte des comptes rendus */	

.Illustration-gauche-paysage img {
	height: 200px;																			/* hauteur limitée */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */
	
	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -0-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-gauche-paysage img:hover {
	
	-webkit-transform: scale(2.6)  translate(90px, -60px);	/* image survolée doublée et rotation à gauche de 1 degré */
	-moz-transform: scale(2.6)  translate(90px, -60px);
	-o-transform: scale(2.6)  translate(90px, -60px);
	-ms-transform: scale(2.6)  translate(90px, -60px);
	transform: scale(2.6)  translate(90px, -60px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée noire transparence 50%*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

	.Illustration-gauche-portrait img {
	height: 200px;																			/* hauteur limitée */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -0-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-gauche-portrait img:hover {
	-webkit-transform: scale(2.6)  translate(45px, -60px);	/* image survolée doublée et rotation à gauche de 1 degré */
	-moz-transform: scale(2.6)  translate(45px, -60px);
	-o-transform: scale(2.6)  translate(45px, -60px);
	-ms-transform: scale(2.6)  translate(45px, -60px);
	transform: scale(2.6)  translate(45px, -60px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée noire transparence 50%*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

.Illustration-droite-paysage img {
	height: 200px;																			/* hauteur limitée */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -0-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-droite-paysage img:hover {
	-webkit-transform: scale(2.6)  translate(-90px, -60px);	/* image survolée doublée et rotation à gauche de 1 degré */
	-moz-transform: scale(2.6)  translate(-90px, -60px);
	-o-transform: scale(2.6)  translate(-90px, -60px);
	-ms-transform: scale(2.6)  translate(-90px, -60px);
	transform: scale(2.6)  translate(-90px, -60px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée noire transparence 50%*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

	.Illustration-droite-portrait img {
	height: 200px;																			/* hauteur limitée */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -0-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-droite-portrait img:hover {
	-webkit-transform: scale(2.6)  translate(-45px, -60px);	/* image survolée doublée et rotation à gauche de 1 degré */
	-moz-transform: scale(2.6)  translate(-45px, -60px);
	-o-transform: scale(2.6)  translate(-45px, -60px);
	-ms-transform: scale(2.6)  translate(-35px, -60px);
	transform: scale(2.6)  translate(-35px, -60px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée noire transparence 50%*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

/* 3-1 Ombre sur une image */

.Ombre-image img {
	/* height: 150px; */
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0 ,0 ,0.6);
	-moz-box-shadow: 5px 5px 10px rgba(0, 0 ,0 ,0.6);
	box-shadow: 5px 5px 10px rgba(0, 0 ,0 ,0.6);
	}
	
/* *************************************************************************************************************** */

/* 4: - Photos - Illustrations  format Paysage pour compte rendu laissant visible les légendes */
	
.Illustration-paysage-conference img {
	height: 150px;																		/* hauteur limitée à 150px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */
	cursor: pointer;
	
	-webkit-transition: -webkit-transform 0.2s ease-in-out;								/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-paysage-conference img:hover {
	cursor: pointer;
	
	-webkit-transform: scale(2)  translate(-50px, -40px);								/* image survolée doublée*/
	-moz-transform: scale(2)  translate(-50px, -40px);									/* nb positif: droite, bas  -  nb négatif: gauche, haut */
	-o-transform: scale(2)  translate(-50px, -40px);
	-ms-transform: scale(2)  translate(-50px, -40px);
	transform: scale(2)  translate(-50px, -40px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);								/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);									/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}
	
.Illustration-portrait-conference img {
	height: 150px;																		/* hauteur limitée à 150px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */
	cursor: pointer;
	
	-webkit-transition: -webkit-transform 0.2s ease-in-out;								/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Illustration-portrait-conference img:hover {
	cursor: pointer;
	
	-webkit-transform: scale(2)  translate(-10px, -40px);								/* image survolée doublée*/
	-moz-transform: scale(2)  translate(-10px, -40px);									/* nb positif: droite, bas  -  nb négatif: gauche, haut */
	-o-transform: scale(2)  translate(-10px, -40px);
	-ms-transform: scale(2)  translate(-10px, -40px);
	transform: scale(2)  translate(-10px, -40px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);								/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);									/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}
	
.Photos-paysage-gauche-bas img {
	height: 285px;																		/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;								/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-paysage-gauche-bas img:hover {
	-webkit-transform: scale(2)  translate(100px, -75px);								/* image survolée doublée et rotation à gauche de 1 degré */
	-moz-transform: scale(2)  translate(100px, -75px);
	-o-transform: scale(2)  translate(100px, -75px);
	-ms-transform: scale(2)  translate(100px, -75px);
	transform: scale(2)  translate(100px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);								/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);									/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

.Photos-paysage-milieu-bas img {
	height: 285px;																		/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */
	-webkit-transition: -webkit-transform 0.2s ease-in-out;								/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-paysage-milieu-bas img:hover {
	-webkit-transform: scale(2) translate(10px, -75px);									/* image survolée doublée */
	-moz-transform: scale(2) translate(10px, -75px);
	-o-transform: scale(2) translate(10px, -75px);
	-ms-transform: scale(2) translate(10px, -75px);
	transform: scale(2) translate(10px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);								/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);									/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}
	
.Photos-paysage-droite-bas img {
	height: 285px;																		/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;								/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-paysage-droite-bas img:hover {
	-webkit-transform: scale(2)  translate(-100px, -75px);								/* image survolée doublée, rotation à droite 1 degré */
	-moz-transform: scale(2)  translate(-100px, -75px);
	-o-transform: scale(2)  translate(-100px, -75px);
	-ms-transform: scale(2)  translate(-100px, -75px);
	transform: scale(2)  translate(-100px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);								/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);									/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

/* *************************************************************************************************************** */

/* 5: - Photos - Illustrations  format Portrait pour compte rendu laissant visible les légendes */
	
.Photos-portrait-gauche-bas img {
/*	width: 285px;																			/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-portrait-gauche-bas img:hover {
	-webkit-transform: scale(2)  translate(0px, -75px); 	/* image survolée doublée, rotation à gauche 1 degré */
	-moz-transform: scale(2)  translate(0px, -75px);
	-o-transform: scale(2)  translate(0px, -75px);
	-ms-transform: scale(2)  translate(0px, -75px);
	transform: scale(2)  translate(0px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

.Photos-portrait-milieu-bas img {
/*	width: 285px;																			/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */
	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-portrait-milieu-bas img:hover {
	-webkit-transform: scale(2) translate(10px, -75px);						/* image survolée doublée */
	-moz-transform: scale(2) translate(10px, -75px);
	-o-transform: scale(2) translate(10px, -75px);
	-ms-transform: scale(2) translate(10px, -75px);
	transform: scale(2) translate(10px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

	.Photos-portrait-droite-bas img {
/*	width: 285px;																			/* hauteur limitée à 285px */
	border: 2px solid #ddd;																/* bordure de 2 pixel gris claire  au tour de l'image */

	-webkit-transition: -webkit-transform 0.2s ease-in-out;					/* effet de zoom avant/arrière au survol */
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-ms-transition: -ms-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	}
	
.Photos-portrait-droite-bas img:hover {
	-webkit-transform: scale(2)  translate(0px, -75px); 		/* image survolée doublée, rotation à gauche 1 degré */
	-moz-transform: scale(2)  translate(0px, -75px);
	-o-transform: scale(2)  translate(0px, -75px);
	-ms-transform: scale(2)  translate(0px, -75px);
	transform: scale(2)  translate(0px, -75px);

	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);						/* ajout d'une ombre portée*/
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);							/* ombre noire, transparence de 50% et un flou de 10px */
	-ms-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	}

/* *************************************************************************************************************** */

/* 6: - Boutons en relief */

.Bouton-relief-grand a{
		padding: 10px 20px 10px 20px;													/* Marge: top, right, bottom, left */
		font-weight: normal;																/* normal */
		font-size: 30pt;																	/* taille du texte */
		text-decoration: none; 															/* pas de soulignement du lien */
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5),
              2px 2px 10px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5),
                 2px 2px 10px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5),
              2px 2px 10px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5),
                 2px 2px 10px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5),
             2px 2px 10px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-relief-grand a:hover{
		text-decoration: none; 															/* pas de soulignement du lien */

      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5) inset,
              2px 2px 10px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 10px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5) inset,
              2px 2px 10px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 10px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5) inset,
             2px 2px 10px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

.Bouton-menu li{
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
		font-size: 12pt;																	/* taille du texte */
		color: #0000CC;
		text-decoration: none; 															/* pas de soulignement du lien */
		line-height: 1.50;
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-menu li:hover{
		text-decoration: none; 															/* pas de soulignement du lien */
		color: #CC0000;
		
      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

.Bouton-relief a{
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
/*		font-size: 12pt;																	/* taille du texte */
		text-decoration: none; 															/* pas de soulignement du lien */
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-relief a:hover{
		text-decoration: none; 															/* pas de soulignement du lien */

      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

.Bouton-relief-cr a{
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
		font-size: 10pt;																	/* taille du texte */
		text-decoration: none; 															/* pas de soulignement du lien */
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-relief-cr a:hover{
		text-decoration: none; 															/* pas de soulignement du lien */

      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

.Bouton-relief-sous-menu avb{
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
		font-size: 12pt;																	/* taille du texte */
		color: #0000CC;
		text-decoration: none; 															/* pas de soulignement du lien */
		cursor:pointer;
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-relief-sous-menu avb:hover{
		color:#cc0000;
		text-decoration: none; 															/* pas de soulignement du lien */
		cursor:pointer;
		
      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

.Bouton-relief-sous-menu-out avb{														/* Bouton inerte ! */
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
		font-size: 12pt;																	/* taille du texte */
		color: #0000CC;
		text-decoration: none; 															/* pas de soulignement du lien */
		cursor:default;																	/* Curseur en forme de fleche */
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;						
    }

.Bouton-relief-sous-menu-out avb:hover{												/* Bouton inerte */
		color:#0000CC;
		text-decoration: none; 															/* pas de soulignement du lien */
		cursor: default;
		
/*      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										 Transition */
    }
	 
.Bouton-relief-gestion a{
		padding: 5px 15px 5px 15px;													/* Marge: top, right, bottom, left */
		font-weight: normal;																/* Normal */
		font-family: Arial;														      /* Police du texte */
		font-size: 12pt;																	/* taille du texte */
		text-decoration: none; 															/* pas de soulignement du lien */
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-relief-gestion a:hover{
		text-decoration: none; 															/* pas de soulignement du lien */

      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:20px;
      -webkit-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

/* *************************************************************************************************************** */

/* 7: - Boutons flèches haut et bas */
	
.Bouton-fleche a{
		padding:  0px 10px 5px 10px;													/* Marge: top, right, bottom, left */
		font-weight: bold;																/* Gras */
		font-family: Arial;														      /* Police du texte */
		font-size: 15pt;																	/* taille du texte */
		text-decoration:none;
		
      -moz-background-color:#EEFFEE;
      -ms-background-color:#EEFFEE;
      -webkit-background-color:#EEFFEE;
		-o-background-color:#EEFFEE;
      background-color:#EEFFEE;
 
      -webkit-border-radius:20px;
      -moz-border-radius:20px;
      -ms-border-radius:20px;
      -o-border-radius:20px;
      border-radius:20px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
                  2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
              2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
                 2px 2px 5px rgba(255, 255, 255, 0.5) inset;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5),
             2px 2px 5px rgba(255, 255, 255, 0.5) inset;
    }
 
.Bouton-fleche a:hover{
		text-decoration:none;
		
      -moz-background-color:#FFFFF0;
      -webkit-background-color:#FFFFF0;
      -ms-background-color:#FFFFF0;
      -o-background-color:#FFFFF0;
      background-color:#FFFFF0;
 
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
      -ms-border-radius:15px;
      -o-border-radius:15px;
      border-radius:15px;
      
      -moz-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                  2px 2px 5px rgba(255, 255, 255, 0.5);
      -ms-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
              2px 2px 5px rgba(255, 255, 255, 0.5);
      -o-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
                 2px 2px 5px rgba(255, 255, 255, 0.5);
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5) inset,
             2px 2px 5px rgba(255, 255, 255, 0.5);
             
	-webkit-transition: -webkit-transition 0.2s ease-in-out;
	-moz-transition: -moz-transition 0.2s ease-in-out;
	-o-transition: -o-transition 0.2s ease-in-out;
	-ms-transition: -ms-transition 0.2s ease-in-out;
	transition: transition 0.2s ease-in-out;										/* Transition */
    }

/* *************************************************************************************************************** */

/* 8: - Infobulle personnalisée */

/* 8-1: liens classiques */

a.tooltip span {
	display:none; 
	padding:3px 3px; 
	margin-left:20px; 
	width:200px;
	line-height: 1.0;
	text-decoration:none;
	}

a.tooltip:hover span{
	display:inline;
	position:absolute; 
	border:1px solid #77FF77; 
	background:#F0FFFF; 
	color:#000000;
	font-weight:normal;
	text-align:center;
	text-decoration:none;
	
	-webkit-border-radius: 10px;														/* Arrondi du cadre */
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	
	}
	
/* 8-2: liens gestion */

a.tooltip-gestion span {
	display:none; 
	padding:3px 3px; 
	margin-left:20px; 
	width:200px;
	line-height: 1.0;
	text-decoration:none;
	}

a.tooltip-gestion:hover span{
	display:inline;
	position:absolute; 
	border:1px solid #77FF77; 
	background:#F0FFFF; 
	color:#000000;
	font-weight:normal;
	text-align:center;
	text-decoration:none;
	
	-webkit-border-radius: 10px;														/* Arrondi du cadre */
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	
	}

/* 8-3: Liens vers les expositions des musées, la messagerie et sur le page d'accueil */
	
a.tooltip-musee span {
	display:none; 
	padding:3px 3px; 
	margin-left: 0px;
	width:200px;
	line-height: 1.0;
	text-decoration:none;
	}

a.tooltip-musee:hover span{
	display:block;
	position:absolute; 
	border:1px solid #77FF77; 
	background:#F0FFFF; 
	font-weight:normal;
	color:#000000;
	text-align:center;
	text-decoration:none;

	-webkit-border-radius: 10px;														/* Arrondi du cadre */
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	}

/* 8-4: texte affiché à la demande: dates vacances, plan, ...  et dans les formulaires */

avb.tooltip span {
	display:none; 
	padding:3px 3px; 
	margin-left:15px; 
	width:200px;
	line-height: 1.0;
	text-decoration:none;
	}

avb.tooltip:hover span{
/*	display:block;*/
	display:inline;
	position:absolute; 
	border:1px solid #77FF77; 
	background:#F0FFFF; 
	font-weight:normal;
	color:#000000;
	text-align:center;
	text-decoration:none;
	
	-webkit-border-radius: 10px;														/* Arrondi du cadre */
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	}

avb.tooltip-musee span {
	display:none; 
	padding:3px 3px; 
	margin-left: 15px;
	width:200px;
	line-height: 1.0;
	text-decoration:none;
	}

avb.tooltip-musee:hover span{
	display:block;
	position:absolute; 
	border:1px solid #77FF77; 
	background:#F0FFFF; 
	font-weight:normal;	
	color:#000000;
	text-align:center;
	text-decoration:none;
	
	-webkit-border-radius: 10px;														/* Arrondi du cadre */
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	}


/* *************************************************************************************************************** */
	
/* 9: - Elément couvrant tout l'écran */

/* index.html, Page_accueil.htm,... */

.Tout_ecran
{
   margin: 0 auto;
	position:absolute;
	width: 99%;
	height: 98%;
}

/* *************************************************************************************************************** */

/* 10: - Tables */


/* Pour les Infos pratiques: conférences et visites  table construite en CSS3*/

#Info-pratique {
	display: table;
	width: 100%;
	}
	
#Ip-gauche {
	display: table-cell;
	}
	
#Ip-droite {
	display: table-cell;
	width: 250px;
	}

/* Couleur fond différent ligne paire et impaire */

#pair-impair tr:nth-child(odd) {          /* lignes impaires */
  	background: #CCFFFF;
   }

#pair-impair tr:nth-child(even) {         /* lignes paires */
/*  	background: #B4FFFF; */
  	background: #DFFEFF;
   }
	
/* *************************************************************************************************************** */

/* 11: - blocs */

/* Date avec activité dans Agendas */

#bloc-bord-vert {
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
   -ms-border-radius:15px;
   -o-border-radius:15px;
   border-radius:15px;
	
	border:2px solid #88FF88;
	padding:5px 5px; 
	}

#bloc-bord-vert:hover {
	background-color: #88FF88;
	}
/* *************************************************************************************************************** */

/* 12: - Fonte Snowdrift (pour Noël) */

/* Snowdrift */

/* Chargement de la fonte à partir du répertoire Fonts */

@font-face {
	font-family: "Snowdrift";
	src: 	url("../Fonts/Snowdrift.eot?") format("eot"),
			url("../Fonts/Snowdrift.woff") format("woff"),
			url("../Fonts/Snowdrift.ttf") format("TrueType");	
	font-weight: normal;
	font-style: normal;
	}

/* Utilisation de la fonte */

#Snowdrift {
	font-family: "Snowdrift",Comic Sans MS;
/*	font-size: 35px; */
	color: #0000CC;
	text-align: center;
	}

	
/* *************************************************************************************************************** */

/* 13: - Centrer un élément */

.milieu {
	margin-left:auto;
	margin-right:auto;
	}	

	
/* *************************************************************************************************************** */

/* 14: - Rotation de 360 degrés dans les 2 sens d'une image */
/*       Chrome, Safari et Firefox          */

#Rotation_360
{
	-webkit-animation: Rotation_360 5s 1;			/* Rotation d'un tour, durée d'animation 5s, joué 1 fois */
	-moz-animation: Rotation_360 5s 1;
	-ms-animation: Rotation_360 5s 1;
	-o-animation: Rotation_360 5s 1;
	animation: Rotation_360 5s 1;
}

@-webkit-keyframes Rotation_360
{
0%
	{
	-webkit-transform: rotate(0deg);
	}
50%
	{
	-webkit-transform: rotate(360deg);opacity: 0.3;
	}
100%
	{
	-webkit-transform: rotate(-360deg);
	}
}

@-moz-keyframes Rotation_360
{
0%
	{
	-moz-transform: rotate(0deg);
	}
50%
	{
	-moz-transform: rotate(360deg);opacity: 0.3;
	}
100%
	{
	-moz-transform: rotate(-360deg);
	}
}

@-ms-keyframes Rotation_360
{
0%
	{
	-ms-transform: rotate(0deg);
	}
50%
	{
	-ms-transform: rotate(360deg);opacity: 0.3;
	}
100%
	{
	-ms-transform: rotate(-360deg);
	}
}

@-o-keyframes Rotation_360
{
0%
	{
	-o-transform: rotate(0deg);
	}
50%
	{
	-o-transform: rotate(360deg);opacity: 0.3;
	}
100%
	{
	-o-transform: rotate(-360deg);
	}
}

@keyframes Rotation_360
{
0%
	{
	transform: rotate(0deg);
	}
50%
	{
	transform: rotate(360deg);opacity: 0.3;
	}
100%
	{
	transform: rotate(-360deg);
	}
}

#Rotation_360_inverse
{
	-webkit-animation: Rotation_360_inverse 5s 1;			/* Rotation d'un tour, durée d'animation 5s, joué 1 fois */
	-moz-animation: Rotation_360_inverse 5s 1;
	-ms-animation: Rotation_360_inverse 5s 1;
	-o-animation: Rotation_360_inverse 5s 1;
	animation: Rotation_360_inverse 5s 1;
}

@-webkit-keyframes Rotation_360_inverse
{
0%
	{
	-webkit-transform: rotate(0deg);
	}
50%
	{
	-webkit-transform: rotate(-360deg);opacity: 0.3;
	}
100%
	{
	-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes Rotation_360_inverse
{
0%
	{
	-moz-transform: rotate(0deg);
	}
50%
	{
	-moz-transform: rotate(-360deg);opacity: 0.3;
	}
100%
	{
	-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes Rotation_360_inverse
{
0%
	{
	-ms-transform: rotate(0deg);
	}
50%
	{
	-ms-transform: rotate(-360deg);opacity: 0.3;
	}
100%
	{
	-ms-transform: rotate(360deg);
	}
}

@-o-keyframes Rotation_360_inverse
{
0%
	{
	-o-transform: rotate(0deg);
	}
50%
	{
	-o-transform: rotate(-360deg);opacity: 0.3;
	}
100%
	{
	-o-transform: rotate(360deg);
	}
}

@keyframes Rotation_360_inverse
{
0%
	{
	transform: rotate(0deg);
	}
50%
	{
	transform: rotate(-360deg);opacity: 0.3;
	}
100%
	{
	transform: rotate(360deg);opacity: 0.3;
	}
}

/* *************************************************************************************************************** */

/* 15: - Survol d'une image */

@-webkit-keyframes Survol-image
{
0% {opacity: 1;}
50% {opacity: 0.7;}
100% {opacity: 1;}
}

@-moz-keyframes Survol-image
{
0% {opacity: 1;}
50% {opacity: 0.7;}
100% {opacity: 1;}
}

@-ms-keyframes Survol-image
{
0% {opacity: 1;}
50% {opacity: 0.7;}
100% {opacity: 1;}
}

@-o-keyframes Survol-image
{
0% {opacity: 1;}
50% {opacity: 0.7;}
100% {opacity: 1;}
}

@keyframes Survol-image
{
0% {opacity: 1;}
50% {opacity: 0.7;}
100% {opacity: 1;}
}

img#Survol-image:hover
{
	-webkit-animation: Survol-image 5s 1;
	-moz-animation: Survol-image 5s 1;
	-ms-animation: Survol-image 5s 1;
	-o-animation: Survol-image 5s 1;
	animation: Survol-image 5s 1;
}		

/* *************************************************************************************************************** */