/* CSS Document */

html,body{ text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; background: #FFFFFF;}
* { margin: 0; padding: 0;}
#pagina{ width: 1000px; height: auto; margin: 0px auto;}

/******* hyperlink and anchor tag styles *******/
a:link, a:visited{ color: #005FA9; text-decoration: none;}
a:hover{ text-decoration: underline;}
a img{ border: 0px;}

/************** header tag styles **************/
h1{ font: bold 120% Verdana, Arial, Helvetica, sans-serif; color: #0099cc; margin: 0px 0px 10px 0px; padding: 0px;}
h2{ font: bold 100% Verdana, Arial, Helvetica, sans-serif; color: #0099cc; margin: 0px 0xp 5px 0px; padding: 0px;}

/********* form and related tag styles *********/
form { margin: 0; padding: 0;}
label{ font: bold 1em Verdana, Arial, sans-serif; color: #334d55;}				
input{ font-family: Verdana, Arial, Helvetica, sans-serif;}

/******* Header van de pagina style *******/
#top{float: left; diplay: inline; padding: 0px;	width: 1000px; height: 161px; background-image: url("./pics_site/header.jpg"); background-repeat: no-repeat;}
#promo{float: left; display: inline; margin: 3px 0px 0px 268px; width: 711px; height: 155px;}

#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{ width:711px; height:155px; overflow:hidden;}	
ol#controls{margin:5px 0; padding:0; height:22px; margin-left: -248px;}
ol#controls li{margin:0 10px 0 0; padding:0; float:left; list-style:none; height:22px; line-height:22px;}
ol#controls li a{float:left; color:#FFFFFF; height:22px; line-height:22px; width: 13px; background-image: url("./pics_site/promo_nav.jpg"); background-repeat: no-repeat; padding:0 7px; text-decoration:none;}
ol#controls li.current a{/*color: #66ccff;*/ text-decoration: underline;}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

#splitter{float: left; display: inline; margin: 15px 0px 0px 200px; padding: 0px; width: 760px; height: 5px; background-image: url("./pics_site/splitter.jpg"); background-repeat: no-repeat;}

/************** navigatie balk *****************/
#navmenu{float: left; display: inline; margin: 24px 0 0 0; width: 1000px; height: 42px; background-image: url("./pics_site/nav_menu.jpg"); background-repeat: no-repeat; }
#navigation { float: left; display: inline; font-size: 14px; color: #FFFFFF; list-style: none; margin: 14px 0px 0px 80px; padding: 0px; letter-spacing: 1px;} 
#navigation li { display: block; text-align: center; float: left; position: relative; margin: 0px 30px 0 0; padding: 0px 0px 0px 0px;} 
#navigation a { color: #FFFFFF; text-decoration: none; display: block; padding: 0px; margin: 0px;} 
#navigation ul { position: absolute; z-index: 500; list-style: none; display: none; background-color: #FFFFFF; border-left: 1px dashed #4AA0FF; border-right: 1px dashed #4AA0FF; 
				 border-bottom: 1px dashed #4AA0FF; padding: 0; left: -1px; margin: 0px;} 
#navigation ul li { background-color: transparent; text-align: left; position: static; border: none;} 
#navigation ul li a { width: 121px;	padding: 3px 2px 3px 2px; color: black; font-weight: normal;} 
#navigation li a:hover, #navigation li a.active { text-decoration: underline;} 
#navigation ul li a:hover { background-color: #DDEEFF;} 
#navigation li:hover ul { display: block; } 

/********* Begin pagina waar de content in komt *********/
#content{float: left; display: inline; width: 960px; margin: 20px 22px 0px 18px; text-align: left; color: #666666; font-size: 14px; line-height: 20px; letter-spacing: 1px; }
#content ul {padding-top: 10px; padding-bottom: 10px; padding-left: 20px;}
#content h2 a{text-decoration: none;}

#content #splitter_home{float: left; display: inline; margin: 20px 64px 20px 65px; padding: 0px; width: 831px; height: 5px; background-image: url("./pics_site/splitter_home.jpg"); background-repeat: no-repeat;}
#content #site_uitgelicht{float: left; display: inline; width: 468px; height: 247px; margin: 0px; background-image: url("./pics_site/site_uitgelicht.jpg"); background-repeat: no-repeat;}
#content #site_uitgelicht #tekst {float: left; display: inline; width: 200px; height: 150px; margin: 70px 0px 0px 20px; text-align: left; color: #FFF; font-size: 12px; line-height: 20px;  overflow: hidden; letter-spacing: 0px;}
#content #site_uitgelicht #tekst h1{color: #FFF; font-size: 14px; letter-spacing: 1px;}
#content #site_uitgelicht #tekst a{color: #FFF;}
#content #site_uitgelicht #link {float: left; display: inline; width: 200px; height: 165px; margin: 55px 0px 0px 28px; overflow:hidden;}
#content #site_uitgelicht #link a {display: block; border: none; width: 200px; height: 165px; text-indent:-1234em; text-decoration:none;}

#content #splitter_verticaal{float: left; display: inline; margin: 0px; padding: 0px; width: 37px; height: 254px; background-image: url("./pics_site/splitter_verticaal.jpg"); background-repeat: no-repeat;}

#content #social_media{float: left; display: inline; height: 247px; width: 455px; overflow: hidden;}

/*************** Contact form *********************/
#content form { margin: 0; padding: 0;}
#content label{ font: bold 1em Verdana, Arial, sans-serif; color: #09adde;}				
#content input, #content select, #content textarea {color: #000000; border: 1px solid #09adde; font-size: 14px;}
#content input:hover, #content textarea:hover, #content select:hover {border: 1px solid #09adde; background-color: #cfcccb;}
#content input.button{border: 1px solid #76c3ed; background-color: #FFFFFF; padding: 3px 10px 3px 10px; margin: 5px 0px; font-weight: bold;}
#content input.button:hover {color: #FFFFFF; border: 1px solid #09adde; background-color: #cfcccb;}
#content .fout_tekst {border: 2px solid #FF0000;}

/*************** Opleiding details pagina ******************/
h1 a.opleiding {color: #0099cc;}
#content #opleiding_details {float: left; display: inline; width: 960px;}
#content #opleiding_details #regel {float: left; display: inline; width: 960px; margin: 0px 0px 10px 0px; border-top: 1px solid #0099cc; padding: 2px 0px;}
#content #opleiding_details #regel #kop {float: left; display: inline; width: 200px; margin: 0px 25px 0px 0px; font-weight: bold;}
#content #opleiding_details #regel #detail {float: left; display: inline; width: 735px;}

/*************** Portfolio pagina ******************/
#content #portfolio {float: left; display: inline; width: 960px; height: 150px; overflow: hidden;}
#content #portfolio #tekst {float: left; display: inline; width: 250px; heigth: 150px; letter-spacing: 0px;}
#content #portfolio #tekst ul {padding: 5px 0px 5px 20px}
#content #portfolio #tekst ul li {font-size: 12px; line-height: 16px;}
#content #portfolio #tekst a {font-size: 12px; margin: 0px 0px 0px 20px;}
#content #portfolio #tekst h2 a{margin: 0px; font: bold 100% Verdana, Arial, Helvetica, sans-serif; color: #0099cc; margin: 0px 0xp 5px 0px;}
#content #portfolio #screenshot {float: left; display: inline; width: 710px; heigth: 150px;}

#content #portfolio_thumb {float: left; display: inline; width: 227px; height: 212px; overflow: hidden; margin: 10px 11px 25px 0px; border: 1px solid #0099cc;}
#content #portfolio_thumb #header {float: left; display: inline; width: 225px; height: 25px; letter-spacing: 0px; overflow: hidden; text-align: center;}
#content #portfolio_thumb #header h2{margin: 0px; font-size: 12px; color: #0099cc; margin: 5px 0 0 0;}
#content #portfolio_thumb #thumb {float: left; display: inline; width: 225px; height: 169px; overflow: hidden;}
#content #portfolio_thumb #link {float: left; display: inline; width: 225px; height: 16px; letter-spacing: 0px; overflow: hidden; text-align: center;}

/************** lightbox effect ******************/
#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(./pics_site/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./pics_site/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; }

/*************** footer ****************************/
#footer{float: left; display: inline; width: 1000px; height: 42px; background-image: url("./pics_site/nav_menu.jpg"); background-repeat: no-repeat; margin: 20px 0px 0px 0px; text-align: center; color: #FFF; font-size: 13px;}
#footer #tekst {margin: 13px 0px 0px 0px;}
#footer #tekst a {color: #FFF;}
/********************* end **********************/