/* tools */
.replace { position:relative; margin: 0; padding: 0; overflow: hidden; }
.replace span { display: block; float: left; position: absolute; top: 0; left: 0; z-index: 100; }
.replace a { cursor: pointer; }
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clear fix */
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;} /* Hides from IE-mac \*/
.clearfix {display: block;}


/* global */
body { font-size: 76%; background: #1f1d1d; font-family: arial, sans-serif; margin: 0; color: #dedede; }
a img { border: none; }


/* container */

div.bg { display: inline; float: left; width: 100%; background: #2A2627 url(../gfx/page_bg.gif) repeat-x top; margin: 0; padding: 0; }
div.container { width: 998px; margin: 0 auto; padding: 0; clear: both; z-index: 0;  }


/* --------- LAYOUT --------- */

/* header */
div#header { display: inline; float: left; width: 100%; height: 140px; margin: 0; padding: 0; clear: both; }
div#header h1 { position: absolute; top: 0; text-indent: -9000px; height: 0; margin: 0; padding: 0; }

div#logo { display: inline; float: left; width: 252px; height: 120px; background: #292626 url(../gfx/logo.gif) no-repeat top center; }

/* search */
div#search { display: inline; float: left; width: 746px; height: 120px; background: #292626 url(../gfx/search.jpg) no-repeat top center;  margin: 0; padding: 0; }

/* side navigation */
div#navigation { display: inline; float: left; background: url(../gfx/navigation.jpg) no-repeat top center; width: 205px; height: auto !important; height: 380px; min-height: 380px; }

/* content div */
div#content { display: inline; float: left; width: 793px; height: auto !important; height: 380px; min-height: 380px; padding: 0 0 20px; }

/* footer */
div#footer { float: left; background: #292626 url(../gfx/footer_bg.jpg) no-repeat center bottom; width: 100%; height: 229px; margin: 0; padding: 30px 0 0px; clear: both;  }
div#footer h3, div#footer h4 { color: #AFB7BC; }
div#footer strong { color: #171717; }
div#footer p { color: #AFB7BC; font-size: 1em; }
div#footer small { color: #CDD2D5; }
div#footer a { color: #7b5524; text-decoration: underline; }
div#footer .col1 { padding: 20px 0 0; }
div#footer .col2 { text-align: right; }



/* --------- DEFAULT TEMPLATE --------- */

/* content styles */
div.content h1 { font-size: 2em; font-weight: normal; color: #fff; margin: 0 0 20px; }
div.content h2 { font-size: 1.6em; font-weight: normal; color: #ad966b; margin: 0 0 20px; }
div.content h2 small { font-size: 0.6em; }
div.content h3 { font-size: 1.4em; font-weight: normal; color: #ad966b; margin: 0 0 20px; }
div.content h4 { font-size: 1.2em; font-weight: normal; color: #ad966b; margin: 0 0 20px; }
div.content p { font-size: 1em; margin: 0 0 20px; line-height: 1.5em; }
div.content ul { padding: 0 0 0 16px; list-style-position: outside; }
div.content a { color: #e4c58d; text-decoration: none;}
div.content a:hover {  color: #fff; }
div.content blockquote { color: #888; font-size: 1em; line-height: 1.8em; margin: 0 0 20px; padding: 10px 0 10px 40px; border-left: 3px solid #7b5524; }
div.content li { padding: 0 0 8px 20px; }
div.content span.highlight { color: #e4c58d; }
div.content small { color: #949393; }

/* forms */
form.default { margin: 0 0 20px; }
form.default label, form.default input, form.default textarea, form.default select { float: left; font-family: "Lucida Grande", arial, sans-serif; font-size: 1em; }
form.default input, form.default textareal, form.default select, .formelement { margin: 0 0 6px; }
form.default label { width: 110px; margin: 0 10px 6px 0; padding: 4px 0 0; font-weight: bold; }
form.default .formelement { width: 180px; background: #f4f4f4; color: #555; border: 1px solid #ccc; padding: 7px; }
form.default select.formelement { padding-right: 1px !important; }
form.default .button { margin: 0 4px 0 0; font-size: 1.1em; }
form.default .nolabel { margin: 0 0 0 120px; }

/* errors */
div.error { background: #FFDFDF; padding: 20px 10px 0; border: 1px solid #BF0000; margin: 0 0 20px 0; color: #444; font-weight: bold; clear: both; }
div.error h2 { color: #BF0000 !important; margin: 10px 0 !important; }
div.message { background: #f4f4f4; border: 1px solid #ccc; padding: 20px 10px; margin: 0 0 20px 0; font-weight: bold; clear: both; }
div.hidden { display: none; background: #e1f7ff; padding: 20px; border: 1px solid #29c1fe; margin: 0 0 20px 0; }
div.hide { display: none; }

/* pics */
img.pic { margin: 0 0 20px 0; }
img.pic.left { margin-right: 20px; }
img.pic.right { margin-left: 20px; }

/* boxes */
div.box { display: inline; float: left; background: #f9f9f9; border: 1px solid #eee; padding: 20px; margin: 0 0 20px; }

div.scroll { height: 300px; padding: 10px; border: 1px solid #ccc; background: #fff; overflow: auto; margin: 0 0 20px; }

/* tables */
table.default { width: 100%; }

/* columns */
div.col1 { display: inline; float: left; width: 680px; margin: 0 80px 0 0; padding: 0; }
div.col2 { display: inline; float: left; width: 218px; padding: 0; }
div.col3 { display: inline; float: left; width: 100px; padding: 0; }
div.col4 { display: inline; float: left; width: 100px; padding: 0; }
div.col5 { display: inline; float: left; width: 100px; padding: 0; }

/* buttons */
p.buttons { padding: 8px 0; }
.button { background: #917231; border: 2px solid #7b5524; color: #fff !important; text-decoration: none; vertical-align: middle; margin: 0 4px 6px 0; }
a.button { padding: 7px 15px; }
input.button { padding: 6px 15px; }

.button.grey { background: #bbb; border: 2px solid #999; }
.button.blue { background: #70b9ce; border: 2px solid #63a8bc; }


/* ---------  SHOP SPECIFIC --------- */

div#products-header { float: left; width: 753px; padding: 20px; margin: 0 0 1px 0; background: #121010; clear: both; }
div#products-header h2 { float: left; margin: 0 5px 0 0; padding: 0; color: #ad966b; font-size: 1.2em; }
div#products-header h2 span { color: #fff; font-size: 1em; }
div#products-header p { float: left; margin: 0; padding: 0; color: #898888; }
div#products-header p#open-filters { float: right; }
div#products-header a#show-filters { padding: 0 20px 0 0; background: url(../gfx/filter.gif) no-repeat right; }

div#filters { display: none; float: left; width: 753px; padding: 15px 20px; margin: 0 0 1px 0; background: #1c1a1a; clear: both; }
div#filters p { margin: 0; padding: 0; color: #898888; }

div.paging { float: left; width: 753px; height: 75px; padding: 20px 20px 0; margin: 0; background: url(../gfx/paging_bg.png) no-repeat top right; text-align: right; clear: both; }
div.paging a { color: #898888; margin: 0 0 0 4px; padding: 0; vertical-align: middle; }
div.paging img { vertical-align: middle; }

ul#products { display: inline; float: left; width: 100%; list-style-type: none; margin: 0; padding: 0; clear: both; }
ul#products li { float: left; width: 198px; height: 375px; margin: 0 0 30px; padding: 0; background: url(../gfx/product_bg.jpg) no-repeat top center; }
ul#products li.over { background: url(../gfx/product_bg_on.jpg) no-repeat top center; }
ul#products .product-pic { float: left; height: 300px; width: 100%; margin: 0 0 20px; clear: both; text-align: center; }
ul#products .product-pic.short { float: left; height: 200px; width: 100%; margin: 0 0 20px; clear: both; text-align: center; }
ul#products .product-text { float: left; width: 158px; margin: 0; padding: 0 0 0 30px; clear: both; }
ul#products .quickbuy { padding: 4px 0 0; }
ul#products span.price { color: #e4c58e; }
ul#products .price.big { font-size: 1.2em; }
ul#products span.title { color: #dedede; }

div#category-header { float: left; width: 743px; height: 440px; padding: 30px 0 0 50px; margin: 0 0 10px; background: url(../gfx/category_header.jpg); }
div#category-header p { width: 210px; padding: 0 0 0 28px; }

img.thumbs { float: left; margin: 0 30px 0 0; }
p.magnify { float: left; padding: 0 0 0 30px; background: url(../gfx/magnify.gif) no-repeat; }

div#howtowear { width: 100%; margin: 20px 0 0; clear: both; }
div#howtowear .col1 { width: 330px; margin: 0 60px 0 0; padding: 0; }
div#howtowear .col2 { width: 403px; padding: 0; }

div#goeswellwith { float: left; width: 793px; list-style-type: none; margin: 30px 0 10px; padding: 0; clear: both; }
div#goeswellwith h2 { display: inline; float: left; width: 125px; margin: 0 20px 0 0; }
ul#products.small { width: 390px; margin: 0 20px 0 0; clear: none; }
ul#products.small li { float: left; width: 130px; height: 60px; margin: 0 0 30px; padding: 0; }
ul#products.small .product-pic { float: left; height: 50px; width: 100%; margin: 0 0 20px; clear: both; text-align: center; }
ul#products.small .product-text { float: left; width: 130px; margin: 0; padding: 0; clear: both; text-align: center; }


/* --------- PRESS --------- */

div#press { }
div#press .col1 { width: 483px; margin: 0 60px 0 0; padding: 0; }
div#press .col2 { width: 250px; padding: 0; }




/* --------- SIZE GUIDE --------- */

div#size-guide { float: left; width: 715px; padding: 10px 10px 0 10px; clear: both; }
div#size-guide .col1 { width: 262px; margin: 0 60px 0 0; padding: 0; }
div#size-guide .col2 { width: 393px; padding: 0; }

div#size-guide table { width: 100%; border-collapse: collapse; margin: 30px 0 0; }
div#size-guide table th { color: #ad966b; border-bottom: 2px solid #ad966b; }
div#size-guide table td.desc { width: 50px; color: #b79e71; font-weight: bold; text-align: right; }
div#size-guide table td { height: 40px; background: #212020; border-bottom: 1px solid #302c26; text-align: center; }


/* --------- SEARCH RESULTS --------- */

div#search-results { width: 100%; margin: 30px 0 0; color: #ad966b; border-top: 2px solid #ad966b; border-bottom: 2px solid #ad966b; }
div#search-results h3 { padding: 20px 10px 0 10px; margin: 0; background: #212020; color: #ad966b; }
div#search-results a { color: #ad966b; }
div#search-results p { padding: 10px 10px 20px 10px; margin: 0; color: #949393; background: #212020; border-bottom: 1px solid #302c26; }
div#search-results span.highlight { color: #fff; }

div#notsure { padding: 20px; background: #212020; border-bottom: 2px solid #ad966b; border-top: 2px solid #ad966b; }
div#notsure p { margin: 0 0 10px; }

