/*!
* Chord Transposer Styles
* vanilla JS implementation
*/

.transpose-wrapper {
	display: none;
	clear: both;
	width: 100%;
	margin-left: .5em;
}

.transpose-wrapper.active {
	display: block;
}

.transpose-keys {
	margin: 10px 0;
	overflow: auto;
	font: normal 11px sans-serif;
}

.transpose-keys a {
	display: block;
	float: left;
	width: 2.25em;
	text-align: center;
	margin: 0 .25em .25em 0;
	color: #333;
	background: #eee;
	text-decoration: none;
	padding: .4em 0;
	border: solid 1px transparent;
	outline: none;
}

.transpose-keys a.selected {
	background: #2159D6;
	color: #FFF;
}

.note1 {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url('../Images/note1.gif') 0 0 no-repeat no-repeat;
}

.note2 {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url('../Images/note2.gif') 0 0 no-repeat no-repeat;
}