/*
Theme Name: Guglielmo
Version: 0.1
*/


@import 'reset.css?nocache';
@import 'vars.css?nocache';

@import 'width-320.css?nocache' (max-width: 479px);
@import 'width-480.css?nocache' (min-width: 480px) and (max-width: 739px);
@import 'width-740.css?nocache' (min-width: 740px) and (max-width: 979px);
@import 'width-980.css?nocache' (min-width: 980px) and (max-width: 1219px);
@import 'width-1300.css?nocache' (min-width: 1220px);


body.bingo main article { width: 100%; }
body.bingo main aside { display: none; }

	body.bingo table { border-collapse: collapse; width: 100%; margin: 0 auto; }
	body.bingo th { background: rgba(64,10,102,1.0); border: 4px solid rgba(64,10,102,1.0); padding: 10px; color: white; font-size: 200%; font-weight: bold; }
	body.bingo td { border: 4px solid rgba(64,10,102,1.0); padding: 20px; width: 20%; height: 120px; text-align: center; font-size: 125%; letter-spacing: 0.01em; text-transform: uppercase; }
	body.bingo td.select, body.bingo td.freespace { background: rgba(255,25,83,1.0) !important; color: white; }
body.bingo td:hover { background: yellow; cursor: pointer; }



.grecaptcha-badge { visibility: hidden; }


h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a { color: var(--color-link); cursor: pointer; }
	a:visited { color: var(--color-link-visited); }
	a:hover { color: var(--color-link-hover); }

strong { font-weight: bold; }
em { font-style: italic; }

html { font-family: 'franklin-gothic-urw'; font-size: 91%; color: var(--color-text); box-sizing: border-box; background: var(--color-footer-bg) }
	*, *:before, *:after { box-sizing: inherit; }
  
  .inner { margin: 0 auto; }
  .wf-loading { opacity: 0; }

body { background: var(--color-bg); }


/* HEADER */

body>header { background: var(--color-header-bg); }
	body>header .inner { position: relative; height: 150px; }
		#header-logo { position: absolute; top: 70px; left: 0; }
		#header-title { position: absolute; top: 70px; left: 80px; }
		#header-names { position: absolute; top: 70px; left: 385px; }
	
	body>header>.inner>p { overflow: hidden; opacity: 0; height: 0; }
	
	#headerbar { border-bottom: 1px solid rgba(255,25,83,1.0); padding: 27px 0 8px; }
		#headerbar p { color: rgba(255,25,83,1.0); font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; }

	img#headshot { position: absolute; bottom: -36px; right: 0; width: 340px; height: 170px; z-index: 1; }



/* NAV */

nav { position: relative; background: var(--color-nav-bg); z-index: 0; }
	nav ul { overflow: auto; margin-left: -10px; }
		nav ul li { float: left; margin-right: 0; }
			nav ul li a { display: block; padding: 10px 10px; color: var(--color-nav-text) !important; font-weight: bold; text-transform: uppercase; text-decoration: none; letter-spacing: 0.04em; }
				nav ul li a:hover { color: var(--color-nav-text-hover) !important; }
  

body>main { margin-bottom: 80px; }





/* HOME */

#cover_head { margin-bottom: 20px; }

#podcast_player { position: relative; z-index: 2; background: var(--color-player-bg); padding: 16px 0 0; line-height: 1.25em; }
	#podcast_player .inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
		.player_box { margin-bottom: 20px; }
		
		#player_main { }
			#player_main header { text-transform: uppercase; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; margin-bottom: 1px; }
				#player_main header strong { color: rgba(255,238,51,1.0); }
			#player_main article { font-size: 200%; line-height: 1.0em; color: white; margin-left: -1.5px; margin-bottom: 0.5em; }
		#player_desc { }
			#player_desc header { font-weight: bold; text-transform: uppercase; color: rgba(255,25,83,1.0); letter-spacing: 0.05em; }
			#player_desc p { color: white; padding-right: 1.5em; }
		#player_guests { }
			#player_guests header { font-weight: bold; text-transform: uppercase; color: rgba(255,25,83,1.0); letter-spacing: 0.05em; }
			#player_guests ul { color: white; }
				#player_guests li::before { content: '\25AA \FE0E'; color: rgba(255,25,83,1.0); display: inline-block; width: 1em; }
		#player_player { }
			#player_player .mejs-controls { }
				#player_player .mejs-controls .mejs-duration { padding-right: 4px; }
				
		#player_buttons { display: flex; flex-wrap: wrap; justify-content: space-between; }
			#player_buttons a { display: block; padding: 8px 0; line-height: 1em; color: white; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border: 1px solid rgba(255,25,83,1.0); border-radius: 5px; }
				#player_buttons a:hover { background: rgba(255,25,83,1.0); }
				
