.fretboard {
	position:relative;
	width:738px;
	height:84px;
	background:url('../img/fretboard.png');
	font-family:monospace;
	margin:auto;
    clear:both;
    margin-bottom:1em;
}

.fretboard div {
	position:absolute;
	height:13px;
	background-color:#0000ff;
	font-size:10px;
	line-height:12px;
	color:#ffffff;
	padding-left:2px;
	padding-right:2px;
}

.fretboard div.red {
	background-color:#ff0000;
}

.red div {
	background-color:#ff0000;
}

.fretboard .s1 {
	top:0px;
}
.fretboard .s2 {
	top:14px;
}
.fretboard .s3 {
	top:28px;
}
.fretboard .s4 {
	top:42px;
}
.fretboard .s5 {
	top:56px;
}
.fretboard .s6 {
	top:70px;
}

body.righty .fretboard .f0 {
	left:0px;
}

body.righty .fretboard .f1 {
	left:32px;
}

body.righty .fretboard .f2 {
	left:86px;
}

body.righty .fretboard .f3 {
	left:140px;
}

body.righty .fretboard .f4 {
	left:188px;
}

body.righty .fretboard .f5 {
	left:234px;
}

body.righty .fretboard .f6 {
	left:278px;
}

body.righty .fretboard .f7 {
left:319px;
}

body.righty .fretboard .f8 {
left:358px;
}

body.righty .fretboard .f9 {
left:394px;
}

body.righty .fretboard .f10 {
left:430px;
}

body.righty .fretboard .f11 {
left:462px;
}

body.righty .fretboard .f12 {
left:493px;
}

body.righty .fretboard .f13 {
left:523px;
}

body.righty .fretboard .f14 {
left:549px;
}

body.righty .fretboard .f15 {
left:575px;
}

body.righty .fretboard .f16 {
left:600px;
}

body.righty .fretboard .f17 {
left:623px;
}

body.righty .fretboard .f18 {
left:646px;
}

body.righty .fretboard .f19 {
left:665px;
}

body.righty .fretboard .f20 {
left:686px;
}

body.righty .fretboard .f21 {
left:703px;
}

body.lefty .fretboard {
    background-position:0px -84px;
}

body.lefty .fretboard .f0 {
right:0px;
}

body.lefty .fretboard .f1 {
right:32px;
}

body.lefty .fretboard .f2 {
right:86px;
}

body.lefty .fretboard .f3 {
right:140px;
}

body.lefty .fretboard .f4 {
right:188px;
}

body.lefty .fretboard .f5 {
right:234px;
}

body.lefty .fretboard .f6 {
right:278px;
}

body.lefty .fretboard .f7 {
right:319px;
}

body.lefty .fretboard .f8 {
right:358px;
}

body.lefty .fretboard .f9 {
right:394px;
}

body.lefty .fretboard .f10 {
right:430px;
}

body.lefty .fretboard .f11 {
right:462px;
}

body.lefty .fretboard .f12 {
right:493px;
}

body.lefty .fretboard .f13 {
right:523px;
}

body.lefty .fretboard .f14 {
right:549px;
}

body.lefty .fretboard .f15 {
right:575px;
}

body.lefty .fretboard .f16 {
right:600px;
}

body.lefty .fretboard .f17 {
right:623px;
}

body.lefty .fretboard .f18 {
right:646px;
}

body.lefty .fretboard .f19 {
right:665px;
}

body.lefty .fretboard .f20 {
right:686px;
}

body.lefty .fretboard .f21 {
right:703px;
}