/*	BEGIN GLOBAL STYLES */
/* Set everything's font size to be the size of its parent */
* {
    font-size: 100%;
}

/* Remove all margins & borders and force them to something later */
* {
    margin: 0;
    padding: 0;
}

/* The top section of styles concerns colors, fonts and such.  There's
   another section below that deals with sizes, borders, margins, etc. */

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #CCCCCC;
    
    font-size: 100%;
    line-height: 1.5;
}

td {
    vertical-align: top;
}

th {
    vertical-align: top;
    text-align: left;
}

a {
    text-decoration: none;
    color: #000066;
}

a:link {
    color: #000066;
}

a:visited {
    color: #0064A4;
}

a:hover {
    color: #993333;
}

table {
    border-collapse: separate;
    empty-cells: show;
}

/* When using h3, add a <span>...</span> around the text.  This
   provides a header with a blue line in the background a white
   background behind the letters */
h3 {
    text-align: center;
    background-image: url("../Images/Main/hrline.gif");
    background-position: center left;
    background-repeat: repeat-x;
}

h1 span {
    text-transform: uppercase;
}

h1 {
    text-transform: uppercase;
}

h2 span {
    text-transform: uppercase;
}

h2 {
    text-transform: uppercase;
}

h3 span {
    background-color: white;
    color: #000066;
    text-transform: uppercase;
}
/*	END GLOBAL STYLES */

/* ********************************************************************** */
/* WCAG 2.4.1: Skip navigation link                                      */
/* ********************************************************************** */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0064A4;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 1000;
    font-size: 14px;
    text-decoration: underline;
}

.skip-link:focus {
    top: 0;
}

/* ********************************************************************** */
/* WCAG 1.3.1: Screen-reader-only utility                                */
/* ********************************************************************** */
.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;
}

/* ********************************************************************** */
/* WCAG 2.4.7 / 2.4.11: Visible focus indicators (not obscured)          */
/* ********************************************************************** */
a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus,
[role="button"]:focus {
    outline: 2px solid #0064A4;
    outline-offset: 2px;
}

.maindata input.btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: #005a96;
}

