/*--------------------------------------------------------------------------------------------------
Style Sheet Damienvanholten.com v03 (all browsers)

version:	1
author:		Damien van Holten
email:		damien@reaact.net
website:	http://www.damienvanholten.com
--------------------------------------------------------------------------------------------------*/

/* Import Reset
--------------------------------------------------------------------------------------------------*/

@import url("reset.css");

/* Globals
--------------------------------------------------------------------------------------------------*/

body
{
	background: url(../images/bg-body-alt.jpg) 0 0 repeat #212121;
	color: #fff;
}

/* Generic classes
--------------------------------------------------------------------------------------------------*/

.hidden
{	
	display: none;
}

/* Typography & Links
--------------------------------------------------------------------------------------------------*/

p
{
	padding: 0 0 15px 0;
	line-height: 21px;
}

p.intro
{
	text-indent: -999em;
	display: block;
	width: 948px;
	height: 63px;
	background: url(../images/bg-title-intro.png) 0 0 no-repeat;
	margin: 0 0 35px 0;
}

h1.damienvanholten
{
	text-indent: -999em;
	margin: 0 auto;
	height: 50px;
	width: 664px;
	background: url(../images/bg-title-large-damienvanholten.png) 0 0 no-repeat transparent;
	margin-bottom: 20px;
}

h1.title_selectedwork
{
	text-indent: -999em;
	margin: 0 auto;
	height: 72px;
	width: 624px;
	background: url(../images/bg-title-selectedwork.png) 0 0 no-repeat transparent;
}

p.function
{
	text-indent: -999em;
	margin: 0 auto;
	height: 29px;
	width: 446px;
	background: url(../images/bg-title-function.png) 0 0 no-repeat transparent;
	margin-bottom: 20px;
}

h2.title_aboutme
{
	text-indent: -999em;
	display: block;
	background: url(../images/bg-title-aboutme.png) 0 0 no-repeat;
	height: 28px;
	width: 100%;
	border-bottom: 1px solid #444;
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
}

h3.title_clientlist
{
	text-indent: -999em;
	display: block;
	background: url(../images/bg-title-selectedclientlist.png) 0 0 no-repeat;
	height: 28px;
	width: 100%;
	border-bottom: 1px solid #444;
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
}

h4.title_contact
{
	text-indent: -999em;
	display: block;
	background: url(../images/bg-title-contact.png) 0 0 no-repeat;
	height: 28px;
	width: 100%;
	border-bottom: 1px solid #444;
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
}

h5.title_recentlyontwitter
{
	text-indent: -999em;
	display: block;
	background: url(../images/bg-title-recentlyontwitter.png) 0 0 no-repeat;
	height: 28px;
	width: 100%;
	border-bottom: 1px solid #444;
	margin: 0 0 15px 0;
	padding: 0 0 15px 0;
}

ul.client_list li
{
	color: #ccc;
	width: 225px;
	float: left;
	line-height: 21px;
}

