@charset "UTF-8";

/*******************
 * General settings.
 *******************/

/* Remove effect of the non-css strong tag and add css style. */
ul#menu strong
{
    font-weight: normal;
}

/* a elements */
ul#menu a
{
    text-decoration: none; /* no underlining */
    text-align: center;
    font-weight: normal;
    padding-top: 6px;
    display: block; /*links fill the whole surrounding element */
    color: #ffff00;
}

ul#menu li.activeMenu > a
{
    font-weight: bold;
    color: #cd8513;
    color: #ffffff;
}

ul#menu li.inactiveMenu
{
    position: relative; /* so that they are used as reference for
                           absolutely positioned submenues*/
}


ul#menu li.openMenu > a
{
    font-weight: bold;
}

/* This is the margin for all hyperlinks in the floating menus.
 * Note: The third submenu is always floating even if it is open.
 * So the former rule: ul#menu li ul li:closedMenu a { ... }
 * doesn't apply here any longer. ...
 */
ul#menu li ul li a
{
    margin-left: 8px;
}

/* ... So fix the hyperlinks of the second submenu when it is open. */
ul#menu > li.openMenu > ul > li > a
{
    margin-left: 0px;
}

/* External links in the menu
 * TODO: Maybe delete it as we have none?
 */
ul#menu li.externalLink
{
}

/* ul elements */
ul#menu,
ul#menu ul
{
    list-style-type: none;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    width: 172px;
}

/* a:hover doesn't work. Why?
 * This rule shows the floating menu at the side.
 */
ul#menu li.closedMenu:hover > ul, /* sub menu with mouse hover */
ul#menu li.closedMenu a:focus + ul /* for keyboard navigation */
{
    display: block; /* show ul element when hovering over parent li element */
}

/* li elements */
ul#menu li
{
    background-repeat: no-repeat;
    background-position: top left;
}


/****************************
 * First menu level settings.
 ****************************/

ul#menu > li /* first level entries */
{
    background-image: url(menu1.png);
}

ul#menu > li > a:hover, /* mouse over */
ul#menu > li > a:focus /* for keyboard navigation */
{
    background-image: url(menu1X.png);
    background-repeat: no-repeat;
}


/*****************************
 * Second menu level settings.
 *****************************/

ul#menu > li.openMenu > ul /* second level menus */
{
    position: relative;
    padding-bottom: 8px;
    z-index: 1;
    background-image: url(menu2bottom.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

ul#menu > li.openMenu > ul > li /* second level entries */
{
    background-image: url(menu2top.png);
}

ul#menu > li.openMenu > ul > li + li /* second level entries, not the first of them */
{
    background-image: url(menu2.png);
}

ul#menu > li.closedMenu > ul /* closed 2nd level sub menu */
{
    display: none; /* hide ul element*/
    position: absolute;
    top: 0px;
    width: 172px;
    left: 160px;
    z-index: 2;
    padding-bottom: 8px;
    background-image: url(menu2floatbottom.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

ul#menu > li.closedMenu > ul > li /* second level entries */
{
    background-image: url(menu2floattop.png);
}

ul#menu > li.closedMenu > ul > li + li /* second level entries, not the first of them */
{
    background-image: url(menu2float.png);
}

ul#menu > li.openMenu > ul > li > a:hover, /* mouse over */
ul#menu > li.openMenu > ul > li > a:focus /* for keyboard navigation */
{
    background-image: url(menu2topX.png);
    background-repeat: no-repeat;
}

ul#menu > li.openMenu > ul > li + li > a:hover, /* mouse over */
ul#menu > li.openMenu > ul > li + li > a:focus /* for keyboard navigation */
{
    background-image: url(menu2X.png);
    background-repeat: no-repeat;
}

ul#menu > li.closedMenu > ul > li > a:hover, /* sub menu with mouse hover */
ul#menu > li.closedMenu > ul > li > a:focus /* for keyboard navigation */
{
    background-image: url(menu2floattopX.png);
    background-repeat: no-repeat;
}

ul#menu > li.closedMenu > ul > li + li > a:hover, /* sub menu with mouse hover */
ul#menu > li.closedMenu > ul > li + li > a:focus /* for keyboard navigation */
{
    background-image: url(menu2floatX.png);
    background-repeat: no-repeat;
}


/*****************************************
 * Third (and higher) menu level settings.
 *****************************************/

/* The third submenu is always a floating menu,
 * so it is only displayed if the parent li is hovered or has focus,
 * see next rule.
 */
ul#menu > li > ul > li ul /* closed higher level sub menu */
{
    display: none; /* hide ul element*/
    position: absolute;
    top: 0px;
    width: 172px;
    left: 160px;
    z-index: 2;
    padding-bottom: 8px;
    background-image: url(menuNfloatbottom.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

/* Because the third submenu is always a floating menu,
 * display it even if the parent is li.openMenu.
 * The default rule in the general section above is:
 * only display the floating menu if the parent is li.closedMenu.
 */
ul#menu > li > ul > li:hover > ul, /* sub menu with mouse hover */
ul#menu > li > ul > li a:focus + ul /* for keyboard navigation */
{
    display: block; /* show ul element when hovering over parent li element */
}

ul#menu > li > ul > li ul li /* higher level entries */
{
    background-image: url(menuNfloattop.png);
}

ul#menu > li > ul > li ul li + li /* second level entries, not the first of them */
{
    background-image: url(menuNfloat.png);
}

ul#menu > li > ul > li ul li > a:hover, /* sub menu with mouse hover */
ul#menu > li > ul > li ul li > a:focus /* for keyboard navigation */
{
    background-image: url(menuNfloattopX.png);
    background-repeat: no-repeat;
}
ul#menu > li > ul > li ul li + li > a:hover, /* sub menu with mouse hover */
ul#menu > li > ul > li ul li + li > a:focus /* for keyboard navigation */
{
    background-image: url(menuNfloatX.png);
    background-repeat: no-repeat;
}