Allegiance Pledge Pages (stlpr.org/donate)

pledge-pages.css

/* These are CSS Custom Properties */
/* They're used to create variables that can be reused throughout the stylesheet, like so:

   body {
     color: #231f20;
     color: var(--text-color);
   }
  
   Right now, I include the "color: #231f20;" as a fallback value for Internet Explorer
   All other browsers (with the possible exception of some versions of Safari) do not need this fallback.
*/

:root {
    --color-primary: #237bbd;
    --color-primary-darker: #234093;
    --color-highlight: #f26a5b;
    --color-highlight-darker: #d62021;
    --font-base: acumin-pro, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-headline: utopia-std, Georgia, Apple Garamond, Droid Serif, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-monospace: SFMono-Regular, Menlo, Consolas, Courier New, Courier, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --border-color: #caccce;
    --border-radius: 0px;
    --text-color: #231f20;
    --text-color-inverse: #fff;
}

/* Responsive iframes */
/* This utility defines iframes that don't need a fixed height.
   This is useful because often you'll want an iframe to be a full-width element in a specific aspect-ratio

   It's used like this:
   <div class="responsive-iframe aspect-ratio-3x2">
     <iframe src="//path-to/video.mp4">
   </div>

*/
.responsive-iframe {
    position: relative;
    display: block;
    width: 100%;
    padding: 66.67% 0 0;
    overflow: hidden;
}
.responsive-iframe iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.aspect-ratio-2x1 {
    padding-top: 50%;
}
.aspect-ratio-16x9 {
    padding-top: 56.25%;
}
.aspect-ratio-3x2 {
    padding-top: 66.67%;
}
.aspect-ratio-4x3 {
    padding-top: 75%;
}
.aspect-ratio-1x1 {
    padding-top: 100%;
}
.aspect-ratio-3x4 {
    padding-top: 133.33%;
}
.aspect-ratio-2x3 {
    padding-top: 150%;
}
.aspect-ratio-9x16 {
    padding-top: 177.78%;
}
.aspect-ratio-1x2 {
    padding-top: 200%;
}

/* RESET Allegiance Styling */
/* Allegiance has a lot of default colors and font properties.
   We want to overwrite these styles, so that they can be corrected in our theme */

/* Associate font sizes with headings */
/* The <font> tag is deprecated, but still used heavily throughout Allegiance
   Style the <font> tag alongside heading tags for consistency */
html font[size="5"],
html font[size="6"],
html font[size="7"],
html h1 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.325;
}
html font[size="4"],
html h2 {
    font-size: 24px;
    font-size: 1.5rem;
}
html font[size="3"],
html h3 {
    font-size: 18.72px;
    font-size: 1.17rem;
}
html font[size="1"],
html font[size="2"],
html h4,
html h5,
html h6 {
    font-size: 16px;
    font-size: 1rem;
}
html table,
html tbody {
    width: 100%;
}
/* Prevent page elements from exceeding their containers */
html .ALLEGHEADERS,
html .ALLEGQUESTIONS,
html .ALLEGSECTIONS,
html .MAINTABLE,
html img,
html input,
html select,
html textarea {
    max-width: 100%;
}
/* Strip default colors and font properties */
html .ALLEGELEMENTS,
html .ALLEGHEADERS,
html .ALLEGQUESTIONS,
html .ALLEGSECTIONS,
html .igte_Edit {
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: 400;
    text-align: initial;
}
html .ALLEGQUESTIONS,
html .MAINTABLE {
    background: none;
    width: auto;
    max-width: 100%;
}
html span.checked {
    font-size: 0;
}
html span.checked > .paySubRec {
    font-size: 16px;
    font-size: 1rem;
}
html font[size="3"] {
    color: inherit;
}
/* Disable line-breaks in headers */
/* It's a common default I've seen where <br /><br /> is used to add a gap above or below a header.
   We don't want this, because we can add padding in a more consistent way with our stylesheet */
html .ALLEGHEADERS br {
    display: none;
}
html #ctl00_AllegMain_UPGRADETABLE td {
    display: block;
}
/* Set some base colors and properties for the page to inherit */
body {
    color: #231f20;
    color: var(--text-color);
    background-color: #fbfbfb;
    font-family: acumin-pro, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-base);
}

/* Prevent images from overflowing */
/* By default, adding an image in a Question Record causes the image to display at full size.
   This adjustment should constrain them
*/
img {
    max-width: 100%;
}

/* Sticky Footer */
/* These selectors define a "sticky footer" that works in all browsers
   A "sticky footer" places the footer at the bottom of the browser window if the page is short
   But places the footer in a normal scrolling position if the page is large enough to scroll
*/

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
footer.footer,
header,
nav.navigation {
    flex-grow: 0;
    flex-shrink: 0;
}
main {
    flex-grow: 1;
    flex-shrink: 0;
}

/* icon */
/* Wrap around Font-Awesome icons to adjust their alignment */
.icon {
    margin: 0 0.125em;
    height: 1em;
    width: 1em;
}
.icon:before {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* aria-only */
/* Place this class on any code that should be read by assistive devices, but not display on the webpage */

.aria-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    padding: 0;
    position: absolute;
    height: 1px;
    width: 1px;
}

.container {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    max-width: 800px;
}
@media (min-width: 990px) {
    .container {
        max-width: 1050px;
    }
}

