#videoArea:-webkit-full-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#videoArea:-moz-full-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#videoArea:-ms-fullscreen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#videoArea:fullscreen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#headerArea {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    display: table;
    table-layout: fixed;
    height: 50px;
    z-index: 1;
    position: absolute;
}

    #headerArea span {
        color: white;
    }

    #headerArea #rightHeader {
        display: table-cell;
        width: 32px;
        vertical-align: middle;
        padding-left: 14px;
        padding-right: 14px;
    }

    #headerArea #leftHeader {
        display: table-cell;
        width: 32px;
        vertical-align: middle;
        padding-left: 14px;
        padding-right: 14px;
    }

    #headerArea #divTitle {
        display: table-cell;
        width: 100%;
        vertical-align: middle;
        text-align: center;
    }



#controlArea {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 60px;
    position: absolute;
    display: table;
    table-layout: fixed;
    bottom: 0;
    z-index: 1;
}

    #controlArea span {
        color: white;
    }

    #controlArea #rightControl {
        display: table-cell;
        width: 366px;
        vertical-align: middle;
    }

    #controlArea #leftControl {
        display: table-cell;
        width: 32px;
        vertical-align: middle;
        padding-left: 14px;
        padding-right: 8px;
    }

    #controlArea #divSeekBar {
        position: relative;
        height: 16px;
        display: table-cell;
        width: 100%;
        vertical-align: middle;
    }

    #controlArea #lblTime {
        font-size: 12px;
        width: 150px;
        display: inline-block;
        text-align: center;
    }


    #controlArea #btnRateDown {
        display: inline-block;
        width: 24px;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    #controlArea #btnRateUp {
        display: inline-block;
        width: 24px;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

#seekBar {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

#popupVolume {
    position: absolute;
    height: 180px;
    width: 40px;
    bottom: 14px;
    display: none;
    background-color: black;
    border-top: 3px solid #666666;
    z-index: 999;
}

    #popupVolume #volumeBar {
        position: absolute;
        margin-left: -30px; /*(popupVolume.width[40]-volumeBar.width[100])/2*/
        bottom: 83px;
        width: 100px;
        transform: rotate(-90deg);
    }

    #popupVolume #lblVolume {
        color: white;
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 12px;
        font-size: 11px;
    }

#seekBar, #volumeBar {
    height: 7px;
    padding: 0;
    -webkit-appearance: none;
    border: none;
    border-radius: 4px;
    background-color: #999999;
    outline: none;
}


.autoHide:hover {
    opacity: 1;
    transition: opacity 0.3s;
}

.autoHide {
    opacity: 0;
    transition: opacity 0.3s;
}

.sb-slidebar {
    background-color: black;
    color: white;
}

#sb-site {
    background-color: black;
}

.sb-menu dt:hover {
    background-color: #EEEEEE;
    color: #444444;
}

#leftMenu {
    width: 372px;
}

.sb-menu dt {
    padding: 19px 0 11px 12px;
}

.sb-menu dd {
    margin-left: 10px;
}

.sb-menu ul li:hover {
    background-color: #EEEEEE;
    color: #444444;
}

.sb-menu ul li {
    list-style: none;
    padding-left: 27px;
    padding-right: 0;
    padding-top: 11px;
    padding-bottom: 7px;
    border-top: solid 1px #363636;
    font-size: 13px;
}

.sb-menu ul {
    padding: 0;
    margin: 0;
}

.sb-menu {
    background-color: black;
    margin: 0;
    padding: 0 0 0 14px;
}

#imgLoading img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#imgLoading {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    margin: auto;
    border-radius: 20%;
    background-color: rgba(255,255,255,0.9);
}

.controlbutton:disabled {
    opacity: 0.5;
}


.controlbutton {
    height: 32px;
    width: 32px;
    padding: 0;
    border: 0;
    outline: none;
    background-color: transparent;
    vertical-align: middle;
}



#btnPause {
    background-image: url(img/32px/286-pause2.png);
    background-repeat: no-repeat;
    background-position: center center;
}

    #btnPause:hover {
        background-image: url(img/32px/286-pause2-h.png);
    }

