/*
Theme Name: John Watson Custom Theme
Theme URI: http://www.johnhwatsonmd.com
Description: A custom theme for JohnHWatsonMD.com
Version: 0.9
Author: Simon Fairbairn
Author URI: http://line-in.co.uk
*/
/*
* Reset - Resets all browsers down to common default settings
*
* @credits Eric Meyer's CSS Reset
*/
/* Eric Meyer Reset Reloaded */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* Removes dotted line when focus */
:focus { outline: none; }
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0px; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
/* Remove possible quote marks (") from , . */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
/* Regular clearing, just in case! */
.clear { clear: both; }
body, input, textarea { font: 13px/1.5 verdana, arial, sans-serif; background: #000; text-align: left; color: #000; }
/*
* Start General styles
*/
/* Font Styles */
.serif { font-family: Georgia, "Times New Roman", Times, serif; }
.sans-serif { font-family: "lucida sans", Verdana, Arial, Helvetica, sans-serif; }
/* Vertical Rhythm */
.entry-meta { margin-bottom: 10px; }
p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form, .comment-list ul, .comment-list ol { margin-bottom: 20px; font-size: 13px;}
.hentry, .widget, .navigation-links { margin-bottom: 40px; }
/* Links */
a { color: #384a2d; text-decoration: none; }
a:hover, a:active, a:focus { text-decoration: underline; }
p a { font-weight: bold; }
.entry-content a:link, .entry-content a:active, .entry-content a:visited, .entry-content a:focus { color: #2361a1; text-decoration: underline; }
.entry-content a:hover { text-decoration: none; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; font-family: georgia, "Times New Roman", serif; color: #67441a; }
h1 { font-size: 24px; line-height: 28px; padding: 5px 0px; }
h2 { font-size: 20px; line-height: 22px; padding: 5px 0px; font-weight: normal; }
h3 { font-size: 16px; line-height: 20px; padding: 5px 0px; margin-bottom: 15px;}
h4 { font-size: 14px; line-height: 18px; padding: 5px 0px; }
h5 { font-size: 12px; line-height: 18px; padding: 5px 0px; }
h6 { font-size: 10px; line-height: 16px; }
/* Content */
.page-title { font-size: 14px; font-weight: bold; }
.page-title span { font-style: italic; font-weight: normal; }
.entry-title, .entry-title a { color: #000; font-size: 24px; line-height: 28px; }
.entry-title a:hover { color: #2361a1; text-decoration: none; }
/* Text Elements */
address { font-style: italic; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px dotted #666; }
blockquote { color: #949494; font-style: italic; border-left: 1px solid #ddd; margin-left: 15px; padding-left: 10px; }
strong { font-weight: bold; }
em, dfn, cite { font-style: italic; }
dfn { font-weight: bold; }
sup { bottom: 1ex; }
sub { top: .5ex; }
small { font-size: 12px; }
del { text-decoration: line-through; }
ins { text-decoration: underline; }
code, pre { line-height: 15px; }
var, kbd, samp, code, pre { font: 12px/1.4 Consolas, "Andale Mono", Courier, "Courier New", monospace; background: #fafafa; }
kbd { font-weight: bold; }
samp, var { font-style: italic; }
pre { white-space: pre; overflow: auto; padding: 10px; border: 1px solid #ddd; clear: both; }
code { padding: 0px 3px; }
/* Lists: (ul, ol, dl) */
ul, ol, dl { margin-left: 40px; }
.nav { margin-left: 0px; }
.entry-content ul, .entry-content ol, #search-query { margin-left: 25px; }
li ul, li ol { margin-bottom: 0; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
dt { font-weight: bold; }
.fat li { margin-bottom: 10px; }
/* Tables */
table { border-width: 1px; line-height: 18px; margin: 0 0 22px 0; text-align: left; padding: 0 5px; }
table .even { background: #ddd; }
caption { text-align: left; }
tr { border-bottom: 1px solid #ccc; }
th { font-weight: bold; font-size: 14px; }
th, td { padding: 5px 5px; border-right: 1px solid #401028; border-left: 1px solid #401028;}
td { border-top: 1px dashed #401028; }
th, td.packageBasic, td.packagePro, td.packageUltimate, td.packageBoltOn { text-align: center; }
.highlight { background: #703552;}
tr.alt .highlight { background: #854b67;}
tr { background: #5d2341; }
table tr.alt { background: #662b48; }
tr.packageSeparate td { border-top: 4px double #401028; }
tr.packageTotal td { font-weight: bold; font-size: 16px; }
tr.packageSaving td { font-weight: bold; }
/* Forms */
label { display: block; margin-top: 5px; }
input, textarea, button { background: #dfd5c1; border: 2px solid #af9969; text-align: left;}
button { font: 12px; padding: 2px 10px; cursor: pointer; }
input { padding: 7px; }
input[type=submit] { color: #67441a; font: 18px/1.5 bold georgia, "Times New Roman", serif; }
input[type=submit]:hover { border-color: #67441a; cursor: pointer; }
/* bugfix */
.safari input { padding: 0px 3px; }
.chrome input { padding: 1px 3px; }
/* Comments */
.comment-list, .comment-list .children { list-style: none; }
.comment-list { margin-left: 10px; }
.comment { margin-bottom: 10px; }
.comment-list .children { margin-top: 40px; }
.comment-meta { font-size: 10px; font-weight: bold; margin-bottom: 10px; position: absolute; right: 10px; text-align: right; top: 5px; width: 44%; }
.commenter { font-size: 16px; }
.commentlist img.avatar { margin: 0; }
.avatar { border: 1px #c3b398 solid; padding: 5px; position: absolute; margin: 0; top: 10px; left: 10px; }
div.comment-author { font: 18px/1.5 bold georgia, "Times New Roman", serif; color: #67441a; margin-bottom: 10px; }
.commentTitle { height: 65px; padding: 0; margin: 0; position: relative; width: 204px; }
.commentTitle span { background: url(images/jw_sidebarTitleSprite.png) no-repeat 0 -236px; display: block; height: 100%; position: absolute; width: 100%; }
.commentReply { height: 79px; padding: 0; margin: 0; position: relative; width: 204px; }
.commentReply span { background: url(images/jw_sidebarTitleSprite.png) no-repeat 0 -302px; display: block; height: 100%; position: absolute; width: 100%; }
ol.commentlist { list-style: none; margin-left: 10px;}
ol.commentlist ul { list-style: none; margin: 10px 0; }
ol.commentlist li { border: 1px solid #c3b398; padding:5px 7px 5px 80px; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
li #respond { margin-top: 20px; }
li .commentReply { height: auto; width: auto; color: #67441a; font: 30px/45px bold georgia, "Times New Roman", serif; }
li .commentReply span { background: none; display: inline; }
.trackbacks { color: #67441a; margin: 10px; }
/* Comment Reply */
#comment-form .form-section input { margin-right: 10px; }
.form-section { margin-bottom: 10px; }
.form-section label { cursor: pointer; }
#commenter-details input { margin-right: 10px; }
#allowed-tags { font: 11px Verdana, Arial, Helvetica, sans-serif; padding: 5px 10px; background: #fff; border: 1px #ddd dotted; border-top: none; width: 573px; }
#comment { width: 95%; }
/* Images */
img.border { border: 1px solid #946326; }
img.alignleft { float: left; margin-right: 20px; margin-top: 5px; margin-bottom: 20px;}
img.alignright { display: block; float: right; margin-left: 20px; margin-top: 5px; margin-bottom: 20px;}
img.aligncenter { margin: 10px auto; display: block; clear: both; }
.wp-caption { text-align: center; margin-top: 10px; }
.wp-caption img { padding: 0; }
.wp-caption .wp-caption-text { margin: 0; padding: 5px; font-style: italic; color: #999; }
.wp-smiley { max-height: 13px; margin: 0 !important; } /* Prevent the smileys from breaking line-height */
/* Navigation */
.page-navigation .nav-next { float: left; }
.page-navigation .nav-previous { float: right; }
.single-page-navigation .nav-next { float: right; }
.single-page-navigation .nav-previous { float: left; }
/* Basic Alignments */
.alignleft { float: left; margin-right: 20px; }
.alignright { float: right; margin-left: 20px; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; }
/*
* Start Specific styles
*/
/* Containers */
#container { background: transparent url(images/jw_background.jpg) repeat-y bottom left; position: relative; z-index:10;}
#content { background: url(images/jw_body.jpg) no-repeat bottom left ; overflow: hidden; margin-top: -55px; text-align: left; }
.blogContainer { width: 960px; z-index: 100; overflow: hidden;}
/* Logo */
#header { height: 390px; background: url(images/jw_header.jpg) no-repeat top left; }
#header h2, #header h1{ width: 194px; height: 93px; position: relative; top: 14px; left: 28px; text-align: left; }
#header h2 span, #header h1 span { width: 100%; height: 100%; position: absolute; background: url(images/jw_header.jpg) no-repeat -28px -19px; }
/* POSTS */
.postsContainer { background: url(images/li_blog_slice.png) repeat-y; float: right; margin-right: 50px; text-align: left; width: 500px;}
.navigation { width: 100%; overflow: hidden; }
.postsContainer h2 { color: #67441a; font: 37px/40px bold georgia, "Times New Roman", serif; }
.postsContainer h2.pagetitle { color: #000; font-size: 24px; margin-bottom: 10px; text-align: center; }
.postsContainer h2 a { color: #67441a; }
.postsContainer h2 a:hover, .postsContainer h2 a:active, .postsContainer h2 a:focus { text-decoration: underline; }
.postsContainer img { border: 1px solid #67441a; padding: 5px; margin-top: 5px; }
.postsContainer .postMetaDate { float: left; }
.postsContainer .postMetaAuthor { float: right; margin-right: 45px; }
.postsContainer .postMetaDate, .postsContainer .postMetaAuthor { color: #67441a; font: 20px/30px bold georgia, "Times New Roman", serif; }
.postsContainer .postMetaContainer { background: url(images/jw_header_underline.png) no-repeat; overflow: hidden; padding-top: 10px; width: 530px; }
.postsContainer .postMetaBottom { background: url(images/jw_postBottom.png) no-repeat; height: 40px; margin: 20px -50px 70px -30px; padding: 30px 40px 0 80px ; }
body.single .postsContainer .postMetaBottom { margin-bottom: 30px; }
/* FOOTER */
#footer { background: url(images/jw_footer.jpg) no-repeat bottom left; clear: both; height: 500px; position: relative; text-align: center; }
#footer p { margin-bottom: 0; font-size: 11px; line-height: 1.3;}
#footer .footerContainer { margin: 0 0 0 400px; padding: 82px 0 10px; width: 470px; }
.rss a { display: block; height: 55px; left: 526px; position: absolute; top: 202px; width: 70px; text-align: left;}
.rss a span { background: url(images/jw_header.jpg) 824px 344px; height: 100%; position: absolute; width: 100%; }
.rss a:hover span { background-position: 824px -466px; }
.topSearchForm { left: 700px; position: absolute; text-align: left; top: 160px; width: 200px; }
.topSearchForm input.searchtext { border: none; background: none; color: #331500; font-family: georgia, "Times New Roman", serif; font-size: 20px; font-weight: bold; height: 25px; padding-bottom: 0; width: 172px; }
.topSearchForm input.searchsubmit { border: none; background: url(images/jw_header.jpg) 524px 341px; display: block; font-size: 1px; height: 50px; left: 127px; overflow: hidden; margin: 0; padding: 0; position: absolute; top: 45px; width: 69px; }
.topSearchForm input.searchsubmit:hover { background-position: 524px 77px; }
/* Sidebar */
#sidebar { margin: 0 0 0 30px; padding-top: 10px; position: relative; text-align: left; width: 285px; }
#sidebar .tagline { color: #67441a; font: 18px/20px bold georgia, "Times New Roman", serif; }
#sidebar ul { list-style: none; margin: 10px 0; padding: 0; }
#sidebar ul ul { list-style: disc; margin-left: 15px; }
#sidebar h2 { height: 90px; padding: 0; position: relative; width: 204px;}
#sidebar h2 span { background: url(images/jw_sidebarTitleSprite.png); display: block; height: 100%; position: absolute; width: 100%;}
li.widget_twitter { width: 100%; }
li.widget_twitter h2 a { background: url(images/jw_sidebarTitleSprite.png); display: block; height: 100%; position: absolute; width: 100%; text-indent: -1000em; }
li.widget_twitter h2 a:hover, li.widget_twitter h2 a:active, li.widget_twitter h2 a:focus { background-position: -2px -385px; }
#sidebar li.widget_recent_entries h2 { height: 62px; }
#sidebar li.widget_recent_entries h2 span { background-position: 0 -174px; }
#sidebar li.widget_categories h2 { height: 43px; }
#sidebar li.widget_categories h2 span { background-position: 0 -89px; }
#sidebar li.widget_categories h2 { height: 43px; }
#sidebar li.widget_categories h2 span { background-position: 0 -89px; }
#sidebar li.widget_archive h2 { height: 43px; }
#sidebar li.widget_archive h2 span { background-position: 0 -132px; }
#sidebar ul ul.twitter { background: url(images/jw_twitterLogo.png) no-repeat 0 6px; list-style: none; margin: 0; }
.twitter li { padding: 5px 5px 5px 50px; font-size: 11px; min-height: 45px;}
#sidebar p.signupText { margin-bottom: 0; }
#sidebar li#text-3 { margin-bottom: 20px; }
[role='navigation'] { left: 35px; margin: 0; padding: 0; position: absolute; text-align: left; top: 140px; width: 493px; }
[role='navigation'] * { list-style: none; margin-left: 0; }
[role='navigation'] li { display: block; padding: 0; position: absolute; height: 50px; overflow: hidden; }
[role='navigation'] li a { position: absolute; width: 100%; height: 100%; background: url(images/jw_header.jpg); text-indent: -1000px;}
[role='navigation'] li.home { height: 40px; width: 91px; top: -1px; left: 2px; }
[role='navigation'] li.home a { background-position: -37px -139px; }
[role='navigation'] li.home a:hover, [role='navigation'] li.home.current_page_item a { background-position: -37px 143px; }
/* ABOUT PAGE */
[role='navigation'] li.about { height: 57px; left: 103px; top: 0; width: 98px; }
[role='navigation'] li.about a { background-position: -138px -140px; }
[role='navigation'] li.about a:hover, [role='navigation'] li.about.current_page_item a { background-position: -138px 142px; }
/* CONTACT PAGE */
[role='navigation'] li.contact { height: 57px; left: 318px; top: 69px; width: 98px; }
[role='navigation'] li.contact a { background-position: -353px -209px; }
[role='navigation'] li.contact a:hover, [role='navigation'] li.contact.current_page_item a { background-position: -353px 73px; }
/* CANON PAGE */
[role='navigation'] li.canon { height: 47px; left: 214px; top: 11px; width: 128px; }
[role='navigation'] li.canon a { background-position: -249px -151px; }
[role='navigation'] li.canon a:hover, [role='navigation'] li.canon.current_page_item a { background-position: -249px 131px; }
/* OTHER STORIES PAGE */
[role='navigation'] li.other-stories { height: 53px; left: 357px; top: 17px; width: 150px; }
[role='navigation'] li.other-stories a { background-position: -392px -157px; }
[role='navigation'] li.other-stories a:hover, [role='navigation'] li.other-stories.current_page_item a { background-position: -392px 125px; }
/* STUDY PAGE */
[role='navigation'] li.study { height: 66px; left: 10px; top: 45px; width: 98px; }
[role='navigation'] li.study a { background-position: -45px -185px; }
[role='navigation'] li.study a:hover, [role='navigation'] li.study.current_page_item a { background-position: -45px 97px; }
/* LINKS PAGE */
[role='navigation'] li.links { height: 47px; left: 115px; top: 59px; width: 82px; }
[role='navigation'] li.links a { background-position: -150px -199px; }
[role='navigation'] li.links a:hover, [role='navigation'] li.links.current-cat a { background-position: -150px 83px; }
/* MEDIA PAGE */
[role='navigation'] li.media { height: 47px; left: 211px; top: 58px; width: 97px; }
[role='navigation'] li.media a { background-position: -246px -198px; }
[role='navigation'] li.media a:hover, [role='navigation'] li.media.current_page_item a { background-position: -246px 84px; }
.footerMenu { list-style: none; margin: 10px 0; }
.footerMenu li{ display: inline; padding: 0 10px;}
img#wpstats{height: 0px; position: absolute;
display: none;
}
/* For image replacement */
.ir {
display: block;
position: relative;
}
.ir span {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
display: none !important;
visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
visibility: hidden;
}
/* Contain floats: h5bp.com/q */.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}