@charset "utf-8";

*{margin:0;padding:0}
a img{border:none}
.page .row ol,.page .row ul{margin:0;padding:0 0 1em 2em;font-size:.75em}
body{font-size:100%;line-height:1.125em;font-family:Arial,Helvetica,sans-serif;background:#F0E9CE url(../images/body_bg.jpg) repeat-x top center;text-align:center;color:#000000;padding-bottom:20px}
p{font-size:.75em;margin-bottom:.75em}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.nowrap{white-space:nowrap}
html .clearfix{height:1%}
h2{font-size:1.25em;margin-bottom:.5em;line-height:1.25em}
h3{font-size:1em;margin-bottom:.5em}
h4{font-size:.75em;margin-bottom:.5em;color:#666}
.item h1,.project_detail h1{font-size:1em;margin-bottom:.5em}
.mainnav{display:block;min-height:41px}
.minsifr{display:block;min-height:44px}

#container{width:900px;margin:0px auto;text-align:left}
#container img{display:block}
#top{background-image:url(/images/loading.gif);visibility:hidden}

/* content boxes */
div.box{border:1px solid #ccc;background:#fff;padding:0px 10px 10px 10px}

/* header */
#header{position:relative;height:160px}
#logo{position:absolute;bottom:20px;left:0px}
#logo img{display:block}
#logo a img{border:none}
#address{position:absolute;bottom:20px;width:100%;color:#AD1518}
#address p{font-size:.75em;margin-bottom:0 !important;text-align:center}
#address p a{color:#AD1518}
#address p a:hover{color:#000}
#payoff{position:absolute;bottom:20px;right:0px;background:transparent url(/images/creators.gif) top left no-repeat;width:182px;height:16px}
#payoff p{display:none}
/* main intro */
div.intro{padding:20px;margin-bottom:20px;background:#fff}
div.intro div.minheight{/*min-height:60px;height:auto !important;height:60px*/}
div.intro p{color:#666;margin:0 0px 0 0;font-size:1em;line-height:1.4em}
div.intro p a{color:#AD1518;text-decoration:none}

/* section */
div.section{border-bottom:1px solid #ccc;padding-bottom:10px;padding-top:10px}
div.section div.nav{position:relative;width:200px;float:left}
div.section div.nav a{font-size:1.5em;margin:0 0 0 10px;line-height:1.5em;text-decoration:none}
div.section div.nav a:hover,div.section div.subnav a:hover {text-decoration:underline}
/*.actueel div.nav a:hover,.actueel div.nav a.active{border:2px solid #5B142C;border-width:0 0 2px 0}
.werk div.nav a:hover,.werk div.nav a.active{border:2px solid #C91417;border-width:0 0 2px 0}
.profiel div.nav a:hover,.profiel div.nav a.active{border:2px solid #EC4D19;border-width:0 0 2px 0}
.contact div.nav a:hover,.contact div.nav a.active{border:2px solid #5B142C;border-width:0 0 2px 0}*/

div.section div.subnav a:hover {text-decoration:underline}
div.section div.nav li.active a,div.section div.subnav li.active a  {text-decoration:underline;color:#666}
div.section div.nav ul{display:block;float:right;list-style:none;text-align:right;margin:1px 20px 10px 0}
div.section div.nav ul ul{position:absolute;left:200px}
div.section div.nav ul a,div.section div.subnav ul a{font-size:.75em;color:#999;font-weight:normal}
div.section a:hover{text-decoration:underline}
div.section a.home{display:block;width:22px;line-height:20px;height:20px;background:transparent url(/images/butt_home0.gif) top left no-repeat;margin:-21px 0px 0px 1px;position:absolute}
div.section a.home:hover{display:block;width:22px;line-height:20px;height:20px;background:transparent url(/images/butt_home1.gif) top left no-repeat;margin:-21px 0px 0px 1px;position:absolute}
/* items */
div.items{width:678px;float:left}
div.item{width:50%;float:left}
div.item div.pad{margin:10px 10px 0px 10px}
div.item p.pad{margin:10px 0px 1px 0px;padding-bottom:1px}
div.item img.right{display:block;float:right;margin-left:10px}
div.item img.border{border:1px solid #ccc}
div.content{} /* extra div for first content block in projects */

.newslist { position:relative;padding:0 0px 20px 0; }
.newslist .slidewrap { position:relative;height:230px;overflow:hidden;}
div.item.newslist .pad { margin:0 5px 10px 0;position:absolute; }
.newslist h1 span.date { font-size:0.65em; white-space:nowrap }
.newslist a.up { displayb:block;background:url(/images/grey_arrow_up.gif) no-repeat center; position:absolute; right:10px; top:10px; width:20px; height:15px; }
.newslist a.down { displayb:block;background:url(/images/grey_arrow_down.gif) no-repeat center; position:absolute; right:10px; bottom:0; width:20px; height:15px; }
.newslist a.title { font-size:0.875em;margin-bottom:.5em;font-weight:bold;text-decoration:none;color:#5B142C;  }
.newslist span.date { font-weight:bold; color:#666666; font-size:0.625em;}
.newslist .preview {padding:10px 0 10px 0; border-bottom:1px dotted; margin:0 10px;}
.newslist .even { background:#F7F3F4; }

#container .preview img { display:inline; }
.actueel .newslist a.text { text-decoration:none; color:#000;font-size:0.75em; display:block;}
#newsitem {float:right; width:50%;}

/* project detail */
div.project_detail{border:1px solid #ccc;clear:both;margin-left:34px;background:transparent url(/images/project_bg.png) repeat-x scroll left top}
div.project_detail div#innerProjectDiv{padding-top:13px}
div.project_detail div.cont{background:#f00}
div.project_detail div.text{width:236px;float:left}
div.project_detail div.screenshot{float:left}
div.project_detail div.pad{margin:0px 0 0 10px}
div.project_detail div.screenshot strong{margin-right:10px;color:#666}
div.project_detail div.screenshot img{display:block;margin-bottom:10px;border:1px solid #ccc}
div.project_detail span.project_specs{display:block;float:left;width:120px;font-weight:bold;color:#666}
#projectright { width:49%; }
/* hiding div */
div.hide{float:left;width:142px;text-align:right;margin-top:3px;margin-right:23px}
div.hide a{display:block;float:right;font-size:.75em;text-decoration:none;padding:0 25px 4px 0px;color:#999999}
div.hide a#closeheading{background:transparent url(/images/butt_close.gif) no-repeat scroll right 2px}
div.hide a#prevheading{background:transparent url(/images/butt_prev.gif) no-repeat scroll right 2px}
div.hide a#nextheading{background:transparent url(/images/butt_next.gif) no-repeat scroll right 2px}

/* content page */
div.section div.subnav{margin:8px 0 0 10px}
div.section div.subnav h3{display:block;font-size:1.25em;margin-bottom:2px;color:#999;padding-bottom:5px}
div.section div.subnav ul{display:block;list-style:none;text-align:left;clear:right;margin-top:.5em}
div.section div.subnav li{display:inline;margin-right:10px}
div.section div.subnav a{font-size:1.5em;line-height:1.5em;text-decoration:none;color:#ccc}

div.section div.pagination{margin:8px 0 0 10px;color:#ccc}
div.section div.pagination a{color:#ccc}
div.section div.pagination a:hover{text-decoration:none}
div.section div.pagination .right{float:right}
div.section div.pagination .left{float:left}

div.page{float:left;width:678px}
div.page div.row{margin-bottom:10px;positoin:relative}
div.page div.col1{width:470px;float:left}
/*div.page div.col2{width:208px;float:left;clear:right;padding-top:4em}*/
div.page div.col2{width:208px;float:left;clear:right;}
div.page div.col1 div.pad{margin:10px 10px 0 10px}
div.page div.col2 div.pad{margin:0px 10px 0 0px}

/* newsitems */
div.page div.newsitem div.col1{width:470px}
div.page div.newsitem div.col2{width:200px;text-align:right;padding-top:10px}
div.page div.grey{background:#F7F3F4}
div.page div.newsitem h2{float:left;margin-right:10px}
div.page div.newsitem h4{float:left;clear:right;margin-top:.5em}

/* blogitems */
div.page div.blogitem div.col1{width:478px}
div.page div.blogitem div.col2{width:198px; padding: 10px 0;}
div.page div.blogitem div.col2 img { border:1px solid #CCC;}

div.page div.comment { padding: 2px 5px; }

div.page div.grey{background:#F7F3F4}
div.page div.blogitem h2{float:left;margin-right:10px}
div.page div.blogitem h4{float:left;clear:right;margin-top:.5em}

div.page .error { color:#F00; font-size:1.3em; }
div.page .success { color:#0A0; font-size:1.3em; }

/* twitter items */

#twitter_update_list {font-size:0.75em;list-style-type:none; margin:0; padding:0;}
#twitter_update_list li {padding-bottom:10px; margin-bottom:10px; border-bottom:1px dotted #666;}
#twitter_update_list li a { color:#666666; text-decoration:underline; }

/* flickr items */

#Controls {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent url(../images/controls.gif) left top no-repeat;
	height: 28px;
	width: 67px;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
}

#Controls a {
	text-indent: -9000px;
	float: left;
	display: block;
	height: 28px;
}

#PrevLink { width: 25px; background: transparent url(../images/controls.gif) left top no-repeat; }
#PlayToggle { width: 17px; background: transparent url(../images/controls.gif) -25px top no-repeat; }
#NextLink { width: 25px; background: transparent url(../images/controls.gif) -42px top no-repeat; }

#PrevLink:hover { width: 25px; background: transparent url(../images/controls.gif) left -28px no-repeat; }
#PlayToggle:hover { width: 17px; background: transparent url(../images/controls.gif) -25px -28px no-repeat; }
#NextLink:hover { width: 25px; background: transparent url(../images/controls.gif) -42px -28px no-repeat; }

.links { margin-top:20px;}
.links img {display:inline; margin-right:10px; margin-bottom: -5px;}

/* Loading
---------------------------------------------*/

#Loading {
	text-align: left;
	padding: 20px 0 0 20px;
	font-size: 11px;
	color: #ccc;
	font-weight: bold;
	vertical-align: middle;
}

#Loading img {
	vertical-align: -30%;
	margin-right: 3px;
}


/* Caption
---------------------------------------------*/

#CaptionContainer {
	margin: 0 auto;
	text-align: left;
	padding: 5px 0;
	width: 340px;
}

#CaptionContainer p {
	font-size: 11px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

#Counter {
	padding-right: 5px;
	color: #999;
}


/* section colors */
.actueel a,.actueel h2{color:#5B142C}
.werk a,.werk h2,.project a,.project h2{color:#C91417}
.profiel a,.profiel h2{color:#EC4D19}
.contact a,.contact h2{color:#5B142C}

/* read more links */
.section a.link{color:#fff;text-decoration:none;padding:0px 6px 1px 5px}
/*a.newtab{padding-right:13px;background:transparent url(/images/newtab.gif) no-repeat scroll right 2px}*/
.werk a.link,.contact a.link,.actueel a.link,.profiel a.link{border:1px solid #ccc;background:#F9F9F9 url(/images/project_bg.png) repeat-x scroll top left;color:#929292}
/*.actueel a.link{background:#5B142C}.werk a.link{background:#C91417}.profiel a.link{background:#EC4D19}.contact a.link{background:#5B142C}*/

/* border-bottom contact fix */
div.contact{border:none;padding-bottom:0px}

/* portfolio */
div.portfolio{width:320px;margin:11px 0 10px 0px; position:relative}
div.portfolio div.projectthumb,div.portfolio div.gallerythumb{float:left;margin:0 3px 3px 0;position:relative}
div.portfolio div.projectthumb a,div.portfolio div.gallerythumb a{display:block;width:40px;height:40px;text-decoration:none;border:1px solid #ccc}
div.portfolio div.projectthumb a:hover,div.portfolio div.gallerythumb a:hover,div.portfolio div.active a{border-color:#C91417}
div.portfolio div.projectthumb a span,div.portfolio div.gallerythumb a span{display:none}
#tipmessagebox1, #tipmessagebox2{position:absolute;top:0px;left:0px;padding:0px 5px;background:#EDE5C5;border:1px solid #666;font-size:.75em;z-index:10000;opacity:0;color:#AD1518;white-space:nowrap}
div.portfolio div.fade{background:#F0E9CE !important;z-index:0}
div.portfolio div.fade a{background-image:none !important;border-color:#ccc !important;cursor:default}
div.portfolio div.fade a span{display:none}
div.portfolio div.fade a:hover{border-color:#ccc}

div.customer div.col1,
div.customer div.col2{width:50%;padding-top:0px}
div.customer a{text-decoration:none;color:#000}
/* form */
.inptsubmit,.inptsmall{border:1px solid #ccc;color:#929292;font-size:.75em;font-family:arial}
.inptsubmit{background:#F9F9F9 url(/images/project_bg.png) repeat-x scroll left top}
.inptsmall{border-width:1px 0px 1px 1px;padding:1px;color:#000}
label { float:left; width:75px; font-size:.75em; color:#666; font-weight:bold; }
fieldset { border:0; }
.comment_input, .comment_textarea { width:150px; color:#666; font-size:.75em; border:solid 1px #CCC; margin-bottom:.5em; }
.comment_textarea { height:75px; }