.title {
    text-align: left;
}

/* Screen-reader-only text. Bootstrap 3 has this, but the Bootstrap 2.3.1 pages (Hot Topics, MBA,
   Templates) don't, so without it "sr-only" text shows on screen there. Same definition as Bootstrap 3. */
.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;
}

.navbar-fixed-bottom > .container {
}

/* px, not rem: Bootstrap 3 sets the root font to 10px but Bootstrap 2 leaves it at 16px, so 1.3rem was
   13px on the doorway and ~21px on Hot Topics. These are the doorway's rendered values.
   #666 on the #f8f8f8 bar is 5.4:1 (AA needs 4.5:1). */
.eli-copyright {
    padding: 15px;
    padding-bottom: 5px;
    color: #666666;
    font-size: 13px;
}

.eli-copyright > ul > li {
    list-style-type: none;
}

/* The shared _Footer.cshtml bar. These match what Bootstrap 3 (.navbar-default) and eli-responsive.css
   (.navbar-bottom) already give it, so Bootstrap 2 pages (Hot Topics), which have neither, look the same. */
footer.navbar-bottom {
    /* Hot Topics' app.css sets .navbar { margin-bottom: 10px }, which lifts this fixed bar off the bottom,
       and its Site.css forces footer { height: 100px } (plus app.css footer { margin-top: 25px }) */
    bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
    height: auto;
    background-color: #f8f8f8;
    border-top: 1px solid #e7e7e7;
    border-bottom: 3px solid #b8c7d4;
    text-align: center;
}

/* Keep focused elements from scrolling under the fixed top nav / bottom copyright bar (WCAG 2.4.11).
   Fallback values; the master page script replaces them with the bars' measured heights. */
html {
    scroll-padding-top: 80px;
    scroll-padding-bottom: 110px;
}

/* "Back to ELI" is fixed at top: 50px, under the nav; the master page script sets the exact offset */
body .hide-modal-button {
    top: 64px;
    /* Same darker orange as .btn-primary below: white on #D66B38 is 3.5:1, on #a84924 it's 5.8:1 */
    color: #fff;
    background: #a84924 !important;
    border: 1px solid #964221 !important;
}

body .hide-modal-button:hover,
body .hide-modal-button:focus {
    color: #fff;
    background: #8a3c1d !important;
    border-color: #7a351a !important;
}

/* Bootstrap's default navbar links are #777 on #f8f8f8 (4.48:1, just under AA) */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.dropdown-menu > li > a {
    color: black;
}

/* Text links: Bootstrap's #337ab7 is 4.5:1 on white but ~4.3:1 on the #f8f8f8 bars.
   #23527c is 8.2:1 on white and 7.8:1 on #f8f8f8. :not(.btn) leaves button-styled links alone. */
a:not(.btn) {
    color: #23527c;
}

a:not(.btn):hover,
a:not(.btn):focus {
    color: #163651;
}

/* Links inside text must be distinguishable without color (WCAG 1.4.1); the nav menu is outside <main> */
main a:not(.btn),
footer a {
    text-decoration: underline;
}

/* Orange buttons: white on #D66B38 is 3.5:1; #a84924 (the existing hover color) is 5.8:1 */
.btn-primary,
.btn-action {
    background-color: #a84924 !important;
    border-color: #964221 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-action:hover,
.btn-action:focus {
    background-color: #8a3c1d !important;
    border-color: #7a351a !important;
}

/* Validation/error text: eli-responsive.css uses red (#FF0000), 4.0:1 on white; #C00000 is 5.9:1.
   "body" raises specificity so this wins where cleanup.css loads before eli-responsive.css. */
body .error {
    color: #c00000;
}

/* Hot Topics Previous / Go / Next (FormNavigationControls.ascx) and the points bonus button
   (master + Bonus.ascx, .button-bonus): match the ELI Next button
   (flat Bootstrap 3 btn-primary in the orange above). Style only; size and layout are unchanged.
   Overrides the green gradient (.btn-green in ht-responsive.css) and Bootstrap 2's shading. */
.eg-nav .btn.btn-primary,
.btn.btn-primary.button-bonus {
    background-image: none;
    background-color: #a84924 !important;
    border: 1px solid #964221 !important;
    color: #fff !important;
    text-shadow: none;
    box-shadow: none;
    filter: none;
}

.eg-nav .btn.btn-primary:hover,
.eg-nav .btn.btn-primary:focus,
.eg-nav .btn.btn-primary:active,
.btn.btn-primary.button-bonus:hover,
.btn.btn-primary.button-bonus:focus,
.btn.btn-primary.button-bonus:active {
    background-image: none;
    background-color: #8a3c1d !important;
    border-color: #7a351a !important;
    color: #fff !important;
}

/* Hot Topics question groups: <fieldset class="ht-fieldset"><legend class="ht-legend">question</legend> options </fieldset>.
   Bootstrap 2 styles <legend> as a large ruled heading; keep the look of the old bold line + blank line. */
fieldset.ht-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

legend.ht-legend {
    display: block;
    width: auto;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: bold;
    color: inherit;
}

/* Hot Topics Help tab is an <aside> (complementary landmark). Hot Topics' Site.css sets
   aside { float: right; width: 25% } (100% on small screens); keep the fixed, rotated tab
   from app.css .side-tab-right sized to its content like the old <div>. */
aside.side-tab-right {
    float: none;
    width: auto;
    /* Same flat orange as the Previous/Go/Next and bonus buttons (not the .btn-green gradient) */
    background-image: none;
    background-color: #a84924 !important;
}

aside.side-tab-right:hover,
aside.side-tab-right:focus-within {
    background-color: #8a3c1d !important;
}

/* Hot Topics Ethics Coach teaser bubble: .gray8 (app.css) is #868686, 3.6:1 on the white bubble; #595959 is 7:1.
   Two classes plus the id so this beats .gray8, since cleanup.css loads before app.css on the HT master. */
.bubble.gray8,
#ethicsCoachBubble {
    color: #595959;
}

/* Unselected radio labels were #a5a5a5 (2.4:1 on white); #595959 is 7:1 */
.radio .label-text {
    color: #595959;
}
/* Doorway "(Available until ...)" date from the FRC switch settings: same dark orange as the buttons above, 5.8:1 on white */
.available-until {
    color: #a84924;
}

/* Same text when the end date is 3 or fewer days away (or today): the #c00000 error red above, 5.9:1 on white */
.available-until.ending-soon {
    color: #c00000;
    font-weight: bold;
    font-style: italic;
}

/* eli-responsive.css sets these to plain "Calibri" with no fallback. Calibri ships with Windows/Office, not macOS, so
   Mac Chrome fell back to its default serif. Carlito (Google Fonts, loaded in _Layout) is metric-compatible with Calibri. */
.doorway,
.traits,
.lenses {
    font-family: Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}