{{ block title }}
    Round Results
{{ endblock }}

{{ block styles }}
<style>
    .hundred{
        width: 100%;
    }
    .wallet{
        display: block;
        background-color: #fff2cc;
        vertical-align: top;
        margin-top: 20px;
    }
    .twenty{
        width: 18%;
        display: inline-block;
    }
    .verticalmiddle{
        height: 100%;
        line-height: 0;
        vertical-align: middle;
    }
    .walletimage{
        height: 4em;
    }
    .marketcashimage{
        width: 50%;
    }
    .walletlabel{
        display: inline-block;
        font-size: 2em;
        border: 1px solid black;
    }
    .fifty{
        width: 45%;
        display: inline-block;
    }
    .twentyfive{
        width: 23%;
        display: inline-block;
    }
    .walletcircle{
        border-radius: 50%;
        width: 2em;
        height: 2em;
        text-align: center;
        font-size: 1.75em;
        font-weight: bold;
        line-height: 2em;
    }
    .color1{
        background-color: {{ subsession.token_color_1 }}
    }
    .color2{
        background-color: {{ subsession.token_color_2 }}
    }
    .color3{
        background-color: {{ subsession.token_color_3 }}
    }
    .color4{
        background-color: {{ subsession.token_color_4 }}
    }
    .thirty{
        width: 30%;
        display: inline-block;
    }
    .cashgreen{
        background-color: #00b453;
    }
    .cashgreenborder{
        border: 5px solid #00b453;
    }
    .walletlabel{
        display: inline-block;
        font-size: 2em;
        border: 1px solid black;
    }
</style>
{{ endblock }}

{{ block content }}

    <div class="hundred wallet">
        <div class="twenty verticalmiddle">
            <img src="{{ static 'marketkids/wallet.jpg' }}" class="walletimage">
        </div>
        <div class="thirty">
            <div class="hundred">
                <img src="{{ static 'marketkids/money.jpg' }}" class="marketcashimage">
            </div>
            <div class="hundred">
                <div class="walletlabel" id="wallet_cash">{{ wallet_0 }}</div>
            </div>
        </div>

        <div class="fifty">
            <div class="hundred">
                <div class="twentyfive walletcircle color1" id="wallet_token_1">
                    {{ wallet_1 }}
                </div>
                <div class="twentyfive walletcircle color2" id="wallet_token_2">
                    {{ wallet_2 }}
                </div>
                <div class="twentyfive walletcircle color3" id="wallet_token_3">
                    {{ wallet_3 }}
                </div>
            </div>
            <div class="hundred">
                <div class="walletlabel" id="tokenvalue">{{ token_value|to0 }}</div>
            </div>
        </div>
    </div>
    <br>
    {{ next_button }}
{{ endblock }}