Directory Player Code

html, body { font: 10px Verdana, Tahoma, Arial, "sans serif"; background: #222; color: #555; }

#logo { position: absolute; left: 0px; top: 0px; width: 100%; height: 60px; background: url('image/mobileback.gif') repeat-x; }

#tree { position: absolute; left: 0px; top: 60px; width: 50%; bottom: 0px; z-index: 100; border: 1px solid #777;
        overflow: hidden; -moz-box-sizing: border-box; }
/*#tree ul { list-style-type: none; margin: 0; padding: 0; }*/
#cn div { height: 40px; vertical-align: middle; border-bottom: 1px solid #333; font: normal 11px Trebuchet, 'Trebuchet MS', sans-serif; background: #222; }
#cn div b { margin-left: 6px; font-weight: normal; font-size: 18px; width: 100%; -moz-box-sizing: border-box; color: white; display: block; }
#cn div i { margin-left: 6px; font-style: normal; }
#cn { position: absolute; left: 0; border-left: 0; border-right: 0; width: 100%; cursor: move; }

#view { position: absolute; top: 60px; right: 2px; width: 50%; bottom: 0px; z-index: 100; border: 1px solid #777;
        border-left: none; overflow: hidden; -moz-box-sizing: border-box; }

.node, .leaf { margin: 0; padding-left: 10px; color: #CCC; cursor: pointer; }
.node { background: url('image/plus.gif') left 2px no-repeat; height: 14px; overflow: hidden; }
.node:hover, .leaf:hover { background-color: #999; }

.songs { font: 10px Verdana, Tahoma, Arial, "sans serif"; width: 100%; border: 0; }
.songs th { background: #333; color: #BBB; border-top: 1px solid #666; border-bottom: 1px solid #666; }
.track { width: 25px; text-align: right; }
.artist { width: 20%; }
.album { width: 20%; }
.title { width: auto; }
.even { background: #292929; }

.songover { background: #666; color: white; cursor: pointer; }

.lst { position: inherit; }