#podcast_recent { background: var(--color-section-bg); padding: 0; }
	#podcast_recent .inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
		#podcast_recent p { display: block; flex-basis: calc( 16.66% - 17px ); text-transform: uppercase; letter-spacing: 0.02em; }
			#podcast_recent p:first-child { padding-top: 8px; }
				#podcast_recent p:first-child span {  }
			#podcast_recent p:not(:first-child) { border-left: 1px solid var(--color-border); padding-left: 9px; }
			#podcast_recent p:last-child { text-align: right; }

		#podcast_recent p a { height: 100%; display: block; text-decoration: none; padding: 0.52em 0 0.48em; color: var(--color-test);  }

.cover_loop { border-top: 1px solid var(--color-top-border); border-bottom: 1px solid var(--color-border); padding-bottom: 20px; margin-bottom: 40px; }
	.cover_loop h3 { font-size: 203%; color: var(--color-section-text); text-transform: uppercase; letter-spacing: 0.02em; padding: 18px 0 20px; } 
		.cover_loop h3 a { color: var(--color-section-text); }
			.cover_loop h3 a:hover { color: var(--color-link-hover); }

.other_archive { text-align: right; }
	.other_archive a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }





/* PODCAST */

body.single section { border-top: 1px solid var(--color-top-border); border-bottom: 1px solid var(--color-border); margin-bottom: 30px; width: 100%;  }
body.single section header { font-weight: bold; color: var(--color-text-label); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 0; }
	body.single article section main { border-top: 1px solid var(--color-border); padding-top: 8px; }
		
main>header { position: relative; background: var(--color-section-bg); padding: 14px 0; margin-bottom: 20px; border-top: 10px solid var(--color-nav-border); z-index: 2; }
main>header h1, main>header h2 { font-size: 203%; color: var(--color-section-text); text-transform: uppercase; letter-spacing: 0.02em; }
	main>header h1 a, main>header h2 a { color: var(--color-section-text); }
	main>header h1 { font-weight: bold; }
	main>header h2 { font-weight: normal; }


main .inner, #other .inner { display: flex; }

