/* @override http://www.joshhepworth.com/wp-content/themes/myportfolio/style.css */

/*   
Theme Name: My Portfolio
Theme URI: http://www.joshhepworth.com
Description: This theme is a design from scratch for my personal blog with a Flash element
Author: Josh Hepworth
Author URI: http://www.joshhepworth.com
Version: 1.0b
*/

/* GENERAL */
html, body {
	padding: 0;
	margin: 0;
	width: 100%;
}

h1, h2, h3, h4, h5, h6, div, span, p {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div, span, p {
	font-weight: 200;
}
strong {
	font-weight: bold;
}

a {
	color: #f00;
	text-decoration: none;
}

a:hover {
	color: #000;
}

.clearboth {
	clear: both;
}
.alignleft {
	float: left;
	margin: 0 20px 10px 0;
}

/* LAYOUT */

#container {
	padding: 0;
	width: 960px;
	margin: 0 auto;
}

/* HEADER */

#header {
	padding: 30px 0 0 0;
	position: relative;
	width: 940px;
	margin: 0 10px 25px 10px;
}

#title {
	margin: 0;
	padding: 0;
}

#title a {
	color: #000;
	text-transform: uppercase;
	font-weight: 100;
	font-size: 55px;
	width: 600px;
}

#title a .red {
	color: #f00;
	font-weight: 100;
}

#title a:hover {
	color: #f00;
}

#title a:hover .red {
	color: #000;
}

#tagline {
	font-size: 12px;
	color: #555;
	font-weight: normal;
	font-weight: 200;
	margin: 0 0 55px 0;
	padding: 0;
	width: 600px;
}

/* NAVIGATION */

#nav {
	float: right;
	list-style: none;
	list-style-position: inside;
	margin: 20px 0 0 0;
	padding: 0;
}

#nav li {
	float: left;
	display: block;
	height: 27px;
	margin: 0 10px 0 0;
	padding: 0 0 0 17px;
}

#nav li a {
	float: left;
	display: block;
	height: 14px;
	margin: 0;
	padding: 8px 17px 5px 0;
	text-transform: uppercase;
	font-size: 14px;
	color: #000;
	outline: none;
}

#nav li:hover {
	background: #000 top left url(images/nav_lft_blk.gif) no-repeat;
}

#nav li:hover a {
	color: #fff;
	background: top right url(images/nav_rgt_blk.gif) no-repeat;
}

#nav li.current_page_item,
#nav li.current_page_parent {
	background: #f00 top left url(images/nav_lft_red.gif) no-repeat;
}

#nav li.current_page_item a,
#nav li.current_page_parent a {
	color: #fff;
	background: top right url(images/nav_rgt_red.gif) no-repeat;
	cursor: normal;
}

/* CONTENT*/

#content {
	margin: 0 0 20px 0;
	padding: 0;
	width: 960px;
	float: left;
}

/* PAGES */

.page {
	font-size: 12px;
	line-height: 20px;
}
.page h2 {
	margin: 0;
}

/* POSTS */

#posts {
	float: left;
	margin: 0 10px;
	padding: 0;
	width: 620px;
}

.post {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 20px;
}

.posttitle {
	font-weight: normal;
	font-weight: 200;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0;
	padding: 0;
}

.posttitle a {
	margin: 0;
	padding: 0;
}

.postexcerpt {
	margin: 0;
	padding: 0;
}

.postexcerpt p {
	font-size: 13px;
	margin: 5px 0 10px 0;
}

.postreadmore {
	margin: 0 0 12px 0;
	padding: 0;
	position: relative;
	display: block;
	height: 19px;
	width: 75px;
	background: #000 center left url(images/read_lft_blk.gif) no-repeat;
}

.postreadmore a {
	margin: 0;
	padding: 5px 9px 3px 9px;
	position: absolute;
	top: 0;
	right: 0;
	height: 11px;
	line-height: 11px;
	display: block;
	background: center right url(images/read_rgt_blk.gif) no-repeat;
	font-size: 11px;
	color: #fff;
}

.postreadmore:hover {
	background: #f00 center left url(images/read_lft_red.gif) no-repeat;
}

.postreadmore a:hover {
	background: center right url(images/read_rgt_red.gif) no-repeat;	
}

.postmeta {
	background: #ececec top left url(images/meta_lft.gif) no-repeat;
	position: relative;
	height: 11px;
	line-height: 11px;
	padding: 5px 0 3px 9px;
	margin: 0 0 30px 0;
	font-size: 11px;
}

.postmeta-rgt {
	background: top right url(images/meta_rgt.gif) no-repeat;
	height: 19px;
	width: 2px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}

.postdate {
	float: left;
	margin: 0;
	padding: 0 0 0 18px;
	background: top left url(images/calendar_blk.gif) no-repeat;
}

.posttags {
	list-style: none;
	list-style-position: inside;
	margin: 0 0 0 12px;
	padding: 0 0 0 15px;
	float: left;
	background: center left url(images/tag_blk.gif) no-repeat;
}

.posttags li {
	padding: 0 3px 0 0;
	margin: 0;
	display: block;
	float: left;
}

/* COMMENTS */
#comment-divide {
	margin: 30px 0 0 0;
	padding: 0;
	border-top: solid 1px #cfcfcf;
}

h3#comments, #respond h3 {
	font-weight: 200;
	margin-top: 30px;
	text-transform: uppercase;
	color: #f00;
}

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

.comment {
	padding: 15px;
	font-size: 12px;
}