#btnPlay {
    background-image: url(img/32px/285-play3.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

    #btnPlay:hover {
        background-image: url(img/32px/285-play3-h.png);
    }

#btnFull {
    background-image: url(img/32px/138-enlarge.png);
    background-repeat: no-repeat;
    background-position: center center;
}

    #btnFull:hover {
        background-image: url(img/32px/138-enlarge-h.png);
    }

#btnShrink {
    background-image: url(img/32px/141-shrink2.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

    #btnShrink:hover {
        background-image: url(img/32px/141-shrink2-h.png);
    }

#btnMute, #btnMutePopup {
    background-image: url(img/32px/296-volume-medium.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
}

#btnUnmute, #btnUnmutePopup {
    background-image: url(img/32px/299-volume-mute2.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
}

#btnMute:hover, #btnMutePopup:hover {
    background-image: url(img/32px/296-volume-medium-h.png);
}

#btnUnmute:hover, #btnUnmutePopup:hover {
    background-image: url(img/32px/299-volume-mute2-h.png);
}

#btnMute:hover, #btnUnmute:hover {
    background-color: transparent;
}

#btnMutePopup, #btnUnmutePopup {
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}


#btnDownload {
    background-image: url(img/32px/200-download3.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

    #btnDownload:hover {
        background-image: url(img/32px/200-download3-h.png);
    }

#btnOpenMenu {
    background-image: url(img/32px/190-menu.png);
    background-repeat: no-repeat;
    background-position: center center;
}

    #btnOpenMenu:hover {
        background-image: url(img/32px/190-menu-h.png);
    }

#btnCloseMenu {
    background-image: url(img/32px/190-menu.png);
    background-repeat: no-repeat;
    background-position: center center;
}

    #btnCloseMenu:hover {
        background-image: url(img/32px/190-menu-h.png);
    }

#btnRewind {
    background-image: url(img/32px/288-backward2.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

#btnForward {
    background-image: url(img/32px/289-forward3.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

#btnBegin {
    background-image: url(img/32px/290-first.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}

#menuBox {
    bottom: 60px;
    top: 0;
    margin: auto;
    position: absolute;
    width: 100%;
    overflow-y: scroll;
}

#divCredit {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 59px;
    padding: 0 12px;
    border-top: 1px #CCCCCC solid;
    border-right: 1px #CCCCCC solid;
}

body {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
    font-family: meiryo, arial, sans-serif;
    font-size: 14px;
}

#seekBar::-ms-tooltip, #volumeBar::-ms-tooltip {
    display: none;
}

#seekBar::-ms-thumb, #volumeBar::-ms-thumb {
    background-color: #d90000;
    opacity: 0;
    border: none;
    width: 0px;
    height: 0px;
}

#seekBar::-ms-fill-lower, #volumeBar::-ms-fill-lower {
    background-color: #d90000;
}

#seekBar::-ms-fill-upper, #volumeBar::-ms-fill-upper {
    background-color: #999999;
}

#volumeBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #d90000;
    opacity: 0;
    outline: none;
    width: 18px;
    height: 7px;
    border-radius: 8px;
}

#volumeBar::-moz-range-thumb {
    background-color: #d90000;
    opacity: 0;
    outline: none;
    width: 18px;
    height: 7px;
    border-radius: 8px;
}

#seekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #d90000;
    outline: none;
    opacity: 0;
    width: 18px;
    height: 7px;
    border-radius: 8px;
}

#seekBar::-moz-range-thumb {
    background-color: #d90000;
    opacity: 0;
    outline: none;
    width: 18px;
    height: 7px;
    border-radius: 8px;
}

#seekBar::-moz-range-track, #volumeBar::-moz-range-track {
    opacity:0;
}

.menuButton {
    background-color: #aaaaaa;
    border: 1px solid #999999;
    border-radius: 2px;
    font-size: 11px;
    padding: 5px 10px;
}

#btnCloseSetting {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#btnResetSetting {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.deleteOffline {
    margin: auto;
    right: 0;
    /*top: 0;
    bottom: 0;*/
    position: absolute;
}

#dtHistory {
    position: relative;
}

