@charset "utf-8";
/* Supaloc Steel building Systems - CSS Document for general site layout and colour */

@import url("reset.css");

html, body { }
body { /*background:#28333C;*/ background: #FFF url('../images/site_bg_grad.gif') center top no-repeat; }
div#pagewrapper { width:960px; min-height:600px; margin:0px auto; background:#FFF; padding:0px 10px; }

/* (old) HEADER BAR */
div#header { height:/*155px*/145px; background:url('../images/headerbar_bg_steel.jpg') repeat-x bottom;}
div#header div#topheader {height:/*77*/67px; }
div#logo { width:201px; height:/*54px*/36px; float:left; position:relative; left:0px; top:/*10px*/15px; }
/***************/

/* new old HEADER BAR */  /*
div#header { height:125px; background:url('../images/headerbar_bg_steel.jpg') no-repeat center 39px;}
div#header div#topheader {height:77px; }
div#logo { width:205px; height:58px; float:left; position:relative; left:10px; top:45px; }
/***************/


/* new (old) MAIN NAVIGATION MENU */
div#mainnav { font-size:0.8em; }
div#mainnav { height:/*77px*/67px; width:700px; position:relative; float:right;}
#nav { display:block; position:absolute; top:/*38px*/28px; right:0px; }
#nav li ul, #nav li ul { margin: 0; padding: 0; }


/* MAIN NAVIGATION MENU /
div#mainnav { font-size:0.8em; }
div#mainnav { height:37px; width:700px; position:relative; float:right;}
#nav { display:block; position:absolute; top:0px; right:0px; }
#nav li ul, #nav li ul { margin: 0; padding: 0; }
*/

#nav a { text-decoration: none; }
#nav li { /*float the main list items*/  /*float:left;*/ float:right; display:block; height:28px; padding:0px 15px; }
#nav li ul { display: none; }
#nav li.menuitem {float:left; display:block; height:40px; padding:0px 15px; line-height:40px; }
#nav li.menuitem:hover { cursor:pointer; }
/* sets nav divider bars up: */
li#liCompany,
li#liOurSystems,
li#liOurServ,
li#liResources,
li#liWhereToBuy{ background:url('../images/nav_divider.gif') right center no-repeat; }
#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	position: absolute;
	top: 39px;
	right: 0px;
	height: 70px;
	background: /*#28333C;*/ url('../images/headerbar_bg_steel.jpg') right 0px;
	z-index:1;
	width:100%;
}
#nav li.on ul { background: /*#28333C;*/ url('../images/headerbar_bg_steel.jpg') right 0px; }
#nav li ul:hover {cursor:default;}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/ background: url('../images/headerbar_bg_steel.jpg') right 0px; }
#nav li a {
	display: block;
	padding: 0;
	z-index:10;
}
#nav li.on a { background:url('../images/nav_selector.gif') repeat-x center 30px; }
#nav li.on ul a, #nav li.off ul a {
	border: 0;
	float: left; /*ie doesn't inherit the float*/
	line-height:normal;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/ background: none; }
#nav li.on ul { display: block; }
#nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; }
#nav li.off a:hover, #nav li.on a:hover { /*color: #f90;*/ }
/*active area - for this demo - the code could be based on a body class, and probably work better.*/
#liProdServ.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*subnav formatting*/
#nav li.off ul a, #nav li.on ul a {
display: block;
background: none;
color: #fff;
height:28px;
line-height:28px;
}
#nav li ul li:hover {
background:#48535c;
}
/******** EOF NAV MENU **********/

li.chkbox { text-align:left; }


/* FRONTPAGE MAIN WIDGET BAR */
div#widgetbar { height:265px; margin-top:15px; }
div.widgetbox01,
div.widgetbox02,
div.widgetbox03 { width:310px; height:255px; float:left; background:url('../images/frontpage_widget_bg.gif') repeat-x; position:relative; }
div.widgetbox02 { margin:0px 15px; }

div.widgetbox_header { width:300px; height:50px; position:absolute; top:5px; left:15px; overflow:hidden; text-indent:-9999px; }
div.widgetbox_header img { position:absolute; top:5px; left:0px; }
div.widgetbox_content { width:300px; position:absolute; top:60px; left:5px; padding:10px 0px; font-size:0.95em; }
div.widgetbox_content ul li { margin:7px 5px; }
div.widgetbox_footer { width:300px; position:absolute; bottom:5px; left:5px; }

div.widgetbox01 div.widgetbox_header { background:url('../images/widget_header_01.gif') no-repeat 50px; }
div.widgetbox02 div.widgetbox_header { background:url('../images/widget_header_02.gif') no-repeat 50px; }
div.widgetbox03 div.widgetbox_header { background:url('../images/widget_header_03.gif') no-repeat 50px; }
/***************/

