/* CSS by Geert De Deckere - geertdd@gmail.com - www.idoe.be */

@import 'reset.css';

html {
/*	background:url(../img/gui/grid.gif) repeat-y 50% 0;*/
	background-color:#fafcfe;
}

body {
	margin:0 auto;
	width:960px;
	font:12px/18px helvetica, arial, sans-serif;
	color:#1a1a1a;
}

p, ul, ol, h1, h2, h3, h4, h5, h6 {
	margin:0 0 18px;
}

a { color:#004AD2; }
a:visited { color:#006CE6; }

h5 {
	margin:0 0 17px;
	padding:0 30px;
	border-bottom:1px solid #d4cbb4;
	font-family:'myriad pro', 'arial narrow';
	text-transform:uppercase;
	color:#c1b698;
}
	h5 a,
	h5 a:visited {
		color:#c1b698;
		text-decoration:none;
	}
	h5 a:hover {
		color:#715305;
	}

/*
--- Pagintion
*/
.pagination {
	text-align:center;
	color:#999;
}
	.pagination .prev { float:left; }
	.pagination .next { float:right; }
	.pagination a {
		padding:8px;
		background:#D39609;
		font-weight:bold;
		color:#fff;
		text-decoration:none;
	}
	.pagination a:hover {
		background:#E9CB0E;
	}
	.pagination strong {
		padding:8px;
		background:#e1e2e4;
		font-weight:bold;
		color:#1a1a1a;
	}

/*
---- Header
*/
#header {
	position:relative;
	margin:0 0 36px;
	height:180px;
	background:url(../img/gui/consumentenblog-header.png) no-repeat 0 0;
}
	#header a { /* link to homepage */
		position:absolute;
		left:30px;
		bottom:0;
		width:680px;
		height:50px;
		text-indent:-9999px;
		outline:none;
	}

/*
---- Main Content
*/
#main-content {
	float:left;
	margin:0 0 36px 0;
	padding-left:160px;
	width:480px;
}
	#main-content h5 {
		margin-left:-160px;
	}

/*
--- Post formatting
*/
#main-content .post {
	position:relative;
	clear:both;
	margin:0 0 36px -160px;
	padding:0 0 17px;
	border-bottom:1px solid #d4cbb4;
}
	#main-content .post h1 {
		position:relative;
		float:right;
		margin:0;
		padding:0;
		width:480px;
		height:72px;
		background:url(../img/gui/hr-130px.gif) no-repeat 0 100%;
		font-size:24px;
		line-height:22px;
		color:#715305;
	}
		#main-content .post h1 a {
			position:absolute;
			bottom:7px; /* = 9px (same as post-date) - 2px (increased line-height) */
			color:#715305;
			text-decoration:none;
		}
		#main-content .post h1 a:hover {
			color:#d39609;
		}
	#main-content .post .date {
		position:relative;
		float:left;
		margin:0;
		padding:45px 10px 9px 40px;
		width:80px;
		background:#d39609 url(../img/gui/pixel-e5c00d.gif) repeat-y 30px 0;
		font-size:24px;
		color:#fff;
		text-align:right;
	}
		#main-content .post .date span { /* year */
			position:absolute;
			left:7px;
			bottom:7px;
			font-size:12px;
			color:#e9cb0e;
		}
	#main-content .post .author {
		clear:both;
		padding:9px 0 9px 180px;
		background:url(../img/gui/icon-document.gif) no-repeat 160px 11px;
		font-family:'myriad pro', 'arial narrow';
		color:#c1b698;
		text-transform:uppercase;
	}
		#main-content .post .author a { /* category links */
			color:#c1b698;
		}
		#main-content .post .author a:hover {
			color:#715305;
		}
	#main-content .post .body {
		padding-left:160px;
		background:url(../img/gui/end-of-post.gif) no-repeat 100% 100%;
	}
		#main-content .post .body h2 {
			font-size:18px;
		}
		#main-content .post .body h3 {
			text-transform:uppercase;
			color:#808080;
		}
		#main-content .post .body ul { list-style-type:square; }
		#main-content .post .body ol { list-style-type:decimal; }
		#main-content .post .body blockquote {
			padding:0 18px;
			background:url(../img/gui/quotes.png) no-repeat 0 2px;
			font-style:italic;
		}
		#main-content .post .body .pullquote {
			padding:17px 0 18px;
			background:none;
			border-top:1px solid #ccc;
			font-size:18px;
			font-style:normal;
			color:#999;
			text-align:center;
		}
			#main-content .post .body .pullquote.a { /* left float inset */
				float:left;
				margin-right:30px;
				margin-left:-160px;
			}
			#main-content .post .body .pullquote.b { /* left float */
				float:left;
				margin-right:30px;
			}
			#main-content .post .body .pullquote.c { /* right float */
				float:right;
				margin-left:30px;
			}
			#main-content .post .body .pullquote.small {
				width:130px;
			}
			#main-content .post .body .pullquote.medium {
				width:290px;
			}
			#main-content .post .body .pullquote.large {
				clear:both;
				width:480px;
			}
		#main-content .post .body em {
			padding:2px 0;
			background:#fafccb;
		}
		#main-content .post .body strong {
			font-weight:bold;
			color:#333;
		}
		#main-content .post .body table {
			margin-bottom:17px;
			border-top:1px solid #E1E2E4;
		}
		#main-content .post .body th {
			font-weight:bold;
		}
		#main-content .post .body th,
		#main-content .post .body td {
			padding:8px 8px 9px 0;
			border-bottom:1px solid #E1E2E4;
		}
