/* some shit here to test backup increments properly */

/* Use: removes margin and padding from all elements
		Affects: whole site	*/
* {
  margin: 0;
  padding: 0;
}

.poweredby, img {
	behavior: url(/scripts/js/iepngfix.htc);
}



/*	Use: forces vertical scroll bar to stay on in firefox - same as IE
		Affects: whole site	*/
html {
	height: 100%;
}

/*	Use: sets a top margin on the body so that there is a gap before the header
		Affects: whole site	*/
body {
	height: 100%;
	position: relative;
}

p {
	margin-bottom: 10px;
}

/*	Use: fixes IE bug where it adds an extra line after forms
		Affects: whole site	*/
form {
	display: inline;
	margin-bottom: 0;
}

/*	Use: remove border on all images
		Affects: whole site	*/
img {
	border: 0px;
}

/*	Use: displays a warning that javascript is turned off. Hidden by javascript	*/
#js {
	text-align:center;
	background:#f33;
	border:1px solid #f00;
	color:#fff;
	padding:10px;
	margin: 4px 4px 0 4px;
}

#js a {
	color: #fff;
	font-weight:bold;
}

/*	Use: sets width of the wrapper, and centers it on the page
		Affects: whole site	*/
#wrapper {
	width: 934px;
	margin: 0 auto;
	margin-top: 10px;
}

/*	Use: creates an inner wrapper for the main content and right hand side bar, sets width and float for the wrapper
		Affects: whole site	*/
#innerwrapper {
	position: relative;
	width: 762px;
	float: right;
}

/*	Use: sets dimensions for header
		Affects: whole site */
#header {
	width: 934px;
	height: 150px;
}

#header img {
	width: 934px;
	height: 150px;
}

/*	Use: moves the h1 tag in the header off the side of the site so it becomes invisible, helps SEO
		Affects: whole site	*/
#header h1 {
	display: inline;
	position: absolute;
	margin-left: -10000px;
}

/*	Use: create an area for the main content with a fixed width floated to the left of the innerwrapper
		Affects: whole site	*/
#content {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 588px;
	float: left;
}

/*	Use: changes h2 tag in the content area into a visual header
		Affects: whole site	*/
#content h2 {
	display: block;
	padding: 4px;
	width: 580px;
	border: 0px;
	font-size: 12px;
}

/*	Use: creates an area within content which has outer padding, visually nicer than the main content touching the border of the content box
		Affects: whole site	*/
#content #innercontent {
	display: block;
	width: 568px;
	padding: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*	Use: set list items in the content box to have a 20pixel left margin
		Affects: whole site	*/
#content #innercontent li {
	margin-left: 20px;
}

/*	Use:	set a very small font size for the content footer so we can shrink it if we need to - ie seems to force is to 12px high even though there is no text in it
		Affects: whole site	*/
#content .footer {
	font-size: 1px;
}

/*	Use: set fieldsets to a fixed width, centered and with padding
		Affects: whole site	*/
fieldset {
	padding: 5px;
	margin: 0 auto;
	width: 540px;
	position: relative;
	display: block;
	_margin-top: 1em;
	padding-top: .75em;
}

/* Use: add padding to legends and set them to bold
		Affects: whole site	*/
fieldset legend {
  padding: 0.2em 0.5em;
	font-weight: bold;
	position: absolute;
	top: -.5em;
	left: .5em;
}

/* Use: aligns buttons in a fieldset
		Affects: login page, register page, control panel and quick cart	*/
fieldset.form div.buttons {
	margin-left: 258px;
}
#quickcartcontent div.buttons {
	text-align: center;
}
/* -- */

/* Use: visually lays out forms within fieldsets using padding, sizing and alignment
		Affects: login page, register page, control panel, show product page	*/
/*		fieldset.form {
			width: 400px;
		}*/
		fieldset.form div {
			position: relative;
			padding: 4px;
			text-align: left;
		}
		fieldset.form div label, fieldset.form div.cr p {
			display: block;
			width: 160px;
			padding-right: 10px;
			text-align: right;
			float: left;
			margin-left: 90px;
			_margin-left: 45px;
		}
		fieldset.form div.cr label {
			text-align: left;
			margin-left: 170px;
			width: auto;
			float: none;
		}
/* -- */

/* Use: sets dimensions of main site footers and text alignment
		Affects: whole site	*/
		#footer {
			margin-top: 10px;
			width: 934px;
			height: 30px;
			clear: both;
			text-align: center;
		}
		#footer #footer_links {
			padding-top:8px;
		}