/* Header */
/* I created all of the header markup in STLPR.master */
header {
    background-color: #234093;
    background-color: var(--color-primary-darker);
    overflow: hidden;
}
header .container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
@media (min-width: 770px) {
    header .container {
        align-items: flex-start;
        flex-flow: column nowrap;
    }
}
.header_logo {
    margin: 0.75rem 0;
    width: 100%;
    height: auto;
    max-height: 32px;
    max-height: 2rem;
    fill: #fff;
}
@media (min-width: 770px) {
    .header_logo {
        margin: 0.75rem 0;
        max-height: 3rem;
    }
}
@media (min-width: 770px) {
    .navigation {
        background-color: #237bbd;
        background-color: var(--color-primary);
        color: #fff;
        margin-top: -1.75rem;
        margin-left: auto;
        position: relative;
    }
    .navigation:after {
        background-color: #237bbd;
        background-color: var(--color-primary);
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;
        width: 50vw;
        z-index: 1000;
    }
}
.navigation_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #237bbd;
    background: var(--color-primary);
    border: none;
    border-radius: 0;
    border-radius: var(--border-radius);
    color: #fff;
    color: var(--text-color-inverse);
    cursor: pointer;
    transition: 0.125s ease;
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
}
.navigation_button:hover {
    color: #fff;
    color: var(--text-color-inverse);
    background: #000;
}
@media (min-width: 770px) {
    .navigation_button {
        display: none;
    }
}
.navigation ul {
    background-color: #e6e7e8;
    display: flex;
    flex-direction: column;
    font-size: 0;
    list-style-type: none;
    margin: 0.75rem 0 0;
    padding: 0.5em 0;
    opacity: 0;
    position: absolute;
    right: 0;
    left: 0;
    transition: 0.325s ease;
}
@media (min-width: 770px) {
    .navigation ul {
        background: none;
        flex-direction: row;
        font-size: 1rem;
        margin: 0;
        opacity: 1;
        padding: 0;
        position: static;
        transition: none;
    }
}
.navigation_button.is-active + ul {
    font-size: 1em;
    opacity: 1;
}
@media (min-width: 770px) {
    .navigation li {
        cursor: pointer;
        padding: 0.25rem;
        transition: 0.3s;
    }
    .navigation li:hover {
        background: #000;
    }
}
.navigation_link {
    color: inherit;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25em 0.75em 0.25em 1em;
}
.navigation_link:after {
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    margin-right: 1em;
}
.navigation_link:hover {
    color: #234093;
    color: var(--color-primary-darker);
}
@media (min-width: 770px) {
    .navigation_link {
        display: block;
        font-family: acumin-pro, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        font-family: var(--font-base);
        font-size: 0.875rem;
        overflow: hidden;
        margin: 0 0.625rem;
        padding: 0 0 3px;
        position: relative;
        transition: 0.125s ease;
    }
    .navigation_link:after {
        display: none;
    }
    .navigation_link:hover {
        color: inherit;
    }
}

/* Footer Styles */
/* I created all of the footer markup in STLPR.master */
#footer {
    background-color: #1e1e1f;
    color: #fff;
}
#footer a,
#footer a:hover {
    color: currentColor;
}
#footer a:hover {
    opacity: 0.7;
    text-decoration: none;
}
#footer small {
    font-size: 1em;
}
#footer .footer_logo {
    fill: #fff;
    margin-right: 1rem;
    width: 100%;
    max-width: 240px;
}
#footer .footer_content {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    max-width: 1200px;
}
@media (min-width: 770px) {
    #footer .footer_content {
        flex-direction: row;
    }
}
#footer .footer_aside {
    flex-shrink: 0;
    flex-grow: 0;
    margin-top: 0.5rem;
    padding-left: 1rem;
    width: 100%;
    max-width: 350px;
}
@media (min-width: 990px) {
    #footer .footer_aside {
        padding-left: 0;
    }
}
#footer .footer_tax_id {
    display: block;
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
    font-size: 24px;
    font-size: 1.5rem;
    margin: 1.25rem 0;
}
#footer .footer_tax_id em {
    font-weight: 700;
    font-style: normal;
}
#footer .footer_copyright {
    font-size: 16px;
    font-size: 1rem;
}
#footer .footer_nav {
    width: 100%;
    padding: 0.5rem 1rem;
}
@media (min-width: 770px) {
    #footer .footer_nav {
        padding: 0 2.5rem;
    }
}
#footer .footer_links {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 2.5;
    list-style-type: none;
    padding-bottom: 0.5rem;
    padding-left: 0;
    width: 100%;
}
@media (min-width: 770px) {
    #footer .footer_links {
        column-count: 2;
    }
}
#footer .footer_umsl_attribution {
    display: flex;
    align-items: flex-start;
    margin: 0.625rem 0;
}
#footer .footer_umsl_attribution svg {
    fill: currentColor;
    position: relative;
    top: 3px;
    height: 30px;
    height: 1.875rem;
}
#footer .footer_umsl_attribution small {
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.2;
    margin-left: 0.625rem;
    max-width: 46ch;
}
#footer .footer_umsl_attribution a {
    opacity: 1;
}
#footer .footer_umsl_attribution a:hover {
    opacity: 0.8;
}
#footer .footer_umsl_attribution small a {
    text-decoration: underline;
}
#footer .footer_umsl_attribution small a:hover {
    text-decoration: none;
    opacity: 1;
}

/* #theme is placed on the <main> tag in STLPR.master
   It serves a couple of purposes:

   1. It adds "Specificity" to the selectors, so they're guaranteed to override default Allegiance styling
   2. Because styles are scoped to #theme, these changes only apply if the correct master page is used
*/

#theme {
    padding: 0 1rem;
}
@media (min-width: 575px) {
    #theme {
        padding: 2rem 1.5rem;
    }
}
@media (min-width: 770px) {
    #theme {
        padding: 2.5rem 0.75rem;
    }
}
#theme form {
    margin: 0 auto;
    width: 750px;
    max-width: 100%;
}
#theme font[size="3"] {
    font-weight: 400;
}
#theme .ALLEGHEADERS h2,
#theme .ALLEGSECTIONS h2,
#theme font[size="5"] {
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
}
#theme .ALLEGHEADERS h2,
#theme .ALLEGSECTIONS h2 {
    margin-top: 2rem;
}
@media (min-width: 375px) {
    #theme .ALLEGHEADERS h2,
    #theme .ALLEGSECTIONS h2 {
        margin-top: 3rem;
    }
}
#theme .MAINTABLE .required-field:after {
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    color: #f26a5b;
    color: var(--color-highlight);
    font-size: 8px;
    font-size: 0.5rem;
    margin-left: 0.25rem;
    position: relative;
    top: -2px;
    top: -0.125rem;
}
#theme .MAINTABLE .required-field img[src*="Required"],
#theme .MAINTABLE .required-field img[src*="required"] {
    display: none;
}
#theme textarea {
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    width: 100% !important;
    min-height: 80px !important;
}
#theme textarea:focus {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_ALLEGOTHERAMT {
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    margin-right: 0.25rem;
    width: 136px !important;
    width: 8.5rem !important;
}
#theme #ctl00_AllegMain_ALLEGOTHERAMT:focus {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS input {
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    width: 100% !important;
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS input:focus {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_PREMIUMDROPDOWN {
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    padding: 0.5rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTcuNDEgOC41OUwxMiAxMy4xN2w0LjU5LTQuNThMMTggMTBsLTYgNi02LTYgMS40MS0xLjQxeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMFYweiIvPjwvc3ZnPg==");
    background-position: 98% 50%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0.75rem 0 0;
    width: 100% !important;
}
#theme #ctl00_AllegMain_PREMIUMDROPDOWN:focus {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_PREMIUMDROPDOWN::-ms-expand {
    display: none;
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS select {
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTcuNDEgOC41OUwxMiAxMy4xN2w0LjU5LTQuNThMMTggMTBsLTYgNi02LTYgMS40MS0xLjQxeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMFYweiIvPjwvc3ZnPg==");
    background-position: 98% 50%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100% !important;
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS select:focus {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS select::-ms-expand {
    display: none;
}
#theme #ctl00_AllegMain_btnExit,
#theme #ctl00_AllegMain_btnSubmit {
    background: #f26a5b;
    background: var(--color-highlight);
    border: 1px solid #f26a5b;
    border: 1px solid var(--color-highlight);
    border-radius: 0;
    border-radius: var(--border-radius);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-size: 1.25rem;
    font-family: acumin-pro, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-base);
    margin-top: 1rem;
    padding: 0.5em 1em;
    margin-bottom: 1rem;
}
#theme #ctl00_AllegMain_btnExit:hover,
#theme #ctl00_AllegMain_btnSubmit:hover {
    background: #d62021;
    background: var(--color-highlight-darker);
}
#theme #ctl00_AllegMain_MODETABLE input[type="radio"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
#theme #ctl00_AllegMain_MODETABLE input[type="radio"] + label:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5rem #fff;
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    position: absolute;
    left: 0;
    transition: 0.25s ease;
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
}
#theme #ctl00_AllegMain_MODETABLE input[type="radio"] + label:hover:before {
    border-color: #237bbd;
    border-color: var(--color-primary);
}
#theme #ctl00_AllegMain_MODETABLE td:focus-within input[type="radio"] + label:before {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_MODETABLE input[type="radio"]:checked + label:before {
    background-color: #237bbd;
    background-color: var(--color-primary);
    border-color: #234093;
    border-color: var(--color-primary-darker);
    box-shadow: inset 0 0 0 0.125rem #fff;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] + label {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] + label:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    background-color: #fff;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5rem #fff;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    margin-right: 0.5rem;
    transition: 0.25s ease;
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"]:checked + label:before {
    background-color: #237bbd;
    background-color: var(--color-primary);
    border-color: #234093;
    border-color: var(--color-primary-darker);
    box-shadow: inset 0 0 0 0.125rem #fff;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] + label:hover:before {
    border-color: #237bbd;
    border-color: var(--color-primary);
}
#theme td:focus-within #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] + label:before {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] + label {
    display: flex;
    align-items: center;
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] + label:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    background-color: #237bbd;
    background-color: var(--color-primary);
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 0.75rem #fff;
    color: #fff;
    cursor: pointer;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 12px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    transition: 0.25s ease;
    height: 24px;
    height: 1.5rem;
    width: 24px;
    width: 1.5rem;
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"]:checked + label:before {
    border-color: #237bbd;
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 0.125rem #fff;
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] + label:hover:before {
    border-color: #237bbd;
    border-color: var(--color-primary);
}
#theme td:focus-within [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] + label:before {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme [id^="ctl00_AllegMain_generateQuestion"] input[type="checkbox"] + label {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#theme #PremiumCart {
    margin: 2rem auto 0;
    width: 100% !important;
}
#theme #PremiumCart tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 1;
}
#theme #PremiumCart tr:last-child {
    flex-wrap: nowrap;
    padding-top: 0.5rem;
}
#theme #PremiumCart th {
    display: none;
    width: auto !important;
}
#theme #PremiumCart th:first-child {
    display: flex;
    align-items: center;
    width: 100%;
}
#theme #PremiumCart td:first-child {
    width: 100%;
    padding-top: 0.875rem;
}
#theme #PremiumCart td:nth-child(2) {
    flex-grow: 1;
}
@media (min-width: 575px) {
    #theme #PremiumCart {
        background: #fff;
        border: none;
        border-radius: 0;
        border-radius: var(--border-radius);
        box-shadow: 0 0 0 1px #caccce;
        box-shadow: 0 0 0 1px var(--border-color);
    }
    #theme #PremiumCart caption {
        display: none;
    }
    #theme #PremiumCart tbody {
        width: 100%;
    }
    #theme #PremiumCart tr:last-child {
        border-top: 1px solid #caccce;
        border-top: 1px solid var(--border-color);
    }
    #theme #PremiumCart th {
        border: none;
        padding: 1rem 0.75rem 0.5rem;
    }
    #theme #PremiumCart td {
        border: none;
        padding: 0.375rem 0.75rem;
    }
    #theme #PremiumCart tr:nth-child(2n) td {
        background-color: #fbfbfb;
    }
    #theme #PremiumCart tr:last-child td {
        background: none;
        font-weight: 700;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    #theme #PremiumCart th:nth-child(3) {
        font-size: 0;
    }
    #theme #PremiumCart td:nth-child(4) {
        display: none;
    }
    #theme #PremiumCart input[type="button"] {
        background: none;
        border: 1px solid #234093;
        border: 1px solid var(--color-primary-darker);
        color: var(--color-primary-darker);
        color: #234093;
        cursor: pointer;
        font-size: 0.875rem;
        padding: 0.25em 0.5em;
    }
    #theme #PremiumCart input[type="button"][value="View"] {
        display: none;
    }
    #theme #PremiumCart input[type="button"]:hover {
        border-color: #000;
        color: #000;
    }
}
#theme #PremiumCart th {
    text-align: left;
}
#theme #PremiumCart th:first-of-type:before {
    content: "";
    font-family: Font Awesome\5 Free;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: #234093;
    color: var(--color-primary-darker);
    display: inline-block;
    font-size: 16px;
    font-size: 1rem;
    margin-right: 0.5rem;
    padding: 0.25em;
}
#theme #ctl00_AllegMain_MODETABLE label {
    cursor: pointer;
    display: block;
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
}
#theme #ctl00_AllegMain_MODETABLE .paySustaining {
    background-color: #e6e7e8;
    border-radius: 0;
    border-radius: var(--border-radius);
    margin-right: 0.375em;
    padding: 0.125em 0.25em;
}
#theme #ctl00_AllegMain_MODETABLE .payDesc {
    display: block;
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
    font-size: 1.5em;
}
@media (min-width: 375px) {
    #theme #ctl00_AllegMain_MODETABLE .payDesc {
        display: inline;
    }
}
#theme #ctl00_AllegMain_MODETABLE .paySubRec {
    color: #f26a5b;
    color: var(--color-highlight);
    display: block;
    font-weight: 700;
    line-height: 0.25;
    margin-top: 0.625rem;
    margin-bottom: 0.75rem;
}
#theme #ctl00_AllegMain_lblProcess {
    font-style: italic;
    padding-left: 0.75rem;
}
#theme #ctl00_AllegMain_lblProcess,
#theme #ctl00_AllegMain_tblPayInfo {
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
}
#theme #ctl00_AllegMain_tblPayInfo {
    border: 2px solid #234093;
    border: 2px solid var(--color-primary-darker);
    border-radius: 0;
    border-radius: var(--border-radius);
    color: #000;
    font-size: 18.72px;
    font-size: 1.17rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
    width: 100%;
}
#theme #ctl00_AllegMain_tblPayInfo td {
    padding: 2rem 1rem;
    text-align: center;
}
#theme #ctl00_AllegMain_SECTIONNAMEADDRESS {
    max-width: 480px;
    max-width: 30rem;
}
#theme #ctl00_AllegMain_UPGRADETABLE {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 3rem;
    position: relative;
}
#theme #ctl00_AllegMain_UPGRADETABLE tr {
    display: inline;
    vertical-align: top;
}
#theme #ctl00_AllegMain_UPGRADETABLE td {
    display: inline-block;
    width: 100%;
}
@media (min-width: 575px) {
    #theme #ctl00_AllegMain_UPGRADETABLE td {
        width: 49%;
    }
}
@media (min-width: 770px) {
    #theme #ctl00_AllegMain_UPGRADETABLE td {
        width: 33%;
    }
}
#theme #ctl00_AllegMain_UPGRADETABLE .paySubRecKW {
    display: block;
    font-weight: 400;
}
#theme #ctl00_AllegMain_UPGRADETABLE label {
    display: block;
}
#theme #ctl00_AllegMain_UPGRADETABLE input[value="ALLEGOTHER"] + label {
    position: absolute;
    bottom: -5px;
    left: 5px;
}
#theme #ctl00_AllegMain_UPGRADETABLE input:not([value="ALLEGOTHER"]) {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
#theme #ctl00_AllegMain_UPGRADETABLE input:not([value="ALLEGOTHER"]) + label {
    background-color: #237bbd;
    background-color: var(--color-primary);
    border: 1px solid #caccce;
    border: 1px solid var(--border-color);
    background-clip: padding-box;
    border-radius: 0;
    border-radius: var(--border-radius);
    box-shadow: inset 265px 0 0 #fff, inset -265px 0 0 #fff;
    cursor: pointer;
    font-weight: 700;
    margin: 5px;
    overflow: hidden;
    padding: 0.5rem;
    position: relative;
    text-align: center;
}
#theme #ctl00_AllegMain_UPGRADETABLE input:checked:not([value="ALLEGOTHER"]) + label {
    border-color: #237bbd;
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 #fff, inset 0 0 0 #fff;
    color: #fff;
    transition: 0.25s ease;
}
#theme #ctl00_AllegMain_UPGRADETABLE input:not([value="ALLEGOTHER"]) + label:hover {
    border-color: #237bbd;
    border-color: var(--color-primary);
}
#theme #ctl00_AllegMain_UPGRADETABLE td:focus-within input:not([value="ALLEGOTHER"]) + label {
    outline: 2px solid rgba(4, 163, 187, 0.44);
}
#theme #ctl00_AllegMain_ALLEGOTHERAMTROW {
    margin-bottom: 2rem;
}

