/* ***************************************************************** ***************************************************************** CORE HTML STYLES FOR SCREEN BASED MEDIA - THIS STYLE SHEET SHOULD ONLY CONTAIN SCREEN SPECIFIC STYLE DEFINITIONS FOR ELEMENTS THAT ARE GENERALLY HIDDEN FROM PRINT VIEW ***************************************************************** ***************************************************************** */ /* **************************************************************** LINKS ***************************************************************** */ a { text-decoration : none; } a img { border : none; } /* **************************************************************** **************************************************************** **************************************************************** * IMPORTANT NOTES: * * - LAYING OUT ELEMENTS [ie v.7] & [ff v.2.0.0.11]: * * When using [position : relative] : position (top, left, right, bottom) is taken from 0,0 in parent and IGNORS any border setting on the parent * e.g. if (elementLeft = 10 && parentBorder = 5) THEN elementFinalLeft = 10 (i.e. no change) * * When using [position : absolute] : position (top, left, right, bottom) is taken from 0,0 in parent PLUS border width OR from the parents (width/height - border width) * e.g. if (elementLeft = 10 && parentBorder = 5) THEN elementFinalLeft = 15 !!! **************************************************************** **************************************************************** **************************************************************** */ /* **************************************************************** SYTNER Homepage Styles - Container element css styles that affect the sytner home page layout only. ***************************************************************** */ div.mainContainer.Group div#home div#mainBodyContent { /*background-image : url('/assets/web/images/sytnerHome/GradStrips.gif');*/ background-repeat : no-repeat; background-position : 0px 0px; margin : 0px; padding : 0px; width : 976px; height : 600px; left : 6px; } div.mainContainer.Group div#home div#mainBodyContent h1 { display : none; } div.featuredItemsPanel { float : left; padding-left : 10px; } div.featuredItemsPanel div#loopedSlider { width : 730px; position : relative; margin : 13px 0 0 0; } div.featuredItemsPanel div#loopedSlider div.slidesContainer { cursor : pointer; width : 730px; height : 390px; margin : 0px; padding : 0px; overflow : hidden; position : relative; } div.featuredItemsPanel div#loopedSlider div.slidesContainer div.slides { left : -1px; position : absolute; top : 0px; } div.featuredItemsPanel div#loopedSlider div.slidesContainer div.slides div { display : none; margin : 0px; padding : 0px; position : absolute; top : 0px; width : 730px; } div.featuredItemsPanel div#loopedSlider a.previous { left : 0px; top : 150px; position : absolute; } div.featuredItemsPanel div#loopedSlider a.next { right : 0px; top : 150px; position : absolute; } div.featuredItemsPanel div#loopedSlider ul.pagination { bottom : 0px; list-style : none; margin : 0px 0px 10px 10px; padding : 0px; position : absolute; font-size : 0px; } div.featuredItemsPanel div#loopedSlider ul.pagination li { float : left; list-style-image : none; font-size : 0px; } div.featuredItemsPanel div#loopedSlider ul.pagination li a { background-image : url('/assets/web/images/sytnerHome/loopedslider.gif'); background-position : 0px 0px; background-repeat : no-repeat; display : block; margin : 0px 10px 0px 0px; overflow : hidden; padding-top : 12px; width : 12px; font-size : 0px; } div.featuredItemsPanel div#loopedSlider ul.pagination li a.active { background-image : url('/assets/web/images/sytnerHome/loopedslider_active.gif'); } div.mainContainer.Group div#home div#mainBodyContent div.iconRelatedItems { float : right; margin : 0px; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks { float : right; padding : 10px 0 0 0; margin : 0px; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul { border : none; list-style : none; margin : 0px; padding : 0px; text-decoration : none; width : 225px; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul li { clear : both; float : left; list-style-image : none; width : 100%; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul li a { text-decoration : none; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul li.facebook a, div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul li.facebook img { width : 130px; height : 45px; display : block; } div.mainContainer.Group div#home div#mainBodyContent div.socialNetworkFeaturedLinks ul li.facebook a { margin : 0px auto; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanelLabel { float:left; width:966px; margin:0px; padding : 10px 0px 0px 10px; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanelLabel h3 { float:left; width:auto; font-weight:bold; font-size:13px; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanelLabel h4 { float:left; font-weight:normal; font-size:13px; margin:5px 0 0 5px; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel { clear : both; float : left; width : 976px; height : auto; padding : 10px 0px 0px 0px; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer { list-style-type:none; list-style-image:none; margin:0; padding:0; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li { list-style-image:none; position:relative; float:left; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a { position : relative; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a img { padding:2px; margin:0 0 20px 0; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a#scopeFranchiseLinksytnerselect { display:none; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a div.manufacturerLogoHover { position : absolute; width : 140px; height : 125px; top : -95px; left : -32px; } @media screen and (-webkit-min-device-pixel-ratio:0) { div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a div.manufacturerLogoHover { position : absolute; width : 140px; height : 125px; top : -185px; left : -30px; } } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a div.manufacturerLogoHover h3 { position : absolute; bottom : 20px; text-align : center; width : 100px; margin : 0px 20px; border-top : dashed 1px black; color : #3F3F3F; } div.mainContainer.Group div#home div#mainBodyContent div.manufacturerControlPanel ul#scopeLinkContainer li a div.manufacturerLogoHover img { margin : 0px; padding : 0px; } /* **************************************************************** CORE NAMED LAYOUT STYLES : MAIN ELEMENT CONTAINERS - Container element css styles that affect the overal page layout. ***************************************************************** */ img#printLogo { display : none; position : absolute; width : 0px; height : 0px; } div.mainContainer { position : relative; width : 990px; margin : 15px auto 20px auto; text-align : left; background-image : none; } div.mainBody { background-color : #ffffff; background-image:none; background-repeat : no-repeat; background-position : 0px 0px; border : 1px solid #777777; /* border-top-width : 0; */ margin : 0px 0px 7px 0px; padding-top : 129px; } div.mainContainer.porsche div.mainBody { padding-top : 100px; } div.mainContainer.mclaren div.mainBody { background-color : #000000; padding-top : 100px; } div.Group div.mainBody div.headerLogo { position : absolute; width : 700px; height : 350px; top : 1px; left : 1px; background-image : url('/assets/web/images/general/sytnerLogo.png'); background-repeat : no-repeat; background-position : 0px 0px; display : none; } div.headerLogo { position : absolute; width : 700px; height : 350px; top : 1px; left : 1px; background-image : url('/assets/web/images/general/sytnerLogo.png'); background-repeat : no-repeat; background-position : 0px 0px; } a.sytnerLogoHomeLink { position : absolute; top : 36px; left : 42px; } div.column.content { /* * Width = inner content width + inner content border + drop shadow width [ nb: DROP SHADOW SIZE FACTORING ] * = 600 + 2 + 4 * = 606 */ position : relative; left : 203px; width : 606px; } div.column.content div.dropShadowInner { /* * Width = 602 [600 + border width + container padding] * minHeight = min-height + border width + container padding; * = 480 */ width : 575px; /* 575 */ min-height : 546px;/*477px;*/ /*443px;*/ /* 478px - NOTE: Need to update [ ie6.css > 'div.column.content div.dropShadowInner' height property ] when this value is updated */ padding : 15px 10px 15px 15px; background-color : #FFFFFF; border : 1px solid #777777; } /* * HOME PAGE MIN-HEIGHT */ div.Group div#home div#mainBodyContent div.dropShadowOuter div.dropShadowInner { min-height : 536px; } div.Location div.column.content div.dropShadowInner { min-height : 520px; } /* * STYLE AUTOMATICALLY APPLIED WHEN PANEL FEATURES ARE MOVED INTO THE SIDE PANELS TO ENSURE CENTRE COLUMN TALL ENOUGH */ div#mainBodyContent.mainContentExtendedHeight div.dropShadowInner { min-height : 1000px; } #mainBodyContent div.dropShadowInner div.dropShadowOuter { position : relative; float : left; } #mainBodyContent div.dropShadowInner div.dropShadowOuter div.dropShadowInner { /* * RESET DEFAULT WIDTH & HEIGHT - this does mean that HAVE TO ALWAYS set min-height & min-width for ie.7 */ width : auto; height : auto; min-width : 20px; min-height : 20px; padding : 0px 0px 0px 0px; background-color : #FFFFFF; border : 1px solid #777777; } div.column.content div.dropShadowInner p { padding : 10px 0px 10px 0px; font-size : 11px; } div.column.siteMenuColumn { /* * Width = inner content width + inner content border width + drop shadow width [ nb: DROP SHADOW SIZE FACTORING ] * = 188 + 2 + 4 * = 194 */ position : absolute; left : 7px; top : 130px; width : 194px; } div.mainContainer.porsche div.column.siteMenuColumn, div.mainContainer.mclaren div.column.siteMenuColumn { top : 101px; } div.column.related { /* * Width = colume width + drop shadow width [ nb: DROP SHADOW SIZE FACTORING ] * = 170 + 4 * = 174 */ position : absolute; width : 174px; top : 130px; right : 3px; /* x = 813px */ /* left : 813px;*/ } div.mainContainer.porsche div.column.related { top : 101px; } div.column.related div.dropShadowInner { /* * Total width = 170 */ width : 170px; overflow : hidden; } /* **************************************************************** CORE PANEL RELATED STYLES - All common panel related styles. ***************************************************************** */ div.panelGroup { clear : both; } div.panelGroup.panelGroupBody, div.panelGroup.panelGroupFooter { padding : 0px 0px 0px 6px; } div.panelGroup.panelGroupFooter { clear : both; background-color : #FFFFFF; border : 1px solid #777777; margin : 0px 0px; /* padding : 0px 0px 0px 6px; */ } div.panelGroup div.panel { } div.panelGroup div.panel.dropShadowOuter { float : left; /* * Margin : margins compensate for shadow widths and associated offsets [ nb: DROP SHADOW BASED FACTORING ] * Top = desired margin + drop shadow height * = 7 + 4 * = 11 * Left = desired margin + drop shadow width * = 0 + 4 * = 4 */ margin : 11px 0px 7px 4px; } div.panelGroup div.panel.dropShadowOuter.oddPanel { margin-right : 2px } div.panelGroup div.panel.dropShadowOuter.evenPanel { margin-right : 0px } div.panelGroup div.panel div.dropShadowInner { /* * SIZE: * This class controls the default panel size (total = 485px x 137px) * * Specific class variants (eg.'div.dropShadowInner.list'): * : Each can apply own padding settings to control content position therefore MUST ALSO reset width & height settings to match */ float : none; width : 100%; height : 135px; border : 1px solid #777777; overflow : hidden; } div.panelGroup div.panel div.dropShadowInner.panelList { /* * SIZE: * Total = 485px x 137px to match 'div.dropShadowInner' * * NOTE: has 1 px border therefore needs to be total width of 483px */ width : 467px; height : 130px; padding : 5px 8px 0px 8px; } div.panelGroup div.panel div.dropShadowInner h2 { position : absolute; top : 8px; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; font-size : 13px; font-style : normal; font-weight : bold; } div.panelGroup div.panel div.dropShadowInner h2 a { text-decoration : none; } div.panelGroup div.panel div.dropShadowInner h2 a:hover { text-decoration : underline; } div.panelGroup div.panel div.dropShadowInner h3 { margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; color : #000000; font-size : 10px; font-style : normal; font-weight : bold; /*line-height : 13px;*/ } div.panelGroup div.panel div.dropShadowInner p { margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; color : #000000; font-size : 10px; font-style : normal; font-weight : normal; /*line-height : 13px;*/ } div.panelGroup div.panel div.dropShadowInner img.headerUnderline, div.panelGroup div.panel div.dropShadowInner div.headerUnderline { position : absolute; width : 467px; height : 2px; top : 28px; } div.panelGroup div.panel div.dropShadowInner.panelList a.iconButton.iconLeft.smallArrow { float : right; } /* **************************************************************** NEWS (& EVENTS) / OFFERS PANELS & PANEL ELEMENTS ***************************************************************** */ div.panelGroup div.panel div.dropShadowInner div.panelItemsCollection { position : absolute; top : 28px; padding : 9px 0px 0px 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.news, div.panelGroup div.panel div.dropShadowInner.panelList.offers { background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_light.jpg'); background-repeat : repeat-x; background-position : 0px 0px; } /* * ITEM (Default - used for secondary) */ div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItemsCollection div.panelItem, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItemsCollection div.panelItem { float : left; width : 230px; height : 30px; overflow : hidden; padding : 2px 0px 0px 0px; margin : 0px 0px 0px 0px; background-image : url(''); /* Done to remove ie.6 bug where style inherited from parent container (div.dropShadowInner.list.news) */ } /* * ITEM : HOVER STATE */ div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItemsCollection div.panelItem:hover, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItemsCollection div.panelItem:hover { background-image : url('/assets/web/images/panelElements/footerPanels/footerPanel_light_itemLink_small_over_background.jpg'); background-position : 0px 0px; background-repeat : repeat-x; } /* * PRIMARY ITEM */ div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItemsCollection div.panelItem.primary, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItemsCollection div.panelItem.primary { float : left; width : 225px; height : 90px; margin : 0px 12px 5px 0px; overflow : hidden; } /* * PRIMARY ITEM : HOVER STATE */ div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItemsCollection div.panelItem.primary:hover, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItemsCollection div.panelItem.primary:hover { background-image : url(''); } div.panelGroup div.panel div.panelItemsCollection div.panelItem.primary div.dropShadowOuter { width : 75px; height : 50px; border : none; margin-bottom : 5px; } div.panelGroup div.panel div.panelItemsCollection div.panelItem.primary div.dropShadowInner { width : 75px; height : 50px; border : none; } div.panelGroup div.panel div.dropShadowInner.panelList div.panelItem.primary h3 { width : 135px; height : 51px; margin : 0px 0px 0px 5px; padding : 0px 0px 0px 0px; overflow : hidden; /*text-align : justify;*/ } div.panelGroup div.panel div.dropShadowInner.panelList div.panelItem.primary h3.noImage { width : 220px; height : 51px; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; overflow : hidden; /*text-align : justify;*/ } div.panelGroup div.panel div.dropShadowInner.panelList div.panelItem.primary p { position: absolute; width : 220px; height : 28px; top : 70px; overflow: hidden; /* width : 100%; */ margin : 0px 6px 0px 0px; padding : 0px 0px 0px 0px; /*line-height : 13px;*/ /*text-align : justify;*/ } /* * SECONDARY (OTHER) ITEMS */ div.panelGroup div.panel div.panelItemsCollection div.panelItem.secondary div.dropShadowOuter { width : 50px; height : 25px; border : none; } div.panelGroup div.panel div.panelItemsCollection div.panelItem.secondary div.dropShadowInner { width : 50px; height : 25px; border : none; } div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem.secondary h3, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem.secondary h3 { width : 172px; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 3px; color : #000000; font-size : 10px; font-style : normal; font-weight : normal; /* line-height : 12px; */ } div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem.secondary h3 a, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem.secondary h3 a { width : 172px; height : 26px; display : block; overflow : hidden; text-decoration : none; } div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem.secondary h3.noImage, div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem.secondary h3.noImage a { width : 225px; } div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem.secondary h3 { width : 230px; padding : 0px 0px 0px 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem.secondary h3 a { /* * Dimensions MUST match h3 tag above */ width : 218px; /* has 12px left padding !!! */ padding-right : 0px; } /* * ITEMS : COMMON ELEMENTS */ div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem a:link, div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem a:visited, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem a:link, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem a:visited { color : #000000; text-decoration : none; } div.panelGroup div.panel div.dropShadowInner.panelList.news div.panelItem a:hover, div.panelGroup div.panel div.dropShadowInner.panelList.offers div.panelItem a:hover { color : #000000; text-decoration : underline; } div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer { position : absolute; display : block; top : 28px; } div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer p, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer p { padding : 11px 0px 10px 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer p { padding : 14px 10px 10px 10px; } div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer a, div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer a:link, div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer a:visited, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer a, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer a:link, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer a:visited, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer a, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer a:link, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer a:visited { color : #7b7b7b; text-decoration : none; } div.panelGroup div.panel div.dropShadowInner.panelList.news div#noDataMessageContainer a:hover, div.panelGroup div.panel div.dropShadowInner.panelList.offers div#noDataMessageContainer a:hover, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div#noDataMessageContainer a:hover { text-decoration : underline; color : #000000; } /* **************************************************************** LATEST VEHICLES / FAVOURITES & SOME COMMON STYLES FOR POPULAR-SEARCHES ***************************************************************** */ /* * CORE OVERRIDES */ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches { /* * SIZE: * Total = 485px x 137px to match 'div.dropShadowInner' * * NOTE: has 1 px border therefore needs to be total width of 483px */ width : 475px; height : 135px; padding : 0px 0px 0px 8px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches { background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_dark.jpg'); } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.panelItemsCollection, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection { position : absolute; top : 32px; padding : 0px 0px 0px 0px; clear : both; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles a.iconButton.iconLeft.smallArrow, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches a.iconButton.iconLeft.smallArrow { margin-right : 8px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles .pngHDivider, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches .pngHDivider { background-image : url('/assets/web/images/panelElements/footerPanels/footerPanel_dark_hDivider.png') !important; background-position : 0px 0px; background-repeat : repeat-x; filter : none !important; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/assets/web/images/panelElements/footerPanels/footerPanel_dark_hDivider.png'); background-image : none; /* * NASTY HACK: ie.6 gives any element with an opening and closing tag a default minimum height * - the height relates to (minimum text height + 2 px) * * LUCKILY: In this case the height needs to be 2px high !!! phew */ font-size : 0px; line-height : 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.vehiclePanelItemDivider, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.vehiclePanelItemDivider { width : 230px; height : 2px; display : block; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles h2, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches h2, div.panelGroup div.panel div.dropShadowInner.vehicles h3, div.panelGroup div.panel div.dropShadowInner.vehicles p { color : #FFFFFF; padding : 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles a.iconButton.iconLeft.smallArrow, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches a.iconButton.iconLeft.smallArrow { margin-top : 5px; } /* ************************************* DISPLAY STACK TAB MENU ************************************* */ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer { position : absolute; top : 0px; left : 0px; width : 483px; padding : 0px; margin : 0px; } /* * BUTTONS */ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton { position : relative; float : left; /* z-index : 1000; */ } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton div.tabShadowLeft { position : relative; float : left; height : 28px; background-image : url(''); background-position : 0px 0px; background-repeat : no-repeat; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton div.tabShadowRight { position : relative; float : left; width : 0px; height : 28px; background-image : url(''); background-position : 0px 0px; background-repeat : no-repeat; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton h2 { position : relative; float : left; display : block; width : auto; height : 20px; top : 0px; padding : 8px 25px 0px 20px; color : #CCCCCC; background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_dark_tab_bgnd_up.png'); background-position : 0px 0px; background-repeat : no-repeat; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton.button1 h2 { padding-left : 8px; background-position : -2px 0px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton h2 a { color : #CCCCCC; text-decoration : none; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton h2 a:hover { color : #ffffff; text-decoration : underline; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton.button1 { z-index : 11; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton.button2 { z-index : 12; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuButton.button3 { z-index : 13; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button2, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state3 div.displayStackMenuButton.button3 { margin-left : -100px; z-index : 10; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state1 div.displayStackMenuButton.button2, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button3 { margin-left : -100px; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button2 div.tabShadowLeft, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state3 div.displayStackMenuButton.button3 div.tabShadowLeft { width : 100px; background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_dark_tab_shadow_left.png'); } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state1 div.displayStackMenuButton.button1 div.tabShadowRight, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button2 div.tabShadowRight, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state3 div.displayStackMenuButton.button3 div.tabShadowRight { width : 100px; background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_dark_tab_shadow_right.png'); } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state1 div.displayStackMenuButton.button2 h2, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button3 h2 { background-image : url(''); } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state1 div.displayStackMenuButton.button1 h2 a, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state1 div.displayStackMenuButton.button1 h2 a:hover, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button2 h2 a, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state2 div.displayStackMenuButton.button2 h2 a:hover, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state3 div.displayStackMenuButton.button3 h2 a, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.state3 div.displayStackMenuButton.button3 h2 a:hover { color : #ffffff; text-decoration : none; /* background-image : url(''); */ } /* * NOTE : 4 MENUS THAT COMPLETELY FILL AN AREA & right shadow NOT required * : If 'displayStackMenuEndDivider' used (not currently) : DISABLE the following styles: * - [ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuEndDivider ] * - [ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons2.state2 div.displayStackMenuEndDivider ...etc... ] * * : Remove background image from right most h2 */ /* div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer div.displayStackMenuEndDivider { position : relative; float : left; width : 2px; height : 28px; background-image : url('/assets/web/images/panelElements/footerPanels/backgroundGradient_footerPanel_dark_tab_bgnd_up.png'); background-position : 0px 0px; background-repeat : no-repeat; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons2.state2 div.displayStackMenuEndDivider, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons3.state3 div.displayStackMenuEndDivider { width : 0px; background-image : url(''); } */ /* * REMOVE LAST TAB SHADOW : * div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons1.state1 div.displayStackMenuButton.button1 div.tabShadowRight, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons2.state2 div.displayStackMenuButton.button2 div.tabShadowRight, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackMenuContainer.totalButtons3.state3 div.displayStackMenuButton.button3 div.tabShadowRight { background-image : url(''); } */ /* ************************************* DISPLAY STACK DISPLAY CONTAINER ************************************* */ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackContainer { } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackContainer div.display1, div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackContainer div.display2 { visibility : hidden; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackContainer.displayState1 div.display1 { visibility : visible; } div.panelGroup div.panel div.dropShadowInner.panelList.vehicles div.displayStackContainer.displayState2 div.display2 { visibility : visible; } /* ************************************* CONTAINER CONTENT ITEMS ************************************* */ /* ***************************** LATEST VEHICLES ***************************** */ div.panelGroup div.panel div.vehicles div.panelItemsCollection div.panelItem.vehicle { width : 230px; height : 34px; float : left; position : relative; margin-right : 7px; } /* * CONTAINER HOVER STATE */ div.panelGroup div.panel div.panelList.vehicles div.panelItem.vehicle:hover { background-image : url('/assets/web/images/panelElements/footerPanels/footerPanel_dark_itemLink_small_over_background.jpg'); background-position : 0px 0px; background-repeat : repeat-x; } div.panelGroup div.panel div.vehicles div.panelItemsCollection div.panelItem div.dropShadowOuter { width : 45px; height : 30px; border : none; } div.panelGroup div.panel div.vehicles div.panelItemsCollection div.panelItem div.dropShadowInner { width : 45px; height : 30px; border : none; } div.panelGroup div.panel div.vehicles div.panelItem h3 { position : absolute; padding : 0px; top : 1px; left : 50px; overflow : hidden; font-weight : normal; } div.panelGroup div.panel div.vehicles div.panelItem h3 a { width : 130px; margin : 0px 0px 0px 0px; padding : 0px 50px 0px 0px; } div.panelGroup div.panel div.vehicles div.panelItem h3 a:link, div.panelGroup div.panel div.vehicles div.panelItem h3 a:visited { color:#ffffff; text-decoration:none; } div.panelGroup div.panel div.vehicles div.panelItem h3 a:hover { color:#ffffff; text-decoration:none; } div.panelGroup div.panel div.vehicles div.panelItem p { position : absolute; top : 1px; left : 178px; width : 50px; margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; clear : none; text-align : right; font-weight : bold; } div.panelGroup div.panel div.vehicles div.panelItem p a { width : 50px; } /* ***************************** FAVOURITES SPECIFIC ***************************** */ div.panelGroup div.panel div.vehicles div.panelItemsCollection div.panelItem.instructions { /* * This DIV pushes and vehicles / vehicle placeholders off the bottom of the screen if displayed */ float : left; position : relative; width : 467px; /* MUST MATCH : [ div.panelGroup div.panel div.dropShadowInner.panelList.vehicles > width (above) ] - effective margin right (8px) == 475 - 8 = 467 */ height : 100px; margin : 0px 0px 10px 0px; background-color : #ffffff; } div.panelGroup div.panel div.vehicles div.panelItem.instructions h3 { position : relative; top : 0px; left : 0px; width : auto; margin : 0px 10px 0px 10px; padding : 10px 0px 0px 0px; color : #000000; font-weight : bold; } div.panelGroup div.panel div.vehicles div.panelItem.instructions p { position : relative; top : 0px; left : 0px; width : auto; color : #000000; margin : 0px 10px 0px 10px; padding : 2px 0px 3px 0px; font-weight : normal; text-align : left; } /* **************************************************************** POPULAR SEARCHES ***************************************************************** */ /* * CORE OVERRIDES */ div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches { } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection { background-color : #ffffff; height : 100px; width : 467px; overflow : hidden; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection ul { margin : 5px 5px 0px 5px; padding : 0px 0px 0px 0px; color : #000000; font-size : 10px; list-style :none; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection ul li { margin : 0px 0px 0px 0px; padding : 0px 0px 0px 0px; position : relative; display : block; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection ul li:hover { background-color : #dddddd; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection h3 { position : relative; display : block; top : 0px; left : 5px; padding : 0px 0px 0px 0px; margin : 0px 0px 0px 0px; line-height : 18px; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection h3 a { position : relative; display : block; color : #000000; /*width : 316px;*/ width : 370px; height : 17px; padding : 0px 0px 1px 0px; white-space : nowrap; overflow : hidden; text-overflow : ellipsis; } div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection h3 a:hover { background-color : #dddddd; } /* div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection a.new { position : absolute; top : 0px; left : 325px; width : 65px; padding : 2px 0px 2px 0px; color : #000000; } */ div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection a.price { position : absolute; top : 0px; left : 390px; width : 67px; padding : 2px 0px 2px 11px; color : #000000; } /*div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection a.new:hover, div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection a.used:hover,*/ div.panelGroup div.panel div.dropShadowInner.panelList.popularSearches div.panelItemsCollection a.price:hover { text-decoration : underline; } /* ***************************************************************** FEATURE PANELS LINKS WHEN IN SIDE-PANEL MODE ****************************************************************** */ div.sidePanelContainer h2 { margin : 20px 0px 0px 0px; padding : 0px 0px 6px 0px; border-bottom : #b9b9b9 1px solid; font-size : 13px; font-weight : bold; } div.column.siteMenuColumn div.sidePanelContainer h2 { width : 190px; } div.column.related div.sidePanelContainer h2 { width : 167px; } div.sidePanelContainer div.panelItemsCollection { padding : 0px 0px 10px 0px; } div.column.related div.sidePanelContainer, div.column.related div.sidePanelContainer a { width : 155px; } div.column.siteMenuColumn div.sidePanelContainer, div.column.siteMenuColumn div.sidePanelContainer a { width : 178px; } div.column.siteMenuColumn div.sidePanelContainer p a, div.column.siteMenuColumn div.sidePanelContainer p a:link, div.column.siteMenuColumn div.sidePanelContainer p a:visited { color : #6b6b6b; } div.column.siteMenuColumn div.sidePanelContainer p a:hover { color : #000000; text-decoration : underline; } /* * LINKS */ div.sidePanelContainer h2 a { text-decoration : none; } div.sidePanelContainer h2 a:hover { text-decoration : underline; } div.sidePanelContainer div.panelItemsCollection a { display : block; /* height : 30px; min-height : 26px; */ min-height : 13px; padding : 2px 0px 4px 12px; border-top : #ffffff 1px solid; border-bottom : #b9b9b9 1px solid; color : #000000; background-position : left 2px; background-image : url('/assets/web/images/buttonIcons/buttonIcon_arrow_black.png' ); background-repeat : no-repeat; } div.sidePanelContainer div.panelItemsCollection a:hover { background-color : #dcdcdc; } /* **************************************************************** FOOTER STYLES All elements that appear below the content portion of the page. ***************************************************************** */ div.footerContainer { margin : 20px 7px 0px 7px; padding : 0px 0px 20px 0px; } div.footerContainer p { font-size : 10px; } div.manufacturerLinks { } div.footerContainer h3 { font-size : 10px; font-weight : normal; color : #7e7e7e; letter-spacing : 1px; } div.footerContainer p, div.footerContainer a { color : #999999; margin :0px; padding :0px; } div.footerContainer a:hover { color : #7e7e7e; text-decoration : underline; } div.footerContainer div.footerDivider { position : relative; float : left; width : 100%; height : 2px; background-image : url('/assets/web/images/general/siteFooterHDivider.png') !important; background-position : 0px 0px; background-repeat : repeat-x; filter : none !important; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/assets/web/images/general/siteFooterHDivider.png'); background-image : none; margin : 2px 0px 7px 0px; padding : 0px; /* * NASTY HACK: ie.6 gives any element with an opening and closing tag a default minimum height * - the height relates to (minimum text height + 2 px) * * LUCKILY: In this case the height needs to be 2px high !!! phew */ font-size : 0px; line-height : 0px; } div.footerContainer div.manufacturerLinks { float : left; width : 482px; margin : 0px 6px 12px 0px; } div.footerContainer div.usefulLinks { float : left; width : 480px; margin : 0px 0px 12px 8px; } div.footerContainer div.manufacturerLinks, div.footerContainer div.usefulLinks { text-align : justify; } div.footerContainer p.copyrightNotice { width : 100%; position : relative; float : left; text-align : center; padding : 0px 0px 20px 0px; } div.SWFbanner { margin:20px 0 0 0; }