@charset "utf-8";
/* CSS Document */

/*********************************
Eric Meyer's CSS reset
*********************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 95%; font-family: inherit; vertical-align: baseline;}
/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1; color: black; background: #dddddd url(../images/page_bg_v2.jpg) repeat top left;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/*****************************
End CSS reset
****************************/
* {font-family: Arial, Helvetica, sans-serif;}

/***************************
General tag definitions
**************************/
h1 {color: #f30083; font-size: 1.2em; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0.5em; font-weight: bold;}
h2 {color: #874223; font-size: 1.3em; font-family: Arial, Helvetica, sans-serif; margin: 0 0 0.5em 1em; font-weight: normal;}
h3 {color: #505050; font-size: 1.4em; line-height: 1.35em; font-family: Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
h4 {width: 100%; background-color: #bcbcbc; padding: 2px; color: #505050; font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; margin-bottom: 8px;}
h5 {font-weight: bold; font-size: 2em; color: #f30083; margin-bottom: 12px;}
p {color: #505050; font-size: 1.0em; line-height: 1.35em; font-family: Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
a {color: #505050; font-size: 1.0em; font-family: Verdana, Arial, Helvetica, sans-serif;}
th {font: 1.5em Arial, Helvetica, sans-serif; color: #424242;}


/*************************
IDs
*************************/
#wrapper {width: 1014px; height: 758px; margin: auto; overflow: hidden; padding: 5px 0; position: relative; }


/************************
Header
************************/
#header {height: 100px;}
img#logo {margin: 25px 15px; width: 300px; float: left;}
#header-right {width: 250px; float: right;}
#ecocreeper-dot-com {width: 450px; height: 40px; position: absolute; right: 270px; top: 70px;}
#ecocreeper-dot-com img {margin-left: 150px; display: none;}
#ecocreeper-dot-com p {font: italic bold 13px Arial, Helvetica, sans-serif; color: #f30083; text-align: right; margin-right: 12px;}
#main-menu {clear: both;  height: 28px; position: relative;}
#main-menu ul {list-style: none; width: 1000px; background: url(../images/top_menu_bg.jpg) top left repeat-x; padding: 7px;}
#main-menu li {display: inline; border-right: 2px solid #fff; padding: 3px 5px;  margin: 2px;}
#main-menu li a {color: #fff; text-transform: uppercase; text-decoration: none;  font-size: 0.9em; }
     /*******************/
#pages-menu {clear: both; height: 22px; background: url(../images/sub-menu-bg.png) top left repeat;}
#pages-menu ul {list-style: none; width: 1014px; background: url(../images/sub-menu-bg.png) top left repeat; margin-bottom: 6px; display: inline;}
#pages-menu li {display: inline-block; padding: 5px 10px;  border-right: 2px solid #b1bec8; float: left; }
#pages-menu li a {color: #fff; text-decoration: none;  font-size: 0.9em;}
	/*************** Search ************/
#search {position: absolute; top: 2px; right: 3px; width: 210px; height: 22px; background-color: #fff;}
form#searchForm {background-color: #fff; height: 22px; padding: 0; vertical-align:middle;}
#search input#search-button {width: 50px; background: #fff; color: #9f8c86; margin: 0; overflow:visible; border: none;}
#search input .search-box {width: 150px; height: 20px; border: none; margin: 0;}
	/************** Mini-cart ***********/
#mini-cart {position: absolute; top: 30px; right: 10px; width: 245px; height: 45px; background-color: #fff; border: 1px solid #9f8c86; background-color: #fff; padding: 5px;}
.mini-cart-price {width: 110px; float: left; margin: 15px 0 0 50px;}
#mini-cart ul#mini-cart-list {}
ul#mini-cart-list li span {font: normal 0.9em Arial, Helvetica, sans-serif; color: #9f8c86;}
.mini-cart-button {width: 65px; height: 12px; background-color: #9f8c86; float: right; clear: right; margin: 3px 0; text-align: center; padding: 2px;}
.mini-cart-button a {text-decoration: none; color: #fff; text-align: center;}

	/************* Top links ***********/
#top-links {width: 400px; float: left; margin: 40px 0 0 20px;}
#top-links ul#top-links-list {display:inline;}
#top-links ul#top-links-list li {display: inline; padding: 0 8px;}
#top-links ul#top-links-list li a {color: #fff; text-decoration: none; font-weight: bold;}

	/************* Misc ***************/
#sub-header {display: none;}

#main_body {position: relative;}

/**********************
Right-hand panel
**********************/
#news {/*width: 223px;*/width: 240px; height: 531px; float: right; background: url(../images/rhp_bg_v2.jpg) top left repeat-x; padding: 3px; position: relative;}
#news h2 {color: #fff; font-size: 0.95em; font-family: Arial, Helvetica, sans-serif; letter-spacing: normal; font-weight: bold; margin: 6px 0 0;}
#news p {color: #fff; font-size: 0.8em; margin: 0.3em; line-height: normal; font-weight: bold;}
#news a {color: #f30083; text-decoration: none;}
#news a:hover {text-decoration: underline;}
#association_logos {position: relative; /*top: 170px; left: 0px;*/ width: 250px; margin-top: 25px;}
#twitterGadget {width: 220px;}
#twitterGadget .twtr-tweet-text p {font-size: 10px;}

/*********************
Left menu (sub-menu)
*********************/
#left-menu {position: absolute; width: 140px; height: 450px; background: url(../images/side-menu-bg.png) top left repeat; z-index: 99;}
#left-menu ul {}
#left-menu li {display: block; padding: 8px 12px; border-bottom: 1px solid #7f9cbe;}
#left-menu li.active, #left-menu li:hover {background-color: #c2bec0;}
#left-menu li.active a, #left-menu li:hover a {color: #fff;}
#left-menu li a {color: #9f8c86; text-decoration: none; font-size: 1.1em;}

/********************
Main content panel
********************/
#main-content-home {margin-left: 0; padding: 0; width: 462px; height: 380px; z-index: 99; position: relative;}
#main-content-inner {margin-left: 140px; padding-left: 10px; width: 602px; height: 380px; z-index: 99; position: relative;}
#main-content {margin: 0 5px 0 145px; background-color: #fff; padding: 5px; width: 604px; height: 522px; z-index: 99; position: relative;}
#sect-bg-image, img.section-main {position: absolute; top: 0; z-index: 1;}

#info-page{margin: 0; padding: 5px; width: 744px; height: 518px; z-index: 99; position: relative; background: url(../images/info-pg-bg.png) top left repeat;}
#lyr1 {margin: 10px 35px 20px 100px; padding-bottom: 10px;}
#lyr1 ul {list-style: disc; margin-left: 30px;}
#lyr1 li {color: #505050; font: 1.5em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
#lyr1 h1 {color: #f30083; font:bold 2.3em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
#lyr1 h2 {color: #f30083; font: 1.7em/1.35em "Lucida Console", Monaco, monospace; margin-bottom: 1.5em;}
#lyr1 p {color: #505050; font: 1.5em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}

#lyr2 {margin: 10px 0px 20px 0px;  padding-bottom: 40px;}
#lyr2 ul {list-style: disc; margin-left: 0px;}
#lyr2 li {color: #505050; font: 1.5em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
#lyr2 h1 {color: #f30083; font: 2em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
#lyr2 h2 {color: #f30083; font: 1.7em/1.35em "Lucida Console", Monaco, monospace; margin-bottom: 1.5em;}
#lyr2 p {color: #505050; font: 1.5em/1.35em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}

	/*********** Section intro and home page product display ***********/
.product-display {width: 120px; float: left; padding: 5px; height: 250px; position: relative; border: 1px solid #333; margin: 0 15px 5px 0; background: url(../images/side-menu-bg.png) top left repeat;}
#static_showcase {position: absolute; z-index: 999; top: 220px; right: 0; width: 381px; height: 323px; display: none;}

	/*********** Product group page (sub-section overview) *************/
.product-single {width: 120px; float: left; background-color: #e4e3e4; padding: 5px 25px 5px 5px; height: 250px; position: relative;}
.product-single form {margin: 2px;}
.section-product-title {display: block; margin: 5px 0;}
.section-product-title a {font-family:Arial, Helvetica, sans-serif; color: #000; font-size: 12px; text-decoration: none;}
input.product-add {width: 75px; background-color: #fff; color: #9f8c86; font-size: 10px; border: 1px solid #9f8c86; text-align: center; margin: 5px 0;}
.price {font-family:Arial, Helvetica, sans-serif; color: #000; font-size: 12px; font-weight: bold;}
.price_label {display: none;}
.product-flag-container {position: absolute; z-index: 999; width: 35px; height: 35px; top: 5px; left: 5px;}
.flag-newproduct {background: url(/shopimages/banners/flag_new.png) top left no-repeat;width: 35px; height: 35px;}
.flag-topproduct {background: url(/shopimages/banners/flag_top.png) top left no-repeat;width: 35px; height: 35px;}
.flag-offer {background: url(/shopimages/banners/flag_offer.png) top left no-repeat;width: 35px; height: 35px;}

	/*********** Other pages ****************/
#main-content ul {list-style: outside disc; margin-left: 3em;}
#main-content li {margin: 0.6em 0; font: 1em/1.5em Arial, Helvetica, sans-serif; color: #505050;}
#main-content p {}
#main-content h2 {}
table.general-table {}


	/************ Product detail page *****************/
.main-image {float: left; width: 260px;}
.product-data-wrapper {width: 320px; float: right; margin: 0 5px 0 0;}
.product_code {float: right; width: 300px;}
.product_code p {font-size: 0.9em; text-align: right;}
.stock-table-div {display: none;}
.prod_logo_options {width: 300px;}
#qty-price-wrapper {clear: both; margin: 10px 0; height: 70px;}
.add-to-basket-group {width: 232px; float: right; clear: right; background-color: #b4aca4; height: 62px; padding: 4px;}
.product-price-group {float: left; clear: left; color: #874223; width: 100px;}
.product-price-group span.label {display: none;}
.product-price-group span.price {color: #874223; font-size: 1.5em;}
.price-savings-info span.sub-price {color: #fff; font-family: Arial, Helvetica, sans-serif;}
.price-savings-info div {color: #874223; font-size: 12px; float: left; clear: left; width: 100px; margin-top: 10px;}
.buy-button {float: right; width: 100px;}
.buy-button input.product-add {height: 25px; background: #b4aca4 url(../images/buy_button_bg.gif) repeat-x; color: #874223; padding: 3px; text-align: center; border: 1px solid #a9a19b;}
.product-description {clear: both; margin-top: 10px; border: 1px solid #b4aca4;}
.product-description h1 {background-color: #b4aca4; padding: 5px; color: #fff; text-transform: lowercase; font-size: 1.2em; font-weight: normal;}
.product-description p {margin: 0.5em 1.5em;}
#main-content  .product-description ul {list-style: disc; margin: 0 0 1.2em 4em;}
#main-content .product-description ul li {font: 1.6em/1em Arial, Helvetica, sans-serif; color: #797979; margin-bottom: 3px;color: #505050}
.product-extra-fields {border: 1px solid #b4aca4; padding: 6px;}
.select-quantity {width: 60px; padding: 8px; background-color: #b4aca4; float: left;  height: 54px;}
.select-quantity span.label {color: #fff; font: 1.1em Arial, Helvetica, sans-serif; margin-bottom: 3px;}
span.label {color: #fff; font: 1em Arial, Helvetica, sans-serif; margin-bottom: 3px;}
span.sub-label {color: #fff; font: 0.9em Arial, Helvetica, sans-serif; margin-bottom: 3px;}
span.price span {font-size: 16px;}
p#title_sizeselect {margin-top: 10px; font-weight: bold; font-size: 12px;}
a.wish-list {font-size: 11px;}

.product-extra-fields table {width: 300px;}

/*********************
Basket
*********************/
#cart-pages{margin: 0; padding: 5px; width: 740px; height: 522px; z-index: 99; position: relative; background: url(../images/info-pg-bg.png) top left repeat;}

input.button, a.button {height: 25px; background: #b4aca4 url(../images/buy_button_bg.gif) repeat-x; color: #874223; padding: 3px; text-align: center; border: 1px solid #a9a19b;}
a.button {margin: 8px 0; display: block; text-decoration: none; width: 180px; height: 20px;}
table.cart-table tbody th {border-top: 1px solid #b4aca4; border-bottom: 1px solid #b4aca4;}
table.cart-table td {padding: 3px 6px; font: 11px Arial, Helvetica, sans-serif; color: #797979;}
table.cart-table th {padding: 3px 10px; font: 12px Arial, Helvetica, sans-serif; color: #797979;}
table.cart-table th.total {font-weight: bold; font-size: 1.5em;}
table.cart-table th.ordertotal {font-size: 1.75em; color: #000; font-weight: bold;}

/*****************************************
* basket modifications *************************
*****************************************/
#title_colour{margin:0;}
#title_colour span{font-weight:bold; font-size:1em;}

#container_colour{}
#container_colour  {padding:0;}
#container_colour  ul {margin:0; padding:0;}
#container_colour  ul li {list-style:none; float:left; margin-right:5px;}
#container_colour  ul li a {border:1px solid #48413d; display:block; width:20px; height:20px; margin:1px 1px 1px 1px;}
#container_colour  ul li a:hover {border:2px solid #48413d; margin:0;}
#container_colour  ul li a img{display:block; width:20px; height:20px;}
#container_colour ul .selected a {border:2px solid #48413d; margin:0;}

#title_sizeselect{margin:0;}
#title_sizeselect span{font-weight:bold; font-size:1em;}

#container_sizeselect  {padding:0; width: 275px;}
#container_sizeselect  ul {margin:0; padding:0;}
#container_sizeselect  ul li {list-style:none; float:left; margin-right:5px;}
#container_sizeselect  ul li a {border:1px solid #4d4440; 
							background-color:#dad7d8; 
							color:#4d4440; 
							display:block; 
							min-width:20px; 
							height:16px; 
							margin:1px 1px 1px 1px;
							font-weight:bold; 
							font-size:12px;
							text-align:center;
							padding:3px;
							text-decoration:none;}
#container_sizeselect  ul li a:hover {border:2px solid #48413d; margin:0; background-color: #799c22; color: #fff;}
#container_sizeselect ul .selected a {border:2px solid #48413d; margin:0; background-color: #799c22; color: #fff;}
.black{background-color:#000;}
.ivory{background-color:#C3A358;}
.taupe{background-color:#805930;}
.mocha{background-color:#9D7236;}
.teal{background-color:#007F7E;}
.burgundy{background-color:#580121;}
.purple {background-color:#4d3952;}
.grass-green, .grass_green {background-color:#579e4e;}
.khaki {background-color:#8b7951;}
.marl_grey {background-color:#d5d1c8;}
/********************
Account and checkout
********************/
#checkout-pages {margin: 0; padding: 5px; width: 740px; height: 522px; z-index: 99; position: relative; background: url(../images/side-menu-bg.png) top left repeat;}

#log-in {width: 395px; border: 1px solid #b4aca4; padding-bottom: 2em;}
#log-in h2 {background-color: #b4aca4; padding: 5px; color: #fff; font-size: 1.2em; font-weight: normal; margin: 0 0 12px 0;}
#log-in a {margin: 1.5em; display: block;}
#log-in-form {width: 395px; margin: 1.5em;}
#log-in-form label {color: #797979; font: 1.2em Arial, Helvetica, sans-serif; margin-bottom: 1.5em;}
#log-in-form input {width: 175px; background-color: #b4aca4; border: 1px solid #a9a19b; font-size: 1.1em; padding: 2px; color: #fff;}
#log-in-form input:focus {background-color: #fff; color: #874223;}
#log-in-form input.button {height: 25px; background: #b4aca4 url(../images/buy_button_bg.gif) repeat-x; color: #874223; padding: 3px; text-align: center; border: 1px solid #a9a19b; width: 4em; margin: 1.5em 0; clear: left;}
.cart-div {margin: 5px 0 15px;}
.checkout {}
.checkout th, #checkout-pages th {font: 1.5em Arial, Helvetica, sans-serif; color: #424242;}
.checkout h1 {}
.checkout h2 {}
table.form-table td, table.general-table td {padding: 5px; font-size: 11px;}
table.general-table td {padding: 5px 15px 0 0;}
table.general-table {margin-bottom: 12px;}
table.form-table td.submit-row {margin-bottom: 15px;}
.error-text {color: #F00; font: 1.2em bold Arial, Helvetica, sans-serif;}
#checkout-pages form {margin-bottom: 20px;}
.float-right {float: right;}
.general-table-div form {margin-bottom: 12px;}
.general-table-div a {font-size: 12px; line-height: 1.5em;}
#account-summary-right a {font-size: 12px; line-height: 1.5em;}

/*******************
Send to friend
*******************/
#send-to-friend {margin: 10px;}
#send-to-friend form {width: 450px;}
#send-to-friend label {float: left; clear: left; margin: 12px 0; font-family: Arial, Helvetica, sans-serif;}
#send-to-friend input, #send-to-friend textarea {float: right; clear: right; margin: 6px 0;}
#send-to-friend span.error-message {font: 1.1em Arial, Helvetica, sans-serif; color: #F00; position: absolute; top: 30px; left: 10px; padding: 10px; background-color: #fff; border: 1px solid red;}

/**********************
Newsletter
**********************/
form#newsletterJoin label {font: 1.5em Arial, Helvetica, sans-serif; color: #424242;}
form#newsletterJoin input {float: left; clear: left; margin: 10px;}

/********************
Afilliate pages
********************/
#affiliate-page {margin: 0; padding: 5px; width: 740px; height: 522px; z-index: 99; position: relative; background: url(../images/info-pg-bg.png) top left repeat;}
#affiliate-page caption {font-size: 14px;}


/*******************
Size guide
*******************/
#size_chart table {border: 1px solid black; margin-bottom: 40px;}
#size_chart table th {font: bold 12px Verdana, Geneva, sans-serif; text-align: center; padding: 5px;}
#size_chart table td {padding: 3px; text-align: center; font: 11px Verdana, Geneva, sans-serif;}
#size_chart h1 {margin: 12px 0;}
#size_chart h2 {color: #424242; font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 0.2em; font-weight: bold;}
#size_chart p {margin: 0; line-height: 1.6em;}



/*******************
Footer
*******************/
#footer {clear: both; width: 1004px; margin: 15px 0px 0 0px; padding-top: 0px; text-align: right; position: absolute; bottom: 0;}
ul.footer-links {text-align: right;}
ul.footer-links ul {display: inline; margin-bottom: 10px;}
ul.footer-links li {padding: 5px 0 5px 10px; display: inline;}
ul.footer-links li a {color: #818b8a; text-decoration: none;}
#copyright {color: #818b8a; font: normal 0.95em Arial, Helvetica, sans-serif; margin: 5px 0 0 0;}
a.copyright-links {color: #818b8a; font-size: 0.95em;}
#social {position: absolute; bottom: 10px; left:10px;}
#social img {float: left; margin: 10px 10px 0 0;}

/* HELP: The search suggest drop down. Do not remove position, left or z-index! */

#search_suggest {position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; visibility: hidden; width: 150px; top: 0px; left: 0px; z-index: 200;}

/* HELP: Styling for link div in the search suggest box */
.suggest_link {background-color: #FFFFFF; padding: 2px 6px 2px 6px; font-weight: normal;}

/* HELP: Styling for text highlights in search suggest box */
.suggest_link_highlight {background-color: #FFCC33; font-weight: bold;}

/* HELP: Styling for link div with mouse over in search suggest box */
.suggest_link_over {background-color: #3366CC; padding: 2px 6px 2px 6px; cursor: pointer;}