/* ************************************************************ * Forepoint CSS File ************************************************************ * * Author: * Company: Forepoint Ltd * * URL: http://www.forepoint.co.uk * ************************************************************ * * Filename: main.css * Version: 1.1.0 * Created: 03.08.2009 * Updated: 03.08.2009 * ************************************************************ */ /* Reset -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } :focus { outline:1px dotted #999;} table { border-collapse: collapse; border-spacing: 0;} html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Type Layout -------------------------------------------------------------- */ body { line-height: 1.5;} table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; } table, td, th { vertical-align: middle; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } table { border-collapse: separate; border-spacing: 0;} th, tr, td { margin: 0; padding: 0;} /* -- Set Font Styles (Color, Type Face) -- */ body { font-size: 75%; color: #5a5a5a; font-family: Arial, Helvetica, sans-serif; background: #E9EBEF url(../images/_layout/mainBg.png) no-repeat top center; } body.homepage { background: #E9EBEF url(../images/adverts/MOT_WorldCup_bg.jpg) no-repeat top center; } h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #FFFFFF; background: none; padding: 0; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } p { margin: 0 0 1em; line-height: 1.5em; font-size: 1em; } p img.left { float:left; margin: 0 1.5em 1.5em 0; padding: 0; } p img.right { float:right; margin: 0 0 1.5em 1.5em; } a:focus, a:hover { color: #00606e; text-decoration: none; } a { color: #00606e; text-decoration: underline; } blockquote { margin: 1.5em; color: #555555; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color: #555555; } pre { margin :1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height:1.5; } li ul, li ol { margin: 0 1.5em; } ul, ol { margin-bottom: 1.5em; margin: 0 0 10px 20px; } ul { list-style-type: disc; } ul li ul { margin: 0 0 0 40px; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} table { } tr { } th { font-weight: bold; text-align:center; } th,td,caption { padding:0px 7px 0px 7px;text-align:center; } acronym { border-bottom: 1px dotted #58595A; } /* To replace with an image, give the tag a class of 'imgReplace' and then place a tags around the element you wish to replace */ .imgReplace, .iR, .btnReplace { background-position: top; background-repeat: no-repeat; display: block; } .imgReplace span, .iR span, .btnReplace span { display: none; visibility: hidden; } /* Common Styles (Text & Headers) -------------------------------------------------------------- */ .container { margin: 0 auto; width: 940px; } .max { width:100%; } /* Clear */ .clear { clear:both; } div.clear{height:0;} /* Text Alignment */ .aLeft { text-align: left; } .aRight { text-align: right; } .aJustify { text-align: justify; } .aCenter { text-align: center; } /* Misc Styles */ .hidden { display:none; } .nobullets { list-style: outside none; } .nobullets li { list-style: none; } .inline li{ display:inline; } .printOnly {display:none; visibility:hidden;} /* Text Sizes & Styles*/ .smaller { font-size:0.833em; margin-bottom:1.8em; line-height:1.8em; } .small { font-size:0.916em; margin-bottom:1.636em; line-height:1.636em; } .large { font-size:1.2em; line-height:2.5em; margin-bottom:1.25em; } .padded { padding-left:16px; } .italics { font-style: italic; } /* Header Styles */ h1 {/* background: transparent url(../images/_layout/moto-logo.png) no-repeat scroll right center;*/ height: 70px; } h2 { font-size: 2.6em; font-weight: bold; color: #58595A; margin: 0 0 15px 0; } h3 { font-size: 1.2em; color: #00606E; font-weight: bold; margin: 0 0 15px 0; } h4 { font-size: 1.1em; color: #00606E; font-weight: bold; margin: 0 0 5px 0; } h5 { font-size: 1.1em; font-weight: bold; margin: 0 0 10px 0; } /* Remove Border for Img Links */ a img { border:none; } /* Degugging */ .showgrid { background:url(../images/grid.gif) 0 0; } .showborder { border-top:1px solid red; border-bottom:1px solid red; } .highlight { background-color: #00FF00; } /* Common Dimensions -------------------------------------------------------------- */ .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; } /* Floats */ .fLeft { float:left;} .fRight { float:right;} .alpha, .first { margin-left: 0; } .omega, .last { margin-right: 0; } .col1 { width:40px; } .col2 { width:100px; } .col3 { width:160px; } .col4 { width:220px; } .col5 { width:280px; } .col6 { width:340px; } .col7 { width:400px; } .col8 { width:460px; } .col9 { width:520px; } .col10 { width:580px; } .col11 { width:640px; } .col12 { width:700px; } .col13 { width:760px; } .col14 { width:820px; } .col15 { width:880px; } .col16 { width:940px; } /* Common Structure (E.G. #hdr, #nav, #body, #footer) -------------------------------------------------------------- */ #header { height: 100px; margin-top: 10px; margin-bottom: 16px; } #header h1 a { width: 209px; height: 70px; background: url(../images/_layout/moto-logo.png) no-repeat; display: block; outline: none; } #header #accessibilityLink { color: #5a5a5a; text-decoration: none; border-bottom: 1px dotted #9C9C9C; margin-right: 27px; } #header #accessibilityLink:hover { color: #2E6D7C; border-bottom: none; } #header #nav { margin-top: 20px; float: right; } #nav li { font-size: 1.4em; font-weight: bold; float: right; } #nav li a { color: #9C9C9C; text-decoration: none; height: 40px; display: block; float: left; line-height: 40px; outline: none; } #nav li a span { border-bottom: 1px dotted #9C9C9C; } #nav li a:hover span, #nav li a.current span { border-bottom: none; color: #2E6D7C; } #nav li a#homeLink { width: 96px; margin-left: 8px; text-indent: 25px; } #nav li a#coachLink { width: 96px; margin-left: 8px; text-indent: 22px; } #nav li a#careersLink { width: 112px; margin-left: 8px; text-indent: 22px; } #nav li a#businessLink { width: 134px; margin-left: 8px; text-indent: 30px; } #nav li a#truckerLink { width: 115px; margin-left: 8px; text-indent: 28px; } #nav li a#valueLink { width: 96px; margin-left: 0px; text-indent: 25px; } #header #nav li a#homeLink:hover, #header #nav li a#homeLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px 0px; } #header #nav li a#coachLink:hover, #header #nav li a#coachLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px -45px; } #header #nav li a#careersLink:hover, #header #nav li a#careersLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px -181px; } #header #nav li a#businessLink:hover, #header #nav li a#businessLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px -91px; } #header #nav li a#truckerLink:hover, #header #nav li a#truckerLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px -137px; } #header #nav li a#valueLink:hover, #header #nav li a#valueLink.current { background: url(../images/_layout/navHoverState-140.png) no-repeat 0px -45px; } #intro { background: transparent url(../images/_layout/introHeader.png) no-repeat scroll left top; height: 280px; position: relative; } #intro #brandCycle { width: 915px; height: 238px; margin: 0 auto; padding-top: 12px; top: 12px; overflow: hidden; } #intro h2 { position: absolute; background: transparent url(../images/_layout/headerBanner.png) no-repeat left top; width: 584px; height: 64px; right: -56px; margin-top: 70px; line-height: 52px; text-indent: 40px; color: #646464; z-index: 100; } .brandBannerBackground { height:238px; width:915px; overflow:hidden; } #brandBanner_burger-king { background: url(/assets/images/brandNewHeaders/burger-king.png) no-repeat; } #brandBanner_costa { background: url(/assets/images/brandNewHeaders/costa.png) no-repeat; } #brandBanner_edc { background: url(/assets/images/brandNewHeaders/edc.png) no-repeat; } #brandBanner_m--s-simply-food { background: url(/assets/images/brandNewHeaders/m--s-simply-food.png) no-repeat; } #brandBanner_whsmith { background: url(/assets/images/brandNewHeaders/whsmith.png) no-repeat; } .brandBannerBullets { float: right; margin: 5px 10px; line-height: 1.5em; } .brandBannerBullets li a { width: 10px; height: 10px; margin-top: 7px; margin-left: 4px; background: url(../images/_layout/bulletSprite.png) 0px -10px no-repeat; float: left; outline: none; } .brandBannerBullets li a.activeSlide, .brandBannerBullets li a:hover { background-position: 0px 2px; cursor: default; } .brandBannerText { display:block; margin-left:445px; margin-top:125px; width:460px; height:75px; color:#fff; font-size:16px; margin-bottom:10px;} .brandBannerText strong {font-size: 18px;} .slide { display: block; margin-left: 752px; height:28px; width:153px; position: relative; } .slideInner, .bestValue { display: block; height: 28px; width: 73px; background: url(../images/_layout/brandNewLink.png) no-repeat; text-align: center; color: #FFFFFF; line-height:28px; position: absolute; right: 80px; bottom: 0; } a.brandBannerLink { color: #ffffff; text-decoration: none; font-weight: bold; } a.brandBannerLink:hover { text-decoration: underline; } .bestValue { right: 0px; bottom: 0px; height:28px; } #mapping { background: #9FAEAD url(../images/_layout/mappingBg.png) no-repeat; } #mappingBody { margin: 0px 12px; background: #F2F3F5 url(../images/_layout/searchIcon.png) no-repeat 0 480px; } #mapping #mappingSearch { display: inline; float: left; position: relative; margin-left: 10px; width: 235px; height: 658px; } #mappingSearch #searchBox { position: absolute; background: transparent url(../images/_layout/locationSearch.png) no-repeat scroll left top; width: 266px; height: 63px; left: -32px; } #mappingSearch #searchBox form#searchForm { margin: 10px 0 0 30px; } #mappingSearch .mapFilter { width: 225px; padding: 6px; background-color: #4F4F4F; margin-bottom: 10px; -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; } #mappingSearch .firstFilter { margin-top: 75px; } .mapFilter p { color: #FFFFFF; font-size: 1em; margin-bottom: 5px; } .mapFilter h3.collapsible { width: 225px; height: 34px; background: url(../images/_layout/mapFilterTabs.png) no-repeat 0px 0px; color: #FFFFFF; font-size: 1em; margin: 0; text-indent: 5px; line-height: 25px; cursor: pointer; } .mapFilter h3.collapsible:hover { background-position: 0px -34px; } .mapFilter h3.open, .mapFilter h3.open:hover { background-position: 0px -68px; } .mapFilter .panelContent { width: 211px; display: none; padding: 5px; background-color: #FFFFFF; margin-bottom: 3px; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; color: #5A5A5A; } .mapFilter .lastPanel { margin-bottom: 0px; } .mapFilter .panelContent p { color: #5A5A5A; } .mapFilter .brandList { margin: 0px; width: 211px; } .mapFilter .brandList a.brandLogo, #infowindow { width: 490px; } .mapFilter .brandList a.brandLogo, #infowindow p.brandLogo { width: 67px; height: 45px; display: block; float: left; margin: 0 3px 3px 0; background: url(../images/brandLogos/brandAllSprite.jpg) no-repeat; outline: none; } .mapFilter .brandList a.last { margin-right: 0; } a#brand-m--s-simply-food { background-position: 0px -45px; } a#brand-m--s-simply-food:hover, a#brand-m--s-simply-food.current, #infowindow p#google-m--s-simply-food { background-position: 0px 0px; } a#brand-costa { background-position: -67px -45px; } a#brand-costa:hover, a#brand-costa.current, #infowindow p#google-costa { background-position: -67px 0px; } a#brand-burger-king { background-position: -134px -45px; } a#brand-burger-king:hover, a#brand-burger-king.current, #infowindow p#google-burger-king { background-position: -134px 0px; } a#brand-edc { background-position: -201px -45px; } a#brand-edc:hover, a#brand-edc.current, #infowindow p#google-edc { background-position: -201px 0px; } a#brand-whsmith { background-position: -268px -45px; } a#brand-whsmith:hover, a#brand-whsmith.current, #infowindow p#google-whsmith { background-position: -268px 0px; } a#brand-harry-ramsdens { background-position: -335px -45px; } a#brand-harry-ramsdens:hover, a#brand-harry-ramsdens.current { background-position: -335px 0px; } a#brand-upper-crust { background-position: 0px -135px; } a#brand-upper-crust:hover, a#brand-upper-crust.current { background-position: 0px -90px; } a#brand-thorntons { background-position: -67px -135px; } a#brand-thorntons:hover, a#brand-thorntons.current { background-position: -67px -90px; } a#brand-ladbrokes { background-position: -134px -135px; } a#brand-ladbrokes:hover, a#brand-ladbrokes.current { background-position: -134px -90px; } a#brand-coffee-nation { background-position: -135px -225px; } a#brand-coffee-nation:hover, a#brand-coffee-nation.current, #infowindow p#google-coffee-nation { background-position: -135px -180px; } a#brand-costa-express { background-position: -335px -225px; } a#brand-costa-express:hover, a#brand-costa-express.current, #infowindow p#google-costa-express { background-position: -335px -180px; } a#brand-fone-bitz { background-position: -201px -135px; } a#brand-fone-bitz:hover, a#brand-fone-bitz.current { background-position: -201px -90px; } a#brand-krispy-kreme-doughnuts { background-position: -268px -135px; } a#brand-krispy-kreme-doughnuts:hover, a#brand-krispy-kreme-doughnuts.current { background-position: -268px -90px; } a#brand-west-cornwall-pasty { background-position: -201px -225px; } a#brand-west-cornwall-pasty:hover, a#brand-west-cornwall-pasty.current, #infowindow p#google-west-cornwall-pasty { background-position: -201px -180px; } a#brand-dominos { background-position: -268px -225px; } a#brand-dominos:hover, a#brand-dominos.current, #infowindow p#google-dominos { background-position: -268px -180px; } a#brand-travelodge { background-position: -335px -135px; } a#brand-travelodge:hover, a#brand-travelodge.current, #infowindow p#google-travelodge { background-position: -335px -90px; } a#brand-days-inn { background-position: 0px -225px; } a#brand-days-inn:hover, a#brand-days-inn.current, #infowindow p#google-days-inn { background-position: 0px -180px; } a#brand-premier-inn { background-position: -67px -225px; } a#brand-premier-inn:hover, a#brand-premier-inn.current, #infowindow p#google-premier-inn { background-position: -67px -180px; } .mapFilter .scrollList { margin: 0 0 5px 10px; max-height: 200px; overflow-x: hidden; overflow-y: scroll; width: 195px; } .mapFilter .scrollList li a.poiLogo { outline: none; padding-left: 20px; background: url(../images/_layout/motoIcons.png) no-repeat 0px -315px; height: 18px; margin-bottom: 4px; text-decoration: none; } .mapFilter .scrollList li a.poiLogo:hover, .mapFilter .scrollList li a.poiLogo.current { background-position: 0px -300px; } .mapFilter .scrollList li a.poiLogo.current { font-weight: bold; } #mappingSearch #formSearchWrap { position: relative; z-index: 9990; margin: 0; padding: 0; display: none; } #formSearchWrap #results { border: 3px solid #BBBBBB; background-color: #FFFFFF; min-height: 150px; max-height: 450px; left: -10px; top: 2px; position: absolute; width: 270px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 5px 5px 5px #3F3F3F; -webkit-box-shadow: 5px 5px 5px #3F3F3F; } #formSearchWrap #results #closeSuggestions { width: 25px; height: 25px; position: absolute; top: -10px; right: -10px; background: url(../images/_layout/closeBox.png) no-repeat; display: block; outline: none; } #formSearchWrap #results h4 { width: 270px; background: #0098a6; display: block; height: 25px; line-height: 25px; color: #FFFFFF; -moz-border-radius: 7px; -webkit-border-radius: 7px; -moz-box-shadow: 2px 3px 5px #9F9F9F; -webkit-box-shadow: 2px 3px 5px #9F9F9F; text-indent: 5px; margin-bottom: 10px; } #results .mapSearchSection { width: 260px; margin: 5px; overflow-x: hidden; overflow-y: scroll; max-height: 220px; } #results #brandSection, #results #locationSection { overflow-y: hidden; } .mapSearchSection .brandList { margin: 0px; } .mapSearchSection .brandList a.brandName { height: 45px; line-height: 45px; } .mapSearchSection .brandList a.brandLogo { width: 67px; height: 45px; display: block; float: left; margin: 0 5px 0 0; background: url(../images/brandLogos/brandAllSprite.jpg) no-repeat; outline: none; } .mapSearchSection .brandList a#brand-m--s-simply-food { background-position: 0px 0px; } .mapSearchSection .brandList a#brand-costa { background-position: -67px 0px; } .mapSearchSection .brandList a#brand-coffee-nation { background-position: -135px -180px; } .mapSearchSection .brandList a#brand-burger-king { background-position: -134px 0px; } .mapSearchSection .brandList a#brand-edc { background-position: -201px 0px; } .mapSearchSection .brandList a#brand-whsmith { background-position: -268px 0px; } .mapSearchSection .brandList a#brand-harry-ramsdens { background-position: -335px 0px; } .mapSearchSection .brandList a#brand-upper-crust { background-position: 0px -90px; } .mapSearchSection .brandList a#brand-thorntons { background-position: -67px -90px; } .mapSearchSection .brandList a#brand-ladbrokes { background-position: -134px -90px; } .mapSearchSection .brandList a#brand-fone-bitz { background-position: -201px -90px; } .mapSearchSection .brandList a#brand-krispy-kreme-doughnuts { background-position: -268px -90px; } .mapSearchSection .brandList a#brand-travelodge { background-position: -335px -90px; } .mapSearchSection .brandList a#brand-days-inn { background-position: 0px -180px; } .mapSearchSection .brandList a#brand-premier-inn { background-position: -67px -180px; } .mapSearchSection .locationsList { margin: 0; } .mapSearchSection .locationsList li a.resultsLink { outline: none; padding-left: 20px; background: url(../images/_layout/motoIcons.png) 0px -285px no-repeat; height: 18px; margin-bottom: 4px; text-decoration: none; } .mapSearchSection .locationsList li a.resultsLink:hover, .mapSearchSection .locationsList li a.resultsLink.current { background-position: 0px -270px; } .mapSearchSection .locationsList li a.resultsLink.current { font-weight: bold; } #mappingSearch #mapInfo { margin: 5px 0 0 35px; } #mappingSearch #mapControls { border-top: 1px dotted #2E6D7C; margin: 0; position: absolute; bottom: 0px; width: 220px; } #mapControls li a { display: block; float: left; outline: none; } #mapControls li a#mapReset { width: 40%; } #mapControls li a#gotQuestion { width: 60%; } #mapping #mappingMap { display: inline; float: left; position: relative; border: 6px solid #4F4F4F; height: 645px; width: 648px; padding: 0; margin: 0; } #mapping #directions { width: 648px; margin-left: 240px; } #homeContentBottom { background: url(../images/_layout/contentBottom.png) no-repeat; height: 21px; } #bodyTop, #coreTop { height: 15px; background: url(../images/_layout/bodyCurves.png) no-repeat 0px 0px; } #body, #core { background: url(../images/_layout/bodyBg.png); padding: 15px 10px 10px; width: 920px; } #body #searchReturnLink, #core #searchReturnLink { margin: 0; margin-left: 610px; width: 160px; } #body #searchReturnLink a, #core #searchReturnLink a { padding-right: 45px; } #body #contentTop, #core #contentTop { width: 736px; height: 15px; background: url(../images/_layout/contentCurves.png) no-repeat 0px 0px; margin-top: 10px; } #body #content, #core #content { width: 706px; padding: 30px 15px 0px; background-color: #FFFFFF; position: relative; height: 1%; float: left; zoom: 1; } #content hr { border: 0; border-bottom: 1px dotted #7BA2A9; margin-bottom: 10px; } #content h2#contentHeader { position: absolute; background: transparent url(../images/_layout/contentBanner.png) no-repeat; width: 529px; height: 68px; left: -20px; margin: 0 0 15px 0; top: -40px; line-height: 52px; text-indent: 30px; color: #FFFFFF; z-index: 100; display: block; } #content #fullContent { width: 705px; float: left; margin-right: 0; } #content #mainContent { width: 460px; float: left; margin-right: 25px; } #content p.introText { font-size: 2em; font-weight: bold; color: #00606E; line-height: 1.2em; margin-bottom: 15px; } #content p.terms { margin-top: 20px; } #content .imgRight { float: right; margin: 0 0 10px 10px; clear: both; } #content h4.collapsible { height: 25px; color: #00606E; text-indent: 5px; line-height: 25px; font-size: 1.2em; background: #EBF3F4 url(../images/_layout/siteLocationsArrow.png) no-repeat top right; float: left; margin: 0px 0px 1px 0px; cursor: pointer; } #content #mainContent h4.collapsible { width: 460px; } #content #fullContent h4.collapsible { width: 705px; } #content h4.lastHeader { margin-bottom: 10px; } #content h4.open, #content h4.collapsible:hover { background: url(../images/_layout/siteLocationsCollapsible.png) top right no-repeat; color:#FFFFFF; } #content h4.open { margin-bottom: 0px; } #content .panelContent { padding: 5px; background-color: #F8FBFC; float: left; display: none; margin-bottom: 1px; color: #303030; } #content .lastPanel { margin-bottom: 10px; } #content #mainContent .panelContent { width: 450px; } #content #fullContent .panelContent { width: 695px; } #content #sideContent { width: 220px; float: left; } #content #sideContent h3 { margin-bottom: 0; } #content h2#siteLocationHeader { position: absolute; background: transparent url(../images/_layout/locationsBanner.png) no-repeat; width: 529px; height: 66px; left: -20px; margin: 0 0 15px 0; top: -40px; line-height: 52px; text-indent: 30px; color: #00606E; z-index: 100; } #contactDetails #mapCanvas { width: 370px; height: 150px; border: 5px solid #CEDAD6; margin-right: 15px; float: left; } #locationDetails {margin-bottom:20px;} #locationDetails #mapCanvas { width: 370px; height: 260px; border: 5px solid #CEDAD6; margin-right: 15px; float: left; } #locationDetails h3.collapsible { width: 310px; height: 25px; color: #00606E; text-indent: 5px; line-height: 25px; font-size: 1.2em; background: #EBF3F4 url(../images/_layout/siteLocationsArrow.png) no-repeat top right; float: left; margin: 0px 0px 1px 0px; cursor: pointer; } #locationDetails h3.open, #locationDetails h3:hover { background: url(../images/_layout/siteLocationsCollapsible.png) top right no-repeat; color:#FFFFFF; } #locationDetails h3.open { margin-bottom: 0px; } #locationDetails .panelContent { width: 300px; padding: 5px; background-color: #F8FBFC; float: left; display: none; margin-bottom: 1px; color: #303030; } * html #locationDetails .panelContent { width: 310px; } #locationDetails #mapLinks { width: 310px; position: absolute; margin: 0; left: 410px; top: 281px; } #locationDetails #mapLinks li { width: 50%; float: left; display: block; } #content #shoppingDetails { margin:0 0 20px 0; position: relative; } #shoppingDetails h3 { width: 353px; float: left; margin: 0; } #shoppingDetails #brandBullets { float: left; width: 353px; margin: 0; line-height: 1.5em; } #shoppingDetails #brandBullets a { width: 10px; height: 10px; margin-top: 7px; margin-left: 5px; background: url(../images/_layout/siteLocationsIcons.png) 0px -120px; float: right; outline: none; } #shoppingDetails #brandBullets a.isChecked { background-position: 0px -100px; cursor: default; } #shoppingDetails #brandBullets a.unchecked { background-position: 0px -120px; } #shoppingDetails #brandBullets a:hover { background-position: 0px -100px; } #shoppingDetails a#carouselLeft, #shoppingDetails a#carouselRight { width: 64px; height: 66px; top: 50px; background: url(../images/_layout/siteLocationsSlide.png) no-repeat; display: block; outline: none; position: absolute; } #shoppingDetails a#carouselLeft { left: -37px; background-position: 0px 0px; z-index: 100; } #shoppingDetails a#carouselLeft:hover { background-position: 0px -67px; } #shoppingDetails a#carouselRight { right: -38px; top: 51px; background-position: -64px 0px; z-index: 100; } #shoppingDetails a#carouselRight:hover { background-position: -64px -67px; } #shoppingDetails .brandSlider { width: 706px; overflow: hidden; float: left; position: relative; margin-bottom: 30px; padding-top: 15px; border-top: 1px dotted #7BA2A9; } .brandSlider ul { margin: 0; padding: 0; width: 9999px; height: 90px; position: relative; left: 0; } .brandSlider ul li { width: 133px; height: 90px; float: left; padding: 0; margin: 0 10px 0 0; } #content .locationCol { width: 150px; margin-right: 25px; float: left; margin-bottom: 20px; } #content .locationCol h3 { border-bottom: 1px dotted #7BA2A9; margin-bottom: 10px; } #content .locationCol .moreInfoIcon { float: right; margin-right: 10px; } #content #disclaimer { margin: 0px; } #content #emailToAFriendContainer { background-color: #F8FBFC; padding: 10px; -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; display: none; } #content #emailToAFriendContainer.open { display: block; } #content #emailToAFriendContainer h3 { border-bottom: 1px dotted #7BA2A9; } #content #emailToAFriendContainer #formSubmit { margin-right: 10px; } #content #contentLinks { border-top: 1px dotted #7BA2A9; } #content #contentLinksLeft { width: 350px; float: left; margin: 5px 0px 0px; } #content #contentLinksRight { width: 350px; float: right; margin: 5px 0px 0px; text-align: right; } #content #contentLinksRight a { float: right; margin-left: 20px; } #content h3.brandPageHeader {margin-bottom:0;} #content #brandPagesNav { width: 706px; overflow: hidden; float: left; margin: 0; padding: 15px 0; border-top: 1px dotted #7BA2A9; } #content #brandPagesNav li {margin:0 5px 0 0;} #body #contentBottom, #core #contentBottom { width: 736px; height: 15px; background: url(../images/_layout/contentCurves.png) no-repeat 0px -15px; } #body #adContainer, #core #adContainer { width: 171px; margin-top: 8px; } #body #adContainer img, #core #adContainer img { margin-bottom: 10px; } #bodyBottom, #coreBottom { height: 15px; background: url(../images/_layout/bodyCurves.png) no-repeat 0px -15px; } #adverts { margin-top: 16px; } #bottom { margin-top: 16px; background: #DDE2E5 url(../images/_layout/bottomBg.png) no-repeat left top; position: relative; } #infoIcon { position: absolute; z-index: 10; left: -22px; top: -10px; } #bottom ul li ul { margin: 10px 0 0 15px; } #bottom ul#aboutUs li ul { margin-left: 40px; } #bottom ul a.bottomHeader, #bottom ul span.bottomHeader { height: 35px; line-height: 35px; display: block; color: #FFFFFF; font-size: 1.2em; font-weight: bold; padding: 0px 15px; outline: none; } #bottom ul#aboutUs a.bottomHeader { padding-left: 40px; } #bottomFooter { background: transparent url(../images/_layout/bottomFooter.png) no-repeat scroll left top; height: 16px; } #twitter { margin:0 30px; } #twitterIcon { width: 65px; height: 55px; background: url(../images/_layout/twitter.png) no-repeat 0px -65px; display: block; outline: none; margin-left: -10px; float: left; } #twitterLink { width: 200px; float: left; margin: 0 0 0 62px; } #twitterFeed { float:left; margin:5px 0 0 5px; width:820px; } #twitterFeed ul { margin:0 0 0 0; list-style-type:none; position:relative; } #twitterFeed ul li { display:none; width:810px; border-top: 1px dotted #7BA2A9; border-bottom: 1px dotted #7BA2A9; padding:3px 5px 2px; } #twitterFeed ul li.current{ display:block; } #twitterFeed ul li.last-current { } #twitterFeed ul li p { font-size:12px; margin-bottom:0; } #twitterFeed ul li p span.tweetTime { font-size:10px; color:#00606E; } #footer { margin-top: 16px; } #footer a.forepointGreen { color: #97BE0D; } /* Content Elements (Specific Page Element Styles) -------------------------------------------------------------- */ a.icon { text-indent: 20px; height: 20px; display: block; background: url(../images/_layout/motoIcons.png) no-repeat; outline: none; } a.newWindow { background-position: 0px 0px; } a.returnArrow { background-position: 0px -30px; } a.getDirections { background-position: 0px -60px; } a.poi { background-position: 0px -90px; } a.print { background-position: 0px -118px; } a.email { background-position: 0px -146px; } a.feedback { background-position: 0px -177px; } a.info { background-position: 0px -330px; margin-top: 10px; text-indent: 25px; } a.pdfIcon { background-position: 0px -360px; } /* -- -- Info Window -- -- */ #infowindow h3 { border-bottom: 1px dotted #00606E; } /* -- -- Site Locations Page -- -- */ h4.siteWhat { color: #2e6d7c; } /* -- Form Styles -- */ .required { color: #FF0000 !important; } form.motoForm fieldset { padding: 10px; } form#searchForm fieldset { padding: 0; } form.motoForm label { display: block; font-weight: bold; } form.motoForm label.white { color: #FFFFFF; } form.motoForm label.subLabel { font-weight: normal; } form.motoForm label.noBlock { display: inline; font-weight: normal; } .checkList { margin: 0; float: left; } .checkList li { display: inline; float: left; margin-right: 10px; } .checkList li .optionH, .checkList li .optionV { margin: 0; margin-right: 5px; } .checkListBlock { margin: 0; float: left; margin-bottom:16px;} .checkListBlock li { display: inline; float: left; margin-right: 10px; width: 90%; } .checkListBlock li#formTermsConditionsLi {width:100%; margin-right:0; } .checkListBlock li .optionH, .checkListBlock li .optionV{ margin: 0; margin-right: 5px; } form.motoForm input { outline:none } fieldset, .textField, .textArea, .selectField, .button, .errorMessage, .successMessage { -moz-border-radius: 5px; -webkit-border-radius: 5px; } .textField, .textArea, .selectField { font-size: 1.1em; padding: 6px; color: #333333; background-color: #FFFFFF; outline: none; border: 1px solid #004550; margin-bottom: 10px; font-family: Geneva, Arial, Helvetica, sans-serif; } /*.textField:focus, .textArea:focus, .selectField:focus { background-color: #E9EBEF; border: 1px solid #E9EBEF; }*/ .button { background-color: #004550; border: 1px solid #004550; color: #FFFFFF; font-size: 1.1em; cursor: pointer; padding: 4px 7px !important; } .button:hover { text-decoration: underline!important; } .errorMessage { width: 88%; border: 1px solid #FBC2C4; color: #8A1F11; display: block; min-height: 22px; line-height: 22px; background: #FBE3E4 url(../images/_layout/error.gif) no-repeat 10px center; padding: 3px 10px 3px 35px; margin-bottom: 10px; } .successMessage { width: 88%; border: 1px solid #9ADF8F; color: #226F14; display: block; min-height: 22px; line-height: 22px; background: #D5FFCE url(../images/_layout/success.gif) no-repeat 10px center; padding: 3px 10px 3px 35px; margin-bottom: 10px; } form .smallInput { width: 25% !important; margin-bottom: 15px; } form .mediumInput { width: 50% !important; margin-bottom: 15px; } form .largeInput { width: 93%; padding: 6px !important; font-size: 1.1em !important; } form .sideInput { width: 95% !important; padding: 6px !important; font-size: 1.1em !important; } form .imageInput { width: 180px; padding: 10px; } form .quickEditInput { width: 90% !important; padding: 8px; font-size: 1.1em; } form .quickEditSelect { width: 90% !important; font-size: 1.1em; } #formSearch {color: #808080; outline-style: none; width: 180px; } #formSearchSubmit { width: 20px; height: 24px; margin: 3px 15px 0 4px; border: 0px; background: url(../images/_layout/searchArrow.png) no-repeat 0px 0px; outline: none; cursor: pointer; padding: 0; float: right; } #formSearchSubmit:hover, #formSearchSubmit:focus { background-position: 0px -24px; } form #formSubmit { float: right; margin-right: 33px; } form #directionSubmit { float: right; margin-top: 5px; } #stepDirectionsCheck { vertical-align: bottom; } .required { color: #FF0000; } .checkList { margin: 10px 0; float: left; } .checkList li { width: 200px; display: block; float: left; } #rateTable { width: 450px; margin-bottom: 20px; } #rateTable td.labelSpace { text-align: left; padding: 0; } #rateTable td.checkSpace { width: 50px; } /* -- -- Location Page -- -- */ .locationList { margin: 10px 40px 10px 0; } /* -- -- News Page -- -- */ h3.newsTitle { margin-bottom: 0; } h4.newsDate { margin-bottom: 0; } .newsTopExcerpt p.newsIntro { margin-top: 10px; font-weight: bold; } .returnLink a { padding-right: 45px; } /* -- -- Email a Freind Page -- -- */ #signUpForm fieldset { padding: 5px 0; } #signUpForm fieldset.halfWidth { width:350px; } #signUpForm fieldset .errorMessage { width: 83.7%; } p#signUpFormFooter {margin:5px 0; width:685px;} #emailAFriend fieldset { padding: 5px 0; } #emailAFriend fieldset.halfWidth { width: 343px; } #emailAFriend fieldset .errorMessage { width: 83.7%; } p#emailFriendFooter {margin:5px 0; width:685px;} #emailAFriend #formMessage { height: 74px; } .truckWash { border: 1px solid #006699; } .truckWash th { text-align: left; } .truckWash td, .truckWash th { text-align: left; vertical-align: top; padding: 2px; font-size: 0.76em; } .truckWash th.divRight, .truckWash td.divRight { border-right: 1px solid #006699; } .truckWash th.divBottom, .truckWash td.divBottom { border-bottom: 1px solid #006699; } h3#emailFormHeader { -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow:2px 3px 5px #9F9F9F; background: #0098A6 none repeat scroll 0 0; color: #FFFFFF; display: block; height: 25px; line-height: 25px; margin-bottom: 10px; text-indent: 5px; width: 685px; } div#fancy_inner { border: 5px solid #BBBBBB; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 5px 5px 5px #4F4F4F; -webkit-box-shadow: 5px 5px 5px #4F4F4F; } div#fancy_bg { display:none; } /* Best Value Styles */ table.value, table.value td { vertical-align: top; } table.value td { padding: 10px; text-align: left; } table.value td.nopad { padding: 0px; } table.value td.tenleft { padding-left: 10px; } table.value .row2 { font-size: 24px; font-weight: bold; background-image: url(/assets/images/compare/table3.jpg); } table.value .sub1 { font-size: 24px; font-weight: bold; } table.value .row2col1 { font-size: 24px; color: #FFFFFF; font-weight: bold; background-image: url(/assets/images/compare/table2.jpg); } table.value .row1 { font-size: 11px; } table.value .row2small { font-size: 9px; font-weight: normal; } table.value .row1col1 { font-size: 11px; font-weight: bold; color: #FFFFFF; background-image: url(/assets/images/compare/table1.jpg); } /* Careers Site */ .careers { } #careersNav { width: 691px; height: 40px; padding: 0 15px 0 0; border-bottom: 1px dotted #7BA2A9; margin: 0; } #careersNav li { height: 40px; } #careersNav li a { color: #004550; text-decoration: none; line-height: 40px; padding: 5px 10px; font-size: 1.4em; font-weight: bold; margin-right: 10px; outline: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #careersNav li a.last { margin-right: 0; } #careersNav li a:hover, #careersNav li a.current { background-color: #EBF3F4; color: #004550; } #careersSubNav { width: 691px; height: 30px; padding: 0 15px 0 0; border-bottom: 1px dotted #7BA2A9; margin: 0; } #careersSubNav li { height: 30px; } #careersSubNav li a { color: #004550; text-decoration: none; line-height: 30px; padding: 2px 7px; font-size: 1.1em; font-weight: bold; margin-right: 10px; outline: none; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #careersSubNav li a.last { margin-right: 0; } #careersSubNav li a:hover, #careersSubNav li a.current { background-color: #EBF3F4; color: #004550; } #vancancyCount { background-color: #004550; color: #FFFFFF; margin: 2px 0 20px; padding: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #vancancyCount h2 { font-size: 2em; text-align: center; line-height: 1.1em; padding-bottom: 5px; border-bottom: 2px solid #99D1D6; margin-bottom: 0; } #vancancyCount h2 a { text-decoration: none; color: #FFFFFF; } #vancancyCount a.vancancyNumber { color: #FFFFFF; font-size: 6em; text-align: center; display: block; text-decoration: none; font-weight: bold; line-height: 1em; margin-top: 5px; } #latestVacancy { background-color: #FFFFFF; margin: 2px 0 20px; padding: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #latestVacancy h2 { font-size: 1.4em; color: #00606E; margin-bottom: 5px; } #latestVacancy dl { margin-bottom: 10px; float: left; border-bottom: 1px dotted #CCCCCC; line-height: 1.2em; width: 150px; } #latestVacancy dl dt { float: left; font-weight: bold; padding: 2px 5px 2px 0px; width: 55px; border-top: 1px dotted #CCCCCC; } #latestVacancy dl dd { padding: 2px 0; width: 90px; float: left; margin-left: 0; border-top: 1px dotted #CCCCCC; } #latestVacancy .jobExperct { width: 150px; } #latestVacancy .jobLink { text-align: right; display: block; } .careers #header { width: 706px; height: 250px; background-color: #006699; position: relative; margin-top: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.75); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.75); -o-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.75); box-shadow: inset 0px 0px 5px rgba(0,0,0,0.75); } .careers #header h3 { width: 676px; padding: 10px 15px; margin: 0; color: #FFFFFF; font-size: 1.5em; background-color: #004550;/*background-color: rgba(0, 69, 80, 0.75);*/ position: absolute; bottom: 0; -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .careers #homeContent { margin-top: 15px; -webkit-column-width: 340px; -webkit-column-gap: 25px; -moz-column-width: 340px; -moz-column-gap: 25px; -o-column-width: 340px; -o-column-gap: 25px; column-width: 340px; column-gap: 25px; } .careers #homeSections { margin: 10px 0 20px 0; width: 706px; float: left; } .careers #homeSections li { width: 205px; padding: 10px; margin-right: 15px; background-color: #EBF3F4; display: block; float: left; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .careers #homeSections li.last { margin-right: 0; } .careers #homeSections h4 { font-size: 1.4em; } .careers #homeseciton img { margin-bottom: 10px; } .careers #careersContent { margin-top: 15px; } .careers h5 { color: #00606E; } #vacanciesSearch { padding: 10px 10px 0 10px; background-color: #EBF3F4; display: block; margin: 10px 0 20px 0; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #vacanciesSearch .fRight { color: #00606E; font-size: 1.1em; } #vacanciesSearch .searchLeft, #vacanciesSearch .searchRight { width: 50%; float: left; } #vacanciesSearch #vacancySubmit { float: right; } .job { width: 100%; clear: both; } .jobHead { height: 40px; margin-bottom: 10px; border-bottom: 1px dotted #7BA2A9; border-top: 1px dotted #7BA2A9; } .jobHead h2 { font-size: 1.3em; margin: 0; float: left; line-height: 30px; } .jobHead .jobRef { font-size: 0.9em; float: left; margin-left: 30px; line-height: 30px;} .jobHead .jobLink { float: right; line-height: 30px; font-size: 1.2em; font-weight: bold; } .jobBody { float: left; margin-bottom: 15px; } .jobBody .brandLogo { width: 133px; height: 90px; float: left; margin-right: 20px; background-color: #0066CC; } .jobBody .jobDetails { float: left; width: 200px; margin-right: 20px; } .jobBody .jobDetails p { margin-bottom: 5px; } .jobBody .jobDesc { float: left; width: 330px; } #vacancy { } #vacancy .returnLink { margin: 10px 0; display: block; outline:none; } #vacancy .jobHead { border-top: 0; } #vacancy .jobHead h2 { font-size: 1.6em; } #vacancy .jobHead .jobRef { font-size: 1.1em; line-height: 40px; } #vacancy .applicationContainer { padding: 10px 10px 0 10px; background-color: #EBF3F4; display: block; margin: 10px 0 10px 0; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #applicationForm fieldset { padding: 0; } #recaptcha_widget_div { margin-bottom: 10px; } #applicationSubmit { display: block; float: right; margin: 15px; } .noJobs { text-align: center; } .papal { border: 2px solid #CCC; padding: 10px; margin-bottom: 10px; } .papal td { text-align: left; vertical-align:top; } .bannerAd { width: 728px; height: 90px; border: 10px solid #CAD2D1; -moz-border-radius: 10px; border-radius: 10px; display: inline; float: right; margin-right: 0px; margin-bottom: 10px; overflow: hidden; } .costaAd { margin-top: 10px; } /* --- XMAS PROMO --- */ #xmas-promo { width:940px; margin:0 auto 10px; }