/* 
Title:		Fischer's Custom Cabinetry screen styles
Author: 	David Boyer
Email:		david.boyer@26tigers.com
Updated:	November 15, 2006
*/

/*---------Design Notes----------

	COLORS:
	Dark Blue Background: #292F33
	Orange Section Titles: #C34A27

---- end design notes */


/*----------Zero out elements----------*/

html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, input, address, blockquote {
	margin: 0; 
	padding: 0;
	border: 0;
}

/*----------Set body rule----------*/

body {
	background: #292F33 url(../i/bg_tile.gif) repeat-x; /* Sets the body background color and a background image that repeats on the x-axis. */
	font: 100.01% "Lucida Grande", Verdana, sans-serif; /* Sets the base font size and face. */
	color: #333333; /* Set default text to a dark gray. */
	text-align: center; /* KLUDGE: IE5.5 and IE6 in quirks mode doesn't understand auto marging. IE misunderstands text-align: center and centers everything. Must reset text to the left in the wrapper tag. */
	min-width: 800px; /* KlUDGE: Keeps Netscape 6 from spilling off the side of the page when viewport is reduced beloew wrapper width. */
}
/*----------Set Generic Link Rules----------*/
a:link {
	color:#7F4014;
	text-decoration:none;
}
a:visited {
	color:#7F4014;
	text-decoration:none;
}
a:hover {
	color:#2D3F3D;
	text-decoration:none;
}
a:active {
	color:#2D3F3D;
	text-decoration:none;
}

/*----------Sets the styles for the skip to navigation link----------*/

#skip {
	position: absolute; /* Sets the skip DIV to absolute to take it out of the flow of the document; this allows it to be placed in an exact location. */
	left: -3000px; /* Adds a high negative margin to take the skip DIV off the viewport so that visual visitors do not see it. */
}
.clear {
	clear: both;
}
/*----------Sets the width of the main wrapper that will contain all the other DIVs----------*/

#wrapper {
	width: 760px; /* Makes the main wrapper 760 pixels wide. */
	margin: 0 auto; /* Centers wrapper in viewport. */
	text-align: left; /* KLUDGE: Realigns text to the left for the IE fix. */
}

/*----------Sets the header area styles. ----------*/

#header {
	margin: 0;
	padding: 0;
	background: url(../i/bg_header.jpg) no-repeat; /* Sets the header background image with no repeat. */
	height: 162px; /* Sets the height of the header DIV to the height of its background image. */
	width: 760px; /* Sets the header width the same as its background image. */
	position:relative; /* Needed to allow for the absolute postioned nav tabs otherwise the tabs would postion relative to the viewport. */
}
#header h1 {
	float:right;
	text-indent: -9000px;
	}
/*----------Tabbed Navigation Area ----------*/
ul#navtabs {
	position:absolute;
	top: 134px;
	left: 295px; /*Set to 295px */
	width: 423px;
	height: 28px;
}
ul#navtabs li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	float: left;
	text-indent: -9999px;
}
ul#navtabs li a {
	border: 0;
	text-decoration: none;
	display: block;
	background: transparent url(../i/navtabs.jpg) no-repeat;
}
li#philosophy_tab a {
	width: 135px;
	height: 28px;
}
li#work_tab a {
	width: 144px;
	height: 28px;
}
li#contact_tab a {
	width: 144px;
	height: 28px;
}
li#philosophy_tab a:link, li#philosophy_tab a:visited {	
	background-position: 0px 0px;
	}
li#philosophy_tab a:hover, li#philosophy_tab a:focus {
	background-position: 0px -28px;
}
li#work_tab a:link, li#work_tab a:visited {	
	background-position: -135px 0px;
	}
li#work_tab a:hover, li#work_tab a:focus {
	background-position: -135px -28px;
}
li#contact_tab a:link, li#contact_tab a:visited {	
	background-position: -279px 0px;
	}
li#contact_tab a:hover, li#contact_tab a:focus {
	background-position: -279px -28px;
}

/*----------Navigation Bar ----------*/
ul#navbar {
	margin: 0;
	padding: 0 0 0 25px; /* Pushes the menu text to the right. */
	background:url(../i/bg_navbar.jpg) no-repeat;
	list-style:none;
	float: left; /* Float the parent to display floated childern. */
	height: 35px;
	width: 759px;
}
ul#navbar li {
	float:left; /* Float left to display link hoziontally. Need to float the parent as well. */
}
ul#navbar a {
	font: bold 75%/35px "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	display: block;
	padding: 0 15px 0 0; /* Vertically centers text. */
	text-decoration: none;
	text-transform: uppercase;
}
ul#navbar li a:link, ul#navbar li a:visited {
	color: #666666;
}
ul#navbar li a:hover, ul#navbar li a:active {
	color: #DE5728;
}
/*----------Sets the content_wrapper DIV.----------*/ 

