#heightcontroler {height:700px}
#widthcontroler {position:absolute; left:50%; top:440px; margin-left:-453px; border:1px #999 solid; background:#fff; padding:20px;}
#widthcontroler * {font-weight:bold; font-family:arial;}
#widthcontroler {width:866px; text-align:center}
#page2, #page3 {display:none}
#page1, #page2, #page3 {margin:30px 29px 0 29px;}

/*piano*/
object, param, embed {width:0px; height:0px}
#keyboard {background:url("keyboard_background.gif") no-repeat; height:200px; padding:9px 12px; margin:0 auto; clear:both}
.white {height:180px; width:40px; background:url("keyboard_white.gif") no-repeat; float:left; cursor:pointer;}
.black {height:105px; width:25px; background:url("keyboard_black.gif") no-repeat; float:left; cursor:pointer; position:relative; top:-180px; z-index:1;}
.hover {background-position:-40px 0;}
.press {background-position:-80px 0;}

/*welcome page*/
#introduction {width:722px; height:200px; background:url("introduction.gif");}
.level {background:url("level.gif") no-repeat; width:30px; height:30px; display:inline-block; margin:88px 0 0 7px; padding:55px 76px 0 0; text-align:right; cursor:pointer}
#helpshow {background:url("helpshow.gif") no-repeat #fff; width:720px; height:96px; display:none; position:relative; top:45px; left:0px; z-index:6;}

/*playing page*/
#score_background {background:url("score_background.gif") no-repeat; height:260px; width:770px; margin:auto; overflow:hidden; text-align:left}
#scorecontainer {width:700px; height:176px; margin:auto; overflow:hidden; clear:both; position:relative; top:-32px}
#level_flag {float:left; width:56px; height:56px; background:url("level_flag.gif") no-repeat; cursor:pointer}
#timeline {float:right; width:616px; height:20px; margin-top:12px; background:url("timeline.gif");}
#timeline_in {height:3px; width:0; background:url("timeline_in.gif"); margin:16px 0 0 6px}
#gclef {background:url("score.gif") no-repeat -18px 0; width:36px; height:101px; margin-left:10px; margin-top:33px; float:left}
.line {background:url("line.gif"); width:42px; height:164px; margin-left:20px; text-align:center; float:left;}
.line span {background:url("score.gif") 0 0; height:52px; width:18px; display:inline-block; float:left}
.line span.flat {background-position:0 -104px;}
.line span.sharp {background-position:0 -52px;}
.line span.blank {background-position:18px 52px;}
#finalline {width:700px; height:58px; background:url("line.gif") repeat-x 0 -217px; position:relative; top:-155px; z-index:1; margin:auto;}
#help {height:32px; width:32px; cursor:pointer; background:url("icon.gif"); margin:-165px 0 0 10px}

/*finish page*/
#finish {width:722px; height:200px; background:url("finish.gif");}
#finish #finish_number {width:50px; margin:105px 0 0 380px; text-align:right; display:inline-block;}
#finish #finish_bkrc {width:110px; margin:105px 50px 0 0; display:none; color:red; float:right}
#finish #finish_try {width:140px; height:37px; margin:21px 0 0 278px; display:block; cursor:pointer}