:root {
    --color-bg: #EDEFF1;
    --color-surface: #F5F5F5;
}

blockquote, body, p, td, ul, ol, li, h1 {font-family: "arial", "helvetica", sans-serif; font-size: 11pt; line-height: 1.4; text-align: left}
h1 { font-weight: bold; font-size: 110%; margin-top: 0em }
tt {font-family: monospace; font-size: 90%}
div#content tt { white-space: nowrap }
pre {font-family: monospace; text-align: left}
input, textarea {font-family: monospace}
input.prop, textarea.prop {font-family: "arial", sans-serif; font-size: 10pt}
a, a.uhsweb, a.list, a.uhsweb-list {text-decoration: underline; color: #28598C}
a.highlight {font-weight: normal; text-decoration: underline; color: #4D6380}
a:hover, a.uhsweb:hover, a.list:hover, a.uhsweb-list:hover  {text-decoration: none;}
a.anchor {text-decoration: none; color: #000000;}
td.uhsweb-current-hint, span.uhsweb-current-hint, div.uhsweb-current-hint {color: #285986}
td.uhsweb-current-hint span, span.uhsweb-current-hint, div.uhsweb-current-hint {font-weight: bold}

table.compare-table { border-right: solid #666666 1px; border-bottom: solid #666666 1px; border-collapse: collapse; }
table.compare-table th { background-color: #4E6F74; color: white; font-weight: bold; padding: 5px 10px; border-left: solid #666666 1px; border-top: solid #666666 1px; width: 90px; text-align: center }
table.compare-table th a { color: white; }
td.compare { border-left: solid #666666 1px; border-top: solid #666666 1px; padding: 5px; }
td.compare-center { border-left: solid #666666 1px; border-top: solid #666666 1px; text-align: center; padding: 5px; }
td.compare-center span { font-size: 20px; }

div.screenshot-thumb {font-size: 8pt; margin: 0.5em; text-align: center}
p.header-text {margin: 0px; text-align: center}
p.header {font-size: 10pt; color: #FFFFFF}
p.fineprint {font-size: 9pt; text-align: center; margin-top: 1em}

.formerror {color: #993333; font-weight: bold; margin: 0.25em 0 0.5em 0}



body { background-color: var(--color-bg); }

div#page-wrapper { width: 800px; margin-left: auto; margin-right: auto; padding: 0px; }

div#banner-graphic { width: 800px; height: auto; padding: 0; margin: 0; display: block; }
div#banner-graphic img {
    display: block;
    width: 100%;
    height: auto;
}

div#leaderboard { margin-left: auto; margin-right: auto; width: auto; background-color: var(--color-surface); text-align: center; padding-top: 10px; padding-bottom: 10px; border: solid #DDDDDD 1px; border-bottom: none; clear: both }

div#main-menu { width: 800px; height: 29px; border: none; padding-top: 2px; background-color: #336699; margin-top: 0px }
div#main-menu ul { list-style-type: none; margin: 0px 0px 0px 10px; padding: 0px; height: 100%; border: none; font-size: 9pt }
div#main-menu li { display: block; float: left; margin-top: auto; margin-bottom: 0px; padding-top: 6px; padding-left: 7px; padding-right: 7px; height: 22px; border: solid #537CA6 1px; border-bottom: none; border-collapse: collapse; font-size: 9pt; background: linear-gradient(to bottom, #a8b4bc, #e8ecf0); }
div#main-menu li.ordering, div#main-menu li.selected-ordering { margin-left: auto; float: right; margin-right: 1em }
div#main-menu li.ordering { font-weight: normal; background: linear-gradient(to bottom, #688e86, #f1f1f1); }
div#main-menu li.selected, div#main-menu li.selected-ordering { font-weight: bold; background: linear-gradient(to bottom, #768da6, #dde1e5); }
div#main-menu li a { text-decoration: none; color: black }
div#main-menu li a:hover { color: #000099 }
div#main-menu form { display: inline; position: relative; top: -2px; margin: 0px 0px 0px 3px; padding: 0px;}

div#sub-menu { width: 100%; max-width: 800px; border: solid #CCCCCC 1px; padding: 3px; background-color: #DDE1E5; margin-top: 0px; font-size: 9pt; border-bottom: none; box-sizing: border-box; }
div#sub-menu > div { display: flex; align-items: baseline; }
div.sub-menu-title { flex: 0 0 90px; color: #3d5068; font-weight: bold; font-size: 9pt }
div.sub-menu-links { flex: 1; font-size: 9pt; min-width: 0; }

div.sub-menu-links a { color: black; font-size: inherit; }
div.sub-menu-links ol { margin: 0; padding: 0; position: relative; top: -1px }
div.sub-menu-links li { float: left; list-style-type: decimal; padding-right: 40px }

div#content { width: 774px; border: solid #DDDDDD 1px; margin-left: auto; margin-right: auto; padding: 12px; background-color: var(--color-surface); border-collapse: collapse; clear: both; border-radius: 0 0 8px 8px; display: flow-root; }
div#intro { text-align: left }
div#banner { width: auto; margin-left: auto; margin-right: auto; border: none; padding: 5px; }
input.searchbox { font-family: "arial", "helvetica", sans-serif; font-size: 10px; width: 175px; background-color: var(--color-surface); border: 1px solid #AAAAAA}
span.search-label { float: left }

div.search-form {
    text-align: center;
    margin-bottom: 1em;
}

p { margin-top: 0em; margin-bottom: 0.8em; }
p:last-child { margin-bottom: 0em; }

div.header-bar, div.header-bar-first { display: flex; align-items: center; margin-bottom: 1em; border: none; border-radius: 4px; width: auto; overflow: hidden; background-color: #4E6F74; box-sizing: border-box; }
div.header-bar, div.header-bar-first { margin-top: 1.5em; }
div.header-bar:first-child, div.header-bar-first { margin-top: 0px }

div.header-bar-title { font-weight: bold; color: white; padding: 7px 10px; border-left: solid #7AACB0 4px; border-radius: 4px 0 0 4px; flex: 1; }
div.header-bar-right { font-weight: bold; color: white; padding: 7px 10px; margin-left: auto; }
div.header-bar-right a { text-decoration: underline; font-weight: normal; color: #FFFFFF; font-size: 9pt; padding-right: 5px; }

table.order-section { margin-top: 1em; width: 100% }
td.order-header { background-color: #31506D; font-weight: bold; color: white; text-align: center; width: 100%; border: solid black 1px }
td.orderlabel {text-align: right; color: #31506D; font-weight: bold; width: 250px}
td.ordersection {border-top: solid white 1em}
td.orderblank {width: 400px}

div.header-bar-post { padding-left: 0 }
div.header-bar-post:has(> div.reader_section) { padding-left: 1.8em }
div.header-bar-post > ul:not([class]) { padding-left: 1.8em }

div.sidebar, div.sidebar-300 { width: 200px; float: right; margin-left: 20px; border-collapse: collapse; margin-top: 0; margin-bottom: 1.5em; }
div.sidebar-300 { width: 300px }
div.sidebar-header, div.sidebar-header-first { margin-top: 1.5em; border: solid #1e3d54 1px; background-color: #31506D; font-weight: bold; color: #FFFFFF; text-align: center; padding: 6px 8px; border-left: solid #5A82A0 4px; border-radius: 4px 4px 0 0; }
div.sidebar-header:first-child, div.sidebar-header-first { margin-top: 0px }
div.sidebar-body { background-color: #EEEEEE; border: solid #1e3d54 1px; border-top: none; padding: 8px; border-radius: 0 0 4px 4px; }
div.sidebar-body p, div.sidebar-body p.sidebar-first, p.summary, .summary, div.sidebar-body p.highlights { font-size: 10pt; margin-top: 0.5em; margin-bottom: 0em; }
div.sidebar-body p:first-child, div.sidebar-body p.sidebar-first, p.summary-top, .summary-top, div.sidebar-body p.summary-top { font-size: 10pt; margin-top: 0em; margin-bottom: 0em; }

div.sidebar-body ul { margin: 0; padding: 0 }
div.sidebar-body ul li { list-style: none; font-size: 10pt; padding: 0; margin: 0 0 1em 0 }
div.sidebar-body ul li:last-child { margin: 0 }

div#hints p { margin-top: 0em; margin-bottom: 1.2em; }


div.reader_section {
    border-top: solid #3D6366 1px; 
    padding-top: 0px; 
    margin-bottom: 1.5em
}
div.reader_left {
    padding-top: 5px;
    float: left; 
    height: 100%; 
    width: 140px;
}
div.reader_left span {
    float: left; 
    color: #345456; 
    padding: 0em; 
    font-weight: bold; 
    margin-bottom: 1.5em;
    width: 120px;
}
div.reader_right {
    padding-top: 5px;
    margin-left: 140px;
    height: 100%
}
div.reader_right ul {
    margin: 0;
    padding: 0;
}
div.reader_right li {
    list-style-type: disc;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

h1.hint-title { margin: 0 0 0.5em 0; font-size: 100%; font-weight: bold }
h3.hint-subtitle { margin: 0 0 1em 0; font-size: 100%; font-weight: normal }

ol.faq li h2 { font-size: 100%; font-weight: normal; font-style: italic; margin-bottom: 1em }
ol.faq li p { font-style: normal; margin-top: 1em }

/* */

#front-page-ad    { float: right; width: 300px; margin-left: 20px; }
#front-page-left  { margin-bottom: 1em; overflow: hidden; }
#front-page-intro { clear: both; }
#front-page-post  { clear: both; padding-top: 0.5em; margin-top: 1.5em; }

#main-menu li.search form { display: inline; }

div.footer { clear: both; margin-top: 1em; text-align: center; }

div#highlighted-hints-more {
    padding: 1rem 0 0 0;
    text-align: right;
}

/* Merged from mobile */

ul {
   padding: 0 3px 0 3px;
}

div#all-hint-list {
    overflow: hidden;
}

div#uhsweb-main {
    overflow: hidden;
}

div#uhsweb-main img {
    max-width: 100%;
    height: auto;
}

/* ---- Hint file listing ---- */
ul.hint-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}

ul.hint-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: solid #DDDDDD 1px;
}

ul.hint-list li:first-child {
    border-top: solid #DDDDDD 1px;
}

div.hint-title-group {
    flex: 1;
    min-width: 0;
    padding-right: 1em;
}

span.hint-title {
    font-weight: bold;
    display: block;
}

span.hint-author {
    font-size: 9pt;
    color: #555555;
    display: block;
}

ul.hints li span ul.hints-links {
    list-style: none;
    padding: 0;
    margin: 1em 0 0.5em 0;
}

ul.hints li span ul.hints-links:last-child {
    margin-bottom: 0;
}

ul.hints li span ul.hints-links li {
    padding: 0;
    margin-bottom: 0.5em;
    border: 0;
}

ul.hints li span ul.hints-links li:last-child {
    margin-bottom: 0;
}
    
div.hint-links {
    flex: 0 0 auto;
    white-space: nowrap;
}

div.hint-links a {
    margin-left: 1em;
}

ul.other-hints {
    padding: 0;
    margin-top: 0;
    margin-bottom: 1.5em;
}

ul.other-hints li {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5em 0;
}

ul.highlights {
    columns: 2;
    column-gap: 1rem;
    padding: 0;
    margin-bottom: 0;
}

ul.highlights li {
    margin: 0 0 0.5em 0;
   list-style: none;
   padding: 0px;
}


div.screen-full-wrap {
    text-align: center;
}

div.screen-full-wrap img.screen-full {
    max-width: 100%;
    height: auto;
}

div.screen-nav {
    display: flex;
    justify-content: space-between;
    margin: 0.5em auto 0 auto;
}

span.screen-nav-prev { text-align: left; flex: 1; }
span.screen-nav-count { text-align: center; flex: 1; }
span.screen-nav-next { text-align: right; flex: 1; }


/* ============================================================
   MOBILE / HAMBURGER SIDEBAR — responsive additions
   ============================================================ */

/* Hide hamburger button on desktop */
#hamburger-btn {
    display: none;
}

/* Ensure banner can anchor the overlaid button */
div#banner-graphic {
    position: relative;
}

/* ---- Overlay backdrop ---- */
#mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
}
#mobile-overlay.visible {
    display: block;
}

/* ---- Sidebar drawer ---- */
#mobile-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 260px;
    background-color: #336699;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    padding: 0;
}
#mobile-sidebar.open {
    transform: translateX(0);
}

#mobile-sidebar-close {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    padding: 10px 14px;
    cursor: pointer;
    float: right;
}
#mobile-sidebar-close:hover {
    color: #DFDCC6;
}

#mobile-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 48px 0 20px 0;
    clear: both;
}
#mobile-sidebar ul li {
    display: block;
    float: none;
    border-top: solid #537CA6 1px;
}
#mobile-sidebar ul li a {
    display: block;
    padding: 12px 18px;
    color: #fff;
    text-decoration: none;
    font-size: 11pt;
    font-family: "arial", "helvetica", sans-serif;
}
#mobile-sidebar ul li a:hover {
    background-color: #537CA6;
    color: #fff;
}
#mobile-sidebar ul li.selected a {
    font-weight: bold;
    background-color: #2d5080;
}
#mobile-sidebar ul li.ordering a {
    background-color: #4A7A6A;
    font-weight: bold;
}
#mobile-sidebar ul li.ordering a:hover {
    background-color: #5B9080;
}
#mobile-sidebar ul li.mobile-search {
    padding: 12px 18px;
    color: #fff;
    font-family: "arial", "helvetica", sans-serif;
    font-size: 10pt;
}
#mobile-sidebar ul li.mobile-search span {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #DFDCC6;
}
#mobile-sidebar ul li.mobile-search input.searchbox {
    width: 100%;
    font-size: 11pt;
    padding: 4px;
    box-sizing: border-box;
}

