/**
 * @author Pim Derks <info@pimderks.com>
 * @copyright Pim Derks
 * 
 * @package PimDerks.com
 */

/**
 * Index of this Cascading Style Sheet
 *
 * 1. GRID
 *
 * 2. TYPOGRAPHY
 *   2.1 General
 *   2.2 Headings
 *   2.3 Text elements
 *   2.4 Lists
 *   2.5 Forms
 *   2.6 Tables
 *   2.7 Images
 *
 * 3. LAYOUT
 *   3.1 Header
 *   3.2 Navigation
 *   3.3 Content
 *
 * 4. HACKS
 *
 */
 
@import url("reset.css") screen,projection;
@import url("print.css") print;

html {
	background:rgb(255,255,255) url(../images/texture.jpg) repeat top center;	
	margin:0;
}

body {
	background:transparent url(../images/header.jpg) repeat-x top center;
	color:rgb(120,120,120);
	font-family:"Helvetica Neue",Helvetica,Arial,Verdana, serif;
	font-size:12px;
	line-height:18px;
	margin:0;
	padding:0;
	min-width:940px;
	position:relative;
}

body.404 {
	background-image:url(../images/header404.jpg);
}

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

strong { font-weight:bold; }
em { font-style:italic; }

.hide {
	margin-left:-999em;
	position:absolute;	
}

span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}


div.hr {
	background:transparent url(../images/hr.png) no-repeat center center;
	clear:both;
	height:1.5em;
	margin:3em 0;
}

	div.hr hr {
		display:none;
	}

h1,
h2,
h3,
h4,
h5 {
	color:rgb(80,80,80);
	font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans serif;
	font-weight:bold;
}

h1 {
	
}

h2 {
	font-size:3em; /* 36px */
	letter-spacing:-2px;
	line-height:1em;
	margin-bottom:1em;
	text-shadow:1px 1px 0px rgb(255,255,255);
}

h3 {
	color:rgb(100,100,100);
	font-size:1.5em; /*18px */
	line-height:1em;
	margin-bottom:1em;
}

nav h2 {
	position:absolute;
	left:-9999em;
}

p {
	margin-bottom:1.5em;
	text-shadow:1px 1px 0px rgb(235,235,235);
}


span.required {
	color:rgb(255,0,0);
}

a:link {
	color:rgb(79,154,185);
}

a:hover,
a:focus,
a:visited {
	color:rgb(64,132,161);
}

a:hover {
	text-decoration:none;
}

h2 a:link,
h2 a:visited,
h2 a:hover,
h2 a:active {
	color:rgb(80,80,80);
	text-decoration:none;
}

h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
	color:rgb(120,120,120);
	text-decoration:none;
}

h2 a:hover,
h3 a:hover {
	text-decoration:underline;
}

p a:active {	
	left:1px;
	position:relative;
	top:1px;
}

abbr {
	border-bottom:1px dotted rgb(80,80,80);
}

.button,
a.button:link {
	background:rgb(100,100,100) url(../images/footer-gradient.png) repeat-x 0 0;
	border:1px solid rgb(0,0,0);
	color:rgb(220,220,220);
	font-size:0.833em; /* 10px */ 
	line-height:1.8em;
	padding:0.5em 0.9em 0.5em 3.5em;
	position:relative;
	text-decoration:none;
	text-transform:uppercase;
	border-radius:1em;
	-khtml-border-radius:1em;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
}

form .button {
	padding-left:0.9em;
}

.button:visited {
	color:rgb(255,255,255);
}

.button:hover {
	background-color:rgb(80,80,80);
	color:rgb(255,255,255);
}

.button:active {
	color:rgb(255,255,255);
}

.button img.icon,
a.button:link img.icon {
	border:0;
	left:0.9em;
	position:absolute;
	top:0.1em;
}

section#twitter li em,
section#now-playing li em,
ul.projects dt.info + dd, 
ul.projects dt.year + dd,
section#experience dt.period + dd {
	font-family:Georgia,"Times New Roman",serif;
}

div#grid {
	bottom:0;
	background:url(../images/grid.png);
	display:none;
	position:absolute;
	top:0;
	width:100%;
	z-index:100;
}

			
body > section {
	background:transparent url(../images/section.png) repeat-x bottom left;
	overflow:hidden;
	padding:42px 0;
}

section.third {
	float:left;
	margin-right:20px;
	width:300px;	
}

section.half {
	float:left;
	margin-right:20px;
	width:460px;	
}

section.last {
	margin-right:0;
}
		
div.container {
	margin:0 auto;
	position:relative;
	width:940px;
}

/* Header
------------------------------------------------------------------------------*/

header#branding {
	background:transparent url(../images/menu.png) repeat-x bottom left;
	height:84px;
	width:100%;
}

header#branding div.container {
	padding-top:1.5em;
	padding-bottom:1.5em;
}

	header#branding a.logo {
		background:transparent url(../images/sprite.png) no-repeat -20px -234px;
		display:block;
		height:42px;
		width:323px;
		text-indent:-9999em;
	}
	
	header#branding a.logo:hover,
	header#branding a.logo:focus {
		background-position:-20px -185px;
	}

	header#branding nav {
		position:absolute;
		right:0;
		top:24px;
	}
	
	header#branding nav ul li {
		display:inline;
	}
		
		header#branding nav ul li a {
			background:transparent url(../images/sprite.png) no-repeat 0 -106px;
			display:block;
			float:left;
			height:30px;
			text-indent:-9999em;
		}				
	
		header#branding nav ul li a[href='/profiel/']{ 
			background-position:0 -71px;
			width: 118px; 
		}
			
		header#branding nav ul li a[href='/werk/']{ 
			background-position:-122px -71px;
			width: 100px;				
		}
			
		header#branding nav ul li a[href='/contact/']{ 
			background-position:-229px -71px;
			width: 134px; 
		}
		
		header#branding nav ul li a[href='/profiel/']:hover, 
		header#branding nav ul li a[href='/profiel/']:focus { 
			background-position:0 -35px;
		}
			
		header#branding nav ul li a[href='/werk/']:hover, 
		header#branding nav ul li a[href='/werk/']:focus { 
			background-position:-122px -35px;
		}
			
		header#branding nav ul li a[href='/contact/']:hover, 
		header#branding nav ul li a[href='/contact/']:focus { 
			background-position:-229px -35px;
		}

		body.profile header#branding nav ul li a[href='/profiel/']{ 
			background-position:0 0;
		}
			
		body.work header#branding nav ul li a[href='/werk/']{ 
			background-position:-122px 0;	
		}
			
		body.contact header#branding nav ul li a[href='/contact/']{ 
			background-position:-228px 0;
		}
		
/* Intro
------------------------------------------------------------------------------*/

section#intro h1,
section#intro h2 {
	color:rgb(255,255,255);
	font-size:5em; /* 60px */
	line-height:1em;
	margin-bottom:0.3em;
	text-shadow:1px 1px 0px rgb(113,157,170);
}

section#intro h1 + p,
section#intro h2 + p {
	color:rgb(215,236,242);
	font-family:Georgia,Times New Roman,serif;
	font-size:2em; /* 24px */
	font-style:italic;
	line-height:1.5em; /* 36px */
	margin:0 20px 0 0;
	text-shadow:1px 1px 1px rgb(113,157,170);
}

section#intro h1 + p + p,
section#intro h2 + p + p {
	margin-top:1.5em;
}

section#intro h1 + p em,
section#intro h2 + p em,
section#intro h1 + p em a,
section#intro h2 + p em a {
	color:rgb(255,255,255);
	font-style:normal;
	text-decoration:none;
}

section#intro img {
	float:right;
	position:relative;
	margin-top:-42px;
	z-index:2;
}

/* Filter projects
------------------------------------------------------------------------------*/

ul.filter {
	margin:21px 0;
}

	ul.filter li {
		display:inline;
	}
	
		ul.filter li a {
			background:rgb(225,225,225);
			color:rgb(255,255,255);
			font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans serif;
			font-size:11px;
			font-weight:bold;
			padding:2px 5px;
			text-decoration:none;
			text-shadow:-1px -1px 0px rgb(195,195,195);
			text-transform:uppercase;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
		}
		
		ul.filter li a:hover {
			background:rgb(195,195,195);
			text-shadow:-1px -1px 0px rgb(175,175,175);
		}
		
		ul.filter li a:active {
			background:rgb(175,175,175);
			text-shadow:-1px -1px 0px rgb(145,145,145);
		}
		
		ul.filter li.active a {
			background:rgb(145,145,145);
			text-shadow:none;
		}

