Skip to content

Instantly share code, notes, and snippets.

@ricealexander

ricealexander/STLPR.master

Created June 4, 2021 19:49
Show Gist options
  • Save ricealexander/1f896a3155d48e2ed3cd244d30c2dcb0 to your computer and use it in GitHub Desktop.
Save ricealexander/1f896a3155d48e2ed3cd244d30c2dcb0 to your computer and use it in GitHub Desktop.
Download ZIP
Allegiance Pledge Pages (stlpr.org/donate)
Raw
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;
}
}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment