/*  
Theme Name: Catalog of visual interestingness
Theme URI: http://www.wolfslittlestore.be
Description: Theme of 'Catalog of visual interestingness' (Formerly Den Bompa)
Version: 0.5
Author: Johan Ronsse
Author URI: http://www.wolfslittlestore.be
*/

/* Reset */
body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style:none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table {  border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }

/* Basics */
body {
	font: 300 14px Georgia, Times, serif;
	color: #555;
	line-height: 1.48;
	background: #FFF;
}

#categories {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #808080;
	list-style: none;
}

#welcome {
	padding: 0 0 30px 148px;
}

ul {
	list-style: disc;
	padding: 0 0 15px 20px;
}

ol {
	list-style: decimal;
	padding: 0 0 15px 20px;
}


#welcome p {
	font-size: 12px;
	font-family: Arial, sans-serif;
	color: #000;
	font-weight: 700;
	padding: 0;
}

#categories a {
	font-weight: 700;
	border: none;
}

#categories ul {
	list-style: none;
	padding: 0;
}

#categories li {
	float: left;
}

#categories li li {
	background: #FFF;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #c8d5e5;
	margin: 8px 6px 2px 0;
	padding: 2px 6px;
}

#categories li li a {
}

#categories h3 {
	color: #000;
	display: none;
}

#archives ul {
	-moz-column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-count: 3;
	-webkit-column-gap: 30px;
	font-size: 13px;
}

strong {
	font-weight: 700;
}

#container {
	padding: 20px 0 20px 20px;
	width: 837px;
	margin: 0 auto;
}

#header {
	width: 110px;
	position: fixed;
	left: 20px;
	top: 20px;
}

span.category {
	display: block;
	text-align: right;
	background: #004276;
	padding: 2px 8px 2px 8px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

span.category a {
	color: #FFF !important;
}

span.date, span.author {
	font-family: Arial, sans-serif;
	font-size: 11px;
	text-align: right;
	display: block;
	padding-right: 3px;
	line-height: 17px;
}

span.author {
	color: #AAA;
}

span.infinity {
	font-size: 16px;
	position: relative;
	top: 1px;
}

	span.infinity a {
		text-decoration: none;
		border: none;
	}

.post {
	position: relative;
}

div.meta {
	width: 120px;
	float: left;
	min-height: 40px;
	padding: 6px 15px;
}

.post h2 {
	float: left;
	padding: 0 0 20px 0;
}

.entry { 
	clear: both;
	padding: 0 0 0 152px;
	margin: 0 0 0 0;
	position: relative;
	bottom: 18px;
}

span.category a {
	font: 700 11px "Arial";
	padding: 8px 0 6px 0;
}

span.category a {
	color: #FFF;
	text-decoration: none;
	border: none;
}

.post {
	position: relative;
}

#content {
	line-height: 1.5;
	float: left;
	margin: 0 0 0 70px;
	width: 687px;
}

#content img {
	width: 535px;
}

#sidebar {
	padding: 0 0 10px 40px;
	margin: 0 0 0 8px;
	width: 170px;
	float: left;
}

#footer {
	clear: both;
	padding: 20px 0;
	margin: 0 auto;
	font-size: 11px;
	color: #808080;
	font-family: arial, sans-serif
}

	#footer p {
		float: right;
	}
	

.postmetadata {
	text-align: left;
}

.postmetadata {
	clear: left;
	padding: 5px 10px;
	border-bottom: 1px solid #EEE;
	color: #000;
	font: 300 10px Verdana;
	background: #CCC;
	float: right;
}


.post {
	margin: 0 0 22px;
}

.alt {

}

small {
	font-family: Verdana;
	font-size: 10px;
	line-height: 1.5em;
}
	
/**
 * = Headings
 * ----------------------------------------------------------
 */

/* h1 */

h1 {
	background: url(images/logo.gif) no-repeat 0 0;
	height: 695px;
	width: 47px;
	text-indent: -9000px;
	float: left;
	color: #FFF;
	z-index: 3;
	margin-bottom: 30px;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	display: block;
	height: 695px;
	width: 57px;
	overflow: hidden;
	border: none;
}

h1 a {
	color: #FFF !important;
}

