/* Main */
body{
	padding: 0px;
	margin: 0px;
	font-family: Arial;
	background-color: #000000;
	min-width: 900px;
	font-size: 13px;
	line-height: 18px;
}
a img{border: 0px;}
a:active, a:focus{outline: none;}
p{text-align:left;}
.clear{clear: both; font-size: 0px; margin:0; line-height: 0px;}
h1, h2, h3{margin:0px; padding: 0px;}
.redHeader{color: #ab231d;}
.redHeader a{color: #ab231d;}
.beigeHeader{
	color: #ffffff; font-size: 16px; }

.bottom {position: absolute; bottom: 20px;}
.thumb{top:0px; position: relative;}
.bold{font-weight: bold;}
.italic{font-style: italic;}

/* Form css */
form{
	padding-top: 15px;
	width: 450px;
}
.txtinput{
	padding: 2px;
	background-image: url(img/bg_txtinput.gif);
	border: none;
	background-color: transparent;
	float: left;
	display: block;
	width: 308px;
	padding: 4px 5px 0px 5px;
	height: 23px;
	font-size: 15px;
	margin-bottom: 20px;
	outline: none;
	color: #000;
	opacity:0.9;
}
.error{background-image: url(img/bg_txtinput_error.gif);}
.txtinput:active, .txtinput:focus{ background-image: url(img/bg_txtinput_active.gif);color: black;}
.txtarea{
	padding: 4px 5px;
	background-image: url(img/bg_txtarea.gif);
	border: none;
	background-color: transparent;
	float: left;
	display: block;
	width: 308px;
	height: 192px;
	resize:none;
	font-family: "Verdana","Arial","sans-serif";
	font-size: 14px;
	outline: none;
	margin-bottom: 10px;
	color: #000;
	opacity:0.9;
}
.txtarea:active, .txtarea:focus{background-image: url(img/bg_txtarea_active.gif); color: black;}
.txtareaerror{padding: 4px 5px; background-image: url(img/bg_txtarea_error.gif); border: none; background-color: transparent; float: left; display: block; width: 308px; height: 192px; resize:none;  font-family: "Verdana","Arial","sans-serif"; font-size: 17px; outline: none; margin-bottom: 10px; color: #603913; opacity:0.9;}
.txtareaerror:active, .txtareaerror:focus{background-image: url(img/bg_txtarea_active.gif); color: black;}
label{float: left; display: block; width:320px; margin-bottom: 2px;}
.submit{float: right; background-image: url(img/submit.gif); display: block; border: none; background-color: transparent; text-indent: -1500%; width: 80px; height:24px; cursor: pointer; margin-right: 2px; margin-top: 4px;}
.submit:active, .submit:hover, .submit:focus{background-position: 0px -24px;}

.thanku{
	width: 700px;
	right: -50px;
	margin-right: 0px;
	height: 100px;
		}
/* Content */
#container{
	display: block;
	width:100%;
	background-image: url('img/main_bg.jpg');
	background-color: #FFF;
	position: relative;
	height: 718px;
	border-bottom: 1px solid #000000;
}
#container .inner{
	display: block;
	width: 820px;
	position: relative;
	left: 50%;
	margin-left: -410px;
	height: 800px;
}
#container .inner #content{
	position: absolute;
	color: #313131;
	text-shadow: #FFF 1px 1px 0px;
	border-bottom: #000 1px;
}
#content #navigatie {
	position: relative;
	display: block;
	top:-75px;
	left:500px;
	height: 100px;
	overflow: hidden;
}



#content #navigatie .main{
	position: relative;
	top:20px;
	
}
#content a{
	text-decoration: none;
	color: #ab231d;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#content a:hover{color: #313131;}
.boek{position: absolute; top:0px; left:0px;}
#left{position: relative; float: left; display: block; width: 320px; padding: 35px 32px 0px 32px; height: 495px;}
#right{position: relative; float: right; display: block; width: 320px; padding: 35px 32px 0px 32px; height: 495px;}
#welcome{font-size: 15px; line-height: 19px;font-family: 'Georgia','serif'; font-weight: bold;}

#table{
	position: relative;
	bottom:100px;
}

.aboutparagraphs{
	width:700px;
	height: 500px;
	position: absolute;
	top: 30px;
	font-family: Arial, Helvetica, sans-serif;
}

/* --- Content - Index --- */
#hello{display: block; height: 170px; background: no-repeat top right url('img/me.gif'); padding-top: 6px; padding-right: 90px; font-size: 12px; }
#hello p{text-align:left;}
#Latestwork {margin-top: 10px; position: relative;}
#Latestwork h2{color: black;}


.web #front{position: absolute; left:-27px; top:-30px;}
.web h2{position: absolute; top: 208px; left:17px; font-size: 16px; width: 200px;}
.web .description{display: none;font-family: 'Georgia','serif'; font-size: 14px;}
.web #morebtn{position: absolute; top: 200px; right:14px;}

.moreBtn{display: block; background-image: url('img/Btn_more.gif'); width: 80px; height: 24px; margin-top: 5px;}
.moreBtn:hover{background-position: 0px 24px;}
.moreWorkBtn{display: block; background-image: url('img/Btn_more.gif'); width: 80px; height: 24px; margin-top: 12px; float: right;}
.moreWorkBtn:hover{background-position: 0px 24px;}
.prevBtn{display: block; background-image: url('img/Btn_newer.gif'); width: 92px; height: 24px; cursor: pointer; position: absolute; left:0px; bottom:0px;}
.prevBtn:hover{background-position: 0px 24px;}
.nextBtn{display: block; background-image: url('img/Btn_older.gif'); width: 92px; height: 24px; cursor: pointer; position: absolute; right:0px; bottom:0px;}
.nextBtn:hover{background-position: 0px 24px;}

/* --- Content - Work - Overview --- */
#workmask{width:320px; display: block; height: 470px; margin-top: 13px; overflow: hidden; position: relative;}
#workcontainer{width: 10000px; display: block; position: relative; left:0px;-webkit-transition-property: left;-webkit-transition-duration: 0.5s, 0.5s;}
.workgroup{width:320px; display: block; height: 470px; float: left; position: relative;}

#workcontainer.one{left:0px;}
#workcontainer.two{left:-320px;}
#workcontainer.three{left:-640px;}
#workcontainer.four{left:-960px;}
#workcontainer.five{left:-1280px;}
#workcontainer.six{left:-1600px;}
#workcontainer.seven{left:-1920px;}
#workcontainer.eight{left:-2240px;}
#workcontainer.nine{left:-2560px;}
#workcontainer.ten{left:-2880px;}