main article {  }
	#episode-head, #story-head { border-top: var(--color-top-border) 1px solid; }
	#episode-data, #story-data { display: flex; padding: 8px 0; }
		#episode-number, #story-category { width: 30%; font-weight: bold; color: var(--color-text-label); text-transform: uppercase; letter-spacing: 0.06em; }
		#episode-date, #story-date { width: 70%; text-align: right; text-transform: uppercase; letter-spacing: 0.04em; }
	#episode-title { border-top: var(--color-border) 1px solid; margin-bottom: 2.5em; padding-top: 5px; }
		#episode-title h3, #story-title h3 { font-weight: bold; font-size: 203%; letter-spacing: -0.01em; padding-right: 30px; }
		
	#episode-listen { border: none; margin-bottom: 10px; }
		#episode-listen .mejs-controls .mejs-playpause-button { background: var(--color-text); height: 30px; margin-right: 5px; }
			#episode-listen .mejs-controls .mejs-playpause-button:hover { background: var(--color-text-label); }
		#episode-listen  .mejs-controls .mejs-horizontal-volume-slider { padding-right: 3px; }
	#episode-description { border-top: var(--color-border) 1px solid; padding: 4px 30px 2em 0; }
		#episode-description p { font-size: 120%; line-height: 1.25em; }
	
	#episode-sponsors main { display: flex; padding-top: 10px; }
		#episode-sponsors p { width: 100%; line-height: 1.125em; margin-bottom: 10px; }
			#episode-sponsors p strong { display: block; font-size: 150%; line-height: 1.125em; border-bottom: 1px solid var(--color-sponsor-border); padding-bottom: 3px; margin-bottom: 3px; }
				#episode-sponsors br { display: none; height: 0; }

			#episode-sponsors p:nth-child(odd) { margin-right: 0; }
			#episode-sponsors p:nth-child(even) { margin-left: 20px; }
		#episode-sponsors p a { display: block; border: 2px solid var(--color-sponsor-border); background: var(--color-sponsor-bg); border-radius: 5px; padding: 4px 8px 6px; text-decoration: none; color: var(--color-text); }
			#episode-sponsors p a:hover { background: white; }
			#episode-sponsors p a:hover strong { color: var(--color-text-label); }
			
	#episode-show-notes main { font-size: 120%; line-height: 1.25em; padding-bottom: 1em; }	
	#episode-show-notes ul { list-style: disc; margin-bottom: 0.75em; }
		#episode-show-notes ul li { margin-left: 1.25em; }
	
	#episode-news-bag header { border: none; margin: 0; }
		.news-bag-link { position: relative; border-top: var(--color-border) 1px solid; padding: 8px 0 8px; }
			.news-bag-link a { display: block; font-size: 120%; line-height: 1.1em; color: var(--color-text); text-decoration: none; margin-right: 60px; }
				.news-bag-link a:hover { text-decoration: underline; }
			.news-bag-link br { display: none; }
			.news-bag-link span.timestamp { position: absolute; top: 0; right: 0; padding: 12px 0 8px; font-size: 100%; color: var(--color-text-light); }
			.news-bag-link span.source { font-size: 80%; color: var(--color-text-light); }

	section.tags ul { overflow: auto; margin-bottom: 0.375em; }
		section.tags li { float: left; }
			section.tags li a { display: block; margin: 0 5px 5px 0; padding: 4px 5px; background: var(--color-tag-bg); font-size: 90%; color: var(--color-text); text-decoration: none; }
				section.tags li a:hover { background: var(--color-tag-hover); }

	.aside-name, .aside-link { border-top: 1px solid var(--color-border); }
		.aside-names ul, .aside-links ul { display: flex; }
		
		.aside-name { padding: 8px 0 28px; }
			.aside-name p { font-size: 150%; }
			.aside-name a.twitter-link { display: inline-block; text-decoration: none; font-size: 80%; color: var(--color-text-light); border: 1px solid var(--color-border); margin-top: 4px; padding: 2px 3px 1px; }
				a.twitter-link .at { padding-right: 1px; }

		.aside-link { padding: 8px 0; }
		
		.aside-names ul li, .aside-links ul li, #podcast-prevnext main { position: relative; }
			a.aside-block-link { display: inline-block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }	
				.aside-names ul li:hover, .aside-links ul li:hover, #podcast-prevnext main:hover { background: var(--color-hover-bg); }	
			a.twitter-link { position: relative; z-index: 20; border-radius: 5px; }
				a.twitter-link:hover { color: var(--color-link-hover); border-color: var(--color-link-hover); }	
				
	#podcast-prevnext main { border-top: var(--color-border) 1px solid; padding: 8px 0 28px; }
		#podcast-prevnext main p { font-size: 120%; }

	#podcast-artwork { display: none; }
		#podcast-artwork img { display: block; width: 100%; }







/* NEWS BAG */
	
	
	#story-category a { color: var(--color-text-label); text-decoration: none; }

	#story-title { border-top: 1px solid var(--color-border); margin-bottom: 3em; padding-top: 5px; }
	
	#story-figure { border-top: 1px solid var(--color-top-border); padding: 10px 0; margin: 0; }
		#story-figure img { width: 100%; }

	#story-content { border-top-width: 0; padding-top: 10px; font-size: 120%; line-height: 1.5em; }
		#story-content p { margin-bottom: 1.25em; padding-right: 10px; }
			#story-content blockquote { background-color: var(--color-blockquote-bg); border-left: 10px solid var(--color-blockquote-border); padding: 0.375em 0.75em 0.01em; margin-bottom: 1.25em; }
			#story-content blockquote p:last-child { margin-bottom: 0.5em; }
		#story-content ul { list-style: disc; margin-bottom: 0.75em; }
			#story-content ul li { margin-left: 1.25em; }
		
		#story-content table { width: 100%; margin-bottom: 0.75em; }
			#story-content tr { border-bottom: 1px solid black; }
			#story-content th { font-size: 90%; font-weight: bold; }
			
			#story-content th.text, #story-content td.text { text-align: left; }
			#story-content th.number, #story-content td.number { text-align: right; }

	#story-podcast main p { font-size: 120%; line-height: 1.25em; }

	#story-location a { display: inline-block; margin-bottom: 5px; padding: 4px 5px; background: var(--color-tag-bg); font-size: 90%; color: var(--color-text); text-decoration: none; }
		#story-location a:hover { background: var(--color-tag-hover); }

	#story-recent ul li { position: relative; border-top: 1px solid var(--color-border); padding: 8px 0 10px; }
		p.link-title { font-size: 120%; line-height: 1.2em; padding-right: 10px; margin-bottom: 0.25em; }
		p.link-date { font-size: 80%; text-transform: uppercase; letter-spacing: 0.04em; }
		p.bottom-link { font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }
		
		
		#election2018 { margin-bottom: 0; padding: 10px 0; border-bottom-width: 0; }

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


div.imgur {
  position: relative;
  border: 1px solid var(--color-border);
  margin-bottom: 1.5em;
}
div.imgur:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 80%;
}
div.imgur iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important; height: 100%; 
}



#video_box { position: relative; padding-bottom: 56.25%; height: 0; }
	#video_box .youtube { padding-top: 25px; }
	
	#video_box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }





/* PAGES */

body.page main>.inner>article { line-height: 1.25em; }

body.page main>.inner>article h2 { font-size: 203%; line-height: 1em; margin-bottom: 0.5em; }

body.page main>.inner>article p { font-size: 120%; margin-bottom: 1em; padding-right: 3em; }

body.page article>section { margin-bottom: 2em; }






/* SIDEBAR */

	.inner>article { margin-bottom: 40px; }

	.aside-boxes { display: flex; flex-wrap: wrap; background: var(--color-section-bg); border: 1px solid var(--color-border); padding: 9px 9px 0; }
		.aside-box { margin-bottom: 10px; }		
			.aside-box a { display: block; }
				.aside-box img { width: 100% }


	#other { background: var(--color-other-bg); padding: 40px 0 120px; }
		#other h3 { font-size: 150%; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 20px; }




/* FOOTER */

	body>footer { background: var(--color-footer-bg); padding: 20px 0 120px; color: var(--color-footer-text); line-height: 1.25em; }
		body>footer a, body>footer a:visited { color: var(--color-footer-text); text-decoration: none; }
			body>footer a:hover { color: rgba(255,238,51,1.0); }
			#footer_legal { margin-bottom: 2.5em; }





/* CARDS */

.cards { display: flex; flex-wrap: wrap; }
	.card { position: relative; border-top: 1px solid var(--color-top-border); border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
		.card .card-figure { margin: 0; border-bottom: 1px solid var(--color-top-border); }
			.card .card-figure img { padding: 0; display: block; }
		.card .card-image { width: 100%; }
		.card .card-category { padding: 8px 0 8px 1px; border-bottom: 1px solid var(--color-border); font-size: 100%; font-weight: bold; color: var(--color-text-label); text-transform: uppercase; letter-spacing: 0.06em; }
		.card .card-title { padding: 4px 10px 42px 0; font-size: 150%; line-height: 1.1em; font-weight: bold; }
		.card .card-date { position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--color-border); padding: 8px 0 8px; font-size: 100%; text-transform: uppercase; letter-spacing: 0.04em; }
		.card .card-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }
	
	.card:hover, .episode-card:hover { background-color: var(--color-hover-bg); box-shadow: 0px 0px 10px 9px var(--color-hover-bg); }

#archive-pagination { display: flex; width: 100%; }
	#nav-prev, #nav-next { width: 50%; }
	#nav-prev a, #nav-next a { display: block; background-color: #ECE6F0; padding: 10px; text-decoration: none; color: #400A66; font-weight: bold; text-transform: uppercase;  }

	#nav-prev a:hover, #nav-next a:hover { background-color: #FFEE33; }
	#nav-prev a { text-align: left; margin-right: 10px;}
	#nav-next a { text-align: right; margin-left: 10px; }




/* EPISODE CARDS */

.episode-cards { display: flex; flex-wrap: wrap; }
	.episode-card { position: relative; border-top: 1px solid var(--color-top-border); border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
			
		.episode-card>header>img { float: left; margin: 10px 10px 0 0; }
		.episode-card-show { margin-left: 50px; padding: 10px 0 6px 1px; border-bottom: 1px solid var(--color-border); font-size: 100%; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; }
		.episode-card-number { margin-left: 50px; padding: 6px 0 10px 1px; font-size: 100%; font-weight: bold; color: var(--color-text-label); text-transform: uppercase; letter-spacing: 0.06em; }
		
		.episode-card-title { padding: 6px 20px 0 0; font-size: 150%; line-height: 1.1em; font-weight: bold; }
		.episode-card-short-desc { padding: 0 20px 16px 0; font-size: 120%; line-height: 1.1em; }
		
		
		.episode-card-guests { padding: 8px 10px 10px 0; border-top: 1px solid var(--color-border); font-size: 100%; line-height: 1.1em; }
			.episode-card-guests strong { text-transform: uppercase; letter-spacing: 0.04em; }

		.episode-card>footer { height: 30px; }
		.episode-card-date { position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--color-border); padding: 8px 0 8px; font-size: 100%; text-transform: uppercase; letter-spacing: 0.04em; }
		.episode-card-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; }