/*
Theme Name: csmithstack
Description:  whoah!
Author: Beecher
Version: 1.0
*/

/* =================================== RESET 
based on -> http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
===========================================  */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size:inherit;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div {
	position:relative;
	display: block;
	margin:0;
	padding:0;
	border:none;
}

ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* remember to define focus styles! */
:focus {outline: 0;}

/* ===================================  */

html {
	width: 100%;
	height: 100%;
	background: #fff url(img/blueprint_dark2.jpg) repeat;
}

body {
	font-family: sans-serif;
	font-size:1em;
	color:#fff;
	background: transparent none;
	width:100%;
	display:block;
	line-height: 1;
}

input, input[type="search"], input[type="text"],
teaxtarea {
	-webkit-appearance: none;
	-moz-appearance: none; /* mobile firefox too! */
	/* optional rounded corners for browsers that support it */
	border-radius: 0px;
}

/* ======= fonts ===== */

/* ======= links and basics ===== */

a, 
a:link, 
a:visited, 
a:active {
	text-decoration:none;
	color:#fff;
	font-size: inherit;
}
	a:focus, 
	a:hover {text-decoration: underline;}

p,
.fake_p {
	padding:0 1em 1em 0;
	line-height: 1.4em;
}

	.fake_p p {
		line-height: 1em;
		padding: 0 0 1em;
	}


strong {font-weight: bold;}
em {font-style: italic;}
small {font-size:0.9em;}
cite {font-size:0.9em;font-style: italic;}
sup {font-size: 0.75em;vertical-align: super;line-height: 0.75em;}
sub {font-size: 0.75em;vertical-align: sub;line-height: 0.75em;}

/* ======= colors ======= */


/* ===== LAYOUT ====== */

#main_wrap {
	padding: 0 10px;
	margin: 0 auto;
	max-width: 720px;
	min-height: 480px;
	min-width: 300px;
	height: 100vh;
}

	hgroup {
		padding:2em 0 3em;
	}
	
	.address {
		position: absolute;
		bottom:1em;
	}

	.address li {
		padding:0 0 0.75em;
	}

/* ===================================  Nav */
			
/* ========== other */



/* ===================================  Media */

img {
	max-width: 100%;
	display: block;
}

	figcaption {
		padding:0.5em 0;
	}

/* ==================== social ================ */
	
	/* hide fb like count */
	.facebook_wrap {width: 48px;overflow: visible;}
			
	/* make the like button smaller /// .fb_ltr fb_iframe_widget_lift  */
	.fb_edge_widget_with_comment iframe.fb_ltr { width:48px !important; }
	
	/* but make the span that holds the comment box larger */
	.fb_edge_widget_with_comment iframe.fb_ltr.fb_iframe_widget_lift { width:460px !important; }
		
/* ===================================  Footer */
		
/* ===================================  Headers */

h1, h2, h3, h4, h5 {
	font-family: Baskerville, "times new roman", times, serif;
	font-weight: normal;
}

h1 {
	font-size:4.22em;
}
	#cooper {font-size: inherit;}
h2 {
	font-size:1.5em;
}

	h1, h2 {
		line-height: 1.4em;
		transition: all 0.3s ease;
	}

h3 {font-size:1.5em;}
h4 {font-size:1.25em;}
h5 {font-size:1.1em;}

/* =================================== percentages */

.half, .three_quarters, .two_thirds, .third, .quarter, .fifth, .two_fifths, .three_eigths, .three_fifths {
	float:left;
	clear: none;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition: width 0.1s ease-out;
	-webkit-transition: width 0.1s ease-out;
	-o-transition: width 0.1s ease-out;
	-ms-transition: width 0.1s ease-out;
	transition: width 0.1s ease-out;
}

.half {width: 50%;}

.three_quarters { width:75%; }

.two_thirds {width: 66.66%;}

.third {width: 33.33%;}

.quarter {width: 25%;}
	
.fifth {width: 20%;}

.two_fifths {width: 40%;}

.three_fifths {width: 60%;}

/* ===================================  SHORTCUTS */

.hide {display:none;}

.highlight { color:#f7d417 !important; }

.full_height {height: 100%;}

.data_icon:before { content: attr(data-icon); }
	
.screen_reader_only {
	position: absolute; 
	top: -9999px; 
	left: -9999px;
}

.spacer {width: 1em;}

.hide,
.hidden {display:none;}

.left {float:left;clear:none;}
.right {float:right;clear:none;}
.alignleft {float:left;clear:none;padding:0 1em 1em 0;}
.alignright {float:right;clear:none;padding:0 0px 1em 1em;}
.alignnone {float:none;clear:both;margin:0 auto 1em;}
.center {margin-left:auto;margin-right: auto;}

.clearfix {
	content: " ";
	position:relative;
	display:block;
	width:100%;
	height:0px;
	float:none;
	clear:both;
	line-height:0px;
	padding:0px;
	margin:0;
	overflow:hidden;
	background:transparent none;
	outline:none;
	visibility:hidden;
}

.clear {clear:both;}
.clear_me:after {
	content: "";
	display: block;
	clear: both;
}

.textleft {text-align:left;}
.textright {text-align:right;}
.textcenter {text-align:center;}
.justify {text-align: justify;}
.uppercase {text-transform:uppercase;}
.capitalize {text-transform: capitalize;}

.pad {padding:1em !important;}
.padH {padding:0 1em !important;}
.padV {padding:1em 0 !important;}
.padT {padding-top:1em !important;}
.padT_half {padding-top:0.5em !important;}
.padR {padding-right:1em !important;}
.padB {padding-bottom:1em !important;}
.padBhalf {padding-bottom:0.5em !important;}
.padL {padding-left:1em !important;}
.padTight {padding:0 !important;}

.marTight {margin:0 !important;}
.mar {margin:1em !important;}
.marH {margin:0 1em !important;}
.marV {margin:1em 0 !important;}
.marT {margin-top:1em !important;}
.marR {margin-right:1em !important;}
.marB {margin-bottom:1em !important;}
.marB2 {margin-bottom:2em !important;}
.marB3 {margin-bottom: 3em !important;}
.marB6 {margin-bottom: 6em !important;}
.marB_half, .marBhalf {margin-bottom:0.5em !important;}
.marL {margin-left:1em !important;}
.marL_half {margin-left:0.5em !important;}
.marTight {margin:0 !important;}

.smaller {font-size: 0.9em;}

/* ========== tables ================ */
/* tables still need 'cellspacing="0"' in the markup */

caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* =================================== Modal */

.modal_title {
	font-style: normal !important;
}

.modal_copy {
	font-size: 0.9em;
}

.blurry * {
	color:rgba(255,255,255,0) !important;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.9) !important;
	border-color: transparent !important;
}
	.blurry img,
	.blurry video {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
	} 

