/* CSS Document */

/*   

You can't have a fixed px height image and they try to match it by absolutely placing an 
em height on the footer. ems are rounded to the nearest pixel and will never be exact and there will 
be variations between browsers due to rounding errors.

This is ok when you are matching ems with ems because , for most case, they will scale together. 
However you can't set an em height and expect it to match a pixel height such as your image.

*/ 
body {
 text-align:center;
 background-color:#999;
 }
 
.imgborder{
border: 5px solid #C0CDDB;
}

 
a:link {
color:#15375E;
} 

a:visited {
color:#3366CC;
 }
 
a:hover {
color:#59718D;
 }
 
 
#main {
 width:800px;
 text-align:left;
 margin:auto;
 position:relative; 
 border: 1px solid #999999;
 background-color: #fff;
 }
 
 /* Fix 1: Setting the parent element's position to 'relative' 
makes it the containing block for its absolutely positioned children (in this instance: navigation ul)
but then put it in main (which it is now) so that the navigation menu centres & moves like the rest of site when 
change browser size!  could also have fixed display block!*/

#header {
 background-color: #fff;
 border-bottom: 10px solid #15375E;
 height: 96px;
 background:url('images/Headerleft.jpg') no-repeat left top;
 text-align:right;
 width: 800px
}

.heading {
color: #DF6B0D;
font-size: 15px;
font-weight:bolder;
background-color: COCDDB;
width: 200px;
}

h1 {
	color: #15375E;
	font: 14px Arial, Helvetica, sans-serif;
	font-weight: bolder;
	background-color: #dde2e8;
}

h2 {
color: #15375E;
font-size: 15px;
font-weight:bolder;
background-color: #D1D7DF;
}

.headingsmall {
color: #F2801F;
font-size: 13px;
font-weight:bolder;
 padding-right: 20px;
}


#content{
float:left;
width:250px;
padding-left: 20px; /*to put padding to left of text*/ 
padding-top: 18px; 
}

#contentpages{
float:left;
width:600px;
padding-left: 20px; /*to put padding to left of text*/ 
padding-top: 18px; 
}

#contentpages p{
	padding-right: 10px; /*to put padding to right of text*/;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
/* em is the space between the text lines  -- tok out coz im using heights in my nav menu.*/margin-top: 0;
	text-align: left;
	color: #15375E;
}
  
#contentpages label{
  color: #15375E;
font: 14px Arial, Helvetica, sans-serif;
font-weight:bolder;
}


#contentpagesCT{
float:left;
width:550px;
padding-left: 20px; /*to put padding to left of text*/ 
padding-top: 18px; 
}

#contentpagesCT p{  
padding-right: 10px; /*to put padding to right of text*/  
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif; /* em is the space between the text lines  -- tok out coz im using heights in my nav menu.*/
    margin-top: 0;
    text-align: left;
	color:#333333;
  }
  
#contentpagesCT label{
  color: #15375E;
font: 14px Arial, Helvetica, sans-serif;
font-weight:bolder;
}


#contentpagesac{
	border-left: hidden;
	float: left;
	width: 600px;
	padding-left: 20px; /*to put padding to left of text*/;
	padding-top: 18px;
	border-right-style: none;
	border-left-style: none;
}

#contentpagesac p{
	padding-right: 10px; /*to put padding to right of text*/;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
/* em is the space between the text lines  -- tok out coz im using heights in my nav menu.*/margin-top: 0;
	text-align: justify;
	color: #15375E;
}



#rightsidepages{
float:right;
margin-right: 8px;
background-color:#fff;
width: 150px;
border-left: 0px dashed #666;
padding-top: 20px;
text-align:left;
}
  
#rightsidepagesCT{
float:right;
margin-right: 8px;
background-color:#fff;
width: 300px;
border-left: 0px dashed #666;
padding-top: 20px;
text-align:left;
}  
  
