/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
 */



body {
margin-top: 0px;
color: #000;
margin-left: 15px;
margin-right: 15px;
border-style: solid;
border-width: 100%;
  border-top: 0px dashed #FAD39A;
  border-left: 0px solid #FAD39A;
  border-right: 0px solid #FAD39A;
  border-bottom: 0px;
  margin-bottom: 10px;
  padding: 0px;
  font: 11px Verdana, Arial, sans-serif;
	}

/* Padding setting here determines the width of your main menu rollover buttons */
#navi a , #navi strong , #navi subcat {
	color: #666;
	font-family: "georgia", "georgia";
	text-decoration: none;
	text-align: left;
	font-size: 12px;
	border: 1px solid #A7C1C3;
	border-top-style: solid;
	border-left-style: none;
	border-right-style: none;
	border-bottom-style: none;
	display: block;
	width: 175px;
	padding: 3px 0px;
	margin: 0px;
}

#navi strong {
	font-weight: bold;
	background: #e7f5f6;
	color: #f7f6f1;
}

#navi a {
	background: #f7f6f1;

}

#navi subcat {
	font-weight: bold;
	background: #000000;
	color: #FFFFFF;
}

#navi a:hover {
	background: #e7f5f3;
	color: #000;
        border-style: solid;
        border-left-with: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-top-width: 2px;
}

.currentpage

/* this is the style used on the shop selction option, be careful it is used 
in many other places too */
.radioButtonLabel {
color: #000;
border-style: solid;
        border-left-with: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-top-width: 2px;
}
.centerboxwrapper {
	padding-left: 35px;
	padding: 5px;
	background-color: #f7f6f1;
	border-color: #a7c1c3;
	border-style: solid;
	border-top-width: 2px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
}

/* My own style to set the background and with of the layer containing the whatsnew stuff home page */
.centerBoxMackey {
	width: 538px;
	padding-left: 35px;
	padding: 0px;
	background-color: #fff;
}

/*Pulled this style out to try and get the products on the home page background its own colour */
.centerBoxContentsNew {
	height: 200px;
        background-color: #f7f6f1;
	padding-top: 3px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 3px;
	border-color: #a7c1c3;
	border-style: solid;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;

}

/* This is the box for the specials */
.centerBoxContentsSpecials {
	height: 200px;
        background-color: #f7f6f1;
	padding-top: 3px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 3px;
	border-color: #a7c1c3;
	border-style: solid;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;

}

/* This is the style for the div for the specials */
.centerBoxContentsFeatured {
	height: 200px;
        background-color: #f7f6f1;
	padding-top: 3px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 3px;
	border-color: #a7c1c3;
	border-style: solid;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;

}

/* this code is related to the bestseller box and it allows the text to flow 
around the images, it also determines the image sizes etc. */
.bestsellers_thumbnail {
width: 26px;
padding-right: 4px;
float: left;
margin: 0px;
}

#bestsellers .wrapper {
	margin: 0em 0em 0em 0.9em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
  margin-left: 3px;
	padding-top: 5px;
	margin: 0em 0em 1.3em 0em;
	clear: both;
	}


/* this affects the New Products for MONTH heading and width etc.
.centerBoxHeading {
	width: 98%;
        color: #999;
        font-family: georgia;
        border-style: solid;
        border-color: #a7c1c3;
        border-width: 1px;
        border-left-width: 0px; 
        border-right-width: 0px; 
	background-color: #e7f5f6;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	}
*/

/* This is your colourful logo underneath the top leftmost logo */
.logo2 {
	background-image: url(../images/test_logo.jpg);
	background-repeat: no-repeat;
	border:none;
	height:243px;
	width: 547px;
	padding-top: 0px;
	padding-left: 0px;
}

.top_table {
	font-family: times, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 900;
	color: #7C7890;
	background-color: #e7f5f6;
	text-align: center;
}

