{{ block title }}
    Introduction
{{ endblock }}
{{ block content }}

<div class="instructions well well-lg" style="">
<meta http-equiv="content-type" content="text/html; charset=utf-8">


    <h3 class="panel-sub-heading">
        Welcome to this experiment!
    </h3>

    <p>
	    <b><FONT SIZE =+1>Experimental Procedure</FONT></b><br>
        This game will be played for {{ C.NUM_ROUNDS }} {%if C.NUM_ROUNDS == 1%}round {%else%}rounds.{% endif %}<br>
        In each round each of you will be asked to enter an integer
        number between 0 and {{ C.GUESS_MAX }}. <br>
        <br>

		<b> Payout:</b><br>
        The winner will be the participant whose
        number <br>
        <b> <i> is closest to 2/3 of the
        average of all entered numbers. </i> </b> <br>
        In case of winning you will receive one credit. In case of a tie all involved participants receive one credit. In case of not
        winning you will receive no credit.
        <br> <br>
        After all three rounds have been played, the participant with the highest amount of credits will receive {{C.PRIZE}}. In case of
        a tie, the experimenter will use a random device to determine the overall winner.
        <br>
        <br>
        The experiment starts as soon as all participants hit the "Next" Button. <br>
		<br>
        Good Luck!
    </p>

</div>


    {{ formfields }}

<br>
  <button>Next</button>

{{ endblock }}

{{block style}}
<style >
    ul {
        list-style-type:circle;
        padding-left:20px;
    }
    h3.panel-sub-heading {
        padding-bottom:10px;
        padding-left:4px;
    }

    td, th{
        text-align: center;
    }

    .rotate90 {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: absolute;
        top: 60%;
    }

    .instructions {
        position: relative;
        text-shadow: 0 1px 0 #fff;
        line-height: 1.5;
        margin: 60px auto;
        background-color: #f5f5dc;
        background-image: linear-gradient(to bottom, #f5f5dc 0px, #fbfbeb 100%);
        padding-top: 5px;
        padding-bottom: 15px;
        margin-top: 20px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .instructions:before, .instructions:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width:300px;
        background: rgba(0, 0, 0, 0.7);
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        transform: rotate(-3deg);
    }

    .instructions:after {
        transform: rotate(3deg);
        right: 10px;
        left: auto;
    }
</style>

{{endblock}}