/*
 Theme Name:   Spacious PRO Child
 Theme URI:    http://greenneedham.org/blog/spacious-pro-child/
 Description:  Spacious PRO Child Theme for Green Needham
 Author:       Michael Greis
 Author URI:   http://riverbendadvisors.com
 Template:     spacious-pro
 Version:      1.0.0
 License: GNU General Public License, version 3 (GPLv3)
 License URI: http://www.gnu.org/licenses/gpl-3.0.txt
 Tags:         one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, footer-widgets, blog, e-commerce
 Text Domain:  spacious-child
*/
/* Local Customizations */
/* Test variant for additional text color */
.c  {
    color: #237AB2;	
	}
b.c  {
    color: #237AB2;	
	}
.bc {
    color: #237AB2;
    font-weight: bold;	
	}
b.ggn {
     color: #8cc63f;
      }
h4 { 
	font-size: 1.5em; 
	line-height: 1.0em;
	}
p {
		line-height: 1.25em;
	}
hr {
	height:3px;
	border-width:0;
	color:#AAAAAA;
	background-color:#AAAAAA;
}
hr.ggn {
	height:3px;
	border-width:0;
	color:#8cc63f;
	background-color:#8cc63f;
	
}
/* Inset paragraph */
div.inset, p.inset {
  font-size: 90%;
  line-height: 100%;
  padding: 0 5% 0 5%;
}
div.updatebox {
	display: block; 
	margin: 1em 2em 1em 2em; 
	padding: 1em; 
	border-style: solid; 
	border-color: #08870e; 
	border-width: 2px;
	color: #222222;
}
/* Text characteristics for front page text */
.fp {
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.2rem;
    margin-left: 5%;
    margin-right: 5%;
	color: #222222;
}
/* Class for lists with additional space between items */
.spacedlist {
  margin-bottom: 1.0em;
	}
/* Modifications to reduce realtive width of sidebar */
/* Spacious theme default width: (primary) 61.5763547%; (secondary) 34.4827586%; total 96.1% */
/* 67.2 and 28.8 are a 70/30 split of the 96% */

#primary {
	width: 72.0%;
}
#secondary {
	width: 24.0%;
}
    
/* Needed to ensure that mobile device has primary & secondary both at 100%, one after the other */
/* 2017-10-10 - Changed back to 768px - problem was not width.  @media query was not closed */
/*                                      with second bracket, so rest of css not invoked */
/* 2017-08-02 - Changed to 900px from 768px to allow excerpts as inline-blocks */
/*              for wider browser windows (see "Style Excerpts" below) */
@media only screen and (max-width: 768px) {
	#primary, #secondary {
		float: none;
		width: 100%;
		margin: 0;
 	}
}
/*  Allows the right sidebar (search box0 and site menu to appear next to the logo and site name
    when the screen is larger than 900px.  This creates a more compact header (less vertical space used). 
*/
@media only screen and (min-width: 768px) {
	#header-left-section {
		float: none;
	    clear: none;
	}
    #header-right-section {
	    float: none;
	    clear: none;
  }
}
@media only print {
	#primary {
	margin-left: 0;
	margin-right: 0;
	float: none;
	width: 100%;
}
  }
/* Header background color */
#header-text-nav-container {
/* Uncomment when have selected color (and uploaded image with transparent background) */
	background-color: #F8F8F8; 
}

/* Slider Modifications - Title, description and read more location estingn alignment, but easier to create images with blank space on left? */
#featured-slider .entry-container {
	top: 80%;
	-ms-transform: translateY(-80%); /* IE 9 */
   -webkit-transform: translateY(-80%);
   transform: translateY(-80%);
	position: absolute;
	left: 5%;
	max-width: 40%;
}
/* Slider modifications - Title & Description box */
#featured-slider .entry-description-container {
	padding: .5rem 1rem;
}
/* Slider modifications - Read More box (line 837) */
#featured-slider .slider-read-more-button {
	padding: .5rem 1rem;
	float: left;
	margin-top: 15px;
	font-size: 1rem;
}
.metaslider.metaslider-6152 .flexslider .caption-wrap {
 width:100%!important; /* show full width */
 bottom: -65px!important; /*position caption below the slider image*/
}
.metaslider.metaslider-11072 .flexslider .caption-wrap {
 width:100%!important; /* show full width */
 bottom: -25px!important; /*position caption below the slider image*/
}
/* GNC specific formatting elements */
/* -------------------------------- */
/* Header for Resource Section of pages */
article h4.gnc-project-subheader {
    margin-top: 2rem;
    font-size: 1.4rem;
	text-decoration: underline;
    }
article h4.gnc-solarize-header {
    margin-top: 1.5rem;
    font-size: 1.4rem;
	color: #016836;
    }
article p.gnc-resources-header  {
    color: #000000; 
	text-align: center; 
	font-size: 1.5rem;
	line-height: 1.5rem; 
	background: #fbf0a3;
	}
article p.gnc-resources-header-smaller  {
    color: #000000; 
	text-align: center; 
	font-size: 1.1rem;
	line-height: 1.1rem; 
	background: #fbf0a3;
	}
article h5.gnc-resources-subheader {
    margin-top: 1.5rem;
    font-size: 1.1rem;
	text-decoration: underline;
		}
/* Links in Solarize (and other) headers */
h4 a {
    color: #016836;
	}	
