﻿@charset "UTF-8";
html, body {
    height: 100%;
    margin: 0;
}

#xContainer {
    display: flex;
    flex-direction: column; /*垂直排列，默认是row*/
    justify-content: flex-start; /* 水平居中 */
    align-items: flex-start; /* 垂直居中 */
    align-content: flex-start; /*多行整体居中 flex容器不设置高度并且子项只有一行时，align-content属性是不起作用的。*/
    /*text-align: center; */ /* 如果是在块级容器内，可以这样设置。 通常用于文本内容的水平对齐 */
    width: 100%;
    margin: 0 auto; /*设置整个容器在浏览器中水平居中*/
    background: #fff;
    z-index: 1;
}
#xMainmenu {
    display: flex;
    width: 100%;
    height: 40px;
    border: 0px solid #000; /*边框*/
    background: #fff;
    border-radius: 5px;
    text-align: left;
}
#xHeader {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 水平居中 */
    text-align: center;
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    background: #fff;
}

#xHeader2 {
    display: flex;
    flex-direction:row;
    justify-content: center; /* 水平居中 主轴上的对齐方式*/
    align-items: flex-start; /* 垂直居中 交叉轴上的对齐方式*/
    width: 100%;
    background: #fff;
}
#xHeader2left {
    display: flex;
    justify-content: flex-start; /* 水平居中 主轴上的对齐方式*/
    align-items: flex-start; /* 垂直居中 交叉轴上的对齐方式*/
    width: 100%;
    padding-left:5px;
    background: #fff;
}
#xContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: center; /* 水平居中 */
    align-content: flex-start;
    align-items:flex-start; /* 垂直居中 */
    width: 100%;
    /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
    padding-top: 10px;
    padding-bottom: 5px;
    border: 0px solid #000; /*边框*/
    background: #fff;
    border-radius: 5px;
}


.menutop {
    display: flex;
    flex-flow: row nowrap;
    min-width: 100%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    color: white;
    background: darkblue;
}

.menutopnr {
    color: white;
    padding-right: 10px;
}


.viewpage {
    display: flex;
    text-align: left;
    /*position: absolute;*/
    width: 100%;
    min-height: 450px;
    background: #fff;
    top: 0px;
    left: 0px;
    font-size: 13px;
    border: 1px solid #000; /*边框*/
    padding-top: 10px;
    padding-bottom: 5px;
    margin-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    margin-top: 1px; /*设置元素跟其他元素的距离为20像素*/
    border-radius: 5px;
}

.row1 {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 30px;
    font-size: 13px;
    margin-top: 2px; /*此处讲解margin的用法，设置content与上面header元素之间的距离*/
    margin-bottom: 2px;
    background: #fff;
}
.row2 {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 50px;
    font-size: 13px;
    margin-top: 2px; /*此处讲解margin的用法，设置content与上面header元素之间的距离*/
    margin-bottom: 2px;
    background: #fff;
}

.row3 {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 70px;
    font-size: 13px;
    margin-top: 2px; /*此处讲解margin的用法，设置content与上面header元素之间的距离*/
    margin-bottom: 2px;
    background: #fff;
}

