/* 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:#fff;
 }
 
.imgborder{
border: 4px solid #C0CDDB;
}

a {
color:#990410;
} 
 
a:link {
color:#990410;
} 

 
a:hover {
color:#59718D;
 }
 
 
.heading {
color: #1A4377;
font-size: 13px;
font-weight:bolder;
}
 
.hsm{
color: #1A4377;
font-size: 11px;
font-weight:bolder;
}
 
 
#main {
 width:860px;
 margin:auto;
 /*position:relative;*/ 
 border: 1px dashed #999999;
 background-color: #fff;
 }
 
 
 #contentindex{
float:left;
width:640px;
padding-left: 20px; /*to put padding to left of text*/ 
padding-top: 0px; 
}

#contentindex 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;
  }

#contentindex img{
float:right;
margin: 10px;
}
 
 
 /* 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;
 height: 139px;
 width: 860px;
}

/*   comments  */

#leftside{
float:left;
background-color:#990410;
width: 161px;
height: 150px;
margin-left: 6px;
margin-bottom:86px;
padding-left: 0px;
text-align:left;
}

#leftside ul{
color:#FFFFFF;
font: 13px Arial, Helvetica, sans-serif;
list-style:none;
margin: 0;
padding: 0;
}

#leftside li{
padding-bottom: 4px;
}



#leftside li a{
color:#FFFFFF;
font: 13px Arial, Helvetica, sans-serif;
list-style-type:none;
padding-left: 10px;
margin-left: 0px;
background-color:#006633;
display:block;
min-height:0; /*to fix gaps in list navigation and make opacity work*/ 
/*height: 1%; fixes spacing inbetween lists although it still has 1 px space;*/
/*_height: 1em;*/ 
}

#leftside li a:hover{
color:#FFFFFF;
font: 13px Arial, Helvetica, sans-serif;
list-style-type:none;
padding-left: 10px;
margin-left: 0px;
background-color:#D71826;
}


/*   navigation from blinds */
#navblinds {
display:inline; /*  (double margin bug) */
float:left;
margin-left: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
background: url(images/nav.gif) no-repeat;
width: 166px;
height: 195px;
}

#navblinds ul{   /*PSITE taken absolute positioning out.*/
width:143px;
list-style: none;
margin: 0;
padding: 0;
}

#navblinds li{
width: 143px;  /*width of blocks of navigation*/
padding-left: 10px;
}

#navblinds li a{
display: block;
padding: 3px 5px 3px 0.5em;
background-color: #990410;
color: #FFFFFF;
text-decoration: none;
min-height:0; /*to fix gaps in list navigation and make opacity work*/  
}

#navblinds li a:link, navigation li a:visited{
display: block;
padding: 3px 5px 3px 0.5em;
background-color: #990410;
color: #FFFFFF;
text-decoration: none;
}


#navblinds li a:hover{
background-color:  #D71826; /*  #711515 red,  #363636 */
color: #FFFFFF;  /* check semicolons, else opacity wont work! */
}



.events{
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}


h1 {
color: #DF6B0D;
font-size: 15px;
font-weight:bolder;
background-color: #FBD3B2;
}


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


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



#contenttwo{
float:left;
width:600px;
padding-left: 0px; /*to put padding to left of text*/ 
padding-top: 0px; 
}




#content img{
float:right;
margin: 10px;
}


.rightalign{
float:right;
margin: 10px;
}

.leftalign{
float:left;
margin: 10px;
}

#bannerad{
float:right;
margin-left: 12px;
width: 350px;
}

#giftspics{
float:right;
margin-right: 8px;
margin-top: 8px;
width: 250px;
background-color:#fff;
color:#FFFFFF;
}

#contentpages{
float:left;
width:450px;
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:#333333;
  }

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

#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: left;
	color:#333333;
  }



#rightsidepages{
float:right;
margin-right: 8px;
background-color:#fff;
width: 150px;
border-left: 0px dashed #666;
padding-top: 30px;
text-align:left;
}
  

#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: 30px;
text-align:left;
}


.hampers{
background-color:#E6EDCD;
padding: 15px;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}


.listclass{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}



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.first{	background:url(Navtrack2.jpg) no-repeat left top;}/* this holds the rollover state of the image1*/
#navigation li.second{background:url(Navaudio2.jpg) no-repeat left top;}/* this holds the rollover state of the image2*/
#navigation li.third{	background:url(Navsecurity2.jpg) no-repeat left top;}/* this holds the rollover state of the image3*/
#navigation li.fourth {background:url(NavCell2.jpg) no-repeat left top;}
#navigation li.fifth {background:url(NavWindow2.jpg) no-repeat left top;}
#navigation li.sixth {background:url(NavAC2.jpg) no-repeat left top;}
#navigation li.seventh {background:url(NavContact2.jpg) no-repeat left top;}

#navigation a{
	display:block;
	width:143px;/*size of image*/
	height:33px;/* size of image*/
	text-decoration:none;
}
#navigation li.first a{background:url(Navtrack.jpg) no-repeat left top;}/* this holds the normal state of the image1*/
#navigation li.second a{background:url(Navaudio.jpg) no-repeat left top;}/* this holds the normal state of the image2*/
#navigation li.third a{background:url(Navsecurity.jpg) no-repeat left top;}/* this holds the normal state of the image3*/
#navigation li.fourth a{background:url(NavCell.jpg) no-repeat left top;}/* this holds the normal state of the image4*/
#navigation li.fifth a{background:url(NavWindow.jpg) no-repeat left top;}/* this holds the normal state of the image5*/
#navigation li.sixth a{background:url(NavAC.jpg) no-repeat left top;}/* this holds the normal state of the image6*/
#navigation li.seventh a{background:url(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. */
 border: #363636 2px solid;
 background-color: #363636;
 color:#fff;
 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 dotted border/background colour shows in FireFox .. <div id="main" class="clearfix">*/
    display:inline-block;
}

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