/*
Theme Name: SiteOrigin North Child
Author: SiteOrigin + Allison Sheridan of the NosillaCast
Author URI: http://siteorigin.com/
Theme URI: http://localhost/podfeet_local_201704/siteorigin-north-child/
Description: North Child Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: siteorigin-north
Text Domain: north
Domain Path: /languages/
*/

/* =Theme customization starts here
-------------------------------------------------------------- */
/* @import url("../siteorigin-north/style.css");
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
## Menus
## Heading Typography
## Typography
## Post styling
## Custom Home Pages
## Padding Top Menus
## Categories
## Figures & figcaption
## Amazon Affiliate Links
## Asides
## Images (drop shadow)
## Image border
## Plugin-generated titles
## Display Post shortcode
## Audio player
## Remove Black Bars Caused by Site Origin

	/*--------------------------------------------------------------
	## Menus
	--------------------------------------------------------------*/
	.main-navigation ul a {
		color: #595959;
	}
		.main-navigation ul a:hover{
			color: #393939;
		}
	.main-navigation ul li a {
		font-size: 1.1em;
	}
	.main-navigation .svg-icon-menu, #header-search #close-search, #scroll-to-top .svg-icon-to-top {
		width: 24px;
		height: 24px;
	}
	.main-navigation ul > li a {
		padding-left: 0px;
		padding-right: 30px;
	}
	.menu-menu-across-the-top-container{
		font-size: 1.3em;
	}
	/* Search box text */
	div#header-search.container label form input {
		font-size: 1.5em;
		font-weight: bolder;
	}

	/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/
	/* Fix blockquote for better contrast Accessibility */
	blockquote {
		color: #c72525;
	}
	/* Fix all links for higher contrast darker red (was C75d5d) */
	a {
		color: #bc4141;
	}
	/* Normalize all blockquote variants to body size */
		.entry-content blockquote,
		.entry-content .wp-block-quote,
		.wp-block-quote,
		figure.wp-block-quote,
		blockquote {
		  font-size: 0.9rem !important; /* matches body */
		  line-height: 1.6;
	}
