Client framework issue fix

Client framework code for the templates.

Issue-Id : CLIENT-161

Change-Id: I65684ef1a325d760c2ec7b42ca134cba092dee6d
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>

4 files changed, 2050 insertions, 0 deletions

diff --git a/common/src/main/webapp/framework/css/RMain.css b/common/src/main/webapp/framework/css/RMain.css
new file mode 100644
index 00000000..0a74032c
--- /dev/null
+++ b/common/src/main/webapp/framework/css/RMain.css
@@ -0,0 +1,239 @@
+/* Copyright 2016, Huawei Technologies Co., Ltd.

+ *

+ * Licensed under the Apache License, Version 2.0 (the "License");

+ * you may not use this file except in compliance with the License.

+ * You may obtain a copy of the License at

+ *

+ *    http://www.apache.org/licenses/LICENSE-2.0

+ *

+ * Unless required by applicable law or agreed to in writing, software

+ * distributed under the License is distributed on an "AS IS" BASIS,

+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ * See the License for the specific language governing permissions and

+ * limitations under the License.

+ */

+

+#iemp_layout_container {

+    padding: 0px;

+    margin: 1px auto;

+    width: 100%;

+    height: 100%;

+}

+

+#iemp_layout_container .three-cols-layout {

+    width: 100%;

+    height: 100%;

+    border-collapse: collapse;

+    margin-left: 0px;

+    margin-top: 0px;

+    margin-right: 0px;

+    margin-bottom: 0px;

+}

+

+#iemp_layout_container .three-cols-layout {

+    width: 100%;

+    height: 100%;

+    border-collapse: collapse;

+    margin-left: 0px;

+    margin-top: 0px;

+    margin-right: 0px;

+    margin-bottom: 0px;

+}

+

+#iemp_layout_container .three-cols-column.three-cols-left {

+    width: 215px;

+    background-color: #f5f5f5;

+}

+

+.accordion_parent {

+    position: relative;

+    width: 220px;

+    background-color: #f5f5f5;

+}

+

+.openo-accordion-resizable-handle {

+    z-index: 1 !important;

+    cursor: e-resize;

+    width: 7px;

+    right: -5px;

+    top: 0;

+    height: 100%;

+    position: absolute;

+    font-size: .1px;

+    display: block;

+}

+

+.openoAccordian_accordionmenu {

+    width: 100%;

+    margin: 0;

+    padding: 0;

+    list-style-type: none;

+    line-height: 17px;

+}

+

+.openoAccordian_accordionmenu li {

+    min-width: 75px;

+    margin: 0;

+    padding: 0;

+    list-style-type: none;

+    color: #000;

+    clear: both;

+}

+

+.openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {

+    display: block;

+    float: left;

+    margin-bottom: -1px;

+    border-bottom: 1px solid #e5e5e5;

+    cursor: pointer;

+    width: 13px;

+    padding-top: 26px;

+}

+

+.openo_accordion_ui-icon-expand {

+    background: url(../images/collapse_arrow.png) right 20px no-repeat;

+    margin-top: 8px;

+}

+

+.openo_accordion_ui-icon-expand.current {

+    background: url(../images/expand_arrow.png) right 20px no-repeat;

+}

+

+.openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {

+    display: block;

+    position: absolute;

+    right: 0;

+    top: 4px;

+    width: 18px;

+    height: 41px;

+    cursor: pointer;

+    background-color: #f5f5f5;

+}

+

+.openoAccordian_showHideArrow_hide {

+    background-image: url(../images/openo.png);

+    background-position: -7px 0 !important;

+    border-collapse: separate;

+    /*box-shadow: inset -1px 0 0 #e5e5e5;*/

+}

+

+a.header.opened, a.header.closed {

+    font-size: 16px;

+    padding-top: 24px;

+    padding-bottom: 25px;

+    color: #999999;

+}

+

+.openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {

+    padding-right: 10px;

+    background-position: 98% 50%;

+    background-repeat: no-repeat;

+}

+

+.openoAccordian_accordionmenu li a {

+    padding: 11px 10px 12px;

+    color: #333333;

+    margin-right: 1px;

+    margin-top: -1px;

+    text-align: left !important;

+    font-family: "Microsoft Yahei", SimSun, Arial, Tahoma;

+    font-size: 14px;

+    text-overflow: ellipsis;

+    white-space: nowrap;

+    overflow: hidden;

+    border-top: 1px solid #e5e5e5;

+    border-bottom: 1px solid #e5e5e5;

+    /*height: 19px;*/

+}

+

+.openoAccordian_accordionmenu ul {

+    margin: 0;

+    padding: 0;

+    overflow: hidden;

+}

+

+.openoAccordian_accordionmenu a {

+    display: block;

+    text-decoration: none;

+}

+

+a {

+    color: #428bca;

+    text-decoration: none;

+    background: 0 0;

+}

+

+.bar {

+    height: 834px;

+    width: 18px;

+    background: #f8f8f8;

+    display: none;

+}

+

+.bar span {

+    width: 13px;

+    height: 34px;

+    background-image: url(../images/openo.png);

+    background-position: -39px 0 !important;

+    display: block;

+    /*margin-top: -430px;*/

+}

+

+#accordionmenuid_ul_0_0_brAppTopMenuID_UL li {

+    cursor: pointer;

+}

+

+#puer_base_openo {

+    border: 1px solid #ddd;

+}

+

+.openo_accordion_selected {

+    margin-left: 0;

+    margin-right: 0;

+    background: #fafafa;

+    border-left: 3px solid #4ac9ff !important;

+    box-shadow: none;

+    position: relative;

+}

+

+a:hover {

+    color: #4ac9ff !important;

+}

+

+.openoAccordian_accordionmenu li.openo_accordion_selected a {

+    position: relative;

+    left: -3px;

+    color: #009ae7;

+}

+

+.openo-accordion-resizable-handle {

+    z-index: 1 !important;

+    cursor: e-resize;

+    width: 7px;

+    right: -5px;

+    top: 0;

+    height: 100%;

+    position: absolute;

+    font-size: .1px;

+    display: block;

+}

+

+#iframeContainer iframe {

+    width: 100%;

+    height: 100%;

+    border: 0;

+}

+

+#accordionContent, #iframeContainer {

+    margin: 0;

+    padding: 0;

+    border: 0;

+    width: 100%;

+    height: 100%;

+}

+

