body{background: url(images/gradient_background_green.gif) #FFFFFF; font-size:12pt; background-repeat: repeat; margin:10px;}

#wrapper{ width:auto;}
div { margin:0px; padding:0; text-align:center; }

#whitekeys { position:absolute; z-index:1;   }
#blackkeys { position:absolute; z-index:2; left:0px;  }

* html #whitekeys {
left:11px;
}

* html div.black_key_10 { background-color:black; width:28px; height:109px;
position:relative; float:left; left:-15px;  margin-left:56px;  z-index:2;
border:thin solid black;}

a:link, a:visited, a:hover { text-decoration:none; }

div.black_key{ background-color:black; width:28px; height:109px;
position:relative; float:left; left:-15px;  margin-left:15px;  z-index:2;
border:thin solid black;}

div.black_key_10{ background-color:black; width:28px; height:109px;
position:relative; float:left; left:-15px;  margin-left:59px;  z-index:2;
border:thin solid black;}

div.white_key{  background-color:white; width:43px; height:228px;  float:left; border:thin solid black;}

div.first_key{ background-color:black; width:30px; height:110px;
position:relative; float:left; left:-15px; margin-left:43px;  z-index:2;
border:thin solid black;  display:inline; }


div.white_key p.notename { position:relative; top:100px; color:black; }
 p.notename { position:relative; top:0px; color:white;
		font-weight: bold;
		font-size:80%;
		font-family: Arial, "Arial";}

* html div.white_key p.notename { position:relative; top:110px;

}

* a { cursor:crosshair; }

div.white_key p.n2 { color:black; position:relative; top:100px;}
p.n2 { color:white;
	font-weight: bold;
	font-size:80%;
	font-family: Arial, "Arial";
	}
div.white_key p.n3 { color:#110088; position:relative; top:100px;}
p.n3 { color:#66ddff;
	font-weight: bold;
	font-size:80%;
	font-family: Arial, "Arial";}

#mask { position:absolute; z-index:3; opacity:0; }
span.subscript {  font-size:55%;  position:relative; top:3px;}