/*-- James Hardie Retail CSS --*/

/*
Colors:

*/

body {
	margin: 0; 
	padding: 0; 
	border: none;
	text-align: center;
	background-color: #b7bcbd;
}

/*-- type --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
p { 
	margin: 0; 
	padding: 0;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	line-height: 14px; 
	font-weight: normal;
}

td {
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	line-height: 13px; 
	font-weight: normal;
}
a         { font-weight: bold; text-decoration: underline; }
a:link    { color: #f26400; }
a:visited { color: #f26400; }
a:hover   { color: #999; }
a:active  { color: #999; }

ul {
	margin: 3px auto 10px auto;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	line-height: 13px; 
	font-weight: normal;
}

li {
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	line-height: 13px; 
	font-weight: normal;
	_margin-left: 20px; /* IE hack to fix left margin on list items in sucky Internet Explorer */
}

/* start: header tag properties */
/* h1: main body text */
h1 {
	margin: 0; 
	padding: 0;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	line-height: 14px; 
	font-weight: normal;
}
h1 a         { font-weight: bold; text-decoration: underline; }
h1 a:link    { color: #f26400; }
h1 a:visited { color: #f26400; }
h1 a:hover   { color: #999; }
h1 a:active  { color: #999; }

h1 img {
	margin: 5px 5px 5px 0;
	border: 1px solid #333;
}

/* h2: page specific headers */
h2 {
	margin: 0; 
	padding: 0;
	/* color: #333; // color is set per page */ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px; 
	line-height: 17px; 
	font-weight: normal;
}
h2.pi a         { font-weight: normal; text-decoration: underline; }
h2.pi a:link    { color: #38515a; }
h2.pi a:visited { color: #38515a; }
h2.pi a:hover   { color: #c6b63a; }
h2.pi a:active  { color: #c6b63a; }

/* h3: page specific sub-headers */
h3 {
	margin: 0; 
	padding: 0;
	/* color: #333; // color is set per page */ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px; 
	line-height: 15px; 
	font-weight: normal;
}


/* h4: copyright info */
h4 {
	margin: 0; 
	padding: 0;
	color: #666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 13px; 
	font-weight: normal;
}
h4 a    { font-weight: normal; text-decoration: none; }
h4 a:link    { color: #3a4913; }
h4 a:visited { color: #3a4913; }
h4 a:hover   { color: #c6b63a; }
h4 a:active  { color: #c6b63a; }

/* end: header tag properties */
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- top level containers --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#wrapper {
	width: 800px;
	margin: 20px auto;
	text-align: left;
	background-color: #fff;
}

/* NEW */
#home-logo {
	margin: 0; padding: 0;
	width: 800px;
	height: 74px;
	background: url("img/home-logo.gif") no-repeat left top;
	position: relative;
}

#tbSpacer {
	width: 760px;
	height: 20px;
	margin-left: 20px;
}

#homeFlash {
	width: 760px;
	height: 270px;
	margin-left: 20px;
	background-color: #bfcb8f; /* remove after testing */
}
#rcTop {
	width: 760px;
	height: 315px;
	margin-left: 20px;
}
#midHolder {
	margin-left: 20px;
	width: 760px;
	padding:0;
}
#midLeft {
	width: 211px;
	float: left;
	background-position: left top;
	background-repeat: repeat-y;
}

/*-- start: midLeft page specific backgrounds --*/
.hm {
	background-image: url(img/midlftbg_hm.gif);
}
.rac {
	background-image: url(img/midlftbg_rac.gif);
}
.wjh {
	background-image: url(img/midlftbg_wjh.gif);
}
.ins {
	background-image: url(img/midlftbg_ins.gif);
}
.prod {
	background-image: url(img/midlftbg_prod.gif);
}
.loc {
	background-image: url(img/midlftbg_loc.gif);
}
/*-- end: midLeft page specific backgrounds --*/

#midRight {
	float: left;
	margin: 15px;
	width: 519px;
}

#midRightHome {
	float: right;
	margin: 15px;
	width: 500px;
}

/* html #midRightHome {
	float: left;
	margin: 15px 0px 15px 15px;
	width: 400px;
}*/


/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- home specific content --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#homeTitle {
	width: 720px;
	height: 48px;
}
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- global content --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#subMidTop {
	width: 720px;
	height: 23px;
}
#noShow {
	display: none;
}
#bottom {
	width: 720px;
	height: 57px;
	clear: both;
}
/*-- Why James Hardie page: holders for content --*/
#wjhHolder {
	width: 470px;
}
#wjhL {
	float: left;
	text-align: left;
	width: 115px;
}
#wjhL img {
	border: 1px solid #333;
}
#wjhR {
	float: left;
	text-align: left;
	width: 350px;
}
table.prodt {
	vertical-align: middle;
	text-align: center;
}
#coupon {
	border: 1px dotted #333;
 	padding: 20px 10px 20px 10px;
	background-color: #e5e5e5;
}


