body {
    font: 67.5% "Times New Roman", sans-serif;
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #e7f0fa
}

.demoHeaders {
    margin-top: 2em;
}

#dialog_link {
    padding: .4em 1em .4em 20px;
    position: relative;
}


#dialog_link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}

ul#icons {
    margin: 0;
    padding: 0;
}

ul#icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
}

ul#icons span.ui-icon {
    float: left;
    margin: 0 4px;
}

.content_frame {
    position: absolute;
    top: 0px;
    left: 350px;
    height: 870px;
    width: 940px;
}

img {
    border: 0px;
}

.focus {
    border: 2px solid #AA88FF;
    background-color: #90ee90;
}

input[type=text] {
    width: 90%;
    text-transform: uppercase;
}

.filetree {
    margin-top: 25px;
    width: 98%;
    height: 800px;
    border-top: solid 1px #BBB;
    border-left: solid 1px #BBB;
    border-bottom: solid 1px #FFF;
    border-right: solid 1px #FFF;
    background: #FFF;
    overflow: scroll;
    padding: 5px;
}

#menu {
    display: none;
    position: absolute;
    padding: 5px;
    background-color: #ddd;
    border: 1px solid #000;
    z-index: 25;
}

.content_container {
    width: 100%;
    height: 800px;
}

.broweNamesNav {
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f8f9), color-stop(50%, #e5ebee), color-stop(51%, #d7dee3), color-stop(100%, #f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* IE10+ */
    background: linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0); /* IE6-9 */

}

.summaryHeader {
    font-weight: bold;
    background-color: #c3dcfa;
}

.pintoscreen {
    height: 15px;
    background: #fceabb; /* Old browsers */
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceabb), color-stop(50%, #fccd4d), color-stop(51%, #f8b500), color-stop(100%, #fbdf93)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* Opera 11.10+ */
    background: linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* W3C */
}

.ois_images a:hover {
    background: #bfd255; /* Old browsers */
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfd255), color-stop(50%, #8eb92a), color-stop(51%, #72aa00), color-stop(100%, #9ecb2d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* Opera 11.10+ */
    background: linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* W3C */
}

#results tr:hover {
    background: #bfd255; /* Old browsers */
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfd255), color-stop(50%, #8eb92a), color-stop(51%, #72aa00), color-stop(100%, #9ecb2d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* Opera 11.10+ */
    background: linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* W3C */
}

.detailsTable {
    width: 75%;
    border: 1px #000 solid;
    background-color: #FFFFFF;
    border-collapse: collapse;
}

#detailsHead {
    background-color: #EEEEEE;
    border: 1px #000 solid;
    font-weight: bold;
}

#detailsHeader {
    background-color: #FDFEFE;
    font-weight: bold;
}

#bn_links:hover {
    background-color: #Ef9a09;
}

#loadingDIV {
    display: none;
    background-color: #FFFFFF;
    /*set the div in the center of the screen*/
    position: absolute;
    height: 850px;
    top: 0%;
    left: 100%;
    z-index: 10;
    opacity: 0.8;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.classname {
    position: absolute;

    top: 0px;
    left: 0px;
    z-index: 10;

    -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
    box-shadow: inset 0px 1px 0px 0px #bbdaf7;
    /* ADA (SC 1.4.3): removed vendor-prefix-only gradient stack (no standard linear-gradient
     * was present) — scanner couldn't resolve gradient against text color. Replaced with
     * solid background-color #79bbff; contrast with #1a1a1a text = ~9:1, well above 4.5:1. */
    background-color: #79bbff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #84bbf3;
    display: inline-block;
    color: #1a1a1a;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    padding: 1px 1px;
    text-decoration: none;

    opacity: 1;

    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Standard */
    transform: rotate(-90deg);

}

.classname:hover {
    /* ADA: hover solid — #1a1a1a text on #378de5 = ~5.5:1, passes SC 1.4.3 */
    background-color: #378de5;

    opacity: 1.0;

    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Standard */
    transform: rotate(-90deg);
}

.classname:active {
    position: relative;
    top: 1px;

    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Standard */
    transform: rotate(-90deg);
}

a:link {
    color: #1133FF;
}

a:visited {
    color: #330033;
}

/* Skip to main content link — hidden until keyboard focused */
.skip-to-main {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}
.skip-to-main:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: #000000;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #ffffff;
    z-index: 99999;
    overflow: visible;
}

/* Accordion headers need pointer cursor after removing inner <a>.
 * padding-left: 2.2em mirrors what the old inner <a> provided so the jQuery UI
 * sprite arrow (absolutely positioned at left: .5em) does not overlap the
 * custom search-type icon inside the <h3>. */
