/* ************************************************************************** */
/* * BASIS INSTELLINGEN HORIZONTAAL UL LI MENU MET VERTIKALE UITKLAP        * */
/* ************************************************************************** */

#menuLeft ul {
	position: relative;
	top: 0; left: 0;
	margin: 0; padding: 0;
	width: 170px;
	list-style: none;
	z-index: 10;
	}
#menuLeft ul li {
	position: relative;
	float: left;
	clear: left;
	border-bottom: 1px solid #ccc;
	}

#menuLeft li ul {
	width: 240px;
	position: absolute;
	top: 0;
	margin-left:-999em;
	min-height:0;
	}

#menuLeft li ul ul {
	position: absolute;
	left: 100%;
	top: -.1em;
	display: none;
	margin: 0; padding-top: 1px;
	background: transparent;
	z-index: 20; 
	}

/* ************************************************************************** */
/* * STYLING LOSSE MENU ITEMS LEVEL #1                                      * */
/* ************************************************************************** */

#menuLeft ul li a, #menuLeft ul li span {
	display: block;	overflow: hidden;
	text-decoration: none;
	border: 0 !important;
	background: #fff;
	width: 150px; line-height: 1.25em;
	padding: 0 10px;
	color: #000;
	z-index: 11;
	}

	#menuLeft ul li a.first {
	margin-left: 0;
	}

	/* commented backslash mac hiding hack \*/ 
	* html #menuLeft ul li a {height:1%}
  	/* end hack */

#menuLeft li:hover a, #menuLeft li.over a, #menuLeft li:hover span, #menuLeft li.over span {
	color: #000;
	background: #fff;
	z-index: 11;
	}

#menuLeft ul li a.discipline {
	font-weight: bold;
	}
#menuLeft ul li a.active {
	background: #eee;
	color: #000;
	z-index: 11;
	}

#menuLeft ul li:hover a.noitem,
#menuLeft ul li.over a.noitem,
#menuLeft ul li a.noitem {
	cursor: default;
	}

/* ************************************************************************** */
/* * STYLING LOSSE MENU ITEMS LEVEL #2                                      * */
/* ************************************************************************** */

/* this sets all hovered lists to red --------------------------------------- */
#menuLeft li:hover li:hover a, #menuLeft li.over li.over a,
#menuLeft li:hover li a:hover, #menuLeft li.over li a:hover {
    color: #000; background: #ddd;
   	width: 220px; line-height: 1.25em;
	margin: 0; padding: 0 10px;
	z-index: 22;
    }

/* set dropdown to default -------------------------------------------------- */
#menuLeft li:hover li a, #menuLeft li.over li a {
	color: #000; background: #fff !important;
	font-weight: normal;
   	width: 220px; line-height: 1.25em;
	margin: 0; padding: 0 10px;
	display: block;
	z-index: 22;
	}	

/* ************************************************************************** */
/* * STYLING LOSSE MENU ITEMS LEVEL #3 en #4                                 * */
/* ************************************************************************** */

/* this sets all hovered lists to red --------------------------------------- */
#menuLeft li:hover li:hover li:hover a, #menuLeft li.over li.over li.over a,
#menuLeft li:hover li:hover li:hover a:hover, #menuLeft li.over li li a:hover,
#menuLeft li:hover li:hover li:hover li:hover a:hover, #menuLeft li.over li.over li.over li.over a:hover {
    color: #fff; background: #f00;
   	width: 150px; line-height: 1.25em;
	margin: 0; padding: 0 10px;
	z-index: 33;
    }

/* set dropdown to default -------------------------------------------------- */
#menuLeft li:hover li:hover li a, #menuLeft li.over li.over li a,
#menuLeft li:hover li:hover li:hover li a, #menuLeft li.over li.over li.over li a {
	color: #000; background: #ff0;
	font-weight: normal;
   	width: 150px; line-height: 1.25em;
	margin: 0; padding: 0 10px;
	z-index: 33;
	}

/* ************************************************************************** */
/* * OVERIG                                                                 * */
/* ************************************************************************** */

#menuLeft ul li:hover ul ul, #menuLeft ul li.over ul ul,
#menuLeft ul li:hover ul ul ul, #menuLeft ul li.over ul ul ul {
   display: none;
   }

#menuLeft ul li:hover ul, #menuLeft ul li.over ul,
#menuLeft ul li li:hover ul, #menuLeft ul li li.over ul,
#menuLeft ul li li li:hover ul, #menuLeft ul li li li.over ul {
	display: block;
	margin-left: 0;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	}
#menuLeft ul li:hover ul, #menuLeft ul li.over ul {
	margin-left: 170px;
	margin-top: -1px;
	text-align: left;
	}

	
	
	
/* ************************************************************************** */
/* * COLORING MENU                                                          * */
/* ************************************************************************** */

#algemeen #menuLeft ul li { border-bottom: 1px solid #a31c1c; }
#muziek #menuLeft ul li   { border-bottom: 1px solid #e7af37; }
#dans #menuLeft ul li     { border-bottom: 1px solid #eaac88; }
#beeldend #menuLeft ul li { border-bottom: 1px solid #a31c1c; }
#theater #menuLeft ul li  { border-bottom: 1px solid #313688; }
#musical #menuLeft ul li  { border-bottom: 1px solid #eaac88; }