#content_wrapper {
	width: 759px;
	padding: 1px 0 1px 0; /* Adds one pixel of top and bottom padding to prevent margin escaping. */
	background: url(../i/bg_body.jpg) repeat-y; /* Sets the main content area background image. Repeats it on the y-axis. */
}
#content_wrapper_singleblack {
	width: 759px;
	padding: 1px 0 1px 0; /* Adds one pixel of top and bottom padding to prevent margin escaping. */
	background: url(../i/bg_bodyblack.jpg) repeat-y; /* Sets the main content area background image. Repeats it on the y-axis. */
}
#content_wrapper_single {
	width: 759px;
	padding: 1px 0 1px 0; /* Adds one pixel of top and bottom padding to prevent margin escaping. */
	background: url(../i/rotate/bg_bodysingle.jpg) repeat-y; /* Sets the main content area background image. Repeats it on the y-axis. */
}
/*---------- Primary Content Styling and Positioning ----------*/ 
#primary_content {
	float: left;
	padding: 15px 0 25px 0;
	width: 409px; /* 15px short of 424px width to create virtual gutter. */
}
#primary_content p, ul, h1, h2, h3, h4, address {
	padding: 0 0 0 25px; /* By placing padding on the content instead of the element IE's box model problem is avoided. */
}
#primary_content p {
	clear:both;
	font-size: 70%;
	line-height: 1.5em;
	padding-top: 10px;
}
#primary_content b {
	color:#7F4014;
}
#primary_content h1 {
	font-size: 145%
}
#primary_content h2 {
	font-size: 105%;
	color: #666666;
	font-weight: normal;
	line-height: 1.3em;
	font-style: italic;
}
#primary_content h4 {
	font: bold 125% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	color: #0555A4;
	margin: 0;
}
#primary_content ul {
	font-size: 70%;
	line-height: 1.5em;
	padding: 10px 0 10px 25px;
	list-style: none;
	margin: 0;
}
#primary_content ul li {
	padding: 0 0 5px 20px;
	margin:0;
	background: url(../i/bullet_orange.gif) no-repeat left top;
}
#primary_content p.quoted {
	color: #CC6600;
	line-height: normal;
	background: url(../i/bg_quotes.gif) no-repeat 25px 35px;
	padding: 25px 0 0 145px;
}
#primary_content p.quoted b {
	font-size: 135%;
}
#primary_content p.quoted b.author {
	font-size: 110%;
	color: #7D3F20;
	font-style: italic;
	padding-left: 25px;
}
#primary_content h4.question {
	color: #CC6600;
	background: url(../i/q.gif) no-repeat 25px 25px;
	padding: 30px 0 15px 90px;
	font: bold 95% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
}
#primary_content blockquote.answer p {
	background: url(../i/a.gif) no-repeat 45px top;
	padding: 0px 0 0 110px;
	margin:0;
}

/*---------- Secondary Content Styling and Positioning ----------*/ 
#secondary_content {
	padding-top: 15px;
	float: right;
	width: 315px; /* 10px short of 335px width to create virtual gutter. */
}
#secondary_content p {
	font-size: 55%;
	line-height: 1.5em;
	padding: 10px 25px 0 0;

}
/*---------- Single Content Styling and Positioning ----------*/ 
#single_content {
	padding: 15px 0 25px 0;
	width: 740px;
}
#single_content p, ul, h1, h2, h3, h4, address {
	padding: 0 25px; /* By placing padding on the content instead of the element IE's box model problem is avoided. */
}
#single_content p {
	font-size: 70%;
	line-height: 1.5em;
	padding-top: 10px;
}
#single_content b {
	color:#7F4014;
}
#single_content h1 {
	font-size: 145%
}
#single_content h2 {
	font-size: 105%;
	color: #666666;
	font-weight: normal;
	line-height: 1.3em;
	font-style: italic;
}
#single_content h4 {
	font: bold 125% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	color: #0555A4;
	margin: 0;
}
#single_content ul {
	font-size: 70%;
	line-height: 1.5em;
	padding: 10px 0 10px 25px;
	list-style: none;
	margin: 0;
}
#single_content ul li {
	padding: 0 0 5px 20px;
	margin:0;
	background: url(../i/bullet_orange.gif) no-repeat left top;
}
#single_content h4.projecttitle {
	font: bold 125% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	color: #0555A4;
	margin: 0;
	background: url(../i/hammerscrewdriver_icon.gif) no-repeat 25px;
	padding-left:85px;
	line-height:47px;
}
/*---------- Image styling ----------*/ 
.rotatepic {
	background: url(../i/rotate/rotate.php) no-repeat left top;
	height: 358px;
}
.project_pic {
	float: left; 
	margin: 10px 0 0px 25px; 
	height: 109px; 
	border: 5px solid #E7E4DD;
}
.section_pic {
	float: left; 
	margin: 0 15px 0 0; 
	height: 109px; 
	border: 5px solid #E7E4DD;
}
.logostack {
	margin:0;
	padding: 7px 0;
}
/*---------- Single Content Styling and Positioning ----------*/ 
#single_content {
	float: left;
	padding: 0 0 0 9px;
}

