@charset "utf-8";
/* CSS Document */
body 
{
	background-color: #493630;
	margin-top: 0px;
	margin-left: 0px;
}


/***********************************************/
/*                                             */
/*              Demonstration n°2              */
/*                                             */
/***********************************************/

/* On défini la position de la balise <ul>  
comme relative afin d'établir le contexte de  
positionnement pour les autres balises placées
en absolute. */

ul#galerie-photo {
	display:block;
	position:relative;
	list-style:none;
	height: 320px;
	padding:0;
	margin:0;
}

/* On sort maintenant les miniatures des
images du flux du document tout en les stylant */

ul#galerie-photo li img{
	border: 1px solid #FBE2A9;
	position:absolute;
	left: 101px;
	top: 104px;
}

/* On définit l'image version agrandie en tant qu'image de fond du span */
ul#galerie-photo li#barrierea a span { background-image:url(../images/barrierea.jpg) }
ul#galerie-photo li#barriereb a span { background-image:url(../images/barriereb.jpg) }
ul#galerie-photo li#barrierec a span { background-image:url(../images/barrierec.jpg) }
ul#galerie-photo li#paysage4 a span { background-image:url(../images/landscape4.jpg) }

/* Les balises span contenant les versions
agrandies des images ne doivent pas être affichées */

ul#galerie-photo li span{
display:none;
}

/* On positionne les différentes miniatures d'image */

ul#galerie-photo li#paysage1 img{
	top:10px;
	left:10px;
}

ul#galerie-photo li#paysage2 img{
	top:10px;
	left:170px;
}

ul#galerie-photo li#paysage3 img{
	top:170px;
	left:10px;
}

ul#galerie-photo li#paysage4 img{
	top:170px;
	left:170px;
}

/* On style l'image au moment du survol de la souris */

ul#galerie-photo li a:hover img{
	border-color: #666; 
}

/* On affiche la balise <span> au moment du survol de
la souris tout en la positionnant à coté des miniatures */

ul#galerie-photo li a:hover span{
	border: 3px solid #333;
	position:absolute;
	display:block;
	width : 500px; 
	height : 299px; 
	top: 16px; 
	left:350px; 
}

a:link {
	color: #FBE2A9;
}
a:visited {
	color: #FBE2A9;
}
a:hover {
	color: #FBE2A9;
}
a:active {
	color: #FBE2A9;
}
.lien-email-entete
{
	font-size: 12px;
	font-style: italic;
	font-style: italic;
	color: #FAE3AA;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: underline;
}
.adresse-entete
{
font-size: 12px; 
font-style: italic; 
color: #FAE3AA; 
font-family: Arial, Helvetica, sans-serif;
}
.lien-email
{
font-size: 12px; 
font-style: italic; 
color: #FAE3AA; 
font-family: Arial, Helvetica, sans-serif;
}
.lien-navigation
{
	color: #FAE3AA;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.texte-24-gras 
{
color: #FAE3AA; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 24px; 
}
.texte-14-gras-italique 
{
	color: #FAE3AA;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
}
.texte-18-gras 
{
color: #FAE3AA; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 18px; 
}