/* ------------------------------------------------- URL: http://www.snowchainshop.co.uk Created by Forte Trinity Design / CSS / XHTML - Paul Ashcroft Coding and other lovelyness - Chris Done ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 - main form 3.2 - container 3.3 - header 3.4 - content 3.5 - primary content 3.6 - secondary content 3.7 - tertiary content 3.8 - footer 3.9 - wrapper 3.10 - site wrapper 3.11 - seo 4: GLOBAL ELEMENTS / CONTROLS 4.1 - accessibility 4.2 - site navigation 4.2.1 - primary navigation 4.2.2 - secondary navigation 4.2.3 - basket options 4.2.4 - footer links 4.3 - buttons 4.4 - titles 4.5 - text 4.6 - lists 4.7 - forms 4.7.1 - search box 4.7.2 - enquiry-form 4.7.3 - basket form 4.7.4 - chain selector form 4.8 - tables 4.8.1 - table to display the basket 4.8.2 - table to display products 5: TEMPLATE / PAGE SPECIFIC 5.1 - general layout 5.1.1 - index product calls to action 5.1.2 - about us page 5.1.3 - basket area 5.1.4 - chain selector 5.1.5 - fitting 5.1.6 - support 5.1.7 - suppliers 5.2 - faq 5.3 - fitting guides 5.4 - chain selector 5.5 - products display 5.5.1 - products displayed in a list, information shown inside the table 5.5.2 - product description 5.5.3 - product description 5.5.4 - product alert 5.5.5 - product recommendation 5.5.6 - other suitable products 5.5.7 - pagination 5.6 - terms and conditions 5.7 - order summary 5.8 - order review 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; background:#fff } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:Arial, Helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.7em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.2em; color:#757676; margin:0 0 12px 0; line-height:1.6em } a { color:#1ea3de } a:hover { color:#1ea3de; text-decoration:underline } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { width:100%; background:url("../images/backgrounds/main.jpg") no-repeat top center } /* 3.3 - header */ div#header { background:url("../images/backgrounds/header.gif") repeat-x; height:174px } div#branding { width:199px; float:left } div#header div.wrapper { width:762px; float:right } div#contact { width:768px; height:86px } div#navigation { width:569px; height:88px; margin-top:86px; float:left; background:url("../images/backgrounds/primary-navigation.gif") no-repeat } div#search { width:193px; height:88px; margin-top:86px; float:right; background:url("../images/backgrounds/search.gif") } /* 3.4 - content */ div#content { width:961px; margin:0 auto; position:relative; text-align:left; min-height:930px; height:auto!important; height:930px } div.text-content { margin:0 15px } /* 3.5 - primary content */ div#primary-content { width:569px; float:right } /* 3.6 - secondary content */ div#secondary-content { width:198px; margin-left:1px; float:left } /* 3.7 - tertiary content */ div#tertiary-content { width:193px; float:right } /* 3.8 - footer */ div#footer { background:url("../images/backgrounds/footer.jpg") no-repeat bottom center; min-height:768px; height:auto!important; height:768px } div#footer div.wrapper { width:961px; margin:0 auto; position:relative; text-align:left } /* 3.9 - wrapper */ div.wrapper { width:768px } /* 3.10 - site wrapper */ div#site-wrapper { width:961px; margin:0 auto; position:relative; text-align:left } /* 3.11 - seo */ div#basescript { width:554px; margin:50px auto 0 auto } div#basescript h1 { font-size:1.3em; color:#494C4E } div#basescript p { font-size:1.1em; color:#494C4E; line-height:1.4em } div#basewords-wrapper { margin-top:505px; float:right } ul.basewords { list-style:none; float:right; clear:right; margin:0 0 6px 0 } ul.basewords li { display:inline; margin-left:8px; color:#494C4E; font-size:1.0em } ul.basewords strong { font-weight:normal } /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* 4.2 - site navigation ----------------------------------------------- */ /* 4.2.1 - primary navigation */ ul#primary-navigation { width:569px; padding:24px 0 0 7px } ul#primary-navigation li { float:left; padding:0; margin:0; list-style:none } ul#primary-navigation li a { background-position:0% 0 } ul#primary-navigation li a:hover { background-position:0% 100% } #nav-home { width:111px; text-indent:-3000px } #nav-home a { width:111px; height:35px; background:url("../images/buttons/nav-home.gif") top left no-repeat; display:block } #nav-products { width:111px; text-indent:-3000px } #nav-products a { width:111px; height:35px; background:url("../images/buttons/nav-products.gif") top left no-repeat; display:block } #nav-about-us { width:111px; text-indent:-3000px } #nav-about-us a { width:111px; height:35px; background:url("../images/buttons/nav-about-us.gif") top left no-repeat; display:block } #nav-best-sellers { width:111px; text-indent:-3000px } #nav-best-sellers a { width:111px; height:35px; background:url("../images/buttons/nav-best-sellers.gif") top left no-repeat; display:block } #nav-faq { width:111px; text-indent:-3000px } #nav-faq a { width:111px; height:35px; background:url("../images/buttons/nav-faq.gif") top left no-repeat; display:block } #nav-contact { width:111px; text-indent:-3000px } #nav-contact a { width:111px; height:35px; background:url("../images/buttons/nav-contact.gif") top left no-repeat; display:block } /* 4.2.2 - secondary navigation */ div.secondary-navigation { background:url("../images/backgrounds/secondary-navigation.gif") no-repeat bottom } div.secondary-navigation ul { list-style:none; margin:0; padding:16px 24px 10px 31px } div.secondary-navigation ul li { font-size:1.1em; padding:0 0 10px 0; line-height:1.4em } div.secondary-navigation ul li a { color:#494c4e } div.secondary-navigation ul li a:hover { color:#1ea3de; text-decoration:underline } /* 4.2.3 - basket options */ ul#basket-options { } ul#basket-options li { float:right; padding:0; margin:10px 0 0 5px; list-style:none } ul#basket-options li a { background-position:0 0 } ul#basket-options li a:hover { background-position:0 100% } #btn-back-to-shop { width:129px; text-indent:-3000px } #btn-back-to-shop a { width:129px; height:27px; background:url("../images/buttons/back-to-shop.gif") top left no-repeat; display:block } #btn-checkout { width:129px; text-indent:-3000px } #btn-checkout a { width:129px; height:27px; background:url("../images/buttons/checkout.gif") top left no-repeat; display:block } /* 4.2.4 - footer links */ div#footer ul.company-info { margin:0; padding:461px 0 0 0; float:left } div#footer ul.company-info li { margin:0; padding:3px 0; list-style:none; font-size:1em; color:#494c4e } div#footer ul.company-info li.first-link { margin-left:0; border-left:none; list-style:none; display:inline } div#footer ul.company-info li.credit-cards { padding-top:185px } ul.site-links { float:right; margin:107px 0 0 0 } ul.site-links li { float:left; padding:0; margin:0; list-style:none } ul.site-links li a { background-position:0% 0% } ul.site-links li a:hover { background-position:0% 100% } #forte-link { width:116px; text-indent:-3000px } #forte-link a { width:116px; height:124px; background:url("../images/buttons/forte-link.jpg") top left no-repeat; display:block } #brindley-link { width:130px; text-indent:-3000px } #brindley-link a { width:130px; height:124px; background:url("../images/buttons/brindley-link.jpg") top left no-repeat; display:block } /* 4.3 - buttons */ a.btn-back-to-top { display:block; width:129px; height:27px; margin:0 15px 0 0; float:right; text-decoration:none; background:url("../images/buttons/back-to-top.gif") no-repeat top left; text-indent:-3000px } a.btn-back-to-top:hover { background-position:50% -27px } a.btn-review-basket { display:block; width:157px; height:27px; margin:0 15px 0 0; text-decoration:none; background:url("../images/buttons/review-basket.gif") no-repeat top left; text-indent:-3000px } a.btn-review-basket:hover { background-position:50% -27px } a.btn-remove { display:block; width:89px; height:27px; margin:10px 0 0 12px; text-decoration:none; background:url("../images/buttons/remove.gif") no-repeat top left; text-indent:-3000px } a.btn-remove:hover { background-position:50% -27px } a.btn-logo { display:block; width:199px; height:174px; margin:0; text-decoration:none; background:url("../images/buttons/logo.gif") no-repeat top left; text-indent:-3000px } a.btn-logo:hover { background-position:50% -174px } a.btn-view-products { display:block; width:171px; height:32px; margin:0; text-decoration:none; background:url("../images/buttons/view-products.gif") no-repeat top left; text-indent:-3000px } a.btn-view-products:hover { background-position:50% -32px } a.btn-chain-selector { display:block; width:157px; height:32px; margin:0; text-decoration:none; background:url("../images/buttons/chain-selector.gif") no-repeat top left; text-indent:-3000px } a.btn-chain-selector:hover { background-position:50% -32px } a.btn-add-to-cart { display:block; width:119px; height:27px; margin:10px 0 0 0; text-decoration:none; background:url("../images/buttons/add-to-cart.gif") no-repeat top left; text-indent:-3000px } a.btn-add-to-cart:hover { background-position:50% -27px } /* 4.4 - titles */ body#faq h1 { height:77px; width:568px; background:url("../images/titles/faq.gif") no-repeat; text-indent:-3000px } body#contact h1 { height:77px; width:568px; background:url("../images/titles/contact.gif") no-repeat; text-indent:-3000px } body#about-us h1 { height:77px; width:568px; background:url("../images/titles/about-us.gif") no-repeat; text-indent:-3000px } body#basket h1 { height:64px; width:568px; background:url("../images/titles/my-basket.gif") no-repeat top; text-indent:-3000px; margin-bottom:6px } body#basket h1.checkout { height:83px; width:568px; background:url("../images/titles/checkout.gif") no-repeat; text-indent:-3000px } body#fitting h1 { height:64px; width:568px; background:url("../images/titles/fitting-snow-chains.gif") no-repeat top; text-indent:-3000px } body#snow-chains-selector h1 { height:64px; width:568px; background:url("../images/titles/snow-chains-selector.gif") no-repeat top; text-indent:-3000px } body#products h1 { height:64px; width:568px; background:url("../images/titles/products2.gif") no-repeat top; text-indent:-3000px; margin-bottom:6px } body#privacy-policy h1 { height:64px; width:568px; background:url("../images/titles/privacy-policy.gif") no-repeat top; text-indent:-3000px } body#terms-and-conditions h1 { height:64px; width:568px; background:url("../images/titles/terms-and-conditions.gif") no-repeat top; text-indent:-3000px } body#delivery h1 { height:64px; width:568px; background:url("../images/titles/delivery.gif") no-repeat top; text-indent:-3000px } body#confirm h1 { height:64px; width:568px; background:url("../images/titles/order-confirmation.gif") no-repeat top; text-indent:-3000px; margin-bottom:-9px } h2#ttl-identifying-your-tyre { height:57px; width:568px; background:url("../images/titles/identifying-your-tyre.gif") no-repeat top; text-indent:-3000px; margin:0 } h2.ttl-pewag-snowchains { height:19px; width:180px; background:url("../images/titles/pewag-snowchains.gif") no-repeat top; text-indent:-3000px; margin:15px 0 15px 0 } h2.ttl-autosock { height:16px; width:92px; background:url("../images/titles/autosock.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h2.ttl-snow-chain-suitability { height:19px; width:196px; background:url("../images/titles/snow-chain-suitability.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h2.ttl-legal-requirements { height:42px; width:482px; background:url("../images/titles/legal-requirements.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h2.ttl-exchange-policy { height:19px; width:150px; background:url("../images/titles/exchange-policy.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h2.ttl-contact-details { height:62px; width:568px; background:url("../images/titles/contact-details.gif") no-repeat top; text-indent:-3000px; margin:0 } h2.ttl-delivery-billing-address { height:32px; width:568px; background:url("../images/titles/delivery-billing-address.gif") no-repeat top; text-indent:-3000px; margin:-19px 0 0 0 } h2.ttl-delivery-billing-summary { height:32px; width:568px; background:url("../images/titles/delivery-billing-summary.gif") no-repeat top; text-indent:-3000px; margin:15px 0 0 0 } h2.ttl-order-summary { height:32px; width:568px; background:url("../images/titles/order-summary.gif") no-repeat top; text-indent:-3000px; margin:15px 0 0 0 } h2.ttl-how-much-do-they-cost { height:57px; width:568px; background:url("../images/titles/how-much-do-they-cost.gif") no-repeat top; text-indent:-3000px; margin:0 } h2.ttl-special-instructions { height:32px; width:568px; background:url("../images/titles/checkout/special-instructions.gif") no-repeat top; text-indent:-3000px; margin:0 0 0 0 } h2.ttl-deliveries { height:15px; width:89px; background:url("../images/titles/deliveries.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h2.ttl-returns { height:15px; width:70px; background:url("../images/titles/returns.gif") no-repeat top; text-indent:-3000px; margin:25px 0 15px 0 } h3.ttl-important-information { height:57px; width:568px; background:url("../images/titles/important-information.gif") no-repeat top; text-indent:-3000px; margin:0 } h3.ttl-delivery-charges { height:57px; width:568px; background:url("../images/titles/delivery-charges.gif") no-repeat top; text-indent:-3000px; margin:0 } h3.ttl-make-payment { height:57px; width:568px; background:url("../images/titles/make-payment.gif") no-repeat top; text-indent:-3000px; margin:0 } h3.ttl-order-total { height:32px; width:568px; background:url("../images/titles/order-total.gif") no-repeat top; text-indent:-3000px; margin:0 0 0 0 } div#products h2 { width:190px; height:51px; background:url("../images/titles/products.gif") no-repeat; text-indent:-3000px; margin:0 } div#best-sellers h2 { width:190px; height:51px; background:url("../images/titles/best-sellers.gif") no-repeat; text-indent:-3000px; margin:0 } div#information h2 { width:190px; height:51px; background:url("../images/titles/information.gif") no-repeat; text-indent:-3000px; margin:0 } /* 4.5 - text */ div#contact p { height:86px; width:762px; background:url("../images/text/phone-number.gif") no-repeat; text-indent:-3000px } p#intro-about-us { height:124px; width:528px; background:url("../images/text/about-us.gif") no-repeat; text-indent:-3000px } strong.out-of-stock { color:#f9372f } p.para-special-instructions { font-size:1.4em; margin:15px } /* 4.6 - lists */ ul.tick-list { list-style:none } ul.tick-list li { padding-left:25px; margin-bottom:2px; font-size:1.1em; line-height:18px; color:#aaa; background:transparent url("../images/global/tick.gif") top left no-repeat } dl.chain-selector-eg { color:#757676; margin:0 0 10px 0; font-size:1.2em } dl.chain-selector-eg dt { font-weight:bold; padding-bottom:2px } dl.chain-selector-eg dd { padding:3px 0 } /* 4.7 - forms ----------------------------------------------- */ /* 4.7.1 - search box */ div#search form { width:180px; padding:24px 0 0 15px } div#search form fieldset { margin-bottom:20px; border:none; padding:0 } div#search form input.text { width:100px; border:none; padding:10px 5px 0 5px; margin:1px 7px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:1.4em; color:#444; float:left } /* 4.7.2 - enquiry-form */ div.form-holder form { margin:0 15px } div.form-holder form.wrapping { margin:0 0px } div.form-holder form.wrapping fieldset { margin:0px 0px 20px 15px } div.form-holder span { color:#1ea3de; font-style:italic } div.form-holder form legend { margin:0; border:0; padding:0; font-size:14px; color:black; font-weight:bold } div.form-holder form fieldset { margin-bottom:20px; border:none; padding:0 } div.form-holder form fieldset.submit { margin-bottom:20px; border:none; padding:0 20px 0 0; text-align:right } div.form-holder form fieldset#your-details h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/your-details.gif") no-repeat; text-indent:-3000px } div.form-holder form fieldset#vehicle-details h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/vehicle-details.gif") no-repeat; text-indent:-3000px } div.form-holder form fieldset#further-information h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/further-information.gif") no-repeat; text-indent:-3000px } div.form-holder form fieldset#delivery-details h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/delivery-details.gif") no-repeat; text-indent:-3000px } div.form-holder form fieldset#billing-details h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/billing-details.gif") no-repeat; text-indent:-3000px } div.form-holder form label { color:#000; width:200px; float:left; text-align:right; display:block; cursor:pointer; padding:17px 10px 0 0; font-size:1.4em; font-family:Arial, Helvetica, sans-serif } div.form-holder form input.text { width:290px; margin:5px 15px 5px 0; padding:10px 5px; border:1px solid #dfdedd; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; color:#444; background:#fff url("../images/backgrounds/input.gif") repeat-x bottom left } div.form-holder form textarea { width:290px; margin:5px 15px 5px 0; padding:11px 5px; border:1px solid #dfdedd; font-size:1.4em; line-height:150%; font-family:Arial, Helvetica, sans-serif; color:#444; background:#fff url("../images/backgrounds/input.gif") repeat-x bottom left } div.form-holder form select { width:302px; margin:5px 15px 5px 0; padding:10px 5px; border:1px solid #dfdedd; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; color:#444; background:#fff url("../images/backgrounds/input.gif") repeat-x bottom left } div.form-holder form ol { margin:20px 0 0 0; padding:0 } div.form-holder form ol li { list-style:none; padding:1px 0; margin:0 } div.form-holder form ol li.last { border:0 none } div.form-holder form ol li.divider { border-top:1px solid #000; margin:0; padding-top:10px } div.form-holder form ol li input { margin:0 15px 0 0 } div.form-holder form ol li.chk label { margin:0 0 0 7px; float:none; padding:0; display:inline } div.form-holder form ol li.chk input { margin:0 0 0 150px; border:0 none } div.form-holder form ol li.input-error { background:#FFF9C7 } div.form-holder form ol li div.input-error { color:#FF6F27; margin-left:210px; padding-bottom:5px } form li.erroneous input { border:2px solid #b6966b!important } form li.erroneous textarea { border:2px solid #b6966b!important } div.form-holder div.errors { margin-top:20px } div.form-holder div.errors ul li { list-style:none; color:#fff; font-size:1.2em; padding:3px 0 } /* 4.7.3 - basket form */ div#my-basket form { } div#my-basket form fieldset { margin-bottom:20px; border:none; padding:0 } div#my-basket form input.quantity-box { width:32px; margin:5px 15px 5px 0; padding:10px 5px; border:1px solid #dfdedd; font-size:1em; font-family:Arial, Helvetica, sans-serif; color:#444; background:#fff url("../images/backgrounds/input.gif") repeat-x bottom left } div#my-basket p.note { padding:20px } /* 4.7.4 - chain selector form */ div#chain-selector-form { margin:15px 15px 0 15px } div#chain-selector-form form fieldset { margin-bottom:20px; border:none; padding:0 } div#chain-selector-form form fieldset#chain-selector h2 { height:27px; width:534px; margin-top:20px; background:url("../images/titles/chain-selector.gif") no-repeat; text-indent:-3000px } div#chain-selector-form form label { color:#000; width:200px; float:left; text-align:right; display:block; cursor:pointer; padding:18px 10px 0 0; font-size:1.4em; font-family:Arial, Helvetica, sans-serif } div#chain-selector-form form select { width:200px; margin:5px 15px 5px 0; padding:10px 5px; border:1px solid #dfdedd; font-size:1.4em; font-family:Arial, Helvetica, sans-serif; color:#444; background:#fff url("../images/backgrounds/input.gif") repeat-x bottom left } div#chain-selector-form form ol { margin:20px 0 0 0; padding:0 } div#chain-selector-form form ol li { list-style:none; padding:1px 0; margin:0 } div#chain-selector-form form ol li span { color:#b3b2b1 } div#chain-selector-form li div.input-error { margin-left: 210px; } div#chain-selector-form li.input-error span { display:block; margin-left: 210px; } /* 4.8 - tables ----------------------------------------------- */ /* 4.8.1 - table to display the basket */ table#basket-table { width:558px; border:0; margin-left:5px } table#basket-table tr, th, td { border:0 } table#basket-table th#item { width:223px; height:32px; background:url("../images/titles/basket/item.gif") no-repeat; text-indent:-3000px } table#basket-table th#quantity { width:95px; height:32px; background:url("../images/titles/basket/quantity.gif") no-repeat; text-indent:-3000px } table#basket-table th#remove { width:124px; height:32px; background:url("../images/titles/basket/remove.gif") no-repeat; text-indent:-3000px } table#basket-table th#price { width:118px; height:32px; background:url("../images/titles/basket/price.gif") no-repeat; text-indent:-3000px } table#basket-table td { padding:7px; font-size:1.4em; border-bottom:1px solid #dfdedd } table#basket-table td.no-border { border-bottom:0; padding-top:1px; padding-bottom:1px } table#basket-table td.total-border { border-bottom:1px solid #000; padding-top:3px; padding-bottom:20px } table#basket-table td span { display:block; margin-top:15px } table#basket-table td span.product-description { color:#757676 } table#basket-table td span.product-price { font-weight:bold; color:#1ea3de; text-align:right; margin-right:23px } table#basket-table td span.sub-total { text-align:right; margin-right:23px } table#basket-table td span.price-labels { text-align:right; margin-right:8px } table#basket-table td span.delivery { text-align:right; margin-right:23px } table#basket-table td span.total-price-labels { text-align:right; margin-right:8px; font-size:1.3em; font-weight:bold } table#basket-table td span.total { text-align:right; margin-right:23px; font-size:1.3em; font-weight:bold } table#basket-table td.update-cart-action { border-top: 1px solid black; } /* 4.8.2 - table to display products */ table#product-table { width:558px; border:0; margin-left:5px } table#product-table tr, th, td { border:0 } table#product-table th#product { width:124px!important; height:32px; background:url("../images/titles/product-list/product.gif") no-repeat; text-indent:-3000px } table#product-table th#description { width:353px!important; height:32px; background:url("../images/titles/product-list/description.gif") no-repeat; text-indent:-3000px } table#product-table th#price { width:81px!important; height:32px; background:url("../images/titles/product-list/price.gif") no-repeat; text-indent:-3000px } table#product-table td { padding:0px; font-size:1.4em; border-bottom:1px solid #dfdedd } table#product-table td.no-border { border-bottom:0; padding-top:1px; padding-bottom:1px } table#product-table td.product-thumbnail { padding:5px 0 } table#product-table td span { display:block; margin-top:15px } table#product-table td span.product-description { color:#757676 } table#product-table td span.product-price { font-weight:bold; color:#1ea3de; margin-right:5px; margin-top:18px } table#product-table td span.recommended-price { font-weight:bold; color:#1ea3de; margin-top:29px; font-size:1.4em } table#product-table td span.product-price em { font-weight:normal; font-style:normal; color:#afb1b1; font-size:0.8em; display:block; margin:0 } /* 4.8.3 - generic widgets */ #primary-content p.notification { padding:0px 20px } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /* 5.1 - General layout ----------------------------------------------- */ /* 5.1.1 - index calls to action for main products */ div#snow-chains-for-cars { width:569px; height:172px; background:url("../images/calls-to-action/snow-chains-for-cars.jpg") no-repeat; position:relative } div#snow-chains-for-cars h2 { height:122px; width:327px; background:url("../images/titles/snow-chains-for-cars.gif") no-repeat top; text-indent:-3000px } div#snow-chains-for-cars a { position:absolute!important; top:122px; left:28px } div#snow-chains-for-4x4 { width:569px; height:172px; background:url("../images/calls-to-action/snow-chains-for-4x4.jpg") no-repeat; position:relative } div#snow-chains-for-4x4 h2 { height:121px; width:345px; background:url("../images/titles/snow-chains-for-4x4.gif") no-repeat top; text-indent:-3000px; float:right; margin-right:-1px } div#snow-chains-for-4x4 a { position:absolute!important; top:122px; left:369px } div#snow-chains-for-trucks { width:569px; height:172px; background:url("../images/calls-to-action/snow-chains-for-trucks.jpg") no-repeat; position:relative } div#snow-chains-for-trucks h2 { height:121px; width:353px; background:url("../images/titles/snow-chains-for-trucks.gif") no-repeat top; text-indent:-3000px } div#snow-chains-for-trucks a { position:absolute!important; top:122px; left:28px } div#autosock { width:569px; height:172px; background:url("../images/calls-to-action/autosock.jpg") no-repeat; position:relative } div#autosock h2 { height:121px; width:290px; background:url("../images/titles/autosock-cta.gif") no-repeat top; text-indent:-3000px; float:right; margin-right:-1px } div#autosock a { position:absolute!important; top:122px; left:369px } div#autosock-for-trucks { width:569px; height:230px; background:url("../images/calls-to-action/autosock-for-trucks.jpg") no-repeat; position:relative } div#autosock-for-trucks h2 { height:121px; width:316px; background:url("../images/titles/autosock-trucks-cta.gif") no-repeat top; text-indent:-3000px } div#autosock-for-trucks a { position:absolute!important; top:122px; left:28px } /* 5.1.2 - about us page */ div#about-us { padding:0 15px } /* 5.1.3 - basket area */ div#basket { background:url("../images/backgrounds/basket.gif") no-repeat bottom } div#basket h3 { width:193px; height:51px; background:url("../images/titles/basket.gif") no-repeat; text-indent:-3000px; margin:0 } div#basket ul { list-style:none; margin:0; padding:16px 30px 5px 22px } div#basket ul li { font-size:1.1em; padding:0 0 11px 0 } div#basket ul li a { color:#1ea3de; text-decoration:underline } div#basket ul li a:hover { color:#1ea3de; text-decoration:none } /* 5.1.4 - chain selector */ div#chain-selector { margin:15px 0 0 10px } div#chain-selector a { display:block; width:164px; height:118px; text-decoration:none; background:url("../images/buttons/chain-selector.jpg") no-repeat top left; text-indent:-3000px } div#chain-selector a:hover { background-position:50% -118px } /* 5.1.5 - fitting */ div#fitting { margin:15px 0 0 10px } div#fitting a { display:block; width:164px; height:118px; text-decoration:none; background:url("../images/buttons/fitting.jpg") no-repeat top left; text-indent:-3000px } div#fitting a:hover { background-position:50% -118px } /* 5.1.6 - support */ div#support { margin:15px 0 0 10px } div#support a { display:block; width:164px; height:118px; text-decoration:none; background:url("../images/buttons/support.jpg") no-repeat top left; text-indent:-3000px } div#support a:hover { background-position:50% -118px } /* 5.1.7 - suppliers */ ul.suppliers { list-style:none; margin:15px 0 0 0 } ul.suppliers li { margin:0 0 0 25px } /* 5.2 - faq */ dl#faq-list { margin:0 15px } dl#faq-list dt.faq-1 { height:35px; width:534px; background:url("../images/titles/faq/1.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-2 { height:59px; width:534px; background:url("../images/titles/faq/2.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-3 { height:35px; width:534px; background:url("../images/titles/faq/3.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-4 { height:35px; width:534px; background:url("../images/titles/faq/4.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-5 { height:35px; width:534px; background:url("../images/titles/faq/5.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-6 { height:59px; width:534px; background:url("../images/titles/faq/6.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-7 { height:35px; width:534px; background:url("../images/titles/faq/7.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-8 { height:59px; width:534px; background:url("../images/titles/faq/8.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-9 { height:35px; width:534px; background:url("../images/titles/faq/9.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-10 { height:58px; width:537px; background:url("../images/titles/faq/10.gif") no-repeat; text-indent:-3000px } dl#faq-list dt.faq-11 { height:82px; width:537px; background:url("../images/titles/faq/11.gif") no-repeat; text-indent:-3000px } dl#faq-list dd { border-bottom:1px solid #dfdedd; padding-bottom:15px; margin-bottom:27px; font-size:0.9em } /* 5.3 - fitting guides */ dl.fitting-guides { margin:-10px 15px 0 15px; padding:20px 0; min-height:130px; height:auto!important; height:130px } dl.fitting-guides#brenta-c { background:url("../images/fitting-guide/brenta-c.jpg") no-repeat left; padding-left:130px } dl.fitting-guides#brenta-c-4x4 { background:url("../images/fitting-guide/brenta-4x4.jpg") no-repeat left; padding-left:130px } dl.fitting-guides#sportmatik { background:url("../images/fitting-guide/sportmatik.jpg") no-repeat left; padding-left:130px } dl.fitting-guides#automatik { background:url("../images/fitting-guide/automatik.jpg") no-repeat left; padding-left:130px } dl.fitting-guides#austro-super { background:url("../images/fitting-guide/truck-austro-s.jpg") no-repeat left; padding-left:130px } dl.fitting-guides dt { font-size:1.6em; font-weight:bold; margin:15px 0 0 0; line-height:1.4em } dl.fitting-guides dd.video { padding:0 0 0 28px; margin:10px 0 10px 0; font-size:1.3em; line-height:18px; color:#aaa; background:transparent url("../images/icons/video.png") top left no-repeat } dl.fitting-guides dd.pdf { padding:0 0 0 28px; margin:10px 0 10px 0; font-size:1.3em; line-height:18px; color:#aaa; background:transparent url("../images/icons/acrobat.png") top left no-repeat } /* 5.4 - chain selector */ span.tyre-diagram { background:url("../images/backgrounds/tyre-diagram.png") no-repeat; width:278px; height:296px; position:absolute; top:75px; left:475px; display:block; z-index:2 } span.tyre-diagram-2 { background:url("../images/backgrounds/tyre-diagram.png") no-repeat; width:278px; height:296px; position:absolute; top:0px; left:275px; display:block; z-index:2 } div.customer-alert { background:url("../images/backgrounds/customer-alert.gif") no-repeat bottom; padding:5px 27px 10px 27px } div.customer-alert dl { color:#757676; margin:0 0 10px 0; font-size:1.2em } div.customer-alert dt { font-weight:bold; padding-bottom:2px } div.customer-alert dd { padding:3px 0 } div.customer-alert ul { list-style:none } div.customer-alert li { color:#757676; margin:0; font-size:1.2em; padding-bottom:2px } div.customer-alert address { font-style:normal; color:#757676; margin:0; font-size:1.2em } div.customer-alert a { color:#ff772e } p.tyre-warning { width:240px } /* 5.5 - products display ----------------------------------------------- */ /* 5.5.1 - products displayed in a list, information shown inside the table */ dl.product-description { width:303px; margin:15px 0 15px 0 } dl.product-description dt { font-weight:bold; font-size:0.9em; line-height:1.4em; padding-bottom:2px } dl.product-description dd { font-size:0.8em; color:#757676; line-height:1.4em; padding-bottom:1px } dl.product-description dd a { text-decoration:underline } dl.product-description dd a:hover { text-decoration:none } /* 5.5.2 - product description */ div#product-description { width:320px; padding-left:15px; float:left } div#product-description h2 { font-size:2.4em; letter-spacing:-0.03em; line-height:1.2em; margin:10px 0 5px 0 } div#product-description p.product-strapline { font-size:1.8em; color:#1ea3de; font-weight:bold; line-height:1.2em } div#product-description ul.product-features { list-style:none; margin:20px 10px 20px 10px } div#product-description ul.product-features li { padding-left:18px; margin-bottom:12px; background:transparent url("../images/icons/tick.gif") 0 0.2em no-repeat; color:#757676; font-size:1.1em; line-height:1.6em } /* 5.5.3 - product description */ div#product-shot { width:234px; float:right } /* 5.5.4 - product alert */ div#product-alert { background:url("../images/backgrounds/customer-alert.gif") no-repeat bottom; padding:5px 27px 10px 27px } div#product-alert p.intro { font-size:1.4em; color:#ff772e; margin-bottom:12px } div#product-alert p { font-size:1.2em; color:#ff772e; margin-bottom:18px } /* 5.5.5 - product recommendation */ h2.ttl-recommendation { font-size:1.3em; color:#ff6f27; background:url("../images/backgrounds/alert-title-2.gif") no-repeat top; padding:26px 20px 10px 56px; margin:0; line-height:140% } div#product-recommendation { background:url("../images/backgrounds/customer-alert.gif") no-repeat bottom; padding:5px 27px 17px 27px; margin-bottom:10px } div#product-recommendation p { font-size:1em; color:#757676; margin:-10px 0 0 30px; width:450px } dl.product-recommendation { margin:22px 50px 15px 0 } dl.product-recommendation dt { font-weight:bold; font-size:1.3em; line-height:1.4em; padding-bottom:2px } dl.product-recommendation dd { font-size:1em; color:#757676; line-height:1.4em; padding-bottom:1px } dl.product-recommendation dd a { text-decoration:underline } dl.product-recommendation dd a:hover { text-decoration:none } /* 5.5.6 - other suitable products */ h2.ttl-other-recommendations { font-size:1.1em; color:#000; background:url("../images/backgrounds/other-recommendations-title.gif") no-repeat top; padding:31px 0 5px 56px; margin:20px 0 0 0 } div#other-recommendations { background:url("../images/backgrounds/other-recommendations.gif") no-repeat bottom; padding:5px 27px 0 27px; margin-bottom:10px } /* 5.5.7 - pagination */ dl.pagination { padding:25px 0 0 0; font-size:0.85em; float:right } dl.pagination dt { float:left; font-weight:bold; margin-right:10px; color:#6d6d6d } dl.pagination dd { float:left; border-left:1px solid #c7c7c7; padding:0 8px } dl.pagination dd.previous-off { border-left:none; color:#c7c7c7; padding-left:16px; background:url("../images/pagination/arrow-off-left.gif") no-repeat left center } dl.pagination dd.previous-on { border-left:none; padding-left:16px; background:url("../images/pagination/arrow-on-left.gif") no-repeat left center } dl.pagination dd.next-off { color:#c7c7c7; padding-right:16px; background:url("../images/pagination/arrow-off-right.gif") no-repeat right center } dl.pagination dd.next-on { padding-right:16px; background:url("../images/pagination/arrow-on-right.gif") no-repeat right center } dl.pagination dd.dotted { color:#c7c7c7 } dl.pagination dd.current a { font-weight:bold; color:#6d6d6d } dl.pagination dd a { color:#1ea3de } dl.pagination dd a:hover { text-decoration:underline; color:#1ea3de } /* 5.6 - terms and conditions */ ol#conditions-of-sale { margin:20px 35px } ol#conditions-of-sale li { font-size:0.9em; padding-bottom:10px } /* 5.7 - order summary */ div.product-summary { margin-top:20px } div.product-summary div.product-image { float:left; margin:0 15px 0 110px; width:100px } div.product-summary img { } div.product-summary dl { margin:0 0 -5px 0; float:left } div.product-summary dl dt { font-size:1.6em; font-weight:bold; color:#1ea3de; margin:10px 0 } div.product-summary dl dd dl dt { font-size:1em; font-weight:bold; color:#757676; float:left; clear:left; margin:0 6px 6px 0 } div.product-summary dl dd dl dd { float:left; margin-bottom:6px; color:#757676 } /* 5.8 - order review */ div.review-field { font-size:1.4em; margin:0 15px 0 0; padding:17px 5px 0 5px; display:block; color:#757676 } fieldset label { clear:left } div.order-totals dl { margin-top:15px } div.order-totals dl dt { font-size:1.4em; padding:10px 0; float:left; clear:left; text-align:right; width:200px } div.order-totals dl dd { font-size:1.4em; padding:10px 0 10px 5px; float:left } div.order-totals dl dt.grand-total, div.order-totals dl dd.grand-total { font-size:1.8em; font-weight:bold } div.order-totals ol.totals li { padding: 10px; font-size: 13px } div.make-payment { background:url("../images/backgrounds/make-payment.gif") no-repeat bottom; padding:5px 27px 10px 27px } div.make-payment ol { margin:0 0 0 -10px!important } div.make-payment ol li { font-size:1.1em; padding:3px 0!important } div.make-payment ol li.btn-make-payment { padding-top:12px!important } div.make-payment ol li input.acceptterms { margin:5px 7px 0 0 } div.make-payment ol li a { color:#4b7640; text-decoration:underline } div.make-payment ol li a:hover { color:#4b7640; text-decoration:none } div.make-payment ol li em { display:block; margin-top:7px; font-size:0.9em } ol.vehicle-details { margin-top:5px!important; border-bottom:1px solid #dfdedd; padding-bottom:25px!important } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }