/* Programmed by: Douglas H Alexander
   Copyright (c) 1989, 2026 Douglas H Alexander. All Rights Reserved. */
/* =====================================================================
   THEME: Modern  --  the clean redesigned look (white cards on a soft
   background, rounded controls, one accent color).
   Loaded by MainM.Master; the user picks a theme from Menu > Theme and
   the choice is remembered in a cookie (see MainM.Master.vb).

   HOW THE COLOR VARIANTS WORK: every color below is a CSS VARIABLE
   (the --names in :root). The Blue, Green, and BlackWhite themes simply
   @import this file and override the variables -- same design, new color.
   ===================================================================== */

:root
{
    --brand: #7A2030;                       /* main accent: buttons, title bar, links */
    --brand-dark: #5E1825;                  /* accent hover                            */
    --brand-soft: #F4E6E9;                  /* selected menu item background           */
    --focus-ring: rgba(122, 32, 48, 0.15);  /* glow around a focused box               */

    /* SECOND accent -- the contrast color the content pages (pgIntro,
       pgGroups, ...) use alongside --brand so a sub-screen is two-tone
       instead of one flat color. Each color theme repaints these to match.
       A page that names them writes a classic fallback (teal), so under the
       Classic theme -- which defines no variables -- the sub-screens still
       come out deep-red headings + teal accents. */
    --accent: #0F766E;                      /* teal secondary                          */
    --accent-dark: #0B5A54;                 /* teal hover                              */
    --accent-soft: #E3F1F0;                 /* pale teal panel background              */

    /* THIRD accent -- every theme is a TRIO (brand + accent + accent2) so
       screens can be genuinely colorful. Each color theme repaints these;
       BlackWhite keeps them gray so that theme stays monochrome. Page-local
       styles that name accent2 write a classic GOLD fallback (#B8860B), so
       under the Classic theme the third color comes out dark goldenrod. */
    --accent2: #B45309;                     /* warm amber third color                  */
    --accent2-dark: #92400E;                /* amber hover                             */
    --accent2-soft: #FCEBD4;                /* pale amber panel background             */
    --ink: #2B2F36;                         /* main text                               */
    --muted: #63676C;                       /* quiet text: AA (>=4.5) on white AND on the soft zebra tints */
    --page-bg: #EEF1F5;                     /* page background                         */
    --card-bg: #FFFFFF;                     /* content card background                 */
    --line: #E2E5EA;                        /* soft borders                            */
    --line-strong: #D7DBE2;                 /* stronger borders                        */
    --ok: #1F7A3D;      --ok-dark: #17612F;         /* green action buttons   */
    --danger: #B3392F;  --danger-dark: #942E26;     /* red action buttons     */
}

/* Modern font everywhere. The !important is deliberate: many old pages
   hard-code "Arial Rounded MT Bold" / "Times New Roman" inline, and this
   single rule retires those without editing every page. */
body, table, td, th, div, span, p, h1, h2, h3, li, a, label,
input, select, textarea, button
{
    font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---------------------------------------------------------------------------
   CROSS-BROWSER CONSISTENCY.  This site is tuned in Edge; these rules make
   Chrome, Firefox, and other browsers render it the same way WITHOUT changing
   the desktop look.  They are the safe subset of normalize.css: browsers
   otherwise disagree on form-control fonts/sizing, text scaling on phones, and
   a few replaced-element defaults.
   --------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%;
       -webkit-tap-highlight-color: transparent; }
/* Firefox/Safari don't inherit the page font onto form controls the way Chrome/Edge do. */
button, input, optgroup, select, textarea { font-family: inherit !important; font-size: 100%; }
button, input { overflow: visible; }             /* IE/Edge legacy: don't clip button padding */
button, select { text-transform: none; }         /* Firefox inherits text-transform, others don't */
button, [type="button"], [type="submit"], [type="reset"] { -webkit-appearance: button; cursor: pointer; }
textarea { overflow: auto; }                      /* remove Firefox/IE default scrollbar */
img { border-style: none; }                       /* IE/Firefox: no border on linked images */
/* Give inline media a consistent baseline so table-cell layouts line up the same
   in every engine (the XHTML doctype's "almost-standards" gap differs otherwise). */
svg, video, canvas { vertical-align: middle; }

/* The page behind the card washes from the brand tint down into the third
   accent's tint -- color from edge to edge on every screen. */
