ul, li { list-style: none outside none;}
/*login-layout-style*/
.J_login{ width:100%; height:317px; margin-top:-200px; background: url(../image/bg.png) 0px 50px repeat-x; text-align:center; position:absolute; left:0; top:-10000px;}
.J_login_con{ width:484px; height:317px; margin:0 auto; background:url(../image/lgbg.jpg) no-repeat;}
.J_logo{ width:474px; height:56px; padding-top:25px; margin:0 auto; background:url(../image/loginlogo.jpg) no-repeat bottom;}
.J_logoEx{ background:url(/custom_image/loginlogo.jpg) no-repeat bottom;}
.J_login_input{ width:170px; height:20px; line-height:18px;}
.J_loginbox{ padding-top:30px;}
.J_loginbox ul li{ padding-bottom:10px;}
.J_loginbox .J_login_type li{ padding-bottom:0px;}
.J_indexbtn{ clear:both; height:26px; margin-top:10px;padding-top:0px; margin-left:170px;}
.J_indexbtn a{ float:left; width:79px;}
/*content-head-style*/
.J_content{ position:absolute; top:-10000px; left:0; width:100%;}
.J_sub_content{ padding:0; height:100%;}
.J_head{ width:100%; height:56px; position:relative;}
.J_sublogo{ position:absolute; left:5px; width:165px; height:55px; background:url(../image/logo.jpg) no-repeat;}
.J_sublogoEx{ background:url(/custom_image/logo.jpg) no-repeat;}
.J_nav{ position:absolute; left:175px; top:26px; height:30px;}
.J_nav li{ float:left;}
.J_nav li a{ display: block; width:116px; height:30px; line-height:30px; margin-left:1px; background:url(../image/pre.png) -240px -170px no-repeat; font-size:14px; text-align:center; font-weight:bold;}
.J_nav li a:hover,.J_nav li a.J_nav_curren{ background-position: -240px 0;}
.J_alarmtip{ float:left; position:relative; top:-27px; left:10px; width:36px; height:26px; background:url(../image/alert.gif) no-repeat;text-align:center; cursor:pointer;}
/*preview-layout-style*/
.J_preview{ width:100%; position:absolute; left:0;}
.J_preview_left{ float:left; width:140px; height:700px;}
.J_preview_center{ position:absolute; left:160px; right:160px; height:700px;}
.J_preview_right{ float:right; width:140px; height:700px;}
/*preview-left-channel-style*/
.J_channel_title{ width:100%; height:30px; line-height:30px; text-align:left; background:url(../image/pre.png) 0px -170px no-repeat;}
.J_channel_title h1{ float:left; text-indent:10px; font-weight:bold;}
.J_refresh{ float:right; margin-right:5px; margin-top:5px; display:block; width:20px; height:20px; background:url(../image/pre.png) no-repeat;}
.J_refresh:hover{ background-position:-20px 0;}
.J_channel_out,J_channel_sel{ width:130px; height:500px; padding:10px 5px; background:#5B5B5B; background:#5C5C5C url(../image/indexbar.png) no-repeat 0 -263px;}
.J_channel_sel{background-position:-377px -25px;}
.J_channelbox{float:left; width:130px; height:500px;overflow:hidden;}
.J_channel_con{ float:left; width:126px;overflow:hidden;}
.J_channel_item{display:block; float:left;width:110px; height:23px; background:url(../image/pre.png) no-repeat -377px 0;}
.J_channel_item:hover{float:left; display:block; width:110px; height:23px;  background:url(../image/prebtnbg.png) repeat-x;}
.J_channel_item span{ display:block; float:left; height:23px; line-height:23px; margin-right:0px; text-align:left;}
.J_channel_icon{ width:25px; background:url(../image/pre.png) no-repeat -377px 0;}
.J_yellow{ background-position:-377px -25px;}
.J_green{ background-position:-377px -50px;}
.J_channel_text{ width:65px;}
.J_word_white{color:#373737;}
.J_channel_item .J_channel_tip{ float:left;margin-left:3px;}
.J_channel_item.J_selbtn{ width:25px; margin-left:-1px;}
.J_channel_item .J_channel_sound,.J_channel_item .J_channel_sound_close{ float:right; width:15px; height:15px; margin-top:6px; background:url(../image/pre.png) -73px -124px no-repeat}
.J_channel_item .J_channel_sound_close{ background-position:-88px -124px;}
.J_channel_mu { margin-top:2px;display:block;float:right; width:15px;background:#5B5B5B; height:18px; background:url(../image/icons.png) -215px -63px; no-repeat;}
.J_channel_stream{display:none; background: #C0C0C0; border: 1px solid #464646;width:100px;float:right;text-align:left;}
.J_channel_itemlist{display:none;}
.J_channel_itemlist{ display:block; width:118px; height:18px; line-height:18px; border-width:0 1px 1px; border-style:solid; text-align:left; background:url(../image/prebtnbg.png) 0px -41px repeat-x;}
.J_channel_itemlist a:hover,.J_channel_itemlist a.J_current{ background-position:0 -23px;}
.J_channel_itemlist a span{ clear:both; float:left; display:block; width:29px; height:10px; margin-top:4px;}
.J_channel_itemlist .J_current span{ background:url(../image/pre.png) -380px -75px no-repeat;}
.J_channel_itemlist a label{ display:block; float:left; line-height:16px;}
.J_channel_font{text-align:center;padding-top:5px;color:#000000;float:right;letter-spacing:0.5pt;font-size:8px}
/*preview-left-channel-slider-style*/
.J_channel_sliderbg{ float:right; width:4px; height:500px;}
.J_channel_slider{ position:absolute; width:4px; height:10px; line-height:10px;}
/*preview-left-bottom-style*/
.J_preview_leftbot{ clear:both; padding-top:10px; position:relative; left:0; top:0;}
.J_pre_lb{ width:132px; margin:0 auto;position: relative;float: left}
.J_pre_lb a{ float:left; margin-right:0; margin-bottom:4px;}
.J_pre_lb a.cdj1{background:#FFFFFF;}
.J_pre_lb a.cdj2{background:#C0C0C0;}
.J_pre_lb .J_selbtn{ width:25px; margin-left:-1px;}
.J_selectbtn{ display:block; width:25px; height:24px; background:url(../image/pre.png) -40px 0;}
.J_btn .J_lb_label{ display:block; width:100px; height:24px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
.J_lb_open{ background-position:-376px -92px;}
.J_lb_speak{ background-position:-376px -118px;}
.J_lb_record{ background-position:-376px -140px;}
.J_lb_local{ background-position:-376px -164px;}
/*preview-left-bottom-popup-style*/
.J_lb_popup{ position:absolute; top:23px; right:4px; z-index:100; width:100px;border:1px solid #000000;background-color:#FFFFFF;}
.J_lb_popup a{ display:block; width:100%; line-height:20px; margin:0; text-align:left; text-indent:10px;}
.J_lb_popup a.cdj1{background:#FFFFFF;}
.J_lb_popup a.cdj1:hover {background:#C0C0C0;}
.J_lb_popup a.cdj2{background:#C0C0C0;}

.J_yl_popup{ position:absolute; top:88px; right:4px; z-index:100; width:100px;border:1px solid #000000;background-color:#FFFFFF;}
.J_yl_popup2{ position:absolute; top:138px; right:4px; z-index:100; width:100px;border:1px solid #000000;background-color:#FFFFFF;}
.J_yl_popup3{ position:absolute; top:96px; right:4px; z-index:100; width:100px;border:1px solid #000000;background-color:#FFFFFF;}
.J_yl_popup4{ position:absolute; top:156px; right:4px; z-index:100; width:100px;border:1px solid #000000;background-color:#FFFFFF;}
.J_yl_popup a{ display:block; width:100%; line-height:20px; margin:0; text-align:left; text-indent:10px;}
.J_yl_popup2 a{ display:block; width:100%; line-height:20px; margin:0; text-align:left; text-indent:10px;}
.J_yl_popup3 a{ display:block; width:100%; line-height:20px; margin:0; text-align:left; text-indent:10px;}
.J_yl_popup4 a{ display:block; width:100%; line-height:20px; margin:0; text-align:left; text-indent:10px;}

/*preview-right-ptz-style*/
.J_pr_ptz{ width:140px; padding-top:10px;}
.J_pr_ptzcon,.J_pr_fouse{ display:inline-block; width:120px; margin-left:10px;}
.J_pr_ptzcon a{float:left; display:block; width:30px; height:30px; margin-right:10px; margin-bottom:15px;  }
a.yt1,a.yt2,a.yt3,a.yt4,a.yt6,a.yt7,a.yt8,a.yt9{ background:url(../image/pre.png) 0 -25px no-repeat;}
.J_pr_ptzcon a:hover{ background-position:-30px -25px;}
.J_pr_ptzcon a.yt5,a.yt5_selt,.J_pr_ptzcon a.yt5_disable{ width:36px; height:36px; margin:-3px 7px 7px -3px;background:url(../image/pre.png) -72px -19px no-repeat;}
.J_pr_ptzcon a.yt5:hover{ background-position:-108px -19px;}
.J_pr_ptzcon a.yt5_selt{background-position:-108px -19px;}
.J_pr_ptzcon a span{ display:block; width:30px; height:30px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
a.yt1 span{ background-position: 0 -55px;}
a.yt2 span{ background-position: -30px -55px;}
a.yt3 span{ background-position: -60px -55px;}
a.yt4 span{ background-position: -90px -55px;}
a.yt6 span{ background-position: -120px -55px;}
a.yt7 span{ background-position: -150px -55px;}
a.yt8 span{ background-position: -180px -55px;}
a.yt9 span{ background-position: -210px -55px;}
.J_pr_fouse{ clear:both; padding-top:10px;}
.J_pr_fouse a{ display:block; float:left; width:30px; height:30px; margin-bottom:5px; background:url(../image/pre.png) 0 -25px no-repeat;}
.J_pr_fouse a:hover{ background-position:-30px -25px}
.J_pr_add span,.J_pr_less span{ display:block; width:30px; height:30px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
.J_pr_add span{ background-position: -240px -55px;}
.J_pr_less span{ background-position: -270px -55px;}
.J_pr_text{ display:block; float:left; width:50px; height:30px; line-height:30px; margin-bottom:5px; text-align:center;}
/*preview-right-ptz-advance-style*/
.J_adv_ptz{ height:210px;overflow:hidden;}
.J_pr_subtab{ clear:both; width:139px; height:25px; padding-left:1px; background:url(../image/prebtnbg.png) 0px -59px repeat-x;}
.J_pr_subtab a{ display:block; float:left; width:69px; height:25px; line-height:25px; overflow:hidden;}
.J_pr_subtab a.J_current{ background:url(../image/pre.png) -166px 0 no-repeat;}
.J_adv_ptzcon{ height:180px; padding-top:10px; padding-left:1px;}
.J_adv_ptzcon a{ display:block; float:left; margin-right:1px; margin-top:5px;}
.J_adv_ptzcon a span{ float:left; display:block; width:16px; height:24px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
.J_start{ background-position:0 -92px;}
.J_stop{ background-position:-16px -92px;}
.J_set{ background-position:-32px -92px;}
.J_add{ background-position:-48px -92px;}
.J_del{ background-position:-64px -92px;}
.J_view{ background-position:-80px -92px;}
.J_adv_ptzcon a label{ float:left; width:50px; height:24px; line-height:24px; text-align:left; word-break:break-all; word-wrap:break-word;}
.J_adv_ptzcon a.J_width43 label{ width:27px;}
.J_adv_item{ padding-top:10px; text-align:left;}
.J_adv_padt5{ padding-top:5px;}
.J_adv_pos p{ display:block; margin-top:5px; margin-bottom:5px;}
.J_adv_pos a{ margin-left:18px; _margin-left:9px;}
.J_adv_fzcon p{ height:24px;}
.J_adv_fzcon input{ display:block; float:left; margin-top:6px;}
.J_adv_fzcon label{ padding-left:4px; line-height:24px;}
/*preview-right-ptz_others*/
.J_boatX{ width:93px; height:93px; margin:10px auto; background:url(../image/preboat.png) no-repeat 0 0; text-align:left; overflow:hidden;  left:0; top:0;}
.J_boatX div{ position:relative; width:40px; height:25px; text-align:left; cursor:pointer;}
.J_boatX .J_boat1{ top:2px; left:25px;}
.J_boatX .J_boat2{ top:1px; left:0px; width:30px; height:35px;}
.J_boatX .J_boat3{ top:-28px; left:35px; width:22px; height:22px;}
.J_boatX .J_boat4{ top:-60px; left:60px; width:30px; height:40px;}
.J_boatX .J_boat5{ top:-65px; left:25px;}
.imag1{background-position:0 -93px;}
.imag2{background-position:0 -186px;}
.imag3{background-position:0 -279px;}
.imag4{background-position:0 -372px;}
.imag5{background-position:0 -465px;}
/*preview-right-ptz_open*/
.J_adv_ptz_open,.J_adv_ptz_close{ display:block; clear:both; width:140px; height:10px; background:url(../image/prebtnbg.png) 0 -104px repeat-x;}
.J_adv_ptz_open:hover,.J_adv_ptz_close:hover{ background-position:0 -114px;}
.J_adv_ptz_open span,.J_adv_ptz_close span{ display:block; width:16px; height:10px; margin:0 auto; background:url(../image/pre.png) -16px -152px no-repeat;}
.J_adv_ptz_open:hover span{ background-position: 0px -152px;}
.J_adv_ptz_close span{ background-position:-48px -152px;}
.J_adv_ptz_close:hover span{ background-position: -32px -152px;}
/*preview-center-vedio-style*/
.J_preview_video{  position: relative; width: 100%; height: 100%; }
.pre-center-con {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1001;
}
.pre-center-video {
    position: absolute;
    bottom: 0;
	left: 0;
    width: 100%;
    height: 23px;
    padding-top: 1px;
    z-index: 1001;
}
.pre-center-video .ui-video-iconbar {
    position: relative;
    left: 0;
    top: 0;
}
.J_vedio_control{ width:100%; height:24px; text-align:left; text-indent:6px;}
.J_vedio_control a{ display:inline-block; width:23px; height:17px; margin-right:4px; margin-top:3px; background:url(../image/pre.png) -162px -120px no-repeat;}
.J_vedio_control a:hover,.J_vedio_control a.J_current{ background-position: -162px -137px;}
.J_vedio_control a span{ display:block; width:23px; height:17px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
.J_vc_hd{ background-position:-185px -120px;}
.J_vc_smooth{ background-position:-208px -120px;}
.J_vc_screen{ background-position:-231px -120px;}
.J_vc_screen1{ background-position:-254px -120px;}
.J_vc_screen4{ background-position:-277px -120px;}
.J_vc_screen6{ background-position:-300px -120px;}
.J_vc_screen8{ background-position:-323px -120px;}
.J_vc_screen9{ background-position:-185px -137px;}
.J_vc_screen13{ background-position:-208px -137px;}
.J_vc_screen16{ background-position:-231px -137px;}
.J_vc_screen20{ background-position:-254px -137px;}
.J_vc_screen25{ background-position:-277px -137px;}
.J_vc_screen36{ background-position:-300px -137px;}
/*CENTER*/

.playback_bg{ width:100%; height:30px; background:url(../image/btnbg.png) repeat-x 0 -304px; overflow:hidden; position:relative; left:0; top:0; z-index:12;}
.playback_covertop{ width:100%; height:30px; background:url(../image/btnbg.png) repeat-x 0 -304px; position:relative; left:0; top:0; z-index:12;}
.playback_coverbottom{ padding-left:10px; position:relative; left:0; top:0; z-index:10;}
.playback_sliderbox{ float:left; margin:8px 20px auto 0; position:relative; left:0; top:0; width:350px; height:13px; background:url(../image/btnbg.png) repeat-x 0 -337px;}
.playback_slider{ float:left; width:6px; height:13px; background:url(../image/pre.png) no-repeat -67px -149px;}
.playback_right{ float:left; }
.playback_right a{ float:left; width:26px; height:26px; margin:2px 10px auto 0; background:url(../image/p1.png) no-repeat;}
.playback_right a.p1{ background-position:0 0;}
.playback_right a.p1:hover,.playback_right a.p11{ background-position:-26px 0;}
.playback_right a.p2{ background-position:0 -26px;}
.playback_right a.p2:hover,.playback_right a.p21{ background-position:-26px -26px;}
.playback_right a.p3{ background-position:0 -52px;}
.playback_right a.p3:hover,.playback_right a.p31{ background-position:-26px -52px;}
.playback_right a.p4{ background-position:0 -78px;}
.playback_right a.p4:hover,.playback_right a.p41{ background-position:-26px -78px;}
.playback_right a.p5{ background-position:0 -104px;}
.playback_right a.p5:hover,.playback_right a.p51{ background-position:-26px -104px;}

/*preview-righ-bottomt-image*/
.J_img{ margin-top:10px;}
.J_imgcon{ padding-top:10px; height:150px;}
.J_img_item{ width:136px; height:26px; padding-left:4px;}
.J_img_item a,.J_img_item span{ float:left; display:block;}
.J_img_item span{ width:18px; height:16px; background-image:url(../image/pre.png); background-repeat:no-repeat;}
.J_light{ background-position:-143px -120px;}
.J_black{ background-position:-143px -136px;}
.J_saturate{ background-position:-143px -152px;}
.J_hue{ background-position:-143px -168px;}
.J_pre_slider_left,.J_pre_slider_right{ width:13px; height:13px; margin-top:3px; margin-right:5px; background:url(../image/pre.png) -17px -120px no-repeat;}
.J_pre_slider_left:hover{ background-position:-30px -120px;}
.J_pre_slider_right{ background-position:-17px -133px; margin-right:0;}
.J_pre_slider_right:hover{ background-position:-30px -133px;}
.J_pre_sliderbg{ float:left; width:70px; height:19px; margin-right:5px; background:url(../image/prebtnbg.png) 0 -84px repeat-x; position:relative; left:0; top:0;}
.J_pre_slider{ position:relative; width:10px; height:19px; background:url(../image/pre.png) -46px -120px no-repeat; cursor:pointer;}
.J_pre_slider:hover{ background-position:-56px -120px}
.J_img_btn{ text-align:center;}
.J_img_btn a{ margin:10px auto;}
/*preview-right-bottom-alarmout*/
.J_pre_alarm_tit{ width:140px;}
.J_pre_alarm_tit label{ float:left; display:block; width:110px; line-height:20px; padding-left:4px; text-align:left; font-weight:bold; overflow:hidden}
.J_pre_alarm_tit a{ float:left; margin-top:0;}
/*preview-bottom*/
.J_pre_bottom{ clear:both; height:16px; padding:10px 0 0 0;}
.J_pre_bottom div{ width:100%; height:16px;}
.J_pre_bottomex{width:100%;bottom:0px;height:16px; position:absolute; left:0; }
/*firefox split windows*/
#prew_divFathVideo{width:400px; height:300px;position:relative;color:red; padding:1px; }
#prew_divFathVideo div{ background:#000; border:2px solid #414141; width:20px; height:20px; position:absolute; top:-10000px;}
.btn_bar{ height:24px; background:#000; }
.btn_diver{ float:left; width:24px; height:24px; margin-left:5px; background:url(../image/Window.png) no-repeat;}
.btn_diver:hover{ background-position: 0 -24px;}
.btn_4d{ background-position:-24px 0;}
.btn_4d:hover{ background-position: -24px -24px;}
.btn_8d{ background-position:-48px 0;}
.btn_8d:hover{ background-position: -48px -24px;}
.btn_9d{ background-position:-72px 0;}
.btn_9d:hover{ background-position: -72px -24px;}
.btn_16d{ background-position:-96px 0;}
.btn_16d:hover{ background-position: -96px -24px;}