/* site.css --------------------------------------------------------------------

!!! this file should contain only site-wide css defintions !!!

definitions in this file should be extended, or redefined in 'context specific'
css files such as 'pages/<pagename>.css' e.g. 'pages/voorpagina.css'

> menu.css contains all menu related css definitions.
> ie6fix.css contains IE6 specific css definitions and behaviours
> menu_pointer_css.inc is a php stub that dynamically writes css to set
  default menu pointer positions dependent on page id
----------------------------------------------------------------------------- */

html {  /* makes vertical scrollbar appear on all pages */
	min-height: 101%;
	overflow-y: scroll;}

body {
	width: auto;
	margin: 0;
	margin-top: 0;
	padding: 0;
	padding-bottom: 7px;
	background: #000;
	font-family: arial, verdana, sans-serif;}
	
.preload {display: none; visibility: hidden; width: 680px;}

/* -------------------------------------------------------------------------- */
/* ----------- some default settings for links and images ------------------- */ 
a {outline: none; border: 0; text-decoration: none;}
a:link {outline: none; border: 0; text-decoration: none;}
a:hover {outline: none; border: 0; text-decoration: none;}
a:active {outline: none; border: 0; text-decoration: none;}
a:visited {outline: none; border: 0; text-decoration: none;}

a.inlinelink {
	color: #fff;
	border-bottom: 1px solid #7CB43C;}
	
a.inlinelink:hover {	
	color: #7CB43C;}

img {border: 0; outline: none;} 

img.left, img.right { /* float image to left / right of content */
    display: inline;
	position: relative;
	margin: 2px 0px 10px 7px;
	vertical-align: top;}	
	
img.left {float: left;}
img.right {float: right;}

a.imgSplashBtn {    /* site-wide class to attach splash links to images: */
    border: 0px;    /* - do something like: <a class="imgSplashBtn" href="splash_1"> <img src="" alt="" /> </a>  */
    margin: 0px;    
    padding: 0px;
    outline: none;}
	
/* -------------------------------------------------------------------------- */
/* --------------  main page content container ------------- */
#content {
	width: 760px;
	margin: 0px auto -10px auto; /* center on page */
	background: #242424;
	padding: 0px;
	padding-top: 30px;
	font-size: 11px;
	padding-bottom: 0px;
}

/* -------------------------------------------------------------------------- */	
/* --------------- bar at top of page - see 'inc/header.inc' ---------------- */
#top_infobar {
	display: block;
	width: 650px;
	height: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: bold;
	font-size: 8pt;
	color: #ccc; /* center on page with 10px at bottom */
	background: #000;
	padding: 15px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
	
.site_name {
	float: left;
	display: inline;}
	
.updated {	
	float: right;
	display: inline;
	margin-right: 0px;} /* margin-right: 15px; - if language select links displayed in header */
	
.language {
  vertical-align: middle; 
	height: 11px;
	float: right;
	display: inline;}
	
.language a {border: 0; outline: none;}
	
.flag {border: 0; vertical-align: bottom; height: 8px; padding-left: 2px; margin-bottom: 3px;}

/* -------------------------------------------------------------------------- */
/* -------------------- flash stuff : default styles ------------------------ */
.getflash { /* alt content if user has no flash */ 
  display: block;
  position: relative;
	top: 0px;
	left: 0px;}

/* -------------------------------------------------------------------------- */	
/* --------------------------- black content blocks ------------------------- */
/* [ menu block contains .sub_block_left + .sub_block_right e.g. on the homepage ] */
.content_block, .menu_block, .contact_block, .blank_block, .category_header {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #9CCE2E;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 10px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}
.pdg-bt-no {padding-bottom: 10px;}		

.contact_block {
	padding-bottom: 5px;
}
	
.blank_block { /* just a basic block with no padding and no background - */
	width: 680px;
	padding: 0px;
	font-family: arial, verdana, sans-serif;
}
	/*
.content_block p {
	padding: 0px 10px 0px 10px;
	font-family: Stencil, Arial, Impact;
}  <p> tags inside .content_block */
	
.category_header { /* text and pic block at top of /organisatie/, /werkwijze/ etc.. */
    height: 175px;
    padding-bottom: 0px;}
	
.category_header .text {	
    display: block;
	float: left;
	width: 305px;	
	color: #fff;
    font-size: 13px;
	font-family: Arial;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 19px;
	text-align: left;
	background: transparent;
	padding: 10px;
	padding-top: 18px;
    margin: 0px;}
	
		
/* -------------------------------------------------------------------------- */
/* simple left / right black boxes, 
	 use like this: 
              <div class="blank_block">
                <div class="left_block">
              	  content
                 </div>
                <div class="right_block">
              	  content
                 </div>
              </div>
*/
.left_block, .right_block, .left_block_nav, .right_block_nav {
	display: block;
	float: left;
	width: 295px;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	background: #000;
	padding: 20px;
	margin: 0px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
	
.right_block, .right_block_nav {
	position: relative;
	top: 0px;
	left: 10px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	background-color: #000000;
}	
	
/* --------------------- .content_block elements ---------------------------- */

/* ---------- content block title + link -------- */
h1 {
	color: #ffff00;
	font-size: 16px;
	font-weight: bold;
	font-family: Arial;
	text-align: left;
	margin: 0px;  
	padding: 7px 9px;}	
	
.titlelink {
  display: block;			
	text-decoration: none; 
	outline: none;
	width: 300px;
	color: #F7AE16;
	cursor: pointer;
	font-family: stencil;
	font-size:24px;
	}

.h1sub {
	display: block;
	padding-left:  2px;
	color: #fff;
	font-size: 11px;
	font-family: Arial;
	font-weight: bold;
	text-decoration: none; 
	outline: none; }
		
.titlelink:hover {
	color: #F7AE16;
}		
	
.titlelink:hover .h1sub {
  color: #ffff00;}
/* -------------------------------------------------------------------------- */

/* ------------ content items (e.g. six blocks inside black box) ----------- */
.blockrow {
	clear: both;
	margin: 0px;
	padding: 0px;
	background: none;}
		
.blockrow a {
	text-decoration: none;
	outline: none;
	cursor: pointer;
	color: #6EBC2E;
	font-size: 11px;
	font-family: Cracked, Stencil, Arial, Impact;
	line-height: 14px;
	text-align: left;
	padding: 0px;
}
	
.blockrow a:hover, .blockrow a:active, .blockrow a:focus, .blockrow a:visited {
	outline: none;
}

/* ----------- front page sub_blocks [ place inside .menu_block ] ----------------- */
.sub_block_left, .sub_block_right {
	display: block;
	float: left;
	width: 325px;
	padding: 0px;
	margin-top: 5px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
	
.sub_block_right {
  position: relative;
	top: 0px;
	left: 10px;}	

/* .bc is the conatiner that provides the rollover border */
.bc {
  display: block; 
  border: solid 1px #000;
	padding: 10px;
	padding-right: 0px;}

.bc:hover {
	border: 1px solid #888;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
	
.sub_block_left img, .sub_block_right img {border: 0px;}

.bc .thumb { /* thumbnail images */
  display: block;
  float:left;
	width: 100px;
	height: 65px;
	margin: 0px;
	margin-right: 10px;}

h2, .h2title, .h2block, .h2block_u, .h2inline, .h2wht {	 /*  title - content items  */
	color: #ffff00;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	text-align: left;
	padding: 0px;
	margin: 0px;}
	
.h2wht { /* comms block title (voorpagina) */
  display: block; 
	font-family: Arial;
	font-size: 13px;
	padding-top: 6px;
	padding-bottom: 8px; 
	text-align: center; 
	color: #fff;}	
	
.h2inline {	 /* title - h2 in text blocks e.g. wiewezijn  */
  display: block;
	margin: 15px 0px 7px 0px;}	

/* -------------------------------------------------------------------------- */	
/* ------------------  text for menu blocks ----------------- */
.c_text {
	display: block;
	width: 200px;
	height: 65px;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	color: #9CCE2E;
	overflow: hidden;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}	
	
.newsdate {	 		/*  date - news items  */
	display: block;
	color: #C3BB1F;
	font-size: 18px;
	line-height: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: 0px;
	padding: 0px;
	padding-bottom: 4px;}
	
.h2block, .h2block_u {	 /* title - news items, project descriptions etc  */
  display: block;
	font-size: 11px;
	color: #C3BB1F;
	line-height: 12px;
	padding: 0px;
	margin-bottom: 4px;}
	
.h2block_u {	 /* title - project descriptions etc - with underline  */
	width: 195px; 
  padding: 0px 0px 4px 1px;
	border-bottom: 1px solid #333;
	margin-bottom: 8px;}
	
/* set rollover for .h2block and .h2block_u */
.sub_block_left:hover .h2block, .sub_block_left:hover .h2block_u, .sub_block_right:hover .h2block, .sub_block_right:hover .h2block_u {
    color: #7CB43C;}
			
/* -------------------------------------------------------------------------- */
/* Gerelateerde showcase link e.g. at bottom of right col on MIDDEN- EN KLEINBEDRIJF */
.showcase_link {
    display: block;
	position: relative;
	float: left;
	width: 405px;
	padding: 0px;
	margin: 0px;
	margin-top: 25px;
	margin-bottom: 20px;}

.showcase_link .txt {
    display: block;
	color: #333;
	font-family: Arial;
	font-size: 13px;
	padding: 0px;
	margin: 0px;
	padding-bottom: 1px;}
	
.showcase_link a.btn {
    position: relative;
    float: left;
    height: 21px;
    border: solid 1px #666;
    color: #666;
    font-family: Arial;
    font-size: 13px;
    text-align: center;
    line-height: 19px;
    padding: 2px;
	padding-left:15px;
	padding-right:15px;
    margin: 5px;
    margin-bottom: 0px;
    margin-left: 0px;}
	
.showcase_link a.btn:hover {
	border: solid 1px #7CB43C;
	color: #7CB43C;} 
	
/* -------------------------------------------------------------------------- */
/* 1st (when 2 are used) Gerelateerde showcase link e.g. at bottom of right col on MIDDEN- EN KLEINBEDRIJF (without top margin)*/
	
.showcase_link2 {
    display: block;
	position: relative;
	float: left;
	width: 405px;
	padding: 0px;
	margin: 0px;
	margin-top: 0px;
	margin-bottom: 20px;}

.showcase_link2 .txt {
    display: block;
	color: #333;
	font-family: Arial;
	font-size: 13px;
	padding: 0px;
	margin: 0px;
	padding-bottom: 1px;}
	
.showcase_link2 a.btn {
    position: relative;
    float: left;
    height: 21px;
    border: solid 1px #666;
    color: #666;
    font-family: Arial;
    font-size: 13px;
    text-align: center;
    line-height: 19px;
    padding: 2px;
	padding-left:15px;
	padding-right:15px;
    margin: 5px;
    margin-bottom: 0px;
    margin-left: 0px;}
	
.showcase_link2 a.btn:hover {
	border: solid 1px #7CB43C;
	color: #7CB43C;} 

/* ----------------------- splash box layout -------------------------------- */
#splash {
    display: block;
    visibility: hidden;
    z-index: 1005;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #212121;
    opacity: 0.9; /* all other browsers */
    -moz-opacity: 0.9; /* mozilla */
    filter: alpha(opacity=90); /* IE 5 - 7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
    cursor: pointer;
    padding: 0;
    margin: 0px;}

#splash_container {
    display: block;
    visibility: hidden;
    z-index: 1006;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 680px;
    height: 525px;
    cursor: pointer;
    margin: 0px;
    margin-left: -340px;
    margin-top: -263px;
    padding: 0;}

#splash_container .wrapper {
    display: block;
    position: absolute;
    width: 680px;
    height: 525px;
    margin: 0px;
    padding: 0;}

.splash_header {
    display: block;
	position: absolute;
    top: -40px;
    z-index:1010;
    width: 680px;
	height: 35px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-family: Arial;
    font-weight: normal;
    line-height: 19px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;}

.splash_header .text {
	position: relative;
    top: 7px;
    left: 15px;}

.splash_box {
	display: block;
	position: absolute;
    width: 680px;
	height: 480px;
	padding: 0px;
	margin: 0px;
	color: #fff;
    background: #000;
    text-align: center;
    /*overflow-y: scroll;*/}

.splash_box img {
	padding: 0px;
	margin: 0px;
    border: 0px;}

/*
a.terug {
    display: block;
    float: right;
    width: 112px;
    height: 35px;
    color: #fff;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    background: #000;
	cursor: pointer;}
*/
/* -------------------------------------------------------------------------- */
   
/* -------------------------------- footer ---------------------------------- */
.footer {
	display: block;
	margin: 10px auto 15px auto;
	width: 680px;
	height: 28px;
	background: #000;
	color: #ccc;
	font-size: 11px; 
	line-height: 12px;
	font-family: arial;
	text-decoration: none;
	text-align: center;
	padding: 15px 0px 0px 0px;}
	
.footer .copy	{
	position: relative;
	top: 1px;
	left: -1px;
	font-size: 13px;}
	
.footerlink {
  text-decoration: none; 
	color: #ccc; 
	font-weight: bold; 
	outline: none;}

.footerlink img {
	position: relative;
	top: 1px;
	left: 0px;
	border: 0;}
/* -------------------------------------------------------------------------- */

	
.stencil {
	font-family: stencil;
	color: black;
	text-align: center;
	font-size: 24px;
	background-color: #588E03;
	padding-bottom: 10px;
	padding-top: 12px;	
}

.stencilpubcrawl {
	font-family: stencil;
	color: #FFFFFF;
	text-align: center;
	font-size: 24px;
	background-color: #A60000;
	padding-bottom: 10px;
	padding-top: 12px;	
}
	
.content_blockpubcrawl {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #FF0000;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 20px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}
	
.stencilbus {
	font-family: stencil;
	color: #FD7BF7;
	text-align: center;
	font-size: 24px;
	background-color: #A5059E;
	padding-bottom: 10px;
	padding-top: 12px;	
}

.content_blockbus {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #FD7BF7;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 20px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}

.stencilstreetart {
	font-family: stencil;
	color: #FFFFFF;
	text-align: center;
	font-size: 24px;
	background-color: #FF6666;
	padding-bottom: 10px;
	padding-top: 12px;
}


.content_blockstreetart {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #FF6666;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 20px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}

.stenciltwilight {
	font-family: stencil;
	color: #8295F8;
	text-align: center;
	font-size: 24px;
	background-color: #330066;
	padding-bottom: 10px;
	padding-top: 12px;
}


.content_blocktwilight {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #CC33CC;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 20px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}

.stencilspecial {
	font-family: stencil;
	color: #FFFF00;
	text-align: center;
	font-size: 24px;
	background-color: #61B4CF;
	padding-bottom: 10px;
	padding-top: 12px;
}


.content_blockspecial {
	display: block; /* dont add 'position: relative;' - messes up IE6 : child elements of positioned <div>s are not clickable */
	width: 660px;
	margin: 10px auto;
	color: #FFFF00;
	font-size: 10pt;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding: 20px;
	padding-bottom: 25px;
	background-color: #000;
	text-align: left;
}