#algemeen #menuLeft li:hover a,
	#algemeen #menuLeft li.over a { background: #d18d8d; }
#muziek #menuLeft li:hover a,
	#muziek #menuLeft li.over a   { background: #f3d79b; }
#dans #menuLeft li:hover a,
	#dans #menuLeft li.over a     { background: #f4d5c3; }
#beeldend #menuLeft li:hover a,
	#beeldend #menuLeft li.over a { background: #d18d8d; }
#theater #menuLeft li:hover a,
	#theater #menuLeft li.over a  { background: #c1c2db; }
#musical #menuLeft li:hover a,
	#musical #menuLeft li.over a { background: #f4d5c3; }

#algemeen #menuLeft ul li a.active { background: #e3baba; }
#muziek #menuLeft ul li a.active   { background: #f8e7c3; }
#dans #menuLeft ul li a.active     { background: #f9e6db; }
#beeldend #menuLeft ul li a.active { background: #e3baba; }
#theater #menuLeft ul li a.active  { background: #989ac3; }
#musical #menuLeft ul li a.active  { background: #f9e6db; }

#algemeen #menuLeft li:hover li:hover a, #algemeen #menuLeft li.over li.over a,
#algemeen #menuLeft li:hover li a:hover, #algemeen #menuLeft li.over li a:hover {
	background: #d18d8d !important;
	}
#muziek #menuLeft li:hover li:hover a, #muziek #menuLeft li.over li.over a,
#muziek #menuLeft li:hover li a:hover, #muziek #menuLeft li.over li a:hover {
	background: #f3d79b !important;
	}
#dans #menuLeft li:hover li:hover a, #dans #menuLeft li.over li.over a,
#dans #menuLeft li:hover li a:hover, #dans #menuLeft li.over li a:hover {
	background: #f4d5c3 !important;
	}
#beeldend #menuLeft li:hover li:hover a, #beeldend #menuLeft li.over li.over a,
#beeldend #menuLeft li:hover li a:hover, #beeldend #menuLeft li.over li a:hover {
	background: #d18d8d !important;
	}
#theater #menuLeft li:hover li:hover a, #theater #menuLeft li.over li.over a,
#theater #menuLeft li:hover li a:hover, #theater #menuLeft li.over li a:hover {
	background: #c1c2db !important;
	}
#musical #menuLeft li:hover li:hover a, #musical #menuLeft li.over li.over a,
#musical #menuLeft li:hover li a:hover, #musical #menuLeft li.over li a:hover {
	background: #f4d5c3 !important;
	}

	
#algemeen #menuLeft ul li:hover ul, #algemeen #menuLeft ul li.over ul,
#algemeen #menuLeft ul li li:hover ul, #algemeen #menuLeft ul li li.over ul,
#algemeen #menuLeft ul li li li:hover ul, #algemeen #menuLeft ul li li li.over ul {
	border-left: 1px solid #a31c1c;	border-top: 1px solid #a31c1c;
	}
#muziek #menuLeft ul li:hover ul, #muziek #menuLeft ul li.over ul,
#muziek #menuLeft ul li li:hover ul, #muziek #menuLeft ul li li.over ul,
#muziek #menuLeft ul li li li:hover ul, #muziek #menuLeft ul li li li.over ul {
	border-left: 1px solid #e7af37;	border-top: 1px solid #e7af37;
	}
#dans #menuLeft ul li:hover ul, #dans #menuLeft ul li.over ul,
#dans #menuLeft ul li li:hover ul, #dans #menuLeft ul li li.over ul,
#dans #menuLeft ul li li li:hover ul, #dans #menuLeft ul li li li.over ul {
	border-left: 1px solid #eaac88;	border-top: 1px solid #eaac88;
	}
#beeldend #menuLeft ul li:hover ul, #beeldend #menuLeft ul li.over ul,
#beeldend #menuLeft ul li li:hover ul, #beeldend #menuLeft ul li li.over ul,
#beeldend #menuLeft ul li li li:hover ul, #beeldend #menuLeft ul li li li.over ul {
	border-left: 1px solid #a31c1c;	border-top: 1px solid #a31c1c;
	}
#theater #menuLeft ul li:hover ul, #theater #menuLeft ul li.over ul,
#theater #menuLeft ul li li:hover ul, #theater #menuLeft ul li li.over ul,
#theater #menuLeft ul li li li:hover ul, #theater #menuLeft ul li li li.over ul {
	border-left: 1px solid #313688;	border-top: 1px solid #313688;
	}
#musical #menuLeft ul li:hover ul, #musical #menuLeft ul li.over ul,
#musical #menuLeft ul li li:hover ul, #musical #menuLeft ul li li.over ul,
#musical #menuLeft ul li li li:hover ul, #musical #menuLeft ul li li li.over ul {
	border-left: 1px solid #eaac88;	border-top: 1px solid #eaac88;
	}