/* reset browser defaults and basic styles */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img {
	border: 0;
}

address,caption,cite,code,dfn,th,var {
	font-style: normal;
	font-weight: normal;
}

ol,ul {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

q:before,q:after {
	content: '';
}

a {
	outline: 0;
}

body {
         margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	background-image: url(http://pdptest.com/helphouse/images/topbar.gif);
	background-repeat: repeat-x;
	color: #666666;
	font: 13px/20px "Trebuchet MS", Verdana, Arial, sans-serif;
}

#pageSurround {
	width: 748px;
	margin: 0px auto;
	padding: 5px 0px 0px 0px;
	background-color: #FFFFFF;
	color: #666666;
}



#header {
	background:#ffffff url(http://pdptest.com/helphouse/images/default.gif) no-repeat; 
 	height: 167px;
	margin:0 auto;
	width:752px;
	padding:5px 0px 8px 0px;
	text-align:right;
}


ul.horiz li {
    display:inline;
	font-weight:bold;
	padding: 0px 7px 0px 34px;
	margin: 0;
	
}	
	
#topmenu {
	
	font-size:11px;
	font-weight:bold;
	color: #FFFFFF;
	text-transform:uppercase;
	margin:0px 0px 0px 0px;
	padding:76px 10px 0 0;
	width:auto;

}

#topmenu a:link, #topmenu a:visited, #topmenu a:hover {
	color: #FFFFFF;
	text-decoration: none;
	
}

#topmenu a:hover {
	color: #0a716c;
}

#shopnav {
         margin:0 auto;
	width:752px;
	padding:7px 0px 8px 10px;
         text-align:left;
         
}

.shopnavimage {
         float: left;
         width: 54px;
}

#shopnav h3 {
         
         margin: 0;
         padding: 5px 0px 0px 0px;
         font-weight:bold;
         font: "Trebuchet MS", Verdana, Arial, sans-serif;

}

#shopnav  a:link, #shopnav a:visited {
	color: #FFFFFF;
	text-decoration: none;
	
}

#shopnav  a:hover {
         color: #f99f3d;
}




#main 
{

	margin: 5px 10px 0px 10px;
	padding:0;
	width:732px;


}

#houseimage {
        width: 438px;
        display: inline;
        float: left;
        margin: 0px 15px 20px 0px;
}

#houseintro {
        width: 270px;
        display: inline;
        float: right;
        margin: 50px 0px 20px 0px;
}

#chromebar {
        margin: 0px 0px 10px 0px;
        width: 752px;       
     
}

#content {
color:#131313;
	width:700px;
	float:left;
	padding:10px 15px 0px 15px;
	margin:0;
	overflow:hidden;
	display:inline;


}

#sectionleft {
         width: 400px;
         display: inline;
         float: left;
         margin: 20px 40px 10px 0px;
}

#sectionright {
         width: 300px;
         display: inline;
         float: right;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 10px 30px;
 
}

.entry-title  {
         
         margin: 0px 0px 20px 30px;
         color: #666666;
         padding: 5px 0px 0px 0px;
         text-decoration: underline;
         font: "Trebuchet MS", Verdana, Arial, sans-serif;

}

h2.entry-title a, h2.entry-title a:visited  {
         
         
         color: #666666;
         font-size: 1.1em;
         padding: 5px 0px 0px 0px;
         text-decoration: underline;
         font: "Trebuchet MS", Verdana, Arial, sans-serif;

}

h2.entry-title a:hover {
         
         color: #f99f3d;
         text-decoration: underline;
         
}


h2.neededproducts {
         color: #666666;
         font-size: 1.1em;
         margin: 0px 0px 20px 20px;
         font: "Trebuchet MS", Verdana, Arial, sans-serif;
}


#entry-content {
         margin: 0px 10px 30px 30px;
         color: #666666;
         padding: 5px 0px 0px 0px;   
         font: "Trebuchet MS", Verdana, Arial, sans-serif;
}

#entry-content ol{
         margin: 0px 10px 30px 30px;
         color: #666666;
         padding: 5px 0px 0px 0px;   
         font: "Trebuchet MS", Verdana, Arial, sans-serif;
}

#entry-content ol li{
         margin: 0px 10px 10px 0px;
         list-style-type: decimal;
}


#sectionleft ul.recent_articles {
         list-style-type: circle;
         color: #666666;
}

#sectionleft ul li a {
	color: #666666;
}


#sectionleft ul li a:hover, #sectionleft ul li a:active {
	color: #f99f3d;
}

a img {
	border: none;
}


cite {
	font-size: 0.9em;
	font-style: normal;
}
h3 {
	margin: 0;
	padding: 0;
	font-size:1.3em;
}
p {
	margin: 0 0 1em;
	padding: 0;
	line-height: 1.5em;
}
h1, h2, h3, h4 {
	font-family: Verdana, 'Trebuchet MS',Georgia, arial;
	font-weight: normal;
	letter-spacing: 1px;
}
#header h1 
{
	margin: 0;	

}
#header h1 a 
{
	color:#B5C09D;
	text-decoration:none;
}
#header h1 a:hover 
{
	color:#F7F3ED;
}
#header #desc
{
	font-weight:normal;
	
	font-size:1em;
	color:#B5C09D;
	text-align:right;
	margin:0;
	padding:0 20px 0 0;
}


#pagenav
{
	list-style:none;
}

