/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *                                    F O L K    A R T S   C E N T E R   
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *
 * FAC stylesheet is only loaded for pages requesting folk_arts support
 * otherwise some of them would apply sitewide.
 *
 */

/* ============================================================================
 *                                           L A Y O U T   T W E A K S
 *                     for Spotlight articles and Folk Artist profiles
 *                         (most other FAC pages are standard layouts)
 * ============================================================================
 *
 *
 *  .folk_arts.has_article  PICKS UP BOTH artist.html AND spotlights.html 
 *
 *  Community page LAYOUT is in community.html
 */
 

@media screen and (max-width: 699px) { 
	.folk_arts .for-page-content { margin: 0 2rem; }
	}


@media screen and (min-width: 700px) and (max-width: 1099px) { 

	.folk_arts.has_article #main { grid-template-rows: auto 45rem 45rem auto auto 1fr; }
	.folk_arts.has_article .for-page-content { grid-column: 2; grid-row: 2/5; }

	.folk_arts.has_article .for-chooser { grid-column: 1/3; grid-row: 5; }

	.folk_arts.has_article .for-sidemenu { grid-column: 1; grid-row: 2; }
	.folk_arts.has_article .for-sidebar-2 { grid-column: 1; grid-row: 3; }
}



@media screen and (min-width: 1100px) {  /* was 1200 */

	.folk_arts.has_article #main { grid-template-columns: 17rem auto 17rem; }
	.folk_arts.has_article .for-page-content { grid-column: 2; grid-row: 2; }
	.folk_arts.has_article .for-sidemenu { grid-column: 1; grid-row: 2; }


	.folk_arts.has_menu #main { grid-template-columns: 17rem auto 17rem; }
	.folk_arts.has_menu .for-sidemenu { grid-column: 1; grid-row: 2; }

	/* SPOTLIGHTS CAN HAVE ARTICLE **AND** MENU */
	.folk_arts.has_menu.only .for-page-content { grid-column: 2/4; grid-row: 2; }


	.folk_arts.artist_not_found .for-page-content
	.folk_arts.artist_not_found .for-sidemenu { grid-row: 2; }



	.folk_arts.has_menu .for-page-content { margin-left: 3rem; }
	.folk_arts.has_menu .for-page-content { margin: 0 2rem 0 1rem; }
}


/* ============================================================================
 *                                             PREVIEW MODE WATERMARK
 * ============================================================================
 */
.preview_watermark #main { background: url(../images/preview_watermark.svg) transparent; 
		/* background: transparent; */
		}


/* ============================================================================
 *                                                    pull quotes
 * ============================================================================
 */

.folk_arts .pull-quote { 
 	width: 85%; 
	background-color: #0178a3; 
	color: #f0f0f0; 
	font-family: 'Roboto Slab', Roboto, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	font-size: 1.375rem;
 	margin: 0 -2rem 1rem auto;
	padding: 1rem 1.5rem 1rem 1rem;
 	}


.folk_arts .pull-quote.lite {
	background-color: #f0f0f0;
	color: #0178a3;
	font-size: 1.25rem;
	} 


.folk_arts .pull-quote .rosario {
	font-weight: normal; 
	color: #d8d8d8;
	font-family: Rosario, Roboto, Arial, Helvetica, sans-serif;
	}