/* FRONTPAGE small horizontal WIDGET BAR */
div.horizwidgetbar { height:180px; margin-top:15px; }
div.horizwidget01,
div.horizwidget02,
div.horizwidget03 { width:310px; max-height:115px; float:left; }
div.horizwidget02 { margin:0px 15px; }

div.widgetimage { width:115px; width:115px; float:left; }
span.widgetimgborder { display:block; position:absolute; width:115px; height:115px; background:url('../images/horizwidget_border.gif'); }

div.widgettext { height:115px; margin-left:13px; float:right; width:180px; position:relative; }
div.widgettext span.readmorelink { display:block; margin-top:5px; position:absolute; bottom:0px; left:0px; }
/***************/

/* LEFT-HAND SUBMENU */
h2.lh-sidebarHeading { position:relative; padding:10px 0px 10px 10px; font-size:1.4em; color:#cbd6de; border-bottom:1px dotted #cbd6de; background:url('../images/sidebar_corner_curve.gif') top left no-repeat; }

div.lh-product-menu { position:relative; left:10px; width:180px; padding-bottom:10px; }
div.lh-product-menu ul { list-style:none; }
div.lh-product-menu ul.prodmenu-lv01>li { margin:10px 0px 5px; }
div.lh-product-menu ul.prodmenu-lv01>li.listarrow { list-style-image:url('../images/bullet_arrow.gif'); list-style-position:inside; }
div.lh-product-menu ul.prodmenu-lv01 li {  }
div.lh-product-menu ul.prodmenu-lv01 li ul.prodmenu-lv02 { list-style-type:circle; list-style-position:outside; padding-left:20px; margin-top:-4px; }
div.lh-product-menu ul.prodmenu-lv01 li ul.prodmenu-lv02 li { padding-left:0px; margin-bottom:3px; }

/***************/

/* RIGHT-HAND SUBMENU */
div.rhcmenu { width:170px; position:relative; margin-left:20px; margin-bottom:10px; }

h2.rhcmenuTitle { position:relative; padding:7px 0px 7px 10px; text-align:right; font-size:1.1em; color:#a8bccd; border-bottom:1px dotted #cbd6de; }

div.rhcmenu ul { list-style:none; color:#83a0b8; padding-left:10px; }
div.rhcmenu ul.rhcmenu-lv01>li { margin:8px 0px 4px 10px; }
div.rhcmenu ul.rhcmenu-lv01>li.listarrow { list-style-image:url('../images/bullet_bullet.gif'); list-style-position:outside; }
div.rhcmenu ul.rhcmenu-lv01 li {  }
div.rhcmenu ul.rhcmenu-lv01 li ul.rhcmenu-lv02 { list-style-type:circle; list-style-position:outside; padding-left:20px; margin-top:-4px; }
div.rhcmenu ul.rhcmenu-lv01 li ul.rhcmenu-lv02 li { padding-left:0px; margin-bottom:3px; }

/* Additional custom icons */
h2.rhsm-components { background:url('../images/icon_components.gif') no-repeat left; }
h2.rhsm-downloads { background:url('../images/icon_download.gif') no-repeat left; }

/***************/


hr.pagedivider { height:1px; margin:20px 0px; background:#ababab; border:#ababab; }


/* -- ARTICLE LAYOUTS -- */
div#pagearticles { /*clear:both;*/ }
div#toparticle,
div#bottomarticle { display:block; padding-bottom:0px; /*clear:both;*/ }

/* gradient titles */
h2.article-heading {/*this is important for title gradient to work correctly*/ position:relative;}
h2.article-heading span.titlegrad { position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; /*background:url('../images/h2_titlegrad.png')*/ repeat-x bottom; }
h3.article-heading {/*this is important for title gradient to work correctly*/ position:relative;}
h3.article-heading span.titlegrad { position:absolute; top:5px; left:0px; display:block; width:100%; height:100%; /*background:url('../images/h2_titlegrad.png')*/ repeat-x bottom; }

/* Article POSTS */
div.post { overflow:auto; padding:5px 15px; }
div.fp-post {} /* -frontpage post */ 

/* -------  3 COLUMN LAYOUT  ------- */
#columns3container {
  padding-left: 200px;   /* LC width */
  padding-right: 190px;  /* RC width */
  background:url('../images/3cols_bg.gif') repeat-y;
}
#columns3container .column {
  position: relative;
  float: left;
}
#columns3center {
  width: 100%;
  min-height:300px;
}
#columns3left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
  min-height:300px;
 /*background:#eff3f6;*/
}
#columns3right {
  width: /*150px;*/189px;          /* RC width */
  margin-right: -190px;  /* RC width */
  min-height:300px;
  /*border-left:1px solid #999;*/
}

