body {
    min-height:700px;
}

#liveView {
    position: absolute;
    top: 25px;
    left: 49px;
    right: 49px;
    bottom: 25px;
    border-left:solid 1px #999999;
    border-right:solid 1px #999999;
}

#divLeft {
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    width:261px;
    background-color:#FFFFFF;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

#divRight {
    position:absolute;
    right:0px;
    top:0px;
    bottom:0px;
    width:260px;
    background-color:#FFFFFF;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

#divLeft.close{
    width:16px;
}

#divRight.close{
    width:16px;
}

#leftTop,#rightTop{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    height:30px;
    background-color:#FFFFFF;
    border-bottom: 1px solid #999999;
    cursor:pointer;
}

#leftTop>.curMenu{
    position: absolute;
    top: 3px;
    left: 15px;
    color: #666666;
}

#chlStat{
    position: absolute;
    top: 3px;
    color: #666666;
}

#rightTop>.curMenu{
    position: absolute;
    top: 3px;
    left: 35px;
    color: #fff;
    color: #666666;
}

#leftTop b{
    border-right: #2C3039 8px solid;
    border-top: transparent 8px solid;
    border-bottom: transparent 8px solid;
    border-left: transparent 8px solid;
    font-size: 0px;
    width: 0px;
    line-height: 0;
    position: absolute;
    top: 6px;
    right: 10px;
    height: 0px;
}

#leftTop:hover b{
    border-right: #FFBF00 8px solid;
}

#leftTop b .b_mask{
    border-right: 4px solid #FFFFFF;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    width: 0px;
    height: 0px;
    left: 0px;
    top: -4px;
}

#rightTop b{
    border-right: transparent 8px solid;
    border-top: transparent 8px solid;
    border-bottom: transparent 8px solid;
    border-left: #2C3039 8px solid;
    font-size: 0px;
    width: 0px;
    line-height: 0;
    position: absolute;
    top: 6px;
    left: 10px;
    height: 0px;
}

#rightTop:hover b{
    border-left: #FFBF00 8px solid;
}

#rightTop b .b_mask{
    border-left: 4px solid #FFFFFF;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    width: 0px;
    height: 0px;
    left: -8px;
    top: -4px;
}

#leftTop_close,#rightTop_close
{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    background-color:#FFFFFF;
    cursor:pointer;
    display:none;
}

#leftTop_close b{
    border-right: transparent 8px solid;
    border-top: transparent 8px solid;
    border-bottom: transparent 8px solid;
    border-left: #2C3039 8px solid;
    font-size: 0px;
    width: 0px;
    line-height: 0;
    position: absolute;
    top: 6px;
    left:4px;
    height: 0px;
}

#leftTop_close:hover b{
    border-left: #FFBF00 8px solid;
}

#leftTop_close b .b_mask{
    border-left: 4px solid #FFFFFF;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid transparent;
    width: 0px;
    height: 0px;
    left: -8px;
    top: -4px;
}

#rightTop_close.disabled b,#rightTop_close.disabled:hover b{
    border-right: #585858 8px solid;
}

#rightTop_close b{
    border-right: #2C3039 8px solid;
    border-top: transparent 8px solid;
    border-bottom: transparent 8px solid;
    border-left: transparent 8px solid;
    font-size: 0px;
    width: 0px;
    line-height: 0;
    position: absolute;
    top: 6px;
    left: -4px;
    height: 0px;
}

#rightTop_close:hover b{
    border-right: #FFBF00 8px solid;
}

#rightTop_close b .b_mask{
    border-right: 4px solid #FFFFFF;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    width: 0px;
    height: 0px;
    left: 0px;
    top: -4px;
}

.thume{
    line-height: 1px;
    height: 10px;
    background-color: transparent;
}

.thume>span
{
    border: none;
    width: 100%;
    height: 1px;
}

.thume>.thume_top
{
    width: 30px;
    background-color: #C5C5C5;
    margin-bottom: 2px;
}

.thume>.thume_center
{
    background-color: #999999;
}

.thume>.thume_bottom
{
    width: 30px;
    background-color: #C5C5C5;
    margin-top: 3px;
}

#leftBottom,#rightBottom
{
    position:absolute;
    left:0px;
    top:32px;
    right:0px;
    bottom:0px;    
}

#chlCmd
{
    overflow-y: auto;
    overflow-x: hidden;
    bottom:140px !important;
}


.childPL{
    position:absolute;
    display:none;
    top:5px;
    left:15px;
    right:5px;
}

#leftBottom .childPL{
    bottom:110px;
}

#rightBottom .childPL{
    bottom:120px;
}

#leftBottomMenu{
    position:absolute;
    height:98px;
    bottom:0px;
    left:0px;
    right:0px;
}

#rightBottomMenu{
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