@media (max-width: 820px) {

    /* Allow page to flex to screen width */
    div#page-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    div#banner-graphic {
        width: 100%;
        overflow: hidden;
    }
    div#banner-graphic img {
        width: 100%;
        height: auto;
    }

    /* Desktop menu: collapse to nothing on mobile (hamburger takes over) */
    div#main-menu {
        display: none;
    }

    /* Show hamburger button, overlaid on the top-right of the banner */
    #hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        top: 8%;
        right: 2.5%;
        transform: none;
        width: 32px;
        height: 24px;
        background: rgba(0, 0, 0, 0.35);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        padding: 5px 4px;
        box-sizing: border-box;
        z-index: 100;
    }
    #hamburger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
    }
    #hamburger-btn:hover {
        background: rgba(0, 0, 0, 0.55);
    }

    /* Sub-menu: title left, links wrap with hanging indent */
    div#sub-menu { margin-top: 0; }
    div#sub-menu > div { flex-wrap: nowrap; align-items: flex-start; }
    div.sub-menu-title { flex: 0 0 auto; white-space: nowrap; padding-right: 4px; width: 4.5rem; }
    div.sub-menu-links { flex: 1; min-width: 0; word-break: break-word; }

    /* Content area */
    div#content {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
	border-top: none;
    }

    #front-page-intro { display: flex; flex-direction: column; }
    #front-page-left  { order: 1; }
    #front-page-ad    { order: 2; float: none; width: 100%; margin: 0 0 12px 0; text-align: center; }

}

