/* basic page styling for all pages */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #000000;
	background-image: url('images/background.gif');
	background-color: #248DBE;
	background-repeat: repeat-x;
	background-position: 0px 0px
}
p, li, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	line-height: 130%;
	color: #000000;
	margin-bottom: -0.3em;
}
th {
	font-weight: bold;
	background-color: #FFECCE;
}
a:link {
	color: #248DBE;
	text-decoration: underline;
}
a:visited {
	color: #9966CC;
	text-decoration: underline;
}
a:hover {
	color: #248DBE;
	text-decoration: underline;
}
a:active {
	color: #248DBE;
	text-decoration: underline;
}

/* The h1 is the larger gold, bold text used for page titles */
h1 {
	font-size: 120%;
	color: #FFCC66;
	font-weight: bold;
	margin-top: 10px;
}
/* The h2 is the blue bold text used for common headings */
h2 {
	font-size: 100%;
	font-weight: bold;
	color: #248DBE;
}
/* The h3 is the orange bold text used as the headings for the
tertiary navigation */
h3 {
	font-size: 13px;
	font-weight: bold;
	color: #FFCC66;
	margin-bottom: -10px;
	margin-top: 0px;
}
/* .resources head was created to style the headings on the customer IAQ
resources page. It is a class of a h3 */
.resourcesHead {
	background-color: #7CBBD8;
	color: #FFFFFF;
	width: 100%;
	padding-bottom: 3px;
	padding-left: 5px;
	padding-top: 3px;
}

/* .breadcrumbs is the blue normal text used above each page title,
it is a class of a paragraph */
.breadcrumbs {
	color: #248DBE;
	margin-top: 10px;
	margin-bottom: -10px;
}
/*The various layers used on the pages*/

/*topnavigation is a layer that contains just the navigation items at the top of
each page*/
#topnavigation {
	 position:absolute;
	 left:0px;
	 top:90px;
	 width:760px;
	 height:23px;
	 z-index:3
}
/*topbanner is the layer at the very top of the homepage that holds the logo
and login image. The login image is mapped */
#topbanner {
	position:absolute;
	left:0px;
	top:0px;
	width:760px;
	height:90px;
	z-index:2;
	border: 1px none #000000;
	overflow: visible;
}
/*topbanner2nd is the layer at the very top of all the other pages that holds the
logo and the pictures up in the right hand corner that change depending on what
page you are on */
#topbanner2nd {
	position:absolute;
	left: 0px;
	top: 0px;
	height:90px;
	z-index:2;
	border: 1px none #000000;
	background-color: #C8E2EF;
	margin-top: 0px;
	margin-left: 0px;
	visibility: visible;
}
/*content is the layer on the top page that contains the rotating pictures and
the table with the buttons with the rollover effects. It has child layers called
buttontable and pictures */
#content {
	position:absolute;
	left:0px;
	top:113px;
	width:760px;
	/* FOR NEWS 2008-1-21 520->550 */
	height:520px;
	z-index:3;
	background-color: #FFFFFF;
}
/*content2nd is main text layer for all secondary pages, this layer is marked editable
in all of the templates */
#content2nd {
	position:absolute;
	left:208px;
	top:113px;
	width:542px;
	z-index:3;
	background-color: #FFFFFF;
	overflow: visible;
}
/*sidebar is the layer on all secondary pages that contains the sidebar navigation */
#sidebar {
	padding-top: 13px;
	position:absolute;
	left:0px;
	top:113px;
	width:208px;
	height:427px;
	z-index:1;
	background-image: url('images/2nd_sidebar_bkgr.gif');
	border: 1px none #000000;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 10px
}
/*sidebarnonav is similar to sidebar accept that we have deleted the background
image. On pages that use this layer, we will add an image into this layer on
each specific page.
This layer is used on pages where we didn't want any
sidebar navigation. Specifically company_info/contact_us.html and
company_info/request_info.html, and privacy policy */
#sidebarnonav {
	position:absolute;
	left:0px;
	top:113px;
	width:208px;
	height:427px;
	z-index:1;
	border: 1px none #000000;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
/*pictures is used on the homepage only. It is the layer that holds the rotating
pictures and it is a child of the content layer */
#pictures {
	position:absolute;
	width:303px;
	height:401px;
	z-index:1;
}
/*buttontable is used only on the homepage. It is the layer that holds the rollover
buttons in the middle of the page. It is a child of the content layer */
#buttontable {
	position:absolute;
	width:630px;
	/* FOR NEWS 2008-1-21 454->604 */
	height:454px;
	z-index:2;
}

#bldtable {
	position:absolute;
	top:0px;
	left:632px;
	width:126px;
	height:400px;
	text-align:right;