.menuName{
    position:relative;
    height:32px;
    background-color:#FFFFFF;
    font-size:13px;
    color:#676767;
    font-weight:bold;
    cursor:pointer;
    border-top: 1px solid #999;
}

.menuName:hover{
    color:#313131;
    background-color:#E1FBFF;
}

.menuName.open{
    color:#fff;
    background-color:#00BBDB;
}

.menuName.disabled, .menuName.disabled:hover{
    color:#D9D9D9;
    cursor:default;
    background-color:#FFFFFF;
}

#muChlTree>b
{
    background-image:url(../Pictures/Live/menu_chl.png);
}

#muChlGroup>b
{
    background-image:url(../Pictures/Live/menu_group.png);
}
#muChlView>b
{
    background-image:url(../Pictures/Live/menu_view.png);
}

#muPtz>b
{
    background-image:url(../Pictures/Live/menu_ptz.png);
}

#muCmd>b
{
    background-image:url(../Pictures/Live/menu_cmd.png);
}
#muFishEye{
    display: none;
}

.menuName>b
{
    position:absolute;
    top:0px;
    left:15px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    background-repeat:no-repeat;
    width:30px;
    height:32px;
}

.menuName:hover>b{
    background-position:-30px 0px;
}
.menuName.open>b{
    background-position:-60px 0px;
}

.menuName.disabled>b{
    background-position:-90px 0px;
}

.menuName>span
{
    position:absolute;
    top:6px;
    left:60px;
}

#txtSearchChl
{
    width:163px;
    height:23px;
    float:left;
}

#btnSearchChl
{
    background-image:url(../Pictures/toolbar_search.png);
    float:left;
}

#btnRefreshChl
{
    background-image:url(../Pictures/toolbar_refresh.png);
    float:left;
}

#chlListPL
{
    position:absolute;
    top:30px;
    left:0px;
    right: 0px;
    bottom:0px;
    overflow: auto;
}

#objChlList
{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
}

#chlGroupList{
    position:absolute;
    top:5px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow:auto;
}

.i_chl_group{
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    background-repeat:no-repeat;
    background-image:url(../Pictures/group_icon_s.png);
    width:25px;
    height:14px;
    margin-right:8px;
}

#chlGroupList .selected .i_chl_group
{
    background-position:-25px 0px;
}

#chlOfGroupList{
    position:absolute;
    top:5px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow:auto;
}

.listbox_row
{
    font-size:13px;
    padding:5px 3px 5px 10px;
    height:20px;
}

.groupIcon
{
    width:16px;
    height:16px;
    background-image:url(../Pictures/chlGroup.png);
    margin: 3px 8px 0px 0px;
    float:left;
}

.listbox_row .valueTd
{
    float:left;
}

.listbox_row.selected .groupIcon,.listbox_row.selected .dwellIcon
{
    background-position: -16px 0px;
}

#divCenter
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:16px;
    right:16px;    
    border-left:solid 1px #999999;
    border-right:solid 1px #999999;
}

#divCenter.showLeft
{
    left:261px;
    right:16px;
}

#divCenter.showRight
{
    right:260px;
    left:16px;
}

#divCenter.showLeft.showRight
{
    left:261px;
    right:260px;
}

#divLiveOCX{
    position:absolute;
    top:0px;
    bottom:50px;
    left:0px;
    right:0px;        
    background-color:#787878;
}

#screenCtrl
{
    position:absolute;
    height:50px;
    bottom:0px;
    left:0px;
    right:0px;        
    background-color:#FFFFFF;
    border-top: solid 1px #696969;
    border-bottom: solid 1px #999999;
    padding:0px 10px 0px 0px;
}

#screenCtrl>.ctrl_1
{
    position:relative;
    width:34px;
    height:34px;
    float:left;
    margin-left:10px;
    margin-top:8px;
    cursor:pointer;
}

#screenCtrl>.ctrl_2
{
    position:relative;
    width:34px;
    height:34px;
    float:right;
    margin-left:10px;
    margin-top:8px;
    cursor:pointer;
}

#screenCtrl .ctrl_1:hover, #screenCtrl .ctrl_2:hover
{
    background-position: -34px 0px;
}

#screenCtrl .ctrl_1.selected, #screenCtrl .ctrl_2.selected
{
    background-position: -68px 0px;
}

#screenCtrl .ctrl_1.disabled, #screenCtrl .ctrl_2.disabled
{
    background-position: -102px 0px;
}

#seg_1
{
    background-image:url(../Pictures/Live/seg_1.png?v=2);
}

#h-seg-3
{
    background-image:url(../Pictures/Live/seg_3.png?v=2);
}

#seg_4
{
    background-image:url(../Pictures/Live/seg_4.png?v=2);
}

#h-seg-5
{
    background-image:url(../Pictures/Live/seg_5.png?v=2);
}

#h-seg-7
{
    background-image:url(../Pictures/Live/seg_7.png?v=2);
}

