/*
z-index:
10: header
100: img.hover
200: #overlay
300: #imagecontainer
301: #full
302: #keyboard


#ffe100;
#939598;
*/

html,body { background: #FFF; margin: 0; padding: 0; height: 100%; }

body { overflow-y: scroll; }

table,tr,td { border-collapse: collapse; border: none; padding: 0; margin: 0; }

form { margin: 0; padding: 0; }
form textarea,
form input.text { border: none; width: 100%; margin-bottom: 6px; padding: 2px; }
form label { line-height: 21px; }

a { cursor: pointer; }
a img { border: none; }
*:active { outline: none; }
:focus { -moz-outline-style: none; }

.hidden { display: none; }
p.footer,
p.footer a { color: #595959; text-decoration: none; z-index: 400; position: relative; }
p.footer span { color: #ffe100; margin: 0 5px; display: inline-block; }

h2,h3 { color: #ffe100; font-weight: normal; padding: 0; margin: 12px 0; }

table { width: 100%; border-collapse: collapse; }

#container { width: 940px; margin: 0 auto; }

#header { position: relative; position: absolute; z-index: 10; width: 100%; }
#header .inner { width: 940px; margin: 0 auto; position: relative; }
#header h1 { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
#header h1 a { display: block; width: 220px; height: 130px; background: url('../images/logo.png') no-repeat; text-indent: -999em; }

#header ul { margin: 0; padding: 0; list-style: none; left: 0; position: absolute; background: #7c7c7c;  }
#header ul li { position: relative; float: left; } 
#header ul li a { color: #FFF; text-decoration: none; }
#header ul li a:hover,
#header ul li.selected a { color: #ffe100; }

#header ul 	   { top: 86px; line-height: 30px; }
#header ul li  { margin-right: 28px; margin-left: 28px; }

#portfoliomenu { position: absolute; top: 125px; margin: 0; padding: 0; list-style: none; left: 0; line-height: 25px; }
#portfoliomenu li { position: relative; float: left; color: #FFF; margin-right: 33px; cursor: pointer; } 
#portfoliomenu li:hover,
#portfoliomenu li.hover,
#portfoliomenu li.selected  { color: #ffe100; }
#portfoliomenu li.selected a {}
	
#portfoliomenu li ul { position: absolute; left: 0; top: 25px; margin: 0; padding: 0; list-style: none; width: 1px; }
#portfoliomenu li.selected ul { display: block;  border-top: 1px solid #939598;   }

#pagecontainer { position: relative; position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; min-height: 100%; }
#pagecontainer #pages { position: relative; position: absolute; }
#pagecontainer .page  { position: absolute; width: 100%; min-height: 100%; }
#pagecontainer .white { background: #FFF; }
#pagecontainer .black { background: #000; }
#pagecontainer .stripes { background-image: url(../images/stripes.gif); background-repeat: repeat-x; }

#pagecontainer .page	  div.inner { width: 940px; margin: 0 auto; min-height: 100%; }
#pagecontainer #intro	  div.inner { }
#pagecontainer #portfolio div.inner { }
#pagecontainer #trouwen	  div.inner { }
#pagecontainer #model	  div.inner { }
#pagecontainer #albums	  div.inner { }
#pagecontainer #fotograaf div.inner { }
#pagecontainer #contact	  div.inner { }


#pagecontainer .page .top			{ padding-top: 177px; }

#pagecontainer .page .first			{ height: 212px; overflow: hidden; padding-top: 177px; }
#pagecontainer .page .firstimage 	{ height: 306px; background: #000; position: relative; color: #FFF; }
#pagecontainer .page .firstimage .slidemask { height: 306px; position: relative; position: absolute; top: 0; left: 0; overflow: hidden; width: 940px; }
#pagecontainer .page .firstimage .slide { height: 306px; width: 940px; top: 306px; position: relative; position: absolute; left: 0; }
#pagecontainer .page .firstimage .content { position: absolute; top: 0; left: 0; }
#pagecontainer .page .firstimage .fade  { position: absolute; left: 0; bottom: -50px; }

#pagecontainer .page .second 		{ height: 201px; overflow: hidden; padding-top: 44px; }
#pagecontainer .page .secondimage 	{ height: 306px; background: #000; position: relative; color: #FFF; }
#pagecontainer .page .secondimage .slidemask { height: 306px; position: relative; position: absolute; top: 0; left: 0; overflow: hidden; width: 940px; }
#pagecontainer .page .secondimage .slide { height: 306px; width: 940px; top: 306px; position: relative; position: absolute; left: 0; }
#pagecontainer .page .secondimage .content { position: absolute; top: 0; left: 0; }
#pagecontainer .page .secondimage .fade  { position: absolute; left: 0; bottom: -50px; }

#pagecontainer .page .third			{ min-height: 50px; }
	
#pagecontainer .page ul.cols2 { list-style: none; margin: 0; padding: 0; }
#pagecontainer .page ul.cols2 li { float: left; width: 440px; margin-right: 60px; }
#pagecontainer .page ul.cols2 li:last-child { margin-right: 0; }
#pagecontainer .page td,
#pagecontainer .page p { line-height: 24px; }
#pagecontainer .page h2 + ul { margin-top: -12px; }
/* portfolio ----------------------- */
  
 
#images { list-style: none; margin: 200px 0 0 0; padding: 0; }
#images li { float: left; position: relative; margin-right: 2px; margin-bottom: 2px; }
#images li a { display: block; float: left; }
#images li img { display: block; position: relative; }
#images li img.hover { position: absolute; top: 0; left: 0; border: 2px solid #FFF; z-index: 100; padding: 0; cursor: pointer;  }

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

#footer { clear: all; margin-top: 100px; margin-bottom: 25px; position: relative; color: #939598; line-height: 22px; }
#footer p { margin: 0; padding: 0; }
#footer .innovatio { position: absolute; display: block; width: 100px; height: 18px; text-indent: -999em;  background: url('../images/innovatio.gif') no-repeat;   right: 0; top: 0; }
#footer .innovatio:hover { background: url('../images/innovatio.gif') bottom left no-repeat; }
	
#vimeocontainer { position: relative; position: absolute; top: 50%; left: 50%; width: 640px; margin-left: -320px; margin-top: -180px; height: 360px; overflow-y: auto; overflow-x: hidden; z-index: 300; white-space: nowrap; }

#imagecontainer { position: relative; position: absolute; top: 50%; left: 0; width: 100%; margin-top: -275px; height: 550px; overflow-y: auto; overflow-x: hidden; z-index: 300; white-space: nowrap; }
#imagecontainer ul {list-style: none; margin: 0; padding: 0;  position: absolute; top: 40px; }
#imagecontainer ul li { float: left; position: relative; }
#imagecontainer ul li img { display: block; cursor: pointer; }  

#imagecontainer #links { position: absolute; right: 50%; line-height: 25px; top: 0; margin: 0; padding: 0; margin-right: -375px; }
#imagecontainer #links a { color: #666; margin-left: 25px; }
#imagecontainer #links a.selected,
#imagecontainer #links a:hover { color: #FFF; }

#full { z-index: 301; position: absolute; height: 100%; width: 100%; left: 0; top: 0; margin: 0 auto; text-align: center; background: #000; }

#admin { background: #ffe100; position: absolute; top: 50px; left: 0; line-height: 25px; color: #000;  }
#admin a { color: #000; margin: 0 28px; text-decoration: none; }
#admin span { padding: 0 28px; background: #e5ca00; display: inline-block; }

#hover { position: absolute;  z-index: 302; width: 77px; height: 83px; top: 209px; }
.toleft { background: url('../images/pijlrechts.png') left top no-repeat; left: 30px; }
.toright { background: url('../images/pijllinks.png') left top no-repeat; right: 30px; }

#keyboard { width: 258px; height: 145px; position: absolute; top: 50%; left: 50%; margin-left: -127px; margin-top: 56px; z-index: 302; background: url('../images/keyboard.gif') left top no-repeat; } 


#homemenucontainer { position: relative; }

#homemenu { width: 430px; height: 100%; overflow: hidden; margin: 0 auto; padding: 0; list-style: none; position: relative; }
#homemenu li { width: 172px; overflow: hidden; height: 100%; background: #878787; position: relative; position: absolute; }
#homemenu li.up { background: #6c6c6c; }
#homemenu li a { display: block; height: 532px; width: 172px; background: #000; top: 50%; margin-top: -266px; position: absolute; text-indent: -999em; }

#homemenu li.portfolio 	{ left: 0px; }
#homemenu li.trouwen 	{ left: 86px; }
#homemenu li.albums		{ left: 172px; }
#homemenu li.model 		{ left: 172px; }
#homemenu li.fotograaf 	{ left: 258px; }
#homemenu li.contact 	{ left: 344px; }

#homemenu li.portfolio 	a { background: url('/images/homemenu/portfolio.jpg'); }
#homemenu li.trouwen 	a { background: url('/images/homemenu/trouwen.jpg');  }
#homemenu li.model 		a { background: url('/images/homemenu/model.jpg');  }
#homemenu li.albums		a { background: url('/images/homemenu/albums.jpg');  }
#homemenu li.fotograaf 	a { background: url('/images/homemenu/fotograaf.jpg');  }
#homemenu li.contact 	a { background: url('/images/homemenu/contact.jpg');  }

.homemenuoverlay { padding-left: 20px; font-size: 16px; display: none; background: url('/images/homemenu/background.png') no-repeat; width: 430px; height: 35px; line-height: 35px; color: #7c7c7c; position: absolute; top: 50%; margin-top: 200px; cursor: pointer;  }