/*
Theme Name: Oh!
Theme URI: http://www.kevinohara.com
Description: WordPress template for <a href="http://www.kevinohara.com" target="_blank">kevinohara.com</a> built from <a href="http://elliotjaystocks.com" target="_blank">Elliot Jay Stocks</a> Starkers theme.
Version: 1
Author: Kevin O'Hara
Author URI: http://www.kevinohara.com
Tags: oh, gray, black, white, orange, big image background, starkers
*/

/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
/* h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } */
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
h1, h2, h3, h5, h5, h6 { font-weight:bold } /*Kevin added this one and removed the typography.css file */



/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */



/* BEGIN TYPOGRAPHY */
/* ----------------------------------------- */

html, body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #000;
	line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.3em;
	letter-spacing: -.04em;
	font-family: Calibri, Arial, Helvetica, sans-serif;
}

h1, h2 {
	color: #FF6600;
}	

h3, h4, h5, h6 {
	color: #666;
	letter-spacing: -.035em;
}

a, a:visited {
	color: #FF6600;
	text-decoration: none;
	font-weight: bold;
	padding: 1px;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

::-moz-selection {
	background-color: #FF6600;
	color: white;
}

::selection {
	background-color: #FF6600;
	color: white;
}

/* BEGIN OH! LAYOUT */
/* ----------------------------------------- */

html {
	height: 100%;
	background: #FFF url(images/html_bg.jpg) repeat;
}

body {
	height: 100%;
	background: #FFF url(images/body_bg.jpg) repeat-x;
	min-width: 960px;
}

#background {
	background: no-repeat center top;
	min-height: 100%;
	height: auto;
	margin-bottom: -240px;
}
.searchTerms {
	font-size: 140%;
	font-weight: bold;
	font-style: italic;
	color: #666; 
}

#background.About {
	background-image: url(images/about_bg.jpg);
}

#background.Work {
	background-image: url(images/portfolio_bg.jpg);
}

#background.Resume {
	background-image: url(images/resume_bg.jpg);
}

#background.Contact {
	background-image: url(images/contact_bg.jpg);
}

#background.blog {
	background-image: url(images/blog_bg.jpg);
}

#background.basic {
	background-image: url(images/basic_bg.jpg);
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#wrapper .container {
	width: 588px;
	margin-left: 40px;
	margin-bottom: 40px;
	float: left;
	background: #FFF url(images/content_bg.jpg) repeat-x;
	border: 1px solid #C9C9C9;
	clear: both;
}

#wrapper .post {
	margin-bottom: 20px;
	padding: 15px 30px 0 30px;
}

.post p {
	margin-bottom: .6em;
}

#wrapper .comments {
	margin-bottom: 20px;
	padding: 15px 30px 0 30px;
}

#wrapper .contents p{
}

.post_title {
	border-bottom: 1px solid #C9C9C9;
}

.post p {
	line-height: 1.8em;
}

.container .post {
	overflow: hidden;
}

.post_metadata {
	font-size: 85%;
	color: #666; 
	padding: 0 0 5px 8px;
	border-bottom: 1px solid #E1E1E1;
	overflow: auto;
}

.post_metadata img {
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	margin-right: 8px;
	padding: 1px;
	float: left;
}

.post .search_results {	
	margin-top: 40px;
}

.algorithm {
	margin: 8px 0; 
	border: 1px solid #C9C9C9;
	padding:2px;
}

.container h2.recent {
	height: 18px;
	display: block;
	padding: 2px;
	background: url(images/home_recent.png) no-repeat;
	text-indent: -9999px;	
	border-bottom: 1px solid #C9C9C9;
}

.container h2.portfolio_recent {
	height: 18px;
	display: block;
	padding: 2px;
	background: url(images/home_portfolio_recent.png) no-repeat;
	text-indent: -9999px;	
	border-bottom: 1px solid #C9C9C9;
}

