{% extends "global/Page.html" %}
{% load otree static %}


{% block content %}

<style>
h1 {
    width:580px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    text-align:center;
    margin:40px auto;
 }
#container {
    width:580px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:11px;
    text-align:center;
    margin:auto;
 }
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
 }
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
 }
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
 }
#no1 a {
    height:60px;
 }
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
    text-align:center;
 }
#line2 {
    font-size:0;
    width:424px;
    height:1px;
    color:#fff;
    background-color:#000;
    margin:auto;
    text-align:center;
 }
#line3 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:78px;
    float:left;
    text-align:center;
 }
#line4,#line5 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#fff;
    margin-left:140px;
    float:left;
    text-align:center;
 }
#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:140px;
    float:left;
    text-align:center;
 }
#no2 {
    display:inline;
    border:1px solid #000;
    clear:both;
    margin-left:35px;
    float:left;
 }
#no2 a,#no4 a,#no8 a {
    width:84px;
    height:50px;
    padding-top:8px;
 }
#no3 {
    display:inline;
    border:1px solid #000;
    margin-left:30px;
    float:left;
    text-align:center;
 }
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
    width:84px;
    height:42px;
    padding-top:15px;
 }
#no4 {
    display:inline;
    border:1px solid #000;
    margin-left:53px;
    float:right;
    margin-right:30px;
    text-align:center;
 }
#no5 {
    display:inline;
    border:1px solid #000;
    margin-left:55px;
    float:left;
 }
#line7,#line13 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:219px;
    float:left;
 }
#line8,#line14 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:281px;
    float:left;
 }
#no6,#no8 {
    display:inline;
    border:1px solid #000;
    margin-left:30px;
    float:left;
 }
#line9,#line11,#line15,#line17 {
    font-size:0;
    display:inline;
    width:26px;
    height:1px;
    color:#fff;
    background-color:#000;
    margin-top:29px;
    float:left;
 }
#line10,#line12,#line16,#line18 {
    font-size:0;
    display:inline;
    width:1px;
    height:60px;
    color:#fff;
    background-color:#000;
    float:left;
 }
#line16,#line18 {
    height:30px;
 }
#no7,#no9 {
    display:inline;
    border:1px solid #000;
    margin-right:30px;
    float:right;
 }
.clear {
    clear:both;
 }
#no11 {
    display:inline;
    border:1px solid #000;
    margin-left:-30px;
    float:left;
 }
#no12{
    display:inline;
    border:1px solid #000;
    margin-right:-30px;
    float:right;
 }
#no11 a,#no12 a {
    width:200px;
    height:60px;
    padding-top:16px;
 }

</style>

<div id="container">
  <div id="no1"><a href="">Period 1</a></div>
  <div id="line1"></div>
  <div id="line2"></div>
  <div id="line3"></div>
  <div id="line4"></div>
  <div id="line5"></div>
  <div id="line6"></div>
  <div id="no3"><a href="#">A
    Wins</a></div>
  <div id="no4"><a href="#">B
    Wins</a></div>
  <div class="clear">
<div id="line3"></div>
  <div id="line4"></div>
  <div id="line5"></div>
  <div id="line6"></div>
  </div>
  <div id="no6"><a href="#">Period 2</a></div>
  <div id="no7"><a href="#">Period 2</a></div>
    <div class="clear">
<div id="line3"></div>
  <div id="line4"></div>
  <div id="line5"></div>
  <div id="line6"></div>
  </div>
  <div id="no11"><a href="#">Type A remains Type A <br />Type B remains Type B</a></div>
  <div id="no12"><a href="#">Type A becomes Type B <br />Type B remains Type B</a></div>
</div>
<div class="clear"></div>
<br />
<br />

    {% next_button %}

{% endblock %}