/*****************************************************************/
/* Gobal */
/*****************************************************************/

body {
	background: $backcolor url(../images/body_bg.jpg) fixed;
}
.content, #main-content {
	width: 53.6%;
	margin: 0 auto;
}
.spacer {
	clear: both;
}

/*****************************************************************/
/* Navigation */
/*****************************************************************/
#nav {
	background-color: $purple;
	padding: 1.5em;
	ul, li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	li {
		display: inline;
	}
	a {
		color: lighten($purple, 60%);
		text-decoration: none;
		margin-right: 1.5em;
		&:hover {
			color: $secondary;
		}
	}
}

/*****************************************************************/
/* Header */
/*****************************************************************/
#header {
	padding-top: 1.5em;
	.content {
		background: url(../images/header_bg.png) no-repeat bottom right;
	}
}
/*****************************************************************/
/* Main Content */
/*****************************************************************/
#main-content {
	margin-top: -1.5em;
	padding-bottom: 6em;
}
.post-list, .post-single, #author-bio {
	background-color: $orange;
	color: $white;
	padding: 1.5em;
	word-wrap: break-word;
	h1 {
		margin: 0;
	}
	time, a {
		color: lighten($orange, 30%);
	}
	a:hover {
		color: $purple;
	}
	.cat {
		@extend time;
		margin-bottom: 0em;
	}
	.tag a {
		font-weight: normal;
	}
}
.post-list:nth-child(even), #author-bio {
	background-color: $yellow;
	time, a {
		color: lighten($yellow, 40%);
	}
	a:hover {
		color: $purple;
	}
}
.sticky {
	background-color: $purple;
	color: $white;
	a:hover {
		color: $orange;
	}
	time, a, .cat {
		color: lighten(purple, 70%);
	}
}
pre {
	word-wrap: break-word;
}

/*****************************************************************/
/* Featured Image */
/*****************************************************************/
.wp-post-image {
	float: left;
	margin: 0 1.5em 1.5em 0;
}
.tag-featured-image {
	clear: both;
	footer { clear: both; }
}

/*****************************************************************/
/* Gallery */
/*****************************************************************/
.gallery, #gallery-1 {
	clear: both;
	.gallery-item, dl.gallery-item {
		margin: 0 1.5em 1.5em 0;
		float: left;
		background-color: tranparentize($white, .9);
	}
}
.gallery-columns-3 > .gallery-item {
	width: 25%;
}
.gallery-caption {
	color: $white;
}
.tiled-gallery, .video-player {
	padding-bottom: 1.5em;
}

/*****************************************************************/
/* Chat Format Post */
/*****************************************************************/
.format-chat {
	> p {
		margin: 0 0 .5em 0;
		background-color: darken($orange, 3%);
		background: url(../images/chat_even_bg.jpg);
		padding: .5em;
		border-radius: .5em;
		width: 60%;
		clear: both;
		float: left;
	}
	> p:nth-child(odd) {
		background-color: darken($yellow, 3%);
		background: url(../images/chat_odd_bg.jpg);
		float: right;
	}
	footer {
		clear: both;
	}

	
}

/*****************************************************************/
/* Pagination */
/*****************************************************************/
.post-page .pagination {
	background-color: transparentize($white, .9);
	padding: .75em;
	list-style-type: none;
	margin: 0em;
	margin-top: 1.5em;
	a {
		text-decoration: none;
	}
	li a[rel=next] {
		float: right;
		margin-top: -1.5em;
		&:after {
			content: '\2192';
		}
	}
	li:only-of-type a {
		margin-top: 0em;
	}
	li a[rel=prev] {
		&:before {
			content: '\2190';
		}
	}
	li:only-of-type a[rel=next] {
		float: none;
	}
}
/*****************************************************************/
/* Author Bio */
/*****************************************************************/
#author-bio .avatar {
	float: left;
}
#author-bio div {
/*	float: right;*/
	width: 85%;
	margin-left: 15%;
	margin-top: -1.5em;
}
#author-bio {clear: both;}

