/* ---------------------------------------------------------------
	ZONE CENTRALE et CONTENU
 --------------------------------------------------------------- */
	#zone_centrale{
	position:relative;
	margin:0;
	padding:0;
	top:0;	left:0;
	width:100%;
	height:470px;
	z-index:1;
	background: transparent url(../multimedia/fonds/centrale_audio.png) no-repeat top left;
	}
	#zone_contenu{
	position:absolute;
	top:0; left:100px;
	width:700px; height:100%;
	}
	#zone_principale{
	position:relative;
	top:0; left:0;
	width:100%; height:100%;}
/* ---------------------------------------------------------------
	INTRODUCTION
 --------------------------------------------------------------- */
	h2.titre{color: #7F6B00;}
	
	.intro{
	position:relative;
	top:0; left:0;
	margin:0;
	width:100%; height:auto; line-height:20px;
	color:#000; font-size:14px;
	}
/* ---------------------------------------------------------------
	FORMULAIRE
 --------------------------------------------------------------- */
	#form_recherche{
	position:relative;
	top:0; left:0;
	margin:30px 0 0 0; padding:0;
	width:100%; height:auto;
	border-bottom: 3px solid #000;
	}
	
	#form_recherche fieldset {
	position:relative;
	top:0;
	left:0;
	margin: -1px 2% 0 2%;
	padding:2px 0;
	border-width:0px;
	width:96%;
	height:auto;
}
	#form_recherche label {
	display:block;
	position:relative;
	top:0;	left:0;
	float:left;
	margin:0; padding:0;
	height:20px;
	line-height:20px;
	font-size: 11px;
	font-weight: bold;
	text-align:right;
	color:#000000;
	}

	#form_recherche input, select{
	position:relative;
	float:left;
	margin:0;	padding:0;
	font-size: 12px;
	background-color:#FFFFFF;
	color: #000;
	border: 1px solid #000;
}
/* ---------------------------------------------------------------
	JFLOW DES ROMANS
 --------------------------------------------------------------- */
 	#liste_roman{
	position:relative;
	top:0; left:0;
	margin:20px 0 0 0; padding:0;
	width:100%; height:250px;
	overflow:hidden;
	}
	
	#support_slides{
	position:relative;
	top:0; left:0;
	margin:0 0 0 77px; padding:0;
	width:545px; height:210px;
	overflow:hidden;
	}
	
	#myController{
	position:relative;
	top:0; left:0;
	margin:10px 0 0 303px;
	width:100px; height:5px;
	}
	#myController span{
	display:block;
	position:relative;
	float:left;
	top:0; left:0; font-size:1px;
	margin:0 5px; padding:0;
	width:20px; height:5px;
	cursor:pointer;}

	.jFlowControl{background:#FFF;}
	.jFlowSelected {background:#000;}

	.jFlowPrev, .jFlowNext{
	display:block;
	position:absolute;
	top:30px;
	width:32px; height:64px;
	cursor:pointer;
	}
	.jFlowPrev{left:30px; background: transparent url(../multimedia/bouton/navig_gauche.png) no-repeat top left;}
	.jFlowNext{right:30px;background: transparent url(../multimedia/bouton/navig_droite.png) no-repeat top left;}
	
	div.vignette{
	display:block;
	position:relative;
	float:left;
	top:0; left:5px;
	margin:0 7px; padding:0;
	width:120px; height:210px;
	text-decoration:none;
	color:#FFFFFF;
	background: transparent url(../multimedia/fonds/roman_audio.png) no-repeat top left;
	cursor:pointer;
	}
	div.vignette p{
	clear:both;
	position:relative;
	top:0; left:0;
	margin:0; padding:0;
	width:100%; height:20px; line-height:20px;
	font-size:10px;
	color:#FFFFFF;
	text-align:center;
	}
	
	div.vignette img{
	position:relative;
	top:0; left:0;
	border:0; 
	margin: 2px 0 20px 2px; padding:0; 
	width:116px; height:116px;}
/* ---------------------------------------------------------------
	ZONE SECONDAIRE
 --------------------------------------------------------------- */
	#zone_secondaire{
	position:relative;
	top:0; left:0; margin:0 0 0 60px; background:#000;
	width:560px; height:99%;}
	#zone_secondaire ul{
	position:absolute; top:30px; left:20px;
	margin:0; padding:0;
	width:200px; height:auto;}
	#zone_secondaire ul li{
	position:relative; top:0; left:0;
	margin:5px 0; padding:0;
	list-style:none; background:#FFF;
	width:100%;	height:30px;}
	#zone_secondaire ul li a{
	display:block;
	width:100%; height:100%; line-height:30px;
	color:#333333; font-size:75%; text-indent:5px;}

	/* -------------------- */
	
	#fermer{
	position:absolute; top:0px; right:20px;
	width:100px; height:30px; line-height:30px; color:#FFF;
	font-size:75%; font-weight:bold; text-align:right;}
	#fermer:hover{ color:#c10000;}

	/* -------------------- */
	
	#detail_roman{
	position:absolute; top:140px; right:20px;
	width:520px; height:110px; background:#FFF;
	}
	
	#detail_roman div{
	position:absolute; top:5px; left:5px;}
	
	/* -------------------- */
	
	#info_diverse{ display: none;
	position:absolute; bottom:5px; left:20px;
	width:200px; height:auto;
	}
	#info_diverse p{
	position:relative;
	top:0; left:0; margin:0; padding:0;
	width:100%; height:20px; line-height:20px;
	color:#FFFFFF; font-size:75%;}