+.openoAccordian_showHideArrow_show {

+    background-image: url(../images/openo.png);

+    background-position: -39px 0 !important;

+    box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/framework/css/VMMain.css b/common/src/main/webapp/framework/css/VMMain.css
new file mode 100644
index 00000000..a1c08668
--- /dev/null
+++ b/common/src/main/webapp/framework/css/VMMain.css
@@ -0,0 +1,758 @@
+/* Copyright 2016, Huawei Technologies Co., Ltd.

+ *

+ * Licensed under the Apache License, Version 2.0 (the "License");

+ * you may not use this file except in compliance with the License.

+ * You may obtain a copy of the License at

+ *

+ *    http://www.apache.org/licenses/LICENSE-2.0

+ *

+ * Unless required by applicable law or agreed to in writing, software

+ * distributed under the License is distributed on an "AS IS" BASIS,

+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ * See the License for the specific language governing permissions and

+ * limitations under the License.

+ */

+

+body {

+    font-family: '微软雅黑';

+    font-size: 12px;

+    color: #333;

+    background: #fafafa;

+}

+

+button {

+    outline: none;

+}

+

+ul, li {

+    list-style: none;

+    padding: 0;

+    margin: 0;

+}

+

+.titleFont {

+    font-size: 16px;

+}

+

+.separator-line {

+    height: 1px;

+    width: 100%;

+    border: 1px solid #ddd;

+    margin: 6px 0 15px 0;

+}

+

+.uploadBtn {

+    overflow: hidden;

+}

+

+.creat-btn {

+    padding: 0 14px;

+    height: 24px;

+    float: left;

+    cursor: pointer;

+    text-decoration: none;

+    outline: 0;

+    border: 1px solid #d3d3d3;

+    text-align: center;

+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

+    background: #fafafa;

+    background: -moz-linear-gradient(top, #fff, #fafafa);

+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #fafafa));

+    background: -webkit-linear-gradient(top, #fff, #fafafa);

+    background: linear-gradient(to bottom, #fff, #fafafa);

+    border-radius: 6px;

+    background: #fff url(../images/add.png) no-repeat 5px center;

+    padding-left: 20px;

+}

+

+.creat-btn:hover {

+    color: #009ae7;

+    border: 1px solid #4AC9FF

+}

+

+.creat-btn:active {

+    color: #000;

+    border: 1px solid #4AC9FF

+}

+

+/*.creat-btn{

+    background: #fff url(../image/add.png) no-repeat 5px center;

+    border: 1px solid #ddd;

+    float: left;

+}

+.creat-btn:hover{

+    background: #428bca;

+    color: #fff;

+    border:1px solid #428bca;

+}*/

+.search {

+    width: 310px;

+    height: 30px;

+    float: right;

+}

+

+.search-text {

+    width: 250px;

+    float: left;

+    margin-right: 6px;

+}

+

+.search-btn {

+    height: 30px;

+    background: #fff;

+    border: 1px solid #ddd;

+    float: left;

+}

+

+#ict_virtualApplication_table_div {

+    margin-top: 15px;

+}

+

+.table > thead > tr.active > th {

+    border: 1px solid #ddd !important;

+    border-bottom: 0;

+    background: #f0f0f0;

+}

+

+/*.table tbody tr:hover{

+    background: #e6fbe0!important;

+}*/

+.table tbody tr:last-child {

+    border-bottom: 1px solid #ddd;

+}

+

+.table-btn {

+    border: 1px solid #ccc;

+    border-radius: 3px;

+}

+

+.delete-btn {

+    background: url(../image/delete.png) no-repeat;

+    width: 16px;

+    height: 16px;

+    border: none;

+}

+

+.detail-btn {

+    background: url(../image/openo.png) no-repeat -343px -283px;

+    width: 16px;

+    height: 16px;

+    border: none;

+}

+

+.detail-btn.current {

+    background-position: -7px -314px;

+}

+

+.detail {

+    height: 200px;

+    border: 1px solid #ddd;

+    margin-top: 60px;

+}

+

+.detail-top ul {

+    height: 50px;

+    line-height: 50px;

+    border-bottom: 1px solid #ddd;

+    padding-left: 0px;

+    background: #fafafa;

+}

+

+.detail-top ul li {

+    float: left;

+    width: 120px;

+    text-align: center;

+    border-right: 1px solid #ddd;

+    cursor: pointer;

+}

+

+.detail-top ul li.current {

+    background: #fff;

+}

+

+.vmapp-margin {

+    margin-bottom: 10px;

+}

+

+.control-label .required {

+    color: #e02222;

+    font-size: 12px;

+    padding-left: 2px;

+}

+

+.form-group .control-label {

+    font-size: 12px;

+    font-weight: 400;

+}

+

+legend {

+    font-size: 12px;

+    font-weight: bold;

+}

+

+.pageGro {

+    width: 250px;

+    float: right;

+}

+

+.pageUp, .pageDown, .pageList, .pageList li {

+    float: left;

+    cursor: pointer;

+}

+

+.pageUp, .pageDown {

+    width: 60px;

+    height: 30px;

+    border: 1px solid #ddd;

+    text-align: center;

+    line-height: 30px;

+}

+

+.pageList li {

+    width: 30px;

+    height: 30px;

+    border: 1px solid #ddd;

+    text-align: center;

+    line-height: 30px;

+    border-left: none;

+}

+

+.pageList li.active {

+    background: #428bca;

+    color: #fff;

+    border-color: #428bca;

+}

+

+.pageDown {

+    border-left: none;

+}

+

+.headerLinkP {

+    padding-top: 17px;

+}

+

+.headerLinkP span {

+    font-size: 12px;

+    color: #666;

+    font-weight: normal !important;

+}

+

+label {

+    font-weight: normal !important;

+}

+

+table.userform tbody tr td {

+    display: table-cell;

+    padding-right: 10px;

+    padding-top: 10px;

+    font-size: 12px;

+    color: #333;

+}

+

+.table th, .table td {

+    padding-top: 3px !important;

+    padding-bottom: 3px !important;

+}

+

+.openoBrowseButton_element {

+    display: table;

+}

+

+.openo {

+    font-family: "Microsoft Yahei", SimSun, Arial, Tahoma;

+    font-size: 12px;

+    color: #000;

+}

+

+.openoBrowseButton_input {

+    width: 198px;

+    position: relative;

+    border: 1px solid #c3c3c3 !important;

+    height: 26px;

+    background-color: #f3f3f3;

+    border-radius: 4px 0 0 4px;

+    border-right: none;

+    padding: 0;

+}

+

+.buttonClassDefault, .buttonClassDefault:active {

+    cursor: pointer;

+    background-image: url(../images/openo.png);

+    background-position: -154px -7px !important;

+}

+

+.openoBrowseButton_button {

+    width: 27px;

+    border: 0;

+    float: right;

+    position: relative;

+    height: 26px;

+    right: 0;

+    top: 0;

+    border-radius: 0 4px 4px 0;

+    border-right: 1px solid #c3c3c3;

+    border-left: none;

+}

+

+.openo .openo-input, .openo.openo-input {

+    outline: 0;

+    border: 1px solid #c3c3c3;

+    box-shadow: 1px 1px #f6f6f6 inset;

+    background-color: #fff;

+    height: 26px;

+}

+

+.openoInput_openoDefaultText {

+    padding: 0 0 0 6px;

+    border-radius: 4px;

+    color: #000;

+    display: inline-block;

+    outline: 0;

+    box-shadow: 1px 1px #f6f6f6 inset;

+    font-size: 12px;

+    background: #fff;

+}

+

+div.openo-select {

+    border: 1px solid #c3c3c3;

+    border-radius: 4px;

+    background: url(../images/arrow-down-enable.png) right no-repeat #fff;

+    line-height: 24px;

+    padding-left: 3px;

+    display: block;

+}

+

+div.openo-select > input.openo-select-input {

+    border: none;

+    outline: 0;

+    line-height: 21px;

+    height: 21px;

+    padding-left: 3px;

+    border-right: solid 1px #c3c3c3;

+}

+

+.openo .openo-ellipsis, .openo.openo-ellipsis {

+    overflow: hidden;

+    white-space: nowrap;

+    text-overflow: ellipsis;

+}

+

+a.openoButton_buttonClass, a.openoButton_buttonDisableClass, div.openoButton_buttonClass, div.openoButton_buttonDisableClass {

+    height: 26px;

+    float: left;

+    cursor: pointer;

+    text-decoration: none;

+    outline: 0;

+    border: 1px solid #d3d3d3;

+    text-align: center;

+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

+    background: #fafafa;

+    background: -moz-linear-gradient(top, #fff, #fafafa);

+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #fafafa));

+    background: -webkit-linear-gradient(top, #fff, #fafafa);

+    background: linear-gradient(to bottom, #fff, #fafafa);

+    border-radius: 6px;

+}

+

+.openoButton_buttonInnerClass {

+    padding: 0 19px;

+    border-radius: 6px;

+}

+

+.openoButton_buttonCenterText {

+    color: #000;

+    line-height: 24px;

+    white-space: nowrap;

+    width: auto !important;

+}

+

+.userHeader {

+    clear: left;

+    overflow: hidden;

+    margin-bottom: 10px;

+    padding: 10px 10px 0px 0px;

+}

+

+.openoButton_buttonGroupClass {

+    display: inline;

+}

+

+.openoButton_buttonGroupClass div.openoButton_buttonClass_parent:first-child {

+    margin-left: 0;

+}

+

+.openoButton_buttonLeftImg {

+    margin-right: 5px;

+}

+

+.openoButton_buttonLeftImg, .openoButton_buttonRightImg {

+    display: inline-block;

+    vertical-align: top;

+    width: 16px;

+    height: 16px;

+    margin-top: 4px;

+}

+

+.openo-table-pagination-wrapper {

+    height: 37px;

+}

+

+.openo-pagination {

+    display: block;

+    float: left;

+    overflow: hidden;

+    padding: 5px 0 0;

+    margin-top: 8px;

+}

+

+.openoPagination_openoPaginationLengthOptions:not(msie8) {

+    line-height: 24px;

+}

+

+.openoPagination_openoPaginationLengthOptions {

+    white-space: normal;

+    height: 24px;

+    float: left;

+    outline: 0;

+    line-height: 20px;

+    margin: 0 5px;

+}

+

+.openo-pagination-select {

+    height: 26px;

+    line-height: 22px;

+    text-align: center;

+    margin-right: -2px;

+    border: 1px solid #e0e0e0;

+    border-radius: 5px 0 0 5px;

+    padding: 1px;

+}

+

+.openoPagination_openoPaginationLengthOptions span {

+    background-color: #fff !important;

+}

+

+.openo-pagination-theme a, .openo-pagination-theme span {

+    float: left;

+    color: #666;

+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;

+    line-height: 24px;

+    font-weight: 400;

+    text-align: center;

+    border: 1px solid #e0e0e0;

+    text-decoration: none !important;

+    padding: 0 7px;

+    border-radius: 3px;

+    background: #fff;

+}

+

+.openo-pagination-selectspan {

+    background: url(../images/ideo_default_select.png) left no-repeat !important;

+    float: right !important;

+    width: 26px;

+    height: 26px;

+    cursor: pointer;

+}

+

+.openo-pagination-theme label {

+    padding-top: 6px;

+    vertical-align: middle;

+    margin-right: 20px;

+    margin-top: -1px;

+    float: left;

+    display: inline-block;

+    height: 20px;

+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;

+}

+

+.openo-pagination li, .openo-pagination ul {

+    list-style: none;

+    padding: 0;

+    margin: 0;

+    float: left;

+}

+

+dd, dl, dt, li {

+    color: #000;

+}

+

+.openo-pagination-theme a, .openo-pagination-theme span.current {

+    margin: 0 5px 0 0;

+}

+

+.openo .openo-disabled, .openo.openo-disabled {

+    border-color: #c3c3c3 !important;

+    color: #666 !important;

+    opacity: .3;

+    filter: alpha(opacity=30);

+}

+

+.openo-pagination-theme .prev {

+    background: 0 0;

+    float: left;

+}

+

+.openo-pagination-theme .current {

+    text-decoration: none !important;

+    float: left;

+    padding-left: 6px;

+    height: 24px;

+    color: #fff;

+    display: inline;

+    border-color: #00adf5;

+    background: #4ad2ff;

+}

+

+.openo-pagination-theme a, .openo-pagination-theme span {

+    float: left;

+    color: #666;

+    font: 12px Lucida Grande, Verdana, Arial, Helvetica, sans-serif;

+    line-height: 24px;

+    font-weight: 400;

+    text-align: center;

+    border: 1px solid #e0e0e0;

+    text-decoration: none !important;

+    padding: 0 7px;

+    border-radius: 3px;

+    background: #fff;

+}

+

+.openo-pagination-theme .prev.openo-disabled:before {

+    background: url(../images/page_left_disabled.png) 50% 45% no-repeat;

+}

+

+.openo-pagination-theme .prev.openo-disabled:before {

+    background: url(../images/page_left_disabled.png) 50% 45% no-repeat;

+}

+

+.openo-pagination-theme .prev:before {

+    background: url(../images/page_l.png) 50% 45% no-repeat;

+}

+

+.openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {

+    display: inline-block;

+    content: "";

+    vertical-align: middle;

+    width: 10px;

+    height: 24px;

+}

+

+.openo-pagination-theme .prev:before {

+    background: url(../images/page_l.png) 50% 45% no-repeat;

+}

+

+.openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {

+    display: inline-block;

+    content: "";

+    vertical-align: middle;

+    width: 10px;

+    height: 24px;

+}

+

+pagination ul {

+    list-style: none;

+    padding: 0;

+    margin: 0;

+    float: left;

+}

+

+.openo-pagination li, .openo-pagination ul {

+    list-style: none;

+    padding: 0;

+    margin: 0;

+    float: left;

+}

+

+.openoPagination_gototext {

+    background: #FFF;

+    outline: 0;

+    width: 29px;

+    float: left;

+    height: 26px;

+    line-height: 24px;

+    border-radius: 4px;

+    border: 1px solid #c3c3c3;

+    padding: 0 0 0 5px;

+    margin: 0;

+    color: #666;

+    min-width: 50px;

+}

+

+.openoPagination_gotoimage {

+    width: 29px;

+    height: 26px;

+    line-height: 26px;

+    background-color: #FFF;

+    background-image: url(/portal/themes/default/components/openo/images/openo.png);

+    padding-left: 21px;

+    float: left;

+    margin-left: 5px;

+    border: 1px solid #e0e0e0;

+    border-radius: 4px;

+    box-sizing: border-box;

+    -moz-box-sizing: border-box;

+    background-position: -184px -181px !important;

+}

+

+.openo-pagination-theme .ellipse {

+    float: left;

+    margin-left: -8px;

+    margin-right: -4px;

+    background: 0 0;

+    border: none;

+    border-radius: 0;

+    box-shadow: none;

+    font-weight: 700;

+    cursor: default;

+}

+

+.openo.openo-disabled {

+    border-color: #c3c3c3 !important;

+    color: #666 !important;

+    opacity: .3;

+    filter: alpha(opacity=30);

+}

+

+.openo-pagination-theme .prev {

+    background: 0 0;

+    float: left;

+}

+

+.openo-pagination-theme .current {

+    text-decoration: none !important;

+    float: left;

+    padding-left: 6px;

+    height: 26px;

+    color: #fff;

+    display: inline;

+    /*border-color: #00adf5;

+    background: #4ad2ff;*/

+    border: 1px solid #e0e0e0;

+}

+

+.openo-pagination-theme .next:after {

+    background: url(../images/page_r.png) 50% 45% no-repeat;

+}

+

+.openoButton_buttonGroupClass div.openoButton_buttonClass_parent, .openoButton_buttonRightImg {

+    margin-left: 5px;

+}

+

+html, body {

+    height: 99%;

+    width: 98%;

+}

+

+.cotentBody {

+    padding: 0px 20px 0px 20px;

+}

+

+div.openoButton_buttonClass:hover {

+    border: 1px solid #4ac9ff;

+}

+

+div.openoButton_button_default:hover .openoButton_buttonCenterText {

+    color: #009ae7;

+}

+

+.header_lineimg {

+    height: 1px;

+    width: 100%;

+    margin-top: 17px;

+}

+

+.openo.openo-hide {

+    display: none;

+}

+

+div.openo-select-popup-container {

+    position: absolute;

+    border: 1px solid #4ac9ff;

+    border-top: none;

+    border-radius: 0 0 4px 4px;

+    max-height: 202px;

+    overflow-y: auto;

+    background-color: #fff;

+    z-index: 880;

+}

+

+div.openo-select-popup-container > div.openo-select-item {

+    display: block;

+}

+

+.openo .openo-ellipsis, .openo.openo-ellipsis {

+    overflow: hidden;

+    white-space: nowrap;

+    text-overflow: ellipsis;

+}

+

+div.openo-select-popup-container > div.openo-select-item > label {

+    padding-top: 3px;

+    padding-bottom: 3px;

+    line-height: 20px;

+}

+

+.openo .openo-ellipsis, .openo.openo-ellipsis {

+    overflow: hidden;

+    white-space: nowrap;

+    text-overflow: ellipsis;

+}

+

+.openo-select-item label {

+    margin-left: 4px;

+    margin-right: 4px;

+    white-space: nowrap;

+}

+

+div.openo-select-popup-container > div.openo-select-item.openo-item-selected, div.openo-select-popup-container > div.openo-select-item:hover {

+    background-color: #f1f1f1;

+    color: #008fd6;

+}

+

+div.openo-select.openo-focus {

+    border: 1px solid #4ac9ff;

+    border-bottom-left-radius: 0;

+    border-bottom-right-radius: 0;

+    border-bottom-color: #ddd;

+}

+

+.openo-pagination-theme a:hover {

+    border-color: #4ac9ff;

+    cursor: pointer;

+}

+

+.SDBtn {

+    background: #fff;

+    color: #333;

+    border: 1px solid #ddd;

+}

+

+.SDBtn:hover {

+    color: #009ae7;

+    border: 1px solid #4AC9FF

+}

+

+table tbody tr.even:hover td, table tbody tr.odd:hover td {

+    background-color: #e6fbe0;

+}

+

+table tr.openoTable_row_selected td {

+    background: #e8f8fe !important;

+    border-bottom: 1px solid #e8e8e8 !important;

+}

+

+.modal-body {

+    padding: 0 !important;

+}

+

+.form-control {

+    height: 26px !important;

+}

+

+.form-group .control-label {

+    margin-left: 20px;

+}

+

+.form-horizontal .control-label {

+    text-align: left;

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/framework/css/open-ostyle.css b/common/src/main/webapp/framework/css/open-ostyle.css
new file mode 100644
index 00000000..5729722a
--- /dev/null
+++ b/common/src/main/webapp/framework/css/open-ostyle.css
@@ -0,0 +1,1009 @@
+/*

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+*/

+

+body {

+    margin: 0;

+    padding: 0;

+    width: 100%;

+    height: 100%;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+    font-size: 12px;

+}

+

+.container{

+    background: #fafafa;

+}

+

+.accordion_parent {

+    position: relative;

+    width: 220px;

+    background-color: #f5f5f5;

+}

+

+.openo-accordion-resizable-handle {

+    z-index: 1 !important;

+    cursor: e-resize;

+    width: 7px;

+    right: -5px;

+    top: 0;

+    height: 100%;

+    position: absolute;

+    font-size: .1px;

+    display: block;

+}

+

+.openoAccordian_accordionmenu {

+    width: 100%;

+    margin: 0;

+    padding: 0;

+    list-style-type: none;

+    line-height: 17px;

+}

+

+.openoAccordian_accordionmenu li {

+    min-width: 75px;

+    margin: 0;

+    padding: 0;

+    list-style-type: none;

+    color: #000;

+    clear: both;

+}

+

+.openo_accordion_ui-icon-collapse, .openo_accordion_ui-icon-expand {

+    display: block;

+    float: left;

+    margin-bottom: -1px;

+    border-bottom: 1px solid #e5e5e5;

+    cursor: pointer;

+    width: 13px;

+    padding-top: 26px;

+}

+

+.openo_accordion_ui-icon-expand {

+    background: url(../thirdparty/images/collapse_arrow.png) right 20px no-repeat;

+    margin-top: 8px;

+}

+

+.openo_accordion_ui-icon-expand.current {

+    background: url(../thirdparty/images/expand_arrow.png) right 20px no-repeat;

+}

+

+.openoAccordian_showHideArrow_hide, .openoAccordian_showHideArrow_show {

+    display: block;

+    position: absolute;

+    right: 0;

+    top: 4px;

+    width: 18px;

+    height: 41px;

+    cursor: pointer;

+    background-color: #f5f5f5;

+}

+

+.openoAccordian_showHideArrow_hide {

+    background-image: url(../images/openo.png);

+    background-position: -7px 0 !important;

+    border-collapse: separate;

+    /*box-shadow: inset -1px 0 0 #e5e5e5;*/

+}

+

+a.header.opened, a.header.closed {

+    font-size: 16px;

+    padding-top: 24px;

+    padding-bottom: 25px;

+    color: #999999;

+}

+

+.openoAccordian_accordionmenu .closed, .openoAccordian_accordionmenu .opened {

+    padding-right: 10px;

+    background-position: 98% 50%;

+    background-repeat: no-repeat;

+}

+

+

+.openoAccordian_accordionmenu li a {

+    padding: 11px 10px 12px;

+    color: #333333;

+    margin-top: -1px;

+    text-align: left !important;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+    font-size: 14px;

+    text-overflow: ellipsis;

+    white-space: nowrap;

+    overflow: hidden;

+    border-top: 1px solid #e5e5e5;

+    border-bottom: 1px solid #e5e5e5;

+    /*height: 19px;*/

+}

+

+.openoAccordian_accordionmenu ul {

+    margin: 0;

+    padding: 0;

+    overflow: hidden;

+}

+

+.openoAccordian_accordionmenu a {

+    display: block;

+    text-decoration: none;

+}

+

+a {

+    color: #428bca;

+    text-decoration: none;

+    background: 0 0;

+}

+

+.bar {

+    height: 834px;

+    width: 18px;

+    background: #f8f8f8;

+    display: none;

+}

+

+.bar span {

+    width: 13px;

+    height: 34px;

+    background-image: url(../images/openo.png);

+    background-position: -39px 0 !important;

+    display: block;

+    /*margin-top: -430px;*/

+}

+

+li {

+    cursor: pointer;

+}

+

+#puer_base_openo {

+    border: 1px solid #ddd;

+}

+

+.openo_accordion_selected {

+    margin-left: 0;

+    margin-right: 0;

+    background: #fafafa;

+    border-left: 3px solid #4ac9ff !important;

+    box-shadow: none;

+    position: relative;

+}

+

+a:hover {

+    color: #4ac9ff;

+}

+

+.openoAccordian_accordionmenu li.openo_accordion_selected a {

+    position: relative;

+    left: -3px;

+    color: #009ae7;

+}

+

+.openo-accordion-resizable-handle {

+    z-index: 1 !important;

+    cursor: e-resize;

+    width: 7px;

+    right: -5px;

+    top: 0;

+    height: 100%;

+    position: absolute;

+    font-size: .1px;

+    display: block;

+}

+

+#iframeContainer iframe {

+    width: 100%;

+    height: 100%;

+    border: 0;

+}

+

+#accordionContent, #iframeContainer {

+    margin: 0;

+    padding: 0;

+    border: 0;

+    width: 100%;

+    height: 100%;

+}

+

+.openoAccordian_showHideArrow_show {

+    background-image: url(../images/openo.png);

+    background-position: -39px 0 !important;

+    box-shadow: inset 1px 0 0 #e5e5e5, inset -1px 0 0 #e5e5e5;

+}

+

+.homecontent {

+    /* text-align: center; */

+    letter-spacing: 1.4px;

+}

+

+.homecontent h3, .homecontent h4, .homecontent h5{

+    font-size: 24px;

+    color: #333;

+    text-transform: capitalize;

+    border-top: 2px solid #f1f1f1;

+    border-bottom: 2px solid #f1f1f1;

+    padding: 13px 5px;

+    display: inline-block;

+    letter-spacing: 5px;

+    -webkit-animation: textScroll 500ms linear;

+    animation: textScroll 500ms linear;

+}

+.homecontent h4 {

+    font-size: 28px;

+    font-weight: bold;

+}

+.homecontent h5 {

+    font-size: 16px;

+    text-align: left;

+    border: none;

+}

+@-webkit-keyframes textScroll {

+     from {opacity: 0;}

+     to {opacity: 1;}

+ }

+

+@keyframes textScroll {

+    from {opacity: 0;}

+    to {opacity: 1;}

+}

+

+/*.modal-body span {

+    font-size: 18px;

+    color: #00f;

+}*/

+

+#msgModal .modal-body .container {

+    width: 100%;

+}

+#msgModal .modal-body .icon {

+    /*color: red;*/

+    font-size: 37px;

+}

+#msgModal .modal-body .icon_error {

+    color: red;

+}

+#msgModal .modal-body .icon_info {

+    color: green;

+}