#seg_9
{
    background-image:url(../Pictures/Live/seg_9.png?v=2);
}

#seg_16
{
    background-image:url(../Pictures/Live/seg_16.png?v=2);
}

#seg_8
{
    background-image:url(../Pictures/Live/seg_8.png?v=2);
}

#seg_10
{
    background-image:url(../Pictures/Live/seg_10.png?v=2);
}

#h-seg-10
{
    background-image:url(../Pictures/Live/hallway_seg_10.png?v=2);
}

#seg_17
{
    background-image:url(../Pictures/Live/seg_17.png?v=2);
}

#seg_21
{
    background-image:url(../Pictures/Live/seg_21.png?v=2);
}

#seg_25
{
    background-image:url(../Pictures/Live/seg_25.png?v=2);
}

#seg_33
{
    background-image:url(../Pictures/Live/seg_33.png?v=2);
}

#seg_36
{
    background-image:url(../Pictures/Live/seg_36.png?v=2);
}

#seg_49
{
    background-image:url(../Pictures/Live/seg_49.png?v=2);
}


#seg_64
{
    background-image:url(../Pictures/Live/seg_64.png?v=2);
}

#seg_100
{
    background-image:url(../Pictures/Live/seg_100.png?v=2);
}

#seg_selector
{
    background-image:url(../Pictures/Live/seg_selector.png);
}

#osd_switch
{
    background-image:url(../Pictures/Live/OSD.png);
    background-position: 0px 0px;
}

#osd_switch.on
{
    background-position: -68px 0px;
}

#full_screen
{
    background-image:url(../Pictures/Live/full_screen.png);
}

#stream_selector_all
{
    position:relative;
    height:34px;
    float:left;
    margin-left:10px;
    margin-top:8px;
    font-size:0px;
}

#stream_selector
{
    position:relative;
    height:34px;
    float:left;
    margin-left:20px;
    margin-top: 0px;
    font-size:0px;
}

#subStreamTitle
{
    position:relative;
    float:left;
    margin-left:20px;
    margin-top:30px;
    font-size:15px;
    display:none;
}

#stream_selector_all>div
{
    cursor:pointer;
    font-size:15px;
    min-width:80px;
    max-width:130px;
    text-align:center;
    padding:6px 3px 6px 3px;
    background-color:#fff;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#stream_selector>div
{
    cursor:pointer;
    font-size:14px;
    width:88px;
    text-align:center;
    padding:6px 3px 6px 3px;
    background-color:#fff;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mainStreamAll,#mainStream
{
    border:solid 1px #888;
}

#subStreamAll,#subStream
{
    border-top:solid 1px #888;
    border-right:solid 1px #888;
    border-bottom:solid 1px #888;
}

#stream_selector_all>div:hover,#stream_selector>div:hover
{
    color:#313131;
    background-color:#E1FBFF;
}

#stream_selector>div.selected{
    color:#fff;
    background-color:#00BBDB;
}

#stream_selector_all>div.disabled,#stream_selector_all>div:hover.disabled,#stream_selector>div.disabled,#stream_selector>div:hover.disabled
{
    background-color:#F0F0F0;
    border:solid 1px #ccc;
    color:#A0A0A0;
    cursor:default;
}

#stream_param
{
    position: relative;
    float: left;
    margin-left: 20px;
    margin-top: 5px;
    display: none;
}

#stream_param>div
{
    margin-top: 5px;
}

.stream_param_label
{
    width: 80px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
}

#manual_trigger_alarm
{
    background-image:url(../Pictures/Live/manual_trigger_alarm.png);
}

#view_all_chl.close_all_chl
{
    background-image:url(../Pictures/Live/close_all_chl.png);
}

#view_all_chl.open_all_chl
{
    background-image:url(../Pictures/Live/open_all_chl.png);
}

#rec_all_chl
{
    background-image:url(../Pictures/Live/start_rec_all_chl.png);
}

#rec_all_chl.on
{
    background-image:url(../Pictures/Live/stop_rec_all_chl.png);
}

#remote_rec_all_chl
{
    background-image:url(../Pictures/Live/start_remote_rec_all_chl.png);
}

#remote_rec_all_chl.on
{
    background-image:url(../Pictures/Live/stop_remote_rec_all_chl.png);
}

#talk
{
    background-image:url(../Pictures/Live/start_talk.png);
}

#talk.on
{
    background-image:url(../Pictures/Live/stop_talk.png);
}

#other_seg_pl
{
    display:none;
    width:385px;
    height:47px;
    border:solid 1px #ccc;
    z-index:100;
    position:absolute;
    top:-49px;
    left:-10px;
    background-color: #FFFFFF;
}

#other_seg_pl_bk
{
    display:none;
    width:387px;
    height:49px;
    z-index:99;
    position:absolute;
    top:-49px;
    left:-10px;
}

#other_seg_pl>.ctrl_1
{
    width:34px;
    height:34px;
    float:left;
    margin-left:8px;
    margin-top:8px;
    cursor:pointer;
    display:none;
}

#h-seg-warp{
    float:left;
    margin-left:8px;
    margin-top:8px;
    border-left: 1px solid #999;
    width: 170px;
}
#h-seg-warp>.h-seg
{
    width:34px;
    height:34px;
    float: left;
    margin-left:8px;
    cursor:pointer;
}

