* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*='grid-'] {
  position: relative;
  margin: 0 auto 10px auto;
  max-width: 900px;
}

[class*='grid-'] [class*='grid-'] {
  max-width: none;
  margin: 0 0 0 0;
}

[class*='grid-']:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

[class*='grid-'] [class*='col-'] {
  position: relative;
  float: left;
  padding-right: 10px;
}

.grid [class*='grid-'] [class*='col-']:last-of-type {
  padding-right: 0;
}

.grid-1 .col-1 {
  width: 100%;
}

.grid-2 .col-1 {
  width: 50%;
}

.grid-2 .col-2 {
  width: 100%;
}

.grid-3 .col-1 {
  width: 33.3333333333%;
}

.grid-3 .col-2 {
  width: 66.6666666667%;
}

.grid-3 .col-3 {
  width: 100%;
}

.grid-4 .col-1 {
  width: 25%;
}

.grid-4 .col-2 {
  width: 50%;
}

.grid-4 .col-3 {
  width: 75%;
}

.grid-4 .col-4 {
  width: 100%;
}

.grid-5 .col-1 {
  width: 20%;
}

.grid-5 .col-2 {
  width: 40%;
}

.grid-5 .col-3 {
  width: 60%;
}

.grid-5 .col-4 {
  width: 80%;
}

.grid-5 .col-5 {
  width: 100%;
}

.grid-6 .col-1 {
  width: 16.6666666667%;
}

.grid-6 .col-2 {
  width: 33.3333333333%;
}

.grid-6 .col-3 {
  width: 50%;
}

.grid-6 .col-4 {
  width: 66.6666666667%;
}

.grid-6 .col-5 {
  width: 83.3333333333%;
}

.grid-6 .col-6 {
  width: 100%;
}

.grid-7 .col-1 {
  width: 14.2857142857%;
}

.grid-7 .col-2 {
  width: 28.5714285714%;
}

.grid-7 .col-3 {
  width: 42.8571428571%;
}

.grid-7 .col-4 {
  width: 57.1428571429%;
}

.grid-7 .col-5 {
  width: 71.4285714286%;
}

.grid-7 .col-6 {
  width: 85.7142857143%;
}

.grid-7 .col-7 {
  width: 100%;
}

.grid-8 .col-1 {
  width: 12.5%;
}

.grid-8 .col-2 {
  width: 25%;
}

.grid-8 .col-3 {
  width: 37.5%;
}

.grid-8 .col-4 {
  width: 50%;
}

.grid-8 .col-5 {
  width: 62.5%;
}

.grid-8 .col-6 {
  width: 75%;
}

.grid-8 .col-7 {
  width: 87.5%;
}

.grid-8 .col-8 {
  width: 100%;
}

.grid-9 .col-1 {
  width: 11.1111111111%;
}

.grid-9 .col-2 {
  width: 22.2222222222%;
}

.grid-9 .col-3 {
  width: 33.3333333333%;
}

.grid-9 .col-4 {
  width: 44.4444444444%;
}

.grid-9 .col-5 {
  width: 55.5555555556%;
}

.grid-9 .col-6 {
  width: 66.6666666667%;
}

.grid-9 .col-7 {
  width: 77.7777777778%;
}

.grid-9 .col-8 {
  width: 88.8888888889%;
}

.grid-9 .col-9 {
  width: 100%;
}

.grid-10 .col-1 {
  width: 10%;
}

.grid-10 .col-2 {
  width: 20%;
}

.grid-10 .col-3 {
  width: 30%;
}

.grid-10 .col-4 {
  width: 40%;
}

.grid-10 .col-5 {
  width: 50%;
}

.grid-10 .col-6 {
  width: 60%;
}

.grid-10 .col-7 {
  width: 70%;
}

.grid-10 .col-8 {
  width: 80%;
}

.grid-10 .col-9 {
  width: 90%;
}

.grid-10 .col-10 {
  width: 100%;
}

.grid-11 .col-1 {
  width: 9.0909090909%;
}

.grid-11 .col-2 {
  width: 18.1818181818%;
}

.grid-11 .col-3 {
  width: 27.2727272727%;
}

.grid-11 .col-4 {
  width: 36.3636363636%;
}

.grid-11 .col-5 {
  width: 45.4545454545%;
}

.grid-11 .col-6 {
  width: 54.5454545455%;
}

.grid-11 .col-7 {
  width: 63.6363636364%;
}

.grid-11 .col-8 {
  width: 72.7272727273%;
}

.grid-11 .col-9 {
  width: 81.8181818182%;
}

.grid-11 .col-10 {
  width: 90.9090909091%;
}

.grid-11 .col-11 {
  width: 100%;
}

.grid-12 .col-1 {
  width: 8.3333333333%;
}

.grid-12 .col-2 {
  width: 16.6666666667%;
}

.grid-12 .col-3 {
  width: 25%;
}

.grid-12 .col-4 {
  width: 33.3333333333%;
}

.grid-12 .col-5 {
  width: 41.6666666667%;
}

.grid-12 .col-6 {
  width: 50%;
}

.grid-12 .col-7 {
  width: 58.3333333333%;
}

.grid-12 .col-8 {
  width: 66.6666666667%;
}

.grid-12 .col-9 {
  width: 75%;
}

.grid-12 .col-10 {
  width: 83.3333333333%;
}

.grid-12 .col-11 {
  width: 91.6666666667%;
}

.grid-12 .col-12 {
  width: 100%;
}

@media (max-width: 768px) {
  [class*='grid-'] [class*='col-'] {
    width: 100%;
    padding-right: 0;
    margin-bottom: 10px;
  }
  [class*='grid-'] [class*='col-'] [class*='grid-'] {
    padding-right: 0;
  }
  [class*='grid-'] [class*='col-']:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
  [class*='grid-'], [class*='grid-'] [class*='grid-'] {
    margin-bottom: 0;
  }
}

/* Opt-in outside padding */
.grid-pad {
  padding: 10px 0 10px 10px;
}

.grid-pad [class*='col-']:last-of-type {
  padding-right: 10px;
}

body {
  background: #111111;
  color: #eeeeee;
  font-family: Helvetica, sans-serif;
  overflow-y: scroll;
}

#buttons {
  margin-top: 30px;
}

#display,
#displayTemp {
  display: block;
  border: 1px solid #cccccc;
  image-rendering: pixelated;
  margin: 0 auto;
}

#displayTemp {
  width: 600px;
  height: 400px;
}

/*# sourceMappingURL=app.css.map */