/* List of project
------------------------------------------------------------------------------*/

ul.projects {
	margin:0 0 0 -20px;
	position:relative;
	width:980px;
}

	ul.projects li {
		display: -moz-inline-stack;
		display:inline-block;
		list-style-position:outside;		
		list-style-type:none;
		margin:0 0 20px 20px;
		position:relative;
		vertical-align:top;
		width:300px;
		*display:inline;
		*zoom:1;
	}
		
	ul.projects li dl,
	ul.projects li dl dd {
		margin:0;
	}
	
			ul.projects li dl dt {
				position:absolute;
				margin-left:-9999em;
			}						
			
			ul.projects li h3 {
				background:url(../images/shadow.png) no-repeat 0 150px;
				color:rgb(74,74,74);
				font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans serif;
				font-size:12px;
				font-weight:bold;
				line-height:12px;
				margin-bottom:0;
				padding-top:198px;
			}
			
			ul.projects li:hover h3 {
				background-position:0 151px;
			}				
			
			ul.projects li dt.year + dd {
				color:rgb(153,153,153);
				position:absolute;
				right:0;
				top:194px;
			}
			
			ul.projects li dt.info + dd {
				color:rgb(215,215,215);
				font-style:italic;
				margin-top:1.5em;
			}
			
			ul.projects li:hover dt.info + dd {
				color:rgb(195,195,195);
			}
			
			ul.projects li:hover dt.type {
				background:rgb(40,40,40) url(../images/sprite.png) no-repeat 0 -282px;				
				display:block;
				height:5px;
				left:-5px;
				margin-left:0;
				text-indent:-999em;				
				top:42px;
				width:5px;
				z-index:1;
			}
			
			ul.projects li dt.type + dd {
				background:rgb(80,80,80);				
				color:rgb(255,255,255);
				display:none;				
				font-size:10px;
				left:-5px;
				padding:2px 5px 2px 15px;
				position:absolute;
				top:20px;
				text-transform:uppercase;
				z-index:10000;
				-moz-border-radius:2px;
				-webkit-border-radius:2px;
			}
			
			ul.projects li:hover dt.type + dd {
				display:block;
			}
			
			ul.projects li img {
				position:absolute;
				top:0;
			}
			
				ul.projects li img {
					background:rgb(250,250,250);
					border:1px solid rgb(240,240,240);
					padding:9px;
					-moz-border-radius:2px;
					-webkit-border-radius:2px;
				}
				
				ul.projects li img:hover {
					border-color:rgb(230,230,230);
				}
				
			ul.projects li dt.images + dd {
				margin-left:-999em;
				position:absolute;				
			}

/* Highlights on workpage
------------------------------------------------------------------------------*/

