@charset "utf-8";
/*****************************************
COLORS:
  Navy:    215290
  Blue:    2864b0
  Lt Lime: c4e680
  Dk Lime: b8e163

TABLE OF CONTENTS // ++ // ++ ///
 02.0     STATIC CONTENT
 02.0 a   ERIC MEYER CSS RESET
 02.0 b   LAYOUT
 02.0 c   NAVIGATION
 02.0 d   FARHNER IMAGE REPLACEMENT (fir)
 02.0 e   TYPOGRAPHY
 02.0 f   CALL-TO-ACTION BUTTONS
--
 02.1 a   OUR HOMES > Photo Gallery (Landing Page)
 02.1 b   OUR HOMES > Videos (Stories)
 02.1 c   OUR HOMES > Energy Star (Savings Calculator)
 02.1 d   OUR HOMES > Features
 
/***********************************************/
h5 {
  font-size: 14px;
  color: #B8E163;
  font-weight: 500;
}

/* columns */
#column-one {
	position: relative;
  	float: left;
  	width: 350px;
  	left: 20px;
}

#column-two {
	position: relative;
  	float: right;
  	width: 350px;
	right: 20px;
}

#column-one li, #column-two li { margin-left: 18px; }

#column-one h3, #column-two h3 {
  color: #565656;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.034em;
  line-height: 160%;
  border-bottom: 1px solid #c7c7c7;
}

.static {
  padding: 5px 0 0 0;  
}

#column-one p,
#column-two p,
#column-one dl,
#column-two dl,
#column-one dd,
#column-two dd,
#column-one li,
#column-two li,
#column-one td,
#column-two td {
  padding: 5px 0 0 0;  
}

/* columns */
.static {
  clear: both;
  float: left;
  width: 350px;
  margin: 0 70px 0 45px;
}
.static {
  float: left;
  width: 350px;
  margin: 0 0 0 25px;
}

/** 02.0 f   | CALL-TO-ACTION BUTTONS (to be used whenever/wherever on the site)
sliding doors technique
source: http://www.candesprojects.com/downloads/web-2.0-resizeable-buttons ***/

h1 {
    left: -18px;
}

a {
	text-decoration: underline;
	color:#2763b0;
	cursor:pointer;
	outline-style: none;
}

/************ CUT OUT BR BUTTON CODE [brButtons.css] ************/

#startTourBttn { 
	position: relative;
	clear: both;
	width: 428px;
	height: 29px;
 	margin: 10px auto 0 auto;
	text-align: center;
	/*border: 1px dotted #000;*/
	background: url(/brands/default/images/brButtons/green_428px_29px.png);
}

#startTourBttn a {
	position: relative;
	top: 5px; 
	color: #2763b0;
	font-size: 14px;
	font-weight: bold;
}

#startTourBttn a:hover { color: #fff; }

#findOutBttn { 
	position: relative;
	clear: both;
	width: 136px;
	height: 29px;
	top: 18px;
	text-align: center;
	/*border: 1px dotted #000;*/
	background: url(/brands/default/images/brButtons/green_136px_29px.png);
}

#findOutBttn a {
	position: relative;
	top: 5px; 
	color: #2763b0;
	font-size: 14px;
	font-weight: bold;
}

#findOutBttn a:hover { color: #fff; }

#calcBttn { 
	position: relative;
	width: 104px;
	height: 40px;
	left: 650px;
	/*border: 1px dotted #000;*/
}

#calcBttn img{
 width: 104px;
 height: 40px; 
}

#seeYourself { 
	position: relative;
	clear: both;
	width: 136px;
	height: 29px;
	top: 18px;
	text-align: center;
	/*border: 1px dotted #000;*/
	background: url(/brands/default/images/brButtons/green_136px_29px.png);
}

#seeYourself a {
	position: relative;
	top: 5px; 
	color: #2763b0;
	font-size: 14px;
	font-weight: bold;
}

#seeYourself a:hover { color: #fff; }

#searchMHCs { 
	position: relative;
	clear: both;
	width: 350px;
	height: 29px;
	top: 18px;
	text-align: center;
	/*border: 1px dotted #000;*/
	background: url(/brands/default/images/brButtons/green_350px_29px.png);
}

#searchMHCs a {
	position: relative;
	top: 5px; 
	color: #2763b0;
	font-size: 14px;
	font-weight: bold;
}

#searchMHCs a:hover { color: #fff; }

/*********** END NEW BUTTON CODE ************/

a.over button em {
  padding-right: 20px;
}

#topHeadlineCopy {
	position: relative;
	width: 832px;
	margin: 0 auto;
}

.top-headline {
  clear: both;
  color: #2864b0;
  border: none;
}

.top-headlineES {
  clear: both;
  margin-left: 20px;
  border: none;
}

/** 02.1     | OUR HOMES ***/
#guided-tour ul {
	margin-left: 18px;
  list-style-type: none;
  width: 950px; height: 50px;
}
#guided-tour li { 
  float: left;
  margin: 0;
  width: 223px;
}
#guided-tour li a { /* our homes, navigation step-by-step tour */
  display: block;
  padding-top: 40px; overflow: hidden;
  height /**/: 40px; height: 0 !important;
  background-image: url(/brands/default/images/static/our_homes/trail_yourhome.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 223px;
}

