/*******************************************************************************
 * Stylesheet for el73.be
 * Author: Kevin Wetzels - el73.be
 */

/**
 *[Elements
 */
body {
	margin: 0;
	padding: 0;
	background: #666 url(img/pattern_062.png);
	color: #000;
	font: 100%/1.5em "Georgia", "Times New Roman", serif;
	font-size: 0.8em;
}

a {
	color: #36f;
	text-decoration: none;
	border-bottom: 1px dashed #36f;
}

a:visited {
	color: #000;
	border-color: #000;
}

a:hover {
	color: #660;
	border-color: #660;
}

a:active {
	color: #f60;
	border-color: #f60;
}

a img {
	border: 0;
}

h1, h2, h3 {
	font: 2.2em "Segoe UI", "Arial", "Helvetica", sans-serif;
	margin-top: 0;
	margin-bottom: 0.5em;
	letter-spacing: -1px;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1.2em;
}

p {
	margin: 0 0 1em 0;
}

/**
 *[Structural
 */
#main, #homepage #main {
	width: 480px;
	float: left;
}

#main {
	width: 720px;
}

#secondary, #homepage #secondary {
	width: 480px;
	float: right;
}

#secondary {
	width: 240px;
}

.ruler {
	clear: both;
}

.ruler hr {
	display: none;
}

/**
 *[Header
 */
#header {
	background: #222;
	color: #ccc;
	height: 50px;
	border-bottom: 5px solid #666;
}

#site-title {
	width: 480px;
	height: 50px;
	background: #222 url(img/logo.small.png) no-repeat left center;
	float: left;
}

#site-title a {
	display: block;
	width: 480px;
	height: 50px;
	border: 0;
}

#site-title span {
	position: absolute;
	left: -10000px;
}

#header ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 50px;
	line-height: 50px;
	float: right;
	width: 480px;
}

#header li {
	float: left;
	height: 50px;
}

#header li a {
	display: block;
	color: #999;
	text-decoration: none;
	text-transform: lowercase;
	height: 50px;
	width: 6em;
	text-align: center;
	border: 0;
}

#header a#current {
	color: #fff;
}

#header a:hover {
	color: #cc9;
}

/**
 *[Content
 */
#content, .container {
	width: 960px;
	margin: 0 auto;
}

#content, #homepage #content {
	background: #fff;
	color: #444;
}

#content {
	background: #fff url(img/bg.content.png);
}

.post {
	padding: 10px 20px;
	line-height: 1.6em;
}

.listed h1 {
	padding: 10px 20px;
	margin: 0;
}

.posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.posts li {
	border-top: 1px dotted #ccc;
	background: #fff url(img/bg.listed.png) repeat-y right top;
	overflow: hidden;
	width: 100%;
}

.posts div {
	width: 440px;
	padding: 5px 20px;
	margin: 0;
	float: left;
}

.posts h2 {
	color: #663;
}

.posts .meta {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 240px;
	float: right;
	background: #eee;
	color: #333;
}

.posts .meta li {
	padding: 5px 10px;
	width: 220px;
	border: 0;
	border-bottom: 1px dotted #ccc;
}

.posts .meta li.more {
	padding: 0;
	font: 1.5em "Georgia", "Times New Roman", serif;
	border: 0;
}

.posts .meta li.more a {
	display: block;
	width: 200px;
	padding: 5px 20px;
	color: #555;
	text-align: right;
	border: 0;
}

.posts .meta li.more a:hover {
	color: #000;
}

.post h1 {
	font-size: 2.5em;
}

.post h2 {
	color: #663;
}

.post ul, .normal ul {
	list-style-type: square;
	margin-left: 20px;
	padding-left: 0;
}

#comments {
	background: #fff;
	color: #333;
	clear: both;
}

#comments h2 {
	padding: 5px 10px;
	background: #bbb397;
	margin: 0;
}

#comments .number {
	display: block;
	float: right;
	font: 1.5em "Georgia", "Times New Roman", serif;
	color: #bbb397;
	text-align: right;
}

ol.comments {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 720px;
	line-height: 1em;
}

.comment-odd, .comment {
	width: 720px;
	background: #fff url(img/bg.comment.png) repeat-y left top;
	overflow: hidden;
	border-bottom: 1px dotted #999;
	margin: 0;
}

