.contentCentered {
  margin: 0 auto;
  width: 90%;
}

.clear {
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}

html {
  background-color: #c6d6e6;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background-color: #c6d6e6;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#084e8c), to(#c6d6e6));
  font-family: 'Ubuntu', sans-serif;
  padding: 0;
  margin: 0;
  text-shadow: 0em 0em 0.2em #333;
}

html.night {
  background-color: #777;
}

html.night body {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#777));
}

#web {
  min-width: 250px;
}

#web #currentWeather {
  overflow: hidden;
  padding: 1em 0 0 0;
}

#web #currentWeather h2 {
  font-size: 2em;
  color: #fff;
}

#web #currentWeather h1 {
  font-size: 4em;
  color: #fff;
  text-align: right;
  float: right;
}

#web #currentWeather img.icon {
  background-image: url("/images/sprite.png");
  border: 0;
  float: left;
  width: 128px;
  height: 128px;
}

#web #currentWeather h3 {
  font-size: 1em;
  color: #fff;
  font-weight: 500;
  float: right;
  display: block;
  width: 50%;
  text-align: right;
}

#web #currentWeather h3 img {
  margin-bottom: -6px;
}

#web #currentWeather h3.weatherDescription {
  text-align: center;
  float: left;
}

#web #weatherForecast {
  background-color: #1e364a;
  margin: 2.5em 0 0 0;
  padding: 5px;
  border-radius: 10px;
  font-weight: 500;
}
.night #web #weatherForecast {
  background-color: #222;
}

#web #weatherForecast li {
  list-style-type: none;
  list-style-position: outside;
  background-color: #5a6d7e;
  margin: 5px 5px 10px 5px ;
  padding: .3em;
  overflow: hidden;
  text-align: center;
}
.night #web #weatherForecast li {
  background-color: #666;
}
#web #weatherForecast li {
  list-style-type: none;
  list-style-position: outside;
  background-color: #5a6d7e;
  margin: 5px 5px 10px 5px ;
  padding: .3em;
  overflow: hidden;
  text-align: center;
}

#web #weatherForecast li p {
  margin: 25px 0 0 0;
  padding: 0;
  color: #fff;
  font-size: 1em;
}

#web #weatherForecast li p.weekDay {
  float: left;
  width: 33%;
  text-align: left;
}

#web #weatherForecast li p.img {
  float: left;
  width: 33%;
  margin: 0;
}

#web #weatherForecast li p.temp {
  float: right;
  width: 33%;
  text-align: right;
  font-size: 1.1em;
}

#web #weatherForecast li p.temp span {
  color: #1e364a;
}

#web #weatherForecast li img {
  background-image: url("/images/spriteMini.png");
  border: 0;
  width: 64px;
  height: 64px;
}

.widthLess500 .contentCentered {
  margin: 0 auto;
  width: 97%;
}
.widthMore500 #web {
  font-size: 150%;
}
.widthMore500 #web #currentWeather h3.weatherDescription {
  text-align: left;
}

.heightLess620 .week-fore-4 { display: none; }

.heightLess530 .week-fore-3,
.heightLess530 .week-fore-4 {
  display: none;
}
.heightLess445 .week-fore-2,
.heightLess445 .week-fore-3,
.heightLess445 .week-fore-4 {
  display: none;
}
.heightLess360 #weatherForecast {
  display: none;
}
.heightLess360 #web #currentWeather h3 {
  color: #084e8c;
  text-shadow: none;
}
html.night .heightLess360 #web #currentWeather h3 {
  color: #fff;
  text-shadow: 0em 0em 0.2em #333;
}

