.num-1{
    width: 100%;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height: 100%;
    position:  relative;
}
div[name="video-folder"]:hover .con-foot{
    display:  block;
}
.num-4{
    width: 50%;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height: 50%;
    float: left;
    position:  relative;
}
.num-8-1{
	width:75%;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height: 75%;
    float: left;
    position:  relative;
}
.num-8-3{
	width:25%;    
	border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height:25%;
    float: left;
    position:  relative;
}
.num-8-4{
	width:25%;    
	border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height:25%;
    float: right;
    position:  relative;
}
.num-9{
    width:33.33%;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    height:33.33%;
    float: left;
    position:  relative;
}
.num-16{
    width: 25%;    
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    border-left: none;
    border-bottom: none;
    height: 25%;
    float: left;
    position:  relative;
}
.loading{
    width: 100%;
    height: 100%;
    background: #eee;
    opacity: .5;
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}
.con-head{
    height: 30px;
    padding: 0 5px;
    float:  left;
    line-height: 30px;
    background: #272B34;
    width: 100%;
    color:#c8c8c8;
    border-bottom: 1px solid #333;
    position: relative;
}
.current{
	background: #999;
	color: #389F37;
	font-size:14px;
	background: #111;
    font-weight: bold;
}

.con-content{
    height: calc(100% - 30px);
    float:  left;
    width: 100%;
    background: #000000;
}
.con-foot{
    height: 35px;
    padding: 0 5px;
    line-height: 35px;
    background: #272B34;
    width: 100%;
    border-top: 1px solid #333;
    float:  left;
    position:  absolute;
    bottom: 0;
    display:  none;
}
.videohref{
    cursor:  pointer;    
    display:  inline-block;    
    border: 1px solid #666;
    background: #333;    
    height: 22px;    
    line-height: 22px;    
    width:  32px;    
    text-align:  center;    
    border-radius:  3px;    
    margin-right:  3px;
}
.videohref{
	color:#999 !important;
}
.speedhref{
	width:20px;
}
.timeLine {
    height: 55px;
    border-bottom:1px solid #c8c8c8;
    background:#ddd;
    margin:10px 0;
}

.timeLine-left {
    float:  left;
    width:  90px;
    text-align:  center;
    font-weight:bold;
    font-size:14px;
    line-height:  55px;
    border-right: 1px solid #c8c8c8;
}

.timeLine-right {
    float:  left;
    width: calc(100% - 91px);
    height: 100%;
}
.icon-currentRecord{
	display:none;
	width:16px;
	height:16px;
	position:absolute;
	right:5px;
	top:7px;
	background:url('../images/icon-right.png') no-repeat center center;
}
.con-head.current>.icon-currentRecord{
	display:inline-block;
}
.panel-header, .panel-body{
    border-color: #2f3748;
}

/* block-icon */
.block-icon{
    display: inline-block;
    width: 30px;
    height: 21px;
    margin: 7px 5px;
    cursor: pointer;
}
.block-1{
	background:url(../images/1.png) no-repeat 100% 100%/100% 100%;
}
.block-1-selected{
	background:url(../images/1-1.png) no-repeat 100% 100%/100% 100%;
}
.block-4{
	background:url(../images/4-1.png) no-repeat 100% 100%/100% 100%;
}
.block-4-selected{
	background:url(../images/4-1-1.png) no-repeat 100% 100%/100% 100%;
}
.block-9{
	background:url(../images/9-1.png) no-repeat 100% 100%/100% 100%;
}
.block-9-selected{
	background:url(../images/9-1-1.png) no-repeat 100% 100%/100% 100%;
}
.block-16{
	background:url(../images/16.png) no-repeat 100% 100%/100% 100%;
}
.block-16-selected{
	background:url(../images/16-1.png) no-repeat 100% 100%/100% 100%;
}
