/*

Theme Name: hwt

Theme URI: http://johnnashryack.com/blog

Description: This is the custom blog theme for JohnnaShryack.com

Author: Richard C. Shryack

Author URI: http://cstldesign.com

Version: 1.0

*/



/* Reset */



html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, address, code, img, 

small, strong, dl, dt, dd, ol, ul, li,

fieldset, form, label {

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	font-size: 100%;

	vertical-align: baseline;

	background: transparent;

}

body {

	line-height: 1.5;

        font-family: helvetica, arial, sans-serif;

}

ol, ul {

	list-style: none;

}



/* End Reset */



h2 {

 font-size: 27px;

}



p {

 font-size: 14px;

 margin-bottom: 10px;

}



a {

 text-decoration: none;

 color: #4e4e4e;

 font-size: 14px;

}



a:hover {

 text-decoration: underline;

}



/* Main Styles */



body {

 background: #fff url(img/bg-slice.jpg) repeat-x;

}



#footer {

	background-color: #71604f;

	height: 300px;

}



#wrap {

 width: 960px;

 margin: auto;

}



#header {

	position: relative;

}



#header h1 {

 text-indent: -9999px;

 float: left;

 position: relative;

}



#header h1 a {

 display: block;

}



/* Navigation */



#header ul {

 overflow: hidden;

}



#header ul li {

 float: left;

 padding-left: 40px;

 margin-right: 40px;

 margin-top: 20px;

}



#header ul li a { 

 color: #f2f2f2;

 font-size: 15px;

 position: relative;

 padding: 10px;

 top: -7px;

}



#header ul li a:hover {

 text-decoration: none;
 
 background-color: #2d2620;

 padding: 10px;

 color: #fff;

 font-weight: normal;

}



#header ul li#home {

 background: url(img/nav/home.png) no-repeat;

 width: 31px;

 height: 34px;

}



#header ul li.page-item-2 {

 background: url(img/nav/emblem.png) no-repeat;

 width: 37px;

 height: 36px;

}



#header ul li.page-item-8 {

 background: url(img/nav/contact.png) no-repeat;

 width: 35px;

 height: 31px;

}



/* Search Box */



input {

 background: #dfdfdf;

 border: 1px solid #c3c3c3;

 color: #666;

 padding: 3px;

 margin-top: 5px;

}



input:focus, input:hover {

 background: #ededed;

 color: #4e4e4e;

}



#header #search {

 width: 270px;

 height: 66px;

 position: absolute;

 right: 0;

 top: 5px;

}



/* targets rss icon */

#header #search img {

 position: absolute;

 right: 0;

 top: 0;

 margin-top: 3px;

}



#header #search input#s {

 width: 130px;

 margin-left: 34px;

}



#header #rss {

 float: right;

 margin: 0; padding: 0;

}



#rss img {

 width: 30px;

 padding-right: 1px;

 margin-top: 13px;

}



#header p#slogan {

 font-size: 2em;

 margin: 28px 0 41px 0;

 float: left;

 background: url(img/slogan.png) no-repeat;

 width: 525px;

 height: 80px;

 text-indent: -9999px;

 margin-left: 40px;

}



/* Main Content */



#main {

 clear: both;

 overflow: hidden;

}



#main #primary {

 float: left;

 width: 630px;

}



#main #sidebar {

 float: right;

 width: 300px;

}



#main #primary .post-item {

 background: #fafafa url(img/postBG.jpg) repeat-x;

 margin-bottom: 28px;

 border: 1px solid white;

 border-right: 1px solid #dfdfdf;

 border-bottom: 1px solid #dfdfdf;

 -moz-border-radius-topright: 5px;

 -webkit-border-radius-top-right: 5px;

 position: relative;

 overflow: hidden;

 padding-right: 30px;

 padding-left: 30px;

 padding-bottom: 20px;

}



.post-item img {

	float: left;

	margin: 30px 20px 30px 0px;

	padding: 4px;

	border: 1px solid #a8a8a8;

	-moz-box-shadow: 1px 2px 3px black;

       -webkit-box-shadow: 1 2px 3px black;

        box-shadow: 1px 2px 3px black;

}



#primary h2 {

	letter-spacing: 1px;

	font-weight: normal;

	padding-right: .5em;

	line-height: 32px;

	margin-bottom: .2em;

	color: #91C3E0;

}