#accordion .ui-accordion-header {
    cursor: pointer;
    padding-left: 2.2em !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
}
#accordion .ui-accordion-header:not(.ui-state-active):hover,
#accordion .ui-accordion-header:not(.ui-state-active).ui-state-hover {
    background: #f9c74f !important;
    background-image: none !important;
    border-color: #c9980a !important;
    color: #1a1a1a !important; /* #1a1a1a on #f9c74f ≈ 10.3:1 — passes SC 1.4.3 */
}

/* Fieldset reset for accessible radio/checkbox groups */
fieldset.accessible-group {
    border: none;
    margin: 0;
    padding: 0;
}
fieldset.accessible-group legend {
    font-weight: bold;
    padding: 0;
    margin-bottom: 2px;
}

/* Distinguishable links: underline toolbar/content links so they differ from surrounding text by more than color */
.broweNamesNav a,
#content_tabs-1 a {
    text-decoration: underline;
}
.broweNamesNav a:hover,
.broweNamesNav a:focus,
#content_tabs-1 a:hover,
#content_tabs-1 a:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Expand [+]/[-] category link */
#expand_name_category,
.expand-ic-link {
    text-decoration: underline;
    font-weight: bold;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── ADA: Keyboard focus indicators (SC 2.4.7) ─────────────────────────────
 * jQuery UI 1.8 removes outlines via .ui-helper-reset (outline:0) and
 * .ui-widget :active (outline:none). Override those here so keyboard users
 * always see a visible focus ring with adequate contrast (≥3:1).
 * Covers: accordion headers, tab links, buttons, inputs, links, and the
 * content iframe.
 * ─────────────────────────────────────────────────────────────────────── */
.ui-widget a:active,
.ui-widget a:focus,
.ui-widget button:active,
.ui-widget button:focus,
.ui-accordion .ui-accordion-header:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Iframe focus ring */
iframe#content_frame:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Global fallback: any interactive element that receives focus */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ADA: The hide-menu-toggle <a> wraps a position:absolute child div, giving the
 * <a> itself zero rendered height — the browser draws focus outline around an
 * invisible box. Suppress outline on the <a> and re-apply it on the visible
 * inner .classname div so keyboard users always see the focus ring (SC 2.4.7). */
a.hide-menu-toggle:focus {
    outline: none !important;
}
a.hide-menu-toggle:focus .classname {
    outline: 3px solid #005fcc !important;
    outline-offset: 4px;
}

/* ADA: Sortable DataTables column header buttons (SC 4.1.2 / role-required).
 * These <button> elements wrap <th> content to provide a widget role while the
 * <th> retains role="columnheader". Reset all button chrome so they render
 * identically to the surrounding table header text. */
th .sort-header-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline;
    white-space: nowrap;
}
th .sort-header-btn:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ── ADA: Color Contrast (SC 1.4.3) ────────────────────────────────────────
 * Fixes applied:
 *
 * 1. Tab active state links (#tabs, #content_tabs): #e17009 orange on near-
 *    white = 3.0:1 FAIL. Changed to near-black #1a1a1a.
 *    Accordion headers are NOT overridden — scanner flagged them as
 *    "Needs Review" only (not confirmed failures), and the original jQuery UI
 *    orange appearance was requested to be preserved.
 *
 * 2. jQuery UI datepicker header: #5c9ccc background → replaced with dark
 *    blue #1b4f72 so white text AND sprite arrows both pass 4.5:1.
 *
 * 3. .classname autocomplete popup: #ffffff on #79bbff = 2.0:1 FAIL.
 *    Fixed with near-black text #1a1a1a.
 * ─────────────────────────────────────────────────────────────────────── */

/* Fix 1a: Tab nav active links — near-black (was #e17009 orange, 3.0:1 fail) */
/* Accordion active header text — restore original #264789 dark blue (overrides jQuery UI #e17009 orange) */
#accordion .ui-accordion-header.ui-state-active,
#accordion .ui-accordion-header.ui-state-active:hover {
    color: #264789 !important;
}

#tabs .ui-state-active a,
#tabs .ui-state-active a:link,
#tabs .ui-state-active a:visited,
#content_tabs .ui-state-active a,
#content_tabs .ui-state-active a:link,
#content_tabs .ui-state-active a:visited {
    color: #1a1a1a !important;
}

