/*
general styles
	body styles
	reset
	headings
	links
	other elements, tags
helper styles
	forms
	notifications and errors
	consistant items with normally just one class
page structure
	skeleton and page components
overrides
*/

/* ----------------------------------------*/
/* ----------------- BODY  ----------------*/
/* ----------------------------------------*/

html, body{	
padding: 0;	
text-align: center;	
height:100%;
background: #000000;
}


body{
background: #000000;	 
text-align: center; 			/*Om te zorgen dat #wrapper wordt gecentreerd in IE6*/
font-family: "verdana", helvetica, sans-serif;
font-weight: normal;
}


/* ----------------------------------------*/
/* ----------------- RESET  ---------------*/
/* ----------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 


table { 
border-collapse:collapse; 
border-spacing:0; 
} 

img {  
border:0; 
} 

address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
font-weight:normal; 
} 

caption,th { 
text-align:left; 
} 

h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 

img {display:block;}

/* ---------------------------------------------------*/
/* ----------------- BASIS TYPOGRAFIE ----------------*/
/* ---------------------------------------------------*/

@font-face {
	font-family: 'Lane-Narrow';
	src: url('Lane-Narrow.eot') format('eot'), 
	     url('Lane-Narrow.woff') format('woff'), 
	     url('Lane-Narrow.ttf')  format('truetype'),
	     url('Lane-Narrow.svg#Lane-Narrow') format('svg');
}

/*--------- STYLEN BINNEN HET CMS -----------*/
/*--------- DIT MOET LATER NAAR GENERALSTYLES.CSS -----------*/

body{
font-family: "verdana", helvetica, sans-serif;
font-size: 12px;	
color:#bbbbbb;
min-height:100%;
position:relative;
}

p{
line-height:20px;
margin-bottom:20px;	
}

dl{
line-height:20px;
margin-bottom:20px;	
}

a{
color: #bbbbbb;
text-decoration: none;
}

a:hover {
color: #ffffff;
text-decoration: underline;
}

ul {
font-weight: normal;
line-height: 20px;	
list-style: none;	
margin-left: 20px;
margin-bottom: 20px;
}

ol {
font-weight: normal;
line-height: 20px;
margin-left: 20px;
margin-bottom: 20px;
}


li {	
font-weight: normal;
line-height: 20px;	
}

b,em {
font-weight: bold;	
}

span{
color:#535353;	
}

/* ------------------------------------------*/
/* ----------------- CLASSES ----------------*/
/* ------------------------------------------*/



/* --------------------------------------------------*/
/* ----------------- PAGINA STUCTUUR ----------------*/
/* --------------------------------------------------*/


/*--------- STRUCTUUR UIT DRIE BLOKKEN BINNEN DE WRAPPER - CROSS BROWSER METHODIEKEN -----------*/


/*
wrapper
	header
		topblock
			logo
			servicemenu
	photoblock
	submenublock
	content	
		titleblock
		kol1
		fotoboekje		
	footerblock
*/


#wrapper {		
margin:0 auto;
text-align:left;			/*Om de vorige IE6 hack van text-align:center op te heffen */
width:998px;
background: #000;
position:relative;

background-color:#222222;
padding-bottom:0;

xfont-family: 'Lane-Narrow', sans-serif;
font-family: 'Lato', sans-serif;

font-weight: normal;
font-size: 16px;
}

h1 {
font-family: 'Lane-Narrow', sans-serif;
font-weight: 100;
font-size: 30px;
letter-spacing: 0px;
}

#logo > a > h1 {
width: 800px;
padding-left: 22px;

font-weight: 100;
font-size: 40px;
letter-spacing:0px;

margin-top: -15px;

}



#logo > a > h1 > span.sitesegment {
	color: #ffffff;
}


h2 {
font-family: 'Lane-Narrow', sans-serif;
font-weight: 100;
font-size: 30px;
letter-spacing: 0px;
}


h3 {
font-family: 'Lane-Narrow', sans-serif;
font-weight: 100;
font-size: 30px;
letter-spacing: 0px;
}



h4 {
font-family: 'Lane-Narrow', sans-serif;
font-weight: 100;
font-size: 30px;
letter-spacing: 0px;
}

#homepageonderkant  > div > div > h4 {
font-family: 'Lane-Narrow', sans-serif;
font-weight: 100;
font-size: 24px;
letter-spacing: 0px;
}

h3:hover a, h4:hover a {
	text-decoration: none;
}

/*--------- HEADER -----------*/

