/* ------------------------------------------------------- Color key ------------------------------------------------------- #4165A5: Bluish purple (such as for the borders between Tier 1 top-nav items) #333: Dark gray (such as for the primary text color) #00A6D6: Light blue (such as for the item-count in the header area) #D1EFF8; Very light blue (such as the footer background) Themes: see wiki [[MothercareSiteRefresh#Colour_Scheme]] */ /* General rules */ body { background-color: #FFF; color: #333; font-size: 62.5%; line-height: 1.3; font-style: normal; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } div#wrapper { width: 985px; margin: 0 auto; } a { color: #000; } h1, h2, h3, h4 { font-weight: bold; /* default color scheme -- see themes below */ color: #00A6D6; margin:0; padding:0 10px; } h1 { text-transform:lowercase; } h2 { font-size: 1.6em; text-transform:lowercase; } h3 { font-size: 1.2em; } h4 { font-size: 1.0em; } img { border: 0; } ul { list-style:none; } form { margin: 0; padding: 0; } input, select, textarea { font-family: Arial, Helvetica, sans-serif; vertical-align: middle; } /*Header slot positioning*/ div#topSlots { font-size: 1.1em; padding: 10px 0 0 0; } div#top-1 { float: left; } div#top-2, div#top-5 { float: right; width: 36.78em; /*405px*/ } div#top-3, div#top-4 { padding-left: 325px; } * html div#top-3 {height: 1%; padding-left: 42px;} div#top-4 { float: left; padding: 8px 0 0px 45px; } * html div#top-4 {width: 23.15em;} div#top-5 { padding: 18px 0 5px 0; } div#top-7 { clear: both; } /*#top-8 and #top-9 styles combine to form the gradient (and its rounded corners) under the breadcrumb and gurgle line, and push div#top-8 and div#top-9 onto the same line. The first widget that sits in here (currently div.siteStripe) needs contextual styles for when it's a child of div#top-8 to complete the effect (negative top margin of the gradient height, an empty span for the left rounded corner). See div#top-8 div.siteStripe later in this file. */ div#top-8 { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/header_sitestripeGradient.jpg) repeat-x; padding-top: 28px; /*gradient height*/ } div#top-9 { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/header_siteStripeCorner.gif) no-repeat -5px -5px; min-height: 1.4em; } * html div#top-9 {height: 1.4em;} /*Quick links: Homepage | Store finder ...*/ div.dynamicMenu10 ul { float: right; margin: 0; padding: 0 0 1px 0; overflow: hidden; line-height: .97em; text-transform: lowercase; } div.dynamicMenu10 li { float: left; padding: 0 5px 0 5px; } div.dynamicMenu10 a, div.dynamicMenu10 a:visited, div.dynamicMenu10 a:active { text-decoration: none; color: #333; } /*sign in / register menu*/ div.signInMenu { line-height: 1; padding-left:1px; } div.signInMenu.signedIn { padding-left:0; padding-bottom:1px; } div.signInMenu a, div.signInMenu a:visited, div.signInMenu a:hover, div.signInMenu a:active { color: #333; } div.signInMenu p { margin:0; padding:0; } div.signInMenu span.welcomeText { display:none; } div.signInMenu.signedIn span.welcomeText { display:block; padding-bottom: 1px; text-transform:lowercase; padding-bottom: 0; } div.signInMenu span.customerName, div.signInMenu a.signinLink { float:left; } div.signInMenu.signedIn span.customerName { font-weight: bold; } div.signInMenu a.signinLink { padding-right:5px; border-right: 1px solid; } div.signInMenu a.signoutLink, div.signInMenu a.registerLink { padding-left:5px; } div.signInMenu.signedIn a.signoutLink { padding-left:3px; } * html div.signInMenu.signedIn a.signoutLink { padding-left:0; } /* =================================================================================== Header Area =================================================================================== */ /* =================================================================================== Top Navigation =================================================================================== */ /* Anchors within the top-nav menus */ div.menu ul li a { color: #FFF; /* white */ /* The "!important" is necessary for getting IE6 to cooperate */ text-decoration: none; cursor: pointer; /* sometimes IE gets confused and needs a reminder */ } div.menu { background: url(../navigation/primary-navigation-background.gif) repeat-y; margin-bottom: 0.5em; /* Leave a little space between this and the site stripe */ } /* Common properties for unordered lists and list items within the menu */ div.menu ul, div.menu ul li { margin: 0; padding: 0; } div.menu ul {} /* Top-level (Tier 1) items */ div.menu ul li { float: left; display: inline; /* This helps IE with floated elements */ text-transform: lowercase; position: relative; /* This helps make sure that the drop-down menus appear above other elements that may be absolutely positioned */ z-index: 10000; font-size: 1.18em; /* Equivalent to 13px at the default browser size */ } /* ...but don't apply those properties to children list items */ div.menu ul li li { float: none; display: block; position: static; z-index: auto; font-size: 1.0em; width: auto; } /* Arithemetic -- total width should add up to 985px: levelOne1: 100 levelOne2: 100 levelOne3: 80 levelOne4: 65 levelOne5: 80 levelOne6: 90 levelOne7: 80 levelOne8: 80 levelOne9: 70 levelOne10: 70 levelOne11: 90 levelOne12: 80 -------------- Total: 985 */ /* levelOne1: "maternity", levelOne2: "pushchairs" */ div.menu ul li.levelOne1, div.menu ul li.levelOne2 { width: 100px; } /* levelOne3: "nursery", levelOne5: "clothing", levelOne7: "feeding", levelOne8: "safety & care", levelOne12: "offers" */ div.menu ul li.levelOne3, div.menu ul li.levelOne5, div.menu ul li.levelOne7, div.menu ul li.levelOne8, div.menu ul li.levelOne12 { width: 80px; } /* "car & travel" */ div.menu ul li.levelOne4 { width: 65px; } /* levelOne6: "bathing & changing", levelOne11: "parenting experts" */ div.menu ul li.levelOne6 { width: 90px; } div.menu ul li.levelOne11 { width: 85px; } /* levelOne9: "kids at home", levelOne10: "toys & gifts" */ div.menu ul li.levelOne9, div.menu ul li.levelOne10 { width: 70px; } /* This would correspond to "checklists" or other items "past the end" of the list */ div.menu ul li.levelOne13, div.menu ul li.levelOne14 { display: none; } /* Top-level (Tier 1) links (and their immediate children) */ div.menu ul li a, div.menu ul li a span, div.menu ul li span span { display: block; font-weight: bold; font-size: 1.0em; margin: 0; } /* ... but don't apply those properties to nested span elements */ div.menu ul li ul li span { display: inline; letter-spacing: normal; } /* Properties solely for Top-level (Tier 1) links */ div.menu ul li a { height: 42px; background: url(../navigation/primary-navigation-divider.gif) no-repeat 0px 3px; text-decoration: none; } /* ... but those properties don't apply to children anchors */ div.menu ul li ul li a { line-height: 1.1; letter-spacing: normal; height: auto; background-image: none; } /* The first item doesn't get a left-side background image */ div.menu ul li.levelOne1 a { background-image: none; } div.menu ul li a span { height: 100%; /* This allows bits of the background-color on the anchor to show through (kinda like borders, but without shifting the text around */ margin-left: 2px; margin-right: 2px; } /* ... but don't apply those properties to nested span elements */ div.menu ul li a span span, div.menu ul li ul li a span { height: auto; margin-left: 0px; margin-right: 0px; } /* Vertically center the Tier 1 items (JavaScript also helps out a bit here for vertically-centering multi-line items) */ div.menu ul li a span span { /* I'd normally define this in ems, but that wouldn't help much in this case since the menubar itself has a fixed height. */ padding-top: 13px; /* This just makes sure that IE leaves enough room for descenders */ padding-bottom: 1px; } /* The two-line items get less padding: * levelOne4: "car seats" * levelOne9: "kids bedroom" * levelOne10: "toys & gifts" * levelOne11: "parenting advice" */ div.menu ul li.levelOne4 a span span, div.menu ul li.levelOne9 a span span, div.menu ul li.levelOne10 a span span, div.menu ul li.levelOne11 a span span, div.menu ul li.levelOne12 a span span { padding-top: 6px; } div.menu ul li a span, div.menu ul li a span span { text-align: center; } /* ... but don't apply those properties to nested Tier-2 spans */ div.menu ul li ul li a span { text-align: left; } div.menu ul li a span span { line-height: 1.05; } /* ------------------------------------------------------- Hover/focus variants for the drop-down items ------------------------------------------------------- */ div.menu ul li a { /* This is pretty much for IE's sake -- if it doesn't get this (default) value, it ends up reflowing the content (improperly) on a:hover */ background-color: transparent; /* This allows the hovered-anchor to reach over a bit and cover up the divider-image in the next list-item over. (And, yes, I'd normally apply this property to [selector]:hover, but IE didn't play nicely with that. Yar, more reflow business. */ margin-right: -2px; } /* .. but don't apply those properties to nested anchors */ div.menu ul li ul li a { margin-right: 0; } div.menu ul li a span { /* This just compensates for the negative margin-right in the previous rule (so that the text doesn't end up shifting */ padding-right: 2px; } /* ... but don't apply those properties to nested Tier-2 level spans */ div.menu ul li a span span, div.menu ul li ul li a span { padding-right: 0px; } /* ... but don't apply those negative margin bits to the last item */ div.menu ul li.levelOne12 a { margin-right: 0px; } div.menu ul li.levelOne12 a span { padding-right: 0px; } div.menu ul li:hover, div.menu ul li.sfHover { /* This puts the hovered list item slightly above adjacent list-items, allowing the border-effect (via the background-color below) to appear above the adjacent list-item's divider-image. */ z-index: 20000; } /* ... but don't apply that to nested list items */ div.menu ul li ul li:hover, div.menu ul li ul li.sfHover { z-index: auto; } div.menu ul li a:hover, div.menu ul li a:focus, div.menu ul li:hover a, div.menu ul li.sfHover a { /* What ends up happening here (with the background-color bits) is that, in combination with some on-hover padding-left and padding-right for this element's immediate child, the color ends up acting as a border (but without shifting anything around, as a border would tend to do). */ background: #4165A5 none; /* Bluish purple */ } /* Only IE6 sees this */ * html div.menu ul li a:hover, * html div.menu ul li a:focus, * html div.menu ul li:hover a, * html div.menu ul li.sfHover a { /* This element already has hasLayout, but IE6 behaves a bit better with position:relative as well */ position: relative; } /* ... but don't apply those properties to nested anchor elements */ div.menu ul li ul li a:hover, div.menu ul li ul li a:focus, div.menu ul li:hover ul li a, div.menu ul li.sfHover ul li a, div.menu ul li ul li:hover a, div.menu ul li ul li.sfHover a { right: 0px; background-color: transparent; } div.menu ul li a:hover span, div.menu ul li a:focus span, div.menu ul li:hover a span, div.menu ul li.sfHover a span { background: url(../navigation/primary-navigation-item-hover-background.gif) repeat-x; } /* ... but don't apply those properties to nested Tier-2 level spans */ div.menu ul li a:hover span span, div.menu ul li a:focus span span, div.menu ul li:hover a span span, div.menu ul li.sfHover a span span, div.menu ul li ul li a:hover span, div.menu ul li ul li a:focus span, div.menu ul li:hover ul li a span, div.menu ul li.sfHover ul li a span, div.menu ul li ul li:hover a span, div.menu ul li ul li.sfHover a span { background-image: none; } /* ------------------------------------------------------- Second-level lists (the actual bits that drop down) ------------------------------------------------------- */ /* Containers for the second-level lists -- these are the bits that drop down */ div.menu ul li div.levelTwoContainer { margin: 0; padding: 0; top: 40px; left: -90%; position: absolute; width: 329px; /* This allows the drop-down bits to slightly "tuck under" their parent Tier 1 items, allowing the bottom of the Tier 1 item to overlay a portion of the top of the drop down jobbie */ z-index: -1; /* using right instead of display:none to hide menus because display:none isn't read by screen readers */ margin-left: -1000em; } div.menu ul li div.levelTwoContainer div.afterLevelTwoList { padding-bottom: 20px; /* Leave room for the background image */ background: url(../navigation/primary-navigation-dropdown-bottom.png) no-repeat; } /* These rules trigger hasLayout in IE6 and IE7, respectively: http://www.satzansatz.de/cssd/onhavinglayout.html#prop */ * html div.menu ul li div.levelTwoContainer div.afterLevelTwoList { height: 1%; } *+html div.menu ul li div.levelTwoContainer div.afterLevelTwoList { min-height: 0; } /* Specialty positioning/backgrounds for some of the div.levelTwoContainer bits */ /* "maternity" (currently the left-most item) */ div.menu ul li.levelOne1 div.levelTwoContainer { left: -4px; } /* "maternity" (currently the left-most item) */ div.menu ul li.levelOne1 div.levelTwoContainer ul { background-image: url(../navigation/primary-navigation-left-dropdown-top.png); } /* "toys & gifts" */ div.menu ul li.levelOne10 div.levelTwoContainer { left: -150%; } /* "parenting experts" */ div.menu ul li.levelOne11 div.levelTwoContainer { left: -175%; } /* "offers" (currently the right-most item) */ div.menu ul li.levelOne12 div.levelTwoContainer { left: -243px; } /* "offers" (currently the right-most item) */ div.menu ul li.levelOne12 div.levelTwoContainer ul { background-image: url(../navigation/primary-navigation-right-dropdown-top.png); } div.menu ul li ul { font-size: 0.9230em; /* Equivalent to 12px at the default font size */ padding: 10px 20px 20px 20px; background: url(../navigation/primary-navigation-dropdown-top.png) no-repeat top left; } /* Give hasLayout to IE6 */ * html div.menu ul li ul { height: 1%; } /* Give hasLayout to IE7 */ *+html div.menu ul li ul { min-height: 0; } div.menu ul li ul li a { line-height: 1.2; } /* These rules trigger hasLayout in IE6 and IE7, respectively: http://www.satzansatz.de/cssd/onhavinglayout.html#prop */ * html div.menu ul li ul li a { height: 1%; } *+html div.menu ul li ul li a { min-height: 0; } div.menu ul li ul li a:hover, div.menu ul li ul li a:focus { text-decoration: underline; } div.menu ul li ul li a span { margin: 0; padding: 0; font-size: 1.0em; } /* Nested lists under hovered list items */ div.menu ul li:hover div.levelTwoContainer, div.menu ul li.sfHover div.levelTwoContainer, div.menu ul li.sfHover a.sffocus div.levelTwoContainer { display: block; /* This is just for the sake of the iframe */ /* This is normally "-1000em", so setting it to "0em" unhides the menu */ margin-left: 0em; } /* ------------------------------------------------------- Fail-safe properties in case JavaScript is disabled ------------------------------------------------------- */ /* Allow for tabbing-through the anchors in the drop-down list, even if JavaScript isn't around to help */ ul li div.levelTwoContainer li a:focus { margin-left: 1085em; width: 329px; background-color: #042F74; /* Dark blue */ } /* ... but disable those just-in-case properties if JavaScript is indeed enabled */ body.javascript-enabled ul li div.levelTwoContainer li a:focus { margin-left: 0; width: auto; background-color: inherit; } /* Mini cart */ div.cartMini { line-height: 1; } div.cartMini strong.itemCount { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/header_basket.png) no-repeat 50% 50%; font-size: 12px; font-weight: bold; padding: 0px; text-decoration: none; } div.cartMini strong.itemCount span { display: table-cell; text-align: center; width: 10px; /*min-width since it's a table-cell: width of bag image*/ } * html div.cartMini strong.itemCount span {display: inline-block;} *+html div.cartMini strong.itemCount span {display: inline-block;} div.cartMini form input { vertical-align: middle; } /*"site stripe": gurgle note*/ div.siteStripe { float: right; padding: 4px 8px 12px; } div.siteStripe p { padding: 0; margin: 0; } div.siteStripe img { margin: 0 0 0 4px; vertical-align: middle; } /*contextual styles for when this is inside div#top-8, so it rounds the corner of the site stripe gradient*/ div#top-8 div.siteStripe { margin-top: -28px; /*-28px -> negative gradient height on div#top-8*/ position: relative; } div#top-8 div.siteStripe span.hook1 { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/header_siteStripeCorner.gif) no-repeat 1px -5px; position: absolute; right: 0; top: 0; width: 6px; height: 6px; } /*breadcrumbs*/ #browseBreadcrumbs { font-size: 1.2em; text-transform: lowercase; padding-bottom: 15px; } #browseBreadcrumbs a, #browseBreadcrumbs a:visited, #browseBreadcrumbs a:active { color: #000; } #browseBreadcrumbs span.carat { font-size: 0.9em; vertical-align: middle; } /*adjust for IE6-7*/ * html #browseBreadcrumbs span.carat {vertical-align: -0.1em;} *+html #browseBreadcrumbs span.carat {vertical-align: -0.1em;} /* SEARCH NAV */ .searchNav { } .searchNav form { text-align: right; } .searchNav label { color: #00A6D6; /*light blue*/ font-size: 1.18em; font-weight: bold; margin: 0 2px; vertical-align: middle; } .searchNav select, .searchNav input.textInput { font-size:1.09em; padding:0 0 0 2px; } .searchNav input.textInput { width: 10em; } .searchNav select#searchNodeID { margin-left:1px; } /* Footer Links */ div#footerSlots { clear: both; } div#footer-1 { color: #666; font-size: 1.1em; line-height: 1.4em; padding: 10px 0 20px 10px; margin: 0 0 15px 0; } div#footer-1 div.category { float: left; width: 19.99%; } div#footer-1 a, div#footer-1 a:visited, div#footer-1 a:active { color: #666; text-decoration: none; } div#footer-1 img { vertical-align: top; margin: 3px 0 0 3px; } div#footer-1 ul, #footer-1 h4 { margin: 0; padding: 0 10px 0 0; } div#footer-1 h4 { font-size: 1.1em; } div.companyInfo { line-height: 1; text-align: center; padding: 0 0 1em 0; } div.companyInfo { font-family: Verdana, Arial, Helvetica, sans-serif; } div.companyInfo p { margin: 0 0 1em 0; padding: 0; } div.companyInfo span.copy { margin-right: 2px; } /*browse layouts*/ #middleSlots { font-size: 1.1em; clear: both; } /* TODO: adjust H tag font sizes here, not scattered out */ /* #middleSlots h1 {} #middleSlots h2 {} #middleSlots h3 {} #middleSlots h4 {} */ /*#secondary and #primary are meant to replace #left and #right. #secondary is a smaller column anchored to the left or right side (e.g. left nav area), while #primary is larger and contains more substantial content.*/ /*leftnav / center content defaults*/ div#secondary { float: left; width: 189px; overflow: hidden; padding-bottom: 12px; } div#primary { float: right; /*floated so clearing left doesn't clear the left nav*/ width: 786px; /*985 wrapper - 189 secondary - 10px padding*/ } /*general column structure. A column row and 1 or more full-width row(s) above it (often used as headers) are wrapped by div.group-x, where x is the number of equal-width columns it contains (e.g. div.group-3 means 3 33.3% width columns). Each slot meant to be a column gets the class "col". Slots without the col class are full-width and unfloated. */ div.group { /*a row*/ clear: both; } div.group div.col { float: left; padding-right: 10px; overflow: hidden; /*disallow float drop*/ } div.group div.col.lastCol { padding-right: 0; } div.group.group-2 div.col { width: 388px; } div.group.group-3 div.col { width: 255px; } div.group.group-4 div.col { width: 189px; } /*fix IE 6 and 7 margin doubling when editorial widgets placed in floated cols*/ * html div.group.group-2, * html div.group.group-3, * html div.group.group-4 {display: inline;} *+html div.group.group-2, *+html div.group.group-3, *+html div.group.group-4 {display: inline;} /*particular layouts*/ body.layout-001 div#primary { float: left; width: 786px; } body.layout-001 div#secondary { float: right; width: 189px; } body.layout-003 div.finder, body.layout-004 div.finder { float: right; width: 60%; } body.layout-003 div.finderNeighbor, body.layout-004 div.finderNeighbor { margin-right: 60%; } body.layout-006 div#secondary { float: right; width: 321px; } body.layout-006 div#primary { width: 653px; float: left; } body.layout-006 div.group.group-2 div.col { width: 321px; padding-right: 11px; } body.layout-006 div.group.group-2 div.col.lastCol { padding-right: 0; } body.layout-009 div.group.group-2a div.main { /*70/30 group split*/ float: left; width: 587px; } body.layout-009 div.group.group-2a div.secondary { /*70/30 group split*/ float: right; width: 189px; } body.layout-010 div#secondary { /*3-col left*/ float: left; width: 189px; } body.layout-010 div#secondary-2 { /*3-col right*/ float: right; width: 189px; padding-bottom: 12px; } body.layout-010 div#primary { /*3-col center*/ float: left; padding-left: 10px; width: 587px; /*985 wrapper - .layout-010 #secondary - .layout010 #secondary-2 - left padding*/ } body.layout-010 div.group.group-2 div.col { width: 288px; } body.layout-010 div.group.group-3 div.col { width: 189px; } body.layout-010 div.group.group-4 div.col { width: 139px; /*(587px - (10px * 3 (gutter)))/4 = 139 R1*/ } /* left nav on browse pages, etc. */ div.navMenu { font-size:1.09em; line-height:1.4; padding-bottom: 8px; } div.navMenu a { text-decoration:none; } div.navMenu h4.editorialHeading, div.navMenu h2 { font-size: 1.5em; color:#1F70D6; font-family:Arial,Helvetica,sans-serif; font-size:21px; font-weight:bold; line-height:22px; margin:0; padding:0 0 18px; } div.navMenu h4.editorialHeading { border-bottom:1px solid #1F70D6; } div.navMenu h2.h2level3, div.navMenu h2.h2level3 a { font-weight: normal; color: #666666; float: left; margin:0; padding-left: 0; padding-bottom: 0; line-height:16px; } div.navMenu div.navItemsWrapper h4 { border-bottom:1px solid #1F70D6; clear:both; color:#1F70D6; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; letter-spacing:-0.5px; line-height:18px; margin:0; padding:0 0 4px; } div.navMenu span.current { color:#00A6D6; } div.navMenu ul { margin:0; padding:0; } div.navMenu ul.ladder { clear:both; float:left; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:12px 0 30px; } div.navMenu li { margin: 0; margin-top: 5px; } div.navMenu li li { font-size:0.91em; margin-top:3px; } div.navMenu li li li { font-size:1.0em; line-height:1.2; margin-top:2px; margin:2px 0; } /* styling for 404/500 message */ div.weAreSorry { color: #009; text-align: center; margin:1em auto 5em; line-height:1.6; } div.weAreSorry { font-family: Verdana, Arial, Helvetica, sans-serif; } div.weAreSorry a { color: #333; } div.weAreSorry a:hover, div.weAreSorry a:focus { color: #00A6D6; } /* TODO use an h1 */ div.weAreSorryHeader { font-weight:bold; font-size:1.1em; } /* ********************************************* */ /* misc JavaScript enhancements */ .clickable { cursor:pointer; } /* ********************************************* */ /* Rather than attempt to make each class represent a separate * 'axis', this schema forms sort of a hierarchy: * .editorialPagelet -- can be used to refine widget * .puff ---- \ * .lozenge ---- \ * .freeform ---- refine editorialPagelet * And it's often unnecessary to include all the 'parent' classes; * for example the .widget class has been removed, since there are * currently no CSS attributes or JavaScript behaviors common to all * widgets. */ /* ************************************************** */ * html div.imageWidget img {margin: 0 0 -3px 0;} *+html div.imageWidget img {margin: 0 0 -3px 0;} div.flashWidget, div.editorialPagelet, div.imageWidget, div.boxWidgetContainer { padding: 0 0 20px 0; } div.editorialPagelet ul { list-style-type: disc; } #secondary div.flashWidget, #secondary div.imageWidget, #secondary div.editorialPagelet, #secondary div.boxWidgetContainer, #secondary-2 div.flashWidget, #secondary-2 div.imageWidget, #secondary-2 div.editorialPagelet, #secondary-2 div.boxWidgetContainer { padding: 0 0 8px 0; } /* Themes (color schemes) */ .theme_maternity .puff .widgetText { background-color:#D298CB; } /* ? */ .theme_pushchairs .puff .widgetText { background-color:#00A5CF; } .theme_nursery .puff .widgetText { background-color:#877065; } .theme_cartravel .puff .widgetText { background-color:#FF9933; } .theme_clothing .puff .widgetText { background-color:#990033; } .theme_bathing .puff .widgetText { background-color:#6B74B8; } .theme_feeding .puff .widgetText { background-color:#78A135; } .theme_safety .puff .widgetText { background-color:#65ADBA; } .theme_toys .puff .widgetText { background-color:#670167; } .theme_kids .puff .widgetText { background-color:#FAA61A; } .theme_parenting .puff .widgetText { background-color:#00A6D6; } .theme_offers .puff .widgetText { background-color:#A80532; } /* ************************************************** */ /* default / large */ div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_grey_1x142.jpg ); } div.theme_pushchairs div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_green_1x142.jpg ); } div.theme_clothing div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_yellow_1x142.jpg ); } div.theme_parenting div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_blue_1x142.jpg ); } /* medium */ div.col div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_grey_1x91.jpg ); } div.col div.theme_pushchairs div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_green_1x91.jpg ); } div.col div.theme_clothing div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_yellow_1x91.jpg ); } div.col div.theme_parenting div.lozenge, #secondary form.emailSignup div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_blue_1x91.jpg ); } /* small */ #secondary div.lozenge, #secondary-2 div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_grey_1x63.jpg ); } #secondary div.theme_pushchairs div.lozenge, #secondary-2 div.theme_pushchairs div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_green_1x63.jpg ); } #secondary div.theme_clothing div.lozenge, #secondary-2 div.theme_clothing div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_yellow_1x63.jpg ); } #secondary div.theme_parenting div.lozenge, #secondary-2 div.theme_parenting div.lozenge { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_blue_1x63.jpg ); } /* ************************************************** */ .theme_maternity h1, .theme_maternity h2, .theme_maternity h3, .theme_maternity h4, div.col .theme_maternity div.stripe h3 {color: #C26BB0;} .theme_maternity div.stripe{background: #C26BB0;} .theme_pushchairs h1, .theme_pushchairs h2, .theme_pushchairs h3, .theme_pushchairs h4, div.col .theme_pushchairs div.stripe h3 {color: #00A5CF;} .theme_pushchairs div.stripe{background: #00A5CF;} .theme_nursery h1, .theme_nursery h2, .theme_nursery h3, .theme_nursery h4, div.col .theme_nursery div.stripe h3 {color: #877065;} .theme_nursery div.stripe{background: #877065;} .theme_cartravel h1, .theme_cartravel h2, .theme_cartravel h3, .theme_cartravel h4, div.col .theme_cartravel div.stripe h3 {color: #FF9933;} .theme_cartravel div.stripe{background: #FF9933;} .theme_clothing h1, .theme_clothing h2, .theme_clothing h3, .theme_clothing h4, div.col .theme_clothing div.stripe h3 {color: #990033;} .theme_clothing div.stripe{background: #990033;} .theme_bathing h1, .theme_bathing h2, .theme_bathing h3, .theme_bathing h4, div.col .theme_bathing div.stripe h3 {color: #6B74B8;} .theme_bathing div.stripe{background: #6B74B8;} .theme_feeding h1, .theme_feeding h2, .theme_feeding h3, .theme_feeding h4, div.col .theme_feeding div.stripe h3 {color: #78A135;} .theme_feeding div.stripe{background: #78A135;} .theme_safety h1, .theme_safety h2, .theme_safety h3, .theme_safety h4, div.col .theme_safety div.stripe h3 {color: #65ADBA;} .theme_safety div.stripe{background-color: #65ADBA;} .theme_toys h1, .theme_toys h2, .theme_toys h3, .theme_toys h4, div.col .theme_toys div.stripe h3 {color: #670167;} .theme_toys div.stripe{background-color: #670167;} .theme_kids h1, .theme_kids h2, .theme_kids h3, .theme_kids h4, div.col .theme_kids div.stripe h3 {color: #FAA61A;} .theme_kids div.stripe{background-color: #FAA61A;} .theme_parenting h1, .theme_parenting h2, .theme_parenting h3, .theme_parenting h4, div.col .theme_parenting div.stripe h3 {color:#00A6D6;} .theme_parenting div.stripe{background-color: #00A6D6;} .theme_offers h1, .theme_offers h2, .theme_offers h3, .theme_offers h4, div.col .theme_offers div.stripe h3 {color: #A80532;} .theme_offers div.stripe{background-color: #A80532;} /* ************************************************** */ .puff h3 { font-size:1.63em; margin:0; padding:0; } .puff p { line-height: 1em; margin:0; padding:0; } /* ********************************************* */ div.puff { position:relative; width: 189px; padding-bottom: 0; margin-bottom: 20px; } .puff, .puff h3, .puff a { color:#FFF; } .puff .widgetText { font-weight:bold; } .puff h3 { padding: 5px 0 5px 10px; } .puff p { padding: 0 0 10px 10px; margin-right:15px; } /* this will be need to remove when we start supporting different size image in puff */ .puff img { height: 143px; } /* for animated UI enhancement */ .javascript-enabled .puff { height:17.75em; overflow:hidden; } .javascript-enabled .puff .widgetText { position:absolute; width:100%; left:0; } .javascript-enabled .puff h3 { padding-bottom: 23px; } .javascript-enabled .puff p { height: 4.18em; padding-bottom: 0; } .javascript-enabled .puff a.pointerLink { position:absolute; top:-1000px; } #secondary div.puff, #secondary-2 div.puff { margin-bottom: 8px; } /* ********************************************* */ div.lozenge, div.stripe { position:relative; background-repeat:repeat-x; background-position:bottom; min-height: 142px; padding: 0; margin-bottom: 20px; } * html div.lozenge {height: 142px;} div.lozenge img { position:absolute; top:0; left:6px; } div.lozenge .widgetText { margin: 0 6px 0 210px; } div.lozenge h3 { font-size:2.8em; margin-bottom:8px; padding:5px 0 0 0; } div.lozenge h3 img, div.stripe h3 img{ position:static; } div.lozenge p { font-size: 1.09em; margin:0; padding:0; display: inline; } *+html div.lozenge p {margin-right: 3px;} * html div.lozenge p {margin-right: 3px;} div.lozenge a { color:#333; } div.lozenge a:hover, div.lozenge a:focus, div.stripe a:hover, div.stripe a:focus { text-decoration:none; } /* medium */ div.col div.lozenge { min-height: 83px; } * html div.col div.lozenge {height: 83px;} div.col div.lozenge .widgetText { margin-left:111px; } div.col div.lozenge h3 { font-size: 1.8em; margin-bottom: 0px; } div.col div.lozenge p { font-size: 1.0em; line-height:1; } /* small */ #secondary div.lozenge, #secondary-2 div.lozenge { padding: 8px 0; margin: 0 0 8px 0; min-height: 47px; } * html #secondary div.lozenge, * html #secondary-2 div.lozenge {height:47px;} #secondary div.lozenge img, #secondary-2 div.lozenge img { top:8px; left:8px; } #secondary .lozenge .widgetText, #secondary-2 div.lozenge .widgetText { margin-left:63px; margin-right:8px; } #secondary div.lozenge h3, #secondary-2 div.lozenge h3 { font-size:1.27em; margin-bottom: 0px; } #secondary div.lozenge p, #secondary-2 div.lozenge p { font-size: 1.0em; line-height:1; } /* ********************************************* */ div.freeform { font-size: 1.09em } /*email signup hard-coded into layouts*/ #secondary form.emailSignup div.lozenge { padding: 8px; background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/icon_email_47x47.gif) no-repeat 8px 8px; } #secondary form.emailSignup div.lozenge p { padding: 0 0 8px 0; } #secondary form.emailSignup input.textInput { width: 140px; color: #666; font-size: 1em; } /** * BEGIN: Stripe Widget */ div.stripe { min-height: 142px; /** Note this is only for testing once live it will fill the slot **/ width: 100%; position: relative; } * html div.stripe {height: 142px;} div.col div.stripe{ min-height: 87px; position:relative; } * html div.col div.stripe {height: 87px;} div.col div.stripe { background: #faf4fa; } div.stripe img{ position:absolute; top:0; left:0; } div.stripe h3{ color: #fff; font-size:2.8em; margin-bottom:8px; padding:5px 0 0 0; } div.col div.stripe h3{ font-size: 1.8em; margin-bottom: 0; } div.stripe .widgetText{ margin: 0 8px 0 203px; } div.col div.stripe .widgetText{ margin-left: 130px } div.stripe .widgetText p{ font-size: 1.2em; margin: 0; } div.stripe .widgetText a, div.stripe .widgetText p{ color: #fff; } div.col div.stripe .widgetText p, div.col div.stripe .widgetText a{ color: #333; } /** * END: Stripe Widget */ /** * BEGIN: Product & Personalization Widget Elements * personalization widget elements begin div.recommendation... */ div.productScheduleableHorizontal div.productScheduleableItem, div.recommendationItems div.recommendationItem { background:transparent url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_grey_1x58.jpg) repeat-x scroll left bottom; position:relative; width:189px; float: left; display: inline-block; margin-left: 10px; } div.productScheduleableHorizontal div.firstScheduleableItem, div.recommendationItems div.firstRecommendationItem { margin-left: 0; } div.scheduleableItems, div.recommendationItems { position: relative; display: block; width: 100%; } div.productScheduleableVertical div.scheduleableItems{ background:#E2F5FA url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/assistant_189x59.gif) no-repeat scroll left bottom; padding:10px 0 60px 0; width:189px; } /** Product Widget for Horizontal layout **/ div.horizontalLayout { width:227px; } div.horizontalLayout .imageDisplay img { height:170px; width:110px; } div.horizontalLayout .imageDisplay { float: right; height:170px; width:110px; } div.horizontalLayout div.productScheduleableHorizontal div.detailsDisplay { font-size: 1.1em; padding: 0px; margin-left: 10px; margin-top: 8px; margin-bottom: 8px; height:154px; } div.horizontalLayout div.productScheduleableHorizontal div.detailsDisplay div.productBuyBox{ position:absolute; bottom:8px; } div.horizontalLayout .detailsDisplay div.title span { display:none; } div.horizontalLayout .detailsDisplay div.title a { text-decoration:none; font-family: Arial; font-size: 12px; live-height:15px; font-weight: normal; color:#333333; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem { background: none; width: 100%; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice { margin-bottom: 3px; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice .salePrice span{ width: 100%; font-size: 15px; display:inline-block; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice .salePrice{ width: 100%; font-family: Arial; font-size: 18px; live-height:18px; font-weight: bold; color:#e31937; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice .origPrice { width: 100%; font-family: Arial; font-size: 11px; font-weight: normal; color:#666666; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice .ourPrice { font-family: Arial; font-size: 18px; live-height:18px; font-weight: normal; color:#333333; } div.horizontalLayout div.productScheduleableHorizontal div.productScheduleableItem div.detailsDisplay div.productPrice .ourPrice span{ font-size: 15px; } div.horizontalLayout a div.buyNowImage,div.horizontalLayout a:hover div.buyNowImage { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/buynow_butt.gif) no-repeat scroll 0 0; height:20px; cursor:pointer; width:76px; } /** * Set up the corners */ div.scheduleableItems span.cornerBottomLeft, div.scheduleableItems span.cornerBottomRight, div.scheduleableItems span.cornerTopRight, div.scheduleableItems span.cornerTopLeft, div.recommendationItems span.cornerBottomLeft, div.recommendationItems span.cornerBottomRight, div.recommendationItems span.cornerTopRight, div.recommendationItems span.cornerTopLeft { background:transparent url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/corners/combined_white_6px.gif) no-repeat scroll 0 0; height:6px; overflow:hidden; position:absolute; width:6px; z-index:2; } /* * Hide the corners for opposing product widgets */ div.productScheduleableHorizontal span.cornerTopLeft, div.productScheduleableHorizontal span.cornerTopRight { display: none; } div.productScheduleableVertical span.cornerBottomLeft, div.productScheduleableVertical span.cornerBottomRight{ display: none; } div.scheduleableItems span.cornerBottomLeft, div.recommendationItem span.cornerBottomLeft { background-position:-5px 1px; bottom:0; left:0; } div.scheduleableItems span.cornerBottomRight, div.recommendationItem span.cornerBottomRight { background-position:1px 1px; bottom:0; right:0; } div.scheduleableItems span.cornerTopLeft, div.recommendationItems span.cornerTopLeft { background-position:-5px -5px; left:0; top:0; } div.scheduleableItems span.cornerTopRight, div.recommendationItems span.cornerTopRight { background-position:1px -5px; right:0; top:0; } /** * Rounding problems in IE6 - override the corner positions. */ * html div.scheduleableItems span.cornerBottomLeft, * html div.recommendationItems span.cornerBottomLeft {bottom:-1px;} * html div.scheduleableItems span.cornerBottomRight, * html div.recommendationItems span.cornerBottomRight {bottom:-1px;right:-1px;} * html div.scheduleableItems span.cornerTopRight, * html div.recommendationItems span.cornerTopRight{right:-1px;} /** * Image and detail display */ div.productScheduleableHorizontal div.detailsDisplay, div.recommendationItems div.detailsDisplay{ font-size: 1.1em; padding: 10px; } div.productScheduleableHorizontal div.header, div.productScheduleableVertical div.header { padding: 5px 0; } /** * If product price is reused then we can get rid of the selectors here */ div.productScheduleableItem div.productPrice .ourPrice, div.productScheduleableItem div.productPrice .origPrice, div.productScheduleableItem div.productPrice .salePrice, div.recommendationItem div.productPrice .ourPrice, div.recommendationItem div.productPrice .origPrice, div.recommendationItem div.productPrice .salePrice { clear: left; display: block; } div.productScheduleableItem div.productPrice .salePrice, div.recommendationItem div.productPrice .salePrice { font-weight: bold; color: #E10F62; } div.productScheduleableHorizontal div.pointerLink{ clear: both; } div.productScheduleableHorizontal div.pointerLink a{ background:transparent url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/bullets/right_arrow_bullet.gif) no-repeat scroll left center; padding-left:10px; display:block; text-decoration: none; text-transform: lowercase; position: relative; margin-top: 10px; } /** * Vertical display elements */ div.productScheduleableVertical div.productScheduleableItem{ font-size:1.2em; margin:0 0 10px 0; padding: 0 8px 8px 8px; position:relative; min-height: 79px; } * html div.productScheduleableVertical div.productScheduleableItem{height: 79px} div.productScheduleableVertical div.imageDisplay{ height: 79px; width: 66px; overflow: hidden; float: left; margin-right: 8px; display: inline; } div.productScheduleableVertical div.detailsDisplay div{ display:block; } /** * Don't clear the image to the left on vertical */ div.productScheduleableVertical div.productPrice .ourPrice, div.productScheduleableVertical div.productPrice .origPrice, div.productScheduleableVertical div.productPrice .salePrice { clear: none; } /** * END: Product Widget Elements */ /* ==================================================*/ .boxWidgetItems { font-size:12px; background-color:#f0f0f0; position:relative; padding: 10px 0 20px; } .boxWidgetItems a { text-decoration:none; } .boxWidgetItems ul { padding:0 10px; margin:0; } .boxWidgetItems li { display:block; } .boxWidgetItems li.indented { padding-left:11px; background: transparent url( https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/bullets/right_arrow_bullet.gif ) no-repeat left center; } /* ********************************************* */ /* CORNERS */ /* These are 'negative' corners -- foreground images * that cover the corners of the containing element * with the page background color. If the background * changes, this image must change as well. */ .puff span.top_left, .puff span.top_right, .puff span.bottom_left, .puff span.bottom_right, .lozenge span.top_left, .lozenge span.top_right, .lozenge span.bottom_left, .lozenge span.bottom_right, .stripe span.top_left, .stripe span.top_right, .stripe span.bottom_left, .stripe span.bottom_right, .boxWidgetItems span.top_left, .boxWidgetItems span.top_right, .boxWidgetItems span.bottom_left, .boxWidgetItems span.bottom_right, .finder span.top_left, .finder span.top_right, .finder span.bottom_left, .finder span.bottom_right { position: absolute; width: 6px; height: 6px; overflow: hidden; background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/corners/combined_white_6px.gif) no-repeat; z-index: 2; } .puff span.top_left, .boxWidgetItems span.top_left, .lozenge span.top_left, .finder span.top_left {background-position: -5px -5px; top:0; left: 0;} .puff span.top_right, .boxWidgetItems span.top_right, .lozenge span.top_right, .stripe span.top_right, .finder span.top_right {background-position: 1px -5px; top:0; right: 0;} .puff span.bottom_left, .boxWidgetItems span.bottom_left, .lozenge span.bottom_left, .finder span.bottom_left {background-position: -5px 1px; bottom:0; left: 0;} .puff span.bottom_right, .boxWidgetItems span.bottom_right, .lozenge span.bottom_right, .stripe span.bottom_right, .finder span.bottom_right {background-position: 1px 1px; bottom:0; right: 0;} .stripe span.bottom_left, .stripe span.top_left {display:none;} /*it seems odd to specify .col .finder span.top_right and bottom_right but it works */ * html .col .finder span.top_right, * html .col .finder span.bottom_right, * html .finder span.top_right, * html .finder span.bottom_right, * html .puff span.top_right, * html .puff span.bottom_right, * html .lozenge span.top_right, * html .lozenge span.bottom_right, * html .stripe span.top_right, * html .stripe span.bottom_right, * html .boxWidgetItems span.top_right, * html .boxWidgetItems span.bottom_right {right: -1px;} * html .finder span.bottom_left, * html .finder span.bottom_right, * html .lozenge span.bottom_left, * html .lozenge span.bottom_right, * html .stripe span.bottom_right, * html .boxWidgetItems span.bottom_left, * html .boxWidgetItems span.bottom_right {bottom: -1px;} * html .col .finder {margin-right: 1px;} /* ********************************************* */ /*float-enclosing section You will need to add your selector in 3 places. 1) selector:after (for non-ie browsers), 2) * html selector (for ie 6), 3) *+html selector (for ie 7) */ .exampleSelector:after, div#middleSlots:after, div#leftNav:after, div#footer-1:after, div#topSlots:after, div.navMenu div:after, div.navMenu ul:after, div.navMenu li:after, div.menu:after, div.menu ul.levelZero:after, div.finder:after { content: "."; visibility: hidden; display: block; clear: left; height: 0; } * html .exampleSelector, * html div#middleSlots, * html div#footer-1, * html div#topSlots, * html div.menu, * html div.menu ul.levelZero, * html .boxWidgetItems, * html div.finder { height: 1%; } *+html .exampleSelector, *+html div#middleSlots, *+html div#footer-1, *+html div#topSlots, *+html div.menu, *+html div.menu ul.levelZero, *+html .boxWidgetItems, *+html div.finder { min-height: 1%; } form.emailSignup { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/gradient_bottom-top_blue_1x91.jpg) repeat-x 0 100%; clear: left; display: block; } form.emailSignup h3 { margin: 0; padding: 0; font-size: 1.4em; } form.emailSignup p { margin: 0; } form.emailSignup label span {left: -999em; position: absolute;} /* Finder Widget-related stuff */ div.finder { background-color: #F0F0F0; font-size: 1.2em; line-height: 1.4; margin: 0 0 20px; padding: 10px 0; position: relative; } /* This is the general image design for now, as Mothercare has not specified the requested design. See https://w.amazon.com/?MothercareSiteRefresh/FinderWidget */ div#finderGeneralImage { margin: 0px 10px 0px 10px; width: 50%; float: left; vertical-align: middle; } .finder form { padding-left: 10px; padding-right: 10px; } .finder fieldset { border: none; margin: 0; padding: 0; } .finder label { display: block; margin: 0 0 2px; } .finder select { margin: 0 0 8px; width: 100%; font-size: inherit; color: #666666; } .finder option.nonDefault { color: #000000; } .finder div.submit { float: right; margin: 2px 0 0; padding: 0; } h4.breadcrumbheading { color:#000000; font-weight:normal; padding: 0; } h3.h3level2 { font-weight:normal; color: #000000; font-size:1.09em; padding: 0; } h2.h2level3 { color:#000000; font-size:1.1em !important; font-weight:normal; padding: 0; } h1.h1level4 { color:#000000; font-weight:normal; font-size:1em; line-height:1.2; padding: 0; } h4.editorialHeading { color:#00A6D6; font-weight:bold; margin:0; padding:0 10px; font-size:1.5em !important } h1.current2 { font-size:1.09em; font-weight:normal; padding:0; } h1.current3{ font-size:1.1em !important; font-weight:normal; padding:0; } h1.current4{ font-size:1em; font-weight:normal; line-height:1.2; padding:0; } .puff .bottom_left, .puff .bottom_right{ display:none; } .puff .widgetText h3 { font-size:1.45em; } .puff .widgetText p { font-size:1.18em; line-height:120%; } .javascript-enabled .puff .widgetText h3 { padding-bottom:24px; } /***** refreesh.css ****/ /* ------------------------------------------------------- set up page ------------------------------------------------------- */ body { background-color: #FFF; color: #333; font-size: 62.5%; line-height: 1.3; font-style: normal; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } div#wrapper { width: 985px; margin: 0 auto; } a { color: #000; } h1, h2, h3, h4 { font-weight: bold; /* default color scheme -- see themes below */ color: #00A6D6; margin:0; padding:0 10px; } h1 { text-transform:lowercase; } h2 { font-size: 1.6em; text-transform:lowercase; } h3 { font-size: 1.2em; } h4 { font-size: 1.0em; } img { border: 0; } ul { list-style:none; } form { margin: 0; padding: 0; } input, select, textarea { font-family: Arial, Helvetica, sans-serif; vertical-align: middle; } div#primary { float:right; width:786px; } div#middleSlots { clear: both; } div#footerSlots { clear:both; margin:0 auto; width:985px; } /* ------------------------------------------------------- New style updates ------------------------------------------------------- */ div#mainLogo { float: left; position: static; } div#top-1 .header p.tagLine { line-height: 0px; } div#topSlots { font-size: 12px; padding: 0px 0 0 0; position: relative; color: #666; float: left; width: 985px; clear: both; /* height: 155px; set temporarily while testing */ } div#topSlots a, div#topSlots a:link { font-size: 12px; color: #666; text-decoration: none; } div#topSlots a:hover { text-decoration: none; color: #000; } div#top-1 { float: left; height: 0; position:relative; top:0; left:0; } div#top-1 a { position:absolute; top:45px; } div#top-2 { float: right; width: 100%; margin-top: 10px; margin-right: -5px; /* position: absolute; top: 78px; right: 0px; */ } div#browsePage div#top-3 noscript { display:none; } div#top-3 { text-align: right; position: absolute; top: 37px; right: 290px; text-transform: lowercase; } div#top-4 { float: right; width: auto; clear: none; margin-top: 0px; /* position: absolute; top: 15px; right: 0px; */ } div#top-5 { float: right; clear: right; width: 100%; text-align: right; margin-top: 8px; /* position: absolute; top: 45px; right: 0px; */ } div#top-7 { float: left; padding-top: 10px; } div#top-7 .menu { background-color: #666666; background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/main-nav_bg.jpg); background-repeat: no-repeat; background-position: left top; height: 42px; width: 985px; } div#top-7 .menu ul { margin-top: 0px; } div#top-9 { clear: both; } div#top-9 #browseBreadcrumbs span.breadcrumbItem { font-size: 11px; } div#top-9 #browseBreadcrumbs h4.breadcrumbheading { padding-left: 1px; } div#top-9 #browseBreadcrumbs h4.breadcrumbheading, div#top-9 #browseBreadcrumbs h4.breadcrumbheading a, div#top-9 #browseBreadcrumbs h4.breadcrumbheading a:link { font-size: 11px; color: #666666; font-weight: normal; text-transform: lowercase; } div#top-9 #browseBreadcrumbs h4.breadcrumbheading a:hover { text-decoration: underline; } div.dynamicMenu10 ul { float: right; overflow: hidden; line-height: 14px; margin: 0px; padding: 0px; } div.dynamicMenu10 ul li { float: left; padding-left: 5px; padding-right: 5px; border-right: solid 1px #666; margin-right: -1px; } .cartMini input { height: 22px; width: 87px; } .cartMini form { padding-left: 20px; background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/basket_header-icon.gif); background-repeat: no-repeat; background-position: left top; text-align: right; width: auto; clear: none; float: none; } .searchNav select#searchNodeID, .searchNav input.textInput { border: solid 1px #CCCCCC; font-size: 12px; padding: 3px; } .searchNav label { display: none; } .searchNav input#emptySearchKeywords { width: 140px; } .searchNav input#empty_search_go { height: 23px; width: 38px; } div.signInMenu a.signinLink { padding-right: 5px; border-right-width: 1px; border-right-style: solid; border-right-color: #666666; } /* =================================================================================== Top Navigation =================================================================================== */ /* Anchors within the top-nav menus */ div#topSlots div.menu ul li a { color: #FFF; /* white */ /* The "!important" is necessary for getting IE6 to cooperate */ text-decoration: none; cursor: pointer; /* sometimes IE gets confused and needs a reminder */ } div#topSlots div.menu ul li.sfHover a, div#topSlots div.menu ul li a:hover { color: #003366; } div#topSlots div.menu ul li ul li a, div#topSlots div.menu ul li.sfHover ul li a { color: #666; } div#topSlots div.menu ul li ul li a:hover, div#topSlots div.menu ul li.sfHover ul li a:hover { color: #000; } span.welcomeText { display: none; } div.menu { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-background.gif) repeat-y; margin-bottom: 0.5em; /* Leave a little space between this and the site stripe */ } /* Common properties for unordered lists and list items within the menu */ div.menu ul, div.menu ul li { margin: 0; padding: 0; } div.menu ul {} /* Top-level (Tier 1) items */ div.menu ul li { float: left; display: inline; /* This helps IE with floated elements */ text-transform: lowercase; position: relative; /* This helps make sure that the drop-down menus appear above other elements that may be absolutely positioned */ z-index: 10000; background: transparent url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/main-nav_divider.jpg) right top no-repeat; font-size: 1.18em; /* Equivalent to 13px at the default browser size */ } /* ...but don't apply those properties to children list items */ div.menu ul li li { float: none; display: block; position: static; z-index: auto; font-size: 1.0em; width: auto; background: none; padding-bottom: 4px; } /* Arithemetic -- total width should add up to 985px: levelOne1: 100 levelOne2: 100 levelOne3: 80 levelOne4: 65 levelOne5: 80 levelOne6: 90 levelOne7: 80 levelOne8: 80 levelOne9: 70 levelOne10: 70 levelOne11: 90 levelOne12: 80 -------------- Total: 985 */ /* levelOne1: "maternity", levelOne2: "pushchairs" */ div.menu ul li.levelOne1, div.menu ul li.levelOne2 { width: 100px; } /* levelOne3: "nursery", levelOne5: "clothing", levelOne7: "feeding", levelOne8: "safety & care", levelOne12: "offers" */ div.menu ul li.levelOne3, div.menu ul li.levelOne5, div.menu ul li.levelOne7, div.menu ul li.levelOne8, div.menu ul li.levelOne12 { width: 80px; } /* "car & travel" */ div.menu ul li.levelOne4 { width: 65px; } /* levelOne6: "bathing & changing", levelOne11: "parenting experts" */ div.menu ul li.levelOne6 { width: 90px; } div.menu ul li.levelOne11 { width: 85px; } /* levelOne9: "kids at home", levelOne10: "toys & gifts" */ div.menu ul li.levelOne9, div.menu ul li.levelOne10 { width: 70px; } div.menu ul li.levelOne10 a span { padding-left: 2px; } div.menu ul li.levelOne4 a span { padding-left: 3px; padding-right: 3px; } /* This would correspond to "checklists" or other items "past the end" of the list */ div.menu ul li.levelOne13, div.menu ul li.levelOne14 { display: none; } /* Top-level (Tier 1) links (and their immediate children) */ div.menu ul li a, div.menu ul li a span, div.menu ul li span span { display: block; /*letter-spacing: 0.05em;*/ font-weight: bold; font-size: 13px; margin: 0; } /* ... but don't apply those properties to nested span elements */ div.menu ul li ul li span { display: inline; letter-spacing: normal; } /* Properties solely for Top-level (Tier 1) links */ div.menu ul li a { height: 42px; background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-divider.gif) no-repeat 0px 3px; text-decoration: none; } /* ... but those properties don't apply to children anchors */ div.menu ul li ul li a { line-height: 1.1; letter-spacing: normal; height: auto; background-image: none; } /* The first item doesn't get a left-side background image */ div.menu ul li.levelOne1 a { background-image: none; } div.menu ul li a span { height: 38px; /* This allows bits of the background-color on the anchor to show through (kinda like borders, but without shifting the text around */ margin-left: 1px; margin-right: 1px; } /* ... but don't apply those properties to nested span elements */ div.menu ul li a span span, div.menu ul li ul li a span { height: auto; margin-left: 0px; margin-right: 0px; } /* Vertically center the Tier 1 items (JavaScript also helps out a bit here for vertically-centering multi-line items) */ div.menu ul li a span span { /* I'd normally define this in ems, but that wouldn't help much in this case since the menubar itself has a fixed height. */ padding-top: 11px; /* This just makes sure that IE leaves enough room for descenders */ padding-bottom: 1px; } /* The two-line items get less padding: * levelOne4: "car seats" * levelOne9: "kids bedroom" * levelOne10: "toys & gifts" * levelOne11: "parenting advice" */ div.menu ul li.levelOne4 a span span, div.menu ul li.levelOne9 a span span, div.menu ul li.levelOne10 a span span, div.menu ul li.levelOne11 a span span, div.menu ul li.levelOne12 a span span { padding-top: 4px; } div.menu ul li a span, div.menu ul li a span span { text-align: center; } /* ... but don't apply those properties to nested Tier-2 spans */ div.menu ul li ul li a span { text-align: left; } div.menu ul li a span span { line-height: 1.05; } /* ------------------------------------------------------- Hover/focus variants for the drop-down items ------------------------------------------------------- */ div.menu ul li a { /* This is pretty much for IE's sake -- if it doesn't get this (default) value, it ends up reflowing the content (improperly) on a:hover */ background-color: transparent; /* This allows the hovered-anchor to reach over a bit and cover up the divider-image in the next list-item over. (And, yes, I'd normally apply this property to [selector]:hover, but IE didn't play nicely with that. Yar, more reflow business. */ margin-right: -2px; } /* .. but don't apply those properties to nested anchors */ div.menu ul li ul li a { margin-right: 0; } div.menu ul li a span { /* This just compensates for the negative margin-right in the previous rule (so that the text doesn't end up shifting */ padding-right: 2px; } /* ... but don't apply those properties to nested Tier-2 level spans */ div.menu ul li a span span, div.menu ul li ul li a span { padding-right: 0px; } /* ... but don't apply those negative margin bits to the last item */ div.menu ul li.levelOne12 a { margin-right: 0px; } div.menu ul li.levelOne12 a span { padding-right: 0px; } div.menu ul li:hover, div.menu ul li.sfHover { /* This puts the hovered list item slightly above adjacent list-items, allowing the border-effect (via the background-color below) to appear above the adjacent list-item's divider-image. */ z-index: 20000; } /* ... but don't apply that to nested list items */ div.menu ul li ul li:hover, div.menu ul li ul li.sfHover { z-index: auto; } div.menu ul li a:hover, div.menu ul li a:focus, div.menu ul li:hover a, div.menu ul li.sfHover a { /* What ends up happening here (with the background-color bits) is that, in combination with some on-hover padding-left and padding-right for this element's immediate child, the color ends up acting as a border (but without shifting anything around, as a border would tend to do). */ background: #ccc none; /* Bluish purple */ height: 38px; } /* Only IE6 sees this */ * html div.menu ul li a:hover, * html div.menu ul li a:focus, * html div.menu ul li:hover a, * html div.menu ul li.sfHover a { /* This element already has hasLayout, but IE6 behaves a bit better with position:relative as well */ position: relative; } /* ... but don't apply those properties to nested anchor elements */ div.menu ul li ul li a:hover, div.menu ul li ul li a:focus, div.menu ul li:hover ul li a, div.menu ul li.sfHover ul li a, div.menu ul li ul li:hover a, div.menu ul li ul li.sfHover a { right: 0px; height: auto; background-color: transparent; } div.menu ul li a:hover span, div.menu ul li a:focus span, div.menu ul li:hover a span, div.menu ul li.sfHover a span { background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-item-hover-background.gif) repeat-x; } /* ... but don't apply those properties to nested Tier-2 level spans */ div.menu ul li a:hover span span, div.menu ul li a:focus span span, div.menu ul li:hover a span span, div.menu ul li.sfHover a span span, div.menu ul li ul li a:hover span, div.menu ul li ul li a:focus span, div.menu ul li:hover ul li a span, div.menu ul li.sfHover ul li a span, div.menu ul li ul li:hover a span, div.menu ul li ul li.sfHover a span { background-image: none; } /* ------------------------------------------------------- Second-level lists (the actual bits that drop down) ------------------------------------------------------- */ /* Containers for the second-level lists -- these are the bits that drop down */ div.menu ul li div.levelTwoContainer { margin: 0; padding: 0; top: 37px; left: -90%; position: absolute; width: 329px; /* This allows the drop-down bits to slightly "tuck under" their parent Tier 1 items, allowing the bottom of the Tier 1 item to overlay a portion of the top of the drop down jobbie */ z-index: -1; /* using right instead of display:none to hide menus because display:none isn't read by screen readers */ margin-left: -1000em; } div.menu ul li div.levelTwoContainer div.afterLevelTwoList { padding-bottom: 20px; /* Leave room for the background image */ background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-dropdown-bottom.png) no-repeat; } /* These rules trigger hasLayout in IE6 and IE7, respectively: http://www.satzansatz.de/cssd/onhavinglayout.html#prop */ * html div.menu ul li div.levelTwoContainer div.afterLevelTwoList { height: 1%; } *+html div.menu ul li div.levelTwoContainer div.afterLevelTwoList { min-height: 0; } /* Specialty positioning/backgrounds for some of the div.levelTwoContainer bits */ /* "maternity" (currently the left-most item) */ div.menu ul li.levelOne1 div.levelTwoContainer { left: -4px; } /* "maternity" (currently the left-most item) */ div.menu ul li.levelOne1 div.levelTwoContainer ul { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-left-dropdown-top.png); } /* "toys & gifts" */ div.menu ul li.levelOne10 div.levelTwoContainer { left: -150%; } /* "parenting experts" */ div.menu ul li.levelOne11 div.levelTwoContainer { left: -175%; } /* "offers" (currently the right-most item) */ div.menu ul li.levelOne12 div.levelTwoContainer { left: -243px; } /* "offers" (currently the right-most item) */ div.menu ul li.levelOne12 div.levelTwoContainer ul { background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-right-dropdown-top.png); } div.menu ul li ul { font-size: 0.9230em; /* Equivalent to 12px at the default font size */ padding: 15px 20px 5px 20px; background: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/primary-navigation-dropdown-top.png) no-repeat top left; } /* Give hasLayout to IE6 */ * html div.menu ul li ul { height: 1%; } /* Give hasLayout to IE7 */ *+html div.menu ul li ul { min-height: 0; } div.menu ul li ul li a { line-height: 1.2; } /* These rules trigger hasLayout in IE6 and IE7, respectively: http://www.satzansatz.de/cssd/onhavinglayout.html#prop */ * html div.menu ul li ul li a { height: 1%; } *+html div.menu ul li ul li a { min-height: 0; } div.menu ul li ul li a:hover, div.menu ul li ul li a:focus { text-decoration: underline; } div.menu ul li ul li a span { margin: 0; padding: 0; font-size: 1.0em; } /* Nested lists under hovered list items */ div.menu ul li:hover div.levelTwoContainer, div.menu ul li.sfHover div.levelTwoContainer, div.menu ul li.sfHover a.sffocus div.levelTwoContainer { display: block; /* This is just for the sake of the iframe */ /* This is normally "-1000em", so setting it to "0em" unhides the menu */ margin-left: 0em; } /* ------------------------------------------------------- Fail-safe properties in case JavaScript is disabled ------------------------------------------------------- */ /* Allow for tabbing-through the anchors in the drop-down list, even if JavaScript isn't around to help */ ul li div.levelTwoContainer li a:focus { margin-left: 1085em; width: 329px; background-color: #042F74; /* Dark blue */ } /* ... but disable those just-in-case properties if JavaScript is indeed enabled */ body.javascript-enabled ul li div.levelTwoContainer li a:focus { margin-left: 0; width: auto; background-color: inherit; } /* ------------------------------------------------------- Left hand navigation start ------------------------------------------------------- */ div#secondary { float:left; overflow:hidden; padding-bottom:12px; width:189px; } div#lMenu h2 { color: #1f70d6; font-family: Arial, Helvetica, sans-serif; font-size: 21px; line-height: 22px; font-weight: bold; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 18px; padding-left: 0px; } div#lMenu h4 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; font-weight: bold; color: #1f70d6; margin: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #1f70d6; padding-top: 0px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; letter-spacing: -0.5px; clear: both; } div#leftNav h3.h3level2, div#navMenu h3.h3level2, div#lMenu h3 { font-size: 13px; font-weight: normal; color: #666666; margin: 0px; padding: 0px; float: left; line-height: 16px; } div#leftNav h3.h3level2 a,div#leftNav h3.h3level2 a:link,div#navMenu h3.h3level2 a,div#navMenu h3.h3level2 a:link, div#lMenu h3.h3level2 a, div#lMenu h3.h3level2 a:link { color: #666666; text-decoration: none; line-height: 16px; } div#navMenu h3.h3level2 a:hover, div#lMenu h3.h3level2 a:hover { color: #1F70D6; text-decoration: none; } div#lMenu ul { margin: 0px; clear: both; float: left; list-style-position: outside; list-style-image: none; list-style-type: none; padding-top: 12px; padding-right: 0px; padding-bottom: 30px; padding-left: 0px; } div#lMenu ul li { float: left; clear: left; padding-bottom: 5px; line-height: 16px; font-size: 12px; color: #666666; width: 189px; } /* ------------------------------------------------------- Left hand navigation end ------------------------------------------------------- */ /* Overrding Mothercare given CSS for site wide */ div.cartMini strong.itemCount { background: none; } div#footer-1 { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #b8b8b8; border-bottom-color: #b8b8b8; padding-top: 15px; padding-bottom: 15px; padding-left: 40px; float: left; margin-bottom: 15px; width: 945px; } div#footer-1 h4 { color: #663366; font-weight: bold; font-size: 12px; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 8px; padding-left: 10px; } div#footer-1 .category { float: left; width: 160px; margin-right: 21px; } div#footer-1 ul { padding: 0px; margin: 0px; } div#footer-1 ul li { margin: 0px; font-size: 12px; color: #666666; background-image: url(https://images-eu.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/inca/common/footer_bullet_arrow.gif); background-repeat: no-repeat; background-position: left 4px; padding-top: 0px; padding-right: 0px; padding-bottom: 3px; padding-left: 10px; } div#footer-1 ul li a, div#footer-1 ul li a:link { color: #666666; text-decoration: none; } div#footer-1 ul li a:hover { color: #000; text-decoration: none; } div.companyInfo { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; margin-bottom: 25px; } div.companyInfo p { margin: 0px; padding: 0px; } div#top-5 { margin-top: 0px; } div#top-8 { background: none; } div#footer-1 div.category { width: 160px; } div#top-8 div.siteStripe span.hook1 { background: none; } div#SearchResults #lMenu .categoryLinks, div#embeddedSearchRefinements #lMenu .categoryLinks { background-color: transparent; padding:0; } *:first-child+html div#browsePage div#top-1 div#mainLogo{ /* IE7 specific */ top:30px; } div#top-1 a.top, div#top-1 p.tagLine{ display:none; } div#browsePage div#top-8{ display:none; } div#wrapper div#topSlots { z-index:1000; } div#wrapper div#topSlots div#top-8 { display:none; } #leftNav #left-nav-3 .navMenu .navItemsWrapper ul.ladder li ul{ clear:both; padding-left:10px; color:#666666; } #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li a h1.h1level4{ color:#666666; } #top-7 .menu .sf-shadow li.levelOne12{ width:85px; } div.menu ul li.levelOne12 div.levelTwoContainer { left:-238px; } #top-4 .cartMini form a strong span:hover{ text-decoration:underline; } #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li ul li{ width:100%; } #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li a:hover h3.h3level2, #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li ul li a:hover h2.h2level3, #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li ul li a:hover h1.h1level4 { color: #1F70D6; } #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li a h3.h3level2, #leftNav #left-nav-3 .navMenu .navItemsWrapper .ladder li ul li a h2.h2level3{ cursor:pointer; } #top-4 .cartMini form a strong.itemCount span{ cursor:pointer; } div#leftNav h1.current2, div#leftNav h2.current2, div#leftNav h3.current2, div#leftNav h4.current2, div#leftNav h1.current3, div#leftNav h2.current3, div#leftNav h3.current3, div#leftNav h4.current3 , div#leftNav h1.current4, div#leftNav h2.current4, div#leftNav h3.current4, div#leftNav h4.current4 { color: #1F70D6; } /* Safari specific fix for basket section in header*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #top-4 .cartMini{ width: 275px !important; } #top-4 .cartMini form{ margin-left:24px; } #top-4 .cartMini form, #top-4 .cartMini form a strong span{ display:inline; } } div.horizontalLayout div.scheduleableItems span.cornerBottomLeft, div.horizontalLayout div.scheduleableItems span.cornerBottomRight, div.horizontalLayout div.scheduleableItems span.cornerTopRight, div.horizontalLayout div.scheduleableItems span.cornerTopLeft, div.horizontalLayout div.recommendationItems span.cornerBottomLeft, div.horizontalLayout div.recommendationItems span.cornerBottomRight, div.horizontalLayout div.recommendationItems span.cornerTopRight, div.horizontalLayout div.recommendationItems span.cornerTopLeft { background: none; height:0px; width:0px; } div.horizontalLayout div.productScheduleableHorizontal div.pointerLink a{ display:none; margin:0; }