wp/nwyj/WebContent/css/cockpit/panel.css

html,body{font-size: 12px; font-family:"微软雅黑"; color:#fff; margin:0; padding:0; }
.spit_btn{ width:50px; height:30px; line-height:30px; text-align:center; margin:7px 0 0 0 ;}
span{ color:#fff; }
.fr{ float:right; }
.v_left{ float:left; }

.fimg{ cursor:pointer; }
.fimg:hover{ filter:alpha(opacity=70)}

/* 变电站视频头部信息 */
.titleBar{ width:100%; height:100%; text-align:center; /* display:none; */ }
.titleBar span{font-size:20px; font-weight:bold; line-height:30px; }
.btn{
    border:1px solid #fff;
    filter:alpha(opacity=0);
    background-color: rgba(0,0,0,0);
    color:#fff;
    width:60px;
    min-width:60px;
    height:30px;
    line-height:50%;
    margin:1% 3px;
}
.header {
    display: inline-block;
    text-align: center;
    font-family: 'Francois One', Helvetica, Arial, sans-serif;
    text-decoration: none;
    transition: all 400ms ease-in-out;
}
.header:hover {
    transform: translate(2px, -2px);
}

.search_text{
    width:95%;
    border:none;
    background-color:rgba(84, 99, 119, 0);
    height:35px;
    line-height:35px;
    color:#fff;
    float:right;
    display:inline-block; 
    
}

/* ID输入框 */
.video_id_box{width:100%;height:35px;}
.video_id_title{ margin: 10px 10px 10px 15px;}
.video_text{
	width:178px;
	border:1px solid #fff;
	border-right:none;
	background-color:#00f;
	height:30px;
	line-height:30px;
	color:#fff;
	margin:0 0 0 15px ; 
	float:left;
}
.vid_clear{
    width:26px; height: 32px; float:left;
	border: 1px solid #fff; border-left: none;
}
.clear_img{ height:15px; margin:8px 5px; cursor:pointer;}
.clear_img:hover{filter:alpha(opacity=70)}
.dis_none{display:none;}

.search_text:focus{
    border:none;
    outline: none;
}
.count{
    width:100%;
    height:100%;
 /*    border: 1px solid #fff; */
}
.screen{
    background-color: darkgray;
}
.v_one{
    width:100%;
    height:100%;
}
.v_four{
    width:50%;
    height:50%;
    display: inline-block;
    float: left;
}
.count_border, .count_border_l, .count_border_b{
    border: 1px solid #fff;
    margin: 5px;
}
.v_six, .v_seven_b{
    width:33.3%;
    height:50%;
    display:inline-block;
    float: left;
}
.v_seven_l, .v_eight, .v_nine_b{
    width:25%;
    height:50%;
    display:inline-block;
    float:left;
}
.v_nine_l{
    width:20%;
    height:50%;
    display:inline-block;
    float: left;
}
.v_thir_l,.v_thir_r{
    width:20%;
    height:100%;
    display:inline-block;
}
.v_thir_c{
    width:60%;
    height:100%;
    display: inline-block;
}
.v_thirteen_b{
    width:100%;
    height:50%;
}
.v_thirteen_l{
    width:33.3%;
    height:33.3%;
    display:inline-block;
}
.v_sixteen{
    width:25%;
    height:25%;
    display:inline-block;
}
.v_twenty{
    width:20%;
    height:25%;
    display: inline-block;
}
.yun{
    margin:0;
    padding:0;
    width:250px;
    height:430px;
    background-color: rgba(179,214,247,.9);
    position:absolute;
    -webkit-border-radius: 10px;
    border-radius:10px;

}
.y_text{
    line-height:25px;
    margin: 0 15px;
}
.y_header{
    width:250px;
    height:25px;
    cursor:move;
}
.y_header:hover{
    background-color: rgba(190,214,247,.7);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}
.y_header:active{
    background-color: rgba(190,200,247,.7);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}
.y_count{
    margin:0 5px 5px 5px;
    padding:0;
    width:240px;
    height:395px;
    background-color: #4a6b9c;
    -webkit-border-radius: 3px;
    border-radius:3px;
    border:1px solid #2c3a55;
}
.y_count_box{
    margin:0;
    padding:0;
    width:270px;
    height:400px;
    background-color: #0c61e0;
    -webkit-border-radius: 3px;
    border-radius:3px;
}
.con_btn{
    width:220px;
    height:30px;
    border:1px solid #fff;
    margin:0 10px;
    text-align: center;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.con_btn span{
    line-height: 30px;
}

/***********************start button*****************************/


.button05 {
    position: relative;
    display: inline-block;

    width: 197px;
    padding: 8px 15px;
    margin: 0 0 10px 0;
    cursor:move;

    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgb(112,181,242)),
            color-stop(0.49, rgb(84,164,238)),
            color-stop(0.5, rgb(54,144,240)),
            color-stop(1, rgb(26,97,219))
    );

    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

    border: 1px solid;
    border-color: #2f71a3 #265a82 #1e4766 #265a82;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;

    box-shadow: 		inset 0px -4px 5px rgba(255,255,255,0.2),
    inset 0px 1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
    0px 4px 0px #1e4766,
    0px 6px 0px #1e4766,
        /**/
    0px 8px 5px rgba(0,0,0,0.5);

    -moz-box-shadow: 	inset 0px -4px 5px rgba(255,255,255,0.2),
    inset 0px 1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
    0px 4px 0px #1e4766,
    0px 6px 0px #1e4766,
        /**/
    0px 8px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
    inset 0px 1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
    0px 4px 0px #1e4766,
    0px 6px 0px #1e4766,
        /**/
    0px 8px 5px rgba(0,0,0,0.5);
}

.button05:hover {
    background: #8AC5FD -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, rgb(134, 193, 253)),
            color-stop(0.49, rgb(153, 213, 255)),
            color-stop(0.5, rgb(130, 194, 253)),
            color-stop(1, rgb(108, 170, 229))
    );

}

.button05:active {
    top: 4px;
    box-shadow: 		inset 0px 4px 5px rgba(255,255,255,0.4),
    inset 0px -1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
        /**/
    0px 4px 5px rgba(0,0,0,0.5);

    -moz-box-shadow: 	inset 0px 4px 5px rgba(255,255,255,0.4),
    inset 0px -1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
        /**/
    0px 4px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
    inset 0px -1px 5px rgba(255,255,255,0.2),
        /**/
    0px 2px 0px #1e4766,
        /**/
    0px 4px 5px rgba(0,0,0,0.5);
}

/***********************end button*****************************/
.c_panel{
    width:228px;
    height:260px;
    margin:8px 5px 3px 5px;
    border:1px solid #fff;
    background-color: #0c61e0;
}
.fx_vc{
    margin:2px 70px;
    width:110px;
    height:110px;
    background:url(/nwyj/images/cockpit/monitoring/fx.png);
}
.fx_ob{
    display: inline-block;
    float: left;
    width:36.6px;
    height:36.6px;
}
#f_one:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx11.png);
}
#f_two:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx12.png);
}
#f_three:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx13.png);
}
#f_four:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx21.png);
}
#f_five:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx22.png);
}
#f_six:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx23.png);
}
#f_seven:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx31.png);
}
#f_eight:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx32.png);
}
#f_nine:hover{
    background:url(/nwyj/images/cockpit/monitoring/fx33.png);
}
.y_steps{
    width:210px;
    height:30px;
    margin:0 10px;
    
}
.step_text{
	width:40px;
	line-height:30px;
	display:inline-block;
	float:left;
	margin-left:17px;
}
.step_sel{
	width:130px;
	display:inline-block;
}

.yt_bj{
    width:208px;
    height:105px;
    margin:10px 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #2d7aed;
}
.bj{
    width:208px;
    height:30px;
    margin: 5px 0;
}
.bj_plus{
    margin:0 30px;
}
.bj_txt{
    line-height: 30px;
}
.bj_mulit{
    margin: 0 30px;
}
a.add,a.decrease{
    width:30px;
    height:30px;
    text-decoration: none;
    display:block;
}
a.add{
    background:url(/nwyj/images/cockpit/monitoring/add.png) no-repeat
}
a.add:hover {
    background:url(/nwyj/images/cockpit/monitoring/add1.png) no-repeat
}
a.decrease{
    background:url(/nwyj/images/cockpit/monitoring/cut.png) no-repeat
}
a.decrease:hover{
    background:url(/nwyj/images/cockpit/monitoring/cut1.png) no-repeat
}
.selectbox{
	height:25px;
	line-height:25px;
	background-color:#0c61e0;
	color:#fff;
}
.selBtn{
	height:27px;
	color:#fff;
	background-color:#0c61e0;
	background-image:url(/nwyj/images/cockpit/btn/panl_fff.png);
}
div.selectbox-wrapper{
	border:1px solid #fff;
	color:#fff;
	background-color:#0c61e0;
	top:26px !important;
}
div.selectbox-wrapper ul li.selected{
	background-color:#0447b2;
}
.box2_custom .boxContent{
	padding:0;
	background-color:#4a6b9c;
}
.box2_custom .box_bottomcenter,.box2_custom .box_bottomleft,.box2_custom .box_bottomright{
	background-image:none;
}
.box2_custom .box_middlecenter{
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #fff;
}
.box2_custom .box_topcenter{
	border:1px solid #fff;
	border-bottom-width:0;
}
.box2_custom .box_topcenter, .box2_custom .box_topleft, .box2_custom .box_topright{
	background-image:none;
	background-color:rgba(44,58,85,.5);
}
.box2_custom .status{
	height:33px;
	line-height:33px;
}

