@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* =========================================================================== Audience Learning — reconstructed UI theme Built 2026-08-26. No original stylesheet survived the handover; this is a ground-up reconstruction written against the surviving markup. Design rationale ---------------- The product's real output is a printed CME certificate and a credit transcript, so the interface is grounded in document materiality — a warm paper ground, serif panel titles, hairline ledger rules — rather than the cold blue-and-white of a typical clinical dashboard. Teal is not invented: `panel-teal` survives in 22 places in the markup and is the single remaining clue to the original brand, so it is honoured as the accent rather than overridden. Signature element: the credit-hours meter (see §8). Credit progress is the one question a clinician logs in to answer, and the markup for it (Bootstrap 2 `.progress > .bar`) is currently unstyled because the app was mid-migration to Bootstrap 3. Styling it fixes a real defect and carries the identity at the same time. Loaded LAST in so it wins the cascade over vendored Bootstrap. =========================================================================== */ /* ---------------------------------------------------------------- 1. tokens */ :root { /* Palette — deliberately warm-neutral rather than blue-grey. */ --al-ink: #10262B; /* chrome: navbar, footer. Teal-black, not pure black */ --al-ink-soft: #1B3A40; --al-teal: #0F6E6E; /* primary accent, inherited from .panel-teal */ --al-teal-bright:#1A9B93; /* hover, active, meter fill */ --al-teal-wash: #E6F1F0; /* tinted surfaces */ --al-paper: #F7F5F0; /* page ground — chart paper, not #F8F9FA */ --al-surface: #FFFFFF; --al-rule: #DCD8CF; /* hairlines. Warm grey to match the paper */ --al-rule-soft: #EDEAE3; --al-text: #1C2B2E; --al-muted: #63736F; --al-amber: #B9761F; /* attention: credit shortfall, required fields */ --al-amber-wash: #FBF2E4; --al-green: #2F7D4F; --al-red: #A32F2F; /* Type */ --al-display: "Spectral", Georgia, "Times New Roman", serif; --al-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Rhythm */ --al-gap: 20px; --al-radius: 3px; /* restrained; documents don't have rounded corners */ --al-shadow: 0 1px 2px rgba(16, 38, 43, .06), 0 4px 14px rgba(16, 38, 43, .05); } /* ------------------------------------------------------------- 2. base type */ body { background: var(--al-paper) !important; color: var(--al-text); font-family: var(--al-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .panel-title, .dashText { font-family: var(--al-display); color: var(--al-ink); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 30px; line-height: 1.25; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 17px; } a { color: var(--al-teal); } a:hover, a:focus { color: var(--al-teal-bright); } /* Numeric data — credit hours, counts, dates — must align in columns. */ td, th, .creditNumber, .progress, .activitesFont { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Small-caps eyebrow used on panel headings and section labels. */ .al-eyebrow, .panel-heading > .al-eyebrow { font-family: var(--al-body); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--al-muted); } /* --------------------------------------- 3. Bootstrap 2 compatibility shim */ /* The views are a half-finished BS2 -> BS3 migration: 712 `col-*-N` classes but still 370 `spanN` / `row-fluid`. Bootstrap 3 has no rules for the latter, so those blocks currently stack full-width and unstyled. This restores them without touching the markup. */ .row-fluid { width: 100%; } .row-fluid::before, .row-fluid::after { content: " "; display: table; } .row-fluid::after { clear: both; } .row-fluid [class*="span"] { float: left; min-height: 1px; padding-right: 15px; padding-left: 15px; box-sizing: border-box; } .span1 { width: 8.3333%; } .span2 { width: 16.6666%; } .span3 { width: 25%; } .span4 { width: 33.3333%; } .span5 { width: 41.6666%; } .span6 { width: 50%; } .span7 { width: 58.3333%; } .span8 { width: 66.6666%; } .span9 { width: 75%; } .span10 { width: 83.3333%; } .span11 { width: 91.6666%; } .span12 { width: 100%; } .offset1 { margin-left: 8.3333%; } .offset2 { margin-left: 16.6666%; } .offset3 { margin-left: 25%; } .offset4 { margin-left: 33.3333%; } .offset6 { margin-left: 50%; } /* Free-floating spans outside a .row-fluid still need box sizing. */ [class*="span"] { box-sizing: border-box; } /* ----------------------------------------------- 4. app utility classes */ /* `displayNone` is the application's own hide mechanism and appears 83 times. With no stylesheet it did nothing, so 83 elements that should be hidden — dialogs, overlays, conditional panels — were rendering on the page. This single rule removes most of the visual noise in the unstyled build. */ .displayNone { display: none !important; } .setWidth { width: 100%; } .setMargin { margin: var(--al-gap) 0; } .addMarginLeft10 { margin-left: 10px; } .topAlign { vertical-align: top; } .font-size-16 { font-size: 16px; } .removeUnderline { text-decoration: none; } .removeUnderline:hover { text-decoration: none; } .break-word { overflow-wrap: break-word; word-wrap: break-word; } .min-height-500 { min-height: 500px; } .center { text-align: center; } /* Required-field marker. Amber rather than red: it is guidance, not an error. */ .mandatoryField { color: var(--al-amber); font-weight: 700; } /* `pgDis` marks a disabled page/step in the activity sequence. */ .pgDis { opacity: .45; pointer-events: none; } .gradient { background: linear-gradient(180deg, var(--al-surface) 0%, var(--al-paper) 100%); } /* ----------------------------------- 4b. uninitialised widgets and images */ /* The application builds its dialogs with jQuery UI and its popups with Bootstrap, but the scripts that CALL .dialog() / .modal() were part of the missing custom JavaScript. An uninitialised dialog container is just a plain
, so the login, forgot-password and registration forms all rendered stacked down the public page at once, complete with their validation messages and Close buttons. These containers are hidden by default and revealed only once the widget library has actually wrapped them — jQuery UI moves the node inside a .ui-dialog, and Bootstrap sets an inline display on .modal. So this hides the broken state without breaking the working one. */ #dialog, #dialog-confirm, #cmedialog, #editdialog, #viewTranscript, #assignActivityCourse, #duplicateErrorDialog, #removeActivityDialog, #removeCmeHoursDialog, #editProfiledialogActMngr { display: none; } .ui-dialog #dialog, .ui-dialog #dialog-confirm, .ui-dialog #cmedialog, .ui-dialog #editdialog, .ui-dialog #viewTranscript, .ui-dialog #assignActivityCourse, .ui-dialog #duplicateErrorDialog, .ui-dialog #removeActivityDialog, .ui-dialog #removeCmeHoursDialog, .ui-dialog #editProfiledialogActMngr { display: block; } /* Bootstrap 2 wrote `.modal.hide`; Bootstrap 3 hides `.modal` itself. Belt and braces so a stray legacy modal cannot render inline. Bootstrap's JS sets an inline `display:block` when opening, which beats this rule. */ .modal { display: none; } .modal.in { display: block; } /* The markup carries `` on banner images. When the source is missing or square that resolves to a full-width SQUARE — this is what turned the admin dashboard into a 1400px coloured block. Cap the height and crop. */ .branding img, .header img, .banner img { max-height: 140px; width: 100%; object-fit: cover; display: block; } /* Brand presence in place of the missing logo files. The logo images are intentionally transparent, so the wordmark is supplied here instead. */ .branding .col-md-8::before { content: "Audience Learning"; display: block; font-family: var(--al-display); font-size: 19px; font-weight: 700; letter-spacing: .01em; color: #fff; padding: 14px 15px 0; } /* -------------------------------------------------------- 5. layout shell */ .wrapper { min-height: 100vh; display: flex; flex-direction: column; } .main { flex: 1 0 auto; } .content, .inner_contain { background: var(--al-surface); border: 1px solid var(--al-rule); border-radius: var(--al-radius); box-shadow: var(--al-shadow); padding: 28px; margin: var(--al-gap) 0 40px; } .content::before, .content::after { content: " "; display: table; } .content::after { clear: both; } .container { padding-left: 20px; padding-right: 20px; } /* Page title band above the content card. */ .dashText { font-size: 26px; margin: 28px 0 4px; } .dashText + .dashText { font-size: 15px; color: var(--al-muted); font-family: var(--al-body); } /* ------------------------------------------------------------ 6. top nav */ .branding { background: var(--al-ink); padding: 0; margin: 0; border-bottom: 3px solid var(--al-teal); } .navbar, .navbar-default { background: transparent !important; border: 0 !important; margin-bottom: 0; border-radius: 0; min-height: 56px; } .navbar-default .navbar-nav > li > a { color: rgba(255, 255, 255, .78) !important; font-size: 14px; font-weight: 600; padding: 18px 16px; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #fff !important; background: rgba(255, 255, 255, .06) !important; border-bottom-color: var(--al-teal-bright); } /* The app sets `active` on the current nav item server-side. */ .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus { color: #fff !important; background: rgba(255, 255, 255, .1) !important; border-bottom-color: var(--al-teal-bright); } .navbar-default .navbar-toggle { border-color: rgba(255, 255, 255, .35); } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle:hover { background: rgba(255, 255, 255, .1); } /* --------------------------------------------------------- 7. panels/cards */ .panel { background: var(--al-surface); border: 1px solid var(--al-rule); border-radius: var(--al-radius); box-shadow: var(--al-shadow); margin-bottom: var(--al-gap); } .panel-default > .panel-heading, .panel > .panel-heading { background: var(--al-surface); border-bottom: 1px solid var(--al-rule); padding: 14px 18px; border-radius: var(--al-radius) var(--al-radius) 0 0; color: var(--al-ink); } .panel-title { font-family: var(--al-display); font-size: 17px; font-weight: 600; margin: 0; } .panel-title > a { color: inherit; text-decoration: none; } .panel-body { padding: 18px; } /* `panel-teal` is the app's own emphasis variant — the surviving brand cue. Given a teal rule and tinted heading rather than a solid fill, so a page of several panels doesn't become a wall of colour. */ .panel-teal { border-color: #BFDBD8; } .panel-teal > .panel-heading { background: var(--al-teal-wash); border-bottom-color: #BFDBD8; color: var(--al-teal); } .panel-teal > .panel-heading .panel-title { color: #0B5250; } /* ------------------------------------- 8. SIGNATURE: credit-hours meter */ /* Bootstrap 2 progress markup (`.progress > .bar`) that Bootstrap 3 leaves completely unstyled. Treated as a ruled gauge on a certificate: a hairline frame, tick marks at each quarter, tabular numerals, teal fill. Amber (`.bar-warning`) when the clinician is behind on required credit. */ .progress { position: relative; height: 26px; background: var(--al-paper); border: 1px solid var(--al-rule); border-radius: var(--al-radius); box-shadow: none; overflow: hidden; margin-bottom: 12px; } /* Quarter ticks, drawn as a repeating hairline rather than extra elements. */ .progress::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, var(--al-rule) 1px, transparent 1px); background-size: 25% 100%; opacity: .8; } .progress > .bar, .progress > .progress-bar { position: relative; z-index: 1; float: left; height: 100%; background: linear-gradient(180deg, var(--al-teal-bright) 0%, var(--al-teal) 100%); color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); transition: width .5s cubic-bezier(.22, .61, .36, 1); } .progress > .bar-info { background: linear-gradient(180deg, var(--al-teal-bright) 0%, var(--al-teal) 100%); } .progress > .bar-success { background: linear-gradient(180deg, #3E9C68 0%, var(--al-green) 100%); } .progress > .bar-warning { background: linear-gradient(180deg, #D2913C 0%, var(--al-amber) 100%); } /* Big tabular credit figure, e.g. "12.5 of 20 hours". */ .creditNumber { font-family: var(--al-display); font-size: 32px; font-weight: 700; color: var(--al-teal); line-height: 1; } /* ------------------------------------------------------------- 9. tables */ /* Ledger treatment: no vertical rules, hairline row separators, a ruled header. Numbers sit right so columns of credit hours align. */ .table { background: var(--al-surface); margin-bottom: 0; border-collapse: collapse; width: 100%; } .table > thead > tr > th { background: var(--al-paper); border-bottom: 2px solid var(--al-rule) !important; border-top: 0 !important; color: var(--al-muted); font-family: var(--al-body); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 11px 14px; vertical-align: middle; } .table > tbody > tr > td { border-top: 1px solid var(--al-rule-soft) !important; padding: 11px 14px; vertical-align: middle; } .table > tbody > tr:hover > td { background: #FAFCFB; } /* The app's own class on dashboard activity tables. */ .activitesFont { font-size: 14px; } /* `table-bordered` is used widely; soften it to fit the ledger look. */ .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-left: 0 !important; border-right: 0 !important; } /* -------------------------------------------------------------- 10. forms */ .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], select, textarea { background: var(--al-surface); border: 1px solid var(--al-rule); border-radius: var(--al-radius); box-shadow: none; color: var(--al-text); font-family: var(--al-body); font-size: 15px; padding: 9px 12px; height: auto; width: 100%; max-width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--al-teal); box-shadow: 0 0 0 3px rgba(26, 155, 147, .18); outline: none; } label { font-weight: 600; font-size: 14px; color: var(--al-ink); margin-bottom: 5px; } /* Checkboxes/radios must not be stretched by the width:100% above. */ input[type="checkbox"], input[type="radio"] { width: auto; margin-right: 6px; } .UsernameEmailAlign { margin-bottom: 14px; } .searchTopTextbox { max-width: 260px; display: inline-block; } /* ------------------------------------------------------------ 11. buttons */ .btn, .Button, .nextButton, .searchButton, .startActivityQuiz, .viewUserButtons { display: inline-block; font-family: var(--al-body); font-size: 14px; font-weight: 600; line-height: 1.4; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--al-radius); cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .05s ease; } .btn:active, .Button:active, .nextButton:active { transform: translateY(1px); } .btn-primary, .Button, .nextButton, .startActivityQuiz { background: var(--al-teal); border-color: var(--al-teal); color: #fff; } .btn-primary:hover, .Button:hover, .nextButton:hover, .startActivityQuiz:hover, .btn-primary:focus, .Button:focus, .nextButton:focus, .startActivityQuiz:focus { background: var(--al-teal-bright); border-color: var(--al-teal-bright); color: #fff; } .btn-default, .searchButton, .viewUserButtons { background: var(--al-surface); border-color: var(--al-rule); color: var(--al-ink); } .btn-default:hover, .searchButton:hover, .viewUserButtons:hover { background: var(--al-paper); border-color: var(--al-muted); color: var(--al-ink); } .btn-success { background: var(--al-green); border-color: var(--al-green); color: #fff; } .btn-danger { background: var(--al-red); border-color: var(--al-red); color: #fff; } .exampleLink { color: var(--al-teal); font-size: 13px; } .printerIcon { color: var(--al-muted); font-size: 18px; } .printerIcon:hover { color: var(--al-teal); } /* --------------------------------------------------------- 12. login page */ /* The login view carries the public marketing shell — carousel, activity cards, specialty sidebar — so it gets a little more presence than the internal pages. */ .login-shell, body.login { background: var(--al-paper); } .carousel, .carousel-inner { border-radius: var(--al-radius); overflow: hidden; } .carousel-caption { background: linear-gradient(180deg, rgba(16, 38, 43, 0) 0%, rgba(16, 38, 43, .85) 100%); text-shadow: none; left: 0; right: 0; bottom: 0; padding: 28px 22px 20px; text-align: left; } .carousel-caption h1, .carousel-caption h2, .carousel-caption h3 { color: #fff; margin: 0 0 6px; } .carousel-control { background-image: none !important; opacity: .7; } .carousel-control:hover { opacity: 1; } /* Activity cards in the public catalogue. */ .activity-view { background: var(--al-surface); border: 1px solid var(--al-rule); border-radius: var(--al-radius); box-shadow: var(--al-shadow); padding: 16px; margin-bottom: var(--al-gap); transition: box-shadow .18s ease, transform .18s ease; } .activity-view:hover { box-shadow: 0 2px 4px rgba(16,38,43,.08), 0 10px 24px rgba(16,38,43,.09); transform: translateY(-2px); } .activity-title { font-family: var(--al-display); font-size: 17px; font-weight: 600; color: var(--al-ink); margin-bottom: 6px; display: block; } /* ------------------------------------------------------ 13. search sidebar */ .sideBarDiv, .sideBarAdvanceSearch { background: var(--al-surface); border: 1px solid var(--al-rule); border-radius: var(--al-radius); padding: 18px; margin-bottom: var(--al-gap); } .sideBarDiv h3, .sideBarAdvanceSearch h3 { font-size: 15px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--al-rule-soft); } .searchType { margin-bottom: 8px; display: block; font-size: 14px; } /* --------------------------------------------- 14. activity / quiz pages */ .activityQuestion { background: var(--al-surface); border: 1px solid var(--al-rule); border-left: 3px solid var(--al-teal); border-radius: var(--al-radius); padding: 18px 20px; margin-bottom: 16px; } .activityQuestionDescription { font-family: var(--al-display); font-size: 17px; font-weight: 600; color: var(--al-ink); margin-bottom: 14px; display: block; } .activityQuestionType { font-size: 12px; color: var(--al-muted); } /* Answer options as selectable rows rather than bare radio buttons. */ .questionOption, .answerOption { display: block; background: var(--al-paper); border: 1px solid var(--al-rule-soft); border-radius: var(--al-radius); padding: 10px 14px; margin-bottom: 8px; font-weight: 400; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .questionOption:hover, .answerOption:hover { background: var(--al-teal-wash); border-color: #BFDBD8; } .userActivityName { font-family: var(--al-display); font-weight: 600; } .UserActivityAction { white-space: nowrap; } .accountDetails { margin-bottom: var(--al-gap); } .couponCodeSpan { font-size: 13px; color: var(--al-muted); } .uploadPrintFile, .file_upload { margin: 10px 0; } /* ------------------------------- 14b. reconstructed admin navigation states */ /* Supports scripts/admin-nav.js, which restores the dead `href="#"` links. */ .al-backbar { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--al-rule); } .al-loading { padding: 40px 0; text-align: center; color: var(--al-muted); font-style: italic; } .al-notice p { margin: 6px 0 0; font-style: normal; } /* Admin dashboard link lists read as menus, not paragraphs of blue text. */ .adminPage .panel-body a.exampleLink { display: block; padding: 9px 2px; border-bottom: 1px solid var(--al-rule-soft); font-size: 14px; transition: color .12s ease, padding-left .12s ease; } .adminPage .panel-body a.exampleLink:last-child { border-bottom: 0; } .adminPage .panel-body a.exampleLink:hover { color: var(--al-teal-bright); padding-left: 8px; text-decoration: none; } /* ------------------------------------------------ 15. alerts and messages */ .alert { border-radius: var(--al-radius); border-width: 1px; border-left-width: 3px; padding: 12px 16px; } .alert-info { background: var(--al-teal-wash); border-color: #BFDBD8; color: #0B5250; } .alert-warning { background: var(--al-amber-wash); border-color: #E8CFA4; color: #7A4D12; } .alert-success { background: #E9F4ED; border-color: #BCDCC8; color: #1F5A38; } .alert-danger { background: #FBECEC; border-color: #E5C0C0; color: #7E2424; } /* ------------------------------------------------------------ 16. footer */ .footer, footer, .main_footer { background: var(--al-ink); color: rgba(255, 255, 255, .68); padding: 26px 0; margin-top: 40px; font-size: 13px; flex-shrink: 0; } .footer a, footer a, .main_footer a { color: rgba(255, 255, 255, .88); } .footer a:hover, footer a:hover { color: #fff; } .socials-inner a { color: rgba(255,255,255,.8); margin-right: 10px; font-size: 16px; } .socials-inner a:hover { color: #fff; } /* ------------------------------------------- 17. accessibility + responsive */ /* Bootstrap 3 removes focus outlines in places; put a visible one back. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--al-teal-bright); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (max-width: 767px) { /* Collapse the BS2 shim to full width so old blocks stack cleanly. */ .row-fluid [class*="span"] { float: none; width: 100%; } [class*="offset"] { margin-left: 0 !important; } .content, .inner_contain { padding: 18px; } .dashText { font-size: 21px; } h1 { font-size: 24px; } /* Wide legacy tables must scroll rather than break the page. */ .table-responsive, .content > .table, .panel-body > .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .searchTopTextbox { max-width: 100%; } } /* Old fixed pixel widths in the markup must not force a horizontal scrollbar. */ img, table, iframe, object, embed { max-width: 100%; } img { height: auto; } /* Print: the transcript and certificate pages are meant to be printed. */ @media print { .branding, .navbar, .footer, footer, .no-print { display: none !important; } body { background: #fff !important; } .content, .panel { border: 0; box-shadow: none; padding: 0; } }