/* 
    Document   : style
    Created on : 17-jul-2011, 11:49:45
    Author     : M. Webworks
    Description: Stylesheet voor Plantago.nl
*/

body { 
    background-color: #ffffcc;
	text-align: center;
	font-family: arial, sans-serif;
	font-size: 16px;
	color: #003300;
	margin:0;
}

a {
	color: #003300;
}

a img {
	border: none;
}

#lightbox-loading-link img{
	max-width: 30px;
}


@media screen and (max-width: 1019px)
{

	.clearfix:before, .clearfix:after {
		content: "";
		display: table; }

	.clearfix:after {
		clear: both; }

	.clearfix {
		zoom: 1; }

	html,body{
		padding: 0;
		margin: 0;
		text-align: left;
	}
	
	table{
		width: 100%;
		height: auto;
		display: block;
		overflow-x: scroll;
	}

	*{
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;   
		box-sizing: border-box; 
	}
	
	.contact-form{
		width: 100%;
		overflow-x: hidden;
	}
	
	.contact-form *{
		width: 100%;
	}
	
	.contact-form td:first-child{
		width: 30%;
	}

	#pagewrapper{
		width: 100%;
		padding: 0 20px;
	}

	#header{
		position: relative;
		width: 100%;
		height: 300px;
	}

	#header:before{
		content:"";
		position: absolute;
		top:0;
		left:1%;
		display: block;
		background: url('../images/layout/header_bg.png') no-repeat;
		background-size: cover;
		background-position: center center;
		width: 98%;
		height: 100%;
		z-index: -1;
	}

	#header #menu{
		display: block;
		width: 100%;
		height: 70px;
		background: #00ba00; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDdmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #00ba00 0%, #007f00 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ba00), color-stop(100%,#007f00)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #00ba00 0%,#007f00 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #00ba00 0%,#007f00 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #00ba00 0%,#007f00 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #00ba00 0%,#007f00 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ba00', endColorstr='#007f00',GradientType=0 ); /* IE6-8 */

		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;

		-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	}

	#header #menu ul#nav{
		position: absolute;
		top:70px;
		left: 10px;
		display: none;
		width: 300px;
		background: #008000;
		z-index: 999;
		margin: 0;
		padding: 0;
	}
	

	#header #menu ul#nav .flags img{
		max-width: 40px;
		margin-left: 10px;
	}

	#header #menu ul#nav li{
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#header #menu ul#nav li a,#header #menu ul#nav li span{
		display: block;
		padding: 10px 15px;
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	#header #menu ul#nav li ul{
		padding: 0;
		margin: 0;
	}

	#header #menu ul#nav li ul li{
		background: #00AB00;
		padding: 0 0 0 10px;
		margin: 0;
	}

	#header #menu ul#nav li ul li a{
		font-style: italic;
	}


	#header #menu button{
		position: relative;
		top: 25px;
		left: 20px;
		display: block;
		background: none;
		border:0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 16px;
		color:#fff;
		cursor: pointer;
	}

	#header #menu button:before{
		content: "";
		display: block;
		position: relative;
		top:-1px;
		width: 20px;
		height: 20px;
		margin-right: 6px;
		float: left;
		background: url('../images/layout/menu.png') no-repeat;

	}

	#header .logo{
		position: absolute;
		top:0;
		right: 0;
		display: block;
		width: 200px;
		height: 200px;
		float: right;
		padding: 20px;

		background: #dff941; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNCUiIHN0b3AtY29sb3I9IiNkZmY5NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWViODAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
		background: -moz-linear-gradient(top,  #dff941 14%, #9eb800 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#dff941), color-stop(100%,#9eb800)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #dff941 14%,#9eb800 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #dff941 14%,#9eb800 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #dff941 14%,#9eb800 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #dff941 14%,#9eb800 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dff941', endColorstr='#9eb800',GradientType=0 ); /* IE6-8 */

		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;

		-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);

	}

	#header .logo img{
		width: 100%;
	}

	#header .slogan{
		position: relative;
		top:80px;
		left:50px;
		width: 50%;
		color:#ffffff;
		z-index: 99;
	}

	#header .slogan h1{
		font-size: 37px;
		font-weight: bold;
		margin:0;
		padding:0;
		text-shadow: 1px 1px 2px #000000;

	}

	#header .slogan span{
		font-size: 18px;
		margin:0;
		padding:0;
		text-shadow: 1px 1px 2px #000000;
	}
	
	#breadcrumbs{
		width: 100%;
		height: auto;
		display: block;
