/* media sys bar customize  */
#sys {
    background: #ffffff;
    border-bottom: 1px solid #CCC;
}

/* hide site name and show logo */
#sys #logoBox { line-height: 0; }
#sys #logoBox #sitename { display:none; }
#sys #logoBox #logo { display:inline-block; padding: 6px 0; }
/*#sys .searchBox { margin-top: 9px; }*/

.logo {
    display: block;
    width: 128px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../../../../../../sys/res/icon/logo/sysbar_logo.png);
}

/* sysbar color override */
    #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;}

#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
}



/**  kmmedia css  **/
        
.page-width {width:1064px}
.info-width {width:826px}
.side-width {width:300px}
.init-height {height:422px;}
.width-expand {width:100%;}

.box-centered {margin:0 auto}
.box-center-center {position: absolute; top:0; bottom: 0; left: 0; right:0; margin: auto;}


.show {display: block}
.hide {display: none}
.hideModal {display: none}

.transitionOn {transition: all .4s ease;}

.loading {background: url("../../../../../../sys/res/icon/loading2.gif") center no-repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 0; }


#sharePanel {float:left;}

#titlePanel {padding: 0px 10px; position: relative; overflow: hidden;}
    #titlePanel .title { width: 100%; font-weight: bold;}

#controlPanel {float: right; padding: 2px 2px;}
    #controlPanel ul.btn-list {padding: 0; margin: 0; list-style: none;}
    #controlPanel ul.btn-list>div, #controlPanel ul.btn-list>li {display: inline-block;}
    #controlPanel .control-btn { position: relative; color: #535353; width: 56px; text-align: center; font-size: 12px; padding-top: 28px; cursor: pointer; opacity: 0.7; transition: opacity 0.1s linear; }
    #controlPanel .control-btn:before { content: ""; display: inline-block; background-repeat: no-repeat; background-image: url(../../../../../../sys/res/icon/media_control.png); width: 28px; height: 28px; position: absolute; top: 2px; right: 0; left: 0; margin: auto; }
    #controlPanel .control-btn[role="settings"]:before      {background-position: -28px 0px;}
    #controlPanel .control-btn[role="index"]:before       {background-position: -28px -28px;}
    #controlPanel .control-btn[role="note"]:before          {background-position: -28px -56px;}
    #controlPanel .control-btn[role="discuss"]:before       {background-position: -28px -84px;}
    #controlPanel .control-btn[role="fullscreen"]:before    {background-position: -28px -112px;}
    #controlPanel .control-btn[role="practice"]:before    {background-image: url(../../../../../../sys/res/icon/challange.png); background-position: 0px 0px;}
    #controlPanel .control-btn:hover {opacity: 1;}
    #controlPanel .control-btn:active:before {transform: scale(0.94); transform-origin: center;}

    /*active*/
    #controlPanel .control-btn.active, #controlPanel .open>.control-btn[role="settings"] {opacity: 1 ; color: #6698f3;}
    #controlPanel .open>.control-btn[role="settings"]:before    {background-position: -56px 0px;}
    #controlPanel .control-btn.active[role="index"]:before    {background-position: -56px -28px;}
    #controlPanel .control-btn.active[role="note"]:before       {background-position: -56px -56px;}
    #controlPanel .control-btn.active[role="discuss"]:before    {background-position: -56px -84px;}
    #controlPanel .control-btn.active[role="fullscreen"]:before {background-position: -56px -112px;}
    #controlPanel .control-btn.active[role="practice"]:before    {background-position: 0px -28px;}

    /* setting dropdown triangle position */
    #controlPanel .dropdown-menu:before {left: 20px;}
    #controlPanel .dropdown-menu:after  {left: 21px;}
    #controlPanel .pull-right > .dropdown-menu:before {left: initial; right: 20px;}
    #controlPanel .pull-right > .dropdown-menu:after  {left: initial; right: 21px;}

    
    

#contentFrame {margin-top:20px; margin-bottom: 80px; }


#info-container {}
    #info-container .horizontal-margin {padding: 0px;}

#list-container {}
    #list-container .breadcrumb {border-bottom: 1px solid #CCC}

#list-container {
    list-style: none;
}
    #list-container .chapter {font-size: 15px; margin-top: 30px; font-weight: bold; border-bottom: 1px solid #DDD;}
    #list-container .chapter:first-of-type {margin-top: 0px}
    #list-container .item {margin-top: 5px; padding: 5px;}
    #list-container .item:hover {background: #fffef3; cursor: pointer;}
    #list-container .it$lockClassem:hover .title {color: #0F91F1;}
    #list-container .curr, #list-container .curr:hover {background: #fff9e8;}
    #list-container .desc {}
    #list-container .title {font-size: 13px; max-height: 42px;}
    #list-container .mod_contentList a, #list-container .mod_contentList a:active {color: #000; text-decoration: none;}
    
    /* priv lock icon */
    #list-container .item .photo {position: relative;}
    #list-container .item .photo .glyphicon-lock { position: absolute; left: 5px; top: 4px; color: #FFF; opacity: 0.8; text-shadow: 0px 0px 1px #000; font-size: 0.8em; }


.clearfix:before, .clearfix:after {content: ""; display: table;}  /* ignore the coding style to minimize the space */
.clearfix:after {clear: both;}
.clearfix {*zoom: 1; /*For IE 6&7 only*/}


@media (max-width: 1199px) {

    .info-width {
        width:626px;
    }
}

@media (max-width: 991px) {

    #infoindexFrame {
        display: none;
    }

    .info-width {
        width:100%;
    }

    .side-width {
        width: 100%;
    }
}

@media (max-width: 767px) {

    /* hide editor tools when window is narrow */
    #controlPanel, .addModuleArea, .fs-index-editor-toolbar, .tool,
    .step .item:hover .step-menu,
    .step.is-admin .item:hover .grab,
    .faqBox .grab {
        display: none;
    }

    #ctrl-container {
        padding: 0;
    }
}


@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .logo {
        background-image: url('../../../../../../sys/res/icon/logo/sysbar_logo_3x.png');
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background-image: url('../../../../../../sys/res/icon/logo/sysbar_logo_3x.png');
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .logo {
        background-image: url('../../../../../../sys/res/icon/logo/sysbar_logo_3x.png');
    }
}