/* ------------------------------------------------------------------ Filename: global-nav.css Author: AKQA Description: Global navigation and dropdown menu styles Contents: - Reset styles / General styles - Basic Page Layout Sainsbury's colour palette: - Aubergine - #4e0011 - Plum - #930031 - Cherry - #c11933 - Strawberry - #e23d3a - Orange - #f26334 - Tangerine - #f57f33 - Apricot - #fbac18 - Lemon - #ffd100 - Butter - #ffeb9a - Cream - #fdeec3 /* ------------------------------------------------------------------ Header */ .topBrandBar { margin:0 10px;height:18px; background:#f26334 url(/support_files/style_images/common/header/top-brand-bar-bg-left.gif) no-repeat top left } .topBrandBar span { display:block;height:18px; background:url(/support_files/style_images/common/header/top-brand-bar-bg-right.gif) no-repeat top right } .header { margin:0 10px;padding-left:15px } h1 { float:left;width:145px;height:62px;margin:0;padding:0; text-indent:-1000em;font-family:tahoma,arial,sans-serif; background:#FFF url(/support_files/style_images/common/header/header-logo.gif) no-repeat center left } .logo { float:left;margin: 17px 0px 17px 0px;padding:0; } .headerOptions { float:right;margin-top:6px;padding-right:0px;width:370px;width:80%; text-align:right; } .headerOptions .search {float:right;margin-top:0px;padding-right:12px;} .headerOptions .search label {float:left;margin:8px 7px 0 0;font-weight:bold;} .headerOptions .search input {float:left;margin:5px 5px 0 0;} .headerOptions .search input.searchBox {min-width:130px;} .headerOptions .search select {float:left;width:130px;margin:5px 7px 0 0;padding:1px;} .headerOptions .search span.blnkMrk{display:none;} .headerOptions ul {clear:both;float:right; margin:2px 0; padding-right:14px; text-align:right;} .headerOptions ul li { float:left; margin-left:15px; padding-left:8px; list-style-type:none; background:url(/support_files/style_images/common/chevrons/left-full-grey.gif) left 2px no-repeat; } .headerOptions ul li.hide {display:none} .headerOptions ul li a {color:#828282;text-decoration:none;} .headerOptions ul li a:hover {color:#828282;text-decoration:underline;} /* ------------------------------------------------------------------ Navigation bar */ .navigationBar { margin:0 9px 0 9px;width:979px; background:#f26334 url(/support_files/style_images/common/header/bg-bar-main.gif) repeat-x left center } .navigationBar div.navigationBarShadow { background:url(/support_files/style_images/common/header/bg-bar-main-bottom.gif) no-repeat bottom left } .navigationBar div ul.mainMenu { padding:0 3px 5px 10px; background:url(/support_files/style_images/common/header/bg-bar-main-top.gif) no-repeat top left } /* General main menu styles */ .mainMenu, .mainMenu ul, .groceryMenu, .groceryMenu ul {margin:0;padding:0;list-style-type:none } .mainMenu li { float:left;position:relative;z-index:2; background: url(/support_files/style_images/common/header/menu-item-divide.gif) no-repeat right center } .mainMenu li.last { background: none !important; } .mainMenu a, .mainMenu a:visited { display:block;padding:8px 6px 12px 6px;text-decoration:none;font-weight:bold;color:#fff; } /* hard-coded widths for text-size adjustment */ .mainMenu li.home { width:68px!important; } .mainMenu li.home a { width:48px;text-indent:20px; } /* smaller font size */ li.foodDrink a { width:73px; } li.homeGarden a { width:90px; } li.appliances a { width:65px; } li.technology a { width:68px; } li.sportLeisure a { width:86px; } li.toys a { width:88px; } li.clothes a { width:49px; } li.finance a { width:49px; } li.morestores a { width:69px; } /* larger font size */ .largeFont li.home a { width:65px;text-indent:10px;padding-right:0;line-height:2.35em } .largeFont li.foodDrink a { width:64px; } .largeFont li.homeGarden a { width:75px; } .largeFont li.appliances a { width:90px;line-height:2.35em } .largeFont li.technology a { width:88px;line-height:2.35em } .largeFont li.sportLeisure a { width:72px; } .largeFont li.toys a { width: 65px; } .largeFont li.clothes a { width:72px;line-height:2.35em } .largeFont li.finance a { width:68px;line-height:2.35em } .largeFont li.morestores a { width:55px; } /* Home link */ /* placed in it's own DIV to stop flickering when switching images */ /*.mainMenu li.home div { background: url(/support_files/style_images/common/header/img-home.gif) no-repeat center left }*/ .mainMenu li.home a, .mainMenu li.home a:focus, .mainMenu li.home a:visited { width:52px; text-indent:17px; overflow:hidden; background:none; } /* New window link styles */ .mainMenu li a.newWindow, .mainMenu li a.newWindow:focus, .mainMenu li a.newWindow:visited { background: url(/support_files/style_images/common/header/main-menu-link-new-window.gif) no-repeat right 10px } .mainMenu li a.newWindow:hover {background: url(/support_files/style_images/common/header/main-menu-link-new-window-on.gif) no-repeat right top} .subMenu a.newWindow, .subMenu a.newWindow:focus, .subMenu a.newWindow:visited, .subMenu a.newWindow:hover { background: url(/support_files/style_images/common/header/main-menu-link-new-window-black.gif) no-repeat right 4px !important; display:inline; padding: 2px 18px 0 20px; } /* Sub menu styles */ .mainMenu li .subMenu { visibility:hidden; position:absolute; top:33px; left:0px; z-index:99; } .mainMenu li .subMenu.rightOpening{ left:-175px; } .mainMenu li .oneCol {width:15em;} .mainMenu li .oneCol ul {width:99%;} .mainMenu li .twoCol {width:33em;} .mainMenu li .twoCol ul {width:49%;} .mainMenu li .threeCol {width:49em;} .mainMenu li .threeCol ul {width:33%;} .mainMenu li .fourCol {width:60em;} .mainMenu li .fourCol ul {width:24%;} .mainMenu li ul { float:left; padding:10px 0px 8px } .mainMenu li .subMenu .subMenuContainer ul li a:hover { background: none; } .mainMenu li .subMenu .subMenuContainer { background:#fef6e1; border-width:1px 1px 0 1px; border-style:solid; border-color:#CCC; } .mainMenu li .subMenu .subMenuLeft { float:left;width:89%;height:10px;margin:0; padding:0; background:url(/support_files/style_images/common/header/submenu-bottom-bg-left.png) no-repeat bottom left; } .mainMenu li .subMenu .subMenuRight { float:left;width:11%;height:10px;margin:0; padding:0; background:url(/support_files/style_images/common/header/submenu-bottom-bg-right.png) no-repeat bottom right; } .mainMenu.largeFont li ul li, .mainMenu li ul li {width:100%;background:url(/support_files/style_images/common/chevrons/right-full.gif) 10px 60% no-repeat;} .mainMenu.largeFont li ul li a, .mainMenu.largeFont li ul li a:visited, .mainMenu li ul li a, .mainMenu li ul li a:visited { display:block;width:auto;height:auto;padding:2px 0 0 0; line-height:1.5em; color:#000;padding-left:20px;font-weight:normal; background:none; } /* List hover styles */ .mainMenu li a:hover {background: url(/support_files/style_images/common/header/bg-bar-main-on.jpg) no-repeat right center; text-decoration:underline; } .mainMenu li.home a:hover {background: url(/support_files/style_images/common/header/bg-bar-main-home-on.gif) no-repeat left center; } .mainMenu li:hover > .subMenu {visibility:visible;} .mainMenu li a:hover .subMenu {visibility:visible;} .mainMenu li ul a:hover {text-decoration:underline;background:none} /* Accessibility of main menu tabbing */ .mainMenu li a:active, .mainMenu li a:focus { color:#FFF; } .mainMenu li ul li a:active, .mainMenu li ul li a:focus { color:#000; background:none; } /* For IE6 using markup conditional statements */ .mainMenu table { position:absolute; top:0; left:0; z-index:100; font-size:1em; border-collapse:collapse; } /* ------------------------------------------------------------------ Groceries Header */ .groceriesHeader {padding:2px 0;background:#FFF; text-align:left; border-bottom:2px solid #ccc;} /* Groceries Navigation bar */ .groceriesHeader .navigationBar { min-width:979px; width:auto; background:#f26334 url(/support_files/style_images/common/header/bg-bar-main-groceries.gif) repeat-x left center; } /* Main groceries menu with right side top curve */ .groceriesHeader .mainMenu { font-size:1.1em; background:url(/support_files/style_images/common/header/bg-bar-right-curve-top.gif) no-repeat right top; } /* Groceries navigation body */ .groceriesHeader .header { font-size:1.1em; } /* Home link with left side top curve */ .groceriesHeader .mainMenu li.home a, .groceriesHeader .mainMenu li.home a:visited { background: url(/support_files/style_images/common/header/home-bg-top-curve.gif) no-repeat top left; overflow:hidden; } .groceriesHeader .mainMenu li.home a:hover { background:transparent url(/support_files/style_images/common/header/home-bg-top-curve-on.gif) no-repeat scroll left top; } .groceriesHeader .mainMenu li.home { width:auto !important; } .groceriesHeader #menu2, .groceriesHeader #menu3, .groceriesHeader #menu4, .groceriesHeader #menu5, .groceriesHeader #menu6, .groceriesHeader #menu7, .groceriesHeader #menu8, .groceriesHeader #menu9, .groceriesHeader #menu10, .groceriesHeader #menu11, .groceriesHeader .subMenu { font-size:11px; } .groceryMenuBg { margin:0 10px;height:25px; background:#f16333 url(/support_files/style_images/common/header/grocery-menu-bg.gif) no-repeat top right } .groceryMenu {position:relative; padding-left:7px; z-index:1;font-size:1.1em;} .groceryMenu li { float:left; padding:1px 2px 0 1px; background: url(/support_files/style_images/common/header/grocery-menu-item-divide.gif) no-repeat center right } .groceryMenu a {color:#fff;} .groceryMenu a, .groceryMenu a:visited { display:block; text-decoration:none; font-weight:bold; } .groceryMenu a span, .groceryMenu a:visited span { display:block;padding:5px 10px 6px 10px; } /* Groceries sub menu styles */ .subMenuBg {margin:0 10px;height:25px;background:#e8e8e8 url(/support_files/style_images/common/header/grocery-submenu-bg.gif) repeat-x top left;} .subMenuBg div { background:url(/support_files/style_images/common/header/grocery-submenu-bg-right.gif) no-repeat top right;} .subMenuBg div div { height:25px;background:url(/support_files/style_images/common/header/grocery-submenu-item-left-bg.gif) no-repeat top left; } .groceryMenu li ul { display:none;position:absolute;top:25px;left:7px;margin:0;padding:0;width:100%;height:25px; } .groceryMenu li.active ul { display:inline } .groceryMenu li ul li { float:left;margin:0;padding:0; background:url(/support_files/style_images/common/header/grocery-submenu-item-bg.gif) no-repeat top right } .groceryMenu li ul li a, .groceryMenu li ul li a:visited { display:block;width:auto;height:auto;padding:6px 15px; color:#000;font-weight:bold; background:none; } /* make sure we don't hide the left rounded corner */ .groceryMenu li ul li a.subLinkFirst { padding-left:7px; } /* Active and hover styles */ .groceryMenu li a:active, .groceryMenu li a:focus, .groceryMenu li a:hover, .groceryMenu li.active a { display:block; text-decoration:none; color:#000; background:#fff url(/support_files/style_images/common/header/grocery-menu-item-on-left-bg.gif) no-repeat top left } .groceryMenu li a:hover span, .groceryMenu li.active a span { background:url(/support_files/style_images/common/header/grocery-menu-item-on-right-bg.gif) no-repeat top right } .groceryMenu li ul li a:hover {color:#c52740;background:none;} .groceryMenu li.active ul li a {background:none;} .groceryMenu li ul li a, .groceryMenu li ul li a:visited, .groceryMenu li ul li a:hover { background:none } /* ------------------------------------------------------------------ Breadcrumb bar Breadcrumbs are created within a list. With the exception of the Home link, the other breadcrumbs have a chevron. For this reason the first breadcrumb must have a class of 'first'. */ div.breadcrumb {clear:left;margin:0 17px 3px 21px;line-height:1.4em;height:1.8em} div.breadcrumb ul {list-style-type:none !important;} div.breadcrumb ul li { float:left;padding-right:3px; text-indent:10px; background:url(/support_files/style_images/common/chevrons/breadcrumb.gif) no-repeat 0 60%; } div.breadcrumb ul li a { text-decoration: underline; } div.breadcrumb ul li.first { text-indent:0; background:none; } div.breadcrumb ul li.history { float:right;width:60px; text-indent:6px;text-align:right; background-image:none } div.breadcrumb ul li.history a{ padding-left:8px; background:url(/support_files/style_images/common/chevrons/left-full.gif) no-repeat left 60%; } .breadcrumb ul li.history a { text-decoration:none; } div.breadcrumb ul li.history a:hover { text-decoration:underline; } /* BREADCRUMB END */ /* site map */ div.sitemap { padding-top:12px; } /* Sitemap and Footer */ div.sitemap h3 { margin:0 0 8px 17px; width:156px; height:20px; background:url(/support_files/style_images/common/sitemap/h-explore-sitemap.gif) no-repeat 0 3px; } div.sitemap a { color:#828282; } div.sitemap a.newWindow { background:url(/support_files/style_images/common/sitemap/icon-external-link.gif) no-repeat right 1px; } div.sitemap ul { margin-bottom:30px; list-style-type:none !important; /*background:url(/support_files/style_images/common/sitemap/bg-divide-repeat.gif) repeat-y top left;*/ border:1px solid #ccc; } div.sitemap ul li { float:left;margin:0;padding:14px 14px 10px 18px;width:210px; text-indent:-1000em; } div.sitemap ul li h4 { text-indent: 0 !important; } div.sitemap ul li ul { margin-bottom:0; border:none; } div.sitemap ul li ul li { float:none;margin:7px 0;padding:0 0 0 8px;width:auto; text-indent:0; background:url(/support_files/style_images/common/chevrons/left-full-grey.gif) left 2px no-repeat; } .navigationBar a.newWindow { padding-right:20px !important; } .groceriesHeader .mainMenu li .subMenu { top: 30px !important; } .groceriesHeader .mainMenu li { background-image:url(/support_files/style_images/common/header/grocery-menu-item-divide.gif) !important; } .groceriesHeader .subMenu li { background-image:url(/support_files/style_images/common/chevrons/right-full.gif) !important; } .groceriesHeader .mainMenu li.last { background-image:none !important; } .groceriesHeader .mainMenu li ul { padding:5px 0 3px; } #globalNav2 { z-index:98; } #globalNav3 { z-index:97; } #globalNav4 { z-index:96; } #globalNav5 { z-index:95; } #globalNav6 { z-index:94; } #globalNav7 { z-index:93; } #globalNav8 { z-index:92; } #globalNav9 { z-index:91; } #globalNav10 { z-index:90; }