/**
 * bullgrid
 *
 * A grid based on the ideas of inuit.css gridsystem. 
 *
 *
 *
 */
/**
 * Fluid and nestable grid system, e.g.:
 *
   <div class="gw">

     <div class="g one-third">
       <p>One third grid</p>
     </div>

     <div class="g two-thirds">
       <p>Two thirds grid</p>
     </div>

     <div class="g one-half">
       <p>One half grid</p>
     </div>

     <div class="g one-quarter">
       <p>One quarter grid</p>
     </div>

     <div class="g one-quarter">
       <p>One quarter grid</p>
     </div>

   </div>

   */
/**
 * Default spacing 
 */
/**
 * Micro clearfix. 
 */
.cf, .gw {
  *zoom: 1; }
  .cf:after, .gw:after {
    content: "";
    display: table;
    clear: both; }

/**
 * Grid wrapper
 */
.gw {
  /**
   * Negative margin to negate the padding on the first grid child.
   */
  margin-left: -1em;
  /**
   * The following declarations allow us to use the `.gw` class on lists.
   */
  list-style: none;
  margin-bottom: 0; }

/**
 * Reverse grid order
 *
   <div class="gw  gw--rev">

     <div class="g  one-third">
       <p>Appears on the right</p>
     </div>

     <div class="g  two-thirds">
       <p>Appears on the left</p>
     </div>

   </div>
 *
 */
.gw--rev > .g {
  float: right; }

/**
 * Very infrequently occuring grid wrappers as children of grid wrappers.
 */
.gw > .gw {
  margin-left: 0; }

/**
 * Remove the spacing of the grid-wrapper. 
 */
.gw--no-spacing {
  margin-left: 0; }

/**
 * Grid
 *
 */
.g {
  float: left;
  padding-left: 1em; }

/**
 * Remove the spacing of the grid. 
 */
.g--no-spacing {
  padding-left: 0; }

/**
 *
 * Sizes in human readable format.
 *
 */
/**
 * Create the grids for the default view. 
 */
/*
 * Float
 */
.float-left {
  float: left; }

.float-right {
  float: left; }

.clear {
  clear: both; }

/*
 * Hidden
 */
.hidden {
  display: none; }

/*
 * No spacing
 */
.no-spacing {
  padding-left: 0; }

/**
 * Whole
 */
.one-whole {
  width: 100%; }

/**
 * Halves
 */
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%; }

/**
 * Thirds
 */
.one-third, .two-sixths, .four-twelfths {
  width: 33.333%; }

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%; }

/**
 * Quarters
 */
.one-quarter, .two-eighths, .three-twelfths {
  width: 25%; }

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%; }

/**
 * Fifths
 */
.one-fifth, .two-tenths {
  width: 20%; }

.two-fifths, .four-tenths {
  width: 40%; }

.three-fifths, .six-tenths {
  width: 60%; }

.four-fifths, .eight-tenths {
  width: 80%; }

/**
 * Sixths
 */
.one-sixth, .two-twelfths {
  width: 16.666%; }

.five-sixths, .ten-twelfths {
  width: 83.333%; }

/**
 * Eighths
 */
.one-eighth {
  width: 12.5%; }

.three-eighths {
  width: 37.5%; }

.five-eighths {
  width: 62.5%; }

.seven-eighths {
  width: 87.5%; }

/**
 * Tenths
 */
.one-tenth {
  width: 10%; }

.three-tenths {
  width: 30%; }

.seven-tenths {
  width: 70%; }

.nine-tenths {
  width: 90%; }

/**
 * Twelfths
 */
.one-twelfth {
  width: 8.333%; }

.five-twelfths {
  width: 41.666%; }

.seven-twelfths {
  width: 58.333%; }

.eleven-twelfths {
  width: 91.666%; }

/**
 * Create the grids for different viewport sizes. 
 *
 * Use this with the breakpoint mixin provided or you your own
 */