ul.project_list li
{
	margin: 0 10px 10px 0;
	display: block;
	width: 215px;
	float: left;
	background: #1a1a1a;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

hr
{	
	display: none;
}

p a:link,
p a:visited
{
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid #666;
}

p a:hover,
p a:active
{
	text-decoration: none;
	color: #42c4ef;
	border-bottom: 1px solid #999;
}


/* Generic Classes
--------------------------------------------------------------------------------------------------*/

.clear
{
	clear: both;
}

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

#header
{
	padding: 20px 0;
	overflow: hidden;
	background: #000;
}

#header h4#logo
{
	display: block;
	text-indent: -999em;
	float: left;
	background: url(../images/bg-logo.png) 0 0 no-repeat;
	height: 41px;
	width: 97px;
}

#header h4#logo:hover
{
	background: url(../images/bg-logo.png) 0 -41px no-repeat;
}

#header h4 a:link,
#header h4 a:visited,
#header h4 a:hover,
#header h4 a:active
{
	display: block;
	height: 41px;
	width: 97px;
}

#header ul
{
	margin: 15px 0 0 0;
	float: right;
}

#header ul li
{
	margin-left: 15px;
	float: left;
}

#header ul li a:link,
#header ul li a:visited
{
	color: #fff;
	text-decoration: none;
}

#header ul li a:hover,
#header ul li a:active,
#header ul li.active_item a:link,
#header ul li.active_item a:visited,
#header ul li.active_item a:hover,
#header ul li.active_item a:active
{
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid #fff;
}

/* Layout
--------------------------------------------------------------------------------------------------*/

.content_box_small
{
	float: left;
	width: 220px;
	margin-right: 35px;
}

.content_box_small.last_child
{
	margin-right: 0;
}

.content_box
{
	float: left;
	width: 440px;
	margin-right: 35px;
}

.content_box.last_child
{
	margin-right: 0;
}

.work_link
{
	position: relative;
	width: 860px;
	height: 420px;
	margin: 0 auto;
	display: block;
}

.work_link img
{
	width: 860px;
}

.work_link .portfolio_button
{
	margin: 0;
	padding: 0;
	display: block;
	height: 420px;
	width: 860px;
	text-indent: -999em;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/bg-viewportfolio-button.png) 0 0 no-repeat;
}

.inner_wrapper
{
	margin: 0 auto;
	width: 960px;
}

#introduction,
#introduction_portfolio
{
	border-top: 1px solid #232323;
	border-bottom: 1px solid #232323;
	background: url(../images/bg-body-alt.jpg) 0 0 repeat #212121;
}

#footer
{
	border-top: 1px solid #232323;
	background: url(../images/bg-body-alt.jpg) 0 0 repeat #212121;
}

#introduction .inner_wrapper
{
	padding: 50px 0 0 0;
	background: url(../images/bg-brightlight.png) 0 50% no-repeat;
}

#introduction_portfolio .inner_wrapper
{
	overflow: hidden;
	padding: 35px 0;
	background: url(../images/bg-brightlight.png) 0 50% no-repeat;
}

/* About
--------------------------------------------------------------------------------------------------*/

#about
{
	background: #000;
}

#about .inner_wrapper
{
	padding: 40px 0;
	overflow: hidden;
}

/* Twitter
--------------------------------------------------------------------------------------------------*/

#twitter
{
	background: #000;
}

#twitter,
#twitter .inner_wrapper
{
	overflow: hidden;
}

#twitter .twitter_footer
{
	clear: both;
	border-top: 1px solid #444;
	margin-bottom: 20px;
	padding: 8px 0 0 0;	
}

#twitter .twitter_footer p
{
	text-align: right;
}

#twitter .tweet
{
	margin: 20px 0 25px 0;
	float: left;
	width: 33%;
	background: url(../images/bg-quotes.png) 0 0 no-repeat;
}

#twitter .tweet p
{
	padding: 0 8px 0 38px;
	font-size: 11px;
}

#twitter .tweet p span
{
	font-size: 11px;
	display: block;
	color: #757272;
}

/* Work/Portfolio
--------------------------------------------------------------------------------------------------*/

.nav_holder
{
	margin-top: 7px;
	float: right;
	width: 36px;
}

a.work_nav:link,
a.work_nav:visited,
a.work_nav:hover,
a.work_nav:active
{
	display: block;
	float: right;
	height: 18px;
	width: 17px;
	background: url(../images/bg-sprite-worknavigation.png) 0 0 no-repeat transparent;
	text-decoration: none;
	text-indent: -999em;
}

a.work_nav:hover,
a.work_nav:active
{
	background: url(../images/bg-sprite-worknavigation.png) 0 -18px no-repeat transparent;
}

a.work_nav.next:link,
a.work_nav.next:visited,
a.work_nav.next:hover,
a.work_nav.next:active
{
	margin-left: 2px;
	background: url(../images/bg-sprite-worknavigation.png) -17px 0 no-repeat transparent;
}

