body {
  background-color: black;
  overflow-y: scroll;
}
div#container {
  margin-left: auto;
  margin-right: auto;
  max-width: 619px;
  width: 100%;
}
div#container div#buttons {
  margin-top: 10px;
  text-align: center;
}
div#container div#buttons > button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  padding: 6px 6px 6px 6px;
  font-weight: bold;
  color: gray;
  background-color: #f2f5f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), to(#c8d7dc));
  background-image: -webkit-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f2f5f6, endColorstr=#c8d7dc);
}
div#container div#chordwheel {
  position: relative;
  width: 619px;
  height: 619px;
  overflow: hidden;
}
div#container div#chordwheel.flip > div#sidea {
  -moz-transform: rotateY(180deg) translateZ(0);
  -ms-transform: rotateY(180deg) translateZ(0);
  -o-transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
  transform: rotateY(180deg) translateZ(0);
  opacity: 0;
}
div#container div#chordwheel.flip > div#sideb {
  -moz-transform: rotateY(0deg) translateZ(0);
  -ms-transform: rotateY(0deg) translateZ(0);
  -o-transform: rotateY(0deg) translateZ(0);
  -webkit-transform: rotateY(0deg) translateZ(0);
  transform: rotateY(0deg) translateZ(0);
  opacity: 1;
}
div#container div#chordwheel > div {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
  -o-transition-property: transform, opacity;
  -ms-transition-property: transform, opacity;
  transition-property: transform, opacity;
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -ms-transition-duration: 0.6s;
  transition-duration: 0.6s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
div#container div#chordwheel > div#sidea {
  -moz-transform: rotateY(0deg) translateZ(0);
  -ms-transform: rotateY(0deg) translateZ(0);
  -o-transform: rotateY(0deg) translateZ(0);
  -webkit-transform: rotateY(0deg) translateZ(0);
  transform: rotateY(0deg) translateZ(0);
  opacity: 1;
}
div#container div#chordwheel > div#sideb {
  -moz-transform: rotateY(180deg) translateZ(0);
  -ms-transform: rotateY(180deg) translateZ(0);
  -o-transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
  transform: rotateY(180deg) translateZ(0);
  opacity: 0;
}
div#container div#chordwheel > div#sideb > img.outer {
  -moz-transform: rotateZ(17deg) translateZ(0);
  -ms-transform: rotateZ(17deg) translateZ(0);
  -o-transform: rotateZ(17deg) translateZ(0);
  -webkit-transform: rotateZ(17deg) translateZ(0);
  transform: rotateZ(17deg) translateZ(0);
}
div#container div#chordwheel > div > img {
  position: absolute;
  top: 0;
  left: 0;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
div#container div#chordwheel > div > img.inner {
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -ms-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
div#container div#chordwheel > div > img.inner.notrans {
  -moz-transition-property: none;
  -o-transition-property: none;
  -webkit-transition-property: none;
  transition-property: none;
}
div#container div#chordwheel > div > img.inner.chord-1 {
  -moz-transform: rotateZ(-15deg) translateZ(0);
  -ms-transform: rotateZ(-15deg) translateZ(0);
  -o-transform: rotateZ(-15deg) translateZ(0);
  -webkit-transform: rotateZ(-15deg) translateZ(0);
  transform: rotateZ(-15deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord0 {
  -moz-transform: rotateZ(15deg) translateZ(0);
  -ms-transform: rotateZ(15deg) translateZ(0);
  -o-transform: rotateZ(15deg) translateZ(0);
  -webkit-transform: rotateZ(15deg) translateZ(0);
  transform: rotateZ(15deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord1 {
  -moz-transform: rotateZ(45deg) translateZ(0);
  -ms-transform: rotateZ(45deg) translateZ(0);
  -o-transform: rotateZ(45deg) translateZ(0);
  -webkit-transform: rotateZ(45deg) translateZ(0);
  transform: rotateZ(45deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord2 {
  -moz-transform: rotateZ(75deg) translateZ(0);
  -ms-transform: rotateZ(75deg) translateZ(0);
  -o-transform: rotateZ(75deg) translateZ(0);
  -webkit-transform: rotateZ(75deg) translateZ(0);
  transform: rotateZ(75deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord3 {
  -moz-transform: rotateZ(105deg) translateZ(0);
  -ms-transform: rotateZ(105deg) translateZ(0);
  -o-transform: rotateZ(105deg) translateZ(0);
  -webkit-transform: rotateZ(105deg) translateZ(0);
  transform: rotateZ(105deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord4 {
  -moz-transform: rotateZ(135deg) translateZ(0);
  -ms-transform: rotateZ(135deg) translateZ(0);
  -o-transform: rotateZ(135deg) translateZ(0);
  -webkit-transform: rotateZ(135deg) translateZ(0);
  transform: rotateZ(135deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord5 {
  -moz-transform: rotateZ(165deg) translateZ(0);
  -ms-transform: rotateZ(165deg) translateZ(0);
  -o-transform: rotateZ(165deg) translateZ(0);
  -webkit-transform: rotateZ(165deg) translateZ(0);
  transform: rotateZ(165deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord6 {
  -moz-transform: rotateZ(195deg) translateZ(0);
  -ms-transform: rotateZ(195deg) translateZ(0);
  -o-transform: rotateZ(195deg) translateZ(0);
  -webkit-transform: rotateZ(195deg) translateZ(0);
  transform: rotateZ(195deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord7 {
  -moz-transform: rotateZ(225deg) translateZ(0);
  -ms-transform: rotateZ(225deg) translateZ(0);
  -o-transform: rotateZ(225deg) translateZ(0);
  -webkit-transform: rotateZ(225deg) translateZ(0);
  transform: rotateZ(225deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord8 {
  -moz-transform: rotateZ(255deg) translateZ(0);
  -ms-transform: rotateZ(255deg) translateZ(0);
  -o-transform: rotateZ(255deg) translateZ(0);
  -webkit-transform: rotateZ(255deg) translateZ(0);
  transform: rotateZ(255deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord9 {
  -moz-transform: rotateZ(285deg) translateZ(0);
  -ms-transform: rotateZ(285deg) translateZ(0);
  -o-transform: rotateZ(285deg) translateZ(0);
  -webkit-transform: rotateZ(285deg) translateZ(0);
  transform: rotateZ(285deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord10 {
  -moz-transform: rotateZ(315deg) translateZ(0);
  -ms-transform: rotateZ(315deg) translateZ(0);
  -o-transform: rotateZ(315deg) translateZ(0);
  -webkit-transform: rotateZ(315deg) translateZ(0);
  transform: rotateZ(315deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord11 {
  -moz-transform: rotateZ(345deg) translateZ(0);
  -ms-transform: rotateZ(345deg) translateZ(0);
  -o-transform: rotateZ(345deg) translateZ(0);
  -webkit-transform: rotateZ(345deg) translateZ(0);
  transform: rotateZ(345deg) translateZ(0);
}
div#container div#chordwheel > div > img.inner.chord12 {
  -moz-transform: rotateZ(375deg) translateZ(0);
  -ms-transform: rotateZ(375deg) translateZ(0);
  -o-transform: rotateZ(375deg) translateZ(0);
  -webkit-transform: rotateZ(375deg) translateZ(0);
  transform: rotateZ(375deg) translateZ(0);
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
/*# sourceMappingURL=style.css.map */