/*
Theme Name: generations-of-hope
Theme URI: 
Description: new theme for GHDC after disentangling from HM site content
Author: David Hopping
Author URI: 
Tags: custom
*/

/*** RESETS and Body ***/

* {padding: 0; margin:0;}

body {
	background: #DFDBCD url(images/backgroundweave-light.jpg);
	color: #222;
	font: 13px/16px Arial, Helvetica, sans-serif;  /* old reset... let's revisit this...  */
	}

a {color:#24a; text-decoration: none;}
a:hover {color:#56f;}
a.more {font-weight: normal; font-style: italic; color: #24a; font:.95em/1em Arial, Helvetica, sans-serif}
a.more:hover {color:#56f;}
a:active {outline: none;}

ul {list-style-type: none;}

blockquote { margin: 1em 0 1em 1.5em; }

.clear {clear:both;}

.open-sans {
	font-family: 'Open Sans', sans-serif;
}

/*** HR Styles  Chris Coyier, http://css-tricks.com/examples/hrs/  ***/

hr.horiz-txp-gradient {    /* Gradient transparent - color - transparent */ 
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.75), rgba(100,100,100,0));background-image: -moz-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.75), rgba(100,100,100,0)); background-image: -ms-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.75), rgba(100,100,100,0)); background-image: -o-linear-gradient(left, rgba(100,100,100,0), rgba(100,100,100,0.75), rgba(100,100,100,0)); 
	}
hr.horiz-dropshadow {     /* Single-direction drop shadow */ 
	height: 6px; 
	border: 0; 
	box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.5); }

	
/*** IMAGE Styles ***/

img {border: 0px;}

/*  these grab WP's built-in image management hooks */
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 2em}
a img.alignleft {float:left; margin:0 2em 2em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

img.responsive-banner {
	width: 100%;
	height:auto;
	}
	
/*  these grab the parent div of WP's image/caption pair. 
	Admittedly a kludgy fix... temporary... */
div.alignright {float:right; margin:0 0 1em 1em}
div.alignleft {float:left; margin:0 1em 1em 0}
div.aligncenter {display: block; margin-left: auto; margin-right: auto}

/*  these micro-manage display in posts  */
img.site-index {
     margin: 20px;
     padding: 20px;
     border:solid #003300 4px;
     background: #006600;
}

/*  green with wide border and box shadow -- a little too much ?
div.wp-caption {
    background: none repeat scroll 0 0 #f1f4d7;
    border: 10px solid #f1f4d7;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative; 
} */

div.wp-caption {
    background: none repeat scroll 0 0 #f6f6f6;
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 3px;
    position: relative;
	}
div.blog-single p.wp-caption-text{
	font: .85em/1.3em bold Arial, Helvetica, sans-serif;
	margin: .6em .5em .3em .5em;
	}
div.blog-single .featured-caption  p {
	font: 1.1em/1.3em  Arial, Helvetica, sans-serif;
	color: #222;
	width: 100%;
	height: auto;
	padding: 5px 2px; 
	}
div.blog-single .sans {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	}	
div.blog-single h4 {
	font-size: 1.2em;
	}	
div.blog-single  .tab-order-links a {
	font-size: 1.15em;
	font-weight: bold;
	}
div.blog-single  .tab-order-links {
	margin: 1.5em 0;
	height: 2em;
	}
div.blog-single  .tab-order-links div.next{
	float: right;
	}
div.blog-single  .tab-order-links div.prev{
	float: left;
	}
	

/* these next two manage the display of post previews (excerpts with thumbnails) as opposed to teasers...  */
/* probably will play around with inline-block / responsive options later  
*/
.blog-preview-row, .news-preview-row {
    border-bottom: 1px solid #ddd;
    clear: both;
    margin: 30px 0;
    padding-bottom: 25px;
	min-height: 80px;
	}
.blog-preview-row {
	min-height: 155px;
	}
.blog-preview-thumbnail {  
	float: left;
	/*border: 1px solid #bbb;   DROPSHADOW IS ENOUGH? */
    margin: 0 20px 15px 0;
	box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.20);
	}
.blog-preview-text {
    display: inline-block;
    max-width: 375px;	
	}
.blog-preview-text span.author, 
.news-preview-text span.author {
	color: #333;
	margin-bottom: .15em;
	}
.blog-preview-text span.date, .news-preview-text span.date  {
	font-size: .9em;
	font-style: italic;
	color: #777;
	margin: 0 0 .2em 0;
	}
div.blog-preview-text h3 {
	margin-top: 0;
	line-height: 1em;
	}
div.news-preview-text h3 {
	margin-top: 0;
	font-size: 1.3em;
	line-height: 1em;
	}
	
/*** TEXT Styles ***/

.small-text {font:9px/12px Arial, Helvetica, sans-serif}

.search-term {
	font:.85em/1em Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	color: #66b;
	}
.pullquote {
    color: #889;
/*  font: 1.3em/1.4em Arial,Helvetica,sans-serif;   */
    font: 1.45em/1.45em Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
	}
.pullquote span.pullquote-author {
	display: block;
	font:.75em/1.4em Arial, Helvetica, sans-serif;
	margin-top: .5em;
	}
	
/* New EPIGRAM styles for use with new custom shortcode  */

div#epigram {
	background-image: url(images/left_quote_75x58green.png);
	background-repeat:no-repeat; 
	padding: .5em 1em 0 1.6em;
    color: #889;
	}
div#epigram  > .quote-block {
    font: 1.1em/1.45em Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
	margin-bottom: .5em;
	}
div#epigram  > .author-block {  /*  might want to alter this independently someday, probably just font-size */
    font: .95em/1.45em Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
	margin-left: 1em;
	margin-bottom: .35em;
	margin-top: 0;
	}
div#epigram  > .epi-tagline {
    font: 0.85em/1.25em Arial,Helvetica,sans-serif;
	margin-top: 0;
	margin-bottom: 2em;	
	margin-left: 1.8em;
	margin-right: 1em;	
    }	
hr {
  height: 1px;
  color: #ddd;  }

h1 {
	font: 1.6em/200% Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#555;
	margin: 0 0 20px 0;  }
	
h2 {
	font: 1.45em/150% Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	color:#740500;
	margin: 0 0 5px 0;}
	
h3 {
	font: 1.3em/140% Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#740500;
	margin: 20px 0 5px 0; }
		
h4 {
	font: 1.15em/110% Arial, Helvetica, sans-serif;
	color:#740500;
	font-weight:normal;
	margin: 20px 0 5px 0;
	letter-spacing:1px; }
	
h5 {
	font: 1.1em/100% Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin: 10px 0 0 0;
	color:#700; }

/*** WRAP Styles ***/	

#page-wrap {
	max-width: 960px;
	min-width: 320px;
	margin: 15px auto;
	position: relative;
	box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
}
#main-wrap {
	background-color: #FFFFFA;
}
#content-wrap {  /* thin horizontal drop-shadow... should we move this up to nav? */
	padding: 23px 0;
	background: url(images/background_home_shadow.png) repeat-x;
}

