body {
		margin:auto;
		padding:0;
		border:0;					
		background:#cfcfcf;
		background-image: url(image-files/stripe-bg.png);
		background-repeat: repeat;
		max-width:1030px;
		font-size:90%;
		text-align:center;
		font-family: 'arial', 'verdana';
		color:#000;
	}
	

	.max-width {
width:expression(document.body.clientWidth > 1031? "1030px": "auto" );
}
#header {
	background:url(HousePaintingGuide_files/images/header_tile.gif) bottom repeat-x;	
}

/*THIS SECTION IS GENERAL STYLING, FONTS LINKS HEADING ETC*/

	a {
		color:#124284;
		text-decoration:none;
	}
	
	a:visited {
	color:#124284;
	text-decoration:none;
	}
	
	a:hover {
		color:#cc0000;
		text-decoration:none;
	}
	
	/********headings********/

h1 { font-family: 'arial', 'verdana'; font-size: 150%;  color: #000000}
h2 { font-family: 'arial', 'verdana'; font-size: 116%;  color: #000000}
h3 { font-family: 'arial', 'verdana'; font-size: 108%;  color: #000000}


	h1, h2, h3{ margin-top:20px; /*fixes IE to give same margins as other browsers*/
	}
	p {
		margin:.4em 0 .8em 0;
		padding:0;
}

	
	/*THIS SECTION IS PAGE STRUCTURE.CONTAINERS ETC*/
	/* Header and footer styles */
	#header {
		clear:both;
		float:left;
		width:100%;
		height:161px; /*set to the height of your header*/
		background-color:#e6eff9;
		background-image: url(image-files/hpi-site-header.jpg);
		background-position: top left;
		background-repeat: no-repeat;
	}
		/* Footer styles */
	#footer {
		clear:both;		
		width:100%;
		border-top:none;
		background:#f3f8fc;
    color:#124284;
    overflow: hidden;
    padding-top:5px;
    padding-bottom:5px;
	}
	
div	.wrap{ /* this class is commented out in the html page, as it gives a 1px gap between main divs in IE6. No big deal though, and doesn't look bad at all, so use it if you want*/
border:1px solid #000;
padding:0;
margin:0;
overflow:hidden;
}	

		/* column container */
	.master-container {
		position:relative;	
		clear:both;
		float:left;
		width:100%;			
		overflow:auto;/* This chops off any overhanging divs */
		
		
	}
	/* common column settings */
	.colright,
	.subcontainer-mid,
	.subcontainer-left {
		float:left;
		width:100%;			/* don't change */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 5px 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
		width:auto;
		
	}
	/* 3 Column settings */
	.threecol {
		background:#fff;		/* pink, right column background color if no image */
		background:url(image-files/rightbg-fade.jpg);
		background-repeat:repeat-y;
		background-position:top right;
	text-align:left;
	}
	
	.threecol .subcontainer-mid {
		right:25%;			/* width of the right column */
		background:#fff;		/* center column background color */
		text-align:left;
		border-right:1px solid #0b007d;
	}
	
	.threecol .subcontainer-left {
		right:55%;			/* width of the middle column */
		text-align:left;
		background:#fff; /*bg color, if no image*/
    background-image:url(image-files/leftbg-fade.jpg);	/* left column background  */
		background-repeat:repeat-y;
		background-position: top right; /*bg image is placed from the RIGHT, not left as you might expect. So please allow for this when creating a background*/

	}
	.threecol .col1 {
	width:51%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
 
	}
	.threecol .col2 {
		width:18%;			/* Width of left column content (column width minus padding on either side) */
		left:31%;			/* width of (right column)+(center column left and right padding)+(left column left padding) */
	}
	
	.threecol .col3 {
		width:21%;			/* Width of right column content (column width minus padding on either side) */
		left:88%;		}		/* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */

	.clear{
	clear:both;
	}
	

/*Horizontal menu*/

.topnav {
background-color: #94bbdd;
width: 100%;
margin:0;
padding:0;
}


/*Horizontal navbar*/

#nav ul {
	float: left;
	list-style: none;
	background: #94bbdd;
	width: 100%;		
	padding: 0;	margin: 0 0 0 0px;
	height: 30px;
	display: inline;
	
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 30px;
	border-top: none;	
	border-right: 1px solid #fff;
	border-left: 0px solid #fff;	
	border-bottom: none;
	color: #124284;  /* text color*/
	font: bold 13px/30px  'Arial', 'verdana';
	text-decoration: none;	
	letter-spacing: 0px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #fff; 
	font-weight: bold;
}

/*Additional classes*/

/* information below is to remove the link styling for anchor links.
Just leave this as it is....it works fine, and shouldn't be modified */
a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
} 

a.jumplink2  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #fff;
}

a:hover.jumplink2  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #fff;
} 

/*horizontal dividers*/
ul {

padding-left: 10px;
margin-left: 10px;
}

li  {
padding-bottom:3px;	
}

li img {
	padding:3px 0px 3px 0px;	
}
 
li.blue {
background: url(image-files/bullet-blue.gif) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
}

li.brush {
background: url(image-files/bullet-brush.gif) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
}
 
