/****** COLOURS ******
1.) Donkergroen: #008080;
2.) Lichtgroen: #7FBFBF;
3.) Lichtergroen: #BFDFDF;
4.) Lichtergroen hover: #E0EFEF
Zwart: #000000;
Wit: #FFFFFF;
*/

/****** TOEDOE ******
- Border springt een paar pixels naar rechts bij het inklappen van een submenu...
- Wanneer je Psychologische test open hebt staan 
en je opent daarna Psychologische hulp, 
dan verspringt er een pixel bij het sluiten.. (zit ook in het voorbeeldscript)
*/



.arrowlistmenu{
width: 160px; /*width of accordion menu*/
}

.arrowlistmenu a{
color: #FFFFFF;
text-decoration: none;
}
.arrowlistmenu a:hover {
color: #FFFFFF;
text-decoration: underline;
}
.arrowlistmenu a:active{
color: #000000;
text-decoration:none;
}

.arrowlistmenu #MenuHorVertTop{ /*Top header with rounded corner image*/
background-color: transparent;
background-image: url(../img/img_kader-zeegroen_top.gif);
background-position: center top;
background-repeat: no-repeat;
}
.arrowlistmenu #MenuHorVertTop:hover{
background-color: transparent;
background-image: url(../img/img_kader-zeegroen_top-over.gif);
background-position: center top;
background-repeat: no-repeat;	
}	

.arrowlistmenu #MenuHorVertBot{ /*Bottom header with rounded corner image*/
background-color: transparent;
background-image: url(../img/img_kader-zeegroen_bot.gif);
background-position: center top;
background-repeat: no-repeat;
}
.arrowlistmenu #MenuHorVertBot:hover{
background-color: transparent;
background-image: url(../img/img_kader-zeegroen_bot-over.gif);
background-position: center top;
background-repeat: no-repeat;
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
margin: 0px 0px 1px 0px; /* 1 pixel tussen menuheaders */
padding: 2px 16px 2px 16px; /*header text is indented 16px*/
background: #008080;
cursor: hand;
cursor: pointer;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 1.25em; /* (15px) */
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
}

.arrowlistmenu .menuheader a{
text-decoration: none;
}

.arrowlistmenu .menuheader:hover{
background-color: #7FBFBF;
text-decoration: underline;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background: #7FBFBF url(../img/arrow-down.gif) 148px 7px no-repeat;
color: #000000;
}

.arrowlistmenu .closedheader{
background: #008080 url(../img/arrow-right.gif) 150px 5px no-repeat;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
}

.arrowlistmenu ul li{
margin-bottom: 1px; /*bottom spacing between menu items*/ /* Oftewel.. de ruimte onder de links (op witte achtergrond) in het submenu */
}

.arrowlistmenu ul li .closedsubheader{ /*Open state CSS for sub menu header*/
background-color: #BFDFDF; !important;
color: #FFFFFF;
cursor: pointer;
background: #BFDFDF url(../img/arrow-right.gif) 150px 5px no-repeat;
}

.arrowlistmenu ul li .opensubheader{ /*Closed state CSS for sub menu header*/
background: #BFDFDF; !important;
color: #000000;
background: #BFDFDF url(../img/arrow-down.gif) 148px 7px no-repeat;
}

.arrowlistmenu ul li a{ /*sub menu headers*/
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 1.25em; /* (15px) */
font-weight: bold;
color: #008080;
display: block;
padding: 2px 0px 2px 16px;
margin: 0px;
}

.arrowlistmenu ul li a.subexpandable{
text-decoration: none;
}

.arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/
text-decoration: underline;
}

.arrowlistmenu div ul li a{ /* 2de menu */
	margin: 0px;
	line-height: 21px;
}

/* 3de menu */
#expandableBorders, #subexpandableBorders {
	width: 143px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #BFDFDF; /*#008080;*/
	border-left-color: #BFDFDF; /*#008080;*/
	padding-left: 15px;
}

.categoryitems li, .subcategoryitems li { /*borders onder de submenu links (op witte achtergrond)*/
	border-top: 1px solid #BFDFDF;
}


/* Firefox (sub)menu uitzondering */
@-moz-document url-prefix() {
	.arrowlistmenu #expandableBorders { /* expandable menu */
		position: relative;
		width:	158px;
		margin: 0px;
		padding: 0px;
	}
	.arrowlistmenu #expandableBorders .categoryitems { /* expandable menu items */
		position: relative;
		width:	158px;
		margin: 0px;
		padding: 0px;
	}
	.arrowlistmenu .categoryitems { /* subexpandable menu */
		position: relative;
		width:	160px;
		margin: 0px;
		padding: 0px;
	}
	.arrowlistmenu #subexpandableBorders .subcategoryitems { /* subexpandable menu items */
		position: relative;
		width:	160px;
		margin: 0px 0px 0px -16px;
		padding: 0px;
	}
}	
/* EIND Firefox uitzondering */


	



#expandableBorders a, #subexpandableBorders a {
	color: #008080;
	text-decoration: none;
}

#expandableBorders ul, 
#expandableBorders li, 
#subexpandableBorders ul,
#subexpandableBorders li {
	/*margin: 0px 0px 0px -8px; margin om de border boven de submenu links (op witte achtergrond), links te laten beginnen
	padding: 0px 0px 0px 0px;*/
}

#expandableBorders li:hover, 
#subexpandableBorders li:hover {
	/*background-color: #BFDFDF;*/
}	

#expandableBorders li a, 
#subexpandableBorders li a {
	/*margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 8px;*/
}

#expandableBorders li a:hover, 
#subexpandableBorders li a:hover {
	text-decoration: underline;
}

#expandableBorders li a:active, 
#subexpandableBorders li a:active {
	color: #000000;
}

#expandableBorders li, #subexpandableBorders li {
	list-style-position: outside;
	list-style-type: none;
	text-transform: lowercase;
}