#player { position: fixed; width: 750px; height: 50px; left: 50%; top: 0; margin-left: -375px; background-color: #000; font-size: 12px; } #player .prev, #player .next, #player .play, #player .pause { float: left; color: #AAA; background-color: #222; cursor: pointer; } #player .prev, #player .next { width: 30px; height: 30px; margin: 10px 0; border-radius: 40px; } #player .prev img, #player .next img { width: 14px; height: 14px; } #player .prev img { margin: 8px 0 0 7px; } #player .next img { margin: 8px 0 0 9px; } #player .play, #player .pause { width: 40px; height: 40px; margin: 5px; border-radius: 40px; } #player .play img { width: 16px; height: 16px; margin: 12px 0 0 14px; } #player .pause img { width: 16px; height: 16px; margin: 12px 0 0 12px; } #player .prev { margin-left: 20px; } #player .next { margin-right: 6px; } #player .time-played, #player .time-left { float: left; height: 50px; width: 50px; color: #AAA; margin-right: 2px; text-align: center; line-height: 50px; } #player .progress { float: left; margin-top: 25px; height: 25px; width: 400px; } #player .track-title { float: left; width: 390px; height: 25px; margin-left: 5px; margin-top: -25px; color: #DDD; line-height: 30px; } #player .progress-bar { float: left; margin: 11px 5px; background-color: #013; width: 390px; height: 3px; } #player .progress-loaded { float: left; width: 0; height: 3px; background-color: #05A; } #player .progress-point { float: left; width: 6px; height: 6px; background-color: #013; margin-top: -4px; margin-left: 0; border: #FFF 3px solid; border-radius: 6px; cursor: pointer; } #player .shuffle, #player .repeat, #player .playlist { float: left; cursor: pointer; } #player .shuffle { margin: 17px 0 0 0; } #player .shuffle img { width: 20px; } #player .repeat { margin: 17px 0 0 15px; } #player .repeat img { width: 20px; } #player .playlist { margin: 12px 0 0 15px; } #player .playlist img { width: 20px; } #player .shuffle, #player .repeat { opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; filter:alpha(opacity=50); } #player .shuffle.on, #player .repeat.on { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter:alpha(opacity=100); } #playlist { position: fixed; top: 50px; left: 50%; width: 750px; margin-left: -375px; background-color: #000; opacity: 0.9; -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-opacity: 0.9; filter:alpha(opacity=90); overflow-y: auto; max-height: 10em; } #playlist ul { margin: 0.2em 0.3em; padding: 0; position: relative; } #playlist ul li { margin: 0; padding: 0.4em 0; display: block; width: 100%; font-size: 0.75em; color: #FFF; } #playlist ul li:hover { background-color: #050505; cursor: default; } #playlist ul li.now-playing { background-color: #013; } #playlist ul li .length { margin: 0 0.5em; color: #AAA; }