#guided-tour li.ourhomes-energy {       width: 240px; }
#guided-tour li.ourhomes-energy a {     width: 240px; background-image: url(/brands/default/images/static/our_homes/trail_anenergystar.jpg); }  /*02*/
#guided-tour li.ourhomes-features {     width: 210px; }
#guided-tour li.ourhomes-features a {   width: 210px; background-image: url(/brands/default/images/static/our_homes/trail_witheveryhome.jpg); } /*03*/ 
#guided-tour li.ourhomes-getstarted {   width: 136px; }
#guided-tour li.ourhomes-getstarted a { width: 136px; background-image: url(/brands/default/images/static/our_homes/trail_getstarted.jpg); }    /*04*/
  /* select states AND hover states */
  #guided-tour li a:hover,
  .ourhomes-video #guided-tour li.ourhomes-stories,
  .ourhomes-video #guided-tour li.ourhomes-stories a,
  .energy-calculator #guided-tour li.ourhomes-energy,
  .energy-calculator #guided-tour li.ourhomes-energy a,
  .ourhomes-features #guided-tour li.ourhomes-features,
  .ourhomes-features #guided-tour li.ourhomes-features a { background-position: 0 -40px;}

/** 02.1 a | OUR HOMES > Photo Gallery (Landing Page) ***/
.ourhomes-photos h3 {
  border: none;
  color: #2864b0 !important;
}
.ourhomes-photos a.green {
  position: relative;
}

#photoTourCnr {
	position: relative;
	float: left;
	clear: both;
	width: 894px;
	left: -26px;
}

#interior-photo-tour {
  position: relative;
  width: 894px;
  height: 500px;
  clear: both;
}
#photo-navigation {
	position: relative;
  	padding: 5px 0 0 50px;
	z-index: 800;
}
#view-area {
  width: 845px;
  height: 450px;
  margin: 0;
  padding: 0;
}
#view-area div {
  padding: 4px 7px;
  background: #fff url(/brands/default/images/gallery/ourhomes_photoback.gif) no-repeat center top;
}
#view-area p {
  padding: 6px 20px;
  font-size: 16px;
}
#scroll-left{ display:none; }
#scroll-right{ display:none; }


.ourhomes-photos a.click button span em { /* position: relative; top: 15px; left: 25px; z-index:25; */ }

/** 02.1 b | OUR HOMES > Videos (Stories) ***/
#hd-video { width: 844px; height: 393px; }

.strongColor {
	color: #444444;
}

/** 02.1 c | OUR HOMES > Energy Star (Savings Calculator) ***/
/* buttons */

#energy-calc {
  clear: both;
  background: url(/brands/default/images/static/our_homes/bg_energy_calculator.jpg) no-repeat;
  width: 839px; height: 293px;
  padding: 10px 12px;
}
#energy-calc fieldset { border: none; }
#energy-calc form h4 {
  position: absolute;
  top: 0; left: -1000px;
}
#energy-calc fieldset p {
  float: left;
  font-size: 1.00em;
  /*font-size: 0.74em;*/
  width: 250px;
  margin: 46px 0 0 20px;
  padding: 5px 0 0 0;
  line-height: 1.50em;
}
#utility-bills {
  float: right;
  margin: 15px 30px 0 0;
}
/* calculator */
.calc-text-field {
  float: left;
  padding-top: 0;
}
#energy-calc label {
  clear: both;
  float: left;
  width: 350px;
  padding: 0 8px 0 0;
  margin: 0;
  background-color: #c5e681;
  background-repeat:  no-repeat;
  background-position: 5px 2px;
  text-align: right;
  color: #2864b0;
  text-transform: lowercase;
  font-weight: bold;
  font-size: 1.00em;
  /*font-size: 0.72em;*/
  line-height: 2.15em;
  height: 2.15em;
}
  label#elec { height: 24px; background-image: url(/brands/default/images/static/our_homes/energy_icon_elec.png); }
  label#gas { height: 24px; background-image: url(/brands/default/images/static/our_homes/energy_icon_gas.png); }
  label#water { height: 24px; background-image: url(/brands/default/images/static/our_homes/energy_icon_water.png); }
  
#utility-bills span { /* '$' AND 'per month' */
  float: left;
  font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  font-size: 1.00em;
  /*font-size: 0.68em;*/
  font-weight: bold;
  color: #2864b0;
  position: relative;
  top: 7px; left: 12px;
  z-index: 10;
}
  span.monthly-bill {
    width: 60px;
    top:   8px !important;
    left: 0 !important;
    text-align: right !important;
  }
#energy-calc input {
  float: left;
  width: 50px;
  background-color: #f7f7f7;
  text-align: right;
  padding: 0.50em 3px 0.25em 4px;
  border: 1px solid #ccc;
  font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #222;
  position: relative;
  top: 0; left: 0;
  z-index: 0;
}
/* energy calculator - button */
#calculate {
  position: relative;
  top: 6px; left: -55px;
}
/* energy calculator - results */
#calc-results {
  position: relative;
  top: 3px; left: 325px;
  width: 500px;
  overflow: hidden;
  padding: 6px; margin: 0;
}
#calc-results h6 {
  padding: 0; margin: 0;
  color: #2864b0;
  font-size: 12px;
  font-weight: bold;
}
#calc-results #without {
  position: relative;
  top: 0; left: 0;
}
#calc-results #with {
  position: relative;
  top: -24px; left: 200px;
}
#calc-results p {
  padding: 0; margin: 8px 0 0 0;
  color: #2864b0;
  font-weight: bold;
}
#calc-results p span {
  font-weight: bold;
}
#calc-results dl {
  padding: 0;
  margin: 8px 10px 0 0;
  float: left; 
  width: 190px;
  position: relative;
  top: -28px;
}
  dl#calc-results-2 { margin-right: 0; width: 300px; }
#calc-results dd,
#calc-results dt {
  float: left;
  padding: 0; margin: 0;
  color: #2864b0;
  font-size: 1.02em;
  line-height: 1.40em;
  border-bottom: 1px solid #aac670;
}
#calc-results dt {
  clear: both;
  margin: 0;
  width: 60px;
}
#calc-results dd {
  font-weight: bold;
  text-align: right;
  width: 120px;
  margin: 0 5px 0 0;
}
  #calc-results-2 dd { width: 220px; }

/** 02.1 d | OUR HOMES > Features ***/
.ourhomes-features {}
#features-hero {
  width: 848px;
  height: 355px;
}

#findMHC{
    width: 350px;
    height: 29px;
	background: url(/brands/default/images/brButtons/green_350px_29px.png);
}

#findMHC a{
    position: relative;
    top: 5px;
    left: 20px;
	color: #2763b0;
	font-size: 14px;
	font-weight: bold;
}

#findMHC a:hover{
    color: #FFF;
}


/** 02.2 a | ABOUT CLAYTON > Interactive Timeline (Landing Page) ***/
.about-history {
  width: 250px;
}
.about-history {
  position: relative;
}

#timeline {
  display: block;
  width: 850px;
  margin: 15px auto 0 auto;
  background: url(/brands/default/images/static/about_us/timeline/bg_timeline.gif) no-repeat;
  background-position: 5px 2px;
  position: relative;
  z-index: 0;
}
#timeline ul {
  list-style-type: none;
  padding: 45px 0 14px 0;
}
#timeline li {
  display: inline;
  font-size: 0.81em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding: 45px 0 14px 0;
}
#timeline li a {
  color: #777;
  text-decoration: underline;
  background-image: url(/brands/default/images/static/about_us/timeline/timeline_selected.png);
  background-repeat: no-repeat;
  background-position: 12px 0;
  padding: 42px 25px 14px 25px;
  text-align: center;
  height: 140px;
}
#timeline li a:hover,
#timeline li a.selected  {
  color: #2864b0;
  font-weight: bold;
  background-position: 12px -90px;
}
/* note: '2008' text reads 'current', so it's longer than a four-digit year 
li#year-08 a {       background-position: 17px 0; }
li#year-08 a:hover { background-position: 17px -90px; }*/
  li#year-34 {  margin-left:     0; }
  li#year-66 {  margin-left:  14px; }
  li#year-74 {  margin-left: -15px; }

  li#year-83 { margin-left:  -30px; }
  li#year-88 {  margin-left: -35px; }

  li#year-91 {  margin-left: -34px; }
  li#year-94 {  margin-left: -27px; }
  li#year-95 {  margin-left: -38px; }
  li#year-97 {  margin-left: -34px; }
  li#year-98 {  margin-left: -38px; }

  li#year-02 {  margin-left: -28px; }
  li#year-03 {  margin-left: -38px; }
  li#year-04 {  margin-left: -38px; }
  li#year-05 {  margin-left: -38px; }
  li#year-06 {  margin-left: -38px; }
.timeline-content {
  position: relative;
  width: 850px;
  height: 491px;
  clear: both;
}
.timeline-info {
  position: relative;
  top: 0; left: 0;
  z-index: 3;
  width: 400px;
}
.timeline-content img {
  width: 664px;
  position: relative;
  top: -100px; left: 170px;
  z-index: 0;
}
  #timeline-content-03 img { top: -330px;}
  #timeline li a#06 { padding-left: 0;}

.about-history {
  padding-top: 55px;
  width: 200px;  
}

.about-history h5 {
  font-size: 0.74em;
  line-height: 1.25em;
  color: #777;
  font-weight: bold;
  padding: 5px 0 0 0;
}
.about-history p a {
  font-weight: bold;
  text-transform: lowercase;  
}
#timeline-content-03 p {
  width: 400px;
}

/************ START LOCATION INPUTS: CHECK AVAILABILITY ************/

#locationCnr {
	position: absolute;
	display: none;
	width: 460px;
	height: 18px;
	border: #00CC00 1px dotted;
	top: 485px;
	left: 370px;
	z-index: 900;
}