.comment-odd {
	background: #eae8df url(img/bg.comment.png) repeat-y left top;
}

.text {
	padding: 10px;
	width: 540px;
	float: right;
	line-height: 1.5em;
}

#commentform {
	background: #eae8df;
	margin: 0;
}

#commentform div {
	width: 340px;
	padding: 10px;
	float: right;
	color: #444;
	font-size: 0.9em;
}

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

#commentform li {
	background: #d3cebc;
	color: #222;
	margin-bottom: 1px;
	padding: 5px 10px;
}

#commentform label {
	display: block;
	width: 140px;
	margin-right: 10px;
	text-align: right;
	float: left;
}

#commentform li input {
	width: 170px;
}

#content code {
	font-size: 1.2em;
}

.code {
	font: 1em "Courier New", monospace;
	border: 1px solid #ccc;
	background: #f6f6f6;
}

.code ol {
	list-style-type: decimal-leading-zero;
	margin: 0 0 0 40px;
	padding: 0;
	background: #eee;
}

.code li {
	padding: 5px;
}

#data {
	margin: 0;
	padding: 0;
	width: 358px;
	border: 1px solid #eae8df;
	float: left;
}

#opinion {
	background: #d3cebc;
	margin: 0;
	padding: 5px 10px;
	width: 698px;
	border: 1px solid #eae8df;
	border-top-color: #d3cebc;
	clear: both;
}

#opinion textarea {
	width: 98%;
}

#commentform legend {
	display: none;
}

.comment .text {
	border-color: #eae8df;
}

#comments .meta {
	background: #333;
	color: #ddd;
	padding: 0;
	margin: 0;
	width: 140px;
	padding: 5px 10px;
	float: left;
	list-style: none;
}

#comments .avatar {
	width: 40px;
	height: 40px;
	float: left;
	margin: 3px 8px 0 0;
}

#comments .poster {
	font-size: 1.3em;
}

#comments .poster a {
	border: 0;
	color: #fff;
}

#comment .day {
	display: block;
}

#comments .date {
	display: block;
	background: #333;
	color: #999;
	padding: 0;
	letter-spacing: 0;
	font-size: 0.9em;
}

#comments .date a {
	color: #999;
	border: 0;
}

blockquote {
	background: #eae8df;
	padding: 10px;
	font-style: italic;
	border-top: 5px solid #d3cebc;
	border-bottom: 5px solid #d3cebc;
}

blockquote .origin {
	margin: 0;
	text-align: right;
	font-style: normal;
	color: #000;
}

blockquote.from-article {
	font-size: 1.5em;
	color: #999;
	background: #fff;
	border: 0;
	font-style: italic;
	line-height: 1.1em;
	width: 30%;
	float: right;
	text-align: right;
	margin: 0 0 10px 10px;
	padding: 0;
}

.from-article p {
	margin: 0;
}

.from-article p:before {
	content: open-quote;
}

.from-article p:after {
	content: close-quote;
}

.illustration-large, .illustration-1, .illustration-2 {
	background: #eae8df;
	color: #000;
	border: 1px dashed #d3cebc;
	font: 0.9em "Segoe UI", "Arial", "Helvetica", sans-serif;
	text-align: center;
	padding: 5px;
}

.illustration-1 {
	float: left;
	margin: 0 10px 10px 0;
}

.illustration-2 {
	float: right;
	margin: 0 0 10px 10px;
}

.caption {
	display: block;
}

.illustration-large img, .illustration-1 img, .illustration-2 img {
	clear: both;
	border: 1px solid #d3cebc;
}

#homepage #content {
	background: #fff url(img/bg.content.home.png) repeat-y;
}

.meta {
	font: 1em "Segoe UI", "Arial", "Helvetica", sans-serif;
	color: #666;
	letter-spacing: -1px;
}

#search, #homepage #search {
	background: #eae8df;
	color: #000;
	clear: both;
	width: 460px;
	padding: 10px;
	margin-top: 0;
}

#search {
	width: 220px;
	background: #d3cebc;
}

#search legend {
	display: none;
}

#search fieldset, #homepage #search fieldset {
	border: 1px solid #eae8df;
	margin: 0;
	padding: 0;
}

#search fieldset {
	border-color: #d3cebc;
}