/* -- */

/* Use: sets text alignment for the sub footer which holds the sitemap link
		Affects: whole site	*/
#subfooter {
	text-align: center;
}

/* Use: sets a fixed size for the left hand menu and floats it to the left
		Affects: whole site	*/
#primarynav {
	width: 170px;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Use: sets a fixed size for the right hand menu and floats it to the right
		Affects: whole site	*/
#secondarynav {
	width: 170px;
	float: right;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Use: style the menu items inside the nav bars on the left and right
		Affects: whole site	*/
		.menu { 
			position: relative;
			width: 148px;
			margin-left: 10px;
			margin-right: 10px;
		}
		.menu ul {
			padding-left: 5px;
			list-style-type: none;
			text-align:left;
		}
		.menu li {
			display: block;
			padding: 2px;
			font-weight: normal;
		}
		.menu .highlight {
			font-weight: bold;
		}
		.menu .seperator {
			padding-bottom: 14px;
			margin: 0px;
		}
		.menu h2 {
			display: block;
			padding: 4px;
			width: 140px;
			border: 0px;
			font-size: 12px;
		}
		.menu p {
			display: block;
			padding: 2px;
			margin-left: 5px;
		}
		.menu .footer {
			width: 148px;
			margin-top: 10px;
			font-size: 1px;
		}
/* -- */

/* Use: style the featured product box
		Affects: whole site */
		#featured_product .innermenu {
			text-align: center;
		}
		#featured_product  a {
			display: block;
			padding: 0 5px 0 5px;
		}
		#featured_product .price {
			margin-top: 10px;
			font-size:150%;
			font-weight:bold;
		}
		#featured_product img {
			
		}
/* -- */

/* Use: style the custom box
		Affects: whole site */
		#custom_box .innermenu {
			text-align: left;
			padding:8px;
			overflow:hidden;
			width:115px;
		}

/* -- */

/* Use: style the page navigation bar to center align text and add bold to the current page
		Affects: show category page and search results	*/
		.page_navigation {
			text-align: center;
			padding: 4px;
			clear: both;
		}
		.page_navigation a {
			padding: 5px;
		}
		.page_navigation a.highlight {
			font-weight: bold;
		}
/* -- */

/* Use: set right alignment and padding on the sort options bar
		Affects: show category page and search results	*/
.sort_options {
	text-align: right;
	padding: 4px;
}

/* Use: set dimensions of sub categories and float them left so that they stack nicely on each other
		Affects: show category page (in SMALL view mode)	*/
.subcategory {
	display: block;
	float: left;
	width: 140px;
	height: 90px;
	text-align: center;
}
/* Use: set dimensions of sub categories and float them left so that they stack nicely on each other
		Affects: show category page (in LARGE view mode)	*/
.subcategory.large {
	width:150px;
	height:170px;
	padding:10px;
	margin:8px;
}

/* Use: set size of featured product boxes on front page, and style headers and images within
		Affects: index page	*/
		#innercontent .feature_product {
			display: block;
			float: left;
			width: 165px;
			_width: 162px; /* M$IE Hack*/
			margin: 5px;
			margin-left: 6px;
			margin-bottom: 10px;
			height: 265px;
			text-align: center;
			padding-left: 5px;
			padding-right: 5px;
			padding-top:5px;
		}
		#innercontent .feature_product h3 {
			height: 50px;
		}
/* -- */

/* Use: set styling of product rows, float stock levels, price, and images so they sit inline
		Affects: show category page and search results	*/
.product_row {
	display: block;
	cursor: pointer;
	clear:both;
	min-height: 50px;
	height: auto;
	_height: 50px;
	padding: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
}
.product_row img {
	float: left;
	margin-right: 4px;
}
.product_row .stock_level {
	float: right;
	padding-right: 24px;
}
.product_row .price {
	float: right;
	width: 100px;
}

.product_row #productratings {
	float: left;
}
/* -- */

/* Use: float the product image, options, upgrades, cart functions 
		Affects: show product page	*/
