@font-face {
  font-family: osl;
  src: url('OpenSans-Light.ttf'), url('opensanslight.otf'), url('OpenSans-Light.eot');
}
body {
  margin: 0;
  font-family: osl;
}
div#content {
  margin: 6em auto;
  width: 70%;
}
@media (max-width: 800px) {
  div#content {
    width: 95%;
  }
}
div.section {
  background-color: #ccc;
  padding: 0.5em;
  margin: 1em 0px;
}
div.section > p {
  margin: 0;
}
div.inputtext {
  cursor: default;
  line-height: 500%;
}
.fl {
  float: left;
}
.cl {
  clear: both;
}
div.textpart {
  float: left;
}
div.choices {
  display: inline-block;
  position: relative;
}
div.choice {
  cursor: pointer;
  background-color: lightgrey;
  padding: 0.3em 0.2em;
  line-height: 100%;
}
div.disabledChoices div.choice {
  cursor: default;
}
div.topChosen {
  top: 1.5em;
}
.lowerChoice {
  border-radius: 0 0 5px 5px;
}
.upperChoice {
  border-radius: 5px 5px 0 0 ;
}
.bottomChosen .lowerChoice {
  background-color: lightgreen;
}
.topChosen .upperChoice {
  background-color: lightgreen;
}
.disabledChoices.bottomChosen .upperChoice,
.disabledChoices.topChosen .lowerChoice {
  color: darkgrey;
}
.inputtext input {
  border: none;
  background-color: lightgrey;
  padding: 0.3em 0.2em;
  font-size: 100%;
  font-family: osl;
}
input#iRoom {
  width: 4em;
}
#iRoom {
  text-align: center;
}
.transfer {
  float: left;
  font-size: 80;
  font-family: monospace;
  padding: 1em;
  width: calc(46%);
}
.explanation {
  clear: both;
}
div#topbar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  color: white;
  background-color: #BDAF0F;
  text-align: center;
  font-size: 120%;
}
#topbar img {
  vertical-align: middle;
}