@import 'base.css';

#snav { float: left; display:inline; width: 960px; height: 79px; list-style: none; padding: 0 0 4px; margin: 0; background: #fff; }
#snav li { float: left; }
#snav a { float: left; display:inline; width: 317px; height: 75px; background: url(../images/baths/hdr.png) no-repeat 0 0; text-indent: -999em; border-top: 4px solid #39A5C0; }
#snav .on a { background-position: 0 -75px; }
#snav .s2 a { width: 318px; display:inline; margin: 0 4px; border-top-color: #B8C11B; background-position: -317px 0; }
#snav .on1 a { background-position: -317px -75px; }
#snav .s3 a { border-top-color: #D6B04B; background-position: -635px 0px; float: right }
#snav .on2 a { background-position: -635px -75px; }

#snav li.off a, #snav li.s2.off a, #snav li.s3.off a { border-top-color: #ccc; }
#snav.ltop { height:448px; }
#snav.ltop li { float: left; display:inline; width: 318px; height: 448px; }
#snav.ltop li.s2 { margin: 0 3px; }
#snav.ltop li.s2 a { margin: 0; }
#snav.ltop .block { float: left; display:inline; width: 318px; height: 369px; background: url(../images/baths/limg_espreebg.jpg) no-repeat 0 0; position: relative; }
#snav.ltop li.s1 .block { width:317px; background-image:url(../images/baths/limg_luxurybg.jpg); }
#snav.ltop li.s2 .block { background-image:url(../images/baths/limg_comfortbg.jpg); }
#snav.ltop .block img { position: absolute; top: 0; left: 0; z-index: 5; }
#snav.ltop .block p { display: block; margin: 34px 0 0 48px; width:230px; font: 14px/20px "GS"; height: 180px; }
#snav.ltop .block p span.fx { /*font: 14px/14px Arial; position: relative; top: -4px;*/ }
#snav li .block a, #snav li.on .block a, #snav li.s2.on .block a, #snav li.s3.on .block a { display: inline; width: 226px; height: 35px; margin: 19px 0 0 45px; background: url(../images/baths/landing_btn.jpg) no-repeat 0 35px; border: none }
#snav li.s1.on .block a:hover { background-position: 0 0; }
#snav li.s1.on .block a.two:hover { background-position: 0 -35px; }
#snav li.s2.on .block a:hover { background-position: -226px 0; }
#snav li.s2.on .block a.two:hover { background-position: -226px -35px; }
#snav li.s3 .block a { float: left; }
#snav li.s3.on .block a:hover { background-position: -452px 0; }
#snav li.s3.on .block a.two:hover { background-position: -452px -35px; }

#land_left { float: left; width: 319px; height: 421px; background: url(../images/baths/land_bg.jpg) no-repeat 0 0; text-align:center; position: relative; }
#land_left .slide { position: absolute; top: 0; left: 0; z-index: 1; }
#land_left .slide.on { z-index: 2; }
#land_left .slide a.btn { position:absolute; top: 250px; left: 38px; width: 241px; height: 29px; font: 11px/29px Arial, Helvetica, sans-serif; color:#666; text-decoration: none; text-transform: uppercase; background:url(../images/baths/callout_btn.png) no-repeat 0 0; }
#land_left .pager { position: absolute; left: 0; top: 302px; display: block; width: 319px; z-index: 10; }
#land_left .pager a { display: inline-block; width: 18px; height: 18px; font: 11px/18px Helvetica, sans-serif; margin: 0 3px; background: url(../images/baths/dots.gif) no-repeat 0 0; color: #666; text-decoration: none }
#land_left .pager a.on { background-position:-18px 0; color: #fff; }

#land_right { float: left; display:inline; width: 527px; min-height: 339px; background: url(../images/baths/land_bg.jpg) no-repeat top right; color: #666; line-height: 21px; padding: 0 64px 0 50px; }
h1, .h1 { margin: 34px 0 26px; font: 26px/26px "GSL"; text-transform: uppercase;}
h1 strong, .h1 strong { font-weight: normal; font-family: "GS" }
h1.normalize { margin: 0; text-transform: none; font: 12px/18px Arial, Helvetica, sans-serif; display: inline; }

#main { float: left; width: 960px; border-top: 1px solid #dfdfdf; background: url(../images/baths/rrep.gif) repeat-y 0 0; }
#mend { float: left; display:inline; width: 960px; height: 11px; background: url(../images/baths/rend.gif) no-repeat 0 0; margin: 13px 0 0; }
#main #left { float: left; display:inline; width: 315px; margin: 0 1px; /*overflow: hidden*/ }
#main #right { float: right; display:inline; overflow: hidden; width: 642px; position: relative; margin-right: 1px; }
#hero { float: left; width: 642px; height: 394px; overflow: hidden; position: relative }
#hero img { position: absolute; top: 0; left: 0; z-index:1; }

#tabs { float: left; display:inline; width: 626px; padding: 0 0 0 15px; margin: 7px 0 0; list-style: none; height: 35px; border-bottom: 1px solid #dfdfdf }
#tabs li { float: left; }
#tabs li.on { background: url(../images/baths/landing_tabs.png) no-repeat 0 0; }
#tabs li a { float: left; width: 142px; height: 36px; background:url(../images/baths/landing_tabs.gif) no-repeat; text-indent: -999em; }
#tabs li.t1 a { background-position: 0 0; }
#tabs li.t1.on a, #tabs li.t1 a:hover { background-position: 0 -36px; }
#tabs li.t2 a { background-position: -142px 0; width: 136px; }
#tabs li.t2.on { background-position: -142px 0; }
#tabs li.t2.on a, #tabs li.t2 a:hover { background-position: -142px -36px; }
#tabs li.t3 a { background-position: -278px 0; width: 121px; }
#tabs li.t3.on { background-position: -278px 0; }
#tabs li.t3.on a, #tabs li.t3 a:hover { background-position: -278px -36px; }
#tabs li.t4 a { background-position: -399px 0; width: 111px; }
#tabs li.t4.on { background-position: -399px 0; }
#tabs li.t4.on a, #tabs li.t4 a:hover { background-position: -399px -36px; }
#tabs li.t5 a { background-position: -510px 0; width:103px }
#tabs li.t5.on { background-position: -510px 0; }
#tabs li.t5.on a, #tabs li.t5 a:hover { background-position: -510px -36px; }
#tabs li.t413 a, #tabs li.t426 a { background-position: -613px 0; width:121px }
#tabs li.t413.on, #tabs li.t426.on { background-position: -613px 0; }
#tabs li.t413.on a, #tabs li.t413 a:hover, #tabs li.t426.on a, #tabs li.t426 a:hover { background-position: -613px -36px; }

#prods { float: left; display:inline; width: 624px; margin: 14px 0 0 8px; }
#prods .prod { font: 11px/18px "MX"; float: left; display:inline; width: 191px; padding: 3px; border: 1px solid #d7d7d7; position: relative; margin: 0 0 16px 8px; color: #666; }
#prods .prod div.n { float: left; display:inline; width: 187px; padding: 7px 0 4px 6px; margin: 0 0 0 1px; text-transform: uppercase; color: #4b4b4b }
#prods .prod div.n em { font-style: normal; color: #1788A2; }
#prods .prod div.h { float: left; display:inline; width: 191px; padding: 5px 0 2px; border-top: 1px solid #dedede; }
#prods .prod div.h span.ht { float: left; display:inline; width: 92px; font-size: 12px; margin-left: 7px; }
#prods .prod div.h span.h { float: left; display:inline; width: 16px; height: 15px; background: url(../images/hydro_icons.gif) no-repeat 0 0; margin: 1px 4px 0 0; }
#prods .prod div.h span.h.pa { background-position: -16px 0; }
#prods .prod div.h span.h.w { background-position: -32px 0; }
#prods .prod div.h span.h.ss { background-position: -48px 0; }
#prods .prod div.i { display: none; width: 191px; padding-bottom: 4px; min-height: 194px; height: auto !important; height: 194px; font-family: Arial; position: absolute; top: 3px; left: 3px; background:url(../images/baths/tub_roll.png) repeat-y 0 0; }
#prods .prod div.i strong { display: inline; float: left; margin: 11px 0 0 14px; font-size: 12px; color: #000; font-weight:normal; width: 177px; }
#prods .prod div.i ul { float: left; display:inline; margin: 5px 0 7px 14px; padding: 0; list-style: none; width: 177px;  }
#prods .prod div.i ul li { margin: 0; padding: 0 0 0 6px; background:url(../images/baths/tub_dot.gif) no-repeat 0 6px; }
#prods .prod div.i div.t { float: left; display:inline; margin: 0 0 10px 5px; padding: 5px 0 0 9px; width: 172px; border-top: 1px solid #dedede; }
#prods .prod div.i div.t span { font-weight: bold; }
#prods .prod div.i a { float: left; display:inline; width: 183px; height: 25px; color: #555; text-decoration: none; margin: 4px 0 0 5px; text-align: center; background: url(../images/baths/tub_btn.png) no-repeat 0 0; padding: 2px 0 0; }

