/*MAIN STYLES*/

/* Reset styles */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li,
fieldset, form, label, legend,
table, caption, tbody, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: top;
}

* {
	margin:0;
	padding:0;
	border: 0px;
}

body {
	width:100%;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px; 
	font-weight: normal;
	line-height: 22px;
	letter-spacing: 0px; 
	/*text-align:center;*/
	color:#7f7f7f;
	background-color:#fff;
}

#wrapper{
	width:100%;
	max-width:890px;
	height: 100%;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	position:relative;
	background-color:#fff;
	/*background-image: url('../images/bg_wrapper_shadow.png');
	background-position: center;
	background-repeat: repeat-y;
	*/	
}

#header {
	height: 215px;
	/*width: 890px;*/
	width: 100%;
	margin: 45px 0px 10px 0px;
	/*background-color:#FFF;*/
	text-align: left;
	position: relative;
}

.logo {float: left;}

.logotekst {margin: 55px 0 0 3%; float: left;}

#snelmenu {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 1001
}

#breadcrumbPosition {
	/*position:absolute; 
	bottom: 0px; 
	left: 336px*/
}

#breadcrumb {
	background-color: #fff;
	margin: 0px 10px 10px 3%;
	font-size: 10px;
	float: left;
}

#topMenu {
	margin: -4px 0px 0px 0px;
	padding: 0px;
	width: 100%;
	position: relative;
}


.whitespace {clear: both}
/*#columnLeftIndex .whitespace {margin: 0px 0px 10px 0px;}
#columnMainIndex .whitespace {margin: 0px 10px 10px 20px;}*/
/*#columnRightIndex .whitespace {margin: 20px 10px 10px 10px;}*/

/*Kolommen Vervolg*/
#columnLeft {
	background-color: #fff; 
	float: left; 
	/*width: 325px;*/
	width: 37%;
	/*margin: 10px 10px 0px 0px;*/
	margin: 10px 0 0 0 
	text-align: right;
	padding-bottom: 10px; /*Moet minimaal een padding van 1px hebben anders schuift main naar links als columnLeft leeg is*/
}

#columnLeft .artikel {text-align: left;}

#columnMain {
	background-color: #FFF; 
	float: left; 
	/*width: 552px; */
	width: 61%;
	/*margin: 0px 0px 0px 3px; */
	margin: 0 0 0 2%;
	text-align: left;
	padding-bottom: 10px;
}

/*#columnRight {
	background-color: #FFF; 
	float: left; 
	width: 190px;
	margin: 10px 0px 0px 0px;
	text-align: left;
	padding-bottom: 10px;
}*/

#columnLeft .whitespace {margin: 0px 0px 10px 0px;}
#columnMain .whitespace {margin: 20px 0px 10px 0px;}
/*#columnRight .whitespace {margin: 20px 10px 10px 10px;}*/

#footer {
	clear: both;
	margin: 10px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	border-top: 1px solid #ccc;
}

#footerShadow {
	display: none;
	/*width: 1020px;
	height: 10px;
	background-image: url(../images/template1/bg_shadow_footer.png);
	background-repeat: repeat-x;
	background-position: bottom;
	text-align: center;
	margin: 0px auto;*/
}

/*IMG bij ARTIKEL*/
.imgFloatR {float: right; margin: 0px 0px 12px 8px;}
.imgFloatL {float: left; margin: 0px 8px 12px 0px;}

img {
	border:0px;
}

.img100 {width: 100%}

p {
	/*margin:0px;*/
	margin: 0px 0px 15px 0px;
}

form p {margin: 0px}

hr {
	border: 1px solid #eeeeee;
	margin:5px 0px 5px 0px;
	clear:both;
}

.clr {
	clear:both;
  height:0px;
  padding: 0px;
  font-size: 0px; 
  line-height: 0px; 
}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.flL {float: left}

/*HEADERS*/

/*#indexIntro h1 {
	font-size: 35px; 
	line-height: 35px; 
	color:#FFF; 
}
*/

h1, .artikel h2 {
	font-size: 12px;
	line-height: 1.3em;
	letter-spacing: 1px;
	color:#0039a6;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
}

h2{
	font-size:12px;
	line-height: 12px;
	letter-spacing: 1px; 
	color:#656565;
	font-weight: bold;
	margin: 20px 0px 0px 0px;
	text-transform: uppercase;	
}

