diff --git a/dashboard-ui/bower_components/emby-apiclient/.bower.json b/dashboard-ui/bower_components/emby-apiclient/.bower.json
index 257ccdae1e..ce2d9e43cc 100644
--- a/dashboard-ui/bower_components/emby-apiclient/.bower.json
+++ b/dashboard-ui/bower_components/emby-apiclient/.bower.json
@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.21",
-  "_release": "1.0.21",
+  "version": "1.0.22",
+  "_release": "1.0.22",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.21",
-    "commit": "e341b097c05c31ec012e04dfbd0455ae9dfc4929"
+    "tag": "1.0.22",
+    "commit": "2b5f83fc8011106b3b97f34a893f47e9a991830d"
   },
   "_source": "git://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
   "_target": "~1.0.3",
diff --git a/dashboard-ui/bower_components/emby-apiclient/connectionmanager.js b/dashboard-ui/bower_components/emby-apiclient/connectionmanager.js
index 7f2e84ecaf..03937779c5 100644
--- a/dashboard-ui/bower_components/emby-apiclient/connectionmanager.js
+++ b/dashboard-ui/bower_components/emby-apiclient/connectionmanager.js
@@ -1123,7 +1123,7 @@
             if (options.updateDateLastAccessed !== false) {
                 server.DateLastAccessed = new Date().getTime();
 
-                if (server.LastConnectionMode == ConnectionMode.Local) {
+                if (connectionMode == ConnectionMode.Local) {
                     server.DateLastLocalConnection = new Date().getTime();
                 }
             }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
index 3fb667849b..f0fa20a704 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.0.14",
-  "_release": "1.0.14",
+  "version": "1.0.15",
+  "_release": "1.0.15",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.14",
-    "commit": "a7a8baf260ab509c5f9b1750cbf6fe921883141c"
+    "tag": "1.0.15",
+    "commit": "a87cc9a074a449a96302923191bf232ec7cc2911"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.0.0",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js b/dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js
index a7b6658b30..d922bb0bb2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js
@@ -103,12 +103,23 @@
 
         profile.DirectPlayProfiles = [];
 
+        var videoAudioCodecs = [];
+        if (canPlayMp3) {
+            videoAudioCodecs.push('mp3');
+        }
+        if (canPlayAac) {
+            videoAudioCodecs.push('aac');
+        }
+        if (canPlayAc3) {
+            videoAudioCodecs.push('ac3');
+        }
+
         if (supportedFormats.indexOf('h264') != -1) {
             profile.DirectPlayProfiles.push({
                 Container: 'mp4,m4v',
                 Type: 'Video',
                 VideoCodec: 'h264',
-                AudioCodec: 'aac' + (canPlayMp3 ? ',mp3' : '') + (canPlayAc3 ? ',ac3' : '')
+                AudioCodec: videoAudioCodecs.join(',')
             });
         }
 
@@ -117,7 +128,7 @@
                 Container: 'mkv,mov',
                 Type: 'Video',
                 VideoCodec: 'h264',
-                AudioCodec: 'aac' + (canPlayMp3 ? ',mp3' : '') + (canPlayAc3 ? ',ac3' : '')
+                AudioCodec: videoAudioCodecs.join(',')
             });
         }
 
@@ -160,17 +171,6 @@
             }
         });
 
-        var videoAudioCodecs = [];
-        if (canPlayMp3) {
-            videoAudioCodecs.push('mp3');
-        }
-        if (canPlayAac) {
-            videoAudioCodecs.push('aac');
-        }
-        if (canPlayAc3) {
-            videoAudioCodecs.push('ac3');
-        }
-
         // Can't use mkv on mobile because we have to use the native player controls and they won't be able to seek it
         if (canPlayMkv && !browser.mobile) {
             profile.TranscodingProfiles.push({
@@ -268,24 +268,6 @@
             ]
         });
 