/*** IE6 Fix ***/
* html #columns3left {
  left: 150px;           /* RC width */
}
/* ------- EOF 3COL LAYOUT ------- */



/* Article Sidebar (Right-Hand-Column) Images */
div.rhcimage { width:170px; overflow:hidden; position:relative; margin-left:20px; margin-bottom:10px; }
div.rhcimage span.zoomoverlay { position:absolute; width:170px; height:99px; bottom:0px; background:url(../images/article_thumb_corner.png); }
div.rhcimage span.zoomicon { position:absolute; width:31px; height:31px; top:3px; left:3px; background:url(../images/zoom_icon.png) no-repeat; }
div.rhcimage:hover span.zoomicon { background:url(../images/zoom_icon_hover.png) no-repeat; cursor:pointer;}
a.rhcimage_link img { border:none; text-decoration:none; }



/* PAGE FOOTER */
div#footer { padding-top:/*100px;*/0px; min-height:200px; clear:both; }
div#footer div#footerbar { width:960px; height:79px; overflow:hidden; background:url(../images/footer_bg.jpg) no-repeat; position:relative; }
div#footer div#footerbar div#footernav { width:650px; position:absolute; top:50px; left:30px; color:#FFF; font-weight:bold; font-size:0.8em; }

div#footer div#footerbar div#footernav a { color:#FFF; }
div#footer div#footerbar div#footernav a:hover { color:#AF0505; }




/* CONTACT DETAILS/ADDRESSES */
div#footer div#footerbar div#footercontactdetails { position:absolute; right:20px; top:20px; width:260px; height:79px; color:#FFF; font-weight:bold; font-size:0.8em; line-height:1.4em; }
/***************/

div.copyright { height:30px; }

a.contactmap { display:block; position:relative; width:160px; height:160px; background:url(../images/contact_viewmap_icon.jpg) no-repeat center; overflow:hidden; }
a.contactmap span { display:block; width:160px; position:absolute; left: 9999px; }




/* Builders Directory */
div#buildersdirectory { min-height:200px; position:relative; background:#eff3f6; padding-top:20px;  }
div#buildersdirectory div.bdlisting { min-height:110px;  background:url(../images/listing_bg.gif) repeat-x 0px 20px; margin-bottom:20px; }
div#buildersdirectory div.bdlisting h3 { padding-left:30px; font-size:1.1em;  }
div#buildersdirectory div.bdlisting div.bdlisting-image { text-align:left; position:relative; height:60px; width:200px; float:left; margin-right:20px; margin-top:10px; }
div#buildersdirectory div.bdlisting div.bdlisting-image img { padding-left:30px; max-width:172px; width:auto; height:auto; }

div#buildersdirectory div.bdlisting div.bdlisting-blurb { float:right; width:300px; height:70px; position:relative; overflow:hidden; padding-right:30px; border-left: 1px dashed #ccc; }
div#buildersdirectory div.bdlisting div.bdlisting-blurb p { margin:0px; padding:0px; padding-left:15px; line-height:1.2em; }
div#buildersdirectory div.bdlisting h3 {  }
div#buildersdirectory div.bdlisting p { margin-top:10px; }

/* Feature Wrapper */
div.featurewrapper { width:885px; height:300px; overflow:hidden; position:absolute; }
div.featureslider-linkbutton { width:103px; height:24px; position:absolute; line-height:25px; }

div.featureslider-linkbutton a.learnmorelink strong { visibility:hidden; }
div.featureslider-linkbutton a.learnmorelink { display:block; width:103px; height:24px; background:url('../images/slider_learnmore_button_off.png') no-repeat top left; }
div.featureslider-linkbutton a.learnmorelink:hover { background:url('../images/slider_learnmore_button_on.png') no-repeat top left; }

div.fw-futureofbuilding { background:url(../images/featureslider/content_images/banner-1.jpg) no-repeat; }
div.fw-getthefacts { background:url(../images/featureslider/content_images/banner-2.jpg) no-repeat; }
div.fw-insistonsupaloc { background:url(../images/featureslider/content_images/banner-3.jpg) no-repeat; }
div.fw-engineeredtoperform { background:url(../images/featureslider/content_images/banner-4.jpg) no-repeat; }
/*div.fw-superschools { background:url(../images/featureslider/content_images/banner-5.jpg) no-repeat; }*/
div.fw-thermaloc { background:url(../images/featureslider/content_images/banner-5a.jpg) no-repeat; }

/* alternative header (for JS disabled browsers) */
div#alt_homepageaHead { position:relative; width:954px; height:312px; margin:0px auto; margin-top:10px; }