/* DESQview/X theme for kiki */

@font-face {
    font-family: dvx-font;
    src: url('Px437_IBM_VGA_8x16.ttf');
    font-weight: normal;
}
@font-face {
    font-family: dvx-font;
    src: url('Px437_IBM_VGA_8x16.ttf');
    font-weight: bold;
}

:root {
    --desktop:       #008080;
    --win-bg:        #C0C0C0;
    --titlebar-bg:   #000080;
    --titlebar-fg:   #FFFFFF;
    --text:          #000000;
    --light:         #FFFFFF;
    --shadow:        #404040;
    --active-border: #008080;
    --content-bg:    #FFFFFF;
}

/* ---- Base ---- */
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--desktop);
    color: var(--text);
    font-family: dvx-font, 'MS Sans Serif', Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ---- Container ---- */
div#container {
    max-width: 860px;
    margin: 0.8em auto;
    padding: 0 0.5em;
}

/* ---- Navbar / button bar ---- */
div#navbar {
    display: flex;
    align-items: center;
    background-color: var(--win-bg);
    padding: 3px 4px;
    border-top:    2px solid var(--light);
    border-left:   2px solid var(--light);
    border-bottom: 2px solid var(--shadow);
    border-right:  2px solid var(--shadow);
    margin-bottom: 6px;
}

div#navmenu { display: flex; flex-wrap: wrap; gap: 3px; }

div.navmenu-item { display: inline-block; }

div.navmenu-item span a {
    display: inline-block;
    background-color: var(--win-bg);
    color: var(--text) !important;
    font-family: dvx-font, 'MS Sans Serif', Arial, sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: 1px 10px 2px;
    border-top:    1px solid var(--light);
    border-left:   1px solid var(--light);
    border-bottom: 1px solid var(--shadow);
    border-right:  1px solid var(--shadow);
}

div.navmenu-item span a:hover {
    border-top:    1px solid var(--shadow);
    border-left:   1px solid var(--shadow);
    border-bottom: 1px solid var(--light);
    border-right:  1px solid var(--light);
    color: var(--text) !important;
}

div#navmenu-right { margin-left: auto; }
div#navmenu-right div.navmenu-item a { text-decoration: none; color: var(--text) !important; }

div.separator { display: none; }

/* ---- Desktop ---- */
div#desktop {
    background-color: var(--desktop);
    padding: 8px;
}

/* ---- Window ---- */
div.window {
    background-color: var(--win-bg);
    outline: 2px solid var(--active-border);
    border-top:    2px solid var(--light);
    border-left:   2px solid var(--light);
    border-bottom: 2px solid var(--shadow);
    border-right:  2px solid var(--shadow);
    max-width: 100%;
    display: grid;
    height: fit-content;
}

/* ---- Title bar ---- */
div.window-titlebar {
    background-color: var(--titlebar-bg);
    display: flex;
    align-items: stretch;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
}

span.win-num {
    display: inline-block;
    background-color: var(--win-bg);
    color: var(--text) !important;
    font-family: dvx-font, 'MS Sans Serif', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0 6px;
    border-right: 1px solid var(--shadow);
    flex-shrink: 0;
    line-height: 18px;
}

span.win-title {
    color: var(--titlebar-fg) !important;
    font-family: dvx-font, 'MS Sans Serif', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
}

/* ---- Window edit menu ---- */
div#window-menu {
    background-color: var(--win-bg);
    border-bottom: 1px solid var(--shadow);
    padding: 2px 4px;
}

/* ---- Content area ---- */
div#content {
    background-color: var(--content-bg);
    border-top:    1px solid var(--shadow);
    border-left:   1px solid var(--shadow);
    border-bottom: 1px solid var(--light);
    border-right:  1px solid var(--light);
    margin: 3px;
    max-height: 68vh;
    overflow-y: auto;

    a { color: #000080 !important; text-decoration: underline; padding: 1px 2px; }
    a:visited { color: #800080 !important; }
    a:hover { background-color: #000080 !important; color: #FFFFFF !important; text-decoration: none; }
}

div.page_content { padding: 0.6em; }
div.page_content img { max-width: 90%; }

/* ---- Page elements ---- */
div.page        { padding: 0.5em; margin-top: 0.5em; }
div.page_title  { padding: 2px 4px; font-weight: bold; border-bottom: 1px solid var(--shadow); margin-bottom: 4px; }
div.title       { font-weight: bold; padding: 2px 4px; }
div.page_header { padding: 2px 4px; }
div.page_date   {}
div.page_time   {}
div.page_author {}

div.subtitle  { font-size: 1.8em; font-weight: bold; }
div.subtitle2 { font-size: 1.4em; font-weight: bold; }

/* ---- Text / links ---- */
a { color: #000080 !important; text-decoration: underline; padding: 1px 2px; }
a:visited { color: #800080 !important; }
a:hover { background-color: #000080 !important; color: #FFFFFF !important; text-decoration: none; }

bold, strong { font-weight: bold !important; }

/* ---- Buttons ---- */
span.button, button {
    display: inline-block;
    margin: 2px;
    background-color: var(--win-bg);
    color: var(--text);
    font-family: dvx-font, 'MS Sans Serif', Arial, sans-serif;
    font-size: 16px;
    padding: 2px 10px;
    border-top:    1px solid var(--light);
    border-left:   1px solid var(--light);
    border-bottom: 1px solid var(--shadow);
    border-right:  1px solid var(--shadow);
    cursor: pointer;
}

span.button:hover, button:hover {
    border-top:    1px solid var(--shadow);
    border-left:   1px solid var(--shadow);
    border-bottom: 1px solid var(--light);
    border-right:  1px solid var(--light);
}

span.button a, button a { text-decoration: none !important; color: var(--text) !important; }

/* ---- Edit form ---- */
div.edit_form { font-family: dvx-font, Arial, sans-serif; }

textarea {
    width: 100%;
    min-height: 10em;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    background-color: var(--content-bg);
    color: var(--text);
    border-top:    1px solid var(--shadow);
    border-left:   1px solid var(--shadow);
    border-bottom: 1px solid var(--light);
    border-right:  1px solid var(--light);
}

/* ---- Errors ---- */
div.error { text-align: center; padding: 1em; }
div.error span { background-color: #000080 !important; color: #FFFFFF !important; padding: 2px 6px; }

/* ---- Footer ---- */
div.footer { text-align: right; color: var(--text); margin-bottom: 1em; font-size: 11px; }

/* ---- Code / pre ---- */
code {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    background-color: var(--content-bg);
    border: 1px solid var(--shadow);
    padding: 0 2px;
}

pre {
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    background-color: var(--content-bg);
    border-top:  1px solid var(--shadow);
    border-left: 1px solid var(--shadow);
    padding: 4px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 16px; height: 16px; }

::-webkit-scrollbar-track {
    background-color: var(--win-bg);
    border-left:  1px solid var(--shadow);
    border-right: 1px solid var(--light);
}

::-webkit-scrollbar-thumb {
    background-color: var(--win-bg);
    border-top:    1px solid var(--light);
    border-left:   1px solid var(--light);
    border-bottom: 1px solid var(--shadow);
    border-right:  1px solid var(--shadow);
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
    display: block;
    background-color: var(--win-bg);
    border-top:    1px solid var(--light);
    border-left:   1px solid var(--light);
    border-bottom: 1px solid var(--shadow);
    border-right:  1px solid var(--shadow);
    min-height: 16px;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }