body{
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 13px;
    color: #222222;
    margin: 0;
    padding: 0;
  /*  background: white url('/images/background2.jpg') no-repeat fixed;*/
}


/* background image */
* {
    margin: 0;
    padding: 0;
}

html, body, #bg, #bg table, #bg td {
    height:100%;
    width:100%;
    overflow:hidden;
}

#bg {
    position: fixed;
}

#bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#bg td {
    text-align:center;
    vertical-align:middle;
}

#bg img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
}

#cont {
    position:absolute;
    top:0;left:0;
    width: 100%;
    height: 100%;
    z-index:70;
    overflow:auto;
}

.box {
    margin: 0 auto;
    width: 1030px;
}

/* end background */

p{
    padding-top: 5px;
}



form{
    margin: 0;
    padding: 0;
}

h1{
    width: 244px;
    height: 95px;
    background: transparent url('/images/mph_logo.png') no-repeat;
    text-indent: -10000px;
    margin-left: -4px;
    margin-top: -10px;
}


h1 a{
    display: block;
    width: 239px;
    height: 92px;
}

h2{
    color: #003F2B;
    font-size: 26px;
    margin-bottom: 3px;
    margin-top: 0px;
    border-bottom: 7px solid #DC0036;
    font-weight: normal;
}

h3{
    color: #DC0036;
    margin: 10px 0 4px 0;
}

a img{
    border: 0;
}

a{
    text-decoration: none;
    color: #DC0036;
}

a:hover{
    color: #444444;
}

img#print_logo{
    display: none;
}

div#topcontainer{
    width: 1030px;
    padding: 0 0 0 20px;
    background: transparent url('/images/content_top.png') no-repeat right top;
    height: 14px;
    margin: 0 auto;
}

* html div#topcontainer{
   margin: 0 auto -2px auto;
}

div#bottomcontainer{
    width: 1030px;
    padding: 0 0 0 20px;
    background: transparent url('/images/content_bottom.png') no-repeat right top;
    height: 50px;
    margin: 0 auto 10px auto;
}

div#bottomcontainer ul{
    list-style-type: none;
    margin: 15px 0 0 0;
    padding: 0;
    float: right;
}

div#bottomcontainer ul li{
    float: left;
    padding: 5px 10px;
}

div#bottomcontainer ul li a{
    font-weight: bold;
    color: #444444;
    font-size: 12px;
    text-decoration: none;
}

div#bottomcontainer ul li a:hover{
    color: #DC0036;    
}

div#sitecontainer{
    width: 1030px;
    padding: 6px 0 10px 20px;
    margin: 0 auto;
    background: transparent url('/images/content_back.png') repeat-y right top;
}

div.item_container{
    background: #EEEEEE;
    color: #444444;
    border: 1px solid #DDDDDD;
    padding: 10px 10px 5px 10px;
    margin-top: 5px;
}


a.more{
    background: transparent url('/images/more_back.png') no-repeat top left;
    width: 64px;
    height: 20px;
    padding: 7px 0 0 8px;
    display: block;
    margin: 5px 0;
    color: #DC0036;
    text-decoration: none;
    font-size: 12px;
}

a.more:hover{
    color: #222222 !important;
}


a.view_all_products{
    background: white url('/images/view_all_back.png') no-repeat top left;
    width: 135px;
    height: 25px;
    padding: 7px 0 0 8px;
    display: block;
    margin: 10px 0;
    font-size: 12px;
    text-decoration: none;
}

a.view_all_products:hover{
    color: #222222 !important;
}

a#add_to_basket, a#product_checkout, a.download{
    background: white url('/images/add_to_basket.png') no-repeat top left;
    width: 110px;
    height: 25px;
    padding: 7px 0 0 8px;
    display: block;
    margin: 5px 0;
    font-size: 12px;
    text-decoration: none;
    float: right;
}

a#add_to_basket:hover, a#product_checkout:hover, a.download:hover{
    color: #222222 !important;
}

