@-ms-viewport {
  width: device-width;
  zoom: 1.0;
  /*    user-zoom: zoom;*/ }
body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  top: 0;
  left: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8px;
  background-color: #FFFFF1; }

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

img:not(.png) {
  width: 100%; }

#intro {
  visibility: hidden; }

#kader {
  position: absolute;
  top: 0;
  left: 0;
  padding: .5em;
  margin: 1em;
  height: 90%;
  width: 90%;
  background: radial-gradient(circle, lightgray, white);
  overflow: hidden; }

#headervakje, #header, #subheader, #jaren {
  float: left;
  clear: both;
  width: auto;
  min-width: 320px; }

.grotekop {
  color: dimgrey;
  font-size: 2em;
  letter-spacing: -.04em;
  font-weight: bold; }

.onderkop {
  color: dimgrey;
  font-size: 1.5em;
  letter-spacing: -.1em;
  font-weight: bold; }

.jarenkop {
  font-size: 2.2em;
  font-weight: bolder;
  font-style: italic;
  color: orange;
  text-shadow: .06em .05em .02em grey; }

#kaartje {
  position: absolute;
  left: 10%;
  top: -2.5em;
  opacity: .7;
  z-index: -10;
  height: 80%;
  width: auto;
  max-width: 70%; }

#enelletje {
  height: 100%;
  /*    width: 100%;*/ }

#chorda {
  position: absolute;
  top: 8em;
  left: 2em;
  right: 17%;
  height: 100%;
  /*    max-height: 800px;
      min-width: 800px;*/
  display: block;
  z-index: 10; }

.tjaarts {
  position: relative;
  float: left;
  width: 50%;
  height: auto;
  padding-bottom: 100%; }

#mySVG {
  position: absolute;
  height: 100%;
  width: 100%; }

/*voor IE: transformeer de div ipv de svg, idem voor .teebeltexten */
#myG1 {
  float: left;
  display: inline-block;
  /*    transform: translate(141px, 151px) rotate(94deg);*/
  z-index: 1000; }

#myG2 {
  float: right;
  display: inline-block;
  /*    transform: translate(140px, 150px) rotate(-89deg);*/
  z-index: 1000; }

.chordheart {
  fill: url("#myLinearGradient"); }

.chordlabels {
  position: relative;
  bottom: -.8em;
  /*-7.5em;*/
  text-align: center;
  font-weight: bolder;
  font-size: 1.3em;
  color: dimgrey;
  z-index: 10000; }

#teebeldiv {
  position: absolute;
  width: auto;
  background-color: rgba(185, 185, 185, 0.7);
  border: 1px solid dimgrey;
  z-index: 10000; }

#teebelheaddiv {
  width: auto;
  font-weight: bold;
  border-bottom: 1px solid grey; }

#teebelhead {
  width: 100%; }

#teebelhead td {
  vertical-align: bottom; }

#teebelhead td.lefty {
  padding-left: .5em; }

#teebelhead td.righty {
  text-align: right;
  padding-right: 1.8em; }

#teebel {
  padding-left: .5em;
  overflow-y: scroll;
  -ms-overflow-style: scrollbar; }

#bron {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: visible; }

#blader {
  position: absolute;
  top: .5em;
  right: 5em;
  overflow: visible;
  z-index: 1000; }

div.tooltip {
  position: absolute;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  width: 18em;
  height: auto;
  /* resize: vertical;*/
  padding-top: .8em;
  padding-bottom: .8em;
  border: solid 2px black;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 4px 4px 2px grey;
  -webkit-box-shadow: 4px 4px 2px grey;
  background: lemonchiffon;
  pointer-events: none;
  z-index: 100; }

.cursief {
  font-style: italic; }

.orangeshaded {
  text-shadow: .06em .05em .02em orange; }

a {
  color: #999999;
  text-decoration: none; }

a:active {
  color: #000000; }

a:visited {
  color: #009900; }

a:hover {
  font-weight: bold; }

@media all and (min-width: 32em) {
  body {
    font-size: 10px; } }
@media all and (min-width: 60em) {
  body {
    font-size: 12px; } }
@media all and (min-width: 100em) {
  body {
    font-size: 14px; } }
@media all and (orientation: portrait) {
  #chorda {
    width: 80%; }

  #teebeldiv {
    left: 12%;
    bottom: 5%; }

  #teebel {
    height: 16em;
    width: 26em; }

  .teebeltext {
    transform: translate(24em, 0); } }
@media all and (orientation: landscape) {
  #chorda {
    width: 60%; }

  #teebeldiv {
    top: 10%;
    right: 10%; }

  #teebel {
    height: 36em;
    width: 17em; }

  .teebeltext {
    transform: translate(15em, 0); } }