/**
 * Content container styles
 * Overrides epa-core.css
 */
#page {
  padding-bottom: 0;
  background-image: none;
}

#content {
  margin-top: 6px;
  font: 100%/100% Verdana,Geneva,Arial,Helvetica,sans-serif;
  color: #222;
  background-color: #FFF !important;
}

#content a,
#content a:visited { color: #117FB3; }
#content a:hover { color: #78A97F; }

#content ul,
#content ol { margin-right: 0; }

#content ul#share { display: none; }

#content ul.tabs-js { margin: 0 -30px 18px; }

#content img { height: auto; }

/**
 * Header Container
 */
#header_container {
  border-bottom: 1px solid #445157;
  height: 125px;
  position: relative;
  background: transparent url("../images/container_bg.jpg") top left no-repeat;
}

*+html #header_container { z-index: 100; }

#header_container #watersense_seal {
	position: absolute;
  right: 16px;
  top: 3px;
}

#header_container #watersense_logo {
  position: absolute;
  left: 12px;
  bottom: 11px;
}

#header_container #watersense_tag {
  position: absolute;
  left: 244px;
  bottom: 11px;
  font-size: 116.6%;
  font-family: Arial, Helvetica, sans-serif;
  color: #727272;
}

/**
 * Header: primary navigation
 * Needs #content namespacing to override the core CSS
 */
#content ul#primary_navigation {
	margin: 0;
  padding: 10px 0 0;
  width: 716px;
  height: 41px;
  background: transparent url("../images/primary_navigation_bg.png") top left repeat;
}

#content ul#primary_navigation li {
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
  list-style: none outside none;
}

*+html #content ul#primary_navigation li { z-index: 100; }

#content ul#primary_navigation li:hover { background-color: #478648; }
#content ul#primary_navigation li:hover > ul { display: block; }

#content ul#primary_navigation li a {
  padding: 0 11px;
	display: block;
  font-size: 1.3333em;
	line-height: 41px;
	color: #FFF;
	text-decoration: none;
}

#content ul#primary_navigation li ul {
	margin: 0;
	padding: 0;
	width: 200px;
	position: absolute;
	top: 100%;
	left: 0;
  z-index: 100;
	display: none;
	background-color: #478648;
}

#content ul#primary_navigation li ul li {
	position: relative;
	float: none;
}

#content ul#primary_navigation li ul li.has_child {
	background-image: url(../images/arrow_right.png);
	background-repeat: no-repeat;
	background-position: 97% 9px;
}

#content ul#primary_navigation li ul li:hover {
	background-color: #0A5815;
}

#content ul#primary_navigation li ul li a {
	padding: 5px 12px 6px;
	height: inherit;
	font-size: inherit;
	line-height: inherit;
}

*+html #content ul#primary_navigation li ul li a {
  font-size: 100%;
  line-height: 1;
}

#content ul#primary_navigation li ul li ul {
	left: 100%;
	top: 0;
}

/**
 * Header: secondary navigation
 * Needs #content namespacing to override the core CSS
 */
#content ul#secondary_navigation {
	margin: 0;
	padding: 0;
  position: absolute;
  right: 0;
  bottom: 5px;
  z-index: 10;
  list-style-type: none;
}

#content ul#secondary_navigation li {
  margin: 0;
  padding: 0 10px;
  border-left: 1px solid #5e985f;
	float: left;
  font-size: .9166em;
  line-height: 10px;
}

#content ul#secondary_navigation li:first-child {
  border-left: none;
}

#content ul#secondary_navigation li a { color: #5e985f; }

/**
 * Body container styles
 */
#body_container { line-height: 1.5; }
#body_container strong { color: #404B51; }
#body_container a:hover { color: #78A97F; }

/**
 * Content container styles
 */
#content_container {
  margin: 0;
  padding: 10px 30px;
  border-right: 1px solid #DDD;
  float: left;
  width: 659px;
}

