/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Header
:: Page Name 1
:: Page Name 2
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700|Open+Sans:800);
@import "compass";


/* Basic Variables
-------------------------------------------- */
$padding: 50px;
$npadding: -$padding;

$post-padding: 20px;

$radius: 2px;
$shadow-primary: 0px 1px 7px rgba(0,0,0,0.2);
$box-style-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
$sidebar-bottom-shadow: inset 0 -140px 70px -70px #fff;

$body-bg: #eee;
$content-bg: #fff;
$border-color: #eee;
$sidebar-bg: #f9f9f9;

$logo-bg: #555;
$nav-bg: darken($logo-bg, 7%);
$nav-drop-bg: $logo-bg;
$nav-color: #ccc;
$nav-hover-color: #eee;
$logo-color: #fff;

$color: #666;
$line-height: 1.7;
$heading-color: #777;

$img-radius:3px;
$img-shadow:0 1px 4px rgba(0,0,0,0.2);


/* Mixins
-------------------------------------------- */

@mixin container-style {
	@include border-radius($radius);
	@include box-shadow($shadow-primary);
	background:$content-bg;
}
@mixin primary-font { font-family:"Droid Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
@mixin secondary-font { font-family:"Droid Serif", Georgia, serif; }
@mixin tertiary-font { font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

@mixin img-radius { @include border-radius($img-radius); }
@mixin img-shadow { @include box-shadow($img-shadow); }

@mixin box-style($padding) {
	position:relative;
	margin-left:-$padding;
	margin-right:-$padding;
	padding:40px $padding;
	background:#f6f6f6;
	color:#777;
	@include box-shadow($img-shadow);
}
@mixin dark-box-style($padding) {
	@include box-style($padding);
	background:#444;
	color:#eee;
}


/* General
-------------------------------------------- */

body {
	background:$body-bg;
	color:$color;
}
body, div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td { font-size:13px; }
p { line-height:$line-height; }
body, h2, h3, h4, h5, h6 { @include primary-font; }
h1, h2, h3, h4, h5, h6 {
	margin-top:30px;
	font-weight:800;
	color:$heading-color;
}
h1, h2, h3 { @include secondary-font; }
h6 { @include tertiary-font; }
h1, h2, h3, h4, h5, h6 { margin-top:24px; }
h1 {
	font-size: 32px;
	letter-spacing:-3px;
	line-height: 36px;
}
h2 {
	font-size: 28px;
	letter-spacing: -2px;
	line-height: 32px;
}
h3 {
	font-size: 24px;
	letter-spacing: -2px;
	line-height: 28px;
}
h4 {
	font-size: 20px;
	letter-spacing: -1px;
	line-height: 24px;
}
h5 {
	font-size: 16px;
	letter-spacing: -1px;
	line-height: 18px;
	font-weight: 700;
}
h6 {
	font-size: 13px;
	letter-spacing: 0;
	line-height: 17px;
	font-weight: 700;
}

ul, ol { margin-left:20px; }

a {
	border-bottom:1px solid #eee;
	color:#888;
	@include transition(all .2s linear); }
a:hover {
	border-bottom-color:#ccc;
	color:#000;
}

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


/* Primary
-------------------------------------------- */

$header-margin:40px;

.row, .wrapper { width:1020px; }

.wrapper {
	position:static;
	padding:0 15px;
	min-width:320px;
}

#header, #container { margin:0 auto; }
#header, #container, #content { position:relative; }
#container {
	margin-top:$header-margin;
	z-index:2;
	@include container-style;
	@include border-radius($radius $radius 0 0);
}
#content {
	@include box-shadow(7px 3px 7px -7px rgba(0,0,0,0.15));
	padding:$padding;
	margin-bottom:5px;
}
#secondary {
	padding:0;
	.inner-sidebar {
		position:relative;
		z-index:2;
		margin:0;
		@include border-radius(0 $radius $radius 0);
		@include box-shadow(inset 7px 0 7px -7px rgba(0,0,0,0.15), $sidebar-bottom-shadow);
		background:#f9f9f9;
		padding:$padding $padding 120px;
	}
}
#container.left-sidebar {
	#content {
		float:right;
		@include box-shadow(-7px 3px 7px -7px rgba(0,0,0,0.15));
	}
	#secondary .inner-sidebar {
		@include border-radius($radius 0 0 $radius);
		@include box-shadow(inset -7px 0 7px -7px rgba(0,0,0,0.15), $sidebar-bottom-shadow);
	}
}
#container.full-width #content { @include box-shadow(none); }

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

