/* Default box sizing. ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; } /* HTML and Body ---------------------------------------- */ html:focus-within { scroll-behavior: smooth; } html { font-size: 16px; scroll-behavior: smooth; } html, body { height: 100%; } body { color: var(--color-text); background-color: var(--body-bg-color); font-family: var(--body-font); /*system-ui,*/ /*-apple-system,*/ /*BlinkMacSystemFont,*/ /*'Segoe UI',*/ /*Roboto,*/ /*Oxygen,*/ /*Ubuntu,*/ /*Cantarell,*/ /*'Open Sans',*/ /*'Helvetica Neue',*/ /*sans-serif;*/ font-size: 1rem; font-weight: 400; min-height: 100vh; margin: 0; padding: 0; line-height: 1.6; text-rendering: optimizeSpeed; overflow-x: hidden; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Regions ---------------------------------------- */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } summary { display: list-item; cursor: pointer; } details { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border); } template, [hidden] { display: none; } /* Typography ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: var(--color-heading); font-weight: 400; font-style: normal; line-height: 1.6; } h1 { font-size: var(--h1-size); } h2 { font-size: var(--h2-size); } h3 { font-size: var(--h3-size); } h4 { font-size: var(--h4-size); } h5 { font-size: var(--h5-size); } h6 { font-size: var(--h6-size); } p { margin: 0 0 1.2rem 0; } b, strong { font-weight: bolder; } dfn, cite { font-style: italic; } del { text-decoration: line-through; } small { font-size: 80%; } big { font-size: 125%; } em { /*font-style: normal;*/ } a { background-color: transparent; text-decoration: none; color: var(--primary); } a:active, a:focus { text-decoration: none; border: 0; outline: 0; } a:hover { /*color: var(--secondary);*/ text-decoration: underline; text-decoration-style: double; } a:not([class]) { text-decoration-skip-ink: auto; } /* Typography-> code tags */ /*code,*/ /*kbd,*/ /*pre,*/ /*samp {*/ /*font-family: monospace, monospace;*/ /*font-size: 1rem;*/ /*}*/ /*kbd,*/ /*samp {*/ /*display: inline-block;*/ /*margin: 0;*/ /*padding: 0 5px;*/ /*}*/ /*pre {*/ /*overflow: auto;*/ /*margin: 1rem 0;*/ /*padding: 1rem;*/ /*tab-size: 2;*/ /*}*/ pre.sf-dump, samp { font-size: .8rem; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } tt, var { font-family: monospace, monospace; font-style: italic; } mark { background: var(--primary); } acronym[title], abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } abbr, acronym { cursor: help; } /* Media ---------------------------------------- */ audio, canvas, progress, video { vertical-align: baseline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } img, picture, svg { max-width: 100% !important; height: auto; margin: 0; padding: 0; border: 0; border-style: none; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { max-width: 100%; height: auto; margin: 1rem 0; border: 0; } .align-left { margin: 0 1rem 0 0; } .align-right { margin: 0 0 0 1rem; } .align-center { margin-top: 1rem; margin-bottom: 1rem; } figcaption { padding: 4px; font-size: 0.8rem; text-align: center; } .image-field { margin: 0 0 1rem 0; } /* Form ---------------------------------------- */ form { margin-bottom: 1rem; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.6; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } .button { display: inline-block; } .button, button, [type="button"], [type="reset"], [type="submit"] { position: relative; cursor: pointer; border: 0; padding: 4px 8px; line-height: 1.6; -webkit-appearance: button; background: var(--upei-green); color: #fff; border-radius: 4px; font-family: var(--tabs-font); font-optical-sizing: auto; font-weight: 300; font-style: normal; /*font-variation-settings: "wdth" 75;*/ } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 0; } button[disabled], html input[disabled] { cursor: not-allowed; opacity: 0.7; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } input, button, textarea, select { font: inherit; } input { line-height: normal; } input, textarea { max-width: 100%; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { padding: 10px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { outline: 0; } textarea { width: 100%; overflow: auto; } [type="checkbox"], [type="radio"] { padding: 0; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; -webkit-appearance: textfield; -moz-appearance: textfield; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } [type="file"] { cursor: pointer; } fieldset { margin: 0 0 20px 0; padding: 1rem; } fieldset > :last-child { margin-bottom: 0; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } optgroup { font-weight: bold; } select { padding: 6px; cursor: pointer; } label[for] { cursor: pointer; } /* Form */ .form-item { margin-bottom: 1rem; } .form-required:after { content: "*"; display: inline-block; padding-left: 4px; color: red; } .form-item label { display: block; } label.option { display: inline; font-weight: normal; } ::-webkit-input-placeholder { color: var(--border); } :-moz-placeholder { color: var(--border); } ::-moz-placeholder { color: var(--border); opacity: 1; } :-ms-input-placeholder { color: var(--border); } .field--name-body input[type="text"], .field--name-body input[type="email"], .field--name-body input[type="url"], .field--name-body input[type="password"], .field--name-body input[type="search"], .field--name-body textarea { display: block; margin-bottom: 0.8rem; } /* Common HTML Elements ---------------------------------------- */ hr { background-color: var(--border); clear: both; width: 100%; max-width: 100%; height: 2px; border: 0; -webkit-box-sizing: content-box; box-sizing: content-box; overflow: visible; } address { margin: 0 0 1rem 0; font-style: italic; } /* Definition Lists */ dt { font-weight: 700; } dd { margin: 0 0 1.2rem 0; } blockquote { position: relative; background-color: var(--light); margin: 1rem 0; padding: 1rem; } blockquote > :last-child { margin-bottom: 0; } /* List ---------------------------------------- */ ul, ol { margin: 0; padding: 0 0 0.25rem 1rem; } [dir="rtl"] ul, [dir="rtl"] ol { padding: 0 1rem 0.25rem 0; } ol ol, ul ul { margin: 0; padding: 0 0 0.25rem 1rem; } [dir="rtl"] ol ol, [dir="rtl"] ul ul { padding: 0 1rem 0.25rem 0; } ul { list-style: disc; } li > ul, li > ol { margin-bottom: 0; } [dir="rtl"] ul, [dir="rtl"] ol { padding: 0 1rem 0.25rem 0; } li { padding: 4px 0; } /* Table ---------------------------------------- */ table { width: 100%; margin-bottom: 1.2rem; border-spacing: 0; border-collapse: collapse; } th, tr, td { vertical-align: middle; } th { margin: 0; padding: 5px; text-align: left; } td { padding: 5px; }