/*CSS for StarPlayer Skin UI*/
@charset "utf-8";

.starplayer_script_ui {
    text-decoration: none;
    text-align: center;
    font-family: 굴림, Gulim, AppleGothic, sans-serif;
    font-size: 12px;
    color: #B2B2B2;
    display: block;
    /*width:720px;
    height:81px;*/
    background: url('img/bg.jpg') repeat-x 0 0;

}

.btn_common {
    display: block;
    cursor: pointer;
}

.top_area {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 19px;
}

.bottom_area {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 62px;
}


.seekbar_l {
    position: absolute;
    display: block;
    left: 8px;
    top: 8px;
    right: 180px;
    /*width:535px;*/
    height: 10px;
    background: url('img/seekbar_bg.jpg') repeat-x 0px 0px;
}

.seekbar_area,
.volumebar_area {
    position: absolute;
    display: block;
    left: -7px;
    top: 0px;
    right: 7px;
    height: 100%;
}

.seekbar_r {
    position: absolute;
    display: block;
    float: right;
    right: 0px;
    width: 175px;
    height: 19px;
}

.control_l {
    position: relative;
    float: left;
    width: 400px;
    height: 62px;
}

.control_r {
    position: relative;
    float: right;
    height: 62px;
}

.btn_seek,
.btn_volume {
    position: absolute;
    left: 0px;
    top: -1px;
    width: 14px;
    height: 10px;
    z-index: 100;
    background: url('img/starplayer_ui.png') no-repeat -15px 0;
}

.btn_repeatA,
.btn_repeatB {
    position: absolute;
    left: 0px;
    top: -1px;
    width: 14px;
    height: 10px;
    z-index: 90;
    background: url('img/starplayer_ui.png') no-repeat 0 0;
}

.currentbar,
.current_volumebar {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    /*right:178px;*/
    /*width:535px;*/
    height: 10px;
    background: url('img/current_bar.jpg') repeat-x 0px 0px;
}

.repeatbar {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    height: 10px;
    background: url('img/repeat_bar.jpg') repeat-x 0px 0px;
}

.basic_controls {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 214px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat 0 -30px;
}

.speed_controls li {
    display: inline;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
}