a.download{
    float: none;
}

a#product_checkout{
    margin-left: 300px;
}


a#postcode_button{
    background: white url('/images/more_back.png') no-repeat top left;
    color: #DC0036;
    width: 64px;
    font-size: 12px !important;
    height: 25px;
    padding: 7px 0 0 8px;
    display: block;
    margin: 5px 0;
    text-decoration: none;
}

a#postcode_button:hover{
    color: #222222;
}


div#header{
    height: 90px;
    position: relative;
    width: 1040px;
    margin: 0px auto;
    padding-top: 20px;
}

div#utilbar{
    background: black;
    height: 40px;
    width: 1000px;
    color: white;
    margin: 20px 0;
}

div#accordion{
    margin-top: 10px;
    font-size: 14px;
}

div#accordion ul{
    list-style-image: url('/images/list_point.png');
    margin-left: 15px;
    padding-left: 15px;
}




/* login */
div#login{
    width: 135px;
    height: 50px;
    padding: 2px 0 10px 10px;
    z-index: 20000;
    position: absolute;
    right: 300px;
    top: -36px;
    background: transparent url('/images/login.png') no-repeat;
}

div#login a{
    display: block;
    font-size: 11px;
    color: #444444;
    text-decoration: none;
    padding: 1px 0;
    width: 125px;
    border-bottom: 1px dotted #BBBBBB;    
}

div#login a:hover{
    color: #DC0036;
}

div#login a#customer_login{
    position: absolute;
    width: 135px;
    font-size: 12px;
    bottom: 5px;
    height: 15px;
    padding-bottom: 1px;
    border-bottom: 0;
    outline: none;
    background: transparent url('/images/arrow.png') no-repeat 110px 0px;
    color: #DC0036;
}

div#login a#customer_login:hover{
    color: #444444;
}

/* breadcrumb */

ul#breadcrumb{
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 700px;
    float: left;
}

ul#breadcrumb a{
    text-decoration: none;
    color: white;
}

ul#breadcrumb a:hover{
    color: #000000;
}

li.breadstart{
    padding: 13px 5px 8px 10px;
    height: 19px;
    background: #DC0036;
    float: left;
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
}

li.breadsecond{
    padding: 13px 5px 8px 24px;
    height: 19px;
    background: url('/images/bread-start.png') no-repeat;
    background-color: #DC0036;
    float: left;
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
}

li.breadmiddle{
    padding: 13px 5px 8px 24px;
    height: 19px;
    background: url('/images/bread-middle.png') no-repeat;
    background-color: #DC0036;
    float: left;
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
}

li.breadend{
    padding: 13px 0px 8px 0px;
    width: 18px;
    height: 19px;
    background: url('/images/bread-end.png') no-repeat;
    background-color: #DC0036;
    float: left;
}

div#search{
    float: right;
    margin-right: 10px;
    width: 280px;
    text-align: right;
    vertical-align: middle;
    padding-top: 8px;
}

input.search_input{
    width: 160px;
    padding: 4px;
    font-size: 14px;
    font-family: Helvetica, Arial, Sans-Serif;
    border: 0;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

input.search_submit{
    vertical-align: middle;
    margin: 0;
}

/* basket */
div#basket_summary{
    width: 240px;
    height: 23px;
    padding-top: 5px;
    position: absolute;
    top: 0px;
    right: 5px;
    vertical-align;
    padding-left: 28px;
    font-size: 12px;
    background: transparent url('/images/basket_back.png') no-repeat;
}

div#basket_summary span{
    font-weight: bold;
}

div#basket_summary a{
    text-decoration: none;
    color: #222222;
    display: block;
    width: 90px;
    padding-left: 8px;
    height: 23px;
    padding-top: 5px;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent url('/images/checkout_back.png') no-repeat;    
}

div#basket_summary a:hover{
    color: #DC0036;
}


/* navigation */
ul#navigation{
    list-style-type: none;
    position: absolute;
    right: 30px;
    bottom: 0px;
    margin: 0;
    padding: 0;
}

