﻿body 
{
	background-image:url('images/background.jpg');
	background-repeat:repeat;
	padding:0;
	margin:0;
}

#container
{
	background-image:url('images/background-bar.gif');
	background-repeat:repeat-x;
	width:100%;
	min-height:385px;

}


#containerData
{
	width:960px;
	margin:auto;
}


#header
{
	width:940px;
	height:385px;
	float:left;
	margin-left:10px;
	margin-right:10px;
}

#headerLogo
{
	background-image:url('images/background-bar-header.gif');
	height:146px;
}

#headerImage
{
	height:239px;
}






#content
{
	width:100%;
	float:left;
}

#shadow-left
{
	float:left;
	width:10px;
	background-image:url('images/background-shadow-left.png');
	min-height:600px;
}

#data
{
	float:left;
	background-color:White;
	width:940px;
	min-height:600px;
}


#dataleft
{
	width:150px;
	float:left;
	padding-left:20px;
	padding-top:36px;
}

#dataright
{
	width:750px;
	float:left;
	padding-left:10px;
	padding-right:10px;
}



#shadow-right
{
	float:left;
	width:10px;
	background-image:url('images/background-shadow-right.png');
	min-height:600px;
}




/* ====== Footer ======= */
#footer
{
	width: 940px;
	height:111px;
	background-image:url('images/footer.png');
	margin-left:10px;
	margin-right:10px;
	float:left;
}


#footericons
{
	padding-left:30px;
	padding-top:20px;
	width:380px;
	float:left;
	
}

#footertext
{
	width: 500px;
	float:left;
}

#footertext p
{
	padding-top:35px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}
/* ====== Footer ======= */













/* ==================== Carousel ===================== */

#carouselLaag
{
	position:absolute;
	background-image:url('images/carousel_laag.png');
	height:239px;
	width:940px;
	z-index:10;
	
}


#carousel
{
	z-index:0;
}
.pics { height: 239px; width: 940px; padding:0; margin:0; overflow: hidden }
.pics img { height: 239px; width: 940px; border:0; top:0; left:0 }




#prev2
{
position:absolute;
top:82px;
width:73px;
height:63px;


}

#prev2 img
{
	border:0;
}

#next2
{
position:absolute;
top:82px;
left:867px;
width:73px;
height:63px;


}

#next2 img
{
	border:0;
}


/* ==================== Carousel ===================== */




#headdata
{
	float:left;

}

#left
{
	float:left;

}
#right
{
	float:left;

}


/* PANEL breedte ----------------- */
.Pnl1
{
	width:400px;
	padding-left:10px;
	padding-right:10px;

}
.Pnl2
{
	width:310px;
	padding-right:10px;
}

.Pnl3
{
	width:720px;
	padding-left:10px;
	padding-right:10px;
}
/* PANEL breedte ----------------- */






#dataright h1
{
	padding-bottom:5px;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#000000;
	padding-left:20px;
}

#dataright li
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:150%;
}


#dataright h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	padding-left:20px;
}

#dataright h3, h4, h5
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	padding-left:20px;
	color:#ef4035;
}


#dataright p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:20px;
	line-height:150%;
}


#dataright a, #dataright a:hover, #dataright a:link
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:150%;
	color:black;
}


#dataright td, tr
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	padding-left:20px;

}







/* ============ Agenda ===================== */

.agendaItem
{
	width:100%;
	text-align: left;
	vertical-align: top;
	margin-bottom:10px;
	background-color:#413a27;
	height:120px;
	
}


.agendaItem h2
{
	padding-top:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	line-height:10px;
	color:White;
}

.agendaItem p
{
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	margin-top:-5px;
	padding-right:5px;
	color:#A29061;
}



.agendaFoto
{
	float: left;
	width: 100px;
	text-align: center;
	padding: 5px;
	height: 100%;
}


.agendaData
{
	float: inherit;
	text-align: left;
}


.agendaleesVerder
{
	float:right;
	padding-right:5px;
	color:White;
	
}





