/* ------------------------------------------------------------------------------------------------------
   CSS STYLES & DIV/TABLE DEFINITIONS FOR PAGES APPEARING IN THE MAIN SITE WINDOW 
   ------------------------------------------------------------------------------------------------------*/



/* ------------------------------------------------------------------------*/
/* "WRAPPER" ID SELECTORS FOR DIVS AND TABLES -----------------------------*/


body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #1D1D1D;
	background-position: 0 123px;
	background-repeat:repeat-x;
	text-align: center;
	
}


/* Container for Top Navigation, Content Area, and Footer) */

#wrapper {
	width:780px;
	margin: auto;
}





/* ----------------------------------------------------------------------------------------------------------------------------*/
/* TOP NAVIGATION AREA  -------------------------------------------------------------------------------------------------------*/

#head {
	background-position: center;
    width:780px;
	height:136px;
    margin: 0px auto;
}


#pageTop {
	width:780px;
	text-align:left;
}

#logo {
	margin: 79px 9px 0 0;
	float: right;
}

#topNav {
	padding-left: 21px;
}


/* Styles for the presentation of main navigation links */

#topNav table td {
	padding-right:17px;
	}

#topNav ul
{
	list-style-type: none;
	font-size: 0px;  /* Try to keep the nav from breaking when user zooms text */
}

#topNav ul li { 
	display: inline;
	padding: 0 6px;
	font-size: 0px;  /* Try to keep the nav from breaking when user zooms text */
}



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* SUB NAVIGATION AREA  -------------------------------------------------------------------------------------------------------*/


/* This is a table with a set width that contains the subnav. It will be positioned in relation 
to the corresponding main nav button, with center-aligned contents, and wide enough to allow text 
zooming of the subnav text without pushing the text off-center from the main nav button, which is 
what happens without this wrapper. Width and position will be defined in the layout. */

#subNav_wrapper{
	text-align: center;
}


/* This gives us the hairline borders on the left and right of subnav box (contains the subnav links)
   We'll have to set these both up as tables for stretching issues. There will be in-line CSS to set 
   horizontal placement in relation to each section nav button */

#subNav_borders {
	height: 118px;
	padding: 0 1px;
	background-image:url(../images/shared/subnav_borderFade.gif);
	background-repeat:repeat-x;
	text-align: center;
}

.subNav {
	height: 118px;
	padding: 0 15px 20px;
	text-align:center;
	font-size: 9px;
	color: #FFFFFF;
	text-transform: uppercase;
	background-image:url(../images/shared/subnav_bgFade.gif);
	background-repeat:repeat-x;
	
}

/* Styles for the presentation of subnavigation links */

.subNav ul{
	list-style-type: none;
	}
	
.subNav ul li{
	padding: 3px 0;
	}

.subNav a:link {
	color: #AFAFAF;
	text-decoration: none;
}
.subNav a:visited {
	color: #AFAFAF;
	text-decoration: none;
}
.subNav a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
.subNav a:active {
	color: #FFFFFF;
	text-decoration: none;
}


/* This defines the main positioning of the little orange 
section indicator. There will be in-line CSS to set horizontal 
placement in relation to each section nav button */

#sectionMarker {
	margin-top: 15px;
	width: 61px;
}



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* MAIN CONTENT AREA  ---------------------------------------------------------------------------------------------------------*/

#pageContent_wrapper {
	width: 780px;	/*min-height: 440px;*/
	margin: 0px auto;
	z-index: 500;
}
	
#pageContent_topBorder {
	width: 780px;
	height: 17px;
	/*background-color:#0099CC*/
}

#pageContent_bottomBorder {
	width: 780px;
	height: 17px;
	/*background-color:#0099CC*/
}

#pageContent {
	width:778px;
	border-left: 1px solid #444444;
	border-right: 1px solid #444444;
	text-align:left;
	margin: 0;
	padding: 0;
	padding-top: 0px;
	/* min-height: 407px; */
	/*background-color:#99CC00*/
}

#column1 {
	float:left;
	width:460px;
	margin: 20px 0px 20px 15px;
	display: inline;
    }
	