span.description {
	color: #FFC;
	font-size: 18px;
	display: block;
	width: 600px;
	padding: 0 0 20px;
	font-family: 'Monaco', 'Courier New', 'Lucida Grande', Arial, Sans-Serif;
	position: relative;
	bottom: 18px;
	left: 30px;
	float: left;
}

/* h2 */

h2 {
	font: 400 28px/1.4 "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0 0 10px 0;
	color: #000;
	width: 537px;
	overflow: hidden;
}

	h2 a {
		border-width: 2px !important;
	}


h2.pagetitle {
	padding: 0 0 30px 15px;
}

h2.pagetitle-categories {
	padding: 0 0 30px 150px;
	text-transform: uppercase;
}

h2 strong {
	font-weight: 300 !important;
	font-style: italic;
}


/* h3 */
h3 {
	font: 700 16px/1 Arial, Sans-Serif;
	padding: 0 0 10px 0;
}

/* p */

p {
	padding: 0 0 15px 0;
}

	p.backlink {
		text-align: right;
		font-family: Arial, sans-serif;
		font-size: 11px;
	}
	
		p.backlink a:link,
		p.backlink a:visited {
			padding: 3px 12px;
			background: #EEE;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			text-decoration: none;
			font-weight: 700;
			border: 1px solid #AAA;
		}
		
		p.backlink a:hover,
		p.backlink a:active {
			color: #222;
			background: #DDD;
		}

blockquote {
	padding: 0 0 0 12px;
	border-left: 1px solid #555;
	font-style: italic;
	margin: 0 0 12px 12px;
}

blockquote p {
	margin: 0 0 15px;
	padding: 0;
}

p strong {
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal;
}

/* Removes underlines from headings that are links */
h1 a, h2 a, h3 a {
	text-decoration: none !important;
}

/* Keeps h1 black no matter what */
h1 a {
	color: #2B2B2B;
}

code {
	font: 300 14px "Monaco", "Courier New", Courier, monospace;
}

.small {
	font-size: 11px;
}


/* Links */

a:link {
	text-decoration: none;
	color: #004276;
	border-bottom: 1px solid #ABABF9;
}

a:visited {
	text-decoration: none;
	color: #669;
	border-bottom: 1px solid #c7b4d9; /* 33% of original visited color */
}

a:hover, a:active {
	color: black !important;
}

.navigation {
	padding: 0 0 15px 152px;
	font-family: Arial, sans-serif;
	font-size: 11px;
}

	.navigation a:link,
	.navigation a:visited {
		color: #808080;
		padding: 3px 12px;
		background: #EEE;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		text-decoration: none;
		font-weight: 700;
		border: 1px solid #AAA;
	}

	.navigation a:hover,
	.navigation a:active {
		color: #222;
		background: #DDD;
		border: 1px solid #AAA;
	}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

/**
 * = Clearfix
 * ----------------------------------------------------------
 * @see http://www.positioniseverything.net/easyclearing.html
 */

.clearfix:after, .heading:after, .navigation:after, #footer:after, #categories:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

span.marquee {
	background: #FFA;
}

.err404 span {
	font-size: 79px;
	line-height: 1;
}

p#intro {
	font-size: 18px;
	padding: 0 0 20px 150px;
	position: relative;
	min-height: 158px;
	height: auto !important;
	height: 158px;
}

p#intro small {
	font-family: Monaco, 'Courier New', monospace;
	font-size: 10px;
}

#intro #introPara {
	font-size: 96px;
	position: absolute;
	top: 0px;
	left: 400px;
	color: #004276;
	/* Inc opacity */
	opacity: .3; /* Standard: FF gt 1.3, Opera, Safari */
	filter: alpha(opacity=30); /* IE lt 8 */
	-ms-filter: "alpha(opacity=30)"; /* IE 8 */
	-khtml-opacity: .3; /* Safari 1.x */
	-moz-opacity: .3; /* FF lt 1.3, Netscape */
}

#intro #themes {
	width: 230px; position: absolute; left: 480px; top: 3px;
}

#tagLine {
	color: #808080;
	font-size: 11px;
	position: absolute;
	top: 20px;
	right: 20px;
	font-family: Monaco,'Courier New', monospace;
	font-size: 10px;
	width: 150px;
	text-align: right;
}

	#tagLine strong {
		font-weight: 700;
		font-size: 11px;
		color: #555;
	}