h3{
	font-size:10px;
	line-height: 10px;
	color:#656565;
	font-weight: bold;
	margin: 0px 0px 6px 0px;
	text-transform: uppercase;	
}

#columnLeft H2, #columnRight H2 {xfont-size:10px;} /*H2 in zijcolumn is qua grootte gelijk aan een h3 in maincolumn*/

/*LINKS*/

a, a:link	{
  color: #0039a6;	
	text-decoration:none;
}

a:visited {
  color: #0039a6;
	text-decoration:none;
}

a:hover  {
  color: #0039a6;	
	text-decoration: underline; 
}

a:active  {
  color: #0039a6;
	text-decoration:underline;
}

/*LIST*/

ol{
margin: 0px 0px 15px 22px;
padding: 0px;
}

ol li {
	margin: 0px;
	padding: 0px;
	padding-left: 0px;
}

ul {
margin: 0px 0px 15px 20px;
padding: 0px;
list-style: disc;
}

/*
ul li{
	margin: 0px;
	padding: 0px;
	background: url(../images/bullet.gif) no-repeat 0px 8px;
	padding-left: 12px;
}*/


.whitespace ul {
margin: 0px 0px 15px 10px;
padding: 0px;
list-style: none;
}

.whitespace li{
	margin: 0px;
	padding: 0px;
	background: url(../images/bullet.gif) no-repeat 0px 10px;
	padding-left: 12px;
}

.whitespace ol li {
	background: none; 
	padding-left: 0px;
	margin-left: 10px
}

/*FAQ of Tekst in uitklap*/

.vraag {
	margin: 0px 30px 0px 20px;
	background: #FFF url(../images/arrow.gif) no-repeat 0px 5px;
	padding-left: 12px;
	font-weight: normal;
}

.antwoord {
	margin: 5px 20px 10px 32px;
	padding: 5px 10px 10px 10px;
	border: 1px solid #ccc;
}


/*NIEUWS*/

.datum {
	color:#999; 
	font-style: italic;
	margin-bottom: 5px;
}

.nieuwsOverzicht {
	clear: both;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eeeeee;
}

.nieuwsOverzicht .imgNieuwsArtikel {
	margin: 5px 15px 10px 0px;
	float: left;
}

.nieuwsArtikel .imgNieuwsArtikel {
	margin: 5px 10px 15px 15px;
	float: right;
}

/*Niewslist style is gelijk aan algemene list, kan eventueel worden aangepast*/
.nieuwsLijst ul {margin: 0px 0px 0px 15px; padding: 0; list-style: disc;}
.nieuwsLijst li {margin: 0px;	padding: 0px;}



/*POLL*/ 
.poll {
	background-color: #efefef;
	padding: 10px; 	
}

/*poll vragen*/

.pollOption /*Container om 1 optie radio + tekst*/{
	clear: both;
}

.pollRadio {
	float: left;
	margin: 4px 0px 0px 0px;
	width: 25px;
}

.pollOptionText {
	margin: 4px 0px 0px 0px;
}

.pollResultBarContainer {
	margin-top: 0px;
	background-color: #D5D5D5;
	xwidth: 167px;
	width: 100%;
	border: 1px solid #FFF; 
}

/*pollresultaten*/

.pollResultBar {
	height: 15px;
	background-color: #002951;
}

.pollResultText {
	width: 100%;
}

.pollResultNumber {
	color: #bb0000;
	margin: 0px 0px 15px 0px;
	text-align: left; /*kan ook right*/
}

/*Buttons - Ook voor formbuilder*/

.ButtonNormal {
	background-color: #0039a6;
	color: #FFFFFF;
	border: 1px solid #0039a6;
	padding: 2px 4px 1px 4px;
	font-weight: bold;
	margin-top: 15px;
	clear: both;
}

.ButtonHigh, .ButtonNormal:hover {
	background-color: #9db3fb;
	color: #0039a6;
	border: 1px solid #9db3fb;
	padding: 2px 4px 1px 4px;
	font-weight: bold;
	margin-top: 15px;
	cursor:pointer;cursor:hand;
	clear: both;
}

/* google maps */
.googleMap {width:360px; height:300px; border:1px solid #000; }


/*firefox stippellijn fixes*/

a:active{
	outline:none;
}
:focus{
	-moz-outline-style:none;
}


/*autocomplete opties*/

.ac_input{
	margin: 0px;
	padding-left: 4px;
	float:left;
}


.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}