/*	background-image: url('images/2nd_sidebar_bkgr_bld.gif');*/
}
/*navhomeowners holds the dropdown menu for the homeowners button. Its default visibility
is set to hidden, so if you need to make a change in the dropdown list, you will need
to use Dreamweaver's layer menu to select it */
#navhomeowners {
	position:absolute;
	left:0px;
	top:113px;
	background-color: #E9F3F8;
	border-right: 1px solid #248DBE;
	border-left: 1px solid #248DBE;
	z-index:5;
	width: 200px;
	visibility: hidden;
}
/*navhvac holds the dropdown menu for the hvac professionals button. Its default visibility
is set to hidden, so if you need to make a change in the dropdown list, you will need
to use Dreamweaver's layer menu to select it */
#navhvac {
	position:absolute;
	left:141px;
	top:113px;
	width:200px;
	background-color: #E9F3F8;
	border-right: 1px solid #248DBE;
	border-left: 1px solid #248DBE;
	z-index:6;
	visibility: hidden;
}
/*navcompany holds the dropdown menu for the company information button. Its default
visibility is set to hidden, so if you need to make a change in the dropdown list,
you will need to use Dreamweaver's layer menu to select it */
#navcompany {
	position:absolute;
	left:260px;
	top:113px;
	width:200px;
	background-color: #E9F3F8;
	border-right: 1px solid #248DBE;
	border-left: 1px solid #248DBE;
	z-index:7;
	visibility: hidden;
}
/*navbox is the layer used on pages that require tertiary navigation. It floats right of
whatever tag it follows. It is also styled to have a blue border on the left hand side.
The tertiary navigation is placed in this layer */
#navbox {
	float: right;
	width: 200px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #248DBE;
	margin-bottom: 10px;

}
/*toppara is only used on the homepage. It is the layer that holds the welcome text. */
#toppara {
	position:absolute;
	left:300px;
	top:125px;
	width:460px;
	z-index:4;
	height: 70px;
}
/*hotspot is only used on the homepage. It is the layer that holds the hot announcement. */
#hotspot  {
	position:absolute;
	left:248px;
	top:517px;
	width:500px;
	height:60px;
	z-index:8;
	/*display:none;*/
}