.workgroup a{position: relative; display: block; height: 55px; padding-left: 70px;}
.workgroup a img{position: absolute; top:0px; left:0px;}
.workgroup a .wtitle{font-size: 16px; color: #313131;-webkit-transition: padding 0.15s linear; padding-top: 12px; display: block; font-weight: bold;}
.workgroup a .workingdate{ font-size: 10px; color: #616161; text-transform: capitalize; font-weight: normal; font-family: "Verdana","Arial","sans-serif";}
.workgroup a .checkitout{position: absolute; left:70px; top:43px; opacity:0;-webkit-transition: opacity 0.15s linear;}
.workgroup a:hover .wtitle{padding-top: 4px; color: #ab231d;}
.workgroup a:hover .checkitout{opacity:1;}

.workgroup .subnavigatie{position: absolute; bottom: 0px; width: 100%; text-align: center; padding-bottom: 2px;}

/* --- Content - Work - Item --- */
#nextBtn{position: absolute; top:507px; left: 10px; z-index: 55; }
#nextBtn a{width: 51px; height: 51px; background-image: url(img/btn_previous.png); display: block; text-indent: -1000em;}
#nextBtn a:hover{background-position: 0px 51px;}

#previousBtn{position: absolute; top:507px; left: 759px; z-index: 55; }
#previousBtn a{width: 51px; height: 51px; background-image: url(img/btn_next.png); display: block; text-indent: -1000em;}
#previousBtn a:hover{background-position: 0px 51px;}

#workitem{position: relative;}
#relatedPost {padding-bottom: 10px;padding-top: 40px;}
#relatedPost h3{font-size: 14px; padding-bottom: 5px;}
#relatedPost ul{margin:0px; padding:0px;width: 100%; overflow: hidden;display: block;}
#relatedPost li{list-style: none; position: relative;}

#relatedPost .related_post a{display: block; background-image: url(img/bg_related.png); position: relative; left: -74px; padding: 3px 0px 3px 100px; overflow: hidden; height: 19px; color: #313131; -webkit-transition-property: left;-webkit-transition-duration: 0.3s, 0.3s; width: 100%; font-weight: bold;}
#relatedPost .related_post a:hover{left: -5px;}

#socialBookmarks{ padding-top: 25px;}
#socialBookmarks b{display: block; margin-bottom: 8px;}
#socialBookmarks a{display: block; width:45px; height:45px; margin-right: 10px; margin-top: 7px; float: left;}
#SBtwitter{background-image: url('img/Btn_twitter.gif');}
#SBfacebook{background-image: url('img/Btn_facebook.gif');}
#SBstumble{background-image: url('img/Btn_stumble.gif');}
#SBdel{background-image: url('img/Btn_del.gif');}
#socialBookmarks a:hover{background-position: 0px 45px;}
#thumbs img{margin-right: 5px; cursor: pointer; margin-top: 7px;}
#thumbs b{display: block; margin-bottom: 8px;}
#qoute{float:left; display:block; font-size: 18px; font-style: italic; padding-left: 6px; line-height: 22px; position: relative;font-family: 'Georgia','serif';}
#qoute .bold{font-size: 20px; padding-right: 5px; padding-left: 5px;}
#workcontent{float:left; display:block;padding-left: 6px;}

.iphone #left{ width:220px;}
.iphone p{text-align: left;}
.iphone .bottom{ width:220px;}
.iphone .redHeader{float:left; width:100px;}
#content .iphone .worktitle{float:left; display:block;color: #313131; padding-left: 6px; font-size: 18px; margin-bottom: 15px; text-decoration: none; font-weight: bold;width: 230px;}
.iphone #right{ width:220px; padding-left: 100px;}
.iphone #thumbs{padding-top: 10px;}
.iphone #workitem{position: absolute; left: 258px; top:5px; float: none;}
.iphone .moreBtn{margin-right: -25px;}

.web #left{width: 290px;}
.web #right{width: 320px;}
#content .web .worktitle{position:relative; top:0px; left:0px;float:left; display:block; padding-left: 6px; font-size: 18px; margin-bottom: 10px; text-decoration: none; font-weight: bold; width: 100%;}
.web .bottom{bottom:0px;}
.web #workitem{position: relative; left: -10px; float: none; margin-top: -10px;}
.web #qoute{ padding-right: 10px; display: block; margin-bottom: -5px;}
.web #thumbs{padding-top: 30px;}

/* --- Content - Contact --- */
.contact .C1{display: block; padding-bottom: 14px;}
.contact .C1 strong{display: block; float: left; padding-left: 25px; background: no-repeat 2px 2px;}
.contact .C1 span{display: block; float: right; width:190px;}
#content .contact .C1 span a{color: #ffffff;}
#content .contact .C1 span a:hover{color: #ab231d;}
.social{padding-top: 10px; }
.social a{float: left;}

/* Footer */
#footer{
	display: block;
	width:100%;
	background-image: url('img/footer_bg.jpg');
	background-color: #3b5998;
	background-position: bottom left;
	text-shadow: #000000 1px 1px 0px;
	border-bottom: 1px solid #ffffff;
}
#footer .inner{display: block; width: 810px; position: relative; left: 50%; margin-left: -405px; padding: 20px 0px 30px 0px;}
#footer .inner .box{
	display: block;
	width:380px;
	float: left;
	color: #ffffff;
	font-size: 12px;
	line-height:16px;
}
.box a{color: #efeadf; text-decoration: none;}
.box a:hover{
	color: #ab231d;
}
#contact{display: block; float: left; padding-top: 7px; margin-right: 12px; position: relative;}
#contact div{position: absolute; top:7px; left:0px; display: none;}
#adres{display: block; width: 115px; float: left; padding-top: 5px;padding-left: 5px;}
#mediums{
	display: block;
	float: left;
	padding-top: 5px;
	padding-right: 10px;
}
#twitter{width:380px; background: url('images/tweet_picture.png') left center no-repeat; margin-top: 5px; padding-bottom: 3px;display: block;text-shadow: #c8c2b7 1px 1px 0px;}
#date ul, #twitter ul{margin: 0px; padding: 0px;}
#date li, #twitter li{list-style: none;}
#twitter img{padding: 0px;}
#twitter .top{width: 329px; float: right; height: 9px;}
#twitter .bottom{width: 329px; float: right;height: 9px; position: static;}
#twitter .tweet{
	background: url('images/tweet_bg.png') left center no-repeat;
	min-height: 20px;
	display: block;
	width: 290px;
	float: right;
	padding-left: 65px;
	padding-right: 25px;
	color: #ab231d;
	padding-top: 3px;
}
#twitter .tweet a{color: #ab231d;}
#twitter .tweet a:hover{text-decoration: underline;}
#date{padding-left: 60px; font-size: 12px; padding-top: 2px; text-transform: capitalize;}

