/* --------------------------------
 * CSS stylesheet Nibud webwijzer
 *
 * Date: April 2009
 * Fier Concept & Design
 * -------------------------------
 */
 

/* This hack forces Firefox to always show the vertical scrollbar, regardless of whether there is content to scroll. 
   Just like Internet Explorer does.
   Without it, the main content jumps slightly when a vertical scrollbar appears when visiting a long page
*/
html { overflow: -moz-scrollbars-vertical; }

body
{
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	background-image: url(../images/bg_main.gif);
}

/* Headers */

h1 {
	font-size: 28px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #618c00;
	padding: 0;
	margin: 0;
}

h2 {
	font-size: 24px;
	font-weight: normal;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-bottom: 12px;
	margin-top: 15px;
}

h3 {
	font-size: 13px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 0px;
}

h2.orange { color: #CC6600; }
h2.blue { color: #3ea3d2; }
h2.purple {color: #6c207e; }
h3.green {color: #669900;}

/* Other HTML elements */

p { line-height: 150%; }

img { border: none; }

/* Main structural divs */

#site-container
{
	width: auto;
	height: 100%;
}

.content-wrap
{
	margin-left: auto;
	margin-right: auto;
	width: 942px;
}

#top {
	padding-top: 1px; /* prevents margin collapse */
	background-image: url(../images/bg_top.gif);
	background-color: White;
	background-repeat: repeat-x;
	height: 132px;
	width: 100%;
	/* !do not add overflow: visible! */		
}

#top-content {
	position: relative;
	margin-top: 14px;
	background-image: url(../images/bg_top_content.gif);
	background-color: White;
	height: 119px;
}

#middle {
	background-image: url(../images/bg_content.gif); 
	background-repeat: repeat-x repeat-y;
	min-height: 670px;
	overflow: hidden; /* needed to get min-height working in FF */	
}

#middle-content {
	position: relative; /* Important: without it "extra informatie" will not be placed correctly */	
	background-color: white;
	background-image: url(../images/bg_middle_content.gif); 
	background-repeat: repeat-x;	
	background-position: top;
	min-height: 670px;
	overflow: hidden;	
}

#footer {
	height: 140px;
}

#footer-content {
	padding-top: 1px !important; /* without a 15px vertical gap in FF3 */
	position: relative;
	background-image: url(../images/bg_bottom_content.gif);
	background-repeat: no-repeat;
	height: 62px;
}

/*  Top elements */

#top-content #logo-main {
	position: relative;
	top: 20px;
	left: 25px;

}

#menu-wrap {
	position: absolute;
	left: 585px;
	top: 15px;
	width: 350px;
}

ul.menu {
	list-style: none;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;	
}

ul.menu li {
	padding-left: 15px;
	line-height: 25px;
	height: 25px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
}

ul.menu li.border-bottom {
	background-image: url(../images/menu_divider.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}

ul.menu li a {
	text-decoration: none;
}


ul#menu-left {
	float: left;
	width: 165px;
}

ul#menu-left li a {
	color: #618c00;
	padding-left: 10px;
	background-repeat: no-repeat;
	background-image: url(../images/arrow_menu_left.gif);
	background-position: 0 8px; /* used to position the images so that they line up with the text */	
}
ul#menu-left li a:hover{ color: #a1ba66; }

ul#menu-right {
	float: left;
	margin-left: 5px;
	width: 150px;
}

ul#menu-right li a {
	color: #96ce00;
	padding-left: 10px;
	background-repeat: no-repeat;
	background-image: url(../images/arrow_menu_right.gif);
	background-position: 0 8px; /* used to position the images so that they line up with the text */		
}
ul#menu-right li a:hover{ color: #cae675; }

/* Middle elements */

#middle-content h1 { font-size: 26px; font-family: Verdana, Geneva, sans-serif; font-weight:normal;}
#middle-content h2 { font-size: 18px; font-family: Verdana, Geneva, sans-serif; font-weight:normal;}
#middle-content h3 { font-size: 11px; font-family: Verdana, Geneva, sans-serif; font-weight:bold;}

#middle-content h1.orange { color: #cc6600; }
#middle-content h1.blue   { color: #186f91; }
#middle-content h1.green  { color: #618c00; }
#middle-content h1.purple { color: #6c207e; }

#middle-content h2.orange { color: #e78d35; }
#middle-content h2.blue { color: #3594c0; }
#middle-content h2.light-blue { color: #2F85AE;}
#middle-content h2.green {color: #7eb500; }
#middle-content h2.purple {color: #a572ad; }


#middle-content h3.orange { color: #cc6600; }
#middle-content h3.blue { color: #276e91; }

ul li 
{
	line-height: 20px;
}

#middle-content p.first {	
	font-weight: bold;
}

#home-top {
	margin: 0;
	/* padding bottom matches height of home-bottom, since home-bottom is absolute positioned and otherwise would overlap this element */
	padding: 30px 45px 175px 40px;
	background-color: Transparent;
	min-height:100%;	
}

#home-bottom {
	margin: 0;
	padding: 20px 45px 25px 40px;
	background-color: #e2eecc;
	height: 130px; /* 175 - padding-bottom:25 - padding-top:20 */
	width: 100%;
    position: absolute;
    bottom: 0;
}

.home-column {
	float: left;
	width: 260px;	
	padding-bottom: 15px;
}

.home-column p 
{
	height: 95px;
}

#home-header {
	height: 130px;
	background-image: url(../images/line_dashed_green.gif);
	background-position: bottom;
	background-repeat: repeat-x;
}

p#home-intro {
	width: 520px;
	font-size: 12px
}

a.green {
	background-image: url(../images/arrow_link_green.png);
	display: block;
	line-height: 20px;	
	padding-left: 25px;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}

a.green:hover {
	color: #989c8f;
	background-image: url(../images/arrow_link_green_active.png);
}

.column-margin { margin-left: 35px;}

#middle-top {
	padding: 45px 0 0 45px;
	height: 70px;
}

#middle-single {
	padding: 45px 0 0 40px;
}

#middle-top .subtitle {
	color: #286791;
	font-size: 16px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#middle-single p {
	width: 520px;
	/*font-weight: bold;*/
	font-size: 11px;
}

#middle-single p.first {	
	font-weight: bold;
}


#middle-left {
	float:left;
	width: 260px; /* 300 - padding-left:40 */

}

#middle-right {
	float:right;
	width: 585px; /* Nodig foor FF */		 
	margin-right: 50px;	
}

#middle-right img {
	float: left;
	margin-right: 22px;		
}


#middle-right div.text {
	margin: 0;
	padding: 0;		
}

#middle-right  h2 
{
	margin: 0; 
	padding: 0;
}

#middle-right p.intro 
{
	font-weight: bold;
}

#middle-right p.body 
{
	margin: 0px;
	padding-top: 12px;
}


/* Lists with links */

.links 
{
	margin-bottom: 30px;
}

.links ul {
	width: 290px;
	border-top: 1px solid #cc6600;
	list-style: none;
	padding-left: 3px;
	margin: 0;
}


.links ul li {
	width: 100%;
	border-bottom: 1px dashed #cc6600;
	line-height: 35px;
}

.links li a {
	color: #cc6600;
	font-size: 13px;
	text-decoration: none;
	background-image: url(../images/arrow_link_orange.png);
	background-repeat: no-repeat;
	background-position: right;
	display: block;
}

.links li a:hover {
	color: #e6b481; 
	background-image: url(../images/arrow_link_orange_active.png);
	background-repeat: no-repeat;
	background-position: right;	
}

/* */

.links .blue { border-top: 1px solid #3ea3d2; }
.links .blue li { border-bottom: 1px dashed #3aa3d2; }
.links .blue li a {
	background-image: url(../images/arrow_link_blue.png);
	background-repeat: no-repeat;
	background-position: right;	
	color: #24749A;
}

.links .blue li a:hover {
	color: #659DB8; 
	background-image: url(../images/arrow_link_blue_active.png);
	background-repeat: no-repeat;
	background-position: right;		
}

/* Rekentool */

#rekentool-left {
	background-image: url(../images/rekentool_left.gif);
	background-repeat: no-repeat;	
	width: 265px;
	height: 365px;
	margin-left: -20px;
	margin-top: 40px;
}

/* Checklist */

.situation-title 
{
	font-size: 14px;
	font-family: Verdana;
	color: #276e91;
}

#checklist-left {
	float: left;
	width: 260px;
	padding: 45px 0 0 45px;
}

#checklist-right h2  
{
	margin: 0; padding: 0;}

#checklist-right {
	position: relative;
	margin: 0;
	float: left;
	padding: 45px 50px 0 0;
	width : 570px;
}

#checklist-right #checklist-thumb {
	position: absolute;
	top: 40px;
	left: 520px;
}

#checklist {
	background-image: url(../images/bg_checklist.gif);
	background-repeat: no-repeat;	
	width: 265px;
	height: 365px;
	margin-left: -20px;
	margin-top: 40px;
}

#checklist ul {
	list-style: none;
	padding-top: 85px;
}

#checklist ul li {

}

#checklist ul li a {
	text-decoration: none;
	font-size: 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #286c91;
	display: inline;
	line-height: 30px;
	width: 215px;
	padding-left: 10px;
}

#checklist ul li a:hover, #checklist ul li a.active {
	font-weight: bold;
}

#checklist ul li a.seen {
	/* text-decoration: line-through; */
	background-image: url(../images/checklist-line-through.gif);
	background-repeat: repeat-x;
	background-position: 0 12px;
	display: inline;
	line-height: 30px;
}