-        profile.CodecProfiles.push({
-            Type: 'VideoAudio',
-            Codec: 'aac,mp3',
-            Conditions: [
-                {
-                    Condition: 'LessThanEqual',
-                    Property: 'AudioChannels',
-                    Value: videoAudioChannels
-                },
-                {
-                    Condition: 'Equals',
-                    Property: 'IsSecondaryAudio',
-                    Value: 'false',
-                    IsRequired: 'false'
-                }
-            ]
-        });
-
         profile.CodecProfiles.push({
             Type: 'VideoAudio',
             Conditions: [
diff --git a/dashboard-ui/bower_components/iron-icons/.bower.json b/dashboard-ui/bower_components/iron-icons/.bower.json
index 6ac4cbc7f5..34ce317a74 100644
--- a/dashboard-ui/bower_components/iron-icons/.bower.json
+++ b/dashboard-ui/bower_components/iron-icons/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-icons",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A set of icons for use with iron-icon",
   "authors": [
     "The Polymer Authors"
@@ -34,11 +34,11 @@
     "util",
     "update-icons.sh"
   ],
-  "_release": "1.1.0",
+  "_release": "1.1.1",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.0",
-    "commit": "623d8dae77cd8658ce1f6834b30a4f3f6e2100ea"
+    "tag": "v1.1.1",
+    "commit": "77a8e0190d6c481d8b5df0495fa484928880ea53"
   },
   "_source": "git://github.com/PolymerElements/iron-icons.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/iron-icons/bower.json b/dashboard-ui/bower_components/iron-icons/bower.json
index f408676a28..cd678f1a5e 100644
--- a/dashboard-ui/bower_components/iron-icons/bower.json
+++ b/dashboard-ui/bower_components/iron-icons/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-icons",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A set of icons for use with iron-icon",
   "authors": [
     "The Polymer Authors"
diff --git a/dashboard-ui/bower_components/iron-icons/demo/index.html b/dashboard-ui/bower_components/iron-icons/demo/index.html
index 8e0df6ce17..acfbf36cc7 100644
--- a/dashboard-ui/bower_components/iron-icons/demo/index.html
+++ b/dashboard-ui/bower_components/iron-icons/demo/index.html
@@ -30,6 +30,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <link rel="import" href="../maps-icons.html">
   <link rel="import" href="../notification-icons.html">
   <link rel="import" href="../social-icons.html">
+  <link rel="import" href="../places-icons.html">
 
   <style is="custom-style">
 
diff --git a/dashboard-ui/bower_components/iron-meta/.bower.json b/dashboard-ui/bower_components/iron-meta/.bower.json
index f4bfef4a7c..e1304d174b 100644
--- a/dashboard-ui/bower_components/iron-meta/.bower.json
+++ b/dashboard-ui/bower_components/iron-meta/.bower.json
@@ -26,14 +26,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "main": "iron-meta.html",
-  "homepage": "https://github.com/polymerelements/iron-meta",
+  "homepage": "https://github.com/PolymerElements/iron-meta",
   "_release": "1.1.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.1.1",
     "commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
   },
-  "_source": "git://github.com/polymerelements/iron-meta.git",
+  "_source": "git://github.com/PolymerElements/iron-meta.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-meta"
+  "_originalSource": "PolymerElements/iron-meta"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/neon-animation/.bower.json b/dashboard-ui/bower_components/neon-animation/.bower.json
index 67f935cf9f..50c9671ca0 100644
--- a/dashboard-ui/bower_components/neon-animation/.bower.json
+++ b/dashboard-ui/bower_components/neon-animation/.bower.json
@@ -1,6 +1,7 @@
 {
   "name": "neon-animation",
-  "version": "1.0.8",
+  "description": "A system for animating Polymer-based web components",
+  "version": "1.0.9",
   "authors": [
     "The Polymer Authors"
   ],
@@ -29,12 +30,12 @@
   "homepage": "https://github.com/PolymerElements/neon-animation",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0",
+    "polymer": "Polymer/polymer#^1.1.0",
     "iron-meta": "PolymerElements/iron-meta#^1.0.0",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
     "iron-selector": "PolymerElements/iron-selector#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "web-animations-js": "web-animations/web-animations-js#2.1.2"
+    "web-animations-js": "web-animations/web-animations-js#2.1.3"
   },
   "devDependencies": {
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
@@ -48,11 +49,11 @@
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
   },
-  "_release": "1.0.8",
+  "_release": "1.0.9",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.8",
-    "commit": "36656916b75a4715b025a03473620002c2650ee8"
+    "tag": "v1.0.9",
+    "commit": "ab40f4e4a777153cb5c27c9b62ee82b94d53eb76"
   },
   "_source": "git://github.com/polymerelements/neon-animation.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/neon-animation/.travis.yml b/dashboard-ui/bower_components/neon-animation/.travis.yml
new file mode 100644
index 0000000000..9fd5f44f69
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/.travis.yml
@@ -0,0 +1,22 @@
+language: node_js
+sudo: false
+node_js: 4
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+before_script:
+  - npm install web-component-tester
+  - npm install bower
+  - 'export PATH=$PWD/node_modules/.bin:$PATH'
+  - bower install
+script:
+  - xvfb-run wct
+  - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
+env:
+  global:
+    - secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
+    - secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
diff --git a/dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html b/dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html
index 24760ace3d..7284e9bd42 100644
--- a/dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html
+++ b/dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html
@@ -8,7 +8,6 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-
 <link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../neon-shared-element-animation-behavior.html">
 <link rel="import" href="../web-animations.html">
diff --git a/dashboard-ui/bower_components/neon-animation/bower.json b/dashboard-ui/bower_components/neon-animation/bower.json
index 2e3d0c6465..7826bd108a 100644
--- a/dashboard-ui/bower_components/neon-animation/bower.json
+++ b/dashboard-ui/bower_components/neon-animation/bower.json
@@ -1,6 +1,7 @@
 {
   "name": "neon-animation",
-  "version": "1.0.8",
+  "description": "A system for animating Polymer-based web components",
+  "version": "1.0.9",
   "authors": [
     "The Polymer Authors"
   ],
@@ -29,12 +30,12 @@
   "homepage": "https://github.com/PolymerElements/neon-animation",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0",
+    "polymer": "Polymer/polymer#^1.1.0",
     "iron-meta": "PolymerElements/iron-meta#^1.0.0",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
     "iron-selector": "PolymerElements/iron-selector#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "web-animations-js": "web-animations/web-animations-js#2.1.2"
+    "web-animations-js": "web-animations/web-animations-js#2.1.3"
   },
   "devDependencies": {
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
diff --git a/dashboard-ui/bower_components/neon-animation/demo/card/index.html b/dashboard-ui/bower_components/neon-animation/demo/card/index.html
index 9cac2f1be7..1b3a216df4 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/card/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/index.html
@@ -17,17 +17,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
-
+    <link rel="import" href="../../../paper-styles/typography.html">
     <link rel="import" href="x-card.html">
     <link rel="import" href="x-cards-list.html">
 
-    <style>
+    <style is="custom-style">
 
       body {
         padding: 15px;
+        @apply(--layout-fullbleed);
+        @apply(--paper-font-common-base);
       }
 
       neon-animated-pages {
@@ -64,38 +66,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         left: 30px;
       }
 
+      .card-contents {
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+        @apply(--layout-fit);
+      }
+
+      .button-container {
+        @apply(--layout-flex);
+        @apply(--layout-horizontal);
+        @apply(--layout-around-justified);
+      }
     </style>
 
   </head>
-  <body class="fullbleed">
+  <body>
 
     <template is="dom-bind">
-
       <neon-animated-pages id="pages" selected="0">
-
           <x-cards-list id="list">
-
-            <div class="fit layout vertical center-center">
-
+            <div class="card-contents">
               <h2>Choose a subject</h2>
-              <div class="flex layout horizontal around-justified large">
-
+              <div class="button-container large">
                 <div class="blue raised button" on-click="_onPolymerClick">
                   POLYMER
                 </div>
                 <div class="blue raised button" on-click="_onAngularClick">
                   ANGULAR
                 </div>
-
               </div>
-
             </div>
-
           </x-cards-list>
+
           <x-card>
-
-            <div class="fit layout vertical center-center">
-
+            <div class="card-contents">
               <div class="raised back button" on-click="_onBackClick">
                 BACK
               </div>
@@ -108,14 +112,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
-
             </div>
-
           </x-card>
+
           <x-card>
-
-            <div class="fit layout vertical center-center">
-
+            <div class="card-contents">
               <div class="raised back button" on-click="_onBackClick">
                 BACK
               </div>
@@ -128,12 +129,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
-
             </div>
-
           </x-card>
-        </neon-animated-pages>
 
+        </neon-animated-pages>
     </template>
 
     <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/card/x-card.html b/dashboard-ui/bower_components/neon-animation/demo/card/x-card.html
index fdcf18c9ac..6a578fc489 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/card/x-card.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/x-card.html
@@ -9,26 +9,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
 
 <dom-module id="x-card">
-  <style>
-
-    :host {
-      display: block;
-      overflow: hidden;
-    }
-
-    #placeholder {
-      opacity: 0;
-      background-color: grey;
-    }
-
-  </style>
   <template>
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+      #placeholder {
+        opacity: 0;
+        background-color: grey;
+        @apply(--layout-fit);
+      }
+    </style>
 
-    <div id="placeholder" class="fit"></div>
-
+    <div id="placeholder"></div>
     <div id="container">
       <content select="div"></content>
     </div>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html b/dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html
