/*Made by Koen Roelandt - http://www.krowland.net*/
 /*----------------------------------
 | Preliminaries: body and #wrapper |
 -----------------------------------*/


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/
*/
#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 9 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 background image also receives a color. 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 IE5.*/
#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.*/

#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 148px*/
#menu li:hover, #menu li.sfhover{
		background-position: 0% -148px;
		}
#menu li:hover a, #menu li.sfhover a {
		background-position: 100% -148px;
		color: #fff;
		}

/*------------->Second level: the drop-down list<--------------*/
/*First, we hide all the lists of the second level: we give them an absolute position at -999em, far away from the screen*/
#tiles li ol {
	position: absolute;
	left: -999em;
	width: 16.5em;
	w\idth: 17.5em;
	color: #000;
	background: #F1F1F1;
	border: 1px solid #999;
	}


/*Menu level 2*/
/*ol.left is a ol class for the menu items at the right hand side of the menu. They have to be oriented to the left because otherwise the menu components go off-screen.*/

#tiles li.daddy {
	background: url("../images/rightarrow.gif") 90% 50% no-repeat;
	}

#tiles ol.left li.daddy {
	 background: url("../images/leftarrow.gif") 5% 50% no-repeat;
	 padding-left: 2em;
	 }

#tiles li ol li {
	width: 18.3em;
	w\idth: 16.75em;
	background: transparent;
	}

#tiles li ol.left li {
	width: 16.3em;
	w\idth: 15.5em;
	padding-left: 2em;
	}

#tiles li ol li a{
	background: transparent;
}

/*Menu level 3*/
#tiles li ol ol {
	margin: -2em 0 0 17.5em;
	mar\gin: -2.1em 0 0 16.7em;
	border: 1px solid #999;
}
#tiles li ol.left ol {
	margin-left: -16.5em;
	mar\gin-left: -17.8em;
}

	
/*Dropdown in case of hover*/
#tiles li:hover ol ol, #tiles li:hover ol ol ol, #tiles li.sfhover ol ol, #tiles li.sfhover ol ol ol {
	left: -999em;
}
#tiles li:hover ol, #tiles li li:hover ol, #tiles li li li:hover ol, #tiles li.sfhover ol, #tiles li li.sfhover ol, #tiles li li li.sfhover ol {
	left: auto;
}
#tiles li:hover ol a, #tiles li li:hover ol a, #tiles li li li:hover ol a, #tiles li.sfhover ol a, #tiles li li.sfhover ol a, #tiles li li li.sfhover ol a {
	color: #000;
}
#tiles li:hover ol.left, #tiles li.sfhover ol.left {
	margin-left: -7.7em;
	mar\gin-left: -11.2em;
}
#menu #tiles li ol li:hover, #menu #tiles li ol li.sfhover {
	background: #06c;	
}
#menu #tiles li ol li:hover a, #menu #tiles li ol li.sfhover a {
	color: #fff;	
}
#menu #tiles li ol li:hover ol li, #menu #tiles li ol li.sfhover ol li {
	background: #F1F1F1;	
}
#menu #tiles li ol li:hover ol li a , #menu #tiles li ol li.sfhover ol li a {
	color: #000;
}
#menu #tiles li ol li ol li:hover, #menu #tiles li ol li ol li.sfhover {
	background: #06c;
}
#menu #tiles li ol li ol li:hover a , #menu #tiles li ol li ol li.sfhover a {
	color: #fff;
}
/*Change arrow in case of hover in daddy class*/
#menu #tiles li ol li.daddy:hover {
	background: #06c url("../images/rightarrow_over.gif") 90% 50% no-repeat;
	}
#menu #tiles li ol.left li.daddy:hover {
	background: #06c url("../images/leftarrow_over.gif") 5% 50% no-repeat;
	 }
/*http://www.ibloomstudios.com/article1/*/
#tiles li ol{margin-left: -9px;#}