/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + WARNING: DO NOT UPDATE OR CHANGE THIS FILE + + IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE + + FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ :root { /*--- Defaults ---*/ --default: var(--base-light-bg-color); --default-text: var(--base-light-text); --cloud: var(--cloud-gray); --cloud-text: var(--cloud-gray-text); /*--- Primary ---*/ --primary: var(--titan-blue); --primary-rgb: var(--titan-blue-rgb); --primary-text: var(--titan-blue-text); --primary-hover: var(--titan-blue-hover); --primary-hover-text: var(--titan-blue-hover-text); --primary-border: var(--titan-blue-border); --primary-border-alt: var(--titan-blue-border-alt); /*--- Secondary ---*/ --secondary: var(--medium-blue); --secondary-rgb: var(--medium-blue-rgb); --secondary-text: var(--medium-blue-text); --secondary-hover: var(--medium-blue-hover); --secondary-hover-text: var(--medium-blue-hover-text); --secondary-border: var(--medium-blue-border); --secondary-border-alt: var(--medium-blue-border-alt); /*--- Neutral ---*/ --neutral: var(--beige); --neutral-rgb: var(--beige-rgb); --neutral-text: var(--beige-text); --neutral-hover: var(--beige-hover); --neutral-hover-text: var(--beige-hover-text); --neutral-border: var(--beige-border); --neutral-border-alt: var(--beige-border-alt); /*--- Dark ---*/ --dark: var(--cool-gray); --dark-rgb: var(--cool-gray-rgb); --dark-text: var(--cool-gray-text); --dark-hover: var(--cool-gray-hover); --dark-hover-text: var(--cool-gray-hover-text); --dark-border: var(--cool-gray-border); --dark-border-alt: var(--cool-gray-border-alt); /*--- Accent 1 ---*/ --accent-1: var(--orange); --accent-1-rgb: var(--orange-rgb); --accent-1-text: var(--orange-text); --accent-1-hover: var(--orange-hover); --accent-1-hover-text: var(--orange-hover-text); --accent-1-border: var(--orange-border); --accent-1-border-alt: var(--orange-border-alt); /*--- Accent 2 ---*/ --accent-2: var(--light-blue); --accent-2-rgb: var(--light-blue-rgb); --accent-2-text: var(--light-blue-text); --accent-2-hover: var(--light-blue-hover); --accent-2-hover-rgb: var(--light-blue-hover); --accent-2-hover-text: var(--light-blue-hover-text); --accent-2-border: var(--light-blue-border); --accent-2-border-alt: var(--light-blue-border-alt); /*--- My Black ---*/ --my-black: var(--black); --my-black-rgb: var(--black-rgb); --my-black-text: var(--black-text); --my-black-hover: var(--black-hover); --my-black-hover-rgb: var(--black-hover-rgb); --my-black-hover-text: var(--black-hover-text); --my-black-border: var(--black-border); --my-black-border-alt: var(--black-border-alt); /*--- My GRAY ---*/ --my-gray: var(--light-gray); --my-gray-rgb: var(--light-gray-rgb); --my-gray-text: var(--light-gray-text); --my-gray-hover: var(--light-gray-hover); --my-gray-hover-rgb: var(--light-gray-hover-rgb); --my-gray-hover-text: var(--light-gray-hover-text); --my-gray-border: var(--light-gray-border); --my-gray-border-alt: var(--light-gray-border-alt); --my-gray-link: var(--gray-link-text); --my-gray-link-hover: var(--gray-link-text-hover); /*--- My White ---*/ --my-white: var(--white); --my-white-rgb: var(--white-rgb); --my-white-text: var(--white-text); --my-white-hover: var(--white-hover); --my-white-hover-rgb: var(--white-hover-rgb); --my-white-hover-text: var(--white-hover-text); --my-white-border: var(--white-border); --my-white-border-alt: var(--white-border-alt); /*--- HEADERS & PAGE ELEMENTS ---*/ --header-default: var(--my-white); --header-default-text: var(--my-white-text); --unit-link: var(--dark); --unit-link-hover: var(--secondary-border-alt); --site-link: var(--primary); --site-link-hover: var(--primary-border-alt); --default-link: var(--default-link-light); --default-link-hover: var(--default-link-light-hover); --footer: var(--titan-blue); --footer-text: var(--titan-blue-text); --h1: var(--secondary); --h2: var(--secondary); --h3: var(--my-black); --h4: var(--light-dialog); --link: var(--default-link); --link-hover: var(--default-link-hover); --border-gray: var(--border-default); --input-border: var(--border-gray); --input-background: var(--my-white); --input-text: var(--my-white-text); --table-th: var(--warm-gray); --table-th-text: var(--warm-gray-text); --default-notice: var(--light-gray); --default-notice-text: var(--light-gray-text); --default-notice-border: var(--light-gray-hover); --default-notice-icon: var(--light-gray-text); --information: var(--information-light); --information-text: var(--information-light-text); --information-border: var(--information-light-border); --information-icon: var(--information-light-icon); --alert-red: var(--alert-red-light); --alert-red-text: var(--alert-red-light-text); --alert-red-border: var(--alert-red-light-border); --alert-red-icon: var(--alert-red-light-icon); --warning: var(--warning-light); --warning-text: var(--warning-light-text); --warning-border: var(--warning-light-border); --warning-icon: var(--warning-light-icon); --success: var(--success-light); --success-text: var(--success-light-text); --success-border: var(--success-light-border); --success-icon: var(--success-light-icon); --event-white: var(--event-white-light); --event-white-text: var(--event-white-light-text); --event-white-link: var(--event-white-light-link); --event-white-link-hover: var(--event-white-light-link-hover); --event-blue: var(--event-blue-light); --event-blue-text: var(--event-blue-light-text); --event-gray: var(--event-gray-light); --event-gray-text: var(--event-gray-light-text); --event-beige: var(--event-beige-light); --event-beige-text: var(--event-beige-light-text); --event-orange: var(--event-orange-light); --event-orange-text: var(--event-orange-light-text); } .dark-mode { /*--- defaults ---*/ --default: var(--base-dark-bg-color); --default-text: var(--base-dark-text); --cloud: var(--slate); --cloud-text: var(--slate-text); /*-- primary --*/ --primary: var(--titan-blue-dark); --primary-rgb: var(--titan-blue-dark-rgb); --primary-text: var(--titan-blue-dark-text); --primary-hover: var(--titan-blue-dark-hover); --primary-hover-text: var(--titan-blue-dark-hover-text); --primary-border: var(--titan-blue-dark-border); --primary-border-alt: var(--titan-blue-dark-border-alt); /*-- secondary --*/ --secondary: var(--medium-blue-dark); --secondary-rgb: var(--medium-blue-dark-rgb); --secondary-text: var(--medium-blue-dark-text); --secondary-hover: var(--medium-blue-dark-hover); --secondary-hover-text: var(--medium-blue-dark-hover-text); --secondary-border: var(--medium-blue-dark-border); --secondary-border-alt: var(--medium-blue-dark-border-alt); /*-- neutral --*/ --neutral: var(--beige-dark); --neutral-rgb: var(--beige-dark-rgb); --neutral-text: var(--beige-dark-text); --neutral-hover: var(--beige-dark-hover); --neutral-hover-text: var(--beige-dark-hover-text); --neutral-border: var(--beige-dark-border); --neutral-border-alt: var(--beige-dark-border-alt); /*-- dark --*/ --dark: var(--cool-gray-dark); --dark-rgb: var(--cool-gray-dark-rgb); --dark-text: var(--cool-gray-dark-text); --dark-hover: var(--cool-gray-dark-hover); --dark-hover-rgb: var(--cool-gray-dark-hover-rgb); --dark-hover-text: var(--cool-gray-dark-hover-text); --dark-dark-border: var(--cool-gray-dark-border); --dark-dark-border-alt: var(--cool-gray-dark-border-alt); /*-- accent 1 --*/ --accent-1: var(--orange-dark); --accent-1-rgb: var(--orange-dark-rgb); --accent-1-text: var(--orange-dark-text); --accent-1-hover: var(--orange-dark-hover); --accent-1-hover-rgb: var(--orange-dark-hover-rgb); --accent-1-hover-text: var(--orange-dark-hover-text); --accent-1-border: var(--orange-dark-border); --accent-1-border-alt: var(--orange-dark-border-alt); /*-- accent 2 --*/ --accent-2: var(--light-blue-dark); --accent-2-rgb: var(--light-blue-dark-rgb); --accent-2-text: var(--light-blue-dark-text); --accent-2-hover: var(--light-blue-dark-hover); --accent-2-hover-rgb: var(--light-blue-dark-hover-rgb); --accent-2-hover-text: var(--light-blue-dark-hover-text); --accent-2-border: var(--light-blue-dark-border); --accent-2-border-alt: var(--light-blue-dark-border-alt); /*-- black --*/ --my-black: var(--black-dark); --my-black-rgb: var(--black-dark-rgb); --my-black-text: var(--black-dark-text); --my-black-hover: var(--black-dark-hover); --my-black-hover-rgb: var(--black-dark-hover-rgb); --my-black-hover-text: var(--black-dark-hover-text); --my-black-border: var(--black-dark-border); --my-black-border-alt: var(--black-dark-border-alt); /*-- gray --*/ --my-gray: var(--light-gray-dark); --my-gray-rgb: var(--light-gray-dark-rgb); --my-gray-text: var(--light-gray-dark-text); --my-gray-hover: var(--light-gray-dark-hover); --my-gray-hover-rgb: var(--light-gray-dark-hover-rgb); --my-gray-hover-text: var(--light-gray-dark-hover-text); --my-gray-border: var(--light-gray-dark-border); --my-gray-border-alt: var(--light-gray-dark-border-alt); --my-gray-link: var(--gray-link-text); --my-gray-link-hover: var(--gray-link-text-hover); /*-- white --*/ --my-white: var(--white-dark); --my-white-rgb: var(--white-dark-rgb); --my-white-text: var(--white-dark-text); --my-white-hover: var(--white-dark-hover); --my-white-hover-rgb: var(--white-dark-hover-rgb); --my-white-hover-text: var(--white-dark-hover-text); --my-white-border: var(--white-dark-border); --my-white-border-alt: var(--white-dark-border-alt); /*--- HEADERS & PAGE ELEMENTS ---*/ --header-default: var(--default); --header-default-text: var(--default-text); --unit-link: var(--my-white); --unit-link-hover: var(--orange); --site-link: var(--my-white); --site-link-hover: var(--my-gray); --default-link: var(--default-link-dark); --default-link-hover: var(--default-link-dark-hover); --footer: var(--titan-blue-dark); --footer-text: var(--titan-blue-dark-text); --h1: var(--dark-mode-medium-blue-headers); --h2: var(--dark-mode-medium-blue-headers); --h3: var(--my-black-dark); --h4: var(--my-black-dark); --link: var(--default-link-dark); --link-hover: var(--default-link-dark-hover); --border-gray: var(--border-default-dark); --input-border: var(--light-gray); --input-background: var(--dialog); --input-text: var(--dialog-text); --table-th: var(--dark-warm-gray); --table-th-text: var(--dark-warm-gray-text); --default-notice: var(--dark-gray); --default-notice-text: var(--dark-gray-text); --default-notice-border: var(--dark-gray-hover); --default-notice-icon: var(--dark-gray-text); --information: var(--information-dark); --information-text: var(--information-dark-text); --information-border: var(--information-dark-border); --information-icon: var(--information-dark-icon); --alert-red: var(--alert-red-dark); --alert-red-text: var(--alert-red-dark-text); --alert-red-border: var(--alert-red-dark-border); --alert-red-icon: var(--alert-red-dark-icon); --warning: var(--warning-dark); --warning-text: var(--warning-dark-text); --warning-border: var(--warning-dark-border); --warning-icon: var(--warning-dark-icon); --success: var(--success-dark); --success-text: var(--success-dark-text); --success-border: var(--success-dark-border); --success-icon: var(--success-dark-icon); --event-white: var(--event-white-dark); --event-white-text: var(--event-white-dark-text); --event-white-link: var(--event-white-dark-link); --event-white-link-hover: var(--event-white-dark-link-hover); --event-blue: var(--event-blue-dark); --event-blue-text: var(--event-blue-dark-text); --event-gray: var(--event-gray-dark); --event-gray-text: var(--event-gray-dark-text); --event-beige: var(--event-beige-dark); --event-beige-text: var(--event-beige-dark-text); --event-orange: var(--event-orange-dark); --event-orange-text: var(--event-orange-dark-text); } :root { --wash-1: rgba(var(--primary-rgb), .7); --wash-1-text: var(--primary-text); --wash-2: rgba(var(--secondary-rgb), .7); --wash-2-text: var(--secondary-text); --wash-3: rgba(var(--neutral-rgb), .7); --wash-3-text: var(--neutral-text); --wash-4: rgba(var(--dark-rgb), .7); --wash-4-text: var(--dark-text); --wash-5: rgba(var(--accent-1-rgb), .7); --wash-5-text: var(--accent-1-text); --wash-6: rgba(var(--accent-2-rgb), .7); --wash-6-text: var(--accent-2-text); --wash-black: rgba(var(--my-black-rgb), .7); --wash-black-text: var(--my-black-text); --wash-gray: rgba(var(--my-gray-rgb), .7); --wash-gray-text: var(--my-gray-text); --wash-white: rgba(var(--my-white-rgb), .7); --wash-white-text: var(--my-white-text); } /*-------------------------------------------- TOP ELEMENTS */ main h1 { color: var(--h1); } main h2 { color: var(--h1); } main h3 { color: var(--h3); } main h4 { color: var(--h4); } main .section-stock h1 { color: unset; } .background { background-color: var(--default); color: var(--default-color); } /*-- PRIMARY COLOR --*/ .background-1, .background-1 *:not([class*="button"]):not(.breakout-row), .standout-block.background-1, [id*="box"].background-1, [id*="box"].background-1 *:not([class*="button"]):not(.breakout-row), main .background-1 summary, main .background-1 details[open] summary, .background-1 a, main .background-1 a, main .card-1 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-1"] .overlay-content *:not([class*="button"]), .background-1.blog-data, .breakout-bg.background-1, [id*='box'][class*='background'] .grid-item.background-1, [id*='box'][class*='background'] .grid-item.background-1 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-1 { background-color: var(--primary); color: var(--primary-text); text-decoration-color: var(--orange-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-1 a:not([class*='button']):hover, .card-1 a:not([class*='button']):hover { text-decoration-color: var(--primary-text); text-decoration-style: solid; } main .background-1 a:not([class*='button']):focus, .card-1 a:not([class*='button']):focus { text-decoration-color: var(--accent-1); text-decoration-style: solid; } .background-1.hover-focus:hover, .background-1.hover-focus:hover *:not([class*="button"]) { background-color: var(--primary-hover); color: var(--primary-hover-text); } [id*='box'].background-1 [id*='div'].alt, [id*='box'].background-1 [id*='div'].alt *, .breakout-bg.background-1.alt, .breakout-bg.background-1.alt *:not([class*="button"]), .background-1.hover-focus:hover, .background-1.hover-focus:hover *:not([class*="button"]) { background-color: var(--primary-hover); color: var(--primary-hover-text); } [id*='box'].background-1 .the-filter-tools details summary, .background-1 .the-filter-tools details summary { background-color: var(--primary-hover) !important; color: var(--primary-hover-text) !important; } /*-- SECONDARY COLOR --*/ .background-2, .background-2 *:not([class*="button"]):not(.breakout-row), .standout-block.background-2, [id*="box"].background-2, [id*="box"].background-2 *:not([class*="button"]):not(.breakout-row), main .background-2 summary, main .background-2 details[open] summary, main .background-2 details[open] summary *:not([class*="button"]), .background-2 a, main .background-2 a, main .card-2 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-2"] .overlay-content *:not([class*="button"]), .background-2.blog-data, [id*='box'][class*='background'] .grid-item.background-2, [id*='box'][class*='background'] .grid-item.background-2 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-2 { background-color: var(--secondary); color: var(--secondary-text); text-decoration-color: var(--orange-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-2 a:not([class*='button']):hover, .card-2 a:not([class*='button']):hover { text-decoration-color: var(--secondary-text); text-decoration-style: solid; } main .background-2 a:not([class*='button']):focus, .card-2 a:not([class*='button']):focus { text-decoration-color: var(--accent-1); text-decoration-style: solid; } .background-2.hover-focus:hover, .background-2.hover-focus:hover *:not([class*="button"]) { background-color: var(--secondary-hover); color: var(--secondary-hover-text); } [id*='box'].background-2 [id*='div'].alt, [id*='box'].background-2 [id*='div'].alt *, .breakout-bg.background-2.alt, .breakout-bg.background-2.alt *:not([class*="button"]), .background-2.hover-focus:hover, .background-2.hover-focus:hover *:not([class*="button"]) { background-color: var(--secondary-hover); color: var(--secondary-hover-text); } [id*='box'].background-2 .the-filter-tools details summary, .background-2 .the-filter-tools details summary { background-color: var(--secondary-hover) !important; color: var(--secondary-hover-text) !important; } /*-- NEUTRAL COLOR --*/ .background-3, .background-3 *:not([class*="button"]):not(.breakout-row), .standout-block.background-3, [id*="box"].background-3, [id*="box"].background-3 *:not([class*="button"]):not(.breakout-row), main .background-3 summary, main .background-3 details[open] summary, main .background-3 details[open] summary *:not([class*="button"]), .background-3 a, main .background-3 a, main .card-3 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-3"] .overlay-content *:not([class*="button"]), .background-3.blog-data, main [id*="div"][class*="background-3"] .overlay-content p a[class*='button-hover'], [id*='box'][class*='background'] .grid-item.background-3, [id*='box'][class*='background'] .grid-item.background-3 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-3 { background-color: var(--neutral); color: var(--neutral-text); text-decoration-color: var(--neutral-text-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-3 a:not([class*='button']):hover, main .card-3 a:not([class*='button']):hover { text-decoration-color: var(--orange-dark); text-decoration-style: solid; } main .background-3 a:not([class*='button']):focus, main .card-3 a:not([class*='button']):focus { text-decoration-color: var(--orange-dark); text-decoration-style: solid; } .background-3.hover-focus:hover, .background-3.hover-focus:hover *:not([class*="button"]) { background-color: var(--neutral-hover); color: var(--neutral-hover-text); } [id*='box'].background-3 [id*='div'].alt, [id*='box'].background-3 [id*='div'].alt *, .breakout-bg.background-3.alt, .breakout-bg.background-3.alt *:not([class*="button"]), .background-3.hover-focus:hover, .background-3.hover-focus:hover *:not([class*="button"]) { background-color: var(--neutral-hover); color: var(--neutral-hover-text); } [id*='box'].background-3 .the-filter-tools details summary, .background-3 .the-filter-tools details summary { background-color: var(--neutral-hover) !important; color: var(--neutral-hover-text) !important; } /*-- DARK COLOR --*/ .background-4, .background-4 *:not([class*="button"]):not(.breakout-row), .standout-block.background-4, [id*="box"].background-4, [id*="box"].background-4 *:not([class*="button"]):not(.breakout-row), main .background-4 summary, main .background-4 details[open] summary, main .background-4 details[open] summary *:not([class*="button"]), .background-4 a, main .background-4 a, main .card-4 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-4"] .overlay-content *:not([class*="button"]), .background-4.blog-data, [id*='box'][class*='background'] .grid-item.background-4, [id*='box'][class*='background'] .grid-item.background-4 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-4 { background-color: var(--dark); color: var(--dark-text); text-decoration-color: var(--dark-hover-text); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-4 a:not([class*='button']):hover, main .card-4 a:not([class*='button']):hover { text-decoration-color: var(--orange-hover); text-decoration-style: solid; } main .background-4 a:not([class*='button']):focus, main .card-4 a:not([class*='button']):focus { text-decoration-color: var(--orange-hover); text-decoration-style: solid; } .background-4.hover-focus:hover, .background-4.hover-focus:hover *:not([class*="button"]) { background-color: var(--dark-hover); color: var(--dark-hover-text); } [id*='box'].background-4 [id*='div'].alt, [id*='box'].background-4 [id*='div'].alt *, .breakout-bg.background-4.alt, .breakout-bg.background-4.alt *:not([class*="button"]), .background-4.hover-focus:hover, .background-4.hover-focus:hover *:not([class*="button"]) { background-color: var(--dark-hover); color: var(--dark-hover-text); } .background-4 button[disabled] { background-color: var(--dark-hover) !important; color: var(--dark-hover-text) !important; border: dashed 1px var(--dark-border-alt) !important; } [id*='box'].background-4 .the-filter-tools details summary, .background-4 .the-filter-tools details summary { background-color: var(--dark-hover) !important; color: var(--dark-hover-text) !important; } /*-- ACCENT 1 --*/ .background-5, .background-5 *:not([class*="button"]):not(.breakout-row), .standout-block.background-5, [id*="box"].background-5, [id*="box"].background-5 *:not([class*="button"]):not(.breakout-row), main .background-5 summary, main .background-5 details[open] summary, main .background-5 details[open] summary *:not([class*="button"]), .background-5 a, main .background-5 a, main .card-5 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-5"] .overlay-content *:not([class*="button"]), .background-5.blog-data, [id*='box'][class*='background'] .grid-item.background-5, [id*='box'][class*='background'] .grid-item.background-5 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-5 { background-color: var(--accent-1); color: var(--accent-1-text); text-decoration-color: var(--accent-1-text-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-5 a:not([class*='button']):hover, main .card-5 a:not([class*='button']):hover { text-decoration-color: var(--accent-1-hover); text-decoration-style: solid; } main .background-5 a:not([class*='button']):focus, main .card-5 a:not([class*='button']):focus { text-decoration-color: var(--accent-1-hover); text-decoration-style: solid; } .background-5.hover-focus:hover, .background-5.hover-focus:hover *:not([class*="button"]) { background-color: var(--accent-1-hover); color: var(--accent-1-hover-text); } [id*='box'].background-5 [id*='div'].alt, [id*='box'].background-5 [id*='div'].alt *, .breakout-bg.background-5.alt, .breakout-bg.background-5.alt *:not([class*="button"]), .background-5.hover-focus:hover, .background-5.hover-focus:hover *:not([class*="button"]) { background-color: var(--accent-1-hover); color: var(--accent-1-hover-text); } [id*='box'].background-5 .the-filter-tools details summary, .background-5 .the-filter-tools details summary { background-color: var(--accent-1-hover) !important; color: var(--accent-1-hover-text) !important; } /*-- ACCENT 2 --*/ .background-6, .background-6 *:not([class*="button"]):not(.breakout-row), .standout-block.background-6, [id*="box"].background-6, [id*="box"].background-6 *:not([class*="button"]):not(.breakout-row), main .background-6 summary, main .background-6 details[open] summary, main .background-6 details[open] summary *:not([class*="button"]), .background-6 a, main .background-6 a, main .card-6 a, [id*="box"][class*='stock-'] [id*="div"][class*="background-6"] .overlay-content *:not([class*="button"]), .background-6.blog-data, [id*='box'][class*='background'] .grid-item.background-6, [id*='box'][class*='background'] .grid-item.background-6 *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-6 { background-color: var(--accent-2); color: var(--accent-2-text); text-decoration-color: var(--accent-2-text-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-6 a:not([class*='button']):hover, main .card-6 a:not([class*='button']):hover { text-decoration-color: var(--my-white); text-decoration-style: solid; } main .background-6 a:not([class*='button']):focus, main .card-6 a:not([class*='button']):focus { text-decoration-color: var(--my-white); text-decoration-style: solid; } .background-6.hover-focus:hover, .background-6.hover-focus:hover *:not([class*="button"]) { background-color: var(--accent-2-hover); color: var(--accent-2-hover-text); } [id*='box'].background-6 [id*='div'].alt, [id*='box'].background-6 [id*='div'].alt *, .breakout-bg.background-6.alt, .breakout-bg.background-6.alt *:not([class*="button"]), .background-6.hover-focus:hover, .background-6.hover-focus:hover *:not([class*="button"]) { background-color: var(--accent-2-hover); color: var(--accent-2-hover-text); } [id*='box'].background-6 .the-filter-tools details summary, .background-6 .the-filter-tools details summary { background-color: var(--accent-2-hover) !important; color: var(--accent-2-hover-text) !important; } /*-- MY BLACK --*/ .background-black, .background-black *:not([class*="button"]):not(.breakout-row), .standout-block.background-black, [id*="box"].background-black, [id*="box"].background-black *:not([class*="button"]):not(.breakout-row), main .background-black summary, main .background-black details[open] summary, main .background-black details[open] summary *:not([class*="button"]), .background-black a, main .background-black a, main .card-black a, [id*="box"][class*='stock-'] [id*="div"][class*="background-black"] .overlay-content *:not([class*="button"]), .background-black.blog-data, [id*='box'][class*='background'] .grid-item.background-black, [id*='box'][class*='background'] .grid-item.background-black *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-black { background-color: var(--my-black); color: var(--my-black-text); text-decoration-color: var(--my-black-text-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-black a:not([class*='button']):hover, main .card-black a:not([class*='button']):hover { text-decoration-color: var(--orange); text-decoration-style: solid; } main .background-black a:not([class*='button']):focus, main .card-black a:not([class*='button']):focus { text-decoration-color: var(--orange); text-decoration-style: solid; } .background-black.hover-focus:hover, .background-black.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-black-hover); color: var(--my-black-hover-text); } [id*='box'].background-black [id*='div'].alt, [id*='box'].background-black [id*='div'].alt *, .breakout-bg.background-black.alt, .breakout-bg.background-black.alt *:not([class*="button"]), .background-black.hover-focus:hover, .background-black.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-black-hover); color: var(--my-black-hover-text); } [id*='box'].background-black .the-filter-tools details summary, .background-black .the-filter-tools details summary { background-color: var(--my-black-hover) !important; color: var(--my-black-hover-text) !important; } /*-- MY GRAY --*/ .background-gray, .background-gray *:not([class*="button"]):not(.breakout-row), .standout-block.background-gray, [id*="box"].background-gray, [id*="box"].background-gray *:not([class*="button"]):not(.breakout-row), main .background-gray summary, main .background-gray details[open] summary, main .background-gray details[open] summary *:not([class*="button"]), [id*="box"][class*='stock-'] [id*="div"][class*="background-gray"] .overlay-content *:not([class*="button"]), .background-gray.blog-data, [id*='box'][class*='background'] .grid-item.background-gray, [id*='box'][class*='background'] .grid-item.background-gray *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-gray { background-color: var(--my-gray); color: var(--my-gray-text); text-decoration-color: var(--my-gray-text-hover); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } .background-gray a, main .background-gray a, main .card-gray a { color: var(--my-gray-link); } .background-gray a:hover, main .background-gray a:hover, main .card-gray a:hover, .background-gray a:focus, main .background-gray a:focus, main .card-gray a:focus { color: var(--my-gray-link-hover); } main .background-gray a:not([class*='button']):hover, main .card-gray a:not([class*='button']):hover { text-decoration-color: var(--orange); text-decoration-style: solid; } main .background-gray a:not([class*='button']):focus, main .card-gray a:not([class*='button']):focus { text-decoration-color: var(--orange); text-decoration-style: solid; } .background-gray.hover-focus:hover, .background-gray.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-gray-hover); color: var(--my-gray-hover-text); } [id*='box'].background-gray [id*='div'].alt, [id*='box'].background-gray [id*='div'].alt *, .breakout-bg.background-gray.alt, .breakout-bg.background-gray.alt *:not([class*="button"]), .background-gray.hover-focus:hover, .background-gray.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-gray-hover); color: var(--my-gray-hover-text); } [id*='box'].background-gray .the-filter-tools details summary, .background-gray .the-filter-tools details summary { background-color: var(--my-gray-hover) !important; color: var(--my-gray-hover-text) !important; } /*-- MY WHITE --*/ .background-white, .background-white *:not([class*="button"]):not(.breakout-row), .standout-block.background-white, [id*="box"].background-white, [id*="box"].background-white *:not([class*="button"]):not(.breakout-row), main .background-white summary, main .background-white details[open] summary, main .background-white details[open] summary *:not([class*="button"]), .background-white a, main .background-white a, main .card-white a, [id*="box"][class*='stock-'] [id*="div"][class*="background-white"] .overlay-content *:not([class*="button"]), .background-white.blog-data, [id*='box'][class*='background'] .grid-item.background-white, [id*='box'][class*='background'] .grid-item.background-white *:not([class*="button"]), .grid-row .grid-backgrounds .grid-background.backround-white { background-color: var(--my-white); color: var(--my-white-text); text-underline-offset: var(--text-underline-offset-more); text-shadow: none; } main .background-white a:not([class*='button']):hover, main .card-white a:not([class*='button']):hover, main .background-white a:not([class*='button']):hover *, main .background-white a.link-icons:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-decoration-style: dotted; } main .background-white a:not([class*='button']):focus, main .card-white a:not([class*='button']):focus, main .background-white a.link-icons:focus { outline: solid 2px var(--orange) !important; } .background-white.hover-focus:hover, .background-white.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-white-hover); color: var(--my-white-hover-text); } [id*='box'].background-white [id*='div'].alt, [id*='box'].background-white [id*='div'].alt *, .breakout-bg.background-white.alt, .breakout-bg.background-white.alt *:not([class*="button"]), .background-white.hover-focus:hover, .background-white.hover-focus:hover *:not([class*="button"]) { background-color: var(--my-white-hover); color: var(--my-white-hover-text); } [id*='box'].background-white .the-filter-tools details summary, .background-white .the-filter-tools details summary { background-color: var(--my-white-hover) !important; color: var(--my-white-hover-text) !important; } /*-- ALL COLOR BACKGROUND WITH FILTERS --*/ [id*='box'].background-white .the-filter-tools details summary *, .background-white .the-filter-tools details summary * { background-color: inherit !important; color: inherit !important; } /*-- BACKGROUND OVER IMAGE --*/ .background-img { background-color: var(--box-shade-background-more); color: var(--white); } .background-img a:not([class*='button']) { color: var(--white); text-decoration-color: var(--border-gray); } .background-img a:hover:not([class*='button']) { color: var(--white-hover); text-underline-offset: var(--text-underline-offset-more); } .background-img-dark { background-color: var(--box-shade-background-most); color: var(--white); } .background-img-dark a:not([class*='button']) { color: var(--white); text-decoration-color: var(--border-gray); } .background-img-dark a:hover:not([class*='button']) { color: var(--white-hover); text-underline-offset: var(--text-underline-offset-more); } /*- UPDATE WHERE STOCK AND OTHER BACKGROUNDS USING BREAKOUT STYLES --*/ [id*='box'][class*='background'] .breakout-shell, [id*='box'][class*='background'] .breakout-shell *:not([class*='background-']):not(.alt), [id*='box'][class*='background'] .breakout-shell.stock *, [class*='background'] *:not([class*='button']) .breakout-shell .breakout-bg[class*='stock'], .breakout-shell .breakout-bg[class*='stock'] * { background-color: var(--background-overlay); padding: 0px; } .breakout-shell .breakout-bg[class*='stock'] *, [id*='box'][class*='background'] .breakout-shell.stock *, [id*='box'][class*='background'] .grid-item[class*='stock'], [id*='box'] .grid-item.breakout-row.breakout-image *:not(.button):not(summary), [id*='box'][class*='background'] .grid-item[class*='stock'] *:not(.editing-content-meta):not([class*='button-']):not([class*='card-']):not([class*='feature-']) { background-color: var(--background-overlay); color: var(--white); } [id*='box'][class*='background'] .breakout-shell.stock * { font-weight: 400; } /*--IMAGE STYLES --*/ [class *='image-banner'] img:first-child { object-fit: cover; object-position: center; max-height: 240px; height: 240px; width:100%; padding: 0px; } .image-banner-top img:first-child { object-position: top; } .image-banner-bottom img:first-child { object-position: bottom; } .image-banner-thin img:first-child { max-height: 100px; } .image-banner-medium img:first-child { max-height: 180px; } .image-banner-thick img:first-child { max-height: 200px; } /*- UPDATE H1 and H2 WHERE APPROPRIATE --*/ [id*="box"].background-3 h1, .background-3 h1:not([class*='button']), [id*="box"].background-gray h1, .background-gray h1:not([class*='button']), [id*="box"].background-white h1, .background-white h1:not([class*='button']) { color: var(--primary); } [id*="box"].background-3 h2, .background-3 h2:not([class*='button']), [id*="box"].background-gray h2, .background-gray h2:not([class*='button']), [id*="box"].background-white h2, .background-white h2:not([class*='button']) { color: var(--secondary); } /*-- ADD PADDING TO ITEMS NOT DIV OR SECTION .background-1, .background-2, .background-3, .background-4, .background-5, .background-6, .background-black, .background-gray, .background-white { padding: 10px; }--*/ /*-------------------------------------------------- TITLES */ .block-main-title { margin-top: 1em; position: relative; font-size: 1.30em; font-weight: bold; } /*-------------------------------------------------------------- ACCORDION CLEAN UP */ [id*='box'][class*='background'] details[open] *:not(summary), [class*='background'] details[open], [class*='background'] details[open] > *:not(summary), [class*='background'] details[open] li, [class*='background'] details[open] li * { background-color: var(--my-white) !important; color: var(--my-white-text) !important; } [id*='box'][class*='background'] details[open] summary *, [class*='background'] details[open] summary *, [class*='background'] details summary .accordion-title-text, [class*='background'] details summary .accordion-right-icon, [class*='background'] details[open] summary .accordion-right-icon { background-color: inherit !important; color: inherit !important; } /*--------------------------------------------- OVERLAY AND WASHES */ .darken > .overlay-content, [class*="wash-"] .overlay-content { position: relative; } .darken > .overlay-content:before { background-color: var(--dark); opacity: 0.6; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } /*, [class*="wash-"] .overlay-content:before */ [class*="wash"] .overlay-content:before { opacity: .8; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: " "; } [class*="wash-1"] > .overlay-content:before { background-color: var(--primary) !important; } div[id*='box'][css*='stock'] [class*="wash-1"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-1"] .overlay-content *:not(.visually-hidden), [class*="wash-1"] > .overlay-content > *:not(.visually-hidden), [class*="wash-1"] > .site-wide-item * { color: var(--primary-text); text-shadow: var(--text-shadow-less); font-weight: 300; } [class*="wash-2"] > .overlay-content:before { background-color: var(--secondary) !important; } div[id*='box'][css*='stock'] [class*="wash-2"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-2"] .overlay-content *:not(.visually-hidden), [class*="wash-2"] > .overlay-content > *:not(.visually-hidden), [class*="wash-2"] > .site-wide-item * { color: var(--secondary-text); text-shadow: var(--text-shadow-less); font-weight: 300; } [class*="wash-3"] > .overlay-content:before { background-color: var(--neutral) !important; } div[id*='box'][css*='stock'] [class*="wash-3"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-3"] .overlay-content *:not(.visually-hidden), [class*="wash-3"] > .overlay-content > *:not(.visually-hidden), [class*="wash-3"] > .site-wide-item * { color: var(--neutral-text) !important; text-shadow: var(--text-shadow-less); text-shadow: none !important; font-weight: 600 !important; } [class*="wash-4"] > .overlay-content:before { background-color: var(--dark) !important; } div[id*='box'][css*='stock'] [class*="wash-4"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-4"] .overlay-content *:not(.visually-hidden), [class*="wash-4"] > .overlay-content > *:not(.visually-hidden), [class*="wash-4"] > .site-wide-item * { color: var(--dark-text) !important; text-shadow: var(--text-shadow-less); font-weight: 300; } [class*="wash-5"] > .overlay-content:before { background-color: var(--accent-1) !important; } div[id*='box'][css*='stock'] [class*="wash-5"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-5"] .overlay-content *:not(.visually-hidden), [class*="wash-5"] > .overlay-content > *:not(.visually-hidden), [class*="wash-5"] > .site-wide-item * { color: var(--accent-1-text) !important; text-shadow: var(--text-shadow-less); text-shadow: none !important; font-weight: 600 !important; } [class*="wash-6"] > .overlay-content:before { background-color: var(--accent-2) !important; } div[id*='box'][css*='stock'] [class*="wash-6"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-6"] .overlay-content *:not(.visually-hidden), [class*="wash-6"] > .overlay-content > *:not(.visually-hidden), [class*="wash-6"] > .site-wide-item * { color: var(--accent-2-text) !important; text-shadow: var(--text-shadow-less); text-shadow: none !important; font-weight: 600 !important; } [class*="wash-black"] > .overlay-content:before { background-color: var(--my-black) !important; } div[id*='box'][css*='stock'] [class*="wash-black"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-black"] .overlay-content *:not(.visually-hidden), [class*="wash-black"] > .overlay-content > *:not(.visually-hidden), [class*="wash-black"] > .site-wide-item * { color: var(--my-black-text) !important; text-shadow: var(--text-shadow-less); font-weight: 300; } [class*="wash-gray"] > .overlay-content:before { background-color: var(--my-gray) !important; } div[id*='box'][css*='stock'] [class*="wash-gray"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-gray"] .overlay-content *:not(.visually-hidden), [class*="wash-gray"] > .overlay-content > *:not(.visually-hidden), [class*="wash-gray"] > .site-wide-item * { color: var(--my-gray-text) !important; text-shadow: var(--text-shadow-less); text-shadow: none !important; font-weight: 600 !important; } [class*="wash-white"] > .overlay-content:before { background-color: var(--my-white) !important; } div[id*='box'][css*='stock'] [class*="wash-white"] .overlay-content *:not(.visually-hidden), div[id*='box'][desktop*='.'] [class*="wash-white"] .overlay-content *:not(.visually-hidden), [class*="wash-white"] > .overlay-content > *:not(.visually-hidden), [class*="wash-white"] > .site-wide-item * { color: var(--my-white-text) !important; text-shadow: var(--text-shadow-less); text-shadow: none !important; font-weight: 600 !important; } /*------------------------------------------ SITE WIDE CONTENT */ /*-- primary --*/ #site-wide-content-header.background-1 .sitewide-links .block-item p:hover { background-color: var(--primary-hover); color: var(--primary-hover-text); } /*-- secondary --*/ #site-wide-content-header.background-2 .sitewide-links .block-item p:hover { background-color: var(--secondary-hover); color: var(--secondary-hover-text); } /*-- neutral --*/ #site-wide-content-header.background-3 .sitewide-links .block-item p:hover { background-color: var(--neutral-hover); color: var(--neutral-hover-text); } /*-- dark --*/ #site-wide-content-header.background-4 .sitewide-links .block-item p:hover { background-color: var(--dark-hover); color: var(--dark-hover-text); } /*-- accent-1 --*/ #site-wide-content-header.background-5 .sitewide-links .block-item p:hover { background-color: var(--accent-1-hover); color: var(--accent-1-hover-text); } /*-- accent-2 --*/ #site-wide-content-header.background-6 .sitewide-links .block-item p:hover { background-color: var(--accent-2-hover); color: var(--accent-2-hover-text); } /*-- black --*/ #site-wide-content-header.background-black .sitewide-links .block-item p:hover { background-color: var(--my-black-hover); color: var(--my-black-hover-text); } /*-- gray --*/ #site-wide-content-header.background-gray .sitewide-links .block-item p:hover { background-color: var(--my-gray-hover); color: var(--my-gray-hover-text); } /*-- white --*/ #site-wide-content-header.background-white .sitewide-links .block-item p:hover { background-color: var(--my-white-hover); color: var(--my-white-hover-text); } /*-- background adjustments --*/ #site-wide-content-header .sitewide-links .block-item p:hover * { background-color: inherit; color: inherit; } /*-------------------------------------------- HEADLINES */ main h1.headline, main h2.headline, main h3.headline, main h4.headline, main h5.headline { border-bottom: double 3px var(--accent-1); } p.headline, a.headline { position: relative; font-weight: bold; font-size: var(--font-size-headline); } .headline { padding-bottom: 14px; } /*------------------------------------------- NOTICES */ .notice-1 { background-color: var(--my-white) !important; color: var(--my-white-text) !important; border: solid 1px var(--dark); border-left: solid 5px var(--accent-1); align-content: center; padding: 8px; text-shadow: none !important; } .notice-2 { background: linear-gradient(to bottom right,var(--secondary) 0,var(--secondary-border-alt) 100%) !important; color: var(--secondary-text) !important; border-left: solid 11px var(--secondary-hover); align-content: center; padding: 1em; line-height: 1em; border-radius: var(--border-radius-chamfer); text-shadow: none !important; } /*------------------------------------------------------------ DEFAULT / ALERT / WARNING / SUCCESS */ [class*='notice']:not([class*="notice-1"]):not([class*='notice-2']) { border-style: solid; border-width: 2px; border-left-width: 5px; padding: var(--notice-padding-clamp); border-radius: var(--border-radius-small); position: relative; padding-left: 60px; font-weight: 700; min-width: 75%; max-width: 96%; margin-left: 2%; margin-bottom: 15px; margin-inline: auto; text-shadow: none !important; } [class*='notice']:before { position: absolute; left: 14px; top: 0px; font-family: "Font Awesome 6 Pro"; font-weight: 300; font-size: 1.5em; padding: 5px; border-radius: var(--border-radius-small); place-content: center; display: grid; height: 100%; /*box-shadow:1px 1px 1px rgba(0,0,0,.3);*/ } .notice-default { background-color: var(--default-notice) !important; color: var(--default-notice-text) !important; border-color: var(--default-notice-border) !important; text-shadow: none !important; } .notice-default *:not(a) { background-color: inherit !important; color: inherit !important; text-shadow: none !important; } .notice-default:before { content: "\f024"; color: var(--default-notice-icon) !important; } .notice-alert { background-color: var(--alert-red) !important; color: var(--alert-red-text) !important; border-color: var(--alert-red-border) !important; } .notice-alert *:not(a) { background-color: inherit !important; color: inherit !important; text-shadow: none !important; } .notice-alert:before { content: "\e204"; color: var(--alert-red-icon) !important; } .notice-warning { background-color: var(--warning) !important; color: var(--warning-text) !important; border-color: var(--warning-border) !important; } .notice-warning *:not(a) { background-color: inherit !important; color: inherit !important; text-shadow: none !important; } .notice-warning:before { content: "\f071"; color: var(--warning-icon) !important; } .notice-information { background-color: var(--information) !important; color: var(--information-text) !important; border-color: var(--information-border) !important; } .notice-information *:not(a) { background-color: inherit !important; color: inherit !important; text-shadow: none !important; } .notice-information:before { content: "\f4a5"; color: var(--information-icon) !important; } .notice-success { background-color: var(--success) !important; color: var(--success-text) !important; border-color: var(--success-border) !important; } .notice-success *:not(a) { background-color: inherit !important; color: inherit !important; text-shadow: none !important; } .notice-success:before { content: "\f058"; color: var(--success-icon) !important; } .notice-date, .notice-time, .notice-event { border-width: 0px !important; border-left-width: 0px !important; font-weight: normal !important; line-height: 20px; margin-bottom: 30px; padding-left: 80px !important; } .notice-date strong, .notice-time strong, .notice-event strong { color: var(--secondary); } .notice-date:before, .notice-time:before, .notice-event:before { color: var(--secondary-text) !important; background-color: var(--secondary) !important; border-radius: 50% !important; padding: 12px !important; left: 0px; height: 50px; width: 50px; top: 8px; } .notice-date:before { content: "\f073"; } .notice-time:before { content: "\f017"; } .notice-date.notice-time:before { content: "\e0d2"; } .notice-event:before { content: "\f3c5"; } [class*='notice'] * { background-color: inherit !important; color: inherit !important; } /*------------------------------------------- CARDS */ [class*="card"]:not([class*="fa-"]), .card, [id*="box"][class*="background-"] .grid-item.card { background-color: var(--my-white); color: var(--my-white-text); border: solid; border-width: 1px; border-color: var(--warm-gray); display: grid; padding: var(--card-padding); } [class*="card"]:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block), [id*="box"][class*="background-"] .card *:not([class*="button"]):not(i):not(.standout-block) { background-color: var(--my-white); color: var(--my-white-text); text-shadow: none !important; } [class*="card"]:not([class*="fa-"]) [class*="fa-"] { background-color: inherit !important; color: inherit !important; } .card-clamp { margin-top: var(--card-margin); margin-bottom: var(--card-margin); } .card-1:not([class*="fa-"]), [id*="box"][class*="background"] .card-1.grid-item { border-color: var(--primary-hover); background-color: var(--primary) !important; color: var(--primary-text) !important; } .card-2:not([class*="fa-"]), [id*="box"][class*="background"] .card-2.grid-item { border-color: var(--secondary-hover); background-color: var(--secondary) !important; color: var(--secondary-text) !important; } .card-3:not([class*="fa-"]), [id*="box"][class*="background"] .card-3.grid-item { border-color: var(--neutral-hover); background-color: var(--neutral) !important; color: var(--neutral-text) !important; } .card-4:not([class*="fa-"]), [id*="box"][class*="background"] .card-4.grid-item { border-color: var(--dark-hover); background-color: var(--dark) !important; color: var(--dark-text) !important; } .card-5:not([class*="fa-"]), [id*="box"][class*="background"] .card-5.grid-item { border-color: var(--accent-1-hover); background-color: var(--accent-1) !important; color: var(--accent-1-text) !important; } .card-6:not([class*="fa-"]), [id*="box"][class*="background"] .card-6.grid-item { border-color: var(--accent-2-hover); background-color: var(--accent-2) !important; color: var(--accent-2-text) !important; } .card-black:not([class*="fa-"]), [id*="box"][class*="background"] .card-black.grid-item { border-color: var(--my-black-hover); background-color: var(--my-black) !important; color: var(--my-black-text) !important; } .card-gray:not([class*="fa-"]), [id*="box"][class*="background"] .card-gray.grid-item { border-color: var(--my-gray-hover); background-color: var(--my-gray) !important; color: var(--my-gray-text) !important; } .card-white:not([class*="fa-"]), [id*="box"][class*="background"] .card-white.grid-item { border-color: var(--border-gray); background-color: var(--my-white) !important; color: var(--my-white-text) !important; } [class*='card-']:not([class*="fa-"]) *, [class*='card-']:not([class*="fa-"]) *:not([class*="button"]):not(i):not(.standout-block), [id*="box"][class*="background"] [class*='card-'] *:not([class*="button"]):not(i):not(.standout-block) { background-color: inherit !important; color: inherit !important; } /*-------------------------------------------- ASIDE / SIDEBAR */ aside { max-width: 300px; min-width: 200px; float: right; } .mobile aside, .small-content aside, .aside-solo aside, .MaxGutter.small-gutter aside { max-width: unset; float: none; } aside { border: solid 1px var(--border-gray); padding: 0px; margin: .85rem; font-size: var(--font-size-reduced); } main aside > * { padding: 8px 1.5rem; } aside > *:first-child { border-bottom: solid 1px var(--border-gray); text-align: center; position: relative; margin-top: 4px; } aside > *:first-child:before { content: " "; position: absolute; background-color: var(--orange); left: 30%; width: 40%; bottom: -3px; height: 6px; } aside ul { width: 90%; margin: auto; display: block; } aside ul li::marker { color: var(--orange); } /* primary */ .aside-1 aside { background-color: var(--primary); color: var(--primary-text); border-color: var(--primary-hover); } .aside-1 aside > *:first-child { border-bottom: solid 1px var(--primary-hover-text); } .aside-1 aside > *:first-child:before { background-color: var(--accent-1); } .aside-1 aside ul li::marker { color: var(--accent-1); } /* secondary */ .aside-2 aside { background-color: var(--secondary); color: var(--secondary-text); border-color: var(--secondary-hover); } .aside-2 aside > *:first-child { border-bottom: solid 1px var(--secondary-hover); } .aside-2 aside > *:first-child:before { background-color: var(--accent-1); } .aside-2 aside ul li::marker { color: var(--accent-1); } /* neutral */ .aside-3 aside { background-color: var(--neutral); color: var(--neutral-text); border-color: var(--neutral-hover); } .aside-3 aside > *:first-child { border-bottom: solid 1px var(--neutral-dark-hover); } .aside-3 aside > *:first-child:before { background-color: var(--neutral-dark-hover); } .aside-3 aside ul li::marker { color: var(--neutral-dark-hover); } /* dark */ .aside-4 aside { background-color: var(--dark); color: var(--dark-text); border-color: var(--dark-hover); } .aside-4 aside > *:first-child { border-bottom: solid 1px var(--dark-dark-hover); } .aside-4 aside > *:first-child:before { background-color: var(--accent-1); } .aside-4 aside ul li::marker { color: var(--accent-1); } /* accent-1 */ .aside-5 aside { background-color: var(--accent-1); color: var(--accent-1-text); border-color: var(--accent-1-hover); } .aside-5 aside > *:first-child { border-bottom: solid 1px var(--accent-1-dark-hover); } .aside-5 aside > *:first-child:before { background-color: var(--accent-1-dark-hover); } .aside-5 aside ul li::marker { color: var(--accent-1-dark-hover); } /* accent-2 */ .aside-6 aside { background-color: var(--accent-2); color: var(--accent-2-text); border-color: var(--accent-2-hover); } .aside-6 aside > *:first-child { border-bottom: solid 1px var(--accent-2-dark-hover); } .aside-6 aside > *:first-child:before { background-color: var(--accent-2-dark-hover); } .aside-6 aside ul li::marker { color: var(--accent-2-dark-hover); } /* black */ .aside-black aside { background-color: var(--my-black); color: var(--my-black-text); border-color: var(--my-black-hover); } .aside-black aside > *:first-child { border-bottom: solid 1px var(--my-black-hover); } .aside-black aside > *:first-child:before { background-color: var(--my-white-hover); } .aside-black aside ul li::marker { color: var(--my-black-text); } /* gray */ .aside-gray aside { background-color: var(--my-gray); color: var(--my-gray-text); border-color: var(--my-gray-hover); } .aside-gray aside > *:first-child { border-bottom: solid 1px var(--my-gray-dark-hover); } .aside-gray aside > *:first-child:before { background-color: var(--accent-1); } .aside-gray aside ul li::marker { color: var(--accent-1); } /* white */ .aside-white aside { background-color: var(--my-white); color: var(--my-white-text); border-color: var(--my-white-hover); } .aside-white aside > *:first-child { border-bottom: solid 1px var(--my-white-dark-hover); } .aside-white aside > *:first-child:before { background-color: var(--accent-1); } .aside-white aside ul li::marker { color: var(--accent-1); } /*---- ASIDE GRADIENTS ---*/ /* primary */ .aside-grad-1 aside { background: linear-gradient(45deg, var(--primary-hover) -25%, var(--primary) 120%); color: var(--primary-text); border-color: var(--primary-hover); } .aside-grad-1 aside > *:first-child { border-bottom: solid 1px var(--primary-hover-text); } .aside-grad-1 aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-1 aside ul li::marker { color: var(--accent-1); } /* secondary */ .aside-grad-2 aside { background: linear-gradient(45deg, var(--secondary-hover) -25%, var(--secondary) 120%); color: var(--secondary-text); border-color: var(--secondary-hover); } .aside-grad-2 aside > *:first-child { border-bottom: solid 1px var(--secondary-hover-text); } .aside-grad-2 aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-2 aside ul li::marker { color: var(--accent-1); } /* neutral */ .aside-grad-3 aside { background: linear-gradient(45deg, var(--neutral-hover) -25%, var(--neutral) 120%); color: var(--neutral-text); border-color: var(--neutral-hover); } .aside-grad-3 aside > *:first-child { border-bottom: solid 1px var(--neutral-dark); } .aside-grad-3 aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-3 aside ul li::marker { color: var(--accent-1); } /* dark */ .aside-grad-4 aside { background: linear-gradient(45deg, var(--dark-hover) -25%, var(--dark) 120%); color: var(--dark-text); border-color: var(--dark-hover); } .aside-grad-4 aside > *:first-child { border-bottom: solid 1px var(--dark-hover-text); } .aside-grad-4 aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-4 aside ul li::marker { color: var(--accent-1); } /* accent-1 */ .aside-grad-5 aside { background: linear-gradient(45deg, var(--accent-1-hover) -25%, var(--accent-1) 120%); color: var(--accent-1-text); border-color: var(--accent-1-hover); } .aside-grad-5 aside > *:first-child { border-bottom: solid 1px var(--accent-1-hover-text); } .aside-grad-5 aside > *:first-child:before { background-color: var(--accent-1-hover-text); } .aside-grad-5 aside ul li::marker { color: var(--accent-1); } /* accent-2 */ .aside-grad-6 aside { background: linear-gradient(45deg, var(--accent-2-hover) -25%, var(--accent-2) 120%); color: var(--accent-2-text); border-color: var(--accent-2-hover); } .aside-grad-6 aside > *:first-child { border-bottom: solid 1px var(--accent-2-hover-text); } .aside-grad-6 aside > *:first-child:before { background-color: var(--accent-2-dark); } .aside-grad-6 aside ul li::marker { color: var(--accent-2-dark); } /* my-black */ .aside-grad-black aside { background: linear-gradient(45deg, var(--my-black-hover) -25%, var(--my-black) 120%); color: var(--my-black-text); border-color: var(--my-black-hover); } .aside-grad-black aside > *:first-child { border-bottom: solid 1px var(--my-black-hover-text); } .aside-grad-black aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-black aside ul li::marker { color: var(--accent-1); } /* my-gray */ .aside-grad-gray aside { background: linear-gradient(45deg, var(--my-gray-hover) 0%, var(--my-gray) 100%); color: var(--my-gray-text); border-color: var(--my-gray-hover); } .aside-grad-gray aside > *:first-child { border-bottom: solid 1px var(--my-gray-hover-text); } .aside-grad-gray aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-gray aside ul li::marker { color: var(--accent-1); } /* my-white */ .aside-grad-white aside { background: linear-gradient(45deg, var(--my-white-hover) -25%, var(--my-white) 120%); color: var(--my-white-text); border-color: var(--my-white-hover); } .aside-grad-white aside > *:first-child { border-bottom: solid 1px var(--my-white-hover-text); } .aside-grad-white aside > *:first-child:before { background-color: var(--accent-1); } .aside-grad-white aside ul li::marker { color: var(--accent-1); } /*-------------------------------------- BUTTONS & LINKS */ a { } main a[class*='hover-button'] { backdrop-filter: blur(14px); text-shadow: 1px 1px 1px rgba(0,0,0,.05); } main a[class*='glass-button'] { color: var(--my-white); text-shadow: 1px 1px 1px rgba(0,0,0,.05); font-weight: 500; position: relative; background: transparent; backdrop-filter: blur(6px); } main a[class*='glass-button']:hover { color: var(--my-white); backdrop-filter: blur(0px); text-shadow: 1px 1px 1px rgba(0,0,0,.15) !important; } main a[class*='glass-button']:hover { color: var(--my-white); backdrop-filter: blur(0px); text-shadow: 1px 1px 1px rgba(0,0,0,.15) !important; } .standout-block a[class*='glass-button'] { color: var(--my-gray-text); text-shadow: none; } a[class*="button"], main a[class*="button"], button[class*="button"] { padding: var(--button-padding); transition: background-color var(--transition-time-fast) ease-in-out; font-weight: 300; text-decoration: none; cursor: pointer; width: fit-content; display:inline-grid; } a[class*="button-full"], a[class*="button-"][class*="icon-"] { width: 100% !important; } /*-- BUTTON 1 --*/ .button-1, .hover-button-1, .glass-button-1 { border: solid 1px var(--primary); } a.button-1, button.button-1, [class*='card-'] a.button-1, [class*='card-'] button.button-1, [class*='background-'] a.button-1, [class*='background-'] button.button-1, [class*='stock-'] a.button-1, [class*='stock-'] button.button-1 { background-color: var(--primary) !important; color: var(--primary-text) !important; border: solid 1px var(--primary-hover); } a.button-1 *, [class*='card-'] a.button-1 *, [class*='card-'] button.button-1 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-1 * { background-color: inherit !important; color: var(--primary-text) !important; } a[class*='button-1']:hover, [id*='div'][css*="stock"] a[class*='button-1']:hover, button[class*='button-1']:hover, [id*='div'][css*="stock"] button[class*='button-1']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-1']:hover { background-color: var(--primary-hover) !important; color: var(--primary-hover-text) !important; border: solid 1px var(--primary); text-shadow: none; } a[class*='hover-button-1']:hover, a[class*='hover-button-1']:focus, [id*='div'][css*="stock"] a[class*='hover-button-1']:hover, button[class*='hover-button-1']:hover, [id*='div'][css*="stock"] a[class*='hover-button-1']:focus, button[class*='hover-button-1']:focus, a[class*='glass-button-1']:hover, a[class*='glass-button-1']:focus, [id*='div'][css*="stock"] a[class*='glass-button-1']:hover, button[class*='glass-button-1']:hover, [id*='div'][css*="stock"] a[class*='glass-button-1']:focus, button[class*='glass-button-1']:focus { background-color: var(--primary) !important; color: var(--primary-text) !important; border: solid 1px var(--primary-hover); text-shadow: none; } /*-- BUTTON 2 --*/ .button-2, .hover-button-2, .glass-button-2 { border: solid 1px var(--secondary); } a.button-2, button.button-2, [class*='card-'] a.button-2, [class*='card-'] button.button-2, [class*='background-'] a.button-2, [class*='background-'] button.button-2, [class*='stock-'] a.button-2, [class*='stock-'] button.button-2 { background-color: var(--secondary) !important; color: var(--secondary-text) !important; border: solid 1px var(--secondary-hover); } a.button-2 *, [class*='card-'] a.button-2 *, [class*='card-'] button.button-2 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-2 * { background-color: inherit !important; color: var(--secondary-text) !important; } a[class*='button-2']:hover, [id*='div'][css*="stock"] a[class*='button-2']:hover, button[class*='button-2']:hover, [id*='div'][css*="stock"] button[class*='button-2']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-2']:hover { background-color: var(--secondary-hover) !important; color: var(--secondary-hover-text) !important; border: solid 1px var(--secondary); text-shadow: none; } a[class*='hover-button-2']:hover, a[class*='hover-button-2']:focus, [id*='div'][css*="stock"] a[class*='hover-button-2']:hover, button[class*='hover-button-2']:hover, [id*='div'][css*="stock"] a[class*='hover-button-2']:focus, button[class*='hover-button-2']:focus, a[class*='glass-button-2']:hover, a[class*='glass-button-2']:focus, [id*='div'][css*="stock"] a[class*='glass-button-2']:hover, button[class*='glass-button-2']:hover, [id*='div'][css*="stock"] a[class*='glass-button-2']:focus, button[class*='glass-button-2']:focus { background-color: var(--secondary) !important; color: var(--secondary-text) !important; border: solid 1px var(--secondary-hover); text-shadow: none; } /*-- BUTTON 3 --*/ .button-3, .hover-button-3, .glass-button-3 { border: solid 1px var(--neutral); } a.button-3, button.button-3, [class*='card-'] a.button-3, [class*='card-'] button.button-3, [class*='background-'] a.button-3, [class*='background-'] button.button-3, [class*='stock-'] a.button-3, [class*='stock-'] button.button-3 { background-color: var(--neutral) !important; color: var(--neutral-text) !important; border: solid 1px var(--neutral-hover); } a.button-3 *, [class*='card-'] a.button-3 *, [class*='card-'] button.button-3 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-3 * { background-color: inherit !important; color: var(--neutral-text) !important; } a[class*='button-3']:hover, [id*='div'][css*="stock"] a[class*='button-3']:hover, button[class*='button-3']:hover, [id*='div'][css*="stock"] button[class*='button-3']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-3']:hover { background-color: var(--neutral-hover) !important; color: var(--neutral-hover-text) !important; border: solid 1px var(--neutral); text-shadow: none; } a[class*='hover-button-3']:hover, a[class*='hover-button-3']:focus, [id*='div'][css*="stock"] a[class*='hover-button-3']:hover, button[class*='hover-button-3']:hover, [id*='div'][css*="stock"] a[class*='hover-button-3']:focus, button[class*='hover-button-3']:focus, a[class*='glass-button-3']:hover, a[class*='glass-button-3']:focus, [id*='div'][css*="stock"] a[class*='glass-button-3']:hover, button[class*='glass-button-3']:hover, [id*='div'][css*="stock"] a[class*='glass-button-3']:focus, button[class*='glass-button-3']:focus { background-color: var(--neutral) !important; color: var(--neutral-text) !important; border: solid 1px var(--neutral-hover); text-shadow: none; } /*-- BUTTON 4 --*/ .button-4, .hover-button-4, .glass-button-4 { border: solid 1px var(--dark); } a.button-4, button.button-4, [class*='card-'] a.button-4, [class*='card-'] button.button-4, [class*='background-'] a.button-4, [class*='background-'] button.button-4, [class*='stock-'] a.button-4, [class*='stock-'] button.button-4 { background-color: var(--dark) !important; color: var(--dark-text) !important; border: solid 1px var(--dark-hover); } a.button-4 *, [class*='card-'] a.button-4 *, [class*='card-'] button.button-4 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-4 * { background-color: inherit !important; color: var(--dark-text) !important; } a[class*='button-4']:hover, [id*='div'][css*="stock"] a[class*='button-4']:hover, button[class*='button-4']:hover, [id*='div'][css*="stock"] button[class*='button-4']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-4']:hover { background-color: var(--dark-hover) !important; color: var(--dark-hover-text) !important; border: solid 1px var(--dark); text-shadow: none; } a[class*='hover-button-4']:hover, a[class*='hover-button-4']:focus, [id*='div'][css*="stock"] a[class*='hover-button-4']:hover, button[class*='hover-button-4']:hover, [id*='div'][css*="stock"] a[class*='hover-button-4']:focus, button[class*='hover-button-4']:focus, a[class*='glass-button-4']:hover, a[class*='glass-button-4']:focus, [id*='div'][css*="stock"] a[class*='glass-button-4']:hover, button[class*='glass-button-4']:hover, [id*='div'][css*="stock"] a[class*='glass-button-4']:focus, button[class*='glass-button-4']:focus { background-color: var(--dark) !important; color: var(--dark-text) !important; border: solid 1px var(--dark-hover); text-shadow: none; } /*-- BUTTON 5 --*/ .button-5, .hover-button-5, .glass-button-5 { border: solid 1px var(--accent-1); } a.button-5, button.button-5, [class*='card-'] a.button-5, [class*='card-'] button.button-5, [class*='background-'] a.button-5, [class*='background-'] button.button-5, [class*='stock-'] a.button-5, [class*='stock-'] button.button-5 { background-color: var(--accent-1) !important; color: var(--accent-1-text) !important; border: solid 1px var(--accent-1-hover); } a.button-5 *, [class*='card-'] a.button-5 *, [class*='card-'] button.button-5 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-5 * { background-color: inherit !important; color: var(--accent-1-text) !important; } a[class*='button-5']:hover, [id*='div'][css*="stock"] a[class*='button-5']:hover, button[class*='button-5']:hover, [id*='div'][css*="stock"] button[class*='button-5']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-5']:hover { background-color: var(--accent-1-hover) !important; color: var(--accent-1-hover-text) !important; border: solid 1px var(--accent-1); text-shadow: none; } a[class*='hover-button-5']:hover, a[class*='hover-button-5']:focus, [id*='div'][css*="stock"] a[class*='hover-button-5']:hover, button[class*='hover-button-5']:hover, [id*='div'][css*="stock"] a[class*='hover-button-5']:focus, button[class*='hover-button-5']:focus, a[class*='glass-button-5']:hover, a[class*='glass-button-5']:focus, [id*='div'][css*="stock"] a[class*='glass-button-5']:hover, button[class*='glass-button-5']:hover, [id*='div'][css*="stock"] a[class*='glass-button-5']:focus, button[class*='glass-button-5']:focus { background-color: var(--accent-1) !important; color: var(--accent-1-text) !important; border: solid 1px var(--accent-1-hover); text-shadow: none; } /*-- BUTTON 6 --*/ .button-6, .hover-button-6, .glass-button-6 { border: solid 1px var(--accent-2); } a.button-6, button.button-6, [class*='card-'] a.button-6, [class*='card-'] button.button-6, [class*='background-'] a.button-6, [class*='background-'] button.button-6, [class*='stock-'] a.button-6, [class*='stock-'] button.button-6 { background-color: var(--accent-2) !important; color: var(--accent-2-text) !important; border: solid 1px var(--accent-2-hover); } a.button-6 *, [class*='card-'] a.button-6 *, [class*='card-'] button.button-6 *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-6 * { background-color: inherit !important; color: var(--accent-2-text) !important; } a[class*='button-6']:hover, [id*='div'][css*="stock"] a[class*='button-6']:hover, button[class*='button-6']:hover, [id*='div'][css*="stock"] button[class*='button-6']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-6']:hover { background-color: var(--accent-2-hover) !important; color: var(--accent-2-hover-text) !important; border: solid 1px var(--accent-2); text-shadow: none; } a[class*='hover-button-6']:hover, a[class*='hover-button-6']:focus, [id*='div'][css*="stock"] a[class*='hover-button-6']:hover, button[class*='hover-button-6']:hover, [id*='div'][css*="stock"] a[class*='hover-button-6']:focus, button[class*='hover-button-6']:focus, a[class*='glass-button-6']:hover, a[class*='glass-button-6']:focus, [id*='div'][css*="stock"] a[class*='glass-button-6']:hover, button[class*='glass-button-6']:hover, [id*='div'][css*="stock"] a[class*='glass-button-6']:focus, button[class*='glass-button-6']:focus { background-color: var(--accent-2) !important; color: var(--accent-2-text) !important; border: solid 1px var(--accent-2-hover); text-shadow: none; } /*-- BUTTON BLACK --*/ .button-black, .hover-button-black, .glass-button-black { border: solid 1px var(--my-black); } a.button-black, button.button-black, [class*='card-'] a.button-black, [class*='card-'] button.button-black, [class*='background-'] a.button-black, [class*='background-'] button.button-black, [class*='stock-'] a.button-black, [class*='stock-'] button.button-black { background-color: var(--my-black) !important; color: var(--my-black-text) !important; border: solid 1px var(--my-black-hover); } a.button-black *, [class*='card-'] a.button-black *, [class*='card-'] button.button-black *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-black * { background-color: inherit !important; color: var(--my-black-text) !important; } a[class*='button-black']:hover, [id*='div'][css*="stock"] a[class*='button-black']:hover, button[class*='button-black']:hover, [id*='div'][css*="stock"] button[class*='button-black']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-black']:hover { background-color: var(--my-black-hover) !important; color: var(--my-black-hover-text) !important; border: solid 1px var(--my-black); text-shadow: none; } a[class*='hover-button-black']:hover, a[class*='hover-button-black']:focus, [id*='div'][css*="stock"] a[class*='hover-button-black']:hover, button[class*='hover-button-black']:hover, [id*='div'][css*="stock"] a[class*='hover-button-black']:focus, button[class*='hover-button-black']:focus, a[class*='glass-button-black']:hover, a[class*='glass-button-black']:focus, [id*='div'][css*="stock"] a[class*='glass-button-black']:hover, button[class*='glass-button-black']:hover, [id*='div'][css*="stock"] a[class*='glass-button-black']:focus, button[class*='glass-button-black']:focus { background-color: var(--my-black) !important; color: var(--my-black-text) !important; border: solid 1px var(--my-black-hover); text-shadow: none; } /*-- BUTTON GRAY --*/ .button-gray, .hover-button-gray, .glass-button-gray { border: solid 1px var(--my-gray); } a.button-gray, button.button-gray, [class*='card-'] a.button-gray, [class*='card-'] button.button-gray, [class*='background-'] a.button-gray, [class*='background-'] button.button-gray, [class*='stock-'] a.button-gray, [class*='stock-'] button.button-gray { background-color: var(--my-gray) !important; color: var(--my-gray-text) !important; border: solid 1px var(--my-gray-hover); } a.button-gray *, [class*='card-'] a.button-gray *, [class*='card-'] button.button-gray *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-gray * { background-color: inherit !important; color: var(--my-gray-text) !important; } a[class*='button-gray']:hover, [id*='div'][css*="stock"] a[class*='button-gray']:hover, button[class*='button-gray']:hover, [id*='div'][css*="stock"] button[class*='button-gray']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-gray']:hover { background-color: var(--my-gray-hover) !important; color: var(--my-gray-hover-text) !important; border: solid 1px var(--my-gray); text-shadow: none; } a[class*='hover-button-gray']:hover, a[class*='hover-button-gray']:focus, [id*='div'][css*="stock"] a[class*='hover-button-gray']:hover, button[class*='hover-button-gray']:hover, [id*='div'][css*="stock"] a[class*='hover-button-gray']:focus, button[class*='hover-button-gray']:focus, a[class*='glass-button-gray']:hover, a[class*='glass-button-gray']:focus, [id*='div'][css*="stock"] a[class*='glass-button-gray']:hover, button[class*='glass-button-gray']:hover, [id*='div'][css*="stock"] a[class*='glass-button-gray']:focus, button[class*='glass-button-gray']:focus { background-color: var(--my-gray) !important; color: var(--my-gray-text) !important; border: solid 1px var(--my-gray-hover); text-shadow: none; } /*-- BUTTON WHITE --*/ .button-white, .hover-button-white, .glass-button-white { border: solid 1px var(--my-white); } a.button-white, button.button-white, [class*='card-'] a.button-white, [class*='card-'] button.button-white, [class*='background-'] a.button-white, [class*='background-'] button.button-white, [class*='stock-'] a.button-white, [class*='stock-'] button.button-white { background-color: var(--my-white) !important; color: var(--my-white-text) !important; border: solid 1px var(--my-white-hover); } a.button-white *, [class*='card-'] a.button-white *, [class*='card-'] button.button-white *, div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content a.button-white * { background-color: inherit !important; color: var(--my-white-text) !important; } a[class*='button-white']:hover, [id*='div'][css*="stock"] a[class*='button-white']:hover, button[class*='button-white']:hover, [id*='div'][css*="stock"] button[class*='button-white']:hover, [id*='box'][class*='background'] details[open] *:not(summary) a[class*='button-white']:hover { background-color: var(--my-white-hover) !important; color: var(--my-white-hover-text) !important; border: solid 1px var(--my-white); text-shadow: none; } a[class*='hover-button-white']:hover, a[class*='hover-button-white']:focus, [id*='div'][css*="stock"] a[class*='hover-button-white']:hover, button[class*='hover-button-white']:hover, [id*='div'][css*="stock"] a[class*='hover-button-white']:focus, button[class*='hover-button-white']:focus, a[class*='glass-button-white']:hover, a[class*='glass-button-white']:focus, [id*='div'][css*="stock"] a[class*='glass-button-white']:hover, button[class*='glass-button-white']:hover, [id*='div'][css*="stock"] a[class*='glass-button-white']:focus, button[class*='glass-button-white']:focus { background-color: var(--my-white) !important; color: var(--my-white-text) !important; border: solid 1px var(--my-white-hover); text-shadow: none; } .button-1, .button-2, .button-3, .button-4, .button-5, .button-6, .button-black, .button-white { border: solid 1px var(--border-gray); } /*--------------------------------------- BUTTON DISABLED */ button[disabled], button[disabled][class*='button'] { cursor: not-allowed; background-color: var(--button-disabled-background) !important; color: var(--button-disabled-text) !important; border: dashed 1px var(--button-disabled-border) !important; } /*--------------------------------------- BUTTON CLEAN UP */ strong a { font-weight: bold !important; } a[class*='button']:not([class*='glass-button']), a[class*='button']:not([class*='glass-button']) * { text-shadow: none !important; } /*--- clean up things like having the wrong color background ---*/ [class*='card-']:not([class*='fa']) a[class*='button'] *:not([class*="button"]), [class*='background-']:not([class*='fa']) a[class*='button'] *:not([class*="button"]), *:not([class*='fa']) a[class*='button'] *:not([class*="button"]) { background-color: transparent !important; color: inherit !important; padding: 0px 4px; } /*-------------------------------------------\ TOPIC LINK */ [class*='topic-link'] .overlay-content { border: solid 1px var(--border-gray); background-color: var(--my-white); color: var(--primary); display: flex; flex-direction: column; justify-content: flex-end; width: 100%; } [class*='topic-link']:hover .overlay-content, [class*='topic-link']:focus-within .overlay-content { border: solid 1px var(--primary); background-color: var(--dialog); color: var(--white); } [class*='topic-link'] p { margin: 0px; padding: 0px; } [class*='topic-link'] p a { padding: 4em .75em 2em 1.25em; min-height: 20vh; font-weight: 900; text-transform: uppercase; display: inline-flex; flex-direction: row; flex-wrap: wrap; text-decoration: none; align-content: end; align-items: baseline; transition: none; } [class*='topic-link'].middle p a { padding: 8px; min-height: 20vh; font-weight: 900; text-transform: uppercase; display: inline-flex; flex-direction: row; flex-wrap: wrap; text-decoration: none; align-content: center; align-items: center; transition: none; } [class*='topic-link']:hover a, [class*='topic-link']:focus-within a { background-color: var(--dialog); color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } [class*='topic-link'] a:hover, [class*='topic-link'] a:focus, [class*='topic-link'] a:focus-within { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .center[class*='topic-link'] a { text-align: center; justify-content: center; align-content: center; padding: 1em; } /*-- stock or image in bg --*/ [class*='topic-link-img'] .overlay-content, [class*='topic-link-img'] .overlay-content * { background-color: var(--background-overlay) !important; color: var(--my-black-text) !important; text-shadow: var(--text-shadow-dark) !important; } [class*='topic-link-img']:hover .overlay-content, [class*='topic-link-img']:focus-within .overlay-content { background-color: var(--background-shade-darker) !important; } /*-- primary --*/ [class*='topic-link-1'] .overlay-content:hover, [class*='topic-link-1'] .overlay-content:focus-within { border: solid 1px var(--primary-hover); background-color: var(--primary); color: var(--primary-text); } [class*='topic-link-1'] .overlay-content:hover a, [class*='topic-link-1'] .overlay-content:focus-within a { background-color: var(--primary); color: var(--primary-text); } /*-- secondary --*/ [class*='topic-link-2'] .overlay-content:hover, [class*='topic-link-2'] .overlay-content:focus-within { border: solid 1px var(--secondary-hover); background-color: var(--secondary); color: var(--secondary-text); } [class*='topic-link-2'] .overlay-content:hover a, [class*='topic-link-2'] .overlay-content:focus-within a { background-color: var(--secondary); color: var(--secondary-text); } /*-- neutral --*/ [class*='topic-link-3'] .overlay-content:hover, [class*='topic-link-3'] .overlay-content:focus-within { border: solid 1px var(--neutral-hover); background-color: var(--neutral); color: var(--neutral-text); } [class*='topic-link-3'] .overlay-content:hover a, [class*='topic-link-3'] .overlay-content:focus-within a { background-color: var(--neutral); color: var(--neutral-text); } /*-- dark --*/ [class*='topic-link-4'] .overlay-content:hover, [class*='topic-link-4'] .overlay-content:focus-within { border: solid 1px var(--dark-hover); background-color: var(--dark); color: var(--dark-text); } [class*='topic-link-4'] .overlay-content:hover a, [class*='topic-link-4'] .overlay-content:focus-within a { background-color: var(--dark); color: var(--dark-text); } /*-- accent 1 --*/ [class*='topic-link-5'] .overlay-content:hover, [class*='topic-link-5'] .overlay-content:focus-within { border: solid 1px var(--accent-1-hover); background-color: var(--accent-1); color: var(--accent-1-text); } [class*='topic-link-5'] .overlay-content:hover a, [class*='topic-link-5'] .overlay-content:focus-within a { background-color: var(--accent-1); color: var(--accent-1-text); } /*-- accent-2 --*/ [class*='topic-link-6'] .overlay-content:hover, [class*='topic-link-6'] .overlay-content:focus-within { border: solid 1px var(--accent-2-hover); background-color: var(--accent-2); color: var(--accent-2-text); } [class*='topic-link-6'] .overlay-content:hover a, [class*='topic-link-6'] .overlay-content:focus-within a { background-color: var(--accent-2); color: var(--accent-2-text); } /*-- my-black --*/ [class*='topic-link-black'] .overlay-content:hover, [class*='topic-link-black'] .overlay-content:focus-within { border: solid 1px var(--my-black-hover); background-color: var(--my-black); color: var(--my-black-text); } [class*='topic-link-black'] .overlay-content:hover a, [class*='topic-link-black'] .overlay-content:focus-within a { background-color: var(--my-black); color: var(--my-black-text); } /*-- my-gray --*/ [class*='topic-link-gray'] .overlay-content:hover, [class*='topic-link-gray'] .overlay-content:focus-within { border: solid 1px var(--my-gray-hover); background-color: var(--my-gray); color: var(--my-gray-text); } [class*='topic-link-gray'] .overlay-content:hover a, [class*='topic-link-gray'] .overlay-content:focus-within a { background-color: var(--my-gray); color: var(--my-gray-text); } /*-- my-white --*/ [class*='topic-link-white'] .overlay-content:hover, [class*='topic-link-white'] .overlay-content:focus-within { border: solid 1px var(--my-white-hover); background-color: var(--my-white); color: var(--my-white-text); } [class*='topic-link-white'] .overlay-content:hover a, [class*='topic-link-white'] .overlay-content:focus-within a { background-color: var(--my-white); color: var(--my-white-text); } /*----------------------------------------- HORIZONTRAL RULE */ hr { border: none; border-top: 2px dotted var(--border-gray); margin: 1.25rem 0; clear: both; } /*-------------------------------------- TABLES */ main table { border: solid 1px var(--gray); border-collapse: collapse; margin-bottom: 1rem; width: 100%; } main table caption { padding: var(--caption-padding); font-size: var(--font-size-table-caption); font-weight: bold; } main table th { font-weight: 600; font-size: var(--font-size); padding: .85em; margin: 0px; text-align: left; border: solid 1px var(--border-gray); } main table td { margin: 0px; padding: 1em; border: solid 1px var(--gray); } .mobile main table tr th, .mobile main table tr td { display: grid; grid-template-columns: 1fr; text-align: left; padding-bottom: 1em; } table th { background-color: var(--table-th); color: var(--table-th-text); font-size: var(--font-size-main); } .table-min table, .table-min table th, .table-min table td { border: 0; background-color: unset; color: inherit; border-bottom: solid 1px var(--border-gray); } .table-alt table tr:nth-child(2n+1) td { background-color: var(--light-gray); color: var(--light-gray-text); } .table-filter { display: grid; grid-template-columns: 1fr; } .table-filter label { font-size: var(--font-size-reduced); } .table-filter input { font-size: var(--font-size); border-radius: var(--border-radius-small); border: solid 1px var(--border-gray); padding: 8px; } .button-sort { display: grid; grid-template-columns: 1fr auto; gap: 8px; background-color: inherit; color: inherit; border: solid 1px var(--border-gray); } /*-- primary --*/ .table-color-1 table th { background-color: var(--primary); color: var(--primary-text); } /*-- secondary --*/ .table-color-2 table th { background-color: var(--secondary); color: var(--secondary-text); } /*-- neutral --*/ .table-color-3 table th { background-color: var(--neutral); color: var(--neutral-text); } /*-- dark --*/ .table-color-4 table th { background-color: var(--dark); color: var(--dark-text); } /*-- accent-1 --*/ .table-color-5 table th { background-color: var(--accent-1); color: var(--accent-1-text); } /*-- accent-2 --*/ .table-color-6 table th { background-color: var(--accent-2); color: var(--accent-2-text); } /*-- my-black --*/ .table-color-black table th { background-color: var(--my-black); color: var(--my-black-text); } /*-- my-gray --*/ .table-color-gray table th { background-color: var(--my-gray); color: var(--my-gray-text); } /*-- my-white --*/ .table-color-white table th { background-color: var(--my-white); color: var(--my-white-text); } /*-------------------------------------- ACCORDIONS AND TABBED CONTENT */ details { border-width: 1px; border-style: solid; position:relative; } summary { color: var(--primary-text); } details a { color: var(--secondary); } main [class*="accordion"] summary, main [class*="accordion"] details[open] summary { background-color: var(--light-gray); color: var(--light-gray-text); } /* primary */ .accordion-1 details { border-color: var(--primary-hover); } main [class*="accordion"][class*="accordion-1"] summary { background-color: var(--primary) !important; color: var(--primary-text) !important; } main [class*="accordion"][class*="accordion-1"] details[open] summary, main [class*="accordion"][class*="accordion-1"] details[open] summary * { background-color: var(--primary-hover) !important; color: var(--primary-hover-text) !important; } main [class*="accordion"][class*="accordion-1"] details[open] summary { filter: saturate(50%); } /* secondary */ .accordion-2 details { border-color: var(--secondary-hover); } main [class*="accordion"][class*="accordion-2"] summary { background-color: var(--secondary) !important; color: var(--secondary-text) !important; } main [class*="accordion"][class*="accordion-2"] details[open] summary, main [class*="accordion"][class*="accordion-2"] details[open] summary * { background-color: var(--secondary-hover) !important; color: var(--secondary-hover-text) !important; } main [class*="accordion"][class*="accordion-2"] details[open] summary { filter: saturate(50%); } /* neutral */ .accordion-3 details { border-color: var(--neutral-hover); } main [class*="accordion"][class*="accordion-3"] summary { background-color: var(--neutral) !important; color: var(--neutral-text) !important; } main [class*="accordion"][class*="accordion-3"] details[open] summary { background-color: var(--neutral-hover) !important; color: var(--neutral-hover-text) !important; } /* dark */ .accordion-4 details { border-color: var(--dark-hover); } main [class*="accordion"][class*="accordion-4"] summary { background-color: var(--dark) !important; color: var(--dark-text) !important; } main [class*="accordion"][class*="accordion-4"] details[open] summary { background-color: var(--dark-hover) !important; color: var(--dark-hover-text) !important; } /* accent-1 */ .accordion-5 details { border-color: var(--accent-1-hover); } main [class*="accordion"][class*="accordion-5"] summary { background-color: var(--accent-1) !important; color: var(--accent-1-text) !important; } main [class*="accordion"][class*="accordion-5"] details[open] summary { background-color: var(--accent-1-hover) !important; color: var(--accent-1-hover-text) !important; } /* accent-2 */ .accordion-6 details { border-color: var(--accent-2-hover); } main [class*="accordion"][class*="accordion-6"] summary { background-color: var(--accent-2) !important; color: var(--accent-2-text) !important; } main [class*="accordion"][class*="accordion-6"] details[open] summary { background-color: var(--accent-2-hover) !important; color: var(--accent-2-hover-text) !important; } /* black */ .accordion-black details { border-color: var(--my-black-hover); } main [class*="accordion"][class*="accordion-black"] summary { background-color: var(--my-black) !important; color: var(--my-black-text) !important; } main [class*="accordion"][class*="accordion-black"] details[open] summary { background-color: var(--my-black-hover) !important; color: var(--my-black-hover-text) !important; } /* gray */ .accordion-gray details { border-color: var(--my-gray-hover); } main [class*="accordion"][class*="accordion-gray"] summary { background-color: var(--my-gray) !important; color: var(--my-gray-text) !important; } main [class*="accordion"][class*="accordion-gray"] details[open] summary { background-color: var(--my-gray-hover) !important; color: var(--my-gray-hover-text) !important; } /* white */ .accordion-white details { border-color: var(--my-white-hover); } main [class*="accordion"][class*="accordion-white"] summary { background-color: var(--my-white) !important; color: var(--my-white-text) !important; } main [class*="accordion"][class*="accordion-white"] details[open] summary { background-color: var(--my-white-hover) !important; color: var(--my-white-hover-text) !important; } main [class*="accordion"] details summary * { background-color: inherit !important; color: inherit !important; } main [class*="accordion"] details[open] summary *, main [class*="accordion"][class*="accordion-"] details[open] summary * { background-color: transparent !important; color: inherit !important; } main [class*="accordion"][class*="accordion-"] summary *, main [class*="accordion"][class*="accordion-"] .data-content summary *, main .app-data.active .data-content details summary * { background-color: inherit !important; color: inherit !important; } /*--- TABBED CONTENT ---*/ [class*='tab-content'] .details-section details:not([open]) { border: 0px; min-height: unset; } [class*='tab-content'] .details-section details[open] { width: calc(100% - 20px); min-height: 300px; } [class*='tab-content'] .details-section details[open], [class*='tab-content'] .details-section details[open] *:not(summary):not([class*='button']):not(th):not(hr) { background-color: var(--my-white); color: var(--my-white-text); /*background-color: inherit; color: inherit;*/ } [class*='tab-content'] .details-section details summary > *, [class*='tab-content'] .details-section details summary > * i, [class*='tab-content'] .details-section details[open] summary > *, [class*='tab-content'] .details-section details[open] summary > * i { background-color: inherit !important; color: inherit !important; } [class*='tab-content'].small-content .details-section details[open] { padding: 0px; } [class*='tab-content'].vertical .details-section details[open] { height: 100%; padding-top: 20px; } [class*='tab-content'].vertical.small-content .details-section details { height: auto; padding-top: 0px; width: 100%; padding: 0px; min-height: auto; } [class*='tab-content'].vertical.small-content .details-section details[open] { height: auto; padding-top: 0px; width: 100%; padding: 0px; min-height: auto; margin-bottom: 10px; /*margin-inline:10px;*/ } [class*="tab-content"].small-content .details-section details summary, .mobile .tab-content .details-section details summary { display: grid; background-color: var(--light-gray); color: var(--light-gray-text); } [class*='tab-content']:not([class*='vertical']) .details-section details[open] { border: solid 1px var(--border-gray); border-bottom: solid 2px var(--border-gray); padding-top: 15px; } .small-content[class*='tab-content']:not([class*='vertical']) .details-section details[open], .mobile [class*='tab-content']:not([class*='vertical']) .details-section details[open] { padding-top: 0px; width: 100%; } [class*='tab-content'].vertical .details-section details[open] { border: solid 1px var(--border-gray) !important; margin: 0px; } .mobile [class*='tab-content']:not([class*='vertical']) .details-section details, .mobile [class*='tab-content'].vertical .details-section details { border-left: solid 1px var(--border-gray); border-top: solid 1px var(--border-gray); border: solid 1px var(--border-gray); } [class*='tab-content'] .details-section details[open] p:not(.iframe-video):not([class*='notice-']), [class*='tab-content'] .details-section details[open] ul, [class*='tab-content'] .details-section details[open] ol { padding: var(--tab-content-padding-clamp); } [class*='tab-content'] .details-section details[open] > ul, [class*='tab-content'] .details-section details[open] > ol { padding-left: 55px; /* width: fit-content;*/ } [class*='tab-content'] .details-section details[open] > ul > li > ul, [class*='tab-content'] .details-section details[open] > ol > li > ol { padding-left: 25px; /* width: fit-content;*/ } [class*='tab-content'] .details-section details[open] ul li, [class*='tab-content'] .details-section details[open] ol li { line-height: var(--line-height); font-size: var(--font-size-unit); } [class*='tab-content'] .details-section details[open] p[class*='notice'] { padding-left: 50px; } [class*='tab-content'] details[open] .standout-block { font-weight: 300; font-size: var(--font-size-large); padding: 6px 20px 6px 0px !important; width: calc(100% - 60px); margin: 40px 30px 0px 30px; border-top: dotted 3px var(--border-gray); position: relative; } [class*='tab-content'] details[open] .standout-block:before { content: ""; height: 10px; width: 10px; top: -7px; left: -16px; position: absolute; border-radius: 20%; } .mobile [class*='tab-content'] .details-section details[open] [class*='button'], .small-content [class*='tab-content'] .details-section details[open] [class*='button'] { display: block; margin: 10px auto; width: fit-content; } /* primary */ .tab-content-1 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-1.vertical .tabbed-content-buttons-section button.active, .tab-content-1 .details-section details summary, .tab-content-1.small-content .details-section details summary { background-color: var(--primary) !important; color: var(--primary-text) !important; border-color: var(--primary-hover); } .tab-content-1 .tabbed-content-buttons-section, [class*='tab-content-1'].vertical .tabbed-content-buttons-section, [class*='tab-content-1'].vertical .tabbed-content-buttons-section button.active, [class*='tab-content-1'] .details-section details[open], [class*='tab-content-1'][class*='vertical'] .details-section details[open], [class*='tab-content-1'] .details-section { border-color: var(--primary); } .tab-content-1 details[open] .standout-block { background-color: var(--primary-text) !important; color: var(--primary) !important; } .tab-content-1 details[open] .standout-block:before { background-color: var(--primary); } /* secondary */ .tab-content-2 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-2.vertical .tabbed-content-buttons-section button.active, .tab-content-2 .details-section details summary, .tab-content-2.small-content .details-section details summary { background-color: var(--secondary) !important; color: var(--secondary-text) !important; border-color: var(--secondary-hover); } .tab-content-2 .tabbed-content-buttons-section, [class*='tab-content-2'].vertical .tabbed-content-buttons-section, [class*='tab-content-2'].vertical .tabbed-content-buttons-section button.active, [class*='tab-content-2'] .details-section details[open], [class*='tab-content-2'][class*='vertical'] .details-section details[open], [class*='tab-content-2'] .details-section { border-color: var(--secondary); } .tab-content-2 details[open] .standout-block { background-color: var(--secondary-text) !important; color: var(--secondary) !important; } .tab-content-2 details[open] .standout-block:before { background-color: var(--secondary); } /* neutral */ .tab-content-3 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, .tab-content-3 .details-section details summary, .tab-content-3.small-content .details-section details summary { background-color: var(--neutral); color: var(--neutral-text); border-color: var(--neutral-hover); } .tab-content-3 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-3.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-3'] .details-section details[open], [class*='tab-content-3'][class*='vertical'] .details-section details[open], [class*='tab-content-3'] .details-section { border-color: var(--neutral-hover); } .tab-content-3 details[open] .standout-block { background-color: var(--neutral-text) !important; color: var(--neutral) !important; } .tab-content-3 details[open] .standout-block:before { background-color: var(--neutral); } /* dark */ .tab-content-4 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, .tab-content-4 .details-section details summary, .tab-content-4.small-content .details-section details summary { background-color: var(--dark); color: var(--dark-text); border-color: var(--dark-hover); } .tab-content-4 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-4.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-4'] .details-section details[open], [class*='tab-content-4'][class*='vertical'] .details-section details[open], [class*='tab-content-4'] .details-section { border-color: var(--dark); } .tab-content-4 details[open] .standout-block { background-color: var(--dark-text) !important; color: var(--dark) !important; } .tab-content-4 details[open] .standout-block:before { background-color: var(--dark); } /* accent-1 */ .tab-content-5 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, .tab-content-5 .details-section details summary, .tab-content-5.small-content .details-section details summary { background-color: var(--accent-1); color: var(--accent-1-text); border-color: var(--accent-1-hover); } .tab-content-5 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-5.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-5'] .details-section details[open], [class*='tab-content-5'][class*='vertical'] .details-section details[open], [class*='tab-content-5'] .details-section { border-color: var(--accent-1); } .tab-content-5 details[open] .standout-block { background-color: var(--accent-1-text) !important; color: var(--accent-1) !important; } .tab-content-5 details[open] .standout-block:before { background-color: var(--accent-1); } /* accent-2 */ .tab-content-6 .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, .tab-content-6 .details-section details summary, .tab-content-6.small-content .details-section details summary { background-color: var(--accent-2); color: var(--accent-2-text); border-color: var(--accent-2-hover); } .tab-content-6 .tabbed-content-buttons-section, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-6.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-6'] .details-section details[open], [class*='tab-content-6'][class*='vertical'] .details-section details[open], [class*='tab-content-6'] .details-section { border-color: var(--accent-2-hover); } .tab-content-6 details[open] .standout-block { background-color: var(--accent-2-text) !important; color: var(--accent-2) !important; } .tab-content-6 details[open] .standout-block:before { background-color: var(--accent-2); } /* my-black */ .tab-content-black .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, .tab-content-black .details-section details summary, .tab-content-black.small-content .details-section details summary { background-color: var(--my-black); color: var(--my-black-text); border-color: var(--my-black-hover); } .tab-content-black .tabbed-content-buttons-section, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-black.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-black'] .details-section details[open], [class*='tab-content-black'][class*='vertical'] .details-section details[open], [class*='tab-content-black'] .details-section { border-color: var(--my-black); } .tab-content-black details[open] .standout-block { background-color: var(--my-black-text) !important; color: var(--my-black) !important; } .tab-content-black details[open] .standout-block:before { background-color: var(--my-black); } /* my-gray */ .tab-content-gray .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, .tab-content-gray .details-section details summary, .tab-content-gray.small-content .details-section details summary { background-color: var(--my-gray-hover); color: var(--my-gray-text); border-color: var(--my-gray-hover); } .tab-content-gray .tabbed-content-buttons-section, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-gray.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-gray'] .details-section details[open], [class*='tab-content-gray'][class*='vertical'] .details-section details[open], [class*='tab-content-gray'] .details-section { border-color: var(--my-gray-hover); } .tab-content-gray details[open] .standout-block { background-color: var(--my-gray-text) !important; color: var(--my-gray) !important; } .tab-content-gray details[open] .standout-block:before { background-color: var(--my-gray); } /* my-white */ .tab-content-white .tabbed-content-buttons-section button.active, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, .tab-content-white .details-section details summary, .tab-content-white.small-content .details-section details summary { background-color: var(--my-white); color: var(--my-white-text); border-color: var(--my-white-hover); } .tab-content-white .tabbed-content-buttons-section, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section, [class*='tab-content'].tab-content-white.vertical .tabbed-content-buttons-section button.active, [class*='tab-content-white'] .details-section details[open], [class*='tab-content-white'][class*='vertical'] .details-section details[open], [class*='tab-content-white'] .details-section { border-color: var(--my-white); } .tab-content-white details[open] .standout-block { background-color: var(--my-white-text) !important; color: var(--my-white) !important; } .tab-content-white details[open] .standout-block:before { background-color: var(--my-white); } /*--------------------------------------------- BLOCKQUOTES */ .blockquote-1 blockquote { border-top: 3px solid var(--primary); border-bottom: 3px solid var(--primary); } .blockquote-1[class*='pull-image'] blockquote img:first-child { border-color: var(--primary); } .blockquote-2 blockquote { border-top: 3px solid var(--secondary); border-bottom: 3px solid var(--secondary); } .blockquote-2[class*='pull-image'] blockquote img:first-child { border-color: var(--secondary); } .blockquote-3 blockquote { border-top: 3px solid var(--neutral); border-bottom: 3px solid var(--neutral); } .blockquote-3[class*='pull-image'] blockquote img:first-child { border-color: var(--neutral); } .blockquote-4 blockquote { border-top: 3px solid var(--dark); border-bottom: 3px solid var(--dark); } .blockquote-4[class*='pull-image'] blockquote img:first-child { border-color: var(--dark); } .blockquote-5 blockquote { border-top: 3px solid var(--accent-1); border-bottom: 3px solid var(--accent-1); } .blockquote-5[class*='pull-image'] blockquote img:first-child { border-color: var(--accent-1); } .blockquote-6 blockquote { border-top: 3px solid var(--accent-2); border-bottom: 3px solid var(--accent-2); } .blockquote-6[class*='pull-image'] blockquote img:first-child { border-color: var(--accent-2); } .blockquote-black blockquote { border-top: 3px solid var(--my-black); border-bottom: 3px solid var(--my-black); } .blockquote-black[class*='pull-image'] blockquote img:first-child { border-color: var(--my-black); } .blockquote-gray blockquote { border-top: 3px solid var(--my-gray); border-bottom: 3px solid var(--my-gray); } .blockquote-gray[class*='pull-image'] blockquote img:first-child { border-color: var(--my-gray); } .blockquote-white blockquote { border-top: 3px solid var(--my-white); border-bottom: 3px solid var(--my-white); } .blockquote-white[class*='pull-image'] blockquote img:first-child { border-color: var(--my-white); } /*-- blockquote plate --*/ [class*='blockquote-plate'] blockquote { border: solid 3px var(--border-gray); border-radius: var(--border-radius-chamfer); box-shadow: var(--box-shadow-down); } [class*='blockquote-plate'] blockquote p { padding-left: 5%; padding-right: 5%; } .blockquote-plate-1 blockquote { border-color: var(--primary-hover); background-color: var(--primary); color: var(--primary-text); } .blockquote-plate-2 blockquote { border-color: var(--secondary-hover); background-color: var(--secondary); color: var(--secondary-text); } .blockquote-plate-3 blockquote { border-color: var(--neutral-hover); background-color: var(--neutral); color: var(--neutral-text); } .blockquote-plate-4 blockquote { border-color: var(--dark-hover); background-color: var(--dark); color: var(--dark-text); } .blockquote-plate-5 blockquote { border-color: var(--accent-1-hover); background-color: var(--accent-1); color: var(--accent-1-text); } .blockquote-plate-6 blockquote { border-color: var(--accent-2-hover); background-color: var(--accent-2); color: var(--accent-2-text); } .blockquote-plate-black blockquote { border-color: var(--my-black-hover); background-color: var(--my-black); color: var(--my-black-text); } .blockquote-plate-gray blockquote { border-color: var(--my-gray-hover); background-color: var(--my-gray); color: var(--my-gray-text); } .blockquote-plate-white blockquote { border-color: var(--my-white-hover); background-color: var(--my-white); color: var(--my-white-text); } /*-- block quote skins --*/ .corner-quotes blockquote, .top-shout blockquote { padding: 1.85rem; quotes: "\201C""\201D""\2018""\2019"; } .corner-quotes blockquote:before { content: ""; position: absolute; border-left: solid 3px var(--border-gray); bottom: 0; left: 0; width: 1px; height: 45%; } .corner-quotes blockquote:after { content: ""; position: absolute; border-right: solid 3px var(--border-gray); top: 0; right: 0; width: 1px; height: 45%; } .corner-quotes blockquote .start-quote:before { content: "\201C"; font-family: Georgia, "Times New Roman", Times, serif; color: var(--border-gray); position: absolute; top: 65px; left: -30px; height: 5px; width: 5px; font-size: 8em; display: grid; align-content: start; justify-content: start; } .corner-quotes blockquote .end-quote:before { content: "\201D"; font-family: Georgia, "Times New Roman", Times, serif; position: absolute; bottom: -8px; right: -30px; height: 5px; width: 5px; font-size: 8em; display: grid; align-content: end; justify-content: end; color: var(--border-gray); } .top-shout blockquote { border: solid 3px var(--border-gray); border-top: 0px; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .top-shout blockquote:before { content: ""; position: absolute; top: 0; left: 0; width: 40%; border-top: solid 3px var(--border-gray); } .top-shout blockquote:after { content: ""; position: absolute; top: 0; right: 0; width: 40%; border-top: solid 3px var(--border-gray); } .top-shout blockquote .chat-quote:before { content: "\f075"; font-family: "font awesome 6 pro"; position: absolute; top: 0; right: 50%; height: 5px; width: 5px; font-size: 3em; display: grid; align-content: center; justify-content: center; color: var(--border-gray); } .curve-chat blockquote { border: solid 3px var(--border-gray); border-radius: var(--border-radius); border-bottom: 0px; padding: 25px; } .curve-chat blockquote:before { content: " "; position: absolute; bottom: -3px; width: 40px; height: 25px; border-bottom: solid 3px var(--border-gray); left: -2px; border-bottom-left-radius: var(--border-radius); } .curve-chat blockquote:after { content: " "; position: absolute; bottom: -3px; width: 65%; height: 25px; border-bottom: solid 3px var(--border-gray); right: -2px; border-bottom-right-radius: var(--border-radius); } .curve-chat blockquote .chat-curve:after { content: " "; position: absolute; border-top-right-radius: var(--border-radius); border-top: solid 3px var(--border-gray); border-right: solid 3px var(--border-gray); height: 30px; width: 50px; bottom: -30px; left: 29px; z-index: 5; } .curve-chat blockquote *:last-child { position: absolute; bottom: -35px; left: 35%; } .line-bar blockquote { border: 0px; padding: 15px; text-align: center; } .line-bar blockquote:before, .line-bar blockquote:after { content: " "; position: absolute; top: 0px; left: 25%; width: 50%; border-width: 1px; border-style: solid; border-color: var(--border-gray); } .line-bar blockquote:after { top: unset; bottom: 0px; border-width: 1px; } .line-bar blockquote *:last-child { padding-top: 18px; padding-bottom: 8px; position: relative; text-align: center; } .line-bar blockquote *:last-child:before { content: " "; position: absolute; top: 6px; left: 40%; width: 20%; border: solid 1px var(--border-gray); } .line-bar blockquote *:last-child:after { content: " "; position: absolute; top: 4px; left: calc(50% - 3px); width: 6px; height: 6px; transform: rotateZ(45deg); background-color: var(--border-gray); } .frosted blockquote { border: solid 2px var(--border-gray); border-radius: var(--border-radius); color: var(--white); text-shadow: var(--text-shadow); padding: 15px; } .frosted blockquote:after { content: " "; position: absolute; border-radius: calc(var(--border-radius) - 2px); background-color: rgba(5,5,30, .4); z-index: -1; backdrop-filter: blur(5px); top: 0; left: 0; right: 0; bottom: 0; } .staples blockquote { border: 0px; border-left: solid 8px var(--border-gray); border-right: solid 8px var(--border-gray); padding: 35px; } .staples blockquote:before, .staples blockquote:after { content: " "; position: absolute; z-index: -1; border-top: solid 8px var(--border-gray); border-bottom: solid 8px var(--border-gray); top: 0; left: 0; bottom: 0; width: 20%; } .staples blockquote:before { left: unset; right: 0; } /*-------------------------------------- FEATURES AND PHOTO-FEATURES --------------------------------------*/ /*-------------------------------------------- FEEDBACK */ .feedback a { color: var(--secondary); text-decoration-color: var(--accent-1); } .feedback a:hover { color: var(--dark); text-decoration-color: var(--accent-2); } .feedback img { outline-color: var(--accent-1); outline-width: 3px; } .feedback blockquote { background-color: var(--secondary); color: var(--secondary-text); } .feedback blockquote:after { border-color: transparent transparent var(--secondary) var(--secondary); } /*-------------------------------------------- FIXES FOR WASH ELEMENTS */ main *[class*="wash-"] h1, main *[class*="wash-"] h2, main *[class*="wash-"] h3, main *[class*="wash-"] p { background-color: inherit; } /*----------------------------------------- CALENDAR FEATURES: HOURS / EVENTS */ .calendar-title { border-bottom: solid 2px var(--accent-1); } .calendar { background-color: var(--light-gray); border: solid 1px var(--warm-gray); } .cal-day { border-radius: var(--border-radius); color: var(--neutral-text); background-color: var(--neutral); } .day-day { background-color: var(--cloud); color: var(--cloud-text); } .day-date { background-color: var(--secondary-text); color: var(--secondary); } .day-date.today { background-color: var(--secondary); color: var(--secondary-text); } .other-month { background-color: var(--neutral); color: var(--neutral-text); } .calendar-names select, .month-choice select { background-color: var(--secondary-text); color: var(--secondary); font-weight: 600; font-size: var(--font-size-large); } .calendar-names label, .month-choice label { background-color: var(--neutral); color: var(--neutral-text); padding: 4px; } .day-closed:before { content: "closed"; color: var(--dark); font-weight: 400; } .mobile-hours-day-label, .mobile-closure-day-label { color: var(--secondary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent-1); padding: 4px; margin: 0px; } .mobile-closure-day-label { color: var(--dark); text-decoration-color: var(--secondary); } .mobile-hours-day-hours { color: var(--my-black); font-size: var(--font-size-small); margin: 0; margin-bottom: 5px; } .calendar-mobile .time-hypen { width: 15px; } /*------------- EVENTS */ .date-marker p { border: solid 1px var(--dark); background-color: var(--accent-2); color: var(--accent-2-text); text-align: center; border-radius: var(--border-radius-small); padding: 0px; } .date-marker p span:first-child { background-color: var(--primary); color: var(--primary-text); border-top-left-radius: var(--border-radius-small); border-top-right-radius: var(--border-radius-small); } .date-marker hr { width: 90%; border-top: solid 2px var(--accent-1); } .event-organizer { font-size: var(--font-size-small); color: var(--dark); } .event-title { font-size: var(--font-size); font-weight: bold; color: var(--primary); } .event-course, .event-people { font-size: var(--font-size-reduced); color: var(--dark); } .event-location { font-size: var(--font-size-reduced); color: var(--priamry); } /*------------------------------------------- BORDERS */ .border, .border-alt { border-color: var(--border-gray); } .border-1 { border-color: var(--primary-border) !important; } .border-alt-1 { border-color: var(--primary-border-alt) !important; } .border-2 { border-color: var(--secondary-border) !important; } .border-alt-2 { border-color: var(--secondary-border-alt) !important; } .border-3 { border-color: var(--neutral-border) !important; } .border-alt-3 { border-color: var(--neutral-border-alt) !important; } .border-4 { border-color: var(--dark-border) !important; } .border-alt-4 { border-color: var(--dark-border-alt) !important; } .border-5 { border-color: var(--accent-1-border) !important; } .border-alt-5 { border-color: var(--accent-1-border-alt) !important; } .border-6 { border-color: var(--accent-2-border) !important; } .border-alt-6 { border-color: var(--accent-2-border-alt) !important; } .border-black { border-color: var(--my-black-border) !important; } .border-alt-black { border-color: var(--my-black-border-alt) !important; } .border-gray { border-color: var(--my-gray-border) !important; } .border-alt-gray { border-color: var(--my-gray-border-alt) !important; } .border-white { border-color: var(--my-white-border) !important; } .border-alt-white { border-color: var(--my-white-border-alt) !important; } /*----------------------------------------------------- INFO BLOCKS - DIRECTORY */ .directory-item.background-1 .item-name button { border-bottom: dotted 2px var(--primary-text); } .directory-item.background-2 .item-name button { border-bottom: dotted 2px var(--secondary-text); } .directory-item.background-3 .item-name button { border-bottom: dotted 2px var(--neutral-text); } .directory-item.background-4 .item-name button { border-bottom: dotted 2px var(--dark-text); } .directory-item.background-5 .item-name button { border-bottom: dotted 2px var(--accent-1-text); } .directory-item.background-6 .item-name button { border-bottom: dotted 2px var(--accent-2-text); } /*---------------------------------------- TOPIC-BLOCK */ .grid-item.topic-block.has-content { display: block; } .grid-item.topic-block .overlay-content, .topic-block .data-content { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .topic-block .data-content .snapshot { height: 100%; } .grid-item.topic-block .overlay-content > *, .topic-block .data-content > * { /* margin: .4em;*/ } .grid-item.topic-block .overlay-content *:last-child a, .topic-block .data-content *:last-child a { margin-left: 0px; } .grid-item.topic-block .overlay-content *:last-child:not(i), .topic-block:not(.feature-middle) .data-content *:last-child:not(i), .topic-block .data-content .snapshot-bottom *:last-child:not(i) { margin-top: auto; } /*----------------------------------------------- OTHER STYLES */ .sticky-note { position: sticky !important; top: 110px; height: 60vh; } /*------------ IMG MODIFIERS: FRAMES */ .grid-item:not(.gallery-museum):not(.gallery-frames) [class*='frame-'] img { border: solid 4px var(--border-gray); } .grid-item:not(.gallery-museum) .frame-1 img, .gallery-frames .image-holder.frame-1 .img-frame { border-color: var(--primary); } .grid-item:not(.gallery-museum) .frame-2 img, .gallery-frames .image-holder.frame-2 .img-frame { border-color: var(--secondary); } .grid-item:not(.gallery-museum) .frame-3 img, .gallery-frames .image-holder.frame-3 .img-frame { border-color: var(--neutral); } .grid-item:not(.gallery-museum) .frame-4 img, .gallery-frames .image-holder.frame-4 .img-frame { border-color: var(--dark); } .grid-item:not(.gallery-museum) .frame-5 img, .gallery-frames .image-holder.frame-5 .img-frame { border-color: var(--accent-1); } .grid-item:not(.gallery-museum) .frame-6 img, .gallery-frames .image-holder.frame-6 .img-frame { border-color: var(--accent-2); } .grid-item:not(.gallery-museum) .frame-black img, .gallery-frames .image-holder.frame-black .img-frame { border-color: var(--my-black); } .grid-item:not(.gallery-museum) .frame-gray img, .gallery-frames .image-holder.frame-gray .img-frame { border-color: var(--my-gray); } .grid-item:not(.gallery-museum) .frame-white img, .gallery-frames .image-holder.frame-white .img-frame { border-color: var(--my-white); } /*------------ IMG MODIFIERS: MATTES */ .grid-item:not(.gallery-museum):not(.gallery-frames) [class*='matte-'] img { padding: 20px; } .grid-item:not(.gallery-museum) .matte-1 img { background-color: var(--primary); } .grid-item:not(.gallery-museum) .matte-2 img { background-color: var(--secondary); } .grid-item:not(.gallery-museum) .matte-3 img { background-color: var(--neutral); } .grid-item:not(.gallery-museum) .matte-4 img { background-color: var(--dark); } .grid-item:not(.gallery-museum) .matte-5 img { background-color: var(--accent-1); } .grid-item:not(.gallery-museum) .matte-6 img { background-color: var(--accent-2); } .grid-item:not(.gallery-museum) .matte-black img { background-color: var(--my-black); } .grid-item:not(.gallery-museum) .matte-gray img { background-color: var(--my-gray); } .grid-item:not(.gallery-museum) .matte-white img { background-color: var(--my-white); } /*---------------- IMG MODIFIERES */ .grid-item:not(.gallery-museum) .image-pop img { padding: 0px; box-shadow: 7px 7px 4px 1px rgba(10,10,10,0.11), 2px 2px 3px 1px rgba(0,0,0,0.85), 12px 12px 10px 5px rgba(10,10,10,0.11), -1px -1px 1px 1px rgba(255,255,255,0.95); } .grid-item:not(.gallery-museum):not(.gallery-frames) [class*='image-'] .image-parent { position: relative; z-index: 3; padding: 5%; } .grid-item:not(.gallery-museum):not(.gallery-frames) [class*='image-'] .image-parent img { position: relative; z-index: 3; padding: 0%; } .grid-item:not(.gallery-museum):not(.gallery-frames) [class*='image-'] .image-parent:before { position: absolute; z-index: 5; content: ""; top: 5%; left: 5%; right: 5%; bottom: 5%; } .grid-item:not(.gallery-museum):not(.gallery-frames) .image-vignette .image-parent:before { box-shadow: inset 0px 0px 12px 0px rgba(0,0,0,0.31), inset 0px 0px 26px 0px rgba(0,0,0,0.21), inset 0px 0px 25px 28px rgba(0,0,0,0.31); } .image-filter-sepia img { -webkit-filter: sepia(1); filter: sepia(1); } .image-filter-vintage img { -webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); } .grid-item:not(.gallery-museum) .image-filter-noisey .image-parent:before { background-image: radial-gradient(ellipse, #0000, #0007), linear-gradient(0deg, #9725, #9725), url(https://itwebstg.fullerton.edu/web/core/images/v5/image-noise.png); background-size: auto, auto, auto; background-repeat: repeat; background-position: center; } .image-filter-noisey img { filter: blur(0.05em) saturate(0.7) contrast(1.5) brightness(1); } .grid-item:not(.gallery-museum) .image-filter-warm .image-parent:before { background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -o-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -moz-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); mix-blend-mode: multiply; } .image-filter-warm .image-parent { -webkit-filter: sepia(.45) contrast(1.45) brightness(1.25) saturate(1.87) hue-rotate(-5deg); filter: sepia(.45) contrast(1.45) brightness(1.25) saturate(1.87) hue-rotate(-5deg); } .grid-item:not(.gallery-museum) .image-filter-cool .image-parent:before { background: radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -o-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -moz-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%); mix-blend-mode: multiply; } .image-filter-cool .image-parent { -webkit-filter: sepia(.05) contrast(1.35) brightness(1.35) saturate(1.37); filter: sepia(.05) contrast(1.35) brightness(1.35) saturate(1.37); } .grid-item:not(.gallery-museum) [class*='image-glaze-'] .image-parent:before { position: absolute; z-index: 5; content: ""; top: 5%; left: 5%; right: 5%; bottom: 5%; mix-blend-mode: color; } [class*='glaze-'] { --gradient-degree: 220deg; --start-at: 33%; } [class*='glaze-'].vertical-glaze { --gradient-degree: 270deg; } [class*='glaze-'].vertical-glaze-flip { --gradient-degree: 90deg; } [class*='glaze-'].top-glaze { --gradient-degree: 180deg; --start-at: 10%; } .grid-item:not(.gallery-museum) .image-glaze-1 .image-parent:before { background: linear-gradient(var(--gradient-degree), var(--primary) var(--start-at),var(--primary-hover)); } .grid-item:not(.gallery-museum) .image-glaze-1-0 .image-parent:before { background: linear-gradient(var(--gradient-degree), var(--primary) var(--start-at),transparent); } .grid-item:not(.gallery-museum) .image-glaze-2 .image-parent:before { background: linear-gradient(232deg, var(--secondary) var(--start-at),var(--secondary-hover)); } .grid-item:not(.gallery-museum) .image-glaze-3 .image-parent:before { background: linear-gradient(232deg, var(--neutral) var(--start-at),var(--neutral-hover)); } .grid-item:not(.gallery-museum) .image-glaze-4 .image-parent:before { background: linear-gradient(232deg, var(--dark) var(--start-at),var(--dark-hover)); } .grid-item:not(.gallery-museum) .image-glaze-5 .image-parent:before { background: linear-gradient(232deg, var(--accent-1),var(--accent-1-hover)); } .grid-item:not(.gallery-museum) .image-glaze-6 .image-parent:before { background: linear-gradient(232deg, var(--accent-2),var(--accent-2-hover)); } .grid-item:not(.gallery-museum) .image-glaze-black .image-parent:before { background: linear-gradient(232deg, var(--my-black),var(--my-black-hover)); } .grid-item:not(.gallery-museum) .image-glaze-gray .image-parent:before { background: linear-gradient(232deg, var(--my-gray),var(--my-gary-hover)); } .grid-item:not(.gallery-museum) .image-glaze-white .image-parent:before { background: linear-gradient(232deg, var(--white),var(--white-hover)); } .grid-item:not(.gallery-museum) .image-glaze-1-5 .image-parent:before { background: linear-gradient(var(--gradient-degree), var(--primary) 33%,var(--accent-1)); } .grid-item:not(.gallery-museum) .image-glaze-2-5 .image-parent:before { background: linear-gradient(var(--gradient-degree), var(--secondary) 33%, var(--accent-1)); } .grid-item:not(.gallery-museum) .image-glaze-2-black .image-parent:before { background: linear-gradient(var(--gradient-degree), var(--secondary) 33%, var(--my-black)); } .image-lighten .image-parent:before { mix-blend-mode: lighten !important; } .image-darken .image-parent:before { mix-blend-mode: darken !important; opacity: 65%; } .image-plus-lighter .image-parent:before { mix-blend-mode: plus-lighter !important; } .image-soft-light .image-parent:before { mix-blend-mode: soft-light !important; } .image-hard-light .image-parent:before { mix-blend-mode: hard-light !important; } .image-screen .image-parent:before { mix-blend-mode: screen !important; } .image-overlay .image-parent:before { mix-blend-mode: overlay !important; } .image-multiply .image-parent:before { mix-blend-mode: multiply !important; opacity: 65%; } /*--------------------------------- CATALOG STYLES */ .catalog-holder { padding: var(--padding-clamp); background-color: var(--my-white) !important; color: var(--my-white-text) !important; border: solid 1px var(--border-gray); border-radius: var(--border-radius); } .catalog-holder h1, .catalog-holder h2, .catalog-holder h3, .catalog-holder h4 { opacity: 0; display: none; } .catalog-holder p, .catalog-holder div, .catalog-holder ul, .catalog-holder li { list-style-type: none; color: inherit !important; background-color: inherit !important; } .catalog-holder ul { margin: 0px; padding: 5px 15px; width: 100%; } .catalog-holder li { border-left: solid 0px transparent; padding: 6px; height: 100%; display: grid; align-items: center; margin: 0px; } .catalog-holder li:hover, .catalog-holder li:focus-within { border-left: solid 0px var(--orange); } ul.acalog-program-core-courses { padding: 5px; } .catalog-holder a { color: var(--secondary) !important; background-color: var(--my-white) !important; } .catalog-holder a:hover, .catalog-holder a:focus { color: var(--secondary-hover) !important; background-color: var(--my-white) !important; } .catalog-holder .acalog-course-title { font-size: var(--font-size-large); color: var(--secondary) !important; font-weight: bold; padding-left: 0px; width: calc(100% - 80px); } ul.acalog[the-type='list'] .acalog-course-title { width: 100%; margin: 2px 8px; } ul.acalog[the-type='list'] .acalog-course-body { width: 100%; margin: 2px 8px; } ul.acalog[the-type='list'] .acalog-course-body hr { width: 100%; margin: 0px; padding: 4px 0px; } .catalog-holder .acalog-program-name { background-color: var(--primary) !important; color: var(--primary-text) !important; font-size: var(--font-size-app-main-title); margin: 0px; padding: 20px 10px; border-radius: var(--border-radius); line-height: normal; } .catalog-holder .acalog-program-core-name { font-size: var(--font-size-larger); color: var(--primary) !important; margin: 0px; } .catalog-holder .acalog-program-cores { margin-left: 25px; width: calc(100% - 50px); } .catalog-holder .acalog-close, .catalog-holder .acalog-close-btn { border: solid 1px var(--border-gray); background-color: var(--primary) !important; color: var(--primary-text) !important; cursor: pointer; float: none; display: grid; grid-template-columns: 1fr; text-align: center; width: 75px; margin: 0px; margin-left: calc(100% - 80px); padding: 6px; border-radius: var(--border-radius-chamfer); text-decoration: none; } ul.acalog[the-type='list'] .acalog-course-container .acalog-close-btn { display: none; } .catalog-holder .acalog-close:hover, .catalog-holder .acalog-close:focus { background-color: var(--primary-hover) !important; color: var(--primary-hover-text) !important; box-shadow: var(--box-shadow-down); } .catalog-holder .acalog-course-open > .acalog-course-link, .catalog-holder .acalog-course-container, .catalog-holder .acalog-close { border: 0px; } .catalog-holder .acalog-course-container { border-bottom: solid 1px var(--border-gray); padding-bottom: 25px; } .catalog-holder .collapsed, .catalog-holder .expanded { position: relative; } .catalog-holder .collapsed .acalog-course-body { display: none; } .catalog-holder .acalog-close-btn { width: 70px; } .catalog-holder .collapsed .acalog-close-btn { position: absolute; top: 20%; right: 10px; } .catalog-holder .expanded .acalog-course-body { display: block; } ul.acalog[the-type='list'] .acalog-course .acalog-course-container { opacity: 0; } ul.acalog[the-type='list'] .acalog-course.acalog-course-open .acalog-course-container { opacity: 1; transition: all 2s ease; } /*-------------------------------------------- UNIVERSITY CAP MESSAGING */ .cap-message-holder { position: relative; display: grid; grid-template-columns: 1fr; padding: 20px; border: solid 2px var(--primary); background-color: var(--my-white); color: var(--my-white-text); border-top: 0px; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); box-shadow: var(--box-shadow-down); } .cap-message-holder.alert-message, .cap-message-holder.clery-message, .cap-message-holder.community-message { padding-top: 55px; } .cap-message-holder.alert-message:before, .cap-message-holder.clery-message:before, .cap-message-holder.community-message:before { position: absolute; top: -4px; left: -4px; height: 40px; width: calc(100% + 8px); display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; text-align: center; font-weight: 300; font-size: var(--font-size-medium); border-bottom: solid 2px var(--border-gray); font-weight: bold; box-shadow: var(--box-shadow-less); border-top-left-radius: var(--border-radius-chamfer); border-top-right-radius: var(--border-radius-chamfer); } .cap-message-holder.alert-message { border-color: var(--pd-alert-border); } .cap-message-holder.alert-message:before { background-color: var(--pd-alert); color: var(--pd-alert-text); content: "Emergency Alert / Saftey Warning"; } .cap-message-holder.clery-message { border-color: var(--pd-clery-border); } .cap-message-holder.clery-message:before { background-color: var(--pd-clery); color: var(--pd-clery-text); content: "Clery Notification"; } .cap-message-holder.community-message { border-color: var(--pd-community-border); } .cap-message-holder.community-message:before { background-color: var(--pd-community); color: var(--pd-community-text); content: "Community Safety Bulletin"; } .cap-message > p { display: grid; grid-template-columns: 1fr; margin: 0px; } .cap-sent { font-size: var(--font-size-small); padding: 0px; } .cap-status { font-size: var(--font-size-reduced); font-weight: bold; padding: 0px; } .cap-type { font-weight: bold; padding: 2px 10px; background-color: var(--primary); color: var(--primary-text); } .alert-message .cap-type { background-color: var(--pd-alert-border); color: var(--pd-alert-text); } .clery-message .cap-type { background-color: var(--pd-clery-border); color: var(--pd-clery-text); } .community-message .cap-type { background-color: var(--pd-community-border); color: var(--pd-community-text); } .cap-title { font-size: var(--font-size-large); font-weight: 300; padding: 20px 10px 2px 10px; font-weight: bold; } .cap-description { font-size: var(--font-size-medium); padding: 2px 10px; } /* -- INFO BLOCK CONTENT DATES --*/ .no-date .last-updated-date { display: none !important; } .last-updated-date{ display:flex !important; flex-direction:row; flex-wrap:wrap; font-size:var(--font-size-tiny); font-weight:300; gap:8px; line-height:.75em; margin:0px; padding:10px 10px 2px 10px; } .last-updated-date .the-date{ font-weight:100; } .grid-item:not(.application-inventory) .app-data-holder .app-data:not(.active) .last-updated-date{ display:none !important; } /* -- TEXT SHADOWING --*/ .title-shadow .overlay-content h1, .title-shadow .overlay-content h2, .title-shadow .overlay-content h3, .title-shadow .overlay-content h4, .title-shadow .overlay-content h5, .title-shadow .overlay-content h6, .title-shadow .overlay-content p, .title-shadow .overlay-content p * { text-shadow: var(--text-shadow-title) !important; } /* -- FANCY FORMATTING --*/ .illuminated-letter:not(.edit-mode) .overlay-content p { padding-left: 100px; } .illuminated-letter:not(.edit-mode) .overlay-content p:first-child { padding-left: 0px; position: absolute; left: 0px; top: 10px; border: solid 2px var(--border-gray); font-size: 4em; font-weight: bold; height: 80px; width: 80px; display: grid; padding: 10px; align-content: center; justify-content: center; border-top-left-radius: var(--border-radius-chamfer); border-bottom-right-radius: var(--border-radius-chamfer); } /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + END OF STANDARD STYLES YOU ARE + + USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED + + PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/