body{
    margin: 0px;
    font-size: 12px;
}
a { text-decoration: none; }
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #ff0000; text-decoration: underline; }

/*头部*/
#header {
    box-sizing: border-box;     /*影响坐标系*/
    height: 50px;               /*影响坐标系*/
    min-width: 800px;
    border: 1px solid #aaaaaa;
    border-bottom: none;
    background-color: #f4f4f4;
    overflow: hidden;
    font-weight: bold;
}
#header div {
    box-sizing: border-box;     /*影响坐标系*/
    padding: 5px;
    line-height: 20px;
}
#header #titleContainer {
    float: left;
    width: 160px;               /*影响坐标系*/
    height: 100%;
    padding: 0px;
    border-right: 1px solid #aaaaaa;
    line-height: 50px;
    text-align: center;
}
#header #nameContainer { float: left; }
#header #nameContainer input[type=text] { width: 150px; }
#header #descriptionContainer { float: left; }
#header #descriptionContainer textarea {
    width: 250px;
    position: absolute;
}
#header #buttonContainer {
    float: right;
    height: 50px;
}
#header #buttonContainer input {
    width: 90px;
    height: 100%;
    font-weight: bold;
}
/*侧边栏*/
#sidebar {
    float: left;
    box-sizing: border-box;     /*影响坐标系*/
    width: 160px;               /*影响坐标系*/
    height: 600px;
    background-color: #dddddd;
    border: 1px solid #aaaaaa;
    border-right: none;
}
#sidebar #legendContainer{
    height: 400px;
}
.legend {
    left: 20px;                 /*影响坐标系*/
    height: 40px!important;
    min-height: 40px!important;
    line-height: 36px!important;
    font-weight: bold;
    min-width: 120px!important;
}
#legendStart { top: 80px; }
#legendTask { top: 140px; }
#legendDecision { top: 200px; }
#legendConcurrency { top: 260px; }
#legendReplication { top: 320px; }
#legendEnd { top: 380px; }
#canvasControlContainer {
    border-top: 1px solid #aaaaaa;
    padding-top: 10px;
    text-align: center;
    line-height: 20px;
}
/*画布*/
#canvas {
    position: relative;
    box-sizing: border-box;     /*影响坐标系*/
    margin-left: 160px;         /*影响坐标系*/
    height: 600px;
    border: 1px solid #aaaaaa;
    overflow: scroll;
}
/*查看流程界面画布*/
#canvas_view {
    position: relative;
    box-sizing: border-box;     /*影响坐标系*/
    /*margin-left: 160px;         !*影响坐标系*!*/
    /*height: 600px;*/
    /*border: 1px solid #aaaaaa;*/
    /*overflow: scroll;*/
}
/*元素*/
.activity_start, .activity_end {
    background-color: #f39c12;
    border-radius: 25em!important;
    -moz-border-radius: 25em!important;
    height: 40px;
}
.activity_task { background-color: #00b4fe; }
.activity_decision { background-color: #92d050; }
.activity_concurrency { background-color: #7f8c8d; }
.activity_replication { background-color: #9b59b6; }
.activity_task, .activity_decision, .activity_replication {
    min-height: 60px;
    height: 60px;
}
.activity_concurrency {
    min-height: 140px;
    height: 140px;
}
.element {
    /*位置及大小*/
    box-sizing: border-box;         /*影响坐标系*/
    position: absolute;
    min-width: 140px;
    /*阴影*/
    box-shadow: 2px 2px 20px #aaaaaa;
    -o-box-shadow: 2px 2px 20px #aaaaaa;
    -webkit-box-shadow: 2px 2px 20px #aaaaaa;
    -moz-box-shadow: 2px 2px 20px #aaaaaa;
    /*边框*/
    border: 1px solid #000000;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    /*背景及透明度*/
    opacity: 0.8;
    filter: alpha(opacity=80);
    /*background-color: #ffffff;*/
    /*其他*/
    text-align: center;
    cursor: move;
    z-index: 1;
}
.element:hover {
    box-shadow: 2px 2px 19px #000000;
    -o-box-shadow: 2px 2px 19px #000000;
    -webkit-box-shadow: 2px 2px 19px #000000;
    -moz-box-shadow: 2px 2px 19px #000000;
}
.element_selected { /*元素选中样式*/
    box-shadow: 2px 2px 19px #ff0000 !important;
    -o-box-shadow: 2px 2px 19px #ff0000 !important;
    -webkit-box-shadow: 2px 2px 19px #ff0000 !important;
    -moz-box-shadow: 2px 2px 19px #ff0000 !important;
    border: 1px solid #ff0000 !important;
}
.element .control_container {
    position: absolute;
    top: -18px;
    height: 18px;
    right: 0px;
    display: none;
}
.element .control_container div {
    color: gray;
    width: 18px;
    cursor: pointer;
    text-align: right;
}
.element .position_info {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 20px;
    border: 1px solid #373737;
    background-color: #ffd966;
    padding: 1px;
    z-index: 2147483646;
}
.element .title {
    font-weight: bold;
    height: 28px;
    line-height: 32px;
}
.activity_start .title, .activity_end .title {
    line-height: 36px;
    height: 40px;
}
.element .highlight { color: red; }
.element .name {
    position: absolute;
    top: 28px;
    right: 0px;
    bottom: 10px;
    left: 0px;
    line-height: 15px;
    overflow-y: auto;
    word-break: break-all;
}
.activity_replication .name{
    bottom: 15px;
}
.activity_concurrency .name{
    height: 30px;
    bottom: 15px;
}
/*重复*/
.replication_subprocess {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 15px;
}
/*并行*/
.concurrency_subprocesses {
    position: absolute;
    top: 58px;
    right: 0px;
    bottom: 15px;
    left: 0px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: auto;
}
.concurrency_subprocess {
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #aaaaaa;
    background-color: #dddddd;
    overflow: hidden;
}
.concurrency_subprocess_name {
    float: left;
    padding-left: 5px;
    text-align: left;
}
.concurrency_subprocess_edit {
    position: absolute;
    right: 15px;
    padding-right: 5px;
    padding-left: 5px;
    height: 20px;
    line-height: 22px;
    cursor: pointer;
    background-color: #dddddd;
}
.concurrency_subprocess_delete {
    position: absolute;
    right: 0px;
    padding-right: 5px;
    width: 10px;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    background-color: #dddddd;
}
.concurrency_subprocess_new {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    text-align: center;
    cursor: pointer;
}
/*连线标签*/
.connection_label {
    max-width: 100px;
    padding: 2px;
    border: 1px solid #000000;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    background-color: #ffd966;
    opacity: 0.8;
    filter: alpha(opacity=80);
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
}
.connection_label:hover {
    box-shadow: 2px 2px 19px #000000;
    -o-box-shadow: 2px 2px 19px #000000;
    -webkit-box-shadow: 2px 2px 19px #000000;
    -moz-box-shadow: 2px 2px 19px #000000;
}
/*弹出对话框*/
.dialog { display: none; z-index: 2147483647; }
.dialog_table { width: 100%; }
.dialog_table td.dialog_label {
    vertical-align: top;
    padding-top: 2px;
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}
.dialog_table td.dialog_separator {
    background-color: #e9e9e9;
    padding: 5px;
    text-align: center;
}
.dialog_table input[type=text] { width: 100%; }
.dialog_table textarea { width: 100%; }
.dialog_table select { width: 100%; }

/*保证弹出对话框中控件宽度一致*/
.dialog input, .dialog select, .dialog textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

