/* Grid layout */
#grid{
  max-width: 100%;
  display:grid;
  grid-template-columns: 3fr 1fr;
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 1em;

}

#cts-div{
  grid-row: 1/3;
  height: 100%;
}

#cts{
  width: 95%;
  height: 75%;
}

#ascii-div{
  grid-column: 2/3;
  grid-row: 1/2;
}

#crib-div{
  grid-column: 2/3;
  grid-row: 2/3;
}

#result-div{
  grid-column: 1/3;
  grid-row: 3/4;
}

#result-p, #crib-p{
  font-family: monospace;
}

/* buttons */
#crib-ctrls{
  display: grid;
  grid-template-columns: 3;
  grid-template-rows: 3;
}

#crib{
  width: 90%;
}

.button{
  background-color: #eee;
  border-radius: 3px;
  text-align: center;
}

#crib-left{
grid-row: 2/3;
grid-column: 1/2;
}

#crib-right{
grid-row: 2/3;
grid-column: 3/4;
}

#ref-up{
  grid-row: 1/2;
  grid-column: 2/3;
}

#ref-down{
  grid-row: 3/4;
  grid-column: 2/3;
}

/* ascii table reference */
#ascii-table{
  font-family: monospace;
  border: solid 1px black;
  border-collapse: collapse;
  font-size: 110%;
}

/* results table TODO*/


/* output highlighting */
.ctrl{
  color: red;
}
.num{
  color: orange;
}
.upper{
  color: green;
}
.lower{
  color: blue;
}
.ext{
  color: purple;
}
.highlight{
  background-color: #eee;
}
.result{
  font-family: monospace;
}

/* Human readable text */
.title{
  font-weight:bold;
  font-size: 110%;
}