From 406c382a3f97d352eb3c30d8020896cd55a9a8d2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 19 Jul 2016 01:19:44 -0700
Subject: [PATCH] Move style into templates

---
 src/cards/ha-badges-card.html                 |   2 -
 src/cards/ha-camera-card.html                 |  67 ++---
 src/cards/ha-entities-card.html               |  57 ++--
 src/cards/ha-introduction-card.html           |  49 ++--
 src/cards/ha-media_player-card.html           | 251 +++++++++---------
 .../ha-persistent_notification-card.html      |  25 +-
 src/components/entity/ha-entity-toggle.html   |  35 +--
 .../entity/ha-state-label-badge.html          |  43 +--
 src/components/entity/state-badge.html        |  71 ++---
 src/components/ha-card.html                   |  33 +--
 src/components/ha-cards.html                  |  74 +++---
 src/components/ha-color-picker.html           |  11 +-
 src/components/ha-demo-badge.html             |  11 +-
 src/components/ha-label-badge.html            | 137 +++++-----
 src/components/ha-labeled-slider.html         |  43 +--
 src/components/ha-sidebar.html                | 176 ++++++------
 src/components/ha-view-tabs.html              |  25 +-
 src/components/loading-box.html               |  19 +-
 src/components/relative-ha-datetime.html      |  14 +-
 src/components/state-history-charts.html      |  31 +--
 src/components/state-info.html                |  62 ++---
 src/components/stream-status.html             |  36 +--
 src/dialogs/ha-voice-command-dialog.html      |  78 +++---
 src/dialogs/more-info-dialog.html             |  59 ++--
 src/home-assistant.html                       |   9 -
 src/layouts/login-form.html                   |  66 ++---
 src/layouts/partial-base.html                 |  25 +-
 src/managers/notification-manager.html        |  11 +-
 .../more-info-alarm_control_panel.html        |  19 +-
 src/more-infos/more-info-camera.html          |  20 +-
 src/more-infos/more-info-content.html         |  12 +-
 src/more-infos/more-info-default.html         |  13 +-
 src/more-infos/more-info-group.html           |  20 +-
 src/more-infos/more-info-light.html           |  53 ++--
 src/more-infos/more-info-lock.html            |  11 +-
 src/more-infos/more-info-media_player.html    |  63 ++---
 src/more-infos/more-info-script.html          |   3 +-
 src/more-infos/more-info-sun.html             |   3 +-
 src/more-infos/more-info-thermostat.html      |  31 +--
 src/more-infos/more-info-updater.html         |  13 +-
 src/resources/home-assistant-style.html       |   7 +
 .../state-card-configurator.html              |  20 +-
 src/state-summary/state-card-display.html     |  24 +-
 src/state-summary/state-card-hvac.html        |  26 +-
 .../state-card-input_select.html              |  32 +--
 .../state-card-input_slider.html              |  14 +-
 .../state-card-media_player.html              |  57 ++--
 .../state-card-rollershutter.html             |  26 +-
 src/state-summary/state-card-scene.html       |  20 +-
 src/state-summary/state-card-script.html      |  20 +-
 src/state-summary/state-card-thermostat.html  |  41 +--
 src/state-summary/state-card-toggle.html      |  13 +-
 src/state-summary/state-card-weblink.html     |  30 +--
 53 files changed, 1068 insertions(+), 1043 deletions(-)

diff --git a/src/cards/ha-badges-card.html b/src/cards/ha-badges-card.html
index 5a968eb026..a272dc5df7 100644
--- a/src/cards/ha-badges-card.html
+++ b/src/cards/ha-badges-card.html
@@ -3,8 +3,6 @@
 <link rel='import' href='../components/entity/ha-state-label-badge.html'>
 
 <dom-module id='ha-badges-card'>
-  <style>
-  </style>
   <template>
     <template is='dom-repeat' items='[[states]]'>
       <ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
index 0a60576bf7..b979dea3ba 100644
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@@ -2,40 +2,41 @@
 <link rel="import" href="../../bower_components/paper-material/paper-material.html">
 
 <dom-module id='ha-camera-card'>
-  <style include="paper-material">
-    :host {
-      display: block;
-      position: relative;
-      font-size: 0px;
-      border-radius: 2px;
-      cursor: pointer;
-      min-height: 48px;
-    }
-    .camera-feed {
-      width: 100%;
-      height: auto;
-      border-radius: 2px;
-    }
-    .caption {
-      @apply(--paper-font-common-nowrap);
-      position: absolute;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
-
-      background-color: rgba(0, 0, 0, 0.3);
-      padding: 16px;
-
-      text-transform: capitalize;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 16px;
-      color: white;
-    }
-  </style>
   <template>
+    <style include="paper-material">
+      :host {
+        display: block;
+        position: relative;
+        font-size: 0px;
+        border-radius: 2px;
+        cursor: pointer;
+        min-height: 48px;
+      }
+      .camera-feed {
+        width: 100%;
+        height: auto;
+        border-radius: 2px;
+      }
+      .caption {
+        @apply(--paper-font-common-nowrap);
+        position: absolute;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+
+        background-color: rgba(0, 0, 0, 0.3);
+        padding: 16px;
+
+        text-transform: capitalize;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 16px;
+        color: white;
+      }
+    </style>
+
     <img src='[[cameraFeedSrc]]' class='camera-feed' hidden='[[!imageLoaded]]'
       on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[stateObj.entityDisplay]]'>
     <div class='caption'>
diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index 561013b5fe..371419cf0d 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -5,35 +5,36 @@
 <link rel='import' href='../state-summary/state-card-content.html'>
 
 <dom-module id='ha-entities-card'>
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .states {
-      padding-bottom: 16px;
-    }
-    .state {
-      padding: 4px 16px;
-      cursor: pointer;
-    }
-    .header {
-      @apply(--paper-font-headline);
-      /* overwriting line-height +8 because entity-toggle can be 40px height,
-         compensating this with reduced padding */
-      line-height: 40px;
-      color: var(--primary-text-color);
-      padding: 20px 16px 12px;
-      text-transform: capitalize;
-    }
-    .header .name {
-      @apply(--paper-font-common-nowrap);
-    }
-    ha-entity-toggle {
-      margin-left: 16px;
-    }
-    .header-more-info {
-      cursor: pointer;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .states {
+        padding-bottom: 16px;
+      }
+      .state {
+        padding: 4px 16px;
+        cursor: pointer;
+      }
+      .header {
+        @apply(--paper-font-headline);
+        /* overwriting line-height +8 because entity-toggle can be 40px height,
+           compensating this with reduced padding */
+        line-height: 40px;
+        color: var(--primary-text-color);
+        padding: 20px 16px 12px;
+        text-transform: capitalize;
+      }
+      .header .name {
+        @apply(--paper-font-common-nowrap);
+      }
+      ha-entity-toggle {
+        margin-left: 16px;
+      }
+      .header-more-info {
+        cursor: pointer;
+      }
+    </style>
+
     <ha-card>
       <div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
         <div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
diff --git a/src/cards/ha-introduction-card.html b/src/cards/ha-introduction-card.html
index 64780d21fb..310af586d5 100644
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@@ -3,31 +3,32 @@
 <link rel='import' href='../components/ha-card.html'>
 
 <dom-module id='ha-introduction-card'>
-  <style>
-    :host {
-      @apply(--paper-font-body1)
-    }
-    a {
-      color: var(--dark-primary-color);
-    }
-    ul {
-      margin: 8px;
-      padding-left: 16px;
-    }
-    li {
-      margin-bottom: 8px;
-    }
-    .content {
-      padding: 0 16px 16px;
-    }
-    .install {
-      display: block;
-      line-height: 1.5em;
-      margin-top: 8px;
-      margin-bottom: 16px;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        @apply(--paper-font-body1)
+      }
+      a {
+        color: var(--dark-primary-color);
+      }
+      ul {
+        margin: 8px;
+        padding-left: 16px;
+      }
+      li {
+        margin-bottom: 8px;
+      }
+      .content {
+        padding: 0 16px 16px;
+      }
+      .install {
+        display: block;
+        line-height: 1.5em;
+        margin-top: 8px;
+        margin-bottom: 16px;
+      }
+    </style>
+
     <ha-card header="Welcome Home!">
       <div class='content'>
         <template is='dom-if' if='[[hass.demo]]'>
diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html
index 294a98a27e..b3ab3410d7 100644
--- a/src/cards/ha-media_player-card.html
+++ b/src/cards/ha-media_player-card.html
@@ -3,132 +3,133 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 
 <dom-module id='ha-media_player-card'>
-  <style include="paper-material iron-flex iron-flex-alignment iron-positioning">
-    :host {
-      display: block;
-      position: relative;
-      font-size: 0px;
-      border-radius: 2px;
-
-      overflow: hidden;
-    }
-
-    .banner {
-      position: relative;
-
-      background-position: center center;
-      background-image: url(/static/images/card_media_player_bg.png);
-      background-repeat: no-repeat;
-      background-color: var(--primary-color);
-
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-    }
-
-    .banner:before {
-      display: block;
-      content: "";
-      width: 100%;
-      /* removed .25% from 16:9 ratio to fix YT black bars */
-      padding-top: 56%;
-      transition: padding-top .8s;
-    }
-
-    .banner.no-cover:before {
-      padding-top: 91px;
-    }
-
-    .banner > .cover {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-
-      background-position: center center;
-      background-size: cover;
-      transition: opacity .8s;
-      opacity: 1;
-    }
-
-    .banner.is-off > .cover {
-      opacity: 0;
-    }
-
-    .banner > .caption {
-      @apply(--paper-font-caption);
-
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
-
-      padding: 8px 16px;
-
-      text-transform: capitalize;
-      font-size: 14px;
-      font-weight: 500;
-      color: white;
-
-      transition: background-color .5s;
-    }
-
-    .banner.is-off > .caption {
-      background-color: initial;
-    }
-
-
-    .banner > .caption .title {
-      @apply(--paper-font-common-nowrap);
-      font-size: 1.2em;
-      margin: 8px 0 4px;
-    }
-
-    .controls {
-      @apply(--paper-font-body1);
-      padding: 8px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
-      background-color: white;
-    }
-
-    .controls paper-icon-button {
-      width: 44px;
-      height: 44px;
-    }
-
-    paper-icon-button {
-      color: var(--primary-text-color);
-    }
-
-    paper-icon-button[disabled] {
-      color: var(--paper-grey-400);
-    }
-
-    paper-icon-button.primary {
-      width: 56px !important;
-      height: 56px !important;
-      background-color: var(--primary-color);
-      color: white;
-      border-radius: 50%;
-      padding: 8px;
-      transition: background-color .5s;
-    }
-
-    paper-icon-button.primary[disabled] {
-      background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
-    }
-
-    [invisible] {
-      visibility: hidden !important;
-    }
-  </style>
   <template>
+    <style include="paper-material iron-flex iron-flex-alignment iron-positioning">
+      :host {
+        display: block;
+        position: relative;
+        font-size: 0px;
+        border-radius: 2px;
+
+        overflow: hidden;
+      }
+
+      .banner {
+        position: relative;
+
+        background-position: center center;
+        background-image: url(/static/images/card_media_player_bg.png);
+        background-repeat: no-repeat;
+        background-color: var(--primary-color);
+
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+      }
+
+      .banner:before {
+        display: block;
+        content: "";
+        width: 100%;
+        /* removed .25% from 16:9 ratio to fix YT black bars */
+        padding-top: 56%;
+        transition: padding-top .8s;
+      }
+
+      .banner.no-cover:before {
+        padding-top: 91px;
+      }
+
+      .banner > .cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+
+        background-position: center center;
+        background-size: cover;
+        transition: opacity .8s;
+        opacity: 1;
+      }
+
+      .banner.is-off > .cover {
+        opacity: 0;
+      }
+
+      .banner > .caption {
+        @apply(--paper-font-caption);
+
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+
+        padding: 8px 16px;
+
+        text-transform: capitalize;
+        font-size: 14px;
+        font-weight: 500;
+        color: white;
+
+        transition: background-color .5s;
+      }
+
+      .banner.is-off > .caption {
+        background-color: initial;
+      }
+
+
+      .banner > .caption .title {
+        @apply(--paper-font-common-nowrap);
+        font-size: 1.2em;
+        margin: 8px 0 4px;
+      }
+
+      .controls {
+        @apply(--paper-font-body1);
+        padding: 8px;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        background-color: white;
+      }
+
+      .controls paper-icon-button {
+        width: 44px;
+        height: 44px;
+      }
+
+      paper-icon-button {
+        color: var(--primary-text-color);
+      }
+
+      paper-icon-button[disabled] {
+        color: var(--paper-grey-400);
+      }
+
+      paper-icon-button.primary {
+        width: 56px !important;
+        height: 56px !important;
+        background-color: var(--primary-color);
+        color: white;
+        border-radius: 50%;
+        padding: 8px;
+        transition: background-color .5s;
+      }
+
+      paper-icon-button.primary[disabled] {
+        background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+      }
+
+      [invisible] {
+        visibility: hidden !important;
+      }
+    </style>
+
     <div class$='[[computeBannerClasses(playerObj)]]'>
       <div class='cover' id='cover'></div>
 
diff --git a/src/cards/ha-persistent_notification-card.html b/src/cards/ha-persistent_notification-card.html
index 5d77e697ef..964c43ad21 100644
--- a/src/cards/ha-persistent_notification-card.html
+++ b/src/cards/ha-persistent_notification-card.html
@@ -4,19 +4,20 @@
 <link rel='import' href='../components/ha-card.html'>
 
 <dom-module id='ha-persistent_notification-card'>
-  <style>
-    :host {
-      @apply(--paper-font-body1);
-    }
-    .content {
-      padding: 0 16px 16px;
-    }
-    paper-button {
-      margin: 8px;
-      font-weight: 500;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        @apply(--paper-font-body1);
+      }
+      .content {
+        padding: 0 16px 16px;
+      }
+      paper-button {
+        margin: 8px;
+        font-weight: 500;
+      }
+    </style>
+
     <ha-card header="[[computeTitle(stateObj)]]">
       <div class='content'>[[stateObj.state]]</div>
       <paper-button on-tap='dismissTap'>DISMISS</paper-button>
diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index bfd2c3edb9..6775f235dd 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -3,24 +3,25 @@
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
 <dom-module id="ha-entity-toggle">
-  <style>
-    :host {
-      white-space: nowrap;
-    }
-    paper-icon-button {
-      color: var(--primary-text-color);
-      transition: color .5s;
-    }
-    paper-icon-button[state-active] {
-      color: var(--default-primary-color);
-    }
-    paper-toggle-button {
-      cursor: pointer;
-      --paper-toggle-button-label-spacing: 0;
-      padding: 9px 0;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        white-space: nowrap;
+      }
+      paper-icon-button {
+        color: var(--primary-text-color);
+        transition: color .5s;
+      }
+      paper-icon-button[state-active] {
+        color: var(--default-primary-color);
+      }
+      paper-toggle-button {
+        cursor: pointer;
+        --paper-toggle-button-label-spacing: 0;
+        padding: 9px 0;
+      }
+    </style>
+
     <template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
       <paper-icon-button icon="mdi:flash-off" on-tap="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
       <paper-icon-button icon="mdi:flash" on-tap="turnOn" state-active$='[[isOn]]'></paper-icon-button>
diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html
index cf4910c539..184e58455e 100644
--- a/src/components/entity/ha-state-label-badge.html
+++ b/src/components/entity/ha-state-label-badge.html
@@ -3,28 +3,29 @@
 <link rel='import' href='../ha-label-badge.html'>
 
 <dom-module id='ha-state-label-badge'>
