#mainLabel {

             font-size: 120%; 

             color: #9ab8fd;

             text-decoration: initial;

         }

        </style>

        <div class="device">

          <h2 style$="[[bgStyle]]">

            <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>

            a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>

          </h2>

          <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">

            <div class="deviceAttr">

              <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>

              <light9-live-control device="{{uri}}" device-attr="{{dattr}}"></light9-live-control>

            </div>

          </template>

        </div>

      </template>

    </dom-module>

    <dom-module id="light9-live-controls">

      <template>

        <style>

         #preview {

             width: 100%;

         }

         #deviceControls {

             column-width: 400px;

         }

         light9-live-device-control > div {

             break-inside: avoid-column;

         }

        </style>

        <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

        <light9-collector-client self="{{client}}"></light9-collector-client>

        <h1>device control <button on-click="resendAll">resend all</button> <button on-click="clearAll">clear all</button></h1>

        <div id="save">

          <div>

            effect name: <input type="input" value="{{newEffectName::change}}">

            <button on-click="saveNewEffect">save new effect</button>

          </div>

          <textarea id="preview" value="{{effectPreview}}"></textarea>

        </div>

        <div id="deviceControls">

          <template is="dom-repeat" items="{{devices}}" as="device">

            <light9-live-device-control graph="{{graph}}" uri="{{device.uri}}"></light9-live-device-control>

          </template>

        </div>