.find {background-color:GreenYellow;} /* #ADFF2F */
.avoid {background-color:Gray; color:white;} /* #808080 */ 
.okay {background-color:Khaki;} /* Khaki;#F0E68C */

.sprite {background-image:url(/media/images/keysig.png); display:inline-block; height:41px; margin:1px;}
/*staves*/
.x0 {background-position: -1183px 0px; width:14px;}
.x1 {background-position: -1183px 0px; width:14px;}
.x2 {background-position: -1183px 0px; width:14px;}
.x3 {background-position: -1183px 0px; width:14px;}
.x4 {background-position: -1197px 0px; width:15px;}
.x5 {background-position: -1197px 0px; width:15px;}
.x6 {background-position: -1213px 0px; width:19px;}
.x7 {background-position: -1213px 0px; width:19px;}
/*time sigs*/
.x8 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x9 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x10 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x11 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x12 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x13 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x14 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x15 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x16 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}

.x17 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x18 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
.x19 {background-image:url(/media/images/bg/foo.gif); height: 20px;width:18px;}
/*key sig*/
.x20 {background-position: -0px 0px; width:40px;}
.x21 {background-position: -46px 0px; width:40px;}
.x22 {background-position: -92px 0px; width:33px;}
.x23 {background-position: -130px 0px; width:30px;}
.x24 {background-position: -165px 0px; width:21px;}
.x25 {background-position: -190px 0px; width:19px;}
.x26 {background-position: -212px 0px; width:18px;}
.x27 {background-position: -240px 0px; width:20px;}
.x28 {background-position: -272px 0px; width:22px;}
.x29 {background-position: -298px 0px; width:23px;}
.x30 {background-position: -324px 0px; width:30px;}
.x31 {background-position: -358px 0px; width:32px;}
.x32 {background-position: -394px 0px; width:38px;}
.x33 {background-position: -438px 0px; width:42px;}
.x34 {background-position: -485px 0px; width:46px;}
/*rhythmic values*/
.x35 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x36 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x37 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x38 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x39 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x40 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x41 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x42 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x43 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x44 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x45 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x46 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x47 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x48 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x49 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x50 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x51 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
.x52 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:25px;}
/*rhythmic patterns*/
.x53 {background-position: -540px 0px; width:35px;}
.x54 {background-position: -580px 0px; width:62px;}
.x55 {background-position: -640px 0px; width:54px;}
.x56 {background-position: -692px 0px; width:50px;}
.x57 {background-position: -746px 0px; width:52px;}
.x58 {background-position: -800px 0px; width:40px;}
.x59 {background-position: -838px 0px; width:38px;}
.x60 {background-position: -876px 0px; width:54px;}
.x61 {background-position: -934px 0px; width:50px;}
.x62 {background-position: -986px 0px; width:50px;}
.x63 {background-position: -1042px 0px; width:72px;}
.x64 {background-position: -1114px 0px; width:68px;}
/*melodic values*/
.x65 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x66 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x67 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x68 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x69 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x70 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x71 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x72 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x73 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x74 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x75 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x76 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x77 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x78 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x79 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x80 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x81 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}
.x82 {background-image:url(/media/images/bg/foo.gif); height: 40px;width:20px;}