div.highlights {
	background:rgb(255,255,255);
	border:1px solid rgb(240,240,240);
	height:400px; /* for IE7 */ 
	overflow:hidden;
	padding:10px;
	position:relative;
	width:918px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

	div.highlights > div {
		overflow:hidden;
		position:relative;
	}
	
		div.highlights > div > ol {
			margin:0;
			position:relative;
			width:7540px;
		}
		
			div.highlights > div > ol li {
				background:rgb(255,139,0) url(../images/slide1.jpg);				
				float:left;
				height:350px;
				padding:25px 75px;
				width:770px;
			}
			
			div.highlights > div > ol li h3,
			div.highlights > div > ol li h4,
			div.highlights > div > ol li p {
				color:rgb(255,255,255);
				text-shadow:1px 1px 0 rgba(0,0,0,0.5);
				width:300px;
			}
			
			div.highlights > div > ol li a {
				color:rgb(255,255,255);
			}
			
			div.highlights > div > ol li.odd h3,
			div.highlights > div > ol li.odd h4,
			div.highlights > div > ol li.odd p {
				margin-left:450px;
			}
			
			div.highlights > div > ol li + li {
				background:rgb(254,59,0) url(../images/slide2.jpg);
			}
						
			div.highlights > div > ol li + li + li {
				background:rgb(96,162,6) url(../images/slide3.jpg);
			}
			
			div.highlights > div > ol li + li + li + li {
				background:rgb(192,63,117) url(../images/slide4.jpg);
			}
			
			div.highlights > div > ol li + li + li + li + li {
				background:rgb(1,79,151) url(../images/slide5.jpg);
			}
			
	div.highlights ul#waste li {
		background:transparent url(../images/gradient-border-horizontal.png) no-repeat bottom center;
		height:15px;
		left:9px;
		position:absolute;
		top:10px;
		width:921px;		
	}
	
	div.highlights ul#waste li#bottom {
		background-position:top center;
		bottom:10px;
		top:auto;		
	}
	
	div.highlights ul#waste li#left,
	div.highlights ul#waste li#right {
		background-image:url(../images/gradient-border-vertical.png);
		background-position:top right;
		left:10px;
		margin-top:-170px;
		top:50%;
		height:340px;
		width:11px;
	}
	
	div.highlights ul#waste li#right {
		background-position:top left;
		left:auto;
		right:10px;
	}
			
	div.highlights ul.highlights-controls {
		left:10px;
		margin:-25px 0 0 0;
		position:absolute;
		top:50%;
		width:918px;	
	}

	div.highlights ul.highlights-controls li {
		position:absolute;		
	}
	
	
		div.highlights ul.highlights-controls li.next {
			right:0px;
		}		
	
		div.highlights ul.highlights-controls li a {
			background:url(../images/sprite.png) no-repeat -394px 0px;
			cursor:pointer;
			display:block;
			height:52px;		
			position:relative;
			text-indent:-9999em;
			width:52px;	
			z-index:1;
		}
		
		div.highlights ul.highlights-controls li a.disabled {
			display:none;
		}
				
		div.highlights ul.highlights-controls li a:hover {
			background-position:-380px -55px;
		}
			
		div.highlights ul.highlights-controls li.prev a {
			background-position:-340px -165px;
		}
		
		div.highlights ul.highlights-controls li.prev a:hover {
			background-position:-355px -111px;
		}

		div.highlights ul.highlights-controls li a span {
			background:url(../images/sprite.png) no-repeat -12px -280px;
			display:block;
			height:101px;
			position:absolute;		
			left:0;
			top:-23px;
			width:19px;	
			z-index:10;
		}	
		
		div.highlights ul.highlights-controls li.next a span {
			background-position:-31px -280px;
		}
		
		div.highlights ul.highlights-controls li.prev a span {
			left:auto;
			right:0;
		}


/* Experience/CV
------------------------------------------------------------------------------*/

section#experience {
}

	section#experience ol {
		margin-bottom:18px;
		margin-left:-20px;
		position:relative;
		width:980px;
	}
	
		section#experience ol li {		
			display:inline-block;			
			*display:inline;
			margin-left:20px;
			position:relative;
			vertical-align:top;
			width:220px;
			*zoom:1;			
		}
		
			section#experience ol li dl {		
			}
			
				section#experience ol li dt,
				section#experience ol li dd.adr {		
					margin-left:-999em;
					position:absolute;
				}
				
				section#experience ol li dd h4 {
					color:rgb(80,80,80);
				}
				
					section#experience ol li dd h4 a {
						color:rgb(80,80,80);
						text-decoration:none;
					}
					
					section#experience ol li dd h4 a:hover {
						text-decoration:underline;
					}
					
					section#experience ol li dt:first-of-type + dd {
						padding-bottom:54px;
					}
					
					section#experience ol li dt.period + dd {
						color:rgb(200,200,200);
						position:absolute;
						top:36px;
					}
					
					section#experience ol li dt.course + dd,
					section#experience ol li dt.function + dd {
						position:absolute;
						top:18px;
					}

/* Progressbar
------------------------------------------------------------------------------*/

