/* =============================================
   Responsive Navigation Menu
   ============================================= */

/* --- Base --- */
div#menu {
    min-height: 38px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    overflow: visible;
    position: relative;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}
div#menu ul.menu {
    padding-left: 10px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 4px 0 0;
    display: block;
    float: left;
}
/* submenu show/hide is handled entirely by apycom menu JS (display + width/height animation)
   do NOT use CSS left:-999em hiding or li:hover CSS here — it conflicts with the JS */
div#menu li:hover > ul {
    /* intentionally empty — JS controls visibility */
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    font: normal 14px 'Trebuchet MS', Arial, sans-serif;
    color: #F0E8E0;
    padding: 0 12px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
div#menu a:hover { background: rgba(255,255,255,0.18); color: #FFF; }
div#menu a:hover span { color: #FFF; }

div#menu span {
    display: block;
    cursor: pointer;
    color: #F0E8E0;
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

div#menu ul ul a.parent span {
    background-position: 95% 50%;
    background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(images/item-pointer-mover.gif);
}

/* --- Level 1 --- */
div#menu a {
    padding: 0 12px;
    line-height: 38px;
}
div#menu span {
    margin-top: 0;
    color: #F0E8E0;
}
div#menu ul a:hover span { color: #FFF; }
div#menu ul ul span { color: #ccc; }
div#menu ul ul a:hover span { color: #FFF; }

div#menu li { background: none; }
div#menu li.last { background: none; }

/* --- Level 2 (dropdown) --- */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -2px;    /* JS init also sets left:-2; keep in sync, do NOT use -999em */
    width: 180px;
    padding: 4px 0;
    background: rgba(35,35,35,0.97);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    margin-top: 0;
    z-index: 100;
}
div#menu ul ul a {
    padding: 0 0 0 14px;
    height: auto;
    float: none;
    display: block;
    line-height: 28px;
    color: #CCC;
    border-radius: 0;
}
div#menu ul ul a:hover { background: rgba(255,100,0,0.55); color: #FFF; }
div#menu ul ul span {
    margin-top: 0;
    padding-right: 14px;
    color: #CCC;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li { width: 100%; }

/* --- Level 3 --- */
div#menu ul ul ul {
    padding: 0;
    margin: -28px 0 0 180px !important;
}

/* --- Lava lamp (keep position:absolute so it's out of float flow) --- */
div#menu li.back {
    position: absolute !important;
    background: none !important;
    height: 38px;
    z-index: 8;
    margin: 0;
    pointer-events: none;   /* invisible, just out of flow */
}
div#menu li.back .left {
    display: none;
}