#header {
	margin-top:0;
	position:relative;
	z-index:5;
	nav { float:left; }
	.left-line, .logo, nav .nav, nav.mobile-nav, nav .nav .flyout {
		float:left;
		@include container-style;
	}
	.left-line, nav .nav, nav.mobile-nav {
		background:$nav-bg;
		height:60px;
		margin-top:20px;
	}
	.left-line {
		margin-right:-15px;
		position:absolute;
		width:100%;
		right:100%;
	}
	.logo {
		background:$logo-bg;
		position:relative;
		z-index:10;
		border-top:25px solid lighten($logo-bg, 15px%);
		padding:15px 30px;
		margin:-5px -15px 0;
		min-height:90px;
		.inner-logo {
			margin:0;
			font-size:30px;
			line-height:50px;
		}
		a {
			font-weight:400;
			border-bottom:0;
			color:$logo-color;
		}
	}
	/* Primary Navigation */
	nav .nav {
		padding:0 10px 0 25px;
		@include secondary-font;
		li {
			border:0;
			background:none;
			@include box-shadow(none);
			a {
				z-index:2;
				border:0;
				box-shadow:none;
				background:none !important;
				color:$nav-color;
				height:60px;
				line-height:60px;
				padding:0 17px !important;
				font-size:13px;
				@include transition(all .2s linear);
				.drop-indicator {
					float:right;
					height:60px;
					line-height:56px;
					padding-top:4px;
					padding-left:5px;
				}
			}
			a:after { display:none !important; }
			a.flyout-toggle { background:none; padding:20px; }
			.flyout {
				width:220px;
				border:0;
				background:$nav-drop-bg;
				padding:5px 15px !important;
				li a {
					height:auto;
					line-height:15px;
					padding:12px 0 !important;
					border-top:1px solid #666;
					border-top-color:rgba(255,255,255,0.15);
					.drop-indicator {
						float:right;
						height:auto;
						line-height:1;
						padding:1px 0;
						width:auto;
					}
				}
				li a.flyout-toggle { padding:20px !important; border:0; }
				> li:first-child > a:first-child { border-top:0; }
			}
		}
		li:hover > a, li.current-menu-item > a, li.current-menu-ancestor > a {
			color:$nav-hover-color;
		}
		> li > a { float:left; }
		> li > .flyout { top:56px; }
		> li > .flyout .flyout { top:-4px; }
		> li:before {
			z-index:1;
			left:-2px;
			float:left;
			position:absolute;
			content:"/";
			line-height:60px;
			color:#888;
			font-size:11px;
		}
		> li:after {
			position:absolute;
			left:24%;
			top:40px;
			content:" ";
			font-size:0;
			width:55%;
			@include border-radius(5px);
		}
		> li:hover:after, li.current-menu-item:after, li.current-menu-ancestor:after {
			border-bottom:2px solid #777;
			border-bottom-color:rgba(255,255,255,0.5);
			@include box-shadow(0 0px 5px rgba(0,0,0,0.1), 0 -1px 0 rgba(0,0,0,0.25));
		}
		> li:first-child:before { display:none; }
	}
	/* Mobile Naviation */
	nav.mobile-nav {
		.mobile-menu {
			position:static;
			z-index:2;
			border:0;
			background:none;
			@include box-shadow(none);
			color:$nav-color;
			height:60px;
			line-height:60px;
			padding:0 20px 0 35px;
			font-size:16px;
			@include secondary-font;
			font-weight:400;
			span {
				font-size:14px;
				padding-right:2px;
				position:relative;
				top:0px;
			}
			ul.nav {
				cursor:default;
				z-index:20;
				@include box-sizing(border-box);
				padding:10px 20px;
				margin:0;
				height:auto;
				float:none;
				width:100%;
				border:0;
				position:absolute;
				top:77px !important;
				left:0;
				z-index:10;
				@include container-style;
				background:#444;
				li {
					width:100%;
					a {
						height:auto;
						float:none;
						line-height:40px;
						padding:0 !important;
						border-top:1px solid #666;
						.drop-indicator {
							height:40px;
							line-height:36px;
						}
					}
				}
				li:first-child a { border-top:0; }
				> li:before, > li:after { display:none; }
				.flyout {
					float:none;
					top:0;
					padding:5px 20px 5px 20px !important;
					width:auto !important;
					margin:-3px -10px 10px -10px;
					@include box-shadow(none);
					background:rgba(255,255,255,0.06);
				}
			}
		}
		.mobile-menu:after { display:none; }
		.mobile-menu:hover { color:#fff; }
	}
}

