/*
Theme Name: Wolf's Little Store
Theme URI: http://www.wolfslittlestore.be
Description: Wolf's Little Store, version 2
Version: 2
Author: Johan Ronsse
Tags: minimal, wolfr

Version 2 of Wolf's Little Store
*/
 
/*
	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; }
html, body { height: 100%; width: 100%; }
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; }
th { text-align: left; }
sub, sup { line-height: 0; font-family: "Georgia", serif;}


/* "Fake" includes that have to stay consistent */

/* Rounded corners on all sides */
.rc {
	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

/* Rounded corners only on the top sides */
.topRc {
	/* @inc .topRc */
	border-top-left-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-right-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
}

/* Rounded corners only on the bottom sides */
.bottomRc {
	/* @inc .bottomRc */
	border-bottom-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
}

.doubleRc {
	/* @inc .doubleRc */
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.opacity {
	/* @inc opacity */
	opacity: .5; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	-khtml-opacity: .5; /* Safari 1.x */
	-moz-opacity: .5; /* FF lt 1.5, Netscape */
}

.boxShadow {
	/* @inc .boxShadow */
	box-shadow: 0 2px 6px #AAA;
	-webkit-box-shadow: 0 2px 6px #AAA;
	-moz-box-shadow: #AAA 0 2px 6px;
}

.secondaryContent {
	/* @inc .secondarycontent */
	font-size: 11px;
	font-family: Arial, sans-serif;
}

.accessibility {
	/* @inc .offScreen */
	position: absolute;
	top: -9000px;
	left: -9000px;
	/* For screenreaders*/
}

/*
	Structure
*/

#header, #footer {
	position: relative;
	padding: 30px 0;
	clear: both;
}

/*
	Text styles
*/

body {
	background: #FFF;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
	font-family: Arial, sans-serif;
}

body {
	color: rgba(0,0,0,0.8);
}

	.colorInverse {
		color: #AAA;
		background-color: #000;
	}
	
	.colorInverse {
		color: rgba(255,255,255,0.6);
	}

	.colorInverse2 {
		color: #CDCDCD;
		background-color: #666;
	}
	
	#home.colorInverse {
		background: #222;
	}
	
h1, h2, h3, h4 {
	line-height: 1.2;
	color: #000;
	font-family: "Helvetica", Arial, sans-serif;
}

	.colorInverse h1,
	.colorInverse h2,
	.colorInverse h3,
	.colorInverse h4 {
		color: #FFF;
	}

h1, h2 {
	font-size: 21px;
	padding: 0 0 12px;
}
	
		#home h3, #home h4 { font-weight: 300; }
	
	
	h1.emblem {
		text-indent: -9000px;
		padding: 0;
	}

	h1.siteTitle {
		background: url('../images/1_trans.png') no-repeat top left;
		width: 460px;
		height: 53px;
	}
		.colorInverse h1.siteTitle {
			background: url('../images/1i_trans.png') no-repeat top left;
		}
	
	h1.emblem {
		font-size: 36px;
		background: url('../images/2_trans.png') no-repeat top left;
		width: 73px;
		height: 73px;
	}
		.colorInverse h1.emblem {
			background: url('../images/2i_trans.png') no-repeat top left;
		}

		div.emblem {
			font-size: 36px;
			text-indent: -9000px;
			padding: 0;
			width: 73px;
			height: 73px;
			margin-bottom: 12px;
			background: url('../images/2_trans.png') no-repeat top left;
		}
			.colorInverse div.emblem {
				background: url('../images/2i_trans.png') no-repeat top left;
			}

	h1.siteTitle a,
	h1.emblem a {
		display: block;
		width: 100%;
		height: 100%;
		border: none !important;
		overflow: hidden;
	}
	
	h2.pageTitle {
		padding-top: 34px;
		padding-left: 230px;
	}

h3, h4 {
	font-size: 15px;
	padding: 0 0 9px;
}

	.subcontent h4 {
		font-size: 13px;
	}
	
	span.date {
		font-weight: 300;
		font-family: "Palatino", "Times New Roman", Times, serif;
		font-style: italic;
	}
	
	.colorInverse span.date {
		color: rgba(255,255,255,0.7);
	}

.article h2 {
	padding-bottom: 0;
}

	.article h2 a {
		border: none;
	}

