#middle {}
	#banner,
	#bannerImage {height: 323px;}
		#bannerImage {
			background: transparent url(/elements/images/interface/hp-rotator-bg.png) 100% 0 no-repeat;
			position: relative;
		}
			#bannerImage .banner {
				display: block;
				height: 323px;
				left: 0;
				overflow: hidden;
				position: absolute;
				top: 0;
				width: 679px;
			}
			#bannerImage ul {
				bottom: 20px;
				position: absolute;
				right: 0;
				text-align: center;
				width: 274px;
			}
				#bannerImage ul li {
					display: inline-block;
					*display: inline;
				}
					#bannerImage ul li a {
						background: transparent url(/elements/images/interface/rotator-dots.png) 0 0 no-repeat;
						display: inline-block;
						height: 14px;
						width: 25px;
					}
					#bannerImage ul li a:hover,
					#bannerImage ul li a.current {background-position: -25px 0;}
			#bannerImage .description {
				height: 260px;
				position: absolute;
				right: 20px;
				top: 20px;
				width: 235px;
			}
				#bannerImage .description h2 {
					color: #036;
					font-size: 14px;
					font-weight: bold;
					line-height: 22px;
				}
				#bannerImage .description p {
					color: #333;
					font-size: 12px;
					line-height: 14px;
					margin: 0 0 2em;
				}
	#solutionsBar {
		background: transparent url(/elements/images/interface/solutionsBarBGRound.png) center top no-repeat;
		margin: -12px 0 0 0;
	}
#calloutsHeader {
	display: block;
	height: 12px;
	left: 0;
	position: absolute;
	top: -12px;
	width: 978px;
	z-index: 9;
}
#callouts hr {
	background: transparent url(/elements/images/interface/footerBorder.png) 0 0 repeat-x;
	border: none;
	display: block;
	font-size: 0;
	line-height: 0;
	height: 6px;
	margin: 0;
	padding: 0;
}
#callouts h1 {
	color: #0b3f5c;
	font: bold 14px/20px "Futura Std", Arial, sans-serif;
	margin: 0;
}
#callouts p,
#callouts h4 {
	font-size: 93%;
	line-height: 1.333em;
	margin: 0 0 1em;
}
#callouts a.learn-more {
	background: transparent url(/elements/images/interface/learn-more-button.png) 0 0 no-repeat;
	display: block;
	height: 22px;
	text-indent: -9999em;
	width: 122px;
}
#callouts a.learn-more:hover {background-position: 0 -22px;}
#callouts h4, #callouts h4 a {color: #069; font-weight: bold; margin: 0; line-height: 1.333em;}
#callouts .byline {color: #666; margin: 0 0 0.5em;}
#callouts .callout {}
#callouts .primary {
	background: #fff url(/elements/images/interface/primary-callout-bg.png) 6px 0 no-repeat;
	padding: 10px 6px;
	position: relative;
}
#callouts .primary h1.title {
	height: 40px;
	margin: 25px 0 10px;
}
#callouts .secondary {
	background: #9acfef url(/elements/images/interface/secondaryCalloutBG.jpg) 0 0 repeat-x;
	padding: 25px;
}
#callouts .secondary .column {
	float: right;
	width: 275px;
}
#callouts .secondary .column:first-child {float: left;}
#callouts .secondary .video {
	float: left;
	margin: 0 20px;
	width: 322px;
}
#callouts input[type="text"] {
	background: transparent url(/elements/images/interface/form-field-gradient-blue.png) 0 0 repeat-x;
	border: 1px solid #fff;
	color: #666;
	font: normal 11px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	padding: 0 5px;
	width: 180px;
}
#callouts input.sign-up {
	background: transparent url(/elements/images/interface/sign-up-button.png) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	height: 22px;
	padding: 0;
	text-indent: -9999em;
	width: 66px;
	vertical-align: middle;
}
#callouts input.sign-up:hover {background-position: 0 -22px;}
#socialMediaLinks {margin: 30px 0 0;}
#socialMediaLinks h2 {
	display: inline-block;
	*display: inline;
	height: 24px;
	vertical-align: bottom;
}
#socialMediaLinks a {
	background: url(/elements/images/interface/social-media-icons.png) no-repeat;
	display: inline-block;
	height:24px;
	width:24px;
	text-indent:-9999px;
	margin-left:4px;
}
#socialMediaLinks a.twitter {background-position: 0 -24px;}
#socialMediaLinks a.youtube {background-position: -24px -24px;}
#socialMediaLinks a.facebook {background-position: -48px -24px;}
#callouts .primary .product-bucket {
	float: left;
	width: 238px;
}
#callouts .primary .product-bucket a {
	background: transparent url(/elements/images/interface/product-bucket-bg.png) 0 200px no-repeat;
	display: block;
	height: 191px;
	margin: 0 auto;
	text-align: center;
	width: 201px;
}
#callouts .primary .product-bucket a:hover {background-position: 0 0;}
#callouts .primary .product-bucket img {}
#callouts .primary .product-bucket h1 {height: 30px;}
#callouts .primary .product-links {
	background: transparent url(/elements/images/interface/hp-productlinks-bg.png) 0 0 repeat-x;
	bottom: 0;
	clear: both;
	color: #fff;
	height: 33px;
	line-height: 33px;
	left: 0;
	position: absolute;
	text-align: center;
	width: 100%;
}
#callouts .primary .product-links strong {text-transform: uppercase;}
#callouts .primary .product-links a {
	color: #fff;
	text-decoration: underline;
}
#callouts .primary .product-links .arrow {
	background: transparent url(/elements/images/interface/hp-productlinks-arrow.png) 0 0 no-repeat;
	display: block;
	height: 15px;
	width: 29px;
	position: absolute;
	top: -15px;
}
#callouts .primary #productLinks-water .arrow {left: 118px;}
#callouts .primary #productLinks-air .arrow {left: 350px;}
#callouts .primary #productLinks-ventilation .arrow {left: 582px;}
#callouts .primary #productLinks-energy .arrow {left: 814px;}