.container h2.twitter_feed {
	height: 18px;
	display: block;
	padding: 2px;
	background: url(images/home_twitter_feed.png) no-repeat;
	text-indent: -9999px;	
	border-bottom: 1px solid #C9C9C9;
}

.container .home_thumb {
	background-color: #FFF;
	border: 1px solid;
	border-color: #C9C9C9;
	margin-right: 11px;
	padding: 2px;
}

.container .home_thumb:hover {
	border-color: #999;
}

.container .post_thumb {
	background-color: #FFF;
	border: 1px solid;
	border-color: #C9C9C9;
	margin: 6px 20px 10px -1px;
	padding: 2px;
	float: left;
}


.container h2 {
	font-size: 3em;
	margin-bottom: .2em;
}

.container h2 a {
	display: block;
}

.container h2 a:hover {
	color: #FFF;
	background-color: #FF6600;
	text-decoration: none;
}

.container h3 {
	font-size: 1.8em;
	margin: 1em 0 .2em;
}

.container h3 a {
	display: block;
}

.container h3 a:hover {
	color: #FFF;
	background-color: #FF6600;
	text-decoration: none;
}

.container .post .postImage {
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	padding: 1px;
	float: left;
	margin: 5px 20px 8px 0;
	clear: both;
}

.container .post .postImage:hover {
	border-color: #999;
}

.container .post .portfolioImage {
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	padding: 1px;
	float: left;
	margin: 5px 20px 8px 0;
}

.container .post h3 {
	clear: both;
}

.container ol {
	margin-left: 20px;
}

.container ol li {
	list-style: decimal;

}	

.more-link {
	margin: 2em 0 0 0;
	padding: 0;
}

.more-link a {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	letter-spacing: .04em;
	margin: 0;
	padding: 0.5em 0.8em;
	color: #666;
	background: #FFF url(images/content_bg.jpg) repeat-x;
	border: 1px solid #C9C9C9;
}

.more-link a:hover {
	text-decoration: none;
	background: #EEE url(images/sidebar_bg.jpg) repeat-x;
}

.btn {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	letter-spacing: .04em;
	margin: 0;
	padding: 0.5em 0.8em;
	color: #666;
	background: #FFF url(images/content_bg.jpg) repeat-x;
	border: 1px solid #C9C9C9;
}

.btn:hover {
	text-decoration: none;
	background: #EEE url(images/sidebar_bg.jpg) repeat-x;
}

.button {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	letter-spacing: .04em;
	margin: 0;
	padding: 0.5em 0.8em;
	color: #666;
	background: #FFF url(images/content_bg.jpg) repeat-x;
	border: 1px solid #C9C9C9;
}

.button:hover {
	text-decoration: none;
	background: #EEE url(images/sidebar_bg.jpg) repeat-x;
}

.postNav {
	overflow: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	border-top: 1px dotted #C9C9C9;
}

.sociable {
	margin-top: 20px;
	border-top: 1px dotted #C9C9C9;
}

.sociable .sociable_tagline h3 {
	padding: 5px 0 8px;
}

.comments form {
	margin-top: 8px;
	padding: 0 14px;
}

.comments textarea {
	width: 100%;
	min-height: 120px;
	margin: 10px 0;
	padding: 5px;
}

.comments input {
	padding: 3px;
}

.comments p {
	padding: 8px 0 0;
}

.comments .post li img {
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	padding: 1px;
}

.comments .post {
	border: 1px solid #C9C9C9;
	background: #FFF url(images/content_bg.jpg) repeat-x;
	overflow: auto;
}

.comments .post:hover {
	background: #F2F2F2 none;
}

.comments .metadata a{
	font-size: 80%;
	color: #666;
}