-  <style>
-    :host {
-      cursor: pointer;
-    }
-
-    ha-label-badge {
-      --ha-label-badge-color: rgb(223, 76, 30);
-    }
-
-    .blue {
-      --ha-label-badge-color: #039be5;
-    }
-
-    .green {
-      --ha-label-badge-color: #0DA035;
-    }
-
-    .grey {
-      --ha-label-badge-color: var(--paper-grey-500);
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        cursor: pointer;
+      }
+
+      ha-label-badge {
+        --ha-label-badge-color: rgb(223, 76, 30);
+      }
+
+      .blue {
+        --ha-label-badge-color: #039be5;
+      }
+
+      .green {
+        --ha-label-badge-color: #0DA035;
+      }
+
+      .grey {
+        --ha-label-badge-color: var(--paper-grey-500);
+      }
+    </style>
+
     <ha-label-badge class$='[[computeClasses(state)]]'
       value='[[computeValue(state)]]'
       icon='[[computeIcon(state)]]'
diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 1768105992..a8f17382f8 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -3,41 +3,44 @@
 <link rel='import' href='./ha-state-icon.html'>
 
 <dom-module id='state-badge'>
-  <style>
-  :host {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    color: #44739E;
-    border-radius: 50%;
-    height: 40px;
-    text-align: center;
-    background-size: cover;
-    line-height: 40px;
-  }
-
-  ha-state-icon {
-    transition: color .3s ease-in-out;
-  }
-
-  /* Color the icon if light or sun is on */
-  ha-state-icon[data-domain=light][data-state=on],
-  ha-state-icon[data-domain=switch][data-state=on],
-  ha-state-icon[data-domain=binary_sensor][data-state=on],
-  ha-state-icon[data-domain=sun][data-state=above_horizon] {
-    color: #DCC91F;
-  }
-
-  /* Color the icon if unavailable */
-  ha-state-icon[data-state=unavailable] {
-    color: var(--disabled-text-color);
-  }
-  </style>
-
   <template>
-    <ha-state-icon id='icon' state-obj='[[stateObj]]'
-      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
-    </ha-state-icon>
+    <style>
+    :host {
+      position: relative;
+      display: inline-block;
+      width: 40px;
+      color: #44739E;
+      border-radius: 50%;
+      height: 40px;
+      text-align: center;
+      background-size: cover;
+      line-height: 40px;
+    }
+
+    ha-state-icon {
+      transition: color .3s ease-in-out;
+    }
+
+    /* Color the icon if light or sun is on */
+    ha-state-icon[data-domain=light][data-state=on],
+    ha-state-icon[data-domain=switch][data-state=on],
+    ha-state-icon[data-domain=binary_sensor][data-state=on],
+    ha-state-icon[data-domain=sun][data-state=above_horizon] {
+      color: #DCC91F;
+    }
+
+    /* Color the icon if unavailable */
+    ha-state-icon[data-state=unavailable] {
+      color: var(--disabled-text-color);
+    }
+    </style>
+
+    <ha-state-icon
+      id='icon'
+      state-obj='[[stateObj]]'
+      data-domain$='[[stateObj.domain]]'
+      data-state$='[[stateObj.state]]'
+    ></ha-state-icon>
   </template>
 </dom-module>
 
diff --git a/src/components/ha-card.html b/src/components/ha-card.html
index 48a4ff7584..d5d7beaf67 100644
--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@@ -2,23 +2,24 @@
 <link rel="import" href="../../bower_components/paper-material/paper-material.html">
 
 <dom-module id='ha-card'>
-  <style include="paper-material">
-    :host {
-      display: block;
-      border-radius: 2px;
-      transition: all 0.30s ease-out;
-
-      background-color: white;
-    }
-    .header {
-      @apply(--paper-font-headline);
-      @apply(--paper-font-common-expensive-kerning);
-      opacity: var(--dark-primary-opacity);
-      padding: 24px 16px 16px;
-      text-transform: capitalize;
-    }
-  </style>
   <template>
+    <style include="paper-material">
+      :host {
+        display: block;
+        border-radius: 2px;
+        transition: all 0.30s ease-out;
+
+        background-color: white;
+      }
+      .header {
+        @apply(--paper-font-headline);
+        @apply(--paper-font-common-expensive-kerning);
+        opacity: var(--dark-primary-opacity);
+        padding: 24px 16px 16px;
+        text-transform: capitalize;
+      }
+    </style>
+
     <template is='dom-if' if='[[header]]'>
       <div class='header'>[[header]]</div>
     </template>
diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index d8291d4860..e530cfcc4b 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -5,52 +5,52 @@
 <link rel="import" href="../cards/ha-card-chooser.html">
 
 <dom-module id="ha-cards">