.article {
	padding: 0 0 33px;
}

p {
	padding: 0 0 17px;
}

/* For git pos */
#post-590 p {
	max-width: 590px;
}

	p.meta {
		font-family: Palatino, "Times New Roman", Times, serif;
		font-style: italic;
		padding: 9px 0 17px;
	}

		p.meta span {
			float: left;
			padding-right: 10px;
			margin-right: 10px;
			border-right: 1px solid #CCC;
		}

			.colorInverse p.meta span {
				border-color: #333;
				border-color: rgba(255,255,255,0.15);
			}
		
		p.meta span:last-child {
			border: none;
		}
	
	p.intro {
		font-size: 16px;
		color: #000;
		font-weight: 700;
	}
	
	  .colorInverse p.intro {
	    color: #EEE;
	    font-weight: 400;
	  }

	.content p {
		padding: 0 0 9px;
	}
	
	p.secondaryContent,
	.secondaryContent p {
		padding: 0 0 8px;
	}
		
		.secondaryContent, small, div.figure p.legend { font-family: "Lucida Grande", Verdana, sans-serif; font-size: 11px; }
		.secondaryContent em, small em { font-family: "Lucida Sans", "Lucida Grande", Verdana, sans-serif; }
		
		.subcontent { font-size: 13px; }
		.fontMonospace.subcontent { font-size: 12px; }
	
	p.clickthrough {
		text-align: right;
	}

	strong {
		color: #000;
	}
		.colorInverse strong { color: #FFF; }
	
	a strong{
		color: inherit;
	}

.box {
	border: 1px solid #CDCDCD;
	padding: 20px;
	margin: 0 0 20px;

	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.colorInverse .box {
	border-color: #323232;
	border-color: rgba(255,255,255,0.2)
}
	
	#searchAgain p {
		padding: 0;
	}

	#searchAgain.box {
		padding: 9px;
		margin: 0 0 17px;
	}

	p.searchresult {
		border-bottom: 1px solid #CDCDCD;
		padding: 10px 0;
	}
		.searchresult span.date {
			font-size: 12px;
		}
		.searchresult a {
			font-weight: 700;
		}

blockquote {
	font-style: italic;
	font-weight: 300;
	padding: 0 0 0 16px;
}

	q { font-style: italic; }

	blockquote.pullquote {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 18px;
	}

	blockquote cite {
		font-size: 11px;
		display: block;
		text-align: right;
		font-style: normal;
		color: #666;
	}

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

	ul.indented {
		margin-left: 17px;
	}

	ul li {
		padding: 0 0 4px;
	}
	
ol {
	list-style: decimal;
	padding: 0 0 17px 34px;
}

ul ul,
ul ol,
ol ul,
ol ol {
	padding: 0 0 0 17px;
}

