#transpose-keyboard {
		max-width:720px;
		height:230px;
		margin:10px auto;
		padding:0;
		overflow:hidden;
		border-top:1px solid #3A3D42;
	
		background:#757D8A;
		background-image:-moz-linear-gradient(#9E9DA7, #454f5d);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d));
	
		box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
		-moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
		-webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
	}

	#transpose-keyboard li {
		text-align:center;
		margin:.5em .1em .25em;
		list-style:none;
	}
	
	#transpose-keyboard li:first-child {
		margin-top:.4em;
	}
	
	#transpose-keyboard button,
	#transpose-keyboard button.abc:active {
		color:#3A3D42;
		
		text-decoration:none;
		text-align:center;
		text-shadow:0 1px 1px white;
		border:0;
		border-top:1px solid rgba(255,255,255,.45);		
		
		background:#ECEDEF;
		background-image:-moz-linear-gradient(#EEEEF0, #D3D3D9);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#EEEEF0), to(#D3D3D9));
		
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		
		box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
	}
	
	#transpose-keyboard button {
		display:inline-block;
		width:9.4%;
		margin:0 .25%;
		padding:.02em 0 .03em;
		color:black;
		font-size:1.1em;
		font-family:Helvetica, Arial, sans-serif;
	}
	
/*
 * Styles for the Selection keys
 */

	.chords {
		border:1px solid black;
		font-family:tahoma,sans-serif;
		font-size:.9em;
		
		background-color:#999999;
		color:white;
		width: 60px; 
		height:40px;
	}
	
	.symbols {
		border:1px solid black;
		font-family:tahoma,sans-serif;
		font-size:.9em;
		background-color:#999999;
		color:white;
		width: 60px; 
		height:30px;
	}
	
	
	#transpose-keyboard button:active, 
	#transpose-keyboard button.key:active,
	#transpose-keyboard button.abc:active,
	#transpose-keyboard button.space:active {
		background-image:-moz-linear-gradient(#B3B5BC, #83858C);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#B3B5BC), to(#83858C));
	}
	
	#transpose-keyboard button.abc {
		background:#ECEDEF;
		background-image:-moz-linear-gradient(#EEEEF0, #D3D3D9);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#EEEEF0), to(#D3D3D9));
		
		color:black;
		width: 131px; 
		height:40px;
		display:inline-block;
		margin:0 .25%;
		padding:.02em 0 .03em;

	}

	
	#transpose-keyboard button.space,
	#transpose-keyboard button.return,
	#transpose-keyboard button.numbersL,
	#transpose-keyboard button.numbersR,
	#transpose-keyboard button.international {
		font-size:.9em;
		padding:.25em 0;
		height:40px;
	}
	
	#transpose-keyboard button.shiftL,
	#transpose-keyboard button.shiftR,
	#transpose-keyboard button.international,
	#transpose-keyboard button.backspace {
		font-family:'keyboard', Helvetica, sans-serif;
		
	}
	
	#transpose-keyboard button.shiftL,
	#transpose-keyboard button.shiftR,
	#transpose-keyboard button.backspace {
		background-image:-moz-linear-gradient(#EEEEF0, #D3D3D9);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#EEEEF0), to(#D3D3D9));
	}
		
	#transpose-keyboard button.shiftL,
	#transpose-keyboard button.shiftR, {
		width:12%;

	}
	
	#transpose-keyboard button.backspace {
		width:9.4%; 
		height:40px;

	}
	
	#transpose-keyboard button.numbersL, #transpose-keyboard button.numbersR  {
		width:15%;
		margin-right:1.4%;

	}
	
	#transpose-keyboard button.international {
		width:8.2%;
		float:left;
	}
	
	#transpose-keyboard button.space {
		width:46%;
		color:#525c69;
		
		background-image:-moz-linear-gradient(#EEEEF0, #D3D3D9);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#EEEEF0), to(#D3D3D9));
	}
	
	#transpose-keyboard button.return {
		width:18.9%;
	}

hr {
	border: none;
	/* top    */ border-top: 1px solid #5E5E5F;
	/* middle */ background-color: #929292; color: #5E5E5F;
	height: 1px;
	*height: 2px; /* IE6+7 need the total height */
	}

/*
 * Styles for the narrow keyboard
 */
 
@media screen and (max-width: 768px) {
	#transpose-keyboard {
		max-width:300px;	
	}
	
	#transpose-keyboard li {
		margin-top:1em;
	}
	
	#transpose-keyboard li:first-child {
		margin-top:.7em;
	}
	
		#transpose-keyboard button {
			width:8.25%;
			padding:.16em 0;
		}
		
		#transpose-keyboard button.space,
		#transpose-keyboard button.return,
		#transpose-keyboard button.numbers,
		#chordtunes-keyboard button.international {
			padding:.4em 0;
		}
		
		#transpose-keyboard button.backspace {
			width: 60px; 
			height:40px;
			padding-left:0;
		}
		
		#transpose-keyboard button.numbers {
			width:11%;	
		}
		
		#transpose-keyboard button.international {
			width:11%;
			padding:.38em 0;
		}
		
		#transpose-keyboard button.space {
			width:48%;
		}
		
		#chordtunes-keyboard button.return {
			width:24%;
		}
}