/*****************************************************************************
* main
****************************************************************************/
* { box-sizing: border-box; }

body {
   max-width: 960px;
   margin: 0 auto;
}

h2 { white-space: nowrap; }

/*****************************************************************************
* grid
****************************************************************************/
.row {
   position: relative;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
   max-width: 75rem;
   font-size: 30px;
}

.row .row {
   /*width: auto;*/
   width: 100%;
   margin-left: -0.9375rem;
   margin-right: -0.9375rem;
   margin-top: 0;
   margin-bottom: 0;
   max-width: none;
   font-size: 30px;
}

.row:before, .row:after {
   content: " ";
   display: table;
}

.row:after { clear: both; }

.column, .columns {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
   width: 100%;
   float: left;
}

[class*="column"] + [class*="column"]:last-child { float: right; }

[class*="column"] + [class*="column"].end { float: left; }

@media only screen {
   .small-1         { width:       8.3333333333%;  }
   .small-offset-1  { margin-left: 8.3333333333%;  }
   .small-2         { width:       16.6666666667%; }
   .small-offset-2  { margin-left: 16.6666666667%; }
   .small-3         { width:       25%;            }
   .small-offset-3  { margin-left: 25%;            }
   .small-4         { width:       33.3333333333%; }
   .small-offset-4  { margin-left: 33.3333333333%; }
   .small-5         { width:       41.6666666667%; }
   .small-offset-5  { margin-left: 41.6666666667%; }
   .small-6         { width:       50%;            }
   .small-offset-6  { margin-left: 50%;            }
   .small-7         { width:       58.3333333333%; }
   .small-offset-7  { margin-left: 58.3333333333%; }
   .small-8         { width:       66.6666666667%; }
   .small-offset-8  { margin-left: 66.6666666667%; }
   .small-9         { width:       75%;            }
   .small-offset-9  { margin-left: 75%;            }
   .small-10        { width:       83.3333333333%; }
   .small-offset-10 { margin-left: 83.3333333333%; }
   .small-11        { width:       91.6666666667%; }
   .small-offset-11 { margin-left: 91.6666666667%; }
   .small-12        { width:       100%;           }
   .small-offset-12 { margin-left: 100%;           }
}

@media only screen and (min-width: 512px) {
   .medium-1         { width:       8.3333333333%;  }
   .medium-offset-1  { margin-left: 8.3333333333%;  }
   .medium-2         { width:       16.6666666667%; }
   .medium-offset-2  { margin-left: 16.6666666667%; }
   .medium-3         { width:       25%;            }
   .medium-offset-3  { margin-left: 25%;            }
   .medium-4         { width:       33.3333333333%; }
   .medium-offset-4  { margin-left: 33.3333333333%; }
   .medium-5         { width:       41.6666666667%; }
   .medium-offset-5  { margin-left: 41.6666666667%; }
   .medium-6         { width:       50%;            }
   .medium-offset-6  { margin-left: 50%;            }
   .medium-7         { width:       58.3333333333%; }
   .medium-offset-7  { margin-left: 58.3333333333%; }
   .medium-8         { width:       66.6666666667%; }
   .medium-offset-8  { margin-left: 66.6666666667%; }
   .medium-9         { width:       75%;            }
   .medium-offset-9  { margin-left: 75%;            }
   .medium-10        { width:       83.3333333333%; }
   .medium-offset-10 { margin-left: 83.3333333333%; }
   .medium-11        { width:       91.6666666667%; }
   .medium-offset-11 { margin-left: 91.6666666667%; }
   .medium-12        { width:       100%;           }
   .medium-offset-12 { margin-left: 100%;           }
}

@media only screen and (min-width: 960px) {
   .large-1         { width:       8.3333333333%;  }
   .large-offset-1  { margin-left: 8.3333333333%;  }
   .large-2         { width:       16.6666666667%; }
   .large-offset-2  { margin-left: 16.6666666667%; }
   .large-3         { width:       25%;            }
   .large-offset-3  { margin-left: 25%;            }
   .large-4         { width:       33.3333333333%; }
   .large-offset-4  { margin-left: 33.3333333333%; }
   .large-5         { width:       41.6666666667%; }
   .large-offset-5  { margin-left: 41.6666666667%; }
   .large-6         { width:       50%;            }
   .large-offset-6  { margin-left: 50%;            }
   .large-7         { width:       58.3333333333%; }
   .large-offset-7  { margin-left: 58.3333333333%; }
   .large-8         { width:       66.6666666667%; }
   .large-offset-8  { margin-left: 66.6666666667%; }
   .large-9         { width:       75%;            }
   .large-offset-9  { margin-left: 75%;            }
   .large-10        { width:       83.3333333333%; }
   .large-offset-10 { margin-left: 83.3333333333%; }
   .large-11        { width:       91.6666666667%; }
   .large-offset-11 { margin-left: 91.6666666667%; }
   .large-12        { width:       100%;           }
   .large-offset-12 { margin-left: 100%;           }
}

/*****************************************************************************
* overrides
****************************************************************************/
.display-none {
   display: none;
}

/*****************************************************************************
* bingo
****************************************************************************/
input[type="button"] {
   background-color: #3c3c3c;
   color: #ffffff;
   padding: 10px 10px;
}

.disabled {
   background-color: #cccccc;
   color: #3c3c3c;
}

.last-num {
   font-weight: bold;
   font-size: 24px;
   color: #f89e37;
}

table { border-collapse: collapse; }

#bingo-caller { margin: 30px;font-size:30px; }

table td {
   border-radius: 50%;
   text-align: center;
   vertical-align: middle;
   font-size:40px;
}

table th {
    font-size:40px;
}

#bingo-caller td {
   height: 75px;
   width: 100px;
   max-width: 75px;
   font-size:40px;
}

.drawn,
.marked {
   background-color: #cccccc;
   color: #EE4B2B;
}

.drawn.last {
   background-color: #3c3c3c;
   color: #cccccc;
}

ol {
   overflow-y: scroll;
   min-height: 93px;
   max-height: 93px;
   border: 1px solid #cccccc;
}