/*
Theme Name:   CDSS
Theme URI:    https://www.cdss.org/
Description:  WPBStarter child theme 
Author:       Anne Campbell
Author URI:   https://www.annecampbelldesign.com
Template:     wpbstarter
Version:      1.0.0
Text Domain:  wpbstarter-child
*/


/* AEC Custom CSS */

/* Base font size (rem units are relative to this) */ 
html { font-size: 22px; }

body { 
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; 
  font-size: 1rem;
}

/* Override styles from Widget Options plugin */
.wpbstarter-blog-list article, 
.widget-area .widget {
    border: none;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
    transition: none;
}







/* ------------- GENERAL TYPE STYLES ------------- */

#content p,
#content section p,
.pum p { font-size: 1rem; }

h1, h2, h3, h4, h5, h6 { 
  font-weight: bold;
}

article h1,
h1.tribe-events-single-event-title { 
  color: #0069aa; 
  font-size: 2rem; 
  line-height: 120%;
}
h2 { color: #0069aa; font-size: 1.5rem; }
h3 { color: #439539; font-size: 1.3rem; }
h4 { color: #0069aa; font-size: 1.2rem; }
h5 { color: #439539; font-size: 1.0rem; }
h6 { color: #0069aa; font-size: 0.9rem; }

blockquote { 
  border: 1px solid gray; 
  border-radius: 0.5rem;
  padding: 0.8rem 1rem 1rem 1rem;
  margin: 0 0 1rem 0;
  display: block;
}
@media screen and (min-width: 1250px) { 
  blockquote.narrow { margin-left: 52%!important; width: 40%!important; }
}

blockquote p.byline, 
blockquote cite { 
  margin: 0; padding: 0;
  font-style: italic;
  text-align: right; 
  display: block; 
}

/* Bulleted lists and numbered lists */

ol, ul { 
  padding-left: 0; 
}

ol li,
ul li { 
  font-size: 1rem; 
  position: relative;
  left: 1rem;
  margin-right: 1rem;
}

/* exception for slideshows */
ul.soliloquy-slider li { left: 0; }


/* Bulleted lists in columns */
ul.columns { 
  columns: 2;
  margin: 1rem 0 2rem 0; 
  padding: 0 0 0 1rem;
	column-gap: 3rem;
	vertical-align: top;
}
ul.columns.threecol { columns: 3; }
ul.columns.fourcol { columns: 4; }
ul.columns.nobullet { list-style: none; padding: 0; }

/* Four-column list (e.g. Winter Family Gathering) */
ul.columns.fourcol li { text-align: center; } 
ul.columns.fourcol li img { 
  display: block; 
  float: none;
  margin: 0 auto;
  max-height: 200px; 
} 

ul.columns li { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
@media screen and (max-width: 800px) { 
  ul.columns { columns: 1; } 
  ul.columns.threecol,
  ul.columns.fourcol { columns: 2; }
}
@media screen and (max-width: 600px) { 
  ul.columns.threecol,
  ul.columns.fourcol { columns: 1; }
}

ul.columns.nobullet > li { margin: 0 1rem 1rem -1rem; }
ul.columns.nobullet ul { list-style: disc; }



/* Two columns of boxes, e.g. on Strategic Plan and Grants pages */
#content div.columns.twocol { 
  columns: 2; 
  column-gap: 2rem; 
  margin: 2rem auto 0 auto; 
}

#content div.columns.twocol > div.specialbox { 
  margin: 0 0 2rem 0!important; 
  width: 100%; 
  display: table; 
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
@media screen and (max-width: 1000px) { 
  #content div.columns.twocol { columns: 1; } 
}




/* Text colors and sizes */
.green { color: #439539; }
.blue  { color: #0069aa; }
.mustard { color: #d99328; }
.berry { color: #84184b; }
.white { color: white; }
.smaller { font-size: 0.9rem!important; }
.bold { font-weight: bold; }
.indent { padding-left: 2rem; }
.shadow { 
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.9); 
  box-shadow: none!important;
}

/* Subtitles within page header (e.g. Daily Antidote of Song) */
h1 span.smaller { 
  display: block;
  padding-top: 0.7rem;
  line-height: 110%;
  font-size: 1.8rem!important; 
}

.clear { clear: both; }


/* Links in content area */ 
#content a,
.pum-content a { color: #439539; text-decoration: underline; }
#content a:active,
#content a:visited,
#content a:focus,
.pum-content a:active,
.pum-content a:visited, 
.pum-content a:focus { color: #0069aa; border: none!important; }
a:hover { cursor: pointer; }

/* Links that are buttons */
#content a.button, 
.pum-content a.button,
#content article.category-country-dance-and-song-archives div.entry-content.ulol p a,
#content article.category-the-country-dancer-archives div.entry-content.ulol p a /* Download PDF buttons in old magazines */ { 
  display: inline-block;
  background: #439539;
  color: white;
  text-decoration: none; 
  font-weight: bold; 
  margin: 0 0 0.5rem 0;
  padding: 0.4rem 1rem 0.6rem 1rem;
  border-radius: 0.5rem;
  line-height: 110%; 
}
#content a.button:hover,
.pum-content a.button:hover,
#content article.category-country-dance-and-song-archives div.entry-content.ulol p a:hover,
#content article.category-the-country-dancer-archives div.entry-content.ulol p a:hover { background: #0069aa; }

#content a.button.buttonsmaller { 
    background: white!important;
    color: #439539!important;
    font-weight: normal;
    font-size: 0.9rem;
    border: 1px solid #439539;
    margin: 0.3rem 0;
    padding: 0.2rem 0.5rem 0.3rem 0.5rem;
}
#content a.button.buttonsmaller:hover { background: #439539!important; color: white!important; }

#content a.button.berry, 
.pum-content a.button.berry { background: #84184b; }

#content a.button.blue, 
.pum-content a.button.blue { background: #0069aa; }
#content a.button.blue:hover, 
.pum-content a.button.blue:hover { background: #439539!important; }

p.centered { text-align: center; }
#content a.button.centered,
.pum-content a.button.centered { 
  display: inline-block;
  width: auto;
  text-align: center;
  border-radius: 2rem; 
  margin: 1rem auto 0 auto!important;
  background: white;
  border: 1px solid white;
  color: #0069aa;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3); 
  text-decoration: none;
}
#content a.button.centered:hover,
.pum-content a.button.centered:hover { 
  background: #0069aa;
  color: white; 
}

/* Collapsing headers (show/hides) */
h3.collapseomatic { 
  background-image: url(/wp-content/uploads/sitewide/caret-closed.png);
	background-color: #439539;
	background-size: 0.6rem auto;
	background-position: 0.3rem 0.5rem; 
  border-radius: 0.3rem;
	font-size: 1.3rem;
	color: white;
  margin: 0.5rem 0;
	padding: 0.2rem 1rem 0.4rem 1.2rem;
	line-height: 120%; 
	clear: both;
}

h3.collapseomatic.colomat-close { 	
	background-image: url(/wp-content/uploads/sitewide/caret-open.png);
}

/* Nested collapsing headers (show/hides) */
div.collapseomatic_content h3.collapseomatic { margin-left: 3rem;}


/* MP3 audio players */
#content .mejs-container { 
  max-width: 50%; 
  clear: both; 
  margin: 1rem 0 2rem 0;
}

/* Container for audio player and caption (e.g. Song of the Month) */
#content div.audio { 
  display: inline-block; 
  width: auto; 
  max-width: 46%; 
}
#content div.audio .mejs-container { 
  clear: none; 
  max-width: 100%; 
}
@media screen and (max-width: 900px) { 
  #content div.audio { width: 100%; max-width: 100%; }
}



/* Data tables */ 

table { margin: 1rem 0 2rem 0; }
table td,
table th { 
  border: 1px solid #ccc; 
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
}

table tr:nth-of-type(even) { background: #efefef; }

/* Tables with no border or background color */
#content table.noborder { 
  display: table;
  margin: 0 0 1rem 0;
  width: auto;
}
@media screen and (max-width: 1000px) { 
  #content table.noborder { 
    width: 96%; 
    max-width: 1400px;
    margin: 0 auto 1rem auto;
  }
}

#content table.noborder :where(td, th) { 
  border: none; 
  padding: 0 0.5rem 0 0;
  background-color: white;
  vertical-align: top;
}

/* Horizontal rules */ 
hr { 
  border: 1px solid gray;
  border-bottom: none;
}


/* ------- Four boxes on insurance page ---- */

#content ul.insurance { 
  margin: 2rem auto; padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

#content ul.insurance > li { 
  margin: 0; padding: 0;
  left: 0;
  flex-basis: 23%; 
}
@media screen and (max-width: 1000px) { 
  #content ul.insurance { flex-wrap: wrap; } 
  #content ul.insurance > li { flex-basis: 48%; }
}
@media screen and (max-width: 600px) { 
  #content ul.insurance > li { flex-basis: 100%; }
}

#content ul.insurance > li:nth-of-type(1) { background: #439539; }
#content ul.insurance > li:nth-of-type(2) { background: #0069aa; }
#content ul.insurance > li:nth-of-type(3) { background: #84174b; }
#content ul.insurance > li:nth-of-type(4) { background: #342e6c; }

#content ul.insurance > li h4 { 
  color: white; 
  text-align: center;
  padding: 0.8rem 1rem 0.5rem 1rem; 
}

#content ul.insurance ul { 
  list-style: disc;
  margin: 0;
  padding: 0.5rem 1rem;
  background: #d99327;
}
#content ul.insurance ul li { 
  font-size: 0.8rem;
  color: white;
}

/* prices */
#content ul.insurance p { 
  margin: 1rem 0;
  padding: 0 1rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
}






/* ---------------- GENERAL IMAGE STYLES -------------------- */

/* Images and figures (images with captions) */
img.alignleft,
img.alignright,
.pum-content img.alignright,
blockquote.alignleft,
blockquote.alignright { 
  display: block;
  max-width: 40%;
}

img.alignleft,
blockquote.alignleft { 
  float: left; 
  margin: 0.5rem 2rem 2rem 0; 
}

img.alignright,
blockquote.alignright { 
  float: right; 
  margin: 0.5rem 0 2rem 2rem; 
}


img.alignnone,
img.nofloat,
div.pum-content img.alignnone,
div.pum-content img.nofloat { 
  float: none; 
  display: block; 
  margin: 1rem auto; 
}

.pum-content img { max-width: 40%!important; }


img.inline,
div.pum-content img.inline { 
  display: inline-block; 
  margin: 0 0.4rem 0.4rem 0; 
}

img.fileicon,
div.pum-content img.fileicon { width: 1rem; }

img.nofloat,
div.pum-content img.nofloat { max-width: 100%; }

img.smaller, 
div.pum-content img.smaller { max-width: 20%; }

img.smallest, 
div.pum-content img.smallest { max-width: 10%; }


/* Images with captions */ 

#content figure { 
  display: block;
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
}

#content figure.aligncenter { xwidth: 100%!important; }

#content figure.alignleft { 
  width: 40%;
  max-width: 40%; 
  float: left; 
  margin: 0 2rem 2rem 0; 
} 
#content figure.alignright { 
  max-width: 40%; 
  float: right;
  margin: 0 0 2rem 2rem; 
} 

#content figure.clear,
#content p.clear { clear: both; }


/* Images within figures */
#content figure img { 
  max-width: 100%;
}

#content figure.aligncenter img { 
  max-width: 100%; 
}

#content figure figcaption { 
  display: block;
  margin: 0;
  padding: 0.5rem 0 0 0;
  width: 100%;
  max-width: 100%;
  font-style: italic;
  line-height: 130%;
  font-size: 0.9rem;
}

#content figure.aligncenter figcaption { 
  max-width: 100%; 
}


/* Captioned images with gray border */

#content figure.border { border: none!important; }

#content figure.border img { 
  border: 1px solid #ccc; 
  border-bottom: none; 
}
#content figure.border figcaption { 
  border: 1px solid #ccc; 
  border-top: none; 
  padding: 0 0.5rem 0.5rem 0.5rem;
}



/* Featured image (image near top of each page, sometimes random) */ 

/* Featured image itself */ 
#content div.featured-image figure img {  
  width: auto;
  max-width: 100%;
  max-height: 800px; 
  float: none;
  margin: 0;
}

/* Container for featured image */ 
#content div.featured-image figure { 
  display: block;
  float: left;
  width: auto; 
  min-width: 20%;
  max-width: 50%;
  /*max-width: max-content;*/  /* makes the figure shrink to fit the width of the image */
  margin: 1.5rem 2rem 2rem 0!important;
}

/* Caption for featured image */
#content div.featured-image figure figcaption { 
  color: rgba(0,0,0,0.5); 
  max-width: 100%;
}

/* Legacy of Joy logo as featured image */
#content .category-legacy-of-joy-member-stories div.featured-image figure { max-width: 30%; }

/* Random image with caption at top of LCA (Lifetime Contribution Award) page */
#wpbstarter-page-title-area.tag-random-lca figure.wp-caption.featured { max-width: 30%; }
#wpbstarter-page-title-area.tag-random-lca figure.wp-caption.featured img { width: 100%; }



/* Mobile styles for images and images with captions */ 
@media screen and (max-width: 900px) { 
  img.alignleft, 
  img.alignright,
  img.aligncenter,
  #content figure.alignleft, 
  #content figure.alignright,
  #content figure.aligncenter,
  #content figure img,
  #content figure.alignleft img,
  #content figure.alignright img,
  #content div.latest img { 
    display: block;
    float: none; 
    width: auto;
    max-width: 96%;
    margin: 1rem auto;
  }
  #content figure figcaption { 
      background: white; 
      padding: 0.2rem 0.5rem;
    }
}





/* ------------- CUSTOM ICON FONT ------------- */

@font-face {
      font-family: 'cdss-icons';
      src: url('./cdss-icon-font/font/cdss-icons.eot?97480846');
      src: url('./cdss-icon-font/font/cdss-icons.eot?97480846#iefix') format('embedded-opentype'),
           url('./cdss-icon-font/font/cdss-icons.woff?97480846') format('woff'),
           url('./cdss-icon-font/font/cdss-icons.ttf?97480846') format('truetype'),
           url('./cdss-icon-font/font/cdss-icons.svg?97480846#cdss-icons') format('svg');
}
    
.icon {
  font-family: "cdss-icons";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  margin: 0; padding: 0; 
  line-height: 100%; 
  text-decoration: none;
  font-size: 1rem;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
}

/* Hide icon captions from sighted users but keep them audible for screen readers */
.icon span { 
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
    
    
    
    






/* ------------- TOP BLUE INSET BAR -------------- */

#inset-bar { 
  background: #2669a5;
  padding: 0.5rem 0;
  font-size: 0.7rem;
}

@media screen and (max-width: 600px) { 
  #inset-bar { 
    background: #439539; 
    padding: 0.5rem 0 0 0;
  }
}

/* Container for widgets */
#inset-bar div.inset-container { 
  width: 96%; 
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Four widgets in inset bar (logo, site name, navigation, search) */

#inset-bar .inset-bar-widget { }

#inset-bar .inset-bar-widget:nth-of-type(1) { flex-basis: 150px; }
#inset-bar .inset-bar-widget:nth-of-type(2) { flex-grow: 1; }
#inset-bar .inset-bar-widget:nth-of-type(3) { flex-grow: 2; }
#inset-bar .inset-bar-widget:nth-of-type(4) { flex-basis: 10px; }



/* Link on CDSS logo */
#inset-bar a.logo { 
  position: absolute;
  z-index: 120;
  width: 168px;
  height: 141px;
  margin: -30px 0px 1rem -20px;
}

/* CDSS logo image */
#inset-bar a.logo img { 
  width: 100%; 
  height: auto;
}

/* Logo on smaller screens */
@media screen and (max-width: 800px) { 
    #inset-bar .inset-bar-widget:nth-of-type(1) { 
      flex-basis: 120px; 
  }
    #inset-bar a.logo { 
      width: 140px; height: 140px; 
      margin: -24px 0 1rem -20px; 
  }
}




/* 'Country Dance & Song Society' on desktop */
#inset-bar .widget_text a.sitename { 
  font-weight: 600; 
  color: rgba(255,255,255,0.8); 
  display: inline-block;
  font-size: 0.8rem; 
  line-height: 100%;
  padding-top: 0.25rem;
}
#inset-bar .widget_text a:hover { color: rgba(255,255,255,1); }

