@charset "utf-8";
/*
The is not built; the original code is this one big CSS file.

This was done before responsive designs were standard, so it started with a
desktop version. The images for the main wrapper rather were replaced with the
now available CSS box-shadow. A work-around using a data-pageiswide attribute
on the body element started seeming like patch-on-patch code, so the move to a
mobile first design was started.

Major breakpoint: 480px. A lot of what was at the start of the css is now at
the end within media queries.

The page goes into wide mode at 640px. But before that at 560px quite a few
cosmetic changes go into effect, perhaps the most visual being the side padding
change from 6 to 24px.

The layout uses Modernizr.
*/
/* Added 2023, so there may be a lot of offset details to fix. */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* IDK where xheadingFonts came from. It wasn't defined and fallbacks weren't working. */
:root {
    --xheadingFonts: MuseoSlab500, Georgia, "Times New Roman", Times, serif;
    --headingFonts: MuseoSlab500, Georgia, "Times New Roman", Times, serif;
    --headingFontsSmall: Georgia, "Times New Roman", Times, serif;
    --mainFontSize: medium;
    --smallSidePadding: 6px;
    --reverseSmlSidePad: -6px;
    --defaultPageBgColor: hsl(216 33% 22%);
    --contentBgColor: hsl(45 90% 96% / 1);
    --listingContentBorderColor: hsl(45 36% 76% / 1);
    --clickableLinkColor: hsl(204deg 75% 40%);
    --clickableLinkColorHover: hsl(204deg, 50%, 60%);
}

article, aside, canvas, figure, figcaption, footer, header, hgroup, nav, section  { display: block; }

/* floating sheet start */

/*
This is used on the rect-shadow pages, example EventsMap.php
216 deg. blue main color (L=36,a=-1,b=-11)
41 deg. compliment orange/brown (L=36,a=1,b=11)
*/
/* webfonts do not work when the css is serves by type file:// */

@font-face {
    font-family: 'MuseoSlab500';
    src: url('/fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('/fonts/Museo_Slab_500-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Museo";
    src: url('/fonts/Museo300-Regular-webfont.woff') format('woff'),
         url('/fonts/Museo300-Regular-webfont.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: "Museo";
    src: url('/fonts/Museo500-Regular-webfont.woff') format('woff'),
         url('/fonts/Museo500-Regular-webfont.ttf') format('truetype');
     font-weight: 500;
}

@font-face {
    font-family: "Museo";
    src: url('/fonts/Museo700-Regular-webfont.woff') format('woff'),
         url('/fonts/Museo700-Regular-webfont.ttf') format('truetype');
     font-weight: 700;
}


html {
    font-size: 100%;
    background-color: #26354c;
    background-color: var(--defaultPageBgColor);
}

body {
    font-size: 100%;
    font-size: var(--mainFontSize, 100%);
    line-height: 125%;
    padding: 0; margin: 0;
    position: relative;
    background-color: #4b5666;
    font-family: Cantarell, 'Open Sans', Ubuntu, 'lucida grande', trebuchet, verdana, arial, helvetica, sans-serif;
}

p {
    font-size: 1em;
    line-height: 125%;
    margin: 1.25em 0;
}

a:link { color: #1a75b2 }
a:visited { color: #621aaf }
a img {
  border: none;
}
a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}

.pos-rel { position: relative; }

.clearfix { clear: both; }
.strikethrough {  text-decoration: line-through }
.font-150pct { font-size: 150% }
.font-130pct { font-size: 130% }
.font-120pct { font-size: 120% }
.font-100pct { font-size: 100% }
.font-90pct { font-size: 90% }
.font-80pct { font-size: 80% }
.talign-l { text-align: left; }
.talign-c { text-align: center; }
.talign-r { text-align: right; }

.bold, .font-weight-bold {
    font-weight: bold;
}

.maincontent-outer { padding: 0; position: relative; }

/*
 This selector (section.main-dbcontent) replaced the id selectors such as
 eventList and venueMaps.
*/
section.main-dbcontent {
    content-visibility: hidden;
    clear: both;
}
section.main-dbcontent.content-enabled {
    content-visibility: visible;
}

body > header,
body > footer,
h1,
.share-buttons-wrapper {
    background-color: #26354c;
    background-color: var(--defaultPageBgColor);
}

body > header,
body > footer {
    padding: .75em 0px;
}

h1 {
    padding: .75em var(--smallSidePadding, 6px);
}

body > header,
body > header a,
body > header a:visited,
body > header a:link,
body > header a:active {
    color: hsl(218 100% 98%);
    text-decoration: none;
    outline: none;
}

body > footer,
body > footer a,
body > footer a:visited,
body > footer a:link,
body > footer a:active {
    color: hsl(215 100% 94%);
}

h1,
h1 a,
h1 a:visited,
h1 a:link,
h1 a:active {
    color: #FFFCF7;
}

/*
 The fixed spacer class is added by JS because corrections are needed. The
 min height is to allow the nav burger to fit. The height of this block
 determines the spacer size from a JS calc.
 "fixed-header" is from an older version and is no longer in use because it was
 ambiguous, renamed to fixed-spacer-available (I think).
*/
body.fixed-spacer-available > header,
.fixed-header body > header {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 5;
    top: 0;
    width: 100%;
    box-shadow: 0 3px 3px hsl(0deg 0% 0% / 80%);
    min-height: 64px;
    padding-right: 64px;
}
#css-display-mode:before {
  content: "narrow-mode";
}

body > header p {
    margin: 0;
    font-size: 120%;
    font-weight: normal;
    letter-spacing: .05em;
    font-family: var(--xheadingFonts, MuseoSlab500, Georgia, "Times New Roman", Times, serif);
}
/* Generally not used, maybe 404 page. */
h1 {
    margin: 0 -6px;
    margin: 0 var(--reverseSmlSidePad);
    font-size: 120%;
    position: relative;
}

/* Override the hide that happens before this file is loaded. */
.intro-hidable {
    display: block;
}

#css-display-mode:before {
  content: "narrow-mode";
}

/*
A separate wrapper to keep things lined up on very narrow screens. Without this
the shadows on the top and bottom may shift relative to the content.
iPad is 768px. If I make the padding go away but leave the shadows, that leaves
720px.
The min content-body becomes 720-48 = 672px, after standard 24px side padding, that
leaves 624px for normal size content.
*/
/* This, above notes and below code, needs to be evaluated to see if it is still needed.
When it was made, shadows did not exist.
This min-width value is overwritten later in this file.
*/
/* The shadow images are gone, but this still creates the shadows. */
.maincontent-inner {
    margin: 0 auto;
}


/*
* The content. It needs a background color because the side images cannot go
* all the way across.
*/
.content-body {
    position: relative;
    background-color: hsl(44 100% 95% / 1);
    border: 0px solid #aacdff;
}

/* Used by main content, header and footer content */
.content-side-padding {
    padding-left: var(--smallSidePadding, 6px);
    padding-right: var(--smallSidePadding, 6px)
}
.narrow-fullwidth-content-side-padding {
    margin-left: var(--reverseSmlSidePad, -6px);
    margin-right: var(--reverseSmlSidePad, -6px);
}
/*
 This makes most content 48px less than content-body, or 96px less than
 min-width. This overlays the png texture image, so it's a way to modify its
 color.
*/
.content-wrapper {
    padding-top: 24px; padding-bottom: 24px;
    background-color: hsl(4deg 100% 97% / 15%);
}
/* JS controlled hiding mechanism based on buttons. */
.content-wrapper.hide-intro-section {
    /* padding-top: 0; */
}

.first {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top-width: 0 !important;
}
.last {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important;
}

h4, h5, h6 { font-family: var(--headingFontsSmall, Georgia, "Times New Roman", Times, serif); }

/* Some web fonts distort when shown in bold, so force normal font-weight */
h2, h3 {
    font-family: var(--xheadingFonts, MuseoSlab500, Georgia, "Times New Roman", Times, serif);
    font-weight: normal;
}
h1 {
    font-family: var(--xheadingFonts, MuseoSlab500, Georgia, "Times New Roman", Times, serif);
    font-weight: normal;
}
h1 a {
    text-decoration: none;
}

h2, h3 { color: hsl(214 33% 9%); }

/* floating sheet end */


sup { font-size: smaller; }
.hidden { visibility: hidden; }
.display-none { display: none; }

/* Use for conejo.rock in text areas. */
.sitename-text {
    font-family: 'Grandstander', cursive;
    color: hsl(43, 80%, 20%);
}


.maincontent-inner { min-width: 300px; }
.content-body {
    background-color: var(--contentBgColor);
    /*** The image is causing a flash of darkness before it loads. ***/
    background-image: url(/images/bg-paper-100x100.png);
}
#debugInfo { display: none; }
#debugInfo.enabled { display: block; }

/* Added margin so the GoToTop button doesn't cover any info. */
body > footer .foot-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 150%;
    margin-right: 8em;
}
body > footer .modDate {
    font-size: 85%;
    line-height: 176.5%;
}