.modal_show {cursor: pointer;}

#curtain {
	position: fixed;
	display: none;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background:rgba(255,255,255,0.75);
	z-index:1000;
}

	#curtain.transparent {
		z-index:5;
		background: transparent;
	}

#close_curtain {
	position: fixed;
	display: none;
	top:0px;
	right:0px;
	background: transparent;
	width: 48px;
	height: 48px;
	z-index:1500;
	font-size: 50px;
}
	
#modal_layer {
	position: absolute;
	display: block;
	top:-9999px;
	left:-9999px;
	margin:0 auto;
	background: transparent none;
	width: 100%;
	height: auto;
	z-index: 1100;
	-moz-transition: width height opacity .15s ease-out;
	-webkit-transition: width height opacity .15s ease-out;
	-o-transition: width height opacity .15s ease-out;
	-ms-transition: width height opacity .15s ease-out;
	transition: width height opacity .15s ease-out;
}

	#modal_uber_wrap {
		position: relative;
		width: 90%;
		max-width: 1200px;
		margin:0 auto 1em;
		background: transparent none;
	}
	
		#modal_wrap {
			position: relative;
			width: 90%;
			max-width: 1000px;
			min-width: 300px;
			min-height: 150px;
			margin:1em auto 0;
			background: #fff url(img/ajax-loader.gif) no-repeat center center;
			overflow: hidden;
		}
		
			#modal_wrap img {
				position: relative;
				display: block;
				margin:0 auto;
				width: 100%;
				max-width: 100%;
			}
		
		.modal_message {
			background: #000;
			padding: 2em;
			margin:0 auto;
			line-height: 1.4em;    
			min-height: 100px;
			overflow: hidden;
		}
			
			/*  do we want to limit the size of the image to it's original width ? 
			#modal_wrap img {
				width: auto;
				margin: 0 auto;
			}
			*/
		
		.modal_nav {
			position: absolute;
			display: block;
			width: 5%;
			height: 100%;
			top:0px;
			opacity: 0.25;
			background-repeat: no-repeat;
			background-position: center 45%;
			background-size: 76.9% auto;
			-moz-transition:opacity 0.3s ease;
			-webkit-transition:opacity 0.3s ease;
			-o-transition:opacity 0.3s ease;
			-ms-transition:opacity 0.3s ease;
			transition:opacity 0.3s ease;
		}
		
			.modal_nav:before {
				position: absolute;
				top:48%;
				font-size: 2em;
				display: inline-block;
				color:#fff;
			}
		
			.modal_nav:hover {opacity: 1;}
		
			#modal_prev {left:0px;}
				#modal_prev:before {content : '\3008';}
			
			#modal_next {right:0px;}
				#modal_next:before {
					content : '\3009';
					left: 35%;
				}
			
		#modal_nav_wrap {
			width: 90%;
			max-width: 1000px;
			min-width: 100px;
			margin: -1px auto;
			line-height: 1.4em;
		}		
						
			#modal_caption {
				padding: 1em 7em 1em 1em;
				background-color: #fff;
				font-style: italic;
			}
		
			#modal_subnav_wrap {
				background: #fff;
				padding:0.75em 7em 0.5em 0.5em;
				text-align: center;
			}
			
				.modal_subnav_button {
					cursor: pointer;
					display: inline-block;
					padding: 0.25em 0.5em;
					margin:0 0.1em 0.2em;
					line-height: 1;
					background: rgba(0,0,0,0.1);
				}
				
					.modal_subnav_button.active {
						cursor: default;
						background: rgba(0,0,0,0.25);
					}
		
			#modal_pagemarker {
				position: absolute;
				top:1em;
				right:0.5em;
			}
			
			#modal_subnav_wrap,
			#modal_pagemarker {display: none !important;}
	
	
figure.modal_figure {margin:0 0 1em;}	

/* ==================== mobility =============== */

/* iPad [portrait + landscape] */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
		
		
}
/* iPad [portrait] */
@media only screen and (max-width: 730px) {
	
	h1 {font-size: 3.22em;}
	
}
/* smaller */
@media only screen and (max-width: 566px) {
	
	h1 {font-size: 2.62em;}
	
}
/* iPhone [portrait + landscape] */
@media only screen and (max-width: 480px) {
		
}
/* iPhone [portrait] */
@media only screen and (max-width: 320px) {

	h1 {font-size: 2.45em;}	
	
	#cooper {font-size: 2.45em;}
	
	h2 {font-size: 1.25em;}
	
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {

}	`