/*
---------------------------
Author: P Byford - Aug 2008
Body font-size must be 100%
---------------------------
(px)       (%)      (range)
8px        50%       48-53%
9px        56%       54-59%
10px       62%       60-65%
11px       68%       66-71%
12px       76%       73-78%
13px       82%       79-84%
14px       88%       85-90%
15px       94%       91-96%
16px      100%      98-103%
18px      112%     110-115%
20px      126%     123-128%
22px      138%     135-140%
24px      150%     148-153%
26px      162%     160-165%
28px      176%     173-178%
30px      188%     185-190%
---------------------------
*/

/* Global styles */
body {margin:0px; padding:0px; font-family:Arial,Helvetica,sans-serif; font-size:100%; color:#000000; background:#ffffff}
td {margin:0px; padding:0px; font-family:Arial,Helvetica,sans-serif; font-size:100%; color:#000000; vertical-align:top}
table {border:0px; border-collapse:collapse; width:100%}
form {margin:0px; clear:both; overflow:hidden}
input {margin:0px}
a {color:#000000; text-decoration:underline}
a:hover {color:#ed1e24; text-decoration:underline}
img {margin:0px; border:0px; vertical-align:top; display:block}
object,embed {display:block; clear:both; overflow:hidden; margin:0px; padding:0px}
div {overflow:hidden; clear:both; position:relative; margin:0px; padding:0px}
div.floatClear {clear:both; height:0px; font-size:0px}

/* Outer container */
#outerContainer {width:862px; margin:0px auto; padding:10px 0px}

/* Top area container */
#topArea {width:840px; padding:10px 10px 10px 10px; border:1px solid #333333}

/* Main header area */
#topArea div.mainHeader {float:left; clear:both; width:340px}
#topArea div.mainHeader h1 {overflow:hidden; clear:both; margin:0px 0px 0px 0px; padding:0px 0px 4px 0px}
#topArea div.mainHeader h2 {overflow:hidden; clear:both; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px}

/* Contact details area */
#contactDetails {float:right; clear:none; width:234px; padding:5px 0px 0px 0px}
#contactDetails div {margin:0px 0px 6px 0px}
#contactDetails div.address {
 width:234px;
 margin:0px 0px 0px 2px;
 background:url(../images/bg_address_top.gif) left top no-repeat}
#contactDetails div.address div {
 width:234px;
 margin:0px;
 padding:6px 0px 6px 0px;
 background:url(../images/bg_address_bot.gif) left bottom no-repeat}
#contactDetails div.address div div {
 font-size:82%;
 font-weight:bold;
 color:#ffffff;
 text-align:center;
 padding:0px;
 background:none}

/* Bottom area container */
#bottomArea {
 width:850px; 
 border-left:1px solid #333333;
 border-right:1px solid #333333;
 border-bottom:1px solid #333333;
 padding:10px 0px 0px 10px}

/* Top nav */
#topNav {width:850px; margin:0px 0px 10px 0px}
#topNav div {
 clear:none;
 float:left;
 width:160px;
 margin:0px 10px 0px 0px;
 background:url(../images/bg_topnav_top.gif) left top no-repeat}
#topNav a {
 display:block;
 font-size:88%;
 font-weight:bold;
 color:#ed1e24;
 text-decoration:none;
 padding:4px 8px 4px 8px;
 background:url(../images/bg_topnav_bot.gif) left bottom no-repeat}
#topNav a:hover {color:#333333}
#topNav a:active {padding:5px 7px 3px 9px}

/* Left nav */
#leftNav {float:left; width:160px; padding:0px 10px 0px 0px}
#leftNav div {
 width:160px;
 margin:0px 0px 3px 0px;
 background:url(../images/bg_leftnav_top.gif) left top no-repeat}
#leftNav a {
 display:block;
 font-size:88%;
 font-weight:bold;
 color:#ffffff;
 text-decoration:none;
 padding:4px 8px 4px 8px;
 background:url(../images/bg_leftnav_bot.gif) left bottom no-repeat}