* html ul#navigation{
   margin: 0 0 -2px 0;
}


ul#navigation li{
    float: left;
    display: block;
    margin-right: 2px;
}

ul#navigation li a{
    outline: none;
    display: block;
    width: 90px;
    height: 38px;
    background-image: url('/images/menu.png');
    background-repeat: no-repeat;
    text-indent: -10000px;
}


ul#navigation li a.aboutus{
    background-position: 0px 0px;
}

ul#navigation li a.thegear{
    background-position: -180px 0px;
}

ul#navigation li a.news{
    background-position: -360px 0px;
}


ul#navigation li a.locations{
    background-position: -90px 0px;
}


ul#navigation li a.training{
    background-position: -270px 0px;
}


ul#navigation li a.hse{
    background-position: -450px 0px;
}

ul#navigation li a.contact{
    background-position: -540px 0px;
}

ul#navigation li a.reporting{
    background-position: -630px 0px;
}

ul#navigation li a.aboutusselected{
    background-position: 0px -46px;
}

* html ul#navigation li a.aboutusselected{
   background-position: 0px -47px;
}


ul#navigation li a.thegearselected{
    background-position: -180px -46px;
}

* html ul#navigation li a.thegearselected{
   background-position: -180px -47px;
}


ul#navigation li a.newsselected{
    background-position: -360px -46px;
}

* html ul#navigation li a.newsselected{
   background-position: -360px -47px;
}


ul#navigation li a.locationsselected{
    background-position: -90px -46px;
}

* html ul#navigation li a.locationsselected{
   background-position: -90px -47px;
}


ul#navigation li a.trainingselected{
    background-position: -270px -46px;
}

* html ul#navigation li a.trainingselected{
   background-position: -270px -47px;
}


ul#navigation li a.hseselected{
    background-position: -450px -46px;
}

* html ul#navigation li a.hseselected{
   background-position: -450px -47px;
}


ul#navigation li a.contactselected{
    background-position: -540px -46px;
}

* html ul#navigation li a.contactselected{
   background-position: -540px -47px;
}


ul#navigation li a.reportingselected{
    background-position: -630px -46px;
}

* html ul#navigation li a.reportingselected{
   background-position: -630px -47px;
}


ul#navigation li a.selectedselected{
    background-position: -53px 0px;
}




/* sidenav */

div#sidenav{
    width: 220px;
    margin-right: 20px;
    float: left;
}

ul#categories{
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 0;
    padding: 3px 10px 10px 10px;
    border: 1px solid #DDDDDD;
    background: #EEEEEE;        
}

ul#categories li{
    padding: 7px 0;
    border-bottom: 1px solid #DDDDDD;
}

ul#categories li a{
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    color: #444444;
}

ul#categories li a:hover{
    color: #DC0036;
}



/* content */

div#mainbanner{
    background: black url('/images/main_banner.png') no-repeat;
    float: left;
    margin-right: 20px;
    width: 740px;
    height: 170px;
    text-indent: -10000px;
}

div#callbanner{
    background: #DC0036 url('/images/call.png') no-repeat;
    float: left;
    width: 240px;
    height: 170px;
    text-indent: -10000px;
}

div#content{
    width: 760px;
    overflow:hidden;
    float: left;
}


/* frontpage */

div#frontpage{
    font-size: 12px;
}

div#frontpage h2{
    margin-bottom: 10px;
}

div#frontpage_locations{
    width: 240px;
    float: left;
    height: 340px;
}

div#frontpage_aboutus{
    width: 240px;
    float: left;
    margin-right: 20px;
    height: 340px;
}

div#frontpage_training{
    width: 240px;
    float: left;
    margin-right: 20px;
    height: 340px;
}

div#frontpage_product{
    width: 500px;
    float: left;
    margin-right: 20px;
}

div#frontpage_news{
    width: 240px;
    float: left;
}

