{% 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">
            <h3>% 'American' Ancestry</h3>
            <ul class="key">
            <li class="key-item"><b style="background: #C5DFDF;"></b><label>0%</label></li><li class="key-item"><b style="background: #8BC0BF;"></b><label>5%</label></li><li class="key-item"><b style="background: #51A09E;"></b><label>10%</label></li><li class="key-item"><b style="background: #17807E;"></b><label>15%</label></li><li class="key-item"><b style="background: #11605E;"></b><label>25%</label><label class="end-label">58%</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 %}