/* sysbar color override */
#sys { background: #ffffff; border-bottom: 1px solid #CCC;}
    #sys #logoBox a         {color:#000;}
    #sys #logoBox a:hover   {color:#111;}
    #sys #menu ul ul a       {color:#000}
    #sys #menu ul ul a:hover {color:#FFF}
    
    /* menu item text color*/

    #menu .menu > ul > li > a, .sysLoginBox > a, .sysLoginBox > a:focus ,  #sys #logoBox a, .userMenu a, #sys #onlinePerson {color: #000; }
    #menu ul > li .caret {border-top-color:#000;}

    /* menu item hover text color */
    #menu ul > li:hover a, .sysLoginBox a:hover, #sys #logoBox a:hover, .userMenu a:hover, #menu ul > li.dropdown.open a {color:#000}
    #menu ul > li:hover .caret, #menu ul > li.dropdown.open .caret {border-top-color:#000}
    
    /* menu item hover background color */
    #menu .menu > ul > li:hover, .sysLoginBox:hover, .userMenu > li:hover, #menu .menu > ul > li.dropdown.open  {background: #f5f5fa;}


#playerFrame {background:#EEE; transition: background .4s ease;}
#playerFrame.play-layout {background:#000;}
    #player-container {padding-top:15px; padding-bottom:15px;}
    #player-container.play-layout {padding: 0; width:100%;}
        
        /* infoindex */
        #infoindexFrame {float:right; overflow-y: auto; height:100%;}
        #infoindexFrame.shrink {width:0px; overflow:hidden;}
        #infoindexFrame.moving {background:#EEE; position: absolute; transition: all 1s cubic-bezier(0.29, 0.93, 1, 1); overflow:hidden; z-index: 100}
        #infoindexFrame.transform {transform: scaleX(.1);}
            #infoindex-container {}
            #infoindexFrame .indexBox .title, #infoindexFrame .indexBox .sn  {font-size: 15px;}
            #infoindexFrame .indexBox .indent .title, #infoindexFrame .indexBox .indent .sn {font-size: 13px;}
            #infoindexFrame .indexBox .time  {margin-top: 3px;}
            #infoindexFrame .indexBox .indent .time  {margin-top: 1px;}
        
        /* tab */
        #sideFrame {float:right; overflow: hidden; width:0px; height:100%; box-sizing: border-box; padding: 5px 0px 5px 0px; background: #000; transition: width .4s ease;}
        #sideFrame.tab-open {width:500px;}
        #sideFrame.tab-open.narrow-page {padding-left: 5px;}
            #side-container  {position: relative; background:#FFF; height:100%; width: 500px; box-sizing: border-box; padding: 10px; overflow-y: auto; overflow-x: hidden; }
             #side-container .side-box {display: none;}

             /* side mod_tab */
            #sideFrame .mod_tabs .tabs > .item {margin-right:8px;}
            #sideFrame .mod_tabs .tabs          {margin-top:-10px;}
            #sideFrame .mod_tabs .tabs > .item a {padding:8px 2px;}
            #sideFrame .mod_tabs .keywords {margin:-8px 0 3px 0;}
            #sideFrame .mod_tabs .tab-container {padding-top:5px;}

            #sideFrame .indexBox .idx {padding: 7px 5px;}
            #sideFrame .indexBox .idx.indent {padding-left: 20px;}

            #noteBox .mod_note .flot {
                width: 460px;
            }


        /* video */
        #videoFrame { position: relative; height: 100%; transition: margin-right .4s ease, width .4s ease;}
        #videoFrame.tab-open {margin-right: 500px}
            #video-container  {}
                #video-container.play-layout  {padding: 10px;} 
                #video-container.play-layout.narrow-page  {padding: 0px;} 
                #videoBox {}
                #mediaBox {position: relative; height: 100%; width: 100%;}
/*****/ #video-container > .clearfix:after,#video-container > .clearfix:before  {display:none;}

        /* canvas */
        .canvas-container {transform-origin: left top;}
        .fs-player .canvas-container  {
            bottom: initial;
            right: initial;
            margin: initial;
        }

#authorBox {height: 82px; border-bottom: 1px solid #DDD; margin-bottom: 15px; font-size: 13px;}
    #authorBox>.authorInfo { padding-top: 10px;}
    #authorBox>.authorInfoEmbed {border-left: 2px solid #00BCD4; padding-left: 10px; padding-top: 0px};
    /*#authorBox [role="authorName"] {color: #7793ff;}*/
    #authorBox [role="publishTime"] {color: #BBB;}
    #authorBox [role="viewCnt"] {color: #999;}
    #authorPhoto {float: left; margin: 8px; height: 62px; width: auto; border: 2px solid #FFF; box-shadow: 0px 0px 4px 0px #b8b8b8;}



#ctrlFrame {height: 52px; background: #FFF; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC;}

#socialPanel {border-left: 1px solid #CCC;}

#controlPanel {border-right: 1px solid #CCC; border-left: 1px solid #CCC;}

#titlePanel {border-left: 1px solid #CCC;}
#titlePanel .title {font-size: 20px;}
#titlePanel .hint {margin-bottom: 2px;}

#info-container {border:1px solid #ccc; padding:14px}


/* side close X button */
.side-close { position: absolute; top: 8px; left: 450px; width: 24px; height: 24px; cursor: pointer;}
.side-close .side-close-container { position: relative; }
.side-close i { display: block; position: relative; width: 13px; height: 0px; border-style: solid; border-color: #BBB; background-color: #BBB; border-width: 1px; border-radius: 2px; transition: 0.1s; }
.side-close .line-1 { top: 12px; left: 4px; transform: rotate(45deg); }
.side-close .line-2 { top: 10px; left: 4px; transform: rotate(-45deg); }
.side-close:hover i { border-color: #888; }
.side-close:hover .line-1{ top: 9px; left: 6px; transform: rotate(35deg) scale(.8, 1.8); }
.side-close:hover .line-2{ top: 12px; left: 6px; transform: rotate(-35deg) scale(.8, 1.8); }
.side-close:active .line-1{ top: 10px; left: 6px; transform: rotate(25deg) scale(.8, 1.8); }
.side-close:active .line-2{ top: 12px; left: 6px; transform: rotate(-25deg) scale(.8, 1.8); }

@media (max-width: 767px) {
    #ctrlFrame {
        position: relative;
        height: 92px;
    }

    #sharePanel {
        position: relative;
        top: 42px;
        border-left: none;
    }

    #titlePanel {
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #ccc;
        border-left: none;
    }

    #titlePanel .title {
        font-size: 15px;
    }
}