/*
	lg-style-vignettes.css
	Gestion des vignettes
	Création: 03/04/2010
	Modification: 01/06/2018
	Camille FRONTON
*/

.vignette {
	margin: 1em 0.5em 1.6em 0.5em; /* Espace entre images */
	padding: 0;
	float: left;
	text-decoration: none;
	line-height: normal;
}

.vignette img, .vignette a img, .vignette a:link img{ /* Placez le formatage de lien */
	width: auto; /* Largeur d'image */
	height:auto; /* Hauteur d'image */
    max-width:100px;
	max-height: 100px;
	display: inline;
	padding: 12px; /* Pour donner l'allure de bordure d'une véritable photo */
	/* Mettre à 0px = pas de frame - mais aucune indication en survolant l'image ! Ajuster les autres largeurs ou texte ! */
	margin: 0;
	background-color: white; /* Fond des photos */ 
	border-top: 1px solid #eee; /* Bordures des frames de photo */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none;
	text-align:center;
}
.vignette a:visited img {
	background-color: #f3f3f3; /* Fond des photos, souris au-dessus - sorte de gris-clair */
}

.vignette a:hover img {
	background-color: #d8e7e4; /* Fond des photos, souris au-dessus - sorte de bleu/vert-clair */
}
.vignette p{
	text-align: center;
	margin:0px;
	text-indent:0pt;
}

.vignetteLegendeImage {
	text-align: center;
	font-size: smaller;
	margin: 0 1px 0 0;
	padding: 0;
	width: 124px; /* Largeur de l'image plus 2 x remplissage pour image (espace photo) - to center text on image */
	/* display: none;  clear:left; Pour ne pas afficher le texte */
}


/* Galerie d'images - Grandes Images */
.grandeImage {
	margin: 10px 0 5px 0;
	padding: 0;
	line-height: normal;
    text-align:center;
}

.grandeImage p{
	text-align:center;
    width:inherit;
}

.LegendegrandeImage { /* Nom de la grande image - endessous de l'image .grandeImageNomFichier (sans extension) */
	text-align: center;
	font-weight: bold;
	font-variant: small-caps;
	font-weight: bold;
	margin: 0 1px 0 0;
	padding: 0;
	width: 380px; /* Largeur d'image plus 2 x remplissage pour l'image (espace photo) - Centrer le texte par rapport à l'image */
	/* display: none;  Pour ne pas afficher le texte */
}

.grandeImage img{ /* Préparation de la grande image */
	max-width: 300px; /* Largeur de la grande image */
	max-height:400px;
    width:auto;
    height: auto;
	display: inline;
	padding: 18px; /* Espace pour l'image pour allure d'une photo. */
	/* En mettant à 0px = pas d'espace - mais pas d'indication de survol de l'image ! Ajuster les autres largeurs ou texte !  */
	margin: 0;
	background-color: white; /* Fond de photo */ 
	border-top: 1px solid #eee; /* Bordures de l'espace photo */
	border-right: 2px solid #ccc; 
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none; 
	text-align: left;
}

.grandeImageNav { /* Informations des grandes images : 'Image 1 de 4' et navigation de galerie */
	margin: 0;
	width: 620px; /* Largeur d'image plus 2 x remplissage pour image (espace photo) - pour centrer le texte sur l'image */
	padding: 0;
	color: #000;
	font-size: smaller;
	line-height: normal;
	text-align: center;
	/* display: none;  Pour ne pas afficher le texte. Mais pas de Navigation ! */
}