li.arrow {
background: url(image-files/bullet-blue-arrow.gif) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
} 

li.check {
background: url(image-files/bullet-check.gif) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;
}

/*horizontal dividers*/
.solid {	
border-top: 1px solid #000066;
border-bottom: hidden;
border-left: hidden; 
border-right: hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.dashed {
border-bottom:1px dashed #000066;
border-top:hidden;
border-left:hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.dotted {
border-bottom:1px dotted #000066;
border-top:hidden;
border-left:hidden;
width: 100%;
margin-left: auto;
margin-right: auto;
}


/*HBG class*/

.hbg{
background-color:#346995; 
color:#fff;
width: auto;
z-axis: 1;
text-align:center;
} 
 

/*divs*/
div.full-width-box {
  background-color: #ffffff;
	margin: 15px 0px 10px 0px;
	padding: 15px;
  border: 1px solid #5C94CB;
	
}

div.full-width-box2 {
  background-color: #ffffaa;
	margin: 15px 5px 10px 5px;
	padding: 15px;
  border: 1px solid #5C94CB;

	
}

div.half-width-box2 {
  background-color: #ffffaa;
	margin: 15px 5px 10px 5px;
	padding: 15px;
  border: 1px solid #5C94CB;
  width: 50%;
	margin-left: auto ;
  margin-right: auto ;

}
	
/*** right column Half of width box left ***/
div.half-width-box-left {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #5C94CB;
	padding: 10px;
	width: 50%;
	float: left;
	
}

/*** right column Half of width box right ***/
div.half-width-box-right {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border: 1px solid #5C94CB;
	padding: 10px;
	width: 50%;
	float: right;
	
}

/*** main column Half of width box right with colored background ***/

div.half-width-box2-right{
   background-color: #ffffaa;
	margin: 5px 5px 5px 5px;
	border: 1px solid #5C94CB;
	padding: 10px;
	width: 50%;
  float: right;
	
}

div.half-width-box2-left{
  background-color: #ffffaa;
	margin: 5px 5px 5px 5px;
	border: 1px solid #5C94CB;
	padding: 10px;
	width: 50%;
  float: left;
	
}

div.container-float-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: none;
}

div.container-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: none;
}

/* the border of the image inside your half width textbox can be changed.
Its set to #5F8B8C at the moment. You can also change the solid
to either dashed or dotted if you want to*/

/*** Picture inside the text ***/
.img-float-left {
	float: left;
	padding: 2px;
	margin-right: 5px;
	border: 2px solid #5C94CB;
}
.img-float-right {
	float: right;
	padding: 2px;
	margin-left: 5px;
	border: 2px solid #5C94CB;
}

/***Picture centered in right columb 150px wide***/
.img-float-center {
  float: center;
  padding: 2px;
  margin: 5px 5px 5px 5px;
  border: 2px solid #5C94CB;
}
  
/*** Clearing of a float ***/
div.clear {
	clear: both;
	width: 100%;
	height: 1px;
}

/*Left Navigation*/

/*this stylesheet is for you navigation panel*/

#navigator {
}

.housebutton {
line-height: 120%;
}

.housebutton a {
font-size: 93%;
font-family: 'arial', 'verdana';
}

.housebutton a:hover {
font-size: 93%;
font-family: 'arial', 'verdana';
}


/* this part below is for the color on the background, surrounding the buttons. Change the color, and the 
border, if you like. For the border, you can use solid, dashed, or dotted, for different border styles*/

#navigator {
background-color: transparent; 
border: none;
width: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
padding: 2px;
text-align: left;
}

/* want more space between your buttons? just increase the margins
from 1px. Font weight can be bold if you prefer.*/

.housebutton {
font-family: 'arial', 'verdana';
font-weight: bold;
text-align: left;
margin-bottom: 2px;
margin-top: 2px;
}
f

/* this part is for the colors of your buttons "at rest" so to speak. Notice the
top/left, and the bottom/right are colored in pairs? If you change the colors, you will need to do the same, to
maintain the illusion of 3D buttons. Make one set of sides a slightly darker shade than the other pair.
This will give the button a 3D look*/

.housebutton a {
padding: 2px;
text-decoration: none;
display: block;
color: #346995;    /*this is where you change the button font color*/
}

/*this part is how the buttons look, once the pointer passes over them. Same thing as above, but this time
the top/left colors should SWAP with the bottom/right, to give the correct effect.
Also the background color should go a shade darker, to make it seem as if it were now below the 
level of the page, and is not getting any light on it*/

.housebutton a:hover {
color: #cc0000; /*-----this is where you change the button font color, when the button is hovered over*/
text-decoration: underline;

}

.rss-items{
	padding-left:4px;
	margin:5px 0 10px 10px;
	
}

.rss-items li{
	list-style:circle;
	text-align:left;
	padding:3px 0px 6px 0px;
	
}

.left_title {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:left;
	padding:10px 0px 0px 0px;
	font-size:140%;
}


#contact_table .left {
	padding-right:7px;
	text-align:right;
	font-weight:bold;
	vertical-align:top;
	
}

#contact_table .right {
	text-align:left;
	vertical-align:top;
	
}

#contact_table .right input {
	width:200px;
	
}