tag wrapping the fields when there is an even number of form elements and so the submit button is centered below the fields. */
.css-columns {
width: 100% !important;
}
.two.css-columns {
column-count: 2;
column-width: 215px;
}
.three.css-columns {
column-width: 230px;
column-count: 3;
}
.four.css-columns {
column-width: 245px;
column-count: 4;
}
/* Render buttons within css-columns at full width */
.css-columns button, .css-columns input[type="submit"] {
width: 100%;
}
@media screen and (max-width: 567px) {
.css-columns {
padding-left: 15vw;
padding-right: 15vw;
}
}
form *:not(.buttonHolder) .g-recaptcha {
margin: 35px 0 0 0;
display: flex;
justify-content: center;
}
/********************************** ALERT BOX ************************************/
.alert-box {
font-family: "Open Sans";
padding: calc(8px + 0.25vw) calc(12px + 0.25vw);
margin-bottom: calc(10px + 1.25vw);
border-radius: 2px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
/* box-shadow: 4px 4px 12px #888888; */
}
.alert-box.success {
background: green;
}
.alert-box i.fa-times {
cursor: pointer;
}
.call-to-action {
font-family: var(--menu-font-family);
font-weight: 700;
text-shadow: rgb(0 0 0 / 40%) 0px 4px 5px;
text-transform: uppercase;
text-align: center;
color: var(--text-light-1);
letter-spacing: 5px;
line-height: 1.6;
}
.call-to-action.line-1 {
font-size: calc(10px + 5vw);
}
.call-to-action.line-2 {
font-size: calc(4px + 3.5vw);
}
/*********************** Banner for pages other than home page ***********************/
#page_banner {
/* NOTE: background: url() is set in Wagtail settings */
/* Also, background-size: cover; AND background-position: center; had to be set in template. */
height: 15vmin;
margin-bottom: 5px;
}
/*********************** Storyboard ***********************/
/* NOTE: The Storyboard is typically shown on the home page, so the
tag is treated separately within the storyboard so that it can be used as the subject of the home. */
.storyboard {
/* ANOMALY: was putting 4 px of white space below image in storyboard section. */
margin-bottom: -4px;
}
.storyboard .slide {
display: flex;
width: 100%;
padding: 2vw;
background-size: cover;
background-position: center;
}
@media screen and (max-width:812px) {
.storyboard .slide {
min-height: 30vh;
}
}
@media screen and (min-width:813px) {
.storyboard .slide {
min-height: 38vh;
}
}
.storyboard .word-block {
padding: calc(5px + 1vw);
text-align: right;
}
.storyboard .word-block * {
text-shadow: -1px -1px 0 rgb(250, 246, 251), 1px -1px 0 rgb(250, 246, 251), -1px 1px 0 rgb(250, 246, 251), 1px 1px 0 rgb(250, 246, 251);
}
.storyboard .word-block h1 {
font-size: calc(16px + 1vw);
color: rgb(47,104,24);
margin: 0;
}
.storyboard .word-block p:nth-child(2) {
font-size: calc(12px + 1vw);
font-weight: bold;
line-height: 1.3;
color: rgb(84,47,29);
}
.storyboard .word-block p:nth-child(n+3), .storyboard .word-block p:nth-child(n+3) * {
font-size: calc(9px + 0.8vw);
font-weight: bold;
line-height: 1.2;
color: rgb(47,104,24);
}
.storyboard .slide.words-top-left {
align-items: flex-start;
justify-content: flex-start;
}
.storyboard .slide.words-top-center {
align-items: flex-start;
justify-content: center;
}
.storyboard .slide.words-top-right {
align-items: flex-start;
justify-content: flex-end;
}
.storyboard .slide.words-center-left {
-webkit-box-align: center;
align-items: center;
}
.storyboard .slide.words-center-center {
-webkit-box-align: center;
align-items: center;
}
.storyboard .slide.words-center-right {
-webkit-box-align: center;
align-items: center;
}
.storyboard .slide.words-bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.storyboard .slide.words-bottom-center {
align-items: flex-end;
justify-content: center;
}
.storyboard .slide.words-bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
/* Align words based upon location on the slide */
.storyboard .slide[class$="center"] .word-block > * {
text-align: center;
}
.storyboard .slide[class$="right"] .word-block > * {
text-align: right;
}
.storyboard .slide[class$="left"] .word-block > * {
text-align: left;
}
@media screen and (max-width:634px) {
.storyboard .slide {
align-items: center !important;
justify-content: center !important;
}
.storyboard .slide .word-block {
max-width: 75vw;
}
.storyboard .slide .word-block * {
text-align: center !important;
}
}
@media screen and (min-width:635px) and (max-width:785px) {
.storyboard .slide .word-block {
max-width: 48vw;
}
}
@media screen and (min-width:786px) and (max-width:999px) {
.storyboard .slide .word-block {
max-width: 46vw;
}
}
@media screen and (min-width:1000px) and (max-width:1199px) {
.storyboard .slide .word-block {
max-width: 40vw;
}
}
@media screen and (min-width:1200px) {
.storyboard .slide .word-block {
max-width: 37vw;
}
}
/*********************** summary_blocks ***********************/
#summary_blocks {
/* summary_blocks is made up of a general band-type-..., but don't want the top margin of 5px - want it against the storyboard */
margin-top: -5px;
}
@supports (display: grid) {
#summary_blocks {
height: unset;
}
}
/* NOTE: Add the following to have individual blocks within summary_blocks be wider when single column/small screen - won't align with footer blocks though */
/* @media screen and (max-width: 449px) {
#summary_blocks.blocks div {
padding: 0 5vw;
}
} */
/* The following is in a feature query because of a problem with IE. NOTE: Using display:grid to check whether browser is IE */
@supports (display:grid) {
#summary_blocks > div {
display: flex;
flex-direction: column;
}
}
#summary_blocks h2 { /* override h2 font size within summary_blocks */
font-size: calc(12px + 0.5vw);
text-transform: uppercase;
}
#summary_blocks > div img:not(.png-overlay) {
width: 90%;
height: auto;
}
a.img-link {
border-bottom: none;
}
/* Handle re-ordering of summary_blocks at the point at which stacking and doubling of four blocks occurs */
@media screen and (max-width: 991px) {
#summary_blocks > div:nth-of-type(1) {
order: 3 !important;
-ms-grid-column: 1;
}
#summary_blocks > div:nth-of-type(2) {
order: 1 !important;
-ms-grid-column: 1;
}
#summary_blocks > div:nth-of-type(3) {
order: 2 !important;
-ms-grid-column: 2;
}
#summary_blocks > div:nth-of-type(4) {
order: 4 !important;
-ms-grid-column: 2;
}
#summary_blocks > div img:not(.png-overlay) {
width: 100% !important;
}
}
.img-wrapper img {
width: 100%;
height: auto;
}
.img-wrapper .img-title {
font-family: 'Open Sans', sans-serif;
color: rgb(57,58,28);
font-size: calc(13px + 0.2vw);
line-height: 1.6;
text-align: center;
}
.sidebar .img-wrapper {
margin-bottom: calc(8px + 0.5vw);
}
/************************** FORM ERROR MESSAGES ***************************/
.errorlist {
margin-bottom: 5px;
color: red;
font-family: 'Open Sans', sans-serif;
font-size: calc(11px + 0.2vw);
}
/**************************** Django messages *****************************/
.messages {
text-align: center;
list-style-type: none;
padding: 0;
color: rgb(62, 5, 55);
font-family: 'Open Sans', sans-serif;
font-size: calc(15px + 0.2vw);
font-weight: bold;
}
/*********************** NOT FOUND PAGES (404, 500) ***********************/
.not-found {
min-height: 30vmin;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.not-found a {
font-size: calc(15px + 1vw);
border-bottom: none;
color: rgb(100,100,100);
font-family: "OpenSans", sans-serif;
text-transform: uppercase;
}
.not-found a i {
font-size: calc(20px + 1vw);
}
/************************ TABLES (GENERAL) ***********************/
table {
border-spacing: 0;
}
thead th {
background: var(--background1);
color: var(--text-light-1);
padding: 0.5vw 1vw;
font-size: calc(12px + 0.2vw);
}
thead th:not(:last-of-type) {
border-right: 1px solid rgb(155,155,115);
}
table form {
width: auto !important;
}
td {
font-size: calc(12px + 0.2vw);
border-bottom: 2px solid rgb(155,155,115);
padding: 0.5vw 1vw;
white-space: nowrap;
}
td a, td button {
border-bottom: none;
color: rgb(88,127,51);
margin: 0 !important;
padding: calc(3px + 0.25vw) calc(5px + 0.25vw);
background: transparent;
border-radius: 3px;
}
td a:hover, td button:hover {
color: white;
background: rgb(38,71,7);
}
/*********************** IMAGE GALLERY PAGE ***********************/
#image_tags {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding-top: calc(20px + 1.2vw - 2vw); /* -2vw in conjunction with 2vw margin on span items causes space between rows that wrap */
}
#image_tags span {
margin-top: calc(5px + 0.5vw);
font-family: "OpenSans", sans-serif;
font-size: calc(11px + 0.25vw);
color: white;
background-color: rgb(62,5,55);
border-radius: 2px;
margin-right: 10px;
padding: calc(3px + 0.25vw) calc(4px + 0.5vw);
box-shadow: 4px 4px 12px #888888;
cursor: pointer;
}
#image_grid div {
margin-bottom: 0;
}
#image_grid img {
width: 100%;
}
#image_grid.two.columns div {
width: 50%;
padding: 0 18px 18px 0;
}
#image_grid.three.columns div {
width: 33.3%;
padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
}
#image_grid.four.columns div {
width: 25%;
padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
}
#image_grid.five.columns div {
width: 20%;
padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
}
/* The above xxxx.columns div's are rendered at a certain number of columns, but the number of columns is reduced via changing percentages as screen width narrows. */
@media screen and (max-width: 767px) {
#image_grid.five.columns div {
width: 25%;
padding: 0 calc(5px + 0.25vw) calc(3px + 0.25vw) 0;
}
}
@media screen and (max-width: 575px) {
#image_grid.four.columns div, #image_grid.five.columns div {
width: 33.3%;
padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
}
}
@media screen and (max-width: 450px) {
#image_grid.three.columns div, #image_grid.four.columns div, #image_grid.five.columns div {
width: 50%;
padding: 0 calc(4px + 0.3vw) calc(2px + 0.2vw) 0;
}
}
@media screen and (max-width: 275px) {
#image_grid.two.columns div, #image_grid.three.columns div, #image_grid.four.columns div, #image_grid.five.columns div {
width: 100%;
padding: 0;
}
}
#image_grid img {
width: 100%;
border-radius: 4px;
}
#image_grid a {
border-bottom: none;
}
.slbElement button:focus {
outline: none;
}
.slbCaption {
font-size: calc(12px + 0.5vw) !important;
bottom: 1.4rem !important;
font-family: "OpenSans", sans-serif !important;
}
/********************** Contact Form ***********************/
#contact_form form {
display: flex;
}
/* Because of the random creation of empty
elements, etc., the general styling for .g-recaptcha does not work within the Contact form */
#contact_form form .g-recaptcha {
margin: 0 0 calc(5px + 1vw) 0;
}
#contact_form form > div {
display: flex;
flex-direction: column;
}
#contact_form h2 {
margin-bottom: calc(10px + 1vw);
}
@media screen and (max-width: 575px) {
#contact_form form {
flex-direction: column;
align-content: center;
}
#contact_form form > div {
width: 100%;
}
#contact_form form textarea {
margin: 0 0 calc(5px + 1vw) 0;
}
}
@media screen and (min-width: 576px) {
#contact_form form {
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
#contact_form form > textarea {
width: 65%;
margin-bottom: 0;
}
#contact_form form > div {
width: 30%;
}
}
/************************** Account Management **************************/
#account_mgt h3, #account_mgt > *:not(form) > p, #account_mgt > p {
text-align: center;
}
@media screen and (max-width: 449px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 1vw;
padding-right: 1vw;
}
}
@media screen and (min-width: 450px) and (max-width: 767px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 20vw;
padding-right: 20vw;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 27vw;
padding-right: 27vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 29vw;
padding-right: 29vw;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 30vw;
padding-right: 30vw;
}
}
@media only screen and (min-width: 1920px) {
#account_mgt form:not(.full-width):not(.css-columns):not(.special-form) {
padding-left: 31vw;
padding-right: 31vw;
}
}
/* Don't show "Remember me" checkbox that comes through from Allauth or any Django help_text in multi-column layout (throws off layout) */
#id_remember, label[for="id_remember"] {
display: none !important;
}
.css-columns .helptext {
display: none !important;
}
/* Also not currently displaying ANY Django help_text */
.helptext {
display: none !important;
}
/************************ Emails *************************/
/* Override user agent stylesheet default */
form.email_list, form fieldset {
border: none !important;
width: 100% !important;
}
form.email_list .verified {
margin-left: 10px;
}
form.email_list .verified, form.email_list .primary {
margin-top: 2vw;
font-family: "OpenSans", sans-serif;
font-size: calc(11px + 0.25vw);
color: white;
background-color: rgb(62,5,55);
border-radius: 2px;
margin-right: 10px;
padding: calc(3px + 0.25vw) calc(4px + 0.5vw);
/* box-shadow: 4px 4px 12px #888888; */
}
/************************* ADDRESSES TABLE **************************/
table.address {
min-width: 100%;
}
table.address thead tr th:nth-child(1), table.address thead tr th:nth-child(2), table.address thead tr th:nth-child(4), table.address tbody tr th:nth-child(1), table.address tbody tr th:nth-child(2), table.address tbody tr th:nth-child(4) {
text-align: left;
}
table.address thead tr td:nth-child(3), table.address thead tr td:nth-child(5), table.address thead tr td:nth-child(6), table.address thead tr td:nth-child(7), table.address tbody tr td:nth-child(3), table.address tbody tr td:nth-child(5), table.address tbody tr td:nth-child(6), table.address tbody tr td:nth-child(7), table.address tbody tr td:nth-child(6), table.address tbody tr td:nth-child(8) {
text-align: center;
}
/************************** MEMBERSHIP MANAGEMENT *************************/
#membership_mgt {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#current_ad {
margin: 0 0 calc(10px + 0.25vw) 0;
}
/* Center content in Membership History and Advertising History - :not(last-of-type) is necessary so that the Pay section isn't picked up when not including advertising */
#membership_mgt > div:nth-last-child(2), #membership_mgt > div:nth-last-child(2) ~ div {
min-width: 300px;
width: 50%;
}
#membership_mgt > div:nth-last-child(3), #membership_mgt > div:nth-last-child(3) ~ div {
min-width: 200px;
width: 33%;
}
#membership_mgt > div:nth-of-type(1), #membership_mgt > div:nth-of-type(2):not(last-of-type) {
padding: 0 calc(15px + 1vw) calc(5px + 1vw) 0;
display: flex;
flex-direction: column;
align-items: center;
}
#membership_mgt table th, #membership_mgt table td {
text-align: center;
}
#membership_mgt h3 {
text-align: center;
margin: 0 0 calc(10px + 0.25vw) 0;
}
#membership_mgt table {
margin: calc(6px + 0.2vw) 0 calc(10px + 1vw) 0;
}
@media screen and (max-width: 435px) {
#membership_mgt > div {
padding: 0 !important;
margin-bottom: calc(5px + 1vw);
width: 100%;
}
.scrolling-wrapper {
width: auto;
}
}
@media screen and (min-width: 450px) and (max-width: 991px) {
#login_form, #password_change_form {
padding-left: 25vw;
padding-right: 25vw;
}
}
@media screen and (min-width: 992px) and (max-width: 1919px) {
#login_form, #password_change_form {
padding-left: 35vw;
padding-right: 35vw;
}
}
@media screen and (min-width: 1920px) {
#login_form, #password_change_form {
padding-left: 40vw;
padding-right: 40vw;
}
}
/**************************** VARIOUS PAGE TYPES **************************/
/* Sidebar page with sidebar location (left or right) set in CMS */
.sidebar-section {
display: flex;
flex-direction: row;
}
.sidebar-section .sidebar a:link {
border-bottom: none;
}
.sidebar-section .sidebar h2:first-of-type {
margin-top: 0;
}
@media screen and (min-width:768px) {
.sidebar-section .sidebar {
width: 25%;
}
.sidebar-section .content {
width: 72%;
margin-right: 3%;
}
.left.sidebar-section .sidebar {
order: 1;
}
.left.sidebar-section .content {
order: 2;
}
.right.sidebar-section .sidebar {
order: 2;
}
.right.sidebar-section .content {
order: 1;
}
}
@media screen and (max-width:767px) {
.sidebar-section {
display: flex;
flex-direction: column;
}
.sidebar-section > div {
width: 100%;
}
.sidebar-section .sidebar {
order: 2;
}
.sidebar-section .content {
order: 1;
}
}
#gmap {
background: white;
border: 1px solid rgb(99, 49, 20);
padding: 4px;
width: 100%;
min-height: 300px;
margin-top: 1rem;
}
.block-image_link a:link, .block-image_link a:hover, .block-image_link a:active, .block-image_link a:visited {
border-bottom: none;
}
.complementary-styling {
display: flex;
flex-direction: column;
justify-content: center;
}
.complementary-styling > div {
padding: calc(10px + 0.25vw);
background-color: rgb(242, 230, 217);
}
.complementary-styling > div > *:first-child {
margin-top: 0;
}
.complementary-styling > div > *:last-child {
margin-bottom: 0;
}
/************************* MEMBERSHIP app *************************/
.member-card {
display: inline-block;
width: 100%;
line-height: 1.2;
}
.member-card span {
display: block;
}
.member-card > span:first-of-type {
font-weight: bold;
}
/************************** MISCELLANEOUS *************************/
.png-overlay {
z-index: 999;
position: absolute;
width: 38%;
height: auto;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.anchor-block a {
border-bottom: none;
}
/**************************** OVERRIDES ***************************/
/* There is an anomaly at narrowest size when scrolling-wrapper contains a table. The narrowest (96vw) is not being honored, but when set to 92vw, it behaves OK. */
@media screen and (max-width: 449px) {
.scrolling-wrapper {
max-width: 92vw;
}
}
/* Django GDPR Cookie Consent */
.cc-header h2 {
margin-top: 1.5rem !important;
}