.checklist-item {
	margin-top: 35px;
	margin-bottom: 35px;
}

.checklist-item .title {
	font-size: 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #3ea3d2;
	font-weight: bold;
	border-bottom: 1px solid #3ea3d2;
	padding-bottom: 5px;
}

/* Situations */

#situations {
	border-top: 1px solid #286f91;
	width: 560px;
	margin-top: 10px;
}

.left {
	float: left;
	clear: both;
}

.right {
	float: left;
	margin-left: 30px;
}

.situation {
	width: 250px;
	margin-top: 20px;
	margin-bottom: 10px;
	height: 110px;
	padding-left: 10px;
	padding-top: 10px;
	cursor: pointer;
	border: 1px solid white; /* for Webkit browser (FF/Safari) */
	height: 100%; /* For IE 7+ */
}

.situation:hover {
	background-color: #e9f1f5;
}

.situation img {
	float: left;
	margin-left: -0px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.situation .title {
	margin-top: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #3ea3d2;
	width: 170px;
	float: left;
}

.situation .bottom, #checklist-left .bottom {
	clear: both;
	margin-top: 20px;
	height: 35px;
	border-bottom: 1px dashed #286f91;
	border-top: 1px solid #286f91;
	padding-left: 0px;
}

.bottom, .bottom a
{
	line-height: 35px;
	font-size: 15px;
	color: #266C91;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;		
	text-decoration: none;
	
}

#checklist-left .bottom 
{
	width: 230px;
}

.bottom a:hover 
{
	color: #7ea9bb;
}

.situation .title strong { color: #266d92; }

/* Story info */

.story-info {
	background-image: url(../images/bg_story_info.gif);
	background-repeat: no-repeat;
	height: 184px;
	padding-left: 13px;
	margin-bottom: 15px;
	margin-left: 40px;
}

.story-info-closed {
	background-image: url(../images/bg_story_info_closed.gif);
	background-repeat: no-repeat;
	height: 60px;
	padding-left: 13px;
	margin-bottom: 15px;
	margin-left: 40px;
}

.story-info-closed:hover {
	background-image: url(../images/bg_story_info_closed_active.gif);
	cursor: pointer;
}

.story-info-closed p {
	color: white;
	width: 160px;
	line-height: 120%;
	margin-top: 3px;
	padding: 0;

}

.story-info h2, .story-info-closed h2, .story-info-closed h2 a { 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	padding-top: 2px;
	margin: 0;
	text-decoration: none;
}

.story-info-text {
	width: 182px;
	margin-top: 15px;
	line-height: 150%;
}

/* Contact page */

div.contact 
{
	margin-top: 32px;
	padding: 0;	
	position: relative;	
}

div.contact fieldset 
{
	border: none;
	margin: 0;
	padding :0;
}

table.contact-table
{
	width: 532px;	
}

table.contact-table tr td.col1 
{
	width: 180px;
	height: 35px;
	background-color: #e0eec4;
	vertical-align: top;
	padding-top: 5px;
	padding-left: 15px;	
}

table.contact-table tr td.last-left
{
	background-image: url(../images/bg_contact_question.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
}

table.contact-table tr td.col2
{
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 17px;
	background-image: url(../images/border_dashed_green.gif);
	background-repeat: repeat-x;
	background-position: -1 left;	
	position: relative;
}

table.contact-table tr td.submit
{
	height: 60px;
	text-align: left;		
}

table.contact-table tr td.submit input
{
	display:inline-block; 
	vertical-align:middle;	
}

#incomplete-message 
{
	display:inline-block; 
	vertical-align:middle;	
	padding-right: 15px;
}

table.contact-table textarea 
{
	height: 157px;
	width: 261px;
}

div.bottom-line
{
   position: absolute;
   background-image : url(../images/border_dashed_green.gif);
   background-repeat : repeat-x;   
   height :1px;
   bottom: 25px;
   left: 200px;
   width: 350px;
}

/* Form validation */

.field-validation-error
{
    color: #ff0000;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

/* Footer elements */

#footer-text {
	position:absolute;
	left: 515px;
	top: 15px;	
	width: 270px;
	color: #999999;
	font-size: 10px;
}

#footer-logos {
	position:absolute;
	left: 800px;
	top: 15px;
}

#footer-logos img {
	vertical-align: middle;
	padding-left: 2px;
	padding-right: 2px;
}

/* Misc */

div.error 
{
	padding: 5px;
	margin: 10px;
	border: 1px solid red;
	background-color: #FFC0CB;
	width: 350px;	
}

h1.error 
{
	font-family: Verdana;
	color: Red;
	font-size: 24px;
}

a em {
	font-size: 24px;
}

.float-right 
{
	float: right;
}

.float-left
{
	float: left;
}

div.spacer { clear: both; }

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}