.sprite-01 {  background-position: 0 0; }
.sprite-02 {  background-position: 0 -178px; }
.sprite-03 {  background-position: 0 -356px; }
.sprite-04 {  background-position: 0 -534px; }
.sprite-05 {  background-position: 0 -712px; }
.sprite-06 {  background-position: 0 -890px; }
.sprite-07 {  background-position: 0 -1068px; }
.sprite-08 {  background-position: 0 -1246px; }
.sprite-09 {  background-position: 0 -1424px; }
.sprite-10 {  background-position: 0 -1602px; }
.sprite-11 {  background-position: 0 -1780px; }
.sprite-12 {  background-position: -178px 0; }
.sprite-13 {  background-position: -178px -178px; }
.sprite-14 {  background-position: -178px -356px; }
.sprite-15 {  background-position: -178px -534px; }
.sprite-16 {  background-position: -178px -712px; }
.sprite-17 {  background-position: -178px -890px; }
.sprite-18 {  background-position: -178px -1068px; }
.sprite-19 {  background-position: -178px -1246px; }
.sprite-20 {  background-position: -178px -1424px; }
.sprite-21 {  background-position: -178px -1602px; }
.sprite-22 {  background-position: -178px -1780px; }
.sprite-23 {  background-position: -356px 0; }
.sprite-24 {  background-position: -356px -178px; }
.sprite-25 {  background-position: -356px -356px; }
.sprite-26 {  background-position: -356px -534px; }
.sprite-27 {  background-position: -356px -712px; }
.sprite-28 {  background-position: -356px -890px; }
.sprite-29 {  background-position: -356px -1068px; }
.sprite-30 {  background-position: -356px -1246px; }
.sprite-31 {  background-position: -356px -1424px; }
.sprite-32 {  background-position: -356px -1602px; }
.sprite-33 {  background-position: -356px -1780px; }
.sprite-34 {  background-position: -534px 0; }
.sprite-35 {  background-position: -534px -178px; }
.sprite-36 {  background-position: -534px -356px; }
.sprite-37 {  background-position: -534px -534px; }
.sprite-38 {  background-position: -534px -712px; }
.sprite-39 {  background-position: -534px -890px; }
.sprite-40 {  background-position: -534px -1068px; }
.sprite-41 {  background-position: -534px -1246px; }
.sprite-42 {  background-position: -534px -1424px; }
.spriteMini-01 {  background-position: 0 0; }
.spriteMini-02 {  background-position: 0 -114px; }
.spriteMini-03 {  background-position: 0 -228px; }
.spriteMini-04 {  background-position: 0 -342px; }
.spriteMini-05 {  background-position: 0 -456px; }
.spriteMini-06 {  background-position: 0 -570px; }
.spriteMini-07 {  background-position: 0 -684px; }
.spriteMini-08 {  background-position: 0 -798px; }
.spriteMini-09 {  background-position: 0 -912px; }
.spriteMini-10 {  background-position: 0 -1026px; }
.spriteMini-11 {  background-position: 0 -1140px; }
.spriteMini-12 {  background-position: 0 -1254px; }
.spriteMini-13 {  background-position: 0 -1368px; }
.spriteMini-14 {  background-position: 0 -1482px; }
.spriteMini-15 {  background-position: 0 -1596px; }
.spriteMini-16 {  background-position: 0 -1710px; }
.spriteMini-17 {  background-position: 0 -1824px; }
.spriteMini-18 {  background-position: 0 -1938px; }
.spriteMini-19 {  background-position: -114px 0; }
.spriteMini-20 {  background-position: -114px -114px; }
.spriteMini-21 {  background-position: -114px -228px; }
.spriteMini-22 {  background-position: -114px -342px; }
.spriteMini-23 {  background-position: -114px -456px; }
.spriteMini-24 {  background-position: -114px -570px; }
.spriteMini-25 {  background-position: -114px -684px; }
.spriteMini-26 {  background-position: -114px -798px; }
.spriteMini-27 {  background-position: -114px -912px; }
.spriteMini-28 {  background-position: -114px -1026px; }
.spriteMini-29 {  background-position: -114px -1140px; }
.spriteMini-30 {  background-position: -114px -1254px; }
.spriteMini-31 {  background-position: -114px -1368px; }
.spriteMini-32 {  background-position: -114px -1482px; }
.spriteMini-33 {  background-position: -114px -1596px; }
.spriteMini-34 {  background-position: -114px -1710px; }
.spriteMini-35 {  background-position: -114px -1824px; }
.spriteMini-36 {  background-position: -114px -1938px; }
.spriteMini-37 {  background-position: -228px 0; }
.spriteMini-38 {  background-position: -228px -114px; }
.spriteMini-39 {  background-position: -228px -228px; }
.spriteMini-40 {  background-position: -228px -342px; }
.spriteMini-41 {  background-position: -228px -456px; }
.spriteMini-42 {  background-position: -228px -570px; }

.branding {
  position: fixed;
  bottom: .5em;
  left: 0;
  right: 0;
  width: 100%;
}

.branding .brand {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0px none;
  height: auto;
  image-rendering: optimizeQuality;
}

/* EPS branding */

html.eps {
  background-color: #fff;
}

html.eps > body {
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#084e8c), to(#fff));
}

html.eps.night {
  background-color: #fff;
}

html.eps.night body {
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#fff));
}