/*
Theme Name: Withey Price Landscape Design
Theme URI: http://witheyprice.com
Author: SpiderLily Web Design 
Author URI: http://spiderlilyweb.com
Description: Withey Price | Custom theme package
Version: 1.0
*/

/* fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700italic,400,700);

/* html5doctor.com Reset Stylesheet \\v1.6.1 \\ http://richclarkdesign.com \\ @rich_clark */
html, body, div, span, object, iframe,
h1, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display:block; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
#wpadminbar { position: fixed !important; } 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
a, a:active { color: #004B8D; text-decoration:none; }
a:hover { color: #949C50; }
a img { border:none; vertical-align:top; }
ol { list-style-type: decimal; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
::-moz-selection{ background:#7f8d41; color:#fff; text-shadow: none; }
::selection { background:#7f8d41; color:#fff; text-shadow: none; } 
/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #7f8d41; } 
/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {width: auto; overflow: visible;}
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img {-ms-interpolation-mode: bicubic;}

/*
 *
 * Nonsemantic Base Styles 
 *
 */
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* the main stuff */
html, body {height:100%; width:100%;} 

html {	
  	background-color:#C5F9D1;
	}
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
body {font-family: 'Open Sans', Helvetica, Verdana, sans-serif; font-weight:400; font-size:16px; line-height:1.4em; color:#151615;}
/*
 *
 * Structure
 *
 */
#wrapper {
	display: block;
	position:relative;
	max-width:1600px;
	margin: 0 auto;	
	}
#page {
	position:relative;
	float:left;
	width:100%;
}
#branding {
	float:left;
	width:100%;
	}
#site-title {
	float:left;
	max-width:480px;
	padding-top:5px;
	}		
.content {
	width:100%;
	float:left;
	padding-top:10px;
	clear:both;
	}
.full-width .content {
	width:99%;
	margin-left:1%;
	}
.full-width .content h2 {
	margin-bottom:0;
	}	
.content ul {padding-bottom:10px;}
.content li {margin:0 0 6px 20px;}
.content p {margin-bottom:8px;}

.centerblock {
	margin:0 auto 20px;
	max-width:520px;
}

.rightcol {
	float: right;
	width: 32%; 
	margin-top:10px;
	margin-right:2%;
	overflow: hidden;
	}
.twocol {
	float:left;
	width:60%;
	margin-left:1%;
}
.twocol .textwrap {
	margin:0 auto;
	max-width:660px;
}
#colophon {
	clear: both;
	display: block;
	width: 98%;
	padding-top:16px;
}
#site-generator {clear:both;}

/*
 *
 * Menu
 *
 */
#access {
	clear: both;
	position:relative;
	float: left;
	width: 100%;
	max-width: 1600px;  
	margin:0;
}
#access a {display:block;}
#access a, #access li {
	transition: all .4s ease-in-out;
	}
#access ul {
	padding: 0;
	text-align:center;
	width:100%;
	float:left;
}

#access ul li { /* base set-up for 7 menu items across */
	list-style: none;
 	display: inline-block;
	float:left;
	width:14.28%;
	padding:5px 0;
}

#access ul li a {
	color:white;
	text-align:center;
	font-size:16px;
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	color:#151615;
}
#access ul li:hover {background-color:#151615;}
#access ul li:hover a {color:white;}
#access ul li.current_page_item a {color: #0682d2;}
#access ul li.current_page_item ul li a {color: #507282;} /* dropdown items should not be current if parent is selected */
#access ul li.current_page_item ul li a:hover {color: #5B3B00;}
#access ul li.menu-item-has-children a:after {content:" \25BC";}
#access ul li.menu-item-has-children li a:after {content:"";}

/* what to hide at full width */

nav#access a#pull, a.top-button, .menu-mobile-container, .mobile-contact-block, #toggle {display:none;}

/* HEADERS ----------------------------------------*/

h1,h2,h3,h4,h5,h6 {font-weight:700;}
h1 {
	font-size:36px;	
	padding-bottom:12px;
	line-height:1.4em;
	}

h2 {
	font-size:26px;
	clear:both;
	margin-bottom:16px;
	line-height:1.3em;
	}	
.grid h2 {text-align:center; margin:5px 0; font-weight:400; font-size:21px;}	
.side-menu h2 {
	text-transform:uppercase;	
	margin-bottom:10px;
	}
h3 {
	font-size:20px;
	clear:both;
	margin:5px 0;
	font-weight:bold;
	}
h4 {
	font-size:16px; 
	font-weight:bold;
	margin-bottom:0.5em;
	}	
#secondary h1, h4.widget-title {
	font-size:24px;
	line-height:28px;
	padding:0 0 10px;
	border-bottom:1px #726658 solid; 
	font-weight:normal;
	}
/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Images
 */
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/

.wp-caption { max-width: 100%; }

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
img.aligncenter,
img.attachment-thumbnail,
.wp-caption img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

img.alignleft {
	margin-right: 0.7em;
	margin-bottom:0.7em;
}
img.alignright {
	margin-left: 1em;	
	margin-bottom:0.7em;
}
img.aligncenter {margin-bottom:1em;}

.wp-caption {
	padding: 0;
	text-align: center;
}
.wp-caption .wp-caption-text {
	font-size:13px;
	font-style:italic;
}
.widget_sp_image-description p {text-align:center;} /* center caption for image widget */
.widget-area img {margin-bottom:0;}

/* gallery overrides with responsive lightbox */

dd.gallery-caption, .ppt {display:none !important;}  /* hide caption on gallery page */
dl.gallery-item {
	width:12% !important; 
	text-align:center; 
	float:left; 
	display: inline-block;
	margin:5px 0.5% 10px 0;
	}
#primary .gallery img {
	float:left;
	border: none !important;
	}	
#primary .gallery img:hover {
	opacity:0.9;
	}
/* block quote */

blockquote {
  background: rgba(255,255,255,0.6);
  border-left: 10px solid #92bad4;
  margin: 1.5em 0;
  padding: 1.5em 18px;
}

blockquote p {
  display: inline;
  font-style:italic;
  font-weight:400;
  font-size:21px;
  line-height:1.5em;
}


/* grids */
.grid {
	float:left; 
	width:100%;
	margin-bottom:20px;
}
.grid6, .grid3 {
	float:left;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,0.3);
}
.grid6 {width:16.11%;}
.grid3 {width:32.887%;}

html.ie8 .grid6 {width:16%;} /* keep everything on one line for IE8 */
.grid div {margin:0 0.669% 0 0;}
.grid div:last-child {margin:0 0 0 0;}
h2 a {color:#151615;}
.grid6 a img:hover, .grid3 a img:hover {opacity:0.8;}
.grid6 a:hover, .grid3 a:hover {color:#0682d2;}

/*
 *
 * Responsive Video
 */
 
.video-block { 
	display:inline-block;
	width:250px;
	height:160px;
	background-repeat: no-repeat;
	background-position: center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	 -o-background-size: cover;
  	background-size: cover;
	border:3px #726658 solid;
	float:left;
	margin:0 10px 10px 0;
} 
.video-block p {
	text-align:center;
	display:block;
	background:rgba(0,0,0,.8);
	color:white;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
.video-block:hover {opacity:0.85;}
.video { /* for individual video display */
	position: relative;
	width:98%;
	float:left;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom:20px;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*! http://responsiveslides.com v1.54 by @viljamis */


.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.rslides_container {
  margin-bottom: 20px;
  position: relative;
  float: left;
  width: 100%;
  }

/*
 *
 * Footer
 *
 */
#colophon {
	width:100%;
	float:left;
	padding-bottom:8px;
	}
#colophon p, #colophon ul {
	font-size:13px;
	line-height:1.4em;
	margin-bottom:0;
	}
#colophon li:after {content:" | ";}
#colophon li:last-child:after {content: "";}
#colophon a {color:#000;}
#colophon a:hover {color:#456B8C;}	 
.site-info {
	clear:both;
	text-align:center;
	width:100%;
	}	
.site-info ul li {
	display:inline;
	}	
#colophon span {white-space:nowrap;}

/*
 *
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 *
 */
@media screen and (max-width: 1100px) { 
	.grid6 {width:32.887%;}
	.grid div:nth-child(3) {margin:0 0 20px 0;}
} 
 
@media screen and (max-width: 970px) { 
	#access ul li a{font-size:15px;}
}
@media screen and (max-width: 900px) { 
	#access ul ul li {padding:0;}
	#access ul li a {color:white; padding:5px 0 5px 10px; font-size:16px; letter-spacing:0;}
	#access ul li a:hover {background:#0682d2; color:white;}
	#access ul {
		display: none;
		height: auto;
		width:100%;
		margin:0; padding:0;
		text-align:left;
		}
	#access ul li a {text-align:left;}	
	nav#access ul ul, nav#access ul ul:hover {padding:0; top:0;}
  	nav#access li {
  		width:100%;
		margin:0; padding:0;
		line-height:1.8em;
		text-align:left;
		background:rgba(21,22,21,0.8);
  		}	
	nav#access ul li ul {
		position:relative;
		float:left;
		}		
	nav#access a {padding:.3em 0;}	
	#access ul li ul li {width:100%;}
	#access ul li.menu-item-has-children a:after {content:"";}
  	nav#access a#pull {
		display: block;
		background: rgba(21,22,21,0.8);
		width: 100%;
		height:40px;
		position: relative;
		float:left;
		padding:0.4em 0;
		font-weight:bold;
		}
	a#pull img {float:left;}	
	span.pull-menu {
		color:#fff;
		padding:.5em 0 0 0.9em;
		float:left;
		font-size:16px;
		}
	span.pull-menu:after {content:" \25BC";}	
	span.pull-menu.clicked {color:#0682d2;}	
	span.pull-menu.clicked:after {content:" \25B2";}	
  	nav#access a#pull:hover {
	 	opacity:0.6;
	 	}
	#access ul ul li.hide {display:none;}
	#colophon .grid3 {display:none;}
	#colophon {	padding: .3em 0 1em 0;}
	#colophon a.top-button {
		display:block;
		font-weight:bold;
		text-align:center;
		background:#0682d2;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		font-size:16px;
		padding:3px 8px;
		margin:5px auto;
		max-width:110px;
		color:white;
	}
	#colophon a.top-button:hover {
		background-color:#726658;
		color:white;
	}
	#colophon p {margin:0 auto; text-align:center;}
	#colophon span {white-space:nowrap;}
	
	.twocol, .rightcol {
		float:left; 
		width:100%;
		margin-left:0;
	}
	.rightcol-text {
		text-align:center;
	}
	dl.gallery-item {
		width:23.5% !important; 
		margin:5px 1% 0 0;
	}
	.rslides_container {
		margin-bottom:0;
	}	
	h1 {padding-bottom:0; line-height:1.3;}	
	h2 {margin:6px 0;}

}
/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) */
@media screen and (max-width: 780px) {  
  /* don't let iOS and WinMobile mobile-optimize the text for you j.mp/textsizeadjust */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
  #site-title img {max-width:90%;}
  #searchform {margin-top:20px;}
  #main .widget-area, .content {
  	clear:left;
	float: left;
	overflow: hidden;
	width: 96%; 
	margin-left:2%;
	}
  }
@media screen and (max-width: 720px) {  
	#site-title {width:100%; max-width:100%; display:block;}
	#site-title img {float:none; margin:0 auto;}
	.header-content {clear:both; float:none; width:100%; margin:0 auto;}

}

@media screen and (max-width: 700px) { 
	.excerpt {clear:both; float:left; width:100%;}
	.wp-caption.alignright, .wp-caption.alignleft {
		float:none; 
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.links img, #site-title img.alignleft, img.alignright {
		max-width:100%; 
		height:auto; 
		float:none; 
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:10px;
	}
	.links .content p {margin-bottom:3px;}
	.menu-footer-container {display:none;}
	.header-content {margin:0 auto; text-align:center;}
	#site-title {width:100%;}
	.utility {font-size:16px; margin:0 auto; float:none; letter-spacing:-0.5px;}
	#searchform {float:none; clear:both; text-align:center;}
	.phone {float:none; margin:5px auto;}
}

@media screen and (max-width: 540px) { 
	/* Align all photos to center */
	img.alignleft, img.alignright {
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:0.5em;
		float:none;
	}
	.content, #main .widget-area {width:94%; margin:0 0 0 3%;}
}
/*
 *
 * Base Print Styles, inline to save the HTTP request
 *
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  body {font-family:"Times New Roman", Times, serif; font-size:12px; line-height:1.3em; color:black;}
  p, h2, h3 { orphans: 3; widows: 3; }
  h1, h2, h3{ page-break-after: avoid; font-size:16px;}
  .widget-area h2 {font-size:16px;}
  header, .logos, .top-button, .menu-footer-container, .breadcrumbs, .synved-social-container {display:none;}
  #page {border:none;}
}