#header {
padding-bottom:31px;
background-color:#222222;
border-left:1px solid #1a1a1a;
border-right:1px solid #1a1a1a;
border-bottom:3px solid black;
}

#logo {
float: left;	
width: 427px;
height:70px;	
margin-left:1px;
}

#logo a{
display:block;	
}

#logo a:hover  {
	text-decoration: none;
	color: none;
}

#servicemenu {
position: relative;

float: right;
width: 182px;
height: 50px;
background-color:#222222;
padding-top:15px;

overflow: visible;

border: 0px solid gold;
}

#servicemenu a{
color: #bbbbbb;
}


#servicemenu span{
color:#ffffff;
}

#taalmenu {
	height: 20px;
	border: 0px solid red;
}

#social_media_mnu {
	xposition: absolute;
	xz-index: 100;
	height: 40px;
	width: 160px;
	
	margin-top: 42px;
	margin-right: 33px;
	
	float: right;
	border: 0px solid pink;
	}

#social_media_mnu div {
	float: right;
	margin-right: 15px;
	
	height: 25px;
	width: 25px;
	
	opacity: 0.4;
    filter: alpha(opacity=40);
	
	
	border: 0px solid red;
	}

#social_media_mnu div:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}	
	
#social_media_mnu div.facebook {
		background: url('../media/facebook_logo.gif') no-repeat;
}
#social_media_mnu div.twitter {
		background: url('../media/twitter_logo.gif') no-repeat;
}
#social_media_mnu div.linkedin {
		background: url('../media/linkedin_logo.gif') no-repeat;
}
#social_media_mnu div.flickr {
		background: url('../media/flickr_logo.gif') no-repeat;
}
	

#hoofdmenu {	
clear: both;
margin:0; 

list-style: none;  		
padding: 9px 27px 0 27px;	
color: #535353;	

border: 0px solid gold;
	
}

#hoofdmenu li{	
list-style: none;  	
float:left;
margin:0 30px 0 0;	
padding:0;

}


#hoofdmenu .active span,
#hoofdmenu .active a{
color:#ffffff;
}



	


/*--------- FOTOGRAFIE -----------*/


/*--------- SUBNAVIGATIE ETC -----------*/



#submenublock {	
float: left;
clear:left;
width: 215px;
margin-bottom:50px;
}

#submenublock h2{
margin: 25px 22px 12px 22px ;	
}

#submenu{
margin: 0 22px 25px 22px ;
}


#submenu li{
list-style-type:none;	

line-height:28px;
}

#submenu a:hover{
text-decoration:none;	
}

#submenu .active{
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:14px;
margin-left:-14px;
color:#B3B3B3;
}

#submenu .active a{
color:#B3B3B3;
}

/*-------- HOMEPAGE ----------*/

#contenthome {
background-color:#222222;
height: 550px;
border: 0px solid green;
padding-left:0px;

}


#homepageonderkant {
background:#222222;
height: 182px;
border: 0px solid green;
padding-left:0px;
margin-top:3px;
}

#laatstefoto {
width: 500px;
padding-top: 39px; 
padding-left: 25px;
float: left;
border: 0px red solid;
}

#laatstefototxt {
width: 365px;
float: left;
border: 0px green solid;
}

#laatstefototxt > h4 {
width: 400px;
}


#laatstefototxt > a{
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:20px;
}

#laatstefototxt > a:hover{
color: #ffffff;
text-decoration: none;
}

.fotobox75 {
display:block;
display:table;
float:left;
width:102px;
height:102px;
border:1px solid #444444;
clear:none;
margin-right:22px;
margin-bottom:11px;
*position:relative;	/*IE6 + 7*/
}

.fotobox75 a{
display:block;
display:table-cell; 
vertical-align: middle;
*position:absolute;	/*IE6 + 7*/
*top: 50%;			/*IE6 + 7*/
}

.fotobox75 img{
margin: 0 auto;
*position:relative; /*IE6 + 7*/
*top: -50%;			/*IE6 + 7*/
}

.fotobox75:hover{
border-color:#888888;	
}


#laatstenieuws {
float: right;
width: 450px;
padding-top: 39px; 
padding-left: 20px;
border: 0px red solid;
}

#laatstenieuwstxt {
width: 400px;
}


#laatstenieuwstxt > a{
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:20px;
}

#laatstenieuwstxt > a:hover{
color: #ffffff;
text-decoration: none;
}


/*--------- INHOUD -----------*/