div#frontpage_news ul, div#news ul{
    list-style-type: none;
    padding: 3px 10px 10px 10px;
    margin: 0;
    border: 1px solid #DDDDDD;
    background: #EEEEEE;
    font-size: 12px;
    color: #444444;
}

div#news ul{
    margin-top: 10px;
}

div#frontpage_news ul li, div#news ul li{
    padding: 7px 0;
    position: relative;
    border-bottom: 1px solid #DDDDDD;
}

div#news ul li{
    padding: 10px 0;
}

div#frontpage_news ul li a, div#news ul li a{
    text-decoration: none;
    color: #DC0036;
}

div#frontpage_news ul li a:hover, div#news ul li a:hover{
    color: #444444;
}

div#frontpage_news ul li strong{
    display: block;
    margin: 4px 0 0 0;
    position: absolute;
    bottom: 10px;
    right: 0px;
}

div#frontpage_news ul li h3, div#news ul li h3, div#frontpage h3{
    margin: 0;
    padding: 0 0 3px 0;
    font-size: 15px;
}

div#news ul li strong{
    position: absolute;
    display: block;
    margin: 4px 0 0 0;
    top: 3px;
    right: 0px;
}

div#news_item{
    width: 500px;
    float: left;
    margin-right: 20px;
    color: #444444;
    font-size: 13px;
}

div#news_item img{
    float: left;
    margin: 0 10px 10px 0;
}

ul.news_item{
    margin-top: 10px !important;
}

/* category/thegear */

div#thegear, div#searchresults{
    width: 780px;
}

div#banners{
    width: 780px;
    height: 75px;
}

img#bestmates_banner{
    float: left;
    vertical-align: middle;
}

img#clearance{
    float: right;
    vertical-align: middle;
    margin-right: 20px;
}


div#thegear h2, div#searchresults h2{
    width: 760px;
}

div#category{
    width:780px;
}

div#category h2{
    width: 760px;
}

ul#products{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul#products li{
    width: 240px;
    margin: 10px 20px 10px 0;
    float: left;
    height: 290px;
    font-size: 12px;
}

ul#products h3{
    margin: 4px 0 3px 0;
    padding: 0;
    font-family: KippOT-NoOne, Helvetica, Arial, Sans-Serif;
    font-weight: normal;
    font-size: 18px;
}

div#product_sidebar{
    width: 240px;
    float: left;
}

div#product_sidebar li{
    margin-right: 0 !important;
}

/* product */


div#product{
    width: 500px;
    float: left;
    margin-right: 20px;
}

div#product h3{
    font-size: 22px;
    font-family: KippOT-NoOne, Helvetica, Arial, Sans-Serif;
    font-weight: normal;
    margin: 5px 0 0 0;
}

div#product h3 span{
    font-size: 20px;
    padding-left: 10px;
}

div#description{
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    padding: 0 10px;
    font-size: 12px;
}

div#product_container{
    float: left;
    width: 300px;
}

ul#symbols{
    margin: 10px 0 0 0;
    padding: 0;
    list-style-type: none;
}

ul#symbols li{
    margin: 0 10px 0 0;
    display: inline;
}

ul#symbols li img{
    width: 32px;
    height: 32px;
}

table#product_list{
    width: 100%;
    border-spacing: 0px;
    float: left;
    margin-top: 10px;
}

table#product_list thead{
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-transform: capitalize;
}

table#product_list thead th{
    padding: 2px 5px 5px 5px;
    height: 25px;
    vertical-align: bottom;
    border-bottom: 1px solid #444444;
}

table#product_list tr{
    border-bottom: 1px solid red;
    height: 15px;
}

table#product_list td{
    padding: 5px 5px;
    font-size: 12px;
}

table#product_list td.line_reserve{
    text-align: center;
}

table#product_list th.line_reserve{
    text-align: center;
    width: 60px;
}


table#product_list td.line_reserve input{
    border: 0px;
}

table#product_list td.line_description{
    font-weight: bold;    
}


div.prod_img{
    position: relative;
}