dl.progress {}

	dl.progress dt {
		font-weight:bold;
		line-height:3em;
		margin-left:0.5em;
		position:absolute;		
	}
	
	dl.progress dd {
		background:rgb(255,255,255);
		border:1px solid rgb(200,200,200);
		margin-bottom:1.5em;
	}
			
		dl.progress dd span {
			background:rgb(181,215,227);
			display:block;
			line-height:3em;
			text-indent:-999em;
		}
		
		dl.progress dd:hover {
			color:rgb(0,0,0);
		}

/* Artists
------------------------------------------------------------------------------*/

ol.artists {
	display:block;
	height:15em;	
	margin-bottom:160px;
	position:relative;
}

	ol.artists li {
		background:rgb(255,255,255);
		border:1px solid rgb(200,200,200);
		height:15em;
		float:left;
		margin-right:20px;
		width:58px;
		z-index:2;
	}
	
	ol.artists li:hover {
		background:rgb(245,245,245);
	}
	
	ol.artists li:last-of-type {
		margin-right:0;
	}
		
	ol.artists span.graph { 
		background:rgb(181,215,227);
		bottom:-1px;
		display:block;
		position:absolute;
		text-align:center;
		text-indent:-9999em;
		width:58px;
		z-index:3;
	}
	
	ol.artists li:hover span.graph {
		background:rgb(64,132,161);
		color:rgb(255,255,255);
		text-indent:0;
	}
	
	ol.artists span.count { 		
		bottom:0;
		display:block;
		left:0;
		position:absolute;
		text-align:right;
		text-indent:-999em;
		width:940px;
		z-index:1;
	}
	
	ol.artists li span.count span.number {
		display:none;
	}	
	
	ol.artists li:hover span.count span.number {
		display:block;
		position:relative;
		margin-right:-10em;
		z-index:30;
	}
	
	ol.artists img {
		background:rgb(255,255,255);
		border:1px solid rgb(120,120,120);
		bottom:-7.5em;
		height:4.7em;
		padding:1px;
		position:absolute;
		width:4.7em;
	}
	
	ol.artists li:hover img {
		border-color:rgb(80,80,80);
	}
	
/* Contact
------------------------------------------------------------------------------*/

section#contact div.vcard {
	float:right;
	width:300px;
}	

	section#contact div.vcard dl {
		position:relative;
	}
	
		section#contact div.vcard dl dt {			
			font-weight:bold;
			left:0;			
			margin-top:0.75em;
			padding-top:0.75em;
			position:absolute;
		}
					
		section#contact div.vcard dl dt + dd {
			border-top:1px solid rgb(223,234,239);
			margin-top:0.75em;
			padding-top:0.75em;
		}
		
		section#contact div.vcard dl dt.first,
		section#contact div.vcard dl dt.first + dd {
			border-top:0;
			margin-top:0;			
		}
		
		section#contact div.vcard dl dd {
			padding-left:7.5em;
		}
		
		section#contact div.vcard dl dd.tel span.type {
			background:transparent url(../images/sprite.png) repeat scroll -151px -156px;
			display:block;
			float:left;
			height:18px;
			margin-right:0.5em;
			text-indent:-999em;
			width:18px;
		}
		
		section#contact div.vcard dl dd.tel + dd.tel span.type {
			background-position:-134px -156px;
			
		}

section#contact div.form {
	float:left;
	margin-right:20px;
	width:620px;
}

section#contact form {
	background:rgb(245,250,250) url(../images/section.png) repeat-x bottom left;
	border:1px solid rgb(223,234,239);
	padding:19px;
	
}

section#contact form input.error {
	border:1px solid #FF0000;
}

section#contact form .placeholder {
	color:rgb(200,200,200);
}

/* Forms
------------------------------------------------------------------------------*/

textarea,
input[type='text'],
input[type='email'],
input[type='tel'] {
	background:rgb(255,255,255) url(../images/background-input.png) no-repeat top left;
	font-family:"Helvetica Neue",Helvetica,Arial,Verdana, serif;
	font-size:12px;
}

form {
	
}