#leftNav a:hover {color:#333333}
#leftNav a:active {padding:5px 7px 3px 9px}

/* Left nav: promo banners */
#leftNav div.promo {
 width:160px;
 font-size:76%;
 font-weight:bold;
 color:#000000;
 text-align:center;
 margin:0 0 3px 0;
 padding:10px 0 0 0;
 background-image:none}
#leftNav div.promo p {
 margin:0 0 5px 0;
 padding:5px 10px 0 10px}
#leftNav div.promo a {
 display:block;
 text-decoration:none;
 padding:0 0 0 0px;
 background:none left bottom no-repeat}
#leftNav div.promo img {
 display:inline}

/* Sub nav */
#subNav {
 width:160px;
 margin:0px 0px 0px 0px;
 background:#ffffff}
#subNav div {
 width:160px;
 margin:0px 0px 0px 0px;
 background:#ffffff}
#subNav a {
 display:block;
 font-size:68%;
 font-weight:bold;
 color:#000000;
 text-decoration:none;
 padding:0px 8px 0px 16px;
 background:none}
#subNav a:hover {color:#ed1e24}
#subNav a:active {padding:0px 8px 0px 16px}

/* Content area */
#contentArea {clear:none; float:left; width:500px; padding:0px 10px 0px 0px}
#contentArea div.container {width:100%}
#contentArea h2 {
 overflow:hidden;
 clear:none;
 font-size:126%;
 font-weight:bold;
 color:#000000;
 text-decoration:none;
 margin:0px 0px 10px 0px;
 padding:0px}
#contentArea h3 {
 overflow:hidden;
 clear:none;
 font-size:100%;
 font-weight:bold;
 color:#000000;
 text-decoration:none;
 margin:0px 0px 3px 0px;
 padding:0px}
#contentArea h4 {
 overflow:hidden;
 clear:none;
 font-size:76%;
 font-weight:bold;
 color:#000000;
 text-decoration:none;
 margin:0px 0px 0px 0px;
 padding:0px}
#contentArea p {font-size:76%; font-weight:normal; color:#000000; margin:0px 0px 10px 0px}
#contentArea div.floatRight {clear:right; float:right; margin:0px; padding:0px 0px 10px 10px}
#contentArea div.floatLeft {clear:left; float:left; margin:0px; padding:0px 10px 10px 0px}

/* News area */
#contentArea div.newsItem {padding:0px 0px 8px 0px}
#contentArea div.newsItem h3 {font-size:76%; margin:0px 0px 3px 0px}
#contentArea div.newsItem p {margin:0px 0px 3px 0px}

/* About us */
#contentArea div.aboutImages {width:400px; margin:0px auto}
#contentArea div.aboutImages div {padding:7px 0px 20px 0px}

/* terms & conditions */
#contentArea .termsList {margin:0; padding:0; list-style-type:none}
#contentArea .termsList ul {margin:0; padding:0; list-style-type:none}
#contentArea .termsList li {margin:0 0 15px 0; padding:0; font-size:76%; font-weight:bold}
#contentArea .termsList li li {margin:0 0 10px 20px; font-size:100%; font-weight:normal}
#contentArea .termsList div {font-size:100%; font-weight:normal}

/* Information */
#contentArea ol {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px}
#contentArea li {font-size:76%; font-weight:normal; color:#000000; margin:0px 0px 0px 25px; padding:0px 0px 10px 0px}
#contentArea li ol {margin:0px 0px 0px 0px}
#contentArea li ol li {font-size:100%; margin:0px 0px 0px 20px; padding:5px 0px 0px 0px}
#contentArea div.paperSizes h3 {
 font-size:240%;
 font-weight:bold;
 color:#ed1e24;
 text-transform:uppercase;
 text-decoration:none;
 margin:0px 0px 5px 0px;
 padding:0px}