#content_container.wide {
  margin: 0;
  padding: 10px 11px;
  border-right: none;
  width: auto;
  float: none;
}

/**
 * Content container content styles
 */
#content_container h2 {
  margin: 18px 0 4px 0;
  font-size: 1.4em;
  color: #498a49;
  font-weight: normal;
}

#content_container h3 {
  margin: 18px 0 4px 0;
  font-size: 1em;
  color: #404B51;
}

#content_container h4 {
  margin: 18px 0 4px 0;
  font-size: 1.7em;
  color: #498a49;
  font-weight: bold;
}

#content_container td { vertical-align: top; }
#content_container td img { float: none; }

#content_container ul li { padding-top: .5em; }
#content_container ul li:first-child { padding-top: 0; }

#content_container table.border,
#content_container table.border th,
#content_container table.border td { border: 1px solid #000; }

#content_container table.border th { font-weight: bold; }

#content_container table.border th,
#content_container table.border td { padding: .25em; }

#content_container table.border.table_center th { text-align: center; }

#content_container div.divider {
  margin: 1em 0;
  height: 1px;
  border-top: 1px solid #ddd;
  clear: both;
}

#content_container ul.toclinks { margin-top: 1.5em; }

#content_container ul.checkboxes {
  margin: 1em 0 0 !important;
  padding: 0 !important;
}

#content_container ul.checkboxes li {
  margin: 0 !important;
  padding: 3px 0 1em 2em !important;
  min-height: 20px;
  list-style: none inside none;
  background: transparent url(../images/checkbox.png) top left no-repeat;
}

#content_container table.contact_form td {
  padding: .25em;
  vertical-align: middle;
}

#content_container table.contact_form td:first-child {
  padding-right: 1em;
  font-size: .9em;
  text-align: right;
}

/* Breadcrumb */
#content_container .breadcrumb{
  margin: 0 0 1em;
  padding: 0;
  font-size: 0.916em;
  line-height: 1.5;
}

#content_container .breadcrumb li {
  margin: 0 0 0 .5em;
  padding: 0 0 0 1em;
  float: left;
  list-style-type: none;
  color: #435258;
  background: transparent url(../images/bg-breadcrumb.png) no-repeat 0 70%;
}

#content_container .breadcrumb li:first-child {
  margin-left: 0;
  padding-left: 0;
  background-image: none;
}

/* Content banners */
#content_container .banner {
  margin: 0 -30px 1em;
  padding: 0;
  border: 3px solid #e1e1e1;
  border-left-width: 0;
  border-right-width: 0;
  min-height: 123px;
  width: 719px;
  position: relative;
  background: #2f85b6 url(../images/banners/about_us.jpg) no-repeat 100% 0;
  font-size: 2em;
  font-weight: normal;
  color: #fff;
}

#content_container.wide .banner {
  margin-left: 0;
  margin-right: 0;
}

#content_container .banner span {
  position: absolute;
  bottom: 11px;
  left: 8px;
}

#content_container .banner.commercial { background-image: url(../images/banners/commercial.jpg); }
#content_container .banner.find_a_pro { background-image: url(../images/banners/find_a_pro.jpg); }
#content_container .banner.new_homes { background-image: url(../images/banners/new_homes.jpg); }
#content_container .banner.outdoor { background-image: url(../images/banners/outdoor.jpg); }
#content_container .banner.our_water { background-image: url(../images/banners/our_water.jpg); }
#content_container .banner.partners { background-image: url(../images/banners/partners.jpg); }
#content_container .banner.products { background-image: url(../images/banners/products.jpg); }

#content_container .banner.home {
  min-height: 205px;
  font-size: 34px;
  text-indent: -9999px;
}

#content_container .banner.home span {
  position: absolute;
  bottom: 29px;
  left: 38px;
}

