.KCN_dgrm_wrap{
background: none repeat scroll 0% 0% #FFF;
height: 115px;
width: 168px;
padding: 3px;
border-radius: 3px;
border: 1px solid #c1c1c1;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
font-size: 13px;
line-height: 1.4em;
}
.KCN_dgrm{
    margin: 0px;
    width:134px;
    height:97px;
    background:url(../img/dgrm.png) -7px -2px no-repeat;
    position:relative;
}
.KCN_dgrm>div{
    position:absolute;
}
.KCN_dgrm .fingering{
    width:16px;
    height:16px;
    background-image: url("../img/dgrm.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: #636363;
    border-radius: 50%;
}
.KCN_dgrm .finger-0.barred{display:none;}
.KCN_dgrm .finger-0.barred.fret-x{display:block;}
.KCN_dgrm .finger-1{
    background-position: -0px -113px;
}.KCN_dgrm .finger-2{
    background-position: -16px -113px;
}.KCN_dgrm .finger-3{
    background-position: -32px -113px;
}.KCN_dgrm .finger-4{
    background-position: -48px -113px;
}.KCN_dgrm .finger-5{
    background-position: -64px -113px;
}
.KCN_dgrm .fret-x{
    background-color: transparent;
border-radius: 0px;
background-position: -104px -115px;
left: 138px;
}
.KCN_dgrm .fret-0{
background: url("../img/dgrm.png") no-repeat scroll -94px -114px transparent;
width: 8px;
height: 11px;
left: 138px;
}
.KCN_dgrm .fret-1{
    left:19px
}.KCN_dgrm .fret-2{
    left:42px
}.KCN_dgrm .fret-3{
    left:65px
}.KCN_dgrm .fret-4{
    left:88px
}.KCN_dgrm .fret-5{
    left:111px
}
.KCN_dgrm .string-e{
    top: 2px
}.KCN_dgrm .string-B{
    top: 18px
}.KCN_dgrm .string-G{
    top: 32px
}.KCN_dgrm .string-D{
    top: 48px
}.KCN_dgrm .string-A{
    top: 64px
}.KCN_dgrm .string-E{
    top: 79px
}

.KCN_barre{background:#a1a1a1; top: 0px; width: 7px;}
.KCN_dgrm .barre_rel_fret-1{left:24px}
.KCN_dgrm .barre_rel_fret-2{left:47px}
.KCN_dgrm .barre_rel_fret-3{left: 70px;}
.KCN_dgrm .barre_rel_fret-4{left:93px}
.KCN_dgrm .barre_rel_fret-5{left:115px}
.barre_strings-1{height: 19px}
.barre_strings-2{height: 34px}
.barre_strings-3{height: 49px}
.barre_strings-4{height: 65px}
.barre_strings-5{height: 82px}
.barre_strings-6{height:95px}

.start_fret_num{
top: 95px;
left: 5px;
font-size: 13px;
font-family: sans-serif;
}
.has_barre.start_fret_num{
margin-left: -5px;
}
.KCN_diagram_wrap{
display: inline-block;
}
.KCN_diagram_popup{
width:100%;
overflow: auto;
white-space: nowrap;
}
.KCNvariation{
display: none;
}
.KCN_variation_btn{
height: 116px;
font-size: 13px;
padding: 4px;
line-height: 1em;
text-transform: capitalize;
display: inline-block;
vertical-align: top;
}