body {
background:transparent url() no-repeat 50% 0;
font:normal 10px verdana, arial, helvetica, sans-serif; text-align:center;
margin:0px;
}
body.home  {background:#f0f0f0 url(../assets/images/html_bg.png) no-repeat 50% 468px;}
/* product popups */
body.product_snapshot {background-image:none;}
::-moz-selection {background:#134478;color:#fff;} 
::selection {background:#134478;color:#fff;}
a,a:link, a:visited {color:#084c93;}
a:hover, a:active, a:focus {color:#084c93;}	


#wrapper {width:980px; margin:0 auto; font:normal 10px Tahoma, helvetica, arial, verdana, sans-serif; z-index:0; position:relative; text-align:left;}

form {margin:0; padding:0; clear:both;}



h2 {margin:0;}
h2 a {
display:block;
height:90px;
width:260px;
text-indent:-9999px;
}




/**********************************************************************************************************
INTROS
- product and or page titles
- contains the intro areas for most sub pages
- Helvetica is a nice alternative to DIN, but try DIN first
- parent container of all sub navigation
**********************************************************************************************************/
.intro {
clear:both;
background:transparent url() no-repeat top right;
margin-right:31px;
height:54px;
overflow:hidden;
}
.product .intro {
background:transparent url(../assets/images/intro_bg_product.png) no-repeat top right;
margin-right:25px;
}
.products_page .intro,
.stores .intro,
.search .intro,
.error_404 {background-image:none;}
p.error {background-color:#ff0000; color:#fff; padding:4px;}
.intro h2 {
float:left;
margin-left:28px;
color:#535353;
font:normal 28px DIN-Medium, DIN, DIN-Light, helvetica, arial, verdana, sans-serif;
padding-top:7px;
}
.intro h2 span {
display:block;
font:normal 11px Tahoma, helvetica, arial, verdana, sans-serif;
position:relative;
top:-1px;
}

.builder .intro {
background-image:none;
background:transparent url(../assets/images/builder_steps.png) no-repeat 0 0;
padding:0;
width:895px;
height:48px;
margin-left:42px;
}
/* adjust background position based on the current step */
.builder .intro_step2 {background-position:0 -48px;}
.builder .intro_step3 {background-position:0 -96px;}
.builder .intro_step4 {background-position:0 -144px;}
.builder .intro_step5 {background-position:0 -192px;}

.builder .intro ul {margin:0;padding:0;}
.builder .intro li {
display:block;
float:left;
width:179px;
height:48px;
}
.builder .intro li a {display:block; text-indent:-9999px;height:48px;}
/*****************************************************
SUB_NAV
- non product sub navigation
*****************************************************/
ul.sub_nav {
float:right;
list-style:none outside;
text-align:right;
margin:20px 20px 0 0;
padding:0;
font:normal 11px Tahoma, helvetica, arial, verdana, sans-serif;
}
ul.sub_nav li {
display:inline;
padding:0 9px 0 10px;
background:transparent url(../assets/images/sub_nav_garnish.png) no-repeat center left;
}
ul.sub_nav li a,
ul.sub_nav li a:link,
ul.sub_nav li a:visited {
color:#373737;
text-decoration:none;
padding:0 4px;
}
ul.sub_nav li a:hover,
ul.sub_nav li a:active,
ul.sub_nav li a:focus,
ul.sub_nav li.current a,
ul.sub_nav li.current a:link,
ul.sub_nav li.current a:visited,
ul.sub_nav li.current a:hover,
ul.sub_nav li.current a:active,
ul.sub_nav li.current a:focus {color:#fff;background-color:#f39a00;}
/************************************************************************************************
PRODUCT_NAV
- big pretty buttons
- see global.js for CSS3
- we write .first_child and .last_child for IE via global.js
- the trans 24 pngs look fine in IE 6, so no need to overwrite
- keep our method of last_child as seperate declarations. We can NOT seperate the
declarations by commas
************************************************************************************************/
ul.product_nav {
float:right;
list-style:none outside;
text-align:right;
margin:10px 17px 0 0;
padding:0;
font:bold 11px helvetica, arial, tahoma, verdana, sans-serif;
}
ul.product_nav li {
display:block;
float:left;
padding:0;
margin:0;
}
ul.product_nav li:first-child,
ul.product_nav li.first_child {
padding-left:4px;
background:transparent url(../assets/images/sub_nav_bg_left.png) no-repeat 0 0;
}
ul.product_nav li:first-child:hover,
ul.product_nav li.first_child:hover,
ul.product_nav li.current:first-child,
ul.product_nav li.current {
background-position:bottom left;
}
ul.product_nav li a,
ul.product_nav li a:link,
ul.product_nav li a:visited {
background:transparent url(../assets/images/sub_nav_bg.png) no-repeat top right;
display:block;
float:left;
padding:10px 30px 0 30px;
height:24px;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-shadow:#000000 -1px 0px 3px;
}
ul.product_nav li:last-child a {background:transparent url(../assets/images/sub_nav_bg_right.png) no-repeat top right;}
ul.product_nav li.last_child a {background:transparent url(../assets/images/sub_nav_bg_right.png) no-repeat top right;}
ul.product_nav li a:hover,
ul.product_nav li a:active,
ul.product_nav li a:focus,
ul.product_nav li.current a {
color:#fff;
background-position:bottom right;
}
/*******************************************************************************
PRODUCT page
- Has an expandable height, BUT the background gradient gets a bit weird
when the height is way short.
- .product_hero_right the width "can" be 346px, but we keep it @ 300
- icons that are added by hand within the description
- we get VERY specific with product_content margins.
- the width of the brief_specs varies so much.
- duplicate product H1 as old class names in case Alpine's old
template files fail to be updated w/ the proper H1's
*******************************************************************************/
/*/.product_hero * {border:1px dotted #ff0000;} /**/
sup {
font-weight:normal;
font-size:10px;
}
.product_hero_top {
margin-left:10px;
height:36px;
background:transparent url(../assets/images/product_hero_top.png) no-repeat 0 0;
}
.product_hero {
clear:both;
overflow:auto;
background:transparent url(../assets/images/product_hero_bg.png) no-repeat bottom left;
margin-left:10px;
padding:0 0 18px 39px;
}
.product_hero h1,
.product_hero span.feat_title-blue {
color:#0f5baa;
font:bold 30px helvetica, arial, verdana, sans-serif;
line-height:31px;
}
.product_hero span.feat_title-blue {
display:block;
margin-bottom:16px;
}
.product_hero_left {
float:left;
width:505px;
}
/* see exploder.css, cea_logo.tpl.psd */
.product_hero_left p.power_rating
/* .product_hero_left p.brief_specs */ {
padding:39px 0 9px 88px;
background:transparent url(../assets/images/products/icons/cea_logo.png) no-repeat 0 0;
font-size:10px;
min-height:51px;
max-width:175px;
float:left;
margin:0 36px 0 0;
clear:left;
overflow:auto;
color:#000;
}
.product_hero_left p.power_rating a {
color:#000;
text-decoration:none;
}
.product_hero_left p.power_rating a:hover {
color:#000;
text-decoration:none;
}
.product_features {font-weight:bold}
.product_features ul {font-weight:normal}
/*************************************************************************************************
VIEWER (Product gallery, if used)
- do we need to make this work outside of .product_hero as well?
- keep it simple. Dont stress over IE 6 - those users will NOT miss a thing :)
- if we have time, lets add <img src="assets/images/viewer_overlay.png" /> to each LI
for the rounded corner effect (viewer_overlay.psd).
- this can really only contain 3 thumbnails when it sits next to the power_rating. If there's TOO much
content it will be pushed down to the next line, which is actually pretty darn perfect!
If this is an issue, I suggest swapping the .power_rating and the .viewer. mo' pretty but STILL needs 
some work in the IE's.
- product_viewer.tpl.psd
- viewer_arrow.psd
- we declare a width of 222px for IE6 in exploder.css
- we STILL use padding-bottom instead of margin-bottom on some of these floated elements.
Like we're living in the stone ages or something. IEEEEEEEEEEEEEE
*************************************************************************************************/
.product_hero ul.viewer {
margin:0;
padding:9px 0 9px 0;
list-style:none outside;
float:left;
}
.product_hero ul.viewer li {
display:block;
float:left;
margin:0 10px 0 0;
padding:0;
padding-top:29px;
}
.product_hero ul.viewer li img {
cursor:pointer;
}
.product_hero ul.viewer li {
display:block;
float:left;
width:64px;
height:46px;
}
.product_hero ul.viewer li.current,
.product_hero ul.viewer li:hover {
background:transparent url(../assets/images/viewer_arrow.png) no-repeat 0 0;
}
.product_hero ul.viewer li img {
opacity:.5;
filter:alpha(opacity=50);
}
.product_hero ul.viewer li.current img,
.product_hero ul.viewer li:hover img {
opacity:.9;
filter:alpha(opacity=100);
}
/*************************************************************************************************/					
.product_hero_right {
margin:20px 0 0 50px;
width:300px;
float:left;
font:normal 14px arial, helvetica, verdana, sans-serif;
color:#373737;
line-height:19px;
}
.product_hero_right p {
margin-bottom:12px;
}
.product_hero_right p.price {line-height:14px;}
.product_hero_right img {
margin-right:14px;
}
.product_hero_right small {
color:#ff6c00;
font-size:11px;
}
.product_content {
clear:both;
font-size:11px;
overflow:auto;
margin:36px 0 45px 38px;
font:normal 11px arial, verdana, helvetica, sans-serif;
}
.product_content_overview {margin-top:18px;}
/*************************************************************************************************
Overwrite product hero area for use on the SNAPSHOT pages
*************************************************************************************************/
/*/ .product_snapshot * {border:1px solid #ff0000;} /**/
.product_snapshot .product_hero {
background-image:none;
padding:0;
margin-top:4px;
margin-left:16px;
}
.product_snapshot .product_hero_left {
width:200px;
text-align:center;
}
.product_snapshot .product_hero_left img {margin:0 auto;}
.product_snapshot .product_hero_right {
margin:5px 0 0 10px;
font-size:11px;
line-height:12px;
width:230px;
}
.product_snapshot .product_hero h1 {
font-size:18px;
line-height:16px;
margin-bottom:4px;
}
.product_snapshot .product_hero h1,
.product_snapshot .product_hero span.feat_title-blue {
font-size:18px;
line-height:16px;
margin-bottom:4px;
}
/*************************************************************************************************
POSSIBLE (and definitive) PRODUCT CONTENT
- visited links are same color, as they're not terribly useful when there's
minimal links within the content (unless we make them drastically different, visually)
*************************************************************************************************/
.product_content h2,
span.feat_heading-blue {
display:block;
font:normal 18px helvetica, arial, verdana, sans-serif;
margin:0 0 9px 0;
clear:both;
}
.product_content p {
margin-bottom:24px;
line-height:18px;
}
.product_content em {font-style:italic;}
.product_content .highlight {color:#0f5baa;}
.product_content strong {font-weight:bold; color:inherit;}

.product_content a,
.product_content a:link,
.product_content a:visited {
color:#0f5baa;
text-decoration:underline;
}
.product_content a:hover,
.product_content a:active,
.product_content a:focus {
color:#fff;
text-decoration:none;
background-color:#084C93;
}
.product_content img.left {
text-align:left;
margin:0 9px 0 0;
display:inline;
}
.product_content img.right {
text-align:right;
margin:8px 0 0 12px;
display:inline;
}
.product_content ul {
list-style:none outside;
margin:0 0 24px 0;
padding:0 0 0 9px;
}
.product_content li {
background:transparent url(../assets/images/sub_nav_garnish.png) no-repeat 0 8px;
padding-left:16px;
line-height:18px;
}
/**********************************************************
Fine tune some things, if our browser can handle it.
-let's make sure these settings are OK in every scenario
**********************************************************/
.product_content p + ul {margin-top:-6px;}
/* if an .icon section immediately follows an H2, we add padding to the top so that the space between the h2 and .icon add up to 24px */
.product_content h2 + .icon {padding-top:15px;}
/* when H2's follow UL's, we need some more space for optical illusion purposes */
.product_content ul + h2 {padding-top:12px;}
.product_content .icon + h2 {padding-top:12px;}

/**********************************************************
ICONS within product content
- use icons.tpl.psd to create icons
- also see Fine tuning, above
- we NEED float:left on .icon for IE 6
- icon.tpl.psd
- icon_huge.tpl.psd
**********************************************************/
.product_content .icon {float:left;}
.product_content .icon h2 {
font:bold 12px arial, helvetica, verdana, sans-serif;
margin:0 0 9px 0;
color:#0f5baa;
clear:none;
}
.product_content .icon h2 a {
text-indent:0;
display:inline;
height:auto;
}
.product_content .icon img {
text-align:left;
margin:0 7px 0 0;
display:block;
float:left;
width:163px;
}
.product_content .icon * {
float:right;
width:255px;
}
.product_content .icon * * {
width:auto;
float:none;
}
.product_content .icon ul {
width:255px;
float:right;
padding:0;
overflow:auto;
}
.product_content .icon li {
display:block;
float:left;
width:95px;
background-position:left 6px;
}
/************************/
.product_content_left {
float:left;
width:425px;
padding-right:25px;
border-right:1px solid #f0f0f0;
}
.product_content_right {
float:left;
width:425px;
padding-left:25px;
}
/*********************************************************************************************************
PRODUCTS page
- /products/ - big list of Alpine products
- we use "products_page" to avoid confusion w/ the "product" classes used elsewhere on the site
- product_group_wrap - used to group items in threes
*********************************************************************************************************/
.products_page_content {
margin-left:45px;
width:906px;
}
.products_page_content .product_group_wrap {clear:both;}
.products_page_content .product_group {
background:transparent url(../assets/images/product_group_bg.jpg) no-repeat bottom left;
position:relative;
width:296px;
padding-bottom:18px;
margin-bottom:12px;
/*min-height maaaaay need some adjustments (FF has a hard time clearing .product_group if .product_group's above are taller than 290px.)*/
min-height:290px;
font-size:11px;
overflow:auto;
float:left;
}
.products_page_content .product_group h2 {
font:normal 18px helvetica, arial, verdana, sans-serif;
color:#535353;
margin-bottom:18px;
margin-left:5px;
line-height:18px;
position:absolute;
}
/* possible sub categories */
.products_page_content .product_group h3 {
clear:both;
margin:0 0 4px 10px;
font:normal 12px helvetica, arial, verdana, sans-serif;
}
/* category images */
.products_page_content img {
margin-top:34px;
margin-bottom:4px;
margin-left:0;
width:auto;
}
.products_page_content a.button {
width:70px;
padding-left:9px;
position:absolute;
top:120px;
left:175px;
}
/*accessories view_all button*/
.products_page_content .accessories a.button {top:18px;left:130px;}
.products_page_content ul {
overflow:auto;
list-style:none outside;
margin:0 0 0 10px;
padding:0 0 18px 0;
}
.products_page_content ul li {
display:block;
float:left;
width:45%;
padding-left:10px;
background:transparent url(../assets/images/sub_nav_garnish.png) no-repeat 0 5px;
}
.products_page_content ul a {
text-decoration:none;
}
.products_page_content ul a:hover {
color:#ff7200;
text-decoration:underline;
}
.products_page_content span {
color:#ff7200;
font-weight:bold;
}
/***********************************************************************
overwrite some things for the fancy footer items on the products_page
************************************************************************/
.products_page_content .group_summary {
width:870px;
background-image:none;
background-color:#f2f2f2;
padding:17px 30px;
margin-left:-25px;
min-height:0;
}
.products_page_content .group_summary h2 {
color:#336699;
position:relative;
}
.products_page_content .group_summary img {
float:left;
margin-left:30px;
}
.products_page_content .group_summary ul {
float:left;
overflow:auto;
list-style:none outside;
margin:0 0 0 20px;
padding:0 0 0 0;
width:450px;
}
.products_page_content .group_summary ul li {
display:block;
float:left;
width:100px;
padding-left:10px;
background:transparent url(../assets/images/sub_nav_garnish.png) no-repeat 0 5px;
}

.group_summary a,
.group_summary a:link,
.group_summary a:visited {color:#494949;}

.products_page_content .accessories {
clear:left;
padding:20px;
background-color:#f2f2f2;
overflow:auto;
margin-left:-15px;
position:relative;
}
.accessories a {
font-size:11px;
}
.accessories h2 {
font:normal 18px helvetica, arial, verdana, sans-serif;
color:#0B67C4;
margin-bottom:18px;
margin-left:5px;
line-height:18px;
}
.accessories ul {
float:left;
width:475px;
}
.accessories ul li {
float:left;
width:100px;
}
img#features {
margin:0px;
}
.products_category_content {
margin-left:45px;
width:906px;
}
.products_category_content .group {
overflow:auto;
margin-bottom:18px;
}
.products_category_content .group h2 {
font:normal 18px helvetica, arial, verdana, sans-serif;
color:#535353;
margin:18px 0 14px 5px;
line-height:18px;
}
.products_category_content .group .product {
position:relative;
float:left;
width:190px;
padding:10px 15px 10px 0;
margin-right:6px;
height:255px;
font-size:11px;
line-height:15px;
background:transparent url(../assets/images/product_group_category_bg.jpg) no-repeat bottom right;
}
.products_category_content .group .product h3 {
font-weight:bold;
font-size:12px;
margin:5px 8px 5px 15px;
}
.products_category_content .group .product p {
font-weight:normal;
font-size:11px;
margin:5px 8px 5px 15px;
}
.products_category_content .group .product a,
.products_category_content .group .product a:link,
.products_category_content .group .product a:visited {color:#084c93;}
.products_category_content .group .product a:hover,
.products_category_content .group .product a:active,
.products_category_content .group .product a:focus {color:#ff7200;}
.products_category_content .group .product span {
color:#ff7200;
font-weight:bold;
}
/* COMPARE */
p.compare_box {
margin-left:0;
position:absolute;
bottom:11px;
opacity:.5;
}
.compare_box:hover {opacity:.9;}
.compare_box {filter:alpha(opacity=50);}
.compare_box:hover {filter:alpha(opacity=100);}

input.compare_check {margin-left:0 ! important;}
.products_category_content .group .product a.compare,
.products_category_content .group .product a.compare:link,
.products_category_content .group .product a.compare:visited {
color:#2a2a2a;
text-decoration:none;
}
.products_category_content .group .product a.compare:hover,
.products_category_content .group .product a.compare:active,
.products_category_content .group .product a.compare:focus {
color:#2a2a2a;
text-decoration:underline;
}
/*********************************************************************
SYTEM CONFIGURATOR
- see .intro blocks for the steps listed across the top
*********************************************************************/
.builder_step1,
.builder_step2 {
text-align:center;
margin-bottom:65px;
overflow:auto;
min-height:400px;
}
.builder_step1 p,
.builder_step2 p {margin-bottom:0;}
.builder_step1 img.header_img,
.builder_step3 img.header_img,
.builder_step2 img.header_img {
margin:49px auto 30px auto;
display:block;
}
.builder_step2 img.header_img {margin-bottom:50px;}
.builder_step1 p.wants_desires,
.builder_step2 p.wants_desires {
margin:0 auto;
width:688px;
position:relative;
left:-1px;
}
/* this width may change based on items selected. If not, let's roll into just the .wants_desires class */
.builder_step2 p.wants_ipod {
width:457px;
}
/* "sub" images */
.builder_step1 p.wants_desires img,
.builder_step2 p.wants_desires img {
display:block;
float:left;
}
.builder_step3 {
margin-top:23px;
padding-left:30px;
padding-bottom:24px;
overflow:auto;
}
/********************************************************************
Systems within the builder
- how can we center these systems, when there's < 3?
********************************************************************/
.system {
float:left;
width:300px;
background:transparent url(../assets/images/builder_system_bg.png) no-repeat 0 0;
text-align:center;
padding-top:6px;
margin-right:6px;
position:relative;
}
.solo_system {margin-left:300px;}
.system img {margin:0 auto;}
.system div.price {
width:76px;
height:16px;
padding-top:8px;
padding-right:16px;
text-align:right;
position:absolute;
right:11px;
top:8px;
font:bold 14px helvetica, arial, verdana, sans-serif;
color:#fff;
text-shadow:#000000 -1px 0px 3px;
background:transparent url(../assets/images/builder_system_price_bg.png) no-repeat 0 0;
line-height:14px;
}
.components .system div.price {top:30px;}
.system div.price_sale {background-image:url(../assets/images/builder_system_price_bg.png) ! important ;}
/* template file:buider_select_customizer.psd*/
.system a.select_system {
display:block;
margin:0 auto;
text-indent:-9999px;
width:278px;
height:32px;
background:transparent url(../assets/images/builder_select_customize_buttons.png) no-repeat 0 0;
}
.system a.select_system:hover {background-position:0 -60px;}
.system a.customize_system {
display:block;
margin:0 auto;
text-indent:-9999px;
width:278px;
height:27px;
background:transparent url(../assets/images/builder_select_customize_buttons.png) no-repeat 0 -32px;
}
.system a.customize_system:hover {background-position:0 -92px;}
.system div.group {
background:#fff url(../assets/images/builder_group_bg.png) no-repeat 0 0;
width:278px;
margin:0 auto;
}
.system h2 {
font:bold 12px tahoma, arial, helvetica, verdana, sans-serif;
color:#105caa;
margin-bottom:4px;
color:#555;
padding:6px 0 16px 0;
text-transform:uppercase;
}
.price_final h2 {
font:normal 18px helvetica, arial, verdana, sans-serif;
color:#535353;
margin-bottom:4px;
line-height:18px;
}
.price_final h2 {padding-bottom:4px;}
/* click the H3 to expand the System Info, global.js */
.system h3 {
height:17px;
font:bold 12px helvetica, arial, verdana, sans-serif;
color:#414141;
text-transform:uppercase;
margin:0;
padding:0 0 0 30px;
background:transparent url(../assets/images/builder_product_info_h3.png) no-repeat right 0;
line-height:18px;
text-indent:-9999px;
}
.system h3.flipped {background:transparent url(../assets/images/builder_product_info_h3_flipped.png) no-repeat right 0;}
.system h3.open {
background-position:right -17px;
}
.system ul.product_info {
display:none;
}
.system ul {
width:266px;
margin:0 auto;
padding:0;
}
.system ul li {
list-style-type:none;
border-top:1px solid #fefefe;
background-color:#f6f6f6;
color:#4a4a4a;
padding:3px 0;
}
.system ul li.odd {background-color:#ebebeb;}
.builder_step4 {
margin-top:23px;
padding-left:30px;
overflow:auto;
padding-bottom:24px;
}
.builder_step4 .filters {
float:left;
background:transparent url(../assets/images/builder_criteria_bg.png) no-repeat;
padding:20px;
width:210px;
margin-right:6px;
}
.filters .fakecheck {float:none;}
.filters h2 {
font-size:8pt;
font-weight:bold;
}
.builder_step4 .results {
float:left;
background:transparent url(../assets/images/builder_criteria_bg.png) no-repeat -255px 0;
padding:10px;
width:660px;
min-height:400px;
overflow:auto;
}
.results .buttons {
margin:20px 15px 0 0;
overflow:auto;
float:right;
}
.results .buttons_top {margin:0 18px 9px 0;}
.buttons #cancel {
background:transparent url(../assets/images/cancel.png);
width:128px;
height:29px;
display:block;
float:left;
margin-right:5px;
text-indent:-9999px;
}
#cancel:hover {background-position:0 -29px;}
.buttons .accept {
background:transparent url(../assets/images/accept.png) 0 -29px;
width:168px;
height:29px;
display:block;
float:left;
text-indent:-9999px;
}
.buttons .accept:hover {background-position:0 0}

#results {clear:both; overflow:auto;}			
#results a {
display:block;
float:left;
background:transparent url(../assets/images/builder_criteria_result.png) no-repeat;
width:210px;
height:164px;
margin-right:4px;
padding:1px;
text-decoration:none;
}
#results div.price {
width:76px;
height:16px;
padding-top:8px;
padding-right:16px;
margin-top:-155px;
margin-left:118px;
text-align:right;
position:relative;				
font:bold 14px helvetica, arial, verdana, sans-serif;
color:#fff;
text-shadow:#000000 -1px 0px 3px;
background:transparent url(../assets/images/builder_system_price_bg.png) no-repeat 0 0;
line-height:14px;
}
#results a span.model {
display:block;
font-weight:bold;
text-align:center;
color:#444;
}
#results a.selected, #results a:hover {background-position:0 -164px;}

.builder_system .header {
margin:5px;
overflow:auto;
}
.builder_system .header h2 {
float:left;
margin-left:28px;
color:#535353;
font:normal 28px DIN-Medium, DIN, DIN-Light, helvetica, arial, verdana, sans-serif;
padding-top:7px;
}
.builder_system .add_component {
background:transparent url(../assets/images/add_component.png);
width:168px;
height:29px;
display:block;
}
.builder_system .add_component:hover {background-position:0 -29px}
.builder_system .header .choose {
/* width:197px; */
text-align:left;
float:right; 
margin:10px 15px 0 0;
font-size:11px;
color:#444;
}
.choose_type {
margin-top:-8px; 
position:absolute; 
display:none;
width:197px;
z-index:1;
margin-left:-15px;
}
.choose_type span {
color:#105caa;
margin-left:12px;
}
.choose_type a {
display:block;
color:#555;
text-decoration:none;
}
.choose_type a:hover {color:#fff}
.choose_type .choose_top {
background:transparent url(../assets/images/builder_step4_choose_top.png) no-repeat;
height:22px;
padding-top:16px;
}
.choose_type .choose_top:hover {background-position:0 -38px}
.choose_type .choose_middle {
background:transparent url(../assets/images/builder_step4_choose_middle.png) no-repeat;
height:21px;
padding-top:5px;
}
.choose_type .choose_middle:hover {background-position:0 -26px}
.choose_type .choose_bottom {
background:transparent url(../assets/images/builder_step4_choose_bottom.png) no-repeat;
height:37px;
padding-top:5px;
}
.choose_type .choose_bottom:hover {background-position:0 -42px}
.clearing_group {
overflow:auto;
}
.builder_system {
background:transparent url(../assets/images/builder_step4_bg.png) no-repeat;
min-height:400px;
padding:15px;
}
.builder_step4 .builder_system {min-height:auto;}
.builder_system .components {
margin-top:15px;
overflow:auto;
}
.system_compare .components {overflow:hidden;}
.system_compare table {
width:97%;
margin-top:18px;
}
.system_compare table td {
padding:3px 9px;
border-bottom:1px solid #eee;
}
.builder_system .components .system {margin-right:-3px;}
.builder_system .component {
background:transparent url(../assets/images/builder_step4_component.png) no-repeat 0 23px;
float:left;
width:216px;
height:284px;
margin:3px;
}
.builder_system .component_solo {margin-left:320px;}
.builder_system .component h2 {
text-align:center;
font-size:12px;
color:#555;
text-transform:uppercase;
}
.builder_system .component h4 {
color:#105caa;
text-align:center;
font-size:12px;
margin:0 0 8px 0;
}
span.pic {
display:block;
height:142px;
text-align:center;
}			
span.pic img {margin:0 auto;}
.builder_system .components .buttons {margin-top:9px;}
.buttons .change {
background:transparent url(../assets/images/change.png);
width:178px;
height:29px;
display:block;
margin:auto;
margin-bottom:1px;
text-indent:-9999px;
}
.buttons .change:hover {background-position:0 -29px;}
.buttons .remove {
background:transparent url(../assets/images/remove.png);
width:178px;
height:28px;
display:block;
margin:auto;
text-indent:-9999px;
}
.buttons .remove:hover {background-position:0 -29px;}
#finalize {
background:transparent url(../assets/images/finalize.png) 0 -29px;
width:168px;
height:29px;
/* margin:20px 0 0 715px; */
display:block;
margin:10px 30px 0 0;
float:right;
text-indent:-9999px;
}
#finalize:hover {background-position:0 0}
/*****************************************************
Stores listed in configurator
*****************************************************/
.price_final {
display:block;
margin:0;
padding-top:18px;
clear:both;
}
.price_final p {margin:0 0 9px 0;}
.price_final .price {
width:85px;
height:36px;
clear:both;
padding-top:12px;
text-align:center;
font:bold 18px helvetica, arial, verdana, sans-serif;
color:#fff;
text-shadow:#999 -1px 0px 3px;
background:transparent url(../assets/images/final_price.png) no-repeat 0 0;
line-height:14px;
}
.builder_stores {
padding:18px 0 0 36px;
width:900px;
float:left;
background:transparent url(../assets/images/builder_stores_bg.png) no-repeat 0 0;
}

/* overwrites .dealcount found in dealer_locator.css */
.store span.dealcount {
position:absolute;
left:-27px;
top:-1px;
float:left;
}
.store h3 {
float:left;
font:normal 14px tahoma, arial, helvetica, verdana, sans-serif;
color:#105caa;
margin-bottom:4px;
}
.builder_stores p {
clear:both;
}
/*****************************************************
COMPANY page
*****************************************************/
.company_content {
clear:both;
font-size:11px;
margin-top:18px;
text-align:justify;
overflow:auto;
margin-bottom:45px;
color:#373737;
line-height:15px;
}
.company_content a,.company_content a:link, .company_content a:visited {color:#084c93;}
.company_content a:hover, .company_content a:active, .company_content a:focus {color:#fff;background-color:#084c93;text-decoration:none;}

.company_content h3,
.company_content h4 {
font-weight:normal;
font-size:18px;
margin:0 0 4px 0;
color:#2e2e2e;
}
.company_content h4 {font-size:14px;color:#0f5baa;}
.company_content h3.special {
color:#0f5baa;
margin-bottom:18px;
}
.company_content_left {
float:left;
width:430px;
padding-right:22px;
margin-left:37px;
}
.company_content_right {
float:left;
margin-top:36px;
width:430px;
padding-left:23px;
border-left:1px solid #f0f0f0;
}
.content {
clear:both;
font-size:11px;
margin:0 31px 45px 40px;
overflow:hidden;
color:#373737;
}
.content a,
.content a:link,
.content a:visited {
color:#0f5baa;
text-decoration:underline;
}
.content a:hover,
.content a:active,
.content a:focus {
color:#fff;
text-decoration:none;
background-color:#084C93;
}
/*****************************************************
PRESS section
*****************************************************/
h1 {
font:normal 18px tahoma, arial, helvetica, sans-serif;
color:#0f5baa;
width:400px;
float:left;
line-height:18px;
text-align:left;
}
h1.press_index_h1 {width:200px;}
.company .content h2 {
font:normal 21px helvetica, arial, verdana, sans-serif;
margin:9px 0 18px 0;
clear:both;
text-align:left;
}
.first {margin-right:15px;}
.last {padding-left:13px;border-left:1px solid #f0f0f0;}
.press_index_list .last {border-style:none; padding-left:0;}
.tier_nav {
float:right;
text-align:right;
padding:8px 23px 8px 0;
font:bold 11px tahoma, arial, helvetica, verdana, sans-serif;
margin:0;
}
.tier_nav strong {font-weight:normal; font-size:12px;}
.press_item {
background:transparent url(../assets/images/tier_nav_press_item.png) no-repeat top right;
color:#373737;
width:420px;
}
.content .press_item a {
color:#fff;
text-decoration:none;
font-weight:normal;
padding:1px 4px;
background-color:#373737;
margin-right:20px;
}
.content .press_item a:hover {
color:#373737;
background-color:#fff;
}
.press_index {
background:transparent url(../assets/images/tier_nav_press_index.png) no-repeat top right;
color:#fff;
width:542px;
margin-bottom:18px;
}
.content .press_index a {
color:#fff;
text-decoration:none;
font-weight:normal;
padding:1px 4px;
margin-left:8px;
}
.content .press_index a:hover,
.content .press_index a.current {
color:#2e70b5;
background-color:#fff;
}
.press_index_list p {
width:361px;
background:transparent url(../assets/images/press_index_bg.png) no-repeat 0 0;
padding:7px 4px 0 20px;
color:#9e9e9e;
margin:0;
}
.press_index_list div.press_index_bottom {
background:transparent url(../assets/images/press_index_bottom.png) no-repeat 0 0;
height:12px;
margin-bottom:6px;
}
.press_index_list p strong {color:#373737;}
.content .press_index_list a {text-decoration:none;}
/* see global.columnize.js - columnizer plugin*/
.columnize {margin-top:9px;}
.columnize ul,
.company_content ul {list-style-position:outside;}
.columnize li,
.company_content li {
line-height:14px;
margin-bottom:6px;
}
.columnize table {width:455px;}
.contact_content_left {
float:left;
width:195px;
margin-right:20px;
text-align:left;
line-height:16px;
}
.contact_content_right {
float:left;
margin-top:36px;
width:430px;
padding-left:23px;
border-left:1px solid #f0f0f0;
}
.company_content_left {
float:left;
width:430px;
padding-right:22px;
margin-left:37px;
}
.company_content_right {
float:left;
margin-top:36px;
width:430px;
padding-left:23px;
border-left:1px solid #f0f0f0;
}
/*****************************************************
Search Page
*****************************************************/
.search_content {
clear:both;
font-size:11px;
text-align:justify;
margin:9px 42px 45px 42px;
color:#373737;
}
.search_content h3 {
margin-left:28px;
color:#535353;
font:normal 18px DIN-Medium, DIN, DIN-Light, helvetica, arial, verdana, sans-serif;
padding-top:7px;
padding-bottom:8px;
margin-bottom:18px;
border-bottom:1px dotted #9b9b9b;
}
.search_content div {
clear:both;
overflow:auto;
margin-bottom:26px;
background:transparent url(../assets/images/arrow_right.png) no-repeat 235px 0;
line-height:16px;
}
.search_content div.icon {
width:220px;
float:left;
margin-right:52px;
text-align:center;
}
.search_content div.icon img {margin:0 auto; display:block;}
.search_content div p {
float:left;
padding-bottom:18px;
border-bottom:1px dotted #9b9b9b;
width:600px;
}
.search_content .no_results {margin-left:28px;}
.search_content a,
.search_content a:link,
.search_content a:visited {
color:#0f5baa;
text-decoration:none;
}
.search_content a:hover,
.search_content a:active,
.search_content a:focus {
color:#fff;
text-decoration:none;
background-color:#084C93;
}
.search_content div.search_inline {
background-image:none;
overflow:visible;
margin-left:28px;
}
.search_content div.search_inline fieldset {clear:both;}
.search_content div.search_inline form {border:1px solid #fff;}/* IE needs this oh so bad */
.search_content div.search_inline p {margin-bottom:9px;}
.search_content div.search_inline legend {display:none;}
.search_content div.search_inline input {
width:250px;
margin-right:10px;
}

.quick_search {
width:250px;
margin-right:18px;
background-color:transparent;
border-style:none;
}

.search_content .quick_search div {background-image:none;border:1px solid #00f000;}
/*****************************************************
FOOTER
*****************************************************/
#footer_bg {/* background:transparent url(../assets/images/footer_bg.png) no-repeat 50% bottom; */}
#footer {
clear:both;
font:normal 9px Tahoma, helvetica, arial, verdana, sans-serif;
color:#5c5c5c;
overflow:auto;
padding:0 8px 30px 0;
position:relative;
top:1px;
margin:20px auto 0 auto;
width:905px;
}
.home #footer {}

/*/ #footer * {border:1px solid #ff0000;} /**/
p.logo_footer {margin:0;}
.footer_nav_wrap {
clear:both;
padding:5px 0;
border-top:1px solid #9e9e9e;
border-bottom:1px solid #9e9e9e;
margin-bottom:8px;
height:12px;
}
/* Join the alpine community! */
.footer_nav_wrap p {
float:left;
margin:0;
}
/* blue links in footer */
.footer_nav_wrap p a {
color:#084c93;
text-decoration:none;
}
.footer_nav_wrap p a:hover {
color:#084c93;
text-decoration:underline;
}
/* terms of service link*/
a.subtle {
color:#cdcdcd;
text-decoration:underline;
}

ul#footer_nav {
float:right;
list-style:none outside;
text-align:right;
margin:0;
padding:0;
}
ul#footer_nav li {
display:inline;
padding:0 12px 0 17px;
background:transparent url(../assets/images/footer_nav_garnish.png) no-repeat center left;
}
ul#footer_nav li:first-child {background-image:none;}
/* see global.js for IE :last-child */
ul#footer_nav li:last-child {padding-right:0;}
ul#footer_nav li a,
ul#footer_nav li a:link,
ul#footer_nav li a:visited {
font:normal 9px Tahoma, helvetica, arial, verdana, sans-serif;
color:#5c5c5c;
text-decoration:none;
}
ul#footer_nav li a:hover,
ul#footer_nav li a:active,
ul#footer_nav li a:focus {color:#0a519a;}

p.legal {
line-height:16px;
overflow:auto;
color:#5c5c5c;
}
p.legal span {color:#cdcdcd;}

/* footer logos */
#footer p {margin-bottom:9px;}

/* BUTTONS*/


a.button_print, a.button_print:link, a.button_print:visited {width:79px; background-image:url(../images/button_print.png); height:20px; display:block; float:left; cursor:pointer;}
a.button_print:hover, a.button_print:active {width:79px; height:20px;}





/**Dealer Locator **/
.locator_list {float:left; margin-left:18px; background:url(../images/locator_list_bg.png) no-repeat 0 42px; padding:9px; width:206px; overflow:hidden;}

span.find {display:none;}

table {color:#525252;}
table td {
padding:9px 0 0 0;
vertical-align:top;
}

.locator_results {
float:left;
margin-left:9px;
padding:0;
width:700px;
overflow:hidden;
margin-top:-18px;
}
#map_wrap {
width:692px;
height:412px;
padding:4px;
margin-bottom:9px;
background:transparent url(../images/map_wrap_bg.png) no-repeat 0 0;
}




#searchdesc {
font:normal 11px tahoma, arial, helvetica, verdana, sans-serif;
color:#2267af;
padding-left:7px;
}

.locator_results button,
.locator_results a.button {
float:left;
margin-right:9px;
}

.map_bottom {background:url(../images/map_bottom_bg.png) no-repeat 0 0; padding:0 4px; float:left; width:99.2%; overflow:hidden; margin-top:9px;}
.locator_results table {margin-bottom:0;}

table.authorized {width:100%;}
table.authorized td {text-align:center;}
table.authorized_links {width:100%;}
table.authorized_links td {background-color:#e2e2e2; padding:4px; border:2px solid #f0f0f0;}
table.authorized a {text-transform:uppercase; color:#2267af; font:bold 11px tahoma, arial, helvetica, verdana, sans-serif; text-decoration:none;}
table.authorized a:hover {text-decoration:underline;}

table.authorized .left {font-family:tahoma, arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold; padding-left:9px; float:left;}
table.authorized .small {font-family:tahoma, arial, helvetica, verdana, sans-serif; font-size:10px; font-weight:normal; padding-right:4px;}

p.banner {text-align:center;}
p.banner img {margin:0 auto;}


a.search_toggle {font-family:tahoma, arial, helvetica, verdana, sans-serif; font-size:12px; color:#0F5BAA; font-weight:bold; text-decoration:none;}

#controls {width:100%; padding:0 0 10px 0px; float:left; overflow:hidden;}
#form {width:100%; font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#595959; font-weight:normal; font-size:10px;}

#locator {width:100%; float:left; overflow:hidden; z-index:0; position:relative;}

#map { float:left; overflow:hidden; width:692px; height:412px; position:relative;}
#panel {float:left; overflow:hidden; width:206px; z-index:1000;}

#panel table {border-spacing:0px; border-collapse:collapse;	padding:0px; margin:0px; width:100%;}
#panel table th { padding-bottom:9px; text-align:left; font-family:tahoma,helvetica,arial,verdana,sans-serif; font-size:11px; color:#0F5BAA; font-weight:bold;}

#panel table th a[action="sort_table"] {text-decoration:none; color:#3F6494; font-weight:bold; font-size:12px;}
#panel table th a[action="sort_table"]:hover {text-decoration:underline; color:#3F6494; font-weight:bold; font-size:12px;}
#panel table thead tr.poi {height:20px;}
#panel table tfoot tr.poi {height:20px; font-size:10px; color:#a2afbf; padding-bottom:0px; padding-top:0px; border-top:1px solid #a2afbf;}

#panel table td {padding-top:9px; text-align:left; font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#595959; font-weight:normal; font-size:10px;}


#panel table th.maneuver {padding-bottom:9px; text-align:left; font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#0F5BAA; font-weight:normal; font-size:11px;}

#panel table td.maneuver {padding-top:9px; text-align:left; font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#595959; font-weight:normal; font-size:11px;}

#panel table .prev_results {float:left; text-decoration:none; color:#084C93; font-weight:normal;}
#panel table .next_results {float:right; text-decoration:none; color:#084C93; font-weight:normal;}

#panel table tr.odd {height:55px;}
#panel table tr.even {height:55px;}
#panel table tr.active {}
#panel table p {margin:0px;	padding:0px;}


.store { font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#595959; font-weight:normal; font-size:10px;}
a.store_name {text-decoration:none; color:#0f5baa; font:normal 14px tahoma, helvetica, arial, verdana, sans-serif; line-height:14px;}
a.store_name:hover {background-color:#ccc;}

a.email {text-decoration:none; color:#0f5baa;}

.storecount {background:url(../images/digit_bg.png) no-repeat 0 0; color:#FFFFFF; display:block; float:left; font-family:helvetica,arial,tahoma,verdana,sans-serif; font-size:12px; font-weight:bold; height:16px; $height:22px; line-height:9px; padding:6px 0 0; text-align:center; width:22px;}


xml {width:0; height:0;	display:none;}
.icon {position:relative; width:33px; height:28px;}
.icon img {position:absolute; top:0px; left:0px; width:30px; height:19px; cursor:pointer;}
.icon div {position:absolute; top:4px; left:-2px; width:28px; font-family:Tahoma, helvetica, arial, verdana, sans-serif; color:#fff; font-weight:bold; font-size:10px; text-align:center; cursor:pointer;}
#center_marker {width:30px;	height:28px; cursor:default;}
#center_marker img {position:absolute; top:0px; left:0px; width:30px; height:28px; cursor:default;}
#ajax_activity {position:absolute; top:20px; right:20px; width:32px; height:32px; z-index:99;}


.panelicon {background:url(../images/digit_bg.png) no-repeat 0 0; position:relative; top:1px; left:0px; font-size:11px; font-weight:bold; font-family:helvetica, arial, tahoma, verdana, sans-serif; color:#fff; margin-right:6px; width:22px; height:22px; text-align:center; line-height:20px;}
.panelicon img {position:absolute; top:0px; left:0px;  width:22px; height:22px; }
.panelicon div {position:absolute; top:5px;	left:0px; width:22px;}

#w2gi_copyright {right:10px; bottom:15px; text-decoration:none; font-family:Arial,Helvetica,Verdana,sans-serif; font-weight:bold; font-size:11px; color:#000; z-index:999; float:right; position:relative;}
#navteq_copyright {bottom:3px; font-family:Arial,Helvetica,Verdana,sans-serif; font-weight:bold; font-size:11px; text-decoration:none; z-index:999; }


#icon_bar {font-family:Tahoma, helvetica, arial, verdana, sans-serif; float:right; text-align:right; font-size:10px; color:#525252;}
#icon_bar a{color:#525252; text-decoration:none; margin-right:5px;}


#footer1 {width:100%; float:left; font-size:10px; }
#footer1 a{font-size:10px; text-decoration:none; font-weight:normal; }

#navteqfooter { width:100%; float:left; text-align:left; font-size:10px; font-weight:bold;	margin:2px 0 10px; color:#000;}
#local_link {width:100%; float:left; text-align:left; font-size:10px; font-weight:bold; height:25px; margin-top:10px;}

#w2gi_copyright { position:absolute; right:3px; bottom:3px; text-decoration:none; font:bold 12px Arial,Helvetica,sans-serif; background:transparent; z-index:999; color:#000;}
#navteq_copyright {background:transparent none repeat scroll 0%; bottom:3px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; left:3px; line-height:normal; position:absolute; text-decoration:none; z-index:999; color:#000;}
#intro_text {font-size:12px; padding:15px;}


.button {display:block; height:20px; width:69px; background:url(../images/button_submit.png) no-repeat 0 0; border:none; text-indent:-9999px; cursor:pointer;}


.text_box1 {background-color:transparent; font:normal 12px arial, helvetica, verdana, sans-serif; color:#525252; border:0px; width:250px; margin-right:9px;}
span.retxt {font:bold 11px tahoma, helvetica, arial, verdana, sans-serif; color:#0f5baa; padding:2px 0 0 4px; display:block; float:left;}


.input_wrap {width:276px; height:37px; padding-top:9px; padding-left:12px; background:url(../images/input_wrap_bg.png) no-repeat 0 0; float:left; position:relative; top:-8px;}

#inputaddress {background-color:transparent; font:normal 12px arial, helvetica, verdana, sans-serif; color:#525252; border:0px; width:250px; margin-right:9px;}

select {font-size:12px; color:#525252; border:1px solid #666666; float:left; margin-right:4px;}
.directions {background-color:#464646; font:bold 11px arial, helvetica, verdana, sans-serif; color:#fff; border:1px solid #aaaaaa; padding:2px; cursor:pointer;}

.displayURL{display:none;}