/*
Theme Name: Tasker's Well Company
Theme URI: taskerswell.com
Description: Custom layout designed for taskerswell.com, converted to a wordpress theme

Site URI: taskerswell.com
Author: Curtis Tasker
Author URI: curtistasker.com

Version: 2008

style.css - this file
screen.css - adds screen-only specific features
print.css - formats the theme for printing
no_rig_graphic.css - removes the rig graphic when loaded

Compatibility Testing: Chrome 1.0
                       Safari 3.1 PC & Mac
                       Firefox 3.0
                       Internet Explorer 7.0
                       Internet Explorer 6.0
                       Internet Explorer 5.5
                       Internet Explorer 5.01

Issues:
 - nav and header margins on ie 5.5 and 5.01 is slightly off, doesn't affect readability
 - nav bar takes up 2 lines on ie 5.5 and 5.01, doesn't affect usability

 - <pre/> styling with longish segments of code pushes the sidebar to the bottom on IE5.01 & IE5.5

*/

/****************************** basic elements ********************************/   

/* define baseline settings for the website */
body
{
	font-size: 62.5%; /* shrinking default 16px font to 10px, for easier calculation */
	font-family: Arial,sans-serif; /* fallback fonts */
	line-height: 1.5; /* base line height */
	color: #000; /* base text color - dark grey */ 
	margin: 0;
	padding: 0;
	text-align: center; /* IE5 hack to center page */
	margin: 0; /* a little top/bottom padding to make the layout not flush with the window edges */
	background: url(tasker_body_bg_pattern.png) top center repeat; /* crosshatch pattern */
}

p
{
	padding: 0;
	margin: 0 0 1em 0;
}

ul
{
	list-style-type: square;
	margin: 1em 0 1em .5em;
	padding: 0;
}

ol
{
	margin: 1em 0 1em .5em;
	padding: 0;
}

/* in the event i need to use tables, use a slight bit of padding to separate rows */
td
{
	padding-right: .5em;
	vertical-align: bottom;
}

a:link,a:visited
{
	text-decoration: none;
	color: #9e2d32; /* dark red */
}

a:hover,a:active
{
	text-decoration: underline;
	color: #9e2d32; /* dark red */
}

/* underline acronyms and abbreviations */
acronym,abbr
{
	border-bottom: 1px dotted;
}

/* use for quotes */
blockquote
{
	/*border-left:1em solid #a5bbd3; /* thick vertical stripe to offset the quotes - moderate blue */
	border-left:1em solid #9e2d32; /* thick vertical stripe to offset the quotes */
	margin: .5em .5em .5em 0;
	padding: 0 0 0 1em;
}

/* use for code blocks */
pre
{
	border: 2px dotted #9e2d32;
	padding: 1em;
	margin: 0 0 1em 0;
}

code, pre
{
	font-size: 1.1em; /* make the font size a tiny bit bigger */
}


/****************************** custom classes *******************************/
/* some custom class elements to allow for interesting presentation effects */

.left { float: left; }
.right { float: right; }

/* use pullquotes on blockquote elements */
blockquote.pullquote
{
	font-size: 1.3em;
	text-align: center;
	border: 0; /* reset the blockquote borders to nothing */
	border-top: 2px solid #9e2d32;
	border-bottom: 2px solid #9e2d32;
	padding: .5em 0 0 0;
	margin-top: 1em;
	margin-bottom: 1em;
}

.pullquote p
{
	margin-bottom: .5em;
}

.pullquote.left
{
	margin: .6em 1em 0 0;
}

.pullquote.right
{
	margin: .6em 0 0 1em;
}

/* use infoboxes on <div> elements, outside of paragraph tags */ 
.infobox
{
	margin: .8em 0 1em 0;
	padding: 1em 1em .5em 1em;
	background: #9e2d32;
}

.infobox p
{
	margin-bottom: .5em;
}

.infobox.left
{
	margin-right: 1em;
	margin-bottom: .3em;
}

.infobox.right
{
	margin-left: 1em;
	margin-bottom: .3em;
}

/*********************************** page ************************************/

