/*
CSS voor Petervanelswijk.nl
Datum januari 2009
Design: Kenny van Ooijen
Copywriting: Kate van Elswijk
*/

/* Standaard*/

* { margin: 0; padding: 0; border: 0px; text-decoration: none; }
html { background: #273032; }
body { font: 11px Arial; margin: 0px auto;}
img { float: left; }
hr { width:600px; height: 1px; color: #f3dfc8; background-color: #f3dfc8; }

/* container */

.container {
	position: relative;
	margin: 0px auto;
	width: 830px;
}
.content {
	float: left;
	width: 830px;
	background-color: #ffffff;
}

/* menu links */

.linkerkant {
	float: left;
	display: inline;
	width: 195px;
	margin: 0px 4px 0px 4px;
}

.navigatie {
	float: left;
	width: 195px;
}
.navigatie li {
	float: left;
	display: block;
	width: 195px;
	height: 32px;
}
.navigatie li a {
	float: left;
	height: 24px;
	width: 180px;
	font: 12px Arial;
	color: #ffffff;
	padding: 7px 0px 0px 15px;
	background: url(images/button.gif) no-repeat top left;
}
.navigatie li a:hover {
	float: left;
	background: url(images/button.gif) no-repeat bottom left;
}
.navigatie li a.nieuw {
	float: left;
	height: 24px;
	width: 180px;
	font: 12px Arial;
	color: #ffffff;
	padding: 7px 0px 0px 15px;
	background: url(images/button-nieuw.gif) no-repeat top left;
}
.navigatie li a.nieuw:hover {
	float: left;
	background: url(images/button-nieuw.gif) no-repeat bottom left;
}
.navigatie li a.on {
	float: left;
	height: 24px;
	width: 180px;
	font: 12px Arial;
	color: #ffffff;
	padding: 7px 0px 0px 15px;
	background: url(images/button-on.gif) no-repeat top left;
}
.kopje-informatie {
	float: left;
	width: 180px;
	height: 24px;
	font: 12px Arial;
	color: #5a5a5a;
	font-weight: bold;
	padding: 7px 0px 0px 15px;
	background: url(images/informatie.gif) no-repeat;
}
.informatie {
	float: left;
}
.informatie li {
	float: left;
	display: block;
	width: 195px;
	height: 30px;
}
.informatie li a {
	float: left;
	width: 165px;
	height: 25px;
	font: 12px Arial;
	color: #000000;
	padding: 5px 0px 0px 30px;
	background: url(images/informatie-bg.gif) no-repeat top left;
}
.informatie li a:hover {
	float: left;
	text-decoration: underline;
	background: url(images/informatie-bg.gif) no-repeat bottom left;
}
.informatie li a.on {
	float: left;
	width: 165px;
	height: 25px;
	font: 12px Arial;
	color: #000000;
	padding: 5px 0px 0px 30px;
	background: url(images/informatie-bg-on.gif) no-repeat top left;
}
.tel-nr {
	float: left;
	width: 195px;
	height: 159px;
	background: url(images/telefoon-nr.gif) no-repeat;
}
.tel-nr span {
	float: left;
	font: 12px Arial;
	color: #000000;
	padding: 129px 0px 0px 25px;
}

/* inhoud */

.inhoud {
	float: right;
	display: inline;
	width: 623px;
	margin-right: 4px;
}
.header1 {
	float: left;
	width: 623px;
	height: 139px;
	background: url(images/header-1.jpg) no-repeat;
}
.lwfoto {
	position: absolute;
	margin: 45px 0px 0px 420px;
}

/* content*/

.text {
	float: left;
	display: inline;
	width: 612px;
	margin: 30px 0px 0px 11px;
}
.text h1 {
	float: left;
	width: 612px;
	font: 20px Georgia;
	color: #431c00;
	font-weight: bold;
	margin-bottom: 5px;
}
.text-bg {
	float: left;
	width: 602px;
	font: 12px Arial;
	color: #431c00;
	line-height: 20px;
	padding: 5px 5px 15px 5px;
	background: url(images/txt-bg.gif) repeat-x top left;
}
.text-bg a {
	font: 12px Arial;
	color: #aa0000;
	text-decoration: underline;
}
.text-bg a:hover {
	color: #431c00;
	background-color: #eac8b0;
	text-decoration: none;
}
.text-bg h2 {
	float: left;
	width: 602px;
	font: 16px Georgia;
	color: #970101; 
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: 7px;
}

.bullet {
	float: left;
	margin: 8px 15px 0px 0px;
}
.link1 {
	font: 16px Arial;
	font-weight: bold;
}
.img-r {
	float: right;
	margin: 0px 0px 5px 5px;
}
.img-l {
	float: left;
	margin: 5px 8px 2px 0px;
}
.img-l2 {
	float: left;
	margin: 5px 5px 5px 0px;
}
.img-r2 {
	float: right;
	margin: 5px 0px 5px 5px;
}
.foto {
	float: left;
	width: 110px;
	height: 110px;
	border: 9px solid #f3dfc8;
	margin: 0px 25px 25px 0px;
}
.fotor {
	float: left;
	width: 110px;
	height: 110px;
	border: 9px solid #f3dfc8;
	margin: 0px 0px 25px 0px;
}
	
.download-button {
	float: left;
	width: 227px;
	height: 26px;
	font: 12px Arial;
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
	padding: 10px 0px 0px 50px;
	margin: 8px 0px 5px 0px;
	cursor: pointer;
	background: url(images/down-b.gif) no-repeat;
}
.text-bg table {
	float: left;
	width: 600px;
}
.text-bg table td{
	border-bottom: 1px solid #d9d2cc;
}
.text-bg a.link {
	font: 12px Arial;
	color: #431c00;
	font-weight: bold;
	text-decoration: none;
	line-height: 20px;
}
a.moviepic {
	float: left;
	border: 1px solid #c8c8c8;
	padding: 1px;
	margin: 0px 10px 10px 0px;
}
a:hover.moviepic {
	float: left;
	border: 1px solid #ff0000;
	padding: 1px;
	margin: 0px 10px 10px 0px;
}
a.moviepic2 {
	float: right;
	border: 1px solid #c8c8c8;
	padding: 1px;
	margin-bottom: 10px;
}
a:hover.moviepic2 {
	float: right;
	border: 1px solid #ff0000;
	padding: 1px;
	margin-bottom: 10px;
}


/* footer*/
.footer {
	float: right;
	width: 830px;
	height: 25px;
	font: 12px Arial;
	color: #ffffff;
	text-align: right;
	margin-top: 10px;
}
.footer .link {
	float: left;
	color: #899ca0;
	text-decoration: none;
}
.footer .link:hover {
	text-decoration: underline;
}

/* lightbox css*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ 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-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

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

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }