/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
    font-family: OpenSans;
    font-weight: normal;
    font-style: normal;
    src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.ttf'), url('../fonts/OpenSans-Regular.eot');
}
@font-face {
    font-family: OpenSans;
    font-weight: bold;
    font-style: normal;
    src: local('Open Sans Semibold'), local('OpenSans Semibold'), url('../fonts/OpenSans-Semibold.ttf'), url('../fonts/OpenSans-Semibold.eot');
}
@font-face {
    font-family: OpenSans;
    font-weight: normal;
    font-style: italic;
    src: local('Open Sans Italic'), local('OpenSans Italic'), url('../fonts/OpenSans-Italic.ttf'), url('../fonts/OpenSans-Italic.eot');
}
@font-face {
    font-family: OpenSans;
    font-weight: bold;
    font-style: italic;
    src: local('Open Sans Semibold Italic'), local('OpenSans Semibold Italic'), url('../fonts/OpenSans-SemiboldItalic.ttf'), url('../fonts/OpenSans-SemiboldItalic.eot');
}
@font-face {
    font-family: ComicSans;
    font-weight: normal;
    font-style: normal;
    src: local('Comic Sans MS'), local('ComicSans MS'), url('../fonts/comic.ttf'), url('../fonts/comic.eot');
}
@font-face {
    font-family: KaushanScript;
    font-weight: normal;
    font-style: normal;
    src: local('Kaushan Script'), local('KaushanScript'), url('../fonts/KaushanScript-Regular.ttf'), url('../fonts/KaushanScript-Regular.eot');
}
body {
    background: #cfcfcf;
    font-family: OpenSans, Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    color: #231f20;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
}
strong {
    font-weight: bold;
    color: #00b3e2;
}
img,
div,
.key,
.line,
.nots,
.objects,
.object,
.object-toggle,
#spinner {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
* {
    box-sizing: border-box;
    outline-style: none;
}
.ui-draggable {
    -ms-touch-action: none;
}
.inline {
    display: inline-block;
}
.display-none {
    display: none;
}
.invisible {
    visibility: hidden;
}
.visible {
    visibility: visible;
}
.align-left {
    text-align: left;
}
.center {
    text-align: center;
}
.middle {
    vertical-align: middle;
}
.helper-middle {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.numbering {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Carousel */
.container {
    background: #fff;
    padding-left: 0px;
    padding-right: 0px;
    /* width: 960px; */    
    width: 1014px;
    height: 654px;
}
.carousel,
.carousel-inner,
.item,
.background {
    height: 100%;
    background-size: 100% 100% !important;
}
.carousel-control {
    filter: alpha(opacity=100);
    opacity: 1;
    text-shadow: none;
    
    width: 57px;
    height: 55px;
    position: absolute;
    z-index: 100;
    left: auto;
    top: auto;
    bottom: 3%;
}
.carousel-control:hover,
.carousel-control:focus {
    filter: alpha(opacity=100);
    opacity: 1;
}
.carousel-control.left {
    background: url('../img/prev.png') no-repeat;
    background-position: top;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
    right: 10%;
}
.carousel-control.right {
    background: url('../img/next.png') no-repeat;
    background-position: top;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
    right: 2%;
}
.carousel-control.left:hover {
    background-position: bottom;
}
.carousel-control.right:hover {
    background-position: bottom;
}
.contents {
    background: url('../img/contents.png') no-repeat;
    background-position: left top;
    width: 140px;
    line-height: 55px;
    text-align: right;
    font-weight: bold;
    font-size: 24px;
    color: #cbbbb3;
    left: 2%;
    cursor: pointer;
}
.contents:hover,
.contents:focus {
    background-position: left bottom;
    color: #0091bc;
}

/* Titlepages */
#titlepage {
    background: url('../img/0/titlepage.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/0/titlepage.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/0/titlepage.png', sizingMethod='scale')";
}
.start {
    background: url('../img/0/start.png') no-repeat;
    background-position: top;
    width: 212px;
    height: 57px;
    line-height: 57px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    color: #00b3e2;
    position: absolute;
    left: 12%;
    top: 48%;
    cursor: pointer;
}
.start:hover,
.start:focus {
    background-position: bottom;
    color: #fff;
}
.description {
    position: absolute;
    left: 144px;
    bottom: 12px;
    font-size: 14px;
}
#contents {
    background: url('../img/0/contents.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/0/contents.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/0/contents.png', sizingMethod='scale')";
    padding: 8% 6%;
}
#contents > div {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    font-family: KaushanScript, ComicSans;
    font-size: 26px;
    color: #000;
    line-height: 1.2;
}
#contents div.title {
    height: 124px;
    padding-left: 16px;
    padding-top: 60px;
    cursor: pointer;
}
#contents div.title:hover,
#contents div.title:focus {
    color: #0091bc;
}
#contents div#theme-1 div.title,
#contents div#theme-3 div.title {
    line-height: 64px;
}
#contents div#theme-5 {
    position: absolute;
    left: 30%;
    bottom: 10%;
}
#contents ol {
    margin-top: 12px;
}
#contents li {
    background: url('../img/0/border.png') no-repeat left bottom;
    font-family: OpenSans, Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 16px;
    color: #00b3e2;
    padding: 6px 0 16px 0;
    cursor: pointer;
}
#contents li:hover,
#contents li:focus {
    color: #0091bc;
}
#contents li img {
    height: 24px;
    vertical-align: top;
    margin-top: -8px;
}
.metodika {
    width: auto !important;
    position: absolute;
    right: 7.7%;
    bottom: 15%;
}
.metodika a {
    font-family: OpenSans, Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 16px;
    color: #00b3e2;
}
.metodika a:hover,
.metodika a:focus {
    color: #0091bc;
    text-decoration: none;
}
#titlepage-1 {
    background: url('../img/1/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1/0.png', sizingMethod='scale')";
}
#titlepage-2 {
    background: url('../img/2/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/2/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/2/0.png', sizingMethod='scale')";
}
#titlepage-3 {
    background: url('../img/3/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/3/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/3/0.png', sizingMethod='scale')";
}
#titlepage-4 {
    background: url('../img/4/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/4/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/4/0.png', sizingMethod='scale')";
}
#titlepage-5 {
    background: url('../img/5/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
}
.subtitlepage {
    background: url('../img/subtitlepage.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/subtitlepage.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/subtitlepage.png', sizingMethod='scale')";
}
#end-0 {
    background: url('../img/5/0.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
}
#end {
    background: url('../img/5/end.png') no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/5/0.png', sizingMethod='scale')";
}
.subtitlepage-title,
#end-0 div.title,
#end div.title {
    font-family: KaushanScript, ComicSans;
    font-size: 77px;
    color: #00b3e2;
    width: 100%;
    text-align: center;
    line-height: 1;
    position: absolute;
    top: 37%;
}
.linkEvaluationForm {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 9%;
}
.linkEvaluationForm a {
    font-size: 16px;
    color: #00b3e2;
}
.linkEvaluationForm a:hover,
.linkEvaluationForm a:focus {
    color: #0091bc;
}
.subtitlepage-title img {
    vertical-align: top;
}
.page-type-titles {
    width: 100%;
    padding: 0 12%;
    position: absolute;
    top: 57%;
}
.page-type-titles > div {
    font-family: KaushanScript, ComicSans;
    font-size: 30px;
    width: 42%;
    display: inline-block;
}
.page-type-titles > div:last-of-type {
    text-align: left;
}
.subtitlepage .navig {
    width: 100%;
    height: 120px;
    position: absolute;
    top: 67%;
}
.subtitlepage .navig ul.theory {
    background: #fff;
    position: absolute;
    min-height: 90px;
    left: 10%;
    top: 30px;
    margin: 0;
    padding: 0 24px;
}
.subtitlepage .navig ul.theory li {
    list-style-type: none;
    font-family: Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 16px;
    color: #00b3e2;
    cursor: pointer;
}
.subtitlepage .navig ul.theory li:hover,
.subtitlepage .navig ul.theory li:focus {
    color: #0091bc;
}
.subtitlepage .navig div.exe-list {
    width: 56%;
    position: absolute;
    left: 44%;
}
.subtitlepage .navig div.exe {
    background: url('../img/notes/subtitlepage-navig-exe.png') no-repeat;
    background-position: top;
    width: 45px;
    height: 84px;
    font-weight: bold;
    color: #fff;
    padding: 52px 0 0 14px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
.subtitlepage .navig div.exe:hover,
.subtitlepage .navig div.exe:focus {
    background-position: bottom;
}
.subtitlepage .navig div#exe-1 {
    left: 0;
    top: 10px;
}
.subtitlepage .navig div#exe-2 {
    left: 52px;
    top: 18px;
}
.subtitlepage .navig div#exe-3 {
    left: 112px;
    top: 5px;
}
.subtitlepage .navig div#exe-4 {
    left: 174px;
    top: 3px;
}
.subtitlepage .navig div#exe-5 {
    left: 224px;
    top: 15px;
}
.subtitlepage .navig div#exe-6 {
    left: 285px;
    top: 10px;
}
.subtitlepage .navig div#exe-7 {
    left: 345px;
    top: -3px;
}
.subtitlepage .navig div#exe-8 {
    left: 397px;
    top: 10px;
}
.subtitlepage .navig div#exe-9 {
    left: 447px;
    top: 3px;
}
.subtitlepage .navig div#exe-10 {
    padding: 52px 0 0 8px;
    left: 498px;
    top: -5px;
}
.subtitlepage .navig div#exe-11 {
    padding: 52px 0 0 8px;
    left: 548px;
    top: -3px;
}
.subtitlepage .navig div#exe-12 {
    padding: 52px 0 0 8px;
    left: 598px;
    top: 0px;
}

/* Exercise pages */
.breadcrumb {
    background-color: transparent;
    border-radius: 0;
    
    font-weight: bold;
    font-size: 18px;
    padding: 1% 2% 0 2%;
    margin: 0;
}
.breadcrumb span.navig {
    color: #00b3e2;
    cursor: pointer;
}
.breadcrumb span.navig:hover,
.breadcrumb span.navig:focus {
    color: #0091bc;
}
.breadcrumb > span.divider {
    display: inline-block;
    width: 42px;
    text-align: center;
    color: #c8c8c8;
}
.breadcrumb img {
    height: 24px;
    vertical-align: top;
    margin-top: -5px;
}
.pageborder {
    background: url('../img/pageborder.png') no-repeat;
    width: 100%;
    height: 24px;
}
#pageborder-1 {
    margin: 4px 0 6px 0;
}
#pageborder-2 {
    position: absolute;
    bottom: 0;
}
.content {
    width: 100%;
    padding: 0 6%;
    position: relative;
}
.removing {
    width: 6%;
    height: 100%;
    position: absolute;
    top: 0;
}
.removing.area-left {
    left: 0;
}
.removing.area-right {
    right: 0;
}
canvas {
    position: absolute;
    z-index: 1;
    top: 0;
}
div.canvas-wrapper {
    position: relative;
}
canvas.canvas-drawing {
    position: relative;
    z-index: 100;
    cursor: url('../img/pen.png'), url('img/pen.cur'), auto;
}
.page-title {
    font-family: ComicSans;
    font-size: 36px;
    color: #00b3e2;
    text-transform: uppercase;
    text-align: center;
}
.page-title img {
    margin-right: 24px;
    height: 60px;
}
.exe-title {
    font-size: 24px;
}
.exe-title .col-md-1 {
    text-align: right;
}
.exe-title .col-md-1 img {
    height: 40px;
}
p,
.p,
li {
    margin: 2% 0;
    line-height: 1.4;
}
a.external {
    color: #231f20;
    text-decoration: underline;
}
a.external:focus,
a.external:hover {
    color: #00b3e2;
}
.audio-wrapper {
    display: inline-block;
    width: 50%;
    margin: 12px auto 0 auto;
    position: relative;
}
.audio-wrapper span {
    vertical-align: middle;
    margin-right: 8px;
}
.audio-wrapper .audio {
    display: inline-block;
    vertical-align: middle;
}
.audio {
    background: url('../img/audio.png') no-repeat;
    background-position: top;
    width: 42px;
    height: 36px;
    position: relative;
    z-index: 100;
    cursor: pointer;
}
.audio:hover,
.audio:focus {
    background-position: bottom;
}
.audio > audio {
    margin-left: 54px;
    margin-top: 4px;
    margin-top: -7px\9;
    max-width: 380px;
    height: 30px;
    height: auto\9;
}
.audio-lg {
    background: url('../img/audio-lg.png') no-repeat;
    background-position: center;
    width: 65px;
    height: 58px;
    margin: 2% auto;
    position: relative;
    z-index: 100;
}
.audio.audio-lg {
    background-position: top;
}
.audio.audio-lg:hover,
.audio.audio-lg:focus {
    background-position: bottom;
}
.author {
    width: 100%;
    text-align: right;
    font-size: 16px;
    margin: 16px 0 8px 0;
}
.container-img {
    position: relative;
}
.container-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
}
.objects {
    width: 100%;
    text-align: center;
    margin: 4% auto;
}
.objects .highlight {
    background: transparent;
    border: 5px solid #00b3e2;
    width: 58px;
    height: 58px;
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    margin: -12px auto 0 auto;
    -webkit-border-radius: 32px;
       -moz-border-radius: 32px;
            border-radius: 32px;
}
.infobar {
    background: #e9e9e9;
    width: 100%;
    height: 40px;
    position: relative;
    margin: 0 0 1% 0;
    font-size: 16px;
    text-align: center;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
}
.timer {
    width: 280px;
    line-height: 40px;
    display: inline-block;
}
span.ui-spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
}
span.ui-spinner a {
    color: #0091bc;
    position: absolute;
    left: 20px;
    padding: 0 2px;
    display: block;
    cursor: pointer;
}
span.ui-spinner a.ui-spinner-up {
    top: 0px;
}
span.ui-spinner a.ui-spinner-down {
    top: 20px;
}
span.ui-spinner a:hover,
span.ui-spinner a:focus {
    color: #00b3e2;
    text-decoration: none;
}
span.ui-icon {
    width: 19px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 0;
    padding: 4px;
    line-height: 0.5;
}
#spinner {
    width: 18px;
    height: 40px;
    background-color: transparent;
    border-style: none;
    cursor: default;
}
.score {
    width: 280px;
    line-height: 40px;
    position: absolute;
    right: 16px;
    top: 0;
    text-align: right;
}
#hits {
    color: #38c800;
}
#fails {
    /* color: #ea3f3f; */
    color: #00b3e2;
}
.wrapper-row > div {
    display: inline-block;
    text-align: center;
}
.object {
    background: #fff;
    border: 5px solid #cfcfcf;
    font-size: 24px;
    min-width: 100px;
    height: 45px;
    text-align: center;
    display: inline-block;
    margin: 1%;
    padding: 0 10px;
    -webkit-border-radius: 24px;
       -moz-border-radius: 24px;
            border-radius: 24px;
    cursor: pointer;
}
.object-toggle {
    background: #fff;
    border: 5px solid #cfcfcf;
    min-width: 54px;
    text-align: center;
    display: inline-block;
    padding: 0 10px;
    -webkit-border-radius: 24px;
       -moz-border-radius: 24px;
            border-radius: 24px;
    cursor: pointer;
}
.object:hover,
.object-toggle:hover {
    border-color: #0091bc;
}
.object-toggle.active {
    border-color: #00b3e2;
}
div > .more {
    margin-top: 4%;
}
.more {
    width: 70px;
    height: 38px;
    line-height: 0;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
}
.objects > .Pareizi {
    border-color: #38c800;
}
.objects > .Nepareizi {
    border-color: #00b3e2;
    background: #c8c8c8;
}
.up {
    background: url('../img/notes/up.png') no-repeat;
    width: 9px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}
.down {
    background: url('../img/notes/down.png') no-repeat;
    width: 9px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}
.interval {
    display: inline-block;
    vertical-align: middle;
}
.objects > .Pareizi .up {
    background: url('../img/notes/up-Pareizi.png') no-repeat;
}
.objects > .Pareizi .down {
    background: url('../img/notes/down-Pareizi.png') no-repeat;
}
tr > .Pareizi,
.key.Pareizi,
.key-black.Pareizi {
    background: #38c800;
}
tr > .Nepareizi,
.key.Nepareizi,
.key-black.Nepareizi {
    background: #00b3e2;
}
.buttons {
    width: 100%;
    text-align: center;
    margin: 6% 0 0 0;
}
.button {
    display: inline-block;
    background: url('../img/button.png') no-repeat;
    background-position: top;
    width: 232px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #00b3e2;
    position: relative;
    margin: 0 2%;
    cursor: pointer;
}
.button:hover,
.button:focus {
    background-position: bottom;
    color: #fff;
}
.button-sm {
    background: url('../img/button-sm.png') no-repeat;
    background-position: top;
    width: 170px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
    position: relative;
    display: inline-block;
    margin: 0 2%;
    cursor: pointer;
}
.button-sm:hover,
.button-sm:focus {
    background-position: bottom;
}
.button-sm.disabled {
    background: url('../img/button-sm-disabled.png') no-repeat;
    color: #969696;
    cursor: default;
}
.buttons .Pareizi {
    background: url('../img/Pareizi.png') no-repeat;
    width: 170px;
    height: 54px;
    line-height: 54px;
    display: inline-block;
    position: absolute;
    left: 0;
    cursor: default;
}
.buttons .Nepareizi {
    background: url('../img/Nepareizi.png') no-repeat;
    width: 170px;
    height: 54px;
    line-height: 54px;
    display: inline-block;
    position: absolute;
    left: 0;
    cursor: default;
}
select {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    cursor: pointer;
}
select:hover {
    border: 1px solid #00b3e2;
}
select:focus,
select:active {
    background-color: #ebebeb;
    border: 1px solid #c8c8c8;
    outline-style: none;
}
option {
    cursor: pointer !important;
}
select>option:hover,
select>option:focus,
select>option:active {
    cursor: pointer !important;
}
input,
.input-fake {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
input[type=checkbox],
input[type=radio] {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    vertical-align: middle;
    margin: 0 12px 0 0;
}
input:hover,
input[type=checkbox]:hover,
input[type=radio]:hover {
    border: 1px solid #00b3e2;
}
input:focus,
input:active,
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
    background-color: #fff;
    border: 1px solid #00b3e2;
    outline-style: none;
}
.control-wrapper {
    margin: 6px 0 6px 16px;    
}
::-ms-clear {
    display: none;
}
.input-box {
    width: 100px;
    position: absolute;
    background-color: #fff;
    border: 5px solid #cfcfcf !important;
    -webkit-border-radius: 24px;
       -moz-border-radius: 24px;
            border-radius: 24px;
}
.input-box:hover {
    border-color: #0091bc !important;
}
.input-box:focus,
.input-box:active {
    border-color: #00b3e2 !important;
}

/* Colors */
.red {
    color: #ea3f3f;
}
.red-dark {
    color: #0091bc;
}
.green {
    color: #38c800;
}
.hover {
    color: #00b3e2;
}
.white-text {
    color: #fff;
}
.rhythm::before {
    border-top: 2px solid #e67f17;
}
.fa-2 {
    background: #d3f0e6;
}
.fa-2::before {
    border-top: 2px solid #24b383;
}
.sol-2 {
    background: #e5f0cf;
}
.sol-2::before {
    border-top: 2px solid #7db311;
}
.la-2 {
    background: #f9f4cc;
}
.la-2::before {
    border-top: 2px dashed #e0c900;
}
.la-2-active {
    background: #e0c900;
}
.si-2 {
    background: #fae5d0;
}
.si-2::before {
    border-top: 2px dashed #e67f17;
}
.si-2-active {
    background: #e67f17;
}
.do {
    background: #ebd2eb;
}
.do::before {
    border-top: 2px dashed #991f99;
}
.do-active {
    background: #991f99;
    color: #fff;
}
.re {
    background: #dad5f5;
}
.re::before {
    border-top: 2px solid #472dcc;
}
.re-active {
    background: #472dcc;
    color: #fff;
}
.mi {
    background: #cce7f5;
}
.mi::before {
    border-top: 2px solid #0086cc;
}
.mi-active {
    background: #0086cc;
    color: #fff;
}
.fa {
    background: #d3f0e6;
}
.fa::before {
    border-top: 2px solid #24b383;
}
.fa-active {
    background: #24b383;
    color: #fff;
}
.sol {
    background: #e5f0cf;
}
.sol::before {
    border-top: 2px solid #7db311;
}
.sol-active {
    background: #7db311;
}
.la {
    background: #f9f4cc;
}
.la::before {
    border-top: 2px solid #e0c900;
}
.la-active {
    background: #e0c900;
}
.si {
    background: #fae5d0;
}
.si::before {
    border-top: 2px solid #e67f17;
}
.si-active {
    background: #e67f17;
}
.do2 {
    background: #ebd2eb;
}
.do2::before {
    border-top: 2px solid #991f99;
}
.do2-active {
    background: #991f99;
}
.re2 {
    background: #dad5f5;
}
.re2::before {
    border-top: 2px solid #472dcc;
}
.re2-active {
    background: #472dcc;
}
.mi2 {
    background: #cce7f5;
}
.mi2::before {
    border-top: 2px solid #0086cc;
}
.mi2-active {
    background: #0086cc;
}
.fa2 {
    background: #d3f0e6;
}
.fa2::before {
    border-top: 2px solid #24b383;
}
.fa2-active {
    background: #24b383;
}
.sol2 {
    background: #e5f0cf;
}
.sol2::before {
    border-top: 2px solid #7db311;
}
.sol2-active {
    background: #7db311;
}
.la2 {
    background: #f9f4cc;
}
.la2::before {
    border-top: 2px dashed #e0c900;
}
.la2-active {
    background: #e0c900;
}
.si2 {
    background: #fae5d0;
}
.si2::before {
    border-top: 2px dashed #e67f17;
}
.si2-active {
    background: #e67f17;
}
.do3 {
    background: #ebd2eb;
}
.do3::before {
    border-top: 2px dashed #991f99;
}
.do3-active {
    background: #991f99;
}
.white {
    background: #fff;
}
.white::before {
    border-top: 1px solid #231f20;
}
.white-text {
    color: #fff;
}
.black,
.black-game {
    background: #231f20;
}
.black::before,
.black-game::before {
    border-top: 1px solid #231f20;
}
.black:hover,
.black:focus {
    background: #0091bc;
}
.black-active {
    background: #0091bc;
}
.black-text {
    color: #231f20;
}
.opacity-0 {
    filter: alpha(opacity=0);
    opacity: 0;
}
.opacity-20 {
    filter: alpha(opacity=20);
    opacity: 0.2;
}
.opacity-1 {
    filter: alpha(opacity=100);
    opacity: 1;
}
.octave-great {
    background: #991f99;
    color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
}
.octave-small {
    background: #472dcc;
    color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
}
.octave-1 {
    background: #0086cc;
    color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
}
.octave-2 {
    background: #24b383;
    color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
}
.register-low {
    background: #7db311;
    filter: alpha(opacity=100);
    opacity: 1;
}
.register-medium {
    background: #e0c900;
    filter: alpha(opacity=100);
    opacity: 1;
}
.register-high {
    background: #e67f17;
    filter: alpha(opacity=100);
    opacity: 1;
}
table#note_texts {
    width: 88%;
    margin: 12px 0 0 100px;
}
table#note_texts td {
    width: 6%;
    font-weight: bold;
    text-align: center;
    padding: 4px 0 2px 0;
}
.captions {
    position: relative;
    z-index: 0;
}
.captions td {
    width: 196px;
    text-align: center;
    position: relative;
}
#captions-top td {
    width: 49px;
}
.captions td:first-of-type {
    width: 103px !important;
}
.step {
    background: #231f20;
    width: 8px;
    height: 8px;
    margin: 16px 0 48px 28px;
}

/* Piano keyboard */
#keyboard {
    position: relative;
    margin: 2% auto;
    display: inline-block;
}
.keyboard {
    height: 200px;
    position: relative;
    margin: 0 auto;
}
.keyboard td {
    border: 1px solid #231f20;
    width: 40px;
    height: 200px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    vertical-align: bottom;
    padding-bottom: 16px;
    cursor: pointer;
}
.key-black {
    border: 1px solid #231f20;
    width: 24px;
    height: 130px;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 28px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 60px;
    -webkit-border-radius: 0 0 4px 4px;
       -moz-border-radius: 0 0 4px 4px;
            border-radius: 0 0 4px 4px;
    cursor: pointer;
}
.key-black sup img {
    width: 5px;
}
.fa_ {
    left: 28px;
}
.sol_ {
    left: 68px;
}
.la_ {
    left: 108px;
}
.do1_ {
    left: 188px;
}
.re1_ {
    left: 228px;
}
.fa1_ {
    left: 308px;
}
.sol1_ {
    left: 348px;
}
.la1_ {
    left: 388px;
}
.do2_ {
    left: 468px;
}
.re2_ {
    left: 508px;
}

/* Stave */
.containment,
.containment-addition,
.containment-draggable,
.containment-1,
.containment-2 {
    width: 100%;
    position: relative;
}
.containment-2 {
    margin-top: 36px;
}
.space-top {
    height: 24px;
}
.stave-wrapper {
    position: relative;
}
.stave {
    position: relative;
    z-index: 0;
}
.space {
    width: 100%;
    height: 8px;
}
.stave td {
    width: 49px;
    position: relative;
}
.stave tr:nth-of-type(odd) td {
    background: transparent;
    top: 50%;
}
.stave tr:nth-of-type(odd) td::before {
    content: '';
    width: 49px;
    height: 0px;
    position: absolute;
}
.stave tr:nth-of-type(1) td.white::before,
.stave tr:nth-of-type(2) td.white::before,
.stave tr:nth-of-type(3) td.white::before,
.stave tr:nth-of-type(15) td.white::before,
.stave tr:nth-of-type(16) td.white::before,
.stave tr:nth-of-type(17) td.white::before {
    border-top: 1px dashed transparent;
}
.stave td:first-of-type {
    width: 103px !important;
}
.stave td:first-of-type::before {
    width: 103px !important;
}
.stave tr td:last-of-type {
    width: 5px !important;
}
.stave tr:nth-of-type(odd) td:last-of-type::before {
    width: 5px !important;
}
.stave-wrapper .clef {
    position: absolute;
    left: 10px;
    top: 0;
}
.clef-sol {
    background: url('../img/notes/clef-sol.png') no-repeat;    
    width: 47px;
    height: 120px;
    position: absolute;
    top: 6px;
}
.clef-sol-red {
    background: url('../img/notes/clef-sol-red.png') no-repeat;    
    width: 47px;
    height: 120px;
    position: absolute;
    top: 6px;
}
.clef-bass {
    background: url('../img/notes/clef-bass.png') no-repeat;    
    width: 47px;
    height: 53px;
    position: absolute;
    top: 37px;
}
.clef-bass-red {
    background: url('../img/notes/clef-bass-red.png') no-repeat;    
    width: 47px;
    height: 53px;
    position: absolute;
    top: 37px;
}
.stave-wrapper .sharp {
    position: absolute;
    left: 66px;
    top: 14px;
}
#sharp-fa {
    left: 58px;
    top: 14px;
}
#sharp-do {
    left: 74px;
    top: 38px;
}
.sharp div {
    background: url('../img/notes/sharp.png') no-repeat;    
    width: 16px;
    height: 44px;
}
.sharp-red {
    position: absolute;
    left: 66px;
    top: 14px;
}
.sharp-red div {
    background: url('../img/notes/sharp-red.png') no-repeat;    
    width: 16px;
    height: 44px;
}
.stave-wrapper .flat {
    position: absolute;
    left: 66px;
    top: 42px;
}
.flat div {
    background: url('../img/notes/flat.png') no-repeat;
    width: 15px;
    height: 39px;
}
.stave-wrapper .flat div {
    width: 16px;
}
.flat-red {
    position: absolute;
    left: 66px;
    top: 42px;
}
.flat-red div {
    background: url('../img/notes/flat-red.png') no-repeat;    
    width: 15px;
    height: 39px;
}
.stave-wrapper .measure-top {
    position: absolute;
    left: 66px;
    top: 37px;
}
.stave-wrapper .measure-bottom {
    position: absolute;
    left: 66px;
    top: 69px;
}
.measure-2 {
    background: url('../img/notes/2.png') no-repeat;    
    width: 25px;
    height: 30px;
}
.measure-2-red {
    background: url('../img/notes/2-red.png') no-repeat;    
    width: 25px;
    height: 30px;
    position: absolute;
    top: 0;
}
.measure-3 {
    background: url('../img/notes/3.png') no-repeat;    
    width: 25px;
    height: 30px;
}
.measure-3-red {
    background: url('../img/notes/3-red.png') no-repeat;    
    width: 25px;
    height: 30px;
}
.measure-4 {
    background: url('../img/notes/4.png') no-repeat;    
    width: 25px;
    height: 30px;
}
.measure-4-red {
    background: url('../img/notes/4-red.png') no-repeat;    
    width: 25px;
    height: 30px;
    position: absolute;
    top: 0;
}
.stave-wrapper .barline {
    position: absolute;
    top: 36px;
}
.stave-wrapper .barline div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.stave-wrapper .barline-red div {
    background: #00b3e2 !important;
    width: 2px;
}
.stave-wrapper .closed {
    right: -4px;
}
.stave-wrapper .closed div {
    width: 5px;
}
.stave-wrapper .closed-left {
    position: absolute;
    left: 79px;
    top: 36px;
}
.stave-wrapper .closed-left div {
    background: #231f20;
    width: 5px;
    height: 65px;
}
.stave-wrapper .barline-left {
    position: absolute;
    left: 88px;
    top: 36px;
}
.stave-wrapper .barline-left div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.stave-wrapper .repeat,
.stave1-wrapper .repeat {
    background: url('../img/notes/repeat.png') no-repeat;
    width: 7px;
    height: 22px;
}
.stave-wrapper .repeat-left {
    position: absolute;
    left: 102px;
    top: 57px;
}
.stave-wrapper .repeat-right {
    position: absolute;
    right: 10px;
    top: 57px;
}

/* Stave-1 */
.stave1-wrapper {
    position: relative;
}
.stave1 {
    position: relative;
    z-index: 0;
}
.stave1 td {
    width: 49px;
    height: 65px;
    text-align: left;
    position: relative;
}
.stave1 td::before {
    content: '';
    background: #231f20;
    width: 49px;
    height: 1px;
    position: absolute;
    top: 32px;
}
.stave1 td.line-hover::before {
    background: #7db311;
    height: 2px;
}
.stave1 td:first-of-type {
    width: 103px !important;
}
.stave1 td:first-of-type::before {
    width: 103px !important;
}
.stave1 tr td:last-of-type {
    width: 5px !important;
}
.stave1 tr td:last-of-type::before {
    width: 5px !important;
}
.stave1-wrapper .measure-top {
    position: absolute;
    left: 66px;
    top: 2px;
}
.stave1-wrapper .measure-bottom {
    position: absolute;
    left: 66px;
    top: 33px;
}
.stave1-wrapper .barline {
    position: absolute;
    top: 0;
}
.stave1-wrapper .barline div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.stave1-wrapper .closed {
    right: -4px;
}
.stave1-wrapper .closed div {
    width: 5px;
}
.stave1-wrapper .closed-left {
    position: absolute;
    left: 79px;
    top: 0;
}
.stave1-wrapper .closed-left div {
    background: #231f20;
    width: 5px;
    height: 65px;
}
.stave1-wrapper .barline-left {
    position: absolute;
    left: 88px;
    top: 0;
}
.stave1-wrapper .barline-left div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.stave1-wrapper .repeat-left {
    position: absolute;
    left: 96px;
    top: 21px;
}
.stave1-wrapper .repeat-right {
    position: absolute;
    right: 12px;
    top: 21px;
}
.stave1 .on-stave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    margin: auto;
    z-index: 2;
    cursor: auto;
}
.stave1 .note-4.on-stave,
.stave1 .note-8.on-stave,
.stave1 .pause-4.on-stave,
.stave1 .pause-8.on-stave {
    left: 14px;
    right: auto;
    margin: 0;
}
.removable {
    cursor: pointer !important;
}