+#msgModal .modal-body .icon_warning{

+    color: orange;

+}

+#msgModal .modal-body .icon_confirm {

+    color: blue;

+}

+#msgModal .modal-body .msg {

+    color: #333;

+    padding-left: 30px;

+}

+/*#msgModal .modal-body .container .row {

+}*/

+#msgModal .modal-body .row {

+    height: 100%;

+    white-space: nowrap;

+}

+#msgModal .modal-body .row:before{

+    content: "";

+    display: inline-block;

+    vertical-align: middle;

+    width: 0;

+    /* adjust for white space between pseudo element and next sibling */

+    margin-right: -.25em;

+    /* stretch line height */

+    height: 100%;

+}

+

+#msgModal .modal-body .row .msg {

+    /*display: inline-block;

+    vertical-align: middle;

+    white-space: normal;*/

+    /* vertical-align: middle; */

+    position: absolute;

+    top: 50%;

+    -webkit-transform: translateY(-50%);

+    -ms-transform: translateY(-50%);

+    transform: translateY(-50%);

+    padding-left: 70px;

+    white-space: normal;

+}

+

+/* Functional */

+

+#funModal .modal-content .modal-header{

+    padding-bottom: 4px;

+    border-radius: 5px 5px 0 0;

+}

+

+

+/* Buttons */