.comments h3 {
	font-size: 1.5em;
	margin-bottom: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.comments h4 {
	font-size: 1.5em;
	margin-bottom: -8px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#header {
	height: 120px;
	position: relative;
	overflow: hidden;
}

#header a.logo { 
	width: 213px;
	height: 23px;
	margin: 30px 0 0 8px;
	background: url(images/kevin_ohara_dot_com.png) no-repeat;
	display: block;
	text-indent: -9999px;
}

#header a.tagline {
	width: 186px;
	height: 17px;
	margin: 5px 0 0 10px;
	background: url(images/kevin_ohara_tagline.png) no-repeat;
	text-indent: -9999px;
	display: block
}

#header a.btnContact {
	width: 61px;
	height: 16px;
	left: 810px;
	top: 96px;
	padding: 0;
	background: url(images/btn_contact.png) no-repeat;
	text-indent: -9999px;
	position: absolute;
	display: block
}

#header a.btnContact:hover {
	border-bottom: 3px solid #FF6600;
}

#header a.btnRSS {
	width: 22px;
	height: 22px;
	left: 929px;
	top: 16px;
	padding: 0;
	background: url(images/btn_rss_small.png) no-repeat;
	text-indent: -9999px;
	position: absolute;
	display: block;
}

#nav {
	height: 45px;
	margin: 100px 0 20px;
	padding: 0 30px;
}

#nav ul {
	list-style: none;
}

#nav li {
	display: block;
	padding: 0;
	float: left;
}

#nav li a {
	height: 45px;
	line-height: 45px;
	display: block;
	text-indent: -9999px;
	position: relative;
}

#nav li.about 	 {
	width: 84px;
	background: url(images/btn_about.jpg) no-repeat;
}

#nav li.work {
	width: 76px;
	background: url(images/btn_work.jpg) no-repeat;
}

#nav li.resume {
	width: 92px;
	background: url(images/btn_resume.jpg) no-repeat;
}

#nav li.blog {
	width: 105px;
	background: url(images/btn_blog.jpg) no-repeat;
}

#nav li:hover {
	background-position: 0 -90px;
	border-bottom: 4px solid #FF6600;
}

#nav li.current_page_item {
	background-position: 0 -45px;
	border-bottom: 4px solid #FF6600;
}

#nav li.current_page_item:hover {
	background-position: 0 -135px;
	border-bottom: 4px solid #FF9751;
}

#nav li.current_page_ancestor {
	background-position: 0 -45px;
	border-bottom: 4px solid #FF6600;
}

#nav li.current_page_ancestor:hover {
	background-position: 0 -135px;
	border-bottom: 4px solid #FF9751;
}


#sidebar {
	overflow: hidden;
}

#sidebar ul{
	width: 248px;
	float: right;
	margin-right: 30px;
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #C9C9C9;
	background: #EEE url(images/sidebar_bg.jpg) repeat-x;
}

#sidebar ul.sidebarTags {
	width: 275px;
	float: right;
	margin-right: 30px;
	padding: 0 0 0 5px;
	border: none;
	background: none;
	text-align: justify;
}

#sidebar ul.sidebarIcons {
	width: 275px;
	float: right;
	margin-right: 30px;
	padding: 0 0 0 5px;
	border: none;
	background: none;
}	

#sidebar ul.sidebarIcons li a {
	display: block;
	color: #666;
}

#sidebar ul.sidebarIcons li a:hover {
	color: #333;
}

#sidebar ul li a.icon {
	padding-left: 24px;
	display: block;
	padding: 5px 0 5px 24px;
	border-top: 1px solid #FFF;
	border-bottom: 1px dotted #C9C9C9;
}

#sidebar ul li a.flickr {
	background: url(images/sidebar_flickr_icon.png) no-repeat;
}

#sidebar ul li a.wordpress {
	background: url(images/sidebar_wp_icon.png) no-repeat;
}

#sidebar ul li a.rss {
	background: url(images/sidebar_rss_icon.png) no-repeat;
}

#sidebar ul li a.twitter {
	background: url(images/sidebar_twitter_icon.png) no-repeat;
}

