/*
 * GoodBlogs 2.0, Front-end styles
 * Author: Nathan Dirks, DriftlessDesign.com
 * 
 * Notes:
 * Logo size: 630x106. Resizes to 315x53, tablet & up; 237x40, handheld.
 */
 
/***********************************************************
 
 TABLE of CONTENTS

	 1. STRUCTURE (columns, universal margins & padding)
	 2. TAGS & CLASSES
	 3. HEADER
	 4. NAVIGATION
	 5. MAIN CONTENT (pre-content, articles)
	 6. SECONDARY CONTENT (search, category nav, social media sidebar)
	 7. FOOTER
	 8. OTHER PAGES (static, blogger)
	 9. FIXES
	10. MEDIA QUERIES (tablet & up)

***********************************************************/


/* 1. STRUCTURE
***********************************************************/

/* General */

	html {-ms-text-size-adjust: none; -webkit-text-size-adjust: none; /* Prevents auto resizing of text in mobile browsers */}
	body {font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; min-width: 20em; position: relative; width: 100%; margin: 0;}
	body {background: #333333;} /* matches off-canvas nav background color to prevent flicker during animation */
	
	#outer-wrap {overflow: hidden; position: relative; width: 100%;} /* wrappers for off canvas navigation */
	#inner-wrap {position: relative; width: 100%;}

	header,
	#content,
	footer {clear: both;}

	header .inner,
	footer .inner {padding: 0 1.5em;} 

/* Padding, top & bottom of main content area */

	#content > .inner {padding: 2em 0;}

/* Margin, between columns */

	.template {margin-left: 1em;}

	#form-template {margin-right: 1em;}
	#form-template #primary .inner,
	#form-template #secondary .inner {margin: 0 0 1.5em;}

	#primary .inner,
	#secondary .inner {padding: 0; margin: 0 1em 1.5em 0;}
	#tertiary .inner {padding: 0; margin: 0 1em 1.5em 0;}

	#pre-content {padding: 0 1em 1em;}

/* Margin, below content blocks */

	#secondary .sidebar-section,
	#tertiary .sidebar-section {margin-bottom: 1.5em;}
	#full-width .inner {margin-bottom: 2em !important;}

/* Margin, below article summaries */

	.post-summary {margin-bottom: 1.5em;}

/* Padding, within content blocks */

	#primary .inner.post,
	#secondary .inner.post {padding: 0 !important;}
	#primary .inner.content-block,
	#secondary .inner.content-block {padding: 2em 2em 1em !important;}
	#primary .inner.form {padding: 0; margin: 0; background: none !important;}
	.page-body {padding: 2em;}

/* Background, content blocks */

	.post-summary,
	article.full-post,
	.content-block,
	.page-body,
	.sidebar-section,
	#static-page-menu {
		background: #FFFFFF; 
		-moz-box-shadow: 0 0 2px rgba(0,0,0,.125);  
		-webkit-box-shadow: 0 0 2px rgba(0,0,0,.125); 
		box-shadow: 0 0 2px rgba(0,0,0,.125);
	}

	.sidebar-section.ad-section,
	#tertiary .sidebar-section.social-section {background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}

	#search-template #secondary .inner,
	#tag-template #secondary .inner,
	.inner.ui-message {background: none !important;}

/* Narrow Form, max width */

	.narrow #primary {max-width: 28.75em /* 460px */ !important; max-width: 480px !important; margin: 0 auto;}



/* 2. TAGS & CLASSES
***********************************************************/

/* Tags */ 

	img {max-width: 100%; height: auto;}


/* Classes */

	.screen-reader {position: absolute; left: -9999px; top: -9999px; margin-bottom: 0;}
	.delimiter {padding: 1em 0;}
	.delimiter span {padding: 0 1em;}
	.button,
	.joyride-next-tip {-moz-border-radius: .25em; -webkit-border-radius: .25em; border-radius: .25em; padding: .5em .85em; font-size: .9em; display: inline-block;}



/* 3. HEADER
*******************************/

/* Structure */

	header#top {min-height: 4em;  /* for exact mobile nav absolute positioning */ position: relative; z-index: 1; -moz-box-shadow: 0 0 4px rgba(0,0,0,1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,1); box-shadow: 0 0 4px rgba(0,0,0,1);}
	header#top .inner {position: relative;}