#productimage {
	float: left;
	width: 180px;
	padding: 5px;
	text-align: center;
}
#productoptions {
	float: right;
	padding: 5px;
	width: 340px;
	clear: none;
}
#productupgrades {
	float: right;
	padding: 5px;
	width: 340px;
	clear: none;
}
#productupgrades label {
	display: block;
	width: 70px;
	padding-right: 10px;
	text-align: right;
	float: left;
}
#productupgrades div.cr label {
	text-align: left;
	margin-left: 85px;
	width: auto;
	float: none;
}
#productcartfunctions {
	float: left;
	padding: 5px;
	width: 180px;
	clear: none;
}
#productcartfunctions label, #productoptions label {
	width: 75px;
	display: block;
	float: left;
	text-align: right;
	padding-right: 5px;
}
#productcartfunctions .button, #productcartfunctions .button_over {
	margin-left: 80px;
}
#productoptions select {
	width: 240px;
}
#productoptions input {
	width: 236px;
}
#productdescription {
	padding: 0px;
	height: 230px;
	overflow: auto;
	position: relative;
}
#innerproductdescription {
	width: 520px;
	margin:0;
	padding:0;
}
/* -- */

/* Use: visually layout the product ratings by fixing the width of the rating tags and floating them left
		Affects: show product poage	*/
	.rating {
		width: 255px;
		float: left;
	}
	.rating .tag {
		text-align: right;
		padding-right: 10px;
		width: 120px;
		height: 16px;
		display: block;
		float: left;
	}
/* -- */

/* Use: visually layout the small product ratings by fixing the width of the ratings tag and displaying the ratings below each other
		Affects: show category page	*/
.small_rating .tag {
	float: left;
	width: 160px;
	text-align: right;
	padding-right: 5px;
}
.small_rating img {
	padding-top: 2px;
	padding-bottom: 2px;
}
.small_rating {
	clear: both;
}
/* -- */

/* Use: define a div that clears all floating elements
		Affects: whole site 	*/
.clear_float {
	clear: both;
}

/* Use: style the order stage buttons
		Affects: order stages 1 through to 4	*/
#order_stages {
	text-align: center;
	padding-bottom: 20px;
}
#order_stages .stage {
	display:inline; 
}
#order_stages .current_stage {
	display:inline; 
}
/* -- */

/* Use: define a width for the table of delivery address's - this shouldnt really use a table needs removing at some point
		Affects: checkout stage 1	*/
#delivery_address_table {
	width: 400px;
	border: 0px;
	padding: 5px;
}

/* Use: style a notification bar that is always positioned at the top of the window
		Affects: whole site	*/
#notifier {
	position: fixed;
	_position: absolute;
	top:0; 
	width:100%; 
	left:0; 
	z-index:99;	
	text-align:center; 
	font-weight: bold; 
	padding:0; 
	margin:0;
	padding-top: 4px;
	height: 21px;
	color: #000;
}

/* Use: style the related products to look like a mini category view
		Affects: show product page	*/
.relatedproduct {
	display: block;
	cursor: pointer;
	clear: both;
	min-height: 20px;
	height: auto;
	margin: 4px;
}
.relatedproduct img {
	float: left;
	margin-right: 4px;
}
.relatedproduct .stocklevel {
	float: right;
	padding-right: 24px;
}
.relatedproduct .price {
	float: right;
	width: 60px;
	text-align: right;
}
/* -- */

/* Use: add margin and cursor to the site links to make them look more like active links
		Affects: whole site	*/
.site_links li {
	cursor: pointer;
}
.site_links ul {
	margin-top: 5px;
	margin-right: 5px;
}
/* -- */

/* Use: layout the advanced search page nicely
		Affects: advanced search page	*/
#search {
	width: 400px;
}
#search #keywords {
	float: left;
	width: 200px;
	height: 35px;
}
#search #category {
	float: left;
	width: 200px;
	height: 35px;
}
#search #category select {
	width: 200px;
}
#search #target {
	clear: both;
	float: left;
	width: 400px;
}
#search #pricelimit {
	float: left;
	width: 400px;
	margin-top: 20px;
}
#search #buttons {
	float: left;
	width: 400px;
	margin-top: 20px;
}
/* -- */

/* Use: layout the product thumbnails when in thumbnail view for categories
		Affects: show category page	*/
.product_thumbnail {
	text-align: center;
	width: 165px;
	height: 220px;
	padding: 10px;
	float: left;
	display: block;
	cursor: pointer;
}

.product_thumbnail a {
	display: block;
	height: 35px;
}

#poweredby_footer
{
	position: fixed;
	_position: absolute;
	bottom: 0;
	right: 0;
	height: 114px;
	width: 110px;
	display: none;
}

#featured_product .innermenu {
	min-height: 130px;
	padding-top: 10px;
}

#category_description {
	padding-bottom: 10px;
}