#left .collection { float: left; display:inline; width: 250px; padding: 0 32px 0 33px; background:url(../images/baths/collection_bg.png) repeat-x 0 0; color:#555 }
#left .collection h1 { margin: 42px 0 18px 2px; }
#left div.typeface-js { float: left; display:inline; width: 250px; font: 14px/20px "GS"; margin: 0 0 57px 2px; }
#left div.typeface-js strong { font-weight: normal; font-family: "GSB"; }
#left div.typeface-js strong.normalize { font-weight: normal; }
#left div.typeface-js span.fx { /*font: 14px/14px Arial; position: relative; top: -4px;*/ }
#left div.typeface-js li, #left .features li { margin: 0 0 10px -1.5em; }
#left .collection div.typeface-js h1.normalize { font: 14px/20px "GS"; margin: 0; }

#left h2, #left h3 { font: 17px/20px "GS"; margin: 0 0 10px 2px; float: left; display:inline; width:258px }
#left h3 { font-size: 15px; line-height: 18px }
#left h3 span.small { font: 12px/15px "GSL" }
#left .features { float: left; display:inline; padding: 10px 0 25px; border: solid #d3d3d3; border-width: 1px 0; font: 12px/13px Arial; position: relative; left: -6px; margin: 0 0 30px; }
#left table.features tr, #left table.features tr td { padding: 0; margin: 0; }

#left a.btn { float: left; display:inline; margin: 18px 0 0; width: 250px; height: 28px; text-indent: -1000em; background: url(../images/left_request.gif) no-repeat 0 0; }
#left a.btn:hover { background-position: 0 -28px; }
#left a.btn.fps { background-image:url(../images/left_floorplans.gif); }

#left div.hr { float: left; display:inline; width: 258px; height: 15px; border-bottom: 1px solid #dfdfdf; margin: 4px 0 19px; }
#left div.download { float: left; width: 258px; }
#left div.download a { float: left; width: 258px; height: 36px; background: url(../images/download.gif) no-repeat 0 0; text-indent:-999em; position:relative }
#left div.download a span { display: block; width: 11px; height: 11px; background: url(../images/arr.gif) no-repeat 0 0; position:absolute; top:14px; left:-3px; }
#left div.download a.on span { background-position: 0 -11px; }
#left div.download p { font-weight: bold; color: #7c7056; }
#left div.download p a { width: 33px; height: 25px; background-image:url(../images/go.jpg); float: right; display:inline; margin-right: 20px }
#left div.download select { width: 197px; }

#left .name { float: left; display:inline; width: 317px; height: 153px; padding: 6px 0 0; text-align: center; background: url(../images/baths/name_luxury.jpg) no-repeat 0 0; }
#left .name.comfort { background-image: url(../images/baths/name_comfort.jpg); }
#left .name.espree { background-image: url(../images/baths/name_espree.jpg); }
#left .name h1, #left .name .h1.typeface-js { font: 27px/35px "GSL"; width: 317px; margin: 36px 0 25px }
#left .name h1 strong, #left .name .h1.typeface-js strong { color: #fff; font-weight: normal; }

#right .desc { float: left; display:inline; width: 538px; height: 136px; padding: 23px 58px 0 46px; background: url(../images/baths/tub_desc.jpg) no-repeat bottom left; color: #555; font: 14px/20px "GS"; }
#right .desc p, #right .desc .p { margin: 0 0 14px; }
#right .desc a { color: #000; text-decoration: none; }
#right .desc a.loc { font: 12px/14px "MX"; }
#right .desc span.fx { /*font:12px/12px Arial, Helvetica, sans-serif; position: relative; top: -5px;*/ }
#right .desc h1.normalize, #right .desc h2.normalize, #right .desc h2.normalize, #right .desc h2.normalize, #right .desc h2.normalize { font: 14px/20px "GS" }

