/* 

	WEBSITE STYLESHEET
	FOR: Sharp Retail Systems
	AUTHOR: Dafydd Vaughan
	AUTHOR: VSI-Thinking - +44(0)2920 331188
	DATE: 29/12/2005

	STYLESHEET DIV LAYOUT

	this layout is important to ensure that the layout works correctly in all browsers

	pageholder {
		pageheader {}
		contentholder {
			subnav {}
			content {}
			mainnav {}
			spacer {}
		}
	}
	footer {
		footerlinks {}
		copyright {}
	}

	pageholder contains everything except the footer
	content holder contains all content elements (navigation and content)
	spacer ensures that the footer is displaced downwards if content is longer than screen height

*/



/* 
	NON-LAYOUT STYLES
*/

html, body {
	height: 100%;
	margin: 0px;
	background: #FFFFFF;
}
body, p, td {
	font-family: Arial, Verdana, sans serif;
	font-size: small;
	color: #000000;
}
h1 {
	color: #666666;
	font-size: large;
	margin-top: 0px;
}
h2 {
	color: #CC3300;
	font-size: medium;
}
h3 {
	font-size: small;
	width: 100%;
	color: #FFFFFF;
	background: #CC3333;
}
h4 {
	font-size: small;
}

a {
	color: #666666;
	text-decoration: none;
}
a:hover {
	color: #CC3333;
	text-decoration: underline;
}
a img {
	border: 0px;
}
table.blacktable {
	border: #000000 1px solid;
	text-align: center;
	padding: 0px;
	float: middle;
}
table.blacktable th {
	background: #000000;
	color: #FFFFFF;
	font-size: medium;
	padding: 5px;
}
table.blacktable td {
	color: #666666;
	font-size: 13px;
	padding: 5px;
}
table.blacktable td a {
	color: #666666;
	text-decoration: none;
}
table.blacktable td a:hover {
	color: #CC3333;
	text-decoration: none;
}
table.blacktable td.smallertext {
	font-size: small;
}
ul li {
	margin-bottom: 15px;
}
.red {
	color: #CC3333;
	font-size: medium;
	font-style: italic;
}
.othertype {
	color: #FC0505;
	font-size: x-small;
}
.retail {
	color: #FF6600;
	font-size: x-small;
}
.cafe {
	color: #339933;
	font-size: x-small;
}
.hospitality {
	color: #0099CC;
	font-size: x-small;
}
.sophisticated {
	color: #CC33CC;
	font-size: x-small;
}
table.producttable {
	width: 240px;
	border: #000000 1px solid;
	text-align: left;
	padding: 0px;
}
table.producttable td.heading {
	background: #CC3333 url("../pics/tiny_arrow.gif") no-repeat right;
	color: #FFFFFF;
	font-weight: bold;
}
table.producttable td.heading a {
	color: #FFFFFF;
	text-decoration: none;
}
table.producttable td.heading a:hover {
	color: #E7E7E7;
	text-decoration: none;
}
table.producttable td.prodtext {
	background: #E7E7E7;
	padding: 3px;
}
table.producttable td.prodtext a:hover {
	text-decoration: none;
}
table.producttable td.prodimage {
	padding: 0px;
}


table.productinfo td {
	vertical-align: top;
}
table.productinfo td.features {
	background: #CC3333;
	color: #FFFFFF;
	padding: 5px;
	font-weight: bold;
}
table.productinfo td.optional {
	background: #666666;
	color: #FFFFFF;
	padding: 5px;
	font-weight: bold;
}
table.productinfo td.featuresitem {
	border-bottom: #CC3333 1px dotted;
	padding-left: 5px;
	padding-right: 5px;
}
table.productinfo td.optionalitem {
	border-bottom: #666666 1px dotted;
	padding-left: 5px;
	padding-right: 5px;
}
table.productinfo td span.standard {
	color: #CC3333;
	font-weight: bold;
	border-right: #CC3333 2px solid;
	padding-right: 5px;
}
table.productinfo td span.standarditem {
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border-right: #CC3333 2px dotted;
}

/*
	<-- START PAGEHOLDER DIV
*/


div#pageholder {
	min-height: 100%;
	text-align: left;
	width: 770px;
	padding: 0px;
	margin: 0 auto -65px auto;
	background: #FFFFFF url("../pics/subnav_bg.gif") right repeat-y;
	border-left: #CC3333 1px solid;
	border-bottom: #CC3333 1px solid;
}
* html div#pageholder {
	height:100%;
}

/*
	<-- START PAGEHEADER DIV
*/
div#pageheader {
	width:770px;
	height: 120px;
	background: #FFFFFF;
	text-align: right;
}
/*
	END PAGEHEADER DIV -->
*/



/*
	<-- START CONTENTHOLDER DIV
*/
div#contentholder {
    margin-top: 5px;
    width:770px;
    background: transparent;
    padding-bottom: 45px;
}


/*
	<-- START SUBNAV DIV
*/
div#contentholder div#subnav {
	width: 150px;
	background: transparent;
	float: right;
}
div#contentholder div#subnav div.subitem {
	width: 135px;
	height: 15px;
	font-size: x-small;
	background: url("../pics/tiny_arrow.gif") no-repeat right;
	border-bottom: #FFFFFF 1px solid;
	color: #FFFFFF;
	padding: 5px;
	margin-left: 2px;
}
div#contentholder div#subnav div.subitem a,div#contentholder div#subnav div.subitem a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
div#contentholder div#subnav div.subhighlight {
	background: #CC0000 url("../pics/tiny_arrow.gif") no-repeat right;
}
/*
	END SUBNAV DIV -->
*/


/*
	<-- START CONTENT DIV
*/
div#contentholder div#content{
	float: right;
	width: 490px;
	padding: 5px;
}
/*
	END CONTENT DIV -->
*/


/*
	<-- START MAINNAV DIV
*/
div#contentholder div#mainnav {
	width: 116px;
	height: 400px;
	margin-left: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
}
div#contentholder div#mainnav div.menuitem {
	width: 106px;
	height: 22px;
	background: #000000;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	padding: 1px;
	margin-left: 4px;
	background: #CC3333;
	border-bottom: 1px solid #000000;
}
div#contentholder div#mainnav div.menuhighlight {
	width: 106px;
	height: 22px;
	background: #FF3333;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	padding: 1px;
	margin-left: 4px;
	cursor: pointer;
	border-bottom: 1px solid #000000;
}
div#contentholder div#mainnav div a, div#mainnav div a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
/*
	END MAINNAV DIV -->
*/


/*
	<-- START SPACER DIV
*/
div#contentholder div.spacer {
	clear: both;
	margin-bottom: 10px;
}
/*
	END SPACER DIV -->
*/

/*
	END CONTENTHOLDER DIV -->
*/

/*
	END PAGEHOLDER DIV -->
*/




/*
	<-- START FOOTER DIV
*/

div#footer {
	position: relative;
	margin: 0 auto;
	width: 771px;
	color: #CC3333;
}
div#footer a {
	color: #CC3333;
	text-decoration: none;
}
div#footer a:hover {
	text-decoration: underline;
}

/*
	<-- START FOOTERLINKS DIV
*/
div#footer div#footerlinks {
	position: relative;
	width: 490px;
	left: 12px;
	font-size: small;
}
/*
	END FOOTERLINKS DIV -->
*/


/*
	<-- START COPYRIGHT DIV
*/
div#footer p {
	position: relative;
	font-size: x-small;
}
/*
	END COPYRIGHT DIV -->
*/

/*
	END FOOTER DIV -->
*/