/* ============ Nieuwsbrief ===================== */

#nieuwsbrief
{
	width:100%;
	background-color:#ececec;

}

#nieuwsbriefitem
{
	padding:5px;
}

#nieuwsbriefitem p, #nieuwsbriefitem h1
{
	color: black;
}


/* ============ Contact gegevens ===================== */

#contactGegevens 
{
	padding-top:50px;
	font-family: Arial; 
	font-size:12px;
	color:#565656;
	line-height:150%;
	float:left;
}



#contactGegevens a {
	color:#565656;
	font-family: Arial; 
	font-size:12px;
	text-decoration:none;
}
#contactGegevens a:hover {
	color:#593c1b;
	font-family: Arial; 
	font-size:12px;
	text-decoration:underline;
}









/* ============== HET MENU ========================== */

#menu
{
	width:100%;
	float:left;
}


.MenuSysteem ul.AspNet-Menu
{

    z-index:9;
}

.MenuSysteem ul.AspNet-Menu ul  
{
    width:150px;
    top: 0;
    left: 150px;
}


.MenuSysteem ul.AspNet-Menu ul ul  
{
	left:400px;
    _top: -0px;
    _left: 211px;
}

.MenuSysteem li 
{
	background-image:url('images/blok.jpg');
    background-repeat:no-repeat;
    background-position: left center;
	_width:150px;
}

.MenuSysteem li:hover,
.MenuSysteem li.AspNet-Menu-Hover
{
    background-color:#f3f3f3;
}

.MenuSysteem a, 
.MenuSysteem span
{
	font-size: 12px;
	font-family:Arial;
    color: #565656;
    padding: 0 6px 0 15px;
    line-height:30px;
   
}

.MenuSysteem li.AspNet-Menu-Leaf a, 
.MenuSysteem li.AspNet-Menu-Leaf span
{
    background-image: none !important;

}

.MenuSysteem li:hover a, 
.MenuSysteem li:hover span,
.MenuSysteem li.AspNet-Menu-Hover a,
.MenuSysteem li.AspNet-Menu-Hover span,
.MenuSysteem li:hover li:hover a,
.MenuSysteem li:hover li:hover span,
.MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.MenuSysteem li:hover li:hover li:hover a,
.MenuSysteem li:hover li:hover li:hover span,
.MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
    color:black;
}

.MenuSysteem li:hover li a, .MenuSysteem li:hover li span, .MenuSysteem li.AspNet-Menu-Hover li a, .MenuSysteem li.AspNet-Menu-Hover li span, .MenuSysteem li:hover li:hover li a, .MenuSysteem li:hover li:hover li span, .MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a, .MenuSysteem li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
	border: 0px solid #413a27;
	color: Black;
    background-color: #f3f3f3;
	width: 150px;
	margin: 0 0 1px 0;
	height: 30px;
	line-height:30px;

}

.MenuSysteem .AspNet-Menu-Selected
{
    color:#18150c;
    font-weight:bold;
}

.MenuSysteem .AspNet-Menu-ChildSelected 
{
    color:#18150c;
    font-weight:bold;
}

.MenuSysteem .AspNet-Menu-ParentSelected
{


}









/* Extra menu --------------------------------------- */
#centerMenu
{
	margin-top:5px;
}


#extra1
{
	width: 187px;
	height: 55px;
	float:left;
	padding:5px;
	background-color: #413A27;
}

#extra2
{
	width: 188px;
	height: 55px;
	float:left;
	padding:5px;
	background-color: #61563A;

}


#extra3
{
	width: 188px;
	height: 55px;
	float:left;
	padding:5px;
	background-color: #82734E;

}

#extra4
{
	width: 187px;
	height: 55px;
	float:left;
	padding:5px;
	background-color: #A29061;

}


.extraHeader
{
	font-family:Arial;
	font-size:16px;
	color:White;
	text-decoration:none;
}

