*{
	font-size:100%;
}

body {
	font:0.75em/1.65em Verdana, sans-serif;
/*	font:75%/165% Verdana, sans-serif;*/
	color:#7F7F7F;
	text-align:center;
	margin:0;
	padding:0;
}

#container {
	margin: 0 auto;
	width:880px;
	height:580px;
	text-align: left;
	position:relative;
}

/* onderstaande zijn ook de nav kleuren voor het hoofdmenu, submenu staat onder '#catlist' */  
a, a:visited, a:hover, a:active {
	text-decoration:none;
	color:#C4C4C4;
}
a:hover, a:active, ul#nav li.act a, #inhoud ul#catlist li.act a {
/*	color:black;*/
	color:#FF6E00;
}
#inhoud {
/* 8-11-07 anders zijn links die onder de nav vallen niet aanklikbaar (Savenije) */
	z-index:2;
}
#inhoud a, #inhoud a:visited, #inhoud a:hover, #inhoud a:active {
	color:black;
}
#inhoud a:active {
	color:#FF6E00;
/*	color:black;
	font-weight:bold;*/
}
#inhoud a:hover {
	color:#FF6E00;
}
p {
	font-size:1em;
/*	padding-left:20px;*/
}
img {
	border:0px;
}

#menu {
	position:absolute;
	left:135px;
	top:30px;
}
ul {
	list-style:none;
	padding:0;
	margin:0;
}	
ul#nav li{
	margin-bottom:0px;
	font-size:1em;
}
#catlist {/* submenu wordt tussen items van hoofdmenu geplaatst */
	position:absolute;
	left:135px;
	width:570px;
	z-index:2;
}
#catlist li, #catlist li.act{
	float:left;
/*	padding-right:22px;*/
/*	background: url(images/plus_rood.gif) right no-repeat;*/
	white-space: nowrap;/* belangrijk voor IE, anders gaan menuitems eventueel over 2 regels! */
}
#catlist li.last, #catlist li.act.last{
	background: right no-repeat;
}
#catlist  a, #catlist a:hover, #catlist a:active{
/*	color:#7F7F7F;*/
	color:black;
	text-decoration:none;
	font-weight:normal;
}
#catlist a:hover {
	color:#FF6E00;
}
#catlist .act a, #catlist .andere_item_act a{
/*	color:black;
	font-weight:bold;
*/
	color:#FF6E00;
}
/* wie we zijn */
ul#nav li#uid4.act{
	margin-bottom:24.5em;/* maakt de ruimte voor de tekst tussen de menuitems - wordt door js in 'geen_lightbox.js' aangepast */
}
body#body_4 #inhoud {
	position:absolute;
	left:135px;
	top:4em;
	width:570px;
}
#inhoud p{
	margin:0;
}
/* wat we gemaakt hebben */
ul#nav li#uid6.act{
	margin-bottom:4em;
}
body#body_6 #catlist {
	top:5.75em;
	top:7.25em;
}
/* en mooie details */
ul#nav li#uid7.act{
	margin-bottom:7em;
}
body#body_7 #catlist {
	top:7.35em;
	top:8.75em;
}
body#body_7 h2#title {
/*	visibility:hidden;  het onderschrift bij foto wordt niet getoond bij 'andere leuke dingen' */
}
/* voor wie we nu werken */
ul#nav li#uid8.act{
	margin-bottom:5em;
}
body#body_8 #catlist {
	top:9em;
	top:10.5em;
}
/* eerdere opdrachtgevers */
ul#nav li#uid32.act{
	margin-bottom:8em;
}
body#body_32 #catlist {
	top:10.75em;
	top:12.00em;
}
/* zo vind u ons */
body#body_5 #inhoud {
	position:absolute;
	left:135px;
	top:12.25em;
	top:13.75em;
	width:570px;
}
/* anderen over */
ul#nav li#uid33.act{
	margin-bottom:33em;
}
body#body_33 #inhoud {
	position:absolute;
	left:135px;
	top:6em;
	width:570px;
}
.oranje {
	color:#FF6E00;
/*	font-weight:bold;*/
}
.zwart {
	color:black;
}
.entry {
	position:absolute;
	left:135px;
	top:263px;
	width:570px;
	height:316px;
}
.entry img{
	border:1px solid #ECECEC;
	border:1px solid #C4C4C4;
}
.screenshot {
	float:left;
}
.thumbnails {
	position:absolute;
	left:375px;
	top:0;
	width:184px;
}
.thumbnails img{
	margin-right:7px;
	margin-bottom:6px;
}
.thumbnails a:hover img{
	border:1px solid #FF6E00;
}
#description {
	position:absolute;
	left:375px;
	bottom:40px;
	width:177px;
	font:10px Verdana, sans-serif;
}
.description p{
	margin:0
}
.entry h2 {
	position:absolute;
	left:0;
	bottom:0;
	font:10px Verdana, sans-serif;
	font-weight:normal;
	color:black;
	margin:0
}
.navigation {/* browsebox nav links naast screenshot */
	position:absolute;
/* 8-11-07 nav van links naar rechts: */	
/*	left:-106px;*/
/*	top:120px;*/
	right:-60px;
	top:65px;
	font:10px Verdana, sans-serif;
}	
.navigation  a{
	font-size:13px;
}
#inhoud .tx-websiteportfolio-pi1-browsebox-SCell a:link, #inhoud .tx-websiteportfolio-pi1-browsebox-SCell a:visited, #inhoud .tx-websiteportfolio-pi1-browsebox-SCell a:hover, #inhoud .tx-websiteportfolio-pi1-browsebox-SCell a:active  {
	color:#FF6E00;
}
.navigation .count{
	vertical-align:2px;
	padding-left:5px;
}
#datbureau-punten_ {
	position:absolute;
	left:30px;
	top:285px;
	width:72px;
	height:11px;
}
#datbureau-logo_ {
	position:absolute;
	left:730px;
	top:280px;
	width:114px;
	height:17px;
}
#datbureau-blog_ {
	position:absolute;
	left:244px;
	top:552px;
	width:156px;
	height:14px;
}
#datbureau-nazomer_ {
	position:absolute;
	left:424px;
	top:552px;
	width:189px;
	height:14px;
}
#datbureau-blog_ img, #datbureau-nazomer_ img {
	vertical-align:middle;
	margin-right:6px;
}
#datbureau-streep_ {
	position:absolute;
	left:244px;
	top:539px;
	width:356px;
	height:1px;
	background-color:#c4c4c4;
}