.audience_nav_left a:focus,
.audience_nav_left [role="button"]:focus,
.audience_nav_right a:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ********************************************************************** */
/* WCAG 1.4.10: Reflow — max-width instead of fixed width                */
/* ********************************************************************** */
.tbl-container {
    background-color: white;
    max-width: 1024px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tbl-container_report {
    background-color: white;
}

/* Banner */
.banner {
    background-image: url("../Images/UCIrvine-blue-montone-gradient.png");
    background-repeat: no-repeat;
    background-size: cover;
    enable-background: new;
    background-repeat: repeat-y;
}

/* ********************************************************************** */
/* WCAG 1.4.3: Contrast fix — #ffe273 on blue fails AA, use #ffffff      */
/* ********************************************************************** */
/* Navigation row */
.audience_nav_left {
    text-align: left;
    background-image: url("../Images/UCIrvine-blue-montone-gradient.png");
    background-repeat:no-repeat;
    background-size:cover;
    color: #ffffff;
    font-size: 100%;
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}

    .audience_nav_left a {
        color: #ffffff;
    }

    .audience_nav_left a:hover {
        background-color: #FBEDB5;
        color: #0064A4;
    }

.audience_nav_right {
    padding-right: 10px;
    text-align: right;
    background-image: url("../Images/UCIrvine-blue-montone-gradient.png");
    color: #ffffff;
    font-size: 100%;
    font-weight: bold;
    padding-bottom: 5px;
    padding-top: 5px;
}

    .audience_nav_right a {
        color: #ffffff;
    }

        .audience_nav_right a:hover {
            background-color: #FBEDB5;
            color: #0064A4;
        }

/* ********************************************************************** */
/* WCAG 1.3.1: Inline horizontal nav list (replaces pipe-separated spans) */
/* ********************************************************************** */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nav-list li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.nav-list li + li::before {
    content: "|";
    color: #ffffff;
    padding-left: 6px;
    padding-right: 6px;
    speak: none;
}

.nav-list a,
.nav-list a[href] {
    color: #ffffff;
    background: none;
    border: none;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: none;
}

.nav-list a:hover,
.nav-list a[href]:hover {
    background-color: #FBEDB5;
    color: #0064A4;
}

/* ********************************************************************** */
/* WCAG 1.3.1: Sidebar headings (semantic h2 styled like h4)             */
/* ********************************************************************** */
h2.sidebar-heading {
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
    margin: .5em;
    margin-top: 1.25em;
    text-transform: none;
}

h2.sidebar-heading:first-child {
    margin-top: .5em;
}

h2.sidebar-heading + ul {
    margin-top: 0;
}

/* ********************************************************************** */
/* WCAG 1.3.1: Content page headings                                     */
/* ********************************************************************** */
h2.content-heading {
    color: #0064A4;
    font-size: 1rem;
    font-weight: bold;
    margin: 0.5em;
    text-transform: none;
}

.ftr-row {
    background-color: #f1f1e7;
    text-align: center;
    vertical-align: middle;
    font-size: 100%;
}

/* ********************************************************************** */
/* Put back some of the default margins & padding */
/* ********************************************************************** */
.lborder {
    border-left: 6px solid white;
}

.rborder {
    border-right: 6px solid white;
}

.tborder {
    border-top: 2px solid white;
}

.bborder {
    border-bottom: 2px solid white;
}

.rightcolumn {
    padding-top: 10px;
}

p {
    padding: 1em;
}

/* This allows the H3 text to have a background of white */
h3 {
    margin: 1em;
}

    h3 span {
        padding-left: 1em;
        padding-right: 1em;
    }

/* This TH is used for tables where the "header" is the left column,
   and the "data" is the right column.  Used for the events table
   where the TH is the date, and the TD is the event. */
th {
    padding-right: 1em;
}

/* We need to set the "default" borders & margins for the list
   elements, as we have that global 0 above */
ul {
    margin-left: 1em;
    padding-left: 1em;
}

li {
    margin-top: .25em;
    margin-bottom: .25em;
}

h1 {
    color: #0064A4;
    font-size: 125%;
    margin: .5em;
}

h4 {
    margin: .5em;
}

.maindata h3 {
    text-align: center;
    background-image: url("../Images/Main/hrline.gif");
    background-position: center left;
    background-repeat: repeat-x;
}

.page2data h2 {
    color: #0064A4;
    font-size: 15px;
    margin-top: 13px;
    padding-right: 10px;
}

.page2data input {
    border: 1px solid;
}

.page2data textarea {
    border: 1px solid;
}

.resource_nav {
    background-color: #f1f1e7;
}

.resources {
    margin-bottom: 20px;
    margin-right: 5px;
}

/* ********************************************************************** */
/* WCAG 2.5.8: Target Size (Minimum) — 24x24px interactive targets       */
/* ********************************************************************** */
.rbl {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

.rbl input[type="radio"] {
    margin-left: 2px;
    margin-right: 2px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.rbl label {
    margin-left: 4px;
    vertical-align: middle;
    font-size: 1rem;
}

.rbl td {
    font-size: 1rem;
    padding: 4px 0;
}

.cbl label {
    margin-left: 4px;
    vertical-align: middle;
    font-size: 1rem;
}

.cbl input[type="checkbox"] {
    margin-left: 2px;
    margin-right: 2px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.cbl td {
    font-size: 1rem;
}

.textbox input:not([type]), input[type="text"], input[type="password"], input[type="file"] {
    color: #000000;
    font-family: Arial, Verdana, Tahoma, Calibri;
    line-height: 100%;
    padding: 2px 2px 2px 2px;
}

.maindata {
    margin: 0px;
    padding: 0px;
}

.maindata p {
    margin: 0px;
    padding: 0px;
}

/* WCAG 1.4.1: Error messages — add icon alongside color */
.maindata span.error {
    color: red;
    font-weight: normal;
}

.maindata span.error::before {
    content: "\26A0\00A0";
}

.maindata table.form {
    width: 100%;
    background-color: #F1F1E7;
}

.maindata td.hr {
    text-align: center;
    background-image: url("../Images/Main/hrline.gif");
    background-position: center left;
    background-repeat: repeat-x;
}

.maindata td.caption span {
    background-color: white;
}

.maindata td.header {
    font-size: medium;
    text-align: left;
    padding-top: 6px;
    padding-left: 15px;
    background-color: white;
    font-weight: bold;
}

.maindata td.caption {
    text-align: left;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #CDD6C9;
    font-weight: bold;
}

.maindata td.label {
    width: 2%;
    text-align: right;
    padding-left: 15px;
    vertical-align: text-top;
    padding-bottom: 2px;
    padding-top: 2px;
}

/* WCAG 2.5.8: Minimum 24x24px target for buttons */
.maindata input.btn {
    color: #EFF5FB;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #0064A4;
    border: 1px solid;
    border-top-color: #696;
    border-left-color: #696;
    border-right-color: #363;
    border-bottom-color: #363;
    padding: 8px 16px;
    min-height: 24px;
    border-radius: 5px;
    cursor: pointer;
}

.maindata input.btnhov {
    background-color: #FBEDB5;
    color: #0064A4;
}

.maindata input.tf {
    background-color: White;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
    border-style: inset;
    border-width: thin;
    padding: 5px 2px 5px 2px;
    border-radius: 5px;
}

.maindata textarea.tf {
    background-color: White;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
    border-style: inset;
    border-width: thin;
    padding: 5px 2px 5px 2px;
    border-radius: 5px;
}

.maindata select.tf {
    background-color: White;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
    border-style: inset;
    border-width: thin;
    padding: 5px 2px 5px 2px;
    border-radius: 5px;
}

/* WCAG 1.4.1: Error labels — add icon alongside color */
.maindata label.error {
    color: red;
    font-size: 12pt;
    font-weight: normal;
}

.maindata label.error::before {
    content: "\26A0\00A0";
}

.tb table {
    width: 100%;
    border-width: 2px;
    border-style: solid;
    border-color: #CDD6C9;
}

.tb th {
    text-align: center;
    background-color: #CDD6C9;
    border-width: 1px;
    border-color: #8D9689;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle;
}

.tb td {
    border-width: 1px;
    border-color: #CDD6C9;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: top;
}

.tb td.odd_row {
    border-width: 1px;
    border-color: #CDD6C9;
    background-color: #EFEFEF;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: top;
}

.modalBackground {
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.modalPopup {
    background-color: #F1F1E7;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
}

/* WCAG 4.1.2: Modal dialog styling */
.modalPopup[role="dialog"]:focus {
    outline: 2px solid #0064A4;
}

.MyCalendar .ajax__calendar_container {
    padding: 4px;
    cursor: default;
    width: 240px;
    font-size: 11px;
    text-align: center;
    font-family: tahoma,verdana,helvetica;
}

.MyCalendar .ajax__calendar_body {
    height: 139px;
    width: 240px;
    position: relative;
    overflow: hidden;
    margin: auto;
}

.MyCalendar .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {
    top: 0px;
    left: 0px;
    height: 139px;
    width: 240px;
    position: absolute;
    text-align: center;
    margin: auto;
}

.MyCalendar .ajax__calendar_container TABLE {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
}

.MyCalendar .ajax__calendar_container TD {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
}

.MyCalendar .ajax__calendar_header {
    height: 20px;
    width: 100%;
}

.MyCalendar .ajax__calendar_prev {
    cursor: pointer;
    width: 24px;
    height: 24px;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(../Images/arrow-left.gif);
}

.MyCalendar .ajax__calendar_next {
    cursor: pointer;
    width: 24px;
    height: 24px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(../Images/arrow-right.gif);
}

.MyCalendar .ajax__calendar_title {
    cursor: pointer;
    font-weight: bold;
    margin-left: 15px;
    margin-right: 15px;
}

.MyCalendar .ajax__calendar_footer {
    height: 15px;
}

.MyCalendar .ajax__calendar_today {
    cursor: pointer;
    padding-top: 3px;
}

.MyCalendar .ajax__calendar_dayname {
    height: 17px;
    width: 17px;
    text-align: right;
    padding: 0 2px;
}

/* WCAG 2.5.8: Calendar day targets minimum 24x24px */
.MyCalendar .ajax__calendar_day {
    height: 24px;
    width: 24px;
    text-align: right;
    padding: 0 2px;
    cursor: pointer;
}

.MyCalendar .ajax__calendar_month {
    height: 44px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.MyCalendar .ajax__calendar_year {
    height: 44px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.MyCalendar .ajax__calendar_container {
    border: 1px solid #646464;
    background-color: white;
    color: #000000;
}

/* BetterGridView */
.tb table.BGVBottomRowTable {
    border: 0px;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}

.tb tr.BGVBottomRow {
    margin: 0px;
    padding: 0px;
    border-collapse: collapse;
}

.tb td.BGVBottomCell {
    margin: 0px;
    padding: 0px;
    float: left;
    white-space: nowrap;
    border-collapse: collapse;
    vertical-align: middle;
}

.tb select.BGVBottomRowPageSizeDDL {
    margin-right: 20px;
}

.tb select.BGVBottomRowPagerPageIndexDDL {
    margin-right: 2px;
}

/* WCAG 2.5.8: Pager buttons minimum 24x24px target */
.tb input.BGVBottomRowPagerFirstPage {
    background-image: url("../Images/Pager/first.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    padding: 0px;
    margin: 0px;
    display: table-cell;
    vertical-align: middle;
}

.tb input.BGVBottomRowPagerPreviousPage {
    background-image: url("../Images/Pager/left.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    margin-right: 2px;
}

.tb input.BGVBottomRowPagerNextPage {
    background-image: url("../Images/Pager/right.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    margin-left: 2px;
}

.tb input.BGVBottomRowPagerLastPage {
    background-image: url("../Images/Pager/last.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
}

.tbl-container-wide {
    max-width: 1024px;
}

/* ********************************************************************** */
/* WCAG 1.3.1: Fieldset reset for radio group labels                     */
/* ********************************************************************** */
fieldset.sending-time-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* ********************************************************************** */
/* WCAG 1.3.1: Custom list info in mailing list controls                 */
/* ********************************************************************** */
ul.custom-list-info {
    margin-left: 1em;
    padding-left: 1em;
    list-style-type: disc;
}

ul.custom-list-info li {
    margin-top: .25em;
    margin-bottom: .25em;
}

/* ********************************************************************** */
/* WCAG 1.4.11: High contrast / forced-colors support                    */
/* ********************************************************************** */
@media (forced-colors: active) {
    .skip-link:focus {
        outline: 2px solid ButtonText;
    }

    a:focus,
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: 2px solid ButtonText;
    }

    .maindata input.btn {
        border: 2px solid ButtonText;
    }
}

/* ********************************************************************** */
/* WCAG 2.3.3: Respect reduced motion preferences                        */
/* ********************************************************************** */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ********************************************************************** */
/* WCAG 1.4.12: Text spacing — prevent clipping on user overrides         */
/* ********************************************************************** */
.maindata td.label,
.maindata td.caption,
.nav-list li,
.resources li {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.tbl-container,
.tbl-container_report {
    overflow-wrap: break-word;
}

/* ********************************************************************** */
/* WCAG 1.4.1 / 2.4.8: Current page indicator in navigation              */
/* ********************************************************************** */
.resources a[aria-current="page"],
.nav-list a[aria-current="page"] {
    text-decoration: underline;
    font-weight: bold;
}

/* ********************************************************************** */
/* Print styles                                                           */
/* ********************************************************************** */
@media print {
    .skip-link,
    .audience_nav_left,
    .audience_nav_right,
    .resource_nav,
    .stamps,
    .ftr-row {
        display: none !important;
    }

    .tbl-container,
    .tbl-container_report {
        max-width: 100%;
        width: 100%;
    }

    body {
        background: none;
        color: #000000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    a[href^="mailto:"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
}

/* ********************************************************************** */
/* Dynamic main content area — adapts to template type                    */
/* ********************************************************************** */
.main-content {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Default template: content shares space with right column */
.main-content--default {
    max-width: 100%;
}

/* Form template: full width, more breathing room for inputs */
.main-content--form {
    max-width: 100%;
    padding: 15px 20px;
}

/* Report template: edge-to-edge for data tables */
.main-content--report {
    max-width: 100%;
    padding: 10px;
}

/* Child containers inside main inherit fluid behavior */
.main-content > div[id="page2data"],
.main-content > .maindata {
    max-width: 800px;
    width: 100%;
}

.main-content--form > div[id="page2data"],
.main-content--form > .maindata {
    max-width: 100%;
}

.main-content table.form {
    max-width: 100%;
}

.main-content iframe {
    max-width: 100%;
    height: auto;
    min-height: 400px;
}