#btnClearHistory {
    margin: auto;
    right: 0;
    position: absolute;
    border: none;
    font-size: 11px;
    font-family: meiryo, arial, sans-serif;
    color: #aaaaaa;
    background-color: black;
}

    #btnClearHistory:before {
        content: "x ";
    }


.popupParent {
    display: inline-block;
}

#boxPlaybackRate {
    border-radius: 2px;
    border: solid 1px white;
    height: 30px;
    vertical-align: middle;
    font-size: 0;
}

#boxPlaybackRateDown {
    display: inline-block;
    font-size: 14px;
    width: 24px;
    height: 30px;
}

    #boxPlaybackRateDown:hover {
        background-color: rgba(255,255,255,0.4);
    }

#boxPlaybackRateUp {
    display: inline-block;
    font-size: 14px;
    width: 24px;
    height: 30px;
}

    #boxPlaybackRateUp:hover {
        background-color: rgba(255,255,255,0.4);
    }

#boxPlaybackRateLabel {
    display: inline-block;
    border-left: solid 1px white;
    border-right: 1px white solid;
    height: 100%;
    width: 40px;
    font-size: 14px;
}

    #boxPlaybackRateLabel:hover {
        background-color: rgba(255,255,255,0.4);
    }

#lblPlaybackRate {
    width: 100%;
    display: inline-block;
    text-align: center;
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

#boxVolume {
    margin-left: 7px;
    margin-right: 7px;
}

#menuRate li:hover {
    background-color: rgba(160,160,160,0.6);
}

#menuRate li {
    list-style: none;
    margin: 5px 0 5px 0;
    padding: 0 7px 0 9px;
}


#menuRate ul {
    color: white;
    margin: 0;
    padding: 0;
}

#menuRate {
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    bottom: 64px;
    border-top: 3px solid #999999;
    padding-top: 7px;
    padding-bottom: 6px;
    font-size: 14px;
}

#movieArea {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}


#pnlQuick {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 70px;
    left: 0;
    right: 0;
    width: 280px;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    border-radius: 8px;
}


.quickbutton {
    height: 64px;
    width: 64px;
    padding: 0;
    margin: auto;
    border: 0;
    outline: none;
    background-color: transparent;
    vertical-align: top;
    color: white;
}

#btnQuickPause {
    background-image: url(img/64px/279-pause.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
    margin-left: 20px;
    margin-right: 20px;
}

#btnQuickPlay {
    background-image: url(img/64px/278-play2.png);
    background-position: center center;
    background-repeat: no-repeat;
    margin-left: 20px;
    margin-right: 20px;
}


#btnQuickRewind {
    background-image: url(img/64px/102-undo.png);
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 24px;
    margin-left: 19px;
}

#btnQuickForward {
    background-image: url(img/64px/103-redo.png);
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 24px;
    margin-right: 19px;
}