/* Anything starting with .question or .well are custom classes I built for use in Question Records */
.question h1,
.question h2,
.question h3,
.question h4,
.question h5,
.question h6 {
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.question-title,
.question > h3 {
    color: #234093 !important;
    color: var(--color-primary-darker) !important;
    font-family: utopia-std, Georgia, Apple Garamond, "Droid Serif", "Source Serif Pro", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-family: var(--font-headline);
    font-size: 20px !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
}

.question-images {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.question-images img {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
    object-fit: cover;
    max-height: 175px;
    width: 100%;
}

@media (min-width: 575px) {
    .question-images img {
        object-fit: contain;
        max-height: auto;
        width: 32%;
    }
}

.well {
    background: #fff;
    border: 1px solid #caccce;
    border-left: 5px solid #234093;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--color-primary-darker);
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1rem;
}

.well > :first-child {
    margin-top: 0;
}

.question .alert {
    background: #e6e7e8;
    margin-bottom: 1rem;
    padding: 2rem;
}

.question .alert > :first-child {
    margin-top: 0;
}

.question .button,
.question button {
    background: #237bbd;
    background: var(--color-primary);
    padding: 0.5rem 1rem;
    display: inline-block;
    color: #fff;
    margin-top: 0.5rem;
    font-weight: 700;
    text-decoration: none;
}
.question .button:hover,
.question button:hover {
    background: #237bbd;
    background: var(--color-primary);
}

/* Customizations for specific pages */
/* This comes from the "Track current page" JavaScript in STLPR.master */
[data-code="PS20INCW"] #PremiumCart td:nth-child(2),
[data-code="PS20INCW"] #PremiumCart th:nth-child(2),
[data-code="SUSINC"] #PremiumCart td:nth-child(2),
[data-code="SUSINC"] #PremiumCart th:nth-child(2) {
    display: none;
}

@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .question-images {
        max-height: 500px;
        overflow: hidden;
    }
    #theme #PremiumCart {
        border-collapse: separate !important;
    }
}