/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- subpage navigation --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#subNav {
	width: 211px;
	height: 119px;
}
#subNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#subNav li {
	margin: 0;
	padding: 0;
	display: table;
}
#subNav li a:hover {
	text-decoration: none;
}
#subNav li a {
	margin: 0;
	padding: 0;
	float: left;
	height: 20px;
}
#subNav .noShow {
	display: none;
}
#sn1, #sn2, #sn3, #sn4, #sn5, #sn6 {
	width: 211px;
	height: 20px;
	/* background-image for list items is set in each page */
	background-repeat: no-repeat;
}

#sn1 { background-position: 0 0px; }
#sn2 { background-position: 0 -20px; }
#sn3 { background-position: 0 -40px; }
#sn4 { background-position: 0 -60px; }
#sn5 { background-position: 0 -80px; }
#sn6 { background-position: 0 -100px; }

#sn1:hover, #sn1:focus { background-position: 0 -120px; }
#sn2:hover, #sn2:focus { background-position: 0 -140px; }
#sn3:hover, #sn3:focus { background-position: 0 -160px; }
#sn4:hover, #sn4:focus { background-position: 0 -180px; }
#sn5:hover, #sn5:focus { background-position: 0 -200px; }
#sn6:hover, #sn6:focus { background-position: 0 -220px; }

#underNav {
	width: 211px;
	height: 2px;
	background: url(img/nav_under.gif) no-repeat left top;
}
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- Products subpage navigation --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#pNav {
	width: 211px;
	height: 239px;
}
#pNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#pNav li {
	margin: 0;
	padding: 0;
	display: table;
}
#pNav li a:hover {
	text-decoration: none;
}
#pNav li a {
	margin: 0;
	padding: 0;
	float: left;
	height: 20px;
}
#pNav .noShow {
	display: none;
}
#pn1, #pn2, #pn3, #pn4, #pn5, #pn6, #pn_a, #pn_b, #pn_c, #pn_d, #pn_e, #pn_f {
	width: 211px;
	height: 20px;
	background: url(img/nav_prod2.gif) no-repeat left top;
}

#perf li a {
list-style-image: url(/img/li.gif);
}

#pn1 { background-position: 0 0px; }
#pn2 { background-position: 0 -20px; }
#pn3 { background-position: 0 -40px; }
#pn4 { background-position: 0 -60px; }
#pn5 { background-position: 0 -80px; }
#pn6 { background-position: 0 -100px; }

#pn1:hover, #pn1:focus { background-position: 0 -120px; }
#pn2:hover, #pn2:focus { background-position: 0 -140px; }
#pn3:hover, #pn3:focus { background-position: 0 -160px; }
#pn4:hover, #pn4:focus { background-position: 0 -180px; }
#pn5:hover, #pn5:focus { background-position: 0 -200px; }
#pn6:hover, #pn6:focus { background-position: 0 -220px; }

/*-- product subNav --*/
#pn_a { background-position: 0 -240px; }
#pn_b { background-position: 0 -260px; }
#pn_c { background-position: 0 -280px; }
#pn_d { background-position: 0 -300px; }
#pn_e { background-position: 0 -320px; }
#pn_f { background-position: 0 -340px; }

#pn_a:hover, #pn_a:focus { background-position: 0 -360px; }
#pn_b:hover, #pn_b:focus { background-position: 0 -380px; }
#pn_c:hover, #pn_c:focus { background-position: 0 -400px; }
#pn_d:hover, #pn_d:focus { background-position: 0 -420px; }
#pn_e:hover, #pn_e:focus { background-position: 0 -440px; }
#pn_f:hover, #pn_f:focus { background-position: 0 -460px; }
/*-- product subNav --*/

/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- left buttons --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#leftButtons {
	margin: 0;
	padding: 0;
	width: 211px;
	height: 105px;
}
#leftButtons ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
#leftButtons li {
	margin: 0;
	padding: 0;
	display: table;
}
#leftButtons li a:hover {
	text-decoration: none;
}
#leftButtons li a {
	margin: 0;
	padding: 0;
	float: left;
	height: 105px;
}
#leftButtons .noShow {
	display: none;
}
#ln {
	width: 211px;
	height: 105px;
	/* background-image is set in page */
	background-repeat: no-repeat;
}

#ln { background-position: 0 0px; }

