designer

designer.html

<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="boiler-gui">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 352px;
        height: 332px;
        opacity: 1;
        background-image: url(http://towerofawesome.org/calctwopointoh/images/gui_boiler_solid_x2.png);
      }
      .tank {
        position: absolute;
        top: 46px;
        height: 94px;
        width: 32px;
      }
      .tank .fluid {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 50%;
        left: 0px;
      }
      .tank .gauge {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0px;
        left: 0px;
        background-image: url(http://towerofawesome.org/calctwopointoh/images/tank_gague_x2.png);
      }
      .tank.water {
        left: 232px;
      }
      .tank.water .fluid {
        background-image: url(http://towerofawesome.org/calctwopointoh/images/water_still_x2.gif);
      }
      .tank.steam {
        left: 34px;
      }
      .tank.steam .fluid {
        background-image: url(http://towerofawesome.org/calctwopointoh/images/steam_still_x2.gif);
      }
    </style>
    <div id="steam-tank" class="tank steam">
      <div id="steam-fluid" class="fluid"></div>
      <div id="steam-gauge" class="gauge"></div>
    </div>
    <div id="water-tank" class="tank water">
      <div id="water-fluid" class="fluid"></div>
      <div id="water-gauge" class="gauge"></div>
    </div>
  </template>

  <script>

    Polymer('boiler-gui', {
      
    });

  </script>

</polymer-element>