HTML
	{ height:100%; BACKGROUND-COLOR: #3C1027; padding:0px;
		background-image: url(../images/bg_purple.gif);	BACKGROUND-REPEAT:repeat-y; text-align:center;}

BODY
	{ MARGIN: 0px; padding:0px; FONT-SIZE: 11px; COLOR: #ffffff;   	BACKGROUND-COLOR: #3C0F26;
    background-image: url(../images/bg_purple.gif);	BACKGROUND-REPEAT:repeat-y;
    text-align:center; }

/* If you want a fixed width, you can set the width in the content wrapper, and text-align:center in the body and html css tags  */
.ContentWrapper
	{width:920px; text-align:left; margin-left:auto; margin-right:auto; }



.InnerContentWrapper
	{ width:100%}

/* If you change the page header height, remember to update the .sidebar and .main */
.pageheader 
	{ HEIGHT: 140px; width:100%; BACKGROUND-COLOR: #3C0F26; padding:0px; }

.pagefooter
	{ background-image: url(../images/bg_purple.gif);	BACKGROUND-REPEAT:repeat-y; width:100%; float:left; z-index:-1; padding:0px;}

/* If you change the sidebar width, remember to update the NavBar section */
.Sidebar
	{ WIDTH: 130px;	top: 140px;	PADDING: 0px 3px; POSITION: absolute; font-weight: normal;}

.main
	{ MARGIN: 0px 5px 15px 133px; PADDING: 5px 5px 5px 35px; BORDER: 1px none #ebebeb;}

.mainbox
	{ MARGIN: 0px 4px 20px; padding:0px; BACKGROUND-COLOR: white; BORDER: #808080 1px none; FONT-SIZE: 1em; text-align:left;}

H1
	{ FONT-SIZE: 1.4em; MARGIN: 0px; FONT-STYLE: normal; COLOR: #999900; font-weight: bold; padding:0px;}
	


H2
	{ FONT-SIZE: 1.2em; MARGIN: 0px;  MARGIN-BOTTOM: 5px; FONT-STYLE: normal; COLOR: #999900; font-weight: bold; padding:0px; padding-right: 10px; }

A H2  
	{ text-decoration:none;	color:#999900 !important;}

A:hover H2
	{ color:#CCCCCC !important; }

H3
	{ FONT-SIZE: 1.1em; MARGIN: 0px;  MARGIN-BOTTOM: 5px; FONT-STYLE: normal; COLOR: #6699CC; font-weight: bold;}

P 
	{ FONT-STYLE: normal; TEXT-DECORATION: none; FONT-SIZE: 11px; COLOR: #24474f; text-align:left;}

TD
	{ font-size: 10pt; }

A
	{ COLOR: #999900; }

A:hover
	{ COLOR: #CCCCCC; }

.Copyright 
	{ FONT-SIZE: 10px; COLOR: #c5dc77; WORD-SPACING: 2px; LETTER-SPACING: 1px; TEXT-DECORATION: none; }

A.Copyright
	{ COLOR: #6699CC; font-weight: bold; WORD-SPACING: 2px;	LETTER-SPACING: 1px; TEXT-DECORATION: none }

A.Copyright:hover, A.Copyright:active
	{ COLOR: #0f3890; TEXT-DECORATION: underline}


BODY, P, INPUT, TEXTAREA, SELECT, TD.ContactDetailsDisplayRight, .Copyright, H1, TD, .MiniCart, .icon 
{
	FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
}

/****************** Classes for Product Display on Cat, SubCat, and Product Pages ***************/

INPUT.QuantityToAddBox
	{ width:30px !important;
	    color:#184A69; FONT-SIZE: 0.9em; font-family: verdana, tahoma, arial, sans-serif; 
	    background: white url(images/boxbg.gif) top left repeat-x;
	    border-width:1px; border-style: solid; border-color:#A8BAC2 #DFE5E7 #DFE5E7 #A8BAC2; }

.SizePrompt, .ColourPrompt
 { width:50px; }

.SizeDropDown, .ColourDropDown
	{ margin-left: 10px; margin-bottom: 2px; width:100px; }	

.ColourDropDownControl, .ColourDropDownControlTable, 
.SizeDropDownControl, .SizeDropDownControlTable
	{ width:100% }

.SizeDropDownCell, .ColourDropDownCell
	{ text-align:right; }

.ProductVariationItemCell
	{ border-top: solid 1px #EDEDED; font-size:10px;}

TD.ProductVariationItemCell
	{ font-size:10px; }

.ProductVariationListTable 	
	{ width:100%; }
	
.ProductVariationList
	{ width:100%; padding-left:5px;}

/* 	SorryMessageOnProductVariationList - Shown when Qty ordered is not available */
.SorryMessageOnProductVariationList
	{ color: red; font-size:8pt; border-top: solid 1px #EDEDED;}
	
/* NotForSale - Appears when a product is marked not for sale */
.NotForSale
	{ color: red; text-align: center; font-size:8pt; }


/**************************** Product Pages **************************/

.ProductDetails
	{ margin:0px 0px 10px 0px; padding:5px 10px 10px 10px; text-align:center; width:85%;}

TD.ViewProductDetailsCell, .ViewProductDetailsCell
	{ text-align:right; }

.ProductPageHTML
	{ margin:0px 40px 10px 40px; padding-top:5px; width:85%; }

.ProductPageNavigationControls
	{ margin-top: 30px;	padding: 10px; width:85%; }

.DescriptionInsideOfProducts
	{ width:100%; text-align:left;}

.SwatchList
	{ padding-top: 10px;}

.Swatch
    { cursor: pointer; }
			
.SelectedSwatch
	{ border-color: Red; border-width: 2px; cursor:default !important; }
	

/**************************** View Category and SubCategory Pages **************************/
.ViewCategoryFooter 	
	{ clear: both; border:solid 1px #999900; width:90%; margin-bottom:10px; text-align:left; padding:5px; }

.ViewCategoryFooterTable 
	{ width:100% }

.ProductDetails, 
.ProductPageNavigationControls
	{ border:solid 1px #999900; }

.LowerDescription
	{ clear: both; display:block }
	

/**************************** Product Grid - View Category and SubCategory Pages **************************/

.ProductGridTable 	
	{ width:100% }
	
.ProductGrid
	{ width:90%; margin-bottom:10px; text-align:left; }
	
.ProductGridItem
	{ border:solid 1px #999900; margin:0px 5px 10px 5px; padding:5px 5px 10px 5px;
	  height:300px; width:200px; float:left; display:inline; text-align:left;}

.ProductGridItemDummy
	{ height:300px;	width:0px;}

.ProductGridItemInner
	{ height:155px;}
	
.ProductGridPageNumbers A,
.ProductGridBackNext A
	{ color: #B2CCE5 !important; text-decoration:none; font-weight:bold; }

.ProductGridPageNumbers A:Hover,
.ProductGridBackNext A:Hover
	{ text-decoration:underline; }

/**************************** Checkout Page **************************/


.CountryRegionList  
	{ width:100%; padding:5px;}	

.NewsletterOptIn
	{ FONT-SIZE: 1.2em; COLOR: #CCCCCC; }

.MessageTable, .MessageTextbox
	{ width:100% }

#CheckoutInstructionsDiv
	{ padding-top: 10px; }

/* SorryMessageOnCartContents - Shown when quantities ordered not available  */
.SorryMessageOnCartContents   
	{ color: red; }
	
	
/***** To Confirm Freight - Appears on Checkout Page when country not accepted, or freight can't be determined *******/	
.ToConfirmFreight
	{ color:Red !important; border: solid 1px #669acc; background-color: #EDEDED; text-align:center;
	  font-weight: bold; width:100%; padding: 3px 0px;   margin: 2px 5px; font-size: larger;}


/**************************** Cart Contents - Checkout Page **************************/

.Cart
	{ margin-bottom:20px; width:85%;}

.CartTable 
	{ width:100% }

TD.CartHeader, TD.CartFooter
	{ border-bottom: solid 1px #CCCCCC; padding:3px; padding-left: 5px; font-size: 12px; 
		letter-spacing: 1px; font-weight: bold;} 

TD.CartHeader
	{ COLOR: #FFFFFF; }
	
TD.CartFooter
	{ color: FFFFFF;  margin-bottom:3px;}
	
TD.CartCell
	{ padding:3px; padding-left: 5px; border-bottom: solid 1px #CCCCCC;}



/************* Checkout Control - Shown on Checkout Page at bottom **************/

.Checkout
	{ margin-bottom:20px; width:85%; }

.CheckoutTable 
	{ width:100% }

DIV.CheckoutMessage
	{ width:85%; }	
	
TD.CheckoutMessage
	{ COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; padding:3px; font-weight: bold;
		 padding-left: 5px; font-size: 12px; letter-spacing: 1px;}
	
TD.CheckoutHeader 
	{ padding:3px; padding-left: 5px; font-size: 12px; letter-spacing: 1px; 
		COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; font-weight: bold;}
		
TD.CheckoutFooter 
	{ font-weight: bold;  text-align:right; text-transform: uppercase; padding-right: 5px; }	

TD.CheckoutFooterTotal 
	{ font-weight: bold;  text-align:right; padding-right: 5px;}
	
.CheckoutFooterTotal 
 	{ COLOR: #CCCCCC; border-bottom: solid 1px #CCCCCC; }

TD.CheckoutCellLeft
	{ text-align:right; }	

TD.CheckoutCellRight 
	{ text-align:right; padding-right: 5px;}

.CheckoutCellRight
	{ border-bottom: solid 1px #CCCCCC; }

/************* Currency Control - Shown on Checkout Page when billing country not NZ **************/

.Currency 
	{ margin-bottom:20px; width:85%;}

.CurrencyTable
	{ width:100% }

.CurrencyDropDownList
	{ margin-left:5px; }

TD.CurrencyHeader
	{ COLOR: #5c5c5c; border-bottom: solid 1px #CCCCCC; font-weight: bold; padding:3px; padding-left: 5px; font-size: 12px; letter-spacing: 1px;}
 
TD.CurrencyFooter
	{ text-align:right; padding-right: 5px; font-weight: bold; text-transform: uppercase; color: #CCCCCC !important; }

TD.CurrencyFooterTotal 
	{ text-align:right; padding-right: 5px; font-weight: bold; }

TD.CurrencyCellLeft 
	{ text-align:right; padding-right: 5px;}	

TD.CurrencyCellRight
	{ text-align:right; padding-right: 5px; }	


/**************************** Contact Details - Checkout Page **************************/

.CheckoutContactDetailsTable,
.ContactDetailsTable
	{ width:100% }
	
.CheckoutContactDetails
	{ margin-bottom:20px; width:85%; }

TD.ContactDetailsHeader 
	{ COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; font-weight: bold; padding:3px; padding-left: 5px; font-size: 12px; letter-spacing: 1px; }

TD.ContactDetailsRight
	{ padding:3px;}
	
TD.ContactDetailsLeft
	{ padding:3px; padding-right: 10px;}	

.ContactDetailsEntry
	{  }

INPUT.ContactDetailsEntry, 
TEXTAREA.ContactDetailsEntry, 
SELECT.ContactDetailsEntry
	{ FONT-SIZE: 0.9em; width:150px;}


/**************************** Order Confirmed Page **************************/

.OrderConfirmationDetails
	{ padding:5px;}

TD.OrderConfirmationCell
	{ padding:3px; padding-right: 5px; padding-left: 5px; }

TD.OrderConfirmationHeader,
TD.OrderConfirmationFooter
	{ padding:3px; padding-left: 5px; font-size: 12px; letter-spacing: 1px; 
		COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; font-weight: bold;}

TD.OrderConfirmationFooterCell, 
TD.OrderConfirmationFooterCellTotal
	{ font-weight: bold;  color: #CCCCCC !important; }

TD.OrderConfirmationFooterCell
	{ text-transform: uppercase; padding-right: 5px;}	

TD.OrderConfirmationFooterCellTotal 
	{ padding-right: 5px;}

.OrderConfirmationFooterCellTotal
	{ border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; }

TD.OrderConfirmationTotalCell 
	{ padding-right: 5px;}
	
.OrderConfirmationTotalCell
	{ border-bottom: solid 1px #CCCCCC; }
	
#OrderConfirmationDeliveryInstructionsLabel, 
#OrderConfirmationEmailLabel 
	{ font-weight: bold; margin: 5px 0px 20px 40px;	display:inline-block;}

.OrderConfirmationOrderLinesTable, 
.OrderConfirmationDeliveryDetails 
	{ width:100% }	

.OrderConfirmationOrderLines
	{ width:100%; margin-bottom:20px; }	
	
.OrderConfirmationOuterDiv 
	{ width:85%; margin-bottom:20px; }	
	
.OrderConfirmationDetails
	{ width:85%; }

/**************************** Success or Error Display - Order Confirmed Page **************************/

.OrderSuccessful,
.OrderError 
	{ COLOR: #5c5c5c; border: solid 1px #669acc; background-color: #EDEDED; font-weight: bold; font-size: larger;
	  padding: 15px 2px; width: 500px;  margin-bottom:25px; text-align:center; }

.OrderConfirmationOrderErrorTable
	{ width:100%; }	

.OrderConfirmationOrderSuccessful, 
.OrderConfirmationOrderError 
	{ width:100%; border: solid 1px #CCCCCC; font-weight: bold; padding: 15px 0px; font-size: larger; text-align:center;}

.OrderConfirmationOrderSuccessful 
	{ color:#FFFFFF !important; }

.OrderConfirmationOrderError 
	{ color:Red !important; }
	

/**************************** Contact Details Display - Order Confirmed Page **************************/

.ContactDetailsDisplayTable 
	{ width:100% }

.ContactDetailsDisplay
	{ border: none;	margin-bottom: 10px;}

TD.ContactDetailsDisplayRight
	{ border-left:0px; FONT-SIZE: 0.9em; padding:3px; }

TD.ContactDetailsDisplayLeft 
	{ border-left:0px;  padding:3px; padding-right: 10px; }

TD.ContactDetailsDisplayHeader
	{ COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; font-weight: bold;
		  font-size: 12px; letter-spacing: 1px; padding:3px; padding-left: 5px;}
	


/**************************** Login Page **************************/

.LoginCell, 
TD.LoginCell			
	{ border:solid 1px #CCCCCC; padding:3px;}

.LoginFooter			
	{ border:solid 1px #CCCCCC; padding: 3px 3px 3px 6px;}
	
.LoginHeader, 
TD.LoginHeader
	{ font-weight: bold; font-size: 12px; letter-spacing: 1px;	
	  border-width: 1px; border-style: solid none;	border-color: #FFFFFF; }	

.icon
	{ COLOR: #FFFFFF; border-bottom: solid 1px #CCCCCC; font-weight: bold; font-size: 19px; letter-spacing: 2px;}

/**************************** Mini Cart **************************/
.MiniCart
	{
	margin: 30px 1px 0px 1px;
	padding-top:3px;
	border: 1px solid #CCCCCC;
	width: 125px;
	color: #CCCCCC;
	text-align:center;
	background-color: #6b495a;
}

.MiniCartTable 
	{ width:100% }

span.MiniCartTotal
	{ font-size:10pt; text-align:center;}

.MiniCartCellLeft
	{ white-space: nowrap; text-align:right;}

DIV.ViewCartButton 
	{ COLOR: #666666; border-bottom: solid 1px #CCCCCC; border: solid 1px white; margin-top: 7px; vertical-align:middle; text-align:center; }
	
A.ViewCartButton
	{ display: block; text-decoration: none; text-align:center; text-transform: uppercase;  vertical-align:middle !important;
   	  color: #FFFFFF !important; font-weight: bold;	font-size:11px;	background-color:#6b495a; padding:4px 0px;}

A.ViewCartButton:hover
	{ background-color: #EDEDED; color: #666666 !important;}
	 

/**********************************************************************************
General CSS for individual classes
**********************************************************************************/


INPUT.box, TEXTAREA.box, SELECT.box
	{    background: white url(images/boxbg.gif) top left repeat-x;
		 color:#184A69; font-family: verdana, tahoma, arial, sans-serif;  FONT-SIZE: 0.9em;
	   	 border-width:1px; border-style: solid; border-color: #A8BAC2 #DFE5E7 #DFE5E7 #A8BAC2; }

.warning
	{ color: Red !important; }	

A.warning
	{ text-decoration: underline !important; }

.OrderLines
	{ border: solid 1px #dcdcdc; padding: 2px; padding-left:10px; background-color:#f5f5f5; width: 500px;}

.OrderLines TD
	{ padding-right: 10px;}



/********************* BreadCrumbs CSS  - Appear on Cat, Subcat, Product, and Custom Pages *******************/

.BCDiv
	{ padding-bottom:10px; }

a.BCLink
	{ color:#999900; text-decoration:none; }

a.BCLink:hover
	{ color:#CCCCCC;}

.BCSep, .BCHere
	{ font-weight:bold;	color:#FFFFFF;}

.BCLoc
	{ font-weight:bold; }

/*********** AdminCrumbs CSS  - Appear on Cat, Subcat, Product, and Custom Pages when admin logged in ************/

.ACDiv
	{ padding-bottom:5px; }

a.ACLink
	{ color:LightGray; text-decoration:none;}

a.ACLink:hover
	{ color:#FF9900; }

.ACSep, .ACHere
	{ font-weight:bold;	color:LightGray; }


/********************* Volume Discounts Button */

.VolumeDiscountBox 
	{ border:solid 1px #669acc;	background-color: #EDEDED; padding: 1px 5px; margin: 2px; font-size: 10px;}

.VolumeDiscountsButton
	{ COLOR: #5c5c5c; text-align:center; }

A.VolumeDiscountsButton
	{ font-weight: bold; display: block; text-decoration: none;	padding:4px 0px;
	vertical-align:middle !important; color: #5c5c5c !important; font-size:11px; background-color:#EDEDED; }

A.VolumeDiscountsButton:hover
	{ background-color: #FE9900; color: white !important;}

DIV.VolumeDiscountsButton
	{ border: solid 1px #669acc; margin: 7px 5px 3px 7px; vertical-align:middle; }


/**************************** NavBar Styles *********************/

.NavBar
	{ cursor: default; width:125px;white-space: normal !important; margin-bottom:30px} 

.NavBarTopItem,
.NavBarTopItemHover,
.NavBarTopItemActive
	{ color:white; cursor: pointer; font-family: Arial, Helvetica; font-size: 11px; font-weight: normal;
		padding-top: 4px;  padding-bottom: 2px;  padding-left: 5px;  }
		
.NavBarTopItem TD,
.NavBarTopItemHover TD,
.NavBarTopItemActive TD
{
  text-align:right !important;
  padding-right: 10px;
}

.NavBarTopItem
	{ }

.NavBarTopItemHover
	{ color:#999900}

.NavBarTopItemActive
	{ }

.NavBarLevel2Group
	{ }

.NavBarLevel2Item, 
.NavBarLevel2ItemHover,
.NavBarLevel2ItemSelected,
.NavBarLevel2ItemActive
	{ font-family: Arial, Helvetica; padding:3px;  padding-left: 15px; cursor:pointer; text-align:right !important; }

.NavBarLevel2Item TD, 
.NavBarLevel2ItemHover TD,
.NavBarLevel2ItemSelected TD,
.NavBarLevel2ItemActive TD
{  
  text-align:right !important;
  padding-right: 25px;
}

.NavBarLevel2Item
	{ color:#FFFFFF; }

.NavBarLevel2ItemHover
	{ color:#999900}

.NavBarLevel2ItemSelected
	{ }


.NavBarLevel2Item A:LINK, .NavBarLevel2Item A:ACTIVE, .NavBarLevel2Item A:VISITED,
.NavBarLevel2ItemHover A:LINK, .NavBarLevel2ItemHover A:ACTIVE, .NavBarLevel2ItemHover A:VISITED,
.NavBarLevel2ItemSelected A:LINK, .NavBarLevel2ItemSelected A:ACTIVE, .NavBarLevel2ItemSelected A:VISITED
	{ color: #000000; font-size: 10px; display:block; text-decoration: none; text-align:right !important; }

.NavBarLevel2Item A:HOVER,
.NavBarLevel2ItemHover A:HOVER,
.NavBarLevel2ItemSelected A:HOVER
	{ color: #000000; display: block; text-decoration: underline; }

.NavBarEmpty
{
}

/**************************** Login Styles *********************/
.LoginDiv
	{ padding: 5px; }
.LoginTextBox, .LoginCheckBox
	{ width: 100px; margin-left:10px; margin-bottom: 2px; }
.LoginMessage
	{ color:Red; }
.LoginButtonDiv
	{ text-align: center; }	
.LoginButton
	{ }	
	
/************ barLeft and barRight for more complex skins ********/
#barLeft, #barRight
	{ display: none; }
		
		
/**************************** FormPage Page **************************/
/**************** i.e Newsletter, Voucher, Contact US ****************/

#FormPageFormDiv
	{ padding-top: 15px; }
.FormPageRow
    { vertical-align:top; }
.FormPageCellLeft
	{ padding-top: 5px; }
.FormPageCellRight
	{ padding-top: 5px; padding-left:5px; }	    			
.FormPageCellRight input, .FormPageCellRight textarea
	{ width: 300px; }
#ThankyouDiv
	{ padding-top: 10px; color:red; }
	
/**************************  Brought over from the Circleworks old shop  *********************/

	
#nav ul{
	margin:0;
	padding:0;
	list-style: none;
	}
#nav span {
	background-image:  url(../%22two.gif%22); /* This is to preload the hover state */
	background-repeat: no-repeat;
	margin-top: 33px; /* For IE5 Mac only - reset to 0 below */
	margin-bottom: 65px; /* For IE5 Mac only - reset to 0 below */
 	}
	
#nav a { /* if background is on a:link IE6 won't display properly  */
	background-image:  url(../%22one.gif%22); /*can be just background */
	background-repeat: no-repeat; /* height and or width in here will stop main image change in IE5 */
	padding-top: 32px; /* For IE5 Mac only - reset to 0 below */
	padding-left: 20px;
	padding-bottom: 32px; /* For IE5 Mac only - reset to 0 below */
	padding-right: 32px; /* For IE5 Mac only - reset to 10 below */
	color: white;
	font-family: "Arial", sans-serif;
	font-size: 12px;
	/*height or width in here will stop main image change in IE5 Win
	luckily, line-height is OK! - hidden from IE5 Mac see below
	a must be block to display background-image in IE Win
	 - but also needs to be hidden from IE5 Mac see below */
 	}

#nav a/*Comment hack to hide this from IE5 - needed to extend link over button image in IE6 */{
 	height:20px;
	}
  
#nav a:hover {
	background:  url(../%22one.gif%22) no-repeat; /* no background-x styles work here */
 	color: #999900; 
	}
	

#nav a img {
	width: 118px; /* IE5 Win can't dynamically change size - don't use 0px to hide */
	height: 95px;
	top: 32px; 
 	left: 732px; 
	border: 0px;
	visibility: hidden;
	}
#nav img {
	width: 118px; /* IE5 Win can't dynamically change size - don't use 0px to hide */
	height: 95px;
	position: absolute; 
	top: 150px;
	border: 0px;
	visibility: visible;
	}

 /* commented backslash hack v2 - hide rules from IE5 Mac \*/
#nav a {
	padding-top: 0; 
	padding-bottom: 0;
	padding-right: 3px; 
	display: block;
	text-decoration: none;
	font-size: 12px;
	text-align: left;
	}	
#nav li {
	margin-top:0;
	margin-bottom:0;
	width: 200px;
	}
/* end hack */


#nav a:hover img {
	visibility:visible;
	float: right;
	}


.inpagelink {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999900;
}