@import "../../libs/css/reset.css";

/*==================================*/
/*--------- Global Defaults --------*/
/*==================================*/
html, body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #666666;
	background-color: #d6d6d6;
	height: 100%;
}

/*==================================*/
/*---- Global Layout/Structure -----*/
/*==================================*/
.clear {clear: both;}
#wrap-site {
	width: 960px;
	margin: 10px auto 0;
	padding: 27px 0 0;
	background: transparent url(../img/bg_top.png) scroll left top no-repeat;
}
#wrap-body {
	padding: 0 12px 20px;
	background: transparent url(../img/bg_center.gif) scroll left top repeat-y;
}
#header img {
	float: left;
	padding: 10px 0 0 30px;
}
#nav-secondary {
	float: right;
	width: 515px;
	margin-top: 66px;
	text-indent: -9999px;
	background: transparent url(../img/nav.jpg) scroll -423px -2px no-repeat; 
}
#nav-primary {
	clear:both;
	text-indent: -9999px;
	background: transparent url(../img/nav.jpg) scroll -1px -64px no-repeat;
	height: 49px;
}
#hero {
	clear: both;
	background: transparent url(../img/hero_bg.jpg) scroll left top no-repeat;
	height: 427px;
}
#wrap-content {
	clear: both;
	padding: 23px 23px 0;
	background: transparent url(../img/shadow.jpg) scroll left top repeat-x;
}
#content {
	padding: 10px 0 0 0;
	background-color: #fff;
}
#footer-body {
	height: 70px;
	background: transparent url(../img/bg_bottom.png) scroll left top no-repeat;
}
/*==================================*/
/*--------------- Nav --------------*/
/*==================================*/

/*---- Secondary Nav ----*/
#nav-secondary li {
	float: right;
}
#nav-secondary li a {
	display: block;
	height: 29px;
}

#nav-secondary #request-demo-btn a {width: 132px;}
#nav-secondary #request-demo-btn a:hover,
#nav-secondary #request-demo-btn.active a {background: transparent url(../img/nav.jpg) scroll -533px -32px no-repeat;}

#nav-secondary #dealer-locator-btn a {width: 127px;}
#nav-secondary #dealer-locator-btn a:hover,
#nav-secondary #dealer-locator-btn.active a {background: transparent url(../img/nav.jpg) scroll -665px -32px no-repeat;}

#nav-secondary #newsletter-signup-btn a {width: 146px;}
#nav-secondary #newsletter-signup-btn a:hover,
#nav-secondary #newsletter-signup-btn.active a {background: transparent url(../img/nav.jpg) scroll -792px -32px no-repeat;}

/*---- Primary Nav ----*/
#nav-primary li {
	float: left;
}
#nav-primary li a {
	display: block;
	height: 49px;
}

#nav-primary #home a {width: 97px;}
#nav-primary #home a:hover,
#nav-primary #home.active a {background: transparent url(../img/nav.jpg) scroll -1px -123px no-repeat;}

#nav-primary #product-tour a {width: 160px;}
#nav-primary #product-tour a:hover,
#nav-primary #product-tour.active a {background: transparent url(../img/nav.jpg) scroll -98px -123px no-repeat;}

#nav-primary #product-specs a {width: 169px;}
#nav-primary #product-specs a:hover,
#nav-primary #product-specs.active a {background: transparent url(../img/nav.jpg) scroll -258px -123px no-repeat;}

#nav-primary #faq a {width: 79px;}
#nav-primary #faq a:hover,
#nav-primary #faq.active a {background: transparent url(../img/nav.jpg) scroll -427px -123px no-repeat;}

#nav-primary #cost-calculator a {width: 193px;}
#nav-primary #cost-calculator a:hover,
#nav-primary #cost-calculato.active a {background: transparent url(../img/nav.jpg) scroll -506px -123px no-repeat;}

/*==================================*/
/*-------------- Text --------------*/
/*==================================*/

.italic {font-style: italic;}
.bold {font-weight: bold;}
.center {text-align: center;}

p {font-size: 0.86em /* 12px/14px = .86em */; padding-bottom: 10px;}

