/** 
  div.video-box                         盒模型,子类名继承该前缀
  ├─ form.video-box-login               用户登录表单
  │  ├─ div.form-group                  ip,user,password
  │  │  ├─ label               
  │  │  └─ input               
  │  ├─ div.form-group ...              div.form-group                  
  │  ├─ label.checkbox                  是否记住密码  
  │  │  └─ input
  │  └─ button.video-box-submit         表单提交
  │
  ├─ div.video-box-wrap                 容器,等比缩放
  │  ├─ div.video-box-player            播放器
  │  └─ div.video-box-controller        播放控制
  │     ├─ div                          云台控制及播放状态
  │     └─ iframe                       用于遮挡视频               
  │
  ├─ ul.video-box-list                  播放列表
  │  ├─ li.video-box-list-item          列表项   
  │  │  └─ div.video-box-wrap           容器,等比缩放
  │  │     ├─ h3.@video-state           视频名称       z-index = 0
  │  │     ├─ div.video-box-player      播放器         z-index = -1
  │  │     └─ div.video-box-controller  播放控制       z-index = 0
  │  │        ├─ div                    云台控制及播放状态    
  │  │        └─ iframe                 用于遮挡视频   z-index = -1 
  │  └─ li ...
  │ 
  ├─ div.video-box-logout               退出登录
  │  └─ button.video-box-submit         表单提交
  │
  └─ textarea.video-box-logs            日志
*/
.video-box{position:relative;width:100%;height:100%;margin:0;padding:0;border:none;font-family:"微软雅黑", arial, sans-serif;font-size:14px;font-weight:normal;line-height:1.5;color:#000;background-color:#FFF}.video-box *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.video-box-login{width:80%;max-width:300px;margin:auto;padding:20px;border:1px solid #ccc;border-radius:5px;background:#FFF;box-shadow:0 0 10px #CCC}.video-box-login div{margin-bottom:10px}.video-box-login label{display:block}.video-box-login label.checkbox{float:right;padding-top:5px}.video-box-login input{margin:0;padding:5px 10px;border:1px solid #ccc;border-radius:5px;font:inherit;color:inherit}.video-box-login input[type="text"],.video-box-login input[type="password"]{width:100%;height:35px}.video-box-login input[type="text"]:focus,.video-box-login input[type="password"]:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6)}.video-box-submit{margin:0;padding:5px 10px;font:inherit;background-color:#337ab7;color:#fff;border:1px solid #ccc;border-radius:5px;border-color:#2e6da4}.video-box-submit:active{color:#fff;background-color:#286090;border-color:#204d74}.video-box-submit:hover{font-weight:bold}.video-box-wrap{position:relative;width:100%;height:0;padding-bottom:61.8%;background-color:#000;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover}.video-box-wrap h3{position:absolute;width:100%;height:100%;margin:0;padding:5px 0 0 5px;font:inherit;color:#fff}.video-box-wrap h3.online{background-image:url("../images/online.png");background-position:center center;background-repeat:no-repeat}.video-box-wrap h3.offline{background-image:url("../images/offline.png");background-position:center center;background-repeat:no-repeat}.video-box-player{position:absolute;display:block;object-fit:fill;width:100%;height:100%;background:#000}.video-box-controller{position:absolute;width:100%;height:100%}.video-box-controller iframe{position:absolute;visibility:inherit;z-index:-1;width:100%;height:100%;margin:0;padding:0;border:none;filter: alpha(opacity=0);background:rgba(0, 0, 0, 0)}.video-box-controller div{position:absolute;width:100%;height:100%}.video-box-controller div.onpause{background-image:url("../images/onpause.png");background-position:center center;background-repeat:no-repeat}.video-box-controller div.onload{background-image:url("../images/onload.png");background-position:center center;background-repeat:no-repeat}.video-box-controller div.onend{background-image:url("../images/onend.png");background-position:center center;background-repeat:no-repeat}.video-box-controller div.up{background-image:url("../images/up.png");background-position:top center;background-repeat:no-repeat}.video-box-controller div.down{background-image:url("../images/down.png");background-position:bottom center;background-repeat:no-repeat}.video-box-controller div.left{background-image:url("../images/left.png");background-position:center left;background-repeat:no-repeat}.video-box-controller div.right{background-image:url("../images/right.png");background-position:center right;background-repeat:no-repeat}.video-box-controller div.zoomin{background-image:url("../images/zoomin.png");background-position:center center;background-repeat:no-repeat}.video-box-controller div.zoomout{background-image:url("../images/zoomout.png");background-position:center center;background-repeat:no-repeat}.video-box-list{margin:0;padding:0;list-style:none}.video-box-list-item{position:relative;display: block;width: 100%!important;min-height:1px;margin:20px 0;list-style:none}.video-box-list-item:first-child{margin-top: 0px}.video-box-logs{position:fixed;left:0;bottom:0;width:100%;min-height:240px;padding:10px;font:inherit}.clearfix:after,.clearfix:before,.video-box-list:after,.video-box-list:before{content:" ";display:table}.clearfix:after,.video-box-list:after{clear:both}