{% 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="key-wrap">
            <ul class="key">
            <li class="key-item"><b style="background: #dadaeb;"></b><label>0%</label></li><li class="key-item"><b style="background: #bcbddc;"></b><label>30%</label></li><li class="key-item"><b style="background: #9e9ac8;"></b><label>37%</label></li><li class="key-item"><b style="background: #756bb1;"></b><label>45%</label></li><li class="key-item"><b style="background: #54278f;"></b><label>55%</label><label class="end-label">67%</label></li></ul>

 </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 %}