+.btnDefault {

+    border-radius: 6px;

+    /*height: 24px;*/

+    font-size: 12px;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+    line-height: 24px;

+    color: #000;

+    border: 1px solid #d3d3d3;

+    text-align: center;

+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

+    background: linear-gradient(to bottom, #fff, #fafafa);

+    padding: 0 19px;

+}

+.btnDefault:hover {

+    border-color: #4ac9ff;

+    color: #009ae7;

+}

+#iconBtn {

+    padding: 0 15px;

+}

+#iconBtn span {

+    font-size: 12px;

+    margin-top: 4px;

+    width: 16px;

+    height: 16px;

+}

+#iconBtn span.pull-left {

+    margin-right: 5px;

+}

+#iconBtn span.pull-right {

+    margin-left: 5px;

+}

+

+#buttonArea {

+    text-align: left;

+}

+#buttonArea div {

+    margin: 10px 0 20px;

+}

+

+#buttonArea div .btn-block{

+    margin: 10px 0;

+}

+

+/* Dropdown*/

+

+#dropdown {

+    text-align: left;

+}

+

+#dropdown div {

+    margin: 10px 0 20px;

+}

+

+#dropdown .dropup .dropdown-menu {

+    top: auto;

+    bottom: 34% !important;

+    margin-bottom: 1px;