#search .textfield {
	width: 130px;
}

#homepage #search .textfield {
	width: 200px;
}

.separator hr {
	background: #eee;
	color: #eee;
	height: 1px;
	border: 0;
}

.separator {
	margin-bottom: 1em;
}

.separator:after {
	content: '\2660';
	color: #ddd;
	background: #fff;
	display: block;
	margin: -1.5em auto 0 auto;
	width: 2em;
	height: 1em;
	text-align: center;
}

.prev-next {
	width: 720px;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #ddd;
	border-top: 1px solid #ccc;
	color: #222;
}

.prev-next li {
	width: 360px;
	float: left;
}

.prev-next li.next {
	float: right;
	text-align: right;
}

.prev-next a {
	display: block;
	width: 320px;
	padding: 5px 20px;
	border: 0;
	color: #222;
}

.prev-next a:hover {
	background: #222;
	color: #fff;
}

/**
 *[Secondary content
 */
#work {
	position: relative;
	width: 480px;
	background: #bbb397;
	float: right;
}

#info {
	width: 240px;
	float: left;
	background: #d3cebc;
	color: #333;
}

#info div {
	padding: 5px 10px;
	font-size: 0.9em;
}

#jobs, #for-hire {
	width: 240px;
	float: right;
	background: #bbb397;
	color: #333;
}

#common {
	clear: both;
	position: relative;
	float: left;
	width: 960px;
	display: block;
	background-image: url(img/bg.common.png);
	background-repeat: repeat-y;
}

#merge-cal, #archives {
	width: 480px;
	float: left;
	background: #d3cebc url(img/bg.mergecal.png) repeat-y;
	color: #333;
}

#archives {
	background: #d3cebc;
	color: #333;
	width: 720px;
	float: left;
}

#archives-by-date {
	width: 480px;
	background: #333;
	color: #ccc;
	overflow: hidden;
	float: left;
}

#archives-by-date h3 {
	border-right: 1px dotted #fff;
}

#archives-by-date ol {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

#archives-by-date li {
	width: 159px;
	border-right: 1px solid #444;
	border-bottom: 1px solid #444;
	background: #333;
	color: #ccc;
	float: left;
}

#archives-by-date a {
	display: block;
	width: 139px;
	padding: 10px;
	text-align: right;
	color: #ccc;
	border: 0;
	text-transform: lowercase;
}

#archives-by-date a:hover {
	background: #000;
	color: #fff;
}

#archives-by-date a strong {
	color: #fff;
	font-weight: normal;
	display: block;
	font-size: 1.5em;
}

#archives-by-topic {
	width: 240px;
	float: right;
}

#archives-by-topic ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#archives-by-topic a {
	display: block;
	width: 220px;
	padding: 5px 10px;
	border: 0;
	color: #333;
	border-bottom: 1px dotted #fff;
}

#archives-by-topic a:hover {
	background: #eae8df;
	color: #000;
}

#merge-cal h2, #archives h2, #archives h3, #info h2 {
	background: #bbb397;
	color: #333;
	padding: 5px 10px;
	margin: 0;
}

#archives h2, #archives h3 {
	border-bottom: 1px dotted #fff;
}

#merge-cal h3 {
	background: #333;
	color: #ccc;
	width: 140px;
	padding: 5px 10px;
	font: 1.2em "Georgia", "Times New Roman", serif;
	float: left;
	text-align: right;
	margin: 0;
	clear: left;
}

#merge-cal h3 .day {
	display: block;
	font-size: 1.8em;
	line-height: 1em;
	color: #fff;
}

#merge-cal h3 .month {
	display: block;
}

#merge-cal p.more {
	background: #333;
	color: #ccc;
	width: 460px;
	padding: 10px;
	clear: both;
}

#merge-cal ol {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #d3cebc;
	overflow: hidden;
}

#merge-cal li {
	clear: left;
	overflow: hidden;
	border-bottom: 1px dotted #fff;
	background: #d3cebc url(img/bg.mergecal.png) repeat-y;
}

#merge-cal .events {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	width: 320px;
}

#merge-cal .events li {
	clear: none;
	border: 0;
	background: #d3cebc;
}

#merge-cal li a {
	border: 0;
	display: block;
	color: #333;
	padding: 5px 10px;
	width: 300px;
}

