/*
	Reset
*/

body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }

/*
	Clearfix
*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	zoom: 1; /*height: 1%;*/
}

/*
	General
*/

@font-face {
    font-family: 'bebas_neueregular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html {
		overflow-x: hidden;
	/*overflow-y: scroll;*/
		}
body {
	font-family: 'Nunito', Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #444444;
	background: #ffffff url(/img/bg.jpg) center top no-repeat;
	background-repeat:repeat-x;
	font-weight:300;
	overflow-x: hidden;
	

}


/* Typography */

p {
	padding: 0 0 12px 0;
	
}




strong, th, thead td, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

/* Headings */

h1 {
	font-family: 'bebas_neueregular';
	font-weight: 300;
	font-size:34px;
	padding-top:50px;
	line-height:38px;
	color: #cfaa00;
	padding: 0 0 12px 0;
	font-weight:normal;
	color: #000000;
}

h2 {
	font-weight: 300;
	font-size:22px;
	color:#666;
	padding: 0 0 12px 0;
}
a.newstitle{
	font-weight: 300;
	font-size:22px;
	color:#666;
	text-decoration: none !important;
	line-height:22px;
}
.date{font-size:12px; line-height:12px; color:#000000; font-weight:200;}

h3 {
	font-size: 14px;
	padding: 0 0 12px 0;
}

h4 {
	font-size: 12px;
	padding: 0 0 12px 0;
}
h6 {
	font-weight: 300;
	font-size:22px;
	color:#FD0;
	padding: 0 0 12px 0;
}
/* Links */

a {
	color:#cfaa00;
	border-color:#cfaa00;
}

a:link {
	color:#cfaa00;
	border-color:#cfaa00;
}

a:visited {
	color:#cfaa00;
	border-color:#cfaa00;
}

a:hover {
	color:#cfaa00;
	border-color:#cfaa00;
}

a:active {
	color:#cfaa00;
	border-color:#cfaa00;
}

/*
	Page structure and layout
*/



#wrapper {
	width: 980px;
	position: absolute;
	float:left;
	left:50%;
	margin-left:-490px;
	display:inline;
	background-repeat:no-repeat;
	padding-top:8px;
}
/*#language {
	position:absolute;
	width: 75px;
	margin: 0 auto;
	top:0px;
	left:50%;
	margin-left:425px;
	border: 1px solid #cfaa00;
	background-color: #ffffff;
}
#language ul li {
	float: left;
	padding: 10px 10px 10px 10px;

}
#language ul li {
	text-transform:uppercase;
	
}
#language ul li a{
	border-bottom: none;
	color: #cccccc;

}
#language ul li a:active{
	border-bottom: none;
	

}
li#activeLanguage a{
	color: #eb4b17 !important;

}*/

	/* Header */
	
#header{
	width: 980px;
	height:160px;

	
	
	}	

	/* Logo */

a#votechlogo{
		display:inline;
		float: left;
		margin-top: 0px;
		margin-left:13px;
		background-image:  url(/img/votech_logo.png) ;
		width: 215px;
		height:95px;
	
		
		}
	#defineheaderdivhere h1 a {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
	}

	/* Navigation */
	
	
	
	#menu ul {
	float:right;

	text-align:right;

	
}
.nieuwsbericht{
	width:100%;
	border-bottom: 2px dotted #ccc;
	overflow: hidden;
        display: inline;
        float: left;
        margin-bottom:20px;
	}
        div.kolom1{
		display: inline; 
		width:300px;
		float:left;
		margin-left:0px;
                overflow: hidden;
            

		}
                div.kolom2{
		display: inline; 
		width:600px;
		float:left;
		margin-left:30px;
                overflow: hidden;
            
		}
                  @media screen and (max-width: 700px) {  
                div.kolom1{
		display: inline; 
		width:auto;
		float:left;
		margin-left:0px;
                overflow: hidden;
            

		}
                div.kolom2{
		display: inline; 
		width:auto;
		float:left;
		margin-left:30px;
                overflow: hidden;
            
		}}

#menu ul li {
	float: left;
	margin-top:10px;

}
#menu ul li a {

	padding: 5px 10px 5px 10px;
	
	font-size: 16px;
color: #cccccc;
border-bottom: none;
text-decoration:none;
margin-right:4px;
margin-bottom:4px;
border-radius: 8px;
}
#menu ul li:last-child  a{
background-color: #Fd0;
color: black;
}
#menu ul li:last-child:hover  a{
color: #cccccc;
}
#menu ul li:nth-last-child(5)  a{
background-color: #F00;
color: #cccccc;
 -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
#menu ul li:nth-last-child(3) a {
   
    background-color: green;
    color: #cccccc;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:#F00; }

    50%  {background-color:#3D3D3D; }
  
    100% {background-color:#F00; }
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:#F00; }

    50%  {background-color:#3D3D3D; }

    100% {background-color:#F00; }

}
#menu ul li:nth-last-child(2):hover  a{
color: #cccccc;
}
#menu ul li#active a{
	background-color:#515151;
	color: #ffffff;	
	
}
#menu ul li a:hover{
	background-color:#515151;
	
}

	

	/* Content */


	#inleiding{
		
		display: inline; 
		width:300px;
		float:left;
		}
	
	