/* Fix 2: Datepicker header — dark background so white text AND sprite arrows pass */
.ui-datepicker .ui-datepicker-header {
    background: #1b4f72 !important;
    background-image: none !important;
    border-color: #1b4f72 !important;
}
.ui-datepicker .ui-datepicker-title .ui-datepicker-month,
.ui-datepicker .ui-datepicker-title .ui-datepicker-year {
    /* ADA (SC 1.4.3): set background-color directly on spans so scanner can compute
     * contrast without traversing to .ui-datepicker-header parent.
     * #ffffff on #1b4f72 = ~8.7:1 — well above 4.5:1 threshold. */
    color: #ffffff !important;
    background-color: #1b4f72;
}
/* Datepicker prev/next containers — add subtle highlight area for hit target */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: rgba(255,255,255,0.15) !important;
    background-image: none !important;
    border-color: rgba(255,255,255,0.3) !important;
    border-radius: 3px;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: rgba(255,255,255,0.30) !important;
    background-image: none !important;
    top: 2px !important;
}
/* Fix 3: Datepicker calendar day links — #2e6e9e on #dfeffc glass gradient = ~4.25:1 (fails 4.5:1).
 * Scoped to calendar cells only so other ui-state-default elements (tabs, buttons) are unaffected.
 * :not(.ui-state-active):not(.ui-state-highlight) preserves the orange selected day (#e17009)
 * and today's highlight — jQuery UI 1.8 keeps ui-state-default on the <a> even when active.
 * #154360 on #dfeffc = ~7.8:1. */
.ui-datepicker .ui-datepicker-calendar td a.ui-state-default:not(.ui-state-active):not(.ui-state-highlight),
.ui-datepicker .ui-datepicker-calendar td span.ui-state-default:not(.ui-state-active):not(.ui-state-highlight) {
    color: #154360;
}
/* Fix 4: Accordion header inactive/default state — same #2e6e9e on #dfeffc failure.
 * :not(.ui-state-active) ensures the active-state override (#264789 on #f5f8f9 ≈ 9.5:1) is untouched. */
#accordion .ui-accordion-header.ui-state-default:not(.ui-state-active) {
    color: #154360;
}

/* ── ADA: Reflow at 400% zoom / 320px viewport (SC 1.4.10) ─────────────────
 * Two elements caused 2D scrolling at 320 CSS pixels wide:
 *
 * 1. images/loading.gif — no width constraint, can overflow narrow viewports.
 *    Fix: cap at 100% of its container.
 *
 * 2. .ui-datepicker popup — fixed 17em width. At 400% zoom (1em≈16px → 272px)
 *    this stays within 320px, but the right-edge nav icon (.ui-icon-circle-triangle-e)
 *    can still push the popup past the viewport when combined with its absolute
 *    positioning. Cap the popup at 100vw and allow text to wrap.
 * ─────────────────────────────────────────────────────────────────────── */

/* Fix 1: loading spinner — responsive width */
#loadingDIV {
    overflow: hidden;
}
#loadingDIV img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix 2: datepicker popup — prevent horizontal overflow at 320px */
.ui-datepicker {
    max-width: calc(100vw - 1em);
    box-sizing: border-box;
    overflow: hidden;
}
/* The next/prev nav icons use absolute positioning inside the header;
 * clip them so they cannot push the popup wider than the capped max-width. */
.ui-datepicker .ui-datepicker-header {
    overflow: hidden;
}
/* Ensure the nav arrows stay inside the capped popup */
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    max-width: 2em;
    max-height: 2em;
    /* ADA (SC 1.4.10): clip the absolutely-positioned icon span so it cannot
     * push outside the button container and trigger 2D scroll at 400% zoom */
    overflow: hidden;
}
/* ADA (SC 1.4.10): jQuery UI uses text-indent:-99999px on icon spans which
 * extends the layout box and causes horizontal overflow at 320px viewport.
 * Override with text-indent:100% + white-space:nowrap — same visual result
 * (text moved outside visible area) but contained within the element box. */
.ui-datepicker .ui-datepicker-next .ui-icon,
.ui-datepicker .ui-datepicker-prev .ui-icon {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/* ── ADA: Custom persistent tooltips (SC 1.3.1, SC 1.4.13) ─────────────────
 * Replaces native browser title= tooltips which disappear when cursor moves
 * to them and are not keyboard-accessible.
 * ─────────────────────────────────────────────────────────────────────── */
#ada-custom-tooltip {
    display: none;
    position: absolute;
    z-index: 99999;
    background: #222222;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    pointer-events: auto;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

/* Help icon images — show pointer cursor when focusable */
img.help-icon {
    cursor: help;
    vertical-align: middle;
}