/* Created November 2009 for Satnav Systems by Greg Wong */
/* CSS Reset - Start */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote	{
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: normal;
	font-family: arial,helvetica,verdana,sans-serif;
	}

ol	{
	margin-left: 1.4em;
	list-style: decimal;
	}

ul	{
	margin-left: 1.4em;
	list-style: square;
	}

img	{
	border: 0;
	position: relative;
	}

a	{
	text-decoration: none;
	color: #444;
	}

a:hover	{
	color: #777;
	}

/* CSS Reset - End */


/* The banner fits across the whole width of the window screen */

#fullbanner {
	position:relative;
	top: 0;
	background-image: url(../images/header-tile.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	width: 100%;
	height: 111px;
	padding-left: 0;
	padding-right: 0;	
	}

#banner	{
	position: relative;
	top: 0;
	width: 950px;
	height: 111px;
	margin-left: auto;
	margin-right: auto;
	}

#logo	{
	position: absolute;
	top: 18px;
	left: 20px;
	background-image: url(../images/logo.gif);
	background-repeat: no-repeat;
	width: 234px;
	height: 73px;
	}

/* End */

/* Navigation bar */

ul.nav	{
	position: absolute;
	right: 0;
	list-style: none;
	margin-left: 0;
	color: #fff;
	font-family: arial,verdana,sans-serif;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	padding-top: 84px;
	}

ul.nav li {
	display: inline;
	margin-right: 15px;
	}

ul.nav a {
	text-decoration: none;
	color: #ffffff;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 1px;
	margin-right: 1px;
	}

ul.nav a:hover {
	color: #777;
	}
	
.here	{
	background-image: url(../images/activenav-tile.jpg);
	background-repeat: repeat-x;
	background-position: bottom left;
	height: 111px;
	padding-top: 80px;
	padding-bottom: 12px;
	padding-left: 8px;
	padding-right: 8px;
	border-left: solid 1px #333;
	border-right: solid 1px #333;
	}

/* End */

/* Index Page formatting */
#note	{
	position: relative;
	background-image: url(../images/black65tile.png);
	width: 420px;
	padding: 15px;
	top: 20px;
	left: 20px;
	}

#note p {
	color: #eeeeee;
	font-size: 0.8em;
	letter-spacing: 0.02em;
	}

#message {
	position: relative;
	top: 10px;
	border: solid 0px red;
	list-style:none;
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	padding: 10px;
	}

#message h1 {
	letter-spacing: 0.1em;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 5px;
	color: #444444;
	}

#message p {
	color: #444444;
	font-size: 0.8em;
	}

	/* Featured Product box positioning and formatting */

/* IE hack below */
html>body .prod1 a { width:auto; }
html>body .prod2 a { width:auto; }
html>body .prod3 a { width:auto; }

.prod1 {
	position: relative;
	height: 111px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 10px;	
	}

.prod1 a {
	display: block;
	width: 100%:
	}

.prod2	{
	position: absolute;
	top: 33px;
	left: 335px;
	font-size: 0.7em;
	height: 111px;
	width: 300px;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 10px;
	}

.prod2 a {
	display: block;
	width: 100%:
	}

.prod3	{
	position: absolute;
	top: 33px;
	left: 660px;
	height: 111px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 10px;
	}

.prod3 a {
	display: block;
	width: 100%:
	}

.fpimg	{
	border: 1px solid #ccccff;
	float: left;
	margin-top: 15px;
	margin-left: 5px;
	margin-right: 8px;
	}

.fptitle {
	padding-top: 12px;
	font-weight: bold;
	font-size: 1.1em;
	}

.prodtext {
	position: relative;
	right: 0;
	margin-top: 15px;
	margin-right: 5px;
	font-size: 0.9em;
	}

	/* Index page image text */

#intro	{
	position: relative;
	top: 0;
	background-image: url(../images/intro-image.jpg); // change this image to change home pic
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	height: 254px;
	margin-top: 5px;
	}
/* End */

/* Formatting for About Us, Enquiry, Contact Us, Product detail and Terms & Conditions pages */

.wrapper1 {
	position: relative;
	top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	margin-top: 5px;
	border: solid 0px red;
	}

.pagecontent {
	position: relative;
	top: 0;
	width: 620px;
	height: 550px;
	overflow: none;
	border: solid 0px red;
	}

.pagecontent h1 {
	color: #fff;
	background-image: url(../images/title-tile.jpg);
	background-repeat: repeat-x;
	height: 19px;
	padding-left: 5px;
	padding-top: 3px;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	line-height: 0.9em;
	}

.pagecontent h2 {
	padding-top: 10px;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	font-weight: bold;
	}

.pagecontent p {
	font-size: 0.8em;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-right: 5px;
	line-height: 1.2em;	
	}

.address {
	list-style: none;
	padding-top: 20px;
	padding-bottom: 20px;
	letter-spacing: 0.1em;
	}

ul.other li {
	list-style: none;
	padding-top: 10px;
	padding-bottom: 0;
	line-height: 0.7em;
	font-size: 0.8em;
	}

.enquiryform {
	font-size: 0.8em;
	text-align: right;
	}

.enquiryform td {
	padding-bottom: 10px;
	padding-left: 10px;
	}

