body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     background: #000000;
     color: white ;
}
     
div.content {
	width : 650px;
	margin-right: auto;
	margin-left: auto; 
	text-align : justify; 
}

div.titre {
	width : 976px;
	margin-right: auto;
	margin-left: auto; 
	text-align : justify; 
}

img.titre {
	margin-left: 20px;
}

p.capital {
	color: white;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase ;
	font-weight: bold;
}

p.content  {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: white;
	text-align : justify; 
}

p.content-edito  {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: white;
	text-align : justify; 
	line-height : 2.00em;
}

p.content-livre  {
	font-family: Georgia;
	font-size: 12px;
	color: white;
	text-align : right; 
	line-height : 2.00em;
}

p.footer {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 9px;
	color: white;
	text-align : center; 
}

p.edition  {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: white;
	text-align : center; 
}

a {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: #E49409;
	text-decoration: none;
}

a:hover {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: #E49409;
	text-decoration: underline;
}

a:visited {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size: 12px;
	color: #E49409;
	text-decoration: none;
}

.lettrine {
	float: left; /* positionnement de la lettrine dans le conteneur*/
	font-size: 3em; /* 2 hauteurs de lignes pour la lettrine*/	
	font-weight: bold;
	font-family: Georgia;
	color: white;
	padding-right: 5px;
	padding-top: 2px;
	line-height: 1em;
}

img.edition {
	border: 2px solid white;
}

h1 {
	font-size: 1.6em;
	color: white;
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
}

td {
	text-align: center;
}

a.bio1 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 100px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio1off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio1:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio1.jpg); /* source for target image */
     } 
     
a.bio2 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 76px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio2off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio2:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio2.jpg); /* source for target image */
     } 
     
a.bio3 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 99px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio3off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio3:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio3.jpg); /* source for target image */
     } 
     
     
a.bio4 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 78px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio4off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio4:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio4.jpg); /* source for target image */
     }         
     
          
a.bio5 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 105px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio5off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio5:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio5.jpg); /* source for target image */
     }      
     
          
a.bio6 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 101px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio6off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio6:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio6.jpg); /* source for target image */
     }      
     
          
a.bio7 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 106px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio7off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio7:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio7.jpg); /* source for target image */
     }        
          
a.bio8 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 75px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio8off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio8:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio8.jpg); /* source for target image */
     }      
     
          
a.bio9 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 100px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio9off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio9:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio9.jpg); /* source for target image */
     }      
     
          
a.bio10 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 114px; /* width of reactive image */
     height: 132px; /* height of reactive image */
     background-image: url(img/bio10off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.bio10:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/bio10.jpg); /* source for target image */
     }       
     
a.roman1 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 81px; /* width of reactive image */
     height: 146px; /* height of reactive image */
     background-image: url(img/roman1off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.roman1:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/roman1.jpg); /* source for target image */
     }      
     
a.roman2 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 81px; /* width of reactive image */
     height: 146px; /* height of reactive image */
     background-image: url(img/roman2off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.roman2:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/roman2.jpg); /* source for target image */
     }        
     
a.roman3 { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 81px; /* width of reactive image */
     height: 146px; /* height of reactive image */
     background-image: url(img/roman3off.jpg); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.roman3:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(img/roman3.jpg); /* source for target image */
     }