.bq1 {
    width: 70px;
    height: 30px;
    font-size: 13px;
    margin-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    margin-top: 0px; /*设置元素跟其他元素的距离为20像素*/
    padding-right: 5px;
    border: 0px solid #000; /*边框*/
    border-radius: 5px;
    text-align: right;
    line-height: 30px;
    vertical-align: middle;
    background: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.bq50 {
    width: 50px;
    height: 30px;
    font-size: 13px;
    padding-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    padding-right: 5px;
    border: 0px solid #000; /*边框*/
    border-radius: 5px;
    text-align: right;
    line-height: 30px;
    vertical-align: middle;
    background: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.bq110 {
    width: 110px;
    height: 30px;
    font-size: 13px;
    padding-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    padding-right: 5px;
    border: 0px solid #000; /*边框*/
    border-radius: 5px;
    text-align: right;
    line-height: 30px;
    vertical-align: middle;
    background: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.bqauto {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    margin-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    margin-top: 0px; /*设置元素跟其他元素的距离为20像素*/
    padding-left: 5px;
    padding-right: 5px;
    border: 0px solid #000; /*边框*/
    border-radius: 5px;
    background: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.nr1 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 160px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr1_2row {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 160px;
    height: 60px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}

.nr1_3row {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 160px;
    height: 90px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}

.nr2 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 60px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr60 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 60px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr100 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr160 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 160px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr200 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr300 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 300px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nr400 {
    display: flex;
    text-align: left;
    vertical-align: middle;
    width: 400px;
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nrauto {
    display: flex;
    text-align: left;
    vertical-align: middle;
    flex-grow: 1; /*自动填充剩余空间*/
    height: 30px;
    line-height: 30px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nrauto_2row {
    display: flex;
    text-align: left;
    vertical-align: middle;
    flex-grow: 1; /*自动填充剩余空间*/
    height: 50px;
    line-height: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}
.nrauto_3row {
    display: flex;
    text-align: left;
    vertical-align: middle;
    flex-grow: 1; /*自动填充剩余空间*/
    height: 70px;
    line-height: 20px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 13px;
}

.nrr {
    text-align: left;
    width: 100%;
    height: 100%;
    font-size: 13px;
    margin-left: 0px; /*设置元素跟其他元素的距离为20像素*/
    margin-top: 0px; /*设置元素跟其他元素的距离为20像素*/
    padding-left: 2px; /**/
    padding-right: 2px; /**/
    border: 1px solid darkgray; /*边框*/
    border-radius: 2px;
    background: white;
    z-index: 1;
}

.tabrow {
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
    align-content:flex-start;
    width: 100%;
    height: 25px;
    font-size: 11px;
    /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
    border: 0px solid #000; /*边框dashed*/
    margin-top: -1px;
    padding: 1px 1px 1px 1px;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.tab0 {
    height: 30px;
    width: 80px;
    font-size: 15px;
    font-weight: bold;
    color: Blue;
    background: white;
    border-left: 1px solid darkgray;
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 0px none;
}

.tab1 {
    height: 25px;
    width: 80px;
    font-size: 13px;
    font-weight: normal;
    color: Black;
    background: ButtonFace;
    border: 1px solid darkgray;
}

.line_04 {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.line_04 {
    overflow: hidden;
    _zoom: 1;
}
.line_04 b {
        background: #ddd;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        height: 1px;
        _overflow: hidden;
 }

.tishi {
    position: absolute;
    width: 200px;
    border: solid 2px #999;
    padding: 2px 2px 2px 2px;
    background-color: #ffffff;
    text-align: center;
    border-radius: 5px;
    z-index: 101;
}
.tishibt {
    text-align: center;
    height: 20px;
    width: 100%;
    font-size: 15px;
    background-color: chartreuse;
    color: blue;
}
.tishinr {
    width: 100%;
    font-size: 13px;
    text-align: left;
    color: Blue;
    margin: 10px 10px 10px 10px;
    word-wrap: break-word;
    white-space: pre-line;
}
.tishibutrow {
    width: 100%;
}
.tishibutton {
    width:50px;
    margin-left:10px;
    text-align: center;
    font-size: 13px;
    height: 30px;
    border: 1px solid #999;
    background-color: ButtonFace;
    color: blue;
    border-radius: 5px;
    margin-left: 3px;
}
.xbutton {
    padding-left:2px;
    padding-right:2px;
    text-align: center;
    align-content:center;
    font-size: 13px;
    height: 25px;
    border: 1px solid #999;
    background-color: ButtonFace;
    color: blue;
    border-radius: 5px;
    margin-left: 3px;
}
.xbutsmall {
    text-align: center;
    align-content: center;
    font-size: 11px;
    margin-left: 1px;
    width: 35px;
    height: 19px;
    border: 1px solid #999;
    background-color: ButtonFace;
    color: blue;
    border-radius: 2px;
    vertical-align: middle;
    /*text-decoration:underline;*/
}
.button1 {
    text-align: center;
    align-content: center;
    font-size: 13px;
    height: 25px;
    border: solid 1px #999;
    background-color: ButtonFace;
    color: blue;
    border-radius: 5px;
}


.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.text-center {
    text-align: center !important
}


/* Start Modal Dialog CSS */
div.modal-background {
    position: fixed;
    justify-content: center;
    align-items:  start;
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    padding-top:100px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

div.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 10px;
    border: 2px solid #888;
    width: 60%;
}

/* End Modal Dialog CSS */

/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer {
    height: 40px;
    background: blue;
    border: 1px solid #000; /*边框*/
    border-radius: 5px;
    margin-top: 20px;
}

.Clear {
    clear: both;
}


/*注：Content-Left定义多个div从左到右排列在一行，使用了float:left;*/
.Content-Left {
    position: absolute;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none;
    color: #000;
    z-index: 1;
}

.hide {
    /** display设置为none表示默认隐藏，这里要使用绝对定位position:absolute，可以重叠在其他div上面，显示的时候不会挤压后面的其他div。
    并且，父div不能设置overflow属性，否则隐藏的div显示就无法超出父元素的当前显示的内容范围。 */
    display: none;
    position: absolute;
    left: 0px;
    top: 15px;
    padding: 10px 10px 10px 0px;
    width: 100px;
    background: white;
    border: 1px solid rgb(212, 208, 208); /*边框*/
    z-index: 1;
}

.Content-Left:hover .hide {
    display: block; /** 当父div类 LinkContent-Left鼠标移上去的时候，将隐藏的子div类hide显示出来 */
}
/*
<!-- 第一行div
鼠标移到第一行div父元素的时候，子元素显示出来会重叠在第二行div上面。
因为子元素和第二行div重叠，第一行div的z-index必须比第二行div的大，
否则鼠标移出第一行div父元素的时候，还没有移入子div时，会被认为已移出第一行div，
导致第一行div的子div又隐藏起来。
这里把第一行div的z-index设置为100，第二行为99。
z-index只会同级别的div有效，因此即使把第一行div的子div的z-index调高是无效的。
-->
<!--
<div class="Content" style="z-index:100" >

<div class="Content-Left" >
第一行div父元素A
<div class="hide" align="left" style="width:400px" >
第一行div父元素A子div
</div >
</div >

<div class="Content-Left" > |</div >

<div class="Content-Left" >
第一行div父元素B
<div class="hide" align="left" style="width:400px" >
第一行div父元素B子div
</div >
</div >

</div > -->
<!-- 第一行div结束-- >
<!-- 第二行div-- >
<!--
<div class="Content" style="z-index:99" >
<div class="Content-Left" > 第二行div</div >
</div >-->
<!-- 第二行div结束-- >


    
<style>
    #__contextmenu {
        position: absolute;
        display: none;
        width: auto;
        z-index: 100;
        padding: 0px;
        list-style: none;
        margin: 0px;
        padding: 0px;
        border-radius: 2px;
        border: 2px solid rgb(102, 102, 102);
        background-color: white;
    }

        #__contextmenu li {
            border: none;
            white-space: nowrap;
            margin: 1px;
        }

            #__contextmenu li a {
                cursor: pointer;
                height: 100%;
                text-decoration: none;
                display: block;
                padding: 3px 10px 3px 10px;
            }

            #__contextmenu li:hover {
                background-color: gainsboro;
            }
</style>
*/