#inset-bar br.optional { display: none; }


@media screen and (max-width: 1250px) { 
  #inset-bar .widget_text a.sitename { 
    font-size: 0.7rem; 
    padding-top: 0.3rem; 
  }
}

/* Hide on mobile devices (shows in green bar instead) */
@media only screen and (max-width: 1100px) { 
  #inset-bar .widget_text a.sitename { display: none; } 
}






/* Inset bar navigation menu (Contact, Events, etc.) */
#inset-bar ul.menu { 
  list-style: none;
  margin: 0; padding: 0; 
  text-align: right;
}

#inset-bar ul.menu li { 
  display: inline-block;
  font-size: 0.9rem;
  margin: 0 0 0 0.2rem; 
  padding: 0.15rem 0.5rem 0.3rem 0.5rem;
  line-height: 100%;
}

@media screen and (max-width: 1050px) { 
  #inset-bar ul.menu li { padding: 0.2rem 0.3rem 0.3rem 0.3rem; }
}
#inset-bar ul.menu li a { color: white; }

/* hide Search link in inset menu on desktop */
@media screen and (min-width: 1001px) { #inset-bar ul.menu li#menu-item-9155 { display: none; } }

/* highlight Donate button in inset menu */
#inset-bar ul.menu li#menu-item-5102 { background: #f7931e; }

#inset-bar i.icon-external-link { 
  font-size: 0.5rem; 
  position: relative;
  left: 0.1rem;
}

/* Shrink inset bar menu at 1001-1250px */
@media screen and (max-width: 1250px) { 
  #inset-bar ul.menu li { 
    font-size: 0.7rem; 
    margin-left: 0; 
  }
}

/* hide inset bar menu on small screens */
@media screen and (max-width: 1000px) { 
  #inset-bar .inset-bar-widget:nth-of-type(3) { display: none; }
}
  


/* Search box - Google custom search */ 

#inset-bar .wgs_wrapper { 
  margin: -3px 0 0 1rem; 
  height: 1rem; 
  position: relative;
  z-index: 3; 
}

#inset-bar .gsc-control-cse,
#inset-bar .wgs_wrapper table,
#inset-bar .wgs_wrapper table td { margin: 0; padding: 0; }


#inset-bar div.inset-bar-widget .wgs_wrapper form { 
  display: block; 
  padding: 0; 
}

#inset-bar .wgs_wrapper button { 
  padding: 0.5rem 0.5rem;
  background: transparent;
  border: none;  
  margin: 0 0 0 -3px; 
}

#inset-bar .wgs_wrapper .gsc-input-box { 
  height: 1.4rem; 
  padding: 0 0 0 0.3rem!important; 
  border-radius: 0.2rem; 
}

#inset-bar .wgs_wrapper .gsc-input-box .gsib_a input { 
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; 
  position: relative; top: -4px;
  background: none!important;
  height: 1.2rem!important; 
}

@media screen and (max-width: 1250px) { 
  #inset-bar .wgs_wrapper .gsc-input-box { 
    max-width: 70px; 
    height: 1.2rem; 
    margin-top: 4px; 
  }
  #inset-bar .wgs_wrapper button { margin-top: -10px; } 
}
@media screen and (max-width: 1000px) { 
  #inset-bar .wgs_wrapper .gsc-input-box { 
    max-width: 110px;
    margin-top: -8px; 
  }
}
@media screen and (max-width: 600px) { 
      #inset-bar .wgs_wrapper { display: none; }
  /*#inset-bar .wgs_wrapper .gsc-input-box { max-width: 72px; }*/
}


/* Search box in content area on Search page */

#content div.wgs_wrapper { 
  background: white; 
  margin: 2rem 0; 
  padding: 0.3rem 1rem 3rem 1rem; 
  box-shadow: 0rem 0rem 2rem rgba(0,0,0,0.3); 
  border-radius: 1rem;
}

/* Search box */
#content div.wgs_wrapper div.gsc-input-box { max-width: 100%; }

/* Actual input area */
#content div.wgs_wrapper .gsib_a input { 
  border: 2px solid gray!important;
  border-radius: 0.2rem;
  width: 98%!important;
  padding: 1rem 0.5rem!important; 
  font-size: 1.5rem;
}

/* Search button */
#content button.gsc-search-button { 
  padding: 1rem; 
  margin: -0.7rem 0 0 0; 
  background: #439539; 
  border: 2px solid #439539;
  border-radius: 0.5rem;
}


/* Google search results in pop-up */

div.gsc-results-wrapper-overlay.gsc-results-wrapper-visible { /* border: 2px dotted red; */ }
div.gsc-modal-background-image.gsc-modal-background-image-visible { /*border: 5px dotted green;*/ }


/* Old search bar (built into theme) */
#inset-bar div.inset-bar-widget form { display: none; }







/* ------------ MAIN TOP NAVIGATION (GREEN BAR) ----------- */

#mastheadx { 
  background: #439539; 
}

/* Container for mobile site name & desktop main menu */ 
#mastheadx div.aeccontainer { 
  width: 100%; 
  max-width: 1400px;
  margin: 0 auto; 
}

/* 'Country Dance & Song Society' on mobile devices */
@media screen and (min-width: 1001px) { 
  #mastheadx #cdss-name-mobile { display: none; }
}
@media screen and (max-width: 1100px) { 
  #mastheadx #cdss-name-mobile { 
    width: auto;
    margin: 0 0 0 170px;
    padding: 0.2rem 0 0.5rem 0;
    display: inline-block;  
    font-weight: 600;
    line-height: 140%; 
    font-size: 1.3rem; 
    position: relative;
    z-index: 2; 
  }
  #cdss-name-mobile a.sitename { color: white; }
  #mastheadx #cdss-name-mobile br.optional { display: none; }
}

@media screen and (max-width: 800px) { 
  #mastheadx #cdss-name-mobile { 
    margin-left: 140px; 
    width: 55%; 
    font-size: 1rem; 
  }
}

/* 'Country Dance...' goes to two lines on smallest screens */
@media screen and (max-width: 600px) { 
  #mastheadx #cdss-name-mobile { 
    position: relative; 
    left: -0.7rem;
    line-height: 100%;
    width: 40%;
  }
  #mastheadx #cdss-name-mobile br.optional { 
    display: inline; 
  }
}


#mega-menu-wrap-primary_menu { 
  display: inline-block;
}

#mastheadx ul#mega-menu-primary_menu { 
  width: 100%; 
  margin: 0 auto;  
  padding-left: 130px;  
}
@media screen and (max-width: 1450px) { #mastheadx ul#mega-menu-primary_menu { padding-left: 155px; } }
@media screen and (max-width: 1200px) { #mastheadx ul#mega-menu-primary_menu { padding-left: 162px; } }

#mastheadx #mega-menu-primary_menu > li {  }

/* On desktop, hide all links in main menu except those with dropdowns */
@media screen and (min-width: 1101px) { 
  #mega-menu-primary_menu > li { display: none!important; }
  #mega-menu-primary_menu > li.mega-menu-item-has-children { display: inline-block!important; }
}




/* Top-level links */ 
#mega-menu-wrap-primary_menu #mega-menu-primary_menu > li.mega-menu-item > a { 
  padding-left: 0.9rem!important;
  padding-right: 0.7rem!important;
}
@media screen and (max-width: 1200px) { 
  #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li.mega-menu-item > a { 
  padding-left: 0.5rem!important;
  padding-right: 0.3rem!important;
}
}


/* underline current section */
#mega-menu-wrap-primary_menu #mega-menu-primary_menu > li.mega-current-menu-ancestor > a { 
      text-decoration: underline!important; 
}


/* Dropdown menus */

/* links in dropdowns */ 
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item.mega-menu-item-has-children li.mega-menu-item
a.mega-menu-link { 
  background: rgba(1,106,171,0.9); 
  font-size: 0.9rem; 
  line-height: 130%!important;
  white-space: normal!important;
  min-width: 12rem!important;
}

/* External link icons in menu (also in inset menu & footer) */
i.icon-external-link { 
  display: inline-block;
  position: relative;
  top: -0.1rem;
  font-size: 0.5rem; 
  left: 0.1rem;
}

/* hover state */ 
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item.mega-menu-item-has-children li.mega-menu-item
a.mega-menu-link:hover,
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item.mega-menu-item-has-children li.mega-menu-item
a.mega-menu-link:focus { background: rgba(1,106,171,1); }


/* fix last dropdown menu (About) so it doesn't cause side scrolling */
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item.mega-menu-item-has-children:last-of-type ul { 
  left: -6rem;
}



/* current page highlighted in dropdown */
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item ul.mega-sub-menu
li.mega-current-menu-item a.mega-menu-link,
#mega-menu-wrap-primary_menu ul#mega-menu-primary_menu
li.mega-menu-item ul.mega-sub-menu
li.mega-current-menu-item a.mega-menu-link:hover { background: #439539; }




/* -------------- MOBILE MENU ---------------- */

@media screen and (max-width: 1100px) { 
  
  #mastheadx div.aeccontainer { position: relative; }
  
  /* Make top of mobile menu transparent when open */
  #mega-menu-wrap-primary_menu 
  div.mega-menu-toggle.mega-menu-open { background: transparent; }

  /* Main mobile menu wrapper */
  #mastheadx #mega-menu-wrap-primary_menu { 
    display: inline-block;
    position: absolute;
    right: 0; top: 4px; 
    z-index: 150; 
    background: #0069aa;
  }
  
  /* Main mobile menu */
  #mastheadx #mega-menu-wrap-primary_menu 
  #mega-menu-primary_menu { 
    margin-top: 0.7rem;
    padding: 1rem;
    background: #0069aa;
  }
  
/* First six list items (items from inset menu) */
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(1),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(2),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(3),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(4),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(5),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(6) { 
  display: inline-block;
  margin: 0 0 1rem 0; 
  width: 33.3%;
}

  /* Links in first 6 items are buttons */
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(1) a,
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(2) a,
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(3) a,
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(4) a,
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(5) a,
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(6) a { 
  border: 1px solid white!important;
  border-radius: 0.5rem;
  line-height: 100%; 
  margin: 0 auto; 
  padding: 0.5rem 0.6rem 0.8rem 0.6rem!important;
    text-align: center;
  width: 90%;
}
  
  /* Highlight Donate button in mobile menu */
  #mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(5) a { 
    background: #f7931e;
  }
  
  /* Top-level list items */
  #mastheadx #mega-menu-wrap-primary_menu 
  #mega-menu-primary_menu > li > a { 
    border-top: 1px solid #91b4d5; 
    font-size: 1rem;
    height: auto!important;
    padding: 0 0.5rem!important;
    background: #0069aa;
  }
  
  /* No top border on Home link */ 
  #mastheadx #mega-menu-wrap-primary_menu 
  #mega-menu-primary_menu > li:nth-of-type(7) > a { 
    border-top: none; 
  }
  
  /* Submenus */
  #mastheadx #mega-menu-wrap-primary_menu 
  #mega-menu-primary_menu 
  li.mega-menu-item-has-children ul { 
    padding-top: 0.3rem;
    padding-left: 2rem;
    background: #0069aa;
    margin-bottom: 1rem;  
  }
  
  /* Links in submenus */ 
  #mastheadx #mega-menu-wrap-primary_menu 
  #mega-menu-primary_menu 
  li.mega-menu-item-has-children li > a { 
    border-top: 1px solid #91b4d5; 
    padding: 0.5rem 0 0.7rem 0!important; 
    background: #0069aa; 
  }
  
}


/* Mobile menu on smallest screens */
@media screen and (max-width: 600px) { 
  #mastheadx #mega-menu-wrap-primary_menu div.mega-menu-toggle { 
    /*margin-top: 0.5rem;*/
  }
  /* First six list items (items from inset menu) */
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(1),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(2),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(3),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(4),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(5),
#mastheadx #mega-menu-wrap-primary_menu #mega-menu-primary_menu > li:nth-of-type(6) { 
  display: block;
  margin: 0 0 0.6rem 0; 
  width: 100%;
}
}




/* --------------- PAGE TITLE AREA -------------- */

/* Default (green to blue) */
#wpbstarter-page-title-area { 
    padding: 0!important;
    background: rgb(34,127,114);
    background: linear-gradient(45deg, rgba(67,149,57,1) 0%, rgba(0,105,170,1) 100%);
}

/* Homepage only */
#wpbstarter-page-title-area.post-30 {  }
#wpbstarter-page-title-area.post-30 h1 { display: none; }
#wpbstarter-page-title-area.post-30 div.breadcrumbs-pagetitle { display: none; }


/* Programs section (purple to blue) */
#wpbstarter-page-title-area.category-programs,
#wpbstarter-page-title-area.category-web-chats { 
   background: rgb(67,71,138);
   background: linear-gradient(45deg, rgba(133,36,105,1) 0%, rgba(0,105,170,1) 100%);
}

/* Resources section (mulberry to violet) */
#wpbstarter-page-title-area.category-resources { 
   background: rgb(92,35,92);
   background: linear-gradient(45deg, rgba(132,23,75,1) 0%, rgba(52,45,108,1) 100%);
}

/* Publications section (blue to violet) */
#wpbstarter-page-title-area.category-publications,
#wpbstarter-page-title-area.category-song-of-the-month,
#wpbstarter-page-title-area.category-cds,
#wpbstarter-page-title-area.category-cdss-news-magazine,
#wpbstarter-page-title-area.category-songs-that-speak { 
   background: rgb(26,75,140);
   background: linear-gradient(45deg, rgba(0,105,170,1) 0%, rgba(52,45,108,1) 100%);
}

/* Membership section (orange to red) */
#wpbstarter-page-title-area.category-membership,
#wpbstarter-page-title-area.category-legacy-of-joy-member-stories { 
   background: rgb(236,176,42);
   background: linear-gradient(45deg, rgba(247,147,30,1) 0%, rgba(239,66,54,1) 100%);
}

/* About section (mustard to yellow) */
#wpbstarter-page-title-area.category-about,
#wpbstarter-page-title-area.category-lifetime-contribution-award-recipients { 
   background: rgb(236,176,42);
   background: linear-gradient(45deg, rgba(217,147,40,1) 0%, rgba(254,204,43,1) 100%);
}




/* -------- Breadcrumbs and page title ---------- */

.breadcrumbs-pagetitle { 
  margin: 0 auto;
  width: 96%; 
  max-width: 1400px;
  padding: 0 0 0.5rem 0;
  font-size: 0.8rem;
  color: white;
}
@media screen and (max-width: 800px) { .breadcrumbs-pagetitle { padding-top: 1rem; } }

.breadcrumbs-pagetitle div.breadalone { 
    padding-top: 7rem; 
}

/* Makes sure that breadcrumb links are clickable */
#content .breadcrumbs-pagetitle a { 
  color: white; 
  position: relative; 
  z-index: 100;
  padding: 0 0 0.5rem 0; 
}

.breadcrumbs-pagetitle span.current-item { display: none; }

.breadcrumbs-pagetitle h1,
.breadcrumbs-pagetitle span.archive.post-tribe_events-archive.current-item { 
  display: block;
  font-weight: bold; 
  font-size: 3rem;
  line-height: 100%;
  letter-spacing: -0.05rem;
  text-shadow: 0 0 0.4rem rgba(0,0,0,0.4);
  position: relative;
  color: white;
}
@media screen and (max-width: 800px) { 
    .breadcrumbs-pagetitle h1,
    .breadcrumbs-pagetitle span.archive.post-tribe_events-archive.current-item {
        font-size: 2rem;
    }
}








/* Mobile-only styles for page title area (featured image, breadcrumbs, page title) */

@media screen and (max-width: 1000px) { 
  
  #content #wpbstarter-page-title-area { padding: 0!important; }
  
  /* Container for breadcrumbs, page title, featured image */
  #content .breadcrumbs-pagetitle { 
    display: flex;
    flex-direction: column; 
    width: 100%; 
  }

    /* Breadcrumbs */
  #content .breadcrumbs-pagetitle .breadalone { 
     order: 1;
     padding: 0.5rem 0.5rem 0 0.5rem!important; 
    text-align: right;
  }

  /* Page title */
  #content .breadcrumbs-pagetitle h1.entry-title { 
     order: 2;
    text-align: right;
    padding-right: 0.5rem;
  }

  /* Featured image area */
  #content .breadcrumbs-pagetitle div.featured-image { 
     order: 3;
     width: 100%; 
  }
    
  /* Featured image itself */
  #content div.featured-image figure img {  
    width: 100%; 
    max-height: 600px; 
    object-fit: cover;
    object-position: top;
    float: none;
    margin: 0 auto!important;
  }
  
  /* Container for featured image */ 
  #content div.featured-image figure { 
    float: none;
    width: 100%; max-width: 100%; 
    max-height: 600px;
    margin: 1rem auto -0.5rem auto!important;
  }
}







/* ------------- GENERAL CONTENT BUILDING BLOCKS ------------- */

#page,
#page #content,
#page #content #hasbar,
#page #content #hasbar #rightbar,
#page #content article,
#page #content article section { 
  margin: 0; padding: 0;
  width: 100%; 
  max-width: 100%; 
}

#page #content article section { 
  padding: 0;
}

/* Extra container for pages that have a right sidebar */ 
#page #content #hasbar { 
  max-width: calc(1400px + 1rem); 
  margin: 0 auto; 
}

/* Right sidebar */ 
#page #content #hasbar #rightbar { 
  width: 30%; 
  float: right; 
  padding: 1.5rem 1rem 0 0; 
  margin: 0 0 2rem 2rem;
  position: relative; z-index: 2;
}
@media screen and (max-width: 800px) { 
  #page #content #hasbar #rightbar { 
    width: 100%;
    float: none;
    margin: 0; 
    padding: 1rem;
  }
}

/* Buttons in right sidebar */
#rightbar a.button { 
  display: block; 
  line-height: 120%;
  margin: 0 0 0.5rem 0; 
  padding: 0.7rem 0.7rem 0.9rem 0.7rem;
  text-align: center;
  color: white;
  text-decoration: none;
}


/* Add padding to top of article */
#page #content article { padding: 1rem 0; }

/* Content has a max width of 1400px by default */
#content article > * { 
  width: 96%; 
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}


/* Full-width sections are full width */
#content article > section { 
  width: 100%;
  max-width: 100%; 
}

/* Content inside of full-width sections has a max width of 1400px */
#content article > section > * { 
  width: 96%; 
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}






/* ------------ FOOTER ------------- */

/* Hide Google Recaptcha flag */
.grecaptcha-badge { 
    visibility: hidden;
}

/* Hide 'Edit' link in front end */
footer.entry-footer { display: none; }


#footer-widget { 
  background: #84184b; 
  color: white; 
  margin: 0; 
  padding: 1rem 0 0 0;
  font-size: 0.9rem;
  clear: both;
}


/* Links in footer in general */ 
#footer-widget a { color: white; line-height: 110%;  }
#footer-widget a:hover { text-decoration: underline; }

/* Icons for external links in footer */
#footer-widget i.icon-external-link { font-size: 0.4rem; left: 0.1rem; }

/* Don't underline null links on hover */
#footer-widget li.menu-item-type-custom.menu-item-has-children > a:hover { text-decoration: none; }




/* Container for three widget positions */ 
#footer-widget div.container { 
  width: 96%; 
  max-width: 1400px;
  margin: 0 auto; 
  padding: 0;
  display: flex; 
  justify-content: space-between;
}

/* Each of three widget positions */ 
#footer-widget div.container div.footercol {  }

#footer-widget div.container div.footercol.footer1  { flex-basis: 20%; }
#footer-widget div.container div.footercol.footer2 { flex-basis: 16%; }
#footer-widget div.container div.footercol.footer3 { flex-basis: 64%; }





/* --- FOOTER COLUMN 1: Contact info, social media, email newsletter, Back to Top --- */

#footer-widget div.footer1 p { 
  font-size: 0.8rem; 
  line-height: 150%; 
  margin: 0; 
}

#footer-widget div.footer1 p:first-of-type a { 
  display: inline-block; 
  line-height: 110%; 
}

#footer-widget div.footer1 span { display: none; }

/* Social media links */ 
#footer-widget div.footer1 .icon { 
  font-size: 2rem;
  margin: 0 0.2rem 0.5rem 0; 
  position: relative;
  top: 0.5rem; 
}

/* Join Our Email List (Constant Contact email newsletter) */
#footer-widget div.footer1 a.mailinglist { 
  display: inline-block; 
  margin: 0.8rem 1rem 0.3rem 0; 
  line-height: 100%;
  border: 1px solid white;
  border-radius: 0.5rem; 
  padding: 0.4rem 0.5rem 0 0.5rem;
}
#footer-widget div.footer1 a.mailinglist:hover { 
  color: #84184B; 
  border-color: #84184B;
  background: white; 
  text-decoration: none;
}
#footer-widget div.footer1 a.mailinglist i.icon { 
  top: 0; 
  font-size: 0.8rem; 
}

/* Back to Top button */ 
#footer-widget div.footer1 a.button { 
  color: #84184b;
  background: white;
  display: inline-block;
  margin: 0.5rem 0 0 0;
  padding: 0.4rem 0.8rem 0.6rem 0.8rem; 
  font-weight: bold; 
  border-radius: 0.5rem;
}
@media screen and (max-width: 800px) { 
  #footer-widget div.footer1 a.button { xfont-size: 1.2rem; }
}




/* --- FOOTER COLUMN 2: Repeat of inset bar menu (Home, Contact, Events, etc.), plus Mass Cultural Council --- */

#footer-widget div.footer2 a { 
  font-weight: bold; 
  font-size: 0.8rem;
  line-height: 120%;
  display: block;
  padding: 0.2rem 0 0.3rem 0; 
}

/* Mass Cultural Council */
#footer-widget div.footer2 p { 
  margin: 0 0 0 1rem; 
  font-size: 0.7rem;
  line-height: 120%; 
  font-style: italic;
} 
#footer-widget div.footer2 p img { 
  width: auto; 
  max-width: 90px;
  display: block; 
  margin: 0 0 0.5rem 0;
}




/* --- FOOTER COLUMN 3: Repeat of main menu --- */

#footer-widget div.footer3 ul#menu-main-menu.flex-column { 
  display: flex; 
  flex-flow: row wrap!important;
  justify-content: space-between;
}

#footer-widget div.footer3 ul#menu-main-menu.flex-column > li { 
  margin-bottom: 1rem; 
  border-top: 1px solid rgba(255,255,255,0.5); 
  padding-top: 0.2rem;
}

/* Main menu list items */ 
#footer-widget ul#menu-main-menu li { 
  line-height: 100%;
  flex-basis: 21%;
}

/* hide Home and other top-level links */ 
#footer-widget ul#menu-main-menu.flex-column > li:first-of-type,
#footer-widget ul#menu-main-menu.flex-column > li:nth-of-type(2),
#footer-widget ul#menu-main-menu.flex-column > li:nth-of-type(3),
#footer-widget ul#menu-main-menu.flex-column > li:nth-of-type(4),
#footer-widget ul#menu-main-menu.flex-column > li:nth-of-type(5),
#footer-widget ul#menu-main-menu.flex-column > li:nth-of-type(6) { display: none; } 


/* About menu is full width with three columns */  
#footer-widget ul#menu-main-menu.flex-column > li:last-of-type { 
  display: flex; 
  flex-basis: 72%; 
  flex-flow: row wrap; 
}
#footer-widget ul#menu-main-menu.flex-column > li:last-of-type ul { 
  flex-flow: row wrap!important; 
  justify-content: space-between; 
}
#footer-widget ul#menu-main-menu.flex-column > li:last-of-type ul li { 
  flex-basis: 30%; 
  margin: 0; 
  padding-right: 1rem; 
}


#footer-widget ul#menu-main-menu li a { 
  display: inline-block;
  line-height: 120%; 
  margin: 0;
  padding: 0.1rem 0; 
  font-size: 0.67rem;
}

/* Top link in each column */
#footer-widget ul#menu-main-menu > li.menu-item-has-children > a { 
  font-weight: bold; 
  font-size: 0.8rem;
}

/* Hide sub-submenus */
#footer-widget ul#menu-main-menu li li li { display: none; }

/* Don't indent submenus */
#footer-widget ul#menu-main-menu > li.menu-item-has-children ul li { left: 0; }



/* Copyright/colophon below footer */

#colophon { 
  background: #84184b; 
  border-bottom: 1px solid #84184b; 
}

#colophon p {  
  color: rgba(255,255,255,0.6); 
  text-align: center;
  font-size: 0.6rem;
  margin: 0;
  padding: 0.5rem 1rem;
}
#colophon a { 
  color: rgba(255,255,255,0.6); 
  text-decoration: underline; 
}



/* ------- MOBILE FOOTER STYLES ---------- */


/* Tablets and smaller browsers */ 
@media screen and (max-width: 1200px) { 
  #footer-widget div.container { flex-wrap: wrap; }
  #footer-widget div.container div.footercol.footer1  { flex-basis: 50%; }
  #footer-widget div.container div.footercol.footer2 { flex-basis: 50%; }
  #footer-widget div.container div.footercol.footer3 { flex-basis: 100%; }
  
  /* List of main links */
  #footer-widget div.container div.footercol.footer2 ul.flex-column { flex-flow: row wrap!important; }
  #footer-widget div.container div.footercol.footer2 ul.flex-column li { flex-basis: 40%; }
  
  /* Repeat of main nav bar */
  #footer-widget div.footer3 ul#menu-main-menu.flex-column { margin-left: -1rem; }
}




/* Footer for smartphones */
@media screen and (max-width: 1000px) { 
  #footer-widget div.container div.footercol.footer1 { 
    flex-basis: 100%;  
    text-align: center; 
  }
  #footer-widget section#custom_html-4 { margin-bottom: 0; }
  #footer-widget div.footer1 p { margin: 0; }
  #footer-widget div.footer1 span { display: inline; }
  #footer-widget div.footer1 br.optional { display: none; }
  #footer-widget div.footer1 .icon { 
        margin: 0.4rem 0.2rem; 
        top: 0.4rem;
  }
  #footer-widget div.footer1 a.mailinglist { 
      margin: 0.3rem 0.5rem; 
      padding: 0.4rem 0.5rem 0.5rem 0.5rem; 
  }
  #footer-widget div.footer1 a.mailinglist .icon { margin: 0 0.2rem 0 0; }
  #footer-widget div.footer1 a.button { margin: 0.5rem; }
  #footer-widget div.footer2,
  #footer-widget div.footer3 { display: none; }
}









/* ------------ SPECIAL FULL-WIDTH SECTIONS ------------ */

/* Sections with a background image */ 
section.bg { 
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* ---- Top of homepage ---- */ 
#content section.hometop { 
  width: 100vw;
  max-height: 25rem; 
  background: linear-gradient(313deg, rgba(67,149,57,1) 0%, 
        rgba(0,105,170,1) 100%), 
        #0069aa;
  position: relative;
  overflow: hidden;
  margin: -2.5rem 0 0 0!important;
  padding: 0!important;
}

/* Large random image at top of homepage */ 
#content section.hometop figure { 
  width: 100%!important;
  max-width: 100%; 
} 
#content section.hometop figure img { 
  max-width: 100%!important;
  margin-bottom: 0;
}

/* Homepage message (CDSS & tagline in blue polygon) */
#content section.hometop .message { 
  position: absolute;
  left: 0; bottom: 0;
  color: white;
  background: rgba(0,105,170,0.8);
  padding: 0.8rem 5rem 1.2rem 2rem!important;
  -webkit-animation: message-frames 1.5s ease 1s forwards;
          animation: message-frames 1.5s ease 1s forwards;
  opacity: 0;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 100%, 90% 0);
}
@media screen and (max-width: 610px) { 
  #content section.hometop .message { 
    position: relative;
    padding: 0.8rem 1rem 1.2rem 1rem!important;
    -webkit-clip-path: none;
    clip-path: none;
    width: 100%;
  }
}

@-webkit-keyframes message-frames {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes message-frames {
  from { opacity: 0; }
  to { opacity: 1; }
}

#content section.hometop .message h1 { 
  font-weight: 600;
  letter-spacing: -0.03rem;
  line-height: 100%;
  font-size: 2rem;
  margin: 0; 
  color: white;
}
#content section.hometop .message h3 { 
    font-weight: normal;
    font-style: italic;
    margin: 0.2rem 0 0 0;
    color: white;
}
@media screen and (max-width: 900px) { 
  #content section.hometop .message h1 { 
    font-size: 1.5rem; }
  #content section.hometop .message h3 { 
    font-size: 1rem; }
}
/* End of homepage message */ 



/* Intro text below hero area on homepage */

#content section.homeintro { 
  display: flex;
    padding: 0 10% 0.7rem 10%!important;
  margin: 0 auto!important;
}
@media screen and (max-width: 1300px) { 
  #content section.homeintro { padding: 0 2rem 0.7rem 2rem!important; }
}
@media screen and (max-width: 1000px) { 
  #content section.homeintro { flex-direction: column; }
}

#content section.homeintro p { 
  font-size: 1.5rem; 
  line-height: 150%; 
  padding-right: 3rem;
}
@media screen and (max-width: 1000px) { 
  #content section.homeintro p { font-size: 1rem; } }

#content section.homeintro ul.icons.iconbuttons.colors.stacked { 
  width: auto; 
  max-width: 350px;
}
#content section.homeintro ul.icons.iconbuttons.colors.stacked li { 
  width: 100%; 
  margin-bottom: 0.5rem; 
}

/* 'Join our email list' on homepage */
@media screen and (min-width: 1001px) { 
  #content section.homeintro ul.icons.iconbuttons.colors.stacked li:nth-last-of-type(1) a { 
    font-size: 1.2rem; 
    padding: 0.6rem 0.5rem;
  }
  #content section.homeintro ul.icons.iconbuttons.colors.stacked li:nth-last-of-type(1) i { 
    font-size: 1.2rem; 
    margin-right: -5px;  
  }
}

@media screen and (max-width: 1000px) { 
  #content section.homeintro ul.icons.iconbuttons.colors.stacked { 
    max-width: 100%; 
    margin: 0;  
  }
  #content section.homeintro ul.icons.iconbuttons.colors.stacked li { 
    width: auto; 
    left: 0;
  }
}


/* Latest News section on homepage */
#content section.latestnews { 
  background: #439539;
  background: -webkit-linear-gradient(to right, #439539 0%, #0069AA 100%);
  background: -moz-linear-gradient(to right, #439539 0%, #0069AA 100%);
  background: linear-gradient(to right, #439539 0%, #0069AA 100%);
  padding: 1rem 0!important; 
}

#content section.latestnews h2 { 
  text-align: center; 
  color: white;
  font-size: 1.9rem;
  margin: 0.5rem auto;
  max-width: 96%; 
  text-transform: uppercase;
  letter-spacing: 0.3rem; 
}

/* ------ Pagination of Latest News on homepage and Latest News page ------ */
#content div.nav-links { 
  text-align: center; 
  margin: 0 auto; 
  padding: 1rem 0; 
}

/* pagination links in general */
#content div.nav-links a { 
  border: none!important; 
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3); 
  padding: 0.3rem 0.7rem 0.5rem 0.7rem;
}
#content div.nav-links a:hover { box-shadow: none; }

/* pagination links on homepage only */
#content section.latestnews div.nav-links a { 
  background: white; 
  color: #0069aa; 
}

/* Previous button */
#content div.nav-links a.prev { 
  border-radius: 2rem 0.2rem 0.2rem 2rem;
  padding-left: 1rem; 
}

/* Next button */
#content div.nav-links a.next { 
  border-radius: 0.2rem 2rem 2rem 0.2rem; 
  padding-right: 1rem; 
}

/* Current page */
#content div.nav-links span.current { 
  border: none!important; 
  padding: 0.3rem 0.7rem 0.5rem 0.7rem; 
  color: gray; 
}



/* Infographic section on homepage */

#content section.infographic { padding: 0 0 3rem 0; }

#content section.infographic h3 { 
  text-align: center;
  color: #91126d;
  font-style: italic;
  font-size: 1.8rem;
  padding: 3rem 0 0.5rem 0;
  line-height: 100%;
}

#content section.infographic ul { 
  margin: 0 auto; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

#content section.infographic ul li { 
  flex-basis: 23%;
  text-align: center;
  padding: 0 1rem;
}

#content section.infographic ul li img { 
  width: 80%; 
  max-width: 7rem;
  background-position: center;
  background-size: 95%;
  background-repeat: no-repeat;
}

/* Blobs for "in our history" items */
#content section.infographic ul li:nth-of-type(1) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob1.png); }
#content section.infographic ul li:nth-of-type(2) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob2.png); }
#content section.infographic ul li:nth-of-type(3) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob3.png); }
#content section.infographic ul li:nth-of-type(4) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob4.png); }

/* Blobs for "in the past year" items */
#content section.infographic ul:nth-of-type(2) li:nth-of-type(1) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob5.png); }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(2) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob6.png); }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(3) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob7.png); }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(4) img { background-image: 
  url(https://cdss.org/wp-content/uploads/home/infographic-blobs/blob8.png); }


#content section.infographic ul li p { 
  font-size: 1.2rem;
  line-height: 120%; 
}

/* bold text & links for "in our history" items */
#content section.infographic ul li:nth-of-type(1) p strong,
#content section.infographic ul li:nth-of-type(1) p a { color: #0069aa; }
#content section.infographic ul li:nth-of-type(2) p strong,
#content section.infographic ul li:nth-of-type(2) p a { color: #439539; }
#content section.infographic ul li:nth-of-type(3) p strong,
#content section.infographic ul li:nth-of-type(3) p a { color: #f7931e; }
#content section.infographic ul li:nth-of-type(4) p strong,
#content section.infographic ul li:nth-of-type(4) p a { color: #84174b; }

/* bold text & links for "in the past year" items */
#content section.infographic ul:nth-of-type(2) li:nth-of-type(1) p strong,
#content section.infographic ul:nth-of-type(2) li:nth-of-type(1) p a { color: #54c3c0; }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(2) p strong,
#content section.infographic ul:nth-of-type(2) li:nth-of-type(2) p a { color: #ef4136; }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(3) p strong,
#content section.infographic ul:nth-of-type(2) li:nth-of-type(3) p a { color: #0069aa; }
#content section.infographic ul:nth-of-type(2) li:nth-of-type(4) p strong,
#content section.infographic ul:nth-of-type(2) li:nth-of-type(4) p a { color: #439539; }


@media screen and (max-width: 1200px) { 
  #content section.infographic ul li { flex-basis: 46%; }
  #content section.infographic ul li img { width: 50%; }
  #content section.infographic ul li p { font-size: 1.1rem; }
}
@media screen and (max-width: 600px) { 
  #content section.infographic ul li { flex-basis: 92%; }
}



/* Upcoming Community Events section on homepage */
#content section.latestnews.upcoming h2 { 
  text-transform: none; 
  letter-spacing: 0;
}



/* Section with satellite image of earth on About page */
section.map { 
  clear: both;
  background-color: #02375b; 
  color: white; 
  background-image: url('https://cdss.org/wp-content/uploads/about/satellite-earth.jpg');
  background-position: center -7rem;
  padding: 1rem 0!important;
}

#content section.map p { 
  text-align: center;
  font-size: 2.2rem;
  line-height: 120%;
  margin-top: 1rem;
}


/* Sections with background images on For Members and For Affiliates */
#content section.members,
#content section.affiliates { 
  margin-bottom: 2rem!important;
  padding: 6rem 0!important;
  background-color: #e3bd8c; 
  background-size: cover;
}

/* Section with circle of dancers on For Affiliates page */
#content section.affiliates { 
  background-image: url('https://cdss.org/wp-content/uploads/membership/affiliate-bg.jpg');
  background-position: center;
}

/* Section with dancers on For Members page */
#content section.members { 
  background-image: url('https://cdss.org/wp-content/uploads/membership/members-bg.jpg');
  background-position: bottom;
}




/* Section with dancers image on Grants page */
section.bg.grants { 
  color: white; 
  background-image: url('https://cdss.org/wp-content/uploads/resources/grants/Swing-into-Summer-2021_photo-courtesy-of-Brian-Cummingham-Rhoads.jpg');
  background-position: center;
  background-size: cover;
  margin-top: 2rem!important;
  padding: 22rem 0 1rem 0!important;
}
section.bg.grants h3 { 
  text-align: center; 
  color: white; 
  text-shadow: 0 0 0.5rem rgba(0,0,0,100%);
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 1rem;
}


/* Section with (seasonally rotating) image on Ways to Give page */
#content article > section.bg.waystogive { 
    background-image: url('https://cdss.org/wp-content/uploads/donate/Yuletide-Frolic-2022_photo-courtesy-Lisa-Nelick.jpg');
    margin: -2.5rem 0 2.5rem 0!important;
    padding: 14rem 0 4rem 0!important;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
}

/* Text area over image on Ways to Give */
#content article > section.bg.waystogive > div { 
  width: 30rem;
  max-width: 50%;
  margin: 0; 
  text-align: right;
  background-color: #84174b;
  padding: 1rem 2rem 0.2rem 2rem;
  border-radius: 1rem 0 0 1rem;
}

#content article > section.bg.waystogive h1 { 
  color: white; 
  font-weight: normal;
}
#content article > section.bg.waystogive h1 a.button { 
  text-shadow: none;
  background-color: #439539!important;
  margin: 1rem 0!important;
}

/* Ways to Give page on smaller screens */
@media screen and (max-width: 1200px) { 
  #content article > section.bg.waystogive h1 { font-size: 1.5rem; }
}
@media screen and (max-width: 800px) { 
  #content article > section.bg.waystogive > div { 
    background: rgba(132,23,75,0.7); 
    width: 100%; max-width: 100%;
    margin: 4rem 0 -4rem 0;
    text-align: center;
    border-radius: 0;
  }
}





/* Sections with drop shadows */
#content section.dropshadow { 
  height: 40px; 
  padding: 0!important;
  position: relative;
  /* z-index: 50; */
  background-image: url('https://cdss.org/wp-content/uploads/sitewide/shadow1.png');
  background-size: 24px auto;
  background-repeat: repeat-x;
  background-position: center top;
}

/* Lower dropshadow */
#content section.dropshadow.dropshadow2 { 
  background-image: url('https://cdss.org/wp-content/uploads/sitewide/shadow2.png');
  background-position: center bottom;
}

/* Lower dropshadows with negative top margin */
#content section.dropshadow.dropshadow2.pullup { 
  top: -75px;
}
@media screen and (max-width: 1000px) { 
  /* Lower dropshadow */
  #content section.dropshadow.dropshadow2.pullup { 
      top: 0!important; 
      margin-bottom: 2rem!important;
  }
}




/* Get Immersed section on About page */

#content section.immersed { 
  background-image: url('https://cdss.org/wp-content/uploads/about/get-immersed.jpg'), 
    linear-gradient(90deg, rgba(0,105,170,1) 0%, rgba(67,149,57,1) 100%);
  background-size: 100% auto, 100%;
  background-repeat: no-repeat, repeat-y; 
  margin: -40px 0!important;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: calc(80vw - 8rem);
}


#content section.immersed h2 { 
  font-size: 3rem; 
  text-align: right;
  margin-top: 10vw;
  padding: 0 10% 0 0;
  text-shadow: 0 0 0.5rem rgba(0,0,0,100%);
}

@media screen and (max-width: 800px) { 
  #content section.immersed h2 { 
    margin-top: 0.5rem; 
    font-size: 2.5rem;
  }
  #content section.immersed > ul.icons.iconbuttons { 
    font-size: 80%;
    margin-top: 12rem;
  }
}



/* Berry-colored section on About page and homepage */

#content section.berry { 
  background-color: #84184b; 
  text-align: center;
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
  margin-bottom: -2rem!important; 
}

#content section.berry img { 
  width: 80%; max-width: 600px; 
  margin: 1rem auto;
}

/* CDSS logo in berry section */
#content section.berry img:first-of-type { max-width: 200px; }

@media screen and (min-width: 600px) and (max-width: 1000px) { 
  #content section.berry { padding: 1rem 0!important; }
  #content section.berry img { 
    display: inline-block; 
    margin: 0 1%!important;
    width: 57%!important; 
    max-width: 57%; 
  }
  #content section.berry img:first-of-type { max-width: 29%!important; }
}
@media screen and (max-width: 599px) { 
  #content section.berry img:first-of-type { 
    max-width: 40%!important;
  }
}


/* ----------- Unordered lists with icon buttons ------------ */

#content section > ul.icons { 
  display: flex;
  list-style: none;
  margin: 1.5rem 0; 
  padding: 0;
  justify-content: center;
  width: 45%;
}


/* Each list item in unordered list with icons */
#content section > ul.icons li { 
  text-align: center;
  padding: 0;
  left: 0;
  line-height: 130%;
}


/* Links with icons */
#content section > ul.icons li a { 
  font-weight: 600;
  color: #439539;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Icons inside links */ 
#content section > ul.icons li a i { 
  color: #2669a5;
  display: block;
  box-sizing: border-box;
  font-size: 2.6rem;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.1rem auto;
  border: 2px solid #2669a5;
  border-radius: 50%;
  padding: 0.5rem 0.2rem 0 0.2rem;
  line-height: 100%;
}



/* Unordered list with icons in rectangular buttons */
#content section > ul.icons.iconbuttons { 
  margin: 0 auto;
  width: auto;
  max-width: 96%;
  flex-wrap: wrap;
}

/* Each item in unordered list with icons in rectangular buttons */
#content section > ul.icons.iconbuttons li { 
  flex-basis: auto;
  margin-bottom: 1rem;
}

/* Links with rectangular buttons */
#content section > ul.icons.iconbuttons li a { 
  font-weight: 900;
  color: white;
  font-size: 1.5rem;
  line-height: 100%;
  padding: 0.35rem 0.5rem 0.4rem 0.5rem;
  border: 2px solid white;
  border-radius: 0.5rem;
  background: rgba(0,0,0,40%);
  display: block;
  width: 100%;
}

/* Rectangular buttons with alternating colors */
#content section > ul.icons.iconbuttons.colors li a { background: red; }
#content section > ul.icons.iconbuttons.colors li:nth-of-type(3n+1) a { background: #84174b; }
#content section > ul.icons.iconbuttons.colors li:nth-of-type(3n+2) a { background: #0069aa; }
#content section > ul.icons.iconbuttons.colors li:nth-of-type(3n+3) a { background: #439539; }


/* White buttons with blue text/borders */
#content section > ul.icons.iconbuttons.blue { 
  justify-content: flex-start;
}
#content section > ul.icons.iconbuttons.blue li a { 
  color: #0069aa;
  background: white;
  border: 3px solid #0069aa;
  font-size: 1.2rem;
  font-weight: bold;
}


/* Icons inside rectangular buttons */
#content section > ul.icons.iconbuttons li a i { 
  color: white;
  display: inline;
  border: none; 
  vertical-align: middle;
  padding: 0 0.6rem 0 0;
  font-size: 1.6rem;
  border-radius: 0; 
}

/* Blue icons */ 
#content section > ul.icons.iconbuttons.blue li a i { color: #0069aa; }

/* Smaller icons (e.g., envelope) */
#content section > ul.icons.iconbuttons li a i.smaller { 
  font-size: 1.1rem; 
  line-height: 140%; 
}

/* Top section of About page */
#content section.abouttop > ul.icons { justify-content: flex-start; }
#content section.abouttop > ul.icons li { 
   flex-basis: 10rem; 
}
#content section.abouttop > ul.icons li:first-of-type { /* Office Staff */
   flex-basis: 7rem; 
   margin-left: -1rem; 
}
#content section.abouttop > ul.icons li:last-of-type { /* Bylaws */
   flex-basis: 6rem; 
}

#content section.abouttop h2 { 
  font-weight: normal; 
  color: black; 
  font-size: 1.3rem;
}

@media screen and (max-width: 1200px) { 
  #content section.abouttop > ul.icons li { flex-basis: 33%; }
}

@media screen and (max-width: 600px) { 
  #content section.abouttop > ul.icons li { flex-basis: auto; }
}

/* Icon buttons in map section on About, and other large sets of icons */
#content section.map ul.icons,
#content ul.icons.largeicons { 
  text-align: center;
  margin: 2rem auto!important; 
}

#content section.map ul.icons li { width: 8rem; }

#content section.map ul.icons i,
#content section.map ul.icons a { 
  color: white; 
  border-color: white; 
}

#content section.map ul.icons a,
#content ul.icons.largeicons a { 
  font-weight: 900;
  font-size: 1.5rem;
}

/* Icons for benefits on For Affiliates page */
#content section.bg.benefits ul.icons.largeicons { 
  margin: 0 auto!important; 
  width: 100%; 
}
#content section.bg.benefits ul.icons.largeicons li { 
  width: 20%; 
  max-width: 10rem; 
}
#content section.bg.benefits ul.icons.largeicons a { font-size: 1.1rem; } 

/* Renew icon (calendar with circular arrow) */
#content ul.icons.largeicons li a i.icon-renew { padding-top: 0.65rem; }

/* Renew icon (calendar with circular arrow) */
#content ul.icons.largeicons li a i.icon-affiliate-directory { 
  padding-top: 0.65rem; 
  padding-left: 0.3rem; 
}





/* Mobile styles for unordered lists with icons */
@media screen and (max-width: 1200px) { 
  #content section > ul.icons { 
    width: 96%; 
    margin: 1.5rem auto;
    justify-content: center!important;
  }
}

@media screen and (max-width: 1000px) { 
    /* Icons for benefits on For Affiliates page */
    #content section.bg.benefits > ul.icons.largeicons { 
      width: 96%; 
      flex-wrap: wrap; 
    }
    #content section.bg.benefits > ul.icons.largeicons li { 
      width: 40%; 
      margin: 0.5rem;
    }
    #content section.bg.benefits > ul.icons.largeicons a { 
      display: block; 
    } 
}

@media screen and (max-width: 600px) { 
  #content section > ul.icons { 
    flex-wrap: wrap;
  }
  #content section > ul.icons li,
  #content section.map > ul.icons li { 
      margin-bottom: 1rem;
  }
}





/* ----------------- SUBMENUS IN CONTENT AREA (on parent pages of most sections) --------------- */

ul.menu-in-content { 
  margin-bottom: 2rem!important;
}

ul.menu-in-content li { 
  left: 0;
  margin-bottom: 1.5rem!important;
  padding: 0!important;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically centers links */
}
@media screen and (max-width: 700px) { 
  ul.menu-in-content li { margin-bottom: 0!important; }
}

