#stringLowE:hover, #stringA:hover, #stringD:hover, #stringG:hover, #stringB:hover, #stringHighE:hover {
    animation:vibrate 0.1s linear 0s infinite;
    -moz-animation: vibrate 0.1s linear 0s infinite;
    /* Firefox */
    -webkit-animation: vibrate 0.1s linear 0s infinite;
    /* Safari and Chrome */
    -o-animation: vibrate 0.1s linear 0s infinite;
    /* Opera */
}

.string_master{
    position: relative;
    max-width: 100%;
    overflow: auto;
    overflow-y: hidden;
}

.string_master.guitar{
	height: 250px;
}

.string_master.bass{
	height: 200px;
}

.string_msg{
    color: black;
    font-size: 18px;
    padding: 10px;
    text-align: center; 
    position: fixed;
    width: 100%;
    height:50px;
}

.string_bg{
	position: absolute;
    top:10px;
/*	overflow: hidden;*/
}

.string_bg.guitar{
	background		: #FFF;
	border-top		: #e8eff0 1px solid;
	border-bottom	: #e8eff0 1px solid;
	/*background: #251512;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7D2C0D), color-stop(1, #251512));
	background-image: -moz-linear-gradient(top,  #7D2C0D 0%, #251512 100%);
	background-image: -o-linear-gradient(top,  #7D2C0D 0%, #251512 100%);;
	background-repeat: repeat-x;*/
}

.string_bg.bass{
	background: #2c282d; /* Old browsers */
	background: -moz-linear-gradient(top,  #2c282d 0%, #666666 16%, #848484 32%, #565656 66%, #2d2d2d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c282d), color-stop(16%,#666666), color-stop(32%,#848484), color-stop(66%,#565656), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2c282d 0%,#666666 16%,#848484 32%,#565656 66%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2c282d 0%,#666666 16%,#848484 32%,#565656 66%,#2d2d2d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2c282d 0%,#666666 16%,#848484 32%,#565656 66%,#2d2d2d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2c282d 0%,#666666 16%,#848484 32%,#565656 66%,#2d2d2d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c282d', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
}


.round{
	display: block;
	width: 20px;
	height: 20px;
    margin: auto;

	border-radius: 10px;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #CCC 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCC), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #CCC 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #CCC 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #CCC 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #CCC 0%,#e5e5e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCC', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

#sillet{
	float: left;
}
.string_bg.guitar .sillet{
	background-color: #333;
}

.string_bg.bass .sillet{
	background-color: #333;
}

.fret{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-right: solid 3px #C9C9C9;
	float: left;
    position: relative;
    text-align: center;
}

.fretName{
    position: absolute;
    bottom: -40px;
    width:100%;
    height:30px;
    display : inline-block;
    margin-left : -14px;
}

.fretLabel{
    
    width:30px;
    height:30px;
    border-radius : 50%;
    background-color : #CCC;
    color:rgb(69, 69, 69);
    font-size: 11px;
    font-weight: bold;
    padding-top : 7px;
}


.string {
	position: absolute;
	margin-top: -4px; 

	background: #919191; /* Old browsers */
	background: -moz-linear-gradient(top,  #919191 0%, #c6c6c6 35%, #4f4f4f 100%, #1c1c1c 100%, #131313 100%, #1c1c1c 100%, #2b2b2b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#919191), color-stop(35%,#c6c6c6), color-stop(100%,#4f4f4f), color-stop(100%,#1c1c1c), color-stop(100%,#131313), color-stop(100%,#1c1c1c), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #919191 0%,#c6c6c6 35%,#4f4f4f 100%,#1c1c1c 100%,#131313 100%,#1c1c1c 100%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #919191 0%,#c6c6c6 35%,#4f4f4f 100%,#1c1c1c 100%,#131313 100%,#1c1c1c 100%,#2b2b2b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #919191 0%,#c6c6c6 35%,#4f4f4f 100%,#1c1c1c 100%,#131313 100%,#1c1c1c 100%,#2b2b2b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #919191 0%,#c6c6c6 35%,#4f4f4f 100%,#1c1c1c 100%,#131313 100%,#1c1c1c 100%,#2b2b2b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */

	box-shadow: 0px 1px 5px #222;
	-webkit-box-shadow: 0px 1px 5px #222;
	-moz-box-shadow: 0px 1px 5px #222;
	
	width : 100%;
}

.string-1{
	height: 2px;
	top: 10px;
}

.string-2{
	height: 3px;
	top: 40px;
}
.string-3{
	height: 4px;
	top: 70px;
}
.string-4{
	height: 5px;
	top: 100px;
}
.string-5{
	height: 6px;
	top: 130px;
}
.string-6{
	height: 7px;
	top: 160px;
}

.string.active{
    animation:vibrate 0.1s linear 0s 10;
    -moz-animation: vibrate 0.1s linear 0s 10;
    /* Firefox */
    -webkit-animation: vibrate 0.1s linear 0s 10;
    /* Safari and Chrome */
    -o-animation: vibrate 0.1s linear 0s 10;
    /* Opera */
}


.notesContent{
	position: absolute;
	overflow: visible;
    top:10px;
    z-index:2;
}

.string_master .note{ 
	position: absolute;
	width:30px;
	height:30px;
}

.string_master .note .name {
  display			: none;
  max-width			: 30px;
  height			: 30px;
  border-radius		: 50%;
  background-color	: #A7C622; 
  font-weight		: 700;
  line-height		: 13px;
  text-align		: center;
  margin			: auto;
  color				: #FFF;
  padding-top		: 8px ;
  font-size			: 11px;
  white-space		: nowrap;
  font-weight		: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}



@keyframes vibrate {
    0% {
        margin-top: -4px;
    }
    25% {
        margin-top: -6px;
    }
    50% {
        margin-top: -4px;
    }
    75% {
        margin-top: -2px;
    }
    100% {
        margin-top: -4px;
    }
}
@-moz-keyframes vibrate
/* Firefox */
 {
    0% {
        margin-top: -4px;
    }
    25% {
        margin-top: -6px;
    }
    50% {
        margin-top: -4px;
    }
    75% {
        margin-top: -2px;
    }
    100% {
        margin-top: -4px;
    }
}
@-webkit-keyframes vibrate
/* Safari and Chrome */
 {
    0% {
        margin-top: -4px;
    }
    25% {
        margin-top: -6px;
    }
    50% {
        margin-top: -4px;
    }
    75% {
        margin-top: -2px;
    }
    100% {
        margin-top: -4px;
    }
}
@-o-keyframes vibrate
/* Opera */
 {
    0% {
        margin-top: -4px;
    }
    25% {
        margin-top: -6px;
    }
    50% {
        margin-top: -4px;
    }
    75% {
        margin-top: -2px;
    }
    100% {
        margin-top: -4px;
    }
}