/* 
========================================================================================================= CREDITS
Copyright : Copyright (c) 2008 JPL & SPANCO. All Rights Reserved.
Author(s) : Larry Daughenbaugh - ldaugh@jplcreative.com 
Date      : 07/8/2008 
Notes     : CSS file for public web site home page only.
========================================================================================================= CHANGE LOG
Date		Name			Desc
---			---				---
========================================================================================================= BEGIN CSS
*/
body  {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 17px;
	text-align: center;
	color: #022073;
	background: url(/lib/img/bg-body.jpg) repeat center top;
}
img { border: none; }

/* ====================================================================================================== HEADER CONTENT */

.hdr-container { width: 100%; margin: 0 auto; padding: 0px; background: url(/lib/img/header/bg.jpg) repeat-x center top; } 
.hdr {
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	width: 968px;
	height: 46px;
	text-align: right;
	background: url(/lib/img/header/bg-login-sp.gif) no-repeat right top;
	color: #FFF;
}
.hdr a { padding: 0px 8px; color: #A7CAEC;	text-decoration: none; vertical-align:middle; }
.hdr img { vertical-align:text-bottom; }
.hdr a.login { padding: 0px 11px; color: #FFF; font-weight: bold; text-decoration: none; }

.hdr a:hover, .hdr a:active { color: #FFF; text-decoration: none; }

.logo { padding: 15px 0px 0px 0px; }

/* ====================================================================================================== MAIN CONTENT */

.main-container { width: 100%; margin: 0 auto;	padding: 0px; background: url(/lib/img/bg-main.jpg) repeat-x center top; } 
.main {	margin: 0 auto;	padding: 0px;  width: 968px; text-align: left; }

.column-left-container { width: 243px; float: left; }
.column-right-container { width: 725px;	float: left; }

/* ====================================================================================================== HOME NAVIGATION */
.navigation ul { margin: 25px 0px 0px 0px; padding: 0px; list-style-type: none; }
.navigation ul li { display: block; width: 243px; }
.navigation div.contact-rep { display: block; width: 243px; height: 30px; background: url(/sp//lib/img/navigation/contact.gif) no-repeat; }

.navigation ul li a.products 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/products.gif) no-repeat; }
.navigation ul li a.solutions 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/solutions.gif) no-repeat; }
.navigation ul li a.buy 		{ display: block; height: 30px; background: url(/sp/lib/img/navigation/how-to-buy.gif) no-repeat; }
.navigation ul li a.promise 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/our-promise.gif) no-repeat; }
.navigation ul li a.support 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/customer-support.gif) no-repeat; }
.navigation ul li a.contact 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/contact.gif) no-repeat; }
.navigation ul li a.sales-rep 	{ display: block; height: 30px; background: url(/sp/lib/img/navigation/your-local-sales-rep.gif) no-repeat; }
.navigation ul li a.media 		{ display: block; height: 30px; background: url(/sp/lib/img/navigation/media.gif) no-repeat; }

/* move background graphic down to reveal hover state */
.navigation ul li a:hover, .navigation ul li a:active, .navigation ul li a.highlighted { background-position: 0px -30px; }

/* hide alternative text within links */
.navigation ul span { display: none; }

.rep-location {	padding: 5px 0px 5px 15px;	background: url(/lib/img/navigation/contact-bg.gif) repeat-y; }
.rep-location select { font-size: 11px; }

/* ====================================================================================================== SLIDESHOW CONTENT */

#slideshow-container { height: 408px; width: 723px; border: solid 1px #B7B7B7; background-color: #000; }
#slideshow { height: 408px; width: 723px; z-index: 100; }
#slideshow .no-flash {
	width: 662px;
	height: 343px;
	padding: 65px 15px 0px 46px;
	background: #000 url(/sp/lib/img/home/slideshow/flash-not-loaded.jpg) no-repeat;
	color: #FFF;
}
#slideshow-alt { visibility: hidden; }

#slideshow h3 { display: none; }
#slideshow a:link, #slideshow a:visited { color: #FFF; text-decoration: underline; }
#slideshow a:hover, #slideshow a:active { color: #FFF; text-decoration: none; }