/*** MASTHEAD Styles -- remove temp-alt-home changes after switchover of domains ***/

#masthead {
	padding-top: 5px; 
	height: 75px;
	width: 100%;
	background-color: #fff;
}
#masthead h1 {
	margin: 5px 0 0 0;
	text-indent: -9999px;
	float: left;
	width: 450px;
}
#masthead h1 a {
	width: 100%;
	height: 70px;
	margin-left: 20px;
	background: url(images/GenerationsOfHopeLogo450x59.png) no-repeat 0px 0px;
	background-size: 100%;
	display: block;
}
#masthead h1 a:hover {
	background: url(images/GenerationsOfHopeLogo450x59-fade.png) no-repeat 0px 0px;
	background-size: 100%;
}

/*** scrub this temp stuff later 
*/

#masthead.temp-alt-home h1 a {
    /* background: url(images/GenerationsOfHope_Logo_410x59.png) no-repeat 0px 0px; */
	background: url(images/GenerationsOfHopeLogo450x59.png) no-repeat 0px 0px;
	width: 100%;
}
#masthead.temp-alt-home h1 a:hover {
    /* background: url(images/GenerationsOfHope_Logo_410x59_fade.png) no-repeat 0px 0px; */
	background: url(images/GenerationsOfHopeLogo450x59-fade.png) no-repeat 0px 0px;
	background-size: 100%;
}



#masthead ul{
	list-style-type:none;
	font: .95em/1em Arial, Helvetica, sans-serif;
	color: #333;
	padding:0px;  /*  redundant?  */
	margin:0px;
}

/*** TEMPORARY ALERT BOX, as if dropped down over masthead banner 
	 used e.g. to redirect traffic to hopemeadows.org after name change.
	 Maybe should animate it...
*/
.alert {
	height: 70px; 
	width: 310px;
	background-color: rgba(78, 78, 78, 0.6);
	border-radius: 0 0 15px 15px; 
	margin-right: 5%;
	float: right;
	padding: 15px; 
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.alert:hover {
	background-color: rgba(69, 72, 40, 0.7); 
}
.alert h2 {
	color:#B1FF00; 
	text-align: center; 
	font-size: 1.8em;
}
.alert h3 {
	color:white; 
	font-family: 'Open Sans', Helvetica, sans-serif;"
}

div#social-header{
	float:right; 
	margin: 25px 25px 0 0;
}
/* INLINE SECONDARY NAVBAR -- obsolete now, but might have role in future 
#navbar {	
	margin: 32px 0 0 0;
	float:right;
}
#navbar li {display:inline;}
#navbar li a {
	color:#333;
	margin: 0 0 0 15px;
	font: 14px/14px Arial, Helvetica, sans-serif;
}
#navbar li a:hover {color:#999;}
#navbar li.current_page_item a, #navbar li.current_page_parent a {
	color:#740500;
}*/

#navButton {
	display: none;  /* until revealed at smaller screen size via media query */
	}
	
/*** New MAIN MENU Styles ***/
/*** adapted from http://kav.in/wordpress-dropdown-menu-wp-nav-menu-css/ ***/

div#new-mainmenu { 
	float: left;
	width:100%; 
	/*border-bottom: 1px solid #870000;*/
	-webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
	box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
	}
#navwrap {
	float:left;
	width:100%;
	min-height: 15px;
	color: #fff;
	font-size: 1.1em;
	background: #870000;
	padding: 9px 0;
	}
 
/* Top level Unordered list */
ul.dropdown {
list-style:none;
float:left;
/* padding: 0 8px;  instead we're shifting left via width:80% and text-centering li elements */
width:80%;
text-align: center;
}
/* over-ride default float:left with inline-block for better multi-line display on smaller media 
   when combined with text-align:center on container ul  */ 
ul.dropdown  li{
display: inline-block; 
position:relative; /* hey Submenu ULs, appear below! */
color:#fff;
}
 
ul.dropdown a {
padding: 8px 20px 8px 20px; /*space the items, occupy entire height too.*/
color:#fff;
text-decoration:none;
}
 
/* Style the link hover */
ul.dropdown li:hover a {
/*background-color: rgba(60,50,50,0.6);   you'd think this would work... */
background-color: #ccc;
background: url(images/txp_grey.png) repeat;
border-top: 1px dotted #bbb;
}
 
/* Displays the link as blocks. */
ul.dropdown li ul a {
display:block;
}
 
/* sub menus!!  */
 
ul.dropdown ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:230px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */
}
 
ul.dropdown li ul {
	top:24px; /* Positioning:Calc with top level horz list height */
	text-align: left;
	-webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.5);}
 
ul.dropdown ul ul {
	top:8px;
	left:100%; /* Position the sub menus to right. */
}
 
ul.dropdown ul li {
	float:none;
	display: block;
}
 
/* Drop Down! */
 
/* Hide all the dropdowns (submenus) */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }
 
/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}
 
ul.dropdown li * a:hover {
/* Change color of links when hovered */
/*background: rgba(60,50,50,0.9);*/
background: #111;
color: #fff;
}