#rightsidepagesCT p{  
padding-right: 10px; /*to put padding to right of text*/  
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif; /* em is the space between the text lines  -- tok out coz im using heights in my nav menu.*/
    margin-top: 0;
    text-align: left;
	color:#333333;
  }  

#content p{  
padding-right: 10px; /*to put padding to right of text*/  
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif; /* em is the space between the text lines  -- tok out coz im using heights in my nav menu.*/
    margin-top: 0;
    text-align: left;
	color:#333333;
  }

#rightside{
float:right;
background-color:#fff;
width: 360px;
border-left: 0px dashed #666;
padding-top: 20px;
text-align:left;
}

.floatright{
float:right;
margin-right: 10px;
}



/*   comments  */

#leftside{
float:left;
background-color:#59718D;
width: 149px;
padding-top: 20px;
padding-bottom: 20px;
}

ul#navigation{
	padding:0;
	margin:0;
	list-style:none;
}

#navigation li{
	width:143px;/*size of image*/
	height:33px;/* size of image*/
	padding-bottom: 9px;
}

#navigation li.Cartrack {background:url('images/Navtrack2.jpg') no-repeat left top;}/* this holds the rollover state of the image1*/
#navigation li.Caraudio {background: url('images/navaudio4.jpg') no-repeat left top;}/* this holds the rollover state of the image2*/
#navigation li.Aux {background:url('images/navaux2.jpg') no-repeat left top;}
#navigation li.Carsecure {background:url('images/Navsecurity2.jpg') no-repeat left top;}/* this holds the rollover state of the image3*/
#navigation li.Bluetooth {background:url('images/NavCell2.jpg') no-repeat left top;}
#navigation li.Windowfilm {background:url('images/NavWindow2.jpg') no-repeat left top;}
#navigation li.Aircon {background:url('images/NavAC2.jpg') no-repeat left top;}
#navigation li.Contact {background:url('images/NavContact2.jpg') no-repeat left top;}
#navigation li.Home {background:url('images/nav_home2.jpg') no-repeat left top;}
#navigation li.DSTV {background:url('images/navTVstreaming1.jpg') no-repeat left top;}
#navigation li.PA {background:url('images/nav pa2.jpg') no-repeat left top;}
#navigation li.AudioVideo {background:url('images/nav av1.jpg') no-repeat left top;}
#navigation li.GPSlog {background:url('images/NAVgpslogbook2.jpg') no-repeat left top;}
#navigation li.CruiseControl {background:url('images/nav cruisecontrol2.jpg') no-repeat left top;}
#navigation li.MarineAudio {background:url('images/nav maraudio2.jpg') no-repeat left top;}
#navigation li.Android {background:url('images/navandroid1.jpg') no-repeat left top;}
#navigation li.Revcam {background:url('images/navrevcam2.jpg') no-repeat left top;}
#navigation li.TVinstall {background:url('images/navTVinstallation1.jpg') no-repeat left top;}
#navigation li.TVwallmount {background:url('images/navTVwallmount1.jpg') no-repeat left top;}
#navigation li.Wifiextend {background:url('images/navWifiextend1.jpg') no-repeat left top;}
#navigation li.Routerinstall {background:url('images/navrouterinstall1.jpg') no-repeat left top;}
#navigation li.PortableUPS {background:url('images/navPortableups1.jpg') no-repeat left top;}
#navigation li.CCTV {background:url('images/navCCTV1.jpg') no-repeat left top;}







