diff --git a/dashboard-ui/autoorganizetv.html b/dashboard-ui/autoorganizetv.html
index 49e0291fc3..1e933cddf8 100644
--- a/dashboard-ui/autoorganizetv.html
+++ b/dashboard-ui/autoorganizetv.html
@@ -15,7 +15,7 @@
                     </li>
                     <li>
                         <paper-input id="txtWatchFolder" label="${LabelWatchFolder}" style="width:85%;display:inline-block;"></paper-input>
-                        <paper-icon-button id="btnSelectWatchFolder" icon="search"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectWatchFolder" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         <div class="fieldDescription">
                             <div>${LabelWatchFolderHelp}</div>
                         </div>
diff --git a/dashboard-ui/bower_components/neon-animation/.bower.json b/dashboard-ui/bower_components/neon-animation/.bower.json
new file mode 100644
index 0000000000..0c7de829c6
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/.bower.json
@@ -0,0 +1,62 @@
+{
+  "name": "neon-animation",
+  "description": "A system for animating Polymer-based web components",
+  "version": "1.2.2",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "web-animations"
+  ],
+  "main": [
+    "neon-animated-pages.html",
+    "neon-animatable-behavior.html",
+    "neon-animation-behavior.html",
+    "neon-animation-runner-behavior.html",
+    "neon-shared-element-animatable-behavior.html",
+    "neon-shared-element-animation-behavior.html",
+    "neon-animatable.html",
+    "neon-animations.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/neon-animation"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/neon-animation",
+  "ignore": [],
+  "dependencies": {
+    "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",
+    "web-animations-js": "web-animations/web-animations-js#^2.2.0"
+  },
+  "devDependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
+  },
+  "_release": "1.2.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.2.2",
+    "commit": "67b614a9261c84be12293f1105bafc158a2f443c"
+  },
+  "_source": "git://github.com/PolymerElements/neon-animation.git",
+  "_target": "^1.2.2",
+  "_originalSource": "PolymerElements/neon-animation",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/neon-animation/.github/ISSUE_TEMPLATE.md b/dashboard-ui/bower_components/neon-animation/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000000..08943a1e15
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,33 @@
+<!-- Instructions: https://github.com/PolymerElements/neon-animation/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10
diff --git a/dashboard-ui/bower_components/neon-animation/.gitignore b/dashboard-ui/bower_components/neon-animation/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/.gitignore
@@ -0,0 +1 @@
+bower_components
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..dd1a81e710
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/.travis.yml
@@ -0,0 +1,23 @@
+language: node_js
+sudo: required
+node_js: stable
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+  sauce_connect: true
+before_script:
+  - npm install -g bower polylint web-component-tester
+  - bower install
+  - polylint
+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=
+dist: trusty
diff --git a/dashboard-ui/bower_components/neon-animation/CONTRIBUTING.md b/dashboard-ui/bower_components/neon-animation/CONTRIBUTING.md
new file mode 100644
index 0000000000..f147978a3e
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/CONTRIBUTING.md
@@ -0,0 +1,77 @@
+
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
diff --git a/dashboard-ui/bower_components/neon-animation/animations/cascaded-animation.html b/dashboard-ui/bower_components/neon-animation/animations/cascaded-animation.html
new file mode 100644
index 0000000000..97b045071e
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/cascaded-animation.html
@@ -0,0 +1,95 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<cascaded-animation>` applies an animation on an array of elements with a delay between each.
+the delay defaults to 50ms.
+
+Configuration:
+```
+{
+  name: 'cascaded-animation',
+  animation: <animation-name>,
+  nodes: <array-of-nodes>,
+  nodeDelay: <node-delay-in-ms>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'cascaded-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    /**
+     * @param {{
+     *   animation: string,
+     *   nodes: !Array<!Element>,
+     *   nodeDelay: (number|undefined),
+     *   timing: (Object|undefined)
+     *  }} config
+     */
+    configure: function(config) {
+      this._animations = [];
+      var nodes = config.nodes;
+      var effects = [];
+      var nodeDelay = config.nodeDelay || 50;
+
+      config.timing = config.timing || {};
+      config.timing.delay = config.timing.delay || 0;
+
+      var oldDelay = config.timing.delay;
+      var abortedConfigure;
+      for (var node, index = 0; node = nodes[index]; index++) {
+        config.timing.delay += nodeDelay;
+        config.node = node;
+
+        var animation = document.createElement(config.animation);
+        if (animation.isNeonAnimation) {
+          var effect = animation.configure(config);
+
+          this._animations.push(animation);
+          effects.push(effect);
+        } else {
+          Polymer.Base._warn(this.is + ':', config.animation, 'not found!');
+          abortedConfigure = true;
+          break;
+        }
+      }
+      config.timing.delay = oldDelay;
+      config.node = null;
+      // if a bad animation was configured, abort config.
+      if (abortedConfigure) {
+        return;
+      }
+
+      this._effect = new GroupEffect(effects);
+      return this._effect;
+    },
+
+    complete: function() {
+      for (var animation, index = 0; animation = this._animations[index]; index++) {
+        animation.complete(animation.config);
+      }
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/fade-in-animation.html b/dashboard-ui/bower_components/neon-animation/animations/fade-in-animation.html
new file mode 100644
index 0000000000..cdb74e3095
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/fade-in-animation.html
@@ -0,0 +1,49 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<fade-in-animation>` animates the opacity of an element from 0 to 1.
+
+Configuration:
+```
+{
+  name: 'fade-in-animation',
+  node: <node>
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'fade-in-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      this._effect = new KeyframeEffect(node, [
+        {'opacity': '0'},
+        {'opacity': '1'}
+      ], this.timingFromConfig(config));
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/fade-out-animation.html b/dashboard-ui/bower_components/neon-animation/animations/fade-out-animation.html
new file mode 100644
index 0000000000..82cc3997cf
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/fade-out-animation.html
@@ -0,0 +1,49 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<fade-out-animation>` animates the opacity of an element from 1 to 0.
+
+Configuration:
+```
+{
+  name: 'fade-out-animation',
+  node: <node>
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'fade-out-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      this._effect = new KeyframeEffect(node, [
+        {'opacity': '1'},
+        {'opacity': '0'}
+      ], this.timingFromConfig(config));
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/hero-animation.html b/dashboard-ui/bower_components/neon-animation/animations/hero-animation.html
new file mode 100644
index 0000000000..a9075e138f
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/hero-animation.html
@@ -0,0 +1,83 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-shared-element-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<hero-animation>` is a shared element animation that scales and transform an element such that it
+appears to be shared between two pages. Use this in `<neon-animated-pages>`. The source page
+should use this animation in an 'exit' animation and set the `fromPage` configuration property to
+itself, and the destination page should use this animation in an `entry` animation and set the
+`toPage` configuration property to itself. They should also define the hero elements in the
+`sharedElements` property (not a configuration property, see
+`Polymer.NeonSharedElementAnimatableBehavior`).
+
+Configuration:
+```
+{
+  name: 'hero-animation',
+  id: <shared-element-id>,
+  timing: <animation-timing>,
+  toPage: <node>, /* define for the destination page */
+  fromPage: <node>, /* define for the source page */
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'hero-animation',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var shared = this.findSharedElements(config);
+      if (!shared) {
+        return;
+      }
+
+      var fromRect = shared.from.getBoundingClientRect();
+      var toRect = shared.to.getBoundingClientRect();
+
+      var deltaLeft = fromRect.left - toRect.left;
+      var deltaTop = fromRect.top - toRect.top;
+      var deltaWidth = fromRect.width / toRect.width;
+      var deltaHeight = fromRect.height / toRect.height;
+
+      this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0');
+      shared.to.style.zIndex = 10000;
+      shared.from.style.visibility = 'hidden';
+
+      this._effect = new KeyframeEffect(shared.to, [
+        {'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'},
+        {'transform': 'none'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    },
+
+    complete: function(config) {
+      var shared = this.findSharedElements(config);
+      if (!shared) {
+        return null;
+      }
+      shared.to.style.zIndex = '';
+      shared.from.style.visibility = '';
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/opaque-animation.html b/dashboard-ui/bower_components/neon-animation/animations/opaque-animation.html
new file mode 100644
index 0000000000..f5b60a4514
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/opaque-animation.html
@@ -0,0 +1,46 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent
+webkit/safari from drawing a frame before an animation for elements that animate from display:none.
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'opaque-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      node.style.opacity = '0';
+      this._effect = new KeyframeEffect(node, [
+        {'opacity': '1'},
+        {'opacity': '1'}
+      ], this.timingFromConfig(config));
+      return this._effect;
+    },
+
+    complete: function(config) {
+      config.node.style.opacity = '';
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..7284e9bd42
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html
@@ -0,0 +1,86 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-shared-element-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either
+a shared element, or a screen position.
+
+If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
+animation in the source page and in an `entry` animation in the destination page. Also, define the
+reverse-ripple elements in the `sharedElements` property (not a configuration property, see
+`Polymer.NeonSharedElementAnimatableBehavior`).
+If using a screen position, define the `gesture` property.
+Configuration:
+```
+{
+  name: 'reverse-ripple-animation`.
+  id: <shared-element-id>, /* set this or gesture */
+  gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
+  timing: <animation-timing>,
+  toPage: <node>, /* define for the destination page */
+  fromPage: <node>, /* define for the source page */
+}
+```
+-->
+
+<script>
+  Polymer({
+    is: 'reverse-ripple-animation',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var shared = this.findSharedElements(config);
+      if (!shared) {
+        return null;
+      }
+
+      var translateX, translateY;
+      var fromRect = shared.from.getBoundingClientRect();
+      if (config.gesture) {
+        translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2));
+        translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2));
+      } else {
+        var toRect = shared.to.getBoundingClientRect();
+        translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
+        translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
+      }
+      var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
+
+      var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
+      var diameter = Math.sqrt(2 * size * size);
+      var scaleX = diameter / fromRect.width;
+      var scaleY = diameter / fromRect.height;
+      var scale = 'scale(' + scaleX + ',' + scaleY + ')';
+
+      this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');
+      shared.from.style.borderRadius = '50%';
+
+      this._effect = new KeyframeEffect(shared.from, [
+        {'transform': translate + ' ' + scale},
+        {'transform': translate + ' scale(0)'}
+      ], this.timingFromConfig(config));
+      return this._effect;
+    },
+
+    complete: function() {
+      if (this.sharedElements) {
+        this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', '');
+        this.sharedElements.from.style.borderRadius = '';
+      }
+    }
+  });
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/ripple-animation.html b/dashboard-ui/bower_components/neon-animation/animations/ripple-animation.html
new file mode 100644
index 0000000000..1f5c736e3b
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/ripple-animation.html
@@ -0,0 +1,92 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-shared-element-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<ripple-animation>` scales and transform an element such that it appears to ripple from either
+a shared element, or from a screen position, to full screen.
+
+If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
+animation in the source page and in an `entry` animation in the destination page. Also, define the
+hero elements in the `sharedElements` property (not a configuration property, see
+`Polymer.NeonSharedElementAnimatableBehavior`).
+
+If using a screen position, define the `gesture` property.
+
+Configuration:
+```
+{
+  name: 'ripple-animation`.
+  id: <shared-element-id>, /* set this or gesture */
+  gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
+  timing: <animation-timing>,
+  toPage: <node>, /* define for the destination page */
+  fromPage: <node>, /* define for the source page */
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'ripple-animation',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var shared = this.findSharedElements(config);
+      if (!shared) {
+        return null;
+      }
+
+      var translateX, translateY;
+      var toRect = shared.to.getBoundingClientRect();
+      if (config.gesture) {
+        translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
+        translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
+      } else {
+        var fromRect = shared.from.getBoundingClientRect();
+        translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
+        translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
+      }
+      var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
+
+      var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
+      var diameter = Math.sqrt(2 * size * size);
+      var scaleX = diameter / toRect.width;
+      var scaleY = diameter / toRect.height;
+      var scale = 'scale(' + scaleX + ',' + scaleY + ')';
+
+      this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
+      shared.to.style.borderRadius = '50%';
+
+      this._effect = new KeyframeEffect(shared.to, [
+        {'transform': translate + ' scale(0)'},
+        {'transform': translate + ' ' + scale}
+      ], this.timingFromConfig(config));
+      return this._effect;
+    },
+
+    complete: function() {
+      if (this.sharedElements) {
+        this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
+        this.sharedElements.to.style.borderRadius = '';
+      }
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/scale-down-animation.html b/dashboard-ui/bower_components/neon-animation/animations/scale-down-animation.html
new file mode 100644
index 0000000000..6dc187b317
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/scale-down-animation.html
@@ -0,0 +1,65 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it
+scales in both the x and y axes.
+
+Configuration:
+```
+{
+  name: 'scale-down-animation',
+  node: <node>,
+  axis: 'x' | 'y' | '',
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'scale-down-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      }
+
+      var scaleProperty = 'scale(0, 0)';
+      if (config.axis === 'x') {
+        scaleProperty = 'scale(0, 1)';
+      } else if (config.axis === 'y') {
+        scaleProperty = 'scale(1, 0)';
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'scale(1,1)'},
+        {'transform': scaleProperty}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/scale-up-animation.html b/dashboard-ui/bower_components/neon-animation/animations/scale-up-animation.html
new file mode 100644
index 0000000000..b5164f7fe1
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/scale-up-animation.html
@@ -0,0 +1,65 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<scale-up-animation>` animates the scale transform of an element from 0 to 1. By default it
+scales in both the x and y axes.
+
+Configuration:
+```
+{
+  name: 'scale-up-animation',
+  node: <node>,
+  axis: 'x' | 'y' | '',
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'scale-up-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      }
+
+      var scaleProperty = 'scale(0)';
+      if (config.axis === 'x') {
+        scaleProperty = 'scale(0, 1)';
+      } else if (config.axis === 'y') {
+        scaleProperty = 'scale(1, 0)';
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': scaleProperty},
+        {'transform': 'scale(1, 1)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-down-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-down-animation.html
new file mode 100644
index 0000000000..c17141f25e
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-down-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-down-animation>` animates the transform of an element from `none` `translateY(100%)`.
+The `transformOrigin` defaults to `50% 0`.
+
+Configuration:
+```
+{
+  name: 'slide-down-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-down-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translateY(0%)'},
+        {'transform': 'translateY(100%)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html
new file mode 100644
index 0000000000..18c40db26b
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
+The `transformOrigin` defaults to `50% 0`.
+
+Configuration:
+```
+{
+  name: 'slide-from-bottom-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-from-bottom-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translateY(100%)'},
+        {'transform': 'translateY(0)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-from-left-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-from-left-animation.html
new file mode 100644
index 0000000000..d248175221
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-from-left-animation.html
@@ -0,0 +1,60 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-from-left-animation>` animates the transform of an element from
+`translateX(-100%)` to `none`.
+The `transformOrigin` defaults to `0 50%`.
+
+Configuration:
+```
+{
+  name: 'slide-from-left-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-from-left-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translateX(-100%)'},
+        {'transform': 'none'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-from-right-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-from-right-animation.html
new file mode 100644
index 0000000000..4ebbf11b86
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-from-right-animation.html
@@ -0,0 +1,60 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-from-right-animation>` animates the transform of an element from
+`translateX(100%)` to `none`.
+The `transformOrigin` defaults to `0 50%`.
+
+Configuration:
+```
+{
+  name: 'slide-from-right-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-from-right-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translateX(100%)'},
+        {'transform': 'none'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html
new file mode 100644
index 0000000000..32920f06b8
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
+`none`. The `transformOrigin` defaults to `50% 0`.
+
+Configuration:
+```
+{
+  name: 'slide-from-top-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-from-top-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translateY(-100%)'},
+        {'transform': 'translateY(0%)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-left-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-left-animation.html
new file mode 100644
index 0000000000..7fbc446bcc
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-left-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-left-animation>` animates the transform of an element from `none` to `translateX(-100%)`.
+The `transformOrigin` defaults to `0 50%`.
+
+Configuration:
+```
+{
+  name: 'slide-left-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-left-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'none'},
+        {'transform': 'translateX(-100%)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-right-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-right-animation.html
new file mode 100644
index 0000000000..e6441c4f38
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-right-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-right-animation>` animates the transform of an element from `none` to `translateX(100%)`.
+The `transformOrigin` defaults to `0 50%`.
+
+Configuration:
+```
+{
+  name: 'slide-right-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-right-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'none'},
+        {'transform': 'translateX(100%)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/slide-up-animation.html b/dashboard-ui/bower_components/neon-animation/animations/slide-up-animation.html
new file mode 100644
index 0000000000..fdf1186d16
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/slide-up-animation.html
@@ -0,0 +1,59 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<slide-up-animation>` animates the transform of an element from `translateY(0)` to
+`translateY(-100%)`. The `transformOrigin` defaults to `50% 0`.
+
+Configuration:
+```
+{
+  name: 'slide-up-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'slide-up-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': 'translate(0)'},
+        {'transform': 'translateY(-100%)'}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/animations/transform-animation.html b/dashboard-ui/bower_components/neon-animation/animations/transform-animation.html
new file mode 100644
index 0000000000..f5963ed05f
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/animations/transform-animation.html
@@ -0,0 +1,70 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-animation-behavior.html">
+<link rel="import" href="../web-animations.html">
+
+<!--
+`<transform-animation>` animates a custom transform on an element. Use this to animate multiple
+transform properties, or to apply a custom transform value.
+
+Configuration:
+```
+{
+  name: 'transform-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  transformFrom: <transform-from-string>,
+  transformTo: <transform-to-string>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'transform-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    /**
+     * @param {{
+     *   node: !Element,
+     *   transformOrigin: (string|undefined),
+     *   transformFrom: (string|undefined),
+     *   transformTo: (string|undefined),
+     *   timing: (Object|undefined)
+     * }} config
+     */
+    configure: function(config) {
+      var node = config.node;
+      var transformFrom = config.transformFrom || 'none';
+      var transformTo = config.transformTo || 'none';
+
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      }
+
+      this._effect = new KeyframeEffect(node, [
+        {'transform': transformFrom},
+        {'transform': transformTo}
+      ], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/bower.json b/dashboard-ui/bower_components/neon-animation/bower.json
new file mode 100644
index 0000000000..192e7bef81
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/bower.json
@@ -0,0 +1,52 @@
+{
+  "name": "neon-animation",
+  "description": "A system for animating Polymer-based web components",
+  "version": "1.2.2",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "web-animations"
+  ],
+  "main": [
+    "neon-animated-pages.html",
+    "neon-animatable-behavior.html",
+    "neon-animation-behavior.html",
+    "neon-animation-runner-behavior.html",
+    "neon-shared-element-animatable-behavior.html",
+    "neon-shared-element-animation-behavior.html",
+    "neon-animatable.html",
+    "neon-animations.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/neon-animation"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/neon-animation",
+  "ignore": [],
+  "dependencies": {
+    "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",
+    "web-animations-js": "web-animations/web-animations-js#^2.2.0"
+  },
+  "devDependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^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
new file mode 100644
index 0000000000..44993465fc
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/index.html
@@ -0,0 +1,166 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: card</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="../../../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 is="custom-style">
+
+      body {
+        padding: 15px;
+        @apply(--layout-fullbleed);
+        @apply(--paper-font-common-base);
+      }
+
+      neon-animated-pages {
+        height: 100%;
+      }
+
+      .large {
+        width: 100%
+      }
+
+      .button {
+        text-align: center;
+        width: 120px;
+        height: 32px;
+        line-height: 32px;
+        border-radius: 2px;
+        font-size: 0.9em;
+        background-color: #fff;
+        color: #646464;
+      }
+
+      .button.blue {
+        background-color: #4285f4;
+        color: #fff;
+      }
+
+      .button.raised {
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      }
+
+      .button.back {
+        position: fixed;
+        top: 30px;
+        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>
+
+    <template is="dom-bind">
+      <neon-animated-pages id="pages" selected="0">
+          <x-cards-list id="list">
+            <div class="card-contents">
+              <h2>Choose a subject</h2>
+              <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="card-contents">
+              <div class="raised back button" on-click="_onBackClick">
+                BACK
+              </div>
+              <h2>Polymer</h2>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                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="card-contents">
+              <div class="raised back button" on-click="_onBackClick">
+                BACK
+              </div>
+              <h2>Angular</h2>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                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>
+    </template>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope._onPolymerClick = function(event) {
+        this.$.list.sharedElements = {
+          'ripple': event.target,
+          'reverse-ripple': event.target
+        };
+        this.$.pages.selected = 1;
+      };
+
+      scope._onAngularClick = function(event) {
+        this.$.list.sharedElements = {
+          'ripple': event.target,
+          'reverse-ripple': event.target
+        };
+        this.$.pages.selected = 2;
+      };
+
+      scope._onBackClick = function(event) {
+        this.$.pages.selected = 0;
+      };
+
+    </script>
+
+  </body>
+</html>
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
new file mode 100644
index 0000000000..6a578fc489
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/x-card.html
@@ -0,0 +1,97 @@
+<!--
+@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
+-->
+
+<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">
+  <template>
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+      #placeholder {
+        opacity: 0;
+        background-color: grey;
+        @apply(--layout-fit);
+      }
+    </style>
+
+    <div id="placeholder"></div>
+    <div id="container">
+      <content select="div"></content>
+    </div>
+
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'x-card',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+      animationConfig: {
+        value: function() {
+          return {
+            'entry': [{
+              name: 'ripple-animation',
+              id: 'ripple',
+              toPage: this
+            }, {
+              name: 'fade-out-animation',
+              node: this.$.placeholder,
+              timing: {
+                delay: 250
+              }
+            }, {
+              name: 'fade-in-animation',
+              node: this.$.container,
+              timing: {
+                delay: 50
+              }
+            }],
+
+            'exit': [{
+              name: 'opaque-animation',
+              node: this.$.placeholder
+            }, {
+              name: 'fade-out-animation',
+              node: this.$.container,
+              timing: {
+                duration: 0
+              }
+            }, {
+              name: 'reverse-ripple-animation',
+              id: 'reverse-ripple',
+              fromPage: this
+            }]
+          };
+        }
+      },
+
+      sharedElements: {
+        value: function() {
+          return {
+            'ripple': this.$.placeholder,
+            'reverse-ripple': this.$.placeholder
+          };
+        }
+      }
+    }
+  });
+})();
+</script>
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
new file mode 100644
index 0000000000..b817698fb5
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html
@@ -0,0 +1,75 @@
+<!--
+@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
+-->
+
+<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">
+  <template>
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+
+      #placeholder {
+        opacity: 0;
+        background-color: grey;
+        @apply(--layout-fit);
+      }
+    </style>
+    
+    <div id="placeholder"></div>
+    <div id="container">
+      <content select="div"></content>
+    </div>
+
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'x-cards-list',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+      animationConfig: {
+        value: function() {
+          return {
+            'entry': [{
+              name: 'reverse-ripple-animation',
+              id: 'reverse-ripple',
+              toPage: this
+            }],
+
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this.$.container,
+              timing: {
+                delay: 150,
+                duration: 0
+              }
+            }, {
+              name: 'ripple-animation',
+              id: 'ripple',
+              fromPage: this
+            }]
+          };
+        }
+      }
+    }
+  });
+})();
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html b/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html
new file mode 100644
index 0000000000..26ba53ff9b
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/declarative/index.html
@@ -0,0 +1,132 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: declarative</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="../../../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 is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+        @apply(--layout-vertical);
+      }
+
+      .toolbar {
+        position: relative;
+
+        padding: 8px;
+
+        background-color: white;
+
+        z-index: 12;
+      }
+
+      neon-animated-pages {
+        @apply(--layout-flex);
+      }
+
+      neon-animatable {
+        color: white;
+        @apply(--layout-horizontal);
+        @apply(--layout-center-center);
+        @apply(--paper-font-display4);
+      }
+
+      neon-animatable:nth-child(1) {
+        background: var(--paper-red-500);
+      }
+
+      neon-animatable:nth-child(2) {
+        background: var(--paper-blue-500);
+      }
+
+      neon-animatable:nth-child(3) {
+        background: var(--paper-orange-500);
+      }
+
+      neon-animatable:nth-child(4) {
+        background: var(--paper-green-500);
+      }
+
+      neon-animatable:nth-child(5) {
+        background: var(--paper-purple-500);
+      }
+
+    </style>
+
+  </head>
+  <body>
+
+    <template is="dom-bind">
+
+      <div class="toolbar">
+        <button on-click="_onPrevClick">&#8678;</button>
+        <button on-click="_onNextClick">&#8680;</button>
+        <button on-click="_onUpClick">&#8679;</button>
+        <button on-click="_onDownClick">&#8681;</button>
+      </div>
+
+      <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>
+        <neon-animatable>4</neon-animatable>
+        <neon-animatable>5</neon-animatable>
+      </neon-animated-pages>
+
+    </template>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+      scope.selected = 0;
+
+      scope._onPrevClick = function() {
+        this.entryAnimation = 'slide-from-left-animation';
+        this.exitAnimation = 'slide-right-animation';
+        this.selected = this.selected === 0 ? 4 : (this.selected - 1);
+      }
+
+      scope._onNextClick = function() {
+        this.entryAnimation = 'slide-from-right-animation';
+        this.exitAnimation = 'slide-left-animation';
+        this.selected = this.selected === 4 ? 0 : (this.selected + 1);
+      }
+
+      scope._onUpClick = function() {
+        this.entryAnimation = 'slide-from-top-animation';
+        this.exitAnimation = 'slide-down-animation';
+        this.selected = this.selected === 4 ? 0 : (this.selected + 1);
+      }
+
+      scope._onDownClick = function() {
+        this.entryAnimation = 'slide-from-bottom-animation';
+        this.exitAnimation = 'slide-up-animation';
+        this.selected = this.selected === 0 ? 4 : (this.selected - 1);
+      }
+
+    </script>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/doc/index.html b/dashboard-ui/bower_components/neon-animation/demo/doc/index.html
new file mode 100644
index 0000000000..8b3875e7ec
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/index.html
@@ -0,0 +1,70 @@
+<!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>
+  <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">
+    <link rel="import" href="my-dialog.html">
+
+  </head>
+  <style>
+    my-animatable {
+      margin-top: 50px;
+    }
+  </style>
+  <body>
+
+    <template is="dom-bind">
+
+      <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._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) {
+            node.hide();
+          } else {
+            node.show();
+          }
+        }
+      };
+
+    </script>
+
+  </body>
+</html>
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
new file mode 100644
index 0000000000..5063f74ba6
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html
@@ -0,0 +1,68 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../neon-animation-runner-behavior.html">
+<link rel="import" href="../../animations/scale-down-animation.html">
+
+<dom-module id="my-animatable">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        border-radius: 50%;
+        width: 300px;
+        height: 300px;
+        background: orange;
+      }
+    </style>
+    <content></content>
+
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'my-animatable',
+
+    behaviors: [
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+
+    properties: {
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            name: 'scale-down-animation',
+            node: this
+          }
+        }
+      }
+
+    },
+
+    listeners: {
+      'neon-animation-finish': '_onNeonAnimationFinish'
+    },
+
+    animate: function() {
+      this.playAnimation();
+    },
+
+    _onNeonAnimationFinish: function() {
+      console.log('animation finish!');
+    }
+
+  });
+
+</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
new file mode 100644
index 0000000000..bd3344c0ea
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html
@@ -0,0 +1,94 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.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">
+  <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>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'my-dialog',
+
+    behaviors: [
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+
+    properties: {
+
+      opened: {
+        type: Boolean
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'scale-up-animation',
+              node: this
+            }],
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this
+            }]
+          }
+        }
+      }
+
+    },
+
+    listeners: {
+      'neon-animation-finish': '_onAnimationFinish'
+    },
+
+    _onAnimationFinish: function() {
+      if (!this.opened) {
+        this.style.display = '';
+      }
+    },
+
+    show: function() {
+      this.opened = true;
+      this.style.display = 'inline-block';
+      this.playAnimation('entry');
+    },
+
+    hide: function() {
+      this.opened = false;
+      this.playAnimation('exit');
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..9a61530fb7
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html
@@ -0,0 +1,90 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
+<link rel="import" href="../../neon-animation-runner-behavior.html">
+
+<dom-module id="animated-dropdown">
+  <template>
+    <style>
+      :host {
+        display: none;
+        padding: 16px;
+        background: white;
+        color: black;
+
+        @apply(--shadow-elevation-2dp);
+      }
+    </style>
+    <content></content>
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'animated-dropdown',
+
+    behaviors: [
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+
+    properties: {
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'scale-up-animation',
+              node: this,
+              transformOrigin: '0 0'
+            }],
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this
+            }]
+          }
+        }
+      },
+
+      _showing: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    listeners: {
+      'neon-animation-finish': '_onAnimationFinish'
+    },
+
+    _onAnimationFinish: function() {
+      if (this._showing) {
+      } else {
+        this.style.display = '';
+      }
+    },
+
+    show: function() {
+      this.style.display = 'inline-block';
+      this._showing = true;
+      this.playAnimation('entry');
+    },
+
+    hide: function() {
+      this._showing = false;
+      this.playAnimation('exit');
+    }
+
+  });
+
+</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
new file mode 100644
index 0000000000..b238474cbf
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html
@@ -0,0 +1,54 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: dropdown</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="../../neon-animated-pages.html">
+    <link rel="import" href="../../neon-animations.html">
+    <link rel="import" href="animated-dropdown.html">
+
+  </head>
+  <body>
+
+    <template is="dom-bind">
+
+      <button dropdown-id="dropdown" on-click="_onButtonClick">dropdown</button>
+      <br>
+      <animated-dropdown id="dropdown" on-click="_onDropdownClick">Hello world!</animated-dropdown>
+
+    </template>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope._onButtonClick = function(event) {
+        var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id'));
+        if (dropdown) {
+          dropdown.show();
+        }
+      };
+
+      scope._onDropdownClick = function(event) {
+        event.target.hide();
+      };
+
+    </script>
+
+  </body>
+</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
new file mode 100644
index 0000000000..a268936416
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html
@@ -0,0 +1,164 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.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">
+  <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)]]">
+        <span>[[item.value]]</span>
+      </div>
+    </template>
+
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'animated-grid',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      config: {
+        type: Array,
+        value: function() {
+          return [
+            {value: 1, color: 'blue'},
+            {value: 2, color: 'red'},
+            {value: 3, color: 'blue'},
+            {value: 4, color: 'green'},
+            {value: 5, color: 'yellow'},
+            {value: 6, color: 'blue'},
+            {value: 7, color: 'red'},
+            {value: 8, color: 'green'},
+            {value: 9, color: 'yellow'},
+            {value: 10, color: 'red'}
+          ]
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'exit': [{
+              name: 'ripple-animation',
+              id: 'ripple',
+              fromPage: this
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              fromPage: this
+            }]
+          }
+        }
+      }
+
+    },
+
+    listeners: {
+      click: '_onClick'
+    },
+
+    _computeTileClass: function(color) {
+      return 'tile ' + color + '-300';
+    },
+
+    _onClick: function(event) {
+      var target = event.target;
+      while (target !== this && !target._templateInstance) {
+        target = target.parentNode;
+      }
+
+      // configure the page animation
+      this.sharedElements = {
+        'hero': target,
+        'ripple': target
+      };
+      this.animationConfig['exit'][0].gesture = {
+        x: event.x || event.pageX,
+        y: event.y || event.pageY
+      };
+
+      this.fire('tile-click', {
+        tile: target,
+        data: target._templateInstance.item
+      });
+    }
+
+  });
+
+</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
new file mode 100644
index 0000000000..63d35bbf68
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html
@@ -0,0 +1,122 @@
+<!--
+@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
+-->
+<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">
+  <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>
+
+  Polymer({
+
+    is: 'fullsize-page-with-card',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      color: {
+        type: String
+      },
+
+      sharedElements: {
+        type: Object,
+        value: function() {
+          return {
+            'hero': this.$.card,
+            'ripple': this.$.fixed
+          }
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'ripple-animation',
+              id: 'ripple',
+              toPage: this,
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              toPage: this,
+              timing: {
+                delay: 150
+              }
+            }],
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this.$.fixed
+            }, {
+              name: 'transform-animation',
+              transformFrom: 'none',
+              transformTo: 'translate(0px,-200vh) scale(0.9,1)',
+              node: this.$.card
+            }]
+          }
+        }
+      }
+
+    },
+
+    _computeCardClass: function(color) {
+      var cls = 'card';
+      if (color) {
+        cls += ' ' + color + '-300';
+      }
+      return cls;
+    },
+
+    _computeFixedBackgroundClass: function(color) {
+      var cls = 'fixed';
+      if (color) {
+        cls += ' ' + color + '-100';
+      }
+      return cls;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/grid/index.html b/dashboard-ui/bower_components/neon-animation/demo/grid/index.html
new file mode 100644
index 0000000000..b102dba40b
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/grid/index.html
@@ -0,0 +1,64 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: grid</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="../../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 is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+
+      neon-animated-pages {
+        height: 100%;
+      }
+    </style>
+
+  </head>
+  <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" on-click="_onFullsizeClick">
+        </fullsize-page-with-card>
+      </neon-animated-pages>
+    </template>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope._onTileClick = function(event) {
+        this.$['fullsize-card'].color = event.detail.data.color;
+        this.$.pages.selected = 1;
+      };
+
+      scope._onFullsizeClick = function(event) {
+        this.$.pages.selected = 0;
+      };
+
+    </script>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/index.html b/dashboard-ui/bower_components/neon-animation/demo/index.html
new file mode 100644
index 0000000000..1e4e1204a8
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/index.html
@@ -0,0 +1,45 @@
+<!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
new file mode 100644
index 0000000000..565618c218
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/full-view.html
@@ -0,0 +1,118 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.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">
+  <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>
+
+    <div id="main" class="main">
+      <div class="image-container">
+        <div class="image">
+        </div>
+      </div>
+    </div>
+    
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'full-view',
+
+    behaviors: [
+      Polymer.NeonAnimatableBehavior
+    ],
+
+    properties: {
+
+      sharedElements: {
+        type: Object,
+        value: function() {
+          return {
+            'hero': this.$.main
+          };
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'fade-in-animation',
+              node: this.$.button
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              toPage: this
+            }],
+
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this.$.button
+            }, {
+              name: 'scale-down-animation',
+              node: this.$.main,
+              transformOrigin: '50% 50%',
+              axis: 'y'
+            }]
+
+          }
+        }
+      }
+
+    },
+
+    _onClearButtonClick: function() {
+      this.fire('close');
+    }
+
+  });
+
+</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
new file mode 100644
index 0000000000..eabb02e5b6
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/index.html
@@ -0,0 +1,35 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: list</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="../../../iron-flex-layout/iron-flex-layout.html">
+    <link rel="import" href="list-demo.html">
+
+  </head>
+  <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
new file mode 100644
index 0000000000..45808c8cae
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html
@@ -0,0 +1,102 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.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">
+<link rel="import" href="list-view.html">
+<link rel="import" href="full-view.html">
+
+<dom-module id="list-demo">
+  <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>
+
+<script>
+
+  Polymer({
+
+    is: 'list-demo',
+
+    properties: {
+
+      fileData: {
+        type: Array,
+        value: function() {
+          return [
+            {fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'},
+            {fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'}
+          ]
+        }
+      }
+    },
+
+    _onItemClick: function() {
+      this.$.pages.selected = 1;
+    },
+
+    _onClose: function() {
+      this.$.pages.selected = 0;
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..ddb05502ca
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/list/list-view.html
@@ -0,0 +1,124 @@
+<!--
+@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
+-->
+<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/color.html">
+<link rel="import" href="../../neon-animatable-behavior.html">
+
+<dom-module id="list-view">
+  <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>
+
+    <div class="main">
+
+        <template is="dom-repeat" items="[[data]]">
+
+          <paper-item>
+            <paper-item-body two-line>
+              <div>[[item.fileName]]</div>
+              <div secondary>[[item.modifiedDate]]</div>
+            </paper-item-body>
+            <iron-icon icon="info"></iron-icon>
+          </paper-item>
+
+        </template>
+
+    </div>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'list-view',
+
+    behaviors: [
+      Polymer.NeonAnimatableBehavior
+    ],
+
+    listeners: {
+      'click': '_onClick'
+    },
+
+    properties: {
+
+      data: {
+        type: Array,
+        value: function() {
+          return [];
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'fade-in-animation',
+              node: this.$.button
+            }],
+
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this.$.button
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              fromPage: this
+            }]
+          };
+        }
+      }
+
+    },
+
+    _onClick: function(event) {
+      var target = event.target;
+      while (target !== this && !target._templateInstance) {
+        target = target.parentNode;
+      }
+
+      // configure the page animation
+      this.sharedElements = {
+        'hero': target,
+      };
+
+      this.fire('item-click', {
+        item: target,
+      });
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..c1d52c1a5e
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html
@@ -0,0 +1,146 @@
+<!--
+@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
+-->
+<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">
+<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">
+  <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)]]">
+        <span>[[item.value]]</span>
+      </div>
+    </template>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'animated-grid',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      config: {
+        type: Array,
+        value: function() {
+          return [
+            {value: 1, color: 'blue'},
+            {value: 2, color: 'red'},
+            {value: 3, color: 'blue'},
+            {value: 4, color: 'green'},
+            {value: 5, color: 'yellow'},
+            {value: 6, color: 'blue'},
+            {value: 7, color: 'red'},
+            {value: 8, color: 'green'},
+            {value: 9, color: 'yellow'},
+            {value: 10, color: 'red'}
+          ]
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'cascaded-animation',
+              animation: 'transform-animation',
+              transformFrom: 'translateY(100%)',
+              transformTo: 'none',
+              timing: {
+                delay: 50
+              }
+            }]
+          }
+        }
+      }
+
+    },
+
+    attached: function() {
+      this.async(function() {
+        var nodeList = Polymer.dom(this.root).querySelectorAll('.tile');
+        this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
+      });
+    },
+
+    _computeTileClass: function(color) {
+      return 'tile ' + color + '-300';
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..61a11bd7ba
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/full-page.html
@@ -0,0 +1,82 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.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">
+  <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>
+
+Polymer({
+
+  is: 'full-page',
+
+  behaviors: [
+    Polymer.NeonAnimatableBehavior,
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+
+  properties: {
+
+    animationConfig: {
+      type: Object,
+      value: function() {
+        return {
+          'entry': [{
+            name: 'slide-from-top-animation',
+            node: this.$.toolbar
+          }, {
+            animatable: this.$.grid,
+            type: 'entry'
+          }]
+        };
+      }
+    }
+
+  },
+
+  show: function() {
+    this.style.visibility = 'visible';
+    this.playAnimation('entry');
+  }
+
+});
+
+</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
new file mode 100644
index 0000000000..54c8d68a5a
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/load/index.html
@@ -0,0 +1,48 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: load</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="../../../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 is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      full-page {
+        @apply(--layout-fit);
+      }
+    </style>
+  </head>
+  <body>
+
+    <full-page></full-page>
+
+    <script>
+
+      document.addEventListener('WebComponentsReady', function() {
+        document.querySelector('full-page').show();
+      });
+
+    </script>
+
+  </body>
+</html>
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
new file mode 100644
index 0000000000..f1244b442c
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html
@@ -0,0 +1,167 @@
+<!--
+@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
+-->
+<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">
+<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">
+  <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)]]">
+        <span>[[item.value]]</span>
+      </div>
+    </template>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'animated-grid',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      config: {
+        type: Array,
+        value: function() {
+          return [
+            {value: 1, color: 'blue'},
+            {value: 2, color: 'red'},
+            {value: 3, color: 'blue'},
+            {value: 4, color: 'green'},
+            {value: 5, color: 'yellow'},
+            {value: 6, color: 'blue'},
+            {value: 7, color: 'red'},
+            {value: 8, color: 'green'},
+            {value: 9, color: 'yellow'},
+            {value: 10, color: 'red'}
+          ]
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'exit': [{
+              name: 'ripple-animation',
+              id: 'ripple',
+              fromPage: this
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              fromPage: this
+            }]
+          }
+        }
+      }
+
+    },
+
+    listeners: {
+      click: '_onClick'
+    },
+
+    _computeTileClass: function(color) {
+      return 'tile ' + color + '-300';
+    },
+
+    _onClick: function(event) {
+      var target = event.target;
+      while (target !== this && !target._templateInstance) {
+        target = target.parentNode;
+      }
+
+      // configure the page animation
+      this.sharedElements = {
+        'hero': target,
+        'ripple': target
+      };
+      this.animationConfig['exit'][0].gesture = {
+        x: event.x,
+        y: event.y
+      };
+
+      this.fire('tile-click', {
+        tile: target,
+        data: target._templateInstance.item
+      });
+    }
+
+  });
+
+</script>
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
new file mode 100644
index 0000000000..83b8a9170c
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html
@@ -0,0 +1,120 @@
+<!--
+@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
+-->
+<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">
+  <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>
+
+  Polymer({
+
+    is: 'fullsize-page-with-card',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      color: {
+        type: String
+      },
+
+      sharedElements: {
+        type: Object,
+        value: function() {
+          return {
+            'hero': this.$.card,
+            'ripple': this.$.fixed
+          }
+        }
+      },
+
+      animationConfig: {
+        type: Object,
+        value: function() {
+          return {
+            'entry': [{
+              name: 'ripple-animation',
+              id: 'ripple',
+              toPage: this,
+            }, {
+              name: 'hero-animation',
+              id: 'hero',
+              toPage: this,
+              timing: {
+                delay: 150
+              }
+            }],
+            'exit': [{
+              name: 'fade-out-animation',
+              node: this.$.fixed
+            }, {
+              name: 'transform-animation',
+              transformFrom: 'none',
+              transformTo: 'translate(0px,-200vh) scale(0.9,1)',
+              node: this.$.card
+            }]
+          }
+        }
+      }
+
+    },
+
+    _computeCardClass: function(color) {
+      var cls = 'card';
+      if (color) {
+        cls += ' ' + color + '-300';
+      }
+      return cls;
+    },
+
+    _computeFixedBackgroundClass: function(color) {
+      var cls = 'fixed';
+      if (color) {
+        cls += ' ' + color + '-100';
+      }
+      return cls;
+    }
+
+  });
+
+</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
new file mode 100644
index 0000000000..591d63c698
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html
@@ -0,0 +1,63 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: grid</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="../../../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 is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      reprojected-pages {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <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>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope._onTileClick = function(event) {
+        this.$['fullsize-card'].color = event.detail.data.color;
+        this.$.pages.selected = 1;
+      };
+
+      scope._onFullsizeClick = function(event) {
+        this.$.pages.selected = 0;
+      };
+
+    </script>
+
+  </body>
+</html>
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
new file mode 100644
index 0000000000..e71f2e055d
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html
@@ -0,0 +1,45 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<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>
+
+  Polymer({
+
+    is: 'reprojected-pages',
+
+    properties: {
+
+      selected: {
+        type: String,
+        notify: true
+      }
+
+    }
+
+  });
+
+</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/tiles/circles-page.html b/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html
new file mode 100644
index 0000000000..70a4a75210
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html
@@ -0,0 +1,107 @@
+<!--
+@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
+-->
+<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="circles-page">
+  <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>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'circles-page',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      animationConfig: {
+        value: function() {
+          var circles = Polymer.dom(this.root).querySelectorAll('.circle');
+          var circlesArray = Array.prototype.slice.call(circles);
+          return {
+            'entry': [{
+              name: 'cascaded-animation',
+              animation: 'scale-up-animation',
+              nodes: circlesArray
+            }],
+
+            'exit': [{
+              name: 'hero-animation',
+              id: 'hero',
+              fromPage: this
+            }, {
+              name: 'cascaded-animation',
+              animation: 'scale-down-animation'
+            }]
+          };
+        }
+      }
+    },
+
+    listeners: {
+      'click': '_onClick'
+    },
+
+    _onClick: function(event) {
+      var target = event.target;
+      if (target.classList.contains('circle')) {
+        // configure the page animation
+        this.sharedElements = {
+          'hero': target
+        };
+
+        var nodesToScale = [];
+        var circles = Polymer.dom(this.root).querySelectorAll('.circle');
+        for (var node, index = 0; node = circles[index]; index++) {
+          if (node !== event.target) {
+            nodesToScale.push(node);
+          }
+        }
+        this.animationConfig['exit'][1].nodes = nodesToScale;
+
+        this.fire('circle-click');
+      }
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html b/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html
new file mode 100644
index 0000000000..f509f0b5e6
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/index.html
@@ -0,0 +1,70 @@
+<!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>
+  <head>
+    <title>neon-animated-pages demo: tiles</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="../../../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 is="custom-style">
+      body {
+        overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      neon-animated-pages {
+        height: 100%;
+      }
+
+      :root {
+        --color-one: var(--paper-cyan-300);
+        --color-two: var(--paper-orange-500);
+      }
+    </style>
+
+  </head>
+  <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>
+
+    <script>
+
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope._onCircleClick = function(event) {
+        this.$.pages.selected = 1;
+      };
+
+      scope._onSquaresClick = function(event) {
+        this.$.pages.selected = 0;
+      };
+
+    </script>
+
+  </body>
+</html>
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
new file mode 100644
index 0000000000..52fe7e1880
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html
@@ -0,0 +1,100 @@
+<!--
+@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
+-->
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
+
+<dom-module id="squares-page">
+  <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">
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+    </div>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'squares-page',
+
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior
+    ],
+
+    properties: {
+
+      sharedElements: {
+        value: function() {
+          return {
+            'hero': this.$.header
+          }
+        }
+      },
+
+      animationConfig: {
+        value: function() {
+          var squares = Polymer.dom(this.root).querySelectorAll('.square');
+          var squaresArray = Array.prototype.slice.call(squares);
+          return {
+            'entry': [{
+              name: 'hero-animation',
+              id: 'hero',
+              toPage: this
+            }, {
+              name: 'cascaded-animation',
+              animation: 'transform-animation',
+              transformFrom: 'translateY(100%)',
+              nodes: squaresArray
+            }],
+
+            'exit': [{
+              name: 'slide-up-animation',
+              node: this.$.header
+            }, {
+              name: 'cascaded-animation',
+              animation: 'transform-animation',
+              transformTo: 'translateY(60vh)',
+              nodes: squaresArray
+            }]
+          };
+        }
+      }
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/guides/neon-animation.md b/dashboard-ui/bower_components/neon-animation/guides/neon-animation.md
new file mode 100644
index 0000000000..69727b864f
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/guides/neon-animation.md
@@ -0,0 +1,314 @@
+---
+title: neon-animation
+summary: "A short guide to neon-animation and neon-animated-pages"
+tags: ['animation','core-animated-pages']
+elements: ['neon-animation','neon-animated-pages']
+updated: 2015-05-26
+---
+
+# neon-animation
+
+`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/).
+
+*Warning: The API may change.*
+
+* [A basic animatable element](#basic)
+* [Animation configuration](#configuration)
+  * [Animation types](#configuration-types)
+  * [Configuration properties](#configuration-properties)
+  * [Using multiple animations](#configuration-multiple)
+  * [Running animations encapsulated in children nodes](#configuration-encapsulation)
+* [Page transitions](#page-transitions)
+  * [Shared element animations](#shared-element)
+  * [Declarative page transitions](#declarative-page)
+* [Included animations](#animations)
+* [Demos](#demos)
+
+<a name="basic"></a>
+## A basic animatable element
+
+Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
+
+```js
+Polymer({
+  is: 'my-animatable',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    animationConfig: {
+      value: function() {
+        return {
+          // provided by neon-animation/animations/scale-down-animation.html
+          name: 'scale-down-animation',
+          node: this
+        }
+      }
+    }
+  },
+  listeners: {
+    // this event is fired when the animation finishes
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  animate: function() {
+    // run scale-down-animation
+    this.playAnimation();
+  },
+  _onNeonAnimationFinish: function() {
+    console.log('animation done!');
+  }
+});
+```
+
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
+
+<a name="configuration"></a>
+## Animation configuration
+
+<a name="configuration-types"></a>
+### Animation types
+
+An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration.
+
+```js
+Polymer({
+  is: 'my-dialog',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    opened: {
+      type: Boolean
+    },
+    animationConfig: {
+      value: function() {
+        return {
+          'entry': {
+            // provided by neon-animation/animations/scale-up-animation.html
+            name: 'scale-up-animation',
+            node: this
+          },
+          'exit': {
+            // provided by neon-animation-animations/fade-out-animation.html
+            name: 'fade-out-animation',
+            node: this
+          }
+        }
+      }
+    }
+  },
+  listeners: {
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  show: function() {
+    this.opened = true;
+    this.style.display = 'inline-block';
+    // run scale-up-animation
+    this.playAnimation('entry');
+  },
+  hide: function() {
+    this.opened = false;
+    // run fade-out-animation
+    this.playAnimation('exit');
+  },
+  _onNeonAnimationFinish: function() {
+    if (!this.opened) {
+      this.style.display = 'none';
+    }
+  }
+});
+```
+
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
+
+You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
+
+```js
+properties: {
+  entryAnimation: {
+    value: 'scale-up-animation'
+  },
+  exitAnimation: {
+    value: 'fade-out-animation'
+  }
+}
+```
+
+<a name="configuration-properties"></a>
+### Configuration properties
+
+You can pass additional parameters to configure an animation in the animation configuration object.
+All animations should accept the following properties:
+
+ * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
+ * `node`: The target node to apply the animation to. Defaults to `this`.
+ * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The
+ properties include the following:
+     * `duration`: The duration of the animation in milliseconds.
+     * `delay`: The delay before the start of the animation in milliseconds.
+     * `easing`: A timing function for the animation. Matches the CSS timing function values.
+
+Animations may define additional configuration properties and they are listed in their documentation.
+
+<a name="configuration-multiple"></a>
+### Using multiple animations
+
+Set the animation configuration to an array to combine animations, like this:
+
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // fade-in-animation is run with a 50ms delay from slide-down-animation
+      'entry': [{
+        name: 'slide-down-animation',
+        node: this
+      }, {
+        name: 'fade-in-animation',
+        node: this,
+        timing: {delay: 50}
+      }]
+    }
+  }
+}
+```
+
+<a name="configuration-encapsulation"></a>
+### Running animations encapsulated in children nodes
+
+You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
+
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable
+      'entry': [
+        {name: 'fade-in-animation', node: this},
+        {animatable: this.$.myAnimatable, type: 'entry'}
+      ]
+    }
+  }
+}
+```
+
+<a name="page-transitions"></a>
+## Page transitions
+
+*The artist formerly known as `<core-animated-pages>`*
+
+The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page.
+
+<a name="shared-element"></a>
+### Shared element animations
+
+Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation.
+
+In the incoming page:
+
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the incoming page defines the 'entry' animation
+        'entry': {
+          name: 'hero-animation',
+          id: 'hero',
+          toPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.hero
+      }
+    }
+  }
+}
+```
+
+In the outgoing page:
+
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the outgoing page defines the 'exit' animation
+        'exit': {
+          name: 'hero-animation',
+          id: 'hero',
+          fromPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.otherHero
+      }
+    }
+  }
+}
+```
+
+<a name="declarative-page"></a>
+### Declarative page transitions
+
+For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
+
+For example:
+
+```js
+<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
+  <neon-animatable>1</neon-animatable>
+  <neon-animatable>2</neon-animatable>
+  <neon-animatable>3</neon-animatable>
+  <neon-animatable>4</neon-animatable>
+  <neon-animatable>5</neon-animatable>
+</neon-animated-pages>
+```
+
+The new page will slide in from the right, and the old page slide away to the left.
+
+<a name="animations"></a>
+## Included animations
+
+Single element animations:
+
+ * `fade-in-animation` Animates opacity from `0` to `1`;
+ * `fade-out-animation` Animates opacity from `1` to `0`;
+ * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
+ * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
+ * `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
+ * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
+ * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
+ * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
+ * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
+ * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
+ * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
+ * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
+ * `transform-animation` Animates a custom transform.
+
+Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties.
+
+Shared element animations
+
+ * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
+ * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
+
+Group animations
+ * `cascaded-animation` Applys an animation to an array of elements with a delay between each.
+
+<a name="demos"></a>
+## Demos
+
+ * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
+ * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
+ * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
+ * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
+ * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)
diff --git a/dashboard-ui/bower_components/neon-animation/index.html b/dashboard-ui/bower_components/neon-animation/index.html
new file mode 100644
index 0000000000..6f5feedf45
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/index.html
@@ -0,0 +1,30 @@
+<!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>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+  <title>neon-animation</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html
new file mode 100644
index 0000000000..734563f4cf
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html
@@ -0,0 +1,162 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="animations/opaque-animation.html">
+
+<script>
+
+  /**
+   * `Polymer.NeonAnimatableBehavior` is implemented by elements containing animations for use with
+   * elements implementing `Polymer.NeonAnimationRunnerBehavior`.
+   * @polymerBehavior
+   */
+  Polymer.NeonAnimatableBehavior = {
+
+    properties: {
+
+      /**
+       * Animation configuration. See README for more info.
+       */
+      animationConfig: {
+        type: Object
+      },
+
+      /**
+       * Convenience property for setting an 'entry' animation. Do not set `animationConfig.entry`
+       * manually if using this. The animated node is set to `this` if using this property.
+       */
+      entryAnimation: {
+        observer: '_entryAnimationChanged',
+        type: String
+      },
+
+      /**
+       * Convenience property for setting an 'exit' animation. Do not set `animationConfig.exit`
+       * manually if using this. The animated node is set to `this` if using this property.
+       */
+      exitAnimation: {
+        observer: '_exitAnimationChanged',
+        type: String
+      }
+
+    },
+
+    _entryAnimationChanged: function() {
+      this.animationConfig = this.animationConfig || {};
+      if (this.entryAnimation !== 'fade-in-animation') {
+        // insert polyfill hack
+        this.animationConfig['entry'] = [{
+          name: 'opaque-animation',
+          node: this
+        }, {
+          name: this.entryAnimation,
+          node: this
+        }];
+      } else {
+        this.animationConfig['entry'] = [{
+          name: this.entryAnimation,
+          node: this
+        }];
+      }
+    },
+
+    _exitAnimationChanged: function() {
+      this.animationConfig = this.animationConfig || {};
+      this.animationConfig['exit'] = [{
+        name: this.exitAnimation,
+        node: this
+      }];
+    },
+
+    _copyProperties: function(config1, config2) {
+      // shallowly copy properties from config2 to config1
+      for (var property in config2) {
+        config1[property] = config2[property];
+      }
+    },
+
+    _cloneConfig: function(config) {
+      var clone = {
+        isClone: true
+      };
+      this._copyProperties(clone, config);
+      return clone;
+    },
+
+    _getAnimationConfigRecursive: function(type, map, allConfigs) {
+      if (!this.animationConfig) {
+        return;
+      }
+
+      if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
+      	this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
+      	return;
+      }
+
+      // type is optional
+      var thisConfig;
+      if (type) {
+        thisConfig = this.animationConfig[type];
+      } else {
+        thisConfig = this.animationConfig;
+      }
+
+      if (!Array.isArray(thisConfig)) {
+        thisConfig = [thisConfig];
+      }
+
+      // iterate animations and recurse to process configurations from child nodes
+      if (thisConfig) {
+        for (var config, index = 0; config = thisConfig[index]; index++) {
+          if (config.animatable) {
+            config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
+          } else {
+            if (config.id) {
+              var cachedConfig = map[config.id];
+              if (cachedConfig) {
+                // merge configurations with the same id, making a clone lazily
+                if (!cachedConfig.isClone) {
+                  map[config.id] = this._cloneConfig(cachedConfig)
+                  cachedConfig = map[config.id];
+                }
+                this._copyProperties(cachedConfig, config);
+              } else {
+                // put any configs with an id into a map
+                map[config.id] = config;
+              }
+            } else {
+              allConfigs.push(config);
+            }
+          }
+        }
+      }
+    },
+
+    /**
+     * An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this method to configure
+     * an animation with an optional type. Elements implementing `Polymer.NeonAnimatableBehavior`
+     * should define the property `animationConfig`, which is either a configuration object
+     * or a map of animation type to array of configuration objects.
+     */
+    getAnimationConfig: function(type) {
+      var map = {};
+      var allConfigs = [];
+      this._getAnimationConfigRecursive(type, map, allConfigs);
+      // append the configurations saved in the map to the array
+      for (var key in map) {
+        allConfigs.push(map[key]);
+      }
+      return allConfigs;
+    }
+
+  };
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animatable.html b/dashboard-ui/bower_components/neon-animation/neon-animatable.html
new file mode 100644
index 0000000000..82deb610b6
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animatable.html
@@ -0,0 +1,57 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="neon-animatable-behavior.html">
+
+<!--
+`<neon-animatable>` is a simple container element implementing `Polymer.NeonAnimatableBehavior`. This is a convenience element for use with `<neon-animated-pages>`.
+
+```
+<neon-animated-pages selected="0"
+                     entry-animation="slide-from-right-animation"
+                     exit-animation="slide-left-animation">
+  <neon-animatable>1</neon-animatable>
+  <neon-animatable>2</neon-animatable>
+</neon-animated-pages>
+```
+-->
+
+<dom-module id="neon-animatable">
+
+  <style>
+
+    :host {
+      display: block;
+    }
+
+  </style>
+
+  <template>
+    <content></content>
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'neon-animatable',
+
+    behaviors: [
+      Polymer.NeonAnimatableBehavior,
+      Polymer.IronResizableBehavior
+    ]
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animated-pages.html b/dashboard-ui/bower_components/neon-animation/neon-animated-pages.html
new file mode 100644
index 0000000000..b115ae20e8
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animated-pages.html
@@ -0,0 +1,228 @@
+<!--
+@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
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-selector/iron-selectable.html">
+<link rel="import" href="neon-animation-runner-behavior.html">
+<link rel="import" href="animations/opaque-animation.html">
+
+<!--
+Material design: [Meaningful transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html)
+
+`neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
+children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
+animations to be run when switching to or switching out of the page.
+
+@group Neon Elements
+@element neon-animated-pages
+@demo demo/index.html
+-->
+
+<dom-module id="neon-animated-pages">
+
+  <style>
+
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    :host > ::content > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    :host > ::content > :not(.iron-selected):not(.neon-animating) {
+      display: none !important;
+    }
+
+    :host > ::content > .neon-animating {
+      pointer-events: none;
+    }
+
+  </style>
+
+  <template>
+    <content id="content"></content>
+  </template>
+
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+
+    is: 'neon-animated-pages',
+
+    behaviors: [
+      Polymer.IronResizableBehavior,
+      Polymer.IronSelectableBehavior,
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+
+    properties: {
+
+      activateEvent: {
+        type: String,
+        value: ''
+      },
+
+      // if true, the initial page selection will also be animated according to its animation config.
+      animateInitialSelection: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    listeners: {
+      'iron-select': '_onIronSelect',
+      'neon-animation-finish': '_onNeonAnimationFinish'
+    },
+
+    _onIronSelect: function(event) {
+      var selectedPage = event.detail.item;
+
+      // Only consider child elements.
+      if (this.items.indexOf(selectedPage) < 0) {
+        return;
+      }
+      
+      var oldPage = this._valueToItem(this._prevSelected) || false;
+      this._prevSelected = this.selected;
+
+      // on initial load and if animateInitialSelection is negated, simply display selectedPage.
+      if (!oldPage && !this.animateInitialSelection) {
+        this._completeSelectedChanged();
+        return;
+      }
+
+      // insert safari fix.
+      this.animationConfig = [{
+        name: 'opaque-animation',
+        node: selectedPage
+      }];
+
+      // configure selectedPage animations.
+      if (this.entryAnimation) {
+        this.animationConfig.push({
+          name: this.entryAnimation,
+          node: selectedPage
+        });
+      } else {
+        if (selectedPage.getAnimationConfig) {
+          this.animationConfig.push({
+            animatable: selectedPage,
+            type: 'entry'
+          });
+        }
+      }
+
+      // configure oldPage animations iff exists.
+      if (oldPage) {
+
+        // cancel the currently running animation if one is ongoing.
+        if (oldPage.classList.contains('neon-animating')) {
+          this._squelchNextFinishEvent = true;
+          this.cancelAnimation();
+          this._completeSelectedChanged();
+          this._squelchNextFinishEvent = false;
+        }
+
+        // configure the animation.
+        if (this.exitAnimation) {
+          this.animationConfig.push({
+            name: this.exitAnimation,
+            node: oldPage
+          });
+        } else {
+          if (oldPage.getAnimationConfig) {
+            this.animationConfig.push({
+              animatable: oldPage,
+              type: 'exit'
+            });
+          }
+        }
+
+        // display the oldPage during the transition.
+        oldPage.classList.add('neon-animating');
+      }
+
+      // display the selectedPage during the transition.
+      selectedPage.classList.add('neon-animating');
+
+      // actually run the animations.
+      if (this.animationConfig.length > 1) {
+
+        // on first load, ensure we run animations only after element is attached.
+        if (!this.isAttached) {
+          this.async(function () {
+            this.playAnimation(undefined, {
+              fromPage: null,
+              toPage: selectedPage
+            });
+          });
+
+        } else {
+          this.playAnimation(undefined, {
+            fromPage: oldPage,
+            toPage: selectedPage
+          });
+        }
+
+      } else {
+        this._completeSelectedChanged(oldPage, selectedPage);
+      }
+    },
+
+    /**
+     * @param {Object=} oldPage
+     * @param {Object=} selectedPage
+     */
+    _completeSelectedChanged: function(oldPage, selectedPage) {
+      if (selectedPage) {
+        selectedPage.classList.remove('neon-animating');
+      }
+      if (oldPage) {
+        oldPage.classList.remove('neon-animating');
+      }
+      if (!selectedPage || !oldPage) {
+        var nodes = Polymer.dom(this.$.content).getDistributedNodes();
+        for (var node, index = 0; node = nodes[index]; index++) {
+          node.classList && node.classList.remove('neon-animating');
+        }
+      }
+      this.async(this._notifyPageResize);
+    },
+
+    _onNeonAnimationFinish: function(event) {
+      if (this._squelchNextFinishEvent) {
+        this._squelchNextFinishEvent = false;
+        return;
+      }
+      this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
+    },
+
+    _notifyPageResize: function() {
+      var selectedPage = this.selectedItem || this._valueToItem(this.selected);
+      this.resizerShouldNotify = function(element) {
+        return element == selectedPage;
+      }
+      this.notifyResize();
+    }
+
+  })
+
+})();
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animation-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-animation-behavior.html
new file mode 100644
index 0000000000..6939d3428a
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animation-behavior.html
@@ -0,0 +1,86 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-meta/iron-meta.html">
+
+<script>
+
+  /**
+   * Use `Polymer.NeonAnimationBehavior` to implement an animation.
+   * @polymerBehavior
+   */
+  Polymer.NeonAnimationBehavior = {
+
+    properties: {
+
+      /**
+       * Defines the animation timing.
+       */
+      animationTiming: {
+        type: Object,
+        value: function() {
+          return {
+            duration: 500,
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            fill: 'both'
+          }
+        }
+      }
+
+    },
+
+    /**
+     * Can be used to determine that elements implement this behavior.
+     */
+    isNeonAnimation: true,
+
+    /**
+     * Do any animation configuration here.
+     */
+    // configure: function(config) {
+    // },
+
+    /**
+     * Returns the animation timing by mixing in properties from `config` to the defaults defined
+     * by the animation.
+     */
+    timingFromConfig: function(config) {
+      if (config.timing) {
+        for (var property in config.timing) {
+          this.animationTiming[property] = config.timing[property];
+        }
+      }
+      return this.animationTiming;
+    },
+
+    /**
+     * Sets `transform` and `transformOrigin` properties along with the prefixed versions.
+     */
+    setPrefixedProperty: function(node, property, value) {
+      var map = {
+        'transform': ['webkitTransform'],
+        'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin']
+      };
+      var prefixes = map[property];
+      for (var prefix, index = 0; prefix = prefixes[index]; index++) {
+        node.style[prefix] = value;
+      }
+      node.style[property] = value;
+    },
+
+    /**
+     * Called when the animation finishes.
+     */
+    complete: function() {}
+
+  };
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animation-runner-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-animation-runner-behavior.html
new file mode 100644
index 0000000000..096d5c3e07
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animation-runner-behavior.html
@@ -0,0 +1,113 @@
+<!--
+@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
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-meta/iron-meta.html">
+<link rel="import" href="neon-animatable-behavior.html">
+
+<script>
+
+  /**
+   * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations.
+   *
+   * @polymerBehavior Polymer.NeonAnimationRunnerBehavior
+   */
+  Polymer.NeonAnimationRunnerBehaviorImpl = {
+
+    properties: {
+
+      /** @type {?Object} */
+      _player: {
+        type: Object
+      }
+
+    },
+
+    _configureAnimationEffects: function(allConfigs) {
+      var allAnimations = [];
+      if (allConfigs.length > 0) {
+        for (var config, index = 0; config = allConfigs[index]; index++) {
+          var animation = document.createElement(config.name);
+          // is this element actually a neon animation?
+          if (animation.isNeonAnimation) {
+            var effect = animation.configure(config);
+            if (effect) {
+              allAnimations.push({
+                animation: animation,
+                config: config,
+                effect: effect
+              });
+            }
+          } else {
+            Polymer.Base._warn(this.is + ':', config.name, 'not found!');
+          }
+        }
+      }
+      return allAnimations;
+    },
+
+    _runAnimationEffects: function(allEffects) {
+      return document.timeline.play(new GroupEffect(allEffects));
+    },
+
+    _completeAnimations: function(allAnimations) {
+      for (var animation, index = 0; animation = allAnimations[index]; index++) {
+        animation.animation.complete(animation.config);
+      }
+    },
+
+    /**
+     * Plays an animation with an optional `type`.
+     * @param {string=} type
+     * @param {!Object=} cookie
+     */
+    playAnimation: function(type, cookie) {
+      var allConfigs = this.getAnimationConfig(type);
+      if (!allConfigs) {
+        return;
+      }
+      var allAnimations = this._configureAnimationEffects(allConfigs);
+      var allEffects = allAnimations.map(function(animation) {
+        return animation.effect;
+      });
+
+      if (allEffects.length > 0) {
+        this._player = this._runAnimationEffects(allEffects);
+        this._player.onfinish = function() {
+          this._completeAnimations(allAnimations);
+
+          if (this._player) {
+            this._player.cancel();
+            this._player = null;
+          }
+
+          this.fire('neon-animation-finish', cookie, {bubbles: false});
+        }.bind(this);
+
+      } else {
+        this.fire('neon-animation-finish', cookie, {bubbles: false});
+      }
+    },
+
+    /**
+     * Cancels the currently running animation.
+     */
+    cancelAnimation: function() {
+      if (this._player) {
+        this._player.cancel();
+      }
+    }
+  };
+
+  /** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */
+  Polymer.NeonAnimationRunnerBehavior = [
+    Polymer.NeonAnimatableBehavior,
+    Polymer.NeonAnimationRunnerBehaviorImpl
+  ];
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animation.html b/dashboard-ui/bower_components/neon-animation/neon-animation.html
new file mode 100644
index 0000000000..da64504859
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animation.html
@@ -0,0 +1,18 @@
+<!--
+@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
+-->
+
+<link rel="import" href="neon-animatable-behavior.html">
+<link rel="import" href="neon-animated-pages.html">
+<link rel="import" href="neon-animatable.html">
+<link rel="import" href="neon-animation-behavior.html">
+<link rel="import" href="neon-animation-runner-behavior.html">
+<link rel="import" href="neon-animations.html">
+<link rel="import" href="neon-shared-element-animatable-behavior.html">
+<link rel="import" href="neon-shared-element-animation-behavior.html">
diff --git a/dashboard-ui/bower_components/neon-animation/neon-animations.html b/dashboard-ui/bower_components/neon-animation/neon-animations.html
new file mode 100644
index 0000000000..67c4df4c76
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-animations.html
@@ -0,0 +1,29 @@
+<!--
+@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
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="animations/cascaded-animation.html">
+<link rel="import" href="animations/fade-in-animation.html">
+<link rel="import" href="animations/fade-out-animation.html">
+<link rel="import" href="animations/hero-animation.html">
+<link rel="import" href="animations/opaque-animation.html">
+<link rel="import" href="animations/ripple-animation.html">
+<link rel="import" href="animations/reverse-ripple-animation.html">
+<link rel="import" href="animations/scale-down-animation.html">
+<link rel="import" href="animations/scale-up-animation.html">
+<link rel="import" href="animations/slide-from-left-animation.html">
+<link rel="import" href="animations/slide-from-right-animation.html">
+<link rel="import" href="animations/slide-from-top-animation.html">
+<link rel="import" href="animations/slide-from-bottom-animation.html">
+<link rel="import" href="animations/slide-left-animation.html">
+<link rel="import" href="animations/slide-right-animation.html">
+<link rel="import" href="animations/slide-up-animation.html">
+<link rel="import" href="animations/slide-down-animation.html">
+<link rel="import" href="animations/transform-animation.html">
+
diff --git a/dashboard-ui/bower_components/neon-animation/neon-shared-element-animatable-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-shared-element-animatable-behavior.html
new file mode 100644
index 0000000000..e63173d368
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-shared-element-animatable-behavior.html
@@ -0,0 +1,43 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="neon-animatable-behavior.html">
+
+<script>
+
+  /**
+   * Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements containing shared element
+   * animations.
+   * @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior
+   */
+  Polymer.NeonSharedElementAnimatableBehaviorImpl = {
+
+    properties: {
+
+      /**
+       * A map of shared element id to node.
+       */
+      sharedElements: {
+        type: Object,
+        value: {}
+      }
+
+    }
+
+  };
+
+  /** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */
+  Polymer.NeonSharedElementAnimatableBehavior = [
+    Polymer.NeonAnimatableBehavior,
+    Polymer.NeonSharedElementAnimatableBehaviorImpl
+  ];
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/neon-shared-element-animation-behavior.html b/dashboard-ui/bower_components/neon-animation/neon-shared-element-animation-behavior.html
new file mode 100644
index 0000000000..65ca1bdca2
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/neon-shared-element-animation-behavior.html
@@ -0,0 +1,72 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="neon-animation-behavior.html">
+
+<script>
+
+  /**
+   * Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations.
+   * @polymerBehavior Polymer.NeonSharedElementAnimationBehavior
+   */
+  Polymer.NeonSharedElementAnimationBehaviorImpl = {
+
+    properties: {
+
+      /**
+       * Cached copy of shared elements.
+       */
+      sharedElements: {
+        type: Object
+      }
+
+    },
+
+    /**
+     * Finds shared elements based on `config`.
+     */
+    findSharedElements: function(config) {
+      var fromPage = config.fromPage;
+      var toPage = config.toPage;
+      if (!fromPage || !toPage) {
+        Polymer.Base._warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
+        return null;
+      };
+
+      if (!fromPage.sharedElements || !toPage.sharedElements) {
+        Polymer.Base._warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage);
+        return null;
+      };
+
+      var from = fromPage.sharedElements[config.id]
+      var to = toPage.sharedElements[config.id];
+
+      if (!from || !to) {
+        Polymer.Base._warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage);
+        return null;
+      }
+
+      this.sharedElements = {
+        from: from,
+        to: to
+      };
+      return this.sharedElements;
+    }
+
+  };
+
+  /** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */
+  Polymer.NeonSharedElementAnimationBehavior = [
+    Polymer.NeonAnimationBehavior,
+    Polymer.NeonSharedElementAnimationBehaviorImpl
+  ];
+
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/test/index.html b/dashboard-ui/bower_components/neon-animation/test/index.html
new file mode 100644
index 0000000000..81555a2b5d
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/test/index.html
@@ -0,0 +1,28 @@
+<!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><head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>neon-animation tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'neon-animated-pages.html',
+      'neon-animated-pages.html?dom=shadow',
+      'neon-animated-pages-lazy.html',
+      'neon-animated-pages-lazy.html?dom=shadow',
+      'neon-animated-pages-descendant-selection.html',
+      'neon-animated-pages-descendant-selection.html?dom=shadow',
+    ]);
+  </script>
+
+
+</body></html>
diff --git a/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-descendant-selection.html b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-descendant-selection.html
new file mode 100644
index 0000000000..0904a39582
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-descendant-selection.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2016 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>
+<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>
+<script src="../../web-component-tester/browser.js"></script>
+<script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+<link rel="import" href="../../test-fixture/test-fixture.html">
+<link rel="import" href="../../neon-animation/neon-animated-pages.html">
+<link rel="import" href="../../neon-animation/neon-animation-behavior.html">
+<link rel="import" href="../../iron-selector/iron-selector.html">
+
+</head>
+<body>
+
+<test-fixture id="descendant-selection">
+  <template>
+    <neon-animated-pages entry-animation="test-animation" animate-initial-selection>
+      <iron-selector selected="0" id="selector">
+        <div>1</div>
+        <div id="target">2</div>
+      </iron-selector>
+    </neon-animated-pages>
+  </template>
+</test-fixture>
+
+<test-fixture id="selecting-item">
+  <template>
+    <neon-animated-pages entry-animation="test-animation" animate-initial-selection>
+      <x-selecting-element></x-selecting-element>
+      <div id="target"></div>
+    </neon-animated-pages>
+  </template>
+</test-fixture>
+
+<dom-module id="x-selecting-element">
+  <template>
+    <iron-selector selected="0" id="selector">
+      <div>1</div>
+      <div id="target">2</div>
+    </iron-selector>
+  </template>
+</dom-module>
+
+<dom-module id="test-element">
+  <template>
+    <neon-animated-pages entry-animation="test-animation" animate-initial-selection>
+      <content></content>
+    </neon-animated-pages>
+  </template>
+</dom-module>
+
+<script>
+  HTMLImports.whenReady(function() {
+    Polymer({ is: 'x-selecting-element' });
+    Polymer({ is: 'test-element' });
+    Polymer({
+      is: 'test-animation',
+      behaviors: [
+        Polymer.NeonAnimationBehavior
+      ],
+      configure: function(config) {
+        config.node.animated = true;
+      }
+    });
+  });
+</script>
+
+<test-fixture id="distributed-children">
+  <template>
+    <test-element>
+      <div>1</div>
+      <div id="target">2</div>
+    </test-element>
+  </template>
+</test-fixture>
+
+<script>
+suite('descendant selection', function() {
+  test('descendents of other selectors are not animated', function() {
+    var animatedPages = fixture('descendant-selection');
+    var selector = Polymer.dom(animatedPages).querySelector('#selector');
+    var target = Polymer.dom(animatedPages).querySelector('#target');
+    Polymer.dom(selector).setAttribute('selected', '1');
+    assert(!target.animated);
+  });
+  test('elements distributed as children are animated', function() {
+    var testElement = fixture('distributed-children');
+    var target = Polymer.dom(testElement).querySelector('#target');
+    var animatedPages = Polymer.dom(testElement.root).querySelector("neon-animated-pages");
+    Polymer.dom(animatedPages).setAttribute('selected', '1');
+    assert(target.animated);
+  });
+  test('ignores selection from shadow descendants of its items', function() {
+    var pages = fixture('selecting-item');
+    var target = Polymer.dom(pages).querySelector('#target');
+    var selecting = Polymer.dom(pages).querySelector('x-selecting-element');
+    selecting.$.selector.selected = 1;
+    assert(!target.animated);
+  });
+});
+</script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-lazy.html b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-lazy.html
new file mode 100644
index 0000000000..aabe24da00
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-lazy.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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-animated-pages tests</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>
+
+  <script>Polymer = {lazyRegister: true}</script>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../neon-animated-pages.html">
+  <link rel="import" href="../neon-animatable.html">
+  <link rel="import" href="../animations/slide-from-left-animation.html">
+  <link rel="import" href="../animations/slide-right-animation.html">
+  <link rel="import" href="test-resizable-pages.html">
+
+</head>
+<body>
+
+  <test-fixture id="animate-initial-selection">
+    <template>
+      <neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
+        <neon-animatable></neon-animatable>
+        <neon-animatable></neon-animatable>
+      </neon-animated-pages>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('animations found when `lazRegister` setting is true', function() {
+      test('animations are registered', function(done) {
+        var animatedPages = fixture('animate-initial-selection');
+        animatedPages._completeAnimations = sinon.spy();
+        assert.isUndefined(animatedPages.selected);
+        var pages = Polymer.dom(animatedPages).children;
+        animatedPages.addEventListener('neon-animation-finish', function(event) {
+          if (animatedPages.selected === 0) {
+            animatedPages.selected = 1;
+            return;
+          }
+          assert.strictEqual(animatedPages.selected, 1);
+          assert.equal(event.detail.fromPage, pages[0]);
+          assert.equal(event.detail.toPage, pages[1]);
+          assert.isTrue(animatedPages._completeAnimations.calledTwice);
+          var a$ = animatedPages._completeAnimations.getCall(1).args[0];
+          assert.isTrue(a$[0].animation.isNeonAnimation, 'default animation is not a registered animation');
+          assert.isTrue(a$[1].animation.isNeonAnimation, 'entry animation is not a registered animation');
+          assert.isTrue(a$[2].animation.isNeonAnimation, 'exit animation is not a registered animation');
+          done();
+        });
+        animatedPages.selected = 0;
+      });
+    });
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages.html b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages.html
new file mode 100644
index 0000000000..98220b67ed
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/test/neon-animated-pages.html
@@ -0,0 +1,101 @@
+<!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>
+<head>
+
+  <title>neon-animated-pages tests</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>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../neon-animated-pages.html">
+  <link rel="import" href="../neon-animatable.html">
+  <link rel="import" href="../animations/slide-from-left-animation.html">
+  <link rel="import" href="../animations/slide-right-animation.html">
+  <link rel="import" href="test-resizable-pages.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <neon-animated-pages>
+      </neon-animated-pages>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="notify-resize">
+    <template>
+      <neon-animated-pages>
+        <a-resizable-page></a-resizable-page>
+        <b-resizable-page></b-resizable-page>
+        <c-resizable-page></c-resizable-page>
+      </neon-animated-pages>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="animate-initial-selection">
+    <template>
+      <neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
+        <neon-animatable></neon-animatable>
+        <neon-animatable></neon-animatable>
+      </neon-animated-pages>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('basic', function() {
+    });
+    suite('notify-resize', function() {
+      test('only a destination page recieves a resize event', function(done) {
+        var animatedPages = fixture('notify-resize');
+        var resizables = Polymer.dom(animatedPages).children;
+        var recieves = {};
+        resizables.forEach(function(page) {
+          page.addEventListener('iron-resize', function(event) {
+            var pageName = event.currentTarget.tagName;
+            recieves[pageName] = pageName in recieves ? recieves[pageName] + 1 : 1;
+          });
+        });
+        animatedPages.selected = 2;
+        setTimeout(function() {
+          assert.deepEqual(recieves, {
+            'C-RESIZABLE-PAGE': 1
+          });
+          done();
+        }, 50);
+      });
+    });
+    suite('animate-initial-selection', function() {
+      test('\'neon-animation-finish\' event fired after animating initial selection', function(done) {
+        var animatedPages = fixture('animate-initial-selection');
+        assert.isUndefined(animatedPages.selected);
+        var pages = Polymer.dom(animatedPages).children;
+        animatedPages.addEventListener('neon-animation-finish', function(event) {
+          assert.strictEqual(animatedPages.selected, 0);
+          assert.isFalse(event.detail.fromPage);
+          assert.deepEqual(event.detail.toPage, pages[0]);
+          done();
+        });
+        animatedPages.selected = 0;
+      });
+    });
+  </script>
+
+</body>
+</html>
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
new file mode 100644
index 0000000000..7330a1ffd1
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html
@@ -0,0 +1,58 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../neon-shared-element-animatable-behavior.html">
+<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
+
+<dom-module id="a-resizable-page">
+  <template>
+  </template>
+</dom-module>
+
+<dom-module id="b-resizable-page">
+  <template>
+  </template>
+</dom-module>
+
+<dom-module id="c-resizable-page">
+  <template>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+    is: 'a-resizable-page',
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior,
+      Polymer.IronResizableBehavior
+    ]
+  });
+
+  Polymer({
+    is: 'b-resizable-page',
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior,
+      Polymer.IronResizableBehavior
+    ]
+  });
+
+  Polymer({
+    is: 'c-resizable-page',
+    behaviors: [
+      Polymer.NeonSharedElementAnimatableBehavior,
+      Polymer.IronResizableBehavior
+    ]
+  });
+
+})();
+</script>
diff --git a/dashboard-ui/bower_components/neon-animation/web-animations.html b/dashboard-ui/bower_components/neon-animation/web-animations.html
new file mode 100644
index 0000000000..c871854017
--- /dev/null
+++ b/dashboard-ui/bower_components/neon-animation/web-animations.html
@@ -0,0 +1,11 @@
+<!--
+@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
+-->
+
+<script src="../web-animations-js/web-animations-next-lite.min.js"></script>
diff --git a/dashboard-ui/cinemamodeconfiguration.html b/dashboard-ui/cinemamodeconfiguration.html
index 9f957ee487..dbc5c3cd0a 100644
--- a/dashboard-ui/cinemamodeconfiguration.html
+++ b/dashboard-ui/cinemamodeconfiguration.html
@@ -49,7 +49,7 @@
                 <div>
                     <div>
                         <paper-input type="text" label="${LabelCustomIntrosPath}" id="txtCustomIntrosPath" style="display: inline-block; width: 85%;"></paper-input>
-                        <paper-icon-button id="btnSelectCustomIntrosPath" icon="search"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectCustomIntrosPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                     </div>
                     <div class="fieldDescription">${LabelCustomIntrosPathHelp}</div>
                 </div>
@@ -57,7 +57,7 @@
                 <div>
                     <div>
                         <paper-input type="text" label="${LabelCodecIntrosPath}" id="txtCodecIntrosPath" style="display: inline-block; width: 85%;"></paper-input>
-                        <paper-icon-button id="btnSelectCodecIntrosPath" icon="search"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectCodecIntrosPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                     </div>
                     <div class="fieldDescription">
                         <div>${LabelCodecIntrosPathHelp}</div>
diff --git a/dashboard-ui/components/subtitleeditor/subtitleeditor.js b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
index 3a495edd11..c225ba9c5c 100644
--- a/dashboard-ui/components/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
@@ -258,7 +258,7 @@
 
             html += '<div style="font-size:86%;opacity:.7;">' + /*(result.CommunityRating || 0) + ' / ' +*/ (result.DownloadCount || 0) + '</div>';
 
-            html += '<paper-icon-button icon="cloud-download" data-subid="' + result.Id + '" title="' + Globalize.translate('ButtonDownload') + '" class="btnDownload"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" title="' + Globalize.translate('ButtonDownload') + '" class="btnDownload"><iron-icon icon="cloud-download"></iron-icon></button>';
 
             html += '</paper-icon-item>';
         }
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index c1818b075c..0edf3d3673 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -489,7 +489,7 @@ div[data-role='page'] {
     outline: none;
 }
 
-a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearButton) {
+a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearButton):not([is]) {
     -webkit-font-smoothing: antialiased;
     -webkit-user-select: none;
     background-clip: padding-box;
@@ -512,26 +512,21 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
     box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
 }
 
-    a[data-role='button'][data-iconpos='notext'], .type-interior button[data-iconpos='notext']:not([data-role='none']):not(.clearButton) {
+    a[data-role='button'][data-iconpos='notext'], .type-interior button[data-iconpos='notext']:not([data-role='none']):not(.clearButton):not([is]) {
         padding: 4px;
         border-radius: 50px;
         outline: 0;
     }
 
-    a[data-role='button']:not([data-inline='true']), .type-interior button:not([data-role='none']):not([data-inline='true']):not(.clearButton) {
+    a[data-role='button']:not([data-inline='true']), .type-interior button:not([data-role='none']):not([data-inline='true']):not(.clearButton):not([is]) {
         display: block;
         margin: .5em 0 !important;
     }
 
-.type-interior button:not([data-role='none']):not([data-inline='true']):not(.clearButton) {
+.type-interior button:not([data-role='none']):not([data-inline='true']):not(.clearButton):not([is]) {
     width: 100%;
 }
 
-a[data-role='button'][data-theme='b'], button[data-theme='b']:not([data-role='none']):not(.clearButton) {
-    background: #4285f4 !important;
-    color: #fff !important;
-}
-
 div[data-role="controlgroup"] a[data-role='button'] {
     display: inline-block !important;
     margin: 0 !important;
diff --git a/dashboard-ui/dashboardgeneral.html b/dashboard-ui/dashboardgeneral.html
index ab626ee70d..d8e94e173a 100644
--- a/dashboard-ui/dashboardgeneral.html
+++ b/dashboard-ui/dashboardgeneral.html
@@ -47,7 +47,7 @@
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <paper-input type="text" id="txtCachePath" label="${LabelCachePath}" style="display:inline-block;width:85%;"></paper-input>
-                            <paper-icon-button id="btnSelectCachePath" icon="search">${ButtonSelectDirectory}</paper-icon-button>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                             <div class="fieldDescription">${LabelCachePathHelp}</div>
                         </li>
                     </ul>
@@ -114,7 +114,7 @@
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <paper-input type="text" id="txtDashboardSourcePath" label="${LabelDashboardSourcePath}" style="display: inline-block; width: 80%;"></paper-input>
-                            <paper-icon-button id="btnSelectDashboardSourcePath" icon="search" title="${ButtonSelectDirectory}"></paper-icon-button>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectDashboardSourcePath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                             <div class="fieldDescription">${LabelDashboardSourcePathHelp}</div>
                         </li>
                     </ul>
diff --git a/dashboard-ui/dashboardhosting.html b/dashboard-ui/dashboardhosting.html
index dad51165c3..8de4ad9d19 100644
--- a/dashboard-ui/dashboardhosting.html
+++ b/dashboard-ui/dashboardhosting.html
@@ -28,7 +28,7 @@
                     </li>
                     <li>
                         <paper-input type="text" id="txtCertificatePath" label="${LabelCustomCertificatePath}" style="display: inline-block; width: 80%;"></paper-input>
-                        <paper-icon-button id="btnSelectCertPath" icon="search" title="${ButtonSelectDirectory}"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectCertPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         <div class="fieldDescription">${LabelCustomCertificatePathHelp}</div>
                     </li>
                     <li>
diff --git a/dashboard-ui/device.html b/dashboard-ui/device.html
index e3ef050961..23bbc74977 100644
--- a/dashboard-ui/device.html
+++ b/dashboard-ui/device.html
@@ -17,7 +17,7 @@
                         </li>
                         <li id="fldCameraUploadPath" style="display:none;">
                             <paper-input id="txtUploadPath" label="${LabelCameraUploadPath}" style="width:85%;display:inline-block;"></paper-input>
-                            <paper-icon-button id="btnSelectUploadPath" icon="search"></paper-icon-button>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectUploadPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                             <div class="fieldDescription">${LabelCameraUploadPathHelp}</div>
                         </li>
 
diff --git a/dashboard-ui/devicesupload.html b/dashboard-ui/devicesupload.html
index 5ebae7b7ce..5609d22ff8 100644
--- a/dashboard-ui/devicesupload.html
+++ b/dashboard-ui/devicesupload.html
@@ -20,7 +20,7 @@
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <paper-input id="txtUploadPath" label="${LabelCameraUploadPath}" style="width:84%;display:inline-block;"></paper-input>
-                            <paper-icon-button id="btnSelectUploadPath" icon="search"></paper-icon-button>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectUploadPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                             <div class="fieldDescription">${LabelCameraUploadPathHelp}</div>
                         </li>
                         <li>
diff --git a/dashboard-ui/dlnaprofile.html b/dashboard-ui/dlnaprofile.html
index 39e5bda870..34bde33828 100644
--- a/dashboard-ui/dlnaprofile.html
+++ b/dashboard-ui/dlnaprofile.html
@@ -204,7 +204,7 @@
                             <ul data-role="listview" class="ulForm">
                                 <li>
                                     <label for="txtInfoFriendlyName">${LabelFriendlyName}</label>
-                                    <input type="text" id="txtInfoFriendlyName" required="required" />
+                                    <input type="text" id="txtInfoFriendlyName" />
                                 </li>
                                 <li>
                                     <label for="txtInfoManufacturer">${LabelManufacturer}</label>
diff --git a/dashboard-ui/encodingsettings.html b/dashboard-ui/encodingsettings.html
index 2f3af3f03e..3ea70ae64b 100644
--- a/dashboard-ui/encodingsettings.html
+++ b/dashboard-ui/encodingsettings.html
@@ -37,7 +37,7 @@
                     </li>
                     <li>
                         <paper-input id="txtTranscodingTempPath" label="${LabelTranscodingTempPath}" style="width:80%;display:inline-block;"></paper-input>
-                        <paper-icon-button id="btnSelectTranscodingTempPath" icon="search"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         <div class="fieldDescription">
                             ${LabelTranscodingTempPathHelp}
                         </div>
diff --git a/dashboard-ui/librarysettings.html b/dashboard-ui/librarysettings.html
index a8062db154..11e50ddd41 100644
--- a/dashboard-ui/librarysettings.html
+++ b/dashboard-ui/librarysettings.html
@@ -26,7 +26,7 @@
                     </li>
                     <li>
                         <paper-input id="txtMetadataPath" label="${LabelMetadataPath}" style="width:85%;display:inline-block;"></paper-input>
-                        <paper-icon-button id="btnSelectMetadataPath" icon="search"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         <div class="fieldDescription">${LabelMetadataPathHelp}</div>
                         <br />
                     </li>
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html
index 87845c4e5a..ea08794bdc 100644
--- a/dashboard-ui/livetv.html
+++ b/dashboard-ui/livetv.html
@@ -78,10 +78,7 @@
                 <br />
             </div>
             <div id="upcomingRecordings" class="homePageSection hide">
-                <div>
-                    <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingRecordings}</h1>
-                </div>
-                <div class="recordingItems itemsContainer"></div>
+                <div class="recordingItems"></div>
                 <br />
             </div>
             <div id="recordingGroups" style="display: none;" class="homePageSection">
diff --git a/dashboard-ui/livetvsettings.html b/dashboard-ui/livetvsettings.html
index dc826d0a76..72c108b2a0 100644
--- a/dashboard-ui/livetvsettings.html
+++ b/dashboard-ui/livetvsettings.html
@@ -35,7 +35,7 @@
                 <div>
                     <br />
                     <paper-input id="txtRecordingPath" label="${LabelRecordingPath}" style="width:84%;display:inline-block;"></paper-input>
-                    <paper-icon-button id="btnSelectRecordingPath" icon="search"></paper-icon-button>
+                    <button type="button" is="paper-icon-button-light" id="btnSelectRecordingPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                     <div class="fieldDescription">${LabelRecordingPathHelp}</div>
                 </div>
                 <br />
@@ -45,11 +45,11 @@
                 <div>
                     <br />
                     <paper-input id="txtMovieRecordingPath" label="${LabelMovieRecordingPath}" style="width:84%;display:inline-block;"></paper-input>
-                    <paper-icon-button id="btnSelectMovieRecordingPath" icon="search"></paper-icon-button>
+                    <button type="button" is="paper-icon-button-light" id="btnSelectMovieRecordingPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                 </div>
                 <div>
                     <paper-input id="txtSeriesRecordingPath" label="${LabelSeriesRecordingPath}" style="width:84%;display:inline-block;"></paper-input>
-                    <paper-icon-button id="btnSelectSeriesRecordingPath" icon="search"></paper-icon-button>
+                    <button type="button" is="paper-icon-button-light" id="btnSelectSeriesRecordingPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                 </div>
                 <br />
                 <div>
diff --git a/dashboard-ui/livetvtunerprovider-m3u.html b/dashboard-ui/livetvtunerprovider-m3u.html
index 67bcd09aa4..26b1c464f5 100644
--- a/dashboard-ui/livetvtunerprovider-m3u.html
+++ b/dashboard-ui/livetvtunerprovider-m3u.html
@@ -11,7 +11,7 @@
                     <div>
                         <div>
                             <paper-input class="txtDevicePath" label="${LabelFileOrUrl}" required="required" style="width:85%;display:inline-block;"></paper-input>
-                            <paper-icon-button id="btnSelectPath" icon="search"></paper-icon-button>
+                            <button type="button" is="paper-icon-button-light" id="btnSelectPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         </div>
                         <br />
                         <div>
diff --git a/dashboard-ui/scripts/autoorganizelog.js b/dashboard-ui/scripts/autoorganizelog.js
index 82ff9990d0..e701e51a63 100644
--- a/dashboard-ui/scripts/autoorganizelog.js
+++ b/dashboard-ui/scripts/autoorganizelog.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'datetime'], function ($, datetime) {
+define(['jQuery', 'datetime', 'paper-icon-button-light'], function ($, datetime) {
 
     var query = {
 
@@ -191,8 +191,9 @@
             html += '<td class="organizerButtonCell">';
 
             if (item.Status != 'Success') {
-                html += '<paper-icon-button data-resultid="' + item.Id + '" icon="folder" class="btnProcessResult organizerButton" title="' + Globalize.translate('ButtonOrganizeFile') + '"></paper-icon-button>';
-                html += '<paper-icon-button data-resultid="' + item.Id + '" icon="delete" class="btnDeleteResult organizerButton" title="' + Globalize.translate('ButtonDeleteFile') + '"></paper-icon-button>';
+
+                html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnProcessResult organizerButton" title="' + Globalize.translate('ButtonOrganizeFile') + '"><iron-icon icon="folder"></iron-icon></button>';
+                html += '<button type="button" is="paper-icon-button-light" data-resultid="' + item.Id + '" class="btnDeleteResult organizerButton" title="' + Globalize.translate('ButtonDeleteFile') + '"></iron-icon></button>';
             }
 
             html += '</td>';
diff --git a/dashboard-ui/scripts/autoorganizesmart.js b/dashboard-ui/scripts/autoorganizesmart.js
index 543c596643..363866f8b4 100644
--- a/dashboard-ui/scripts/autoorganizesmart.js
+++ b/dashboard-ui/scripts/autoorganizesmart.js
@@ -79,7 +79,7 @@
 
                 matchStringHtml += '</paper-item-body>';
 
-                matchStringHtml += '<paper-icon-button icon="delete" class="btnDeleteMatchEntry" data-index="' + i + '" data-matchindex="' + matchStringIndex + '" title="' + Globalize.translate('ButtonDelete') + '"></paper-icon-button>';
+                matchStringHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteMatchEntry" data-index="' + i + '" data-matchindex="' + matchStringIndex + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
 
                 matchStringHtml += '</paper-icon-item>';
                 matchStringIndex++;
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 5c0f45b800..bcd1585ce2 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -761,7 +761,7 @@
 
                     html += "<span style='color:#009F00;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
 
-                    html += '<paper-icon-button title="' + Globalize.translate('ButtonStop') + '" icon="cancel" onclick="DashboardPage.stopTask(\'' + task.Id + '\');"></paper-icon-button>';
+                    html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonStop') + '" onclick="DashboardPage.stopTask(\'' + task.Id + '\');"><iron-icon icon="cancel"></iron-icon></button>';
                 }
                 else if (task.State == "Cancelling") {
                     html += '<span style="color:#cc0000;">' + Globalize.translate('LabelStopping') + '</span>';
@@ -780,8 +780,6 @@
 
                 var localAccessHtml = Globalize.translate('LabelLocalAccessUrl', '<a href="' + systemInfo.LocalAddress + '" target="_blank">' + systemInfo.LocalAddress + '</a>');
 
-                //localAccessHtml += '<a class="clearLink" href="https://github.com/MediaBrowser/Wiki/wiki/Connectivity" target="_blank"><paper-icon-button icon="info"></paper-icon-button></a>';
-
                 $('.localUrl', page).html(localAccessHtml).show().trigger('create');
             } else {
                 $('.externalUrl', page).hide();
diff --git a/dashboard-ui/scripts/devices.js b/dashboard-ui/scripts/devices.js
index 4d2e541b31..51cb1415d3 100644
--- a/dashboard-ui/scripts/devices.js
+++ b/dashboard-ui/scripts/devices.js
@@ -62,7 +62,8 @@
             deviceHtml += '</a>';
             deviceHtml += '</paper-item-body>';
 
-            deviceHtml += '<paper-icon-button icon="delete" data-id="' + d.Id + '" title="' + Globalize.translate('ButtonDelete') + '" class="btnDeleteDevice"></paper-icon-button>';
+            deviceHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + d.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
+
             deviceHtml += '</paper-icon-item>';
 
             return deviceHtml;
diff --git a/dashboard-ui/scripts/dlnaprofiles.js b/dashboard-ui/scripts/dlnaprofiles.js
index 6151b55d3c..0ccafd3050 100644
--- a/dashboard-ui/scripts/dlnaprofiles.js
+++ b/dashboard-ui/scripts/dlnaprofiles.js
@@ -58,7 +58,7 @@
                 html += '</paper-item-body>';
 
                 if (profile.Type == 'User') {
-                    html += '<paper-icon-button icon="delete" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + Globalize.translate('ButtonDelete') + '"></paper-icon-button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
                 }
 
                 html += '</paper-icon-item>';
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 2321a39ced..a9920405d4 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -176,7 +176,6 @@
                 if (browserInfo.animate && !browserInfo.mobile) {
                     //return true;
                 }
-
                 return AppInfo.isNativeApp;
             },
 
@@ -206,29 +205,6 @@
                 return true;
             },
 
-            getTabsAnimationConfig: function (elem, reverse) {
-
-                if (browserInfo.mobile) {
-
-                }
-
-                return {
-                    // scale up
-                    'entry': {
-                        name: 'fade-in-animation',
-                        node: elem,
-                        timing: { duration: 160, easing: 'ease-out' }
-                    },
-                    // fade out
-                    'exit': {
-                        name: 'fade-out-animation',
-                        node: elem,
-                        timing: { duration: 200, easing: 'ease-out' }
-                    }
-                };
-
-            },
-
             selectedTab: function (pageTabsContainer, selected) {
 
                 if (selected == null) {
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index 706b493163..5fe796c26f 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -242,7 +242,9 @@
                     });
 
                     Dashboard.hideLoadingMsg();
-                    itemsContainer.dispatchEvent(new CustomEvent('timercancelled', {}));
+                    itemsContainer.dispatchEvent(new CustomEvent('timercancelled', {
+                        bubbles: true
+                    }));
                 });
             });
         });
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 2536640dd3..9e4b6da90c 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -9,10 +9,10 @@
         html += '<div class="primaryIcons">';
         var backIcon = browserInfo.safari ? 'chevron-left' : 'arrow-back';
 
-        html += '<button is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><iron-icon icon="' + backIcon + '"></iron-icon></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><iron-icon icon="' + backIcon + '"></iron-icon></button>';
 
-        html += '<button is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft"><iron-icon icon="menu"></iron-icon></button>';
-        html += '<button is="paper-icon-button-light" class="headerButton headerAppsButton barsMenuButton headerButtonLeft"><iron-icon icon="menu"></iron-icon></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft"><iron-icon icon="menu"></iron-icon></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerAppsButton barsMenuButton headerButtonLeft"><iron-icon icon="menu"></iron-icon></button>';
 
         html += '<div class="libraryMenuButtonText headerButton">' + Globalize.translate('ButtonHome') + '</div>';
 
diff --git a/dashboard-ui/scripts/librarypathmapping.js b/dashboard-ui/scripts/librarypathmapping.js
index 61a401d5cf..99b4f827d2 100644
--- a/dashboard-ui/scripts/librarypathmapping.js
+++ b/dashboard-ui/scripts/librarypathmapping.js
@@ -49,7 +49,7 @@
 
             mapHtml += '</paper-item-body>';
 
-            mapHtml += '<paper-icon-button data-index="' + index + '" icon="delete" class="btnDeletePath"></paper-icon-button>';
+            mapHtml += '<button type="button" is="paper-icon-button-light" data-index="' + index + '" class="btnDeletePath"><iron-icon icon="delete"></iron-icon></button>';
 
             mapHtml += '</paper-icon-item>';
 
diff --git a/dashboard-ui/scripts/livetvcomponents.js b/dashboard-ui/scripts/livetvcomponents.js
index 772e109616..bb04998d1c 100644
--- a/dashboard-ui/scripts/livetvcomponents.js
+++ b/dashboard-ui/scripts/livetvcomponents.js
@@ -1,5 +1,9 @@
 define(['datetime'], function (datetime) {
 
+    function enableScrollX() {
+        return browserInfo.mobile && AppInfo.enableAppLayouts;
+    }
+
     function getTimersHtml(timers) {
 
         var items = timers.map(function (t) {
@@ -7,16 +11,76 @@
             return t;
         });
 
-        var html = LibraryBrowser.getPosterViewHtml({
-            items: items,
-            shape: "square",
-            showTitle: true,
-            showAirTime: true,
-            showChannelName: true,
-            lazy: true,
-            cardLayout: true,
-            showDetailsMenu: true
-        });
+        var groups = [];
+
+        var currentGroupName = '';
+        var currentGroup = [];
+
+        var i, length;
+
+        for (i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+
+            var dateText = '';
+
+            if (item.StartDate) {
+                try {
+
+                    var premiereDate = datetime.parseISO8601Date(item.StartDate, true);
+
+                    dateText = LibraryBrowser.getFutureDateText(premiereDate, true);
+
+                } catch (err) {
+                }
+            }
+
+            if (dateText != currentGroupName) {
+
+                if (currentGroup.length) {
+                    groups.push({
+                        name: currentGroupName,
+                        items: currentGroup
+                    });
+                }
+
+                currentGroupName = dateText;
+                currentGroup = [item];
+            } else {
+                currentGroup.push(item);
+            }
+        }
+
+        var html = '';
+
+        for (i = 0, length = groups.length; i < length; i++) {
+
+            var group = groups[i];
+
+            html += '<div class="homePageSection">';
+            html += '<h1 class="listHeader">' + group.name + '</h1>';
+
+            if (enableScrollX()) {
+                html += '<div class="itemsContainer hiddenScrollX">';
+            } else {
+                html += '<div class="itemsContainer">';
+            }
+
+            html += LibraryBrowser.getPosterViewHtml({
+                items: group.items,
+                shape: "square",
+                showTitle: true,
+                showAirTime: true,
+                showChannelName: true,
+                lazy: true,
+                cardLayout: true,
+                showDetailsMenu: true
+
+            });
+            html += '</div>';
+
+            html += '</div>';
+        }
 
         return Promise.resolve(html);
     }
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index 9f78b5b91f..41b4c6ca43 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -120,9 +120,10 @@
                 elem.classList.add('hide');
             }
 
-            elem.querySelector('.itemsContainer').innerHTML = html;
+            elem.querySelector('.recordingItems').innerHTML = html;
 
             ImageLoader.lazyChildren(elem);
+            $(elem).createCardMenus();
         });
     }
 
@@ -156,7 +157,7 @@
 
     window.LiveTvPage.initRecordingsTab = function (page, tabContent) {
 
-        tabContent.querySelector('#upcomingRecordings .itemsContainer').addEventListener('timercancelled', function () {
+        tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
             reload(tabContent);
         });
     };
diff --git a/dashboard-ui/scripts/livetvseriestimers.js b/dashboard-ui/scripts/livetvseriestimers.js
index 3035e4f004..54801c25ce 100644
--- a/dashboard-ui/scripts/livetvseriestimers.js
+++ b/dashboard-ui/scripts/livetvseriestimers.js
@@ -1,4 +1,4 @@
-define(['datetime', 'jQuery'], function (datetime, $) {
+define(['datetime', 'jQuery', 'paper-icon-button-light'], function (datetime, $) {
 
     var query = {
 
@@ -79,7 +79,7 @@
 
             html += '</paper-item-body>';
 
-            html += '<paper-icon-button icon="cancel" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"><iron-icon icon="cancel"></iron-icon></button>';
 
             html += '</paper-icon-item>';
         }
diff --git a/dashboard-ui/scripts/livetvstatus.js b/dashboard-ui/scripts/livetvstatus.js
index d6f77fb928..5366d3a2dd 100644
--- a/dashboard-ui/scripts/livetvstatus.js
+++ b/dashboard-ui/scripts/livetvstatus.js
@@ -76,7 +76,7 @@
                 html += '</paper-item-body>';
 
                 if (tuner.CanReset) {
-                    html += '<paper-icon-button icon="refresh" data-tunerid="' + tuner.Id + '" title="' + Globalize.translate('ButtonResetTuner') + '" class="btnResetTuner"></paper-icon-button>';
+                    html += '<button type="button" is="paper-icon-button-light" data-tunerid="' + tuner.Id + '" title="' + Globalize.translate('ButtonResetTuner') + '" class="btnResetTuner"><iron-icon icon="refresh"></iron-icon></button>';
                 }
 
                 html += '</paper-icon-item>';
@@ -214,7 +214,7 @@
                 html += '</a>';
                 html += '</paper-item-body>';
 
-                html += '<paper-icon-button icon="delete" data-id="' + device.Id + '" title="' + Globalize.translate('ButtonDelete') + '" class="btnDeleteDevice"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + device.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
                 html += '</paper-icon-item>';
             }
 
@@ -316,7 +316,7 @@
 
                 html += '</a>';
                 html += '</paper-item-body>';
-                html += '<paper-icon-button icon="delete" data-id="' + provider.Id + '" title="' + Globalize.translate('ButtonDelete') + '" class="btnDelete"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + provider.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
                 html += '</paper-icon-item>';
             }
 
diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js
index 64b2bcce99..928c0924d4 100644
--- a/dashboard-ui/scripts/medialibrarypage.js
+++ b/dashboard-ui/scripts/medialibrarypage.js
@@ -346,7 +346,7 @@
 
         if (virtualFolder.showMenu !== false) {
             html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
-            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnCardMenu"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
             html += "</div>";
         }
 
diff --git a/dashboard-ui/scripts/metadataimagespage.js b/dashboard-ui/scripts/metadataimagespage.js
index 00a0582f48..d400619f6f 100644
--- a/dashboard-ui/scripts/metadataimagespage.js
+++ b/dashboard-ui/scripts/metadataimagespage.js
@@ -171,8 +171,8 @@
 
             html += '</paper-item-body>';
 
-            html += '<paper-icon-button class="btnUp" icon="keyboard-arrow-up" title="' + Globalize.translate('ButtonUp') + '" style="padding:3px 8px;"></paper-icon-button>';
-            html += '<paper-icon-button class="btnDown" icon="keyboard-arrow-down" title="' + Globalize.translate('ButtonDown') + '" style="padding:3px 8px;"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
+            html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
 
             html += '</paper-icon-item>';
         }
@@ -274,8 +274,8 @@
 
             html += '</paper-item-body>';
 
-            html += '<paper-icon-button class="btnUp" icon="keyboard-arrow-up" title="' + Globalize.translate('ButtonUp') + '" style="padding:3px 8px;"></paper-icon-button>';
-            html += '<paper-icon-button class="btnDown" icon="keyboard-arrow-down" title="' + Globalize.translate('ButtonDown') + '" style="padding:3px 8px;"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
+            html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
 
             html += '</paper-icon-item>';
         }
@@ -343,11 +343,11 @@
             html += '</paper-item-body>';
 
             if (i > 0) {
-                html += '<paper-icon-button title="' + Globalize.translate('ButtonUp') + '" icon="keyboard-arrow-up" class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
             }
             else if (plugins.length > 1) {
 
-                html += '<paper-icon-button title="' + Globalize.translate('ButtonDown') + '" icon="keyboard-arrow-down" class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
             }
 
             html += '</paper-icon-item>';
diff --git a/dashboard-ui/scripts/mypreferenceshome.js b/dashboard-ui/scripts/mypreferenceshome.js
index 38f6497473..7d21deb8e1 100644
--- a/dashboard-ui/scripts/mypreferenceshome.js
+++ b/dashboard-ui/scripts/mypreferenceshome.js
@@ -107,11 +107,11 @@
 
             if (index > 0) {
 
-                currentHtml += '<paper-icon-button icon="keyboard-arrow-up" class="btnViewItemUp btnViewItemMove" title="' + Globalize.translate('ButtonUp') + '"></paper-icon-button>';
+                currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove" title="' + Globalize.translate('ButtonUp') + '"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
             }
             else if (result.Items.length > 1) {
 
-                currentHtml += '<paper-icon-button icon="keyboard-arrow-down" class="btnViewItemDown btnViewItemMove" title="' + Globalize.translate('ButtonDown') + '"></paper-icon-button>';
+                currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove" title="' + Globalize.translate('ButtonDown') + '"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
             }
 
 
diff --git a/dashboard-ui/scripts/notificationsettings.js b/dashboard-ui/scripts/notificationsettings.js
index 386e7aa7b0..3b38d407af 100644
--- a/dashboard-ui/scripts/notificationsettings.js
+++ b/dashboard-ui/scripts/notificationsettings.js
@@ -43,7 +43,7 @@
 
                 itemHtml += '</paper-item-body>';
 
-                itemHtml += '<paper-icon-button icon="mode-edit"></paper-icon-button>';
+                itemHtml += '<button type="button" is="paper-icon-button-light"><iron-icon icon="mode-edit"></iron-icon></button>';
 
                 itemHtml += '</paper-icon-item>';
                 itemHtml += '</a>';
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index 7767e621a4..25667cf60a 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -84,7 +84,7 @@
         html += '<div class="cardFooter">';
 
         html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
-        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnCardMenu"></paper-icon-button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         html += "</div>";
 
         html += "<div class='cardText'>";
diff --git a/dashboard-ui/scripts/scheduledtaskpage.js b/dashboard-ui/scripts/scheduledtaskpage.js
index e17f0cde9b..9288e92a78 100644
--- a/dashboard-ui/scripts/scheduledtaskpage.js
+++ b/dashboard-ui/scripts/scheduledtaskpage.js
@@ -64,7 +64,7 @@ var ScheduledTaskPage = {
 
             html += '</paper-item-body>';
 
-            html += '<paper-icon-button icon="delete" title="' + Globalize.translate('ButtonDelete') + '" onclick="ScheduledTaskPage.confirmDeleteTrigger(' + i + ');"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDelete') + '" onclick="ScheduledTaskPage.confirmDeleteTrigger(' + i + ');"><iron-icon icon="delete"></iron-icon></button>';
 
             html += '</paper-icon-item>';
         }
diff --git a/dashboard-ui/scripts/scheduledtaskspage.js b/dashboard-ui/scripts/scheduledtaskspage.js
index bfa96c3d68..c0663a5b37 100644
--- a/dashboard-ui/scripts/scheduledtaskspage.js
+++ b/dashboard-ui/scripts/scheduledtaskspage.js
@@ -69,15 +69,15 @@
 
             if (task.State == "Idle") {
 
-                html += '<paper-icon-button id="btnTask' + task.Id + '" icon="play-arrow" class="btnStartTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><iron-icon icon="play-arrow"></iron-icon></button>';
             }
             else if (task.State == "Running") {
 
-                html += '<paper-icon-button id="btnTask' + task.Id + '" icon="stop" class="btnStopTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStop') + '"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStop') + '"><iron-icon icon="stop"></iron-icon></button>';
 
             } else {
 
-                html += '<paper-icon-button id="btnTask' + task.Id + '" icon="play-arrow" class="btnStartTask hide" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"></paper-icon-button>';
+                html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask hide" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><iron-icon icon="play-arrow"></iron-icon></button>';
             }
 
             html += '</paper-icon-item>';
@@ -186,7 +186,7 @@
             elem.classList.add('btnStartTask');
             elem.classList.remove('btnStopTask');
             elem.classList.remove('hide');
-            elem.icon = 'play-arrow';
+            elem.querySelector('iron-icon').icon = 'play-arrow';
             elem.title = Globalize.translate('ButtonStart');
         }
         else if (state == "Running") {
@@ -194,7 +194,7 @@
             elem.classList.remove('btnStartTask');
             elem.classList.add('btnStopTask');
             elem.classList.remove('hide');
-            elem.icon = 'stop';
+            elem.querySelector('iron-icon').icon = 'stop';
             elem.title = Globalize.translate('ButtonStop');
 
         } else {
@@ -202,7 +202,7 @@
             elem.classList.add('btnStartTask');
             elem.classList.remove('btnStopTask');
             elem.classList.add('hide');
-            elem.icon = 'play-arrow';
+            elem.querySelector('iron-icon').icon = 'play-arrow';
             elem.title = Globalize.translate('ButtonStart');
         }
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 4dd38a66fc..57445a3678 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -2136,9 +2136,7 @@ var AppInfo = {};
             define("alert", [embyWebComponentsBowerPath + "/alert/alert"], returnFirstDependency);
         }
 
-        if (browser.animate) {
-            define("loading", [embyWebComponentsBowerPath + "/loading/loading"], returnFirstDependency);
-        } else if (browser.tv) {
+        if (browser.tv) {
             define("loading", [embyWebComponentsBowerPath + "/loading/loading-smarttv"], returnFirstDependency);
         } else {
             define("loading", [embyWebComponentsBowerPath + "/loading/loading-lite"], returnFirstDependency);
@@ -2922,7 +2920,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/tv.html',
-            dependencies: ['paper-tabs', 'paper-checkbox', 'paper-button', 'paper-icon-button-light'],
+            dependencies: ['paper-checkbox', 'paper-button', 'paper-icon-button-light', 'material-design-lite'],
             autoFocus: false,
             controller: 'scripts/tvrecommended'
         });
diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js
index 1c13ab60df..ca0e3b83cf 100644
--- a/dashboard-ui/scripts/syncactivity.js
+++ b/dashboard-ui/scripts/syncactivity.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'paper-icon-button-light'], function ($) {
 
     function cancelJob(page, id) {
 
@@ -133,7 +133,7 @@
         }
 
         html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobMenu"></paper-icon-button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnJobMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         html += "</div>";
 
         for (var i = 0, length = textLines.length; i < length; i++) {
diff --git a/dashboard-ui/scripts/syncjob.js b/dashboard-ui/scripts/syncjob.js
index 27deace63c..eebc3def41 100644
--- a/dashboard-ui/scripts/syncjob.js
+++ b/dashboard-ui/scripts/syncjob.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'datetime', 'paper-progress', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'paper-icon-button', 'paper-button'], function ($, datetime) {
+define(['jQuery', 'datetime', 'paper-progress', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light', 'paper-button'], function ($, datetime) {
 
     function renderJob(page, job, dialogOptions) {
 
@@ -95,9 +95,9 @@
 
         if (hasActions) {
 
-            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobItemMenu"></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnJobItemMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         } else {
-            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnJobItemMenu" disabled></paper-icon-button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnJobItemMenu" disabled><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         }
 
         html += '</paper-icon-item>';
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index 5d43c1c3a2..f231f1bc1c 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'paper-icon-button-light'], function ($) {
 
     function deleteUser(page, id) {
 
@@ -136,7 +136,7 @@
         html += '<div class="cardFooter">';
 
         html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnUserMenu"></paper-icon-button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         html += "</div>";
 
         html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
@@ -255,7 +255,7 @@
         html += '<div class="cardFooter">';
 
         html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
-        html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnUserMenu"></paper-icon-button>';
+        html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu"><iron-icon icon="' + AppInfo.moreIcon + '"></iron-icon></button>';
         html += "</div>";
 
         html += '<div class="cardText" style="padding-top:10px;padding-bottom:10px;">';
diff --git a/dashboard-ui/strings/en-US.json b/dashboard-ui/strings/en-US.json
index b2eabf60c5..0cdfc90eb8 100644
--- a/dashboard-ui/strings/en-US.json
+++ b/dashboard-ui/strings/en-US.json
@@ -2349,6 +2349,5 @@
   "LabelOriginalTitle": "Original title:",
   "LabelSortTitle": "Sort title:",
   "OptionConvertRecordingPreserveAudio": "Preserve original audio when converting recordings",
-  "OptionConvertRecordingPreserveAudioHelp": "This will provide better audio but may require transcoding during playback on some devices.",
-  "HeaderUpcomingRecordings":  "Upcoming Recordings"
+  "OptionConvertRecordingPreserveAudioHelp": "This will provide better audio but may require transcoding during playback on some devices."
 }
diff --git a/dashboard-ui/syncsettings.html b/dashboard-ui/syncsettings.html
index 194028ad05..53c7586eb1 100644
--- a/dashboard-ui/syncsettings.html
+++ b/dashboard-ui/syncsettings.html
@@ -1,4 +1,4 @@
-<div id="syncSettingsPage" data-role="page" class="page type-interior withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/syncsettings,paper-checkbox,paper-input,paper-button">
+<div id="syncSettingsPage" data-role="page" class="page type-interior withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/syncsettings,paper-checkbox,paper-input,paper-button,paper-icon-button-light">
 
     <div data-role="content">
         <div class="content-primary">
@@ -8,7 +8,7 @@
                 <ul data-role="listview" class="ulForm">
                     <li>
                         <paper-input type="text" id="txtSyncTempPath" label="${LabelSyncTempPath}" style="display: inline-block; width: 84%;"></paper-input>
-                        <paper-icon-button id="btnSelectSyncTempPath" icon="search" title="${ButtonSelectDirectory}"></paper-icon-button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectSyncTempPath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
                         <div class="fieldDescription">
                             ${LabelSyncTempPathHelp}
                         </div>
diff --git a/dashboard-ui/thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.js b/dashboard-ui/thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.js
index 8345423df9..9e753fe7c6 100644
--- a/dashboard-ui/thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.js
+++ b/dashboard-ui/thirdparty/jquerymobile-1.4.5/jquery.mobile.custom.js
@@ -956,7 +956,6 @@
                     }
                     // Add ARIA role
                     content.setAttribute("role", "main");
-                    content.classList.add("ui-content");
                 }
             };