/*  ts-tabmenu system -- minimalist approach, for publications page and possibly news etc. 
	-- temp solution for sites and partners
	horizontal tabbed menu via css
	http://www.htmldrive.net/items/show/409/CSS-Overlapping-Tabs-Menu
*/
#ts_tabmenu {
font-size: .95em; 
padding: 20px 0px 0px 20px; 
clear: both;
}
#ts_tabmenu ul {
line-height: 13px; /* setting the line height now so we don't have any headaches*/
margin: 0px; /* keep the margin set to 0 for the same reasons as above*/
list-style-type: none; /*  remove the UL's default disc bullets */
float: left; /*  float the list to the left like we will all the elements inside*/
padding: 0px 0px 0px 12px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#ts_tabmenu ul li {
float: left; 
}
#ts_tabmenu ul li a {
text-decoration: none; /* remove the default underline off the anchor text */
display: block; /* display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin' left, to make the menu horizontal */
padding: 0px 0px 0px 10px; /* give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
background: url(images/tabs.gif) no-repeat left top; /* we link to the tabs image, no tiling, showing the top left part of it */
margin-left: -5px; /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
z-index: 0; /* keep it on layer 0 (default) */
position: relative; /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
color: #666666; /* color of the tab text */
}
#ts_tabmenu ul li a strong {
font-weight: normal; /* remove the bold effect */
display: block; /* display the strong element as a block so we can pad it, etc. */
float: left; /* float it left as well */
background: url(images/tabs.gif) no-repeat right top; /* now we show the right part of the tab and we complete the "puzzle" */
padding: 5px 20px 7px 15px; /* important, as through this you define the position of the text within the tab */
cursor: pointer; /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#ts_tabmenu ul li a:hover {
position: relative; /* again, keep things relative */
z-index: 5; /*  show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
background: url(images/tabs.gif) no-repeat left bottom; /* now we show the bottom part of the tabs image, the "hover" instance */
color: #000000; /* we color the hovered tab's text black */
}
#ts_tabmenu ul li a:hover strong {
background: url(images/tabs.gif) no-repeat;
position: relative; /* keep it relative */
z-index: 5; /* show this on layer 5 as well */
background-position: right bottom; /* show the right bottom part of the tabs image (the hover instance) */
}
#ts_tabmenu ul li#tsmenu-current a {
position: relative;
z-index: 5;
background: url(images/tabs.gif) no-repeat left bottom;
color: #880000;
}

#ts_tabmenu ul li#tsmenu-current a strong {
background: url(images/tabs.gif) no-repeat;
position: relative;
z-index: 5;
background-position: right bottom;

}
/*** may not have any relevance, but wait until new header is built 
  and retire this after launch of redesigned site ***/
#menu-main-menu-container {
	margin: 0px 0 40px 25px;
}

#banner { 
	display:block;
	height:126px;
	background: url(images/mast_thin_2a.jpg);
}

/***  New PAGE TITLES ***/

#titleBlockMain {  /* takes over from the legacy references to specific page-ids */
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	margin: -92px 0 0 8px;
}
#titleBlockMain img {
	width: 475px; 
	height: 90px;
}
#titleBlock  {  /* takes over from the legacy references to specific page-ids */
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	margin: -70px 0 0 25px;
}
.blog-single > #titleBlock {
	margin: -100px 0 0 5px;
}
.su-dropcap-style-flat.red-cap {
    background: none repeat scroll 0 0 #844;
    color: #fff;
}
#titleBlock img {
	width: 311px; 
	height: 40px;
}

/*** New PAGE CONTENT Styles     
	 unfortunately still carrying some legacy baggage to eventually get rid of
***/

h2#search-header {
	font: normal normal 20px/22px Georgia, "Times New Roman", serif;
	letter-spacing: .2em;
	color: #888;
	padding: 10px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	clear: both;
	margin: 30px 30px 0 20px;
	}
#home-content-wrap, #home-hero-wrap {
  	margin: -1px 0;
	/*padding: 10px 0;*/
	background: url(images/background_hope_shadow_shorter.png) repeat-x;
	}
.row-content-wrap {
    margin: 0;
	padding: 10px 0;
	}
#home-content-wrap.no-shadow, .row-content-wrap {    /* for use when #hero has already established the dropshadow */
	background: url(images/background_hope.gif) repeat-x;
	}
#home-content-wrap:after, .row-content-wrap:after {
  content: "";
  display: table;
  clear: both;
}
#home-content-wrap.three-column-wrap h2{
	font-size: 1.8em;
	margin: 0;
}
#home-content-wrap.three-column-wrap h3{
	font-size: 1.5em;
	margin: 0;
}
/* .three-column-wrap:after {   plays havoc with floats inside for some reason
  content: "";
  display: table;
  clear: both;
} */

#home-col-right {
    background-color: #F1F4D7;
	width: 300px;
	float: right;
	margin: 0 10px 0 0;	}
	
/* this next id was a mistake made long ago; it tends to coerce elements inside such as <p>
   which I then end up having to override inline, since its specificity dominates classes -- 
   let's start switching over to classes such as .wide-col-left below 
   */
#home-col-left {   
	width: 100%;
	max-width: 610px; 
	float: left;
	background: transparent;
	margin: 0px 0 0 15px;	
	}
.wide-col-left {	     /* first use is in NewsUpdates template -- eventually refactor everywhere */
	width: 100%;
	max-width: 610px; 
	float: left;
	background: transparent;
	margin: 0px 0 0 15px;	
	}
#home-col-right p, #home-col-right h2, #home-col-right h3, #home-col-right h4, #home-col-right h5   {
	margin-right: 5px;
	}
#home-col-right h2{
	margin-top: 20px;
}
#home-col-left p, h2,  h3,  h4,  h5   {
	margin: 0 0 10px 0;}
	
#home-col-left .right-shifted {
	margin: 0 0 0 200px;
	font: 12px/1.7em Arial, Helvetica, sans-serif; }

#home-col-left .maintext, .wide-col-left .maintext {
	/*background: #eee; */
	margin: 0 0 0 20px;
	padding: 15px 0 0 0px;  }	
	
#home-col-left .maintext p{
	font: 1em/1.6em Arial, Helvetica, sans-serif;
	color: #333;
}	
#home-col-left p.tagline-top  { /* a temp fix... maybe can go... */
	font: italic  24px/24px Georgia, "Times New Roman", Times, serif;
	color: #eee;
	margin-bottom: 10px;}
	
#home-col-left p.tagline-bottom  {
	font: italic  21px/21px Georgia, "Times New Roman", Times, serif;
	color: #eee;
	margin: 0 0 10px 0;}
	
#home-col-left  .maintext h1  {
    float: right;
	font: normal 22px/22px Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #9a9a9a;
	margin-bottom: -5px;
	margin-top: 15px;}
	
#home-col-left  .maintext h2  {
	font: 17px/1.7em Georgia,"Times New Roman",Times,serif;
	color: #727272; }
	
#home-col-left  .maintext h3  {
	font: 17px/1em Arial, Helvetica, sans-serif;
	color: #555;
	margin-bottom: 14px;}

#home-col-left  .maintext h4  {
    font: normal 15px/15px Arial, Helvetica, sans-serif;
	font-style: normal; }
	
#home-col-left  p.publication-title  {
    font: normal 15px/20px Arial, Helvetica, sans-serif;
	margin-bottom: 5px;	
	font-style: normal; }
	
#home-col-left  p.publication-author  {
    font: normal 1em/1em Arial, Helvetica, sans-serif;
	font-style: italic;
	 }
	
#home-col-left  #tagline {
	font: 1.8em/1.3em Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	letter-spacing: .05em;
	color:#727272;
	margin: 0 0 7px 0;
	padding: 30px 0 30px 0; }/*appears within .maintext div so already has 15px padding-top */ 