+}

+#dropdown .dropdown-menu {

+    top: auto;

+    left: auto;

+    margin-bottom: 1px;

+}

+

+#plainDropDown > .dropdownplain {

+    position: relative;

+    clear: both;

+    float: left;

+    width: 100%;

+}

+#plainDropDown > .dropdownplain > ul > li {

+    border: 1px solid #c3c3c3;

+    border-radius: 4px;

+    min-width: 200px;

+}

+#plainDropDown ul li a {

+    padding: 5px 10px;

+    color: #333;

+}

+#plainDropDown > .dropdownplain > ul > li > a > span {

+    top: 4px;

+}

+#plainDropDown ul li a:hover {

+    color: #333;

+}

+#plainDropDown .dropdown-menu {

+    width: 100%;

+}

+

+

+

+/* Credit to bootsnipp.com for the css for the color graph */

+.colorgraph {

+    height: 5px;

+    border-top: 0;

+    background: #c4e17f;

+    border-radius: 5px;

+    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

+    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

+    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

+    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

+}

+

+/* Radio  and CheckBoxes------------*/

+

+

+.funkyradio div {

+    clear: both;

+    overflow: hidden;

+}

+

+.funkyradio label {

+    width: 100%;

+    border-radius: 3px;

+    border: 1px solid #D1D3D4;

+    font-weight: normal;

+}