div.thumbnail{
    float: left;
    margin-left: 20px;
}

a.hidden{
    display: none;
}

div.photo_title{
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent url('/images/opacity70.png');
    padding: 5px;
    width: 170px;
    z-index: 2;
}

div.photo_title span{
    font-weight: bold;
}

a.lightbox{
    text-decoration: none;
    color: #FFFFFF;
}

div.prod_img img.best_mates{
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

a.lightbox div.prod_img img.best_mates{
    bottom: 30px;
}

/* pagination */
div.paging{
    background: black;
    padding: 10px;
    height: 18px;
    vertical-align: middle;
    margin-top: 20px;
    margin-right: 20px;
    color: white;
    font-size: 14px;
    font-weight: bold;    
}

div.list_results{
    float: left;
    vertical-align: middle;

}

ul.list_pagination{
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: middle;
    float: right;
}

ul.list_pagination li{
    vertical-align: middle;
    float: left;
    margin-left: 7px;
}

ul.list_pagination a{
    color: #DC0036;
    text-decoration: none;
}

div#news div.paging{
    margin-right: 0px;
}

/** location **/
div#map_container{
    width: 500px;
    height: 500px;
    margin-top: 10px;
}

div#map{
    width:500px;
    height: 600px;
    float: left;
    margin-right: 20px;
}

div#map_search{
    width:200px;
    float: left;
}

div.small{
    width: 340px !important;
    height: 340px !important;
    float: left;
    margin-top: 20px;
}

div#depot_details{
    float: left;
    margin-left: 20px;
    width: 400px;
    font-size: 13px;
}

div#depot_details h3{
    margin-top: 5px;
}

div#depot_details ul{
    list-style-type: none;
    margin: 0 0 10px 0;
    padding: 0;
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    padding: 10px;
    color: #444444;
}

div#depot_details ul.addr li{
    height: 20px;
}

div#depot_details ul li span{
    float: left;
    width: 140px;
    font-weight: bold;
}

div#depot_details h3{
    color: #003F2B;
    margin-bottom: 2px;
}

div#map_search{
    font-size: 16px;
    width: 240px;
}

div#map_search input{
    padding: 4px;
    width: 230px;
    font-size: 13px;
    border: 1px solid #000000;
}

ul#map_results{
    margin: 10px 0 0 0;
    padding: 0 10px 10px 10px;
    list-style-type: none;
    background: #EEEEEE;
    border: 1px solid #DDDDDD;

}

ul#map_results li{
    padding: 10px 0;
    color: #444444;
    border-bottom: 1px solid #DDDDDD;
}

ul#map_results a{
    color: #DC0036;
    text-decoration: none;
}

ul#map_results a:hover{
    color: #333333;
}


ul#map_results h3{
    margin: 2px 0;
    background-repeat: no-repeat;
    padding: 4px 0px 12px 28px;
}

span.map_error{
    background: #FFE8E5;
    border: 1px solid #FF0033;
    padding: 10px;
    font-weight: bold;
    color: #FF0033;
    display: block;
    margin-bottom: 10px;
}

/** ts and cs **/


div#tandcs li{
    margin: 3px 10px 3px 0px;
}

ol{
    margin: 5px 0px 5px 10px;
    padding-left: 20px;

}

ol ol{
    margin-left: 10px;
}

ol.start{
    padding: 10px;
    margin: 10px 20px;
    font-size: 13px;
    color: #444444;
}

h3.section{
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 20px;
    color: #DC0036;
    font-weight: normal;
    margin-top: 10px;
}


/* checkout */
fieldset{
    border: 0;
    padding: 0;
    margin: 0;
}

div#checkout{
    width: 500px;
    float: left;
    margin-right: 20px;
    color: #444444;
}

div#checkout_info{
    float: left;
    width: 240px;
}

div#checkout h3, div#checkout_complete h3 div#contact_form h3{
    color: #DC0036;
    font-size: 18px;
    margin-top: 7px;
    margin-bottom: 2px;
}