a.work_nav.next:hover,
a.work_nav.next:active
{
	background: url(../images/bg-sprite-worknavigation.png) -17px -18px no-repeat transparent;
}

#work_overview,
#work_item
{
	background: #000;
}

#work_overview .inner_wrapper
{
	overflow: hidden;
	padding: 30px 0 0 0;
}

#work_overview .portfolio_item
{
	float: left;
	width: 210px;
	margin: 0 40px 25px 0;
}

#work_overview .portfolio_item img
{
	padding: 15px;
	background: #141414;
}

#work_overview .portfolio_item img:hover
{
	background: #202020;
}

#work_overview .portfolio_item p
{
	text-align: center;
	display: block;
	padding: 5px 0;
	font-size: 11px;
	color: #bbb;
}

#work_overview .portfolio_item.last_child
{
	margin-right: 0;
}

/* Work - project titles
--------------------------------------------------------------------------------------------------*/

h1.title_brabantopdekaart
{
	text-indent: -999em;
	height: 30px;
	width: 240px;
	background: url(../images/work/bg-title-brabantopdekaart.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_myhexcolor
{
	text-indent: -999em;
	height: 30px;
	width: 240px;
	background: url(../images/work/bg-title-myhexcolor.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_iphonewallpapers
{
	text-indent: -999em;
	height: 30px;
	width: 240px;
	background: url(../images/work/bg-title-iphonewallpapers.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_typographytees
{
	text-indent: -999em;
	height: 30px;
	width: 240px;
	background: url(../images/work/bg-title-typographytees.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_itsedulab
{
	text-indent: -999em;
	height: 30px;
	width: 240px;
	background: url(../images/work/bg-title-itsedulab.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_logotypes
{
	text-indent: -999em;
	height: 30px;
	width: 290px;
	background: url(../images/work/bg-title-logos.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_openprovider
{
	text-indent: -999em;
	height: 30px;
	width: 290px;
	background: url(../images/work/bg-title-openprovider.png) 0 0 no-repeat transparent;
	float: left;
}

h1.title_mol
{
	text-indent: -999em;
	height: 30px;
	width: 290px;
	background: url(../images/work/bg-title-mol.png) 0 0 no-repeat transparent;
	float: left;
}

/* Work - project details
--------------------------------------------------------------------------------------------------*/

.project_description p
{
	font-size: 11px;
	line-height: 17px;
}

.project_description h2,
.project_description h3,
.project_description h4,
.project_description h5,
.project_description h6
{
	line-height: 17px;
	font-weight: bold;
	font-size: 11px;
	color: #42aed2;
}

#work_overview .project_screenshot .screenshot
{
	margin: 0 0 25px 0;
	background: url(../images/loading.gif) 50% 50% no-repeat #000;
}

#work_overview .project_screenshot img
{
	 -moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	box-shadow: 0 0 6px #000;
}


/* Work - Logo's
--------------------------------------------------------------------------------------------------*/

#work_overview.logotypes
{
	padding: 240px 0 30px 0;
	background: url(../images/work/bg-item-logos.jpg) 50% 0 no-repeat #000;
	overflow: hidden;
}

img.logo
{
	float: left;
	margin: 0 29px 29px 0;
	background: url(../images/loading.gif) 50% 50% no-repeat #000;
}

img.logo.last_child
{
	margin-right: 0;
}


/* Work - Brabantopdekaart 
--------------------------------------------------------------------------------------------------*/

#work_overview.brabantopdekaart
{
	background: url(../images/work/bg-item-brabantopdekaart.jpg) 50% 0 no-repeat #000;
	overflow: hidden;
}

#work_overview.brabantopdekaart .project_description
{
	width: 280px;
	float: left;
	margin: 300px 30px 50px 0;
}

#work_overview.brabantopdekaart .project_screenshot
{
	float: right;
	margin: 300px 0 25px 0;
}

/* Work - iPhoneWallpapers.nl
--------------------------------------------------------------------------------------------------*/

#work_overview.iphonewallpapers
{
	background: url(../images/work/bg-item-iphonewallpapers.jpg) 50% 0 repeat-x #186bcb;
	overflow: hidden;
}

#work_overview.iphonewallpapers .project_description
{
	width: 280px;
	float: left;
	margin: 400px 0 50px 0;
}

#work_overview.iphonewallpapers .project_description a:link,
#work_overview.iphonewallpapers .project_description a:visited
{
	border-bottom: 1px solid #bbb;
}

#work_overview.iphonewallpapers .project_screenshot
{
	width: 626px;
	float: right;
	margin: 400px 10px 25px 0;
}

/* Work - MyHexColor 
--------------------------------------------------------------------------------------------------*/

#work_overview.myhexcolor
{
	background: url(../images/work/bg-item-myhexcolor.jpg) 50% 0 no-repeat #1f283e;
	overflow: hidden;
}

#work_overview.myhexcolor .project_description
{
	width: 280px;
	float: right;
	margin: 180px 0 50px 0;
}

#work_overview.myhexcolor .project_screenshot
{
	float: left;
	width: 626px;
	margin: 180px 0 25px 6px;
}

/* Work - ITS Edulab 
--------------------------------------------------------------------------------------------------*/

#work_overview.itsedulab
{
	background: url(../images/work/bg-item-itsedulab.jpg) 50% 0 no-repeat #fff;
	overflow: hidden;
}

#work_overview.itsedulab .project_description
{
	width: 280px;
	float: left;
	margin: 260px 0 50px 0;
}

#work_overview.itsedulab .project_description p,
#work_overview.itsedulab .project_description p a:link,
#work_overview.itsedulab .project_description p a:visited
{
	color: #444;
}

#work_overview.itsedulab .project_screenshot
{
	width: 626px;
	float: right;
	margin: 380px 6px 25px 0;
}

/* Work - TypographyTees 
--------------------------------------------------------------------------------------------------*/

#work_overview.typographytees
{
	background: url(../images/work/bg-item-typographytees.jpg) 50% 0 no-repeat #181818;
	overflow: hidden;
}

#work_overview.typographytees .project_description
{
	width: 280px;
	float: left;
	margin: 230px 0 50px 0;
}

#work_overview.typographytees .project_screenshot
{
	width: 626px;
	float: right;
	margin: 230px 6px 25px 0;
}

/* Work - Openprovider 
--------------------------------------------------------------------------------------------------*/

#work_overview.openprovider
{
	background: url(../images/work/bg-item-openprovider.jpg) 50% 0 repeat-x #cacacc;
	overflow: hidden;
}

#work_overview.openprovider .project_description
{
	width: 280px;
	float: left;
	margin: 480px 0 50px 0;
}

#work_overview.openprovider .project_screenshot
{
	width: 626px;
	float: right;
	margin: 480px 6px 25px 0;
}

#work_overview.openprovider .project_description p,
#work_overview.openprovider .project_description p a:link,
#work_overview.openprovider .project_description p a:visited
{
	color: #222;
}

/* Work - MOL Careers 
--------------------------------------------------------------------------------------------------*/

#work_overview.mol
{
	background: url(../images/work/bg-item-mol.jpg) 50% 0 no-repeat #3376ab;
	overflow: hidden;
}

#work_overview.mol .project_description
{
	width: 280px;
	float: left;
	margin: 145px 0 50px 0;
}

#work_overview.mol .project_screenshot
{
	width: 626px;
	float: right;
	margin: 145px 6px 25px 0;
}

#work_overview.mol .project_description p a:link,
#work_overview.mol .project_description p a:visited
{
	border-bottom: 1px solid #eee;
}

/* Footer
--------------------------------------------------------------------------------------------------*/

#footer
{
	padding: 25px 0;
}

#footer p
{
	font-size: 11px;
}