body {
    width: 780px; 
	margin: auto; /*centré*/
	background-color: white;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    text-align: justify;
    color: #A75635;
    letter-spacing: 0.05em; 
}
   
   /**** 1. EN-TÊTE */

#header {
    height: 120px;
	background: url(images/bg_bandeau.jpg) ;
	border-top: 2px solid #A28465;
	border-bottom: 2px solid #A28465;
    margin-top: 10px;
	margin-bottom: 10px;
	
    }

#logo {
	float: right;
	}
	
	/**** 2. MENU */
	
#menu {
	float: left;
	width : 120px;
	padding: 0px;
	padding-top:0px;
	list-style-image: url("images/puce.jpg");
	font-size: 0.9em;
	font-style: italic;	
	text-align: left;
	text-decoration: none;
	background: url("images/miniatures.png") 25px 0px no-repeat;
	}
	
#menu ul {
	position: relative;
	top: 211px;
	}
	
#menu a {	  
	color: #A75635;
	text-decoration: none;
	}
#menu a:hover
	{background-color: #A75635;
	color: #FFF;
	}
	
	/**** 3. CORPS */
	
/* Positionnement */
#container {
    position: relative; 
	margin: 0px; 
	margin-left: 140px; 
    width: 640px; 
    height: 532px; 
	background: url("images/bg_bloc.jpg") 40px 40px no-repeat;
	} 
		
/* Espace texte */
#texte {
	height: 512px;
	text-align: justify;
	line-height: 1.4em;
	}
#texte #avertissement {
	font-size: 0.8em;
	font-style: italic;
	}
#texte em {
	font-style: italic;
	font-size: 0.9em;
	}
	
/* Espace def */
#def {
	font-size: 0.9em;
	font-style: italic;
	}
	
/* Espace nature */
#nature a {
	color: #A75635;
	font-size: 1em;
	font-style: italic;
	text-decoration: none;
	}
#nature a:hover {
	background-color: #A75635;
	color: #FFF;
	}	
/* Espace suite */
#suite {
	text-align: center;
	}

#suite a {
	color: #A75635;
	font-size: 0.8em;
	font-style: italic;
	}
#suite a:hover {
	background-color: #A75635;
	color: #FFF;
	}
	
	
    /* ESPACE VIGNETTES */

#container ul {
    width: 205px; 
	padding: 1px;
	margin-top: 20px;
	margin-left: 10px;
    float: right;
	list-style-type: none; /* Suppression des puces & de l'indentation */
    }
#container li {
    float: left;
    }

/* Caractéristiques des vignettes */
#container a.gallery, #container a.gallery:visited {
    display: block; 
    text-decoration: none; 
	height: 64px; 
    width: 64px;
    border: 1px solid #A28465; 
    margin: 1px; 
    text-align: left; 
	color: #A75635; /*couleur du texte associé au lien (càd accompagnant la photo agrandie)*/
    cursor: default;
    }

/* Changement de couleur du bord des vignettes au nsurvol*/
#container a.gallery:hover {
    border: 1px solid #fff; /* blanc */
    }
	
/*  Mise en place des vignettes */		
#container a.slide11 { background:url(vignettes_etmoi/2011esperance1.jpg); }
#container a.slide12 { background:url(vignettes_etmoi/2011reverie2.jpg); }
#container a.slide13 { background:url(vignettes_etmoi/2011genuflexion.jpg); }

#container a.slide21 { background:url(vignettes_etmoi/2011reflexion2.jpg); }
#container a.slide22 { background:url(vignettes_etmoi/2011priere.jpg); }
#container a.slide23 { background:url(vignettes_etmoi/2012elegance.jpg); }

#container a.slide31 { background:url(vignettes_etmoi/2012venusperchee.jpg); }
#container a.slide32 { background:url(vignettes_etmoi/2011petitepose.jpg); }
#container a.slide33 { background:url(vignettes_etmoi/2011modestie.jpg); }

#container a.slide41 { background:url(vignettes_etmoi/2014constance2.jpg); }
#container a.slide42 { background:url(vignettes_etmoi/2014esperance6.jpg); }
#container a.slide43 { background:url(vignettes_etmoi/2014laltiere.jpg); }

#container a.slide51 { background:url(vignettes_etmoi/2014lenjambeuse.jpg); }	
#container a.slide52 { background:url(vignettes_etmoi/2014maternite.jpg); }	
#container a.slide53 { background:url(vignettes_etmoi/2014sesame.jpg); }
	
#container a.slide61 { background:url(vignettes_etmoi/2016enfourreauvert.jpg); }		
#container a.slide62 { background:url(vignettes_etmoi/2016lafricaine.jpg); }	
#container a.slide63 { background:url(vignettes_etmoi/2016ledrape.jpg); }	

#container a.slide71 { background:url(vignettes_etmoi/2016penelope.jpg); }		
#container a.slide72 { background:url(vignettes_etmoi/2017laltiere3.jpg); }		
#container a.slide73 { background:url(vignettes_etmoi/vignetteclaire.jpg); }		
		

	/* TRAITEMENT DE LA PHOTO ET DU TEXTE ASSOCIE */
	
/* Emplacement de la photo + son texte (span)*/
#container a.gallery span {
    position: absolute;  /**/
    top: 8px; 
    left: 0px; 
	width: 0px; 
    height: 0px; 
    overflow: hidden; 
    font-size: 0.8em;
	background-color: #FFF; 	
    }
	
/* Affichage de la photo + texte au survol de la vignette :hover span */
#container a.gallery:hover span {
    width: 430px; 
    height: 507px;
    }
	
#container a.gallery:hover img {
	margin-top: 2px;
    border: 1px solid #A28465; /* Aspect bordure photo */
    }
	

    /**** 4. PIED DE PAGE */

#footer {
    border-top: 2px solid #A28465;
    margin-top: 10px;
    padding-top: 0px;
	font-size: 0.8em;
	text-align: left;
	text-indent: 140px;
    }  
    
#footer strong {
	font-style: italic;
	}
   
#footer em {
	font-size: 0.7em;
	font-weight: bold;
	}