﻿/* CSS Document */


/*
	Position Elements
	
	Basically the page is wired fairly simply.  There is a constant background image
	that establishes the drop shadow.  Then we use a header and a footer element to 
	write over the drop shadow at the correct junctures.   A tent pole element is
	introduced to keep a short page from showing it's slip at the bottom of the page.
*/

#header {
	/*
		Establishes a 990px by 40px buffer at the top center of the page.  Base
		positioning area.
	*/
	text-transform: capitalize;
	text-align: right;
	font-size: 8pt;
	font-weight: bold;
	width: 990px;
	height: 40px;
}
#contentsheet {
	/*
		Eastablishes the content area.  This area is delibrately 20px shorter than
		the header and footer element.  This is to allow the drop shadow on the background
		image to come through on the left and right of this container element.
		
		*/
	width: 970px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
}
#dropshadow_bottom {
	/*
		Establishes a 990px buffer at the bottom of the page.  I'd like to see this 
		be 100px tall instead of 10px and I've requested the images to make that happen.
	*/
	height: 100px;
	width: 990px;
	padding: 0px;
	margin: 0px;
}
#header_fill {
	/*
		Although the header is 990px wide to cover up the drop shadows, we actually want a 
		970px area for the text to fill in here.  I'm wondering if this shouldn't actually
		be 990px with a 20px right padding to keep the global menu items in line.
	*/
	width: 970px;
	height: 50px;
	float: left;
}
#brandingbar {
	/*
		This is the bar at the top of the page with the logo placement.
	*/
	width: 650px;
	height: 120px;
	float: left;
}
#timestamp {
	width: 250px;
	height: 60px;
	float: right;
	padding-top: 56px;
}

#herospotband {
	/*
		The herospot can be an image or flash element cut to any of the ways shown in the 
		webstandards.	
	*/
	width: 970px;
	height: 250px;
	float: left;
}

#contentalley {
	/*
		Container for content below the herospot and navbar/keybrands area.
	*/
	width: 970px;
	float: left;
}
#contentalley_content {
	/*
		contentalley contains some additional vertical buffer areas.  This element serves to store
		actual content in the content alley section.
	*/
	width: 970px;
	float: left;
}
#contentalley_navcolumn {
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 230px;
	float: left;
}
#contentalley_threecolumns {
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 390px;
	float: left;
}
#contentalley_splitcolumns {
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 440px;
	float: left;
}
#contentalley_largecolumn {
	/*
		A possible breakdown of the contentalley with this element.
	*/
	padding: 0px;
	margin: 0px;
	width: 635px;
	float: left;
}



#footer {
	/*
		Area for the copyright information to be.
	*/
	padding-top: 12px;
	padding-left: 30px;
	height: 90px;
	float: left;
}
#gutternarrow_line_white {
	/*
		a white line.
	*/
	width: 970px;
	height: 1px;
	float: left;
}
#gutternarrow_line_white_short {
	/*
		a white line.
	*/
	width: 665px;
	height: 1px;
	float: left;
}
#gutternarrow_line {
	
	width: 970px;
	height: 1px;
	float: left;
}
#nav_bar {
	
	margin: 0px;
	padding: 0px;
	width: 970px;
	height: 30px;
	float: left;
	font-size: 14pt;
	font-weight: bolder;
}
#nav_bar_d {
	
	width: 970px;
	height: 30px;
	float: left;
	background-color: #CC0000
}
.nav_barsub {
	width: 200px;
	color: #333333;
	margin-left: 5px;
	padding-left: 5px;
	font-size: 10pt;
}
#gutterstandard_full {
	/*
		Vertical gutter of 30px to seperate content in the content alley.
	*/
	width: 970px;
	height: 30px;
	float: left;
}
#gutterstandard_full2 {
	/*
		Vertical gutter of 30px to seperate content in the content alley.
	*/
	width: 970px;
	height: 11px;
	float: left;
}
#gutterstandard_half {
	
	width: 970px;
	height: 10px;
	float: left;
}
#gutter_content {
	/*
		30px gutter block to serve a wedge where needed.
	*/
	width: 30px;
	height: 30px;
	float: left;
}
#gutter_content_interior {
	width: 20px;
	height: 60px;
	float: left;
}
#categorypage_image {
	/*
		This is the optional image area on the secondary page template.
	*/
	width: 665px;
	height: 222px;
	padding: 0px;
	margin: 0px;
}
#categorypage_image img {
	/*
		More attempts to keep the picture right aligned.  
	*/
	text-align: right;
}
#content_horizontalspace {
	/*
		Needed for internal buffers.
	*/
	width: 100%;
	height: 30px;
}
#contentalley_categorypage {
	/*
		Early attempt at a right aligned picture for the template.
	*/
	width: 665px;
	float: right;
}
#contentalley_searchpage {
	/*
		Early attempt at a right aligned picture for the template.
	*/
	width: 970px;
	float: right;
}
#gutter_content_right {
	
	padding-right: 30px;
}