.slideshow-col { width: 208px; height: 75px; padding: 7px 10px 9px 0px; float: left; line-height: 14px; }
.slideshow-col2 { width: 248px; height: 75px; padding: 7px 10px 9px 0px; float: left; line-height: 14px; }
.slideshow-col2r { width: 188px; height: 75px; padding: 7px 10px 9px 0px; float: left; line-height: 14px; }

.slideshow-col a:link, .slideshow-col a:visited, .slideshow-col2 a:link, .slideshow-col2 a:visited , .slideshow-col2r a:link, .slideshow-col2r a:visited 
{ color: #FFF; text-decoration: underline; font-size: 12px; font-weight: bold; line-height: 16px; }

.slideshow-col a:hover, .slideshow-col a:active, .slideshow-col2 a:hover, .slideshow-col2 a:active, .slideshow-col2r a:hover, .slideshow-col2r a:active 
{ color: #FFF; text-decoration: none; }

/* ====================================================================================================== CALLOUT CONTENT */

.callout-container { margin: 20px 0px 0px 0px; padding: 7px; border: solid 1px #B7B7B7; color: #575757; font-size: 12px; display: block; }

/* Height 1% set for IE6 not displaying bg properly */
.callout-container-inside { background: url(/lib/img/call-outs/bg.gif) repeat-y; margin: 0px; padding: 0px; height: 1%; }

.callout-container p { margin: 0px;	padding: 0px 0px 10px 0px; }
.callout-container img { border: none; }

.callout-left, .callout-right { padding: 10px 18px 10px 19px; float: left; }
.callout-left { width: 184px; }
.callout-right { width: 441px; margin: 0px 0px 0px 10px }

.callout-container .quote { font-weight: bold; color: #1A6CBA; }
.callout-container .quote-author { font-size: 11px; font-weight: normal; color: #1A6CBA; }

/* ====================================================================================================== CALLOUT CONTENT */

.footer {
	padding: 25px 0px 5px 0px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 10px; 
	color: #575757;
	text-align: center;
}
.footer p { margin: 0px; padding: 0px 0px 10px 0px; }
.small { font-size: 9px; }

.footer a.main { padding: 0px; font-weight: bold; color: #575757; text-decoration: none; }
.footer a.main:hover, .footer a.main:active { color: #000; text-decoration: none; }

.footer a {	padding: 0px; font-weight: normal; color: #575757; text-decoration: none; }
.footer a:hover, .footer a:active {	color: #000; text-decoration: none; }

/* ====================================================================================================== LOCAL SALES REP CONTENT */

#salesRepContainer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	color: #575757;
	width: 260px;
	position: absolute;
	z-index: 101;
	visibility: hidden;
	left: 0px;
	top: 0px;
	background: url(/lib/img/sales-rep/bg.gif) repeat-y;
	border-right: 3px solid #EBEBEB;
}
.local-sales-rep { padding: 0px 15px 0px 25px; width: 220px; background: url(/lib/img/sales-rep/rep-hdr-ftr.gif) no-repeat left bottom; }
.local-sales-rep h3 { display: none; }
.local-sales-rep p { margin: 0px; padding: 12px 0px; }
.local-sales-rep a:link, .local-sales-rep a:visited { color: #E15C02; }
.local-sales-rep a:hover, .local-sales-rep a:active { color: #022344; text-decoration: none; }

.rep-close { padding: 3px 0px 0px 0px; text-align: right; background: url(/lib/img/sales-rep/rep-hdr-ftr.gif) no-repeat left top; }
.rep-close img { margin: 0px; padding: 0px; }
.rep-name { font-size: 14px; font-weight: bold; }

/* show/close rep window buttons */
#btnCloseWindow, #btnShowWindow { cursor: pointer; outline: none; }

/* ====================================================================================================== FLOATS */

.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
img.photo-right { margin: 0px 0px 8px 8px; padding: 0px; float: right; }

div.photo-container-right { border: 1px solid #DBDAD8; margin: 0px 0px 0px 8px; padding: 5px; float: right; }
div.photo-container-right img { border: 1px solid #1A6CB8; }