/* Copy */

#copy{
	display: block;
	width: 810px;
	position: absolute;
	left: 50%;
	margin-left: -405px;
	font-size: 12px;
	color: #666;
	padding: 15px 0px 40px 0px;
	font-weight: lighter;
	text-shadow: #2e1b0e 1px 1px 0px;
}

#copy1{
	display: block;
	width: 400px;
	position: absolute;
	left: 20%;
	font-size: 12px;
	color: #666;
	font-weight: lighter;
	text-shadow: #2e1b0e 1px 1px 0px;
	padding-top: 15px;
	padding-right: 25px;
	padding-bottom: 40px;
	padding-left: 25px;
	height: 250px;
}
.AboutCopy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-variant: normal;
	color: #666;
	padding-left: 20px;
	width: 800px;
	height: 500px;
	padding-top: 25px;
	border: 1px solid #666;
	top: 0px;
	position: absolute;
	background-color: #FFF;
}

#copy #footnavigatie{
	float: right;
}
#copy #footnavigatie a{
	text-decoration: none;
	color: #FFF;
}
#copy #footnavigatie a:hover{color: #ab231d;}
#copy #footnavigatie .active{
	font-weight: lighter;
	color: #fff;
}
#copy #footnavigatie .active:hover{
	color: #CCC;
}

/* lightbox */
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px;}
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box { position: relative; background-color: #000000; width: 250px; height: 250px; margin: 0 auto; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;}
#lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block;}
#lightbox-nav-btnPrev {  left: 0;  float: left;}
#lightbox-nav-btnNext {  right: 0;  float: right;}
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif ; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 10px 10px 0px 10px;}
#lightbox-container-image-data { padding: 0 10px;  color: #FFF; }
#lightbox-container-image-data #lightbox-image-details {  width: 70%;  float: left;  text-align: left; }	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear: left;  padding-bottom: 1.0em;}			
#lightbox-secNav-btnClose { width: 66px;  float: right; padding-bottom: 0.7em; margin-top: -3px;}

/* Varia */
#top{
	display: block;
	width:100%;
	height:50px;
	background-color: #3b5998;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