@media (max-width: 600px) {
    /* Highlights list: single column on narrow screens */
    ul.highlights {
        columns: 1;
    }

    /* Turn content into a flex column so we can reorder sidebar below main */
    div#content {
        display: flex;
        flex-direction: column;
    }

    #front-page-intro { display: flex; flex-direction: column; }
    #front-page-left  { order: 1; }
    #front-page-ad    { order: 2; float: none; width: 100%; margin: 1em 0; text-align: center; }
    div.sidebar, div.sidebar-300 {
        float: none;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
        order: 2;
    }
    /* Everything else inside #content stays in natural order above sidebar */
    div#content > *:not(.sidebar):not(.sidebar-300) {
        order: 1;
    }

    /* Hint list pages: push list below sidebar */
    div#content > div#all-hint-list {
        order: 3;
    }

    /* Fineprint, script, and clear div sort after sidebar */
    div#content > p.fineprint,
    div#content > script {
        order: 3 !important;
    }
    /* Strip sidebar box styling — render like teal header sections */
    div.sidebar-header, div.sidebar-header-first {
        border: none;
        border-left: solid #5A82A0 4px;
        border-radius: 4px;
        background-color: #31506D;
    }
    div.sidebar-body {
        border: none;
        background-color: transparent;
        padding: 8px 0;
    }
    div#content > p.fineprint {
        margin-top: 0.5em;
    }
    div.sidebar-body p,
    div.sidebar-body p.sidebar-first,
    div.sidebar-body p.summary-top,
    div.sidebar-body li {
        font-size: 11pt;
    }

    div.sidebar-body:has(img.screens) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5em;
    }
    div.sidebar-body:has(img.screens) div.screenshot-thumb {
        margin: 0;
    }
    div.sidebar-body:has(img.screens) div.screenshot-thumb:last-child {
        grid-column: 1 / -1;
    }
}

