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

{% block title %}

{% endblock %}

{% block content %}
<style>
img {
  float: right;
}
.clearfix {
  overflow: auto;
}
</style>

<h3 align=center><font color="blue">Types</font></H3>

<p> <div>
       <img src="{% static "global/ExpBallB.jpg" %}" style="width:140px;height:100px;margin-left:5px;" />
    <img src="{% static "global/Aballs.png" %}" style="width:140px;height:140px;margin-left:5px;" />
<br>You have been randomly matched with another participant.
<br>
<br>There are two possible types for a participant - Type A and Type B
<br>
<br>The computer will randomly assign Type A to one of you and Type B to the other.
    <br> Types will remain the same throughout this part.
<br>

   </div></p>

  <p>  <div class="clearfix">
    <img sizes="0.2" src="{% static "global/BidBag.jpg" %}" style="width:280px;height:320px;margin-left:5px;" />
For every point that <strong>Type A</strong> bids, the computer will put <strong>3</strong> 'A' balls in the 'Bid Bag'.
<br>
<br>For every point that <strong>Type B</strong> bids, the computer will put <strong>1</strong> 'B' ball in the 'Bid Bag'.

</div></p></font>
    {% next_button %}

{% endblock %}