#contentArea div.paperSizes div.left {float:left; clear:both; padding:0px 0px 0px 0px}
#contentArea div.paperSizes div.right {float:right; clear:none; padding:0px 0px 10px 10px}
#contentArea div.paperSizes div div {font-size:112%; font-weight:bold; color:#000000; padding:0px 0px 4px 0px}

/* Contact us */
#contentArea div.contactUs div {width:500px; margin:0px 0px 10px 0px; background:url(../images/bg_cont_top.gif) left top no-repeat}
#contentArea div.contactUs div div {width:500px; margin:0px; background:url(../images/bg_cont_bot.gif) left bottom no-repeat}
#contentArea div.contactUs div div div {background:none; margin:0px; padding:10px 0px 10px 70px}
#contentArea div.contactUs div div div div {font-size:100%; font-weight:bold; color:#000000; margin:0px; padding:0px 0px 0px 0px}
#contentArea div.contactUs div.map div {padding:10px 10px 10px 10px}
#contentArea div.contactUs a {color:#ed1e24; text-decoration:none}
#contentArea div.contactUs a:hover {text-decoration:underline}

/* Testimonials */
#contentArea div.testimonial {margin:0px 0px 0px 0px; padding:15px 0px 15px 0px; border-top:1px dashed #333333}
#contentArea div.testimonial p {margin:0px 0px 4px 0px}
#contentArea div.testimonial p.author {font-style:italic; color:#333333; margin:0px 0px 4px 0px}
#contentArea div.testimonial p.position {font-style:italic; color:#666666; margin:0px 0px 0px 0px}

/* Banners */
#contentArea div.bannerGrid {width:405px; padding:10px 0px 5px 50px}
#contentArea div.bannerGrid div {
 clear:none;
 float:left;
 width:120px;
 margin:0px 15px 15px 0px;
 padding:0px 0px 0px 0px}

/* Banners: price table */
#contentArea div.priceTable {
 font-size:76%;
 font-weight:normal;
 color:#000000;
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px}
#contentArea div.priceTable div {padding:0px 0px 5px 0px}
#contentArea div.priceTable div div {text-align:center; padding:0px 0px 0px 0px}
#contentArea div.priceTable table {
 width:497px;
 margin:0px 0px 5px 1px;
 border:1px solid #000000}
#contentArea div.priceTable th {
 font-size:94%;
 font-weight:normal;
 color:#ffffff;
 border:1px solid #000000;
 padding:2px 4px 2px 4px;
 background:#ed1e24}
#contentArea div.priceTable td {
 border:1px solid #000000;
 padding:2px 2px 2px 2px;
 text-align:center}
#contentArea div.priceTable td.left {
 font-size:94%;
 font-weight:normal;
 color:#ffffff;
 padding:3px 4px 2px 4px;
 text-align:left;
 background:#ed1e24}

/* Banner: special promo */
#contentArea div.specialPromo {padding:0px 0px 15px 100px}
#contentArea div.specialPromo img {display:inline}

/* Flags */
#contentArea div.flagsPoles {width:270px; padding:10px 0px 5px 100px}
#contentArea div.flagsPoles div {
 clear:none;
 float:left;
 width:120px;
 margin:0px 15px 15px 0px;
 padding:0px 0px 0px 0px;
 background:#ffffff}
#contentArea div.flagsPoles div div {
 clear:both;
 float:none;
 font-size:88%;
 font-weight:bold;
 color:#000000;
 text-align:center;
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px}
#contentArea div.flagsPoles div img {margin:2px auto 0px auto}

/* Health and safety */
#contentArea div.health {width:480px; padding:10px 0px 5px 15px}
#contentArea div.health div {
 clear:none;
 float:left;
 width:150px;
 margin:0px 10px 10px 0px;
 padding:0px 0px 0px 0px;
 background:#eeeeee}

/* Product boxes */
#contentArea div.productBox {width:100%; margin:0px 0px 10px 0px}
#contentArea div.productBox div {
 clear:none;
 float:left;
 width:166px;
 margin:0px 0px 10px 0px;
 padding:0px 0px 0px 0px;
 background:#ffffff}
