html, body { border: 0px; padding: 0px; margin: 0px; overflow: hidden; height: 100%; }

#background { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-image: url('../images/background.jpg'); background-position: center center; background-repeat: repeat-y; background-color: #DADEE1; }

#key_handler { position: absolute; top: 100px; left: 50%; width: 60px; margin-left: 60px; z-index: 0; }

#jMusician { height: 100%; width: 780px; overflow: auto; position: absolute; top: 0px; left: 50%; margin-left: -390px; background-color: #ffffff; z-index: 3; }
#sheet { position: relative; width: 100%; margin-top: 80px; margin-bottom: 100px; }
#sheet tr, #sheet td { height: 100%; }

.clef { height: 100%; width: 40px; }
.clef_g { background-image: url('../images/parts/clef-g.jpg'); }
.clef_c { background-image: url('../images/parts/clef-c.jpg'); }
.clef_f { background-image: url('../images/parts/clef-f.jpg'); }

.title { position: absolute; top: 10px; left: 0px; height: 42px; width: 100%; background-color: #ffffff; font-family: Arial; font-size: 24px; font-weight: bold; text-align: center; }
.subtitle { position: absolute; top: 45px; left: 8px; height: 42px; width: 50%; background-color: #ffffff; font-family: Arial; font-size: 11px; text-align: left; }
.composer { position: absolute; top: 45px; right: 8px; height: 42px; width: 50%; background-color: #ffffff; font-family: Arial; font-size: 11px; text-align: right; }

.page { position: relative; background-image: url('../images/parts/staff.jpg'); margin-right: 10px; }
.start { height: 72px; width: 1px; overflow: hidden; float: left; }
.end { clear: both; }

.cursor { position: absolute; top: 0px; left: -3px; height: 7px; width: 7px; }
.active { background-image: url('../images/parts/cursor.gif'); }

#players { position: absolute; top: 0px; left: 50%; margin-left: -400px; z-index: 1; width: 800px; height: 1px; overflow: hidden; border-bottom: 0px; }
#iframe { position: absolute; top: 17px; left: 0px; z-index: 2; height: 602px; width: 802px; }

#form { position: absolute; bottom: 0px; left: 50%; margin: 0px; margin-left: -360px; height: 24px; width: 720px; background-color: #bdbdbd; border: 1px solid #999999; border-bottom: 0px; line-height: 24px; text-align: center; z-index: 4; overflow: visible; }
#form textarea { display: nnone; position: absolute; bottom: 100%; left: 50%; margin-left: -361px; width: 722px; height: 170px; border: 1px solid #999999; padding: 2px; }

.obj { position: relative; white-space: nowrap; height: 72px; width: 6px; float: left; overflow: visible; margin-bottom: 20px; }

.tempo { width: 6px; }
.tempo .value { position: absolute; top: -7px; left: 0px; font-family: Verdana; font-size: 10px; background-image: url('../images/parts/tempo.jpg'); background-position: 0px 1px; background-repeat: no-repeat; padding-left: 10px; }

.vol { width: 6px; }
.vol .value { position: absolute; top: 62px; left: 0px; font-family: "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; font-style: italic; }

.key { width: 60px; overflow: hidden !important; }
.key .value { height: 72px; width: 60px; }
.sharp .value { background-image: url('../images/parts/key_sharp.gif'); }
.natural_sharp .value { background-image: url('../images/parts/key_natural_sharp.gif'); }
.flat .value { background-image: url('../images/parts/key_flat.gif'); }
.natural_flat .value { background-image: url('../images/parts/key_natural_flat.gif'); }

.bar { background-position: center center; background-repeat: no-repeat; }

.bar_minor { width: 21px; background-image: url('../images/parts/bar_minor.gif'); }
.bar_minor .value { height: 16px; width: 30px; position: absolute; top: 12px; text-align: center; left: 50%; margin-left: -16px; }
.bar_minor .value span { font-family: Arial; font-size: 9px; }

.bar_major { background-image: url('../images/parts/bar_major.gif'); width: 29px; }
.bar_major .value { height: 16px; width: 40px; position: absolute; top: -7px; font-weight: bold; text-align: center; left: 50%; margin-left: -21px; }
.bar_major .value span { font-family: Arial; font-size: 15px; border: 1px solid #333333; background-color: #ffffff; }

.bar_end { width: 15px; background-image: url('../images/parts/bar_end.gif'); }
.bar_end .value { display: none; }

.note { position: relative; width: 32px; }
.note .lines { width: 14px; position: absolute; top: 0px; left: 50%; margin-left: -7px; background-image: url('../images/parts/lines.gif'); }
.note .value { background-image: url('../images/parts/note.gif'); height: 23px; width: 32px; position: absolute; }
.note_sharp { background-image: url('../images/parts/note_sharp.gif'); background-repeat: no-repeat;}
.note_natural { background-image: url('../images/parts/note_natural.gif'); background-repeat: no-repeat; }
.note_flat { background-image: url('../images/parts/note_flat.gif'); background-repeat: no-repeat; }
.note .accent { position: absolute; top: 0px; left: 50%; margin-left: -4px; height: 8px; width: 8px; background-image: url('../images/parts/accents.gif'); }
.note .stac_up { background-position: 0px 0px; }
.note .stac_dn { background-position: -8px 0px; }
.note .ten_up { background-position: 0px -8px; }
.note .ten_dn { background-position: -8px -8px; }
.note .acc_up { background-position: 0px -16px; }
.note .acc_dn { background-position: -8px -16px; }
.note .fermata { height: 15px; width: 15px; top: 0px; left: 50%; margin-left: -8px; position: absolute; background-image: url('../images/parts/fermata.gif'); }
.highlight .value { background-image: url('../images/parts/note_red.gif'); }

.btn { border: 1px outset #999999; padding: 2px; margin: 1px 1px; float: left; }
.invert { border: 1px inset #999999; }