Fixed background

.gitignore

@@ -7,6 +7,9 @@ ehthumbs_vista.db
 
 #secrets
 secrets.js
+test/
+lamberttest3/
+
 # Dump file
 *.stackdump
 

webroot/css/weatherscan.css

@@ -201,10 +201,10 @@
 
 .severe-city-info .frost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  width: 70%;
-  height: 47.5%;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  width: 212px;
+  height: 212px;
   position: absolute;
   transform: translate(0, -47.5px);
 }
@@ -331,13 +331,14 @@
   bottom: 20px
 }
 .info-slide-content.severe-daypart .icon {
-  width: 140px;
+  width: 115px;
   height: 115px;
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   position: absolute;
-  top: 0px
+  top: 0px;
+  margin-left: 12.5px;
 }
 .info-slide-content.severe-daypart .condition {
   color: #fff;
@@ -434,18 +435,20 @@
 }
 .info-slide-content.severe-extended-forecast .frost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   height: 115px;
-  width: 100%;
+  width: 115px;
+  margin-left: 25px;
   transform: translate(0px, 10px);
 }
 .info-slide-content.severe-extended-forecast .lfrost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   height: 115px;
-  width: 83.55%;
+  width: 115px;
+  margin-left: 25px;
   transform: translate(0px, 10px);
 }
 .info-slide-content.severe-extended-forecast .thingg {
@@ -954,14 +957,14 @@ background-image: url(/images/moonphases/new.png);
 }
 .info-slide-content.severe-aroundcityinfo .frost-pane.city .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  position: absolute;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 40%;
+  height: 115px;
+  width: 115px;
   left: 475px;
   top: 50%;
-  height: 150px;
-  width: 120px;
   transform: translate(0,-51%);
+  position: absolute;
 }
 .info-slide-content.severe-aroundcityinfo .frost-pane.city .wind {
   font-family: 'Frutiger 57 Condensed';
@@ -1040,10 +1043,10 @@ background-image: url(/images/moonphases/new.png);
 
 .city-info .frost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  width: 70%;
-  height: 47.5%;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  width: 212px;
+  height: 212px;
   position: absolute;
   transform: translate(0, -47.5px);
 }
@@ -1181,13 +1184,14 @@ background-image: url(/images/moonphases/new.png);
   bottom: 20px
 }
 .info-slide-content.daypart .icon {
-  width: 140px;
+  width: 115px;
   height: 115px;
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   position: absolute;
-  top: 0px
+  top: 0px;
+  margin-left: 12.5px;
 }
 .info-slide-content.daypart .condition {
   color: #fff;
@@ -1284,18 +1288,20 @@ background-image: url(/images/moonphases/new.png);
 }
 .info-slide-content.extended-forecast .frost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   height: 115px;
-  width: 100%;
+  width: 115px;
+  margin-left: 25px;
   transform: translate(0px, 10px);
 }
 .info-slide-content.extended-forecast .lfrost-pane .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   height: 115px;
-  width: 83.55%;
+  width: 115px;
+  margin-left: 25px;
   transform: translate(0px, 10px);
 }
 .info-slide-content.extended-forecast .thingg {
@@ -1808,14 +1814,14 @@ background-image: url(/images/moonphases/NEW.png);
 }
 .info-slide-content.aroundcityinfo .frost-pane.city .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  position: absolute;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 40%;
+  height: 115px;
+  width: 115px;
   left: 475px;
   top: 50%;
-  height: 150px;
-  width: 120px;
   transform: translate(0,-51%);
+  position: absolute;
 }
 .info-slide-content.aroundcityinfo .frost-pane.city .wind {
   font-family: 'Frutiger 57 Condensed';
@@ -2012,12 +2018,12 @@ background-image: url(/images/moonphases/NEW.png);
 }
 .info-slide-content.airportpanel .frost-pane.right .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  position: absolute;
-  width: 100%;
-  height: 45%;
-  top: -22.5px;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  height: 185px;
+  width: 185px;
+  margin-left: 75px;
+  top: -15px;
   transform: translate(-1.5%, 0);
 }
 .info-slide-content.airportpanel .frost-pane.right .conditions {
@@ -2136,12 +2142,13 @@ background-image: url(/images/moonphases/NEW.png);
 }
 .info-slide-content.otherairports .airport .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
   position: fixed;
-  left: 510px;
-  height: 120px;
-  width: 120px;
+  left: 513px;
+  height: 112px;
+  width: 112px;
 }
 .info-slide-content.otherairports .airport .delay {
   font-family: Frutiger;
@@ -2571,12 +2578,13 @@ flex-direction: row;
 }
 .info-slide-content.health-forecast .frost-pane.mainforecast .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  width: 100%;
-  height: 52%;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  height: 214px;
+  width: 214px;
+  margin-left: 75px;
+  top: -8px;
   position: absolute;