hr {
	display: none;
}

	div.hr { border-top: 1px solid #666; margin: 0 0 9px; }
	.colorInverse div.hr { border-top: 1px solid #FFF; opacity: 0.5; }

code {
	font-family: Monaco, Consolas, "Courier New", Courier, monospace;
	font-size: 11px;
}
	.subcontent code { font-size: 10px; }
	.secondaryContent code { font-size: 9px; }

pre {
	margin: 0 0 9px;
	overflow: auto;
	background: #EEE;
	padding: 12px;

	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

abbr { border-bottom: 1px dotted #333; border-color: rgba(0,0,0,0.33); }
.colorInverse abbr { border-bottom: 1px dotted #CDCDCD; border-color: rgba(255,255,255,0.33); }
abbr.pdf {
	background: url(../images/pdf.gif) no-repeat;
	padding-left: 17px;
}

a { text-decoration: none; }
a:link { color: #2244BB; text-decoration: none; border-bottom: 1px solid #ABABF9; -webkit-transition: color 0.28s linear; }
a:visited { color: #551A8B; text-decoration: none; border-bottom: 1px solid #C7B4D9; -webkit-transition: color 0.28s linear; /* 33% of original visited color */ }
a:hover, a:active { color: #000; border-bottom: 1px solid #ABABAB; }

.mute a:link { color: #333; border-bottom: 1px solid #E3E3E3; }
.mute a:visited { color: #000; border-bottom: 1px solid #D3D3D3; }
.mute a:hover, a.mute:active, a.mute:focus { color: #000; border-bottom: 1px solid #ABABAB; }

/* Links when color inversed */
.colorInverse a:link { color: #FFFF00; border-bottom: 1px solid #545400; border-color: rgba(255,255,0,0.33); }
.colorInverse a:visited { color: #FFFF00; border-bottom: 1px solid #545400; border-color: rgba(255,255,0,0.33); }
.colorInverse a:hover, .colorInverse a:active { color: #FFF; border-bottom: 1px solid #ABABAB; }

.swapUnderlines a:link,
.swapUnderlines a:visited {
	border-bottom: none;
}

.swapUnderlines a:hover,
.swapUnderlines a:active {
	border-bottom: 1px solid #F00;
}

.noUnderlines a { border-bottom: none !important; }

table.datagrid {
	margin: 0 0 12px;
}

table.datagrid tr.rowOdd td {
	background: #FCFCFC;
}

table.datagrid th {
	border-bottom: 1px solid #DDD;
	padding: 5px 10px;
	white-space: nowrap;
}

table.datagrid td.date,
table.datagrid td.comments {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #666;
}

table.datagrid td {
	padding: 5px 10px;
	border-bottom: 1px solid #EEE;
}

table.datagrid td:last-child,
table.datagrid td.comments {
	border-right: none;
}

table.datagrid td:first-child,
table.datagrid td.date,
table.datagrid th:first-child,
table.datagrid th.date {
	padding-left: 0;
}

/*
	Forms
*/
input, textarea, select, button { font-family: Arial, sans-serif; font-size: 13px; }
.colorInverse input, .colorInverse textarea, .colorInverse select, .colorInverse button { color: #CCC; }

/*
	A very simple column system
*/
#container { width: 940px; padding: 0 30px; position: relative; margin: 0 auto;}
.col { width: 100px; padding-right: 20px; float: left; }
.col-2 { width: 220px; } /* Double column */
.col-3 { width: 340px; } /* Triple column */
.col-4 { width: 460px; } /* Four columns */
.col-5 { width: 580px; } /* Five columns */
.col-6 { width: 700px; } /* Six columns */
.col-7 { width: 820px; } /* Six columns */
.col-8 { width: 940px; } /* Six columns */


/*
	The Legendary Clearfix
*/
.clearfix:after, .cols:after, #controls:after, p.meta:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
	General purpose
*/

/* Use <i> for hidden to avoid long unnecessary markup*/
.hidden, i { display: none; }
.block { display: block; }
.mute { color: #666; }
.colorInverse .mute { color: #999; }
.nopad { padding: 0; }
.pad { padding: 12px; }
.noborder { border: none !important; }
.last { margin: 0 !important; padding: 0 !important;}

div.figure.setLeft { margin-right: 20px; }
div.figure.setRight { margin-left: 20px; }

.w1 { width: 120px; }
.w2 { width: 220px; }
.w3 { width: 340px; }
.w4 { width: 480px; }
.w5 { width: 580px; }
.w6 { width: 700px; }
.h1 { height: 100px; }
.h2 { height: 220px; }
.h3 { height: 360px; }
.h4 { height: 460px; }

.setRight { float: right; }
.r1 { margin-right: -140px; }
.r2 { margin-right: -240px; }
.r3 { margin-right: -360px; }
.r4 { margin-right: -480px; }

.setLeft { float: left; }
.l1 { margin-left: -120px; }
.l2 { margin-left: -240px; }
.l3 { margin-left: -360px; }
.l4 { margin-left: -480px; }

.p-col-2, .p-col-2.shiftTitle h2, .p-col-2.shiftTitle p.meta { padding-left: 240px; }
.p-col-1, .p-col-1.shiftTitle h2, .p-col-1.shiftTitle p.meta { padding-left: 120px; }

.p0 { padding: 0 !important; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.mb20 { margin-bottom: 20px; }
.mb { margin-bottom: 9px; }
.npr { padding-right: 20px; }
.ar { text-align: right; }
.border { border: 1px solid #CCC; border-color: rgba(0,0,0,0.33); }
.colorInverse .border { border: 1px solid #333; border-color: rgba(255,255,255,0.2); }
.uc { text-transform: uppercase; }
.firstLine p:first-child:first-line { font-weight: 700; color: #000;}
.colorInverse .firstLine p:first-child:first-line { font-weight: 700; color: #FFF;}
.marked { background: #FFA; }
.colorInverse .marked { color: #000; background: #FFFF00; }
.colorInverse .marked a { color: #000; }
.reg { font-weight: normal; }
.olborder { outline: 1px solid #AAA; -moz-outline-radius: 5px; }
.shadow { -webkit-box-shadow: 1px 1px 3px #555; }

span.dropcap, span.dropcapSans {
	font-size: 32px;
	display: block;
	font-family: "Arno Pro", "Times New Roman", serif;
	float: left;
	color: #000;
	line-height: 1;
	text-align: center;
}

	span.dropcapSans {
		font-family: Helvetica, Arial;
		font-weight: 700;
		padding: 0 5px 0 0;
		float: left;
		color: #000;
		position: relative;
		top: 3px;
		line-height: 1;
		text-align: center;
	}
	
	.colorInverse span.dropcap,
	.colorInverse span.dropcapSans {
		color: white;
	}

/*
	Font variations
*/

.fontMonospace { font-family: Consolas, Monaco, Courier; }
.fontMonospace h2 { font-family: Consolas, Monaco, Courier; }
.fontSerif { font-family: Georgia, serif !important; }
.fontSerif.intro { font-weight: 300; }

.permalink a {
	font-weight: 700;
	font-size: 14px;
	padding: 0 2px 1px;
	text-align: center;
	line-height: 13px;
	font-family: Georgia, Arial, sans-serif;
	display: block;
	border: 2px solid #ABABF9 !important;
	float: left;
	
	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
	.colorInverse .permalink a {
		border: 2px solid #ead91e !important;
	}

.commentslink a {
	padding: 0 2px 1px;
	text-align: center;
	line-height: 1.2;
	display: block;
	float: left;
}

.article {
	position: relative;
}

#asides h4 {
	padding-top: 0;
}

#asides object,
#asides embed {
	width: 418px;
}

#home #asides object,
#home #asides embed {
	width: 300px;
}

#asides {
	padding-top: 25px;
}

#asides img {
	max-width: 100%;
}

.aside {
	border-bottom: 1px solid #CDCDCD;
	margin-bottom: 17px;
}
	.colorInverse .aside {
		border-color: #323232;
		border-color: rgba(255,255,255,0.2);
	}

	.aside h4 { position: relative; }
	.aside h4 a.permalink { position: absolute; right: 0; opacity: 0.33; padding: 5px 5px 0; border: none; bottom: 6px; }
	.aside h4 a.permalink:hover { position: absolute; right: 0; opacity: 1; }
	#asides div.aside:last-child {
		border: none;
		margin: 0;
	}

.avatarOverlay {
	float: left;
	margin-left: -70px;
	background: url(../images/avatarOverlay.png) no-repeat;
	width: 50px;
	height: 50px;
}
	
	.colorInverse .avatarOverlay {
		background: url(../images/avatarOverlay_i.png) no-repeat;
	}

.avatar {
	float: left;
	margin-left: -70px;
}

.commentlist {
	list-style: none;
	padding: 0;
	width: 460px;
}

	.commentlist li {
		position: relative;
		min-height: 50px;
		margin: 0 0 17px;
		border-bottom: 1px solid #CDCDCD;
		font-size: 13px;
	}
	
		.commentlist li code {
			font-size: 11px;
		}
	
	.colorInverse .commentlist li {
		border-color: rgba(255,255,255,0.2);
	}
	
		.commentlist li p {
			padding: 0 0 9px;
		}
	
	.commentlist li:last-child {
		margin: 0;
		padding: 0;
		border: 0;
	}

h3#comments {
	padding-top: 23px;
	clear: both;
}


.commentlist cite {
	font-style: normal;
}

.commentmetadata {
	position: relative;
	bottom: 5px;
	border: none;
	text-align: right;
}

	.commentmetadata a:link,
	.commentmetadata a:visited {
		border-width: 0;
		color: rgba(0,0,0,0.5);
	}
	
	.colorInverse .commentmetadata a:link,
	.colorInverse .commentmetadata a:visited {
		color: rgba(255, 255, 255, 0.3);
	}
	
	.commentmetadata a:hover,
	.commentmetadata a:active {
		border-width: 1px;
		opacity: 1;
	}

textarea { width: 250px;}
input#author { width: 102px; }
input#email { width: 132px;}
input#url { width: 132px;}

#commentform {
	margin-top: 30px;
	padding: 20px 20px 0;
	border: 1px solid #CCC;

	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
	#commentform .col-2 { width: 138px;}
	#commentform .col-3 { width: 260px;}
	
	.colorInverse #commentform {
		border-color: #333;
		border-color: rgba(255,255,255,0.15);
	}

#commentform h3 {
	border-bottom: 1px solid #CCC;
	margin: 0 0 20px;
}
	.colorInverse #commentform h3 {
		border-color: #333;
		border-color: rgba(255,255,255,0.15);
	}
	
#blogform form {
	position: relative;
}

/* Other */

input, textarea {
	border: 1px solid #BBB;
	border-color: #CDCDCD #BABABA #BABABA #CDCDCD;
	background-color: #FFF;
	-webkit-transition: background-color 0.18s linear;

	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

	.colorInverse input,
	.colorInverse textarea {
		border-color: #111;
		background-color: #333;
	}

input {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 11px; padding: 2px 1px;
}

textarea { 
	padding: 4px;
	min-height: 170px;
}

input:focus, textarea:focus { border-color: #CCC; background-color: #FFF; }
.colorInverse input:focus, .colorInverse textarea:focus { border-color: #666; background-color: #333; color: #FFF; }

/* 
	Focus outline; Mozilla specific since Safari implements this right
	IE can f*** off
*/
@-moz-document url-prefix() {
	input:focus, textarea:focus { 
		outline: 2px solid #B6CBE5;
		-moz-outline-radius: 5px;
		border-color: #5D92D4;
	}
	.colorInverse input:focus,
	.colorInverse textarea:focus { 
		outline: 1px solid #FFFF00;
		border-color: #FFA;
	}

} 

label {
	font-size: 11px;
	font-weight: 700;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	display: block;
}

/*
	Buttons
*/

input.input-submit, a.button {
	color: #333;
	background: url(../images/buttonbg.png) repeat-x;
	padding: 3px 4px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 11px;
	border-width: 1px;
	border-style: solid;
	border-color: #CDCDCD #BABABA #BABABA #CDCDCD;
	text-align: center;

	/* @inc .rc */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

input[type="search"] + input {
	padding: 2px 8px;
}

	.colorInverse input.input-submit, .colorInverse a.button {
		color: #FFF;
		background: url(../images/buttonbg_i.png) repeat-x;
		border-color: #333 #222 #222 #333;
	}

	/*
		Button class results in a small button
		This is used in the search form. A few modifiers can make the button bigger.
		Modifiers below:
	*/
	
		a.mediumButton {
			font-size: 12px;
			font-weight: 700;
			padding: 3px 8px;
			font-family: Helvetica, Arial, sans-serif;
		} /* No extra modifiers, will create when needed */

input.input-submit:hover,
a.button:hover {
	border: 1px solid #BABABA;
	background: url(../images/buttonbg.png) repeat-x 0 -47px;
}

input.input-submit:active,
input.input-submit:focus,
a.button:active,
a.button:focus {
	border-color: #666 #E7E7E7 #E7E7E7 #666;
	background: url(../images/buttonbg.png) repeat-x 0 -47px;
}

.colorInverse a.button:hover,
.colorInverse a.button:active,
.colorInverse a.button:focus,
.colorInverse input.input-submit:hover,
.colorInverse input.input-submit:active,
.colorInverse input.input-submit:focus {
	border: 1px solid #454545;
	background: url(../images/buttonbg_i.png) repeat-x 0 -47px;
}



/*
	Controls
*/

#controls {
	height: 60px;
	width: 100px;
	position: absolute;
	right: 0;
	top: 60px;
}

#controls * {
	border: none;
}

#controls div {
	height: 60px;
	width: 40px;
	float: left;
}

#controls div a {
	padding-top: 40px;
	display: block;
	height: 20px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 11px;
	text-align: center;
}

#controls #nextItem {
	background: url('../images/controls2_trans.png') no-repeat 0 0;
	margin-right: 20px;
}
	#controls #nextItem:empty {
		background: url('../images/controls2_trans.png') no-repeat -120px 0;
	}

#controls #previousItem {
	background: url('../images/controls2_trans.png') no-repeat -60px 0;
}
	#controls #previousItem:empty {
		background: url('../images/controls2_trans.png') no-repeat -180px 0;
	}

.colorInverse #controls #nextItem { background: url('../images/controls2_i_trans.png') no-repeat 0 0; }
.colorInverse #controls #nextItem:empty { background: url('../images/controls2_i_trans.png') no-repeat -120px 0; }
.colorInverse #controls #previousItem { background: url('../images/controls2_i_trans.png') no-repeat -60px 0; }
.colorInverse #controls #previousItem:empty { background: url('../images/controls2_i_trans.png') no-repeat -180px 0; }


#previousItem.focus { outline: 1px dotted black;  }
#nextItem.focus { outline: 1px dotted black;  }
.colorInverse #previousItem.focus { outline: 1px dotted white; }
.colorInverse #nextItem.focus { outline: 1px dotted white; }


.cols .article:first-child { padding-top: 0;}

#grid {
	width: 100%;
}

#grid tr:nth-child(2n+1) td {
	position: static;
}

	.colorInverse #grid {
		border-color: #323232;
		border-color: rgba(255,255,255,0.2);
	}

#grid td {
	padding: 6px 8px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #F3F3F3;
}

	#grid td:last-child {
		border-right: none;
	}

	.colorInverse #grid td {
		border-color: #323232;
		border-color: rgba(255,255,255,0.2);
	}

#grid td.date { width: 26%; padding-right: 3%; }
#grid td.article h3 { padding: 0; font-size: 13px;}
#grid td.article h3 a { border: none; }
#grid td.comments { width: 14%; text-align: right; font-size: 11px; }

#grid td.comments a {
	display: block;
	float: right;
	zoom: 1;
}

	#grid td.comments a:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

#grid td.comments b,
#grid td.comments span {
	display: block;
	float: left;
}

#grid td.comments span {
	background: url(../images/comment.gif) no-repeat 0 50%;
	text-indent: -9000px;
	width: 10px;
	height: 14px;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	color: #FFF;
	margin-left: 2px;
}

td.date {
	font-weight: 300;
	font-family: "Palatino", "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 13px;
}

#footer small {
	display: block;
}

	small.block {
		line-height: 1.6;
	}

#homeSecondaryContent {
	font-size: 13px;
}

#home .box {
	background: #FFF;
}

#respond {
	clear: both;
	padding-top: 34px;
	width: 460px;
}

