/* ----------------------------------------------------------------------------- ##### Copyright Kleenheat ##### www.Kleenheatng.com.au ##### Author: Sumo Group - Perth Digital Agency - www.sumo.com.au ----------------------------------------------------------------------------- Table of Contents --------------------- - Form reset - Form typography - Shared form styles - Inputs - DropDowns - Hinting - Signup Form - Step 1 - address - Step 2 - Products, Voucher - Step 3 - Feeling Green - Step 4 - Billing - Filter Utility - Transfer Form - Link Account - Close Account - Register Account - Make a Payment - Form Summaries - Form Buttons - Progress Bar - Errors - Direct Debit - Update Billing - Modal Form - Retina --------------------- ** Form reset --------------------------------------------------------------------------------- */ legend, fieldset { padding: 0; margin: 0; border: none; } .form-list, .form-list li { margin: 0; padding: 0; list-style: none; display: block; } /* Form typography --------------------------------------------------------------------------------- */ .req { color: #df3c3c; } .input-mand { color: #df3c3c; float: left; margin: 15px 0 0 -23px; font-size: 200%; display: inline-block; } .input-mand.textarea-mand { float: right; margin: 15px 13px 0 -15px } .divide { float: left; margin: 8px 0px; color: #747474; width: 3px; } .fbase .list-heading { color: #024071; font-size: 133.3%; font-family: 'Asap', Arial, Helvetica, sans-serif; line-height: 122%; } .fbase legend, .legend-heading { color: #024071; font-size: 150%; font-size: 141.7%; font-family: 'Asap', Arial, Helvetica, sans-serif; line-height: 128%; } .fbase label, .label-heading { color: #636363; font-size: 108.3%; } .fbase .check-labels, .check-labels { font-size: 100%; } .fbase .side-note { font-size: 91.7%; color: #747474; } .fbase .side-note span { color: #00aeef; font-weight: bold; } .fbase .intro-heading { color: #024071; font-size: 116.7%; line-height: 110%; } .fbase .tabbed-heading { color: #014172; width: 67px; display: inline-block; } .fbase .larg-note { font-size: 116.7%; } .fbase .reg-note { font-size: 100%; } .fbase .sm-note { font-size: 91.7%; } .fbase .xsm-note { font-size: 84.6%; } .form-footer-msg { float: right; margin: 29px 20px 0 0; font-size: 108.3%; } .fbase .ticks { padding: 0; margin: 8px 0 8px; } .fbase .ticks li { color: #636363; width: auto; clear: none; display: list-item; float: none; background: url('/images/standard/common/bullet-sprite.png') 0 4px no-repeat; padding-left: 18px; margin: 0 0 4px; padding-bottom: 0; } .fbase .arrow-list { padding: 0; margin: 8px 0; } .fbase .arrow-list li { color: #636363; font-size: 91.7%; width: auto; clear: none; display: list-item; float: none ;background: url('/images/standard/common/bullet-sprite.png') 0 -81px no-repeat; padding-left: 14px; margin: 0 0 2px; } .add-more:hover { background-position: 0 -891px; color: #20c4f9; } .meter-heading { color: #747474; font-family: 'Asap', Arial, Helvetica, sans-serif; font-weight: bold; } .calendar-date { height: 31px; padding-left: 38px; background: url('/images/standard/common/icon-sprite.png') 0 -200px no-repeat; display: block; float: left; } .info-icon { height: 32px; display: block; background: url('/images/standard/common/icon-sprite.png') 0 -100px no-repeat; padding: 3px 0 0 38px; } .add-more { color: #00aeef; font-size: 116.7%; font-family: 'Asap', Arial, Helvetica, sans-serif; padding: 4px 0 6px 33px; cursor: pointer; background: url('/images/standard/form/form-sprite.png') 0 -856px no-repeat; } .contact-note { font-weight: bold; margin: 5px 0 3px; font-size: 108.3%; } /* This style keeps everything aligned --------------------------------------------------------------------------------- */ .label-heading, .fbase label, .fbase p, .inputs h2, .inputs table { margin:0 0 12px 3px; } /* Shared form styles --------------------------------------------------------------------------------- */ .left-stripe .containment-wrap.fbase { padding-bottom: 0; min-height: 180px; } .left-stripe .containment-wrap.fbase.autoheight { min-height:0; } .fbase .field-wrap { display: block; width: 100%; position: relative; margin-bottom: 29px; } .fbase ol { clear: both; } .fbase ol, .fbase li { margin: 0; padding: 0; list-style: none; } .fbase legend, .fbase .legend-heading { position: absolute; top: 0; left: 0; } .fbase legend { width: 208px; padding-right: 37px; } .fbase .legend { float: left; min-height: 40px; width: 208px; padding-right: 37px; } .fbase .legend-heading { position: relative; } .fbase .inputs { float: left; width: 608px; padding: 1px 0 17px 37px; background: url('/images/standard/common/seperator.png') 40px bottom no-repeat; } .fbase .inputs.last-inputs, .fbase .no-bg .inputs { background: none; } .fbase legend span { width: 208px; display: block; } .fbase legend .req { width: auto; display: inline; } .fbase .top-bg legend { top: 29px; } .fbase .top-bg .inputs { background-position: 40px top; padding-top: 29px; } .fbase label { clear: both; display: block; margin-bottom: 4px; line-height: 123.2%; line-height: 15px; } .fbase input { color: #636363; margin: 0; clear: both; display: block; padding: 9px 12px 9px; font-family: Arial, Helvetica, sans-serif; font-size: 108.3%; line-height: 16px; } .label-promo-invalid { position: relative; color: inherit !important; } .fbase .inner-text-wrap { background: url('/images/standard/form/form-sprite-text.png') 0 0 no-repeat; display: block; float: left; padding: 9px 5px 4px 12px; } .fbase input.text { background-color: transparent; border: none; width: 168px; float: none; height: 16px; font-size: 13px; padding: 0 0 5px; } .text-wrap { background: url('/images/standard/form/form-sprite-text.png') right -34px no-repeat; display: block; padding: 0 7px 0 0; float: left; } .text-wrap input { float: left; } /* Inactive, watermarked & disabled styles */ .fbase .watermarked { color: #b1b1b1; } .fbase .inactive label { color: #c1c1c1; } .fbase .inactive .req { color: #c1c1c1; } .fbase .inactive .text-wrap, .fbase .inactive .text-wrap.focused { background-position: right -102px; } .fbase .inactive .focused .inner-text-wrap { background-position: 0 -68px; } .fbase .inactive input { color: #c1c1c1; } /* Focused fields */ .fbase .text-wrap.focused, .fbase .inl .text-wrap.focused, .fbase .inl.success .text-wrap.focused { background-position: right -170px; } .fbase .focused .inner-text-wrap { background-position: 0 -136px; } /* Radio buttons */ .fbase .inpradio label { clear: none; float: left; width: 100px; cursor: pointer; margin-top: 2px; } .fbase .inpradio.full label { width: 540px; } .fbase .inpradio input { clear: none; padding: 0; border: none; float: left; opacity: 0; width: 27px; height: 24px; cursor: pointer; } .no-js .fbase .inpradio input { opacity: 1; } .fbase .inpradio { background: url('/images/standard/form/form-sprite.png') left -586px no-repeat; display: block; cursor: pointer; } .fbase .inpradio.checked, .fbase .inpradio.checked.error { background-position: left -620px; } .fbase .inpradio label.longer-lbl { width: 160px; } /* Radio buttons - alt version, div float left replacing li bg style */ .fbase .float-inpradio { left: 282px; background: url('/images/standard/form/form-sprite.png') left -586px no-repeat; height: 24px; width: 24px; float: left; position: absolute; } .fbase .inpradio.checked .float-inpradio, .fbase .inpradio.checked.error .float-inpradio { background-position: left -620px; } .fbase .inpradio.no-bg input { position: relative; z-index: 10; } /* Checkboxes */ .fbase .inpcheck label { clear: none; float: left; width: 90%; margin: 2px 0 0 5px; cursor: pointer; } .fbase .inpcheck input { clear: none; padding: 0; border: none; float: left; opacity: 0; width: 24px; height: 24px; cursor: pointer; } .fbase .inpcheck .check-wrap { background: url('/images/standard/form/form-sprite.png') left -687px no-repeat; display: block; cursor: pointer; width: 24px; height: 24px; float: left; } .fbase .inpcheck .check-wrap.checked, .fbase .error.inpcheck .check-wrap.checked { background-position: left -721px; } /* Textarea */ .fbase textarea { padding-right: 10px; border: 1px solid #fff; line-height: 140%; width: 418px; resize: none; height: 110px; display: block; font-family: Arial, Helvetica, sans-serif; color: #636363; font-size: 108.3%; } .fbase .tatop { background: url('/images/standard/form/textarea-plain.png') 0 0 no-repeat; height: 7px; } .fbase .tawrap { background: url('/images/standard/form/textarea-plain.png') -451px 0 repeat-y; padding: 3px 19px 2px 12px;} .fbase .tabtm { background: url('/images/standard/form/textarea-plain.png') -902px 0 no-repeat; height: 7px; } .fbase .focused .tatop { background: url('/images/standard/form/textarea-focus.png') 0 0 no-repeat; height: 7px; } .fbase .focused .tawrap { border: none; background: url('/images/standard/form/textarea-focus.png') -451px 0 repeat-y; display: block; } .fbase .focused .tabtm { background: url('/images/standard/form/textarea-focus.png') -902px 0 no-repeat; height: 7px; } .fbase .error .tatop { background: url('/images/standard/form/textarea-red.png') 0 0 no-repeat; height: 7px; } .fbase .error .tawrap { border: none; background: url('/images/standard/form/textarea-red.png') -451px 0 repeat-y; display: block; } .fbase .error .tabtm { background: url('/images/standard/form/textarea-red.png') -902px 0 no-repeat; height: 7px; } /* Form Note */ .fbase .form-note { margin:0 0 14px 0; font-size:11px; } /* Widths */ .fbase li { float: left; width: 200px; padding-bottom: 9px; margin-bottom: 0; } .fbase li.pre-input-text { padding-bottom: 3px; } .fbase li.last { width: 186px; } .fbase li.lastlong { width: 190px; } .fbase li.fourths { width: 152px; } .fbase li.fourths input.text { width: 118px; } .fbase li.fifths { width: 100px; } .fbase li.fifths label { width: 50px; } .fbase li.half { width: 304px; } .fbase li.half input { width: 272px; } .fbase li.threefourths { width: 456px; } .fbase li.threefourths input.text { width: 422px;} .fbase li.threefourths .inner-text-wrap { background: url('/images/standard/form/address-sprite.png') 0 0 no-repeat; } .fbase li.threefourths .text-wrap.focused .inner-text-wrap { background-position: 0 -34px; } .fbase li ol.float-sm-radio li { float: left; width: 83px; margin: 10px 0 0; padding-bottom: 5px; } .fbase li ol.float-sm-radio li input { width: 27px; } .fbase li ol.float-sm-radio li label { width: 40px; } .fbase li.fourths.cctxt label { width: 150px; } .fbase li.fourths.cctxt { width: 75px; } .fbase li.fourths.cctxt input.text { width: 47px; } .fbase li.fourths.cctxt.error input.text { width: 30px; } .fbase li.fourths.cctxt.last { margin-right: 180px; } .fbase li.form-seperator { height: 0; padding: 0 0 25px; margin: 0 0 22px; width: 604px; margin-left: 3px; background: url('/images/standard/common/seperator.png') 0px bottom no-repeat; } .fbase .no-label { margin-top: 19px; } .fbase li.full { width: 100%; display: block; clear: both; } .fbase li.nopadding { padding:0; } .fbase li.twothirds { width: 400px; } .fbase li.twothirds .inner-text-wrap { background: url('/images/standard/form/address-sprite.png') 0 0 no-repeat; } .fbase li.twothirds input.text { width: 374px; } .fbase li.twothirds.error input.text { width: 359px; } .fbase li.twothirds .text-wrap.focused .inner-text-wrap { background-position: 0 -34px; } .fbase li.twothirds.inputthird input.text { width: 162px; } .fbase li.twothirds.inputthird.inactive .inner-text-wrap { background: url('/images/standard/form/form-sprite-text.png') 0 0 no-repeat; background-position: 0 -68px; } /* Input small e.g. bsb */ .fbase .inps input, .fbase li.fourths.inps input, .fbase li.error.inps li input.text { width: 68px; float: left; clear: none; } .fbase .inps .text-wrap { margin-left: 0px; } .fbase .inps .divide { text-align: center; width: 8px; } /* Input x-small e.g. cc exp date */ .inpxs input, .fbase li.fourths.inpxs input, .fbase li.error.inpxs li input.text { width: 42px; width: 45px; float: left; clear: none; margin-right: 0px; } .fbase .inpxs .text-wrap { margin-left: 0px; } /* Input xx-small e.g. */ .fbase label { clear: none; } .fbase .inpxxs input, .fbase .inpxxs.error input { width: 37px; float: left; clear: none; } .fbase .inpxxs .inner-text-wrap { padding-right: 2px; } .fbase .inpxxs .text-wrap { margin-left: 0px; } .fbase li.inpxxs li.-year input.text { width: 55px; } /* Input long e.g. Address */ .fbase .inl .text-wrap { margin-left: 0px; } .fbase .inl .inner-text-wrap { background: url('/images/standard/form/address-sprite.png') 0 0 no-repeat; width: 580px; } .fbase .inl input { width: 452px; float: left; clear: none; } .fbase .inl .text-wrap.focused .inner-text-wrap { background-position: 0 -34px; } .fbase .inl.success .text-wrap { background-position: right -340px; } .fbase .inl.success .inner-text-wrap { background-position: 0 -68px; } .fbase .inl.inactive .inner-text-wrap { background-position: 0 -204px; } .fbase .inl.inactive .focused .inner-text-wrap { background-position: 0 -204px; } .fbase .inl.inactive .text-wrap.focused { background-position: right -102px; } /* Signup Step 1 Full Width Address */ .fbase #field-property-address .inl input { width: 578px; } .cal .text-wrap { position: relative; } .cal .text-wrap input.text { width: 263px; } .cal .text-wrap .inp-btn { background: url('/images/standard/form/form-sprite.png') -3px -929px no-repeat; width: 18px; height: 19px; display: block; clear: both; position: absolute; right: 8px; top: 8px; cursor: pointer; } .cal .text-wrap .inp-btn:hover { background-position: -26px -929px; } .fbase .cal.error .text-wrap input.text { width: 266px; } .fbase .price input.text { padding-left: 25px; width: 247px; } .fbase .price .inner-text-wrap { background-position: 0 -612px; } .fbase .price .focused .inner-text-wrap { background-position: 0 -646px; } .fbase .price.error .inner-text-wrap { background-position: 0 -680px; } .fbase .signup-price.price input.text { padding-left: 25px; width: 143px; } .fbase .price.error .text-wrap { background-position: right -238px; } .fbase .price.error .inner-text-wrap { background-position: 0 -680px; } .fbase .price.error .inner-text-wrap input { width: 230px !important; } .fbase #field-online-payment-amount .price input.text { width: 93px; } .fbase #field-online-payment-amount .price.error .inner-text-wrap input { width: 78px !important; } /* mirn link */ .fbase .mirn-form-link { float: left; margin: 10px 0 0 10px; } /* Capture --------------------------------------------------------------------------------- */ .fcapture .g-recaptcha { margin-left: 0; } /* Select Dropdown --------------------------------------------------------------------------------- */ /* Custom Drop Menu */ .stomp-wrap { background: #fff; cursor: pointer; color: #5e5e5e; position: relative; } .text-dd { margin: 0 35px 0 0; white-space: nowrap; overflow: hidden; } .stomp-wrap ul { display: none; top: 22px; right: 0; left :0; margin: 0; padding: 0; list-style: none; } .stomp-wrap li { display: block; cursor:pointer; color: #333; } .stomp-wrap li.group { font-weight: bold; padding-left: 8px; cursor: default; color: #ccc; } .sStompList { overflow: auto; max-height: 300px; position: absolute; z-index: 100; } .isOpen { position: relative; z-index: 100; } #field-property { z-index: 99; position: relative; } #field-property legend { padding-top:14px; } #field-property .ownership-type { padding-top: 15px; } #field-property .ownership-type label { display:none; } .stomp-wrap { width: 182px; background: url('/images/standard/form/form-sprite-text.png') 0 -373px no-repeat; padding:5px 5px 5px; margin-top: 4px; } .stomp-wrap:focus { background-position: 0 -408px; } .isOpen { background-position: 0 -476px; color: #00aeef; } .sStompList { width: 186px; } .text-dd-wrap { position: relative; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; text-shadow: 0 1px #fff; -moz-text-shadow: 0 1px #fff; -webkit-text-shadow: 0 1px #fff; -o-text-shadow: 0 1px #fff; -ms-text-shadow: 0 1px #fff; } .text-dd { padding: 0 8px; height: 24px; line-height: 24px; } .stomp-wrap ul { top: 32px; left: 3px; } .stomp-wrap li { color: #636363; font-size: 11px; padding: 7px 8px 6px 21px; border-top: 1px solid #dddddd; margin: 0; background: url('/images/standard/form/form-sprite-text.png') -3px -527px no-repeat transparent; width: 157px; } .stomp-wrap li:first-child, .stomp-wrap li.first { border: none; background: url('/images/standard/form/form-sprite-text.png') -3px -508px no-repeat transparent; } .stomp-wrap li:last-child { border: none; border-top: 1px solid #dddddd; background: url('/images/standard/form/form-sprite-text.png') -3px -548px no-repeat transparent; width: 157px; } .fbase .stomp-wrap li.last, .stomp-wrap li.last { border: none; border-top: 1px solid #dddddd; background: url('/images/standard/form/form-sprite-text.png') -3px -548px no-repeat transparent; width: 157px; } .stomp-wrap li.active, .stomp-wrap li:hover { color: #00aeef; } .stomp-wrap li.disabled { color: #999; } .stomp-wrap li.disabled:hover { color: #999; } .inactive .stomp-wrap { background-position: 0px -578px; color: #C1C1C1; } /* Smaller Drop Down */ .small-select .stomp-wrap { background-position: -192px -376px; width: 77px; padding: 3px 5px 2px; } .small-select .stomp-wrap ul { top: 29px; } .small-select .isOpen { background-position: -192px -479px; } .small-select .stomp-wrap li:first-child, .small-select .stomp-wrap li.first { background-position: -195px -508px; width: 52px; } .small-select .stomp-wrap li { background-position: -195px -527px; width: 52px; } .fbase .small-select .stomp-wrap li:last-child { background-position: -195px -548px; width: 52px; } .fbase .small-select .stomp-wrap li.last, .fbase .small-select .stomp-wrap li.last { background-position: -195px -548px; width: 52px; } .small-select .sStompList {width: 98px; } .btm-select.small-select .sStompList { height: 174px; } /* drop down error */ .error .stomp-wrap { background-position: 0 -442px; } .error .small-select .stomp-wrap { background-position: -192px -442px; } /* Hint side popup --------------------------------------------------------------------------------- */ .hint { position: absolute; display: none; width: 212px; height: auto; padding: 40px 33px 0 0; min-height: 52px; } .hint {padding: 0 33px 0 0; height: 90px; top: -8px; background-position: right center; } .hint-align { display: table; height: 100%; width: 212px; } .hint-wrap { width: 212px; vertical-align: middle; display: table-cell; display: none; zoom: 1; } .hint-wrap p { margin: 0; } .hint-row-one { height: 90px; background-position: right -36px; padding-top: 55px; } .hint-row-two { top: 54px; } .hint-row-three { top: 115px; } .hint-row-four { top: 177px; } .hint-row-five { top: 238px; } .error-hint { color: #a70909; } .hint { left: -35px; } .hinting { width: 281px; left: -36px; position: absolute; margin-top: -26px; display:none; } .hinting .hinting-top { background: url('/images/standard/form/hintbox-top.png') 0 0 repeat-x; height: 20px; } .hinting .hinting-mid { background: url('/images/standard/form/hintbox-mid.png') right top no-repeat #f6f6f6; height: auto; padding: 32px 30px 32px 36px; } .hinting .hinting-btm { background: url('/images/standard/form/hintbox-btm.png') 0 0 repeat-x; height: 20px; } #containment .hinting .hinting-mid p.hint-title { font-size: 141.7%; color: #A70909; font-family: 'Asap', Arial, Helvetica, sans-serif; margin-bottom: 4px; } #containment .hinting .hinting-mid p { color: #636363; font-size: 91.7%; } .inner-form-list .hinting { margin-top: -44px; } .hint-promo-invalid { position: absolute; display: block; bottom: -7.1px; right: 0; height: 10px; padding: 0.3em 0.5em 0.35em 0.5em; color: #FFF; background: #db3d31; line-height: 1em; font-size: 0.8em; font-weight: 600; text-transform: uppercase; -webkit-border-top-left-radius: 0.25em; -webkit-border-top-right-radius: 0.25em; -moz-border-radius-topleft: 0.25em; -moz-border-radius-topright: 0.25em; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; z-index: -1; } .user-promo-invalid { color: #db3d31 !important; border-color: #db3d31 !important; background-color: #fff7f7 !important; background-image: none !important; } /*--------------------------------------------------------------------------------- SIGNUP FORM STYLES --------------------------------------------------------------------------------- */ ol#olFilterBy { margin: 0; padding: 0; } ol#olFilterBy li {float: left; margin: 0; padding: 0;} /*--------------------------------------------------------------------------------- SIGNUP FORM STYLES --------------------------------------------------------------------------------- */ /* Page 0 - springboard --------------------------------------------------------------------------------- */ #signup-dashboard.signup-springboard { height: 77px; padding-top: 16px; } #signup-dashboard.signup-springboard .intro { width: 100%; } .signup-listing { width: 100%; margin: 0; padding: 0; } .signup-listing li { display: block; float: none; border-bottom: 1px solid #e0e0e0; margin: 0 2px; padding: 28px 40px 0 140px; clear: both; min-height: 94px; } .signup-listing li.last { border: none; } .signup-listing h2 { color: #245984; font-size: 183.3%; line-height: 100%; margin-bottom: 6px; font-family: 'Asap', Arial, Helvetica, sans-serif; } .signup-listing h2 span { font-family: 'Asap', Arial, Helvetica, sans-serif; } .signup-listing p { color: #00aeef; font-size: 116.7%; line-height: 130%; font-family: 'Asap', Arial, Helvetica, sans-serif; } .signup-listing .single-line h2 { padding-top: 10px; } /* Springboard Icons */ .signup-listing .su-icon { width: 115px; margin-right: 65px; float: left; height: 85px; background: url('/images/standard/common/signup-splash-icons.gif') -1000px -1000px no-repeat; } #su-recent-invoice .su-icon { background-position: 0 0; margin-top: -8px; padding-bottom: 7px; } #su-payment-details .su-icon { background-position: 0 -100px; } #su-contact-details .su-icon { background-position: 0 -200px; } #su-renting .su-icon { background-position: 0 -300px; } .signup-springboard-btm { height: 76px; background: url('/images/standard/common/containment-bar.png') 0 0 no-repeat; } #su-recent-invoice h2 { margin-top: 9px; } #su-payment-details h2 { margin-top: 23px; } /* Page 1 --------------------------------------------------------------------------------- */ #liCustomerTypeHeading { padding-bottom: 12px; } #liCustomerTypeRes { width: 119px; } #liCustomerTypeRes label { width: 80px; } .promoBanner { position: relative; left: 245px; background: url('/images/standard/common/seperator.png') 40px bottom no-repeat; padding: 0 0 15px; margin: 0 0 25px; } .promoBanner p { background: url('/images/standard/common/addr-component-icons.png') no-repeat left center; line-height: 200%; padding-left: 35px; width: 300px; display: block; color: #00af19; font-size: 16px; margin-left: 40px; font-family: 'Asap', Arial, Helvetica, sans-serif; } .promoBannerFailed { position: relative; left: 245px; background: url('/images/standard/common/seperator.png') 40px bottom no-repeat; padding: 0 0 15px; margin: 0 0 25px; } .promoBannerFailed p { background: url('/images/standard/common/addr-component-icons.png') no-repeat -700px center; line-height: 200%; padding-left: 35px; width: 300px; display: block; color: #af3b08; font-size: 16px; margin-left: 40px; font-family: 'Asap', Arial, Helvetica, sans-serif; } /* Address with Sky -------------------------------- */ .reg01 .containment-wrap { padding: 0 0 33px; } .reg01 .hinting { left: -28px; } .reg01 .hinting .hinting-mid { padding-left: 25px; } #sky-wrap { margin: -3px 0 0; min-height: 155px; padding: 35px 30px 0; background: url('/images/standard/common/signup-sky-bg.jpg') no-repeat 283px 0; } #address-home-icon { display: block; width: 207px; height: 158px; margin: -8px 0 25px 300px; background: url('/images/standard/common/address-home-icon.png') no-repeat 0 0; } #olSwitchOrMove li { padding-bottom: 6px; } #olSwitchOrMove li.checked { font-weight: bold; } #olSwitchOrMove .full.inpradio label { width: 561px; } .business-signup { padding: 12px 0 0 6px; /*background: url('/images/standard/common/signup-business-icon.png') no-repeat 2px 10px;*/ font-weight: bold; } .business-signup a { padding-top: 1px; } .address-hint { clear: left; margin: 0; padding: 5px 0 0; color: #a1a1a1; } .searching-for-addr { display:none; text-align: center; width: 270px; padding: 177px 181px 177px 461px; font-weight: bold; color: #5a7f9d; } .searching-for-addr img { display: inline; } .searching-for-addr p { margin: 10px 0 0; } .confirmed-address { font-size: 125%; margin: 0 0 10px; } /* Confirm Address Component */ .comp-confirm { padding: 0 0 2px 38px; margin: 0 0 25px; background: url('/images/standard/common/addr-component-icons.png') no-repeat left center; } .comp-confirm.last-comp { margin: 0 0 15px; } .comp-confirm h3 { margin: 0 0 3px; font: 125%/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } .comp-confirm p { margin: 0; } .comp-confirm div.close-account { margin: 15px 0 10px; font-weight:bold; } .comp-confirm div.close-account p { margin-bottom:10px; } .comp-confirm.confirmed { background-position: 0 0; } .comp-confirm.confirmed h3 { color: #00af19; } .comp-confirm.unconfirmed { background-position: -2111px 0; } .comp-confirm.unconfirmed h3 { color: #ffc300; } .comp-confirm.notavailable { background-position: -700px 0; } .comp-confirm.notavailable h3 { color: #af3b08; } /* Consider LPG */ .consider-lpg { padding: 0 0 0 15px; margin: 0 0 0 -10px; /*background: url('/images/standard/common/consider-lpg.jpg') no-repeat 7px 0;*/ min-height:80px; } .consider-lpg h4 { font-size: 100%; color: #024071; font-weight: bold; } .consider-lpg p { margin: 5px 0 10px; max-width: 70%; } .consider-lpg a { font-weight: bold; } /* Conflicting Address Issues */ .addr-search-issue { display: block; font-size: 125%; margin: -6px 0 4px; padding: 9px 0 6px 38px; background: url(/images/standard/common/addr-component-icons.png) no-repeat -1400px center; } .conflicted-addr { color: #ffae00; background-position: -1400px center; } .addr-not-found { color: #af3b08; background-position: -700px center; } .register-not-found { padding: 6px 0 6px 28px; } .overflow-new-addr { position: relative; width: 598px; } .overflow-new-add-viewport { overflow: auto; overflow-x: hidden; max-height: 207px; } .overflow-new-add-viewport.fit-all-seven { max-height: 100%; overflow:visible; } .select-new-addr { width: 600px; border-top: 2px solid #e0e0e0; padding: 6px 0 0 !important; } .select-new-addr li { border-bottom: 1px solid #e0e0e0; padding: 0; margin: 6px 0 0; } .select-new-addr li:first-child { margin-top: 0; } .select-new-addr li:last-child { border: none; } .select-new-addr li label { margin-bottom: 0; } .select-new-addr li.checked { font-weight: bold; } .fbase li.none-addr { margin: 20px 0 0; padding-bottom: 0; } .fbase li.none-addr label { font-weight: bold; color: #024071; } .none-addr-instruct { clear: left; margin: 0 0 0 30px !important; font-size: 90%; position: relative; top: -6px; } .none-addr-instruct.check-instruct { margin: 0 0 10px 30px !important; } .overscroll { display: none; position: absolute; left: 0; width: 598px; height: 6px; background: url(/images/standard/common/overscroll-shadow.png) no-repeat 0 0; } .overscroll.overtop { top: 0; background-position: 0 -6px; } .overscroll.overbtm { bottom: 0; background-position: 0 0; } .overheight .overscroll.overbtm { display: block; } .addr-hints { padding: 2px 0 0 44px; margin: 20px 3px; color: #a1a1a1; font-size: 108%; background: url(/images/standard/common/hint-info-icon.png) no-repeat 0 0; } .addr-hints h3 { margin: 0; font-size: 100%; color: #a1a1a1; font-weight: bold; } .addr-hints ul { margin: 0; padding: 0; list-style: none; } .addr-hints li { float: none; width: auto; padding: 3px 10px 0 16px; margin: 7px 0 0 1px; } /* Address Search Unavailable */ .address-service-unavailable .addr-not-found { color: #00aeef; font: 125%/normal 'Asap', Arial, Helvetica, sans-serif; background-position: -2800px 10px; } /* If Business ----------------- */ #field-business-size { height: auto; } #field-business-size #olBusinessType, #field-business-size legend { opacity: 0; } #olCustomerType { display: block; } #olBusinessType { margin-bottom:15px; } #field-business-size li { padding-bottom: 10px; } #olBusinessType label { width: 210px; margin-bottom: 0; } #olBusinessType input { float: left; width: 25px; } #olLargeBus { border-top: 1px solid #e0e0e0; padding-top: 15px; height: 261px; } #olLargeBus .full { margin: 0; padding: 0; float: none; } #olLargeBus p { font-size: 102.3%; margin-bottom: 20px; } #olLargeBus .busphone { margin: 15px 0 20px; display: block; background: url('/images/standard/common/icon-phone.png') 0 0 no-repeat; width: 300px; height: 21px; padding-left: 33px; padding-top: 5px; font-size: 150%; } /* Address ----------------- */ #liSelectAddress, #liSelectAddressTwo { position: relative; } #addressHeading { border-bottom: 2px solid #e0e0e0; margin-bottom: 5px; padding-bottom: 0; } #addressHeading p { margin: 4px 0 7px; } #olCorrectAddress { padding: 10px 0 0; margin-left: 3px; width: 598px; } #olCorrectAddress heading {color: #014172; } #olCorrectAddress ol li { border-bottom: 1px solid #e0e0e0; margin-bottom: 6px; padding-bottom: 0; } #olCorrectAddress ol li label { margin-left: 6px; color: #636363; } #olCorrectAddress ol li.checked label { font-weight: bold; } #olCorrectAddress .side-note { margin: 0; line-height: 109.2%; } #olCorrectAddress li ol li.inpradio { background-position: -2px -586px; } #olCorrectAddress li ol li.inpradio.checked { background-position: -2px -620px; } #olCorrectAddress li ol li.toomanyresults { color:#a1a1a1; padding:0 0 7px 30px; } #liCorrectAddressList { padding-bottom: 7px; } #olAddressNotFound { padding: 11px 0 0 3px; } #olAddressNotFound ol { margin: 13px 0 0; background: url('/images/standard/common/icon-sprite.png') 0 -700px no-repeat; min-height: 90px; padding: 0 0 0 44px; } #olAddressNotFound ol li { line-height: 130%; width: auto; border: none; background: url('/images/standard/common/bullet-sprite.png') 0 -337px no-repeat; padding: 0 0 0 15px; padding-bottom: 7px; font-size: 108.3%; color: #a1a1a1; } #olAddressNotFound ol li.no-bullet { background: none; padding-left: 0; } #olAddressNotFound ol li p { margin: 0; font-size: 92.3%; } #liolAddressNotFoundPoints { padding-bottom: 6px; } .success p { margin-top: 3px; display: block; clear: both; float: left;} #field-connect-adddress .loader { position: absolute; top: 9px; right: 70px; } #liAddressInputlbl { padding-bottom: 0; } #field-connect-adddress #pAddressOk { float: left; width: 400px; } #field-connect-adddress #pSearchAgain { float: right; width: 100px; text-align: right; padding-right: 8px; font-weight: bold; } #field-connect-adddress #pSearchAgain a { color: #747474; padding-left: 8px; } #field-connect-adddress #pSearchAgain a:hover { color: #979797; } /* Page 2 Products Select --------------------------------------------------------------------------------- */ #pProductsHeading { line-height: 125%; } #list-products { margin: 0; padding: 0; background: #bedbea; } #list-products li.li-product { margin: 0 0 15px; float: left; width: 299px; padding: 0; font-weight: bold; position: relative; } #list-products li .prod-wrap { padding: 0 0 18px; } #list-products li label { display: block; margin: 0; color: #024071; cursor: pointer; font-size: 12px; } #list-products li .title { display: block; padding: 21px 0 2px 20px; font: 23px/normal 'Asap', Arial, Helvetica, sans-serif; } #list-products li .desc { display: block; padding: 0 0 0 20px; font-size: 11px; color: #40779d; } #list-products li .prod-feat { padding: 16px 10px 15px 20px; display: block; border: 1px solid #c7e1ee; border-width: 1px 0 0; } #list-products li .prod-title-block { display: block; min-height: 65px; } #list-products li .plan-notice { display: block; clear: both; font-size: 86%; } #list-products li .feat-percent { border-top-width: 2px; height: 30px; } #list-products li .feat-directdebit { border-width: 1px 0 0; } #list-products li input[type=radio] { position: absolute; top: 0; left: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #list-products li .feat-billing { border-bottom-width: 1px; } #list-products li .feat-kbob { border-top: 1px; border-bottom-width: 2px; height: 15px; } #list-products .prod-col-1 .prod-feat { border-color: #c7e1ee; } #list-products .prod-col-2 .prod-feat, #list-products .prod-col-3 .prod-feat { border-color: #e7f1f7; } #list-products .prod-col-1 { background: #a2cde2 url('/images/standard/common/product-wrap-col-1-t.jpg') no-repeat 0 0; } #list-products .prod-col-1 .prod-wrap { background: url('/images/standard/common/product-wrap-col-1-b.jpg') no-repeat bottom left; } #list-products .prod-col-2, #list-products .prod-col-3 { background: #d9eaf2 url('/images/standard/common/product-wrap-col-3-t.jpg') no-repeat top right; } #list-products .prod-col-2 .prod-wrap, #list-products .prod-col-3 .prod-wrap { background: url('/images/standard/common/product-wrap-col-3-b.jpg') no-repeat bottom right; } #list-products .prod-col-1 label { color: #024071; } #list-products .prod-col-1 .prod-feat, #list-products .prod-col-2 .prod-feat, #list-products .prod-col-3 .prod-feat { padding-left: 46px; background: url('/images/standard/common/prod-feat-icons.png') no-repeat left center; } #list-products .prod-col-1 .feat-percent, #list-products .prod-col-2 .feat-percent, #list-products .prod-col-3 .feat-percent { background-position: -1195px 20px; } /*#list-products .prod-col-3 .feat-percent { line-height: 230%; }*/ #list-products .prod-col-1 .feat-period, #list-products .prod-col-2 .feat-period, #list-products .prod-col-3 .feat-period { background-position: 11px 20px; } #list-products .prod-col-1 .feat-billing, #list-products .prod-col-2 .feat-billing, #list-products .prod-col-3 .feat-billing { background-position: -288px center; padding-right: 0; } #list-products .prod-col-1 .feat-paperless, #list-products .prod-col-2 .feat-paperless, #list-products .prod-col-3 .feat-paperless { background-position: -591px center; } #list-products .prod-col-1 .feat-directdebit, #list-products .prod-col-2 .feat-directdebit, #list-products .prod-col-3 .feat-directdebit { background-position: -892px center; } #list-products .prod-col-1 .feat-kbob, #list-products .prod-col-2 .feat-kbob, #list-products .prod-col-3 .feat-kbob { background-position: -1495px center; } #list-products .prod-col-1 .feat-percent, #list-products .prod-col-2 .feat-percent, #list-products .prod-col-3 .feat-percent { font-size: 116.7%; } #list-products .prod-col-1 .feat-percent .plan-notice, #list-products .prod-col-2 .feat-percent .plan-notice, #list-products .prod-col-3 .feat-percent .plan-notice { font-size: 71.4%; } /*#list-products .prod-col-3 .prod-feat.feat-directdebit { height: 45px; padding: 16px 10px 0 20px; line-height: 100%; }*/ #list-products .prod-btn { display: block; margin: 19px 0 13px 15px; height: 39px; font: 100%/38px 'Asap', Arial, Helvetica, sans-serif; background: url('/images/standard/common/prod-select-cta-expandable.png') no-repeat right -50px; text-align: center; color: #fff; padding-right: 10px; width: 223px } #list-products .prod-btn span.prod-btn-in { background: url('/images/standard/common/prod-select-cta-expandable.png') no-repeat 0 0; display: block; padding: 0 10px 0 20px; } #list-products .prod-btn strong { font-weight: normal; padding: 0 18px 0 0; background: url('/images/standard/common/prod-selected-tick.png') no-repeat right 1px; } #list-products li label:hover .prod-btn { background-position: right -150px; } #list-products li label:hover .prod-btn span.prod-btn-in { background-position: 0 -100px; } #list-products .prod-yesselect { display: none; background-position: right -250px !important; } #list-products .prod-yesselect span.prod-btn-in { background-position: 0 -200px !important; } #list-products li.selected .prod-noselect { display: none; } #list-products li.selected .prod-yesselect { display: block; } #list-products .prod-terms { display: block; color: #024071; padding: 0 0 0 10px; margin: 0 20px; background: url(/images/standard/common/prod-terms-arrow.png) no-repeat 0 4px; font-size: 11px; font-weight: normal; } #list-products .prod-terms:hover { color: #6b8fab; } #field-contract { margin-bottom: 10px; } #field-contract .error .li-product { border: 1px solid red; } /* Summer Special 2014 - Select Product */ #field-summer-special li { background:url(/images/summer-special/summer-specials-sprite.png) no-repeat; padding:20px 0 10px; margin-bottom: 1.5em; } #field-summer-special li p { padding: 0 0 0 114px; } #field-summer-special li.asthma-donation { background:url(/images/summer-special/asthma.png) no-repeat; background-position:top left; } #field-summer-special li.movie-tickets { background-position: -246px 4px; } #field-summer-special li.gas-credit { background-position: -257px -151px; } #field-summer-special li.gas-credit p { padding-left: 96px; } #field-summer-special li.kmart-voucher { background-position: -248px -296px; } /* Vouchers -------------- */ #field-promo .loader { margin: 8px 0 0 10px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } #field-promo .loader.hidden { display:none; } #field-promo .voucherok, .field-wrap .voucherok { background-position: right -340px; padding-right: 24px; } #field-promo .voucherok .inner-text-wrap, .field-wrap .voucherok .inner-text-wrap { background-position: 0 -306px; padding-right: 3px; } #field-promo .voucherok input, .field-wrap .voucherok input { width: 153px; opacity: 10; color:#6abe23; } #field-promo .voucherok.white, .field-wrap .voucherok.white { background-position: right -34px; padding-right:0; } #field-promo .voucherok.white .inner-text-wrap, .field-wrap .voucherok.white .inner-text-wrap { background-position: 0 0px; } #field-promo .voucherok.white input, .field-wrap .voucherok.white input, .field-wrap .white .userPromo { color:#FFF !important; opacity:0; } #field-promo .vouchererror { background-position: right -272px; padding-right: 24px; } #field-promo .vouchererror .inner-text-wrap { background-position: 0 -204px; padding-right: 3px; } #field-promo .vouchererror input { width: 153px; } .vouch-remove { display: none; } .userPromoBtn .fbtn-out { height: 100%; } .userPromoBtn .fbtn-in { min-width: 50px; height: 100%; text-align: center; } .userPromoBtn .fbtn-in span { /*float: left;*/ text-align:center; } .userPromoBtn .fbtn-in span { /*float: left;*/ } .userPromoBtn.remove { margin-top: 3px; } .userPromoBtn.remove .fbtn-out { background-position: right -822px; margin: 0; } .userPromoBtn.remove .fbtn-in { background-position: 0 -1524px; padding: 7px 5px 9px 30px; height: 12px; text-shadow: none; min-width: 95px; } .userPromoBtn.remove:hover .fbtn-out { background-position: right -882px; } .userPromoBtn.remove:hover .fbtn-in { background-position: 0 -1554px; } #VoucherError { clear:both; display:block; color:Red; } #liPromolbl { padding-bottom: 3px; } .promo-wrap .userPromoBtn .fbtn-in { height: 100%; } .userPromo.white { color:#FFF; } #field-promo .promoFromUrl { position: relative; width:100%; padding: 2em 2em 2em 10em; border: solid 1px #009fe3; background: #eff5f8; box-shadow: inset 0px 1px 0px #FFF,0px 1px 1px rgba(0,0,0,0.10); -webkit-border-radius: 0.45em; -moz-border-radius: 0.45em; border-radius: 0.45em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #636363; margin-bottom:2em; } #field-promo .promoFromUrl .promoImg { position:absolute; top:1.9em; left:1.5em; max-width:6em; height:auto; } #field-promo .promoFromUrl .promoImg.default { top:0.9em; } #field-promo .promoFromUrl h4 { font-size: 1.45em; color: #009fe3; font-weight: 400; padding-bottom: 0.5em; margin-bottom: 0.75em; font-family: 'Asap', Arial, Helvetica, sans-serif; font-weight: bold; border-bottom: solid 1px rgba(0,0,0,0.075); box-shadow: 0px 1px 0px rgba(255,255,255,0.75); } #field-promo .promoFromUrl label { margin-bottom:1em; line-height:1.33em; color:#888; } #field-promo .promoFromUrl.warning { border: solid 1px #D70B0B; background: #ffebeb; } #field-promo .promoFromUrl.warning h4 { color:#D70B0B; } #field-promo .promoFromUrl.warning .voucherok { background-position: right -239px; } #field-promo .promoFromUrl.warning .voucherok .inner-text-wrap { background-position: 0 -205px; } #field-promo .promoFromUrl.warning .voucherok input, #field-promo .promoFromUrl.warning label { color:#D70B0B; } /* Promo Carousel -------------- */ .slider.slick-slider { position:relative; width:100%; height:auto; overflow:hidden; margin-bottom:0; } .slider .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; height:100%; } .slider .slick-list .slick-track { position:relative; height:100%; overflow:hidden; } #rewards { position:relative; } #rewards .reward { display:block; float:left; width:130px; height:auto; background:#f6f6f6; border:solid 1px #e0e0e0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0 8px 8px 8px; -webkit-border-radius:0.45em; -moz-border-radius:0.45em; border-radius:0.45em; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; cursor:pointer; box-shadow:inset 0px 1px 0px #FFF,0px 1px 1px rgba(0,0,0,0.10); } #rewards .reward .inner { position:relative; display:block; width:100%; height:0; padding-bottom:56.25%; } #rewards .reward .inner img { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width:auto; max-width:66%; height:auto; max-height: 48px; } #rewards .reward .inner .confirmed { position:absolute; bottom:-0.5em; right:-0.5em; display:none; width:24px; height:24px; background: url('/images/standard/form/form-sprite.png') left -718px no-repeat; -webkit-transform:scale(0) rotate(0deg); -moz-transform:scale(0) rotate(0deg); transform:scale(0) rotate(0deg); -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } #rewards .reward.slick-center .inner .confirmed { display:block; } #rewards .reward .inner .confirmed.active { display:block; -webkit-transform:scale(1) rotate(360deg); -moz-transform:scale(1) rotate(360deg); transform:scale(1) rotate(360deg); } #rewards .reward.slick-center { border:solid 1px #009fe3; background:#eff5f8; } .slider .shading.left { position: absolute; left: 0; top: 0; width: 12%; height: 100%; z-index: 999; background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .slider .shading.right { position: absolute; right: 0; top: 0; width: 12%; height: 100%; z-index: 999; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } #rewards .shading .arrow { position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); display:block; cursor:pointer; width: 0; height: 0; border-style: solid; } #rewards .shading .arrow.left { border-width: 8px 10px 8px 0; border-color: transparent rgba(0,0,0,0.25) transparent transparent; left:0; } #rewards .shading .arrow.left:hover, #rewards .shading .arrow.left:focus { border-color: transparent #007bff transparent transparent; } #rewards .shading .arrow.right { border-width: 8px 0 8px 10px; border-color: transparent transparent transparent rgba(0,0,0,0.25); right:0; } #rewards .shading .arrow.right:hover, #rewards .shading .arrow.right:focus { border-color: transparent transparent transparent #007bff; } #rewardDetails { margin-top:0; } #rewardDetails:before { position:absolute; content:""; top:0; left:50%; margin-left:-4px; width: 0; height: 0; border-style: solid; border-width: 8px 4px 0 4px; border-color: #007bff transparent transparent transparent; } #rewardDetails .slick-list { min-height:220px; } #rewardDetails .reward { display:block; float:left; height:auto; } #rewardDetails .reward .inner { position:relative; display:block; width:90%; margin:0 5%; border:solid 1px #009fe3; background:#eff5f8; box-shadow:inset 0px 1px 0px #FFF,0px 1px 1px rgba(0,0,0,0.10); margin-top:16px; text-align:left; padding:2em; -webkit-border-radius:0.45em; -moz-border-radius:0.45em; border-radius:0.45em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #rewardDetails .reward .inner h3 { font-size:1.5em; color:#009fe3; font-weight:400; padding-bottom:0.5em; margin-bottom:0.75em; font-family: 'Asap', Arial, Helvetica, sans-serif; font-weight: bold; text-align:center; border-bottom:solid 1px rgba(0,0,0,0.075); box-shadow:0px 1px 0px rgba(255,255,255,0.75); } #rewardDetails .reward .inner p { line-height:1.25em; } #rewardDetails .reward .inner .input { position:relative; margin:0; padding:0 0 2em 0; } #rewardDetails .reward .inner .input.clearfix { display:block; } #rewardDetails .reward .inner #VoucherError { position:absolute; left:0; bottom:0; font-size:1em; } /* Feeling Green ----------------- */ .fbase li.go-green { margin-bottom: 26px; } .fbase li.go-green.go-green-billing { margin-bottom: 0; } .fbase li.go-green label { width: 550px; padding-left: 13px; margin: 0; } .fbase li.go-green.no-check label { padding-left: 0; } .fbase li.go-green label .green-heading, .fbase .go-green-summary { color: #5fae0a; font-size: 116.7%; font-family: 'Asap', Arial, Helvetica, sans-serif; line-height: 122%; display: block; margin-bottom: 2px; } .fbase li.go-green label { font-size: 100%; } .fbase li.go-green .check-wrap { background-position: left -755px; } .fbase li.go-green .check-wrap.checked { background-position: left -789px; } .fbase li.go-green.no-check .check-wrap { display: none; } .fbase .go-green-summary { font-size: 108.3%; background: url('/images/standard/form/green-sprite.png') -614px 0 no-repeat; padding: 2px 0 3px 46px; width: 195px; margin: 0px 0 9px; } #liMarketingTitle h2 { font-size: 108.3%; color: #636363; display: block; margin-bottom: 4px; line-height: 15px; clear: none; } #olMarketingPromo li.inpradio { padding-bottom: 0; } /* Flybuys Box ----------------- */ #promo-flybuys-msg { margin-bottom:5px; } #promo-flybuys-edm-msg { margin-top:15px; } .error #promo-flybuys-msg { color:#a70909; } .flybuys-wrap { margin-top: 0; position:relative; } .flybuys-wrap.flybuys-edm { margin-top: 2px !important; position:relative; } .flybuys-wrap .hinting { left:-318px; } .flybuys-wrap-myaccount { position:relative; } .inactive { opacity: .5 } .flybuys-wrap.transfer-version { margin-top: 0px !important; position:relative; } .flybuys-wrap.transfer-version .flybuys-logo { top:5px; } .flybuys-logo { position:absolute; top:25px; left:199px; width:82px; height:28px; background:url(../images/standard/account/flybuy-logo-small.jpg) no-repeat 0 0; } .flybuys-points { padding-top:10px !important; clear:left; } .field-validation-error { color: #a70909; } .flybuys-display-points { font-weight: bold;font-size: 15px; margin-left: 3px;} .flybuys-notice { margin-top:2em !important; padding:1.5em; border: solid 1px #d0d0d0; color: #888; background:#fafafa; -webkit-border-radius:0.25em; -moz-border-radius:0.25em; border-radius:0.25em; line-height: 1.25em; box-shadow: inset 0px 1px 0px #FFF; } #field-promo .inactive .text-wrap { background-position: right -34px; } /* RAC ----------------- */ #field-RAC .inputs li { width: 100%; } .rac-logo { position:absolute; top:21px; left:199px; width:66px; height:28px; background:url(../images/standard/account/logo-rac.png) no-repeat 0 0; } #field-RAC #RACError { display: block; clear: both; } /* Page 3 Add More Addresses --------------------------------------------------------------------------------- */ #field-billing { margin-bottom: 11px; } #field-billing .inputs { padding-bottom: 0; } #field-billing.agent-field-billing .inputs { padding-bottom: 20px; } #field-email-address { margin:35px 0px; } #field-email-address .full { margin-bottom:10px; } #field-billing-contact { margin-bottom: 0; } #field-billing-contact .inputs { padding-bottom: 0; } #field-billing-contact .legend { min-height: 5px; } #olAddAddress, .c-olAddAddres { padding-top: 0px; } #olAddAddress #liAddAddress, .c-olAddAddres #liAddAddress { padding-bottom: 13px; } #field-additonal-billing { margin-top: 4px; z-index: 20; } #field-diff-address { z-index: 10; } #field-diffaddress-details { margin-bottom: 10px; } #field-diffaddress-details .inputs { padding-bottom: 0; } #field-diff-address .inputs { padding-bottom: 0; } .olAddAddresses li { padding: 15px 0 0; } #summary-existing-account p { font-size: 108.3%; line-height: 130%; } #field-existing-account .list-arrow-lg { margin: 13px 0 0; background: url('/images/standard/common/icon-sprite.png') 0 -700px no-repeat; min-height: 90px; padding: 0 0 0 44px; } #field-existing-account .list-arrow-lg li { padding-bottom: 3px; } #field-existing-account .list-arrow-lg li strong { color: #a1a1a1; font-size: 118.2%; } #field-existing-account .list-arrow-lg li { font-size: 91.7%; } #field-existing-account .blue-arrow-link { font-size: 100%; font-weight: bold; } /* We've met before - prev. registered account */ .btn-cont-login .fbtn-in { width: 40px; } /* Page 4 Billing --------------------------------------------------------------------------------- */ .secureWeb { background: url('/images/standard/form/form-icons.png') -131px 0 no-repeat; width: 117px; height: 53px; position: absolute; top: 1px; right: 7px; } .secureWeb.darker { background-position: -129px -64px; width: 117px; } .cc-mc, .cc-visa, .cc-amex { float: left; margin: 0 4px 10px 0; background: url('/images/standard/form/form-icons.png') 0 0 no-repeat; height: 30px; width: 44px; } .cc-mc { background-position: 0 0; } .cc-visa { background-position: -44px 0; } .cc-amex { background-position: -88px 0; } .cc-fade .cc-mc { background-position: 0 -30px; } .cc-fade .cc-visa { background-position: -44px -30px; } .cc-fade .cc-amex { background-position: -88px -30px; } #olCCList li { float: left; margin-right: 5px; width: 44px; height: 33px; } #olCCList li input { opacity: 0; width: 50px; height: 30px; position: absolute; cursor: pointer; } #olCCList li label { width: 44px; clear: none; cursor: pointer; height: 30px; } #field-payment .inpradio label { width: 120px; } #field-payment-back .form-seperator { margin: 35px auto 0; padding: 25px 0; } #ccsummary { position: relative; } #ccsummary .cc, #ccsummary .bankAccount-icon { float: left; display: block; overflow: hidden; text-indent: -999em; background: url('/images/standard/form/form-cc-large.png') 0 0 no-repeat; width: 127px; height: 84px; } #ccsummary .cc-Visa { background-position: 0 0; } #ccsummary .cc-AmericanExpress { background-position: -127px 0; } #ccsummary .cc-MasterCard { background-position: -254px 0; } #ccsummary .bankAccount-icon { background-position: -381px 0; } .expiry-warning #ccsummary .cc-alert-msg { color: #a70909; font-weight: bold; margin-left: 25px; } .expiry-warning #ccsummary .cc-warning-msg { color: #C15E0C; font-weight: bold; margin-left: 25px; } .expiry-warning #ccsummary .cc-alert { position: absolute; top: 54px; left: 98px; display: block; background: url('/images/standard/form/cc-alert.png') 0 0 no-repeat; width: 47px; height: 32px; } .expiry-warning #ccsummary .cc-warning { position: absolute; top: 54px; left: 98px; display: block; background: url('/images/standard/form/cc-alert.png') 0 0 no-repeat; width: 47px; height: 32px; } #ccsummary #ccdetails { float: left; padding: 6px 0 0 25px; width: 410px; } #ccsummary #ccdetails .cc-title { color: #a1a1a1; width: 140px; float: left; display: block; font-weight: bold; margin-bottom: 5px; } #ccsummary #ccdetails .cc-input { color: #636363; width: 265px; float: left; display: block; margin-bottom: 5px; } #ccsummary #ccdetails a { clear: both; float: left; margin-left: 0; } #liDirectDebitIntro { padding-bottom: 19px; } #pCreditCardAccepted { margin-top: 3px; padding-bottom: 9px; } .error #pCreditCardAccepted { color:#a70909; } #field-payment-day { z-index: 100; position: relative; } #field-payment-day .arrow-grey { margin-top: 5px; } .pay-product-desc { background: url('/images/standard/common/account-landing.jpg') -4px -207px no-repeat; padding: 0 0 0 145px; width: 450px; } .pay-product-desc h2 { line-height: 120%; margin-bottom: 16px; margin-top: -4px; } .pay-product-desc p { font-size: 108.3%; margin-bottom: 15px; } /* Sales Agent Specific --------------------------------------------------------------------------------- */ .sales-agent #field-contract #liProductTerms { margin-bottom:0; padding-bottom:0; } .sales-agent #field-contract { margin-bottom:3em; } /* Signup Thank You --------------------------------------------------------------------------------- */ #su-ty-wrap { color: #5a7f9d; } .su-ty-top { margin: 0 2px 0 0; min-height: 355px; padding: 109px 335px 0 0; } .su-ty-top h1 { margin: 0 0 30px; color: #024071; font: 42px/45px 'Asap', Arial, Helvetica, sans-serif; height: auto; width: auto; } .su-ty-msg { padding: 0 0 0 194px; background: url('/images/standard/common/su-ty-tick.png') no-repeat 62px 0; } ol.su-ty-listing { list-style: decimal; padding-bottom: 50px; } .su-ty-listing li { float: none; display: list-item; list-style: decimal; margin: 10px 0 0 20px; width: auto; } #ty-p1 { background: url('/images/standard/common/su-ty-s1-hero.jpg') no-repeat right 25px; } .ty-p1-msg { width: 350px; } .ty-p1-msg p { margin: 0; font-weight: bold; font-size: 18px; font:18px/normal 'Asap', Arial, Helvetica, sans-serif; } .ty-p1-msg p strong { display: block; font-size: 20px; margin: 0 0 10px; color: #024071; font: 20px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } .su-ty-ss { background: url('/images/standard/form/signup-social-bg.jpg') no-repeat right 24px;} .su-ty-ss { width: 316px; height: 468px; padding: 157px 14px 40px 89px; box-sizing: border-box; position: absolute; top: 0px; right: 2px; } .su-ty-ss h2 { color: #5d7c9b; font-size: 16px; line-height: 20px; font-family: 'Asap', Arial, Helvetica, sans-serif; text-align: center; } .su-ty-ss h2.non-mss { margin:4px 0 22px 0; } .su-ty-ss h3 { color: #5d7c9b; font-size: 15px; line-height: 18px; font-family: 'Asap', Arial, Helvetica, sans-serif; text-align: center; margin-top:10px; } .su-ty-ss a { opacity: 0.8; background: url('/images/standard/form/thankyou-social.png') 0 0 no-repeat; width: 61px; height: 60px; float: left; margin:8px 10px 0 0; transition: opacity ease 0.1s; -webkit-transition: opacity ease 0.1s; -moz-transition: opacity ease 0.1s; -o-transition: opacity ease 0.1s; -ms-transition: opacity ease 0.1s; } #su-ty-ss-google { background-position: -71px 0; } #su-ty-ss-facebook { background-position: -142px 0; margin-right: 0; } .su-ty-ss a:hover { opacity: 1;} #ty-p2 { min-height: 261px; padding: 113px 0 0; background: url('/images/standard/common/su-ty-s2-hero.jpg') no-repeat right 25px; } #ty-p2 h1 { margin: 0 0 20px; width: 510px; } .ty-p2-msg { width: 250px; } #ty-p2 .su-ty-msg { background-position: 62px 12px; } #ty-p2 .su-login { position: absolute; top: 265px; right: 32px; text-align: right; width: 267px; color: #024071; font-size: 14px; font-family: 'Asap', Arial, Helvetica, sans-serif; } #ty-p2 .su-login p { margin: 0 0 8px; } #ty-p2 .su-login strong { font-weight: normal; color: #00aeef; padding: 0 16px 0 0; margin: 0 -4px 0 0; background: url('/images/standard/common/bullet-sprite.png') right -1101px no-repeat; } #ty-p2 .su-login:hover strong { color: #024071; } .su-ty-row-grey { margin: 0 0 0 2px; width: 958px; background: #f5f7f9; } #ty-do-next { padding: 42px 15px; width: 928px; } #ty-do-next h2 { text-align: center; margin: 0 0 30px; font: 24px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } #ty-do-next h3 { margin: 0 0 7px; color: #024071; font: 18px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } #ty-do-next ul { margin: 0; padding: 0; } #ty-do-next li { padding: 80px 0 0 0; float: none; display: inline-block; width: 33%; text-align: center; background: url('/images/standard/common/su-ty-do-next-icons.png') no-repeat top center; } #ty-do-next li .do-next-step { padding: 0 20px; } #ty-do-next li.ns-process { background-position: center top; } #ty-do-next li.ns-welcome { background-position: center -1000px; } #ty-do-next li.ns-meter { background-position: center -2000px; } #su-ty-wrap .ty-post-actions { margin: 20px auto 0; } #su-ty-wrap .ty-post-actions li { float: none; margin: 0 15px; padding: 0; line-height: normal; } #su-ty-wrap .ty-post-actions li a { display: inline-block; } #su-ty-survey { padding: 39px 40px; width: 878px; margin-bottom: -3px; background: #F5F7F9 url('/images/standard/common/su-ty-survey-10s.png') no-repeat 760px 9px; } #su-ty-survey h2 { color: #024071; margin: 0 0 4px; font: 30px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } #su-ty-survey h2 strong { font-weight: normal; color: #00aeef; } #su-ty-survey h2 sup { position: absolute; margin: 0 0 0 3px; color: #a9bccb; font: 16px/normal 'Asap', Arial, Helvetica, sans-serif; } #su-ty-survey h3 { color: #024071; margin: 0 0 7px; font: 20px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } #su-ty-survey .survey-msg { margin: 0 0 30px; color: #5a7f9d; font: 16px/normal 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; } #su-ty-survey fieldset { padding: 22px 0 14px; border: 1px solid #a9bccb; border-width: 2px 0 1px; color: #5a7f9d; } #su-ty-survey fieldset .field-label { float: left; width: 192px; } #su-ty-survey ol { clear: none; margin: 0 0 0 217px; } #su-ty-survey ol>li { float: left; width: 220px; padding: 2px 0 0; } #su-ty-survey ol>li.last { width: 210px; } #su-ty-survey label { display: block; margin: 0 0 7px 3px; font: 16px/normal 'Asap', Arial, Helvetica, sans-serif; color: #5a7f9d; } #su-ty-survey #btn-submit-survey { float: none; margin: 20px 0 0 220px; } #su-ty-survey .disclaimer { margin: 35px 0 -10px; font-size: 90%; color: #a9bccb; } #su-ty-survey .other { display: none; } /* Are you sure? --------------- */ #field-payment-none p { margin-bottom: 15px; } /* Password hinting and validation --------------------------------------------------------------------------------- */ .pass-vali { clear: left; padding: 20px 0 0 3px; } .pass-vali ul { margin: 0; padding: 0; list-style: none; font-size: 11px; color: #636363; } .pass-vali li { float: none; width: auto; margin: 5px 0 0; padding: 0 0 0 21px; background: url('/images/standard/account/password-req-icons.png') no-repeat 0 1px; } .pass-vali li:first-child { margin: 0; } .fbase .pass-vali #info { margin: 0 0 12px; } .pass-vali.error p { color: #a70909; } .pass-vali .pass { background-position: -1000px 1px; color: #159300; } .pass-vali .fail { background-position: -2000px 1px; color: #a70909; } .passwordDesc { margin-bottom: 10px; } /* Filter utility --------------------------------------------------------------------------------- */ #filter-utility { width: 714px; float: right; padding: 0; } .no-js #filter-utility { width: 752px; } #filter-utility legend { position: relative; top: 0; left: 0; text-transform: uppercase; } #filter-utility .heading { line-height: 100%; text-transform: uppercase; color: #636363; font-size: 83.4%; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } #filter-status { padding-bottom: 13px; display: block; width: 100%; } #olfilterSelect .sStompList { max-height: 232px; } #filterRadiosWrap { width: 415px; float: left; } #olfilterRadios li { float: left; margin-right: 16px; width: auto; } #olfilterRadios input { margin-right: 0px;} #olfilterRadios .inpradio label { width: auto; margin: 3px 0 0; font-size: 100%; } #olfilterDate { margin-right: -4px; width: 266px; float: right; float: left; padding: 0 0 0 28px; background: url('/images/standard/account/filter-seperator.gif') 0 1px no-repeat; clear: none; } #olfilterDate li { width: 100%; padding-bottom: 0; } #olfilterDate .heading { padding-bottom: 5px; margin-bottom: 0; } .support-request-container .filter-wrap { float: left; } .support-request-container #olfilterDate { float: left; } .support-request-container #filter-utility .filter-btn { margin-top: 13px; } #olfilterDate .inner-text-wrap { padding: 10px 32px 4px 12px; } #olfilterDate input { width: 76px; color: #888888; font-size: 100%; height: 15px; font-family: Arial, Helvetica, sans-serif; line-height: 15px; } #olFilterBy li { float: left; margin-right: 20px; width: 126px; } #olFilterBy li.seperator { width: 14px; font-size: 83.3%; font-weight: bold; margin: 10px 0 0; text-align: center; padding: 0; } #olFilterBy li.seperator label { margin: 0; } #filter-utility .filter-btn { background: url('/images/standard/account/filter-btns.png') 0 0 no-repeat; display: block; width: 38px; height: 30px; text-indent: -999em; overflow: hidden; border: none; margin: 17px 0 0 8px; } #filter-utility .filter-btn:hover { background-position: -38px 0; } #filter-utility .filter-btn.filter-btn-close { background-position: 0 -31px; } #filter-utility .filter-btn.filter-btn-close:hover { background-position: -38px -31px; } #filter-utility .filter-btn.filter-btn-disabled { background-position: -76px 0; } #filter-utility fieldset, #filter-utility .filter-btn { float: left; } #filter-utility.utility-requests { width: 666px; } #FilterService { float: left; width: 189px; padding-right: 14px; background: url('/images/standard/account/filter-seperator.gif') right 1px no-repeat; } #FilterService label { margin-left: 4px; margin-bottom: 0px; } #FilterService li { width: 193px; } #FilterStatus { float: left; width: 153px; padding-left: 20px;} #FilterStatus li { width: 145px; } #FilterStatus label { margin-bottom: 0px; } #filter-utility.utility-requests #olfilterDate { margin-top: 0; } #filter-utility.utility-requests #olfilterDate label { margin-bottom: 0px; padding-bottom: 2px; } #filter-utility.utility-requests .text-dd { line-height: 25px; color: #7f7f7f; } .filter-wrap { float: right; } /* xsmall Drop Down */ .xsmall-select .stomp-wrap { background: url('/images/standard/form/select-filter.png') -184px 0 no-repeat; width: 116px; margin-top: 2px; } .xsmall-select .isOpen { background: url('/images/standard/form/select-filter.png') -184px -102px no-repeat; } .xsmall-select .stomp-wrap li:first-child, .xsmall-select .stomp-wrap li.first { background: url('/images/standard/form/select-filter.png') -187px -134px no-repeat; } .xsmall-select .stomp-wrap li { background: url('/images/standard/form/select-filter.png') -187px -153px no-repeat; width: 91px!important; } .xsmall-select .stomp-wrap li:last-child { background: url('/images/standard/form/select-filter.png') -187px -174px no-repeat; } .fbase .xsmall-select .stomp-wrap li.last, .xsmall-select .stomp-wrap li.last { background: url('/images/standard/form/select-filter.png') -187px -174px no-repeat; } .xsmall-select .sStompList { width: 120px; } /* med Drop Down */ .med-select .stomp-wrap { background: url('/images/standard/form/select-filter.png') 0 0 no-repeat; width: 173px; padding-bottom: 3px; margin-top: 2px;} .med-select .isOpen { background: url('/images/standard/form/select-filter.png') 0 -102px no-repeat; } .med-select .stomp-wrap li:first-child, .med-select .stomp-wrap li.first { background-position: -3px -134px; } .med-select .stomp-wrap li { background: url('/images/standard/form/select-filter.png') -3px -153px no-repeat; width: 149px!important; } .med-select .stomp-wrap li:last-child {background: url('/images/standard/form/select-filter.png') -3px -174px no-repeat; } .fbase .med-select .stomp-wrap li.last, .med-select .stomp-wrap li.last { background: url('/images/standard/form/select-filter.png') -3px -174px no-repeat; } .med-select .sStompList { width: 178px; overflow-x:hidden; } /* Meter Number / MIRN --------------------------------------------------------------------------------- */ .mtrno-title { margin-bottom: 5px; } .meternumber { width: 371px; } #liMeterNo { padding-bottom: 2px; /*width: 303px;*/ } #liMeterNote { width:270px; padding-top: 19px; margin-left: -103px; } #liMeterNote p { margin: 2px 0 0; } #liMeterNoFull { padding-bottom: 2px; } #liMeterNoFull label { font-size: 100%; line-height: 135%; } #liMeterNoFull p { /*margin:13px 0 0 205px;*/ } #liMeterNoFull .hinting p { margin: 0; margin-left: 3px;} .fbase .meter-heading { margin-left: 8px; font-family: 'Asap', Arial, Helvetica, sans-serif; font-weight: normal; margin-bottom: 5px; color: #747474; } .meternumber ul { float: left; margin: 0; padding: 0; } .meternumber li { list-style: none; float: left; background: url('/images/standard/form/metre-number-bg.png') -9px 0 no-repeat; width: 31px; text-align: center; color: #fff; font-family: "Courier New", Courier, monospace; font-size: 166.7%; padding: 10px 0 14px; margin: 0; } .meternumber li.first { background-position: 0 0; width: 33px; padding: 10px 0px 14px 7px; } .meternumber li.last { background-position: right 0; width: 29px; padding: 10px 9px 14px 0px; } .meternumber li:first-child { background-position: 0 0; width: 33px; padding: 10px 0px 14px 7px; } .meternumber li:last-child { background-position: right 0; width: 29px; padding: 10px 9px 14px 0px; } .meternumber.white-meter li { background-position: center -40px; color: #024071; font-family: 'Asap', Arial, Helvetica, sans-serif; } .meternumber.white-meter li.first { background-position: 0 -40px; } .meternumber.white-meter li.last { background-position: right -40px; } .meternumber.white-meter li:first-child { background-position: 0 -40px; } .meternumber.white-meter li:last-child { background-position: right -40px; } .meternumber.sm-meter li { background-position: -34px -80px; font-size: 141.7%; width: 26px; padding: 6px 0 8px; } .meternumber.sm-meter li.first { background-position: 0 -80px; width: 25px; padding: 6px 1px 8px 8px; } .meternumber.sm-meter li.last { background-position: -60px -80px; padding: 6px 8px 8px 0px; width: 25px;} .meternumber.sm-meter li:first-child { background-position: 0 -80px; width: 25px; padding: 6px 1px 8px 8px; } .meternumber.sm-meter li:last-child { background-position: -60px -80px; padding: 6px 8px 8px 0px; width: 25px;} .meternumber.reg-meter li { background-position: -38px -112px; width: 31px; padding: 7px 0 14px; } .meternumber.reg-meter li.first { background-position: 0 -112px; width: 30px; padding: 7px 0px 14px 8px; } .meternumber.reg-meter li:first-child { background-position: 0 -112px; width: 30px; padding: 7px 0px 14px 8px; } .meternumber.reg-meter li.last { background-position: right -112px; width: 31px; padding: 7px 8px 14px 0px; } .meternumber.reg-meter li:last-child { background-position: right -112px; width: 31px; padding: 7px 8px 14px 0px; } #liMeterNumber { padding-left: 10px; width: 290px; height: 100px; } #summary-details .meter-heading { margin-left: 3px; } #summary-details .meternumber { margin-left: -4px;} #olmeternumbers #liMeterNumber { height: auto; } #olmeternumbers .meter-heading { margin-left: 3px; } #olmeternumbers .meternumber { margin-left: -4px;} /*--------------------------------------------------------------------------------- TRANSFER FORM --------------------------------------------------------------------------------- */ .transfer-house { display: block; background: url('/images/standard/form/form-transfer-sprite.png') 0 0 no-repeat; width: 284px; display: block; padding: 93px 0 0; position: relative; float: left; } .transfer-img { display: block; overflow: hidden; background: url('/images/standard/form/form-transfer-sprite.png') -294px -50px no-repeat; position: absolute; top: 20px; left: 102px; width: 77px; height: 65px; } .transfer-arrow { margin: 50px 7px 0; display: block; background: url('/images/standard/form/form-transfer-sprite.png') -287px 0 no-repeat; width: 24px; height: 24px; display: block; padding: 0; position: relative; float: left; } .transfer-house h3 { color: #a5b8c7; font-size: 116.7%; font-family: 'Asap', Arial, Helvetica, sans-serif; text-align: center; margin-bottom:18px; } .transfer-house p.address { margin-bottom:14px; } #olTransferDate .note-points, #olTransferDateTwo .note-points { clear: both; display: block; margin: 0; padding: 10px 0 0; list-style: disc; } #olTransferDate .note-points li, #olTransferDateTwo .note-points li { clear: both; display: list-item; float: none; color: #a1a1a1; width: 300px; padding: 0; list-style: disc; margin-left: 30px; } #olTransferDate.transfer-note, #olTransferDateTwo.transfer-note { width: 600px; } #olTransferDate.transfer-note .reg-note, #olTransferDateTwo.transfer-note .reg-note { clear: both; } #field-service-transfer { margin-bottom: 57px; } #liLocation p { margin: 2px 0 19px 3px; } #liTransferDate p { margin-top: 7px; clear: both; float: left; } .summary-payment-table.transfer-summary-table tr.first-row th, .summary-payment-table.transfer-summary-table tr.first-row td { padding-top: 4px; } .summary-payment-table.transfer-summary-table .first-row .sum-con.sum-icon-accno { background-position: 1px 2px; } /* Transfer - Contract Verification / "So what is going to happen..." --------------------------------------------------------------------------------- */ .fbase .liMoveContract { padding: 0 0 9px 40px; background: url('/images/standard/form/icons-transfer.png') 3px 0 no-repeat; width: 545px; } .fbase .liMoveContract.last, .fbase .liMoveContract:last-child { width: 545px;} .fbase .liMoveContract p.mc-heading { font-size: 100%; font-weight: bold; margin: 0 0 3px; color: #00af19; } .fbase .liMoveContract p.mc-text { font-size: 100%; margin: 0 0 3px; } .fbase .liMoveContractAlert { background-position: 0 -152px; } .fbase .liMoveContractAlert p.mc-heading { color: #af3b08; } #liMoveContractNone { padding-bottom: 30px; } /* Transfer - Final Bill send to... --------------------------------------------------------------------------------- */ #summary-final-bill p { line-height: 150%; } .fbill-title { font-size: 116.7%; color: #636363; } .fbill-addy { font-size: 100%; color: #333; font-weight: bold; } /* Transfer - Summary Dates --------------------------------------------------------------------------------- */ #summary-date .transfer-arrow { margin: 7px 6px 0 -13px; } /* Transfer Thank You page --------------------------------------------------------------------------------- */ .thankyou-wrap { width: 796px; margin: 0 auto; padding: 65px 0; min-height: 177px; } .tick-heading { padding: 8px 0 12px 75px; font-size: 350%; color: #024071; font-family: 'Asap', Arial, Helvetica, sans-serif; background: url('/images/standard/common/icon-sprite.png') 0 -298px no-repeat; } .thankyou-wrap p { color: #024071; font-size: 133.3%; font-family: 'Asap', Arial, Helvetica, sans-serif; line-height: 125%; margin-bottom: 20px; padding-left: 75px; } #btn-monitor { margin: 20px 0 0 0; } .common-thankyou { padding: 275px 0 0; background: url('/images/standard/account/thankyou-generic-tick.png') no-repeat center 76px; } .common-thankyou.common-no-bg {padding-top: 0; background: none;} .common-thankyou h2 { margin: 0 0 5px; text-align: center; font: 350%/normal 'Asap', Arial, Helvetica, sans-serif; color: #024071; } .common-thankyou p.main-ty-msg { margin: 0; padding: 0 150px; text-align: center; font: 115%/normal 'Asap', Arial, Helvetica, sans-serif; color: #024071; } .common-thankyou p.main-ty-msg-note { margin: 0; padding: 20px 200px 0; text-align: center; font: 110%/normal 'Asap', Arial, Helvetica, sans-serif; color: #636363; } .common-thankyou li { float: none; } .ty-post-actions { margin: 0; padding: 50px 0 70px; list-style: none; text-align: center; } .ty-post-actions li { display: inline-block; margin: 0 20px; width: auto; } .ty-post-actions a { color: #5a7f9d; padding: 8px 0 8px 38px; font-family: 'Asap', Arial, Helvetica, sans-serif; font-size: 108%; background: url(/images/standard/account/thankyou-option-icons.png) no-repeat left center; } .ty-post-actions a:hover { color: #00aeef; } .ty-post-actions .back { background-position: left center; } .ty-post-actions .back-home { background-position: -700px 0; } .ty-post-actions .faqs { background-position: -1400px 0; } .ty-post-actions .email { background-position: -2100px 0; } .ty-next-steps { margin: 40px 40px -10px !important; padding: 0 250px 50px !important; border-bottom: 1px solid #e0e0e0; color: #024071; } .ty-next-steps li { width: auto; padding: 10px 0 9px 33px; background: url('/images/standard/account/thankyou-next-steps.png') no-repeat left center; } .ty-next-steps .incomplete, .ty-next-steps .incomplete a { color: #5a7f9d; } .ty-next-steps .incomplete a:hover { color: #00aeef; } .ty-next-steps .ty-ns-email { background-position: left center; } .ty-next-steps .ty-ns-tick { background-position: -758px center; } .ty-next-steps .ty-ns-dollar { background-position: -1516px center; } .ty-next-steps .ty-ns-contact { background-position: -2273px center; } .btn-thankyou { margin-left: 78px; } /*--------------------------------------------------------------------------------- LINK ACCOUNTS FORM STYLES --------------------------------------------------------------------------------- */ #field-what-were-doing { margin-bottom: 15px; } #liWhatWeDoing p { font-weight: bold; color: #636363; font-size: 116.7%; line-height: 142.9%; margin: 0; } #liLinkAccount p { margin-bottom: 4px; } a.question-icon { color: #00aeef; margin: 10px 5px 0 0; float: right; display: block; color: #00aeef; background: url('/images/standard/common/icon-sprite.png') 0 -400px no-repeat; padding: 2px 0 5px 25px; text-decoration: none; } a.question-icon:hover { color: #10beff; } #my-account-number-name-modal-two { margin:21px 0 0 10px ; padding:0 0 0 25px; background-position:0 -395px; } #linkHideShow { display: none; height: 103px; } #olLinkResidential, #olLinkCommercial { display: none; } #field-link-account #DateOfBirth { width: 193px; } /*--------------------------------------------------------------------------------- Close Account --------------------------------------------------------------------------------- */ #liMoveContractAlertTwo {} #liMoveContractAlertOne {} /*--------------------------------------------------------------------------------- Register Account / Register for an Online Account --------------------------------------------------------------------------------- */ #field-reg-terms li { padding-bottom: 13px; } #field-reg-link #DateOfBirth { width: 196px; } #field-reg-about { position: relative; z-index: 200; } /*--------------------------------------------------------------------------------- Make a payment --------------------------------------------------------------------------------- */ #olPayAccNo .xsm-note { margin-bottom: 5px; display: block; float: left; } /* Form Summary - Summary Table & Payment Table --------------------------------------------------------------------------------- */ .summary-table { width: 90%; border-collapse: collapse; margin: 0px 0 6px 3px; } .summary-table tr.first-row td, .summary-table tr.first-row th { padding-top: 0; } .summary-table th, .summary-table td { padding: 4px 0; border-bottom: 1px solid #e0e0e0; border-collapse: collapse; vertical-align: top; } .summary-table th { color: #014172; text-align: left; width: 118px; } .summary-table td { color: #636363; padding-left: 10px; } .full .summary-table { width: 100%; } .full .summary-table th { width: 310px; } #t-business-summary { margin-bottom: 30px; } .summary-payment-table tr.first-row td, .summary-payment-table tr.first-row th { padding-top: 0; } .summary-payment-table { width: 601px; border-collapse: collapse; margin: 0px 0 0; } .summary-payment-table th, .summary-payment-table td { padding: 10px 0; border-top: 1px solid #e0e0e0; border-collapse: collapse; vertical-align: top; color: #636363 } .summary-payment-table th { color: #014172; text-align: left; width: 165px; padding-left: 40px; } .summary-payment-table tr:first-child th, .summary-payment-table tr:first-child td { border-top: none; } .summary-payment-table .total-due { font-size: 91.7%; padding-top: 2px; display: block; } .summary-payment-table .overdue { color: #d70b0b; margin-right: 5px; } .summary-payment-table .overdue strong { padding-left: 5px; } .summary-payment-table .plus { margin-right: 8px; } /*This normalises the spacing for other elements*/ .summary-payment-table .last-row th, .summary-payment-table .last-row td { padding-bottom: 0; } .summary-payment-table .meternumber { margin-left: -6px; } .sum-con { background: url('/images/standard/form/account-icons.png') 1px 0 no-repeat; } .sum-icon-accno { background-position: 1px 8px; } .sum-icon-service { background-position: 2px -45px; } .sum-icon-due { background-position: 1px -104px; } .sum-icon-meter { background-position: 2px -159px; } .sum-icon-accont { background-position: 1px -222px; } .sum-icon-date { background-position: 4px -294px; } .first-row .sum-con.sum-icon-accno { background-position: 1px -1px; } #promo-table { margin-top: 5px; margin-bottom: 0; } #promo-table th, #promo-table td { border-bottom: none; } .summary-table .th-full { width: 100%; border: none; } .summary-table .td-full { width: 100%; padding-left: 0; padding-top: 0; } #liBillingSummarDetils, #liSummaryProductDets { width: 280px; } #liBillingSummaryPayment,#liSummaryPromos { width: 280px; margin-left: 40px; } #liBillingSummarDetils table, #liBillingSummaryPayment table, #liSummaryProductDets table, #liSummaryPromos table { width: 100%; } #liBillingSummaryPayment table.summary-table { margin-bottom: 0; } #summary-online-account .inputs { margin-left:20px; width:600px; border:solid 1px #fff; padding:15px 10px 10px 17px; background:none; } #summary-online-account .inputs div { background: url('/images/standard/form/online-account.png') -2px 2px no-repeat; padding-left:58px; min-height:55px; } #summary-online-account .inputs h2 { margin-bottom:4px; } #summary-online-account .inputs p { margin-bottom:5px; } #summary-online-account .inputs.no-online-account { border-color:#ffb034; } #summary-online-account .inputs.new-online-account { border-color:#4cd702; } #summary-online-account .inputs.existing-online-account { border-color:#a70909; } #summary-online-account .inputs.existing-online-account h2 { color:#830000; } /* Buttons --------------------------------------------------------------------------------- */ button { font-size: 100%; cursor: pointer; } button:active { top: 0; left: 0; } button:disabled, button[disabled]{ border: 1px solid #999999; opacity: 0.6; cursor: not-allowed; } .fbtn { height: 31px; position: relative; top: 0; left: 0; padding: 0; float: left; display: block; border: none; cursor: pointer; text-decoration: none!important; background: none;display: block; font-size: 108.3%; } .fbtn-out { position: relative; top: 0; left: 0; height: 100%; display: block; float: left; background: url('/images/standard/form/button-sprite.png') right -66px no-repeat; padding-right: 6px; line-height: 16px; } .fbtn-in { position: relative; top: 0; left: 0; padding: 0; float: left; display: block; background: url('/images/standard/form/button-sprite.png') 0 0 no-repeat; padding: 7px 10px 8px; border: none; color: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } .fbtn-in { padding-top: 0; padding-bottom: 0; line-height: 31px; } .blue-btn .fbtn-out { padding-right: 22px; } .blue-btn .fbtn-in { padding-left: 14px; text-shadow: 0 1px 2px #0181b6; -moz-text-shadow: 0 1px 2px #0181b6; -webkit-text-shadow: 0 1px 2px #0181b6; -o-text-shadow: 0 1px 2px #0181b6; -ms-text-shadow: 0 1px 2px #0181b6; } .blue-btn.fbtn:hover .fbtn-out { background-position: right -165px; } .blue-btn:hover .fbtn-in { background-position: 0 -99px; } .grey-btn.fbtn .fbtn-out { padding-right: 9px; background-position: right -264px; } .grey-btn .fbtn-in { padding-left: 13px; padding-right: 4px; background-position: 0 -198px; text-shadow: 0 1px 2px #9c9b9b; -moz-text-shadow: 0 1px 2px #9c9b9b; -webkit-text-shadow: 0 1px 2px #9c9b9b; -o-text-shadow: 0 1px 2px #9c9b9b; -ms-text-shadow: 0 1px 2px #9c9b9b; } .grey-btn.fbtn:hover .fbtn-out { background-position: right -363px; } .grey-btn:hover .fbtn-in { background-position: 0 -297px; } .grey-btn.arrow .fbtn-in { padding-left: 32px; background-position: 0 -231px; } .grey-btn.arrow:hover .fbtn-in { background-position: 0 -330px; } .grey-btn.sm.fbtn { height: 28px; margin-top: 3px; margin-left: 7px; } .grey-btn.sm.fbtn .fbtn-out { padding-right: 9px; background-position: right -822px; } .grey-btn.sm .fbtn-in { padding: 7px 0px 9px 10px; background-position: 0 -792px; font-size: 11px; line-height: 14px; } .grey-btn.sm.fbtn:hover .fbtn-out { background-position: right -882px; } .grey-btn.sm:hover .fbtn-in { background-position: 0 -852px; } .red-btn .fbtn-in { text-shadow: 0 2px 2px #830000; -moz-text-shadow: 0 2px 2px #830000; -webkit-text-shadow: 0 2px 2px #830000; -o-text-shadow: 0 2px 2px #830000; -ms-text-shadow: 0 2px 2px #830000; } .red-btn.remove.sm.fbtn .fbtn-out { padding-right: 9px; background-position: right -972px; height: 28px; margin-top: 3px; margin-left: 7px; } .red-btn.remove.sm .fbtn-in { padding: 7px 0px 9px 30px; background-position: 0 -942px; font-size: 11px; line-height: 14px; } .red-btn.remove.sm.fbtn:hover .fbtn-out { background-position: right -1062px; } .red-btn.remove.sm:hover .fbtn-in { background-position: 0 -1032px; } .green-btn.fbtn .fbtn-out { padding-right: 9px; background-position: right -660px; } .green-btn .fbtn-in { padding-left: 13px; padding-right: 4px; background-position: 0 -594px; text-shadow: 0 1px 2px #6cb426; -moz-text-shadow: 0 1px 2px #6cb426; -webkit-text-shadow: 0 1px 2px #6cb426; -o-text-shadow: 0 1px 2px #6cb426; -ms-text-shadow: 0 1px 2px #6cb426; } .green-btn.fbtn:hover .fbtn-out { background-position: right -759px; } .green-btn:hover .fbtn-in { background-position: 0 -693px; } .green-btn.tick.fbtn .fbtn-out { padding-right: 9px; background-position: right -660px; } .green-btn.tick .fbtn-in { padding-left: 30px; padding-right: 6px; background-position: 0 -627px; } .green-btn.fbtn.tick:hover .fbtn-out { background-position: right -759px; } .green-btn.tick:hover .fbtn-in { background-position: 0 -726px; } .green-btn.arrow.fbtn .fbtn-out { padding-right: 22px; background-position: right -1458px; } .green-btn.arrow.fbtn:hover .fbtn-out { background-position: right -1491px; } .blue-btn.convers.fbtn .fbtn-out { padding-right: 5px;} .blue-btn.convers .fbtn-in { padding-left: 44px; background-position: 0 -1272px; } .blue-btn.convers.fbtn:hover .fbtn-out { background-position: right -165px; } .blue-btn:hover.convers .fbtn-in { background-position: 0 -1305px; } .blue-btn.sm.fbtn { margin-top: 3px; margin-left: 7px; } .blue-btn.sm.fbtn .fbtn-out { padding-right: 9px; background-position: right -1368px; height: 28px; } .blue-btn.sm .fbtn-in { padding: 7px 0px 9px 10px; background-position: 0 -1338px; font-size: 11px; line-height: 14px; } .blue-btn.sm.fbtn:hover .fbtn-out { background-position: right -1428px; } .blue-btn.sm:hover .fbtn-in { background-position: 0 -1398px; } .grey-half.fbtn .fbtn-in { background: url('/images/standard/form/address-sprite.png') right -102px no-repeat; padding: 0 11px 0 9px; width: 113px; text-align: left; line-height: 34px; } .grey-half.fbtn:hover .fbtn-in { background-position: right -136px; } .grey-half.fbtn { background: none; padding: 0; font-size: 100%;} .fbtn.btn-disabled .fbtn-out, .fbtn.btn-disabled:hover .fbtn-out { background-position: right -1617px; } .fbtn.btn-disabled .fbtn-in, .fbtn.btn-disabled:hover .fbtn-in { background-position: 0 -1584px; text-shadow: none; } /* Buttons - specific --------------------------------------------------------------------------------- */ #btn-cont { float: right; margin: 20px 40px 0 0; } #btn-cont .fbtn-in { padding-left: 15px; padding-right: 16px;} #btn-prev,#btn-cancel { float: left; margin: 20px 0 0 40px; } #btn-paynow, #btn-submit { float: right; margin: 20px 40px 0 0; } #btn-paynow .fbtn-in { padding-left: 23px; padding-right: 19px; } #btn-confirm { float: right; margin: 20px 40px 0 0; } #btn-paynow .fbtn-out { padding-right: 4px; } #btn-paynow .fbtn-in { padding-left: 27px; padding-right: 23px; } #btn-save-details, #btn-remove-details { float: right; margin: 20px 40px 0 0; } #btn-save-details .fbtn-out, #btn-remove-details .fbtn-out { padding-right: 7px;} #addySearchBtn { position: absolute; top: 0px; right: 0; left: auto; } #btn-cont.green-btn .fbtn-in { padding-right: 8px; } /* Progress Bar --------------------------------------------------------------------------------- */ #progress-bar { text-align: right; } #progress-bar .label { margin: 6px 0 11px; } #progress-bar #progress-wrap { background: url('/images/standard/form/progress-bar.png?v2') 0 -195px no-repeat; height: 30px; width: 227px; position: relative; float: right; } #progress-bar #progress-faceplate { background: url('/images/standard/form/progress-bar.png?v2') 0 0 no-repeat; height: 30px; width: 227px; position: absolute; top: 0; left: 0; } #progress-bar p { background: url('/images/standard/form/progress-bar.png?v2') 0 -161px no-repeat; display: block; height: 30px; margin: 0; padding: 0; float: left; } #progress-bar p strong { display: none; } #progress-bar #progress-wrap.four-steps { background-position: 0 -131px; } #progress-bar #progress-wrap.four-steps p { background-position: 0 -97px; } #progress-bar #progress-wrap.five-steps { background-position: 0 -68px; } #progress-bar #progress-wrap.five-steps p { background-position: 0 -34px; } /* Errors --------------------------------------------------------------------------------- */ .error-summary { background: url('/images/standard/form/error-sprite.png') 0 0 no-repeat; width: 962px; height: 65px; margin-left: -1px; margin-bottom: 7px; } .error-summary .error-title { color: #a70909; font-family: 'Asap', Arial, Helvetica, sans-serif; font-size: 200%; padding: 23px 0 0 81px; width: 209px; float:left; line-height: 100%; } .error-summary .error-text { color: #a70909; font-size: 108.3%; float: left; padding: 15px 0 0 40px; width: 600px; } p.error, .fbase .error label { color: #a70909; } .fbase .error .inner-text-wrap { background-position: 0 -204px; } .fbase .error .text-wrap { background-position: right -238px; } .fbase .error.inpradio { background-position: 0 -654px; } .fbase .error.inpradio .float-inpradio { background-position: 0 -654px; } .fbase .error.inpcheck .check-wrap { background-position: 0 -823px; } /*.fbase .error.alert input.text { background-position: 0 -204px; padding-right: 3px; } # UPDATED 07-11-12: Removed the ".alert" class from the styles below to ensure the ! alert is on all errors. # Further adjustments were made to elements below to reduce the widths of some inputs to allow for the new padding on the right hand side. */ .fbase .error input.text { width: 153px; } .fbase .error .inner-text-wrap { background-position: 0 -204px; padding-right: 3px; } .fbase .error .text-wrap { background-position: right -238px; padding-right: 24px; } .fbase li ol.inner-form-list li { float: left; width: auto; display: block; padding: 0; } .fbase .cal.error .text-wrap { padding-right: 6px; } /* if parent li has an error but nested li doesn't */ .fbase li.error ol.inner-form-list li .text-wrap { background-position: right -34px; padding-right: 6px; } .fbase li.error ol.inner-form-list li .text-wrap .inner-text-wrap { background-position: 0 0; } /* if both parent li and nested li have and error */ .fbase li.error ol.inner-form-list li.error .text-wrap { background-position: right -238px; padding-right: 24px; } .fbase li.error ol.inner-form-list li.error .text-wrap .inner-text-wrap { background-position: 0 -204px; } /* if parent li has an error, nested li an has an error & an alert */ .fbase li.error ol.inner-form-list li.error.alert .text-wrap { background-position: right -238px; padding-right: 24px; } /* Styles for DOB */ .fbase li.error.inpxxs ol.inner-form-list li .text-wrap input.text { width: 37px; } .fbase li.error.inpxxs ol.inner-form-list li.error .text-wrap input.text { width: 19px; } .fbase li.error.inpxxs ol.inner-form-list li.-year input.text { width: 55px; } .fbase li.error.inpxxs ol.inner-form-list li.error.-year input.text { width: 37px; } .fbase li.error.inpxs ol.inner-form-list li.error input.text { width: 30px; } .fbase .inps ol.inner-form-list li.error input.text { width: 53px; } .fbase li.fourths.error input.text { width: 103px; } .fbase ol.inner-form-list li.error.alert input.text, .fbase li.error.alert.inps ol.inner-form-list li.error.alert input.text { width: 30px; } .fbase ol.inner-form-list li.error.alert input#DateOfBirthYear { width: 37px; } /* Error style for CC expiry date */ .fbase li.error.inpxs li.error input.text { padding-right: 0px; } .fbase li.error.inpxs ol.inner-form-list li.alert.error .text-wrap, .fbase li.error.inpxs li.alert.error .text-wrap { padding-right: 25px; } .fbase li.error.inpxs li.alert.error input.text { padding-right: 0px; } .fbase li.error.inpxs li.alert.error .inner-text-wrap { padding-right: 2px; } /* Styles Long input */ .fbase .inl.error .inner-text-wrap { background-position: 0 -170px; } .fbase .inl.error input.text { width: 564px; } /* Transfer Address error style */ .fbase #olPropertyAddress .inl.error .inner-text-wrap { width: 565px; } /* Transfer Address error style */ .fbase #liPasswordReset.inl.error .inner-text-wrap { width: 407px; } .fbase #liPasswordReset.inl.error input.text, .fbase #liPasswordReset.inl input.text { width: 400px; } .fbase #liPasswordReset.inl.error .focused.text-wrap { padding-right: 7px; } .fbase #liPasswordReset.inl.error .focused.text-wrap .inner-text-wrap { width: 424px; } /* Styles Three fourths */ .fbase li.threefourths.error .text-wrap .inner-text-wrap { background-position: 0 -170px; } .fbase li.threefourths.error input.text { width: 405px; } /* Styles Two Thirds */ .fbase li.twothirds.error .text-wrap .inner-text-wrap { background-position: 0 -170px; } .fbase li.twothirds.error.alert .text-wrap .inner-text-wrap { background-position: 0 -170px; } .fbase li.twothirds.error.alert input.text { width: 359px; } /* Styles Two Thirds */ .fbase li.half.error input.text { width: 255px; } /* Inputs with Errors */ .fbase li.fourths.error .text-wrap { padding-right: 24px; } /* Sign up Promotions Error Extended */ #field-promos .error h2 { color: #a70909; font-weight: bold; } /* Something Left alert --------------------------------------------------------------------------------- */ .onelaststep-summary { background: url('/images/standard/form/something-left.png') 0 0 no-repeat; width: 962px; height: 90px; margin-left: -1px; margin-bottom: 7px; } .onelaststep-summary .error-title { color: #a84400; font-family: 'Asap', Arial, Helvetica, sans-serif; font-size: 200%; padding: 25px 0 0 81px; width: 209px; float:left; line-height: 100%; } .onelaststep-summary .error-text { color: #a84400; font-size: 108.3%; float: left; padding: 15px 0 0 33px; width: 600px; } /* Thank You alert --------------------------------------------------------------------------------- */ .thankyou-summary { background: url('/images/standard/form/thankyou-sprite.png') 0 0 no-repeat; width: 962px; height: 70px; margin-left: -1px; margin-bottom: 7px; } .thankyou-summary .error-title { color: #508a1c; font-family: 'Asap', Arial, Helvetica, sans-serif; font-size: 200%; padding: 20px 0 0 81px; width: 209px; float:left; line-height: 100%; } .thankyou-summary .error-text { color: #508a1c; font-size: 108.3%; float: left; padding: 16px 0 0 33px; width: 600px; } /* Setup Your Direct Debit --------------------------------------------------------------------------------- */ .fbase .sliding, .fbase .fading { display: none; clear: both; display: block; } .fbase .li-field-setup-directdeb-intro { padding-bottom: 15px; } .fbase .li-field-setup-directdeb { padding-bottom: 26px; } .fbase .li-field-directdeb-tcs { padding-bottom: 19px; } .fbase .inputs li .cst-alert { display:inline-block; padding:0.8em; color: #C00; background: #fcefef; margin-bottom:0.5em; border: solid 0.15em #C00; font-size: 1em; -webkit-border-radius:0.2em; -moz-border-radius:0.2em; border-radius:0.2em; } .fbase .inputs li .cst-alert.green { color:#6cb426; border-color:#6cb426; background:#f6ffed; } /* Update Billing Information --------------------------------------------------------------------------------- */ #summary-update-account { margin-bottom: 12px; } #summary-update-account .form-seperator { margin-bottom: 0; padding: 1px 0; } summary-payment-table .ol-billing-select { padding-top: 7px!important; } .ol-billing-select li:first-child { padding-bottom: 3px!important; } .ol-billing-select li { padding-bottom: 18px!important; } #liBillingNewDetails { padding-bottom: 3px!important; } #olBillingAddPersonForm { display: inline-block; padding: 4px 0 8px; } #olAddAddress.ol-billing-select { padding: 18px 0 0; } /* Password btn --------------------------------------------------------------------------------- */ #btn-password { background: url('/images/standard/common/icon-sprite.png') right -595px no-repeat; padding: 9px 45px 0 0; text-align: right; display: block; width: 255px; float: right; } #btn-password span { clear: both; display: block; color: #636363; font-size: 84.6%; } #btn-password span.p-title{ font-weight: normal; color: #00aeef; font-family: 'Asap', Arial, Helvetica, sans-serif; font-size: 118.2%; } /* Modal Form Fields --------------------------------------------------------------------------------- */ #fieldset-request .form-list li .stomp-wrap li { width: 157px; line-height: 15px; } #fieldset-request .form-list li { width: 451px; } #fieldset-request .inl input { width: 413px; } #fieldset-request .sub-heading { position: relative; margin-left: 3px; font-family: 'Asap', Arial, Helvetica, sans-serif; padding-bottom: 20px; } #fieldset-request .fbtn { float: right; margin-right: 3px;} #fieldset-request textarea { height: 142px; } #fieldset-support-request legend { width: 198px; } #fieldset-support-request .sub-heading { position: relative; margin-left: 3px; font-family: 'Asap', Arial, Helvetica, sans-serif; padding-bottom: 25px; } #fieldset-support-request .inpradio { float: left; width: 195px; clear: left; } #fieldset-support-request .inpradio label { width: 151px; color: #636363; font-weight: bold; font-size: 100%; float: left; } #fieldset-support-request .inpradio label span { display: block; font-size: 91.7%; font-weight: normal; } #fieldset-support-request .disabled label { color: #9e9e9e; } #fieldset-support-request .inpradio.checked label { color: #024071; } #fieldset-support-request li { padding-bottom: 15px; } .service-icon { background: url('/images/standard/form/service-options.png') 0 0 no-repeat; width: 25px; height: 25px; float: left; margin-right: 5px; margin-top: -3px; } .service-icon.residential { background-position: 0 0; } .disabled .service-icon.residential { background-position: -56px 0; } .checked .service-icon.residential { background-position: -28px 0; } .service-icon.smallbusiness { background-position: 0 -58px; } .disabled .service-icon.smallbusiness { background-position: -56px -58px; } .checked .service-icon.smallbusiness { background-position: -28px -58px; } .service-icon.largebusiness { background-position: 0 -32px; } .disabled .service-icon.largebusiness { background-position: -58px -32px; } .checked .service-icon.largebusiness { background-position: -30px -32px; } #fieldset-support-request .inpradio { background: none; } #fieldset-support-request .input-wrap { background: url('/images/standard/form/form-sprite.png') left -586px no-repeat; width: 25px; float: left; margin-top: 1px; } #fieldset-support-request .inpradio.checked .input-wrap { background-position: left -620px; } #fieldset-request li#li-regist-type { width: 198px; float: left; } #fieldset-request li#li-meter-relate { width: 253px; float: left; } #fieldset-request .fbtn.blue-btn .fbtn-in { padding-right: 10px;} /* meter Drop Down */ .meter-select .stomp-wrap { background: url('/images/standard/form/popup-dropdown.png') 0 0 no-repeat; width: 245px; padding-bottom: 3px; margin-top: 2px;} .meter-select .isOpen { background: url('/images/standard/form/popup-dropdown.png') 0 -102px no-repeat; } .meter-select .stomp-wrap li:first-child, .meter-select .stomp-wrap li.first { background-position: -3px -138px; } .meter-select .stomp-wrap li { line-height: 15px; background: url('/images/standard/form/popup-dropdown.png') -3px -157px no-repeat; width: 219px!important; } .meter-select .stomp-wrap li.last {background: url('/images/standard/form/popup-dropdown.png') -3px -178px no-repeat; } .meter-select .stomp-wrap li:last-child {background: url('/images/standard/form/popup-dropdown.png') -3px -178px no-repeat; } .meter-select .sStompList { width: 248px; } /* My Account settings --------------------------------------------------------------------------------- */ #containment #field-update-account-info { margin-bottom: 8px; } #containment #field-update-account-info .inputs { padding-bottom: 0px; } #field-billing-contact-oa { margin-bottom: 29px; } #field-update-second-account-info { background: url('/images/standard/common/seperator.png') 284px 10px no-repeat; padding: 30px 0 0; } #field-update-second-account-info legend { top: 30px; } .input-list-container { height: 68px; } .readonly-email .sign-in-email-address { font-weight: 600; font-size: 15px; padding: 4px 0 6px 4px; } .readonly-email .update-email-address { padding-left: 4px; } .readonly-email .phone-number { color: #00aeef; font-size: 13px; font-weight: 600; } /* Marketing consent billing information --------------------------------------------------------------------------------- */ #field-update-marketing-consent #li-liMarketingmaterialAllAccounts { display: none; padding-top: 18px; } /* Retina Images - Device/Resolutions Targetting - iPhone 4, Opera Mobile 11 and hi-resolution devices --------------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .fbtn .fbtn-out, .fbtn-in { background-image: url('/images/retina/form/button-sprite.png'); background-size: 302px 1651px; } /* Signup --------------------------------------------------------------------------------- */ /* Step 0 - Splash page */ .signup-listing .su-icon { background-image: url('/images/retina/common/signup-splash-icons.gif'); background-size: 105px 371px; } .signup-springboard-btm { background-image: url('/images/retina/common/containment-bar.png'); background-size: 962px 76px; } /* Page 1 */ #sky-wrap { background-image: url('/images/standard/common/signup-sky-bg.jpg'); background-size: 677px 155px; } #address-home-icon { background-image: url('/images/retina/common/address-home-icon.png'); background-size: 207px 158px; } .overscroll { background-image: url('/images/retina/common/overscroll-shadow.png'); background-size: 598px 12px; } /*.business-signup { background-image: url('/images/retina/common/signup-business-icon.png'); background-size: 23px 20px; }*/ .promoBannerFailed p, .promoBanner p, .addr-search-issue, .comp-confirm { background-image: url('/images/retina/common/addr-component-icons.png'); background-size: 2823px 22px; } .addr-hints { background-image: url('/images/retina/common/hint-info-icon.png'); background-size: 30px 30px; } #list-products .prod-col-1 .prod-feat, #list-products .prod-col-3 .prod-feat { background-image: url('/images/retina/common/prod-feat-icons.png'); background-size: 1533px 22px; } #list-products .prod-btn strong { background-image: url('/images/retina/common/prod-selected-tick.png'); background-size: 13px 13px; } #list-products .prod-terms { background-image: url('/images/retina/common/prod-terms-arrow.png'); background-size: 4px 7px; } #list-products .prod-btn, #list-products .prod-btn span.prod-btn-in { background-image: url('/images/retina/common/prod-select-cta-expandable.png'); background-size: 260px 300px; } #list-products .prod-col-1 { background-image: url('/images/retina/common/product-wrap-col-1-t.jpg'); background-size: 400px 800px; } #list-products .prod-col-1 .prod-wrap { background-image: url('/images/retina/common/product-wrap-col-1-b.jpg'); background-size: 4px 4px; } #list-products .prod-col-2 { background-image: url('/images/retina/common/product-wrap-col-2.jpg'); background-size: 200px 121px;} #list-products .prod-col-3 { background-image: url('/images/retina/common/product-wrap-col-3-t.jpg'); background-size: 400px 800px; } #list-products .prod-col-3 .prod-wrap { background-image: url('/images/retina/common/product-wrap-col-3-b.jpg'); background-size: 4px 4px; } /* Consider LPG */ .consider-lpg { background-image: url('/images/retina/common/consider-lpg.jpg'); background-size: 64px 80px; } /* Form Inputs */ .fbase .inner-text-wrap, .text-wrap, .stomp-wrap, .stomp-wrap li, .stomp-wrap li:first-child, .stomp-wrap li.first, .stomp-wrap li:last-child, #fieldset-support-request .input-wrap, .fbase .stomp-wrap li.last, .stomp-wrap li.last { background-image: url('/images/retina/form/form-sprite-text.png'); background-size: 350px 731px; } #fieldset-support-request .inpradio .input-wrap, .fbase .float-inpradio, .fbase .inpradio, .fbase .inpcheck .check-wrap { background-image: url('/images/retina/form/form-sprite.png'); background-size: 48px 978px; } .fbase .tatop, .fbase .tawrap, .fbase .tabtm { background-image: url('/images/retina/form/textarea-plain.png'); background-size: 1353px 7px; } .fbase textarea { -webkit-appearance: none; } .fbase .focused .tatop, .fbase .focused .tawrap, .fbase .focused .tabtm { background-image: url('/images/retina/form/textarea-focus.png'); background-size: 1353px 7px; } .fbase .error .tatop, .fbase .error .tawrap, .fbase .error .tabtm { background-image: url('/images/retina/form/textarea-red.png'); background-size: 1353px 7px; } .grey-half.fbtn .fbtn-in, .fbase li.threefourths .inner-text-wrap, .fbase li.twothirds .inner-text-wrap, .fbase .inl .inner-text-wrap, .cal .text-wrap .inp-btn { background-image: url('/images/retina/form/address-sprite.png'); background-size: 604px 238px; } .med-select .stomp-wrap, .med-select .isOpen, .med-select .stomp-wrap li:first-child, .med-select .stomp-wrap li.first, .med-select .stomp-wrap li, .fbase .med-select .stomp-wrap li.last, .med-select .stomp-wrap li:last-child, .med-select .stomp-wrap li.last { background-image: url('/images/retina/form/select-filter.png'); background-size: 310px 244px; } .hint { background-image: url('/images/retina/form/form-hint.png'); background-size: 40px 164px; } #olLargeBus .busphone { background-image: url('/images/retina/common/icon-phone.png'); background-size: 26px 26px; } /*.fbase li.go-green, */ .fbase .go-green-summary { background-image: url('/images/retina/form/green-sprite.png'); background-size: 651px 162px; } /* Error */ .onelaststep-summary { background-image: url('/images/retina/form/something-left.png'); background-size: 129px 229px; } .thankyou-summary { background-image: url('/images/retina/form/thankyou-sprite.png'); background-size: 129px 229px; } /* CC Payments */ .secureWeb, .cc-mc, .cc-visa, .cc-amex { background-image: url('/images/retina/form/form-icons.png'); background-size: 245px 126px; } #ccsummary .cc { background-image: url('/images/retina/form/form-cc-large.png'); background-size: 508px 166px; } .pay-product-desc { background-image: url('/images/retina/common/account-landing.jpg'); background-size: 133px 289px; } .error #ccsummary .cc-alert { background-image: url('/images/retina/form/cc-alert.png'); background-size: 47px 32px; } .xsmall-select .stomp-wrap, .xsmall-select .isOpen, .xsmall-select .stomp-wrap li:first-child, .xsmall-select .stomp-wrap li.first, .xsmall-select .stomp-wrap li, .fbase .xsmall-select .stomp-wrap li.last, .xsmall-select .stomp-wrap li:last-child, .xsmall-select .stomp-wrap li.last { background-image: url('/images/retina/form/select-filter.png'); background-size: 310px 244px; } #olfilterDate, #FilterService { background-image: url('/images/retina/account/filter-seperator.gif'); background-size: 1px 47px; } .meternumber li { background-image: url('/images/retina/form/metre-number-bg.png'); background-size: 108px 150px; } .transfer-house, .transfer-img, .transfer-arrow { background-image: url('/images/retina/form/form-transfer-sprite.png'); background-size: 375px 122px; } .fbase .liMoveContract { background-image: url('/images/retina/form/icons-transfer.png'); background-size: 28px 194px; } .sum-con { background-image: url('/images/retina/form/account-icons.png'); background-size: 24px 320px; } #progress-bar #progress-wrap, #progress-bar #progress-faceplate, #progress-bar p { background-image: url('/images/retina/form/progress-bar.png'); background-size: 227px 165px; } .error-summary { background-image: url('/images/retina/form/error-sprite.png'); background-size: 962px 65px; } #btn-password { background-image: url('/images/retina/common/icon-sprite.png'); background-size: 54px 734px; } .service-icon { background-image: url('/images/retina/form/service-options.png'); background-size: 84px 80px; } .meter-select .stomp-wrap, .meter-select .isOpen, .meter-select .stomp-wrap li, .meter-select .stomp-wrap li.last, .meter-select .stomp-wrap li:last-child { background-image: url('/images/retina/form/popup-dropdown.png'); background-size: 254px 248px; } .fbase .ticks li, .fbase .arrow-list li, #olAddressNotFound ol li, .fbase .ticks li { background-image: url('/images/retina/common/bullet-sprite.png'); background-size: 10px 1375px; } #field-existing-account .list-arrow-lg, .tick-heading,a.question-icon, .calendar-date, .info-icon, #olAddressNotFound ol { background-image: url('/images/retina/common/icon-sprite.png'); background-size: 54px 734px; } .promoBannerFailed, .promoBanner, .fbase li.form-seperator, .fbase .inputs { background-image: url('/images/retina/common/seperator.png'); background-size: 598px 1px; } #filter-utility .filter-btn { background-image: url('/images/retina/account/filter-btns.png'); background-size: 119px 62px; } /* Password Validation */ .pass-vali li { background-image: url('/images/retina/account/password-req-icons.png'); background-size: 2012px 12px; } /* Generic Thank you */ .common-thankyou { background-image: url('/images/retina/account/thankyou-generic-tick.png'); background-size: 172px 187px; } .ty-post-actions a { background-image: url('/images/retina/account/thankyou-option-icons.png'); background-size: 2130px 30px; } .ty-next-steps li { background-image: url('/images/retina/account/thankyou-next-steps.png'); background-size: 2297px 24px; } /* Sign Up Thank You */ #su-ty-survey { background-image: url('/images/retina/common/su-ty-survey-10s.png'); background-size: 158px 59px; } #ty-p1 { background-image: url('/images/retina/common/su-ty-s1-hero.jpg'); background-size: 316px 433px; } #ty-p2 { background-image: url('/images/retina/common/su-ty-s2-hero.jpg'); background-size: 252px 348px; } .su-ty-ss { background-image: url('/images/retina/form/signup-social-bg.jpg'); background-size: 316px 471px; } .su-ty-ss a { background-image: url('/images/retina/form/thankyou-social.png'); background-size: 204px 60px; } .su-ty-msg { background-image: url('/images/retina/common/su-ty-tick.png'); background-size: 110px 121px; } #ty-do-next li { background-image: url('/images/retina/common/su-ty-do-next-icons.png'); background-size: 111px 2100px; } #ty-p2 .su-login strong { background-image: url('/images/retina/common/bullet-sprite.png'); background-size: 10px 1375px; } /* Hintbox */ .hinting .hinting-top { background-image: url('/images/retina/form/hintbox-top.png'); background-size: 1px 20px; } .hinting .hinting-mid { background-image: url('/images/retina/form/hintbox-mid.png'); background-size: 35px 91px; } .hinting .hinting-btm { background-image: url('/images/retina/form/hintbox-btm.png'); background-size: 1px 20px; } .flybuys-logo { background-image:url('/images/retina/account/flybuy-logo-small.jpg'); background-size: 82px 28px; } } .alert { font-size: .9em; /*position: relative;*/ /* removed so that error placement is on the leftmost part */ margin-bottom: 1em; padding: 1em 1.5em; color: #00457c; border-left: .375em solid #00aeef; border-radius: .25em; background: #eef7fc; } .alert.alert-success { color: #209d48; border-color: #12ca05; background: #eeffed; } .alert.alert-warning, .my-account .reward-details-inner .alert.alert-warning p { color: #d06a28 !important; border-color: #fc0; background: #fff8eb; } .alert.alert-error { color: #c00; border-color: #f00; background: #ffebeb; } .alert h4 { font-size: 1em; font-weight: 700; line-height: 1.25em; margin-bottom: .667em; } .alert p { line-height: 1.25em; margin-bottom: .667em; } .alert > *:last-child { margin-bottom: 0; } /* login area --------------------------------------------------------------------------------- */ .login-area.felix #fieldset-login .form-control__login-acct { width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* FV --------------------------------------------------------------------------------- */ .fv .tick-heading { font-size: 340%; }