/*****************************************************************/
/* Comments */
/*****************************************************************/
#main-article {
	background: url(../images/comments_bg.png) no-repeat 100% 100%;
	padding-bottom: 15em;
}
#comments {
	margin-top: -12em;
	ol, li {
		margin: 0em;
		padding: 0em;
		list-style-type: none;
	}
	ol {
		counter-reset: li;
		margin-bottom: 3em;
	}
	ol > li article header:before {
	    content: counter(li);
	    counter-increment: li;
		float: right;
		margin-right: 1.2%;
		font-size: 4.25em;
		font-family: 'Signika Negative', 'Helvetica Neue', 'Helvetica', Arial, serif;
		margin-top: .2em;
		font-weight: 300;
		color: lighten($yellow, 30%);
	}
	ol > li:nth-child(odd) header:before {
		color: lighten($orange, 20%);
	}
	ol > li .bypostauthor header:before, ol > li .byuser header:before, .byuser time, .bypostauthor time, li:nth-child(odd) .byuser time, li:nth-child(odd) .bypostauthor time {
		color: lighten($purple, 30%);
	}
	li {
		display: block;
		clear: both;
	}
	article {
		background-color: $yellow;
		margin-bottom: -1.5em;
		padding: 1.5em;
		color: $white;
		min-height: 13.5em;
	}
	li:nth-child(odd) article {
		background-color: $orange;
	}
	.bypostauthor, .byuser, li:nth-child(odd) article.byuser {
		background-color: $purple;
	}
	.avatar {
		float: right;
		margin-top: .1em;
		margin-right: 1%;
	}
	article header div, .message {
		width: 86.5%;
	}
	article header {
		@include apply-side-rhythm-border(bottom, 1px);
		margin-bottom: 1.5em;
		border-color: lighten($yellow, 30%);
	}
	li:nth-child(odd) header {
		border-color: lighten($orange, 20%);
	}
	.bypostauthor header, .byuser header, li:nth-child(odd) .bypostauthor header, li:nth-child(odd) .byuser header {
		border-color: lighten($purple, 30%);
	}
	time {
		margin-bottom: 0em;
	}
	li ul {
		width: 95.5%;
		float: right;
		margin-top: 1.5em;
		margin-bottom: 3em;
	}
	li ol ul {
		margin-bottom: 0em;
	}
}

/*****************************************************************/
/* Comment Pagination */
/*****************************************************************/
.comment-page {
	a, a:visited, .current {
		color: $white;
		background-color: $purple;
		text-decoration: none;
		padding: .5em;
	}
	margin-bottom: 1.5em;
	a:hover, .current {
		background-color: $yellow;
	}
}

/*****************************************************************/
/* Post Pagination */
/*****************************************************************/
.page-pagination {
	margin-top: 1.5em;
	a, a:visited {
		color: $white;
		text-decoration: none;
		background-color: $purple;
		padding: .5em;
		&:hover {
			background-color: $yellow;
		}
	}
	a:last-child {
		float: left;
	}
	a:first-child {
		float: right;
	}
	a:only-child {
		float: left;
	}
	clear: both;
}

/*****************************************************************/
/* Footer */
/*****************************************************************/
#middle {
	background: url(../images/footer_bg.png) no-repeat 10% 100%;
}
#footer-top {
	background-color: $purple;
	color: $white;
	padding: 1.5em 0;
	form {
		background: transparent;
	}
}
.widget {
	width: 23.3%;
	float: left;
	margin: 0 4.5%;
	max-height: 18em;
	overflow: scroll;
}
#copyright {
	background: $yellow url(../images/footer_bg.jpg);
	> p {
		padding: 1.5em 0;
	}
}

/*****************************************************************/
/* Widgets (footer) */
/*****************************************************************/
.widget {
	form {
		padding: 0;
	}
}

/*****************************************************************/
/* Responsive */
/*****************************************************************/
@media (max-width: 1000px) {
	.content, #main-content {
		width: 70.5%;
	}
	.widget {
		width: 100%;
		float: none;
		margin: 0em;
	}
	#middle {
		background-size: 50px;
	}
}
@media (max-width: 720px) {
	.content, #main-content {
		width: 87%;
	}
	#header h1 {
		@include adjust-font-size-to(42px);
	}
	#header .content {
		background-size: 50px;
	}
}

/*****************************************************************/
/* Retina Ready */
/*****************************************************************/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    body {
    	background-size: 51px;
    }
	#header {
		background-image: url(../images/header_bg@2x.png);
		background-size: 78px;
	}
	#main-article {
		background-image: url(../images/comments_bg@2x.png);
		background-size: 45px;
	}
	#middle {
		background-image: url(../images/footer_bg@2x.png);
		background-size: 78px;
	}
	#copyright {
		background-size: 29px;
	}
					
}