/* section.page-intro was styled thru #intro. It is the same element. */
section.page-intro {
    margin: 0 0 1.5em 0;
    position: relative;
}
section.page-intro:after {
    content: "";
    line-height: 1px;
    display: table;
    clear: both;
}

/* Hiding the entire section is too much, so add a class that can be more selective. */
.hide-intro-section section.page-intro {
    /* display: none; */
}
.hide-intro-section section.page-intro .intro-big-image.intro-hidable,
.hide-intro-section section.page-intro .intro-hidable {
    display: none;
}


.ui-ctrls {
    background: rgba(30, 62, 107, 0.50);
    font-size: 150%;
    box-shadow: inset 2px 2px 9px 0px rgba(0,0,0,.75);
    display: block;
}
.ui-ctrls .control-indicator {
    background-color: #fff;
}
/*
 Bigger controls look better with an outline. So do normal ones.
 Update some of the wtf-forms code, because it is dead.
*/
.ui-ctrls input:not(:checked) ~ .control-indicator {
    box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem hsl(208deg 100% 43% / 35%);
}

/* Common for each checkbox wrapper div */
.ui-ctrls .ctrl-checkbox-wrap {
    background: rgba(250, 250, 250, .8);
    padding: .5em;
}
.ctrl-brief-descriptions {
    display: none;
}
/* JS can add brief-ctrl to show the controls for brief mode. */
.brief-ctrl .ctrl-brief-descriptions,
.page-events .ctrl-brief-descriptions {
    display: block;
}

.qr-img-wrap {
    text-align: center;
    margin: auto 1em;
}

.qr-img-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: none;
}

#rhContainerFloat {
    position: relative;
    box-shadow: 0 7px 7px -7px rgba(127, 113, 76, .7);
}

/* Until clearfix is added to this */
#rhContainerFloat:after {
  content: " ";
  display: table;
  line-height: 0;
  clear: both;
}

#rhContainerFloat .buttonBoxNbg { margin: 0; padding: 0; }
/* The display is too crowded with this. 7/13/2019, take out the ul rule.
#rhContainerFloat ul { margin: 0; padding: 0; }
*/

#rhContainerFloat .buttonBoxNbg .li-sitemap {
    padding-left: 48px;
    background: url(/images/icon-sitemap-42x24.png) no-repeat 0 50%;
}
#rhContainerFloat .li-contact .fa {
    padding-right: .5em;
    vertical-align: middle;
}
#rhContainerFloat .li-search .fa {
    padding-right: .5em;
}

#rhContainerFloat .buttonBoxNbg .links li {
    min-height: 35px;
    /* Doesn't apply with flex change. */
    /*
    display: inline-block;
    width: 45%;
    margin: 2%;
    box-sizing: border-box;
    float: left;
    min-width: 160px;
    */
}

/* These items should not overlap, so keep them as a list */
#rhContainerFloat .buttonBoxNbg .fb-list li {
    margin: 0 auto .5em;
    min-height: 35px;
    display: list-item;
}


/*
 The FB buttons when they are not in the rhContainer are in pre-intro. That
 section does not exist in wide mode, so the styles are strictly for narrow.
 Other areas are not as easy to control, so the body has a data-pageiswide
 attribute, with a value of "y" or "n".

 The data element works fine, but after CSS reorg it isn't really needed.
 It remains available as an override, with values of "n" or "y":
 body[data-pageiswide="n"] ... other stuff.
*/
/* fb buttons do not hide with site info
.content-wrapper.hide-intro-section .pre-intro .fb-list {
    display: none;
}
*/


#eventsAdContainer .offlineAd {
    background-color: hsl(219 79% 66% / 1);
    padding: 0.5em;
}
/* Give up on Amazon ads, just do text. */
.yfp-ad-content .justtext {
    display: flex;
    justify-content: center;
    background: linear-gradient(90deg, transparent 0%, hsl(216 30% 24% / 1) 25%, hsl(216 30% 24% / 1) 75%, transparent 100%);
}
.yfp-ad-content .jtinner {
    padding: 0.5em;
    background: hsl(214 15% 91% / 1);
    box-shadow: 0 0 5px 1px  hsl(214deg 10% 10% / 60%);
}

/* Clear the menu when the control box isn't there to push down the FB buttons. */
body.no-ui-ctrl-box section.pre-intro {
    margin-right: 70px;
}
body.no-ui-ctrl-box.mode-fixedmenu section.pre-intro {
    margin-right: 0px;
}
.pre-intro {
    display: flex;
    flex-direction: column;
}
/* Combine buttonBoxNbg with fb-list */
.pre-intro .fb-list  {
    padding: 0;
    margin: 0 auto;
    list-style-type: none;
    min-height: 35px;
    display: flex;
    flex-wrap: wrap;
}
.pre-intro::after {
  content: " ";
  display: table;
  line-height: 0;
  clear: left;
}
.pre-intro .fb-list li  {
    text-align: left;
    padding: 0 .5em;
    list-style-type: none;
    height: 1%;
    margin: 0 auto .5em;
    min-height: 35px;
    display: inline-block;
    float: left;
}

.pre-intro .fb-list li.first {
    /* padding-left: 0; */
}
.pre-intro .fb-list li.last {
    /* padding-right: 0; */
}
/* Compensate for the offset that FB adds. Mostly unnecessary after simplifications. */
.pre-intro .fb-list .fb-generated.fb-page-plugin {
    position: relative;
    /*
    left: -10px;
    margin-left: 10px;
    */
}
#rhContainerFloat .pre-intro .fb-list .fb-generated.fb-page-plugin {
    /* margin-left: 2px; */
}

/* Sometimes pre-intro lives under the rhContainer...
It is the first item
*/
#rhContainerFloat .pre-intro .fb-list {
    padding: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    min-height: 35px;
    display: block;
}
/* TODO: These don't override first and last. Maybe w/ flex? */
#rhContainerFloat .pre-intro .fb-list li.first,
#rhContainerFloat .pre-intro .fb-list li.last,
#rhContainerFloat .pre-intro .fb-list li {
    /* Reset them all to the default. */
    padding: 0 .5em;
}


/*
Ongoing issues with FB buttons not displaying. These are used to try to override
some of those issues. It will probably have to change as FB keeps modifying their
generated code.
The "fb-list" class is on the UL, the "fb-button-list" is on the UL, and
"fb-generated" is on each FB LI (but not the donate).
"fb_iframe_widget" is generated by Facebook.
*/
.fb-list .fb-generated {

}
.fb-list .fb-generated .fb_iframe_widget span {
    min-height: 31px;
    min-width: 90px;
}

/* This is loaded by JS. The noscript frame makes a huge space, but only 31 px is needed. */
.no-js .fb-share-button {
    display: none;
}
.no-js #rhContainerFloat .buttonBoxNbg .fb-list li {
    height: 31px;
}

/* This is the historyIndex block. The class is added by the JS */
section.history-indexblock {
    display: flex;
    flex-direction: column;
}
section.history-indexblock p {
    margin-bottom: 0;
}

/*
 The full spec for the share-buttons-wrapper. A share-buttons class is on the
 UL element.
*/
.main-dbcontent header h1,
.main-dbcontent header .share-buttons-wrapper {
    padding: .75em var(--smallSidePadding, 6px);
    margin: 0;
}

section.main-dbcontent header {
    display: flow-root;
}
section.main-dbcontent header .share-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: .5em;

}
.share-buttons-wrapper .share-label {
    color: hsl(40 97% 86% / 1);
    padding-right: .5em;
}
.share-buttons-wrapper ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .5em;
    justify-content: space-around;
    flex-grow: 1;
}
.share-buttons-wrapper li.social-button {
  display: inline-block;
  height: 32px;
  width: 32px;
  list-style-type: none;
  line-height: 32px;
  vertical-align: middle;
}
.share-buttons-wrapper li.social-button.donate {
  width: 75px;
  height: 22px;
}
.share-buttons-wrapper .social-button img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Some of this is delaying the start of image loading. */
.deferload { display: none; }
section.page-intro .intro-big-image { display: none; }
section.page-intro .intro-big-image img {display: block;}