#seg_selector.disabled:hover #other_seg_pl,#seg_selector.disabled:hover #other_seg_pl_bk
{
    display:none;
}

#alarmOutList_bk
{
    display:none;
    width:572px;
    height:402px; 
    z-index:199;
    position:absolute;
    right:0px;
}

#alarmOutList
{
    display:none;
    width:570px;
    height:400px;
    position:absolute;
    z-index:200;
    border:solid 1px #666;
    right:0px;
    background-color: #FFFFFF;
}

/*#cmdTop
{
    padding-left: 26px;
}*/

.cmdItem{
    position:relative;
    width:70px;
    height:70px;
    float:left;
    margin:20px 2px;
    cursor:pointer;
    color:#676767;
}

#CloseImg
{
    background-image:url(../Pictures/Live/close_chl.png);
}

#Snap
{
    background-image:url(../Pictures/Live/capture.png);
}

#StartRec
{
    background-image:url(../Pictures/Live/rec.png);
}

#StartRec.on
{
    background-image:url(../Pictures/Live/recing.png);
}

#StartRemoteRec
{
    background-image:url(../Pictures/Live/remote_rec.png);
}

#StartRemoteRec.on
{
    background-image:url(../Pictures/Live/remote_recing.png);
}

#PTZCtrl
{
    background-image:url(../Pictures/Live/ptz.png);
}

#Talk
{
    background-image:url(../Pictures/Live/talk.png);
}

#Talk.on
{
    background-image:url(../Pictures/Live/talking.png);
}

#Magnify
{
    background-image:url(../Pictures/Live/magnify.png);
}

#Minify
{
    background-image:url(../Pictures/Live/minify.png);
}

#Magnify3D
{
    background-image:url(../Pictures/Live/magnify3d.png);
}

#Talkback{
    background-image:url(../Pictures/Live/ipcTalkBack.png);
}

#Talkback.on{
    background-image:url(../Pictures/Live/ipcTalkBacking.png);
}

#OriginalDisplay{
    background-image:url(../Pictures/Live/originalDisplay.png);
}

#OriginalDisplay.on{
    background-image:url(../Pictures/Live/originalDisplaying.png);
}

#Audio{
    position:relative;
    height:80px;
    float:left;
    margin:3px;
    color:#676767;
    width:251px;
}

#Audio>b
{
    position:absolute;
    top:5px;
    left:11px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    background-repeat:no-repeat;
    width:54px;
    height:50px;
    background-image:url(../Pictures/Live/sound.png);
    cursor: pointer;
}

#Audio>b:hover{
    background-position:-54px 0px;
}

#Audio.disabled>b,#Audio.off.disabled>b
{
    background-position:-162px 0px;
    cursor:default;
}

#Audio.disabled>b:hover,#Audio.off.disabled>b:hover
{
    background-position:-162px 0px;
}

#Audio.disabled>span
{
    color:#ccc;
}

#Audio.off>b{
    position:absolute;
    top:5px;
    left:11px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    background-repeat:no-repeat;
    width:54px;
    height:50px;
    background-image:url(../Pictures/Live/sound_close.png);
}

#Audio.off>b:hover{
    background-position:-54px 0px;
}


#Audio>span{
    position:absolute;
    top:60px;
    left:-3px;
    width:80px;
    display:inline;
    text-align:center;
}

#AudioValue
{
    position:absolute;
    top:48px;
    right:30px;
    width:50px;
    height:30px;
    text-align:right;
    color:#CBCBCB;
    font-weight:bold;
    font-size:18px;
    display: none;
}

.sound_border
{
    position:absolute;
    top:20px;
    left:70px;
    width:162px;
    height:19px;
}

.sound_line
{
    background-image: url(../Pictures/Live/sound_line.png);
    position: absolute;
    left: 0px;
    top: 5px;
    width: 145px;
    height: 9px;
}

#Audio.off .sound_line {
    background-position: -145px 0px;    
}

.sound_thumb
{
    background-image: url(../Pictures/Live/sound_thumb.png);
    z-index: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 11px;
    height: 18px;
}

#Audio .sound_thumb:hover {
    background-position: -11px 0px;    
}

#Audio.off .sound_thumb {
    background-position: -33px 0px;
}

.cmdItem.on,.cmdItem.on:hover
{
    background-position: -140px 0px;
}

.cmdItem:hover
{
    background-position: -70px 0px;
}

