/*
Theme Name: History of the Future
Theme URI: http://byronreese.com/
Author: Devin Price and Brian Dillon
Author URI: http://demandmedia.com/
Description: Fancy timelines and all sorts of whiz-bang
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: post-formats

Take all the inspiration you want, but don't make an exact duplicate of the site.
Copyright (C) 2011 Byron Reece

*/

@import url(style-timeline.css);
@import url(style-pages.css);

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline
}

body {
	line-height:1.75
}

a {
	text-decoration:none
}

a:hover {
	text-decoration:underline
}

ol,ul {
	list-style:none
}

table {
	/* tables still need 'cellspacing="0"' in the markup */
	border-collapse:separate;
	border-spacing:0
}

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

blockquote:before,blockquote:after,q:before,q:after {
	content:""
}

blockquote,q {
	quotes:
}

a img {
	border:0
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block
}

/* =WordPress Defaults
-------------------------------------------------------------- */

/* Text meant only for screen readers */
.screen-reader-text,.assistive-text {
	position:absolute!important;
	clip:rect(1px 1px 1px 1px);
/* IE6, IE7 */
	clip:rect(1px,1px,1px,1px)
}

/* Alignment */
.alignleft {
	display:inline;
	float:left
}

.alignright {
	display:inline;
	float:right
}

.aligncenter {
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto
}

/* = Global Styles
-------------------------------------------------------------- */
body {
	font-family:"proxima-nova",sans-serif;
	font-weight:400;
	font-size:16px;
	color:#3e3e3e;
	background-color: #fff;
}

em {
	font-style:italic
}

p {
	margin-bottom:22px
}

a {
	color:#0990b7
}

h1,h2,h3,h4,h5,h6 {
	font-family:"chaparral-pro-display",serif;
	font-size:1.125em
}

h1 {
	font-size:2.7em;
	font-weight:600;
}

h1 a {
	color:#333
}

h1 a:hover {
	color:#065561;
	text-decoration:none
}

h1.page-title {
	margin:20px 0 0;
	padding-bottom:0;
	font-size:3.2em;
	font-weight:600;
	color:#444;
	border-bottom:2px groove #FFF;
	text-shadow:0 1px 1px #fff;
	text-transform:lowercase
}

.post blockquote {
	margin:1em;
	border-left:1px dashed #999;
	padding-left:1em
}

.button a, a.button {
	-webkit-border-radius: 2px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
	          border-radius: 2px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

	  /* useful if you don't want a bg color from leaking outside the border: */
	  -webkit-background-clip: padding-box; background-clip: padding-box;
	text-transform: uppercase;
	font-size: 14px;
	border: 1px solid;
	padding: 5px 8px 3px 8px;

}

.button a:hover {

}

/* =Header
-------------------------------------------------------------- */



#branding {
	background:#fff;
	height: 128px;
	min-width:880px;
	line-height: 1.4;
}

#branding hgroup {
	width:243px;
	margin:0 auto 0 auto;
	padding-top: 23px;
	text-align:center
}

#branding hgroup a {
	position:relative;
	display:block;
	width:243px;
	height:49px;
	background-image:url(images/branding-byron.png);
	background-size: 243px 49px;
	z-index:999
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	#branding hgroup a {
		background-image: url(images/branding-byron@2x.png);
		background-size: 243px 49px;
	}
}

#branding hgroup a:hover span {
	opacity:1
}

#site-title {
	font-size:2em;
	font-weight:600;
	margin:0
}


/* =Menu
-------------------------------------------------------------- */
#access {
	max-width:980px;
	min-width:880px;
	margin: 0 auto;
}

#access ul {
	list-style:none;
/*	max-width:980px;
	min-width:780px;
	margin:0 auto */
}


/***   HEADER NAV   ***/
#header-nav {
	text-align: center;
	margin-top: 18px;
}

#header-nav li{
	display: inline-block;
	margin-right:35px;
}

#header-nav li:last-child {
	margin-right:0;
}

#header-nav li a{
	text-transform:uppercase;
	color: #bfbfbf;
	text-decoration:none;
	letter-spacing:1px;
	font-size:15px;
}

#header-nav li a:hover{
	color: #919191;
}

/* Changes nav bar to select present page */

.category-blog #header-nav li a.blog, .blog #header-nav li a.blog  {
	color: #135d72
}
.home #header-nav li a.timetraveler, .timeline #header-nav li a.timetraveler {
	color: #135d72
}
.home #header-nav li a.blog, .timeline #header-nav li a.blog {
	color: #bfbfbf
}
.page-author #header-nav li a.author {
	color: #135d72
}
.page-speaker #header-nav li a.speaker {
	color: #135d72
}
.page-template-info-page-php #header-nav li a.info {
	color: #135d72
}

/***   SOCIAL LINKS   ***/
#header-social-links {
	margin-top: -68px;
}

#header-social-links a {
	float:right;
	background-image:url(images/header-social-sprite.png);
	background-repeat:no-repeat;
	margin:0 0 0 20px;
	display:block;
	height:40px;
	width:40px;
	text-indent:-999em;
}

#access li a.twitter {
	background-position:-40px 0
}

#access li a:hover.twitter {
	background-position:-40px -40px
}

#access li a:active.twitter {
	background-position:-40px -80px
}

#access li a.facebook {
	background-position:0 0
}

#access li a:hover.facebook {
	background-position:0 -40px
}

#access li a:active.facebook {
	background-position:0 -80px
}

#access li a.googleplus {
	background-position:-120px 0
}

#access li a:hover.googleplus {
	background-position:-120px -40px
}

#access li a:active.googleplus {
	background-position:-120px -80px
}

#access li a.rss {
	background-position:-80px 0
}

#access li a:hover.rss {
	background-position:-80px -40px
}

#access li a:active.rss {
	background-position:-80px -80px
}

.page-template-contact-page-php #access li a.contact {
	background-position:-83px -78px
}

.page-template-about-page-php #access li a.about {
	background-position:0 -78px
}


/***  BOOK PROMO RIBBON ***/

#book-promo {
	margin-top: -84px;
	margin-left: 10px;
	width: 182px;
	text-align:center;
}

.page-template-author-page-php #book-promo {
	display:none;;
}


#ribbon span {
	background-image:url(images/promo-ribbon.png);
	position:relative;
	display:block;
	height: 205px;
	width: 182px;
	z-index: 100;
}

#book-promo .button {
	position: relative;
	text-align: center;
	z-index: 200;
	margin-top: -68px;
}

#book-promo .button a {
	color: white;
	border: 1px solid white;
}

#book-promo .button a:hover {
	color: #135d72;
	border: 1px solid white;
	background: white;
	text-decoration: none;
	font-weight: bold;
}

#book-promo .button a:active {
	position:relative;
	top: 1px;
}




/* =Content
-------------------------------------------------------------- */
#primary {
	background:#fff;
	position:relative;
	border-bottom:1px solid #FFF;
	min-height:330px
}

#content {
	padding:0;
	width:960px;
	margin:0 auto 50px
}

#content a {
	
}

.hentry {
	margin-bottom:0;
	padding:0;
	position:relative
}



.entry-title {
	margin:48px auto 22px;
	width:580px;
	font-size:46px;
	line-height: 1.15;
	color:#135d72;
	text-align:center
}

.post .entry-content, .entry-content {
	width:580px;
	margin:0 auto
}

.entry-meta {
	margin-top:40px;
	padding:10px 80px;
	border-top:2px groove #FFF;
	border-bottom:2px groove #FFF;
	color:#8c8c8c;
	clear: both;
}

.meta-banner {
	position:absolute;	
	display:block;
	background: white;
	height:66px;
	width:66px;
	text-align:center;
	margin:-90px 0 0 439px;
	padding-top:0px;	
	border: solid 8px #135d72;
	-webkit-border-radius: 50px;
            border-radius: 50px;
	-webkit-background-clip: padding-box; 
			background-clip: padding-box;
}

.meta-banner .year-meta {
	line-height: 14px;
	letter-spacing: 1px;
	color:#135d72;
	font-size:22px;
	font-weight:700;
	font-family:"proxima-nova",sans-serif;
	margin-top: 12px;	
}

.meta-banner .year-meta-home {
	line-height: 22px;
	letter-spacing: 1px;
	color:#135d72;
	font-size:22px;
	font-weight:700;
	font-family:"proxima-nova",sans-serif;
	position: relative;
	top: 22px;
}


.suffix,.prepend {
	font-size:14px;
	min-height: 1px;


}

.meta-banner .suffix {
	margin-top: 6px;
}

.meta-banner .prepend {
	margin-bottom: 7px;

}


.social-links {
	position:absolute;
	top: 0px;
	left:50px;
	width: 80px;
	text-align:center;
	background-image: url("images/social-bg.png");	
  -webkit-border-radius: 6px;
          border-radius: 6px;
  -webkit-background-clip: padding-box; background-clip: padding-box;

}

#tweet {
	margin-top:6px;
}


#plusone,#tweet, #like {
	float:left
	display:block;

}


#tweet,#plusone,#like,#stumble {
	padding:8px 0;
	-webkit-transition:all .3s ease-in-out; /* Saf3.2+, Chrome */
	-moz-transition:all .3s ease-in-out; /* FF4+ */
	-ms-transition:all .3s ease-in-out; /* IE10? */
	-o-transition:all .3s ease-in-out; /* Opera 10.5+ */
	transition:all .3s ease-in-out
}

#content nav {
	display:none;
	overflow:hidden
}

#content nav .nav-previous {
	float:left;
	width:50%
}

#content nav .nav-next {
	float:right;
	text-align:right;
	width:50%
}

#content #nav-above {
	display:none
}

.paged #content #nav-above,.single #content #nav-above {
	display:block
}

#nav-below {
	margin:1em 0 0
}

.page-link {
	clear:both;
	margin:0 0 1em
}

.page .edit-link {
	clear:both;
	display:block
}


/* =Images
-------------------------------------------------------------- */
a img {
	border:none
}

p img {
	margin-bottom:.5em /* a small bottom margin prevents content floating under 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.
*/
img.size-auto,img.size-full,img.size-large,img.size-medium,.attachment img,.widget-area 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:1em
}

img.alignright {
	margin-left:1em
}

.wp-caption {
	padding:.5em;
	text-align:center
}

.wp-caption img {
	margin:.25em
}

.wp-caption .wp-caption-text {
	margin:.5em
}

.gallery-caption {
}

/* =Footer
-------------------------------------------------------------- */
#colophon {
	clear:both;
	padding:50px;
	color:#fff;
	height:40px;
	text-align:center;
	font-weight:700;
	background-image:url(images/footer-bg.jpg);
	border-top: 1px solid #00141A;
	min-width:880px;
}

#colophon p {
	margin-bottom: 0;
}

#colophon a {
	color:#eee
}

#about-site {
	font-size:11px;
}


/* =Layout Toolbox
-------------------------------------------------------------- */
/* For image replacement */
.ir {
	display:block;
	border:0;
	text-indent:-999em;
	overflow:hidden;
	background-color:transparent;
	background-repeat:no-repeat;
	text-align:left;
	direction:ltr;
	*line-height:0
}

/* Clearfix */
.clearfix:before,.clearfix:after {
	content:"";
	display:table
}

.clearfix:after {
	clear:both
}

.clearfix {
	*zoom:1
}

.center {
	text-align:center
}