.inleiding {
color: #ffffff;
}

#inhoud{
overflow:hidden;
position:relative;	
padding-bottom:28px;
}

#content {
border: 0px solid green;
margin-left:240px;
}

#kol1 {	
margin:12px 0 30px 0;
border: 0px solid blue;	
overflow:hidden;
}

.detail #kol1{
margin-top:30px;	
}

.detail #kol1 img{
display:block;
}

#kol1 ul{
list-style: disc outside;	
}

#titleblock {	 		
border: 0px solid green;
margin:0 35px 12px 0;
}

#inleiding{
color:#ffffff;	
}

#inleiding, .tekstinhoud{
margin-right:253px;
}

.categorie #inleiding, 
.categorie .tekstinhoud{
margin-right:0;
}

img + .tekstinhoud{
margin-top:20px;	
}

.foto_item{
clear:both;
overflow:hidden;
margin-bottom:60px;	
}

.fotobox{
display:block;
display:table;
float:left;
width:130px;
height:130px;
border:1px solid #444444;
clear:none;
margin-right:30px;
margin-bottom:30px;
*position:relative;	/*IE6 + 7*/
}

.fotobox:hover{
border-color:#888888;	
}

.fotobox a{
display:block;
display:table-cell; 
vertical-align: middle;
*position:absolute;	/*IE6 + 7*/
*top: 50%;			/*IE6 + 7*/
background: url('../media/space.gif') left top repeat;
outline:none;
}

.fotobox img{
margin: 0 auto;
*position:relative; /*IE6 + 7*/
*top: -50%;			/*IE6 + 7*/
}

.foto_item p, .foto_item h3{
float:left;
width:503px;

}

.foto_item h3{
margin-top:15px;
}

.foto_item > a{
display:block;
clear:left;
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:20px;
}


#socialblock {
	
	margin-top: -20px;
	
	width: 540px;
	height: 30px;
	border: 0px solid gold;
}

#socialblock div {
	float: right;
	margin-right: 15px;
	
}


#googleadvertentieblock {
	position: absolute;
	right: 0px;
	top: 30px;
	width: 210px;
	height: 210px;
	
	
	
	border: 0px solid gold;
}

#googleadvertentieblock2 {
	position: absolute;
	right: 0px;
	top: 240px;
	width: 200px;
	height: 60px;
	
	font-size: 11px;
	
	border: 0px solid gold;
}

#hersenspinselsnotice {
	position: absolute;
	right: 0px;
	top: 30px;
	width: 210px;
	
}
#hersenspinselsnotice.wallpaper {
	top: 300px;

}

#hersenspinselsnotice p {
	font-size: 14px;
	padding: 15px;
}

DIV.hsptoggle {
	width: 185px;
	margin-left: 13px;
	xbackground-color: red;
	
	font-family: 'Lane-Narrow', sans-serif;
	font-size: 18px;
	color: white;
}

DIV.hsptoggle > a > b {
	font-family: verdana, sans-serif;
	font-size: 10px;
	letter-spacing:-1px
}

#hsp_notice {
	display: none;
}

h1{
padding: 25px 0 3px 0 ;	
}

#subcatfotolijst{
margin-top:20px;
width:540px;
float:left;	
}


#catfotolijst{
margin-top:75px;
width:204px;
float:right;	
}

#catwalllijst{
margin-top:20px;
width:500px;
float:left;

border: 0px solid red;	
}

#side{


margin-top:0;
width:165px;
margin-right:20px;
float:right;	
}

#side span{

}

#catfotolijst > a{
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:20px;
}

#side > a{
background: url('../media/next-icon.gif') left 60% no-repeat;
padding-left:20px;	
margin-bottom:20px;
display:block;
}


p.small {
	color:#535353;	
}

#content.categorie{
margin-right:253px;
position:relative;
}

.detail #kol1{


width: 520px;
min-height:520px;
padding-left: 20px;
padding-top: 20px;
position:relative;


x		border: 1px dotted #333;
		background-color: #333;
}

#grotefoto {
	height: 500px;
	width: 500px;
	
	display: table-cell;
    vertical-align: middle;
	
	

}

#grotefoto img {
	margin-left: auto;
    margin-right: auto;

	z-index: -1;
	
	-moz-box-shadow: 2px 1px 5px 0px #111;
	-webkit-box-shadow: 2px 1px 5px 0px #111;
	box-shadow: 2px 1px 5px 0px #111;
	
}