section.page-intro .introContent {
    text-align: justify;
    position: relative;
}

/*
 The home page SVG animation blocks links on some P element. This fixes that.
 It is not all Ps because that throws off the chrono rabbit.
 The z-index is really only needed for Ps before the chrono.
*/
.page-home .introContent > p {
    color: hsl(212 15% 35% / 1);
    z-index: 1;
    position: relative;
}

.page-home .introContent .event-count {
    padding: 0 1em;
    background: hsl(34deg 20% 85% / 50%);
    border-radius: 1em;
    box-shadow: 0 0 4px 1px inset hsl(183deg 10% 40% / 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.25em;
}
@media screen and (min-width: 680px) {
    .page-home .introContent .event-count {
        max-width: 650px;
        margin: 1.25em auto;
    }
}
.page-home .introContent .event-count p {
    color: hsl(217 33% 22%);
    margin: 1.25em auto;
}

section.page-intro .introContent ul { text-align: left; }

section.page-intro .jump-button {
    position: relative;
    float: left;
    top: 0em;
    left: -21px;
    right: auto;
    margin: .75em -1.25em .75em 0;
    margin-right: -0.25em;
    z-index: inherit;
}
section.page-intro .jump-button a {
    background-color: #F8F9FC;
    display: table;
    padding: .625em 1em;
    position: relative;
    text-decoration: none;
    border: .125em solid #CCD7EA;
    border-radius: 0px 20px 20px 0px;
    box-shadow: -2px 3px 3px 1px rgba( 119, 123, 127, .5);
    border-left: none;
}

/*
 Starts off in the intro div. Hidden due to small screens.
 .current-count is on the #cc-block, but the block isn't being used now. Rather
 than reenable it, skip updating the styles unless it is used again.
*/
.current-count,
#cc-block {
    display: none;
}
/* class for the cc-block */
.current-count {
    padding: .5em;
    display: table;
    border-radius: 15px;
    background: rgb(103, 97, 76);
    background: hsl(47, 15%, 35%);
    margin: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
    font-style: italic;
}
.current-count,
.current-count .control-text {
    color: hsl(47, 15%, 95%);
}



/* from fixedRightCol.css, but modified for this line spacing */
/* for lists of buttons (or text), usually in rhContainer of 180px */
/*
 Narrow mode will override some of this, WIP.
 Only buttonBoxNbg is used, so the bg version was removed.
*/
/* change margin to 5px for rounded corners */
.buttonBoxNbg {
    padding: 5px;
    margin: 25px 5px 5px 5px;
    text-align: left;
    clear: both
}
.buttonBoxNbg a {
    border: none;
    margin: 0;
    padding: 0
}
.buttonBoxNbg a img {
    display: block;
    border: none;
    margin: 0;
    padding: 0
}
.buttonBoxNbg ul {
    margin: 1.765em 0em 0em 0em;
    padding-left: 0;
    list-style-type: none;
}
.buttonBoxNbg ul li {
    margin: 1.765em auto;
    padding: 0;
    list-style-type: none;
    height: 1%;
}
.buttonBoxNbg .linkButton {
    border: none;
    margin: 0;
    padding: 0
}
.buttonBoxNbg li img {
    display: block;
}

.buttonBoxNbg .pp-donate {
    margin: 15px auto;
}

/* fb buttons do not hide with site info
.content-wrapper.hide-intro-section .pre-intro .fb-list,
*/
.content-wrapper.hide-intro-section #rhContainerFloat.intro-hidable {
    display: none;
}
/*
body[data-pageiswide="n"] #rhContainerFloat,
body[data-pageiswide="n"] #rhContainerFloat .buttonBoxNbg {
*/
#rhContainerFloat,
#rhContainerFloat .buttonBoxNbg {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    right: unset;
    float: none;
    align-items: center;
}
body[data-pageiswide="n"] #rhContainerFloat {
    border: none;
    padding-bottom: 0.5em;
}

body[data-pageiswide="n"] section.page-intro .introContent {
    margin-top: 1.5em;
}

.pre-intro .fb-list,
#rhContainerFloat .buttonBoxNbg ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: .5em auto;
    gap: 1em;
    justify-content: space-between;
    width: 100%;
}

.pre-intro .fb-list li,
#rhContainerFloat .buttonBoxNbg li {
    min-width: unset;
    width: auto;
    margin: 0;
}

/* One of these two locations depending on layout. */
.pre-intro .fb-list li.donate,
#rhContainerFloat .buttonBoxNbg li.donate {

}
.li-contact .icon-on-lft { margin-right: .5em; }

/*
 Some code uses treble, some uses event-series-list. Its main purpose is to
 change the list icon.
*/
.treble .not-yet,
.event-series-list .not-yet {
    color: hsl(0 0% 60%); text-decoration: line-through;
}

ul.treble,
ul.event-series-list {
    list-style-type: none;
    margin: 0.75em 0 1.5em var(--smallSidePadding, 6px);
    padding: 0;
}
.treble li,
.event-series-list li {
    background-image: url('/images/Treble_Clef_without_line-16.png');
    background-repeat: no-repeat;
    background-position: 0px 33%;
    padding-left: 20px;
    margin-left: 6px;
}
.treble.spaced li,
.event-series-list.spaced li {
    margin-bottom: 0.5em;
    background-color: hsl(34 60% 90%);
    border-radius: 0.5em 0 0 0.5em;
    box-shadow: 1px 1px 2px hsl(19deg 40% 60% / 50%);
    margin-bottom: 0.5em;
}
.treble li:first-of-type,
.event-series-list li:first-of-type {
    margin-top: 0;
}
.treble li:last-of-type,
.event-series-list li:last-of-type {
    margin-bottom: 0;
}

.decorated-block,
.event,
.venue {
    border: none;
    margin-bottom: 2.5em;
    position: relative;
    padding-top: 20px;
/*    box-shadow: 0px -11px 13px -13px; */
}

/* could be done more efficiently by rewriting old code, but this will do. */
.use-brief .event {
    padding-top: 0em;
    box-shadow: none;
    margin-bottom: .5em;
}

/* Need to override part of what first does so it doesn't look crushed. */
.decorated-block.first,
.event.first {
    padding-top: 2em !important;
}

/* TODO: what about the other pages?
.venue has to do with the map page, where no events are listed.
.event has to do with an Event item that may have full, brief or both contents
and titles. Or a popup/modal display, which is missing the ".event" class above it.
*/
.decorated-block .title,
.event .title,
.venue .title {
    font-size: 120%;
    line-height: 125%;
    margin: 0 0 0.75em;
    position: relative;
    color: #101720;
}
.event .title + .per-event-widget-box {
    margin-top: -0.5em;
}
.modal.modal-event .title h2,
.decorated-block .title h2,
.event .title h2,
.venue .title h2 {
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    display: inline;
}

.event h2.event-title {
    font-size: 110%;
}
.full-listing .title h2 {
    color: hsl(214 28% 39% / 1);
}


/*
 "use-brief" could be done more efficiently by rewriting old code, but this
 will do. The class is added and removed by JS.
*/
.brief-listing,
.full-listing {
    position: relative;
}

.brief-listing {
    display: none;
}

.use-brief .brief-listing {
    display: flow-root;
}
.use-brief .full-listing {
    display: none;
}

.full-listing-body {
    display: flow-root;
}

/*
 The Link and Calendar icons go in this container. New popups from here, so add
 position: info.
 Changing per-event-widget-box to flex allowed removing some old spacing styles.
 The wrapper is only shown in a full-listing, and no longer exists in the
 brief-listing part of the code.
*/
.per-event-widget-box {
    margin-bottom: .5em;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.0em;
}
/* Icons collected in the icon tray for full-listing */
.per-event-widget-box .fa {
    vertical-align: middle;
}

.link-maker {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
}
/* The icon for the popup that provides link text */
.per-event-widget-box a,
.per-event-widget-box .linkmaker-wrap,
.per-event-widget-box .link-maker,
.per-event-widget-box .calendar-wrap {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
    transition: color .3s ease;
}

.full-listing .per-event-widget-box .link-maker,
.full-listing .title .link-maker {
    cursor: pointer;
    display: inline;
    vertical-align: middle;
}

