DNI Legend

<div class="wax-legend" style="display: block; "><div class="dot-legend">
<div class="dot-title">Annual Direct Normal Irradiance (DNI)</div>
<div class="dot-source">
Source: <a href="http://www.nrel.gov/">NREL, 2010</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">Value by Zipcode - United States</div>
<div class="scale">
  <ul class="labels">
    <li><span style="background:#5E4FA2;"></span><3400</li>
    <li><span style="background:#3288BD;"></span>3400-3600</li>
    <li><span style="background:#66C2A5;"></span>3600-3800</li>
    <li><span style="background:#ABDDA4;"></span>3800-3900</li>
    <li><span style="background:#E6F598;"></span>3900-4100</li>
    <li><span style="background:#FEE08B;"></span>4100-4200</li>
    <li><span style="background:#FDAE61;"></span>4200-4400</li>
    <li><span style="background:#F46D43;"></span>4400-4600</li>
    <li><span style="background:#D53E4F;"></span>4600-5400</li>
    <li><span style="background:#9E0142;"></span><5400</li>
  </ul>
</div>