/* -------------------------------------------------------------- 
   
   BLUEPRINT CSS
    * Filename:        grid.css
    * Version:         0.7.1 (2008-02-25) YYYY-MM-DD
    * Website:         http://code.google.com/p/blueprintcss/

   Generated by:
    * Blueprint CSS Grid Generator (2009-03-16) [http://kematzy.com/blueprint-generator/]

   Based on work by:
    * Olav Bjorkoy      [bjorkoy.com]
    * Nathan Borror     [playgroundblues.com]
    * Jeff Croft        [jeffcroft.com]
    * Christian Metts   [mintchaos.com]
    * Khoi Vinh         [subtraction.com]

   == STRUCTURE: ========================
    * Page width:            950 px
    * Number of columns:     24
    * Column width:          30 px
    * Margin width:          10 px
   ======================================

   By default, the grid is 950px wide, with 24 columns 
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, use this formula to calculate
   the new total width: 

   Total width = (number_of_columns * column_width) - margin_width

   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 1024px;
  margin: 0 auto;
}
.container-19 {
  width: 750px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(/images/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin: 10px;
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right: 10px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 30px;}
.span-2  { width: 70px;}
.span-3  { width: 110px;}
.span-4  { width: 150px;}
.span-5  { width: 190px;}
.span-6  { width: 230px;}
.span-7  { width: 270px;}
.span-8  { width: 310px;}
.span-9  { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 710px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24, div.span-24 { width: 950px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}



/* Border on right hand side of a column. */
div.border {
  padding-right:4px;
  margin-right:5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:28px;
  margin-right:25px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}


.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

* {
	margin: 0;
	padding: 0;
}
:focus { outline: 0; }
img { 
	-ms-interpolation-mode: bicubic;
	display: block;
	border:0;
}

body, a, td, th, input, textarea, select {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #636362;
	font-size: 12px;
}

body {
	margin: 0;
	background-color: #fff;
	text-align: center;
}


ul {
	padding: 0;
	margin: 0;
	margin-left: 20px;
	list-style: square;
}

a img {
	border: none;
}
h1, h1 a {
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
	margin: 0;
	margin-bottom: 9px;
	text-decoration: none;
}

h2, h2 a {
	font-weight: normal;
	font-size: 20px;
	line-height: 27px;
	margin: 0;
	margin-bottom: 9px;
	text-decoration: none;
}
h3, h3 a {
	font-size: 12px;
	line-height: 18px;
	margin: 0;
	margin-bottom: 18px;
	text-decoration: none;
}

.hide {
	display: none;
	height: 1px;
	width: 1px;
}

.center {
	text-align: center;
}

.minHeight {
	min-height: 400px;
	height: auto !important;
	height: 400px;
}


.padding {
	padding: 18px 10px 0 10px;
	margin-bottom: 18px;
}

.red {
	background-color: #ff0000;
}

.grey {
	background-color: #efefef;
	background-color: #F3F5F7;
}
.lightGrey {
	background-color: #cfd5d7;
	color: #656f72;
}
.lightGrey a {
	color: inherit;
}


.container {
	text-align: left;
	padding-top: 0;
}

#main {
	
}

div.marginBottom {
	margin-bottom: 10px;
}


#header {
	
}
	#header-kleuren {
		
	}
	#header-foto {
		
	}
	#header-quicklinks {
		text-align:right;
		height:32px;
		line-height:32px;
		margin-right:24px;
		color:#9b9b9b;
                text-transform: lowercase;
                font-size:9px;
	}
	#header-quicklinks ul, #header-quicklinks ul li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#header-quicklinks ul li {
		display: inline;
		padding-right:2px;	
	}

	#header-quicklinks ul li a {
		text-decoration: none;
		font-size:9px;
		color:#9b9b9b;
		padding-left:2px;
	
        #header-quicklinks ul li.topmenubetweenitems {
		font-size:9px;
		color:#9b9b9b;
        }
	
	}
	#header-top {
		margin-top: 36px;
		height: 36px;
		
	}

	#header-logo {
		margin-top:24px;
		margin-left:100px;
	}
	
	#header-logo a {
		font-size: 22px;
		font-weight: bold;
		text-decoration: none;
		margin-left: 20px;
	}

	#header-bottom {
		line-height: 22px;
		padding-left: 20px;
		clear: both;
		border:1px solid red;
	}


