html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

#divHeader{
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:35px;
    line-height:35px;
    background:blueviolet;
}

#divHeader .title{
    float: left;
    margin-left:10px;
    color:#fff;
}

#divTool{
    float: left;
    margin-left:20px;
    margin-top:-1px;
}

#divUser{
    float: right;
    margin-right: 10px;
    color:#fff;
}

#divTool button{
    padding:0 5px;
    font-size:14px;
    line-height: 1.5;
}

/* 元素栏 */
#divElement{
    position: absolute;
    top:35px;
    left:0;
    bottom:0;
    width:200px;
    background:cadetblue;
    font-size:14px;
    overflow-y:auto;
}

#divElement .title{
    width:100%;
    background: #333;
    color:#fff;
    padding:5px 10px;
}

#divElement .element-list{
    margin:10px;
}

#divElement .element{
    width:100%;
    line-height:40px;
    text-align: center;
    border: solid 1px #ddd;
    background: #aaa;
    margin-bottom: 10px;
    font-size:24px;
    font-weight: bold;
    cursor: pointer;
}

#divElement .element:hover{
    background: #fff;
}

/* 边框样式 */
.mel-border {
    width:100px;
    height:100px;
}
.border-01{
    border-image-source: url(../img/border-1.png); 
    border-image-slice: 10 16 15 10 fill; 
    border-width: 10px 16px 15px 10px; 
    border-style: solid; 
    background-color: rgba(198, 207, 216, 0.1); 
    background-clip: border-box; 
    filter: blur(0px);
}
.border-02{
    border-image-source: url(../img/border-2.png); 
    border-image-slice: 10 16 15 10 fill; 
    border-width: 10px 16px 15px 10px; 
    border-style: solid; 
    background-color: rgba(198, 207, 216, 0.1); 
    background-clip: border-box; 
    filter: blur(0px);
}
.border-03{
    border-image-source: url(../img/border-3.png); 
    border-image-slice: 35 fill; 
    border-width: 35px; 
    border-style: solid; 
    background-clip: padding-box; 
    filter: blur(0px);
}
.border-04{
    border:solid 2px #000099;
    background-color: rgba(0,0,0, 0.1); 
    filter: blur(0px);
}

/* 属性栏 */
#divAttr{
    position: absolute;
    top:35px;
    right:0;
    bottom:0;
    width:250px;
    background:#eee;
    font-size:14px;
    overflow-y:auto;
}

#divAttr .attr-list{
    margin:10px;
}

#divAttr input[type=text],#divAttr input[type=number]{
    width:120px;
    font-family: Consolas, verdana,arial,sans-serif,'Courier New', Courier, monospace, '微软雅黑';
}

#divAttr textarea{
    width:100%;
    height:100px;
    font-family: Consolas, verdana,arial,sans-serif,'Courier New', Courier, monospace, '微软雅黑';
}

#divAttr table{
    width:100%;
}

#divAttr th, #divAttr td{
    margin:5px;
}

#divAttr th{
    text-align: right;
    font-weight: normal;
    vertical-align:text-top;
}

#divAttr .title{
    width:100%;
    background: #333;
    color:#fff;
    padding:5px 10px;
}

.attr-el{
    display:none;
}

/* 任务栏 */
#divTask{
    position: absolute;
    left:200px;
    right:250px;
    bottom:0;
    height:25px;
    background:darksalmon;
    line-height: 1.5;
}

#divMain{
    position: absolute;
    top:35px;
    left:200px;
    right:250px;
    bottom:25px;
    background:#ddd;
    overflow:auto;
}

#divDraw{
    position: absolute;
    width:800px;
    height: 800px;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
    overflow: hidden;
}

#divGrid{
    position: absolute;
    width:800px;
    height: 800px;
    background:#fff;
}

#divGrid table td{
    width:100px;
    height:100px;
    border: solid 1px rgba(125, 125, 125, 0.3);
    padding: 0;
    margin: 0;
}

/* 元素 */
.mel{
    position: absolute;
    top:0;
    left:0;
    cursor: pointer;
    z-index:10000;
}

.mel .edit-bar{
    width:10px;
    height:10px;
    border:solid 1px red;
    background:blue;
    position: absolute;
    top:0;
    left:0;
}

.mel:hover{
    box-shadow: 0 0 5px #000;
}

.mel.active{
    box-shadow: 0 0 5px #f00;
}

.mel-rect{
    width:100px;
    height:100px;
    background: green;
}

.mel-circle{
    width:100px;
    height:100px;
    background: green;
    border-radius:50%;
}

.mel-image{
    max-width:100%;
}

.mel-icon{
    font-size:48px;
    color:blue;
    line-height: 1;
}

.mel-iframe{
    width:200px;
    height:200px;
    border:solid 1px gray;
}

.mel-iframe iframe{
    width:100%;
    height:100%;
}

.mel-table{
    width:300px;
    height:300px;
    border:solid 1px gray;
}

.mel-table table{
    width:100%;
}

.mel-table table {
    font-family: verdana,arial,sans-serif;
    font-size:12px;
    color:#333333;
    border-collapse: collapse;
    border: solid 2px #666666;
    width:100%;
}
.mel-table table th {
    border: solid 1px #666666;
    padding: 5px;
    background-color: #dedede;
    text-align: center;
}
.mel-table table td {
    border: solid 1px #666666;
    padding: 5px;
    background-color: #ffffff;
    text-align:center;
}

.mel-video{
    width:200px;
    height:200px;
    border-top: solid 10px blue;
    overflow: hidden;
}

.mel-video video{
    width:100%;
    height:100%;
}

.mel-bar{
    width:30px;
    height:200px;
    border:solid 1px gray;
    background:#eee;
}

.mel-bar div{
    position: absolute;
    bottom:0;
    height:25%;
    width:100%;
    background:blue;
}

/* 管道动画 */
@keyframes ant-path-animation {
    from {
        stroke-dashoffset: 100%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

path.ant-path {
    fill: none;
    animation: linear infinite ant-path-animation;
    animation-duration: 3.1212s;
}

path.ant-path__hardware-acceleration {
    transform: translateZ(0);
}

path.ant-path__reverse {
    animation-direction: reverse;
}

/* 测试 */
.testtt{
    border: solid 10px red;
    border-radius: 50%;
    box-shadow: 0 0 10px blue;
    text-shadow: 0 0 10px blue;
    background: transparent;
    transform:rotate(7deg);
    -webkit-transform:rotate(7deg);
    overflow: hidden;
}