.inhoud {
	padding: 20px 0px 20px 0px;
	width: 990px;
	
	float:left;

		
}

.inhoud p {
	padding: 0 0 20px 0;
	line-height:20px;
	
}

div.kolom{
		display: inline; 
		width:460px;
		float:left;
		margin-left:60px;

		}

	/* 
 */
 
 

a.blocklink{
	width: 300px;
	height:215px;
	padding:10px;
	background-color: #eee;
	float:left;
	margin-right:10px;
	margin-bottom:20px;
	font-family: 'bebas_neueregular';
	color: black;
	text-decoration:none;
	font-size:26px;
	line-height:30px;
	}
a.blocklink:hover{
	background-color: #FD0;
	}

#footer{

	width: 100%;
	color: #ffffff;
	font-size: 16px;	
	float: left;
	padding-bottom:40px;
	background-color:#cfaa00;
	background-color: #8c1c18;
	background-color: #3d3d3d;
	padding-left: 1000px;
	padding-right:1000px;
	margin-left:-1000px;
	margin-top:20px;
	font-size:13px;
	text-align: center;
	}
 ul#footie {  
        margin: 0 auto;  
        width: 980px; 
		padding: 0;  
		margin-bottom:20px;
		
      
    }  
	 ul#footie li {  
        display: inline;  
        float: left;  
		width: 460px;  
          
            position: relative;  
			padding-top:30px;
			padding-bottom:30px;
			text-align: left;
			 color: #eee;
			font-size: 13px;
			margin-left:60px;
	 }
	  ul#footie li:first-child {  
      
			margin-left:0px;
	 }
	 #footer a{ color: #eee;
	 text-decoration: none; }
	

.footerkolom a{
	font-weight:bold;
	color:white;
	border-bottom: none;
	text-decoration:none;
	
	
}
.creatief{
	margin-top: 50px;
	color: #666;
	position:absolute;
	margin-bottom:20px;
	height:50px;
}
.creatief a{
	color: #cfaa00;
	font-weight:normal;
}




/* formulieren */

form {
   width: 100%;
   float:left;
      padding-bottom: 10px;
}
dt {
   width: 170px;
      padding-bottom: 10px;
	  float:left;
}
dd {
   width: 650px;
   padding-bottom: 10px;
    float:left;
}

label.required {
    background: url("../img/icons/required.png") no-repeat scroll right top transparent;
    padding-right: 10px;
}

input, textarea, select, button { 
	font-family: Arial, sans-serif;
}

input.input-submit {

}

input.input-text {

}

input:focus,
textarea:focus {

}
input, password, textarea, select{ font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; 
-webkit-text-stroke: 0;
filter: none;
    	zoom: 1;
		text-shadow: none; }
input[type=text]{padding: 4px; border-radius: 10px; border: 2px solid #cccccc; width:320px; }
input[type=email]{padding: 4px; border-radius: 10px; border: 2px solid #cccccc; width:320px; }
textarea{padding: 4px; border-radius: 10px; border: 2px solid #cccccc; width:320px; }
textarea{padding: 4px; border-radius: 10px; border: 2px solid #cccccc; width:320px; }
input[type=submit]{padding: 4px; background-color: #cfaa00; color: black; border-radius: 10px; border: 2px solid #cfaa00; color:white; font-family: 'Open Sans', Helvetica, Arial, sans-serif; padding-left:20px; padding-right:20px; margin-top:-80px; margin-left:0px;  }
select{padding: 4px; border: 1px solid #cccccc; }
.errors{font-size: 14px; color: red;}


#map_canvas{ font-family:Arial, Helvetica, sans-serif; font-size:14px;
-webkit-text-stroke: 0;
filter: none;
    	zoom: 1;
		text-shadow: none;
		 width:600px;
		 height:300px; 
		 margin-bottom:20px;
		 }



/* Image testclasses */

img.alignLeft {
	float: left;
	padding: 0 10px 10px 0;
}

img.alignRight {
	float: right;
	padding: 0 0 10px 10px;
}


/* slideshow */

#slideshow {
	
    float: left;
    height:350px;
	width:660px;
	margin-left: 0px;
	background-color:#CCCCCC;
	
}

#slideshow IMG {
	position:absolute;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

div#breadcrumbs{
	width:980px;
	padding-top:00px;
	padding-bottom:00px;
	height:25px;
	float:left;
	margin-bottom:30px;
	font-size:12px;
		border-top: 1px dotted #e0e0e0;
		padding-top:10px;
border-bottom: 1px dotted #e0e0e0;
	}
	div#share{
	width:160px;
	

	padding-top:0px;
	padding-bottom:0px;
	height:25px;
	float:right;
	font-size:12px;
	}
	
	#submenu{
	width: 990px;
	float:left;
	margin-top: 20px;
	/*background-color:#fafafa;*/
	
		}
		
	#submenu li {
		display:inline;
		float: left;
		height:56px;

			
		}
	#submenu li a{
		display:inline;
		float: left;
		padding: 10px 8px; 
		background-color: #eeeeee;
		margin-right: 5px;
		font-family: 'bebas_neueregular';
	color: black;
	text-decoration:none;
	font-size:20px;
	line-height:30px;
	
			
		}	
	#submenu li a.active{
		background-color: #FD0;
		
			
		}	
	#submenu li a:hover{
		
		background-color: #ccc;
		
			
		}	
		#submenu li a:active{
		
		background-color: #FD0;
		
			
		}		
	#submenu li:last-child a{
		margin-right: 0px;
			
		}		
		
                
                
                
		
		/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