#fakeGrid {
	background: url(../images/fakegrid.gif);
	height: 280px;
	opacity: 0.2;
}

	.colorInverse #fakeGrid {
		background: url(../images/fakegrid_i.gif);
	}

/*
	Post specific: boekenarchief
	Hooks the backgrounds; sets the text box absolute
	in a relative container; this should be more generic
	But then again, we're just getting started :)
*/

body#post-107 {
	background: #6E7275 url('../images/0901/bookcover_bg.png') repeat-x;
}

#post-107 .marked,
#post-284 .marked {
	background: #333;
}

#post-107 .article {
	background: url('../images/0901/bookcovers.jpg') no-repeat scroll 0 141px;
}

#post-107 .wrapper {
	width: 942px;
	height: 857px;
	position: relative;
}

#post-107 .wrapper .w3 {
	position: absolute;
	top: 424px;
	left: 120px;
}

#post-107 .wrapper .p20 {
	height: 302px;
	background: #383B3E;
	border: 1px solid #85888B;
}


#post-107 .avatar,
#post-107 .avatarOverlay {
	position: absolute;
	right: -70px;
	background: url(../images/avatarOverlay_grey.png) no-repeat;
}

.col-8 .avatar,
.col-8 .avatarOverlay,
#post-284 .avatar,
#post-284 .avatarOverlay {
	position: absolute;
	right: -70px;
}
/* @todo fix this so it doesnt have to be post specific */

