/* ========= 1.0 UNIVERSAL RESETS 2.0 GENERIC CLASSES 3.0 GENERAL STRUCTURE 4.0 HEADINGS 5.0 BRANDING 6.0 LINKS 7.0 PARAGRAPHS 8.0 BLOCKQUOTES AND CITATIONS 9.0 FORMS 10.0 LISTS 11.0 TABLES 12.0 MISC PRESENTATION ELEMENTS 13.0 IMAGES 14.0 META 15.0 ACCESSIBILITY 16.0 PAGE SPECIFIC Common colors used throughout site Logo magenta: #ac0535 Light gray: #cccccc Middle gray (background of product boxes): #b8b8b8 Dark gray: #474747 Bath: collections - bath-1 handles - bath-2 install - bath-3 finishes - bath-6 hand-shower - roman-2 separate volume/temp - tubshower-2 Kitchen: handles - kitchen-2 Touch2o - kitchen-4 pulldown - kitchen-5 side-sprayer - kitchen-6 soap dispenser - kitchen-7 ========= */ /* 1.0 UNIVERSAL RESETS ------------------------------------------ */ * { margin: 0; padding: 0; } /* 2.0 GENERIC CLASSES ------------------------------------------ */ /* 3.0 GENERAL STRUCTURE ------------------------------------------ */ body#perfectOverview div#contentBody { float: left; width: 465px; border: 6px solid #474747; border-left: none; background: #ccc; padding: 0; min-height: 357px; } body.perfectQuestions div#contentBody { position: relative; float: left; width: 441px; border: 6px solid #474747; background: #ccc; padding: 12px; min-height: 308px; } body.perfectAnswer div#contentBody { padding: 20px 0 20px 11px; } body#perfectOverview div#featurePhoto { height: 357px; width: 465px; background: #474747 url(/images/perfectfaucet/bg-perfect-overview.jpg) no-repeat; border: 6px solid #474747; float: left; } body.perfectQuestions div#featurePhoto { height: 332px; width: 465px; background: #474747 url(/images/perfectfaucet/bg-perfect-bathsink.jpg) no-repeat; border: 6px solid #474747; border-left: none; float: left; } body.perfectfaucet-bath_sink_new-1 div#featurePhoto, body.perfectfaucet-bath_sink_replace-4 div#featurePhoto { background: url(/images/customersupport/identify/bath-3.jpg) no-repeat; } body.perfectfaucet-bath_sink_new-2 div#featurePhoto, body.perfectfaucet-bath_sink_replace-5 div#featurePhoto { background: url(/images/customersupport/identify/bath-2.jpg) no-repeat; } /* Finishes */ body.perfectfaucet-bath_sink_new-3 div#featurePhoto, body.perfectfaucet-bath_roman_tub_new-1 div#featurePhoto, body.perfectfaucet-bath_tub_shower_new-1 div#featurePhoto, body.perfectfaucet-bath_shower_new-1 div#featurePhoto, body.perfectfaucet-bath_sink_replace-1 div#featurePhoto, body.perfectfaucet-bath_sink_replace-2 div#featurePhoto, body.perfectfaucet-bath_roman_tub_replace-1 div#featurePhoto, body.perfectfaucet-bath_roman_tub_replace-2 div#featurePhoto, body.perfectfaucet-bath_tub_replace-1 div#featurePhoto, body.perfectfaucet-bath_tub_replace-2 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-1 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-2 div#featurePhoto, body.perfectfaucet-bath_shower_replace-1 div#featurePhoto, body.perfectfaucet-bath_shower_replace-2 div#featurePhoto, body.perfectfaucet-kitchen_new-2 div#featurePhoto, body.perfectfaucet-kitchen_replace-1 div#featurePhoto, body.perfectfaucet-kitchen_replace-2 div#featurePhoto, body.perfectfaucet-bath_tub_new-1 div#featurePhoto { background: url(/images/customersupport/identify/bath-6.jpg) no-repeat; } body.perfectfaucet-bath_roman_tub_new-3 div#featurePhoto, body.perfectfaucet-bath_roman_tub_replace-5 div#featurePhoto { background: url(/images/customersupport/identify/roman-2.jpg) no-repeat; } body.perfectfaucet-bath_tub_new-3 div#featurePhoto, body.perfectfaucet-bath_tub_replace-4 div#featurePhoto, body.perfectfaucet-bath_tub_shower_new-3 div#featurePhoto, body.perfectfaucet-bath_shower_new-3 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-4 div#featurePhoto, body.perfectfaucet-bath_shower_replace-4 div#featurePhoto { background: url(/images/customersupport/identify/tubshower-2.jpg) no-repeat; } /* ADA */ body.perfectfaucet-bath_sink_new-4 div#featurePhoto, body.perfectfaucet-bath_sink_replace-6 div#featurePhoto { background: url(/images/perfectfaucet/bath-sink-ada.jpg) no-repeat; } body.perfectfaucet-bath_roman_tub_new-2 div#featurePhoto, body.perfectfaucet-bath_roman_tub_replace-3 div#featurePhoto { background: url(/images/perfectfaucet/bath-roman-ada.jpg) no-repeat; } /* Handshower */ body.perfectfaucet-bath_custom-5 div#featurePhoto, body.perfectfaucet-bath_jetted_new-8 div#featurePhoto { background: url(/images/perfectfaucet/bath-handshower.jpg) no-repeat; } /* At least one showerhead */ body.perfectfaucet-bath_custom-1 div#featurePhoto { background: url(/images/perfectfaucet/bath-shower-touchclean.jpg) no-repeat; } /* Showerhead */ body.perfectfaucet-bath_custom-6 div#featurePhoto, body.perfectfaucet-bath_jetted_new-9 div#featurePhoto { background: url(/images/perfectfaucet/bath-showerhead.jpg) no-repeat; } /* Tub Spout */ body.perfectfaucet-bath_custom-2 div#featurePhoto, body.perfectfaucet-bath_jetted_new-1 div#featurePhoto { background: url(/images/perfectfaucet/jetted_tub_faucet.jpg) no-repeat; } /* Watersense */ body.perfectfaucet-bath_sink_new-6 div#featurePhoto, body.perfectfaucet-bath_sink_replace-8 div#featurePhoto { background: url(/images/perfectfaucet/bath-sink-watersense.jpg) no-repeat; } /* Thermostatic */ body.perfectfaucet-bath_tub_shower_new-2 div#featurePhoto, body.perfectfaucet-bath_shower_new-2 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-3 div#featurePhoto, body.perfectfaucet-bath_shower_replace-3 div#featurePhoto, body.perfectfaucet-bath_jetted_new-3 div#featurePhoto { background: url(/images/perfectfaucet/bath-shower-thermostatic.jpg) no-repeat; } /* H20 Kinetic */ body.perfectfaucet-bath_tub_shower_new-5 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-6 div#featurePhoto { background: url(/images/perfectfaucet/bath-shower-h20kinetic.jpg) no-repeat; } /* Magnatite */ body.perfectfaucet-kitchen_new-7 div#featurePhoto, body.perfectfaucet-kitchen_replace-9 div#featurePhoto { background: url(/images/perfectfaucet/kitchen-magnatite.jpg) no-repeat; } /* Touch Clean */ body.perfectfaucet-bath_tub_shower_new-6 div#featurePhoto, body.perfectfaucet-bath_shower_new-6 div#featurePhoto, body.perfectfaucet-bath_tub_shower_replace-7 div#featurePhoto, body.perfectfaucet-bath_shower_replace-7 div#featurePhoto { background: url(/images/perfectfaucet/bath-shower-touchclean.jpg) no-repeat; } /* Hole pattern */ body.perfectfaucet-bath_sink_replace-3 div#featurePhoto { background: url(/images/perfectfaucet/bath-sink-holepattern.jpg) no-repeat; } body.perfectfaucet-bath_roman_tub_replace-4 div#featurePhoto { background: url(/images/perfectfaucet/bath-roman-holepattern.jpg) no-repeat; } body.perfectfaucet-kitchen_replace-4 div#featurePhoto { background: url(/images/perfectfaucet/kitchen-holepattern.jpg) no-repeat; } /* Diamondseal */ body.perfectfaucet-bath_sink_new-5 div#featurePhoto, body.perfectfaucet-bath_sink_replace-7 div#featurePhoto { background: url(/images/perfectfaucet/bath-diamondseal.jpg) no-repeat; } body.perfectfaucet-kitchen_new-3 div#featurePhoto, body.perfectfaucet-kitchen_replace-5 div#featurePhoto { background: url(/images/perfectfaucet/kitchen-diamondseal.jpg) no-repeat; } /* Bath Style */ body.perfectfaucet-bath_custom-3 div#featurePhoto { background: url(/images/perfectfaucet/bath-style.jpg) no-repeat; } /* Jetted Style */ body.perfectfaucet-bath_jetted_new-5 div#featurePhoto { background: url(/images/perfectfaucet/jetted-style.jpg) no-repeat; } /* Bath Customizations */ body.perfectfaucet-bath_custom-4 div#featurePhoto { background: url(/images/perfectfaucet/bath-customizations.jpg) no-repeat; } /* Jetted Customization */ body.perfectfaucet-bath_jetted_new-7 div#featurePhoto { background: url(/images/perfectfaucet/jet-customizations.jpg) no-repeat; } /* Bar/Prep sink */ body.perfectfaucet-kitchen_new-1 div#featurePhoto, body.perfectfaucet-kitchen_replace-3 div#featurePhoto { background: url(/images/perfectfaucet/kitchen-bar-prep.jpg) no-repeat; } /* High-arc vs standard */ body.perfectfaucet-kitchen_new-11 div#featurePhoto, body.perfectfaucet-kitchen_replace-13 div#featurePhoto { background: url(/images/perfectfaucet/kitchen-higharc-standard.jpg) no-repeat; } /* Touch2o */ body.perfectfaucet-kitchen_new-5 div#featurePhoto, body.perfectfaucet-kitchen_replace-7 div#featurePhoto { background: url(/images/customersupport/identify/kitchen-4.jpg) no-repeat; } /* Pull down */ body.perfectfaucet-kitchen_new-6 div#featurePhoto, body.perfectfaucet-kitchen_replace-8 div#featurePhoto { background: url(/images/customersupport/identify/kitchen-5.jpg) no-repeat; } /* # of Handles */ body.perfectfaucet-kitchen_new-8 div#featurePhoto, body.perfectfaucet-kitchen_replace-10 div#featurePhoto { background: url(/images/customersupport/identify/kitchen-2.jpg) no-repeat; } /* Side sprayer */ body.perfectfaucet-kitchen_new-9 div#featurePhoto, body.perfectfaucet-kitchen_replace-11 div#featurePhoto { background: url(/images/customersupport/identify/kitchen-6.jpg) no-repeat; } /* Soap dispenser */ body.perfectfaucet-kitchen_new-10 div#featurePhoto, body.perfectfaucet-kitchen_replace-12 div#featurePhoto { background: url(/images/customersupport/identify/kitchen-7.jpg) no-repeat; } body#perfectOverview.kitchen div#featurePhoto { background: url(/images/perfectfaucet/bg-perfect-kitchen.jpg) no-repeat; } body.perfectfaucet-kitchen_new div#featurePhoto { background: url(/images/perfectfaucet/bg-perfect-kitchen-new.jpg) no-repeat; } body.perfectfaucet-kitchen_replace div#featurePhoto { background: url(/images/perfectfaucet/bg-perfect-kitchen-replace.jpg) no-repeat; } /*NEW JETTED SHOWERS STUFF*/ body.perfectfaucet-bath_jetted_new-2 div#featurePhoto { background: url(/images/perfectfaucet/integrated-separate.jpg) no-repeat; } body.perfectfaucet-bath_jetted_new-4 div#featurePhoto { background: url(/images/perfectfaucet/single-dual-function.jpg) no-repeat; } body.perfectfaucet-bath_jetted_new-6 div#featurePhoto { background: url(/images/perfectfaucet/FINISHES.jpg) no-repeat; } /*---------------------------*/ div.addPadding { padding: 12px 24px; } div#spacing { height: 90px; } /*div.questionNavButtons { position: absolute; bottom: 15px; left: 107px; }*/ body.perfectAnswer div.questionNavButtons { position: static; width: 249px; margin: 0 auto; } div#finishesContainer { width: 380px; margin: 6px 18px; clear: both; } div.finishOption { position: relative; float: left; width: 35px; height: 35px; text-align: center; margin: 0 6px 6px 0; padding-bottom: 1.5em; padding: 0; } div#holesContainer { margin: 12px 18px; clear: both; } div.holeOption { position: relative; float: left; width: 85px; height: 85px; text-align: center; margin: 0 6px 6px 0; font-size: 0.85em; } body.altLayout div#contentBody { border: 6px solid #474747; border-top: none; } body#bathSelect div#contentBody { padding: 20px 14px; } div.selectTubShower { width: 140px; float: left; margin-right: 12px; } body#bathSelect div.last { margin-right: 0; } div.error { padding-left: 16px; position: absolute; top: 0; } div.finishOption div.error { bottom: 0; } div#searchInfo { background: #474747; position: relative; padding: 6px 16px 6px 0; } /* Save and Compare links on results page */ div#saveCompare { float: right; padding-top: 5px; } div#additional { background: #eee; border-top: 2px solid #474747; margin: 20px 0 -20px -11px; padding: 20px; } div#additional p { font-weight: bold; } /* 4.0 HEADINGS ------------------------------------------ */ h3#perfectFaucetHeading { color: #474747; padding: 24px 0 18px 22px; font-size: 1.3em; } li.accActive h3#perfectFaucetHeading { position: relative; top: 50px; } li.contentOption h4.accHead { text-transform: uppercase; display: block; font-size: 1em; font-weight: bold; letter-spacing: 0.02em; background: #474747 url(/images/bg-toggle-small.gif) no-repeat scroll 6px -30px; color: white !important; padding: 12px 22px; text-decoration: none; cursor: pointer; } li.contentOption h4.accActive { background-position: 5px 3px; } body#perfectOverview h5 { font-size: 1em; } body#perfectOverview h6 { font-size: 0.9em; } body.perfectQuestions h3 { background: #474747; color: white; font-size: 1.2em; margin: 0; padding: 6px 12px 0; } body.perfectQuestions h4 { color: #333; font-size: 18px; } body.perfectAnswer h3 { background: #474747; color: white; font-size: 1.2em; margin: 0; padding: 6px 12px; } body.altLayout div#contentBody h3 { background: #474747; color: white; text-transform: uppercase; padding: 8px 11px 4px; margin: -20px -20px 20px; font-size: 1em; } h4.productType { font-size: 1.15em; margin: 0 0 12px 0; } div.selectTubShower h5 { text-align: center; margin: 0 0 6px; font-size: 0.9em; background: #474747; color: white; width: 142px; padding: 2px 0 1px; } /* 5.0 BRANDING ------------------------------------------ */ /* 6.0 LINKS ------------------------------------------ */ body#perfectOverview div.accordionItemWrapper ul a { display: block; } div#content div#contentBody div.questionNavButtons a, div#content div#contentBody button.flatButton, div#content div#contentBody a.flatButton { display: block; float: left; margin-right: 55px; background: white; color: #222; border: 1px solid #474747; padding: 2px 0 0; width: 95px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 0.8em; cursor: pointer; } button.flatButton { padding: 0; } body.altLayout div#content div#contentBody button.flatButton, body.altLayout div#content div#contentBody a.flatButton { float: none; width: 140px; margin-bottom: 3px; margin-right: 0; } body.altLayout div#content div#contentBody button.disabled, body.altLayout div#content div#contentBody a.disabled { color: #ddd; background: #333; } div#content div#contentBody div.questionNavButtons button.flatButton { float: none; margin: 0 auto; } body.perfectAnswer div#content div#contentBody div.questionNavButtons a.last { margin-right: 0; } div.selectTubShower a { display: block; } div#content div#contentBody a.flatButton:hover { color: #ac0535; background: #eee; } a.restartLink { font-weight: normal; font-size: 0.9em; } a#saveAllButton, a#compareAllButton { display: block; float: left; background-image:url(/images/products/bg-savecompareall.gif); overflow:hidden; text-indent:-100em; cursor: pointer; } a#saveAllButton { width: 72px; margin-right: 12px; } a#saveAllButton:hover { background-position: 0 -20px; } a#compareAllButton { width: 97px; background-position: -100px 0; } a#compareAllButton:hover { background-position: -100px -20px; } /* 7.0 PARAGRAPHS ------------------------------------------ */ p.question { font-size: 1.2em; line-height: 1.25; color: #333; } body#perfectOverview p.intro { background: #474747; padding: 6px 16px; font-weight: bold; font-size: 1em; text-transform: uppercase; color: white; } body.perfectAnswer p.intro strong { display: block; } /* 8.0 BLOCKQUOTES AND CITATIONS ------------------------------------------ */ /* 9.0 FORMS ------------------------------------------ */ div.finishOption label { display: block; } div.finishOption input { position: absolute; top: 19px; right: 1px; } div.holeOption label { display: block; } div.holeOption input { } li.styleOption label { display: block; } /* 10.0 LISTS ------------------------------------------ */ ul#contentOptions { list-style: none; margin: 0; padding: 0; } li.contentOption ul { list-style: none; margin: 0 0 1em; padding: 0; } li.contentOption ul li { width: 115px; float: left; margin-right: 10px; } ul.answersList { list-style: none; font-weight: bold; position: relative; padding-top: 1.5em; } ul.answersList li { clear: both; } ul.styleOptions { padding: 0; margin: 0 0 10px 0; list-style: none; } ul.styleOptions li.styleOption { width: 145px; overflow: hidden; float: left; text-align: center; clear: none; } ul#collectionOptions li.styleOption { width: 100px; } /* 11.0 TABLES ------------------------------------------ */ body.perfectfaucet-bath_jetted_new-9 th{ background: #B8B8B8; border-top: 3px solid #474747; border-bottom: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; color: #333; padding: 10px; margin: 0; } body.perfectfaucet-bath_jetted_new-9 th[colspan="3"]{ background: #ccc; border-top: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; color: #ac0535; padding: 10px; margin: 0; } body.perfectfaucet-bath_jetted_new-9 td{ background: #E6E6E6; padding: 10px; border: 1px solid #999; margin: 0px; } /* 12.0 MISC PRESENTATION ELEMENTS ------------------------------------------ */ /* 13.0 IMAGES ------------------------------------------ */ div.finishOption label img { display: block; width: 35px; margin: 0 auto; } div.selectTubShower img { border: 1px solid #474747; display: block; } div.holeOption label img { display: block; margin: auto; } /* 14.0 META ------------------------------------------ */ /* 15.0 ACCESSIBILITY ------------------------------------------ */ /* 16.0 PAGE SPECIFIC ------------------------------------------ */ li.styleOption div{ position: absolute; top: 0; margin: -105px 0px 0px -1px; } body.perfectfaucet-bath_jetted_new-6 li.styleOption div{ position: absolute; top: 0; margin: -121px 0px 0px -1px; } li.styleOption div img{ width:465px; }