#nav-foto-wie_ {
	position:absolute;
	left:307px;
	top:56px;
	width:133px;
	height:135px;
}
#nav-foto-vinden_ {
	position:absolute;
	left:488px;
	top:92px;
	width:130px;
	height:129px;
}
#nav-foto-voorwie_ {
	position:absolute;
	left:171px;
	top:209px;
	width:136px;
	height:165px;
}
#nav-foto-wat_ {
	position:absolute;
	left:352px;
	top:215px;
	width:118px;
	height:121px;
}
#nav-foto-eerder_ {
	position:absolute;
	left:488px;
	top:345px;
	width:143px;
	height:164px;
}
#nav-foto-leuke_ {
	position:absolute;
	left:295px;
	top:407px;
	width:145px;
	height:134px;
}


/* menu home */
#menu-actief {
	visibility:hidden;
}
#nav4 {/*wie*/
	position:absolute;
	left:202px;
	top:98px;
}
#nav4 a{
	display:block;
	height:97px;
	width:126px;
	background:url(images/ho_sch_zw.gif) 10px 30px no-repeat;
}
#nav4 a:hover{
	background:url(images/ho_sch.gif) 10px 30px no-repeat;
}
#nav6 {/*wat*/
	position:absolute;
	left:128px;
	top:245px;
}
#nav6 a{
	display:block;
	height:120px;
	width:182px;
	background:url(images/ho_tool.gif) 55px 35px no-repeat;
	color:#FF6E00;
}
/*#nav6 a:hover{
	background:url(images/ho_tool.gif) 0 15px no-repeat;
}
*/
#nav7 {/*leuke*/
	position:absolute;
	left:373px;
	top:208px;
}
#nav7 a{
	display:block;
	height:135px;
	width:127px;
	background:url(images/ho_the_zw.gif) 10px 40px no-repeat;
}
#nav7 a:hover{
	background:url(images/ho_the.gif) 10px 40px no-repeat;
}
#nav8 {/*nu*/
	position:absolute;
	left:390px;
	top:48px;
}
#nav8 a{
	display:block;
	height:90px;
	width:180px;
	background:url(images/ho_kro_zw.gif) 25px 30px no-repeat;
}
#nav8 a:hover{
	background:url(images/ho_kro.gif) 25px 30px no-repeat;
}
#nav32 {/*eerder*/
	position:absolute;
	left:522px;
	top:340px;
}
#nav32 a{
	display:block;
	height:105px;
	width:194px;
	background:url(images/ho_lad_zw.gif) 40px 35px no-repeat;
}
#nav32 a:hover{
	background:url(images/ho_lad.gif) 40px 35px no-repeat;
}
#nav5 {/*vind*/
	position:absolute;
	left:570px;
	top:140px;
}
#nav5 a{
	display:block;
	height:120px;
	width:125px;
	padding-left:15px;
	background:url(images/ho_kof_zw.gif) 0px 25px no-repeat;
}
#nav5 a:hover{
	background:url(images/ho_kof.gif) 0px 25px no-repeat;
}
#nav33 {/*anderen over*/
	position:absolute;
	left:288px;
	top:385px;
}
#nav33 a{
	display:block;
	height:110px;
	width:190px;
	background:url(images/ho_micr.gif) 25px 30px no-repeat;
}
#nav33 a:hover{
	/*background:url(images/ho_mic_zw.gif) 0px 30px no-repeat;*/
}


#popup_karin, #popup_tess {
	visibility:hidden;
	position:absolute;
	left:0px;
	top:40px;
	width:550px;
	height:133px;
	padding:10px;
	border:1px solid #FF6E00;
	background:white;
	z-index:20;
}

#popup_karin p, #popup_tess p {
	font:10px Verdana, sans-serif;
	line-height:1.5em;
}

.sluit {
	float:right;
	margin-left:10px;
}

/* Lightbox styles */

#lightbox{
	position: absolute;
	top: 0px;/* doet niks als je um aanpast, waarom niet? */
	left: 135px;
	z-index: 100;
}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: absolute;
	background-color: #fff;
	top: 204px;
	left:0;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	border:1px solid #ECECEC;
	}

#imageContainer{
	padding: 0px;
	}

#loading{
	display:none;
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/typo3conf/ext/websiteportfolio/res/lightbox2/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
/*
#prevLink:hover, #prevLink:visited:hover { background: url(/typo3conf/ext/websiteportfolio/res/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/typo3conf/ext/websiteportfolio/res/lightbox2/images/nextlabel.gif) right 15% no-repeat; }
*/

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0;
	}
#imageData #imageDetails{ display:none; width: 70%; float: left; text-align: left; }	
#imageData #caption{ display:none; font-weight: bold;	}
#imageData #numberDisplay{ display: block; display:none; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ display:none; width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
)