/*
    Document   : screen
    Created on : Jun 4, 2010, 10:23:24 AM
    Author     : jefflowder
    Description:
        Purpose of the stylesheet follows.
*/
@font-face {
	font-family: 'MyriadProCond';
	src: url('myriadpro-cond-webfont.eot');
	src: local('☺'), url('myriadpro-cond-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadProBold';
	src: url('myriadpro-bold-webfont.eot');
	src: local('☺'), url('myriadpro-bold-webfont.woff') format('woff'), url('myriadpro-bold-webfont.ttf') format('truetype'), url('myriadpro-bold-webfont.svg#webfontFKHQpcmX') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
    font:14px/140% 'MyriadProCond', arial, helvetica, sans-serif;
/*    color: #000;*/
    color:#fff;
    text-align:center;
    padding-bottom: 20px;
/*	background: #000 url(../images/bg_body.jpg) no-repeat 0 0;*/
    padding-top: 8px;
	background-color: #000 !important;
/*    padding-top: 0px;*/
}

/* clearfix */
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}

.hide { height: 0; width: 0; overflow: hidden; position: absolute; display: none; }

a { color:#f60; text-decoration:none; }
a:hover { text-decoration:underline; }
:focus { outline: 0; }
/**
 * Layouts
 */
#wrapper {
    width: 994px;
    margin: 0px auto;
    position: relative;
    text-align: left;
/*    padding: 0 2px;
    background-color: #fff;*/
    padding: 0;
    background-color: #000;
}
#header {
    height: 75px;
    position: relative;
}
#top_menu {
    position: absolute;
    bottom: 5px;
    right: 20px;
    text-transform: uppercase;
/*    color: #000;*/
    color: #f09;
    font: normal 11px/100% 'MyriadProBold', arial, helvetica, sans-serif;
}
#top_menu a {
/*    color: #000;*/
    color: #f09;
    margin: 0 3px;
}
#top_menu a.current {
/*    color: #999;*/
    color: #f60;
    text-decoration: underline;
}
#logo {
    position: absolute;
	top: 33px;
	left: 9px;
    height: 33px;
    width: 110px;
    margin: 0;
/*    background: url(../images/harts-logo.png) no-repeat 0 0;*/
    background: url(../images/black_bg/logo.jpg) no-repeat 0 0;
}
#logo span { position: absolute; left: -2000px; }
#search_mini_form {
    position: absolute;
    right: 20px;
    top: 13px;
    padding: 0; margin: 0;
    width: 134px;
    height: 22px;
}
#search_mini_form .form-search {
    position: relative;
    background: url(../images/bg_search.gif) no-repeat 0 0;
    padding: 1px;
}
#search_mini_form .form-search #search {
    line-height: 12px;
    height: 12px;
    border: 1px solid #fff;
    width: 103px;
    padding: 3px;
    font-size: 11px;
    color: #777;
}
#search_mini_form #btn_search {
    position: absolute;
    top: 1px;
    right: 1px;
    border: none;
    margin: 0; padding: 0;
    outline: none;
}
.two_col_left_nav {
/*    background: transparent url(../images/bg_content.gif) repeat-y 0 0;*/
    background: transparent url(../images/black_bg/bg_content.gif) repeat-y 0 0;
}
.content-grey-bar {
/*    background: #fff url(../images/bg_content_wrapper_grey_bar.gif) no-repeat 0 0;*/
    background: #fff url(../images/black_bg/bg_content_wrapper_grey_bar.gif) no-repeat 0 0;
    padding: 0 17px;
}
.content {
/*    background: #fff url(../images/bg_content_wrapper.gif) no-repeat 0 0;*/
    background: #fff url(../images/black_bg/bg_content_wrapper.gif) repeat-y 0 0;
    padding: 0 17px;
}
div.one_col, div.two_col_promo_right {
    padding: 12px 0 0;
}
div.two_col_promo_right .right {
    float: right;
    width: 236px;
}
div.two_col_left_nav, div.content-container {
    padding: 22px 10px 10px;
}
div.two_col_left_nav .left {
    float: left;
    width: 230px;
}
div.two_col_left_nav .right {
    float: right;
    width: 710px;
}
div.two_col_left_nav h1, div.content-container h1 {
    font: normal 24px/40px 'MyriadProCond', arial, helvetica, sans-serif;
    color: #000;
    margin: 0 0 5px; padding: 0;
    text-transform: uppercase;
}
#footer {
	height: 46px;
    margin: 0;
/*    padding: 0 17px 8px;*/
/*    background: #fff url(../images/bg_footer.png) no-repeat 0 0;*/
    padding: 0 17px;
    background: #fff url(../images/black_bg/bg_footer.png) repeat-y 0 0;
}
#footer p {
    text-transform: uppercase;
    color: #f60;
/*    font: normal 14px/46px 'MyriadProCond', arial, helvetica, sans-serif;*/
    font: normal 11px/46px 'MyriadProBold', arial, helvetica, sans-serif;
}
#footer p a {
    color: #f60;
    text-decoration: none;
}
#footer p a:hover, #footer p a.current {
    text-decoration: underline;
}
#footer p a, #footer p span {
    margin: 0 5px;
}
#footer .right {
    float: right;
}
#footer p.right, #footer p.right a {
    color: #f09;
}
#footer .left {
    float: left;
}

.nomargin {
    margin: 0 !important;
}