#ln:hover, #ln:focus { background-position: 0 -105px; }

#midLine {
	margin: 0;
	padding: 0;
	width: 211px;
	height: 5px;
	background: url(img/left_midline.gif) no-repeat left top;
}
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/*-- product page image links --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#pth {
	position: relative;
	width: 470px;
	height: 300px;
	background: url(img/products_th.jpg) no-repeat left top;
}
#pth_cplus {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 20px;
	left: 20px;
	cursor: pointer;
}
#pth_plank {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 20px;
	left: 162px;
	cursor: pointer;
}
#pth_shingle {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 20px;
	left: 304px;
	cursor: pointer;
}
#pth_trim {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 162px;
	left: 20px;
	cursor: pointer;
}
#pth_soffit {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 162px;
	left: 162px;
	cursor: pointer;
}
#pth_perf {
	position: absolute;
	width: 82px;
	height: 82px;
	top: 162px;
	left: 304px;
	cursor: pointer;
}		
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
		

/*-- form stuff --*/
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Request a Consultation --*/
/*-- fields --*/
.rcOne {
	width: 260px;
	margin: 0;
	padding: 2px;
	background-color: #fff;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 12px; 
	font-weight: normal;
}
.rcTwo {
	width: 130px;
	margin: 0;
	padding: 2px;
	background-color: #fff;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 12px; 
	font-weight: normal;
}
.rcThree {
	width: 260px;
	height: 60px;
	margin: 0;
	padding: 2px;
	background-color: #fff;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 12px; 
	font-weight: normal;
}
.rcdd {
	margin: 0;
	padding: 2px;
	background-color: #fff;
	border: 1px solid #666;
	font-color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; 
	line-height: 12px; 
	font-weight: normal;
}
/*-- border colors --*/
.gbd {
	border: 1px solid #666;
}
.rbd {
	border: 1px solid #852624;
}
/*-- red font --*/
.rbld {
	color: #852624;
	font-size: 10px; 
	line-height: 12px; 
	font-weight: bold;

}
/*-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*-- SEO --*/

#home-welcome-title {
	padding: 48px 0 0 0;
	overflow: hidden;
	background-image: url("/img/welcome.gif");
	background-repeat: no-repeat;
	height: 0px !important;
	overflow: hidden;
	height /**/:48px;
	position: relative;
}


/* NEW */
#new-welcome-title {
	margin: 0; padding: 0;
	width: 760px;
	height: 48px;
	background: url("img/welcome3.gif") no-repeat left top;
	position: relative;
}
#new-welcome-title-in {
	margin: 0; padding: 0;
	position: absolute;
	top: 0px;
	left: 380px;
	width: 380px;
	height: 48px;
}
#new-welcome-title-in h1 {
	margin: 0; padding: 22px 15px 0 0;
	color: #f26400;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; 
	line-height: 14px; 
	font-weight: normal;
	text-align: right;
}
#new-welcome-title-in h1 a         { color: #f26400; font-weight: normal; text-decoration: none; }
#new-welcome-title-in h1 a:link    { color: #f26400; }
#new-welcome-title-in h1 a:visited { color: #f26400; }
#new-welcome-title-in h1 a:hover   { color: #f26400; }
#new-welcome-title-in h1 a:active  { color: #f26400; }

/* NEW */


#consultation-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_rac.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#design-center-title {
    padding: 60px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_cp.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:60px;
}

#financing-title {
    padding: 81px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_fin.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:81px;
}

#installation-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_ins.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#colorplus-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_colorplus.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#subtopright-prod {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_prod.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}

#prodperf-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_prodperf.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#subtopright-rac {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_rac.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}

#hardiplank-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_hardiplank.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#hardisoffit-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_hardisoffit.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#hardishingle-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_hardishingle.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#harditrim-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_harditrim.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#wjh-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_wjh.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#subtopright-wjh {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_wjh.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}


#subtopright-loc {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_loc.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}

#loc-title {
    padding: 100px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_loc.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:100px;
}

#loc-title {
    padding: 100px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_loc.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:100px;
}

#loc-title {
    padding: 100px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_loc.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:100px;
}

#financing-title {
    padding: 100px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_fin.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:100px;
}

#subtopright-finance {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_finance.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}

#subtopright-ins {
    padding: 315px 0 0 0;
    overflow: hidden;
    background-image: url("/img/subtopright_ins.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:315px;
}

#prod-title {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_prod.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:30px;
}

#coupon-title {
    padding: 100px 0 0 0;
    overflow: hidden;
    background-image: url("/img/title_coupon.gif");
    background-repeat: no-repeat;
    height: 0px !important;
	overflow: hidden;
    height /**/:100px;
}