ed-popup.html

<style>
  .wax-popup {
    font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #404040;
    height: auto;
    background: #fff;
    border: 1px solid #8C8C8C;
    border: 1px solid rgba(0, 0, 0, .45);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    z-index: 1000;
    padding: 20px 10px;
    }
    .wax-popup .header {
      border-bottom: 1px solid #ccc;
      margin: 10px 0 20px;
      }
    .wax-popup h2 {
      font-size: 24px;
      line-height: 28px;
      font-weight: normal;
      float: left;
      margin: 5px 0 10px;
      padding: 0;
      }
    .wax-popup span.county {
      display: block;
      float: right;
      text-align: right;
      color: gray;
      line-height: 35px;
      }	
    .wax-popup .graduation {
      color: #fff;
      font-weight: 500;
      clear: both;
      padding: 3px 10px;
      margin-bottom: 5px;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
      }

    .wax-popup .graduation.a { background-color: #96629f; }
    .wax-popup .graduation.b { background-color: #c26091; }
    .wax-popup .graduation.c { background-color: #d9776a; }
    .wax-popup .graduation.d { background-color: #d98859; }
    .wax-popup .graduation.f { background-color: #dfb046; }
  	.wax-popup .graduation.nd { background-color: #a4abaf }    

    .wax-popup span.rate {
      display: block;
      background-repeat: no-repeat;
      font-weight: 600;
      text-align: right;
      float: right;
      font-size: 13px;
      padding-right: 15px;
      background-position: right 5px;
      }
      span.rate.up {
        background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB9SURBVBiVhc4hCwJhEATQt3KinF0wKpg0CBbB/x8EMdrMYrpkUXQtFw7x87ZsecxMZKaIWGHhzw3af8a1F2Zm4oSmLxEqRAlWEBE1dpiUYKDGHuO+jcsCSry71dMf6IUjHtiiDqwx76AnDpnZtPuH2ARGbf0MN1wy8/5d8QGbfxzs/XliBgAAAABJRU5ErkJggg==');
        }
      span.rate.down {
        background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACTSURBVBiVfdA9akJhEIXhZ64xhmuTlKYQLGyCoJgibsDFC27BBVilCDb+MCnyYS6XLzkwMDMc3jlMYIQ5JjjikJknPQUWmHV2F+wy8xMiYohVYIunHuCGPc54RxtYYto/hSzVwABfeMVDJVbch8wUES02GFfIv8YS+hEfeK4Zm05/LZmqagotsMbLv0a8+Xn4n/oGYsgcDgmXTboAAAAASUVORK5CYII=');
        }
      span.rate.same {
        background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAgSURBVBiVY2RgYPBlIAIwEaOIJIWM////p7KJDAPmGQDuPAOlniKSnwAAAABJRU5ErkJggg==');
        background-position: right 7px;
        }

  .wax-popup table {
    width: 100%;
    margin-bottom: 18px;
    padding: 0;
    border-collapse: separate;
    *border-collapse: collapse;
    font-size: 13px;
    }
  .wax-popup table th,
  .wax-popup table td {
    padding: 5px 10px 4px;
    line-height: 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    width: 100px;
    text-align: right;
  }
  .wax-popup table th.historical,
  .wax-popup table td.historical {
    color: #ccc;
    }
  @media all and (orientation:portrait) {
    .wax-popup table th,
    .wax-popup table td {
      text-align: left;
    }
  }

  .wax-popup table th {
    padding-top: 4px;
    font-weight: 600;
    vertical-align: middle;
    }
  .wax-popup table thead th {
    border-top: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    }
  .wax-popup table tbody th {
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
    }
  .wax-popup table tbody th,
  .wax-popup table thead th.first {
    text-align: left;
    padding: 0 10px;
    font-size: 11px;
    width: auto;
    }
  .wax-popup table tr + tr td {
    border-bottom: 1px solid #ddd;
    }
  .wax-popup .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
  * html .wax-popup .clearfix { height: 1%; }
  *:first-child + html .wax-popup .clearfix { min-height: 1%; }
  </style>

    <div class='header clearfix'>
      <h2 class='type-school'>{{{schnam}}}</h2>
      <span class='county'>{{{leanm}}}<span class='state'>, {{{stnam}}}</state></span>
    </div>

    <div class='graduation {{{grade}}}'>Graduation Rate <span class="rate up">{{{pct_gradrate09}}}</span></div>
  {{#e12}}
      <table>
        <thead>
          <tr>
            <th class='first'>Grade 12</th>
            <th class='historical'>2007 - 2008</th>
            <th class='historical'>2008 - 2009</th>
            <th>2009 - 2010</th>
            <th>2009 District avg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Reading</th>
            <td class='historical'>{{{all_read12_0708}}}</td>
            <td class='historical'>{{{all_read12_0809}}}</td>
            <td>{{{all_read12_0910}}}</td>
            <td>{{{lea_read12_0910}}}</td>
          </tr>
          <tr>
            <th>Math</th>
            <td class='historical'>{{{all_math12_0708}}}</td>
            <td class='historical'>{{{all_math12_0809}}}</td>
            <td>{{{all_math12_0910}}}</td>
            <td>{{{lea_math12_0910}}}</td>
          </tr>
        </tbody>
      </table>
  {{/e12}}
  {{#e08}}
      <table>
        <thead>
          <tr>
            <th class='first'>Grade 8</th>
            <th class='historical'>2007 - 2008</th>
            <th class='historical'>2008 - 2009</th>
            <th>2009 - 2010</th>
            <th>2009 District avg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Reading</th>
            <td class='historical'>{{{all_read08_0708}}}</td>
            <td class='historical'>{{{all_read08_0809}}}</td>
            <td>{{{all_read08_0910}}}</td>
            <td>{{{lea_read08_0910}}}</td>
          </tr>
          <tr>
            <th>Math</th>
            <td class='historical'>{{{all_math08_0708}}}</td>
            <td class='historical'>{{{all_math08_0809}}}</td>
            <td>{{{all_math08_0910}}}</td>
            <td>{{{lea_math08_0910}}}</td>
          </tr>
        </tbody>
      </table>
  {{/e08}}
  {{#e04}}
      <table>
        <thead>
          <tr>
            <th class='first'>Grade 4</th>
            <th class='historical'>2007 - 2008</th>
            <th class='historical'>2008 - 2009</th>
            <th>2009 - 2010</th>
            <th>2009 District avg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Reading</th>
            <td class='historical'>{{{all_read04_0708}}}</td>
            <td class='historical'>{{{all_read04_0809}}}</td>
            <td>{{{all_read04_0910}}}</td>
            <td>{{{lea_read04_0910}}}</td>
          </tr>
          <tr>
            <th>Math</th>
            <td class='historical'>{{{all_math04_0708}}}</td>
            <td class='historical'>{{{all_math04_0809}}}</td>
            <td>{{{all_math04_0910}}}</td>
            <td>{{{lea_math04_0910}}}</td>
          </tr>
        </tbody>
      </table>
  {{/e04}}
  <small>District averages reflect on 2009 data</small>