muni legend

<div class="wax-legend" style="display: block; "><div class="dot-legend">
<div class="dot-title">Enstrat Renewable Energy Potential</div>
<div class="dot-source">
Source: <a href="http://www.enstrat.com">Enstrat Analytics, 2011</a>
</div>
</div>

<style type="text/css">
  .wax-legend .dot-title {
    font-weight: bold;
    }
  .wax-legend .dot-scale {
    font-size: 90%;
    }
  .wax-legend .dot-source {
    font-size: 80%;
    color: #222222;
    }
  .wax-legend a {
    color: #63aece;
</style><div class="overlay-legend">
<style type="text/css">
  .wax-legend .overlay-legend {
    padding-top: 10px;
    border-top: 1px solid #cccccc;
    }
  .wax-legend .title {
    text-align: left;
    margin-bottom: 8px;
    }
  .wax-legend .scale ul li {
    display: block;
    float: left;
    width: 50px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 90%;
    }
  .wax-legend ul.labels li span {
    height: 16px;
    width: 50px;
    }
  .wax-legend ul li span {
    display: block;
    float: left;
    }
  .wax-legend .source {
    font-size: 80%;
    color: #222222;
    }
  .wax-legend a {
    color: #63aece;
    }
</style></div>
<div class="overlay-legend">
<div class="title">Municipality Scores - United States</div>
<div class="scale">
  <ul class="labels">
    <li><span style="background:#bb0044;"></span><15</li>
    <li><span style="background:#dd0066;"></span>15-20</li>
    <li><span style="background:#ff0066;"></span>20-25</li>
    <li><span style="background:#ff3377;"></span>25-30</li>
    <li><span style="background:#ff6688;"></span>>30</li>
  </ul>
</div>