a {color: #f37736; text-decoration: none; font-weight: bold;}
a:hover {text-decoration: underline;}
a:visited {}

h1 {font-size: 1.57em /* 22px/14px = 1.57em */; color: #f37736; font-weight: bold; padding-bottom: 25px;}
h2 {font-size: 1.14em /* 16px/14px = 1.14em */; font-weight: bold; padding-bottom: 5px; color: #333333; text-transform: uppercase;}
h3 {font-size: 1.14em /* 16px/14px = 1.14em */; color: #000000; font-weight: bold; padding-bottom: 5px;}
h4, h5, h6 {}

#wrap-content ul {padding-bottom: 30px;}
#wrap-content ul li, #wrap-content ol li {}

sup {font-size: xx-small;}

/* FAQ */
dt {font-size: 1em /*14px/14px = 1em */; font-weight: bold; color: #333333;}
dd{font-size: 0.86em /*12px/14px = .86em */; color: #333333; padding: 0 0 20px 13px;}

/* Footer */
#footer p {font-size: 0.79em /* 11px/14px = .79em */; color: #636363; text-align: center;}
 
/*==================================*/
/*------------ Buttons -------------*/
/*==================================*/ 
a.button {
	display: inline-block;
	height: 53px;
	padding: 0 0 0 21px;
	background: transparent url(../img/buttons.png) scroll left -3px no-repeat;
	color: #ffffff;
	width: auto;
	text-transform: uppercase;
}
a.button:hover {
	text-decoration: none;
}
a.button span {
	display: inline-block;
	height: 53px;
	padding: 16px 43px 0 21px;
	background:transparent url(../img/buttons.png) scroll right -61px no-repeat;
}

a.button-tall {
	display: inline-block;
	height: 73px;
	padding: 0 0 0 21px;
	background: transparent url(../img/buttons.png) scroll left -119px no-repeat;
	color: #ffffff;
	width: auto;
	text-transform: uppercase;
}
a.button-tall:hover {
	text-decoration: none;
}
a.button-tall span {
	display: inline-block;
	height: 73px;
	padding: 14px 27px 0 5px;
	background:transparent url(../img/buttons.png) scroll right -194px no-repeat;
	text-align: center;
	line-height: 1.4em;
	font-size: 1.2em /*  */
}

/*==================================*/
/*-------------- Home --------------*/
/*==================================*/ 
/*---- Hero ----*/
#hero {
	padding-left: 27px;
}
#hero-flash-container {
	width: 617px;
	float: left;
}
#hero h1 {
	padding: 20px 0 13px 3px;
}
#hero-flash {
	float: left;
	height: 347px;
	width: 617px;
}
#hero-callout {
	float: left;
	padding: 90px 0 0 25px;
	width: 260px;
}
#headline-container {
	height: 178px;
	padding-top: 70px;
}
#hero-callout h1 {
	color: #000000;
	font-weight: bold;
	padding: 0 0 10px 5px;
}
#hero-callout h2 {
	font-size: 1.3em /* 18px/14px = 1.3em */;
	padding:0 0 0 5px;
	text-transform: none;
}

/*---- Content ----*/
#wrap-content.home {
	background: none;
}
.col {
	float: left;
}
.col.left {
	width: 70%;
}
.col.right {
	width: 30%;
	height: 347px;
}
.section {
	padding: 20px 20px 20px 0;
}
.section img {
	float: right;
}
.section.first {
	background: transparent url(../img/horizontal_gradient_border.gif) scroll center bottom no-repeat;
}
.sidebar {
	height: 100%;
	padding-left: 20px;
	background: transparent url(../img/vertical_gradient_border.gif) scroll 0 0 no-repeat;
}
.sidebar img {
	padding: 50px 0 24px 0;
}

/*==================================*/
/*------------- Tables -------------*/
/*==================================*/ 

table {
	border: 1px solid #cccccc;
	font-size: 0.86em /* 12px/14px = .86em */;
	line-height: 1.28em /* 18px/14px = 1.28em */;
}
td {
	width: 201px;
	border-right: 1px solid #e4e4e4;
	border-top: 1px solid #e4e4e4;
	padding: 4px 13px;
	text-align: center;
}

/* Striping/alignment classes assigned in _main.js */

td.noTopBorder {
	border-top: none;
}
td.noRightBorder {
	border-right: none;
}
.odd {
	background-color: #efefef;
}
.odd td {
	border-right: 1px solid #d4d4d4;
}

.leftAlign {
	text-align: left;
}