.piano_master {
    height:280px;
    position: relative;
    max-width: 100%;
    overflow: auto;
    overflow-y: hidden;
}

.piano_master .piano_grid{
	height:100%;
	cursor: pointer;
	background-color:rgba(41,41,41,1.00);
}

.piano_master .octaves{
  height: 100%;
  position: absolute;
  top: 0px;
  max-height: 400px;
}

.piano_master .octaves li {
	list-style: none;
	-moz-border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
}

.piano_master .note{
	position: absolute;	
}

.piano_master .white{
	width:58px;
	background-color:rgb(255, 252, 248);
	top: 1px;	
    bottom: 0;
    margin-bottom: 10px;	
	-moz-box-shadow: inset 0px -2px 10px 0px #929292;
	-webkit-box-shadow: inset 0px -2px 10px 0px #929292;
	-o-box-shadow: inset 0px -2px 10px 0px #929292;
	box-shadow: inset 0px -2px 10px 0px #929292;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#929292, Direction=90, Strength=10);

}

.piano_master .white:active{
	background: skyblue;
    border: #292929 solid 3px;
    border-top: none;
/*	width:52px;*/
}

.piano_master .black{
	width:42px;
	background-color:#232323;
	height: 65%;
	z-index: 2;
	-moz-box-shadow: 0px 3px 3px 0px #000000;
	-webkit-box-shadow:0px 3px 3px 0px #000000;
	-o-box-shadow:0px 3px 3px 0px #000000;
	box-shadow: 0px 3px 3px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=5);	
}


.piano_master .black:active{
    background: hsl(197, 100%, 29%);
    border: #023D54 solid 3px;
    border-top: none;
    box-shadow: none;
/*	width:34px;*/
}
  

.piano_master .grey{
	background-color: #ccc;
}

.piano_master .note .name{	
	display: none;
  position: absolute;
  bottom: 0px;
  text-align: center;
  width: 100%;
}

.piano_master .note.black .name{	
	color: #fff;
}
.piano_master .note.white .name{	
	color: #000;
}