#grotefotovorige {
	position: absolute; 
	top: 0px; 
	left: 0px;
	
	width: 150px;
	height: 538px;

	background: url('../media/nosuch.gif') center 45% no-repeat;
	border: solid gold 0px;
}

#grotefotovolgende {

	position: absolute; 
	top: 0px; 
	left: 390px;
	
	width: 150px;
	height: 538px;
	background: url('../media/nosuch.gif') center 45% no-repeat;
	border: solid gold 0px;
	

}


#grotefotoarrowprevious {
display: none;
position: absolute; 
top: 250px; 
height: 45px;
width: 50px;



border-top-right-radius: 8px 8px;
border-bottom-right-radius: 8px 8px;



background: url('../media/scroll-left.gif') center 45% no-repeat;
background-color: #000000;

}

#grotefotoarrownext {
z-index:200;

display: none;
position: absolute; 
top: 250px; 
right: 0px;

height: 45px;
width: 50px;


border-top-left-radius: 8px 8px;
border-bottom-left-radius: 8px 8px;



background: url('../media/scroll-right.gif') center 45% no-repeat;
background-color: #000000;
}


#grotefotovorige:hover div{
display: block;
	
}

#grotefotovolgende:hover div{
display: block;
	
}

.detail #imgwrap{
}

.detail #kol1 img{

float: center;
text-align:center;

}

.detail #inleiding,
.detail .tekstinhoud{
margin-right:0;	
}

.onderschrift{
display:block;
text-align:center;
margin-bottom:20px;
padding:10px 40px 0 40px;	
}



.detail #kol1extended {

width: 520px;

padding-left: 20px;
padding-top: 0px;
position: relative;



}

#kol1extended > div {
	width: 500px;
}


/*--------- PAGING ---------*/

#pagingbar {
	
	clear: both;
}

/*--------- FORMULIER ---------*/

td.form-labelcell {
	min-height: 25px;
	min-width: 100px;
	padding: 5px;
}
td.form-elementcell {
	min-height: 25px;
	min-width: 300px;
	padding: 5px;
}

span.form-verplicht {
	color: red;
}
table  input {
	height: 25px;
	width: 300px;
	
	padding: 3px;
	
	font-size: 14px;
	font-family: verdana;
}

table  textarea {
	width: 300px;
	
	padding: 3px;
	
	font-size: 14px;
	font-family: verdana;
}

table input.submitter {
	width: 310px;
}

/*--------- FOTOBALK ----------*/

#onderkant{
border-top:3px solid black;
border-bottom:3px solid black;
background:#222222;
border-left:1px solid #1a1a1a;
border-right:1px solid #1a1a1a;
position: relative;
padding:30px 70px 30px 68px;
}

#fotobalk{
overflow:hidden;	
background:#222222;
position: relative;
z-index:3;
clear:both;
}

#fotobalkwrap{
width:9999px;	
}

.fotoitem{
display:block;
display:table;
float:left;
width:100px;
height:100px;
border:1px solid #444444;
margin-right:6px;
margin-bottom:0;
*position:relative;	/*IE6 + 7*/

}


.fotoitem.laatste{
margin-right:7px;	
}

.fotoitem:hover{
border-color:#888888;	
}

.fotoitem a{
display:block;
display:table-cell; 
vertical-align: middle;
*position:absolute;	/*IE6 + 7*/
*top: 50%;			/*IE6 + 7*/
}

.fotoitem img{
/* width:75px; JA HALLO! ZO WERKT DE IMG RESIZE NIET NATUURLIJK! */
margin: 0 auto;
*position:relative; /*IE6 + 7*/
*top: -50%;			/*IE6 + 7*/
}

#scroll_navigation{
position:absolute;	
bottom:30px;	
width:100%;
left:0;
height:102px;
}

.arrow{
display:block;
position:absolute;
width:70px;
height:100px;
}

.arrow.previous{
left:0px;
*left:30px;
background: url('../media/scroll-left.gif') center 45% no-repeat;
}

.arrow.next{
right:0px;
*right:30px;
background: url('../media/scroll-right.gif') center 45% no-repeat;
}

.arrow a{
position: relative;
display:block;
width:70px;
height:100px;
text-indent:-9999px;
outline:none;
}

#status_wrapper{

}

/*--------- FOOTER -----------*/

#footerblock {
height:40px;	
padding-top: 15px;
padding-right: 25px;
text-align: right;
clear:both;
background:#000000;	
}

.footercontent {
font-size: 10px;
text-transform: uppercase;

}