body, html {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: Arial;
}

div.fretboard {
    width: 100%;
    height: 27.8vw;
    background-image: url("../img/fretboard.gif");
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

div.fretboard canvas {
    position: absolute;
    visibility: visible;
    width: 4vw;
    height: 4vw;
}

div.fretboard canvas:hover {
    box-shadow: 0px 0px 5px 0px rgba(255,173,65,1),-2px 0px 5px 2px rgba(255,173,65,1),2px 0px 5px 2px rgba(255,173,65,1);
    background-color: #ffad41;
    border-radius: 100px;
}

button {
    bottom: 0;
    position: absolute;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    width: 40px;
    height: 20px;
    line-height: 10px;
    cursor: pointer;

    border: 1px solid #ffad41;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: arial, helvetica, sans-serif;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #FFF;
    background-color: #ffc579;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
    background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
    background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
    background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
    background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
    background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
}

button:hover {
    border:1px solid #ff9913;
    background-color: #ffaf46; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
    background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
    background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
    background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
    background-image: -o-linear-gradient(top, #ffaf46, #e78404);
    background-image: linear-gradient(to bottom, #ffaf46, #e78404);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffaf46, endColorstr=#e78404);
}

button#prev {
    left: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

button#next {
    left: 41px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

button#zoom {
    top: 28vw;
    position: absolute;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    width: 81px;
    height: 20px;
    line-height: 10px;
    cursor: pointer;
    border: 1px solid #5fad41;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: arial, helvetica, sans-serif;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #FFF;
    background-color: #5fc579;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5fc579), to(#0b9d23));
    background-image: -webkit-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -moz-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -ms-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -o-linear-gradient(top, #5fc579, #0b9d23);
    background-image: linear-gradient(to bottom, #5fc579, #0b9d23);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5fc579, endColorstr=#0b9d23);
}

button#zobraznoty {
    top: 28vw;
    left: 82px;
    position: absolute;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    width: 81px;
    height: 20px;
    line-height: 10px;
    cursor: pointer;
    border: 1px solid #5fad41;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: arial, helvetica, sans-serif;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #FFF;
    background-color: #5fc579;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5fc579), to(#0b9d23));
    background-image: -webkit-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -moz-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -ms-linear-gradient(top, #5fc579, #0b9d23);
    background-image: -o-linear-gradient(top, #5fc579, #0b9d23);
    background-image: linear-gradient(to bottom, #5fc579, #0b9d23);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5fc579, endColorstr=#0b9d23);
}

button#zobraznoty:hover {
    border:1px solid #5f9913;
}


span#nazov {
    position: absolute;
    left: 85px;
    font-size: 16px;
    top: calc(27.8vw - 20px);
}