* {margin: 0; padding: 0; border: 0;}

body, html 
{
height: 100%;
background: url(../afbeeldingen/background.jpg) repeat-x top left #86493b;
text-align: center; 					/*** Centers the design in old IE versions ***/
font-family: "Trebuchet MS";
}

#wrapper 
{
width: 972px; 
margin: 0 auto; /*** Centers the design ***/
min-height: 100%;
background: url(../afbeeldingen/content-background.jpg) no-repeat top right #fff;
text-align: left; 
font-size:12px; 
font-family: Arial;
}
	
* html #wrapper 
{
height: 100%;  	/*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

#clear
{
clear: both;
}

										
#header
{
height: 149px;
background: url(../afbeeldingen/header-background.jpg) no-repeat top left;
}

#header #menutop
{
float:right;
margin-right: 440px;
margin-top: 95px;
}

#header #menutop a
{
font-size:14px;
color: #fff;
text-decoration:none;
font-weight:bold;
}

#header ul
{
list-style-type:none;
margin-top: -34px;
margin-left: 180px;
}

#header ul li
{
line-height: 30px;
}

#header ul li a
{
font-size:14px;
text-decoration: none;
font-weight: bold;
}

#header ul li a#navbelastingen
{
color: #fff;
}

#header ul li a#navadministraties
{
color: #494949;
margin-left: 23px;
}

#header ul li a#navadvies
{
color: #919191;
margin-left: 46px;
}

/* CONTENT AND COLUMNS */

.outer 
{ 
padding-left: 175px;
} 

* html .outer 
{
padding-right: 175px;
} 			    
/*** Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to ***/

.inner 
{
min-height:430px;
width: 797px;               	        /*** This width is for non-IE browsers. Mozilla makes this necessary. 
										Be sure to check your layout in different browsers if you changes this value. 
										Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
padding-bottom: 45px;
}             /*** voor de footer ***/
 

* html .inner 
{ 
width: 100%;
}						/*** div.inner is wider than its container, div.outer, and so overlaps to the right, 		                                        pushing div.right into the proper position. IE expands div.outer instead, requiring a 
										Tan hack to avoid blowing the layout apart. IE gets the original 100% width as in the                             			Livingstone layout. ***/
.float-wrap 
{
float: left;
width: 797px;
margin-left: -175px;
}    			/*** Same length as .outer padding-left but with negative value ***/

#content
{
width:797px;
}

#contentWrap
{
float: left;
width: 415px; 
margin: 0px 0px 0px 30px;
text-align: left;
color: #494949;
}

* html #contentWrap 
{ 
position: relative;
}    			/*** IE needs this  ***/

#contentWrap #kruimelpad
{
margin-top: 20px;
font-size: 10px;
color: #b96552;
}

#contentWrap #kruimelpad a
{
color: #b96552;
}

#contentWrap #kruimelpad a:hover
{
text-decoration:none;
}

#contentWrap h1
{
padding: 10px 0px 15px 0px;
font-size: 18px;
}

#contentWrap h2
{
padding: 0px 0px 15px 0px;
font-size: 14px;
color: #f5866c;
}

#contentWrap h3
{
font-size: 12px;
padding-top: 10px;
}

#contentWrap p
{
padding: 0px 0px 10px 0px;
}

#contentWrap table
{
margin-left: 0px;
margin-bottom: 10px;
line-height: 20px;
font-size: 12px;
color: #494949;
}

table#overzicht
{
border-collapse:collapse;
}

table#overzicht th, table#overzicht td
{
border: 1px solid #494949;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}

#contentWrap ul
{
padding: 0px 0px 10px 20px;
list-style-type: square;
}

#contentWrap ol
{
padding: 0px 0px 10px 30px;
}

#contentWrap a
{
color: #494949;
}

#contentWrap a:hover
{
text-decoration:none;
}

input, textarea
{
border: 1px solid #494949;
width: 200px;
}

textarea
{
height: 95px;
}

input.button
{
background-color: #494949;
color: #fff;
font-weight: bold;
cursor: pointer;
width: 202px
}



/*RIGHT COLUMN */

#right 
{
float: right; 
text-align: left;
color: #fff;
margin-top: -59px;
margin-right: 148px;
min-height: 520px;
}

* html #right 
{
position: relative;                     			/*** IE needs this  ***/
margin-right: 70px; /*70px;*/}                  /*** IE gets this margin. ***/


/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

#menu
{
width: 167px;
list-style-type: none;
}

#submenu
{
list-style-type: none;
}

/* Set up the link size, color and borders */
#menu a, #menu a:visited {display:block;width:131px; font-size:12px; color:#fff; font-weight: bold; height:27px; line-height:26px; text-decoration:none; padding-left: 10px;}

/* Set up the sub level borders */
#menu li a, #menu li a:visited {border-width:0 1px 1px 1px;}
#menu li a.enclose, #menu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#menu li {float:left;}

/* For Non-IE browsers and IE7 */
#menu li:hover {position:relative;}
/* Make the hovered list color persist */
#menu li:hover > a, #menu a.active {color:#7a4136;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#menu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#menu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; width:130px;
}

#submenu{border: 1px solid #fac3b6;background-color: #f5866c;}

/* get rid of the table */
#menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #menu li a:hover {position:relative; color:#7a4136;}

/* For accessibility of the top level menu when tabbing */
#menu li a:active, #menu li a:focus {}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:0px; background-color: #f5866c;}


/* make the second level visible when hover on first level link and position it */
#menu li a:hover ul {
visibility:visible; left:80px; top:14px; lef\t:81px; to\p:15px;
}



/* FOOTER */

#footer 
{
width: 972px; 
height: 45px; 
text-align: center;					/*** The drawback with this solution is that the height of the footer can't be flexible.
				 		 				If you add so much content to the footer that it extends 30px, you will get a vertical                                        scrollbar and the content will overflow the footer if you don't set overflow to hidden 
									     ***/
margin: 0 auto;
margin-top: -45px; 				/*** By using a negative margin-top we now moves the footer up the same amount as the                                        footer height to avoid vertical scrolling. 	
										Remember, if you use borders and padding on your footer you will have to calculate this
										in your negative margin-top value also. ***/	
background: url(../afbeeldingen/footer-background.jpg) top left; 
padding: 8px 0px 8px 0px;
}	
										 /* border-top veroorzaakte verticale scrollbalk in IE7 */	


#footer p
{
font-weight: bold;
color: #fff;
vertical-align: middle;
}

#footer p img
{
margin-left: 7px;
margin-right: 7px;
}

#footer p a
{
color: #fff;
text-decoration:none;
}

#clear
{clear:both;
}