/* Including additions from W3C Swiss Style Sheet */
body
{
    font-size:	90%; /* allows IE users to specify larger/smaller text in their browsers */
/*    font-family:Verdana, Geneva, Sans-Serif; ===> good second choice*/
/*    font-family: "Trebuchet MS", Helvetica, Sans-Serif; ===>bit twee looking */
/*    font-family:Tahoma, Geneva, Sans-Serif; ===> good second choice*/
    font-family:Arial, Helvetica, Sans-Serif;
	font-weight: normal;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform:	none;
    color: Black;
    text-align: center; /*centering hack for IE5.x/Win - if compliant this shouldn't centre in browser */
    background-color: #D3D2D1;
    padding-left: 400px;
    padding-right: 400px;
}
/* Jello Mold layout uses body, .sizer, .expander, .innerWrapper */
/* Current dimensions give min width of 750px for 800px Viewport */
/* (2 x 400px padding - 800px browser) *50% + 2 * 375px margins */
.sizer
{
    width:50%;
    margin: 0 auto 0 auto; /* standard centering method */
    text-align: left; /* resets centering back to default from Body hack */
}
.expander
{   
    position:relative; /* for IE to treat the negative margins properly */
    margin-left:-375px; /* equal or less than padding on Body */
    margin-right:-375px;
    min-width:800px; /* needed for Safari (IE7 understands, but margin fix does the same) */
    max-width:1000px; /* only understood by IE7 & Gecko etc, but only an issue for new PCs with big screens */
}  
/* innerWrapper required so IE can calculate % widths correctly of nested DIVs */
.innerWrapper
{
    position: relative;
    width:100%;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
}
/* Holly Hack for correct IE layout of Jello Mold */
/* Not sure if Body needs to be added to this */
/* Only worked in IE6 when used height of 0 instead of 1%. */
/* Jello mold article in Library briefly discusses this. */
/* \*/
* html .sizer,
* html .expander,
* html .innerWrapper
{height: 0;} 
/* */ 
h1	{	
	font-size:	1.5em;
	font-weight:	700;
	color: White;
	font-style:	normal;
	text-decoration: none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	padding:5px;
	margin:0;
	}	
/*.banner copy only
{
    font-family: Arial, Sans-Serif;
    font-weight:bold;
    font-size:1.5em;
    color:White;
    padding:5px;
}*/		
		
h2	{	
	font-size:	1.3em;
	font-weight:	500;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	}	