+

+.funkyradio input[type="radio"]:empty,

+.funkyradio input[type="checkbox"]:empty {

+    display: none;

+}

+

+.funkyradio input[type="radio"]:empty ~ label,

+.funkyradio input[type="checkbox"]:empty ~ label {

+    position: relative;

+    line-height: 2.5em;

+    text-indent: 3.25em;

+    margin-top: 2em;

+    cursor: pointer;

+    -webkit-user-select: none;

+    -moz-user-select: none;

+    -ms-user-select: none;

+    user-select: none;

+}

+

+.funkyradio input[type="radio"]:empty ~ label:before,

+.funkyradio input[type="checkbox"]:empty ~ label:before {

+    position: absolute;

+    display: block;

+    top: 0;

+    bottom: 0;

+    left: 0;

+    content: '';

+    width: 2.5em;

+    background: #D1D3D4;

+    border-radius: 3px 0 0 3px;

+}

+

+.funkyradio input[type="radio"]:hover:not(:checked) ~ label,

+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {

+    color: #888;

+}

+

+.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,

+.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {

+    content: '\2714';

+    text-indent: .9em;

+    color: #C2C2C2;

+}

+

+.funkyradio input[type="radio"]:checked ~ label,

+.funkyradio input[type="checkbox"]:checked ~ label {

+    color: #777;

+}

+

+.funkyradio input[type="radio"]:checked ~ label:before,

+.funkyradio input[type="checkbox"]:checked ~ label:before {

+    content: '\2714';

+    text-indent: .9em;

+    color: #333;

+    background-color: #ccc;

+}

+

+.funkyradio input[type="radio"]:focus ~ label:before,

+.funkyradio input[type="checkbox"]:focus ~ label:before {

+    box-shadow: 0 0 0 3px #999;

+}

+

+.funkyradio-default input[type="radio"]:checked ~ label:before,

+.funkyradio-default input[type="checkbox"]:checked ~ label:before {

+    color: #333;

+    background-color: #ccc;

+}

+

+.funkyradio-primary input[type="radio"]:checked ~ label:before,

+.funkyradio-primary input[type="checkbox"]:checked ~ label:before {

+    color: #fff;

+    background-color: #337ab7;

+}

+

+.funkyradio-success input[type="radio"]:checked ~ label:before,

+.funkyradio-success input[type="checkbox"]:checked ~ label:before {

+    color: #fff;

+    background-color: #5cb85c;

+}

+

+.funkyradio-danger input[type="radio"]:checked ~ label:before,

+.funkyradio-danger input[type="checkbox"]:checked ~ label:before {

+    color: #fff;

+    background-color: #d9534f;

+}

+

+.funkyradio-warning input[type="radio"]:checked ~ label:before,

+.funkyradio-warning input[type="checkbox"]:checked ~ label:before {

+    color: #fff;

+    background-color: #f0ad4e;

+}