/* Logo */

	header hgroup {margin: 0; padding: .5em 0 .5em 3em; height: 3.375em;}
	#logo {width: 237px; height: 40px; margin: .4375em auto 0; position: relative; z-index: 999; }
	#logo a {display: block;}
	#logo img {vertical-align: bottom;}
	#tagline {position: absolute; left: -9999px; top: -9999px; margin-bottom: 0;}



/* 4. NAVIGATION
***********************************************************/

/* Mobile Off-Canvas */
/* From the David Bushell tutorial: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website */

	/* logged in/out */
	.logged-out #nav-main li.user,
	.logged-in #nav-main li.login,
	.logged-in #nav-main li.join {display: none;}

	/* open/close buttons */
	h3.nav-label a.nav-open,
	#nav-main a.nav-close {width: 2.5em; height: 2.5em; position: absolute; top: .9375em; left: 1em; background: rgba(255,255,255,.1); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}
	#nav-main a.nav-close {top: -3.375em;}
	h3.nav-label a.nav-open {display: block; z-index: 200;}
	#nav-main a.nav-close {display: none;}
	#nav-main:target a.nav-close {display: block;}

	/* user nav */
	#nav-main {position: absolute; top: 0; left: 0; padding-top: 4.375em /* height of header */; z-index: 200; overflow: hidden; width: 100%; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000; height: 100%;}
	#nav-main:not(:target) {z-index: 1; height: 0;}

	#nav-main .block {background: #333; z-index: 2; position: relative;}

	#nav-main ul li a {position: relative; display: block; padding: .75em 1.25em .75em 3.5em; border-top: 1px solid #999; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid #000;}
	#nav-main ul li.category a {border-bottom-color: #222;}
	#nav-main img.ui {margin: 0; position: absolute; top: 1em; left: 1.5em; width: 16px; height: 16px; /*opacity: .65;*/}
	#nav-main img.widescreen {display: none;}
	#nav-main ul li a:hover img {opacity: 1;}
	#nav-main li.join img.ui {width: 25px; left: 1em;}

	#user-nav {border-top: 1px solid #000;}
	#user-nav li.user > a {display: none;}
	 
	#category-nav-mobile {background: #444;}
	#category-nav-mobile figure {width: 24px; height: 24px; overflow: hidden; position: absolute; top: .65em; left: 1.125em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;} 
	#category-nav-mobile figure img {width: 36px !important; height: 24px; margin-left: -25%; max-width: none;}



/* 5. MAIN CONTENT (pre-content, articles)
***********************************************************/

/* Pre-Content
*******************************/

	.site-intro-wrapper {display: none; position: relative; }
	.site-intro-wrapper.active {display: block; box-shadow: 0 0 4px #000;}
	
	#site-intro {background: #CDCDCD;}
	#site-intro {margin: 0; padding: 1em; z-index: 100;}
	
	#site-intro h2 {font-size: 1.25em; margin-bottom: 1em; margin-right: 10%; font-weight: 300;}

	#site-intro ul {}
	#site-intro ul li {display: block; margin-bottom: 1.5em; min-height: 46px;}
	#site-intro ul li.cta {margin-bottom: 0; height: auto;}
	
	#site-intro h3 {font-size: 1.125em; font-weight: 700;} 
	#site-intro li span {font-size: .9em;}
	
	#site-intro li img {width: 40px; height: 40px; background: #FFF; background: rgba(255,255,255,.75); border: .375em solid; border-radius: 100%;}
	#site-intro a.button {clear: both; border-radius: 10em; display: block; text-align: center; padding: .75em 0; text-transform: uppercase; font-size: 1.25em; margin: 1em 0 0;}

	#site-intro li {clear: left;}
	#site-intro li img {float: left; margin: -.1875em 1em 1em 0;}
	
	.intro-content {/*position: relative;*/}
	#site-intro .close {position: absolute; right: 1em; top: 1em; width: 20px; height: 20px; background: rgba(0,0,0,.25); border-radius: 100%;}
	


/* Articles (top, new, and full)
*******************************/

/* General */

	.post-summary,
	.full-post {position: relative;}

/* Post Images */

	.post-image {width: 100%; /*height: auto;*/ display: inline-block; position: relative; overflow: hidden;}
	.post-image:after {padding-top: 56.25%; /* 16:9 ratio */ display: block; content: '';}
	.post-image-wrap {position: absolute; top: 0; bottom: 0; right: 0; left: 0; /* fill parent */ background-color: #efefef;}

	.post-image img {/*position: aboslute; top: 50%; left: 50%; margin-top: -25%; margin-top: -10%;*/}
	.post-image img.default-thumb {/*top: 0; left: 0; margin-top: 0;*/}

	.post-image figcaption.post-category a {position: absolute; left: 0; bottom: 0; display: inline-block; padding: 1.25em 1.75em; color: #FFF;
		background: #333; 
		background: rgba(0,0,0,.7); 
		-webkit-transition: background 0.5s ease;
		-moz-transition: background 0.5s ease;
		-ms-transition: background 0.5s ease;
		-o-transition: background 0.5s ease;
		transition: background 0.5s ease;
	}
	.post-image figcaption.post-category a:hover {background: #000; background: rgba(0,0,0,1);}

/* Voting */

	/* show / hide */
	.gb-vote .vote-button,
	.gb-vote:hover .vote-total {display: none;}
	.gb-vote:hover .vote-button {display: block; cursor: pointer;}

	.post-image-wrapper {position: relative;}

	/* vote circle wrap */
	.gb-vote {border: 6px solid #FFF; width: 60px; height: 60px; position: absolute; right: 1em; bottom: -36px; display: block; text-align: center; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-transition: -moz-box-shadow 0.3s ease, background .3s ease; -webkit-transition: -webkit-box-shadow 0.3s ease, background .3s ease; transition: box-shadow 0.3s ease, background .3s ease; z-index: 100;}
	.gb-vote:hover {-webkit-box-shadow: 0 0 3px #333; -moz-box-shadow: 0 0 3px #333; box-shadow: 0 0 3px #333;}
	.gb-vote:hover .vote-link {z-index: 101;}

	/* text inside circle */
	.gb-vote .number,
	.gb-vote .vote-img,
	.gb-vote .number-new {width: 60px; height: 1.25em; font-size: 1.25em; line-height: 1.25; position: absolute; top: 50%; left: 50%; margin-top: -.625em; margin-left: -30px;}

	/* plus */
	.gb-vote .plus {font-size: 75%; margin-left: -6px; margin-right: 2px;}
	.gb-vote .vote-button .add-vote {background: #FFF; box-shadow: 0 0 2px #000; border-radius: 4px; padding: 1em; color: #000;}
	.gb-vote:hover .vote-button .add-vote {position: absolute; left: -162px; top: .15em; width: auto;}

	/* tooltip arrow */
	.gb-vote:hover .vote-button .add-vote:after {content: ' '; height: 0; position: absolute; width: 0; border: .65em solid transparent; /* arrow size */
	
		border-left-color: #000;  /* arrow color */
		/* positioning */
		position: absolute;
		top: 1.125em;
		right:  -1.25em;
		z-index: -1;
	}

	/* link itself */
	.gb-vote .vote-link {width: 60px; height: 60px; display: block; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}

/* Post Content */

	.post-summary .post-intro,
	.full-post .post-body {position: relative;}
	
	.full-post .post-body .text {border-bottom: 1px solid #ccc; margin-bottom: 1.25em; margin-top: .25em;}

	.top-posts .post-intro,
	.full-post .post-intro,
	.full-post .post-body {padding: .9em 2em 2em;}

	.post-footer,
	.comments-wrapper {padding: 2em;}

	.post-title {clear: both;}

	.full-post .post-intro {padding-bottom: 0;}
	.new-posts .post-intro {padding: .9em 1.45em 2em;}

	.top-posts h1 {}
	.post-summary.sponsored h1 {margin-right: 0;}

	.full-post .post-body p,
	.content-block p {padding: 0 0 1em;}

	.post-meta {margin-bottom: .725em;}
	.full-post .post-meta {margin-bottom: 1.8em;}

	.post-meta time,
	.post-meta address,
	.post-meta span {margin: .4em 0; display: block; float: left; line-height: 1; border-left: 1px solid #CCC; padding-left: .7em; margin-left: .7em;}
	.post-meta time,
	.post-meta address,
	.full-post .post-meta span.comments  {margin-left: 0; padding-left: 0; border-left: 0; clear: left;}

	.sponsored .post-meta time,
	.sponsored .post-meta address,
	.sponsored .post-meta span  {display: none;}

	.flag-post img {width: auto; height: .9em;}

	.top-posts .author {display: none;}
	
/* Post Call to Action */

	.post-call-to-action {margin: 0 -2em 2em; padding: 2em;}
	
/* Responsive Videos */

	.responsive-video {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
	.responsive-video iframe,
	.responsive-video object,
	.responsive-video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* Load More */

	.load-more {font-weight: 300; margin-top: -1.5em; height: 1em; /*offsets bottom margin of post summaries */ padding: 1.5em 0; border-top: 1px solid #CCC; /*background: #efefef;*/ text-align: center;}
	.load-more a:link,
	.load-more a:visited {color: #000; opacity: .7;}
	.load-more a:hover {opacity: 1; -moz-transition: opacity .5s ease; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; text-decoration: none;}
	.load-more span {display: inline;}
	.load-more .ui.load-more-img {width: 1em; height: 1em; display: inline; margin-right: .5em; position: relative; top: 1px;}
	.load-more img.ajax-loader {display: none;}
	.load-more.loading a {display: none;}
	.load-more.loading img.ajax-loader {display: block; width: 16px; height: 1em; margin: 0 auto;}
	
/* No Posts */
	.no-posts {font-weight: 300; margin-top: 0; height: 1em; /*offsets bottom margin of post summaries */ padding: 1.5em 0; border-top: 1px solid #CCC;}

/* Social Sharing */

	.post-summary .social-sharing {margin-top: 1em;}
	.full-post .social-sharing {margin-bottom: 1em;}
	.post-summary .social-sharing li,
	.full-post .social-sharing li {display: inline-block; width: auto !important; padding-right: .5em;}
	[id^=___plusone] { width: 65px !important;} /* g+ width -- remove if shares are in the hundreds */
	.twitter-share-button {width: 80px !important;} /* tweeter width */
	.socialite {position: absolute; left: -9999px; top: -9999px; margin-bottom: 0;}
	.socialite-loaded {position: static !important; display: inline-block;}
	

/* Post Footer */
	#full-post-template .tags {margin-bottom: 1.75em;}
	.tags a {text-transform: lowercase;}

	footer.post-footer {width: auto;}
	.author-box .author-img {width: 100px; height: 100px; float: right; margin: 0 0 2em 2em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden;}
	.author-box ul li {}
	.author-box span.my-bloggers {padding-bottom: 1em; display: inline-block;}
	.author-box .author-bio {padding: 0 0 1em 0;}
	.author-box h3.top-posts {margin-bottom: .5em;}
	.author-box .vote-total {white-space: nowrap;}
	.author-box ol.top-posts,
	.author-box ul.author-stats {list-style-type: none; margin-bottom: 1em;}
	.author-box .all-posts {}

/* Comments */

	.full-post .comment {margin-top: 2em; padding: 1.5em 0 0; padding-left: 1em; border-top: 1px dotted #ccc;}

	.full-post .comment figure {float: left; margin-left: -1em; margin-top: -.5em; width: 2.5em; height: 2.5em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden;}
	.comment .author {display: inline-block; margin-right: .5em; margin-left: .75em;}
	.comment time {display: inline-block; padding: 0 0 1.5em;}
	.comment .comment-functions {display: inline-block; padding-top: 1em;}


/* 6. SECONDARY CONTENT (search, category nav, social media sidebar)
***********************************************************/

/* Search */
	
	.sidebar-section #search {/*background: url('/images/ui/search.png') no-repeat right center; background-size: 26px; margin-right: 1.25em; padding-right: 2.65em;*/}
	.sidebar-section #search input {border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
	.sidebar-section #search input[type="text"] {background: none;}

/* Category Nav */

	#category-nav ul.categories {}
	#category-nav .category {clear: both; padding: 1em 1.25em; border-bottom: 1px solid rgba(0,0,0,.1)}
	#category-nav .category-image {float: right; max-width: 130px; height: auto; margin: -1px 0 .5em 1.5em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
	#category-nav:first-child .category-image {margin-top: 0;}
	
/* Social Media Sidebar */

	.fb_iframe_widget {background: #FFF;}


/* 7. FOOTER
***********************************************************/

/* Rich Footer */

	footer .rich-footer {padding: 3em 0 .75em 1.5em;}

	footer .rich-footer h4 {font-size: 1.125em; padding-bottom: 1.25em;}
	footer .rich-footer li {font-size: .9em; padding: 0 0 .75em;}
	footer .rich-footer li a {font-size: .9em;}
	
	#cateogry-nav-secondary .nav-block {margin: -1.5em 1.5em 1em 0; padding: 1.5em;}

	#footer-links .nav-block h4 {margin: 0 1.33333em 0 0;}
	#footer-links .nav-block li {margin: 0 1.5em 0 0;}

	#footer-links .nav-block ul {margin-bottom: 1em; margin-left: 2px;}

/* Copyright */

	#copyright,
	#powered-by {font-size: .9em; clear: both; text-align: center;}

	#copyright {padding: 2.5em 1em .5em;}
	#powered-by {position: relative; padding: .5em 1em 2.5em;}
	#powered-by img {height: auto; left: 4px; max-width: 120px; position: relative; top: 6px;}



/* 8. OTHER PAGES
***********************************************************/

/* Static Page */

	/* static page menu */
	#static-page-menu {padding: 0 2em 2em 2em;}
	#static-page-menu h3 {padding: 2em 0;}
	#static-page-menu ul {border-bottom: 1px solid #ccc; margin: 0; padding: 0;}
	#static-page-menu li {border-top: 1px solid #CCC; padding: 0;}
	#static-page-menu li a {padding: 1em .5em; display: block;}


/* Blogger Profile Page */

	.blogger-page .author-box img {height: auto;}



/* 9. FIXES
***********************************************************/

/* Clear Fix */

	.clearfix:after,
	#content > .inner:after,
	.post-image-wrapper:after,
	#category-nav .category:after,
	.post-meta:after,
	.rich-footer:after {content: "."; display: block; visibility: hidden; clear: both; height: 0;}

	.clearfix,
	#content > .inner ,
	.post-image-wrapper,
	#category-nav .category,
	.post-meta,
	.rich-footer {display: inline-block;}

	.clearfix,
	#content > .inner,
	.post-image-wrapper,
	#category-nav .category,
	.post-meta,
	.rich-footer {display: block;}



/* 10. MEDIA QUERIES
***********************************************************/


/* 600 & below
****************/

@media only screen and (max-width: 600px) {

/* NAVIGATION */

	/* Mobile Off-Canvas */

	.js-ready #nav-main {
		background: #333; 
		height: 100%;
		width: 70%;
		-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
		-moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
		box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
	}

	.js-ready #nav-main .block {
		background: transparent;
	}

	.js-ready #nav-main .nav-close {
		display: block !important;
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
		opacity: 0.7;
	}
  
	.js-ready #nav-main .nav-close:focus, 
	.js-ready #nav .nav-close:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity: 1;
	}

	.js-ready #nav-main {
		left: -70%;
	}
  
	.js-ready #inner-wrap {
		left: 0;
	}

	.js-nav #inner-wrap {
		left: 70%;
	} 

	.csstransforms3d.csstransitions .js-ready #nav-main {
		left: 0;
	
		-webkit-transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	  }
  
	  .csstransforms3d.csstransitions .js-ready #inner-wrap {  /* content itself, without nav toggled */
		left: 0 !important;
	
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	  }

	  .csstransforms3d.csstransitions .js-nav #inner-wrap { /* content itself, nav toggled */
		-webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
		-moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
		-ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
		-o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
		transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
	  }

	  .csstransforms3d.csstransitions .js-ready #nav-main .block {
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
		opacity: 0.7;
		
		-webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
		-webkit-transition-delay: ease, 0s;
		-moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
		-o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
		transition: opacity 300ms 100ms ease, transform 500ms ease;
		
		-webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
		-moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
		-ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
		-o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
		transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
		
		-webkit-transform-origin: 50% 0%;
		-moz-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		-o-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
	  }

	  .csstransforms3d.csstransitions .js-nav #nav-main .block {
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity: 1;
		
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }

}

/* 480 & Above
*******************************/

@media only screen and (min-width: 480px) {

/* HEADER */

	/* logo */
	header hgroup {padding: .5em 0;}

/* FOOTER */
	
	/* structure */
	#cateogry-nav-secondary {width: 100%; float: left;}
	
	/*#footer-links .nav-block {width: 50%; float: left;}*/
	
	#ad-post-summary {}

}


/* Tablets & Above
*******************************/

@media only screen and (min-width: 601px) {

/* STRUCTURE */
 
/* Columns */
 
	/* index & category templates */
	#post-summary-template #primary {width: 100%;}
	#post-summary-template #secondary,
	#post-summary-template #tertiary {width: 50%; float: left;}

	/* full post */
	#full-post-template #primary {width: 100%;}
	#full-post-template #secondary,
	#full-post-template #tertiary {width: 50%; float: left;}

	/* one section */
	.one-section {max-width: 56.25em; margin: 0 auto;} /* 900px */
	.one-section #primary {width: 100%; float: none;}

	footer {width: 100%; clear: both;}

/* Padding / Margin */
	
	/* top and bottom padding, main content area */
	#content > .inner {padding: 2em 0;}

	/* margin between columns */
	.template {margin-left: 1.5em;}

	#form-template {margin-right: 1.5em;}
	#form-template #primary .inner,
	#form-template #secondary .inner {margin: 0 0 1.5em;}

	#primary .inner,
	#secondary .inner {padding: 0; margin: 0 1.5em 1.5em 0;}
	#tertiary .inner {padding: 0; margin: 0 1.5em 1.5em 0;}

	#pre-content {padding: 0 1.5em 2em;}
	
/* HEADER */

	/* structure */
	header {min-height: 0;}
	header hgroup {display: inline-block; padding: .5em 0; margin: 0; height: auto;}
	
	/* logo */
	#logo {height: 54px; max-width: 100% !important; width: auto !important; display: inline-block; margin-top: 0;}
	#logo img {height: 53px; width: auto;}

/* NAVIGATION */	
	
	/* reset off-canvas nav */
	.js-ready #nav-main {background: none; height: auto; width: auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
	.js-ready #nav-main .block {background: transparent;}
	.js-ready #inner-wrap {left: 0;}
	.js-nav #inner-wrap {left: 0;} 
	
	#user-nav {border-top: none;}
	#nav-main ul li a {border-bottom: none;}
	
	#nav-main .user img.ui {opacity: .75;}
	
	h3.nav-label,
	#category-nav-mobile,
	#nav-close-btn,
	#nav-main:target a.nav-close {display: none;}
	
	#nav-main ul li a:hover img {opacity: auto;}
	
	/* tablet & desktop navigation */
	#nav-main {position: aboslute; right: 1.5em; padding: 0; left: auto !important; width: auto !important; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; overflow: visible;}
	#nav-main:not(:target) {z-index: auto; height: auto;}
	
	#nav-main img.widescreen {display: block;}
	#nav-main img.mobile {display: none;}
	
	ul#user-nav {display: block !important;}
	ul#user-nav li {float: left; position: relative;}
	ul#user-nav li a {display: block; background: none; background: rgba(255,255,255,.125); -moz-transition: background .5s ease; -webkit-transition: background .5s ease; transition: background .5s ease; padding: .45em .75em .45em .6em; margin-left: 1em; margin-top: 1.125em; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-top: none;}
	ul#user-nav li a:hover {background: #FFF; background: rgba(255,255,255,.25);}
	
	ul#user-nav li img.ui,
	ul#user-nav li.join img.ui {margin-right: .5em; position: relative; top: 2px; left: 0;}
	
	ul#user-nav .user li img.ui {float: left;}
	
	ul#user-nav li.join {display: none;}
	
	/* logged-in drop-down */
	ul#user-nav li.user > a {display: block; padding: 0 !important; position: relative; margin-top: .95em; background: none;}
	ul#user-nav li.user a {z-index: 999; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important;}
	ul#user-nav li.user img.user-thumb {width: 26px; height: 26px; vertical-align: bottom; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 4px; background: #FFF; margin-top: 3px;}
	ul#user-nav li.user.open img.user-thumb {padding-bottom: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: 0 -2px 2px #000; -webkit-box-shadow: 0 -2px 2px #000; box-shadow: 0 -2px 2px #000; background: #FFF;}
	
	#nav-main ul ul {background: #FFF; position: absolute; left: -9999em; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000; z-index: 888;}
	#nav-main ul ul li {float: none; width: 16em;}
	#nav-main ul ul li a {white-space: nowrap; margin: 0; padding: .5em 1.25em; !important; display: block !important; opacity: .8;}
	#nav-main ul ul li:first-child a {padding-top: 1em;}
	#nav-main ul ul li:last-child a {padding-bottom: 1em;}
	#nav-main ul ul li a:hover {background: #efefef; opacity: 1;}
	
	#nav-main li.open ul {left: auto; right: 0;}
	#nav-main li.open a {background: #FFF; text-decoration: underline;}
	#nav-main li.open ul a {text-decoration: none;}
	
/* PRE CONTENT */
	
		.site-intro-wrapper.active {border-bottom: 1px solid #b6b6b6; box-shadow: none;}
		.site-intro-wrapper.stuck #site-intro {position: fixed; top: 0; width: 100%; box-shadow: 0 0 4px #000; z-index: 200;}
	
		#pre-content {padding-bottom: 2em;}
		#site-intro {margin: 0 -1.5em; margin: 0; padding: 1.75em 0;}
		
		#site-intro .close {right: 1.5em; top: 1.5em;}
		#site-intro h2 {text-align: center; font-size: 1.35em; margin: 0 14% 1.25em;}
		#site-intro h3 {font-size: 1.125em; font-weight: 700;} 
		#site-intro ul li {width: 30%; margin: 0 1.666666667%; float: left; clear: none;}
		#site-intro li.cta {width: 100%; margin: 0;}
		#site-intro a.button {margin: 1em auto 0; max-width: 400px;}
		
	
/* MAIN CONTENT */
	
	/* category column section heading */
	h1.section-title .category-name {display: inline-block; line-height: 1; border-left: 1px solid #CCC; padding-left: .5em; margin-left: .125em;}
	
	/* Articles */
	
	/* article summary */
	.post-image {float: right; max-width: 612px; max-width: 660px;}
	.post-image:after {padding-top: 50%; /* 2:1 ratio */}
	.post-image img {width: 100%;}
	
	.top-posts .gb-vote,
	.full-post .gb-vote {border-width: 6px; position: absolute; width: 72px; height: 72px; bottom: -40px;}
	.top-posts .gb-vote .number,
	.full-post .gb-vote .number
	.top-posts .gb-vote .vote-img,
	.full-post .gb-vote .vote-img {width: 72px; margin-left: -36px;}
	.top-posts .gb-vote .vote-link,
	.full-post .gb-vote .vote-link {width: 72px; height: 72px;}
	
	/* article post meta */	
	.full-post .post-meta,
	.top-posts .post-meta {margin-top: .5em;}
	
	.top-posts .author {display: block; clear: none;}
	.top-posts .post-meta address,
	.full-post .post-meta span.comments {border-left: 1px solid #CCC; padding-left: .7em; margin-left: .7em;}
	
	.full-post .post-meta span.comments {clear: none;}
	
	.sponsored .post-meta address {margin-left: 0 !important; padding-left: 0 !important; border-left: none !important;}
	
	/* comments */
	.full-post .comment {padding-left: 1.5em;}

	.full-post .comment figure {margin-left: -1.5em;}
	.comment .author {margin-left: .75em;}
	
	

/* FOOTER */

	/* Structure */
	#cateogry-nav-secondary {width: 100%; float: left;}
	footer ul.categories  {
		-moz-column-count:2;
		-moz-column-gap:1em;
		-webkit-column-count:2;
		-webkit-column-gap:1em;
		column-count:2;
		column-gap:1em;
	}
	
/* OTHER PAGES */

	/* Blogger */
	.author-box .author-img {}
	.author-box h2 {margin-right: 100px;}
	
}
	

/* iPad Portrait & Above
*******************************/

@media only screen and (min-width: 768px) {

/* STRUCTURE */

	/* Columns, by template */
	
	/* index & category templates */
	#post-summary-template #primary {width: 60%; float: left;}
	#post-summary-template #secondary,
	#post-summary-template #tertiary {width: 40%; float: left;}

	/* blogger template */
	#blogger-template #primary {width: 40%; float: left;}
	#blogger-template #secondary {width: 60%; float: left;}

	/* search template */
	#search-template #primary {width: 60%; float: left;}
	#search-template #secondary {width: 40%; float: left;}

	/* tag template */
	#tag-template #primary {width: 60%; float: left;}
	#tag-template #secondary {width: 40%; float: left;}

}

/* 800 & Above
*******************************/

@media only screen and (min-width: 800px) {
	
/* FOOTER */

	/* structure */
	#cateogry-nav-secondary {width: 66.6666%;}
	
	/*#footer-links .nav-block {width: 33.3333%;}
	#footer-links .nav-block:nth-child(2) {clear: left;}*/

}

/* Desktop & Above
*******************************/

@media only screen and (min-width: 1020px) {
	
/* STRUCTURE */

	/* Columns, by template */	

	/* index & category templates */
	#post-summary-template #primary {width: 66.66666%;}
	#post-summary-template #secondary,
	#post-summary-template #tertiary {width: 33.33333%;}

	/* full post template */
	#full-post-template #primary {width: 66.66666%; float: left;}
	#full-post-template #secondary,
	#full-post-template #tertiary {width: 33.33333%; float: left;}

	/* search template*/
	#search-template #primary {width: 66.66666%; float: left;}
	#search-template #secondary {width: 33.3333%; float: left;}

	/* tag template */
	#tag-template #primary {width: 66.66666%; float: left;}
	#tag-template #secondary {width: 33.3333%; float: left;}		

	/* static page template */
	#static-page-template #primary {width: 66.66666%; float: left;}
	#static-page-template #secondary {width: 33.3333%; float: left;}	

/* NAVIGATION */

	ul#user-nav li.join {display: block;}
	
/* PRE CONTENT */

	#site-intro h2 {font-size: 1.75em; margin-bottom: 1.25em;}
	#site-intro h3 {font-size: 1.25em;}
	#site-intro ul li,
	#site-intro ul li.cta {width: 21%; margin: 0 2%;}
	#site-intro a.button {margin: 0;}
	#site-intro ul li {text-align: left;}
	#site-intro ul li img {float: left; margin-right: 1em; width: 50px; height: 50px; margin-top: -.375em;}

/* MAIN CONTENT */

	/* article summary */
	.post-image-wrapper {background: #f8f8f8;}
	.post-meta address {border-left: 1px solid #CCC; padding-left: .7em; margin-left: .7em; clear: none;}

/* FOOTER */

	#cateogry-nav-secondary {width: 40%;}
	#footer-links .nav-block {width: 20%; float: left;}
	#footer-links .nav-block:nth-child(2) {clear: none;}
	

/* OTHER PAGES */

	/* Static Pages */
	
	/* static page menu */
	#static-page-template #secondary {margin-top: 3.55em;}
	
}


/* Widescreen & above *
*******************************/

@media only screen and (min-width: 1280px) {

/* STRUCTURE */

	/* General */
	header > .inner,
	#content > .inner,
	footer > .inner {max-width: 1700px; margin: 0 auto;}
	
	/* Columns, by template */		

	/* index & category templates */
	#post-summary-template #primary {width: 50%;}
	#post-summary-template #secondary,
	#post-summary-template #tertiary {width: 25%;}
	
	/* full post template */
	#full-post-template #primary {width: 50%;}
	#full-post-template #secondary,
	#full-post-template #tertiary {width: 25%;}
	
	.two-sections {max-width: 80em /* 1280px */; margin: 0 auto !important;}

}

/* Extra super wide & above *
*******************************/

@media only screen and (min-width: 1700px) {
	
/* STRUCTURE */

	/* General */
	header > .inner {max-width: none !important;}
	
	#site-intro {margin-left: 0; margin-right: 0;}
	
	/* Pre-Content */

	.intro-content {max-width: 1700px; margin: 0 auto;}

}