/*	background-image: url(../images/big_transparent.gif);*/
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	/*cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;*/
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
/*	background-image: url(../images/big_transparent.gif);*/
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
/*	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;*/
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
/* USER SETTINGS */
#makeMeScrollable
		{
			width:100%;
			height: 260px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			margin-left: 6px;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
			
		}
		
	#slider-wrapper{ float:left; margin-left:30px;}
		
		
    @media screen and (max-width: 980px) {  
	
	#slider-wrapper{ float:left; margin-left:00px; width:auto !important; }
	
	
		#makeMeScrollable{ visibility: hidden; height:0px;}
		body {

	background-position: center -260px
		
		}
	
	#wrapper {
	width: 100%;	
	float:left;
	left:0;
	margin-left:0px;
	display:inline;
	padding-top:8px;
	
}


#header{
	width: 100%;
	height:160px;

	
	
	}	
#menu ul {
	float:left;

	text-align:right;
padding-left:30px;
	padding-right:30px;
	
}

#menu ul li {
	float: left;
	margin-top:10px;

}
#menu ul li a {

	padding: 5px 10px 5px 10px;
	
	font-size: 16px;
color: #cccccc;
border-bottom: none;
text-decoration:none;
margin-right:4px;
margin-bottom:4px;
border-radius: 8px;
}


div#breadcrumbs{
	width: 100%;	
	padding-top:00px;
	padding-bottom:00px;
	height:25px;
	float:left;
	margin-bottom:30px;
	font-size:12px;
		border-top: 1px dotted #e0e0e0;
		padding-top:10px;
border-bottom: 1px dotted #e0e0e0;
	padding-left:30px;
	padding-right:30px;
	}
	div#share{ display:hidden; visibility:none;}
	  
	  
	  
	 #submenu{
	width: 90%;
	float:left;
	margin-top: 20px;
	/*background-color:#fafafa;*/
	padding-left:30px;
	padding-right:30px;
		}
		
	#submenu li {
		display:inline;
		float: left;
		height:50px;
margin-bottom: 5px;
			
		}
	#submenu li a{
		display:inline;
		float: left;
		padding: 10px 8px; 
		background-color: #eeeeee;
		margin-right: 5px;
		
		font-family: 'bebas_neueregular';
	color: black;
	text-decoration:none;
	font-size:18px;
	line-height:30px;
	
			
		}	
		
		
 .inhoud{
	width: auto;
	float:left;
	
	padding-left:30px;
	padding-right:30px;

		}
		
		ul#subcats li{
			float: left;
			}
		
		 #homebuttons{visibility:hidden; display:none;}
		
		#inleiding{
		
		display: inline; 
		width: auto;
		float:left;
		}	
		
	ul#footie {  
        margin: 0 auto;  
        width: 100%; 
		padding: 0;  
		
      
    }  
	 ul#footie li {  
        display: inline;  
      
		width: 40% !important;  
            float: left;  
            position: relative;  
			padding-top:30px;
			padding-bottom:30px;
			margin-left:0px;
			padding-left:50px;
	 }
	  ul#footie li:first-child {  
	  width: 45%;  
	
    }   
	   
	  div.kolom{
		display: inline; 
		width:45%;
		float:left;
		margin-left:50px;

		}
		  .newsbox{
		display: inline; 
		width:auto !important;
		float:left;
		

		}
	  
	    @media screen and (max-width : 560px) {  
		#makeMeScrollable{visibility:hidden;}
	
			#breadcrumbs{visibility:hidden; display:none;}
			
	a.blocklink{			
			width: 100%;
			}
		a.blocklink img{			
			width: 100%;
			}
				 #submenu{
		display: inline; 
		width: auto;
		float:left;
	margin-top: 20px;
	/*background-color:#fafafa;*/
	padding-left:30px;
	padding-right:30px;
	
		}
		
	#submenu li {
		display:inline;
		float: left;
		height:30px;
margin-bottom: 5px;
width:100%;	
	}
		#submenu li a{
	padding:2px;
width:100%;	
text-align: center;
		}
		
 ul#footie li {  
        display: inline;  
      
		width: 100%;  
            float: left;  
            position: relative;  
			padding-top:30px;
			padding-bottom:30px;
	 }		
	 
	  div.kolom{
		display: inline; 
		width:auto;
		float:left;
		margin-left:0px;

		}
		
		#layerslider{height: 200px !important; width: 400px !important; max-width: 400px  !important;}
		iframe{height: 200px !important; width: 400px !important; }
      } }