Change in ag yields legend

Change in ag yields legend

<style type="text/css">

.wax-legend {
max-width: 600px;
}
  .wax-legend .y-legend {
    padding-top: 5px;
max-width: 500px;
width: 230px;

    }
  .wax-legend .y-title {      
      text-align: center;
    padding-bottom: 8px;
    border-bottom:1px solid #c5c5c7;
    margin-bottom:10px;
    margin-top:15px;
    line-height:15px;
    font-size: 110%;
    font-family: Hevetica, Arial, Sans Serif;
    font-weight:600;
    }

  .wax-legend .y-scale ul {
    margin-bottom: 8px;
    padding: 0;
    float: left;
    list-style: none;
    }
  .wax-legend .y-scale ul li {
    display: block;
    float: left;
    width: 20px;
    margin: 0;
    line-height: 10px;
    padding: 0;
    text-align: center;
    font-size: 85%;
}

  .wax-legend ul.y-labels li span {
    height: 20px;
    width: 20px;
    margin-bottom: 6px;
    }
  .wax-legend ul li span {
    display: block;
    float: center;
    margin: 0;
    padding: 0;

    }
    .wax-legend .note {
    text-align: center;
    font-family: Hevetica, Arial, Sans Serif;
    font-size:  80%;
    font-style: italic;

}
 .wax-legend .y-source {
   font-size: 80%;
   color: #666;
   clear: both;
   line-height:10px;
   text-align: center;
   margin-top: 5px;
}
.wax-legend .y-link {   
   font-size: 100%;
   color: #992222;
 clear: both;
   line-height:10px;
   text-align: center;
   margin-top: 5px;
   }

    .wax-legend .y-nodata {
         height: 16px;
         width: 40px;
         margin-left:10px !important;
    }
</style>

<div class="y-legend">
    <div class="y-title">
        Changing Agricultural Yields
    </div>
    <div class="y-scale">
        <ul class="y-labels">
            <li>
                <span style="background:rgb(244,182,70);"></span>
                <-50
            <li>
                <span style="background:rgb(252,213,94);"></span>
       
            </li>
            <li>
                <span style="background:rgb(255,234,139);"></span>
                
            </li>
            <li>
                <span style="background:rgb(255,245,197);"></span>
                
            </li>
            <li>
                <span style="background:#ecf0e8    ;"></span>  No              Change
            </li>
            <li>
                <span style="background:rgb(206,239,232);"></span>
               
            </li>
            <li>
                <span style="background:rgb(158,223,208)"></span>
                
            </li>
            <li>
                <span style="background:rgb(125,194,184);"></span>
            
            </li>
            <li>
                <span style="background:rgb(107,153,160);"></span>
            
            </li>
            <li>
                <span style="background:rgb(88,112,136);"></span>
                 >100
            </li>    
            <li class="y-nodata">
                <span style="background:#999;"></span>
                No Data
            </li>            
        </ul>
    </div>
<div class="note">Percent change in agricultural yields by 2050</div>
           <div class="y-source">Source:
        <a href="http://www.worldbank.org"='_blank'>
        <span class="y-link">The World Bank</span>
       </a>
       </div>
        
</div>