@font-face {
    font-family: DIN1451;
    src: url('../fonts/alte-din-1451-mittelschrift.regular.eot?') format('eot'),
         url('../fonts/alte-din-1451-mittelschrift.regular.woff') format('woff'),
         url('../fonts/alte-din-1451-mittelschrift.regular.ttf' ) format('truetype');
}
@font-face {
    font-family: CM;
    src: url('../fonts/cmunrm.ttf') format('truetype');
}

* {
   margin: 0;
   padding: 0;
   -webkit-user-select: none;
}

*:active {
  cursor: pointer;
}

html, body {
  background-color: #111;
  color: #fff;
  font-family: Monospace;/*DIN1451;*/
  font-size: 16px;
  overflow: hidden;
  width   : 100%;
  height  : 100%;
  margin  : 0;
  padding : 0;
}

div.sidebar, div.rightbar {
  position: fixed;
  overflow: hidden;
  width: 200px;
  height: 100%;
  margin: 10px;
  text-align: center;
}
div.rightbar {
  left: calc(100% - 200px - 20px);
}

div.content {
  position: relative;
  left:  calc(       200px + 20px);
  width: calc(100% - 400px - 40px);
  height: 100%;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    outline: none;
}

h1 { font-size: 2.5em}
h2 { font-size: 2em}

p {
  margin-bottom: 10px;
}

a {
  color: #0ff;
}
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: none; color: #077; }
a:active  { text-decoration: none; color: #077; }

.sidelink {
  display: block;
  font-size: 20px;
  text-align: right;
  margin-bottom: 20px;
}

.button {
  background-color: #555;
  opacity: 0.7;
  border: none;
  color: #fff;
  height: 40px;
  margin: 10px;
  margin-bottom: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: Monospace;/*DIN1451;*/
  outline: none;
  width: 180px;
}
.touchElement {
  stroke: none;
  fill: #555;
  opacity: 0.7;
}
.slider {
  stroke: none;
  fill: #fff;
  opacity: 0.7;
  font-family: Monospace;
  font-size: 16px;
}
.tetSwitch, #infoTet {
  fill: #fff;
  opacity: 0.7;
}
.separator {
  stroke-linecap: square;
  stroke-width: 10;
  stroke: #111;
}
#infoTet {
  font-family:Monospace;
  text-anchor: middle;
}
#infoNumOfTet {
  font-size:32px;
}
.button:hover, .touchElement:hover, .tetSwitch:hover, .slider:hover { opacity: 1; cursor: pointer; }
#buttNumOfTetMinus:hover ~ #infoTet {opacity: 1;}
#buttNumOfTetPlus:hover ~ #infoTet {opacity: 1;}