/* @override http://localhost:8888/joannekennedybooks.com/wp-content/themes/JKBooks/css/screen.css */

/* @group Todo */
/*
Style 404 page and create content
Figure out post.partial footers
Condense Post Titles to one line. ???
Style Post.full
	blockquotes
Style logged in comments for the hell of it.
Style Search form for sidebar.
Syle images in article to float left.
*/


/* @end */
body {
	background: black url(../img/background.jpg);
	position: relative;
}
#main-container {
	background: url(../img/main-background.jpg);
	background-repeat: repeat;
	margin:  0 auto;
	overflow: hidden;
	width: 800px;
}
#main-wrapper {}

/* @group Header */

#main-header {
	background: url(../img/main-header.jpg);
	height: 133px;
	width: 800px;
}
#main-header h1 a {
	display: inline-block;
	height:  125px;
	text-indent: -666666px;
	width:  800px;
}
body.category-blog #main-header {}
body.category-news #main-header {}

#main-header h2 {
	visibility: hidden;	
}


/* @end */

/* @group Navigation */
#main-nav {
	background: url(../img/main-nav.jpg);
	height: 67px;
	position: relative;
	width: 800px;
}
#main-nav ul {}
#main-nav ul li {
	float: left;
}
#main-nav ul li a {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	display: inline-block;
	height: 67px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	text-indent: -666666px;
}
#main-nav ul li a:hover {}

#nav-bio a {
	background: url(../img/nav-bio.jpg);
	left: 36px;
	width: 96px;
}
#main-nav ul #nav-bio a:hover {
	background-position: -96px 0px;	
}
#nav-bio.current a {
	background-position: -192px 0px;	
}

#nav-books a {
	background: url(../img/nav-books.jpg);
	left: 163px;
	width: 125px;
}
#main-nav ul #nav-books a:hover {
	background-position: -125px 0px;	
}
#nav-books.current a {
	background-position: -250px 0px;	
}

#nav-blog a {
	background: url(../img/nav-blog.jpg);
	left: 318px;
	width: 101px;
}
#main-nav ul #nav-blog a:hover {
	background-position: -101px 0px;	
}
#nav-blog.current a {
	background-position: -202px 0px;	
}

#nav-news a {
	background: url(../img/nav-news.jpg);
	left: 454px;
	width: 109px;	
}
#main-nav ul #nav-news a:hover {
	background-position: -109px 0px;	
}
#nav-news.current a {
	background-position: -218px 0px;	
}

#main-nav ul #nav-contact a {
	background: url(../img/nav-contact.jpg);
	left: 609px;
	width: 156px;
}
#main-nav ul #nav-contact a:hover {
	background-position: -156px 0px;	
}
#nav-contact.current a {
	background-position: -312px 0px;	
}


/* @end */

/* @group Main */

.main {}
.main#home {}
.main#page {}
.main#category {}
.main#search {}
.main#tag {}
.main#404 {}

.main#new {}

.main#single {}

.section-posts {}

#section-feature {
	display: inline-block;
	width: 800px;	
}
#section-blog {
	float: left;
	width: 400px;
}
#section-news {
	float: right;
	width: 400px;	
}
/* @group Nav */
/* !! Needs Work !! */
.main > nav {
	clear: both;
	float: left;
	padding: 0 10px 10px 10px ;
	width: 780px;
}
.main > nav > span {
	border: 2px dashed #777;
	padding: 5px;
	text-shadow: #111 2px -2px 2px;
}
.main > nav span.previous {
	float: left;	
}
.main > nav span.next {
	float: right;	
}


/* @end */

/* @end */



/* @group Post */

/* @group Post-Partial */

.post.partial {
	float: left;
	margin: 10px 5px;
	padding: 10px;
	position: relative;
	width: 370px;
}
.post.partial > header {
	display: table;
	height: 60px;
	margin-bottom: 5px;
	width: 370px;
}
.post.partial > header h3 {
	display: table-cell;
	vertical-align: middle;	
}
.post.partial > header h3 a {
	text-shadow: #111 2px -2px 2px;
}
.post.partial > header h3 a:hover {}

.post.partial > .post-image {
	background: url(../img/thumbnail-background.jpg);
	display: table;
	float:  left;
	height: 150px;
	margin-right: 10px;
	text-align: center;
	width: 150px;
}
.post.partial > .post-image span.style {
	display: table-cell;
	vertical-align: middle;	
}
.post.partial > .post-image a {}
.post.partial > .post-image a:hover {}
.post.partial > .post-image img {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}

.post.partial > .post-content {
	height: 150px;
	overflow: hidden;
	text-align: left;
}

.post.partial > footer {
	clear: both;
	visibility: hidden;
	position: absolute;
}
.post.partial > footer ul {}

.post.partial > footer ul li {}
.post.partial > footer ul li.meta_time {}
.post.partial > footer ul li.meta_categories {}
.post.partial > footer ul li.meta_tags {}

/* @end */


/* @group Post-Feature */

.post.feature {
	float: left;
	margin: 10px 5px;
	padding: 10px;
	position: relative;
	width: 760px;
}
.post.feature > header {
	margin-bottom: 5px;	
}
.post.feature > header h3 {}
.post.feature > header h3 a {
	text-shadow: #111 2px -2px 2px;	
}
.post.feature > header h3 a:hover {}

.post.feature > .post-image {
	background: url(../img/thumbnail-background.jpg);
	display: table;
	float:  left;
	height: 150px;
	margin-right: 10px;
	text-align: center;
	width: 150px;
}
.post.feature > .post-image span.style {
	display: table-cell;
	vertical-align: middle;	
}
.post.feature > .post-image a {}
.post.feature > .post-image a:hover {}
.v > .post-image img {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}

.post.feature > .post-content {
	overflow: hidden;
	text-align: left;
}

.post.feature > footer {
	clear: both;
	visibility: hidden;
	position: absolute;
}
.post.feature > footer ul {}

.post.feature > footer ul li {}
.post.feature > footer ul li.meta_time {}
.post.feature > footer ul li.meta_categories {}
.post.feature > footer ul li.meta_tags {}

/* @end */

/* @group Post-Full */

.post.full {
	padding: 20px;	
}
.post.full > header {}
.post.full > header h4 {}
.post.full > header h4 a {
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: #111 2px -2px 2px;
}
.post.full > header h4 a:hover {}

.post.full > .post-image {
	background: url(../img/image-background.jpg) left top no-repeat;
	display: inline-block;
	float: left;
	margin: 0 20px 0 0;
	padding: 40px 0 0 0;
	position: relative;
}
.post.full > .post-image span.style {
	background: url(../img/image-background.jpg) no-repeat left bottom;
	display: inline-block;
	padding: 0 0 0 40px;
}
.post.full .post-image img {
	background: url(../img/image-background.jpg) right bottom no-repeat;
	display: inline-block;
	padding: 0 40px 40px 0;
}
.post.full span.style2 {
	background: url(../img/image-background.jpg) right top no-repeat;
	display: inline-block;
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
}

.post.full .post-image a:hover {}
.post.full .post-image img {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.post.full > .post-content {}

.post.full > footer {
	border: 2px dashed #777;
	clear: both;
	float: right;
	margin: 20px 0;
	padding: 20px;
	text-shadow: #111 2px -2px 2px;
	width: 360px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.post.full > footer ul {
	margin: 0;
	padding: 0;
}

.post.full > footer ul li {}
.post.full > footer ul li.meta_time {}
.post.full > footer ul li.meta_categories {}
.post.full > footer ul li.meta_tags {}

/* @group Comments */
#comments {
	background: url(../img/comments-background.jpg);
	background-repeat: repeat-y;
	overflow: hidden;
	width: 800px;
}

/* @group Commentslist */

#comments > #commentslist {
	background: url(../img/commentslist-header.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0 10px;
	padding-top: 21px;	
	float: left;
	width: 380px;
}
#comments > #commentslist > h4 {
	text-align: center;
	text-shadow: #251210 1px -1px 1px;
}
#comments > #commentslist > details {
	display: inline-block;	
}

.comment {
	border: #B18174 2px dashed;
	margin: 5px 0;
	overflow: hidden;
	padding: 10px;
	width: 360px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.comment > cite {
	font-size: 20px;
	float: right;
	width: 280px;
}
.comment > article {
	float: right;
	width: 280px;
}
.comment > footer {
	width: 60px;
}
.comment > .comment-avatar {
	display: inline-block;
	/* margin-right: 20px;
	width: 60px; */
}
.comment .comment-avatar > .avatar {}
.comment > time {
	width: 100px;
}


/* @end */

/* @group Respond */

#comments > #respond {
	background: url(../img/respond-background.jpg);
	background-repeat: no-repeat;
	float: right;
	height: 340px;
	padding: 40px 10px 20px 50px;
	width: 340px;
}

#respond > h4 > a {
	text-shadow: #141F50 1px -1px 1px;	
}	

#respond > #commentform {
	width: 300px;
}