#tent_pole {
	
	padding: 0px;
	width: 30px;
	float: left;
}
/*
	Text Elements.
*/

* {
	/*
		Going for the universal with IE.
	*/
	/*
	padding: 0px;
	margin: 0px;
	*/
	font-family: Helvetica, sans-serif;
	font-size: 13px;
}
body {
	/*
		And here is the attempt for Firefox.
	*/
	padding: 0px;
	margin: 0px;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
}
a {
	text-decoration: none;
}
hr {
	height: 1px;
}
/*
	Global nav is the top right items.
*/
a.global_nav:link {
	font-size: 13px;
	text-decoration: none;
	font-weight: normal;
}
a.global_nav:visited {
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
}
/*

	nav_category is the left navigation element.  Text decoration is manually set to be none, effectively overriding any other global setting for it.

*/

.nav_category {
	padding-bottom: 15px;
	padding-top: 10px;
	width: 230px;
}
a.nav_category:link {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-decoration: none;
}
a.nav_category:visited {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-decoration: none;
}
.nav_category2_area {
	padding-top: 12px;
	padding-bottom: 6px;
}
a.nav_category2:link {
	font-size: 14px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category2:visited {
	font-size: 13px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category2_on:link {
	font-size: 13px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category2_on:visited {
	font-size: 13px;
	line-height: 14px;
	text-decoration: none;
}
.nav_category3_area {
	padding-left: 8px;
	padding-bottom: 4px;
}
a.nav_category3:link {
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category3:visited {
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category3_on:link {
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
}
a.nav_category3_on:visited {
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
}
.nav_category4 {
	font-size: 11px;
	line-height: 14px;
	text-decoration: none;
}
.nav_category4_area {
	padding-left: 16px;
	padding-bottom: 2px;
}
/*
	IE7 clears the white of contentarea to the bottom of the page.  Firefox does not.  
	This makes sure it does.
*/
.clear {
	clear: both;
}
.titlePage {
	/*
		Exactly what it says it is.
	*/
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
}
.quotes {
	/*
		Customer's sidebar quotes.
	*/
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	color: #096;
}

.highlightColumn {
	font-size: 12px;
	line-height: 16px;
}

.copyright {
	font-size: 11px;
	line-height: 13px;
}
.text {
	/*
		Normal Text
	*/	
	color: #666666;
	font-size: 14px;
	line-height: 19px;
}
.textsmaller {
	/*
		Normal Text smaller
	*/
	font-size: 10px;
	line-height: 15px;
}
.hometext {
	/*
		Text on the home page.
	*/
	font-size: 14px;
	line-height: 16px;
}
.hometextlinks {
	font-size: 12px;
	line-height: 14px;
}
.headlines {
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	color: #666;
}
.texthead {
	font-size: 12px;
	line-height: 16px;
}
#table.transit {
	border: 4px;
	border-spacing: 10px;
	color: #CC0000;
	font-size: 16px;
}
td.transit {
	color: #996666;	/*padding: 0px; */	/*vertical-align: top; */
}
td.nav {
	padding: 0px;
	vertical-align: middle;
}
td.global_nav_table {
	vertical-align: middle;
	font-weight: normanl;
	color: #999;
}
td.thumbnail {
	padding: 0px;
	vertical-align: middle;
}