STLPR.master

<%@ Master Language="C#" %>

<!DOCTYPE html>
<html lang="en-US">

<head runat="server">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="https://www.stlpublicradio.org/favicon.ico">
    <title>Support St. Louis Public Radio</title>

    <script> // STLPR Custom Analytics Bundle
    (function(d,s,h){var e=d.createElement(s);e.async=true;e.src=h;d.querySelector(s).insertAdjacentElement("beforebegin",e)})(document,"script","https://www.stlpublicradio.org/stlpr-analytics-bundle.js")
    </script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
    <link rel="stylesheet" href="https://use.typekit.net/det1xcl.css">

    <asp:ContentPlaceHolder id="AllegHead" runat="server"></asp:ContentPlaceHolder>

    <link rel="stylesheet" href="https://www.stlpublicradio.org/external/stylesheets/pledge-pages.css">
</head>

<body runat="server">
  <header class="header">
    <div class="container">
      <a href="https://www.stlpublicradio.org/" aria-label="St. Louis Public Radio">
        <svg class="header_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 35.47" preserveAspectRatio="xMinYMin meet">
          <polygon points="16.44 10.64 16.44 17.74 16.44 24.83 17.62 24.83 17.62 17.74 17.62 10.64 16.44 10.64"></polygon>
          <polygon points="36.16 7.1 36.16 17.73 36.16 28.38 37.35 28.38 37.35 17.73 37.35 7.1 36.16 7.1"></polygon>
          <polygon points="51.54 0 51.54 17.75 51.54 35.47 52.72 35.47 52.72 17.75 52.72 0 51.54 0"></polygon>
          <polygon points="74.02 7.1 74.02 17.73 74.02 28.38 75.21 28.38 75.21 17.73 75.21 7.1 74.02 7.1"></polygon>
          <path d="M42.72 3.55h3.47v21.28h-3.47V3.55zM60.83 23.45v4.95h-3.47V10.65h2.83l.31 1.85a4.8 4.8 0 014.3-2.22c4.08 0 5.58 3.09 5.58 7.37v.18c0 4.25-1.5 7.37-5.58 7.37a4.85 4.85 0 01-3.97-1.75zm0-3.51c.45.7 1.38 2 2.93 2 2.08 0 3.14-1.55 3.14-4.16v-.18c0-2.62-1.06-4.19-3.14-4.19a3.32 3.32 0 00-2.93 2.09zM6.38 22.06a4.21 4.21 0 01-4-2.08L0 22a7.13 7.13 0 006.21 3.21c4.11 0 6.18-2.24 6.18-5 0-2.15-1.52-3.61-4.72-4.31l-1.54-.38c-1.38-.32-1.78-.92-1.78-1.41 0-1 1.15-1.31 2-1.31a4.13 4.13 0 013.5 1.58l2.17-2.17a7.51 7.51 0 00-5.54-2.53c-3.44 0-5.7 2-5.7 4.65 0 2.28 1.39 3.73 4.73 4.41l1.34.26c1.45.32 2 .95 2 1.46 0 1-.9 1.58-2.43 1.58M90 11.38a4.9 4.9 0 00-3-1.1 4.77 4.77 0 00-4 2.17l-.31-1.8h-2.84v14.18h3.47v-8.67a3.63 3.63 0 013.49-2.47 3.47 3.47 0 012 .47zM31.35 21.88a6.55 6.55 0 01-1.71.3c-1.52 0-2.42-.25-2.42-2.42v-5.91h4.18v-3.2h-4.18V7.1h-2.36l-1.12 3.55-2.59.74v2.46h2.59V20c0 3.85 2 5.23 5 5.23a10.35 10.35 0 003.26-.7z"></path>
        </svg>
      </a>

      <nav class="navigation">
        <span class="aria-only">Menu</span>
        <button class="navigation_button" aria-hidden="true">
          <i class="fas fa-bars icon"></i>
        </button>
        <ul>
          <li><a class="navigation_link" href="https://stlpr.org/increase">Increase Sustaining Gift</a></li>
          <li><a class="navigation_link" href="https://stlpr.org/update">Update Payment Information</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="theme">
    <form id="form1" runat="server">
      <asp:ContentPlaceHolder id="AllegMain" runat="server"></asp:ContentPlaceHolder>
    </form>
  </main>