/* With Slider */
.has-slider {
	.header-wrapper {
		position:absolute;
		width:100%;
	}
	> .camera_wrap {
		@include container-style;
		@include box-sizing(content-box);
		min-height:165px !important;
		margin-bottom:0 !important;
		.camera_pag { position:relative; top:-5px; left:-10px; }
		.camera_caption > div { padding:20px; }
	}
	> .camera_clear { margin:0; }
	#container { margin-top:-15px; }
}


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

/* Table */
table th, table td, td.label {
	background:none;
	padding:10px;
	position:static;
	bottom:0;
	color:inherit;
	display:table-cell;
	line-height:18px;
	font-size:13px;
	font-weight:inherit;
	text-align:inherit;
	vertical-align:top;
}
table th {
	font-weight:800;
	padding:5px 10px;
}

/* Media */
.entry-content img, .comment-content img, .widget img, .author-avatar img, img.wp-post-image {
	@include img-shadow;
	@include img-radius;
}
.attachment a {border-bottom:0; }
img.wp-smiley, .rsswidget img { @include box-shadow(none); }

.wp-caption {
	background:#fff;
	margin-bottom:20px;
	max-width: 100%;
	img {
		display:block;
		margin-bottom:7px;
		width:100%;
	}
}
.wp-caption-text, .wp-caption-text p {
	@include secondary-font;
	line-height:1.3;
	font-size:13px;
	font-weight:400;
	display:inline;
}

/* Alignment */
.alignleft, .alignright { display: inline; }
.alignleft { float: left; margin:5px 25px 15px 0; }
.alignright { float: right; margin:5px 0 15px 25px; }
.aligncenter { clear: both; display: block; margin:5px auto 15px; }

.entry-title {
	position:relative;
	@include primary-font;
	margin:0 0 $post-padding;
	padding:0 30px 10px 0;
	font-weight:700;
	font-size:24px;
	line-height:24px;
	letter-spacing:-2px;
	border-bottom:1px solid $border-color;
	span {
		padding:0 0 0 10px;
		position:absolute;
		top:-3px; right:0;
		letter-spacing:0;
		color:#c0c0c0;
		font-size:28px;
	}
	a, a:visited {
		border-bottom:0;
		color:#777;
	}
	a:hover { color:#222; }
}

.entry-meta {
	font-size:13px;
	line-height:24px;
	margin:20px 0 60px;
	clear: both;
}
.meta-icon {
	font-size:14px;
	position:relative;
	top:1px; color:#9c9c9c;
	border-bottom:0 !important;
}
.meta-icon.spacer {
	font-size:10px;
	margin:0 11px;
	color:#ccc;
}

.entry-image {
	position:relative;
	a { border-bottom:0; }
	img {
		display:block;
		@include border-radius(0);
		@include box-shadow(none);
		margin:0 auto;
	}
}
.flex-video, .entry-image {
	background:#444;
	@include img-shadow;
}

article.post, article.attachment { margin: 0 0 60px; }

.byline { display: none; }
.single .byline, .group-blog .byline { display: inline; }

.type-attachment .entry-title {
	border-bottom:0;
	margin-bottom:0;
	font-size:22px;
	font-weight:400;
}

.no-title {
	.entry-title { display:none; }
	.chat-transcript, .entry-image { margin-top:0; }
}

/* Full Width Content */
.entry-image, .format-video .flex-video, .chat-transcript, .no-title.has-featured-image .chat-transcript, .gallery {
	margin:-$post-padding+-1px $npadding $post-padding+1px;
}
.chat-transcript, .no-title.has-featured-image .chat-transcript { margin-bottom:0; }
.format-aside .entry-content { @include box-style($padding); }
.chat-transcript, .gallery, .format-quote blockquote { @include dark-box-style($padding); }

/* Post Formats ------------------------ */

/* Asides */
.format-aside .entry-content {
	border-left:30px solid #f0f0f0;
	@include box-shadow(none);
	h3.aside-title {
		font-size:17px;
		line-height:17px;
		@include primary-font;
		letter-spacing:-1px;
		font-weight:700;
		margin:0 0 10px;
	}
	h3.aside-title a {
		color:#666;
		border-bottom:0;
	}
	.infinite-sign {
		@include secondary-font;
		position:absolute;
		margin-top:-3px; padding:0 5px;
		line-height:1;
		font-size:23px;
		border-bottom:0;
	}
	p { margin:0; }
}

/* Quote */
.format-quote blockquote {
	padding:40px $padding+10px;
	border:0;
	p { position:relative;
		z-index:2;
		margin:0;
		color:#ddd;
		letter-spacing:-1px;
		font-size:24px;
		line-height:34px;
		@include secondary-font;
	}
	cite {
		position:relative;
		margin-top:14px; top:-6px;
		text-align:right; 
		color:#cecece;
		@include primary-font;
		font-style:normal;
		font-weight:800;
		font-size:16px;
		line-height:16px;
	}
	cite:before { color:#666; }
	cite a {
		color:#999;
		border-bottom:0;
	}
	.quote-icon {
		position:absolute;
		z-index:1;
		font-size:30px;
		color:#666;
	}
	.icon-quote-left {
		top:40px;
		left:10px;
	}
	.icon-quote-right {
		bottom:40px;
		right:10px;
	}
}

/* Image */
.format-image .entry-content h3.image-title {
	font-size:17px;
	line-height:17px;
	@include primary-font;
	letter-spacing:-1px;
	font-weight:700;
	span {
		color:#c0c0c0;
		font-size:15px;
		position:relative;
		top:1px;
		margin-left:8px;
	}
}
/* Link */
.format-link .entry-content h3.link-title {
	font-weight:400;
	letter-spacing:-1px;
	margin:0 0 30px;
	span {
		margin-left:10px;
		font-size:26px;
		color:#c0c0c0;
		position:relative;
		top:3px;
	}
}

/* Chat */
.chat-transcript {
	padding:10px 0;
	.chat-row {
		margin:0 !important;
		padding:12px $padding;
	}
	.chat-row p { margin:0; }
	.chat-row:nth-child(even) { background:#333; }
	.chat-author cite {
		font-weight:800;
		font-style:normal;
		@include primary-font;
		border-bottom:2px solid #777;
	}
	.chat-speaker-1 cite { border-bottom-color:red; }
	.chat-speaker-2 cite { border-bottom-color:magenta; }
	.chat-speaker-3 cite { border-bottom-color:green; }
	.chat-speaker-4 cite { border-bottom-color:orange; }
	.chat-speaker-5 cite { border-bottom-color:yellow; }
	.chat-text {
		padding:0 0 0 20px;
		@include secondary-font;
	}
	.chat-author { padding:0; }
}

/* Status */
.format-status .entry-content {
	p { font-size:18px; }
	.status-author { color:#222; }
	.status-author:after { content: "\0020 \2014 \0020"; }
	.status-content {
		@include secondary-font;
		border-bottom:2px solid #eee;
		display:inline;
	}
}

/* Gallery */
.gallery {
	padding:16px;
	background:#444;
	.block-grid {
		margin:-1px;
		li {
			padding:8px;
			a { float:left; border-bottom:0; }
			img { display:block; }
		}
	}
}

/* Comments */
.comments-title {
	@include tertiary-font;
	font-weight:800;
	font-size:24px;
	line-height:24px;
	letter-spacing:-1px;
	border-bottom:1px solid #eee; margin:0 0 25px;
}

#comments {
	.children {
		list-style:none;
		margin:0;
		li.comment:first-child { margin-top:0; }
		article.comment { padding-top:10px; }
	}
	.commentlist {
		list-style:none;
		margin:0;
		> li:first-child > article.comment, > li:first-child { margin-top:0; }
		.children { margin-left:55px; }
	}
	article.comment {
		margin-top:40px;
		position:relative;
	}
	li.pingback{
		margin:40px 0 0;
		padding-left:10px;
		border-left:1px solid #eee;
		p { margin:0; }
		a.url {
			font-weight:800;
			margin:0 5px;
		}
	}

	.avatar { float:left; }
	.comment-author { line-height:20px; }
	.comment-meta {
		border-bottom:1px solid #f5f5f5;
		line-height:18px;
		.comment-reply {
			float:right;
			font-weight:800;
		}
		a { border-bottom:0; }
	}
	cite.fn {
		font-style:normal;
		font-size:14px;
		font-weight:800;
	}
	time {
		font-size:12px;
		font-weight:800;
		a { color:#999; }
	}
	.comment-content {
		margin-left:55px;
		padding-top:10px;
	}
	.comment-edit-link { font-size:11px; border-bottom:0; }
	article.comment header { padding-left:55px; }
}

/* Commment Form */
#reply-title {
	@include tertiary-font;
	font-weight:800;
	font-size:20px;
	line-height:20px;
	letter-spacing:-1px;
	border-bottom:1px solid #eee;
	margin:0 0 15px;
	a {
		border-bottom:0;
		font-size:80%;
	}
	small {
		margin-left:5px;
		font-size:100%;
	}
}
#respond p { margin:0; }
#commentform { margin-bottom:0; }
.form-allowed-tags, .comment-notes { display:none; }


/* Widgets ------------------------------ */
.widget-title {
	@include primary-font;
	font-size:18px;
	line-height:18px;
	letter-spacing:-1px;
	border-bottom:1px solid #eee;
	margin-top:0;
}

/* Navigation */
.site-navigation {
	margin:0 $npadding !important;
	padding:10px 0 0;
	div {
		position:relative;
		max-width:50%;
		float:right;
		margin:0;
		padding-left:10px;
		padding-right:$padding;
	}
	div a {
		@include tertiary-font;
		display:block;
		padding-right:10px;
		line-height:16px;
		font-weight:800;
		font-size:13px;
		color:#888;
		border-bottom:2px solid #eee;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	a:hover {
		color:#111;
		border-bottom:2px solid #999;
	}
	div.nav-previous {
		float:left;
		padding-left:$padding;
		padding-right:10px;
	}
	div.nav-previous a {
		text-align:right;
		padding-right:0;
		padding-left:10px;
	}
	div .meta-nav {
		position:absolute;
		right:$padding;
		font-size:15px;
	}
	div.nav-previous .meta-nav {
		right:auto;
		left:$padding;
	}
}

.page-links {
	@include tertiary-font;
	color:#777;
	clear:both;
	margin:25px 0;
	text-align:left;
	display:block; 
	letter-spacing:3px;
	font-size:18px;
	font-weight:800;
	a { color:#999; }
	a:hover { color:#222; }
	span {
		letter-spacing:-1px;
		font-weight:400;
	}
}

/* Dividers */
#content {
	hr {
		margin:40px $npadding;
		border-color:#eee;
	}
	.divider {
		@include rotate(-1deg);
		display:block;
		margin:70px $npadding 60px;
		padding:0 $padding;
		border-bottom:2px dashed #eee;
		height:2px;
	}
	article:nth-child(odd) .divider { @include rotate(1deg); }
}

/* Footer
------------------------------------ */
.site-footer {
	.site-info {
		color:#c0c0c0;
		position:relative;
		z-index:1;
		@include container-style;
		@include border-radius(0 0 $radius $radius);
		background:#555;
		padding:20px;
		margin-bottom:40px;
	}
	a {
		color:#ccc;
		border-bottom:2px solid #777;
	}
	a:hover {
		color:#eee;
		border-bottom-color:#999;
	}
}


/* Responsiveness
-------------------------------------------- */

/* Vars */
$res-padding: 30px;
$res-npadding: -$res-padding;

@media screen and (min-width: 1220px) {
	.row { width:1170px; }
	.wrapper { width:1200px; }

	#content { width:840px; }
	#secondary { width:330px; }
	#container.full-width #content { width:100%; }
}

@mixin less-effects {
	#content { @include box-shadow(none); }
	#secondary .inner-sidebar {
		@include border-radius(0 0 $radius $radius);
		@include box-shadow(inset 0 1px 0 rgba(255,255,255,0.2));
	}
}

@mixin less-padding {
	#content, #secondary .inner-sidebar { padding:$res-padding; }

	.entry-image, .format-video .flex-video, .chat-transcript, .no-title.has-featured-image .chat-transcript, .gallery {
		margin:-$post-padding+-1px $res-npadding $post-padding+1px;
	}
	.chat-transcript, .no-title.has-featured-image .chat-transcript { margin-bottom:0; }

	.format-aside .entry-content {
		@include box-style($res-padding);
		@include box-shadow(none);
	}
	.format-quote blockquote, .chat-transcript { @include dark-box-style($res-padding); }
	.format-aside .entry-content { border-left-width:25px; }

	.chat-transcript {
		padding:5px 0;
		.chat-row {
			padding:10px $res-padding;
		}
	}

	.format-quote blockquote {
		padding:40px $padding;
		border:0;
	}

	#content .divider, #content hr {
		margin-left:$res-npadding;
		margin-right:$res-npadding;
	}

	.site-navigation {
		margin:0 $res-npadding !important;
		div { padding-right:$res-padding; }
		div.nav-previous { padding-left:$res-padding;  }
		div .meta-nav { right:$res-padding; }
		div.nav-previous .meta-nav { left:$res-padding; }
	}
}

@media screen and (max-width: 767px) {
	@include less-effects;

	.chat-transcript {
		padding:5px 0;
		.chat-author, .chat-text { padding:0; }
	}
	.has-slider #container { margin-top:-5px; }
	.has-slider > .camera_wrap .camera_caption > div { padding:15px 20px 10px; }
}
@media screen and (max-width: 480px) { @include less-padding; }
@media screen and (min-width: 768px) and (max-width: 900px) { @include less-padding; }

/* Tooltip */
.has-tip { border-bottom:0 !important; }
a.has-tip { cursor:pointer; }
.tooltipster-default { margin-top: 0; margin-left: -1px; }
body.admin-bar .tooltipster-default { margin-top:-28px; }


/* IE8 Stuff */
.lt-ie9 {
	.gallery .block-grid img { width:100%; }
	#container { border:1px solid #ddd; }
	#content.eight { border-right:1px solid #ddd; }
	#secondary.four { border-bottom:1px solid #ddd; }
}



.sticky, .gallery-caption, .wp-caption-text, .bypostauthor { /* Empty Classes */ }