body
{ background-color: var(--page-bg);
    background-image: linear-gradient(180deg, var(--brand-soft, #EEF1F5), var(--page-bg, #FFFFFF) 320px, var(--accent2-soft, #EEF1F5));
    background-attachment: fixed;
    margin: 0; color: var(--ink);
}

/* Checkboxes and radio buttons tick in the SECOND accent everywhere. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---- master frame text areas (names kept from the classic theme) ---- */
/* The header strip text carries the brand color on every screen. */
.styleMasterTop, .styleMasterTopBlack
{
    background-color: transparent; color: var(--brand);
    width: 100%;
    font-size: small;
    text-align: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

/* The whole-page layout table. Fill the window on normal screens, but CAP the
   width on a large monitor and center it (margin auto) so the page sits in a
   comfortable centered column instead of stretching edge-to-edge. */
.style_contentplaceholder { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }

.styleBackGround
{
    background-color: transparent; color: var(--ink);
    width: 100%;
    font-size: small;
    text-align: center; border: 1px solid var(--line);
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

.styleMasterMain
{
    background-color: transparent; color: var(--ink);
    width: 100%;
    font-size: small;
    text-align: center;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

.styleMasterBottom
{
    background-color: transparent; color: var(--accent2, #8A8F98);
    width: 100%;
    font-size: small;
    text-align: center;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

/* ---- data-table styles (lesson lists, grids) ---- */
/* Table heading rows carry the brand color (soft background, dark text). */
.styleTableHeader
{ background-color: var(--brand-soft); color: var(--brand-dark);
    width: 100%;
    font-size: small;
    text-align: center; border: 1px solid var(--line);
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
}

.styleTableBody
{ background-color: var(--card-bg); color: var(--ink);
    width: 100%;
    font-size: small;
    text-align: center;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

.styleTableMain, .styleTableMainW
{ background-color: var(--card-bg); color: var(--ink);
    width: 100%;
    font-size: small;
    text-align: center; border: 1px solid var(--line);
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

.styleTableMainS
{ background-color: var(--card-bg); color: var(--ink);
    width: 100px;
    font-size: small;
    text-align: center; border: 1px solid var(--line);
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
}

/* Soften the old black double-bordered data grids (asp:Table frame="box"
   rules="all") everywhere, without editing each page's attributes. */
table[rules="all"]
{ border: 1px solid var(--line-strong) !important;
    border-radius: 10px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden; background: var(--card-bg);
}
table[rules="all"] td
{
    border: 1px solid #EDEFF3 !important;
    padding: 6px 10px !important;
}
/* Zebra stripes in the third accent: every other data row gets a soft tint,
   so long lists read easily AND pick up the theme's third color. */
table[rules="all"] tr:nth-child(even) td
{ background-color: var(--accent2-soft, #F4F5F7);
}
/* GridView headings (asp:GridView renders <th>) carry the SECOND accent. */
.styleTableMain th, .styleTableMainW th, .styleTableMainS th
{ background-color: var(--accent-soft); color: var(--accent-dark);
}
/* ...and GridView data rows get the same third-accent zebra stripes as the
   clickable tables, so every grid on the site is colorful. */
.styleTableMain tr:nth-child(even) td,
.styleTableMainW tr:nth-child(even) td
{ background-color: var(--accent2-soft);
}

/* In-grid buttons that have NOT been given a job: a light, quiet look so a data
   table is not a wall of colour.
   The :not() matters. Buttons that DO carry a functional class (styleButtonGo /
   Nav / Find / Danger) are colour-coded on purpose, and this rule used to overrule
   them -- an attribute selector counts toward specificity, so "table[rules=all]
   input[type=submit]" scores higher than a two-class selector and quietly painted
   every Edit/Copy/Delete button plain white again. Excluding them here is better
   than escalating with !important on the other side. */
table[rules="all"] input[type="submit"]:not([class*="styleButton"])
{
    padding: 4px 14px;
    border: 1px solid #C8CDD6;
    border-radius: 6px; background: var(--card-bg); color: var(--ink);
    cursor: pointer;
}
table[rules="all"] input[type="submit"]:not([class*="styleButton"]):hover
{ border-color: var(--brand); color: var(--brand);
}

/* ---- captions / labels ---- */
/* Form captions carry the SECOND accent so every input form is two-tone. */
.styleLabels
{
    background-color: transparent; color: var(--accent-dark, #2B2F36);
    width: 100px;
    height: 25px;
    font-size: 11pt;
    text-align: right;
    font-weight: 600;
}

.styleLabelsTop
{
    background-color: transparent; color: var(--ink);
    width: 100px;
    height: 25px;
    font-size: 11pt;
    text-align: center;
    font-weight: 600;
}

.styleLabelsRed
{
    background-color: transparent; color: var(--brand);
    width: 100px;
    height: 25px;
    font-size: 11pt;
    text-align: left;
    font-weight: 600;
}

.styleLinks
{
    background-color: transparent;
    width: 100px;
    height: 32px;
    font-size: 11pt;
    text-align: right;
    font-weight: 600;
}
a { color: var(--brand); }
/* Hovered links flip to the second accent -- a small flash of the trio. */
a:hover { color: var(--accent-dark); }

/* ---- inputs: brand-colored borders so every form carries the theme ---- */
.styleTextBoxes, .styleCombo
{ background-color: var(--card-bg); color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: 8px;
    width: 250px;
    height: auto;
    padding: 6px 10px;
    font-size: 11pt;
    text-align: left;
    font-weight: normal;
}
.styleTextBoxes:focus, .styleCombo:focus, .form-control:focus
{
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}

.styleListBoxes
{ background-color: var(--card-bg); color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: 8px;
    width: 900px;
    height: 900px;
    font-size: 11pt;
    text-align: left;
    font-weight: normal;
    padding-left: 5px;
}

.styleRequired
{
    background-color: transparent;
    color: #C0392B;
    width: 50px;
    height: 20px;
    font-size: 10pt;
    text-align: left;
    font-weight: bold;
}

/* ---- buttons: filled accent pills with a gentle hover ---- */
.styleButton
{
    box-sizing: border-box;      /* fixed widths from old pages include the padding */
    min-width: 100px;
    padding: 7px 18px;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    color: #FFFFFF; background-color: var(--brand); border-radius: 8px;
    cursor: pointer;
}
/* Hovering a button flips it to the SECOND accent -- a clear color change. */
.styleButton:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); }

/* Plain horizontal rules pick up the second accent (a page's own hr style wins). */
hr { border: none; border-top: 2px solid var(--accent-soft); }

/* =====================================================================
   ACCESSIBILITY + INTERACTION POLISH (2026-07-12 refresh, Option A).
   DESIGN-TIME SAFE: these only take effect while a user is TABBING or has
   asked for less motion, so the VS designer's static view is unchanged.
   ===================================================================== */
/* A clear keyboard-focus ring on EVERY interactive control. Inputs already
   had one (see .styleTextBoxes:focus above); buttons, links, and menu items
   did NOT -- so a keyboard user lost track of where they were. :focus-visible
   shows the ring for keyboard users only, so a mouse click leaves no outline. */
.styleButton:focus-visible,
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[role="button"]:focus-visible,
.mainMenu a:focus-visible
{
    outline: 3px solid var(--accent, #0F766E);
    outline-offset: 2px;
    border-radius: 6px;
}
/* A gentle hover fade on buttons and links (disabled for reduced-motion below). */
.styleButton, a { transition: background-color .12s ease, color .12s ease; }

/* Honor "reduce motion": stop animations/transitions for anyone whose device
   asked to minimize motion (vestibular comfort, focus, accessibility). */
@media (prefers-reduced-motion: reduce)
{
    *, *::before, *::after
    {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.auto-style1 { font-size: 14pt; }
.style1 { width: 206px; }

/* ---- Form-alignment grid (used by pgRegistration, pgLogin, and other
   simple "label: box" forms) ---- a two-column grid centered as ONE block:
   captions right-aligned in the left column, boxes left-aligned in the
   right column, so every box starts at the same left edge at ANY size. */
.styleFormTable
{
    margin: 0 auto;
    border-collapse: collapse;
}
.styleFormTable td
{
    padding: 5px 6px;
    vertical-align: middle;
}
.styleFormLabel
{
    text-align: right;
    white-space: nowrap;
}
/* Inside the grid a caption sizes itself to its own text (the shared
   .styleLabels fixed width would clip long captions like "Verify Password:"). */
.styleFormLabel .styleLabels
{
    width: auto;
    height: auto;
}
.styleFormField
{
    text-align: left;
    white-space: nowrap;
}

/* ---- modern card + page chrome used by the master itself ---- */
/* The page-title bar sweeps through ALL THREE theme colors (brand -> accent ->
   accent2), so the whole trio shows at the top of every screen.
   (Under BlackWhite all three stops are gray, so it stays monochrome.) */
.styleCaptionBar
{ background-color: var(--brand);
    background-image: linear-gradient(90deg, var(--brand, #1F7A3D), var(--accent, #B4532B), var(--accent2, #143A68));
    color: #FFFFFF;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px 10px 0 0;
}
/* The content card wears the other two colors as its side edges: the SECOND
   accent down the left, the THIRD down the right -- so even a plain form page
   shows the full trio. */
.styleContentCard
{
    width: 100%;
    margin: 0 auto; background-color: var(--card-bg); border: 1px solid var(--line);
    border-top: none;
    border-left: 4px solid var(--accent);
    border-right: 4px solid var(--accent2);
    border-bottom: 4px solid var(--line-strong);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
}
/* Headings inside the content card: big headings in the brand color, small
   ones in the second accent -- every screen shows the theme's trio without
   each page styling its own. (A page's own inline color still wins.) */
.styleContentCard h3 { color: var(--brand); }
.styleContentCard h4 { color: var(--accent-dark); }
/* Breathing room INSIDE the card, so the lowest control on every page sits
   clear of the card's rounded bottom border instead of being cut off by it.
   Only the card's own cell (direct child) -- grids nested inside keep their
   own tight cell padding. */
.styleContentCard > tbody > tr > td { padding: 10px 8px 26px 8px; }

/* The STEPCAI wordmark link and the signed-in-user link in the header. */
.brandLink { color: var(--brand) !important; }
.userLink  { color: var(--ok) !important; }

/* Brand-colored text for server controls (asp:Label ForeColor cannot follow a
   theme, so those controls use CssClass="themeBrandText" instead). */
.themeBrandText { color: var(--brand); }

/* The drop-down menu: a soft brand-tinted bar on every screen, with white
   panels, light borders, and a brand hover. */
.mainMenu
{ background-color: var(--brand-soft);
    border-radius: 8px;
    padding: 2px 6px;
}
.mainMenu a
{ color: var(--brand) !important;
    font-weight: bold;
    font-size: small;
    padding: 4px 12px;
    text-decoration: none;
}
.mainMenu a:hover
{ background-color: var(--brand);
    color: #FFFFFF !important;
    border-radius: 6px;
}
.mainMenu ul.dynamic
{ background-color: var(--card-bg); border: 1px solid var(--line-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* Lift the fly-out out of the page flow so, even before the WebForms menu script runs,
       it can never push the page open ("expanded before you click it"). */
    position: absolute; z-index: 1000;
}
/* KEEP SUB-MENUS COLLAPSED UNTIL OPENED. The ASP.NET Menu hides its dynamic sub-menus and
   shows them on hover by writing an INLINE style (display) on the <ul>. This rule hides any
   dynamic sub-menu that the menu script has NOT yet touched (no inline style attribute), so
   there is no flash of an open menu before the script initialises. The moment the script
   sets an inline style -- to show OR hide -- ":not([style])" stops matching and this rule
   bows out, so it can never fight the menu's own open/close. (Theme CSS is render-blocking,
   so this applies before the first paint.) */
.mainMenu ul.dynamic:not([style]) { display: none; }
.mainMenu ul.dynamic a { display: block; color: var(--ink) !important; }
.mainMenu ul.dynamic a:hover { color: #FFFFFF !important; border-radius: 0; }

/* ---- Minimal modern styles for the Bootstrap-style class names some pages
   use (the site does not load Bootstrap itself). ---- */
.content-wrapper { max-width: 920px; margin: 0 auto; text-align: left; }
.content-header h1 { font-size: 20px; margin: 10px 0 2px 0; color: var(--brand); }
.breadcrumb { list-style: none; margin: 0 0 12px 0; padding: 0; font-size: 12px; color: var(--muted); }
.breadcrumb li { display: inline; }
.breadcrumb li + li:before { content: " / "; color: #C0C4CC; }
.breadcrumb a { color: var(--brand); text-decoration: none; }
.box { background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px;
       box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07); }
.box-header { padding: 6px 18px 0 18px; }
.box-body { padding: 18px; }
.box-footer { padding: 14px 18px; border-top: 1px solid #EEF0F4; overflow: auto; }
.row { display: flex; flex-wrap: wrap; }
.row > div { padding: 0 9px; box-sizing: border-box; }
.col-md-6 { flex: 1 1 320px; min-width: 280px; }
.col-xs-12 { width: 100%; }
.form-group { margin-bottom: 14px; text-align: left; }
.form-group label { display: block; font-weight: 600; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.form-control { width: 100%; box-sizing: border-box; padding: 8px 10px;
                border: 1px solid #C8CDD6; border-radius: 8px; font-size: 14px; }
.input-group { display: flex; gap: 6px; }
.input-group .form-control { flex: 1; }
.input-group-btn { display: flex; }
.btn { display: inline-block; padding: 8px 18px; border-radius: 8px;
       border: 1px solid transparent; font-size: 14px; cursor: pointer;
       text-decoration: none; }
.btn-success { background: var(--ok); color: #FFFFFF; }
.btn-success:hover { background: var(--ok-dark); }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-danger:hover { background: var(--danger-dark); }
.btn-default { background: var(--card-bg); border-color: #C8CDD6; color: var(--ink); }
.pull-left { float: left; }
.pull-right { float: right; }
.text-danger { color: #C0392B; }
.text-muted { color: var(--muted); }
.text-success { color: var(--ok); }

/* Ad placeholder: white box + thin border with "AD" centered behind the ad.
   A filled AdSense ad renders opaque on top and hides the "AD". When Google
   has NO ad to serve it marks the ins with data-ad-status="unfilled" -- but it
   may still leave a blank (white) iframe inside, which would sit ON TOP of the
   "AD" label. The [data-ad-status="unfilled"] rule hides that blank ins
   completely, so the "AD" placeholder always shows through. */
.ad-slot
{
    position: relative;
    display: inline-block;
    background-color: #FFFFFF; border: 1px solid var(--accent-soft);
    border-top: 4px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}
.ad-slot .ad-label
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-style: italic;
    color: #9AA1AB;
    line-height: normal;
    z-index: 0;
}
.ad-slot ins.adsbygoogle
{
    position: relative;
    z-index: 1;
}
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"]
{
    display: none !important;
}

/* =====================================================================
   BUTTON COLOURS BY WHAT THE BUTTON DOES  (2026-07-19)
   =====================================================================
   Every button used to be the theme's one accent colour, so a page of
   eight buttons gave the eye nothing to sort them by -- Submit, Next and
   Delete all looked equally like the thing to press. These four classes
   sit ALONGSIDE .styleButton (which still supplies the shape and size)
   and change only the colour:

     .styleButton.styleButtonGo      GREEN  -- go ahead: Submit, Save, Create, New,
                                   Add, OK, Register, Generate, Begin
     .styleButton.styleButtonNav     BLUE   -- move about: Previous, Next, Up, Down,
                                   Back, Open, Continue
     .styleButton.styleButtonFind    RED    -- narrow what is shown: Search, Clear,
                                   Show All, Filter, Reset
     .styleButton.styleButtonDanger  DEEP RED, heavier -- takes something away for
                                   good: Delete, Remove, Unassign, Exit

   THESE FOUR DO NOT CHANGE WITH THE THEME, on purpose. A colour that
   means "go" only means it if it means it everywhere; if green became
   teal on one theme and amber on another it would just be decoration
   again. They are picked to sit comfortably on all four coloured themes
   rather than to match any one of them. (Black & White overrides them
   below -- see that file -- because a greyscale theme is chosen by
   people who need contrast, not hue, to tell things apart.)
   ===================================================================== */
.styleButton.styleButtonGo,
.styleButton.styleButtonNav,
.styleButton.styleButtonFind,
.styleButton.styleButtonDanger { color: #FFFFFF; border: 1px solid transparent; }

.styleButton.styleButtonGo            { background-color: #1F7A3D; border-color: #1F7A3D; }
.styleButton.styleButtonGo:hover      { background-color: #17612F; border-color: #17612F; }

.styleButton.styleButtonNav           { background-color: #1D4E89; border-color: #1D4E89; }
.styleButton.styleButtonNav:hover     { background-color: #163A66; border-color: #163A66; }

.styleButton.styleButtonFind          { background-color: #A6342A; border-color: #A6342A; }
.styleButton.styleButtonFind:hover    { background-color: #85291F; border-color: #85291F; }

/* Destructive gets a darker fill AND a visible edge, so it does not read as
   just another red button sitting next to Search. */
.styleButton.styleButtonDanger        { background-color: #7A1710; border-color: #4E0E09; font-weight: 700; }
.styleButton.styleButtonDanger:hover  { background-color: #5E110C; border-color: #360907; }

/* A disabled button of any kind reads as unavailable rather than as a colour. */
.styleButton.styleButtonGo[disabled], .styleButton.styleButtonNav[disabled],
.styleButton.styleButtonFind[disabled], .styleButton.styleButtonDanger[disabled] {
    background-color: #9AA0A6; border-color: #9AA0A6; cursor: default;
}