#content ul {
	margin-left: 0;
	padding-left: 45px;
	list-style-type: none;
}
#content ul li {
	background: url(../images/xxx.gif) no-repeat 0 7px;
	padding-left: 1.5em;
}
.post , .page
{
	margin:0 0 30px 0;

}
.page 
{
	margin:25px -5px 0 27px;
}
.post-info, .page-info 
{
	font-size:0.85em;
	font-family: Arial,Georgia;
	margin:0;
	padding:0px 0px 1px 5px;
	color:#fafafa;
}
.page-info 
{
	text-align:center;	
}
.post-info a
{
	color:#990000;
}
.post-info a:hover 
{
	color:#000;
}
.post-content, .page-content {
	padding:10px 0px 0px, 0px;
	margin:3px 0px 0px 0px;
	background:#fafafa;	

	font-family: 'x-small Verdana',Sans-serif;
	font-size:12px;
}
.page-content {

}
.post-title, .page-title {
	padding: 5px 0px 0px 0px;
         font-weight:bold;
         font: "Trebuchet MS", Verdana, Arial, sans-serif;
}
.page-title 
{
	font-size:1.6em;
	font-weight:normal;
	padding:0px 0px 1px 5px;
}
#content .page-title a, .post-title a:link, .post-title a:visited, .post-title a:hover, .post-title a:active
{
	text-decoration:none;
	color:#fafafa
}



#footer {
         background-image: url(http://pdptest.com/helphouse/images/bottom.gif);
	background-repeat:no-repeat;
         clear: both;
         width: 752px;
         text-align:center;
	margin:0px 0px 7px 0px;
	padding:5px 0;
	color: #FFFFFF;
	text-transform:uppercase;
	font-size:12px;
	height:35px;	
}

#footer a:link, #footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-weight:bold;
         

	}

#footer a:hover {
	color: #f99f3d;
	}
	
#neededproducts {
        background-color:#ececec;
        padding-top: 10px;
        padding-left: 35px;
        padding-bottom: 10px;
        padding-right: 10px;
        clear:both;
        margin: 0px 10px 30px 20px;
}

#neededproducts ul  {
        margin: 10px 0px 0px 0px;
        padding: 0;
        list-style-type: none;
}

#neededproducts ul li { 
        display: inline;
        margin: 10px 0px 10px 10px;
        
        
}
        
 
#neededproducts ul li a {
        text-decoration: none;
               
}

  
#######image map###########

/* set up the font to be used for the page */
body {font-family: tahoma; arial, sans-serif;}

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; 
       width:438px; 
       height:354px; 
       background:url(http://pdptest.com/helphouse/images/help_house_large.gif) no-repeat; 
       position:relative;
}

/* set up the definition list <dt><a> to hold the background image for the hover state */

#imap a#title {
       display:block; 
       width:400px; 
       height:0; 
       padding-top:240px; 
       overflow:hidden; 
       position:absolute; 
       left:0; 
       top:0; 
       background:transparent url(http://pdptest.com/helphouse/images/help_house_large.gif) no-repeat 400px 400px; cursor:default;
}

/* the hack for IE pre IE6 */
* html #imap a#title {height:300px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {
       background-position: 0 0; 
       z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #shower {left:70px; top:96px; z-index:20;}
#imap #toilet {left:140px; top:118px; z-index:20;}
#imap #wash_basin {left:210px; top:128px; z-index:20;}
#imap #bath {left:205px; top:158px; z-index:20;}
#imap #cooker {left:108px; top:243px; z-index:20;}
#imap #washing_machine {left:167px; top:241px; z-index:20;}
#imap #sink {left:203px; top:228px; z-index:20;}
#imap #boiler {left:298px; top:78px; z-index:20;}
#imap #fireplace {left:353px; top:180px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#shower {
       display:block; 
       width:64px; 
       height:85px; 
       text-decoration:none; 
       z-index:20;}


#imap a#toilet {
       display:block; 
       width:37px; 
       height:47px; 
       text-decoration:none; 
       z-index:20;}

#imap a#wash_basin {
       display:block; 
       width:128px; 
       height:18px; 
       text-decoration:none; 
       z-index:20;}

#imap a#bath {
       display:block; 
       width:90px; 
       height:29px; 
       text-decoration:none; 
       z-index:20;}

#imap a#cooker {
       display:block; 
       width:40px; 
       height:38px; 
       text-decoration:none; 
       z-index:20;}  

#imap a#washing_machine {
       display:block; 
       width:20px; 
       height:33px; 
       text-decoration:none; 
       z-index:20;}

#imap a#sink {
       display:block; 
       width:44px; 
       height:19px; 
       text-decoration:none; 
       z-index:20;}

#imap a#boiler {
       display:block; 
       width:24px; 
       height:50px; 
       text-decoration:none; 
       z-index:20;}

#imap a#fireplace {
       display:block; 
       width:25px; 
       height:34px;  
       text-decoration:none; z-index:20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}

/* move the link background image to position 0 0 when hovered */
#imap a#shower:hover, #imap a#toilet:hover, #imap a#wash_basin:hover, #imap a#bath:hover, #imap a#cooker:hover, #imap a#washing_machine:hover, #imap a#sink:hover, #imap a#boiler:hover, #imap a#fireplace:hover {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:260px; display:block; font-family:arial; font-size:12px; background: transparent url(http://pdptest.com/helphouse/images/blue_bg.png); color:#fff;  padding:5px;}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:260px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#paul:hover span {left:-36px; top:200px;}
#imap a#ringo:hover span {left:-113px; top:170px;}
#imap a#john:hover span {left:-192px; top:196px;}
#imap a#george:hover span {left:-262px; top:186px;}

/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}