/* Laerskool Bakenkop */

body {
background-color	: #7080a0;
margin				: 20px 0px 20px 0px;
padding				: 0px;
}

#outer {
width				: 765px; /*765px;*/
margin				: auto; /* center */
}

#inner {
width				: 765px;
background			: #ffffff url(images/bg.jpg) repeat-y; /* gold left bar */
border				: 3px solid #81393c;
float				: left; /* leave out this float and the background image is covered by the left and main div's in Firefox et al??? */
}

#left {
width				: 180px; /* width of left column */
float				: left; 
position			: relative;
padding				: 10px 5px 10px 0px;
z-index				: 10;
}

#main {
float				: right; 
width				: 570px; /* width of main column */
position			: relative;
margin				: 0px 0px 0px 0px;
padding				: 10px 5px 10px 5px;
background-color	: #ffffff;
}

.body { /* purpose is to show a bg image on only the body portion of the page, and not on the top banner */
background-image		:url(images/mainbg.jpg);
background-repeat		:repeat-y;
background-position-x	:center;
}

.clear {
clear				: both;
}

.center {
margin				: auto;
}

/* left column menu */

#left {
padding				: 0px;
margin				: 0px;
}
	
#left ul {
color:black;
list-style-image:url(images/arrow.png);
/*list-style-type: none;*/
margin: 11px; 
padding: 0;
border: 1px solid #4a5a7b;
background-color: #dce9f1;
}

/*
Note: For some obscure reason, in IE the menu list display shifts down when one hovers
on a list item with a secondary list - this is disconcerting.
Removing list-style-type=none and inserting a list-style-image seems to solve this - 
don't ask me why. arrow.png used above is simply a fully-transparent png.
Weird, but it solves the problem! PVC 13-01-2009
*/

#left ul li {
padding				: 0px;
margin				: 0px; 
}

#left li {
background-color	: #dce9f1;
border-bottom		: 1px solid #4a5a7b; /* dark blue */
font-family			: Arial, Verdana, Helvetica, sans-serif;
font-weight			: bold;
font-size			: 0.8em;
position			: relative;
width				: 155px;
padding				: 0px;
}

#left ul li a{
color				: #000000; 
display				: block;
padding				: 4px 0 6px 4px;
text-decoration		: none; 
border-bottom		: 2px solid transparent;
height				: 1%; /* IE quirk */
}

#left a:hover, #left a:focus { 
background-color	: #7080a0;
border-right		: 2px solid #ffffff;
border-bottom		: 2px solid #ffffff;
color				: #ffffff;
height				: 1%; /* IE quirk */
}

#left li ul { /* second-level lists */
display				: none;
position			: absolute;
font-size			: 1.3em;	
width				: 155px;
top					: -12px;
left				: 144px;
background-color	: #dce9f1; /*#005d83;*/
padding				: 0px;
}

#left li ul li {
/*list-style-image:url(images/arrow.png);*/
}

#left li:hover ul, li.over ul { /* lists nested under hovered list items */
display				: block;
z-index: 100;
}


/*required for drop-down menus in IE6 using javascript*/
/*4-6-2009*/

#left li:hover ul, #left li.over ul { display: block; }

ul li { position: relative; }
	
#left li ul {
	position: absolute;
	left: 143px;
	top: -12px;
	display: none;
}

ul li a { display: block; }

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }