
/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 12px; line-height: 18px; background:url(../images/bg.jpg) top repeat-x #f2f4f5;}

body, button, input, select, textarea { font-family: sans-serif; color: #666; }

/*
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #28469c; color: #fff; text-shadow: none; }
::selection { background: #28469c; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #28469c; text-decoration:none; }
a:hover {text-decoration:underline;}
a:visited { color: #28469c; }
a:focus { outline: none; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

@font-face {
    font-family: 'UbuntuBold';
    src: url('fonts/Ubuntu-B-webfont.eot');
    src: url('fonts/Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Ubuntu-B-webfont.woff') format('woff'),
         url('fonts/Ubuntu-B-webfont.ttf') format('truetype'),
         url('fonts/Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;}


h1, h2, h3, h4, h5 {Arial, Helvetica, sans-serif;}

h1 {font-size:28px; color:#28469c; font-weight:normal; line-height: 25px;}
h2 {font-size:28px; color:#28469C; font-weight:bold; line-height: 25px;}
h3 {font-size:20px;}
h4 {font-size:16px;}
h5 {font-size:14px;}

p {font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height:18px; color:#666; margin:0px;}


abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

a.noFloat{float: none !important;}

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 0; padding:0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
#process ul{padding-left: 35px;}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img { border: 0; -ms-interpolation-mode: bicubic; }

/*
 * Correct overflow displayed oddly in IE9
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/*
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
.feature>table{ margin: 25px 0 0 25px;}
#manuals {margin:0;}
#manuals a{margin-bottom: 0;}
#manualstr:nth-child(odd) {background: #FFF;}
#manuals tr:nth-child(even) {background: #CCC;}


/* =============================================================================
   Primary styles
   Author:
   ========================================================================== */



/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.accessory-item:before, .accessory-item:after { content: ""; display: table; }
.accessory-item:after { clear: both; }
.accessory-item { zoom: 1; }

/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}


/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/**** GLOBAL STYLES *****/
#main {background:url(../images/main-shadow.png) top center no-repeat; padding-top:30px;}

/**** HOME PAGE *****/
.homepage {background:url(../images/home-bg.jpg) top repeat-x #f2f4f5;}
img#banner {margin-top:-1px;}
.feature {background:#fff; margin-top:15px;}
.top {background:#28469c; height:40px;}
.top p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif; font-size:11px; text-transform:uppercase; margin:11px 0 0 22px; float:left;}
a.right-arrow, div.right-arrow {width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #7a7f7f; float:right;}
p.feature-text {padding:22px;}
.feature a {float:right; margin: 0 0 22px 0;}
.homepage .feature .top:hover {background: #E60012;}
.feature {min-height: 190px;}

/**** HEADER STYLES *****/
#container {min-height:700px;}
#logo {height: 107px; background:url(../images/header-gradient.png) top right no-repeat;}
#logo a {width:156px; height:59px; background:url(../images/takagi-logo.png) center no-repeat; display:block; text-indent:-9999px; z-index:1000; margin:24px 0;}
img#gradient {float:left; z-index:1; margin-top:-100px}
ul#top-nav {margin-top:45px; float:left;}
ul#top-nav li {list-style-type:none; font-family:'UbuntuBold', Arial, Helvetica, sans-serif; float:left; margin-right: 20px;}
ul#top-nav li a {color:#FFF; font-size:11px;}
#search_form {float:left; margin-top:42px;}
#keywords {border:none; height:15px; width: 155px; padding:5px; font-size:11px; color: #999; float:left;}
#go {border:none; cursor: pointer; text-indent: -9999px; width: 15px; height:15px; margin:5px 0 0 -25px;}

/**** FOOTER STYLES *****/
div.footer {width:100%; height:400px; background:#c3c7c6; margin-top:40px;}
div.footer div {background:url(../images/footer-shadow.png) top center no-repeat;}
div.footer ul {width:180px; float:left; padding:10px 0 0 20px;}
div.footer ul li { list-style-type:none; margin-bottom:5px;}
div.footer ul li a {color:#666}
div.footer ul li.main-footer-nav {margin-top:30px;}
div.footer ul li.main-footer-nav a {color:#28469c;}
div.footer ul.support {width:130px;}
#fb {float:left; margin-right:5px;}
#twitter {float:left;}
div.footer ul#copyright {width:850px;}
div.footer ul#copyright li a {text-decoration: underline;}

/******* PRODUCTS PAGE *********/
.blue-btn {background:#28449a; height:40px; margin:0px 20px 20px 0px; display:block; float:right;}
.blue-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}
.blue-btn a.right-arrow , .blue-btn div.right-arrow{width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #203a88; float:right;}
#tankless-products-img {float:right;}


.productHeadline{
	width: 930px;
	font-size: 25px;
	margin-top: 0px;
}

#product-breadcrumbs ul{
	list-style: none;
	display: inline;
}
#product-breadcrumbs ul li{
	display: inline;
}

#product-breadcrumbs ul li:after{
	content: " / ";
	}

#product-breadcrumbs ul li:last-child:after{
	content: none;
}

#product-breadcrumbs ul li a{
	text-decoration: none;
	}

span.product-name-specifier{
	font-size: 16px;
}

#unit-benefits{
	float: left;
}

p.climates{
	float: left;
}

p.warmer{
	padding-top: 15px;
	width: 100%;
	color: #ff0000;
}

p.cooler{
	color: #006699;
	width: 100%;
}

img.warmer-climates, img.cooler-climates{
	padding: 7px 10px 0px 0px;

}

img.estar{
	float: left;
	margin-right: 20px;
}

div.unit-benefits-showers{
	padding: 10px 30px 30px;
	float: left;
}
#rebate{
	position:relative;
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 10px;
	width: 190px;

}
#rebate h3{
	font-size: 12px;
	margin-bottom: 5px;
}

