/*
 * 文件描述:  CSS MODULE
 * 对应功能页： index.htm-playback
 * 期望执行浏览器：所有浏览器
 * 修改记录: By gao_shanmei 2013-05-10.
 */
/*回放*/
.playback-video-container {
    margin: 0 225px 0 0;
    min-height: 390px;
    background: #000000;
}
.playback-video-container .main-video {
    margin: 0 auto;
}
.playback-right-container {
    width: 215px;
    height: 100%;
    min-height: 390px;
    position: relative;
    left: 0;
    top: 0;
}
.playback-tip {
    width: 100%;
}
.playback-tip-color {
    float:left;
    min-width: 60px;
}
[class^="playback-tip-color-"] {
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    margin: 8px 4px 0 10px;
}
.playback-tip-color-selected {
    /*见  skin.css*/
}
.playback-tip-color-havevideo {
     /*见  skin.css*/
}
.playback-tip-color-both {
     /*见  skin.css*/   
}
.palyback-starttime {
    padding: 0;
    margin-left: 6px; 
}

.palyback-starttime input {
    width: 20px;
}
.playback-button {
    float: left;
    display: block;
    width: 24px;
    height: 24px;
    margin: 1px 0 0 0;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.playback-button-disabled {
    /*见skin.css*/
}
.playback-button-icon-search {
    display: block;
    width: 24px;
    height: 24px;
    background-position: -480px -120px;
}
.playback-button:hover .playback-button-icon-search {
    background-position: -480px -150px;
}
.playback-button-disabled:hover .playback-button-icon-search{
    background-position: -480px -120px;
}
.playback-download {
    width: 215px;
    display:inline-block;
    margin-top: 10px;
}
.playback-dates {
    display: inline-block;
    width: 213px;
    margin: 1px;
    overflow-y: auto;
    overflow-x: hidden; 
      -moz-user-select: none;
    -khtml-user-select: none;
           user-select: none;
}
.playback-filelist {
    display: inline-block;
    width: 100%;
    height: 310px;
    overflow: hidden;
}
.playback-dates-title {
    width: 100%;
    height: 24px;
    background: #434343;
}
.playback-filelist ul {
    width: 100%;
    overflow: hidden;
}
.playback-dates-title li,
.playback-dates-row0 li,
.playback-dates-row1 li {
    float: left;
    line-height: 24px;
    text-align: center;
}
.playback-dates-title li.fn-textleft {
    text-align: left;
}
.playback-dates-row li input[type="checkbox"] {
    display: block;
    width: 20px;
    height: 16px;
    padding:4px;
    margin: 2px auto;
}
[class^= "playback-dates-type-"] {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px 10px auto 10px;
}
.playback-tipbar [class^= "playback-dates-type-"] {
    margin: 8px 15px auto 2px;  
}
.playback-dates-type-red {
    /*见  skin.css*/
}
.playback-dates-type-yellow {
    /*见  skin.css*/
}
.playback-dates-type-green {
    /*见  skin.css*/
}
.playback-dates-type-blue {
    /*见  skin.css*/
}
.playback-dates-icon-down {
    float: left;
    display: block;
    width: 24px;
    height: 24px;
    background-position: -210px 0;
}
.playback-dates-icon-down:hover {
    background-position: -210px -30px;    
}
.playback-dates-icon-down-disabled,
.playback-dates-icon-down-disabled:hover {
    background-position: -210px -60px; 
}
.playback-dates-icon-delect {
    background-position: -210px -120px;
}
.playback-dates-icon-delect:hover {
    background-position: -210px -150px;    
}
.playback-dates-down-text {
    float: left;
    display: block;
    line-height: 24px;
}
.playback-pageview {
    float: right;
    width: 100%;
    height: 24px;
    padding-top: 4px;
}
.playback-detail {
    display: inline-block;
    margin: 1px;
    padding-left: 4px;
    background: #434343;
}

.playback-down-icons {
    position: absolute;
    bottom: 4px;
}
/*playback-bottom*/
.playback-bottom {
    clear: both;
    width: 100%;
    height: 125px;
    padding-top: 4px;
}
.playback-iconbar {
    height: 34px;
    margin-bottom: 10px;
    background-position: 0 -566px;
    background-repeat: repeat-x;
}
.play-bottom-iconbg,
.play-bottom-bigicon {
    float: left;
    display: block;
    width: 28px;
    height: 28px;
    margin: 3px 10px auto 0; 
    background-position: -300px 0;
    background-repeat: no-repeat;
    cursor: pointer;   
}
.play-bottom-bigicon {
    width: 50px;
    height: 50px;
    margin: 1px 10px auto 0;
    background-position: -300px -60px;
}
.play-bottom-iconbg:hover,
.play-bottom-iconbg-current {
    background-position: -300px -30px;    
}
.play-bottom-bigicon:hover,
.play-bottom-bigicon-current {
    background-position: -300px -120px;
}
[class^= "play-bottom-icon-"] {
    display: block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.play-bottom-icon-play {
    background-position: -30px 0; 
}
.play-bottom-icon-pause {
    background-position: -30px -60px; 
}
.play-bottom-icon-stop {
    background-position: -30px -30px; 
}
.play-bottom-icon-next {
    background-position: -30px -120px; 
}
.play-bottom-icon-slow {
    background-position: -30px -150px; 
}
.play-bottom-icon-fast {
    background-position: -30px -180px;
}
.play-bottom-icon-fisheye{
    background-position: 0 -330px;
}
.play-bottom-icon-sound {
    background-position: -30px -210px;
}
.play-bottom-iconbg-disabled .play-bottom-icon-sound,
.play-bottom-iconbg-disabled:hover .play-bottom-icon-sound{
    background-position: -30px -240px;
}
.playback-iconbox {
    float: left;
    height: 34px; 
}
.playback-iconbg {
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 34px;
    z-index: 444;
}
.playback-icons {
    position: relative;
    left: 0;
    top: 0;
    z-index: 555;
    padding-left: 20px;
}
.playback-iconbg-left,
.playback-iconbg-right{
    float: left;
    width: 19px;
    height: 36px;
    margin: 0 0 auto 20px;
    background-repeat: no-repeat;
    background-position: -300px -180px;
}
.playback-iconbg-right {
    background-position: -319px -180px;
    margin: 0 20px auto 0;
}
.playback-progress {
    height: 50px;
}
.playback-progress-title {
    position:relative;
    height:16px;
    margin: 0px 1px 2px 1px;
}
.playback-progress-title li {
    float: left;
    width: 49px;
    height: 20px;
    line-height: 20px;
    text-align: left;
}
.playback-progress-grid {
    position: relative;
    width: 100%;
    height: 10px;
    overflow: hidden;
}
.playback-on-play {
    position: absolute;
    top: 0px;
    left: -3px;
    width: 5px;
    height: 10px;
    background-position: -480px -180px; 
    z-index: 999;
    overflow: hidden;
}
.playback-time {
    width:100%;
    position:relative;
}
.playback-timetip {
    position: absolute;
    top: 2px;
    left: 0;
    width: 64px;
    height: 16px;
    padding-left: 16px;
    z-index: 0;
}
.playback-tipbar {
    height: 20px;
    overflow: hidden;
}

.playback-cut{
    width: 238px;
    height: 27px;
    margin: 3px 10px 0 0;
    background-position: 0 -537px;
    background-repeat: repeat-x;
}
.playback-cut-begin-time,
.playback-cut-end-time,
.playback-cut-download{
    width: 45px;
    height: 27px;
    background: url(../image/playback.png) no-repeat;
}
.playback-cut-time{
    width: 148px;
    height: 27px;
    line-height: 27px;
}
.playback-cut-begin-time{
    background-position: 0 0;
}
.playback-cut-begin-time-hover{
    background-position: 0 -36px;
}
.playback-cut-end-time{
    background-position: -103px 0;
}
.playback-cut-end-time-hover{
    background-position: -103px -36px;
}
.playback-cut-download{
    background-position: -45px 0;
}
.playback-cut-download-hover{
    background-position: -45px -36px;
}
.playback-cut-download-cancel{
    background-position: -148px 0;
}
.playback-cut-download-cancel:hover{
    background-position: -148px -36px;
}
.playback-cut-download-precent{
    position: absolute;
    top: 0;
    left: 45px;
    background-color: #3199DC;
    width: 0;
    height: 26px;
}
#playback_pic{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border: none;
    margin-bottom: 0;
    vertical-align: bottom;
    outline: none;
    cursor: pointer;
}
#ocx{
    position: relative;
}

.playback-fisheye{
    float: left;
    position: relative;
    z-index: 1000;
    height: 24px;
    padding-left: 10px;
}
.playback-fisheye-mode{
    height: 116px;
    border:1px #7e7e7e solid;
    margin-left: 38px;
    zoom:1;
    overflow: hidden;
    background: #000;
    background: rgba(0,0,0,0.8);
    filter:alpha(opacity=80);    
}
.playback-fisheyeOCX-list{  
    float: left;     
}
.playback-fisheyeOCX-list li{
    float: left;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('../image/playback-fisheye.png');
}
#playback-fisheye-fitMode{
    width: 41px;   
}
#playback-fisheye-fitMode li{
    border-top:1px #7e7e7e solid;
    border-right:1px #7e7e7e solid;
    margin-top: -1px;
}
#playback-fisheye-fitMode li.current{
    border-right: none;
}
#playback-fisheye-playMode{
    width: 260px;   
}
#playback-fisheye-playMode li{
    margin:10px 0 0 10px;
}