/* Add .event to override the existing .event a...*/
.event .per-event-widget-box a:hover,
.per-event-widget-box .linkmaker-wrap:hover,
.per-event-widget-box .calendar-wrap:hover,
.per-event-widget-box .link-maker:hover,
.full-listing .title .link-maker:hover {
    color: var(--clickableLinkColorHover, hsl(204deg, 50%, 60%));
}

.per-event-widget-box .linkmaker-wrap:hover,
.per-event-widget-box .calendar-wrap:hover {
    text-decoration: none;
}


/* Since this will no longer displace code, it doesn't need to be inline-block */
.cal-code {
    /* display: inline-block; */
    /* margin-left: .5em; */
    vertical-align: top;
}

/* The display made by the link-maker's JS that shows the URL text. */
.per-event-widget-box .link-display {
    margin-bottom: .25em;
    color: hsl(204 50% 20% / 1);
}

.per-event-widget-box .cal-code,
.per-event-widget-box .link-display {
    font-size: 1.1rem;
    font-weight: normal;
}
/* Simplify by building it once then hiding. */
.link-maker.closed .link-display { display: none; }
/*
 These are the popovers from a clickable in .per-event-widget-box. They must
 make cover the text instead of displace it.
*/
.link-maker .link-display,
.cal-code .popup-cal {
    z-index: 1;
    position: absolute;
    display: table;
    vertical-align: top;
    background: hsla(41, 25%, 91%, 0.97);
    padding: .5em;
    margin-left: .5em;
    margin-top: .25em;
    border: 1px solid hsla(216, 50%, 40%, .50);
    border-radius: .25em;
    box-shadow: 1px 1px 3px 1px hsla(216, 50%, 40%, .50);
}

/*
* This, oddly, fixes a scroll to top of page bug in the calendar code.
* https://github.com/carlsednaoui/add-to-calendar-buttons/issues/13
*/
.cal-code .popup-cal input.add-to-calendar-checkbox[type="checkbox"] {
    display: none;
}

/* Additions to the provided calendar code; extra specifiers to override. */
.cal-code .popup-cal .add-to-calendar-checkbox~a {
    width: 9.5em; /* 320px iPhone compromise to not go beyond the screen edge */
    margin-left: 1em;
    line-height: 130%;
    padding: 0.25em 0;
    margin-top: 0.25em;
}

.cal-code .add-to-calendar-checkbox~a:before {
    vertical-align: middle;
}

.decorated-block.first,
.event.first,
.venue.first {
    padding-top: 1.5em !important;
    box-shadow: none;
}

.event a, .event a:visited {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
    transition: color .4s ease;

}
.event a:hover {
  color: hsl(0 0% 40% / 1);
  text-decoration: none;
}

/* The border div matches the size of the item padding */
.decorated-block .item-border,
.event .item-border,
.venue .item-border {
    position: absolute;
    height: 2em;
    width: 100%;
    top: 0em;
    box-shadow: 0px -11px 13px -13px;
}
.decorated-block.first .item-border,
.event.first .item-border,
.venue.first .item-border {
    display: none;
}

.item-border .border-rh,
.item-border .border-lh {
    width: 24px;
    height: 36px;
    position: absolute;
    top: -16px;
}
.item-border .border-lh {
    left: -12px;
    background: url('/images/Treble_Clef_without_line-24x36-blue.png') no-repeat;
}
.item-border .border-rh {
    right: -12px;
    background: url('/images/Treble_Clef_without_line-24x36-blue.png') no-repeat;
}
.item-border .border-cen {
    margin: 0 11px;
    height: 3px;
    top: 0;
    position: relative;
    background-color: #8FA0Bf;
    background-image: linear-gradient(to left, #8FA0BF 0%, #30E1FF 50%,
        #8FA0BF 100%);
}

/*
 These need the full-listing qualifier because the brief-listing structure is
 different: brief uses a float, while this is all flex. Both full and brief
 listings use this. It start with:
 '<div class="titleWrapper"><h2 class="event-title">...
*/
.full-listing .title {
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
}


/* .eventTitleInfo wraps date and price, but only in full div */
.full-listing .title .eventTitleInfo {
    text-align: right;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    column-gap: 0.5em;
}

/* Close button interference avoidance */
.modal-event .full-listing .title .eventTitleInfo {
    margin-right: 1em;
    text-align: left;
}

.eventTitleInfo .eventCost {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.eventTitleInfo .eventCost img {
    max-width: 100%;
    height: auto;
}
.eventTitleInfo .date {
    font-size: 84%;
    font-weight: normal;
    white-space: nowrap;
}

.use-brief .event .item-border {
    display: none;
}

.brief-listing {
    width: 100%;
    background: rgba(255,255, 240, .9);
    margin-bottom: 1.5em;
}

.brief-listing .title h2 {
    padding: 0; /* for the brief, narrow display */
}
.brief-listing .details-wrapper {
    /* font-size: 90%; */
    display: block;
    width: initial;
    float: none;
}
.brief-listing .details-wrapper .titledate-info {
    display: inline-block;
}
.brief-listing .title,
.brief-listing .titleWrapper,
.brief-listing .titleWrapper h2 {
    display: inline;
    float: none;
}
/* Make room for the + button */
.brief-listing .title {
    display: block;
    margin: 0 48px 0 0;
}

/* The more button and icon */
.brief-listing .launch-info {
    font-size: 90%;
    display: inline;
    width: initial;
    float: right;
    margin-left: 1em;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
}
.brief-listing .launch-info:hover {
    color: var(--clickableLinkColorHover, hsl(204deg, 50%, 60%));
}

/* Don't show the helper text, just the + icon. */
.brief-listing .launch-info .launch-text {
    font-size: 120%;
    margin-left: .5em;
    display: none;
}

.brief-listing .time-start {
    white-space: nowrap;
}

/*
 Bring in the jquery.modal styles early so the will be overridden
*/
.blocker {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    overflow: auto;
    z-index: 1;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.75);
    text-align: center;
}
.blocker:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
}
.blocker.behind {
    background-color: transparent;
}
.modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    max-width: 500px;
    box-sizing: border-box;
    width: 90%;
    background: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px #000;
    text-align: left;
}

.modal a.close-modal {
    position: absolute;
    top: -12.5px;
    right: -12.5px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/images/modal-close-button-outlined.png);
}

/* End of jquery.modal styles */
/*
 The close button is hidden if the blocker is not above the z-index of
 the fixed-header title.
 */
.cr-modal.blocker,
.crblocker.blocker {
    z-index: 200;
    padding: 5% 2%;
    background-color: hsl(191deg 15% 30% / 75%);
    background-color: hsl(191deg 15% 20% / 80%);
}

.crblocker.blocker.current {
    display: flex;
    justify-content: center;
    padding-top: max(3em, 5%);
}

/* The button was hard to tap. */
.crmod-content.modal a.close-modal {
    width: 40px;
    height: 40px;
}

.crmod-content.modal {
    max-width: 800px;
    width: 95%;
    padding: 4%;
    /* Room for icon for closing */
    padding-top: max(4%, 2em);
    margin-bottom: 0;
    margin-top: 1em;
    background: hsl(84, 50%, 95%);
    background: linear-gradient(to bottom, hsl(39, 70%, 97%),hsl(84,40%,95%) 100%);
    box-shadow: 0 0 13px 3px hsl(185deg 50% 35% / 60%);
}
/* Add items from jqmcss and override. */
.crmod-content.modal {
    border-radius: 8px;
    /* Shows the entire item, but can't scroll it. Sometimes!! */
    height: fit-content;
    /* Need to replace the inline style of "inline-block" with "flex". */
}

.crmod-content.modal-event .event {
    padding: 0;
    margin: 0;
}
.crmod-content.modal-event .event .content {
    max-height: unset;
}
.crmod-content.donate {
    background: hsl(84, 50%, 80%);
    font-size: 130%;
    color: hsl(32, 75%, 20%);
    font-family: var(--xheadingFonts, MuseoSlab500, Georgia, "Times New Roman", Times, serif);
    border: hsl(32, 75%, 20%) 3px solid;
    background: linear-gradient(to bottom, hsl(191,65%,90%),hsl(84,40%,80%) 100%);
}
.crmod-content.donate .cuniculus {
}
.crmod-content.donate .cuniculus:after {
    clear: both;
    display: table;
    content: '';
    height: 1px;
}
.cuniculus .rocker-rabbit {
    max-height: 100%;
    float: right;
    margin: 0 0 10px 10px;
}
.crmod-content.modal-event .title h2 {
    margin-top: 0;
    margin-bottom: .25em;
    line-height: 1.25em;
}
/* .full-listing-body is almost always identical to .description */
.crmod-content.modal-event .full-listing-body {
    margin-top: .5em;
}