/* Notation */
.draggable,
.draggable-accidental,
.draggable-forever,
.draggable-helper,
.draggable-helper-2 {  
    cursor: pointer;
}
.containment .objects > div,
.containment-addition .objects > div,
.containment-draggable .objects > div {
    display: inline-block;
}
.containment .objects .space-10,
.containment-draggable .objects .space-10 {
    width: 10%;
    display: inline-block;
}
.on-stave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    margin: auto;
    z-index: 2;
    cursor: pointer;
}
.on-stave.ui-draggable-dragging {
    margin: 0 auto;
}
.on-stave.note-2-down,
.on-stave.note-2-down-red,
.on-stave.note-38-down,
.on-stave.note-38-down-red,
.on-stave.note-4-down,
.on-stave.note-4-down-red,
.on-stave.note-4-down-green,
.on-stave.note-4-ledger-down,
.on-stave.note-4-ledger-down-red,
.on-stave.note-4-ledger-down-green,
.on-stave.note-8-down,
.on-stave.note-8-down-red,
.on-stave.note-8-ledger-down,
.on-stave.note-8-ledger-down-red {
    top: -4px;
    bottom: auto;
}
.point {
    background: url('../img/notes/point.png') no-repeat center center;
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.point-red {
    background: url('../img/notes/point-red.png') no-repeat center center;
    position: absolute;
    width: 49px;
    height: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.head {
    background: url('../img/notes/head.png') no-repeat;
    width: 22px;
    height: 17px;
}
.head-red {
    background: url('../img/notes/head-red.png') no-repeat !important;
    width: 22px;
    height: 17px;
}
.head-green {
    background: url('../img/notes/head-green.png') no-repeat;
    width: 22px;
    height: 17px;
}
.head-ledger {
    background: url('../img/notes/head-ledger.png') no-repeat;
    width: 38px;
    height: 17px;
}
.head-ledger-red {
    background: url('../img/notes/head-ledger-red.png') no-repeat !important;
    width: 38px;
    height: 17px;
}
.head-ledger-green {
    background: url('../img/notes/head-ledger-green.png') no-repeat;
    width: 38px;
    height: 17px;
}
.head-2 {
    background: url('../img/notes/head-2.png') no-repeat;
    width: 22px;
    height: 18px;
}
.stem {
    background: url('../img/notes/stem.png') no-repeat center;
    width: 6px;
    height: 53px;
}
.flag {
    background: url('../img/notes/flag.png') no-repeat;
    width: 16px;
    height: 43px;
}
.flag-down {
    background: url('../img/notes/flag-down.png') no-repeat;
    width: 19px;
    height: 47px;
}
.beam {
    background: #231f20;
    width: 51px;
    height: 5px;
    z-index: 100;
}
.beam-1 {
    background: url('../img/notes/beam-1.png') no-repeat;
    background-size: 38px 5px;
    width: 38px;
    height: 5px;
}
.beam-2 {
    background: url('../img/notes/beam-2.png') no-repeat;
    width: 85px;
    height: 9px;
}
.ledger {
    background: #231f20;
    width: 38px;
    height: 2px;
    position: absolute;
    z-index: 10;
    left: 6px;
}
.ledger-red {
    background: #00b3e2;
}
.note-8 + .ledger,
.note-8-ledger + .ledger {
    left: 2px;
}
.line-0 {
    top: -14px;
}
.line-1 {
    top: -6px;
}
.line-15 {
    bottom: -6px;
}
.line-16 {
    bottom: -14px;
}
.note-1 {
    background: url('../img/notes/note-1.png') no-repeat;
    width: 30px;
    height: 18px;
}
.note-1-red {
    background: url('../img/notes/note-1-red.png') no-repeat;
    width: 30px;
    height: 18px;
}
.note-1-ledger {
    background: url('../img/notes/note-1-ledger.png') no-repeat;
    width: 38px;
    height: 18px;
}
.note-1-ledger-red {
    background: url('../img/notes/note-1-ledger-red.png') no-repeat !important;
    width: 38px;
    height: 18px;
}
.note-1.on-stave,
.note-1-red.on-stave,
.note-1-ledger.on-stave,
.note-1-ledger-red.on-stave {
    bottom: -5px;
}
.stave1 .note-1.on-stave {
    bottom: 24px;
}
.note-2 {
    background: url('../img/notes/note-2.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-2-red {
    background: url('../img/notes/note-2-red.png') no-repeat !important;
    width: 22px;
    height: 64px;
}
.note-2-ledger {
    background: url('../img/notes/note-2-ledger.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-2-ledger-red {
    background: url('../img/notes/note-2-ledger-red.png') no-repeat !important;
    width: 38px;
    height: 64px;
}
.note-2-down {
    background: url('../img/notes/note-2-down.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-2-down-red {
    background: url('../img/notes/note-2-down-red.png') no-repeat !important;
    width: 22px;
    height: 64px;
}
.note-34 {
    background: url('../img/notes/note-34.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-34-red {
    background: url('../img/notes/note-34-red.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-38 {
    background: url('../img/notes/note-38.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-38-red {
    background: url('../img/notes/note-38-red.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-38-ledger {
    background: url('../img/notes/note-38-ledger.png') no-repeat;
    width: 44px;
    height: 64px;
}
.note-38-ledger-red {
    background: url('../img/notes/note-38-ledger-red.png') no-repeat !important;
    width: 44px;
    height: 64px;
}
.note-38-down {
    background: url('../img/notes/note-38-down.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-38-down-red {
    background: url('../img/notes/note-38-down-red.png') no-repeat;
    width: 36px;
    height: 64px;
}
.note-4 {
    background: url('../img/notes/note-4.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-4-red {
    background: url('../img/notes/note-4-red.png') no-repeat !important;
    width: 22px;
    height: 64px;
}
.note-4-green {
    background: url('../img/notes/note-4-green.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-4-ledger {
    background: url('../img/notes/note-4-ledger.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-4-ledger-red {
    background: url('../img/notes/note-4-ledger-red.png') no-repeat !important;
    width: 38px;
    height: 64px;
}
.note-4-ledger-green {
    background: url('../img/notes/note-4-ledger-green.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-4-down {
    background: url('../img/notes/note-4-down.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-4-down-red {
    background: url('../img/notes/note-4-down-red.png') no-repeat !important;
    width: 22px;
    height: 64px;
}
.note-4-down-green {
    background: url('../img/notes/note-4-down-green.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-4-ledger-down {
    background: url('../img/notes/note-4-ledger-down.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-4-ledger-down-red {
    background: url('../img/notes/note-4-ledger-down-red.png') no-repeat !important;
    width: 38px;
    height: 64px;
}
.note-4-ledger-down-green {
    background: url('../img/notes/note-4-ledger-down-green.png') no-repeat;
    width: 38px;
    height: 64px;
}
.head-flat {
    background: url('../img/notes/head-flat.png') no-repeat;
    width: 40px;
    height: 40px;
}
.head-flat-red {
    background: url('../img/notes/head-flat-red.png') no-repeat;
    width: 40px;
    height: 40px;
}
.head-flat.on-stave {
    bottom: -10px;
}
.head-sharp {
    background: url('../img/notes/head-sharp.png') no-repeat;
    width: 43px;
    height: 44px;
}
.head-sharp-red {
    background: url('../img/notes/head-sharp-red.png') no-repeat;
    width: 43px;
    height: 44px;
}
.head-sharp.on-stave {
    bottom: -20px;
}
.note-4-flat {
    background: url('../img/notes/note-4-flat.png') no-repeat;
    width: 41px;
    height: 69px;
}
.note-4-flat-red {
    background: url('../img/notes/note-4-flat-red.png') no-repeat;
    width: 41px;
    height: 69px;
}
.note-4-flat.on-stave {
    bottom: -9px;
}
.note-4-flat-down {
    background: url('../img/notes/note-4-flat-down.png') no-repeat;
    width: 41px;
    height: 82px;
}
.note-4-flat-down-red {
    background: url('../img/notes/note-4-flat-down-red.png') no-repeat;
    width: 41px;
    height: 82px;
}
.note-4-flat-down.on-stave {
    bottom: -52px;
}
.note-8 {
    background: url('../img/notes/note-8.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-8-red {
    background: url('../img/notes/note-8-red.png') no-repeat !important;
    width: 38px;
    height: 64px;
}
.note-8-ledger {
    background: url('../img/notes/note-8-ledger.png') no-repeat;
    width: 46px;
    height: 64px;
}
.note-8-ledger-red {
    background: url('../img/notes/note-8-ledger-red.png') no-repeat !important;
    width: 46px;
    height: 64px;
}
.note-8-ledger-green {
    background: url('../img/notes/note-8-ledger-green.png') no-repeat;
    width: 46px;
    height: 64px;
}
.note-8-down {
    background: url('../img/notes/note-8-down.png') no-repeat;
    width: 22px;
    height: 64px;
}
.note-8-down-red {
    background: url('../img/notes/note-8-down-red.png') no-repeat !important;
    width: 22px;
    height: 64px;
}
.note-8-ledger-down {
    background: url('../img/notes/note-8-ledger-down.png') no-repeat;
    width: 38px;
    height: 64px;
}
.note-8-ledger-down-red {
    background: url('../img/notes/note-8-ledger-down-red.png') no-repeat !important;
    width: 38px;
    height: 64px;
}
.note-beam {
    background: url('../img/notes/note-beam.png') no-repeat;
    width: 71px;
    height: 64px;
}
.note-beam-ledger {
    background: url('../img/notes/note-beam-ledger.png') no-repeat;
    width: 87px;
    height: 64px;
}
.note-beam-16 {
    background: url('../img/1/1-3-black.png') no-repeat;
    width: 171px;
    height: 64px;
}
.pause-1 {
    background: url('../img/notes/pause-1.png') no-repeat;
    width: 38px;
    height: 8px;
}
.pause-2 {
    background: url('../img/notes/pause-2.png') no-repeat;
    width: 38px;
    height: 8px;
}
.pause-4 {
    background: url('../img/notes/pause-4.png') no-repeat;
    width: 17px;
    height: 50px;
}
.pause-8 {
    background: url('../img/notes/pause-8.png') no-repeat;
    width: 17px;
    height: 29px;
}
.pause-1.on-stave {
    bottom: 28px;
    cursor: auto;
}
.pause-2.on-stave {
    bottom: 19px;
    cursor: auto;
}
.pause-4.on-stave {
    cursor: auto;
}
.pause-8.on-stave {
    bottom: 4px;
    cursor: auto;
}

/* Otas */
.container-otas {
    width: 200px;
    position: absolute;
    right: 4%;
    top: 5%;
}
.container-otas > div {
    width: 86px;
    height: 120px;
    display: inline-block;
    vertical-align: top;
    margin-right: 14px;
}
.containment-ota {
    background: url('../img/transparent.png') repeat;
    width: 100%;
    margin-top: 9%;
    position: relative;
    z-index: 100;
    overflow: visible;
    cursor: none !important;
}
.target-ota {
    background: #fff;
    border: 5px solid #cfcfcf;
    min-width: 54px;
    height: 37px;
    text-align: center;
    display: inline-block;
    margin: 2%;
    padding: 0 8px;
    -webkit-border-radius: 24px;
       -moz-border-radius: 24px;
            border-radius: 24px;
    cursor: default;
}
.object-ota {
    cursor: pointer;
}
.color-1 {
    color: #38c800;
    border-color: #38c800;
}
.color-2 {
    color: #00b3e2;
    border-color: #00b3e2;
}
.color-3 {
    color: #e0c900;
    border-color: #e0c900;
}
.ota-1 {
    background: url('../img/ota-green.png') no-repeat right top;
    width: 70px;
    height: 88px;
    position: absolute;
    z-index: 10000;
    left: 0;
    top: 0;
    cursor: none;
}
.ota-2 {
    background: url('../img/ota-red.png') no-repeat right top;
    width: 70px;
    height: 88px;
    position: absolute;
    z-index: 10000;
    left: 0;
    top: 0;
    cursor: none;
}
.ota-3 {
    background: url('../img/ota-yellow.png') no-repeat right top;
    width: 70px;
    height: 88px;
    position: absolute;
    z-index: 10000;
    left: 0;
    top: 0;
    cursor: none;
}
#divider {
    border-top: 5px solid #cfcfcf;
    width: 90%;
    height: 2px;
    margin: 36px 5%;
}

/* Popup */
.popup {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    max-height: 640px;
    padding: 12px 24px 12px 12px;
    position: absolute !important;
    z-index: 1000;
    right: 72px;
    top: 6px;
    cursor: move;
}
.popup .close-button {
    color: #0091bc;
    text-align: center;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}
.popup .close-button::before {
    content: 'x';
}
.popup .close-button:hover,
.popup .close-button:focus {
    color: #00b3e2;
}
.popup li {
    white-space: nowrap;
    margin: 16px 0;
}
.popup p,
.popup table {
    margin: 16px;
}
.popup table td {
    padding: 8px;
}
.popup img {
    width: 100%;
    height: 100%;
    margin-top: 0px;
}
.popup-button {
    background: url('../img/popup-button.png') no-repeat;
    background-position: top;
    width: 56px;
    height: 40px;
    position: absolute;
    z-index: 100;
    right: 1%;
    top: 0px;
    cursor: pointer;
}
.popup-button:hover,
.popup-button:focus {
    background-position: bottom;
}
.popup.ui-draggable-dragging {
    z-index: 1000 !important;
}

/* Help */
.help {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    max-width: 52%;
    max-height: 640px;
    font-size: 16px;
    padding: 12px 24px 12px 12px;
    position: absolute !important;
    z-index: 999;
    right: 134px;
    top: 6px;
    cursor: move;
}
.help .close-button {
    color: #0091bc;
    text-align: center;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}
.help .close-button::before {
    content: 'x';
}
.help .close-button:hover,
.help .close-button:focus {
    color: #00b3e2;
}
.help li {
    white-space: nowrap;
    margin: 16px 0;
}
.help p,
.help table {
    margin: 16px 0 16px 16px;
}
.help table td p {
    margin: 16px 0 16px 24px;
}
.help table td {
    vertical-align: top;
}
.help td > img {
    width: auto;
    height: auto;
    padding: 12px 0;
}
.help-button {
    background: url('../img/help-button.png') no-repeat;
    background-position: top;
    width: 24px;
    height: 24px;
    position: absolute;
    z-index: 100;
    right: 10%;
    top: 12px;
    cursor: pointer;
}
.help-button:hover,
.help-button:focus {
    background-position: bottom;
}
.help.ui-draggable-dragging {
    z-index: 1000 !important;
}

/* Staff titles and captions */
.staff-titles {
    width: 892px;
    padding: 22px 0 4px 0;
    position: relative;
}
.staff-titles.sm {
    height: 26px;
}
.staff-titles div {
    display: inline-block;
    width: 50%;
    font-size: 16px;
}
.staff-titles div:first-of-type {
    text-align: left;
    padding-left: 54px;
}
.staff-titles div:last-of-type {
    text-align: right;
}

/* Staff */
.containment {
    width: 1014px;
    margin: -16px -61px 0 -61px;
    position: relative;
}
.containment > div,
.containment > table {
    margin-left: 61px;
    margin-right: 61px;
}
.staff-wrapper {
    position: relative;
}
.staff {
    position: relative;
}
.staff .space {
    width: 100%;
    height: 8px;
    position: relative;
}
.staff td {
    width: 48px;
    position: relative;
}
.staff tr:nth-of-type(odd) td {
    background: transparent;
    /* top: 50%; */
}
.staff tr:nth-of-type(odd) td::before {
    content: '';
    width: 48px;
    height: 0px;
    position: absolute;
    /* possible fix for rendering engine bug
    top: 50%;
    transform: translateY(-50%);
    */
}
.staff tr:nth-of-type(1)  td.white::before,
.staff tr:nth-of-type(2)  td.white::before,
.staff tr:nth-of-type(3)  td.white::before,
.staff tr:nth-of-type(15) td.white::before,
.staff tr:nth-of-type(16) td.white::before,
.staff tr:nth-of-type(17) td.white::before {
    border-top: 1px dashed transparent;
}
.staff td:first-of-type {
    width: 119px !important;
}
.staff td:first-of-type::before {
    width: 119px !important;
}
.staff tr td:last-of-type {
    width: 5px !important;
}
.staff tr:nth-of-type(odd) td:last-of-type::before {
    width: 5px !important;
}
.staff-wrapper .clef {
    position: absolute;
    left: 10px;
    top: 0;
}
.staff-wrapper .clef .treble {
    background: url('../img/notes/treble.png') no-repeat;    
    width: 47px;
    height: 120px;
    position: absolute;
    top: 6px;
}
.staff-wrapper .clef .bass {
    background: url('../img/notes/bass.png') no-repeat;    
    width: 47px;
    height: 53px;
    position: absolute;
    top: 37px;
}
.staff-wrapper .signatures {
    position: absolute;
    z-index: 2;
    left: 57px;
    top: 0;
}
.staff-wrapper .signatures > div {
    float: left;
    position: relative;
}
.staff-wrapper .key-signature {
    min-width: 12px;
    min-height: 64px;
}
.staff-wrapper .key-signature .accidental {
    float: left;
    position: relative;
}
.staff-wrapper .key-signature .accidental.sharp-fa {
    top: 14px;
}
.staff-wrapper .key-signature .accidental.sharp-do {
    top: 38px;
}
.staff-wrapper .key-signature .accidental.sharp-re {
    margin-left: 4px;
    top: 30px;
}
.staff-wrapper .key-signature .accidental.flat-si {
    margin-left: 4px;
    top: 37px;
}
.staff-wrapper .time-signature {
    margin-left: 4px;
    top: 37px;
}
.staff-wrapper .time-signature .count {
}
.staff-wrapper .time-signature .value {
    margin-top: 1px;
}
.number {
    background: url('../img/notes/number.png') no-repeat;
    background-size: 26px 155px;
    width: 26px;
    height: 31px;
}
.staff-wrapper .count .number:hover,
.staff-wrapper .count .number:focus,
.staff-wrapper .number.active {
    background: url('../img/notes/number-hover.png') no-repeat;
}
.staff-wrapper .number.Pareizi {
    background: url('../img/notes/number-Pareizi.png') no-repeat;
}
.staff-wrapper .number.Nepareizi {
    background: url('../img/notes/number-Nepareizi.png') no-repeat;
}
.number-0 {
    background-position: left 0% !important;
    border: 2px dashed #ea3f3f;
}
.number-2 {
    background-position: left 25% !important;
}
.number-3 {
    background-position: left 50% !important;
}
.number-4 {
    background-position: left 75% !important;
}
.staff-wrapper .barline {
    position: absolute;
    top: 36px;
}
.staff-wrapper .barline div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.staff-wrapper .barline.closing div {
    width: 5px;
}
.staff-wrapper .closing-left {
    position: absolute;
    left: 85px;
    top: 36px;
}
.staff-wrapper .closing-left div {
    background: #231f20;
    width: 5px;
    height: 65px;
}
.staff-wrapper .barline-left {
    position: absolute;
    left: 94px;
    top: 36px;
}
.staff-wrapper .barline-left div {
    background: #231f20;
    width: 1px;
    height: 65px;
}
.staff-wrapper .repeat {
    background: url('../img/notes/repeat.png') no-repeat;
    width: 7px;
    height: 22px;
}
.staff-wrapper .repeat-left {
    position: absolute;
    left: 100px;
    top: 57px;
}
.staff-wrapper .repeat-right {
    position: absolute;
    right: 10px;
    top: 57px;
}
.staff-wrapper .highlight {
    border: 2px solid #00b3e2;
    width: 64px;
    height: 97px;
    position: absolute;
    top: 20px;
}

/* Note */
.note {
    background: url('../img/notes/note.png') no-repeat;
    background-size: 96px 576px;
    width: 48px;
    height: 64px;
}
.staff .note:hover,
.staff .note:focus,
.staff .note.active {
    background: url('../img/notes/note-hover.png') no-repeat;
}
.staff .note.Pareizi {
    background: url('../img/notes/note-Pareizi.png') no-repeat;
}
.staff .note.Nepareizi {
    background: url('../img/notes/note-Nepareizi.png') no-repeat;
}
.duration-0 {
    background-position: left 0% !important;
}
.duration-16 {
    background-position: left 12.5% !important;
}
.duration-12 {
    background-position: left 25% !important;
}
.duration-8 {
    background-position: left 37.5% !important;
}
.duration-6 {
    background-position: left 50% !important;
}
.duration-4 {
    background-position: left 62.5% !important;
}
.duration-2 {
    background-position: left 75% !important;
}
.duration-1 {
    background-position: left 87.5% !important;
}
.duration-0.stem-down {
    background-position: right 0% !important;
}
.duration-16.stem-down {
    background-position: right 12.5% !important;
}
.duration-12.stem-down {
    background-position: right 25% !important;
}
.duration-8.stem-down {
    background-position: right 37.5% !important;
}
.duration-6.stem-down {
    background-position: right 50% !important;
}
.duration-4.stem-down {
    background-position: right 62.5% !important;
}
.duration-2.stem-down {
    background-position: right 75% !important;
}
.duration-1.stem-down {
    background-position: right 87.5% !important;
}
.staff .note {
    position: absolute;
    z-index: 2;
    left: 0;
    top: auto;
    bottom: -5px;
}
.staff .note.stem-down {
    top: -4px;
    bottom: auto;
}
.staff .note.offset-down,
.offset-down {
    margin: 48px 0 0 0;
}
.staff .note.offset-up,
.offset-up {
    margin: -48px 0 0 0;
}
.staff .note .ledger {
    background: #231f20;
    width: 35px;
    height: 2px;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 8px;
}
.staff .note.active .ledger {
    background: #00b3e2;
}
.staff .note.duration-16 .ledger {
    width: 44px;
}
.staff .note .ledger.plus-1 {
    bottom: 16px;
}
.staff .note .ledger.plus-2 {
    bottom: 24px;
}
.staff .note.upper {
    bottom: -6px;
}
.staff .note.upper .ledger.plus-1 {
    bottom: 0px;
}
.staff .note.upper .ledger.plus-2 {
    bottom: -8px;
}
.staff .note.stem-down .ledger {
    top: 8px;
}
.staff .note.stem-down .ledger.plus-1 {
    top: 16px;
}
.staff .note.stem-down .ledger.plus-2 {
    top: 24px;
}
.staff .note:hover .ledger,
.staff .note:focus .ledger {
    background: #00b3e2;
}
.staff .note.Pareizi .ledger {
    background: #38c800;
}
.staff .note.Nepareizi .ledger {
    background: #ea3f3f;
}
.ui-draggable-dragging .ledger {
    display: none;
}
                
/* Accidental */
.accidental {
    width: 16px;
    height: 44px;
}
.accidental div {
    background: url('../img/notes/accidental.png') no-repeat;
    background-size: 16px 220px;
    width: 16px;
    height: 44px;
}
.staff .note:hover .accidental div,
.staff .note:focus .accidental div,
.staff .note .accidental div.active,
.staff-wrapper .key-signature .accidental div.active {
    background: url('../img/notes/accidental-hover.png') no-repeat;
}
.staff .note.Pareizi .accidental div {
    background: url('../img/notes/accidental-Pareizi.png') no-repeat;
}
.staff .note.Nepareizi .accidental div {
    background: url('../img/notes/accidental-Nepareizi.png') no-repeat;
}
.accidental .sharp {
    background-position: left 25% !important;
}
.accidental .flat {
    background-position: left 50% !important;
}
.accidental .natural {
    background-position: left 75% !important;
}
.staff .note .accidental {
    position: absolute;
    z-index: 2;
    left: -11px;
    top: auto;
    bottom: -14px;
}
.staff .note.stem-down .accidental {
    position: absolute;
    z-index: 2;
    left: -11px;
    top: -14px;
    bottom: auto;
}
.staff .note .accidental .flat {
    margin-top: -9px;
}
.staff .note.ui-draggable-dragging .accidental div {
    display: none;
}
.ui-draggable-dragging {
    z-index: 100 !important;
}

/* Pause */
.pause {
    background: url('../img/notes/pause.png') no-repeat;
    background-size: 48px 384px;
    width: 48px;
    height: 64px;
}
.staff .pause:hover,
.staff .pause:focus {
    background: url('../img/notes/pause-hover.png') no-repeat;
}
.staff .pause.Pareizi {
    background: url('../img/notes/pause-Pareizi.png') no-repeat;
}
.staff .pause.Nepareizi {
    background: url('../img/notes/pause-Nepareizi.png') no-repeat;
}
.duration-1600 {
    background-position: left 0% !important;
}
.duration-800 {
    background-position: left 20% !important;
}
.duration-400 {
    background-position: left 40% !important;
}
.duration-200 {
    background-position: left 60% !important;
}
.duration-100 {
    background-position: left 80% !important;
}

/* contextmenu */
.contextmenu,
.contextmenu-help > div {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    position: absolute;
    z-index: 1000;
}
.contextmenu-help > div {
    max-width: 40px;
    position: relative;
    margin-left: 32px;
    margin-top: 10px;
}
.contextmenu-help {
    background: #fff url('../img/notes/contextmenu-help.png') no-repeat;
    width: 80px;
    position: relative;
    padding-bottom: 7px;
}
.contextmenu-help.line-1 {
    background: #fff url('../img/notes/contextmenu-help-1.png') no-repeat;
}
.contextmenu-help.line-1 > div {
    margin-top: 56px;
}
.contextmenu ul,
.contextmenu-help ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.contextmenu li {
    white-space: nowrap;
    line-height: normal;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
}
.contextmenu-help li {
    white-space: nowrap;
    line-height: normal;
    padding: 4px 8px;
    margin: 0;
}
.contextmenu li:hover,
.contextmenu li:focus {
    background-color: #00b3e2;
}
.contextmenu li .note,
.contextmenu-help li .note {
    background-size: 48px 288px;
    width: 24px;
    height: 32px;
}
.contextmenu li .pause,
.contextmenu-help li .pause {
    background-size: 24px 192px;
    width: 24px;
    height: 32px;
}
.contextmenu li .number {
    background-size: 20px 115px;
    width: 20px;
    height: 23px;
}

/* objects */
.containment .objects {
    width: 892px;
    min-height: 94px;
    text-align: center;
    padding: 24px 0 0 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 99;
}
.containment .objects > div {
    display: inline-block;
    vertical-align: bottom;
}
.objects .buttons {
    width: 50%;
    text-align: center;
    margin: 0 1%;
    position: relative;
}

/* captions */
.staff-wrapper .captions {
    width: 887px;
    min-height: 27px;
    position: relative;
    z-index: 0;
}
.captions.note-captions {
    height: 27px;
    z-index: 1;
}
.staff-wrapper .captions td {
    width: 192px;
    text-align: left;
    padding-left: 6px;
    position: relative;
}
.captions.note-captions td {
    width: 48px;
    text-align: left;
    padding-left: 14px;
    position: relative;
}
.staff-wrapper .captions td:first-of-type,
.captions.note-captions td:first-of-type {
    width: 119px !important;
    text-align: right;
    padding-right: 16px;
}

/* rhythm */
.staff-wrapper.staff-rhythm {
    padding-top: 36px;    
}
.rhythm {
    height: 65px;
}
.staff-rhythm .staff tr:nth-of-type(1)  td.white::before {
    border-top: 1px solid #231f20;
}
.staff-rhythm .staff .note {
    bottom: 24px;
}
.staff-rhythm .staff .note .accidental,
.staff-rhythm .staff .note .ledger {
    display: none;
}

/* boxes */
.box {
    margin: 0% 2%;
}
.box-1 {
    background: url('../img/box-1.png') no-repeat;
    width: 302px;
    height: 397px;
}
.box-2 {
    background: url('../img/box-2.png') no-repeat;
    width: 323px;
    height: 383px;
}
.box-3 {
    background: url('../img/box-3.png') no-repeat;
    width: 273px;
    height: 362px;
}
.box-4 {
    background: url('../img/box-4.png') no-repeat;
    width: 330px;
    height: 383px;
}
.box .note-captions {
    width: 100%;
}
.box .staff-wrapper {
    margin-top: 24px;
    margin-left: 72px;
}
.box .staff-wrapper .captions {
    width: 100%;
}
img#Spriditis {
    position: absolute;
    right: 8%;
    top: 20%;
}

input.after {
    margin-left: 12px;
}
.text-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px;
    position: relative;
}
.toggle-content-simple {
    width: 80%;
    text-align: center;
    position: absolute;
}
.toggle-content {
    background-color: #dedede;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
    position: absolute;
    z-index: 100;
}
.toggle-content div {
    padding: 4px 0;
}

/* Testing */
.zils {
    background: #0000ff;
}
.zals {
    background: #00ff00;
}
.sarkans {
    background: #ff0000;
}