.speed_controls_num {
    position: relative;
    letter-spacing: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.speed_controls_btn {
    padding: 20px 10px 0 0;
    font-size: 16px
}

.speed_controls_btn a {
    display: inline-block;
    width: 30px;
    text-shadow: 1px 1px 1px #000
}

.speed_controls_btn a:hover {
    color: #fead41
}

.speed_controls_num .speed_controls_pop {
    position: absolute;
    bottom: 55px;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #000;
    border-right: 0;
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    width: 150px;
    z-index: 9999;
}

.speed_controls_num .speed_controls_pop a {
    flex: 1 1 33.3333%;
    padding: 6px 0;
    text-align: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000
}

.speed_controls_num .speed_controls_pop a:hover,
.speed_controls_num .speed_controls_pop a.on {
    color: #000;
    background: #ccc
}

.control_text_status {
    position: absolute;
    display: block;
    top: 20px;
    left: 226px;
    width: 50px;
    height: 17px;
}

.speed_controls {
    margin: 15px 20px 0 0;
}

.control_text_time {
    position: absolute;
    display: block;
    text-align: left;
    top: 20px;
    left: 285px;
    width: 150px;
    height: 17px;
}

.btn_play {
    position: absolute;
    left: 27px;
    top: 0px;
    width: 63px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat -128px -156px;
}

.btn_play:hover {
    background: url('img/starplayer_ui.png') no-repeat -192px -156px;
}

.btn_pause {
    position: absolute;
    left: 27px;
    top: 0px;
    width: 63px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat 0 -156px;
}

.btn_pause:hover {
    background: url('img/starplayer_ui.png') no-repeat -64px -156px;
}

.btn_stop {
    position: absolute;
    left: 90px;
    top: 0px;
    width: 35px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat -148px -93px;
}

.btn_stop:hover {
    background: url('img/starplayer_ui.png') no-repeat -184px -93px;
}

.btn_backward {
    position: absolute;
    left: 125px;
    top: 0px;
    width: 35px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat -76px -93px;
}

.btn_backward:hover {
    background: url('img/starplayer_ui.png') no-repeat -112px -93px;
}

.btn_forward {
    position: absolute;
    left: 160px;
    top: 0px;
    width: 37px;
    height: 62px;
    background: url('img/starplayer_ui.png') no-repeat 0 -93px;
}

.btn_forward:hover {
    background: url('img/starplayer_ui.png') no-repeat -38px -93px;
}

.btn_repeat {
    position: absolute;
    left: 2px;
    top: 6px;
    width: 16px;
    height: 13px;
    background: url('img/starplayer_ui.png') no-repeat -30px 0;
}

.btn_repeat:hover,
.btn_repeat.active {
    background: url('img/starplayer_ui.png') no-repeat -47px 0;
}

.btn_fullscreen {
    position: absolute;
    left: 21px;
    top: 6px;
    width: 16px;
    height: 13px;
    background: url('img/starplayer_ui.png') no-repeat -0px -16px;
}

.btn_fullscreen:hover {
    background: url('img/starplayer_ui.png') no-repeat -17px -16px;
}

.btn_mute {
    position: absolute;
    left: 42px;
    top: 5px;
    width: 16px;
    height: 13px;
    background: url('img/starplayer_ui.png') no-repeat -34px -16px;
}

.btn_mute:hover {
    background: url('img/starplayer_ui.png') no-repeat -51px -16px;
}

.btn_mute.active {
    background: url('img/starplayer_ui.png') no-repeat -68px -16px;
}

.volumebar {
    position: absolute;
    left: 64px;
    top: 8px;
    width: 100px;
    height: 8px;
    background: url('img/seekbar_bg.jpg') repeat-x left top;
}


.control_speed {
    position: relative;
    float: right;
    right: 20px;
    top: -42px;
}

.btn_speed06 {
    float: left;
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat 0 -219px;
}

.btn_speed06:hover,
.btn_speed06.active {
    background: url('img/starplayer_ui.png') no-repeat -27px -219px;
}

.btn_speed08 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -54px -219px;
}

.btn_speed08:hover,
.btn_speed08.active {
    background: url('img/starplayer_ui.png') no-repeat -81px -219px;
}

.btn_speed10 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -108px -219px;
}

.btn_speed10:hover,
.btn_speed10.active {
    background: url('img/starplayer_ui.png') no-repeat -135px -219px;
}

.btn_speed12 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -162px -219px;
}

.btn_speed12:hover,
.btn_speed12.active {
    background: url('img/starplayer_ui.png') no-repeat -189px -219px;
}

.btn_speed14 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat 0 -252px;
}

.btn_speed14:hover,
.btn_speed14.active {
    background: url('img/starplayer_ui.png') no-repeat -27px -252px;
}

.btn_speed16 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -54px -252px;
}

.btn_speed16:hover,
.btn_speed16.active {
    background: url('img/starplayer_ui.png') no-repeat -81px -252px;
}

.btn_speed18 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -108px -252px;
}

.btn_speed18:hover,
.btn_speed18.active {
    background: url('img/starplayer_ui.png') no-repeat -135px -252px;
}

.btn_speed20 {
    width: 26px;
    height: 32px;
    background: transparent url('img/starplayer_ui.png') no-repeat -162px -252px;
}

.btn_speed20:hover,
.btn_speed20.active {
    background: url('img/starplayer_ui.png') no-repeat -189px -252px;
}

.fullscreen_controller {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
}

#video-container {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#watermark {
    position: absolute;
    left: 0px;
    top: 0px;
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    /*	text-align: left;*/
    text-transform: uppercase;
    font-weight: bold;
    font-size: 150%;
    color: #ffffff;
    opacity: 0.4;
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
}