h4 a:hover {
	background: #fbf0a3;
	}
/* Change image size for featured post on post pages */
.blog-medium .post .post-featured-image {
	max-width: 25%;
	height: auto;
	display: block;
}
/* Class for Recyclopedia page titles in sidebar */
.rcpagetitle {
	  margin: auto;
	  width: 90%;
	  text-align: center;
}
/* Specifies a "display block" (db) div with a solid top-only border.
   The div is separated from the previous element by 3 em of top margin.
   Allows the display of multiple similar items with a clear separation.
   Use for the 2nd through last such items in a container/on a page.
*/
div.db {
  border-top: 5px solid green;
  margin-top: 3em; 
  padding-top: 1em;
}
p.topline {
  border-top: 2px solid green;
  margin-top: 2em;
  padding-top: 1em;
  clear: both;
  overflow: auto;
    }
/* Footer widget area mods */
.footer-widgets-wrapper {
	  background-color: #EAEAEA;
	}
.footer-widgets-area {
  padding-top: 10px;
		}
.tg-one-fourth {
	  padding: 0px 0px 0px;
			}
#colophon .widget {
	  padding-bottom: 5px;
	}
/* Reduce padding/margins around top areas */
.header-post-title-container {
    padding: 2px;
	}
/* Reduce padding at top and bottom of header */
#header-text-nav-wrap {
    padding-top: 5px;
    padding-bottom: 5px;
}
/* Reduce padding at top of main navigation menu */
#main-navigation  {
	padding-top: 2px;
}
/* Reduce top padding in main display area */
#main {
    padding: 20px 0 10px 0;
	}
/* Reduce top & bottom margins in hr.textwidget */
.textwidget hr {
	margin: 15px 0;
	}
/* Reduce bottom padding and margin for widgets */
.widget {
	  padding: 0px 0px 5px;
	  margin: 0px 0px 5px;
/*	  margin-bottom: 15px; */
		}
/* Class to use image as main menu button */
.ggnbutton {
	background-image: url("https://www.greenneedham.org/blog/wp-content/uploads/2018/07/GGN_Campaign_Line.png");
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 5px;
	width: 100%;}
/* Class for highlighting a menubar item */
.menubar-hl {
	color: #2771b8;
	font-weight: bold;
}
/* */
/* Modifications and Customizations for plug-ins */
/* --------------------------------------------- */
/* Modifications for Breadcrumb NavXT plug-in 
      Limits the length of a post title as a breadcrumb 
	  Note: The author's site https://mtekk.us/ provides the example CSS for this setting 
	  (Search the site to find it)
      Two changes are required:
         - change class name to "breadcrumb"
         - change property to "v:title"            			
*/
.breadcrumb span[property="v:title"] {
    display: inline-block;
    padding: 0;
    margin-top: -3px;
    vertical-align: middle;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Shows entire breadcrumb when hovering */
.breadcrumb span[property="v:title"]:hover {
    max-width: none;
}
/* Modifications for Display Posts shortcode */
.display-posts-listing .listing-item {
    clear: both;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #eee;
}
.display-posts-listing img {
    float: left;
    margin: 0 10px 10px 0;
    max-width: 100px;
}
.display-posts-listing.image-left .image {
	float: left;
	margin: 0 16px 0 0;

	}
/* Modifications for List Pages Shortcode */
/* Style list items for sub-pages */
ul.list-pages-shortcode.child-pages li {
    line-height: 1.50rem;
    font-size: 1.00rem;
    }
div.bulk-list {
    margin-top: 1em;
	}
div.bulk-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
    }
div.bulk-list ul ul {
	margin-left: 1em;
}
div.bulk-list ul.list-pages-shortcode.child-pages li {
	line-height: 1.0em;
    font-size: 1.0em;
	padding-bottom: 1em;
    }
div.bulk-list ul.list-pages-shortcode.child-pages a {
	font-weight: bold;
}
div.bulk-list li.page_item div.excerpt {
   font-size: 0.9em;
}
/* Style excerpts in child page lists */
li.page_item div.excerpt {
  display: inline-block;
  line-height: 1.0em;
  font-size: 0.9em;
}
li.page_item div.excerpt::before {
  content: "  - ";
}
/* Modifications for page-list plug-in */
div.page-list-ext-meta {
	padding-left: 5%;
	padding-right: 5%;
}
h3.page-list-ext-title {
	font-size: 1.2em;
	line-height: 1.2em;
	padding-bottom: 0.5em;
}
	
/* Modifications for Recent Posts Widget Extended */
.rpwe-block a {
font-size: 1.3em;
}
  /* Remove border around thumbnail image */
.rpwe-thumb {
    border: 0px none !important;
    box-shadow: none !important;
    margin: 2px 10px 2px 0;
    padding: 3px !important;
}
.rpwe-summary {
	line-height: 1.2em;
}
/* Modifications for The Events Calendar plug-in */
  /* The Events Calendar plug-in widget styling */
.tribe-events-list-widget h4.tribe-event-title a {
	font-size: 0.9em;
	line-height:  0.9em;
}
.tribe-event-duration {
	font-size: 0.9em;
}
.tribe-events-list-widget-events li { 
  border-bottom: solid 2px lightgray;
	}
/* Modifications for PDF Embedder plug-in */
/* Set to allow text to flow around the viewer */
div.pdfemb-viewer {
    float: left;
    margin-right: 5px;
}