/* These are the core CSS controls */

body {
	margin: 0px;
	padding: 0px;
	background-color:#FFC3AC;
	font-family:Arial, Helvetica, sans-serif;
	text-align: left;
	background-color: #FFFFFF;
	background-image: url(../images/background.jpg);
	background-repeat: repeat-x;
}

A:link {
	color: #1B75BC;
	text-decoration: none;
}

A:visited {
	color: #1B75BC;
	text-decoration: none;
}

A:active {
	color: #1B75BC;
	text-decoration: none;
}

A:hover {
	color: #ED1C24;
	text-decoration: none;
}


/* This is a 2 column fixed width layout with both header and footer for all content pages  */


/* The wrapper holds the nav and content divs together in the center */
#wrapper
{
	position:relative;	
	width: 760px;
	text-align:left;
	padding: 40px 0 0 0;
	background-image:url(../images/header.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

#homebanner
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 115px 0 0 0;
	background-image:url(../images/bluebanner.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

#productbanner
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 115px 0 0 0;
	background-image:url(../images/aquabanner.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

#oursitetbanner
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 115px 0 0 0;
	background-image:url(../images/orangebanner.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

#aboutusbanner
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 115px 0 0 0;
	background-image:url(../images/pinkbanner.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

#contactbanner
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 115px 0 0 0;
	background-image:url(../images/purplebanner.jpg);
	background-repeat: no-repeat;
	background-position:left top;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

.contactColourStyle1 
{
	color: #FF0000;
}

.contactColourStyle2 
{
	color: #812991
}

/* Define all styles to be included in the top navigation column here*/
#topnavigation
{
	position:relative;
	width: 760px;
	text-align:left;
	padding: 0 0 0 0;
	margin-top: 0px auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom: 0px;
}

/* Define all styles required for the content area here*/

#content
{
	position:relative;
	width:760px;
	float: left;
	background-color: white;
	text-align: left;
	margin-bottom: 20px;
	margin-top: 0px;
	padding: 0;
}
.contentbullet {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	list-style-image: url((URL));
	line-height: 18px;
	margin: 0px;
	padding: 0px;
}


#content p
{
	font-size:12px;
	color:#333333;
	line-height:15px;
	padding-left:10px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-bottom: 5px;
	padding-right: 15px;
}

.contenthome 
{
	font-size:22px;
	font-weight:bold;
	color:#0679B8;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.contentproduct 
{
	font-size:22px;
	font-weight:bold;
	color:#00A884;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.contentoursite 
{
	font-size:22px;
	font-weight:bold;
	color:#F35727;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.contentaboutus
{
	font-size:22px;
	font-weight:bold;
	color:#EA0878;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.contentcontactus
{
	font-size:22px;
	font-weight:bold;
	color:#812991;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.contentthanks
{
	font-size:22px;
	font-weight:bold;
	color:#00DF00;
	padding-top:0px;
	padding-left:0px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

#content h1
{
	font-size:12px;
	font-weight:bold;
	color:#666666;
	padding-left:10px;
	padding-right: 15px;
	font-family: Arial, Helvetica, sans-serif;
}

#content h2
{
	font-size:12px;
	font-weight:bolder;
	color:#000000;
	padding-top:0px;
	padding-left:10px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 10px;
}

#content h3
{
	font-size:12px;
	font-weight:bold;
	color:#331C26;
	padding-left:10px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 10px;
}

#content h4
{
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 0px;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 3px;
}

#content a:link,  #content a:visited {
	font-size:12px;
	color:#1B75BC;	
}

#content a:hover {
	font-size:12px;
	color:#ED1C24;
	}

/* Define all styles required for the footer area here*/

#footer {
	clear: both;
	width: 760px;
	margin:0px;
	padding: 25px 0 0 0;
	background-image:url(../images/copyright.jpg);
	background-repeat: no-repeat;
	text-align: center;
	vertical-align:middle;

}

p
{
	font-size:12px;
	color:#333333;
	line-height:15px;
	padding-left:10px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-bottom: 5px;
	padding-right: 15px;
}

#clear {
	clear: both;
}

TD.smaller {
	font-size: 11px;
	font-family : Verdana;
	color : #000000;
}
.contenttable {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: none;
	
}


.smaller {
	font-size: 9px;
	font-family : Arial, Helvetica, sans-serif;
	color : #000000;
	padding-left:10px;
	margin: 0px;
}

HR {
	color : #3399CC;
}
/*  Category Layout CSS Tools
P.catname: The alignment of the category name
P.catdesc: The alignment of the category description
IMG.catimage: The properties of the category image
TD.catimage: The alignment of the category image
TD.catname: The alignment of the category name
TD:catnavigation: The alignment of the top category navigation
P.navdesc: The properties of the text "View all products in all categories". 
div.catdiscounts: The properties of the discounts text on the category pages. 
*/

.indexStyle 
{
	color: #0679B8;
}

.indexFontStyle1 
{
	font-size: 16px;
}

.indexFontStyle2 
{
	font-size: 18px;
}

P.catname {
text-align: center;
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

P.catdesc {
margin-top: 0px;
margin-bottom: 4px;
vertical-align:top;
}

IMG.catimage {
border:1px;
border-thickness: 1px;
border-color: #000;
border-style: solid;
vertical-align:top;
}

TD.catimage {
vertical-align:top;
}

TD.catname {
vertical-align:top;
text-align: center;
}

TD.catnavigation {
vertical-align:middle;
text-align: left;
}


/*  Style up the Mini Cart*/
TD.mincart {
font-size: 10px;
font-family : Verdana;
}

P.mincart {
font-size: 10px;
font-family : Verdana;
}

/*All the following controls relate to styling the products.php page*/
/*  Change the look of prices*/
SPAN.price {
COLOR: #FF0000;
}
/*  Price ex GST*/
#pricediv0{
	color: Black;
	font-weight: bold;
}

/*  Price inc GST*/
#pricedivti0{
	color: Black;
	font-weight: bold;
}

/*  Change the format of product options*/
SELECT.prodoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

/*  If using stock management you can change the colour of out of stock products*/
OPTION.oostock {
color : #A0A0A0;
}
/*  Change the text that introduces product options*/
SPAN.prodoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

SPAN.detailoption {
font-size: 11px;
font-family : Verdana;
color : #FF0000;
}

/*  Change the look of the breadcrumb trail nav at top of page*/
td.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

P.prodnavigation {
font-size: 11px;
font-family : Verdana;
color : #A0A0A0;
}

/*  All the controls below relate to the proddetail.php page*/

/*div.detailid: The properties of the text "Product ID"
div.detailname: The properties of the product name on the product detail page
div.detaildiscounts: The properties of the discounts text for the product detail page
td.detailimage: The alignment of the product image on the product detail page
img.prodimage: The properties of the product image
div.detaildescription: The properties of the text in the long product description
div.detailoptions: The properties of the product options on the product detail page
div.detailprice: The properties of the price on the product detail page
div.detailcurrency: The properties of the alternative currencies on the product detail page*/


/*  change the look of the tables for search.php and orderstatus.php*/
TABLE.cobtbl{
background-color: #FF0000;
}

TD.cobhl{
background-color: #FFC42B;
}

TD.cobll{
background-color: #FFF7B8;
color : #666666;
}
/*  this example would make the page numbers show as Verdana size 12*/
P.pagenums {
font-size: 12px;
font-family : Verdana;
}
/*  this allows the current page number to be different eg red*/
SPAN.currpage {
color: #FF0000;
font-weight: bold;
}
table {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
text-align: left;
color: #000;
}

/*  
table.cpd - outer table background color which forms the outlines of the cells
td.cpdll - cell background
td.cpdhl - header background
div.cpdhlid - product id header
div.cpdhlimage - product image header
div.cpdhlname - product name header
div.cpdhldescription - product description header
div.cpdhldiscounts - discounts header
div.cpdhllistprice - list price header
div.cpdhlprice - price header
div.cpdhlpriceinctax - price including tax header
div.cpdhlinstock - number in stock header
div.cpdhloptions - product options header
div.cpdhlquantity - quantity box header
div.cpdhlbuy - buy button header
PRODBODY3 CSS CONTROLS
div.prod3id - product id properties
div.prod3name - product name properties
div.prod3discounts - discounts properties
div.prod3description - product description properties
div.prod3listprice - list price properties
div.prod3price - price properties
div.prod3pricetaxinc - price including tax properties
div.prod3instock - number in stock properties
div.prod3quant - quantity box properties
div.prod3buy - buy button properties

*/


.productOverview {float: left; width: 200px; height: 200px; margin-right: 45px; margin-bottom: 40px; display: inline;}
.productOverview h2 {font-size: 12px; display: block;	margin: 1px 0px 0px;	padding: 2px; text-align:center;	text-decoration: none; line-height: 16px;	font-weight: bold;}
.productOverview a {text-decoration: none; display: block;}
.productOverview .cattext {font-size: 18px; line-height: 20px; display:inline; position:absolute; text-align:center; margin-top: -30px; color: #000000; font-weight: bold; width: 200px;}
.productOverview .cattext a {text-decoration: none; display: block; color:#000000}
.productOverview .cattext a:hover {text-decoration: underline; display: block; color:#000000}


.oursites {float: left; border:solid 1px #E1DFF0; width: 200px; height: 200px; padding-bottom:20px; display: inline; margin: 20px 20px 0 0;}
.oursites h2 {font-size: 12px; display: block;	margin: 1px 0px 0px;	padding: 2px; text-align:center;	text-decoration: none; line-height: 16px;	font-weight: bold;}
.oursites a {text-decoration: none; display: block;}
.oursites .cattext {font-size: 18px; line-height: 20px; display:inline; position:absolute; text-align:center; margin-top: -30px; color: #000000; font-weight: bold; width: 400px;}
.oursites .cattext a {text-decoration: none; display: block; color:#000000}
.oursites .cattext a:hover {text-decoration: underline; display: block; color:#000000}