#home-col-left .maintext a.more {
	font-weight: normal; 
	color: #24a; 
	font:.95em/1em Georgia, "Times New Roman", Times, serif; }
	
 /* adds white background and inside drop shadow to maintext area 
    invoked from within page layout in wp -- no doubt there's a better way */
#home-col-left .textwindow-start, .wide-col-left .textwindow-start { 	
	background: #FFF url(images/background_home_shadow.png) repeat-x;
	margin: 21px 0 0 25px;
	height: 50px;
	padding: 0 0;
	}

/* adds white background and drop shadow to .maintext area - 
   invoked from within page layout in template -- no doubt there's a better way */
body.single #home-col-left .textwindow-start {    
	background: #FFF url(images/background_home_shadow.png) repeat-x;
	margin: 0 0 0 35px;
	height: 50px;
	padding: 0 0;
	}		
/* continues white background in maintext area - 
   invoked in php post-loop in template */
#home-col-left .textwindow-continue, .wide-col-left .textwindow-continue  { 
	background: #FFF;
	margin: -30px 0 20px 25px;
	}
	
/* new TWO-COLUMN LAYOUT for main landing pages (Research, Communities, Partners) */

.two-column-wrap {   
	width: 100%;
}
.left-column, .right-column {
	max-width: 278px;
	min-width: 240px;
	float: left;
}
.left-column {
	margin-right: 20px;
}

/*** new THREE-COLUMN LAYOUT for home page 

	Note: the #hero div is essentially a derivation of .column-one, promoted to its own prominent row on the home page
*/

.three-column-wrap {   
	width: 100%;
	clear: both;
}
.three-column-wrap p, .column-one p, .column-two p, .column-three p{   
	font: 13px/1.6em  Arial, Helvetica, sans-serif;	
	color: #333;
	margin: 0 0 5px 0;
}

.column-two  p.shift-right, .column-three  p.shift-right {
	padding-left: 26px;}

.column-one, .column-two, .column-three { 
	width: 274px;
	margin: 0 0 0 29px;
	float: left;	

}
#hero{
	min-height: 245px;
    padding-top: 15px;
	}

#hero #container {
	float: left;
	margin: 40px 0 0 10%;}
	
#hero-text{
	margin-left: 5%;
	float: left;
	max-width: 45%;	}	
	
#hero-text p {
    color: #555555;
    font: 1.1em/1.55em Arial, Helvetica, sans-serif;
    margin-top: 20px;
}
.center-panel{			
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
/*	background: url(images/background_hope.gif) repeat-x scroll 0 0 rgba(0, 0, 0, 0);*/
	}
	
/*  h-row and h-box create a fluid and partly responsive layout. 
	Media queries will adjust h-box widths as required.
*/
.h-row-wrap {
    width: 100%;
    text-align: center;   /* sets up inline-block h-rows */
	margin: 0 auto;
	clear: both;
	}	
.h-row {
    clear: both;
    width: 100%;   
    display: inline-block;   /* relevant to center a 90% width over-ride */
    text-align: center;
 /*   border: 1px solid white;  for roughing-in 
	  margin: 15px;
	  padding-bottom: 10%; */
	}
.h-box {
    width: 36%;
    min-width: 280px;	
	max-width: 400px;
    margin: 45px 0 35px 9%;
	text-align: left;
 /*   background-color: #efefff;   for roughing-in */
	}
.h-box-inline {
	display: inline-block;
    float: none; 
	}
.h-box-float {
	display: block;
	float: left;
	}	
#svg-link-row {
	min-height:220px; 
	text-align:center; 
	}
#svg-link-row h3.svg-link-three, .svg-link-three a {
	color: #6d7445; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	}
 #svg-link-row  .svg-link-three  a:hover h3, .svg-link-three a:hover {
	color: #A4AB7C; 
	text-shadow: none;
	}

.column-one  h3 a:hover, #hero-text h2 a:hover { 
	color: #A7B0C7; 
}
.column-two  h3 a:hover, h3.about  a:hover  { 
	color: #B0867D;
}
.column-three  h3 a:hover  { 
	color: #A4AB7C;
}
.column-one h2, .column-two h2, .column-three h2, #hero-text h2 {
	font: 1.75em/1em Georgia, "Times New Roman", serif;
	margin:  0 0 5px 0;
	}
.column-one h3, .column-two h3, .column-three h3, #hero-text h3 {
	font: 1.5em/1.3em Georgia, "Times New Roman", serif;
	margin: 0 0 5px 0;
	}
#hero-text h2 {
	margin: 55px 0 15px 0;
	}		
.column-one h4, .column-two h4, .column-three h4, #hero-text h4 {
	font: 1.3em/1em Georgia, "Times New Roman", serif;
	margin: 0 0 10px 0;
	}
.column-one h5, .column-two h5, .column-three h5, #hero-text h5 {
	font: 1.15em/1.2em Arial, Helvetica, sans-serif;
	margin: 10px 0 8px 0;
	}
.column-one h2, .column-one h3 a, .column-one h4, .column-one h5, #hero-text h2 {
	color: #3B486A; }