#contentArea div.productBox div div {
 clear:both;
 float:none;
 font-size:76%;
 font-weight:normal;
 color:#000000;
 text-align:center;
 margin:0px 0px 0px 0px;
 padding:0px 0px 2px 0px}
#contentArea div.productBox div img {margin:0px auto}

/* Product details */
#contentArea div.productDetails {width:480px; padding:0px 0px 10px 10px}
#contentArea div.productDetails h3 {clear:none; font-size:112%; margin:0px 0px 10px 0px}
#contentArea div.productImg {width:170px; clear:both; float:left}
#contentArea div.productDescription {clear:none; padding:0px 0px 10px 0px}
#contentArea div.productDescription p {margin:0px 0px 5px 0px}
#contentArea div.productPrice {clear:none; padding:0px 0px 0px 0px}
#contentArea div.productPrice p {font-size:88%; font-weight:bold; margin:0px 0px 3px 0px}

/* Vehicle liveries */
#contentArea div.vehicleButtons {width:480px; padding:10px 0px 0px 15px}
#contentArea div.vehicleButtons div {
 clear:none;
 float:left;
 width:110px;
 margin:0px 10px 0px 0px;
 padding:0px 0px 0px 0px;
 background:#eeeeee}

/* Vehicle liveries: details */
#contentArea div.vehicleLivery h2 {margin-top:5px}
#contentArea div.vehicleLivery p {clear:both}
#contentArea div.liveryImages {clear:none}
#contentArea div.liveryImages img {clear:right; float:right; padding:0px 10px 40px 0px}
#contentArea table.liveryPrices {
 width:auto;
 clear:none;
 font-size:112%;
 font-weight:bold;
 color:#000000;
 margin:0px 0px 8px 0px;}
#contentArea table.liveryPrices td {padding:0px 15px 1px 0px}

/* Promotional */
#contentArea div.promotional {width:405px; padding:10px 0px 5px 50px}
#contentArea div.promotional div {
 clear:none;
 float:left;
 width:120px;
 margin:0px 15px 15px 0px;
 padding:0px 0px 0px 0px;}
#contentArea div.promotional div div {
 clear:both;
 float:none;
 font-size:88%;
 font-weight:bold;
 color:#000000;
 text-align:center;
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px}
#contentArea div.promotional div img {margin:2px auto 0px auto}

/* Wheel covers */
#contentArea div.wheelCovers {width:500px; padding:0px 0px 0px 0px}
#contentArea div.wheelCovers div {
 width:245px;
 clear:none;
 float:left;
 font-size:76%;
 font-weight:normal;
 color:#000000;
 text-align:center;
 margin:0px 0px 0px 0px;
 padding:0px 0px 15px 0px}
#contentArea div.wheelCovers div div {
 clear:both;
 float:none;
 font-size:100%;
 margin:0px 0px 0px 0px;
 padding:0px 0px 0px 0px}
#contentArea div.wheelCovers p {font-size:76%; font-weight:normal; color:#000000; text-align:center; margin:0px}
#contentArea div.wheelCovers img {margin:0px 0px 10px 0px}

/* Specials */
#contentArea div.specialsCol {width:480px; padding:0px 0px 0px 10px}
#contentArea div.specialsCol div.left {clear:left; float:left; width:235px; margin:0px; padding:0px 0px 0px 0px}
#contentArea div.specialsCol div.right {clear:right; float:right; width:235px; margin:0px; padding:0px 0px 0px 0px}
#contentArea div.specialsCol img {margin:0px 0px 10px 0px}

/* Mats: bullet list */
#contentArea div.bulletList {padding:10px 0px 10px 0px}
#contentArea div.bulletList div {
 font-size:100%;
 font-weight:bold;
 text-transform:uppercase;
 background:url(../images/bullet_red12.gif) 0 0.2em no-repeat;
 padding:0px 0px 3px 18px}