#rebate p{
	padding: 0 20px 5px 0;
}

#rebate button{
	position: absolute;
	right: 29px;
	top: 59px;

}

/*============= Siz's CSS ================= */
#process {padding:25px;}
#process ~ div { margin-top: 15px;}
.tankBenefits p{text-align: justify; padding-right: 20px; padding-bottom: 35px;}
#helpChoose {padding: 25px;}
#main_sub_content_right{ margin: 25px 0 0 25px;}
#taxList ul{list-style: none; margin-top: 20px; padding-left: 0;}
#taxList ul li{padding-bottom: 3px;}
#taxList ul a{float: none; margin:0;}

div#tabs{
	/*width: 625px;
	margin-left: 20px;*/
	margin-top: 25px;
	padding-bottom: 20px !important;
}

div#tabs p{
	margin-bottom: 18px;
}

div#tabs.ui-tabs{
	padding: 0;
}

.ventParagraph{
	/*margin-left: 27px;*/
}


div#tabs ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all{
	padding: 0;
}

div#tabs.ui-widget-content{
	border: none;
	background-color: white;
	padding: 0;
}



div#tabs li.ui-state-default{
	background-color: #a1a0a0;
	background-image: none;
}

div#tabs li.ui-state-active{
	background-color:#838888;
	background-image: none;
	padding-bottom: 0;

}

div#tabs li.ui-corner-top{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

div#tabs.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: 10px 22px;
	text-decoration: none;
	color: white;
	text-transform: uppercase;
	font-size: 10px;
}

ul.ui-widget-header{
	border: none;
	background: #f2f4f5;
}

div#tabs ul.ui-corner-all, div#tabs ul.ui-corner-bottom, div#tabs ul.ui-corner-right, div#tabs ul.ui-corner-br{
	border-radius: 0;
}

div#tabs ul.ui-tabs-nav li{
	margin: 1px 0px 0px 0px;
	padding: 0px 2.5px 0px 0px;

}

div#tabs ul.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active{
	border-radius: none;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-top: none;
	border-bottom: none;

}

div#tabs ul.ui-state-default, div#tabs ul.ui-widget-content .ui-state-default, div#tabs ul.ui-widget-header .ui-state-default{
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-top: none;
	border-bottom: none;
}

div#tabs ul.ui-state-default:last-child, div#tabs ul.ui-widget-content .ui-state-default:last-child, div#tabs ul.ui-widget-header .ui-state-default:last-child{
	border-right: none;
}