#personalqoute{margin: 0px; font-size: 15px; line-height: 19px;font-family: 'Georgia','serif'; font-weight: bold; text-align: left;}
.aboutmebtns{display:block; width: 148px; height: 38px;}
.aboutmebtns:hover {background-position: 0px 38px;}
#personalpic{
	margin-left:520px;
	margin-top: 60px;
	background-image: url(images/about_pic.jpg);
	height: 195px;
	width: 250px;
}

#resume{
	margin-left:575px;
	margin-top: 60px;
	background-image: url(images/resume_button.jpg);
	height: 40px;
	width: 148px;
}

#contactpic{
	margin-left:520px;
	margin-top: -450px;
	height: 250px;
	width: 200px;
	border: 1px solid #666;
	position: absolute;
	padding: 8px;
	background-color: #F5F5F5;
}
#personalline{margin: 10px 0px 20px 0px;}
#linkedin{background-image: url('img/Btn_linkedin.png'); float:right;}
#resume{
	background-image: url(images/resume_button.jpg);
	margin-top: 20px;
}
#personalright{padding-top:28px;}
#adresbg{background-image:url('img/ICON_location.gif');}
#mailbg{background-image:url('img/ICON_mail.gif');}
#phonebg{background-image:url('img/ICON_phone.gif');}
#websitebg{background-image:url('img/ICON_web.gif');}
#linecontact{margin: -8px 0px 15px 0px;}
#footerboxone{margin-left:50px;}
.top img,.bottom img{float:right;}
.errormessage{color:red;}
#welcomeline{margin: 12px 0px;}
#workline{margin: 0px 0px 12px 0px;}

/* Back to the past */
.backtothepast #workmask{overflow: auto; width: 320px;}
.backtothepast .workgroup .subnavigatie{display: none;}
.backtothepast .workgroup a{overflow: hidden; width: 300px; height: 68px;}
.backtothepast .workgroup{overflow: hidden; height: auto; width: 300px;}
.backtothepast #workcontainer{width: 300px;}
.backtothepast #content #navigatie .main:hover{top:6px;}
.backtothepast .redHeader{font-size: 18px;}
.backtothepast .redHeader a{font-size: 18px;}
.backtothepast .beigeHeader{
	font-size: 14px;
}
.backtothepast #javathumbs{display: none;}


/* CSS Solutions */
.workgroup a .checkitout{*display:none;}
.workgroup a:hover .checkitout{*display:block;}
.C1 span{*display:none; *padding-bottom: 18px;}
form{*padding-top: 0px;}
.workgroup a b{*font-size: 10px;}
.iphone #left .bottom{*position:absolute; *left:23px; *bottom:15px;}
#relatedPost .related_post a{*background: none;}
.boek{_left:-384px;}
#content #navigatie{_left:80px;}
.blogpost span{*margin-top: 3px;}
.blogpost p{*margin-bottom: 0px;}
.blogpost #line{*margin: 3px 0 3px 0;}
#workline{*margin: -10px 0px 5px 0px;}
#workwelcome{*margin:10px 0px;}

/* CMD */
#cmdsticker{margin-left: 15px; margin-top: 20px;}
#cmdnav{display: block; margin-top: 30px;}
#cmdnav a{display: block; padding: 10px 0px 0 0; text-align: right;}
#cmdnav a span{display: block; font-weight: bold; font-size: 16px; color: #313131; padding: 0 0px 0 0;-webkit-transition-property: padding;-webkit-transition-duration: 0.3s, 0.3s;}
#cmdnav a em{ display: block; font-size: 10px; color: #616161; text-transform: capitalize; font-weight: normal; padding: 0 0px 0 0;font-family: "Verdana","Arial","sans-serif"; font-style: none;-webkit-transition-property: padding;-webkit-transition-duration: 0.3s, 0.3s;}
#cmdnav a:hover span{ padding: 0px 5px 0 0;color: #ab231d;}
#cmdnav a:hover em{ padding: 0px 5px 0 0;}
#container .inner #content .teal {
	color: #008080;
}