/* ---------------------------------------------------------------
	PREMIER CHAPITRE
 --------------------------------------------------------------- */


/* ---------------------------------------------------------------
	RAZ CSS
 --------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}

table {border-collapse:separate;border-spacing:0;}

caption, th, td {text-align:left;font-weight:normal;}

table, td, th {vertical-align:middle;}

blockquote:before, blockquote:after, q:before, q:after {content:"";}

blockquote, q {quotes:"" "";}

li{list-style: none;}

a img {border:none;}
 
	hr {
	background:#FFFFFF none repeat scroll 0 0;
	border:0 none;
	clear:both;	color:#FFFFFF;
	float:none;	height:1px;
	margin:0;	width:100%;}

/* ---------------------------------------------------------------
	FORMATAGE DU SITE
 --------------------------------------------------------------- */
	body {
	text-align:center;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
	#conteneur {
	position:relative;
	width:920px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	color:#333333;
	text-align:left;
	background-color: #FFFFFF;
}
/* ---------------------------------------------------------------
	TITRES
 --------------------------------------------------------------- */
	h2{
	position:relative;	top:0;	left:0; margin: 10px 0;
	width:100%;	line-height: 24px;
	font-size:130%;	text-indent:0px;}

	h3{
	position:relative;	top:0; left:0;
	width:730px; height:auto; line-height:20px; margin-top: 20px;
	font-size:100%;	color:#333333;}

/* ---------------------------------------------------------------
	ZONE CONTENU
 --------------------------------------------------------------- */
	#z_contenu{position:relative;	top:0; margin-bottom: 10px;	width:750px; height:auto;}
	
	.contenu_centre {position: relative; top: 0; left: 0; width: auto; height: auto; padding: 10px;}
 	.contenu_haut{position: relative; top: 0; left: 0; width:100%; height: 10px;background: url(../multimedia/fonds/bg_contenu.png) no-repeat top left;}
 	.contenu_bas{position: relative; top: 0; left: 0; width:100%; height: 10px;background: url(../multimedia/fonds/bg_contenu.png) no-repeat bottom left;}
 	
/* ---------------------------------------------------------------
	ZONE ENTETE et BAS DE PAGE
 --------------------------------------------------------------- */
 	#zone_entete{
	position:relative;
	top:0; left:0;
	margin:0; padding:0;
	width:100%; height:90px;
	background: url(../multimedia/bandeau_haut.png) no-repeat top left;
	}
	

	/* ---------------------------------- */

	#porte{display: block; position: absolute; top: 103px; right: 0px; width: 50px; height: 50px;}
	
	/* ---------------------------------- */

	#sortir{
	display:block;
	position:absolute;
	top:30px; right:10px;
	margin:0; padding:0;
	width:120px; height:30px; line-height:30px;
	text-align:center; color:white; font-size:75%;
	}

	/* ---------------------------------- */

	#logo_retour{
	display:block;
	position:absolute;
	top:30px; left:0px;
	width:130px;
	height:160px;
	text-decoration:none;
	}
	
	/* ---------------------------------- */

 	#zone_bas{
	position:relative;
	top:0; left:0;
	margin-top:10px; padding:0 0 0 10px;
	 height:30px;
	background:black;
	float: none; clear: both;
	}
	#conteneur #zone_bas{width:910px;}
	#conteneur_accueil #zone_bas{width:1090px;}

	#zone_bas li, #zone_bas li a{
	display:inline;
	list-style:none;
	color: #FFFFFF;
	font-size: 84%;
	line-height:30px;
	}
	#zone_bas li a:hover{ color:#ffd700;}

/* ---------------------------------------------------------------
	DIVERS UTILES
 --------------------------------------------------------------- */
	.liste_vide{
	position:relative;
	margin:0;
	padding:0;
	text-align:center;
	color: #999999;
	font-size: 12px;
	line-height:30px;
	}
	.rappel{
	position:relative;
	margin:0;	padding:0;
	color: #333333;
	font-size: 75%;
	line-height:20px;
	clear: both;
	}