.entry-content blockquote p,
.wp-block-quote p,
blockquote p { font-size: inherit; }
	/* links under blog posts to date and author */
	.entry-meta li, entry-meta a, .entry-meta a, .meta-icon a, .posted-on a, .posted-by a {
		color: #6b6b6b;
	}
	/* Fix link site info & calendar links in footer for higher contrast was #595959*/
  #colophon .site-info a {
		color: #bc4141;
	}
	#colophon .widget-area .widget_calendar table tbody td.has-link a {
		color: #ad3c3c;
		background: #eee
	}
	/* tag list fix contrast */
	.tags-list a {
		background: #F2F2F2;
		color: #6b6b6b;
	}

	/* Add keyboard tag per Samantha Ming  https://medium.com/@samanthaming/html-kbd-tag-b842bb05045f */
	kbd {
		border: 1px solid DarkGrey;
		background-color: #EAECEE;
		color: black;
		font-size: 75%;
		border-radius: 5px;
		padding: 5px;
	}
	
	/* Add small styled class for Bart's explanation of each section on Security Bits */
	#content aside.small-aside{
 		 float: none;
  		background: inherit;
  		width: inherit;
	  	border: inherit;
		font: inherit;
        padding: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 1em;
        font-size: 11pt;
        font-style: italic;
        color: #595959;
     }
	
	/*--------------------------------------------------------------
	## Heading typography
	## "Regular" Headings controlled first
	## Widget headings
	--------------------------------------------------------------*/
  h1, h2, h3, h4, h5, h6 {
		clear: both;
		font-weight: bolder; /* Titles were too bland */
	}
	h1 {
		font-size: 1.25em;
	}
	h3 {
		font-size: 1.5em;
	}
	h4 {
		font-size: 1.25em;
	}
	h5 {
		font-size: 1em;
	}
	p {
		font-size: 1.2em;
		font-variant: normal;
		text-transform: none;
	}
	.widget h1{
		font-size: 1.25em;
	}
	.widget h2, .widget h3, .widget h4, .widget h5, .widget h6 {
		font-size: 1em;
	}

	/* Monospaced fonts for <code> */
	code {
		font-family: monospace;
		font-size: 1em;
		}
	

	/* Override parent theme to make <p> tags inside <li> match 1.2rem of theme */
	li > p {
		font-size: 1.0rem;
	}
	li {
		font-size: 1.0rem;
	}

	/* Indent Style */
	.tab {
		margin-left: 40px;
		}
	.double-tab {
		margin-left: 20px;
	}

	/*--------------------------------------------------------------
	## Post styling
	--------------------------------------------------------------*/
	.more-link {
	  float: left;
	}
	/*--------------------------------------------------------------
	## Custom Home Page
	--------------------------------------------------------------*/

	#masthead .site-branding .logo-site-title a {
		/* Blog title */
		font-size: 24px;
		font-variant: normal;
	}
	/* change font on the buttons on hero image home page */
	div.sow-hero-buttons div.so-widget-sow-button a span {
		font-weight: bold;
		font-variant: normal;
		text-transform: uppercase;
	 }
	/* puts a margin above the hero buttons so they wrap with a vertial gap */
	div.sow-hero-buttons div.so-widget-sow-button {
		margin-top: 10px !important;
	}
	/* shrink the gap between the panels on home page */
	div#pl-10759 .panel-grid {
	 	margin-bottom: 10px;
	}
	/* Make Hero Images left justified */
	div.entry-thumbnail img {
		margin-left: 0px;
		width: 150px;
	}
	/* ------------------------------------------------------------
	## Allows top menus to fill from right to left
	## nav.main-navigation gives left gap of each of the top menus
	## li:last-child adds a gap after PP signup and search
	## #masthead width keeps podfeet logo from being a % of page width
	## entry-thumbnail featured image
	## or maybe wp-post-image featured image
	-------------------------------------------------------------*/
	nav.main-navigation ul > li a {
		padding-left: 5px;
	}
	nav.main-navigation ul > li:last-child {
		padding-right: 5px; /* add only to the last element */
	}
	#masthead .site-branding {
		width: 200px;
	}
	.entry-thumbnail {
  		padding-top: 5px;
	}

	/*--------------------------------------------------------------
	## Category Pages (may affect others)
	--------------------------------------------------------------*/
	/* Change size of h2 text for post titles THIS DOESN'T DO WHAT I THINK IT SHOULD */
	div.h2.hentry-title {
		font-size: 20px;	}

	/*--------------------------------------------------------------
	## Figures and figcaption
	--------------------------------------------------------------*/
	/* Purpose: align caption centered below figures */
	figure {
		text-align: center;
		font-style: italic;
		font-size: smaller;
		border: thin silver solid;
		margin: 0.5em;
		padding: 0.5em;
	}
	.figure-left {
		float: left;
		/* adding some margin to keep a little distance between images */
		margin: 0 1rem 0 0;
	}
	.figure-right {
		float: right;
		/* adding some margin to keep a little distance between images */
		margin: 0 0 0 1rem;
	}

	/* Multiple figures side by side need to be floated left (or right)  */
	/* But then text floats around images (undesirable) This is supposed */
	/* to stop floating text around .group                               */

	.group {
  		display: flow-root;
	}

	/*--------------------------------------------------------------
	## iframes - Amazon Affiliate Links
	## NOTE - delete both marginwidth and marginheight from Amazon
	## NOTE - commented out because I couldln't get the margins to work
	--------------------------------------------------------------*/
	.iframe-left {
		float: left;
		/* adding some margin to keep a little distance between images */
		margin-right: 10rem !important;
		padding: 10px;
	}
	.iframe-right{
		margin: 0 0 0 10rem;
		float: right;
	}

	/*--------------------------------------------------------------
	## Format Asides
	--------------------------------------------------------------*/

	/* style  asides */
	/* use #content aside means only style asides within the element with the id content
	   The element with the id content is all of the good stuff within the WordPress page
	   Doing this so I don't mess up footers */
	#content aside{
	  float: right;
	  width: 33%;
	  margin: 10px;
	  border: 1px solid DarkGrey;
	  border-radius: 10px;
	  background-color: LightYellow;
	  padding: 10px;
	  font-size: 14pt;
	  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	  color: #666666;
	}
	aside h1, aside p{
 	 margin: 0.5em 0px;
	}
	aside h1{
	  margin-top: 0px;
	  font-size: 14pt;
	  font-weight: normal;
	}

	/*--------------------------------------------------------------
	## Image drop shadow (box shadow)
	## Images need this:
	## class="box-shadow-right" or class="box-shadow-left"
	## Note margins are different for left/right-floated images
	## Note that the right edge of left-floated is 10px to avoid shadow
	--------------------------------------------------------------*/

	.box-shadow-right {
    box-shadow: 0px 8px 8px #808080;
		border: 1px solid lightgrey;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	.box-shadow-left {
    box-shadow: 0px 8px 8px #808080;
		border: 1px solid lightgrey;
		margin: 0px 10px 5px 0px;
		float: left;
	}

/*--------------------------------------------------------------
	## Adding Image Border
	## Images need this:
	## class="linkBorder'
	--------------------------------------------------------------*/
	.linkBorder {
		/* add a 2px wide border to denote a linked image */
		border-style: solid;
		border-width: 2px;
		border-color: blue;
	}

	/*--------------------------------------------------------------
	## Format plugin-generated pages (e.g. display-posts, page-list)
	## Note title change may affect other pages
	--------------------------------------------------------------*/
	/* Change size of Titles */
	.title{
		font-size: 1.5em;
	}

	/*--------------------------------------------------------------
	## This code was provided by the dev for display posts shortcode, Bill Erickson
	## It puts the author and date on a new line below the title and leaves a line break before
	## content.  Also seemed to make the featured-items start showing
	--------------------------------------------------------------*/

	display-posts-shortcode .listing-item { margin-bottom: 30px;}
	.display-posts-listing .excerpt-dash { display: none; }
	.display-posts-listing .title,
	.display-posts-listing .excerpt { display: block; }

	/*--------------------------------------------------------------
	## Formats audio player (Built-in function of WordPress
	## Problem to be solved - player too dark for theme
	--------------------------------------------------------------*/
	.mejs-container, .mejs-controls, .mejs-embed, .mejs-embed{
		background: #A6ACAF;
	}

	/*--------------------------------------------------------------
	## Format plugin-generated pages (e.g. display-posts, page-list)
	## Note title change may affect other pages
	## Classes below are set in the Home Page Builder for the elements
	--------------------------------------------------------------*/
	.podcast-titles{
		text-align: center;
	}
	.home-page-image-text{
		text-align: center;
	}

	/*--------------------------------------------------------------
	## formats embeded media to 50%
	## Problem to be solved - player too dark for theme
	--------------------------------------------------------------*/
	embed,
 	{
	  max-width: 50%;
	}

	/*--------------------------------------------------------------
	## Remove Black Bars Caused by Site Origin
	## Alex from SiteOrigin had me enter this to remove the black bars
		--------------------------------------------------------------*/
	.main-navigation .svg-icon-menu, #header-search #close-search .svg-icon-close, #scroll-to-top .svg-icon-to-top
	  {
		width: 24px;
		height: 24px;
	  }