ul.breadCrumbs {
	display: block;
}
ul.breadCrumbs, ul.breadCrumbs li {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.breadCrumbs li {
	float: left;
	display: inline;
	margin-right: 5px;
	font-size: 10px;
}
ul.breadCrumbs a {
 	font-size: 10px;
	color: #656f72;
	background: url(/images/arrow_black.gif) center right no-repeat;
	padding-right: 10px;
	text-decoration: none;
}
ul.breadCrumbs a:hover {
	text-decoration: underline;
}
ul.breadCrumbs li.last a {
	background: none;
	padding-right: 10px;
	text-decoration: none;
}
#header-navigatie {
	background: url(/images/navigatie.jpg) right no-repeat;
	height:80px;
	widht:200px;
	clear:both;
	margin-right:24px;
	padding-left:344px;
}
#header-navigatie ul {
}
#header-navigatie ul, #header-navigatie ul li {
	margin: 0;
	padding: 0;
	list-style: none;

}
#header-navigatie ul li {
	float: left;
	display: inline;
}

#header-navigatie ul li a {
	line-height: 44px;
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#header-navigatie ul li a.active, #header-navigatie ul li a:hover {
	line-height: 44px;
	color: #fff;
}
#header-navigatie ul.mainmenumain li {
	text-indent:20px;
	width:109px;
}
#header-navigatie ul.mainmenumain1 li {
	width:152px;
}
#header-navigatie ul.mainmenumain2 li {
	width:89px;
}
#header-navigatie ul.mainmenumain3 li {
	width:119px;
}
#header-navigatie ul.mainmenumain4 li {
	width:96px;
}
#header-navigatie ul.mainmenumain5 li {
	text-indent:8px;
	width:91px;
}

#header-navigatie ul.mainmenumain li a:hover, #header-navigatie ul.mainmenumain li a.active, #header-navigatie ul.mainmenumain li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_01.jpg) no-repeat;
}
#header-navigatie ul.mainmenumain1 li a:hover, #header-navigatie ul.mainmenumain1 li a.active, #header-navigatie ul.mainmenumain1 li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_02.jpg) no-repeat;
}
#header-navigatie ul.mainmenumain2 li a:hover, #header-navigatie ul.mainmenumain2 li a.active, #header-navigatie ul.mainmenumain2 li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_03.jpg) no-repeat;
}
#header-navigatie ul.mainmenumain3 li a:hover, #header-navigatie ul.mainmenumain3 li a.active, #header-navigatie ul.mainmenumain3 li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_04.jpg) no-repeat;
}
#header-navigatie ul.mainmenumain4 li a:hover, #header-navigatie ul.mainmenumain4 li a.active, #header-navigatie ul.mainmenumain4 li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_05.jpg) no-repeat;
}
#header-navigatie ul.mainmenumain5 li a:hover, #header-navigatie ul.mainmenumain5 li a.active, #header-navigatie ul.mainmenumain5 li.mainmenuitemselected a{
	background: url(/images/navigatie_hover_06.jpg) no-repeat;
}

/* 	====================================================================================
sub navigation */
.subNav {
	margin-top:17px;
	width:180px;

}

.subNavWrapper {z-index:9999;position:absolute;}

.subNav ul, .subNav ul li, .subNav ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.subNav ul {

}
.subNav ul li {
	background: url(/images/subnavborder.gif) left bottom repeat-x;
}
.subNav ul li a {
	color: #636362;
	display: block;
	padding-top: 10px;
	padding-bottom: 16px;
	text-decoration: none;
	font-weight:normal;
}
.subNav ul li a:hover, .subNav ul li a.active {
	color: #145392;
	font-weight:bold;
}

.subNav .submenuitemselected a {
	color: #145392;
	font-weight:bold;
}
.subNav ul li a.parent {
	xfont-weight: bold;
}
.subNav ul ul {
	margin-left: 5px;
}
.subNav ul ul li {
	border: none;
}
.subNav ul ul li a {
	padding: 1px 0 1px 10px;
	padding-left: 15px;
}
.subNav ul ul li a:hover, .subNav ul ul li a.active {
	padding: 1px 0 1px 10px;
	font-size: 10px;
	color: #656f72;
	font-weight: bold;
	background: none;
	padding-left: 15px;
}


/* module: portfolio */
#categories {
	margin-top: 36px;
}
#categories ul {
	list-style: none;
	margin: 0;
	margin-left: 20px;
}
#categories ul li {
	padding: 3px 0 3px 0;
}
#categories ul li a {
	text-decoration: none;
	text-transform: capitalize;
}
#categories ul li a.active {
	font-weight: bold;
}

