/* 
Theme Name: Foundation, for WordPress Child Theme
Theme URI: http://www.drewsymo.com
Description: A Responsive Starter Theme
Author: @FoundationZURB, @drewsymo
Author URI: 
Version: 3.0
Template: foundation
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
*/

/* IMPORTANT! Must import stylesheet from core theme */
/* Note that stylesheet from core theme imports external stylesheets, and IE limits nested imports to 3 levels */
@import url("../foundation/style.css");


/* Then, anything specified below will override stylesheet from core theme */

body { 
	background: #fff; 
	font-family: "museo-sans", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-size: 13px; 
	font-size: 1.3rem;
	line-height: 18px; 
	color: #888888; 
	position: relative; 
	-webkit-font-smoothing: antialiased; 
}

#header { display: none; }		/* hide default WordPress site title */
.subheader { display: none; }	/* hide default WordPress site subtitle */

/* container for search in main nav */
.navsearch { 
	background: #FFFFFF; /* make white (not visible) when viewing on larger screens */
	width: 100%;
	height: 30px; /* match main nav height */
	position: relative; /* set to relative so it falls below main nav on smaller screens */
	top: -17px; /* position below main nav, compensates for being 18px too low (maybe caused by "position: relative" instead of absolute, leave 1px gap */
	margin-bottom: 0px;
}

/* adjust position of main content between header and footer */
/* compensates for being displaced to a lower position by the .navsearch div */
.row.searchadjust { 
	position: relative;
	top: -30px;
}

#searchform .screen-reader-text { display: none; } /* hide default WordPress Search intro text */
#searchform div { 
	margin: 0px 10px 0px 20px;
	float: right; /* align right */
	position: relative;
	top: -26px;
}

/* search form input field */
#s {  
	width: 130px;
	height: 14px;
	border: none;
	padding: 3px 3px 3px 3px;
	outline: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	font-family: "museo-sans",sans-serif;
	font-size: 12px;
	font-weight: 300;
	color: #888888;
	margin: 0;
	background: #FFFFFF;
}





/* .nav-bar is applied to ul, so it affected by the ul settings in the Foundation theme, including margin-bottom */
.nav-bar { height: 30px; background: #888888; margin-top: 0px; margin-bottom: 0px; border: none; }
.nav-bar>li { padding: 0; margin: 0; border-right: 1px solid #FFFFFF; line-height: 30px; }
.nav-bar>li:hover { background: #0099CC; color: #FFFFFF; }
.nav-bar>li#menusearch:hover { background: #FF0000; } /* prevent hover state on search field in main nav */
.nav-bar>li>a { color: #FFFFFF; padding: 0 20px; font-size: 12px; font-size: 1.2rem; }
.nav-bar>li>a:hover { color: #FFFFFF; }
.nav-bar>li:hover>a { color: #FFFFFF; z-index: 2; }

#logobar {
	background-color: #0099CC;
	margin-bottom: 1px;
	line-height: 41px;
}

#logobox { 
	float: left; 
	display: block;
	position: absolute; 
	padding: 10px; 
	margin: 0;  
	line-height: 41px;
	background-color: #0099CC;
	height: 21px;
}

/* display as block to remove gap that appears below images as a result of being an inline element (like text with descenders) */
#logobox img { display: block; height: 100%; } 

#globalnav {
	display: block;
	background-color: #0099CC;
	text-align: right;
	padding-right: 10px;
	color: #FFFFFF;
	font-size: 11px; 
	font-size: 1.1rem;
}

#globalnav a {
	color: #FFFFFF;
	font-size: 11px; 
	font-size: 1.1rem;
	padding: 5px;
}

#globalnav a:hover {
	background-color: #FFFFFF;
	color: #0099CC;
	font-size: 11px; 
	font-size: 1.1rem;
}

.testme { background: #F00;} /* FOR TESTING */

a { color: #0099CC; }
a:hover { color: #FFFFFF; background-color: #0099CC; }
a:focus { color: #FFFFFF; background-color: #0099CC; outline: none; }

.supertagline, .supertagline a {
	/* clear: both; */
	margin: 0px 0px 30px 0px; 
	font-size: 70px;
	font-size: 7rem;
	font-weight: 100;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 80px; 
	color: #888888;
	letter-spacing: -0.05em;
	text-align: left;
}

.supertagline a:hover { color: #FFFFFF; background-color: #0099CC; }

.pressquote {
	/* clear: both; */
	margin: 0px 0px 20px 0px; 
	font-size: 30px;
	font-size: 3rem;
	font-weight: 300;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 36px; 
	color: #888888;
	letter-spacing: -0.05em;
	text-align: left;
}

.pressquote a { color: #0099CC; }
.pressquote a:hover { color: #FFFFFF; background-color: #0099CC; }

.posttitle {
	/* clear: both; */
	margin: 0px 0px 20px 0px; 
	font-size: 40px;
	font-size: 4rem;
	font-weight: 300;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 45px; 
	color: #888888;
	letter-spacing: -0.03em;
	text-align: left;
}

.posttitle a { color: #0099CC; }
.posttitle a:hover { color: #FFFFFF; background-color: #0099CC; }

.presstitle, .presstitle a {
	/* clear: both; */
	margin: 0px 0px 10px 0px; 
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: 500;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 18px; 
	color: #888888;
	letter-spacing: 0em;
	text-align: left;
} 

.presstitle a:hover { background: #FFFFFF; }

.bigbodycopy, .bigbodycopy a { 
	margin-bottom: 10px;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: 300;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 32px; 
	color: #888888;
	letter-spacing: -0.02em;
	text-align: left;
}

.bigbodycopy a { color: #0099CC; }
.bigbodycopy a:hover { color: #FFFFFF; background-color: #0099CC; }

.bigbodycopy.centered { 
	margin-bottom: 10px; /* repeated this in .centered since it would go away */
	text-align: center; 
}

.centered { text-align: center; }

.sidebar, .sidebar a { 
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 300;
	font-style: normal; 
	font-family: "museo-sans",sans-serif; 
	line-height: 20px; 
	color: #888888;
	/* letter-spacing: -0.05em; */
	text-align: left;
}

.sidebar a:hover { color: #FFFFFF; background-color: #0099CC; }

.colorlight { color: #0099CC; }

.bottomrule {
	border-bottom: 1px dotted #888888;
	margin-bottom: 10px;
	padding-bottom: 10px;
}



/* margin-bottom and padding-bottom in .bottomrule are usually 10px */
/* make sure there is no space between the two classes! This conforms to class="row bottomrule" */
.row.bottomrule {
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.row.bottomrule.searchresults {
	margin-bottom: 20px;
	padding-bottom: 0px;
}

footer div.columns { 
	border-top: 1px dotted #888888;
	margin-top: 20px;
	padding-top: 10px;
	margin-bottom: 30px;
	position: relative;
	top: -30px;
}


h1, h2, h3, h4, h5, h6 { 
	color: #888888; 
	margin-bottom: 5px;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { background-color: #0099CC; color: #FFFFFF; }


.photocredit {
	width: 100%;
	float: right;
	font-size: 10px;
	font-size: 1.0rem;
	font-weight: 300;
	font-style: italic; 
	font-family: "museo-sans",sans-serif; 
	line-height: 12px; 
	color: #AAAAAA;
	/* letter-spacing: -0.05em; */
	text-align: right;
	white-space: nowrap;
	margin-bottom: 10px;
}

.photocredit a { color: #AAAAAA; }
.photocredit a:hover, .photocredit a:focus { background: #FFFFFF; color: #AAAAAA; }

.photocredit.smallphoto { 
	float: left; 
	text-align: left; 
	margin-bottom: 5px;
} 

/* right nav */

.rightnavheader {
	border-top: 1px dotted #888888;
	border-bottom: 1px dotted #888888;
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 6px 0px;
}

.bodyheader {
	border-top: 1px dotted #888888;
	border-bottom: 1px dotted #888888;
	margin: 0px 0px 20px 0px;
	padding: 10px 0px 6px 0px;
}

/* keep the title on loop-index.php gray and hide hover state */
.bodyheader h5 a { color: #888888 }
.bodyheader h5 a:hover { color: #888888; background: #FFFFFF; }
.bodyheader h5 a:focus { color: #888888; background: #FFFFFF; }

ul.rightnavmenu { margin-bottom: 30px; }
ul.rightnavmenu>li { margin-bottom: 0px; }

/* adds space between items in right nav menu */
/* activated via add_subnav function in functions.php */
ul.rightnavmenuspaced { margin-bottom: 30px; }
ul.rightnavmenuspaced>li { margin-bottom: 10px; }

/* lists that look like lists for body content */
ul.contentlist {  list-style: circle outside; }
ul.contentlist li { margin-bottom: 0px; padding-bottom: 0px; }
ul.contentlisthigher {  list-style: circle outside; margin-top: -18px; } /* brings bullet lists in resume closer to content above */
ul.contentlisthigher li { margin-bottom: 0px; padding-bottom: 0px; }

.deemphasize { color: #CCCCCC; font-style: italic; }
.deemphasize a { color: #CCCCCC; }
.deemphasize a:hover { color: #FFFFFF; background-color: #0099CC; }
.deemphasize a:focus { color: #FFFFFF; background-color: #0099CC; outline: none; }

/* tighter gutters for things like Halloween costume posts with vertical photos */
.column.tight, .columns.tight { margin-left: 1%; float: left; min-height: 1px; position: relative; }
.column.tight:first-child, .columns.tight:first-child { margin-left: 0; }

.row.tight .one.columns.tight 		{ width: 7.4%; }
.row.tight .two.columns.tight 		{ width: 15.8%; }
.row.tight .three.columns.tight 	{ width: 24.25%; }
.row.tight .four.columns.tight 		{ width: 32.3%; }
.row.tight .six.columns.tight 		{ width: 49.5%; }


/* make the block grid tighter and more even */
/* note: mobile version included below */
.block-grid.five-up { margin-left: -.5% }
.block-grid.five-up>li { margin-left: 2px; margin-bottom: -3px; width: 19.5%; }
.block-grid.five-up>li>a:hover { background-color: #FFFFFF; color: #0099CC; } /*  fix bug with hover state */

/* orbit */

div.slider-nav span.right {
    background: url(images/orbit/right-arrow-smaller.png); /* look in child theme for modified arrow image */
    right: 0; }

div.slider-nav span.left {
    background: url(images/orbit/left-arrow-smaller.png); /* look in child theme for modified arrow image */
    left: 0; }

div.orbit.with-bullets {
    margin-bottom: 0px;
}

div.timer {
	visibility: hidden; /* don't use display:none - it will break the timer */
}

.orbit-bullets li {
    background: url(images/orbit/bullets-lighter.jpg) no-repeat 4px 0; /* look in child theme for modified bullets image */
}


/* tables */
/* note that there are @media table attributes as well */

/* this overrides CSS from Foundation stylesheet*/
table { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; border: 0px; }

table.tinttable { width: 100% }

tr.tintrowdark>td { 
	color: #FFFFFF;
	background: #888888; 
	padding: 10px;
	border-bottom: 1px solid #FFF;
}

tr.tintrow>td { 
	color: #888888;
	background: #e4e4e4; 
	padding: 10px;
	border-bottom: 1px solid #FFF;
}

td.dontwrap { white-space:nowrap; }


/* pagination */

ul.pagination li { float: left; display: block; height: 24px; color: #888888; font-size: 15px; margin-left: 2px; }
ul.pagination li a { display: block; padding: 5px 20px 5px 20px; color: #888888; background: #e4e4e4; }
ul.pagination li { float: left; display: block; height: 24px; color: #888888; font-size: 15px; margin-left: 2px; }
ul.pagination li.current { background: none; }
ul.pagination li.current a, ul.pagination li:hover a, ul.pagination li a:focus { border-bottom: solid 0px #00a6fc; color: #FFFFFF; background: #0099CC; }
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { border-bottom: 0px; }


/* for Contact Form 7 plugin */

textarea { resize: none; }

.wpcf7-form-control.wpcf7-text, 
.wpcf7-form-control.wpcf7-textarea, 
.wpcf7-form-control.wpcf7-captchar { 
		width: 100%;
		border: 1px solid #CCCCCC;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
		font-family: "museo-sans",sans-serif;
		font-size: 20px;
		font-weight: 300;
		color: #888888;
		margin: 0;
		display: block;
		margin-bottom: 20px;
		background: #FFFFFF; } 
}

.wpcf7-form-control.wpcf7-text, 
.wpcf7-form-control.wpcf7-textarea { 
	width: 100%; 
}

.wpcf7-form-control.wpcf7-captchar { 
	width: 50%; 
}

div.wpcf7-mail-sent-ok, 
div.wpcf7-mail-sent-ng, 
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
	background: #ff0;
	border: none !important;
}

span.wpcf7-not-valid-tip {
	position: absolute;
	top: -105px !important;
	left: 0px !important;
	background: #ff0 !important;
	border: none !important;
}

/* the submit button */
input.wpcf7-submit {
	border: none;
    background: #0099CC;
    color: #FFFFFF;
    font-family: "museo-sans",sans-serif;
	font-size: 13px;
	font-weight: 300;
	padding: 9px 20px 9px 20px;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-webkit-appearance: none; /* prevent webkit syle rounded gradient button */
}

/* video styles from original (non-WordPress) Foundation framework */
/* http://foundation.zurb.com/docs/index.php */
/*	--------------------------------------------------
   	Video
   	Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
	-------------------------------------------------- */
	
	.flex-video {
		position: relative;
		padding-top: 25px;
		padding-bottom: 67.5%;
		height: 0;
		margin-bottom: 16px;
		overflow: hidden;
	}
	
	.flex-video.widescreen { padding-bottom: 57.25%; }
	.flex-video.vimeo { padding-top: 0; }
	
	.flex-video iframe,
	.flex-video object,
	.flex-video embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	

/* mobile */
@media handheld, only screen and (max-width: 767px) {

	body, p {  font-size: 13px; font-size: 1.3rem; line-height: 18px; }

	.supertagline, .supertagline a {
		margin: 0px 0px 20px 0px;
		font-size: 36px;
		font-size: 3.6rem; 
		line-height: 36px; 
		letter-spacing: -0.02em;
	}
	
	.posttitle {
		/* clear: both; */ 
		margin: 0px 0px 15px 0px;
		font-size: 30px;
		font-size: 3.0rem;
		line-height: 30px; 
		letter-spacing: -0.02em;
	}
	
	.pressquote {
		/* clear: both; */ 
		margin: 0px 0px 15px 0px;
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 24px; 
		letter-spacing: -0.02em;
	}
	
	.photocredit.smallphoto { 
		float: right; 
		text-align: right; 
		margin-bottom: 5px;
	}
	
	.nav-bar { height: auto; }
	.nav-bar>li { float: none; display: block; border-right: none; }
	.nav-bar>li>a { text-align: left; border-top: 1px solid #FFFFFF; border-right: none; } 
	.nav-bar>li>#searchform>div { text-align: left; border-top: 1px solid #FFFFFF; border-right: none; background: #555555; } 
	.nav-bar>li:first-child>a { border-top: none; }
	
	
	/* ------------------------------------------------------------ */
	/* BEGIN CSS TO POSITION MAIN NAV SEARCH FIELD ON SMALL SCREENS */
	
	.navsearch { 
		background: #888888; /* change from white, to match main nav appearance */
		width: 100%;
		height: 30px;
		position: relative;
		top: -17px;
		margin-bottom: 0px;
	}
	
	#searchform div { 
		margin: 0px 10px 0px 20px;
		float: left; /* change to match main nav appearance */
		position: relative;
		top: 5px; /* change to position inside of .navsearch */
		left: -4px; /* align type in field with nav type */
	}
	
	/* match search to main nav style */
	#s {
		background: #888888;
		color: #FFFFFF; /* only colors typed text (not default placeholder text) */
  		-moz-placeholder: #FFFFFF; /* to change default placeholder text color (in Firefox) */
		-webkit-input-placeholder: #FFFFFF ; /* and in webkit browsers */
	}
	
	/* reveal search input field when clicked */
	input#s:focus {
		background: #FFFFFF;
		color: #888888; /* only colors typed text (not default placeholder text) */
  		-moz-placeholder: #888888; /* to change default placeholder text color (in Firefox) */
		-webkit-input-placeholder: #888888; /* and in webkit browsers */
	}
	
	.row.searchadjust { 
		position: relative;
		top: 0px; /* remove compensation for displacement by main nav search */
	}
	
	footer div.columns { 
		border-top: 1px dotted #888888;
		margin-top: 20px;
		padding-top: 10px;
		margin-bottom: 30px;
		position: relative;
		top: 0px; /* remove compensation for displacement by main nav search */
	}
	
	/* END CSS TO POSITION MAIN NAV SEARCH FIELD ON SMALL SCREENS */
	/* ---------------------------------------------------------- */
	
	td.tabular-hide-on-phones { display: none !important; }
	
	/* video styles from original (non-WordPress) Foundation framework */ 
	/* http://foundation.zurb.com/docs/index.php */
	.video { padding-top: 0; }
	
}


/* repeated from Foundation CSS because modified .block-grid in this child theme seems to break it */
@media only screen and (max-width: 767px) {
	.block-grid.mobile { margin-left: 0; }
	.block-grid.mobile li { 
		float: none; 
		width: 100%; 
		margin-left: 0; 
		padding: 10px;
	}
	.block-grid.mobile li.greyblock { 
		background: #e4e4e4; 
		margin-bottom: 2px;
	}
}