#columnwide {
	float:left;
	width:730px;
	margin: 20px 0px 20px 15px;
	display: inline;
    }	
	
#column2 {
	float:right;
	width:247px;
	margin: 20px 15px 20px 0px;
    }	
	
div.clear {clear: both}	



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* MAIN TEXT/CONTENT AREA  ----------------------------------------------------------------------------------------------------*/

#textArea {
	width:465px;	
	margin: 0 0 0 290px;
	/* min-height: 407px; */
	/*background-color:#FF3366;*/
}

/* Although page headlines are graphics for custom font, 
hey are still enclosed in <H1> tags for accessibility purposes */

#textArea h1 {
	margin-bottom: 30px;
	margin-top: 30px;
}

/* Text Subheads */

#textArea h2 {
	font-size: 10px;
	font-weight:bold;
	line-height: 12px;
	color: #D08731;
	margin: 0 0 5px;
	text-transform: uppercase;
}

#textArea p {
	font-size: 10px;
	line-height: 17px;
	color: #AFAFAF;
	margin: 0px 0px 10px;
}


#textArea a:link {
	color: #D08731;
	text-decoration: none;
}
#textArea a:visited {
	color: #D08731;
	text-decoration: none;
}
#textArea a:hover {
	color: #D08731;
	text-decoration: underline;
}
#textArea a:active {
	color: #D08731;
	text-decoration: none;
}

#textArea2 {
	width:710px;	
	margin: 0 0 0 50px;
	/* min-height: 407px; */
	/*background-color:#FF3366;*/
}

/* Although page headlines are graphics for custom font, 
hey are still enclosed in <H1> tags for accessibility purposes */

#textArea2 h1 {
	margin-bottom: 30px;
}

/* Text Subheads */

#textArea2 h2 {
	font-size: 10px;
	font-weight:bold;
	line-height: 12px;
	color: #D08731;
	margin: 0 0 5px;
	text-transform: uppercase;
}

#textArea2 p {
	font-size: 10px;
	line-height: 17px;
	color: #AFAFAF;
	margin: 0px 0px 10px;
}


#textArea2 a:link {
	color: #D08731;
	text-decoration: none;
}
#textArea2 a:visited {
	color: #D08731;
	text-decoration: none;
}
#textArea2 a:hover {
	color: #D08731;
	text-decoration: underline;
}
#textArea2 a:active {
	color: #D08731;
	text-decoration: none;
}
/* CSS styles for list objects have been moved into 
two seperate files (standard & IE) to be loaded 
dynamically depending on user's browser type  */



/* QUOTE BOX  ---------------*/

#quote {
	width:484px;
	position:relative;
	z-index:1;
	visibility: visible;
	margin-top: 30px;
	margin-left:-16px;
	margin-right:-25px;
	left: 245px;
}


/* PRODUCT "CUT-AWAY" IMAGES  (Products Section Only) ---------------*/

#productCutAway {
	width:234px;
	position:relative;
	z-index:1;
	visibility: visible;
	margin-top: 10px;
	margin-right:0px;
	left: -1px;
}

.subNav ul{
	list-style-type: none;
	}
	
.subNav ul li{
	padding: 3px 0;
	}



/* ADDITIONAL RESOURCE LINKS w/ HORIZ RULES  (Spech Sheets, Driving Directions, etc) ---------------*/

#addResourceLink {
	margin-bottom: 10px;
}

#addResourceLink p {
	margin:0;
	padding:0;
	font-size: 9px;
	line-height: 10px;
}



/* ----------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER AREA  ---------------------------------------------------------------------------------------------------------------*/

#footerArea {
	width: 780px;
	height: 25px;
	margin: 3px auto 0px;
}	

.footer {
	font-size: 9px;
	color: #5A5A5A;
	line-height: 10px;
	margin-left: 29px;
	margin-top: 8px;
	text-align: left;
	padding-bottom: 10px;
}


.footer a:link {
	color: #AFAFAF;
	text-decoration: none;
}
.footer a:visited {
	color: #AFAFAF;
	text-decoration: none;
}
.footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.footer a:active {
	color: #FFFFFF;
	text-decoration: none;
}