snippet.html

<div id="wax-legend-census">
  <a href="http://www.npr.org"><img src='data:image/png;base64,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' /></a>
    <a class='show-embed' href="javascript:void(0)" onclick="showLegend();"> &#x2630; show legend</a>
    <a href='http://npr.org/censusmap' class='gotosite'>visit npr.org/censusmap</a>
</div>
<div id="wax-legend-content" style="display:none;">
  <a href="javascript:void(0)" onclick="removeLegend();" id='closebutton'>&#x2716;</a>
  <script type="text/javascript">
    window.onload = function() {
      if (location.host === 'www.npr.org') {
        document.getElementById('wax-legend-census').style.display='none';
        document.getElementById('closebutton').style.display='none';
        document.getElementById('wax-legend-content').style.display='block';
        }
    }
    function showLegend(){
      if (location.host != 'www.npr.org') {
          document.getElementById('wax-legend-content').style.display='block';
          document.getElementById('wax-legend-census').style.display='none';
        }
      }
    function removeLegend(){
      if (location.host != 'www.npr.org') {
        document.getElementById('wax-legend-content').style.display='none';
        document.getElementById('wax-legend-census').style.display='block';
      }
    }
  </script>
  <div class="census-legend">
    <div class="census-title">Percent Population Change (2000-2010)</div>
    <div class="census-scale">
      <ul class="census-labels">
        <li><span style="background:#935E9C;"></span><-20%</li>
        <li><span style="background:#B9A1C7;"></span>-20%</li>
        <li><span style="background:#E2D4E2;"></span>-10%</li>
        <li><span style="background:#ECECEC;"></span>+10%</li>
        <li><span style="background:#D7E7D3;"></span>+20%</li>
        <li><span style="background:#98C595;"></span>+30%</li>
        <li><span style="background:#519265;"></span>>+30%</li>
      </ul>
    </div>
    <div class='census-source'>
      Source
      <a href='http://www.census.gov'>U.S. Census Bureau</a>, 
      <a href='http://www.ire.org/census/'>IRE</a>
    </div>
    <a href='http://npr.org/censusmap' class='gotosite'>visit npr.org/censusmap</a>
  </div>
  <style type="text/css">
  .wax-legend {
    font: normal 13px/20px Arial,sans-serif;
    border: 1px solid #b3b3b3;
    background: #fff;
    overflow:hidden!important;
    max-width: 280px!important;
    height: 90px!important;
    padding: 4px 9px;
    position: relative;
    }
    #wax-legend-content a,
    #wax-legend-census a {
      text-decoration: none;
      }
       #wax-legend-census img {
         margin: -4px -9px;
        }
    #wax-legend-census .show-embed {
      display: block;
      margin-top: 5px;
      color: #7F8A8C;
      height: 18px;
      line-height: 18px;
    }
  .wax-legend .census-title {
    text-align: left;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 11px;
    }
  .wax-legend .census-scale ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    }
    .wax-legend .census-scale ul li {
      display: block;
      float: left;
      width: 40px;
      margin-bottom: 5px;
      text-align: center;
      font-size: 10px;
      list-style: none;
      }
      .wax-legend ul.census-labels li span {
        height: 12px;
        width: 40px;
        }
    .wax-legend ul li span {
      display: block;
      float: left;
      }
  .wax-legend .census-source {
    font-size: 8px;
    clear: both;
    text-transform: uppercase;
    color: #b3b3b3;
    }
    a.gotosite{
      position: absolute;
      bottom: 7px;
      right: 9px;
      color: #282828;
      font-size: 11px;
      }
    .wax-legend .census-source a{
      color: #282828;
      }
    #closebutton {
      float: right;
      color: #000;
      }
  </style>
</div>