.post-item h2 {

	padding-top: 30px;

	margin-bottom: 0px;

}



.post-item h2 a {

	font-size: 27px;

	color: #91C3E0;

	font-weight: normal;

}



.post-item p.meta {

	background: #947751;

	color: white;

	font-size: 11px;

	font-style: normal;

	padding: 4px;

	margin-top: 15px;

	margin-left: 230px;

	margin-bottom: 1.6em;

	width: 170px;

	min-width: 170px;

	height: 15px;

	line-height: 15px;

	text-align: center;

	border: 1px solid #a4a4a4 ;	

}



.post-item p {

	color: #7e7e7e;

	font-style: italic;

	margin-bottom: 1.2em;

	margin-left: 230px;

	font-size: .8em;

}



.single .post-item p {

	margin-left: 0;

}



/* More Link */



a.more-link {

	background: #4F7B94;

	padding: 6px;

	color: #fff;

	border: 1px solid #a4a4a4;

	font-size: .9em;

	height: 15px;

	line-height: 15px;

	width: 70px;

	min-width: 70px;

	text-align: center;
	
}



div.numComments {

	background-image: url(img/commentIcon.png);

	background-image: no-repeat;

	height: 38px;

	width: 43px;

	line-height: 38px;

	position: absolute;

	right: 15px;

	top: 13px;

	text-align: center;

}



/* Next and Previous Buttons */



#morePrev a {

	color: white;

	font-size: 12px;

	line-height: 12px;

	font-style: italic;

	border: 1px solid white;

	float: right;;

	margin-top: 5px;

	padding: 8px;

	background-image: url(img/nextPrevButton.jpg);

	background-image: no-repeat;

	margin-bottom: 20px;

	-moz-box-shadow: 1px 1px 2px black;

   	-webkit-box-shadow: 1px 1px 2px black;

   	 box-shadow: 1px 1px 2px black;

}



/* Sidebar */



.widget {

	background: #fafafa url(img/postBG.jpg) repeat-x;

	margin-bottom: 28px;

	margin-top: 28px;

	overflow: hidden;

	border: 1px solid white;;

	border-right: 1px solid #dfdfdf;

 	border-bottom: 1px solid #dfdfdf;

	-moz-border-radius-topright: 5px;

 	-webkit-border-radius-top-right: 5px;

	padding: 8%;


}



.widget h2 {

	color: white;

	margin: 3% 0;

	font-size: 16px;

	font-weight: normal;

	padding: 8px 0px 5px 8px;

	background-color: #4F7B94;

	border: 1px solid white;

	border-right: 1px solid #dfdfdf;

 	border-bottom: 1px solid #dfdfdf;
	
}



#widget ul li {

	padding: 3px 0px 3px 0px;

	line-height: 22px;

	border-bottom: 1px solid white;

	border-top: 1px solid #ececec;

}



#widget a {

	font-size: 12px;

}



#widget ul li:first-child {

	border-top: none;

}



#widget ul li:last-child {

	border-bottom: none;

}



#widget ul li a {

	font-size: 12px;

}



/* Single Posts */



body.single div.post-item p {

	font-style: normal;

}



.single div.post-item ul {

	margin: 1em 0;

	color: #7e7e7e;

}



.single .post-item ul li {

	padding-left: 1em;

	margin-left: 2em;

	list-style: disc;

	line-height: 2em;

}



.single .post-item p.meta {

	margin-left: 230px;

}



/* Page Content */



#page_content {

 background: #fafafa url(img/postBG.jpg) repeat-x;

 margin-bottom: 28px;

 border: 1px solid white;

 border-right: 1px solid #dfdfdf;

 border-bottom: 1px solid #dfdfdf;

 -moz-border-radius-topright: 5px;

 -webkit-border-radius-top-right: 5px;

 position: relative;

 overflow: hidden;

 padding-right: 40px;

 padding-left: 30px;

 padding-bottom: 20px;

}



#page_content h2 a {

	color: #91C3E0;

	font-size: 27px;

	letter-spacing: 1px;

	font-weight: normal;

	padding-right: .5em;

	line-height: 32px;

	margin-bottom: .2em;

}



#page_content h2 {

	margin: 1em 0;

	letter-spacing: 1px;

	font-weight: normal;

	padding-right: .5em;

	line-height: 32px;

	margin-bottom: .2em;

	font-size: 27px;

}



