#player { position: fixed; width: 1000px; height: 50px; left: 50%; top: 0; margin-left: -500px; 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: 20px; } #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: 740px; } #player .track-title { float: left; width: 730px; 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: 730px; 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; }