/* defines the shadowed background for the page */
#page
{
	background: url(tasker_page_bg_shadow.png) top center repeat-y;
}

/* defines the fixed width layout, its background color, and borders */
#page_content
{
	margin: 0 auto; /* horizontally centered and flush vertically */
	width: 980px; /* fixed width of the layout */
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	
	/*background: #ddd; /* background color */
	text-align: left; /* IE5 hack to center page */
	
	background: url(tasker_page_content_bg_wellrig_small.png) bottom right no-repeat #ddd; /* positions the background image */
	padding-bottom: 0; /* ensures the rig graphic doesn't fall behind the content */
}



/********************************** header ***********************************/

/* header contains title and description */
#header
{
	float: left; /* ensures the layout stays flush with the top */
	color: #000; /* title and description color */
	
	background: url(tasker_header_background.jpg) no-repeat top left;
	
	height: 348px; /* the height of the header background image */
	width: 100%; /* force the header to span the layout */
}

/* creates a giant rectangular hyperlink on top of the header */
#header #home
{
	position: absolute; /* required for IE6 */
	top: 0; /* position the rectangle over the header */
	display: block;
	height: 348px; /* the height of the header background image */
	width: 980px; /* width of the layout */
}

#header #title
{
	float: left;
	margin-top: 20px;
	
	background: url(tasker_header_logo.png) no-repeat top left;
	
	height: 153px;
	width: 239px;
	
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}

