.playerContainer{ width:480px; background:#76C8C4; text-align:center; } .PlayerScreen{ background:#00FFFF; width:320px; height:240px; margin-left:auto; margin-right:auto; } .Controls{ height:85px; background:#333333; text-align:left; width:100%; } .ControlsRight{ vertical-align:top; } .ControlsBottom{ vertical-align:bottom; } .StatusContainer{ width:100%; height:100%; } .PlayContainer{ width:60px; height:60px; } .Progress{ height:10px; } .Time, .Duration, .Status{ height:16px; margin-top:0px; color:#F5FFC8; width:100%; } .Time{ padding-left:2px; } .Duration{ padding-right:2px; text-align:right; } .StatusContainer{ padding:0; border-collapse:collapse; } .Status{ height:20px; background:#ff0000; table-layout:fixed; } .Status.statusError .statusTitle, .Status.statusError .statusInfo{ color:#FF0000; } .Status .statusTitle{ font-weight:bold; color:#A5B3E9; } .Status .statusInfo{ font-weight:normal; color:#3770D6; } .Time, .Duration, .Status{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; background:#000000; } .Time, .Duration{ width:60px; } .Volume{ width:30px; height:30px; float:right; margin-right:2px; margin-top:auto; background-image:url(images/player_sprite.png); background-repeat:no-repeat; background-position:-1px -62px; cursor:pointer; } .Volume:hover{ background-position:-33px -62px; } .PlayPauseToggle{ width:60px; height:60px; background-image:url(images/player_sprite.png); background-repeat:no-repeat; background-position:-1px -1px; cursor:pointer; vertical-align:middle; line-height:60px; } .PlayPauseToggle:hover{ background-position:-63px -1px; cursor:pointer; } .icon{ background-image:url(images/dojoPlayerIcons.png); background-repeat:no-repeat; width:22px; height:22px; } .PlayPauseToggle .icon{ position:relative; top:19px; left:19px; background-position:-1px -1px; } .PlayPauseToggle.Play .icon{ background-position:-1px -1px; } .PlayPauseToggle.Pause .icon{ background-position:-24px -1px; } .Progress{ } .Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{ height:10px; } .ProgressLoaded, .ProgressPosition, .ProgressHandle{ position:absolute; } .ProgressLoaded{ background:url(images/progressLoadedBk.png) repeat-x; } .ProgressHandle{ background-image:url(images/sliderHandleSprite.png); background-position:0px 0px; width:15px; margin-left:0px; cursor:pointer; } .ProgressHandle.over{ background-position:-15px 0px; } .ProgressPosition{ background:url(images/progressPositionBk.png) repeat-x; width:0px; } .VolumeSlider{ position:absolute; } .VolumeSliderBack{ width:128px; height:30px; background-image:url(images/player_sprite.png); background-repeat:no-repeat; background-position:-1px -95px; } .VolumeSliderHandle{ position:absolute; width:12px; height:14px; background-image:url(images/player_sprite.png); background-repeat:no-repeat; background-position:-1px -140px; cursor:pointer; } .VolumeSliderHandle.over{ background-position:-15px -138px; cursor:pointer; } .Volume .icon{ background-position:-60px -43px; width:18px; height:16px; position:relative; top:7px; left:7px; } .Volume.mute .icon{ background-position:-1px -43px; } .Volume.low .icon{ background-position:-20px -43px; } .Volume.med .icon{ background-position:-40px -43px; } .Volume.high .icon{ background-position:-60px -43px; }