body {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-image: url(../img/bg.jpg);
}

header.default { margin: 48px 0; }
header.default > p { color: #fff; }

footer.default { margin: 48px 0; color: #fff; }
footer.default a { text-decoration: none; font-weight: bold; }

h1,
h2,
h3,
h4,
h5,
h6 { color: #fff; }

.hang {
   width: 240px;
   height: 240px;
   margin: 0 auto 20px;
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border-radius: 50%;
}
.hang.active { box-shadow: 0 0 20px 5px #f00; }
.hang > a {
   width: 50px;
   height: 50px;
   margin: 0;
   border-width: 0;
   position: absolute;
   border-radius: 50%;
   background: transparent;
   transition: all .2s ease-out 0s;
   text-decoration: none;
}
.hang > a > span {
   background: rgba(0, 0, 0, .5);
   box-shadow: inset 0 0 4px 1px #000;
   display: table;
   margin: 13px auto;
   border-radius: 50%;
   width: 24px;
   line-height: 24px;

   color: #8b4e1f;
   text-align: center;
   font-family: Tahoma;
   font-size: 10px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.hang > a.active > span {
	color: #c00;
	box-shadow: 0 0 10px 10px rgba(255, 0, 0, .5);
}

.hang.hang8 { background-image: url(../img/8notes-play.png); }
.hang.hang8 > .V4A3 { left: 38%; top: 38%; }
.hang.hang8 > .V4B3 { bottom: 12%; left: 21%; }
.hang.hang8 > .V4C4 { right: 23%; bottom: 12%; }
.hang.hang8 > .V4D4 { left: 5%; top: 38%; }
.hang.hang8 > .V4E4 { right: 5%; top: 39%; }
.hang.hang8 > .V4F4 { top: 13%; left: 18%; }
.hang.hang8 > .V4G4 { right: 18%; top: 13%; }
.hang.hang8 > .V4A4 { top: 6%; left: 40%; }

.hang.hang13 { background-image: url(../img/13notes-play.png); }
.hang.hang13 > .oC4 { right: 24%; bottom: 3%; }
.hang.hang13 > .oCd4 { top: 14%; right: 13%; }
.hang.hang13 > .oD4 { right: 51%; bottom: 2%; }
.hang.hang13 > .oEb4 { left: 16%; top: 16%; }
.hang.hang13 > .oE4 { right: 3%; bottom: 21%; }
.hang.hang13 > .oF4 { top: 61%; left: 7%; }
.hang.hang13 > .oFd4 { right: 39%; top: 5%; }
.hang.hang13 > .oG4 { top: 35%; right: 1%; }
.hang.hang13 > .oGd4 { top: 38%; left: 3%; }
.hang.hang13 > .oA4 { bottom: 20%; right: 36%; }
.hang.hang13 > .oBb4 { top: 28%; left: 42%; }
.hang.hang13 > .oB4 { top: 44%; right: 18%; }
.hang.hang13 > .oC5 { top: 45%; left: 24%; }

.hang.hang6 { background-image: url(../img/6notes-play.png); }
.hang.hang6 > .Bb3V4 { top: 37%; left: 42%;}
.hang.hang6 > .C4V4 { top: 65%; left: 18%;}
.hang.hang6 > .D4V4 { top: 66%; left: 66%;}
.hang.hang6 > .F4V4 { top: 22%; left: 8%;}
.hang.hang6 > .G4V4 { top: 24%; left: 75%;}
.hang.hang6 > .Bb4V4 { top: 4%; left: 43%;}

.recording {
	font-weight: : bold;
    -webkit-animation: heartbeat 0.5s linear infinite alternate;
            animation: heartbeat 0.5s linear infinite alternate;
}

@-webkit-keyframes heartbeat {
   0% {
      background: #f00;
   }
}

.playing {
	font-weight: bold;
    -webkit-animation: playing 0.5s linear infinite alternate;
            animation: playing 0.5s linear infinite alternate;
}

@-webkit-keyframes playing {
   0% {
      background: #999;
   }
}

.options {
	border: 1px solid rgba(0, 0, 0, .8);
	border-radius: 4px;
	margin: 16px 0;
	padding: 16px;
	background: rgba(0, 0, 0, .6);
}
.options > .btn-group > .btn,
.options > .form-control { border-color: #000; box-shadow: none; }
.options > .btn-group { margin: 0 0 6px; }
.options > textarea.form-control {
	height: 128px;
	resize: none;
	margin: 0 0 6px;
	padding: 0 16px;
	line-height: 32px;
	background-color: #e5d9a1;
}