style.css

/* Adapted From: http://nrstickley.com/pandoc/
            and: http://bettermotherfuckingwebsite.com/ */

@font-face {
  font-family: cmu;
  src: url(cmunss.ttf);
}

@font-face {
  font-family: helveticaSpecial;
  src: local(Helvetica Light);
  /*             _       ~      */
  unicode-range: U+005F, U+007E;
}

@font-face {
  font-family: appleUnicodeSpecial;
  src: local(Apple Symbols);
  /*             ■       ▷       ♭       ♮       ♯       𝄪        𝄫       */
  unicode-range: U+25A0, U+25B6, U+266D, U+266E, U+266F, U+1D12A, U+1D12B;
}

@font-face {
  font-family: arialUnicodeSpecial;
  src: local(Arial Unicode MS);
  /*             ■       ▷       ♭       ♮       ♯       𝄪        𝄫       */
  unicode-range: U+25A0, U+25B6, U+266D, U+266E, U+266F, U+1D12A, U+1D12B;
}

html {
  background-color: #EEE;
  font-family: arialUnicodeSpecial, appleUnicodeSpecial, helveticaSpecial, cmu, sans-serif;
}

body, table, tr, td, input, button, select, option, code {
  font-family: inherit;
}

body {
   background: #EEE;
   margin: 0;
}

.body-wrap {
   background: #FFF;
   color: #222;
   margin: 0 auto;
   margin-bottom: 0;
   max-width: 750px;
   padding-top: 1px;
   padding-bottom: 25px;
   padding-left: min(5%,35px);
   padding-right: min(5%,35px);
   text-align: center;
   font-size: 110%;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

.content {
  font-size: 93%;
  text-align: left;
  margin-top: 60px;
}

.bigspace {
  padding-left: 3.5px;
  padding-right: 3.5px
}

ul, ol {
  padding-left: 25px;
}

li {
  margin: 8px 0;
}
ol ul li {
  margin: 4px 0;
}

blockquote {
  font-style: italic;
}

:target {
   background-color: #ffd;
}

.buttons {
  padding-bottom: 20px;
  display: flex;
}

.alignleft {
  box-sizing: border-box;
  float: left;
  width: 25%;
  text-align:left;
  padding-top: 8px;
  padding-left: 8px;
}
.aligncenter {
  box-sizing: border-box;
  float: left;
  width: 50%;
  text-align:center;
  padding-top: 8px;
}
.alignright {
  box-sizing: border-box;
  float: left;
  width: 25%;
  text-align:right;
  padding-top: 8px;
  padding-right: 8px;
}​

h1,h2,h3 {
  font-weight: lighter;
}
h1{ font-size: 210%; font-weight: normal; }
h2{ font-size: 190%; }
h3{ font-size: 160%; }

h4 {
  font-size: 115%;
  font-weight: bold;
  margin-bottom: 10px;
}

.results {
  margin-bottom: 10px;
}

.didYouMean {
  text-align: center;
  margin-top: 10px;
}

.resTable {
  border-spacing: 6px 5px;
  width: 100%;
  table-layout: fixed;
}
.resLeftColumn {
  width: 50%;
  text-align: right;
  vertical-align: top;
}
.resRightColumn {
  width: 50%;
  text-align: left;
  vertical-align: top;
}

.approxsDesc {
  font-size: 95%;
  margin-bottom: 6px;
}
.approxsTable {
  border-spacing: 10px 5px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
}
.approxsLeftColumn {
  max-width: 300px;
  text-align: center;
}
.approxsRightColumn {
  text-align: right;
  font-family: Courier;
  font-size: 92.5%;
}

.edoDesc {
  font-size: 95%;
  margin-bottom: 13px;
}
.edoTableWrap {
  width: 100%;
  overflow: scroll;
  margin-bottom: 10px;
}
.edoTable {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 88%;
}
.edoTable th, .edoTable td {
  border: 1px solid #BBBBBB;
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.edoTable th {
  background-color: #D8D8D8;
}
.edoTable td {
  background-color: #FFFFFF;
}

.edoPrimesTableLeftHeader {
  max-width: 110px;
  min-width: 103px;
}
.edoIntvsTableRightHeader {
  min-width: 130px;
}
.edoIntvsTableRightColumn {
  text-align: left;
}

.audioButtonsDiv {
  margin-bottom: 35px;
}

.buttonContainer {
  display: inline;
  padding-left: 1px;
  padding-right: 1px;
}

.audioButtonContainer {
  display: inline;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 10px;
}

.parseError {
  margin: auto;
  text-align: left;
  font-size: 80%;
  font-family: Courier;
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.hoverSwap .hoverSwap_on { display: none; }
.hoverSwap:hover .hoverSwap_on { display: inline; }
.hoverSwap:focus .hoverSwap_on { display: inline; }
.hoverSwap:hover .hoverSwap_off { display: none; }
.hoverSwap:focus .hoverSwap_off { display: none; }
.hoverSwapPre .hoverSwap_on { display: inline; }
.hoverSwapPre .hoverSwap_off { display: none; }

.hoverSwapDetail .hoverSwapDetail_on { display: none; }
.hoverSwapDetail:hover .hoverSwapDetail_on { display: inline; }
.hoverSwapDetail:focus .hoverSwapDetail_on { display: inline; }
.hoverSwapDetail:hover .hoverSwapDetail_off { display: none; }
.hoverSwapDetail:focus .hoverSwapDetail_off { display: none; }

sup, sub {
  margin-left: 2px;
  vertical-align: baseline;
  position: relative;
}
sup {
  top: -0.35em;
}
sub {
  top: 0.35em;
}

.supsub {
  position: absolute;
}
.supsub sup, .supsub sub {
  display: block;
}
.supsub sub {
  position: absolute;
  top: 0.6em;
}

button {
  font-size: 100%;
  display: inline-block;
  border: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 2px min(4%,10px) 2px min(4%,10px);
  background-color: #DDD;
}

button:hover,
button:focus {
  box-shadow: 0 0 2pt 1pt #6AF;
  /* # outline: 2px solid #6AF; */
}

button:active {
    background: #6AF;
}
.buttonActive {
    background: #6AF;
}

.edoAudioButton {
  padding: 2px 5px 2px 5px;
}

.selectContainer select {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  /* width: 45px; */
  /* font-size: 16px; */
  height: 23px;
  padding-left: 5px;
  font-size: 85%;
}
.selectContainer:hover,
.selectContainer:focus {
  box-shadow: 0 0 2pt 1pt #6AF;
  /* # outline: 2px solid #6AF; */
}
.selectContainer {
  /* margin: 50px; */
  /* width: 45px; */
  height: 25px;
  /* border: 1px solid #111; */
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #DDD;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  position: relative;
  margin-top: 1px;
  margin-bottom: 1px;
  /* Source: https://stackoverflow.com/a/42087251 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: top 50% right 1px;
}

.twoDigitSelect select {
  width: 45px;
}
.twoDigitSelect {
  width: 45px;
}

.threeDigitSelect select {
  width: 55px;
}
.threeDigitSelect {
  width: 55px;
}

.sortRatSelect select {
  width: 158px;
}
.sortRatSelect {
  width: 158px;
}

.sortEDOSelect select {
  width: 90px;
}
.sortEDOSelect {
  width: 90px;
}

.edoRelCutoffSelect select {
  width: 70px;
}
.edoRelCutoffSelect {
  width: 70px;
}

.edoBaseNoteSelect select {
  width: 50px;
}
.edoBaseNoteSelect {
  width: 50px;
}

.exprInput  {
  background-color: #f2e4ce;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #BCBEC0;
  text-align: center;
  font-size: 110%;
}

a,
a:visited {
  color: #222;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
a:focus,
a:visited:hover,
a:visited:focus {
  color: #F3470F;
}

a.alt {
  color: #0645AD;
  font-weight: bold;
}
a.alt:visited {
  color: #0b0080;
  font-weight: bold;
}
a.alt:hover,
a.alt:focus,
a.alt:visited:hover,
a.alt:visited:focus {
  color: #F3470F;
  font-weight: bold;
}

a.alt2,
a.alt2:visited {
  color: #0645AD;
  font-weight: bold;
}
a.alt2:hover,
a.alt2:focus,
a.alt2:visited:hover,
a.alt2:visited:focus {
  color: #F3470F;
  font-weight: bold;
}

a.grey,
a.grey:visited {
  color: #555;
}
a.grey:hover,
a.grey:focus,
a.grey:visited:hover,
a.grey:visited:focus {
  color: #F3470F;
}

a.expr,
a.expr:visited,
a.expr:hover,
a.expr:focus,
a.expr:visited:hover,
a.expr:visited:focus {
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 1px;
  margin-bottom: 1px;
  background-color: #f2e4ce;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #BCBEC0;
  display: inline-block;
  white-space: nowrap;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}