/*
	(Not really) post specific: Netlash website bouwen post
	Maybe redo this a bit better if I ever want to use it again
	It's an iPhone style list box, but this one is styled for long items
*/

.combolist li {
	padding: 20px;
	list-style: none;
	border: 1px solid #CDCDCD;
	border-bottom: none;
	background: #FFF;
}
	
	.combolist li:first-child {
		border-top-left-radius: 4px;
		-webkit-border-top-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		border-top-right-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topright: 4px;
	}

	.combolist li:last-child {
		border-bottom: 1px solid #CDCDCD;
		/* @inc .bottomRc */
		border-bottom-left-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-right-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomright: 4px;
	}
	
/*
	post specific: background color for photoblog ideas post
*/
body#post-284 {
	background: #0E0E0E;
}

body#post-284 p img {
	outline: 1px dotted rgba(255,255,255,0.25);
}

.section {
	padding-top: 30px;
}

#home h2 {
	word-spacing: -0.5px;
	font-weight: 600;
	letter-spacing: -0.3px;
	font-size: 18px;
	line-height: 1.33;
	padding-bottom: 25px;
}

	#siteIntro h2 a:link,
	#siteIntro h2 a:visited {
		border: none;
	}
	
	#siteIntro {
		width: 630px;
		position: absolute;
		top: 30px;
		left: 140px;
	}
	
	#siteIntro h2 {
		font-size: 34px;
	}
	