/*ZOEKRESULTATENPAGINA*/

.xsearchKeyword, .xsearchHighlightedKeyword {
	font-weight: bold; color: #000;
}


.xsearchResultsMessageContainer {
	margin-bottom: 10px;	
}

.xsearchNavbarContainer {
	margin: 10px 0px;	
}

.xsearchNavbarContainer a {margin-right: 5px;}

.xsearchResultsContainer {
	margin-bottom:5px;
	border-bottom: 1px solid #DADADA;
}

.xssearchResult {padding: 8px 0px; border-top: 1px solid #DADADA;} 

.searchResultSearchBox {margin: 10px 0px; display: block; padding: 8px 0px; border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA;}
.searchResultSearchBoxInput  {margin-right: 5px; padding: 4px 4px 4px 4px; border: 1px solid #cccccc;}


/*content rotator*/
div #testimonials{
height: 200px;
width: 200px;
}

.contentrotatorContainer {
	height: 200px
}

.slides div{
	max-height:200px;
}

.caption	{
	background-color:#000000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	color: #fff;
	height: 20px;
	/*overflow-y: hidden;*/
	margin: -20px 0px 0px 0px;
	text-align: center;
	font-weight:bold;
	text-decoration:none;
	cursor:pointer;
}

.caption p {
	margin: 0px 5px 0px 5px;
}

/*PHOTO ALBUM  - background*/
.photoAlbumThumb {background-color: #D4EBFF;
}



/* ----- tool tip specific styles ----- */
#theToolTip {
	position: absolute;
	left: -600px;
	width: 340px;
	border: 1px solid #595959;
	padding: 10px 5px 10px 10px;
	background-color: #FFF;
	visibility: hidden;
	z-index: 100;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight:normal;
	font-size: 11px;
	line-height: 15px;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=4);
}

#ToolTipPointer {
	position:absolute;
	left: -600px;
	z-index: 101;
	visibility: hidden;
}

.ToolTipInfoTable {
 table-layout: fixed;
 width: 330px;
}

/* Quote rotator*/
#textRotator {width: 325px; margin: 0px; background-color:#fff;}
#textRotator li.slide {
	background:#fff;
	color: #999999;
	font-family: Verdana, Arial, serif; 
	font-size: 12px; 
	font-style: normal;
	font-weight: bold; 	 
	letter-spacing: 1px; 
	line-height: 24px; 
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;; 
	/*text-align: right;*/ 
	width: 315px;
	height: 170px;	
	list-style-type: none;
	background-image: none;
}
#textRotator .dsplNn {display: none; background:#fff;}
/*blockquote {font-size: 12px; font-family: Verdana, Arial, serif; color: #999999; font-style: normal; margin: 0px; padding: 0px 10px 0px 10px;; font-weight: bold; margin: 0px;}*/
#textRotator ul {margin: 0px 10px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; width: 315px;}


/*NIEWS COMMENTS*/
.comment {margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #ccc}
.comUser {font-size: smaller; color: #0039a6}


/* Vimeo and YouTube iframe player (widget)
================================================== */
/* hack to make the iframe responsive */
.videoIframeWrapper .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoIframeWrapper .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoIframeWrapper {	padding-bottom: 25px;}



/* ===================================================================================================================
#Media Queries 
================================================== */


/* Smaller than 890px (devices and browsers) 
=========================================================*/

@media only screen and (max-width: 890px) { 

#wrapper {width: 92%;}
.logo {width: 36%;  margin: 15px 0 0 2%}
.logotekst {width: 56%; }

#header { height: auto;	margin-top: 0px;}

#textRotator {width: 100%;}
#textRotator li.slide, #textRotator ul {width: 100%}

#columnLeft {width:35%}
#columnMain {	width: 60%; margin: 0 0 0 5%;}

.divImg100 {width: 50%}
.divImg100 img {width: 100%}

}

/* Smaller than 480px (devices and browsers) 
=========================================================*/
@media only screen and (max-width: 480px) { 

body {font-size: 14px}
#wrapper {width: 94%;}
#snelmenu {left: 0px; top: 10px}
.logo {display: none}
.logotekst {width: 96%; margin: 35px 0 10px 0}
#columnLeft {display: none} 
#columnMain {float: none; width: 100%; margin:0}

}