add portal-common files

Change-Id: Id92745df42a6fde24d3b4709f6d92815cd88bd80
Signed-off-by: “shentao” <shentao@chinamobile.com>

22 files changed, 7185 insertions, 0 deletions

diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css
new file mode 100644
index 00000000..35572e3e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/black.css
@@ -0,0 +1,388 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Default theme
+***/
+
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #3d3d3d !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #212121 !important;
+}
+.header .btn-navbar {
+  background-color: #212121 !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #383838 !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #8a8a8a !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #000;
+}
+
+.header .search-form .form-control {
+  color: #999;
+  border: 0; 
+  background-color: #000;  
+}
+
+.header .search-form .form-control::-webkit-input-placeholder { /* WebKit browsers */
+    color: #777;
+}
+.header .search-form .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #777;
+}
+.header .search-form .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #777;
+}
+.header .search-form .form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #777;
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-light.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #999;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #383838;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #383838;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #999;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #383838 url(../../img/hor-menu-search-close.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#383838; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #999;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #999;
+  background: url(../../img/search-icon.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #999;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #999;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #999;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #999;
+}
+.btn-group .btn.blue.dropdown-toggle{
+  background-color: #3d3d3d !important; 
+  color: #fff !important;
+}
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #444;
+}
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #3d3d3d;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #5c5c5c !important;
+  color: #ffffff !important;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  color: #969696;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #303030;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #e02222 !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #575757 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #575757 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #575757 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #bdbdbd;
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  color: #7d7d7d !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #707070 !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #8a8a8a !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #242424 !important;
+  color: #7d7d7d;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #7d7d7d !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #7d7d7d !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #7d7d7d !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #3d3d3d !important;
+  color: #bfbfbf !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #7d7d7d !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler.jpg);
+  background-color: #242424;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #3d3d3d !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #3d3d3d;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #999999;
+}
+.footer .footer-tools .go-top {
+  background-color: #4f4f4f;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #8a8a8a;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #242424;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #999999;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #4f4f4f;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #8a8a8a;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #2e2e2e !important;
+  }
+  .page-boxed .page-container {
+    background-color: #3d3d3d;
+    border-left: 1px solid #5e5e5e;
+    border-bottom: 1px solid #5e5e5e;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #5e5e5e;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #5e5e5e;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #5e5e5e;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #2e2e2e !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #292929 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #4a4a4a !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #292929 !important;
+  }
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover,
+  ul.page-sidebar-menu > li:hover > a {
+    background: #1e1e1e;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css
new file mode 100644
index 00000000..976a9679
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/black_ifrm.css
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #3d3d3d;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #212121;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #3d3d3d;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #212121;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+.buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #d1d1d1;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #3d3d3d;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #3d3d3d;
+  }
+  .sectionHeaderclosed {
+  background-color: #262626;
+  }
+
+#dt_example h1{
+color:#3d3d3d;
+font-weight:600 !important;
+}
+
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #ffede4;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px  solid #ffede4;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+ .cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #f8dddd !important;
+ border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #f8dddd !important;
+   border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #ffede4 !important;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px solid #ffede4;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #ffede4; 
+} 
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css
new file mode 100644
index 00000000..72102571
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue.css
@@ -0,0 +1,374 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Blue theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #1570a6 !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #0f4e74 !important;
+}
+.header .btn-navbar {
+  background-color: #0f4e74 !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  color: #fff;
+  background-color: #146a9d !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #68bbec !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #0B4263;
+}
+
+.header .search-form .form-control{
+  color: #68bbec;
+  border: 0; 
+  background-color: #0B4263;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-blue.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #146a9d;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #146a9d;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #146a9d url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#146a9d; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #1876AD;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #1570a6;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #1c95dc !important;
+  color: #ffffff !important;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  color: #7fc5ef;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #12618f;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #cc1d1d !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #1b8fd3 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #1b8fd3 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #1b8fd3 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #c3e4f7;
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  color: #51b1e9 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #3ba6e6 !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #68bbec !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #0f5179 !important;
+  color: #51b1e9;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #51b1e9 !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #51b1e9 !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #51b1e9 !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #1570a6 !important;
+  color: #bfbfbf !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #51b1e9 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-blue.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler-blue.jpg);
+  background-color: #0f5179;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #1570a6 !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close-blue.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #1570a6;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #68bbec;
+}
+.footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #0f5179;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #68bbec;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #125e8b !important;
+  }
+  .page-boxed .page-container {
+    background-color: #1570a6;
+    border-left: 1px solid #1c98e1;
+    border-bottom: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #1c98e1;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #125e8b !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #105882 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #187fbd !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #105882 !important;
+  }
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover,
+  ul.page-sidebar-menu > li:hover > a {
+    background: #0e4b70;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css
new file mode 100644
index 00000000..31ccf309
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/blue_ifrm.css
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #3f9ed5;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #398ec0;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #3f9ed5;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #398ec0;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #3f9ed5;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #3f9ed5;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #3f9ed5;
+  }
+  .sectionHeaderclosed {
+  background-color: #52ade2;
+  }
+
+#dt_example h1{
+color:#438eb9;
+font-weight:600 !important;
+}
+ /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #d9e3e8;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px  solid #d9e3e8;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #c4d7e2 !important;
+ border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #c4d7e2 !important;
+   border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #d9e3e8 !important;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px solid #d9e3e8;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #d9e3e8; 
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css
new file mode 100644
index 00000000..7fb90fba
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown.css
@@ -0,0 +1,376 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Brown theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #623f18 !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #35220d !important;
+}
+.header .btn-navbar {
+  background-color: #35220d !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #5a3a16 !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #d18d42 !important;
+}
+.btn-group .btn.blue.dropdown-toggle{
+background-color: #8d6a43 !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #241709;
+}
+
+.header .search-form .form-control{
+  color: #ccc;
+  border: 0; 
+  background-color: #241709;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-brown.png);
+}
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #5a3a16;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+
+.header .hor-menu .dropdown-menu {  
+    background: #5a3a16;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #5a3a16 url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#5a3a16; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #6B451B;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #623f18;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #935f24 !important;
+  color: #ffffff !important;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  color: #9a6d3a;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #4e3112;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #4e3112 !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #8b5922 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #8b5922 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #8b5922 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #e5bf94;
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  color: #c88131 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #b4742c !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #d18d42 !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #39250e !important;
+  color: #b18d65;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #b18d65 !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #b18d65 !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #b18d65 !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #623f18 !important;
+  color: #b18d65 !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #845f36 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-brown.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler-brown.jpg);
+  background-color: #39250e;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #623f18 !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close-brown.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #623f18;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #999999;
+}
+.footer .footer-tools .go-top {
+  background-color: #7f511f;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #d18d42;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #39250e;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #999999;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #7f511f;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #d18d42;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter-brown.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #b18d65;
+}
+.gritter-item-wrapper a:hover {
+  color: #755a3b;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #492f12 !important;
+  }
+  .page-boxed .page-container {
+    background-color: #623f18;
+    border-left: 1px solid #976125;
+    border-bottom: 1px solid #976125;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #976125;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #976125;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #976125;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #492f12 !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #412a10 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #764c1d !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #412a10 !important;
+  }
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover,
+  ul.page-sidebar-menu > li:hover > a {
+    background: #311f0c;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css
new file mode 100644
index 00000000..1bda14f9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/brown_ifrm.css
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #8d6a43;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #805b32;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #8d6a43;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #805b32;
+ }
+ .menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+}
+.buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #8d6a43;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #8d6a43;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #8d6a43;
+  }
+  .sectionHeaderclosed {
+  background-color: #9f7b53;
+  }
+
+#dt_example h1{
+color:#8d6a43;
+font-weight:600 !important;
+}
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #ece0d3;
+  border-bottom: 1px solid #ece0d3;
+  border-top: 1px  solid #ece0d3;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #d4c2af;
+  border-bottom: 1px solid #d4c2af;
+  border-top: 1px  solid #d4c2af;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #d4c2af;
+  border-bottom: 1px solid #d4c2af;
+  border-top: 1px  solid #d4c2af;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #cbaf8f;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #d4c2af !important;
+ border-bottom: 1px solid #d4c2af;
+  border-top: 1px solid #d4c2af;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #d4c2af !important;
+   border-bottom: 1px solid #d4c2af;
+  border-top: 1px solid #d4c2af;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #ece0d3 !important;
+  border-bottom: 1px solid #ece0d3;
+  border-top: 1px solid #ece0d3;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #ece0d3; 
+}  
+  
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css
new file mode 100644
index 00000000..dffb7cdb
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey.css
@@ -0,0 +1,372 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Grey theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #666666 !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #4a4a4a !important;
+}
+.header .btn-navbar {
+  background-color: #4a4a4a !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #616161 !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #b3b3b3 !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #3a3a3a;
+}
+
+.header .search-form .form-control{
+  color: #ccc;
+  border: 0; 
+  background-color: #3a3a3a;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-light.png);
+}
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #616161;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #616161;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #616161 url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#616161; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #757575;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #666666;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #858585 !important;
+  color: #ffffff !important;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  color: #bfbfbf;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #595959;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #e02222 !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #808080 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #808080 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #808080 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #e6e6e6;
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  color: #a6a6a6 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #999999 !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #b3b3b3 !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #4d4d4d !important;
+  color: #a6a6a6;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #a6a6a6 !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #a6a6a6 !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #a6a6a6 !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #666666 !important;
+  color: #bfbfbf !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #a6a6a6 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler.jpg);
+  background-color: #4d4d4d;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #666666 !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #666666;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #b3b3b3;
+}
+.footer .footer-tools .go-top {
+  background-color: #787878;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #b3b3b3;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #4d4d4d;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #b3b3b3;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #787878;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #b3b3b3;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #575757 !important;
+  }
+  .page-boxed .page-container {
+    background-color: #666666;
+    border-left: 1px solid #878787;
+    border-bottom: 1px solid #878787;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #878787;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #878787;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #878787;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #575757 !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #525252 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #737373 !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #525252 !important;
+  }
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover,
+  ul.page-sidebar-menu > li:hover > a {
+    background: #474747;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css
new file mode 100644
index 00000000..e3b85681
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/grey_ifrm.css
@@ -0,0 +1,209 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #69a0f8;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #4b8df8;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #69a0f8;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #4b8df8;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+.buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #69a0f8;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #69a0f8;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #69a0f8;
+  }
+  .sectionHeaderclosed {
+  background-color: #5e9bfd;
+  }
+
+#dt_example h1{
+color:#4b8df8;
+font-weight:600 !important;
+}
+
+
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #ffede4;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px  solid #ffede4;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #f8dddd !important;
+ border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #f8dddd !important;
+   border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #ffede4 !important;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px solid #ffede4;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #ffede4; 
+}  
+    
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css
new file mode 100644
index 00000000..49939fad
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/light.css
@@ -0,0 +1,479 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light theme
+***/
+
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #fafafa !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #434343 !important;
+}
+.header .btn-navbar {
+  background-color: #434343 !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #4f4f4f !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #808080 !important;
+}
+.btn-group .btn.blue.dropdown-toggle{
+background-color: #28b779 !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #3a3a3a;
+}
+
+.header .search-form .form-control{
+  color: #ccc;
+  border: 0; 
+  background-color: #3a3a3a;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon.png);
+}
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #4f4f4f;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #51b88b !important; 
+}
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+  border-top: 6px solid #51b88b;
+  }
+  
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #4f4f4f;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #4f4f4f url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#4f4f4f; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #656565;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-content {
+  border-left: 1px solid #e2e2e2 !important;
+  border-bottom: 1px solid #e2e2e2 !important;
+}
+.page-sidebar-reversed .page-content {
+  border-left: 0;
+  border-right: 1px solid #e2e2e2 !important;
+}
+.page-sidebar {
+  background-color: #fafafa;
+}
+.page-sidebar-fixed .page-content {
+  border: 0 !important;
+}
+.page-sidebar-fixed .page-sidebar {
+  border-right: 1px solid #e2e2e2 !important;
+}
+
+
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #e2e2e2 !important;
+  color: #000 !important;
+  font-weight: 400;
+}
+
+ul.page-sidebar-menu > li:first-child > a {
+   border-top: 1px solid transparent !important;
+}
+
+ul.page-sidebar-menu > li:last-child > a {
+   border-bottom: 1px solid transparent !important;
+}
+
+ul.page-sidebar-menu > li a i {
+  color: #bbb !important;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #eee;
+  border-top: 1px solid #e8e8e8;
+}
+ul.page-sidebar-menu > li.active > a .selected {
+  right:-7px;
+  top:0px;
+  width: 7px;
+  height: 39px;
+  background-image: url("../../img/sidebar-menu-arrow-green.png");
+}  
+.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected {
+  right: auto;
+  left:-7px;
+  background-image: url("../../img/sidebar-menu-arrow-green-reverse.png");
+} 
+ul.page-sidebar-menu > li.active i {
+  color: #fff !important;
+}
+.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected {
+  display: none;
+}
+ul.page-sidebar-menu > li.active > a{
+  background: #28b779 !important;
+  border-top-color: transparent !important;
+  color:#fff !important;
+}  
+ul.page-sidebar-menu > li.active > a i {
+  color: #fff;
+}
+ul.page-sidebar-menu > li > a > .arrow:before,
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #ccc !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before, 
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #fff !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li > a {
+  font-weight: 400 !important;
+  color: #333 !important;
+}
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+  color: #818181 !important;
+  background: #efefef !important; 
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #ccc !important;
+}
+
+/* sub menu links effects */
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu ul.sub-menu > li.open > a {
+  color: #818181 !important;
+  background: #efefef !important; 
+}
+ul.page-sidebar-menu ul.sub-menu > li > a i {
+  color: #bbb !important;
+}
+
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #fbfbfb  !important;  
+  color: #727272 !important;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #e2e2e2 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-white.png);
+}
+
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {  
+  background-image: url(../../img/sidebar-toggler-light.jpg);
+  background-color: #333;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #fbfbfb !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {  
+  background-image: url("../../img/sidebar-search-close-light.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #fbfbfb;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #333333;
+}
+.footer .footer-tools .go-top {
+  background-color: #666666;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #999999;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #434343;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #aaaaaa;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #666666;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #aaaaaa;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #E8E8E8 !important;
+  }
+  .page-boxed .page-container {
+    background-color: #fafafa;
+    border-left: 1px solid #e2e2e2;
+    border-bottom: 1px solid #e2e2e2;
+  }
+  .page-sidebar-reversed.page-boxed .page-container {
+    border-left: 0;
+    border-right: 1px solid #e2e2e2;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #e2e2e2;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #e2e2e2;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #E8E8E8 !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+  page sidebar
+  ***/
+  .page-sidebar {
+    background-color: #f1f1f1 !important;
+    border-right: none !important;
+  }
+  .page-sidebar-fixed .page-sidebar {
+    border-right: none !important; 
+  }
+  .page-content {
+    border-left: none !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #ccc !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover {
+    color: #666666 !important;
+    background-color: #dddddd !important;
+  }
+  ul.page-sidebar-menu > li.open > a {
+    border-bottom-color: transparent !important;
+  }
+  ul.page-sidebar-menu > li.active > a {
+    color: #ffffff !important;
+    background-color: #28b779 !important;
+  }
+
+  ul.page-sidebar-menu ul.sub-menu > li > a {
+    color: #111 !important;
+  }
+
+  ul.page-sidebar-menu ul.sub-menu > li.open > a,
+  ul.page-sidebar-menu ul.sub-menu > li.active > a,
+  ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+    color: #666666 !important;
+    background: #dddddd !important; 
+  }
+
+  .page-sidebar .sidebar-search input {
+    background-color: #f1f1f1 !important;
+    color: #ccc !important;
+  }
+
+  .page-sidebar .sidebar-search .input-box {
+    border-bottom-color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input::-webkit-input-placeholder {
+    color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input:-moz-placeholder {
+    color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input:-ms-input-placeholder {
+    color: #ccc !important;
+  }
+
+  /***
+  page footer
+  ***/
+  
+  .footer {
+    background-color: #434343;
+  }
+
+  .footer .footer-inner {
+    color: #cccccc;
+  }
+  .footer .footer-tools .go-top {
+    background-color: #666666;
+  }
+  .footer .footer-tools .go-top i {
+    color: #999999;
+  }
+}
+
+@media (max-width: 767px) {
+  body {
+    background-color: #333 !important;
+  }
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css
new file mode 100644
index 00000000..170c35ca
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/light_ifrm.css
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #5fbf95;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #1faa6e;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #5fbf95;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #1faa6e;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #51b88b;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #51b88b;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #51b88b;
+  }
+  .sectionHeaderclosed {
+  background-color: #70c6a0;
+  }
+
+#dt_example h1{
+color:#51b88b;
+font-weight:600 !important;
+}
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #d7eae3;
+  border-bottom: 1px solid #d7eae3;
+  border-top: 1px  solid #d7eae3;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #c7e5da;
+  border-bottom: 1px solid #c7e5da;
+  border-top: 1px  solid #c7e5da;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #c7e5da;
+  border-bottom: 1px solid #c7e5da;
+  border-top: 1px  solid #c7e5da;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #aadac5;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #c7e5da !important;
+ border-bottom: 1px solid #c7e5da;
+  border-top: 1px solid #c7e5da;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #c7e5da !important;
+   border-bottom: 1px solid #c7e5da;
+  border-top: 1px solid #c7e5da;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #d7eae3 !important;
+  border-bottom: 1px solid #d7eae3;
+  border-top: 1px solid #d7eae3;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #d7eae3; 
+}  
+      
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css
new file mode 100644
index 00000000..b4e20d60
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple.css
@@ -0,0 +1,375 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Purple theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #701584 !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #470d54 !important;
+}
+.header .btn-navbar {
+  background-color: #470d54 !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #69147b !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #c84fe3 !important;
+}
+.btn-group .btn.blue.dropdown-toggle{
+background-color: #571067 !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #360A40;
+}
+
+.header .search-form .form-control{
+  color: #ccc;
+  border: 0; 
+  background-color: #360A40;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-purple.png);
+}
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #69147b;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #69147b;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #69147b url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#69147b; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #78188C;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #701584;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #9d1db9 !important;
+  color: #ffffff !important;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  color: #cf65e7;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #5d116e;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #571067 !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #951cb0 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #951cb0 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #951cb0 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #e4a7f1;
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  color: #c239df !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #bb23dc !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #c84fe3 !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #4b0e58 !important;
+  color: #bf55d7;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #b84dd0 !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #b84dd0 !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #b84dd0 !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #701584 !important;
+  color: #bfbfbf !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #a93bc1 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-purple.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler-purple.jpg);
+  background-color: #4b0e58;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #701584 !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close-purple.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #701584;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #c84fe3;
+}
+.footer .footer-tools .go-top {
+  background-color: #8a1aa3;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #c84fe3;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #4b0e58;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #c84fe3;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #8a1aa3;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #c84fe3;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter-purple.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #5a116a !important;
+  }
+  .page-boxed .page-container {
+    background-color: #701584;
+    border-left: 1px solid #a11ebd;
+    border-bottom: 1px solid #a11ebd;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #a11ebd;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #a11ebd;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #a11ebd;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #5a116a !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #520f61 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #83189a !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #520f61 !important;
+  }
+  ul.page-sidebar-menu > li.open > a,
+  ul.page-sidebar-menu > li > a:hover,
+  ul.page-sidebar-menu > li:hover > a {
+    background: #430d4f;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css
new file mode 100644
index 00000000..e2d2f56f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/purple_ifrm.css
@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Purple_ifrm  theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #b045c7;
+  color: #fff !important;
+  border: 0px solid #b15a59;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada !important;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver ,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown{
+  background-color: #8f32a3;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #b045c7;
+  border: 0px solid #ababab;
+  color: #fff !important;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #8f32a3;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #5d116e;
+  border-top: 0;
+}
+
+.windowHeader,
+.dialogHeader {
+  background-color: #5d116e;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #8f32a3;
+  }
+  .sectionHeaderclosed {
+  background-color: #a03bb6;
+  }
+
+#dt_example h1{
+color:#8f32a3;
+font-weight:600 !important;
+}
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #e7c7ee;
+  border-bottom: 1px solid #e7c7ee;
+  border-top: 1px  solid #e7c7ee;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #d49ce0;
+  border-bottom: 1px solid #d49ce0;
+  border-top: 1px  solid #d49ce0;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #d49ce0;
+  border-bottom: 1px solid #d49ce0;
+  border-top: 1px  solid #d49ce0;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #ecd4f1;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #d49ce0 !important;
+ border-bottom: 1px solid #d49ce0;
+  border-top: 1px solid #d49ce0;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #d49ce0 !important;
+   border-bottom: 1px solid #d49ce0;
+  border-top: 1px solid #d49ce0;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #e7c7ee !important;
+  border-bottom: 1px solid #e7c7ee;
+  border-top: 1px solid #e7c7ee;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #e7c7ee; 
+}  
+      
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css
new file mode 100644
index 00000000..a3d71015
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue.css
@@ -0,0 +1,398 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Blue theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #e8e8e8 !important;
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #1b8fd3 !important;
+}
+.header .btn-navbar {
+  background-color: #1b8fd3!important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  color: #fff;
+  background-color: #ee5c00 !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #fff !important;
+}
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range{
+background-color: #ee5c00 !important; 
+}
+.btn-group .btn.blue.dropdown-toggle{
+background-color: #ee5c00 !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #0B4263;
+}
+
+.header .search-form .form-control{
+  color: #68bbec;
+  border: 0; 
+  background-color: #0B4263;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-blue.png);
+}
+.zte-theme-panel > .toggler:hover {
+  background-color: #146a9d !important;
+}
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #146a9d;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #ee5c00 !important; 
+}
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+  border-top: 6px solid #ee5c00;
+  }
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #146a9d;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #146a9d url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#146a9d; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #1876AD;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #e8e8e8;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #d3d1d1  !important;
+  /*color: black !important;*/
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+ul.page-sidebar-menu > li a i {
+  /*color: black !important;*/
+}
+ul.page-sidebar-menu > li.open > a{
+border-bottom: 1px solid #d3d1d1  !important;
+color: #0d638f;
+}
+ul.page-sidebar-menu > li > a:hover
+/*ul.page-sidebar-menu > li:hover > a */{
+  background: #1b8fd3; 
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #ee5c00 !important;
+  border-top-color: transparent !important;
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  color: #ffffff !important;
+  background: #1b8fd3 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #1b8fd3 !important;
+}
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #ffffff !important;
+  background: #1b8fd3 !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  /*color: #c3e4f7;*/
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  /*color: #51b1e9 !important;*/
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #3ba6e6 !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+ /* color: #68bbec !important;*/
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #0f5179 !important;
+  color: #0d638f;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #0d638f !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #0d638f !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #0d638f !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #e8e8e8 !important;
+ /* color: #bfbfbf !important;*/
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #0d638f !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-blue.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+  background-image: url(../../img/sidebar-toggler-grey.jpg);
+  background-color: #0f5179;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #1b8fd3 !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close-blue.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #1b8fd3;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #7c7c7c;
+}
+.footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #0f5179;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #68bbec;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #125e8b !important;
+  }
+  .page-boxed .page-container {
+    background-color: #1570a6;
+    border-left: 1px solid #1c98e1;
+    border-bottom: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #1c98e1;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #125e8b !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #3d95c9 !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #187fbd !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #3d95c9 !important;
+  }
+  ul.page-sidebar-menu > li.open > a{
+  border-bottom: 1px solid #187fbd !important;
+  
+  }
+  ul.page-sidebar-menu > li > a:hover/*,
+  ul.page-sidebar-menu > li:hover > a */{
+    background: #0e4b70;
+  }
+  ul.page-sidebar-menu > li a i{
+  color:#fff !important;
+  }
+  ul.page-sidebar-menu > li a{
+  color:#fff !important;
+  }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css
new file mode 100644
index 00000000..80affa2f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/zteblue_ifrm.css
@@ -0,0 +1,206 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #4da9df;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #479fd3;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #4da9df;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #479fd3;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #2c9ada;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #2c9ada;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #438eb9;
+  }
+  .sectionHeaderclosed {
+  background-color: #3a85b0;
+  }
+
+#dt_example h1{
+color:#438eb9;
+font-weight:600 !important;
+}
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #ffede4;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px  solid #ffede4;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #f8dddd !important;
+ border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #f8dddd !important;
+   border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #ffede4 !important;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px solid #ffede4;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #ffede4; 
+}    
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css
new file mode 100644
index 00000000..7146d910
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight.css
@@ -0,0 +1,450 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Blue theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #f1f3fa !important;
+  font-family:"microsoft yahei";  
+}
+.page-content{
+background-color:#f1f3fa !important;
+}
+.page-sidebar-menu > li.active > a .selected{
+background-image:url("../../img/sidebar-menu-arrow-bluelight.png")
+}
+/***
+Page header
+***/
+.header {
+  filter: none !important;
+  background-image: none !important;
+  background-color: #3366CC !important;
+}
+.header .btn-navbar {
+  background-color: #3366CC!important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  color: #fff;
+  background-color: #3061c1 !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: white !important;
+}
+.zte-theme-panel > .toggler:hover {
+  background-color: #6192f7 !important;
+}
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range{
+  background-color: #3366CC !important;
+}
+.btn-group .btn.blue.dropdown-toggle{
+    background-color: #3366CC !important;
+}
+.btn-group .btn.blue.dropdown-toggle:hover{
+    background-color: #2f5ebd !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #0B4263;
+}
+
+.header .search-form .form-control{
+  color: #68bbec;
+  border: 0; 
+  background-color: #0B4263;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon-blue.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #fff;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #bdcff4;
+  background: #3366CC;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #333 !important ; 
+}
+.header .hor-menu .dropdown-menu li:hover > a{
+  color: #3366CC !important; 
+  background: #e5e8f0 !important; 
+}
+.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a,
+.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a:hover{
+    color:#333  !important; 
+	background: #D9E5FF !important; 
+}
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #3366CC !important; 
+}
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #3366CC;
+  background: #4174dc !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #fff ;
+	border: 1px #769be6 solid !important ; 
+	border-top:0 !important ; 
+	border-bottom-right-radius:5px !important ; 
+    border-bottom-left-radius:5px !important ; 	
+	padding-right:20px;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #4d7ee1 url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#4d7ee1; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+  border-top: 6px solid #3366CC;
+}
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  //border-right: 1px solid #d5d5d5;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+    color: #5681DA;
+	font-weight:600 !important;
+	
+}
+/*.mega-menu-dropdown .fa,
+#page-f-sidebar-menu .sub-menu .fa,
+.sub-menu .sub-menu .fa
+{
+display:none;
+}去掉左边二级菜单图标*/
+#main_hormenu .mega-menu-dropdown{
+margin-left:30px;
+}
+/***
+Page sidebar
+***/
+.page-sidebar {
+  background-color: #f1f3fa;
+}
+ul.page-sidebar-menu > li:last-child > a {
+  border-bottom: 1px solid transparent !important;
+}
+.ul.page-sidebar-menu > li a i {
+ /* color: #0d638f;*/
+}
+ul.page-sidebar-menu > li.open > a{
+border-bottom: 1px solid #e0e2e9  !important;
+}
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #e0e2e9  !important;
+  /*background: #fff  !important;*/
+  color: #2e487d !important;
+}
+ul.page-sidebar-menu > li > a:hover{
+  background: #fff  !important; 
+  color: #3366CC !important;
+}
+ul.page-sidebar-menu > li.active > a {
+  background: #3366CC  !important;
+  border-top-color: transparent !important;
+  color: #ffffff  !important;
+}
+ul.page-sidebar-menu > li.active > a:hover {
+  background: #507edb  !important;
+  border-top-color: transparent !important;
+  color: #ffffff  !important;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #ffffff;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a{
+  color: #2e487d;/*right menu*/
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a {
+  color: #3366CC !important;
+  background: #dde2f1 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a:hover { 
+  background: #e3e7f5 !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+  background: #eee !important;
+  color:#3366CC;
+}
+ul.page-sidebar-menu > li.open > a{
+ color:#fff;
+ }
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+  color: #3366CC !important;
+  background: #fff !important;
+}
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  /*color: #c3e4f7;*/
+}
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+  /*color: #51b1e9 !important;*/
+}
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #3ba6e6 !important;
+}
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #68bbec !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #0f5179 !important;
+  color: #000000;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #000000 !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #000000 !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #000000 !important;
+}
+.page-sidebar .sidebar-search input {
+  background-color: #eeeeee !important;
+ /*color: white !important;*/
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #000000 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-blue.png);
+}
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+ background-image: url(../../img/sidebar-toggler-grey.jpg);
+  background-color: #0f5179;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #3366CC !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+  background-image: url("../../img/sidebar-search-close-blue.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #e4e4e4;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #7c7c7c;
+}
+.footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #0f5179;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #68bbec;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #1985c6;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #68bbec;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #fff !important;
+  }
+  .page-boxed .page-container {
+    background-color: #fff;
+    border-left: 1px solid #1c98e1;
+    border-bottom: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed .page-container {
+    border-left: 0;
+    border-right: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #1c98e1;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #1c98e1;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #125e8b !important;
+  }
+ul.page-sidebar-menu > li .active> a{
+ background: #3366CC !important; 
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+    page sidebar
+    ***/
+  .page-sidebar {
+    background-color: #f1f3fa !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #e0e2e9 !important;
+	
+  }
+    ul.page-sidebar-menu > li > a :hover{
+    border-top: 1px solid #e0e2e9 !important;
+	color: #fff  !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+  .page-sidebar .sidebar-search input {
+    background-color: #4072d6 !important;
+	color:#c5c5c7 !important;
+  }
+  .page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #c5c5c7 !important;
+}
+  .page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #c5c5c7 !important;
+}
+  .page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #c5c5c7 !important;
+}
+  ul.page-sidebar-menu > li.open > a,
+    ul.page-sidebar-menu > li.open > a:hover,
+  ul.page-sidebar-menu > li > a:hover{
+    background: #3366CC !important; 
+   }
+     ul.page-sidebar-menu > li > a:hover,
+	 ul.page-sidebar-menu > li:hover > a {
+    background: #fff !important; 
+   }
+ ul.page-sidebar-menu li > ul.sub-menu > li > a {
+  color: #3366CC;
+}
+
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css
new file mode 100644
index 00000000..57ee2096
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.css
@@ -0,0 +1,520 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+Blue theme
+***/
+/***
+Reset and overrides  
+***/
+body {
+    background-color: #f9f9f9 !important;
+    font-family: "microsoft yahei" !important;
+}
+
+.page-content {
+    background-color: #f1f3fa !important;
+}
+
+/***
+Page header
+***/
+.header {
+    filter: none !important;
+    /*background-image: none !important;*/
+    background-color: #1178ee !important;
+    /*  background: -webkit-linear-gradient(#37c4fa, #0081bb );
+     background: -o-linear-gradient(#37c4fa, #0081bb );
+     background: -moz-linear-gradient(#37c4fa, #0081bb );
+     background: linear-gradient(#37c4fa, #0081bb ); */
+}
+
+.header .btn-navbar {
+    background-color: #f9f9f9 !important;
+}
+
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+    color: #fff;
+    background-color: #1470d8 !important;
+}
+
+.zte-theme-panel > .toggler:hover {
+    background-color: #70abcd !important;
+}
+
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+    color: #fff !important;
+}
+
+.btn-group .btn.blue.dropdown-toggle {
+    background-color: #1178EE !important;
+}
+
+.btn-group .btn.blue.dropdown-toggle:hover {
+    background-color: #0f70df !important;
+}
+
+/***
+Header Search
+***/
+.header .search-form {
+    background-color: #0B4263;
+}
+
+.header .search-form .form-control {
+    color: #68bbec;
+    border: 0;
+    background-color: #0B4263;
+}
+
+.header .search-form .submit {
+    background: url(../../img/search-icon-blue.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+    color: #fff;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+    color: #D4E9F2;
+    background-color: #1178ee;
+    /*background: -webkit-linear-gradient(#37c4fa, #0081bb );
+    background: -o-linear-gradient(#37c4fa, #0081bb );
+    background: -moz-linear-gradient(#37c4fa, #0081bb );
+    background: linear-gradient(#37c4fa, #0081bb );*/
+}
+
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+    border-top: 6px solid #0081bb;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+    color: #fff;
+    /*background: -webkit-linear-gradient(#37c4fa, #0081bb );
+    background: -o-linear-gradient(#37c4fa, #0081bb );
+    background: -moz-linear-gradient(#37c4fa, #0081bb );
+    background: linear-gradient(#37c4fa, #0081bb );*/
+}
+
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+    border-top: 6px solid #0081bb;
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+    color: #fff;
+    background: #e02222 !important;
+}
+
+.header .hor-menu .dropdown-menu {
+    background: #1178EE;
+}
+
+.header .hor-menu .dropdown-menu li > a {
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+    background: #126ed8 url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {
+    background: #126ed8;
+}
+
+.header .hor-menu .search-form form input {
+    color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+    color: #ccc;
+    background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+.dropdown-menu .mega-menu-content .row .mega-menu-submenu li:hover > a {
+    color: #fff !important;
+    background: #388ef1 !important;
+}
+
+.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a,
+.dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a:hover {
+    color: #fff !important;
+    background: #0e6ad4 !important;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {
+    border-right: 1px solid #1876AD;
+}
+
+.mega-menu .mega-menu-submenu li h3 {
+    color: #fff;
+    font-family: "microsoft yahei"
+}
+
+/***
+Page sidebar
+***/
+.page-sidebar {
+    background-color: #f9f9f9;
+}
+
+ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #e5e5e5 !important;
+    color: #616161 !important;
+    border-left: 3px solid transparent !important;
+}
+
+ul.page-sidebar-menu > li > a:hover {
+    color: #1178EE !important;
+    background-color: #eee;
+}
+
+ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 1px solid #e5e5e5 !important;
+}
+
+/*ul.page-sidebar-menu > li a i {
+  color: #e5e5e5 ! important;
+}*/
+ul.page-sidebar-menu ul.sub-menu > li > a {
+    color: #616161 !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li.active > a {
+    color: #1178EE !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+    color: #1178EE !important;
+    background-color: #eee;
+}
+
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+    background: #fff;
+    color: #585858;
+    border-left: 3px solid #1178ee !important;
+}
+
+ul.page-sidebar-menu > li.open > a {
+    background: #fff;
+    color: #585858;
+    border-bottom: 1px solid #e5e5e5 !important;
+}
+
+ul.page-sidebar-menu > li.active > a {
+    background: #fff !important;
+    border-top: 1px solid #e5e5e5 !important;
+    color: #1178ee !important;
+    font-weight: bold;
+}
+
+ul.page-sidebar-menu > li.active > a i {
+    color: #1178ee;
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+    /* border-top: 1px solid #e5e5e5 !important;*/
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu > li.active > a
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+    color: #4b88b7 !important;
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
+    /* background: #1b8fd3 !important;*/
+}
+
+/* 3rd level sub menu */
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
+ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
+    color: #ffffff !important;
+    border-bottom: 1px solid #e5e5e5 !important;
+}
+
+.page-sidebar-menu > li.active > a .selected {
+    /* background-image: url(../../img/sidebar-menu-arrow-blue.png) !important;*/
+    border-right: 2px solid #1178ee !important;
+    height: 37px !important;
+    top: 2px !important;
+}
+
+/* font color for all sub menu links*/
+ul.page-sidebar-menu li > ul.sub-menu > li > a {
+    /*color: #c3e4f7;*/
+}
+
+/* menu arrows */
+ul.page-sidebar-menu > li > a .arrow:before,
+ul.page-sidebar-menu > li > a .arrow.open:before {
+    /*color: #51b1e9 !important;*/
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+    color: #3ba6e6 !important;
+}
+
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+    /* color: #68bbec !important;*/
+}
+
+/*ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #ffffff !important;
+}*/
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+    background-color: #0f5179 !important;
+    color: #1178ee;
+}
+
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+    color: #1178ee !important;
+}
+
+.page-sidebar .sidebar-search input:-moz-placeholder {
+    color: #1178ee !important;
+}
+
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+    color: #1178ee !important;
+}
+
+.page-sidebar .sidebar-search input {
+    background-color: #f9f9f9 !important;
+    /* color: #bfbfbf !important;*/
+}
+
+.page-sidebar .sidebar-search .input-box {
+    border-bottom: 1px solid #1178ee !important;
+}
+
+.page-sidebar .sidebar-search .submit {
+    background-image: url(../../img/search-icon-blue.png);
+}
+
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+    background-image: url(../../img/sidebar-toggler-grey.jpg);
+    background-color: #0f5179;
+}
+
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+    background-color: #f9f9f9 !important;
+}
+
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+    background-image: url("../../img/sidebar-search-close-blue.png");
+}
+
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+    background-color: #f9f9f9;
+}
+
+/***
+Footer 
+***/
+.footer .footer-inner {
+    color: #7c7c7c;
+}
+
+.footer .footer-tools .go-top {
+    background-color: #1985c6;
+}
+
+.footer .footer-tools .go-top:hover {
+    opacity: 0.7;
+    filter: alpha(opacity=70);
+}
+
+.footer .footer-tools .go-top i {
+    color: #68bbec;
+}
+
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+    background-color: #0f5179;
+}
+
+.page-footer-fixed .footer .footer-inner {
+    color: #68bbec;
+}
+
+.page-footer-fixed .footer .footer-tools .go-top {
+    background-color: #1985c6;
+}
+
+.page-footer-fixed .footer .footer-tools .go-top i {
+    color: #68bbec;
+}
+
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+    background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important;
+}
+
+.gritter-bottom {
+    background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important;
+}
+
+.gritter-item {
+    display: block;
+    background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important;
+}
+
+.gritter-close {
+    background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important;
+}
+
+.gritter-title {
+    text-shadow: none !important;
+    /* Not supported by IE :( */
+
+}
+
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+    background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+
+.gritter-item-wrapper a {
+    color: #18a5ed;
+}
+
+.gritter-item-wrapper a:hover {
+    color: #0b6694;
+}
+
+/* begin: boxed page */
+@media (min-width: 992px) {
+    .page-boxed {
+        background-color: #125e8b !important;
+    }
+
+    .page-boxed .page-container {
+        background-color: #1570a6;
+        border-left: 1px solid #1c98e1;
+        border-bottom: 1px solid #1c98e1;
+    }
+
+    .page-boxed.page-sidebar-reversed .page-container {
+        border-left: 0;
+        border-right: 1px solid #1c98e1;
+    }
+
+    .page-boxed.page-sidebar-fixed .page-container {
+        border-left: 0;
+        border-bottom: 0;
+    }
+
+    .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+    }
+
+    .page-boxed.page-sidebar-fixed .page-sidebar {
+        border-left: 1px solid #1c98e1;
+    }
+
+    .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+        border-right: 1px solid #1c98e1;
+        border-left: 0;
+    }
+
+    .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+        background-color: #125e8b !important;
+    }
+}
+
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+    /***
+      page sidebar
+      ***/
+    .page-sidebar {
+        background-color: #f9f9f9 !important;
+    }
+
+    ul.page-sidebar-menu > li > a {
+        border-top: 1px solid #e5e5e5 !important;
+    }
+
+    ul.page-sidebar-menu > li:last-child > a {
+        border-bottom: 0 !important;
+    }
+
+    .page-sidebar .sidebar-search input {
+        background-color: #f9f9f9 !important;
+    }
+
+    ul.page-sidebar-menu > li.open > a,
+    ul.page-sidebar-menu > li > a:hover,
+    ul.page-sidebar-menu > li:hover > a {
+        background: #fff;
+    }
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css
new file mode 100644
index 00000000..baeeb2d9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2_ifrm.css
@@ -0,0 +1,229 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+ztebluelight2_ifrm theme
+***/
+body{
+	background-color: white!important;
+}
+
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #1095cd;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #3a85b0;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #0081bb;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #3a85b0;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #0081bb;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #0081bb;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #0081bb;
+  }
+  .sectionHeaderclosed {
+  background-color: #3a85b0;
+  }
+
+#dt_example h1{
+color:#0081bb;
+font-weight:600 !important;
+}
+/*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #d9e3e8;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px  solid #d9e3e8;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #c4d7e2 !important;
+ border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #c4d7e2 !important;
+   border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #d9e3e8 !important;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px solid #d9e3e8;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #d9e3e8; 
+}  
+/*日志管理的蓝色大圆角筛选按�?/    
+.blue {
+    background-color: #fff;   
+	color:#1095cd;	
+		}
+.blue:hover {
+    background-color: #e8f3fd;
+	color:#5b9bd1;
+    }
+.blue.selected{
+    border:0;
+    background-color: #1178EE;
+    color:#fff;
+}
+.blue.selected:hover{
+    border:0;
+    background-color: #1178EE;
+    color:#fff;
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css
new file mode 100644
index 00000000..1e250004
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css
@@ -0,0 +1,497 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light theme
+***/
+
+/***
+Reset and overrides  
+***/
+body {
+  background-color: #eeeeee !important;
+}
+/***
+Page header
+***/
+.header {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3993ba), color-stop(50%, #1f88b3), color-stop(100%, #067ead));   
+  background-image: -moz-linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%);  
+  background-image: -o-linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%);
+  background-image: linear-gradient(top, #3993ba 0%, #1f88b3 50%, #067ead 100%);
+  background-color: #1584b0 ;
+}
+.header .btn-navbar {
+  background-color: #434343 !important;
+}
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+  background-color: #4399bd !important;
+}
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+  color: #ffffff !important;
+}
+.zte-theme-panel > .toggler:hover {
+  background-color: #54aacf !important;
+}
+.btn-group .btn.blue.dropdown-toggle{
+background-color: #428bca !important;
+}
+.page-content .page-breadcrumb.breadcrumb{
+background-color:#F5F5F5 !important;
+}
+/***
+Header Search
+***/
+.header .search-form {
+  background-color: #3a3a3a;
+}
+
+.header .search-form .form-control{
+  color: #ccc;
+  border: 0; 
+  background-color: #3a3a3a;  
+}
+
+.header .search-form .submit {  
+  background: url(../../img/search-icon.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+  color: #ccc;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+  color: #fff;
+  background: #4399bd;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+  color: #fff;
+  background: #136c8f !important; 
+}
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+  border-top: 6px solid #136c8f;
+  }
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+  color: #fff;
+  background: #e02222 !important; 
+}
+
+.header .hor-menu .dropdown-menu {  
+    background: #4399bd;
+}
+.header .hor-menu .dropdown-menu li > a {    
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+   background: #4399bd url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {  
+  background:#4399bd; 
+}
+
+.header .hor-menu .search-form form input {
+  color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+  color: #ccc;
+  background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+.header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {  
+  border-right: 1px solid #656565;
+}
+
+.mega-menu .mega-menu-submenu li h3 {  
+  color: #fff;
+}
+
+/***
+Page sidebar
+***/
+/*.page-content {
+  border-left: 1px solid #e2e2e2 !important;
+  border-bottom: 1px solid #e2e2e2 !important;*/
+}
+.page-sidebar-reversed .page-content {
+  border-left: 0;
+  border-right: 1px solid #e2e2e2 !important;
+}
+.page-sidebar {
+  background-color: #eeeeee;
+}
+.page-sidebar-fixed .page-content {
+  border: 0 !important;
+}
+.page-sidebar-fixed .page-sidebar {
+  border-right: 1px solid #e2e2e2 !important;
+}
+
+
+ul.page-sidebar-menu > li > a {
+  border-top: 1px solid #ececec !important;
+  border-bottom: 1px solid #cccccc !important;
+  color: #000 !important;
+  font-weight: 400;
+  background-color: #e0e0e0 !important;
+}
+
+ul.page-sidebar-menu > li:first-child > a {
+   border-top: 1px solid transparent !important;
+}
+
+ul.page-sidebar-menu > li:last-child > a {
+   border-bottom: 1px solid transparent !important;
+}
+
+ul.page-sidebar-menu > li a i {
+  color: #000000 !important;
+}
+ul.page-sidebar-menu > li.open > a,
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li:hover > a {
+  background: #eee;
+  border-top: 1px solid #e8e8e8;
+}
+/*ul.page-sidebar-menu > li.active > a .selected {
+  right:-7px;
+  top:0px;
+  width: 7px;
+  height: 39px;
+  background-image: url("../../img/sidebar-menu-arrow-green.png");
+}  */
+.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected {
+  right: auto;
+  left:-7px;
+  background-image: url("../../img/sidebar-menu-arrow-green-reverse.png");
+} 
+ul.page-sidebar-menu > li.active i {
+  color: #fff !important;
+}
+.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected {
+  display: none;
+}
+ul.page-sidebar-menu > li.active > a{
+ background: #428bca !important;
+  border-top-color: transparent !important;
+  color:#fff!important;
+}
+ul.page-sidebar-menu > li.active > a i {
+  color: #fff;
+}
+ul.page-sidebar-menu > li > a > .arrow:before,
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+  color: #ccc !important;
+}
+ul.page-sidebar-menu > li.active > a .arrow:before, 
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+  color: #fff !important;
+}
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+  border-top: 0px !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li > a {
+  font-weight: 400 !important;
+  color: #333 !important;
+}
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+  color: #818181 !important;
+  background: #efefef !important; 
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+  color: #ccc !important;
+}
+
+/* sub menu links effects */
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li.active > a:hover{
+  color: #000 !important; 
+  background: #dbe6ea !important; 
+}
+ul.page-sidebar-menu ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu ul.sub-menu > li.open > a {
+  color: #000000 !important;
+  background: #e7e7e7 !important; 
+}
+ul.page-sidebar-menu ul.sub-menu > li > a i {
+  color: #000000 !important;
+}
+
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+  background-color: #eeeeee  !important;  
+  color: #727272 !important;
+}
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search input:-moz-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+  color: #aaa !important;
+}
+.page-sidebar .sidebar-search .input-box {
+  border-bottom: 1px solid #e2e2e2 !important;
+}
+.page-sidebar .sidebar-search .submit {
+  background-image: url(../../img/search-icon-white.png);
+}
+
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {  
+  background-image: url(../../img/sidebar-toggler-light.jpg);
+  background-color: #333;
+}
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+  background-color: #fbfbfb !important;
+}
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {  
+  background-image: url("../../img/sidebar-search-close-light.png");
+}
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+  background-color: #eeeeee;
+}
+/***
+Footer 
+***/
+.footer .footer-inner {
+  color: #333333;
+}
+.footer .footer-tools .go-top {
+  background-color: #666666;
+}
+.footer .footer-tools .go-top:hover {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.footer .footer-tools .go-top i {
+  color: #999999;
+}
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+  background-color: #434343;
+}
+.page-footer-fixed .footer .footer-inner {
+  color: #aaaaaa;
+}
+.page-footer-fixed .footer .footer-tools .go-top {
+  background-color: #666666;
+}
+.page-footer-fixed .footer .footer-tools .go-top i {
+  color: #aaaaaa;
+}
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;
+}
+.gritter-bottom {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;
+}
+.gritter-item {
+  display: block;
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;
+}
+.gritter-close {
+  background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;
+}
+.gritter-title {
+  text-shadow: none !important;
+  /* Not supported by IE :( */
+
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+  background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+.gritter-item-wrapper a {
+  color: #18a5ed;
+}
+.gritter-item-wrapper a:hover {
+  color: #0b6694;
+}
+/* begin: boxed page */
+@media (min-width: 992px) {
+  .page-boxed {
+    background-color: #E8E8E8 !important;
+  }
+  .page-boxed .page-container {
+    background-color: #eeeeee;
+    border-left: 1px solid #e2e2e2;
+    border-bottom: 1px solid #e2e2e2;
+  }
+  .page-sidebar-reversed.page-boxed .page-container {
+    border-left: 0;
+    border-right: 1px solid #e2e2e2;
+  }
+  .page-boxed.page-sidebar-fixed .page-container {
+    border-left: 0;
+    border-bottom: 0;
+  }
+  .page-boxed.page-sidebar-fixed .page-sidebar {
+    border-left: 1px solid #e2e2e2;
+  }
+  .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #e2e2e2;
+    border-left: 0; 
+  }
+  .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+    background-color: #E8E8E8 !important;
+  }
+}
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+  /***
+  page sidebar
+  ***/
+  .page-sidebar {
+    background-color: #f1f1f1 !important;
+    border-right: none !important;
+  }
+  .page-sidebar-fixed .page-sidebar {
+    border-right: none !important; 
+  }
+  .page-content {
+    border-left: none !important;
+  }
+  ul.page-sidebar-menu > li > a {
+    border-top: 1px solid #ececec !important;
+    border-bottom: 1px solid #cccccc !important;
+  }
+  ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 0 !important;
+  }
+
+  ul.page-sidebar-menu > li.open > a,{
+    color: #666666 !important;
+    background-color: #e0e0e0 !important;
+  }
+  
+  /*ul.page-sidebar-menu > li > a:hover {
+    color: #666666 !important;
+    background-color: #e7e7e7 !important;
+  }*/
+  ul.page-sidebar-menu > li.open > a {
+    border-bottom-color: transparent !important;
+  }
+ /* ul.page-sidebar-menu > li.active > a {
+    color: #ffffff !important;
+    background-color: #28b779 !important;
+  }*/
+
+  ul.page-sidebar-menu ul.sub-menu > li > a {
+    color: #111 !important;
+  }
+ul.page-sidebar-menu ul.sub-menu > li.active > a{
+    color: #000 !important;
+    background: #dbe6ea !important; 
+}
+  ul.page-sidebar-menu ul.sub-menu > li.open > a,  
+  ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+    color: #000 !important;
+    background: #e7e7e7 !important; 
+  }
+
+  .page-sidebar .sidebar-search input {
+    background-color: #f1f1f1 !important;
+    color: #ccc !important;
+  }
+
+  .page-sidebar .sidebar-search .input-box {
+    border-bottom-color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input::-webkit-input-placeholder {
+    color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input:-moz-placeholder {
+    color: #ccc !important;
+  }
+  .page-sidebar .sidebar-search input:-ms-input-placeholder {
+    color: #ccc !important;
+  }
+
+  /***
+  page footer
+  ***/
+  
+  .footer {
+    background-color: #434343;
+  }
+
+  .footer .footer-inner {
+    color: #cccccc;
+  }
+  .footer .footer-tools .go-top {
+    background-color: #666666;
+  }
+  .footer .footer-tools .go-top i {
+    color: #999999;
+  }
+}
+
+@media (max-width: 767px) {
+  body {
+    background-color: #077ead !important;
+  }
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css
new file mode 100644
index 00000000..1072ce0b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3_ifrm.css
@@ -0,0 +1,220 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light_ifrm  theme
+***/
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #47a5cc;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #3a8fb3;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #47a5cc;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #3a8fb3;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #2b8db6;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #2b8db6;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #2b8db6;
+  }
+  .sectionHeaderclosed {
+  background-color: #3899c2;
+  }
+
+#dt_example h1{
+color:#2b8db6;
+font-weight:600 !important;
+}
+/*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #c4d7e2;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #d9e3e8;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px  solid #d9e3e8;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #c4d7e2;
+  border-bottom: 1px solid #c4d7e2;
+  border-top: 1px  solid #c4d7e2;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #c4d7e2 !important;
+ border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #c4d7e2 !important;
+   border-bottom: 1px solid #c4d7e2;
+  border-top: 1px solid #c4d7e2;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #d9e3e8 !important;
+  border-bottom: 1px solid #d9e3e8;
+  border-top: 1px solid #d9e3e8;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #d9e3e8; 
+}      
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css
new file mode 100644
index 00000000..646fdc43
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4.css
@@ -0,0 +1,620 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+light theme
+***/
+
+/***
+Reset and overrides  
+***/
+body {
+    background-color: #f1f3fa !important;
+}
+
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range {
+    background-color: #ededed !important;
+}
+
+.page-content {
+    background-color: #f1f3fa !important;
+}
+
+.vSplitbar {
+    background-color: transparent !important;
+}
+
+.btn-group .btn.blue.dropdown-toggle {
+    background-color: #333 !important;
+}
+
+.btn-group .btn.blue.dropdown-toggle:hover {
+    background-color: #000 !important;
+}
+
+/***
+Page header
+***/
+.header {
+    filter: none !important;
+    background-color: #333333 !important;
+}
+
+.header .btn-navbar {
+    background-color: #434343 !important;
+}
+
+.header .navbar-nav .dropdown-toggle:hover,
+.header .navbar-nav .dropdown.open .dropdown-toggle {
+    background-color: #40484c !important;
+}
+
+.header .navbar-nav li.dropdown .dropdown-toggle i {
+    color: #ffffff !important;
+}
+
+.zte-theme-panel > .toggler:hover {
+    background-color: #40484c !important;
+}
+
+/***
+Header Search
+***/
+.header .search-form {
+    background-color: #3a3a3a;
+}
+
+.header .search-form .form-control {
+    color: #ccc;
+    border: 0;
+    background-color: #3a3a3a;
+}
+
+.header .search-form .submit {
+    background: url(../../img/search-icon.png);
+}
+
+/***
+Hor menu
+***/
+.header .hor-menu ul.nav li a {
+    color: #fff;
+}
+
+.header .hor-menu ul.nav li.open > a,
+.header .hor-menu ul.nav li > a:hover,
+.header .hor-menu ul.nav li > a:focus {
+    color: #ccc;
+    background: #333333;
+}
+
+.header .hor-menu .dropdown-menu li:hover > a,
+.header .hor-menu ul.nav li.active > a,
+.header .hor-menu ul.nav li.active > a:hover {
+    color: #fff;
+    background: #333 !important;
+}
+
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+    border-top: 6px solid #101010;
+}
+
+.header .hor-menu ul.nav li.current > a,
+.header .hor-menu ul.nav li.current > a:hover {
+    color: #fff;
+    background: #e02222 !important;
+}
+
+.header .hor-menu .dropdown-menu {
+    background: #4f4f4f;
+}
+
+.header .hor-menu .dropdown-menu li > a {
+    color: #ccc;
+}
+
+.header .hor-menu .hor-menu-search-form-toggler.off {
+    background: #4f4f4f url(../../img/hor-menu-search-close-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form {
+    background: #4f4f4f;
+}
+
+.header .hor-menu .search-form form input {
+    color: #ccc;
+}
+
+.header .hor-menu .search-form .btn {
+    color: #ccc;
+    background: url(../../img/search-icon-white.png) no-repeat center;
+}
+
+.header .hor-menu .search-form form input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #ccc;
+}
+
+.header .hor-menu .search-form form input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #ccc;
+}
+
+/***
+Mega Menu
+***/
+.mega-menu .mega-menu-submenu {
+    border-right: 1px solid #656565;
+}
+
+.mega-menu .mega-menu-submenu li h3 {
+    color: #fff;
+}
+
+/***
+Page sidebar
+***/
+/*.page-content {
+  border-left: 1px solid #e2e2e2 !important;
+  border-bottom: 1px solid #e2e2e2 !important;
+}*/
+.page-sidebar-menu > li.active > a .selected {
+    background-image: none !important;
+	border-right:#5C9ACF 3px solid;
+	height:40px !important;
+	top:0 !important;
+}
+
+.page-sidebar-reversed .page-content {
+    border-left: 0;
+    border-right: 1px solid #e2e2e2 !important;
+}
+
+.page-sidebar {
+    background-color: #f1f3fa;
+}
+
+.page-sidebar-fixed .page-content {
+    border: 0 !important;
+}
+
+.page-sidebar-fixed .page-sidebar {
+    border-right: 1px solid #e2e2e2 !important;
+}
+
+ul.page-sidebar-menu > li > a {
+    border: 1px solid #dddddd !important;
+    color: #000 !important;
+    font-weight: 400;
+    background-color: #fff !important;
+    margin-left: 3px;
+    margin-right: 3px;
+    margin-bottom: 5px;
+    -webkit-border-radius: 3px !important;
+    -moz-border-radius: 3px !important;
+    -ms-border-radius: 3px !important;
+    -o-border-radius: 3px !important;
+    border-radius: 3px !important;
+}
+
+.page-sidebar-menu > li.start > a {
+    border-top: 1px solid #dddddd !important;
+}
+
+ul.page-sidebar-menu > li:first-child > a {
+    border-top: 1px solid #dddddd !important;
+}
+
+ul.page-sidebar-menu > li:last-child > a {
+    border-bottom: 1px solid #dddddd !important;
+}
+
+/*ul.page-sidebar-menu > li a i {
+  color: #000 !important;
+}*/
+
+/*ul.page-sidebar-menu > li.open > a:hover {
+    background: #ededed !important;
+    color: #000 !important;
+}*/
+ul.page-sidebar-menu > li.open > a {
+    background: #fff !important;
+    color: #000 !important;
+}
+ul.page-sidebar-menu > li.active > a:hover {
+    background: #fff !important;
+   color: #5C9ACF !important ;
+	//border-left: #5C9ACF 3px solid;
+}
+
+
+/*ul.page-sidebar-menu > li.active > a .selected {
+  right:-7px;
+  top:0px;
+  width: 7px;
+  height: 39px;
+  background-image: url("../../img/sidebar-menu-arrow-green.png");*/
+    }
+
+.page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected {
+    right: auto;
+    left: -7px;
+    background-image: url("../../img/sidebar-menu-arrow-green-reverse.png");
+}
+
+/*ul.page-sidebar-menu > li.active i {
+  color: #fff !important;
+}*/
+.page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected {
+    display: none;
+}
+
+ul.page-sidebar-menu > li.active > a {
+    background: #fff !important;
+  border-right-color: transparent !important;
+    color: #1177CF !important;
+}
+
+ul.page-sidebar-menu > li.active > a i {
+    color: #5C9ACF;
+}
+
+ul.page-sidebar-menu > li > a > .arrow:before,
+ul.page-sidebar-menu > li > a > .arrow.open:before {
+    color: #ccc !important;
+}
+
+ul.page-sidebar-menu > li.active > a .arrow:before,
+ul.page-sidebar-menu > li.active > a .arrow.open:before {
+    color: #5C9ACF !important;
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
+    border-top: 0px !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li > a {
+    font-weight: 400 !important;
+    color: #2a6496 !important;
+    margin-left: 4px !important;
+    margin-right: 4px !important;
+    margin-bottom: 5px !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+    color: #818181 !important;
+    background: #ededed !important;
+}
+
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
+ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
+    color: #ccc !important;
+}
+
+/* sub menu links effects */
+ul.page-sidebar-menu ul.sub-menu > li.active > a,
+ul.page-sidebar-menu ul.sub-menu > li.active > a:hover {
+    color: #1177CF !important;
+    background: #dbe6ea !important;
+}
+
+ul.page-sidebar-menu ul.sub-menu > li > a:hover,
+ul.page-sidebar-menu ul.sub-menu > li.open > a {
+    color: #428bca !important;
+    background: #eaf1f4 !important;
+}
+
+ul.page-sidebar-menu > li > a:hover,
+ul.page-sidebar-menu > li.active > a:hover {
+  background-color: #ecf1f5 !important;
+  color: #585858;
+}
+/* sidebar search */
+.page-sidebar .sidebar-search input {
+    background-color: #f5f5f5 !important;
+    color: #727272 !important;
+}
+
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+    color: #aaa !important;
+}
+
+.page-sidebar .sidebar-search input:-moz-placeholder {
+    color: #aaa !important;
+}
+
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+    color: #aaa !important;
+}
+
+.page-sidebar .sidebar-search .input-box {
+    border-bottom: 1px solid #e2e2e2 !important;
+}
+
+.page-sidebar .sidebar-search .submit {
+    background-image: url(../../img/search-icon-white.png);
+}
+
+/***
+Sidebar toggler
+***/
+.sidebar-toggler {
+    background-image: url(../../img/sidebar-toggler-light.jpg);
+    background-color: #333;
+}
+
+/* search box bg color on expanded */
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+    background-color: #fbfbfb !important;
+}
+
+.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+    background-image: url("../../img/sidebar-search-close-light.png");
+}
+
+/* sub menu bg color on hover menu item */
+.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
+    background-color: #f5f5f5;
+}
+
+/***
+Footer 
+***/
+.footer .footer-inner {
+    color: #333333;
+}
+
+.footer .footer-tools .go-top {
+    background-color: #666666;
+}
+
+.footer .footer-tools .go-top:hover {
+    opacity: 0.7;
+    filter: alpha(opacity=70);
+}
+
+.footer .footer-tools .go-top i {
+    color: #999999;
+}
+
+/***
+Footer Layouts (new in v1.3)
+***/
+/* begin:fixed footer */
+.page-footer-fixed .footer {
+    background-color: #434343;
+}
+
+.page-footer-fixed .footer .footer-inner {
+    color: #aaaaaa;
+}
+
+.page-footer-fixed .footer .footer-tools .go-top {
+    background-color: #666666;
+}
+
+.page-footer-fixed .footer .footer-tools .go-top i {
+    color: #aaaaaa;
+}
+
+/* end:fixed footer */
+/***
+Gritter Notifications 
+***/
+.gritter-top {
+    background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;
+}
+
+.gritter-bottom {
+    background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;
+}
+
+.gritter-item {
+    display: block;
+    background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;
+}
+
+.gritter-close {
+    background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;
+}
+
+.gritter-title {
+    text-shadow: none !important;
+    /* Not supported by IE :( */
+
+}
+
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+    background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;
+}
+
+.gritter-item-wrapper a {
+    color: #18a5ed;
+}
+
+.gritter-item-wrapper a:hover {
+    color: #0b6694;
+}
+
+/* begin: boxed page */
+@media (min-width: 992px) {
+    .page-boxed {
+        background-color: #E8E8E8 !important;
+    }
+
+    .page-boxed .page-container {
+        background-color: #f5f5f5;
+        border-left: 1px solid #e2e2e2;
+        border-bottom: 1px solid #e2e2e2;
+    }
+
+    .page-sidebar-reversed.page-boxed .page-container {
+        border-left: 0;
+        border-right: 1px solid #e2e2e2;
+    }
+
+    .page-boxed.page-sidebar-fixed .page-container {
+        border-left: 0;
+        border-bottom: 0;
+    }
+
+    .page-boxed.page-sidebar-fixed .page-sidebar {
+        border-left: 1px solid #e2e2e2;
+    }
+
+    .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+        border-right: 1px solid #e2e2e2;
+        border-left: 0;
+    }
+
+    .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {
+        background-color: #E8E8E8 !important;
+    }
+
+    .page-sidebar-closed .page-sidebar-menu > li > a {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+/* end: boxed page */
+/***
+Landscape phone to portrait tablet
+***/
+@media (max-width: 991px) {
+    /***
+    page sidebar
+    ***/
+    .page-sidebar-closed .page-sidebar-menu > li > a {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .page-sidebar {
+        background-color: #f1f1f1 !important;
+        border-right: none !important;
+    }
+
+    .page-sidebar-fixed .page-sidebar {
+        border-right: none !important;
+    }
+
+    .page-content {
+        border-left: none !important;
+    }
+
+    ul.page-sidebar-menu > li > a {
+        border-top: 1px solid #ececec !important;
+        border-bottom: 1px solid #cccccc !important;
+    }
+
+    /* ul.page-sidebar-menu > li:last-child > a {
+       border-bottom: 0 !important;
+     }*/
+    ul.page-sidebar-menu > li.open > a, {
+        color: #666666 !important;
+        background-color: #e0e0e0 !important;
+    }
+
+    /*ul.page-sidebar-menu > li > a:hover {
+      color: #666666 !important;
+      background-color: #e7e7e7 !important;
+    }*/
+    ul.page-sidebar-menu > li.open > a {
+        border-bottom-color: transparent !important;
+    }
+
+    /* ul.page-sidebar-menu > li.active > a {
+       color: #ffffff !important;
+       background-color: #28b779 !important;
+     }*/
+    /*ul.page-sidebar-menu ul.sub-menu > li > a {
+      color: #111 !important;
+    }*/
+    /*ul.page-sidebar-menu ul.sub-menu > li.active > a{
+        color: #000 !important;
+        background: #dbe6ea !important; */
+}
+
+/* ul.page-sidebar-menu ul.sub-menu > li.open > a,
+   ul.page-sidebar-menu ul.sub-menu > li > a:hover {
+   color: #000 !important;
+   background: #e7e7e7 !important;
+ }*/
+
+.page-sidebar .sidebar-search input {
+    background-color: #f1f1f1 !important;
+    color: #ccc !important;
+}
+
+.page-sidebar .sidebar-search .input-box {
+    border-bottom-color: #ccc !important;
+}
+
+.page-sidebar .sidebar-search input::-webkit-input-placeholder {
+    color: #ccc !important;
+}
+
+.page-sidebar .sidebar-search input:-moz-placeholder {
+    color: #ccc !important;
+}
+
+.page-sidebar .sidebar-search input:-ms-input-placeholder {
+    color: #ccc !important;
+}
+
+/***
+page footer
+***/
+
+.footer {
+    background-color: #434343;
+}
+
+.footer .footer-inner {
+    color: #cccccc;
+}
+
+.footer .footer-tools .go-top {
+    background-color: #666666;
+}
+
+.footer .footer-tools .go-top i {
+    color: #999999;
+}
+
+    }
+
+@media (max-width: 767px) {
+    body {
+        background-color: #333333 !important;
+    }
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css
new file mode 100644
index 00000000..a4b26729
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight4_ifrm.css
@@ -0,0 +1,209 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+ztebluelight4_ifrm theme
+***/
+body{
+	background-color: white!important;
+}
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #47a080;
+  color: #fff;
+  border: 0px solid #b15a59;
+  border-radius: 0px;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown {
+  background-color: #3f9375;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #47a080;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #3f9375;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+  .buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+   /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #47a080;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #47a080;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #47a080;
+  }
+  .sectionHeaderclosed {
+  background-color: #4ca887;
+  }
+
+#dt_example h1{
+color:#47a080;
+font-weight:600 !important;
+}
+  /*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #d7eae3;
+  border-bottom: 1px solid #d7eae3;
+  border-top: 1px  solid #d7eae3;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #c7e5da;
+  border-bottom: 1px solid #c7e5da;
+  border-top: 1px  solid #c7e5da;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #c7e5da;
+  border-bottom: 1px solid #c7e5da;
+  border-top: 1px  solid #c7e5da;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #a2cfbf;
+  }
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #c7e5da !important;
+ border-bottom: 1px solid #c7e5da;
+  border-top: 1px solid #c7e5da;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #c7e5da !important;
+   border-bottom: 1px solid #c7e5da;
+  border-top: 1px solid #c7e5da;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #d7eae3 !important;
+  border-bottom: 1px solid #d7eae3;
+  border-top: 1px solid #d7eae3;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #d7eae3; 
+}      
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css
new file mode 100644
index 00000000..d3d4f208
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight_ifrm.css
@@ -0,0 +1,228 @@
+/**
+ * Copyright 2016, CMCC 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.
+ */
+/***
+ztebluelight_ifrm  theme
+***/
+body{
+	background-color: white!important;
+}
+td>a>span[class^="ict-"], td>a>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span[class^="ict-"], td>div>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>div>span>span[class^="ict-"], td>div>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+td>span>span[class^="ict-"], td>span>span[class*=" ict-"]{
+color:#7083ba;
+font-size: 16px;
+}
+
+/* button style*/
+.buttonRounded,
+.buttonRoundedOver,
+.buttonRoundedFocused,
+.buttonRoundedFocusedOver,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown,
+.buttonRoundedSelected,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedDown,
+.buttonRoundedSelectedFocusedDown,
+.buttonRoundedSelectedOver,
+.buttonRoundedSelectedFocusedOver,
+.buttonRoundedDisabled,
+.buttonRoundedSelectedDisabled {
+  background-color: #3366cc ;
+  color: #fff;
+  border: 0px solid #b15a59;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  /*padding: 0 3px;*/
+  padding-left:7px !important;
+  padding-right:7px !important;
+  height:30px !important;
+}
+.buttonRoundedDisabled, .buttonRoundedSelectedDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+.buttonRoundedOver,
+.buttonRoundedFocusedOver,
+.buttonRoundedSelectedFocused,
+.buttonRoundedSelectedFocusedOver ,
+.buttonRoundedDown,
+.buttonRoundedFocusedDown{
+  background-color: #6997f5;
+  height:30px !important;
+}
+
+.menuButton,
+.menuButtonOver,
+.menuButtonDown,
+.menuButtonDisabled,
+.menuButtonFocused,
+.menuButtonFocusedDown,
+.menuButtonFocusedOver,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonSelectedDisabled {
+  background-color: #3366cc;
+  border: 0px solid #ababab;
+  color: #fff;
+  font-family: Arial, Verdana, sans-serif;
+  font-size: 12px;
+  padding-left: 7px !important;
+  padding-right: 7px !important;
+  height:30px !important;
+}
+.menuButtonOver {
+  background-color: #6997f5;
+ }
+.menuButtonDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ .buttonTitle,
+.buttonTitleOver,
+.buttonTitleDown,
+.buttonTitleSelected,
+.buttonTitleFocused,
+.buttonTitleSelectedFocused,
+.buttonTitleSelectedOver,
+.buttonTitleFocusedOver,
+.buttonTitleSelectedFocusedOver,
+.buttonTitleSelectedDown,
+.buttonTitleFocusedDown,
+.buttonTitleSelectedFocusedDown,
+.buttonTitleDisabled,
+.buttonTitleSelectedDisabled {
+  color: #fff ;
+  }
+.buttonTitleDisabled{
+  background-color: #f0f0f0;
+  color: #dadada;
+  opacity: 1;
+}
+ /* windowBody dialogBody Style */
+ .windowBody,
+.dialogBody {
+  background-color: white;
+  border: 1px solid #b4cef8;
+  border-top: 0;
+}
+.windowHeader,
+.dialogHeader {
+  background-color: #3366cc;
+  padding: 0;
+}
+/* sectionHeader Style */
+.sectionHeaderopened {
+  background-color: #3366cc;
+  }
+  .sectionHeaderclosed {
+  background-color: #619bfa;
+  }
+
+#dt_example h1{
+color:#3366cc;
+font-weight:600 !important;
+}
+/*cell style*/
+.tallCellOver,
+.tallCellOverDark {
+  background-color: #ffede4;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px  solid #ffede4;
+  }
+.tallCellSelected,
+.tallCellSelectedDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.tallCellSelectedOver,
+.tallCellSelectedOverDark {
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px  solid #f8dddd;
+  }
+.imgHeaderButtonOver,
+.imgHeaderButtonDown,
+.headerButtonOver,
+.headerButtonDown,
+.sorterButtonOver,
+.sorterButtonDown {
+  background-color: #c4d7e2;
+}
+.cellSelected,
+.cellSelectedDark,
+.specialColSelected,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedDark {
+  background: #f8dddd !important;
+ border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+  }
+.cellSelectedOver,
+.cellSelectedOverDark,
+.specialColSelectedOver,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverDark {
+  background: #f8dddd !important;
+   border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+.cellOver,
+.cellOverDark,
+.specialColOver,
+.recordSummaryCellOver,
+.recordSummaryCellOverDark {
+  background: #ffede4 !important;
+  border-bottom: 1px solid #ffede4;
+  border-top: 1px solid #ffede4;
+  }
+.treeCellOver,
+.treeCellOverDark {
+  background-color: #ffede4; 
+}
+/*日志管理的蓝色大圆角筛选按�?/    
+.blue {
+    background-color: #fff;   
+	color:#1991c5;	
+}
+.blue:hover {
+    background-color: #e8f3fd;
+	color:#3366cc;
+}
+.blue.selected{
+    border:0;
+    background-color: #3366cc;
+    color:#fff;
+}
+.blue.selected:hover{
+    border:0;
+    background-color: #3366cc;
+    color:#fff;
+}
\ No newline at end of file