@media only screen and (min-width: 110em) {
  /*
   * Float
   */
  .large-float-left {
    float: left; }

  .large-float-right {
    float: left; }

  .large-clear {
    clear: both; }

  /*
   * Hidden
   */
  .large-hidden {
    display: none; }

  /*
   * No spacing
   */
  .large-no-spacing {
    padding-left: 0; }

  /**
   * Whole
   */
  .large-one-whole {
    width: 100%; }

  /**
   * Halves
   */
  .large-one-half, .large-two-quarters, .large-three-sixths, .large-four-eighths, .large-five-tenths, .large-six-twelfths {
    width: 50%; }

  /**
   * Thirds
   */
  .large-one-third, .large-two-sixths, .large-four-twelfths {
    width: 33.333%; }

  .large-two-thirds, .large-four-sixths, .large-eight-twelfths {
    width: 66.666%; }

  /**
   * Quarters
   */
  .large-one-quarter, .large-two-eighths, .large-three-twelfths {
    width: 25%; }

  .large-three-quarters, .large-six-eighths, .large-nine-twelfths {
    width: 75%; }

  /**
   * Fifths
   */
  .large-one-fifth, .large-two-tenths {
    width: 20%; }

  .large-two-fifths, .large-four-tenths {
    width: 40%; }

  .large-three-fifths, .large-six-tenths {
    width: 60%; }

  .large-four-fifths, .large-eight-tenths {
    width: 80%; }

  /**
   * Sixths
   */
  .large-one-sixth, .large-two-twelfths {
    width: 16.666%; }

  .large-five-sixths, .large-ten-twelfths {
    width: 83.333%; }

  /**
   * Eighths
   */
  .large-one-eighth {
    width: 12.5%; }

  .large-three-eighths {
    width: 37.5%; }

  .large-five-eighths {
    width: 62.5%; }

  .large-seven-eighths {
    width: 87.5%; }

  /**
   * Tenths
   */
  .large-one-tenth {
    width: 10%; }

  .large-three-tenths {
    width: 30%; }

  .large-seven-tenths {
    width: 70%; }

  .large-nine-tenths {
    width: 90%; }

  /**
   * Twelfths
   */
  .large-one-twelfth {
    width: 8.333%; }

  .large-five-twelfths {
    width: 41.666%; }

  .large-seven-twelfths {
    width: 58.333%; }

  .large-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 50em) and (max-width: 109.9375em) {
  /*
   * Float
   */
  .medium-float-left {
    float: left; }

  .medium-float-right {
    float: left; }

  .medium-clear {
    clear: both; }

  /*
   * Hidden
   */
  .medium-hidden {
    display: none; }

  /*
   * No spacing
   */
  .medium-no-spacing {
    padding-left: 0; }

  /**
   * Whole
   */
  .medium-one-whole {
    width: 100%; }

  /**
   * Halves
   */
  .medium-one-half, .medium-two-quarters, .medium-three-sixths, .medium-four-eighths, .medium-five-tenths, .medium-six-twelfths {
    width: 50%; }

  /**
   * Thirds
   */
  .medium-one-third, .medium-two-sixths, .medium-four-twelfths {
    width: 33.333%; }

  .medium-two-thirds, .medium-four-sixths, .medium-eight-twelfths {
    width: 66.666%; }

  /**
   * Quarters
   */
  .medium-one-quarter, .medium-two-eighths, .medium-three-twelfths {
    width: 25%; }

  .medium-three-quarters, .medium-six-eighths, .medium-nine-twelfths {
    width: 75%; }

  /**
   * Fifths
   */
  .medium-one-fifth, .medium-two-tenths {
    width: 20%; }

  .medium-two-fifths, .medium-four-tenths {
    width: 40%; }

  .medium-three-fifths, .medium-six-tenths {
    width: 60%; }

  .medium-four-fifths, .medium-eight-tenths {
    width: 80%; }

  /**
   * Sixths
   */
  .medium-one-sixth, .medium-two-twelfths {
    width: 16.666%; }

  .medium-five-sixths, .medium-ten-twelfths {
    width: 83.333%; }

  /**
   * Eighths
   */
  .medium-one-eighth {
    width: 12.5%; }

  .medium-three-eighths {
    width: 37.5%; }

  .medium-five-eighths {
    width: 62.5%; }

  .medium-seven-eighths {
    width: 87.5%; }

  /**
   * Tenths
   */
  .medium-one-tenth {
    width: 10%; }

  .medium-three-tenths {
    width: 30%; }

  .medium-seven-tenths {
    width: 70%; }

  .medium-nine-tenths {
    width: 90%; }

  /**
   * Twelfths
   */
  .medium-one-twelfth {
    width: 8.333%; }

  .medium-five-twelfths {
    width: 41.666%; }

  .medium-seven-twelfths {
    width: 58.333%; }

  .medium-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (min-width: 35em) and (max-width: 49.9375em) {
  /*
   * Float
   */
  .small-float-left {
    float: left; }

  .small-float-right {
    float: left; }

  .small-clear {
    clear: both; }

  /*
   * Hidden
   */
  .small-hidden {
    display: none; }

  /*
   * No spacing
   */
  .small-no-spacing {
    padding-left: 0; }

  /**
   * Whole
   */
  .small-one-whole {
    width: 100%; }

  /**
   * Halves
   */
  .small-one-half, .small-two-quarters, .small-three-sixths, .small-four-eighths, .small-five-tenths, .small-six-twelfths {
    width: 50%; }

  /**
   * Thirds
   */
  .small-one-third, .small-two-sixths, .small-four-twelfths {
    width: 33.333%; }

  .small-two-thirds, .small-four-sixths, .small-eight-twelfths {
    width: 66.666%; }

  /**
   * Quarters
   */
  .small-one-quarter, .small-two-eighths, .small-three-twelfths {
    width: 25%; }

  .small-three-quarters, .small-six-eighths, .small-nine-twelfths {
    width: 75%; }

  /**
   * Fifths
   */
  .small-one-fifth, .small-two-tenths {
    width: 20%; }

  .small-two-fifths, .small-four-tenths {
    width: 40%; }

  .small-three-fifths, .small-six-tenths {
    width: 60%; }

  .small-four-fifths, .small-eight-tenths {
    width: 80%; }

  /**
   * Sixths
   */
  .small-one-sixth, .small-two-twelfths {
    width: 16.666%; }

  .small-five-sixths, .small-ten-twelfths {
    width: 83.333%; }

  /**
   * Eighths
   */
  .small-one-eighth {
    width: 12.5%; }

  .small-three-eighths {
    width: 37.5%; }

  .small-five-eighths {
    width: 62.5%; }

  .small-seven-eighths {
    width: 87.5%; }

  /**
   * Tenths
   */
  .small-one-tenth {
    width: 10%; }

  .small-three-tenths {
    width: 30%; }

  .small-seven-tenths {
    width: 70%; }

  .small-nine-tenths {
    width: 90%; }

  /**
   * Twelfths
   */
  .small-one-twelfth {
    width: 8.333%; }

  .small-five-twelfths {
    width: 41.666%; }

  .small-seven-twelfths {
    width: 58.333%; }

  .small-eleven-twelfths {
    width: 91.666%; } }
@media only screen and (max-width: 34.9375em) {
  /*
   * Float
   */
  .tiny-float-left {
    float: left; }

  .tiny-float-right {
    float: left; }

  .tiny-clear {
    clear: both; }

  /*
   * Hidden
   */
  .tiny-hidden {
    display: none; }

  /*
   * No spacing
   */
  .tiny-no-spacing {
    padding-left: 0; }

  /**
   * Whole
   */
  .tiny-one-whole {
    width: 100%; }

  /**
   * Halves
   */
  .tiny-one-half, .tiny-two-quarters, .tiny-three-sixths, .tiny-four-eighths, .tiny-five-tenths, .tiny-six-twelfths {
    width: 50%; }

  /**
   * Thirds
   */
  .tiny-one-third, .tiny-two-sixths, .tiny-four-twelfths {
    width: 33.333%; }

  .tiny-two-thirds, .tiny-four-sixths, .tiny-eight-twelfths {
    width: 66.666%; }

  /**
   * Quarters
   */
  .tiny-one-quarter, .tiny-two-eighths, .tiny-three-twelfths {
    width: 25%; }

  .tiny-three-quarters, .tiny-six-eighths, .tiny-nine-twelfths {
    width: 75%; }

  /**
   * Fifths
   */
  .tiny-one-fifth, .tiny-two-tenths {
    width: 20%; }

  .tiny-two-fifths, .tiny-four-tenths {
    width: 40%; }

  .tiny-three-fifths, .tiny-six-tenths {
    width: 60%; }

  .tiny-four-fifths, .tiny-eight-tenths {
    width: 80%; }

  /**
   * Sixths
   */
  .tiny-one-sixth, .tiny-two-twelfths {
    width: 16.666%; }

  .tiny-five-sixths, .tiny-ten-twelfths {
    width: 83.333%; }

  /**
   * Eighths
   */
  .tiny-one-eighth {
    width: 12.5%; }

  .tiny-three-eighths {
    width: 37.5%; }

  .tiny-five-eighths {
    width: 62.5%; }

  .tiny-seven-eighths {
    width: 87.5%; }

  /**
   * Tenths
   */
  .tiny-one-tenth {
    width: 10%; }

  .tiny-three-tenths {
    width: 30%; }

  .tiny-seven-tenths {
    width: 70%; }

  .tiny-nine-tenths {
    width: 90%; }

  /**
   * Twelfths
   */
  .tiny-one-twelfth {
    width: 8.333%; }

  .tiny-five-twelfths {
    width: 41.666%; }

  .tiny-seven-twelfths {
    width: 58.333%; }

  .tiny-eleven-twelfths {
    width: 91.666%; } }
h1 {
  text-align: center;
  text-transform: uppercase;
  color: #ff3333;
  margin: 0 0 0 0;
  font-size: 3.5em; }

h2 {
  margin: .75em 0 .5em 0; }

a {
  text-decoration: none;
  color: #ff3333; }

ul li {
  list-style: none;
  margin-bottom: .5em; }

button {
  border: none;
  background: #ccc;
  padding: .35em; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font: 1em sans-serif;
  background: #333333;
  color: #fff; }

.wrapper {
  margin: 0 auto;
  max-width: 50em; }

/**
 * Absolute position in the center of the parent element (-50%, -50%). 
 */
.game {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

.game {
  border: 0.5em solid white;
  margin-bottom: .75em; }

header {
  background: white;
  padding: .5em 0;
  margin: 0 0 1em 0; }

.ui {
  color: #333333;
  background: white;
  padding: .25em 1.25em .25em 0; }

.ui__element {
  margin: 0 0 .25em 0;
  padding: .25em 0 .25em 0;
  border-bottom: 1px solid #333333; }

.ui__value {
  float: right; }