<% content_for :head do %>

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

<% end %>

<div class="tutorial-overlay">

<p class="instruction" id="mark-all-instruction"><%= t('tutorial.mark_all') %> <br/><%= t('tutorial.as_read') %></p>

</div>

<div class="tutorial-overlay">

<p class="instruction" id="refresh-instruction"><%= t('tutorial.refresh') %></p>

</div>

<div class="tutorial-overlay">

<p class="instruction" id="feeds-instruction"><%= t('tutorial.your_feeds') %></p>

</div>

<div class="tutorial-overlay">

<p class="instruction" id="add-feed-instruction"><%= t('tutorial.add_feed') %></p>

</div>

<div class="tutorial-overlay">

<p class="instruction" id="story-instruction"><%= t('tutorial.your_stories') %><br/><%= t('tutorial.click_to_read') %></p>

</div>

<div id="action-bar">

<%= render_partial :tutorial_action_bar, {stories: @sample_stories} %>

</div>

<%= render_js :stories, { stories: @sample_stories } %>

<div id="stories">

<ul id="story-list">

</ul>

</div>

<div class="setup">

<h1><%= t('tutorial.title') %> <span class="orange"><%= t('tutorial.simple') %></span>.</h1>

<h2><%= t('tutorial.subtitle') %></h2>

<hr />

<p id="cta"><%= t('tutorial.description') %></p>

<hr />

<div class="center">

<a href="/news" id="start" style="display: none" class="btn btn-primary"><%= t('tutorial.start') %></a>

</div>

</div>

<script type="text/javascript">

$(document).ready(function() {

setTimeout(function() {

$("#cta").fadeOut(function() {

$(this).html("<%= t('tutorial.ready') %>").fadeIn();

$("#start").fadeIn();

});

}, 10 * 1000);

});

</script>