/* ---------------------------- */
/* Feuille de style pour le     */
/* book en ligne de BenLebègue  */
/* (www.benlebegue.com)         */
/* Écrite par Florent Verchelde */
/* (www.covertprestige.info)    */
/* ---------------------------- */


/* ==== GÉNÉRAL ==== */

html {font-size: 100%;}
body {
	font-size: .9em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
}

a {color: #8a3; text-decoration: none;}
a:hover, a:focus {background: #ef9;}

img {border: none;}


/* ==== STRUCTURE PRINCIPALE ==== */

html, body {margin: 0; padding: 0;}
body {text-align: center;}

div#page {
	width: 750px;
	margin: 0 auto;
	padding-bottom: 1px;
	text-align: left;
}


/* ==== EN-TÊTE ==== */

div#titre {
	height: 160px;
	background: url(banieresite.jpg) no-repeat center bottom;
}
	div#titre h1 {
		height: 145px;
		margin: 0;
		text-align: right;
		font-style: italic;
		font-variant: small-caps;
	}
		div#titre h1 a {
			display: block;
			width: 100%;
			height: 100%;
			padding-right: 24px;
			color: white;
			}
		div#titre h1 a:hover {color: white; background: none;}


/* ==== NAVIGATION DANS LE BOOK ==== */

ul#index-books {
	width: 100%; overflow: hidden;
	margin: 0; padding: 0;
	list-style: none;
}
	ul#index-books li {
		float: left;
		margin: 0 0 0 6px;
		padding: 0;
		line-height: 1em;
	}
		ul#index-books li a {
			display: block;
			width: 180px; height: 150px;
			text-decoration: none;
		}
		
		/* Liste des images de fond pour l'effet de roll-over */
		li#book-illus a {background: url(iconeillus.jpg) no-repeat;}
		li#book-illus a:hover, li#book-illus a:focus {background: url(iconeillus2.jpg) no-repeat;}
		li#book-bd a {background: url(iconebd.jpg) no-repeat;}
		li#book-bd a:hover, li#book-bd a:focus {background: url(iconebd2.jpg) no-repeat;}
		li#book-presse a {background: url(iconepresse.jpg) no-repeat;}
		li#book-presse a:hover, li#book-presse a:focus {background: url(iconepresse2.jpg) no-repeat;}
		li#projets a {background: url(iconeprojet.jpg) no-repeat;}
		li#projets a:hover, li#projets a:focus {background: url(iconeprojet2.jpg) no-repeat;}


/* ==== ZONE PRINCIPALE DE CONTENU ==== */

div#principal {
	float: right;
	width: 602px;
}
	div#principal h2 {
		letter-spacing: 1px;
		font-variant: small-caps;
		text-shadow: gray 1px 1px 2px;
		color: #f90;
	}
	div#principal h3 {
		padding-bottom: 2px;
		border-bottom: solid 1px #ae4;
		color: #7b0;
	}
	div#principal p {
		margin: 8px 0;
		text-align: left;
	}
		div#principal p img {
			display: block;
			margin: 0 auto;
			/*border: solid 1px #aaa;*/
		}
		div#principal p cite {
			display: block;
			margin: 8px 0 30px 20px;
			text-align: center;
			color: #666;
		}

/* ==== MENU DE LIENS CONNEXES ==== */

ul#liens {
	position: absolute;
	top: 314px; left: 50%;
	margin: 0 0 0 -430px;
	width: 180px;
	padding: 0;
	list-style: none;
	font-size: .9em;
}
	ul#liens li {
		margin: 40px 0 10px 0;
		padding: 0;
	}			
		li#lien-blog a.rollover {
			display: block;
			width: 180px;
			height: 150px;
			background: url(iconeblog.jpg) no-repeat;
		}
			li#lien-blog a.rollover:hover,
			li#lien-blog a.rollover:focus
			{background: url(iconeblog2.jpg) no-repeat;}
		
		li#liste-liens a.rollover {
			display: block;
			width: 180px;
			height: 150px;
			background: url(iconeliens.jpg) no-repeat;
		}
			li#liste-liens a.rollover:hover,
			li#liste-liens a.rollover:focus
			{background: url(iconeliens2.jpg) no-repeat;}
			
		li#contact a.rollover {
			display: block;
			width: 160px;
			height: 133px;
			background: url(iconecontact.jpg) no-repeat;
		}
			li#contact a.rollover:hover,
			li#contact a.rollover:focus
			{background: url(iconecontact2.jpg) no-repeat;}			
			
		ul#liens li ul {margin: 0; padding: 0; list-style: none;}
		ul#liens li ul li {margin: 0; padding: 1px;}
		ul#liens li ul li a {
			display: block;
			margin: 0 30px 0 20px;
			padding: 1px;
			border: solid 1px white;
			text-align: center;
			font-weight: bold;
		}
		ul#liens li ul li a:hover {color: #790; border-color: #ce4;}
		
		li#contact img {margin-left: 4px;}


/* ==== PIED DE PAGE ==== */
		
p#infos {
	clear: both;
	margin: 0 0 16px 148px;
	padding-top: 40px;
	text-align: center;
	font-family: Times, "Times New Roman", "Nimbus Roman No9 L", serif;
}
	p#infos strong {
		font-style: italic;
		font-weight: normal;
	}