<footer id="footer">
  <div class="container footer_content">
    <section class="footer_aside">
      <a href="https://www.stlpublicradio.org/" aria-label="St. Louis Public Radio">
        <svg class="footer_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 75.4">
          <title>St. Louis Public Radio</title>
          <path transform="translate(-16.5 -14)" d="M1016.5 61.7c0 16-9.5 27.6-26.2 27.6-16.3 0-25.8-11.6-25.8-27.3 0-16.2 9.8-27.7 26.5-27.7 15.5 0 25.5 11 25.5 27.4zm-37.2.1c0 10.2 4.3 16.2 11.3 16.2s11.1-6 11.1-16c0-11-4-16.2-11.3-16.2-6.7-.1-11.1 4.9-11.1 16zM940 14h14.5v13h-14.6zm0 21.5h14.5v52.6h-14.6zM927 14v59.7l.1 14.4h-14a63 63 0 01-.7-5.5c-2.5 4.2-7 6.8-14.9 6.8-13.3 0-21.8-10.7-21.8-27.2 0-16.1 9-28 24-28 7.5 0 11.6 2.7 12.7 5V14zm-36.3 47.9c0 10.2 4 15.8 11.1 15.8 10 0 11.2-8.4 11.2-16 0-9-1.3-15.7-10.8-15.7-7.7 0-11.5 6-11.5 15.9zM865.8 74.5a119.6 119.6 0 00.7 13.6h-13.9a21.6 21.6 0 01-.7-5.1c-2 3-5.5 6.4-14.8 6.4-12.7 0-18-8.4-18-16.5 0-12 9.6-17.6 25-17.6h7.6v-3.2c0-3.7-1.4-7.4-8.1-7.4-6.2 0-7.5 2.6-8.2 6.4h-13.9c.8-9.3 6.6-16.9 22.6-16.8 14 0 21.7 5.6 21.7 18.1zm-14.2-10.3h-5.9c-8.8 0-12 2.7-12 7.7 0 3.8 2.3 7 7.6 7 9.2 0 10.4-6.4 10.4-13.4zM771.5 60v28.1h-14.8v-70h30.8c15.3 0 23.5 8.4 23.5 19.2 0 9.4-5.1 14.5-10.2 16.6 3.5 1.2 8.7 4.9 8.7 17.4v3.5c0 4.7 0 10 1 13.3h-14.3a49 49 0 01-1.5-15.7v-1c0-7.7-2-11.3-13.2-11.3zm0-12h12.7c8.3 0 11.5-3.1 11.5-9 0-5.7-3.7-8.9-11.1-8.9h-13zM724 71.1c-1.8 8.8-8 18.3-23.7 18.3-16.3 0-24.8-11.4-24.8-27.2 0-15.5 9.5-28 25.5-28 17.8 0 22.7 12.8 23 18.8h-14.2c-1-4.3-3.3-7.3-9-7.3-6.7 0-10.4 5.8-10.4 16 0 11.2 4 16.3 10.3 16.3 5 0 7.7-3 9-7zM650.8 14h14.6v13h-14.6zm0 21.5h14.6v52.6h-14.6zM623.1 88.1V14h14.6v74.2zM562 14h14.6V41c2.2-3.4 6.5-6.8 15-6.8 14.4 0 21.5 11.8 21.5 26.6 0 15-7.7 28.4-22.8 28.4-7.9 0-11.3-2.3-13.9-6.2a26 26 0 01-.5 5H562l.1-17.2zm36.4 47.2c0-8.8-3.3-15.2-11.2-15.2C579 46 576 51.4 576 62c0 8.9 2.6 15.7 11.1 15.7 7.4 0 11.3-6.7 11.3-16.6zM549 72.8v15.3h-14.3c-.2-1.4-.3-4.2-.3-6-3.2 5.2-7.8 7.3-14.5 7.3-10.7 0-17.6-6.6-17.6-19.6V35.5H517V67c0 5.8 1.8 10.6 8 10.6 6.7 0 9.5-3.6 9.5-14v-28h14.5zM439.2 18h29c15 0 25 8.4 25 21.8C493.2 55 481.7 62 468 62h-13.5v26.1h-15.2zM454.4 50H466c7 0 12-2.7 12-9.9s-5.2-9.9-11.7-9.9h-11.9zM373.1 72.3c1.1 4.2 4.6 6.6 10 6.6s7.4-2 7.4-5.2c0-3.3-2.3-4.7-9.8-6.5-17.2-4.2-20-9.5-20-17 0-7.7 5.5-16 21.4-16s21.3 8.8 21.8 16H390c-.5-2-1.8-5.7-8.6-5.7-4.8 0-6.4 2.2-6.4 4.5 0 2.6 1.6 3.9 10.2 5.9 17.5 4 20 10 20 17.8 0 8.7-6.6 16.7-22.7 16.7s-22.6-7.8-23.7-17zM335.3 14h14.5v13h-14.5zm0 21.5h14.5v52.6h-14.5zM322.1 72.8l.1 15.3H308c-.2-1.4-.3-4.2-.4-6-3.1 5.2-7.8 7.3-14.5 7.3-10.7 0-17.6-6.6-17.6-19.6V35.5h14.6V67c0 5.8 1.8 10.6 8.1 10.6 6.7 0 9.4-3.6 9.4-14v-28h14.6zM265.8 61.7c0 16-9.5 27.6-26.2 27.6-16.3 0-25.8-11.6-25.8-27.3 0-16.2 9.8-27.7 26.5-27.7 15.5 0 25.5 11 25.5 27.4zm-37.3.1C228.5 72 233 78 240 78S251 72 251 62c0-11-4-16.3-11.3-16.3-6.7 0-11.2 5-11.2 16.1zM160.5 18h15.1v57.7h35l-1.8 12.4h-48.3zM119.3 88.1V70.3h15.6V88zM78 35.5h8V21.3h14.6v14.2h10.3v11h-10.3v26c0 4 1.2 5.5 5.6 5.5a27 27 0 003.3-.1v10c-2.9 1-6.9 1-9.8 1C89.4 88.9 86 83.3 86 74V46.6h-8zM31.8 67.6c1.6 7 6.6 10.1 14.7 10.1s11.6-3.2 11.6-8.3c0-5.7-3.4-8.2-15.4-11C23.7 53.9 19 47 19 37.5 19 25.3 28.1 17 44.7 17c18.6 0 26 10 27 20.3H56.4c-.7-4.4-3-9-12.1-9-6.2 0-9.9 2.5-9.9 7.5s3 6.8 14.3 9.5C69.1 50 73.6 57.5 73.6 67.5c0 12.8-9.7 21.6-28.2 21.6-17.8 0-27.2-8.8-28.9-21.5z"></path>
        </svg>
      </a>

      <small class="footer_tax_id">
        Tax ID: <em>26-6440629</em>
      </small>

      <small class="footer_copyright">
        &copy;
        <script>document.write((new Date()).getFullYear())</script>
        St. Louis Public Radio
      </small>
    </section>

    <section class="footer_nav">
      <ul class="footer_links">
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/about/">About Us</a>
        </li>
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/careers/">Careers</a>
        </li>
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/contact/">Contact Us</a>
        </li>
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/enewsletter">Newsletters</a>
        </li>
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/privacy-policy/">Privacy Policy</a>
        </li>
        <li class="footer_link">
          <a href="https://news.stlpublicradio.org/public-file/">Public File</a>
        </li>
      </ul>

      <div class="footer_umsl_attribution">
        <a href="https://www.umsl.edu">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 648 296.4">
            <path d="M648 255.8v38.9c-1 .3-120 .4-122.3.1V1.3h58.9v254.4c2 .2 3.9.1 5.8.1H648zM445.3 0l1.5.2c5.4.3 10.7.5 16 1 7.4.7 14.7 1.8 21.5 4.6a31.7 31.7 0 0 1 7.2 4 26.3 26.3 0 0 1 9.3 13.6 61.3 61.3 0 0 1 2.3 12.3c.7 6.9.8 13.7.8 20.6v45h-59v-1.9-57.1a25 25 0 0 0-.4-4.5 7.4 7.4 0 0 0-6.4-6.3 17.3 17.3 0 0 0-7.3.1 6.3 6.3 0 0 0-5 5.3 27.6 27.6 0 0 0-.6 5.1v60.5a44.7 44.7 0 0 0 .4 5.6 7.6 7.6 0 0 0 3 5 24.4 24.4 0 0 0 4.4 3q6.4 3 12.9 5.7l30.2 12.5a64.1 64.1 0 0 1 15.5 8.6 30.4 30.4 0 0 1 11.6 20.4 81.8 81.8 0 0 1 .7 11.5V241c0 5.7-.3 11.3-.6 17a66.2 66.2 0 0 1-2.2 14.2 26.6 26.6 0 0 1-17 18.7 69.3 69.3 0 0 1-15.3 3.7 217.7 217.7 0 0 1-30 1.8c-7.6 0-15.1 0-22.6-.4a107.7 107.7 0 0 1-25-3.4 57 57 0 0 1-5.6-1.9 26.5 26.5 0 0 1-16.6-18.6 67.3 67.3 0 0 1-2-11.5c-.6-6.2-.7-12.4-.7-18.7v-71h58.8l.1 1.7v81.2a32.2 32.2 0 0 0 .4 5.4c.7 3.8 2.6 5.7 6.3 6.2a20.3 20.3 0 0 0 5.7 0c4.2-.6 6.5-3.3 7-7.6a28.2 28.2 0 0 0 .3-3.5v-78c0-1.3 0-2.6-.2-4a8.3 8.3 0 0 0-3.5-6.4 32.5 32.5 0 0 0-5.3-3.2c-6-2.7-12-5.2-18.1-7.8l-24.3-10a64.5 64.5 0 0 1-13.1-7 47.4 47.4 0 0 1-5.5-4.6c-4.7-4.5-7-10.2-8-16.5a76.7 76.7 0 0 1-.7-11V54c0-6 .1-12 .7-18a56.8 56.8 0 0 1 3-14.8 25.3 25.3 0 0 1 13-14.3 52.3 52.3 0 0 1 13.5-4.2 134 134 0 0 1 18.6-2l7.8-.4 1.7-.3zM297.8 117.7H292l-25 177.1h-28l-25-177.1h-5.7c-.3 1 .6 31.4 1 44.3.6 14.7.9 29.5 1.4 44.2l1.3 44.3 1.3 44.1c-1 .4-48.3.6-51.7.2-.3-1-.3-291.7 0-293.5h65.1l24.1 134h4.3l24.6-134h65.2c.2 1 .3 292 0 293.5H293l2.5-88.5 2.3-88.6zM0 1.2h59a8.3 8.3 0 0 1 .1 1v251.1a31.5 31.5 0 0 0 .4 5.4c.7 4 2.8 6 6.7 6.7a20.2 20.2 0 0 0 5.8 0c3.9-.6 6-3 6.6-7.2a31.8 31.8 0 0 0 .2-4V1.3h59.5v241.2c0 6-.1 12-.7 18.1a60.9 60.9 0 0 1-2.5 13 26.3 26.3 0 0 1-14.8 16.5 57 57 0 0 1-13.4 4 151.5 151.5 0 0 1-20.3 2.1c-9.5.4-19 .4-28.5.2a189.4 189.4 0 0 1-23.2-1.7 66.8 66.8 0 0 1-15.9-4 25.6 25.6 0 0 1-15.7-17 67.7 67.7 0 0 1-1.6-6.6c-1-5-1-10-1.4-15l-.3-1.7V1.2z"></path>
          </svg>
        </a>
        <small>
          St. Louis Public Radio is a listener-supported service of the
          <a href="https://www.umsl.edu">University of Missouri&ndash;St. Louis</a>.
        </small>
      </div>
    </section>
  </div>