+

+.funkyradio-info input[type="radio"]:checked ~ label:before,

+.funkyradio-info input[type="checkbox"]:checked ~ label:before {

+    color: #fff;

+    background-color: #5bc0de;

+}

+

+.btn-primary {

+  color: #fff;

+  background-color: #428bca;

+  border-color: #357ebd;

+  min-width:70px

+}

+

+.btn.outline {

+    background: none;

+    

+}

+.btn-primary.outline {

+    border: 2px solid #0099cc;

+    color: #0099cc;

+}

+.modal-header {

+	/*background-color: #cccccc;*/

+    background: linear-gradient(to bottom, #fbfbfb 0, #f6f6f6 70%, #f0f0f0 100%);

+    padding:0px;

+}

+

+/* Tree */

+

+#tree1 ul li {

+    list-style: none;

+    text-align: left;

+    margin-top: 7px;

+}

+

+/* Accordian Area */

+#accordionArea .panel-group .panel-title a:before {

+    font-family: "Glyphicons Halflings";

+    content:"\e259";/*\e094*/

+    /*position: absolute;

+    right: 20px;*/

+    font-size: 20px;

+    margin-right: 20px;

+    text-decoration: none !important;

+}

+#accordionArea .panel-group .panel-title a.collapsed:before {

+    content:"\e258";/*\e092*/

+}

+

+#accordionArea h3 {

+    width: 100%;

+    text-align: left;

+    background-color: #eaeaea;

+    border: none;

+    padding: 8px;

+    font-size: 20px;

+}

+#accordionArea h3 a {

+    text-decoration: none;

+}

+#accordionArea .panel-group .panel {

+    border: none;

+    box-shadow: none;

+    -webkit-box-shadow: none;

+}

+ div.panel-body {

+    text-align: justify;

+}

+

+/* Tab */

+#tabArea .tab-content div p {

+    text-align: justify;

+}

+

+/*Table*/

+#tableArea h3 {

+    text-align: left;

+    border: none;

+    padding-top: 5px;

+}

+

+#tableArea h3 span {

+    font-size: 12px;

+}

+

+tr{

+	text-align:center;

+}

+

+/* Vertical Tab */

+.nav-stacked {

+    margin-top: 20px;

+    text-align: left;

+    border:none;

+}

+

+.nav-tabs>li.active>a {

+    border-top: 3px solid #4ac9ff;

+}

+.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {

+    border-top: 3px solid #4ac9ff;

+}

+.nav-tabs>li>a:hover {

+    border-color: transparent;

+    background-color: transparent;

+}

+.nav-stacked>li.active>a {

+    background-color: #fff;

+    border: none;

+    border-radius: 4px;

+    border-left: 3px solid #4ac9ff;

+}

+

+#vtabArea .tab-content .tab-pane {

+    text-align: left;

+}

+#vtabArea .tab-content .tab-pane p {

+    text-align: justify;

+}

+

+.link_active {

+    /*background-color: lightslategrey;*/

+    font-style: italic;

+    color: #4ac9ff !important;

+    background:#fafafa;

+    border-left: 3px solid #4ac9ff;

+

+

+}

+

+/*input.ng-invalid {

+    background-color:yellow;

+}*/

+

+/* Functional & Notification*/

+

+#myModal .modal-header, #msgModal .modal-header, #funModal .modal-header {

+    padding: 9px 15px;

+    border-radius: 5px 5px 0 0;

+    color: #666;

+}

+

+#msgModal .modal-content {

+    width: 70%;

+    position: absolute;

+    left: 15%;

+    box-shadow: 0 6px 10px rgba(0,0,0,.3);

+    -webkit-box-shadow: 0 6px 10px rgba(0,0,0,.3);

+}

+#msgModal .modal-footer, #funModal .modal-footer {

+    border: none;

+    margin: 0 auto;

+    width: 100%;

+    text-align: center;

+}

+

+

+#myInput {

+    background-image: url('../thirdparty/images/searchicon.png'); /* Add a search icon to input */

+    background-position: 10px 9px; /* Position the search icon */

+    background-repeat: no-repeat; /* Do not repeat the icon image */

+    width: 100%; /* Full-width */

+    font-size: 16px; /* Increase font-size */

+    padding: 5px 20px 5px 40px; /* Add some padding */

+    border: 1px solid #ddd; /* Add a grey border */

+    margin-bottom: 12px; /* Add some space below the input */

+}

+

+#myTable_search {

+    border-collapse: collapse; /* Collapse borders */

+    width: 100%; /* Full-width */

+    border: 1px solid #ddd; /* Add a grey border */

+    font-size: 18px; /* Increase font-size */

+}

+

+#myTable_search th, #myTable td {

+    text-align: left; /* Left-align text */

+    padding: 12px; /* Add padding */

+}

+

+#myTable_search tr {

+    /* Add a bottom border to all table rows */

+    border-bottom: 1px solid #ddd;

+}

+

+#myTable_search tr.header, #myTable tr:hover {

+    /* Add a grey background color to the table header and on hover */

+    background-color: #f1f1f1;

+}

+

+/* List */

+#listArea {

+    margin-top: 25px;

+}

+#listArea .list {

+    /*border: 1px solid #333;*/

+    padding: 5px;

+}

+#listArea .list div {

+    margin: 5px 0;

+}

+

+#menu_accordion {

+    margin-top: 20px;

+}

+

+#menu_accordion li a{

+    padding-left: 42px;

+}

+#menu_accordion li a:hover {

+    color: #4ac9ff;

+}

+

+#rightContainer {

+    margin-top:20px;

+}

+

+#panel1 li:first-child{

+    margin-top:1px;

+}

+

+#menu_accordion #container, #menu_accordion #widgets, #menu_accordion #notifications, #menu_accordion #functional{

+    margin-bottom : 0px;

+    text-align : left;

+    background-color: #F5F5F5;

+}

+

+#menu_accordion h5{

+    margin-bottom : 0px;

+    text-align : left;

+    padding-left : 10px;

+    cursor: pointer;

+    letter-spacing: 3px;

+    width:100%;

+}

+ #functional h5{

+    padding : 0;

+}

+ #functional a{

+    padding: 12px 14px;

+}

+.tableAlign{

+    text-align:left;

+}

+

+.chkboxAlign{

+    text-align:center;

+}

+

+#provinceAction {

+    text-align: left;

+}

+#provinceTable th {

+    background-color: #e3e3e3;