/* The brief listing can cause a modal dialog with more information. */
.single-event {
    visibility: hidden;
    position: absolute;
    width: 90%;
    height: 90%;
    background: red;
    margin: 50px auto;
}
.single-event .active {
    visibility: visible;
}

/* Not for modal. */
:not(.modal).event .content {
    /* max-height: initial;  */
    padding: 0;
    /* Stops scroll bars on narrow screen */
    padding-bottom: .5em;
    border: none;
    background-color: transparent;
    box-shadow:  none;
    /*box-shadow:  0px -15px 15px -10px rgba( 119, 123, 127, .5) inset;*/
    overflow: auto;
    position: relative;
    margin: 0;
    clear: both;
    border-radius: 5px;
}

.full-listing .loc .description  {
    border-top: .125em solid #eee;
    padding-top: .625em;
    margin-top: .75em;
}

.description h4 {
    margin-bottom: 0;
}
.description h3 {
    margin-bottom: 0;
}

/* .content-text is in .full-listing, .short-desc is in .brief-listing;
 both are the event description texts. */
.content-text p,
.short-desc p {
    margin: 1.25em auto;
}

.content-text > p:first-of-type {
    margin-top: 0;
}

.content-text .reschd,
.short-desc .reschd {
    color: hsl(0 70% 35% / 1);
    font-weight: bold;
}


.performer-schedule .perform-time {
    white-space: nowrap;
    font-family: Georgia, "Courier New", "DejaVu Sans Mono", monospace;
    text-transform: uppercase;
}

.description .performers-block {
    min-width: 48%;
    float: left;
    padding: 0 2%;
    box-sizing: border-box;
}

.performer-schedule .perform-time:before {
    content: " - ";
}

.description hr {
    clear: both;
}


/*
 * Optional part of the event description, a list of performers and their
 * descriptions and links.
 */
.section-performers {
    clear: both;
    color: hsl(43, 75%, 5%);
    background-color: hsl(36deg 60% 95% / 50%);
    border-radius: 0.25em;
    padding-top: .2em;
    margin-top: .5em;
    padding: .5em;
    box-shadow: 0 0 4px inset hsl(43deg 20% 25% / 50%);
}
.section-performers .section-title {
    font-size: 110%;
    margin: .25em 0 .5em 0;
    font-style: italic;
}

.section-performers ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* A single performer within the section */
.section-performers .performer {
    display: block;
    margin: 0;
    padding: 0 0 .5em;
    padding-left: 1em;
}

/* Clear the social buttons to avoid scroll bars */
.section-performers .performer:after {
    clear: both;
    display: table;
    content: '';
    height: 3px;
}

.section-performers .performer .perf-open {
    margin-left: -1em;
    display: inline-block;
    line-height: 2em;
}
.section-performers .performer .perf-open:hover {
    cursor: pointer;
}

.performer .perf-open .perf-name {
    font-size: 1em;
    font-weight: bold;
    color: hsl(43, 70%, 20%);
    vertical-align: middle;
}
/* Don't show non-functional buttons. */
.no-js .perf-name-expand { display: none; }
.performer .perf-open .perf-name-expand {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
    margin-left: 0.5em;
}
.performer .perf-open:hover .perf-name-expand {
    color: var(--clickableLinkColorHover, hsl(204deg, 50%, 60%));
}


/* Separate More info section, remove the indent, no need for icon indent. */
.performer .performer-more {
    margin-top: .5em;
}

/* make social buttons easier to access (2022). */
.performer-more .social-icons {
    display: block;
    margin-top: 0.5em;
}

.performer-more .social-icons {
    display: flex;
    margin-top: 0.5em;
    padding-left: 0;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.performer.show-details .perfsec-info {
    margin-top: 1em;
}
.performer.show-details .perf-open .plus-stack {
    display: none;
}
.performer.hide-details .perfsec-info { display: none; }

.modal .performer.hide-details .perfsec-info {
    display: block;
    margin-top: .5em;
}
.modal .performer .perf-open .perf-name-expand { display: none; }


/* Similar to the pm-button, but not identical. */
.perf-open .perf-name-expand .fa-stack {
    position: absolute;
}

.perf-open .perf-name-expand-NOPE {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
    font-size: 90%;
    display: inline-block;
    margin-left: 1em;
    position: relative;
    width: 2em;
    height: 2em;
    line-height: 2em;
    cursor: pointer;
    /* bottom: 1em;
    right: 1em; */
}


/* Typically .social-icon will be on a LI, but sometimes directly on an A elem. */
.event-links .social-icon,
.series-group .social-icon,
.performer-more .social-icon {
    width: 29px;
    height: 29px;
    display: inline-block;
    padding: 1px;
    vertical-align: bottom;
    margin-left: .5em;
}

a.social-icon,
.event-links .social-icon a,
.performer-more .social-icon a {
    outline: none;
}

.social-icon img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*
Similar, but not identical to the performer icon layout.
It is possible that not all items in the list are social icons.
*/
.event-links ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.event-links li {
    display: inline-block;
    box-sizing: border-box;
}


/* .venue p.address { margin-top: 0 }*/

.venue .otherMap { float: right; margin: 0 0 1em 1em; max-width: 100%; }
.venue .gMap { position: relative; float: left; max-width: 100%; }
@media screen and (min-width: 450px) {
    .venue .otherMap { float: right; margin: 0 0 1em 1em; max-width: 400px; }
    .venue .gMap { position: relative; float: left; max-width: 400px; }
}

/* This was hard coded in the div. */
.imageDiv.gmap-image-wrap:not(.live-map) {
    cursor: pointer;
}
/* Add bg for when there is no map */
.venue .gmap-image-wrap {
    width: 400px; height: 400px; max-width: 100%;
    background: gray;
}
.venue .gMap iframe { position: absolute; top: 0; left: 0; }
/* max-width breaks the controls on Google maps */
.venue .gMap img { max-width: none; }
.imageDiv img { display: block; max-width: 100%; height: auto; width: auto;}
/* .imageDiv .gMapStaticImg { position: absolute; z-index: 0; top: 0; left: 0; } */

/* The "bigger map" clickable, which needs to work on a small screen. */
.embedMapLink {
    font-size: 95%;
    line-height: 157.89%;
    margin: 1.5789em 0;
    float: left;
    clear: both;
}
/* Since the maps will die soon, make sure the view bigger link is easy to click. */
.gmap2-link-wrapper {
    align-items: center;
    background: hsl(40deg 30% 70% / 50%);
    border: 1px solid hsl(40deg 40% 50% / 75%);
    border-radius: .312em;
    display: flex;
    font-size: 1.15em;
    gap: .5em;
    padding: .625em;
}

.gimg-wrp {
    display: inline-block;
    width: 40px;
    height: 40px;
}
.gmap2-link-wrapper .gimg-wrp img {
    display: block;
    max-width: 100%;
    height: auto;
}

img.scalable {
    display: block;
    max-width: 100%;
    height: auto;
}


/* The Year page need very visible H1 titles. */
.series-group-head {
    background: hsla(208, 80%, 75%, .5);
    box-sizing: border-box;
    position: relative;
    padding: .5em;
    box-shadow: 0 3px 3px hsla(208, 20%, 10%, 0.75) inset;
    border-radius: 10px 10px 0 0;
    margin-top: 2em;
    /* http://www.colorzilla.com/gradient-editor/#2677bf+0,77b7ef+30,2677bf+100&0.5+0,0.5+100 */
    background: linear-gradient(to bottom, hsla(208,67%,45%,0.5) 0%,hsla(208,79%,70%,0.5) 30%,hsla(208,67%,45%,0.5) 100%);
}

.series-group-head h2 {
    line-height: 1.2;
}

.js .series-group-head h2 {
    margin-top: 0;
}

.no-js .series-group-head .series-summary {
    display: none;
}

.series-group-head .series-events-group {
    display: block;
}

/* page-performers... */
.seas-hide {
    display: none;
}

.perf-head,
.perf-body {
    position: relative;
    margin-left: 0.75em;
    margin-bottom: .75em;
}

/* This is set off by an expand/contract div when js is working. */
.perf-section .perfb-title h3 { font-size: 1em; }
.perfb-title { display: none; }
.no-js .perfb-title { display: block; }

.no-js .perf-section.decorated-block .button-more { display: none; }


.perf-button-wrap {
}
.perf-button-wrap:after {
    content: "";
    line-height: 1px;
    display: table;
    clear: both;
}

/* Does almost nothing, but a minor indication that the section opened. */
.series-group.series-open .series-group-head {
    color: hsl(192 100% 17% / 1);
}

/* Only in the series group is it changed to absolute. But it's a wrapper, so safe. */
.series-group .button-more {
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
}

.perf-section.decorated-block .pm-button {
    margin-right: 0.5em;
    margin-left: 0;
}

/*
 This was a rewrite of stacked-stacks. It changed a lot of related CSS, which
 for the most part was interfering or no longer needed.
 Turn this into a stack using FA's stack settings. This should take care of
 all stacked-stack positioning. Other classes are used for specific margin and
 font size changes.
*/
.fayfp-stacked-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em;
}
.fayfp-stacked-stack .fa-stack {
    position: absolute;
    left: 0;
}

/* The first one is probably all that is needed. */
.button-more .pm-button {
    color: var(--clickableLinkColor, hsl(204deg 75% 40%));
    margin-left: 1em;
    cursor: pointer;
}

/* .series-open is the open/closed indicator on series; sec-open for performers. */
.perf-section.decorated-block .sec-open .pm-button .plus-stack,
 /* Both of these do the same thing, using new and older methods. */
.series-group .button-more:not(.collapsed) .pm-button .plus-stack,
.series-group.series-open .pm-button .plus-stack {
    display: none;
}

/*
 * The series-text class is being replaced by series-text-blk. The site will only have one of the styles.
 */
.series-text {
    padding: .25em .5em;
    background: hsla(206, 30%, 93%, .5);
}

.series-text-blk {
    padding: .25em .5em;
    display: flex;
    flex-direction: column;
    row-gap: .5em;
    border-radius: 0 0 .5em .5em;
    background: hsl(206deg 30% 93% / 50%);
    background-image: linear-gradient(180deg, hsl(0deg 0% 0% / 3%),
        hsl(206deg 43% 99% / 20%), hsl(0deg 0% 0% / 3%));
}
.series-text-blk .ser-sep {
    height: .25em;
    background: hsl(205deg 45% 76% / 30%);
    background-image: linear-gradient(90deg, transparent, hsl(206deg 43% 99% / 50%), transparent);
}
.series-text-blk .series-more {
    display: flex;
    column-gap: .5em;
    flex-wrap: wrap;
    align-items: center;
}


#eventsAdContainer {
    /* iPhone is only 320px, so this needs to go beyond the .content-side-padding. */
    margin: 0 var(--reverseSmlSidePad, 6px) 1.5em var(--reverseSmlSidePad, 6px);
    clear: both;
}

.hide-intro-section #eventsAdContainer {
    /* margin-top: 0; */
}

/* new events ad hider */
#eventsAdContainer.hide-ad-sec { display: none; }


/*
* Temporary notice about Conejo.rocks URL
*/
.new-url-alert {
    background: hsl(47, 15%, 35%);
    color: white;
    padding: .5em;
    text-align: center;
}
.new-url-alert  .the-url {
    font-size: 120%;
    font-weight: normal;
    font-family: var(--xheadingFonts, MuseoSlab500, Georgia, "Times New Roman", Times, serif);
    color: hsl(215, 95%, 95%);
}

.new-url-alert  a .the-url {
    text-decoration: none;
    color: hsl(215, 95%, 95%);
    border-bottom: 2px solid hsl(215, 95%, 95%);
    box-shadow: inset 0 -2px 0px hsl(215, 95%, 95%);
    transition: border .20s cubic-bezier(.33,.66,.66,1);
}
.new-url-alert  a:hover .the-url {
    border-bottom: none;
    text-decoration: none;
    box-shadow: none;
}

/* The swing code */
.animated {
animation-fill-mode: both;
animation-duration: 4s;
animation-iteration-count: 3;
}

@keyframes swing {
10% { transform: rotate(8deg); }
20% { transform: rotate(-4deg); }
40% { transform: rotate(2deg); }
80% { transform: rotate(-1deg); }
100% { transform: rotate(-0.5deg); }
}

.swing {
/* horiz, vert */
transform-origin: 150px 80%;
animation-name: swing;
animation-delay: 2s;
}
/* /The swing code */

/* Donate test, affect multiple locations. */
.donate {
    transform-origin: 150px 80%;
    transform-origin: 50% 50%;
    animation-name: swing;
    animation-delay: 5s;
    animation-fill-mode: both;
    animation-duration: 3s;
    animation-iteration-count: 3;
}

@keyframes animate-cloud {
    from{background-position:90px 100%}to{background-position:0 100%}
}

#title-x{
  animation: animate-cloud 2s linear infinite;
}

.featured-image {
    display: block;
    min-width: 60px;
    max-width: 15%;
    float: right;
    margin: 0 0em .5em 01em;
}

/*
 Add the open mic while no events are available.
 Some of the row/col styles are used in other places. It is old-style layout
 for not content and shouldn't be visible. It's another project to check that.
 */
.row {
}
.row:after {
    content: " ";
    line-height: 1px;
    display: table;
    clear: both;
}
.col {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.col.right {
    float: right;
}
.col-25 {
    width: 25%;
}
.col-75 {
    width: 75%;
}
.scaleable.tapper {
    min-width: 150px;
    padding: 0 0 15px 15px;
}
.mic-night-image {
    background: rgb(46, 163, 242); padding: 10px;
}
.scaleable img,
.mic-night-image img {
    max-width: 100%;
    height: auto;
}

/* Update no event display styles. */
/* Wraps the section (nothing-tosee), which has a flex interior (nts-block) */
.nothing-tosee {
    display: flow-root;
}
.nts-block {
    display: flex;
    justify-content: space-between;
}

/* Impossible to see shrinking. May want to modify when it's only 2 items. */
@media screen and (max-width: 400px) {
    .nts-block {
        flex-direction: column-reverse;
        align-items: center;
    }
    .nts-block > div {
        max-width: 300px;
    }
    .scaleable.tapper {
        padding: 0;
    }
}


.nts-block .bmiddle {
    flex-grow: 2;
}
.micnite-wrap {
    display: flex;
    flex-direction: column;
    max-width: 250px;
}
.mic-night-image {
    background: hsl(204 88% 56%);
    padding: .625em;
    padding-bottom: 0;
}
.mic-night-image img {
    max-width: 100%;
    height: auto;
}
.mic-night-msg {
    padding: .625em;
    background: hsl(204 88% 56%);
    color: white;
    font-size: 110%;
}
.mic-night-msg p {
    margin: 0;
}
.mic-night-msg a {
    color: black;
}
.mic-night-msg a:hover {
    color: hsl(0 85% 40%);
    text-decoration: none;
}

/* yon50 is for a temporary image through Nov. 2025. */
.bmiddle .yon50 {
    display: flex;
    justify-content: center;
    min-width: 125px;
}
.bmiddle .yon50 img {
    max-width: 100%;
    height: auto;
    transform: scale(0.85);
}




#ulid {}
/* The ID for the main menu. The #main-menu is a wrapper for the UL.
 Classes are doing the styling, page-main-menu.
 */
body > .page-main-menu {
    position: relative;
    width: 100%; /* for the nav-header location */
    position: absolute;
    z-index: 6; /* Above the header during scrolling. */
}
body > .page-main-menu.fixed-menu {
    position: fixed;
    z-index: 6;
    top: 0px;
}
.no-js body > .page-main-menu {
    position: relative;
}
.no-js .nav-primary .nav-header {
  display: none !important;
}
.no-js .collapse { display: inherit; }
.no-js .nav-primary .list-wrapper {
    display: block;
    position: relative;
}

.nav-primary {
    position: relative;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
    margin: 0px;
    display: flow-root;
}


.nav-primary .list-wrapper .title {
    margin: 0 0 .333em 0;
}

/* The UL is class .nav; use the class for manipulation. */
.nav-primary .nav {
    background: hsl(210deg 40% 80% / 98%);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
}

/* Works well for the scrolling menu, not needed with no js. */
.js .nav-primary .nav {
    border-bottom: rgba(79, 98, 102,.8) 3px solid;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
}

.nav-primary li {
    font-size: 110%;
    list-style-type: none;
    padding: 0;
    margin: 0.5em 0;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px hsla(210, 30%, 9%, 0.4);
    padding-right: 64px; /* for the burger */
    display: flex;
    align-items: center;
}
.nav-primary li.first {
    margin-top: 0;
}
.nav-primary li.last {
    margin-bottom: 0;
}


.nav-primary li span {
    font-weight: bold;
    padding: .5em;
    box-sizing: border-box;
    display: block;
}

.nav-primary li span:hover {
    background-color: hsla(212, 60%, 90%, 0.8);
}

.nav-primary li a {
    display: block;
    width: 100%;
}
.nav-primary li a:hover {
  z-index: 1;
}
.nav-primary li a span {
    font-weight: normal
}

.nav-primary .nav > li.active {
    background: hsla(212, 20%, 85%, 0.8);
}

.nav-primary .navbar-toggle {
    float: right;
    cursor: pointer;
}
.nav-primary .navbar-toggle:hover {
    background-color: hsla(212, 60%, 90%, 0.4);

}

.nav-primary .nav-header .title {
    color: rgba(76,76,38,.95);
    font-weight: bold;
}

/*
 This was from 82Hz. It has been modified for an absolute position menu and
 a flex layout, so there have been a lot of changes.
 The nav element in #rhContainer has classes nav-primary and navbar
 .sidebar-primary in #rhContainer wraps the buttonBox
*/

/* There is a nav-header and a list-wrapper title */
.nav-primary .title {
    color: rgba(76,76,38,.95);
    font-weight: bold;
}
.nav-primary .list-wrapper  .title {
    display: none;
}
.nav-primary .nav-header .title {
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-primary .nav-header {
    position: relative;
    display: flow-root;
    margin: 10px;
    background: #e4e7ea;
    /* border-top: rgba(79, 98, 102,.8) 3px solid; */
    /* border-bottom: rgba(79, 98, 102,.8) 3px solid; */
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    border-radius: 0.25rem;
    box-shadow: 0 0 3px hsl(0deg 0% 20% / 70%);
}
/* Overrides a FA style */
.nav-header .btn-navbar .fa-bars.fa-border {
    border-radius: 0.25rem;
    box-shadow: 0 0 3px hsl(0deg 0% 20% / 70%);
}


.not-collapsed .nav-primary .nav-header {
    border-bottom-width: 1px;
}
.nav-primary .list-wrapper {
    margin-top: 0px;
    margin-left: 10px;
    border-radius: 0 0 0px 10px;
    overflow: hidden;
    width: 85%;
    position: absolute;
    right: 0;
}
.nav-primary .list-wrapper.collapse.show,
.nav-primary .list-wrapper.collapse.in {
    box-shadow: -1px -1px 3px 1px rgba(0,0,0,.5);
}

.collapse {
  display: none;
}

.collapse.show,
.collapse.in {
  display: block;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* end of copied navbar */


/* Main page image, etc. for where's the list info. */

/* round-rabbit is obsolete, replaced by center-block-go. */
.round-rabbit {
    display: flex;
    position: relative;
    justify-content: center;
    justify-items: center;
}
.round-rabbit img {
    display: block;
    width: 180px;
    height: auto;
    max-width: 100%
}


.center-block-go {
    display: flex;
    justify-content: space-around;
    gap: 1em;
}
/* yon50 is for a temporary image through Nov. 2025. */
.center-block-go .yon50 {
    display: flex;
    justify-content: center;
}
.center-block-go .yon50 img {
    max-width: 100%;
    height: auto;
    transform: scale(0.85);
}

.center-block-go .rrwrap img {
    display: block;
    height: auto;
    max-width: 100%;
}
/* rrwrap wraps rr-wrap. */
.rrwrap {
    display: flex;
    position: relative;
    justify-content: center;
    justify-items: center;
}

.wtb-wrap {
    display: flex;
    width: 100%;
    position: absolute;
    margin: 0;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.wtb {
    padding: 0.5em;
    margin: 0;
    max-width: 500px;
    padding: 0.5em;
    text-align: center;
    line-height: 140%;
    height: 100%;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    justify-items: center;

    font-size: 125%;
}

@media screen and (min-width: 640px) {
    .wtb {
        font-size: 140%;
    }
}
@media screen and (min-width: 960px) {
    .wtb {
        font-size: 200%;
    }
}


.center-block-go a.toprabbit {
    position: absolute;
    opacity: .15;
}
.rr-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

@keyframes rabbit-morph {
  0% { transform: scale(1.25); opacity: .15; fill: transparent; }
  50% { transform: scale(1.0); opacity: .65; }
  75% { transform: scale(0.75); opacity: .85; }
  90% { transform: scale(0.45); opacity: 1; }
  100% { transform: scale(1.25); opacity: .15; }
}
g#rabbitFocus {
    transform: scale(1.25);
    transform-origin: center;
}

g#rabbitFocus {
    animation: rabbit-morph 5s linear 2s infinite;
}

@media screen and (min-width: 640px) {
    .round-rabbit img {
        width: unset;
    }
}


/*
 A display for slow loading. It involves closing the menu, then displaying
 an image for a short time to indicate something is happening.
*/
.coverall {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.coverall.black {
    background: black;
}

.coverall.black50 {
    background: hsl(0deg 0% 0% / 50%);
}
.coverall.notdeadyet {
    z-index: 8;
    background: hsl(25deg 75% 47.06% / 30%);
}
.notdeadyet img {
    max-width: 100%;
    height: auto;
}
.notdeadyet.fade-out {
    animation: fadeOut 2s;
}
/* A message over the image. */
.notdeadyet .working {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150%;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


/* GoToTop button */
@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}
.btt-wrap {

    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 1em; /* Place the button at the bottom of the page */
    right: 1em;
    z-index: 99;
    outline: none;
    background-color: hsl(175deg 65% 35% / 90%);
    color: white;
    cursor: pointer;
    padding: .5em;
    border-radius: .5em;
    border: 2px solid hsl(60 88% 97% / 1);
    font-size: 18px;
    overflow: hidden;
    transition: transform 200ms ease-out;
    transform:scaleY(0);
    transform-origin:right;
}
.btt-wrap.show {
    transform:scale(1, 1);
    display: inline-block;
}
.btt-wrap:not(.show) {
    display: inline-block;
    transform:scale(0, 0);
}




/* Remove very narrow screen restrictions. 350px is random. */
@media screen and (min-width: 350px) {

    .cal-code .popup-cal .add-to-calendar-checkbox~a {
        width: 11em; /* 320px iPhone compromise to not go beyond the screen edge */
    }

    #eventsAdContainer {
        /* iPhone is only 320px, so this needed to go beyond the .content-side-padding.
        margin-left: auto;
        margin-right: auto;
        */
    }
}


/* This is the most significant breakpoint. */
@media screen and (min-width: 560px) {

    body > header,
    body > footer,
    h1,
    .share-buttons-wrapper {
        background: #26354c url(/images/rect-shadow-title-bg.png)
            repeat-x center bottom;
        background: var(--defaultPageBgColor) url(/images/rect-shadow-title-bg.png)
            repeat-x center bottom;
    }

    h1 {
        padding: 1.5em;
        font-size: 120%;
        position: relative;
        margin-left: 0;
        margin-right: 0;
    }

    /* List of buttons at the top of the main DB content, in a heading.
    The font is so edges line up using em padding.
    */
    .share-buttons-wrapper {
        padding: .5em 1.5em;
        font-size: 120%;
    }
    .share-buttons-wrapper .share-label {
        font-size: 80%;
    }

    h1,
    h1 a {
        color: #FFFCF7;
        transition: color 0.2s ease;
    }
    #eventsAdContainer {
        /* iPhone is only 320px, so this needed to go beyond the .content-side-padding.
        */
        margin-left: auto;
        margin-right: auto;
    }

    /* These were styled separately, but now live in a header than handles the style.
    TODO: when pages are converted, prefix all h1 and .share-buttons-wrapper styles with
    "header". The only H1 is in the main section.
    */
    .main-dbcontent header h1 {
        padding: 1.5em;
        margin-left: 0;
        margin-right: 0;
    }
    .main-dbcontent header .share-buttons-wrapper {
        padding: .5em 1.5em;
    }

    body > header p { font-size: 130% }
    .content-side-padding { padding-left: 24px; padding-right: 24px }
    .narrow-fullwidth-content-side-padding { margin-left: inherit; margin-right: inherit; }
    /* This makes most content 48px less than content-body, or 96px less than min-width */
    .content-wrapper { padding-top: 24px; padding-bottom: 24px; }

    .decorated-block,
    .event,
    .venue {
        padding-top: 2em;
    }
    .use-brief .event {
        padding-top: 0em;
        box-shadow: none;
        margin-bottom: .5em;
    }


    h1 {
        border-radius: .25em .25em 0 0;
        font-size: 140%;
    }

    :not(.modal).event .content {
        /* was 9.5em until the performer section plus/minus addition */
        max-height: 14em;
        padding: .65625em .75em;
        background-color: hsl(0 0% 99% / 0);
    }

    .full-listing .content {
        box-shadow:  0px -15px 15px -10px rgba( 119, 123, 127, .5) inset;
    }

    /* Restore 2019 changes made for narrow screen */
    .brief-listing .title h2 {
        padding: 0 1em 0 0;
    }
    .brief-listing .title {
        display: inline;
        float: none;
        /* illegal with inline, necessary if that is removed... margin: initial;*/
    }

    .brief-listing .launch-info .launch-text {
        display: initial;
    }

    .modal .full-listing .content,
    .modal.full-listing .content {
        box-shadow:  none;
    }

    /* Remove the fixed header */
    section.page-intro .jump-button {
        position: relative;
        float: left;
        top: 0em;
        left: -36px;
        right: auto;
        margin: .75em -1.25em .75em 0;
        margin-right: -1.25em;
        z-index: inherit;
    }
    .hide-intro-section section.page-intro .jump-button {
        display: none;
    }

    section.page-intro .jump-button a {
        border-left: none;
        border-radius: 20px 20px 20px 20px;
    }

    /* Move all of this stuff */
    #rhContainerFloat {
/*        float: none;
        width: 100%;
        margin: 0 0 1em 0;
        border: none;
        padding: 0 0 1em;
        background: none;
*/
        /* The floating guitar steals the clicks if this does not having a higher z index */
        /* Compromise between guitar and the menu that must open above it, which is 5. */
        z-index: 3;
    }

    #rhContainerFloat {
        float: right;
        width: 200px;
        /* The floating guitar steals the clicks if this does not having a higher z index */
        margin: 0 0 1.5em 19px;
        right: -24px;
        border-left: 1px solid #dddddd;
        border-bottom: 1px solid var(--listingContentBorderColor);
        border-radius: 0 0 0 5px;
        background-color: var(--contentBgColor);
        background: linear-gradient(45deg,  rgba(153,153,153,0.4) 0%,rgba(203,203,203,0) 66%,rgba(229,229,229,0) 100%);
    }

    #rhContainerFloat .buttonBoxNbg {
        padding: 5px;
        margin: 25px 5px 5px 5px;
    }
    #rhContainerFloat .buttonBoxNbg ul {
        display: block;
        margin: 1.765em 0em 0em 0em;
        padding-left: 0;
    }
    #rhContainerFloat .buttonBoxNbg ul li,
    #rhContainerFloat .buttonBoxNbg ul.links li {
        margin: 15px auto;
        display: list-item;
        float: none;
        width: initial;
    }
    .buttonBoxNbg .pp-donate {
        margin: 15px auto 0 0;
    }

    .nav-primary .list-wrapper {
        margin-left: 0;
    }
}


