/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    S I T E W I D E   N A V I G A T I O N   E L E M E N T S :
 * @
 * @    Breadcrumbs
 * @    Quicklinks (e.g. "in this page")
 * @    Sidemenu
 * @    Back & Forth
 * @    Colorblock buttons
 * @
 * @    Footer navigation is in Sitewide
 * @    Top navbar is in Masthead - Topnav
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */


/* ============================================================================
 *                                                          BREADCRUMBS
 * ============================================================================
 */
.breadcrumbs { font-size: 0.75em; color: #0178a3; margin: 1rem 0 0 2rem; }

/* LARGE SCREENS -- align with Basics */
@media screen and (min-width: 1100px) { .breadcrumbs { margin-left: 4rem; } }


/* ============================================================================
 *                                                           QUICKLINKS
 * ============================================================================
 * "In this page" links, mostly used for small screens and accessibility.
 */
.quicklinks,
.quicklinks-always { list-style-type: none; margin: 1em 0; padding: 0; 
			display: flex; flex-wrap: wrap;
			justify-content: center; align-items: center; }
.quicklinks li,
.quicklinks-always li { flex: 0 0 auto; margin: 0.5em 1em 0 1em;}  




/* MEDIUM SCREENS */
@media screen and (min-width: 600px) { 
	.quicklinks { margin-left: 3rem; justify-content: flex-start; }

	/* repeat 'visuallyhidden' style for EVENTPAGE quicklinks on large screens */
	.eventpage .for-quicklinks:not(.FOR-PROTOTYPING) .quicklinks {
	  border: 0;
	  clip: rect(0 0 0 0);  /* Jan2021 invalid separator, must be comma? */
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	  white-space: nowrap; /* 1 */
	}
}

/* WIDE SCREENS */
@media all and (min-width: 1100px) {
	/* repeat 'visuallyhidden' style for ALL quicklinks on large screens */
	.for-quicklinks:not(.FOR-PROTOTYPING) .quicklinks {
	  border: 0;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	  white-space: nowrap; /* 1 */
	}
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    SIDEMENU
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

.sidemenu { padding: 0 1rem 1rem 1rem; }

.sidemenu .box             { margin-top: 2em; }
.sidemenu .box:first-child { margin-top: 0;   }

.sidemenu h2 { font-family: Arial, Helvetica, sans-serif; }

.sidemenu li { padding: .75em; border-bottom: dotted 1px silver; }

.sidemenu h3 { background: #0178a3; padding: 0.25em 1em;  margin: 0 0 0 -1rem;}
.sidemenu h3,
.sidemenu h3 a { color: white; } /* a is deprecated? */


.sidemenu a { display: block; }

.sidemenu li.this-topic { background: #e8e8e8; }



@media screen and (min-width: 700px) { /* WAS 600 - ALERT  */

	.sidemenu { padding: 0 0 1rem 1rem; }
	/* THE ACTIVE TRAIL ARROW ONLY MAKES SENSE FOR LARGER SCREENS */
	.sidemenu ul { position: relative; }
	.sidemenu li.this-topic:after {
		content: ' ';
		height: 0;
		width: 0;
		display: block;
		position: absolute;
		right: 0;
		border-left:   solid 0.75em #e8e8e8;
		border-right:  solid  0px transparent;
		border-top:    solid 1em transparent;
		border-bottom: solid 1em transparent;
		transform: translate(0.78em,-1.6875em);
	}
	.sidemenu li { padding: 0.25em; }
}


.sidemenu-note p {
	padding: 1rem; 
	background: #fea; 
	margin: 0 0 0 -1rem;
	}


.sidemenu a { width: 100%; height: 100%; }


/* On a very few pages, we add at the bottom "Back to __" */

.sidemenu .back-to { 
	font-size: 1.125rem; 
	background-color: cornsilk; 
	min-height: 2rem; 
	border-bottom: none; 
	margin: 3rem 0 0 -1rem; 
	padding: 0.25rem 1rem; 
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    BACK AND FORTH
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

.back-and-forth { 
	display: table; 
	font-size: 0.75em;
	border-bottom: solid 1px silver; 
	margin: 0 1.5rem 1em auto;
}
.back-and-forth a { color: #558899; }

.back-and-forth ul { display: table-row;  }
.back-and-forth li { display: table-cell; border-top: solid 1px silver; padding: 0.25em 0; }

.back-and-forth li.series { display: none; } /* only display for small screens */

.back-and-forth li.back:before, 
.back-and-forth li.next:after  { /* These make the triangle arrows */
	content: ' '; 
	display: inline-block; 
	height: 0; width: 0;
	border-left: solid 0.5rem transparent;
	border-right: solid 0.5rem transparent;
	border-top: solid 0.375rem transparent;
	border-bottom: solid 0.375rem transparent;
} 
.back-and-forth li.back:before { border-right-color: black; } 
.back-and-forth li.next:after   { border-left-color:  black; }

.back-and-forth li.back { width:  7em; } 
.back-and-forth li.next  { width: 11em; text-align: right;}

.back-and-forth li.back a { margin-left:  0.5em; } 
.back-and-forth li.next  a { margin-right: 0.5em; }


.back-and-forth .on_calendar li.back:before { border-right-color: #0178a3; } 
.back-and-forth .on_calendar li.next:after  {  border-left-color: #0178a3; }

.back-and-forth .live-music li.back:before  { border-right-color: #cc3355; } 
.back-and-forth .live-music li.next:after   {  border-left-color: #cc3355; }

.back-and-forth .musicshops li.back:before  { border-right-color: #ff7700; } 
.back-and-forth .musicshops li.next:after   {  border-left-color: #ff7700; }

.back-and-forth .hands_on_folk li.back:before  { border-right-color: #000000; } 
.back-and-forth .hands_on_folk li.next:after   {  border-left-color: #000000; }

.back-and-forth .dances     li.back:before  { border-right-color: #3355bb; } 
.back-and-forth .dances     li.next:after   {  border-left-color: #3355bb; }

.back-and-forth .jams       li.back:before  { border-right-color: #339966; } 
.back-and-forth .jams       li.next:after   {  border-left-color: #339966; }

.back-and-forth .coffee     li.back:before  { border-right-color: #885555; } 
.back-and-forth .coffee     li.next:after   {  border-left-color: #885555; }

.back-and-forth .spevent    li.back:before  { border-right-color: #9933aa; } 
.back-and-forth .spevent    li.next:after   {  border-left-color: #9933aa; }

.back-and-forth .festival    li.back:before  { border-right-color: #ff7700; } 
.back-and-forth .festival    li.next:after   {  border-left-color: #ff7700; }
.back-and-forth .headliners    li.back:before  { border-right-color: #ff7700; } 
.back-and-forth .headliners    li.next:after   {  border-left-color: #ff7700; }


/* TWEAKS FOR SMALL SCREENS */
@media screen and (max-width: 599px) {

	.back-and-forth ul { display: flex; justify-content: space-between; }
	.back-and-forth li { display: block; }

	/* Stand it off from the edge -- display full-width with series link */
	.for-back-and-forth { padding: 0 1em; font-size: 0.875em; }
	.back-and-forth { width: 100%; }
	.back-and-forth li.series { display: table-cell; text-align: center; }
	/* UNFORTUNATELY this does not override visuallyhidden */

	/* Bigger text, bigger arrows, more space between links */
	.back-and-forth    { font-size: 1em; }
	.back-and-forth li { padding: 0.75em 0; }
	.back-and-forth li.back:before, 
	.back-and-forth li.next:after  { 
		border-top-width: 0.5em; 
		border-bottom-width: 0.5em; 
		border-left-width: 0.75em; 
		border-right-width: 0.75em; 
		} 
	/* Apply background color */
	.back-and-forth { background: cornsilk;  border: none;}
	.back-and-forth	ul { border-top: solid 2px wheat;} 
	.back-and-forth	ul:last-child { border-bottom: solid 2px wheat;} 
	.back-and-forth	li { border: none; }
}


/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    COLORBLOCK BUTTONS
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */

/* ----------------------------------------- NARROW SCREEN DEFAULT MARGINS */
          .colorblock-buttons  { margin: 1rem 0.5rem 2rem 0.5rem; }
.sidemenu .colorblock-buttons  { margin: 1rem 0 1rem 0; } 

/* ALERT -- standard breakover is 700 */
/* -------------------------------------------------- MEDIUM SCREENS ONLY */
@media screen and (min-width: 600px) and (max-width: 1099px) { 
	.sidemenu .colorblock-buttons  { margin: 1rem -0.5rem 2rem -0.5rem; }
 }
/* -------------------------------------------------------- WIDE SCREENS */
@media screen and (min-width: 1100px) { 

	.sidemenu       .colorblock-buttons { margin: 1rem 0 1rem -1rem;        }
	.for-sidebar-2  .colorblock-buttons { margin: 1rem -.5rem  1rem -.5rem; }

	/* On the JAMS page (but rarely any other page), 
	   the colorblock buttons are at the top of sidebar 2
	   and should be flush with the top edge.
	*/
	.page_id__jams #funding { display:none; }
	.page_id__jams .colorblock-buttons { margin-top: 0; }
	.page_id__jams .colorblock-buttons .button-row:first-of-type .button {margin-top: 0 }
 }


/* -------------------------------------------------------- SPECIAL CASES */

.colorblock-buttons .button { text-transform: uppercase; }
.colorblock-buttons .button a { padding: 1em; font-weight: bold; width: auto; }


/* This button need not appear on calendar pages */
.eventlist .button-row.events-calendar { display: none; } 

/* but it SHOULD appear on the homepage even though that contains an eventlist */
.eventlist.homepage .button-row.events-calendar { display: flex; } 



/* These buttons need not appear on event pages */
.eventpage .button-row.tx-dx-vol, 
.eventpage .button-column.sponsor-membership { display: none; }


/* Create a little more space on directions sidemenus */
.directions .colorblock-buttons { margin-top: 4rem; }


/* A button just for the Spotify playlist */
.colorblock-buttons .spotify-link .button a { padding: .5em 1em .75em 1em; }

.colorblock-buttons img.icon.svg.sfms-spotify  { 
	height: 1.75em; 
	padding-left: .25rem;
	filter: drop-shadow(1px 1px 1px #025883); 
	}




/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 * @
 * @    FOOTER SECTION including its navigation
 * @
 * @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 */



#footer {
	margin-top: 1rem;
	padding: 2rem 2rem;
	min-height: 350px; 
	background-color: #6599ac;
	color: #f0f0f0;
	}

#footer nav a { color: #f0f0f0; }

#footer .homelink { margin-top: 0.75em; }



#footer .full-social-media   { 
	font-size: 1.75em; 
	display: flex;
	justify-content: space-around;
	max-width: 600px; margin: 1em auto;
}
#footer .full-social-media a { color: white; }



#footer .phonelink { }

#footer #copyright { margin-top: 3em; font-size: 0.875em;}
#footer #copyright a { color: #ffffff;}

#footer .dingbat    { background: #f0f0f0; width: 0.43125em; height: 0.43125em;}



#footer ul { margin-bottom: 2rem;  }
#footer li { padding: 0.75em 0;  border-top: solid 1px #557788; }

#footer li:last-child { border-bottom: solid 1px #557788; }

#footer li:first-child,
#footer .homelink { font-weight: bold; font-size: 1.25em; border-top: none; }



#footer .this-topic { background: #557788; margin: 0 -2rem; padding: 0.75em 2rem; }
#footer .this-topic + li { border-top: none; }
#footer li.homelink { border-bottom: none; }

#footer .navlinks:last-child li:nth-last-child(2) { border-bottom: solid 1px #557788; }

#footer .navlinks a { display: block; }




/* Not just screen.       BREAKOVER MUST MATCH the topnav breakover! */
@media all and (min-width: 800px ) {

	#footer li { font-size: 0.8125em; }
	#footer li:first-child,
	#footer .homelink { font-size: 0.875em; }

	#footer nav { display: flex; flex-wrap: wrap; } 
	#footer ul { flex: 1 1 10em; margin-bottom: 2rem; }

	#footer li,
	#footer li.this-topic { 
		border: none; 
		background: transparent; 
		margin: 0; 
		padding: 0.125em; 
	}
	#footer li:last-child,
	#footer .navlinks:last-child li:nth-last-child(2) { border: none; }

	#footer .navlinks a { display: inline; }

  }

/* ============================================================================
 *                                                FOOTER ADDENDUM
 * ============================================================================
 */
#footer-addendum { 
	margin-top: 1rem;
	padding: 2rem 1rem 2rem 1rem;
	text-align: center;
	background: #e0e0e0;
	font-size: 0.8125em;
	}

#footer-addendum p { 
	opacity: 0.75; 
	max-width: 35em; 
	margin: 0 auto 1em auto;
	}
#footer-addendum #social-media-attribution p { 
	max-width: 30em; 
	}


#grantlogos4web img { 
	opacity: 0.5; 
	margin: 1em; 
	max-width: 180px;
	}
#grantlogos4web img.cayc { opacity: 0.55; max-width: 75px;} 
#grantlogos4web img.nea { opacity: 0.65; max-width: 80px;} 
#grantlogos4web img.pci { opacity: 0.55; } 



#grantlogos4print { display: none; }

#footer-addendum #social-media-attribution { 
	margin-top: 4rem; font-style: italic; 
	}


/* Not just screen. */
@media all and (min-width: 700px ) {

 	#footer-addendum { display: flex; flex-direction: column; justify-content: start; }
	#footer-addendum #social-media-attribution { margin-top: auto; }

	#footer-addendum .folk-arts { margin-top: 1em; }
	#grantlogos4web img { display: block; margin: 1em auto 2em auto; }
 }