/*
 * UDM 4.5 replacement stylesheet
 *
 * Replacement for udm-style.php
 *
 * Existing UDM HTML can remain unchanged.
 */


/* ============================================================
   BASIC RESET
   ============================================================ */

#udm,
#udm ul,
#udm li {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ============================================================
   MAIN MENU
   ============================================================ */

#udm {
    position: absolute;

    left: 11px;
    top: 76px;

    z-index: 1000;

    /*
     * The horizontal UDM menu should not wrap.
     */
    width: auto;

    white-space: nowrap;

    overflow: visible;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;

    text-align: left;
}


/*
 * IMPORTANT:
 *
 * Use floated top-level items rather than inline-block.
 *
 * This eliminates the whitespace between the <li> elements
 * in the HTML and reproduces the way the original UDM
 * horizontal navbar laid out its items.
 */
#udm > li {
    position: relative;

    display: block;
    float: left;

    width: auto;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}


/* ============================================================
   MAIN MENU LINKS
   ============================================================ */

#udm > li > a,
#udm > li > a:link,
#udm > li > a:visited {
    display: block;

    width: auto;

    white-space: nowrap;

    box-sizing: border-box;

    text-decoration: none;

    /*
     * Original UDM colours.
     */
    background-color: #0066cc;
    color: #ffffff;

    /*
     * Single 1px border.
     */
    border: 1px solid #000000;

    /*
     * Original UDM horizontal padding.
     */
    padding: 2.5px 7.77px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;

    cursor: pointer;
}


/*
 * Top-level hover/focus.
 */
#udm > li > a:hover,
#udm > li > a:focus,
#udm > li:hover > a {
    background-color: #45d443;
    color: #ffffff;
}


/* ============================================================
   SUBMENUS
   ============================================================ */

/*
 * Every submenu is absolutely positioned and initially hidden.
 *
 * JavaScript controls display/visibility.
 */
#udm ul {
    position: absolute;

    display: none;
    visibility: hidden;

    z-index: 1100;

    /*
     * Original UDM submenu width.
     */
    width: 9.8em;

    height: auto;

    /*
     * IMPORTANT:
     *
     * No 2px padding here.
     *
     * The original screenshot showed a double-looking border
     * because the UL had its own border and the links also had
     * borders. The submenu now has one clean 1px outer border.
     */
    margin: 0;
    padding: 0;

    background-color: #c0c0c0;

    border: 1px solid #333333;

    box-sizing: border-box;

    text-align: left;

    white-space: normal;

    overflow: visible;
}


/* ============================================================
   FIRST-LEVEL SUBMENU POSITION
   ============================================================ */

#udm > li > ul {
    left: 0;
    top: 100%;

    /*
     * Original UDM offsets.
     */
    margin-left: -7px;
    margin-top: -12px;
}


/* ============================================================
   SUBMENU LIST ITEMS
   ============================================================ */

#udm ul li {
    position: relative;

    display: block;

    float: none;

    width: 100%;

    margin: 0;
    padding: 0;

    white-space: normal;
}


/* ============================================================
   NESTED SUBMENUS
   ============================================================ */

#udm ul ul {
    left: 100%;
    top: 0;

    margin-left: -7px;
    margin-top: -12px;
}


/* ============================================================
   SUBMENU LINKS
   ============================================================ */

/*
 * IMPORTANT:
 *
 * There is NO border around each link.
 *
 * The submenu UL has the single 1px outer border and the
 * individual menu items have a 1px bottom separator.
 *
 * This prevents the double-line appearance in the screenshot.
 */

#udm ul li a,
#udm ul li a:link,
#udm ul li a:visited {
    display: block;

    width: 100%;

    box-sizing: border-box;

    white-space: normal;

    text-decoration: none;

    background-color: #c0c0c0;
    color: #000000;

    /*
     * No complete border here.
     */
    border: 0;

    /*
     * Single-pixel separator between submenu items.
     */
    border-bottom: 1px solid #333333;

    padding: 2.5px 7.77px;

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;

    cursor: pointer;
}


/*
 * Remove the separator from the final item in each submenu.
 *
 * The UL's 1px outer border provides the bottom edge.
 */
#udm ul li:last-child > a {
    border-bottom: 0;
}


/* ============================================================
   SUBMENU HOVER / FOCUS
   ============================================================ */

#udm ul li a:hover,
#udm ul li a:focus,
#udm ul li:hover > a {
    background-color: #666666;
    color: #ffffff;
}


/* ============================================================
   CLEARING
   ============================================================ */

#udm:after {
    content: "";
    display: block;
    clear: both;
}


/* ============================================================
   FOCUS
   ============================================================ */

#udm a:focus {
    outline: 1px dotted #000000;
}


/* ============================================================
   PROTECT AGAINST OUTSIDE SITE CSS
   ============================================================ */

/*
 * Prevent general site CSS from changing the submenu layout.
 */
#udm ul li,
#udm ul li a {
    float: none;
}


/*
 * Keep submenu ULs as block containers.
 */
#udm ul {
    list-style: none;
}