/*---------- Sets style for address  ----------*/	
address  {
    font-size: 80%;
    font-weight: bold;
	font-style:normal;
}
.adr {
    color: #C34A27;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: -1px;
}

/*---------- Section Title Styling ----------*/ 
h3.rightsectiontitle {
	color: #C34A27;
	display: block;
	border-bottom: solid 1px #CDCCCB;
	margin-right: 10px;
	padding:0 0 4px 15px;
	font: bold 100% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	font-style:italic;
	background: transparent url(../i/bg_pinetreeicon.gif) no-repeat left;
	letter-spacing: -1px;
}
h3.leftsectiontitle {
	color: #C34A27;
	display: block;
	border-bottom: solid 1px #CDCCCB;
	margin-left: 10px;
	padding:0 18px 4px 0;
	font: bold 100% "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	font-style:italic;
	text-align: right;
	letter-spacing: -1px;
	background: transparent url(../i/bg_pinetreeicon.gif) no-repeat right;
}
.section {
	float:right;
	padding: 10px 8px 8px 8px;
	margin: 10px 10px 0 0; /* Pushes the background over into the content area. */
	border-bottom: 3px double #E5E5DA;
	background: #FFFFFF url(../i/bg_sectionarea.jpg) repeat-x top;
}
.section p {
	font-size: 55%;
	line-height: 1.5em;
	padding: 10px 0 0 0;
	color:#666666;
}
.section a {
	color:#0555A4;
}
.section h4 {
	font: bold 90%/1.0em "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	color: #0555A4;
}



/*----------Decorative Link Rules: Need to be at bottom to prevent overide by other link styles----------*/	
div.section span.gradbox a:link {
	float:right;
	display:block;
	color: #666666;
	width:75px;
	background: #FFFCFA url(../i/bg_gradlink.jpg) no-repeat right top;
	padding: 2px 12px 2px 2px;
	border: 1px solid #9D9C9C;
	line-height: normal;
	margin: 10px 10px 0 0;
}
div.section span.gradbox a:hover {
	color:#0555A4;
	background: #FFFCFA url(../i/bg_gradlink_over.jpg) no-repeat right top;
}

/*----------Sets stickerstar list style.----------*/
img.stickerstar {
	float:left;
	padding: 10px 0 0 30px; /* Pushes the star to the left off the border. */
}
#primary_content ul.stickerstar {
	font-size: 70%;
	line-height: 1.5em;
	padding: 15px 0 10px 95px; /* Pushes the text left of the sticker star. */
	list-style: none;
	margin: 0;
}
#primary_content ul.stickerstar h4 {
	color: #0555A4;
	font: bold 130%/normal "Trebuchet MS", "Trebuchet", Trebuchet, "Lucida Grande", Verdana, Arial, sans-serif;
	padding: 0 0 5px 0;
	margin:0;
}
#primary_content ul.stickerstar li {
	padding: 0 0 8px 20px;
	margin:0;
	background: url(../i/bullet_orange.gif) no-repeat left top;
}
/*----------Sets Feature Projects style.----------*/
div.projects {
	margin:15px 0;
	float:left;
}


/*----------Tidbits----------*/
#primary_content a.top {
	padding-left: 375px;
	font: 55% Geneva, Arial, Helvetica, sans-serif;
}
	

/*----------Sets the styles for the footer area.----------*/

#footer {
	clear: both; /* Makes sure both floated columns in the main area are clear of content before the footer begins. */
	background: url(../i/bg_footer.jpg) no-repeat; /* Sets the non-repeating background image on the footer */
	width: 759px; /* Sets the width of the footer DIV to 759 pixels. */
	padding: 80px 0 30px 0; /* Pushes the text down so it starts after the footer image. */
}

#footer p {
	font-size: 60%; /* Sets the font size of footer paragraph text. */
	color: #999; /* Sets the text color to white. */
	text-align: center; /* Aligns footer paragraph text in the middle of the div. */
	line-height: 30px;
}
#footer a {
	color: #999; /* Sets links in the footer to white. */
}
.octag {
	padding: 12px 0 12px 30px;
	background: url(../i/icon_outdoorclick.gif) no-repeat 0 center;
}