ul#projects {
	list-style: none;
	margin: 0;
	width: 800px;
	margin-right: -10px;
}
ul#projects li {
	float: left;
	display: inline;
	margin-right: 10px;
	margin-bottom: 8px;
}

#largeImg {
	margin-bottom: 8px;
}
#imgContent {
	position: absolute;
	display: none;
	background-color: #ccc;
	padding: 10px;
	xheight: 50px;
	width: 200px;
	top: 25px;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	z-index: 1;
}
ul.thumbs {
	margin: 0;
	margin-right: -10px;
}
ul.thumbs li {
	margin:0;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
	display: inline;
}
#imgWrapper {    
	min-width: 200px;
	min-height: 200px;
	overflow: hidden;
}    
.loading {  
	background: url(/images/loader.gif) no-repeat center center;  
}

/* footer (navigation) */
#footer {
	font-size: 10px;
	height:31px;
}
#footerBlauw {
	float:left;
	background-color:#145392;
	width:357px;
	text-align:right;
	color:#fff;
	font-weight:bold;
	padding-right:23px;
	font-size: 15px;
	height:31px;
	line-height:31px;
}
#footerGrijs {
	float:left;
	background-color:#cccccc;
	width:440px;
	height:31px;
}
#footerLogo {
	float:left;
	background-color:#ff0000;
	width:182px;
	height:31px;
}

#seofooter {}

#wrapperLeft,  #wrapperRight {
	float:left;
}
#columnLeftDiv {
	position:relative;
	margin-left: 180px;
	float:left;
	width:220px;
	background: url(/images/vlak_t.jpg) right top no-repeat;
}
#columnLeftDiv #vlakDiv {
	position:absolute;
	bottom:0;
	height:453px;
	width:220px;
	background: url(/images/vlak_b.png) right top no-repeat;
        z-index:100;
}
#columnLeftDiv #vlakDiv #fotoDiv {
	position:absolute;
	bottom:26px;
	width:178px;
	height:178px;
	border:1px solid #333333;
}
#columnContentDiv {
	float:left;
	width:400px;
	margin-top:17px;
	line-height:26px;
}
#columnContentDiv img, #columnContentLargeDiv img {
	border:1px solid #333333;
}
#columnContentLargeDiv {
	float:left;
	width:600px;
	margin-top:17px;
}
#columnRightDiv {
	position:relative;
	float:left;
	width:204px;
}
#columnRightDiv #fotoGebouwDiv {
	position:absolute;
	bottom:0;
	float:right;
}
.eqH {
	min-height:600px;
}

.kubusClass h1.h1active {
	background: url(/images/arrow_open.jpg) no-repeat;
	color: #636362;
}
.kubusClass {
	margin-bottom:10px;
}
.kubusClass h1 {
	padding:0;
	margin:0;
	font-size:12px;
	background: url(/images/arrow_closed.jpg) no-repeat;
	padding-left:20px;
	cursor:pointer;
	line-height:15px;
	font-weight:bold;
}
.kubusClass h1:hover {
	color: #636362;
}
.kubusClass div {
	margin-top:9px;
	display:none;
}
.checkboxLabel {
	cursor: pointer;
	font-size:11px;
}
.invoerVeld {
	width: 178px;
	height: 23px;
	border: 1px solid #636362;
	margin-top:6px;
	margin-bottom:6px;
	line-height:25px;
}
.invoerArea {
	width: 398px;
	height: 92px;
	border: 1px solid #636362;
	margin-top:4px;
	margin-bottom:6px;
}
.invoerSelect {
	width: 140px;
	border: 1px solid #636362;
	margin-top:6px;
	margin-bottom:6px;
}
.invoerRadio {
	margin-top:6px;
	margin-bottom:6px;
}
.button {
	border: none;
	background-color: #fff;
	cursor: pointer;
	padding:0;
	margin:0;
}
.spacerDiv {
	height:11px;
}

.contactform {background:#fff;position:absolute;z-index:99999;width:600px;}
.contactform .white {width:200px;height:20px;background:#fff;position:absolute;top:-20px;right:0px;}
.contactform table {width:100%;}
.contactform table td {height:10px;padding:0px;margin:0px;line-height:22px;}
.contactform table td.checkboxtext{font-size:11px;padding:0px 0px 0px 5px;}
.contactform input[type='text'], textarea {width:180px;height:22px;border:#777 1px solid;}
.contactform select {width:142px;height:22px;border:#777 1px solid;}
.contactform textarea {width:150px;}
.contactform p.inputlabels {color:#777;font-size:12px;}
.contactform input[type='submit'] {width:120px;float:right;}