/* -----------------------------------------------
Joe Hill Communications screen style
author: Jay Kerr / JAK MEDIA
version: Apr 27, 2010
----------------------------------------------- */

html, body {
	overflow-x:hidden;
	overflow-y:auto;
}

* {
	margin: 0; padding: 0;
}

body {
	background: #78848f;
	font: normal 13px/18px Arial, sans-serif;
	color: #0b0808;
}	



/* Page Structure
----------------------------------------------- */
#wrapper {
	margin: 0 auto;
	width: 850px;
	min-height: 1024px;
	overflow: auto;
	background: url(/images/bg-content-v2.png) repeat-y;
}

#navigation {
	background: url(/images/bg-nav-v2.png);
	height: 47px;
}

#content, #badges {
  	width: 850px;
}

#badges {
  	width: 850px; height: 200px;
	background: url(/images/bg-badges.png);
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}

.clear {
	clear: both; height: 0; line-height: 0;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}


/* Page Header
----------------------------------------------- */
#logo {
	width: 188px;
	padding: 13px 0 0 562px;
}

#logo img {
	height: 0;
}

#logo a, #logo span {
	display: block;
	width: 188px;
	height: 67px;
	background: url(/images/logo.gif) no-repeat top left;
}

#logo a:hover, #logo span:hover {
	background-position: 0 -67px;
}


/* Navigation
----------------------------------------------- */
#navlist {
	padding: 25px 100px 0 0;
	font: normal 9px/12px "Arial Black", Arial, sans-serif;
	text-align: right;
	text-transform: uppercase;
	color: #d2232a;
}

#navlist ul {
	list-style: none;
	overflow: hidden;
}

#navlist ul li {
	float: right; 
	padding: 0 0 0 13px;
	border-left: 1px solid 8d908b;
}

#navlist ul li a {
	color: #463f1a; 
	text-decoration: none;
}

#navlist ul li a:hover {
	color: #d2232a;
}

#navlist .selected {
	color: #b32017;
}

.subnav, .subnavbadge {
	font: 11px/16px "Arial Black",sans-serif;
	color: #6d6e71;
}

.subnav {
	padding: 5px 0 0 65px;
}

.subnavbadge {
	float: left;
	padding: 44px 0 0 108px;
	width: 174px;
}

.subnavbadge a span {
	font: normal 11px Arial, sans-serif;
	color: #6d6e71; 
	text-decoration: none;
}

.subnav p, .subnavbadge p {
	margin: 0 0 12px 0;
}

.subnav a, .subnavbadge a {
	color: #6d6e71; 
	text-decoration: none;
}

.subnav a:hover, .subnavbadge a:hover {
	color: #d2232a;
	text-decoration: none;
}

.subnav .selected {
	color: #d2232a;
}

.subsubnav {
	padding: 4px 0 0 10px;
	font: bold 10px/22px Arial,sans-serif;
}

.tightlineheight {
	line-height: 12px;
}

.badge {
	float: left;
	width: 138px;
	padding: 77px 20px 0 0;
	font: 14px/18px Georgia,serif;
	color: #463f1a;
}

.badge a {
	font: 11px "Arial Black",sans-serif;
	color: #d2232a;
	text-decoration: none;
	padding-left: 10px;
}

.badge a:hover {
	color: #6d6e71; 
	text-decoration: none;
}