.cmdItem.disabled,.cmdItem.disabled:hover
{
    background-position: -210px 0px;
    cursor:default;
}

.cmdItem>span
{
    position:absolute;
    top:65px;
    left:0px;
    right:0px;
    display:block;
    text-align:center;
}

.cmdItem.disabled>span
{
    color:#ccc;
}

/*PTZ*/
#PtzPane
{
    position:absolute;
    top:21px;
    left:26px;
    width:182px;
    height:140px;
}

#PtzPane>div
{
    position:relative;
    width:55px;
    height:36px;
    float:left;
    margin:2px;
}

#Ptz_LU
{
    background-image: url(../Pictures/HoulderControl/LU.png?v=1);
}

#Ptz_U
{
    background-image: url(../Pictures/HoulderControl/U.png?v=1);
}

#Ptz_RU
{
    background-image: url(../Pictures/HoulderControl/RU.png?v=1);
}

#Ptz_L
{
    background-image: url(../Pictures/HoulderControl/L.png?v=1);
}

#Ptz_Stop
{
    background-image: url(../Pictures/HoulderControl/Stop.png?v=1);
}

#Ptz_R
{
    background-image: url(../Pictures/HoulderControl/R.png?v=1);
} 

#Ptz_LD
{
    background-image: url(../Pictures/HoulderControl/LD.png?v=1);
}

#Ptz_D
{
    background-image: url(../Pictures/HoulderControl/D.png?v=1);
}

#Ptz_RD
{
    background-image: url(../Pictures/HoulderControl/RD.png?v=1);
}

#Ptz_U:hover,#Ptz_RU:hover,#Ptz_R:hover,#Ptz_RD:hover,#Ptz_D:hover,#Ptz_LD:hover,#Ptz_L:hover,#Ptz_LU:hover,#Ptz_Stop:hover
{
    cursor:pointer;
    background-position:-55px 0px;
}

#Ptz_U.active,#Ptz_RU.active,#Ptz_R.active,#Ptz_RD.active,#Ptz_D.active,#Ptz_LD.active,#Ptz_L.active,#Ptz_LU.active,#Ptz_Stop.active
{
    background-position:-110px 0px;
}

#PtzPane > .disabled
{
    cursor: default;
    background-position: -165px 0px;
}
#cruiseCtrl > .disabled
{
    cursor: default;
    background-position:200px 0px;
}
#presetCtrl >.disabled{
    cursor: default;
    background-position: 200px 0px;
}
#liPreset >.disabled{
    cursor: default;
    background-position: -86px  0px; !important;
}

#presetCtrl >.disabled{
    cursor: default;
    background-position: 200px 0px;
}
#liPreset >.disabled{
    cursor: default;
    background-position: -86px  0px; !important;
}

#speedPL
{
    position:absolute;
    left:24px; 
    top:160px;
}

#sliderSpeed
{
    position:absolute;
    left:20px; 
    top:0px;
}

#btnSlow
{
    position:absolute;
    left: 5px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: url(../Pictures/HoulderControl/SpeedSlow.png?v=2);
}

#btnQuick
{
    position:absolute;
    left: 167px;
    top: 4px;
    width: 12px;
    height: 12px;
    background-image: url(../Pictures/HoulderControl/SpeedQuick.png?v=2);
}

#btnSlow:hover,#btnQuick:hover
{
    cursor:pointer;
    background-position:-16px 0px;
}

#speedPL > .disabled
{
    cursor: default;
    background-position: -48px 0px;
}

#speedPL > .disabled > .slider_line
{
    cursor: default;
    background-position: -501px 0px;
}

#speedPL > .disabled > .slider_thumb
{
    cursor: default;
    background-position: -63px 0px;
}

#imgCtrlPL
{
    position:absolute;
    left:17px;
    top:186px;
    font-size:0px;
}

#imgCtrlPL .row
{
    position:relative;
    height:30px;
    font:left;
    margin:0px 0px 5px 0px;
}

#imgCtrlPL .row .leftBtn
{
    position:absolute;
    width:47px;
    height:30px;
    left:0px;
    top:0px;
}

#imgCtrlPL .row .leftArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:49px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_left.png?v=2);
}

#imgCtrlPL .row .ctrlName
{
    position:absolute;
    width:95px;
    height:30px;
    left:50px;
    top:0px;
    text-align:center;
    font-size:15px;
    color:#898989;
    padding:4px 0px 0px 0px;
}

#imgCtrlPL .row .rightArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:117px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_right.png?v=2);
}

#imgCtrlPL .row .rightBtn
{
    position:absolute;
    width:47px;
    height:30px;
    left:147px;
    top:0px;
}

#imgCtrlPL .row .disabled
{
    cursor: default;
    background-position: -141px 0px;
}

#zoomIn
{
    background-image:url(../Pictures/HoulderControl/ZoomIn.png?v=2);
}