/*
Remove fixed header and go to "wide-mode". Narrow mode stays in effect
until there is space around the content. Until then, everything is 100%
width.
 */
@media screen and (min-width: 640px) {
    /* Let the JS find out about it */
    #css-display-mode:before {
      content: "wide-mode";
    }

    /* Remove the fixed header */
    #fixed-spacer { display: none; }

    body.fixed-spacer-available > header,
    .fixed-header body > header {
        position: relative;
        z-index: inherit;
        top: initial;
        width: auto;
        box-shadow: none;
        padding-right: 0;
    }

    /* Add some side padding, but no shadows yet. */
    .maincontent-outer { padding: 24px }

    .ui-ctrls {
        font-size: var(--mainFontSize);
    }

}
/* Side paddings are mainContent padding + shadow size = 48+24=72px */
@media screen and (min-width: 680px) {
    body { line-height: 150%; }
    p {
        font-size: 1em;
        line-height: 150%;
        margin: 1.5em 0;
    }
    body > header,
    body > footer {
        padding-left: 48px;
        padding-right: 48px;
    }
    #rhContainerFloat .buttonBoxNbg ul li {
        margin: 1.765em auto;
    }

    /* The remaining shadow is a page background for the top of the page. Keep it. */
    .maincontent-outer {
        background: #4b5666 url(/images/rect-shadow-page-bg.png) repeat-x center top;
    }

    /* Move the count out of the intro section */
    #cc-block {
        /* This is needed to enable the display, but with the menus added it needs
        some fine tuning first for all screen sizes. So no display for now. */
        /*display: table;*/
        position: absolute;
        top: -70px;
        left: 50px;
    }

    .current-count {
        margin: 0;
    }

    /* Adding the shadow is the main purpose of this block */
    .maincontent-inner {
        box-shadow: 0 0 25px black;
    }

}

@media screen and (min-width: 680px) {

    body > header p {
        font-size: 150%
    }
    h1 {
        font-size: 1.5em;
    }
}


/*
Move the UI buttons to their own boxed top area. This is where the content
starts to float and flow issues begin.
*/
@media screen and (min-width: 740px) {

    /* These were earlier, but looked too crowded. */
    :not(.modal).event .content {
        border: .09375em solid var(--listingContentBorderColor);
        background-color: hsl(203 10% 98% / 1);
        /* #777B7F */
        /* PB 20170514
        box-shadow: 0px 0px 4px 1px rgba( 119, 123, 127, .5) inset;
        box-shadow:  0px -15px 15px -10px rgba( 119, 123, 127, .5) inset;
         */
    }

    .cal-code {
        font-size: 1.0em;
    }


    body > header p { font-size: 36px; }

    .ui-ctrls {
        display: table;
        padding: 10px;
        border-radius: 0 0 9px 0;
        float: left;
        margin: 0 1.5em 0.5em 0;
        z-index: 2;
        position: relative;
        box-shadow: 2px 2px 9px 0px rgba(0,0,0,.75);
    }

    /* Changed with flex */
    .hide-intro-section section.pre-intro {
        position: relative;
        /* display: block; */
        display: flex;
        float: right;
        margin: 0 0 1.5em 19px;
        right: -24px;
        width: 220px;
        /* Above the para */
        z-index: 1;
    }
    /* Rather than changing margins/paddings, remove the gap. */
    .hide-intro-section section.pre-intro .fb-list {
        gap: 0;
    }

    body.no-ui-ctrl-box section.pre-intro {
        margin-right: 0px;
    }
    .pre-intro .fb-list  {
        padding: 0;
        margin: 0 auto;
        list-style-type: none;
        min-height: 35px;
        /* display: block; */
        /* float: left; */
    }
    #eventsAdContainer {
        clear: left;
    }

    .current-count {
        max-width: 250px;
    }

    /* Side paddings are (eventually) mainContent padding + shadow size = 48+24=72px */
    body > header { padding: 1.5em 72px; }
    body > footer { padding: 1.5em 72px; }

    .maincontent-outer {
        position: relative;
        padding-top: 3em;
        padding-bottom: 1.5em;
        padding-left: 48px;
        padding-right: 48px;
    }

    .featured-image {
        display: block;
        max-width: min(15%, 150px);
        float: left;
        margin: 0 1em .5em 0;
    }
    .featured-image:after {
        content: "";
        line-height: 1px;
        display: table;
        clear: both;
    }
}

@media screen and (min-width: 900px) {
    .current-count {
        max-width: initial;
    }

    section.page-intro .intro-big-image img {display: block;}
    section.page-intro .intro-big-image {
        display: block;
        float: right;
        top: -140px;
        position: relative;
        left: -30px;
        width: 40%;
        height: 140px;
    }

    /* Why here? because it is to avoid the big-image */
    .content-wrapper:not(.hide-intro-section) section.page-intro .introContent p.first {
        clear: left;
    }

    /* Move away from the guitar. */
    #cc-block {
        position: absolute;
        top: -90px;
        left: -70px;
    }

}


/** The OLD media queries; these maxes still should exist. **/
@media screen and (max-width: 680px) {
    .no-js .maincontent-outer,
    body.no-js > header,
    .no-js body > footer {
        padding-right: 0;
        padding-left: 0;
    }
}

@media screen and (max-width: 480px) {
    /* While the jump button is positioned at the top */
    .content-body { overflow: hidden; }
}

/************************************************************************/
/* Will go in a separate file. The new modal/blocker css. It always has the
 *  class "crblocker" to separate the new additions. Eventually "jquery-modal"
 *  class will go away.
 */
/************************************************************************/
/* Animation: fade,  etc. w/o JQ attempt. */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    to {
        opacity: 0;
    }
}