/*		padding:0 10px;*/
		float: left;
	}
	
	#breadcrumbs span{
		width: 100%;
		height: auto;
		display: block;
		padding: 5px 0 5px 10px;
		margin: 0 0 20px 0;
		text-align: left;
		background: #00BD00;
		color: #fff;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	#content{
		background: #fff;

		-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);

		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	#content .left_bar{
		padding: 5px 20px;
	}
	
	#content .left_bar .top_ads{
		width: 100%;
		height: auto;
		position: relative;
		display: block;
		overflow: hidden;
	}

	.alignright {
		float: right;
		padding: 0 0 10px 10px;
	}

	.alignleft {
		float: left;
		padding: 0 10px 10px 0;
	}

	#content .right_bar{
		background-color: #008000;
		padding: 15px 20px;
		color: #fff;
		position: relative;

		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	
	.right_bar .search table{
		overflow-x: hidden;
	}
	
	.bottom-block{
		display: block;
		float: left;
		width: 250px;
		text-align: left;
		margin-bottom: 20px
	}

	#footer{
		text-align: right;
		padding: 10px;
		color: #fff;
		margin-top: 30px;

		background: #00b800; /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjgwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDgwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  #00b800 0%, #008000 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b800), color-stop(100%,#008000)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #00b800 0%,#008000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #00b800 0%,#008000 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #00b800 0%,#008000 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #00b800 0%,#008000 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b800', endColorstr='#008000',GradientType=0 ); /* IE6-8 */

		-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);

		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;

	}
	
	

}

@media screen and (max-width: 620px)
{

	img{
		width: 100%;	
		height: auto !important;
	}

	#header .logo{
		position: absolute;
		top:0;
		right: 0;
		display: block;
		width: 70px ;
		height: 70px ;
		float: right;
		padding: 10px;
	}

	#header #menu ul#nav{
		position: absolute;
		top:70px;
		left: 10px;
		display: none;
		width: 95%;
		background: #008000;
		z-index: 999;
		margin: 0;
		padding: 0;
	}

	#header .slogan{
		position: relative;
		top:80px;
		left:30px;
		width: 90%;
		color:#ffffff;
		z-index: 99;
	}

	#header .slogan h1{
		font-size: 26px;
	}

	#header .slogan span{
		font-size: 15px;
		display: block;
		padding-right: 20px;
	}

	#content .right_bar .login{
		float: left;
		width: 100%;
	}

	#content .right_bar .ads{
		float: left;
		width: 100%;
	}
	
	.bottom-block{
		display: block;
		float: left;
		width: 100%;
		text-align: left;
	}
	
	.bottom-block img{
		max-width: 300px;
	}
	
	.bottom-block{
		margin: 20px 0;
	}
}

