diff --git a/dashboard-ui/apiclient/connectionmanager.js b/dashboard-ui/apiclient/connectionmanager.js
index 6d9162ec12..6dc7235d44 100644
--- a/dashboard-ui/apiclient/connectionmanager.js
+++ b/dashboard-ui/apiclient/connectionmanager.js
@@ -558,7 +558,7 @@
 
         self.logout = function () {
 
-            console.log('begin connectionManager loguot');
+            Logger.log('begin connectionManager loguot');
             var promises = [];
 
             for (var i = 0, length = apiClients.length; i < length; i++) {
diff --git a/dashboard-ui/apiclient/credentials.js b/dashboard-ui/apiclient/credentials.js
index 82a6688b81..b913efc6e7 100644
--- a/dashboard-ui/apiclient/credentials.js
+++ b/dashboard-ui/apiclient/credentials.js
@@ -16,7 +16,7 @@
                 
                 var json = appStorage.getItem(key) || '{}';
 
-                console.log('credentials initialized with: ' + json);
+                Logger.log('credentials initialized with: ' + json);
                 credentials = JSON.parse(json);
                 credentials.Servers = credentials.Servers || credentials.servers || [];
 
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/.bower.json b/dashboard-ui/bower_components/iron-autogrow-textarea/.bower.json
new file mode 100644
index 0000000000..3ecd6f0c5d
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/.bower.json
@@ -0,0 +1,48 @@
+{
+  "name": "iron-autogrow-textarea",
+  "version": "1.0.2",
+  "description": "A textarea element that automatically grows with input",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input",
+    "textarea"
+  ],
+  "main": [
+    "iron-autogrow-textarea.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
+  "ignore": [],
+  "dependencies": {
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.0.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.2",
+    "commit": "1697690de3010aa7b4d3557e7f3fa582e82dee6a"
+  },
+  "_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-autogrow-textarea"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/.gitignore b/dashboard-ui/bower_components/iron-autogrow-textarea/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/bower.json b/dashboard-ui/bower_components/iron-autogrow-textarea/bower.json
new file mode 100644
index 0000000000..0ff6079644
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/bower.json
@@ -0,0 +1,39 @@
+{
+  "name": "iron-autogrow-textarea",
+  "version": "1.0.2",
+  "description": "A textarea element that automatically grows with input",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input",
+    "textarea"
+  ],
+  "main": [
+    "iron-autogrow-textarea.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-autogrow-textarea.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-autogrow-textarea",
+  "ignore": [],
+  "dependencies": {
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/demo/index.html b/dashboard-ui/bower_components/iron-autogrow-textarea/demo/index.html
new file mode 100644
index 0000000000..25a1c25a15
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/demo/index.html
@@ -0,0 +1,81 @@
+<!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 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">
+
+    <title>iron-autogrow-textarea demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../iron-autogrow-textarea.html">
+
+    <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+  </head>
+  <style>
+    iron-autogrow-textarea {
+      width: 200px;
+    }
+  </style>
+  <body>
+    <div class="vertical-section-container centered">
+      <h4>Updating the value imperatively</h4>
+      <template is="dom-bind">
+        <div class="vertical-section">
+          <iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
+          <br><br>
+
+          <code>bind-value</code>: <span>[[bindValue]]</span>
+
+          <p on-click="setValue">
+            set <code>bind-value</code> to: <br>
+            <textarea></textarea>
+            <button value="bindValue">set</button>
+            <br><br>
+
+            set <code>textarea.value</code> to: <br>
+            <textarea></textarea>
+            <button value="value">set</button>
+          </p>
+        </div>
+      </template>
+
+      <h4>Custom</h4>
+      <div class="vertical-section">
+        <p>Scrolls after 4 rows:</p>
+        <iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
+        <p>Initial height of 4 rows</p>
+        <iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
+      </div>
+    </div>
+
+    <script>
+      var scope = document.querySelector('template[is=dom-bind]');
+
+      scope.setValue = function(event) {
+        if (!(event.target instanceof HTMLButtonElement)) {
+          return;
+        }
+        var inputValue = event.target.previousElementSibling.value;
+        if (event.target.value == "bindValue") {
+          document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
+        } else {
+          document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
+        }
+
+      }
+    </script>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/hero.svg b/dashboard-ui/bower_components/iron-autogrow-textarea/hero.svg
new file mode 100644
index 0000000000..19ec70a054
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/hero.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
+	<path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
+	<path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+		c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+		c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+		s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+		c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+	<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/index.html b/dashboard-ui/bower_components/iron-autogrow-textarea/index.html
new file mode 100644
index 0000000000..3be2964faf
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/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>iron-autogrow-textarea</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/iron-autogrow-textarea/iron-autogrow-textarea.html b/dashboard-ui/bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html
new file mode 100644
index 0000000000..54decc8d94
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html
@@ -0,0 +1,266 @@
+<!--
+@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-behaviors/iron-control-state.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
+
+<!--
+`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
+lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
+never scroll.
+
+Example:
+
+    <iron-autogrow-textarea id="a1">
+      <textarea id="t1"></textarea>
+    </iron-autogrow-textarea>
+
+Because the `textarea`'s `value` property is not observable, you should use
+this element's `bind-value` instead for imperative updates.
+
+@group Iron Elements
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="iron-autogrow-textarea">
+
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      width: 400px;
+      border: 1px solid;
+      padding: 2px;
+      -moz-appearance: textarea;
+      -webkit-appearance: textarea;
+    }
+
+    .mirror-text {
+      visibility: hidden;
+      word-wrap: break-word;
+    }
+
+    textarea {
+      position: relative;
+      outline: none;
+      border: none;
+      resize: none;
+      background: inherit;
+      /* see comments in template */
+      width: 100%;
+      height: 100%;
+      font-size: inherit;
+      font-family: inherit;
+    }
+
+    ::content textarea:invalid {
+      box-shadow: none;
+    }
+
+  </style>
+  <template>
+    <!-- the mirror sizes the input/textarea so it grows with typing -->
+    <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+
+    <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
+    <div class="textarea-container fit">
+      <textarea id="textarea"
+        autocomplete$="[[autocomplete]]"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        name$="[[name]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        required$="[[required]]"
+        rows$="[[rows]]"
+        maxlength$="[[maxlength]]"></textarea>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'iron-autogrow-textarea',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior,
+      Polymer.IronControlState
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * The initial number of rows.
+       *
+       * @attribute rows
+       * @type number
+       * @default 1
+       */
+      rows: {
+        type: Number,
+        value: 1,
+        observer: '_updateCached'
+      },
+
+      /**
+       * The maximum number of rows this element can grow to until it
+       * scrolls. 0 means no maximum.
+       *
+       * @attribute maxRows
+       * @type number
+       * @default 0
+       */
+      maxRows: {
+       type: Number,
+       value: 0,
+       observer: '_updateCached'
+      },
+
+      /**
+       * Bound to the textarea's `autocomplete` attribute.
+       */
+      autocomplete: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `autofocus` attribute.
+       */
+      autofocus: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `inputmode` attribute.
+       */
+      inputmode: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `name` attribute.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `placeholder` attribute.
+       */
+      placeholder: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `readonly` attribute.
+       */
+      readonly: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the textarea as required.
+       */
+      required: {
+        type: Boolean
+      },
+
+      /**
+       * The maximum length of the input value.
+       */
+      maxlength: {
+        type: Number
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput'
+    },
+
+    /**
+     * Returns the underlying textarea.
+     */
+    get textarea() {
+      return this.$.textarea;
+    },
+
+    _update: function() {
+      this.$.mirror.innerHTML = this._valueForMirror();
+
+      var textarea = this.textarea;
+      // If the value of the textarea was updated imperatively, then we
+      // need to manually update bindValue as well.
+      if (textarea && this.bindValue != textarea.value) {
+        this.bindValue = textarea.value;
+      }
+    },
+
+    _bindValueChanged: function() {
+      var textarea = this.textarea;
+      if (!textarea) {
+        return;
+      }
+
+      textarea.value = this.bindValue;
+      this._update();
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _onInput: function(event) {
+      this.bindValue = event.path ? event.path[0].value : event.target.value;
+      this._update();
+    },
+
+    _constrain: function(tokens) {
+      var _tokens;
+      tokens = tokens || [''];
+      // Enforce the min and max heights for a multiline input to avoid measurement
+      if (this.maxRows > 0 && tokens.length > this.maxRows) {
+        _tokens = tokens.slice(0, this.maxRows);
+      } else {
+        _tokens = tokens.slice(0);
+      }
+      while (this.rows > 0 && _tokens.length < this.rows) {
+        _tokens.push('');
+      }
+      return _tokens.join('<br>') + '&nbsp;';
+    },
+
+    _valueForMirror: function() {
+      var input = this.textarea;
+      if (!input) {
+        return;
+      }
+      this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+      return this._constrain(this.tokens);
+    },
+
+    _updateCached: function() {
+      this.$.mirror.innerHTML = this._constrain(this.tokens);
+    }
+  })
+</script>
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/test/basic.html b/dashboard-ui/bower_components/iron-autogrow-textarea/test/basic.html
new file mode 100644
index 0000000000..af736a0a1f
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/test/basic.html
@@ -0,0 +1,126 @@
+<!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>iron-autogrow-textarea 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>
+    <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+    <link rel="import" href="../../test-fixture/test-fixture.html">
+    <link rel="import" href="../iron-autogrow-textarea.html">
+
+  </head>
+  <body>
+
+    <test-fixture id="basic">
+      <template>
+        <iron-autogrow-textarea></iron-autogrow-textarea>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="has-bindValue">
+      <template>
+        <iron-autogrow-textarea bind-value="foobar"></iron-autogrow-textarea>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="rows">
+      <template>
+        <iron-autogrow-textarea rows="3"></iron-autogrow-textarea>
+      </template>
+    </test-fixture>
+
+    <script>
+
+      suite('basic', function() {
+
+        test('setting bindValue sets textarea value', function() {
+          var autogrow = fixture('basic');
+          var textarea = autogrow.textarea;
+
+          autogrow.bindValue = 'batman';
+          assert.equal(textarea.value, autogrow.bindValue, 'textarea value equals to bindValue');
+        });
+
+        test('can set an initial bindValue', function() {
+          var autogrow = fixture('has-bindValue');
+          assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue');
+        });
+
+        test('can set an initial number of rows', function() {
+          var autogrow = fixture("rows");
+          assert.equal(autogrow.textarea.rows, 3, 'textarea has rows=3');
+        });
+
+        test('adding rows grows the textarea', function() {
+          var autogrow = fixture('basic');
+          var initialHeight = autogrow.offsetHeight;
+
+          autogrow.bindValue = 'batman\nand\nrobin';
+          var finalHeight = autogrow.offsetHeight
+          assert.isTrue(finalHeight > initialHeight);
+        });
+
+        test('removing rows shrinks the textarea', function() {
+          var autogrow = fixture('basic');
+          autogrow.bindValue = 'batman\nand\nrobin';
+          var initialHeight = autogrow.offsetHeight;
+
+          autogrow.bindValue = 'batman';
+          var finalHeight = autogrow.offsetHeight
+          assert.isTrue(finalHeight < initialHeight);
+        });
+      });
+
+      suite('focus/blur events', function() {
+        var input;
+
+        setup(function() {
+          input = fixture('basic');
+        });
+
+        test('focus/blur events fired on host element', function(done) {
+          var nFocusEvents = 0;
+          var nBlurEvents = 0;
+          input.addEventListener('focus', function() {
+            nFocusEvents += 1;
+            // setTimeout to wait for potentially more, erroneous events
+            setTimeout(function() {
+              assert.equal(nFocusEvents, 1, 'one focus event fired');
+              MockInteractions.blur(input.textarea);
+            });
+          });
+          input.addEventListener('blur', function() {
+            nBlurEvents += 1;
+            // setTimeout to wait for potentially more, erroneous events
+            setTimeout(function() {
+              assert.equal(nBlurEvents, 1, 'one blur event fired');
+              done();
+            });
+          });
+          MockInteractions.focus(input.textarea);
+        });
+
+      });
+
+    </script>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-autogrow-textarea/test/index.html b/dashboard-ui/bower_components/iron-autogrow-textarea/test/index.html
new file mode 100644
index 0000000000..8790abe4e9
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-autogrow-textarea/test/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 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>iron-autogrow-textarea tests</title>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites([
+        'basic.html',
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/.bower.json b/dashboard-ui/bower_components/iron-form-element-behavior/.bower.json
new file mode 100644
index 0000000000..f1369b1635
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/.bower.json
@@ -0,0 +1,37 @@
+{
+  "name": "iron-form-element-behavior",
+  "version": "1.0.1",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "private": true,
+  "main": "iron-form-element-behavior",
+  "authors": "The Polymer Authors",
+  "description": "Enables a custom element to be included in an iron-form",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "form"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "homepage": "https://github.com/PolymerElements/iron-form-element-behavior",
+  "_release": "1.0.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.1",
+    "commit": "f386143e866c320025589f3d79798c12103377a4"
+  },
+  "_source": "git://github.com/PolymerElements/iron-form-element-behavior.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-form-element-behavior"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/.gitignore b/dashboard-ui/bower_components/iron-form-element-behavior/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/bower.json b/dashboard-ui/bower_components/iron-form-element-behavior/bower.json
new file mode 100644
index 0000000000..1e141f2c61
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "iron-form-element-behavior",
+  "version": "1.0.1",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "private": true,
+  "main": "iron-form-element-behavior",
+  "authors": "The Polymer Authors",
+  "description": "Enables a custom element to be included in an iron-form",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "form"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/demo/index.html b/dashboard-ui/bower_components/iron-form-element-behavior/demo/index.html
new file mode 100644
index 0000000000..b40998de4d
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/demo/index.html
@@ -0,0 +1,53 @@
+<!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>iron-form-element-behavior 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="simple-form.html">
+    <link rel="import" href="simple-element.html">
+
+  </head>
+  <body>
+
+    <form is="simple-form" id="form">
+      Element the form is tracking: <input is="simple-element" type="text" name="one" value="one">
+      <br>
+      Element the form isn't tracking: <input type="text" name="two" value="two">
+      <br>
+      Another one the form is tracking: <input is="simple-element" type="text" name="three" value="three">
+
+    </form>
+
+    <h4>Elements tracked by the form: </h4>
+    <ul id="output">
+    </ul>
+  </body>
+  <script>
+    var output = document.getElementById('output');
+    var elements = document.getElementById('form').formElements;
+
+    for (var i = 0; i < elements.length; i++) {
+      var li = document.createElement('li');
+      var text = document.createTextNode(elements[i].value);
+      li.appendChild(text);
+      output.appendChild(li);
+    }
+  </script>
+
+</html>
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-element.html b/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-element.html
new file mode 100644
index 0000000000..450276923b
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-element.html
@@ -0,0 +1,27 @@
+<!--
+@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-form-element-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'simple-element',
+
+    extends: 'input',
+
+    behaviors: [
+      Polymer.IronFormElementBehavior
+    ]
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-form.html b/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-form.html
new file mode 100644
index 0000000000..82acbe5f36
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/demo/simple-form.html
@@ -0,0 +1,42 @@
+<!--
+@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">
+
+<script>
+
+  Polymer({
+
+    is: 'simple-form',
+
+    extends: 'form',
+
+    properties: {
+      formElements: {
+        type: Object,
+        notify: true
+      }
+    },
+
+    listeners: {
+      'iron-form-element-register': '_elementRegistered'
+    },
+
+    ready: function() {
+      this.formElements = [];
+    },
+
+    _elementRegistered: function(e) {
+      this.formElements.push(e.target);
+      this.fire('element-registered');
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-form-element-behavior/index.html b/dashboard-ui/bower_components/iron-form-element-behavior/index.html
new file mode 100644
index 0000000000..8d748c0509
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/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>iron-form-element-behavior</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/iron-form-element-behavior/iron-form-element-behavior.html b/dashboard-ui/bower_components/iron-form-element-behavior/iron-form-element-behavior.html
new file mode 100644
index 0000000000..d7678a78df
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-form-element-behavior/iron-form-element-behavior.html
@@ -0,0 +1,50 @@
+<!--
+@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">
+
+<!--
+Enables a custom element to be included in an `iron-form`.
+-->
+<script>
+
+  /** 
+  
+  @demo demo/index.html
+  @polymerBehavior 
+  
+  */
+  Polymer.IronFormElementBehavior = {
+
+    properties: {
+
+      /**
+       * The name of this element.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * The value for this element.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+    },
+
+    attached: function() {
+      this.fire('iron-form-element-register');
+    }
+
+  };
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-input/.bower.json b/dashboard-ui/bower_components/iron-input/.bower.json
new file mode 100644
index 0000000000..1383a44cb5
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/.bower.json
@@ -0,0 +1,45 @@
+{
+  "name": "iron-input",
+  "version": "1.0.3",
+  "description": "An input element with data binding",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input"
+  ],
+  "main": [
+    "iron-input.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-input",
+  "ignore": [],
+  "dependencies": {
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-styles": "polymerelements/paper-styles#^1.0.2",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.0.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.3",
+    "commit": "edb505f41d67120cb505deedb92aa69e90078d2f"
+  },
+  "_source": "git://github.com/PolymerElements/iron-input.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-input"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-input/.gitignore b/dashboard-ui/bower_components/iron-input/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/iron-input/bower.json b/dashboard-ui/bower_components/iron-input/bower.json
new file mode 100644
index 0000000000..c4c8951c66
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/bower.json
@@ -0,0 +1,36 @@
+{
+  "name": "iron-input",
+  "version": "1.0.3",
+  "description": "An input element with data binding",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input"
+  ],
+  "main": [
+    "iron-input.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-input",
+  "ignore": [],
+  "dependencies": {
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-styles": "polymerelements/paper-styles#^1.0.2",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/iron-input/demo/index.html b/dashboard-ui/bower_components/iron-input/demo/index.html
new file mode 100644
index 0000000000..8d4d87915c
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/demo/index.html
@@ -0,0 +1,87 @@
+<!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 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">
+
+  <title>iron-input demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../iron-input.html">
+
+  <link href="../../paper-styles/paper-styles.html" rel="import">
+  <link href="../../paper-styles/demo-pages.html" rel="import">
+
+  <style is="custom-style">
+
+    .vertical-section {
+      @apply(--paper-font-body1);
+
+      line-height: 40px;
+    }
+
+    code {
+      color: var(--google-grey-700);
+    }
+
+    input[is=iron-input] {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    input, button {
+      font-size: 20px;
+      padding: 0.2em;
+    }
+
+  </style>
+</head>
+<body>
+
+  <div class="vertical-section vertical-section-container centered">
+    <template is="dom-bind">
+      <p>
+        <input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}">
+        <br>
+        bind to <code>bind-value</code>: <b>[[bindValue]]</b>
+        <br>
+        bind to <code>value::input</code>: <b>{{value}}</b>
+      </p>
+
+      <p on-click="setValue">
+        set bind-value to: <input> <button is="paper-button" value="bindValue">set</button>
+        <br>
+        set value to: <input> <button value="value">set</button>
+      </p>
+    </template>
+    <p>only allows these characters:
+    <code>!@#0123456789</code></p>
+    <input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input>
+
+  </div>
+
+  <script>
+    var scope = document.querySelector('template[is=dom-bind]');
+
+    scope.setValue = function(event) {
+      if (!(event.target instanceof HTMLButtonElement)) {
+        return;
+      }
+      document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value;
+    }
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-input/hero.svg b/dashboard-ui/bower_components/iron-input/hero.svg
new file mode 100644
index 0000000000..146ffeac67
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/hero.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="49" y="53" width="2" height="18"/>
+	<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/dashboard-ui/bower_components/iron-input/index.html b/dashboard-ui/bower_components/iron-input/index.html
new file mode 100644
index 0000000000..ca0dac066a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/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>iron-input</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/iron-input/iron-input.html b/dashboard-ui/bower_components/iron-input/iron-input.html
new file mode 100644
index 0000000000..3d8cccbf70
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/iron-input.html
@@ -0,0 +1,237 @@
+<!--
+@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-validatable-behavior/iron-validatable-behavior.html">
+
+<script>
+
+/*
+`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
+to `<input>`.
+
+### Two-way binding
+
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+
+    <input value="{{myValue::input}}">
+
+`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
+for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
+
+    <input is="iron-input" bind-value="{{myValue}}">
+
+### Custom validators
+
+You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
+
+    <input is="iron-input" validator="my-custom-validator">
+
+### Stopping invalid input
+
+It may be desirable to only allow users to enter certain characters. You can use the
+`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+
+    <!-- only allow characters that match [0-9] -->
+    <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
+
+@hero hero.svg
+@demo demo/index.html
+*/
+
+  Polymer({
+
+    is: 'iron-input',
+
+    extends: 'input',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input. The new input characters are
+       * matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
+       * set, or the `type` attribute (only supported for `type=number`).
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * Regular expression to match valid input characters.
+       */
+      allowedPattern: {
+        type: String
+      },
+
+      _previousValidInput: {
+        type: String,
+        value: ''
+      },
+
+      _patternAlreadyChecked: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput',
+      'keypress': '_onKeypress'
+    },
+
+    get _patternRegExp() {
+      var pattern;
+      if (this.allowedPattern) {
+        pattern = new RegExp(this.allowedPattern);
+      } else if (this.pattern) {
+        pattern = new RegExp(this.pattern);
+      } else {
+        switch (this.type) {
+          case 'number':
+            pattern = /[0-9.,e-]/;
+            break;
+        }
+      }
+      return pattern;
+    },
+
+    ready: function() {
+      this.bindValue = this.value;
+    },
+
+    _bindValueChanged: function() {
+      if (this.value !== this.bindValue) {
+        this.value = !this.bindValue ? '' : this.bindValue;
+      }
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _onInput: function() {
+      // Need to validate each of the characters pasted if they haven't
+      // been validated inside `_onKeypress` already.
+      if (this.preventInvalidInput && !this._patternAlreadyChecked) {
+        var valid = this._checkPatternValidity();
+        if (!valid) {
+          this.value = this._previousValidInput;
+        }
+      }
+
+      this.bindValue = this.value;
+      this._previousValidInput = this.value;
+      this._patternAlreadyChecked = false;
+    },
+
+    _isPrintable: function(event) {
+      // What a control/printable character is varies wildly based on the browser.
+      // - most control characters (arrows, backspace) do not send a `keypress` event
+      //   in Chrome, but the *do* on Firefox
+      // - in Firefox, when they do send a `keypress` event, control chars have
+      //   a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
+      // - printable characters always send a keypress event.
+      // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
+      //   always matches the charCode.
+      // None of this makes any sense.
+
+      var nonPrintable =
+        (event.keyCode == 8)   ||  // backspace
+        (event.keyCode == 19)  ||  // pause
+        (event.keyCode == 20)  ||  // caps lock
+        (event.keyCode == 27)  ||  // escape
+        (event.keyCode == 45)  ||  // insert
+        (event.keyCode == 46)  ||  // delete
+        (event.keyCode == 144) ||  // num lock
+        (event.keyCode == 145) ||  // scroll lock
+        (event.keyCode > 32 && event.keyCode < 41)   || // page up/down, end, home, arrows
+        (event.keyCode > 111 && event.keyCode < 124); // fn keys
+
+      return !(event.charCode == 0 && nonPrintable);
+    },
+
+    _onKeypress: function(event) {
+      if (!this.preventInvalidInput && this.type !== 'number') {
+        return;
+      }
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return;
+      }
+
+      // Handle special keys and backspace
+      if (event.metaKey || event.ctrlKey || event.altKey)
+        return;
+
+      // Check the pattern either here or in `_onInput`, but not in both.
+      this._patternAlreadyChecked = true;
+
+      var thisChar = String.fromCharCode(event.charCode);
+      if (this._isPrintable(event) && !regexp.test(thisChar)) {
+        event.preventDefault();
+      }
+    },
+
+    _checkPatternValidity: function() {
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return true;
+      }
+      for (var i = 0; i < this.value.length; i++) {
+        if (!regexp.test(this.value[i])) {
+          return false;
+        }
+      }
+      return true;
+    },
+
+    /**
+     * Returns true if `value` is valid. The validator provided in `validator` will be used first,
+     * then any constraints.
+     * @return {boolean} True if the value is valid.
+     */
+    validate: function() {
+      // Empty, non-required input is valid.
+      if (!this.required && this.value == '') {
+        this.invalid = false;
+        return true;
+      }
+
+      var valid;
+      if (this.hasValidator()) {
+        valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+      } else {
+        this.invalid = !this.validity.valid;
+        valid = this.validity.valid;
+      }
+      this.fire('iron-input-validate');
+      return valid;
+    }
+
+  });
+
+  /*
+  The `iron-input-validate` event is fired whenever `validate()` is called.
+  @event iron-input-validate
+  */
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-input/test/index.html b/dashboard-ui/bower_components/iron-input/test/index.html
new file mode 100644
index 0000000000..839cc3f111
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/test/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 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>iron-input ests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'iron-input.html',
+    ]);
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-input/test/iron-input.html b/dashboard-ui/bower_components/iron-input/test/iron-input.html
new file mode 100644
index 0000000000..b0ccb8f4df
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/test/iron-input.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>iron-input 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="../iron-input.html">
+  <link rel="import" href="letters-only.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <input is="iron-input">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="has-value">
+    <template>
+      <input is="iron-input" value="foobar">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="has-bind-value">
+    <template>
+      <input is="iron-input" bind-value="foobar">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="prevent-invalid-input">
+    <template>
+      <input is="iron-input" prevent-invalid-input pattern="[0-9]">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="prevent-invalid-input-has-value">
+    <template>
+      <input is="iron-input" prevent-invalid-input pattern="[0-9]*" value="foobar">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="prevent-invalid-input-has-bind-value">
+    <template>
+      <input is="iron-input" prevent-invalid-input pattern="[0-9]*" bind-value="foobar">
+    </template>
+  </test-fixture>
+
+  <test-fixture id="has-validator">
+    <template>
+      <letters-only></letters-only>
+      <input is="iron-input" validator="letters-only" pattern="[0-9]*">
+    </template>
+  </test-fixture>
+
+  <template is="dom-bind" id="bind-to-object">
+    <input is="iron-input" id="input" bind-value="{{foo}}">
+  </template>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('setting bindValue sets value', function() {
+        var input = fixture('basic');
+        input.bindValue = 'foobar';
+        assert.equal(input.value, input.bindValue, 'value equals to bindValue');
+      });
+
+      test('changing the input triggers an event', function(done) {
+        var input = fixture('basic');
+
+        input.addEventListener('bind-value-changed', function(value) {
+          assert.equal(input.value, input.bindValue, 'value equals to bindValue');
+          done();
+        });
+
+        input.value = "foo";
+        input._onInput();
+      });
+
+      test('default value sets bindValue', function() {
+        var input = fixture('has-value');
+        assert.equal(input.bindValue, input.value, 'bindValue equals value');
+      });
+
+      test('default bindValue sets value', function() {
+        var input = fixture('has-bind-value');
+        assert.equal(input.value, input.bindValue, 'value equals to bindValue');
+      });
+
+      test('set bindValue to undefined', function() {
+        var scope = document.getElementById('bind-to-object');
+        scope.foo = undefined;
+        assert.ok(!scope.$.input.bindValue, 'bindValue is falsy');
+        assert.ok(!scope.$.input.value, 'value is falsy');
+      });
+
+      test('validator used instead of constraints api if provided', function() {
+        var input = fixture('has-validator')[1];
+        input.value = '123';
+        input.validate();
+        assert.isTrue(input.invalid, 'input is invalid');
+      });
+
+      test('prevent invalid input works in _onInput', function() {
+        var input = fixture('prevent-invalid-input');
+        input.value = '123';
+        input._onInput();
+        assert.equal(input.bindValue, '123');
+
+        input.value = '123foo';
+        input._onInput();
+        assert.equal(input.bindValue, '123');
+      });
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-input/test/letters-only.html b/dashboard-ui/bower_components/iron-input/test/letters-only.html
new file mode 100644
index 0000000000..bfc301c3e4
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-input/test/letters-only.html
@@ -0,0 +1,30 @@
+<!--
+@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-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'letters-only',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+
+    validate: function(value) {
+      return !value || value.match(/^[a-zA-Z]*$/) !== null;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-range-behavior/.bower.json b/dashboard-ui/bower_components/iron-range-behavior/.bower.json
new file mode 100644
index 0000000000..05c3dafcbb
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/.bower.json
@@ -0,0 +1,40 @@
+{
+  "name": "iron-range-behavior",
+  "version": "1.0.2",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "Provides a behavior for something with a minimum and maximum value",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "behavior"
+  ],
+  "main": [
+    "iron-range-behavior.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-range-behavior.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "homepage": "https://github.com/PolymerElements/iron-range-behavior",
+  "_release": "1.0.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.2",
+    "commit": "a743ac0b204a8e76466c2dba349ab2180c9f15f5"
+  },
+  "_source": "git://github.com/PolymerElements/iron-range-behavior.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-range-behavior"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-range-behavior/.gitignore b/dashboard-ui/bower_components/iron-range-behavior/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/iron-range-behavior/bower.json b/dashboard-ui/bower_components/iron-range-behavior/bower.json
new file mode 100644
index 0000000000..6abc83999e
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/bower.json
@@ -0,0 +1,30 @@
+{
+  "name": "iron-range-behavior",
+  "version": "1.0.2",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "Provides a behavior for something with a minimum and maximum value",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "behavior"
+  ],
+  "main": [
+    "iron-range-behavior.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-range-behavior.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/iron-range-behavior/demo/index.html b/dashboard-ui/bower_components/iron-range-behavior/demo/index.html
new file mode 100644
index 0000000000..ce397365e0
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/demo/index.html
@@ -0,0 +1,79 @@
+<!--
+@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
+-->
+<!doctype html>
+<html>
+  <head>
+    <title>iron-range-behavior demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../iron-range-behavior.html">
+    <link rel="import" href="../../iron-input/iron-input.html">
+
+    <style>
+
+      body {
+        font-family: sans-serif;
+      }
+
+    </style>
+  </head>
+  
+  <body unresolved>
+
+     <dom-module id="x-progressbar">
+      <style>
+        :host {
+          display: block;
+          height: 40px;
+          background-color: #555;
+          border-radius: 4px;
+          padding: 8px;
+          box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
+        }
+
+        .progress {
+          background-color: #999;
+          height: 100%;
+          border-radius: 4px;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        }
+
+        .progress-value {
+          padding: 0 8px;
+          font-size: 18px;
+          color: #fff;
+        }
+      </style>
+      <template>
+        <div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}">
+          <div class="progress-value"><span>{{ratio}}</span>%</div>
+        </div>
+      </template>
+    </dom-module>
+
+    <script>
+      HTMLImports.whenReady(function() {
+        Polymer({
+          is: 'x-progressbar',
+
+          behaviors: [Polymer.IronRangeBehavior],
+
+          _computeStyle: function(ratio) {
+            return 'width: ' + ratio + '%;';
+          }
+        });
+      });
+    </script>
+
+    <x-progressbar min="0" max="200" value="120"></x-progressbar>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-range-behavior/index.html b/dashboard-ui/bower_components/iron-range-behavior/index.html
new file mode 100644
index 0000000000..cc77788735
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/index.html
@@ -0,0 +1,24 @@
+<!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, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <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/iron-range-behavior/iron-range-behavior.html b/dashboard-ui/bower_components/iron-range-behavior/iron-range-behavior.html
new file mode 100644
index 0000000000..4306e6924e
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/iron-range-behavior.html
@@ -0,0 +1,109 @@
+<!--
+@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">
+
+<script>
+
+ /** 
+ * `iron-range-behavior` provides the behavior for something with a minimum to maximum range.
+ *
+ * @demo demo/index.html
+ * @polymerBehavior 
+ */
+ Polymer.IronRangeBehavior = {
+
+  properties: {
+
+    /**
+     * The number that represents the current value.
+     */
+    value: {
+      type: Number,
+      value: 0,
+      notify: true,
+      reflectToAttribute: true
+    },
+
+    /**
+     * The number that indicates the minimum value of the range.
+     */
+    min: {
+      type: Number,
+      value: 0,
+      notify: true
+    },
+
+    /**
+     * The number that indicates the maximum value of the range.
+     */
+    max: {
+      type: Number,
+      value: 100,
+      notify: true
+    },
+
+    /**
+     * Specifies the value granularity of the range's value.
+     */
+    step: {
+      type: Number,
+      value: 1,
+      notify: true
+    },
+
+    /**
+     * Returns the ratio of the value.
+     */
+    ratio: {
+      type: Number,
+      value: 0,
+      readOnly: true,
+      notify: true
+    },
+  },
+
+  observers: [
+    '_update(value, min, max, step)'
+  ],
+
+  _calcRatio: function(value) {
+    return (this._clampValue(value) - this.min) / (this.max - this.min);
+  },
+
+  _clampValue: function(value) {
+    return Math.min(this.max, Math.max(this.min, this._calcStep(value)));
+  },
+
+  _calcStep: function(value) {
+   /**
+    * if we calculate the step using
+    * `Math.round(value / step) * step` we may hit a precision point issue 
+    * eg. 0.1 * 0.2 =  0.020000000000000004
+    * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
+    *
+    * as a work around we can divide by the reciprocal of `step`
+    */
+    return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value;
+  },
+
+  _validateValue: function() {
+    var v = this._clampValue(this.value);
+    this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
+    return this.value !== v;
+  },
+
+  _update: function() {
+    this._validateValue();
+    this._setRatio(this._calcRatio(this.value) * 100);
+  }
+
+};
+</script>
diff --git a/dashboard-ui/bower_components/iron-range-behavior/test/basic.html b/dashboard-ui/bower_components/iron-range-behavior/test/basic.html
new file mode 100644
index 0000000000..43f93f8975
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/test/basic.html
@@ -0,0 +1,111 @@
+<!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">
+  <title>iron-range-behavior</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <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="x-progressbar.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+
+  <test-fixture id="trivialRange">
+    <template>
+      <x-progressbar></x-progressbar>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('<x-progressbar>', function() {
+      var range;
+
+      setup(function() {
+        range = fixture('trivialRange');
+      });
+
+      test('check default', function() {
+        assert.equal(range.min, 0);
+        assert.equal(range.max, 100);
+        assert.equal(range.value, 0);
+      });
+
+      test('set value', function(done) {
+        range.value = 50;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, 50);
+          // test clamp value
+          range.value = 60.1;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, 60);
+            done();
+          });
+        });
+      });
+
+      test('set max', function(done) {
+        range.max = 10;
+        range.value = 11;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, range.max);
+          done();
+        });
+      });
+
+      test('test ratio', function(done) {
+        range.max = 10;
+        range.value = 5;
+        asyncPlatformFlush(function() {
+          assert.equal(range.ratio, 50);
+          done();
+        });
+      });
+
+      test('set min', function(done) {
+        range.min = 10
+        range.max = 50;
+        range.value = 30;
+        asyncPlatformFlush(function() {
+          assert.equal(range.ratio, 50);
+          range.value = 0;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, range.min);
+            done();
+          });
+        });
+      });
+
+      test('set step', function(done) {
+        range.min = 0;
+        range.max = 10;
+        range.value = 5.1;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, 5);
+          range.step = 0.1;
+          range.value = 5.1;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, 5.1);
+            done();
+          });
+        });
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-range-behavior/test/index.html b/dashboard-ui/bower_components/iron-range-behavior/test/index.html
new file mode 100644
index 0000000000..155baeabed
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/test/index.html
@@ -0,0 +1,25 @@
+<!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>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html'
+    ]);
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-range-behavior/test/x-progressbar.html b/dashboard-ui/bower_components/iron-range-behavior/test/x-progressbar.html
new file mode 100644
index 0000000000..f99b0d9d56
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-range-behavior/test/x-progressbar.html
@@ -0,0 +1,18 @@
+<!--
+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="../iron-range-behavior.html">
+
+<script>
+  Polymer({
+    is: 'x-progressbar',
+
+    behaviors: [Polymer.IronRangeBehavior]
+  });
+</script>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/.bower.json b/dashboard-ui/bower_components/iron-validatable-behavior/.bower.json
new file mode 100644
index 0000000000..b1acc42ea1
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/.bower.json
@@ -0,0 +1,44 @@
+{
+  "name": "iron-validatable-behavior",
+  "version": "1.0.2",
+  "description": "Provides a behavior for an element that validates user input",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "iron",
+    "behavior"
+  ],
+  "main": [
+    "iron-validatable-behavior.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-validatable-behavior.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
+  "ignore": [],
+  "dependencies": {
+    "iron-meta": "PolymerElements/iron-meta#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-styles": "PolymerElements/paper-styles#^1.0.4",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.0.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.0.2",
+    "commit": "a4fc340fdb268e274f312dadedd0633b025ac3a4"
+  },
+  "_source": "git://github.com/PolymerElements/iron-validatable-behavior.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-validatable-behavior"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/.gitignore b/dashboard-ui/bower_components/iron-validatable-behavior/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/bower.json b/dashboard-ui/bower_components/iron-validatable-behavior/bower.json
new file mode 100644
index 0000000000..eaab38760b
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/bower.json
@@ -0,0 +1,35 @@
+{
+  "name": "iron-validatable-behavior",
+  "version": "1.0.2",
+  "description": "Provides a behavior for an element that validates user input",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "iron",
+    "behavior"
+  ],
+  "main": [
+    "iron-validatable-behavior.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-validatable-behavior.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-validatable-behavior",
+  "ignore": [],
+  "dependencies": {
+    "iron-meta": "PolymerElements/iron-meta#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-styles": "PolymerElements/paper-styles#^1.0.4",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/demo/cats-only.html b/dashboard-ui/bower_components/iron-validatable-behavior/demo/cats-only.html
new file mode 100644
index 0000000000..83ef9ba617
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/demo/cats-only.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="../../iron-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'cats-only',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+
+    validateObject: function(obj) {
+      var valid = true;
+      for (key in obj) {
+        if (obj[key] !== 'cats') {
+          valid = false;
+          break;
+        }
+      }
+      return valid;
+    },
+
+    validate: function(values) {
+      if (typeof values === 'object') {
+        return this.validateObject(values);
+      } else {
+        var value = Array.isArray(values) ? values.join('') : values;
+        return value.match(/^(c|ca|cat|cats)?$/) !== null;
+      }
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/demo/index.html b/dashboard-ui/bower_components/iron-validatable-behavior/demo/index.html
new file mode 100644
index 0000000000..84b96a8dc2
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/demo/index.html
@@ -0,0 +1,71 @@
+<!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 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">
+
+  <title>iron-validatable-behavior demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="cats-only.html">
+  <link rel="import" href="validatable-input.html">
+
+  <style is="custom-style">
+
+    .valid {
+      color: var(--google-green-500);
+    }
+
+    .invalid {
+      color: var(--google-red-500);
+    }
+
+  </style>
+
+</head>
+<body>
+  <div class="vertical-section vertical-section-container centered">
+  <h1>&lt;iron-validatable-behavior&gt;</h1>
+
+  <template is="dom-bind">
+
+    <cats-only></cats-only>
+
+    <section>
+
+      <p>
+        only type <code>cats</code>:
+
+        <input is="validatable-input" invalid="{{invalid}}" validator="cats-only">
+
+        <span class="valid" hidden$="[[invalid]]">valid</span>
+        <span class="invalid" hidden$="[[!invalid]]">invalid</span>
+      </p>
+
+    </section>
+
+  </template>
+
+  </div>
+
+  <script>
+
+    document.querySelector('template[is="dom-bind"]').invalid = false;
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/demo/validatable-input.html b/dashboard-ui/bower_components/iron-validatable-behavior/demo/validatable-input.html
new file mode 100644
index 0000000000..19cf477598
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/demo/validatable-input.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="../iron-validatable-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'validatable-input',
+
+    extends: 'input',
+
+    properties: {
+
+      invalid: {
+        notify: true,
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    listeners: {
+      'input': '_onInput'
+    },
+
+    _onInput: function(event) {
+      this.invalid = !this.validate(event.target.value);
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/index.html b/dashboard-ui/bower_components/iron-validatable-behavior/index.html
new file mode 100644
index 0000000000..cfaa5b1759
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/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>iron-validatable-behavior</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/iron-validatable-behavior/iron-validatable-behavior.html b/dashboard-ui/bower_components/iron-validatable-behavior/iron-validatable-behavior.html
new file mode 100644
index 0000000000..c59c47e27d
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/iron-validatable-behavior.html
@@ -0,0 +1,101 @@
+<!--
+@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.IronValidatableBehavior` to implement an element that validates user input.
+   *
+   * ### Accessiblity
+   *
+   * Changing the `invalid` property, either manually or by calling `validate()` will update the
+   * `aria-invalid` attribute.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior
+   */
+  Polymer.IronValidatableBehavior = {
+
+    properties: {
+
+      /**
+       * Namespace for this validator.
+       */
+      validatorType: {
+        type: String,
+        value: 'validator'
+      },
+
+      /**
+       * Name of the validator to use.
+       */
+      validator: {
+        type: String
+      },
+
+      /**
+       * True if the last call to `validate` is invalid.
+       */
+      invalid: {
+        notify: true,
+        reflectToAttribute: true,
+        type: Boolean,
+        value: false
+      },
+
+      _validatorMeta: {
+        type: Object
+      }
+
+    },
+
+    observers: [
+      '_invalidChanged(invalid)'
+    ],
+
+    get _validator() {
+      return this._validatorMeta && this._validatorMeta.byKey(this.validator);
+    },
+
+    ready: function() {
+      this._validatorMeta = new Polymer.IronMeta({type: this.validatorType});
+    },
+
+    _invalidChanged: function() {
+      if (this.invalid) {
+        this.setAttribute('aria-invalid', 'true');
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+    },
+
+    /**
+     * @return {boolean} True if the validator `validator` exists.
+     */
+    hasValidator: function() {
+      return this._validator != null;
+    },
+
+    /**
+     * @param {Object} values Passed to the validator's `validate()` function.
+     * @return {boolean} True if `values` is valid.
+     */
+    validate: function(values) {
+      var valid = this._validator && this._validator.validate(values);
+      this.invalid = !valid;
+      return valid;
+    }
+
+  };
+
+</script>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/test/index.html b/dashboard-ui/bower_components/iron-validatable-behavior/test/index.html
new file mode 100644
index 0000000000..05194fdd8f
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/test/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>paper-validatable-behavior 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="../../web-component-tester/browser.js"></script>
+
+  </head>
+  <body>
+
+    <script>
+
+      /* no tests */
+      WCT.loadSuites([
+        'iron-validatable-behavior.html'
+      ]);
+
+    </script>
+
+  </body>
+</html>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/test/iron-validatable-behavior.html b/dashboard-ui/bower_components/iron-validatable-behavior/test/iron-validatable-behavior.html
new file mode 100644
index 0000000000..435c034c7c
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/test/iron-validatable-behavior.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>iron-validatable-behavior 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="test-validatable.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <test-validatable></test-validatable>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('setting `invalid` sets `aria-invalid=true`', function() {
+        var node = fixture('basic');
+        node.invalid = true;
+        assert.equal(node.getAttribute('aria-invalid'), 'true', 'aria-invalid is set');
+        node.invalid = false;
+        assert.isFalse(node.hasAttribute('aria-invalid'), 'aria-invalid is unset');
+      });
+
+    });
+
+  </script>
+
+</body>
diff --git a/dashboard-ui/bower_components/iron-validatable-behavior/test/test-validatable.html b/dashboard-ui/bower_components/iron-validatable-behavior/test/test-validatable.html
new file mode 100644
index 0000000000..51513bff01
--- /dev/null
+++ b/dashboard-ui/bower_components/iron-validatable-behavior/test/test-validatable.html
@@ -0,0 +1,28 @@
+<!--
+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="../iron-validatable-behavior.html">
+
+<dom-module id="test-validatable">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'test-validatable',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ]
+
+  });
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/.bower.json b/dashboard-ui/bower_components/paper-input/.bower.json
new file mode 100644
index 0000000000..ad35939b91
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/.bower.json
@@ -0,0 +1,54 @@
+{
+  "name": "paper-input",
+  "version": "1.0.5",
+  "description": "Material design text fields",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input"
+  ],
+  "main": [
+    "paper-input.html",
+    "paper-textarea.html",
+    "paper-input-behavior.html",
+    "paper-input-container.html",
+    "paper-input-error.html",
+    "paper-input-char-counter.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-input",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.0.5",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.5",
+    "commit": "72821a081710d9d5443e7b2311ff561def260807"
+  },
+  "_source": "git://github.com/PolymerElements/paper-input.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/paper-input"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-input/.gitignore b/dashboard-ui/bower_components/paper-input/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/paper-input/all-imports.html b/dashboard-ui/bower_components/paper-input/all-imports.html
new file mode 100644
index 0000000000..0f45771864
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/all-imports.html
@@ -0,0 +1,12 @@
+<!--
+@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="paper-input.html">
+<link rel="import" href="paper-textarea.html">
diff --git a/dashboard-ui/bower_components/paper-input/bower.json b/dashboard-ui/bower_components/paper-input/bower.json
new file mode 100644
index 0000000000..a306a1087a
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/bower.json
@@ -0,0 +1,45 @@
+{
+  "name": "paper-input",
+  "version": "1.0.5",
+  "description": "Material design text fields",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "input"
+  ],
+  "main": [
+    "paper-input.html",
+    "paper-textarea.html",
+    "paper-input-behavior.html",
+    "paper-input-container.html",
+    "paper-input-error.html",
+    "paper-input-char-counter.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-input",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/paper-input/demo/index.html b/dashboard-ui/bower_components/paper-input/demo/index.html
new file mode 100644
index 0000000000..57150bd5f9
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/demo/index.html
@@ -0,0 +1,96 @@
+<!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 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">
+
+  <title>paper-input demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../paper-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="../paper-input-error.html">
+  <link rel="import" href="../paper-input-char-counter.html">
+  <link rel="import" href="../paper-textarea.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="ssn-input.html">
+
+  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+
+  <style>
+    body {
+      padding: 40px;
+    }
+  </style>
+
+</head>
+<body unresolved>
+
+  <div class="vertical center-justified layout">
+    <h4>Text input</h4>
+    <div class="vertical-section">
+      <paper-input label="label"></paper-input>
+
+      <paper-input label="password" type="password"></paper-input>
+
+      <paper-input no-label-float label="label (no-label-float)"></paper-input>
+
+      <paper-input label="disabled" disabled></paper-input>
+    </div>
+
+    <h4>Text area</h4>
+    <div class="vertical-section">
+      <paper-textarea label="textarea label"></paper-textarea>
+    </div>
+
+    <h4>Validation</h4>
+    <div class="vertical-section">
+      <paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+
+      <paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
+      <br>
+      <button onclick="validate()">Validate!</button>
+    </div>
+
+    <h4>Character counter</h4>
+    <div class="vertical-section">
+      <paper-input label="label" char-counter></paper-input>
+
+      <paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
+
+      <paper-textarea label="textarea" char-counter></paper-textarea>
+
+      <paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
+    </div>
+
+    <h4>Complex inputs</h4>
+    <div class="vertical-section">
+      <template is="dom-bind">
+        <paper-input-container always-float-label auto-validate attr-for-value="value">
+          <label>Social Security Number</label>
+          <ssn-input class="paper-input-input"></ssn-input>
+          <paper-input-error>SSN invalid!</paper-input-error>
+        </paper-input-container>
+      </template>
+    </div>
+  </div>
+  <script>
+    function validate() {
+      document.getElementById('inputForValidation').validate();
+    }
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/demo/ssn-input.html b/dashboard-ui/bower_components/paper-input/demo/ssn-input.html
new file mode 100644
index 0000000000..6037909214
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/demo/ssn-input.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="../../iron-input/iron-input.html">
+<link rel="import" href="ssn-validator.html">
+
+<dom-module id="ssn-input">
+
+  <style>
+
+    :host {
+      display: inline-block;
+    }
+
+    input[is="iron-input"] {
+      font: inherit;
+      outline: none;
+      box-shadow: none;
+      border: none;
+      width: auto;
+      text-align: center;
+    }
+
+  </style>
+
+  <template>
+
+    <ssn-validator></ssn-validator>
+
+    <input is="iron-input" maxlength="3" bind-value="{{_ssn1}}" size="3" aria-label="First 3 digits of social security number">
+    -
+    <input is="iron-input" maxlength="2" bind-value="{{_ssn2}}" size="2" aria-label="Middle 2 digits of social security number">
+    -
+    <input is="iron-input" maxlength="4" bind-value="{{_ssn3}}" size="4" aria-label="Last 4 digits of social security number">
+
+  </template>
+
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+
+    is: 'ssn-input',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    properties: {
+
+      value: {
+        notify: true,
+        type: String
+      },
+
+      _ssn1: {
+        type: String
+      },
+
+      _ssn2: {
+        type: String
+      },
+
+      _ssn3: {
+        type: String
+      },
+
+      validator: {
+        type: String,
+        value: 'ssn-validator'
+      }
+
+    },
+
+    observers: [
+      '_computeValue(_ssn1,_ssn2,_ssn3)'
+    ],
+
+    _computeValue: function(ssn1, ssn2, ssn3) {
+      this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
+    }
+
+  })
+})();
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/demo/ssn-validator.html b/dashboard-ui/bower_components/paper-input/demo/ssn-validator.html
new file mode 100644
index 0000000000..4ab92f77ab
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/demo/ssn-validator.html
@@ -0,0 +1,31 @@
+<!--
+@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-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'ssn-validator',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+
+    validate: function(value) {
+      // this regex validates incomplete ssn's (by design)
+      return !value || value.match(/^[0-9]{0,3}-[0-9]{0,2}-[0-9]{0,4}$/);
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/hero.svg b/dashboard-ui/bower_components/paper-input/hero.svg
new file mode 100644
index 0000000000..146ffeac67
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/hero.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="49" y="53" width="2" height="18"/>
+	<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/dashboard-ui/bower_components/paper-input/index.html b/dashboard-ui/bower_components/paper-input/index.html
new file mode 100644
index 0000000000..e6c9fadcee
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/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, initial-scale=1.0">
+
+  <title>paper-input</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page src="all-imports.html"></iron-component-page>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-addon-behavior.html b/dashboard-ui/bower_components/paper-input/paper-input-addon-behavior.html
new file mode 100644
index 0000000000..0b021a5dd4
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input-addon-behavior.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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+  /**
+   * Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
+   * add-on appears below the input, and may display information based on the input value and
+   * validity such as a character counter or an error message.
+   * @polymerBehavior
+   */
+  Polymer.PaperInputAddonBehavior = {
+
+    hostAttributes: {
+      'add-on': ''
+    },
+
+    attached: function() {
+      this.fire('addon-attached');
+    },
+
+    /**
+     * The function called by `<paper-input-container>` when the input value or validity changes.
+     * @param {{
+     *   inputElement: (Node|undefined),
+     *   value: (string|undefined),
+     *   invalid: (boolean|undefined)
+     * }} state All properties are optional -
+     *     inputElement: The input element.
+     *     value: The input value.
+     *     invalid: True if the input value is invalid.
+     */
+    update: function(state) {
+    }
+
+  };
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-behavior.html b/dashboard-ui/bower_components/paper-input/paper-input-behavior.html
new file mode 100644
index 0000000000..0afbc832c4
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input-behavior.html
@@ -0,0 +1,328 @@
+<!--
+@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-behaviors/iron-control-state.html">
+
+<script>
+
+  /**
+   * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
+   * behavior is implemented by `<paper-input>`. It exposes a number of properties from
+   * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
+   * template.
+   *
+   * The input element can be accessed by the `inputElement` property if you need to access
+   * properties or methods that are not exposed.
+   * @polymerBehavior Polymer.PaperInputBehavior
+   */
+  Polymer.PaperInputBehaviorImpl = {
+
+    properties: {
+
+      /**
+       * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
+       */
+      label: {
+        type: String
+      },
+
+      /**
+       * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
+       * property, or the value property of your input that is `notify:true`.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+
+      /**
+       * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
+       * and the input's `disabled` property.
+       */
+      disabled: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
+       * and the input's `invalid` property.
+       */
+      invalid: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input. Bind this to the
+       * `<input is="iron-input">`'s `preventInvalidInput` property.
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
+       * `<input is="iron-input">`'s `allowedPattern` property.
+       */
+      allowedPattern: {
+        type: String
+      },
+
+      /**
+       * The type of the input. The supported types are `text`, `number` and `password`. Bind this
+       * to the `<input is="iron-input">`'s `type` property.
+       */
+      type: {
+        type: String
+      },
+
+      /**
+       * The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
+       * to the `<input is="iron-input">`'s `list` property.
+       */
+      list: {
+        type: String
+      },
+
+      /**
+       * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
+       * `pattern` property.
+       */
+      pattern: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
+       * `required` property.
+       */
+      required: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
+       * `maxlength` property.
+       */
+      maxlength: {
+        type: Number
+      },
+
+      /**
+       * The error message to display when the input is invalid. Bind this to the
+       * `<paper-input-error>`'s content, if using.
+       */
+      errorMessage: {
+        type: String
+      },
+
+      /**
+       * Set to true to show a character counter.
+       */
+      charCounter: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
+       * `noLabelFloat` property.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
+       * `alwaysFloatLabel` property.
+       */
+      alwaysFloatLabel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
+       * `autoValidate` property.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
+       * property.
+       */
+      validator: {
+        type: String
+      },
+
+      // HTMLInputElement attributes for binding if needed
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
+       */
+      autocomplete: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `autofocus` property.
+       */
+      autofocus: {
+        type: Boolean
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `inputmode` property.
+       */
+      inputmode: {
+        type: String
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `minlength` property.
+       */
+      minlength: {
+        type: Number
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `name` property.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * A placeholder string in addition to the label. If this is set, the label will always float.
+       */
+      placeholder: {
+        type: String,
+        // need to set a default so _computeAlwaysFloatLabel is run
+        value: ''
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `readonly` property.
+       */
+      readonly: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `size` property.
+       */
+      size: {
+        type: Number
+      },
+
+      _ariaDescribedBy: {
+        type: String,
+        value: ''
+      }
+
+    },
+
+    listeners: {
+      'addon-attached': '_onAddonAttached'
+    },
+
+    /**
+     * Returns a reference to the input element.
+     */
+    get inputElement() {
+      return this.$.input;
+    },
+
+    attached: function() {
+      this._updateAriaLabelledBy();
+    },
+
+    _appendStringWithSpace: function(str, more) {
+      if (str) {
+        str = str + ' ' + more;
+      } else {
+        str = more;
+      }
+      return str;
+    },
+
+    _onAddonAttached: function(event) {
+      var target = event.path ? event.path[0] : event.target;
+      if (target.id) {
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
+      } else {
+        var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
+        target.id = id;
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
+      }
+    },
+
+    /**
+     * Validates the input element and sets an error style if needed.
+     */
+     validate: function() {
+       return this.inputElement.validate();
+     },
+
+    /**
+     * Restores the cursor to its original position after updating the value.
+     * @param {string} newValue The value that should be saved.
+     */
+    updateValueAndPreserveCaret: function(newValue) {
+      // Not all elements might have selection, and even if they have the
+      // right properties, accessing them might throw an exception (like for
+      // <input type=number>)
+      try {
+        var start = this.inputElement.selectionStart;
+        this.value = newValue;
+
+        // The cursor automatically jumps to the end after re-setting the value,
+        // so restore it to its original position.
+        this.inputElement.selectionStart = start;
+        this.inputElement.selectionEnd = start;
+      } catch (e) {
+        // Just set the value and give up on the caret.
+        this.value = newValue;
+      }
+    },
+
+    _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
+      return placeholder || alwaysFloatLabel;
+    },
+
+    _updateAriaLabelledBy: function() {
+      var label = Polymer.dom(this.root).querySelector('label');
+      if (!label) {
+        this._ariaLabelledBy = '';
+        return;
+      }
+      var labelledBy;
+      if (label.id) {
+        labelledBy = label.id;
+      } else {
+        labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
+        label.id = labelledBy;
+      }
+      this._ariaLabelledBy = labelledBy;
+    }
+
+  };
+
+  Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-char-counter.html b/dashboard-ui/bower_components/paper-input/paper-input-char-counter.html
new file mode 100644
index 0000000000..566f8c63ff
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input-char-counter.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="../paper-styles/paper-styles.html">
+<link rel="import" href="paper-input-addon-behavior.html">
+
+<!--
+`<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
+shows the number of characters entered in the input and the max length if it is specified.
+
+    <paper-input-container>
+      <input is="iron-input" maxlength="20">
+      <paper-input-char-counter></paper-input-char-counter>
+    </paper-input-container>
+
+### Styling
+
+The following mixin is available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-input-char-counter` | Mixin applied to the element | `{}`
+-->
+<dom-module id="paper-input-char-counter">
+
+  <style>
+
+    :host {
+      display: inline-block;
+      float: right;
+
+      @apply(--paper-font-caption);
+      @apply(--paper-input-char-counter);
+    }
+
+  </style>
+
+  <template>
+
+    <span>[[_charCounterStr]]</span>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-char-counter',
+
+    behaviors: [
+      Polymer.PaperInputAddonBehavior
+    ],
+
+    properties: {
+
+      _charCounterStr: {
+        type: String,
+        value: '0'
+      }
+
+    },
+
+    update: function(state) {
+      if (!state.inputElement) {
+        return;
+      }
+
+      state.value = state.value || '';
+
+      // Account for the textarea's new lines.
+      var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
+
+      if (state.inputElement.hasAttribute('maxlength')) {
+        str += '/' + state.inputElement.getAttribute('maxlength');
+      }
+      this._charCounterStr = str;
+    }
+
+  });
+
+})();
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-container.html b/dashboard-ui/bower_components/paper-input/paper-input-container.html
new file mode 100644
index 0000000000..e9088c26df
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input-container.html
@@ -0,0 +1,506 @@
+<!--
+@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/paper-styles.html">
+
+<!--
+`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
+`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
+counter, used to implement Material Design text fields.
+
+For example:
+
+    <paper-input-container>
+      <label>Your name</label>
+      <input is="iron-input">
+    </paper-input-container>
+
+### Listening for input changes
+
+By default, it listens for changes on the `bind-value` attribute on its children nodes and perform
+tasks such as auto-validating and label styling when the `bind-value` changes. You can configure
+the attribute it listens to with the `attr-for-value` attribute.
+
+### Using a custom input element
+
+You can use a custom input element in a `<paper-input-container>`, for example to implement a
+compound input field like a social security number input. The custom input element should have the
+`paper-input-input` class, have a `notify:true` value property and optionally implements
+`Polymer.IronValidatableBehavior` if it is validatble.
+
+    <paper-input-container attr-for-value="ssn-value">
+      <label>Social security number</label>
+      <ssn-input class="paper-input-input"></ssn-input>
+    </paper-input-container>
+
+### Validation
+
+If the `auto-validate` attribute is set, the input container will validate the input and update
+the container styling when the input value changes.
+
+### Add-ons
+
+Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and
+implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value
+or validity changes, and may implement functionality such as error messages or character counters.
+They appear at the bottom of the input.
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
+`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
+`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500`
+`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
+`--paper-input-container` | Mixin applied to the container | `{}`
+`--paper-input-container-label` | Mixin applied to the label | `{}`
+`--paper-input-container-input` | Mixin applied to the input | `{}`
+
+This element is `display:block` by default, but you can set the `inline` attribute to make it
+`display:inline-block`.
+-->
+<dom-module id="paper-input-container">
+
+  <style>
+
+    :host {
+      display: block;
+      padding: 8px 0;
+
+      @apply(--paper-input-container);
+    }
+
+    :host[inline] {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.33;
+    }
+
+    .floated-label-placeholder {
+      @apply(--paper-font-caption);
+    }
+
+    .underline {
+      position: relative;
+    }
+
+    .focused-line {
+      height: 2px;
+
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      -webkit-transform: scale3d(0,1,1);
+      transform: scale3d(0,1,1);
+
+      background: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+    .underline.is-highlighted .focused-line {
+      -webkit-transform: none;
+      transform: none;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .underline.is-invalid .focused-line {
+      background: var(--paper-input-container-invalid-color, --google-red-500);
+
+      -webkit-transform: none;
+      transform: none;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .unfocused-line {
+      height: 1px;
+      background: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    :host([disabled]) .unfocused-line {
+      border-bottom: 1px dashed;
+      border-color: var(--paper-input-container-color, --secondary-text-color);
+      background: transparent;
+    }
+
+    .input-content {
+      position: relative;
+    }
+
+    .input-content ::content label,
+    .input-content ::content .paper-input-label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      font: inherit;
+      color: var(--paper-input-container-color, --secondary-text-color);
+
+      @apply(--paper-font-subhead);
+      @apply(--paper-input-container-label);
+    }
+
+    .input-content.label-is-floating ::content label,
+    .input-content.label-is-floating ::content .paper-input-label {
+      -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
+      transform: translate3d(0, -75%, 0) scale(0.75);
+      -webkit-transform-origin: left top;
+      transform-origin: left top;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .input-content.label-is-highlighted ::content label,
+    .input-content.label-is-highlighted ::content .paper-input-label {
+      color: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+    .input-content.is-invalid ::content label,
+    .input-content.is-invalid ::content .paper-input-label {
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+    }
+
+    .input-content.label-is-hidden ::content label,
+    .input-content.label-is-hidden ::content .paper-input-label {
+      visibility: hidden;
+    }
+
+    .input-content ::content input,
+    .input-content ::content textarea,
+    .input-content ::content iron-autogrow-textarea,
+    .input-content ::content .paper-input-input {
+      position: relative; /* to make a stacking context */
+      outline: none;
+      box-shadow: none;
+      padding: 0;
+      width: 100%;
+      background: transparent;
+      border: none;
+      color: var(--paper-input-container-input-color, --primary-text-color);
+
+      @apply(--paper-font-subhead);
+      @apply(--paper-input-container-input);
+    }
+
+    /* Firefox sets a min-width on the input, which can cause layout issues */
+    .input-content ::content input {
+      min-width: 0;
+    }
+
+    .input-content ::content textarea {
+      resize: none;
+    }
+
+    .add-on-content.is-invalid ::content * {
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+    }
+
+    .add-on-content.is-highlighted ::content * {
+      color: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+  </style>
+
+  <template>
+
+    <template is="dom-if" if="[[!noLabelFloat]]">
+      <div class="floated-label-placeholder">&nbsp;</div>
+    </template>
+
+    <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
+      <content select=":not([add-on])"></content>
+    </div>
+
+    <div class$="[[_computeUnderlineClass(focused,invalid)]]">
+      <div class="unfocused-line fit"></div>
+      <div class="focused-line fit"></div>
+    </div>
+
+    <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
+      <content id="addOnContent" select="[add-on]"></content>
+    </div>
+
+  </template>
+
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-container',
+
+    properties: {
+
+      /**
+       * Set to true to disable the floating label. The label disappears when the input value is
+       * not null.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to always float the floating label.
+       */
+      alwaysFloatLabel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The attribute to listen for value changes on.
+       */
+      attrForValue: {
+        type: String,
+        value: 'bind-value'
+      },
+
+      /**
+       * Set to true to auto-validate the input value when it changes.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input is invalid. This property is set automatically when the input value
+       * changes if auto-validating, or when the `iron-input-valid` event is heard from a child.
+       */
+      invalid: {
+        observer: '_invalidChanged',
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input has focus.
+       */
+      focused: {
+        readOnly: true,
+        type: Boolean,
+        value: false
+      },
+
+      _addons: {
+        type: Array
+        // do not set a default value here intentionally - it will be initialized lazily when a
+        // distributed child is attached, which may occur before configuration for this element
+        // in polyfill.
+      },
+
+      _inputHasContent: {
+        type: Boolean,
+        value: false
+      },
+
+      _inputSelector: {
+        type: String,
+        value: 'input,textarea,.paper-input-input'
+      },
+
+      _boundOnFocus: {
+        type: Function,
+        value: function() {
+          return this._onFocus.bind(this);
+        }
+      },
+
+      _boundOnBlur: {
+        type: Function,
+        value: function() {
+          return this._onBlur.bind(this);
+        }
+      },
+
+      _boundOnInput: {
+        type: Function,
+        value: function() {
+          return this._onInput.bind(this);
+        }
+      },
+
+      _boundValueChanged: {
+        type: Function,
+        value: function() {
+          return this._onValueChanged.bind(this);
+        }
+      }
+
+    },
+
+    listeners: {
+      'addon-attached': '_onAddonAttached',
+      'iron-input-validate': '_onIronInputValidate'
+    },
+
+    get _valueChangedEvent() {
+      return this.attrForValue + '-changed';
+    },
+
+    get _propertyForValue() {
+      return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
+    },
+
+    get _inputElement() {
+      return Polymer.dom(this).querySelector(this._inputSelector);
+    },
+
+    ready: function() {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      this.addEventListener('focus', this._boundOnFocus, true);
+      this.addEventListener('blur', this._boundOnBlur, true);
+      if (this.attrForValue) {
+        this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
+      } else {
+        this.addEventListener('input', this._onInput);
+      }
+    },
+
+    attached: function() {
+      this._handleValue(this._inputElement);
+    },
+
+    _onAddonAttached: function(event) {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      var target = event.target;
+      if (this._addons.indexOf(target) === -1) {
+        this._addons.push(target);
+        if (this.isAttached) {
+          this._handleValue(this._inputElement);
+        }
+      }
+    },
+
+    _onFocus: function() {
+      this._setFocused(true);
+    },
+
+    _onBlur: function() {
+      this._setFocused(false);
+    },
+
+    _onInput: function(event) {
+      this._handleValue(event.target);
+    },
+
+    _onValueChanged: function(event) {
+      this._handleValue(event.target);
+    },
+
+    _handleValue: function(inputElement) {
+      var value = inputElement[this._propertyForValue] || inputElement.value;
+
+      if (this.autoValidate) {
+        var valid;
+        if (inputElement.validate) {
+          valid = inputElement.validate(value);
+        } else {
+          valid = inputElement.checkValidity();
+        }
+        this.invalid = !valid;
+      }
+
+      // type="number" hack needed because this.value is empty until it's valid
+      if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) {
+        this._inputHasContent = true;
+      } else {
+        this._inputHasContent = false;
+      }
+
+      this.updateAddons({
+        inputElement: inputElement,
+        value: value,
+        invalid: this.invalid
+      });
+    },
+
+    _onIronInputValidate: function(event) {
+      this.invalid = this._inputElement.invalid;
+    },
+
+    _invalidChanged: function() {
+      if (this._addons) {
+        this.updateAddons({invalid: this.invalid});
+      }
+    },
+
+    /**
+     * Call this to update the state of add-ons.
+     * @param {Object} state Add-on state.
+     */
+    updateAddons: function(state) {
+      for (var addon, index = 0; addon = this._addons[index]; index++) {
+        addon.update(state);
+      }
+    },
+
+    _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
+      var cls = 'input-content';
+      if (!noLabelFloat) {
+        if (alwaysFloatLabel || _inputHasContent) {
+          cls += ' label-is-floating';
+          if (invalid) {
+            cls += ' is-invalid';
+          } else if (focused) {
+            cls += " label-is-highlighted";
+          }
+        }
+      } else {
+        if (_inputHasContent) {
+          cls += ' label-is-hidden';
+        }
+      }
+      return cls;
+    },
+
+    _computeUnderlineClass: function(focused, invalid) {
+      var cls = 'underline';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    },
+
+    _computeAddOnContentClass: function(focused, invalid) {
+      var cls = 'add-on-content';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    }
+
+  });
+
+})();
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input-error.html b/dashboard-ui/bower_components/paper-input/paper-input-error.html
new file mode 100644
index 0000000000..c034e9624c
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input-error.html
@@ -0,0 +1,99 @@
+<!--
+@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/paper-styles.html">
+<link rel="import" href="paper-input-addon-behavior.html">
+
+<!--
+`<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is
+displayed when the `<paper-input-container>` is `invalid`.
+
+    <paper-input-container>
+      <input is="iron-input" pattern="[0-9]*">
+      <paper-input-error>Only numbers are allowed!</paper-input-error>
+    </paper-input-container>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
+`--paper-input-error`                   | Mixin applied to the error        | `{}`
+-->
+<dom-module id="paper-input-error">
+
+  <style>
+
+    :host {
+      /* need to use display: none for role="alert" */
+      display: none;
+      float: left;
+
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+
+      @apply(--paper-font-caption);
+      @apply(--paper-input-error);
+    }
+
+    :host([invalid]) {
+      display: inline-block;
+    };
+
+  </style>
+
+  <template>
+
+    <content></content>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-error',
+
+    behaviors: [
+      Polymer.PaperInputAddonBehavior
+    ],
+
+    hostAttributes: {
+      'role': 'alert'
+    },
+
+    properties: {
+
+      /**
+       * True if the error is showing.
+       */
+      invalid: {
+        readOnly: true,
+        reflectToAttribute: true,
+        type: Boolean
+      }
+
+    },
+
+    update: function(state) {
+      this._setInvalid(state.invalid);
+    }
+
+  })
+
+})();
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-input.html b/dashboard-ui/bower_components/paper-input/paper-input.html
new file mode 100644
index 0000000000..5aa4a6eec3
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-input.html
@@ -0,0 +1,127 @@
+<!--
+@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-input/iron-input.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="paper-input-behavior.html">
+<link rel="import" href="paper-input-container.html">
+<link rel="import" href="paper-input-error.html">
+<link rel="import" href="paper-input-char-counter.html">
+
+<!--
+`<paper-input>` is a single-line text field with Material Design styling.
+
+    <paper-input label="Input label"></paper-input>
+
+It may include an optional error message or character counter.
+
+    <paper-input error-message="Invalid input!" label="Input label"></paper-input>
+    <paper-input char-counter label="Input label"></paper-input>
+
+See `Polymer.PaperInputBehavior` for more API docs.
+
+### Styling
+
+See `Polymer.PaperInputContainer` for a list of custom properties used to
+style this element.
+
+@group Paper Elements
+@element paper-input
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-input">
+
+  <style>
+
+    :host {
+      display: block;
+    }
+
+    input::-webkit-input-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input:-moz-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input::-moz-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input:-ms-input-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+  </style>
+
+  <template>
+
+    <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
+
+      <label hidden$="[[!label]]">[[label]]</label>
+
+      <input is="iron-input" id="input"
+        aria-labelledby$="[[_ariaLabelledBy]]"
+        aria-describedby$="[[_ariaDescribedBy]]"
+        disabled$="[[disabled]]"
+        bind-value="{{value}}"
+        invalid="{{invalid}}"
+        prevent-invalid-input="[[preventInvalidInput]]"
+        allowed-pattern="[[allowedPattern]]"
+        validator="[[validator]]"
+        type$="[[type]]"
+        pattern$="[[pattern]]"
+        maxlength$="[[maxlength]]"
+        required$="[[required]]"
+        autocomplete$="[[autocomplete]]"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        minlength$="[[minlength]]"
+        name$="[[name]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        list$="[[list]]"
+        size$="[[size]]">
+
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error>[[errorMessage]]</paper-input-error>
+      </template>
+
+      <template is="dom-if" if="[[charCounter]]">
+        <paper-input-char-counter></paper-input-char-counter>
+      </template>
+
+    </paper-input-container>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input',
+
+    behaviors: [
+      Polymer.PaperInputBehavior,
+      Polymer.IronControlState
+    ]
+
+  })
+
+})();
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/paper-textarea.html b/dashboard-ui/bower_components/paper-input/paper-textarea.html
new file mode 100644
index 0000000000..d47a5b5071
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/paper-textarea.html
@@ -0,0 +1,106 @@
+<!--
+@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-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="paper-input-behavior.html">
+<link rel="import" href="paper-input-container.html">
+<link rel="import" href="paper-input-error.html">
+<link rel="import" href="paper-input-char-counter.html">
+
+<!--
+`<paper-textarea>` is a multi-line text field with Material Design styling.
+
+    <paper-textarea label="Textarea label"></paper-textarea>
+
+See `Polymer.PaperInputBehavior` for more API docs.
+
+### Validation
+
+Currently only `required` and `maxlength` validation is supported.
+
+### Styling
+
+See `Polymer.PaperInputContainer` for a list of custom properties used to
+style this element.
+-->
+
+<dom-module id="paper-textarea">
+  <template>
+
+    <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
+
+      <label hidden$="[[!label]]">[[label]]</label>
+
+      <iron-autogrow-textarea id="input" class="paper-input-input"
+        bind-value="{{value}}"
+        autocomplete$="[[autocomplete]]"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        name$="[[name]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        required$="[[required]]"
+        maxlength$="[[maxlength]]"></iron-autogrow-textarea>
+
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error>[[errorMessage]]</paper-input-error>
+      </template>
+
+      <template is="dom-if" if="[[charCounter]]">
+        <paper-input-char-counter></paper-input-char-counter>
+      </template>
+
+    </paper-input-container>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-textarea',
+
+    behaviors: [
+      Polymer.PaperInputBehavior,
+      Polymer.IronFormElementBehavior
+    ],
+
+    properties: {
+
+      _ariaLabelledBy: {
+        observer: '_ariaLabelledByChanged',
+        type: String
+      },
+
+      _ariaDescribedBy: {
+        observer: '_ariaDescribedByChanged',
+        type: String
+      }
+
+    },
+
+    _ariaLabelledByChanged: function(ariaLabelledBy) {
+      this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
+    },
+
+    _ariaDescribedByChanged: function(ariaDescribedBy) {
+      this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
+    }
+
+  });
+
+})();
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/test/index.html b/dashboard-ui/bower_components/paper-input/test/index.html
new file mode 100644
index 0000000000..cfed0b120d
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 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>paper-input tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'paper-input.html',
+      'paper-textarea.html',
+      'paper-input-container.html',
+      'paper-input-error.html',
+      'paper-input-char-counter.html'
+    ]);
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/test/letters-only.html b/dashboard-ui/bower_components/paper-input/test/letters-only.html
new file mode 100644
index 0000000000..bfc301c3e4
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/letters-only.html
@@ -0,0 +1,30 @@
+<!--
+@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-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+  Polymer({
+
+    is: 'letters-only',
+
+    behaviors: [
+      Polymer.IronValidatorBehavior
+    ],
+
+    validate: function(value) {
+      return !value || value.match(/^[a-zA-Z]*$/) !== null;
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-input/test/paper-input-char-counter.html b/dashboard-ui/bower_components/paper-input/test/paper-input-char-counter.html
new file mode 100644
index 0000000000..6986aa7ff5
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/paper-input-char-counter.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>paper-input-counter 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>
+
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="../paper-input-char-counter.html">
+  <link rel="import" href="../paper-textarea.html">
+
+</head>
+<body>
+
+  <test-fixture id="counter">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i" value="foobar">
+        <paper-input-char-counter id="c"></paper-input-char-counter>
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="counter-with-max">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i" value="foobar" maxlength="10">
+        <paper-input-char-counter id="c"></paper-input-char-counter>
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="textarea">
+    <template>
+      <paper-textarea char-counter value="foobar"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="textarea-with-max">
+    <template>
+      <paper-textarea char-counter value="foobar" maxlength="100"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('character counter shows the value length', function() {
+        var container = fixture('counter');
+        var input = Polymer.dom(container).querySelector('#i');
+        var counter = Polymer.dom(container).querySelector('#c');
+        assert.equal(counter._charCounterStr, input.value.length, 'character counter shows input value length');
+      });
+
+      test('character counter shows the value length with maxlength', function() {
+        var container = fixture('counter-with-max');
+        var input = Polymer.dom(container).querySelector('#i');
+        var counter = Polymer.dom(container).querySelector('#c');
+        assert.equal(counter._charCounterStr, input.value.length + '/' + input.maxLength, 'character counter shows input value length and maxLength');
+      });
+
+      test('character counter shows the value length with maxlength', function() {
+        var input = fixture('textarea-with-max');
+        forceXIfStamp(input);
+
+        var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter');
+        assert.ok(counter, 'paper-input-char-counter exists');
+
+        assert.equal(counter._charCounterStr, input.value.length + '/' + input.inputElement.textarea.getAttribute('maxlength'), 'character counter shows input value length and maxLength');
+      });
+
+      test('character counter counts new lines in textareas correctly', function() {
+        var input = fixture('textarea');
+        input.value = 'foo\nbar';
+        forceXIfStamp(input);
+
+        var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
+        assert.ok(counter, 'paper-input-char-counter exists');
+
+        // A new line counts as two characters.
+        assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/test/paper-input-container.html b/dashboard-ui/bower_components/paper-input/test/paper-input-container.html
new file mode 100644
index 0000000000..0b7acf87c8
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/paper-input-container.html
@@ -0,0 +1,237 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>paper-input-container 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="../../iron-input/iron-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="letters-only.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="has-value">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="no-float-has-value">
+    <template>
+      <paper-input-container no-label-float>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="always-float">
+    <template>
+      <paper-input-container always-float-label>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="auto-validate-numbers">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="manual-validate-numbers">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <letters-only></letters-only>
+
+  <test-fixture id="auto-validate-validator">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="auto-validate-validator-has-invalid-value">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" validator="letters-only" value="123123">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    function getTransform(node) {
+      var style = getComputedStyle(node);
+      return style.transform || style.webkitTransform;
+    }
+
+    suite('label position', function() {
+
+      test('label is visible by default', function() {
+        var container = fixture('basic');
+        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
+      });
+
+      test('label is floated if value is initialized to not null', function() {
+        var container = fixture('has-value');
+        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+      });
+
+      test('label is invisible if no-label-float and value is initialized to not null', function() {
+        var container = fixture('no-float-has-value');
+        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden');
+      });
+
+      test('label is floated if always-float-label is true', function() {
+        var container = fixture('always-float');
+        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+      })
+
+    });
+
+    suite('focused styling', function() {
+
+      test('label is colored when input is focused and has value', function(done) {
+        var container = fixture('has-value');
+        var label = Polymer.dom(container).querySelector('#l');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        input.focus();
+        // 'focus' event isn't firing on windows ff for some reason when you call focus()
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.equal(document.activeElement, input, 'input is focused');
+          assert.isTrue(container.focused, 'focused is true');
+          assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus');
+          done();
+        });
+      });
+
+      test('label is not colored when input is focused and has null value', function(done) {
+        var container = fixture('basic');
+        var label = Polymer.dom(container).querySelector('#l');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        input.focus();
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value');
+          done();
+        });
+      });
+
+      test('underline is colored when input is focused', function(done) {
+        var container = fixture('basic');
+        var input = Polymer.dom(container).querySelector('#i');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+        assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused');
+        input.focus();
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.equal(document.activeElement, input, 'input is focused');
+          assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused');
+          done();
+        });
+      });
+
+    });
+
+    suite('validation', function() {
+
+      test('styled when the input is set to an invalid value with auto-validate', function() {
+        var container = fixture('auto-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+
+        input.bindValue = 'foobar';
+
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+
+      test('styled when the input is set to an invalid value with auto-validate, with validator', function() {
+        var container = fixture('auto-validate-validator');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+
+        input.bindValue = '123123';
+
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+
+      test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() {
+        var container = fixture('auto-validate-validator-has-invalid-value');
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
+      });
+
+      test('styled when the input is set to an invalid value with manual validation', function() {
+        var container = fixture('manual-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+
+        input.bindValue = 'foobar';
+        input.validate();
+
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/test/paper-input-error.html b/dashboard-ui/bower_components/paper-input/test/paper-input-error.html
new file mode 100644
index 0000000000..2753b857cc
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/paper-input-error.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>paper-input-error 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="../../iron-input/iron-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="../paper-input-error.html">
+
+</head>
+<body>
+
+  <paper-input-container id="container">
+    <input is="iron-input">
+    <paper-input-error>error</paper-input-error>
+  </paper-input-container>
+
+  <test-fixture id="auto-validate-numbers">
+    <template>
+      <paper-input-container auto-validate attr-for-value="bind-value">
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+        <paper-input-error id="e">error</paper-input-error>
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('error message only appears when input is invalid', function() {
+        var container = fixture('auto-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var error = Polymer.dom(container).querySelector('#e');
+        assert.equal(getComputedStyle(error).display, 'none', 'error is display:none');
+        input.bindValue = 'foobar';
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+
+      test('error message add on is registered', function() {
+        var container = document.getElementById('container');
+        assert.isTrue(container._addons && container._addons.length === 1, 'add on is registered');
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/test/paper-input.html b/dashboard-ui/bower_components/paper-input/test/paper-input.html
new file mode 100644
index 0000000000..1c4dc25a3a
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/paper-input.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>paper-input 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>
+
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-input.html">
+  <link rel="import" href="letters-only.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <paper-input></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="label">
+    <template>
+      <paper-input label="foo"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="error">
+    <template>
+      <paper-input auto-validate pattern="[0-9]*" value="foobar" error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="required">
+    <template>
+      <paper-input auto-validate required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="required-no-auto-validate">
+    <template>
+      <paper-input required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+
+
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-input auto-validate char-counter required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="char-counter">
+    <template>
+      <paper-input char-counter value="foobar"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="always-float-label">
+    <template>
+      <paper-input always-float-label label="foo"></paper-input>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="placeholder">
+    <template>
+      <paper-input label="foo" placeholder="bar"></paper-input>
+    </template>
+  </test-fixture>
+
+  <letters-only></letters-only>
+
+  <test-fixture id="validator">
+    <template>
+      <paper-input value="123123" validator="letters-only" auto-validate></paper-input>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('setting value sets the input value', function() {
+        var input = fixture('basic');
+        input.value = 'foobar';
+        assert.equal(input.inputElement.value, input.value, 'inputElement.value equals input.value');
+      });
+
+      test('placeholder does not overlap label', function() {
+        var input = fixture('placeholder');
+        assert.equal(input.inputElement.placeholder, input.placeholder, 'inputElement.placeholder equals input.placeholder');
+        assert.equal(input.noLabelFloat, false);
+        var floatingLabel = Polymer.dom(Polymer.dom(input.root).querySelector('paper-input-container').root).querySelector('.label-is-floating');
+        assert.ok(floatingLabel);
+      });
+
+      test('always-float-label attribute works without placeholder', function() {
+        var input = fixture('always-float-label');
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
+      });
+
+      test('error message is displayed', function() {
+        var input = fixture('error');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+
+      test('character counter is displayed', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
+        assert.ok(counter, 'paper-input-char-counter exists');
+        assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
+      });
+
+      test('validator is used', function() {
+        var input = fixture('validator');
+        assert.ok(input.inputElement.invalid, 'input is invalid');
+      });
+
+      test('caret position is preserved', function() {
+        var input = fixture('basic');
+        var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
+        input.value = 'nananana';
+        ironInput.selectionStart = 2;
+        ironInput.selectionEnd = 2;
+
+        input.updateValueAndPreserveCaret('nanananabatman');
+
+        assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
+      });
+
+    });
+
+    suite('focus/blur events', function() {
+      var input;
+
+      setup(function() {
+        input = fixture('basic');
+      });
+
+      test('focus/blur events fired on host element', function(done) {
+        var nFocusEvents = 0;
+        var nBlurEvents = 0;
+        input.addEventListener('focus', function() {
+          nFocusEvents += 1;
+          // setTimeout to wait for potentially more, erroneous events
+          setTimeout(function() {
+            assert.equal(nFocusEvents, 1, 'one focus event fired');
+            input.inputElement.blur();
+          });
+        });
+        input.addEventListener('blur', function() {
+          nBlurEvents += 1;
+          // setTimeout to wait for potentially more, erroneous events
+          setTimeout(function() {
+            assert.equal(nBlurEvents, 1, 'one blur event fired');
+            done();
+          });
+        });
+        input.inputElement.focus();
+      });
+
+    });
+
+    suite('validation', function() {
+
+      test('invalid attribute updated after calling validate()', function() {
+        var input = fixture('required-no-auto-validate');
+        forceXIfStamp(input);
+        input.validate();
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+        assert.isTrue(input.invalid, 'invalid is true');
+      });
+
+    });
+
+    suite('a11y', function() {
+
+      test('has aria-labelledby', function() {
+        var input = fixture('label');
+        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-input/test/paper-textarea.html b/dashboard-ui/bower_components/paper-input/test/paper-textarea.html
new file mode 100644
index 0000000000..7371a778d5
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-input/test/paper-textarea.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <title>paper-textarea 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>
+
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-textarea.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <paper-textarea></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="label">
+    <template>
+      <paper-textarea label="foo"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="char-counter">
+    <template>
+      <paper-textarea char-counter></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="required">
+    <template>
+      <paper-textarea auto-validate required error-message="error"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-textarea auto-validate char-counter required error-message="error"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="always-float-label">
+    <template>
+      <paper-textarea always-float-label label="label"></paper-textarea>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic', function() {
+
+      test('setting value sets the input value', function() {
+        var input = fixture('basic');
+        input.value = 'foobar';
+        assert.equal(input.inputElement.bindValue, input.value, 'inputElement value equals input.value');
+      });
+
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+
+      test('caret position is preserved', function() {
+        var input = fixture('basic');
+        var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea');
+        input.value = 'nananana';
+        ironTextarea.selectionStart = 2;
+        ironTextarea.selectionEnd = 2;
+
+        input.updateValueAndPreserveCaret('nanananabatman');
+
+        assert.equal(ironTextarea.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironTextarea.selectionEnd, 2, 'selectionEnd is preserved');
+      });
+
+      test('input attributes are bound to textarea', function() {
+        var input = fixture('basic');
+        var attrs = {
+          'autocomplete': 'true',
+          'autofocus': true,
+          'inputmode': 'number',
+          'name': 'foo',
+          'placeholder': 'bar',
+          'readonly': true,
+          'required': true,
+          'maxlength': 3
+        };
+        for (var attr in attrs) {
+          input[attr] = attrs[attr];
+        }
+        for (var attr in attrs) {
+          var inputAttr = input.inputElement.getAttribute(attr);
+          if (typeof attrs[attr] === 'boolean') {
+            assert.equal(inputAttr !== null, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr !== null + ')');
+          } else {
+            assert.equal(inputAttr, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr + ')');
+          }
+        }
+      });
+
+      test('always-float-label attribute works', function() {
+        var input = fixture('always-float-label');
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
+      });
+
+    });
+
+    suite('focus/blur events', function() {
+      var input;
+
+      setup(function() {
+        input = fixture('basic');
+      });
+
+      test('focus/blur events fired on host element', function(done) {
+        var nFocusEvents = 0;
+        var nBlurEvents = 0;
+        input.addEventListener('focus', function() {
+          nFocusEvents += 1;
+          // setTimeout to wait for potentially more, erroneous events
+          setTimeout(function() {
+            assert.equal(nFocusEvents, 1, 'one focus event fired');
+            input.inputElement.textarea.blur();
+          });
+        });
+        input.addEventListener('blur', function() {
+          nBlurEvents += 1;
+          // setTimeout to wait for potentially more, erroneous events
+          setTimeout(function() {
+            assert.equal(nBlurEvents, 1, 'one blur event fired');
+            done();
+          });
+        });
+        input.inputElement.textarea.focus();
+      });
+
+    });
+
+    suite('a11y', function() {
+
+      test('has aria-labelledby', function() {
+        var input = fixture('label');
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+
+
+    });
+
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-progress/.bower.json b/dashboard-ui/bower_components/paper-progress/.bower.json
new file mode 100644
index 0000000000..100fe00c40
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/.bower.json
@@ -0,0 +1,41 @@
+{
+  "name": "paper-progress",
+  "version": "1.0.0",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "A material design progress bar",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "progress"
+  ],
+  "main": [
+    "paper-progress.html"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-progress.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "homepage": "https://github.com/PolymerElements/paper-progress",
+  "_release": "1.0.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.0",
+    "commit": "1bef80a0d4110654b85746e70c006796ce8cdc2c"
+  },
+  "_source": "git://github.com/PolymerElements/paper-progress.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/paper-progress"
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-progress/.gitignore b/dashboard-ui/bower_components/paper-progress/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/paper-progress/bower.json b/dashboard-ui/bower_components/paper-progress/bower.json
new file mode 100644
index 0000000000..8c17acbbf0
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/bower.json
@@ -0,0 +1,31 @@
+{
+  "name": "paper-progress",
+  "version": "1.0.0",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "A material design progress bar",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "progress"
+  ],
+  "main": [
+    "paper-progress.html"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-progress.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/paper-progress/demo/index.html b/dashboard-ui/bower_components/paper-progress/demo/index.html
new file mode 100644
index 0000000000..97f8c1b40c
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/demo/index.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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>paper-progress demo</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../paper-progress.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+
+  <style is="custom-style">
+    body {
+      padding: 40px;
+    }
+
+    paper-progress {
+      display: block;
+      width: 100%;
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+
+    paper-progress.blue {
+      --paper-progress-active-color: var(--paper-light-blue-500);
+      --paper-progress-secondary-color: var(--paper-light-blue-100);
+    }
+
+    paper-progress.red {
+      --paper-progress-active-color: var(--paper-red-500);
+      --paper-progress-secondary-color: var(--paper-red-100);
+    }
+
+    paper-progress.orange {
+      --paper-progress-active-color: var(--paper-orange-500);
+      --paper-progress-secondary-color: var(--paper-orange-100);
+    }
+
+    paper-progress.green {
+      --paper-progress-active-color: var(--paper-light-green-500);
+      --paper-progress-secondary-color: var(--paper-light-green-100);
+    }
+  </style>
+
+</head>
+<body>
+  <div class="vertical layout">
+    <h4>Progress bar</h4>
+    <div class="vertical-section">
+      <paper-progress></paper-progress>
+      <paper-button raised onclick="startProgress();">Start</paper-button>
+    </div>
+
+    <h4>Indeterminate</h4>
+    <div class="vertical-section">
+      <paper-progress indeterminate></paper-progress><br>
+      <paper-progress class="blue" indeterminate alue="800" min="100" max="1000"></paper-progress><br>
+    </div>
+
+    <h4>Color</h4>
+    <div class="vertical-section">
+      <paper-progress value="40" class="blue"></paper-progress><br>
+      <paper-progress value="800" min="100" max="1000" class="red"></paper-progress><br>
+      <paper-progress value="40" class="orange"></paper-progress><br>
+      <paper-progress value="200" max="200" class="green"></paper-progress><br>
+      <paper-progress value="40" secondary-progress="80" class="blue"></paper-progress><br>
+    </div>
+  </div>
+
+  <script>
+
+    var progress = document.querySelector('paper-progress');
+    var button = document.querySelector('paper-button');
+
+    var repeat, maxRepeat = 5, animating = false;
+
+    function nextProgress() {
+      animating = true;
+      if (progress.value < progress.max) {
+        progress.value += (progress.step || 1);
+      } else {
+        if (++repeat >= maxRepeat) {
+          animating = false;
+          button.disabled = false;
+          return;
+        }
+        progress.value = progress.min;
+      }
+
+      requestAnimationFrame(nextProgress);
+    }
+
+    function startProgress() {
+      repeat = 0;
+      progress.value = progress.min;
+      button.disabled = true;
+      if (!animating) {
+        nextProgress();
+      }
+    }
+
+    window.addEventListener('WebComponentsReady', function() {
+      startProgress();
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-progress/hero.svg b/dashboard-ui/bower_components/paper-progress/hero.svg
new file mode 100644
index 0000000000..dc422a4912
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/hero.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="57" y="59" width="20" height="2"/>
+	<rect x="38" y="59" width="11" height="2"/>
+	<rect x="84" y="59" width="40" height="2"/>
+	<rect x="133" y="59" width="54" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/dashboard-ui/bower_components/paper-progress/index.html b/dashboard-ui/bower_components/paper-progress/index.html
new file mode 100644
index 0000000000..225e3dd93d
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/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, initial-scale=1.0">
+
+  <title>paper-progress</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <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/paper-progress/paper-progress.html b/dashboard-ui/bower_components/paper-progress/paper-progress.html
new file mode 100644
index 0000000000..949e1bc510
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/paper-progress.html
@@ -0,0 +1,199 @@
+<!--
+@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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+
+<link rel="import" href="../paper-styles/paper-styles.html">
+<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+
+<!--
+The progress bars are for situations where the percentage completed can be
+determined. They give users a quick sense of how much longer an operation
+will take.
+
+Example:
+
+    <paper-progress value="10"></paper-progress>
+
+There is also a secondary progress which is useful for displaying intermediate
+progress, such as the buffer level during a streaming playback progress bar.
+
+Example:
+
+    <paper-progress value="10" secondary-progress="30"></paper-progress>
+
+Styling progress bar:
+
+To change the active progress bar color:
+
+    paper-progress {
+       --paper-progress-active-color: #e91e63;
+    }
+
+To change the secondary progress bar color:
+
+    paper-progress {
+      --paper-progress-secondary-color: #f8bbd0;
+    }
+
+To change the progress bar background color:
+
+    paper-progress {
+      --paper-progress-container-color: #64ffda;
+    }
+
+@group Paper Elements
+@element paper-progress
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-progress">
+  <style>
+    :host {
+      display: inline-block;
+      width: 200px;
+      height: 4px;
+    }
+
+    #progressContainer {
+      position: relative;
+      height: 100%;
+      background-color: var(--paper-progress-container-color, --google-grey-300);
+      overflow: hidden;
+    }
+
+    #activeProgress,
+    #secondaryProgress {
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+    }
+
+    #activeProgress {
+      background-color: var(--paper-progress-active-color, --google-green-500);
+    }
+
+    #secondaryProgress {
+      background-color: var(--paper-progress-secondary-color, --google-green-100);
+    }
+
+    #activeProgress.indeterminate {
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      -webkit-animation: indeterminate-bar 1s linear infinite;
+      animation: indeterminate-bar 1s linear infinite;
+    }
+
+    @-webkit-keyframes indeterminate-bar {
+      0% {
+        -webkit-transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        -webkit-transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        -webkit-transform: translate(50%) scaleX(0);
+      }
+    }
+
+    @keyframes indeterminate-bar {
+      0% {
+        transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        transform: translate(50%) scaleX(0);
+      }
+    }
+  </style>
+  <template>
+    <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
+      <div id="secondaryProgress" class="fit"></div>
+      <div id="activeProgress" class="fit"></div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+
+    is: 'paper-progress',
+
+    behaviors: [
+      Polymer.IronRangeBehavior
+    ],
+
+    properties: {
+
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true
+      },
+
+      /**
+       * The secondary ratio
+       */
+      secondaryRatio: {
+        type: Number,
+        value: 0,
+        readOnly: true,
+        observer: '_secondaryRatioChanged'
+      },
+
+      /**
+       * Use an indeterminate progress indicator.
+       */
+      indeterminate: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_toggleIndeterminate'
+      }
+    },
+
+    observers: [
+      '_ratioChanged(ratio)',
+      '_secondaryProgressChanged(secondaryProgress, min, max)'
+    ],
+
+    _toggleIndeterminate: function() {
+      // If we use attribute/class binding, the animation sometimes doesn't translate properly
+      // on Safari 7.1. So instead, we toggle the class here in the update method.
+      this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
+    },
+
+    _transformProgress: function(progress, ratio) {
+      var transform = 'scaleX(' + (ratio / 100) + ')';
+      progress.style.transform = progress.style.webkitTransform = transform;
+    },
+
+    _ratioChanged: function(ratio) {
+      this._transformProgress(this.$.activeProgress, ratio);
+    },
+
+    _secondaryRatioChanged: function(secondaryRatio) {
+      this._transformProgress(this.$.secondaryProgress, secondaryRatio);
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+      this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
+    }
+
+  });
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-progress/test/basic.html b/dashboard-ui/bower_components/paper-progress/test/basic.html
new file mode 100644
index 0000000000..dddb6efff6
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/test/basic.html
@@ -0,0 +1,121 @@
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-progress test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <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="../paper-progress.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+
+
+  <test-fixture id="trivialProgress">
+    <template>
+      <paper-progress></paper-progress>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('<paper-progress>', function() {
+      var range;
+
+      setup(function() {
+        range = fixture('trivialProgress');
+      });
+
+      test('check default', function() {
+        assert.equal(range.min, 0);
+        assert.equal(range.max, 100);
+        assert.equal(range.value, 0);
+      });
+
+      test('set value', function(done) {
+        range.value = 50;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, 50);
+          // test clamp value
+          range.value = 60.1;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, 60);
+            done();
+          });
+        });
+      });
+
+      test('set max', function(done) {
+        range.max = 10;
+        range.value = 11;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, range.max);
+          done();
+        });
+      });
+
+      test('test ratio', function(done) {
+        range.max = 10;
+        range.value = 5;
+        asyncPlatformFlush(function() {
+          assert.equal(range.ratio, 50);
+          done();
+        });
+      });
+
+      test('test secondary ratio', function(done) {
+        range.max = 10;
+        range.secondaryProgress = 5;
+        asyncPlatformFlush(function() {
+          assert.equal(range.secondaryRatio, 50);
+          done();
+        });
+      });
+
+      test('set min', function(done) {
+        range.min = 10
+        range.max = 50;
+        range.value = 30;
+        asyncPlatformFlush(function() {
+          assert.equal(range.ratio, 50);
+          range.value = 0;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, range.min);
+            done();
+          });
+        });
+      });
+
+      test('set step', function(done) {
+        range.min = 0;
+        range.max = 10;
+        range.value = 5.1;
+        asyncPlatformFlush(function() {
+          assert.equal(range.value, 5);
+          range.step = 0.1;
+          range.value = 5.1;
+          asyncPlatformFlush(function() {
+            assert.equal(range.value, 5.1);
+            done();
+          });
+        });
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-progress/test/index.html b/dashboard-ui/bower_components/paper-progress/test/index.html
new file mode 100644
index 0000000000..f07aca92de
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-progress/test/index.html
@@ -0,0 +1,25 @@
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<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>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html'
+    ]);
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-slider/.bower.json b/dashboard-ui/bower_components/paper-slider/.bower.json
new file mode 100644
index 0000000000..85a0eee31f
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/.bower.json
@@ -0,0 +1,50 @@
+{
+  "name": "paper-slider",
+  "version": "1.0.3",
+  "description": "A material design-style slider",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "slider",
+    "control"
+  ],
+  "main": [
+    "paper-slider.html"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-slider.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "homepage": "https://github.com/PolymerElements/paper-slider",
+  "_release": "1.0.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.3",
+    "commit": "d2b1542b6f02595fa124359945a4cc00cb0fca44"
+  },
+  "_source": "git://github.com/PolymerElements/paper-slider.git",
+  "_target": "~1.0.3",
+  "_originalSource": "PolymerElements/paper-slider",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-slider/.gitignore b/dashboard-ui/bower_components/paper-slider/.gitignore
new file mode 100644
index 0000000000..8d4ae2536a
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/dashboard-ui/bower_components/paper-slider/bower.json b/dashboard-ui/bower_components/paper-slider/bower.json
new file mode 100644
index 0000000000..ac199154ec
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/bower.json
@@ -0,0 +1,39 @@
+{
+  "name": "paper-slider",
+  "version": "1.0.3",
+  "description": "A material design-style slider",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "slider",
+    "control"
+  ],
+  "main": [
+    "paper-slider.html"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-slider.git"
+  },
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/dashboard-ui/bower_components/paper-slider/demo/index.html b/dashboard-ui/bower_components/paper-slider/demo/index.html
new file mode 100644
index 0000000000..ccc06f279b
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/demo/index.html
@@ -0,0 +1,117 @@
+<!--
+@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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>paper-slider demo</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../webcomponentsjs/webcomponents.js"></script>
+  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../paper-slider.html">
+
+  <style is="custom-style">
+    body {
+      padding: 40px;
+    }
+    
+    paper-slider {
+      width: 100%;
+    }
+
+    paper-slider.blue {
+      --paper-slider-knob-color: var(--paper-light-blue-500);
+      --paper-slider-active-color: var(--paper-light-blue-500);
+    }
+
+    paper-slider.red {
+      --paper-slider-knob-color: var(--paper-red-500);
+      --paper-slider-active-color: var(--paper-red-500);
+    }
+
+    paper-slider.green {
+      --paper-slider-knob-color: var(--paper-green-500);
+      --paper-slider-active-color: var(--paper-green-500);
+    }
+
+    paper-slider.orange {
+      --paper-slider-knob-color: var(--paper-orange-500);
+      --paper-slider-active-color: var(--paper-orange-500);
+      --paper-slider-pin-color: var(--paper-orange-500);
+    }
+
+    #ratingsLabel {
+      padding-left: 12px;
+      color: #a0a0a0;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+  <div class="vertical center-justified layout">
+    <h4>Default</h4>
+    <div class="vertical-section">
+      <div>Oxygen</div>
+      <paper-slider value="21"></paper-slider><br><br>
+      <div>Argon</div>
+      <paper-slider value="1"></paper-slider><br><br>
+      <div>Hydrogen</div>
+      <paper-slider value="0"></paper-slider><br><br>
+      <div>Nitrogen</div>
+      <paper-slider value="78"></paper-slider><br><br>
+      <div>Sprinkles</div>
+      <paper-slider disabled value="33"></paper-slider>
+    </div>
+
+    <h4>Editable</h4>
+    <div class="vertical-section">
+      <div class="center horizontal layout">
+        <div>R</div>
+        <paper-slider class="red" value="23" max="255" editable></paper-slider>
+      </div>
+      <div class="center horizontal layout">
+        <div>G</div>
+        <paper-slider class="green" value="183" max="255" editable></paper-slider>
+      </div>
+      <div class="center horizontal layout">
+        <div>B</div>
+        <paper-slider class="blue" value="211" max="255" editable></paper-slider>
+      </div>
+      <div class="center horizontal layout">
+      <div>&alpha;</div>
+      <paper-slider max="1.0" step="0.01" editable></paper-slider>
+      </div>
+    </div>
+
+    <h4>Labelled pins</h4>
+    <div class="vertical-section">
+      <div>Brightness</div><br>
+      <paper-slider pin value="20" class="orange"></paper-slider>
+      <div>Ratings: <span id="ratingsLabel"></span></div><br>
+      <paper-slider id="ratings" pin snaps max="10" step="1" value="5" class="orange"></paper-slider>
+    </div>
+  </div>
+
+  <script>
+
+    var ratings = document.querySelector('#ratings');
+    ratings.addEventListener('value-change', function() {
+      document.querySelector('#ratingsLabel').textContent = ratings.value;
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-slider/hero.svg b/dashboard-ui/bower_components/paper-slider/hero.svg
new file mode 100644
index 0000000000..8a518e1ee0
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/hero.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<circle cx="110" cy="61" r="4"/>
+	<rect x="61" y="60" width="49" height="2"/>
+	<rect x="110" y="60" width="53" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/dashboard-ui/bower_components/paper-slider/index.html b/dashboard-ui/bower_components/paper-slider/index.html
new file mode 100644
index 0000000000..6add0749d3
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/index.html
@@ -0,0 +1,29 @@
+<!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, initial-scale=1.0">
+
+  <title>paper-slider</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <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/paper-slider/paper-slider.css b/dashboard-ui/bower_components/paper-slider/paper-slider.css
new file mode 100644
index 0000000000..af769f4aee
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/paper-slider.css
@@ -0,0 +1,257 @@
+/**
+@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
+*/
+
+:host {
+  display: inline-block;
+  width: 200px;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+:host(:not([disabled])) #sliderBar::shadow #activeProgress {
+  background-color: var(--paper-slider-active-color, --google-blue-700);
+}
+
+:host(:not([disabled])) #sliderBar::shadow #secondaryProgress {
+  background-color: var(--paper-slider-secondary-color, --google-blue-300);
+}
+
+:host([disabled]) #sliderBar::shadow #activeProgress {
+  background-color: var(--paper-slider-disabled-active-color, --google-grey-500);
+}
+
+:host([disabled]) #sliderBar::shadow #secondaryProgress {
+  background-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+#sliderContainer {
+  position: relative;
+  width: calc(100% - 32px);
+  height: 32px;
+}
+
+#sliderContainer.editable {
+  float: left;
+  width: calc(100% - 72px);
+  margin: 12px 0;
+}
+
+.bar-container {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ring > .bar-container {
+  left: 20px;
+  width: calc(100% - 4px);
+  transition: left 0.18s ease, width 0.18s ease;
+}
+
+.ring.expand:not(.pin) > .bar-container {
+  left: 30px;
+  width: calc(100% - 14px);
+}
+
+.ring.expand.dragging > .bar-container {
+  transition: none;
+}
+
+#sliderBar {
+  position: absolute;
+  top: 15px;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  padding: 8px 0;
+  margin: -8px 0;
+  background-color: var(--paper-slider-bar-color, transparent);
+}
+
+.ring #sliderBar {
+  left: -4px;
+  width: calc(100% + 4px);
+}
+
+.ring.expand:not(.pin) #sliderBar {
+  left: -14px;
+  width: calc(100% + 14px);
+}
+
+.slider-markers {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  height: 2px;
+  width: calc(100% + 2px);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.slider-markers::after,
+.slider-marker::after {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: black;
+}
+
+.transiting #sliderBar::shadow #activeProgress {
+  -webkit-transition: -webkit-transform 0.08s ease;
+  transition: transform 0.08s ease;
+}
+
+#sliderKnob {
+  @apply(--layout-center-justified);
+  @apply(--layout-center);
+  @apply(--layout-horizontal);
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.transiting > #sliderKnob {
+  transition: left 0.08s ease;
+}
+
+#sliderKnob:focus {
+  outline: none;
+}
+
+#sliderKnob.dragging {
+  transition: none;
+}
+
+.snaps > #sliderKnob.dragging {
+  transition: -webkit-transform 0.08s ease;
+  transition: transform 0.08s ease;
+}
+
+#sliderKnobInner {
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--paper-slider-knob-color, --google-blue-700);
+  transition-property: height, width, background-color, border;
+  transition-duration: 0.1s;
+  transition-timing-function: ease;
+}
+
+.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
+  width: 100%;
+  height: 100%;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.ring > #sliderKnob > #sliderKnobInner {
+  background-color: transparent;
+  border: 2px solid #c8c8c8;
+}
+
+#sliderKnobInner::before {
+  background-color: var(--paper-slider-pin-color, --google-blue-700);
+}
+
+.pin > #sliderKnob > #sliderKnobInner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 26px;
+  height: 26px;
+  margin-left: 3px;
+  border-radius: 50% 50% 50% 0;
+  -webkit-transform: rotate(-45deg) scale(0) translate(0);
+  transform: rotate(-45deg) scale(0) translate(0);
+}
+
+#sliderKnobInner::before,
+#sliderKnobInner::after {
+  transition: -webkit-transform .2s ease, background-color .18s ease;
+  transition: transform .2s ease, background-color .18s ease;
+}
+
+.pin.ring > #sliderKnob > #sliderKnobInner::before {
+  background-color: #c8c8c8;
+}
+
+.pin.expand > #sliderKnob > #sliderKnobInner::before {
+  -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
+  transform: rotate(-45deg) scale(1) translate(17px, -17px);
+}
+
+.pin > #sliderKnob > #sliderKnobInner::after {
+  content: attr(value);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32px;
+  height: 26px;
+  text-align: center;
+  color: var(--paper-slider-font-color, #fff);
+  font-size: 10px;
+  -webkit-transform: scale(0) translate(0);
+  transform: scale(0) translate(0);
+}
+
+.pin.expand > #sliderKnob > #sliderKnobInner::after {
+  -webkit-transform: scale(1) translate(0, -17px);
+  transform: scale(1) translate(0, -17px);
+}
+
+/* editable: paper-input */
+.slider-input {
+  width: 40px;
+  float: right;
+  overflow: hidden;
+}
+
+.slider-input::shadow input {
+  /* FIXME(ffu): should one be able set text-align directly on paper-input? */
+  text-align: center;
+}
+
+/* disabled state */
+#sliderContainer.disabled {
+  pointer-events: none;
+}
+
+.disabled > #sliderKnob > #sliderKnobInner {
+  width: 8px;
+  height: 8px;
+  background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
+}
+
+.disabled.ring > #sliderKnob > #sliderKnobInner {
+  background-color: transparent;
+}
+
+paper-ripple {
+  color: var(--paper-slider-knob-color, --google-blue-700);
+}
diff --git a/dashboard-ui/bower_components/paper-slider/paper-slider.html b/dashboard-ui/bower_components/paper-slider/paper-slider.html
new file mode 100644
index 0000000000..beaed90c5d
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/paper-slider.html
@@ -0,0 +1,485 @@
+<!--
+@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/paper-styles.html">
+<link rel="import" href="../paper-progress/paper-progress.html">
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+
+<!--
+`paper-slider` allows user to select a value from a range of values by
+moving the slider thumb.  The interactive nature of the slider makes it a
+great choice for settings that reflect intensity levels, such as volume,
+brightness, or color saturation.
+
+Example:
+
+    <paper-slider></paper-slider>
+
+Use `min` and `max` to specify the slider range.  Default is 0 to 100.
+
+Example:
+
+    <paper-slider min="10" max="200" value="110"></paper-slider>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-slider-bar-color` | The background color of the slider | `transparent`
+`--paper-slider-active-color` | The progress bar color | `--google-blue-700`
+`--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
+`--paper-slider-knob-color` | The knob color | `--google-blue-700`
+`--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-500`
+`--paper-slider-pin-color` | The pin color | `--google-blue-700`
+`--paper-slider-font-color` | The pin's text color | `#fff`
+`--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
+`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
+
+@group Paper Elements
+@element paper-slider
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-slider">
+
+  <link rel="import" type="css" href="paper-slider.css">
+
+  <template>
+    <div id="sliderContainer"
+      class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
+
+      <div class="bar-container">
+        <paper-progress
+          id="sliderBar"
+          aria-hidden="true"
+          min="[[min]]"
+          max="[[max]]"
+          step="[[step]]"
+          value="[[immediateValue]]"
+          secondary-progress="[[secondaryProgress]]"
+          on-down="_bardown"
+          on-up="_resetKnob"
+          on-track="_onTrack">
+        </paper-progress>
+      </div>
+
+      <template is="dom-if" if="[[snaps]]">
+        <div class="slider-markers horizontal layout">
+          <template is="dom-repeat" items="[[markers]]">
+            <div class="slider-marker flex"></div>
+          </template>
+        </div>
+      </template>
+
+      <div id="sliderKnob"
+        class="center-justified center horizontal layout"
+        on-down="_knobdown"
+        on-up="_resetKnob"
+        on-track="_onTrack"
+        on-transitionend="_knobTransitionEnd">
+          <paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
+          <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
+      </div>
+    </div>
+
+    <template is="dom-if" if="[[editable]]">
+      <paper-input
+        id="input"
+        class="slider-input"
+        disabled$="[[disabled]]"
+        on-change="_inputChange">
+      </paper-input>
+    </template>
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+    is: 'paper-slider',
+
+    behaviors: [
+      Polymer.IronA11yKeysBehavior,
+      Polymer.PaperInkyFocusBehavior,
+      Polymer.IronFormElementBehavior,
+      Polymer.IronRangeBehavior
+    ],
+
+    properties: {
+
+      /**
+       * If true, the slider thumb snaps to tick marks evenly spaced based
+       * on the `step` property value.
+       */
+      snaps: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * If true, a pin with numeric value label is shown when the slider thumb
+       * is pressed. Use for settings for which users need to know the exact
+       * value of the setting.
+       */
+      pin: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_secondaryProgressChanged'
+      },
+
+      /**
+       * If true, an input is shown and user can use it to set the slider value.
+       */
+      editable: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The immediate value of the slider.  This value is updated while the user
+       * is dragging the slider.
+       */
+      immediateValue: {
+        type: Number,
+        value: 0,
+        readOnly: true
+      },
+
+      /**
+       * The maximum number of markers
+       */
+      maxMarkers: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_maxMarkersChanged'
+      },
+
+      /**
+       * If true, the knob is expanded
+       */
+      expand: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      /**
+       * True when the user is dragging the slider.
+       */
+      dragging: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      transiting: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      markers: {
+        type: Array,
+        readOnly: true,
+        value: []
+      },
+    },
+
+    observers: [
+      '_updateKnob(value, min, max, snaps, step)',
+      '_minChanged(min)',
+      '_maxChanged(max)',
+      '_valueChanged(value)',
+      '_immediateValueChanged(immediateValue)'
+    ],
+
+    hostAttributes: {
+      role: 'slider',
+      tabindex: 0
+    },
+
+    keyBindings: {
+      'left down pagedown home': '_decrementKey',
+      'right up pageup end': '_incrementKey'
+    },
+
+    ready: function() {
+      // issue polymer/polymer#1305
+      this.async(function() {
+        this._updateKnob(this.value);
+        this._updateInputValue();
+      }, 1);
+    },
+
+    /**
+     * Increases value by `step` but not above `max`.
+     * @method increment
+     */
+    increment: function() {
+      this.value = this._clampValue(this.value + this.step);
+    },
+
+    /**
+     * Decreases value by `step` but not below `min`.
+     * @method decrement
+     */
+    decrement: function() {
+      this.value = this._clampValue(this.value - this.step);
+    },
+
+    _updateKnob: function(value) {
+      this._positionKnob(this._calcRatio(value));
+    },
+
+    _minChanged: function() {
+      this.setAttribute('aria-valuemin', this.min);
+    },
+
+    _maxChanged: function() {
+      this.setAttribute('aria-valuemax', this.max);
+    },
+
+    _valueChanged: function() {
+      this.setAttribute('aria-valuenow', this.value);
+      this.fire('value-change');
+    },
+
+    _immediateValueChanged: function() {
+      if (this.dragging) {
+        this.fire('immediate-value-change');
+      } else {
+        this.value = this.immediateValue;
+      }
+      this._updateInputValue();
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+    },
+
+    _updateInputValue: function() {
+      if (this.editable) {
+        this.$$('#input').value = this.immediateValue.toString();
+      }
+    },
+
+    _expandKnob: function() {
+      this._setExpand(true);
+    },
+
+    _resetKnob: function() {
+      this.cancelDebouncer('expandKnob');
+      this._setExpand(false);
+    },
+
+    _positionKnob: function(ratio) {
+      this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+      this._setRatio(this._calcRatio(this.immediateValue));
+
+      this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
+    },
+
+    _inputChange: function() {
+      this.value = this.$$('#input').value;
+      this.fire('change');
+    },
+
+    _calcKnobPosition: function(ratio) {
+      return (this.max - this.min) * ratio + this.min;
+    },
+
+    _onTrack: function(event) {
+      switch (event.detail.state) {
+        case 'start':
+          this._trackStart(event);
+          break;
+        case 'track':
+          this._trackX(event);
+          break;
+        case 'end':
+          this._trackEnd();
+          break;
+      }
+    },
+
+    _trackStart: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      this._x = this.ratio * this._w;
+      this._startx = this._x || 0;
+      this._minx = - this._startx;
+      this._maxx = this._w - this._startx;
+      this.$.sliderKnob.classList.add('dragging');
+
+      this._setDragging(true);
+    },
+
+    _trackX: function(e) {
+      if (!this.dragging) {
+        this._trackStart(e);
+      }
+
+      var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+      this._x = this._startx + dx;
+
+      var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+      this._setImmediateValue(immediateValue);
+
+      // update knob's position
+      var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+      this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+    },
+
+    _trackEnd: function() {
+      var s = this.$.sliderKnob.style;
+
+      this.$.sliderKnob.classList.remove('dragging');
+      this._setDragging(false);
+      this._resetKnob();
+      this.value = this.immediateValue;
+
+      s.transform = s.webkitTransform = '';
+
+      this.fire('change');
+    },
+
+    _knobdown: function(event) {
+      this._expandKnob();
+
+      // cancel selection
+      event.detail.sourceEvent.preventDefault();
+
+      // set the focus manually because we will called prevent default
+      this.focus();
+    },
+
+    _bardown: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      var rect = this.$.sliderBar.getBoundingClientRect();
+      var ratio = (event.detail.x - rect.left) / this._w;
+      var prevRatio = this.ratio;
+
+      this._setTransiting(true);
+
+      this._positionKnob(ratio);
+
+      this.debounce('expandKnob', this._expandKnob, 60);
+
+      // if the ratio doesn't change, sliderKnob's animation won't start
+      // and `_knobTransitionEnd` won't be called
+      // Therefore, we need to manually update the `transiting` state
+
+      if (prevRatio === this.ratio) {
+        this._setTransiting(false);
+      }
+
+      this.async(function() {
+        this.fire('change');
+      });
+
+      // cancel selection
+      event.detail.sourceEvent.preventDefault();
+    },
+
+    _knobTransitionEnd: function(event) {
+      if (event.target === this.$.sliderKnob) {
+        this._setTransiting(false);
+      }
+    },
+
+    _maxMarkersChanged: function(maxMarkers) {
+      var l = (this.max - this.min) / this.step;
+      if (!this.snaps && l > maxMarkers) {
+        this._setMarkers([]);
+      } else {
+        this._setMarkers(new Array(l));
+      }
+    },
+
+    _getClassNames: function() {
+      var classes = {};
+
+      classes.disabled = this.disabled;
+      classes.pin = this.pin;
+      classes.snaps = this.snaps;
+      classes.ring = this.immediateValue <= this.min;
+      classes.expand = this.expand;
+      classes.dragging = this.dragging;
+      classes.transiting = this.transiting;
+      classes.editable = this.editable;
+
+      return Object.keys(classes).filter(
+        function(className) {
+          return classes[className];
+        }).join(' ');
+    },
+
+    _incrementKey: function(event) {
+      if (event.detail.key === 'end') {
+        this.value = this.max;
+      } else {
+        this.increment();
+      }
+      this.fire('change');
+    },
+
+    _decrementKey: function(event) {
+      if (event.detail.key === 'home') {
+        this.value = this.min;
+      } else {
+        this.decrement();
+      }
+      this.fire('change');
+    }
+  });
+
+  /**
+   * Fired when the slider's value changes.
+   *
+   * @event value-change
+   */
+
+  /**
+   * Fired when the slider's immediateValue changes.
+   *
+   * @event immediate-value-change
+   */
+
+  /**
+   * Fired when the slider's value changes due to user interaction.
+   *
+   * Changes to the slider's value due to changes in an underlying
+   * bound variable will not trigger this event.
+   *
+   * @event change
+   */
+
+</script>
diff --git a/dashboard-ui/bower_components/paper-slider/test/basic.html b/dashboard-ui/bower_components/paper-slider/test/basic.html
new file mode 100644
index 0000000000..bf421e91a6
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/test/basic.html
@@ -0,0 +1,186 @@
+<!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">
+  <title>paper-slider test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <link rel="import" href="../paper-slider.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+
+
+  <test-fixture id="trivialProgress">
+    <template>
+      <paper-slider></paper-slider>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('<paper-slider>', function() {
+      var slider;
+
+      setup(function() {
+        slider = fixture('trivialProgress');
+      });
+
+      test('check default', function() {
+        assert.equal(slider.min, 0);
+        assert.equal(slider.max, 100);
+        assert.equal(slider.value, 0);
+      });
+
+      test('set value', function(done) {
+        slider.value = 50;
+        flush(function() {
+          assert.equal(slider.value, 50);
+          // test clamp value
+          slider.value = 60.1;
+          flush(function() {
+            assert.equal(slider.value, 60);
+            done();
+          });
+        });
+      });
+
+      test('set max', function(done) {
+        slider.max = 10;
+        slider.value = 11;
+        flush(function() {
+          assert.equal(slider.value, slider.max);
+          done();
+        });
+      });
+
+      test('ratio', function(done) {
+        slider.max = 10;
+        slider.value = 5;
+        flush(function() {
+          assert.equal(slider.ratio, 0.5);
+          done();
+        });
+      });
+
+      test('snaps', function(done) {
+        slider.snaps = true;
+        slider.step = 10;
+        slider.max = 100;
+        slider.value = 25;
+        flush(function() {
+          assert.equal(slider.value, 30);
+
+          slider.value = 51.1;
+
+          flush(function() {
+            assert.equal(slider.value, 50);
+            slider.snaps = false;
+            slider.step = 1;
+            done();
+          });
+        });
+      });
+
+      test('secondary progress', function(done) {
+        slider.max = 10;
+        slider.secondaryProgress = 50;
+        flush(function() {
+          assert.equal(slider.secondaryProgress, slider.max);
+          done();
+        });
+      });
+
+      test('increment', function(done) {
+        slider.min = 0;
+        slider.max = 10;
+        slider.step = 2;
+        slider.value = 0;
+        slider.increment();
+
+        flush(function() {
+          assert.equal(slider.value, slider.step);
+            slider.step = 1;
+            done();
+        });
+      });
+
+      test('decrement', function(done) {
+        slider.min = 0;
+        slider.max = 10;
+        slider.step = 2;
+        slider.value = 8;
+        slider.decrement();
+
+        flush(function() {
+          assert.equal(slider.value, 6);
+            slider.step = 1;
+            done();
+        });
+      });
+
+      test('editable', function(done) {
+        slider.min = 0;
+        slider.max = 10;
+        slider.step = 1;
+        slider.editable = true;
+
+        flush(function() {
+          slider.value = 2;
+          assert.equal(slider.$$('#input').value, slider.value);
+          done();
+        });
+      });
+
+      test('decimal values', function(done) {
+        slider.min = 0;
+        slider.max = 1;
+        slider.value = slider.min;
+        slider.step = 0.1;
+
+        slider.increment();
+
+        flush(function() {
+          assert.equal(slider.value, slider.step);
+          assert.equal(slider.$.sliderBar.value, slider.step);
+          done();
+        });
+      });
+
+      test('snap to the correct value on tapping', function(done) {
+        var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
+        cursor.x += slider.$.sliderBar.getBoundingClientRect().width * 0.9;
+
+        slider.min = 0;
+        slider.max = 2;
+        slider.step = 1;
+        slider.value = 0;
+
+        MockInteractions.down(slider.$.sliderBar, cursor);
+
+        flush(function() {
+          assert.equal(slider.value, slider.max);
+            slider.step = 1;
+            done();
+        });
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/dashboard-ui/bower_components/paper-slider/test/index.html b/dashboard-ui/bower_components/paper-slider/test/index.html
new file mode 100644
index 0000000000..155baeabed
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-slider/test/index.html
@@ -0,0 +1,25 @@
+<!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>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html'
+    ]);
+  </script>
+</body>
+</html>
diff --git a/dashboard-ui/cordova/android/androidcredentials.js b/dashboard-ui/cordova/android/androidcredentials.js
index b462329c37..364c02f32b 100644
--- a/dashboard-ui/cordova/android/androidcredentials.js
+++ b/dashboard-ui/cordova/android/androidcredentials.js
@@ -2,7 +2,7 @@
 
     function updateCredentials() {
 
-        console.log('sending updated credentials to ApiClientBridge');
+        Logger.log('sending updated credentials to ApiClientBridge');
 
         var json = JSON.stringify(ConnectionManager.credentialProvider().credentials());
         var credentials = JSON.parse(json);
@@ -21,7 +21,7 @@
 
     function initNativeConnectionManager() {
 
-        console.log('initNativeConnectionManager');
+        Logger.log('initNativeConnectionManager');
 
         var capabilities = ConnectionManager.capabilities();
 
diff --git a/dashboard-ui/cordova/android/immersive.js b/dashboard-ui/cordova/android/immersive.js
index 619cf3f166..689eefebde 100644
--- a/dashboard-ui/cordova/android/immersive.js
+++ b/dashboard-ui/cordova/android/immersive.js
@@ -1,11 +1,11 @@
 (function () {
 
     function onSuccess() {
-        console.log('Immersive mode succeeded');
+        Logger.log('Immersive mode succeeded');
     }
 
     function onError() {
-        console.log('Immersive mode failed');
+        Logger.log('Immersive mode failed');
     }
 
     //// Is this plugin supported?
@@ -89,7 +89,7 @@
 
     Dashboard.ready(function () {
 
-        console.log('binding fullscreen to MediaController');
+        Logger.log('binding fullscreen to MediaController');
 
         $(MediaController).on('playerchange', function () {
 
diff --git a/dashboard-ui/cordova/android/mediasession.js b/dashboard-ui/cordova/android/mediasession.js
index 4f79e3996d..b58f9c56b3 100644
--- a/dashboard-ui/cordova/android/mediasession.js
+++ b/dashboard-ui/cordova/android/mediasession.js
@@ -96,7 +96,7 @@
 
     function onPlaybackStart(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
 
         var player = this;
 
@@ -107,7 +107,7 @@
 
     function onPlaybackStopped(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         player.endPlayerUpdates();
@@ -142,7 +142,7 @@
 
         currentPlayer = player;
 
-        console.log('binding remotecontrols to MediaPlayer');
+        Logger.log('binding remotecontrols to MediaPlayer');
 
         player.getPlayerState().done(function (state) {
 
@@ -161,7 +161,7 @@
 
     Dashboard.ready(function () {
 
-        console.log('binding remotecontrols to MediaController');
+        Logger.log('binding remotecontrols to MediaController');
 
         $(MediaController).on('playerchange', function () {
 
diff --git a/dashboard-ui/cordova/android/vlcplayer.js b/dashboard-ui/cordova/android/vlcplayer.js
index 598ea14e81..e66f780a24 100644
--- a/dashboard-ui/cordova/android/vlcplayer.js
+++ b/dashboard-ui/cordova/android/vlcplayer.js
@@ -39,7 +39,7 @@
         function onError() {
 
             var errorCode = this.error ? this.error.code : '';
-            console.log('Media element error code: ' + errorCode);
+            Logger.log('Media element error code: ' + errorCode);
 
             $(self).trigger('error');
         }
diff --git a/dashboard-ui/cordova/chromecast.js b/dashboard-ui/cordova/chromecast.js
index 1590f953ae..742b1e5a43 100644
--- a/dashboard-ui/cordova/chromecast.js
+++ b/dashboard-ui/cordova/chromecast.js
@@ -27,14 +27,14 @@
 
         $(castPlayer).on("connect", function (e) {
 
-            console.log('cc: connect');
+            Logger.log('cc: connect');
             // Reset this so the next query doesn't make it appear like content is playing.
             self.lastPlayerData = {};
         });
 
         $(castPlayer).on("playbackstart", function (e, data) {
 
-            console.log('cc: playbackstart');
+            Logger.log('cc: playbackstart');
 
             var state = self.getPlayerStateInternal(data);
             $(self).trigger("playbackstart", [state]);
@@ -42,7 +42,7 @@
 
         $(castPlayer).on("playbackstop", function (e, data) {
 
-            console.log('cc: playbackstop');
+            Logger.log('cc: playbackstop');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("playbackstop", [state]);
@@ -53,7 +53,7 @@
 
         $(castPlayer).on("playbackprogress", function (e, data) {
 
-            console.log('cc: positionchange');
+            Logger.log('cc: positionchange');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("positionchange", [state]);
@@ -416,7 +416,7 @@
             data = data || self.lastPlayerData;
             self.lastPlayerData = data;
 
-            console.log(JSON.stringify(data));
+            Logger.log(JSON.stringify(data));
             return data;
         };
 
@@ -459,7 +459,7 @@
         }
 
         function handleSessionDisconnect() {
-            console.log("session disconnected");
+            Logger.log("session disconnected");
 
             cleanupSession();
             MediaController.removeActivePlayer(PlayerName);
@@ -469,7 +469,7 @@
 
             currentWebAppSession = webAppSession;
 
-            console.log('session.connect succeeded');
+            Logger.log('session.connect succeeded');
             webAppSession.setWebAppSessionListener();
 
             MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
@@ -530,15 +530,15 @@
 
         function tryLaunchWebSession(device) {
 
-            console.log('calling launchWebApp');
+            Logger.log('calling launchWebApp');
             device.getWebAppLauncher().launchWebApp(ApplicationID).success(function (session) {
 
-                console.log('launchWebApp success. calling onSessionConnected');
+                Logger.log('launchWebApp success. calling onSessionConnected');
                 setupWebAppSession(device, session, true);
 
             }).error(function (err1) {
 
-                console.log('launchWebApp error:' + JSON.stringify(err1));
+                Logger.log('launchWebApp error:' + JSON.stringify(err1));
 
             });
         }
@@ -547,22 +547,22 @@
 
             // First try to join existing session. If it fails, launch a new one
 
-            console.log('calling joinWebApp');
+            Logger.log('calling joinWebApp');
             device.getWebAppLauncher().joinWebApp(ApplicationID).success(function (session) {
 
-                console.log('joinWebApp success. calling onSessionConnected');
+                Logger.log('joinWebApp success. calling onSessionConnected');
                 setupWebAppSession(device, session, false);
 
             }).error(function (err) {
 
-                console.log('joinWebApp error: ' + JSON.stringify(err));
+                Logger.log('joinWebApp error: ' + JSON.stringify(err));
 
                 if (enableRetry) {
                     tryJoinWebSession(device, false);
                     return;
                 }
 
-                console.log('calling launchWebApp');
+                Logger.log('calling launchWebApp');
                 tryLaunchWebSession(device);
 
             });
@@ -581,7 +581,7 @@
 
             device.off("ready");
 
-            console.log('creating webAppSession');
+            Logger.log('creating webAppSession');
 
             launchWebApp(device);
         }
@@ -608,7 +608,7 @@
 
         self.tryPairWithDevice = function (device, deferred) {
 
-            console.log('Will attempt to connect to Chromecast');
+            Logger.log('Will attempt to connect to Chromecast');
 
             device.on("disconnect", function () {
                 device.off("ready");
@@ -616,18 +616,18 @@
             });
 
             if (device.isReady()) {
-                console.log('Device is already ready, calling onDeviceReady');
+                Logger.log('Device is already ready, calling onDeviceReady');
                 onDeviceReady(device);
             } else {
 
-                console.log('Binding device ready handler');
+                Logger.log('Binding device ready handler');
 
                 device.on("ready", function () {
-                    console.log('device.ready fired');
+                    Logger.log('device.ready fired');
                     onDeviceReady(device);
                 });
 
-                console.log('Calling device.connect');
+                Logger.log('Calling device.connect');
                 device.connect();
             }
         };
@@ -636,7 +636,7 @@
 
             if (newTarget.id != currentDeviceId) {
                 if (currentWebAppSession) {
-                    console.log('Disconnecting from chromecast');
+                    Logger.log('Disconnecting from chromecast');
                     //currentDevice.disconnect();
                     cleanupSession();
                     currentDevice = null;
diff --git a/dashboard-ui/cordova/externalplayer.js b/dashboard-ui/cordova/externalplayer.js
index b6dc32a33a..6e236307ea 100644
--- a/dashboard-ui/cordova/externalplayer.js
+++ b/dashboard-ui/cordova/externalplayer.js
@@ -8,12 +8,12 @@
 
         }, function () {
 
-            console.log('plugin launch success');
+            Logger.log('plugin launch success');
             ExternalPlayer.onPlaybackStart();
 
         }, function () {
 
-            console.log('plugin launch error');
+            Logger.log('plugin launch error');
             ExternalPlayer.onPlaybackStart();
         });
     }
diff --git a/dashboard-ui/cordova/generaldevice.js b/dashboard-ui/cordova/generaldevice.js
index ce035f1966..630e5e47d1 100644
--- a/dashboard-ui/cordova/generaldevice.js
+++ b/dashboard-ui/cordova/generaldevice.js
@@ -26,7 +26,7 @@
 
         $(castPlayer).on("playbackstart", function (e, data) {
 
-            console.log('cc: playbackstart');
+            Logger.log('cc: playbackstart');
 
             var state = self.getPlayerStateInternal(data);
             $(self).trigger("playbackstart", [state]);
@@ -34,7 +34,7 @@
 
         $(castPlayer).on("playbackstop", function (e, data) {
 
-            console.log('cc: playbackstop');
+            Logger.log('cc: playbackstop');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("playbackstop", [state]);
@@ -45,7 +45,7 @@
 
         $(castPlayer).on("playbackprogress", function (e, data) {
 
-            console.log('cc: positionchange');
+            Logger.log('cc: positionchange');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("positionchange", [state]);
@@ -193,12 +193,12 @@
                         }
                     ).success(function (launchSession, mediaControl) {
 
-                        console.log("Video launch successful");
+                        Logger.log("Video launch successful");
                         currentMediaControl = mediaControl && mediaControl.acquire();
 
                     }).error(function (err) {
 
-                        console.log("error: " + err.message);
+                        Logger.log("error: " + err.message);
                     });
 
             deferred.resolveWith(null, [streamInfo]);
@@ -557,12 +557,12 @@
             data = data || self.lastPlayerData;
             self.lastPlayerData = data;
 
-            console.log(JSON.stringify(data));
+            Logger.log(JSON.stringify(data));
             return data;
         };
 
         function handleSessionDisconnect() {
-            console.log("session disconnected");
+            Logger.log("session disconnected");
 
             cleanupSession();
             MediaController.removeActivePlayer(PlayerName);
@@ -578,7 +578,7 @@
                 cleanupSession();
             }
 
-            console.log('session.connect succeeded');
+            Logger.log('session.connect succeeded');
 
             MediaController.setActivePlayer(PlayerName, convertDeviceToTarget(device));
             currentDevice = device;
@@ -589,7 +589,7 @@
 
             device.off("ready");
 
-            console.log('creating webAppSession');
+            Logger.log('creating webAppSession');
 
             launchWebApp(device);
         }
@@ -616,7 +616,7 @@
 
         self.tryPairWithDevice = function (device, deferred) {
 
-            console.log('Will attempt to connect to Connect Device');
+            Logger.log('Will attempt to connect to Connect Device');
 
             device.on("disconnect", function () {
                 device.off("ready");
@@ -624,18 +624,18 @@
             });
 
             if (device.isReady()) {
-                console.log('Device is already ready, calling onDeviceReady');
+                Logger.log('Device is already ready, calling onDeviceReady');
                 onDeviceReady(device);
             } else {
 
-                console.log('Binding device ready handler');
+                Logger.log('Binding device ready handler');
 
                 device.on("ready", function () {
-                    console.log('device.ready fired');
+                    Logger.log('device.ready fired');
                     onDeviceReady(device);
                 });
 
-                console.log('Calling device.connect');
+                Logger.log('Calling device.connect');
                 device.connect();
             }
         };
@@ -645,7 +645,7 @@
             if (currentDevice) {
                 if (newTarget.id != currentDeviceId) {
                     if (currentDevice) {
-                        console.log('Disconnecting from connect device');
+                        Logger.log('Disconnecting from connect device');
                         //currentDevice.disconnect();
                         cleanupSession();
                         currentDevice = null;
diff --git a/dashboard-ui/cordova/iap.js b/dashboard-ui/cordova/iap.js
index 1e2607bd99..73a74b8e13 100644
--- a/dashboard-ui/cordova/iap.js
+++ b/dashboard-ui/cordova/iap.js
@@ -101,7 +101,7 @@
         store.when(unlockAppProductId).updated(function (product) {
 
             if (product.loaded && product.valid && product.state == store.APPROVED) {
-                console.log('finishing previously created transaction');
+                Logger.log('finishing previously created transaction');
                 product.finish();
             }
             updateProductInfo(product);
@@ -112,7 +112,7 @@
         // go ask your boss about it! (just in case)
         store.ready(function () {
 
-            console.log("Store ready");
+            Logger.log("Store ready");
         });
 
         // After we've done our setup, we tell the store to do
diff --git a/dashboard-ui/cordova/imagestore.js b/dashboard-ui/cordova/imagestore.js
index 449f13f2f5..515ccb8336 100644
--- a/dashboard-ui/cordova/imagestore.js
+++ b/dashboard-ui/cordova/imagestore.js
@@ -72,25 +72,25 @@
             var deferred = DeferredBuilder.Deferred();
             var key = getCacheKey(originalUrl);
 
-            console.log('getImageUrl:' + originalUrl);
+            Logger.log('getImageUrl:' + originalUrl);
 
             getFileSystem().done(function (fileSystem) {
                 var path = fileSystem.root.toURL() + "/emby/cache/" + key;
 
                 resolveLocalFileSystemURL(path, function (fileEntry) {
                     var localUrl = normalizeReturnUrl(fileEntry.toURL());
-                    console.log('returning cached file: ' + localUrl);
+                    Logger.log('returning cached file: ' + localUrl);
                     deferred.resolveWith(null, [localUrl]);
 
                 }, function () {
 
-                    console.log('downloading: ' + originalUrl);
+                    Logger.log('downloading: ' + originalUrl);
                     var ft = new FileTransfer();
                     ft.download(originalUrl, path, function (entry) {
 
                         var localUrl = normalizeReturnUrl(entry.toURL());
 
-                        console.log(localUrl);
+                        Logger.log(localUrl);
                         deferred.resolveWith(null, [localUrl]);
                     });
                 });
diff --git a/dashboard-ui/cordova/remotecontrols.js b/dashboard-ui/cordova/remotecontrols.js
index 12344e46d2..dd14a2564d 100644
--- a/dashboard-ui/cordova/remotecontrols.js
+++ b/dashboard-ui/cordova/remotecontrols.js
@@ -71,7 +71,7 @@
 
     function onPlaybackStart(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
 
         var player = this;
 
@@ -82,7 +82,7 @@
 
     function onPlaybackStopped(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         player.endPlayerUpdates();
@@ -122,12 +122,12 @@
 
     function onUpdateMetasSuccess() {
 
-        console.log('onUpdateMetasSuccess');
+        Logger.log('onUpdateMetasSuccess');
     }
 
     function onUpdateMetasFail(fail) {
 
-        console.log('onUpdateMetasFail: ' + fail);
+        Logger.log('onUpdateMetasFail: ' + fail);
     }
 
     function bindToPlayer(player) {
@@ -140,7 +140,7 @@
             return;
         }
 
-        console.log('binding remotecontrols to MediaPlayer');
+        Logger.log('binding remotecontrols to MediaPlayer');
 
         player.getPlayerState().done(function (state) {
 
@@ -159,7 +159,7 @@
 
     Dashboard.ready(function () {
 
-        console.log('binding remotecontrols to MediaController');
+        Logger.log('binding remotecontrols to MediaController');
 
         $(MediaController).on('playerchange', function () {
 
diff --git a/dashboard-ui/cordova/serverdiscovery.js b/dashboard-ui/cordova/serverdiscovery.js
index 2b57f7b4fa..5ca80522cb 100644
--- a/dashboard-ui/cordova/serverdiscovery.js
+++ b/dashboard-ui/cordova/serverdiscovery.js
@@ -62,7 +62,7 @@
 
         function startTimer() {
 
-            console.log('starting udp receive timer with timeout ms: ' + timeoutMs);
+            Logger.log('starting udp receive timer with timeout ms: ' + timeoutMs);
 
             timeout = setTimeout(onTimerExpired, timeoutMs);
         }
@@ -71,13 +71,13 @@
 
             try {
 
-                console.log('ServerDiscovery message received');
+                Logger.log('ServerDiscovery message received');
 
-                console.log(info);
+                Logger.log(info);
 
                 if (info != null && info.socketId == socketId) {
                     var json = arrayBufferToString(info.data);
-                    console.log('Server discovery json: ' + json);
+                    Logger.log('Server discovery json: ' + json);
                     var server = JSON.parse(json);
 
                     server.RemoteAddress = info.remoteAddress;
@@ -90,48 +90,48 @@
                 }
 
             } catch (err) {
-                console.log('Error receiving server info: ' + err);
+                Logger.log('Error receiving server info: ' + err);
             }
         }
 
         var port = 7359;
-        console.log('chrome.sockets.udp.create');
+        Logger.log('chrome.sockets.udp.create');
 
         startTimer();
 
         chrome.sockets.udp.create(function (createInfo) {
 
             if (!createInfo) {
-                console.log('create fail');
+                Logger.log('create fail');
                 return;
             }
             if (!createInfo.socketId) {
-                console.log('create fail');
+                Logger.log('create fail');
                 return;
             }
 
             socketId = createInfo.socketId;
 
-            console.log('chrome.sockets.udp.bind');
+            Logger.log('chrome.sockets.udp.bind');
             chrome.sockets.udp.bind(createInfo.socketId, '0.0.0.0', 0, function (bindResult) {
 
                 if (getResultCode(bindResult) != 0) {
-                    console.log('bind fail: ' + bindResult);
+                    Logger.log('bind fail: ' + bindResult);
                     return;
                 }
 
                 var data = stringToArrayBuffer('who is EmbyServer?');
 
-                console.log('chrome.sockets.udp.send');
+                Logger.log('chrome.sockets.udp.send');
 
                 chrome.sockets.udp.send(createInfo.socketId, data, '255.255.255.255', port, function (sendResult) {
 
                     if (getResultCode(sendResult) != 0) {
-                        console.log('send fail: ' + sendResult);
+                        Logger.log('send fail: ' + sendResult);
 
                     } else {
                         chrome.sockets.udp.onReceive.addListener(onReceive);
-                        console.log('sendTo: success ' + port);
+                        Logger.log('sendTo: success ' + port);
                     }
                 });
             });
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index 6bc4ee80f9..bc869ccd56 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -146,29 +146,6 @@ paper-icon-button.mediaButton {
     margin-right: .5em !important;
 }
 
-::-ms-thumb {
-    background-image: linear-gradient(#fefefe,#dddddd);
-    width: 15px;
-}
-
-::-ms-track {
-    padding: 0;
-    border: 0;
-    color: #777;
-}
-
-input[type="range"]::-ms-fill-lower {
-    background-color: #777;
-}
-
-input[type="range"]::-ms-fill-upper {
-    background-color: #777;
-}
-
-::-ms-tooltip {
-    display: none; /* display and visibility only */
-}
-
 @media all and (max-width: 800px) {
 
     .nowPlayingBar .mediaButton {
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index ce9b79e47b..5a451f71f8 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -13,24 +13,12 @@
     max-width: 360px;
 }
 
-.nowPlayingTimeContainer {
-    max-width: 280px;
-    margin: 1.5em auto;
-}
-
-.nowPlayingPage .positionSliderContainer {
-    width: 100%;
+.nowPlayingPageTimeContainer {
     min-width: 200px;
+    max-width: 280px;
+    margin: 0 auto 1em;
 }
 
-    .nowPlayingPage .positionSliderContainer .ui-slider-track {
-        margin: 0 0 !important;
-    }
-
-    .nowPlayingPage .positionSliderContainer .ui-slider {
-        height: 20px;
-    }
-
 .nowPlayingNavButtonContainer {
     width: 400px;
 }
@@ -134,6 +122,13 @@
     }
 }
 
+@media all and (min-width: 800px) {
+
+    .nowPlayingPageTimeContainer {
+        max-width: 340px;
+    }
+}
+
 @media (orientation: landscape) {
     .nowPlayingInfoMetadata, .nowPlayingInfoButtons {
         display: inline-block;
@@ -153,14 +148,14 @@
 
 @media (orientation: landscape) and (max-height: 400px) {
     .nowPlayingPageTitle {
-        margin-top: -1em;
+        margin-top: -1.5em;
         padding: 0 60px;
     }
 }
 
 @media (orientation: portrait) and (max-height: 600px) {
     .nowPlayingPageTitle {
-        margin-top: -1em;
+        margin-top: -1.5em;
         padding: 0 60px;
     }
 }
@@ -172,9 +167,12 @@
     margin-right: .25em;
 }
 
-@media all and (max-width: 600px) {
+@media all and (max-width: 700px) {
 
     .nowPlayingSelectedPlayer {
         display: none;
     }
 }
+
+.nowPlayingPositionSlider .pin > #sliderKnob > #sliderKnobInner::after {
+}
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 7041d0819c..e21e89e178 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -305,6 +305,9 @@ html {
     touch-action: manipulation;
     /* Prevent white flickering */
     background-color: #1f1f1f;
+    /* Normalize for different browsers */
+    margin: 0;
+    padding: 0;
 }
 
 body {
@@ -315,11 +318,16 @@ body {
     /*-webkit-overflow-scrolling: touch;*/
     /* Remove the white default from jqm */
     background-color: transparent !important;
+    /* Normalize for different browsers */
+    margin: 0;
+    padding: 0;
 }
 
 /* Without this, no content will be displayed in mobile safari */
 .pageContainer {
     overflow-x: visible !important;
+    /* jqm often wants to assign a background color to this */
+    background-color: transparent !important;
 }
 
 .bodyWithPopupOpen {
@@ -1388,4 +1396,4 @@ progress {
 
 .supporterMembershipDisabled .tabSupporterMembership {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index ed9eaf757a..d0a60d2e7a 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -49,8 +49,8 @@
                                 <p class="externalUrl"></p>
 
                                 <div style="margin-top: 1em;">
-                                    <paper-button raised class="subdued btnRestartContainer hide"><iron-icon icon="refresh" onclick="DashboardPage.restart();"></iron-icon><span>${ButtonRestart}</span></paper-button>
-                                    <paper-button id="btnShutdown" raised class="subdued"><iron-icon icon="close" onclick="DashboardPage.shutdown();"></iron-icon><span>${ButtonShutdown}</span></paper-button>
+                                    <paper-button raised class="subdued btnRestartContainer hide" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestart}</span></paper-button>
+                                    <paper-button id="btnShutdown" raised class="subdued" onclick="DashboardPage.shutdown();"><iron-icon icon="close"></iron-icon><span>${ButtonShutdown}</span></paper-button>
                                 </div>
                             </div>
                         </div>
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index fc6b880ada..aa35b519c4 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -18,18 +18,15 @@
                 <neon-animatable>
                     <div style="text-align:center;padding-bottom:100px;">
 
-                        <div class="nowPlayingPageTitle">
-                            <div class="itemName" style="line-height: normal;"></div>
+                        <div class="nowPlayingPageTitle" style="line-height: normal;">
                         </div>
 
                         <div class="nowPlayingInfoMetadata">
                             <div class="nowPlayingPageImage" style="margin: 1em 0;"></div>
 
-                            <div class="nowPlayingTimeContainer">
+                            <div class="nowPlayingPageTimeContainer">
                                 <div>
-                                    <div class="positionSliderContainer sliderContainer requiresJqmCreate" style="margin: 0 auto;">
-                                        <input type="range" style="display: none;" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" data-mini="true" data-theme="a" data-highlight="true" />
-                                    </div>
+                                    <paper-slider pin step=".1" min="0" max="100" value="0" class="noSwipe nowPlayingPositionSlider"></paper-slider>
                                 </div>
                                 <div style="text-align:left;">
                                     <div class="positionTime" style="float:left;"></div>
diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js
index ebc6259af9..e41855b60f 100644
--- a/dashboard-ui/scripts/actionsheet.js
+++ b/dashboard-ui/scripts/actionsheet.js
@@ -2,6 +2,7 @@
 
     function onClosed() {
         $(this).remove();
+        $(document.body).removeClass('bodyWithPopupOpen');
     }
     function show(options) {
 
@@ -77,7 +78,9 @@
                 html += '</paper-button>';
             }
 
-            //html += '</paper-dialog-scrollable>';
+            if (isScrollable) {
+                html += '</paper-dialog-scrollable>';
+            }
 
             if (options.showCancel) {
                 html += '<div class="buttons">';
@@ -85,9 +88,7 @@
                 html += '</div>';
             }
 
-            if (isScrollable) {
-                html += '</paper-dialog>';
-            }
+            html += '</paper-dialog>';
 
             $(document.body).append(html);
 
diff --git a/dashboard-ui/scripts/backdrops.js b/dashboard-ui/scripts/backdrops.js
index 42bf78b28b..44667a1991 100644
--- a/dashboard-ui/scripts/backdrops.js
+++ b/dashboard-ui/scripts/backdrops.js
@@ -26,7 +26,7 @@
 
         if (data) {
 
-            console.log('Found backdrop id list in cache. Key: ' + key)
+            Logger.log('Found backdrop id list in cache. Key: ' + key)
             data = JSON.parse(data);
             deferred.resolveWith(null, [data]);
         } else {
diff --git a/dashboard-ui/scripts/chromecast.js b/dashboard-ui/scripts/chromecast.js
index 9fb95de4a3..7a62f9dee5 100644
--- a/dashboard-ui/scripts/chromecast.js
+++ b/dashboard-ui/scripts/chromecast.js
@@ -82,7 +82,7 @@
           this.sessionListener.bind(this),
           this.receiverListener.bind(this));
 
-        console.log('chromecast.initialize');
+        Logger.log('chromecast.initialize');
 
         chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.errorHandler);
 
@@ -93,14 +93,14 @@
      */
     CastPlayer.prototype.onInitSuccess = function () {
         this.isInitialized = true;
-        console.log("chromecast init success");
+        Logger.log("chromecast init success");
     };
 
     /**
      * Generic error callback function 
      */
     CastPlayer.prototype.onError = function () {
-        console.log("chromecast error");
+        Logger.log("chromecast error");
     };
 
     /**
@@ -115,7 +115,7 @@
         this.session = e;
         if (this.session) {
 
-            console.log('sessionListener ' + JSON.stringify(e));
+            Logger.log('sessionListener ' + JSON.stringify(e));
 
             if (this.session.media[0]) {
                 this.onMediaDiscovered('activeSession', this.session.media[0]);
@@ -165,11 +165,11 @@
     CastPlayer.prototype.receiverListener = function (e) {
 
         if (e === 'available') {
-            console.log("chromecast receiver found");
+            Logger.log("chromecast receiver found");
             this.hasReceivers = true;
         }
         else {
-            console.log("chromecast receiver list empty");
+            Logger.log("chromecast receiver list empty");
             this.hasReceivers = false;
         }
     };
@@ -179,7 +179,7 @@
      */
     CastPlayer.prototype.sessionUpdateListener = function (isAlive) {
 
-        console.log('sessionUpdateListener alive: ' + isAlive);
+        Logger.log('sessionUpdateListener alive: ' + isAlive);
 
         if (isAlive) {
         }
@@ -188,7 +188,7 @@
             this.deviceState = DEVICE_STATE.IDLE;
             this.castPlayerState = PLAYER_STATE.IDLE;
 
-            console.log('sessionUpdateListener: setting currentMediaSession to null');
+            Logger.log('sessionUpdateListener: setting currentMediaSession to null');
             this.currentMediaSession = null;
 
             MediaController.removeActivePlayer(PlayerName);
@@ -201,7 +201,7 @@
      * session request in opt_sessionRequest. 
      */
     CastPlayer.prototype.launchApp = function () {
-        console.log("chromecast launching app...");
+        Logger.log("chromecast launching app...");
         chrome.cast.requestSession(this.onRequestSessionSuccess.bind(this), this.onLaunchError.bind(this));
     };
 
@@ -211,7 +211,7 @@
      */
     CastPlayer.prototype.onRequestSessionSuccess = function (e) {
 
-        console.log("chromecast session success: " + e.sessionId);
+        Logger.log("chromecast session success: " + e.sessionId);
         this.onSessionConnected(e);
     };
 
@@ -238,7 +238,7 @@
      */
     CastPlayer.prototype.sessionMediaListener = function (e) {
 
-        console.log('sessionMediaListener');
+        Logger.log('sessionMediaListener');
         this.currentMediaSession = e;
         this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler);
     };
@@ -247,7 +247,7 @@
      * Callback function for launch error
      */
     CastPlayer.prototype.onLaunchError = function () {
-        console.log("chromecast launch error");
+        Logger.log("chromecast launch error");
         this.deviceState = DEVICE_STATE.ERROR;
 
         //Dashboard.alert({
@@ -273,11 +273,11 @@
      * Callback function for stop app success 
      */
     CastPlayer.prototype.onStopAppSuccess = function (message) {
-        console.log(message);
+        Logger.log(message);
         this.deviceState = DEVICE_STATE.IDLE;
         this.castPlayerState = PLAYER_STATE.IDLE;
 
-        console.log('onStopAppSuccess: setting currentMediaSession to null');
+        Logger.log('onStopAppSuccess: setting currentMediaSession to null');
         this.currentMediaSession = null;
     };
 
@@ -288,7 +288,7 @@
     CastPlayer.prototype.loadMedia = function (options, command) {
 
         if (!this.session) {
-            console.log("no session");
+            Logger.log("no session");
             return;
         }
 
@@ -365,13 +365,13 @@
     CastPlayer.prototype.sendMessageInternal = function (message) {
 
         message = JSON.stringify(message);
-        //console.log(message);
+        //Logger.log(message);
 
         this.session.sendMessage(messageNamespace, message, this.onPlayCommandSuccess.bind(this), this.errorHandler);
     };
 
     CastPlayer.prototype.onPlayCommandSuccess = function () {
-        console.log('Message was sent to receiver ok.');
+        Logger.log('Message was sent to receiver ok.');
     };
 
     /**
@@ -380,7 +380,7 @@
      */
     CastPlayer.prototype.onMediaDiscovered = function (how, mediaSession) {
 
-        console.log("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
+        Logger.log("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
         this.currentMediaSession = mediaSession;
 
         if (how == 'loadMedia') {
@@ -403,7 +403,7 @@
         if (e == false) {
             this.castPlayerState = PLAYER_STATE.IDLE;
         }
-        console.log("chromecast updating media: " + e);
+        Logger.log("chromecast updating media: " + e);
     };
 
     /**
@@ -413,7 +413,7 @@
     CastPlayer.prototype.setReceiverVolume = function (mute, vol) {
 
         if (!this.currentMediaSession) {
-            console.log('this.currentMediaSession is null');
+            Logger.log('this.currentMediaSession is null');
             return;
         }
 
@@ -441,7 +441,7 @@
      * Callback function for media command success 
      */
     CastPlayer.prototype.mediaCommandSuccessCallback = function (info, e) {
-        console.log(info);
+        Logger.log(info);
     };
 
     // Create Cast Player
@@ -468,14 +468,14 @@
 
             MediaController.setActivePlayer(PlayerName, self.getCurrentTargetInfo());
 
-            console.log('cc: connect');
+            Logger.log('cc: connect');
             // Reset this so the next query doesn't make it appear like content is playing.
             self.lastPlayerData = {};
         });
 
         $(castPlayer).on("playbackstart", function (e, data) {
 
-            console.log('cc: playbackstart');
+            Logger.log('cc: playbackstart');
 
             castPlayer.initializeCastPlayer();
 
@@ -485,7 +485,7 @@
 
         $(castPlayer).on("playbackstop", function (e, data) {
 
-            console.log('cc: playbackstop');
+            Logger.log('cc: playbackstop');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("playbackstop", [state]);
@@ -496,7 +496,7 @@
 
         $(castPlayer).on("playbackprogress", function (e, data) {
 
-            console.log('cc: positionchange');
+            Logger.log('cc: positionchange');
             var state = self.getPlayerStateInternal(data);
 
             $(self).trigger("positionchange", [state]);
@@ -789,7 +789,7 @@
             data = data || self.lastPlayerData;
             self.lastPlayerData = data;
 
-            console.log(JSON.stringify(data));
+            Logger.log(JSON.stringify(data));
             return data;
         };
 
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 50904618fe..c25fb77a6f 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -73,7 +73,7 @@
         var list = DashboardPage.sessionsList;
 
         if (list) {
-            console.log('refreshSessionsLocally');
+            Logger.log('refreshSessionsLocally');
             DashboardPage.renderActiveConnections($.mobile.activePage, list);
         }
     },
diff --git a/dashboard-ui/scripts/edititemimages.js b/dashboard-ui/scripts/edititemimages.js
index 6e5b52901b..abefc39567 100644
--- a/dashboard-ui/scripts/edititemimages.js
+++ b/dashboard-ui/scripts/edititemimages.js
@@ -416,7 +416,7 @@
         };
         reader.onabort = function () {
             Dashboard.hideLoadingMsg();
-            console.log('File read cancelled');
+            Logger.log('File read cancelled');
         };
 
         // Closure to capture the file information.
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index 7ebf40ffed..6c8c9895f7 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -1362,7 +1362,7 @@
 
                 var page = $.mobile.activePage;
 
-                console.log('Item updated - reloading metadata');
+                Logger.log('Item updated - reloading metadata');
                 reload(page);
                 $('#refreshLoading', page).hide();
             }
diff --git a/dashboard-ui/scripts/edititemsubtitles.js b/dashboard-ui/scripts/edititemsubtitles.js
index 49b2308f5a..2877f4a3ff 100644
--- a/dashboard-ui/scripts/edititemsubtitles.js
+++ b/dashboard-ui/scripts/edititemsubtitles.js
@@ -289,7 +289,7 @@
 
             if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
 
-                console.log('Item updated - reloading subtitles');
+                Logger.log('Item updated - reloading subtitles');
                 reload($.mobile.activePage);
             }
         }
diff --git a/dashboard-ui/scripts/externalplayer.js b/dashboard-ui/scripts/externalplayer.js
index 37a82ed938..94c231e034 100644
--- a/dashboard-ui/scripts/externalplayer.js
+++ b/dashboard-ui/scripts/externalplayer.js
@@ -397,7 +397,7 @@
 
             $('.sliderValue', elem).html(tooltext);
 
-            console.log("slidin", pct, self.currentDurationTicks, time);
+            Logger.log("slidin", pct, self.currentDurationTicks, time);
 
         });
     }
diff --git a/dashboard-ui/scripts/favorites.js b/dashboard-ui/scripts/favorites.js
index 1ad2255aed..5a9afbac1f 100644
--- a/dashboard-ui/scripts/favorites.js
+++ b/dashboard-ui/scripts/favorites.js
@@ -51,12 +51,13 @@
                     showDetailsMenu: true
                 });
 
+                html += '</div>';
+
                 if (result.TotalRecordCount > result.Items.length) {
                     var href = "favorites.html?sectionid=" + section.id;
 
                     html += '<a class="clearLink" href="' + href + '"><paper-button raised class="more">' + Globalize.translate('ButtonMoreItems') + '</paper-button></a>';
                 }
-                html += '</div>';
             }
 
             elem = $(elem).html(html).lazyChildren();
diff --git a/dashboard-ui/scripts/htmlmediarenderer.js b/dashboard-ui/scripts/htmlmediarenderer.js
index 0d392c51ce..56cef88c7e 100644
--- a/dashboard-ui/scripts/htmlmediarenderer.js
+++ b/dashboard-ui/scripts/htmlmediarenderer.js
@@ -46,7 +46,7 @@
         function onError() {
 
             var errorCode = this.error ? this.error.code : '';
-            console.log('Media element error code: ' + errorCode);
+            Logger.log('Media element error code: ' + errorCode);
 
             $(self).trigger('error');
         }
@@ -275,7 +275,7 @@
 
         self.setCurrentTrackElement = function (trackIndex) {
 
-            console.log('Setting new text track index to: ' + trackIndex);
+            Logger.log('Setting new text track index to: ' + trackIndex);
 
             var allTracks = mediaElement.textTracks; // get list of tracks
 
@@ -291,7 +291,7 @@
                     mode = 0; // hide all other tracks
                 }
 
-                console.log('Setting track ' + i + ' mode to: ' + mode);
+                Logger.log('Setting track ' + i + ' mode to: ' + mode);
 
                 // Safari uses integers for the mode property
                 // http://www.jwplayer.com/html5/scripting/
@@ -328,7 +328,7 @@
                         track.removeCue(track.cues[0]);
                     }
                 } catch (e) {
-                    console.log('Error removing cue from textTrack');
+                    Logger.log('Error removing cue from textTrack');
                 }
             }
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 9f64994d2b..6890767723 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2768,7 +2768,7 @@
                         miscInfo.push(text);
                     }
                     catch (e) {
-                        console.log("Error parsing date: " + item.PremiereDate);
+                        Logger.log("Error parsing date: " + item.PremiereDate);
                     }
                 }
             }
@@ -2787,7 +2787,7 @@
                     }
                 }
                 catch (e) {
-                    console.log("Error parsing date: " + item.PremiereDate);
+                    Logger.log("Error parsing date: " + item.PremiereDate);
                 }
             }
 
@@ -2813,7 +2813,7 @@
 
                         }
                         catch (e) {
-                            console.log("Error parsing date: " + item.EndDate);
+                            Logger.log("Error parsing date: " + item.EndDate);
                         }
                     }
 
@@ -2834,7 +2834,7 @@
                         miscInfo.push(text);
                     }
                     catch (e) {
-                        console.log("Error parsing date: " + item.PremiereDate);
+                        Logger.log("Error parsing date: " + item.PremiereDate);
                     }
                 }
             }
diff --git a/dashboard-ui/scripts/livetvcomponents.js b/dashboard-ui/scripts/livetvcomponents.js
index aa38fe9e0a..1c99c46c75 100644
--- a/dashboard-ui/scripts/livetvcomponents.js
+++ b/dashboard-ui/scripts/livetvcomponents.js
@@ -85,7 +85,7 @@
                     airDate = parseISO8601Date(airDate, { toLocal: true }).toLocaleDateString();
                 }
                 catch (e) {
-                    console.log("Error parsing date: " + airDate);
+                    Logger.log("Error parsing date: " + airDate);
                 }
 
 
diff --git a/dashboard-ui/scripts/livetvguide.js b/dashboard-ui/scripts/livetvguide.js
index 050a9d5e88..b1eaeded32 100644
--- a/dashboard-ui/scripts/livetvguide.js
+++ b/dashboard-ui/scripts/livetvguide.js
@@ -53,7 +53,7 @@
         var date = currentDate;
 
         var nextDay = new Date(date.getTime() + msPerDay - 1);
-        console.log(nextDay);
+        Logger.log(nextDay);
         channelsPromise.done(function (channelsResult) {
 
             ApiClient.getLiveTvPrograms({
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js
index d4cc08b675..0a341f6d1b 100644
--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/dashboard-ui/scripts/mediacontroller.js
@@ -207,7 +207,7 @@
 
             if (bypass()) return;
 
-            console.log("keyCode", e.keyCode);
+            Logger.log("keyCode", e.keyCode);
 
             if (keyResult[e.keyCode]) {
                 e.preventDefault();
@@ -306,7 +306,7 @@
             currentPlayer = player;
             currentTargetInfo = targetInfo;
 
-            console.log('Active player: ' + JSON.stringify(currentTargetInfo));
+            Logger.log('Active player: ' + JSON.stringify(currentTargetInfo));
 
             triggerPlayerChange(player, targetInfo);
         };
@@ -335,7 +335,7 @@
                 currentPlayer = player;
                 currentTargetInfo = targetInfo;
 
-                console.log('Active player: ' + JSON.stringify(currentTargetInfo));
+                Logger.log('Active player: ' + JSON.stringify(currentTargetInfo));
 
                 triggerPlayerChange(player, targetInfo);
             });
@@ -581,7 +581,7 @@
 
             // Full list
             // https://github.com/MediaBrowser/MediaBrowser/blob/master/MediaBrowser.Model/Session/GeneralCommand.cs#L23
-            console.log('MediaController received command: ' + cmd.Name);
+            Logger.log('MediaController received command: ' + cmd.Name);
             switch (cmd.Name) {
 
                 case 'VolumeUp':
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 855f3760a0..5b8d682466 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -530,7 +530,7 @@
 
                 tooltip.text(tooltext);
 
-                console.log("slidin", pct, self.currentDurationTicks, time);
+                Logger.log("slidin", pct, self.currentDurationTicks, time);
 
             }).on("slidestart", function (e) {
                 trackChange = true;
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index f714d7ee0b..5a1b5b3744 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -1041,7 +1041,7 @@
 
             if (newItem) {
 
-                console.log('playing next track');
+                Logger.log('playing next track');
 
                 self.playInternal(newItem, 0, function () {
                     self.setPlaylistState(newIndex);
@@ -1179,7 +1179,7 @@
 
             if (self.currentMediaRenderer) {
 
-                console.log('MediaPlayer toggling mute');
+                Logger.log('MediaPlayer toggling mute');
 
                 if (self.volume()) {
                     self.mute();
@@ -1208,7 +1208,7 @@
 
             if (self.currentMediaRenderer) {
 
-                console.log('MediaPlayer setting volume to ' + val);
+                Logger.log('MediaPlayer setting volume to ' + val);
                 self.currentMediaRenderer.volume(val / 100);
 
                 self.onVolumeChanged(self.currentMediaRenderer);
@@ -1550,7 +1550,7 @@
 
         self.onPlaybackStopped = function () {
 
-            console.log('playback stopped');
+            Logger.log('playback stopped');
 
             $('body').removeClass('bodyWithPopupOpen');
 
@@ -1674,13 +1674,13 @@
 
             $(mediaRenderer).on("volumechange.mediaplayerevent", function () {
 
-                console.log('audio element event: volumechange');
+                Logger.log('audio element event: volumechange');
 
                 self.onVolumeChanged(this);
 
             }).one("playing.mediaplayerevent", function () {
 
-                console.log('audio element event: playing');
+                Logger.log('audio element event: playing');
 
                 // For some reason this is firing at the start, so don't bind until playback has begun
                 $(this).on("ended.playbackstopped", self.onPlaybackStopped).one('ended.playnext', self.playNextAfterEnded);
@@ -1689,7 +1689,7 @@
 
             }).on("pause.mediaplayerevent", function () {
 
-                console.log('audio element event: pause');
+                Logger.log('audio element event: pause');
 
                 self.onPlaystateChange(this);
 
@@ -1698,7 +1698,7 @@
 
             }).on("playing.mediaplayerevent", function () {
 
-                console.log('audio element event: playing');
+                Logger.log('audio element event: playing');
 
                 self.onPlaystateChange(this);
 
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js
index 95458792c3..dc942fdb16 100644
--- a/dashboard-ui/scripts/moviecollections.js
+++ b/dashboard-ui/scripts/moviecollections.js
@@ -359,6 +359,9 @@
 
         $('.fldSelectedItemIds', panel).val(items.join(','));
 
+
+        require(['jqmicons']);
+
         if (items.length) {
             $('.fldSelectCollection', panel).show();
             populateCollections(panel);
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index a859130a74..063b7012db 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -23,7 +23,7 @@
         var html = '';
 
         // add return false because on iOS clicking the bar often ends up clicking the content underneath. 
-        html += '<div class="nowPlayingBar" style="display:none;" onclick="return false;">';
+        html += '<div class="nowPlayingBar" style="display:none;">';
 
         html += '<div class="nowPlayingImage"></div>';
         html += '<div class="nowPlayingText"></div>';
@@ -331,6 +331,10 @@
             nowPlayingTextElement.removeClass('nowPlayingDoubleText');
         }
 
+        if (state.NowPlayingItem.Id) {
+            nameHtml = '<a style="color:inherit;text-decoration:none;" href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + nameHtml + '</a>';
+        }
+
         nowPlayingTextElement.html(nameHtml);
 
         var url;
@@ -380,7 +384,12 @@
 
         currentImgUrl = url;
 
-        nowPlayingImageElement.html('<img src="' + url + '" />');
+        var imgHtml = '<img src="' + url + '" />';
+
+        if (state.NowPlayingItem.Id) {
+            imgHtml = '<a href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + imgHtml + '</a>';
+        }
+        nowPlayingImageElement.html(imgHtml);
 
         if (nowPlayingItem.Id) {
             ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).done(function (item) {
@@ -391,7 +400,7 @@
 
     function onPlaybackStart(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
 
         var player = this;
 
@@ -418,7 +427,7 @@
 
     function onPlaybackStopped(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         player.endPlayerUpdates();
@@ -428,7 +437,7 @@
 
     function onStateChanged(e, state) {
 
-        //console.log('nowplaying event: ' + e.type);
+        //Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js
index acfa4ca40a..7fab748fc6 100644
--- a/dashboard-ui/scripts/nowplayingpage.js
+++ b/dashboard-ui/scripts/nowplayingpage.js
@@ -2,7 +2,6 @@
 
     var currentPlayer;
     var lastPlayerState;
-    var isPositionSliderActive;
 
     function populateChapters(elem, chapters, itemId, runtimeTicks) {
 
@@ -307,27 +306,33 @@
             }
         });
 
-        $('.positionSlider', page).on('slidestart', function () {
+        $('.nowPlayingPositionSlider', page).on('change', function () {
 
-            isPositionSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isPositionSliderActive = false;
+            var value = this.value;
 
             if (currentPlayer && lastPlayerState) {
 
-                var newPercent = parseFloat(this.value);
+                var newPercent = parseFloat(value);
                 var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
-
                 currentPlayer.seek(Math.floor(newPositionTicks));
             }
         });
 
-        //$(page).on('swipedown', function () {
+        $('.nowPlayingPositionSlider', page)[0]._setPinValue = function (value) {
 
-        //    history.back();
-        //});
+            var state = lastPlayerState;
+
+            if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
+                this.pinValue = '--:--';
+                return;
+            }
+
+            var ticks = state.NowPlayingItem.RunTimeTicks;
+            ticks /= 100;
+            ticks *= value;
+
+            this.pinValue = Dashboard.getDisplayTime(ticks);
+        };
 
         $(page).on('click', '.lnkPlayFromIndex', function () {
 
@@ -431,29 +436,23 @@
             hideButton(btnPlay);
         }
 
-        if (!isPositionSliderActive) {
+        var positionSlider = $('.nowPlayingPositionSlider', page)[0];
 
-            var positionSlider = $('.positionSlider', page);
+        if (!positionSlider.dragging) {
 
             if (item && item.RunTimeTicks) {
 
                 var pct = playState.PositionTicks / item.RunTimeTicks;
                 pct *= 100;
 
-                positionSlider.val(pct);
+                positionSlider.value = pct;
 
             } else {
 
-                positionSlider.val(0);
+                positionSlider.value = 0;
             }
 
-            if (playState.CanSeek) {
-                positionSlider.slider("enable");
-            } else {
-                positionSlider.slider("disable");
-            }
-
-            positionSlider.slider('refresh');
+            positionSlider.disabled = !playState.CanSeek;
         }
 
         if (playState.PositionTicks == null) {
@@ -481,8 +480,9 @@
     function updateNowPlayingInfo(page, state) {
 
         var item = state.NowPlayingItem;
+        var displayName = item ? MediaController.getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
 
-        $('.itemName', page).html(item ? MediaController.getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '');
+        $('.nowPlayingPageTitle', page).html(displayName).visible(displayName.length > 0);
 
         var url;
         var backdropUrl = null;
@@ -588,20 +588,6 @@
         updateSupportedCommands(page, supportedCommands);
     }
 
-    function showIntro() {
-
-        var expected = '2';
-
-        //if (appStorage.getItem('remotecontrolswipedown') != expected) {
-        //    Dashboard.alert({
-        //        message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
-        //        title: Globalize.translate('HeaderAlert')
-        //    });
-        //    appStorage.setItem('remotecontrolswipedown', expected);
-        //}
-
-    }
-
     function loadPlaylist(page) {
 
         var html = '';
@@ -694,6 +680,20 @@
         }
     }
 
+    function allowSwipe(e) {
+
+        var target = $(e.target);
+
+        if (target.is('.noSwipe')) {
+            return false;
+        }
+        if (target.parents('.noSwipe').length) {
+            return false;
+        }
+
+        return true;
+    }
+
     $(document).on('pageinitdepends', "#nowPlayingPage", function () {
 
         var page = this;
@@ -705,29 +705,33 @@
 
         $('.requiresJqmCreate', this).trigger('create');
 
-        $(page).on('swipeleft', function () {
+        $(page).on('swipeleft', function (e) {
 
-            var pages = this.querySelectorAll('neon-animated-pages')[0];
-            var tabs = this.querySelectorAll('paper-tabs')[0];
+            if (allowSwipe(e)) {
+                var pages = this.querySelectorAll('neon-animated-pages')[0];
+                var tabs = this.querySelectorAll('paper-tabs')[0];
 
-            var selected = parseInt(pages.selected || '0');
-            if (selected < 2) {
-                pages.entryAnimation = 'slide-from-right-animation';
-                pages.exitAnimation = 'slide-left-animation';
-                tabs.selectNext();
+                var selected = parseInt(pages.selected || '0');
+                if (selected < 2) {
+                    pages.entryAnimation = 'slide-from-right-animation';
+                    pages.exitAnimation = 'slide-left-animation';
+                    tabs.selectNext();
+                }
             }
         });
 
-        $(page).on('swiperight', function () {
+        $(page).on('swiperight', function (e) {
 
-            var pages = this.querySelectorAll('neon-animated-pages')[0];
-            var tabs = this.querySelectorAll('paper-tabs')[0];
+            if (allowSwipe(e)) {
+                var pages = this.querySelectorAll('neon-animated-pages')[0];
+                var tabs = this.querySelectorAll('paper-tabs')[0];
 
-            var selected = parseInt(pages.selected || '0');
-            if (selected > 0) {
-                pages.entryAnimation = 'slide-from-left-animation';
-                pages.exitAnimation = 'slide-right-animation';
-                tabs.selectPrevious();
+                var selected = parseInt(pages.selected || '0');
+                if (selected > 0) {
+                    pages.entryAnimation = 'slide-from-left-animation';
+                    pages.exitAnimation = 'slide-right-animation';
+                    tabs.selectPrevious();
+                }
             }
         });
 
@@ -757,7 +761,6 @@
 
         });
 
-        showIntro();
         loadPlaylist(page);
 
         var tab = getParameterByName('tab');
diff --git a/dashboard-ui/scripts/ratingdialog.js b/dashboard-ui/scripts/ratingdialog.js
index 87d2faa8b2..58a95626e9 100644
--- a/dashboard-ui/scripts/ratingdialog.js
+++ b/dashboard-ui/scripts/ratingdialog.js
@@ -67,7 +67,7 @@
                     };
 
                     options.callback(review);
-                } else console.log("No callback function provided");
+                } else Logger.log("No callback function provided");
 
                 return false;
             });
@@ -91,7 +91,7 @@
                 id: id,
                 rating: rating,
                 callback: function (review) {
-                    console.log(review);
+                    Logger.log(review);
                     dialog.close();
 
                     ApiClient.createPackageReview(review).done(function () {
diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js
index af1a10264a..d7040fc807 100644
--- a/dashboard-ui/scripts/remotecontrol.js
+++ b/dashboard-ui/scripts/remotecontrol.js
@@ -327,7 +327,7 @@
         }
         else if (msg.MessageType === "SessionEnded") {
 
-            console.log("Server reports another session ended");
+            Logger.log("Server reports another session ended");
 
             if (MediaController.getPlayerInfo().id == msg.Data.Id) {
                 MediaController.setDefaultPlayerActive();
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 18b30346d2..603e1984e9 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -60,7 +60,14 @@ var Dashboard = {
         $.mobile.loader.prototype.options.textOnly = true;
         $.mobile.loader.prototype.options.text = "";
 
+        $.mobile.hideUrlBar = false;
+        $.mobile.autoInitializePage = false;
         $.mobile.changePage.defaults.showLoadMsg = false;
+
+        // These are not needed. Nulling them out can help reduce dom querying when pages are loaded
+        $.mobile.nojs = null;
+        $.mobile.degradeInputsWithin = null;
+        $.mobile.keepNative = ":jqmData(role='none')";
     },
 
     isConnectMode: function () {
@@ -607,7 +614,7 @@ var Dashboard = {
             html += '</div>';
             html += '</paper-dialog>';
 
-            $(document.body).append(html);
+            $(document.body).append(html).addClass('bodyWithPopupOpen');
 
             // This timeout is obviously messy but it's unclear how to determine when the webcomponent is ready for use
             // element onload never fires
@@ -619,6 +626,7 @@ var Dashboard = {
                 $(dlg).on('iron-overlay-closed', function (e) {
                     var confirmed = this.closingReason.confirmed;
                     $(this).remove();
+                    $(document.body).removeClass('bodyWithPopupOpen');
                     callback(confirmed);
                 });
 
@@ -1058,7 +1066,7 @@ var Dashboard = {
             case 'ToggleFullscreen':
                 break;
             default:
-                console.log('Unrecognized command: ' + cmd.Name);
+                Logger.log('Unrecognized command: ' + cmd.Name);
                 break;
         }
     },
@@ -1932,7 +1940,7 @@ var AppInfo = {};
                 });
 
                 if (!localActivePlayers.length) {
-                    console.log('Sending close web socket command');
+                    Logger.log('Sending close web socket command');
                     apiClient.closeWebSocket();
                 }
             }
@@ -2083,6 +2091,7 @@ var AppInfo = {};
                         $(function () {
                             onDocumentReady();
                             Dashboard.initPromiseDone = true;
+                            $.mobile.initializePage();
                             deferred.resolve();
                         });
                     });
@@ -2092,8 +2101,10 @@ var AppInfo = {};
                 createConnectionManager(capabilities);
 
                 $(function () {
+
                     onDocumentReady();
                     Dashboard.initPromiseDone = true;
+                    $.mobile.initializePage();
                     deferred.resolve();
                 });
             }
@@ -2234,7 +2245,7 @@ $(document).on('pagecreate', ".page", function () {
 
         if (!isConnectMode && this.id !== "loginPage" && !page.hasClass('forgotPasswordPage') && !page.hasClass('wizardPage')) {
 
-            console.log('Not logged into server. Redirecting to login.');
+            Logger.log('Not logged into server. Redirecting to login.');
             Dashboard.logout();
             return;
         }
diff --git a/dashboard-ui/scripts/supporterkeypage.js b/dashboard-ui/scripts/supporterkeypage.js
index 58f5422521..0edb1c26cd 100644
--- a/dashboard-ui/scripts/supporterkeypage.js
+++ b/dashboard-ui/scripts/supporterkeypage.js
@@ -78,7 +78,7 @@
         };
 
         var url = "http://mb3admin.com/admin/service/supporter/linkKeys";
-        console.log(url);
+        Logger.log(url);
         $.post(url, info).done(function (res) {
             var result = JSON.parse(res);
             Dashboard.hideLoadingMsg();
@@ -87,7 +87,7 @@
             } else {
                 Dashboard.showError(result.ErrorMessage);
             }
-            console.log(result);
+            Logger.log(result);
 
         });
 
@@ -102,7 +102,7 @@
         var email = $('#txtEmail', form).val();
 
         var url = "http://mb3admin.com/admin/service/supporter/retrievekey?email=" + email;
-        console.log(url);
+        Logger.log(url);
         $.post(url).done(function (res) {
             var result = JSON.parse(res);
             Dashboard.hideLoadingMsg();
@@ -111,7 +111,7 @@
             } else {
                 Dashboard.showError(result.ErrorMessage);
             }
-            console.log(result);
+            Logger.log(result);
 
         });
 
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index bc62793910..71782ae753 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -310,3 +310,7 @@ paper-fab.blue {
 paper-fab.square {
     border-radius: 5px;
 }
+
+paper-slider {
+    width: 100%;
+}
diff --git a/dashboard-ui/vulcanize-in.html b/dashboard-ui/vulcanize-in.html
index f53d747f08..6846ec658a 100644
--- a/dashboard-ui/vulcanize-in.html
+++ b/dashboard-ui/vulcanize-in.html
@@ -15,4 +15,5 @@
 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="bower_components/paper-slider/paper-slider.html">
 <link rel="import" href="thirdparty/emby-icons.html">
\ No newline at end of file
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 75c6672ea1..553ff7ec39 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -11252,6 +11252,811 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
 
 
 
+<script>
+
+ /** 
+ * `iron-range-behavior` provides the behavior for something with a minimum to maximum range.
+ *
+ * @demo demo/index.html
+ * @polymerBehavior 
+ */
+ Polymer.IronRangeBehavior = {
+
+  properties: {
+
+    /**
+     * The number that represents the current value.
+     */
+    value: {
+      type: Number,
+      value: 0,
+      notify: true,
+      reflectToAttribute: true
+    },
+
+    /**
+     * The number that indicates the minimum value of the range.
+     */
+    min: {
+      type: Number,
+      value: 0,
+      notify: true
+    },
+
+    /**
+     * The number that indicates the maximum value of the range.
+     */
+    max: {
+      type: Number,
+      value: 100,
+      notify: true
+    },
+
+    /**
+     * Specifies the value granularity of the range's value.
+     */
+    step: {
+      type: Number,
+      value: 1,
+      notify: true
+    },
+
+    /**
+     * Returns the ratio of the value.
+     */
+    ratio: {
+      type: Number,
+      value: 0,
+      readOnly: true,
+      notify: true
+    },
+  },
+
+  observers: [
+    '_update(value, min, max, step)'
+  ],
+
+  _calcRatio: function(value) {
+    return (this._clampValue(value) - this.min) / (this.max - this.min);
+  },
+
+  _clampValue: function(value) {
+    return Math.min(this.max, Math.max(this.min, this._calcStep(value)));
+  },
+
+  _calcStep: function(value) {
+   /**
+    * if we calculate the step using
+    * `Math.round(value / step) * step` we may hit a precision point issue 
+    * eg. 0.1 * 0.2 =  0.020000000000000004
+    * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
+    *
+    * as a work around we can divide by the reciprocal of `step`
+    */
+    return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value;
+  },
+
+  _validateValue: function() {
+    var v = this._clampValue(this.value);
+    this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
+    return this.value !== v;
+  },
+
+  _update: function() {
+    this._validateValue();
+    this._setRatio(this._calcRatio(this.value) * 100);
+  }
+
+};
+</script>
+
+
+<script>
+
+  /**
+   * Use `Polymer.IronValidatableBehavior` to implement an element that validates user input.
+   *
+   * ### Accessiblity
+   *
+   * Changing the `invalid` property, either manually or by calling `validate()` will update the
+   * `aria-invalid` attribute.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior
+   */
+  Polymer.IronValidatableBehavior = {
+
+    properties: {
+
+      /**
+       * Namespace for this validator.
+       */
+      validatorType: {
+        type: String,
+        value: 'validator'
+      },
+
+      /**
+       * Name of the validator to use.
+       */
+      validator: {
+        type: String
+      },
+
+      /**
+       * True if the last call to `validate` is invalid.
+       */
+      invalid: {
+        notify: true,
+        reflectToAttribute: true,
+        type: Boolean,
+        value: false
+      },
+
+      _validatorMeta: {
+        type: Object
+      }
+
+    },
+
+    observers: [
+      '_invalidChanged(invalid)'
+    ],
+
+    get _validator() {
+      return this._validatorMeta && this._validatorMeta.byKey(this.validator);
+    },
+
+    ready: function() {
+      this._validatorMeta = new Polymer.IronMeta({type: this.validatorType});
+    },
+
+    _invalidChanged: function() {
+      if (this.invalid) {
+        this.setAttribute('aria-invalid', 'true');
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+    },
+
+    /**
+     * @return {boolean} True if the validator `validator` exists.
+     */
+    hasValidator: function() {
+      return this._validator != null;
+    },
+
+    /**
+     * @param {Object} values Passed to the validator's `validate()` function.
+     * @return {boolean} True if `values` is valid.
+     */
+    validate: function(values) {
+      var valid = this._validator && this._validator.validate(values);
+      this.invalid = !valid;
+      return valid;
+    }
+
+  };
+
+</script>
+<script>
+
+/*
+`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
+to `<input>`.
+
+### Two-way binding
+
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+
+    <input value="{{myValue::input}}">
+
+`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
+for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
+
+    <input is="iron-input" bind-value="{{myValue}}">
+
+### Custom validators
+
+You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
+
+    <input is="iron-input" validator="my-custom-validator">
+
+### Stopping invalid input
+
+It may be desirable to only allow users to enter certain characters. You can use the
+`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+
+    <!-- only allow characters that match [0-9] -->
+    <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
+
+@hero hero.svg
+@demo demo/index.html
+*/
+
+  Polymer({
+
+    is: 'iron-input',
+
+    extends: 'input',
+
+    behaviors: [
+      Polymer.IronValidatableBehavior
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input. The new input characters are
+       * matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
+       * set, or the `type` attribute (only supported for `type=number`).
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * Regular expression to match valid input characters.
+       */
+      allowedPattern: {
+        type: String
+      },
+
+      _previousValidInput: {
+        type: String,
+        value: ''
+      },
+
+      _patternAlreadyChecked: {
+        type: Boolean,
+        value: false
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput',
+      'keypress': '_onKeypress'
+    },
+
+    get _patternRegExp() {
+      var pattern;
+      if (this.allowedPattern) {
+        pattern = new RegExp(this.allowedPattern);
+      } else if (this.pattern) {
+        pattern = new RegExp(this.pattern);
+      } else {
+        switch (this.type) {
+          case 'number':
+            pattern = /[0-9.,e-]/;
+            break;
+        }
+      }
+      return pattern;
+    },
+
+    ready: function() {
+      this.bindValue = this.value;
+    },
+
+    _bindValueChanged: function() {
+      if (this.value !== this.bindValue) {
+        this.value = !this.bindValue ? '' : this.bindValue;
+      }
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _onInput: function() {
+      // Need to validate each of the characters pasted if they haven't
+      // been validated inside `_onKeypress` already.
+      if (this.preventInvalidInput && !this._patternAlreadyChecked) {
+        var valid = this._checkPatternValidity();
+        if (!valid) {
+          this.value = this._previousValidInput;
+        }
+      }
+
+      this.bindValue = this.value;
+      this._previousValidInput = this.value;
+      this._patternAlreadyChecked = false;
+    },
+
+    _isPrintable: function(event) {
+      // What a control/printable character is varies wildly based on the browser.
+      // - most control characters (arrows, backspace) do not send a `keypress` event
+      //   in Chrome, but the *do* on Firefox
+      // - in Firefox, when they do send a `keypress` event, control chars have
+      //   a charCode = 0, keyCode = xx (for ex. 40 for down arrow)
+      // - printable characters always send a keypress event.
+      // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode
+      //   always matches the charCode.
+      // None of this makes any sense.
+
+      var nonPrintable =
+        (event.keyCode == 8)   ||  // backspace
+        (event.keyCode == 19)  ||  // pause
+        (event.keyCode == 20)  ||  // caps lock
+        (event.keyCode == 27)  ||  // escape
+        (event.keyCode == 45)  ||  // insert
+        (event.keyCode == 46)  ||  // delete
+        (event.keyCode == 144) ||  // num lock
+        (event.keyCode == 145) ||  // scroll lock
+        (event.keyCode > 32 && event.keyCode < 41)   || // page up/down, end, home, arrows
+        (event.keyCode > 111 && event.keyCode < 124); // fn keys
+
+      return !(event.charCode == 0 && nonPrintable);
+    },
+
+    _onKeypress: function(event) {
+      if (!this.preventInvalidInput && this.type !== 'number') {
+        return;
+      }
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return;
+      }
+
+      // Handle special keys and backspace
+      if (event.metaKey || event.ctrlKey || event.altKey)
+        return;
+
+      // Check the pattern either here or in `_onInput`, but not in both.
+      this._patternAlreadyChecked = true;
+
+      var thisChar = String.fromCharCode(event.charCode);
+      if (this._isPrintable(event) && !regexp.test(thisChar)) {
+        event.preventDefault();
+      }
+    },
+
+    _checkPatternValidity: function() {
+      var regexp = this._patternRegExp;
+      if (!regexp) {
+        return true;
+      }
+      for (var i = 0; i < this.value.length; i++) {
+        if (!regexp.test(this.value[i])) {
+          return false;
+        }
+      }
+      return true;
+    },
+
+    /**
+     * Returns true if `value` is valid. The validator provided in `validator` will be used first,
+     * then any constraints.
+     * @return {boolean} True if the value is valid.
+     */
+    validate: function() {
+      // Empty, non-required input is valid.
+      if (!this.required && this.value == '') {
+        this.invalid = false;
+        return true;
+      }
+
+      var valid;
+      if (this.hasValidator()) {
+        valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+      } else {
+        this.invalid = !this.validity.valid;
+        valid = this.validity.valid;
+      }
+      this.fire('iron-input-validate');
+      return valid;
+    }
+
+  });
+
+  /*
+  The `iron-input-validate` event is fired whenever `validate()` is called.
+  @event iron-input-validate
+  */
+
+</script>
+
+<script>
+
+  /** 
+  
+  @demo demo/index.html
+  @polymerBehavior 
+  
+  */
+  Polymer.IronFormElementBehavior = {
+
+    properties: {
+
+      /**
+       * The name of this element.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * The value for this element.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+    },
+
+    attached: function() {
+      this.fire('iron-form-element-register');
+    }
+
+  };
+
+</script>
+<script>
+
+  /**
+   * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
+   * behavior is implemented by `<paper-input>`. It exposes a number of properties from
+   * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
+   * template.
+   *
+   * The input element can be accessed by the `inputElement` property if you need to access
+   * properties or methods that are not exposed.
+   * @polymerBehavior Polymer.PaperInputBehavior
+   */
+  Polymer.PaperInputBehaviorImpl = {
+
+    properties: {
+
+      /**
+       * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
+       */
+      label: {
+        type: String
+      },
+
+      /**
+       * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
+       * property, or the value property of your input that is `notify:true`.
+       */
+      value: {
+        notify: true,
+        type: String
+      },
+
+      /**
+       * Set to true to disable this input. Bind this to both the `<paper-input-container>`'s
+       * and the input's `disabled` property.
+       */
+      disabled: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s
+       * and the input's `invalid` property.
+       */
+      invalid: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to prevent the user from entering invalid input. Bind this to the
+       * `<input is="iron-input">`'s `preventInvalidInput` property.
+       */
+      preventInvalidInput: {
+        type: Boolean
+      },
+
+      /**
+       * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
+       * `<input is="iron-input">`'s `allowedPattern` property.
+       */
+      allowedPattern: {
+        type: String
+      },
+
+      /**
+       * The type of the input. The supported types are `text`, `number` and `password`. Bind this
+       * to the `<input is="iron-input">`'s `type` property.
+       */
+      type: {
+        type: String
+      },
+
+      /**
+       * The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
+       * to the `<input is="iron-input">`'s `list` property.
+       */
+      list: {
+        type: String
+      },
+
+      /**
+       * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
+       * `pattern` property.
+       */
+      pattern: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
+       * `required` property.
+       */
+      required: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
+       * `maxlength` property.
+       */
+      maxlength: {
+        type: Number
+      },
+
+      /**
+       * The error message to display when the input is invalid. Bind this to the
+       * `<paper-input-error>`'s content, if using.
+       */
+      errorMessage: {
+        type: String
+      },
+
+      /**
+       * Set to true to show a character counter.
+       */
+      charCounter: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
+       * `noLabelFloat` property.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to always float the label. Bind this to the `<paper-input-container>`'s
+       * `alwaysFloatLabel` property.
+       */
+      alwaysFloatLabel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
+       * `autoValidate` property.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Name of the validator to use. Bind this to the `<input is="iron-input">`'s `validator`
+       * property.
+       */
+      validator: {
+        type: String
+      },
+
+      // HTMLInputElement attributes for binding if needed
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
+       */
+      autocomplete: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `autofocus` property.
+       */
+      autofocus: {
+        type: Boolean
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `inputmode` property.
+       */
+      inputmode: {
+        type: String
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `minlength` property.
+       */
+      minlength: {
+        type: Number
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `name` property.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * A placeholder string in addition to the label. If this is set, the label will always float.
+       */
+      placeholder: {
+        type: String,
+        // need to set a default so _computeAlwaysFloatLabel is run
+        value: ''
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `readonly` property.
+       */
+      readonly: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Bind this to the `<input is="iron-input">`'s `size` property.
+       */
+      size: {
+        type: Number
+      },
+
+      _ariaDescribedBy: {
+        type: String,
+        value: ''
+      }
+
+    },
+
+    listeners: {
+      'addon-attached': '_onAddonAttached'
+    },
+
+    /**
+     * Returns a reference to the input element.
+     */
+    get inputElement() {
+      return this.$.input;
+    },
+
+    attached: function() {
+      this._updateAriaLabelledBy();
+    },
+
+    _appendStringWithSpace: function(str, more) {
+      if (str) {
+        str = str + ' ' + more;
+      } else {
+        str = more;
+      }
+      return str;
+    },
+
+    _onAddonAttached: function(event) {
+      var target = event.path ? event.path[0] : event.target;
+      if (target.id) {
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
+      } else {
+        var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
+        target.id = id;
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
+      }
+    },
+
+    /**
+     * Validates the input element and sets an error style if needed.
+     */
+     validate: function() {
+       return this.inputElement.validate();
+     },
+
+    /**
+     * Restores the cursor to its original position after updating the value.
+     * @param {string} newValue The value that should be saved.
+     */
+    updateValueAndPreserveCaret: function(newValue) {
+      // Not all elements might have selection, and even if they have the
+      // right properties, accessing them might throw an exception (like for
+      // <input type=number>)
+      try {
+        var start = this.inputElement.selectionStart;
+        this.value = newValue;
+
+        // The cursor automatically jumps to the end after re-setting the value,
+        // so restore it to its original position.
+        this.inputElement.selectionStart = start;
+        this.inputElement.selectionEnd = start;
+      } catch (e) {
+        // Just set the value and give up on the caret.
+        this.value = newValue;
+      }
+    },
+
+    _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
+      return placeholder || alwaysFloatLabel;
+    },
+
+    _updateAriaLabelledBy: function() {
+      var label = Polymer.dom(this.root).querySelector('label');
+      if (!label) {
+        this._ariaLabelledBy = '';
+        return;
+      }
+      var labelledBy;
+      if (label.id) {
+        labelledBy = label.id;
+      } else {
+        labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
+        label.id = labelledBy;
+      }
+      this._ariaLabelledBy = labelledBy;
+    }
+
+  };
+
+  Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
+
+</script>
+
+<script>
+
+  /**
+   * Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
+   * add-on appears below the input, and may display information based on the input value and
+   * validity such as a character counter or an error message.
+   * @polymerBehavior
+   */
+  Polymer.PaperInputAddonBehavior = {
+
+    hostAttributes: {
+      'add-on': ''
+    },
+
+    attached: function() {
+      this.fire('addon-attached');
+    },
+
+    /**
+     * The function called by `<paper-input-container>` when the input value or validity changes.
+     * @param {{
+     *   inputElement: (Node|undefined),
+     *   value: (string|undefined),
+     *   invalid: (boolean|undefined)
+     * }} state All properties are optional -
+     *     inputElement: The input element.
+     *     value: The input value.
+     *     invalid: True if the input value is invalid.
+     */
+    update: function(state) {
+    }
+
+  };
+
+</script>
+
+
+
+
+
+
 </head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
   <style>
     :host {
@@ -14786,6 +15591,1453 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
 
   });
 
+</script>
+<dom-module id="paper-progress" assetpath="bower_components/paper-progress/">
+  <style>
+    :host {
+      display: inline-block;
+      width: 200px;
+      height: 4px;
+    }
+
+    #progressContainer {
+      position: relative;
+      height: 100%;
+      background-color: var(--paper-progress-container-color, --google-grey-300);
+      overflow: hidden;
+    }
+
+    #activeProgress,
+    #secondaryProgress {
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+      -webkit-transform: scaleX(0);
+      transform: scaleX(0);
+    }
+
+    #activeProgress {
+      background-color: var(--paper-progress-active-color, --google-green-500);
+    }
+
+    #secondaryProgress {
+      background-color: var(--paper-progress-secondary-color, --google-green-100);
+    }
+
+    #activeProgress.indeterminate {
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      -webkit-animation: indeterminate-bar 1s linear infinite;
+      animation: indeterminate-bar 1s linear infinite;
+    }
+
+    @-webkit-keyframes indeterminate-bar {
+      0% {
+        -webkit-transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        -webkit-transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        -webkit-transform: translate(50%) scaleX(0);
+      }
+    }
+
+    @keyframes indeterminate-bar {
+      0% {
+        transform: translate(-50%) scaleX(0);
+      }
+      50% {
+        transform: translate(0%) scaleX(0.3);
+      }
+      100% {
+        transform: translate(50%) scaleX(0);
+      }
+    }
+  </style>
+  <template>
+    <div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
+      <div id="secondaryProgress" class="fit"></div>
+      <div id="activeProgress" class="fit"></div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+
+    is: 'paper-progress',
+
+    behaviors: [
+      Polymer.IronRangeBehavior
+    ],
+
+    properties: {
+
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true
+      },
+
+      /**
+       * The secondary ratio
+       */
+      secondaryRatio: {
+        type: Number,
+        value: 0,
+        readOnly: true,
+        observer: '_secondaryRatioChanged'
+      },
+
+      /**
+       * Use an indeterminate progress indicator.
+       */
+      indeterminate: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_toggleIndeterminate'
+      }
+    },
+
+    observers: [
+      '_ratioChanged(ratio)',
+      '_secondaryProgressChanged(secondaryProgress, min, max)'
+    ],
+
+    _toggleIndeterminate: function() {
+      // If we use attribute/class binding, the animation sometimes doesn't translate properly
+      // on Safari 7.1. So instead, we toggle the class here in the update method.
+      this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
+    },
+
+    _transformProgress: function(progress, ratio) {
+      var transform = 'scaleX(' + (ratio / 100) + ')';
+      progress.style.transform = progress.style.webkitTransform = transform;
+    },
+
+    _ratioChanged: function(ratio) {
+      this._transformProgress(this.$.activeProgress, ratio);
+    },
+
+    _secondaryRatioChanged: function(secondaryRatio) {
+      this._transformProgress(this.$.secondaryProgress, secondaryRatio);
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+      this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
+    }
+
+  });
+
+</script>
+<dom-module id="paper-input-container" assetpath="bower_components/paper-input/">
+
+  <style>
+
+    :host {
+      display: block;
+      padding: 8px 0;
+
+      @apply(--paper-input-container);
+    }
+
+    :host[inline] {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.33;
+    }
+
+    .floated-label-placeholder {
+      @apply(--paper-font-caption);
+    }
+
+    .underline {
+      position: relative;
+    }
+
+    .focused-line {
+      height: 2px;
+
+      -webkit-transform-origin: center center;
+      transform-origin: center center;
+      -webkit-transform: scale3d(0,1,1);
+      transform: scale3d(0,1,1);
+
+      background: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+    .underline.is-highlighted .focused-line {
+      -webkit-transform: none;
+      transform: none;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .underline.is-invalid .focused-line {
+      background: var(--paper-input-container-invalid-color, --google-red-500);
+
+      -webkit-transform: none;
+      transform: none;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .unfocused-line {
+      height: 1px;
+      background: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    :host([disabled]) .unfocused-line {
+      border-bottom: 1px dashed;
+      border-color: var(--paper-input-container-color, --secondary-text-color);
+      background: transparent;
+    }
+
+    .input-content {
+      position: relative;
+    }
+
+    .input-content ::content label,
+    .input-content ::content .paper-input-label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      font: inherit;
+      color: var(--paper-input-container-color, --secondary-text-color);
+
+      @apply(--paper-font-subhead);
+      @apply(--paper-input-container-label);
+    }
+
+    .input-content.label-is-floating ::content label,
+    .input-content.label-is-floating ::content .paper-input-label {
+      -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
+      transform: translate3d(0, -75%, 0) scale(0.75);
+      -webkit-transform-origin: left top;
+      transform-origin: left top;
+      -webkit-transition: -webkit-transform 0.25s;
+      transition: transform 0.25s;
+
+      @apply(--paper-transition-easing);
+    }
+
+    .input-content.label-is-highlighted ::content label,
+    .input-content.label-is-highlighted ::content .paper-input-label {
+      color: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+    .input-content.is-invalid ::content label,
+    .input-content.is-invalid ::content .paper-input-label {
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+    }
+
+    .input-content.label-is-hidden ::content label,
+    .input-content.label-is-hidden ::content .paper-input-label {
+      visibility: hidden;
+    }
+
+    .input-content ::content input,
+    .input-content ::content textarea,
+    .input-content ::content iron-autogrow-textarea,
+    .input-content ::content .paper-input-input {
+      position: relative; /* to make a stacking context */
+      outline: none;
+      box-shadow: none;
+      padding: 0;
+      width: 100%;
+      background: transparent;
+      border: none;
+      color: var(--paper-input-container-input-color, --primary-text-color);
+
+      @apply(--paper-font-subhead);
+      @apply(--paper-input-container-input);
+    }
+
+    /* Firefox sets a min-width on the input, which can cause layout issues */
+    .input-content ::content input {
+      min-width: 0;
+    }
+
+    .input-content ::content textarea {
+      resize: none;
+    }
+
+    .add-on-content.is-invalid ::content * {
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+    }
+
+    .add-on-content.is-highlighted ::content * {
+      color: var(--paper-input-container-focus-color, --default-primary-color);
+    }
+
+  </style>
+
+  <template>
+
+    <template is="dom-if" if="[[!noLabelFloat]]">
+      <div class="floated-label-placeholder">&nbsp;</div>
+    </template>
+
+    <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
+      <content select=":not([add-on])"></content>
+    </div>
+
+    <div class$="[[_computeUnderlineClass(focused,invalid)]]">
+      <div class="unfocused-line fit"></div>
+      <div class="focused-line fit"></div>
+    </div>
+
+    <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
+      <content id="addOnContent" select="[add-on]"></content>
+    </div>
+
+  </template>
+
+</dom-module>
+
+<script>
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-container',
+
+    properties: {
+
+      /**
+       * Set to true to disable the floating label. The label disappears when the input value is
+       * not null.
+       */
+      noLabelFloat: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * Set to true to always float the floating label.
+       */
+      alwaysFloatLabel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The attribute to listen for value changes on.
+       */
+      attrForValue: {
+        type: String,
+        value: 'bind-value'
+      },
+
+      /**
+       * Set to true to auto-validate the input value when it changes.
+       */
+      autoValidate: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input is invalid. This property is set automatically when the input value
+       * changes if auto-validating, or when the `iron-input-valid` event is heard from a child.
+       */
+      invalid: {
+        observer: '_invalidChanged',
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * True if the input has focus.
+       */
+      focused: {
+        readOnly: true,
+        type: Boolean,
+        value: false
+      },
+
+      _addons: {
+        type: Array
+        // do not set a default value here intentionally - it will be initialized lazily when a
+        // distributed child is attached, which may occur before configuration for this element
+        // in polyfill.
+      },
+
+      _inputHasContent: {
+        type: Boolean,
+        value: false
+      },
+
+      _inputSelector: {
+        type: String,
+        value: 'input,textarea,.paper-input-input'
+      },
+
+      _boundOnFocus: {
+        type: Function,
+        value: function() {
+          return this._onFocus.bind(this);
+        }
+      },
+
+      _boundOnBlur: {
+        type: Function,
+        value: function() {
+          return this._onBlur.bind(this);
+        }
+      },
+
+      _boundOnInput: {
+        type: Function,
+        value: function() {
+          return this._onInput.bind(this);
+        }
+      },
+
+      _boundValueChanged: {
+        type: Function,
+        value: function() {
+          return this._onValueChanged.bind(this);
+        }
+      }
+
+    },
+
+    listeners: {
+      'addon-attached': '_onAddonAttached',
+      'iron-input-validate': '_onIronInputValidate'
+    },
+
+    get _valueChangedEvent() {
+      return this.attrForValue + '-changed';
+    },
+
+    get _propertyForValue() {
+      return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
+    },
+
+    get _inputElement() {
+      return Polymer.dom(this).querySelector(this._inputSelector);
+    },
+
+    ready: function() {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      this.addEventListener('focus', this._boundOnFocus, true);
+      this.addEventListener('blur', this._boundOnBlur, true);
+      if (this.attrForValue) {
+        this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
+      } else {
+        this.addEventListener('input', this._onInput);
+      }
+    },
+
+    attached: function() {
+      this._handleValue(this._inputElement);
+    },
+
+    _onAddonAttached: function(event) {
+      if (!this._addons) {
+        this._addons = [];
+      }
+      var target = event.target;
+      if (this._addons.indexOf(target) === -1) {
+        this._addons.push(target);
+        if (this.isAttached) {
+          this._handleValue(this._inputElement);
+        }
+      }
+    },
+
+    _onFocus: function() {
+      this._setFocused(true);
+    },
+
+    _onBlur: function() {
+      this._setFocused(false);
+    },
+
+    _onInput: function(event) {
+      this._handleValue(event.target);
+    },
+
+    _onValueChanged: function(event) {
+      this._handleValue(event.target);
+    },
+
+    _handleValue: function(inputElement) {
+      var value = inputElement[this._propertyForValue] || inputElement.value;
+
+      if (this.autoValidate) {
+        var valid;
+        if (inputElement.validate) {
+          valid = inputElement.validate(value);
+        } else {
+          valid = inputElement.checkValidity();
+        }
+        this.invalid = !valid;
+      }
+
+      // type="number" hack needed because this.value is empty until it's valid
+      if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) {
+        this._inputHasContent = true;
+      } else {
+        this._inputHasContent = false;
+      }
+
+      this.updateAddons({
+        inputElement: inputElement,
+        value: value,
+        invalid: this.invalid
+      });
+    },
+
+    _onIronInputValidate: function(event) {
+      this.invalid = this._inputElement.invalid;
+    },
+
+    _invalidChanged: function() {
+      if (this._addons) {
+        this.updateAddons({invalid: this.invalid});
+      }
+    },
+
+    /**
+     * Call this to update the state of add-ons.
+     * @param {Object} state Add-on state.
+     */
+    updateAddons: function(state) {
+      for (var addon, index = 0; addon = this._addons[index]; index++) {
+        addon.update(state);
+      }
+    },
+
+    _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
+      var cls = 'input-content';
+      if (!noLabelFloat) {
+        if (alwaysFloatLabel || _inputHasContent) {
+          cls += ' label-is-floating';
+          if (invalid) {
+            cls += ' is-invalid';
+          } else if (focused) {
+            cls += " label-is-highlighted";
+          }
+        }
+      } else {
+        if (_inputHasContent) {
+          cls += ' label-is-hidden';
+        }
+      }
+      return cls;
+    },
+
+    _computeUnderlineClass: function(focused, invalid) {
+      var cls = 'underline';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    },
+
+    _computeAddOnContentClass: function(focused, invalid) {
+      var cls = 'add-on-content';
+      if (invalid) {
+        cls += ' is-invalid';
+      } else if (focused) {
+        cls += ' is-highlighted'
+      }
+      return cls;
+    }
+
+  });
+
+})();
+</script>
+<dom-module id="paper-input-error" assetpath="bower_components/paper-input/">
+
+  <style>
+
+    :host {
+      /* need to use display: none for role="alert" */
+      display: none;
+      float: left;
+
+      color: var(--paper-input-container-invalid-color, --google-red-500);
+
+      @apply(--paper-font-caption);
+      @apply(--paper-input-error);
+    }
+
+    :host([invalid]) {
+      display: inline-block;
+    };
+
+  </style>
+
+  <template>
+
+    <content></content>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-error',
+
+    behaviors: [
+      Polymer.PaperInputAddonBehavior
+    ],
+
+    hostAttributes: {
+      'role': 'alert'
+    },
+
+    properties: {
+
+      /**
+       * True if the error is showing.
+       */
+      invalid: {
+        readOnly: true,
+        reflectToAttribute: true,
+        type: Boolean
+      }
+
+    },
+
+    update: function(state) {
+      this._setInvalid(state.invalid);
+    }
+
+  })
+
+})();
+
+</script>
+<dom-module id="paper-input-char-counter" assetpath="bower_components/paper-input/">
+
+  <style>
+
+    :host {
+      display: inline-block;
+      float: right;
+
+      @apply(--paper-font-caption);
+      @apply(--paper-input-char-counter);
+    }
+
+  </style>
+
+  <template>
+
+    <span>[[_charCounterStr]]</span>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input-char-counter',
+
+    behaviors: [
+      Polymer.PaperInputAddonBehavior
+    ],
+
+    properties: {
+
+      _charCounterStr: {
+        type: String,
+        value: '0'
+      }
+
+    },
+
+    update: function(state) {
+      if (!state.inputElement) {
+        return;
+      }
+
+      state.value = state.value || '';
+
+      // Account for the textarea's new lines.
+      var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
+
+      if (state.inputElement.hasAttribute('maxlength')) {
+        str += '/' + state.inputElement.getAttribute('maxlength');
+      }
+      this._charCounterStr = str;
+    }
+
+  });
+
+})();
+
+</script>
+<dom-module id="paper-input" assetpath="bower_components/paper-input/">
+
+  <style>
+
+    :host {
+      display: block;
+    }
+
+    input::-webkit-input-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input:-moz-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input::-moz-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+    input:-ms-input-placeholder {
+      color: var(--paper-input-container-color, --secondary-text-color);
+    }
+
+  </style>
+
+  <template>
+
+    <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
+
+      <label hidden$="[[!label]]">[[label]]</label>
+
+      <input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]">
+
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error>[[errorMessage]]</paper-input-error>
+      </template>
+
+      <template is="dom-if" if="[[charCounter]]">
+        <paper-input-char-counter></paper-input-char-counter>
+      </template>
+
+    </paper-input-container>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-input',
+
+    behaviors: [
+      Polymer.PaperInputBehavior,
+      Polymer.IronControlState
+    ]
+
+  })
+
+})();
+
+</script>
+<dom-module id="paper-slider" assetpath="bower_components/paper-slider/">
+
+  <style>
+/**
+@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
+*/
+
+:host {
+  display: inline-block;
+  width: 200px;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+:host(:not([disabled])) #sliderBar::shadow #activeProgress {
+  background-color: var(--paper-slider-active-color, --google-blue-700);
+}
+
+:host(:not([disabled])) #sliderBar::shadow #secondaryProgress {
+  background-color: var(--paper-slider-secondary-color, --google-blue-300);
+}
+
+:host([disabled]) #sliderBar::shadow #activeProgress {
+  background-color: var(--paper-slider-disabled-active-color, --google-grey-500);
+}
+
+:host([disabled]) #sliderBar::shadow #secondaryProgress {
+  background-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+#sliderContainer {
+  position: relative;
+  width: calc(100% - 32px);
+  height: 32px;
+}
+
+#sliderContainer.editable {
+  float: left;
+  width: calc(100% - 72px);
+  margin: 12px 0;
+}
+
+.bar-container {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ring > .bar-container {
+  left: 20px;
+  width: calc(100% - 4px);
+  transition: left 0.18s ease, width 0.18s ease;
+}
+
+.ring.expand:not(.pin) > .bar-container {
+  left: 30px;
+  width: calc(100% - 14px);
+}
+
+.ring.expand.dragging > .bar-container {
+  transition: none;
+}
+
+#sliderBar {
+  position: absolute;
+  top: 15px;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  padding: 8px 0;
+  margin: -8px 0;
+  background-color: var(--paper-slider-bar-color, transparent);
+}
+
+.ring #sliderBar {
+  left: -4px;
+  width: calc(100% + 4px);
+}
+
+.ring.expand:not(.pin) #sliderBar {
+  left: -14px;
+  width: calc(100% + 14px);
+}
+
+.slider-markers {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  height: 2px;
+  width: calc(100% + 2px);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.slider-markers::after,
+.slider-marker::after {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: black;
+}
+
+.transiting #sliderBar::shadow #activeProgress {
+  -webkit-transition: -webkit-transform 0.08s ease;
+  transition: transform 0.08s ease;
+}
+
+#sliderKnob {
+  @apply(--layout-center-justified);
+  @apply(--layout-center);
+  @apply(--layout-horizontal);
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.transiting > #sliderKnob {
+  transition: left 0.08s ease;
+}
+
+#sliderKnob:focus {
+  outline: none;
+}
+
+#sliderKnob.dragging {
+  transition: none;
+}
+
+.snaps > #sliderKnob.dragging {
+  transition: -webkit-transform 0.08s ease;
+  transition: transform 0.08s ease;
+}
+
+#sliderKnobInner {
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  border-radius: 50%;
+  background-color: var(--paper-slider-knob-color, --google-blue-700);
+  transition-property: height, width, background-color, border;
+  transition-duration: 0.1s;
+  transition-timing-function: ease;
+}
+
+.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
+  width: 100%;
+  height: 100%;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.ring > #sliderKnob > #sliderKnobInner {
+  background-color: transparent;
+  border: 2px solid #c8c8c8;
+}
+
+#sliderKnobInner::before {
+  background-color: var(--paper-slider-pin-color, --google-blue-700);
+}
+
+.pin > #sliderKnob > #sliderKnobInner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 26px;
+  height: 26px;
+  margin-left: 3px;
+  border-radius: 50% 50% 50% 0;
+  -webkit-transform: rotate(-45deg) scale(0) translate(0);
+  transform: rotate(-45deg) scale(0) translate(0);
+}
+
+#sliderKnobInner::before,
+#sliderKnobInner::after {
+  transition: -webkit-transform .2s ease, background-color .18s ease;
+  transition: transform .2s ease, background-color .18s ease;
+}
+
+.pin.ring > #sliderKnob > #sliderKnobInner::before {
+  background-color: #c8c8c8;
+}
+
+.pin.expand > #sliderKnob > #sliderKnobInner::before {
+  -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
+  transform: rotate(-45deg) scale(1) translate(17px, -17px);
+}
+
+.pin > #sliderKnob > #sliderKnobInner::after {
+  content: attr(value);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32px;
+  height: 26px;
+  text-align: center;
+  color: var(--paper-slider-font-color, #fff);
+  font-size: 10px;
+  -webkit-transform: scale(0) translate(0);
+  transform: scale(0) translate(0);
+}
+
+.pin.expand > #sliderKnob > #sliderKnobInner::after {
+  -webkit-transform: scale(1) translate(0, -17px);
+  transform: scale(1) translate(0, -17px);
+}
+
+/* editable: paper-input */
+.slider-input {
+  width: 40px;
+  float: right;
+  overflow: hidden;
+}
+
+.slider-input::shadow input {
+  /* FIXME(ffu): should one be able set text-align directly on paper-input? */
+  text-align: center;
+}
+
+/* disabled state */
+#sliderContainer.disabled {
+  pointer-events: none;
+}
+
+.disabled > #sliderKnob > #sliderKnobInner {
+  width: 8px;
+  height: 8px;
+  background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
+}
+
+.disabled.ring > #sliderKnob > #sliderKnobInner {
+  background-color: transparent;
+}
+
+paper-ripple {
+  color: var(--paper-slider-knob-color, --google-blue-700);
+}
+
+</style>
+
+  <template>
+    <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
+
+      <div class="bar-container">
+        <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
+        </paper-progress>
+      </div>
+
+      <template is="dom-if" if="[[snaps]]">
+        <div class="slider-markers horizontal layout">
+          <template is="dom-repeat" items="[[markers]]">
+            <div class="slider-marker flex"></div>
+          </template>
+        </div>
+      </template>
+
+      <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
+          <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
+          <div id="sliderKnobInner" value$="[[pinValue]]"></div>
+      </div>
+    </div>
+
+    <template is="dom-if" if="[[editable]]">
+      <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange">
+      </paper-input>
+    </template>
+  </template>
+
+</dom-module>
+
+<script>
+
+  Polymer({
+    is: 'paper-slider',
+
+    behaviors: [
+      Polymer.IronA11yKeysBehavior,
+      Polymer.PaperInkyFocusBehavior,
+      Polymer.IronFormElementBehavior,
+      Polymer.IronRangeBehavior
+    ],
+
+    properties: {
+
+      /**
+       * If true, the slider thumb snaps to tick marks evenly spaced based
+       * on the `step` property value.
+       */
+      snaps: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * If true, a pin with numeric value label is shown when the slider thumb
+       * is pressed. Use for settings for which users need to know the exact
+       * value of the setting.
+       */
+      pin: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_secondaryProgressChanged'
+      },
+
+      /**
+       * If true, an input is shown and user can use it to set the slider value.
+       */
+      editable: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The immediate value of the slider.  This value is updated while the user
+       * is dragging the slider.
+       */
+      immediateValue: {
+        type: Number,
+        value: 0,
+        readOnly: true
+      },
+
+      /**
+       * The maximum number of markers
+       */
+      maxMarkers: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_maxMarkersChanged'
+      },
+
+      /**
+       * If true, the knob is expanded
+       */
+      expand: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      /**
+       * True when the user is dragging the slider.
+       */
+      dragging: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      transiting: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
+
+      markers: {
+        type: Array,
+        readOnly: true,
+        value: []
+      },
+    },
+
+    observers: [
+      '_updateKnob(value, min, max, snaps, step)',
+      '_minChanged(min)',
+      '_maxChanged(max)',
+      '_valueChanged(value)',
+      '_immediateValueChanged(immediateValue)'
+    ],
+
+    hostAttributes: {
+      role: 'slider',
+      tabindex: 0
+    },
+
+    keyBindings: {
+      'left down pagedown home': '_decrementKey',
+      'right up pageup end': '_incrementKey'
+    },
+
+    ready: function() {
+      // issue polymer/polymer#1305
+      this.async(function() {
+        this._updateKnob(this.value);
+        this._updateInputValue();
+      }, 1);
+    },
+
+    /**
+     * Increases value by `step` but not above `max`.
+     * @method increment
+     */
+    increment: function() {
+      this.value = this._clampValue(this.value + this.step);
+    },
+
+    /**
+     * Decreases value by `step` but not below `min`.
+     * @method decrement
+     */
+    decrement: function() {
+      this.value = this._clampValue(this.value - this.step);
+    },
+
+    _updateKnob: function(value) {
+      this._positionKnob(this._calcRatio(value));
+    },
+
+    _minChanged: function() {
+      this.setAttribute('aria-valuemin', this.min);
+    },
+
+    _maxChanged: function() {
+      this.setAttribute('aria-valuemax', this.max);
+    },
+
+    _valueChanged: function() {
+      this.setAttribute('aria-valuenow', this.value);
+      this.fire('value-change');
+    },
+
+    _immediateValueChanged: function() {
+      if (this.dragging) {
+        this.fire('immediate-value-change');
+      } else {
+        this.value = this.immediateValue;
+      }
+      this._updateInputValue();
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+    },
+
+    _updateInputValue: function() {
+      if (this.editable) {
+        this.$$('#input').value = this.immediateValue.toString();
+      }
+    },
+
+    _expandKnob: function() {
+      this._setExpand(true);
+    },
+
+    _resetKnob: function() {
+      this.cancelDebouncer('expandKnob');
+      this._setExpand(false);
+    },
+
+    _positionKnob: function(ratio) {
+      this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+      this._setPinValue(this.immediateValue);
+
+      this._setRatio(this._calcRatio(this.immediateValue));
+
+      this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
+    },
+
+    _inputChange: function() {
+      this.value = this.$$('#input').value;
+      this.fire('change');
+    },
+
+    _calcKnobPosition: function(ratio) {
+      return (this.max - this.min) * ratio + this.min;
+    },
+
+    _onTrack: function(event) {
+      switch (event.detail.state) {
+        case 'start':
+          this._trackStart(event);
+          break;
+        case 'track':
+          this._trackX(event);
+          break;
+        case 'end':
+          this._trackEnd();
+          break;
+      }
+    },
+
+    _trackStart: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      this._x = this.ratio * this._w;
+      this._startx = this._x || 0;
+      this._minx = - this._startx;
+      this._maxx = this._w - this._startx;
+      this.$.sliderKnob.classList.add('dragging');
+
+      this._setDragging(true);
+    },
+
+    _trackX: function(e) {
+      if (!this.dragging) {
+        this._trackStart(e);
+      }
+
+      var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+      this._x = this._startx + dx;
+
+      var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+      this._setImmediateValue(immediateValue);
+      this._setPinValue(immediateValue);
+
+      // update knob's position
+      var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+      this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+    },
+
+    _trackEnd: function() {
+      var s = this.$.sliderKnob.style;
+
+      this.$.sliderKnob.classList.remove('dragging');
+      this._setDragging(false);
+      this._resetKnob();
+      this.value = this.immediateValue;
+
+      s.transform = s.webkitTransform = '';
+
+      this.fire('change');
+    },
+
+    _knobdown: function(event) {
+      this._expandKnob();
+
+      // cancel selection
+      event.detail.sourceEvent.preventDefault();
+
+      // set the focus manually because we will called prevent default
+      this.focus();
+    },
+
+    _bardown: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      var rect = this.$.sliderBar.getBoundingClientRect();
+      var ratio = (event.detail.x - rect.left) / this._w;
+      var prevRatio = this.ratio;
+
+      this._setTransiting(true);
+
+      this._positionKnob(ratio);
+
+      this.debounce('expandKnob', this._expandKnob, 60);
+
+      // if the ratio doesn't change, sliderKnob's animation won't start
+      // and `_knobTransitionEnd` won't be called
+      // Therefore, we need to manually update the `transiting` state
+
+      if (prevRatio === this.ratio) {
+        this._setTransiting(false);
+      }
+
+      this.async(function() {
+        this.fire('change');
+      });
+
+      // cancel selection
+      event.detail.sourceEvent.preventDefault();
+    },
+
+    _knobTransitionEnd: function(event) {
+      if (event.target === this.$.sliderKnob) {
+        this._setTransiting(false);
+      }
+    },
+
+    _maxMarkersChanged: function(maxMarkers) {
+      var l = (this.max - this.min) / this.step;
+      if (!this.snaps && l > maxMarkers) {
+        this._setMarkers([]);
+      } else {
+        this._setMarkers(new Array(l));
+      }
+    },
+
+    _getClassNames: function() {
+      var classes = {};
+
+      classes.disabled = this.disabled;
+      classes.pin = this.pin;
+      classes.snaps = this.snaps;
+      classes.ring = this.immediateValue <= this.min;
+      classes.expand = this.expand;
+      classes.dragging = this.dragging;
+      classes.transiting = this.transiting;
+      classes.editable = this.editable;
+
+      return Object.keys(classes).filter(
+        function(className) {
+          return classes[className];
+        }).join(' ');
+    },
+
+    _incrementKey: function(event) {
+      if (event.detail.key === 'end') {
+        this.value = this.max;
+      } else {
+        this.increment();
+      }
+      this.fire('change');
+    },
+
+    _decrementKey: function(event) {
+      if (event.detail.key === 'home') {
+        this.value = this.min;
+      } else {
+        this.decrement();
+      }
+      this.fire('change');
+    },
+
+    _setPinValue: function (value) {
+        this.pinValue = value;
+    }
+  });
+
+  /**
+   * Fired when the slider's value changes.
+   *
+   * @event value-change
+   */
+
+  /**
+   * Fired when the slider's immediateValue changes.
+   *
+   * @event immediate-value-change
+   */
+
+  /**
+   * Fired when the slider's value changes due to user interaction.
+   *
+   * Changes to the slider's value due to changes in an underlying
+   * bound variable will not trigger this event.
+   *
+   * @event change
+   */
+
 </script>
 <iron-iconset-svg name="icons" size="24">
     <svg>