* { 
	margin:0px; 
	padding:0px; 
	list-style:none; 
} 

:focus { 
	outline:none !important; 
}

a { 
	color:indigo; 
	text-decoration:none; 
} 

a:hover { 
	text-decoration:underline; 
}

#piano-wrapper {
	text-align: center;
}

/* Tuts */ 
ul#piano { 
	display:inline-block; 
	width:auto; 
	height:240px; 
	border-top:2px solid #222; 
	margin: 0 auto auto;
} 

ul#piano li { 
	list-style:none; 
	float:left; 
	display:inline; 
	/*background:#aaa; */
	width:40px; 
	position:relative; 
} 

ul#piano li a,ul#piano li div.anchor { 
	display:block; 
	height:180px; 
	background:#fff; 
	background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); 
	background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); 
	background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); 
	background:-o-linear-gradient(-30deg,#f5f5f5,#fff); 
	background:linear-gradient(-30deg,#f5f5f5,#fff); 
	border:1px solid #ccc; 
	-webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
	-moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
	box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 
	-webkit-border-radius:0 0 3px 3px; 
	-moz-border-radius:0 0 3px 3px; 
	border-radius:0 0 3px 3px; 
} 

ul#piano li a:active,ul#piano li div.anchor:active { 
	-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); 
	-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); 
	box-shadow:0 2px 2px rgba(0,0,0,0.4); 
	position:relative; 
	top:2px; 
	height:176px; 
	background: #ADD8E6;
} 

ul#piano li a:active:before,ul#piano li div.anchor:active:before { 
	content:""; 
	width:0px; 
	height:0px; 
	border-width:180px 5px 0px; 
	border-style:solid; 
	border-color:transparent transparent transparent rgba(0,0,0,0.1); 
	position:absolute; 
	left:0px; 
	top:0px; 
} 

ul#piano li a:active:after,ul#piano li div.anchor:active:after { 
	content:""; 
	width:0px; 
	height:0px; 
	border-width:180px 5px 0px; 
	border-style:solid; 
	border-color:transparent rgba(0,0,0,0.1) transparent transparent; 
	position:absolute; 
	right:0px; 
	top:0px; 
} 

/* Black Tuts */ 
ul#piano li span { 
	position:absolute; 
	top:0px; 
	left:-12px; 
	width:20px; 
	height:100px; 
	background:#333; 
	background:-webkit-linear-gradient(-20deg,#333,#000,#333); 
	background:-moz-linear-gradient(-20deg,#333,#000,#333); 
	background:-ms-linear-gradient(-20deg,#333,#000,#333); 
	background:-o-linear-gradient(-20deg,#333,#000,#333); 
	background:linear-gradient(-20deg,#333,#000,#333); 
	z-index:10; 
	border-width:1px 2px 7px; 
	border-style:solid; 
	border-color:#666 #222 #111 #555; 
	-webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
	-moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
	box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 
	-webkit-border-radius:0 0 2px 2px; 
	-moz-border-radius:0 0 2px 2px; 
	border-radius:0 0 2px 2px; 
} 

ul#piano li span:active { 
	border-bottom-width:2px; 
	height:103px; 
	-webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
	-moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
	box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 
	background: #4682B4;
}
span.marca {
	background:#633 !important;
	background:-webkit-linear-gradient(-20deg,#b33,#622,#333) !important; 
	background:-moz-linear-gradient(-20deg,#b33,#622,#333) !important; 
	background:-ms-linear-gradient(-20deg,#b33,#622,#333) !important; 
	background:-o-linear-gradient(-20deg,#b33,#622,#333) !important; 
	background:linear-gradient(-20deg,#b33,#622,#333) !important; 
}
div.anchor.marca {
	background:#fcc !important; 
	background:-webkit-linear-gradient(-30deg,#f66,#fee) !important; 
	background:-moz-linear-gradient(-30deg,#f66,#fee) !important; 
	background:-ms-linear-gradient(-30deg,#f66,#fee) !important; 
	background:-o-linear-gradient(-30deg,#f66,#fee) !important; 
	background:linear-gradient(-30deg,#f66,#fee) !important; 
}

/* Otros */

ul#piano li div.nota {
	padding-top: 5px;
	text-align: center;
	font-family: Arial;
	color: #ccc;
} 

.clear { 
	clear:both; 
} 


/* Animation */ 
/*@-webkit-keyframes taufik{ 
	from{opacity:0;} 
	to{opacity:1;} 
} 
@-moz-keyframes taufik{ 
	from{opacity:0;} 
	to{opacity:1;} 
} 
@keyframes taufik{ 
	from{opacity:0;} 
	to{opacity:1;} 
} */