/* **************************************************************** GENERIC MENU STYLES **************************************************************** - All shared styles relating to the menus on the screen layout. ***************************************************************** */ div.menu ul, ul.menu { list-style : none; margin : 0px; padding : 0px; } div.menu ul li, ul.menu li { list-style : none; list-style-image : none; margin : 0px; padding : 0px; } /* ======================================================================================================================================================= ======================================================================================================================================================= */ /* **************************************************************** SITE MENU **************************************************************** - The site menu is the main site structure navigation. ***************************************************************** */ div.siteMenuRow { width : 980px; height : 29px; position : absolute; left : 7px; top : 95px; /*FF fix to stop menu slipping behind z-indexed page content */ z-index : 100; } div.menu.site div.dropShadowInner, div.menu.site ul.dropShadowInner { /* background-color : #FFFFFF;*/ font-size : 10px; text-align : left; } div.menu.site div.dropShadowInner { height : 29px; padding : 0px; } div.menu.site ul { margin : 0px; padding : 0px; } div.menu.site ul.level0 div.level1 { } div.menu.site ul.level0 div.level1 ul.dropShadowInner { padding : 0px; /* border : 1px solid #3b3b3b; background-color : #3b3b3b; */ } div.menu.site div a { color : #ffffff; } /* ***************************************************************** Level 0 ***************************************************************** */ div.menu.site ul.level0 { width : 100%; height : 29px; overflow : hidden; background-image : url("/assets/web/images/siteMenu/nav_bg.jpg"); background-repeat : repeat-x; } div.menu.site ul.level0 li { float : left; height : auto; } div.menu.site ul.level0 li.last { } div.menu.site ul.level0 li a { display : block; /* * NOTE : @this level (top most) NOT using an adaptive 'stretching' width setup as have a specific MAX size and better for links to run onto 2 lines if required * width : auto; position : relative; */ width : auto; margin : 0px; padding : 6px 6px 7px 6px; line-height : 15px; font-weight : bold; font-size : 11px; } div.menu.site ul.level0 li a:hover { /*background-image : url("/assets/web/images/siteMenu/nav_bg_hover.jpg");*/ background-color : #bfbfbf; background-repeat : repeat-x; color : #000000; line-height : 15px; width : auto; } div.menu.site ul.level0 li.parent a { } /* ***************************************************************** Level 1 ***************************************************************** */ div.menu.site ul.level0 li.parent div.level1 { background-image : url("/assets/web/images/panelElements/dropShadow_panel_main_grey.png"); position : absolute; top : 28px; left : 0px; width : 972px; display : none; } div.menu.site ul.level0 li.parent div.level1 div.dropShadowInner { background-color : #F0F0F0; width : 100%; height : auto; } div.menu.site ul.level0 li.parent div.level1 div.dropDownMenuContainerBg { padding : 5px; background-image : url("/assets/web/images/panelElements/dropShadow_panel_main_grad.png"); /*position : absolute;*/ top : 0px; left : 0px; width : 964px; border-left : 1px solid #b7b7b7; border-right : 1px solid #b7b7b7; border-bottom : 1px solid #b7b7b7; } div.menu.site ul.level0 li.parent div.level1 div.navigationBanner { float : left; width : 235px; height : 200px; margin : 0px; padding : 0px; } div.menu.site ul.level0 li.parent div.level1 div.navigationBanner a { line-height : 0px; margin : 0px; padding : 0px; } div.menu.site ul.level0 li.parent div.level1 div.navigationBanner a img { max-width : 235px; max-height : 200px; } div.menu.site ul.level0 li.parent div.level1 div.navigationBanner a:hover { line-height : 0px; margin : 0px; padding : 0px; background-color:Transparent; } div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer { width : 709px; padding : 10px; float : left; } div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer li { float : left; white-space : nowrap;/**/ } div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer li a { font-size : 11px; font-weight : bold; width : auto; position : relative; display : block; color : Black; background-image : url("/assets/web/images/siteMenu/blue_arrow.png"); background-repeat : no-repeat; background-position : 5px 7px; padding : 5px 10px 5px 15px; margin : 0px; } div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer li a:hover { background-color : #ABABAB; color : #FFFFFF; } div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer li.firstLast a { } div.menu.site ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer li a { } div.menu.site ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer li a { } div.menu.site ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer li a { } div.menu.site ul.level0 li.parent div.level1.about-sytner ul.dropDownMenuContainer li a { } div.menu.site ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer, div.menu.site ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer, div.menu.site ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer { position : relative; display : block; } /* * SCOPE CLASSES inserted into the div.level1 class are: * 'group' * 'franchise' * 'location' * * These allow scope specific targeting */ /* * @ The Sytner menu ('group' level) the 'New cars' & 'Used cars' menus are formatted into 2 columns separated by a divider line * - To achieve this it is necessary to set specific widths & x-positions (left margins) for each column (achieved using the classes below) * BECAUSE setting specific width for the colums it is necessary to reset some of the core styles required to achieve adaptive widths */ /*div.menu.site ul.level0 li.parent div.level1.group.new-cars ul.dropDownMenuContainer li, div.menu.site ul.level0 li.parent div.level1.group.used-cars ul.dropDownMenuContainer li { white-space : normal; } div.menu.site ul.level0 li.parent div.level1.group.new-cars ul.dropDownMenuContainer li.column1, div.menu.site ul.level0 li.parent div.level1.group.used-cars ul.dropDownMenuContainer li.column1, div.menu.site ul.level0 li.parent div.level1.group.aftersales ul.dropDownMenuContainer li.column1 { padding-right : 10px; } div.menu.site ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer li, div.menu.site ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer li, div.menu.site ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer li { position : relative; display : block; }*/ div.menu.site ul.level0 li.parent div.level1 ul.dropDownMenuContainer li { width : 236px; } /*div.menu.site ul.level0 li.parent div.level1.group.new-cars ul.dropDownMenuContainer li.column1 { width : 95px; } div.menu.site ul.level0 li.parent div.level1.group.new-cars ul.dropDownMenuContainer li.column2 { width : 110px; margin-left : 116px; } div.menu.site ul.level0 li.parent div.level1.group.used-cars ul.dropDownMenuContainer li.column1 { width : 95px; } div.menu.site ul.level0 li.parent div.level1.group.used-cars ul.dropDownMenuContainer li.column2 { width : 110px; margin-left : 116px; } div.menu.site ul.level0 li.parent div.level1.group.aftersales ul.dropDownMenuContainer li.column1 { width : 120px; } div.menu.site ul.level0 li.parent div.level1.group.aftersales ul.dropDownMenuContainer li.column2 { width : 130px; margin-left : 141px; } div.menu.site ul.level0 li.parent div.level1.group.new-cars ul.dropDownMenuContainer li.columnFirstItem { margin-top : -311px; } div.menu.site ul.level0 li.parent div.level1.group.used-cars ul.dropDownMenuContainer li.columnFirstItem { margin-top : -335px; } div.menu.site ul.level0 li.parent div.level1 ul.dropShadowInner li.last a, div.menu.site.Group ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer li.columnLastItem a, div.menu.site.Group ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer li.columnLastItem a, div.menu.site.Group ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer li.columnLastItem a { } div.menu.site.Group ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer li.last.doubleHeightItem, div.menu.site.Group ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer li.last.doubleHeightItem, div.menu.site.Group ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer li.last.doubleHeightItem { padding-bottom : 24px; } div.menu.site.Group ul.level0 li.parent div.level1.new-cars ul.dropDownMenuContainer li.last.doubleHeightItem a, div.menu.site.Group ul.level0 li.parent div.level1.used-cars ul.dropDownMenuContainer li.last.doubleHeightItem a, div.menu.site.Group ul.level0 li.parent div.level1.aftersales ul.dropDownMenuContainer li.last.doubleHeightItem a { } div.menu.site ul.level0 li.parent div.level1.group.aftersales ul.dropDownMenuContainer li.columnFirstItem { margin-top : -359px; }*/ /* ***************************************************************** Level 2 ***************************************************************** */ div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level2 { border : 0px; padding : 0px 0px 0px 0px; top : 0px; left : 0px; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level2 li { width : 231px; padding : 0px 0px 0px 10px; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level2 li.last { padding-bottom : 2px; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent.last ul.level2 li.last { padding-bottom : 2px; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level2 li a { background-image : url("/assets/web/images/siteMenu/grey_arrow.png"); background-repeat : no-repeat; background-position : 5px 5px; width : auto; margin : 0px 5px; padding-top : 3px; padding-bottom : 3px; color : #6b6b6b; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level2 li a:hover { background-color : #e5e5e5; color : #3b3b3b; } div.menu.site ul.level0 li.parent div.dropShadowOuter.level1 ul.dropDownMenuContainer li.parent ul.level3 li { width : 221px; } /* ======================================================================================================================================================= ======================================================================================================================================================= */ /* **************************************************************** SITE SCOPE MENU **************************************************************** */ /* **************************************************************** MAIN MENU LINKS **************************************************************** */ div.menu.siteScope div.dropShadowInner { background-color : #FFFFFF; border : solid 1px #777777; padding : 10px; } div.menu.siteScope div.dropShadowInner h2 { background-color : #E5E5E5; color : #6B6B6B; font-size : 10px; margin : 0px 0px 7px 0px; padding : 5px 7px; text-align : center; } div.menu.siteScope div.dropShadowInner a.menuLogoLink { display : block; width : 166px; height : 82px; margin : 1px 0px 1px 1px; overflow : hidden; } div.menu.siteScope div.dropShadowInner a.menuLogoLink img.logo { /* * NOTE: logo image = 168 x 84 and sits in a container that with w = 168 [see 'div.menu.site ul.level0 div.level1 ul.dropShadowInner' && screen.css > 'div.column.siteMenuColumn'] */ margin : -1px 0px 7px -1px; } ul.menu.siteScope { padding-top : 1px; } ul.menu.siteScope li.dropShadowOuter { display : block; position : relative; background-image : url('/assets/web/images/panelElements/dropShadow_panel_main.png'); /* filter : none !important; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/assets/web/images/shadowie6.png'); */ background-repeat : no-repeat; background-position : bottom right; margin : 3px 0px 0px 4px; border-bottom : none; } ul.menu.siteScope li { border-bottom : 1px solid #E0E0E0; position : relative; } ul.menu.siteScope li a { display : block; position : relative; /* * total height = 23px; * height : 18px; * total width = 190px * width : 188px; */ width : 150px; /* Width specified incase needs to go onto more than 1 button resizes correctly */ line-height : 13px; padding : 5px 15px 5px 3px; background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_black.png'); background-position : 157px 5px; background-repeat : no-repeat; color : #000000; font-size : 11px; font-weight : bold; } ul.menu.siteScope li a:hover { background-color : #ababab; background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_white.png'); color : #ffffff; } ul.menu.siteScope li.parent div.level1 { background-color : #FFFFFF; border-left : solid 1px #777777; border-top : solid 1px #777777; padding : 10px; position : absolute; left : 176px; top : -5px; } ul.menu.siteScope li a.dropShadowInner { display : block; position : relative; /* * total height = 23px; * height : 18px; * total width = 190px * width : 188px; */ width : 163px; /* Width specified incase needs to go onto more than 1 button resizes correctly */ line-height : 13px; padding : 5px 15px 5px 10px; border : 1px solid #ffffff; background-color : #7C7E7D; background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_white.png'); background-position : 172px 5px; background-repeat : no-repeat; color : #ffffff; font-weight : bold; font-size : 11px; } ul.menu.siteScope li a.dropShadowInner:hover { background-color : #ababab; } /* **************************************************************** SCOPE MENU FEATURE **************************************************************** This feature appears in 2 locations (within the home page & within overlay window) that can be targeted individually using the following paths: 1. HOME PAGE : - div.mainBody div.content div.scopeMenuDisplayContainer ..... 2. OVERLAY WINDOW : - #TB_actualContent div.scopeMenuDisplayContainer ..... **************************************************************** */ #TB_actualContent div.scopeMenuDisplayContainer { /*width : 570px;*/ width : 610px; } #TB_actualContent div.scopeMenuDisplayContainer { position : relative; height : 320px; } #TB_actualContent div.scopeMenuDisplayContainer div.sytnerLogo { position : absolute; top : 0px; left : 14px; width : 100px; height : 30px; background-image : url('/assets/web/images/overlayWindow/sytnerLogo_overlayWindow.png'); background-position : 0px 0px; background-repeat : no-repeat; } #TB_actualContent div.scopeMenuDisplayContainer h2 { position : absolute; top : 40px; left : 27px; margin : 0px; padding : 0px; font-size : 13px; } /* ============================================= * DEALER ONLY SCOPE MENU ============================================= */ /* * INSTRUCTIONS */ #TB_actualContent div.scopeMenuDisplayContainer p { position : absolute; top : 65px; left : 27px; margin : 0px; padding : 0px; color : #000000; font-size : 10px; } #TB_actualContent div.scopeMenuDisplayContainer ul#dealerLinkContainer { position : absolute; top : 85px; left : 27px; width : 256px; } /* ============================================= ============================================= */ #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer { position : absolute; top : 70px; left : 27px; } #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer li, #TB_actualContent div.scopeMenuDisplayContainer ul#dealerLinkContainer li, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer li, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#dealerLinkContainer li { display : block; position : relative; white-space : normal; margin : 0px; padding : 1px 0px 0px 0px; list-style-image : none; } #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer li.column1 { width : 80px; } #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer li.column2 { width : 95px; margin-left : 82px; } #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer li a, #TB_actualContent div.scopeMenuDisplayContainer ul#dealerLinkContainer li a, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer li a, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#dealerLinkContainer li a { display : block; width : auto; float : none; height : 14px; padding : 2px 5px 3px 13px; color : #000000; font-size : 10px; font-weight : bold; line-height : 14px; background-position : 1px 3px; text-decoration : none; } #TB_actualContent div.scopeMenuDisplayContainer ul#scopeLinkContainer li a:hover, #TB_actualContent div.scopeMenuDisplayContainer ul#dealerLinkContainer li a:hover, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer li a:hover, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#dealerLinkContainer li a:hover { background-color : #ababab; color : #ffffff; } #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter { position : absolute; top : 70px; left : 209px; /* * Have to set a width to work correctly in ie : === 'div.dropShadowInner' TOTAL width */ width : 385px; height : 242px; } #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner, div.Group div#home div#mainBodyContent div.dropShadowOuter div.dropShadowInner div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner { float : none; width : 383px; height : 240px; min-height : 240px; padding : 0px; border : 1px solid #777777; border-top : 1px solid #ababab; border-left : 1px solid #ababab; background-color : #ffffff; background-image : url('/assets/web/images/siteScopeMenu/scopeMenu_franchiseLogo_bodyGrad.jpg'); background-position : 0px 0px; background-repeat : repeat-x; } #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dealerLinksMode, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div.dropShadowOuter div.dealerLinksMode { background-image : url('/assets/web/images/siteScopeMenu/scopeMenu_dealerList_bodyGrad.jpg'); } #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeLogoContainer, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeLogoContainer { position : absolute; top : 46px; left : 43px; width : 298px; height : 148px; overflow : hidden; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeLogoContainer img, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeLogoContainer img { position : absolute; top : -1px; left : -1px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer a#scopeCloseDealerList, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer a#scopeCloseDealerList { position : absolute; top : -1px; right : 1px; display : block; padding-top : 3px; padding-right : 23px; padding-bottom : 5px; padding-left : 0px; background-image : url('/assets/web/images/buttonIcons/buttonIcon_closeDealerList_up.jpg'); background-position : top right; background-repeat : no-repeat; color : #3b3b3b; font-size : 10px; font-weight : bold; z-index : 50; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer a#scopeCloseDealerList:hover, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer a#scopeCloseDealerList:hover { color : #efefef; background-image : url('/assets/web/images/buttonIcons/buttonIcon_closeDealerList_over.jpg'); } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer { display : none; position : relative; top : 22px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer a.dealerHomepageLink, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer a.dealerHomepageLink { position : absolute; top : 19px; left : 9px; /* top : -22px; left : 5px; */ z-index : 100; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer a.dealerHomepageLink:hover, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer a.dealerHomepageLink:hover { color : #6b6b6b; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.headerBgnd, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.headerBgnd { position : absolute; top : -22px; left : 0px; width : 100%; height : 24px; /*background-color : #8b8b8b;#e0e0e0;*/ background-image : url('/assets/web/images/siteScopeMenu/scopeMenu_headerBar_background.jpg'); background-position : 0px -2px; background-repeat : repeat-x; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.manufacturerLogoContainer, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.manufacturerLogoContainer { position : absolute; top : 7px; right : 1px; width : 68px; height : 33px; overflow : hidden; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer img.manufacturerLogo, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer img.manufacturerLogo { position : absolute; top : -1px; right : -1px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer h3, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer h3 { position : absolute; top : 28px; left : 10px; padding : 0px; font-size : 10px; font-weight : bold; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu { position : absolute; top : 46px; left : 10px; width : 367px; height : 147px; padding : 5px 0px 0px 0px; margin : 0px; white-space : nowrap; /* border-top : 1px solid #e0e0e0; */ } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li { display : block; position : relative; white-space : normal; padding : 0px 0px 1px 0px !important; margin : 0px 0px 0px 0px; width : 100%; list-style-image : none; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li a, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li a { display : block; width : auto; height : 100%; float : none; line-height : 13px; padding : 2px 3px 2px 8px; margin : 0px 0px 0px 0px; color : #000000; font-size : 10px; font-weight : normal; background-image : url('/assets/web/images/buttonIcons/buttonIcon_scopeMenu_dealerLink_up.png'); background-position : 1px 5px; background-repeat : no-repeat; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li a:hover, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer ul.menu li a:hover { background-color : #ababab; color : #ffffff; background-image : url('/assets/web/images/buttonIcons/buttonIcon_scopeMenu_dealerLink_over.png'); } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.menuVerticalDivider { display : block; position : absolute; top : 51px; background-color : #e0e0e0; background-image : url('/assets/web/images/siteScopeMenu/scopeMenu_dealerList_vDiv.jpg'); background-position : 0px 0px; background-repeat : repeat-y; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.horizontalUnderline, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div.scopeDealerListContainer div.horizontalUnderline { display : block; position : absolute; top : 45px; left : 10px; width : 367px; height : 2px; background-image : url('/assets/web/images/siteScopeMenu/scopeMenu_dealerList_hDiv.jpg'); background-position : 0px 0px; background-repeat : repeat-x; } /* AUDI / BMW / LAND ROVER / MINI/ MERCEDES-BENZ COLUMNS : COMMON */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column1, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column1, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column1, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column1, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column1, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column1 { width : 172px; } #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column2, #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column2, #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column2, #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column2, #TB_actualContent div.scopeMenuDisplayContainer div.dropShadowOuter div.dropShadowInner div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column2, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column2 { width : 185px; margin-left : 182px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi div.menuVerticalDivider, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw div.menuVerticalDivider, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini div.menuVerticalDivider, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover div.menuVerticalDivider, #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz div.menuVerticalDivider { width : 2px; left : 185px; } /* AUDI */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column2FirstItem, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi ul.menu li.column2FirstItem { margin-top : -108px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersaudi div.menuVerticalDivider { height : 143px; } /* BMW */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column2FirstItem, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw ul.menu li.column2FirstItem { margin-top : -144px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersbmw div.menuVerticalDivider { height : 143px; } /* MINI */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column2FirstItem, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini ul.menu li.column2FirstItem { margin-top : -144px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmini div.menuVerticalDivider { height : 138px; } /* LAND ROVER */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column2FirstItem, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover ul.menu li.column2FirstItem { margin-top : -108px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersland-rover div.menuVerticalDivider { height : 143px; } /* MERCEDES-BENZ */ #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column2FirstItem, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz ul.menu li.column2FirstItem { margin-top : -139px; } #TB_actualContent div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz div.menuVerticalDivider, div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div#scopeDealershipContainer div#scopeDealersmercedes-benz div.menuVerticalDivider { height : 143px; } /* ======================================================================== ======================================================================== */ div#homePageScopeMenuContainer { position : relative; width : auto; height : auto; margin : 18px 0px 0px 0px; padding : 18px 0px 0px 0px; border-top : 1px solid #9b9b9b; /*border-bottom : 1px solid #9b9b9b;*/ } div#homePageScopeMenuContainer a { text-decoration : none; } div#homePageScopeMenuContainer li { list-style-image : none; } div#homePageScopeMenuContainer div.scopeMenuDisplayContainer { position : relative; width : 570px; height : 280px; } div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div.sytnerLogo { position : absolute; top : 0px; left : 0px; width : 0px; height : 0px; background-image : url(''); } div#homePageScopeMenuContainer div.scopeMenuDisplayContainer h2 { position : absolute; top : 0px; left : 0px; margin : 0px; padding : 0px; font-size : 13px; } div#homePageScopeMenuContainer div.scopeMenuDisplayContainer ul#scopeLinkContainer { position : absolute; top : 33px; left : 5px; margin : 0px; padding : 0px; } /* y = -40 x = -27 */ div#homePageScopeMenuContainer div.scopeMenuDisplayContainer div.dropShadowOuter { position : absolute; top : 33px; left : 187px; /* * Have to set a width to work correctly in ie : === 'div.dropShadowInner' TOTAL width */ width : 385px; height : 242px; } /* ======================================================================== ======================================================================== */ /* ======================================================================================================================================================= ======================================================================================================================================================= */ /* **************************************************************** TOOLS MENU **************************************************************** - The tool menu appears with utility links print e-mail site map etc. ***************************************************************** */ div.toolMenuContainer { position : absolute; top : -15px; left : 0px; width : 978px; height : 16px; padding : 0px 10px 0px 0px; margin : 0px; border-left : 1px solid #777777; border-right : 1px solid #777777; background-color : #000000; font-size : 10px; text-align : right; z-index : 1010; } ul.menu.tools { position : relative; float : right; /* position : absolute; top : 0px; right : 0px; */ text-align : left; } ul.menu.tools li { display : inline; } ul.menu.tools li a { float : left; display : block; height : 16px; padding : 1px 20px 0px 0px; margin : 0px 12px 0px 0px; color : #b5b5b5; text-decoration : none; background-position : top right; background-repeat : no-repeat; } ul.menu.tools li a.lastMenuItem { margin : 0px 0px 0px 0px; } ul.menu.tools li a:hover { color : #ffffff; text-decoration : underline; } ul.menu.tools a#toolsMenuBookmark { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_bookmark.jpg'); } ul.menu.tools a#toolsMenuBookmark:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_bookmark_over.jpg'); text-decoration : none; } ul.menu.tools a#toolsMenuPrint { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_print.jpg'); } ul.menu.tools a#toolsMenuPrint:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_print_over.jpg'); } ul.menu.tools a#toolsMenuEmail { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_email.jpg'); } ul.menu.tools a#toolsMenuEmail:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_email_over.jpg'); } ul.menu.tools a#toolsMenuSitemap { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_sitemap.jpg'); } ul.menu.tools a#toolsMenuSitemap:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_sitemap_over.jpg'); } ul.menu.tools a#toolsMenuCompare { color : #ffffff; text-decoration : underline; background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_compare.jpg'); } ul.menu.tools a#toolsMenuCompare:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_compare_over.jpg'); } ul.menu.tools a#toolsMenuFavourites { color : #ffffff; text-decoration : underline; background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_favourites.jpg'); } ul.menu.tools a#toolsMenuFavourites:hover { background-image: url('/assets/web/images/toolPanelMenu/buttonIcon_tools_favourites_over.jpg'); } /* * < :first-child > pseudo selector DOESN'T WORK in IE 6 * * THEREFORE : to target in IE 6 will need to set individual id'd elements */ ul.menu.tools li ul { /* * Display set to 'block' by javascript onHover */ display : none; position : absolute; left : -3px; top : 16px; margin : 0px; padding : 5px 5px 5px 5px; border : 1px solid #777777; border-top : 0px solid #000000; /* background-color : #ffffff; */ background-image : url('/assets/web/images/toolPanelMenu/toolPanel_background_white.png'); background-repeat : repeat; /* background-image : url('/assets/web/images/general/toolPanel_background_black.png'); background-image : url('/assets/web/images/general/toolPanel_background_gradient.png'); background-repeat : repeat-x; */ } ul.menu.tools li ul.bookmarks { width : 100px; } ul.menu.tools li ul li { display : block; clear : both; float : none; margin : 0px; padding : 0px; } ul.menu.tools li ul li a { float : left; display : block; padding : 3px 0px 0px 23px; margin : 2px 0px 0px 0px; /* * Icon on right : * padding : 3px 0px 0px 0px; width : 105px; background-position : top right; */ color : #000000; text-decoration : none; background-position : top left; background-repeat : no-repeat; } ul.menu.tools li ul li a:hover { color : #000000; text-decoration : underline; } ul.menu.tools li ul li a#toolsMenuDelicious { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_delicious.png'); } ul.menu.tools li ul li a#toolsMenuDigg { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_diggit.png'); } ul.menu.tools li ul li a#toolsMenuFaceBook { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_facebook.png'); } ul.menu.tools li ul li a#toolsMenuNewsVine { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_newsvine.png'); } ul.menu.tools li ul li a#toolsMenuReddit { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_reddit.png'); } ul.menu.tools li ul li a#toolsMenuStumbleUpon { background-image : url('/assets/web/images/toolPanelMenu/buttonIcon_tools-bookmarks_stumbleupon.png'); } /* ======================================================================================================================================================= ======================================================================================================================================================= */ /* **************************************************************** SITE PATH MENU **************************************************************** - Path menu shows users their place in the hierarchy tree allowing them to navigate back up. ***************************************************************** */ #mainBodyContent ul.menu.sitepath { font-size : 10px; font-style : italic; font-weight : bold; height : 15px; margin : 0px; padding : 5px 0px; } #mainBodyContent ul.menu.sitepath li { list-style : none; list-style-image : none; text-decoration : none; position : relative; float : left; height : 100%; } #mainBodyContent ul.menu.sitepath li a { display : block; margin : 0px; padding : 0px 10px 6px 0px; color : #9B9B9B; text-decoration : none; } #mainBodyContent ul.menu.sitepath li a:hover { color : #434C53; } #mainBodyContent ul.menu.sitepath li.active a { color : #434C53; text-decoration : none; /* * NOTE : Have to set 'padding-bottom' to be 1px bigger than 'ul.menu.sitepath li a' as setting bold reduced height by 1px!!! * FIXES : Height bug where bold text results in a height 1px SMALLER than should be */ padding-bottom : 7px; } /* * HOME : ROOT MODE * * - Please note that these sytles MUST be repeated in ie6.css as overridden */ #mainBodyContent ul.menu.sitepath li.home { } #mainBodyContent ul.menu.sitepath li.home a { background-image : none; } #mainBodyContent ul.menu.sitepath.vehicle { position : absolute; padding : 25px 0px 0px 0px; } div#online-service-booking div#mainBodyContent ul.menu.sitepath { padding : 25px 0px 0px 0px; } /* ======================================================================================================================================================= ======================================================================================================================================================= */ /* **************************************************************** IE 6 Z-INDEX IFRAME FIX STYLES **************************************************************** */ #ie6ZIndexFixIF { position : absolute; display : block; background-color : #0000ff; border : 1px solid #ff0000; /**/ z-index : -1; filter : alpha(opacity=0); -moz-opacity : 0.0; opacity : 0.0; }