@media screen and (min-width: 1020px)
{
	
	#pagewrapper{
		margin: 0px auto;
		width:1003px;
		text-align: left;
	}

	#header{
		background: url('../images/layout/header_bg.png') no-repeat;
		background-position: 0px 0px;
		float:left;
		height:275px;
		width:1003px;
	}
	
	#header #menu button{
		display: none;
	}

	#header .flags {
			float: right;
			padding-right: 20px;
	}

	#header .logo{
		background: url('../images/layout/logo_block.png') no-repeat;
		position: relative;
		top:-73px;
		left:750px;
		width:255px;
		height:225px;
	}

	#header .logo img{
		padding:0px 0px 0px 0px;
	}

	#header .slogan{
		position: relative;
		top:-173px;
		left:50px;
		color:#ffffff;
	}

	#header .slogan h1{
		font-size: 47px;
		font-weight: bold;
		margin:0;
		padding:0;
		text-shadow: 1px 1px 2px #000000;

	}

	#header .slogan span{
		font-size: 30px;
		margin:0;
		padding:0;
		text-shadow: 1px 1px 2px #000000;
	}

	#breadcrumbs{
		font-size: 14px;
		background:url('../images/layout/breadcrumbs.png') no-repeat;
		float:left;
		width:1003px;
		height:21px;
		color:#FFFFFF;
		padding:5px 0px 0px 15px;
	}

	#breadcrumbs a {
		text-decoration: none;
		color:#FFFFFF;
	}

	#content{
		background: url('../images/layout/content_bg.png') repeat-y;
		background-position: 0px 0px;
		float:left;
		width:1003px;
	}

	#content .left_bar{
		width:739px;
		min-height: 322px;
		float:left;
		padding:20px 0px 0px 0px;
	}

	#content .left_bar #article{
		padding:0px 20px 20px 20px;
	}

	#content .left_bar .top_ads{
		padding: 20px 20px 0px 20px;
		color: green;
	}

	#content .left_bar .under_ads{
		padding: 20px 20px 0px 20px;
		color: green;
	}

	#content .right_bar{
		background: url('../images/layout/content_right_top.png') no-repeat;
		width:264px;
		min-height: 322px;
		float:left;
		color:#FFFFFF;
	}

	#content .right_bar h2{
		position: relative;
		top:-8px;
		padding:0px 0px 0px 0px;
		margin:0px 0px 0px 0px;
	}

	#content .right_bar .search{
		padding:5px 20px 20px 30px;
	}

	#content .right_bar .extraads{
		padding:5px 20px 20px 30px;
		color:#FFFFFF;
	}

	#content .right_bar .extraads a{
		color:#FFFFFF;
	}

	#content .right_bar .search table{
		width:200px;
	}

	#content .right_bar .search table input, select{
		width:200px;
	}

	#content .right_bar .search table .button input{
		width:75px;
	}

	#content .right_bar .ads{
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		width:205px;
		background: #FFFFFF;
		float: left;
		margin:20px 20px 20px 30px;
		padding:0px 0px 15px 0px;
		text-align: center;
	}

	#content .right_bar .ads h2{
		position: relative;
		top: -27px;
		height:0;
		text-align: left;
	}

	#footer{
		font-size: 14px;
		background: url('../images/layout/footer.png') no-repeat;
		width:1008px;
		height:113px;
		clear:both;
	}

	#footer .bottom_ads{
		position: relative;
		top:43px;
		width:300px;
		color:#FFFFFF;
		float:left;
		padding:0px 0px 0px 10px;
	}

	#footer .copyright{
		position: relative;
		top:45px;
		width:680px;
		color:#FFFFFF;
		float:left;
		text-align: right;
	}


	/* Dropdown navigatie */

	#header #menu{
		background: url('../images/layout/menu_left.png') no-repeat;
		background-position: left;
		height:73px;
	}

	#header #menu #nav{
		background: url('../images/layout/menu_bg.png') repeat-x;
		position: relative;
		left:17px;
		height:73px;
		width:736px;
		font-size: 16px;
		color:#FFFFFF;
		margin:0;
		padding:0;
	}

	#header #menu #nav, #header #menu #nav ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#header #menu #nav .top .top_link {
		display: block;
		padding:22px 15px 2px 15px;
		color:#FFFFFF;
		height:45px;
		text-decoration: none;
		text-align: center;
	}

	#header #menu #nav li {
		float: left;
		position: relative;
	}

	#header #menu #nav li:hover, #header #menu #nav li.sfhover {
		background: url('../images/layout/menu_hover_bg.png') repeat;
	}

	#header #menu #nav li ul {
		position: absolute;
		width: 10em;
		top:68px;
		left: -999em;
		background:#008900;
		font-size: 13px;
		z-index: 10;
	}

	#header #menu #nav .top ul li{
		padding: 3px;
		width: 124px;
	}

	#header #menu #nav .top ul li a{
		color:#FFFFFF;
		text-decoration: none;
	}

	#header #menu #nav li:hover ul {
		left: auto;
	}

	#header #menu #nav li:hover ul, #header #menu #nav li.sfhover ul {
		left: auto;
	}

}

table thead {
	text-align: left;
}

.maxWidth {
	width: 100%;
}

.hidden {
	display: none;
}

.cursor {
	cursor: pointer;
}

.cube {
	border: 1px solid;
    cursor: pointer;
    float: left;
    margin: 2px;
    min-height: 15px;
    min-width: 15px;
    padding: 2px;
    text-align: center;
}