ul.promo-tiles {
    margin: 11px 0 0 0;
    padding: 0;
}
ul.promo-tiles li {
    float: left;
    margin: 0; padding: 0;
    height: 151px;
/*    border: 1px solid #e2e0e0;*/
    border: 1px solid #000;
}
ul.promo-tiles li img {
    float: left;
}
ul.promo-tiles li.middle {
    border-top: none;
    border-bottom: none;
}

ul#menu {
    margin: 5px 0 0 0; padding: 0;
}
ul#menu li {
    font: normal 18px/140% 'MyriadProCond', arial, helvetica, sans-serif;
}
ul#menu ul {
    margin-bottom: 10px;
}
ul#menu li ul li {
    font: normal 14px/140% 'MyriadProCond', arial, helvetica, sans-serif;
    margin-left: 20px;
}
ul#menu li a {
/*    color: #000;*/
    color: #f60;
}
ul#menu li ul li.active a {
/*    color: #999;*/
    color: #f09;
    text-decoration: underline;
}

ul.grid {
    margin: 0; padding: 0;
}
ul.grid li {
    float: left;
    padding: 4px;
/*    border: 1px solid #ccc;*/
    border: 1px solid #000;
    margin-right: 3px;
    text-align: center;
    margin-bottom: 4px;
}
ul.grid li.last {
    margin-right: 0;
}
ul.grid li span {
    display: block;
    line-height: 32px;
    margin-top: 8px;
}
ul.grid li a {
    font: normal 18px/18px 'MyriadProCond', arial, helvetica, sans-serif;
/*    color: #000;*/
    color: #f09;
    text-transform: uppercase;
}
ul.grid li a:hover span {
    text-decoration: underline;
}
ul.productlist li span {
    display: block;
    line-height: 20px;
    margin-top: 5px;
}
ul.productlist li a {
	font: normal 13px/14px 'MyriadProCond', arial, helvetica, sans-serif;
	/*    color: #000;*/
    color: #f09;
	text-transform: uppercase;
}
ul.productlist li span strong {
    font-weight: bold;
}
div.detail-image p {
    margin-bottom: 10px;
}
div.details {
    float: right;
    width: 354px;
}
h2 {
    font: normal 18px/24px 'MyriadProCond', arial, helvetica, sans-serif;
    text-transform: uppercase;
}
div.details p {
    margin-bottom: 15px;
}
div.details p.breadcrumbs {
    border-bottom: 1px solid #ccc;
    color: #999;
}
div.details p.breadcrumbs a {
    color: #999;
}
p.btn-enlarge a {
    background: url("../images/icn_magnify.gif") no-repeat scroll 0 0 #FFFFFF;
    color: #747474;
    float: left;
    font: bold 10px/24px tahoma,arial,helvetica,sans-serif;
    height: 24px;
    padding-left: 25px;
}
p.btn-enlarge {
    margin-bottom: 30px;
}
.page-title {
    border: none;
    margin: 0;
}

#promos {
    height: 480px;
}

.product-view .product-img-box {
    float: left;
    width: 345px;
}
.product-view .product-img-box .product-image-zoom {
    height: 412px;
    overflow:hidden;
    position:relative;
    width: 345px;
    z-index:9;
}
.product-view .product-img-box .zoom {
    background: url("../images/slider_bg.gif") no-repeat scroll 50% 50% transparent;
}

.product-view {
    border: none;
}
.product-essential {
    padding: 0;
    background-image: none;
    background-image: none;
    background-color: #000;
}

.col1, .col2, .col3 {
    float: left;
    margin-right: 8px;
}
.col1 {
    width: 320px;
    margin-right: 15px;
}
.col2 {
    width: 298px;
}
.col3 {
    width: 299px;
    margin-right: 0;
}

.content-container .std p {
    margin-bottom: 15px;
}
.content-container .std ul li {
    list-style: disc;
    margin-left: 20px;
}
.content-container .std h2,
.content-container .std dt {
    font-size: 15px;
    color: #f60;
    text-transform: uppercase;
}
.content-container .std h3 {
    color: #f09;
}

form div.clearfix {
    margin-bottom: 5px;
}
form div.label-left label {
    float: left;
    width: 110px;
/*    text-align: right;
    padding-right: 5px;*/
}

table.left-labels {
    border-collapse: collapse;
    width: 100%;
}
table.left-labels th, table.left-labels td {
    border: 1px solid #efefef;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}
table.left-labels th {
    background-color: #ccc;
    color: #333;
    text-align: right;
    width: 100px;
}

.breadcrumbs ul {
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}
.breadcrumbs li,
.breadcrumbs a {
    color: #fff !important;
    text-transform: uppercase;
}
.product-view h1 {
    color: #f60 !important;
}

.price-box {
    display:inline;
}
ul.productlist li span.regular-price,
ul.productlist li span.price {
    display: inline;
}
ul.productlist li span.price {
    color: #f09;
}
.product-view .product-shop .product-name h1 {
    font: bold 15px/1.35 Arial,Helvetica,sans-serif;
    margin: 0 !important;
    padding: 0 !important;
}

.product-view .product-shop .availability {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.product-shop .price-box span.price,
.product-shop p.attributes {
    color: #f09 !important;
    font-size: 16px;
    text-transform: uppercase;
}

button.button span,
#btn_show_colours strong {
    background:none repeat scroll 0 0 #F09;
    border:1px solid #f09;
    color:#FFF;
}
#btn_show_colours strong {
    padding: 3px 5px;
}

textarea#comment {
    width: 250px;
}

#contactForm {
    border-top: 1px dotted #fff;
    padding-top: 10px;
}