#zoomOut
{
    background-image:url(../Pictures/HoulderControl/ZoomOut.png?v=2);
}

#focusIn
{
    background-image:url(../Pictures/HoulderControl/FocusOut.png?v=2);
}

#focusOut
{
    background-image:url(../Pictures/HoulderControl/FocusIn.png?v=2);
}

#irisIn
{
    background-image:url(../Pictures/HoulderControl/IrisOut.png?v=2);
}

#irisOut
{
    background-image:url(../Pictures/HoulderControl/IrisIn.png?v=2);
}

#zoomIn:hover,#zoomOut:hover,#focusIn:hover,#focusOut:hover,#irisIn:hover,#irisOut:hover
{
    cursor:pointer;
    background-position:-47px 0px;
}

#zoomIn.active,#zoomOut.active,#focusIn.active,#focusOut.active,#irisIn.active,#irisOut.active
{
    cursor:pointer;
    background-position:-94px 0px;
}

#trace
{
    width:47px;
    height:30px;
    position:absolute;
    left:0px;
    top:0px;
    background-image:url(../Pictures/HoulderControl/trace.png?v=2);
}

#scan
{
    width:47px;
    height:30px;
    position:absolute;
    left:49px;
    top:0px;
    background-image:url(../Pictures/HoulderControl/scan.png?v=2);
}

#wiper
{
    width:47px;
    height:30px;
    position:absolute;
    left:98px;
    top:0px;
    background-image:url(../Pictures/HoulderControl/wiper.png?v=2);
}

#light
{
    width:47px;
    height:30px;
    position:absolute;
    left:147px;
    top:0px;
    background-image:url(../Pictures/HoulderControl/light.png?v=2);
}

#trace:hover,#scan:hover,#wiper:hover,#light:hover
{
    cursor:pointer;
    background-position:-47px 0px;
}

#trace.on,#scan.on,#wiper.on,#light.on
{
    cursor:pointer;
    background-position:-94px 0px;
}

#trace.on:hover,#scan.on:hover,#wiper.on:hover,#light.on:hover
{
    cursor:pointer;
    background-position:-141px 0px;
}

#imgCtrlPL .row #trace.disabled,#imgCtrlPL .row #scan.disabled,#imgCtrlPL .row #wiper.disabled,#imgCtrlPL .row #light.disabled
{
    cursor: default;
    background-position: -188px 0px;
}

#presetCruisePL
{
    position:absolute;
    top:300px;
    left:15px;
    right:15px;
    bottom:29px;
}

/*Tab*/
.tab
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.tab ul
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    padding:0px;
    z-index:8;
}

.tab li
{
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

.tab a
{
    float: left;
    line-height: 31px;
    width:86px;
    padding:0px;
    text-decoration: none;
}

#liPreset
{
    position:absolute;
    left:0px;
    top:0px;    
}

#liCruise
{
    position:absolute;
    left:73px;
    top:0px;    
}

#liPreset a
{
    background-image:url(../Pictures/HoulderControl/PresetTab.png?v=2);
    background-position: -86px 0px;
    outline: none;
}

#liPreset a.active
{
    background-position: 0px 0px;
}

#liCruise a
{
    background-image:url(../Pictures/HoulderControl/CruiseTab.png?v=2);
    background-position: -86px 0px;
    outline: none;
}

#liCruise a.active
{
    background-position: 0px 0px;
}

#preset_Add:hover.disabled,#preset_Delete:hover.disabled,#preset_SavePosition:hover.disabled,#cruise_play:hover.disabled,#cruise_stop:hover.disabled{
    background-position: 200px 0px;
}

.tab .tabContent
{
    position: absolute;
    top: 30px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-top:1px solid #898989;
    border-right:1px solid #898989;
    border-left:1px solid #898989;
    border-bottom:1px solid #898989;
    z-index:7;
}

#divPreset
{
    position:absolute;
    top:0px;
    left:12px;
    right:12px;
    bottom:0px;
}

#divCruise
{
    position:absolute;
    top:0px;
    left:12px;
    right:12px;
    bottom:0px;
}

#cruiseCtrl
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:23px;
    text-align:right;
    font-size:0px;
    border-bottom: 1px solid #898989;
}

#presetCtrl
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    text-align:right;
    font-size:0px;
    border-bottom: 1px solid #898989;
}

#presetList
{
    position:absolute;
    top:24px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow:auto;
    width: 90%;
}

#cruiseList
{
    position:absolute;
    top:24px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow:auto;
}

