/* ************************* */ /* HTML5 display definitions */ /* ************************* */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* **** */ /* Base */ /* **** */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: Arial, sans-serif; } body { background: #FFF; color: #333; font-family: Arial, "Lucida Grande", sans-serif; font-size: 12px; line-height: 1; margin: 0; -webkit-font-smoothing: antialiased; } iframe {border: 0;} /* ***** */ /* Links */ /* ***** */ a, a:active, a:visited { color: #069; outline: 0; text-decoration: none; } a:hover { outline: 0; text-decoration: underline; } a:focus { outline: thin dotted; } /* ********** */ /* Typography */ /* ********** */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } mark { background: #FF0; color: #000; } p, pre { margin: 1em 0; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ''; content: none; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ***** */ /* Lists */ /* ***** */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } menu, ol, ul { padding: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } /* **************** */ /* Embedded content */ /* **************** */ img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } /* ******* */ /* Figures */ /* ******* */ figure { margin: 0; } /* ***** */ /* Forms */ /* ***** */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } /* ****** */ /* Tables */ /* ****** */ table { border-collapse: collapse; border-spacing: 0; } /* ********* */ /* Clear Fix */ /* ********* */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .clearLeft { clear: left; } /* ****** */ /* Hidden */ /* ****** */ .hidden { display: none; } .dn {display: none;} .db {display: block;} .hasPlaceholdText { color: #a9a9a9; } h4 { font-size: 12px; font-weight: bold; } /* **************************************** */ /* Page Layout */ /* **************************************** */ /* TypeA - Full Width */ /* TypeB - Left Navigation */ /* TypeC - Left Navigation & Aside */ /* TypeD - Aside */ /* **************************************** */ #pageContainer { margin: 0 auto; width: 960px; } #contentWrap { } #content:before, #content:after { content: ""; display: table; } #content:after { clear: both; } #content { clear: both; zoom: 1; } #navigation, #main, #aside { float: left; } .typeA #navigation, .typeA #aside, .typeB #aside, .typeD #navigation { display: none; } .typeA #main { margin: 0; width: 960px; } .typeB #main { margin: 0 0 0 20px; width: 764px; } .typeC #main { margin: 0 20px; width: 568px; } .typeD #main { margin: 0 20px 0 0; width: 764px; } .typeB #navigation, .typeC #navigation, .typeC #aside, .typeD #aside { width: 176px; } /* ***************/ /* Alerts - blue */ /* ***************/ /* General styles for all but then over-ridden where needed */ .message { border: 1px solid #98c4cd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; clear: both; color: #069; display: block; line-height: 16px; margin-bottom: 10px; overflow: hidden; padding: 10px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .message { background-color: #bee1f3; } .message a {font-weight: 900;} .message p { margin: 10px 0 0 0; } .ie6 .message p { display: inline-block; } .message p:first-child { margin: 0; } .messageIcon .icon { background: transparent url("../../images/global/icon-info.png") no-repeat 0 1px; } .messageIcon p, .messageIcon ul { padding: 0 0 0 22px; } .message p a:link, .message p a:visited, .message p .linkButton { text-decoration: underline; } .message p a:hover, .message p a:active, .message p .linkButton:hover { text-decoration: none; } .message h2 {margin: 25px 0 0 20px;} /* ******************/ /* Warning - yellow */ /* ******* **********/ .messageWarning { border: 1px solid #e0d16a; } .messageWarning, .messageWarning a, .messageWarning a:link, .messageWarning a:visited, .messageWarning a:hover, .messageWarning a:active, .messageWarning p .linkButton { color: #8c7c10; } .messageWarning, .ie6 #pageContainer .messageWarning span.primaryButtonEnd, .ie6 #pageContainer .messageWarning span.secondaryButtonEnd { background-color: #fff7cb; } .messageWarning .icon { background-image: url("../../images/global/icon-warning.png"); } /* *************/ /* Error - red */ /* ***** *******/ .messageError { border: 1px solid #e5a5af; } .messageError, .messageError a, .messageError a:link, .messageError a:visited, .messageError a:hover, .messageError a:active, .messageError p .linkButton { color: #ad2e2c; } .messageError, .ie6 #pageContainer .messageError span.primaryButtonEnd, .ie6 #pageContainer .messageError span.secondaryButtonEnd { background-color: #f1d0d0; } .messageError .icon { background-image: url("../../images/global/icon-error.png"); } /* *****************/ /* Success - green */ /* *****************/ .messageSuccess { border: 1px solid #a7d481; } .messageSuccess, .messageSuccess a, .messageSuccess a:link, .messageSuccess a:visited, .messageSuccess a:hover, .messageSuccess a:active, .messageSuccess p .linkButton { color: #297d2a; } .messageSuccess, .ie6 #pageContainer .messageSuccess span.primaryButtonEnd, .ie6 #pageContainer .messageSuccess span.secondaryButtonEnd { background-color: #d4ecca; } .messageSuccess .icon { background-image: url("../../images/global/icon-success.png"); } /* Message Enviro */ .messageEnviro { background-color: #FFFFFF; color: #6C930E; } .messageEnviro { border-color: #6C930E; } .messageEnviro .icon { background-image: url("../../images/global/green_small.gif"); } /***************************/ /* Message Link Navigation */ /***************************/ ul.messageNav { clear: both; line-height: 25px; overflow: hidden; } ul.messageNav li:nth-child(odd) { float: left; width: 50%; } ul.messageNav li:nth-child(even) { float: right; margin-right: 20px; text-align: right; width: 40%; } /* Primary Button */ div.primaryButtonStart, span.primaryButtonEnd, div.secondaryButtonStart, span.secondaryButtonEnd { display: block; float: left; background-color: transparent; background-image: url('../../images/global/btns-bg.png'); background-repeat: no-repeat; } div.primaryButtonStart, span.primaryButtonEnd { height: 30px; background-position: 0 -80px; } div.secondaryButtonStart, span.secondaryButtonEnd { height: 20px; background-position: 0 0; } span.primaryButtonEnd, span.secondaryButtonEnd { display: inline; margin-left: -20px; position: relative; right: -20px; } div.primaryButtonStart, div.secondaryButtonStart { margin-right: 20px; } div.primaryButtonStart { padding-left: 45px; } div.secondaryButtonStart { padding-left: 20px; } .ie6 span.primaryButtonEnd, .ie6 span.secondaryButtonEnd { background-color: #FFF; } span.primaryButtonEnd { background-position: 100% -80px; } span.secondaryButtonEnd { background-position: 100% 0; } .primaryButton, .secondaryButton { background: none; border: none; color: #FFF; cursor: pointer; font-weight: bold; position: relative; text-align: center; text-shadow: -1px -1px 1px rgba(0,0,0, 0.3); vertical-align: top; } .primaryButton { font-size: 14px; height: 28px; left: -45px; line-height: 28px; margin-right: -45px; padding: 0 30px 0px 30px; } .secondaryButton { font-size: 12px; height: 20px; left: -20px; line-height: 19px; margin-right: -20px; padding: 0 20px 2px 20px; } a.primaryButton, a.secondaryButton { display: inline-block; } .ie7 input.secondaryButton { line-height: 16px; } .ie7 a.secondaryButton { line-height: 18px; } .ie6 a.secondaryButton { height: 18px; line-height: 18px; } input.primaryButton { width: 200px; } a.primaryButton { width: 140px; } a.primaryButton:link, a.primaryButton:visited, a.primaryButton:hover, a.primaryButton:active, a.secondaryButton:link, a.secondaryButton:visited, a.secondaryButton:hover, a.secondaryButton:active { color: #FFF; } a.primaryButton:hover, a.primaryButton:active, a.secondaryButton:hover, a.secondaryButton:active { text-decoration: none; } div.primaryButtonStart:hover { background-position: 0 -110px; } div.secondaryButtonStart:hover { background-position: 0 -20px; } div.primaryButtonStart:hover span.primaryButtonEnd { background-position: 100% -110px; } div.secondaryButtonStart:hover span.secondaryButtonEnd { background-position: 100% -20px; } .ie6 input.primaryButton, .ie7 input.primaryButton, .ie6 input.secondaryButton, .ie7 input.secondaryButton { overflow: visible; top: 0; } .ie6 input.primaryButton { line-height: 27px; } .ie6 input.secondaryButton { line-height: 17px; } /* Chevron */ div.chevron { background-position: 0 -140px; } div.chevron span { background-position: 100% -140px; } div.chevron:hover { background-position: 0 -170px; } div.chevron:hover span.primaryButtonEnd { background-position: 100% -170px; } /* Padlock */ div.padlock { background-position: 0 -200px; } div.padlock span { background-position: 100% -200px; } div.padlock:hover { background-position: 0 -230px; } div.padlock:hover span.primaryButtonEnd { background-position: 100% -230px; } /* Blue Primary */ div.bluePrimary { background-position: 0 -260px; } div.bluePrimary span { background-position: 100% -260px; } div.bluePrimary:hover { background-position: 0 -290px; } div.bluePrimary:hover span.primaryButtonEnd { background-position: 100% -290px; } /* Blue Primary Chevron */ div.bluePrimaryChevron { background-position: 0 -320px; } div.bluePrimaryChevron span { background-position: 100% -320px; } div.bluePrimaryChevron:hover { background-position: 0 -350px; } div.bluePrimaryChevron:hover span.primaryButtonEnd { background-position: 100% -350px; } /* Blue Drop Down */ div.dropdown { background-position: 0 -380px; } div.dropdown span { background-position: 100% -380px; } div.dropdown:hover { background-position: 0 -400px; } div.dropdown:hover span.secondaryButtonEnd { background-position: 100% -400px; } /* Green Secondary */ div.greenSecondary { background-position: 0 -40px; } div.greenSecondary span { background-position: 100% -40px; } div.greenSecondary:hover { background-position: 0 -60px; } div.greenSecondary:hover span.secondaryButtonEnd { background-position: 100% -60px; } /* link button - input buttons styled to look like text links */ input.linkButton { background: none; border: none; color: #069; cursor: pointer; margin: 0; padding: 0 0 3px 0; } input.linkButton:hover { text-decoration: underline; } /* New buttons - taken from mobile site, potentially will be implemented globally across desktop site */ .primBtn { background-color: #7AC458; background: linear-gradient(#99DD77, #449922); /* the standard */ background: -moz-linear-gradient(center top , #99DD77, #449922) repeat scroll 0 0 rgba(0, 0, 0, 0); background: -moz-linear-gradient(center top , #99DD77, #449922) repeat scroll 0 0 rgba(0, 0, 0, 0); background: -ms-linear-gradient(#99DD77, #449922); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99DD77), color-stop(100%, #449922)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#99DD77, #449922); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#99DD77, #449922); /* Opera 11.10 */ border: 1px solid #336611; margin: 10px 0; } .secBtn { background-color: #4D8DF4; background: linear-gradient(#8AB4F8, #4D8DF4); /* the standard */ background: -moz-linear-gradient(center top , #8AB4F8, #4D8DF4) repeat scroll 0 0 rgba(0, 0, 0, 0); background: -moz-linear-gradient(#8AB4F8, #4D8DF4); /* FF 3.6+ */ background: -ms-linear-gradient(#8AB4F8, #4D8DF4); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8AB4F8), color-stop(100%, #4D8DF4)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#8AB4F8, #4D8DF4); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#8AB4F8, #4D8DF4); /* Opera 11.10 */ border: 1px solid #3079ED; } .thirdBtn { background-color: #FCFCFC; background: linear-gradient(#FCFCFC, #DFDFDF); /* the standard */ background: -moz-linear-gradient(center top , #FCFCFC, #DFDFDF) repeat scroll 0 0 rgba(0, 0, 0, 0); background: -moz-linear-gradient(#FCFCFC, #DFDFDF); /* FF 3.6+ */ background: -ms-linear-gradient(#FCFCFC, #DFDFDF); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FCFCFC), color-stop(100%, #DFDFDF)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#FCFCFC, #DFDFDF); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#FCFCFC, #DFDFDF); /* Opera 11.10 */ border: 1px solid #999999; } .primBtn, .secBtn { border-radius: 6px; font-weight: bold; height: 30px; width: 150px; color: #FFF; font-size: 13px; } .thirdBtn { border-radius: 6px; font-weight: bold; height: 30px; width: 150px; color: #666; font-size: 13px; } a.primBtn, a.secBtn { color: #FFF; display: block; height: auto; padding: 8px 0; text-align: center; } a.thirdBtn { color: #666; display: block; height: auto; padding: 8px 0; text-align: center; } a.primBtn:hover, a.secBtn:hover, a.thirdBtn:hover { color: #FFF; text-decoration: none; } .button .thirdBtn { color: #666; } .primBtn:hover { background: #336611; } .secBtn:hover { background: #3079ED; } .thirdBtn:hover { background: #85B8FF; filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#85B8FF", endColorstr="#4589FF"); background: -ms-linear-gradient(top, #85B8FF 0%, #4589FF 100%); background: -moz-linear-gradient(top, #85B8FF 0%, #4589FF 100%); background-image: -o-linear-gradient(top, #85B8FF 0%, #4589FF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #85B8FF), color-stop(1, #4589FF)); background: -webkit-linear-gradient(top, #85B8FF 0%, #4589FF 100%); background-image: linear-gradient(to bottom, #85B8FF 0%, #4589FF 100%); border: 1px solid #0055FF; color: #FFF; } #footer { margin: 20px 0 150px 0; border: 0px solid #323232; border-top-width: 6px; padding: 0 0 10px; } #footer #footerSectionWrap { border-bottom: 2px solid #323232; margin-bottom: 10px; /* clearfix */ overflow: hidden; display: inline-block; /* Necessary to trigger "hasLayout" in IE */ display: block; /* Sets element back to block */ } #footer #footerSectionWrap .footerSection { float: left; width: 20%; padding-bottom: 20px; } #footer #footerSectionWrap .footerSection h3 { float: left; clear: left; width: 100%; } #footer #footerSectionWrap .footerSection ul { list-style-type: none; padding-left: 0; } #footer #footerSectionWrap .footerSection ul li { margin-bottom: 7px; } #footer #footerSectionWrap .footerSection ul li a { color: #616161; font-size: 12px; } /* Once css has updated, change id of social info footer section to conntecToUs and then delete everything from here to next comment. */ #footer #latestNews .socialIcon, #footer #paymentLogos { background-image: url('/assets/static/theme/images/footer-sprite.png'); } #footer #latestNews .socialIcon { float: left; width: 52px; height: 52px; } #footer #latestNews #facebookIcon { margin-right: 15px; } #footer #latestNews #twitterIcon { background-position: -68px 0; } #footer #footerSectionWrap #latestNews input[type=text] { border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset, 0 1px 0 white; font-family: Arial, "Lucida Grande", sans-serif; font-size: 12px; margin: 0; width: 95%; height: 28px; line-height: 28px; text-indent: 7px; } #footer #footerSectionWrap #latestNews input[type=text]:focus { border: 2px solid #069; outline: none } #footer #footerSectionWrap #latestNews #newsletterSignUpButton { margin-top: 10px; } #footer #footerSectionWrap #latestNews #newsletterSignUpButton .primaryButton { width: 113px; margin-right: -75px; left: -60px; font-size: 13px; } /* * Preparing to change the id name of the social icons section of the footer */ #footer #connectToUs .socialIcon, #footer #paymentLogos { background-image: url('//content-brandquarter.lsdg.com/assets/static/theme/images/footer-sprite.png'); } #footer #connectToUs .socialIcon { float: left; width: 52px; height: 52px; } #footer #connectToUs #facebookIcon { margin-right: 15px; } #footer #connectToUs #twitterIcon { background-position: -68px 0; } #footer #footerSectionWrap #connectToUs input[type=text] { border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset, 0 1px 0 white; font-family: Arial, "Lucida Grande", sans-serif; font-size: 12px; margin: 0; width: 95%; height: 28px; line-height: 28px; text-indent: 7px; } #footer #footerSectionWrap #connectToUs input[type=text]:focus { border: 2px solid #069; outline: none } #footer #footerSectionWrap #connectToUs #newsletterSignUpButton { margin-top: 10px; } #footer #footerSectionWrap #connectToUs #newsletterSignUpButton .primaryButton { width: 113px; margin-right: -75px; left: -60px; font-size: 13px; } #footer #copyrightNotice, #footer #companyInfo { float: left; width: 575px; font-size: 10px; color: #686868; margin: 2px 0; } #footer #paymentLogos { float: right; width: 376px; height: 33px; background-position: -123px 0; } /* ******************* */ /* Generic Form Styles */ /* ******************* */ .formHeader h1, .formHeader h2 { font-size: 18px; font-weight: bold; line-height: 22px; } .formHeader h2 span { font-size: 12px; font-weight: normal; } .formSection h3 { color: #333; font-size: 14px; font-weight: bold; margin: 15px 0; } .formSection p { line-height: 16px; } .formSection input.textInput, .formSection select { border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset, 0 1px 0 #FFF; font-family: Arial, "Lucida Grande", sans-serif; font-size: 12px; margin: 0; } .formSection input.textInput { padding: 4px; } .formSection select { padding: 3px; } .ie6 .formSection input.textInput, .ie7 .formSection input.textInput { padding: 2px; } .formSection label { display: block; margin: 0 0 5px; } /* ***** Radio Button Validation ***** */ .radioError label { color: #B94A48; } .radioError .status .icon { padding: 2px 5px 0 5px; } /* ***** */ .formSection fieldset div { margin: 0 0 15px; } .formSection fieldset div.noMargin { margin: 0; } .formSection .dateContainer { display: inline-block; float: left; margin: 0; position: relative; } .formSection .dateContainer span { position: static; } .formSection textArea { border: 1px solid #CCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-family: Arial, "Lucida Grande", sans-serif; font-size: 12px; height: 100px; margin: 0; padding: 4px; resize: none; width: 752px; } .formSection .disabled { background-color: #EEE; } .formSection .warning, .formSection .exceeded { color: #C00; } .formSection .scrollableArea { background-color: #FFF; border: 1px solid #CCC; border-radius: 3px 3px 3px 3px; height: 150px; overflow-y: scroll; margin-bottom: 0; padding: 3px; } .formSection .scrollableArea .textBlock { height: 145px; margin: 10px; } .formSection .scrollableArea .textBlock p { clear: both; margin-top: 0; } .formSection .scrollableArea .textBlock h5 { margin-top: 0; } .formSection .scrollableArea .textBlock ul { margin: 0 0 0 24px; padding: 2px 0 5px 0; } .formSection .scrollableArea .textBlock .textBlockLeft { border-right: 1px solid #CCC; display: inline-block; float: left; margin-right: -1px; width: 50%; } .formSection .scrollableArea .textBlock .textBlockRight { display: inline-block; float: right; width: 50%; } .formSection .pillbox { background-color: #FFF; border: 1px solid #CCC; border-radius: 3px 3px 3px 3px; clear: both; display: block; line-height: 13px; margin-top: 0; padding: 5px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .formSection .pillbox .checkbox { display: inline-block; height: 20px; margin:0 5px; *overflow: hidden; padding: 0; top: -1px; vertical-align: bottom; width: 13px; } .formSection .pillbox label { display: inline-block; margin: 5px 0; padding-left: 15px; text-indent: -15px; } .formFooter { margin-top: 20px; position: relative; } .formFooter .backLink { float: left; } .formFooter .backLink:hover { text-decoration: underline; } .formFooter .footerText { float: left; display: inline; margin: 0 20px 0 294px; text-align: center; width: 300px; } .formFooter .footerTextBasket { margin-left: 180px; } .ie6 .formFooter .footerText { margin-left: 185px; } /* *********** */ /* Post Errors */ /* *********** */ .formErrors { display: none; } .postErrors { display: block; zoom: 1; } .formErrors ul { list-style: none; margin: 0 0 0 0; padding: 0 0 0 22px; } .formErrors ul li { line-height: 16px; } .formErrors ul li.hide { display: none; } .formErrors .error { color: #B94A48; font-weight: normal; } /* ****************** */ /* Input Field Widths */ /* ****************** */ #homeAddress_prefix, #dateOfBirthDay { width: 60px; } #dateOfBirthYear { width: 70px; } #dateOfBirthMonth, #registerPostcode, #registerPostcodeME, #postalCode { width: 100px; } #registerHouseNum, #registerHouseNumME, #address1 { width: 120px; } #homeAddress_phoneNumber, #homeAddress_mobilePhoneNumber, #work_phoneNumber, #phoneNumber, #deliveryAccess, #propertyType, #noOneHome, #safePlace, #deliveryInstructions, #registerAccNum, #apartmentFloor, #otherAccess, #noOneHomeOther, #propertyTypeAccess, #propertyTypeDetails, #deliveryInstructionsDetails { width: 140px; } #firstName, #lastName, #password, #confirmPassword, #registerConfPass, #registerStreetME, #registerTownME, #registerCountyME, #homeAddress_address2, #homeAddress_city, #homeAddress_state, #addressName, #city, #state, #address2 { width: 200px; } #email, #confirmEmail, .formSection .email, .formSection .confirmEmail { width: 300px; } /* *********** */ /* Field Focus */ /* *********** */ .formSection .statusWrap { display: inline-block; float: left; margin-left: 15px; z-index: 8888; } .formSection .statusWrapFirst { margin-left: 0; position: relative; z-index: 9999; } .formSection .statusWrapLast { position: relative; z-index: 7777; } .formSection .hideIcon .icon { display: none; } .formSection .status { display: inline-block; margin: 0; position: relative; } .formSection span.focus { background-color: #006699; border: 2px solid #006699; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: -2px; } .formSection span.focus input { border: 0 none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset; outline: none; padding: 5px; } .ie6 .formSection span.focus input, .ie7 .formSection span.focus input { padding: 3px; } .formSection span.focus select { border: 0 none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset; outline: none; padding: 4px; } /* *********** */ /* Field Error */ /* *********** */ .formSection span.error { background-color: #FFF; border: 2px solid #B94A48; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: -2px; } .formSection label.error { color: #900; } .formSection span.error input { border: 0 none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #EEE inset; outline: none; padding: 5px; } .ie6 .formSection span.error input, .ie7 .formSection span.error input { padding: 3px; } .formSection span.error select { border: 0 none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 0 #EEE inset; outline: none; padding: 4px; } .status .icon { display: inline-block; height: 15px; padding: 5px 14px; position: absolute; right: -30px; top: 0; } .dateContainer .icon { /* padding: 5px 15px;*/ /* top: 18px;*/ height: 50px; margin-right: -26px; right: 0; } span .errorIcon { background: url('../../images/global/icon-error.png') right no-repeat transparent; } span .successIcon { background: url('../../images/global/icon-success.png') right no-repeat transparent; } /* ******* */ /* Tooltip */ /* ******* */ /* Information Section */ /* Error */ .formSection .formError { cursor: default; position: absolute; z-index: 5000; right: -283px; margin: 0; top: 0px; } .formSection .dateContainer .formError { right: -283px; top: 19px; } .formSection .formErrorMessage { background-color: #BEE1F3; border: 1px solid #98C4CD; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #069; line-height: 14px; margin: -2px 0 0 0; padding: 6px 8px 6px 8px; position: relative; width: 250px; z-index: 5001; } .formSection .error .formErrorMessage { background-color: #F1D0D0; border: 1px solid #E5A5AF; color: #AD2E2C; } .formSection .formErrorMessage .error { border: none; font-style: normal; } .formSection textArea.error { border: 2px solid #B94A48; } /* Service Messages */ .formSection .serviceErrorSection { clear: both; display: none; padding-top: 5px; } .formSection .serviceError { background-color: #BEE1F3; background-image: url("../../images/global/icon-error.png"); background-position: 8px 6px; background-repeat: no-repeat; border: 1px solid #98C4CD; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; clear: both; color: #069; display: block; line-height: 16px; margin-top: 10px; padding: 5px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .formSection .serviceError p { margin: 0 0; padding-left: 22px; } /* Tooltips require positioning */ #idFieldset, #passwordFieldset { position: relative; } /* ************* */ /* Tooltip Arrow */ /* ************* */ .formSection .formErrorArrow { width: 10px; height: 16px; z-index: 5003; cursor: pointer; position: absolute; top: 5px; left: -9px; } .formSection .formErrorArrow div { background-color: #BEE1F3; border-top: 1px solid #98C4CD; border-bottom: 1px solid #98C4CD; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05); height: 15px; display: block; font-size: 0; width: 2px; line-height: 0; position: absolute; } .formSection .formErrorArrow .a7 { box-shadow: 0 0 0; height: 11px; right: 0; top: 0; width: 1px; } .formSection .formErrorArrow .a6 { height: 9px; right: 1px; top: 1px; } .formSection .formErrorArrow .a5 { height: 7px; right: 3px; top: 2px; } .formSection .formErrorArrow .a4 { height: 5px; right: 5px; top: 3px; } .formSection .formErrorArrow .a3 { height: 3px; right: 7px; top: 4px; } .formSection .formErrorArrow .a2 { height: 1px; right: 9px; top: 5px; } .formSection .formErrorArrow .a1 { background-color: #98C4CD; border: 0; height: 1px; right: 11px; top: 6px; width: 1px; } /* ********************** */ /* Tooltip Arrow on Error */ /* ********************** */ .formSection .error .formErrorArrow div { background-color: #F1D0D0; border-top: 1px solid #E5A5AF; border-bottom: 1px solid #E5A5AF; } .formSection .error .formErrorArrow .a1 { background-color: #F1D0D0; border: 0 none; } /* ********************** */ /* Forms in Aside sidebar */ /* ********************** */ #aside .formSection .formError { left: -283px; right: auto; } #aside .formSection .formErrorArrow { left: auto; right: -11px; } #aside .formSection .formErrorArrow .a7 { right: 11px; } #aside .formSection .formErrorArrow .a6 { right: 9px; } #aside .formSection .formErrorArrow .a5 { right: 7px; } #aside .formSection .formErrorArrow .a4 { right: 5px; } #aside .formSection .formErrorArrow .a3 { right: 3px; } #aside .formSection .formErrorArrow .a2 { right: 1px; } #aside .formSection .formErrorArrow .a1 { right: 0; } /* ******************************* */ /* Register / Checkout Style Forms */ /* ******************************* */ .themeCommerce .formHeader { border: 1px solid #CCC; border-radius: 9px 9px 0 0; -moz-border-radius: 9px 9px 0 0; -webkit-border-top-left-radius: 9px; -webkit-border-top-right-radius: 9px; height: auto; margin: 0 0 1px; padding: 10px; } .themeCommerce .formHeader h1, .themeCommerce .formHeader h2 { font-size: 20px; margin: 0; } .themeCommerce .formHeader, .ie6 .themeCommerce .formHeader span.primaryButtonEnd, .ie6 .themeCommerce .formHeader span.secondaryButtonEnd { background-color: #DFE0DB; } .themeCommerce .formHeader .message { margin: 10px 0 0 0; } .themeCommerce .formSection:before, .themeCommerce .formSection:after { content: ""; display: table; } .themeCommerce .formSection:after { clear: both; } .themeCommerce .formSection { border: 1px solid #CCC; margin: 1px 0; padding: 20px; zoom: 1; } .themeCommerce .formSection h3 { margin-top: 0; } .themeCommerce .formSection p.lastParagraph { margin-bottom: 0; } .themeCommerce .formSection, .ie6 .themeCommerce .formSection span.primaryButtonEnd, .ie6 .themeCommerce .formSection span.secondaryButtonEnd { background-color: #EFEFEA; } .ie6 .themeCommerce .formSection .error span.secondaryButtonEnd { background-color: transparent; } .themeCommerce .formFooter { border: 1px solid #CCC; border-radius: 0 0 9px 9px; -moz-border-radius: 0 0 9px 9px; -webkit-border-bottom-left-radius: 9px; -webkit-border-bottom-right-radius: 9px; height: 30px; margin: 0 0 5px; padding: 10px; } .themeCommerce .formFooter .footerText { line-height: 14px; margin-right: 0; } .themeCommerce .formFooter, .ie6 .themeCommerce .formFooter span.primaryButtonEnd, .ie6 .themeCommerce .formFooter span.secondaryButtonEnd { background-color: #DFE0DB; } .themeCommerce .formFooter .button { display: inline; float: right; } /* ******************************* */ /* My Account Styles */ /* ******************************* */ .myAccount .formHeader h1, .myAccount .formHeader h2 { font-size: 18px; } .myAccount .formSection h2 { font-size: 16px; margin: 0 0 10px 0px; } .myAccount .formHeader { border-bottom: 2px solid #CCC; margin-bottom: 15px; } .myAccount .formHeader .message, .myAccount .formSection .message { margin: 10px 0 0 0; } .myAccount .formSection { border-bottom: 1px solid #CCC; padding: 20px 0; } .myAccount .formSection.first, .myAccount .formSection:first-child { padding: 0 0 20px; } .myAccount .formSection.last { border-bottom: none; } .myAccount .formSection h3 { margin-top: 0; } .myAccount .formSection div.primaryButtonStart, .myAccount .formSection div.secondaryButtonStart { padding-bottom: 0; } .myAccount .formSection fieldset { padding: 0 0 10px; } .myAccount .formSection ul li { line-height: 16px; } .myAccount .formFooter { border-top: 2px solid #CCC; clear: both; margin-top: 0; padding-bottom: 20px; padding-top: 15px; } .myAccount .formFooter .secondaryButtonStart { float: left; } .myAccount .formFooter .primaryButtonStart { float: right; } .myAccount .formFooter .linkButton { height: 20px; margin-left: 20px; padding: 0 10px; } .myAccount .formFooter .linkContainer { padding-top: 5px; } .myAccount .formFooter .linkContainer a { margin-left: 10px; } .ie7 #headerWrap, .ie7 #contentWrap { position: relative; } .ie7 #headerWrap { z-index: 300; } .ie7 #contentWrap { z-index: 100; } #header { float: left; margin: 10px 0 0 0; width: 100%; } #header ul {list-style: none;} #header ul li {display: inline;} /* Logo */ #header #headerContent #siteLogo { float: left; } #header #headerContent #siteLogo a { float: left; height: 92px; text-indent: -9999px; width: 384px; } #header #headerContent .headerRow { float: left; font-weight: 12px; width: 576px; } /* Site Welcome */ #header #headerContent #siteWelcome { float: left; margin-left: 25px; width: 220px; } #header #headerContent #siteWelcome ul { margin: 0; padding: 2px 0; } #header #headerContent #siteWelcome ul li { border-right: 1px solid #777; margin: 0 5px 0 0; padding: 0 8px 0 0; } #header #headerContent #siteWelcome ul li.last {border: none;} #header #headerContent #siteWelcome #welcomeStatement { display: block; font-weight: bold; margin-bottom: 8px; } #header #headerContent #siteWelcome #welcomeQuestion { display: inline; } #header #headerContent #siteWelcome .signIn { display: inline; } #header #headerContent #siteWelcome .logoff { display: inline; line-height: 12px; } #header #headerContent #siteWelcome #loggedin { margin-bottom: -1px; } /* User's name in header when soft logged in experiment */ #header #headerContent .headerRow #siteWelcome #softLogoutForm #welcomeStatement{font-weight: normal; line-height: 18px;} #header #headerContent .headerRow #siteWelcome #softLogoutForm a {display: inline} #header #headerContent #siteWelcome #softLogoutForm #welcomeQuestion {float: none} #header #headerContent #siteWelcome #softLogoutForm .linkButton {color: #777;margin-left: -10px;text-transform: uppercase;} .openToBuy #header #headerContent #siteWelcome { background: #e7e7e7; font-size: 12px; margin-top: -3px; padding: 10px; width: 190px; z-index: 250; } .openToBuy #leftArrowWrap {position: relative;} .openToBuy #leftArrow { background: url(//content.very.co.uk/assets/static/2014/pesonalisation/open_to_buy/left_arrow.png) no-repeat 0 0; display: block; height: 24px; left: -24px; position: absolute; top: 12px; width: 14px; } .openToBuy #header #headerContent #siteWelcome #welcomeToBrand { display: block; font-weight: bold; margin-bottom: 5px; } .openToBuy #header #headerContent #siteWelcome a {line-height: 14px;} body .openToBuy #header #headerContent #siteWelcome a span {text-decoration: underline;} .openToBuy #welcomeBalance { margin: -10px -10px 0px -10px; padding: 15px; } .openToBuy #availableBalance {color: #FF2CAC} .openToBuy #returnedItemsDropdown { display: none; position: relative; } .openToBuy #returnedItemsDropdown #returnedItemsBG { background: #ccc; color: #666; display: block; line-height: 14px; margin-left: -10px; padding: 15px; width: 180px; } .openToBuy #returnedItemsDropdown p {margin: 0 0 10px 0;} .openToBuy #returnedItemsDropdown .returnedItemsArrow { background: url(//content.very.co.uk/assets/static/2014/pesonalisation/open_to_buy/up_arrow.png) no-repeat 0 0; display: block; margin-left: 80px; width: 15px; height: 10px; } .openToBuy #returnedItemsDropdown .returnedItemsArrow:hover {cursor: pointer;} .openToBuy .availableBalanceLogoff { display: block; margin: 0px 0 0 5px; } /* Site links */ #header #headerContent #siteLinks ul { float: right; margin: 0; padding: 0; width: 320px; } #header #headerContent #siteLinks ul li { border-right: 1px solid #777; height: 15px; line-height: 14px; margin: 0 5px 0 0; padding: 0 10px 0 0; } #header #headerContent #siteLinks ul li.last { border: none; margin: 0; padding: 0; } /* Phone number */ #header #headerContent #siteLinks #sitePhoneNumber { float: right; font-weight: bold; margin: 7px 0 0 0; padding: 2px 0; text-align: right; width: 100px; } /* Search */ #header #headerContent #siteSearch { background: #fff; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; float: left; margin-left: 25px; margin-top: 18px; } #header #headerContent #siteSearch #searchBox { background: url(../../images/global/icon-search.png) left no-repeat; background-position: 6px 50%; border: 1px solid #262626; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; -webkit-box-shadow: 2px 2px 4px #bbb inset; box-shadow: 2px 2px 4px #bbb inset; float: left; height: 15px; padding: 6px 0 7px 25px; width: 250px; } #header #headerContent #siteSearch #searchButton { float: left; width: 65px; } .ie6 #header #headerContent #siteSearch #searchButton { float: left; width: 65px; } #header #headerContent #siteSearch #searchButton input { left: 0; margin-right: 0; padding: 1px 6px 1px 5px; text-align: center; width: 65px; } /* Basket */ #header #headerContent a#basketLink { cursor: pointer; font-size: 14px; } .ie6 #header #headerContent a#basketLink, .ie7 #header #headerContent a#basketLink { font-size: 12px; } #header #headerContent a#basketLink:hover { text-decoration: none; } #header #headerContent a#basketLink #siteBasket { background: #EEE; background: -moz-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#DCDCDC)); background: -webkit-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -o-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -ms-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: linear-gradient(to bottom, #FAFAFA 0%, #DCDCDC 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#DCDCDC',GradientType=0 ); border: 1px solid #CCC; border-color: #CCC #CCC #AAA; border-radius: 3px; box-shadow: 0 0 1px #FFF inset; color: #333; display: block; float: left; height: 29px; line-height: 24px; margin: 17px 0 0 31px; outline: none; padding: 0 8px; text-decoration: none; text-shadow: 0 1px 0 #FFF; width: 160px; } .ie6 #header #headerContent a#basketLink #siteBasket { width: 130px; } #header #headerContent a#basketLink #siteBasket:hover { background: #EFEFEF; background: -moz-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F0F0F0), color-stop(100%,#E6E6E6)); background: -webkit-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -o-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -ms-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: linear-gradient(to bottom, #F0F0F0 0%, #E6E6E6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#E6E6E6',GradientType=0 ); border-color: #BBB #BBB #999; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFF inset; } #header #headerContent a#basketLink #siteBasket #basketIcon { background: url(../../images/global/basket-icon.png) left no-repeat; display: inline-block; float: left; height: 20px; margin: 2px 0 0 0; width: 69px; padding-left: 25px; font-size: 12px; } #header #headerContent a#basketLink #siteBasket #numItems { display: inline-block; font-weight: bold; height: 20px; margin: 2px 0 0 5px; width: 60px; font-size: 12px; } .ie6 #header #headerContent a#basketLink #siteBasket #numItems { float: right; margin: 0; text-align: right; } #header #headerContent a#basketLink #siteBasket #basketPrice { display: none; float: right; font-weight: bold; height: 20px; margin: 4px 0 0 5px; text-align: right; width: 65px; } .ie6 #header #headerContent a#basketLink #siteBasket #basketPrice { clear: both; margin: 0; } .ie7 #header #headerContent a#basketLink #siteBasket #basketPrice { float: none; } /* Breadcrumb */ #breadcrumb { background-color: #F5F5F5; border-radius: 5px; clear: both; margin: 0 0 15px; padding: 10px; text-shadow: 0 1px 0 #FFF; text-transform: capitalize; } #breadcrumb .breadcrumbList { margin: 0; padding: 0; text-transform: capitalize; } #breadcrumb .breadcrumbList .active, #breadcrumb .breadcrumbList .active a { color: #999; } #breadcrumb .breadcrumbList .divider { color: #CCC; padding: 0 5px; } #breadcrumb .breadcrumbPrevious { background: transparent url('../../images/product/leftArrow.png') no-repeat 0 4px; margin: 0 5px 0 0; padding: 0 0 0 8px; } #breadcrumb .breadcrumbNext { background: transparent url('../../images/product/rightArrow.png') no-repeat 100% 4px; margin: 0; padding: 0 9px 0 0; } /* PERSONALISED RECENT SEARCHES (start) */ #keywordSearchForm {position: relative;} #recentSearches { background: #fff; border: 1px solid #ccc; /*ff2cac*/ border-top: none; display: none; right: 63px; position: absolute; top: 46px; width: 307px; z-index: 50; } #recentSearches ul li {display: block} #recentSearches .searchHistoryHeading { border-bottom: 1px solid #ccc; clear: both; height: 30px; } #recentSearches .searchHistoryHeading h4 { float: left; margin: 10px 10px 10px 6px; padding: 0; width: 50%; } #recentSearches .searchHistoryHeading #recentSearchesDelete_all { float: right; margin: 10px 7px 0 0; } #recentSearches .searchHistoryHeading .clearSearchItem { float: right; font-weight: normal; margin: 8px 5px 0 0; } #recentSearches .searchHistoryHeading .clearSearchItem:hover {background: #fff;} #recentSearches .searchHistory { clear: both; overflow: hidden; } #recentSearches .searchHistory .searchItemRow { clear: both; padding-bottom: 3px; position: relative; } #recentSearches .searchHistory .searchItem { background: none; color: #999; font-weight: bold; border: 0; padding: 3px 6px; width: 284px; text-align: left; } #recentSearches .searchHistory .searchItemRow .clearSingleSearchItemWrap{ display: inline; margin-left: 5px; } #recentSearches .searchHistory .searchItem:hover { background: #666; color: #fff; text-decoration: none; } #recentSearches .searchHistory .clearSearchItem { position: absolute; } #recentSearches .searchItemRow .remove { padding: 3px 6px; } #recentSearches .searchItemRow .remove:hover { background: #666; color: #fff; text-decoration: none; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){ #recentSearches .searchHistory .searchItem {padding: 6px 10px; width: 322px;} #recentSearches .searchHistory .clearSearchItem:hover .removeText {display: none; padding: 6px 10px;} #recentSearches .searchHistory .removeX {padding: 6px 9px 6px 10px;} } /* PERSONALISED RECENT SEARCHES (end) */ /* Top Navigation */ #navWrap.newNav{height:36px;margin: 1px 0} .newNav #topNav{display:table;height:36px;list-style:none;margin:0;overflow:hidden;padding:0;position:absolute;text-align:center;width:960px;font-size:11px;} .newNav #topNav a{background-color:#E1E1E1;border-right:1px solid #FFF;color:#000;display:table-cell;outline:0;text-decoration:none;vertical-align:middle;font-size:11px;} .newNav #topNav a:last-child{border:0} #navWrap.newNav .topNavMenu{z-index:20;background-color:#FFF;border:1px solid #999;border-width:0 1px 1px;display:none;overflow:hidden;padding:20px 15px 15px;position:relative;top:36px} #navWrap.newNav .topNavMenu.active{display:block} #navWrap.newNav h3{font-size:14px;font-weight:normal;margin:0 0 10px} #navWrap.newNav .last{margin:0 0 20px} .topNavMenu a{color:#333;display:block;line-height:18px;text-decoration:none} #navWrap.newNav .topNavViewAll, #navWrap.newNav .topNavClose{background-color:#EEE;border-bottom:3px solid #DDD;font-size:14px;margin:10px 0 0;padding:10px 0;width:99%} #navWrap.newNav.topNavTablet .topNavViewAll, #navWrap.newNav.topNavTablet .topNavClose{display:block;width:49%} #navWrap.newNav .topNavViewAll{clear:left;color:#DE0084;float:left;padding-left:1%} #navWrap.newNav .topNavClose{color:#333;display:none;float:right;padding-right:1%;text-align:right} .newNav .topNavMenu a:hover{text-decoration:underline} .newNav .topNavCol{float:left;width:25%} .newNav .topNavMenu .topNavImg{position:absolute;bottom:71px;right:15px} .newNav .topNavMenu .topNavImg img{border:0} /* IE7 */ #navWrap.newNav table{border:0 none;border-spacing:0;border-collapse:collapse;height:36px;margin:0;width:100%} #navWrap.newNav td{background-color:#E1E1E1;border:0 none;cursor:pointer;border-right:1px solid #FFF;padding:0} #navWrap.newNav td a{background-color:#E1E1E1;border:0;color:#333;display:block;text-align:center;text-decoration:none;zoom:1} #navWrap.newNav td:hover, #navWrap.newNav td:hover a{background-color:#FF2CAC;color:#FFF} /* Gaming Example */ .newNav #menuGaming .topNavCol{position:relative;z-index:1} .newNav .topNavImgGaming{z-index:0}/**************/ /* Old Navigation */ /**************/ #header #navWrap { height: 36px; width: 960px; } .ie6 #header {margin-top: 30px;} #header ul#topNav a { outline: none; } /*************/ /* Primary UL*/ /*************/ #header ul#topNav { /* entire nav */ float: left; font-family: Arial, Verdana; list-style: none; padding: 0; position: relative; } #header ul#topNav li { /* individual nav elements */ display: block; float: left; text-align: center; width:72px; } #header ul#topNav li p { font-weight: 300; margin: 0; } #header ul#topNav li p a { font-weight: bold; text-decoration: none; margin: 0; } .ie6 #header ul#topNav li p a, .ie7 #header ul#topNav li p a { background-color: #4c4c4c; } :root #header ul#topNav li p a { filter: none\9; } #header ul#topNav li:hover p a { background: #fff; color: #000; filter: none; text-shadow: none; top: -10px; } #header ul#topNav li.hover p a { border-bottom: none; } .ie7 #header ul#topNav li:hover p a {color: #000} /* IE7 hack */ /**********************/ /* Current page state */ /**********************/ #header ul#topNav li.selected p a { background: #111; border: solid #000; border-width: 2px 2px 1px 2px; color: #fff; filter: none \9; margin: 0; padding: 10px 15px 11px 15px; } #header ul#topNav li.selected ul.categoryList {margin-top: -14px;} noindex:-o-prefocus, #header ul#topNav li.selected ul.categoryList {margin-top: 0;} /* Opera hack */ #header ul#topNav li.selected:hover p a { background: #fff; border-bottom-width: 2px; color: #000; padding-bottom: 10px; } *+html #header ul#topNav li.selected:hover p a {color: #000;} /****************/ /* Secondary UL */ /****************/ #header ul#topNav li ul.categoryList { /* dropdown menu - hidden */ background: #fff; border: solid #333; border-width: 0px 2px 2px 2px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-box-shadow: 0px 3px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 3px 3px rgba(50, 50, 50, 0.75); box-shadow: 0px 3px 3px rgba(50, 50, 50, 0.75); display: none; float: left; left: 1px; margin: 10px 0 20px 0; padding-bottom: 10px; padding-top: 10px; position: absolute; width: 915px; z-index: 20; } #header ul#topNav li.selected ul.categoryList {margin: -2px 0 20px 0;} noindex:-o-prefocus, #header ul#topNav li ul.categoryList { /* Opera hack */ margin-top: 0; } #header ul#topNav li.hover ul.categoryList { /* Makes the dropdown visible */ display: block; left: 0px; padding-right: 1px; text-transform: capitalize; } /**************/ /* Categories */ /**************/ #header ul#topNav li ul li { margin: -2px 15px 0 0px; text-align: left; width: 24%; } #header ul#topNav li ul li.categoryFirstCol {margin-left: -24px;} #header ul#topNav li ul li.seeAll { clear: both; height: auto; margin-left: -20px; width: 100%; } #header ul#topNav li ul li.closeNav {display: none} #header ul#topNav li ul li a { color: #fff; text-decoration: none; } #header ul#topNav li ul li a:hover { color: #fff; text-decoration: underline; } #header ul#topNav li ul li h2 { /* Category heading */ color: #000; font-size: 12px; font-weight: bold; padding: 5px; } #header ul#topNav li ul li.seeAll h2 { /* Category heading */ position: relative; } #header ul#topNav li ul li h2 .seeAllText { position: absolute; top: 5px; } #header ul#topNav li ul li a { color: #fff; text-decoration: none; } #header ul#topNav li ul li a:hover { color: #fff; text-decoration: underline; } #header ul#topNav li ul li ul { /* Category list */ border: none; -webkit-box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.0); -moz-box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.0); box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.0); display: block; float: none; margin: -5px 5px 10px 5px; padding: 0; position: relative; width: 95%; } #header ul#topNav li ul li ul:hover {margin-top: -5px;} #header ul#topNav li ul li ul li { /* Category list item */ display: block; font-size: 12px; float: none; height: auto; line-height: 23px; margin: -2px 0 5px 0; width: 100%; } #header ul#topNav li ul li ul li.more { font-weight: 900; } #header ul#topNav li ul li ul li a { /* Category list item anchor */ color: #069; display: inline-block; text-decoration: none; margin-left: 20px; width: 93%; } #header ul#topNav li ul li ul li a:hover { color: #069; text-decoration: underline; } #header ul#topNav .divider { /* Required for Nav dropdown to ensure the categories stay in place */ width: 100%; } #header ul#topNav li ul li span { color: #000; font-size: 12px; font-weight: bold; padding: 5px; } #header ul#topNav li ul li span .seeAllText { position: absolute; top: 5px; } #header ul#topNav li ul li.seeAll span { position: relative; } /***********************/ /* Dynamic No dropdown */ /***********************/ /* brandsNav functionality for noDropdown - remove when class ".noDropdown" is added dynamically from JSP */ #header ul#topNav:hover li#brandsNav p a.lastLink { border-bottom: 2px solid #000; border-right: 2px solid #000; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; } #header ul#topNav:hover li#brandsNav.selected p a.lastLink {padding: 10px 15px 10px 15px;} /********/ /* iPad */ /********/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #header ul#topNav li ul li.seeAll { clear: none; display: block; margin: -2px 0 0 -20px; width: 92.5%; } #header ul#topNav li ul li.closeNav { display: block; height: auto; margin-left: 5px; width: auto; } #header ul#topNav li ul li.closeNav span { padding: 4px; position: relative; } #header ul#topNav li ul li.closeNav span .closeIcon { background: url(/assets/static/theme/images/global/icon-close-white.png) 40px 0 no-repeat; display: inline-block; height: 15px; padding: 0 5px 0 35px; width: 15px; } #header ul#topNav li ul li.closeNav span .closeText { position: absolute; top: 5px; left: 5px; } #header ul#topNav li ul.dn {display: none !important;} } #hoverBox { background: #BEE1F3; border: 1px solid #A1D6E1; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #069; display: none; font-size: 12px; line-height: 14px; padding: 6px 8px 8px; position: absolute; z-index: 3; } #hoverBox p { margin: 0; padding: 0; } #hoverBox p.hoverProductPrice { font-weight:bold; } #hoverBox .hoverPriceWas { text-decoration:line-through; color:#333; display:block; } #hoverBox .hoverPriceNow { display:block; color:#000; } #hoverBox .hoverPriceSave { color:#ff1010; display:block; } #hoverBox p.hoverAvailability { margin:3px 0; font-size:1.1em; line-height:1.3em; background-repeat:no-repeat; background-position:5px 50%; } #hoverBox p.hoverAvailability.available { background-image:url('../../images/icon-stock-available.gif'); padding-left:25px; } #hoverBox p.hoverAvailability.lowStock { background-image:url('../../images/icon-stock-low.gif'); padding-left:25px; } #hoverBox p.hoverAvailability.soldOut { background-image:url('../../images/icon-stock-sold-out.gif'); padding-left:25px; } #hoverBox p.hoverAvailability.invalid { background-image:url('../../images/icon-stock-invalid.gif'); padding-left:25px; } #hoverBox .hoverWarranty { display:block; padding:0 5px; } #hoverBox .contractType { font-weight:bold; } /* ********** */ /* Pagination */ /* ********** */ #main .pagination { float: left; text-align: center; width: 438px; } #main .pagination ul { border-radius: 3px; display: inline-block; *display: inline; line-height: 18px; list-style: disc outside none; margin: 0 auto; padding: 0; text-align: center; zoom: 1; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #main .pagination li { display: inline; } #main .pagination a { background: #EEE; background: -moz-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#DCDCDC)); background: -webkit-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -o-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -ms-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: linear-gradient(to bottom, #FAFAFA 0%, #DCDCDC 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#DCDCDC',GradientType=0 ); border: 1px solid #CCC; border-color: #CCC #CCC #AAA; border-radius: 3px; box-shadow: 0 0 1px #FFF inset; color: #333; display: block; float: left; height: 25px; line-height: 24px; margin: 0 0 0 6px; outline: none; padding: 0 8px; text-decoration: none; text-shadow: 0 1px 0 #FFF; width: 14px; } #main .pagination a:hover { background: #EFEFEF; background: -moz-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F0F0F0), color-stop(100%,#E6E6E6)); background: -webkit-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -o-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: -ms-linear-gradient(top, #F0F0F0 0%, #E6E6E6 100%); background: linear-gradient(to bottom, #F0F0F0 0%, #E6E6E6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#E6E6E6',GradientType=0 ); border-color: #BBB #BBB #999; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFF inset; } #main .pagination .active a { background: -moz-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C8C8C8), color-stop(100%,#E6E6E6)); background: -webkit-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -o-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -ms-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: linear-gradient(to bottom, #C8C8C8 0%, #E6E6E6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8C8C8', endColorstr='#E6E6E6',GradientType=0 ); border-color: #888 #AAA #CCC; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFF; color: #333; } #main .pagination .disabled a { color: #999; cursor: default; } #main .pagination .disabled a:hover { background-color: #FFF; } #main .pagination .paginationPrevious, #main .pagination .paginationNext { font: normal 26px Arial; line-height: 24px; padding: 0; text-align: center; width: 30px; } #main .gap span { border: 0 none; float: left; line-height: 27px; padding: 0 4px 0 10px; text-decoration: none; } /* Pagination buttons */ #main .pagination .button { background: #EEE; background: -moz-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#DCDCDC)); background: -webkit-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -o-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: -ms-linear-gradient(top, #FAFAFA 0%, #DCDCDC 100%); background: linear-gradient(to bottom, #FAFAFA 0%, #DCDCDC 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#DCDCDC',GradientType=0 ); border: 1px solid #DCDCDC; border-color: #CCC #CCC #AAA; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 -50px #FFFFFF inset; color: #333333; display: block; float: left; font-weight: normal; height: 27px; line-height: 24px; margin: 0 0 0 6px; padding: 0 8px; text-decoration: none; text-shadow: 1px 1px 0 #FFFFFF; width: 30px; } #main .pagination a.button { padding: 0; height: 25px; } #main .pagination .button.paginationPrevious, #main .pagination .button.paginationNext { border-color: #CCC; font: bold 18px Arial; padding: 0 0 6px; text-align: center; width: 34px; } #main .pagination .button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf; } #main .pagination .active .button{ background: -moz-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C8C8C8), color-stop(100%,#E6E6E6)); background: -webkit-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -o-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: -ms-linear-gradient(top, #C8C8C8 0%, #E6E6E6 100%); background: linear-gradient(to bottom, #C8C8C8 0%, #E6E6E6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8C8C8', endColorstr='#E6E6E6',GradientType=0 ); border-color: #888 #AAA; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFF; color: #333; } #main .pagination .disabled .button { border-color: #ccc;} /* ******************* */ /* checkoutProgressBar */ /* ******************* */ #checkoutProgressBar { background-color: #DFE0DB; border: 1px solid #CCC; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; clear: both; margin: 15px 0 30px 0; } #checkoutProgressBar ol { border-bottom: 5px solid #AEAEAE; border-radius: 0 0 9px 9px; -moz-border-radius: 0 0 9px 9px; -webkit-border-bottom-left-radius: 9px; -webkit-border-bottom-right-radius: 9px; list-style-type: none; margin: 0; padding-left: 0; position: relative; z-index: 1; } #checkoutProgressBar li { float: left; padding: 10px 0; width: 185px; } #checkoutProgressBar li p { border-right: 1px solid #CCC; border-left: 1px solid #FFF; font-size: 18px; font-weight: bold; margin: 0; padding: 0 10px 0 10px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } #checkoutProgressBar li p .desc { display: block; font-size: 12px; font-weight: normal; padding: 5px 0 0 20px; } #checkoutProgressBar li.first { border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -webkit-border-bottom-left-radius: 6px; } #checkoutProgressBar li.first p { border-left: none; } #checkoutProgressBar li.last p { border-right: none; } #checkoutProgressBar li.complete { border-bottom: 5px solid #090; margin-bottom: -5px; position: relative; z-index: 2; } #checkoutProgressBar li.complete p { color: #777; } #checkoutProgressBar li.selected { background-color: #666; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin: -6px -1px -11px -1px; position: relative; z-index: 3; } #checkoutProgressBar li.selected p { border: none; color: #FFF; padding-top: 5px; padding-bottom: 11px; padding-left: 10px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } /* * In Internet Explorer, The"border-style: dashed" will never be * rendered unless "(width * 5) >= border-width" is true. * Since "width" is set to "0", the "dashed-border" remains * invisible to the user, which renders the border just like how * "border-color: transparent" renders. */ #checkoutProgressBar li.selected .arrow { border-color: #666 transparent transparent; border-style: solid dashed dashed; border-width: 15px; bottom: -29px; height: 0; left: 20px; position: absolute; width: 0; z-index: 5003; } /* *************** */ /* Checkout Asides */ /* *************** */ #aside .checkoutAside { background-color: #EFEFEA; border: 1px solid #CCC; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; margin: 10px 0; padding: 10px; zoom: 1; } #aside .checkoutAside h3 { font-size: 12px; margin: 0 0 10px 0; } /*******************/ /* Choose Location */ /*******************/ #collectPlusSelect #chooseLocation #chooseLocationText { border-bottom: 1px solid #CCC; margin-bottom: 15px; padding-bottom: 15px; } #collectPlusSelect #chooseLocation label, #collectPlusSelect #chooseLocation input { display: block; } #collectPlusSelect #chooseLocation input.textInput { width: 75px; } #collectPlusSelect #chooseLocation fieldset { clear: both; margin-bottom: 10px; } #collectPlusSelect #chooseLocation fieldset .successIcon { display: none; } #collectPlusSelect #chooseLocation #nearestLocations { clear: both; padding-top: 25px; width: 100%; } #collectPlusSelect #chooseLocation #nearestLocationsList { background: #FFF; border: 1px solid #CCC; float: left; height: 350px; overflow: auto; padding-left: 10px; width: 215px; } .ie7 #collectPlusSelect #chooseLocation #nearestLocationsList { width: 219px; } #collectPlusSelect #chooseLocation .error #nearestLocationsList { border: 2px solid #AD2E2C; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 348px; width: 213px; } .ie7 #collectPlusSelect #chooseLocation #nearestLocationsList { width: 217px; } #collectPlusSelect #chooseLocation #nearestLocationsList ul { list-style: none; margin: 0; padding: 0; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems { margin: 5px 0 0 0; padding-left: 0; padding-right: 10px; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.pointItem { border-bottom: 1px solid #CCC; line-height: 16px; padding: 10px 5px; } .ie7 #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems ul.pointInfo { float: left; } .ie7 #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.pointItem { float: left; width: 180px; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.selected { } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li:last-child { border: 0; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.pointItem .letterIcon { float: left; margin: 0 7px 35px 0; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.pointItem .radio { float: left; margin-right: 7px; } #collectPlusSelect #chooseLocation #nearestLocationsList ul.pointItems li.pointItem label { cursor: pointer; font-weight: bold; margin: 0; } /*******/ /* Map */ /*******/ #collectPlusSelect #chooseLocation #nearestLocationsMap { border: 1px solid #CCC; float: right; height: 350px; width: 67%; } #map_canvas .moreInfo h4, #map_canvas .moreInfo h5 { font-size: 12px; margin: 0 0 5px 0; } #map_canvas .moreInfo h4 { font-size: 14px; margin: 0 0 5px 0; } #map_canvas .moreInfo ul { list-style: none; margin-top: 0; padding: 0; } #map_canvas .moreInfo ul li { line-height: 16px; overflow: hidden; } #map_canvas .moreInfo .openingTimes .label, #map_canvas .moreInfo .openingTimes .value { float: left; } #map_canvas .moreInfo .openingTimes .label { width: 60px; } /* ************ */ /* Address Book */ /* ************ */ .myAccount .formSection fieldset { padding: 0; } /* My Address Book Page */ #myAddressBook ul, #myAddressBook li { list-style: none; padding: 0; margin: 0; } #myAddressBook #addressListContainer { clear: both; float: left; margin-top: 20px; width: 100%; } #myAddressBook #addressList .contact { background: #F5F5F5 url('../../images/global/address-bg.gif') 218px 0 repeat-y; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: block; line-height: 16px; overflow: hidden; margin-bottom: 20px; position: relative; } #myAddressBook #addressList .contact .address { float: left; margin: 10px 0 10px 10px; min-height: 80px; padding-right: 10px; width: 200px; word-wrap: break-word; } #myAddressBook #addressList .head { font-size: 16px; font-weight: bold; padding-bottom: 10px; } #myAddressBook #addressList #homeAddress .address .head { background: url('../../images/global/home-logo.png') no-repeat 120px -1px transparent; } #myAddressBook #addressList .contact .details { float: left; margin: 10px 0; padding-left: 10px; width: 400px; word-wrap: break-word; } #myAddressBook input.deleteAddressbtn { background: url("../../images/global/icon-blue-remove.png") no-repeat scroll right center transparent; padding: 0 20px 0 0; position: absolute; top: 10px; right: 10px; } #myAddressBook .editAddressDetails { background: #F5F5F5; border-top: 2px solid #FFF; clear: both; padding: 10px; } #myAddressBook .editAddressDetails .button { float: right; } .ie6 #myAddressBook .editAddressDetails .button { margin-right: 30px !important; } .ie7 #myAddressBook .editAddressDetails { padding-top: 5px; } .ie6 #myAddressBook #addressList .contact .address, .ie6 #myAddressBook #addressList .contact .details { margin-left: 5px; position: relative; } .ie6 #myAddressBook .editAddressDetails { padding: 5px 0 10px 0; } .ie6 #myAddressBook .editAddressDetails .editAddressDetailsbtn { margin-left: -20px; } .ie6 #myAddressBook .editAddressDetails .button { display: inline; margin-right: 10px; position: relative; } /* Address Book - Add Contact Details Page */ #addAddressDetails .formSection .row { clear: both; float: left; line-height: 16px; margin-bottom: 0; padding: 0; width: 100%; } /* Add New Address */ .myAccount #addNewAddress .formFooter { margin-top: 20px; } .myAccount #addNewAddress .formFooter #cancelBtn { margin-left: 0; } /* **************************** Home Address Section **************************** */ .formSection #addressLookupFieldset, .formSection #addressLookupFieldset span { width: 100%; } .formSection #addressLookupSection { margin-bottom: 0; } .formSection #addressLookupSection .message { margin-bottom: 0; } .formSection #addressLookupSection p:first-child { margin-bottom: 2px; } .formSection #addressLookupSection #registerAddressLookup, .formSection #addressLookupSection #confirmAddressLookup { clear: both; display: block; width: 100%; } /* Confirmed/Previous Address State */ .formSection #confirmedAddress, .formSection #previousAddress { display: inline-block; float: left; margin-bottom: 0; padding-right: 20px; } .formSection #changeAddress { clear: both; display: inline-block; float: left; margin-bottom: 0; padding: 5px 0 15px 0; } .formSection #changeAddress a { text-decoration: none; } .formSection #addressNotFound { margin-bottom: 0; } .formSection #addressLookupSection { clear: both; } .formSection #addressLookupSection:first-child p { margin-bottom: 5px; padding-top: 10px; } #addressNotFoundSectionContainer { clear: both; padding-top: 15px; } #mannualEntryInfoSection .message { margin: 0 0 15px; } #checkDetails { clear: both; margin-bottom: 0; padding-bottom: 15px; } #selectAddressText { margin-bottom: 5px; } #confirmAddress { margin-right: 10px; } #registerAddressLookup.error { border: 2px solid #B94A48; border-radius: 3px; } #serviceErrorSection .message { margin: 0 0 20px 0; } /* Address Not Found Section */ #addressNotFoundSection { background-color: #FFF; border: 1px solid #CCC; border-radius: 3px; clear: both; height: 100px; width: 100%; } #addressNotFoundSection p { margin-top: 0; padding-top: 35px; text-align: center; vertical-align: middle; } .formSection #addressLookupSection p { clear: both; margin-top: 10px; } /* ******************** */ /* Payment Options Info */ /* ******************** */ .paymentOptionsInfo .paymentOptionsHeader { font-size: 16px; margin: 5px 0 15px 10px; } .paymentOptionsInfo .tabsContent h2 { font-weight: normal; font-size: 12px; margin: 0 0 10px 0; } .paymentOptionsInfo .tabsContent h2 strong { font-size: 18px; } .paymentOptionsInfo .tabsContent ul { padding-left: 20px; } .paymentOptionsInfo .tabsContent ul li { margin-bottom: 5px; } .paymentOptionsInfo .items { border-bottom: 2px solid #CCC; border-top: 2px solid #CCC; border-collapse: separate; margin: 10px 0; } .paymentOptionsInfo .item td { background-color: #EFEFEA; border-top: 1px solid #FFF; border-bottom: 1px solid #CCC; padding: 10px; vertical-align: top; } .paymentOptionsInfo .itemFirst td { border-top: none; } .paymentOptionsInfo .itemLast td { border-bottom: none; } .paymentOptionsInfo .item .itemQuantity { color: #666; width: 25px; } .paymentOptionsInfo .item .itemQuantity .times { font-size: 16px; vertical-align: bottom; line-height: 10px; } .paymentOptionsInfo .item .itemTitle, .paymentOptionsInfo .item .itemLowestTermPrice, .paymentOptionsInfo .item .itemWeeklyPrice, .paymentOptionsInfo .item .itemServiceChargeMessage { line-height: 14px; } .paymentOptionsInfo .item .itemTitle { margin-right: 10px; padding-left: 0; } .paymentOptionsInfo .item .itemTitle .itemPrice { display: block; margin-top: 2px; } .paymentOptionsInfo .item .itemLowestTermPrice { border-left: 1px dotted #CCC; border-right: 1px dotted #CCC; margin-right: 10px; text-align: center; width: 80px; } .paymentOptionsInfo .item .itemLowestTermPrice .itemLowestTermWeeks { font-weight: normal; } .paymentOptionsInfo .item .itemWeeklyPrice { padding-top: 20px; text-align: center; width: 70px; } .paymentOptionsInfo .item .itemWeeklyPrice strong { display: block; font-size: 18px; } .paymentOptionsInfo .item .itemServiceChargeMessage { border-left: 1px dotted #CCC; text-align: center; width: 225px; } /* ******************** */ /* paymentOptionsAll */ /* ******************** */ .paymentOptionsInfo .paymentOptionsAll { border-top: none; } .paymentOptionsInfo .paymentOptionsAll th { border-bottom: 2px solid #CCC; font-weight: normal; padding: 10px; text-align: center; } .paymentOptionsInfo .paymentOptionsAll th .termVal { display: block; font-size: 14px; } .paymentOptionsAll td.itemPayTerm { border-left: 1px dotted #CCC; padding: 10px 5px; text-align: center; width: 65px; } .paymentOptionsAll td.itemPayTerm span { display: block; } .paymentOptionsAll td.itemPayTerm .itemTermPrice { font-weight: bold; margin-bottom: 5px; } .paymentOptionsAll td.itemPayTerm .itemTermApr { color: #666; font-weight: bold; } /* BNPL */ .paymentOptionsInfo .paymentOptionsTabs .tabsContent #bnplTab .bnplTabHead { list-style: none; padding-left: 0; } .paymentOptionsInfo .paymentOptionsTabs .tabsContent #bnplTab h5 { margin: 0 0 15px 0; font-size: 14px; } /* ***** */ /* popus */ /* arrow positions popupATL top left popupATM top middle popupATR top right popupART right top popupARM right middle popupARB right bottom popupABL top left popupABM top middle popupABR top right popupALT left top popupALM left middle popupALB left bottom */ /* ***** */ .popupPositioner { display: inline; position: relative; } .popup { bottom: 100%; left: -105px; margin-bottom: 25px; padding-right: 5px; position: absolute; width: 300px; } .popupABL, .popupABM, .popupABR { bottom: auto; margin-bottom: 0; margin-top: 45px; top: 0; } .oldie .popupABL .popup, .oldie .popupABM .popup, .oldie .popupABR .popup { margin-top: 35px; } .popupBody { background-color: #FFF; border: 1px solid #CCC; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); padding: 10px; } .popupClose { background: transparent url('../../images/global/icon-close.png') no-repeat center center; display: block; height: 30px; position: absolute; right: -6px; top: -14px; width: 30px; } .popupContent { background: transparent; margin: 0; } .popup .arrow { bottom: -24px; height: 25px; left: 125px; position: absolute; overflow: hidden; width: 46px; z-index: 9998; } .popupABL .arrow, .popupABM .arrow, .popupABR .arrow { bottom: auto; top: -24px; } .popupATL .arrow, .popupABL .arrow { left: 15px; } .popupATR .arrow, .popupABR .arrow { left: auto; right: 30px; } .popupALT .arrow, .popupALM .arrow, .popupALB .arrow, .popupART .arrow, .popupARM .arrow, .popupARB .arrow { height: 50px; top: 20px; } .popupALT .arrow, .popupALM .arrow, .popupALB .arrow { left: -45px; right: auto; } .popupART .arrow, .popupARM .arrow, .popupARB .arrow { left: auto; right: -40px; } .popupALM .arrow, .popupARM .arrow { top: 35%; } .popupALB .arrow, .popupARB .arrow { bottom:10px; top: auto; } .popup .arrow div { display: none; } .popup .arrow div.a1 { background-color: #FFF; border: 1px solid #CCC; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5); display: block; height: 28px; margin: -20px 0 0 10px; transform: scaleY(1.2) rotate(45deg); -moz-transform: scaleY(1.2) rotate(45deg); -ms-transform: scaleY(1.2) rotate(45deg); -webkit-transform: scaleY(1.2) rotate(45deg); width: 28px; } .popupABL .arrow div.a1, .popupABM .arrow div.a1, .popupABR .arrow div.a1 { margin-top: 15px; } .popupALT .arrow div.a1, .popupALM .arrow div.a1, .popupALB .arrow div.a1, .popupART .arrow div.a1, .popupARM .arrow div.a1, .popupARB .arrow div.a1 { margin: 10px 0 0 -15px; transform: scaleY(0.6) rotate(45deg); -moz-transform: scaleY(0.6) rotate(45deg); -ms-transform: scaleY(0.6) rotate(45deg); -webkit-transform: scaleY(0.6) rotate(45deg); } .popupALT .arrow div.a1, .popupALM .arrow div.a1, .popupALB .arrow div.a1 { margin-left: 30px; } .oldie .popup .arrow { bottom: -11px; left: 145px; height: 12px; width: 13px; } .oldie .popupALT .arrow, .oldie .popupALM .arrow, .oldie .popupALB .arrow, .oldie .popupART .arrow, .oldie .popupARM .arrow, .oldie .popupARB .arrow { height: 13px; width: 12px; } .oldie .popupABL .arrow, .oldie .popupABM .arrow, .oldie .popupABR .arrow { bottom: auto; top: -11px; } .oldie .popupALT .arrow, .oldie .popupALM .arrow, .oldie .popupALB .arrow { left: -11px; right: auto; } .oldie .popupALM .arrow, .oldie .popupARM .arrow { top: 40%; } .oldie .popupART .arrow, .oldie .popupARM .arrow, .oldie .popupARB .arrow { left: auto; right: -6px; } .oldie .popupATL .arrow, .oldie .popupABL .arrow { left: 15px; right: auto; } .oldie .popupATM .arrow, .oldie .popupABM .arrow { left: 145px; right: auto; } .oldie .popupATR .arrow, .oldie .popupABR .arrow { left: auto; right: 30px; } .oldie .popupALB .arrow, .oldie .popupARB .arrow { bottom: 10px; } .oldie .popup .arrow div { background-color: #FFF; border-left: 1px solid #CCC; border-right: 1px solid #CCC; display: block; font-size: 0; line-height: 0; position: absolute; width: 15px; } .oldie .popup .arrow div.a7 { width: 11px; height: 1px; top: 0; left: 0; right: auto; } .oldie .popup .arrow div.a6 { width: 9px; height: 2px; top: 1px; left: 1px; right: auto; } .oldie .popup .arrow div.a5 { width: 7px; height: 2px; top: 3px; left: 2px; right: auto; } .oldie .popup .arrow div.a4 { width: 5px; height: 2px; top: 5px; left: 3px; right: auto; } .oldie .popup .arrow div.a3 { width: 3px; height: 2px; top: 7px; left: 4px; right: auto; } .oldie .popup .arrow div.a2 { width: 1px; height: 2px; top: 9px; left: 5px; right: auto; } .oldie .popup .arrow div.a1 { width: 1px; height: 1px; top: 11px; left: 6px; right: auto; margin: 0; background-color: #CCC; border: 0; } .oldie .popupABL .arrow div.a7, .oldie .popupABM .arrow div.a7, .oldie .popupABR .arrow div.a7 { top: 11px; } .oldie .popupABL .arrow div.a6, .oldie .popupABM .arrow div.a6, .oldie .popupABR .arrow div.a6 { top: 9px; } .oldie .popupABL .arrow div.a5, .oldie .popupABM .arrow div.a5, .oldie .popupABR .arrow div.a5 { top: 7px; } .oldie .popupABL .arrow div.a4, .oldie .popupABM .arrow div.a4, .oldie .popupABR .arrow div.a4 { top: 5px; } .oldie .popupABL .arrow div.a3, .oldie .popupABM .arrow div.a3, .oldie .popupABR .arrow div.a3 { top: 3px; } .oldie .popupABL .arrow div.a2, .oldie .popupABM .arrow div.a2, .oldie .popupABR .arrow div.a2 { top: 1px; } .oldie .popupABL .arrow div.a1, .oldie .popupABM .arrow div.a1, .oldie .popupABR .arrow div.a1 { top: 0; } .oldie .popupALT .arrow div, .oldie .popupALM .arrow div, .oldie .popupALB .arrow div, .oldie .popupART .arrow div, .oldie .popupARM .arrow div, .oldie .popupARB .arrow div { border-left: none; border-right: none; border-bottom: 1px solid #CCC; border-top: 1px solid #CCC; height: 13px; width: 12px; } .oldie .popupALT .arrow div.a7, .oldie .popupALM .arrow div.a7, .oldie .popupALB .arrow div.a7, .oldie .popupART .arrow div.a7, .oldie .popupARM .arrow div.a7, .oldie .popupARB .arrow div.a7 { height: 11px; left: auto; right: 11px; top: 0; width: 1px; } .oldie .popupALT .arrow div.a6, .oldie .popupALM .arrow div.a6, .oldie .popupALB .arrow div.a6, .oldie .popupART .arrow div.a6, .oldie .popupARM .arrow div.a6, .oldie .popupARB .arrow div.a6 { height: 9px; left: auto; right: 9px; top: 1px; width: 2px; } .oldie .popupALT .arrow div.a5, .oldie .popupALM .arrow div.a5, .oldie .popupALB .arrow div.a5, .oldie .popupART .arrow div.a5, .oldie .popupARM .arrow div.a5, .oldie .popupARB .arrow div.a5 { height: 7px; left: auto; right: 7px; top: 2px; width: 2px; } .oldie .popupALT .arrow div.a4, .oldie .popupALM .arrow div.a4, .oldie .popupALB .arrow div.a4, .oldie .popupART .arrow div.a4, .oldie .popupARM .arrow div.a4, .oldie .popupARB .arrow div.a4 { height: 5px; left: auto; right: 5px; top: 3px; width: 2px; } .oldie .popupALT .arrow div.a3, .oldie .popupALM .arrow div.a3, .oldie .popupALB .arrow div.a3, .oldie .popupART .arrow div.a3, .oldie .popupARM .arrow div.a3, .oldie .popupARB .arrow div.a3 { height: 3px; left: auto; right: 3px; top: 4px; width: 2px; } .oldie .popupALT .arrow div.a2, .oldie .popupALM .arrow div.a2, .oldie .popupALB .arrow div.a2, .oldie .popupART .arrow div.a2, .oldie .popupARM .arrow div.a2, .oldie .popupARB .arrow div.a2 { height: 1px; left: auto; right: 1px; top: 5px; width: 2px; } .oldie .popupALT .arrow div.a1, .oldie .popupALM .arrow div.a1, .oldie .popupALB .arrow div.a1, .oldie .popupART .arrow div.a1, .oldie .popupARM .arrow div.a1, .oldie .popupARB .arrow div.a1 { height: 1px; left: auto; right: 0; top: 6px; width: 1px; } .oldie .popupALT .arrow div.a7, .oldie .popupALM .arrow div.a7, .oldie .popupALB .arrow div.a7 { right: 0; } .oldie .popupALT .arrow div.a6, .oldie .popupALM .arrow div.a6, .oldie .popupALB .arrow div.a6 { right: 1px; } .oldie .popupALT .arrow div.a5, .oldie .popupALM .arrow div.a5, .oldie .popupALB .arrow div.a5 { right: 3px; } .oldie .popupALT .arrow div.a4, .oldie .popupALM .arrow div.a4, .oldie .popupALB .arrow div.a4 { right: 5px; } .oldie .popupALT .arrow div.a3, .oldie .popupALM .arrow div.a3, .oldie .popupALB .arrow div.a3 { right: 7px; } .oldie .popupALT .arrow div.a2, .oldie .popupALM .arrow div.a2, .oldie .popupALB .arrow div.a2 { right: 9px; } .oldie .popupALT .arrow div.a1, .oldie .popupALM .arrow div.a1, .oldie .popupALB .arrow div.a1 { right: 11px; } #main .item .itemQuantity .linkButton { margin: 0 20px; } #main .item .itemQuantity .update { margin-bottom: 10px; } #main .item .confirm { cursor: default; position: absolute; z-index: 5000; right: -223px; margin: 0; text-align: left; top: 0px; } #main .item .confirmMessage { background-color: #fff7cb; border: 1px solid #e0d16a; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #8c7c10; line-height: 14px; margin: -2px 0 0 0; padding: 6px 8px 6px 8px; position: relative; width: 200px; z-index: 900; } #main .item .confirmMessage p { margin: 0 0 5px 0; } #main .item .confirmArrow { width: 10px; height: 16px; z-index: 5003; cursor: pointer; position: absolute; top: 5px; left: -9px; } #main .item .confirmArrow div { background-color: #fff7cb; border-top: 1px solid #e0d16a; border-bottom: 1px solid #e0d16a; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05); height: 15px; display: block; font-size: 0; width: 2px; line-height: 0; position: absolute; } #main .item .confirmArrow .a7 { box-shadow: 0 0 0; height: 11px; right: 0; top: 0; width: 1px; } #main .item .confirmArrow .a6 { height: 9px; right: 1px; top: 1px; } #main .item .confirmArrow .a5 { height: 7px; right: 3px; top: 2px; } #main .item .confirmArrow .a4 { height: 5px; right: 5px; top: 3px; } #main .item .confirmArrow .a3 { height: 3px; right: 7px; top: 4px; } #main .item .confirmArrow .a2 { height: 1px; right: 9px; top: 5px; } #main .item .confirmArrow .a1 { background-color: #CC0; border: 0; height: 1px; right: 11px; top: 6px; width: 1px; } .shareitems { float: right; margin-right: -17px; } .shareitems .shareitem { background: #FFF url('../../images/global/share-icons.png') no-repeat 0 0; float: left; margin-right: 5px; height: 25px; width: 60px; } .shareitems .shareitem.facebook {background: none} .shareitems .shareitem .fb-send { float: right; margin-right: 2px; } .shareitems .text { float: left; margin: 6px 5px 0 0; width: auto; } #wishList h4 .shareitems, #wishListTable .shareitems { display: block; } #wishListTable .shareitems { float: right; margin-right: 2px; border: 0 !important; } #wishList .shareitems .shareitem.email, #wishListTable .shareitems .shareitem.email { background-image: url("//s3-eu-west-1.amazonaws.com/sdghs-ecomm-aws-ctl/ecommdesign/desktop/static/images/global/shareBtnEmail.png") !important; background-repeat: no-repeat; width: 58px !important; height: 20px; border: 0 !important; } #wishListTable .shareitems .shareitem .fb-send, #wishList .shareitems .shareitem.facebook { background-position: auto !important; width: 55px !important; float: left; } #wishListTable .shareitems .shareitem, #wishList .shareitems .shareitem { width: auto !important; background-image: none !important; } #wishListTable .shareitems .shareitem .fb-send , #wishList .shareitems .shareitem .fb-send { float: left !important; } #wishListTable .shareitems .fb_iframe_widget iframe, #wishList .shareitems .fb_iframe_widget iframe { width: 55px; height: 20px; } #termsConditions h3 { margin: 15px 0; } #termsConditions li { margin-bottom: 10px; line-height: 16px; } /* ******** */ /* Site map */ /* ******** */ #navigation #sitemapZoneNav, #sitemap ul { list-style: none; margin: 0; padding: 0; } #navigation #sitemapZoneNav .sitemapZoneNavItem a, #sitemap #sitemapZoneHeader a, #sitemap h2.sitemapLevel1 a { color: #333; } #navigation #sitemapZoneNav .sitemapZoneNavItem { line-height: 22px; } #navigation #sitemapZoneNav .sitemapZoneNavItem .active { font-weight: bold; } #sitemap #sitemapZoneHeader { color: #333; border-bottom: 2px solid #CCCCCC; font-size: 20px; margin: 0 0 15px; padding: 0 0 10px; } #sitemap h2.sitemapLevel1 { font-size: 12px; margin: 20px 0 10px; } #sitemap li.sitemapLevel2 {display: inline; } #typeAheadResultsForm { position: absolute; z-index: 10; margin: 0; padding: 0; } #typeAheadResultsForm ul { position: relative; top: 1px; left: -1px; font-size: 12px; margin: 0; padding: 0; max-height: 244px; overflow: hidden; border: 1px solid #3f3f3f; width: 295px; background: #FFF; } #typeAheadResultsForm ul li { background: white; padding: 5px; margin: 0; display: block; } #typeAheadResultsForm ul li:hover { background: #3366CC; text-decoration: none; cursor: pointer; } #typeAheadResultsForm ul li a { color: #3366CC; text-decoration: none; margin: 0; padding: 0; display: block; width: 100%; } #typeAheadResultsForm ul li:hover a { color: white; text-decoration: none; display: block; width: 100%; margin: 0; padding: 0; } #header { z-index: 1; } #headerContent { z-index: 2; } .relatedPanel { clear: left; position: relative; } .lihover { background: #3366CC !important; text-decoration: none; } .lihover a { color: white !important; display: block; width: 100%; } #header form input { font-size: 12px; } /* Search Tooltip */ .toolTipWrapper { color: #FFFFFF; display: block; font-size: 12px; left: 387px; position: absolute; top: 6px; width: 204px; z-index: 1; } .toolTipTop { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #f2f2f2; height: 0; left: 73px; line-height: 14px; position: absolute; top: 36px; width: 0; z-index: 2; } .toolTipMid { background-color: #f2f2f2; border: 1px solid #CCCCCC; border-radius: 6px; color: #333333; font-weight: normal; padding: 5px 7px 7px; position: absolute; top: 11px; } #gift {margin-bottom: 10px;} /* HEADER */ #gift #giftHeader { background: #DFE0DB; border: 1px solid #CCC; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; margin-bottom: 5px; padding: 10px; } #gift h2 {display: inline;} #gift #presentIcon { background: url("../../images/commerce/gift-icon.png"); display: inline-block; height: 29px; margin-left: 50px; width: 25px; } #gift .showMsg { display: block; margin-bottom: 0; width: auto; } #gift #giftBody1, #gift #giftBody2, #gift #giftBody3, #gift #giftBody4, #gift #giftBody5 {position: relative} #gift #giftBody2, #gift #giftBody3, #gift #giftBody4, #gift #giftBody5 {display: none} /* BODY */ #gift .giftWrap { float: left; width: 230px; } #gift .giftDobWrap {width: 280px;} #gift .giftElement { background: #EFEFEA; border: 1px solid #CCC; overflow: hidden; padding: 10px; } #gift .giftElement.disabled {position: relative;} #gift .giftWrap label { font-weight: bold; text-align: center; } #gift .giftWhoForWrap label {visibility: hidden;} #gift .giftDobWrap label {margin-left: -45px;} #gift .giftRefWrap span { font-style: italic; font-weight: normal; } #gift .giftWhoFor {width: 185px;} #gift .giftRefWrap input {width: 222px;} #gift .giftDobWrap .dateContainer { display: inline; float: none; } #gift .giftDobWrap .dobFieldset { float: left; width: 21%; } #gift .giftDobWrap .monthFieldset {width: 37%;} #gift .giftDobWrap .dateContainer label {display: none;} #gift .giftClear { float: right; margin-top: 10px; } #gift .giftClear a {color: #666;} #gift #saveGift {float: right} #gift #optedOut {clear: both} #gift #disabledCover {background: #ccc;width: 100%;height: 100%;position: absolute;top: 0;opacity: .5;} /* FOOTER */ #gift #giftFooter { clear: both; overflow: hidden; } #gift .button.disabled {opacity: .5} #gift .button.disabled:hover {background-position: 0 0} #gift .button.disabled:hover span.secondaryButtonEnd, #gift .button.disabled span.secondaryButtonEnd:hover {background-position: 100% 0;} #gift .button.disabled a { cursor: default; pointer-events: none; } #myDates { float: right; height: 338px; margin-left: 15px; width: 190px; } #myDates .noSavedDates {height: 285px;} #myDates #addNewDate { bottom: 10px; position: absolute; width: 190px; } #myDates .date { margin-top: 10px; } #myDates .date p { padding: 5px 8px; margin: 0; } #myDates .date .a123 {text-transform: lowercase;} #myDates .date .dateUserReference { background: #ccc; float: left; text-transform: capitalize; width: 100px; } #myDates .date .dateDate { background: #F5F5F5; float: right; text-align: center; width: 58px; } #myDates .date .shopForGifts { clear: both; padding-right: 0; text-align: right; } #myDates #amendDates { bottom: 10px; position: absolute; width: 190px; } #gift .messageSuccess p {float: left;width: 500px;} #gift #viewMyDatesWrap { float: right; } #gift #existingViewMyDatesWrap { float: right; margin-top: -30px; } #myDatesEdit #datesInner {height: 285px;} #myDatesEdit .date { margin-top: 10px; } #myDatesEdit .date p { padding: 5px 8px; margin: 0; } #myDatesEdit .date .dateUserReference { background: #ccc; float: left; text-transform: capitalize; width: 100px; } #myDatesEdit .date .dateDate { background: #F5F5F5; float: right; text-align: center; width: 78px; } #myDatesEdit .date .shopForGifts { clear: both; padding-right: 0; text-align: right; } #myDatesEdit #storedDatesWrap {margin-top: 20px;} #myDatesEdit .myDatesEdit .storedDate { clear: both; margin-top: 12px; overflow: hidden; } #myDatesEdit .myDatesEdit .storedDate p { clear: none; float: left; padding: 8px; } #myDatesEdit .myDatesEdit .storedDate .deleteDate { clear: none; float: left; padding: 0px; } #myDatesEdit .myDatesEdit .storedDate .dateUserReference { background: #ddd; font-weight: bold; width: 480px; } #myDatesEdit .myDatesEdit .storedDate .deleteDate { font-size: 14px; font-weight: bold; } #myDatesEdit .myDatesEdit .storedDate .deleteDate input { border: 1px solid #fff; color: #000; padding: 5px 9px; font-weight: bold; } #myDatesEdit .myDatesEdit .storedDate .deleteDate input:hover { background: #ccc; border: 1px solid #333; text-decoration: none; } #myDatesEdit .myDatesEdit #addNewDate { background: #f5f5f5; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top: 25px; overflow: hidden; padding: 10px; } #myDatesEdit .myDatesEdit .newDateSection { float: left; margin-right: 15px; width: 235px; } #myDatesEdit .myDatesEdit #newDateReference {margin-right: 0;} #myDatesEdit .myDatesEdit .newDateNumber { background: #ddd; border: 1px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; float: left; font-size: 14px; font-weight: bold; padding: 6px 8px; } #myDatesEdit .myDatesEdit .newDateSection:hover .newDateNumber {background: #333; color: #fff;} #myDatesEdit .myDatesEdit .newDatefield { float: left; margin-left: 10px; width: 198px; } #myDatesEdit .myDatesEdit .newDatefield h4 { border-bottom: 2px solid #aaa; margin-bottom: 10px; margin-top: 10px; padding-bottom: 5px; } #myDatesEdit .myDatesEdit .newDatefield select { padding: 3px; width: 100%; } #myDatesEdit .myDatesEdit #newDateDOB select { margin-right: 2px; width: 31%; } #myDatesEdit .myDatesEdit #newDateReference .refExample { font-size: 10px; font-weight: normal; } #myDatesEdit .myDatesEdit #newDateReference input { padding: 3px; width: 95%; } #myDatesEdit #addNewDateWrap { float: right; margin: 10px 20px; }