#navigation a{
	display:block;
	width:143px;/*size of image*/
	height:33px;/* size of image*/
	text-decoration:none;
}
#navigation li.Home a{background:url('images/nav_home.jpg') no-repeat left top;}
#navigation li.Cartrack a{background:url('images/Navtrack.jpg') no-repeat left top;}/* this holds the normal state of the image1*/
#navigation li.Caraudio a{background: url('images/navaudio3.jpg') no-repeat left top;}/* this holds the normal state of the image2*/
#navigation li.Aux a{background:url('images/navaux1.jpg') no-repeat left top;}/* this holds the normal state of the image5*/
#navigation li.Android a{background:url('images/navandroid.jpg') no-repeat left top;}
#navigation li.Carsecure a{background:url('images/Navsecurity.jpg') no-repeat left top;}/* this holds the normal state of the image3*/
#navigation li.Bluetooth a{background:url('images/NavCell.jpg') no-repeat left top;}/* this holds the normal state of the image4*/
#navigation li.Windowfilm a{background:url('images/NavWindow.jpg') no-repeat left top;}/* this holds the normal state of the image5*/
#navigation li.Aircon a{background:url('images/NavAC.jpg') no-repeat left top;}/* this holds the normal state of the image6*/
#navigation li.PA a{background:url('images/nav pa1.jpg') no-repeat left top;}
#navigation li.GPSlog a{background:url('images/NAVgpslogbook1.jpg') no-repeat left top;}
#navigation li.CruiseControl a{background:url('images/nav cruisecontrol1.jpg') no-repeat left top;}
#navigation li.MarineAudio a{background:url('images/nav maraudio1.jpg') no-repeat left top;}
#navigation li.Revcam a{background:url('images/navrevcam1.jpg') no-repeat left top;}
#navigation li.AudioVideo a{background:url('images/nav av.jpg') no-repeat left top;}
#navigation li.DSTV a{background:url('images/navTVstreaming.jpg') no-repeat left top;}
#navigation li.TVinstall a{background:url('images/navTVinstallation.jpg') no-repeat left top;}
#navigation li.TVwallmount a{background:url('images/navTVwallmount.jpg') no-repeat left top;}
#navigation li.Wifiextend a{background:url('images/navWifiextend.jpg') no-repeat left top;}
#navigation li.Routerinstall a{background:url('images/navrouterinstall.jpg') no-repeat left top;}
#navigation li.PortableUPS a{background:url('images/navPortableups.jpg') no-repeat left top;}
#navigation li.CCTV a{background:url('images/navCCTV.jpg') no-repeat left top;}
#navigation li.Contact a{background:url('images/NavContact.jpg') no-repeat left top;}/* this holds the normal state of the image7*/



ul#navigation a:hover{background:transparent}
/* on hover we just hide the anchor and let the image underneath show through. 
This makes for pre-loaded rolovers unlike changing the image on hover which is slow.*/

/* the above code assumes a different image for each anchor but is much simpler if only one image is used as the individual classes are not necessary. */
ul#navigation{text-indent:-999em}/* hide text*/

/* The code below is an ie5 bug with text indent - remove if you don't care about ie5 */
* html ul#navigation{text-indent:0;te\xt-indent:-999em}
* html ul#navigation span{text-indent:-999em;}




#footer{ /*   PSITE taken absolute out. */
 color:#363636;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 12px;
 margin-top:1px;
 height: 35px;
 width: 796px;
 clear:both;
}


/* mac hide \*/
/** html #navigation li a {height:1%} */
/*to fix gaps in list navigation so shows like MOzilla is 1px inbetween, could also have fixed display block!*/
/*There is no need to add a hack when the anchor already has a height defined as you are just over-riding it.*/

/* end hide */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix { /*Used in MAIN div - so background colour shows in FireFox .. <div id="main" class="clearfix">*/
    display:inline-block;
}

 /* mac hide \*/
    * html .clearfix {height: 1%;}
      .clearfix {display: block;}
 /* End hide */


/* Styles added by Raoul */
#header h1 span
{
  display: none;
}

.form-item
{
  margin-bottom: 0.5em;
}

.form-buttons
{
  margin-top: 0.5em;
}

.form-item label
{
  display: block;
  font-weight: bold;
  margin-bottom: 0.2em;
}

form
{
  margin: 0;
  padding: 0;
  border: 0px none;
}

fieldset
{
  border: 1px solid #59718d;
  margin: 0;
  padding: 1em;
}

input, textarea
{
  background-color: #fff;
  border: 1px solid #59718d;
  color: #59718d;
  padding: 2px;
}