#content_container .banner.home.about_us { background-image: url(../images/banners/landing/about_us.jpg); }
#content_container .banner.home.commercial { background-image: url(../images/banners/landing/commercial.jpg); }
#content_container .banner.home.new_homes { background-image: url(../images/banners/landing/new_homes.jpg); }
#content_container .banner.home.outdoor { background-image: url(../images/banners/landing/outdoor.jpg); }
#content_container .banner.home.our_water { background-image: url(../images/banners/landing/our_water.jpg); }
#content_container .banner.home.partners { background-image: url(../images/banners/landing/partners.jpg); }
#content_container .banner.home.products { background-image: url(../images/banners/landing/products.jpg); }
#content_container .banner.home.zhome { background-image: url(../images/banners/landing/zhome.jpg); }

/* Floated images */
#content_container img.image_left {
  margin: 0 1.5em .5em 0;
  float: left;
}

#content_container img.image_right {
  margin: 0 0 .5em 1.5em;
  float: right;
}

#content_container div.image_left_caption,
#content_container div.image_right_caption {
  border: 1px solid #ccc;
  text-align: center;
  font-size: .75em;
  color: #555;
}

#content_container div.image_left_caption {
  margin: 0 1.5em .5em 0;
  float: left;
}

#content_container div.image_right_caption {
  margin: 0 0 .5em 1.5em;
  float: right;
}

#content_container div.image_left_caption img,
#content_container div.image_right_caption img {
  margin: 4px;
  max-width: 100%;
}

#content_container div.image_left_caption p,
#content_container div.image_right_caption p { margin: 4px; }

#content_container div.image_left_caption p.title,
#content_container div.image_right_caption p.title {
  font-size: 1.5em;
  font-weight: bold;
}

/* Callout, used for text */
#content_container div.callout,
#content_container div.callout_right,
#content_container div.callout_left {
  padding: 1em;
  border: 3px solid #999;
  background-color: #d9d9d9;
}

#content_container div.callout.light,
#content_container div.callout_right.light,
#content_container div.callout_left.light {
  padding: .5em;
  border-width: 1px;
  border-color: #117fb3;
  background-color: #fff;
}

#content_container div.callout {
  margin: .5em 0;
  overflow: hidden;
}

#content_container div.callout_right {
  margin: 0 0 .5em .5em;
  float: right;
}

#content_container div.callout_left {
  margin: 0 .5em .5em 0;
  float: left;
}

#content_container div.callout p,
#content_container div.callout_right p,
#content_container div.callout_left p {
  margin: 1em 0 0;
  font-size: .9em;
}

#content_container div.callout p.title,
#content_container div.callout_right p.title,
#content_container div.callout_left p.title {
  margin-top: 0;
  padding: 0;
  font-size: 1em;
  font-weight: bold;
  color: #404B51;
}

/* Buttons */
#content_container .button,
#content_container .button:visited {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 10px 15px;
  border: 1px solid #669E00;
  border-radius: 2px;
  display: inline-block;
  background: rgb(143,196,0);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(107,165,0,1)));
  background: linear-gradient(top, rgba(143,196,0,1) 0%,rgba(107,165,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#6ba500',GradientType=0 );
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 -1px 0 #669E00;
  color: #fff;
}

#content_container .button:hover,
#content_container .button:hover:visited  {
  background: rgb(198,226,120);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,226,120,1)), color-stop(100%,rgba(167,211,44,1)));
  background: linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e278', endColorstr='#a7d32c',GradientType=0 );
  text-decoration: none;
  text-shadow: none;
  color: #396301;
}


/**
 * Sidebar container styles
 */
#sidebar_container {
  padding: 3px 7px 1em 8px;
  width: 224px;
  float: left;
}

#content_container.wide #sidebar_container {
  border-bottom: 1px solid #DDD;
  float: right;
}

/* Social links */
#sidebar_social {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

#sidebar_social ul.watersense_specific {
  margin: 0;
  padding: 0;
  float: right;
}

#sidebar_social ul.watersense_specific li {
  display: inline;
  list-style-type: none;
}