.grad {
	background-image: url(../images/grad.png);
	background-repeat: repeat-x;
}

.colorInverse .grad,
.colorInverse.grad {
	background-image: url(../images/grad_i.png);
	background-repeat: repeat-x;
}



#flickr {
	width: 220px;
	font-size: 11px;
	margin: 0 0 30px;
}

#flickr img {
	width: 72px;
	height: 72px;
}

#flickr a:link img,
#flickr a:visited img {
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out;
}

#flickr a:hover img,
#flickr a:active img,
#flickr a:focus img {
	opacity: 0.8;
}

#flickr ul {
	width: 220px;
}

	#flickr ul li {
		width: 72px;
		height: 72px;
		background: #EEE;
		margin: 0 1px 1px 0;
		float: left;
		padding: 0;
		list-style: none;
	}

	#flickr ul img {
		display: block;
	}


#twitter ul a.permalink {
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 11px;
	text-decoration: none;
	white-space: nowrap;
}

#twitter {
	width: 220px;
}

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

#twitter ul li {
	border-bottom: 1px solid #CDCDCD;
	padding: 0 0 10px;
	margin: 0 0 10px;
}

	#twitter ul li:last-child {
		border: none;
	}
	
#twitter h4, #flickr h4 {
	font-size: 15px;
}

