/*
	NONO-LE-HOOLS.COM
	feuille de styles
	janvier 2009
*/


html, body { padding: 0; margin:0; font-size: 11px; line-height: 1.2em; font-family: Arial,sans-serif; color:#333; text-align: left;}
html { background: #333 url(img/bg-body-1.jpg) repeat-y center;}

	.floatLeft {float: left;}
	.floatRight {float: right;}
	a {color: #9b9a8f; text-decoration: none;}
	a:hover {color: #fff;}
	img {display: block; margin:0; padding:0; border: none;}
	:link, :visited, :hover, :active, :focus {outline-style:none; } /* hack Firefox pour bordure pointillee */

	.spacer {clear: both;}

	
/* ======= BASE */

	h1 {font-size: 2.2em; font-weight: bold; padding:0px; margin: 20px auto; width: 940px; height: 60px; text-align: left;}
		h1 a {color: #333; text-transform: uppercase;}
	#menu {width: 940px; height: 40px; padding: 0; margin: 0 auto; font-weight: bold;}
		#menu a, #menu span {display: inline; float: left; width: 200px; height: 16px; margin: 0 0 0 20px; padding: 4px 10px 0 10px; background: #333; text-transform: uppercase;}
		#menu a.home, #menu span.home {margin-left: 0px;}
		#menu a:hover {background: #fff; color: #333;}
		#menu span.on {background: #4e6d80; color: #fff;}
	#hierarchie {width: 920px; height: 16px; background: #333; padding: 4px 10px 0 10px; margin: 0 auto 20px auto; text-transform: uppercase; font-weight: bold; color: #9b9a8f;}
		#hierarchie .on {color: #4e6d80;}
	#page {width: 940px; margin: 0 auto;}
	#footer {width:920px; height: 16px; margin: 0 auto 20px auto; padding: 4px 10px 0 10px; background: #333; font-size: 0.9em;clear: both; color: #9b9a8f; font-weight: bold; text-transform: uppercase; text-align: right;}



/* ======= HOME et SOMMAIRES RUBRIQUES */

	#listeSommaire {width: 940px; margin: 0 auto;}
	#listeSommaire a {display: inline; float: left; width: 200px; height: 210px; background: #333;  color: #9b9a8f; padding: 10px 10px 0 10px; text-transform: uppercase; font-weight: bold;}
		a.blocMarge {margin: 0 20px 20px 0;}
		a.blocNoMarge {margin: 0 0 20px 0;}
	#listeSommaire a:hover {background: #fff; color: #333;}
	#listeSommaire a img {float: left;}
	#listeSommaire a span {display: block; float: left; width: 200px; height: 16px; padding: 4px 0 0 0; margin: 0;}
		

/* ======= BLOG */

	#col700 {float: left; width: 700px; background: #fff; margin: 0 0 20px 0; padding: 0px}
		#col700 .pagination {width: 680px; height: 16px; background: #333; padding: 4px 10px 0 10px; margin: 0; text-transform: uppercase; font-weight: bold; color: #333;}
			#col700 .pagination p {display: block; margin:0; padding: 0;}
			#col700 .pagination p span.on {color: #4e6d80;}
	#col220 {float: right; width: 220px; margin: 0;}
		#col220 .box {width: 180px; height: 180px; margin: 0 0 20px 0; padding: 20px; background: #333; color:#9b9a8f; text-transform: uppercase; font-weight: bold;}
		#col220 .box span {color: #4e6d80;}
			#col220 .box ul {padding:0; margin:0;}
				#col220 .box ul li {list-style: none; padding:0 0 4px 0; margin:0;}
	h2 {margin: 20px 20px 0px 10px; padding: 0px 0 0px 10px; font-size: 1em; font-weight: bold; text-transform: uppercase; line-height: 1em; background: url(img/puce2.gif) left top no-repeat; background-position-y: 1px;}
		h2 span {margin: 0; padding: 0 0 0 14px; font-size: 0.7em; font-weight: bold; text-transform: uppercase;}
			h2 span a {color: #9b9a8f;}
			h2 span a:hover {color: #4e6d80;}
	.listeBlog, .billetBlog {margin: 0px 20px 20px 34px;}
		.listeBlog p, .billetBlog p {margin: 7px 0; padding:0; text-align: justify;}
		.listeBlog a:hover, .billetBlog a:hover {color: #4e6d80;}
		.listeBlog img, .billetBlog img {margin: 0 auto;}

/* ======= COMICS et MORE*/

	.blanc {background: #fff;}
	.noir {background: #000; color: #9b9a8f;}
	#col940 {float: left; width: 940px; margin: 0 0 20px 0; padding: 0px}
		#col940 .pagination {display: block; width: 920px; height: 16px; background: #333; padding: 4px 10px 0 10px; margin: 0; text-transform: uppercase; font-weight: bold; color: #333;}
			#col940 .pagination p {display: block; margin:0; padding: 0;}
			#col940 .pagination p span.on {color: #4e6d80;}
		#col940 .albumComics {text-align: center; margin: 20px 0;}
			#col940 .albumComics h3 {font-size: 1.1em; font-weight: bold; text-transform: uppercase;}
			#col940 .albumComics p {margin: 7px 30px;}
			#col940 .albumComics a:hover {color: #4e6d80;}
			#col940 .albumComics img {margin: 0 auto;}