.folk_arts .pull-quote.lite  .rosario { color: #0178a3; }





.folk_arts  .pull-quote .source { 
	font-size: 1rem; 
	font-weight: normal; 
	white-space: nowrap; 
	}


.folk_arts .pull-quote a,
.folk_arts .pull-quote a:visited { color: white; } 

.folk_arts .pull-quote.lite a,
.folk_arts .pull-quote.lite a:visited { color: #0178a3; } 


@media screen and (min-width: 699px) {
	.folk_arts.page_id__artist .pull-quote.right {
		float: right;
		width: 33%;
		margin-left: 1rem;
		margin-bottom: 0; 
		}
	.folk_arts.page_id__artist .pull-quote.left {
		float: left;
		width: 33%;
		margin-right: 1rem;
		margin-bottom: 0;
		}
	}

@media screen and (min-width: 1100px) {
	.folk_arts.artist_profile .preamble .pull-quote {margin-right: -1rem; }
}

/* ============================================================================
 *                                                             FUNDING
 * ============================================================================
 */

.folk_arts .id_funding   { 
	font-size: 0.8125em; 
	color: #778; 
	max-width: 40em; 
	padding: 0 1rem; 
	margin: 3em auto 2rem auto; 
	}  

.folk_arts .funding-logos { text-align:center; margin-top: 1.5em; }
.folk_arts .funding-logos img { margin-bottom: 1.5rem; }
.folk_arts .funding-logos.nea-logo img { max-width: 80px; 
				width: auto !important; height: auto !important; }


/* funding within the sidebar */
@media screen and (min-width: 700px) {   
	.folk_arts .sidemenu .id_funding { 
		max-width: 16em; 
		padding: 0 1rem 0 0rem; 
		margin: 8em 4em 1rem auto; 
		}  
	.folk_arts .sidemenu .funding-logos { justify-content: left;  }
	.folk_arts .sidemenu .funding-logos img { max-width: 100%; height:auto !important; }

	.folk_arts .sidemenu .funding-logos .pca-logo img {         width: 15em !important; }
	.folk_arts .sidemenu .funding-logos .pca-partner-logo img { width: 13em !important; }
	.folk_arts .sidemenu .funding-logos .nea-logo img {         width: 6em !important; }

	.folk_arts .sidemenu .funding p { text-align: left; } 
	}


/*	I have funding blocks TWICE on all Folk Arts Center pages.
	Generally it should appear in the sidebar, but on mobile, that puts it under the menu.

	On MOBILE, the funding block in the sidebar would show up *under/after* the menu
	but it really should be *above/before* 

	On LARGE SCREENS it generally appears in the sidebar
	If the content is very long, it may also appear below the content
	but if content is short, the two funding blocks may appear duplicated and redundant.

*/

/* on mobile, funding should appear ONCE, ABOVE the menu */
@media screen and (max-width: 699px) {
	.page_id__spotlights #funding_content,
	.page_id__fac_events #funding_content,
	.page_id__artists_gallery #funding_content,
	.page_id__artist #funding_content,
	.page_id__center #funding_content,
	.page_id__grants #funding_content  { display: block; }

	.page_id__spotlights #funding_sidebar,
	.page_id__fac_events #funding_sidebar,
	.page_id__artists_gallery #funding_sidebar,
	.page_id__artist #funding_sidebar,
	.page_id__center #funding_sidebar,
	.page_id__grants #funding_sidebar  { display: none; }
}
/* --------------------------------------------------------------------
   On these pages, on larger screens, funding appears only in the sidebar
*/
@media screen and (min-width: 700px) {
	.page_id__fac_events #funding_content,    /* so hide the funding block */
	.page_id__artist #funding_content,        /* underneath the content    */
	.page_id__center #funding_content,
	.page_id__grants #funding_content { display: none; } 
}

/* --------------------------------------------------------------------
   On the other pages, funding is usually BOTH in the sidebar and below content
   but we don't need them appearing right next to one another. 
*/
@media screen and (min-width: 700px) {
	.page_id__spotlights.has_menu.only        #funding_content,
	.page_id__artists_gallery.has_menu.only   #funding_content { display:none; }
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *                    '' B L A C K   B O X ''    G A L L E R Y   P R O M O 
 *                                                 with video & thumbnails
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

.gallery.box { background-color: black; margin-top: 1.5em; padding: 1em; }
	/* and width is specified in artists_gallery.html */

.gallery.box h2, 
.gallery.box p { font-family: Rosario, Roboto, Arial, Helvetica, sans-serif; 
                  color:  #e4e4e4; }

.folk_arts.page_id__artists_gallery .gallery.box h2 { font-size: 1.5em; font-weight:  bold; } 
.folk_arts.page_id__artists_gallery .gallery.box p  { font-size: 1.125em; } 

.folk_arts.page_id__center .gallery.box h2 { font-size: 1.5em; font-weight:  bold; } 
.folk_arts.page_id__center .gallery.box p  { font-size: 1.125em; } 


.gallery.box h2.after { 
   border-top: solid 3px #0178a3;
   padding-top: 0.5em;
   border-bottom: none; 
   }
.gallery.box.flipped h2.after { 
   border-bottom: solid 3px #0178a3;
   padding-bottom: 0.5em;
   border-top: none; 
   margin-bottom: .7em;
   }

/* ...AND TRAILER VIDEO EMBEDDED */
.gallery.box .video-embed {  }
.gallery.box .video-embed figcaption { text-align: left; margin: 2em 0 1em .75em; }
.gallery.box .video-inner { max-width: 100%; } /* might not need that */



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *                        F O L K    A R T I S T    I M A G E   M E N U S   
 *               array of photos with no words -- "View the Gallery" menu
 *      card for each artist with caption and 3 pix -- "triptych" menu
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

/* ============================================================================
 *                            G A L L E R Y   A R T I S T   P I X - G R I D 
 * ============================================================================
 */

.folk_arts .artist-menu.pix-grid { background-color: black; padding: 15px 10px 10px 10px; }

.folk_arts .artist-menu.pix-grid li       { border: solid 2px #000;  }
.folk_arts .artist-menu.pix-grid li:hover { border: solid 2px #e9703e;  }


.folk_arts .artist-menu.pix-grid li.view-gallery { 
	border: solid 2px #000; 
	}
.folk_arts .artist-menu.pix-grid li.view-gallery a { 
	display: block; 
	height: 100%; 
	width: 100%; 
	text-align: center; 
	font-size: 1.25rem; 
	}
.folk_arts .artist-menu.pix-grid li.view-gallery a,
.folk_arts .artist-menu.pix-grid li.view-gallery a:visited { 
	background: #0178a3; color: #ddd;  
	}
.folk_arts .artist-menu.pix-grid li.view-gallery figure { position:relative;}
.folk_arts .artist-menu.pix-grid li.view-gallery .words { 
	display:block; padding: 0 1em; position: absolute; top:25%; left:0; 
	}


/* ~~~~~--------------- for pix-grid on the artist page (for invalid artist) --*/
.folk_arts.page_id__artist .artist-menu.pix-grid {
  margin:  1em 0;
  padding: .5em 0;
  border:  solid 1px #d8d8d8;
}



/* ============================================================================
 *                            G A L L E R Y   A R T I S T   T R I P T Y C H 
 * ============================================================================
 */

.for-page-content .artist-menu.triptych h2 { border-bottom: none; margin-bottom: 0; line-height: 1.1;}
.for-page-content .artist-menu.triptych p { margin-bottom: 0; }


.artist-menu.triptych li       { background-image: linear-gradient(#fff, #e8e8e8); }
.artist-menu.triptych li:hover { background-image: linear-gradient(#fff, #c0dde8); }

.artist-menu.triptych li { margin-bottom: 2em; }

.artist-menu.triptych li a { 
   display: grid; 
   grid-template-columns: 66% auto 32%; 
   max-width: 100%; 
   }
.artist-menu.triptych .pic.profile { grid-column: 1;   grid-row: 1; }
.artist-menu.triptych .words       { grid-column: 1/4; grid-row: 2; }
.artist-menu.triptych .pic.pair    { grid-column: 3;   grid-row: 1; }

.artist-menu.triptych .pic.profile img { width: 100%;  }

.artist-menu.triptych .pic.pair { display: flex; flex-direction: column; gap: 5px; justify-content: space-between;}
.artist-menu.triptych .pic.pair img { display: block; }

.artist-menu.triptych .words { margin: 0;  padding: .75em 1em 1em 1.5em;  text-align: center; }



/* ---------------------------- for wider screens ---- */

@media screen and (min-width: 890px) {
   .artist-menu.triptych ul { display: flex;  flex-wrap: wrap;  gap: 1.5em; }
   .artist-menu.triptych li { flex: 0 1 50%;  max-width: 47%;  min-width: initial;  margin: 0; }
   }

@media screen and (min-width: 1110px) {
   .artist-menu.triptych li { flex-basis: 30%; }   
   }


/* ============================================================================
 *                                                  P H O T O G R A P H S    
 *               in both kinds of essays -- artist profiles and spotlights
 * ============================================================================
 */ 

.folk_arts .essay-photo {  /*  specifically,  figure.essay-photo */
	max-width: 450px;
	margin: 0 auto;
	display:block;
	border: solid 1px #d8d8d8;
	background-color: #fbfbfb;
	padding: 0.5rem;
	margin-bottom: 2rem;
	}
.folk_arts .essay-photo img { width: 100%; }

.folk_arts .essay-photo .photo-credit { margin: 0.5em auto 0 auto; width: 90%; text-align: center; }
.folk_arts .essay .caption_above .photo-credit { margin: 0 auto 0.5em auto; }


.folk_arts .essay figcaption  /* ALL figcaptions - audio, video, and photos */
	{ 
	font-size: 0.9375rem; 
	color: #666; 
	text-align: center; 
	padding: 0rem; 
	margin: 1rem auto 1rem auto; 
	max-width: 90%;
	}
.folk_arts .essay figcaption.empty { margin: 0; }





	/* Standard variations: */

	.folk_arts .essay-photo.wide { width: 100%; max-width: 100%; }

	.folk_arts .essay-photo.medium-width { max-width: 620px }
	.folk_arts .essay-photo.full-width   { max-width: 100% }
	.folk_arts .essay-photo.unboxed      { padding: 0 0 .25rem 0; border: none; }
	.folk_arts .essay-photo.transparent  { background-color: transparent; }


	.folk_arts .essay-photo.three-up img              { width: calc(33.333% - 10px); }
	.folk_arts .essay-photo.three-up img:nth-child(1) { margin: 0 10px 0 0; }
	.folk_arts .essay-photo.three-up img:nth-child(2) { margin: 0  0   0 0; }
	.folk_arts .essay-photo.three-up img:nth-child(3) { margin: 0  0 0 10px; }


	.folk_arts .essay-photo.boxtop .text { 
		background: #a0a0b0; color: #f0f0f0; 
		padding: 1em; font-size: 1.125em;
		}
	.folk_arts .essay-photo.boxtop a,
	.folk_arts .essay-photo.boxtop a:visited { color: white; } 


	.folk_arts .essay-photo.unboxed.boxtop figcaption { margin: 0 0 1rem 0; max-width:none; }


/* Thumbnail image at top of SPOTLIGHT article */

.folk_arts .essay-photo.thumbnail { 
	width: 150px; 
	float: right; 
	margin: 0 0 1em 1em;
	padding: 0;
	border: none;
	background-color: transparent;
	}
.folk_arts .essay-photo.thumbnail figcaption {
	margin-top: .5em; 
	text-align: right; 
	font-size: 0.75em; 
	color: #778; }



/* Big portrait of artist at the top of FOLK ARTIST GALLERY article */

.folk_arts .essay-photo.portrait { 
	width: 100%; 
	margin: 0 auto;
	padding: 0;
	border: none;
	background-color: transparent;
}
.folk_arts .essay-photo.portrait .photo-credit { margin: .25em; max-width: 90%; }

.folk_arts .essay-photo.portrait figcaption { text-align: center; }


.folk_arts.page_id__artist .performer-photo.artist-photo img { max-width: 100%;  }
.folk_arts.page_id__artist .performer-photo.artist-photo .photo-credit { margin-top: 0.5em; max-width: 90%; }




/* ============================================================================
 *                                                 M E D I A   E M B E D S 
 *               in both kinds of essays -- artist profiles and spotlights
 * ============================================================================
 */ 

.folk_arts .essay .audio-embed-wrapper, 
.folk_arts .essay .video-embed
/* SAME AS .folk_arts .essay-photo */ 
	{ 
	border: solid 1px #d8d8d8;
	background-color: #fbfbfb; 
	padding: 0.5rem;
	margin-bottom: 2rem;
	}

.folk_arts .essay .audio-embed { padding-bottom: 0; margin-bottom: 0; background-color: aliceblue; }
.folk_arts .essay .audio-embed .audio { background-color: #0178a3; }
.folk_arts .essay .audio-embed audio { display: block; margin: 0 auto; }

.folk_arts .essay .audio-embed .title { 
	display: block; 
	text-align: center;
	padding: 0 1em .5em 1em;
	font-weight: bold; 
	font-size: 1.5em; 
	color: #0178a3;
	}

.folk_arts .essay .audio-embed figcaption { 
	padding: 1rem 0.75rem 0.75rem 0.75rem;
	margin: 0 auto; 
	text-align: left;
	}
.folk_arts .essay .audio-embed .after-text { 
	color: #666; 
	font-size: 0.9125rem; 
	margin: 0;
	padding: 1rem; 
	}
.folk_arts .essay .audio-embed figcaption.bottom { padding: 0; }


.folk_arts .essay .video-embed .video-inner { max-width: 100%; }

.folk_arts .essay a.video-placeholder-link { text-decoration: none; }





.folk_arts .portrait-video { margin-bottom: 1rem; padding-bottom: 0.5rem;}
.folk_arts .portrait-video figure { display: inline-block; }

.folk_arts .portrait-video,
.folk_arts .portrait-video figcaption { text-align: center; padding: 0;}
.folk_arts .portrait-video figcaption { margin: 0.5em auto 0 auto; width: 300px;}

/* this tall skinny video will not be responsive */
.folk_arts .portrait-video video { width: 332px; height: 600px; margin: 0 auto; }
.folk_arts .portrait-video .video-embed video { position: relative; }
.folk_arts .portrait-video .video-inner { padding-top: 0; }

@media screen and (min-width:900px) {
/*  .folk_arts .portrait-video { float:right; margin-left: 1em;} */
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *                 F O L K   A R T I S T S   G A L L E R Y   P R O F I L E S   
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */



/* ============================================================================
 *                                                   essays - general
 * ============================================================================
 */

.folk_arts.artist_profile section > div > h2  /* OVERRIDE */
	{ 
	font-family: 'Roboto Slab', Roboto, Arial, Helvetica, sans-serif; 
	font-weight: bold;
	color: #555;
	}

.folk_arts .essay h3 { font-size: 1.375rem; margin: 1.5rem 0 0.5rem 0; color: #01668a;}


.folk_arts a.pronunciation { font-style: italic; text-decoration-style: dotted; }
.folk_arts a#pronunciation { display: block; margin-top: 5em; }


/* ============================================================================
 *                           essays - boxes for weblinks and in-this-essay
 * ============================================================================
 */

.folk_arts.page_id__artist .weblinks,
.folk_arts.page_id__artist .in_this_essay_menu {  
	background-color: cornsilk;
	padding: 1rem;
	margin-bottom: 3em; 
	}
.folk_arts.page_id__artist .weblinks_title,
.folk_arts.page_id__artist .in_this_essay_title { margin-bottom: 0.5rem; }

.folk_arts.page_id__artist .in_this_essay_menu li { margin-bottom: 0.5rem; 
										margin-left: 1.25rem; text-indent: -1.25rem; }

.folk_arts.page_id__artist .in_this_essay_menu a  { text-decoration: underline; }

.folk_arts.page_id__artist .weblinks li::before, 
.folk_arts.page_id__artist .in_this_essay_menu li::before { 
	background-color: #01668a; 
	content: ' ';
	display: inline-block;
	height: 0.5rem;
	width: 0.5rem;
	margin-right: 0.5rem;
	}

.folk_arts.page_id__artist .in_this_essay_menu.addition { margin-top:-3rem }



/* ============================================================================
 *                                                      essays - footnotes
 * ============================================================================
 */

.folk_arts #footnotes { 
	margin-top: 4rem; 
	padding-top: 1rem; 
	border-top: solid 1px silver; 
	font-size: 0.8125rem;
	color: #777; 
	opacity: 0.8; 
	}
.folk_arts #footnotes h3 {  
	font-size: 0.8125rem;
	color: #777; 
	font-family: Roboto, Ariel, Helvetica, sans-serif;
	margin: 0;
	}

.folk_arts #footnotes p { 
	font-size: 0.8125rem; 
	margin-left: 2em; 
	text-indent: -2em;  
	}

.folk_arts #footnotes p.subnote { margin-left: 3em; }
.folk_arts #footnotes a { opacity:0.8 }




.folk_arts .essay aside { 
	background: #f0f0f0; 
	padding: 1em; 
	margin-top: 5em; 
	opacity: 0.8;
	}



/* ============================================================================
 *                            bottom nav under Folk Artist profile essays
 *                           needs some tweaks for different screen sizes
 * ============================================================================
 */

@media screen and (max-width: 699px) {
 .folk_arts  .bottom-nav { margin-top: 3em; }
 .folk_arts  .bottom-nav .button { margin: 1.5rem 0.5rem; }
}
@media screen and (min-width: 700px) {
 .folk_arts .bottom-nav { display: flex; justify-content: space-around; margin: 4em auto 3em auto; }
 .folk_arts .bottom-nav .button { flex: 1 0 auto; }
}

 .folk_arts.artist_not_found .bottom-nav { display:none; }



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 *          F O L K    A R T I S T    S P O T L I G H T    A R T I C L E S
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */


.folk_arts.spotlight #spotlight.essay h1 { 
	line-height: 1.1; 
	padding-bottom: 0.125em; 
	margin-bottom: 0.25em;
	border-bottom:  solid 3px #0178a3;
	color:#015d7f;
	}


.spotlight .title {margin: 0 -2em 0 -2em; padding: 0 2em 2em 2em; }

.spotlight .preheading {font-size: 0.6375em; display: block; }

.spotlight .about-spotlights, 
.spotlight .attribution { font-style: italic; font-size: 0.9375em; padding-right: 150px; } 

.spotlight .about-spotlights { margin-bottom: 1em; } 
.spotlight .attribution { margin-top: 1em; } 


.spotlight .intro { font-size: 1.375em; font-weight: bold; margin-top: .75em; color:#015d7f; }
.spotlight .inline-quote { color:  #015d7f;font-size: 1.0625em;}


.for-page-content .spotlight h2 { margin-top: 2.5em;  }





/* ============================================================================
 *                                                       SPOTLIGHT CHOOSER
 * ============================================================================
 */

#spotlight-chooser h1.choose-an { color: #556; }
#spotlight-chooser h1.choose-another { color: #99a; margin-top: 8rem; }

#spotlight-chooser.hide { display:none; }

.spotlight-list { margin:0; padding:0; }
.spotlight-list li::before { display: none; }
.spotlight-list li { text-indent: 0; margin: 0; }

.spotlight-list li { display: inline-block; padding: 0 .75em .75em 0;  }

.spotlight-list .thumb { display: block; width: 240px; }
.spotlight-list .thumb img { width: 100%; }

.spotlight-list .article-title { 
   display: block; 
   width: 240px; 
   background: black; color: white; 
   padding:  .5em;
   text-align: center;
}
.spotlight-list a { text-decoration: none; }

.spotlight-list li span { display: block; }



.choose-another + .spotlight-list .thumb,
.choose-another + .spotlight-list .article-title { display: block; width: 180px; }
.choose-another + .spotlight-list .article-title { font-size: 0.9375em; }


/* ============================================================================
 *                                                         NEWEST SPOTLIGHT
 *                                      ...teaser on Community landing page
 * ============================================================================
 */

#spotlight-newest {  
  background-color: #014b65; 
  padding: 1em; 
  text-align: center; 
}
#spotlight-newest h2 {
  color: #e8e8e8;
  margin-top: 0;
}
#spotlight-newest .date {
  display: block;
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
}
#spotlight-newest .title { 
   display: block; 
   width: 240px; 
   background: black; color: white; 
   padding:  .5em;
   text-align: center;
   margin:  0 auto;
   font-size:  1.375em;
}
#spotlight-newest a { text-decoration: none; }

#spotlight-newest .thumb { display: block; width: 240px; margin: 0 auto; }

#spotlight-newest .about-spotlights { 
  color: #c8c8c8; 
  max-width: 350px; 
  display: block; 
  margin: 1.5em auto .5em auto; 
  padding: 0;
}