#where-to-buy-sidebar {
	/*margin-top: 100px;*/
	margin-top: 34px;
	display: inline;
	background-color: white;
}

#where-to-buy-sidebar h2.sidebar-header{
	background: #838888;
	color: white;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: normal;
	padding: 8px 20px;
	margin-top: 0px;
}

#where-to-buy-sidebar h6.sidebar-header{
	background: #838888;
	color: #fff;
	font-family: 'UbuntuBold', Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	padding: 8px 20px;
	margin: 0px;
	clear:both;
}

#where-to-buy-sidebar p {
	margin: 10px 15px 20px;
}



#listings{
	margin: 10px 15px;
}

p.city, p.state{
	color: #28449a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 18px;
}

p.change-location a{
	color: #666766;
	text-decoration: underline;
	font-size: 10px;
	font-weight: bold;
}
#listings ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
    margin-top: 20px;
    color: #000000;
}
#listings ol > li {
    position:relative; /* Create a positioning context */
    margin:0px 0 30px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:0px 8px 15px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */


}

div#listings ol > li:after{
	content: " ";
	background-color: #ccc;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 70%;
}

#listings ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    color:#fff;
    background:#28449a;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;

}
#listings li ol,
#listings li ul {margin-top:6px;}

#listings ol ol li:last-child {margin-bottom:0;}

#listings ol p{
	color: #000;
	margin-bottom: -10px;
}

a.more-info{
	color: #ed1c24;
	text-decoration: none;
	font-weight: bold;
	font-family: Arial, Helvetica;
}

/******* CONTACT PAGE *********/
div.feature form{
	font-family: Arial, Helvetica;
	text-transform: uppercase;
	font-size: 12px;
	text-align: right;
	margin-top: 15px;
	padding: 15px;


}

div.feature form label{
	text-align: right;
	margin-right: 25px;
}

div.feature form input{

}

div.feature form input,div.feature form select,div.feature form textarea{
	margin: 2px;
}

div.feature form select, div.feature form textarea{
	margin-left: 30px;
}

div#contact-list{
	padding: 15px 30px;
}

div#contact-list ul{
	list-style: none;
}

div#contact-list ul li{
	list-style: none;
	clear: left;
	margin: 15px 0px;
}

div#contact-list li:nth-child(even){
	background-color: #c9c9c9;
}

.contact-us{
	background-color: #c9c9c9;
	float: left;
	margin-bottom: 35px;
	padding: 15px 30px;


}

#contact-us{
		padding: 15px;
}

span.office{
	font-family:'UbuntuBold', Arial, Helvetica, sans-serif;
	color: #28469c;

}

span.addy, span.telephone, span.tollfree{
	float: left;
}

span.telephone, span.tollfree{
 	margin-left: 25px;
}

.contact-us p{

	color: #28469c;
	font-size: 14px;
}

.contact-us p.left, .contact-us p.right{
	font-family:'UbuntuBold', Arial, Helvetica, sans-serif;
	float: left;
}

.contact-us p.right{
	margin-left: 40px;
}

a.download{
	float: left;
	padding-top: 5px;
}

img.download{
	padding-top: 6px;
	float: left;
	margin-left: 15px;

}

#overview ul li {
	font-family: Arial, Helvetica, sans-serif;
	list-style: disc;
	margin-left: 20px;
	font-size: 12px;
	color: #666;
}

/*============= Siz's CSS ================= */

/* Cole */
div.accessory-item
{
    /*height: 80px;*/

   	margin: 0 20px 10px;
    border:solid 1px #aaaaaa;

}
div.ai-thumb
{
    float:left;
    margin-right:10px;
}

div.ai-content {
	width: 375px;
	float: right;
}

.vent-margin-right #leftTab { width: 234px;}


.accessory-item table, #vent-elbow table{margin-top: 5px;}
.accessory-item table td, .accessory-item table th, #vent-elbow table td, #vent-elbow table th {border: 0;}
.accessory-item table tr:first-of-type , #vent-elbow table tr:first-of-type{ background:#838888; color: white; font-weight: 600;}
.accessory-item table tr , #vent-elbow table tr{border-bottom: 1px solid #838888;}
div.ai-content span:nth-of-type(2){font-size: 17px; font-weight: 600;}
.ai-thumb img{height: 200px;}