#merge-cal li a:hover {
	background: #eae8df;
}

#delicious, #meta {
	width: 240px;
	float: left;
}

#meta {
	background: #333;
	color: #ccc;
}

#meta h2 {
	padding: 5px 10px;
	background: #222;
	color: #fff;
	margin: 0;
}

#feeds h2 {
	background: #222 url(img/feed.png) no-repeat 220px center;
}

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

#feeds a {
	display: block;
	width: 220px;
	padding: 5px 10px;
	color: #ccc;
	border: 0;
	border-top: 1px dotted #222;
}

#feeds a:hover {
	background: #000;
	color: #fff;
}

#more-el73 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#more-el73 span {
	position: absolute;
	left: -10000px;
}

#more-el73 a {
	display: block;
	width: 240px;
	height: 50px;
	background: #333 url(img/roam.png) no-repeat center top;
	border: 0;
	border-top: 1px dotted #222;
}

#more-el73 #mandro a {
	background-image: url(img/mandro.png);
}

#more-el73 a:hover {
	background-position: center -50px;
}

#delicious h2 {
	padding: 5px 10px;
	background: #ccc;
	margin: 0;
	color: #000;
}

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

#delicious li {
	width: 240px;
}

#delicious li a {
	display: block;
	width: 220px;
	padding: 5px 10px;
	border: 0;
	background: #eee;
	color: #333;
}

#delicious li.odd a {
	background: #f6f6f6;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

#delicious li a:hover {
	background: #fff;
	color: #000;
}

#delicious .more {
	background: #ccc;
	color: #333;
	text-align: right;
	padding: 10px;
	width: 220px;
	position: absolute;
	bottom: 0;
}

#delicious .more a {
	display: block;
	font-size: 1.5em;
	color: #000;
	border: 0;
}

#for-hire {
	padding-top: 100px;
	width: 240px;
	background: #333 url(img/for-hire.jpg) no-repeat left top;
	color: #ccc;
	float: left;
}

#for-hire h2 {
	margin: 0;
	padding: 5px 10px;
	color: #fff;
	background: #222;
	font-size: 1.5em;
}

#for-hire p {
	padding: 5px 10px;
}

#jobs h2, #jobs p.more {
	margin: 0;
	padding: 5px 10px;
	color: #221;
	background: #bbb397;
}

#jobs p.more {
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: right;
}

#jobs p.more a {
	display: block;
	font-size: 1.5em;
	border: 0;
	color: #000;
	text-transform: lowercase;
}

#jobs h2 {
	font-size: 1.5em;
	background-image: url(img/via-creativeskills.be.png);
	background-repeat: no-repeat;
	background-position: 130px 8px;
}

#jobs ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #bbb397;
	background: #d3cebc;
}

#jobs li a {
	display: block;
	width: 220px;
	padding: 5px 10px;
	border: none;
	color: #333;
	border-top: 1px solid #bbb397;
}

#jobs li a:hover {
	background: #eae8df;
}

/**
 *[Footer
 */
#footer {
	clear: both;
	background: #222;
	color: #ccc;
	border-top: 1px dotted #fff;
}

#disclaimer {
	font-size: 0.9em;
	color: #999;
	padding: 10px;
	clear: both;
}

/**
 *[General
 */
.hide {
	position: absolute;
	left: -10000px;
}

.more {
	margin: 0;
}

.date, .nr-comments {
	padding-left: 14px;
	background-image: url(img/calendar.gif);
	background-repeat: no-repeat;
	background-position: left center;
	margin-right: 10px;
}

.nr-comments {
	background-image: url(img/comment.gif);
}

a.feed, #merge-cal a.feed {
	border: 0;
	vertical-align: top;
}

/**
 *[Homepage
 */
#recent-blog {
	background: #fff;
}

#recent-post h2 {
	font-size: 2.5em;
	margin: 0;
}

#logo {
	position: relative;
	top: -5px;
	width: 380px;
	background: #222 url(img/logo.big.png) no-repeat 20px center;
	color: #ccc;
	padding-left: 100px;
	padding-top: 10px;
	height: 96px;
	float: left;
}

#logo h1 {
	margin: 0;
	height: 55px;
	border-left: 1px solid #333;
	padding: 20px 10px 5px 10px;
	font: italic 1em/1.4em "Georgia", "Times New Roman", serif;
	letter-spacing: 0;
}