h3
{
	font-size:	1.1em;
	font-weight:500;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;   
} 
p
{
   /* padding: 0px 10px 0px 10px; */
}
/* summary classes used to create boxes with fixed image on left & expanding text on right */
.summaryStyle
{
    border:solid 1px #CCCCCC;
}
.summaryOuter
{
    margin-left:115px;
    position:relative;
}
.summaryWrapper
{
    position:relative;
    width:100%;
}
.summaryImage
{
    float:left;
    position:relative;
    width:113px;
    margin-left:-115px;
}
.summaryText
{
    float:right;
    width:100%;
}
.textPadder
{
    padding: 15px;
}
.textSidePadder
{
    padding: 0 15px 0 15px;
}    
.brclear 
{ /* Use a break with this class to clear float containers */
  clear:both;
  height:0;
  margin:0;
  font-size: 1px;
  line-height: 0;
}
.clear
{
    clear:both;
}
.emphasis
{
    font-weight: bold;
}
.quote
{
    font-style:italic;
}
/* banner to be replaced by h1 */
.banner
{
    font-weight:bold;
    font-size:1.5em;
    color:White;
    padding:5px;
}
/*green background*/
.background1    
{
    background-color: #91AA37;
}
/*grey background (was orange #EDA135)*/
.background2
{
    background-color: #777777;
}
/*blue background*/
.background3
{
    background-color: #26618D;
}
/*light blue background*/
.background4
{
    background-color: #4292CC;
}
/*all links*/
a.internalLink1, a.internalLink2, a.internalLink3, a.internalLink4
{
    font-size:0.9em;
}
/*green links*/
a.internalLink1:link, a.internalLink1:visited    
{
    color: #91AA37;
}
/*grey links (was orange #EDA135)*/
a.internalLink2:link, a.internalLink2:visited
{
    color: #777777;
}
/*blue links*/
a.internalLink3:link, a.internalLink3:visited
{
    color: #26618D;
}
/*light blue links*/
a.internalLink4:link, a.internalLink4:visited
{
    color: #4292CC;
}
/*white links*/
a.internalLink5:link, a.internalLink5:visited
{
    color: White;
}
/*red for all internal links when hovering or active*/
/*there is probably a more efficient way of expressing this*/
a.internalLink1:hover, a.internLink1:active, a.internalLink2:hover, a.internLink2:active, 
a.internalLink3:hover, a.internLink3:active
{
    color: Red;
}
#header
{
    position:relative;
    width:100%;
    height: 100px;
    vertical-align: middle;
}
.lPlate
{
    position: absolute;
    top: 18px;
    left: 17px;
} 
.logo
{
    position: absolute;
    top: 27px;
    left: 77px;
}
.strapline
{
    font-weight:normal;
    padding:0;
    position: absolute;
    top: 33px;
    left: 54%;
    margin-left:-65px;
    width: 130px;
    font-size:12pt; /* fixed size as instead of using an image here */
    color:#FFFFFF;
    text-align:center;
}    
.phone
{
    position:relative;
    top:29px;
    margin-right:17px;
    float:right;
    font-size:30pt; /* fixed size as instead of using an image here */
    color:#FFFFFF;
}
/*#footer has to have clear:both and be placed inside wrapper DIV to force wrapper 
height to include all nested DIVs in Firefox. Can also use overflow:hidden etc on 
wrapper class for similar effect*/
#footer
{
    position: relative;
    clear: both;
    width: 100%;
    background-color: Gray;
    font-size: 8pt;
    color: White;
    margin-top:10px;
}
.leftHalf
{
    position: relative;
    width: 49%;
    float: left;
}  
.rightHalf
{
    position:relative;
    width: 49%;
    float: right;
}    
.leftThird
{
    position:relative;
    width: 33%;
    float: left;
} 
.rightTwoThirds
{
    position:relative;
    width: 66%;
    float: right;
}
#menu
{
    width: 100%;
    background-color:White;
    font-size: 0.95em;
    font-weight:bold;
} 
.sideMenu
{
    position: relative;
    width: 100%;
    font-size: 0.95em;
    font-weight:bold;
    padding: 10px 0 10px 0;
    margin: 0 0 2px 0;
    background-position: top;
    background-image: url(  'Images/GradientBlue2.jpg' );
    background-repeat: repeat-x;
}
.topSubMenu
{
    background-position: top;
    background-image: url(  'Images/GradientBlue2.jpg' );
    background-repeat: repeat-x;
}
#car
{
    margin: 5px;
}    
.captionPhoto
{
    border: 1px solid #CCCCCC;
    width: 160px;
    float: right;
    margin: 10px;
    padding: 5px 5px 5px 5px;

    font-size: 0.9em;
    text-align: center;
}     
.handyHint
{
    border: 1px solid #CCCCCC;
    margin: 10px;
    padding: 8px;
    font-size: 0.9em;
    text-align: center;
}    
.handyHintHeader
{
    font-size:1.0em;
    font-weight:bold;
    color:Black;
}
dt
{
    font-weight:bold;
    margin:8px 0 8px 0;
}
.spacedList
{
    padding-bottom:10px;
}
#contactForm
{
    position:relative;
    top: 0px;
    left: 10px;
}
.floatLeft
{
    float:left;
}
.floatRight
{  
    float:right;
}
/* currently there is also a manual font setting for multi-line text box which doesn't seem to 
    respond to the dataEntry class setting*/
.want2PASS
{
    font-family:"Square721 BT";
    font-style:italic;
}
.hoverInfo
{

    border:solid 1px;
    font-size: 0.8em;
}
.tableLayout
{
    table-layout: fixed;
}
.tableColumn1
{
    width: 220px;
}
.tableColumn2
{
    width: 220px;
}
.tableColumn3
{
    width: 20px;
}
.featureImage
{
    float:right;
    margin-bottom:15px;
}