.column-two h2, .column-two h3 a, .column-two h4, .column-two h5, h3.about  a {
	color: #8C4B3D; }
.column-three h2, .column-three h3 a, .column-three h4, .column-three h5 {
	color: #6D7445; 
	}
.column-two h5 {
	border-left: 13px solid #E4D6B3;
	padding-left: 13px;}
.column-three h5 {
	border-left: 13px solid #DFE5B3;
	padding-left: 13px;}


	/* new PRESS TEASER divs 
	these evolved from legacy styles... should be renamed to indicate current functionality, but it's complicated because they've spawned some related styles...
*/
.home-press-teaser {
	width: 293px;
	float: right;
	margin: 0 5px 0 20px;
	padding: 8px;
	border: thin dotted #CCCCCC;
}
.home-press-teaser .post {
	padding: 10px 0 5px 0;
	border-top: 1px #ddd solid;
}
.home-press-teaser h2 {
	font: 18px/1.3em Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin: 0 0 16px 0;
	border-bottom: 2px #ddd solid;
	}
.home-press-teaser h3 {
	font: 12px/1.1em Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	margin: 0 0 5px 0;
}
.home-press-teaser p {
	font: 0.85em/1.4em Arial, Helvetica, sans-serif;
	color:#333;
	margin: 0 0 7px 0;
}
.home-press-teaser .date {
	font: .8em/1em Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #555;
	margin: 0 0 7px 0;
}

.teaser {
	width: 293px;
	height: 340px;
	float: left;
	margin: 0 0 0 20px;
	background: #FFC;
}
.teaser h2 {
	font: 20px/22px Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	margin: 0 0 10px 0;
}
.teaser p {
	font: 15px/20px Arial, Helvetica, sans-serif;
	color:#333;
}
.teaser.hope {background: #EDE7F1 url(images/home_teaser_1.jpg) no-repeat bottom;}
.teaser.corp {background: #E1E5A5 url(images/home_teaser_2.jpg) no-repeat bottom;}
.teaser.living {background: #FFEC90 url(images/home_teaser_3.jpg) no-repeat bottom;}

.text-wrap {padding: 17px 20px;}

#quotes {
	height:25px;
	padding: 7px 20px;
	background-color:#222;
/*	background-color:#636; */
    border-top: 2px solid #751d06;
}
#quotes {
	font: 16px/25px Arial, Helvetica, sans-serif;
	color: #FFF;
/*	color: #FC3; */
}
span#quoteauthor {
	font: 13px/15px Arial, Helvetica, sans-serif;
	color:#FFF;
}

.press-teaser h5 {
	font: 14px/17px Arial, Helvetica, sans-serif;
	font-weight:normal;
	margin: 20px 0 0 0;
}
.faq ul li, #col-right #col2 ul li {
	margin: 0 0 6px 0;
	padding: 0 0 0 15px;
	background: url(images/bullet_square.gif) no-repeat 0 9px;
}
ul li.basic-list {
	margin: 0 0 6px 10px;
	padding: 0 0 0 15px;
	line-height: 1.6;
	background: url(images/bullet_square.gif) no-repeat 0 9px;
}

/*** new styles for SITE LISTING... will be in flux for a while longer ***/

.site-list-development ul li {
    margin-bottom: 10px; 
	background-image: url('http://ghdc.generationsofhope.org/images/BluePin.png'); background-repeat: no-repeat; 
	background-position: 0px 5px; 
	padding-left: 30px;
	}
.site-list-operational ul li {
	margin-bottom: 10px; 
	background-image: url('http://ghdc.generationsofhope.org/images/RedPin.png'); background-repeat: no-repeat; 
	background-position: 0px 5px; 
	padding-left: 30px;
}
p.date, div.news-preview p.date {
	color: #666;
	margin: 10px 0 8px 0;
}
div#byline {
	margin: 0 0 20px;
}
div#byline p.date {
	font-size: .9em;
	color: #666;
	margin: 5px 0 0 0;
}
div#byline p.author {
	font: 1.2em Georgia, "Times New Roman", serif;
	color: #777;
	margin-bottom: 4px;
}
p.divider {
	border-top: 1px #ddd solid;
	padding: 10px 0 0 0;
}
p.caption {
	font: 11px/13px Arial, Helvetica, sans-serif;
	border-bottom: 1px #ddd solid;
	padding: 0 0 10px 0;
}
p+p, p+ul, .top-margin {margin-top:10px;}
p+h2 {margin-top:20px;}
div+h2 {margin-top:30px;}

.floatRight {
	float:right;
	clear:right;
}
.floatLeft {
	float:left;
	clear:left;
}
.donate-container {
	width:100%;
	min-height: 200px;
	margin: 0 auto 25px;
	text-align: center;
    padding: 45px 0;	
	}
.donate-block {
	display: inline-block;
	padding-bottom: 30px;
	width: 320px;
	vertical-align: middle;
	}
.donate-block h3 {
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
	line-height: 1.7em;
	text-align: center;
	letter-spacing: .05em;
	font-size: 16px;
	font-style: italic;
    color: #888888;
    font-family: Georgia,"Times New Roman",serif;
    margin: 30px 30px 0 0;
    padding: 10px 0;
	}

/* DIV Styles -- piggy-backed some new selectors on old Sandbox ones */

div.blog-preview,
div.news-preview,
div.board-teaser, 
div.press-teaser, 
div.publications-teaser, 
div.locations-teaser, 
div.awards-teaser, 
div.locations-single{
	margin: 24px 10px 0 20px; }  /* fit into text-window-continue recessed div */
	
div.plain-narrative {
	margin: 5px 10px 5px 20px; }
	
div.publications-teaser h3, div.press-teaser h3 {
	border-top: 1px #ccc solid;
	padding: 20px 0 0 0;
	margin: 10px 0 0 0;
	font: 13px/17px Arial, Helvetica, sans-serif 
	}
div.board-teaser h3 {
/*	border-bottom: 1px #ccc solid;
	padding: 20px 0 0 0;*/
	margin: 10px 10px 0 0;
	font: 13px/17px Arial, Helvetica, sans-serif 
	}	
div.locations-teaser h3 {
	border-top: 1px #ccc solid;
	padding: 20px 0 0 0;
	margin: 10px 5px 3px 0;
	font: 18px/21px Georgia, "Times New Roman", serif; 
	}
div.awards-teaser h3 { 
	/* no top border */
	padding: 5px 0 0 0;
	margin: 0 0 5px 0;
	font: 14px/17px Arial, Helvetica, sans-serif; }

div.plain-narrative h3 { 
	/* no top border */
	padding: 5px 0 0 0;
	margin: 0 0 5px 0;
	font: 15px/17px Arial, Helvetica, sans-serif;	}

div.awards-teaser p, div.locations-single p , div.plain-narrative p {
	margin: 0 0 5px 0;
	font: 12px/1.7em Arial, Helvetica, sans-serif; }
	
div.locations-teaser h3 {
	margin-bottom: 3px;
	font: 16px/18px Georgia, "Times New Roman", serif; }