#page_content h3 {

	color: #91C3E0;

	margin: 1em 0;

	font-size: 24px;

	letter-spacing: 1px;

	font-weight: normal;

	padding-right: .5em;

	line-height: 32px;

	margin-bottom: .2em;

}



#page_content img {

	float: left;

	margin: 0px 20px 30px 0px;

	padding: 4px;

	border: 1px solid #a8a8a8;

}



#page_content a {

	color: #947751;

	text-decoration: none;

}



#page_content a:hover {

	color: #203947;

	text-decoration: underline;

}





/* Comments Template */



#comments_template {

	margin-top: 2em;

	background: #ededed;

	border: 1px solid white;

	border-right: 1px solid #dfdfdf;

	border-bottom: 1px solid #dfdfdf;

	clear: both;

	margin-bottom: 28px;

	overflow: hidden;

	padding-right: 40px;

	padding-left: 30px;

	-moz-border-radius-topright: 5px;

	-webkit-border-top-right-radius: 5px;

	position: relative;

}



#comments_template input {

	background: white;

	margin-right: 10px;

}



#comments_template li {

	clear: left;

	border-bottom: 1px solid #d3d3d3;

	border-top: 1px solid white;

	padding: 2em 0;

	overflow: hidden;

}



#comments_template li:first-child {

	border-top: none;

}



#comments_template li:last-child {

	border-bottom: none;

}



#comments_template .avatar {

	float: left;

	margin-right: 25px;

	background: #afafaf;

	border: 1px solid white;

	border-right: none;

	border-bottom: none;

	padding: 4px;

}



.main_comment {

	background: white;

	margin-left: 133px;

	padding: 15px;

	position: relative;

}



.main_comment span.arrow {

	width: 0;

	height: 0;

	line-height: 0;

	border-bottom: 25px solid #ededed;

	border-right: 20px solid white;

	position: absolute;

	top: 10px;

	left: -20px;

}



/* Post Styles */



.single div.tutorial_image {

	background: #e3e3e3;

	text-align: center;

	border: 1px solid white;

	padding: 20px;

	margin: 1em 0;

}



.tutorial_image img {

	float: none;

	max-width: 600px;

}



/* FOOTER */

#footer {
	background-color: #71604f;
	height: 375px;
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
}
#footer-wrap {
	width: 960px;
	margin: auto;	
}

/* FOOTER LEFT COLUMN */

#footer-columnL {
	float: left;
	width: 130px;
	color: #FFF;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
}

#footer-columnL h5 {
	font-weight: normal;
	color: #91C3E0;
	font-size: 21px;
	margin-bottom: 10px;
}

#footer-columnL ul li a {
	color: #f2f2f2;
	text-decoration: none;
}

#footer-columnL ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

/* FOOTER COLUMN L1 */

#footer-columnL1 {
	float: left;
	width: 125px;
	padding: 30px;
	color: #FFF;
}

#footer-columnL1 h5 {
	font-weight: normal;
	color: #91C3E0;
	font-size: 21px;
	margin-bottom: 10px;
}

#footer-columnL1 ul li a {
	color: #f2f2f2;
	text-decoration: none;
}

#footer-columnL1 ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

/* FOOTER MIDDLE COLUMN */

#footer-columnM {
	float: left;
	width: 125px;
	padding: 30px;
}

#footer-columnM h5 {
	font-weight: normal;
	color: #91C3E0;
	font-size: 21px;
	margin-bottom: 10px;
}

#footer-columnM ul li a {
	color: #f2f2f2;
	text-decoration: none;
}

#footer-columnM ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

/* FOOTER COLUMN RIGHT*/

#footer-columnR {
	float: left;
	width: 125px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 0px;
}

#footer-columnR h5 {
	font-weight: normal;
	color: #91C3E0;
	font-size: 21px;
	margin-bottom: 10px;
}

#footer-columnR ul li a {
	color: #f2f2f2;
	text-decoration: none;
}

#footer-columnR ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

/* FOOTER COLUMN FAR RIGHT */


#footer-columnFarRight {
	float: left;
	width: 275px;
	margin-top: 30px;
}
#footer-columnFarRight a {
	color: #FFF;
	text-decoration: none;
}

#footer-columnFarRight a:hover {
	text-decoration: underline;
}

#footer h5 {
	font-weight: normal;
	color: #91C3E0;
	font-size: 21px;
	margin-bottom: 10px;
}