/* Mats: image strip */
#contentArea div.mats {width:480px; padding:10px 0px 5px 15px}
#contentArea div.mats div {
 clear:none;
 float:left;
 width:150px;
 margin:0px 10px 10px 0px;
 padding:0px 0px 0px 0px}

/* Mats: price table */
#contentArea div.matsPriceTable table {
 width:350px;
 margin:0px 0px 10px 75px}
#contentArea div.matsPriceTable th {
 width:110px;
 font-size:110%;
 font-weight:bold;
 color:#ffffff;
 border:1px solid #ffffff;
 padding:2px 4px 2px 4px;
 background:#ed1e24}
#contentArea div.matsPriceTable td {
 font-size:94%;
 font-weight:bold;
 color:#ffffff;
 border:1px solid #ffffff;
 padding:2px 15px 2px 15px;
 text-align:center;
 background:#ed1e24}
#contentArea div.matsPriceTable td.left {text-align:left}

/* wheelie bins */
#contentArea div.blackTextBox {width:100%; padding:0 0 30px 10px}
#contentArea div.blackTextBox div {width:480px}
#contentArea div.blackTextBox p {
 width:456px;
 font-size:94%;
 font-weight:bold;
 font-style:italic;
 color:#ffffff;
 line-height:1.3em;
 text-align:center;
 margin:0;
 padding:4px 12px;
 background:#000000}

/* wheelie bins: options */
#contentArea div.wheelieOption {width:500px; margin:0 0 20px 0}
#contentArea div.wheelieOption img {display:inline}
#contentArea div.optionColLeft {float:left; clear:none; width:120px; padding:0 10px 0 0}
#contentArea div.optionImg {float:left; clear:none; width:170px; text-align:center}
#contentArea div.optionColRight {float:left; clear:none; width:200px}
#contentArea div.wheelieOption h3 {
 font-size:150%;
 font-weight:normal;
 color:#000000;
 text-align:center;
 padding:0 0 6px 0}
#contentArea div.wheelieOption div.optionTxt1 {
 font-size:68%;
 font-weight:normal;
 color:#000000;
 text-align:center;
 padding:0 0 0 0}
#contentArea div.wheelieOption div.optionPrice {
 font-size:176%;
 font-weight:bold;
 color:#ed1e24;
 text-align:center;
 padding:0 0 0 0}
#contentArea div.wheelieOption h4 {
 font-size:150%;
 font-weight:normal;
 color:#ed1e24;
 text-align:center;
 padding:0 0 6px 0}
#contentArea div.wheelieOption div.optionTxt2 {
 font-size:88%;
 font-weight:bold;
 color:#000000;
 text-align:center;
 padding:0 0 5px 0}
#contentArea div.wheelieOption div.optionTxt3 {
 font-size:82%;
 font-weight:normal;
 color:#000000;
 text-align:center;
 padding:0 0 6px 0}
#contentArea div.wheelieOption div.optionSize {
 font-size:126%;
 font-weight:bold;
 color:#ed1e24;
 text-align:center;
 padding:0 0 0 0}

/* wheelie bins: examples */
#contentArea div.wheelieExamples {width:500px}
#contentArea div.wheelieExamples div {width:500px}
#contentArea div.wheelieExamples div div {
 width:115px;
 float:left;
 clear:none;
 padding:0 5px 20px 5px}

/* Right nav */
#rightNav {clear:none; float:left; width:160px; padding:0px 10px 0px 0px}
#rightNav div {
 width:160px;
 margin:0px 0px 10px 0px;
 padding:0px 0px 0px 0px;
 background:url(../images/bg_rightnav_top.gif) left top no-repeat}
#rightNav div div {
 margin:0px;
 padding:0px;
 background:url(../images/bg_rightnav_bot.gif) left bottom no-repeat}
#rightNav div div div {background:none}
#rightNav div div img {margin:10px auto}
#rightNav p {font-size:76%; font-weight:bold; color:#000000; margin:10px 0px 0px 10px}