/* @Font-Face */

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

}

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd,fieldset, form, label, legend,caption {	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;	vertical-align: top;	background: transparent;}table, td, tr, thead, tbody{vertical-align: top;}body {	line-height: 1;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}/* remember to define focus styles! */:focus {	outline: 0;}/* remember to highlight inserts somehow! */ins {	text-decoration: none;}del {	text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {	border-collapse: collapse;	border-spacing: 0;}

/**
* Start Vanilla CSS 1.0.0
*/

pre,code,tt{font:1em/1.5em 'Andale Mono','Lucida Console',monospace;}h1,h2,h3,h4,h5,h6,b,strong{font-weight:bold;}em,i,dfn{font-style:italic;}dfn{font-weight:bold;}p,code,pre,kbd{margin:0 0 1.5em 0;}blockquote{margin:0 1.5em 1.5em 1.5em;}cite{font-style:italic;}li ul,li ol{margin:0 1.5em;}ul,ol{margin:0 1.5em 1.5em 1.5em;}ul li{list-style-type:disc;}ol li{list-style-type:decimal;}ol ol li{list-style:upper-alpha;}ol ol ol li{list-style:lower-roman;}ol ol ol ol li{list-style:lower-alpha;}dl{margin:0 0 1.5em 0;}dl dt{font-weight:bold;}dd{margin-left:1.5em;}sup,sub{line-height:0;}abbr,acronym{border-bottom:1px dotted;}address{margin:0 0 1.5em;font-style:italic;}del{text-decoration:line-through;}pre{margin:1.5em 0;white-space:pre;}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto;}img.alignright{display:inline;}img.alignleft{display:inline;}.alignright{float:right;margin-left:10px;}.alignleft{float:left;margin-right:10px;}* html .clearfix{height:1%;}*+html .clearfix{display:inline-block;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}* html .group{height:1%;}*+html .group{display:inline-block;}.group:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.dummy { overflow:hidden; } 
 
/**********************************************
TBMODULE
**********************************************/
.tbmodule{ background-color:#ea0082; color:#FFF; padding:20px; margin:15px 0px 15px 0px; text-align:center; font-weight:bold; border:dotted 1px #000000; }

/**********************************************
IMAGES VANUIT TOOLBOX
**********************************************/
.img_left_border		{float:left; margin: 10px; width: auto;}
.img_left_noborder		{float:left; margin: 2px 10px 10px 2px;  width: auto;}
.img_right_border		{float:right; margin: 15px; width: auto;}
.img_right_noborder		{float:right; margin: 2px 2px 10px 10px;  width: auto;}
.img_noalign_noborder	{margin: 2px; }
.img_noalign_border		{margin: 10px }
.cssbutton				{cursor:pointer; border:1px solid #FFF; background-color:#00457c; width: auto; color:#FFF; background-image:url('../images/arrow_rechts.html'); background-repeat:no-repeat; background-position:100% 50%; text-align:left; text-indent:4px;	padding-left:4px; padding-right:20px; padding-top:3px; padding-bottom:3px;	font-size: 12px; float:left;}
.cssfield				{padding:5px; line-height:11px;border:1px solid #4db3d0; font-size:11px;}
.boekField				{border:1px solid #dedede; padding:2px 0px 2px 4px; height:18px;}


/**********************************************
 * STANDAARD ELEMENTEN
**********************************************/

html, body {
	padding:0;
	margin:0;
	width:100%;
	height: 100%;
	color : #fff;
	font-size : 12px;
	font-family : arial, verdana;
}

/* Titels van de pagina in de contentheaders */
h1 { font-size : 18px; font-weight : normal; color : #fff; font-family : DINLightAlternateRegular; margin: 0px 0px 25px 0px; padding : 0px; }

p{ line-height:20px;color:#bcbcbc;padding:0px;margin:0px 0px 20px 0px; font-family: Georgia, "Times New Roman", Times, serif; text-align:justify; }
p:last-child{	margin : 0px; }
p a { color:#fff;font-weight:normal;text-decoration:none;overflow:hidden; }
p a:hover, p a.actief, p a.actief:hover	{ color:#ed1e79;font-weight:normal;text-decoration:none;overflow:hidden; }

ul, ol {color:#bcbcbc; margin:0 0 20px 20px; padding:0;font-family: Georgia, "Times New Roman", Times, serif;}
ul li { line-height: 18px; list-style: square; }
ol li { line-height: 18px; list-style: decimal; }

/* De website */

#container{ width: 980px; overflow: hidden; background-color: #515151; margin: 0 auto 25px auto; background-image: url(../images/pattern.png); background-repeat:repeat-y; background-position:top left; }

#header { width: 980px; height:112px; background-color: #FFF; }

#logo {float:left;}
#linkedin {float:right; background-color: #ededed; width: 236px; height: 85px;}
	#linkedin a { display: block; margin: 55px 0 0 13px; }

#menu { float: left; width: 236px; background-color: #e5e5e5; padding-bottom: 0px;}
#navigatie { font-family: DINLightAlternateRegular; margin: 0 0 32px 0; padding:30px 0 0 30px;}
#navigatie li { list-style: none; margin:0; padding:0; font-size: 18px; line-height: 26px; color:#818285; }
#navigatie li:hover { list-style: square; }
#navigatie li.active { list-style: square; }
#navigatie li.active a { color: #231f20; }
#navigatie li a { text-decoration: none; color:#818285; }
#navigatie li a:hover { color: #231f20; }

#whitespace { background-color: #fff; width: 236px; height: 18px; float: left; }

#content-container{	float:left; width:490px; background-color: #fff; padding-left: 18px;}
	#content { background-image: url(../images/content_bg.png); background-repeat: repeat-y; padding: 35px; width: 420px; min-height:472px; float: left;}
	#balk-rechts { width: 236px; float:right; }
		#boven { background-color: #3d3d3d; width: 236px; height: 220px; }
		#midden { width: 236px; height: 220px; position: relative;}		
		
		#midden img {
			position:absolute;
			width: 236px; height: 220px;
			top:0;
			left:0;
			z-index:8;
		}
		
		#midden img.active {
			z-index:10;
		}
		
		#midden img.last-active {
			z-index:9;
		}


/* Contactformulier */

label { position:absolute;text-align:right;width:130px;padding-top:4px;font-weight:bold; }
input, textarea { margin:0px 0px 5px 150px;width:450px;padding:3px;border:1px solid #999;font-weight:normal;font-size:12px;font-family:arial; }
textarea { height:140px;font-weight:normal;font-size:12px;font-family:arial; }
input.submit { border:1px solid #999;background-color:#fff;overflow:hidden;padding:3px;color:#ed1e79;margin: -5px 0px 0px 150px;width:150px;}
input.submit:hover { border:1px solid #ed1e79;background-color:#ed1e79;color:#fff;}
label.check, label.radio { position:relative; text-align:left; }