/*
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/

@import "compass";
@import "includes";
@import "reset";
@import "globals";


/* =Canvas
---------------------------------------------- */

body {
	background: #666 url('../images/noise.png') fixed;
}

#page {
	background: #fff;
	border-radius: 0.5rem;
	@include box-shadow( rgba(0, 0, 0, 0.4) 0 0 1rem 0);
	overflow: hidden;
}

#main {
	clear: both;
	overflow: hidden;
	@include box-shadow( rgba(0, 0, 0, 0.1) 0 0 0 0.1rem inset );
}


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

.site-header {
	background: $primary-color;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	@include box-shadow( rgba(0, 0, 0, 0.1) 0 0 2rem 0 inset);
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	hgroup {
		padding: 10px;
		padding: 1rem;
		.site-title {
			font-size: 24px;
			font-size: 2.4rem;
			text-transform: uppercase;
			a {
				color: #d0e0f0;
				@include text-shadow( rgba(0, 0, 0, 0.5) 0 0 0.3rem );
				&:hover {
					text-decoration: none;
				}
			}
		}
		.site-description {
			font-weight: normal;
			font-size: 14px;
			font-size: 1.4rem;
			font-family: $sans-font;
			color: #fff;
			@include text-shadow( rgba(0, 0, 0, 0.2) 0 0 0.1rem );
		}
	}
}

/* When a site logo is specified in the options page, we shall hide the site title and tagline */
.has-logo-image .site-header  {
	.site-title, .site-description {
	height: 0;
	width: 0;
	overflow: hidden;
	}
}


/* =Menu
----------------------------------------------- */

.site-header .site-navigation {
	clear: both;

	/* Micro clearfix hack. See http://nicolasgallagher.com/micro-clearfix-hack/ */
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	} 

	ul {
		clear: both;
		margin: 0;
		padding: 0 10px 10px;
		padding: 0 1rem 1rem;
		list-style: none;
		text-align: center;
		ul {
			margin: 0 1em;
			padding: 0;
		}
	}
	a {
		display: block;
		padding: 3px 10px;
		padding: 0.3rem 1rem;
		border: 1px solid #417196;
		border-radius: 0.3rem;
		font-size: 13px;
		font-size: 1.3rem;
		font-weight: bold;
		text-transform: uppercase;
		background: #27567a;
		color: #c6c8c9;
		&:hover {
			background-color: #417196;
			color: #fff;
			text-decoration: none;
		}
	}
	.menu-toggle {
		@extend a;
		cursor: pointer;
		display: inline-block;
		margin: 10px;
		margin: 1rem;
	}
	&.main-navigation {
		a {
			display: inline-block;
		}
		ul {
			padding: 0;
			text-align: left;
			ul {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 98;
				margin: 0;
				a {
					width: 160px;
					width: 16rem;
				}
				ul {
					left: 100%;
					top: 0;
				}
			}
		}
		li {
			display: inline-block;
			float: left;
			position: relative;
			z-index: 99;
			&:hover > ul {
				display: block;
			}
		}
	}
	&.main-small-navigation .menu {
		display: none;
	}
}


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

#header-image {
	text-align: center;
	position: relative;
	margin: 0;
	padding: 10px;
	padding: 1rem;
	background: #eee;
	line-height: 0;
	@include box-shadow( rgba(0, 0, 0, 0.4) 0 1rem 0.3rem -1rem inset );
}

#header-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 0.3rem;
	@include box-shadow( rgba(0, 0, 0, 0.4) 0 0 0.3rem);
}




/* =Content
----------------------------------------------- */
.site-content {
	margin: 10px;
	margin: 1rem;
}
.hentry {
	padding: 0 0 2.2em;
	margin: 0 0 1.6em;
	border-bottom: 1px solid #e4e4e4;
}

.entry-title {
	font-size: 24px;
	font-size: 2.4rem;
	word-wrap:break-word;
}
.entry-meta {
	clear: both;
	font-size: 11px;
	font-size: 1.1rem;
	color: #888;
}


.featured-image {
	text-align: center;
	line-height: 0;
}

.wp-post-image {
	margin: 0 0 1.5em;
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	border-radius: 0.5rem;
	@include box-shadow( rgba(0, 0, 0, 0.2) 0 0 0.3rem 0.1rem);
	&.attachment-post-thumbnail {
		float: left;
		width: 80px;
		width: 8rem;
		margin: 0.4em 10px 10px 0;
		margin: 0.4em 1rem 1rem 0;
		border-radius: 3px;
		border-radius: 0.3rem;
	}
}


.sticky .poststicky:before {
	content: '. ';
}

.entry-content,
.entry-summary,
.comment-content {
	margin: 1.5em 0 0;
}


.entry-content, .comment-content {
	h1 {
		font-size: 20px;
		font-size: 2rem;
	}
	h2 {
		font-size: 18px;
		font-size: 1.8rem;
	}
	h3 {
		font-size: 16px;
		font-size: 1.6rem;
	}
	h4 {
		font: bold 15px $sans-font;
		font: bold 1.5rem $sans-font;
		text-transform: uppercase;
	}
	h5 {
		font: bold 15px $sans-font;
		font: bold 1.5rem $sans-font;
	}
	h6 {
		font: bold 14px $sans-font;
		font: bold 1.4rem $sans-font;
		font-variant: small-caps;
	}
	h1, h2, h3, h4, h5, h6 {
		margin-bottom: 10px;
		margin-bottom: 1rem;
	}
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.paging-navigation, .post-navigation, #image-navigation, .page-header {
	background: #eee;
	margin: 0 0 1.5em;
	padding: 10px 10px;
	padding: 1rem 1rem;
	border: 1px solid #ddd;
	border-radius: 5px;
	border-radius: 0.5rem;
	font-size: 12px;
	font-size: 1.2rem;
}
.page-header {
	.page-title {
		font-weight: normal;
	}
	span {
		text-decoration: underline;
	}
}

.smaller-font-content {
	.entry-content, .entry-summary, .comment-content {
		font-size: 10px;
		font-size: 1rem;
	}
}
.small-font-content {
	.entry-content, .entry-summary, .comment-content {
		font-size: 12px;
		font-size: 1.2rem;
	}
}
.medium-font-content {
	.entry-content, .entry-summary, .comment-content {
		font-size: 14px;
		font-size: 1.4rem;
	}
}
.large-font-content {
	.entry-content, .entry-summary, .comment-content {
		font-size: 16px;
		font-size: 1.6rem;
	}
}
.larger-font-content {
	.entry-content, .entry-summary, .comment-content {
		font-size: 18px;
		font-size: 1.8rem;
	}
}



/* =Asides
----------------------------------------------- */
.blog .format-aside,
.archive .format-aside {
	.entry-title {
		display: none;
	}
	.entry-content {
		margin: 0;
	}
}

/* =Media
----------------------------------------------- */
.site-header img,
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

.site-header img,
.entry-content img,
img.size-full {
	max-width: 100%;
}

.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.wp-caption, .entry-attachment {
	margin-bottom: 1.5em;
	border: 1px solid #ccc;
	max-width: 100%;
	background: #eee;
	border-radius: 0.5rem;
	@include box-shadow( rgba(0, 0, 0, 0.2) 0 0 0.2rem 0.1rem);
	font-size: 0.875em;
}

.wp-caption img, .entry-attachment img {
	display: block;
	margin: 1.2% auto;
	max-width: 98%;
	border: 1px solid #ccc;
}

.wp-caption-text, .entry-attachment .entry-caption {
	text-align: center;
}

.wp-caption .wp-caption-text, .entry-attachment .entry-caption {
	margin: 0.8075em 20px;
	margin: 0.8075em 2rem;
}

.site-content .gallery {
	margin-bottom: 1.5em !important;

	a img {
		border: none;
		height: auto;
		max-width: 90%;
	}

	dd {
		margin: 0;
	}

	.gallery-caption {
		font-size: 11px;
		font-size: 1.1rem;
	}
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/* =Navigation
----------------------------------------------- */
.site-content .site-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.site-content .nav-previous, .site-content .previous-image {
	float: left;
	width: 50%;
}

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

/* =Comments
----------------------------------------------- */

.comments-title {
	margin-bottom: 1.6em;
}

ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.children {
	list-style: none;
	margin-left: 20px;
	margin-left: 2rem;
}

.comments-area {
	article {
		background: #fafafa;
		margin: 10px 0;
		margin: 1rem 0;
		border: 1px solid #eee;
		border-radius: 0.5rem;
		padding: 10px;
		padding: 1rem;
		position: relative;
	}
	.pingback {
		@extend article;
		p {
			margin-bottom: 0;
		}
	}
	.bypostauthor article {
		border-color: darken(#eee, 20%);
	}
}

.avatar {
	border: 1px solid #ccc;
	border-radius: 3px;
	border-radius: 0.3rem;
	@include single-box-shadow( rgba(0, 0, 0, 0.4) , 0rem, 0rem, 0.5rem, 0 );
}


cite.fn {
	font-weight: bold;
	font-style: normal;
}
cite.fn, .comment-meta {
	position: absolute;
	top: 10px;
	top: 1rem;
	left: 63px;
}
.comment-meta {
	top: 34px;
	top: 3.4rem;
}
.comment-meta, .reply, .comment-notes, .form-allowed-tags, .comment-subscription-form {
	font-size: 12px;
	font-size: 1.2rem;
}

#reply-title small {
	font-family: $sans-font;
	font-weight: normal;
}

.comment-form-author, .comment-form-email, .comment-form-url {
	position: relative;
	input {
		position: absolute;
		left: 4em;
		max-width: 75%;
	}
}


/* = Sidebars & Widgets
----------------------------------------------- */
.sidebar {
	padding: 10px 10px 0;
	padding: 1rem 1rem 0;
	background: #eee;
	margin: 0;
	overflow: hidden;
}

.widget-title {
	font-size: 1.2em;
}
.widget {
	margin: 0 0 10px;
	margin: 0 0 1rem;
	font-size: 14px;
	font-size: 1.4rem;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		ul {
			margin-left: 20px;
			margin-left: 2rem;
		}
	}
	li:before {
		content: "\203A \0020";
	}
}

.smaller-font-sidebar {
	.widget {
		font-size: 10px;
		font-size: 1rem;
	}
}
.small-font-sidebar {
	.widget {
		font-size: 12px;
		font-size: 1.2rem;
	}
}
.medium-font-sidebar {
	.widget {
		font-size: 14px;
		font-size: 1.4rem;
	}
}
.large-font-sidebar {
	.widget {
		font-size: 16px;
		font-size: 1.6rem;
	}
}
.larger-font-sidebar {
	.widget {
		font-size: 18px;
		font-size: 1.8rem;
	}
}



/* Search widget */
#searchsubmit {
	display: none;
}

/* =Footer
---------------------------------------------- */

.site-footer {
	clear: both;
	padding: 10px;
	padding: 1rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	background:#27567a;
	color: #fff;
	font-family: sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
	a {
		color: #d0e0f0;
		&:hover {
			color: #fff;
		}
	}
}


/* =Layout
---------------------------------------------- */

body {
	padding: 10px;
	padding: 1rem;
}

#page {
	margin: 0 auto;
}

/* Setting the maximum page width so that the content width doen't exceed 720px */

.no-sidebar #page {
	max-width: 770px; /* 20 + 730 +20 */
	max-width: 77rem;
}

.one-sidebar-right, .one-sidebar-left {
	&.narrow-sidebar {
		#page {
			max-width: 970px; /* ( 20 + 730 + 20 ) + ( 20 + 160 + 20 ) */
			max-width: 97rem;
		}
	}
	&.medium-sidebar {
		#page {
			max-width: 1070px; /* ( 20 + 730 + 20 ) + ( 20 + 260 + 20 ) */
			max-width: 107rem;
		}
	}
	&.wide-sidebar {
		#page {
			max-width: 1110px; /* ( 20 + 730 + 20 ) + ( 20 + 300 + 20 ) */
			max-width: 111rem;
		}
	}
}

.two-sidebars {
	&.narrow-sidebar {
		#page {
			max-width: 1170px; /* ( 20 + 160 + 20 ) + ( 20 + 730 + 20 ) + ( 20 + 160 + 20 ) */
			max-width: 117rem;
		}
	}
	&.medium-sidebar {
		#page {
			max-width: 1370px; /* ( 20 + 260 + 20 ) + ( 20 + 730 + 20 ) + ( 20 + 260 + 20 ) */
			max-width: 137rem;
		}
	}
	&.wide-sidebar {
		#page {
			max-width: 1450px; /* ( 20 + 300 + 20 ) + ( 20 + 730 + 20 ) + ( 20 + 300 + 20 ) */
			max-width: 145rem;
		}
	}
}


#main {
	clear: both;
}


/* =Media queries
------------------------------------------------ */

@-ms-viewport { width: device-width; } /* One for Windows 8 */

/* Things get a little spaced out at viewport widths approximately > 640px */
@media screen and (min-width: 41em) { 
	body {
		padding: 20px;
		padding: 2rem;
	}

	.site-header {
		text-align: left;
		hgroup {
			padding: 20px;
			padding: 2rem;
		}
	}

	#header-image {
		padding: 20px;
		padding: 2rem;
	}

	.sidebar {
		padding: 20px 20px 0;
		padding: 2rem 2rem 0;
	}

	.widget {
		margin: 0 0 20px;
		margin: 0 0 2rem;
	}

	.site-content {
		margin: 20px;
		margin: 2rem;
	}
	.paging-navigation, .post-navigation, #image-navigation, .page-header {
		background: #eee;
		padding: 10px 20px;
		padding: 1rem 2rem;
	}

	.wp-post-image.attachment-post-thumbnail {
		width:150px;
	}

	.comments-area article, .pingback {
		margin: 20px 0;
		margin: 2rem 0;
		padding: 20px;
		padding: 2rem;
	}

	cite.fn, .comment-meta {
		top: 20px;
		top: 2rem;
		left: 73px;
	}
	time.pubdate, .comment-meta {
		top: 44px;
		top: 4.4rem;
	}
}

/* Defining breakpoints. We make sure the content width doesn't get > 720px */

@media screen and (min-width: 48.125em) { /* ~770px */

	.narrow-sidebar {
		@include two-cols(16rem);
	}

	.medium-sidebar {
		@include two-cols(26rem);
	}

	.wide-sidebar {
		@include two-cols(30rem);
	}

}


@media screen and (min-width: 60.625em) { /* ~970px */
	
	.narrow-sidebar {
		@include three-cols(16rem);
	}

}


@media screen and (min-width: 66.875em) { /* ~ 1070px */

	.medium-sidebar {
		@include three-cols(26rem);
	}

}


@media screen and (min-width: 69.375em) { /* ~ 1110px */

	.wide-sidebar {
		@include three-cols(30rem)
	}

}


/* =Color Schemes
------------------------------------------------ */

@import "brown";
@import "green";
@import "dark";