background: rgba(126, 52, 245, 0.0784313725490196);

         box-shadow: 0 0 20px #ffff00;

     }

     a {

         color: #8e8eff;

         padding: 3px;

         display: inline-block;

         font-size: 145%;

     }

    </style>

    <div id="box">

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

      <button on-click="unlink">Unlink</button>

    </div>

  </template>

  <script src="edit-choice.js"></script>

</dom-module>

}

a.resource {

    color: inherit;

    text-decoration: none;

}

.resource {

    border: 1px solid #545454;

    border-radius: 5px;

    padding: 1px;

    margin: 2px;

    background: rgb(49, 49, 49);

    text-shadow: 1px 1px 2px black;

}

.resource.minor {

    background: none;

    border: none;

}

.resource a {

    color: rgb(150, 150, 255);

    padding: 1px;

    display: inline-block;

}

.resource.minor a {

    </style>

  </template>

</dom-module>

<!-- sometimes we draw attrs within the shape of a note. -->

<dom-module id="light9-timeline-note-inline-attrs">

  <template>

    <style>

     #top {

         position: absolute;

         overflow: hidden;

         border-radius: 6px;

         border: 1px solid #313131;

         padding: 3px;

         z-index: 2;

     }

    </style>

    <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">

      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>

      <table>

        <tr><th>effect:</th><td><edit-choice graph="{{graph}}" uri="{{effect}}"></edit-choice></td></tr>

        <tr><th>colorScale:</th><td>

          <light9-color-picker color="{{colorScale}}"></light9-color-picker>