/* This is your own style used to create the headers right bang in the middle section of the pages (Whats new etc.) */
.userlayout {
	background-image: url(../images/blueshade.jpg);
	background-color: #e7f5f6;
	font-family: times, arial, serif;
	font-size: 14px; 
	color: #7C7890;
	font-weight: bolder; 
	border-bottom: solid;
	border-top: solid;
	border-width: 1px;
	border-bottom-color: #a7c1c3;
	border-top-color: #a7c1c3;
	width: 547px; 
	text-align:center;
	height: 18px;
	padding-top: 10px;
	padding-bottom: 8px;
	padding-left: 0px;
}


/* categories box parent and child categories and extra links */
a.category-top, a.category-links {
  color: #000;
  text-decoration: none;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #38A4A3;
	text-decoration: none;
	}
 
a:visited {
	color: #808080;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #A5CFCE;
	}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	white-space: nowrap;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .larger{
	background-color: #fff;
	font-size: 12px;
	}

.biggerText {
	font-size: 1.2em;
	position: relative; /* This code fixes stupid invisible text bug in IE (peekaboo) ps */
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.4em;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}
	
.categoryListBoxContents {
background-color: #f7f6f1;
}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	position: relative;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	position: relative;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

/* Amongst other things, like all the main price and description font, this sets the colour behind the top logo in this case to white, note it also affects the background to the items added to shopping basket */
#headerWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	background-color: #fff;
	}
/*I have seperated logoWrapper out of the above IDs to change this only, this is the bottom most layer the background if you like.*/
#contentMainWrapper {
background-color: #FFF;

}

/* above the logo below the topmost menu system, increase the padding to see */
#logoWrapper {
    	background-color: #fff;
	margin: 0em;
	padding: 0em;
}

/* This seems to affect columns behind the navigation main menu, and headings (the left hand column} margin here affects the whole layout the background colour is the white you can see on the edge of the category labels, shopping cart, categories etc.*/
#mainWrapper {
	width: 970px;
	margin: auto;
	background-color: #fff;
	padding: 0px;
	} 

/* I pulled this out from above, this is the headers for left hand side, new products categories etc. */
#navColumnOneWrapper {
	padding: 0px;
        background-color: #fff;
        border-style: solid;
        border-width: 1px;
        border-color: #a7c1c3;
}

/* This is the right hand side of the pages headers, shopping basket headers, best sellers etc. */
#navColumnTwoWrapper {

        background-color: #e4e3df;
        border-style: solid;
        border-width: 1px;
        border-color: #a7c1c3;
}

#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.0em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}

/* This is the search header, including its background colour etc and float affects the logo image*/
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0px;
	font-weight: 600;
	color: #CCAA85;
	height: 30px;
	width: 98%;
	background-color: #fff;
	float: left;
	border-top: 0px solid #A7C1C3;
	border-right: 0px solid #A7C1C3;
	border-bottom: 2px solid #E4E3DF;
	border-left: 0px solid #A7C1C3;
	font-family: georgia, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	}


#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: disc;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	white-space: normal;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0em;
	margin: 0.5em;
	color: #38A4A3;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin-top: 0.0em;
	}
	
/* this is the breadcrumb menu that runs throughout the site */
#navBreadCrumb {
height: 15px;
position: relative;
left: 10px;
top: 4px;
	background-color: #fff;
	border: #a7c1c3;
	border-top-style: solid;
	border-top-width: 1px;
	border-left-style: solid;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	width: 530px;

	}

#navEZPagesTop {
	background-color: #ffff33;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding-top: 0.5px;
	}

/* These appear to have an effect on the headings, still working this out */
#navColumnOne {
background-color: #A5CFCE;
padding: 0px;
}

#navColumnTwo {
	background-color: #fff;
padding: 0px;
	}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsAlsoPurch, .alert {
	background-color: #fff;
	vertical-align: text-top;
	}

#productDescription, .shippingEstimatorWrapper {
	padding: 0.5em; 
	position: relative; /* This code fixes stupid invisible text bug in IE (peekaboo) ps */
	}