#meer, #meer1, #meer2, #meer3 
{
	font-family:Arial;
	height: 20px; 
	text-align: right; 
	padding-right: 5px; 
	color: #413A27; 
	font-size: 9px; 
	text-decoration:none;
}

#meer a, #meer1 a, #meer2 a, #meer3 a {
 
color: #000000; 
padding-right: 5px; 
font-size: 9px; 
background-image:url(images/pijltje_hoofditems_ro.gif); 
background-position:bottom right; 
background-repeat:no-repeat;
text-decoration:none;
}

#meer a:hover, #meer1 a:hover, #meer2 a:hover, #meer3 a:hover {
 
color: #ffffff; 
padding-right: 5px; 
font-size: 9px; 
background-image:url(images/pijltje_hoofditems.gif); 
background-position:bottom right; 
background-repeat:no-repeat;
text-decoration:none;
}






/* Extra menu --------------------------------------- */







/* start ====> formulier -------------------------------    */  
INPUT.form
{
	border-right: black 1px solid;
	border-top: black 1px solid;
	border-left: black 1px solid;
	border-bottom: black 1px solid;
	background: #ffffff;
	font: 12px Arial;
	height:18px;
	color: #6b6c64;
	width:90%;
	margin-top:5px;
}
SELECT.form
{
	border-right: #9e9672 1px solid;
	border-top: #9e9672 1px solid;
	border-left: #9e9672 1px solid;
	border-bottom: #9e9672 1px solid;
	background: #fffdfa;
	font: 12px Arial;
	height:18px;
	color: #6b6c64;
}

INPUT.submit
{
	background: #565656;
	color: #ffffff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: black;
	border-right-color: black;
	border-bottom-color: black;
	border-left-color: black;
	width: 100px;
	font-family: Arial;
	font-size: 12px;
	margin-top:10px;

	
}
TEXTAREA.form
{
	border-right: black 1px solid;
	border-top: black 1px solid;
	border-left: black 1px solid;
	border-bottom: black 1px solid;
	background: #ffffff;
	font: 12px Arial;
	color: #6b6c64; 
	width:90%;
}

/* eind ====> formulier ---------------------------------    */ 


#nieuws
{
	position:relative;
	margin-left:-10px;
	width:760px;
}


#nieuwsHeader
{
	background-image:url('images/nieuws_header.jpg');
	height:350px;
	width:15px;
	float:left;
}

/* ============ Nieuws ===================== */

.newsItemFull
{
	position:relative;
	float:left;
	width:180px;
	height:359px;	
	margin-right:5px;
	padding-bottom:10px;
}

.newsItem
{
	padding-top:10px;
	position:absolute;
	width:180px;
	float:left;
	text-align: left;
	vertical-align: top;
	height:359px;
	background-image:url('images/nieuws.png');
	z-index:10;
	cursor:pointer;
}


.newsData h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	/* color:#565656; */
	color: #ef4035;
}

.newsItem p
{
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#565656;
	padding-left:10px;
	padding-right:10px;
}



.newsFoto
{
	position:absolute;
	width: 180px;
	height: 142px;
	left:0;
	top:168px;
}


.newsData
{
	float: inherit;
	text-align: left;
	color:#565656;
}


.leesVerder
{
	float:right;
	padding-right:5px;
	color:#565656;
	
}


/*================== PROJECTEN ================================= */

#projecten
{
	width:720px;
}




.projectItem
{
	width: 720px;
	background-color: #f3f3f3;
	border-bottom: 5px;
	float: left;
	border-bottom-style: solid;
	border-bottom-color: white;
}

.projectdata
{
	float:left;
	width:320px;
}

.projectFoto
{
	float:left;
	width:400px;
	text-align:right;
	height:100px;
}


.projectFoto img
{
	border: 1px solid black;
	vertical-align: middle;
	margin:2px;
}


/*
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto; border:solid 1 #8d8d8d;}
#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); 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; }
*/

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}



/* Slider projecten --------------------- */


#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:670px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:670px; height:500px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:670px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:670px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:620px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}