index 204cf2c138..b817698fb5 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html
@@ -9,26 +9,25 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
 
 <dom-module id="x-cards-list">
-  <style>
-
-    :host {
-      display: block;
-      overflow: hidden;
-    }
-
-    #placeholder {
-      opacity: 0;
-      background-color: grey;
-    }
-
-  </style>
   <template>
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+      }
 
-    <div id="placeholder" class="fit"></div>
-
+      #placeholder {
+        opacity: 0;
+        background-color: grey;
+        @apply(--layout-fit);
+      }
+    </style>
+    
+    <div id="placeholder"></div>
     <div id="container">
       <content select="div"></content>
     </div>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html b/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html
index 9385bccaa3..e6e3af1646 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html
@@ -17,24 +17,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
+    <link rel="import" href="../../../paper-styles/typography.html">
+    <link rel="import" href="../../../paper-styles/color.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animatable.html">
     <link rel="import" href="../../neon-animations.html">
 
-    <style>
-
+    <style is="custom-style">
       body {
         overflow: hidden;
+        @apply(--layout-fullbleed);
+        @apply(--layout-vertical);
       }
 
       .toolbar {
         padding: 8px;
       }
 
-    </style>
-
-    <style is="custom-style">
+      neon-animated-pages {
+        @apply(--layout-flex);
+      }
 
       neon-animatable {
         color: white;
@@ -66,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </style>
 
   </head>
-  <body class="fullbleed layout vertical">
+  <body>
 
     <template is="dom-bind">
 
@@ -75,7 +78,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         <button on-click="_onNextClick">&gt;&gt;</button>
       </div>
 
-      <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
+      <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
         <neon-animatable>1</neon-animatable>
         <neon-animatable>2</neon-animatable>
         <neon-animatable>3</neon-animatable>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/doc/basic.html b/dashboard-ui/bower_components/neon-animation/demo/doc/basic.html
deleted file mode 100644
index 9e79151eea..0000000000
--- a/dashboard-ui/bower_components/neon-animation/demo/doc/basic.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!doctype html>
-<!--
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-  <head>
-    <title>neon-animation demo: basic</title>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-
-    <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="my-animatable.html">
-
-  </head>
-  <body>
-
-    <template is="dom-bind">
-
-      <button on-click="_onButtonClick">click me</button>
-      <br>
-      <my-animatable></my-animatable>
-
-    </template>
-
-    <script>
-
-      var scope = document.querySelector('template[is="dom-bind"]');
-
-      scope._onButtonClick = function(event) {
-        var node = document.querySelector('my-animatable');
-        if (node) {
-          node.animate();
-        }
-      };
-
-    </script>
-
-  </body>
-</html>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/doc/types.html b/dashboard-ui/bower_components/neon-animation/demo/doc/index.html
similarity index 72%
rename from dashboard-ui/bower_components/neon-animation/demo/doc/types.html
rename to dashboard-ui/bower_components/neon-animation/demo/doc/index.html
index 3995b6c931..e794d1fee8 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/doc/types.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/index.html
@@ -17,26 +17,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
+    <link rel="import" href="my-animatable.html">
     <link rel="import" href="my-dialog.html">
 
   </head>
+  <style>
+    my-animatable {
+      margin-top: 50px;
+    }
+  </style>
   <body>
 
     <template is="dom-bind">
 
-      <button on-click="_onButtonClick">Toggle</button>
+      <button on-click="_onCircleButtonClick">toggle circle</button>
+      <button on-click="_onDialogButtonClick">toggle dialog</button>
 
       <div style="text-align: center">
         <my-dialog>Hello World!</my-dialog>
       </div>
 
+      <my-animatable></my-animatable>
+
     </template>
 
     <script>
 
       var scope = document.querySelector('template[is="dom-bind"]');
 
-      scope._onButtonClick = function(event) {
+      scope._onCircleButtonClick = function(event) {
+        var node = document.querySelector('my-animatable');
+        if (node) {
+          node.animate();
+        }
+      };
+
+      scope._onDialogButtonClick = function(event) {
         var node = document.querySelector('my-dialog');
         if (node) {
           if (node.opened) {
diff --git a/dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html b/dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html
index ec74536fa8..841ed4e001 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html
@@ -11,25 +11,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../../animations/scale-down-animation.html">
 
 <dom-module id="my-animatable">
-
-  <style>
-
-    :host {
-      display: inline-block;
-      border-radius: 50%;
-      width: 300px;
-      height: 300px;
-      background: orange;
-    }
-
-  </style>
-
   <template>
-
+    <style>
+      :host {
+        display: inline-block;
+        border-radius: 50%;
+        width: 300px;
+        height: 300px;
+        background: orange;
+      }
+    </style>
     <content></content>
 
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html b/dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html
index 64bb3003fe..6ef6e3838a 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html
@@ -7,30 +7,26 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
 <link rel="import" href="../../neon-animation-runner-behavior.html">
 <link rel="import" href="../../animations/scale-up-animation.html">
 <link rel="import" href="../../animations/fade-out-animation.html">
 
 
 <dom-module id="my-dialog">
-
-  <style>
-
-    :host {
-      display: none;
-      padding: 16px;
-      background: white;
-      color: black;
-      margin: 0 auto;
-
-      @apply(--shadow-elevation-2dp);
-    }
-
-  </style>
-
   <template>
-
+    <style>
+      :host {
+        display: none;
+        padding: 16px;
+        background: white;
+        color: black;
+        margin: 0 auto;
+        z-index: 100;
+        position: absolute;
+        @apply(--shadow-elevation-2dp);
+      }
+    </style>
     <content></content>
 
   </template>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html b/dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html
index 87678f5c1e..d4b93250c2 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html
@@ -7,31 +7,23 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
 <link rel="import" href="../../neon-animation-runner-behavior.html">
 
-
 <dom-module id="animated-dropdown">
-
-  <style>
-
-    :host {
-      display: none;
-      padding: 16px;
-      background: white;
-      color: black;
-
-      @apply(--shadow-elevation-2dp);
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        display: none;
+        padding: 16px;
+        background: white;
+        color: black;
 
+        @apply(--shadow-elevation-2dp);
+      }
+    </style>
     <content></content>
-
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html b/dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html
index 34cf8219d0..e16f84fe9d 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html
@@ -17,7 +17,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
     <link rel="import" href="animated-dropdown.html">
diff --git a/dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html b/dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html
index af976754c1..c05db68506 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html
@@ -7,70 +7,68 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../paper-styles/typography.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="animated-grid">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-      background: #000;
-    }
-
-    .tile {
-      display: inline-block;
-      float: left;
-      vertical-align: top;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-
-      @apply(--paper-font-title);
-      @apply(--layout-vertical);
-      @apply(--layout-center-center);
-    }
-
-    .tile:nth-of-type(1) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(4) {
-      width: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(5) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(8) {
-      width: calc(100% / 3);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(9) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: 0;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(10) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: calc(100% / 6);;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+
+      :host {
+        display: block;
+        background: #000;
+      }
+
+      .tile {
+        display: inline-block;
+        float: left;
+        vertical-align: top;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+
+        @apply(--paper-font-title);
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+      }
+
+      .tile:nth-of-type(1) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(4) {
+        width: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(5) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(8) {
+        width: calc(100% / 3);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(9) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: 0;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(10) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: calc(100% / 6);;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+    </style>
 
     <template is="dom-repeat" items="[[config]]">
       <div class$="[[_computeTileClass(item.color)]]">
@@ -79,7 +77,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </template>
 
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html b/dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html
index a365394e4d..8263db79c1 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html
@@ -8,38 +8,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <link rel="import" href="../../../polymer/polymer.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
-
+<link rel="import" href="../../../paper-styles/color.html">
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="fullsize-page-with-card">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-    }
-
-    .fixed {
-      position: fixed;
-      top: 0;
-      left: 0;
-      height: 100vh;
-      width: 100vw;
-    }
-
-    .card {
-      position: relative;
-      margin: 200px 100px 0;
-      height: 700px;
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+
+      :host {
+        display: block;
+      }
+
+      .fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+      }
+
+      .card {
+        position: relative;
+        margin: 200px 100px 0;
+        height: 700px;
+      }
+
+    </style>
 
     <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
-
     <div id="card" class$="[[_computeCardClass(color)]]"></div>
 
   </template>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/grid/index.html b/dashboard-ui/bower_components/neon-animation/demo/grid/index.html
index 8b34434de8..07c07c14d0 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/grid/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/index.html
@@ -17,38 +17,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
     <link rel="import" href="animated-grid.html">
     <link rel="import" href="fullsize-page-with-card.html">
 
-    <style>
-
+    <style is="custom-style">
       body {
         overflow: hidden;
+        @apply(--layout-fullbleed);
       }
 
       neon-animated-pages {
         height: 100%;
       }
-
     </style>
 
   </head>
-  <body class="fullbleed">
+  <body>
 
     <template is="dom-bind">
-
       <neon-animated-pages id="pages" selected="0">
-
         <animated-grid on-tile-click="_onTileClick"></animated-grid>
-
         <fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
         </fullsize-page-with-card>
-
       </neon-animated-pages>
-
     </template>
 
     <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/index.html b/dashboard-ui/bower_components/neon-animation/demo/index.html
index 11261455ae..1e4e1204a8 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/index.html
@@ -1,7 +1,45 @@
-<a href="declarative/index.html">declarative</a><br>
-<a href="dropdown/index.html">dropdown</a><br>
-<a href="grid/index.html">grid</a><br>
-<a href="list/index.html">list</a><br>
-<a href="load/index.html">load</a><br>
-<a href="tiles/index.html">tiles</a><br>
-<a href="card/index.html">card</a><br>
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html lang="en">
+<head>
+  <title>neon-animated pages demo</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+</head>
+<style>
+  a {
+    display: block;
+    margin-bottom: 10px;
+  }
+</style>
+<body unresolved>
+  <div class="horizontal-section-container">
+    <div>
+      <h4>Sample demos</h4>
+      <div class="horizontal-section">
+        <a href="doc/index.html">basic</a>
+        <a href="declarative/index.html">declarative</a>
+        <a href="dropdown/index.html">dropdown</a>
+        <a href="grid/index.html">grid</a>
+        <a href="list/index.html">list</a>
+        <a href="load/index.html">load</a>
+        <a href="tiles/index.html">tiles</a>
+        <a href="card/index.html">card</a>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/list/full-view.html b/dashboard-ui/bower_components/neon-animation/demo/list/full-view.html
index 817acfab9f..5e65e1e5c0 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/list/full-view.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/full-view.html
@@ -7,47 +7,43 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
 <link rel="import" href="../../neon-animatable-behavior.html">
 
 <dom-module id="full-view">
-
-  <style>
-
-    :host {
-      @apply(--layout-vertical);
-    }
-
-    .main {
-      background: white;
-      @apply(--layout-flex);
-      @apply(--layout-scroll);
-      @apply(--shadow-elevation-8dp);
-    }
-
-    .image-container {
-      position: relative;
-      width: 100%;
-      padding-bottom: 100%;
-    }
-
-    .image {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: repeating-linear-gradient(
-        45deg,
-        #f5f5f5,
-        #f5f5f5 8px,
-        #e0e0e0 8px,
-        #e0e0e0 16px
-      );
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        @apply(--layout-vertical);
+      }
 
+      .main {
+        background: white;
+        @apply(--layout-flex);
+        @apply(--layout-scroll);
+        @apply(--shadow-elevation-8dp);
+      }
+
+      .image-container {
+        position: relative;
+        width: 100%;
+        padding-bottom: 100%;
+      }
+
+      .image {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: repeating-linear-gradient(
+          45deg,
+          #f5f5f5,
+          #f5f5f5 8px,
+          #e0e0e0 8px,
+          #e0e0e0 16px
+        );
+      }
+    </style>
     <paper-toolbar class="medium-tall">
       <paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
     </paper-toolbar>
@@ -58,9 +54,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         </div>
       </div>
     </div>
-
+    
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/list/index.html b/dashboard-ui/bower_components/neon-animation/demo/list/index.html
index 4ee8337180..db5f7dbdbc 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/list/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/index.html
@@ -14,16 +14,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="list-demo.html">
 
   </head>
-  <body class="fullbleed relative">
-
-    <list-demo class="fit"></list-demo>
+  <style is="custom-style">
+    body {
+      @apply(--layout-fullbleed);
+    }
 
+    list-demo {
+      @apply(--layout-fit);
+    }
+  </style>
+  <body>
+    <list-demo></list-demo>
   </body>
 </html>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html b/dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html
index 6658ebfd01..9b234b1911 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html
@@ -7,7 +7,6 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
 <link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
 <link rel="import" href="../../neon-animated-pages.html">
 <link rel="import" href="../../neon-animations.html">
@@ -15,29 +14,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="full-view.html">
 
 <dom-module id="list-demo">
-
-  <style>
-
-    :host {
-      display: block;
-    }
-
-    neon-animated-pages {
-      height: 100%;
-    }
-
-  </style>
-
   <template>
-
+    <style>
+      :host {
+        display: block;
+      }
+      neon-animated-pages {
+        height: 100%;
+      }
+    </style>
     <neon-animated-pages id="pages" selected="0">
-
       <list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
-
       <full-view on-close="_onClose"></full-view>
-
     </neon-animated-pages>
-
   </template>
 
 </dom-module>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/list/list-view.html b/dashboard-ui/bower_components/neon-animation/demo/list/list-view.html
index b23b00d4d0..34d2a77c06 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/list/list-view.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/list-view.html
@@ -9,33 +9,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../../../polymer/polymer.html">
 <link rel="import" href="../../../iron-icons/iron-icons.html">
 <link rel="import" href="../../../iron-icon/iron-icon.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../paper-item/paper-item.html">
 <link rel="import" href="../../../paper-item/paper-item-body.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../paper-styles/color.html">
 <link rel="import" href="../../neon-animatable-behavior.html">
 
 <dom-module id="list-view">
-
-  <style>
-
-    :host {
-      @apply(--layout-vertical);
-    }
-
-    .main {
-      @apply(--layout-flex);
-      @apply(--layout-scroll);
-    }
-
-    iron-icon {
-      color: var(--google-grey-500);
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        @apply(--layout-vertical);
+      }
 
+      .main {
+        @apply(--layout-flex);
+        @apply(--layout-scroll);
+      }
+
+      iron-icon {
+        color: var(--google-grey-500);
+      }
+    </style>
     <paper-toolbar class="medium-tall">
       <paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
     </paper-toolbar>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html b/dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html
index f43851b45b..57212d641e 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html
@@ -7,70 +7,68 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
+<link rel="import" href="../../../paper-styles/typography.html">
+<link rel="import" href="../../../paper-styles/color.html">
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="animated-grid">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-      background: #000;
-    }
-
-    .tile {
-      display: inline-block;
-      float: left;
-      vertical-align: top;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-
-      @apply(--paper-font-title);
-      @apply(--layout-vertical);
-      @apply(--layout-center-center);
-    }
-
-    .tile:nth-of-type(1) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(4) {
-      width: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(5) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(8) {
-      width: calc(100% / 3);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(9) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: 0;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(10) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: calc(100% / 6);;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+      :host {
+        display: block;
+        background: #000;
+      }
+
+      .tile {
+        display: inline-block;
+        float: left;
+        vertical-align: top;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+
+        @apply(--paper-font-title);
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+      }
+
+      .tile:nth-of-type(1) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(4) {
+        width: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(5) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(8) {
+        width: calc(100% / 3);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(9) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: 0;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(10) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: calc(100% / 6);;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+    </style>
 
     <template is="dom-repeat" items="[[config]]">
       <div class$="[[_computeTileClass(item.color)]]">
diff --git a/dashboard-ui/bower_components/neon-animation/demo/load/full-page.html b/dashboard-ui/bower_components/neon-animation/demo/load/full-page.html
index 1488de19c2..1fbe1849f0 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/load/full-page.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/full-page.html
@@ -7,43 +7,38 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-animatable-behavior.html">
 <link rel="import" href="../../neon-animation-runner-behavior.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
 <link rel="import" href="animated-grid.html">
 
 <dom-module id="full-page">
-
-  <style>
-
-    :host {
-      background: black;
-      visibility: hidden;
-      @apply(--layout-vertical);
-    }
-
-    .toolbar {
-      background: #9c27b0;
-      height: 72px;
-      z-index: 1;
-      @apply(--shadow-elevation-2dp);
-    }
-
-    animated-grid {
-      height: calc(100% - 72px);
-      @apply(--layout-flex);
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        background: black;
+        visibility: hidden;
+        @apply(--layout-vertical);
+      }
+
+      .toolbar {
+        background: #9c27b0;
+        height: 72px;
+        z-index: 1;
+        @apply(--shadow-elevation-2dp);
+      }
+
+      animated-grid {
+        height: calc(100% - 72px);
+        @apply(--layout-flex);
+      }
+    </style>
 
     <div id="toolbar" class="toolbar"></div>
-
     <animated-grid id="grid"></animated-grid>
 
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/load/index.html b/dashboard-ui/bower_components/neon-animation/demo/load/index.html
index 3c22281f60..ed40bb63f9 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/load/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/index.html
@@ -16,22 +16,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
     <link rel="import" href="full-page.html">
 
-    <style>
+    <style is="custom-style">
       body {
         overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      full-page {
+        @apply(--layout-fit);
       }
     </style>
-
   </head>
-  <body class="fullbleed relative">
+  <body>
 
-    <full-page class="fit"></full-page>
+    <full-page></full-page>
 
     <script>
 
diff --git a/dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html b/dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html
index e65ba51e1b..cf197d3d6f 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html
@@ -7,70 +7,70 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
+<link rel="import" href="../../../paper-styles/typography.html">
+<link rel="import" href="../../../paper-styles/color.html">
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="animated-grid">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-      background: #000;
-    }
-
-    .tile {
-      display: inline-block;
-      float: left;
-      vertical-align: top;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-
-      @apply(--paper-font-title);
-      @apply(--layout-vertical);
-      @apply(--layout-center-center);
-    }
-
-    .tile:nth-of-type(1) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(4) {
-      width: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(5) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(8) {
-      width: calc(100% / 3);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(9) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: 0;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(10) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: calc(100% / 6);;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+
+      :host {
+        display: block;
+        background: #000;
+      }
+
+      .tile {
+        display: inline-block;
+        float: left;
+        vertical-align: top;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+
+        @apply(--paper-font-title);
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+      }
+
+      .tile:nth-of-type(1) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(4) {
+        width: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(5) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(8) {
+        width: calc(100% / 3);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(9) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: 0;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(10) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: calc(100% / 6);;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+
+    </style>
 
     <template is="dom-repeat" items="[[config]]">
       <div class$="[[_computeTileClass(item.color)]]">
diff --git a/dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html b/dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html
index a365394e4d..c02cc9f7fe 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html
@@ -8,42 +8,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <link rel="import" href="../../../polymer/polymer.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
-
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="fullsize-page-with-card">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-    }
-
-    .fixed {
-      position: fixed;
-      top: 0;
-      left: 0;
-      height: 100vh;
-      width: 100vw;
-    }
-
-    .card {
-      position: relative;
-      margin: 200px 100px 0;
-      height: 700px;
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+
+      :host {
+        display: block;
+      }
+
+      .fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+      }
+
+      .card {
+        position: relative;
+        margin: 200px 100px 0;
+        height: 700px;
+      }
+
+    </style>
 
     <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
-
     <div id="card" class$="[[_computeCardClass(color)]]"></div>
 
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html b/dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html
index acd196eaaf..c349c7c7a0 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html
@@ -16,33 +16,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../../neon-animations.html">
     <link rel="import" href="reprojected-pages.html">
     <link rel="import" href="animated-grid.html">
     <link rel="import" href="fullsize-page-with-card.html">
 
-    <style>
-
-      neon-animated-pages {
+    <style is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      reprojected-pages {
         height: 100%;
       }
-
     </style>
-
   </head>
-  <body class="fullbleed">
-
+  <body>
     <template is="dom-bind">
 
       <reprojected-pages id="pages" selected="0">
-
         <animated-grid on-tile-click="_onTileClick"></animated-grid>
-
         <fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
         </fullsize-page-with-card>
-
       </reprojected-pages>
 
     </template>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html b/dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html
index 647289dc15..91193fd824 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html
@@ -11,15 +11,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../../neon-animated-pages.html">
 
 <dom-module id="reprojected-pages">
-
   <template>
-
+    <style>
+      neon-animated-pages {
+        height: 100%;
+      }
+    </style>
     <neon-animated-pages selected="{{selected}}">
       <content></content>
     </neon-animated-pages>
 
   </template>
-
 </dom-module>
 
 <script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/shared-styles.html b/dashboard-ui/bower_components/neon-animation/demo/shared-styles.html
new file mode 100644
index 0000000000..4e48c8c406
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/shared-styles.html
@@ -0,0 +1,47 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<dom-module id="shared-styles">
+  <template>
+    <style>
+      .red-100 {
+        background: var(--google-red-100);
+      }
+
+      .yellow-100 {
+        background: var(--google-yellow-100);
+      }
+
+      .blue-100 {
+        background: var(--google-blue-100);
+      }
+
+      .green-100 {
+        background: var(--google-green-100);
+      }
+
+      .red-300 {
+        background: var(--google-red-300);
+      }
+
+      .yellow-300 {
+        background: var(--google-yellow-300);
+      }
+
+      .blue-300 {
+        background: var(--google-blue-300);
+      }
+
+      .green-300 {
+        background: var(--google-green-300);
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/shared.css b/dashboard-ui/bower_components/neon-animation/demo/shared.css
deleted file mode 100644
index fc1011fe3c..0000000000
--- a/dashboard-ui/bower_components/neon-animation/demo/shared.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-
-.red-100 {
-  background: var(--google-red-100);
-}
-
-.yellow-100 {
-  background: var(--google-yellow-100);
-}
-
-.blue-100 {
-  background: var(--google-blue-100);
-}
-
-.green-100 {
-  background: var(--google-green-100);
-}
-
-.red-300 {
-  background: var(--google-red-300);
-}
-
-.yellow-300 {
-  background: var(--google-yellow-300);
-}
-
-.blue-300 {
-  background: var(--google-blue-300);
-}
-
-.green-300 {
-  background: var(--google-green-300);
-}
diff --git a/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html b/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html
index 566d69b67f..e86cf807f4 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html
@@ -7,31 +7,27 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
 
 <dom-module id="circles-page">
-
-  <style>
-
-    :host {
-      @apply(--layout-horizontal);
-      @apply(--layout-center-center);
-    }
-
-    .circle {
-      display: inline-block;
-      box-sizing: border-box;
-      width: 100px;
-      height: 100px;
-      margin: 16px;
-      border-radius: 50%;
-      background: var(--color-one);
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        @apply(--layout-horizontal);
+        @apply(--layout-center-center);
+      }
+
+      .circle {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 100px;
+        height: 100px;
+        margin: 16px;
+        border-radius: 50%;
+        background: var(--color-one);
+      }
+    </style>
 
     <div>
       <div class="circle"></div>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html b/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html
index 0afec46ce4..324f9aa903 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html
@@ -17,44 +17,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
+    <link rel="import" href="../../../paper-styles/color.html">
     <link rel="import" href="circles-page.html">
     <link rel="import" href="squares-page.html">
 
-    <style>
-
+    <style is="custom-style">
       body {
         overflow: hidden;
+        @apply(--layout-fullbleed);
       }
-
       neon-animated-pages {
         height: 100%;
       }
 
-    </style>
-
-    <style is="custom-style">
-
       :root {
-        --color-one: #4dd0e1;
-        --color-two: #ff9800;
+        --color-one: var(--paper-cyan-300);
+        --color-two: var(--paper-orange-500);
       }
-
     </style>
 
   </head>
-  <body class="fullbleed">
+  <body>
 
     <template is="dom-bind">
 
       <neon-animated-pages id="pages" selected="0">
-
         <circles-page on-circle-click="_onCircleClick"></circles-page>
-
         <squares-page on-click="_onSquaresClick"></squares-page>
-
       </neon-animated-pages>
 
     </template>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html b/dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html
index f417e6b9c5..9185121a66 100644
--- a/dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html
@@ -7,35 +7,30 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
 
 <dom-module id="squares-page">
-
-  <style>
-
-    .header {
-      height: 40%;
-      background: var(--color-one);
-    }
-
-    .body {
-      text-align: center;
-      padding: 8px;
-    }
-
-    .square {
-      display: inline-block;
-      width: 150px;
-      height: 150px;
-      margin: 8px;
-      background: var(--color-two);
-    }
-
-  </style>
-
   <template>
+    <style>
+      .header {
+        height: 40%;
+        background: var(--color-one);
+      }
 
+      .body {
+        text-align: center;
+        padding: 8px;
+      }
+
+      .square {
+        display: inline-block;
+        width: 150px;
+        height: 150px;
+        margin: 8px;
+        background: var(--color-two);
+      }
+    </style>
+    
     <div id="header" class="header"></div>
 
     <div class="body">
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html
index fac56f8081..c5d75cabf4 100644
--- a/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html
+++ b/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html
@@ -141,7 +141,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
      * or a map of animation type to array of configuration objects.
      */
     getAnimationConfig: function(type) {
-      var map = [];
+      var map = {};
       var allConfigs = [];
       this._getAnimationConfigRecursive(type, map, allConfigs);
       // append the configurations saved in the map to the array
diff --git a/dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html b/dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html
index 973a03a51d..7330a1ffd1 100644
--- a/dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html
+++ b/dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html
@@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../../paper-styles/paper-styles.html">
 <link rel="import" href="../neon-shared-element-animatable-behavior.html">
 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
 
diff --git a/dashboard-ui/bower_components/paper-input/.bower.json b/dashboard-ui/bower_components/paper-input/.bower.json
index b59e0b67c3..99d82dd61d 100644
--- a/dashboard-ui/bower_components/paper-input/.bower.json
+++ b/dashboard-ui/bower_components/paper-input/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-input",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Material design text fields",
   "authors": [
     "The Polymer Authors"
@@ -16,6 +16,7 @@
     "paper-input-behavior.html",
     "paper-input-container.html",
     "paper-input-error.html",
+    "paper-input-addon-behavior.html",
     "paper-input-char-counter.html"
   ],
   "private": true,
@@ -27,7 +28,7 @@
   "homepage": "https://github.com/PolymerElements/paper-input",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0",
+    "polymer": "Polymer/polymer#^1.2.0",
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
@@ -46,13 +47,13 @@
     "web-component-tester": "Polymer/web-component-tester#^3.4.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "1.1.3",
+  "_release": "1.1.4",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.3",
-    "commit": "f070288446f9e78fbe16b032ddb429a8e8015ee7"
+    "tag": "v1.1.4",
+    "commit": "8ca01ac3cafc61abd980d262875ffca0c79640fa"
   },
-  "_source": "git://github.com/PolymerElements/paper-input.git",
-  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-input"
+  "_source": "git://github.com/polymerelements/paper-input.git",
+  "_target": "^1.0.9",
+  "_originalSource": "polymerelements/paper-input"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-input/bower.json b/dashboard-ui/bower_components/paper-input/bower.json
index 4b1c8fe6ae..22775b8851 100644
--- a/dashboard-ui/bower_components/paper-input/bower.json
+++ b/dashboard-ui/bower_components/paper-input/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-input",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Material design text fields",
   "authors": [
     "The Polymer Authors"
@@ -16,6 +16,7 @@
     "paper-input-behavior.html",
     "paper-input-container.html",
     "paper-input-error.html",
+    "paper-input-addon-behavior.html",
     "paper-input-char-counter.html"
   ],
   "private": true,
@@ -27,7 +28,7 @@
   "homepage": "https://github.com/PolymerElements/paper-input",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0",
+    "polymer": "Polymer/polymer#^1.2.0",
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
diff --git a/dashboard-ui/bower_components/paper-input/demo/index.html b/dashboard-ui/bower_components/paper-input/demo/index.html
index b0d02e789c..f84799de75 100644
--- a/dashboard-ui/bower_components/paper-input/demo/index.html
+++ b/dashboard-ui/bower_components/paper-input/demo/index.html
@@ -117,10 +117,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <h3>Inputs can have prefixes and suffixes</h3>
     <demo-snippet class="horizontal">
       <template>
-        <paper-input class="short" label="total" type="number">
+        <paper-input label="total" type="number">
           <div prefix>$</div>
         </paper-input>
-        <paper-input class="short" label="username" id="inputWithButton">
+        <paper-input label="username" id="inputWithButton">
           <iron-icon icon="mail" prefix></iron-icon>
           <div suffix>@email.com</div>
           <paper-icon-button suffix onclick="clearInput()"
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-behavior.html b/dashboard-ui/bower_components/paper-input/paper-input-behavior.html
index 3a797c641f..f41669c7e9 100644
--- a/dashboard-ui/bower_components/paper-input/paper-input-behavior.html
+++ b/dashboard-ui/bower_components/paper-input/paper-input-behavior.html
@@ -60,6 +60,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       /**
        * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
        * and the input's `invalid` property.
+       * 
+       * If `autoValidate` is true, the `invalid` attribute is managed automatically,
+       * which can clobber attempts to manage it manually.
        */
       invalid: {
         type: Boolean,
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-container.html b/dashboard-ui/bower_components/paper-input/paper-input-container.html
index 1a981f34a8..d4c71f9ab4 100644
--- a/dashboard-ui/bower_components/paper-input/paper-input-container.html
+++ b/dashboard-ui/bower_components/paper-input/paper-input-container.html
@@ -172,8 +172,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
       }
 
       .label-and-input-container {
-        @apply(--layout-flex);
+        @apply(--layout-flex-auto);
         @apply(--layout-relative);
+        width: 100%;
+        max-width: 100%;
       }
 
       .input-content {
@@ -189,6 +191,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
         top: 0;
         right: 0;
         left: 0;
+        width: 100%;
         font: inherit;
         color: var(--paper-input-container-color, --secondary-text-color);
 
@@ -201,8 +204,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
       .input-content.label-is-floating ::content .paper-input-label {
         -webkit-transform: translateY(-75%) scale(0.75);
         transform: translateY(-75%) scale(0.75);
-        -webkit-transition: -webkit-transform 0.25s;
-        transition: transform 0.25s;
+        -webkit-transition: -webkit-transform 0.25s, width 0.25s;
+        transition: transform 0.25s, width 0.25s;
         -webkit-transform-origin: left top;
         transform-origin: left top;
 
@@ -250,6 +253,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
         box-shadow: none;
         padding: 0;
         width: 100%;
+        max-width: 100%;
         background: transparent;
         border: none;
         color: var(--paper-input-container-input-color, --primary-text-color);
@@ -263,11 +267,13 @@ This element is `display:block` by default, but you can set the `inline` attribu
       ::content [prefix] {
         @apply(--paper-font-subhead);
         @apply(--paper-input-prefix);
+        @apply(--layout-flex-none);
       }
 
       ::content [suffix] {
         @apply(--paper-font-subhead);
         @apply(--paper-input-suffix);
+        @apply(--layout-flex-none);
       }
 
       /* Firefox sets a min-width on the input, which can cause layout issues */
diff --git a/dashboard-ui/bower_components/paper-styles/.bower.json b/dashboard-ui/bower_components/paper-styles/.bower.json
index bedc908515..91bf38a61a 100644
--- a/dashboard-ui/bower_components/paper-styles/.bower.json
+++ b/dashboard-ui/bower_components/paper-styles/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-styles",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Common (global) styles for Material Design elements.",
   "authors": [
     "The Polymer Authors"
@@ -29,11 +29,11 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0"
   },
-  "_release": "1.1.1",
+  "_release": "1.1.2",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.1",
-    "commit": "fc3ca8dcfc69b9c7a7261e51eefc9741d0f113f8"
+    "tag": "v1.1.2",
+    "commit": "7b97fa9d2c190bec9ef2d771d91f47b40a27f3be"
   },
   "_source": "git://github.com/PolymerElements/paper-styles.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/paper-styles/bower.json b/dashboard-ui/bower_components/paper-styles/bower.json
index 8b36dc4769..61b31a9ab0 100644
--- a/dashboard-ui/bower_components/paper-styles/bower.json
+++ b/dashboard-ui/bower_components/paper-styles/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-styles",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Common (global) styles for Material Design elements.",
   "authors": [
     "The Polymer Authors"
diff --git a/dashboard-ui/bower_components/paper-styles/default-theme.html b/dashboard-ui/bower_components/paper-styles/default-theme.html
index 7524ecd1d5..478d087f90 100644
--- a/dashboard-ui/bower_components/paper-styles/default-theme.html
+++ b/dashboard-ui/bower_components/paper-styles/default-theme.html
@@ -16,24 +16,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
   :root {
     /*
-     * Light background theme
+     * You can use these generic variables in your elements for easy theming.
+     * For example, if all your elements use `--primary-text-color` as its main
+     * color, then switching from a light to a dark theme is just a matter of
+     * changing the value of `--primary-text-color` in your application.
      */
-    --light-theme-background-color: #ffffff;
-    --light-theme-base-color: #000000;
-    --light-theme-text-color: #212121;
-    --light-theme-secondary-color: #737373;  /* for secondary text and icons */
-    --light-theme-disabled-color: #9b9b9b;  /* disabled/hint text */
-    --light-theme-divider-color: #dbdbdb;
-
-    /*
-     * Dark background theme
-     */
-    --dark-theme-background-color: #212121;
-    --dark-theme-base-color: #ffffff;
-    --dark-theme-text-color: #ffffff;
-    --dark-theme-secondary-color: #bcbcbc;  /* for secondary text and icons */
-    --dark-theme-disabled-color: #646464;  /* disabled/hint text */
-    --dark-theme-divider-color: #3c3c3c;
+    --primary-text-color: var(--light-theme-text-color);
+    --primary-background-color: var(--light-theme-background-color);
+    --secondary-text-color: var(--light-theme-secondary-color);
+    --disabled-text-color: var(--light-theme-disabled-color);
+    --divider-color: var(--light-theme-divider-color);
 
     /*
      * Primary and accent colors. Also see color.html for more colors.
@@ -46,16 +38,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     --light-accent-color: #ff80ab;  /* --paper-pink-a100 */
     --dark-accent-color: #f50057;  /* --paper-pink-a400 */
 
+    /*
+     * Material Design Light background theme
+     */
+    --light-theme-background-color: #ffffff;
+    --light-theme-base-color: #000000;
+    --light-theme-text-color: #212121;
+    --light-theme-secondary-color: #737373;  /* for secondary text and icons */
+    --light-theme-disabled-color: #9b9b9b;  /* disabled/hint text */
+    --light-theme-divider-color: #dbdbdb;
+
+    /*
+     * Material Design Dark background theme
+     */
+    --dark-theme-background-color: #212121;
+    --dark-theme-base-color: #ffffff;
+    --dark-theme-text-color: #ffffff;
+    --dark-theme-secondary-color: #bcbcbc;  /* for secondary text and icons */
+    --dark-theme-disabled-color: #646464;  /* disabled/hint text */
+    --dark-theme-divider-color: #3c3c3c;
+
     /*
      * Deprecated values because of their confusing names.
      */
-    --primary-text-color: var(--light-theme-text-color);
     --text-primary-color: var(--dark-theme-text-color);
-    --primary-background-color: var(--light-theme-background-color);
-    --secondary-text-color: var(--light-theme-secondary-color);
-    --disabled-text-color:var(--light-theme-disabled-color);
-    --divider-color: var(--light-theme-divider-color);
     --default-primary-color: var(--primary-color);
+
   }
 
 </style>
diff --git a/dashboard-ui/bower_components/paper-toggle-button/.bower.json b/dashboard-ui/bower_components/paper-toggle-button/.bower.json
index 997b1214a3..d3bb5bf44e 100644
--- a/dashboard-ui/bower_components/paper-toggle-button/.bower.json
+++ b/dashboard-ui/bower_components/paper-toggle-button/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-toggle-button",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A material design toggle button control",
   "authors": [
     "The Polymer Authors"
@@ -36,11 +36,11 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "main": "paper-toggle-button.html",
-  "_release": "1.0.13",
+  "_release": "1.0.14",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.13",
-    "commit": "dbc3924b8d9c16ee6376704dd80c39d12aee72c8"
+    "tag": "v1.0.14",
+    "commit": "131f32adf5ce831f94be7f80c436865b44d7cd95"
   },
   "_source": "git://github.com/PolymerElements/paper-toggle-button.git",
   "_target": "~1.0.5",
diff --git a/dashboard-ui/bower_components/paper-toggle-button/bower.json b/dashboard-ui/bower_components/paper-toggle-button/bower.json
index 09fd85b5bc..c6d1723a89 100644
--- a/dashboard-ui/bower_components/paper-toggle-button/bower.json
+++ b/dashboard-ui/bower_components/paper-toggle-button/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-toggle-button",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A material design toggle button control",
   "authors": [
     "The Polymer Authors"
diff --git a/dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html b/dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html
index 46d98c432a..3c3752170e 100644
--- a/dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html
+++ b/dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html
@@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="../paper-styles/default-theme.html">
 <link rel="import" href="../paper-ripple/paper-ripple.html">
@@ -55,6 +56,8 @@ Custom property | Description | Default
     <style>
       :host {
         display: inline-block;
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
       }
 
       :host([disabled]) {
@@ -142,11 +145,13 @@ Custom property | Description | Default
         position: relative;
         width: 36px;
         height: 14px;
+        /* The toggle button has an absolute position of -3px; The extra 1px
+        /* accounts for the toggle button shadow box. */
+        margin: 4px 1px;
       }
 
       .toggle-label {
         position: relative;
-        top: -2px;
         display: inline-block;
         vertical-align: middle;
         padding-left: var(--paper-toggle-button-label-spacing, 8px);
diff --git a/dashboard-ui/bower_components/web-animations-js/.bower.json b/dashboard-ui/bower_components/web-animations-js/.bower.json
index 1fff1edcc8..fb99003373 100644
--- a/dashboard-ui/bower_components/web-animations-js/.bower.json
+++ b/dashboard-ui/bower_components/web-animations-js/.bower.json
@@ -28,14 +28,14 @@
     "web-animations-next-lite.dev.html",
     "web-animations-next-lite.dev.js"
   ],
-  "version": "2.1.2",
-  "_release": "2.1.2",
+  "version": "2.1.3",
+  "_release": "2.1.3",
   "_resolution": {
     "type": "version",
-    "tag": "2.1.2",
-    "commit": "28e527353b67a9d74f6f7cdffe6ccefa3c54e94b"
+    "tag": "2.1.3",
+    "commit": "4f0c0ee122de4178853cb52fa0784df4a06a8a0f"
   },
   "_source": "git://github.com/web-animations/web-animations-js.git",
-  "_target": "2.1.2",
+  "_target": "2.1.3",
   "_originalSource": "web-animations/web-animations-js"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/web-animations-js/web-animations.min.js.gz b/dashboard-ui/bower_components/web-animations-js/web-animations.min.js.gz
deleted file mode 100644
index 775fe8df19..0000000000
Binary files a/dashboard-ui/bower_components/web-animations-js/web-animations.min.js.gz and /dev/null differ