/* ---------------------------------------------------------------
	DEMO TEL
 --------------------------------------------------------------- */

 	#demo_tel{
	position:absolute;	top:20px; right:0px;
	width:386px; height:723px;
	overflow:hidden;
	background-image: url(../multimedia/etagere_sn/iPhone.png);
	background-repeat: no-repeat; background-color: transparent;}

 	#demo_tel_sn{
	position:absolute;	top:20px; right:0px;
	width:386px; height:723px;
	overflow:hidden;
	background-image: url(../multimedia/etagere_sn/iPhone.png);
	background-repeat: no-repeat; background-color: transparent;}
		 	
	#exemple{
	position:absolute; left:34px; top: 179px;
	width:319px; height:422px;
	overflow:hidden;background: white;}
	
	#navigation{
	position:absolute; bottom:16px; left:0;
	width:100%; height:100px;}
	
	#nav_haut, #nav_bas{
	display:block;
	position:absolute; top:20px; cursor:pointer;
	width:60px; height:55px;}
	
	#nav_bas{left:45px;}
	#nav_haut{right:45px;}
	
	.affichage_texte{
	position:relative;top:0; left:0;
	height:305px; margin: 10px;
	font-size:13px; text-align: justify;
	overflow:auto;	overflow-y:hidden;	overflow-x:hidden;}

	.affichage_texte p{text-indent: 20px;}
	
	.affichage_cover{ background: #CC3333; height: 100px;
	position:relative;top:0; left:0;
	overflow:auto;	overflow-y:hidden;	overflow-x:hidden;}
	

	.affichage_cover{position: relative; height: 110px; }
	.affichage_cover p{line-height: 12px; font-size: 12px; margin:0 10px; width: auto; height: auto; line-height: 20px;color: white; }
	.affichage_cover img{margin: 10px;float: right;}

	.txt_chapitre{
	position:relative;top:0; left:0;
	height:305px; margin: 10px;
	font-size:medium; text-align: justify;
	overflow:auto;	overflow-y:hidden;	overflow-x:hidden;}
	.txt_chapitre p{text-indent: 20px;}

	.txt_divers{
		position:relative;
		top:0; 
		left:0;
		height:405px; 
		margin: 10px;
		overflow:auto;	
		overflow-y:hidden;	
		overflow-x:hidden;
	}

/* ---------------------------------------------------------------
	ETAGERE
 --------------------------------------------------------------- */
 	#col_droite{
 		position: relative;
 		float: right;
 		width: 400px;
 		height: auto;
 	}
 	
 	#col_gauche{
 		position: relative;
 		float: left;
 		width: 500px;
 		height: auto;
 	}

	#presentation_etagere{
	position: absolute; top: 20px; left: 0;
	width: 500px; height: 250px; color: white; 
	text-align: justify;
	}

	#col_gauche p.titre{ 
		width: 100%; 
		height: auto;
		font-size: 22px; 
		margin: 10px 0;
		color: white;
	}
	
	#col_gauche p.detail{
		height: auto; 
		line-height: 18px;
		font-size: 12px;
		margin-bottom: 10px;
		color: white;
		text-align: justify;
	}

	#col_gauche p.logo{
		text-align: right;
	}
	
	#col_gauche p.logo img{
		margin: 5px;
	}


 	#biblio{
		position:relative;	
		top:0; left:0px;
		width:100%; 
		height:340px;
		background: url(../multimedia/bibliotheque.jpg) no-repeat top left;
	}
	
	#biblio div{position: absolute; left: 0; height: 110px; width: 100%;text-align: center;overflow: hidden;}
	div.l1{top: 49px;}
	div.l2{top: 194px;}

	#col_gauche p.titre_biblio{position: absolute; top: 750px; left: 0px; color: white; font-size: 10px}

	#biblio div a img{margin: 0 2px; border: 0; padding: 0;}


	#lh{
		position: relative; 
		top: 0; 
		left: 0px; 
		width: auto; 
		height: auto;
		margin-top: 10px;
	}
	
	#lh a.logo_1{
		position: absolute;
		top: 10px;
		left: 0;
	}

	#lh a.logo_2{
		position: absolute;
		top: 0px;
		right: 0;
	}

	#lh p{
		padding-left: 70px;
		padding-right: 130px;
		color: white;
		font-size: 12px;
		text-align: justify;
	}
	
	ul#lh_footer{
		position: relative;
		padding-top: 20px;
		clear: both;
		float: none;
		text-align: center;
	}
	
	ul#lh_footer li{
		position: relative;
		display: inline;
		padding: 0 10px;
	}
	
	ul#lh_footer li a{
		color: white;
		font-size: 12px;
	}