#header #description
{
	float: right;
	margin-top: 293px;
	margin-bottom: 18px; /* subtract out the border pixels from 20px */
	
	background: url(tasker_header_slogan.png) no-repeat top left;
	
	height: 35px;
	width: 503px;
	
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

/* mirrors content in header image, hidden for users, displayed to search engines */
#header #title span
{
	display: none;
}

/* mirrors content in header image, hidden for users, displayed to search engines */
#header #description span
{
	display: none;
}

/************************************ nav ************************************/
#nav
{
	clear: both; /* clear the header */
	
	letter-spacing: 1px;
	height: 1.5em;
	
	text-align: center;
	
	color: #fff;
	background: #999;
	font-size: 2.2em;
	
	list-style: none;
	
	padding: 0;
	margin: 0 auto;
	
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#nav li
{
	float: left;
}

#nav a
{
	float: left;
	display: block;
	text-align: center;
	width: 140px;
	padding: 0;
	margin: 0;
	color: #fff;
}

#nav a:hover
{
	background: #555; /* dark grey */
	text-decoration: none;
}

#nav .current_page_item a, #nav .current_page_ancestor a
{
	background: #9e2d32; /* dark red */
}

#nav .current_page_item a:hover, #nav .current_page_ancestor a:hover
{
	background: #555; /* dark grey */
}



/*********************************** body ************************************/

/* holds the #content and #sidebar sections */
#main_body
{
	width: 940px; /* forces shorter content to not shrink the layout */
	
	/* 25px margin == perfect surrounding margins, but 30px feels better */
	margin: 20px 20px 0 20px; /* left and right margins fixed to avoid overlapping body background fill */
	
	float: left; /* body has to float, allows the body_bottom to clear it and push the rig graphic to the bottom */
	display: inline; /* hack for IE6 to prevent margin from expanding*/
	min-height: 710px;
	
}

/* ensures that the layout to clear the sidebar */
#main_body_bottom
{
	clear: both; /* ensures that the layout clears the sidebar */
}

/********************************** sidebar **********************************/

/* fix the sidebar relative to its container, at the top right */
#sidebar
{
	color: #000; /* black */
	float: right; /* float the sidebar to the right */
	display: block;
	font-size: 1.2em; /* Reset fonts to 14px */
	width: 24%;
	margin: 0;
	padding: 0;
}

#sidebar ul
{
	margin: 0;
	padding: 0;
	text-align: right;
}

/* each sidebar section */
#sidebar li
{
	list-style: none;

	font-weight: bold;
	font-size: 1.5em;
	letter-spacing: 1px;
	
	margin: 0 0 2em 0;
	padding: 0;
	
}

#sidebar ul ul
{
	font-size: .8em;
	padding: 0;
	margin: 0;
}

/* each sidebar section */
#sidebar li li
{
	font-size: 1em;
	
	padding: .3em 0 .3em 0em;
	margin: 0;
}


#sidebar a:link, #sidebar a:visited
{
	color: #000; /* black */
}
#sidebar a:hover
{
	color: #9e2d32; /* dark red */
}

#sidebar a
{
	font-weight: bold;
}



#sidebar p
{
	color: #000;
	font-size: .8em;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

/* style pdf links */
.pdf
{
	background-image: url(pdf_icon.gif);
	background-repeat: no-repeat;
	background-position: 15px;
}

/********************************** content **********************************/

#content
{
	float: left; /* float the content to the right of the sidebar */
	display: inline;
	font-size: 1.4em; /* Default font size for the content */
	width: 75%;

	height: auto !important; /* hack for older IE versions to enforce a minimum height */
}

#content h1, #content h2, #content h3, #content h4, #content h5
{
	clear: both; /* clear floating elements when starting a new section */
	font-weight: bold;
	font-family: Helvetica,sans-serif;
	
	color: #000; /* black */
	letter-spacing: 1px;
	padding: 0;
	margin: 0 0 .5em 0;
}

#content h1 a, #content h2 a
{
	font-weight: bold;
}

#content h1
{
	color: #9e2d32; /* dark red */
	/*border-bottom: 2px solid #a5bbd3; /* solid bottom line - moderate blue */
	border-bottom: 2px solid #9e2d32; /* solid bottom line */
	font-size: 1.6em;
}

#content h2
{
	font-size: 1.2em;
}

#content h3
{
	font-size: 1em;
}

#content ol
{
	margin-top: .5em;
}

#content li
{
	margin: 0 0 0 1.5em;
}

/* image gallery */
.gallery
{
	margin: auto;
}

.gallery dl
{
	margin: 0;
}

.gallery-item
{
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 50%; /* floor(100/$columns) */
}

/* border around images */
.gallery img
{
	border: 1px solid #9e2d32; /* red */
	margin: 0;
	padding: 3px;
}

.gallery-caption
{
	margin-left: 0;
}

.headshot
{
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

/*********************************** posts ***********************************/

/* each individual post */
.post
{
	font-family: Arial,sans-serif;
	padding-bottom: 1em;
	padding-right: 0em;
	
	clear: both; /* allows clearing of floated elements for short articles. */
	
	background: #fff;
	border: 1px solid #000;
	padding: 1em;
	margin-bottom: 2em;
}

.post .entry
{
	margin: .5em 2em 1em 1.5em;
	text-align: left;
}

.post .caption
{
	font-weight:bold;
}

.post .metadata
{
	font-size: .8em;
	text-align: right;
	clear: both; /* clear floating elements when ending a post */
}

/***************************** testimonials styling ******************************/

.post .reg
{
	padding: .5em;
	margin-top: 1em;
}

/* grey background for alternating content */
.post .alt
{
	background-color: #F0F0F0; /* light grey */
	padding: .5em;
	margin-top: 1em;

}

.post > .entry > .alt > p,.post > .entry > .reg > p
{
	margin-top: 1em;
	margin-bottom: .5em;
}

/***************************** contact info styling ******************************/

.contactinfo td
{
	vertical-align: top;
}
.contactinfo .phone
{
	font-size: 2em;
}

.contactinfo .email
{
	font-size: 1.5em;
}

.contactinfo .fax
{
	font-size: 1.2em;
}

.contactinfo .mail
{
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

.contactinfo .mail>td
{
	line-height: 100%;
}
/***************************** comments styling ******************************/

/* limits the width of the comment textarea */
#comment
{
	width: 100%;
}

#content .commentheader
{
	margin-bottom: 1em;
}

#content .commentheader cite
{
	font-style: normal;
	font-size: 1.4em;
}

#content .commentlist li
{
	padding: .5em;
}

/* every other comment is colored differently */
#content .commentlist .alt
{
	background-color: #F0F0F0; /* light grey */
}

/* no border around avatars */
#content .avatar
{
	float: right;
    background-color: #fff;
	border: none;
    margin: 0;
    padding: 0;
}