/* This is where you control the top div above the main below one - there is a bug with IE here, it will not show the text unless you hover over a hyperlink*/
/* Hides from IE5-mac \*/
* html .centerColumn {height: 1%;}
/* End hide from IE5-mac - this stuff is only seen by IE, setting that height on the centerColumn style makes IE expand the box- FF etc miss all this because of the '\' escape code above do not remove it */

.centerColumn {
padding-left: 0px;
padding-right: 15px;
background-color: #fff;

}


/* This is where you control the main central div */
.content {
color: #585858;
font-family: georgia;
font-size: 12px;
font-style: bold;
padding-left: 0px;
width: 538px;
background-color: #fff;
}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
#bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #A7C1C3;
	background-color: #fff;
	padding: 1em;
	}

.tableHeading TH {
	background-color: #E7F5F6;
	border-bottom: 1px solid #A7C1C3;
	border-top: 1px solid #A7C1C3;
	}

.tableHeading, #cartSubTotal {
	background-color: #e7f5f6;
	 }

#cartSubTotal {
	border-top: 1px solid #A7C1C3;
	border-bottom: 1px solid #A7C1C3;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay   {
	padding: 0.5em 0em;
background-color: #F7F6F1;
	}

.cartTotalsDisplay {
color: #C60D0D;
background-color: #F7F6F1;
width: 538px;
}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #000;
	background-color: #F7F6F1;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #000;
	background-color: #F7F6F1;
	position: relative;   /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	margin-left: 0.5em;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

#cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
width: 50%; 
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

#cartBoxListWrapper ul, #ezPageBoxList ul {
        background-color: #f7f6f1;
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

.categoryIcon {
padding-top: 1.3em;
}
#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsAlsoPurch, {
	margin: 0em 0em;
	background-color: #f7f6f1;
	}

/* Pulled this out so that I could colour and control the listings in for eg Christmas products sub category */
.categoryListBoxContents {
background-color: #FFF;
}

/*sideboxes*/
.columnLeft {
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #f7f6f1;
}


/* Positioning and colour of text in LH sideboxes, I think including a tag hover colour too */
h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1.0em;
	color: #579DB6;
	}

.leftBoxHeading {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #fff;
	height: 20px;
	font-family: georgia, times, arial, serif;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-left-style: solid;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #a7c1c3;
	border-right-color: #a7c1c3;
	border-right-style: solid;
	border-bottom-color: #a7c1c3;
	border-left-color: #a7c1c3;
	line-height: normal;
	font-variant: normal;
	background-repeat: no-repeat;
	}


/* This is where you can adjust the height position and colour of the category headers negative number allows it to link up nicely with the breadcrumb menu */
.leftBoxContainer {
	background-color: #e4e3df;
	width: 175px;
	padding-top: 1px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 1px;
	border: 0px solid #CCC49E;
	margin-top: 0px;
	}

/* This affects the background colours where your menus are, the hyperlinks on the left background etc */
.sideBoxContent {
	width: 175px;
	background-color: #f7f6f1;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 0.5em;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.0em;
	color: #A7C1C3;
	}

.rightBoxHeading {
	background-color: #fff;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 0px;
	border: 1px solid #A7C1C3;
	}

h3.leftBoxHeading a:hover {
	color: #A5CFCE;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #000;
	text-decoration: none;
	}

.rightBoxContent {
	background-color: #ffffff;
	margin-bottom: 1em;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsAlsoPurch, .gvBal, .attribImg {

	text-align: center;
	}

/* Pulled this out of the above listing, as this affects the products layout once the category is clicked */
.productListing-data {
	text-align: center;
	padding: 5px;
	background-color: #f7f6f1;
	border-color: #a7c1c3;
	border-style: solid;
	border-top-width: 2px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
}

#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/*misc*/
.back {
	float: left;
	}

.forward {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
	background-color: #f7f6f1;
	}