#logo a, #footer a, #for-hire a, #merge-cal a {
	border-bottom: 1px dashed #cc9;
	text-decoration: none;
	color: #cc9;
}

#inspiration {
	position: relative;
	width: 480px;
	background: #eae8df url(img/bg.inspiration.png) repeat-y;
}

#inspiration img {
	border: none;
	width: 480px;
	height: 100px;
	border-bottom: 1px dotted #333;
}

#inspiration p, #inspiration h3 {
	padding: 5px 10px;
	margin: 0;
}

#inspiration p.more {
	position: absolute;
	right: 0;
	bottom: 0;
	color: #aaa;
	background: #333;
	margin: 0;
	text-align: right;
	width: 100px;
	letter-spacing: -1px;
}

#inspiration .explanation {
	width: 300px;
	padding-bottom: 10px;
}

#inspiration p.more a{
	font-size: 1.6em;
	line-height: 1em;
	text-transform: lowercase;
	color: #fff;
	display: block;
	border: 0;
}

#recent-post {
	float: left;
}

#recent-post div {
	width: 460px;
	padding: 0 10px;
	float: left;
}

#recent-post .meta {
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
	border-top: 1px dotted #eee;
	background: #fff;
	color: #333;
	height: 2.6em;
}

#recent-post .meta li.more {
	width: 160px;
	padding: 0;
	text-align: right;
}

#recent-post .meta li.more a {
	display: block;
	width: 140px;
	color: #444;
	background: #fff url(img/bg.lezen.png) no-repeat left top;
	font: 1.5em "Georgia", "Times New Roman", serif;
	border: 0;
	padding: 5px 10px;
}

#recent-post .meta li.more a:hover {
	color: #fff;
	background: #333;
}

#recent-post .meta li {
	width: 140px;
	padding: 0.5em 10px 5px 10px;
	float: left;
}

#furthermore {
	background: #ddd;
	color: #333;
	clear: both;
}

#furthermore h2 {
	font-size: 1.5em;
	background: #333;
	color: #eee;
	padding: 5px 10px;
	margin: 0;
	border-top: 1px dotted #fff;
}

#furthermore ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #ddd;
	position: relative;
	float: left;
}

#furthermore .meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font: 1em "Segoe UI", "Arial", "Helvetica" sans-serif;
}

#furthermore .meta li {
	border-top: 1px dashed #ddd;
	width: 140px;
	padding: 3px 10px;
}

#furthermore .calendar {
	margin-left: 10px;
}

.li-1 {
	width: 160px;
	float: left;
	padding-top: 10px;
	padding-bottom: 3.5em;
	background: #f6f6f6;
}

.li-2 {
	width: 160px;
	float: left;
	padding-top: 10px;
	padding-bottom: 3.5em;
	background: #eee;
}

.li-3 {
	width: 160px;
	float: left;
	padding-top: 10px;
	padding-bottom: 3.5em;
	background: #ddd;
}

#furthermore .meta {
	position: absolute;
	bottom: 0;
	background: #bbb;
	color: #000;
	margin: 0;
}

#furthermore .meta .read {
	padding: 0;
	width: 160px;
}

#furthermore .li-1 .meta {
	background: #ddd;
}

#furthermore .li-1 .meta li {
	border-color: #f6f6f6;
}

#furthermore .li-2 .meta {
	background: #ccc;
}

#furthermore .li-2 .meta li {
	border-color: #eee;
}

#furthermore .li-3 .meta li {
	border-color: #ddd;
}

#furthermore .meta li.more {
	padding: 0;
	width: 160px;
}

.meta .nr-comments a {
	color: #222;
	border: 0;
}

.meta .nr-comments a:hover {
	color: #000;
}

#furthermore .meta .more a {
	display: block;
	width: 140px;
	padding: 10px;
	text-align: right;
	border: 0;
	color: #222;
	font: 1.6em "Georgia", "Times New Roman", serif;
}

#furthermore .meta .more a:hover {
	background: #333;
	color: #fff;
}

#furthermore div {
	margin: 0 10px 4.5em 10px;
}

#furthermore h3 {
	color: #000;
	letter-spacing: 0;
}

#homepage #search {
	border-top: 1px dotted #999;
}