.mes_img_mouse{/* 鼠标移动头部按钮s */
	width:100%;
	height:5px;
	position:fixed;
	left:0;
	top:0;
}
.mes_img_mouseDown{/* 鼠标移动头部按钮s */
	width:100%;
	height:5px;
	position:fixed;
	left:0;
}
.mes_img{/* 控制头部工具条按钮 */
	position:fixed;
	top:0;
	left:50%;
	display:none;
}
.mes_imgDown{/* 控制头部工具条按钮 */
	position:fixed;
	left:50%;
	display:none;
}
.s_mes_img{
	position:fixed;
	top:50%;
	left:0;
	display:none;
}
.s_mes_img_down{
	position:fixed;
	top:50%;
	display:none;
}
.s_mes_img_mouse{
	height:100%;
	width:5px;
	position:fixed;
	top:0;
	left:0;
}
.s_mes_img_mouse_down{
	height:100%;
	width:5px;
	position:fixed;
	top:0;
}
#side_bar{/* 工具条  */
	display:none;
}

/* 录制按钮 */
.kl_btn{}

/* 控制框  */
.con_panl{ position: fixed; left:50px; top:300px;}







.sideBar{ width:270px; height:100%; display: inline-block; }
.search{  width:100%; height:35px; margin:0; padding:0; border-bottom:1px solid #fff;  border-top:1px solid #fff; }
.search_img{width:auto;height:30px; display:inline-block; float:left; }
.search_img img{width:auto;height:35px; margin-left:10px; }
.search_img img:hover{filter:alpha(opacity=70); }
.search_input{display:inline-block;float:left; }
.tab_unit{background-color:rgb(52, 143, 226); width:100%; height:30px; }
.handmove{cursor:pointer; }
.unit_text{margin:0 0 10px 10px; line-height:30px; }
.top_bar{width:100%; height:35%; }
#move_control_plan{ float:right; margin:7px 20px; }


/* 控制面板头部 */
.pan_title_box{width:240px; height:30px; margin:10px 15px 0 15px; cursor:pointer; 
			   font-size:12px; font-weight:bold; text-align:center; line-height:30px; 
			   filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#b7d0f6',endColorStr='#417fd6',GradientType=0);}	   
.mouse_over{color:#0c61e0; }			   
/*  */
.pan_title{width:190px;float:left; margin-left:20px;}			   
/* 三角 */
.pan_sj{display:inline-block; float:right; margin:10px; cursor:pointer; 
		border-top:10px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; }
		
.pan_sj:hover{border-top:10px solid rgb(12, 97, 224); border-left:5px solid transparent; border-right:5px solid transparent;}
.pan_sj_hover{border-top:10px solid rgb(12, 97, 224); border-left:5px solid transparent; border-right:5px solid transparent;}

/* 面板隐藏 */
.pan_none{display:none;}

/* 面板内容 */
.pan_col{background-color:#00f; margin:0 15px; width:240px; height:270px; }

/* 面板高级控制按钮 */
.tr_btn{width:200px; height:40px; margin:15px 15px;}
.fl{float:left;}
.dbtn{height:40px; width:40px; background-color:#00f; text-align:center; line-height:40px; cursor:pointer; margin:0; }
.dbtn:hover{
	filter:alpha(opacity=70);
}
.sel{width:130px; margin:7px; height:30px; background-color:#00f; color:#fff; border:1px solid #fff; }
._text{width:50px; height:30px; line-height:30px; text-align:center; border:1px solid #fff; margin:7px 0 0 0; cursor:pointer; }