html, body
{
    margin: 0 0 40px;
    padding: 0;
}
body
{
    font: 12px/1.5em Arial, Helvetica, sans-serif;
    color: #000;
    background: #EBE9E3 url(../images/body_bg.gif) repeat-y 2px 0;
}
td{font-size: 12px;}
h1, h2, h3, h4, h5
{
    margin: 0 0 1em;
    color: #0066B3;
}
h1{}
h2
{
    font: bold 24px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0 0  .8em;
}
h3{font-size: 16px; margin: 0 0 .3em;}
h4{font-size: 12px; margin: 0 0 .3em;}
p
{
    margin: 0 0 1em;
    line-height: 1.5em;
}
a,
a:link,
a:visited{color: #0066B3;}
a:hover,
a:active{color: #0066B3;}
a img{border: none;}
ul li,
ol li{line-height: 1.5em;}
form{margin: 0;}
fieldset{padding: 0;}

/* ~~~ === POSITIONING SELECTORS ================================ ~~~ */
#wrapper
{
    width: 880px;
    margin: 0 0 0 2px;
    border-top: 2px solid #EBE9E3;
}
#masthead
{
    height: 127px;
    background: #0250A3 url(../images/masthead_bg.jpg) no-repeat 100% 0;
}
#masthead h1
{
    margin: 0;
    padding: 10px 0 0 10px;
}
#leftcol
{
    width: 166px;
    float: left;
    padding: 16px 0;
    color: #fff;
}
#midcol
{
    width: 514px;
    float: left;
    padding: 20px;
}
#rightcol
{
    width: 160px;
    float: right;
    min-height: 600px;
    background: transparent url(../images/rightcol_bg.gif) no-repeat 0 0;
    text-align: center;
    padding-top: 12px;
}
#footer
{
    clear: both;
    width: 514px;
    margin-left: 186px;
    text-align: center;
    font-size: 11px;
}
    #footer p{margin: 0;}
    #footer p.note
    {
        color: #0066B3;
        text-transform: uppercase;
    }
    #footer a
    {
        padding: 2px;
        color: #000;
        text-decoration: none;
    }
    #footer a:hover{text-decoration: underline;}

/* ~~~ === MAIN NAVIGATION ============================================= ~~~ */
#menu
{
    list-style-type: none;
    margin: 0 0 2em;
    padding: 0;
}
#menu li{line-height: 22px;}
#menu a
{
    display: block;
    width: 152px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    padding: 0 6px;
}
#menu ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu ul a
{
    width: 146px;
    padding: 0 6px 0 12px;
}
#menu li.active li a{color: #fff;}
#menu li.active a,
#menu li.active li.active a{color: #0066B3;}

#cartSummary{margin: 1em 6px;}
#cartSummary h3{margin: 0 0 .3em;}
#cartSummary p{margin: 0 0 .5em;}
#cartSummary button{width: 150px;}

/* ~~~ === PRODUCT DETAILS ========================================== ~~~ */
#productImage
{
    float: left;
    text-align: left;
    width: 255px;
    padding-bottom: 1em;
}
#productDetails dl
{
    margin: 0;
    padding: 0;
    width: 255px;
    float: right;
}
#productDetails dt
{
    font-size: 16px;
    font-weight: bold;
    color: #0451A3;
    text-transform: uppercase;
    line-height: 1.3em;
}
#productDetails dd
{
    line-height: 1.5em;
    margin: 0 0 6px;
}
#productDetails dd.price
{
    font-weight: bold;
}
#details
{
    clear: both;
    margin: 1em 0;
}
#details img.border-none{border: none;}
a.colourChartLink
{
    font-size: 11px;
    font-style: italic;
}
/* ~~~ === ORDER DETAILS ============================================ ~~~ */
.tableOrderDetail
{
    width: 100%;
    border-collapse: collapse;
}
.tableOrderDetail thead th
{
    text-align: center;
    padding: 4px 8px;
    border-bottom: 1px solid #999;
}
.tableOrderDetail thead th.left{text-align: left;}
#orderDetail td
{
    padding: 4px 8px;
    border-bottom: 1px solid #999;
    text-align: center;
}
#orderDetail td.qty
{
    white-space: nowrap;
}
#orderDetail td.left{text-align: left;}
.tableOrderDetail tbody td
{
    padding: 1px 8px;
}
.tableOrderDetail tbody td.right{text-align: right;}
.tableOrderDetail tbody td.padTop{padding-top: 1em;}
.tableOrderDetail tbody td.price
{
    width: 1%;
    white-space: nowrap;
}
.tableOrderDetail tfoot td
{
    padding: 8px;
    text-align: right;
}
#sslCertificate
{
    text-align: center;
    margin: 3em 8px;
}
#sslCertificate p.note{text-align: left;}

/* ~~~ === RETAILERS ================================================= ~~~ */
dl.retailer
{
    width: 49%;
    float: left;
}
dl.retailer dt
{
    width: 200px;
    border-bottom: 1px solid #fff;
    text-align: center;
    margin: 0 auto;
}
dl.retailer dt img{display: block;}
.retailer dd
{
    width: 184px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
    padding: 8px;
    background-color: #222;
}
dl.retailer dd a
{
    color: #fff;
    text-decoration: none;
}
dl.retailer dd.blue{background-color: #00549F;}
dl.retailer dd.yellow{background-color: #FEE011; color: #000;}
dl.retailer dd.red{background-color: #EF3F42;}
dl.retailer dd.orange{background-color: #F37921;}
dl.retailer dd.green{background-color: #009B68;}


dl.retailer dd.yellow a{color: #000;}
/* ~~~ === BANNERS ==================================================== ~~~ */
#banners
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#banners li{text-align: center;}

/* ~~~ ==== FORMTABLE ================================================= ~~~ */
.formtable{margin: 1em 0 0;}
.formtable tbody td
{
    padding: 2px 4px;
}
.formtable tbody th
{
    text-align: right;
    white-space: nowrap;
}
.formtable tbody th span{color: #ff0000;}
.formtable tbody td.note{padding: 4px 4px;}
.formtable tbody td.note p
{
    margin: 0 0 .1em;
    line-height: 1.3em;
}
/* ~~~ === FORMS ==================================================== ~~~ */
fieldset
{
    border: 1px solid #999;
    padding: 0 2em 2em;
    margin: 0 0 1em;
    background: url(../images/form_bg.gif) repeat-x 0 100%;
}
legend
{
    font-size: 16px;
    font-weight: bold;
    color: #0451A3;
}
.input
{
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid #999;
}
button,
.button
{
    font: bold 12px Arial, Helvetica, sans-serif;
}
.formRequired
{
    color: #ff0000;
}
#brochures th div
{
    height: 42px;
}
#brochures th{vertical-align: middle;}
#brochures th div img{vertical-align: middle;}

/* ~~~ === SITEMAP ================================================================================== ~~~ */
#sitemap{margin: 28px 14px;}
#sitemap h3
{
    background: url(../images/icons/base.gif) no-repeat 2px 0;
    margin: 16px 0 0 16px;
    padding:0 0 5px 18px;
    font: bold 12px Arial, Helvetica, sans-serif;
}
ul.sitemap
{
    list-style-type: none;
    margin: 0 16px 16px;
    padding: 0;
    background: url(../images/icons/line.gif) repeat-y;
}
ul.sitemap
{
    list-style-type: none;
    margin: 0 16px 16px;
    padding: 0;
    background: url(../images/icons/line.gif) repeat-y;
}
ul.sitemap ul
{
    list-style-type: none;
    margin: 0 0 0 8px;
    padding: 0;
    background: url(../images/icons/line.gif) repeat-y;
}
ul.sitemap li
{
    line-height: 20px;
    padding-left: 7px;
    position: relative;
}
ul.sitemap a,
ul.sitemap li.lastchild li a
{
    background: url(../images/icons/page.gif) no-repeat 0 50%;
    padding: 4px 0 4px 26px;
}
.lastchild{background-color: #fff;}
li.lastchild a,
ul.sitemap li.lastchild li.lastchild a{background: #fff url(../images/icons/page_bottom.gif) no-repeat 0 0;}

/* ~~~ === CLASSES ============================== ~~~ */
.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.note
{
    font-size: 11px;
    line-height: 1.3em;
}
div.captionImageLeft,
div.captionImageRight
{
    font-size: .9em;
    color: #888;
}
div.captionImageLeft
{
    float: left;
    margin: 4px 12px 4px 0;
}
div.captionImageRight
{
    float: right;
    margin: 4px 0 4px 12px;
}
.img-left
{
    float: left;
    margin: 0 12px 4px 0;
}
.img-right
{
    float: right;
    margin: 0 0 4px 12px;
}
.border-none{border: none;}
.border-thin{border: 1px solid #999;}
.border-thick{border: 2px solid #999;}