-  top: -10px;
 }
 .info-slide-content.health-forecast .frost-pane.mainforecast .low {
   position: absolute;
@@ -3621,13 +3629,15 @@ flex-direction: row;
   bottom: 17.5px
 }
 .info-slide-content.teetime .icon {
-  width: 120px;
+  width: 114px;
   height: 114px;
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  margin-left: 3px;
   position: absolute;
-  top: 37px
+  top: 38px
 }
 .info-slide-content.teetime .tempbar .temp {
   color: #fff;
@@ -3742,12 +3752,12 @@ flex-direction: row;
 }
 .info-slide-content.golfforecast .icon {
   width: 179px;
-  height: 180px;
+  height: 179px;
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  position: absolute;
-  top: 35px;
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  top: 36px;
   left: -8px;
 }
 .info-slide-content.golfforecast .forecontainer .high {
@@ -3901,11 +3911,12 @@ flex-direction: row;
 .info-slide-content.gardenindex .frost-pane.left  .icon {
   position: absolute;
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
-  width: 100%;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  top: -12px;
+  width: 180px;
   height: 180px;
-  top: -13px;
+  margin-left: 84px;
 }
 .info-slide-content.gardenindex .frost-pane.left .lowtitle {
   position: absolute;
@@ -4278,15 +4289,16 @@ flex-direction: row;
 }
 .info-slide-content.destinationforecast .day .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  height: 117px;
+  width: 117px;
+  margin-top: 4px;
+  left: 26.5px;
   position: absolute;
-  height: 123px;
-  width: 115px;
-  left: 27.5px;
 }
 .info-slide-content.destinationforecast .botloc .icon {
-  height: 118.5px;
+  margin-top: 0.75px;
 }
 .info-slide-content.destinationforecast .frost-pane.toploc {
   background-position: -72px -381.5px;
@@ -4428,15 +4440,16 @@ flex-direction: row;
 }
 .info-slide-content.internationalforecast .day .icon {
   background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center center;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 77.5%;
+  height: 117px;
+  width: 117px;
+  margin-top: 4px;
+  left: 26.5px;
   position: absolute;
-  height: 123px;
-  width: 115px;
-  left: 27.5px;
 }
 .info-slide-content.internationalforecast .botloc .icon {
-  height: 118.5px;
+  margin-top: 0.75px;
 }
 .info-slide-content.internationalforecast .frost-pane.toploc {
   background-position: -72px -381.5px;
@@ -4515,7 +4528,8 @@ body, html {
   overflow: hidden;
   transform: translate(-50%, -50%);
   width: 1440px;
-  height: 1080px
+  height: 1080px;
+  will-change: transform;
 }
 #startup {
   position: relative;
@@ -4830,8 +4844,6 @@ label{
 }
 
 #info-slides-container {
-  display: flex;
-  flex-direction: column;
   position: absolute;
   right: 75px;
   top: 92px;
@@ -4855,25 +4867,26 @@ label{
   background: radial-gradient(farthest-corner at 963px 569px, #000d28, #001668)
 }
 
-#info-slides-header, .info-slide .info-subheader {
+.info-slides-header, .info-slide .info-subheader {
   position: relative;
   color: #fff;
   width: 100%;
   padding: 0 7.5px
 }
 
-#info-slides-header {
-  flex: 1;
+.info-slides-header {
+  position: absolute;
+  top: 2.5px;
+  left: 2.5px;
   background-color: #2267b7;
-  min-height: 42.5px;
-  max-height: 42.5px;
+  height: 42.5px;
   font-size: 31px;
   white-space: nowrap;
   min-width: 125%;
   overflow: hidden;
 }
 
-#info-slides-header .hscroller {
+.info-slides-header .hscroller {
   position: relative;
   display: inline-block;
   transform-origin: left center;
@@ -4883,7 +4896,7 @@ label{
   font-family: Interstate;
   font-size: 30px;
 }
-#info-slides-header .gradientthing {
+.info-slides-header .gradientthing {
   position: absolute;
   width: 125px;
   top: 0;
@@ -4893,7 +4906,7 @@ label{
 
 }
 
-#info-slides-header .divider-arrow {
+.info-slides-header .divider-arrow {
   font-size: 26px;
   display: inline-block;
   transform: scale(1, 1.05) translate(0, -2.5px);;
@@ -4903,21 +4916,24 @@ label{
 }
 
 
-#info-slides-header span.city {
+.info-slides-header span.city {
   text-transform: uppercase;
+  display: inline-block;
 }
 
-#info-slides-header span.city, #info-slides-header span.divider-arrow {
+.info-slides-header span.city, .info-slides-header span.divider-arrow {
   opacity: .5
 }
 
-#info-slides-header span.city.current {
+.info-slides-header span.city.current {
   opacity: 1
 }
 
 #info-slide-container {
-  flex: 1;
-  max-height: 522px;
+  position: absolute;
+  top: 45px;
+  height: 520.82px;
+  width: 884.5px;
 }
 
 #radar-container {
@@ -4977,12 +4993,19 @@ label{
 }
 
 .info-slide {
-  width: 100%;
-  min-height: 99.87%;
-  max-height: 99.87%;
+  min-width: 885px;
+  max-width: 885px;
+  min-height: 521px;
+  max-height: 521px;
+  position: absolute;
+  top: 0px;
   overflow: hidden;
   display: flex;
-  flex-flow: column
+  flex-flow: column;
+  z-index: 5
+}
+.preload {
+  z-index: 4
 }
 
 .info-slide .info-subheader {
@@ -5026,10 +5049,6 @@ label{
   position: relative !important
 }
 
-.radar-slide {
-  z-index: 5
-}
-
 
 .city-info-slidetest {
   position: relative;
@@ -5041,14 +5060,12 @@ label{
   padding-right: 10%;
 }
 .city-info-slide {
-  position: relative;
   background: transparent url(/images/newbg/core_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .severe-city-info-slide {
-  position: relative;
   background: transparent url(/images/newbg/severe_core_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
@@ -5292,13 +5309,11 @@ label{
   transform: scale(106%,100%);
 }
 .airport-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/airport_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
 }
 .health-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/health_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5331,7 +5346,6 @@ label{
   background-color: #189cc5;
 }
 .beach-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/boatbeach_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5368,7 +5382,6 @@ label{
   opacity: .3;
 }
 .golf-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/boatbeach_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5405,7 +5418,6 @@ label{
   opacity: .3;
 }
 .garden-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/garden_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5442,7 +5454,6 @@ label{
   opacity: .3;
 }
 .ski-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/ski_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5479,13 +5490,11 @@ label{
   opacity: .5;
 }
 .travel-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/travel_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
 }
 .international-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/international_intro_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5558,7 +5567,6 @@ label{
   transform: scale(106%,100%);
 }
 .city-slide-intro {
-  position: relative;
   background: transparent url(/images/newbg/city_bg.png) no-repeat bottom;
   background-size: 1068px 788px;
   background-position: -127px -112px;
@@ -5736,56 +5744,48 @@ label{
   animation: cityaccentmoveviii 10s linear normal forwards;
 }
 .airport-slide {
-  position: relative;
   background: transparent url(/images/newbg/airport_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .beach-slide {
-  position: relative;
   background: transparent url(/images/newbg/boatbeach_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .health {
-  position: relative;
   background: transparent url(/images/newbg/health_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .golf {
-  position: relative;
   background: transparent url(/images/newbg/golf_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .garden {
-  position: relative;
   background: transparent url(/images/newbg/garden_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .ski {
-  position: relative;
   background: transparent url(/images/newbg/ski_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .travel {
-  position: relative;
   background: transparent url(/images/newbg/travel_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
 }
 
 .international {
-  position: relative;
   background: transparent url(/images/newbg/international_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
@@ -5903,7 +5903,9 @@ label{
 #conditions-icon {
   position: absolute;
   left: 294px;
-  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 8.1% 77.5%;
   width: 155px;
   height: 155px;
   background-repeat: no-repeat;
@@ -6220,14 +6222,19 @@ label{
 .forecast-tile.daily .icon {
   display: block;
   position: absolute;
-  height: 60%;
-  bottom: .1%;
-  left: -.1%;
-  margin-left: .45%
+  margin-left: .45%;
+  bottom: -0.1%;
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 85.5%;
+  height: 95px;
+  width: 95px;
+  left: -2px;
 }
 
 .forecast-tile.daily:last-child .icon {
   margin-left: .5%
+  left: -1px;
 }
 
 .forecast-tile .high, .forecast-tile .low {
@@ -6274,9 +6281,14 @@ label{
 .forecast-tile.hourly .icon {
   display: block;
   position: absolute;
-  height: 65%;
-  top: 3.5%;
-  left: 4%
+  background-repeat: no-repeat;
+  background-size: 3700% 95.65%;
+  background-position: 51.35% 85.5%;
+  background-image: url(images/icons2010sprite.png);
+  height: 103.5px;
+  width: 103.5px;
+  left: 7.5px;
+  top: 6px;
 }
 
 .forecast-tile.hourly .hourly-high {
@@ -6501,7 +6513,6 @@ label{
 }
 
 .bulletin {
-  position: relative;
   background: transparent url(/images/newbg/weather_bulletin_bg.png) no-repeat;
   background-position: 69% 41.5%;
   background-size: 120.3% 150.9%;
@@ -6551,3 +6562,7 @@ label{
   line-height: 100%;
   color: #DDDDDD;
 }
+#maps {
+        width: 100%;
+        height: 400px;
+      }

webroot/images/golf-curve.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 768" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#299a3a;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
-	</g>
-	<g>
-		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
-	</g>
-</g>
-</svg>

webroot/images/grey-curve.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 768" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#545456;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
-	</g>
-	<g>
-		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
-	</g>
-</g>
-</svg>

webroot/images/health-curve.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 768" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#149db3;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
-	</g>
-	<g>
-		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
-	</g>
-</g>
-</svg>