input[type="text"] {
	width: 20em;
	text-align: left;
	}

textarea {
	width: 100%;
	height: 4em;
	}



	/* Product detail pages */

.wrapper2 {
	width: 620px;
	}

.breadcrumb {
	position: relative;
	width: 100%;
	font-size: 0.5em;
	padding-top: 5px;
	padding-bottom: 5px;
	letter-spacing: 0.25em;
	}

.breadcrumb a {
	text-decoration: underline;
	}	

.figure {
	width: 150px;
	position: relative;
	padding-top: 5px;
	margin-left: 5px;
	float: right;
	text-align: center;
	font-size: 0.8em;
	border: solid 0px orange;
	z-index: 1;
	}

.figure a {
	color: gray;
	text-decoration: none;
	}

.figure a:hover {
	color: #777;
	}

.productbrief {
	position: relative;
	border: solid 0px green;
	right: 0px;
	width: 100%;
	}

.productbrief p {
	font-size: 0.8em;
	}

.prodbrieftext {
	position: relative;
	padding-left: 5px;
	}

.addimage {
	margin-top: 10px;
	margin-right: 10px;
	border: solid 2px #ccc;
	}

/* Formatting for cluetip */

.jt	{
	color: #999900;
	text-decoration: underline;
	}


/* the css for content is in accordion.css */

.content h2 {
	font-size: 0.8em;
	color: #777;
	padding-bottom: 5px;
	}

.content a {
	position: relative;
	}

.phonelist {
	width: 100%;
	border: solid 1px green;
	font-size: 0.8em;
	font-weight: normal;
	}

.phonelist th {
	text-align: left;
	}

.phoneleft {
	width: 25%;
	}

.featprod {
	position: relative;
	height: 373px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/related-tile.gif);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 20px;
	}

.featprod ul {
	margin-top: 10px;
	list-style: none;
	}

.featprod li {
	padding-bottom: 5px;
	}

/* End */

/* Formatting for Products page */

td p	{
	padding-top: 12px;
	padding-left: 2px;
	}

th p	{
	color: #fff;
	padding-left: 7px;
	padding-top: 0px;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	}

.selectlist {
	padding-bottom: 5px;
	}

.submit	{
	padding-top: 12px;
	text-align: right;
	}

.audi	{
	width: 309px;
	height: 84px;
	vertical-align: top;
	text-align: left;
	padding-top: -5px;
	background-image: url(../images/audi.jpg);
	background-repeat: no-repeat;
	}

.vw	{
	width: 309px;
	height: 84px;
	vertical-align: top;
	text-align: left;
	padding-top: -5px;
	background-image: url(../images/vw.jpg);
	background-repeat: no-repeat;
	}

.popcolumn {
	width: 300px;
	vertical-align: top;
	border: solid 0px green;
	position: absolute;
	right: 0;
	top: 0;
	}

.popcolumn h1 {
	padding-bottom: 10px;
	letter-spacing: 0.1em;
	}

.construction {
	position: absolute;
	border: solid 8px #ddd;
	width: 560px;
	padding: 20px;
	top: 300px;
	}

 .construction h3 {
	font-weight: bold;
	}

.construction p {
	font-size: 0.8em;
	}

.selectbar {
	border: solid 1px black;
	width: 309px;
	color: #666;
	}

.popprod1 {
	position: relative;
	height: 111px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 20px;
	}

.popprod1 ul {
	margin-top: 10px;
	list-style: none;
	}

.popprod1 li {
	padding-bottom: 5px;
	}

.popprod2 {
	height: 111px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 20px;
	}

.popprod3 {
	height: 111px;
	width: 300px;
	font-size: 0.7em;
	background-image: url(../images/featured-tile.jpg);
	background-repeat: repeat-x;
	border-bottom: #6699cc solid 0px;
	overflow: hidden;
	border: solid 1px #ccccff;
	margin-bottom: 20px;
	}

input[type="button"] {
	background-image: url(../images/title-tile.jpg);
	background-repeat: repeat-x;
	border: 0;
	color: #fff;
	font-size: 0.7em;
	}

/* End */	

/* Footer full width bar and navigation positioning and formatting */

#fullfooter {
	position: fixed;
	bottom: 0px;
	background-image: url(../images/footer-tile.jpg);
	background-repeat: repeat-x;
	width: 100%;
	height: 28px;
	padding-left: 0;
	padding-right: 0;
	}
/* below is the IE6 hack to fix the footer bar to the bottom of the window */
* html #fullfooter {
	position: absolute;
	}

#footer	{
	position: relative;
	width: 950px;
	padding-top: 6px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.8em;
	font-family: arial,verdana,sans-serif;
	color: #ffffff;
	}

ul.foot	{
	position: absolute;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	letter-spacing: 0.1em;
	}

ul.foot li {
	display: inline;
	margin-right: 25px;
	}

ul.foot a {
	text-decoration: none;
	color: #ffffff;	
	}

ul.foot a:hover {
	color: #777;
	}

.copyright {
	position: absolute;
	right: 0;
	color: #fff;
	padding-right: 20px;
	}

/* Glossary */

.glosfloat {
	float: left;
	padding: 0 20px 0 0;
	}

/* End */