/*   
Theme Name: HTML5 Reset Child Theme
Template: HTML5-Reset-WP-Theme
Author: Strategy 7
Version: 0.0.1
*/

#page-wrap {max-width: 960px; margin: 0px auto;}

/*************** GLOBAL STYLES START HERE *******************/

/*zero out margin and padding*/
* {							
	margin: 0;
	padding:0;
}

/*general html styles*/
html, body {
	height: 100%;
	background-color: #f8f5e2;
	font-family: Helvetica, Arial, sans-serif;
	color: #471b0e;
}

img {
	border: none;
}

/* Hx heading styles*/
h1 {
	font-size:2.5em;
	color: #471b0e;
	font-family: 'Merriweather', serif;
	padding-left:50px;
}

h2 {
	font:2em 'Merriweather', serif;
	color:#801c28;
	font-weight:bold;
	padding:20px 0px 20px 50px;
	clear:both;
}

h3 {
	font:1.5em 'Merriweather', serif;
	color:#801c28;
	font-weight:bold;
	padding:20px 20px 10px 50px;
	clear:both;
}

h4 {
	font:1.2em 'Merriweather', serif;
	color:#471b0e;
	font-weight:bold;
	padding:10px 20px 10px 50px;
	clear:both;
}

h5 {
	font:1.5em 'Merriweather', serif;
	color:#801c28;
	font-weight:bold;
	padding:20px 20px 10px 50px;
	clear:left;
}

/* offset blockquote from main margins of the page*/
blockquote {
	margin: 0px 50px 30px 50px;
}

/*styles for figures*/
figure {
	float: left;
	display: table;
	width: 300px;
	margin: 15px 50px 20px 100px;
}

/*styles for figure captions*/
figcaption {
	line-height:15px;
	color:#801c28;
}

form {
	padding-left:15px;
	padding-right:5px;
}

/* links */
a:link {
	color:#801c28;
	font-family: Helvetica,"Trebuchet MS", sans-serif;
	font-weight: bold;
}   
   
a:visited {
	color:#801c28;
	font-family: Helvetica,"Trebuchet MS", sans-serif;
	font-weight: bold;
}  

a:hover {
	color:#b2a382;
	font-family: Helvetica,"Trebuchet MS", sans-serif;
	font-weight: bold;
}  

/*pushes header images up to top of the page*/
#header-banner {
	margin-top: 0px; 
}

/* Main container styles */

#container {
	margin: 0 auto -45px; /* the bottom margin is the negative value of the footer's height for sticky footer */
	min-height: 100%;
	max-width: 960px; /*allows for site to be centered in browser*/
	background-color: #fff;
	height: auto !important; /*helps sticky footer stay at the bottom*/
	padding-top:75px;
}

#container ul {
	list-style-type:circle;
	margin:0px 0px 0px 100px; 
}

#container li {
	padding-left:0px;
	padding-bottom:0px;
}

/* page wrap for index page*/
#inner-container {
	background:#ffffff;
	padding-top:5px; /* offset slideshow from nav with darker bg color */
	padding-bottom:50px;
}

/* wrapper for content for each page */
#content {							
	background-color: #ffffff;
	margin:-21px 20px 20px 20px;	
	padding-bottom:30px; /* create space between content and footer */
}

#content p, li {
	clear:right;	
	padding: 10px 50px;
	text-align: left;
	font-size: .8em;	/* added to shrink from original */
	line-height: 1.7em;	/* to control spacing */
}

#wisp-graphic {
	float:right;
	margin-top:-5px;
	margin-right:60px;
}

/* footer styles */
#footer {						
	background: url(http://www.sonomagardenpark.com/wp-content/uploads/2013/06/bg-footer1.png);
	font: .8em Helvetica,"Trebuchet MS", sans-serif;
	font-weight:bold;
	color: #471b0e;
	height: 45px;
	margin-top:-45px; /* styles for sticky footer*/
	clear:both;
	padding:20px 0px 10px 0px;
}

/* pushes footer to the bottom of page */
.push {						
	height: 45px;	/* .push must be the same height as .footer */
}


/************* NAVIGATION STYLES START HERE ****************/	
/* top navigation menu starts here */
/*general top-nav styles*/
#top-nav {					
	font-family: 'Merriweather', serif;
}

#header #top-nav .float-right {
	padding-top:20px;
}

#top-nav li {				
	float:left;
	position:relative;
	top:50px;
	left: 635px;
	list-style-type:none;
	font: 1.2em 'Merriweather', serif;
	padding:2px;
}

#top-nav a {				
	text-decoration:underline;	
	font: 1.4em 'Merriweather', serif;
	font-weight:bold;
	color:#801c28;
}

#top-nav a:hover {
	color:#b2a382; 
}

#top-nav .no-hover {
	color:#801c28;
}
	
/* the horizontal main-menu starts here */
/*styles for main-nav*/
div#main-nav {				
	margin-top: -3px;
	width:100%;
	float:left;
	font-size: 1.6em;
	background:url(http://ec2-54-245-50-239.us-west-2.compute.amazonaws.com/wp-content/uploads/2013/04/nav-gradient2.png);
	background-color:#801c28; 
	text-align:center;
}
	
div#main-nav ul {
	margin:0 0 0 20px;
}
	
div#main-nav li {
	float:left;
	position:relative;
	list-style-type:none;
	background:url(http://ec2-54-245-50-239.us-west-2.compute.amazonaws.com/wp-content/uploads/2013/04/nav-gradient2.png);
	background-color:#801c28; 
	padding: 8px 10px 8px 20px;
}

div#main-nav a {
	text-decoration:none;
	font: .8em 'Merriweather', serif;
	color:#ede5c1;	
	font-weight:normal;
}
	
div#main-nav a:hover {
	color:#b2a382;
}

/*drop down menu starts here*/
div#main-nav ul li ul {
	margin:0; 
	width:8em;		/*sets width of drop down menus*/
	position:absolute;	/*list will line up under outer list element*/
	left:0px;
	top:39px;
	z-index:1000;
}

div#main-nav ul li ul li {	
	width:100%;
	font:.9em 'Merriweather', serif;
	border-left:1px solid #b2a382;
	border-bottom:1px solid #b2a382;
	border-right:1px solid #b2a382;
} 

/* add border on first drop down link */
div#main-nav ul li ul li:first-child {	
	border-top:1px solid #b2a382;
}

/* hides drop down */
div#main-nav ul li ul {		
	display:none; 
} 

/* display drop down menu on hover */ 
div#main-nav ul li:hover ul {
	display:block;
}		

/* pop out menu begins here */
body div#main-nav ul li ul li ul {
	visibility:hidden; 
	left:192px;
	top:-1px;
	font:1em 'Merriweather', serif;
	color:#727273;
	z-index: 999 !important; /* force pop-out to display above floated elements */
}

/* style pop out to be same width as drop down */
body div#main-nav ul li ul li ul li { 	
	padding:9.5px;
}

div#main-nav ul li ul li:hover ul {
	visibility:visible;				
}							

/****** GRADIENT STYLES FOR MAIN-NAV BG COLOR ********/
.nav-gradient {
  /* fallback */
  background-color: #801c28;
  background: url(http://ec2-54-245-50-239.us-west-2.compute.amazonaws.com/wp-content/uploads/2013/04/nav-gradient2.png);
  background-repeat: repeat-x;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#471b0e), to(#801c28));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #471b0e, #801c28);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #471b0e, #801c28);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #471b0e, #801c28);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #471b0e, #801c28);
}

/*************** END OF NAVIGATION STYLES *******************/


/************* SPECIAL STYLES START HERE *****************/

#gallery{
	padding: 0px 0px 0px 0px;
	clear:both;
}

/* style for left tab graphic on index */
#tab-left {					
	display:inline;			/*displays tabs in a line*/
	position:relative;		/*tab displays relative to div*/
	float:left;	
	margin-left:20px;
	width: 300px;
}

#tab-left p {
	position: absolute;
	left: 25px;
	top: 75px;
	width: 250px;
	font: 1em Helvetica,"Trebuchet MS", sans-serif;
	text-align:left;
	color: #471b0e;
}

/* style for middle tab graphic on index */
#tab-middle {
	display:inline;	
	position: relative;
	width:300px;
	margin: 0px 11px 0px 11px;
}

#tab-middle p {	
	position: absolute;
	left: 25px;
	top: -210px;
	width: 250px;
	font: 1em Helvetica,"Trebuchet MS", sans-serif;
	text-align:left;
	color: #471b0e;
}

/* style for right tab graphic on index */
#tab-right {
	display:inline;	
	position: relative;
	width:300px;
}

#tab-right p {
	position: absolute;
	left: 25px;
	top: -210px;
	width: 250px;
	font: 1em Helvetica,"Trebuchet MS", sans-serif;
	text-align:left;
	color: #471b0e;
}

/* style for two column list; left-side */
#left-list {
	float:left;
	width:50%;
	margin:15px 0px 30px 0px;
	line-height:5px;
}

#left-list li {
	list-style-type:none;
	margin:0px 0px 0px -20px;
}

/* two column list; right side */
#right-list {				
	float:right;
	width:50%;
	margin:15px 0px 30px 0px;
	line-height:5px;
}

#right-list li {
	list-style-type:none;
	margin:0px 0px 0px -100px;
}

/* style contact list; two columns */
#contact-left {	float:left; width:40%; padding-bottom:50px; }
#contact-right { float:right; width:60%; }

/* style donate list; two columns */
.donate { width:100%; clear:both; margin-left:0%; padding-bottom: 0px; }
.donate-right {	float:right; width:50%; }
.donate-left { float:left; width:50%; }

/* create invisible period to push content div down to footer */
.hidden {
	display:none;
}

/* format the title for second level pages */
.page-title {				
	float:right;
	margin: 0px 70px 0px 0px;
	padding-top:30px;
}