div.publications-teaser p {
	padding: 5px 0 5px 0;
	font-size: 10.5px;
	line-height: 1.5em;
	color: #666; }

div.locations-single .date{
	font-size: 11px;
	line-height: 16px;
	color: #888; }

div.sidebar {
	background-color:#ECEAE2;
	padding: 20px;
	margin: 0 0 20px 20px;
	width: 200px;
	float:right;
	clear: right; }

.sidebar h4 {
	margin: 0 0 10px 0; }

/*** Cameron's shortcode widget  ***/

div.page-link{
	padding-right: 20px; }
	
div.page-link h4 {
	margin-bottom: 20px;
	font-size: 1.2em; }
	
.post .communities-teaser .date {
	border-top: 1px #e2e2e2 solid;
	padding-bottom: 5px;
	padding-top: 10px; }

.post .author-tagged {
	font-size: .9em; }  /* p and h3 tags will be em-sized off of this base,
						   which is adjusted down a bit to end up matching sidebar styles */

.book-image {	
	box-shadow: 2px 2px 6px 1px rgba(0,0,0,.5);
	margin: 2em 2em 2em 1em;}
	
	
/*** New SIDEBAR styles ***/
/*  now as id instead of old class sidebar, eventually supporting sidebar.php
	
	Might have to rethink this in future, depending on how sultiple "sidebars"
	are gonig to be handled
*/

div.sidebar-wrap {
	border-left: 1px solid #eee;
	position: relative;
    float: right;    
    width: 290px;	
	margin: 9px 0 0 0;	}

#sidebar {   	/* 280px total balances locations */
    color: #424242;
    background-color: #F1F4D7;
    padding: 15px 20px 0 25px;
	/*height: 400px;   set this inline for now, to get full page height. There's probably a better way. */
}	
#sidebar .tall{
	min-height: 800px;
}
#sidebar li {

	list-style-type: none;
}
#sidebar li.widget {
	clear: both;
}
#sidebar h2.widgettitle {
   /* border-top: 1px solid #E2E2E2;*/
    color: #666;
    font-family: georgia;
    font-size: 1.35em;
    font-style: italic;
    letter-spacing: 0.09em;
	margin-top: 45px;
    padding-top: 8px;
	padding-bottom: 5px;
    text-align: left 
}	
.gradient-out {  /* div to feather out sidebar background color */
	background-image: url('images/SidebarGradientOut.png'); background-repeat: repeat-x;
	height: 120px; 	}	
	
#sidebar .communities-teaser h3, 
.column-one .communities-teaser h3, 
.column-three .communities-teaser h3  { 
	padding-bottom: 5px;
	font: 13px/15px Arial, Helvetica, sans-serif; }

.column-three .communities-teaser h3  a { 
	color: #2244AA; }

#sidebar  .communities-teaser p, 
.column-one .communities-teaser p ,
.column-three .communities-teaser p  { 
	margin: 0 0 5px 0;
	font: 11px/15px Arial, Helvetica, sans-serif; }

#sidebar .communities-teaser .date, 
.column-one .communities-teaser  .date,
.column-three .communities-teaser  .date  {
	border-top: 1px #e2e2e2 solid;
	padding-top: 11px;
/*	font: 10px/16px Arial, Helvetica, sans-serif; */ }
	
#sidebar .research-teaser h3 { 
	border-top: 1px #e2e2e2 solid;
	padding-top: 10px;
	margin-bottom: 5px;
	font: 13px/16px Arial, Helvetica, sans-serif; }

#sidebar .research-teaser p {
	margin: 0 0 5px 0;
	font: 12px/16px Arial, Helvetica, sans-serif; }

#sidebar .research-teaser .date {
	padding-bottom: 5px;
	font: 10px/16px Arial, Helvetica, sans-serif;  }
	
.sidebar-header {
    border-top: 1px solid #E2E2E2;
    color: #777777;
    font-family: georgia;
    font-size: 1.45em;
    font-style: italic;
    letter-spacing: 0.09em;
    padding-top: 13px;
	padding-bottom: 5px;
    text-align: left; }
	
#sidebar input#s { 
	width:160px; }	    /* let the searchbox fill its line */

.widget_tag_cloud h2 {  /* let the tagcloud appear to be an extended feature of the search box above*/
	display: none; }

div#sidebar li.widget_tag_cloud {
	margin-top: 45px;
	text-align: center;}

.tagcloud a, .wp-tag-cloud a {color: #8CA77E; }  /* go with a washed-out green, brighter hover  */
												    
.tagcloud a:hover, .wp-tag-cloud a:hover {color: #BED56D; }

ul.wp-tag-cloud {			/* applies when calling wp_tag_cloud directly (i.e. not in a widget) */ 
	margin: 45px 15px 0 15px;
	text-align: center;}

ul.wp-tag-cloud li{
	display: inline;}		


/*** new TABLE styles ***/

.history {
	width: 100%;
	border: none;
	color: #222;
	font: 1em/1.6em Arial, Helvetica, sans-serif; }

.history  tr {
	vertical-align: top;}
	
.history_date {
	padding:10px 10px;
	font-weight: bold;
	font-size: 1em;
	line-height: 1.6em;}

.history_text {
	padding:10px 10px;
	font-weight: normal;}
	
	
/* FOOTER Styles -- legacy from Sandbox, good for now... */

#footer {
	margin: 10px 0 50px 0;
}
#footer p {
	color: #555;
	font: 11px/14px Arial, Helvetica, sans-serif;
	float:left;
}
#searchForm , #searchform{
	float:right;
}


/*** for SmoothSlider in pages, so far just Model but maybe also News and Reflections later ***/

.smooth_slider a { 
	text-decoration: none;
	}

/*** for MetaSlider in posts, not yet for home page slider still using Slides.js ***/

.ghdc-flexslider {
    background: none repeat scroll 0 0 #fff;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    /* margin: 0 0 60px; */
    position: relative;
}

/*** SLIDES   for home page slider, using Slides.js ***/

#container {
	width:270px;
	height: 160px;
	margin:20px 0 15px 0;
	position:relative; }

#slides {
	position:relative; }

#slides .slidesContainer {
	overflow: hidden;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4); }

/*  SLIDES
	Next/prev buttons
*/

#slides a {
	color: #FFF;
	text-indent: -9999%; } /* for ie8 */
	
#slides .slidesNext,#slides .slidesPrevious {
	position:absolute;
	top:50px;
	width:24px;
	height:0;
	padding-top:32px;
	display:block;
	z-index:101;
	overflow:hidden; }
	
#slides .slidesNext a,#slides .slidesPrevious a{
		text-indent: -9999%; } /* for ie8 */

#slides .slidesPrevious {
	left:1px;
	background:url(images/navigation-previous.png) no-repeat 0 0; }

#slides .slidesPrevious:hover {
	left:1px;
	background:url(images/navigation-previous-hover.png) no-repeat 0 0; }

#slides .slidesNext {
	left:248px;
	background:url(images/navigation-next.png) no-repeat 0 0; }
	
#slides .slidesNext:hover {
	left:248px;
	background:url(images/navigation-next-hover.png) no-repeat 0 0; }

/*  SLIDES
	Pagination
*/

.slidesPagination {
	margin:  10px 10px 0 0;
	float:right; }

.slidesPagination li {
	float:left;
	margin:0 1px;
	list-style:none; }

.slidesPagination li a {
	display:block;
	width:14px;
	height:0;
	padding-top:14px;
	background-image:url(images/pagination.png);
	background-position:0 0;
	overflow:hidden; }

.slidesPagination li.slidesCurrent a {
	background-position:0 -14px; }