[data-hint]:after, [data-hint]:before,
[data-hint-TR]:after, [data-hint-TR]:before,
[data-hint-TL]:after, [data-hint-TL]:before,
[data-hint-BR]:after, [data-hint-BR]:before,
[data-hint-BL]:after, [data-hint-BL]:before {
    display: inline-block;
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

[data-hint]:hover:after, [data-hint]:hover:before,
[data-hint-TR]:hover:after, [data-hint-TR]:hover:before,
[data-hint-TL]:hover:after, [data-hint-TL]:hover:before,
[data-hint-BR]:hover:after, [data-hint-BR]:hover:before,
[data-hint-BL]:hover:after, [data-hint-BL]:hover:before {
    visibility: visible;
}

[data-hint]:before,
[data-hint-TR]:before,
[data-hint-TL]:before,
[data-hint-BR]:before,
[data-hint-BL]:before {
    content: "";
    z-index: 1001;
}

[data-hint]:after,
[data-hint-TL]:after,
[data-hint-TR]:after,
[data-hint-BL]:after,
[data-hint-BR]:after {
    text-align: center;
    border-radius: 4px;
    z-index: 1000;
    color: #FFFFFF;
    font-size: 10px;
    white-space: nowrap;
    background: #000000;
    padding: 3px 3px;
    opacity: 1;
}

[data-hint]:after {
    content: attr(data-hint);
    margin-left: 20px;
    margin-top: 10px;
}

[data-hint-TR]:after {
    content: attr(data-hint-TR);
    transform: translateY(-150%) translateX(0%);
}

[data-hint-TL]:after {
    content: attr(data-hint-TL);
    transform: translateY(-150%) translateX(-50%);
}

[data-hint-BR]:after {
    content: attr(data-hint-BR);
    transform: translateY(50%) translateX(0%);
}

[data-hint-BL]:after {
    content: attr(data-hint-BL);
    transform: translateY(50%) translateX(-50%);
}

.opacity0 {
    opacity: 0;
}

/* start error popup */
#popupErrorInner {
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    color: white;
    margin: auto;
    top: 50%;
    left: 0;
    right: 0;
    width: 66%;
    border-radius: 4px;
    max-width: 500px;
    transition: all 0.3s;
    transform:translateY(-50%);
}

    #popupError {
        display: none;
        position:relative;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.5);
        z-index: 1002;
    }

    #popupError table {
        width: 100%;
    }
    #popupError a:visited, #popupError a {
        color: yellow;
        font-size: x-small;
    }

    #btnPrevError, #btnNextError, #btnCloseError {
        background-color: transparent;
        border: none;
        color: white;
    }


    #btnPrevError:disabled, #btnNextError:disabled, #btnCloseError:disabled {
        opacity: 0.5;
    }


.tdErrorLeft {
    width: 30px;
}

.tdErrorRight {
    width: 30px;
    text-align: right;
}

#divErrorTime {
    text-align: center;
    opacity: 0;
}

    #divErrorTime:hover {
        opacity: 1;
    }

#divError {
    min-height: 40px;
    max-height: 200px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    margin: 4px;
    padding: 0 40px;
}



#divErrorLink {
    padding: 0 40px;
}


#btnShowError {
    display: none;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
/* end error popup */


/* start alert popup */
#popupAlertInner {
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    color: white;
    margin: auto;
    top: 50%;
    left: 0;
    right: 0;
    width: 66%;
    border-radius: 4px;
    max-width: 500px;
    transition: all 0.3s;
    transform:translateY(-50%);
}

    #popupAlert {
        display: none;
        position:relative;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.5);
        z-index: 1002;
    }

    #popupAlert table {
        width: 100%;
    }

    #btnCloseAlert {
        background-color: transparent;
        border: none;
        color: white;
    }
    #btnCloseAlert2 {
        margin-bottom: 20px;
        margin-left: 50%;
        transform: translateX(-50%);
        color: white;
        border-color: white;
        background-color: transparent;
    }


#divAlert {
    max-height: 200px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    margin: 30px 4px;
    padding: 0 40px;
    text-align: center;
}

/* end alert popup */

#popupConfig {
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    color: white;
    width: 300px;
    transition: all 0.3s;
    display: none;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-top: 3px solid #999999;
    z-index: 1000;
}


#btnConfig {
    background-image: url(img/32px/149-cog.png);
    background-repeat: no-repeat;
    background-position: center center;
}

    #btnConfig:hover {
        background-image: url(img/32px/149-cog-h.png);
    }

.dialogHeader {
    padding: 10px 0 10px 12px;
    font-size: 16px;
}

.dialogBody {
}

.dialogFooter {
    position: relative;
    height: 44px;
    border-top: 1px solid #999999;
}

.dialogButtonArea {
    display: inline-block;
}

#settings {
    margin: 0;
    padding: 0;
    list-style: none;
}

    #settings li {
        border-top: 1px solid #666666;
        font-size: 14px;
        padding: 7px 0 7px 15px;
    }

    #settings input {
        vertical-align: middle;
        margin-right: 16px;
    }

#dtOffline {
    display: none;
}


#divExpandDownloads, .divMovieListExpand, #divExpandHistory {
    color: #aaaaaa;
    text-align: right;
    font-size: 11px;
    padding-top: 7px;
    padding-bottom: 12px;
    padding-right: 11px;
    border-top: 1px solid #363636;
}


#video {
    position: absolute;
    width: 100%;
    height: 100%;
}