/*styles used for the dropdown navigation lists. .topnav is a class of the ul and
.topnav li styles any list items found in the ul. The links styles deferentiate these
links from your average text links in the pages */
.topnav {
	margin: 0px;
	padding: 0px;
}
.topnav li {
	font-size: 12px;
	display: block;
	list-style-type: none;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #248DBE;
	padding: 0.1em 0.3em 0.3em;
	color: #2978AD;
}
.topnav a:link {
	font-weight: normal;
	color: #248DBE;
	text-decoration: none;
}
.topnav a:visited {
	font-weight: normal;
	color: #248DBE;
	text-decoration: none;
}
.topnav a:hover {
	font-weight: bold;
	color: #248DBE;
	text-decoration: none;
}
.topnav a:active {
	font-weight: bold;
	color: #248DBE;
	text-decoration: none;
}
/*bottominfo and its associated links really is only relevant to the homepage where
I wanted the information at the bottom of the page to fall on the blue background */
.bottominfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	/* FOR NEWS 2008-1-21 4 -> 40 */
	margin-top: 4px;
	margin-left: 8px;
	margin-bottom: 8px;
}
.bottominfo a:link {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
.bottominfo a:visited {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
.bottominfo a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.bottominfo a:active {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: underline;
}
/*bottominfo2ndpage is used to style the information at the bottom of all the secondary
pages where that info falls on a white background. I didn't need any links info as it
could just use the page links used in text */
.bottominfo2ndpage {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #2978AD;
	margin-top: 15px;
	margin-left: 0px;
	margin-bottom: 8px;
	width: 542px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #248DBE;
}
/*these styles are used for the sidebar navigation on all secondary pages. .sidebartext is
a class for the overall ul. It has list items defined in .sidebartext li. Then there is
a nested ul that uses the class sidebarsubtext. It and .sidebarsubtext li style the
indented bulletted list. I only had to create link items for sidebartext since sidebarsubtext
inherits that link behavior */
.sidebartext {
	margin-left: 0px;
	padding-left: 0px;
}
.sidebartext li{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #248DBE;
	list-style-type: none;
	line-height: 15px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;

}
.sidebartext span{
	color: #FFCC66;
	font-weight: bold;
	text-decoration: none;
}

.sidebarsubtext {
	margin-left: 20px;
	margin-bottom: 10px;
	padding-left: 0px;
}
.sidebarsubtext li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #248DBE;
	list-style-type: square;
	line-height: 15px;
	margin-bottom: 5px;
	font-weight: normal;
	margin-top: 3px;
	list-style-position: outside;
}
.sidebarsubtext span{
	color: #FFCC66;
	text-decoration: none;
}

.sidebartext a:link {
	color: #248DBE;
	text-decoration: none;
}

.sidebartext a:visited {
	color: #248DBE;
	text-decoration: none;
}
.sidebartext a:hover {
	color: #248DBE;
	text-decoration: underline;
}

.sidebartext a:active {
	color: #248DBE;
	text-decoration: underline;
}

/*bodylist and bodylist li defines the bulleted lists used in the main text body of the
pages */
.bodylist {
}
.bodylist li {
	margin-left: -25px;
	list-style-type: square;
	margin-bottom: 5px;
}
.bodylist li li {
	list-style-type: disc;
}

/*here are some miscellaneous styles I found I needed for unusual situations */


/*toppagetext is only used on the text above the buttons on the homepage. I wanted that
text slightly larger and in blue */
.toppagetext {
	font-size: 12px;
	color: #248DBE;
	line-height: 16px;
}
/*I used tables on the landing pages for Homeowners and HVAC Professionals. The following
style simply pads the table at the top to separate it more from the text above */
.landingtable {
	margin-top: 20px;
}
/*Within these same tables I wanted to pad the cells that held the .html text, but only on
the right hand side */
.rightcellpad {
	padding-right: 8px;
}
/*On the landing pages, Sandy wanted some sentences to stand out so I made them bold
and blue by applying this class to the paragraph tag */
.boldbluetext {
	font-weight: bold;
	color: #248DBE;
}
/*This class is used to float the lung diagrams to the right of the page and let the
text flow around them */
.imagefloatright {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
}
/*This class is used on the Announcements and Press Release pages and styles the date
under the articles title */
.articledate {
	color: #248DBE;
	margin-top: 10px;
	margin-bottom: -10px;
}
/*This is used for addresses (see the Contact Us page)*/
.address {
	color: #248DBE;
	margin-left: 20px;
	margin-top: 10px;
}
/*These following items were used to style the ordered lists on the Announcement page.
I don't think we have any other ordered lists on the site*/
ol {
	margin-top: 10px;
}
.orderlistitem {
	margin-bottom: 5px;
}
.orderedlistalpha {
}
.orderedlistalpha li {
	list-style-type: lower-alpha;
	margin-bottom: 5px;
	margin-top: 3px;
}

/*These styles are used for testimonials. The first is used for the testimonial and
the second is used for the testimonial attribution */

.testimonial {
	font-style: italic;
}
.testimonialattr {
	font-style: normal;
	margin-left: 5em;
}
.backtotop {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	margin-top: 15px;
	font-weight: bold;
}

/* The bluebox is used when we want a float right box which highlights some information */

.bluebox {
	float: right;
	width: 200px;
	height: 100%;
	margin-bottom: 0px;
	background: #7CBBD8;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 0px;
}

/* We have to change some colors to make them visible and style margins differently*/

.bluebox h2 {
	color: white;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 14px;
}

.bluebox p {
	color: black;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 12px;
}
.bluebox ol {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.bluebox li {
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 10px;
	font-size: 12px;
}

.bluebox a:link {
	color: white;
}
.bluebox a:visited {
	color: white;
}
.bluebox a:hover {
	color: white;
}
.bluebox a:active {
	color: white;
}
/* The graphicsTable elements are used on the media_information page */

.graphicsTable {
	margin-top: 30px;
}
.graphicsTable h2 {
	margin-bottom: 10px;
}
.graphicsTable td {
	margin-right: 10px;
}
.graphicsTable p {
	margin-right: 10px;
	font-size: 100%;
	margin-top: 5px;
	margin-bottom: 8px;
}
/* The graphics separator simply styles the middle cell in the table to have a
border on the left hand side*/

.graphicsTableSeparator {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #248DBE;	
}

/* In the other_images_print.html page, we want to space out the images vertically */

.verticalpad {
	margin-top: 20px;
	margin-bottom: 20px;
}

.imagefloatleft {
	float: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
/* styles the text in the Hot Announcement at the bottom of the home page */
.HotAnnouncementText {
	text-align: left;
	font-size: 12px;
	color: #248DBE;
	margin-right: 3px;
}
.preLink {
	color: #999999;
	text-decoration: underline;
}


/* styles the text in the prebox at the bottom of the home page */

.pre_box	{ 
	font-size: 9pt;
	margin: 10px auto 10px 10px;
	width: 370px;
	padding: 10px;
	background-color: #248DBE;	
	line-height: normal;
	color: #ffffff;
 }


.pre_box a, .pre_box a:link, .pre_box a:visited, .pre_box a:hover {
	color: #ffffff;
}


.pre_box2	{ 
	font-size: 9pt;
	margin: 10px auto 10px 10px;
	width: 370px;
	padding: 10px;
	background-color: #FFFFFF;	
	line-height: normal;
	color: #248DBE;
 }
.pre_box2 a, .pre_box2 a:link, .pre_box2 a:visited {
	color: #248DBE;
}
.pre_box2 a:hover {
	color: #F86868;
}