#presetList .listbox_row .valueTd
{
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cruiseList .listbox_row .valueTd
{
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listbox_row
{
    font-size:13px;
    padding:5px 3px 5px 10px;
    border:solid 1px #fff;
}

.listbox_row.alter
{
    background-color: transparent;
}

.listbox_row:hover
{
    border:solid 1px #00BBDB;
    background-color:#fff;
}

.listbox_row.selected
{
    background-color: #00BBDB;
}

.listbox_row div.button {
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    width:12px;
    height:12px;
    margin:5px 10px 0px 0px;
}

.listbox_row div.preset_call
{
    background-image:url(../Pictures/Live/call.png);
}

.listbox_row div.preset_call:hover
{
    background-position:-12px 0px;
}

.listbox_row div.edit
{
    background-image:url(../Pictures/Live/edit.png);
}

.listbox_row div.edit:hover
{
    background-position:-12px 0px;
}

/*通道列表*/
.chlIcon
{
    width:16px;
    height:16px;
    background-image:url(../Pictures/chl_icon.png);
    background-repeat:no-repeat;
    margin: 3px 8px 0px 0px;
    float:left;
}

.listbox_row.online .chlIcon
{
    background-position: 0px 1px;
}

.listbox_row.online:hover .chlIcon
{
    background-position: -16px 1px;
}

.listbox_row.play .chlIcon
{
    background-position: -32px 1px;
}

.listbox_row.offline .chlIcon
{
    background-position: -48px 1px;
}

#divPreset .listbox_row,#divCruise .listbox_row {
    padding: 0px 3px 1px 10px;
    border: none;
}

#divPreset .listbox_row:hover,#divCruise .listbox_row:hover {
    color: #313131;
    background-color: #E1FBFF;
}

#divPreset .listbox_row.selected,#divCruise .listbox_row.selected
{
    color: #FFFFFF;
    background-color: #00BBDB;
}

#cruiseCtrl>div
{
    width:40px;
    height:16px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/    
    margin:3px 3px 0px 0px;
}

#presetCtrl>div
{
    width:40px;
    height:16px;
    display: inline-block;
    zoom: 1; /*IE only*/ *display:inline;/*Only IE know this code (CSS Hack)*/
    margin:3px 3px 3px 0px;
}

#cruise_play
{
    background-image:url(../Pictures/HoulderControl/start_cruise.png);
}

#cruise_stop
{   
    background-image:url(../Pictures/HoulderControl/stop_cruise.png);
}

#preset_Add
{
    background-image:url(../Pictures/HoulderControl/preset_Add.png);
}

#preset_Delete
{
    background-image:url(../Pictures/HoulderControl/preset_Delete.png);
}

#preset_SavePosition
{
    background-image:url(../Pictures/HoulderControl/preset_SavePosition.png);
}

#cruise_play:hover,#cruise_stop:hover
{
    cursor:pointer;
    background-position:-40px 0px;
}
#preset_Delete:hover,#preset_SavePosition:hover,#preset_Add:hover
{
    cursor:pointer;
    background-position:-40px 0px;
}

#cmdErrorMsg_tip
{
    float:left;
    margin:5px 0px 0px 5px;
}

#topRollMsg
{
    position:fixed;
    width:400px;
    height:300px;
    bottom:0px;
    right:0px;
    background-color:#fff;
    z-index:51;
    border:solid 1px #ccc;
    display:none;
}

#topRollMsg_title
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:36px;
    color:#666666;
    border-bottom: 1px solid #CCCCCC;
}

#topRollMsg_title>span
{
    position:absolute;
    left:13px;
    top:8px;
    font-size:16px;
}

#topRollMsg_close
{
    position:absolute;
    right:6px;
    top:6px;    
    width:25px;
    height:25px;
    background-image:url(../Pictures/close.png?v=4);
}

#topRollMsg_close:hover
{
    background-position:-25px 0px;
}

#topRollMsg_content
{
    position:absolute;
    top:47px;
    left:15px;
    right:15px;
    bottom:10px; 
    overflow-x:hidden;
    overflow-y:auto;
}

#topRollMsg_bk
{
    position:fixed;
    width:402px;
    height:302px;
    bottom:0px;
    right:0px;
    z-index:50;
    display:none;
}

#topRollMsg_content>div
{
    padding:3px 8px 3px 8px;
    font-size:13px;
    word-break:break-all;
}

#topRollMsg_content>div:hover
{
    background-color: #E1FBFF;
}

#topRollMsg_content>div.selected
{
    padding: 4px 8px 4px 8px;
    background-color: #00BBDB;
}


/*lensCtrl*/
#lensCtrl div{
    border-radius: 4px;
}

#sizeCtrl{
    position:absolute;
    top: 20px;
}

#minifyCtrl{
    position:absolute;
    text-align:center;
    width: 20px;
    height: 20px;
    top:5px;
    background: url(../Pictures/HoulderControl/SpeedSlow.png?v=2);
    background-position: -12px 3.5px;
    background-repeat: no-repeat;
    border:solid black 1px;
}