</footer>

<script>
(function() {

    // Track current page
    var modulePath = window.location.pathname
    var webModule = modulePath.match(/([^/]+)\.aspx/)
    if (webModule) document.body.setAttribute('data-module', webModule[1])

    // Track current code
    var queryString = window.location.search
    var pageCode = queryString.match(/[?&]P=(\w+)/)
    if (pageCode) document.body.setAttribute('data-code', pageCode[1])

    // Make navigation button clickable
    var button = document.querySelector('.navigation_button')
    button.addEventListener('click', function() {
        button.classList.toggle('is-active')
    })

    // Add auto-complete information to form fields
    var fields = [
        { id: '#ctl00_AllegMain_wrkEsalu', autocomplete: 'name'           },
        { id: '#ctl00_AllegMain_wrkAddr',  autocomplete: 'street-address' },
        { id: '#ctl00_AllegMain_wrkCity',  autocomplete: 'address-level2' },
        { id: '#ctl00_AllegMain_wrkState', autocomplete: 'address-level1' },
        { id: '#ctl00_AllegMain_wrkZip',   autocomplete: 'postal-code'    },
        { id: '#ctl00_AllegMain_wrkPhone', autocomplete: 'tel'            },
        { id: '#ctl00_AllegMain_wrkEmail', autocomplete: 'email'          },
    ]

    for (var i = 0; i < fields.length; i += 1) {
        var field = fields[i]
        var target = document.querySelector(field.id)
        if (target) target.setAttribute('autocomplete', field.autocomplete)
    }

})()
</script>
</body>
</html>