/* Share, moved using jQuery */
html.js #sidebar_social ul#share {
  padding: 0;
  position: relative;
  top: 6px;
  display: block;
  float: left;
  z-index: 10;
}

html.js #sidebar_social ul#share li.on { position: relative; }

html.js #sidebar_social ul#share li.on ul {
  position: absolute;
  left: 0;
  top: 20px;
}

/* Icon navigation */
#sidebar_container .task_navigation {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

#sidebar_container .task_navigation a {
  width: 37px;
  height: 39px;
  display: block;
  float: left;
  background: transparent url(../images/sidebar/task_navigation.png) no-repeat 0 0;
  text-indent: -9999px;
}

#sidebar_container .task_navigation a.test { background-position: 0 0; }
#sidebar_container .task_navigation a.calculate { background-position: -37px 0; }
#sidebar_container .task_navigation a.connect { background-position: -74px 0; }
#sidebar_container .task_navigation a.find_rebates { background-position: -111px 0; }
#sidebar_container .task_navigation a.start { background-position: -148px 0; }
#sidebar_container .task_navigation a.kids { background-position: -185px 0; }

#sidebar_container .task_navigation a.test:hover { background-position: 0 -39px; }
#sidebar_container .task_navigation a.calculate:hover { background-position: -37px -39px; }
#sidebar_container .task_navigation a.connect:hover { background-position: -74px -39px; }
#sidebar_container .task_navigation a.find_rebates:hover { background-position: -111px -39px; }
#sidebar_container .task_navigation a.start:hover { background-position: -148px -39px; }
#sidebar_container .task_navigation a.kids:hover { background-position: -185px -39px; }

html.js #sidebar_container .task_navigation .title {
  clear: both;
  font-weight: bold;
  font-size: 1.083em;
  color: #4d894a;
  display: none;
}

/* Section navigation */
#sidebar_container ul.section_navigation {
  margin: 0 0 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

#sidebar_container ul.section_navigation li { list-style-type: none; }

#sidebar_container ul.section_navigation li a {
  margin: 0;
  padding: .25em 0 .25em 18px;
  display: block;
  background: transparent url(../images/nav_list_item.gif) 0 50% no-repeat;
}

#sidebar_container ul.section_navigation li ul { margin-left: 1em; }

/* Audience navigation */
#body_container .audience_nav {
  border: 1px solid #fff;
  padding: 1.25em 1em;
  max-width: 200px;
  color: #fff;
  font-size: .9166em;
  line-height: 1.25;

  background-color: #28628b;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#28628b), to(#5b95be));
  background-image: -webkit-linear-gradient(bottom, #28628b, #5b95be);
  background-image:    -moz-linear-gradient(bottom, #28628b, #5b95be);
  background-image:      -o-linear-gradient(bottom, #28628b, #5b95be);
  background-image:         linear-gradient(to top, #28628b, #5b95be);
  -pie-background: linear-gradient(#28628b, #5b95be);

  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, .4);
          box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, .4);
  -webkit-border-radius: 8px;
          border-radius: 8px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

#sidebar_container .audience_nav { margin-top: 2em; }

#body_container .audience_nav a {
  font-weight: bold;
  color: #fff;
}

#body_container .audience_nav p {
  margin: 0 4em 0 0;
  padding: 0;
}

#body_container .audience_nav p.title {
  margin-right: 0;
  margin-bottom: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #fff;
  text-transform: uppercase;
  font-size: 1.0909em;
}

/**
 * Content footer container styles
 */
#footer_container {
  margin: 0;
  padding: 1em;
  border-top: 1px solid #435258;
  color: #2B5265;
  font-size: .9166em;
  line-height: 1.5;
}

#footer_container p {
  margin: 0;
  padding: 0;
}

#footer_container ul.watersense_specific {
  margin: 0;
  padding: 0;
  float: right;
}

#footer_container ul.watersense_specific li {
  display: inline;
  list-style-type: none;
}