#commentform > label {
	display: inline-block;
	font-size: .9em;
	width: 135px;
}
#commentform > input {
	background: none;
	border: #7283B8 2px dashed;
	margin: 5px 0px;
	width: 140px;
}
#commentform > textarea {
	background: none;
	border: #7283B8 2px dashed;
	clear: both;
	height: 150px;
	width: 280px;
}
#commentform > input#submit {
	margin: 2px 5px 2px 80px;
}


/* @end */
 

/* @end */

/* @end */

/* @end */

/* @group Page */

.page.full {
	padding: 20px;	
}
.page.full > header {}
.page.full > header h4 {}
.page.full > header h4 a {
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: #111 2px -2px 2px;
}
.page.full > header h4 a:hover {}

.page.full > .post-image {
	background: url(../img/image-background.jpg) left top no-repeat;
	display: inline-block;
	float: left;
	margin: 0 20px 0 0;
	padding: 40px 0 0 0;
	position: relative;
}
.page.full > .post-image span.style {
	background: url(../img/image-background.jpg) no-repeat left bottom;
	display: inline-block;
	padding: 0 0 0 40px;
}
.page.full .post-image a {
	background: url(../img/image-background.jpg) right bottom no-repeat;
	display: inline-block;
	padding: 0 40px 40px 0;
}
.page.full span.style2 {
	background: url(../img/image-background.jpg) right top no-repeat;
	display: inline-block;
	height: 40px;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
}

.page.full .post-image a:hover {}
.page.full .post-image img {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.page.full > .post-content {}

.page.full > footer {
	border: 2px dashed #777;
	float: right;
	margin: 20px 0;
	padding: 20px;
	text-shadow: #111 2px -2px 2px;
	width: 360px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.page.full > footer ul {}

.page.full > footer ul li {}
.page.full > footer ul li.meta_time {}
.page.full > footer ul li.meta_categories {}
.page.full > footer ul li.meta_tags {}

/* @group Page-Bio */



/* @end */

/* @group Page-Books */



/* @end */

/* @group Page-Contact */

.page form.contact-form {
	overflow: auto;	
}

.page form.contact-form > p {}

.page form.contact-form > fieldset {
	float: left;
	width: 380px;	
}

.page form.contact-form legend {}

.page form.contact-form label {
	clear: left;
	display: inline-block;
	margin: 15px 0 0 0;
	width: 300px;
}

.page form.contact-form input {
	width: 300px;
}
.page form.contact-form input:focus {}

.page form.contact-form textarea {
	background-color: transparent;
	border: 2px dashed #777;
	color: white;
	width: 300px;	
}
.page form.contact-form textarea:focus {
	background-color: #191919;
}

.page form.contact-form .button {
	background-color: transparent;
	border: 2px dashed #777;
	padding: 5px 10px;
	text-shadow: #111 2px -2px 2px;
	width: auto;
}

/* @end */



/* @end */

/* @group Sidebar */

#main-sidebar {
	background: url(../img/main-footer.jpg);
	background-position: left;
	background-repeat: no-repeat;
	clear: both;
	font-size: .9em;
	height: 168px;
	margin: 0 auto;
	text-align: center;
	width: 800px;
}
#main-sidebar > ul {
	font-size: .9em;
	overflow: hidden;
	padding: 40px 75px 0 100px;
}
#main-sidebar > ul > li {
	color: #542A1D;
	float: left;
	height: 100px;
	margin: 5px;
	overflow: hidden;
	width: 180px;
}
#main-sidebar > ul > li > h5 {
	color: #542A1D;
	text-shadow: #2F1007 1px -1px 1px;
}
#main-sidebar > ul > li a {
	color: #542A1D;
	text-shadow: #884A30 -1px 1px 1px;
}
#main-sidebar > ul > li a:hover {
	text-shadow: #2F1007 1px -1px 1px;
}
#main-sidebar > ul > li > ul > li {
	color: #492C1D;
	float: left;
	margin: 0 5px;	
}

/* @group Sticky Footer */

html, body, #main-container {
	height: 100%;
}
body > #main-container {
	height: auto;
	min-height: 100%;
}
#main-wrapper {
	padding-bottom: 168px; 
}
#main-sidebar {
	clear:both;
	height: 168px; 
	margin-top: -166px; 
	position: relative;
}

/* @end */

/* @end */

/* @group Footer */

#main-footer {
	color: #444;
	height: 10px;
	float: right;
	margin: -20px 10px;
}
#main-footer p {
	color: #aaa;
	text-shadow: #555 0px 0px 2px;	
}

/* @end */