div#checkout ul, div#checkout_complete ul, div#contact_form ul{
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    padding: 0 10px 10px 10px;
    margin: 10px 0;
    list-style-type: none;
}

div#checkout ul li, div#checkout_complete ul li, div#contact_form ul li{
    padding: 10px 0;
    border-bottom: 1px solid #DDDDDD;
    position: relative;
}

div#checkout ul li span, div#checkout_complete ul li span, div#contact_form ul li span{
    float: left;
    display: block;
    font-weight: bold;
    font-size: 14px;
    vertical-align: middle;
    overflow: hidden;
    width: 140px;
}

div#checkout ul li span.code{
    width: 80px;
}

div#checkout ul li span.name{
    width: 230px;
    font-weight: normal;
}

div#checkout_complete ul li span.name{
    width: 300px;
    font-weight: normal;
}

div#checkout ul li span.quantity{
    text-align: right;
    width: 50px;
}

div#checkout ul li span.price{
    text-align: right;
    width: 80px;
}

div#checkout ul li span.remove{
    width: 30px;
    text-align: right;
}

div#checkout ul li span.remove img{
    vertical-align: middle;
}

ul.form li label{
    font-size: 14px;
    float: left;
    display: block;
    width: 200px;
    font-weight: bold;
}

ul.form li label.error{
    color: #DC0036;
    font-weight: normal;
    font-size: 12px;
    position: absolute;
    bottom: 4px;
    left: 0;
}

ul.form li label span.required{
    color: #DC0036;
    float: none !important;
    vertical-align: top !important;
    margin-left: 5px;
    display: inline !important;
}

ul.form li input.text{
    padding: 4px;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    width: 250px;
    font-family: Helvetica, Arial, Sans-Serif;
}

ul.form li textarea{
    width: 250px;
    height: 80px;
    padding: 4px;
    border: #DDDDDD;
}

fieldset#delivery_address{
    display: none;
}

input.noborder{
    border: 0;
}


/* contact */
div#contact_form{
    width: 500px;
    float: left;
    margin-right: 20px;
}

div#contact_info{
    width: 240px;
    float: left;
}

div#contact_info ul{
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    padding: 0 10px 10px 10px;
    list-style-type: none;
    margin-top: 10px;
    color: #444444;
}

div#contact_info ul li{
    padding: 5px 0;
}

div#contact_info ul li span{
    width: 60px;
    font-weight: bold;
    float: left;
}

/* h & c */
div#hands{
    width: 500px;
    float: left;
    margin-right: 20px;
    color: #444444;
    font-size: 13px;
}

div#credentials{
    width: 240px;
    float: left;
}

div#credentials img{
    padding-top: 10px;
}

div#credentials ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* partners */
ul#partners{
    margin: 20px 0 0 0;
    padding: 0;
    list-style-type: none;
}

ul#partners li{
    float: left;
    width: 144px;
    margin:0 10px 10px 0px;
    height: 100px;
    padding: 0;   
}

ul#partners li.last{
    margin-right: 0;
}

div#reporting{
    font-size: 14px;
}

div#reporting_login{
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
    padding: 10px;    
    width: 450px;
    margin: 20px auto;
    text-align: center;
}

div#reporting_login hr{
    border-top-style: solid;
    border-top-color: #DDDDDD;
}


/* training */
div#training{
    width: 500px;
    float: left;
    margin-right: 20px;
    font-size: 14px;
}

div#upcoming_training{
    width: 240px;
    float: left;
}

div#upcoming_training ul{
    padding: 0 10px 10px 10px;
    margin: 10px 0 0 0;
    list-style-type: none;
    background: #EEEEEE;
    border: 1px solid #DDDDDD;
}

div#upcoming_training ul li{
    border-bottom: 1px solid #DDDDDD;
    padding: 7px 0;
}

div#upcoming_training ul li h3{
    margin-top: 3px;
}

/** css hacks **/
.clearfix:after{content: ".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display:block;}