﻿/****************************************************************************
	MAIN INFO
	
	@filename          : layout.css
	@description       : Un exemple simple d'une interface de blog en HTML5
	@authors           : Simon Guerin
	@date              : October 02 2009
	@modification      : 
	
	TABLE OF CONTENTS

	COLORS
	
*****************************************************************************/

body {background: #252525 url(./images/main-bg.png) top left repeat; font-family: verdana, helvetica, arial; font-size: 12px; color: #e6e6e6;}

header,nav,section,article,aside,footer {display: block;}

div#wrap{width: 100%;}

h1 {}

h2 {}

p, ul li {}

ul {list-style: none;}

div#wrap header {width: 99.9%; height: 145px;}

div#wrap header hgroup {
	float: left;
	width: 180px;
	height: 144px;
	background: url(./images/logo-bg.png) top left no-repeat;
	margin-left: 20px;
}

div#wrap header hgroup h1 {
	font-size: 36px;
	color: #ffdf1c;
	text-transform: uppercase;
	text-align: center;
	margin-top: 65px;
}

div#wrap header hgroup h1 a {text-decoration: none; color: #ffdf1c;}
div#wrap header hgroup h1 span {font-size: 30px;}

div#wrap header hgroup h2 {
	font-size: 12px;
	color: #f2f2f2;
	margin-left: 25px;
	margin-top: 4px;
}

nav {width: 100%; height: 53px; background-color: #098dc4;}

nav ul {
	float: right;
	padding-top: 22px;
	margin-right: 20px;
	height: 28px;
}

nav ul li {display: inline; padding: 0 20px 0 20px;}

nav ul li.rounded {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background-color: #3c3c3c;
	padding-top: 9px;
	padding-bottom: 9px;
}

nav ul li a {color: #FFF; text-decoration: none; text-transform: uppercase;}

div#wrap section {
	float: left;
	margin-top: 30px;
	margin-left: 22px;
	width: 585px;
	background-color: #646464;
}

div#wrap section article {
	float: left;
	margin: 10px;
	padding-bottom: 20px;
	width: 565px;
	margin-top: 10px;
	background-color: #474747;
	min-height: 300px;
}

div#wrap section article p {
	float: left;
	margin: 10px;
	margin-top: 15px;
	line-height: 18px;
}

div#wrap section article header {height: 0px;}

div#wrap section article header h3 {
	margin: 10px;
	font-family: helvetica, arial;
	font-size: 30px;
	color: #b6b6b6;
	background: url(./images/article-title-bg.png) bottom left no-repeat;
	padding-bottom: 30px;
}

div#wrap section article header h3 a {
	font-family: helvetica, arial;
	font-size: 30px;
	color: #b6b6b6;
	text-decoration: none;
}

div#wrap section article header h3 a:hover {color: #098dc4;}

div#wrap section article header p.articleDate {
	float: right;
	margin-right: 30px;
	margin-top: -32px;
	font-family: helvetica, arial;
	font-size: 11px;
	color: #098dc4;
	text-transform: uppercase;
}

div#wrap section article header p.date span.commentcount {border: none; text-decoration: none; color: #f7e014;}

div#wrap section article footer {
	float: left;
	margin: 10px;
	margin-top: 15px;
}

div#wrap section article footer ul li {
	display: inline;
	margin-right: 10px;
}

div#wrap section article footer ul li a {color: #098dc4;}

aside {
	float: left;
	margin-top: 30px;
	margin-left: 30px;
	width: 300px;
}

aside h2 {font-size: 14px;}

aside ul li {margin-top: 10px;}
aside h2 a , aside ul li a, p.tags a, div#wrap section article div.entry p a, div.meta div.post_nav p a {color: #a9adf3;}

div#ads {position: relative; top: 25px; background-color: blue;}

aside ul#twitter_update_list {
	float: left;
	margin-bottom: 25px;
}

aside ul#twitter_update_list li {
	float: left;
	display: block;
	margin-top: 10px;
	padding: 10px;
	width: 270px;
	font-family: arial, helvetica;
	font-size: 12px;
	line-height: 16px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #646464;
}

div.meta ul {margin-bottom: 40px;}

/* FOOTER */
div#wrap div#footer {
	clear: both;
	width: 100%;
	height: 45px;
	background-color: #474747;
}

div#wrap div#footer a, div#wrap div#footer p {float: left; margin-left: 22px; margin-top: 8px;}
div#wrap div#footer p {margin-top: 16px;}

/* COMMENTS SECTION */
div.myComment {
	clear: both;
	float: left;
	margin-left: 12px;
	margin-top: 20px;
}

div.myComment h3#comments {padding-bottom: 10px;}

div.myComment ul.commentlist {float: left;}
div.myComment ul.commentlist li {padding: 10px; padding-right: 0px; display: block; float: left; width: 96%; background-color: #646464; margin-bottom: 15px; padding-bottom: 10px;}

div.myComment div.comment-meta, div.myComment div.commentmetadata {margin-top: 5px;}
div.myComment div.comment-meta a, div.myComment div.commentmetadata a {color: #a9adf3;}
div.myComment ul.commentlist div.comment-body p {list-style: none; margin-left: -15px;}

div#content div#entry_content section article div.entry h3 {color: #098dc4; font-size: 16px;}

div#entry_content div.myPost section div article div.entry ul {margin-left: 10px; float: left;}

div#entry_content div.myPost section div article div.entry ul li {margin-bottom: 10px;}

div#entry_content div.myPost section div article div.entry p {width: 545px;}

div.entry p img {float: left; border: 0px; margin-top: -10px; margin-left: -4px;}
div.entry p img.alignImg {margin-left: 0px;}
div.entry h3 {float: left; margin-left: 10px; margin-top: 15px;}
div.meta div.post_nav {margin-bottom: 30px;}
div.meta div.post_nav p {line-height: 18px;}
div.myComment div#respond h3 {width: 565px;}
div.navigation {}
div.navigation p a {color: #a9adf3; margin-left: 32px; margin-top: 10px;}

pre, code {
	float:left;
	margin-left: 12px;
	width: 530px;
	margin-top: 5px;
	border: 1px dashed #ccc;
	padding: 5px;
}

p a.tt img {float: left; margin-top: 1px; padding-right: 5px;}