#menuwrapper {
        width: 190px;
        margin-left: 0px;
        margin-bottom: 10px;
}
/* Unless you know what you do, do not touch this */
ul#primarymenu, #primarymenu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: 190px;
        margin-left: 1px;
}
ul#primarymenu ul ul {
/* no bump down for third level ul */
        top: 0px;
}
ul#primarymenu li {
        margin-bottom: -1px;
        position: relative;
        padding: 1px 0px 1px 0px;
}
ul#primarymenu li li {
                width: 190px;
        padding: 0px;
        background-image: none;
        background-color: #E6E6E6;
}
ul#primarymenu li li li {margin-bottom: 0px;}

/* Styling the basic apperance of the menu "a" elements */
ul#primarymenu li a {
        font-size: 1em;
        font-weight: normal;
        padding: 0.4em 0.25em 0.25em 0.25em;
        display: block;
        text-decoration: none;
        color: #333;
}

ul#primarymenu li li.parent a.parent 
{
        background-image: url(../Images/menu_right.png);
        background-repeat: no-repeat;
        background-position: right bottom;
}

/* START COLORS */
ul#primarymenu li.purple a.parent {background-color: #6A1485;}
ul#primarymenu li.green a.parent {background-color: #62AA20;}
ul#primarymenu li.cyan a.parent {background-color: #00A6EB;}

/* Reset the background color for child LI's */
ul#primarymenu li.purple ul li a.parent {background-color: transparent;}
ul#primarymenu li.green  ul li a.parent {background-color: transparent;}
ul#primarymenu li.cyan ul li a.parent {background-color: transparent;}

ul#primarymenu li.purple li a:hover {color: #6A1485;}
ul#primarymenu li.green li a:hover {color: #62AA20;}
ul#primarymenu li.cyan li a:hover {color: #00A6EB;}
/* END COLORS */


/*
ul#primarymenu li.purple ul {display: none;}
ul#primarymenu li.purple.menuactive ul {display: block;}

ul#primarymenu li.purple.der_aa_kerk ul {display: none;}
ul#primarymenu li.purple.de_amshoff ul {display: none;}
ul#primarymenu li.purple.noorderkerk ul {display: none;}
ul#primarymenu li.purple.noorderkerk ul {display: none;}
ul#primarymenu li.purple.remonstrantse_kerk ul {display: none;}

ul#primarymenu li.purple.der_aa_kerk.menuactive ul {display: inherit;}
ul#primarymenu li.purple.de_amshoff.menuactive ul {display: inherit;}
ul#primarymenu li.purple.noorderkerk.menuactive ul {display: inherit;}
ul#primarymenu li.purple.noorderkerk.menuactive ul {display: inherit;}
ul#primarymenu li.purple.remonstrantse_kerk.menuactive ul {display: inherit;}
*/

ul#primarymenu a span {
        display: block;
        padding-left: 0.25em;
}

ul#primarymenu li.parent a.parent {color: #FFF;}
ul#primarymenu li.parent a.parent:hover {color: #FFF; font-weight:bold;}
ul#primarymenu li.parent li.parent a.parent {color: #333333;}
ul#primarymenu li.parent li.parent a.parent:hover {     color: #999999; font-weight:bold;}


ul#primarymenu li a.menuactive {
        /* black and bold to set it off from non active */
        color: #FFFFFF;
        font-weight: bold;
}
ul#primarymenu li li a.menuactive {
        /* black and bold to set it off from non active */
        color: #FFFFFF;
        font-weight: bold;
        background-color: #999;
}
ul#primarymenu li li a.menuactive {
        color: #FFF;
        font-weight: normal;
}
ul#primarymenu li ul a {
        text-align: left;
        margin: 0px;
        position: relative;
        padding: 5px 3px 5px 15px;
        font-weight: normal;
        color: #333333;
        border-top: none;
        border-right: none;
        border-left: none;
        background: none;
}

/* Exception for the purple part of the website, we the second level menu is shown directly in that part of the menu */
ul#primarymenu li ul li ul li a {
    padding-left: 30px;
}
ul#primarymenu li ul li ul li ul li a{
    padding-left: 15px;
}

ul#primarymenu li ul li.mainparent a{
    font-weight: bold;
}

ul#primarymenu li ul li.mainparent ul li a{
    font-weight: normal;
}

ul#primarymenu li ul {
        /* very lite #E6E6E6 color, by now you should know what the rest mean */
        background: white;
        margin: 0px;
        padding: 0px;
        width: auto;
        height: auto;
        display: block;
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #374B51;
        /*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
        opacity: 0.95;
        position: relative;
}

/* Fixes IE7 bug */
ul#primarymenu li, #primarymenu li.menuparent {
        min-height: 1em;
}
/* Styling the basic apperance of the second level active page elements (shows what page in the menu is being displayed) */
ul#primarymenu li li.menuactive, #primarymenu li.menuactive.menuparenth li.menuactive {
        background-color:  #ccc;
}
ul#primarymenu li.menuparent span {
        /* padding on left for image */
        padding-left: 0.5em;
}
ul#primarymenu li.menuparent:hover li.menuparent span {
/* remove left padding as image is on right side of text */
        padding-left: 0;
/* right arrow to note it has children, right side of text */
        background: url(../Images/parent.png) no-repeat right center;
}
ul#primarymenu li.menuparenth li.menuparent span,
ul#primarymenu li.menuparenth li.menuparenth span {
/* same as above but this is for IE6, gif image as it can't handle transparent png */
        padding-left: 0;
        background: url(../Images/parent.gif) no-repeat right center;
}
ul#primarymenu li.menuparenth span,
ul#primarymenu li.menuparent:hover span,
ul#primarymenu li.menuparent.menuactive span,
ul#primarymenu li.menuparent.menuactiveh span, {
/* right arrow to note hover */
        background: url(../Images/parent.png) no-repeat left center;
}
ul#primarymenu li li span,
ul#primarymenu li.menuparent li span,
ul#primarymenu li.menuparent:hover li span,
ul#primarymenu li.menuparenth li span,
ul#primarymenu li.menuparenth li.menuparenth li span,
ul#primarymenu li.menuparent li.menuparent li span,
ul#primarymenu li.menuparent li.menuparent:hover li span  {
        background:  none; /*none*/
        padding-left: 0px;
}
/* IE6 flicker fix */
ul#primarymenu li.menuh,
ul#primarymenu li.mnuparenth,
ul#primarymenu li.mnuactiveh {
        color: #899092
}
ul#primarymenu li:hover li a {
/* removes any images set above unless it's a parent or active parent */
        background:  none;
        color: #000;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
ul#primarymenu li:hover ul ul ul,
ul#primarymenu li.menuparenth ul ul ul,
*/
/* for fourth level add
ul#primarymenu ul ul ul li:hover ul,
ul#primarymenu ul ul ul li.menuparenth ul,
*/
ul#primarymenu li:hover ul,
ul#primarymenu ul li:hover ul,
ul#primarymenu ul ul li:hover ul,
ul#primarymenu ul#purplemain ul li:hover ul,
ul#primarymenu li.menuparenth ul,
ul#primarymenu ul li.menuparenth ul,
ul#primarymenu ul ul li.menuparenth ul {
        display: block;
}
/* IE Hack, will cause the css to not validate */
ul#primarymenu li,
ul#primarymenu li.menuparenth {
        _float: left;
        _height: 1%;
}
ul#primarymenu li a {
        _height: 1%;
}