#magnifyCtrl{
    position:absolute;
    text-align:center;
    width: 20px;
    height: 20px;
    top:5px;
    left:130px;
    background-image: url(../Pictures/HoulderControl/SpeedQuick.png?v=2);
    background-position: -12px 3.5px;
    background-repeat: no-repeat;
    border:solid black 1px;
}

#lensCtrl #sizeCtrl .leftArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:29px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_left.png?v=2);
}

#lensCtrl #sizeCtrl .ctrlName
{
    position:absolute;
    width:42px;
    height:30px;
    left:55px;
    top:0px;
    text-align:center;
    font-size:15px;
    /*color:#898989;*/
    padding:4px 0px 0px 0px;
}

#lensCtrl #sizeCtrl .rightArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:97px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_right.png?v=2);
}

#focusMode{
    position:absolute;
    top: 100px;
}

#focusMode .focusMode{
    position:absolute;
    width: 90px;

}

#focusMode #focusType{
    position:absolute;
    left: 100px;
}

#focusCtrl{
    position:absolute;
    top: 150px;
}

#manulFocus{
    position:absolute;
}
#minifyFocus{
    position:absolute;
    text-align:center;
    width: 20px;
    height: 20px;
    top:5px;
    background: url(../Pictures/HoulderControl/SpeedSlow.png?v=2);
    background-position: -12px 3.5px;
    background-repeat: no-repeat;
    border:solid black 1px;
}

#magnifyFocus{
    position:absolute;
    text-align:center;
    width: 20px;
    height: 20px;
    top:5px;
    left:130px;
    background-image: url(../Pictures/HoulderControl/SpeedQuick.png?v=2);
    background-position: -12px 3.5px;
    background-repeat: no-repeat;
    border:solid black 1px;
}

#focusCtrl #manulFocus .leftArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:29px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_left.png?v=2);
}

#focusCtrl #manulFocus .ctrlName
{
    position:absolute;
    width:42px;
    height:30px;
    left:55px;
    top:0px;
    text-align:center;
    font-size:15px;
    /*color:#898989;*/
    padding:4px 0px 0px 0px;
}

.disabled #autoFocusWhenIRCutModeMsg{
    color:#898989;
}

#focusCtrl #manulFocus .rightArr
{
    position:absolute;
    width:27px;
    height:10px;
    left:97px;
    top:10px;
    background-image:url(../Pictures/HoulderControl/arr_right.png?v=2);
}

#autoFocusing{
    position:absolute;
    text-align:center;
    width: 68px;
    height: 40px;
    top:0px;
    left:170px;
    border:solid black 1px;

}

#autoFocus{
    position:absolute;


}

#autoFocus .timeInterval{
    position:absolute;
    width: 90px;
}

#autoFocus #changeTimeInterval{
    position:absolute;
    left: 140px;
}

#changeFocusAlarm{
    position:absolute;
    top: 200px;
    color: red;
}

#switchAutoFocus{
    position:absolute;
    top: 240px;
}

#saveLensCtrl{
    text-align: center;
    position:absolute;
    bottom: 40px;
    left: 150px;
}

#magnifyCtrl:hover,#minifyCtrl:hover,#minifyFocus:hover,#magnifyFocus:hover{
    background-position:4px 3.5px;
}

#muLens>b
{
    background-image:url(../Pictures/Live/lens_control.png);
}

#magnifyCtrl,#minifyCtrl,#minifyFocus,#magnifyFocus,#autoFocusing{
    cursor: pointer
}

#magnifyCtrl:hover,#minifyCtrl:hover,#minifyFocus:hover,#magnifyFocus:hover,#autoFocusing:hover{
    color:#313131;
    background-color:#E1FBFF;
}

#chlGroup_top,#chlGroup_bottom
{
    overflow: auto;
}

#chlGroup_control{
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    height:33px;
    text-align: center;
}

.chlGroupBtn{
    min-width: 23%;
    max-width: 24%;
    background-color: #8F8F8F;
    color: #fff;
    border: solid 1px #8F8F8F;
    padding: 3px 8px 3px 8px;
    cursor: pointer;
}
#chlView_control{
    position:absolute;
    bottom:50px;
    left:0px;
    right:0px;
    height:33px;
    text-align: center;
}

#installTypeWarp{
    margin-top: 15px;
}
#installTypeWarp > a{
    float: left;
    width: 61px;
    height: 57px;
    margin: 0 10px;
    display: none;
}
#installTypeWarp > a:hover{
    background-position: -61px 0;
}
#installTypeWarp > a.selected{
    background-position: -122px 0;
}
#installTypeWarp > a.disabled{
    background-position: -183px 0;
}


#top_360, #floor_360{
    background-image: url(../Pictures/Live/topFloor_360.png);
}
#top_2x180, #floor_2x180{
    background-image: url(../Pictures/Live/topFloor_2x180.png);
}
#top_360_6PTZ, #floor_360_6PTZ{
    background-image: url(../Pictures/Live/topFloor_6PZ.png);
}