/* Alternating colors for borders of Latest News posts */
ul.menu-in-content li:nth-child(4n+1) { background: #0069aa; }
ul.menu-in-content li:nth-child(4n+2) { background: #439539; }
ul.menu-in-content li:nth-child(4n+3) { background: #D99328; }
ul.menu-in-content li:nth-child(4n+4) { background: #84184B; }

/* Links in menus in content area */
#content ul.menu-in-content li a { 
  text-align: center;
  font-size: 1.3rem; 
  color: white;
  text-decoration: none; 
  font-weight: bold; 
  padding: 0.6rem 1rem 0.8rem 1rem;
  line-height: 110%; 
}





/* ----------------- BLOG POST STYLES ------------------ */

/* Lists of blog posts in general */ 
:is(#content,.pum-content) ul.bloglist { 
  margin: 1rem auto; 
  padding: 0; 
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
}
:is(#content,.pum-content) ul.bloglist li { left: 0; }
:is(#content,.pum-content) ul.bloglist ul li { left: 1rem; }

/* Latest News listing on homepage */
:is(#content,.pum-content) ul.bloglist.fourcol.news { max-width: 96%; }

/* Listing with just one blog post (e.g. latest episode of Songs That Speak or Song of the Month, or latest issue of News magazine) */
:is(#content,.pum-content) ul.bloglist.latest { 
  display: block;
  margin: 1rem auto;
  padding: 0;
}


/* Latest recipient on LCA page */ 
div.latest {  }
div.latest a.title { 
  font-weight: bold; 
  display: block; 
  font-size: 1.6rem; 
  margin: 1rem 0; 
  line-height: 120%; 
}
div.latest img { 
  max-width: 40%; 
  float: right; 
  margin: 0.5rem 0 2rem 2rem; 
}


/* Listing of blog posts in three or four columns */ 
:is(#content,.pum-content) ul.bloglist.threecol,
:is(#content,.pum-content) ul.bloglist.fourcol,
ul.menu-in-content { 
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 1rem 0 0 0;
  width: 96%; 
}

/* Listing of blog posts in five columns (smaller) */
:is(#content,.pum-content) ul.bloglist.fourcol.smaller { } 


/* Listing of blog posts in just one column */
:is(#content,.pum-content) ul.bloglist.onecol { 
  margin: 0 auto; 
  padding: 0; 
  left: 0; 
}



/* Each blog post (in one- or two-column format) */ 
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item,
:is(#content,.pum-content) ul.bloglist.twocol li.listing-item { background: white; }


/* Each blog post (in three- or four-column format) */ 
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item,
:is(#content,.pum-content) ul.bloglist.fourcol li.listing-item,
ul.menu-in-content li { 
  border-radius: 4rem 0.8rem 0.8rem 4rem;
  border: 4px solid white;
  background: #0069aa;
  margin: 1rem 1% 1rem 1%;
  flex: 1 0 auto;
  list-style: none;
  box-sizing: border-box;
  padding: 0;
  box-shadow: 0 0 2rem rgba(0,0,0,0.2);
  width: 23%; 
}
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item:hover,
:is(#content,.pum-content) ul.bloglist.fourcol li.listing-item:hover,
ul.menu-in-content li:hover { box-shadow: 0 0 0.5rem rgba(0,0,0,0.3); }


/* Each blog post in three-column format (e.g., Read, Listen, Watch pages) */
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item { 
  margin: 0 2% 2rem 2%;
  width: 29%; /* three columns */
  border-radius: 4rem 0.8rem 0.8rem 0.8rem;
  background: white; 
}

/* Each blog post with full-width image (e.g. Grants, Online Workshops, Lesson Plans, Special Funds) */
:is(#content,.pum-content) ul.bloglist.largeimage { justify-content: center; }
:is(#content,.pum-content) ul.bloglist.largeimage li.listing-item { 
  border-radius: 0.8rem;
  flex-grow: unset;
}

/* Each blog post in Recent Recipients on Grants page */
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.largegrants li.listing-item { 
  width: 29%; 
  margin: 1rem 2% 1rem 2%;
}
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.largegrants li.listing-item p { font-size: 0.8rem;}

/* Each blog post in Past Recipients on Grants page */
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.smallgrants li.listing-item { 
  width: 23%; 
  margin: 1rem 1% 1rem 1%;
}
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.smallgrants li.listing-item p { font-size: 0.75rem; }



/* Bulleted lists within post (Lesson Plans) */
:is(#content,.pum-content) ul.bloglist.threecol.largeimage li.listing-item ul { 
  list-style: disc;
  margin: 0 0.5rem 0.5rem 0.5rem;
}
:is(#content,.pum-content) ul.bloglist.threecol.largeimage li.listing-item ul li { 
  font-size: 0.9rem; 
  line-height: 140%;
  margin-bottom: 0.4rem;
}

/* Each blog post in Online Workshops (don't grow to full width of page because there's only one at the moment) */
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.workshops li.listing-item { xflex-grow: unset; }
ul.bloglist.threecol.largeimage.workshops blockquote { 
  margin: 0.5rem 0.5rem 1rem 0.5rem; 
  padding: 0.8rem 0.2rem 0.8rem 0.2rem;
}

/* Each blog post in CDSS News Magazine */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item { border-radius: 1.2rem; } 

/* Each blog post on Job Opportunities page */ 
:is(#content,.pum-content) ul.bloglist.latest.jobs li.listing-item { 
 /* border-bottom: 2px solid #0069AA; 
  padding-bottom: 2rem; 
  margin-bottom: 2rem; */
} 
/*:is(#content,.pum-content) ul.bloglist.latest.jobs li.listing-item:last-of-type { border-bottom: none; }*/


/* Each smaller blog post in five columns */ 
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item { 
  width: 18%; 
  background: #342e6c;
  margin-top: 0;
}

/* Each blog post in one-column format */
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item { 
  border: 5px solid gray;
  border-radius: 5.3rem 1.3rem 1.3rem 1.3rem;
  margin: 0 0 2rem 0;
  left: 0; 
  width: 100%;
}

/* Headers in blog posts in general */ 
:is(#content,.pum-content) ul.bloglist h1,
:is(#content,.pum-content) ul.bloglist h2,
:is(#content,.pum-content) ul.bloglist h3,
:is(#content,.pum-content) ul.bloglist h4,
:is(#content,.pum-content) ul.bloglist h5 { 
    font-family: 'gill-sans-nova-condensed', sans-serif;
    font-weight: 600;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}



/* Alternating colors for borders of What's New posts */
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item:nth-child(4n+1) { border-color: #0069aa; }
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item:nth-child(4n+2) { border-color: #439539; }
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item:nth-child(4n+3) { border-color: #D99328; }
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item:nth-child(4n+4) { border-color: #84184B; }


/* Blog posts with no thumbnail image (e.g. Songs that Speak and 5 Things); also menus in content area */
:is(#content,.pum-content) ul.bloglist.fourcol.noimage li,
ul.menu-in-content li { 
  border-radius: 0.8rem; 
  padding: 0 0.8rem 0.8rem 0.8rem;
  margin: 0 1rem 1rem 0;
  width: 17%; 
} 





/* Each blog post in What's New on homepage */
:is(#content,.pum-content) ul.bloglist.fourcol.news li.listing-item { 
  border-radius: 4rem 30px 0.8rem 0.8rem;
  background: #fff;
}

/* First two blog posts in Latest News on homepage */ 
:is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) {
  margin-top: 0;
  width: 48%;
  border: 10px solid white; 
  border-radius: 6rem 1rem 1rem 1rem;
}

/* Second blog post in Latest News on homepage */ 
:is(#content,.pum-content) ul.bloglist.fourcol.news li:nth-child(2) {
  border-radius: 1rem 6rem 1rem 1rem;
}


/* Scaling the relative sizes of What's New items on homepage: */

/* First two posts */
:is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) * { font-size: 1rem; }

/* Posts 3-6 */
:is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6)) * { font-size: 0.9rem; }

/* Posts 7-10 */
/* ul.bloglist.fourcol.news :is(li:nth-child(7),li:nth-child(8),li:nth-child(9),li:nth-child(10)) * { font-size: 0.9rem; }*/






/* Each blog post (two-column format) */
:is(#content,.pum-content) ul.bloglist.twocol li.listing-item { 
  flex-basis: 48%;
  border-radius: 5rem 0.8rem 0.8rem 0.8rem;
  border: 4px solid white;
  margin: 1rem 0;
  padding: 0;
  box-shadow: 0 0 2rem rgba(0,0,0,0.3);
}
/* Each blog post in two-column format with no image */
:is(#content,.pum-content) ul.bloglist.twocol.noimage li.listing-item { 
  border-radius: 0.8rem;
}
@media screen and (max-width: 1000px) { 
  ul.bloglist.twocol li.listing-item { flex-basis: 100%; }
}



/* Single blog post (e.g. latest episode of Songs That Speak or Song of the Month, or latest issue of News magazine) */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item { 
  border-radius: 0; 
  box-shadow: none;
  padding: 0;
}

/* Date in single blog post */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item .date { 
  display: block; 
  margin-bottom: 1rem; 
}



/* Titles of blog posts in general */
:is(#content,.pum-content) ul.bloglist li.listing-item a.title { 
  font-family: 'gill-sans-nova-condensed', sans-serif;
  display: block;
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 0.6rem;
  padding: 0.2rem 0.7rem 0.5rem 0.7rem;
  line-height: 110%; 
  color: white!important;
  text-decoration: none!important;
  /*background: #0069aa;*/
  }
:is(#content,.pum-content) ul.bloglist li.listing-item a.title:hover { text-decoration: underline!important; }

/* Links in blog post titles */
:is(#content,.pum-content) ul.bloglist li.listing-item h4 a { text-decoration: none; }
:is(#content,.pum-content) ul.bloglist li.listing-item h4 a:hover { text-decoration: underline; }

/* Smaller subheaders in blog post titles */
:is(#content,.pum-content) ul.bloglist li.listing-item a.title span.smaller { 
  display: block; 
  font-size: 1.1rem!important; 
}

/* Subheaders in blog posts such as Jobs */ 
:is(#content,.pum-content) ul.bloglist.latest h2,
:is(#content,.pum-content) ul.bloglist.latest h3,
:is(#content,.pum-content) ul.bloglist.latest h4,
:is(#content,.pum-content) ul.bloglist.latest h5 { 
    font-family: 'gill-sans-nova', sans-serif;
    font-weight: 700;
    padding-left: 0;
    padding-right: 0;
}


/* Title of most recent Song of the Month */
:is(#content,.pum-content) .category-song-of-the-month ul.bloglist.latest li.listing-item a.title { 
  color: #439539!important; 
  margin-bottom: 0.5rem;
}

/* Title of most recent Web Chat */ 
:is(#content,.pum-content) ul.bloglist.latest li.listing-item span.title { 
  color: #0069aa; 
  font-weight: bold; 
  font-size: 1.8rem;
  line-height: 110%;
  display: block;
  margin-bottom: 1rem;
}

/* Title of latest CDSS News magazine issue */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item h4:first-of-type { font-size: 1.8rem; }

/* Title of post in four-column listing */ 
:is(#content,.pum-content) ul.bloglist.fourcol li.listing-item .title { 
    font-family: 'gill-sans-nova-condensed', sans-serif;
    font-size: 1.2rem; 
    font-weight: 600; 
    letter-spacing: -0.01rem;
    color: white!important;
    text-decoration: none!important; 
    padding: 0 0.5rem 0.5rem 0.5rem;
}

/* Title of post in What's New */
:is(#content,.pum-content) ul.bloglist.fourcol.news li.listing-item a.title { 
  font-size: 1.2rem; 
  padding: 0.2rem 0.4rem 0.4rem 0.4rem; 
  border-radius: 4rem 30px 0 0; 
  border: 4px solid white;
  margin: -4px -4px 0.5rem 1rem; 
}

/* Title of post in first two What's New items */
:is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) a.title {
  border-radius: 3rem 0.8rem 0 0; 
  border: 10px solid white;
  margin: -10px -10px 0.8rem 3rem;
  padding: 0.3rem 0.3rem 0.6rem 0;
  font-size: 1.4rem;
}

/* Title of post in second What's New item */ 
:is(#content,.pum-content) ul.bloglist.fourcol.news li:nth-child(2) a.title {
  border-radius: 0.8rem 3rem 0 0; 
  margin-right: 3rem;
  margin-left: -10px;
  padding: 0.3rem 0 0.6rem 0.6rem; 
}

/* Title of blog post in two-column format (without link) */
:is(#content,.pum-content) ul.bloglist.twocol li.listing-item span.title { 
  display: block;
  color: white;
  font-family: 'gill-sans-nova-condensed', sans-serif;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 120%; 
  padding: 0 0.5rem 0.5rem 0;
  margin: 0 0 1rem 5rem;
  border-radius: 0 1rem 0 0;
}





/* Title of post in two- or three-column format */

:is(#content,.pum-content) ul.bloglist.twocol li.listing-item a.title,
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item a.title,
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item span.title { 
    font-family: 'gill-sans-nova-condensed', sans-serif;
    font-size: 1.4rem; 
    line-height: 110%;
    font-weight: 600; 
    letter-spacing: -0.01rem;
    color: white!important;
    text-decoration: none!important; 
    margin: 0 0 0.5rem 3.5rem!important;
    padding: 0.4rem 0.5rem 0.6rem 0.5rem;
    border-radius: 0 0.6rem 0 0;
    display: block;
}

/* Title of post with full-width image */
:is(#content,.pum-content) ul.bloglist.largeimage li.listing-item h3.title,
:is(#content,.pum-content) ul.bloglist.largeimage.workshops li.listing-item a.title { 
  width: 100%;
  margin: 0!important;
  border-radius: 0;
  font-family: 'gill-sans-nova-condensed', sans-serif;
  text-align: center; 
  line-height: 110%;
  margin: 0 0 0.5rem 0!important;
  padding: 0.3rem 0.5rem 0.5rem 0.5rem;
  font-weight: 600;
  color: white;
}

:is(#content,.pum-content) ul.bloglist.largeimage.smallgrants li.listing-item h3.title { font-size: 1.1rem; }

:is(#content,.pum-content) ul.bloglist.largeimage li.listing-item h3.title a { 
  color: white;
  text-decoration: none; 
}
:is(#content,.pum-content) ul.bloglist.largeimage li.listing-item h3.title a:hover,
:is(#content,.pum-content) ul.bloglist.largeimage.workshops li.listing-item a.title:hover { text-decoration: underline!important; }

/* Title of post with no image or link (e.g. Affiliates page) */
:is(#content,.pum-content) ul.bloglist.largeimage.noimage li.listing-item h3.title { 
  border-radius: 0.7rem 0.7rem 0 0;
  color: white;
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; 
  font-weight: bold;
  padding: 0.5rem 1rem 0.7rem 1rem;
}

/* Bulleted lists in boxes on Affiliates page */
:is(#content,.pum-content) ul.bloglist.largeimage.noimage li.listing-item ul { 
  list-style: disc; 
  margin: 1rem 0.5rem; 
}
:is(#content,.pum-content) ul.bloglist.largeimage.noimage li.listing-item ul li { margin-bottom: 0.7rem; }

/* Title of post in smaller five-column listing */
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item .title,
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item h4 { 
  font-size: 90%;
}


/* Title of post with no thumbnail image */ 
:is(#content,.pum-content) ul.bloglist.noimage li a.title { padding: 0!important; }
:is(#content,.pum-content) ul.bloglist.noimage li span.title { 
  display: block;
  line-height: 110%;
  margin: 0.6rem 0 0 0;
  padding: 0!important;
}
:is(#content,.pum-content) ul.bloglist.noimage li span.title a { color: white; }

/* Title of post in two-column listing with no image (e.g., Web Chats) */
:is(#content,.pum-content) ul.bloglist.twocol.noimage li.listing-item a.title { 
    /*font-family: 'gill-sans-nova', sans-serif;*/
    margin: 0!important; 
    padding: 0.5rem 0.8rem!important;
    border-radius: 0.6rem 0.6rem 0 0;
    /* background: #852469; */
}
:is(#content,.pum-content) ul.bloglist.twocol.noimage li.listing-item a.title:hover { text-decoration: underline!important; }

/* Hide extra post title on Web Chats page */
:is(#content,.pum-content) .category-web-chats ul.bloglist.twocol.noimage li.listing-item h2 { display: none; }

/* Title of post on Jobs page */
:is(#content,.pum-content) ul.bloglist.threecol.largeimage.noimage.jobs li.listing-item span.title { 
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; 
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.7rem 1rem 0.9rem 1rem!important;
  margin: 0 0 1rem 0!important; 
  border-radius: 0.7rem 0.7rem 0 0;
}

/* Title of post for smaller past recipients on Grants page */

:is(#content,.pum-content) ul.bloglist.threecol.grants h3.title { 
    letter-spacing: -0.01rem;
    color: white;
    line-height: 100%;
    margin: 0 0 0.5rem 3.5rem!important;
    padding: 0.4rem 0.5rem 0.6rem 0.5rem;
    border-radius: 0 0.6rem 0 0;
    display: block;
}
:is(#content,.pum-content) ul.bloglist.threecol.grants h3.title a { 
  color: white!important; 
  text-decoration: none;
}
:is(#content,.pum-content) ul.bloglist.threecol.grants h3.title a:hover { text-decoration: underline; }



/* Alternating colors for backgrounds of post titles */
:is(#content,.pum-content) ul.bloglist.news li:nth-child(4n+1) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+1) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+1) span.title,
:is(#content,.pum-content) ul.bloglist.twocol li:nth-child(4n+1) a.title,
:is(#content,.pum-content) ul.bloglist.onecol li:nth-child(4n+1) span.title,
:is(#content,.pum-content) ul.bloglist.largeimage li:nth-child(4n+1) h3.title,
:is(#content,.pum-content) ul.bloglist.threecol.grants li:nth-child(4n+1) h3.title { background: #0069aa; }

:is(#content,.pum-content) ul.bloglist.news li:nth-child(4n+2) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+2) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+2) span.title,
:is(#content,.pum-content) ul.bloglist.twocol li:nth-child(4n+2) a.title,
:is(#content,.pum-content) ul.bloglist.onecol li:nth-child(4n+2) span.title,
:is(#content,.pum-content) ul.bloglist.largeimage li:nth-child(4n+2) h3.title,
:is(#content,.pum-content) ul.bloglist.threecol.grants li:nth-child(4n+2) h3.title { background: #439539; }

:is(#content,.pum-content) ul.bloglist.news li:nth-child(4n+3) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+3) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+3) span.title,
:is(#content,.pum-content) ul.bloglist.twocol li:nth-child(4n+3) a.title,
:is(#content,.pum-content) ul.bloglist.onecol li:nth-child(4n+3) span.title,
:is(#content,.pum-content) ul.bloglist.largeimage li:nth-child(4n+3) h3.title,
:is(#content,.pum-content) ul.bloglist.threecol.grants li:nth-child(4n+3) h3.title { background: #D99328; }

:is(#content,.pum-content) ul.bloglist.news li:nth-child(4n+4) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+4) a.title,
:is(#content,.pum-content) ul.bloglist.threecol li:nth-child(4n+4) span.title,
:is(#content,.pum-content) ul.bloglist.twocol li:nth-child(4n+4) a.title,
:is(#content,.pum-content) ul.bloglist.onecol li:nth-child(4n+4) span.title,
:is(#content,.pum-content) ul.bloglist.largeimage li:nth-child(4n+4) h3.title,
:is(#content,.pum-content) ul.bloglist.threecol.grants li:nth-child(4n+4) h3.title { background: #84184B; }




/* Headers in What's New on homepage */ 
:is(#content,.pum-content) ul.bloglist.news li.listing-item h3,
:is(#content,.pum-content) ul.bloglist.news li.listing-item h4,
:is(#content,.pum-content) ul.bloglist.news li.listing-item h5,
:is(#content,.pum-content) ul.bloglist.news li.listing-item h6 { 
  font-family: 'gill-sans-nova', sans-serif;
  font-weight: bold;
  line-height: 120%; 
  margin-right: 0.5rem;
}
:is(#content,.pum-content) ul.bloglist.news li.listing-item h3 { font-size: 1.2rem!important; }



/* Linked titles of back issues in CDSS News Magazine */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item h4,
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item h4 { 
  font-family: 'gill-sans-nova-condensed', sans-serif;
  margin: 0;
  padding: 1rem 0.5rem 0 0!important;
}
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item h4 { padding-top: 0.5rem!important; }
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item a { color: white; }
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li.listing-item a.title { background: transparent; }

/* Hide most text in News Magazine and other back issues, but show PDF & flipbook links */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p,
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item ul,
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item h3 { display: none; }

/* First paragraph in News Magazine and other back issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p:first-of-type { 
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 100%;
  margin: 0.7rem 0.5rem; 
  padding: 0; 
}
@media screen and (max-width: 700px) { 
  :is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p:first-of-type { display: block; }
}

:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item a { color: white; }

/* Links in first paragraph in News Magazine and other back issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p:first-of-type a { 
  font-size: 0.7rem; 
  display: inline-block;
  line-height: 100%; 
  text-decoration: none; 
  background: transparent;
  font-weight: normal;
  border: 1px solid rgba(255,255,255,0.5); 
  border-radius: 0.2rem; 
  margin: 0 0 0.4rem 0; 
  padding: 0.1rem 0.3rem 0.2rem 0.3rem;
}

/* Hover state of links in first paragraph in News Magazine and other back issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p:first-of-type a:hover { 
  background: white; 
  border: 1px solid rgba(255,255,255,1); 
  color: #0069AA; 
}

:is(#content,.pum-content) ul.bloglist.fourcol.newsmag.smaller li.listing-item img { height: 6rem!important; }

/* Links in first paragraph of older back issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag.smaller li.listing-item p:first-of-type { 
  display: block; 
  margin: 0.1rem 0.5rem 0 0; 
  line-height: 100%; 
}
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag.smaller li.listing-item p:first-of-type a { 
  margin: 0!important;
  padding: 0;
  background: transparent; 
  font-weight: normal;
  font-size: 0.6rem;
  display: inline;
  border: none;
  border-radius: 0;
  line-height: 100%;
  text-decoration: underline;
}


/* hide Table of Contents link when viewing an individual magazine issue's post */
:is(#content,.pum-content) ul.bloglist.latest.image-left a.hidden,
#content div.entry-content .hidden { display: none; }



/* 'Download a PDF of the entire issue' in ancient magazines */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li.listing-item p:first-of-type strong { 
  /*font-weight: normal; 
  display: block; 
  line-height: 130%; 
  font-size: 0.9rem;*/ 
  xdisplay: none; 
  font-weight: normal;
}


/* Heading 4 in post excerpts on Web Chats */
:is(#content,.pum-content) ul.bloglist.twocol.noimage li.listing-item h4 { 
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0; 
  padding: 0.4rem 0.8rem 0.6rem 0.8rem;
  line-height: 100%; 
  background: #0069aa;
  color: white;
  text-transform: uppercase; 
  letter-spacing: 0.1rem;
}

/* Dates in post excerpts (e.g., Web Chats) */
:is(#content,.pum-content) ul.bloglist.twocol.noimage li.listing-item span.date { 
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem 0.6rem 0.8rem;
  line-height: 100%; 
  color: #0069aa;
}

/* Dates in post excerpts (e.g., Songs That Speak) */
:is(#content,.pum-content) ul.bloglist.fourcol.noimage li.listing-item span.date { 
  color: white; 
  display: block;
}

/* Tags in posts (e.g. Common Time tag in Online Workshops) */
span.category-display { 
  display: block; 
  margin: 0 0.5rem 0.5rem 0.5rem; 
  line-height: 100%;
}
span.category-display a { 
  border: 1px solid #439539; 
  border-radius: 0.3rem;
  padding: 0 0.3rem 0.1rem 0.3rem;
  font-size: 0.7rem; 
  text-decoration: none!important;
}
span.category-display a:hover { 
  background: #439539; 
  color: white!important; 
}


/* Paragraphs within posts */ 
:is(#content,.pum-content) ul.bloglist li.listing-item p { padding: 0 0.6rem; }

/* Paragraphs in items on Latest News page */
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item p { padding-left: 11.5rem; }

/* Paragraphs in three-column format */
:is(#content,.pum-content) ul.bloglist.threecol li.listing-item p { font-size: 0.9rem; }

/* Descriptions in 5 Things */ 
:is(#content,.pum-content) ul.bloglist.fourcol.noimage li.listing-item span.description { 
  color: white;
  display: block;
  font-size: 0.9rem;
  line-height: 120%;
  margin: 0.5rem 0 1rem 0; padding: 0;
  font-style: italic;
}

/* Video buttons in 5 Things */ 
:is(#content,.pum-content) ul.bloglist.fourcol.noimage a.buttonsmaller { 
  background: transparent; 
  border: 2px solid white;
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem 0.5rem 0.6rem;
}
:is(#content,.pum-content) ul.bloglist.fourcol.noimage a.buttonsmaller:hover { 
  background: white; 
  color: #0069aa;
}

/* Paragraphs in Latest News */ 
:is(#content,.pum-content) ul.bloglist.news li.listing-item p { 
  line-height: 140%; 
}

/* Paragraphs in first two Latest News items */ 
:is(#content,.pum-content) ul.bloglist.news li.listing-item:nth-of-type(1) p,
:is(#content,.pum-content) ul.bloglist.news li.listing-item:nth-of-type(2) p {  }

/* Bulleted lists in Latest News */
:is(#content,.pum-content) ul.bloglist.news li.listing-item ul { 
  margin: 0 0.5rem 1rem 1.5rem; padding: 0; 
  list-style-type: disc;
}
:is(#content,.pum-content) ul.bloglist.news li.listing-item ul li { 
  border-radius: 0; 
  width: 100%; 
  font-size: 0.9rem;
  line-height: 130%; 
  margin-bottom: 0.3rem;
}

/* Links in Latest News */ 
:is(#content,.pum-content) ul.bloglist.news li.listing-item a,
:is(#content,.pum-content) ul.bloglist.onecol li.listing-item a { font-weight: bold; }

/* Paragraphs in single-post blogs */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item p { padding: 0; }

/* Headings in single-post blogs */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item h2,
:is(#content,.pum-content) ul.bloglist.latest li.listing-item h4,
:is(#content,.pum-content) ul.bloglist.latest li.listing-item h5 { padding-left: 0; }

/* Floated sheet music in Song of the Month */
:is(#content,.pum-content) ul.bloglist.latest li.listing-item figure.alignright { max-width: 30%!important; }


/* Unordered lists in CDSS News Magazine latest issue (links to articles) */
:is(#content,.pum-content) ul.bloglist.latest ul { 
  display: table;
  list-style-type: disc;
  margin: 0 0 1rem 0;
}



/* Thumbnail images in blog posts */ 
:is(#content,.pum-content) ul.bloglist.fourcol li img,
:is(#content,.pum-content) ul.bloglist.threecol li img,
:is(#content,.pum-content) ul.bloglist.twocol li img,
:is(#content,.pum-content) ul.bloglist.onecol li img { 
  border-radius: 50%;
  border: 4px solid white;
  float: left;
  object-fit: cover;
  width: 7rem;
  height: 7rem;
  box-sizing: border-box;
  max-width: 100%;
  position: relative; z-index: 2;
  background: white;
}

/* Images in four-column listings in general */
:is(#content,.pum-content) ul.bloglist.fourcol li img { 
  margin: -4px 0.7rem -4px -4px;
}

/* Images in Latest News posts on homepage */
:is(#content,.pum-content) ul.bloglist.fourcol.news li img { 
  width: 8rem;
  height: 8rem;
  margin: -4px 0.5rem 0 -4px;
}

/* Images in first two Latest News posts on homepage */
:is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) img { 
  border: 10px solid white; 
  margin: -10px 1rem 0.5rem -10px;
  width: 11rem;
  height: 11rem;
}

/* Image in second Latest News post on homepage */
:is(#content,.pum-content) ul.bloglist.fourcol.news li:nth-child(2) img { 
  float: right;
  margin: -10px -10px 0.5rem 1rem;
}

/* Extra images in Latest News on homepage (e.g. camp registration) */
:is(#content,.pum-content) ul.bloglist.fourcol.news li img.nofloat { 
  border: none; 
  float: none; 
  border-radius: 0;
  width: auto; 
  height: auto;
  max-width: calc(100% - 11rem);
  margin: -10px 0 0 0;
}

/* Images in blog posts on Latest News page */
:is(#content,.pum-content) ul.bloglist.twocol li img { 
  width: 10rem; height: 10rem;
  margin: -4px 1.5rem 0.3rem -4px; 
}

/* Images in three-column lists (e.g. Affiliates) */
:is(#content,.pum-content) ul.bloglist.threecol li img { margin-right: 0.8rem; }

/* Images in three-column lists (e.g. Read, Listen, Watch) */
:is(#content,.pum-content) ul.bloglist.threecol.news li img { 
  float: left;
  width: 7rem;
  margin: -4px 0.8rem 0 -4px;
  border-radius: 3rem 0 0 0; 
  height: auto; 
}

/* Images that are the full width of the post */
:is(#content,.pum-content) ul.bloglist.largeimage li img { 
  float: none;
  width: 100%;
  height: 14rem;
  border: none;
  border-radius: 0.8rem 0.8rem 0 0;
  margin: 0!important; 
}


/* Images in Recent Recipients on Grants page */
:is(#content,.pum-content) ul.bloglist.largeimage.largegrants li img { height: 12rem; }

/* Images in Past Recipients on Grants page */
:is(#content,.pum-content) ul.bloglist.largeimage.smallgrants li img { height: 9rem; }



/* Listings of special fund recipients in pop-ups */
.pum-content ul.bloglist.threecol.largeimage li.listing-item { flex-basis: 45%!important; }
@media screen and (max-width: 1400px) { 
  .pum-content ul.bloglist.threecol.largeimage li.listing-item { flex-basis: 96%!important; }
}
.pum-content ul.bloglist.threecol.largeimage li.listing-item span.image img { 
  max-width: 100%!important;
  object-position: center top;
}



/* Images in CDSS News Magazine past issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag li img { 
  border-radius: 1rem 0 0 1rem;
  object-fit: unset;
  width: 7rem;
  height: 100%!important;
  box-sizing: border-box;
  margin: 0 0.7rem 0 0;
  border: none; 
  border-right: 4px solid white;  
}


/* Images in manual three-column listings, e.g. on Ways to Give page */
:is(#content,.pum-content) ul.bloglist.threecol li img.alignleft { 
  border-radius: 0;
  border: none;
  float: left;
  margin: 0 1rem 1rem 0;
  width: 35%; height: auto;
  background: transparent;
}


/* Images in smaller five-column listing */
:is(#content,.pum-content) ul.bloglist.fourcol.smaller li img { 
  width: 5rem;
  height: 5rem;
  border: 4px solid white;
  object-fit: cover;
  margin: -4px 0.5rem -4px -4px;
}

/* Images in smaller five-column listing for CDSS News issues */
:is(#content,.pum-content) ul.bloglist.fourcol.newsmag.smaller li img { 
}

/* Featured image in single-post blogs (Songs that Speak, etc.) */
:is(#content,.pum-content) ul.bloglist.latest li span.image,
:is(#content,.pum-content) ul.bloglist.latest li a.image { 
  display: block;
  float: right;
  max-width: 30%!important;
  margin: 1rem 1rem 2rem 2rem;
}
/* Featured image in most recent Web Chat */ 
:is(#content,.pum-content) ul.bloglist.latest li span.image { 
  max-width: 40%; 
  margin: 0 0 2rem 2rem; 
}

/* Featured image in latest News magazine issue */
:is(#content,.pum-content) ul.bloglist.latest.image-left li span.image { 
  max-width: 30%;
  float: left; 
  margin: 0 2rem 2rem 0; 
}
@media screen and (max-width: 900px) { 
  :is(#content,.pum-content) ul.bloglist.latest li span.image,
  :is(#content,.pum-content) ul.bloglist.latest li a.image,
  :is(#content,.pum-content) ul.bloglist.latest.image-left li span.image { 
    float: none;
    max-width: 100%;
    margin: 1rem auto!important;
  }
}


/* Smaller image (as in CDSS News covers) */ 
:is(#content,.pum-content) ul.bloglist.fourcol li.listing-item img.smaller { 
    max-width: 100%; 
    margin-bottom: 0; 
}

/* Read More links as buttons */ 
:is(#content,.pum-content) ul.bloglist a.more-link { 
  background: #439539;
  color: white;
  font-weight: bold;
  text-decoration: none; 
  display: inline-block;
  border-radius: 0.5rem; 
  padding: 0.2rem 1rem 0.4rem 1rem;
}

/* Buttons in manual three-column listings, e.g. on Ways to Give page */
:is(#content,.pum-content) ul.bloglist.threecol a.button { 
  display: inline-block;
  margin: 0!important;
}



/* START MOBILE STYLES FOR BLOGLISTS */

@media screen and (max-width: 1400px) { 
  #content section.latestnews,
  ul.bloglist.fourcol li.listing-item,
  ul.bloglist.fourcol.news li.listing-item,
  ul.menu-in-content li { 
    width: 30%; 
  }
  ul.bloglist.fourcol.smaller li.listing-item { width: 23%; } 
  ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) { 
    border-radius: 4rem 0.8rem 0.8rem 0.8rem;
    margin-top: 1rem;
  }
  :is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) a.title {
    font-size: 1.2rem; 
    margin: 0 0 0.5rem 4rem; 
    padding: 0.2rem 0.4rem 0.4rem 0.4rem; 
    border-radius: 0 0.7rem 0 0; 
  }
  :is(#content,.pum-content) ul.bloglist.fourcol.news :is(li:nth-child(1),li:nth-child(2)) img { 
    width: 8rem; height: 8rem;
    border: 4px solid white;
    margin: -3px 0.5rem 0 -3px;
    float: left;
  }
  :is(#content,.pum-content) ul.bloglist.fourcol.news li img.nofloat { 
    border: none; 
    float: none; 
    height: auto;
    max-width: calc(100% - 8rem);
    margin: -10px 0 0 0;
  }
}

@media screen and (max-width: 1200px) { 
  #content section.latestnews,
  ul.menu-in-content li,
  ul.bloglist.fourcol.news li.listing-item,
  ul.bloglist.threecol li.listing-item { 
    width: 46%!important; /* three columns go down to two */
    margin: 1rem 2% 0.5rem 2%;
  }
  ul.bloglist.threecol li.listing-item:nth-of-type(7) { width: 96%!important; }
  ul.bloglist.threecol.largeimage li.listing-item:nth-of-type(7) { width: 46%!important; }
  ul.bloglist.threecol.largeimage.smallgrants li.listing-item { width: 31%!important; }

  :is(#content,.pum-content) ul.bloglist.fourcol.news li.listing-item a.title { 
    border-radius: 0 15px 0 0; 
    margin-left: 4rem;
  }
  ul.bloglist.fourcol.smaller li.listing-item,
  ul.menu-in-content li { 
    width: 29%; /* five columns go down to four? */
    margin: 1rem 2% 0.5rem 2%;
  } 
  :is(#content,.pum-content) ul.bloglist.fourcol.news li img.nofloat { 
    width: auto;
    max-width: calc(100% - 8rem);
  }
}

@media screen and (max-width: 1000px) { 
  #content section.latestnews,
	ul.bloglist.fourcol li.listing-item,
  ul.menu-in-content li { 
		width: 45%; 
		margin: 0 2% 2rem 2%;
	} 
  ul.bloglist.fourcol.noimage li.listing-item,
  ul.menu-in-content { 
    margin: 0 2% 1rem 2%; 
  }
  /* In one-column bloglists, wrap text under featured image */
  :is(#content,.pum-content) ul.bloglist.onecol li p { padding: 0 1rem; }
}

@media screen and (max-width: 850px) { 
  #content section.latestnews,
  ul.bloglist.threecol.news.publications li.listing-item { 
      width: 96%; /* two columns go down to one (for publications only)  */
  }
  ul.bloglist.fourcol.news li.listing-item { width: 96%; }
    ul.bloglist.fourcol.smaller li.listing-item {
      width: 45%; 
		  margin: 0.5rem 2%; 
	} 
  ul.bloglist.threecol.largeimage.smallgrants li.listing-item { width: 48%!important; }
}

@media screen and (max-width: 700px) { 
  #content section.latestnews,
  ul.bloglist.threecol li.listing-item,
  ul.bloglist.fourcol li.listing-item,
  ul.menu-in-content li,
  ul.bloglist.threecol.largeimage li.listing-item:nth-of-type(7),
  ul.bloglist.threecol.largeimage.smallgrants li.listing-item {
		width: 96%!important; 
		margin: 1rem auto; 
	} 
  ul.bloglist.threecol li.listing-item { 
    border-bottom-left-radius: 0.2rem;
  }
}

@media screen and (max-width: 550px) { 
  ul.bloglist.fourcol.newsmag.smaller li.listing-item {
		width: 96%; 
	} 
}
/* END MOBILE STYLES FOR BLOGLIST */




/* Special boxes with border */

#content .specialbox { 
  display: table;
	border: 3px solid #439539; 
	border-radius: 1rem; 
	margin: 2rem auto;
	padding: 1rem 1rem 0.5rem 1rem;
}

#content .specialbox.blue { border-color: #0069aa; }
#content .specialbox.green h2 { color: #439539; }
#content .specialbox.yellow { border-color: #d99327; }
#content .specialbox.yellow h2 { color: #d99327; }
#content .specialbox.berry { border-color: #84174b; }
#content .specialbox.berry h2,
#content .specialbox.berry h3 { color: #84174b; }

#content .specialbox p,
#content .specialbox li { color: black; }
#content .specialbox ul { xmargin-bottom: 0; }


#content .specialbox.red { 
	border-color: #ef4136;
	background-color: rgba(239,65,54,0.2);
	margin: 1rem 1.5rem;
}

#content .specialbox.noclear { 
  width: 38%;
  margin: 0 auto 2rem 0!important;
}
@media screen and (max-width: 1300px) { 
  #content .specialbox.noclear { 
    clear: left; 
    width: 96%;
    margin: 0 auto 2rem auto!important;
  }
}




/* ------------ RESOURCE PORTAL ------------- */

/* Portal search area, including filters and results */
div.portalsearch { 
  margin: 0 auto; 
  padding: 0; 
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 900px) { 
  div.portalsearch { 
    flex-direction: column;
  }
}

/* ---- Filters in left column ---- */ 
div.portalsearch > div.searchleft { 
  width: 25%; 
  padding: 0.2rem 0.7rem; 
  background: #f5f5f5;
}
@media screen and (max-width: 900px) { 
  div.portalsearch > div.searchleft { width: 100%; }
}

/* 'Reset Search' button */
input.search-filter-reset { 
  border: none; 
  border-radius: 0.3rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 100%;
  padding: 0.3rem 0.8rem 0.5rem 0.8rem;
  background: #bbb;
}
input.search-filter-reset:hover { background: #439539; }

/* Search box in Resource Portal */
#content input.sf-input-text { 
  border-radius: 0.3rem;
  border: 2px solid #0069aa;
  padding: 0.2rem 0.4rem;
  font-weight: bold;
  width: 100%;
}

/* Headers for "Filter by..." */
div.searchleft h4 { font-size: 1rem; }

/* Category filters */
form.searchandfilter ul li { font-size: 0.95rem; }
#content form.searchandfilter ul { margin: 0; }
#content form.searchandfilter ul li { left: 0; }


/* Hide top-level 'Resources' checkbox */
/* form.searchandfilter li.sf-level-0 > input,
form.searchandfilter li.sf-level-0 > label { display: none; } */

/* Main categories (Audience, Community Topics, Tradition) */
form.searchandfilter li.sf-level-1 > label { font-weight: bold; color: #0069aa; }

/* Indent subcategories */
#content form.searchandfilter ul ul ul ul { margin-left: 1rem; }

/* Checkboxes in subcategories */ 
form.searchandfilter li.sf-level-2 input { 
  display: inline-block;
  float: left;
  margin: 0.3rem 0 0 0;
}

/* Labels for subcategories */ 
form.searchandfilter li.sf-level-2 label { 
  display: table; 
  line-height: 120%; 
}

/* Drop-down for topics */
#content div.chosen-container { 
  max-width: 100%; 
  font-size: 0.9rem; 
}
#content div.chosen-container a.chosen-single { 
  padding: 0.3rem 0.5rem;
  text-decoration: none; 
}
#content div.chosen-container a.chosen-single span { color: black; }
#content div.chosen-container li.active-result { font-size: 0.8rem; }





/* ---- Search results in right column ---- */
div.portalsearch > div.searchright { 
  width: 75%; 
  padding: 1rem 0 1rem 1rem;
}
@media screen and (max-width: 900px) { 
  div.portalsearch > div.searchright { 
      width: 100%; 
      padding: 1rem 0;
  }
}

/* Each search result */
div.eachresult { 
  border: 1px solid #dbdbdb; 
  border-radius: 0.5rem;
  margin: 0 0 1.5rem 0;
  padding: 0.5rem 1rem 1rem 1rem;
}

/* Title/link to each resource (the first paragraph in each result) */
/*#content div.eachresult > p:first-of-type*/ 
#content div.eachresult > p:first-of-type a:first-of-type { 
  font-size: 1.4rem;
  line-height: 130%; 
  margin-bottom: 0.5rem; 
  display: block;
}

/* Paragraphs within each result */
#content div.eachresult p { margin: 0; }

/* Read More (e.g. in Web Chats) */
#content div.eachresult a.more-link { 
  font-weight: bold;
  color: white;
  background: #439539;
  display: inline-block;
  text-decoration: none;
  margin: 0.5rem 0 0 0;
  padding: 0.3rem 0.8rem 0.4rem 0.8rem;
  border-radius: 0.5rem;
}
#content div.eachresult a.more-link:hover,
#content div.eachresult a.more-link:visited { background: #0069aa; }

/* List of categories for each result */ 
#content div.eachresult p.categories { 
  margin-top: 0.5rem;
  padding: 0; 
  font-size: 0.9rem; 
}
#content div.eachresult p.categories a { font-weight: bold; }

/* List of tags/topics for each result */
#content div.eachresult p.tags { font-size: 0.8rem; }



/* ----- Pagination for Resource Portal and some blog post displays ----- */

#content .wp-pagenavi,
nav.display-posts-pagination { 
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Buttons for previous/next/page numbers */
#content .wp-pagenavi span.current,
#content .wp-pagenavi a,
#content a.page-numbers,
#content span.page-numbers.current { 
  font-size: 1.2rem;
  border: 2px solid #0069aa!important;
  border-radius: 0.2rem;
  display: inline-block;
  margin: 0 0.3rem 1rem 0.2rem;
  padding: 0.1rem 0.5rem 0.3rem 0.5rem; 
  line-height: 100%;
  text-decoration: none;
  font-weight: bold;
  background: #0069aa;
  color: white; 
}
#content .wp-pagenavi a:hover,
#content a.page-numbers:hover { 
  background: #439539; 
  border-color: #439539!important;
}


/* Page X of Y */
#content .wp-pagenavi span.pages { 
  border: none; 
  font-size: 1rem;
  background: transparent;
  color: black;
  font-weight: normal;
  padding-right: 1rem;
}

/* Current page number */
#content .wp-pagenavi span.current,
#content span.page-numbers.current { 
  background: white; 
  border-color: #bbb!important; 
  color: black;
  font-weight: normal;
}

/* ----- Category and tag results pages (list of results when someone clicks a category or tag link in the Portal) ----- */
body.archive #page #content article { 
  padding: 0; 
}

/* Each result */
body.archive #page #content article div.entry-content.ulol { 
  margin-bottom: 1.5rem;
  border: 1px solid #dbdbdb; 
  border-radius: 0.5rem;
  padding: 0.5rem 1rem 1rem 1rem;
}

/* Paragraphs within tag/category results */
body.archive #page #content article .ulol p { margin: 0; }

/* First paragraph in each result (linked name of resource) */
body.archive #page #content article .ulol > p:first-of-type { 
  font-size: 1.4rem;
  line-height: 130%; 
  margin-bottom: 0.5rem; 
}



/* ------------- POPUPS (e.g., Staff page) ------------ */

/* Popups for staff bios use theme #2021 */
.pum-theme-2021 div.popmake-content { 
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
}

/* Popups for board member bios use theme #9299 */
.pum-theme-9299 div.popmake-content { }

div.popmake-content h2,
div.popmake-content h3,
div.popmake-content p,
div.popmake-content img { 
  flex-basis: 100%; 
}

.pum-theme-2021 div.popmake-content div { 
  flex-basis: 70%;
}
 
.pum-theme-2021 div.popmake-content h2 { 
  font-size: 1.8rem; 
  margin: 0; 
}

.pum-theme-2021 div.popmake-content h3 { 
  margin-top: 0; 
  font-weight: normal;
  font-style: italic;
  color: #0069aa;
}

/* Photos of board members in popups */
.pum-theme-9299 div.popmake-content img.alignright { 
  max-width: 40%; 
  margin: 1rem 0 1rem 2rem;
  border-radius: 0.7rem;
}

/* Last paragraph of staff bios */
.pum-theme-2021 div.popmake-content > p:last-of-type { 
  flex-basis: 30%; 
  align-self: flex-end; 
}

/* Photo of staff member at bottom right */
.pum-theme-2021 div.popmake-content p img.alignnone { 
  position: relative;
  right: -1.3rem;
  bottom: -2.3rem;
  border-radius: 0 0 0.6rem 0;
}

/* Make sure popups displayed if linked to from another popup */
.pum-overlay.pum-active, 
.pum-overlay.pum-active .popmake.active {     
	display: block !important;     
}


/* ------------- Cards for staff members on Staff page ------------ */

:is(#content,.pum-content) ul.bloglist.people { 
  list-style: none;
  padding: 0; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly; /* ?? */
}


/* Each card */
:is(#content,.pum-content) ul.bloglist.people > li { 
  box-shadow: 0 0 2rem rgba(0,0,0,0.2);
  border-radius: 1rem;
  border: 4px solid white;
  flex-basis: 30%; 
  box-sizing: border-box; 
  margin: 1rem 0.5rem;
  display: flex;
  max-height: 14rem; /* needed to keep cards from being super tall in Safari */
}

/* Container div inside each card */
:is(#content,.pum-content) ul.bloglist.people > li > div.content { 
  display: flex;
  flex-wrap: nowrap;
  max-height: 14rem; /* needed to keep cards from being super tall in Safari */
}


/* --- Cards on Board page --- */

/* Officers */
:is(#content,.pum-content) ul.bloglist.people.officers > li { 
  min-height: 10rem; max-height: 10rem; 
}

/* Board members-at-large */
:is(#content,.pum-content) ul.bloglist.people.smaller > li { flex-basis: 23%; }

:is(#content,.pum-content) ul.bloglist.people > li:hover { box-shadow: 0 0 0.5rem rgba(0,0,0,0.3); }





/* Alternating background colors */ 
:is(#content,.pum-content) ul.bloglist.people > li:nth-of-type(4n+1) { background: #0069aa; }
:is(#content,.pum-content) ul.bloglist.people > li:nth-of-type(4n+2) { background: #439539; }
:is(#content,.pum-content) ul.bloglist.people > li:nth-of-type(4n+3) { background: #f7931e; }
:is(#content,.pum-content) ul.bloglist.people > li:nth-of-type(4n+4) { background: #84174b; }

:is(#content,.pum-content) ul.bloglist.people.smaller > li:nth-of-type(5n+1) { background: #84174b; }
:is(#content,.pum-content) ul.bloglist.people.smaller > li:nth-of-type(5n+2) { background: #ef4136; }
:is(#content,.pum-content) ul.bloglist.people.smaller > li:nth-of-type(5n+3) { background: #f7931e; }
:is(#content,.pum-content) ul.bloglist.people.smaller > li:nth-of-type(5n+4) { background: #0069aa; }
:is(#content,.pum-content) ul.bloglist.people.smaller > li:nth-of-type(5n+5) { background: #439539; }


/* Reset text styles */ 
:is(#content,.pum-content) ul.bloglist.people > li h3,
:is(#content,.pum-content) ul.bloglist.people > li h4,
:is(#content,.pum-content) ul.bloglist.people > li a {
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif;
  color: white; 
  margin: 0; padding: 0; 
  line-height: 110%; 
}

/* Person's name */ 
:is(#content,.pum-content) ul.bloglist.people > li h3 { 
  font-size: 1.1rem; 
  padding: 1rem 0 0.3rem 0; 
  font-weight: 700; 
}

:is(#content,.pum-content) ul.bloglist.people.smaller > li h3 { 
  font-size: 0.9rem; 
  font-weight: 700;
}

:is(#content,.pum-content) ul.bloglist.people > li h3 a { color: white; }


/* Job title */
:is(#content,.pum-content) ul.bloglist.people > li h4 { 
  font-weight: normal;
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 0.3rem 0;
}
:is(#content,.pum-content) ul.bloglist.people.smaller > li h4 { font-size: 0.9rem; }

/* Staff contact info; board member cities and term dates */
:is(#content,.pum-content) ul.bloglist.people p { 
  color: white!important; 
  line-height: 120%; 
  margin: 0 0 0.7rem 0;
  padding: 0!important;
}
:is(#content,.pum-content) ul.bloglist.people.smaller p { font-size: 0.8rem!important; }

/* Email and phone links */ 
:is(#content,.pum-content) ul.bloglist.people > li a.email,
:is(#content,.pum-content) ul.bloglist.people > li a.phone, 
:is(#content,.pum-content) ul.bloglist.people > li a.about { 
  display: inline-block; 
  margin-right: 0.5rem;
  text-decoration: none!important; 
  font-size: 0.9rem;
  color: white!important; 
}

:is(#content,.pum-content) ul.bloglist.people > li a.email:hover,
:is(#content,.pum-content) ul.bloglist.people > li a.phone:hover,
:is(#content,.pum-content) ul.bloglist.people > li a.about:hover { text-decoration: underline!important; }

/* Email and phone icons */
:is(#content,.pum-content) ul.bloglist.people > li a.email i,
:is(#content,.pum-content) ul.bloglist.people > li a.phone i,
:is(#content,.pum-content) ul.bloglist.people > li a.about i { 
  font-size: 0.8rem;
}

/* Lists of responsibilities */
:is(#content,.pum-content) ul.bloglist.people > li ul { 
  color: white;
  list-style: disc;
  margin: 0.4rem 0 0.4rem -0.4rem; 
}
:is(#content,.pum-content) ul.bloglist.people > li ul li { 
  font-size: 0.7rem;
  line-height: 100%; 
  margin: 0 1rem 0.3rem 0;
}

/* Container for all content in cards */
:is(#content,.pum-content) ul.bloglist.people > li div.content { width: 100%; }

/* Each of two columns in staff card */
:is(#content,.pum-content) ul.bloglist.people > li div.content div { 
  flex-basis: 55%;
  padding: 0 0.5rem 0 0.7rem;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

/* Second column with photo */
:is(#content,.pum-content) ul.bloglist.people > li div.content div:last-of-type { 
  height: 100%;
  flex-direction: row;
  flex-basis: 45%;
  align-self: center;
  padding: 0;
}

/* Staff card photos */
:is(#content,.pum-content) ul.bloglist.people img.alignnone { 
  display: block;
  float: none;
  margin: 0!important;
  width: 100%;
  max-width: 100%!important;
  height: 100%!important; 
  object-fit: cover;
  align-self: flex-end;
  border-radius: 0 0.8rem 0.8rem 0;
  border-left: 4px solid white;
}



/* Staff cards at screen sizes under 1250 */
@media screen and (max-width: 1250px) { 
  :is(#content,.pum-content) ul.bloglist.people > li { 
      flex-basis: 46%!important; 
      margin: 0.8rem 1rem 0.8rem 0; 
  } 
  :is(#content,.pum-content) ul.bloglist.people.smaller > li { 
    flex-basis: 30%!important; 
    max-height: 8rem; 
  }
}


/* Staff cards at screen sizes under 800 */
@media screen and (max-width: 800px) { 
  :is(#content,.pum-content) ul.bloglist.people > li { 
      flex-basis: 90%!important; 
      margin: 0.8rem 0; 
      flex-wrap: wrap; 
  } 
  /* Officers */
:is(#content,.pum-content) ul.bloglist.people.officers > li { 
  min-height: 10rem; max-height: 15rem; }
 :is(#content,.pum-content) ul.bloglist.people.smaller > li { 
    flex-basis: 45%!important; 
    max-height: 12rem; 
  }
  /* Each of two columns in staff card */
  :is(#content,.pum-content) ul.bloglist.people > li div.content div { flex-basis: 65%; }
  /* Second column with photo */
  :is(#content,.pum-content) ul.bloglist.people > li div.content div:last-of-type { flex-basis: 35%; }
  :is(#content,.pum-content) ul.bloglist.people img.alignnone { width: 100%; }
}


/* Staff cards at smallest sizes */
@media screen and (max-width: 500px) { 
  :is(#content,.pum-content) ul.bloglist.people.smaller > li { 
    flex-basis: 90%!important;
    margin: 0 0 1rem 0;
  }
}




/* ------------ WPForms (contact forms) ------------- */

/* Form fields in general */
div.wpforms-field-container
div.wpforms-field { margin-bottom: 1rem; }

/* Reset font sizes */
div.wpforms-field-container div.wpforms-field label.wpforms-field-label, /* Labels for fields */
div.wpforms-container div.wpforms-field-container div.wpforms-field input, /* Text fields */
div.wpforms-container div.wpforms-field-container div.wpforms-field textarea, /* Textareas */
div.wpforms-field-container div.wpforms-field label.wpforms-field-label-inline, /* Options in radio buttons */
div.wpforms-field-container div.wpforms-field div.wpforms-field-description /* Descriptions below fields */ { 
  font-size: 1rem; 
}

/* Labels below fields (e.g. in addresses) */
div.wpforms-field-container label.wpforms-field-sublabel.after { 
    font-size: 0.9rem; 
    margin-bottom: 0.5rem;
}

/* Bulleted lists in descriptions */
div.wpforms-field-container
div.wpforms-field-description ul li { 
  list-style-type: disc!important; 
  margin: 0 0 0 1rem!important; 
}

/* Submit button */
div.wpforms-container div.wpforms-submit-container button.wpforms-submit { 
  background: #439539;
  color: white;
  font-weight: bold; 
  padding: 0.4rem 1rem 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem; 
}
div.wpforms-container div.wpforms-submit-container button.wpforms-submit:hover { 
  background: #0069aa; 
  border: none; 
}




/* ---------------- THE EVENTS CALENDAR --------------- */

/* Reset typeface for The Events Calendar */
#content div.tribe-common-l-container *,
#content #tribe-events-content *,
div.tooltipster-base * { 
  /*font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; */
}

/* Fix bulleted lists in event descriptions */
.tribe-events-content ol,
.tribe-events-content ul {
 list-style-position: outside; 
}

/* Remove extra underlines from links */
#content div.tribe-common-l-container a,
#tribe-events-content a { border: none; }

/* Main container for TEC */
#content div.tribe-common-l-container { padding-top: 0; }


/* Previous/next arrows */
#content ul.tribe-events-c-top-bar__nav-list { margin: 0 1rem 0 -1rem; }

/* 'Today' button */
#content div.tribe-common-l-container a.tribe-common-c-btn-border-small { 
  border: 1px solid #ccc; 
  font-size: 0.8rem; 
}

/* Day of the week */
#content span.tribe-events-calendar-list__event-date-tag-weekday { 
  font-size: 0.9rem;
}

/* List/month/day/week/map options in view drop-down */
#content li.tribe-events-c-view-selector__list-item { left: 0; }

/* Container for each event */
#content article.tribe-events-calendar-list__event { 
  padding: 0 0 2rem 0!important; 
}

/* Highlight CDSS-sponsored events in list view */
#content article.tribe-events-calendar-list__event.tag-cdss-events { 
  border: 4px solid #439539!important; 
  border-radius: 0.3rem;
  padding: 1rem!important; 
}

/* Highlight CDSS-sponsored events in month view */
#content article.tribe-events-calendar-month__calendar-event.tag-cdss-events { 
  border: 2px solid #439539!important; 
  background: #bae3b5;
}

/* Hide featured image in monthly calendar */
div.tribe-events-calendar-month__calendar-event-featured-image-wrapper { display: none; }

/* Hide little blue line on CDSS-sponsored events in monthly calendar and list view */
.tribe-events .tribe-events-calendar-month__calendar-event--featured:before,
.tribe-events .tribe-events-calendar-list__event-row--featured .tribe-events-calendar-list__event-date-tag-datetime:after {
  background-color: transparent; 
} 


/* Container for event date, title, description, etc. */
#content .tribe-events-calendar-list__event-details { 
  width: 67%; 
  margin-left: 0;
  padding: 0; 
}

/* Date and time of event */
#content time.tribe-events-calendar-list__event-datetime,
time.tribe-events-calendar-day__event-datetime { font-size: 0.9rem; }

/* Event title */
#content .tribe-common h3 { line-height: 120%; }

/* Repeating series titles */
span.tribe-events-calendar-series-archive__container { display: block; }
span.tec_series_marker__title { font-size: 0.8rem; font-style: italic; }


/* --- Event categories as links --- */

/* List of all categories */
#content .tribe-events-calendar-list ul.tribe-event-categories,
dd.tribe-events-event-categories { margin-bottom: 0.5rem; }

/* Each category (list item) */
#content .tribe-events-calendar-list ul.tribe-event-categories li,
dd.tribe-events-event-categories a {
  display: inline-block;
  margin: 0 0.3rem 0 0;
  font-size: 0.65rem;
  left: 0;
}

/* hide commas in list of categories on single event pages */
#content dd.tribe-events-event-categories { color: white; }

/* Each category (link) */
#content .tribe-events-calendar-list ul.tribe-event-categories li a,
#content dd.tribe-events-event-categories a {
  color: #000;
  text-decoration: none;
  background-color: #ceecff;
  padding: 0 0.2rem;
}
#content .tribe-events-calendar-list ul.tribe-event-categories li a:hover,
#content dd.tribe-events-event-categories a:hover {
  background-color: #0069aa;
  color: white;
}


/* Event location */
#content address.tribe-events-calendar-list__event-venue { font-size: 0.8rem; }

/* highlight online events in green */
#content article.cat_online-event span.tribe-events-calendar-list__event-venue-title,
#content .upcoming .tribe_events_cat-online-event address 
.tribe-events-widget-events-list__event-venue-address-larger-areas span { 
  background: #bae3b5; 
  padding: 0 0.2rem; 
}

/* hide 'ONLINE, ONLINE' as city/state in online events */
#content article.cat_online-event span.tribe-events-calendar-list__event-venue-address,
#content .cat_online-event span.tribe-address { display: none; }

/* In Upcoming Events widget on homepage, change "ONLINE ONLINE" to just "ONLINE" */
#content .upcoming .tribe_events_cat-online-event 
span.tribe-events-widget-events-list__event-venue-address-region { display: none; }


/* Event description */ 
#content div.tribe-events-calendar-list__event-description p { 
  font-size: 0.8rem; 
  line-height: 140%; 
}

/* Container for featured image */
#content .tribe-events-calendar-list__event-featured-image-wrapper { 
  width: 30%; 
  margin: 0 0 0 3%; 
  padding: 0; 
}

/* Filtering sections (Event Category, Country, etc.) */
span.tribe-filter-bar-c-filter__toggle-label { font-size: 0.9rem; }

/* Filtering options (category names, countries, states, etc.) */
span.select2-dropdown.select2-dropdown--below li.select2-results__option { 
  padding: 0.3rem 0.5rem; 
  left: 0; 
  font-size: 0.8rem;
  line-height: 120%; 
}

/* Highlighted options */ 
ul.select2-results__options 
li.select2-results__option.select2-results__option--highlighted { background: #439539; }


/* Event times in monthly calendar view */
div.tribe-events-calendar-month__calendar-event-details 
div.tribe-events-calendar-month__calendar-event-datetime { 
  font-size: 0.8rem; 
  line-height: 100%; 
}

/* Event titles in monthly calendar view */
div.tribe-events-calendar-month__calendar-event-details 
h3.tribe-events-calendar-month__calendar-event-title { 
  font-size: 0.8rem; 
  font-weight: bold; 
}

/* Event titles in weekly calendar view */
div.tribe-events-pro-week-grid__event-link-inner
h3.tribe-events-pro-week-grid__event-title { 
  font-weight: bold; 
  font-size: 0.7rem; 
}

/* Main calendar at small sizes */
@media screen and (max-width: 800px) { 
  div.tribe-events-calendar-list__event-details { 
    width: 100%!important; 
 }
}





/* ---------------- UPCOMING EVENTS WIDGET ON HOMEPAGE --------------------- */

/* Outermost container for upcoming events widget, containing all events and buttons */
#content div.tribe-compatibility-container { 
  margin: 2rem auto 0 auto; 
  max-width: 94%; 
}

/* Reset typefaces */
#content div.tribe-compatibility-container * { 
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif; 
}

/* Container for all five events */
#content div.allevents {  
  display: flex; 
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Each calendar event */
#content div.eachevent { 
  background: white; 
  width: 15.5%; 
  border-radius: 0.5rem;
  box-shadow: 0 0 2rem rgba(0,0,0,0.2);
  margin: 0 0 1rem 0;
  padding: 0.2rem 0.2rem;
}
div.eachevent article { height: 100%; padding: 0.3rem 0!important; }
@media screen and (max-width: 1200px) { #content div.eachevent { width: 32%; } }
@media screen and (max-width: 800px) { #content div.eachevent { width: 48%; } }
@media screen and (max-width: 600px) { #content div.eachevent { width: 100%; } }

/* Highlight events put on by CDSS */
#content div.eachevent article.tag-cdss-events { 
  border: 5px solid #439539!important; 
  border-radius: 0.3rem; 
  padding: 0.3rem 0.2rem!important;
}
div.eachevent article.tag-cdss-events header em { display: none; } /* hide little blue flag */

/* Container for date, time, and recurring icon */
#content div.eachevent header.dateandtime {  
  display: flex;
  margin-bottom: 0.3rem;
}

/* Box with month and date */
#content div.eachevent header.dateandtime time.monthanddate { 
  border: 1px solid #ccc; 
  padding: 0.1rem 0.3rem; 
  margin-right: 0.5rem; 
}
#content div.eachevent header.dateandtime time.monthanddate span.month { 
  font-size: 0.8rem; 
  line-height: 100%; 
}
#content div.eachevent header.dateandtime time.monthanddate span.date { font-size: 1rem; }


/* Time of day, time zone, and recurring icon */
#content div.eachevent header.dateandtime time.timeofday { font-size: 0.8rem; line-height: 110%; }


/* Event title and link */
#content div.eachevent div.eventtitle h3 { font-size: 0.8rem; line-height: 120%!important; }

/* Event location */
#content div.eachevent div.location { margin: 0.2rem 0 0 0; }
#content div.eachevent div.location div,
#content div.eachevent div.location address { margin: 0; }
#content div.eachevent div.location span { font-size: 0.8rem; }


/* Buttons below list of events */
#content div.buttonsbelow { 
    text-align: center; 
    margin: 1rem 0 0 0; 
}

#content div.buttonsbelow a { 
  border-radius: 2rem; 
  margin: 0 1rem 1rem 1rem;
  padding: 0.2rem 1rem 0.4rem 1rem; 
  display: inline-block;
  background: white;
  border: 1px solid white;
  color: #0069aa;
  font-size: 1.3rem;
  font-weight: bold;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3); 
  text-decoration: none;
}
#content div.buttonsbelow a:hover { box-shadow: none; }
#content div.buttonsbelow a:last-of-type { color: #439539; }




/* ------------------ THE EVENTS CALENDAR - SINGLE EVENT PAGES ------------------ */


/* Container for all event info on single event pages */
#content .tribe-events-single div.tribe_events { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap;
}



/* 1. Image area (on pages with image) */

/* Override figure styles from main theme */
#content .tribe-events-single div.tribe-events-event-image figure { 
  display: block;
  float: none;
  width: auto; 
  min-width: auto;
  max-width: auto;
  margin: 0!important;
}

/* The image itself */
#content .tribe-events-single div.tribe-events-event-image figure img { 
  width: auto;
  max-width: 100%;
  border: 1px solid #ccc;
}

/* The container for the image and figure */
#content .tribe-events-single div.tribe-events-event-image { 
  flex-basis: 38%; 
  margin-right: 2%; 
  max-width: max-content;  /* makes the figure shrink to fit the width of the image */
}


/* 2. Event description (on pages with image) */
#content .tribe-events-single .has-post-thumbnail .tribe-events-single-event-description { 
  flex-basis: 60%; 
  flex-grow: 1; 
}

/* 3. 'Add to calendar' area */
#content .tribe-events-single div.tribe-events.tribe-common { 
  flex-basis: 19%; 
  padding-right: 1rem; 
}

/* 4. Event meta details (all except location/map) */
/* fills up the rest of the width, whether or not there's a map */
#content .tribe-events-single div.tribe-events-event-meta.primary { 
    flex-grow: 1; 
}

/* 5. Venue/location and map, if any */
#content .tribe-events-single div.tribe-events-event-meta.secondary { 
    flex-basis: 40%; 
}


/* Make everything one column on small screens */
@media screen and (max-width: 800px) { 
  #content .tribe-events-single { width: 98%; margin: 0 auto; }
  #content .tribe-events-single div.tribe_events,
  #content .tribe-events-single div.tribe_events > *,
  #content .tribe-events-single div.tribe-events-event-meta.primary > div,
  #content .tribe-events-single div.tribe-events-event-meta.secondary > div { 
    display: block;
    width: 100%; 
  } 
}




/* fix side scrolling on small windows */
#tribe-events-footer ul.tribe-events-sub-nav li { left: 0; }





/* --------------- ADD AN EVENT / SUBMIT AN EVENT PAGE --------------- */

/* hide 'Add an Event' button */
#tribe-community-events.form a.button { display: none; }

#tribe-community-events label,
#tribe-community-events h3,
#tribe-community-events input,
#tribe-community-events button,
#tribe-community-events a { text-transform: none; letter-spacing: 0; }

/* Most buttons */
#tribe-community-events button.tribe-button-secondary,
#tribe-community-events a.tribe-button-secondary { 
  background: #0069aa; 
  color: white;
  text-decoration: none;
  border: none; 
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem 0.7rem 0.8rem;
}

/* Submit button */
#tribe-community-events input#post { 
  background: #439539; 
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.7rem 1.2rem 0.9rem 1.2rem;
  border-radius: 0.3rem;
  width: auto;
}