#sidebar ul li a.linkedin{
	background: url(images/sidebar_linkedin_icon.png) no-repeat;
}

#sidebar ul li a.email {
	background: url(images/sidebar_email_icon.png) no-repeat;
}

#sidebar ul ul {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

#sidebar ul ul li {
	padding: 0;
}

#sidebar ul ul li a {
	display: block;
	padding: 5px 0 5px 20px;
	color: #666;
	border-top: 1px solid #FFF;
	border-bottom: 1px dotted #C9C9C9;
}

#sidebar ul ul li a:hover {
	background: url(images/sidebar_bg.jpg) repeat-x;
	color: #333;
	text-decoration: none;
	border-top: 1px solid #C9C9C9;
	padding-left: 22px;
}

#sidebar h2.recent {
	height: 18px;
	display: block;
	padding: 2px;
	background: url(images/sidebar_recent.png) no-repeat;
	text-indent: -9999px;	
	border-bottom: 1px solid #C9C9C9;
}

#sidebar h2.popular {
	height: 18px;
	display: block;
	padding: 2px;
	margin: 20px 0 0;
	background: url(images/sidebar_popular.png) no-repeat;
	text-indent: -9999px;
	border-bottom: 1px solid #C9C9C9;
}

#sidebar h2.author_pic {
	height: 18px;
	display: block;
	padding: 2px;
	margin-bottom: 4px;
	background: url(images/sidebar_ohara_title.png) no-repeat;
	text-indent: -9999px;
	border-bottom: 1px solid #C9C9C9;
}

#sidebar input {
	padding: 3px;
}

#sidebar img {
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	margin: 6px 0 0;
	padding: 2px;
}

.push {
	height: 240px;
}

#footer {
	height: 240px;
	font-size: 90%;
	background: url(images/footer_bg.jpg) repeat-x;
	overflow: hidden;
}

#footer .container {
	width: 960px;
	height: 240px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(images/footer2_bg.jpg) no-repeat;
	overflow: hidden;
}

#footer h3.footerAbout {
	width: 401px;
	height: 160px;
	margin: 17px 0 0 8px;
	background: url(images/kevin_ohara_is.png) no-repeat;
	text-indent: -9999px;
	float: left;
}
#footer ul {
	color: #C9C9C9;
	margin-top: 18px;
	padding: 0 10px 0 10px;
	line-height: 2.5em;
	float: right;
}

#footer li.contactInformation {
	width: 150px;
	height: 18px;
	display: block;
	background: url(images/contact_information.png) no-repeat;
	text-indent: -9999px;
}

#footer li.onThisSite {
	width: 88px;
	height: 18px;
	display: block;
	background: url(images/on_this_site.png) no-repeat;
	text-indent: -9999px;
}

#footer li.icon {
	padding-left: 24px;
}	

#footer li.phone {
	background: url(images/footer_phone.png) no-repeat;
}

#footer li.email {
	background: url(images/footer_email.png) no-repeat;
}

#footer li.address {
	background: url(images/footer_address.png) no-repeat;
}

#footer li.contactform {
	background: url(images/footer_contactform.png) no-repeat;
}

#footer li.about {
	background: url(images/footer_about.png) no-repeat;
}

#footer li.portfolio {
	background: url(images/footer_portfolio.png) no-repeat;
}

#footer li.resume {
	background: url(images/footer_resume.png) no-repeat;
}

#footer li.blog {
	background: url(images/footer_blog.png) no-repeat;
}

#footer a {
	color: #C9C9C9;
}

#footer a:hover {
	color: #FFF;
}

body div.formcontainer{
	font-family: Arial, Helvetica, sans-serif;
	clear: both;
	overflow: hidden;
	width: 100%
}

body div.formcontainer span.required {
	color: #FF6600;
}

