*, *:before, *:after {
    box-sizing: border-box;
    cursor: default;
}

body, html {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    font-size: 16px;
    font-family: Segoe UI, "Open Sans", sans-serif;
    color: #fff;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;

    padding: 1px 1px 40px;

    background: #3ca4dd url(../images/wallpaper.jpg) no-repeat fixed center center / cover;
}
body:after {
    content: url(../images/checked-indicator.png);
    display: none;
}

body > a {
    display: inline-block;
    width: 72px; height: 90px;
    touch-action: none;

    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 3px #000, 0 1px 3px #000, 0 1px 3px #000, 0 1px 3px #000;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
}

body > a > i {
    position: relative;
    display: block;
    width: 48px; height: 48px;
    margin: 6px auto;

    pointer-events: none;
}
body > a > i > img {
    position: relative;
    width: 48px; height: auto;
}
body > a > i:after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 16px; height: 16px;

    background: url(../images/shortcut-overlay.png) no-repeat center / 100%;
}

body > nav.modal {
    position: absolute;
    touch-action: none;

    font-size: 0.8em;
    color: #000;
    box-shadow: 3px 3px 2px 0px RGBA(0, 0, 0, 0.5);
    border: 2px solid #f5f5f5;
    outline: 1px solid #979797;
    background: #f0f0f0 url(../images/separator-vertical.png) repeat-y 26px 0;

    animation: fade-in 0.2s 1;
}
body > nav.modal:not(.active) {
    pointer-events: none;
    opacity: 0;
    animation: none;
}
body > nav.modal > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body > nav.modal > ul + ul {
    padding-top: 8px;
    background: url(../images/separator-horizontal.png) no-repeat 28px 4px / 100% 2px;
}
body > nav.modal > ul > li {
    position: relative;
    margin: 2px 0 0;
    padding: 1px 0 3px 64px;

    border: 1px solid transparent;
    border-radius: 2px;
}
body > nav.modal > ul > li[has-children] { background: url(../images/child-menu-indicator.png) no-repeat 97% 7px; }
body > nav.modal > ul > li[checked]:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 23px; height: calc(100% + 2px);

    background: url(../images/checked-indicator.png) no-repeat center / 9px 11px;
    border: 1px solid RGBA(142, 191, 251, 0.9);
    border-radius: 2px;
}
body > nav.modal > ul > li[disabled] { color: #6d6d6d; }

body > nav.modal > ul > li:hover:not([disabled]) {
    border-color: RGBA(142, 191, 251, 0.9);
    background-color: RGBA(142, 191, 251, 0.1);
}

body > nav.taskbar {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    width: 100%; height: 40px;
    touch-action: none;

    background: url(../images/taskbar-background.png) center / 100% 100%;
    background:
        url(../images/taskbar-background.png) center / 100% 100%,
        linear-gradient(to right, RGBA(0, 0, 0, 0.1) 80px, RGBA(0, 0, 0, 0)) no-repeat left / 100px 100%,
        linear-gradient(to left, RGBA(0, 0, 0, 0.1) 120px, RGBA(0, 0, 0, 0)) no-repeat right / 140px 100%,
        url(../images/taskbar-overlay.png) no-repeat bottom left / cover;
}
body > nav.taskbar:not([data-locked]):before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -2px;
    width: 100%; height: 4px;

    cursor: ns-resize;
}
body > nav.taskbar > * {
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    touch-action: none;
}
body > nav.taskbar > button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    display: block;
}

body > nav.taskbar > time {
    padding: 2px 16px 0;
    float: right;

    font-size: 0.8em;
    text-align: center;
    white-space: pre-line;
}

body > nav.taskbar > button[data-action="show-desktop"] {
    width: 17px;
    float: right;

    background: url(../images/show-desktop.png) no-repeat top right / 17px auto;
}
body > nav.taskbar > button[data-action="show-desktop"]:hover {
    background-position: center right;
}
body > nav.taskbar > button[data-action="show-desktop"]:active {
    background-position: bottom right;
}

body > nav.taskbar > button[data-action="start"] {
    position: relative;
    width: 38px;
    margin: 0 8px;

    background: url(../images/start-button.png) no-repeat -8px -7px / 54px auto;
}
body > nav.taskbar > button[data-action="start"]:after {
    content: "";
    position: absolute;
    left: -8px; top: -7px;
    width: 54px; height: 54px;
    pointer-events: none;

    background: url(../images/start-button.png) no-repeat bottom / 100% auto;
    opacity: 0;

    transition: opacity 0.3s;
}
body > nav.taskbar > button[data-action="start"]:hover:after {
    opacity: 1;
}
body > nav.taskbar > button[data-action="start"]:active:after {
    background-position: center;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}