{{ block content }}

<style>
     .otree-body {
        max-width:80%
    }
    .circle_green
    {
        border: 1px solid green;
        padding: 7px 7px;
        background: green;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_green_off
    {
        border: 2px solid green;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

       .circle_red
    {
        border: 1px solid red;
        padding: 7px 7px;
        background: red;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_red_off {
        border: 2px solid red;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_blue
    {
        border: 1px solid blue;
        padding: 7px 7px;
        background: blue;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_blue_off {
        border: 2px solid blue;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }
</style>


    <table class="table" style="width: 100%; border: 0; border-collapse: collapse; margin: auto; padding: 20px; border-bottom: transparent" >

    <tr>
        <td style="width: 40%"><h2>Guess with one light:</h2>

            <p></p>
            <div style="background: ghostwhite;
            font-size: 20px;
            width: 95%;
            height: 500px;
            overflow-y: auto;
            padding: 10px;
            border: 2px solid lightgray;
            margin: 10px;">

            <h4>Notes:</h4>
            {{notes}}
</div>

        </td>
        <td style="width: 40%; padding: 0; vertical-align: middle"> {{table}}  </td>
        <td style="width: 10%; padding: 0; vertical-align: middle">
            <table class="table" style="white-space: nowrap"> <tr><th>Guess the Sound:</th></tr>
                <tr><td>{{formfield 'guess'}} </td></tr></table>
        </td>
    </tr>

</table>
<div style="float: right";> {{ next_button }}</div>

{{ endblock }}