form ol {
	position:relative;
}

	form ol li {
		display:block;		
		margin-bottom:18px;
	}
		
		form ol li label,
		form ol li label.radio,
		form ol li label.checkbox {
			display:block;
			font-weight:bold;
			margin-right:20px;			
		}
		
		form ol li input[type='text'],
		form ol li input[type='email'],
		form ol li input[type='tel'],
		form ol li textarea {
			border:1px solid rgb(150,150,150);
			display:block;
			padding:9px;
			width:256px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
		}				
		
		form ol li input[type='text']:focus,
		form ol li input[type='email']:focus,
		form ol li input[type='tel']:focus,
		form ol li textarea:focus {
			border-color:rgb(40,40,40);
		}
		
		form ol li input[type='checkbox'],
		form ol li input[type='radio']{		
			clear:left;
			display:block;
			float:left;
		}
		
		form ol li input[type='checkbox']+label, 
		form ol li input[type='radio']+label{
			text-align:left;
			font-weight:normal;
		}
		
		form ol li#contact-message,
		form ol li#contact-submit {			
			position:absolute;	
			right:0;
		}
		
		form ol li#contact-message {
			top:0px;			
		}
		
			form ol li#contact-message textarea {
				height:158px;
			}
		
		form ol li#contact-submit {
			right:151px;
			top:235px;
		}
		
		ul.errors {
			clear:both;
		}
		
		ul.errors li p.message {			
			background:rgb(191,239,255);
			border-bottom:1px solid rgb(128,200,216);
			color:rgb(17,153,182);			
			display:block;
			margin-top:18px;			
			padding:9px;
		}
		
		ul.errors p.message img.icon {			
			margin-right:10px;
		}				
		
		ul.errors li.error p.message {
			background:rgb(251,227,228);
			border-color:rgb(251,194,196);
			color:rgb(153,31,17);
		}
		
		ul.errors li.success p.message {
			background:rgb(230,239,194);
			border-color:rgb(198,216,128);
			color:rgb(38,68,9);
		}
		
		ul.errors li.notice p.message {
			background:rgb(255,246,191);
			border-color:rgb(255,211,36);
			color:rgb(81,71,33);
		} 

			
/* Extra
------------------------------------------------------------------------------*/

section#extra {
	background:rgb(80,80,80) url(../images/footer-background.gif) repeat-x 0 0;
	color:rgb(220,220,220);
	text-shadow:1px 1px 0px rgb(70,70,70);
}
	
	section#extra .button {
		background:rgb(70,70,70) url(../images/footer-gradient.png) repeat-x 0 0;
		border-color:rgb(60,60,60);
		border-bottom-color:rgb(65,65,65);
		border-right-color:rgb(65,65,65);		
		color:rgb(220,220,220);
	}
	
	section#extra .button:hover {
		background-color:rgb(60,60,60);
		border-color:rgb(50,50,50);
		color:rgb(255,255,255);
	}
	
	section#extra .button:active {
		background-color:rgb(55,55,55);
	}
	
	section#extra ol {
		margin:0;
	}
	
	section#extra ol li {
		list-style-position:outside;
		list-style-type:none;
	}

section#playlist ol {
	*margin-bottom:1.5em;
}
	
		section#playlist ol li {
			float:left;
			margin:0 20px 20px 0;
			position:relative;
		}			
		
		section#playlist ol li img,
		section#now-playing ol li img {		
			background:rgb(255,255,255);
			border:1px solid rgb(120,120,120);
			height:4.9em;			
			left:0;
			padding:1px;
			position:absolute;
			top:0;
			width:4.9em;
			z-index:2;
		}
		
		section#playlist ol li img {
			position:relative;
		}
		
		section#playlist ol li img + img,
		section#now-playing ol li img + img {		
			background:transparent;
			border:0;
			position:absolute;
			z-index:1;
		}
		
		section#playlist ol li a:hover img + img,
		section#playlist ol li a:focus img + img,
		section#now-playing ol li a:hover img + img,
		section#now-playing ol li a:focus img + img {		
			margin-left:10px;
		}

