/* Windows XP "Luna" taskbar as the site menu, fixed to the bottom of every
   page, matching the Bliss wallpaper: glossy royal-blue bar, green rounded
   Start button (ESB logo as the flag), blue task buttons (darker = current
   page), light-blue tray with the clock. */
body.hasTaskbar {
    padding-bottom: 2.6rem;
}

.esbTaskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    background: linear-gradient(to bottom, #3168d5 0, #4993e6 4%, #245edb 8%, #245edb 40%, #2160dc 88%, #1941a5 100%);
    border-top: 1px solid #0831d9;
    box-shadow: inset 0 1px 0 #6a9ff4;
    font: bold 0.85rem/1 Tahoma, "Trebuchet MS", "Segoe UI", -apple-system, sans-serif;
    color: #fff;
}

.esbTaskbar a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}

.tbOrb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.1rem 0 0.6rem;
    margin-right: 0.6rem;
    border-radius: 0 0.9rem 0.9rem 0;
    background: linear-gradient(to bottom, #3c9d2c 0, #5fc040 8%, #3a9d2a 50%, #2f8a22 92%, #1f6b17 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset -2px 0 3px rgba(0, 0, 0, 0.35), 1px 0 2px rgba(0, 0, 0, 0.45);
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.tbOrb::after {
    content: 'start';
}

.tbOrb:hover,
.tbOrb.tbActive {
    background: linear-gradient(to bottom, #4fb63c 0, #7fd65e 8%, #4db63a 50%, #3f9e30 92%, #2a7a20 100%);
}

.tbOrb img {
    height: 1.35rem;
    padding: 0.1rem 0.15rem;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.tbTasks {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.3rem 0;
}

.tbTasks a {
    display: inline-flex;
    flex: 0 1 11rem;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0 0.9rem;
    border-radius: 3px;
    background: linear-gradient(to bottom, #3c8ef4 0, #3a86f1 10%, #2f76ea 50%, #2c6fe3 90%, #2660cf 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px #1c4fb3;
}

.tbTasks a:hover {
    background: linear-gradient(to bottom, #5aa3ff 0, #4d99fb 10%, #3f88f5 50%, #3b80ee 90%, #2f6fd9 100%);
}

.tbTasks a.tbActive {
    background: linear-gradient(to bottom, #1b4bb0 0, #1e51bd 50%, #2158c7 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px #12378a;
}

.tbShort {
    display: none;
}

.tbTray {
    display: flex;
    align-items: center;
    padding: 0 1rem 0 1.1rem;
    margin-left: 0.4rem;
    background: linear-gradient(to bottom, #0c8de8 0, #24a5f5 6%, #0f8fe6 40%, #0e84dd 90%, #0a6ec5 100%);
    border-left: 1px solid #0a5bb5;
    box-shadow: inset 1px 0 0 #3fb3ff, inset 0 1px 0 #6cc6ff;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .tbOrb {
        padding: 0 0.8rem 0 0.5rem;
        margin-right: 0.35rem;
        font-size: 1rem;
    }

    .tbTasks a {
        padding: 0 0.5rem;
        font-size: 0.8rem;
    }

    .tbLong {
        display: none;
    }

    .tbShort {
        display: inline;
    }

    .tbTray {
        display: none;
    }
}