{% extends 'base_template.html' %}

{% block content %}

    {% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
    {% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
	
	<div class="legend-wrapper">
		<div class='legend'>
		<p class="legend-title">Annual Liters Per Person</p>
		<div class='legend-scale'>
		  <ul class='legend-labels'>
		    <li><span style='background:#f2f0f7;'></span>< 1</li>
		    <li><span style='background:#dadaeb;'></span>1-3</li>
		    <li><span style='background:#bcbddc;'></span>3-5</li>
		    <li><span style='background:#9e9ac8;'></span>5-7</li>
		    <li><span style='background:#807dba;'></span>7-9</li>
		    <li><span style='background:#6a51a3;'></span>9-12</li>
		    <li><span style='background:#4a1486;'></span>> 12</li>
		  </ul>
		</div>
	</div>
	</div>
    
	<div id="graphic" class="graphic"></div>

    <div class="footer">
		{% if COPY.labels.footnote %}<p>Notes: {{ COPY.labels.footnote|smarty }}</p>{% endif %}
        {% if COPY.labels.source %}<p>Data: {{ COPY.labels.source|smarty }}</p>{% endif %}
        {% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
    </div>

{% endblock content %}