/* Hints */
ul.subject li, ul.hints li, ul.hintButton li {
   background: #FFFFFF;
   list-style: none;
   border: solid #DDDDDD 1px;

   margin: 0 5px 0 0px;
   padding: 10px;
   border-bottom: 0px;
   border-radius: 0;
}

ul.subject li {
   padding-right: 5px;
}

ul.subject li:first-child, ul.hints li:first-child {
   margin: 0px 5px 0 0px;
   border-radius: 8px 8px 0px 0px;
}
ul.subject li:last-child, ul.hints li.lastVisibleChild {
   border-radius: 0px 0px 8px 8px;
   margin: 0 5px 5px 0px;
   border-bottom: solid #CCCCCC 1px;
}
ul.subject li:only-child, ul.hints li.onlyVisibleChild, ul.hintButton li {
   margin: 0 5px 5px 0px;
   border-radius: 8px;
   border-bottom: solid #CCCCCC 1px;
}

ul.subject li a, ul.hintButton li a {
  padding-right: 30px;
  text-decoration: none;
  display: block;
  /* background: url("/forward-arrow.png") no-repeat scroll right center transparent; */
}

span.hintNumber {
  font-weight: bold;
}

li.hiddenHint {
 display: none;
}

li.shownHint {
 display: block;
}

ul.subject, ul.hints {
    margin: 0 0 1em 0;
}

@media (max-width: 450px) {
    #hamburger-btn {
        width: 26px;
        height: 20px;
        padding: 3px;
    }
}