.bypostauthor {
	background: #fee;
}

.avatar {
	float: left;
	margin-right: 10px;
}

.comment.even {
	
}

#commentform p {
	font-size: 12px;
}

.comment-inputs {
	margin: 0;
	padding: 0;
	float: left;
	width: 235px;
	list-style: none inside;
	font-size: 11px;
}
.comment-inputs li {
	display: block;
	margin-bottom: 5px;
}

#commentform input {
	border: 1px solid #bbb;
	padding: 3px 4px;
	outline: none;
}

textarea#comment {
	border: 1px solid #bbb;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 7px 8px;
	font-size: 12px;
	width: 365px;
	height: 100px;
}

input#submit {
	background: #f00;
	padding: 7px 10px;
	color: #fff;
	border: none;
	float: right;
}

/* PORTFOLIO POSTS */

.portfolio .post {
	display: block;
	position: relative;
	width: 300px;
	height: 225px;
	float: left;
	margin-bottom: 15px;
}

.portfolio .post.odd {
	margin-right: 10px;
}

.portfolio .post.even {
	margin-left: 10px;
}

.portfolio .post .image {
	width: 300px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.portfolio .post h2 {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 25px;
	font-size: 13px;
	max-width: 270px;
	padding: 17px 15px 15px 15px;
	background: #000;
	opacity: 0.8;
	-moz-opacity: 0.8;
	text-transform: capitalize;
}

.portfolio .post h2 .published {
	color: red;
	font-size: 11px;
}

.portfolio .post h2 a {
	color: #fff;
	display: block;
	padding: 0;
	margin: 0;
}

.portfolio .post h2 a:hover {
	color: #f00;
}

.postcontent a img {
	outline: none;
	border: none;
}

/* SIDEBAR */

#sidebar {
	float: left;
	margin: 0 10px;
	padding: 0;
	width: 220px;
}

.search {
	display: block;
	width: 220px;
	height: 26px;
	position: relative;
	background: url(images/search.gif);
	padding: 0;
	margin: 0;
	font-family: Arial;
}
.searchinput {
	position: relative;
	top: 3px;
	left: 5px;
	height: 15px;
	width: 155px;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
}
.searchbutton {
	position: absolute;
	top: 1px;
	right: 1px;
	height: 24px;
	width: 59px;
	background: none;
	border: none;
	outline: none;
	color: #000;
	text-transform: uppercase;
	font-size: 11px;
}

.widget {
	margin: 0;
	padding: 0 !important;
}

.widget h3 {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
	font-weight: 200;
	padding: 0 0 0 18px;
	width: 202px;
	margin: 15px 0;
}

.widget h3 a {
	color: #000;
}

.widget h3 a:hover {
	color: #f00;
}

.widget h3.rss {
	background: left center url(images/rss_red.gif) no-repeat;
}

.widget h3.twitter {
	background: left center url(images/twitter_red.gif) no-repeat;
}

.widget h3.friends {
	background: left center url(images/friends_red.gif) no-repeat;
}

ul.twitter {
	list-style: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

ul.twitter li {
	margin: 0 0 15px 0;
	padding: 0 0 0 18px;
	font-size: 12px;
}

div.twitter a {
	font-size: 11px;
}

.friend.widget {
	list-style-position: inside;
	margin: 0;
	padding: 0 0 0 18px;
}

.friend.widget li {
	list-style: none;
	margin: 0;
	padding: 0;
}

li.friend h4 {
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 12px;
}

li.friend h4 a {
	text-transform: lowercase;
	font-size: 12px;
	font-weight: normal;
	font-weight: 200;
}

.friend.rss {
	margin: 0 0 0 18px;
	padding: 0;
	list-style-position: inside;
}

.friend.rss li {
	padding: 0;
	margin: 0 0 10px 0;
}

li.rss.link {
	background: center right url(images/sidelink_blk.gif) no-repeat;
	margin: 0 0 5px 0;
}

li.rss.link:hover {
	background: center right url(images/sidelink_red.gif) no-repeat;
}

li.rss.link a {
	font-size: 12px;
	text-transform: lowercase;
	color: #000;
	display: block;
	padding: 0 15px 0 0;
	margin: 0;
}

li.rss.link a:hover {
	color: #f00;
}

/* TAG LIST */

#taglist {
	float: left;
	margin: 0 10px;
	padding: 0;
	width: 60px;
}

#taglist h3 {
	text-transform: uppercase;
	font-size: 9px;
	font-weight: normal;
	font-weight: 200;
	color: #999;
	margin: 0;
}

#taglist ul {
	list-style: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#taglist ul li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	width: 60px;
}

#taglist ul li a {
	display: block;
	width: 60px;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 9px;
	color: #555;
	text-transform: uppercase;
}

#taglist ul li a:hover {
	color: #f00;
}

/* FOOTER */

#footer {
	background: #000 top left url(images/footer_lft.gif) no-repeat;
	padding: 20px 0 17px 0;
	margin: 0 auto 30px auto;
	width: 940px;
	height: 13px;
	position: relative;
	color: #fff;
	font-size: 13px;
}

#footer-rgt {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 2px;
	height: 50px;
	margin: 0;
	padding: 0;
	background: top right url(images/footer_rgt.gif) no-repeat;
}

#footer span {
	margin: 0;
	padding: 0 20px;
}

#footer #links {
	float: right;
}

#footer a:hover {
	color: #fff;
	border-bottom: 1px dotted;
}