#main-content .figure {
	display:block;
	margin:0 0 18px;
}
	#main-content .figure.a { /* left float inset */
		float:left;
		margin-right:30px;
		margin-left:-160px;
	}
	#main-content .figure.b { /* left float */
		float:left;
		margin-right:30px;
	}
	#main-content .figure.c { /* right float */
		float:right;
		margin-left:30px;
	}
	#main-content .figure.small {
		width:130px;
	}
	#main-content .figure.medium {
		width:290px;
	}
	#main-content .figure.large {
		clear:both;
		width:480px;
	}
	#main-content .figure.extralarge {
		clear:both;
		margin-left:0;
		margin-right:0;
		width:640px;
	}
	#main-content .figure img {
		width:100%; /* stretch to width of div.figure */
		margin-bottom:-6px;
	}
	#main-content .figure small {
		display:block;
		padding:9px 10px;
		background:#E3DDCD;
		font:inherit;
		color:#666;
	}
		#main-content .figure small span {
			margin-right:3px;
			font-weight:bold;
			text-transform:uppercase;
			color:#333;
		}
	#main-content .figure.clean small {
		padding-left:0;
		padding-right:0;
		background:none;
	}
#main-content .more {
	color:#999;
}
	#main-content .more .read-on {
		margin-right:10px;
		font-weight:bold;
	}
	#main-content .more .read-comments {
		padding-left:13px;
		border-left:1px solid #D4CBB4;
		color:#999;
	}
#main-content .footnote {
	padding-top:18px;
	background:url(../img/gui/hr-130px.gif) no-repeat 0 0;
}

/*
---- Comments
*/
#main-content #reacties h2,
#main-content #nieuwe-reactie h2 {
	margin:0 0 36px;
	font-size:24px;
	color:#d4cbb4;
}
/* Comment list */
#main-content .commentlist {
	margin:0 0 36px;
}
	#main-content .commentlist li .date {
		float:left;
		margin-left:-160px;
		width:130px;
		text-align:right;
	}
		#main-content .commentlist li .date span { /* hour */
			display:block;
			color:#999;
		}
	#main-content .commentlist li h4 { /* gravatar + author */
		margin:0;
		padding:9px 0 27px;
		background:#E3DDCD url(../img/gui/textballoon.gif) no-repeat 0 100%;
		color:#999;
	}
		#main-content .commentlist li h4 img {
			position:relative;
			top:-9px;
			float:left;
			width:36px;
			height:36px;
		}
		#main-content .commentlist li h4 a {
			text-decoration:none;
		}
		#main-content .commentlist li h4 strong {
			margin:0 3px 0 15px;
			font-weight:bold;
			text-transform:uppercase;
			color:#333;
		}
		#main-content .commentlist li h4 a strong {
			text-decoration:underline;
		}
	#main-content .commentlist li .body {
		clear:both;
		padding:0 0 18px;
	}
		#main-content .commentlist li#reactie-preview {
			background:url(../img/gui/preview.png);
		}
/* Comment form */
#main-content .formerrors {
	padding:9px 30px 27px;
	background:red url(../img/gui/textballoon.gif) no-repeat 0 100%;
	color:#fff;
	list-style-type:square;
}
#main-content .error label {
	font-weight:bold;
	color:red;
}
#nieuwe-reactie input[type="text"] {
	width:236px;
}
#nieuwe-reactie label {
	float:left;
	margin-left:-160px;
	width:130px;
	text-align:right;
}
#nieuwe-reactie #rememberme {
	vertical-align:middle;
}
#nieuwe-reactie #rememberme + label {
	float:none;
	margin-left:0;
}
#nieuwe-reactie textarea {
	width:476px;
	height:140px;
}
input[type="submit"] {
	padding:9px;
}
input.submit {
	font-weight:bold;
	text-transform:uppercase;
}
input[type="submit"] + span {
	margin:0 5px;
}
.note, .note a { color:#999; }
.note a:hover { color:#333; }

/*
---- Sub Content
*/
#sub-content {
	float:right;
	margin:0 0 50px;
	width:290px;
}
	#sub-content > .fl, /* left column */
	#sub-content > .fr { /* right column */
		width:130px;
	}
	#sub-content ul {
		float:left;
		width:100%;
		margin:0 0 18px;
	}
	#sub-content li a {
		display:block;
		padding:0 10px 0 30px;
		background:url(../img/gui/icon-document.gif) no-repeat 10px 3px;
		text-align:right;
		text-decoration:none;
	}
		#sub-content li a strong {
			float:left;
			text-align:left;
			text-decoration:underline;
		}
		#sub-content li a span {
			color:#999;
		}
	#subscribe-rss img,
	#subscribe-mail img {
		float:left;
		margin:0 0 18px;
		border:1px solid #6DC67A;
	}
	#subscribe-rss a:hover img,
	#subscribe-mail a:hover img {
		border-color:green;
	}
	#sub-content #categories li a,
	#sub-content #archives li a {
		background-image:url(../img/gui/icon-folder.gif);
	}
	#sub-content #skyscraper {
		text-align:center;
	}

/*
---- Footer
*/
#footer {
	clear:both;
	float:left;
	padding:0 0 0 30px;
	width:930px;
	background:#004AD3 url(../img/gui/consumentenblog-header.png) no-repeat -444px 0;
	color:#6692e5;
}
	#footer a {
		color:#ccdbf6;
	}
	#footer #copyright {
		float:left;
		margin:0;
		padding:18px 0 18px 610px;
		border-left:1px solid #0077E9;
	}
	#footer .feeds {
		float:right;
		margin:18px 0;
		width:160px;
	}
		#footer .feeds a {
			padding-left:18px;
			background:url(../img/gui/feed-icon-small.gif) no-repeat 0 50%;
		}