/*#############################################################
Name: The Hobbit
Date: 2006-10-11
Description: Submission for OWD template contest "Favourite Book".
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* standard elements */
* {
	margin: 0;
	padding: 0;
}

a {color: #36C; z-index: 1;}

a:hover {color: #06F; z-index: 1;}

body {
	background: #4E5D3C url(img/bg.jpg);
	color: #444;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
	margin: 0;
	z-index: 1;
}

p,blockquote,ul {margin-bottom: 1.2em; z-index: 1;}

h1 {font: normal 1.6em serif; z-index: 1;}

h2 {
	font: bold 1em Verdana,serif;
	margin: 3px 0 1px;
	z-index: 1;
}

ul {margin-left: 1.8em; z-index: 1;}

blockquote {
	background: url(img/quote.gif) no-repeat;
	color: #555;
	font: normal 1.4em serif;
	padding-left: 22px;
	z-index: 1;
}

blockquote p {padding: 6px; z-index: 1;}

/* misc */
.clearer {clear: both; z-index: 1;}

.left {float: left; z-index: 1;}

.right {float: right; z-index: 1;}

img.left {margin: 0 18px 6px 0; z-index: 1;}

.divider {
	background: url(img/divider.gif) no-repeat;
	height: 20px;
	margin: 24px 0;
	z-index: 1;
}

/* structure */
.container {
	background: url(img/bgcontainer.jpg) repeat-y center top;
	margin: 0 auto;
	width: 736px;
	z-index: 1;
}

.gfx {
	background: url(img/gfx.jpg) no-repeat;
	float: left;
	height: 164px;
	margin-top: 115px;
	width: 52px;
	z-index: 1;
}

.top {
	background: url(img/bgcontent.gif) no-repeat 0 -4%;
	float: left;
	text-align: center;
	width: 632px;
	z-index: 150;
}

.header {
	background: #56644A url(img/header.jpg) no-repeat;
	color: #FFC;
	font-size: 1.4em;
	height: 232px;
	padding-right: 270px;
	z-index: 1;
}

.header h1 {
	font: normal 3.2em serif,sans-serif;
	padding: 62px 0 34px 0;
	z-index: 1;
}

.pattern {
	background: #334127 url(img/pattern.gif) repeat-x;
	clear: both;
	height: 15px;
	z-index: 1;
}

/* content */
.content {
	background: url(img/bgcontent.gif) no-repeat;
	clear: both;
	font-size: 1.2em;
	margin: 0 52px;
	padding: 0 38px 12px;
	z-index: 100;
}
.content .spacer {
	height: 42px;
	z-index: 1;
}

/* content item */
.item {clear: both; z-index: 1;}

.item img {border: 1px dashed #8A6; z-index: 1;}

.item .title {
	color: #445044;
	font: normal 2em serif;
	z-index: 1;
	border-right: 5;
}

.item .title:first-letter {
	display: block;
	float: left;
	font-size: 2.4em;
	z-index: 1;
}

.item .metadata {
	color: #666;
	font-size: 0.9em;
	float: left;
	padding: 0 0 6px 4px;
	z-index: 1;
}

.item .body {
	clear: both;
	z-index: 1;
}

/* footer */
.footer {
	background: url(img/bgfooter.gif) no-repeat;
	color: #666;
	font-size: 1.1em;
	line-height: 41px; 
	margin: 0 auto;
	text-align: center;
	width: 632px;
	z-index: 1;
}

.footer a {
	color: #666;
	text-decoration: none;
	z-index: 1;
}

.footer a:hover {
	color: #333;
	text-decoration: underline;
	z-index: 1;
}

/*
******************* MENU DEROULANT *****************************
*/
dl, dt, dd, ul, li, {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	position: Center; /* placement du menu, à modifier selon vos besoins */
	margin-top: 12px;
	margin-bottom: 75px;
	z-index:100;
	text-align: Center;
	width: 100%; /* correction pour Opera */
}

#menu dl {
	float: left;
	width: 20%;
	margin-right: 1.3ems;
	
}

#menu dt {
	cursor: pointer;
	text-align: center;
	color: #6C7151;
	font: normal 1.9em serif;
}

#menu dd {
	display: none;
}

#menu li {
	text-align: left;
	font: normal 1.2em serif;
}

#menu li a, #menu dt a {
	text-decoration: none;
	display: block;
	color: #6C7151;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	color: #2C3111;
}