/*#homeTertiaryContent {
	position: absolute;
	left: 1000px;
	top: 300px;
}*/

#home #asides, #winston div, #homeSecondaryContent h2 {
	padding: 0 20px 25px;
}

#projects {
	padding: 0 0 30px;
}

#archives ul {
	list-style: none;
}

	#archives ul li {
		padding: 0 0 12px;
		margin: 0 0 12px;
		border-bottom: 1px solid #CDCDCD;
	}
	
	#archives ul li:last-child {
		border: none;
	}
	
		.colorInverse #archives ul li {
			border-color: #323232;
			border-color: rgba(255,255,255,0.2);
		}
	
	
	#home #bangBangBang {
		font-size: 67px;
		color: #000;
		line-height: 1;
	}
	
	#home #bangBangBang span {
		text-transform: uppercase;
	}
	
	#description p {
		font-size: 18px;
		margin: 0 0 40px;
		width: 479px;
	}

#navigation {
	position: absolute;
	top: 30px;
	right: 30px;
}

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

	#navigation ul:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	
	#navigation li {
		padding: 0;
		margin: 0;
		float: left;
		font-size: 11px;
		padding-right: 12px;
		border-right: 1px solid #CDCDCD;
		margin-right: 12px;
		line-height: 1;
	}
	
	#navigation li a {
		display: block;
		line-height: 1;
		float: left;
	}

	#navigation li.selected a {
		color: #000;
		border: none;
	}
	
	.colorInverse #navigation li.selected a {
	   color: #FFF;
	}
	
	#navigation li:last-child {
		padding-right: 0;
		margin-right: 0;
		border: none;
	}
	
/*
  Photo of the month
*/

#photoOtm {
  padding: 0 0 0 20px;
  width: 560px;
}

#photoOtm img {
  width: 560px;
}

  #photoOtm a {
    border: none;
  }
  
  #photoOtm em span {
    font-family: "Baskerville", Times;
  }