{% block title %}{{ timeline.title }}{% endblock %}

{% block extra_head %}
{# hack to get our timeline in the centre of the page again #}
{# would override margins on #timeline-embed but they're marked !important #}
<style>
#timeline-container {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
</style>
{% endblock %}

{% block timelines_class %}active{% endblock %}

{% block main %}
<div id="timeline-container">
<div id="timeline-embed">
</div>
</div>
{% endblock %}

{% block extra_body %}
<script type="text/javascript">
    var timeline_config = {
        width: $(window).width() - 101,
        height: $(window).height() - 56,
        source: {{ timeline.source|safe }},
        css: "{{ STATIC_URL }}css/timeline.css",
        js: "{{ STATIC_URL }}js/timeline.js"
    }
</script>
<script type="text/javascript" src="{{ STATIC_URL }}js/storyjs-embed.js"></script>
{% endblock %}