body div.formcontainer p.error,
body div.formcontainer p.important,
body div.formcontainer p.information,
body div.formcontainer p.success {
	margin: 10px 0 0;
	padding: 5px 0 0;
	border-top: 1px solid #C9C9C9;
}

body div.formcontainer p.error {
	background: url('images/error.png') no-repeat 12px 50%;
	padding-left: 35px;
	font-weight: bold;
	font-style: italic;
}

body div.formcontainer p.important {
	background: url('images/important.png') no-repeat 12px 50%;
	padding-left: 35px;
	font-weight: bold;
	font-style: italic;
}

body div.formcontainer p.information {
	font-style: italic;
}

body div.formcontainer p.success {
	background: url('images/success.png') no-repeat 12px 50%;
	padding-left: 35px;
	font-weight: bold;
	font-style: italic;
}

body div.formcontainer form.contact-form {
	clear: both;
	float: none;
	width: 100%;
}

body div.formcontainer form.contact-form fieldset {
	margin: 12px 0;
}

body div.formcontainer form.contact-form fieldset legend {
	color: #333;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: -.01em;
	margin-bottom: 8px;
}

body div.formcontainer form.contact-form fieldset div.form-label {
	display: block;
	float:none;
	line-height:150%;
	color: #666;
	font-weight: bold;
	margin-left: 10px;
	padding:0;
	text-align:left;
	width:100%;
}

body div.formcontainer form.contact-form fieldset div.form-label label,
body div.formcontainer form.contact-form fieldset div.form-option label {
	cursor: pointer;
	line-height:100%;
}

body div.formcontainer form.contact-form fieldset div.form-input,
body div.formcontainer form.contact-form fieldset div.form-textarea {
	display: block;
	float:none;
	margin: 2px 0 12px 0;
	width:100%;
}

body div.formcontainer form.contact-form fieldset div.form-input input,
body div.formcontainer form.contact-form fieldset div.form-textarea textarea {
	margin-left: 10px;
	padding: 10px;
	width: 496px;
	color: #AAA;
	border: 1px solid #AAA;
}

body div.formcontainer form.contact-form fieldset div.form-textarea textarea {
	overflow: auto;
}

body div.formcontainer form.contact-form fieldset div.form-input input:focus,
body div.formcontainer form.contact-form fieldset div.form-textarea textarea:focus {
	border: 1px solid #FF6600;
	color: #333;
}

body div.formcontainer form.contact-form fieldset div.form-input input.error {
}

body div.formcontainer form.contact-form fieldset div.form-input input.optional {
	margin-bottom: 0.2em;
}

body div.formcontainer form.contact-form fieldset div.form-option,
body div.formcontainer form.contact-form fieldset div.form-submit {
	display: block;
	float: none;
	margin: 1em 0 0 10px;
	width: 100%;
}

body div.formcontainer form.contact-form fieldset div.form-submit input {
	cursor: pointer;
}

.previewImg {
	float: left;
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	margin: 25px 20px 0 0;
	padding: 2px;
}
	
.previewImg:hover {
	border-color: #999;
}

a[href $='.doc'] { 
	padding-left: 21px;
	background: transparent url(images/icon_doc.png) no-repeat center left;
}

a[href $='.pdf'] { 
	padding-left: 21px;
	background: transparent url(images/icon_pdf.png) no-repeat center left;
}

a[href $='.txt'] { 
	padding-left: 21px;
	background: transparent url(images/icon_txt.png) no-repeat center left;
}

/* ----------- TWITTER FEED FROM CHRIS COYIER WWW.CSS-TRICKS.COM ------------ */

ul#twitter_update_list {
	list-style: none;
}

ul#twitter_update_list li {
	margin-bottom: 10px;
	padding: 10px;
	color: #666;
	background-color: #FFF;
	border: 1px solid #F1F1F1;
}

ul#twitter_update_list li:hover {
	border-color: #C9C9C9;
}

ul#twitter_update_list li:first-child {
	margin-top: 20px;
}