+}

+

+#provinceTable.table-striped>tbody>tr:nth-child(even)>td {

+    background-color:#fafafa;

+}

+

+#provinceTable.table-striped>tbody>tr:nth-child(odd)>td {

+    background-color:#f7f7f7

+}

+#provinceTable.table-striped>tbody>tr:hover {

+    background-color: red;

+}

+

+.prvdel{

+    margin-left:20px;

+}

+

+.shortnoteHeader{

+    margin-top:50px;

+    text-align:left;

+    font-weight: bold;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+.shortnoteText{

+    margin-top:20px;

+    text-align:left;

+    font-size:12px;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+    color:blue;

+

+}

+

+.ztree *{

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+

+.noChild_link_active {

+    /*background-color: lightslategrey;*/

+    font-style: italic;

+    color: #4ac9ff !important;

+    background:#fafafa;

+    border-left: 3px solid #4ac9ff;

+}

+

+.rmpadding{

+    padding-left:0px !important;

+    padding-right:0px !important;

+}

+

+#menu_accordion .collapsed span {

+    background: url(../../thirdparty/images/expand_arrow.png) 1px 3px no-repeat;

+    display: block;

+    float: left;

+    margin-bottom: -1px;

+    cursor: pointer;

+    width: 100%;

+    padding-left: 20px;

+}

+#menu_accordion span {

+    background: url(../../thirdparty/images/collapse_arrow.png) 1px 3px no-repeat;

+    display: block;

+    float: left;

+    margin-bottom: -1px;

+    cursor: pointer;

+    width: 100%;

+    padding-left: 20px;

+}

+

+.magic-radio + label{

+    font-size:14px;

+}

+

+.panelbr{

+    border-left:0px;

+    border-right:0px;

+}

+

+.popover-title {

+    margin: 0;

+    padding: 8px 14px;

+    font-size: 14px;

+    font-weight: normal;

+    line-height: 18px;}

+

+.customPopover{

+    padding:10px 20px;

+}

+

+

+.css-form input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {

+    background-color: #FA787E;

+}

+

+.css-form input.ng-valid.ng-touched, textarea.ng-valid.ng-touched {

+    background-color: white;

+}

+

+.errMsg{

+

+    color:red;

+    float: left;

+}

+

+.customtable thead{

+    background: #ECECEC;

+}

+

+.customtable th,.table td{

+    /* padding-top: 3px!important; */

+    padding-bottom: 3px!important;

+}

+

+/*

+.customtable tr,.customtable td, .customtable th{

+    text-align:left;

+

+}

+*/

+

+.ng-table th.sortable .sort-indicator {

+    width:100%;

+    float:right;

+}

+

+.btn-group>.btn.active{

+    z-index: 2;

+    color: #fff;

+    background-color: #428bca;

+    border-color: #428bca;

+    cursor: default;

+}

+

+.customtable tbody tr:hover td{

+    background-color: #e6fbe0 !important;

+}

+

+.shortnote{

+    width:100%;

+    float:left;

+}

+

+.ng-table-pager .pagination{

+    float:right;

+}

+.ng-table-pager .ng-table-counts{

+    float:left !important;

+}

+.btnmrg{

+    margin:0 5px 0 5px;

+}

+

+.labelstyle{

+    text-align:left;

+    font-size:14px;

+    font-weight: 700;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+

+.titlestyle{

+    font-size:14px !important;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+

+.header{

+    text-align:left;

+    font-size:14px;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+

+.message{

+    font-size:12px;

+    font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;

+}

+

+.shortnoteHeader {

+    color : blue;

+}

+.shortnoteText {

+    font-size : 10px;

+}

+.form-group, .modal-header{

+    text-align: left;

+}

+

+.labelHeader, .labelTitle {

+    font-size: 28px;

+    font-weight: bold;

+    color: #333;

+    text-transform: capitalize;

+    border-top: 2px solid #f1f1f1;

+    border-bottom: 2px solid #f1f1f1;

+    padding: 13px 5px;

+    display: inline-block;

+    letter-spacing: 5px;

+}

+

+.labelTitle {

+    font-size: 24px;

+    font-weight: normal;

+    text-align: left;

+    border: none;

+}

+

+pre code {

+    white-space: pre-line;

+

+}

+.plus-icon {

+    background-image: url("../../thirdparty/images/add.png");

+}

+.edit-icon {

+    background-image: url("../../thirdparty/images/edit.png");

+}

+.delete-icon {

+    background-image: url("../../thirdparty/images/delete.png");

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/framework/template.html b/common/src/main/webapp/framework/template.html
new file mode 100644
index 00000000..f7cd87dd
--- /dev/null
+++ b/common/src/main/webapp/framework/template.html
@@ -0,0 +1,44 @@
+<!--

+

+    Copyright 2016-2017, Huawei Technologies Co., Ltd.

+

+    Licensed under the Apache License, Version 2.0 (the "License");

+    you may not use this file except in compliance with the License.

+    You may obtain a copy of the License at

+

+            http://www.apache.org/licenses/LICENSE-2.0

+

+    Unless required by applicable law or agreed to in writing, software

+    distributed under the License is distributed on an "AS IS" BASIS,

+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+    See the License for the specific language governing permissions and

+    limitations under the License.

+

+-->

+

+<script id="dialogTpl" type="text/html">

+    <h3>{{name}}</h3> <div>Skills are:{{#skills}}<div>{{.}}</div>{{/skills}}</div></div>

+</script>

+

+<script id="person" type="text/html">

+    <ul>{{#depts}}<div><h4>{{fname}} {{lname}} </h4>{{Address}}</div>{{/depts}}</ul>

+</script>

+

+<script id="user" type="text/html">

+    <h3>{{name}}</h3><p>Address: {{address}}</p>

+</script>

+

+<!-- Left Menu Accordion -->

+<!--

+<script id="menu_accordion" type="text/html">

+    {{#items}}

+    <div class="panel panel-default">

+        <h3 class="panel-title">

+            <a data-toggle="collapse" data-parent="#accordion" data-target="#{{tabId}}">{{header}}</a>

+        </h3>

+        <div id="{{tabId}}" class="panel-collapse collapse {{#isActive}}in{{/isActive}}">

+            {{#subLinks}}<a ui-sref="{{state}}" ui-sref-active="link_active" style="padding-left: 62px;" onclick={{action}}>{{title}}</a>{{/subLinks}}

+        </div>

+    </div>

+    {{/items}}

+</script>-->