#right.hasmore #hero { margin-bottom: 159px; }
#right.hasmore .desc { position: absolute; top: 394px; left: 0; width: 539px; z-index: 10; }
#right .desc div.more, #right .desc a#closedesc, #right .desc a#moredesc {display: none; }
#right.hasmore .desc a#closedesc { font: bold 11px/13px Arial, Helvetica, sans-serif; position: absolute; top: 5px; right: 12px; display: none }
#right.hasmore .desc a#moredesc { position: relative; top: -1px; display: inline }
#right .bigtab { float: left; display: inline; width: 642px; color: #666 }
#design h3 { float: left; display:inline; width: 596px; height: 35px; background: url(../images/baths/options.png) repeat-x 0 0; font: 18px/22px "GS"; padding: 7px 0 0 46px; color: #666; margin: 19px 0; }
#design h3 em { font: normal 14px/22px "GSL"; position: relative; top: 1px; }
#design .optgroup, #design .attribute { float: left; display:inline; width: 619px; }
#design .optgroup { margin: 0 0 0 11px; }
#design h4 { float: left; display:inline; width: 582px; padding: 0 0 11px 37px; font: 13px/16px Arial; color:#666; margin: 18px 0; border-bottom: 1px solid #e6e6e6; }
#design h4 strong { font-weight:normal; color: #000; text-transform: uppercase; }
#design h4 span.color { display: none; }
#design h4 span.color.on { display: inline; }
#design label { float: left; }
#design p label { float: none; display: inline-block }
#design label, #design input { cursor: pointer; }
#design label.size { margin: 10px 0 0 70px; width: 293px; }
#design label.size.on, #design label.size:hover { color: #000; }
#design label.color { width: 142px; margin: 15px 0 0 12px; color: #818181; text-transform:lowercase }
#design .color input { float: left; }
#design label.color span { float: left; display:inline; margin: 1px 11px 1px 5px; width:52px; height: 48px; border: 1px solid #d0d0d0; position: relative; top: -15px  }
#design label.color.on, #design label.color:hover { color: #000; }
#design label.color.on span, #design label.color:hover span { margin: 0 10px 0 4px; border: 2px solid #999; }
#design label.exp { width: 599px; border-bottom: 1px solid #e6e6e6; padding: 14px 10px 10px; background: url(../images/baths/experience_options.gif) no-repeat 37px 7px; }
#design label.exp.open { padding-bottom: 0; }
#design .exp input { float:left; }
#design .exp span.typeface-js { font: 16px/20px "GS"; color: #999; float: left; position: relative; left: 65px; top: -3px; }
#design .exp.on span.typeface-js { color: #666; }
#design .exp a { float: right; font-size: 11px; color: #7e7e7e; text-decoration: none; }
#design label.exp.ss.on, #design label.exp.ss:hover { background-position: 37px -183px; }
#design label.exp.s { background-position: 37px -38px; }
#design label.exp.s.on, #design label.exp.s:hover { background-position: 37px -228px; }
#design label.exp.pa { background-position: 37px -83px; }
#design label.exp.pa.on, #design label.exp.pa:hover { background-position: 37px -273px; }
#design label.exp.w { background-position: 37px -128px; }
#design label.exp.w.on, #design label.exp.w:hover { background-position: 37px -318px; }
#design .exp.last { border-bottom: none; }
#design .exp span.more { float: left; display:inline; width: 599px; margin: 3px 0 0; font: 11px/15px Arial; background: #fff; border-bottom: 10px solid #fff }

#design h2 { font: 19px/25px Arial; margin: 0; }
#design h5 { font: 14px/18px Arial; text-transform: uppercase; margin: 0 }
#design .attribute .off { display: none; }

.alignleft { float: left; display:inline; margin: 0 30px 5px; }

#design .option { float: left; display:inline; position: relative; width: 611px; padding-left: 8px; }
#design .option input { position: absolute; top: 46px; left: 11px; }
#design div.option { padding-top: 4px; margin: 8px 0; }
#design div.option h2 { margin: 0 0 4px; }
#design div.option.on { background: url(../images/baths/opton.gif) no-repeat 0 0; }
/* fix Whisper Motor styling */
#design div.option.o379, #design div.option.o324, #design div.option.o378 { width: 574px; padding-left: 37px; }
#design div.option.o379 img, #design div.option.o80, #design div.option.o324 img, #design div.option.o378 img { display:none }
#design div.option.on.o379, #design div.option.on.o324, #design div.option.on.o378 { background: none; }
#design div.option.o379 input, #design div.option.o324 input, #design div.option.o378 input { top: 6px; }

