.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: 26px;
    padding: 0 5px;
    float:  left;
    line-height: 26px;
    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% - 26px);
    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:  35px;    
    text-align:  center;    
    border-radius:  3px;    
    margin-right:  3px;
}
.videohref{
	color:#999 !important;
}
.speedhref{
	width:20px;
}

.icon-currentRecord{
	display:none;
	width:16px;
	height:16px;
	position:absolute;
	right:5px;
	top: 5px;
	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%;
}