.float-right { float:right; margin: 0px 5px 5px 30px; }	/* changed from 0px 0px 30px 30px */
.float-left { float:left; margin: 0px 30px 10px 0px; }
.center { text-align:center; }
.clear-floats { clear:both; }
.top-padding { padding-top:30px; }

/* clear floats for content div to be pushed against top of header */
.clearfix:after {			
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
} 

.copyright {
	font-weight:normal;
	color: #801c28;
}


/********* MOBILE DEVICE SPECIFIC STYLES ***********/

/* iPad drop down layouts */
@media only screen and (max-width: 768px) {  

 div#main-nav ul li ul {
	margin:0; 
	width:7em;	
	position:absolute;
	left:0px;
	top:40px;   
}

/* These 3 scale the slideshow */
#slideshow-wrapper {
    position: relative;
    max-width: 600px;
    height: 220px;
}

#slideshow-wrapper #fullsize {
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 600px;
    height: 220px;
    border: medium none;
}

#slideshow-wrapper #information {
    visibility: hidden;
}

#slideshow-wrapper #imgprev {
    visibility: hidden;
}

#slideshow-wrapper #imgnext {
    visibility: hidden;
}

/* Make all images responsive */
img {
	max-width: 100%;
	height: auto;
}

/* style for left tab graphic on index */
#tab-left {					
	width: 240px;
}

#tab-left img {
	width:  239px;
	height: auto;
}

/* style for middle tab graphic on index */
#tab-middle {
	width: 240px;
}

#tab-middle img {
	width: 239px;
	height: auto;
}

/* style for right tab graphic on index */
#tab-right {
	width:240px;
}

#tab-right img {
	width:  239px;
	height: auto;
}

#footer {
	background: #999966;
	height: 65px;
	padding:10px 0px 5px 0px;
}

/* pushes footer to the bottom of page */
.push {						
	height: 65px;	/* .push must be the same height as .footer */
}

#wisp-graphic img {
	width: 75%;
	margin-left: 10%;
}    

.page-title {
	font: bold 1.5em 'Merriweather', serif; 
	margin: 0px 10% 0px 0px;
	padding-top: 10px;
}

h3 {
    font: bold 1em 'Merriweather',serif;
    padding: 5px 10px 5px 10px;
}

h5 {
    font: bold 1em 'Merriweather',serif;
    padding: 5px 10px 5px 10px;
}

#container ul {
    margin: 0px 0px 0px 25px;
}

#content p, li {
    clear: right;
    padding: 5px 10px;
    text-align: left;
}

#top-nav {
	display:none;
}
}

/* PORTRAIT iPad drop down layouts */
@media only screen and (min-width: 481px) 
	and (max-width: 1024px) { 
 div#main-nav ul li ul {	
	margin:0; 
	width:7em;		
	position:absolute;	
	left:0px;
	top:40px;   
}
}

/* LANDSCAPE iPad drop down layouts */
@media only screen 
	and (min-width: 481px) 
	and (max-width: 1024px) 
	and (orientation:landscape) {		
 div#main-nav ul li ul {
	margin:0; 
	width:7em;
	position:absolute;
	left:0px;
	top:40px;   
}
}

/* iPhone and Android drop-down styles */ 
@media only screen 
	and (max-width: 480px) {  
 div#main-nav ul li ul {
	margin:0; 
	width:7em;
	position:absolute;
	left:0px;
	top:41px;   
}

/* These 2 scale the slideshow */
#slideshow-wrapper {
    max-width: 320px;
    height: 120px;
}

#slideshow-wrapper #fullsize {
    position: relative;
    max-width: 320px;
    height: 120px;
}



/* style for left tab graphic on index */
#tab-left {					
	display:block;			/*displays tabs in a stack*/
	position:relative;		/*tab displays relative to div*/
	float:none;	
	margin:0px auto;
	width: 300px;
}

/* style for middle tab graphic on index */
#tab-middle {
	display:block;			/*displays tabs in a stack*/
	position: relative;
	margin:0px auto;
	width: 300px;
}

/* style for right tab graphic on index */
#tab-right {
	display:block;			/*displays tabs in a stack*/
	position: relative;
	margin:0px auto;
	width:300px;
}

#footer {
	background: #999966;
	height: 75px;
	padding:10px 0px 5px 0px;
}

/* pushes footer to the bottom of page */
.push {						
	height: 75px;	/* .push must be the same height as .footer */
}
}

/********** BROWSER SPECIFIC STYLES *************/

/* drop down styles for FIREFOX only */
@-moz-document url-prefix() {
 div#main-nav ul li ul {
	margin:0; 
	width:7em;
	position:absolute;
	left:0px;
	top:37px;
}
} 

/* drop down styles for OPERA only */
@media all 
	and (-webkit-min-device-pixel-ratio:10000), not all 
	and (-webkit-min-device-pixel-ratio:0) {
 head~body div#main-nav ul li ul {
	margin:0; 
	width:7em;
	position:absolute;
	left:0px;
	top:37px;
}
}