/* CSS Document * * @developer: Jake Mize * @designer: Jake Mize * @website: http://www.electric.com * */ /* This is an adaptive / responsive site. Please make sure you create styles for desktop, tablet and mobile devices. */ /* gradients */ .gradient-black { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; } .gradient-white { background: #ececec; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ececec 0%, #ffffff 18%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ececec), color-stop(18%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ececec 0%,#ffffff 18%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ececec 0%,#ffffff 18%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ececec 0%,#ffffff 18%); /* IE10+ */ background: linear-gradient(-45deg, #ececec 0%,#ffffff 18%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} /* rounded corners */ .corner-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .corner-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* vertical alignment - make parent element display table and wrap element you want to vertical align center with this */ .vertical-align { display: table-cell; vertical-align: middle;} /* wrappers */ #wrapper-content { min-width: 960px; padding: 30px 0 20px 0;} /******************************************************************************** ADDRESS BAR in the MARKETPLACE ********************************************************************************/ #address-bar { margin: 0; padding: 19px 0; width: 950px; } #icon-address { background: url(/images/sprite-icons.png) 0 0 no-repeat; float: left; height: 35px; margin: 0 20px 0 0; width: 37px;} #address { color: #c13600; float: left; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 680px; border-left: 1px solid #a5a5a5; height: 20px; padding: 10px 20px;} #address span { color: #1a1f1e; font-family: Arial, Helvetica, sans-serif; font-weight: normal; } #change-address { border-left: 1px solid #a5a5a5; height: 20px; float: right; padding: 10px 0 10px 20px;} #change-address .button-change-address { color: #000000; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.4; text-decoration: none; text-transform: uppercase;} #change-address .button-change-address:hover, #change-address .button-active { color: #c13600;} /* styles for address change expansion */ .address-search-response { background: #C13600; color: #ffffff; display: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 18px; margin: 0 0 20px 0; padding: 10px 5%; text-align: center; text-shadow: 0 -1px #501600; width: 90%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .address-search-response.error { color: #C13600; } #address-expand { background: #161b1a; display: none; margin: 0 0 5px 0; min-width: 1020px; padding-bottom: 35px; } .address-expand-content { color: #ffffff; display: table; font-size: 15px; margin: 0 auto; padding: 35px 0 0 0; width: 950px; position: relative; } .address-expand-content p { border-right: 1px solid #a5a5a5; float: left; margin: 0 35px 0 0; padding: 0 25px 0 0; width: 200px;} /* competitor style for experiences where we show competitor prices */ .competitor-marketplace p { width: 500px;} .form-separator { display: block; } .address-expand-content label { margin: 0 30px 0 0;} .address-expand-content input { font-size: 15px; padding: 5px;} .address-expand-content .address-input { height: 20px; width:400px; } .address-expand-content .zip-input { height: 20px; width: 100px;} .address-expand-content .submit { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; color: #ffffff; cursor: pointer; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 7px 12px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px #501600;} .address-expand-content .submit:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0 -1px #000000;} /******************************************************************************** ICONS ********************************************************************************/ .icon-green-energy { background: url(/images/sprite-icons.png) -43px -37px no-repeat; height: 33px; width: 32px;} .icon-green-energy.not-offered { background: url(/images/sprite-icons.png) -43px -177px no-repeat; height: 33px; width: 32px;} .icon-rewards { background: url(/images/sprite-icons.png) -83px -72px no-repeat; height: 33px; width: 32px;} .icon-rewards.not-offered { background: url(/images/sprite-icons.png) -83px -212px no-repeat; height: 33px; width: 32px;} .icon-intro-rate { background: url(/images/sprite-icons.png) -123px -107px no-repeat; height: 33px; width: 32px;} .icon-intro-rate.not-offered { background: url(/images/sprite-icons.png) -123px -247px no-repeat; height: 33px; width: 32px;} .icon-online-only { background: url(/images/sprite-icons.png) -163px -142px no-repeat; height: 33px; width: 32px;} .icon-online-only.not-offered { background: url(/images/sprite-icons.png) -163px -282px no-repeat; height: 33px; width: 32px;} .icon-auto-billpay { background: url(/images/sprite-icons.png) -203px -177px no-repeat; height: 33px; width: 32px;} .icon-auto-billpay.not-offered { background: url(/images/sprite-icons.png) -203px -317px no-repeat; height: 33px; width: 32px;} .icon-no-cancellation-fees { background: url(/images/sprite-icons.png) -243px -212px no-repeat; height: 33px; width: 32px;} .icon-no-cancellation-fees.not-offered { background: url(/images/sprite-icons.png) -243px -352px no-repeat; height: 33px; width: 32px;} .icon-no-deposit { background: url(/images/sprite-icons.png) -283px -247px no-repeat; height: 33px; width: 32px;} .icon-no-deposit.not-offered { background: url(/images/sprite-icons.png) -283px -387px no-repeat; height: 33px; width: 32px;} .icon-rate-cap { background: url(/images/sprite-icons.png) -323px -282px no-repeat; height: 33px; width: 32px;} .icon-rate-cap.not-offered { background: url(/images/sprite-icons.png) -323px -422px no-repeat; height: 33px; width: 32px;} /******************************************************************************** MARKETPLACE ********************************************************************************/ .legend-description { display: none; } .permanent { display: block; } #loading, #no-results { text-align: center; padding: 50px; background-color: white; } #loading img { position: relative; top: 2px; } #error-box { color:white;background-color: red; padding:5px; text-align: center;margin:0 10px;display:none;} /* sort by and filter bar */ #sort-filter-bar { display: block; height: 45px; font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 auto; padding: 0 0 15px 0; text-transform: uppercase; width: 950px; line-height: 1; } #sort-filter-bar li { float: left; display: inline-block; margin: 0 35px 0 0; padding: 15px 0; height: 15px;} li.divider { border-left: 1px solid #a5a5a5; } #sort-filter-bar .button { color: #000000; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; line-height: 1.4; text-decoration: none; text-transform: uppercase;} #sort-filter-bar .button:hover { color: #c13600;} #sort-filter-bar .button-filters, #sort-filter-bar .button-legend { color: #000000; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.4; text-decoration: none; text-transform: uppercase;} #sort-filter-bar .button-filters:hover, #sort-filter-bar .button-legend:hover, #sort-filter-bar .button-active { color: #c13600;} #filters-expand, #legend-expand { background: url(/images/bg-expand-repeat.png) repeat; border: 5px solid #ffffff; display: none; font-size: 12px; line-height: 1.5; margin: 0 auto 15px auto; width: 950px; } /* styles for filter expansion */ #filters-expand .descriptions { float: left; padding: 20px; width: 280px;} #filters-expand .product-type { border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; float: left; padding: 20px; width: 208px; } #filters-expand .product-type li { cursor: pointer; float: left; margin: 0 0 5px 0; width: 100px;} #filters-expand .product-type li input { margin: 0 8px 0 0;} #filters-expand .additional-selections { float: left; padding: 20px; width: 275px;} #filters-expand .additional-selections li { height: 25px; margin: 0 0 5px 0; width: 275px;} #filters-expand .additional-selections li span { float: left; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; width: 75px;} #filters-expand .additional-selections li select { float: left;} #filters-expand .additional-selections .submit { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; color: #ffffff; cursor: pointer; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px 7px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px #501600;} #filters-expand .additional-selections .submit:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0 -1px #000000;} /* styles for legend expansion */ #legend-expand .descriptions { float: left; padding: 20px; width: 280px;} #legend-expand .icons { border-left: 1px solid #e0e0e0; float: left; padding: 20px; width: 505px; } #legend-expand .icons li { cursor: pointer; display: table; float: left; line-height: 1.2; margin: 0 15px 15px 0; padding: 0 0 0 40px; vertical-align: middle; width: 130px;} /* title bar */ .title-bar { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; box-shadow: 3px 3px #d9d9d9; height: 48px; margin: 0 0 3px 0; width: 960px; border: 1px solid #161b1a; } .title-bar li { color: #ffffff; display: inline-block; float: left; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 16px 10px 16px 0; text-align: right; text-transform: uppercase; text-shadow: #000000 0 -1px 0; } .title-bar li.column-rank { border-right: 1px solid #1a1e1d; width: 44px;} .title-bar li.column-rates { border-right: 1px solid #1a1e1d; text-align: center; width: 124px;} .title-bar li.column-products { border-right: 1px solid #1a1e1d; text-align: center; width: 154px;} .title-bar li.column-variable { border-right: 1px solid #1a1e1d; width: 162px;} .title-bar li.column-6-month { border-right: 1px solid #1a1e1d; width: 94px; display: none;} .title-bar li.column-12-month { border-right: 1px solid #1a1e1d; width: 120px;} .title-bar li.column-36-month-plus { border-right: 1px solid #1a1e1d; width: 120px;} /* footer bar */ .footer-bar { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; box-shadow: 3px 3px #d9d9d9; height: 48px; margin: 0 0 3px 0; width: 960px; border: 1px solid #161b1a; } .footer-bar a { color: #ffffff; float: right; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.4; margin: 15px 25px 0 0; text-decoration: none; text-transform: uppercase;} .footer-bar a:hover { color: #a62e00;} #disclaimer { margin: 15px 0 0 0;} /* chart */ #chart { background: url(/images/bg-chart-repeat.png) 180px 0 repeat-y; margin: 0 auto; padding: 10px 0; width: 960px; } #products {} #products li.product-main { background: url(/images/bg-product-bar.png) no-repeat; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: block; height: 94px; margin: 0 0 10px 0;} #products li.product-main:last-child { margin: 0;} .rank { float: left; height: 53px; padding: 10px 3px; width: 39px; } .rank .box-1 { font-size: 8px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; text-transform: uppercase;} .rank .box-2 { background: #ffe400; font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; height: 22px; margin: 5px 0 0 0; padding: 3px 0; text-align: center; } .rank .box-2 span.hash { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: normal;} .rate { background: url(/images/bg-rate-repeat.png) repeat; float: left; height: 83px; width: 135px;} .rate .box-price { border: 1px solid #ffffff; box-shadow: -3px 3px rgba(0,0,0,0.2); display: block; height: 43px; margin: 10px 0 0 11px; position: relative; text-shadow: 2px 2px #d9d9d9; width: 123px; } .rate .box-price .price { color: #c13600; display: block; font-size: 38px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.1; margin: 0 63px 0 0; text-align: right; -webkit-text-stroke: 1px #a62e00; /* stroke color and weight */ } .rate .box-price sup { font-size: 18px; margin: 0 0 0 3px; position: absolute; letter-spacing: 2px; top: 6px;} .rate .box-price sup.decimal span.cent { font-family: Arial, Helvetica, sans-serif; font-weight: normal; margin: -2px 0 0 0; position: absolute;} .rate .box-price span.dollar { font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; margin: 10px 0 0 -15px; position: absolute;} .rate .box-price .measurement { font-size: 8px; left: 62px; position: absolute; text-align: left; text-transform: uppercase; top:27px; width: 45px; } .rate li.product-type { font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 5px 0 0 0; *margin-top: 0 !important; text-align: center; text-shadow: 1px 1px #ffffff; text-transform: uppercase; width: 135px; } .product-bar-wrapper { position: relative; } .product-bar { background: #ffffff; border: 1px solid #898a8a; box-shadow: -3px 3px rgba(0,0,0,0.2); height: 54px; float: left; margin: 8px 0 0 -20px; padding: 5px; } /* show tag if product is off peak */ .product-bar .off-peak { left: -1px; position: absolute; top: -1px; z-index: 1000; } /* product bar term widths */ .term-month .product-bar { width: 353px;} .term-3-month .product-bar { width: 406px;} .term-6-month .product-bar { width: 458px;} .term-9-month .product-bar { width: 511px;} .term-10-month .product-bar { width: 525px;} .term-12-month .product-bar { width: 484px;} .term-15-month .product-bar { width: 500px;} .term-18-month .product-bar { width: 538px; } .term-24-month .product-bar { width: 563px;} .term-36-month-plus .product-bar { width: 615px;} .product-bar .inside { background: url(/images/bg-product-bar-inner-repeat.png) repeat-x; height: 54px; width: 100%; position: relative; } /* provider and offer */ .product-bar .inside .provider-offer { display: table; height: 54px; left: 22px; position: absolute; width: 157px; } .provider-offer .provider { color: #c13600; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: 1px 1px #ffffff;} .provider-offer .offer { font-size: 10px; text-transform: uppercase;} /* more button */ .product-bar .inside .button { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; box-shadow: 3px 3px #d9d9d9; color: #ffffff; cursor: pointer; font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px 7px; position: absolute; left: 188px; text-decoration: none; text-shadow: 0px -1px #000000; text-transform: uppercase; top: 15px;} .product-bar .inside .button:hover { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; text-shadow: 0 -1px #501600;} .product-bar .inside .button-active { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00 !important; border: 1px solid #a62e00; text-shadow: 0 -1px #501600;} /* term flag */ .flag-term { background: url(/images/flag-term.png) no-repeat; color: #ffffff; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; height: 20px; letter-spacing: 1px; padding: 6px 10px 0 0; position: absolute; right: 5px; text-align: right; text-shadow: 0 -1px #000000; text-transform: uppercase; top: 5px; width: 77px; } /* price info */ .price-info { display: block; color: #c13600; font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; position: absolute; right: 15px; text-transform: uppercase; top: 37px; } .price-info span { font-family: Arial, Helvetica, sans-serif; font-weight: bold;} /* product cta */ .product-cta { display: table; float: right; height: 83px; /*line-height: 1.3;*/ text-align: center; width: 160px; margin-top: -15px;} .product-cta .promo-code {color: #333; display: inline-block; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0; padding: 5px; text-transform: uppercase;} /* competitor style for experiences where we show competitor prices */ .competitors .product-cta .promo-code { background: none; border: none; box-shadow: none; color: #C13600; display: inline-block; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 5px 0; padding: 5px 7px; text-shadow: none; text-transform: uppercase;} .product-cta .phone { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; box-shadow: 3px 3px #d9d9d9; color: #ffffff; display: inline-block; font-size: 10px; font-weight: bold; margin: 0; padding: 5px 9px; text-shadow: 0 -1px #501600; text-transform: uppercase; border-radius: 5px;} .product-cta .phone span { color: #fff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;} /* product details */ .product-details { background: url(/images/bg-expand-repeat.png) repeat; border: 5px solid #ffffff; display: none; font-size: 12px; line-height: 1.5; margin: -10px 0 0 0; position: relative; width: 990px;} .product-details-cta { float: left; padding: 35px 0 0 0; position: relative; text-align: center; width: 196px; } .product-details-cta .promo-code { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; box-shadow: 3px 3px #d9d9d9; color: #ffffff; display: inline-block; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 5px 0; padding: 5px 7px; text-shadow: 0 -1px #501600; text-transform: uppercase;} .expand-arrow { position: relative; z-index: 15; } .bg-expand-arrow { left: 40px; position: absolute; top: 5px; display: none; z-index: 15; margin: 0 !important;} .product-details-cta .phone { display: block; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: normal;} .product-details-cta .phone span { color: #c13600; font-size: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;} .product-details .description { border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; float: left; padding: 20px 20px 60px 20px; width: 395px;} /* competitor style for experiences where we show competitor prices */ .competitors .product-details .description { border-left: none; border-right: none; color: #C13600; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: left; padding: 20px 20px 60px 20px; text-transform: uppercase; width: auto;} .product-details .description ul { margin: 0 0 20px 25px;} .product-details .description ul li { list-style: disc; list-style-position: outside; margin: 0 0 5px 0;} .product-details .description p { font-size: 10px; margin: 0 0 10px 0;} .product-details .features { float: left; padding: 20px; width: 300px;} .product-details .features ul { display: inline-block; margin: 0 0 10px 0;} .product-details .features li { cursor: pointer; float: left; margin: 0 5px 5px 0;} .product-details .terms { background: #e9e9e9; bottom: 0; color: #1a1f1e; font-size: 10px; left: 0; padding: 10px 0; position: absolute; width: 100%;} .product-details .terms ul { margin: 0 0 0 220px;} .product-details .terms li { float: left; margin: 0 15px 0 0; } .product-details .terms li a:hover { text-decoration: none; } /******************************************************************************** COMPARISON VARIABLE EXPERIENCE STYLES ********************************************************************************/ #wrapper-tabs { background: #e8e8e8; border: 1px solid #000000; float: right; margin: -60px 0 0 0; padding: 10px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #wrapper-tabs span { float: left; margin: 6px 10px 0 0;} #zip-utility-container { border-bottom: 1px solid #161b1a; border-top: 1px solid #161b1a; display: block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 10px 0; padding: 15px 0; text-align: center; text-transform: uppercase;} /* Stephen S had to move zip container into the marketplace results section for dual market purposes. Moving the zip change into top bar instead of expanding box to accomodate a better user experience - Jake M.*/ .address-comparison-content { color: #161b1a; display: table; float: left; font-size: 15px; margin: 30px auto 0 auto; padding: 0 0 0 0; width: 960px; position: relative; } .address-comparison-content p { border-right: 1px solid #a5a5a5; float: left; font-size: 18px; margin: 8px 15px 0 0; padding: 5px 15px 5px 0; } .address-comparison-content form { float: right;} .address-comparison-content label { margin: 0 30px 0 0;} .address-comparison-content input { font-size: 15px; padding: 5px;} .address-comparison-content .address-input { height: 20px; width:400px; } .address-comparison-content .zip-input { height: 20px; margin: 5px 0; width: 100px;} .address-comparison-content .submit { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; color: #ffffff; cursor: pointer; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 5px 0; padding: 7px 12px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px #501600;} .address-comparison-content .submit:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0 -1px #000000;} #electric-tab { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; color: #ffffff; cursor: pointer; display: inline-block; float: left; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 10px 0 0; padding: 6px 7px; text-decoration: none; text-shadow: 0px -1px #501600; text-transform: uppercase; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #electric-tab:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0px -1px #000000;} #gas-tab { background: url(/images/bg-button-teal-repeat.png) repeat-x #036d77; border: 1px solid #036d77; color: #ffffff; cursor: pointer; display: inline-block; float: left; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 10px 0 0; padding: 6px 7px; text-decoration: none; text-shadow: 0 -1px #002e32; text-transform: uppercase; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #gas-tab:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0px -1px #000000;} #utility-container { background: url(/images/bg-expand-repeat.png) repeat; border: none; margin: 10px auto 0 auto; padding: 20px 1%; text-align: center; width: 96%; } .address-form-container { font-weight: bold;} #comparison-address-form { margin: 10px 0 0 0;} #comparison-address-form label { margin: 0 15px 0 0;} #comparison-address-form input { font-size: 15px; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #comparison-address-form .address-input { height: 20px; margin: 0 0 10px 0; width:350px;} #comparison-address-form .zip-input { height: 20px; width: 100px;} #comparison-address-form .submit { background: url(/images/bg-button-orange-repeat.png) repeat-x #a62e00; border: 1px solid #a62e00; color: #ffffff; cursor: pointer; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 7px 12px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px #501600;} #comparison-address-form .submit:hover { background: url(/images/bg-button-dark-repeat.png) repeat-x #161b1a; border: 1px solid #1a1f1e; text-shadow: 0 -1px #000000;} /* chart */ .product-type-gas .rate .box-price .price { color: #219da8; display: block; font-size: 38px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.1; margin: 0 63px 0 0; text-align: right; -webkit-text-stroke: 1px #037f8a; /* stroke color and weight */ } /* provider and offer */ .product-type-gas .provider-offer .provider { color: #219da8; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: 1px 1px #ffffff;} /* more button */ .product-type-gas .product-bar .inside .button:hover { background: url(/images/bg-button-teal-repeat.png) repeat-x #036d77; border: 1px solid #036d77; text-shadow: 0 -1px #036d77;} .product-type-gas .product-bar .inside .button-active { background: url(/images/bg-button-teal-repeat.png) repeat-x #036d77 !important; border: 1px solid #036d77; text-shadow: 0 -1px #036d77;} /* product cta */ .product-type-gas .product-cta .promo-code { background: url(/images/bg-button-teal-repeat.png) repeat-x #036d77; border: 1px solid #036d77; box-shadow: 3px 3px #d9d9d9; color: #ffffff; display: inline-block; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 5px 0; padding: 5px 7px; text-shadow: 0 -1px #036d77; text-transform: uppercase;} /* product details */ .product-type-gas .product-details-cta .promo-code { background: url(/images/bg-button-teal-repeat.png) repeat-x #036d77; border: 1px solid #036d77; box-shadow: 3px 3px #d9d9d9; color: #ffffff; display: inline-block; font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 5px 0; padding: 5px 7px; text-shadow: 0 -1px #036d77; text-transform: uppercase;}