/*---- Home styles CSS file
       Contains styles for the home page only
---- */

/* ---- Home page ---- */

#home #content,
#home #content > .inner {
  padding: 0;
  width: 100%;
}

#home .lower-content .inner {
  padding: 120px 0;
  width: 860px;
}

/* Helvetica Light */

#home-header h2,
#savings .hgroup,
#savings .hgroup h2,
#platforms h2,
#freecalling h2,
#freecalling ul p,
#keepnumber h2,
#keepnumber p {
  font-family: "Helvetica Neue Light",HelveticaNeue-Light,"HelveticaNeueLT Std Lt",Helvetica,"DejaVu Sans Light",sans-serif;
  font-weight: normal;

}
#platform-list li{
    list-style-type: none;

}

#platforms h2,
#freecalling h2{
  color: #2cabe1;
  font-size: 66px;
  text-transform: none;
} 

#home .lower-content h2:first-letter,
#home .lower-content h3:first-letter {
  text-transform: none;
}

/* Top feature */

#home-header {
  height: 460px;
  overflow: hidden;
}

#home-header img {
  width: 100%;
  height: auto;
}

#home-header .inner {
  padding: 0;
  position: relative;
}

#home-header .content {
  right: 50px;
  position: absolute;
  top: 115px;
}

#home-header h1 {
  color: #0984c3;
  font-size: 114px;
  letter-spacing: -0.09em;
  line-height: 1em;
  margin-bottom: 0;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  text-transform: lowercase;
}

#home-header h2 {
  color: #000;
  font-size: 34px;
  margin-right: 8px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* Platform section with phones */

#home .lower-content #platforms {
  background: none;
  overflow: auto;
  padding: 80px 0 60px;
}

#platforms h2 {
  margin-bottom: 66px;
  text-align: center;
}

#platforms img {
  float: left;
}

#platform-list {
  float: right;
  list-style: none;
  margin: 0;
}

#platform-list li a {
  background: url(../images/home-platform-sprites.png) no-repeat;
  border: 2px solid #fff;
  color: #000;
  display: block;
  font-size: 16px;
  padding: 18px 18px 15px 64px;
  text-decoration: none;
  width: 140px;
}

#platform-list li a:hover {
  border-radius: 10px;
  border: 2px solid #e2e2e2;
}

#platform-list li#apple a {
  background-position: 14px 6px;
    list-style-type: none;
}

#platform-list li#android a {
  background-position: 14px -50px;
}

#platform-list li#blackberry a {
  background-position: 14px -111px;
}

#platform-list li#windows a {
  background-position: 17px -171px;
}

#platform-list li#homephone a {
  background-position: 16px -230px;
}

#platforms a.button {
  clear: right;
  float: right;
}

.blue {
  color:#09F;
  font-size:14px;
  padding:0 0 0 10px;

}


/* Free calling sectiion with globe */

#freecalling {
  background: url(../images/freecalling-globe_sm.png) right center no-repeat;
  padding-top: 40px;
}

#freecalling h2,
#freecalling ul {
    padding-right: 50px;
    margin-left: 0px;
}

#freecalling ul {
  overflow: auto;
}

#freecalling li {
  color: #717171;
  float: left;
  font-size: 18px;
  margin-right: 25px;
  width: 220px;
  list-style-type: none;
}

#freecalling li p {
  line-height: 1.3em; 
}

#freecalling li .button {
  float: none;
  margin: 0 auto;
  width: 144px;

}

/* Savings section with graph */

#savings {
  position: relative;
}

#home #savings.inner {
  padding: 120px 0 60px;
  width: 920px;
}

@media screen and (max-width: 1024px) {
  #home #savings.inner {
    max-width: 96%;
  }
}

#savings .hgroup {
  float: left;
  margin: 28px 20px 20px 0;
  width: 460px;
}

#savings .hgroup h2 {
  color: #90c53f;
  font-size: 70px;
  font-weight: normal;
  line-height: 1em;
  margin-bottom: 12px;
}

#savings .hgroup .savings-amount {
  color: #108bc6;
}

#savings .hgroup p {
  font-size: 18px;
  margin: -6px 0 0;
  text-align: center;
}

/* all Dollar values */
#savings .dollars:before {
  content: '$';
}

#savings .hgroup h2 .dollars:before {
  font-size: 48px;
  vertical-align: 22px;
}

/* Graph */

#savings #graph {
  background-color: #108bc6;
  border-radius: 20px;
  color: #fff;
  font-size: 18px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 180px;
  width: 440px;
}

#savings #graph .graphvalue {
  background-color: #90c53f;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: block;
  float: left;
  height: 30px;
  min-width: 10px;
  padding: 5px;
  text-align: right;
}

/* ---- Slider ---- */

#savings #savings-slider {
  margin: 0;
}

#savings #savings-slider li  {
  color: #707070;
  overflow: auto;
  margin: 0;
}

/* Graph info */

#savings #savings-slider .grapharea {
  float: left;
  width: 440px;
} 

#savings #savings-slider .graphinfo p {
  border-right: 1px solid #a9a9a9;
  margin-bottom: 10px;
  padding-right: 8px;
}

#savings #savings-slider .graphinfo p.value {
  float: left;
}

#savings #savings-slider .graphinfo span {
  display: block;
  text-align: right;
} 

#savings #savings-slider .graphinfo .text {
  color: #a9a9a9;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin-bottom: 6px;
}

#savings #savings-slider .graphinfo .dollars {
  color: #717171;
  font-size: 30px;
}

#savings #savings-slider .grapharea > p {
  margin: 80px 20px 0;
  text-align: center;
}

/* Keep your number section */

#keepnumber {
  background: url(../images/keepnumber-phonebook.png) right center no-repeat;
  height: 160px;
  padding: 20px 0 20px;
}

#keepnumber h2,
#keepnumber p {
  padding-right: 310px;
}

#keepnumber h2 {
  color: #8fc63f;
  font-size: 70px;
}

#keepnumber p {
  font-size: 18px;
  line-:height 1.3em;
  margin-left: 3px;
  width: 300px;
}


.savingshow {
	float:right;
	margin:15px 40px 0 0;
	font-size:10px;
}