body {
	color: #000;
	font: .8em/1.5em Verdana, Arial, sans-serif;
	background: url('../images/fond-spe.gif') top right no-repeat #C30C3E;
}
#contenu {
	height: 600px;
}
#contenu ul li {
	list-style-type: none;
}
a img {
	border: 0;
}
#contenu p#diapo {
width:500px;
margin: -30px 0 20px 70px;
}
#contenu ul li {
cursor:pointer;
width:100%;
float: left;
color:#fff;
padding:0;
cursor:default;
}
#contenu p#diapo a {
width:125px;
height:125px;
border:1px solid #ddd;
border-color:#fff #b4b4b4 #b4b4b4 #fff;
float: left;
margin: 0 1px 1px 0;
}
#contenu p#diapo a:hover {
background:#FFF9E1;
}
#contenu p#diapo a em {
display:none;
border: 0;
}
#contenu p#diapo a.horiz span img {
border:1px solid #888;
margin-top:20px;
margin-left: 6px;
}
#contenu p#diapo a.vert span img {
border:1px solid #888;
margin-top:4px;
margin-left: 25px;
}
#contenu p#diapo a:active, #contenu p#diapo a:focus {
	background:#aaa;
	height:0;
	width:0;
	border:0;
	padding:0;
	margin:0;
}
#contenu p#diapo a:active em, #contenu p#diapo a:focus em {
	background:#000;
	height:0;
	width:0;
	padding:0;
	margin:0;
	border:0;
	
}


/* make the large image visible and set the border, position them using position absolute centrally over the slides */
/* horizontal large image styling */
#contenu p#diapo a.horiz:active em, #contenu p#diapo a.horiz:focus em {
	display:block;
	position:absolute;
	left: 190px;
	top:190px;
	width:560px;
	height:560px;
	z-index:200;
	cursor:pointer;
}
#contenu p#diapo a.horiz:active em img, #contenu p#diapo a.horiz:focus em img {
	border:1px solid #ddd;
	border-color:#ccc #333 #333 #ccc;
	margin-left: 10px;
	margin-top: 50px;
}
/* vertical large image styling */
#contenu p#diapo a.vert:active em, #contenu p#diapo a.vert:focus em {
	display:block;
	position:absolute;
	left:180px;
	top:190px;
	width:560px;
	height:560px;
	z-index:200;
	cursor:pointer; 
}
#contenu p#diapo a.vert:active em img, #contenu p#diapo a.vert:focus em img {
	border:1px solid #ddd;
	border-color:#ccc #333 #333 #ccc;
	margin-left: 80px;
	margin-top: 10px;
}