#specs table {border: 1px solid #838888; line-height: 25px;}
#specs table tr {border-bottom: 1px solid #838888;}
#specs table tr td:first-child { border-right: 1px solid #838888; font-weight: 600;}
#specs table tr td{padding-right: 30px; padding-left: 5px;}
#specs table tr:nth-child(even) { background-color: #eee;}
#specs table tr:nth-child(odd) { background-color: #ccc;}

/******* VENTING PAGE *********/
.gray-btn {background:#28449a/*#e7e5e5*/; height:40px; margin:20px 20px 20px 0px; display:block; float:right; min-width: 50%; width: 80%;}
.gray-btn:hover {background:#E60012/*#e7e5e5*/;}
.gray-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}
.gray-btn a.right-arrow, .gray-btn div.right-arrow {width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #7a7f7f; float:right;}
.venting-category {margin:15px 0 0 0;}
.venting-section {height:80px; background:#fff; margin-top:10px;}
.venting-section img {margin:8px 0 5px 15px;}
.divider {height:5px; background:#F2F4F5;}

/* SIDEBAR NAVIGATION */
ul#sidebar {margin-top:15px; font-family:Arial, Helvetica, sans-serif;}
ul#sidebar h3 {color:#28449a; font-size:14px; margin-bottom:5px;}
ul#sidebar input {margin: 0 7px 0 0;}
ul#sidebar li {list-style-type:none; font-size:14px; color:#666; font-weight:bold;}
ul#sidebar li a {text-decoration:none; color:#28449a; text-transform:uppercase; font-weight:bold;}
ul#sidebar li a:hover {text-decoration:underline;}
ul#sidebar li ul li {text-indent: 20px; line-height: 22px;}
ul#sidebar li ul li a {color:#000; text-transform:none; font-weight:normal;}
ul#sidebar li ul li a:hover {text-decoration:underline;}

/* FILTER SIDEBAR NAVIGATION */
ul#filter-sidebar {margin-top:15px; font-family:Arial, Helvetica, sans-serif;}
ul#filter-sidebar h3 {color:#28449a; font-size:14px; margin-bottom:5px;}
ul#filter-sidebar input {margin: 0 3px 0 0;}
ul#filter-sidebar li {list-style-type:none; font-size:12px; color:#666; font-weight:normal;}
ul#filter-sidebar li a {text-decoration:none; color:#28449a; text-transform:uppercase; font-weight:bold;}
ul#filter-sidebar li a:hover {text-decoration:underline;}
ul#filter-sidebar li ul li {text-indent: 20px; line-height: 22px;}
ul#filter-sidebar li ul li a {color:#000; text-transform:none; font-weight:normal;}
ul#filter-sidebar li ul li a:hover {text-decoration:underline;}

/* PRODUCT CATEGORY PAGE */
.category-item {height:450px; background:url(../images/product-bg.jpg) top center repeat-x; margin-top:15px;}
.category-item:hover {background:url(../images/product-hover-bg.jpg) top center repeat-x; cursor:pointer;}
.category-item p {font-size: 14px; margin:5px 0 0 15px;}
a.product-name {font-size:16px; color:#28449a; font-weight:bold; text-align:center; display:block; margin:7px 5px;}
a.category-product img {padding:10px; display:block;}
.imageCheck {margin:8px 0 0 8px;}
label.compare { vertical-align: text-bottom; margin-left:5px;}
.view-prod-btn {background:#28449a; height:40px; width:180px; display:block; margin:8px 0 0 25px;}
.view-prod-btn-hover { background: #E60012; }
.view-prod-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}

.side-prod-btn {background:#28449a; height:40px; width:220px; display:block; margin:8px 0 0 0;/*border-top: 10px solid #e8eaeb;*/border-bottom: 10px solid #e8eaeb;}
.side-prod-btn-hover, .side-prod-btn:hover { background: #E60012; }
.side-prod-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 10px 16px !important; float:left;}


#rebate .view-prod-btn{margin: 0 0 10px 0;}
.feature #rebate a {float: none;}
.productPageLink {float: left !important;}

/* PRODUCT PAGE */
.product-img {margin:15px; float: left;}
h2.product-name {margin-top:30px;}
.product-text p {padding:0 20px 20px 0; line-height: 20px;}
.product-text ul {margin-left: 15px; margin-bottom: 20px;}
.quote-btn {background:#28449a; height:40px; margin:0px 20px 20px 0px; display:block; float:left;}
.quote-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:14px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}
.quote-btn a.bryan-arrow {width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #203a88; float:left;}
.demo-btn {background:#838888; height:40px; margin:0px 20px 20px 0px; display:block; float:left;}
.demo-btn p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}
.demo-btn a.bryan-arrow {width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #7a7f7f; float:left;}

#vent-elbow {
	min-height: 500px;
}

#vent-elbow p {
	margin: 15px 0 15px 25px;
}

.vent-elbow-tabs {
	width: 730px !important;
	margin-right: 0;
}

/*#vent-elbow {
	width: 659px;
}

.vent-elbow-tabs {
	width: 659px !important;
	margin-right: 0;
}*/

#topGroup {
	margin-top:25px;
}

.vent-float-right {
	width: 627px;
	float: right !important;
}

.vent-margin-right {
	margin-right: 80px;
}
.vent-float-right h2{
	padding: 20px;
}

#leftTab{
	float: left;
	margin-top: 14px;
}

#leftTab ul{
	list-style: none;
	font-size: 13px;
}

#leftTab ul li:first-child{
	margin-top:1px;
}

#leftTab ul li{
	font-size: 10px;
	max-width: 300px;
	margin-bottom: 8px;
	padding: 5px 0 5px 15px;
	width: 152%;
	font-weight: 500;
	border-top-left-radius:2em;
	border-bottom-left-radius:2em;
}

#leftTab ul li.selectedLeftTab {
	font-size: 12px;
	color:#28449a;
	background:white;
	padding: 5px 0 5px 15px;
	width: 130%;
	border-top-left-radius:2em;
	border-bottom-left-radius:2em;
}

.firstButton {
	margin-left: 20px;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}




/******* MAIN NAVIGATION STYLES *********/
#menu {
	list-style:none;
	width:940px;
	margin-top:0px;
	padding:0px;
	background: #fff;
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding:17px 32px 13px 32px;;
	border:none;
	height:20px;
}

