/* -----------------------------------------------------------------------
	custom styles 

	we have a grid of 950px width 
	we have 24 columns of 30px width and 10px margin in between
	we build upon a grid of 18x18
	
----------------------------------------------------------------------- */

	body, html	{ 
		height:100%; 
		background:url('../images/houten-reintegratie.jpg') repeat-y right; 
		color:#003366;
		font-family:Verdana,Arial,Helvetica;
		font-size:0.82em;
		line-height:1.6em;
		}

/* Heading
-------------------------------------------------------------- */

	h1, h2, h3, h4, h5, h6 { margin:0; padding:0; text-align:left;}
	h1	{ font-size:120%;color:#BB0033; font-weight:bold; margin-bottom:16px;}
	h3	{ font-size:100%; font-weight:bold; color:#fff; }
	h4	{ font-size:100%; color:#003366; font-weight:bold; }
	h5	{ font-size:100%; color:#003366; font-weight:normal; font-style:italic; margin-bottom:15px;}
	

/* Typography
-------------------------------------------------------------- */
	
	.buffer-1 { height:18px; }
	.buffer-2 { height:36px; }
	.buffer-3 { height:54px; }
	.buffer-4 { height:72px; }
	
	a:link, a:visited, a:active { text-decoration:underline; }
	a:hover { color:#ff0000; text-decoration:underline;}
	
	table { width:auto; }
	td { padding:1px 5px; vertical-align:top;}
	td.td-1 { width:30px; }
	td.td-2 { width:60px; }
	td.td-3 { width:90px; }
	td.td-4 { width:120px; }
	td.td-5 { width:150px; }
	td.td-6 { width:180px; }
	td.td-7 { width:210px; }
	td.td-8 { width:240px; }
	td.td-9 { width:270px; }
	td.td-10 { width:300px; }
	td.td-11 { width:330px; }
	td.td-12 { width:360px; }
	td.td-13 { width:390px; }
	td.td-14 { width:420px; }
	
	table.clean tr td { border:none; }

	.normalWeight { font-weight:normal !important;}

	.strong { font-weight:bold !important;}
	
	.left { text-align:left; }
	
	p.right { text-align:right; margin:0; padding:0; } 
	p.nopadding { margin:0; padding:0; }

	.hide { display:none; }
	
	

/* MAIN
-------------------------------------------------------------- */

#logo { 
	position:absolute;
	width:300px;
	height:100px;
	top:30px;
	left:0px;	
}	
#wrapper { 
	min-height:100%;
	background:url('../images/loopbaanadvies.jpg') repeat-y left;
	}


#topMenu { /* height:30px */
	background:#003366; 
	height:30px; 
	padding-left:15px;
	font-family:"Georgia", "Times New Roman", Times, serif;
	font-size:120%;
	}
	
	#topMenu ul {  
		list-style:none; 
		padding: 0;
		margin:0;
	}
	
	#topMenu ul li 	{ 
		margin:0 0 1px 0; 
		float:left;
		padding:7px 15px 5px 0;
	}
		
	#topMenu li a {
		color:#CCDDEE;
		text-decoration:none;
	}
		
	#topMenu a:hover {
		color:#fff;
	}	
		
	#topMenu li.active a {
		color:#ffffff;
		text-decoration:underline;
	}
	
	
	

#header {
	height:115px;
	background:url('../images/psychologisch-adviesbureau.jpg') no-repeat;
	}

	#header .rightContainer	{ /* 350px */
		float:right;
		width:450px;
		height:115px;
		background:url('../images/reintegratie-assessment.jpg') no-repeat top right;
		}
		
		#header .rightContainer .left {
			width:180px;
			float:left;
			padding:0 10px;
			}
			
			#header .rightContainer .left ul {  
				list-style:none; 
				padding: 45px 0 0 70px;
				margin:0;
			}
		
			#header .rightContainer .left ul li 	{ 
				margin:0 0 1px 0; 
				float:left;
				padding:0 10px 0 0;
				font-weight:bold;
			}
				
			#header .rightContainer .left li a {
				color:#003366;
				text-decoration:none;
			}
				
			#header .rightContainer .left a:hover {
				color:#BB0033;
			}
		
		#header .rightContainer .right {
			width:230px;
			float:right;
			padding:0 10px;
			}
			
			#header .rightContainer .right ul {  
				list-style:none; 
				padding: 3px 10px 0 0;
				margin:0;
			}
		
			#header .rightContainer .right ul li 	{ 
				margin:0 0 1px 0; 
				font-weight:bold;
				padding:1px 0 0 0;
				text-align:right;
			}
				
			#header .rightContainer .right li a {
				color:#003366;
				text-decoration:none;
			}
				
			#header .rightContainer .right a:hover {
				color:#BB0033;
			}

#main {
	background:url('../images/assessment-utrecht.gif') no-repeat 15px 15px;
	min-height:600px;
	padding:20px 0 0 35px;
	text-align:left;
	}		
				
	#main ul, #main ol {
		margin: 0 3.5em 2.5em;
		}

	#main .rightContainer	{ /* 250px */
		float:right;
		width:222px;
		padding:0 14px 14px 14px;
		margin-left:15px;
		display:inline;
		margin-bottom:10000px;
		padding-bottom:-10000px;
		}			
		#main .rightContainer ul {  
			list-style:none; 
			padding: 3px 10px 0 0;
			margin:0;
			}
		
		#main .rightContainer ul li 	{ 
			margin:0 0 1px 0;
			padding:0 0 0 10px;
			text-align:left;
			background:url('../images/bullit.gif') no-repeat 0 7px;
			}
				
		#main .rightContainer li a {
			color:#CCDDEE;
			text-decoration:none;
			}
				
		#main .rightContainer a:hover {
			color:#ffffff;
			}
				
		#main .rightContainer li.active a {
			color:#ffffff;
			text-decoration:underline;
			}
				
		#main .rightContainer li.active a:hover {
			color:#ffffff;
			text-decoration:underline;
			}


		#main  ul#listPages-1 {  
			margin-bottom:25px;
			}
		
		#main  ul#listPages-1 li 	{ 
			margin:0 0 1px 0;
			padding:0;
			text-align:left;
			}
				
		#main  ul#listPages-1 li a {
			color:#003366;
			text-decoration:underline;
			font-weight:bold;
			}	
				
		#main  ul#listPages-1 li a:hover {
			color:#BB0033;
			text-decoration:underline;
			}		
				
		#main  .sitemap {
			}		
				
			#main  .sitemap a {
				color:#ccc;
				text-decoration:none;
				}		
				
			#main  .sitemap a:hover {
				color:#999;
				text-decoration:none;
				}
		#main .callToAction {
			background:#990000;
			padding:10px;
			margin-right:27px;
			margin-top:20px;
			color:#fff;
			font-size:1.3em;
			font-weight:bold;
			}
			#main .callToAction span {
				font-size:0.82em;
				font-weight:normal;
				}
			#main .callToAction a {
				color:#fff;
				}
			#main .callToAction a:hover {
				color:#fff;
				}