.current_slide {
	font:bold 10px/1.33 sans-serif;
	float:left;
	margin-top:12px; }

.controls {
	display:block;
	margin-top:12px;
	float:left;
	color:#333;
	font:bold 10px/1.33 sans-serif;
	margin-right:10px; }
	
/*** new  BLOG SINGLE PAGE styles -- work in progress ***/

div.post-wrap {
	max-width: 600px; 
	min-width: 320px;
	float: left;
	background: transparent;
	margin: 30px 0 0 35px;	
	}
div#search-result-wrap {
	margin: 0 0 0 35px;
	float: left;
	}
/*  shareaholic seems to need a follow-on div after .blog-single, 
	so I've wrapped them both together with .post-wrap... see Single.php  
	TODO: Maybe this is extraneous... */
	
div.blog-single {  
	width: 600px; 
	}
div.blog-single h2 {
    color: #866;
    font: 1.4em/1.5em Arial,Helvetica,sans-serif;
    letter-spacing: 0.1em;
	}
div.blog-single h3 {
    color: #866;
    font: 1.3em/1.5em Arial,Helvetica,sans-serif;
    letter-spacing: 0.1em;
    margin-top:15px;
	}	
div.blog-single p {
    color: #555;
    font-family: Georgia,palatino,serif;
    font-size: 1.2em;
    line-height: 1.5em;
	}
div.blog-single p.topic-line {
	font: bold 1.1em/1.8em  Arial, Helvetica, sans-serif;
	letter-spacing: .2em;
	margin-bottom: 10px;
	color: #999; 
	}	
div.blog-single p.tagline {
	font: italic 1.2em/1.6em  Georgia, "Times New Roman", serif;
	letter-spacing: .05em;
	text-align: center;
	margin: 0 15px 23px 0px;
	padding: 0 10%; 
	color: #707070; }
/*	border-left: 1px solid #DDDDDD;	*/
	
div.blog-single p.date {
	font: italic .95em/1em Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #555;
}
div.blog-single span.larger, div.blog-single  p.larger {
	font-size: 1.2em;
	line-height: 1.45em;
}	
div.blog-single p.nocomments {
	font-size: 12px;
	font-style: italic;
	line-height: 1.5em;
	color: #733; 
}	
div.blog-single ul {
    color: #555;
    font-family: Georgia,palatino,serif;
    font-size: 1.15em;
    line-height: 1.5em;
	list-style-type:disc;
    margin-left: 2em;
	margin-bottom: 1em;
	}
div.blog-single ol {
    color: #555;
    font-family: Georgia,palatino,serif;
    font-size: 1.2em;
    line-height: 1.5em;
	/*list-style-type:disc;*/
	margin: .5em 0 .9em 2em;
	}
span.su-dropcap-style-flat.e-cap  {
    background: none repeat scroll 0 0 #866;
    color: #fff;
}
/*** BASE COMMENT STYLING  adapted from
   http://css-tricks.com/snippets/wordpress/base-threaded-comments-styling/  
*/
div#respond h3{
	margin-top: 15px;
}
h3#comments  {
	font: normal 1.4em/1.4em Arial, Helvitica, sans-serif;
	color: #888;
	text-align: center;
	padding: 10px 35px;
	margin-bottom: 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	clear: both;
}
ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { border: dotted 1px #d0d0d0;}
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #ccc; padding:1em; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard { font:normal 15px Arial, Helvitica, sans-serif; }
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar { border:1px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta { font-size:10px; margin-bottom:12px;}
ol.commentlist li.comment div.comment-meta a { color:#aaa; font-style:italic;}
ol.commentlist li.comment p { font-size:1em; margin:0 0 1em; }
ol.commentlist li.comment ul { font-size:12px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li.comment div.reply { font:italic 14px/1.5em Arial, Helvetica, sans-serif; }
ol.commentlist li.comment div.reply a { }
ol.commentlist li.comment ul.children { list-style:none; margin:19px 0 0; text-indent:0; }
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 { border-left:5px solid #aaa; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-3 { border-left:5px solid #888; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-4 { border-left:5px solid #666; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-5 { border-left:5px solid #444; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even { background:#fafafa; }
ol.commentlist li.odd { background:#fff; }
ol.commentlist li.parent { border-left:5px solid #d1d1d1; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
	
/*** AUTHOR BOX styles ***/

div.wp-biographia-text h3 {
	font: bold 1.15em/1.5em Arial, Helvetica, sans-serif;
	color: #888; 
}
div#left-sidebar {
	float: left;
	width: 330px;
}
div#main-image {
	float: right;
	margin-bottom:10px;
	/*padding: 5px;	*/
	/*border: #ccc solid 1px;*/
}	
div#home-content-wrap h1.title {
	font-size: 22px;
	line-height: 1.3em;
	text-align: center;
	color: #866;
	font-family: Georgia, "Times New Roman", serif;
	padding: 10px 35px;
	margin-bottom: 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	clear: both;
}
h3.highlight-header {
	font-size: 15px;
	line-height: 20px;
	color: #888;
	font-family: Georgia, "Times New Roman", serif;
	padding: 10px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	clear: both;
	margin: 30px 30px 0 0;
	}
div#left-sidebar  p {
	font-size: 1.1em;
	line-height: 1.7em;
	margin-right: 30px;
	padding-top: 10px;
}
div#lipsum { 
	float: left;
	line-height: 1.7em;
}

/****** Overall design is still desktop-down and still has other legacy baggage, but getting better now (Dec 2013). The following are accomodations to smaller screens:
		first, tablet-range gets vertically fatter nav targets, then phone-range gets 100% wide menu which is collapsed if javascript is on, toggled by jQuery. 
		new_home.php and header.php each handle this separately for now. 
*/
/****** Media - At 980px left/right background is no longer visible so lose the top margin too */

@media only screen and (max-width: 980px){

#page-wrap {
	margin: 0; 
	}
}
/****** Media - TABLET range ********/

@media only screen and (max-width: 940px){
	
ul#menu-main-menu {
	width:100%; 
	}
ul#menu-main-menu li {
	padding: 8px 0; 
	}
ul#menu-main-menu li ul {
/* 	top:24px;   allow for thickened multi nav rows on smaller media */
	top:40px; 
	}
ul#menu-main-menu a {
    padding: 16px 12px 15px; 
	}
ul#menu-main-menu ul  li {
	padding: 0; 
	}
#banner {			
	height: 81px; 
	}	
#titleBlock img {    /* shrink together with #banner and reposition */
    height: 35px;
    width: 271px; 
	}
#titleBlock {
	margin-top: -55px; 
	}
