/* CSS Document RESET */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: #282828;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from & */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* CSS Document RESET End */
body { background:#002135 /*url(/ui/images/layout/site-bg.jpg) center no-repeat*/; color:#3f3f3f; font: 12px/18px Arial, Helvetica, sans-serif; height:100%; width:100% }
a {color:#2890ce; text-decoration: underline; cursor:pointer}
a:hover {color:#002135; text-decoration:none}
strong {font-weight:600}
em {font-style:italic}
hr {color:#dcdcde; margin:10px auto; background-color: #dcdcde; height: 1px; width: 100%; text-align:center; border:none}
hr.yellow {color:#f0b310; background-color: #f0b310 }
/* TOP */
#promo-banner { height:130px; width:100%; text-align:center; padding:10px 0}
#top { height:110px; width:100%; }
#top-header { width: 954px; margin: 0 auto }
#top-header-left { width: 314px; float:left; height: 100%}
#top-header-logo {width: 248px; height: 100%; padding:0 50px 0 16px }
#top-header-right { width: 640px; float:left; height: 100% }
#top-header-right-top { height: 53px; width: 100%; clear:both }
#top-header-right-top ul, #top-header-right-top li {display:inline; float:right}
#top-header-right-top li a { font-size:12px; color:#fff; text-decoration:none; padding:0 7px; border-left: 1px solid #1a485f; line-height:30px}
#top-header-right-top li a.selected, #top-header-right-top a:hover { color: #f0b310}
#top-header-right-top li:last-child a { border-left: none}
#top-header-right-top li.icon { display: inline-block!important; padding-top:4px; }
#top-header-right-top li.icon a { border-left: none!important; }
#top-header-right-bottom { height: 67px; width: 100%; }
#top-header-nav { height: 100%; width: 100%;}
#top-header-nav img {padding:0; margin:0; position:relative; top:2px }
#top-header-nav ul, #top-header-nav li {display:inline; float:left;}
#top-header-nav ul {padding-left:16px;}
#top-header-nav li {padding:0; margin:0; border-left: 1px solid #1a485f}
#top-header-nav li:first-child { border-left: none}
#top-header-nav li a {font-size:12px; color:#f0b310; text-decoration:none; padding:0 8px; font-weight:600; line-height:31px }
#top-header-nav li a.selected, #top-header-nav a:hover { color: #fff}
#top-header-nav li a.quote { line-height:0; font-weight: normal }
/* MIDDLE */
#middle { width:100%; }
#middle-wrap { width: 954px; margin: 0 auto;}
#middle-top { width:100%; background:url(/ui/images/layout/main-white-header-bg.png) no-repeat; height:68px}
#middle-middle { width:100%; background: #FFF }
#middle-bottom { width:100%; background: url(/ui/images/layout/main-white-footer-bg.png) no-repeat; height:68px}
/* BANNER -HOME */
#banner { width: 952px; margin: 0 auto; position:relative; z-index:1; top:-68px; height:453px }
.banner-welcome-0 { background: url(/ui/images/home/homehero-welcome1.jpg) no-repeat;}
.banner-welcome-1 { background: url(/ui/images/home/homehero-welcome2.jpg) no-repeat;}
.banner-welcome-2 { background: url(/ui/images/home/homehero-welcome3.jpg) no-repeat;}
.banner-welcome-3 { background: url(/ui/images/home/homehero-welcome4.jpg) no-repeat;}
.banner-welcome-4 { background: url(/ui/images/home/homehero-welcome5.jpg) no-repeat;}
.banner-in-yard { background: url(/ui/images/home/homehero-y35.jpg) no-repeat!important; background-position:bottom!important; }
.banner-highway { background: url(/ui/images/home/homehero-h20.jpg) no-repeat!important; background-position:bottom!important; }
.banner-sp { background: url(/ui/images/home/homehero-sp60.jpg) no-repeat!important; background-position:bottom!important; }
.banner-rok { background: url(/ui/images/home/homehero-p3.jpg) no-repeat!important; background-position:bottom!important; }
.banner-options { background: url(/ui/images/home/homehero-options.jpg) no-repeat!important; background-position:bottom!important; }
#banner-content {height:365px; width: 952px; clear:both}
.banner-product-top {text-align:center; padding-top:40px; width: 952px; clear:both}
.banner-product-details { width:476px; float:right; overflow:hidden}
.banner-product-details a { float:right; padding-right:25px; line-height:21px}
/* table */
.home-page-specs { background:#FFF; table-layout:fixed; width:465px; border-left: #bdd0dd 1px solid; border-top: #bdd0dd 1px solid; border-right: #bdd0dd 1px solid;
border-collapse:collapse; max-height:220px; opacity:0.9;filter:alpha(opacity=90) }
.home-page-specs th {font-size:9px; text-align:center; line-height:11px; background:#e1e7ec; padding:4px 0; border-bottom:#bdd0dd 1px solid; color:#3a6f8f}
.home-page-specs td {font-size:10px; text-align:center; border-bottom:#bdd0dd 1px solid; border-right:#bdd0dd 1px solid; line-height:29px; color:#3a6f8f }
.home-page-specs-rok td { line-height:19px!important;}
.home-page-specs td strong { font-size:12px; font-weight:700}
.home-page-specs tr.gray td { background:#f1f3f5 }
.in-yard-bg-1 {background: url(/ui/images/home/in-yard/in-yard-spec-fronts-1-white.gif) no-repeat center}
.in-yard-bg-2 {background: url(/ui/images/home/in-yard/in-yard-spec-fronts-1-gray.gif) no-repeat center #f1f3f5!important;}
.in-yard-bg-3 {background: url(/ui/images/home/in-yard/in-yard-spec-fronts-2-white.gif) no-repeat center}
.in-yard-bg-4 {background: url(/ui/images/home/in-yard/in-yard-spec-fronts-2-gray.gif) no-repeat center #f1f3f5!important; }
.highway-bg-1 {background: url(/ui/images/home/highway/highway-spec-fronts-1-white.gif) no-repeat center}
.highway-bg-2 {background: url(/ui/images/home/highway/highway-spec-fronts-1-gray.gif) no-repeat center #f1f3f5!important;}
.highway-bg-3 {background: url(/ui/images/home/highway/highway-spec-fronts-2-white.gif) no-repeat center}
.sp-bg-1 {background: url(/ui/images/home/self-propelled/sp-spec-fronts-1-white.gif) no-repeat center}
.sp-bg-2 {background: url(/ui/images/home/self-propelled/sp-spec-fronts-1-gray.gif) no-repeat center #f1f3f5!important;}
/* table */
#banner-content h3 {color:#00334d; font-size:21px; padding-bottom:10px}
#banner-content h4 {color:#00334d; font-size:13px; line-height:21px; font-weight:600;}
#banner-content h4 em {font-size:10px; font-style:normal}
#banner-content h4 span{ background:url(/ui/images/home/product-arrow.png) no-repeat right; padding-left:24px; width:16px; height:16px}
#banner-content li { color:#cca527; padding: 8px 0; border-bottom:#dccd91 dashed 1px}
#banner-content li a { color:#cca527; font-weight:600}
#banner-nav { background:url(/ui/images/home/middle-nav-bg.png) no-repeat bottom; height:87px}
#banner-nav div {width:158px; display:inline-block; height:47px; text-align:center; vertical-align:middle; padding-top:40px; float:left}
#banner-nav div:hover { cursor:pointer }
#banner-nav div.ends { padding-left:2px; }
#banner-nav .hovered { background:url(/ui/images/home/nav-over.png) no-repeat;}
#banner-nav a { color:#FFF; text-decoration:none; text-transform:capitalize; font-size:15px; background:url(/ui/images/home/banner-nav-unselected.png) no-repeat right; padding-right: 16px}
#banner-nav a:hover { text-decoration: underline!important;}
#banner-nav a.selected { color:#002135!important; background:url(/ui/images/home/banner-nav-selected.gif) no-repeat right; }
/* CONTAINERS HOME */
#home-containers { width: 954px; margin: 0 auto; }
#home-containers h1 { font: Arial, Helvetica, sans-serif; font-weight:600; font-size: 16px; line-height:18px; color:#00334d; margin-bottom:23px }
#home-containers h2 { font-size: 21px; padding-bottom:10px; color:#00334d }
#home-containers p { color:#666; font: 12px/18px Arial, Helvetica, sans-serif; letter-spacing:.05px}
#home-containers a { font-weight:600}
#home-container-1 {width:318px; display:inline; float:left; text-align:center}
#home-container-1 a { color:#f26631!important; text-decoration:none}
#home-container-1 a:hover { text-decoration: underline}
#home-container-2 {width:268px; display:inline; float:left; padding:0 25px}
#home-container-3 {width:318px; display:inline; float:left; text-align:center}
#home-container-3 p { color:#999; font: 12px/24px Arial, Helvetica, sans-serif;}
#affiliate { margin:15px 0 0 0; display:inline-block}
#affiliate img {text-align:center}
/* FOOTER */
#footer { height:100px; width: 100%; color:#FFF}
#footer-center { width: 954px; margin: 0 auto; text-align:center }
#footer-center ul, #footer-center li {display:inline }
#footer-center ul li { font: 12px/40px Arial, Helvetica, sans-serif; color:#FFF; padding:0 12px; border-left: solid #FFF 1px}
#footer-center ul li:first-child { border-left: none}
.credits { font-size:10px}
.credits a:hover {color:#FFF; }
/* INTERIOR */
.interior-wrapper h1 {font-size:34px; color:#f0b310; line-height:59px }
.interior-wrapper h2 {font-size:20px; color:#3a6f8f; line-height:30px }
.interior-wrapper h3 {font-size:13px; color:#3a6f8f; line-height:20px }
.interior-wrapper h4 {font-size:21px; color:#f0b310; padding-bottom:10px }
.interior-wrapper h5 {font-size:18px; color:#3a6f8f; line-height:36px }
.interior-wrapper h6 {font-size:17px; color:#3a6f8f; line-height:24px; padding-bottom:10px }
.interior-wrapper .quote {display:block; padding-bottom:5px}
#banner-interior { width: 952px; margin: 0 auto; background:url(/ui/images/interior/interior-landing-bg.gif) repeat-x; height:428px; overflow:hidden }
#banner-interior.banner-int-gallery { background:url(/ui/images/interior/int-hero-gallery.jpg) no-repeat; height:256px; position:relative; z-index:1; top:-68px; border-bottom:#b2bbc1 solid 2px}
#banner-interior.banner-int-whatsnew { background: url(/ui/images/interior/int-hero-whats-new.jpg) no-repeat; height:256px; position:relative; z-index:1; top:-68px; border-bottom:#b2bbc1 solid 2px}
#banner-interior.banner-int-whybrownell { background: url(/ui/images/interior/int-hero-why-brownell.jpg) no-repeat; height:256px; position:relative; z-index:1; top:-68px; border-bottom:#b2bbc1 solid 2px}
#banner-interior.banner-int-contact { background: url(../../../ui/images/interior/int-hero-contact.jpg) no-repeat; height:256px; position:relative; z-index:1; top:-68px; border-bottom:#b2bbc1 solid 2px}
#banner-interior.banner-int-rok { background: url(../../../ui/images/interior/int-hero-rok.jpg) no-repeat; height:256px; position:relative; z-index:1; top:-68px; border-bottom:#b2bbc1 solid 2px}
#banner-interior-left {width:519px; padding:0 10px 0 41px; float:left}
#banner-interior-left-top {height:220px; }
#banner-interior-left-top.short {height:180px; }
#banner-interior-left-top.short-banner { height:180px; padding-top:68px;}
#banner-interior-left-top.short-banner h1 { font-size:40px; color:#002135 }
#banner-interior-left-top.short-banner.rok h1 { color:#f26631!important }
#banner-interior-left-top.short-banner.rok h3 { color:#002538!important; text-shadow:0px 1px 2px #fff }
#banner-interior-left-bottom {height:183px; padding-top:25px }
#banner-interior-left-bottom li {color:#00334d; background: url(/ui/images/interior/check.gif) no-repeat; padding:0 0 7px 32px; line-height:22px; font-size:13px}
#banner-interior-right {width:280px; padding:300px 41px 0 61px; float:left; height:128px}
.banner-int-in-yard {background:url(/ui/images/interior/banner-in-yard.png) no-repeat right top}
.banner-int-highway {background:url(/ui/images/interior/banner-highway.png) no-repeat right top}
.banner-int-sp {background:url(/ui/images/interior/banner-self-propelled.png) no-repeat right top}
.banner-int-rok {background:url(/ui/images/interior/banner-rok.png) no-repeat right top}
.banner-int-options {background: url(/ui/images/interior/banner-options.png) no-repeat right top}
#content-interior { padding:24px 41px }
#content-interior.bump-up-int { position:relative;top:-68px; }
#content-interior.bump-up-int-rok { position:relative; top:-88px; }
#content-interior.reduce-pad-int { padding-top:0 }
#content-interior p { padding-bottom:22px}
/* product landing pages */
#content-interior-top-left { width:543px; float:left; padding-right: 92px }
#content-interior-top-left.wide { width:819px }
#content-interior-top-left p { font-size:13px; line-height:20px; color:#3a6f8f; padding:0}
#content-interior-top-right { width:225px; float:left }
#content-interior-top-right li {color:#00293f; line-height:30px; font-weight:600; font-size:13px; padding-left:90px; margin-bottom:5px}
#content-interior-top-right li span { font-weight:normal; }
.front-ls-h { background: url(/ui/images/interior/large-semi-highway.gif) no-repeat left}
.front-ls { background: url(/ui/images/interior/large-semi.gif) no-repeat left}
.front-ns { background: url(/ui/images/interior/non-sub-front.gif) no-repeat left}
.front-pf { background: url(/ui/images/interior/pole-front.gif) no-repeat left}
.front-rf { background: url(/ui/images/interior/ring-front.gif) no-repeat left}
.front-sd { background: url(/ui/images/interior/semi-deck.gif) no-repeat left}
.front-s { background: url(/ui/images/interior/sub-front.gif) no-repeat left}
#content-interior-bottom { padding:23px 0 }
#content-interior-bottom ul, #content-interior-bottom li { list-style: disc; text-indent: 0px; list-style-image:none; }
#content-interior-bottom ul, #content-interior-bottom ol {margin:5px 0 15px 30px; padding:0}
#content-interior-bottom li {margin:6px 0 6px 5px}
#content-interior-bottom ul li ul {margin:5px 0 5px 15px; padding:0}
#content-interior-bottom li ul li {margin:3px 0 3px 5px}
/* GET A QUOTE */
.form-column { padding:0 33px; width:369px; float:left; height: 100%}
.form-column.form-column-contact { padding:0 32px 0 0; width:266px; }
.form-column em {font-size:10px; line-height: 15px}
.form-column h4 { padding-bottom:5px}
.form-column p { font-size:13px; line-height:18px; color:#3a6f8f; padding:0}
.form-column span {color: #999999; font-size:10px; }
.form-column span.radio {color: #333; font-size:12px; }
.form-column label {color:#333333; font-size:12px; line-height:19px; display:block; font-weight: 600 }
.item-margin-top { margin-top:15px}
.form-column input { border:none; margin-bottom:15px}
.form-column select { border: #f0b310 solid 1px; margin-bottom:15px; padding: 0 2px }
.form-column input.large {width:266px; height: 20px; padding: 7px 10px; background:url(/ui/images/interior/form/input-long.gif) no-repeat}
.form-column input.large-active {background: url(/ui/images/interior/form/input-long-active.gif) no-repeat}
.form-column input.large-inactive {background: url(/ui/images/interior/form/input-long-inactive.gif) no-repeat}
.form-column input.medium {width:170px; height: 20px; padding: 7px 10px; background:url(/ui/images/interior/form/input-medium.gif) no-repeat}
.form-column input.small {width:126px; height: 20px; padding: 7px 10px; background:url(/ui/images/interior/form/input-small.gif) no-repeat}
.submit-quote {width:100%; text-align:center; padding-top: 20px; cursor:pointer}
/* table */
.interior-page-specs { background:#FFF; table-layout:fixed; width:870px; border-left: #aebebe 1px solid; border-top: #aebebe 1px solid; border-right: #aebebe 1px solid;
border-collapse:collapse; }
.interior-page-specs th {font-size:12px; text-align:center; line-height:18px; background:#02314d; padding:4px 0; border-bottom:#aebebe 1px solid; color:#f0b310}
.interior-page-specs td {font-size:12px; text-align:center; border-bottom:#bdd0dd 1px solid; border-right:#bdd0dd 1px solid; line-height:29px; color:#3a6f8f }
.interior-page-specs td:first-child {text-align:left; font-weight:600; padding-left:10px }
.interior-page-specs tr.seperate td { border-bottom:#bdd0dd 2px solid }
.interior-page-specs tr.tall td { line-height:58px!important; }
.interior-page-specs tr.vmiddle td { vertical-align:middle }
.interior-page-specs tr.highlight {background-color: #f1f3f5;}
.interior-page-specs td strong { font-size:15px; font-weight:700}
.interior-page-specs tr.gray td, .interior-page-specs td.gray { background:#f1f3f5 }
.in-yard-design-bg-1 {background: url(/ui/images/interior/inyard-landing-design-1.gif) no-repeat center #fff!important;}
.in-yard-design-bg-2 {background: url(/ui/images/interior/inyard-landing-design-2.gif) no-repeat center #fff!important;}
.in-yard-design-bg-3 {background: url(/ui/images/interior/inyard-landing-design-3.gif) no-repeat center #fff!important;}
.highway-design-bg-1 {background: url(/ui/images/interior/highway-landing-design-1.gif) no-repeat center #fff!important;}
.highway-design-bg-2 {background: url(/ui/images/interior/highway-landing-design-2.gif) no-repeat center #fff!important;}
.highway-design-bg-3 {background: url(/ui/images/interior/highway-landing-design-3.gif) no-repeat center #fff!important;}
.sp-design-bg-1 {background: url(/ui/images/interior/sp-landing-design-1.gif) no-repeat center #fff!important;}
.sp-design-bg-2 {background: url(/ui/images/interior/sp-landing-design-2.gif) no-repeat center #fff!important;}
.sp-design-bg-3 {background: url(/ui/images/interior/sp-landing-design-3.gif) no-repeat center #fff!important;}
/* end table */
#content-interior #options-list {margin:0; padding:0}
#content-interior #options-list li {width:240px; display:inline; float:left; padding:0 30px 10px 20px; height:200px; margin:0}
#content-interior #options-list li img { padding:4px; border: 1px #a9a9a9 solid }
/* product detail pages */
#content-interior-left { width:596px; float:left; padding-right:22px}
#zoom-pos {position:absolute; left: -20px; top:3px; width:400px; height:250px;}
/* Product detail specs */
.product-detail-specs table{width:596px}
.product-detail-specs table tr:first-child td {font-size:13px; line-height:30px; color:#333333; border-bottom:#dcdcde 1px solid; border-top:#dcdcde 1px solid}
.product-detail-specs table td {font-size:13px; line-height:30px; color:#333333; border-bottom:#dcdcde 1px solid}
.product-detail-specs table td:first-child {font-weight:600}
/*ROK */
#content-interior-top-left.rok h1, .rok h1, .rok h4, .rok th { color:#f26631!important }
.rok-photo { width:450px; height:450; overflow:hidden; float: right; margin:0 0 30px 30px }
.Cart66CartButton { margin-bottom:15px }
.Cart66Price { font-size:20px!important; color:#3a6f8f!important; line-height:30px!important; }
.purAddToCart { border:none!important; background-color: transparent!important; }
.Cart66ButtonPrimary, .Cart66ButtonSecondary { background-color:#f26631!important; border: none!important; height: 35px; line-height: 35px; }
#viewCartTable th { background:#F1F3F5 }
#viewCartTable td, #viewCartTable th { border-bottom: 1px solid #BDD0DD; }
#site-seals { clear:both}
#site-seals li { display:inline; float:left; padding: 15px 15px 0 0; list-style:none}
#content-interior-right { width:252px; float:left;}
#content-interior-right h3 { padding-bottom:13px}
#product-detail-more-thumbs img {border:1px #b2bbc1 solid}
.product-thumbs img {background: #FFF; padding:2px;}
.product-thumbs ul { margin-top:10px}
.product-thumbs li {display:inline-block; margin-right:8px; padding-bottom:10px}
#product-top { width: 870px; margin: 0 auto; background: url(/ui/images/interior/interior-fade.gif) repeat-x bottom; overflow:hidden; height:300px; padding:30px 41px 0 }/* Height -75px */
#product-top h1 {font-size:23px; color:#f0b310; line-height:23px; padding:37px 0 17px 0 }
#product-top h2 {font-size:16px; color:#3a6f8f; line-height:26px; padding-bottom:9px }
#product-top-left { width:441px; padding-right:29px; float:left}
#product-detail-photo { background:url(/ui/images/interior/product-detail-bg.png) no-repeat; width:443px; height:176px; text-align:center; padding-top:90px}
.product-detail-photo-zoom { background:url(/ui/images/interior/product-detail-bg-zoom.png) no-repeat!important}
#product-detail-photo img { padding-left:10px }
#product-detail-photo-thumbs img {border:1px #FFF solid }
#product-detail-photo-thumbs img.selected {border:1px #b2bbc1 solid}
#product-top-right { width:400px; float:left}
/*popup on home page */
.ui-dialog { width:740px!important;}
.pop-up-table { width:705px!important;}
.pop-up-table td {line-height:28px!important; font-size:11px!important; }
.pop-up-table td strong { font-size:11px; font-weight:600}
/* CLASSES */
.clear { clear:both}
.pad-top-5 { padding-top:5px!important; }
.pad-top-10 { padding-top:10px!important; }
.pad-top-15 { padding-top:15px!important; }
.pad-top-20 { padding-top:20px!important; }
.pad-top-25 { padding-top:25px!important; }
.pad-top-30 { padding-top:30px!important; }
.pad-top-35 { padding-top:35px!important; }
.margin-top-40 { margin-top:40px!important; }
.dark-blue {color:#02314d}
label.error {color:#1F98BD!important;}
.quote-open { padding-right:15px; background:url(/ui/images/interior/quote-open.gif) no-repeat left}
.quote-close { padding-left:15px; background:url(/ui/images/interior/quote-close.gif) no-repeat right }
.italics { font-style:italic}
.align-center {text-align: center}
.align-right { float:right; padding:0 0 10px 10px}
.align-left { float:left; padding:0 10px 10px 0}
#google_translate_element { height: 26px!important; position:relative; top: 3px }
#google_translate_element * { padding:0!important; border:none!important; margin: 0!important; color:#02314d }
.manual-link {color:#FFF; background:#F26631; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding:2px 8px; display:inline-block; text-shadow:none; text-decoration:none; margin-top:10px }
/*selector*/
.selector-body { width:70%; float:left }
.selector-body label { color: #3A6F8F; font-size:13px; font-weight:600; padding-right:5px; line-height:20px}
.selector-body .interior-page-specs td:first-child { text-align:center }
#stand_selector select { margin-right:5px; border: 1px solid #F26631 ; }
.selector-sidebar { width:30%; float:left }
#content-interior-bottom .selector-sidebar ul { margin:0}
#content-interior-bottom .selector-sidebar li { list-style:none; margin:0}
.stand-selector { background:url(/ui/images/sel-stands-bg.gif) no-repeat 0 0; width:267px; height:102px; display:inline-block; text-indent:-9999px }
.stand-selector:hover { background:url(/ui/images/sel-stands-bg.gif) no-repeat 0 -103px; }