/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ P A G E S * @ * @ EVENT PAGES and OTHER PAGES * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* ---------------------------------------------------------------------------- * PATCH AN AWKWARD LITTLE GAP * where the grid layout doesn't quite * provide enough width for content * ---------------------------------------------------------------------------- */ @media screen and (min-width: 1100px) and (max-width: 1150px) { .for-calendar, .for-page-content { margin-right: 4rem; } } @media screen and (min-width: 1100px) and (max-width: 1200px) { .for-page-content-wide { margin-right: 5rem; /* border: solid 5px red; */} } /* ---------------------------------------------------------------------------- * RESPONSIVE EVENTPAGE CONTENT LAYOUT * On small screens, show the preamble above the photo, * with other content linearized and scrunched. * ---------------------------------------------------------------------------- */ .eventpage .preamble { display: block; margin-bottom: 1em; /*margin: 0 1em;*/ } .eventpage .preamble-repeat { display: none; } .eventpage .preamble, /*.eventpage .preamble-repeat,*/ .eventpage .full-width-wrapper, .eventpage .right-wrapper, .eventpage .left-wrapper { padding: 0 2em; } .eventpage .full-width-wrapper, .eventpage .full-width-wrapper .description { clear:both; } .eventpage .right-wrapper { text-align: center; } /* ---------------------------------------------------------------------------- * On wider screens, split the content into left and right columns * with the upper preamble hidden again. * If there's content in the full-width section, add a read-more link * but have it be visible only when the * ---------------------------------------------------------------------------- */ @media screen and (min-width: 900px) { .eventpage .preamble { display: none; } .eventpage p.preamble-repeat { display: block; } .eventpage span.preamble-repeat { display: inline; } .eventpage .left-wrapper { width: 51%; float: left; clear: left; } /* was 42 */ .eventpage .right-wrapper { width: 44%; float: right; clear: right; } .eventpage .left-wrapper { padding: 0 0 0 2%; } .eventpage .right-wrapper { padding: 0 0 0 0; } .eventpage .full-width-wrapper { padding: 0 0 0 2%; } } @media screen and (min-width: 1300px) { .eventpage .left-wrapper { width: 51%; float: left; clear: left; } .eventpage .right-wrapper { width: 44%; float: right; clear: right; } .eventpage .left-wrapper { padding: 0 0 0 3%; } .eventpage .right-wrapper { padding: 0 2% 0 0%; } .eventpage .full-width-wrapper { padding: 0 2% 0 3%; } } @media screen and (min-width: 1500px) { .eventpage .left-wrapper { width: 48%; float: left; clear: left; } .eventpage .right-wrapper { width: 48%; float: right; clear: right; } .eventpage .left-wrapper { padding: 0 0 0 6%; } .eventpage .right-wrapper { padding: 0 6% 0 2%; text-align: left; } .eventpage .full-width-wrapper { padding: 0 6% 0 6%; } } /* ============================================================================ * BASICS WHEN THERE'S A PARTNER * ============================================================================ */ #basics.has-partner h1 { line-height: 1.1; } #basics.has-partner .preheading .partner { opacity: 0.75; font-size: 0.8125em; } #basics .preheading.residency { color: #333; font-size: 1.9375rem; line-height: 1.1; } /* ============================================================================ * PERFORMER PHOTO & VIDEOS * ============================================================================ */ .video-embed, .performer-photo { padding: 0 0 1em 0; display: block; } .video-embed { margin: 0 auto; } .video-embed .video-inner { position: relative; width: 100%; padding: 56.25% 0 0 0; } .video-embed video, .video-embed iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video-embed video, .video-embed iframe, .performer-photo img, .performer-photo figcaption, .performer-photo .photo-credit { display: block; text-align: center; width: 100%; margin: 0 auto; } .video-embed.self-host figcaption { margin-top: 30px; } .performer-photo img, .performer-photo figcaption { } .performer-photo { max-width: 450px; margin: 0 auto; } /* ---------------------------------------------------------------------------- * WHEN FLOATING BEGINS, match video width to photo * ---------------------------------------------------------------------------- */ @media screen and (min-width: 900px) { .video-embed .video-inner { max-width: 450px; margin: 0 auto; } } .performer-photo .photo-credit, .performer-photo figcaption, .video-embed figcaption { font-size: 0.75rem; color: #557788; margin: 0.5em 1em 0.5em 0; } .learnmore { margin: 2em 0 2em 0; } .learnmore li { margin-bottom: 1em; } /* ---------------------------------------------------------------------------- * 4-UP PERFORMER MONTAGE ON COFFEEHOUSE PAGES * montage styles in contests.css get applied too * ---------------------------------------------------------------------------- */ .performer-photo.montage .performer-photo {width: calc(50% - .5em); margin-bottom: 0.125em; padding-bottom: 0; } .performer-photo.montage .performer-photo:nth-child(1), .performer-photo.montage .performer-photo:nth-child(4) { float: left; } .performer-photo.montage .performer-photo:nth-child(2), .performer-photo.montage .performer-photo:nth-child(3) { float: right; } .performer-photo.montage .performer-photo.placeholder {width: auto; float: none; } .performer-photo.montage.count_3 .performer-photo:nth-child(1) {width: 100%; float: none; } .performer-photo.montage.count_3 .performer-photo:nth-child(2) { float:left; } .performer-photo.montage.count_3 .performer-photo:nth-child(3) { float:right; } /* and while we're on coffeehouse... */ h3.coffee_performer { color: #0178a3; border-top: solid 2px #0178a3; padding-top: 0.5em; margin-top: 1.5em; } /* ============================================================================ * LIVESTREAM EMBED * ============================================================================ */ .livestream .video-embed { padding: 0 5% 1em 5%; } .livestream .video-embed .video-inner { max-width: 100%; } .livestream .call-to-action { margin-bottom: 3em; } /* ============================================================================ * BLOG POSTS * ============================================================================ */ .blogpost-title { display: block; } @media screen and (min-width: 600px) { .blogpost-title { display: inline; } .blogpost-title.colon::after { content: ': '; } } /* ============================================================================ * OPENING ACT * ============================================================================ */ .description .opener { background: cornsilk; padding: 1em; margin-bottom: 1rem; } .description .opener .thumb { width: 112px; float: left; margin-right: 1rem;} .performer-photo.opener-teaser { background: cornsilk; text-align: right; display: block; padding: 0; margin: 0 1rem 1rem 1rem; } .performer-photo.opener-teaser .thumb { width: 112px; float: right; min-height: auto; } .performer-photo.opener-teaser .text { margin: 0; padding: 1rem 8rem 0 0; font-size: 1rem; } /* ============================================================================ * (events and Folk Arts) FUNDING * ============================================================================ */ #funding-partner, #funding-logos { margin: 0 0 1em 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #funding-partner img, #funding-logos img { flex: 0 0 auto; margin: 0.5em;} #funding-partner .more-space img, #funding-logos .more-space img { margin: 1.125em; } #funding-words { } #funding u.grantlogo, #funding em.mocklink, #funding .grant a { color: #558899; text-decoration: none; font-style: normal; } #funding .grant a:hover { text-decoration: underline; } #funding { padding: 0 1rem; } /* */ #funding p { margin: 0 0 1em 0; text-align: center; } /* ============================================================================ * IF AN EVENT IS CANCELED * ============================================================================ */ .calendar .event_canceled .image-link img { opacity: 0.4 } .eventpage.event_canceled #ticket-info ul, .eventpage.event_canceled #ticket-info .doors-time, .eventpage.event_canceled #ticket-info .timezone { display:none; } .eventpage.event_canceled #basics p { display:none; } .eventpage.event_canceled #basics p.basics_cancellation { display:block; } .eventpage.event_canceled .description * { display: none; } /* REPLACEMENT PREAMBLE GETS DISPLAYED IN RED */ .eventpage.event_canceled .preamble.cancellation, .eventpage.event_canceled .preamble_repeat.cancellation { color: crimson; } /* FOR SMALL SCREENS, WE SHOW ONLY THE FIRST PREAMBLE */ .eventpage.event_canceled .preamble, .eventpage.event_canceled .preamble_repeat, .eventpage.event_canceled .preamble_repeat.cancellation { display: none; } .eventpage.event_canceled .preamble.cancellation { display: block; } /* FOR LARGER SCREENS, HIDE THE FIRST AND SHOW ONLY THE REPEATED PREAMBLE */ @media screen and (min-width: 900px) { .eventpage.event_canceled .preamble, .eventpage.event_canceled .preamble.cancellation { display: none; } .eventpage.event_canceled p.preamble_repeat.cancellation { display: block; } .eventpage.event_canceled span.preamble_repeat.cancellation { display: none; } } /* ============================================================================ * NOTE ABOUT STREAMING SERVICES * ============================================================================ */ .streaming_services.attention-box { background-color: #6599ac; color:white; font-size: 0.9375em; text-align: center; } .streaming_services .platform_logos { width: 100%; margin-bottom: 1.5em; } .streaming_services .white.button { background-color: white; } .streaming_services .white.button a { color: #0178a3; } .streaming_services .disclaimer { font-size:0.8125rem; opacity: 0.8; margin-top: 1.5em; max-width: 20em; margin: 1.5em auto 1em auto; } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ SIDEMENU BOXES -- GIG INFO * @ (which needs to be generi-fied as it's not always gigs) * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ .gig-info h2 { background: #0178a3; color: white; padding: 0.25rem 1rem; margin: 0 -1rem;} .gig-info h3 { margin-top: 0.5rem; } .gig-info { background: #f0f0f0; padding: 0 1rem 1rem 1rem; margin-bottom: 1em; } .gig-info p { margin: 0.5em 0; } .gig-info .button { margin: 1em auto; max-width: 350px; } .gig-info .button + .button { margin-top: 1em; } .gig-info:last-child { margin-bottom: 1em; } /* When COVID came around... */ .gig-info.virtual .we-support-live h3 { color: #0178a3; } .gig-info .gig.register h3 { color: #0178a3; } .gig-info#covid-policies p { margin-bottom: 1em; font-size: 0.9375em; } .gig-info ul { margin-top: 0.25rem; } .gig-info.venue .city { display: block; } /* on big screens */ .gig-info.venue .box { margin-top: 1em; border-top: solid 1px silver;} .gig-info.venue .box.venue-0, .gig-info.venue .box.venue-primary { margin-top: 0; border-top: none;} .gig-info .general-ticket-info { text-align: center; } .gig-info.tickets .button.coming-soon { opacity: 0.6; } .gig-info.tickets .button.at-door { background: #6599ac; } .gig-info.tickets .button.sold-out { background: crimson; } .gig-info.tickets .button.free { background: #6599ac; } /* Multi-part events can now show a ticket button for each subevent */ /* but these are hidden by default for backward compatibility */ .gig-info.tickets .subevent.button { display: none; } /* page must allow display */ .gig-info h2.subevent { display: none; } /* page must allow display */ h2.subevent { font-family: Rosario, Roboto, Arial, Helvetica, sans-serif; margin: 2rem -1rem 0 -1rem; font-weight: normal; } .lend-a-hand .box { margin: 0 0 1.5em 0; } .page_id__jams .gig-info.tickets em { font-size: 0.8125em; } /* "note date!" */ /* A little more vertical space on wide screens */ @media screen and (min-width: 700px) and (max-width: 1099px) { .eventpage .gig-info { margin-bottom: 1.25em; } } @media screen and (min-width: 1100px) { .eventpage .gig-info { margin-bottom: 2em; } } .timezone { display: block; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 0.9375rem; font-weight: normal; color: #666; } .event-time-wrapper, .door-time { display: block; } .no-doors-time { display:none; } .gig:NOT(.gig-primary) { margin-top: 1.5em; } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ EVENTS CALENDARS * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ #main.eventlist .calendar, #main.eventlist .calendar-sibling { /* margin: 0 2rem 3em 2rem;*/ margin: 0 0 3rem 0; } /* ALERT - SOMETHING CONFUSING HERE... */ #main.eventlist .sidemenu { margin-top: 1rem; } .eventlist .no-results { margin-top: 0.75em; } .calendar h3 .date { color: #607070; } #whatsnew h3 a, .calendar h3 a { white-space: nowrap;} /* BUT LET IT WRAP IF IT'S VERY LONG ( >30 ?) */ .calendar .long-title h3 a { white-space: normal;} .calendar-data .thumbs-and-locale { color: #708080; margin: 0.25em 0 0 0.5em; } .calendar-data .date { font-size: 1.5em; font-weight: bold; } .calendar-data .city { display: inline-block; width: 112px; text-align: center; margin-top: 0.25em; font-size: 0.875em;} .calendar-data { display: flex; flex-wrap: nowrap; } .calendar-data .thumbs-and-locale { flex: 0 0 8rem; } .calendar-data .thumbs-and-locale .button { margin: 0.5em 0 0 0; width: 112px; } .calendar-data .thumbs-and-locale .button a { padding: 0.25em 0.5em; } .calendar-data .thumbs-and-locale .button.compact { font-size: 0.9375em; } .calendar-data .thumbs-and-locale .button.more.compact { font-size: 0.8125em; } .calendar-data .image-link { display: block; margin-bottom: 0.5rem; } .calendar-data .image-link.last { margin-bottom: 0; } .calendar-data .image-link img.thumb { display: block; width: 112px; } .calendar-data .description { flex: 0 1 auto; margin-bottom: 1em; } /* ---------------------------------------------------------------------------- * On teeny screens, put the thumbnail(s) above the text * (side by side if multiple) * ---------------------------------------------------------------------------- */ @media screen and (max-width: 400px) { .calendar-data .image-link { display: inline-block; margin-right: 0.5rem; } .calendar-data { flex-wrap: wrap; } .calendar-data .thumbs-and-locale { flex: 0 0 100%; } .calendar-data .multi-thumb .image-link.last { margin-bottom: 0.5rem !important; } .calendar-data .city { display: block; margin-bottom: 0.75rem;} .calendar h3 a { white-space: normal; } .calendar h3 .date { display: block; } /* one more tweak, with !important because its width is defined below */ .show-more .arrow { width: 100% !important; } /* Jan2021 - let's make those thumbnails bigger. */ .calendar h3 { border-bottom: none; margin-bottom: 0;} .calendar-data .thumbs-and-locale { margin-left: 0; } .calendar-data .image-link img.thumb { display: block; width: 100%; height: auto; max-width: 270px; } .calendar-data .image-link { display:block; max-width: 300px; } .calendar-data .image-link:first-of-type { border-top: solid 3px #0178a3; padding-top: .75em; } } /* ALERT - fix these overrides */ /* ---------------------------------------------------------------------------- * On mega screens, make the Calendars sidemenu slightly wider * with slightly larger text * ---------------------------------------------------------------------------- */ @media screen and (min-width: 1500px) { #canvas.eventlist .sidemenu { padding-left: 2rem; } #canvas.eventlist .sidemenu h3 { padding-left: 1.5rem; margin-left: -2rem; } #canvas.eventlist .sidemenu ul { font-size: 1.0625em; } .sidemenu li.this-topic::after { transform: translate( .72em,-1.7275em ); } } /* end mega screens */ /* ============================================================================ * EVENTS CALENDARS - FREE-EVENT INDICATOR * ============================================================================ */ .calendar-data .thumbs-and-locale .button.overbar { margin: 0 0 0 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; font-size: .8375rem; } .calendar-data .thumbs-and-locale .button.overbar a { padding: .0625em; } .calendar-data .thumbs-and-locale .button.overbar.teal.free { background: #5d81a3; } .calendar-data .thumbs-and-locale .button.overbar.free { background: #0178a3; color: white;} /* ============================================================================ * EVENTS CALENDARS - HELPER LINKS * ============================================================================ */ .show-more { text-align: center; margin-top: 1em; } .show-more a { display: block; text-decoration: none; } .show-more .arrow { display: inline-block; width: 20em; margin: 0 auto; background: #e0e0e0; } .show-more.more .arrow:after { content: ' '; display: block; height: 0; border-top: solid 10px #e0e0e0; border-left: solid 10em white; border-right: solid 10em white; transform: translateY(4px); } .show-more.more a { padding: 0.5em 0 0 0; } .homepage .show-more { margin-top: 0; margin-bottom: 1rem; } .homepage .show-more .arrow { border-radius: 0.25rem; } .homepage .show-more .arrow:after { display: none; } .homepage .show-more.more a { padding: 0.5em 0; } .show-more.back-to-top a { padding: 0 0 0.5em 0; } .show-more.back-to-top .arrow { display: inline-block; width: 20em; margin: 0 auto; background: #e0e0e0; } .show-more.back-to-top .arrow:before { content: ' '; display: block; height: 0; border-bottom: solid 10px #e0e0e0; border-left: solid 10em white; border-right: solid 10em white; transform: translateY(0px); } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ DIRECTIONS PAGES * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ .directions .preamble { margin-top: 0; } .map-pane p { text-align: right; margin-right: 2em; font-size: 0.8375em; } /* Responsive box for map */ .map-pane .map { position: relative; padding-top: 75%; } .map-pane iframe { border: none; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media screen and (min-width: 600px) { .directions .intro-pane, .directions .map-pane, .directions .text-pane { flex: 1 0 99%; } } @media screen and (min-width: 1000px) { /* a little narrower than standard */ .directions .intro-pane { flex: 1 1 99%; } .directions .map-pane { flex: 0 0 45%; } .directions .text-pane { flex: 1 1 45%; } .directions .map-pane { } .directions .text-pane { margin-left: 1em;} .map-pane .map { padding-top: 150%; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ BIG IMAGE LANDING PAGES * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * */ .landing-page-image-only { /* margin: 0 -2rem 0 -2rem; */ } .landing-page-image-only img { width: 100%; } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ SUPPORT TAB PAGES * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * */ /* ============================================================================ * SUPPORT PAGES - CALLS TO ACTION * ============================================================================ */ .call-to-action { max-width: 300px; margin: 0 auto; } .call-to-action .button { max-width: 300px; margin: 0 auto 0.5rem auto;} .call-to-action p { font-size: 0.9125em; text-align: center; } .box-layout .flex-box .call-to-action { margin: 0.5rem auto 1rem auto; } .tab_support .call-to-action .button a { padding: 0.5rem 1em; font-size: 1.125rem; } .tab_support.page_id__contribute #silent-auction .call-to-action .button, .tab_support.page_id__advertise .call-to-action .button { max-width: 10em; } .tab_support.page_id__advertise .box-header h2 { margin: 0 auto; } .tab_support.page_id__contribute #cash-contributions .call-to-action .button { max-width: 11em; } /* ============================================================================ * SUPPORT TAB - SIDEMENU CUSTOMIZATIONS * ============================================================================ */ .tab_support .sidemenu li:nth-child(6) { font-weight: bold; font-family: 'Roboto Slab', Roboto, Helvetica, sans-serif; font-size: 1.0625em; } .tab_support .sidemenu li:nth-child(6) a { color: #abc; } /* ============================================================================ * FLEX LAYOUTS * ALERT _ used in directions pages... volunteer page... where else? * ============================================================================ */ .flex.container {} /* no special behavior on small screens */ @media screen and (min-width: 600px) { .container.flex { display: flex; } .container.flex.wrap { flex-wrap: wrap; } } .box-layout .flex.container { margin: 0 -1rem; justify-content: space-between; } .box-layout .flex-box { flex: 1 1 100%; margin: 0 1rem 1rem 1rem; } .box-layout .flex-box .box-header { box-sizing: border-box; display: flex; align-items: flex-end; width: 100%; background: #0178a3; padding: 0.5rem; /* Use min-height: 4.5em if header text is long enough to wrap sometimes */ } .box-layout .flex-box .box-header h2 { font-size: 1.25rem; border-bottom: none; margin-bottom: 0; color: white; } .box-layout .flex-box .box-content { padding: 0.5rem; } .box-layout .flex-box .box-content img { width: 100%; max-width: 300px; margin: 0 auto; display: block;} .tab_support .right-wrapper { text-align: left; } /* - - - - - - - - - - - - - - - These don't match up with the usual breakpoints */ @media screen and (min-width: 850px) { .box-layout .flex-box { flex: 1 1 42%; } .box-layout .flex-box.full-width { flex-basis: 100%; } } @media screen and (min-width: 1300px) { .tab_support .right-wrapper { float: right; width: calc(100% - 324px); } .tab_support .left-wrapper { float: left; width: 300px; } .tab_support .button + .button { margin-top: 1.125em; } .tab_support .call-to-action-wrapper { margin-bottom: 1em; } .page_id__sponsor .right-wrapper { width: 330px; margin-right: calc(100% - 654px); } .page_id__contribute .right-wrapper { width: 330px; margin-right: calc(100% - 654px); } .box-layout .flex.container { margin: 0 -1.5rem; } .box-layout .flex-box { flex: 1 1 40%; margin: 0 1.5rem 1rem 1.5rem; } .box-layout .flex-box.full-width { flex-basis: 100%; } } /* ============================================================================ * LITTLE GREEN LIGHT FORMS * Contact Us - Donations - Sponsor an Event * ============================================================================ */ .lgl_form_box { margin-left: -16px; width: calc(100% + 16px); } @media screen and (min-width:700px) { .lgl_form_box { margin-top: -1em; } } @media screen and (min-width:1000px) { .missing_form { margin-top: -3em; } .form_alternatives, .missing_form { width: 600px; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ * @ * @ ONE-OF-A-KIND PAGES * @ * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ /* ============================================================================ * boilerplate for LITTLE GREEN LIGHT FORMS * ============================================================================ */ /* ============================================================================ * RESOURCE LIST * ============================================================================ */ .jumpback { padding: 0.75em 0 0.75em 30px; background: url(../visual_2023/backarrow.gif) center left no-repeat transparent; } /* ============================================================================ * TICKET INFO PAGE * ============================================================================ */ .ticket_info .thumbnail-grid { padding: 0; } .ticket_info .thumbnail-grid h2 { display: none; } .ticket_info .thumbnail-grid .grid-item { display: none; } .ticket_info .thumbnail-grid .grid-item.ticketed { display: flex; } section.for-page-content { margin-bottom: 2em; } @media screen and (min-width:700px) { section.for-thumbnail-grid { grid-column: 1/3; grid-row:4; } } /* ============================================================================ * SUBSCRIBE PAGE * ============================================================================ */ .subscribe_pages #subscription_options { margin-bottom: 1em; } .subscribe_pages #subscription_options h3 { color: #0178a3; } .subscribe_pages .thumbnail-grid { margin-top: 2em; } .subscribe_pages h2 { display:none; } .subscribe_pages .thumbnail-grid .grid-item.ktmc { display: none; } /* ============================================================================ * E-NEWS * ============================================================================ * .enews.container a { text-decoration: none; } .enews.container ul { } .enews.container { display: flex; flex-wrap: wrap; } .enews.container .flyers, .enews.container .not-flyers { flex: 1 1 auto; margin: 0 1em; } .enews.container .filesize { font-size: 0.675em; color: #668899; display: inline-block; padding-left: 0.5em;} @media screen and (max-width: 599px) { .enews.container h3 { margin-top: 2em; } .enews.container li { padding: 0.375em 0; } .enews.container .flyers ul { margin-bottom: 2em; } .enews.container .flyers h3 { margin-top: 3em; } .enews.quicklinks li:first-child { width: 100%; text-align:center;} .enews.quicklinks { flex-wrap: wrap; } } */ /* ============================================================================ * PRINTING - STATESTREET * ============================================================================ */ .statestreet .panel { margin: 0 2em; } .statestreet #basics { margin-left: 0; } .statestreet h2 { font-size: 1.5em; font-weight: bold; border-bottom: solid 1px #a0a0a0; background: #b0b0b0; color: white; text-align: center; text-shadow: 1px 1px 1px #999999; border-top-right-radius: 8px; border-top-left-radius: 8px; margin-bottom: 0.75rem; } .statestreet-files { margin-bottom: 3rem; } .statestreet-files h3 { font-weight: normal; border-bottom: solid 2px #0178a3; margin-top: 2em; } .statestreet-files .filesize { font-size: 0.75em; color: #8899aa; margin-left: 0.5em; display: inline-block; } .statestreet-files a { text-decoration: none; } .statestreet #oops-flyers h3 { margin-top: 0; } .statestreet #oops-flyers p { margin-top: .25em; margin-bottom: 0; } .statestreet #oops-flyers ul { margin-bottom: 0; } .statestreet #oops-flyers li:before { background-color:#e9703e; } @media screen and (max-width: 599px) { .statestreet-files h2 { margin-top: 2em; } }