.blog-single > #titleBlock {
	margin-top: -85px; 
	}	
	
div#search-result-wrap #searchForm , 
div#search-result-wrap#searchform{
	display: none;
	}
#home-content-wrap .column-two {
	clear: left;
	width: 80%;
	min-width: 475px;
	margin-top: 10px; 
	}	
#home-content-wrap .column-one,
#home-content-wrap .column-three {
	width: 80%;
	min-width: 268px;
	margin-top:25px;	
	}

#home-content-wrap .blog-single {
	width: 95%; 
	}
#home-col-left {
    width: 86%;
	max-width: 800px;
	}
.left-column, .right-column {
    max-width: 46%;
    min-width: 240px; 
	}
div.sidebar-wrap {
	float: left;
	width: 100%;	
	margin: 20px 0 0 0;	
	}
#sidebar .tall{
	min-height: 50px; 
	}
#sidebar li.widget #searchform {
	float: left; 
	}
#search-3 {	 /* sidebar search form for single-page posts -- redundant if at bottom of page */ 
	display: none; 
	}
#footer #searchform {
	padding: 5px 12px 12px 0;
	}
#footer p {
	padding-left: 10px; 
	}
}

/****** Media - TABLET range  756px ********/

@media only screen and (max-width: 756px){
#hero{
	min-height: 360px;
	}
#hero-text h2 {
	margin-top: 25px;
	}		
#hero-text{
	max-width: 480px;	
	}	
	
.h-box{
	max-width: 480px;
	width: 90%;
	margin-left: 5%;}

/****** Media - PHONE range ********/

@media only screen and (max-width: 640px){
#masthead {
	height: 64px;
	background-color: #fff; 
	}
#masthead h1 a {
	width: 75%;
	height: 55px;
	margin-left: 10px; 
	}
/*  Small-screen nav ---
	#navbutton (#navIcon + h2) shows up only on very small screens,
	where navigation should be hidden by jQuery. If jQuery is not 
	present	then it will be redundant and non-functional.
	#navIcon is a css border-trick to get a three-bar "icon":
	http://codepen.io/anon/full/Lxecv */

#navButton{
	display: block; 
	float: right;
	margin: 25px 30px 0 0;
	font-size: .8em;
	}
#navButton h2 {
	display: inline;
	font: normal 1.75em/1em Arial, Verdana, sans-serif;
	color: #7e2c18;
	padding: 18px 0 0 5px; 
	}
#navButton h2:hover {
	color: #c59E8A;
	}	
#navwrap {
	display: none;
	width: 100%;
	padding: 0;
	}
#navIcon {
	display: inline-block;
	width: 1.4em;
	height: .25em;
	line-height: 0;
	border-top: .75em double #7e2c18;
	border-bottom: .25em solid #7e2c18;
	}	
#navIcon:hover {
	border-top: .75em double #000;
	border-bottom: .25em solid #000;
	}
ul#menu-main-menu {
	text-align: left; }

ul#menu-main-menu li {
	display: block;
	padding: 0; 
    border-bottom: 1px solid #700000;
	border-top:  3px solid #8A030F;	
	}
ul#menu-main-menu a {
	display: block;
	width: 100%;
    padding: 17px 30px;
	margin-top: -3px;
	}
ul#menu-main-menu a:hover {
	border-top: none;
	}
ul#menu-main-menu li ul {
 	display: none;
	}  
#banner {
	background-position: center; 
	}	
#titleBlock {
	margin-left: 10px; 
	}
.blog-single > #titleBlock {
	margin-left: -10px;
	margin-top:	-75px;
	}	
/* Shift the social media buttons to the bottom of the page
   to make room in the header for a menu toggle button:  */
div#social-header{
	position: absolute;
	bottom: -71px;
	left: 15px;
	padding: 10px;
	} 
ul#menu-main-menu {
	width:100%; 
	}	
#hero #container {
	margin: 20px 0 0 25px;
	}
#hero-text{
	width: 90%;
	}	
#hero-text h2 {
	margin: 25px 0 10px 0;
	}		
#hero-text p {
/*	font: 1.2em/130% Georgia, "Times New Roman", Times, serif; */
	margin-top: 20px;
	color: #555;	
    font-size: 1.15em;
    line-height: 1.4em;
    margin-top: 20px;
	margin-bottom: 20px;	
	}
#home-content-wrap .column-one,
#home-content-wrap .column-two,
#home-content-wrap .column-three { 
	width: 90%;
	min-width: 268px;
	margin-left: 20px; 
	}
#home-content-wrap .column-two {
	margin-top: 20px; 
	}
#home-col-left, .wide-col-left {
	width: 94%;
    margin: 0 ; 
	}
.column-one #container {
    margin: 30px 0 15px 5px; 
	}
.left-column, .right-column {
	max-width: 100%;
	margin-right: 0; 
	}
.right-column {
	margin-top: 15px;
	}
#ts_tabmenu ul {
    padding: 0; 
	min-width: 415px;
	}
#ts_tabmenu ul li a {
    margin-left: -5px;
    padding: 0 0 0 7px;  
	}
#ts_tabmenu {
    font-size: 0.85em; 
	}
div.post-wrap {
    margin: 20px 0 0 20px;
	}
div.blog-single {  
	width: 90%
	min-width: 360px; 
	}

#searchForm , #searchform{
	padding: 6px; 
	}
div#search-result-wrap {
	margin: 0 0 0 5px;
	}
.locations-teaser  {
    margin-left: 10px; 
	}
.locations-teaser div.motopress-content-wrapper {
    margin-right: 15px; 
	}
.locations-teaser img {
    width: 100%;	
	height: auto; 
	}
p#collage img {  
	height: auto; 
	width: 100%
	}	
	
}/* END ***** Media - PHONE range ********/


/****** Media - PHONE range but getting crunched ********/
@media only screen and (max-width: 475px){

div.alignright {  /* stop trying to squeeze anything to the left of right-aligned elements */
	float: left;
	}
div.alignright+p {  /* stop trying to squeeze anything to the left of right-aligned elements */
	clear: both;
	}
	
	}	
/****** Media - PHONE range small portrait ********/
/*@media only screen and (max-width: 380px){  
 *
 * trip this at a wider screen now that logo is wider,
 * at 450px of logo plus menu element, by experiment 580px 
 * works on .dev site so go ahead and push these styles...
 */
@media only screen and (max-width: 580px){

#masthead {
	height: 100px;
	background-color: #fff; 
	}
#navButton {
	display: block; 
	float: right;
	margin:  4px 38% 0 0;
	font-size: .8em;
	}
}/* END ***** Media - PHONE range small portrait ********/