body {
  position: relative;
  font-family: Tahoma, Geneva, sans-serif;
  background: #f9f9f9;
  margin: 0;
  padding-left: 20px;
}
.div {
  box-sizing: border-box;
}
#transpicker {
  float: right;
  margin: 5px;
  margin-right: 35px;
}
.bbl {
  background: #fff;
  border-radius:9px;
  border:1px solid #aaa;
  box-shadow:2px 2px 2px #ddd;
  margin-bottom:0.5em;
  margin-top:5px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left: 8px;
  padding-right: 48px;  /* 40 for stickers */
}
.bbl:after {
  content: "";
  display: table;
  clear: both;
}
#dtop {
  position: fixed;
  top: 0;
  width: 100%;
  max-width:800px;
  height: 3em;
  padding: 5px;
  background-color: #f9f9f9;
  z-index: 1;
}
#liveinput {
  height: 2.5em;
  width: calc(100% - 12em);
  box-sizing: border-box;
}
.bothCols {
  position: fixed;
  box-sizing: border-box;
  top: 3.4em;
  max-width:800px;
  height: calc(100% - 3.4em);
  padding: 0;
  padding-left: 0.3em;
  padding-right: 15px;
  overflow-y: auto;
}
#liveout {
  position: relative;
  box-sizing: border-box;
  top: 3.4em;
  max-width:800px;
  padding: 0;
  padding-left: 0.3em;
  padding-right: 15px;
}
.dym {
  font-style:italic;
}
.dymword {
  font-style:italic;
  font-weight:bold;
}
.word {
}
.mapPlaceholder {
  float:right;
  height:200px;
  width:200px;
  margin:1em;
}
.mapSmall {
  position: absolute;
  top: 12px;
  right: 24px;
  height:200px;
  width:200px;
  transition: width 0.2s, height 0.2s; /* Safari */
  transition-timing-function: ease-out;
}
.mapSmall:hover {
  height:400px;
  width:400px;
}
.mapSmallFloat {
  float:right;
  margin:1em;
  margin-top:0;
  margin-bottom:0;
  height:200px;
  width:200px;
  transition: width 0.2s, height 0.2s; /* Safari */
  transition-timing-function: ease-out;
}
.mapSmallFloat:hover {
  height:400px;
  width:400px;
}

.sticker {
  position: absolute;
  top: 0;
  left: auto;
  right: 22px;
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 0.8em;
  box-sizing: border-box;
}