/* Content
----------------------------------------------- */
#subhead-home {
	background: url(/images/bg-section-home.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-about {
	background: url(/images/bg-section-about.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-about-nojoe {
	background: url(/images/bg-section-about-nojoe.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-what {
	background: url(/images/bg-section-what.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-how {
	background: url(/images/bg-section-how.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-fume {
	background: url(/images/bg-section-ruminations.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-advice {
	background: url(/images/bg-section-advice.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-portfolio {
	background: url(/images/bg-section-portfolio.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-merchandise {
	background: url(/images/bg-section-merchandise.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-contact {
	background: url(/images/bg-section-contact.png) no-repeat;
	width: 850px; height: 126px;
}

#subhead-privacy {
	background: url(/images/bg-section-privacy.png) no-repeat;
	width: 850px; height: 126px;
}

#content-left {
	float: left;
	width: 250px;
	text-align: left;
	padding-left: 40px;
}

#content-right {
	float: right;
	width: 460px;
	padding-right: 100px;
	text-align: left;
}

.column-float {
	float: left;
	width: 210px;
	text-align: left;
	padding-right: 20px;
}

.content-wrapper {
	padding: 20px 20px 0 20px;
}

#content ul {
	list-style: none;
	margin: 0 0 18px 0;
	padding-left: 10px;
}

#content ul li {
	padding: 2px 0 0 10px;
	background:url(/images/bullet-red.gif) no-repeat 0 8px;
}

#content ol {
	margin: 0 0 18px 0;
	padding-left: 30px;
}

#content ol li {
	padding: 5px 0 0 5px;
}

.homepage {
	font: bold 22px/28px Arial,sans-serif;
	color: #4c4521;
}

.homepage b {
	font: 22px/28px "Arial Black",sans-serif;
	color: #685e4f;
}

.homepage span {
	font: 22px/28px "Arial Black",sans-serif;
	color: #d2232a;
}

#portfolio {
	margin-top: 8px;
	background:url(/portfolio/images/bg-portfolio.gif) repeat-y;
	height: 305px;
}

.portfolio-col1, .portfolio-col2, .portfolio-col3  {
	float: left;
	width:152px; height:152px;
	padding-bottom: 1px;
}

.portfolio-col1, .portfolio-col2 {
	padding-right: 2px;
}

#thumb-osstf img, #thumb-opseu img, #thumb-usw img, #thumb-ofl img, #thumb-tpa img, #thumb-mike img {
	height: 0;
}

#thumb-osstf a, #thumb-osstf span,
#thumb-usw a, #thumb-usw span,
#thumb-ofl a, #thumb-ofl span,
#thumb-tpa a, #thumb-tpa span,
#thumb-mike a, #thumb-mike span,
#thumb-opseu a, #thumb-opseu span {
	display: block;
	width: 152px;
	height: 152px;
}

#thumb-osstf a, #thumb-osstf span {
	background: url(/portfolio/images/thumb-osstf.gif) no-repeat top left;
}

#thumb-usw a, #thumb-usw span {
	background: url(/portfolio/images/thumb-usw.gif) no-repeat top left;
}

#thumb-opseu a, #thumb-opseu span {
	background: url(/portfolio/images/thumb-opseu.gif) no-repeat top left;
}

#thumb-opseu a, #thumb-ofl span {
	background: url(/portfolio/images/thumb-ofl.gif) no-repeat top left;
}

#thumb-opseu a, #thumb-tpa span {
	background: url(/portfolio/images/thumb-tpa.gif) no-repeat top left;
}

#thumb-opseu a, #thumb-mike span {
	background: url(/portfolio/images/thumb-mike.gif) no-repeat top left;
}

#thumb-osstf a:hover, #thumb-osstf span:hover,
#thumb-usw a:hover, #thumb-usw span:hover,
#thumb-ofl a:hover, #thumb-ofl span:hover,
#thumb-tpa a:hover, #thumb-tpa span:hover,
#thumb-mike a:hover, #thumb-mike span:hover,
#thumb-opseu a:hover, #thumb-opseu span:hover
{
	background-position: 0 -152px;
}


/* Blog
----------------------------------------------- */
.blog-entry {
	padding: 0 0 30px 0;
}

.blog-entry h1 {
	padding: 0 0 15px 0;
	font: bold 16px/22px Arial,sans-serif;
	color: #524b28;
}

.byline {
	padding: 0;
	font-size: 10px;
	color: #757157;
	border-bottom: 1px solid #4c4a4a;
}

.postedby {
	margin-top: 3px;
	font-size: 10px;
	color: #757157;
	border-top: 1px solid #757157;
}


/* Footer
----------------------------------------------- */
.footer-wrapper {
	font-size: 10px; line-height: 18px;
	text-align: right;	
	padding: 20px 100px 20px 0;
	color: #030000;
}

.footer-wrapper em {
	font: italic 18px/22px Georgia,serif;
	color: #4c4521;
}

.footer-wrapper a { 
	color: #000;
	text-decoration: none;
}

.footer-wrapper a:hover { 
	color: #d2232a;
	text-decoration: none;
}


/* Links
----------------------------------------------- */
a { 
	color: #d2232a;
	text-decoration: underline;
}

a:hover { 
	color: #000;
	text-decoration: underline;
}

a.selected {
	color: #d2232a; 
	text-decoration: none;
}

a.share {
	font: normal 12px/18px Arial, sans-serif;
	color: #000;
}

a.share:hover { 
	color: #d2232a;
	text-decoration: none;
}


/* Typography 
----------------------------------------------- */
h1 {
	padding: 0 0 24px 0;
	font: bold 16px/22px "Arial Black",sans-serif;
	color: #4c4521;
}

h2 {
	padding: 0 0 24px 0;
	font: normal 19px/24px "Arial Black",sans-serif;
	color: #000;
}

h3 {
	padding: 0 0 10px 0;
	font: normal 31px "Arial Black",sans-serif;
	color: #463f1a;
}

h4 {
	padding: 0 0 10px 0;
	font: bold 14px Arial,sans-serif;
	color: #000;
}

p {
	margin: 0 0 18px 0;
}

p span {
	color: #d2232a;
}

.backtotop {
	font-size: 11px;
	text-align: right;
	margin-bottom: 30px;
}
 
.indent {
	padding-left: 15px;
}

.nopadding {
	padding: 0;
}


/* Form elements
----------------------------------------------- */
form {
	margin: 0; padding: 0;
}

select, option {
	margin: 10px 0 10px 2px;
	padding: 2px;
}

label {
	line-height: 18px;
}

textarea {
	margin-top: 5px;
	width: 90%;
}

.fieldinput {
	width: 90%;
}

.pulldown {
	padding: 0;
}

.widget-content select {
	margin: 0 0 4px 0;
	width: 130px;
}


/* Images
----------------------------------------------- */
img {
	display: block;
	border: 0;
}

img.photo {
	padding: 4px;
	border: 1px solid #c9cacb;
}

a:hover img.photo { 
	border: 1px solid #68a138;
}

.inline {
	display:inline;
	border: 0;
}

.icon {
	display:inline;
	vertical-align:middle;
	padding: 0 2px 2px 0;
	border: 0;
}

.imgfloatleft {
	float: left;
	margin: 0 10px 10px 0;
}

.imgfloatright {
	float: right;
	margin: 0 0 10px 10px;
}

.imgcenter {
	margin: 0 auto;
}

.imgpadright {
	padding-right: 50px;
	display:inline;
	border: 0;
}

img.maximage {
	display:none;
}

.maximage {
	position:fixed !important;
}