/*----------------------------------
 | Preliminaries: body and #wrapper |
 -----------------------------------*/
 /*OPGELET: GETEST EN GOEDGEKEURD OP /24/8/2006!!!! Voorstel definitieve versie!*/

body {
	/*The 76 % is based on Owen Briggs' fantastic work at http://www.thenoodleincident.com/tutorials/typography/*/
	font-size: 76%; 
	font-family: arial, helvetica, serif;
	text-align: left;
	padding: 0em;
	margin: 0em;
	}
/*The wrapper simply sets everything to zero, so all browsers start counting equally.*/
#wrapper {
	padding: 0;
	margin: 0;
	width: 100%;
	}

 /*----------------------------------
 | 		The Menu            |
 -----------------------------------*/	
/*Based on:
|Son of Suckerfish dropdown menus| by Patrick Griffiths and Dan Webb| http://www.htmldog.com/articles/suckerfish/dropdowns/
|Sliding Doors of CSS Part I| by Douglas Bowman| http://www.alistapart.com/articles/slidingdoors/
|Sliding Doors of CSS Part II| by Douglas Bowman| http://www.alistapart.com/articles/slidingdoors2/
*/
/* Declare font-size and maybe padding (later) */
#menu {
	font-size: 1.0em;
}

/*--------->Top level: the tiles<--------------*/
/*This is the first list, and its elements appear as the menu 'tiles'. Hovering over them will trigger the drop-down
The #tiles nor its children should show any list style*/
#tiles, #tiles ol {
	list-style: none;
	padding: 0;
	margin: 0;
	}

/*The left float makes the tiles appear next to each other. 
The left padding refers to the background image, which is exactly 4 pixels wide. It should not be covered nor can its edge
be visible.
The left margin refers to the border of the background image, which is a black line. The border of the right part of the 
tile is also a black line. If they appear next to each other, a line of two pix appears, which is not very pretty. 
The background image also receives a color. If the image does not appear for one reason or another, the color covers
our ass.
The width can be chosen, I personally prefer it in ems. The 'simplified box model hack' 
(cf. http://www.doxdesk.com/personal/posts/css/20020212-bmh.html): IE only reads the line without the backslash, standard 
browsers also read the line with the backslash. I will use this hack *a lot* so in order to resolve the measuring 
differences in IE.*/
#tiles li {
	float: left;
	padding-left: 9px;
	background: #fff url("../images/left_both.gif") no-repeat left top;
	width: 6.3em;
	w\idth: 6.7em;
	}

/*This is in fact the right side of the tile, with the bigger background-image.
The text-color is white, the anchors should not be underlined.
The background-color is also specified in case the background image is not rendered.
The padding places the text at the right spot, although this is a detail (except for IE?)*/

#tiles a {
	display: block;
	color: #333;
	text-decoration: none;
	background: #fff url("../images/right_both.gif") no-repeat right top;
	padding: 0.4em 1em 0.4em 0.4em;
	paddin\g: 0.4em 0 0.4em 0;
}

/*Changing backgrounds in case of rollover. The backgrounds move down 150px*/
#menu li:hover, #menu li.sfhover{
		background-position: 0% -148px;
		}
#menu li:hover a, #menu li.sfhover a {
		background-position: 100% -148px;
		color: #fff;
		}