{% extends "base.html" %}
{% block extra_css %}
<style type="text/css">
.therules {
  font-size: 24px;
  margin: 0.5em;
}
ol {
  padding-left: 3em;
  margin: 0;
}
#join-button {
  display: block;
  line-height: 4em;
  text-align: center;
  vertical-align: middle;
  float: none;
}
@media only screen and (max-device-width: 480px) {
  .therules {
    font-size: 120%;
    margin: 0.5em;
  }
}
</style>
{% endblock %}
{% block content %}
<div class="area-main">
  <div class="therules">
    <strong>The rules are simple.</strong>
    <ol>
    <li>Take a three word phrase.</li>
    <li>Send us a photo you think fits the phrase.</li>
    <li>Vote on who wins.</li>
    </ol>
  </div>
</div>
<div class="area-sidebar-short">
   <div>
      <a id="join-button" class="positive button" href="{% url hunt-index %}">Join a hunt now!</a>
   </div>
   <h3>No sign up necessary!</h3>
</div>
{% endblock %}

{% extends "base.html" %}
{% block extra_css %}
<style type="text/css">
.therules {
  font-size: 24px;
  margin: 0.5em;
}
ol {
  padding-left: 3em;
  margin: 0;
}
#join-button {
  display: block;
  line-height: 4em;
  text-align: center;
  vertical-align: middle;
  float: none;
}
@media only screen and (max-device-width: 480px) {
  .therules {
    font-size: 120%;
    margin: 0.5em;
  }
}
</style>
{% endblock %}
{% block content %}
<div class="area-main">
  <div class="therules">
    <strong>The rules are simple.</strong>
    <ol>
    <li>Take a short phrase.</li>
    <li>Send us a photo you think fits the phrase.</li>
    <li>Vote on who wins.</li>
    </ol>
  </div>
</div>
<div class="area-sidebar-short">
   <div>
      <a id="join-button" class="positive button" href="{% url hunt-index %}">Join a hunt now!</a>
   </div>
   <h3>No sign up necessary!</h3>
</div>
{% endblock %}

Change the wording of the rules slightly.
Change the wording of the rules slightly.
