/*
Workbench 1.x CSS. (https://github.com/xproot/Workbench1CSS)
CSS Style Destined to look like Workbench 1.x
by xproot

Recommended to use Topaz New alongside it (https://www.dafont.com/topaz-new.font)
*/

html, body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #0055AA;
    color: #FFFFFF;
    margin: 0;
}

a {
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bolder;
    letter-spacing: 1px;
}

a:hover {
    outline-style: dotted;
    outline-width: 1px;
}

a:active {
    outline-style: solid;
    outline-width: 1px;
}

div.topbar a, div.window .titlebar a {
    color: #0055AA;
}

div.topbar {
    background-color: #FFFFFF;
    color: #0055AA;
    padding-left: 20px;
    height: 20px;
}

div.topbar span {
    float: left;
    margin-top: 3px;
}

div.topbar .margin { margin-left: 5%; }

div.topbar .buttons, div.window .titlebar .buttons { float: right; }

div.window {
    margin: auto;
    margin-top: 10px;
    width: fit-content;
    outline-style: solid;
    outline-width: 2px;
    background-color: #0055AA;
}

div.window p { margin: 0; }

div.window .titlebar {
    background-color: #FFFFFF;
    color: #0055AA;
    height: 20px;
}

div.window .titlebar span {
    float: left;
    margin-top: 3px;
}

div.window .titlebar img {
    width: fit-content;
    margin-left: auto;
}

div.window .content {
    overflow: scroll;
    width: 100%;
}

div.window.fullwidth { width: 100%; }

div.content.noscroll { overflow: hidden; }

@media (max-width: 760px), screen and (orientation: portrait) {
    div.topbar { padding-left: 10px; }

    div.window { width: 100%; }

    div.window.titlebar { padding-left: 10px; }

    div.window .content { overflow: hidden; }
}