#design div.option img.alignleft { margin-right: 53px; }
#design label.trim { margin-left: 20px; padding-left: 28px; position: relative; }
#design label.trim input { position: absolute; left: 0; top: 44px }

#left ul.tabs { float: left; display:inline; margin: 0; padding: 12px 0 0 12px; width: 302px; height: 50px; background: url(../images/baths/tab_bg.png) repeat-x 0 0; list-style:none }
#left ul.tabs li { float: left; display:inline; width: 142px; height: 50px; margin-right: 9px; }
#left ul.tabs li a { float: left; width: 142px; height: 50px; font: 12px/50px "MX"; color: #666; text-decoration: none; background:url(../images/baths/tabs.png) no-repeat -142px 0; text-align: center; text-transform:uppercase }
#left ul.tabs li.on a { background-position: 0 0; }
#left ul.tabs li a span.on { color: #000; }
#left ul.tabs span.on, #left ul.tabs li.on a span.off, #right .bigtab.off { display: none; }
#left ul.tabs li.on a span.on { display:block; }

#left #designleft { float: left; width: 315px; position: relative; }
#left .summary { float: left; display:inline; width: 258px; margin-left: 33px; line-height: 19px; }
#left .summary h2 { font-size: 16px; margin: 18px 0 0; }
#left .summary h3 { border-bottom: 1px solid #dfdfdf; margin: 20px 0 7px; padding-bottom: 7px }
#left .summary h3#priceh3 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
#left .summary h3#priceh3 span#price { font-family: Arial, Helvetica, sans-serif; color: #55A4B8; position: relative; top: -3px }
#left .summary h3#priceh3 em { font: normal 11px/14px Arial, Helvetica, sans-serif; position: relative; top: -4px; left: 30px; }
#left .summary h3#priceh3 em a { text-decoration: underline; }
#left .summary div { display: block; font-size: 11px; color: #666; float: left; width: 258px; }
#left .summary div span.spec { float: left; width: 142px; }
#left .summary div.size span { float:left; display:inline; margin: 0 9px 9px 0; width: 16px; height: 16px; background: url(../images/baths/exp_icons.gif) no-repeat 0 0; }
#left .summary div.size span.txt { width: 149px; background: none; line-height: 16px }
#left .summary div.size span.pa { background-position: -16px 0; }
#left .summary div.size span.w { background-position: -32px 0; }
#left .summary div.size span.ss { background-position: -48px 0; }
#left .summary div strong{ float: left; width: 116px; }
#left #designleft .summary { position: absolute; top: 0; left: 0; }

#left #colors span { float: left; display:inline; width: 52px; height: 12px; margin: 4px 10px 27px 0; border: 1px solid #989898; }

#left .summary form { float: left; }
#left .btn2 { display: block; width: 240px; height: 28px; font: 12px/28px Arial; text-align: center; border: none; text-decoration: none; background: url(../images/left_btn.png) no-repeat 0 0; text-transform:uppercase; color: #555; margin: 10px 0; cursor: pointer; float: left; display:inline; }
#left .btn2:hover { background-position: 0 -28px; color: #fff; }
#left .summary form .btn2 { margin: 0; }
#left p, #left p a { color: #7e7e7e; }
#left p a { text-decoration: none; }
#left p a:hover { text-decoration: underline }

#details { background: url(../images/baths/details.png) repeat-x 0 0; }
#details h2 { font: 19px/22px "GSL"; margin: 28px 0 45px 45px; }
#details h2 strong { font-family: "GS"; font-weight: normal; position: relative; top: -2px }
#details div.exp { float: left; display:inline; width: 561px; background: url(../images/baths/detailsrep.png) repeat-x bottom left; padding: 0 36px 0 45px; margin: 0 0 30px; line-height: 19px; }
#details h3 { font: 16px/20px "GS"; border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; margin: 0 0 20px; }
#details h3 img.alignleft { margin: 0 10px 0 0; }
a.designthis { display:block; width: 222px; height: 29px; text-indent:-999em; background: url(../images/baths/design.png) no-repeat 0 0; }

#content.land { background: url(../images/baths/land_rep.gif) repeat-y 0 0; }
#l_end { float: left; width: 960px; height: 12px; background: url(../images/baths/land_end.png) no-repeat 0 0; }