section#now-playing {}
	
		section#now-playing ol li {
			margin-bottom:20px;
			height:5.6em;
			padding-left:80px;
			position:relative;
		}
		
		section#now-playing ol li a {
			color:rgb(220,220,220);
			text-decoration:none;
		}
		
		section#now-playing ol li a span {
			color:rgb(240,240,240);
			display:block;
			font-weight:bold;	
			text-decoration:none;		
		}
		
		section#now-playing ol li a:hover span,
		section#now-playing ol li a:focus span {
			text-decoration:underline;
		}
		
		section#now-playing ol li img {			
			left:0;
			position:absolute;
			top:0;			
		}

section#twitter {
}

	section#twitter ol {
		margin:0;
	}
	
	section#twitter ol li {
		list-style-position:outside;
		list-style-type:none;
		margin-bottom:1.5em;	
	}
	
	section#twitter ol li:nth-child(1){
		color:rgba(255,255,255,1);	
	}
	
		section#twitter ol li:nth-child(1) em {
			color:rgba(255,255,255,0.9);	
		}
	
	section#twitter ol li:nth-child(2){
		color:rgba(255,255,255,0.8);
	}
	
		section#twitter ol li:nth-child(2) em {
			color:rgba(255,255,255,0.7);	
		}
	
	section#twitter ol li:nth-child(3){
		color:rgba(255,255,255,0.6);
	}
	
		section#twitter ol li:nth-child(3) em {
			color:rgba(255,255,255,0.5);	
		}
		
	section#twitter ol li:nth-child(4){
		color:rgba(255,255,255,0.4);
	}
	
		section#twitter ol li:nth-child(4) em {
			color:rgba(255,255,255,0.3);	
		}
	
	section#twitter ol li:nth-child(5){
		color:rgba(255,255,255,0.2);
	}
	
		section#twitter ol li:nth-child(5) em {
			color:rgba(255,255,255,0.1);	
		}
	
	section#twitter li em {
		display:block;
	}
	
/* Footer
------------------------------------------------------------------------------*/

footer {
	background:rgb(60,60,60);
	clear:both;
	color:rgb(220,220,220);
	font-size:11px;
	overflow:hidden;
	padding:42px 0;
	text-shadow:1px 1px 0px rgb(40,40,40);
}

footer:hover {
	color:rgb(255,255,255);
}

	footer ul.info {
		float:left;
		width:620px;
	}
	
	footer ul.social {
		float:right;
		margin-top:0.5em;
	}
	
		footer ul li {
			display:inline;
			margin-right:0.5em;
		}
		
		footer ul.social li a {
			background:url(../images/sprite.png) no-repeat 0 0;
			display:block;
			float:left;
			height:16px;
			margin-right:1.5em;
			text-indent:-999em;
		}
		
		footer ul.social li:last-of-type a {
			margin-right:0;
		}
		
		footer ul.social li a[title='Bekijk mijn Last.FM account'] {
			background-position:-90px -131px;
			width:35px;
		}
		
		footer ul.social li a[title='Bekijk mijn Last.FM account']:hover,
		footer ul.social li a[title='Bekijk mijn Last.FM account']:focus {
			background-position:-90px -108px;
		}
		
		footer ul.social li a[title='Bekijk mijn LinkedIn profiel'] {
			background-position:-133px -131px;
			width:60px;
		}
		
		footer ul.social li a[title='Bekijk mijn LinkedIn profiel']:hover,
		footer ul.social li a[title='Bekijk mijn LinkedIn profiel']:focus {
			background-position:-133px -108px;
		}
		
		footer ul.social li a[href='http://www.twitter.com/pimderks'] {
			background-position:-22px -131px;
			width:60px;
		}
		
		footer ul.social li a[href='http://www.twitter.com/pimderks']:hover,
		footer ul.social li a[href='http://www.twitter.com/pimderks']:focus {
			background-position:-22px -108px;
		}
		
/* Icons
------------------------------------------------------------------------------*/
.icon { 
	background:url(../images/sprite.png); 
	height:18px;
	width:18px;
}

.icon-help { background-position:-41px -155px; }
.icon-lastfm { background-position:-118px -155px; }
.icon-notice { background-position:-77px -155px; }
.icon-success { background-position:-23px -155px; }
.icon-twitter { background-position:-100px -155px; }
.icon-warning { background-position:-59px -155px; }

/* Clearfix
------------------------------------------------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}