/* ------------------------------------------------------- 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#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; z-index: 1000; /* 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 { position:relative; top:0px; left:0px; } div#top-1 a{ position:absolute; top:0px; left:0px; } div#top-2 { float: right; width: 100%; margin-top: 10px; margin-right: -5px; /* position: absolute; top: 78px; right: 0px; */ } 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: left; 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-na.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 { padding-bottom:20px; } div#top-9 #browseBreadcrumbs span.breadcrumbItem { font-size: 11px; } div#top-9 #browseBreadcrumbs span.carat, div#top-9 #browseBreadcrumbs span.focus, div#top-9 #browseBreadcrumbs a { font-size: 11px; color: #666666; text-decoration: none; } div#top-9 #browseBreadcrumbs a:hover { font-size: 11px; color: #666666; text-decoration: underline; } 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-na.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-na.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-na.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-na.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-na.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-na.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-na.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-na.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-na.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#lMenu h3 { font-size: 13px; font-weight: normal; color: #666666; margin: 0px; padding: 0px; float: left; line-height: 16px; } div#lMenu h3 a, div#lMenu h3 a:link { color: #666666; text-decoration: none; line-height: 16px; } div#lMenu h3 a:hover, div#lMenu a:hover h3.h3level2, div.navMenu a:hover h2.h2level3, div.navMenu a:hover h1.h1level4 { 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-na.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.menu ul li a, div.menu ul li a span, div.menu ul li span span { letter-spacing:0em; } div#top-1 div.header div.title { *margin-top: 25px; _margin-top: 45px; } span.cornerTopLeft, span.cornerTopRight, span.cornerBottomLeft, span.cornerBottomRight { background:transparent url(https://images-na.ssl-images-amazon.com/images/G/02/Mothercare/en_GB/core/common/corners/corners_radius_6._V192185364_.gif) no-repeat scroll 0 0; height:6px; overflow:hidden; position:absolute; width:6px; z-index:2; } span.cornerTopLeft { background-position:-5px -5px; left:0; top:0; } span.cornerTopRight { background-position:1px -5px; right:0; top:0; } span.cornerBottomLeft { background-position:-5px 1px; bottom:0; left:0; } span.cornerBottomRight { background-position:1px 1px; bottom:0; right:0; } div#lMenu span.cornerTopLeft, div#lMenu span.cornerTopRight, div#lMenu span.cornerBottomLeft, div#lMenu span.cornerBottomRight { background:none; } *:first-child+html div#outerWrap div#topSlots div#top-1 { top:30px; } div#outerWrap div#topSlots { z-index:1000; } div#outerWrap div#topSlots div#top-8 { display:none; } div#top-1{ position:relative; top:0px; left: 0px; } div#top-1 a{ position:absolute; top:45px; *top:15px !important; _top:45px !important; left:0px; margin: 0px; } div.header div#mainLogo { position:relative; } div#top-1.searchPage a{ *top:45px !important; } #top-7 .menu .sf-shadow li.levelOne12{ width:85px; } div.menu ul li.levelOne12 div.levelTwoContainer { left:-238px; } div#browsePage div#topSlots div#top-2, div#outerWrap div#topSlots div#top-2 { _margin-right:0px; } div.article h3 { font-size:1.8em; }