-  <style is="custom-style" include="iron-flex iron-flex-factors"></style>
-  <style>
-    :host {
-      display: block;
-      padding-right: 8px;
-    }
-
-    .no-badges {
-      height: 8px;
-    }
-
-    .badges {
-      margin-top: 16px;
-      font-size: 85%;
-      text-align: center;
-    }
-
-    .column {
-      max-width: 500px;
-      overflow-x: hidden;
-    }
-
-    .zone-card {
-      margin-left: 8px;
-      margin-bottom: 8px;
-    }
-
-    @media (max-width: 500px) {
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-factors"></style>
+    <style>
       :host {
-        padding-right: 0;
+        display: block;
+        padding-right: 8px;
+      }
+
+      .no-badges {
+        height: 8px;
+      }
+
+      .badges {
+        margin-top: 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+
+      .column {
+        max-width: 500px;
+        overflow-x: hidden;
       }
 
       .zone-card {
-        margin-left: 0;
+        margin-left: 8px;
+        margin-bottom: 8px;
       }
-    }
 
-    @media (max-width: 599px) {
-      .column {
-        max-width: 600px;
+      @media (max-width: 500px) {
+        :host {
+          padding-right: 0;
+        }
+
+        .zone-card {
+          margin-left: 0;
+        }
       }
-    }
 
-  </style>
+      @media (max-width: 599px) {
+        .column {
+          max-width: 600px;
+        }
+      }
+
+    </style>
 
-  <template>
     <div class='main'>
       <template is='dom-if' if='[[cards.badges]]'>
         <div class='badges'>
diff --git a/src/components/ha-color-picker.html b/src/components/ha-color-picker.html
index 13f0472818..347af7f9cd 100644
--- a/src/components/ha-color-picker.html
+++ b/src/components/ha-color-picker.html
@@ -1,12 +1,13 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 
 <dom-module id='ha-color-picker'>
-  <style>
-    canvas {
-      cursor: crosshair;
-    }
-  </style>
   <template>
+    <style>
+      canvas {
+        cursor: crosshair;
+      }
+    </style>
+
     <canvas width='[[width]]' height='[[height]]'></canvas>
   </template>
 </dom-module>
diff --git a/src/components/ha-demo-badge.html b/src/components/ha-demo-badge.html
index 5f84c73385..1127e65c04 100644
--- a/src/components/ha-demo-badge.html
+++ b/src/components/ha-demo-badge.html
@@ -3,12 +3,13 @@
 <link rel='import' href='./ha-label-badge.html'>
 
 <dom-module id='ha-demo-badge'>
-  <style>
-    :host {
-      --ha-label-badge-color: #dac90d;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        --ha-label-badge-color: #dac90d;
+      }
+    </style>
+
     <ha-label-badge
       icon='mdi:emoticon'
       label='Demo'
diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index 5de816787a..898fad6b1a 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -2,75 +2,76 @@
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
 
 <dom-module id='ha-label-badge'>
-  <style>
-  .badge-container {
-    display: inline-block;
-    text-align: center;
-    vertical-align: top;
-    margin-bottom: 16px;
-  }
-  .label-badge {
-    position: relative;
-    display: block;
-    margin: 0 auto;
-    width: 2.5em;
-    text-align: center;
-    height: 2.5em;
-    line-height: 2.5em;
-    font-size: 1.5em;
-    border-radius: 50%;
-    border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
-    color: rgb(76, 76, 76);
-
-    white-space: nowrap;
-    background-color: white;
-    background-size: cover;
-    transition: border .3s ease-in-out;
-  }
-  .label-badge .value {
-    font-size: 90%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .label-badge .value.big {
-    font-size: 70%;
-  }
-  .label-badge .label {
-    position: absolute;
-    bottom: -1em;
-    left: 0;
-    right: 0;
-    line-height: 1em;
-
-    font-size: 0.5em;
-  }
-  .label-badge .label span {
-    max-width: 80%;
-    display: inline-block;
-    background-color: var(--ha-label-badge-color, --default-primary-color);
-    color: white;
-    border-radius: 1em;
-    padding: 4px 8px;
-    font-weight: 500;
-    text-transform: uppercase;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: background-color .3s ease-in-out;
-  }
-  .badge-container .title {
-    margin-top: 1em;
-    font-size: .9em;
-    width: 5em;
-    font-weight: 300;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  iron-image {
-    border-radius: 50%;
-  }
-  </style>
   <template>
+    <style>
+    .badge-container {
+      display: inline-block;
+      text-align: center;
+      vertical-align: top;
+      margin-bottom: 16px;
+    }
+    .label-badge {
+      position: relative;
+      display: block;
+      margin: 0 auto;
+      width: 2.5em;
+      text-align: center;
+      height: 2.5em;
+      line-height: 2.5em;
+      font-size: 1.5em;
+      border-radius: 50%;
+      border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
+      color: rgb(76, 76, 76);
+
+      white-space: nowrap;
+      background-color: white;
+      background-size: cover;
+      transition: border .3s ease-in-out;
+    }
+    .label-badge .value {
+      font-size: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .label-badge .value.big {
+      font-size: 70%;
+    }
+    .label-badge .label {
+      position: absolute;
+      bottom: -1em;
+      left: 0;
+      right: 0;
+      line-height: 1em;
+
+      font-size: 0.5em;
+    }
+    .label-badge .label span {
+      max-width: 80%;
+      display: inline-block;
+      background-color: var(--ha-label-badge-color, --default-primary-color);
+      color: white;
+      border-radius: 1em;
+      padding: 4px 8px;
+      font-weight: 500;
+      text-transform: uppercase;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: background-color .3s ease-in-out;
+    }
+    .badge-container .title {
+      margin-top: 1em;
+      font-size: .9em;
+      width: 5em;
+      font-weight: 300;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    iron-image {
+      border-radius: 50%;
+    }
+    </style>
+
     <div class='badge-container'>
       <div class='label-badge' id='badge'>
         <div class$='[[computeClasses(value)]]'>
diff --git a/src/components/ha-labeled-slider.html b/src/components/ha-labeled-slider.html
index c3c600343b..878b9df6ea 100644
--- a/src/components/ha-labeled-slider.html
+++ b/src/components/ha-labeled-slider.html
@@ -3,28 +3,29 @@
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
 
 <dom-module id='ha-labeled-slider'>
-  <style>
-    :host {
-      display: block;
-      padding-bottom: 16px;
-    }
-
-    .title {
-      margin-bottom: 16px;
-      opacity: var(--dark-primary-opacity);
-    }
-
-    iron-icon {
-      float: left;
-      margin-top: 4px;
-      opacity: var(--dark-secondary-opacity);
-    }
-
-    .slider-container {
-      margin-left: 24px;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        display: block;
+        padding-bottom: 16px;
+      }
+
+      .title {
+        margin-bottom: 16px;
+        opacity: var(--dark-primary-opacity);
+      }
+
+      iron-icon {
+        float: left;
+        margin-top: 4px;
+        opacity: var(--dark-secondary-opacity);
+      }
+
+      .slider-container {
+        margin-left: 24px;
+      }
+    </style>
+
     <div class='title'>[[caption]]</div>
     <iron-icon icon='[[icon]]'></iron-icon>
     <div class='slider-container'>
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index fe52ba1c46..be8accbfd4 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -10,95 +10,95 @@
 <link rel='import' href='../components/stream-status.html'>
 
 <dom-module id='ha-sidebar'>
-  <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
-  <style>
-    :host {
-      --sidebar-text: {
-        opacity: var(--dark-primary-opacity);
-        font-weight: 500;
-        font-size: 14px;
-      }
-    }
-
-    .sidenav {
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-    }
-
-    paper-toolbar {
-      --paper-toolbar-title: {
-        text-align: left;
-        margin-left: 0px !important;
-      };
-
-      --paper-toolbar-background: #fff;
-      --paper-toolbar-color: #000;
-      opacity: var(--dark-primary-opacity);
-      border-bottom: 1px solid #e0e0e0;
-    }
-
-    paper-menu {
-      padding-bottom: 0;
-    }
-
-    paper-icon-item {
-      --paper-icon-item: {
-        cursor: pointer;
-      }
-
-      --paper-item-icon: {
-        color: #000;
-        opacity: var(--dark-secondary-opacity);
-      };
-
-      --paper-item-selected: {
-        color: var(--default-primary-color);
-        background-color: #e8e8e8;
-        opacity: 1;
-      }
-    }
-    paper-icon-item.iron-selected {
-      --paper-item-icon: {
-        color: var(--default-primary-color);
-        opacity: 1;
-      };
-    }
-
-    paper-icon-item .item-text {
-      @apply(--sidebar-text);
-    }
-    paper-icon-item.iron-selected .item-text {
-      opacity: 1;
-    }
-
-    paper-icon-item.logout {
-      margin-top: 16px;
-    }
-
-    .divider {
-      height: 1px;
-      background-color: #000;
-      margin: 4px 0;
-      opacity: var(--dark-divider-opacity)
-    }
-
-    .streaming {
-      @apply(--sidebar-text);
-    }
-
-    .subheader {
-      @apply(--sidebar-text);
-      padding: 16px;
-    }
-
-    .dev-tools {
-      padding: 0 8px;
-      opacity: var(--dark-secondary-opacity);
-    }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <style>
+      :host {
+        --sidebar-text: {
+          opacity: var(--dark-primary-opacity);
+          font-weight: 500;
+          font-size: 14px;
+        }
+      }
+
+      .sidenav {
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+      }
+
+      paper-toolbar {
+        --paper-toolbar-title: {
+          text-align: left;
+          margin-left: 0px !important;
+        };
+
+        --paper-toolbar-background: #fff;
+        --paper-toolbar-color: #000;
+        opacity: var(--dark-primary-opacity);
+        border-bottom: 1px solid #e0e0e0;
+      }
+
+      paper-menu {
+        padding-bottom: 0;
+      }
+
+      paper-icon-item {
+        --paper-icon-item: {
+          cursor: pointer;
+        }
+
+        --paper-item-icon: {
+          color: #000;
+          opacity: var(--dark-secondary-opacity);
+        };
+
+        --paper-item-selected: {
+          color: var(--default-primary-color);
+          background-color: #e8e8e8;
+          opacity: 1;
+        }
+      }
+      paper-icon-item.iron-selected {
+        --paper-item-icon: {
+          color: var(--default-primary-color);
+          opacity: 1;
+        };
+      }
+
+      paper-icon-item .item-text {
+        @apply(--sidebar-text);
+      }
+      paper-icon-item.iron-selected .item-text {
+        opacity: 1;
+      }
+
+      paper-icon-item.logout {
+        margin-top: 16px;
+      }
+
+      .divider {
+        height: 1px;
+        background-color: #000;
+        margin: 4px 0;
+        opacity: var(--dark-divider-opacity)
+      }
+
+      .streaming {
+        @apply(--sidebar-text);
+      }
+
+      .subheader {
+        @apply(--sidebar-text);
+        padding: 16px;
+      }
+
+      .dev-tools {
+        padding: 0 8px;
+        opacity: var(--dark-secondary-opacity);
+      }
+    </style>
+
     <paper-header-panel mode='scroll' class='sidenav fit'>
       <paper-toolbar>
         <div class="title">Home Assistant</div>
diff --git a/src/components/ha-view-tabs.html b/src/components/ha-view-tabs.html
index 47fb81ce36..cd6f81fb3f 100644
--- a/src/components/ha-view-tabs.html
+++ b/src/components/ha-view-tabs.html
@@ -1,17 +1,22 @@
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
 <dom-module id="ha-view-tabs">
-  <style>
-    :host {
-      --paper-tabs-selection-bar-color: #FFF;
-    }
-    paper-tab {
-      text-transform: uppercase;
-    }
-  </style>
   <template>
-    <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
-      on-iron-select='viewSelected' scrollable=''>
+    <style>
+      :host {
+        --paper-tabs-selection-bar-color: #FFF;
+      }
+      paper-tab {
+        text-transform: uppercase;
+      }
+    </style>
+
+    <paper-tabs
+      selected='[[currentView]]'
+      attr-for-selected='data-entity'
+      on-iron-select='viewSelected'
+      scrollable=''
+    >
         <paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
         <template is='dom-repeat' items='[[views]]'>
           <paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
diff --git a/src/components/loading-box.html b/src/components/loading-box.html
index 245b3800d6..f37187e494 100644
--- a/src/components/loading-box.html
+++ b/src/components/loading-box.html
@@ -2,16 +2,17 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
 <dom-module id="loading-box">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .text {
-      display: inline-block;
-      line-height: 28px;
-      vertical-align: top;
-      margin-left: 8px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .text {
+        display: inline-block;
+        line-height: 28px;
+        vertical-align: top;
+        margin-left: 8px;
+      }
+    </style>
+
     <div class='layout horizontal'>
       <paper-spinner active="true"></paper-spinner>
       <div class='text'><content></content>…</div>
diff --git a/src/components/relative-ha-datetime.html b/src/components/relative-ha-datetime.html
index 9377a01b99..c3edab50d3 100644
--- a/src/components/relative-ha-datetime.html
+++ b/src/components/relative-ha-datetime.html
@@ -1,11 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<dom-module id="relative-ha-datetime">
-  <template>
-    <span>[[relativeTime]]</span>
-  </template>
-</dom-module>
-
 <script>
 Polymer({
   is: 'relative-ha-datetime',
@@ -24,11 +18,6 @@ Polymer({
     parsedDateTime: {
       type: Object,
     },
-
-    relativeTime: {
-      type: String,
-      value: 'not set',
-    },
   },
 
   created: function () {
@@ -57,7 +46,8 @@ Polymer({
   },
 
   updateRelative: function () {
-    this.relativeTime = this.parsedDateTime ?
+    var root = Polymer.dom(this);
+    root.innerHTML = this.parsedDateTime ?
       window.moment(this.parsedDateTime).fromNow() : '';
   },
 });
diff --git a/src/components/state-history-charts.html b/src/components/state-history-charts.html
index 8d1aa6a02b..0df3dad2ac 100644
--- a/src/components/state-history-charts.html
+++ b/src/components/state-history-charts.html
@@ -7,22 +7,23 @@
 <link rel="import" href="./state-history-chart-line.html">
 
 <dom-module id="state-history-charts">
-  <style>
-  :host {
-    display: block;
-  }
-
-  .loading-container {
-    text-align: center;
-    padding: 8px;
-  }
-
-  .loading {
-    height: 0px;
-    overflow: hidden;
-  }
-  </style>
   <template>
+    <style>
+    :host {
+      display: block;
+    }
+
+    .loading-container {
+      text-align: center;
+      padding: 8px;
+    }
+
+    .loading {
+      height: 0px;
+      overflow: hidden;
+    }
+    </style>
+
     <google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
 
     <div hidden$="[[!isLoading]]" class='loading-container'>
diff --git a/src/components/state-info.html b/src/components/state-info.html
index bd72e3a92b..8585acb937 100644
--- a/src/components/state-info.html
+++ b/src/components/state-info.html
@@ -4,38 +4,38 @@
 <link rel="import" href="relative-ha-datetime.html">
 
 <dom-module id="state-info">
-  <style>
-  :host {
-    @apply(--paper-font-body1);
-    min-width: 150px;
-    white-space: nowrap;
-  }
-
-  state-badge {
-    float: left;
-  }
-
-  .info {
-    margin-left: 56px;
-  }
-
-  .name {
-    @apply(--paper-font-common-nowrap);
-    color: var(--primary-text-color);
-    line-height: 40px;
-  }
-
-  .name[in-dialog] {
-    line-height: 20px;
-  }
-
-  .time-ago {
-    @apply(--paper-font-common-nowrap);
-    color: var(--secondary-text-color);
-  }
-  </style>
-
   <template>
+    <style>
+    :host {
+      @apply(--paper-font-body1);
+      min-width: 150px;
+      white-space: nowrap;
+    }
+
+    state-badge {
+      float: left;
+    }
+
+    .info {
+      margin-left: 56px;
+    }
+
+    .name {
+      @apply(--paper-font-common-nowrap);
+      color: var(--primary-text-color);
+      line-height: 40px;
+    }
+
+    .name[in-dialog] {
+      line-height: 20px;
+    }
+
+    .time-ago {
+      @apply(--paper-font-common-nowrap);
+      color: var(--secondary-text-color);
+    }
+    </style>
+
     <div>
       <state-badge state-obj='[[stateObj]]'></state-badge>
 
diff --git a/src/components/stream-status.html b/src/components/stream-status.html
index 1e9cec0763..fdcb06d1bd 100644
--- a/src/components/stream-status.html
+++ b/src/components/stream-status.html
@@ -4,23 +4,29 @@
 <link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
 
 <dom-module id="stream-status">
-  <style>
-  :host {
-    display: inline-block;
-    height: 24px;
-  }
-
-  paper-toggle-button {
-    vertical-align: middle;
-  }
-
-  iron-icon {
-    opacity: var(--dark-primary-opacity);
-  }
-  </style>
   <template>
+    <style>
+    :host {
+      display: inline-block;
+      height: 24px;
+    }
+
+    paper-toggle-button {
+      vertical-align: middle;
+    }
+
+    iron-icon {
+      opacity: var(--dark-primary-opacity);
+    }
+    </style>
+
     <iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
-    <paper-toggle-button id="toggle" on-change='toggleChanged' checked$='[[isStreaming]]' hidden$="[[hasError]]"></paper-toggle-button>
+    <paper-toggle-button
+      id="toggle"
+      on-change='toggleChanged'
+      checked$='[[isStreaming]]'
+      hidden$="[[hasError]]"
+    ></paper-toggle-button>
   </template>
 </dom-module>
 
diff --git a/src/dialogs/ha-voice-command-dialog.html b/src/dialogs/ha-voice-command-dialog.html
index d42234e851..f726522ef6 100644
--- a/src/dialogs/ha-voice-command-dialog.html
+++ b/src/dialogs/ha-voice-command-dialog.html
@@ -6,46 +6,46 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
 <dom-module id="ha-voice-command-dialog">
-  <style>
-    iron-icon {
-      margin-right: 8px;
-    }
-
-    .content {
-      width: 300px;
-      min-height: 80px;
-      font-size: 18px;
-    }
-
-    .icon {
-      float: left;
-    }
-
-    .text {
-      margin-left: 48px;
-      margin-right: 24px;
-    }
-
-    .interimTranscript {
-      color: darkgrey;
-    }
-
-    @media all and (max-width: 450px) {
-      paper-dialog {
-        margin: 0;
-        width: 100%;
-        max-height: calc(100% - 64px);
-
-        position: fixed !important;
-        bottom: 0px;
-        left: 0px;
-        right: 0px;
-        overflow: scroll;
-      }
-    }
-  </style>
-
   <template>
+    <style>
+      iron-icon {
+        margin-right: 8px;
+      }
+
+      .content {
+        width: 300px;
+        min-height: 80px;
+        font-size: 18px;
+      }
+
+      .icon {
+        float: left;
+      }
+
+      .text {
+        margin-left: 48px;
+        margin-right: 24px;
+      }
+
+      .interimTranscript {
+        color: darkgrey;
+      }
+
+      @media all and (max-width: 450px) {
+        paper-dialog {
+          margin: 0;
+          width: 100%;
+          max-height: calc(100% - 64px);
+
+          position: fixed !important;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          overflow: scroll;
+        }
+      }
+    </style>
+
     <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
       <div class='content'>
         <div class='icon'>
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index fb54d67602..3f1f85f1b2 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -10,36 +10,37 @@
 <link rel="import" href="../more-infos/more-info-content.html">
 
 <dom-module id="more-info-dialog">
-  <style>
-    paper-dialog {
-      font-size: 14px;
-    }
-
-    state-history-charts {
-      position: relative;
-      z-index: 1;
-    }
-
-    state-card-content {
-      margin-bottom: 24px;
-      font-size: 14px;
-    }
-
-    @media all and (max-width: 450px) {
-      paper-dialog {
-        margin: 0;
-        width: 100%;
-        max-height: calc(100% - 64px);
-
-        position: fixed !important;
-        bottom: 0px;
-        left: 0px;
-        right: 0px;
-        overflow: scroll;
-      }
-    }
-  </style>
   <template>
+    <style>
+      paper-dialog {
+        font-size: 14px;
+      }
+
+      state-history-charts {
+        position: relative;
+        z-index: 1;
+      }
+
+      state-card-content {
+        margin-bottom: 24px;
+        font-size: 14px;
+      }
+
+      @media all and (max-width: 450px) {
+        paper-dialog {
+          margin: 0;
+          width: 100%;
+          max-height: calc(100% - 64px);
+
+          position: fixed !important;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          overflow: scroll;
+        }
+      }
+    </style>
+
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
     <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
       <h2>
diff --git a/src/home-assistant.html b/src/home-assistant.html
index 0b8b6e8374..a7d6621897 100644
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@@ -15,15 +15,6 @@
 <link rel='import' href='./resources/panel-imports.html'>
 
 <dom-module id='home-assistant'>
-  <style>
-    :host {
-      font-family: 'Roboto', 'Noto', sans-serif;
-      font-weight: 300;
-      -webkit-font-smoothing: antialiased;
-      text-rendering: optimizeLegibility;
-    }
-  </style>
-
   <template>
     <home-assistant-main hass='[[hass]]' hidden$='[[!loaded]]'></home-assistant-main>
 
diff --git a/src/layouts/login-form.html b/src/layouts/login-form.html
index 290ab48e78..ecdf1825e0 100644
--- a/src/layouts/login-form.html
+++ b/src/layouts/login-form.html
@@ -8,40 +8,40 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
 <dom-module id="login-form">
-  <style is="custom-style" include="iron-flex iron-positioning"></style>
-  <style>
-    :host {
-      white-space: nowrap;
-    }
-
-    #passwordDecorator {
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    paper-checkbox {
-      margin-right: 8px;
-    }
-
-    paper-button {
-      margin-left: 72px;
-    }
-
-    .interact {
-      height: 125px;
-    }
-
-    #validatebox {
-      margin-top: 16px;
-      text-align: center;
-    }
-
-    .validatemessage {
-      margin-top: 10px;
-    }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style>
+      :host {
+        white-space: nowrap;
+      }
+
+      #passwordDecorator {
+        display: block;
+        margin-bottom: 16px;
+      }
+
+      paper-checkbox {
+        margin-right: 8px;
+      }
+
+      paper-button {
+        margin-left: 72px;
+      }
+
+      .interact {
+        height: 125px;
+      }
+
+      #validatebox {
+        margin-top: 16px;
+        text-align: center;
+      }
+
+      .validatemessage {
+        margin-top: 10px;
+      }
+    </style>
+
     <div class="layout vertical center center-center fit">
       <img src="/static/icons/favicon-192x192.png" height="192" />
       <a href="#" id="hideKeyboardOnFocus"></a>
diff --git a/src/layouts/partial-base.html b/src/layouts/partial-base.html
index d2052bcc8d..c042402e23 100644
--- a/src/layouts/partial-base.html
+++ b/src/layouts/partial-base.html
@@ -6,19 +6,20 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 
 <dom-module id='partial-base'>
-  <style is="custom-style" include="iron-positioning"></style>
-  <style>
-    :host {
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-    }
-
-    .menu-icon {
-      margin-right: 24px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-positioning"></style>
+    <style>
+      :host {
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+      }
+
+      .menu-icon {
+        margin-right: 24px;
+      }
+    </style>
+
     <paper-scroll-header-panel class='fit'>
       <paper-toolbar>
         <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
diff --git a/src/managers/notification-manager.html b/src/managers/notification-manager.html
index 3c976c166a..2c28f9de5c 100644
--- a/src/managers/notification-manager.html
+++ b/src/managers/notification-manager.html
@@ -3,12 +3,13 @@
 <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
 
 <dom-module id="notification-manager">
-  <style>
-    paper-toast {
-      z-index: 1;
-    }
-  </style>
   <template>
+    <style>
+      paper-toast {
+        z-index: 1;
+      }
+    </style>
+
     <paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
   </template>
 </dom-module>
diff --git a/src/more-infos/more-info-alarm_control_panel.html b/src/more-infos/more-info-alarm_control_panel.html
index 557d2a7a55..736f1c63b1 100644
--- a/src/more-infos/more-info-alarm_control_panel.html
+++ b/src/more-infos/more-info-alarm_control_panel.html
@@ -4,16 +4,17 @@
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
 
 <dom-module id='more-info-alarm_control_panel'>
-  <style is="custom-style" include="iron-flex"></style>
   <template>
-      <div class='layout horizontal'>
-        <paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
-      </div>
-      <div class='layout horizontal'>
-	      <paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
-	      <paper-button on-tap='handleHomeTap' hidden='[[!armHomeButtonVisible]]' disabled=[[!codeValid]]>Arm Home</paper-button>
-	      <paper-button on-tap='handleAwayTap' hidden='[[!armAwayButtonVisible]]' disabled='[[!codeValid]]'>Arm Away</paper-button>
-      </div>
+    <style is="custom-style" include="iron-flex"></style>
+
+    <div class='layout horizontal'>
+      <paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
+    </div>
+    <div class='layout horizontal'>
+      <paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
+      <paper-button on-tap='handleHomeTap' hidden='[[!armHomeButtonVisible]]' disabled=[[!codeValid]]>Arm Home</paper-button>
+      <paper-button on-tap='handleAwayTap' hidden='[[!armAwayButtonVisible]]' disabled='[[!codeValid]]'>Arm Away</paper-button>
+    </div>
   </template>
 </dom-module>
 
diff --git a/src/more-infos/more-info-camera.html b/src/more-infos/more-info-camera.html
index 4f4dc88d7e..b33d0ef760 100644
--- a/src/more-infos/more-info-camera.html
+++ b/src/more-infos/more-info-camera.html
@@ -1,17 +1,17 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <dom-module id='more-info-camera'>
-  <style>
-    :host {
-      max-width:640px;
-    }
-
-    .camera-image {
-      width: 100%;
-    }
-  </style>
-
   <template>
+    <style>
+      :host {
+        max-width:640px;
+      }
+
+      .camera-image {
+        width: 100%;
+      }
+    </style>
+
     <img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
          on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
   </template>
diff --git a/src/more-infos/more-info-content.html b/src/more-infos/more-info-content.html
index 7a31656239..314a73815f 100644
--- a/src/more-infos/more-info-content.html
+++ b/src/more-infos/more-info-content.html
@@ -14,14 +14,6 @@
 <link rel='import' href='more-info-lock.html'>
 <link rel='import' href='more-info-hvac.html'>
 
-<dom-module id='more-info-content'>
-  <style>
-    :host {
-      display: block;
-    }
-  </style>
-</dom-module>
-
 <script>
 Polymer({
   is: 'more-info-content',
@@ -37,6 +29,10 @@ Polymer({
     },
   },
 
+  created: function () {
+    this.style.display = 'block';
+  },
+
   stateObjChanged: function (stateObj) {
     if (!stateObj) return;
 
diff --git a/src/more-infos/more-info-default.html b/src/more-infos/more-info-default.html
index 9fad57cb32..e23d9846f7 100644
--- a/src/more-infos/more-info-default.html
+++ b/src/more-infos/more-info-default.html
@@ -1,13 +1,14 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <dom-module id="more-info-default">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-    .data-entry .value {
-      max-width: 200px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .data-entry .value {
+        max-width: 200px;
+      }
+    </style>
+
     <div class='layout vertical'>
       <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
         <div class='data-entry layout justified horizontal'>
diff --git a/src/more-infos/more-info-group.html b/src/more-infos/more-info-group.html
index 245f3ea7ce..4f4f6a8b57 100644
--- a/src/more-infos/more-info-group.html
+++ b/src/more-infos/more-info-group.html
@@ -2,18 +2,18 @@
 
 <link rel="import" href="../state-summary/state-card-content.html">
 
-
 <dom-module id="more-info-group">
-  <style>
-    .child-card {
-      margin-bottom: 8px;
-    }
-
-    .child-card:last-child {
-      margin-bottom: 0;
-    }
-  </style>
   <template>
+    <style>
+      .child-card {
+        margin-bottom: 8px;
+      }
+
+      .child-card:last-child {
+        margin-bottom: 0;
+      }
+    </style>
+
     <div id="groupedControlDetails"></div>
     <template is='dom-repeat' items="[[states]]" as='state'>
       <div class='child-card'>
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index e4c520a63f..9321b455bb 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -5,33 +5,34 @@
 <link rel='import' href='../components/ha-color-picker.html'>
 
 <dom-module id='more-info-light'>
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .brightness, .color_temp {
-      max-height: 0px;
-      overflow: hidden;
-      transition: max-height .5s ease-in;
-    }
-
-    ha-color-picker {
-      display: block;
-      width: 250px;
-
-      max-height: 0px;
-      overflow: hidden;
-      transition: max-height .2s ease-in;
-    }
-
-    .has-brightness .brightness,
-    .has-color_temp .color_temp {
-      max-height: 84px;
-    }
-
-    .has-rgb_color ha-color-picker {
-      max-height: 200px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .brightness, .color_temp {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .5s ease-in;
+      }
+
+      ha-color-picker {
+        display: block;
+        width: 250px;
+
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .2s ease-in;
+      }
+
+      .has-brightness .brightness,
+      .has-color_temp .color_temp {
+        max-height: 84px;
+      }
+
+      .has-rgb_color ha-color-picker {
+        max-height: 200px;
+      }
+    </style>
+
     <div class$='[[computeClassNames(stateObj)]]'>
 
       <div class='brightness'>
diff --git a/src/more-infos/more-info-lock.html b/src/more-infos/more-info-lock.html
index 72eae0f841..b696dac21c 100644
--- a/src/more-infos/more-info-lock.html
+++ b/src/more-infos/more-info-lock.html
@@ -4,12 +4,13 @@
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
 
 <dom-module id='more-info-lock'>
-  <style>
-    paper-input {
-      display: inline-block;
-    }
-  </style>
   <template>
+    <style>
+      paper-input {
+        display: inline-block;
+      }
+    </style>
+
     <div hidden='[[!stateObj.attributes.code_format]]'>
       <paper-input label='code' value='{{enteredCode}}' pattern='[[stateObj.attributes.code_format]]' type='password'></paper-input>
       <paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html
index cd7edf854c..9d519a019c 100644
--- a/src/more-infos/more-info-media_player.html
+++ b/src/more-infos/more-info-media_player.html
@@ -3,38 +3,39 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 
 <dom-module id='more-info-media_player'>
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .media-state {
-      text-transform: capitalize;
-    }
-
-    paper-icon-button[highlight] {
-      color: var(--accent-color);
-    }
-
-    .volume {
-      margin-bottom: 8px;
-
-      max-height: 0px;
-      overflow: hidden;
-      transition: max-height .5s ease-in;
-    }
-
-    .has-volume_level .volume {
-      max-height: 40px;
-    }
-
-    iron-icon.source-input {
-      padding: 7px;
-      margin-top: 15px;
-    }
-
-    paper-dropdown-menu.source-input {
-      margin-left: 10px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .media-state {
+        text-transform: capitalize;
+      }
+
+      paper-icon-button[highlight] {
+        color: var(--accent-color);
+      }
+
+      .volume {
+        margin-bottom: 8px;
+
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .5s ease-in;
+      }
+
+      .has-volume_level .volume {
+        max-height: 40px;
+      }
+
+      iron-icon.source-input {
+        padding: 7px;
+        margin-top: 15px;
+      }
+
+      paper-dropdown-menu.source-input {
+        margin-left: 10px;
+      }
+    </style>
+
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='layout horizontal'>
         <div class='flex'>
diff --git a/src/more-infos/more-info-script.html b/src/more-infos/more-info-script.html
index 1bd7c0dce4..7cce919413 100644
--- a/src/more-infos/more-info-script.html
+++ b/src/more-infos/more-info-script.html
@@ -1,8 +1,9 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 
 <dom-module id='more-info-script'>
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+
     <div class='layout vertical'>
       <div class='data-entry layout justified horizontal'>
         <div class='key'>Last Action</div>
diff --git a/src/more-infos/more-info-sun.html b/src/more-infos/more-info-sun.html
index a614ac6857..5eaaa4105e 100644
--- a/src/more-infos/more-info-sun.html
+++ b/src/more-infos/more-info-sun.html
@@ -3,8 +3,9 @@
 <link rel="import" href="../components/relative-ha-datetime.html">
 
 <dom-module id="more-info-sun">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+
     <template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
       <div class='data-entry layout justified horizontal'>
         <div class='key'>
diff --git a/src/more-infos/more-info-thermostat.html b/src/more-infos/more-info-thermostat.html
index 82bfb19927..a8efaac860 100644
--- a/src/more-infos/more-info-thermostat.html
+++ b/src/more-infos/more-info-thermostat.html
@@ -3,22 +3,23 @@
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
 <dom-module id='more-info-thermostat'>
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    paper-slider {
-      width: 100%;
-    }
-
-    .away-mode-toggle {
-      display: none;
-      margin-top: 16px;
-    }
-
-    .has-away_mode .away-mode-toggle {
-      display: block;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      paper-slider {
+        width: 100%;
+      }
+
+      .away-mode-toggle {
+        display: none;
+        margin-top: 16px;
+      }
+
+      .has-away_mode .away-mode-toggle {
+        display: block;
+      }
+    </style>
+
     <div class$='[[computeClassNames(stateObj)]]'>
       <div>
         <div>Target Temperature</div>
diff --git a/src/more-infos/more-info-updater.html b/src/more-infos/more-info-updater.html
index 48366ca762..68baebf34a 100644
--- a/src/more-infos/more-info-updater.html
+++ b/src/more-infos/more-info-updater.html
@@ -1,13 +1,14 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <dom-module id="more-info-updater">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .link {
-      color: #03A9F4;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .link {
+        color: #03A9F4;
+      }
+    </style>
+
     <div class='layout vertical'>
 
       <a class='link' href='https://home-assistant.io/getting-started/#updating' target='_blank'>Update Instructions</a>
diff --git a/src/resources/home-assistant-style.html b/src/resources/home-assistant-style.html
index 8c553ba113..eccbf30f6f 100644
--- a/src/resources/home-assistant-style.html
+++ b/src/resources/home-assistant-style.html
@@ -1,6 +1,13 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <style is="custom-style">
+  body {
+    font-family: 'Roboto', 'Noto', sans-serif;
+    font-weight: 300;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
   :root {
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
diff --git a/src/state-summary/state-card-configurator.html b/src/state-summary/state-card-configurator.html
index c13fc380be..e0813caf84 100644
--- a/src/state-summary/state-card-configurator.html
+++ b/src/state-summary/state-card-configurator.html
@@ -4,17 +4,17 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id='state-card-configurator'>
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-    paper-button {
-      color: var(--default-primary-color);
-      font-weight: 500;
-      top: 3px;
-      height: 37px;
-    }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-button {
+        color: var(--default-primary-color);
+        font-weight: 500;
+        top: 3px;
+        height: 37px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index a3f105b9bc..dc8ca4fbac 100755
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -3,19 +3,19 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-display">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  .state {
-    @apply(--paper-font-body1);
-    color: var(--primary-text-color);
-
-    margin-left: 16px;
-    text-align: right;
-    line-height: 40px;
-  }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .state {
+        @apply(--paper-font-body1);
+        color: var(--primary-text-color);
+
+        margin-left: 16px;
+        text-align: right;
+        line-height: 40px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>[[stateObj.stateDisplay]]</div>
diff --git a/src/state-summary/state-card-hvac.html b/src/state-summary/state-card-hvac.html
index 57233dd5b0..464eb4d51e 100755
--- a/src/state-summary/state-card-hvac.html
+++ b/src/state-summary/state-card-hvac.html
@@ -3,20 +3,20 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-hvac">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  .state {
-    @apply(--paper-font-body1);
-    color: var(--primary-text-color);
-
-    margin-left: 16px;
-    text-transform: capitalize;
-    text-align: right;
-    line-height: 40px;
-  }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .state {
+        @apply(--paper-font-body1);
+        color: var(--primary-text-color);
+
+        margin-left: 16px;
+        text-transform: capitalize;
+        text-align: right;
+        line-height: 40px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>[[stateObj.state]]</div>
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index 89aa819815..b463dca4be 100644
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@@ -4,23 +4,23 @@
 <link rel="import" href="../components/entity/state-badge.html">
 
 <dom-module id="state-card-input_select">
-  <style>
-  :host {
-    display: block;
-  }
-
-  state-badge {
-    float: left;
-    margin-top: 10px;
-  }
-
-  paper-dropdown-menu {
-    display: block;
-    margin-left: 53px;
-  }
-  </style>
-
   <template>
+    <style>
+      :host {
+        display: block;
+      }
+
+      state-badge {
+        float: left;
+        margin-top: 10px;
+      }
+
+      paper-dropdown-menu {
+        display: block;
+        margin-left: 53px;
+      }
+    </style>
+
     <state-badge state-obj='[[stateObj]]'></state-badge>
     <paper-dropdown-menu
       on-tap='stopPropagation'
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
index 90743ae339..42b0dbf9b5 100644
--- a/src/state-summary/state-card-input_slider.html
+++ b/src/state-summary/state-card-input_slider.html
@@ -4,14 +4,14 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-input_slider">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  paper-slider {
-    margin-left: 16px;
-  }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-slider {
+        margin-left: 16px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-slider
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index eec9d86752..360cb00102 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -3,35 +3,36 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-media_player">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  :host {
-    line-height: 1.5;
-  }
-
-  .state {
-    @apply(--paper-font-common-nowrap);
-    @apply(--paper-font-body1);
-    margin-left: 16px;
-    text-align: right;
-  }
-
-  .main-text {
-    @apply(--paper-font-common-nowrap);
-    color: var(--primary-text-color);
-    text-transform: capitalize;
-  }
-
-  .main-text[take-height] {
-    line-height: 40px;
-  }
-
-  .secondary-text {
-    @apply(--paper-font-common-nowrap);
-    color: var(--secondary-text-color);
-  }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        line-height: 1.5;
+      }
+
+      .state {
+        @apply(--paper-font-common-nowrap);
+        @apply(--paper-font-body1);
+        margin-left: 16px;
+        text-align: right;
+      }
+
+      .main-text {
+        @apply(--paper-font-common-nowrap);
+        color: var(--primary-text-color);
+        text-transform: capitalize;
+      }
+
+      .main-text[take-height] {
+        line-height: 40px;
+      }
+
+      .secondary-text {
+        @apply(--paper-font-common-nowrap);
+        color: var(--secondary-text-color);
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index 6c3be7e8a9..a5b8a7622c 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@@ -4,20 +4,20 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-rollershutter">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  :host {
-    line-height: 1.5;
-  }
-
-  .state {
-    text-align: right;
-    white-space: nowrap;
-    width: 127px;
-  }
-
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        line-height: 1.5;
+      }
+
+      .state {
+        text-align: right;
+        white-space: nowrap;
+        width: 127px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index 2fef470105..ed5dc6dec4 100644
--- a/src/state-summary/state-card-scene.html
+++ b/src/state-summary/state-card-scene.html
@@ -4,17 +4,17 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-scene">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-    paper-button {
-      color: var(--default-primary-color);
-      font-weight: 500;
-      top: 3px;
-      height: 37px;
-    }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-button {
+        color: var(--default-primary-color);
+        font-weight: 500;
+        top: 3px;
+        height: 37px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-button on-tap='activateScene'>ACTIVATE</paper-button>
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index 4899108cbc..827c651b7a 100644
--- a/src/state-summary/state-card-script.html
+++ b/src/state-summary/state-card-script.html
@@ -5,17 +5,17 @@
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
 
 <dom-module id="state-card-script">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-    paper-button {
-      color: var(--default-primary-color);
-      font-weight: 500;
-      top: 3px;
-      height: 37px;
-    }
-  </style>
-
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-button {
+        color: var(--default-primary-color);
+        font-weight: 500;
+        top: 3px;
+        height: 37px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 5b4b3621a4..cd73586ffb 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@@ -3,27 +3,28 @@
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-thermostat">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-  :host {
-    @apply(--paper-font-body1);
-    line-height: 1.5;
-  }
-
-  .state {
-    margin-left: 16px;
-    text-align: right;
-  }
-
-  .target {
-    color: var(--primary-text-color);
-  }
-
-  .current {
-    color: var(--secondary-text-color);
-  }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        @apply(--paper-font-body1);
+        line-height: 1.5;
+      }
+
+      .state {
+        margin-left: 16px;
+        text-align: right;
+      }
+
+      .target {
+        color: var(--primary-text-color);
+      }
+
+      .current {
+        color: var(--secondary-text-color);
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 1aa89066e1..bbfe532f81 100755
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@@ -4,13 +4,14 @@
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
 
 <dom-module id="state-card-toggle">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-  <style>
-    ha-entity-toggle {
-      margin-left: 16px;
-    }
-  </style>
   <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      ha-entity-toggle {
+        margin-left: 16px;
+      }
+    </style>
+
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <ha-entity-toggle state-obj="[[stateObj]]" hass='[[hass]]'></ha-entity-toggle>
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index 73b521bad4..ea15ddd412 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@@ -3,22 +3,22 @@
 <link rel="import" href="../components/entity/state-badge.html">
 
 <dom-module id="state-card-weblink">
-  <style>
-  :host {
-    display: block;
-  }
-  .name {
-    @apply(--paper-font-common-nowrap);
-    @apply(--paper-font-body1);
-    color: var(--primary-color);
-
-    text-transform: capitalize;
-    line-height: 40px;
-    margin-left: 16px;
-  }
-  </style>
-
   <template>
+    <style>
+      :host {
+        display: block;
+      }
+      .name {
+        @apply(--paper-font-common-nowrap);
+        @apply(--paper-font-body1);
+        color: var(--primary-color);
+
+        text-transform: capitalize;
+        line-height: 40px;
+        margin-left: 16px;
+      }
+    </style>
+
     <state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
     <a href$='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
   </template>