#menu li:hover {
	background:#999;

}

#menu li a {
	font-family:'UbuntuBold', Arial, Helvetica, sans-serif;
	font-size:12px;
	letter-spacing:.05em;
	color:#666;
	display:block;
	outline:0;
	text-decoration:none;
	text-transform: uppercase;
}

#menu li:hover a {
	color:#fff;
}

#menu li .drop {

}

#menu li:hover .drop {

}

#menu li a:hover {color:#333;}

.dropdown {
	margin:14px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:15px;
	z-index:1000;

	/* Gradient background */
	background:#999;

}

	.dropdown a {color:#fff !important;}
	.dropdown a:hover {color:#333 !important;}

	.nav-support {width:225px;} /*width:160px;*/
	.nav-why-tankless {width:225px;}/*width:170px;*/
	.professionals {width:155px;}
	.nav-products {width:430px;}
	.nav-professionals{width: 217px;}
	.nav-products img {float:left;}
	div.products-btns {float:right; margin-top:5px;}
	div.products-btns a:hover {background: #E60012;}
	.nav-products a {background:#28449a; height:40px; margin-bottom:10px;}
	.nav-products a p {color:#fff; font-family:'UbuntuBold', Arial, Helvetica, sans-serif !important; font-size:11px !important; text-transform:uppercase; margin:11px 16px 0 16px !important; float:left;}
	.nav-products .right-arrow {width:40px; height:40px; background:url(../images/right-arrow.png) center no-repeat #7a7f7f/*#203a88*/; float:right;}

#menu li:hover .dropdown {
	left:0px;
	top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:7px;
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}

#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

.dropdown a {font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; color:#000; line-height:26px;}

.browse {width:530px;}
.learn {width:97px;}
.support {width:150px;}

a.browse-nav-item {
	float:left;
	width:110px;
	height:145px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	border: 1px solid #ccc; margin:10px;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(PIE.htc);
}

a.browse-nav-item img {
	margin-top:2px;
}

a.browse-nav-item:hover {border:1px solid #004e90; cursor:pointer;}

a.browse-nav-item p {font-family:Arial, Helvetica, sans-serif; font-size:11px !important; text-align:center !important;}

/********************REGISTRATION FORM********************/
.warrantyReg {
	padding-left: 22px;
	float:left;
}
.warrantyReg fieldset {
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 630px;
}
.dots {
  border-top: 1px dotted #ccc;
  width: 560px;
  margin: 20px 0px;
  clear: both;
}
.warrantyReg legend {
  font-weight: bold;
}
/*.warrantyReg fieldset ol {
  list-style: none;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 0;
  padding-left: 0em;
}*/
.warrantyReg fieldset li {
  list-style: none;
  padding-right: 1em;
  padding-bottom: 10px;
  padding-left: 0;
  clear: left;
}
.warrantyReg fieldset.submit {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 560px;
}
.warrantyReg fieldset.submit input {
  width:150px;
  background:#28469C;
  color:#FFFFFF;
  float:right;
}
.warrantyReg li label {
  position: relative;
  margin-right: 1em;
  text-align: right;
}
.warrantyReg li input {
  background-color:#eeeeee;
  border:solid 1px #cccccc;
  color:#666666;
  padding:10px;
  width:250px;
  display:block;
}
.warrantyReg select {
  -webkit-appearance: button;
  -webkit-border-radius: 0px;
  -webkit-padding-end: 35px;
  -webkit-padding-start: 10px;
  background-image: url(../../images/select-arrow-tall.png);
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #eee;
  border: 1px solid #CCC;
  color: #666666;
  margin-top: 2px;
  overflow: hidden;
  padding: 9px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  width: 270px;
  display: block;
}

.warrantyReg input:focus, .warrantyReg select.input:focus, .warrantyReg select:focus { border: 1px solid #0099ff; */ background: #fff;}

.warrantyReg #option1, .warrantyReg #option2, .warrantyReg #option3, .warrantyReg #option4, .warrantyReg #option5, .warrantyReg #option6, .warrantyReg #option7, .warrantyReg #option8, .warrantyReg #option9, .warrantyReg #option10, .warrantyReg #option0 {
  width:30px;
  float:left;
  margin-top:10px;
  display: block;
}

.warrantyReg .recommend td label {
	width: 40px;
	text-align: center;
	margin: 0px;
	display: inline-block;
}
.warrantyReg .recommend td input {
	left: 10px;
	position: relative;
}
.warrantyReg textarea {
  background-color:#EEEEEE;
  border:solid 1px #999999;
  color:#666666;
  padding:5px;
  width:400px;
}

.warrantyReg label em, .warrantyReg em.required {
  color: #ff6600;
  font-style: normal;
}
.warrantyReg label strong {
  position: absolute;
  left: 420px;
  width: 19em;
  color: #f36911;
  font-weight: normal;
  text-transform: uppercase;
  visibility: hidden;
}
.warrantyReg .error {
  color: #ff0000;
}
.warrantyReg .writeReview {
  padding: 10px 0 0;
}
span.not_likely {
  float: left;
  color: #999;
  font-size: 10px;
  margin-left: 15px;
}
span.extremely_likely {
  float: right;
  color: #999;
  font-size: 10px;
  margin-right: 10px;
  margin-right\9: 0px;
}
. ie10 span.extremely_likely { /* Only works in IE10 */
  margin-right: 0px;
}

.btn {
	background: #007e44;
	border: double 3px #fff !important;
	display: block;
	padding: 10px;
	color: #fff;
	font-size: 15px;
	width: 100px;
	cursor: pointer;
	text-align: center;
}
.warranty_right_column {
	float: right;
	width: 236px;
	padding: 0 10px 5px 10px;
}
.product_display {
	float: right;
	width: 370px;
	margin: 25px 0px 20px 70px;
	border-left: 3px dotted #ccc;
	padding-left: 60px;
}



@-moz-document url-prefix() {
  .warrantyReg select {
	  background-image: none;
	  background-position: none;
	  margin-top: 0px;
  }
  .warrantyReg input {
	  padding: 10px;
  }
}

.warranty_right_column p:first-of-type{
	margin-top: 30px;
}

. ie10 .warrantyReg select { /* Only works in IE10 */
background-image: none !important;
margin-top:0px !important;
}

.warrantyReg select {
+background-image: none; /* Only works in IE7*/
background-image: none\9; /* IE6, IE7, IE8, IE9 */
background-image: none\0; /* IE8, IE9 */
background-image: none\9\0; /*Only works in IE9*/
+margin-top:0px;
margin-top:0px\9;
margin-top:0px\0;
margin-top:0px\9\0;
+padding: 10px;
padding: 10px\9;
padding: 10px\0;
padding: 10px\9\0;
}

.warrantyReg tr{
	vertical-align: top;
}

. ie10 .warrantyReg .recommend td label {
width: 40px;
text-align: right;
margin: 0px;
display: inline-block;
}
.warrantyReg .recommend td label {
width: 40px\9;
text-align: center\9;
margin: 0px\9;
display: inline-block\9;
}

. ie10 .warrantyReg .recommend td input {
left: 10px;
position: relative;
}
.warrantyReg .recommend td input {
left: 10px\9;
position: relative\9;
}

/*.warrantyReg .BVRRRatingSummaryLink a {
  background: url(http://whirlpoolwaterheaters.ugc.bazaarvoice.com/bvstaging/static/1028-en_us/buttonWrite.gif) no-repeat 0 0;
  display: block;
  zoom: 1;
  float: left;
  width: 145px;
  height: 42px;
  text-indent: -9999px;
  text-align: left;
  margin-left: -3px;
}*/



a.info {display:block; width:15px; height:15px; background:url(../../images/info-icon.png) top center no-repeat; text-indent:-9999px; cursor: pointer; float: right; right: -10px; position: relative; padding-bottom: 0px !important; margin: 0px;}

div.tooltip.register {display:none; font-size:11px; line-height: 13px; width: 500px !important; height: auto !important; background: #fff; border-radius: 8px; -moz-border-radius: 8px; padding:8px 8px 8px 11px !important; -moz-box-shadow: 0px 0px 10px #ccc; -webkit-box-shadow: 0px 0px 10px #ccc; box-shadow: 0px 0px 10px #999; position:absolute; z-index:9999;}

a.info:hover + div.tooltip {display:block;}
div.tooltip:hover {display:block;}




/*/////////////////////////
 Skylar's CSS
/////////////////////////*/

.feature .sec_wrap {margin:30px 25px;}

.sec_wrap table .grid_12 {width:100% !important;}



/******* CONTACT US *********/

.con_row {clear:both; width:550px; margin: 0 auto; float:none; overflow:hidden;}
.con_row+.con_row+.con_row {width:450px; margin: 50px auto;}

.con_add {margin: 10px 20px; float:left;list-style:none; font-size:12px;}

.contactus_form {list-style:none; font-size:16px;}
.contactus_form li, .contactus_form li label, .contactus_form li input, .contactus_form li select  {clear:both; float:left; width:98%; margin: 2px; padding:5px 0;}




/* magnifying glass icon */
.zoom {
	display:inline-block;
	float:right;
	width:225px;
}

.zoom:after {
	content:'';
	display:block;
	width:33px;
	height:33px;
	position:absolute;
	top:0;
	right:0;
	background:url(icon.png);
}

.zoom img {
	display: block;
}

.zoom img::selection { background-color: transparent; }

#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }

/* switype search */
#siteSearch input.st-default-search-input{
  width: 248px;
  border-radius: 0;
  height: 1em;
  border: 0;
  margin-right: 10px;
}
#siteSearch #searchBtn{
  width: 69px;
  height: 28px;
  background-color: #CECECE;
  border-radius: 0;
}
#siteSearch #searchBtn i.fa.fa-search{
  font-size: 1.2em;
  color: #ffffff;
}






























/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
