Merge "add portal-common files"

165 files changed, 32854 insertions, 0 deletions

diff --git a/openo-portal/portal-common/src/main/webapp/common/about.html b/openo-portal/portal-common/src/main/webapp/common/about.html
new file mode 100644
index 00000000..4cf0c678
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/about.html
@@ -0,0 +1,52 @@
+<!--
+    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.
+-->
+<div class="about aboutmain">
+    <div>
+        <a href="#" onclick="link_click('info')">
+            <span id="com_zte_ums_ict_framework_about_detail" name_i18n="com_zte_ums_ict_framework_ui_i18n"></span>
+            <i class = "fa fa-angle-right"></i>
+        </a>
+        <a href="#"  class="about_close" onclick="ict_about_dlg_close()">
+            &times
+        </a>
+    </div>
+    <div class="info">
+        <img src="img/integration/zte_logo_ white.png" alt=""/>
+        <div class="ict_main_productname">
+            <span id="com_zte_ums_ict_framework_ui_main_title" name_i18n="com_zte_ums_ict_framework_ui_i18n"></span>
+        </div>
+        <div class="ict_main_version">
+            <span id="com_zte_ums_ict_framework_about_version" name_i18n="com_zte_ums_ict_framework_ui_i18n"></span>
+        </div>
+        <div class="copyright">
+            <span id="com_zte_ums_ict_portal_login_companyName" name_i18n="com_zte_ums_ict_framework_ui_i18n"></span>.
+        </div>
+    </div>
+</div>
+<div class="about aboutinfo" style="display:none">
+    <div>
+        <a href="#" onclick="link_click('about')">
+            <span id="com_zte_ums_ict_framework_moudle_about" name_i18n="com_zte_ums_ict_framework_ui_i18n"></span>
+            <i class = "fa fa-angle-right"></i>
+        </a>
+        <a href="#"  class="about_close" onclick="ict_about_dlg_close()">
+            &times
+        </a>
+    </div>
+    <div class="row-fluid" data-name="table_zone">
+        <div class="col-xs-12" id = 'ict_about_table_div' style=""></div>
+    </div>
+</div>
diff --git a/openo-portal/portal-common/src/main/webapp/common/changepwd.html b/openo-portal/portal-common/src/main/webapp/common/changepwd.html
new file mode 100644
index 00000000..dacfbf5e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/changepwd.html
@@ -0,0 +1,90 @@
+<!--
+    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.
+-->
+<div class="content">
+	<form class="login-form" id="fm1" action="javascript:;" method="post">
+		<div class="modal-header">
+			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+			</button>
+			<h4 class="modal-title" id="com_zte_ums_ict_sm_user_modify_current_password"
+			name_i18n="com_zte_ums_ict_framework_ui_i18n">
+				当前用户密码设置
+			</h4>
+		</div>
+		<!--div class="modal-body"-->
+		<div class="alert display-hide" id="nameOrpwdError">
+			<button class="close" data-close="alert">
+			</button>
+			<span id="com_zte_ums_ict_portal_login_nameOrpwdError" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+				原始密码错误
+			</span>
+		</div>
+		<div class="form-group">
+			<label class="control-label visible-ie8 visible-ie9" id="com_zte_ums_ict_sm_user_old_password"
+			name_i18n="com_zte_ums_ict_framework_ui_i18n">
+				旧密码
+			</label>
+			<div class="input-icon">
+				<i class="fa fa-lock">
+				</i>
+				<input type="password" class="form-control placeholder-no-fix" id="oldpassword"
+				autocomplete="off" placeholder="旧密码" name="oldpassword" />
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="control-label visible-ie8 visible-ie9" id="com_zte_ums_ict_sm_user_password"
+			name_i18n="com_zte_ums_ict_framework_ui_i18n">
+				新密码
+			</label>
+			<div class="input-icon">
+				<i class="fa fa-lock">
+				</i>
+				<input type="password" class="form-control placeholder-no-fix" id="password"
+				autocomplete="off" placeholder="新密码" name="password" />
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="control-label visible-ie8 visible-ie9" id="com_zte_ums_ict_sm_user_confirmpassword"
+			name_i18n="com_zte_ums_ict_framework_ui_i18n">
+				确认新密码
+			</label>
+			<div class="controls">
+				<div class="input-icon">
+					<i class="fa fa-check">
+					</i>
+					<input type="password" class="form-control placeholder-no-fix" id="rpassword"
+					autocomplete="off" placeholder="确认新密码" name="rpassword" />
+				</div>
+			</div>
+		</div>
+		<!--/div-->
+		<div class="form-actions">
+			<div class="modal-footer">
+				<button data-dismiss="modal" aria-hidden="true" id="cancelBtn" class="btn default ">
+					<span id="com_zte_ums_ict_sm_user_cancel_button" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+						取消
+					</span>
+				</button>
+				<button type="submit" id="submitBtn" class="btn blue">
+					<span id="com_zte_ums_ict_sm_user_ok" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+						确定
+					</span>
+					<i class="m-icon-swapright m-icon-white">
+					</i>
+				</button>
+			</div>
+		</div>
+	</form>
+</div>
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/animate.css b/openo-portal/portal-common/src/main/webapp/common/css/animate.css
new file mode 100644
index 00000000..a413752c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/animate.css
@@ -0,0 +1,3278 @@
+/**
+ * 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.
+ */
+@charset "UTF-8";
+/*
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
+	-webkit-backface-visibility: hidden;
+}
+.animated {
+	-webkit-animation-duration: 1s;
+	   -moz-animation-duration: 1s;
+	     -o-animation-duration: 1s;
+	        animation-duration: 1s;
+	-webkit-animation-fill-mode: both;
+	   -moz-animation-fill-mode: both;
+	     -o-animation-fill-mode: both;
+	        animation-fill-mode: both;
+}
+
+.animated.hinge {
+	-webkit-animation-duration: 2s;
+	   -moz-animation-duration: 2s;
+	     -o-animation-duration: 2s;
+	        animation-duration: 2s;
+}
+
+@-webkit-keyframes flash {
+	0%, 50%, 100% {opacity: 1;}	
+	25%, 75% {opacity: 0;}
+}
+
+@-moz-keyframes flash {
+	0%, 50%, 100% {opacity: 1;}	
+	25%, 75% {opacity: 0;}
+}
+
+@-o-keyframes flash {
+	0%, 50%, 100% {opacity: 1;}	
+	25%, 75% {opacity: 0;}
+}
+
+@keyframes flash {
+	0%, 50%, 100% {opacity: 1;}	
+	25%, 75% {opacity: 0;}
+}
+
+.flash {
+	-webkit-animation-name: flash;
+	-moz-animation-name: flash;
+	-o-animation-name: flash;
+	animation-name: flash;
+}
+@-webkit-keyframes shake {
+	0%, 100% {-webkit-transform: translateX(0);}
+	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
+	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
+}
+
+@-moz-keyframes shake {
+	0%, 100% {-moz-transform: translateX(0);}
+	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
+	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
+}
+
+@-o-keyframes shake {
+	0%, 100% {-o-transform: translateX(0);}
+	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
+	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
+}
+
+@keyframes shake {
+	0%, 100% {transform: translateX(0);}
+	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
+	20%, 40%, 60%, 80% {transform: translateX(10px);}
+}
+
+.shake {
+	-webkit-animation-name: shake;
+	-moz-animation-name: shake;
+	-o-animation-name: shake;
+	animation-name: shake;
+}
+@-webkit-keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
+	40% {-webkit-transform: translateY(-30px);}
+	60% {-webkit-transform: translateY(-15px);}
+}
+
+@-moz-keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
+	40% {-moz-transform: translateY(-30px);}
+	60% {-moz-transform: translateY(-15px);}
+}
+
+@-o-keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
+	40% {-o-transform: translateY(-30px);}
+	60% {-o-transform: translateY(-15px);}
+}
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+	40% {transform: translateY(-30px);}
+	60% {transform: translateY(-15px);}
+}
+
+.bounce {
+	-webkit-animation-name: bounce;
+	-moz-animation-name: bounce;
+	-o-animation-name: bounce;
+	animation-name: bounce;
+}
+@-webkit-keyframes tada {
+	0% {-webkit-transform: scale(1);}	
+	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
+	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
+	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
+	100% {-webkit-transform: scale(1) rotate(0);}
+}
+
+@-moz-keyframes tada {
+	0% {-moz-transform: scale(1);}	
+	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
+	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
+	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
+	100% {-moz-transform: scale(1) rotate(0);}
+}
+
+@-o-keyframes tada {
+	0% {-o-transform: scale(1);}	
+	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
+	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
+	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
+	100% {-o-transform: scale(1) rotate(0);}
+}
+
+@keyframes tada {
+	0% {transform: scale(1);}	
+	10%, 20% {transform: scale(0.9) rotate(-3deg);}
+	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
+	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
+	100% {transform: scale(1) rotate(0);}
+}
+
+.tada {
+	-webkit-animation-name: tada;
+	-moz-animation-name: tada;
+	-o-animation-name: tada;
+	animation-name: tada;
+}
+@-webkit-keyframes swing {
+	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
+	20% { -webkit-transform: rotate(15deg); }	
+	40% { -webkit-transform: rotate(-10deg); }
+	60% { -webkit-transform: rotate(5deg); }	
+	80% { -webkit-transform: rotate(-5deg); }	
+	100% { -webkit-transform: rotate(0deg); }
+}
+
+@-moz-keyframes swing {
+	20% { -moz-transform: rotate(15deg); }	
+	40% { -moz-transform: rotate(-10deg); }
+	60% { -moz-transform: rotate(5deg); }	
+	80% { -moz-transform: rotate(-5deg); }	
+	100% { -moz-transform: rotate(0deg); }
+}
+
+@-o-keyframes swing {
+	20% { -o-transform: rotate(15deg); }	
+	40% { -o-transform: rotate(-10deg); }
+	60% { -o-transform: rotate(5deg); }	
+	80% { -o-transform: rotate(-5deg); }	
+	100% { -o-transform: rotate(0deg); }
+}
+
+@keyframes swing {
+	20% { transform: rotate(15deg); }	
+	40% { transform: rotate(-10deg); }
+	60% { transform: rotate(5deg); }	
+	80% { transform: rotate(-5deg); }	
+	100% { transform: rotate(0deg); }
+}
+
+.swing {
+	-webkit-transform-origin: top center;
+	-moz-transform-origin: top center;
+	-o-transform-origin: top center;
+	transform-origin: top center;
+	-webkit-animation-name: swing;
+	-moz-animation-name: swing;
+	-o-animation-name: swing;
+	animation-name: swing;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% { -webkit-transform: translateX(0%); }
+  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
+  30% { -webkit-transform: translateX(20%) rotate(3deg); }
+  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
+  60% { -webkit-transform: translateX(10%) rotate(2deg); }
+  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
+  100% { -webkit-transform: translateX(0%); }
+}
+
+@-moz-keyframes wobble {
+  0% { -moz-transform: translateX(0%); }
+  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
+  30% { -moz-transform: translateX(20%) rotate(3deg); }
+  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
+  60% { -moz-transform: translateX(10%) rotate(2deg); }
+  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
+  100% { -moz-transform: translateX(0%); }
+}
+
+@-o-keyframes wobble {
+  0% { -o-transform: translateX(0%); }
+  15% { -o-transform: translateX(-25%) rotate(-5deg); }
+  30% { -o-transform: translateX(20%) rotate(3deg); }
+  45% { -o-transform: translateX(-15%) rotate(-3deg); }
+  60% { -o-transform: translateX(10%) rotate(2deg); }
+  75% { -o-transform: translateX(-5%) rotate(-1deg); }
+  100% { -o-transform: translateX(0%); }
+}
+
+@keyframes wobble {
+  0% { transform: translateX(0%); }
+  15% { transform: translateX(-25%) rotate(-5deg); }
+  30% { transform: translateX(20%) rotate(3deg); }
+  45% { transform: translateX(-15%) rotate(-3deg); }
+  60% { transform: translateX(10%) rotate(2deg); }
+  75% { transform: translateX(-5%) rotate(-1deg); }
+  100% { transform: translateX(0%); }
+}
+
+.wobble {
+	-webkit-animation-name: wobble;
+	-moz-animation-name: wobble;
+	-o-animation-name: wobble;
+	animation-name: wobble;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+    0% { -webkit-transform: scale(1); }	
+	50% { -webkit-transform: scale(1.1); }
+    100% { -webkit-transform: scale(1); }
+}
+@-moz-keyframes pulse {
+    0% { -moz-transform: scale(1); }	
+	50% { -moz-transform: scale(1.1); }
+    100% { -moz-transform: scale(1); }
+}
+@-o-keyframes pulse {
+    0% { -o-transform: scale(1); }	
+	50% { -o-transform: scale(1.1); }
+    100% { -o-transform: scale(1); }
+}
+@keyframes pulse {
+    0% { transform: scale(1); }	
+	50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.pulse {
+	-webkit-animation-name: pulse;
+	-moz-animation-name: pulse;
+	-o-animation-name: pulse;
+	animation-name: pulse;
+}
+@-webkit-keyframes flip {
+	0% {
+		-webkit-transform: perspective(400px) rotateY(0);
+		-webkit-animation-timing-function: ease-out;
+	}
+	40% {
+		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
+		-webkit-animation-timing-function: ease-out;
+	}
+	50% {
+		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+		-webkit-animation-timing-function: ease-in;
+	}
+	80% {
+		-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
+		-webkit-animation-timing-function: ease-in;
+	}
+	100% {
+		-webkit-transform: perspective(400px) scale(1);
+		-webkit-animation-timing-function: ease-in;
+	}
+}
+@-moz-keyframes flip {
+	0% {
+		-moz-transform: perspective(400px) rotateY(0);
+		-moz-animation-timing-function: ease-out;
+	}
+	40% {
+		-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
+		-moz-animation-timing-function: ease-out;
+	}
+	50% {
+		-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+		-moz-animation-timing-function: ease-in;
+	}
+	80% {
+		-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
+		-moz-animation-timing-function: ease-in;
+	}
+	100% {
+		-moz-transform: perspective(400px) scale(1);
+		-moz-animation-timing-function: ease-in;
+	}
+}
+@-o-keyframes flip {
+	0% {
+		-o-transform: perspective(400px) rotateY(0);
+		-o-animation-timing-function: ease-out;
+	}
+	40% {
+		-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
+		-o-animation-timing-function: ease-out;
+	}
+	50% {
+		-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+		-o-animation-timing-function: ease-in;
+	}
+	80% {
+		-o-transform: perspective(400px) rotateY(360deg) scale(.95);
+		-o-animation-timing-function: ease-in;
+	}
+	100% {
+		-o-transform: perspective(400px) scale(1);
+		-o-animation-timing-function: ease-in;
+	}
+}
+@keyframes flip {
+	0% {
+		transform: perspective(400px) rotateY(0);
+		animation-timing-function: ease-out;
+	}
+	40% {
+		transform: perspective(400px) translateZ(150px) rotateY(170deg);
+		animation-timing-function: ease-out;
+	}
+	50% {
+		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+		animation-timing-function: ease-in;
+	}
+	80% {
+		transform: perspective(400px) rotateY(360deg) scale(.95);
+		animation-timing-function: ease-in;
+	}
+	100% {
+		transform: perspective(400px) scale(1);
+		animation-timing-function: ease-in;
+	}
+}
+
+.flip {
+	-webkit-backface-visibility: visible !important;
+	-webkit-animation-name: flip;
+	-moz-backface-visibility: visible !important;
+	-moz-animation-name: flip;
+	-o-backface-visibility: visible !important;
+	-o-animation-name: flip;
+	backface-visibility: visible !important;
+	animation-name: flip;
+}
+@-webkit-keyframes flipInX {
+    0% {
+        -webkit-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -webkit-transform: perspective(400px) rotateX(-10deg);
+    }
+    
+    70% {
+        -webkit-transform: perspective(400px) rotateX(10deg);
+    }
+    
+    100% {
+        -webkit-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+}
+@-moz-keyframes flipInX {
+    0% {
+        -moz-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -moz-transform: perspective(400px) rotateX(-10deg);
+    }
+    
+    70% {
+        -moz-transform: perspective(400px) rotateX(10deg);
+    }
+    
+    100% {
+        -moz-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+}
+@-o-keyframes flipInX {
+    0% {
+        -o-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -o-transform: perspective(400px) rotateX(-10deg);
+    }
+    
+    70% {
+        -o-transform: perspective(400px) rotateX(10deg);
+    }
+    
+    100% {
+        -o-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+}
+@keyframes flipInX {
+    0% {
+        transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        transform: perspective(400px) rotateX(-10deg);
+    }
+    
+    70% {
+        transform: perspective(400px) rotateX(10deg);
+    }
+    
+    100% {
+        transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+}
+
+.flipInX {
+	-webkit-backface-visibility: visible !important;
+	-webkit-animation-name: flipInX;
+	-moz-backface-visibility: visible !important;
+	-moz-animation-name: flipInX;
+	-o-backface-visibility: visible !important;
+	-o-animation-name: flipInX;
+	backface-visibility: visible !important;
+	animation-name: flipInX;
+}
+@-webkit-keyframes flipOutX {
+    0% {
+        -webkit-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+	100% {
+        -webkit-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes flipOutX {
+    0% {
+        -moz-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+	100% {
+        -moz-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+}
+
+@-o-keyframes flipOutX {
+    0% {
+        -o-transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+	100% {
+        -o-transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+}
+
+@keyframes flipOutX {
+    0% {
+        transform: perspective(400px) rotateX(0deg);
+        opacity: 1;
+    }
+	100% {
+        transform: perspective(400px) rotateX(90deg);
+        opacity: 0;
+    }
+}
+
+.flipOutX {
+	-webkit-animation-name: flipOutX;
+	-webkit-backface-visibility: visible !important;
+	-moz-animation-name: flipOutX;
+	-moz-backface-visibility: visible !important;
+	-o-animation-name: flipOutX;
+	-o-backface-visibility: visible !important;
+	animation-name: flipOutX;
+	backface-visibility: visible !important;
+}
+@-webkit-keyframes flipInY {
+    0% {
+        -webkit-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -webkit-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -webkit-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -webkit-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@-moz-keyframes flipInY {
+    0% {
+        -moz-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -moz-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -moz-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -moz-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@-o-keyframes flipInY {
+    0% {
+        -o-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -o-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -o-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -o-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+.flipInY {
+	-webkit-backface-visibility: visible !important;
+	-webkit-animation-name: flipInY;
+	-moz-backface-visibility: visible !important;
+	-moz-animation-name: flipInY;
+	-o-backface-visibility: visible !important;
+	-o-animation-name: flipInY;
+	backface-visibility: visible !important;
+	animation-name: flipInY;
+}
+@-webkit-keyframes flipOutY {
+    0% {
+        -webkit-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+	100% {
+        -webkit-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}
+@-moz-keyframes flipOutY {
+    0% {
+        -moz-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+	100% {
+        -moz-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}
+@-o-keyframes flipOutY {
+    0% {
+        -o-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+	100% {
+        -o-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}
+@keyframes flipOutY {
+    0% {
+        transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+	100% {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}
+
+.flipOutY {
+	-webkit-backface-visibility: visible !important;
+	-webkit-animation-name: flipOutY;
+	-moz-backface-visibility: visible !important;
+	-moz-animation-name: flipOutY;
+	-o-backface-visibility: visible !important;
+	-o-animation-name: flipOutY;
+	backface-visibility: visible !important;
+	animation-name: flipOutY;
+}
+@-webkit-keyframes fadeIn {
+	0% {opacity: 0;}	
+	100% {opacity: 1;}
+}
+
+@-moz-keyframes fadeIn {
+	0% {opacity: 0;}	
+	100% {opacity: 1;}
+}
+
+@-o-keyframes fadeIn {
+	0% {opacity: 0;}	
+	100% {opacity: 1;}
+}
+
+@keyframes fadeIn {
+	0% {opacity: 0;}	
+	100% {opacity: 1;}
+}
+
+.fadeIn {
+	-webkit-animation-name: fadeIn;
+	-moz-animation-name: fadeIn;
+	-o-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+@-webkit-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes fadeInUp {
+	0% {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	-moz-animation-name: fadeInUp;
+	-o-animation-name: fadeInUp;
+	animation-name: fadeInUp;
+}
+@-webkit-keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes fadeInDown {
+	0% {
+		opacity: 0;
+		transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.fadeInDown {
+	-webkit-animation-name: fadeInDown;
+	-moz-animation-name: fadeInDown;
+	-o-animation-name: fadeInDown;
+	animation-name: fadeInDown;
+}
+@-webkit-keyframes fadeInLeft {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+}
+
+@-moz-keyframes fadeInLeft {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+}
+
+@-o-keyframes fadeInLeft {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+}
+
+@keyframes fadeInLeft {
+	0% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.fadeInLeft {
+	-webkit-animation-name: fadeInLeft;
+	-moz-animation-name: fadeInLeft;
+	-o-animation-name: fadeInLeft;
+	animation-name: fadeInLeft;
+}
+@-webkit-keyframes fadeInRight {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+}
+
+@-moz-keyframes fadeInRight {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+}
+
+@-o-keyframes fadeInRight {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+}
+
+@keyframes fadeInRight {
+	0% {
+		opacity: 0;
+		transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.fadeInRight {
+	-webkit-animation-name: fadeInRight;
+	-moz-animation-name: fadeInRight;
+	-o-animation-name: fadeInRight;
+	animation-name: fadeInRight;
+}
+@-webkit-keyframes fadeInUpBig {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes fadeInUpBig {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes fadeInUpBig {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes fadeInUpBig {
+	0% {
+		opacity: 0;
+		transform: translateY(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.fadeInUpBig {
+	-webkit-animation-name: fadeInUpBig;
+	-moz-animation-name: fadeInUpBig;
+	-o-animation-name: fadeInUpBig;
+	animation-name: fadeInUpBig;
+}
+@-webkit-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.fadeInDownBig {
+	-webkit-animation-name: fadeInDownBig;
+	-moz-animation-name: fadeInDownBig;
+	-o-animation-name: fadeInDownBig;
+	animation-name: fadeInDownBig;
+}
+@-webkit-keyframes fadeInLeftBig {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+}
+@-moz-keyframes fadeInLeftBig {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+}
+@-o-keyframes fadeInLeftBig {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+}
+@keyframes fadeInLeftBig {
+	0% {
+		opacity: 0;
+		transform: translateX(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.fadeInLeftBig {
+	-webkit-animation-name: fadeInLeftBig;
+	-moz-animation-name: fadeInLeftBig;
+	-o-animation-name: fadeInLeftBig;
+	animation-name: fadeInLeftBig;
+}
+@-webkit-keyframes fadeInRightBig {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+}
+
+@-moz-keyframes fadeInRightBig {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+}
+
+@-o-keyframes fadeInRightBig {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+}
+
+@keyframes fadeInRightBig {
+	0% {
+		opacity: 0;
+		transform: translateX(2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.fadeInRightBig {
+	-webkit-animation-name: fadeInRightBig;
+	-moz-animation-name: fadeInRightBig;
+	-o-animation-name: fadeInRightBig;
+	animation-name: fadeInRightBig;
+}
+@-webkit-keyframes fadeOut {
+	0% {opacity: 1;}
+	100% {opacity: 0;}
+}
+
+@-moz-keyframes fadeOut {
+	0% {opacity: 1;}
+	100% {opacity: 0;}
+}
+
+@-o-keyframes fadeOut {
+	0% {opacity: 1;}
+	100% {opacity: 0;}
+}
+
+@keyframes fadeOut {
+	0% {opacity: 1;}
+	100% {opacity: 0;}
+}
+
+.fadeOut {
+	-webkit-animation-name: fadeOut;
+	-moz-animation-name: fadeOut;
+	-o-animation-name: fadeOut;
+	animation-name: fadeOut;
+}
+@-webkit-keyframes fadeOutUp {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-20px);
+	}
+}
+@-moz-keyframes fadeOutUp {
+	0% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(-20px);
+	}
+}
+@-o-keyframes fadeOutUp {
+	0% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(-20px);
+	}
+}
+@keyframes fadeOutUp {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(-20px);
+	}
+}
+
+.fadeOutUp {
+	-webkit-animation-name: fadeOutUp;
+	-moz-animation-name: fadeOutUp;
+	-o-animation-name: fadeOutUp;
+	animation-name: fadeOutUp;
+}
+@-webkit-keyframes fadeOutDown {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(20px);
+	}
+}
+
+@-moz-keyframes fadeOutDown {
+	0% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(20px);
+	}
+}
+
+@-o-keyframes fadeOutDown {
+	0% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(20px);
+	}
+}
+
+@keyframes fadeOutDown {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+}
+
+.fadeOutDown {
+	-webkit-animation-name: fadeOutDown;
+	-moz-animation-name: fadeOutDown;
+	-o-animation-name: fadeOutDown;
+	animation-name: fadeOutDown;
+}
+@-webkit-keyframes fadeOutLeft {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(-20px);
+	}
+}
+
+@-moz-keyframes fadeOutLeft {
+	0% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(-20px);
+	}
+}
+
+@-o-keyframes fadeOutLeft {
+	0% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(-20px);
+	}
+}
+
+@keyframes fadeOutLeft {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+}
+
+.fadeOutLeft {
+	-webkit-animation-name: fadeOutLeft;
+	-moz-animation-name: fadeOutLeft;
+	-o-animation-name: fadeOutLeft;
+	animation-name: fadeOutLeft;
+}
+@-webkit-keyframes fadeOutRight {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(20px);
+	}
+}
+
+@-moz-keyframes fadeOutRight {
+	0% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(20px);
+	}
+}
+
+@-o-keyframes fadeOutRight {
+	0% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(20px);
+	}
+}
+
+@keyframes fadeOutRight {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(20px);
+	}
+}
+
+.fadeOutRight {
+	-webkit-animation-name: fadeOutRight;
+	-moz-animation-name: fadeOutRight;
+	-o-animation-name: fadeOutRight;
+	animation-name: fadeOutRight;
+}
+@-webkit-keyframes fadeOutUpBig {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-2000px);
+	}
+}
+
+@-moz-keyframes fadeOutUpBig {
+	0% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(-2000px);
+	}
+}
+
+@-o-keyframes fadeOutUpBig {
+	0% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(-2000px);
+	}
+}
+
+@keyframes fadeOutUpBig {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(-2000px);
+	}
+}
+
+.fadeOutUpBig {
+	-webkit-animation-name: fadeOutUpBig;
+	-moz-animation-name: fadeOutUpBig;
+	-o-animation-name: fadeOutUpBig;
+	animation-name: fadeOutUpBig;
+}
+@-webkit-keyframes fadeOutDownBig {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(2000px);
+	}
+}
+
+@-moz-keyframes fadeOutDownBig {
+	0% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(2000px);
+	}
+}
+
+@-o-keyframes fadeOutDownBig {
+	0% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(2000px);
+	}
+}
+
+@keyframes fadeOutDownBig {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(2000px);
+	}
+}
+
+.fadeOutDownBig {
+	-webkit-animation-name: fadeOutDownBig;
+	-moz-animation-name: fadeOutDownBig;
+	-o-animation-name: fadeOutDownBig;
+	animation-name: fadeOutDownBig;
+}
+@-webkit-keyframes fadeOutLeftBig {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(-2000px);
+	}
+}
+
+@-moz-keyframes fadeOutLeftBig {
+	0% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(-2000px);
+	}
+}
+
+@-o-keyframes fadeOutLeftBig {
+	0% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(-2000px);
+	}
+}
+
+@keyframes fadeOutLeftBig {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(-2000px);
+	}
+}
+
+.fadeOutLeftBig {
+	-webkit-animation-name: fadeOutLeftBig;
+	-moz-animation-name: fadeOutLeftBig;
+	-o-animation-name: fadeOutLeftBig;
+	animation-name: fadeOutLeftBig;
+}
+@-webkit-keyframes fadeOutRightBig {
+	0% {
+		opacity: 1;
+		-webkit-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(2000px);
+	}
+}
+@-moz-keyframes fadeOutRightBig {
+	0% {
+		opacity: 1;
+		-moz-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(2000px);
+	}
+}
+@-o-keyframes fadeOutRightBig {
+	0% {
+		opacity: 1;
+		-o-transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(2000px);
+	}
+}
+@keyframes fadeOutRightBig {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(2000px);
+	}
+}
+
+.fadeOutRightBig {
+	-webkit-animation-name: fadeOutRightBig;
+	-moz-animation-name: fadeOutRightBig;
+	-o-animation-name: fadeOutRightBig;
+	animation-name: fadeOutRightBig;
+}
+@-webkit-keyframes bounceIn {
+	0% {
+		opacity: 0;
+		-webkit-transform: scale(.3);
+	}
+	
+	50% {
+		opacity: 1;
+		-webkit-transform: scale(1.05);
+	}
+	
+	70% {
+		-webkit-transform: scale(.9);
+	}
+	
+	100% {
+		-webkit-transform: scale(1);
+	}
+}
+
+@-moz-keyframes bounceIn {
+	0% {
+		opacity: 0;
+		-moz-transform: scale(.3);
+	}
+	
+	50% {
+		opacity: 1;
+		-moz-transform: scale(1.05);
+	}
+	
+	70% {
+		-moz-transform: scale(.9);
+	}
+	
+	100% {
+		-moz-transform: scale(1);
+	}
+}
+
+@-o-keyframes bounceIn {
+	0% {
+		opacity: 0;
+		-o-transform: scale(.3);
+	}
+	
+	50% {
+		opacity: 1;
+		-o-transform: scale(1.05);
+	}
+	
+	70% {
+		-o-transform: scale(.9);
+	}
+	
+	100% {
+		-o-transform: scale(1);
+	}
+}
+
+@keyframes bounceIn {
+	0% {
+		opacity: 0;
+		transform: scale(.3);
+	}
+	
+	50% {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+	
+	70% {
+		transform: scale(.9);
+	}
+	
+	100% {
+		transform: scale(1);
+	}
+}
+
+.bounceIn {
+	-webkit-animation-name: bounceIn;
+	-moz-animation-name: bounceIn;
+	-o-animation-name: bounceIn;
+	animation-name: bounceIn;
+}
+@-webkit-keyframes bounceInUp {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-webkit-transform: translateY(-30px);
+	}
+	
+	80% {
+		-webkit-transform: translateY(10px);
+	}
+	
+	100% {
+		-webkit-transform: translateY(0);
+	}
+}
+@-moz-keyframes bounceInUp {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-moz-transform: translateY(-30px);
+	}
+	
+	80% {
+		-moz-transform: translateY(10px);
+	}
+	
+	100% {
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes bounceInUp {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-o-transform: translateY(-30px);
+	}
+	
+	80% {
+		-o-transform: translateY(10px);
+	}
+	
+	100% {
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes bounceInUp {
+	0% {
+		opacity: 0;
+		transform: translateY(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		transform: translateY(-30px);
+	}
+	
+	80% {
+		transform: translateY(10px);
+	}
+	
+	100% {
+		transform: translateY(0);
+	}
+}
+
+.bounceInUp {
+	-webkit-animation-name: bounceInUp;
+	-moz-animation-name: bounceInUp;
+	-o-animation-name: bounceInUp;
+	animation-name: bounceInUp;
+}
+@-webkit-keyframes bounceInDown {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-webkit-transform: translateY(30px);
+	}
+	
+	80% {
+		-webkit-transform: translateY(-10px);
+	}
+	
+	100% {
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes bounceInDown {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-moz-transform: translateY(30px);
+	}
+	
+	80% {
+		-moz-transform: translateY(-10px);
+	}
+	
+	100% {
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes bounceInDown {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-o-transform: translateY(30px);
+	}
+	
+	80% {
+		-o-transform: translateY(-10px);
+	}
+	
+	100% {
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes bounceInDown {
+	0% {
+		opacity: 0;
+		transform: translateY(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		transform: translateY(30px);
+	}
+	
+	80% {
+		transform: translateY(-10px);
+	}
+	
+	100% {
+		transform: translateY(0);
+	}
+}
+
+.bounceInDown {
+	-webkit-animation-name: bounceInDown;
+	-moz-animation-name: bounceInDown;
+	-o-animation-name: bounceInDown;
+	animation-name: bounceInDown;
+}
+@-webkit-keyframes bounceInLeft {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-webkit-transform: translateX(30px);
+	}
+	
+	80% {
+		-webkit-transform: translateX(-10px);
+	}
+	
+	100% {
+		-webkit-transform: translateX(0);
+	}
+}
+
+@-moz-keyframes bounceInLeft {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-moz-transform: translateX(30px);
+	}
+	
+	80% {
+		-moz-transform: translateX(-10px);
+	}
+	
+	100% {
+		-moz-transform: translateX(0);
+	}
+}
+
+@-o-keyframes bounceInLeft {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-o-transform: translateX(30px);
+	}
+	
+	80% {
+		-o-transform: translateX(-10px);
+	}
+	
+	100% {
+		-o-transform: translateX(0);
+	}
+}
+
+@keyframes bounceInLeft {
+	0% {
+		opacity: 0;
+		transform: translateX(-2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		transform: translateX(30px);
+	}
+	
+	80% {
+		transform: translateX(-10px);
+	}
+	
+	100% {
+		transform: translateX(0);
+	}
+}
+
+.bounceInLeft {
+	-webkit-animation-name: bounceInLeft;
+	-moz-animation-name: bounceInLeft;
+	-o-animation-name: bounceInLeft;
+	animation-name: bounceInLeft;
+}
+@-webkit-keyframes bounceInRight {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateX(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-webkit-transform: translateX(-30px);
+	}
+	
+	80% {
+		-webkit-transform: translateX(10px);
+	}
+	
+	100% {
+		-webkit-transform: translateX(0);
+	}
+}
+
+@-moz-keyframes bounceInRight {
+	0% {
+		opacity: 0;
+		-moz-transform: translateX(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-moz-transform: translateX(-30px);
+	}
+	
+	80% {
+		-moz-transform: translateX(10px);
+	}
+	
+	100% {
+		-moz-transform: translateX(0);
+	}
+}
+
+@-o-keyframes bounceInRight {
+	0% {
+		opacity: 0;
+		-o-transform: translateX(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		-o-transform: translateX(-30px);
+	}
+	
+	80% {
+		-o-transform: translateX(10px);
+	}
+	
+	100% {
+		-o-transform: translateX(0);
+	}
+}
+
+@keyframes bounceInRight {
+	0% {
+		opacity: 0;
+		transform: translateX(2000px);
+	}
+	
+	60% {
+		opacity: 1;
+		transform: translateX(-30px);
+	}
+	
+	80% {
+		transform: translateX(10px);
+	}
+	
+	100% {
+		transform: translateX(0);
+	}
+}
+
+.bounceInRight {
+	-webkit-animation-name: bounceInRight;
+	-moz-animation-name: bounceInRight;
+	-o-animation-name: bounceInRight;
+	animation-name: bounceInRight;
+}
+@-webkit-keyframes bounceOut {
+	0% {
+		-webkit-transform: scale(1);
+	}
+	
+	25% {
+		-webkit-transform: scale(.95);
+	}
+	
+	50% {
+		opacity: 1;
+		-webkit-transform: scale(1.1);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: scale(.3);
+	}	
+}
+
+@-moz-keyframes bounceOut {
+	0% {
+		-moz-transform: scale(1);
+	}
+	
+	25% {
+		-moz-transform: scale(.95);
+	}
+	
+	50% {
+		opacity: 1;
+		-moz-transform: scale(1.1);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: scale(.3);
+	}	
+}
+
+@-o-keyframes bounceOut {
+	0% {
+		-o-transform: scale(1);
+	}
+	
+	25% {
+		-o-transform: scale(.95);
+	}
+	
+	50% {
+		opacity: 1;
+		-o-transform: scale(1.1);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: scale(.3);
+	}	
+}
+
+@keyframes bounceOut {
+	0% {
+		transform: scale(1);
+	}
+	
+	25% {
+		transform: scale(.95);
+	}
+	
+	50% {
+		opacity: 1;
+		transform: scale(1.1);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: scale(.3);
+	}	
+}
+
+.bounceOut {
+	-webkit-animation-name: bounceOut;
+	-moz-animation-name: bounceOut;
+	-o-animation-name: bounceOut;
+	animation-name: bounceOut;
+}
+@-webkit-keyframes bounceOutUp {
+	0% {
+		-webkit-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-webkit-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(-2000px);
+	}
+}
+
+@-moz-keyframes bounceOutUp {
+	0% {
+		-moz-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-moz-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(-2000px);
+	}
+}
+
+@-o-keyframes bounceOutUp {
+	0% {
+		-o-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-o-transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(-2000px);
+	}
+}
+
+@keyframes bounceOutUp {
+	0% {
+		transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		transform: translateY(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(-2000px);
+	}
+}
+
+.bounceOutUp {
+	-webkit-animation-name: bounceOutUp;
+	-moz-animation-name: bounceOutUp;
+	-o-animation-name: bounceOutUp;
+	animation-name: bounceOutUp;
+}
+@-webkit-keyframes bounceOutDown {
+	0% {
+		-webkit-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-webkit-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateY(2000px);
+	}
+}
+
+@-moz-keyframes bounceOutDown {
+	0% {
+		-moz-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-moz-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateY(2000px);
+	}
+}
+
+@-o-keyframes bounceOutDown {
+	0% {
+		-o-transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-o-transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateY(2000px);
+	}
+}
+
+@keyframes bounceOutDown {
+	0% {
+		transform: translateY(0);
+	}
+	
+	20% {
+		opacity: 1;
+		transform: translateY(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateY(2000px);
+	}
+}
+
+.bounceOutDown {
+	-webkit-animation-name: bounceOutDown;
+	-moz-animation-name: bounceOutDown;
+	-o-animation-name: bounceOutDown;
+	animation-name: bounceOutDown;
+}
+@-webkit-keyframes bounceOutLeft {
+	0% {
+		-webkit-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-webkit-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(-2000px);
+	}
+}
+
+@-moz-keyframes bounceOutLeft {
+	0% {
+		-moz-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-moz-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(-2000px);
+	}
+}
+
+@-o-keyframes bounceOutLeft {
+	0% {
+		-o-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-o-transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(-2000px);
+	}
+}
+
+@keyframes bounceOutLeft {
+	0% {
+		transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		transform: translateX(20px);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(-2000px);
+	}
+}
+
+.bounceOutLeft {
+	-webkit-animation-name: bounceOutLeft;
+	-moz-animation-name: bounceOutLeft;
+	-o-animation-name: bounceOutLeft;
+	animation-name: bounceOutLeft;
+}
+@-webkit-keyframes bounceOutRight {
+	0% {
+		-webkit-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-webkit-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-webkit-transform: translateX(2000px);
+	}
+}
+
+@-moz-keyframes bounceOutRight {
+	0% {
+		-moz-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-moz-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-moz-transform: translateX(2000px);
+	}
+}
+
+@-o-keyframes bounceOutRight {
+	0% {
+		-o-transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		-o-transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		-o-transform: translateX(2000px);
+	}
+}
+
+@keyframes bounceOutRight {
+	0% {
+		transform: translateX(0);
+	}
+	
+	20% {
+		opacity: 1;
+		transform: translateX(-20px);
+	}
+	
+	100% {
+		opacity: 0;
+		transform: translateX(2000px);
+	}
+}
+
+.bounceOutRight {
+	-webkit-animation-name: bounceOutRight;
+	-moz-animation-name: bounceOutRight;
+	-o-animation-name: bounceOutRight;
+	animation-name: bounceOutRight;
+}
+@-webkit-keyframes rotateIn {
+	0% {
+		-webkit-transform-origin: center center;
+		-webkit-transform: rotate(-200deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-webkit-transform-origin: center center;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+}
+@-moz-keyframes rotateIn {
+	0% {
+		-moz-transform-origin: center center;
+		-moz-transform: rotate(-200deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-moz-transform-origin: center center;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+}
+@-o-keyframes rotateIn {
+	0% {
+		-o-transform-origin: center center;
+		-o-transform: rotate(-200deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-o-transform-origin: center center;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+}
+@keyframes rotateIn {
+	0% {
+		transform-origin: center center;
+		transform: rotate(-200deg);
+		opacity: 0;
+	}
+	
+	100% {
+		transform-origin: center center;
+		transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+.rotateIn {
+	-webkit-animation-name: rotateIn;
+	-moz-animation-name: rotateIn;
+	-o-animation-name: rotateIn;
+	animation-name: rotateIn;
+}
+@-webkit-keyframes rotateInUpLeft {
+	0% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-moz-keyframes rotateInUpLeft {
+	0% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-o-keyframes rotateInUpLeft {
+	0% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInUpLeft {
+	0% {
+		transform-origin: left bottom;
+		transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		transform-origin: left bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+.rotateInUpLeft {
+	-webkit-animation-name: rotateInUpLeft;
+	-moz-animation-name: rotateInUpLeft;
+	-o-animation-name: rotateInUpLeft;
+	animation-name: rotateInUpLeft;
+}
+@-webkit-keyframes rotateInDownLeft {
+	0% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-moz-keyframes rotateInDownLeft {
+	0% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-o-keyframes rotateInDownLeft {
+	0% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInDownLeft {
+	0% {
+		transform-origin: left bottom;
+		transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		transform-origin: left bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+.rotateInDownLeft {
+	-webkit-animation-name: rotateInDownLeft;
+	-moz-animation-name: rotateInDownLeft;
+	-o-animation-name: rotateInDownLeft;
+	animation-name: rotateInDownLeft;
+}
+@-webkit-keyframes rotateInUpRight {
+	0% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-moz-keyframes rotateInUpRight {
+	0% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-o-keyframes rotateInUpRight {
+	0% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInUpRight {
+	0% {
+		transform-origin: right bottom;
+		transform: rotate(-90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		transform-origin: right bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+.rotateInUpRight {
+	-webkit-animation-name: rotateInUpRight;
+	-moz-animation-name: rotateInUpRight;
+	-o-animation-name: rotateInUpRight;
+	animation-name: rotateInUpRight;
+}
+@-webkit-keyframes rotateInDownRight {
+	0% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-moz-keyframes rotateInDownRight {
+	0% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@-o-keyframes rotateInDownRight {
+	0% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInDownRight {
+	0% {
+		transform-origin: right bottom;
+		transform: rotate(90deg);
+		opacity: 0;
+	}
+	
+	100% {
+		transform-origin: right bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+}
+
+.rotateInDownRight {
+	-webkit-animation-name: rotateInDownRight;
+	-moz-animation-name: rotateInDownRight;
+	-o-animation-name: rotateInDownRight;
+	animation-name: rotateInDownRight;
+}
+@-webkit-keyframes rotateOut {
+	0% {
+		-webkit-transform-origin: center center;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-webkit-transform-origin: center center;
+		-webkit-transform: rotate(200deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes rotateOut {
+	0% {
+		-moz-transform-origin: center center;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-moz-transform-origin: center center;
+		-moz-transform: rotate(200deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes rotateOut {
+	0% {
+		-o-transform-origin: center center;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-o-transform-origin: center center;
+		-o-transform: rotate(200deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOut {
+	0% {
+		transform-origin: center center;
+		transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		transform-origin: center center;
+		transform: rotate(200deg);
+		opacity: 0;
+	}
+}
+
+.rotateOut {
+	-webkit-animation-name: rotateOut;
+	-moz-animation-name: rotateOut;
+	-o-animation-name: rotateOut;
+	animation-name: rotateOut;
+}
+@-webkit-keyframes rotateOutUpLeft {
+	0% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes rotateOutUpLeft {
+	0% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes rotateOutUpLeft {
+	0% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutUpLeft {
+	0% {
+		transform-origin: left bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		transform-origin: left bottom;
+		transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+.rotateOutUpLeft {
+	-webkit-animation-name: rotateOutUpLeft;
+	-moz-animation-name: rotateOutUpLeft;
+	-o-animation-name: rotateOutUpLeft;
+	animation-name: rotateOutUpLeft;
+}
+@-webkit-keyframes rotateOutDownLeft {
+	0% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-webkit-transform-origin: left bottom;
+		-webkit-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes rotateOutDownLeft {
+	0% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-moz-transform-origin: left bottom;
+		-moz-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes rotateOutDownLeft {
+	0% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-o-transform-origin: left bottom;
+		-o-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutDownLeft {
+	0% {
+		transform-origin: left bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		transform-origin: left bottom;
+		transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+.rotateOutDownLeft {
+	-webkit-animation-name: rotateOutDownLeft;
+	-moz-animation-name: rotateOutDownLeft;
+	-o-animation-name: rotateOutDownLeft;
+	animation-name: rotateOutDownLeft;
+}
+@-webkit-keyframes rotateOutUpRight {
+	0% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes rotateOutUpRight {
+	0% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes rotateOutUpRight {
+	0% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutUpRight {
+	0% {
+		transform-origin: right bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		transform-origin: right bottom;
+		transform: rotate(90deg);
+		opacity: 0;
+	}
+}
+
+.rotateOutUpRight {
+	-webkit-animation-name: rotateOutUpRight;
+	-moz-animation-name: rotateOutUpRight;
+	-o-animation-name: rotateOutUpRight;
+	animation-name: rotateOutUpRight;
+}
+@-webkit-keyframes rotateOutDownRight {
+	0% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-webkit-transform-origin: right bottom;
+		-webkit-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@-moz-keyframes rotateOutDownRight {
+	0% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-moz-transform-origin: right bottom;
+		-moz-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@-o-keyframes rotateOutDownRight {
+	0% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		-o-transform-origin: right bottom;
+		-o-transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutDownRight {
+	0% {
+		transform-origin: right bottom;
+		transform: rotate(0);
+		opacity: 1;
+	}
+	
+	100% {
+		transform-origin: right bottom;
+		transform: rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+.rotateOutDownRight {
+	-webkit-animation-name: rotateOutDownRight;
+	-moz-animation-name: rotateOutDownRight;
+	-o-animation-name: rotateOutDownRight;
+	animation-name: rotateOutDownRight;
+}
+@-webkit-keyframes hinge {
+	0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
+	20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
+	40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
+	80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
+	100% { -webkit-transform: translateY(700px); opacity: 0; }
+}
+
+@-moz-keyframes hinge {
+	0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
+	20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
+	40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
+	80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
+	100% { -moz-transform: translateY(700px); opacity: 0; }
+}
+
+@-o-keyframes hinge {
+	0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
+	20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
+	40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
+	80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
+	100% { -o-transform: translateY(700px); opacity: 0; }
+}
+
+@keyframes hinge {
+	0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }	
+	20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
+	40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
+	80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }	
+	100% { transform: translateY(700px); opacity: 0; }
+}
+
+.hinge {
+	-webkit-animation-name: hinge;
+	-moz-animation-name: hinge;
+	-o-animation-name: hinge;
+	animation-name: hinge;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
+	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
+}
+
+@-moz-keyframes rollIn {
+	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
+	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
+}
+
+@-o-keyframes rollIn {
+	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
+	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
+}
+
+@keyframes rollIn {
+	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
+	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
+}
+
+.rollIn {
+	-webkit-animation-name: rollIn;
+	-moz-animation-name: rollIn;
+	-o-animation-name: rollIn;
+	animation-name: rollIn;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+    0% {
+		opacity: 1;
+		-webkit-transform: translateX(0px) rotate(0deg);
+	}
+
+    100% {
+		opacity: 0;
+		-webkit-transform: translateX(100%) rotate(120deg);
+	}
+}
+
+@-moz-keyframes rollOut {
+    0% {
+		opacity: 1;
+		-moz-transform: translateX(0px) rotate(0deg);
+	}
+
+    100% {
+		opacity: 0;
+		-moz-transform: translateX(100%) rotate(120deg);
+	}
+}
+
+@-o-keyframes rollOut {
+    0% {
+		opacity: 1;
+		-o-transform: translateX(0px) rotate(0deg);
+	}
+
+    100% {
+		opacity: 0;
+		-o-transform: translateX(100%) rotate(120deg);
+	}
+}
+
+@keyframes rollOut {
+    0% {
+		opacity: 1;
+		transform: translateX(0px) rotate(0deg);
+	}
+
+    100% {
+		opacity: 0;
+		transform: translateX(100%) rotate(120deg);
+	}
+}
+
+.rollOut {
+	-webkit-animation-name: rollOut;
+	-moz-animation-name: rollOut;
+	-o-animation-name: rollOut;
+	animation-name: rollOut;
+}
+
+/* originally authored by Angelo Rohit - https://github.com/angelorohit */
+
+@-webkit-keyframes lightSpeedIn {
+	0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+	60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
+	80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
+	100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
+}
+
+@-moz-keyframes lightSpeedIn {
+	0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+	60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
+	80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
+	100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
+}
+
+@-o-keyframes lightSpeedIn {
+	0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+	60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
+	80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
+	100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
+}
+
+@keyframes lightSpeedIn {
+	0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
+	60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
+	80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
+	100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
+}
+
+.lightSpeedIn {
+    -webkit-animation-name: lightSpeedIn;
+    -moz-animation-name: lightSpeedIn;
+    -o-animation-name: lightSpeedIn;
+    animation-name: lightSpeedIn;
+
+    -webkit-animation-timing-function: ease-out;
+    -moz-animation-timing-function: ease-out;
+    -o-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+}
+
+.animated.lightSpeedIn {
+    -webkit-animation-duration: 0.5s;
+    -moz-animation-duration: 0.5s;
+    -o-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+}
+
+/* originally authored by Angelo Rohit - https://github.com/angelorohit */
+
+@-webkit-keyframes lightSpeedOut {
+    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
+	100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+}
+
+@-moz-keyframes lightSpeedOut {
+	0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
+	100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+}
+
+@-o-keyframes lightSpeedOut {
+	0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
+	100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
+}
+
+@keyframes lightSpeedOut {
+	0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
+	100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
+}
+
+.lightSpeedOut {
+    -webkit-animation-name: lightSpeedOut;
+    -moz-animation-name: lightSpeedOut;
+    -o-animation-name: lightSpeedOut;
+    animation-name: lightSpeedOut;
+
+    -webkit-animation-timing-function: ease-in;
+    -moz-animation-timing-function: ease-in;
+    -o-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+.animated.lightSpeedOut {
+    -webkit-animation-duration: 0.25s;
+    -moz-animation-duration: 0.25s;
+    -o-animation-duration: 0.25s;
+    animation-duration: 0.25s;
+}
+
+/* originally authored by Angelo Rohit - https://github.com/angelorohit */
+
+@-webkit-keyframes wiggle {
+    0% { -webkit-transform: skewX(9deg); }
+    10% { -webkit-transform: skewX(-8deg); }
+    20% { -webkit-transform: skewX(7deg); }
+    30% { -webkit-transform: skewX(-6deg); }
+    40% { -webkit-transform: skewX(5deg); }
+    50% { -webkit-transform: skewX(-4deg); }
+    60% { -webkit-transform: skewX(3deg); }
+    70% { -webkit-transform: skewX(-2deg); }
+    80% { -webkit-transform: skewX(1deg); }
+    90% { -webkit-transform: skewX(0deg); }
+	100% { -webkit-transform: skewX(0deg); }
+}
+
+@-moz-keyframes wiggle {
+    0% { -moz-transform: skewX(9deg); }
+    10% { -moz-transform: skewX(-8deg); }
+    20% { -moz-transform: skewX(7deg); }
+    30% { -moz-transform: skewX(-6deg); }
+    40% { -moz-transform: skewX(5deg); }
+    50% { -moz-transform: skewX(-4deg); }
+    60% { -moz-transform: skewX(3deg); }
+    70% { -moz-transform: skewX(-2deg); }
+    80% { -moz-transform: skewX(1deg); }
+    90% { -moz-transform: skewX(0deg); }
+	100% { -moz-transform: skewX(0deg); }
+}
+
+@-o-keyframes wiggle {
+    0% { -o-transform: skewX(9deg); }
+    10% { -o-transform: skewX(-8deg); }
+    20% { -o-transform: skewX(7deg); }
+    30% { -o-transform: skewX(-6deg); }
+    40% { -o-transform: skewX(5deg); }
+    50% { -o-transform: skewX(-4deg); }
+    60% { -o-transform: skewX(3deg); }
+    70% { -o-transform: skewX(-2deg); }
+    80% { -o-transform: skewX(1deg); }
+    90% { -o-transform: skewX(0deg); }
+	100% { -o-transform: skewX(0deg); }
+}
+
+@keyframes wiggle {
+    0% { transform: skewX(9deg); }
+    10% { transform: skewX(-8deg); }
+    20% { transform: skewX(7deg); }
+    30% { transform: skewX(-6deg); }
+    40% { transform: skewX(5deg); }
+    50% { transform: skewX(-4deg); }
+    60% { transform: skewX(3deg); }
+    70% { transform: skewX(-2deg); }
+    80% { transform: skewX(1deg); }
+    90% { transform: skewX(0deg); }
+	100% { transform: skewX(0deg); }
+}
+
+.wiggle {
+    -webkit-animation-name: wiggle;
+    -moz-animation-name: wiggle;
+    -o-animation-name: wiggle;
+    animation-name: wiggle;
+
+    -webkit-animation-timing-function: ease-in;
+    -moz-animation-timing-function: ease-in;
+    -o-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+.animated.wiggle {
+    -webkit-animation-duration: 0.75s;
+    -moz-animation-duration: 0.75s;
+    -o-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css b/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css
new file mode 100644
index 00000000..57a9b26b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/changepwd-apk.css
@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+/***
+Changepasswd page
+***/
+
+/* logo page */
+/*
+.Changepasswd {
+  background-color: #666 !important;
+}
+
+.Changepasswd .logo {
+  margin: 0 auto;   
+  margin-top:60px;
+  padding: 15px;
+  text-align: center;
+}  
+*/
+.Changepasswd .content .login-form,
+.Changepasswd .content .forget-form {
+    padding: 0px;
+    margin: 0px;
+}
+.Changepasswd .content {
+  margin: 0 auto; 
+  margin-bottom: 0px;
+  padding: 20px;  
+  padding-top: 20px;  
+  padding-bottom: 15px;  
+}
+/*
+.Changepasswd .content h3 {
+ // color: #eee;
+}
+.Changepasswd .content h4  {
+ // color: #eee;
+}
+*/
+.Changepasswd .content p,
+.Changepasswd .content label {
+  color: #fff;
+}
+
+.Changepasswd .content .form-control {
+  background-color: #fff;
+}
+
+.Changepasswd .content .form-title {
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+
+.Changepasswd .content .form-actions {
+  background-color: transparent;
+  clear: both;
+  border: 0px;
+  padding: 0px 30px 0px 30px;
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+
+.Changepasswd .content .form-actions .checkbox {
+  margin-top: 8px;
+  display: inline-block;
+}
+
+.Changepasswd .content .form-actions .btn {
+  margin-top: 1px;
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css b/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css
new file mode 100644
index 00000000..57a9b26b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/changepwd.css
@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+/***
+Changepasswd page
+***/
+
+/* logo page */
+/*
+.Changepasswd {
+  background-color: #666 !important;
+}
+
+.Changepasswd .logo {
+  margin: 0 auto;   
+  margin-top:60px;
+  padding: 15px;
+  text-align: center;
+}  
+*/
+.Changepasswd .content .login-form,
+.Changepasswd .content .forget-form {
+    padding: 0px;
+    margin: 0px;
+}
+.Changepasswd .content {
+  margin: 0 auto; 
+  margin-bottom: 0px;
+  padding: 20px;  
+  padding-top: 20px;  
+  padding-bottom: 15px;  
+}
+/*
+.Changepasswd .content h3 {
+ // color: #eee;
+}
+.Changepasswd .content h4  {
+ // color: #eee;
+}
+*/
+.Changepasswd .content p,
+.Changepasswd .content label {
+  color: #fff;
+}
+
+.Changepasswd .content .form-control {
+  background-color: #fff;
+}
+
+.Changepasswd .content .form-title {
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+
+.Changepasswd .content .form-actions {
+  background-color: transparent;
+  clear: both;
+  border: 0px;
+  padding: 0px 30px 0px 30px;
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+
+.Changepasswd .content .form-actions .checkbox {
+  margin-top: 8px;
+  display: inline-block;
+}
+
+.Changepasswd .content .form-actions .btn {
+  margin-top: 1px;
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css b/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css
new file mode 100644
index 00000000..d0a95ca2
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/frame-style.css
@@ -0,0 +1,255 @@
+/**
+ * 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.
+ */
+#recommend_notice{
+    height:30px;
+	width:100%;
+	left:0px;
+	right:0px;
+	line-height:30px; 
+	text-align:center; 
+	position:absolute;
+	float:bottom;
+	bottom:35px;
+	z-index:2;
+	cursor:default;
+}
+
+#recommend_notice:hover {
+    color: #F75000;
+}
+.menuDivider{
+  height:1px;
+  margin:9px 0;
+  text-align: center;
+  overflow:hidden;
+  background-color:#a6a6a6 !important;
+}
+ 
+.page-content .page-breadcrumb.breadcrumb {
+  -webkit-border-radius: 0px;
+     -moz-border-radius: 0px;
+          border-radius: 0px;
+  box-shadow: none;
+  padding-right: 30px;
+  padding-left: 8px;
+  margin-top: 0px !important;
+  margin-bottom: 10px !important;
+  border:0px !important;  
+  background-color: #fff;
+}   
+.page-mainIframe{
+border: 0px; 
+margin: 0px; 
+padding: 0px;
+}
+
+.zte-navbar-brand {
+  /*display: inline-block;*/
+  padding:0px;
+  margin-top: -1px;
+  margin-right: 0px;
+  width: 225px;
+  height: 42px;
+}
+
+.zte-navbar-brand img {
+  margin-left: 10px;
+  margin-top: 4px;
+}
+
+.zte-navbar-brand.text-logo {
+  padding-left: 20px;
+  padding-top: 12px;
+}
+.zte-brand-text{
+  font-size:14px;
+  font-family:Arial;
+  color:#ffffff !important;
+  font-family:"microsoft yahei";
+} 
+.zte-theme-panel {
+  width: 45px;
+  margin-top: -2px;
+  margin-right: -5px;
+  z-index: 999;
+  float: right;
+  position:relative;
+}
+
+.zte-theme-panel > .toggler {
+  top:12px;
+  right:14px;
+  padding:11px;
+  cursor:pointer;
+  position:absolute;
+  display: block;
+  background:url(../img/icon-color.png) center no-repeat;
+}
+
+.zte-theme-panel > .toggler:hover {
+  background-color: #3d3d3d;
+}
+
+.zte-theme-panel > .toggler-close {
+  display: none;
+  top:4px;
+  right:0;
+  padding:20px;
+  cursor:pointer;
+  position:absolute;
+  background: #3d3d3d url(../img/icon-color-close.png) center no-repeat !important;
+}
+
+.zte-theme-panel > .toggler-close:hover {
+  background-color:#222 !important;
+}
+
+.zte-theme-panel > .theme-options {
+  min-width:228px;
+  top: 44px;
+  right: 0px;
+  display:none;
+  position:absolute;
+  background:#3d3d3d;
+}
+
+.zte-theme-panel > .theme-options > .theme-option {
+  color:#cfcfcf;
+  padding: 15px;
+  border-top:1px solid #585858;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors {
+  border-top: 0;
+}
+
+.zte-theme-panel > .theme-options > .theme-option > span {  
+  display: inline-block;
+  width: 80px;
+  font-size: 14px;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > span {
+  display: block;
+  width: auto;
+}
+
+.zte-theme-panel > .theme-options > .theme-option > select.form-control {
+  display: inline;
+  width: 110px !important;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul {
+  list-style:none;
+  padding: 0;
+  display: block;
+  margin-bottom: 1px !important;
+  margin-top: 10px;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li {
+  width:24px;
+  height:24px;
+  margin:4 4px;
+  cursor:pointer;
+  list-style:none;
+  float: left;
+  border:solid 1px #707070;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child {
+  margin-left: 4;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover,
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current {
+  border:solid 2px #ebebeb;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black {
+  background:#333438;
+}
+.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight {
+  background:#3366cc;
+}
+.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight2 {
+  background:#1178ee;
+}
+.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight3 {
+  background:#067ead;
+}
+.zte-theme-panel> .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight4 {
+  background:#333333;
+}
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-zteblue {
+  background:#1b8fd3;
+}
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey {
+  background:#6d6d6d;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue {
+  background:#124f94;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-brown {
+  background:#623f18;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-purple {
+  background:#701584;
+}
+
+.zte-theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-white {
+  background:#fff;
+}
+.header.navbar .navbar-nav {
+  min-width: 210px;
+}
+.header.navbar .navbar-toggle {
+  margin: 8px 0px 4px 6px;
+  padding: 5px 0px 6px 6px;
+}
+
+.nav-tabs li a span.remove{
+	color: #f00;
+	margin-left: 10px;	
+	cursor:hand;
+}
+.nav-tabs li a span.tabdropremove{
+	color: #f00;
+	margin-right: 10px;
+	float:right;
+	cursor:hand;
+}
+@media (min-width: 768px){
+	.navbar-collapse.collapse.hideSideMenuForMainPage {
+	  display: none !important;
+	}
+}
+#f_hormenu li.mega-menu-dropdown{
+	margin-left:30px;
+}
+.page-sidebar .sidebar-toggler{
+margin-left:190px;
+margin-bottom:5px;
+}
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected{
+margin-bottom:-5px;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css b/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css
new file mode 100644
index 00000000..78e67838
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/login-apk.css
@@ -0,0 +1,183 @@
+/**
+ * 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.
+ */
+/***
+Login page
+***/
+
+/* logo page */
+.login {
+  background-color: #666 !important;
+}
+
+.login .logo {
+  margin: 0 auto;   
+  margin-top:60px;
+  padding: 15px;
+  text-align: center;
+}  
+
+
+.login .content {
+  background: url(../../../framework/img/bg-white-lock.png) repeat;
+  width: 360px;
+  margin: 0 auto; 
+  margin-bottom: 0px;
+  padding: 30px;  
+  padding-top: 20px;  
+  padding-bottom: 15px;  
+}
+
+.login .content h3 {
+  color: #eee;
+}
+.login .content h4  {
+  color: #eee;
+}
+
+.login .content p,
+.login .content label {
+  color: #fff;
+}
+
+.login .content .login-form,
+.login .content .forget-form {
+    padding: 0px;
+    margin: 0px;
+}
+
+.login .content .form-control {
+  background-color: #fff;
+}
+
+.login .content .forget-form {
+  display: none;
+}
+
+.login .content .register-form {
+  display: none;
+}
+
+.login .content .form-title {
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+
+.login .content .form-actions {
+  background-color: transparent;
+  clear: both;
+  border: 0px;
+  padding: 0px 30px 25px 30px;
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+.login .content .form-actions .checkbox {
+  margin-left: 20px;
+  padding-left: 0;
+}
+
+.login .content .forget-form .form-actions {
+  border: 0;
+  margin-bottom: 0;
+  padding-bottom: 20px;
+}  
+
+.login .content .register-form .form-actions {
+  border: 0;
+  margin-bottom: 0;
+  padding-bottom: 0px;
+}
+
+.login .content .form-actions .checkbox {
+  margin-top: 8px;
+  display: inline-block;
+}
+
+.login .content .form-actions .btn {
+  margin-top: 1px;
+}
+
+.login .content .forget-password {
+  margin-top: 25px;
+}
+
+.login .content .create-account {
+  border-top: 1px dotted #eee;
+  padding-top: 10px;
+  margin-top: 15px;
+}
+
+.login .content .create-account a {
+  display: inline-block;
+  margin-top: 5px;
+}
+
+/* select2 dropdowns */
+.login .content .select2-container i {
+  display: inline-block;
+  position: relative;
+  color: #ccc;
+  z-index: 1;
+  top:1px;
+  margin: 4px 4px 0px 3px; 
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  text-align: center; 
+}
+
+.login .content .has-error .select2-container i {
+  color: #b94a48;
+}
+
+.login .content .select2-container a span {
+  font-size: 13px;
+}
+
+.login .content .select2-container a span img {
+  margin-left: 4px;
+}
+
+/* footer copyright */
+.login .copyright {
+  text-align: center;
+  margin: 0 auto; 
+  padding: 10px;
+  color: #eee;
+  font-size: 13px;
+}
+
+@media (max-width: 480px) {
+  /***
+  Login page
+  ***/
+  .login .logo {
+    margin-top:10px;
+  }
+
+  .login .content {
+    padding: 30px; 
+    width: 222px;
+  }
+
+  .login .content h3 {
+    font-size: 22px;
+  }
+
+  .login .checkbox {
+    font-size: 13px;
+  }
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/login.css b/openo-portal/portal-common/src/main/webapp/common/css/login.css
new file mode 100644
index 00000000..1ec3e348
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/login.css
@@ -0,0 +1,201 @@
+/**
+ * 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.
+ */
+/***
+Login page
+***/
+
+/* logo page */
+.login {
+  background-color: #666 !important;
+}
+
+.login .logo {
+  margin: 0 auto;   
+  margin-top:60px;
+  padding: 15px;
+  text-align: center;
+}  
+
+
+.login .content {
+  background: url(../img/bg-white-lock.png) repeat;
+  width: 360px;
+  margin: 0 auto; 
+  margin-bottom: 0px;
+  padding: 30px;  
+  padding-top: 20px;  
+  padding-bottom: 15px;  
+  border-radius:5px;
+  -webkit-box-shadow: 2px 3px 3px #717171;   
+  -moz-box-shadow: 2px 3px 3px #717171;   
+  box-shadow: -1px 1px 1px rgba(255,255,255,0.6) inset,-3px 3px 5px rgba(0,0,0,0.2);
+}
+
+.login .content h3 {
+  color: #474747;
+  letter-spacing:5px;
+  font-size:20px ;
+  font-family: 'Microsoft Yahei', sans-serif;
+  text-shadow:-1px 1px rgba(221, 221, 221, 1);
+}
+.login .content h4  {
+  color: #eee;
+}
+
+.login .content p,
+.login .content label {
+  color: #4b4b4b;
+}
+
+.login .content .login-form,
+.login .content .forget-form {
+    padding: 0px;
+    margin: 0px;
+}
+
+.login .content .form-control {
+  background-color: #fff;
+  border-radius:15px;
+}
+
+.login .content .forget-form {
+  display: none;
+}
+
+.login .content .register-form {
+  display: none;
+}
+
+.login .content .form-title {
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center; 
+}
+
+.login .content .form-actions {
+  background-color: transparent;
+  clear: both;
+  border: 0px;
+  padding: 0px 30px 25px 30px;
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+.login .content .form-actions .checkbox {
+  margin-left: 20px;
+  padding-left: 0;
+}
+
+.login .content .forget-form .form-actions {
+  border: 0;
+  margin-bottom: 0;
+  padding-bottom: 20px;
+}  
+
+.login .content .register-form .form-actions {
+  border: 0;
+  margin-bottom: 0;
+  padding-bottom: 0px;
+}
+
+.login .content .form-actions .checkbox {
+  margin-top: 8px;
+  display: inline-block;
+}
+
+.login .content .form-actions .btn {
+  margin-top: 1px;
+  border-radius:20px;
+}
+
+.login .content .forget-password {
+  margin-top: 25px;
+}
+
+.login .content .create-account {
+  border-top: 1px dotted #eee;
+  padding-top: 10px;
+  margin-top: 15px;
+}
+
+.login .content .create-account a {
+  display: inline-block;
+  margin-top: 5px;
+}
+
+/* select2 dropdowns */
+.login .content .select2-container i {
+  display: inline-block;
+  position: relative;
+  color: #ccc;
+  z-index: 1;
+  top:1px;
+  margin: 4px 4px 0px 3px; 
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  text-align: center; 
+}
+
+.login .content .has-error .select2-container i {
+  color: #b94a48;
+}
+
+.login .content .select2-container a span {
+  font-size: 13px;
+}
+
+.login .content .select2-container a span img {
+  margin-left: 4px;
+}
+.form-control:focus{
+	border:1px solid #5ca3b7 !important;
+	box-shadow:0px 0px 2px #2aabec  !important;
+}
+/* footer copyright */
+.login .copyright {
+  text-align: center;
+  margin: 0 auto; 
+  padding: 10px;
+  color: #eee;
+  font-size: 13px;
+}
+
+@media (max-width: 480px) {
+  /***
+  Login page
+  ***/
+  .login .logo {
+    margin-top:10px;
+  }
+
+  .login .content {
+    padding: 30px; 
+    width: 222px;
+  }
+
+  .login .content h3 {
+    font-size: 22px;
+  }
+
+  .login .checkbox {
+    font-size: 13px;
+  }
+}
+
+.descLabel{
+	width:320px;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css b/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css
new file mode 100644
index 00000000..d072f498
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/more-operation.css
@@ -0,0 +1,167 @@
+/**
+ * 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.
+ */
+
+a {
+    text-decoration: none !important;
+}
+
+.box{
+height:95px ;
+color:#333;
+text-align:right;
+padding-bottom:20px;
+font-size:14px;
+text-align:center;
+}
+
+.row  a{
+font-weight:normal;
+font-size:14px;
+
+}
+
+.alarmTitle{
+padding-left:20px;
+margin-top: 10px;
+}
+@media (min-width: 758px) and (max-width: 997px){
+	.alarmTitle{
+		display:none;
+	}
+	.alarmTypePadding{
+		padding-left: 25%;
+	}
+}
+@media (max-width: 757px){
+	.alarmTitle{
+		display:none;
+	}
+	.alarmTypePadding{
+		padding-left: 20%;
+	}
+}
+
+.titlefont{
+ font-size:16px;
+}
+.label{
+  font-weight: 400;
+}
+
+.row1{
+ margin-right: 0px !important;
+}
+
+.queryLink{
+	font-size: 14px;
+	margin-top: 10px;
+	color:#5b9bd1;
+}
+.carousel-control {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3% !important;
+  opacity: .5;
+  filter: alpha(opacity=50);
+  font-size: 20px;
+  color: #C7C7C7;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0,0,0,.6);
+}
+.carousel-control:hover{
+ color: #969494;
+}
+.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
+  margin-left:0;
+  font-size:25px;
+  margin-top:-12px;
+}
+.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right{
+  right:35px;
+}
+
+.carousel-inner{
+	overflow: visible;
+}
+
+.item {
+    overflow: visible !important;
+    display: block!important;
+  margin-bottom: 0px !important;
+}
+
+.carousel-control.left,.carousel-control.right{
+  background-image:none;
+}
+.upArrowArea{
+ background:#fff;
+ margin-top:-18px;
+ margin-bottom: 15px;
+}
+.boxOperation {		   
+	color:#1178ee;
+	background-repeat: no-repeat;	
+	background-position-y: 100%;
+	height:30px;
+	line-height:30px;	
+	font-size: 14px;
+	font-weight:bold;
+	margin-top:5px;
+	height:35px;
+	padding-left:15px;
+    padding-right:15px;	
+}
+.moreButton:first-child .boxOperation {
+    margin-left: 45px; 
+}
+.moreButton:last-child .boxOperation {
+    margin-right: 45px; 
+}
+.moreButton:first-child .boxOperationOnePage{
+	margin-left: 0px !important;
+}
+
+.moreOpen {
+	height: 40px;	
+}
+.moreClose {
+	height: 0px;
+	display:none !important;	
+}
+.moreButton{		
+    float: left;
+	position: relative;
+	min-height: 1px;	
+	}
+.boxOperation:hover{
+	color:#1069d0;
+}
+.moreButtonSelected{
+	background-color: #fff !important;
+	color:#333;
+	border-top:3px #f3565d solid;
+}
+ul{
+	list-style-type:none;
+}
+li{
+	list-style-type:none;
+}
+.dropdown-menu {
+	z-index: 9991 !important;;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css b/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css
new file mode 100644
index 00000000..3950a836
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/ngict-component.css
@@ -0,0 +1,789 @@
+/**
+ * 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.
+ */
+
+body {
+    color: #333;
+    font-size: 14px;
+    font-family: "Microsoft yahei", Arial !important;
+    background-color: transparent;
+}
+   
+/*fontIcon*/
+
+[class^="ict-"],
+[class*=" ict-"] {
+    padding-right: 3px;
+}
+
+/*common color*/
+
+.blue1 {
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+.blue1:hover {
+    background-color: #487ca9;
+    color: #fff;
+}
+
+.blue2 {
+    background-color: #57b5e3;
+    color: #fff;
+}
+
+.blue2:hover {
+    background-color: #43a1cf;
+    color: #fff;
+}
+
+.red {
+    background-color: #e35b5a;
+    color: #fff;
+}
+
+.red:hover {
+    background-color: #d45150;
+    color: #fff;
+}
+
+.green {
+    background-color: #44b6ae;
+    color: #fff;
+}
+
+.green:hover {
+    background-color: #329d96;
+    color: #fff;
+}
+
+.gold {
+    background-color: #c0af69;
+    color: #fff;
+}
+
+.gold:hover {
+    background-color: #ad9a4d;
+    color: #fff;
+}
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+.grey:hover {
+    background-color: #d8d8d8;
+    color: #333;
+}
+
+.dark_grey {
+    background-color: #333;
+    color: #fff;
+}
+
+.dark_grey:hover {
+    background-color: #101010;
+    color: #fff;
+}
+
+.white {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    color: #333;
+}
+
+.white:hover {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+/***
+Responsive & Scrollable Tables
+***/
+
+.table-scrollable {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border: 1px solid #dddddd;
+}
+
+.table-scrollable > .table {
+    width: 100% !important;
+    margin: 0 !important;
+    margin-bottom: 0;
+    background-color: #fff;
+}
+
+.table-scrollable > .table > thead > tr > th,
+.table-scrollable > .table > tbody > tr > th,
+.table-scrollable > .table > tfoot > tr > th,
+.table-scrollable > .table > thead > tr > td,
+.table-scrollable > .table > tbody > tr > td,
+.table-scrollable > .table > tfoot > tr > td {
+    white-space: nowrap;
+}
+
+.table-scrollable > .table-bordered {
+    border: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr > th:first-child,
+.table-scrollable > .table-bordered > tbody > tr > th:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:first-child,
+.table-scrollable > .table-bordered > thead > tr > td:first-child,
+.table-scrollable > .table-bordered > tbody > tr > td:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:first-child {
+    border-left: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr > th:last-child,
+.table-scrollable > .table-bordered > tbody > tr > th:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:last-child,
+.table-scrollable > .table-bordered > thead > tr > td:last-child,
+.table-scrollable > .table-bordered > tbody > tr > td:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:last-child {
+    border-right: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr:last-child > th,
+.table-scrollable > .table-bordered > tbody > tr:last-child > th,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > th,
+.table-scrollable > .table-bordered > thead > tr:last-child > td,
+.table-scrollable > .table-bordered > tbody > tr:last-child > td,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+}
+
+/*form*/
+
+.form {
+    padding: 0 !important;
+}
+
+.form-group .multiRow {
+    margin-bottom: 15px;
+}
+
+.form-group,
+.form-group .btn {
+    font-size: 12px;
+}
+
+.form-body {
+    padding: 10px;
+}
+
+.form-actions {
+    padding-top: 20px 
+}
+
+.form-actions.nobg {
+    background-color: transparent;
+}
+
+.form-actions.top {
+    margin-top: 0;
+    margin-bottom: 20px;
+    border-top: 0;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+/*.form-actions.fluid {
+  padding: 20px 0;
+}*/
+
+.form-actions .btnGroup {
+    padding-left: 0;
+}
+
+.form-actions.fluid > [class^="col-"] {
+    padding-left: 13px;
+}
+
+.form-actions:before,
+.form-actions:after {
+    display: table;
+    line-height: 0;
+    content: "";
+}
+
+.form-actions:after {
+    clear: both;
+}
+
+.form-section {
+    margin: 30px 0px 25px 0px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #eee;
+}
+
+.form .form-section:first-child {
+    margin-top: 5px;
+}
+
+.help-inline {
+    font-size: 13px;
+    color: #737373;
+    display: inline-block;
+    padding: 5px;
+}
+
+.submBtn {
+    text-align: center;
+}
+.subm-iconMargin {
+margin-left:-40px;
+}
+.subm-margin {
+margin-left:-40px;
+}
+
+/* left, right aligned form actions */
+
+.form-actions.right {
+    padding-left: 0;
+    padding-right: 10px;
+    text-align: right;
+}
+
+.form-actions.left {
+    padding-left: 10px;
+    padding-right: 0;
+    text-align: left;
+}
+
+/* Checkbox */
+
+.form-group .checkbox {
+    padding-left: 0;
+}
+
+.form-title {
+    padding: 8px;
+    margin-bottom: 25px;
+    border-left: 2px solid #5b9bd1;
+    color: #1A78CA;
+    font-size: 16px;
+}
+
+.checkbox-list > label {
+    display: block;
+}
+
+.checkbox-list > label.checkbox-inline {
+    display: inline-block;
+}
+
+.checkbox-list > label.checkbox-inline:first-child {
+    padding-left: 0;
+}
+
+/* Radios */
+input[type="radio"]{
+	cursor:pointer
+}
+.radio-list > label {
+    display: block;
+}
+
+.radio-list > label.radio-inline {
+    display: inline-block;
+}
+
+.radio-list > label.radio-inline:first-child {
+    padding-left: 0;
+}
+
+.form-horizontal .radio-list .radio {
+    padding-top: 1px;
+}
+
+.form-horizontal .radio-list > label {
+    margin-bottom: 0;
+}
+
+.form-horizontal .radio > span {
+    margin-top: 2px;
+}
+
+.help-block {
+    margin-top: 5px;
+    margin-bottom: 5px;
+	color: #a94442 !important;
+}
+
+.form-inline input {
+    margin-bottom: 0px !important;
+}
+.form-horizontal .control-label{
+    padding-top:4px;
+	text-align:right;
+}
+
+.form-control-static {
+    font-size: 14px;
+    padding-top: 7px;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+/*TAB*/
+
+.nav-tabs {
+    border: 0;
+    font-weight: bold;
+}
+
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+    border: 0;
+    border-top: 3px solid #F3565D;
+}
+
+.nav-tabs > li > a {
+    border-radius: 0;
+    font-weight: bold;
+}
+
+.nav-tabs > li > a:hover {
+    background-color: #f1f3fa;
+    border: 1Px solid #f1f3fa;
+}
+
+/*button*/
+
+.btn {
+    min-width: 80px;
+    letter-spacing: 1px;
+}
+
+.btnGroup .btn {
+    margin-right: 15px;
+}
+
+.pagination-panel .btn {
+    min-width: 4px;
+}
+
+.btn.dropdown-toggle,
+.btn-group .btn.dropdown-toggle,
+.btn:hover,
+.btn:disabled,
+.btn[disabled],
+.btn:focus,
+.btn:active,
+.btn.active {
+    outline: none !important;
+    background-image: none !important;
+    filter: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    text-shadow: none;
+}
+.btn-xs:hover{
+text-decoration:none ;
+}
+/*radius*/
+
+.radius_l {
+    border-radius: 20px;
+}
+
+.radius_m {
+    border-radius: 8px;
+}
+
+.radius_s {
+    border-radius: 3px;
+}
+
+/*Progress Bars*/
+
+.progress {
+    border: 0;
+    background-image: none !important;
+    filter: none !important;
+    -webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    box-shadow: none !important;
+}
+
+.form-wizard .steps > li.active > a.step .number {
+    background-color: #45B6AF
+}
+
+.progress > .progress-bar-success {
+    background-color: #45B6AF
+}
+
+/*label*/
+
+.label,
+label {
+    font-weight: 400;
+    /*margin-bottom:15px;*/
+}
+
+/*表单中的组合*/
+
+.input-group-btn-vertical.fa {
+    font-size: 12px;
+}
+
+.spinner {
+    width: 60px;
+    margin-left: 10px;
+    margin-right: 30px;
+}
+
+.spinner input {
+    text-align: right;
+}
+
+.input-group-btn-vertical {
+    position: relative;
+    white-space: nowrap;
+    width: 1%;
+    vertical-align: middle;
+    display: table-cell;
+}
+
+.input-group-btn-vertical > .btn {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+    padding: 6px;
+    margin-left: -1px;
+    position: relative;
+    border-radius: 0;
+}
+
+.input-group-btn-vertical > .btn {
+    min-width: 20px;
+}
+
+.input-group-btn-vertical > .btn:first-child {
+    border-top-right-radius: 4px;
+}
+
+.input-group-btn-vertical > .btn:last-child {
+    margin-top: -2px;
+    border-bottom-right-radius: 4px;
+}
+
+.input-group-btn-vertical i {
+    position: absolute;
+    top: -2px;
+    left: 5px;
+}
+
+.input-group .form-control {
+    height: 26px !important;
+}
+
+/*separator & title*/
+
+.separator-line {
+    height: 1px;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+    margin-bottom: 15px;
+    margin-top: 6px;
+    opacity: 0.6;
+}
+
+.separator {
+    opacity: 0.7;
+}
+
+.separator:hover {
+    opacity: 1;
+}
+
+.titlefont {
+    font-size: 16px;
+	margin-top:15px;
+}
+
+/*link*/
+
+a {
+    color: #428bca;
+    text-decoration: none ;
+	cursor:pointer;
+}
+a:hover{
+    text-decoration: underline;
+}
+/*html滑块组件*/
+
+input[type="range"] {
+    margin-top: 2px;
+    background-color: #f0f3f9;
+    border: 1px solid #ccd6e8;
+    border-radius: 15px;
+    width: 400px;
+    -webkit-appearance: none;
+    height: 15px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    cursor: pointer;
+    top: -5px;
+    height: 28px;
+    width: 15px;
+    transform: translateY(-4px);
+    background: none repeat scroll 0 0 #f0f3f9;
+    background-color: #9cc2cb;
+    border-radius: 20px;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+/*ztree*/
+
+.ztree * {
+    font-family: "microsoft yahei";
+    font-size: 12px;
+}
+
+.ztree {
+    padding: 15px 30px 0 5px;
+}
+
+.ztree li a.curSelectedNode {
+    height: 28px;
+}
+
+.ztree li span {
+    line-height: 16px;
+    margin-right: 2px;
+    margin-left: 6px
+}
+
+.ztree li span.button.chk {
+    width: 13px;
+    height: 13px;
+    margin-left: 10px;
+    cursor: auto
+}
+
+.ztree li span.button.add {
+    margin-left: 2px;
+    /* margin-right: -1px; */
+
+    margin-right: 4px;
+    background-position: -144px 0;
+    vertical-align: top;
+    *vertical-align: middle;
+    float: right;
+}
+
+.ztree li span.button.edit {
+    margin-right: 4px;
+    background-position: -110px -48px;
+    vertical-align: top;
+    *vertical-align: middle;
+    float: right;
+}
+
+.ztree li span.button.remove {
+    margin-right: 4px;
+    background-position: -110px -64px;
+    vertical-align: top;
+    *vertical-align: middle;
+    float: right;
+}
+
+.ztree-select .ztree li a {
+    border: 1px solid #fff !important;
+}
+
+/*table*/
+
+table,
+.dataTables_length,
+.dataTables_info,
+.dataTables_paginate {
+    font-size: 12px;
+}
+
+table .heading {
+    font-size: 14px;
+    background: #fff !important;
+}
+
+table.dataTable tbody th,
+table.dataTable tbody td {
+    padding: 8px 10px 4px 10px !important;
+}
+
+table tr:nth-of-type(odd) {
+    background: #f9f9f9;
+}
+
+table tr:nth-of-type(even) {
+    background: #fff;
+}
+
+table td:hover {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #d0d0d0;
+    border-top: 1px solid #d0d0d0;
+}
+
+table tr td label {
+    cursor: pointer;
+}
+
+.table-btn span {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.table-bordered>thead>tr>th, .table-bordered>thead>tr>td{
+border-bottom-width:1px;
+}
+/*select-box with icon*/
+
+.iconselect-box .col-xs-1 {
+    width: 15px;
+    padding: 110px 0 0 0;
+}
+
+.iconPosition > div {
+    margin: 20px 0px 0px 0px;
+}
+
+/*-------------C3.css-------------*/
+.c3 path, .c3 line {
+    stroke: #008acd;
+}
+
+.c3-line {
+    stroke-width: 3px;
+}
+
+.c3-tooltip {
+    width: auto;
+}
+
+.c3-tooltip td {
+    color: #000;
+}
+
+.c3-axis.c3-axis-y {
+    stroke-width: 1px;
+}
+
+.c3-axis.c3-axis-x {
+    stroke-width: 1px;
+}
+
+/*checkbox & radio*/
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/checkbox-init.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+	margin-bottom:5px;
+	margin-right:5px;
+}
+
+input[type="checkbox"]:checked {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/checkbox-checked.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+}
+
+input[type="checkbox"]:focus,
+input[type="checkbox"]:hover {
+    outline: none;
+}
+
+input[type="checkbox"][disabled] {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/checkbox-disabled.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+	margin-bottom:5px;
+	margin-right:5px;
+}
+
+input[type="checkbox"][disabled]:checked {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/checkbox-checked-disabled.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+}
+
+input[type="radio"] {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/radio-init.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+	margin-bottom:5px;
+	margin-right:5px;
+}
+
+input[type="radio"]:checked {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/radio-checked.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+}
+
+input[type="radio"]:focus,
+input[type="radio"]:hover {
+    outline: none;
+}
+
+input[type="radio"][disabled] {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/radio-disabled.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+	margin-bottom:5px;
+	margin-right:5px;
+}
+
+input[type="radio"][disabled]:checked {
+    -webkit-appearance: none;
+    background: #fff url(../img/checkbox-radio/radio-checked-disabled.png);
+    height: 18px;
+    vertical-align: middle;
+    width: 18px;
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/plugins.css b/openo-portal/portal-common/src/main/webapp/common/css/plugins.css
new file mode 100644
index 00000000..6fd6fb4f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/plugins.css
@@ -0,0 +1,1561 @@
+/**
+ * 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.
+ */
+/**************************
+ PLUGIN CSS CUSTOMIZATIONS 
+**************************/
+
+/***
+Calendar with full calendar
+***/
+.external-event {
+  display: inline-block ;
+  cursor:move;
+  margin-bottom: 5px ;  
+  margin-left: 5px ;
+}
+
+.portlet .event-form-title {
+  font-size: 14px;
+  margin-top: 4px;
+  font-weight: 400;
+  margin-bottom: 10px;
+}
+
+.portlet.calendar .fc-button {
+  -webkit-box-shadow: none ;
+     -moz-box-shadow: none ;
+          box-shadow: none ;
+  text-shadow: none;
+  border: 0 ;
+  padding: 6px 8px 30px 8px ;
+  margin-left:2px;  
+  border-top-style: none;
+  border-bottom-style: none;
+  border-right-style: solid;
+  border-left-style: solid;
+  border-color: #ddd;
+  background: transparent;
+  color: #fff;
+  top: -46px;
+}
+
+.portlet.calendar .fc-header {
+  margin-bottom:-21px;
+}
+
+.portlet.calendar .fc-button-prev {
+  padding-right: 10px;
+  padding-left: 8px;
+}
+
+.portlet.calendar .fc-button-next {
+  padding-right: 8px;
+  padding-left: 10px;
+}
+
+.portlet.calendar .fc-button.fc-state-active,
+.portlet.calendar .fc-button.fc-state-hover {
+  color: #666 ;
+  background-color: #F9F9F9 ;
+}
+
+.portlet.calendar .fc-button.fc-state-disabled {
+  color: #ddd ;
+}
+
+.portlet.calendar .fc-text-arrow {
+  font-size: 22px;
+  font-family: "Courier New", Courier, monospace;
+  vertical-align: baseline; 
+}
+
+/* begin: event element */
+.portlet.calendar .fc-event {
+  border: 0px;
+  background-color: #69a4e0;
+  color: #fff;
+}
+
+.portlet.calendar .fc-event-inner {
+  border: 0px;
+}
+
+.portlet.calendar .fc-event-time {
+  float: left;
+  text-align: left;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 300;
+}
+
+.portlet.calendar .fc-event-title {
+  text-align: left;
+  float: left;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 300;
+}
+/* end: event element */
+
+.portlet.calendar .fc-header-title h2 {
+  font-size: 14px ;
+  line-height: 20px;
+  font-weight: 400;
+  color: #111;
+}
+
+.portlet.calendar .fc-widget-header {
+  background-image: none ;
+  filter:none;
+  background-color: #eee ;
+  text-transform: uppercase;
+  font-weight: 300;
+}
+
+.portlet.calendar .mobile .fc-button {
+  margin-left: 2px ;
+}
+
+.portlet.calendar .mobile .fc-button {
+    padding: 0px 6px 20px 6px ;
+    margin-left:2px ;
+    border: 0;    
+    background-color: #ddd ;
+      background-image: none;
+      -webkit-box-shadow: none ;
+         -moz-box-shadow: none ;
+              box-shadow: none ;
+      -webkit-border-radius: 0 ;
+         -moz-border-radius: 0 ;
+              border-radius: 0 ;
+      color: #000;
+      text-shadow: none ;
+      text-align: center;
+}
+
+.portlet.calendar .mobile .fc-state-hover, 
+.portlet.calendar .mobile .fc-state-active {
+  background-color: #eee ;
+}
+
+.portlet.calendar .mobile .fc-button-prev {
+  margin-right: 5px;
+  margin-top: -2px;
+}
+
+.portlet.calendar .mobile .fc-button-next {   
+  margin-right: -0px;
+  margin-top: -2px;
+}
+
+.portlet.calendar .mobile .fc-header-space {
+  margin: 0px ;
+  padding: 0px ;
+  width: 0px ;
+}
+
+  .portlet.calendar .mobile .fc-state-disabled {
+      color: #bbb ;
+  }
+
+  .portlet.calendar .mobile .fc-header-left {
+    position: absolute;
+    z-index: 10;
+  }
+    
+  .portlet.calendar .mobile .fc-header-right {
+    position: absolute;
+     z-index: 9;
+  }
+
+  .portlet.calendar .mobile .fc-header-left .fc-button { 
+    top: -2px ;
+  }
+
+  .portlet.calendar .mobile .fc-header-right {
+    position: relative;
+    right:0;
+  }
+
+  .portlet.calendar .mobile .fc-header-right .fc-button { 
+    top: 35px ;
+  }
+
+  .portlet.calendar .mobile .fc-content {
+    margin-top: 53px;
+  }
+
+
+/***
+Form wizard
+***/
+
+.form-wizard .progress {
+  margin-bottom: 30px;
+}
+
+.form-wizard .steps {
+  //padding: 10px 0;
+  //margin-bottom: 15px;
+}
+
+.form-wizard .steps {  
+  background-color: #fff ;
+  background-image: none ;
+  filter:none ;
+  border: 0px;
+  box-shadow: none ;
+}
+
+.form-wizard .steps li a {
+  background-color: #fff ;
+  background-image: none ;
+  filter:none;
+  border: 0px;
+  box-shadow: none ;
+}
+
+.form-wizard .steps li a:hover {
+  background: none;
+}
+
+.form-wizard .step:hover {
+  text-decoration: none;
+}
+
+.form-wizard .step .number {
+  background-color: #eee;
+  display: inline-block;
+  text-align: center !important;
+  font-size: 16px;
+  font-weight: 300;
+  padding: 11px 15px 13px 15px;
+  margin-right: 10px;
+  height: 45px;
+  width: 45px;
+  -webkit-border-radius: 50% !important;
+     -moz-border-radius: 50% !important;
+          border-radius: 50% !important;
+}
+
+.form-wizard .step .desc {
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 300;
+}
+ 
+.form-wizard .active .step .number {
+  background-color: #35aa47;
+  color: #fff;
+}
+
+.form-wizard .active .step .desc {
+  color: #333;
+  font-weight: 400;
+}
+
+.form-wizard .step i {
+  display: none;
+}
+
+.form-wizard .done .step .number {
+  background-color: #f2ae43;
+  color: #fff;
+}
+
+.form-wizard .done .step .desc {
+  font-weight: 400;
+}
+
+.form-wizard .done .step i {
+  font-size: 12px;
+  font-weight: normal;
+  color: #999;
+  display: inline-block;
+}
+
+
+@media (min-width: 600px) and (max-width: 1280px) { 
+  .form-wizard .step .desc {
+    margin-top: 10px;
+    display: block;
+  }
+} 
+
+@media (max-width: 600px) { 
+  .form-wizard .steps > li > a {
+    text-align: left;
+  }
+} 
+
+@media (min-width: 600px){
+  .nav-justified>li{
+      display:table-cell;
+	  width:1%;
+  }
+}
+
+/***
+Google Maps
+***/
+.gmaps {
+  height: 300px;
+  width: 100%;
+}
+
+/* important!  bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
+.gmaps img {
+  max-width: none; 
+}
+
+#gmap_static div{
+  background-repeat: no-repeat ;
+  background-position: 50% 50% ;
+  height:100%;
+  display:block;
+  height: 300px;
+}
+
+#gmap_routes_instructions {
+  margin-top: 10px;
+  margin-bottom: 0px;
+}
+
+/***
+SlimScrollBar plugins css changes
+***/
+.scroller {
+  padding: 0px ;
+  margin: 0px ;
+  padding-right: 12px ;
+  overflow: hidden;
+}
+
+.scroller-footer {
+  margin-top: 10px;
+}
+
+.scroller-footer:after,
+.scroller-footer:before {
+  content: "";
+  display: table;
+  line-height: 0;
+}
+
+.scroller-footer:after {
+  clear: both;
+}
+
+.portlet-body .slimScrollBar {
+  margin-right: 0px ;
+}
+
+/***
+jqvmap changes
+***/
+.jqvmap-zoomin {
+  height: 16px;
+  width: 16px;
+  background-color: #666 ;
+}
+
+.jqvmap-zoomout {
+  height: 16px;
+  width: 16px;
+ background-color: #666 ; 
+}
+
+.vmaps {
+  position: relative; 
+  overflow: hidden;
+  height: 300px;
+}
+
+
+/***
+Error state for WYSIWYG Editors
+***/
+.has-error .md-editor,
+.has-error .wysihtml5-sandbox, 
+.has-error .cke {
+  border: 1px solid #B94A48 !important;
+}
+
+.has-success .md-editor,
+.has-success .wysihtml5-sandbox, 
+.has-success .cke {
+  border: 1px solid #468847 !important;
+}
+
+/***
+Select2 plugin css changes
+***/
+
+/* enable form validation classes for select2 dropdowns */
+.has-error .select2-container .select2-choice {
+  border-color: #B94A48;
+}
+
+.has-error .select2-container.select2-dropdown-open .select2-choice {
+  border-color: #e5e5e5; 
+}
+
+.has-error .select2-container.select2-dropdown-open .select2-choice > span {
+  color: #999999;
+}
+
+.has-success .select2-container .select2-choice {
+  border-color: #468847;
+}
+
+.has-success .select2-container.select2-dropdown-open .select2-choice {
+  border-color: #e5e5e5; 
+}
+
+.has-success .select2-container.select2-dropdown-open .select2-choice > span {
+  color: #999999;
+}
+
+
+/***
+Jansy File Input plugin css changes
+***/
+.fileinput {
+  margin-bottom: 0;
+}
+
+
+/***
+WYSIWYG
+***/
+.wysihtml5-toolbar li {
+  margin: 0px;
+  height: 29px;
+}
+
+.wysihtml5-toolbar li .dropdown-menu {
+  margin-top: 5px;
+}
+
+/***
+CKEditor css changes
+***/
+.cke_bottom, 
+.cke_inner, 
+.cke_top, 
+.cke_reset, 
+.cke_dialog_title,
+.cke_dialog_footer,
+.cke_dialog {
+  background-image: none !important;
+  filter:none ; 
+  border-top: 0 ;
+  border-bottom: 0 ;
+   -webkit-box-shadow: none !important;
+      -moz-box-shadow: none !important;
+           box-shadow: none !important;
+  text-shadow:none ;
+}
+
+.cke_dialog_ui_button,
+.cke_dialog_tab {
+  background-image: none !important;
+  filter:none ;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  text-shadow:none !important;
+}
+
+.cke_dialog_ui_button:hover,
+.cke_dialog_tab:hover {
+  text-decoration: none;
+  text-shadow:none ;
+}
+
+.cke_dialog_ui_input_text {
+  background-image: none !important;
+  filter:none ;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.cke_combo_button, 
+.cke_button, 
+.cke_toolbar, 
+.cke_toolgroup {
+  background-image: none !important;
+  filter:none !important;
+  border: 0 ;
+   -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.cke_button, 
+.cke_combo_button,
+.cke_panel_grouptitle,
+.cke_hc.cke_panel_listItem a {  
+  background-image: none !important;
+  filter:none ;
+  text-shadow:none ;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  -ms-border-radius: 0px !important;
+  -o-border-radius: 0px !important;
+}
+
+.cke_button:hover, 
+.cke_combo_button:hover {  
+  background-color: #ddd;
+}
+
+.cke_toolbar_break {
+  background-image: none !important;
+  filter:none !important;
+  border: 0 ;
+  box-shadow: none !important;
+  -webkit-box-shadow : none !important;
+  -moz-box-shadow: none !important;
+  -ms-box-shadow: none !important;
+  -o-box-shadow: none !important;
+}
+
+/***
+Modify tags input plugin css
+***/
+div.tagsinput {
+  min-height: 35px;
+  height: auto !important;
+  margin: 0;
+  padding: 5px 5px 0px 5px;
+  overflow: auto;
+}
+
+div.tagsinput span.tag {
+  background: #aaa ;
+  color: #fff ;
+  border: 0 ;
+  padding: 3px 6px;
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+div.tagsinput input {
+  padding: 3px 6px ; 
+  width: 75px !important;
+}
+
+div.tagsinput span.tag a {
+  color: #fff ;
+}
+
+div.tagsinput .not_valid {
+  color: #fff ;
+  padding: 3px 6px ;
+  background-color: #e02222 ;
+}
+
+/***
+Gritter notification modify
+***/
+
+#gritter-notice-wrapper {
+  right:1px !important;
+}
+
+.gritter-close {
+  left:auto !important;
+  right: 3px !important;
+}
+
+.gritter-title {
+  font-family:  'Open Sans' ;
+  font-size: 18px ;
+  font-weight: 300 ;
+}
+
+/***
+jQuery UI Sliders(new in v1.1.1)
+***/
+.slider {
+  border: 0;
+  padding: 0;
+  display: block;
+  margin: 12px 5px;
+  min-height: 11px; 
+}
+
+.ui-slider-vertical {
+  width: 11px;
+}
+
+.ui-slider-horizontal .ui-slider-handle {
+  top: -3px;
+}
+
+.ui-slider-vertical .ui-slider-handle {
+  left: -3px;
+}
+
+.ui-slider-vertical,
+.ui-slider-handle {
+  filter: none !important;
+  background-image: none !important;
+}
+
+/***
+Dropzone css changes(new in v1.1.1)
+***/
+.dropzone {
+  -webkit-border-radius: 0px ;
+    -moz-border-radius: 0px ;
+         border-radius: 0px ;
+}
+
+
+/***
+Dashboard Charts(new in v1.2.1)
+***/
+.easy-pie-chart,
+.sparkline-chart {
+   text-align: center;
+}
+
+.sparkline-chart {
+  margin-top: 15px;
+  position:relative ;
+}
+
+.easy-pie-chart .number {
+    font-size: 16px;
+    font-weight: 300;
+    width: 85px;
+    margin: 0 auto;
+}
+
+.sparkline-chart .number {  
+    width: 100px;
+    margin: 0 auto;
+    margin-bottom: 10px;
+}
+
+.sparkline-chart .title,
+.easy-pie-chart .title {
+    display: block;
+    text-align: center;
+    color: #333;
+    font-weight: 300;
+    font-size: 16px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.sparkline-chart .title:hover,
+.easy-pie-chart .title:hover {
+  color: #666;
+  text-decoration: none;
+}
+
+.sparkline-chart .title > i,
+.easy-pie-chart .title > i {
+  margin-top: 5px;
+}
+
+/***
+Fancy box fix overlay fix(in v1.2.4)
+***/
+.fancybox-overlay {
+  z-index: 10000 ;
+}
+
+/***
+Datatables Plugin(in v1.3)
+***/
+.dataTable {  
+  width: 100% !important;
+  clear: both;
+  /*margin-top: 5px;*/
+}
+
+.dataTables_filter label {
+  line-height: 32px ;
+}
+
+.dataTable .row-details {  
+  margin-top: 3px;
+  display: inline-block;
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+}
+
+.dataTable .row-details.row-details-close {
+  background: url("../img/datatable-row-openclose.png") no-repeat 0 0;
+}
+
+.dataTable .row-details.row-details-open {  
+  background: url("../img/datatable-row-openclose.png") no-repeat 0 -23px ;
+}
+
+.dataTable .details {
+  background-color: #eee ;
+}
+
+.dataTable .details td,
+.dataTable .details th {
+  padding: 4px;
+  background: none ;
+  border: 0;
+}
+
+.dataTable .details tr:hover td,
+.dataTable .details tr:hover th {
+  background: none ;
+}
+
+.dataTable .details tr:nth-child(odd) td,
+.dataTable .details tr:nth-child(odd) th {
+  background-color: #fff ;
+}
+
+.dataTable .details tr:nth-child(even) td,
+.dataTable .details tr:nth-child(even) th {
+  background-color: #eee ;
+}
+
+.dataTable > thead > tr > th.sorting,
+.dataTable > thead > tr > th.sorting_asc,
+.dataTable > thead > tr > th.sorting_desc {
+   padding-right: 18px;
+}
+
+.dataTable .table-checkbox {
+  width: 8px !important;
+}
+
+@media (max-width: 768px) {  
+  .dataTables_wrapper .dataTables_length .form-control,
+  .dataTables_wrapper .dataTables_filter .form-control {
+    display: inline-block;
+  }
+
+ /* .dataTables_wrapper .dataTables_info {
+    top: 17px;
+  }*/
+
+/*  .dataTables_wrapper .dataTables_paginate {
+    margin-top: -15px;
+  }*/
+}
+
+@media (max-width: 480px) {  
+  .dataTables_wrapper .dataTables_filter .form-control {
+    width: 175px !important;
+  }
+
+  .dataTables_wrapper .dataTables_paginate {
+    float: left;
+    margin-top: 20px;
+  }
+}
+
+.dataTables_processing {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  min-width: 125px;
+  margin-left: 0;
+  padding: 7px;
+  text-align: center;
+  color: #333;
+  font-size: 13px;
+  border: 1px solid #ddd;
+  background-color: #eee;  
+  vertical-align: middle;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+}
+
+.dataTables_processing span {
+  line-height:15px;
+  vertical-align: middle;
+}
+
+.dataTables_empty {
+  text-align: center; 
+}
+
+/***
+Extended Datatable
+***/
+.dataTables_extended_wrapper {
+	position: relative !important;
+	clear: both !important;
+}
+.dataTables_extended_wrapper .seperator {
+  padding: 0 2px;
+}
+
+.dataTables_extended_wrapper .dataTables_paginate,
+.dataTables_extended_wrapper .dataTables_length,
+.dataTables_extended_wrapper .dataTables_info {
+  display: inline-block;
+  float: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  position: static !important;
+  font-size: 13px;
+}
+
+@media (max-width: 480px) { 
+
+  .dataTables_extended_wrapper .dataTables_paginate,
+  .dataTables_extended_wrapper .dataTables_length,
+  .dataTables_extended_wrapper .dataTables_info {
+    display: block;
+    margin-bottom: 10px !important;
+  }
+
+  .dataTables_extended_wrapper .seperator {
+    display: none;
+  }
+}
+
+.dataTables_extended_wrapper .dataTables_length label {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 13px;
+  float: none !important;
+  display: inline-block !important;
+}
+
+.table-container .table-actions-wrapper {
+  display: none;
+}
+
+/***
+Password Strength(in v1.4)
+***/
+.password-strength .password-verdict {
+  display: inline-block;
+  margin-top: 6px;
+  margin-left: 5px;
+}
+
+.password-strength .progress {
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+.password-strength .progress-bar {
+  padding: 2px;
+}
+
+/***
+Uniform disabled checkbox, radio button fix(in v1.4)
+***/
+
+.table .uniform-inline {
+  padding: 0;
+  margin: 0;
+}
+
+.checker {
+  margin-top: -2px !important;
+  margin-right: 2px !important;
+  display:inline;
+}
+
+.checker input,
+.radio input {
+  outline: none !important;
+}
+
+div.checker.disabled span, 
+div.checker.disabled.active span{
+    background-position: -152px -260px; 
+}
+
+div.checker.disabled:hover,
+div.radio.disabled:hover {
+    cursor: not-allowed;  
+}
+
+div.radio,
+div.checker {
+ margin-right: 0;
+ margin-left: 3px;
+}
+
+/***
+jQuery Sparkline
+***/
+.jqstooltip {
+  width: auto !important;
+  height: auto !important;
+}
+
+
+/***
+jQuery Multi Select
+***/
+
+.ms-container .ms-list {
+  border: 1px solid #e5e5e5;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+
+}
+
+.ms-container .ms-optgroup-label{
+  font-size: 14px;
+}
+
+.ms-container .ms-selectable li.ms-elem-selectable,
+.ms-container .ms-selection li.ms-elem-selection{
+  font-size: 13px;
+}
+
+.ms-container .ms-list.ms-focus {
+  border-color: #999999;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.ms-container .ms-selectable li.ms-hover,
+.ms-container .ms-selection li.ms-hover{
+  color: #333;
+  background-color: #eee;
+}
+
+.ms-container .form-control {
+  margin-bottom: 5px;
+}
+
+/***
+Bootstrap Colorpicker
+***/
+.input-group.color .input-group-btn i {
+  position: absolute;
+  display: block;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  right: 6px;
+} 
+
+.colorpicker.dropdown-menu {
+  padding: 5px;
+}
+
+/* change z-index when opened in modal */
+.modal-open .colorpicker {
+  z-index: 10055 !important;
+}
+
+/***
+Bootstrap  Datetimepicker
+***/
+
+.datetimepicker table td {
+  font-weight: 300  !important;
+  font-family: 'Open Sans' !important;
+}
+
+.datetimepicker table th {
+  font-family: 'Open Sans' !important;
+  font-weight: 400  !important;
+}
+
+.datetimepicker.dropdown-menu {
+  padding: 5px;
+}
+
+.datetimepicker .active {  
+  background-color:#4b8df8 !important;
+  background-image: none !important;
+  filter: none !important;
+}
+
+.datetimepicker .active:hover {
+  background-color: #2678FC !important;
+  background-image: none !important;
+  filter: none !important;
+
+}
+
+/* change z-index when opened in modal */
+.modal-open .datetimepicker {
+  z-index: 10055 !important;
+}
+
+/***
+Bootstrap Time Picker
+***/
+.bootstrap-timepicker-widget table td a  {
+  padding: 4px 0;
+}
+
+.bootstrap-timepicker-widget input,
+.bootstrap-timepicker-widget input:focus {
+  outline: none !important;
+  border: 0;
+}
+
+.modal-open  .bootstrap-timepicker-widget {
+  z-index: 10055 !important;
+}
+
+.bootstrap-timepicker-widget.timepicker-orient-bottom:before,
+.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
+  top: auto;
+}
+
+/***
+Bootstrap Datepicker
+***/
+
+.datepicker.dropdown-menu {
+  padding: 5px;
+}
+
+.datepicker .selected {  
+  background-color:#909090 !important;
+  background-image: none !important;
+  filter: none !important;
+}
+
+.datepicker .active {  
+  background-color:#4b8df8 !important;
+  background-image: none !important;
+  filter: none !important;
+}
+
+.datepicker .active:hover {
+  background-color: #2678FC !important;
+  background-image: none !important;
+  filter: none !important;
+}
+
+.datepicker .input-daterange input {
+  text-align: left;
+}
+
+/* change z-index when opened in modal */
+.modal-open .datepicker {
+  z-index: 10055 !important;
+}
+
+.datepicker table td {
+  font-weight: 300  !important;
+  font-family: 'Open Sans' !important;
+}
+
+.datepicker table th {
+  font-family: 'Open Sans' !important;
+  font-weight: 400  !important;
+}
+
+
+/***
+Clockface
+***/
+
+.modal-open .clockface {
+  z-index: 10055 !important;
+}
+
+.clockface .cell .inner.active,
+.clockface .cell .outer.active {
+  background-color:#4b8df8 !important;
+  background-image: none ;
+  filter:none ;
+}
+
+
+/***
+Bootstrap Daterangepicker
+***/
+
+.modal-open .daterangepicker {
+  z-index: 10055 !important;
+}
+
+.daterangepicker td {
+  text-shadow: none ;
+}
+
+.daterangepicker td.active {
+  background-color: #4b8df8 ;
+  background-image: none ;
+  filter:none ;
+}
+
+.daterangepicker th {
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.daterangepicker .ranges input[type="text"]  {
+  width: 70px !important;
+  font-size: 11px;
+  vertical-align: middle;
+}
+
+.daterangepicker .ranges label {
+  font-weight: 300;
+  display: block;
+}
+
+.daterangepicker .ranges .btn {
+  margin-top: 10px;
+}
+
+.daterangepicker.dropdown-menu {
+  padding: 5px;
+}
+
+.daterangepicker .ranges li {
+  color: #333;
+}
+
+.daterangepicker .ranges li.active, 
+.daterangepicker .ranges li:hover {
+  background: #4b8df8 !important;
+  border: 1px solid #4b8df8 !important;
+  color: #fff;
+}
+
+.daterangepicker .range_inputs input {
+  margin-bottom: 0 !important;
+}
+
+/***
+Bootstrap Editable
+***/
+
+.editable-input table,
+.editable-input table th,
+.editable-input table td,
+.editable-input table tr {
+  border: 0 !important;
+}
+
+.editable-input .combodate select {
+  margin-bottom: 5px;
+}
+
+/***
+FuelUX Spinners
+***/
+
+.spinner-buttons.btn-group-vertical .btn {
+  text-align: center;
+  margin: 0;
+  height: 17px;
+  width: 22px;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0px;
+} 
+
+
+/***
+NoUI Range Sliders
+***/
+.noUi-handle {
+  height: 20px;
+  width: 20px;
+  margin: -3px 0 0 -20px;
+}
+
+.noUi-base {
+  height: 16px;
+}
+
+.noUi-connect {
+  background: #ffb848;
+}
+
+/***
+Toastr Notifications
+***/
+.toast {
+    -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+.toast {
+  background-color: #030303;
+}
+.toast-success {
+  background-color: #51a351;
+}
+.toast-error {
+  background-color: #bd362f;
+}
+.toast-info {
+  background-color: #2f96b4;
+}
+.toast-warning {
+  background-color: #f89406;
+}
+
+.toast .toast-close-button {
+  display: inline-block;
+  margin-top: 0px;
+  margin-right: 0px;
+  text-indent: -100000px;
+  width: 11px;
+  height: 16px;
+  background-repeat: no-repeat !important;
+  background-image: url("../img/portlet-remove-icon-white.png") !important;
+}
+
+.toast-top-center {
+  top: 12px;
+  margin: 0 auto;
+  left: 50%;
+  margin-left: -150px;
+}
+
+.toast-bottom-center {
+  bottom: 12px;
+  margin: 0 auto;
+  left: 50%;
+  margin-left: -150px;
+}
+
+/***
+Google reCaptcha
+***/
+.form-recaptcha-img {
+  margin-bottom: 10px;
+  clear: both;
+  border: 1px solid #e5e5e5;
+  padding: 5px;
+}
+
+iframe[src="about:blank"] {
+  display:none;
+}
+
+/***
+Bootstrap Markdown
+***/
+.md-input {
+  padding: 5px !important;
+  border-bottom: 0 !important;
+}
+
+.md-editor .btn-toolbar {
+  margin-left: 0px;
+}
+
+.md-editor.active {
+  border: 1px solid #999999;
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+/***
+Bootstrap Datepaginator
+***/
+.datepaginator a {
+  font-family: 'Open Sans';
+  font-size: 13px;
+  font-weight: 300;
+}
+
+.datepicker .today {
+  background-image: none !important;
+  filter: none !important;
+}
+
+#dp-calendar {
+  right: 4px !important;
+}
+
+/***
+Font Awesome 4.0 Demo
+***/
+.fa-item {
+  font-size: 14px;
+  padding: 10px 10px 10px 20px;
+}
+
+.fa-item i {
+  font-size: 16px;
+  display: inline-block;
+  width: 20px;
+}
+
+.fa-item:hover {
+  cursor: pointer;
+  background: #eee;  
+}
+
+/***
+Bootstrap Modal
+***/
+/* fix: content shifting to the right on modal open */
+.modal-open.page-overflow .page-container,
+.modal-open.page-overflow .page-container .navbar-fixed-top,
+.modal-open.page-overflow .page-container .navbar-fixed-bottom,
+.modal-open.page-overflow .modal-scrollable {
+  overflow-y: auto !important;
+}
+
+.modal-scrollable {
+  overflow: hidden !important;
+}
+
+
+/***
+jQuery Notific8 Plugin
+***/
+
+.jquery-notific8-message {
+  font-size: 13px;
+}
+
+[class*="jquery-notific8"],
+[class*="jquery-notific8"]:after,
+[class*="jquery-notific8"]:before {
+   -webkit-box-sizing: content-box;
+      -moz-box-sizing: content-box;
+           box-sizing: content-box;
+}
+
+.right .jquery-notific8-close-sticky span,
+.left .jquery-notific8-close-sticky span {
+    font-size: 10px;  
+}
+
+.jquery-notific8-heading {
+  font-weight: 300;
+  font-size: 16px;
+}
+
+/***
+jQuery File Upload
+***/
+
+.blueimp-gallery .close {  
+  background-image: url("../img/portlet-remove-icon-white.png") !important;
+  margin-top: -2px;
+}
+
+.blueimp-gallery .prev,
+.blueimp-gallery .next {
+  border-radius: 23px !important;
+}
+
+/***
+Bootstrap Switch 
+***/
+
+.has-switch {
+  border-color: #e5e5e5;
+}
+
+.has-switch:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+/***
+Jstree
+***/
+
+.jstree-default .jstree-clicked {
+  border: 0;
+  background-color: #e1e1e1;
+  box-shadow:none;
+}
+
+.jstree-default .jstree-hovered {
+  border: 0;
+  background-color: #eee;
+  box-shadow:none;
+}
+
+.jstree-default .jstree-wholerow-clicked,
+.jstree-wholerow .jstree-wholerow-clicked {
+  background: none;
+  border: 0;
+  background-color: #e1e1e1;
+  box-shadow:none;
+}
+
+.jstree-default .jstree-wholerow-hovered,
+.jstree-wholerow .jstree-wholerow-hovered {
+  border: 0;
+  background-color: #eee;
+  box-shadow:none;
+} 
+
+.jstree-icon.icon-lg {
+  margin-top: 1px;
+}
+
+.jstree-open > .jstree-anchor > .fa-folder:before {
+  margin-left: 2px;
+  content: "\f07c"; 
+}
+
+.jstree-default.jstree-rtl .jstree-last {
+  background: transparent;
+  background-repeat: no-repeat;
+}
+
+.vakata-context,
+.vakata-context ul {
+  padding: 0;
+  min-width: 125px;
+  background-color: #ffffff;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+  font-size: 14px;
+  font-family: "Segoe UI",Helvetica, Arial, sans-serif;
+  border: 1px solid #ddd;
+}
+
+.vakata-context li a {
+  padding: 0 10px;
+}
+
+.vakata-context .vakata-context-hover > a,
+.vakata-context li a:hover {
+  background-color: #eee;
+  color: #333;
+  box-shadow: none;
+}
+
+.vakata-context li a span,
+.vakata-context li a ins {
+  display: none;
+}
+
+.vakata-context .vakata-context-separator a, 
+.vakata-context-rtl .vakata-context-separator a {
+  margin: 0;
+}
+
+.jstree-rename-input {
+  background-color: #ffffff !important;
+  border: 1px solid #e5e5e5 !important;
+  outline: none !important;
+  padding: 2px 6px !important;
+  margin-right: -4px !important;
+}
+
+/***
+Bootstrap Select
+***/
+
+.bootstrap-select .btn {
+  border-color: #e5e5e5;
+}
+
+.bootstrap-select.open .btn1 {
+  border-color: #999999;
+}
+
+.bootstrap-select.open.dropup .btn1 {
+  border-color: #999999;
+}
+
+.bootstrap-select .btn:focus {
+    outline: none !important;
+    outline-offset: 0;
+}
+
+.bootstrap-select.btn-group .dropdown-menu {
+  margin-top: 1px;
+}
+
+.bootstrap-select.btn-group .dropdown-menu > li > dt > .text {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-size: 14px;
+}
+
+.bootstrap-select.btn-group .dropdown-menu .text-muted {
+  color: #999 !important;
+}
+
+.bootstrap-select .caret {
+  border: 0;
+  width: auto;
+  height: auto;
+  margin-top: -10px !important;
+}
+
+.bootstrap-select .caret:before {
+    content: "\f107";
+    display: inline-block;
+    border: 0; 
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.bootstrap-select .selected i {
+  color: #aaa;
+}
+
+/***
+Pace - Page Progress
+***/
+
+.pace .pace-progress {
+  z-index: 10000;
+  top: 40px;
+  height: 2px;
+}
+
+.pace .pace-progress-inner {
+  box-shadow: none;
+}
+
+.pace .pace-activity {
+  top: 44px;
+  right: 22px;
+  border-radius: 10px !important;
+}
+
+
+@media (max-width: 480px) { 
+
+  .page-header-fixed .pace .pace-progress {
+    top: 82px;
+  }
+
+  .page-header-fixed .pace .pace-activity {
+    top: 88px;
+    right: 15px;
+  }
+
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/print.css b/openo-portal/portal-common/src/main/webapp/common/css/print.css
new file mode 100644
index 00000000..b2a7d76c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/print.css
@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+body {
+    background-color: #fff !important;
+}
+
+.header {
+	display: none;
+}
+
+.page-sidebar {
+	display: none;
+}
+
+.theme-panel {
+	display: none;
+}
+
+.hidden-print {
+	display: none;
+}
+
+.footer {
+	display: none;
+}
+
+.no-page-break {
+	page-break-after: avoid;
+}
+
+.page-container {
+	margin: 0px !important;
+	padding: 0px !important;
+}
+
+.page-content {
+	min-height: auto !important;
+	padding: 0px 20px 20px !important;
+	margin: 0 !important;
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css b/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css
new file mode 100644
index 00000000..e327a31b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/style-custom.css
@@ -0,0 +1,1510 @@
+/**
+ * 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.
+ */
+/* remove rounds from all elements */
+
+div, 
+input, 
+select, 
+textarea, 
+span, 
+img, 
+table, 
+td, 
+th, 
+p, 
+a, 
+button, 
+ul,
+code,
+pre, 
+li {
+  //-webkit-border-radius: 0 !important;
+     //-moz-border-radius: 0 !important;
+          //border-radius: 0 !important;
+}
+
+/***
+Buttons & Dropdown Buttons
+***/
+
+.btn {
+	border-width: 0;
+	padding: 7px 14px; 	
+  font-size: 14px;  
+	outline: none !important;
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+  //-webkit-border-radius: 0 !important;
+     //-moz-border-radius: 0 !important;
+          //border-radius: 0 !important;
+          text-shadow: none;
+}
+
+/* fix jumping group buttons */
+.btn-group.btn-group-solid .btn + .btn,
+.btn-group.btn-group-solid .btn + .btn-group.btn-group-solid,
+.btn-group.btn-group-solid .btn-group.btn-group-solid + .btn,
+.btn-group.btn-group-solid .btn-group.btn-group-solid + .btn-group.btn-group-solid {
+  margin-left: 0px;
+}
+
+.btn-group-vertical.btn-group-solid > .btn + .btn,
+.btn-group-vertical.btn-group-solid > .btn + .btn-group,
+.btn-group-vertical.btn-group-solid > .btn-group + .btn,
+.btn-group-vertical.btn-group-solid > .btn-group + .btn-group {
+  margin-top: 0px;
+  margin-left: 0;
+}
+
+.btn-default {
+  border-width: 1px;
+  padding: 6px 13px;
+} 
+
+.btn.red-stripe {
+	border-left: 3px solid #d84a38;
+}
+
+.btn.blue-stripe {
+	border-left: 3px solid #4d90fe;
+}
+
+.btn.purple-stripe {
+	border-left: 3px solid #852b99;
+}
+
+.btn.green-stripe {
+	border-left: 3px solid #35aa47;
+}
+
+.btn.yellow-stripe {
+  border-left: 3px solid #ffb848;
+}
+
+.btn.dark-stripe {
+  border-left: 3px solid #555555;
+}
+
+.btn.default {  
+  color: #333333;
+  text-shadow: none;  
+  background-color: #e5e5e5;
+}
+.btn.default:hover, 
+.btn.default:focus, 
+.btn.default:active, 
+.btn.default.active,
+.btn.default[disabled], 
+.btn.default.disabled {    
+  color: #333333;
+  background-color: #d8d8d8 !important;
+  outline: none !important;
+}
+
+/*  Red */
+.btn.red {
+  color: white;  
+  text-shadow: none;	
+  background-color: #d84a38;
+}
+.btn.red:hover, 
+.btn.red:focus, 
+.btn.red:active, 
+.btn.red.active,
+.btn.red[disabled], 
+.btn.red.disabled {    
+  background-color: #bb2413 !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+/*  Blue */
+
+.btn.blue {
+  color: white;  
+  text-shadow: none;	
+  background-color: #4d90fe;
+}
+.btn.blue:hover, 
+.btn.blue:focus, 
+.btn.blue:active,
+.btn.blue.active,
+.btn.blue[disabled],
+.btn.blue.disabled {  
+  background-color: #0362fd !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+.btn-group .btn.blue.dropdown-toggle {
+  background-color: #4d90fe !important;
+}
+.btn-group .btn.blue:hover, 
+.btn-group .btn.blue:focus, 
+.btn-group .btn.blue:active, 
+.btn-group .btn.blue.active, 
+.btn-group .btn.blue.disabled,
+.btn-group .btn.blue[disabled] { 
+  background-color: #0362fd !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+/*  Green */
+.btn.green {
+  color: white;
+  text-shadow: none;	 
+  background-color: #35aa47;
+}
+.btn.green:hover, 
+.btn.green:focus, 
+.btn.green:active, 
+.btn.green.active,
+.btn.green.disabled, 
+.btn.green[disabled]{ 
+  background-color: #1d943b !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+/*  Purple */
+.btn.purple {
+  color: white; 
+  text-shadow: none;	
+  background-color: #852b99;
+}
+.btn.purple:hover, 
+.btn.purple:focus, 
+.btn.purple:active, 
+.btn.purple.active, 
+.btn.purple.disabled,
+.btn.purple[disabled] { 
+  background-color: #6d1b81 !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+.btn-group .btn.purple.dropdown-toggle {
+  background-color: #852b99 !important;
+}
+.btn-group .btn.purple:hover, 
+.btn-group .btn.purple:focus, 
+.btn-group .btn.purple:active, 
+.btn-group .btn.purple.active, 
+.btn-group .btn.purple.disabled,
+.btn-group .btn.purple[disabled] { 
+  background-color: #6d1b81 !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+/*  Yellow */
+.btn.yellow {
+  color: white; 
+  text-shadow: none;	
+  background-color: #ffb848;
+}
+.btn.yellow:hover, 
+.btn.yellow:focus, 
+.btn.yellow:active, 
+.btn.yellow.active, 
+.btn.yellow.disabled,
+.btn.yellow[disabled] { 
+  background-color: #eca22e !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+.btn-group .btn.yellow.dropdown-toggle {
+  background-color: #ffb848 !important;
+}
+.btn-group .btn.yellow:hover, 
+.btn-group .btn.yellow:focus, 
+.btn-group .btn.yellow:active, 
+.btn-group .btn.yellow.active, 
+.btn-group .btn.yellow.disabled,
+.btn-group .btn.yellow[disabled] { 
+  background-color: #eca22e !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+/*  Black */
+.btn.dark {
+  color: white; 
+  text-shadow: none;	
+  background-color: #555555;
+}
+.btn.dark:hover, 
+.btn.dark:focus, 
+.btn.dark:active, 
+.btn.dark.active, 
+.btn.dark.disabled,
+.btn.dark[disabled] { 
+  background-color: #222222 !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+.btn-group .btn.dark.dropdown-toggle {
+  background-color: #555555 !important;
+}
+.btn-group .btn.dark:hover, 
+.btn-group .btn.dark:focus, 
+.btn-group .btn.dark:active, 
+.btn-group .btn.dark.active, 
+.btn-group .btn.dark.disabled,
+.btn-group .btn.dark[disabled] { 
+  background-color: #222222 !important;
+  color: #fff !important;
+  outline: none !important;
+}
+
+.btn-lg {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  vertical-align: middle;
+}
+
+.btn-lg > i {
+  font-size: 18px;
+}
+
+.btn > i {
+  font-size: 14px;
+}
+
+.btn-sm,
+.btn-xs {
+  padding: 4px 10px 5px 10px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.btn-sm > i,
+.btn-xs > i {
+  font-size: 13px;
+} 
+
+.btn-xs {
+  padding: 1px 5px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/***
+Metro icons
+***/
+
+[class^="m-icon-"] {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-top: 3px;
+  line-height: 14px;  
+  vertical-align: top;
+  background-image: url(../img/syncfusion-icons.png);
+  background-position: 0 0;
+  background-repeat: no-repeat; 
+}
+
+[class^="m-icon-big-"] {
+  display: inline-block;
+  width: 30px;
+  height: 30px; 
+  margin: 6px;
+  vertical-align: middle;
+  background-image: url(../img/syncfusion-icons.png);
+  background-position: 0 0px;
+  background-repeat: no-repeat; 
+}
+
+/* large icons */
+.btn.m-icon-big {
+  padding: 9px 16px 8px 16px; 
+}
+
+.btn.m-icon-big.m-icon-only{
+  padding: 9px 8px 8px 0px;
+}
+
+.btn.m-icon-big [class^="m-icon-big-"] {
+  margin: 0 0 0 10px;
+}
+
+.btn.m-icon-ony > i {
+  margin-left: 0px;
+}
+
+/* default icons */
+.btn.m-icon {
+  padding: 7px 14px 7px 14px; 
+}
+
+.btn.m-icon [class^="m-icon-"] {
+  margin: 4px 0 0 5px;
+}
+
+.btn.m-icon.m-icon-only {
+  padding: 7px 10px 7px 6px;
+}
+
+/* white icon */
+.m-icon-white {
+  background-image: url(../img/syncfusion-icons-white.png);
+}
+
+/*  Misc */
+.m-icon-swapright {
+  background-position: -27px -10px;
+}
+.m-icon-swapdown {
+  background-position: -68px -10px;
+}
+.m-icon-swapleft {
+  background-position: -8px -10px;
+}
+.m-icon-swapup {
+  background-position: -46px -10px;
+}
+.m-icon-big-swapright{
+  background-position: -42px -28px;
+}
+.m-icon-big-swapdown{
+  background-position: -115px -28px;
+}
+.m-icon-big-swapleft{
+  background-position: -6px -28px;
+}
+.m-icon-big-swapup{
+  background-position: -78px -28px;
+}
+
+
+/***
+Popover
+ ***/
+.popover {
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);  
+  padding: 0 !important;
+}
+
+.popover .popover-title {
+    -webkit-border-radius: 0 !important;
+     -moz-border-radius: 0 !important;
+          border-radius: 0 !important;
+          margin: 0 !important;
+}
+
+.info .popover .popover-title,
+.popover.info .popover-title,
+.info .popover .popover-content,
+.popover.info .popover-content {
+  color:#27a9e3;
+}
+
+.success .popover .popover-title,
+.popover.success .popover-title,
+.success .popover .popover-content,
+.popover.success .popover-content {
+  color:#468847;
+}
+
+.error .popover .popover-title,
+.popover.error .popover-title,
+.error .popover .popover-content,
+.popover.error .popover-content {
+  color:#B94A48;
+}
+
+.warning .popover .popover-title,
+.popover.warning .popover-title,
+.warning .popover .popover-content,
+.popover.warning .popover-content {
+  color:#C09853;
+}
+
+.popovers.yellow + .popover {
+    background: yellow;
+}
+
+.popovers.yellow + .popover .popover-title {
+    background: yellow;
+}
+
+.popovers.yellow + .popover .popover-content {
+    background: yellow;
+}
+
+/***
+Dropdown
+***/
+
+ /*Fixing dropdown issue on mobile devices in Bootstrap 3.2.2*/
+.dropdown-backdrop {
+  position: static;
+}
+
+.dropdown:hover .caret, 
+.open.dropdown .caret {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+
+.dropdown.open .dropdown-toggle {
+  color: #08c;
+  background: #ccc;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/***
+Dropdown Menu
+***/
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  list-style: none;
+  text-shadow: none;
+  padding: 0px;
+  margin:0px;
+  background-color: #ffffff;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+  font-size: 14px;
+  font-family: "Segoe UI",Helvetica, Arial, sans-serif;
+  border: 1px solid #ddd;
+}
+
+/* custom dropdown conetnt */
+.dropdown-content {
+  padding:5px;
+}
+
+.dropdown-content form {
+  margin:0;
+}
+
+.dropdown.inline .dropdown-menu {
+  display: inline-block;  
+  position: relative;
+}
+
+.dropdown-menu.bottom-up {
+  top: auto;
+  bottom: 100%;
+  margin-bottom: 2px;
+}
+
+.dropdown-menu li > a {
+  padding: 6px 0 6px 13px;
+  color: #333;
+  text-decoration: none;
+  display: block;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.dropdown-menu li > a:hover, 
+.dropdown-menu .active > a, 
+.dropdown-menu .active > a:hover {
+  text-decoration: none;
+  background-image: none;
+  background-color: #eee;
+  color: #333;
+  filter:none;
+}
+
+/* dropdown sub menu support for Bootsrap 3 */
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 5px;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+}
+
+.dropdown-submenu > a:after {
+  position: absolute;
+  display: inline-block;
+  font-size: 14px;
+  right: 7px;
+  top: 7px;
+  font-family: FontAwesome;
+  height: auto;
+  content: "\f105";
+  font-weight: 300;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+}
+
+.nav.pull-right > li > .dropdown-menu,
+.nav > li > .dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.nav.pull-right > li > .dropdown-menu:before,
+.nav > li > .dropdown-menu.pull-right:before {
+  right: 12px;
+  left: auto;
+}
+
+.nav.pull-right > li > .dropdown-menu:after,
+.nav > li > .dropdown-menu.pull-right:after {
+  right: 13px;
+  left: auto;
+}
+
+.nav.pull-right > li > .dropdown-menu .dropdown-menu,
+.nav > li > .dropdown-menu.pull-right .dropdown-menu {
+  right: 100%;
+  left: auto;
+  margin-right: -1px;
+  margin-left: 0;
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+          border-radius: 6px 0 6px 6px;
+}
+
+@media (max-width: 767px) {
+
+  .navbar-nav .open .dropdown-menu {
+    position: absolute;
+    float: left;
+    width: auto;
+    margin-top: 0;
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+       -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+  }
+
+  .navbar-nav .open .dropdown-menu > li > a {
+     padding: 6px 0 6px 13px;
+     color: #333 !important;
+  }
+
+  .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-nav .open .dropdown-menu > li > a:focus {
+    background-color: #eee !important;
+  }
+
+}
+
+/***
+Dropdown Checkboxes (in v1.3)
+***/
+.dropdown-checkboxes {
+  padding: 5px;
+}
+
+.dropdown-checkboxes label {
+  display: block;
+  font-weight: 300;
+  color: #333;
+  margin-bottom: 4px;
+  margin-top: 4px; 
+}
+
+
+/***
+Dropdown Menu Badges
+***/
+
+.dropdown-menu > li > a > .badge {
+   position: absolute;
+   margin-top: 1px;
+   right: 3px;
+   display: inline;
+   font-size: 11px;
+   font-weight: 300;
+   text-shadow:none;
+    height: 18px;
+    padding: 3px 6px 3px 6px;
+    text-align: center;
+    vertical-align: middle;
+   -webkit-border-radius: 12px !important;
+      -moz-border-radius: 12px !important;
+           border-radius: 12px !important;
+}
+
+.dropdown-menu > li > a > .badge.badge-roundless {
+   -webkit-border-radius: 0 !important;
+      -moz-border-radius: 0 !important;
+           border-radius: 0 !important;
+}
+
+/* end: sidebar menu badges */
+
+/***
+Forms
+***/
+code {
+  border: 1px solid #e1e1e1;
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);  
+}
+label {
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.form-control:-moz-placeholder {
+  color: #999999;
+}
+.form-control::-moz-placeholder {
+  color: #999999;
+}
+.form-control:-ms-input-placeholder {
+  color: #999999;
+}
+.form-control::-webkit-input-placeholder {
+  color: #999999;
+}
+.form-control {  
+  font-size: 14px;
+  font-weight: normal;
+  color: #333333;
+  background-color: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+.form-control:focus {
+  border-color: #999999;
+  outline: 0;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
+.form-control.height-auto {
+  height: auto;
+}
+
+.uneditable-input {
+  padding: 6px 12px;
+  min-width: 206px;
+  font-size: 14px;
+  font-weight: normal;
+  height: 34px;
+  color: #333333;
+  background-color: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+label.form-control {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+  cursor: not-allowed;
+  background-color: #F4F4F4 !important;
+}
+
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: #F9F9F9 !important;
+}
+
+/* input  groups */
+.input-group.input-group-fixed {
+  width: auto !important;
+}
+
+.input-group-addon {
+  border-color: #e5e5e5;
+  background: #e5e5e5;
+  min-width: 39px;
+}
+
+.input-group-addon > i {
+  color: #999;
+}
+
+/* form control sizing */
+.form-control-inline {
+  display: inline-block !important;
+}
+
+.input-mini {
+  width: 45px !important;
+}
+
+.input-xsmall {
+  width: 80px !important;
+}
+
+.input-small {
+  width: 120px !important;
+}
+
+.input-medium {
+  width: 240px !important;
+}
+
+.input-large {
+  width: 320px !important;
+}
+
+.input-xlarge {
+  width: 480px !important;
+}
+
+.input-inline {
+  display: inline-block;
+  width: auto;  
+  vertical-align: middle;
+}
+
+.form-group .input-inline  {
+  margin-right: 5px;
+}
+
+.input-sm {
+  height: 28px;
+  padding: 5px 10px;
+  font-size: 13px;
+}
+
+select.input-sm {
+  height: 28px;
+  line-height: 28px;
+  padding: 2px 10px;
+}
+
+/***
+Input spinner(in v1.4)
+***/
+
+input[type="text"].spinner,
+input[type="password"].spinner,
+input[type="datetime"].spinner,
+input[type="datetime-local"].spinner,
+input[type="date"].spinner,
+input[type="month"].spinner,
+input[type="time"].spinner,
+input[type="week"].spinner,
+input[type="number"].spinner,
+input[type="email"].spinner,
+input[type="url"].spinner,
+input[type="search"].spinner,
+input[type="tel"].spinner,
+input[type="color"].spinner {
+  background-image: url("../img/input-spinner.gif") !important;
+  background-repeat: no-repeat;
+  background-position: right 8px;
+}
+
+@media (max-width: 768px) {
+
+  .input-large {
+    width: 250px !important;
+  }
+
+  .input-xlarge {
+    width: 300px !important;
+  }
+
+} 
+
+/***
+Error States
+***/
+
+.has-warning .help-inline,
+.has-warning .help-block,
+.has-warning .control-label {
+  color: #c09853;
+}
+
+.has-warning .form-control {
+  border-color: #c09853;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-warning .form-control:focus {
+  border-color: #a47e3c;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-warning .input-group-addon {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #c09853;
+}
+
+.has-error .help-inline,
+.has-error .help-block,
+.has-error .control-label {
+  color: #b94a48;
+}
+
+.has-error .form-control {
+  border-color: #b94a48;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-error .form-control:focus {
+  border-color: #953b39;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-error .input-group-addon {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #b94a48;
+}
+
+.has-success .help-inline,
+.has-success .help-block,
+.has-success .control-label {
+  color: #468847;
+}
+
+.has-success .form-control {
+  border-color: #468847;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-success .form-control:focus {
+  border-color: #356635;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.has-success .input-group-addon {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #468847;
+}
+
+/***
+Custom label and badges
+***/
+
+.label, 
+.badge {
+  font-weight: 300;  
+  text-shadow: none !important;
+}
+
+.label {  
+  font-size: 12px;  
+  padding: 3px 6px 3px 6px;
+}
+
+.label.label-sm {  
+  font-size: 12px;
+  padding: 1px 4px 1px 4px;
+}
+
+h1 .label,
+h2 .label,
+h3 .label,
+h4 .label,
+h5 .label,
+h6 .label,
+h7 .label {
+  font-size: 75%;
+}
+
+.badge {
+  font-size: 11px !important;
+  font-weight: 300;
+  text-align: center;
+  background-color: #e02222;
+  height: 18px;
+  padding: 3px 6px 3px 6px;
+  -webkit-border-radius: 12px !important;
+     -moz-border-radius: 12px !important;
+          border-radius: 12px !important;
+  text-shadow:none !important;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.badge.badge-roundless {
+   -webkit-border-radius: 0 !important;
+      -moz-border-radius: 0 !important;
+           border-radius: 0 !important;
+}
+
+.badge-default,
+.label-default  {
+  background-color: #999 !important;
+}
+
+.badge-primary,
+.label-primary {
+  background-color: #428bca !important;
+}
+
+.label-success, 
+.badge-success {
+  background-color: #3cc051;
+  background-image: none !important;
+}
+
+.label-warning, 
+.badge-warning {
+  background-color: #fcb322;
+  background-image: none !important;
+}
+
+.label-danger, 
+.badge-danger {
+  background-color: #ed4e2a;
+  background-image: none !important;
+}
+
+.label-info, 
+.badge-info {
+  background-color: #57b5e3;
+  background-image: none !important;
+}
+
+/* fix badge position for navs */
+.nav.nav-pills > li > a > .badge {
+  margin-top: -2px;
+}
+
+.nav.nav-stacked > li > a > .badge {
+  margin-top: 1px;
+  margin-bottom: 0px;
+}
+
+/***
+Iconic Labels
+***/
+
+.label.label-icon {
+  padding: 4px 1px 4px 5px;
+  margin-right: 2px;
+  text-align: center !important;
+}
+
+.ie9 .label.label-icon, 
+.ie10 .label.label-icon {
+  padding: 3px 0px 3px 3px;
+} 
+
+.label.label-icon > i {
+  font-size: 12px;
+  text-align: center !important;
+}
+
+
+/***
+Pagination
+***/
+.pagination {
+  margin: 10px 0;
+}
+
+.pagination .active > a,
+.pagination .active > a:hover {
+  background: #eee;
+  border-color: #dddddd;
+  color: #333;
+}
+
+
+
+/***
+wells
+***/
+.well {  
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+/* Bootstrap Tabs */
+
+.dropup.open > .dropdown-toggle,
+.dropdown.open > .dropdown-toggle {
+  border-color: #ddd !important;
+}
+
+.nav-tabs > li > .dropdown-menu:after,
+.nav-pills > li > .dropdown-menu:after,
+.navbar-nav > li > .dropdown-menu:after,
+
+.nav-tabs > li > .dropdown-menu:before,
+.nav-pills > li > .dropdown-menu:before,
+.navbar-nav > li > .dropdown-menu:before {
+  display: none !important;
+}
+
+.nav-tabs > .dropdown.open > .dropdown-toggle, 
+.nav-pills > .dropdown.open > .dropdown-toggle {
+  background: #eee !important;
+  color: #0d638f !important;
+}
+
+
+.nav-tabs,
+.nav-pills {
+  margin-bottom: 10px;
+}
+
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+  border-bottom: 0;
+}
+
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+  float: none;
+}
+
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
+
+.tabs-left > .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+
+.tabs-left > .nav-tabs > li > a {
+  margin-right: -1px;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
+  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
+}
+
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: #ffffff;
+}
+
+.tabs-right > .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  border-left: 1px solid #ddd;
+}
+
+.tabs-right > .nav-tabs > li > a {
+  margin-left: -1px;
+  -webkit-border-radius: 0 4px 4px 0;
+     -moz-border-radius: 0 4px 4px 0;
+          border-radius: 0 4px 4px 0;
+}
+
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
+  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
+}
+
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
+  border-color: #ddd #ddd #ddd transparent;
+  *border-left-color: #ffffff;
+}
+
+.tabs-below > .nav-tabs,
+.tabs-below > .nav-pills {
+  border-bottom: 0;
+  margin-bottom: 0px;
+  margin-top: 10px;
+}
+
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+  margin-bottom: 0;
+  margin-top: 10px;
+}
+
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
+}
+
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
+}
+
+/* BS3.0.3 removed tabbable class so its added back */
+.tabbable:before,
+.tabbable:after {
+  display: table;
+  content: " ";
+}
+
+.tabbable:after {
+  clear: both;
+}
+
+.tabbable:before,
+.tabbable:after {
+  display: table;
+  content: " ";
+}
+
+.tabbable:after {
+  clear: both;
+}
+
+/***
+Bootstrap modal 
+***/
+
+.modal {
+  z-index: 10050 !important;
+  outline: none !important;
+}
+
+.modal-header {
+  border-bottom: 1px solid #EFEFEF;
+}
+
+.modal-header h3{
+  font-weight: 300;
+}
+
+.modal-small.modal-dialog {
+  width: 400px;
+}
+
+.modal-wide.modal-dialog {
+  width: 60%;
+}
+
+.modal-full.modal-dialog {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+
+  .modal-small.modal-dialog,
+  .modal-wide.modal-dialog, 
+  .modal-full.modal-dialog {
+    width: auto;
+  }
+
+}
+
+/***
+Modal header close button fix
+***/
+.modal-header .close {
+  margin-top: 0px !important;
+}
+
+.modal > .loading {
+  position: absolute;
+  top: 50%;
+  left:50%;
+  margin-top: -22px;
+  margin-left: -22px;
+}
+
+.modal-backdrop {
+  border: 0 !important;
+  outline: none !important;
+  z-index: 10049 !important;
+}
+
+.modal-backdrop, 
+.modal-backdrop.fade.in {
+  background-color: #333 !important;
+}
+
+/* fix: content shifting to the right on modal open due to scrollbar closed */
+.modal {
+  overflow-y: auto !important;
+}
+
+.modal-open {
+  overflow-y: auto !important;
+}
+
+.modal-open-noscroll {
+  overflow-y: hidden !important; 
+}
+
+
+/***
+Image Carousel
+***/
+.carousel.image-carousel .carousel-inner {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.carousel.image-carousel .carousel-control i {
+  position: absolute;
+  top:40%;
+}
+
+.carousel.image-carousel.image-carousel-hoverable .carousel-control i { 
+  display: none;
+}
+
+.carousel.image-carousel.image-carousel-hoverable:hover .carousel-control i {
+  display: inline-block;
+}
+
+.carousel.image-carousel .carousel-control.left i {
+  left:10px;
+}
+
+.carousel.image-carousel .carousel-control.right i {
+  right:10px;
+}
+
+.carousel.image-carousel .carousel-indicators {
+  margin-top: 10px;
+  bottom: -7px;
+}
+
+.carousel.image-carousel .carousel-indicators li {
+  background-color: #666;
+}
+
+.carousel.image-carousel .carousel-indicators li.active {
+  background-color: #333;
+}
+
+.carousel.image-carousel .carousel-caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 15px 15px 25px 15px;
+  background: #333333;
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.carousel.image-carousel .carousel-caption h4,
+.carousel.image-carousel .carousel-caption h3,
+.carousel.image-carousel .carousel-caption h2,
+.carousel.image-carousel .carousel-caption p {
+  text-align: left;
+  line-height: 20px;
+  color: #ffffff;
+}
+
+.carousel.image-carousel .carousel-caption h2,
+.carousel.image-carousel .carousel-caption h3,
+.carousel.image-carousel .carousel-caption h4 {
+  margin: 0 0 5px;
+}
+
+.carousel.image-carousel .carousel-caption h2 a,
+.carousel.image-carousel .carousel-caption h3 a,
+.carousel.image-carousel .carousel-caption h4 a {
+  color: #aaa;
+} 
+
+.carousel.image-carousel .carousel-caption p {
+  margin-bottom: 0;
+}
+
+.carousel.image-carousel .item {
+  margin: 0;
+}
+
+/***
+Bootstrap Tables
+***/
+
+.table thead > tr > th {
+  border-bottom: 0;
+}
+
+.table tbody tr.active td,
+.table tbody tr.active th {
+  background-color: #e9e9e9 !important;
+}
+
+.table tbody tr.active:hover td,
+.table tbody tr.active:hover th {
+  background-color: #e1e1e1 !important;
+}
+
+.table-striped tbody tr.active:nth-child(odd) td,
+.table-striped tbody tr.active:nth-child(odd) th {
+  background-color: #017ebc;
+}
+
+.table .heading > th {
+  background-color: #eee !important;
+}
+
+/***
+Bootstrap Panel
+***/
+
+.panel {  
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+.panel .panel-title > a:hover {
+  text-decoration: none;
+}
+
+.accordion .panel-heading {
+  padding: 0;
+}
+
+.accordion  .panel-title {
+  padding: 0;
+}
+
+.accordion  .panel-title .accordion-toggle {
+  display: block;
+  padding: 10px 15px;
+}
+
+.accordion .accordion-toggle.accordion-toggle-styled {
+  background: url("../img/accordion-plusminus.png") no-repeat;
+  background-position: right -19px;
+  margin-right: 15px;
+}
+
+.accordion .accordion-toggle.accordion-toggle-styled.collapsed {
+  background-position: right 12px;
+}
+
+/***
+Responsive Image
+***/
+.table td .img-responsive{
+  width:100%;
+}
+
+/***
+Unstyled List
+***/
+
+.list-unstyled li > .list-unstyled {
+  margin-left: 25px;
+}
+
+.alarm-critical{
+  background-color: rgb(255, 0, 0);
+}
+
+.alarm-major{
+  background-color: rgb(255, 150, 0);
+}
+
+.alarm-minor{
+  background-color: rgb(248, 252, 96);
+}
+
+.alarm-warning{
+  background-color: rgb(152, 240, 248);
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css
new file mode 100644
index 00000000..b65cefa9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/style-ict-bootstrap.css
@@ -0,0 +1,838 @@
+/**
+ * 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.
+ */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
+}
+html, body, div, span, applet, object, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 1em;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	background: rgba(231, 231, 231, 0.43);
+	line-height: 1.125em;
+	color: white;
+	max-width: 1920px;
+	margin: 0 auto;
+	position: relative;
+	font-family: 'Lato', Helvetica, Arial, Tahoma;
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
+}
+ol, ul {
+	padding: 0 10px;
+	margin: 0 10px;
+	line-height: 1.5em;
+}
+h1, h2, h3, h4, h5, h6 {
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+	font-family: 'Lato', Georgia, Helvetica, Tahoma;
+	margin: 10px 0;
+	font-weight: normal;
+}
+h1 {
+	font-size: 1.875em;
+}
+h2 {
+	font-size: 1.6em;
+	line-height: 1em;
+}
+h3 {
+	font-size: 1.25em;
+}
+h4 {
+	font-size: 1.125em;
+}
+h5 {
+	font-size: 1em;
+}
+h6 {
+	font-size: 0.875em;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+a:hover {
+	color: white;
+	opacity: 0.9;
+}
+a:visited {
+	color: white;
+}
+h2 {
+	cursor: pointer;
+}
+code, pre {
+	font-family: Monaco, Menlo, Consolas;
+	font-size: 1em;
+	color: #FFFFDE;
+	padding: 0 3px 2px;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.header {
+	/*padding: 14px 0;
+	background-color: rgb(19, 17, 17);
+	background-color: #006a3f;
+	background-image:	
+					radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
+					radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
+	background-image:	
+					-webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					-webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
+					-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
+    background-position: 0 0px, 4px 4px, 0 1px, 4px 5px;
+    background-size: 8px 8px;
+	border-bottom: 1px solid rgb(41, 41, 41);*/
+	margin-top: 1%;
+	/* margin-left: 10%; */
+	margin-left: 90px;
+}
+@media (min-width: 1600px){
+	.header {
+		margin-top: 1%;
+		margin-left: 95px;
+	}
+}
+
+.header div.float-left {
+	/*padding-left: 2%;*/
+}
+
+@media (min-width: 769px) and (max-width: 1024px) { 
+	.header div.float-left {
+		/*padding-left: 5%;*/
+	}
+}
+
+.header a {
+	font-size: 35px;
+	color: white;
+	display: block;
+	opacity: 0.8;
+}
+.header a:first-letter {
+	font-size: 60px;
+	line-height: 40px;
+	font-weight: bold;
+}
+.header .target {
+	margin-left: 5px;
+	margin-bottom: 20px;
+}
+
+.header .reponsive-block {
+	list-style: none;
+	margin: 0px;
+	padding: 50px 2% 0 0;
+}
+
+.header .reponsive-block li {
+	display: inline-block;
+	float:left;
+}
+
+.header .reponsive-block a {
+	display: inline-block;
+	margin: 0 5px;
+	cursor: pointer;
+	background: url(../i/reponsive.png) no-repeat;
+}	
+
+.header .reponsive-block a.desktop {
+	background-position: 3px 0;
+	width: 34px; height: 26px;
+}	
+
+.header .reponsive-block a.tablet-landscape {
+	background-position: -49px 0;
+	width: 22px;
+	height: 22px;
+}	
+
+.header .reponsive-block a.tablet-portrait {
+	background-position: -90px 0;
+	width: 18px;
+	height: 24px;
+}	
+
+.header .reponsive-block a.iphone-landscape {
+	background-position: -129px 0;
+	width: 20px;
+	height: 20px;
+}	
+
+.header .reponsive-block a.iphone-portrait {
+	background-position: -166px 0;
+	width: 16px;
+	height: 26px;
+}	
+
+.header .reponsive-block a.desktop:hover,
+.header .reponsive-block a.desktop.active {
+	background-position: 3px -34px;
+}	
+
+.header .reponsive-block a.tablet-landscape:hover,
+.header .reponsive-block a.tablet-landscape.active {
+	background-position: -49px -34px;
+}	
+
+.header .reponsive-block a.tablet-portrait:hover,
+.header .reponsive-block a.tablet-portrait.active {
+	background-position: -91px -33px;
+}	
+
+.header .reponsive-block a.iphone-landscape:hover,
+.header .reponsive-block a.iphone-landscape.active {
+	background-position: -128px -33px;
+}	
+
+.header .reponsive-block a.iphone-portrait:hover,
+.header .reponsive-block a.iphone-portrait.active {
+	background-position: -166px -33px;
+}	
+.free-wall {
+	margin: auto;
+}
+
+.free-wall-logo {
+	margin: auto;
+	height: 420px;
+}
+.size2-2 {
+	width: 80px;
+	height: 80px;
+}
+
+.size11 {
+	height: 160px;
+	width: 160px;
+}
+
+.size12 {
+	width: 160px;
+	height: 320px;
+}
+
+.size21 {
+	width: 320px;
+	height: 160px;
+}
+
+.size22 {
+	height: 320px;
+	width: 320px;
+}
+
+.size13 {
+	width: 160px;
+	height: 480px;
+}
+
+.size31 {
+	width: 480px;
+	height: 160px;
+}
+
+.size23 {
+	width: 320px;
+	height: 480px;
+}
+
+.size24 {
+	width: 320px;
+	height: 640px;
+}
+
+.size32 {
+	width: 480px;
+	height: 320px;
+}
+
+.size33 {
+	width: 480px;
+	height: 480px;
+}
+
+.size34 {
+	width: 480px;
+	height: 640px;
+}
+
+.size43 {
+	width: 640px;
+	height: 480px;
+}
+
+.size35 {
+	width: 480px;
+	height: 800px;
+}
+
+.size53 {
+	width: 800px;
+	height: 480px;
+}
+
+.size36 {
+	width: 480px;
+	height: 960px;
+}
+
+.size41 {
+	width: 270px;
+	height: 160px;
+}
+.size42 {
+	width: 270px;
+	height: 320px;
+}
+.size41-1024 {
+	width: 213px;
+	height: 133px;
+}
+.size42-1024 {
+	width: 213px;
+	height: 275px;
+}
+.size41-1366 {
+	width: 278px;
+	height: 156px;
+}
+.size42-1366 {
+	width: 278px;
+	height: 332px;
+}
+.size41-1440 {
+	width: 310px;
+	height: 168px;
+}
+.size42-1440 {
+	width: 310px;
+	height: 340px;
+}
+.size41-1600 {
+	width: 330px;
+	height: 173px;
+}
+.size42-1600 {
+	width: 330px;
+	height: 354px;
+}
+
+.donate form {
+	height: 100%;
+	width: 100%;
+	background: rgb(44, 62, 80);
+}
+
+.donate form .paypal {
+	display: block;
+	margin: auto;
+	padding: 20px 0px 0px 0px;
+	outline: 0;
+}
+
+.img-demo {
+	vertical-align: bottom;
+	list-style: none;
+	margin:0;
+	padding: 0;
+}
+
+.img-demo li {
+	float: left;
+	width: 25%;
+	text-align: center;
+}	
+
+.img-demo li img {
+	border: 2px solid white;
+	width: 98px;
+	height: 98px;
+}
+
+.float-left {
+	float: left;
+}
+
+.float-right {
+	float: right;
+}
+
+.clearfix:before,
+.clearfix:after {
+    content: "";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+.rest-left {
+	margin-left: 244px;
+}
+
+.desc h1,
+.desc h2,
+.desc h3,
+.desc h4,
+.desc h5,
+.desc h6 {
+	font-weight: bold;
+}
+
+.desc h2 {
+	border-bottom: 1px solid rgba(0,0,0,0.1);
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding-bottom: 50px;
+}
+
+.desc h2 span {
+	float: left;
+	display: block;
+	line-height: 50px;
+}
+
+@media (max-width: 1024px) {  
+	.brick {		
+		height:140px;
+	}
+}
+
+.brick {
+	margin-top:10px;
+	background-color: white;
+	/* float: left; */
+	cursor: default;
+	overflow: hidden;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	height:160px;
+}
+
+@media (min-width: 1440px) {  
+	.brick {		
+		height:180px;
+	}
+}
+
+.brick .cover {
+	overflow: hidden;
+	margin: 20px;
+	margin-top: 25%;
+	font-size: 30px;
+	float: right;
+	text-align: right;
+}
+
+.brick .read-more {
+	position: absolute;
+	display: none;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	padding: 12px;
+	background: rgb(0, 0, 0);
+	background: rgba(0, 0, 0, 0.45);
+}
+
+.brick:hover .read-more {
+	display: block;
+	cursor: pointer;
+}
+
+.brick .desc {
+	display: none;
+}
+
+.full-width .float-left {
+	display: none;
+}
+
+.full-width .desc {
+	display: block;
+}
+
+.full-width.brick {
+	box-shadow: none;
+	overflow: visible;
+	border: none !important;
+	background: none !important;
+}
+
+.full-width.brick .cover { 
+	margin: 0px 20px;
+	color: #333;
+}
+
+.full-width.brick .cover * {
+	text-shadow: none;
+}
+
+.full-width.brick .cover code {
+	color: #666;
+}
+
+.open .float-left {
+	display: none;
+}
+
+.open .desc {
+	display: block;
+}
+
+.example {
+	width: 0px;
+	height: 0px;
+	overflow: visible !important; /* for ie7 */
+}
+
+.example-draggable {
+	cursor: move;
+}
+
+.example-draggable * {
+	cursor: move;
+}
+
+.example-draggable a {
+	cursor: pointer;
+}
+
+.cell {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	position: absolute;
+	background-color: #222;
+}
+
+[class*="-share"] {
+	cursor: pointer;
+	margin: 20px 0;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.facebook-share {
+	background: url(../i/fb.png) no-repeat left center;
+}
+
+.twitter-share {
+	background: url(../i/tw.png) no-repeat left center;
+}
+
+.google-share {
+	background: url(../i/gp.png) no-repeat left center;
+}
+
+.download-icon {
+	background: url(../i/download.png) no-repeat left center;
+	display: block;
+	margin: 0 0 10px 0;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.js-icon {
+	background: url(../i/js.png) no-repeat left center;
+	display: block;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.fork {
+	float: right;
+	width: 100%;
+	height: 100%;
+	display: block;
+	background: url(../i/forkme.png) no-repeat top right;
+}
+
+.back-button {
+	position: fixed;
+	z-index: 9999;
+	padding: 1%;
+	bottom: 2%;
+	right: 2%;
+	display: none;
+	background: black;
+}
+
+.back-button .back-icon {
+	background: url(../i/back.png) no-repeat top center;
+	width: 45px;
+	height: 27px;
+	display: block;
+}
+
+.back-button .back-icon:hover {
+	background: url(../i/back.png) no-repeat bottom center;
+}
+
+@media (min-width: 1600px) {  
+	.main-content-wrapper{
+		width:100%;
+		margin-left:95px;
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1441px) and (max-width: 1599px) {  
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 0%;	*/
+		margin-left:75px;
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1367px) and (max-width: 1440px) {  
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1281px) and (max-width: 1366px) {  
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 2%;	*/
+		margin-left:75px;
+		margin-right: 2%;	
+	}
+}
+
+@media (min-width: 1025px) and (max-width: 1280px) { 
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 4%;*/
+		margin-left:75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 769px) and (max-width: 1024px) { 
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 6%;*/
+		margin-left:75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 641px) and (max-width: 768px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 10%;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 481px) and (max-width: 640px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 0%;	
+		margin-right: 1%;	
+	}
+}
+
+@media (max-width: 480px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 9%;	
+		margin-right: 1%;	
+	}
+}
+
+body{
+	font-family: microsoft yahei;
+	background: #484747;
+}
+
+.skyBlue-mainpage{
+	background: -moz-linear-gradient(left top, #1cadd9, #20c0f0);
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0');
+	background: linear-gradient(to bottom right,#1cadd9, #20c0f0);
+}
+.golden-mainpage{
+	background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0);
+	background: linear-gradient(to bottom right,#bca374, #d9cf7a);
+}
+.manLieONCloud-image{
+	background-image: url('../img/mainpage/pic/1.png');
+}
+.orange-mainpage{
+	background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0);
+	background: linear-gradient(to bottom right,#f09c0a, #f4be35);
+}
+.pinkishRed-mainpage{
+	background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0);
+	background: linear-gradient(to bottom right,#e03655, #ef3a5b);
+}
+.magicCube-image{
+	background-image: url('../img/mainpage/pic/4.png');
+}
+.magicThought-image{
+	background-image: url('../img/mainpage/pic/5.png');
+}
+.grassGreen-mainpage{
+	background-image: -moz-linear-gradient(left top, #008b04, #03a501);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0);
+	background: linear-gradient(to bottom right,#008b04, #03a501);
+}
+.meeting-image{
+	background-image: url('../img/mainpage/pic/3.png');	
+}
+.earth-image{
+	background-image: url('../img/mainpage/pic/2.png');
+}
+.toolsImageBrokenLine{
+	background-image: url('../img/mainpage/icon/1.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.toolsImageHierachy{
+	background-image: url('../img/mainpage/icon/2.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.toolsImageGear{
+	background-image: url('../img/mainpage/icon/3.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.toolsImagePresent{
+	background-image: url('../img/mainpage/icon/4.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.toolsImageFile{
+	background-image: url('../img/mainpage/icon/5.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.toolsImageBriefcase{
+	background-image: url('../img/mainpage/icon/6.png');
+	height: 150px;
+	width: 120px;
+	margin-top: 15%;
+	margin-left:-5px;
+}
+.contentTip{
+	opacity:0;
+	display:block;
+	padding: 20px;
+	text-align: left;
+	line-height: inherit;
+	text-indent: 2em;
+	position: absolute;
+}
+.contentTipShow{
+	display:block;
+	padding: 20px;
+	text-align: left;
+	line-height: inherit;
+	text-indent: 2em;
+	position: absolute;
+}
+.coverHidden{
+	display:none;
+}
+.coverShrink{
+	width:0px !important;
+	height:0px !important;
+}
+/*
+.brick  .contentToggle{
+  -webkit-transition: opacity 1s ease-in-out;
+  -moz-transition: opacity 1s ease-in-out;
+  -o-transition: opacity 1s ease-in-out;
+  transition: opacity 1s ease-in-out;
+}
+.brick  .cover :hover{
+	opacity:0;
+}
+*/
+.hideSideMenuForMainPage {
+  display: none! important;
+}
+.fullFillDiv {
+   width:100%;
+   height:100%;
+}
+@media screen and (min-width: 992px)and (max-width: 1280px) {
+    .brick .cover {
+	    font-size:25px;
+	}
+}
+
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css b/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css
new file mode 100644
index 00000000..9912f226
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/style-ict.css
@@ -0,0 +1,820 @@
+/**
+ * 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.
+ */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
+}
+html, body, div, span, applet, object, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 1em;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	background: rgba(231, 231, 231, 0.43);
+	line-height: 1.125em;
+	color: white;
+	max-width: 1920px;
+	margin: 0 auto;
+	position: relative;
+	font-family: 'Lato', Helvetica, Arial, Tahoma;
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
+}
+ol, ul {
+	padding: 0 10px;
+	margin: 0 10px;
+	line-height: 1.5em;
+}
+h1, h2, h3, h4, h5, h6 {
+	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+	font-family: 'Lato', Georgia, Helvetica, Tahoma;
+	margin: 10px 0;
+	font-weight: normal;
+}
+h1 {
+	font-size: 1.875em;
+}
+h2 {
+	font-size: 1.6em;
+	line-height: 1em;
+}
+h3 {
+	font-size: 1.25em;
+}
+h4 {
+	font-size: 1.125em;
+}
+h5 {
+	font-size: 1em;
+}
+h6 {
+	font-size: 0.875em;
+}
+a {
+	text-decoration: none;
+	color: white;
+}
+a:hover {
+	color: white;
+	opacity: 0.9;
+}
+a:visited {
+	color: white;
+}
+h2 {
+	cursor: pointer;
+}
+code, pre {
+	font-family: Monaco, Menlo, Consolas;
+	font-size: 1em;
+	color: #FFFFDE;
+	padding: 0 3px 2px;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.header {
+	/*padding: 14px 0;
+	background-color: rgb(19, 17, 17);
+	background-color: #006a3f;
+	background-image:	
+					radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
+					radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
+	background-image:	
+					-webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					-webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), 
+					-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
+					-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
+    background-position: 0 0px, 4px 4px, 0 1px, 4px 5px;
+    background-size: 8px 8px;
+	border-bottom: 1px solid rgb(41, 41, 41);*/
+	margin-top: 3%;
+	/* margin-left: 10%; */
+	margin-left: 75px;
+}
+@media (min-width: 1600px){
+	.header {
+		margin-top: 3%;
+		margin-left: 95px;
+	}
+}
+
+.header div.float-left {
+	/*padding-left: 2%;*/
+}
+
+@media (min-width: 769px) and (max-width: 1024px) { 
+	.header div.float-left {
+		/*padding-left: 5%;*/
+	}
+}
+
+.header a {
+	font-size: 35px;
+	color: white;
+	display: block;
+	opacity: 0.8;
+}
+.header a:first-letter {
+	font-size: 60px;
+	line-height: 40px;
+	font-weight: bold;
+}
+.header .target {
+	margin-left: 5px;
+	margin-bottom: 20px;
+}
+
+.header .reponsive-block {
+	list-style: none;
+	margin: 0px;
+	padding: 50px 2% 0 0;
+}
+
+.header .reponsive-block li {
+	display: inline-block;
+	float:left;
+}
+
+.header .reponsive-block a {
+	display: inline-block;
+	margin: 0 5px;
+	cursor: pointer;
+	background: url(../i/reponsive.png) no-repeat;
+}	
+
+.header .reponsive-block a.desktop {
+	background-position: 3px 0;
+	width: 34px; height: 26px;
+}	
+
+.header .reponsive-block a.tablet-landscape {
+	background-position: -49px 0;
+	width: 22px;
+	height: 22px;
+}	
+
+.header .reponsive-block a.tablet-portrait {
+	background-position: -90px 0;
+	width: 18px;
+	height: 24px;
+}	
+
+.header .reponsive-block a.iphone-landscape {
+	background-position: -129px 0;
+	width: 20px;
+	height: 20px;
+}	
+
+.header .reponsive-block a.iphone-portrait {
+	background-position: -166px 0;
+	width: 16px;
+	height: 26px;
+}	
+
+.header .reponsive-block a.desktop:hover,
+.header .reponsive-block a.desktop.active {
+	background-position: 3px -34px;
+}	
+
+.header .reponsive-block a.tablet-landscape:hover,
+.header .reponsive-block a.tablet-landscape.active {
+	background-position: -49px -34px;
+}	
+
+.header .reponsive-block a.tablet-portrait:hover,
+.header .reponsive-block a.tablet-portrait.active {
+	background-position: -91px -33px;
+}	
+
+.header .reponsive-block a.iphone-landscape:hover,
+.header .reponsive-block a.iphone-landscape.active {
+	background-position: -128px -33px;
+}	
+
+.header .reponsive-block a.iphone-portrait:hover,
+.header .reponsive-block a.iphone-portrait.active {
+	background-position: -166px -33px;
+}	
+.free-wall {
+	margin: auto;
+}
+
+.free-wall-logo {
+	margin: auto;
+	height: 420px;
+}
+.size2-2 {
+	width: 80px;
+	height: 80px;
+}
+
+.size11 {
+	height: 160px;
+	width: 160px;
+}
+
+.size12 {
+	width: 160px;
+	height: 320px;
+}
+
+.size21 {
+	width: 320px;
+	height: 160px;
+}
+
+.size22 {
+	height: 320px;
+	width: 320px;
+}
+
+.size13 {
+	width: 160px;
+	height: 480px;
+}
+
+.size31 {
+	width: 480px;
+	height: 160px;
+}
+
+.size23 {
+	width: 320px;
+	height: 480px;
+}
+
+.size24 {
+	width: 320px;
+	height: 640px;
+}
+
+.size32 {
+	width: 480px;
+	height: 320px;
+}
+
+.size33 {
+	width: 480px;
+	height: 480px;
+}
+
+.size34 {
+	width: 480px;
+	height: 640px;
+}
+
+.size43 {
+	width: 640px;
+	height: 480px;
+}
+
+.size35 {
+	width: 480px;
+	height: 800px;
+}
+
+.size53 {
+	width: 800px;
+	height: 480px;
+}
+
+.size36 {
+	width: 480px;
+	height: 960px;
+}
+
+.size41 {
+	width: 270px;
+	height: 160px;
+}
+.size42 {
+	width: 270px;
+	height: 320px;
+}
+.size41-1024 {
+	width: 213px;
+	height: 133px;
+}
+.size42-1024 {
+	width: 213px;
+	height: 275px;
+}
+.size41-1366 {
+	width: 278px;
+	height: 156px;
+}
+.size42-1366 {
+	width: 278px;
+	height: 332px;
+}
+.size41-1440 {
+	width: 310px;
+	height: 168px;
+}
+.size42-1440 {
+	width: 310px;
+	height: 340px;
+}
+.size41-1600 {
+	width: 330px;
+	height: 173px;
+}
+.size42-1600 {
+	width: 330px;
+	height: 354px;
+}
+
+.donate form {
+	height: 100%;
+	width: 100%;
+	background: rgb(44, 62, 80);
+}
+
+.donate form .paypal {
+	display: block;
+	margin: auto;
+	padding: 20px 0px 0px 0px;
+	outline: 0;
+}
+
+.img-demo {
+	vertical-align: bottom;
+	list-style: none;
+	margin:0;
+	padding: 0;
+}
+
+.img-demo li {
+	float: left;
+	width: 25%;
+	text-align: center;
+}	
+
+.img-demo li img {
+	border: 2px solid white;
+	width: 98px;
+	height: 98px;
+}
+
+.float-left {
+	float: left;
+}
+
+.float-right {
+	float: right;
+}
+
+.clearfix:before,
+.clearfix:after {
+    content: "";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+.rest-left {
+	margin-left: 244px;
+}
+
+.desc h1,
+.desc h2,
+.desc h3,
+.desc h4,
+.desc h5,
+.desc h6 {
+	font-weight: bold;
+}
+
+.desc h2 {
+	border-bottom: 1px solid rgba(0,0,0,0.1);
+	margin-top: 0px;
+	margin-bottom: 0px;
+	padding-bottom: 50px;
+}
+
+.desc h2 span {
+	float: left;
+	display: block;
+	line-height: 50px;
+}
+
+.brick {
+	background-color: white;
+	float: left;
+	cursor: default;
+	overflow: hidden;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.brick .cover {
+	overflow: hidden;
+	margin: 20px;
+/* margin-left: 60%; */
+	margin-top: 25%;
+/*	width: 120px; */
+	height: 30px;
+	font-size: 30px;
+	padding: 7px;
+	float: right;
+	text-align: right;
+}
+
+.brick .read-more {
+	position: absolute;
+	display: none;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	padding: 12px;
+	background: rgb(0, 0, 0);
+	background: rgba(0, 0, 0, 0.45);
+}
+
+.brick:hover .read-more {
+	display: block;
+	cursor: pointer;
+}
+
+.brick .desc {
+	display: none;
+}
+
+.full-width .float-left {
+	display: none;
+}
+
+.full-width .desc {
+	display: block;
+}
+
+.full-width.brick {
+	box-shadow: none;
+	overflow: visible;
+	border: none !important;
+	background: none !important;
+}
+
+.full-width.brick .cover { 
+	margin: 0px 20px;
+	color: #333;
+}
+
+.full-width.brick .cover * {
+	text-shadow: none;
+}
+
+.full-width.brick .cover code {
+	color: #666;
+}
+
+.open .float-left {
+	display: none;
+}
+
+.open .desc {
+	display: block;
+}
+
+.example {
+	width: 0px;
+	height: 0px;
+	overflow: visible !important; /* for ie7 */
+}
+
+.example-draggable {
+	cursor: move;
+}
+
+.example-draggable * {
+	cursor: move;
+}
+
+.example-draggable a {
+	cursor: pointer;
+}
+
+.cell {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	position: absolute;
+	background-color: #222;
+}
+
+[class*="-share"] {
+	cursor: pointer;
+	margin: 20px 0;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.facebook-share {
+	background: url(../i/fb.png) no-repeat left center;
+}
+
+.twitter-share {
+	background: url(../i/tw.png) no-repeat left center;
+}
+
+.google-share {
+	background: url(../i/gp.png) no-repeat left center;
+}
+
+.download-icon {
+	background: url(../i/download.png) no-repeat left center;
+	display: block;
+	margin: 0 0 10px 0;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.js-icon {
+	background: url(../i/js.png) no-repeat left center;
+	display: block;
+	line-height: 30px;
+	padding-left: 30px;
+}
+
+.fork {
+	float: right;
+	width: 100%;
+	height: 100%;
+	display: block;
+	background: url(../i/forkme.png) no-repeat top right;
+}
+
+.back-button {
+	position: fixed;
+	z-index: 9999;
+	padding: 1%;
+	bottom: 2%;
+	right: 2%;
+	display: none;
+	background: black;
+}
+
+.back-button .back-icon {
+	background: url(../i/back.png) no-repeat top center;
+	width: 45px;
+	height: 27px;
+	display: block;
+}
+
+.back-button .back-icon:hover {
+	background: url(../i/back.png) no-repeat bottom center;
+}
+
+@media (min-width: 1600px) {  
+	.main-content-wrapper{
+		width:100%;
+		margin-left:95px;
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1441px) and (max-width: 1599px) {  
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 0%;	*/
+		margin-left:75px;
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1367px) and (max-width: 1440px) {  
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 1281px) and (max-width: 1366px) {  
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 2%;	*/
+		margin-left:75px;
+		margin-right: 2%;	
+	}
+}
+
+@media (min-width: 1025px) and (max-width: 1280px) { 
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 4%;*/
+		margin-left:75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 769px) and (max-width: 1024px) { 
+	.main-content-wrapper{
+		width:100%;
+		/*margin-left: 6%;*/
+		margin-left:75px;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 641px) and (max-width: 768px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 10%;	
+		margin-right: 1%;	
+	}
+}
+
+@media (min-width: 481px) and (max-width: 640px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 0%;	
+		margin-right: 1%;	
+	}
+}
+
+@media (max-width: 480px) { 
+	.main-content-wrapper{
+		width:100%;
+		margin-left: 9%;	
+		margin-right: 1%;	
+	}
+}
+
+body{
+	font-family: microsoft yahei;
+	background: #484747;
+}
+
+.skyBlue-mainpage{
+	background: -moz-linear-gradient(left top, #1cadd9, #20c0f0);
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0');
+	background: linear-gradient(to bottom right,#1cadd9, #20c0f0);
+}
+.golden-mainpage{
+	background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0);
+	background: linear-gradient(to bottom right,#bca374, #d9cf7a);
+}
+.manLieONCloud-image{
+	background-image: url('../img/mainpage/pic/1.png');
+}
+.orange-mainpage{
+	background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0);
+	background: linear-gradient(to bottom right,#f09c0a, #f4be35);
+}
+.pinkishRed-mainpage{
+	background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0);
+	background: linear-gradient(to bottom right,#e03655, #ef3a5b);
+}
+.magicCube-image{
+	background-image: url('../img/mainpage/pic/4.png');
+}
+.grassGreen-mainpage{
+	background-image: -moz-linear-gradient(left top, #008b04, #03a501);
+	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0);
+	background: linear-gradient(to bottom right,#008b04, #03a501);
+}
+.meeting-image{
+	background-image: url('../img/mainpage/pic/3.png');	
+}
+.earth-image{
+	background-image: url('../img/mainpage/pic/2.png');
+}
+.toolsImageBrokenLine{
+	background-image: url('../img/mainpage/icon/1.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.toolsImageHierachy{
+	background-image: url('../img/mainpage/icon/2.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.toolsImageGear{
+	background-image: url('../img/mainpage/icon/3.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.toolsImagePresent{
+	background-image: url('../img/mainpage/icon/4.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.toolsImageFile{
+	background-image: url('../img/mainpage/icon/5.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.toolsImageBriefcase{
+	background-image: url('../img/mainpage/icon/6.png');
+	height: 150px;
+	width: 120px;
+	top: 30px;
+	position: absolute;
+}
+.contentTip{
+	opacity:0;
+	display:block;
+	padding: 20px;
+	text-align: left;
+	line-height: inherit;
+	text-indent: 2em;
+	position: absolute;
+}
+.contentTipShow{
+	display:block;
+	padding: 20px;
+	text-align: left;
+	line-height: inherit;
+	text-indent: 2em;
+	position: absolute;
+}
+.coverHidden{
+	display:none;
+}
+.coverShrink{
+	width:0px !important;
+	height:0px !important;
+}
+/*
+.brick  .contentToggle{
+  -webkit-transition: opacity 1s ease-in-out;
+  -moz-transition: opacity 1s ease-in-out;
+  -o-transition: opacity 1s ease-in-out;
+  transition: opacity 1s ease-in-out;
+}
+.brick  .cover :hover{
+	opacity:0;
+}
+*/
+.hideSideMenuForMainPage {
+  display: none! important;
+}
+.fullFillDiv {
+   width:100%;
+   height:100%;
+}
+
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css b/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css
new file mode 100644
index 00000000..9c1b40f4
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/style-responsive.css
@@ -0,0 +1,989 @@
+/**
+ * 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.
+ */
+/***
+Responsive Theme. 
+Based on http://getbootstrap.com/css/#responsive-utilities-classes
+***/
+
+/***
+Fixed Footer
+***/
+
+.page-footer-fixed.page-footer-fixed-mobile .footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  bottom: 0;
+}
+
+.page-footer-fixed.page-footer-fixed-mobile .page-container {
+  margin-bottom: 20px !important;
+}
+
+.page-footer-fixed.page-footer-fixed-mobile.page-sidebar-fixed .footer {
+  margin-left: 0 !important;
+}
+
+/***
+Form Medium Devices Up To Large Devices
+***/
+
+@media (min-width: 992px) and (max-width: 1200px) {  
+
+	.page-boxed .header.navbar .dropdown .username {
+		display: none;
+	}	
+
+}
+
+@media (max-width: 1024px) {
+	.hidden-1024 {
+		display: none;
+	}
+} 
+
+/***
+From Medium Devices Up To Larger Devices
+***/
+
+@media (min-width: 992px) { 
+
+ 	/***
+ 	Page sidebar
+ 	***/
+ 	.page-sidebar {
+ 		width: 225px;
+ 		float: left;
+ 		position: relative;
+ 		margin-right: -100%;
+  	}
+
+  	.page-sidebar.navbar-collapse {
+  		max-height: none !important;
+  	}
+
+  	/***
+  	Page content
+  	***/
+ 	.page-content-wrapper {
+		float: left;
+		width: 100%;
+	}
+
+  	.page-content { 
+  		margin-left: 0px; 
+		margin-top: 0px;
+		min-height: 500px; 
+		padding: 20px 20px 0px 20px;
+	}
+
+	.page-content.no-min-height {
+		min-height: auto;
+	}
+
+	/***
+	Footer
+	***/
+	.footer {
+		clear: left;
+	}
+
+	/***
+  	Fixed Sidebar
+  	***/
+	.page-sidebar-fixed .page-content {
+		min-height: 500px; 
+	}
+
+	.page-sidebar-fixed .page-sidebar {
+	  	position: fixed !important;
+	  	margin-left: 0;
+	 	top: 41px;
+	}
+
+	.page-sidebar-fixed ul.page-sidebar-menu > li.last {
+		margin-bottom: 15px !important;
+	}
+
+	.page-sidebar-fixed.page-sidebar-hover-on .page-sidebar {
+		z-index: 10000;		
+		width: 35px;		
+	}
+
+	.page-sidebar-fixed.page-sidebar-hover-on .page-sidebar .selected {
+		display: none;
+	}
+
+	.page-sidebar-fixed.page-sidebar-hover-on .page-content {
+		margin-left: 35px;
+	}
+
+	.page-sidebar-fixed.page-sidebar-hover-on .footer {
+		margin-left: 35px;
+	}
+
+	.page-sidebar-fixed .page-sidebar-closed .page-sidebar .sidebar-search .submit,
+	.page-sidebar-fixed .page-sidebar .sidebar-toggler {
+		-webkit-transition: all  0.3s ease;
+	       -moz-transition: all  0.3s ease;
+	         -o-transition: all  0.3s ease;
+	            transition: all  0.3s ease;
+	}
+
+	.page-sidebar-fixed.page-sidebar-reversed .page-sidebar-closed .page-sidebar .sidebar-search .submit,
+	.page-sidebar-fixed.page-sidebar-reversed .page-sidebar .sidebar-toggler {
+		-webkit-transition: none;
+	       -moz-transition: none;
+	         -o-transition: none;
+	            transition: none;
+	}
+
+	.page-sidebar-hovering {
+		overflow: hidden !important;
+	}
+
+	.page-sidebar-hovering .sub-menu,
+	.page-sidebar-hovering span.title,
+	.page-sidebar-hovering span.arrow {		  
+		display: none !important;
+	}
+
+	.page-sidebar-hovering .submit {
+		opacity: 0;
+		width: 0 !important;
+		height: 0 !important;
+	}
+	
+	/***
+	Fixed Sidebar
+	***/
+
+	.page-sidebar-fixed .footer {
+	  margin-left: 225px;
+	  background-color: #fff;
+	  padding: 8px 20px 5px 20px;
+	}
+
+	.page-sidebar-fixed .footer .footer-inner {
+	  color: #333;
+	}
+
+	.page-sidebar-fixed.page-sidebar-closed .footer {
+	  margin-left: 35px;
+	}
+
+	.page-sidebar-fixed .footer .footer-tools .go-top { 
+	  background-color: #666;
+	}
+
+	.page-sidebar-fixed .footer .footer-tools .go-top i {
+	  color: #ddd;
+	}
+
+	/***
+	Boxed Layout
+	***/
+
+	.page-boxed	.header.navbar .navbar-brand {
+  		margin-left: 0px !important;
+  		width: 226px;
+	}
+
+	.page-boxed .header.navbar .navbar-brand img {
+		margin-left: 10px;
+	}
+
+	.page-boxed .header.navbar .navbar-nav {
+	  margin-right: 0px;
+	}
+
+	.page-boxed .footer {
+  		padding: 8px 0 5px 0; 
+	}
+
+	.page-boxed.page-sidebar-fixed .footer {
+		padding-right: 20px;
+		padding-left: 20px;
+	}
+	
+	/***
+	Sidebar Reversed
+	***/
+
+	.page-sidebar-reversed .page-sidebar {
+		float: right;
+		margin-right: 0;
+		margin-left: -100%;
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {
+		margin-left: -225px;
+	}
+
+  	.page-sidebar-reversed .page-content {
+  		margin-left: 0;
+  		margin-right: 225px;
+  	}
+
+  	.page-sidebar-reversed.page-sidebar-fixed .page-sidebar-wrapper {
+		position: relative;
+		float: right;
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed .footer {
+		margin-left: 0;
+		margin-right: 225px;
+		padding: 8px 20px 5px 20px; 
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed.page-footer-fixed .footer {
+		margin-left: 0;
+		margin-right: 0; 
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .page-content {
+		margin-left: 0;
+		margin-right: 35px;
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on .footer {
+		margin-right: 35px;
+	}
+
+	/***
+	Sidebar Closed
+	***/
+
+	.page-sidebar-closed .page-sidebar .sidebar-toggler {  
+  		margin-left: 3px;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search .form-container {  
+	  width: 29px;
+	  margin-left: 3px; 
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search .form-container .input-box {  
+	  border-bottom: 0 !important;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search .form-container input[type="text"] {
+	  display: none;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search .form-container .submit { 
+	  margin-top: 5px !important;
+	  margin-left: 7px !important;
+	  margin-right: 7px !important;
+	  display: block !important;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+	  width: 255px;
+	  position: relative;
+	  z-index: 1;
+	  padding-top: 0px;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container input[type="text"] {  
+	  margin-top: 7px;
+	  margin-left: 8px;
+	  padding-left: 10px;
+	  padding-bottom: 2px;
+	  width: 185px;
+	  display: inline-block !important;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit {
+	  display: inline-block;
+	  width: 13px;
+	  height: 13px;
+	  margin: 11px 8px 9px 6px !important;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+	  background-repeat: no-repeat;
+	  width: 11px;
+	  height: 11px;
+	  margin: 12px 8px 9px 8px !important;
+	  display: inline-block !important;
+	  float: left !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li > a .selected {
+	  right: -3px !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li > a > .title,
+	.page-sidebar-closed .page-sidebar-menu > li > a > .arrow {
+	  display: none !important;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-toggler {
+	  margin-right: 3px;
+	}
+
+	.page-sidebar-closed .page-sidebar .sidebar-search {
+	  margin-top: 6px;
+	  margin-bottom: 6px;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu {
+	  width: 35px !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li > a {
+	  padding-left: 7px;
+	}
+
+	.page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a {
+	  -webkit-transition: all 0.2s ease;
+	     -moz-transition: all 0.2s ease;
+	       -o-transition: all 0.2s ease;
+	          transition: all 0.2s ease;
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a {
+	    -webkit-transition: none;
+	        -moz-transition: none;
+	          -o-transition: none;
+	             transition: none;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover {
+	  width: 236px !important;
+	  position: relative !important;
+	  z-index: 2000;
+	  display: block !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover,
+	.page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {
+	  width: 35px !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover .selected {
+	  display: none;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover > a > i {
+	  margin-right: 10px;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover .title {
+	  display: inline !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li > .sub-menu {
+	  display: none !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {  
+	  width: 200px;
+	  position: absolute;
+	  z-index: 2000;
+	  left: 36px;
+	  margin-top: 0;
+	  top: 100%;
+	  display: block !important;
+	}
+
+	.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu,
+	.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu > li > .sub-menu {
+	  width: 200px;
+	}
+
+	/* 2rd level sub menu*/
+	.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > a {
+	  padding-left: 15px !important;
+	}
+
+	/* 3rd level sub menu*/
+	.page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > a {  
+	  padding-left: 30px !important;
+	}
+
+	/* 4rd level sub menu*/
+	.page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > .sub-menu > li > a {  
+	  padding-left: 45px !important;
+	}
+
+	/* sidebar container */
+	 
+	.page-sidebar-closed  .page-sidebar {
+	  width: 35px;
+	}
+
+	.page-sidebar-closed  .page-content {
+	  margin-left: 35px;
+	}
+
+	/*** 
+	Sidebar Reversed & Sidebar Closed
+	***/
+
+	.page-sidebar-reversed.page-sidebar-closed  .page-sidebar {
+	  margin-left: -35px;
+	  width: 35px;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed  .page-content {
+	  margin-left: 0 !important;
+	  margin-right: 35px !important;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover {
+	  margin-left: -201px;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-toggler-wrapper:hover,
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li.sidebar-search-wrapper:hover {
+	  margin-left: 0;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {
+	  margin-left: -225px;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit {
+	  margin: 11px 8px 9px 12px !important;
+	  float: left !important;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {
+	  margin: 12px 6px 9px 8px !important;
+	  float: right !important;
+	}
+
+	.page-sidebar-reversed.page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu {  
+	  left:auto;
+	  right: 36px;
+	}
+
+	.page-sidebar-reversed.page-sidebar-fixed.page-sidebar-closed .footer {
+		margin-right: 35px;
+	}
+
+	/***
+	Fixed Footer
+	***/
+
+	.page-footer-fixed .footer {
+	  position: fixed;
+	  left: 0;
+	  right: 0;
+	  z-index: 10000;
+	  bottom: 0;
+	}
+
+	.page-footer-fixed .page-container {
+	  margin-bottom: 20px !important;
+	}
+
+	.page-footer-fixed.page-sidebar-fixed .footer {
+	  margin-left: 0 !important;
+	}
+
+}
+
+/***
+Up To Medium Devices
+***/
+
+@media (max-width:991px) { 
+	
+	/***
+ 	Page header
+ 	***/
+ 	.header.navbar {
+ 		padding: 0 20px 0 20px;
+ 		position: relative;
+ 		clear: both;
+ 	}
+
+ 	.page-header-fixed.page-header-fixed-mobile .navbar-fixed-top {
+ 		position: fixed;
+ 	}
+
+ 	.header.navbar .navbar-toggle {
+ 		display: inline-block;
+ 	}
+
+ 	.page-sidebar.navbar-collapse {
+  		max-height: none; /* set some max height to have a scrollable menu on mobile devices */
+  	}
+
+ 	.page-sidebar.navbar-collapse.collapse {
+	    display: none !important;
+	}
+
+	.page-sidebar.navbar-collapse.in {	 	
+	 	overflow: hidden !important;
+	 	overflow-y: auto !important;
+	 	display: block !important;
+	}
+
+ 	.page-full-width .page-sidebar-menu {
+  		display: block;
+  	}
+
+	.page-sidebar.navbar-collapse.navbar-no-scroll {
+		max-height: none !important;
+	}
+
+	.header.navbar .nav li.dropdown i {
+		display: inline-block;
+		position: relative;
+		top:1px;
+		right:0px;
+	}
+
+	.header.navbar .navbar-nav {
+		display: block;
+		margin-bottom: 0px !important;
+	}
+
+	.header.navbar .navbar-nav .open .dropdown-menu  {
+		position: absolute;
+	}
+
+	.header.navbar .navbar-nav {
+		display: inline-block;
+    	margin: 0 10px 0 0;
+  	}
+  
+ 	.header.navbar .navbar-nav > li {
+    	float: left;
+  	}
+
+	.header.navbar .navbar-brand {
+  		margin-left: 0px !important;
+  		padding-left: 0px !important; 
+	}
+
+	.header.navbar .navbar-brand img {
+		margin-left: 4px !important;
+	}
+
+
+	/***
+	Header Search Box 
+	***/
+	
+	.header.navbar .search-form {
+		display: none;
+	}
+
+	.page-sidebar .header.navbar-responsive-search {
+		display: block;
+	}
+
+	/***
+	Page container
+	***/
+	.page-container {
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+ 	.page-header-fixed.page-header-fixed-mobile .page-container {
+ 		margin-top: 42px !important;
+ 	}
+
+	/***
+  	Page content
+  	***/
+  	.page-content {
+  		margin: 0px !important;
+  		padding: 20px 20px 20px 20px !important;  		
+		min-height: 280px; 
+  	}
+
+	/***
+	Page sidebar
+	***/
+	.page-sidebar {
+		border-top: 0 !important;
+		margin: 20px;
+	}
+
+	.page-sidebar.in {
+		border-top: 0 !important;
+		margin: 20px;
+		position: relative;
+		z-index: 5;
+	}
+
+	.header.navbar .sidebar-toggler,
+	.page-sidebar .sidebar-toggler {
+		display: none;
+	}
+
+	.page-sidebar ul {
+		margin-top:0px;
+		width:100%;
+	}
+
+	.page-sidebar .selected {
+		display: none !important;
+	}
+
+	.page-sidebar .sidebar-search .input-box {
+	  width: 220px;
+	}
+
+	/***
+	Styler panel
+	***/
+	.styler-panel {
+		top:55px;
+		right:20px;
+	}
+
+	/***
+	Boxed Layout
+	***/
+ 	.page-boxed .header.navbar > .container,
+ 	.page-boxed .footer > .container,
+ 	.page-boxed > .container {
+ 		max-width: none !important;
+ 		margin: 0 !important;
+ 		padding: 0 !important;
+ 	}
+
+}
+
+/***
+From Small Devices Up To Medium Devices
+***/
+ 
+@media (min-width: 768px) and (max-width: 991px) { 
+
+	/***
+	Body
+	***/
+	body {
+	 	padding-top: 0px;
+	}
+
+	/***
+	Page sidebar
+	***/
+	.page-sidebar .btn-navbar.collapsed .arrow { 
+		display: none;
+	}	
+
+	.page-sidebar .btn-navbar .arrow {
+	  position: absolute;
+	  right: 25px;
+	  width: 0; 
+	  height: 0;
+	  top:50px;
+	  border-bottom: 15px solid #5f646b;
+	  border-left: 15px solid transparent; 
+	  border-right: 15px solid transparent; 
+	}
+
+	/***
+	Boxed Layout
+	***/
+	.page-boxed .header.navbar > .container,
+	.page-boxed > .container {
+ 		margin: auto !important;
+ 	}
+
+ 	.page-boxed .header.navbar  {
+ 		margin: auto !important;
+ 		padding: 0;
+ 	}
+
+ 	.page-boxed .footer {
+ 		padding-left: 0;
+ 		padding-right: 0;
+ 	}
+
+} 
+ 
+/***
+Extra Small Devices Only
+***/
+
+@media (max-width: 767px) { 
+	
+	/***
+	Page header
+	***/
+	
+	.header.navbar {
+ 		padding: 0 10px 0 10px;
+ 	}
+
+	.header.navbar .top-nav .nav{  
+	 	margin-top: 0px;
+	 	margin-right: 5px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.notification:after, 
+	.header.navbar .nav > li > .dropdown-menu.notification:before {
+		margin-right: 160px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.notification {
+  		margin-right: -160px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.inbox:after, 
+	.header.navbar .nav > li > .dropdown-menu.inbox:before {
+		margin-right: 110px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.inbox {
+  		margin-right: -110px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.tasks:after, 
+	.header.navbar .nav > li > .dropdown-menu.tasks:before {
+		margin-right: 60px;
+	}
+
+	.header.navbar .nav > li > .dropdown-menu.tasks {
+  		margin-right: -60px;
+	}
+
+  	/* Header logo */
+	.header.navbar .navbar-brand {
+  		margin-left: 0px !important;
+  		width: 110px;
+	}
+
+	/***
+	Page content
+	***/
+	.page-content {
+		padding: 20px 10px 10px 10px !important;
+		overflow: hidden;
+	}
+
+	/***
+	Page title
+	***/
+	.page-title {
+		margin-bottom: 20px;
+		font-size: 18px;
+	}
+
+	.page-title small {
+		font-size: 13px;
+		padding-top: 3px;
+	}
+	
+	/***
+	Styler pagel
+	***/
+	.styler-panel {
+		top:58px;
+		right:12px;
+	}	
+
+	/***
+	Page breadcrumb
+	***/
+	.breadcrumb {
+		padding-left: 10px;
+  		padding-right: 10px;
+	}
+
+	/***
+	Portlet form action
+	***/
+	.portlet-body.form .form-actions{
+	  padding-left: 15px;	
+	} 
+
+
+	/***
+	Form input validation states
+	***/
+	.input-icon .input-error, 
+	.input-icon .input-warning, 
+	.input-icon .input-success { 
+		top:-27px;
+		float: right;
+		right:10px !important;
+	}	
+
+	/***
+	Advance tables
+	***/
+	.table-advance tr td.highlight:first-child a {
+		margin-left: 8px;
+	}
+
+	/***
+	Footer	
+	***/	
+	.footer {
+		padding-left: 10px;
+		padding-right: 10px;		
+	}	
+	
+	.footer .go-top {  
+		float: right;
+		display: block;
+		margin-right: 0px;
+	}
+
+	/***
+	Vertical inline menu
+	***/
+	.ver-inline-menu li.active:after {
+		display: none;
+	}
+
+	/***
+	Form controls
+	***/
+	.form-horizontal .form-actions {
+  		padding-left: 180px; 	
+  	}
+
+  	.portlet .form-horizontal .form-actions {
+  		padding-left: 190px; 	
+  	}
+}
+
+/***
+The Most Extra Small Devices Landscape Mode Only
+***/
+
+@media (max-width: 580px) {
+
+  	.header.navbar .username {
+  		display: none;
+  	}
+
+}
+
+@media (max-width: 480px) {
+
+	/***
+	Header navbar
+	***/
+	.page-header-fixed.page-header-fixed-mobile .header.navbar {
+		height: 84px;
+	}
+
+  	.page-header-fixed.page-header-fixed-mobile .page-container {
+  		margin-top: 84px !important;
+  	}
+
+	.header.navbar .navbar-nav {
+		display: block;
+		clear: both;
+		margin-top: 2px;
+		margin-right: 0;
+	}
+
+	.header.navbar .navbar-nav > li.dropdown .dropdown-toggle {
+  		margin-top:-1px;
+  		padding-left: 9px;
+  		padding-right: 9px;
+	}
+
+	.header.navbar .navbar-nav > li.dropdown.language .dropdown-toggle,
+	.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle {
+		padding-left: 4px;
+  		padding-right: 15px;
+	}
+
+  	.header.navbar .navbar-nav li.dropdown .dropdown-toggle .badge {
+  		top: 8px;
+  	}
+
+  	/***
+	Page sidebar
+	***/
+	.page-sidebar,
+	.page-sidebar.in {
+		margin: 0 10px 10px 10px;
+	}
+
+	.page-header-fixed.page-header-fixed-mobile .page-sidebar,
+	.page-header-fixed.page-header-fixed-mobile .page-sidebar.in {
+		margin-top: 10px;
+	}
+
+	/***
+	Page title
+	***/
+	.page-title small {
+		display: block;
+		clear: both;
+	}
+
+	/***
+	Forms
+	***/
+  	.portlet .form-horizontal .form-actions {
+  		padding-left: 10px; 	
+  	}
+
+	/***
+	Dashboard date range panel
+	***/
+	.page-content .breadcrumb .dashboard-date-range  {
+		padding-bottom: 8px;
+	} 
+
+	.page-content .breadcrumb .dashboard-date-range span {
+		display: none;
+	}	
+
+  	.page-content .breadcrumb > .btn-group span {
+  		display: none;
+  	}
+
+  	.page-content .breadcrumb > .btn-group > .btn {
+  		padding-left: 7px;
+  		padding-right: 7px;
+  	}
+
+	/***
+	Hidden phone
+	***/
+	.hidden-480 {
+		display: none !important;
+	}
+}
+
+/***
+The Most Extra Small Devices Portrait Mode Only
+***/
+
+@media (max-width: 320px) {
+
+	/***
+	Hidden phone
+	***/
+	.hidden-320 {
+		display: none;
+	}
+
+	.header.navbar .navbar-brand {
+		width: 100px;
+	}	
+}	
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/css/style.css b/openo-portal/portal-common/src/main/webapp/common/css/style.css
new file mode 100644
index 00000000..ade2221f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/css/style.css
@@ -0,0 +1,4715 @@
+/**
+ * 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.
+ */
+/***
+Colors
+blue:  #4b8df8
+light blue: #bfd5fa
+red: #e02222
+yellow: #ffb848
+green: #35aa47
+purple: #852b99
+dark: #555555;
+light grey: #fafafa;
+***/
+/*fontIcon*/
+[class^="ict-"], [class*=" ict-"]{
+  padding-right:3px;
+  display: inline-block;
+  width: 1.25em;
+  text-align: center;
+}
+.page-sidebar-menu [class^="ict-"], .page-sidebar-menu [class*=" ict-"]{
+padding-right:0;
+}
+/*********************
+ GENERAL RESET & SETUP 
+*********************/
+
+/***
+Reset and overrides  
+***/
+body { 
+  color: #333; 
+  /*font-family: 'Open Sans', sans-serif;
+  font-size:13px; */
+  font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  direction: ltr;
+}
+.page-content-body{
+padding-left:15px;
+padding-right:15px;
+padding-top:10px;
+}
+/*
+Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't 
+properly apply the media queries in Bootstrap's CSS. To address this, 
+you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
+*/
+@-webkit-viewport { 
+  width: device-width; 
+}
+
+@-moz-viewport { 
+  width: device-width; 
+}
+
+@-ms-viewport { 
+  width: device-width; 
+}
+
+@-o-viewport { 
+  width: device-width; 
+}
+
+@viewport { 
+  width: device-width; 
+}
+
+/* Internet Explorer 10 doesn't differentiate device width from viewport width, 
+and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */
+@-ms-viewport { 
+  width: auto !important; 
+}
+
+/***
+Custom Scrollbars
+***/
+
+::-webkit-scrollbar {  
+    width: 12px;  
+}  
+
+::-webkit-scrollbar-track {  
+    background-color: #eaeaea;  
+    border-left: 1px solid #cecece;  
+}  
+
+::-webkit-scrollbar-thumb {  
+    background-color: #cecece;  
+}  
+
+::-webkit-scrollbar-thumb:hover {  
+    background-color: #aaa;  
+}  
+
+::-webkit-scrollbar-track {
+    border-radius: 0;
+    box-shadow: none;
+    border: 0; 
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 0;
+    box-shadow: none;
+    border: 0; 
+}
+
+/***
+General typography 
+***/
+h1 small,
+h2 small,
+h3 small, 
+h4 small, 
+h5 small,
+h6 small {
+  color: #444;
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+  font-family: Arial, sans-serif;
+  font-weight: 300 !important;
+}
+
+h1.block, 
+h2.block, 
+h3.block, 
+h4.block, 
+h5.block, 
+h6.block {
+  padding-top: 10px; 
+  padding-bottom: 10px;
+}
+
+a {
+  text-shadow: none !important;
+  color: #5b9bd1;
+}
+
+/***
+Fix link outlines after click
+***/
+a,a:focus, a:hover, a:active {
+  outline: 0;
+}
+
+/***
+General backgrounds. Can be applied to any block or panel
+***/
+
+.bg-blue {
+  background-image: none !important;
+  background-color: #4b8df8 !important;
+  border-color:#4b8df8 !important;
+  color: #fff !important;
+}
+
+.bg-red {
+  background-image: none !important;
+  background-color: #e02222 !important;
+  border-color: #e02222 !important;
+  color: #fff !important;
+}
+
+.bg-yellow {
+  background-image: none !important;
+  background-color: #ffb848 !important;
+  border-color: #ffb848 !important;
+  color: #fff !important;
+}
+
+.bg-green {
+  background-image: none !important;
+  background-color: #35aa47 !important;
+  border-color: #35aa47 !important;
+  color: #fff !important;
+}
+
+.bg-purple {
+  background-image: none !important;
+  background-color: #852b99 !important;
+  border-color: #852b99 !important;
+  color: #fff !important;
+}
+
+.bg-dark {
+  background-image: none !important;
+  background-color: #555555 !important;
+  border-color: #555555 !important;
+  color: #fff !important;
+}
+
+.bg-grey {
+  background-image: none !important;
+  background-color: #fafafa !important;
+  border-color: #fafafa !important;
+}
+
+/***
+Font Awesome Icons
+***/
+
+[class^="fa-"],
+[class*=" fa-"] {
+  display: inline-block;
+/*  margin-top: 1px;*/
+  font-size: 14px;
+  *margin-right: .3em;
+  line-height: 14px;
+}
+
+/***
+Make font awesome icons fixed width(latest version issue)
+***/
+
+li [class^="fa-"],
+li [class*=" fa-"] {
+  display: inline-block;
+  width: 1.25em;
+  text-align: center;
+}
+li [class^="fa-"].icon-large,
+li [class*=" fa-"].icon-large {
+  /* increased font size for icon-large */
+  width: 1.5625em;
+}
+
+.page-breadcrumb  .fa-angle-right{
+	display:inline-block;
+	margin-left:8px;
+	margin-right:8px;
+}
+
+.page-breadcrumb  i[class^="fa-"], [class*=" fa-"],.page-breadcrumb  i[class^="ict-"], [class*=" ict-"]{
+	display:none;
+}
+
+
+
+.fa-lg,
+.icon-lg {
+  font-size: 16px;
+}
+
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+
+.icon-default {
+  color: #ccc;
+}
+
+.icon-success {
+  color: #468847;
+}
+
+.icon-info {
+  color: #27a9e3; 
+}
+
+.icon-warning {
+  color: #dbc056;
+}
+
+.icon-danger {
+  color: #B94A48;
+}
+
+/***
+Close icon used for modal dialog and other UI element close buttons
+***/
+.close {
+  display: inline-block;
+  margin-top: 0px;
+  margin-right: 0px;
+  width: 9px;
+  height: 9px;
+  background-repeat: no-repeat !important;
+  text-indent: -10000px;
+  outline: none;
+  background-image: url("../img/remove-icon-small.png") !important;
+}
+
+.about{
+    height:345px;
+    width:528px;
+}
+
+.aboutmain{
+    background-image: url("../img/about/about-bg-light.png");
+}
+
+.aboutinfo{
+    background-image: url("../img/about/about-bg-dark.png");
+}
+
+.about a{
+    color: white;
+
+    margin-left:15px;
+    text-decoration: none;
+}
+
+.about a.about_close{
+    float:right;
+    margin-right:20px;
+    font-size: 1.2em;
+}
+
+.about div{
+    padding-top:10px;
+
+}
+
+.about div.info{
+    float: right;
+    margin-right: 15px;
+    margin-top: 130px;
+    color: white;
+    font-size: 13px;
+}
+
+.about div.info div{
+    margin-left:15px;
+}
+
+.about div.info img{
+    margin-right: 55px;
+}
+
+.aboutDlg{
+    width: 530px;
+    margin-left:150px;
+}
+
+/***
+General HR
+***/
+
+hr {
+  margin: 20px 0;
+  border: 0;
+  border-top: 1px solid #E0DFDF;
+  border-bottom: 1px solid #FEFEFE;
+}
+
+/***
+Tools
+***/
+
+.display-none,
+.display-hide {
+  display: none;
+}
+
+.no-space {
+  margin: 0px !important;
+  padding: 0px !important;
+}
+
+.no-margin {
+  margin:0;
+}
+
+.no-border {
+  border:0 !important;
+}
+
+.margin-bottom-5 {
+  margin-bottom: 5px;
+}
+
+.margin-bottom-10 {
+  margin-bottom: 10px !important;
+}
+
+.margin-top-10 {
+  margin-top: 10px !important;
+}
+
+.margin-bottom-15 {
+  margin-bottom: 15px !important;
+}
+
+.margin-bottom-20 {
+  margin-bottom: 20px !important;
+}
+
+.margin-top-20 {
+  margin-top: 20px !important;
+}
+
+.margin-bottom-25 {
+  margin-bottom: 25px !important;
+}
+
+.margin-right-10 {
+  margin-right: 10px !important;
+}
+
+.bold {
+  font-weight:600 !important;
+}
+
+.fix-margin {
+  margin-left: 0px !important
+}
+
+.border {
+  border: 1px solid red;
+}
+
+.inline {
+  display: inline;
+}
+
+.text-align-reverse {
+  text-align: right;
+}
+
+/***
+ie8 & ie9 modes
+***/
+
+.visible-ie8 {
+  display: none;
+}
+
+.ie8 .visible-ie8 {
+  display: inherit !important;
+}
+
+.visible-ie9 {
+  display: none;
+}
+
+.ie9 .visible-ie9 {
+  display: inherit !important;
+}
+
+.hidden-ie8 {
+  display: inherit;
+}
+
+.ie8 .hidden-ie8 {
+  display: none !important;
+}
+
+.hidden-ie9 {
+  display: inherit;
+}
+
+.ie9 .hidden-ie9 {
+  display: none !important;
+}
+
+/********************
+ GENERAL LAYOUT 
+*********************/
+
+/***
+Header and header elements.
+***/
+
+.header.navbar {
+  width: 100%; 
+  padding: 0 20px 0 20px;
+  margin: 0;
+  border: 0px;
+  padding: 0px; 
+  box-shadow: none;
+  height: 42px; 
+  min-height: 42px;
+}
+
+.header.navbar.navbar-fixed-top {
+  z-index: 9995 !important;
+}
+
+.header.navbar .navbar-brand {
+  display: inline-block;
+  margin-top: -1px;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+  width: 225px;
+  height: 42px;
+}
+
+.header.navbar .navbar-brand img {
+  margin-left: 20px; 
+}
+
+.header.navbar .navbar-brand.text-logo {
+  padding-left: 20px;
+  padding-top: 12px;
+}
+
+.header.navbar .navbar-toggle {
+  margin: 8px 6px 4px 6px;
+  padding: 0; 
+  padding-top:2px;
+  padding-bottom: 6px; 
+  background-image: none;
+  filter:none;
+  box-shadow: none;
+  color: #fff;
+  border: 0;
+}
+
+.header.navbar .navbar-toggle:hover {
+  text-decoration: none;
+  background: none;
+}
+
+.header.navbar .navbar-nav {
+  margin-right: 20px;
+  display: block; 
+}
+
+.header.navbar .navbar-nav > li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.header.navbar .navbar-nav > li.dropdown, 
+.header.navbar .navbar-nav > li.dropdown > a {
+  padding-left: 4px; 
+  padding-right: 4px;
+}
+
+.header.navbar .navbar-nav > li.dropdown > a:last-child {
+  padding-right: 0;
+}
+
+.header.navbar .navbar-nav > li.dropdown:last-child {
+   padding-right: 2px;
+}
+
+.header.navbar .navbar-nav > li.dropdown .dropdown-toggle {
+  margin: 0px;
+  padding: 15px 10px 7px 10px;
+}
+
+.header.navbar .navbar-nav > li.dropdown .dropdown-toggle > i {
+  font-size: 18px;
+}
+
+.header.navbar .navbar-nav > li.dropdown .dropdown-menu > li > a > i {
+  font-size: 14px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle {
+  padding-top: 9px;  
+  *padding: 9px 18px 6px 6px; 
+}
+
+.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle:hover {
+  text-decoration: none;
+}
+
+.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle .username {
+  color: #ddd;
+}
+
+.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle i {
+  display: inline-block;
+  margin-top: 5px;
+  margin: 0;
+  font-size: 16px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.user .dropdown-menu i {
+  width: 15px;
+  display: inline-block;
+}
+
+.header.navbar .navbar-nav > li.dropdown .dropdown-toggle .badge {
+  position: absolute;
+  top: 8px;
+  right: 20px;
+}
+
+
+.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle {
+  padding: 13px 0px 6px 6px;  
+}
+
+.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle:hover {
+  text-decoration: none;
+}
+
+.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle .sysname {
+  color: #ddd;
+}
+
+.header.navbar .navbar-nav > li.dropdown.system .dropdown-toggle i {
+  display: inline-block;
+  margin-top: 5px;
+  margin: 0;
+  font-size: 16px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.system .dropdown-menu i {
+  width: 15px;
+  display: inline-block;
+}
+
+/***
+Header Search
+***/
+.header.navbar .search-form {
+  float: left;
+  display: inline-block;
+  padding: 0;
+  height: 41px;
+  margin:0;
+}
+
+.header.navbar .search-form .form-control{
+  margin-top: 8px;
+  border: 0;
+  padding-top: 1px;
+  padding-right: 27px;
+}
+
+.header.navbar .search-form .submit {  
+  position: relative;
+  display: block;
+  float: right;
+  margin-top: -21px;
+  margin-right: 8px;
+  width: 13px;
+  height: 15px;
+  box-shadow: none;
+  border: 0px; 
+  padding: 0px;
+  background-color: none;
+  background-repeat: no-repeat !important;  
+  outline: none !important;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.header.navbar .search-form .submit:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);  
+}
+
+/***
+Language Bar
+***/
+
+.header.navbar .navbar-nav > li.dropdown.language {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+.header.navbar .navbar-nav > li.dropdown.language > a {
+  color: #ddd;
+  font-size: 13px;
+  padding: 11px 1px 11px 5px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.language > a > img {
+  margin-bottom: 2px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.language > a > i {
+  font-size: 16px;
+}
+
+.header.navbar .navbar-nav > li.dropdown.language > .dropdown-menu > li > a > img {
+  margin-bottom: 2px;
+}
+
+.header.navbar .navbar-nav .dropdown-menu {
+  margin-top: 3px;
+}
+
+/***
+Page container
+***/
+
+.page-container {
+  margin: 0px;
+  padding: 0px;
+  position: relative;
+}
+
+.page-container:before,
+.page-container:after {
+  display: table;
+  content: " ";
+}
+
+.page-container:after {
+  clear: both;
+}
+
+.page-header-fixed .page-container {
+  margin-top: 42px;  
+}
+
+/*** IE 8 Fixes ***/
+/***
+Page sidebar
+***/
+
+.ie8 .page-sidebar {
+  width: 225px;
+  float: left;
+  position: relative;
+  margin-right: -100%;
+}
+
+/***
+Page content
+***/
+
+.ie8 .page-content-wrapper {
+    float: left;
+    width: 100%;
+  }
+
+.ie8 .page-content { 
+    margin-left: 225px; 
+    margin-top: 0px;
+    min-height: 540px; 
+    padding: 20px 20px 20px 20px;
+ }
+/*** IE 8 Fixes ***/
+
+/***
+Page sidebar
+***/
+
+.page-sidebar.navbar-collapse {
+  padding: 0;
+}
+
+.page-sidebar-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin: 0;
+  padding: 0; 
+}
+
+.page-sidebar-menu > li {
+  display: block;
+  margin: 0;
+  padding: 0; 
+  border: 0px;
+}
+
+.page-sidebar-menu > li.start > a {
+   border-top-color: transparent !important;
+}
+
+.page-sidebar-menu > li:last-child > a,
+.page-sidebar-menu > li.last > a {
+   border-bottom-color: transparent !important;
+}
+
+.page-sidebar-menu > li > a {
+  display: block;
+  position: relative;
+  margin: 0;
+  border: 0px;
+  padding: 10px 15px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.page-sidebar-fixed .page-sidebar-menu > li > a {
+  -webkit-transition: all 0.2s ease;
+     -moz-transition: all 0.2s ease;
+       -o-transition: all 0.2s ease;
+          transition: all 0.2s ease;
+}
+
+.page-sidebar-reversed.page-sidebar-fixed .page-sidebar-menu > li > a{
+     -webkit-transition: none;
+        -moz-transition: none;
+          -o-transition: none;
+             transition: none;
+}
+
+.page-sidebar-menu > li > a i {
+  font-size: 16px;
+  margin-right: 5px;
+  text-shadow:none; 
+}
+
+.page-sidebar-menu > li.break {
+  margin-bottom: 20px;
+}
+
+.page-sidebar-menu > li.open > a {
+  font-size: 14px;
+}
+
+.page-sidebar-menu > li.active > a {
+  border: none; 
+  text-shadow:none;
+  font-size: 14px;
+}  
+
+.page-sidebar-menu > li.active > a .selected {
+  display: block;
+  width: 8px;
+  height: 25px;
+  background-image: url("../img/sidebar-menu-arrow.png");
+  float: right;
+  position: absolute;
+  right:0px;
+  top:8px;
+}
+
+.page-sidebar-reversed .page-sidebar-menu > li.active > a .selected {
+  background-image: url("../img/sidebar-menu-arrow-reverse.png");
+  right: auto;
+  left:0;
+}
+
+.page-sidebar ul > li > a > .arrow:before {  
+   float: right;
+   margin-top: 0px;
+   margin-right: 5px;
+   display: inline;
+   font-size: 16px;
+   font-family: FontAwesome;
+   height: auto;
+   content: "\f104";
+   font-weight: 300;
+   text-shadow:none;
+}
+
+.page-sidebar-menu > li > a > .arrow.open:before {   
+   float: right;
+   margin-top: 0px;
+   margin-right: 3px;
+   display: inline;
+   font-family: FontAwesome;
+   height: auto;
+   font-size: 16px;
+   content: "\f107";
+   font-weight: 300;
+   text-shadow:none;
+}
+
+/* bagin: sidebar menu badges */
+.page-sidebar-menu li > a > .badge {
+   float: right;
+   margin-top: 1px;
+   margin-right: 13px;
+}
+
+/* end: sidebar menu badges */
+
+.page-sidebar-menu .sub-menu {
+  padding: 0;
+}
+
+.page-sidebar-menu > li > ul.sub-menu {
+  display: none;
+  list-style: none;
+  clear: both;
+  margin: 8px 0px 8px 0px;
+}
+
+.page-sidebar-menu > li.active > ul.sub-menu {
+  display: block;
+}
+
+.page-sidebar-menu > li > ul.sub-menu > li {
+  background: none;
+  margin: 0px;
+  padding: 0px;
+  margin-top: 1px !important;
+}
+
+.page-sidebar-menu > li > ul.sub-menu > li > a {
+  display: block;
+  margin: 0px 0px 0px 0px;
+  padding: 5px 0px;
+  padding-left: 44px !important;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 300;
+  background: none;
+}
+
+/* 3rd level sub menu */
+.page-sidebar-menu > li > ul.sub-menu  > li ul.sub-menu {
+  display: none;
+  list-style: none;
+  clear: both;
+  margin: 0px 0px 0px 0px;
+}
+
+.page-sidebar-menu > li > ul.sub-menu  li > a > .arrow:before   {  
+   float: right;
+   margin-top: 1px;
+   margin-right: 20px;
+   display: inline;
+   font-size: 16px;
+   font-family: FontAwesome;
+   height: auto;
+   content: "\f104";
+   font-weight: 300;
+   text-shadow:none;
+}
+
+.page-sidebar-menu > li > ul.sub-menu  li > a > .arrow.open:before {   
+   float: right;
+   margin-top: 1px;
+   margin-right: 18px;
+   display: inline;
+   font-family: FontAwesome;
+   height: auto;
+   font-size: 16px;
+   content: "\f107";
+   font-weight: 300;
+   text-shadow:none;
+}
+
+.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu {
+  display: block;
+}
+
+.page-sidebar-menu > li > ul.sub-menu > li  ul.sub-menu li {
+  background: none;
+  margin: 0px;
+  padding: 0px;
+  margin-top: 1px !important;
+}
+
+.page-sidebar-menu > li > ul.sub-menu  li > ul.sub-menu > li > a {
+  display: block;
+  margin: 0px 0px 0px 0px;
+  padding: 5px 0px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 300;
+  background: none;
+}
+
+.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
+  padding-left: 60px;
+}
+
+.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
+  padding-left: 80px;
+}
+
+.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu {
+  display: block;
+}
+
+
+.page-sidebar-menu > li > ul.sub-menu  li > ul.sub-menu > li > a > i {
+  font-size: 13px;
+}
+
+/***
+Sidebar Search
+***/
+
+.page-sidebar .sidebar-search {
+  padding:0;
+  margin: 0;
+}
+
+.page-sidebar .header.navbar-responsive-search {
+  display: none;
+}
+
+.page-sidebar .sidebar-search .form-container {
+  margin: 15px 20px 15px 20px;
+  height: 35px;
+  padding-top: 7px;
+}
+
+.page-sidebar .sidebar-search .form-container .submit {  
+  display: block;
+  float: right;
+  margin-top: 3px;
+  width: 13px;
+  height: 15px;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  border: 0px; 
+  padding: 0px;
+  outline: none !important;
+}
+ 
+.page-sidebar .sidebar-search .form-container input[type="text"] {
+  margin: 0px;
+  width: 165px;
+  border: 0px;
+  padding: 0 !important;
+  font-size: 14px !important;
+  box-shadow: none !important;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.page-sidebar .sidebar-search .form-container input[type="text"]:focus {
+  outline: none !important;
+}
+
+/***
+Sidebar toggler(show/hide)
+***/
+.sidebar-toggler {
+  cursor: pointer; 
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  width: 29px;
+  height: 29px;
+  background-repeat: no-repeat;
+}
+
+.sidebar-toggler:hover { 
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+.page-sidebar .sidebar-toggler {
+  margin-top: 15px;
+ /* margin-left: 175px;*/
+}
+
+.header.navbar .sidebar-toggler {
+  float: left;
+  display: inline-block;
+  margin-top: 6px;
+  margin-left: -42px;
+}
+
+/***
+Page content
+***/
+.page-content {  
+  margin-top: 0px;   
+  padding: 0px;
+  background-color: #fff; 
+}
+
+.ie8 .page-content { 
+    padding: 20px;
+    margin-left: 225px; 
+    margin-top: 0px;
+    min-height: 760px;
+}
+
+.ie8 .page-sidebar-fixed .page-content {
+    min-height: 600px; 
+}
+
+.ie8 .page-content.no-min-height {
+    min-height: auto;
+}
+
+.page-full-width .page-content {
+    margin-left: 0px !important;
+}
+
+.page-full-width .page-sidebar-menu {
+  display: none;
+}
+
+/***
+Page title
+***/
+.page-title {
+  padding: 0px;
+  font-size: 30px;
+  letter-spacing: -1px;
+  display: block;
+  color: #666;
+  margin: 0px 0px 15px 0px;
+  font-weight: 300;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.page-title small {
+  font-size: 14px;
+  letter-spacing: 0px;
+  font-weight: 300;
+  color: #888;
+}
+
+/***
+Page breadcrumb
+***/
+
+.ie8 .row .page-breadcrumb.breadcrumb > li {
+  margin-right: 1px;
+}
+
+.page-content .page-breadcrumb.breadcrumb {
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  box-shadow: none;
+  padding-right: 30px;
+  padding-left: 8px;
+  margin-top: 15px;
+  margin-bottom: 25px;
+  border:0px !important;  
+  background-color: #fff;
+}
+
+.page-content .page-breadcrumb.breadcrumb > li > a, 
+.page-content .page-breadcrumb.breadcrumb > li > i, 
+.page-content .page-breadcrumb.breadcrumb > li > span {
+  color: #333;
+  font-size: 14px;
+  text-shadow:none;
+}
+
+.page-content .page-breadcrumb.breadcrumb > li > i {
+  color: #666;
+} 
+
+.page-content .page-breadcrumb.breadcrumb > li+li:before {
+  display: none;
+}
+
+/* Dashboard breadcrumb Dropdown */
+.page-content .page-breadcrumb.breadcrumb  .more-botton-zone  .btn-group {
+  right: 15px;
+  position: absolute;
+  margin-top: -8px;
+}
+.page-content .page-breadcrumb.breadcrumb  .more-botton-zone {
+	position:inherit;
+}
+
+.page-content .page-breadcrumb.breadcrumb  .more-botton-zone  .btn-group  .btn {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12px;
+}
+
+/* Dashboard date range panel */
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range  {
+  position: relative;
+  top: -8px;
+  margin-right: -30px;
+  display: none;
+  padding: 9px 9px 8px 9px;
+  cursor: pointer;
+  color: #fff;
+  background-color: #e02222;
+}
+
+/* hack for chrome and safari */
+@media all and (-webkit-min-device-pixel-ratio:0) {
+  .page-content .page-breadcrumb.breadcrumb .dashboard-date-range  {
+    padding: 9px;
+  } 
+}
+
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > span {
+  font-size: 12px;
+  font-weight: 300; 
+  color: #fff;
+  text-transform: uppercase;
+} 
+
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .fa-calendar {
+  text-transform: none;
+  color: #fff;
+  margin-top: 0px;
+  font-size: 14px;
+}
+
+.page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .fa-angle-down {
+  color:#fff;
+  font-size: 16px;
+}
+
+/***
+Footer
+***/
+
+.footer {
+  padding: 8px 20px 5px 20px; 
+  font-size: 12px;
+}
+
+.footer:after,
+.footer:before {
+  content: "";
+  display: table;
+  line-height: 0;
+}
+
+.footer:after {
+  clear: both;
+}
+
+.footer .footer-inner {
+  float: left;
+  display: inline-block;
+}
+
+.footer .footer-tools {
+  float: right;
+  display: inline-block;
+}
+
+.footer .footer-tools .go-top { 
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  margin-top: -2px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  font-size: 16px;
+  padding: 0px 6px 0px 6px;
+}
+
+.footer .footer-tools .go-top i {
+  font-size: 22px;
+  margin-bottom: 5px; 
+}
+
+
+/********************
+ GENERAL UI ELEMENTS 
+*********************/
+
+/***
+Icon stuff
+***/
+i.icon, a.icon {
+  color: #999;
+  margin-right: 5px;
+  font-weight: normal;
+  font-size: 13px;
+}
+
+i.icon-black {
+  color: #000 !important;
+}
+
+a.icon:hover {
+  text-decoration: none;
+  -webkit-transition: all 0.1s ease-in-out;
+  -moz-transition: all 0.1s ease-in-out;
+  -o-transition: all 0.1s ease-in-out;
+  -ms-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+  opacity: .4;
+  filter:alpha(opacity=40);
+}
+
+a.icon.huge i{
+  font-size: 16px !important;
+}
+
+i.big {
+  font-size: 20px;
+}
+
+i.warning {
+  color: #d12610;
+}
+
+i.critical {
+  color: #37b7f3;
+}
+
+i.normal {
+  color: #52e136;
+}
+
+/***
+Custom wells
+***/
+.well {
+  background-color: #fafafa;
+  border: 1px solid #eee;
+  -webkit-border-radius: 0px;
+     -moz-border-radius: 0px;
+          border-radius: 0px;   
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;        
+}
+
+.well.mini {
+  padding: 7px !important;
+}
+
+/***
+Form stuff
+***/
+
+
+/***
+Bordered form layout
+***/
+
+/***
+Input icons
+***/
+
+/* input with right aligned and colored icons */
+
+/* input with left aligned icons */
+.input-icon {
+  position: relative;
+}
+
+
+.input-icon input {
+   padding-left: 33px !important;
+}
+
+.input-icon i {
+  color: #ccc;
+  display: block;
+  position: absolute;
+  margin: 11px 2px 4px 10px;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.input-icon.right input {
+   padding-left: 12px !important;
+   padding-right: 33px !important;
+}
+
+.input-icon.right i {
+   right: 8px;
+   float: right;
+}
+
+.has-success .input-icon > i {
+  color: #468847;
+}
+
+.has-warning .input-icon > i {
+  color: #c09853;
+}
+
+.has-error .input-icon > i {
+  color: #b94a48;
+}
+
+/***
+Portlets
+***/
+.portlet  {
+  clear: both;
+  margin-top: 0px;
+  margin-bottom: 25px;
+  padding: 0px;
+}
+
+.portlet > .portlet-title {  
+  margin-bottom: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.portlet > .portlet-title:after,
+.portlet > .portlet-title:before {
+  content: "";
+  display: table;
+  line-height: 0;
+}
+
+.portlet > .portlet-title:after {
+  clear: both;
+}
+
+.portlet > .portlet-title > .caption {
+  float: left;
+  display: inline-block;
+  font-size: 18px;
+  line-height: 18px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 8px; 
+}
+
+.portlet > .portlet-title > .caption > i {
+  float: left;
+  margin-top: 4px;
+  display: inline-block !important;
+  font-size: 13px;
+  margin-right: 5px;
+  color: #666;
+}
+
+.portlet.blue > .portlet-title > .caption,
+.portlet.green > .portlet-title > .caption, 
+.portlet.yellow > .portlet-title > .caption,
+.portlet.red > .portlet-title > .caption, 
+.portlet.purple > .portlet-title > .caption, 
+.portlet.grey > .portlet-title > .caption {
+  color: #fff;
+}
+
+.portlet.box.blue > .portlet-title > .caption > i, 
+.portlet.box.green > .portlet-title > .caption > i,
+.portlet.box.grey > .portlet-title > .caption > i,
+.portlet.box.yellow > .portlet-title > .caption > i, 
+.portlet.box.red > .portlet-title > .caption > i,  
+.portlet.box.purple > .portlet-title > .caption > i, 
+.portlet.box.light-grey > .portlet-title > .caption > i{
+  color: #fff;
+}
+
+.sortable .portlet > .portlet-title {
+  cursor: move;
+}
+
+.portlet > .portlet-title > .tools,
+.portlet > .portlet-title > .actions
+ {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  margin-top: 6px;
+  float: right;
+}
+
+.portlet > .portlet-title > .tools > a {
+  display: inline-block;
+  height: 16px;
+  margin-left:5px;
+}
+
+.portlet > .portlet-title > .actions > .dropdown-menu i {
+  color: #000 !important;
+}
+
+.portlet > .portlet-title > .tools > a.remove {
+  margin-bottom: 2px;
+  background-image:url(../img/portlet-remove-icon.png);
+  background-repeat: no-repeat;
+  width: 11px;
+}
+
+.portlet > .portlet-title > .tools > a.config {
+  margin-bottom: 2px;
+  background-image:url(../img/portlet-config-icon.png);
+  background-repeat: no-repeat;
+  width: 12px;
+}
+
+.portlet > .portlet-title > .tools > a.reload {
+  margin-bottom: 2px;
+  background-image:url(../img/portlet-reload-icon.png);
+  width: 13px;
+}
+
+.portlet > .portlet-title > .tools > a.expand {
+  margin-bottom: 2px;
+  background-image:url(../img/portlet-expand-icon.png);
+  width: 14px;
+}
+
+.portlet > .portlet-title > .tools > a.collapse {
+  margin-bottom: 2px;
+  background-image:url(../img/portlet-collapse-icon.png);
+  width: 14px;
+}
+
+.portlet > .portlet-title > .tools > a:hover {
+  text-decoration: none;
+  -webkit-transition: all 0.1s ease-in-out;
+  -moz-transition: all 0.1s ease-in-out;
+  -o-transition: all 0.1s ease-in-out;
+  -ms-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+  opacity:.6;  
+  filter:'alpha(opacity=60)';
+}
+
+.portlet > .portlet-title > .actions > .btn-group {
+  margin-top: -13px;
+}
+
+.portlet > .portlet-title > .actions > .btn {
+  padding: 4px 10px;
+  margin-top: -14px;
+}
+
+.portlet > .portlet-title > .actions > .btn-group > .btn {
+  padding: 4px 10px;
+  margin-top: -1px;
+}
+
+.portlet > .portlet-title > .actions > .btn.btn-sm {
+  padding: 3px 8px;
+  margin-top: -13px;
+}
+
+.portlet > .portlet-title > .actions > .btn-group > .btn-sm {
+  padding: 3px 8px;
+  margin-top: -1px;
+}
+
+.portlet > .portlet-title > .pagination.pagination-sm {
+  float: right !important;
+  display: inline-block !important;
+  margin: 0px;
+  margin-top: -4px;
+}
+
+@media (max-width: 767px) { 
+  .portlet > .portlet-title > .actions.btn-set > .btn-group,
+  .portlet > .portlet-title > .actions.btn-set > .btn {
+    margin-top: 0px;
+    margin-bottom: 5px;
+  }
+}
+
+.portlet > .portlet-body {
+  clear: both;  
+  padding: 0;  
+}
+
+.portlet > .portlet-empty {
+  min-height: 125px; 
+}
+
+.portlet > .portlet-body.light-blue, .portlet.light-blue {
+  background-color: #bfd5fa  !important;
+}
+
+.portlet > .portlet-body.blue, .portlet.blue {
+  background-color: #4b8df8 !important;
+}
+
+.portlet > .portlet-body.red, .portlet.red {
+  background-color: #e02222 !important;
+}
+
+.portlet > .portlet-body.yellow, .portlet.yellow {
+  background-color: #ffb848 !important;
+}
+
+.portlet > .portlet-body.green, .portlet.green {
+  background-color: #35aa47 !important;
+}
+
+.portlet > .portlet-body.purple, .portlet.purple {
+  background-color: #852b99 !important;
+}
+
+.portlet > .portlet-body.light-grey, .portlet.light-grey {
+  background-color: #fafafa !important;
+}
+
+.portlet > .portlet-body.grey, .portlet.grey {
+  background-color: #555555 !important;
+}
+
+/*  draggable girds */
+
+.ui-sortable-placeholder { 
+    border: 1px dotted black; 
+    visibility: visible !important; 
+    height: 100% !important; 
+}
+  
+.ui-sortable-placeholder * { 
+  visibility: hidden; 
+}
+
+.sortable-box-placeholder {
+  background-color: #f5f5f5;
+  border: 1px dashed #DDDDDD;
+  display: block;
+  /* float: left;*/
+  margin-top: 0px !important;
+  margin-bottom: 24px !important;
+}
+
+.sortable-box-placeholder * {
+  visibility:hidden;
+}
+
+/***
+Solid colored portlet
+***/
+.portlet.solid {
+  padding: 10px;
+}
+
+.portlet.solid > .portlet-title > .tools {
+  margin-top: 2px;
+  border: 0px;
+}
+
+.portlet.solid > .portlet-title {
+  margin-bottom: 5px;
+  border: 0px;
+}
+
+.portlet.solid.bordered > .portlet-title {
+  margin-bottom: 15px;
+}
+
+.portlet.solid.red > .portlet-title,
+.portlet.solid.red > .portlet-title > .caption > i,
+.portlet.solid.red > .portlet-body,
+
+.portlet.solid.green > .portlet-title,
+.portlet.solid.green > .portlet-title > .caption > i,
+.portlet.solid.green > .portlet-body,
+
+.portlet.solid.yellow > .portlet-title,
+.portlet.solid.yellow > .portlet-title > .caption > i,
+.portlet.solid.yellow > .portlet-body,
+
+.portlet.solid.grey > .portlet-title,
+.portlet.solid.grey > .portlet-title > .caption > i,
+.portlet.solid.grey > .portlet-body,
+
+.portlet.solid.purple > .portlet-title,
+.portlet.solid.purple > .portlet-title > .caption > i,
+.portlet.solid.purple > .portlet-body,
+
+.portlet.solid.blue > .portlet-title,
+.portlet.solid.blue > .portlet-title > .caption > i,
+.portlet.solid.blue > .portlet-body {
+  border: 0;
+  color: #fff;
+}
+
+.portlet.bordered {
+  border-left: 2px solid #ddd;
+}
+
+/***
+Box portlet
+***/
+
+.portlet.box {
+   padding:0px !important
+}
+
+.portlet.box > .portlet-title {  
+   padding:8px 10px 2px 10px;
+   border-bottom: 1px solid #eee;
+   color: #fff !important;
+}
+
+.portlet.box > .portlet-title > .tools {
+  margin-top: 3px;
+}
+
+.portlet.box > .portlet-title > .tools > a.remove, 
+.portlet.solid > .portlet-title > .tools > a.remove {
+  background-image:url(../img/portlet-remove-icon-white.png);
+}
+
+.portlet.box > .portlet-title > .tools > a.config,
+.portlet.solid > .portlet-title > .tools > a.config {
+  background-image:url(../img/portlet-config-icon-white.png);
+}
+
+.portlet.box > .portlet-title > .tools > a.reload,
+.portlet.solid > .portlet-title > .tools > a.reload {
+  background-image:url(../img/portlet-reload-icon-white.png);
+}
+
+.portlet.box > .portlet-title > .tools > a.expand,
+.portlet.solid > .portlet-title > .tools > a.expand {
+  background-image:url(../img/portlet-expand-icon-white.png);
+}
+
+.portlet.box > .portlet-title > .tools > a.collapse,
+.portlet.solid > .portlet-title > .tools > a.collapse {
+  background-image:url(../img/portlet-collapse-icon-white.png);
+}
+
+/* portlet buttons */
+.portlet.box > .portlet-body {
+  background-color: #fff;
+  padding: 10px;
+}
+
+.portlet.box > .portlet-title {  
+  margin-bottom: 0px;
+}
+
+.portlet.box.blue > .portlet-title {
+  background-color: #4b8df8;
+} 
+
+.portlet.box.blue {  
+   border: 1px solid #b4cef8;
+   border-top: 0;
+}
+
+.portlet.box.red > .portlet-title {
+  background-color: #e02222;
+} 
+
+.portlet.box.red {  
+   border: 1px solid #ef8476;
+   border-top: 0;
+}
+
+.portlet.box.yellow > .portlet-title {
+  background-color: #ffb848;
+} 
+
+.portlet.box.yellow {  
+   border: 1px solid #fccb7e;
+   border-top: 0;
+}
+
+.portlet.box.green > .portlet-title {
+  background-color: #35aa47;
+} 
+
+.portlet.box.green {  
+   border: 1px solid #77e588;
+   border-top: 0;
+}
+
+.portlet.box.purple > .portlet-title {
+  background-color: #852b99;
+} 
+
+.portlet.box.purple {  
+   border: 1px solid #af5cc1;
+   border-top: 0;
+}
+
+.portlet.box.grey > .portlet-title {
+  background-color: #555555;
+} 
+
+.portlet.box.grey {  
+   border: 1px solid #9d9c9c;
+   border-top: 0;
+}
+
+.portlet.box.light-grey > .portlet-title {
+  background-color: #aaa;
+} 
+
+.portlet.box.light-grey {  
+   border: 1px solid #bbb;
+   border-top: 0;
+}
+
+/***
+Charts and statistics
+***/
+.chart, .pie, .bars {
+  overflow: hidden;
+  height: 300px;
+}
+
+/***
+Statistic lists
+***/
+.item-list.table .percent {
+  width: 30px;
+  float: right;
+  margin-right: 10px;
+  margin-top: 3px;
+}
+
+/***
+Chart tooltips
+***/
+.chart-tooltip {
+  clear: both;
+  z-index: 100;
+  background-color: #736e6e !important;
+  padding: 5px !important;
+  color: #fff;
+}
+
+.chart-tooltip .label {
+  clear: both;
+  display: block;
+  margin-bottom: 2px;
+}
+
+/***
+Mini chart containers
+***/
+.bar-chart {
+  display: none
+}
+
+.line-chart {
+  display: none
+}
+
+/***
+Custom icon buttons
+***/
+.icon-btn {
+  height: 60px;
+  min-width: 80px;
+  margin: 5px 5px 0 0;
+  border: 1px solid #ddd;
+  padding: 12px 0px 0px 0px;
+  background-color: #fafafa !important;
+  background-image: none !important;
+  filter:none !important;
+  -webkit-box-shadow: none !important;
+     -moz-box-shadow: none !important;
+          box-shadow: none !important;
+  display:inline-block !important;
+  color: #646464 !important;
+  text-shadow: none !important;
+  text-align: center;
+  cursor: pointer;
+  position: relative;  
+  -webkit-transition: all 0.3s ease !important;
+  -moz-transition: all 0.3s ease !important;
+  -ms-transition: all 0.3s ease !important;
+  -o-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+}
+
+.icon-btn i {
+  font-size: 18px;
+}
+
+.ie8 .icon-btn:hover {
+  filter: none !important;
+} 
+
+.icon-btn:hover {
+  text-decoration: none !important;
+  border-color: #999 !important;
+  color: #444 !important;
+  text-shadow: 0 1px 0px rgba(255, 255, 255, 1) !important;
+  -webkit-transition: all 0.3s ease !important;
+  -moz-transition: all 0.3s ease !important;
+  -ms-transition: all 0.3s ease !important;
+  -o-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.icon-btn:hover .badge {
+  -webkit-transition: all 0.3s ease !important;
+  -moz-transition: all 0.3s ease !important;
+  -ms-transition: all 0.3s ease !important;
+  -o-transition: all 0.3s ease !important;
+  transition: all 0.3s ease !important;
+  -webkit-box-shadow: none !important;
+       -moz-box-shadow: none !important;
+            box-shadow: none !important;
+}
+
+.icon-btn div {
+  font-family: 'Open Sans', sans-serif;
+  margin-top: 5px;
+  margin-bottom: 20px;  
+  color: #000;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.icon-btn .badge {
+  position: absolute;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px !important;
+  font-weight: 300;
+  top: -5px;
+  right: -5px;
+  padding: 3px 6px 3px 6px;
+  color: white !important;
+  text-shadow: none;
+  border-width: 0;
+  border-style: solid;
+  -webkit-border-radius: 12px !important;
+  -moz-border-radius: 12px !important;
+  border-radius: 12px !important;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+/* extended dropdowns */
+.dropdown-menu.extended {
+  min-width: 160px !important;
+  max-width: 300px !important;
+  width: 233px !important;
+  background-color: #ffffff !important;
+}
+
+.dropdown-menu.extended:before,
+.dropdown-menu.extended:after {
+  border-bottom-color: #ddd !important;
+}
+
+.dropdown-menu.extended li a{
+  display: block;
+  padding: 5px 10px !important;
+  clear: both;
+  font-weight: normal;
+  line-height: 20px;
+  white-space: normal !important;
+}
+
+.dropdown-menu.extended li i{
+  margin-right: 3px;
+}
+
+.dropdown-menu.extended li a{
+   font-size: 13px;
+   padding: 10px !important;
+   background-color: #ffffff;
+}
+
+.dropdown-menu.extended li a:hover {
+  background-image: none;
+  background-color: #f5f5f5;
+  color: #000;
+  filter:none;
+}
+
+.dropdown-menu.extended li p{
+  padding: 10px;
+  background-color: #eee;
+  margin: 0px;
+  font-size: 14px;
+  font-weight: 300;
+  color: #000;
+}
+
+.dropdown-menu.extended li a{
+  padding: 7px 0 5px 0px;
+  list-style: none;
+  border-bottom: 1px solid #f4f4f4 !important;
+  font-size: 12px;
+  text-shadow: none;
+}
+
+.dropdown-menu.extended li:first-child a {
+  border-top: none;
+  border-bottom: 1px solid #f4f4f4 !important;
+}
+
+.dropdown-menu.extended li:last-child a {
+  border-top: 1px solid white !important;
+  border-bottom: 1px solid #f4f4f4 !important;
+}
+
+.dropdown-menu.extended li.external > a {
+  font-size: 13px;
+  font-weight: 400;  
+}
+
+.dropdown-menu.extended li.external > a > i{
+  margin-top: 3px;
+  float: right;
+}
+
+/* header notifications dropdowns */
+.dropdown-menu .dropdown-menu-list.scroller {
+  padding-right: 0 !important;
+  padding-left: 0;
+  list-style: none;
+}
+
+.dropdown-menu.notification li > a .time {
+  font-size: 12px;
+  font-weight: 600;
+  text-align: right;
+  font-style: italic;
+}
+
+/* header inbox dropdowns */
+.dropdown-menu.inbox li > a .photo {
+  float: left;
+  padding-right: 6px;
+}
+
+.dropdown-menu.inbox li > a .photo > img {
+  height: 40px;
+  width: 40px;
+}
+
+.dropdown-menu.inbox li > a .subject {
+  display: block;
+}
+
+.dropdown-menu.inbox li > a .subject .from {
+  font-size: 14px;
+  font-weight: 400;
+  color: #02689b;
+}
+
+.dropdown-menu.inbox li > a .subject .time {
+  font-size: 12px;
+  font-weight: 600;
+  font-style: italic;
+  position: relative;
+  float: right;
+}
+
+.dropdown-menu.inbox li > a .message {
+  display: block !important;
+  font-size: 12px;
+}
+
+/* header tasks */
+.dropdown-menu.tasks .task {
+  margin-bottom: 5px;
+}
+
+.dropdown-menu.tasks .task .desc {
+  font-size: 13px;
+  font-weight: 300;
+}
+
+.dropdown-menu.tasks .task .percent {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: 'Open Sans', sans-serif;
+  float: right;
+  display: inline-block;
+}
+
+.dropdown-menu.tasks .progress {
+  display: block;
+  height: 11px;
+  margin: 0px;
+}
+
+/***
+General list for item with image
+***/
+.item-list li .img {
+  height: 50px;
+  width: 50px;
+  float: left;
+  margin-top: 3px;
+  margin-right: 5px;
+}
+
+.item-list {
+  margin: 0px;
+  list-style: none;
+}
+
+.item-list li {
+  padding: 7px 0 5px 0px;
+  list-style: none;
+  border-top: 1px solid white;
+  border-bottom: 1px solid #EBEBEB;
+  font-size: 12px;
+}
+
+.item-list li:first-child {
+  border-top: none;
+  border-bottom: 1px solid #EBEBEB;
+}
+
+.item-list li:last-child {
+  border-top: none;
+  border-bottom: none;
+}
+
+.item-list li .label {
+  margin-right: 5px;
+}
+
+.item-list.todo li .label {
+  position: absolute;
+  right: 80px;
+}
+
+.item-list.todo li .actions {
+  position: absolute;
+  right: 45px;
+}
+
+/***
+Custom tables
+***/
+.table-toolbar {
+  margin-bottom: 15px;
+}
+
+.table.table-full-width {
+  width: 100% !important;
+}
+
+.table .m-btn {
+  margin-top: 0px;
+  margin-left: 0px; 
+  margin-right: 5px;
+}
+
+.table thead tr th {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.table-advance {
+  margin-bottom: 10px !important;
+}
+
+.table-advance thead { 
+  color: #999; 
+}
+
+.table-advance thead tr th{
+  background-color: #DDD; 
+  font-size: 14px;
+  font-weight: 400; 
+  color: #666;
+}
+
+.table-advance div.success, 
+.table-advance div.info, 
+.table-advance div.important, 
+.table-advance div.warning, 
+.table-advance div.danger {
+  position: absolute;
+  margin-top:-5px;
+  float: left;
+  width: 2px;
+  height: 30px;
+  margin-right: 20px !important;
+}
+
+.table-advance tr td {
+  border-left-width: 0px; 
+}
+.table-advance tr td:first-child {
+  border-left-width: 1px !important; 
+}
+
+.table-advance tr td.highlight:first-child a {
+  margin-left: 15px;
+}
+
+.table-advance td.highlight div.success {  
+  border-left: 2px solid #66ee66;
+}
+
+.table-advance td.highlight div.info {  
+  border-left: 2px solid #87ceeb;
+}
+
+.table-advance td.highlight div.important {  
+  border-left: 2px solid #f02c71;
+}
+
+.table-advance td.highlight div.warning {  
+  border-left: 2px solid #fdbb39;
+}
+
+.table-advance td.highlight div.danger {  
+  border-left: 2px solid #e23e29;
+}
+
+/***
+Star rating
+***/
+.rating {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+  font-size: 30px;
+}
+
+.rating span.star {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+}
+
+.rating span.star:hover {
+  cursor: pointer;
+}
+
+.rating span.star:before {
+  content: "\f006";
+  padding-right: 5px;
+  color: #999999;
+}
+
+.rating span.star:hover:before,
+.rating span.star:hover ~ span.star:before {
+  content: "\f005";
+  color: #e3cf7a;
+}
+
+
+/***
+Item block with details shown on hover
+***/
+.item {
+  overflow: hidden;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.item .details {
+  width: 100%;
+  display: none;
+  background-color: #000;
+  color: #fff !important;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  bottom:30px; 
+  margin-bottom:-30px; 
+  overflow: hidden; 
+  z-index: 6;
+}
+
+.item:hover .details {
+  display: block;
+  opacity: 0.7;
+  filter: alpha(opacity = 70);
+}
+
+.item:hover .zoom-icon{
+  opacity:0.5;  
+  filter: alpha(opacity = 50);
+}
+
+/***
+Zoom icon overlay on images
+***/
+.zoom {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  position: relative;   
+  z-index: 5;
+}
+
+.zoom .zoom-icon {
+  background-image:url("../img/overlay-icon.png");
+  background-color: #222;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  opacity: 0; 
+  filter: alpha(opacity = 0);
+  z-index: 6;  
+  top:0;  
+}
+
+/***
+Chats
+***/
+.chats {
+  margin:0;
+  padding: 0;
+  margin-top: -15px;
+}
+
+.chats li {
+  list-style: none;
+  padding: 5px 0;
+  margin: 10px auto;
+  font-size: 12px;
+}
+
+.chats li img.avatar {
+  height: 45px;
+  width: 45px;
+  -webkit-border-radius: 50% !important;
+     -moz-border-radius: 50% !important;
+          border-radius: 50% !important;
+}
+
+.chats li.in img.avatar {
+  float: left;
+  margin-right: 10px;
+}
+
+.chats li .name {
+  color:#3590c1;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.chats li .datetime {
+  color:#333;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.chats li.out img.avatar {
+  float: right;
+  margin-left: 10px;
+}
+
+.chats li .message {
+  display: block; 
+  padding: 5px;
+  position: relative;
+}
+
+.chats li.in .message {
+  text-align: left;
+  border-left: 2px solid #35aa47;
+  margin-left: 65px;
+  background: #fafafa 
+}
+
+.chats li.in .message .arrow {
+  display: block;
+  position: absolute;
+  top: 5px;
+  left: -8px;  
+  width: 0; 
+  height: 0; 
+
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;  
+  border-right: 8px solid #35aa47;  
+}
+
+.chats li.out .message .arrow {
+  display: block;
+  position: absolute;
+  top: 5px;
+  right: -8px;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;  
+  border-left: 8px solid #da4a38;  
+}
+
+.chats li.out .message {
+  border-right: 2px solid #da4a38;
+  margin-right: 65px;
+  background: #fafafa;
+  text-align: right;
+}
+
+.chats li.out .name, 
+.chats li.out .datetime  {  
+  text-align: right;
+}
+
+.chats li .message .body {
+  display: block; 
+}
+
+.chat-form {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #e9eff3;
+  overflow: hidden;
+  clear: both;   
+}
+
+.chat-form .input-cont {
+  margin-right: 40px;
+}
+
+.chat-form .input-cont .form-control {
+  width: 100% !important;
+  margin-bottom: 0px;
+}
+
+.chat-form .input-cont input{
+  border: 1px solid #ddd;
+  width: 100%  !important;  
+  margin-top: 0;
+}
+
+.chat-form .input-cont input {
+  background-color: #fff !important;
+}
+
+.chat-form .input-cont input:focus{
+  border: 1px solid #4b8df9 !important;
+}
+
+.chat-form .btn-cont {
+  margin-top: -42px;
+  position: relative;
+  float: right;
+  width:44px;
+}
+
+.chat-form .btn-cont .arrow {
+  position: absolute;
+  top: 17px;
+  right: 43px;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;  
+  border-right: 8px solid #4d90fe;   
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box; 
+}
+
+.chat-form .btn-cont:hover .arrow {
+  border-right-color: #0362fd;
+}
+
+.chat-form .btn-cont:hover .btn {
+  background-color: #0362fd;
+}
+
+.chat-form .btn-cont .btn {
+  margin-top: 8px;
+}
+
+/***
+System feeds
+***/
+.feeds {
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+
+.feeds li {
+  background-color: #fafafa;
+  margin-bottom: 7px;   
+}
+
+.feeds li:before, 
+.feeds li:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.feeds li:after {
+  clear: both;
+}
+
+.feeds li:last-child {
+  margin-bottom: 0px;
+}
+
+.feeds .col1 {
+  float:left;
+  width:100%;  
+  clear: both;
+}
+
+.feeds .col2 {
+  float:left;
+  width:75px;
+  margin-left:-75px;
+}
+
+.feeds .col1 .cont {
+  float:left;
+  margin-right:75px;
+  overflow:hidden;
+}
+
+.feeds .col1 .cont  .cont-col1 {
+  float:left;
+  margin-right:-100%;
+}
+
+.feeds .col1 .cont  .cont-col1 .label {
+  display: inline-block;
+  padding: 5px 4px 6px 5px;
+  vertical-align: middle;
+  text-align: center;
+}
+.feeds .col1 .cont  .cont-col1 .label > i {
+  text-align: center;
+  font-size: 14px;
+}
+
+.feeds .col1 .cont .cont-col2 {
+  float:left;
+  width:100%;
+}
+
+.feeds .col1 .cont .cont-col2 .desc { 
+  margin-left:35px;
+  padding-top: 4px;
+  padding-bottom: 5px;
+  overflow:hidden;
+}
+
+.feeds .col2 .date {
+  padding: 4px 9px 5px 4px;
+  text-align: right;
+  font-style: italic;
+  color:#c1cbd0;
+}
+
+/***
+Users
+***/
+.user-info {
+  margin-bottom: 10px !important;
+}
+
+.user-info img {
+  float: left;
+  margin-right: 5px;
+}
+
+.user-info .details {
+  display: inline-block;
+}
+
+.user-info .label {
+  font-weight: 300;
+  font-size: 11px;
+}
+
+/***
+Accordions
+***/
+.accordion-heading {
+  background:#eee;
+}
+
+.accordion-heading a {
+  text-decoration:none;
+}
+
+.accordion-heading a:hover {
+  text-decoration:none;
+}
+
+/***
+Vertical inline menu
+***/
+.ver-inline-menu {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.ver-inline-menu li {
+  position:relative;
+  margin-bottom:1px;
+}
+
+.ver-inline-menu li i {
+  width: 37px;
+  height: 37px;
+  display: inline-block;
+  color:#b9cbd5;
+  font-size:15px;
+  padding:12px 10px 10px 8px;
+  margin:0 8px 0 0;
+  text-align: center;
+  background:#e0eaf0 !important;
+}
+
+.ver-inline-menu li a {
+  font-size: 13px;
+  color:#557386;
+  display:block;
+  background:#f0f6fa;
+  border-left:solid 2px #c4d5df;
+}
+
+.ver-inline-menu li:hover a,
+.ver-inline-menu li:hover i {
+  background:#e0eaf0;
+  text-decoration:none;
+}
+
+.ver-inline-menu li:hover i {
+  color:#fff;
+  background:#c4d5df !important;
+}
+
+.ver-inline-menu li.active a,
+.ver-inline-menu li:hover a {
+  font-size: 13px;
+}
+
+.ver-inline-menu li.active a {
+  border-left:solid 2px #0c91e5;
+}
+
+.ver-inline-menu li.active a,
+.ver-inline-menu li.active i {
+  color:#fff;
+  background:#169ef4;
+  text-decoration:none;
+}
+
+.ver-inline-menu li.active i {
+  background:#0c91e5 !important;  
+}
+
+.ver-inline-menu li.active:after {
+  content: '';
+  display: inline-block;
+  border-bottom: 6px solid transparent;
+  border-top: 6px solid transparent;
+  border-left: 6px solid #169ef4;
+  position: absolute;
+  top: 12px;
+  right: -5px;
+}
+
+/***
+Custom tabs
+***/
+.nav-tabs > li > a > .badge,
+.nav-pills > li > a > .badge {
+  margin-top: -3px;
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  font-size: 14px;
+}
+
+.nav-tabs-sm > li > a,
+.nav-pills-sm > li > a {
+  font-size: 13px;
+}
+
+.tabbable-custom { 
+  margin-bottom: 15px; 
+  padding: 0px;  
+  overflow: hidden;
+}   
+
+.tabbable-custom > .nav-tabs { 
+  border: none; 
+  margin: 0px;
+}
+
+.tabbable-custom > .tab-content { 
+   background-color: #fff;
+   border: 1px solid #ddd;  
+   -webkit-border-radius: 0; 
+   -moz-border-radius: 0; 
+   border-radius: 0; 
+   padding: 10px;
+}
+
+.tabbable-custom.nav-justified .tab-content {
+  margin-top: -1px;
+}
+
+.tabs-below.tabbable-custom.nav-justified .tab-content {
+  margin-top: 0px;
+  margin-bottom: -2px;
+}
+
+.tabbable-custom.boxless > .tab-content {
+  padding:15px 0;
+  border-left:none;
+  border-right:none;
+  border-bottom:none;
+}
+
+.tabbable-custom .nav-tabs > li { 
+  margin-right: 2px; 
+  border-top: 2px solid transparent; 
+}
+
+.tabbable-custom .nav-tabs > li > a { 
+   margin-right: 0; 
+ }
+
+.tabbable-custom .nav-tabs > li > a:hover { 
+  background: none;
+  border-color:transparent;
+}
+
+.tabbable-custom .nav-tabs > li.active { 
+  border-top: 3px solid #d12610; 
+  margin-top: 0; 
+  position: relative; 
+}
+
+.tabbable-custom .nav-tabs > li.active > a  { 
+  border-top: none; 
+  font-weight: 400; 
+}
+
+.tabbable-custom .nav-tabs > li.active > a:hover { 
+  border-top: none; 
+  background: #fff; 
+  border-color: #d4d4d4 #d4d4d4 transparent; 
+}
+
+.tabbable-custom .nav-tabs > li { 
+  margin-right: 2px; 
+  border-top: 2px solid transparent; 
+}
+
+/* below tabs */
+
+.tabs-below.tabbable-custom .nav-tabs > li > a { 
+  border-top: none; 
+  border-bottom: 2px solid transparent; 
+  margin-top: -1px; 
+}
+
+.tabs-below.tabbable-custom .nav-tabs > li.active { 
+    border-top: none; 
+    border-bottom: 3px solid #d12610; 
+    margin-bottom: 0; 
+    position: relative; 
+}
+
+.tabs-below.tabbable-custom .nav-tabs > li.active > a { 
+  border-bottom: none 
+}
+
+.tabs-below.tabbable-custom .nav-tabs > li.active > a:hover { 
+  background: #fff; 
+  border-color: #d4d4d4 #d4d4d4 transparent; 
+}
+    
+/*full width tabs with bigger titles */
+.tabbable-custom.tabbable-full-width > .tab-content {
+  padding:15px 0;
+  border-left:none;
+  border-right:none;
+  border-bottom:none;
+}
+
+.tabbable-custom.tabbable-full-width .nav-tabs > li > a {
+  color:#424242;
+  font-size:15px;
+  padding:9px 15px;
+}
+
+/***
+Custom portlet tabs
+***/
+
+.portlet-tabs > .nav-tabs {
+    position: relative;
+    top: -41px;
+    margin-right: 10px;
+    overflow: hidden;
+}
+
+.portlet-tabs > .nav-tabs > li {
+    float: right;
+}
+
+.portlet-tabs > .nav-tabs {
+    border-bottom: none;
+}
+
+.portlet-tabs > .nav-tabs > li > a {
+  color: #fff;
+  padding-top: 8px;
+  padding-bottom: 10px;
+  line-height: 16px;
+  margin-top: 6px;
+  margin-left: 0px;
+  margin-right: 0px;
+  border-left: 0;    
+  border-right: 0;
+     -webkit-border-radius: 0px;
+        -moz-border-radius: 0px;
+             border-radius: 0px;   
+}
+
+.portlet-tabs > .nav-tabs > li:last-child > a {
+  border-right:0;
+}
+
+.portlet-tabs > .nav-tabs > li {
+  margin-left: 1px;
+}
+
+.portlet-tabs > .nav-tabs > li.active {
+  color: #333;
+  border-top-color: transparent;
+}
+
+.portlet-tabs > .nav-tabs > li.active > a {
+  margin-bottom: 0px;
+  border-bottom: 0;
+  margin-left: 0px;
+  margin-right: 0px;
+  border-left: 0;    
+  border-right: 0;
+  border-top-color:transparent !important;
+}
+
+.portlet-tabs > .nav-tabs > li > a:hover {   
+  color: #333;
+  margin-bottom: 0;
+  border-bottom-color: transparent;
+  margin-left: 0;
+  margin-right: 0;
+  border-left: 0;    
+  border-right: 0;
+  border-top-color:transparent;
+  background-color: #fff;
+}  
+
+.portlet-tabs > .nav-tabs > .active > a  {
+  color: #555555;
+  cursor: default;
+  background-color: #fff;
+}
+
+.portlet-tabs > .nav-tabs > .active > a:hover {
+  background-color: #fff !important;
+}
+
+.portlet-tabs > .tab-content {
+  padding: 10px !important;
+  margin: 0px;
+  margin-top: -50px !important;
+}
+
+.portlet.tabbable .portlet-body {
+  padding: 0px;
+}
+
+.tab-pane > p:last-child {
+  margin-bottom: 0px;
+}
+
+/* reverse aligned tabs */
+
+.tabs-reversed > li {
+  float: right;
+}
+
+.tabs-reversed > li,
+.tabs-reversed > li > a {
+  margin-right: 0;
+}
+
+/***
+Dashboard container
+***/
+
+#dashboard {
+  overflow: hidden;
+}
+
+/***
+Dashboard stats
+***/
+.dashboard-stat {
+  margin-bottom: 25px;
+}
+
+.portlet .dashboard-stat:last-child {
+  margin-bottom: 0;
+}
+
+.dashboard-stat:before,
+.dashboard-stat:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+.dashboard-stat:after {
+  clear: both;
+}
+
+.dashboard-stat .visual {
+  width: 80px;
+  height:80px;
+  display: block;
+  float: left;
+  padding-top: 10px;
+  padding-left: 15px;
+  margin-bottom: 10px;
+}
+
+.dashboard-stat .visual i {
+  font-size: 65px;
+  line-height: 65px;
+  color: #fff;
+}
+
+.dashboard-stat .visual {
+  font-size: 35px;
+  line-height: 35px;
+}
+
+@media (min-width: 992px) and (max-width: 1024px) {  
+
+  .dashboard-stat .visual i { 
+    font-size: 28px;
+    line-height: 28px;
+  }
+
+}
+
+.dashboard-stat .details {
+  position: absolute;
+  right: 15px;
+  padding-right: 10px;  
+}
+
+.dashboard-stat .details .number {    
+  padding-top: 15px;
+  text-align: right;
+  font-size: 34px;
+  line-height: 34px;
+  letter-spacing: -1px;
+  margin-bottom: 5px;
+  font-weight: 300;
+  color: #fff;
+}
+
+.dashboard-stat .details .desc {
+  text-align: right;
+  font-size: 16px;
+  letter-spacing: 0px;
+  font-weight: 300;
+  color: #fff;  
+}
+
+.dashboard-stat .more {
+  clear: both;
+  display: block;  
+  padding: 5px 10px 5px 10px;
+  text-transform: uppercase;
+  font-weight: 300;
+  font-size: 11px;
+  color: #fff;  
+  opacity: 0.7;  
+  filter: alpha(opacity=70);
+}  
+
+.dashboard-stat .more:hover {
+  text-decoration: none;
+  opacity: 1;  
+  filter: alpha(opacity=100);
+}
+
+.dashboard-stat .more > i {
+  display: inline-block;
+  margin-top: 1px;
+  float: right;
+}
+
+.dashboard-stat.blue {
+  background-color: #27a9e3;
+}
+
+.dashboard-stat.blue .more { 
+  background-color: #208dbe;
+} 
+
+.dashboard-stat.green {
+  background-color: #28b779;
+}
+
+.dashboard-stat.green .more { 
+  background-color: #10a062;
+} 
+
+.dashboard-stat.red {
+  background-color: #e7191b;
+}
+
+.dashboard-stat.red .more { 
+  background-color:#bc0d0e;
+} 
+
+.dashboard-stat.yellow {
+  background-color: #ffb848;
+}
+
+.dashboard-stat.yellow .more { 
+  background-color: #cb871b;
+} 
+
+.dashboard-stat.purple {
+  background-color: #852b99;
+}
+
+.dashboard-stat.purple .more { 
+  background-color: #6e1881;
+} 
+
+/***
+Text Stats
+***/
+
+.text-stat h3 {
+  margin-top: 5px;
+  margin-bottom: 0px;
+  font-size: 18px;
+}
+
+.text-stat span {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+@media (max-width: 767px) {  
+
+  .text-stat {
+    margin-top: 20px;
+  }  
+
+}
+
+/***
+Tiles(new in v1.1.1)
+***/
+
+.tiles {
+  margin-right: -10px;
+}
+
+.tiles:before,
+.tiles:after {
+  display: table;
+  content: " ";
+}
+
+.tiles:after {
+  clear: both;
+}
+
+.tile {
+  display: block;
+  letter-spacing: 0.02em;
+  float: left;
+  height: 135px;
+  width: 135px !important;
+  cursor: pointer;
+  text-decoration: none;
+  color: #ffffff;
+  position: relative;
+  font-weight: 300;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  line-height: 20px;
+  overflow: hidden;
+  border: 4px solid transparent;
+  margin: 0 10px 10px 0;
+}
+
+.tile:after,
+.tile:before {
+  content: "";
+  float: left; 
+}
+
+.tile.double {
+  width: 280px !important;
+}
+
+.tile.double-down {
+  height: 280px !important;
+}
+
+.tile:active, .tile.selected {
+  border-color: #ccc !important;
+}
+
+.tile:hover {
+  border-color: #aaa !important;
+}
+
+.tile.selected .corner:after {  
+  content: "";
+  display: inline-block;
+  border-left: 40px solid transparent;
+  border-bottom: 40px solid transparent;
+  border-right: 40px solid #ccc;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+}
+
+.tile.selected .check:after {  
+  content: "";
+  font-family: FontAwesome;
+  font-size: 13px;
+  content: "\f00c";
+  display: inline-block;
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+
+.tile * {
+  color: #ffffff;
+}
+
+.tile .tile-body {
+  height: 100%;
+  vertical-align: top;
+  padding: 10px 10px;
+  overflow: hidden;
+  position: relative;
+  font-weight: 400;
+  font-size: 12px;
+  color: #000000;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.tile .tile-body img {
+  float: left;
+  margin-right: 10px;
+}
+
+.tile .tile-body img.pull-right {
+  float: right !important;
+  margin-left: 10px;
+  margin-right: 0px;
+}
+
+.tile .tile-body .content {
+  display: inline-block;
+}
+
+.tile .tile-body > i {
+  margin-top: 17px;
+  display: block;
+  font-size: 56px;
+  line-height: 56px;
+  text-align: center;
+}
+
+
+.tile.double-down i {
+  margin-top: 95px;
+}
+
+.tile .tile-body h1,
+.tile .tile-body h2,
+.tile .tile-body h3,
+.tile .tile-body h4,
+.tile .tile-body h5,
+.tile .tile-body h6,
+.tile .tile-body p {
+  padding: 0;
+  margin: 0;
+  line-height: 14px;
+}
+
+.tile .tile-body h3,
+.tile .tile-body h4 {
+  margin-bottom: 5px;
+}
+
+.tile .tile-body h1:hover,
+.tile .tile-body h2:hover,
+.tile .tile-body h3:hover,
+.tile .tile-body h4:hover,
+.tile .tile-body h5:hover,
+.tile .tile-body h6:hover,
+.tile .tile-body p:hover {
+  color: #ffffff;
+}
+
+.tile .tile-body p {
+  font-weight: 400;
+  font-size: 13px;
+  color: #000000;
+  color: #ffffff;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.tile .tile-body p:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.tile .tile-body p:active {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.tile .tile-body p:hover {
+  color: #ffffff;
+}
+
+.tile.icon > .tile-body {
+  padding: 0;
+}
+
+.tile .tile-object {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-height: 30px;
+  background-color: transparent;
+  *zoom: 1;
+}
+
+.tile .tile-object:before,
+.tile .tile-object:after {
+  display: table;
+  content: "";
+}
+
+.tile .tile-object:after {
+  clear: both;
+}
+
+.tile .tile-object > .name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: 5px;
+  margin-left: 10px;
+  margin-right: 15px;
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+}
+
+.tile .tile-object > .name > i {
+  vertical-align: middle;
+  display: block;
+  font-size: 24px;
+  height: 18px;
+  width: 24px;
+}
+
+.tile .tile-object > .number {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin-bottom: 0;
+  color: #ffffff;
+  text-align: center;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  line-height: 14px;
+  margin-bottom: 8px;
+  margin-right: 10px;
+}
+
+.tile.image > .tile-body {
+  padding: 0 !important;
+}
+
+.tile.image > .tile-body > img{
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  max-width: 100%;
+}
+
+.tile.image .tile-body h3 {
+  display: inline-block;
+}
+
+/***
+Theme Panel
+***/
+
+.theme-panel {
+  width: 400px;
+  margin-top: 0px;
+  margin-right: 1px;
+  z-index: 999;
+  float: right;
+  position:relative;
+}
+
+.theme-panel > .toggler {
+  top:4px;
+  right:0;
+  padding:20px;
+  cursor:pointer;
+  position:absolute;
+  background:#c9c9c9 url(../img/icon-color.png) center no-repeat;
+}
+
+.theme-panel > .toggler:hover {
+  background-color: #3d3d3d !important;
+}
+
+.theme-panel > .toggler-close {
+  display: none;
+  top:4px;
+  right:0;
+  padding:20px;
+  cursor:pointer;
+  position:absolute;
+  background: #3d3d3d url(../img/icon-color-close.png) center no-repeat !important;
+}
+
+.theme-panel > .toggler-close:hover {
+  background-color:#222 !important;
+}
+
+.theme-panel > .theme-options {
+  top:4px;
+  right:40px;
+  display:none;
+  position:absolute;
+  background:#3d3d3d;
+}
+
+.theme-panel > .theme-options > .theme-option {
+  color:#cfcfcf;
+  padding: 15px;
+  border-top:1px solid #585858;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors {
+  border-top: 0;
+}
+
+.theme-panel > .theme-options > .theme-option > span {  
+  text-transform:uppercase;
+  display: inline-block;
+  width: 138px;
+  font-size: 14px;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > span {
+  display: block;
+  width: auto;
+}
+
+.theme-panel > .theme-options > .theme-option > select.form-control {
+  display: inline;
+  width: 100px;
+  text-transform: lowercase;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul {
+  list-style:none;
+  padding: 0;
+  display: block;
+  margin-bottom: 1px !important;
+  margin-top: 10px;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li {
+  width:37px;
+  height:37px;
+  margin:0 4px;
+  cursor:pointer;
+  list-style:none;
+  float: left;
+  border:solid 1px #707070;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child {
+  margin-left: 0;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover,
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current {
+  border:solid 2px #ebebeb;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black {
+  background:#333438;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey {
+  background:#6d6d6d;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight {
+  background:#3366cc;
+}
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-ztebluelight {
+  background:#1ab3ec;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue {
+  background:#124f94;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-brown {
+  background:#623f18;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-purple {
+  background:#701584;
+}
+
+.theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-white {
+  background:#fff;
+}
+
+/***
+Top bar menu
+***/
+
+/* enable arrow for dropdown menu */
+.header.navbar .nav > li > .dropdown-menu:before {
+  position: absolute;
+  top: -7px;
+  right: 9px;
+  display: inline-block !important;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.header.navbar .nav > li > .dropdown-menu:after {
+  position: absolute;
+  top: -6px;
+  right: 10px;
+  display: inline-block !important;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+/***
+Mega Menu(new in v1.6)
+***/
+
+.mega-menu .nav,
+.mega-menu .collapse,
+.mega-menu .mega-menu-dropup,
+.mega-menu .mega-menu-dropdown {
+  position: static;
+}
+.mega-menu .container {
+  position: relative;
+}
+.mega-menu .mega-menu-dropdown .dropdown-menu {
+  left: auto;
+  width: auto;
+}
+.mega-menu .nav.navbar-right .dropdown-menu {
+  left: auto;
+  right: 0;
+}
+.mega-menu .mega-menu-content {
+  padding: 10px;
+  margin: 0;
+}
+.mega-menu .mega-menu-full .dropdown-menu {
+  left: 20px;
+  right: 20px;
+}
+
+.mega-menu-responsive-content {
+  padding: 10px 15px 10px 60px;
+}
+
+.page-boxed .mega-menu .mega-menu-dropdown .dropdown-menu {  
+  top: 42px;
+}
+
+.page-boxed .mega-menu .mega-menu-dropdown.mega-menu-full .dropdown-menu {
+  margin: 0;
+  padding: 0;
+  left: 18px;
+  right: 18px;
+}
+
+.mega-menu .mega-menu-submenu {
+  width: auto !important;
+  padding: 0px 30px 0px 0px !important;
+  margin: 0 !important;
+}
+
+
+ .mega-menu-content .row :last-child>ul{
+  border-right: 0 !important;
+}
+
+.mega-menu .mega-menu-submenu li > h3 {
+  font-size: 14px;
+  margin-top: 10px;
+  padding-left: 5px;
+}
+
+.mega-menu .mega-menu-submenu li {
+  padding: 2px !important;
+  margin: 0 !important;
+  list-style: none;
+}
+
+.mega-menu .mega-menu-submenu li > a {
+  padding: 5px !important; 
+  margin: 0 !important;
+}
+
+/***
+Horezantal Menu(new in v1.2)
+***/
+
+.header.navbar .hor-menu {
+  margin: 0;
+  float: left;
+}
+
+.header.navbar .hor-menu ul.nav li > a {
+  font-size: 15px;
+  padding: 11px 10px; 
+}
+
+.header.navbar .hor-menu ul.nav li.current .selected,
+.header.navbar .hor-menu ul.nav li.active .selected {
+  left: 50%;
+  bottom:0;
+  position: absolute;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  /*border-top: 6px solid #e02222;*/
+  display: inline-block;
+  margin: 0;
+  width: 0px;
+  height:0px;
+  margin-left: -7px;
+  margin-bottom:-6px;
+}
+
+/*drop-down*/
+.header.navbar .hor-menu .dropdown-menu {
+    margin-top: 0;
+    border: none;
+    box-shadow: none;
+}
+
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-submenu > .dropdown-menu {
+  top: 0;
+}
+
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-submenu > a:after {
+  top: 8px;
+  margin-right: 0px;
+} 
+
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li > a {
+    padding: 7px 18px !important; 
+    margin-bottom:1px;
+}
+
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu .arrow {
+  display: none;
+}
+
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li > a:hover,
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li:hover > a,
+.header.navbar .hor-menu .classic-menu-dropdown .dropdown-menu li.active > a {
+    filter:none !important;
+}
+
+.header.navbar .hor-menu .nav > li > .dropdown-menu:after,
+.header.navbar .hor-menu .nav > li > .dropdown-menu:before {
+    border-bottom: none !important;
+}
+
+/*search*/
+.header.navbar .hor-menu .hor-menu-search-form-toggler {
+    display: inline-block;
+    padding: 12px 22px 12px 22px !important;
+    cursor: pointer;
+    background: url(../img/hor-menu-search.png) no-repeat center;
+}
+
+.header.navbar .hor-menu .hor-menu-search-form-toggler:hover {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.header.navbar .hor-menu a.hor-menu-search-form-toggler-close {
+  display: none;
+}
+
+.header.navbar .hor-menu .search-form {
+  margin: 0;
+  top:42px; 
+  right:0px; 
+  padding:0 4px; 
+  display:none;
+  z-index:999; 
+  position:absolute; 
+}
+
+.header.navbar .hor-menu .search-form .btn {
+  padding: 7px 20px; 
+  height: 32px;
+  width: 10px;
+  display: inline-block;
+}
+
+.header.navbar .hor-menu .search-form .btn:hover {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.header.navbar .hor-menu .search-form form {
+  margin-bottom: 0;
+}
+
+.header.navbar .hor-menu .search-form form input {
+  background: none;
+  width: 200px;
+  border: none;
+  margin-top: 6px;
+}
+
+/***
+Top News Blocks(new in v1.2.2)
+***/
+.top-news {
+  color: #fff;
+  margin: 8px 0;
+}
+
+.top-news a,
+.top-news em,
+.top-news span {
+  display: block;
+  text-align: left;
+}
+
+.top-news a {
+  padding: 10px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.top-news a .top-news-icon {
+  right: 8px;
+  bottom: 15px; 
+  opacity:0.3; 
+  font-size: 35px;
+  position: absolute;
+  filter: alpha(opacity=30); /*For IE8*/  
+}
+
+.top-news em {
+  margin-bottom: 0;
+  font-style: normal;
+}
+
+.top-news span {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+/***
+Block Images(new in v1.2.2)
+***/
+.blog-images {
+  margin-bottom: 0;
+}
+
+.blog-images li {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+
+.blog-images li a:hover {
+  text-decoration: none;
+}
+
+.blog-images li img {
+  width: 50px;
+  height: 50px;
+  opacity: 0.6;
+  margin: 0 2px 8px;
+}
+
+.blog-images li img:hover {
+  opacity: 1;
+  box-shadow: 0 0 0 4px #72c02c;
+  transition: all 0.4s ease-in-out 0s;
+  -moz-transition: all 0.4s ease-in-out 0s;
+  -webkit-transition: all 0.4s ease-in-out 0s;
+}
+
+/*Sidebar Tags*/
+ul.sidebar-tags a {
+  color: #555;
+  font-size:12px;
+  padding:3px 5px;
+  background:#f7f7f7;
+  margin:0 2px 5px 0;
+  display:inline-block;
+}
+
+ul.sidebar-tags a:hover,
+ul.sidebar-tags a:hover i {
+  background: #EEE;
+  text-decoration:none;
+  -webkit-transition:all 0.3s ease-in-out;
+  -moz-transition:all 0.3s ease-in-out;
+  -o-transition:all 0.3s ease-in-out;
+  transition:all 0.3s ease-in-out;
+}
+
+ul.sidebar-tags a i {
+  color:#777;
+}
+
+ul.sidebar-tags li {
+  padding: 0;
+}
+
+/***
+Social Icons(new in v1.2.2)
+***/
+.social-icons {
+  padding: 0;
+  margin:0;
+}
+
+.social-icons:after,
+.social-icons:before {  
+  content: "";
+  display: table;
+}
+
+.social-icons:after {    
+  clear: both;
+}
+
+.social-icons li {
+  float:left;
+  display:inline;
+  list-style:none;
+  margin-right:5px;
+  margin-bottom:5px;
+  text-indent:-9999px;
+}
+.social-icons li a, a.social-icon {
+  width:28px;
+  height:28px;
+  display:block;
+  background-position:0 0;
+  background-repeat:no-repeat;
+  transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+}
+.social-icons li:hover a {
+  background-position:0 -38px;
+}
+
+.social-icons-color li a {
+  opacity: 0.7;
+  background-position:0 -38px !important;
+}
+
+.social-icons-color li a:hover {
+  opacity: 1;
+}
+
+.social-icons .amazon {background: url(../img/social/amazon.png) no-repeat;}
+.social-icons .behance {background: url(../img/social/behance.png) no-repeat;}
+.social-icons .blogger {background: url(../img/social/blogger.png) no-repeat;}
+.social-icons .deviantart {background: url(../img/social/deviantart.png) no-repeat;}
+.social-icons .dribbble {background: url(../img/social/dribbble.png) no-repeat;}
+.social-icons .dropbox {background: url(../img/social/dropbox.png) no-repeat;}
+.social-icons .evernote {background: url(../img/social/evernote.png) no-repeat;}
+.social-icons .facebook {background: url(../img/social/facebook.png) no-repeat;}
+.social-icons .forrst {background: url(../img/social/forrst.png) no-repeat;}
+.social-icons .github {background: url(../img/social/github.png) no-repeat;}
+.social-icons .googleplus {background: url(../img/social/googleplus.png) no-repeat;}
+.social-icons .jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
+.social-icons .last-fm {background: url(../img/social/last-fm.png) no-repeat;}
+.social-icons .linkedin {background: url(../img/social/linkedin.png) no-repeat;}
+.social-icons .picasa {background: url(../img/social/picasa.png) no-repeat;}
+.social-icons .pintrest {background: url(../img/social/pintrest.png) no-repeat;}
+.social-icons .rss {background: url(../img/social/rss.png) no-repeat;}
+.social-icons .skype {background: url(../img/social/skype.png) no-repeat;}
+.social-icons .spotify {background: url(../img/social/spotify.png) no-repeat;}
+.social-icons .stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
+.social-icons .tumblr {background: url(../img/social/tumblr.png) no-repeat;}
+.social-icons .twitter {background: url(../img/social/twitter.png) no-repeat;}
+.social-icons .vimeo {background: url(../img/social/vimeo.png) no-repeat;}
+.social-icons .wordpress {background: url(../img/social/wordpress.png) no-repeat;}
+.social-icons .xing {background: url(../img/social/xing.png) no-repeat;}
+.social-icons .yahoo {background: url(../img/social/yahoo.png) no-repeat;}
+.social-icons .youtube {background: url(../img/social/youtube.png) no-repeat;}
+.social-icons .vk {background: url(../img/social/vk.png) no-repeat;}
+.social-icons .instagram {background: url(../img/social/instagram.png) no-repeat;}
+.social-icons .reddit {background: url(../img/social/reddit.png) no-repeat;}
+.social-icons .aboutme {background: url(../img/social/aboutme.png) no-repeat;}
+.social-icons .flickr {background: url(../img/social/flickr.png) no-repeat;}
+.social-icons .foursquare {background: url(../img/social/foursquare.png) no-repeat;}
+.social-icons .gravatar {background: url(../img/social/gravatar.png) no-repeat;}
+.social-icons .klout {background: url(../img/social/klout.png) no-repeat;}
+.social-icons .myspace {background: url(../img/social/myspace.png) no-repeat;}
+.social-icons .quora {background: url(../img/social/quora.png) no-repeat;}
+
+/***
+Inline Social Icons
+***/
+
+.social-icon {
+  display:inline-block !important;
+  width:28px;
+  height:28px;
+  background-position:0 0;
+  background-repeat:no-repeat;
+  transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+}
+
+.social-icon.amazon {background: url(../img/social/amazon.png) no-repeat;}
+.social-icon.behance {background: url(../img/social/behance.png) no-repeat;}
+.social-icon.blogger {background: url(../img/social/blogger.png) no-repeat;}
+.social-icon.deviantart {background: url(../img/social/deviantart.png) no-repeat;}
+.social-icon.dribbble {background: url(../img/social/dribbble.png) no-repeat;}
+.social-icon.dropbox {background: url(../img/social/dropbox.png) no-repeat;}
+.social-icon.evernote {background: url(../img/social/evernote.png) no-repeat;}
+.social-icon.facebook {background: url(../img/social/facebook.png) no-repeat;}
+.social-icon.forrst {background: url(../img/social/forrst.png) no-repeat;}
+.social-icon.github {background: url(../img/social/github.png) no-repeat;}
+.social-icon.googleplus {background: url(../img/social/googleplus.png) no-repeat;}
+.social-icon.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
+.social-icon.last-fm {background: url(../img/social/last-fm.png) no-repeat;}
+.social-icon.linkedin {background: url(../img/social/linkedin.png) no-repeat;}
+.social-icon.picasa {background: url(../img/social/picasa.png) no-repeat;}
+.social-icon.pintrest {background: url(../img/social/pintrest.png) no-repeat;}
+.social-icon.rss {background: url(../img/social/rss.png) no-repeat;}
+.social-icon.skype {background: url(../img/social/skype.png) no-repeat;}
+.social-icon.spotify {background: url(../img/social/spotify.png) no-repeat;}
+.social-icon.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
+.social-icon.tumblr {background: url(../img/social/tumblr.png) no-repeat;}
+.social-icon.twitter {background: url(../img/social/twitter.png) no-repeat;}
+.social-icon.vimeo {background: url(../img/social/vimeo.png) no-repeat;}
+.social-icon.wordpress {background: url(../img/social/wordpress.png) no-repeat;}
+.social-icon.xing {background: url(../img/social/xing.png) no-repeat;}
+.social-icon.yahoo {background: url(../img/social/yahoo.png) no-repeat;}
+.social-icon.youtube {background: url(../img/social/youtube.png) no-repeat;}
+.social-icon.vk {background: url(../img/social/vk.png) no-repeat;}
+.social-icon.instagram {background: url(../img/social/instagram.png) no-repeat;}
+.social-icon.reddit {background: url(../img/social/reddit.png) no-repeat;}
+.social-icon.aboutme {background: url(../img/social/aboutme.png) no-repeat;}
+.social-icon.flickr {background: url(../img/social/flickr.png) no-repeat;}
+.social-icon.foursquare {background: url(../img/social/foursquare.png) no-repeat;}
+.social-icon.gravatar {background: url(../img/social/gravatar.png) no-repeat;}
+.social-icon.klout {background: url(../img/social/klout.png) no-repeat;}
+.social-icon.myspace {background: url(../img/social/myspace.png) no-repeat;}
+.social-icon.quora {background: url(../img/social/quora.png) no-repeat;}
+
+.social-icon:hover {
+  background-position:0 -38px;
+}
+
+.social-icon-color {
+  opacity: 0.7;
+  background-position:0 -38px !important;
+}
+
+.social-icon-color:hover {
+  opacity: 1;
+}
+
+/***
+Notes
+***/
+
+/* Common styles for all types */
+.note {
+  margin: 0 0 20px 0;
+  padding: 15px 30px 15px 15px;
+  border-left: 5px solid #eee;
+}
+
+.note h1,
+.note h2,
+.note h3,
+.note h4 {
+  margin-top: 0;
+}
+
+.note p:last-child {
+  margin-bottom: 0;
+}
+.note code,
+.note .highlight {
+  background-color: #fff;
+}
+
+/* Variations */
+.note-danger {
+  background-color: #FAEAE6;
+  border-color: #ed4e2a;
+}
+
+.note-warning {
+  background-color: #FCF3E1;
+  border-color: #fcb322;
+}
+
+.note-info {
+  background-color: #E8F6FC;
+  border-color: #57b5e3;
+}
+
+.note-success {
+  background-color: #EBFCEE;
+  border-color: #3cc051;
+}
+
+/***
+Demo Utils
+***/
+.scrollspy-example {
+  position: relative;
+  height: 200px;
+  margin-top: 10px;
+  overflow: auto;
+}
+
+.util-btn-margin-bottom-5 .btn {
+  margin-bottom: 5px !important;
+}
+
+.util-btn-group-margin-bottom-5 .btn-group {
+  margin-bottom: 5px !important;
+}
+
+.fontawesome-demo i {
+  font-size: 18px;
+}
+
+.fontawesome-demo li {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.glyphicons-demo ul {
+  padding-left: 0;
+  padding-bottom: 1px;
+  margin-bottom: 20px;
+  list-style: none;
+  overflow: hidden;
+}
+
+.bs-glyphicons {
+  padding-left: 0;
+  padding-bottom: 1px;
+  margin-bottom: 20px;
+  list-style: none;
+  overflow: hidden;
+}
+.glyphicons-demo ul li {
+  float: left;
+  width: 25%;
+  height: 115px;
+  padding: 10px;
+  margin: 0 -1px -1px 0;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  border: 1px solid #ddd;
+}
+
+.glyphicons-demo .glyphicon {
+  display: block;
+  margin: 5px auto 10px;
+  font-size: 24px;
+}
+.glyphicons-demo ul li:hover {
+  background-color: rgba(86,61,124,.1);
+}
+
+@media (min-width: 768px) {
+  .glyphicons-demo ul li {
+    width: 12.5%;
+  }
+}
+
+/***
+Forms 
+****/
+
+.static-info {
+  margin-bottom: 10px;
+}
+
+.static-info .name {
+  font-size: 14px;
+}
+
+.static-info .value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.static-info.align-reverse .name,
+.static-info.align-reverse .value {
+  text-align: right;
+}
+
+input.placeholder,
+textarea.placeholder {
+  color: #aaa !important;
+}
+
+.help-block {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.form-inline input {
+  margin-bottom: 0px !important;
+}
+
+.control-label {
+  margin-top: 2px;
+}
+
+.form-control-static {
+  font-size: 14px;
+  padding-top: 7px;
+}
+
+.control-label .required {
+  color: #e02222;
+  font-size: 12px;
+  padding-left: 2px;
+}
+
+.switch-wrapper {
+   display: inline-block;
+}
+
+.form {
+  padding: 0 !important;
+}
+
+.form-body {
+  padding: 10px;
+}
+
+.form-actions {
+  padding: 20px 10px;
+  margin-top: 20px;
+/*  background-color: #f5f5f5;
+  border-top: 1px solid #e5e5e5;*/
+  *zoom: 1;
+}
+
+.form-actions.nobg {
+  background-color: transparent;
+}
+
+.form-actions.top {
+  margin-top: 0;
+  margin-bottom: 20px;
+  border-top: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.form-actions.fluid {
+  padding: 20px 0;
+}
+
+.form-actions.fluid > [class^="col-"] {
+  padding-left: 13px;
+}
+
+.form-actions:before,
+.form-actions:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.form-actions:after {
+  clear: both;
+}
+
+.form-section {
+  margin: 30px 0px 25px 0px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+
+.form .form-section:first-child {
+  margin-top: 5px;
+}
+
+.help-inline {
+  font-size: 13px;
+  color: #737373;
+  display: inline-block;
+  padding: 5px;
+}
+
+/* left, right aligned form actions */
+.form-actions.right {
+  padding-left: 0;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.form-actions.left {
+  padding-left: 10px;
+  padding-right: 0;
+  text-align: left;
+}
+
+/* Checkboxes */
+.form-group .checkbox {
+  padding-left: 0;
+}
+
+.checkbox-list > label {
+  display: block;
+}
+
+.checkbox-list > label.checkbox-inline {
+  display: inline-block;
+}
+
+.checkbox-list > label.checkbox-inline:first-child {
+  padding-left: 0;
+}
+
+/* Radios */
+
+.radio-list > label {
+  display: block;
+}
+
+.radio-list > label.radio-inline {
+  display: inline-block;
+}
+
+.radio-list > label.radio-inline:first-child {
+  padding-left: 0;
+}
+
+.form-horizontal .radio-list .radio {
+  padding-top: 1px;
+}
+
+.form-horizontal .radio-list > label {
+  margin-bottom: 0;
+}
+
+.form-horizontal .radio > span {
+  margin-top: 2px;
+}
+
+/* Rows seperated form layout */
+.form-row-seperated .form-group {
+  margin: 0;
+  border-bottom: 1px solid #efefef;
+  padding: 10px 0px 10px 0px;
+}
+
+.form-row-seperated .form-group.last {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 10px;
+}
+
+.form-row-seperated .form-actions {
+  margin-top: 0;
+}
+
+.form-row-seperated .form-body {
+  padding: 0;
+  margin-top: 0;
+}
+
+.form-row-seperated .help-block {
+  margin-bottom: 0;
+}
+
+/* form bordered */
+.form-bordered .form-body {
+  margin: 0;
+  padding: 0;
+}
+
+.form-bordered .form-actions {
+  margin-top: 0;
+}
+
+.form-bordered .form-group {
+    margin: 0;
+    border-bottom: 1px solid #efefef;
+}
+
+.form-bordered .form-group.last {
+    border-bottom: 0;
+}
+
+.form-bordered .help-block {
+  margin-bottom: 0;
+}
+
+.form-bordered .control-label {
+  padding-top: 16px;
+}
+
+.form-bordered .form-group > div {  
+  padding: 10px;
+  border-left: 1px solid #efefef;
+}
+
+.form-bordered .form-actions.fluid > .row > div {
+  padding-left: 10px;
+}
+
+.form-horizontal.form-bordered.form-row-stripped .form-group:nth-child(even) {
+  background-color: #fcfcfc;
+}
+
+.form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) {
+  background-color: #fcfcfc;
+} 
+
+.form-horizontal.form-bordered.form-row-stripped .form-control {
+  background: #fff !important;
+}
+
+.form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) > div {
+  background-color: #ffffff;  
+}
+
+/***
+Bordered form layout
+***/
+
+.form-bordered .form-control {
+  margin: 0;
+}
+
+
+/***
+Disabled Menu Link
+***/
+
+.disabled-link > a > span.text,
+.disabled-link > a > span.title {
+  font-style: italic !important;
+  color: #888 !important;
+}
+
+.disabled-link > a:hover  {
+  cursor: not-allowed !important;
+}
+
+
+/***
+Responsive & Scrollable Tables
+***/
+
+.table-scrollable {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid #dddddd;
+  margin: 10px 0 !important;
+}
+
+.table-scrollable > .table {
+  width: 100% !important;
+  margin: 0 !important;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+
+.table-scrollable > .table > thead > tr > th,
+.table-scrollable > .table > tbody > tr > th,
+.table-scrollable > .table > tfoot > tr > th,
+.table-scrollable > .table > thead > tr > td,
+.table-scrollable > .table > tbody > tr > td,
+.table-scrollable > .table > tfoot > tr > td {
+  white-space: nowrap;
+}
+
+.table-scrollable > .table-bordered {
+  border: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr > th:first-child,
+.table-scrollable > .table-bordered > tbody > tr > th:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:first-child,
+.table-scrollable > .table-bordered > thead > tr > td:first-child,
+.table-scrollable > .table-bordered > tbody > tr > td:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:first-child {
+  border-left: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr > th:last-child,
+.table-scrollable > .table-bordered > tbody > tr > th:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:last-child,
+.table-scrollable > .table-bordered > thead > tr > td:last-child,
+.table-scrollable > .table-bordered > tbody > tr > td:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:last-child {
+  border-right: 0;
+}
+
+.table-scrollable > .table-bordered > thead > tr:last-child > th,
+.table-scrollable > .table-bordered > tbody > tr:last-child > th,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > th,
+.table-scrollable > .table-bordered > thead > tr:last-child > td,
+.table-scrollable > .table-bordered > tbody > tr:last-child > td,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > td {
+  border-bottom: 0;
+}
+
+/***
+Responsive Flip Scroll Tables
+***/
+
+.flip-scroll table { width: 100%; }
+
+@media only screen and (max-width: 768px) {
+  
+  .flip-scroll .flip-content:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
+  .flip-scroll * html .flip-content { zoom: 1; }
+  .flip-scroll *:first-child+html .flip-content { zoom: 1; }
+  
+  .flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
+ 
+  .flip-scroll th,
+  .flip-scroll td { margin: 0; vertical-align: top; }
+  .flip-scroll th { 
+    text-align: left; 
+    border: 0 !important; 
+    border-bottom: 1px solid #ddd !important; 
+    border-right: 1px solid #ddd !important; 
+    font-size: 13px !important;
+    padding: 5px;
+    width: auto !important;
+  }
+  
+  .flip-scroll table { display: block; position: relative; width: 100%; }
+  .flip-scroll thead { 
+    display: block; 
+    float: left; 
+  }
+  .flip-scroll tbody { 
+    display: block; 
+    width: auto; 
+    position: relative; 
+    overflow-x: auto; 
+    white-space: nowrap;     
+  }
+  .flip-scroll thead tr { display: block; }
+  .flip-scroll th { display: block; text-align: right; }
+  .flip-scroll tbody tr { display: inline-block; vertical-align: top; margin-left: -5px; }
+  .flip-scroll td { display: block; min-height: 1.25em; text-align: left; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important} 
+ 
+  /* sort out borders */
+ 
+  .flip-scroll th { border-bottom: 0; border-left: 0; }
+  .flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
+  .flip-scroll tbody tr { border-left: 1px solid #ddd; }
+  .flip-scroll th:last-child,
+  .flip-scroll td:last-child { border-bottom: 1px solid #ddd; }
+  
+}
+
+/***
+UI Loading
+***/
+
+.loading-message {
+  display: inline-block;
+  min-width: 125px;
+  padding: 10px;
+  margin: 0 auto;
+  color: #000 !important;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.loading-message span {
+  line-height:20px;
+  vertical-align: middle;
+}
+
+.loading-message.loading-message-boxed {
+  border: 1px solid #ddd;
+  background-color: #eee;  
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+}
+
+.page-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  min-width: 125px;
+  margin-left: -50px;
+  margin-top: -30px;
+  padding: 7px;
+  text-align: center;
+  color: #333;
+  font-size: 13px;
+  border: 1px solid #ddd;
+  background-color: #eee;  
+  vertical-align: middle;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);  
+}
+
+.page-loading span {
+  line-height:20px;
+  vertical-align: middle;
+}
+
+.zteDivWidth 
+{
+	width:auto !important
+}
+
+
+
+.nav-load-error {}
+
+.nav-pos-option {}
+
+/*TAB*/
+.nav-tabs{
+border:0;
+}
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
+border:0;
+border-top:3px solid #F3565D;
+}
+.nav-tabs>li>a{
+border-radius:0;
+}
+.nav-tabs>li>a:hover{
+background-color:#f1f3fa;
+border:1Px solid #f1f3fa;
+}
+/*button*/
+.btn{
+min-width: 80px;  
+letter-spacing:1px;
+}
+.btnGroup .btn{
+margin-left:15px;
+margin-right:15px;
+}
+.pagination-panel .btn{
+min-width: 4px;  }
+/*radius*/
+.radius_l{
+border-radius: 20px; 
+}
+.radius_m{
+border-radius: 8px; 
+}
+.radius_s{
+border-radius: 3px; 
+}
+/*common color*/
+.blue1 {   
+   background-color:#5b9bd1;
+   color:#fff;
+}
+.blue1:hover{   
+   background-color:#487ca9;
+    color:#fff;
+}
+.blue2{   
+   background-color:#57b5e3;
+    color:#fff;
+}
+.blue2:hover{   
+   background-color:#43a1cf;
+   color:#fff;
+}
+.red{
+  background-color:#E35B5A;
+  color:#fff;
+}
+.red:hover{
+  background-color:#ad9a4d;
+  color:#fff;
+}
+.green{
+ background-color:#44B6AE;
+}
+.green:hover{
+ background-color:#329d96;
+}
+.yellow{
+ background-color:#C0AF69;
+  color:#fff;
+}
+.yellow:hover{
+ background-color:#d45150;
+  color:#fff;
+}
+.grey{
+ background-color:#e5e5e5;
+  color:#333;
+}
+.grey:hover{
+ background-color:#d8d8d8;
+  color:#333;
+}
+/*Progress Bars*/
+.progress {  
+  border: 0; 
+  background-image: none !important;
+  filter: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;   
+
+}
+.form-wizard .steps > li.active > a.step .number{
+background-color:#45B6AF
+}
+.progress > .progress-bar-success{
+background-color:#45B6AF
+}
+/*label*/
+label{
+font-weight:400;
+margin-bottom:15px;
+}
+/**/
+.input-group-btn-vertical.fa{
+font-size:12px;
+}
+.spinner {
+  width: 60px;
+  margin-left:10px;
+  margin-right:30px;
+}
+.spinner input {
+  text-align: right;
+}
+.input-group-btn-vertical {
+  position: relative;
+  white-space: nowrap;
+  width: 1%;
+  vertical-align: middle;
+  display: table-cell;
+}
+.input-group-btn-vertical > .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px;
+  margin-left: -1px;
+  position: relative;
+  border-radius: 0;
+}
+.input-group-btn-vertical > .btn{
+  min-width:20px;
+}
+.input-group-btn-vertical > .btn:first-child {
+  border-top-right-radius: 4px;
+}
+.input-group-btn-vertical > .btn:last-child {
+  margin-top: -2px;
+  border-bottom-right-radius: 4px;
+}
+.input-group-btn-vertical i{
+  position: absolute;
+  top: -2px;
+  left: 5px;
+}
+.input-group .form-control{
+height:26px !important;
+}
+
+.about{
+    height:345px;
+    width:528px;
+}
+
+.aboutmain{
+    background-image: url("../img/about/about-bg-light.png");
+}
+
+.aboutinfo{
+    background-image: url("../img/about/about-bg-dark.png");
+}
+
+.about a{
+    color: white;
+
+    margin-left:15px;
+    text-decoration: none;
+}
+
+.about a.about_close{
+    float:right;
+    margin-right:20px;
+    font-size: 1.2em;
+}
+
+.about div{
+    padding-top:7px;
+
+}
+
+.about div.info{
+    float: right;
+    margin-right: 15px;
+    margin-top: 130px;
+    color: white;
+    font-size: 13px;
+}
+
+.about div.info div{
+    margin-left:15px;
+}
+
+.about div.info img{
+    margin-right: 55px;
+}
+
+.aboutDlg{
+    width: 530px;
+    margin-left:150px;
+}
+
+.aboutDlg .dataTable{
+    background-color: white;
+
+}
+
+.aboutDlg table.dataTable .heading>th.sorting_disabled {
+    background-color: white  !important;
+}
+
+.aboutDlg #abouttable_wrapper{
+    height:285px;
+    background-color: white;
+    padding:0px;
+    overflow:auto;
+}
+
+.aboutDlg td , .aboutDlg .table thead tr th{
+    font-size:13px;
+    font-weight:100;
+}
+
+.aboutDlg{
+    font-family:microsoft yahei,Arial;
+    letter-spacing:1px;
+}
+
+.aboutDlg tr {
+    height:37px;
+}
\ No newline at end of file
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
diff --git a/openo-portal/portal-common/src/main/webapp/common/default.html b/openo-portal/portal-common/src/main/webapp/common/default.html
new file mode 100644
index 00000000..59a29140
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/default.html
@@ -0,0 +1,561 @@
+<!--
+    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.
+-->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title id="com_zte_ums_ict_framework_ui_page_title" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+		</title>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta content="width=device-width,height=device-height,initial-scale=1.0"
+		name="viewport" />
+		<meta content="zte ict" name="description" />
+		<meta content="zte" name="author" />
+		<script type="text/javascript" src="./js/core/const.js"></script>
+		<script type="text/javascript" src="./appRes/js/custom-const.js" ></script>	
+		<script type="text/javascript" src="./js/core/hk.min.js"></script>	
+		<link href="../component/thirdparty/fakeLoader/fakeLoader.css" rel="stylesheet" type="text/css" />	
+		<script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>		
+		<script type="text/javascript" src="../component/thirdparty/fakeLoader/fakeLoader.min.js"></script>				
+		<link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" id="font_awesome" />
+		<link href="../component/thirdparty/bootstrap/css/bootstrap.min.css"	rel="stylesheet" type="text/css" />
+		<link href="../component/thirdparty/uniform/css/uniform.default.css"	rel="stylesheet" type="text/css" />
+		<link rel="stylesheet" type="text/css" href="../component/thirdparty/select2/select2.css"/>
+		<link rel="stylesheet" type="text/css" href="../component/thirdparty/select2/select2-custom.css"/>
+        <link href="./css/style-custom.css" rel="stylesheet" type="text/css" />
+		<link href="./css/style.css" rel="stylesheet" type="text/css"/>
+		<link href="./css/frame-style.css" rel="stylesheet"	type="text/css" />
+		<link href="./css/style-responsive.css" rel="stylesheet"	type="text/css" />
+		<link href="./css/plugins.css" rel="stylesheet" type="text/css"	/>
+		<link href="" rel="stylesheet" type="text/css" id="style_color" />
+		<link href="./css/changepwd.css" rel="stylesheet"	type="text/css" />
+		<link rel="shortcut icon" href="./img/integration/zte_logo_16.gif"	/>
+		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
+		<link rel="stylesheet" type="text/css" href="../component/css/ZteIctIcons/style.css"/>		
+	</head>
+	<body class="page-header-fixed page-sidebar-fixed" >
+	 <div id="pageLoading" class="fakeloader" ></div>
+	 	<script type="text/javascript">
+			$("#pageLoading").fakeLoader({text:"",bgColor:"#1178ee",opacity:'1',spinner:"spinner2",zIndex:99999999});
+		</script>	
+		<div class="header navbar navbar-fixed-top mega-menu">
+			<div class="header-inner">
+				<a class="navbar-brand zte-navbar-brand hidden-sm hidden-xs" href="./main-page.html">
+					<img id="com_zte_ums_ict_framework_img_netnumenLogo" src="./img/integration/netnumenLogo.png"
+					name_img="com_zte_ums_ict_framework_img" alt="logo" style="display:none"/>
+					<span id="com_zte_ums_ict_framework_ui_main_title" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+					class="zte-brand-text" style="display:none">
+					</span>
+				</a>
+				<div class="hor-menu hidden-sm hidden-xs">
+					<ul class="nav navbar-nav hormenu" style="display:none" id="main_hormenu" menuSrc="main_MegaHorbar.html" ><!--style="display:none"这个暂时去掉-->
+					</ul>
+                    <ul class="nav navbar-nav hormenu" style="display:none"  id="f_hormenu" menuSrc="main_Fmegabar.html">
+                    </ul>
+                </div>
+				<ul class="nav navbar-nav pull-right">
+					<div>
+						<a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" onclick="handleMavToggle(this);" navtoggledispattr="hidden">
+							<img src="./img/menu-toggler.png" alt="" />
+						</a>
+					</div>
+					<div class="zte-theme-panel ">
+						<div class="toggler">
+						</div>
+						<div class="toggler-close">
+						</div>
+						<div class="theme-options">
+							<div class="theme-option theme-colors clearfix">
+								<span id="com_zte_ums_ict_framework_ui_skin_select" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<ul>
+									<li class="color-ztebluelight current" data-style="ztebluelight">
+									</li>
+									<li class="color-ztebluelight4" data-style="ztebluelight4">
+									</li>
+									<li class="color-ztebluelight2" data-style="ztebluelight2">
+									</li>
+
+									<!--li class="color-ztebluelight3" data-style="ztebluelight3">
+									</li>
+									<li class="color-zteblue" data-style="zteblue">
+									</li>
+									<li class="color-blue" data-style="blue">
+									</li>
+									<li class="color-black" data-style="black">
+									</li-->
+									
+									<!--li class="color-grey" data-style="grey">
+									</li>
+									<li class="color-white" data-style="light">
+									</li>
+									<li class="color-brown" data-style="brown">
+									</li>
+									<li class="color-purple" data-style="purple">
+									</li-->
+								</ul>
+							</div>							
+							<div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_language" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="language-option form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_language_zhcn" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="zh-CN" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_language_en" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="en-US">
+									</option>
+								</select>
+							</div>
+							<div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_navbar_direction" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="nav-pos-direction form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_navbar_direction_vertical" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="vertical" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_navbar_direction_horizontal" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="horizontal">
+									</option>
+                                    <option id="com_zte_ums_ict_framework_ui_navbar_direction_fmenu" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+                                            value="fmenu">
+                                    </option>
+								</select>
+							</div>
+							<div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_skin_layout" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="layout-option form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_layout_fluid" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="fluid" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_layout_boxed" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="boxed">
+									</option>
+								</select>
+							</div>
+							<!--div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_page_head" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="header-option form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_page_head_fixed" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="fixed" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_page_head_default" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="default">
+									</option>
+								</select>
+							</div-->
+							<!--div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_side_bar" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="sidebar-option form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_page_sidebar_fixed" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="fixed" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_page_sidebar_default" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="default">
+									</option>
+								</select>
+							</div-->
+							<!--div class="theme-option">
+								<span id="com_zte_ums_ict_framework_ui_sidebar_location" name_i18n="com_zte_ums_ict_framework_ui_i18n">
+								</span>
+								<select class="sidebar-pos-option form-control input-small">
+									<option id="com_zte_ums_ict_framework_ui_keep_left" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="left" selected="selected">
+									</option>
+									<option id="com_zte_ums_ict_framework_ui_keep_right" name_i18n="com_zte_ums_ict_framework_ui_i18n"
+									value="right">
+									</option>
+								</select>
+							</div-->							
+							<!-- <div class="theme-option">
+							<span id="com_zte_ums_ict_framework_ui_page_footer">
+							</span>
+							<select class="footer-option form-control input-small">
+							<option id="com_zte_ums_ict_framework_ui_page_footer_fixed" value="fixed" ></option>
+							<option id="com_zte_ums_ict_framework_ui_page_footer_default" value="default" selected="selected"></option>
+							</select>
+							</div>
+							-->
+						</div>
+					</div>
+					<li class="dropdown" id="header_notification_bar" style="display:none">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
+						data-close-others="true">
+							<i class="fa fa-warning" id="hd_heighestAlarmcount_li">
+							</i>
+							<span class="badge" id="hd_heighestAlarmcount_value">
+							</span>
+						</a>
+						<ul class="dropdown-menu extended notification">
+							<li>
+								<p>
+									<span id="hd_alarmcount_total_before_text">
+									</span>
+									<span class="badge" id="hd_alarmcount_total_value">
+									</span>
+									<span id="hd_alarmcount_total_after_text">
+									</span>
+								</p>
+							</li>
+							<li>
+								<ul class="dropdown-menu-list scroller" style="height: 168px;">
+									<li>
+										<a href="#">
+											<span class="label label-icon alarm-critical">
+												<i class="fa fa-bolt " id="hd_alarmcount_critical_li">
+												</i>
+												<span class="badge" id="hd_alarmcount_critical_value">
+												</span>
+											</span>
+											<span id="hd_alarmcount_critical_text">
+											</span>
+										</a>
+									</li>
+									<li>
+										<a href="#">
+											<span class="label label-icon alarm-major">
+												<i class="fa fa-warning" id="hd_alarmcount_major_li">
+												</i>
+												<span class="badge" id="hd_alarmcount_major_value">
+												</span>
+											</span>
+											<span id="hd_alarmcount_major_text">
+											</span>
+										</a>
+									</li>
+									<li>
+										<a href="#">
+											<span class="label label-icon alarm-minor">
+												<i class="fa fa-bell-o" id="hd_alarmcount_minor_li">
+												</i>
+												<span class="badge" id="hd_alarmcount_minor_value">
+												</span>
+											</span>
+											<span id="hd_alarmcount_minor_text">
+											</span>
+										</a>
+									</li>
+									<li>
+										<a href="#">
+											<span class="label label-icon alarm-warning">
+												<i class="fa fa-bullhorn" id="hd_alarmcount_warning_li">
+												</i>
+												<span class="badge" id="hd_alarmcount_warning_value">
+												</span>
+											</span>
+											<span id="hd_alarmcount_warning_text">
+											</span>
+										</a>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+					<li class="dropdown user" id="header_dropdown_user" style="display:none">
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
+						data-close-others="true">
+							<span>
+								<img alt="" width=26 height=26 src="./img/user.png"
+								/>
+							</span>
+							<span class="username" id="currentUser">
+							</span>
+							<i class="fa fa-angle-down">
+							</i>
+						</a>
+						<ul class="dropdown-menu">
+							<div id="uep_ict_help_div">
+								<li>
+									<a href="#" target="uep_ict_help" id="uep_ict_help_url">
+										<i class="fa fa-book fa-fw">
+										</i>
+										<span id="com_zte_ums_ict_framework_moudle_help">
+										</span>
+									</a>
+								</li>
+                                <li>
+                                    <a href="#" data-target="#aboutDlg" data-backdrop="false" data-toggle="modal">
+                                        <i class="fa fa fa-th-large">
+                                        </i>
+										<span id="com_zte_ums_ict_framework_moudle_about">
+										</span>
+                                    </a>
+                                </li>
+                                <li class="divider">
+								</li>
+							</div>
+							<!--<li>
+							<a href="#" >
+							<i class="fa fa-user"></i> <span id="com_zte_ums_ict_framework_ui_basic_info"></span>
+							</a>
+							</li>-->
+							<li>
+								<a href="#" id ="changePwd_labellink" data-target="#changepwdDlg" data-backdrop="false" data-toggle="modal">
+									<i class="fa fa-pencil">
+									</i>
+									<span id="changePwd_label">
+									</span>
+								</a>
+							</li>
+							<li class="divider" id="full_logout_divider">
+							</li>
+							<div id="trigger_fullscreen_div">
+							<li>
+								<a href="javascript:;" id="trigger_fullscreen">
+									<i class="fa fa-arrows">
+									</i>
+									<span id="fullscreen_label">
+									</span>
+								</a>
+							</li>
+							</div>
+							<div id="trigger_logout_div">
+							<li>
+								<a id="trigger_logout" href="#">
+									<i class="fa fa-key">
+									</i>
+									<span id="logout_label">
+									</span>
+								</a>
+							</li>
+							</div>
+						</ul>
+					</li>
+					<li class="dropdown system" id="headerMenu">
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="modal fade" tabindex="-1" id="changepwdDlg" style="display:none" role="dialog"
+		aria-hidden="true">
+			<div class="page-loading page-loading-boxed">
+				<img src="./img/loading-spinner-grey.gif" alt="" class="loading">
+				<span>
+					&nbsp;&nbsp;Loading...
+				</span>
+			</div>
+			<div class="modal-dialog modal-lg ">
+				<div class="modal-content Changepasswd" dlgsrc="changepwd.html">
+				</div>
+			</div>
+		</div>
+        <div class="modal fade" tabindex="-1" id="aboutDlg" role="dialog"
+             aria-hidden="true">
+            <div class="page-loading page-loading-boxed">
+                <img src="img/loading-spinner-grey.gif" alt="" class="loading">
+				<span>
+					&nbsp;&nbsp;Loading...
+				</span>
+            </div>
+            <div class="modal-dialog modal-lg ">
+                <div class="modal-content aboutDlg" dlgsrc="about.html">
+                </div>
+            </div>
+        </div>
+		<!-- /.modal -->
+		<div class="clearfix">
+		</div>
+		<div class="page-container">
+			<div class="page-sidebar navbar-collapse collapse" style="z-index: 9999;">
+				<ul class="page-sidebar-menu" id="page-sidebar-menu"   data-auto-scroll="true" data-slide-speed="200"
+				menuSrc="main_siderbar.html" >
+				</ul>
+                <ul class="page-sidebar-menu"  id="page-f-sidebar-menu"   data-auto-scroll="true" data-slide-speed="200"
+                    menuSrc="main_Fsiderbar.html" >
+                </ul>
+                <ul class="page-sidebar-menu"  id="page-megachild-sidebar-menu"   data-auto-scroll="true" data-slide-speed="200"
+                    menuSrc="child_menu.html" style="display:none">
+                </ul>				
+			</div>
+			<div class="page-content-wrapper">
+				<div class="page-content">
+					<div class="page-content-body">
+						<div class="row">
+							<div class="col-md-12">
+								<ul class="page-breadcrumb breadcrumb">
+									<div class="row">
+										<ul class="col-md-10 breadcrumbUl" >
+											<!--li>
+												<i class="fa fa-home">
+												</i>
+												<a href="javascript:goToHomePage();">
+												</a>
+												<i class="fa fa-angle-right">
+												</i>
+											</li>
+											<li>
+												<a href="#">
+												</a>
+											</li-->
+										</ul>
+										
+										
+									</div>
+									<ul class="col-md-2 more-botton-zone">
+												
+										</ul>	
+														
+								</ul>
+<link href="css/more-operation.css"  rel="stylesheet" type="text/css" />	
+											<div id = "pageableDiv" style = "display: none" class="row row1">	        
+												<div class="col-xs-12" >
+													   <div class="row" >
+															 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">						  
+															  <div class="carousel-inner" role="listbox"></div>
+															  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+																<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+																<span class="sr-only">Previous</span>
+															  </a>
+															  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="margin-right: -10px;">
+																<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+																<span class="sr-only">Next</span>
+															  </a>
+															</div>								
+													   </div>		
+												</div>			   			
+											</div>								
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- <div class="footer">
+		<div class="footer-inner">
+		2014 &copy; ZTE中兴通讯股份有限公司
+		</div>
+		<div class="footer-tools">
+		<span class="go-top">
+		<i class="fa fa-angle-up"></i>
+		</span>
+		</div>
+		</div> -->
+		<!--[if lt IE 9]>
+			<script type="text/javascript" src="/ngict/iui/component/thirdparty/respond/respond.min.js">
+			</script>
+			<script type="text/javascript" src="/ngict/iui/component/thirdparty/excanvas/excanvas.min.js">
+			</script>
+		<![endif]-->
+	
+		<!---->
+		<!--script type="text/javascript" src="/ngict/iui/framework/menus/framework/thirdparty/jquery-migrate-1.2.1.min.js">
+		</script-->
+		<!-- 重要! 加载botstrap.min.js之前请先加载jquery-ui-1.10.3.custom.min.js以避免bootstrap的tooltip与jquery
+		ui的tooltip发生冲突 -->
+		<!--script type="text/javascript" src="../component/thirdparty/jquery-ui/jquery-ui-1.10.3.custom.min.js">
+		</script-->
+		<script type="text/javascript" src="../component/thirdparty/bootstrap/js/bootstrap.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/jquery-validation/js/jquery.validate.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/jquery-blockui/jquery.blockui.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/jquery-cokie/jquery.cokie.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/uniform/jquery.uniform.min.js">
+		</script>
+		<!-- 重要! 加载ict-cometd.js之前必须先加载cometd.js和jquery.cometd.js以避免cometd的ict-cometd发生内存溢出
+		-->
+		<script type="text/javascript" src="../component/thirdparty/cometd/cometd.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/cometd/jquery/jquery.cometd.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/select2/select2.min.js">
+		</script>
+		<script type="text/javascript" src="../component/thirdparty/bootbox/bootbox.min.js">
+		</script>
+		<script src="./js/moreOperation.js"></script>
+		<script src="./js/tools.js"></script> 
+		<script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js">
+		</script>
+		<script type="text/javascript" src="./js/international/loadi18n.js">
+		</script>
+		<script type="text/javascript" src="./js/Main2moreMenu.js">
+		</script>	
+		<script type="text/javascript" src="./js/core/pym.min.js"></script>
+		<script type="text/javascript" src="./js/core/ZteFrameWork.min.js"></script>
+		<script type="text/javascript" src="./appRes/js/custom.js" ></script>
+		<script>
+			var sence = '0';
+			var panel = $('.zte-theme-panel');
+			var body = $('body');
+			switch (sence) {
+			case "1":
+				$('title').attr('id', 'com_zte_ums_ict_framework_ui_page_title_1');
+			    break;
+			case "2":
+				$('title').attr('id', 'com_zte_ums_ict_framework_ui_page_title_2');
+			    if (body.hasClass("page-sidebar-fixed")) {
+			        body.removeClass('page-sidebar-fixed');
+			    }
+			    body.addClass('page-sidebar-closed');
+			    break;
+			case "3":
+				$('title').attr('id', 'com_zte_ums_ict_framework_ui_page_title_3');
+			    if (body.hasClass("page-sidebar-fixed")) {
+			        body.removeClass('page-sidebar-fixed');
+			    }
+			    body.addClass('page-sidebar-closed');
+			    $('.sidebar-option', panel).val("default");
+			    //getHeaderMenu("/web/newict/framework/zte/ict/headerMenu.html");
+			    break;
+			case "0":
+			default:
+			    break;
+			}
+		</script>
+		<script>
+			loadi18n_WebFramework(); // 加载框架自身的国际化内容
+			iniHorMenu();            
+            iniSidebarMenu();
+			iniFMenu();			
+		</script>
+		<script type="text/javascript" src="./js/fm_light.js">
+		</script>
+		<script type="text/javascript" src="./js/security/changepwd.js">
+		</script>
+        <script type="text/javascript" src="../component/thirdparty/data-tables/jquery.dataTables.min.js">
+        </script>
+        <script src="js/mainpage/about.js"></script>
+		<script>
+			jQuery(document).ready(function() {
+				ZteFrameWork.init();
+				initBaseInfo();
+				//initUserInfo();
+				iniChangePWDDlg();
+                iniAboutDlg();
+				var language = getLanguage();
+				bootbox.setDefaults({
+					locale: language.replace("-", "_")
+				});
+				var help_url = "/help/showhelp.jsp?lang=" + language;
+				$('#uep_ict_help_url').attr('href', help_url);
+				//handleAppCustomMenuItem();
+				//handleAppCustomThemeColor();
+				$('#changepwdDlg').on('hide.bs.modal',function() {
+					$(this).removeData('bs.modal');
+				})
+				var pymChild = new pym.Child({ polling: 500 });
+				$("#pageLoading").setToHide();
+			});
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-en-US.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-en-US.properties
new file mode 100644
index 00000000..77934d19
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-en-US.properties
@@ -0,0 +1,225 @@
+#
+# 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.
+#
+
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_page_title=ICT Management System
+com_zte_ums_ict_framework_ui_page_title_1=ICT Management System-ICT Monitor 
+com_zte_ums_ict_framework_ui_page_title_2=ICT Management System-Base Scenarios
+com_zte_ums_ict_framework_ui_page_title_3=ICT Management System-GIS Scenarios
+com_zte_ums_ict_framework_ui_skin_select=Theme Color
+com_zte_ums_ict_framework_ui_language=Language
+com_zte_ums_ict_framework_ui_language_zhcn=中文
+com_zte_ums_ict_framework_ui_language_en=English
+com_zte_ums_ict_framework_ui_skin_layout=Layout
+com_zte_ums_ict_framework_ui_layout_fluid=Fluid
+com_zte_ums_ict_framework_ui_layout_boxed=Boxed
+com_zte_ums_ict_framework_ui_page_head=Header
+com_zte_ums_ict_framework_ui_page_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_default=Default
+com_zte_ums_ict_framework_ui_page_head_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_head_default=Default
+com_zte_ums_ict_framework_ui_page_sidebar_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_sidebar_default=Default
+com_zte_ums_ict_framework_ui_side_bar=Sidebar
+com_zte_ums_ict_framework_ui_sidebar_location=Sidebar Position
+com_zte_ums_ict_framework_ui_navbar_direction=Menu Direction
+com_zte_ums_ict_framework_ui_navbar_direction_horizontal=Horizontal
+com_zte_ums_ict_framework_ui_navbar_direction_vertical=Vertical
+com_zte_ums_ict_framework_ui_navbar_direction_fmenu=Category Navigation
+com_zte_ums_ict_framework_ui_keep_top=Top
+com_zte_ums_ict_framework_ui_keep_left=Left
+com_zte_ums_ict_framework_ui_keep_right=Right
+com_zte_ums_ict_framework_ui_page_footer=Footer
+
+com_zte_ums_ict_framework_ui_basic_info=Basic Information
+com_zte_ums_ict_framework_ui_search_value=Search...
+com_zte_ums_ict_framework_ui_sidebar_mainPage=Home
+com_zte_ums_ict_framework_ui_sidebar_topo=Topology
+com_zte_ums_ict_framework_ui_sidebar_resList=Resource Table
+com_zte_ums_ict_framework_ui_sidebar_physicTopo=Physical Topology
+com_zte_ums_ict_framework_ui_sidebar_linkTopo=Relation Topology
+com_zte_ums_ict_framework_ui_sidebar_alarm=Alarm
+com_zte_ums_ict_framework_ui_sidebar_alarm_summary=Alarm Summary
+com_zte_ums_ict_framework_ui_sidebar_currentAlarm=Active Alarm
+com_zte_ums_ict_framework_ui_sidebar_historyAlarm=History Alarm
+com_zte_ums_ict_framework_ui_sidebar_notice=Notification
+com_zte_ums_ict_framework_ui_sidebar_alarmRule=Alarm Setting
+com_zte_ums_ict_framework_ui_sidebar_queryAlarm=Query Alarm
+com_zte_ums_ict_framework_ui_sidebar_alarmStat=Alarm Statistic
+com_zte_ums_ict_framework_ui_sidebar_alarmSetup=Alarm Setting
+com_zte_ums_ict_framework_ui_sidebar_perform=Performance
+
+com_zte_ums_ict_framework_ui_sidebar_pm_meatask=Measure Management
+com_zte_ums_ict_framework_ui_sidebar_index=Index Management
+com_zte_ums_ict_framework_ui_sidebar_threshold=Threshold Management
+
+com_zte_ums_ict_framework_ui_sidebar_historySearch=History Query
+com_zte_ums_ict_framework_ui_sidebar_realTimeSearch=Realtime Data Query
+com_zte_ums_ict_framework_ui_sidebar_counterAndIndicator=Counter and Index
+com_zte_ums_ict_framework_ui_sidebar_measureTaskMang=Measurement Task
+com_zte_ums_ict_framework_ui_sidebar_generalTemplateMang=Common Template
+com_zte_ums_ict_framework_ui_sidebar_config=Configuration
+com_zte_ums_ict_framework_ui_sidebar_itDevMang=IT Resource Management
+com_zte_ums_ict_framework_ui_sidebar_ipDevMang=IP Resource Management
+com_zte_ums_ict_framework_ui_sidebar_autoFind=Auto Discovery
+com_zte_ums_ict_framework_ui_sidebar_pollConfig=Poll Configuration
+com_zte_ums_ict_framework_ui_sidebar_smcenter=Security Center
+com_zte_ums_ict_framework_ui_sidebar_security=Security
+com_zte_ums_ict_framework_ui_sidebar_smGuide=security Entry 
+com_zte_ums_ict_framework_ui_sidebar_deptMang=Department Management
+com_zte_ums_ict_framework_ui_sidebar_userMang=User Management
+com_zte_ums_ict_framework_ui_sidebar_roleMang=Role Management
+com_zte_ums_ict_framework_ui_sidebar_acccRule=Customize User Account Rule
+com_zte_ums_ict_framework_ui_sidebar_roleAndRoleset=Role & Role Set
+com_zte_ums_ict_framework_ui_sidebar_role=Role Management
+com_zte_ums_ict_framework_ui_sidebar_roleset=Role Set Management
+com_zte_ums_ict_framework_ui_sidebar_log=Log
+com_zte_ums_ict_framework_ui_sidebar_operationLog=Operation Log
+com_zte_ums_ict_framework_ui_sidebar_sysLog=System Log
+com_zte_ums_ict_framework_ui_sidebar_securityLog=Security Log
+com_zte_ums_ict_framework_ui_sidebar_sysLogMultiTab=System Log(Multi-tab Example)
+com_zte_ums_ict_framework_ui_sidebar_operationLogMultiTab=Operation Log(Multi-tab Example)
+com_zte_ums_ict_framework_ui_sidebar_system=System
+com_zte_ums_ict_framework_ui_sidebar_dataBackup=Backup Data
+com_zte_ums_ict_framework_ui_sidebar_fileBackup=Backup Files
+com_zte_ums_ict_framework_ui_sidebar_license=License
+com_zte_ums_ict_framework_ui_sidebar_sysState=System Status
+com_zte_ums_ict_framework_ui_sidebar_SystemMang=System Management
+
+com_zte_ums_ict_framework_ui_sidebar_monitor=Monitor
+com_zte_ums_ict_framework_ui_sidebar_alarmByCell=Active Alarm Statistic by NE 
+com_zte_ums_ict_framework_ui_sidebar_alarmByCellType=Active Alarm Statistic by NE Type
+com_zte_ums_ict_framework_ui_breadcrumbs_moreOper=More Operation
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=DB Struct Backup
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=Base Data Backup
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=Log Data Back&Restore
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=Alarm Data Back&Restore
+com_zte_ums_ict_framework_ui_sidebar_dbBack=Database Backup
+com_zte_ums_ict_framework_ui_breadcrumbs_ruleSetup=Rule Setup
+com_zte_ums_ngict_dashboard=Dashboard
+
+com_zte_ums_ict_framework_ui_sidebar_levelRedefineSetup=Severity Regrading Setting 
+com_zte_ums_ict_framework_ui_sidebar_disposeSuggestionSetup=Handing Suggestion Setting
+com_zte_ums_ict_framework_ui_sidebar_AlarmBoxSetup=Set Alarm Box
+com_zte_ums_ict_framework_ui_sidebar_measureObjectMang=MO Management
+com_zte_ums_ict_framework_ui_sidebar_thresholdTaskMang=Threshold Task
+com_zte_ums_ict_framework_ui_sidebar_anDevMan=AN Device Management
+com_zte_ums_ict_framework_ui_sidebar_cellMang=Cell management
+com_zte_ums_ict_framework_ui_sidebar_snmpPing= SNMP Ping
+com_zte_ums_ict_framework_ui_sidebar_telnet=Telnet
+com_zte_ums_ict_framework_ui_sidebar_workOder=Work Order
+com_zte_ums_ict_framework_ui_sidebar_resMang=Resource Management
+com_zte_ums_ict_framework_ui_sidebar_SecurityMang=Security Management
+com_zte_ums_ict_framework_ui_sidebar_userLockStatus=Show Locked Users
+com_zte_ums_ict_framework_ui_sidebar_loginUserMang=Login User Management
+com_zte_ums_ict_framework_ui_sidebar_userBlackList=User Blacklist
+com_zte_ums_ict_framework_ui_sidebar_operationSet=Operation Set Management
+com_zte_ums_ict_framework_ui_sidebar_LogMang=Log Management
+com_zte_ums_ict_framework_ui_sidebar_backRestore=Backup and Restore
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=Backup Whole DB Structure
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=Backup Basic Data
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=Log Data Backup and Restore
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=Alarm Data Backup and Restore
+com_zte_ums_ict_framework_ui_loading=loading......
+com_zte_ums_ict_framework_ui_searching=searching......
+com_zte_ums_ict_framework_ui_clickTooFast=You click on too fast, please wait for a while to click the menu, thank you!
+com_zte_ums_ict_framework_ui_loadmenuerror=loading menu failed.
+com_zte_ums_ict_framework_ui_confirmlogout=Do you confirm to logout?
+com_zte_ums_aos_framework_ui_heartbeat_fail=The session is invalidated.
+com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError=Default Header with Fixed Sidebar option is not supported. Proceed with Fixed Header with Fixed Sidebar.
+com_zte_ums_ict_framework_ui_fixedsiderightpositionError=Fixed Sidebar with right position is not supported. Set Sidebar as default.
+com_zte_ums_ict_framework_ui_loadchgpwdpageError=loading change password page failed.
+com_zte_ums_ict_framework_ui_searchmessage=The {0} keyword search results as follows:
+com_zte_ums_ict_framework_ui_month=January,February,March,April,May,June,July,August,September,October,November,December
+com_zte_ums_ict_framework_ui_customdate=Custom date
+com_zte_ums_ict_framework_ui_from=From
+com_zte_ums_ict_framework_ui_to=To
+com_zte_ums_ict_framework_ui_apply=Apply
+com_zte_ums_ict_framework_ui_today=Today
+com_zte_ums_ict_framework_ui_yestoday=Yestoday
+com_zte_ums_ict_framework_ui_lastdays=Last {0} days
+com_zte_ums_ict_framework_ui_thismonth=This month
+com_zte_ums_ict_framework_ui_lastmonth=Last month
+
+com_zte_ums_ict_framework_ui_group_about=About
+com_zte_ums_ict_framework_ui_group_logout=Logout
+com_zte_ums_ict_framework_ui_changePwd=Change Password
+com_zte_ums_ict_framework_ui_group_fullscreen=Full Screen
+com_zte_ums_ict_framework_ui_group_exitfullscreen=Exit Full Screen
+com_zte_ums_ict_framework_moudle_help = Help
+com_zte_ums_ict_framework_moudle_menutoggler=More
+
+
+com_zte_ums_ict_alarmcount_total_label = Total:{0}
+com_zte_ums_ict_alarmcount_critical_label = Critical:{0}
+com_zte_ums_ict_alarmcount_critical_text = Critical Alarm
+com_zte_ums_ict_alarmcount_major_label = Major:{0}
+com_zte_ums_ict_alarmcount_major_text = Major Alarm
+com_zte_ums_ict_alarmcount_minor_label = Minor:{0}
+com_zte_ums_ict_alarmcount_minor_text = Minor Alarm
+com_zte_ums_ict_alarmcount_warning_label = Warning:{0}
+com_zte_ums_ict_alarmcount_warning_text = Warning Alarm
+com_zte_ums_ict_alarmcount_none_label=No alarm Now!
+com_zte_ums_ict_alarmcount_total_after_text = ,Now!"
+com_zte_ums_ict_alarmcount_total_before_text =Total Alarm Number:
+
+com_zte_ums_ict_framework_ui_sidebar_performMonitor=Perform Monitor
+com_zte_ums_ict_framework_ui_sidebar_resource=Resource
+com_zte_ums_ict_framework_ui_sidebar_manualAdd=Manual Add
+com_zte_ums_ict_framework_ui_sidebar_gisTopo=GIS Topo
+
+
+com_zte_ums_ict_framework_ui_sidebar_userDispatch=User Dispatch
+com_zte_ums_ict_framework_ui_sidebar_roleCollect=Role Collection
+
+com_zte_ums_ict_sm_user_op_ok=Operation succeeded.
+com_zte_ums_ict_sm_user_close_button=Close
+com_zte_ums_ict_sm_user_confirm=OK
+com_zte_ums_ict_sm_user_ok=OK
+com_zte_ums_ict_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User Password Set
+com_zte_ums_ict_sm_user_modify_current_password=User Password Set
+com_zte_ums_ict_sm_user_old_password=Old Password
+com_zte_ums_ict_sm_user_confirmpassword=Confirm New Password
+com_zte_ums_ict_sm_user_cancel_button=Cancel
+com_zte_ums_ict_sm_user_password=New Password
+com_zte_ums_ict_sm_password_confirm_not_consistent = The New Password and the Confirm New Password are inconsistent.
+com_zte_ums_ict_sm_user_inputoldpwd=Please input old password
+com_zte_ums_ict_sm_user_inputnewpwd=Please input new password
+com_zte_ums_ict_sm_user_inputnewpwdagain=Please input new password again
+com_zte_ums_ict_portal_chgpwd_oldpwdError=Old password error
+com_zte_ums_ict_login_inputname=Please input user name
+com_zte_ums_ict_login_inputpwd=Please input user password
+
+com_zte_ums_ict_framework_ui_ztebluelight=ZTE Blue Light
+com_zte_ums_ict_framework_ui_zteblue=ZTE Blue
+com_zte_ums_ict_framework_ui_blue=Blue
+
+com_zte_ums_ict_about_ppu_field_name =Name
+com_zte_ums_ict_about_ppu_field_version = Version
+com_zte_ums_ict_about_ppu_field_desc = Description
+com_zte_ums_ict_about_ppu_field_time = Update Time
+com_zte_ums_ict_framework_moudle_about = About
+com_zte_ums_ict_framework_about_detail = Info
+com_zte_ums_ict_framework_about_version=Version:
+com_zte_ums_ict_portal_login_companyName=2014 @; ZTE - Corporation
+
+com_zte_ums_ict_framework_main_page_dashboard=Dashboard
+com_zte_ums_ict_framework_main_page_monitor=Monitor
+com_zte_ums_ict_framework_main_page_alarm=Alarm
+com_zte_ums_ict_framework_main_page_performance=Performance
+com_zte_ums_ict_framework_main_page_security=Security
+com_zte_ums_ict_framework_main_page_log=Log
+com_zte_ums_ict_framework_main_page_system=System
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-zh-CN.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-zh-CN.properties
new file mode 100644
index 00000000..6c0b4267
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-i18n-zh-CN.properties
@@ -0,0 +1,226 @@
+#
+# 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.
+#
+
+
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_page_title=ICT管理系统
+com_zte_ums_ict_framework_ui_page_title_1=ICT管理系统-ICT监控
+com_zte_ums_ict_framework_ui_page_title_2=ICT管理系统-基础版本场景
+com_zte_ums_ict_framework_ui_page_title_3=ICT管理系统-GIS应用场景
+com_zte_ums_ict_framework_ui_skin_select=皮肤选择
+com_zte_ums_ict_framework_ui_language=语言
+com_zte_ums_ict_framework_ui_language_zhcn=中文
+com_zte_ums_ict_framework_ui_language_en=English
+com_zte_ums_ict_framework_ui_skin_layout=布局
+com_zte_ums_ict_framework_ui_layout_fluid=流动布局
+com_zte_ums_ict_framework_ui_layout_boxed=盒子布局
+com_zte_ums_ict_framework_ui_page_head=页头
+com_zte_ums_ict_framework_ui_page_fixed=固定
+com_zte_ums_ict_framework_ui_page_default=默认
+com_zte_ums_ict_framework_ui_page_head_fixed=固定
+com_zte_ums_ict_framework_ui_page_head_default=默认
+com_zte_ums_ict_framework_ui_page_sidebar_fixed=固定
+com_zte_ums_ict_framework_ui_page_sidebar_default=默认
+com_zte_ums_ict_framework_ui_side_bar=边栏
+com_zte_ums_ict_framework_ui_sidebar_location=边栏位置
+com_zte_ums_ict_framework_ui_navbar_direction=菜单方向
+com_zte_ums_ict_framework_ui_navbar_direction_horizontal=横向
+com_zte_ums_ict_framework_ui_navbar_direction_vertical=纵向
+com_zte_ums_ict_framework_ui_navbar_direction_fmenu=分类导航
+com_zte_ums_ict_framework_ui_keep_top=靠上
+com_zte_ums_ict_framework_ui_keep_left=靠左
+com_zte_ums_ict_framework_ui_keep_right=靠右
+com_zte_ums_ict_framework_ui_page_footer=页脚
+
+com_zte_ums_ict_framework_ui_basic_info=基本信息
+com_zte_ums_ict_framework_ui_search_value=搜索...
+com_zte_ums_ict_framework_ui_sidebar_mainPage=主页
+com_zte_ums_ict_framework_ui_sidebar_topo=拓扑
+com_zte_ums_ict_framework_ui_sidebar_resList=资源列表
+com_zte_ums_ict_framework_ui_sidebar_physicTopo=物理拓扑
+com_zte_ums_ict_framework_ui_sidebar_linkTopo=链路拓扑
+com_zte_ums_ict_framework_ui_sidebar_alarm=告警
+com_zte_ums_ict_framework_ui_sidebar_alarm_summary=告警概览
+com_zte_ums_ict_framework_ui_sidebar_currentAlarm=当前告警
+com_zte_ums_ict_framework_ui_sidebar_historyAlarm=历史告警
+com_zte_ums_ict_framework_ui_sidebar_notice=通知
+com_zte_ums_ict_framework_ui_sidebar_alarmRule=告警规则
+com_zte_ums_ict_framework_ui_sidebar_queryAlarm=告警查询
+com_zte_ums_ict_framework_ui_sidebar_alarmStat=告警统计
+com_zte_ums_ict_framework_ui_sidebar_alarmSetup=告警设置
+com_zte_ums_ict_framework_ui_sidebar_perform=性能
+
+com_zte_ums_ict_framework_ui_sidebar_pm_meatask=任务管理
+com_zte_ums_ict_framework_ui_sidebar_index=指标管理
+com_zte_ums_ict_framework_ui_sidebar_threshold=门限管理
+
+com_zte_ums_ict_framework_ui_sidebar_historySearch=历史查询
+com_zte_ums_ict_framework_ui_sidebar_realTimeSearch=实时查询
+com_zte_ums_ict_framework_ui_sidebar_counterAndIndicator=计数器与指标
+com_zte_ums_ict_framework_ui_sidebar_measureTaskMang=测量任务管理
+com_zte_ums_ict_framework_ui_sidebar_generalTemplateMang=通用模板管理
+com_zte_ums_ict_framework_ui_sidebar_config=配置
+com_zte_ums_ict_framework_ui_sidebar_itDevMang=IT设备管理
+com_zte_ums_ict_framework_ui_sidebar_ipDevMang=IP设备管理
+com_zte_ums_ict_framework_ui_sidebar_autoFind=自动发现
+com_zte_ums_ict_framework_ui_sidebar_pollConfig=轮询设置
+com_zte_ums_ict_framework_ui_sidebar_security=安全
+com_zte_ums_ict_framework_ui_sidebar_smcenter=安全中心
+com_zte_ums_ict_framework_ui_sidebar_smGuide=安全入门
+com_zte_ums_ict_framework_ui_sidebar_deptMang=部门管理
+com_zte_ums_ict_framework_ui_sidebar_userMang=用户管理
+com_zte_ums_ict_framework_ui_sidebar_acccRule=帐户规则
+com_zte_ums_ict_framework_ui_sidebar_roleMang=角色管理
+com_zte_ums_ict_framework_ui_sidebar_roleAndRoleset=角色和角色集
+com_zte_ums_ict_framework_ui_sidebar_role=角色管理
+com_zte_ums_ict_framework_ui_sidebar_roleset=角色集管理
+com_zte_ums_ict_framework_ui_sidebar_log=日志
+com_zte_ums_ict_framework_ui_sidebar_operationLog=操作日志
+com_zte_ums_ict_framework_ui_sidebar_sysLog=系统日志
+com_zte_ums_ict_framework_ui_sidebar_securityLog=安全日志
+com_zte_ums_ict_framework_ui_sidebar_sysLogMultiTab=系统日志(多TAB示例)
+com_zte_ums_ict_framework_ui_sidebar_operationLogMultiTab=操作日志(多TAB示例)
+com_zte_ums_ict_framework_ui_sidebar_system=系统
+com_zte_ums_ict_framework_ui_sidebar_dataBackup=数据备份
+com_zte_ums_ict_framework_ui_sidebar_fileBackup=文件备份
+com_zte_ums_ict_framework_ui_sidebar_license=许可证
+com_zte_ums_ict_framework_ui_sidebar_sysState=系统状态
+com_zte_ums_ict_framework_ui_sidebar_SystemMang=系统管理
+
+com_zte_ums_ict_framework_ui_sidebar_monitor=监控
+com_zte_ums_ict_framework_ui_sidebar_alarmByCell=按网元统计告警
+com_zte_ums_ict_framework_ui_sidebar_alarmByCellType=按网元类型统计告警
+com_zte_ums_ict_framework_ui_breadcrumbs_moreOper=更多操作
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=整库结构备份
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=基础数据备份
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=日志数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=告警数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_dbBack=数据库备份
+com_zte_ums_ngict_dashboard=仪表盘
+com_zte_ums_ict_framework_ui_breadcrumbs_ruleSetup=规则设置
+com_zte_ums_ict_framework_ui_sidebar_levelRedefineSetup=级别重定义设置
+com_zte_ums_ict_framework_ui_sidebar_disposeSuggestionSetup=处理建议设置
+com_zte_ums_ict_framework_ui_sidebar_AlarmBoxSetup=告警箱设置
+com_zte_ums_ict_framework_ui_sidebar_measureObjectMang=测量对象管理
+
+com_zte_ums_ict_framework_ui_sidebar_thresholdTaskMang=门限任务管理
+com_zte_ums_ict_framework_ui_sidebar_anDevMan=AN产品管理
+com_zte_ums_ict_framework_ui_sidebar_cellMang=网元管理
+com_zte_ums_ict_framework_ui_sidebar_snmpPing= SNMP Ping
+com_zte_ums_ict_framework_ui_sidebar_telnet=Telnet
+com_zte_ums_ict_framework_ui_sidebar_workOder=工单管理
+com_zte_ums_ict_framework_ui_sidebar_resMang=资源管理
+com_zte_ums_ict_framework_ui_sidebar_SecurityMang=安全管理
+com_zte_ums_ict_framework_ui_sidebar_operationSet=操作集管理
+com_zte_ums_ict_framework_ui_sidebar_userLockStatus=用户锁定情况
+com_zte_ums_ict_framework_ui_sidebar_loginUserMang=登录用户管理
+com_zte_ums_ict_framework_ui_sidebar_userBlackList=用户黑名单
+com_zte_ums_ict_framework_ui_sidebar_operationSet=操作集
+com_zte_ums_ict_framework_ui_sidebar_LogMang=日志管理
+com_zte_ums_ict_framework_ui_sidebar_backRestore=备份恢复
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=整库结构备份
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=基础数据备份
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=日志数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=告警数据备份恢复
+com_zte_ums_ict_framework_ui_loading=加载中......
+com_zte_ums_ict_framework_ui_searching=搜索中......
+com_zte_ums_ict_framework_ui_clickTooFast=您点击的太快了，请稍候重新点击下该菜单，谢谢
+com_zte_ums_ict_framework_ui_loadmenuerror=菜单加载失败
+com_zte_ums_ict_framework_ui_confirmlogout=你确认要注销吗?
+com_zte_ums_aos_framework_ui_heartbeat_fail=会话已经失效。
+com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError=页头不支持固定边栏,先固定页头才能固定边栏.
+com_zte_ums_ict_framework_ui_fixedsiderightpositionError=固定边栏不支持边栏靠右，先设置边栏为默认.
+com_zte_ums_ict_framework_ui_loadchgpwdpageError=加载修改密码页面失败
+com_zte_ums_ict_framework_ui_searchmessage=关键字{0}的搜索结果如下：
+com_zte_ums_ict_framework_ui_month=一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月
+com_zte_ums_ict_framework_ui_customdate=自定义日期
+com_zte_ums_ict_framework_ui_from=从
+com_zte_ums_ict_framework_ui_to=到
+com_zte_ums_ict_framework_ui_apply=应用
+com_zte_ums_ict_framework_ui_today=今天
+com_zte_ums_ict_framework_ui_yestoday=昨天
+com_zte_ums_ict_framework_ui_lastdays=最近{0}天
+com_zte_ums_ict_framework_ui_thismonth=本月
+com_zte_ums_ict_framework_ui_lastmonth=上个月
+com_zte_ums_ict_framework_ui_group_about=关于
+
+com_zte_ums_ict_framework_ui_group_logout=注销
+com_zte_ums_ict_framework_ui_changePwd=修改密码
+com_zte_ums_ict_framework_ui_group_fullscreen=全屏
+com_zte_ums_ict_framework_ui_group_exitfullscreen=退出全屏
+com_zte_ums_ict_framework_moudle_help = 帮助
+com_zte_ums_ict_framework_moudle_menutoggler=更多...
+
+com_zte_ums_ict_alarmcount_total_label = 总计:{0}
+com_zte_ums_ict_alarmcount_critical_label = 严重:{0}
+com_zte_ums_ict_alarmcount_critical_text = 严重告警
+com_zte_ums_ict_alarmcount_major_label = 主要:{0}
+com_zte_ums_ict_alarmcount_major_text = 主要告警
+com_zte_ums_ict_alarmcount_minor_label = 次要:{0}
+com_zte_ums_ict_alarmcount_minor_text = 次要告警
+com_zte_ums_ict_alarmcount_warning_label = 警告:{0}
+com_zte_ums_ict_alarmcount_warning_text = 警告告警
+com_zte_ums_ict_alarmcount_none_label=当前系统无告警
+com_zte_ums_ict_alarmcount_total_before_text =当前系统共有
+com_zte_ums_ict_alarmcount_total_after_text =个告警
+
+com_zte_ums_ict_framework_ui_sidebar_performMonitor=性能监视
+com_zte_ums_ict_framework_ui_sidebar_resource=资源
+com_zte_ums_ict_framework_ui_sidebar_manualAdd=手动添加
+com_zte_ums_ict_framework_ui_sidebar_gisTopo=GIS拓扑
+
+
+com_zte_ums_ict_framework_ui_sidebar_userDispatch=用户分发
+com_zte_ums_ict_framework_ui_sidebar_roleCollect=角色收集
+
+com_zte_ums_ict_sm_user_op_ok=操作成功。
+com_zte_ums_ict_sm_user_close_button=关闭
+com_zte_ums_ict_sm_user_confirm=确定
+com_zte_ums_ict_sm_user_ok=确定
+com_zte_ums_ict_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前用户密码设置
+com_zte_ums_ict_sm_user_modify_current_password=当前用户密码设置
+com_zte_ums_ict_sm_user_old_password=旧密码
+com_zte_ums_ict_sm_user_confirmpassword=确认新密码
+com_zte_ums_ict_sm_user_cancel_button=取消
+com_zte_ums_ict_sm_user_password=新密码
+com_zte_ums_ict_sm_password_confirm_not_consistent = 密码输入不一致
+com_zte_ums_ict_sm_user_inputoldpwd=请输入原密码
+com_zte_ums_ict_sm_user_inputnewpwd=请输入新密码
+com_zte_ums_ict_sm_user_inputnewpwdagain=请再次输入新密码
+com_zte_ums_ict_portal_chgpwd_oldpwdError=原始密码错误
+com_zte_ums_ict_login_inputname=请输入用户名
+com_zte_ums_ict_login_inputpwd=请输入密码
+
+com_zte_ums_ict_framework_ui_blue=中兴蓝3
+com_zte_ums_ict_framework_ui_ztebluelight=中兴蓝1
+com_zte_ums_ict_framework_ui_zteblue=中兴蓝2
+
+com_zte_ums_ict_about_ppu_field_name = 名称
+com_zte_ums_ict_about_ppu_field_version = 版本号
+com_zte_ums_ict_about_ppu_field_desc = 描述
+com_zte_ums_ict_about_ppu_field_time = 更新时间
+com_zte_ums_ict_framework_moudle_about = 关于
+com_zte_ums_ict_framework_about_detail = 详情
+com_zte_ums_ict_framework_about_version=版本号：
+com_zte_ums_ict_portal_login_companyName=2014 © ZTE - 中兴通讯股份有限公司
+
+com_zte_ums_ict_framework_main_page_dashboard=仪表盘
+com_zte_ums_ict_framework_main_page_monitor=监控
+com_zte_ums_ict_framework_main_page_alarm=告警
+com_zte_ums_ict_framework_main_page_performance=性能
+com_zte_ums_ict_framework_main_page_security=安全
+com_zte_ums_ict_framework_main_page_log=日志
+com_zte_ums_ict_framework_main_page_system=系统
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-en-US.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-en-US.properties
new file mode 100644
index 00000000..4449f97b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-en-US.properties
@@ -0,0 +1,210 @@
+#
+# 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.
+#
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_skin_select=Theme Color
+com_zte_ums_ict_framework_ui_language=Language
+com_zte_ums_ict_framework_ui_language_zhcn=中文
+com_zte_ums_ict_framework_ui_language_en=English
+com_zte_ums_ict_framework_ui_skin_layout=Layout
+com_zte_ums_ict_framework_ui_layout_fluid=Fluid
+com_zte_ums_ict_framework_ui_layout_boxed=Boxed
+com_zte_ums_ict_framework_ui_page_head=Header
+com_zte_ums_ict_framework_ui_page_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_default=Default
+com_zte_ums_ict_framework_ui_page_head_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_head_default=Default
+com_zte_ums_ict_framework_ui_page_sidebar_fixed=Fixed
+com_zte_ums_ict_framework_ui_page_sidebar_default=Default
+com_zte_ums_ict_framework_ui_side_bar=Sidebar
+com_zte_ums_ict_framework_ui_sidebar_location=Sidebar Position
+com_zte_ums_ict_framework_ui_navbar_direction=Menu Direction
+com_zte_ums_ict_framework_ui_navbar_direction_horizontal=Horizontal
+com_zte_ums_ict_framework_ui_navbar_direction_vertical=Vertical
+com_zte_ums_ict_framework_ui_navbar_direction_fmenu=Category Navigation
+com_zte_ums_ict_framework_ui_keep_top=Top
+com_zte_ums_ict_framework_ui_keep_left=Left
+com_zte_ums_ict_framework_ui_keep_right=Right
+com_zte_ums_ict_framework_ui_page_footer=Footer
+
+com_zte_ums_ict_framework_ui_basic_info=Basic Information
+com_zte_ums_ict_framework_ui_search_value=Search...
+com_zte_ums_ict_framework_ui_sidebar_mainPage=Home
+com_zte_ums_ict_framework_ui_sidebar_topo=Topology
+com_zte_ums_ict_framework_ui_sidebar_resList=Resource Table
+com_zte_ums_ict_framework_ui_sidebar_physicTopo=Physical Topology
+com_zte_ums_ict_framework_ui_sidebar_linkTopo=Relation Topology
+com_zte_ums_ict_framework_ui_sidebar_alarm=Alarm
+com_zte_ums_ict_framework_ui_sidebar_currentAlarm=Active Alarm
+com_zte_ums_ict_framework_ui_sidebar_historyAlarm=History Alarm
+com_zte_ums_ict_framework_ui_sidebar_notice=Notification
+com_zte_ums_ict_framework_ui_sidebar_alarmRule=Alarm Rule
+com_zte_ums_ict_framework_ui_sidebar_queryAlarm=Query Alarm
+com_zte_ums_ict_framework_ui_sidebar_alarmStat=Alarm Statistic
+com_zte_ums_ict_framework_ui_sidebar_alarmSetup=Alarm Setting
+com_zte_ums_ict_framework_ui_sidebar_perform=Performance
+com_zte_ums_ict_framework_ui_sidebar_historySearch=History Query
+com_zte_ums_ict_framework_ui_sidebar_realTimeSearch=Realtime Data Query
+com_zte_ums_ict_framework_ui_sidebar_counterAndIndicator=Counter and Index
+com_zte_ums_ict_framework_ui_sidebar_measureTaskMang=Measurement Task
+com_zte_ums_ict_framework_ui_sidebar_generalTemplateMang=Common Template
+com_zte_ums_ict_framework_ui_sidebar_config=Configuration
+com_zte_ums_ict_framework_ui_sidebar_itDevMang=IT Resource Management
+com_zte_ums_ict_framework_ui_sidebar_ipDevMang=IP Resource Management
+com_zte_ums_ict_framework_ui_sidebar_autoFind=Auto Discovery
+com_zte_ums_ict_framework_ui_sidebar_pollConfig=Poll Configuration
+com_zte_ums_ict_framework_ui_sidebar_security=Security
+com_zte_ums_ict_framework_ui_sidebar_smGuide=security Entry 
+com_zte_ums_ict_framework_ui_sidebar_deptMang=Department Management
+com_zte_ums_ict_framework_ui_sidebar_userMang=User Management
+com_zte_ums_ict_framework_ui_sidebar_roleMang=Role Management
+com_zte_ums_ict_framework_ui_sidebar_acccRule=Customize User Account Rule
+com_zte_ums_ict_framework_ui_sidebar_roleAndRoleset=Role & Role Set
+com_zte_ums_ict_framework_ui_sidebar_log=Log
+com_zte_ums_ict_framework_ui_sidebar_operationLog=Operation Log
+com_zte_ums_ict_framework_ui_sidebar_sysLog=System Log
+com_zte_ums_ict_framework_ui_sidebar_securityLog=Security Log
+com_zte_ums_ict_framework_ui_sidebar_sysLogMultiTab=System Log(Multi-tab Example)
+com_zte_ums_ict_framework_ui_sidebar_operationLogMultiTab=Operation Log(Multi-tab Example)
+com_zte_ums_ict_framework_ui_sidebar_system=System
+com_zte_ums_ict_framework_ui_sidebar_dataBackup=Backup Data
+com_zte_ums_ict_framework_ui_sidebar_fileBackup=Backup Files
+com_zte_ums_ict_framework_ui_sidebar_license=License
+com_zte_ums_ict_framework_ui_sidebar_sysState=System Status
+com_zte_ums_ict_framework_ui_sidebar_SystemMang=System Management
+
+com_zte_ums_ict_framework_ui_sidebar_monitor=Monitor
+com_zte_ums_ict_framework_ui_sidebar_alarmByCell=Active Alarm Statistic by NE 
+com_zte_ums_ict_framework_ui_sidebar_alarmByCellType=Active Alarm Statistic by NE Type
+com_zte_ums_ict_framework_ui_breadcrumbs_moreOper=More Operation
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=DB Struct Backup
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=Base Data Backup
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=Log Data Back&Restore
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=Alarm Data Back&Restore
+com_zte_ums_ict_framework_ui_sidebar_dbBack=Database Backup
+com_zte_ums_ict_framework_ui_breadcrumbs_ruleSetup=Rule Setup
+com_zte_ums_ngict_dashboard=Dashboard
+
+com_zte_ums_ict_framework_ui_sidebar_levelRedefineSetup=Severity Regrading Setting 
+com_zte_ums_ict_framework_ui_sidebar_disposeSuggestionSetup=Handing Suggestion Setting
+com_zte_ums_ict_framework_ui_sidebar_AlarmBoxSetup=Set Alarm Box
+com_zte_ums_ict_framework_ui_sidebar_measureObjectMang=MO Management
+com_zte_ums_ict_framework_ui_sidebar_thresholdTaskMang=Threshold Task
+com_zte_ums_ict_framework_ui_sidebar_anDevMan=AN Device Management
+com_zte_ums_ict_framework_ui_sidebar_cellMang=Cell management
+com_zte_ums_ict_framework_ui_sidebar_snmpPing= SNMP Ping
+com_zte_ums_ict_framework_ui_sidebar_telnet=Telnet
+com_zte_ums_ict_framework_ui_sidebar_workOder=Work Order
+com_zte_ums_ict_framework_ui_sidebar_resMang=Resource Management
+com_zte_ums_ict_framework_ui_sidebar_SecurityMang=Security Management
+com_zte_ums_ict_framework_ui_sidebar_userLockStatus=Show Locked Users
+com_zte_ums_ict_framework_ui_sidebar_loginUserMang=Login User Management
+com_zte_ums_ict_framework_ui_sidebar_userBlackList=User Blacklist
+com_zte_ums_ict_framework_ui_sidebar_operationSet=Operation Set Management
+com_zte_ums_ict_framework_ui_sidebar_LogMang=Log Management
+com_zte_ums_ict_framework_ui_sidebar_backRestore=Backup and Restore
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=Backup Whole DB Structure
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=Backup Basic Data
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=Log Data Backup and Restore
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=Alarm Data Backup and Restore
+com_zte_ums_ict_framework_ui_loading=loading......
+com_zte_ums_ict_framework_ui_searching=searching......
+com_zte_ums_ict_framework_ui_clickTooFast=You click on too fast, please wait for a while to click the menu, thank you!
+com_zte_ums_ict_framework_ui_loadmenuerror=loading menu failed.
+com_zte_ums_ict_framework_ui_confirmlogout=Do you confirm to logout?
+com_zte_ums_aos_framework_ui_heartbeat_fail=The session is invalidated.
+com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError=Default Header with Fixed Sidebar option is not supported. Proceed with Fixed Header with Fixed Sidebar.
+com_zte_ums_ict_framework_ui_fixedsiderightpositionError=Fixed Sidebar with right position is not supported. Set Sidebar as default.
+com_zte_ums_ict_framework_ui_loadchgpwdpageError=loading change password page failed.
+com_zte_ums_ict_framework_ui_searchmessage=The {0} keyword search results as follows:
+com_zte_ums_ict_framework_ui_month=January,February,March,April,May,June,July,August,September,October,November,December
+com_zte_ums_ict_framework_ui_customdate=Custom date
+com_zte_ums_ict_framework_ui_from=From
+com_zte_ums_ict_framework_ui_to=To
+com_zte_ums_ict_framework_ui_apply=Apply
+com_zte_ums_ict_framework_ui_today=Today
+com_zte_ums_ict_framework_ui_yestoday=Yestoday
+com_zte_ums_ict_framework_ui_lastdays=Last {0} days
+com_zte_ums_ict_framework_ui_thismonth=This month
+com_zte_ums_ict_framework_ui_lastmonth=Last month
+
+com_zte_ums_ict_framework_ui_group_about=About
+com_zte_ums_ict_framework_ui_group_logout=Logout
+com_zte_ums_ict_framework_ui_changePwd=Change Password
+com_zte_ums_ict_framework_ui_group_fullscreen=Full Screen
+com_zte_ums_ict_framework_ui_group_exitfullscreen=Exit Full Screen
+com_zte_ums_ict_framework_moudle_help = Help
+com_zte_ums_ict_framework_moudle_menutoggler=More
+
+
+com_zte_ums_ict_alarmcount_total_label = Total:{0}
+com_zte_ums_ict_alarmcount_critical_label = Critical:{0}
+com_zte_ums_ict_alarmcount_critical_text = Critical Alarm
+com_zte_ums_ict_alarmcount_major_label = Major:{0}
+com_zte_ums_ict_alarmcount_major_text = Major Alarm
+com_zte_ums_ict_alarmcount_minor_label = Minor:{0}
+com_zte_ums_ict_alarmcount_minor_text = Minor Alarm
+com_zte_ums_ict_alarmcount_warning_label = Warning:{0}
+com_zte_ums_ict_alarmcount_warning_text = Warning Alarm
+com_zte_ums_ict_alarmcount_none_label=No alarm Now!
+com_zte_ums_ict_alarmcount_total_after_text = ,Now!"
+com_zte_ums_ict_alarmcount_total_before_text =Total Alarm Number:
+
+com_zte_ums_ict_framework_ui_sidebar_performMonitor=Perform Monitor
+com_zte_ums_ict_framework_ui_sidebar_resource=Resource
+com_zte_ums_ict_framework_ui_sidebar_manualAdd=Manual Add
+com_zte_ums_ict_framework_ui_sidebar_gisTopo=GIS Topo
+
+
+com_zte_ums_ict_framework_ui_sidebar_userDispatch=User Dispatch
+com_zte_ums_ict_framework_ui_sidebar_roleCollect=Role Collection
+
+com_zte_ums_ict_sm_user_op_ok=Operation succeeded.
+com_zte_ums_ict_sm_user_close_button=Close
+com_zte_ums_ict_sm_user_confirm=OK
+com_zte_ums_ict_sm_user_ok=OK
+com_zte_ums_ict_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User Password Set
+com_zte_ums_ict_sm_user_modify_current_password=User Password Set
+com_zte_ums_ict_sm_user_old_password=Old Password
+com_zte_ums_ict_sm_user_confirmpassword=Confirm New Password
+com_zte_ums_ict_sm_user_cancel_button=Cancel
+com_zte_ums_ict_sm_user_password=New Password
+com_zte_ums_ict_sm_password_confirm_not_consistent = The New Password and the Confirm New Password are inconsistent.
+com_zte_ums_ict_sm_user_inputoldpwd=Please input old password
+com_zte_ums_ict_sm_user_inputnewpwd=Please input new password
+com_zte_ums_ict_sm_user_inputnewpwdagain=Please input new password again
+com_zte_ums_ict_portal_chgpwd_oldpwdError=Old password error
+com_zte_ums_ict_login_inputname=Please input user name
+com_zte_ums_ict_login_inputpwd=Please input user password
+
+com_zte_ums_eco_service=Service
+
+com_zte_ums_ict_framework_ui_ztebluelight=ZTE Blue Light
+com_zte_ums_ict_framework_ui_zteblue=ZTE Blue
+com_zte_ums_ict_framework_ui_blue=Blue
+
+com_zte_ums_ict_about_ppu_field_name =Name
+com_zte_ums_ict_about_ppu_field_version = Version
+com_zte_ums_ict_about_ppu_field_desc = Description
+com_zte_ums_ict_about_ppu_field_time = Update Time
+com_zte_ums_ict_framework_moudle_about = About
+com_zte_ums_ict_framework_about_detail = Info
+com_zte_ums_ict_framework_about_version=Version:
+com_zte_ums_ict_portal_login_companyName=2015 @; ZTE - Corporation
+
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_page_title=NFV Mano System
+com_zte_ums_ict_framework_ui_page_title_1=NFV Mano System
+com_zte_ums_ict_framework_ui_page_title_2=NFV Mano System
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-zh-CN.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-zh-CN.properties
new file mode 100644
index 00000000..7d86d365
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-framework-integration-i18n-zh-CN.properties
@@ -0,0 +1,210 @@
+#
+# 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.
+#
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_skin_select=皮肤选择
+com_zte_ums_ict_framework_ui_language=语言
+com_zte_ums_ict_framework_ui_language_zhcn=中文
+com_zte_ums_ict_framework_ui_language_en=English
+com_zte_ums_ict_framework_ui_skin_layout=布局
+com_zte_ums_ict_framework_ui_layout_fluid=流动布局
+com_zte_ums_ict_framework_ui_layout_boxed=盒子布局
+com_zte_ums_ict_framework_ui_page_head=页头
+com_zte_ums_ict_framework_ui_page_fixed=固定
+com_zte_ums_ict_framework_ui_page_default=默认
+com_zte_ums_ict_framework_ui_page_head_fixed=固定
+com_zte_ums_ict_framework_ui_page_head_default=默认
+com_zte_ums_ict_framework_ui_page_sidebar_fixed=固定
+com_zte_ums_ict_framework_ui_page_sidebar_default=默认
+com_zte_ums_ict_framework_ui_side_bar=边栏
+com_zte_ums_ict_framework_ui_sidebar_location=边栏位置
+com_zte_ums_ict_framework_ui_navbar_direction=菜单方向
+com_zte_ums_ict_framework_ui_navbar_direction_horizontal=横向
+com_zte_ums_ict_framework_ui_navbar_direction_vertical=纵向
+com_zte_ums_ict_framework_ui_navbar_direction_fmenu=分类导航
+com_zte_ums_ict_framework_ui_keep_top=靠上
+com_zte_ums_ict_framework_ui_keep_left=靠左
+com_zte_ums_ict_framework_ui_keep_right=靠右
+com_zte_ums_ict_framework_ui_page_footer=页脚
+
+com_zte_ums_ict_framework_ui_basic_info=基本信息
+com_zte_ums_ict_framework_ui_search_value=搜索...
+com_zte_ums_ict_framework_ui_sidebar_mainPage=主页
+com_zte_ums_ict_framework_ui_sidebar_topo=拓扑
+com_zte_ums_ict_framework_ui_sidebar_resList=资源列表
+com_zte_ums_ict_framework_ui_sidebar_physicTopo=物理拓扑
+com_zte_ums_ict_framework_ui_sidebar_linkTopo=链路拓扑
+com_zte_ums_ict_framework_ui_sidebar_alarm=告警
+com_zte_ums_ict_framework_ui_sidebar_alarm_summary=告警概览
+com_zte_ums_ict_framework_ui_sidebar_currentAlarm=当前告警
+com_zte_ums_ict_framework_ui_sidebar_historyAlarm=历史告警
+com_zte_ums_ict_framework_ui_sidebar_notice=通知
+com_zte_ums_ict_framework_ui_sidebar_alarmRule=告警规则
+com_zte_ums_ict_framework_ui_sidebar_queryAlarm=告警查询
+com_zte_ums_ict_framework_ui_sidebar_alarmStat=告警统计
+com_zte_ums_ict_framework_ui_sidebar_alarmSetup=告警设置
+com_zte_ums_ict_framework_ui_sidebar_perform=性能
+com_zte_ums_ict_framework_ui_sidebar_historySearch=历史查询
+com_zte_ums_ict_framework_ui_sidebar_realTimeSearch=实时查询
+com_zte_ums_ict_framework_ui_sidebar_counterAndIndicator=计数器与指标
+com_zte_ums_ict_framework_ui_sidebar_measureTaskMang=测量任务管理
+com_zte_ums_ict_framework_ui_sidebar_generalTemplateMang=通用模板管理
+com_zte_ums_ict_framework_ui_sidebar_config=配置
+com_zte_ums_ict_framework_ui_sidebar_itDevMang=IT设备管理
+com_zte_ums_ict_framework_ui_sidebar_ipDevMang=IP设备管理
+com_zte_ums_ict_framework_ui_sidebar_autoFind=自动发现
+com_zte_ums_ict_framework_ui_sidebar_pollConfig=轮询设置
+com_zte_ums_ict_framework_ui_sidebar_security=安全
+com_zte_ums_ict_framework_ui_sidebar_smGuide=安全入门
+com_zte_ums_ict_framework_ui_sidebar_deptMang=部门管理
+com_zte_ums_ict_framework_ui_sidebar_userMang=用户管理
+com_zte_ums_ict_framework_ui_sidebar_acccRule=帐户规则
+com_zte_ums_ict_framework_ui_sidebar_roleMang=角色管理
+com_zte_ums_ict_framework_ui_sidebar_roleAndRoleset=角色和角色集
+com_zte_ums_ict_framework_ui_sidebar_log=日志
+com_zte_ums_ict_framework_ui_sidebar_operationLog=操作日志
+com_zte_ums_ict_framework_ui_sidebar_sysLog=系统日志
+com_zte_ums_ict_framework_ui_sidebar_securityLog=安全日志
+com_zte_ums_ict_framework_ui_sidebar_sysLogMultiTab=系统日志(多TAB示例)
+com_zte_ums_ict_framework_ui_sidebar_operationLogMultiTab=操作日志(多TAB示例)
+com_zte_ums_ict_framework_ui_sidebar_system=系统
+com_zte_ums_ict_framework_ui_sidebar_dataBackup=数据备份
+com_zte_ums_ict_framework_ui_sidebar_fileBackup=文件备份
+com_zte_ums_ict_framework_ui_sidebar_license=许可证
+com_zte_ums_ict_framework_ui_sidebar_sysState=系统状态
+com_zte_ums_ict_framework_ui_sidebar_SystemMang=系统管理
+
+com_zte_ums_ict_framework_ui_sidebar_monitor=监控
+com_zte_ums_ict_framework_ui_sidebar_alarmByCell=按网元统计告警
+com_zte_ums_ict_framework_ui_sidebar_alarmByCellType=按网元类型统计告警
+com_zte_ums_ict_framework_ui_breadcrumbs_moreOper=更多操作
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=整库结构备份
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=基础数据备份
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=日志数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=告警数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_dbBack=数据库备份
+com_zte_ums_ngict_dashboard=仪表盘
+com_zte_ums_ict_framework_ui_breadcrumbs_ruleSetup=规则设置
+com_zte_ums_ict_framework_ui_sidebar_levelRedefineSetup=级别重定义设置
+com_zte_ums_ict_framework_ui_sidebar_disposeSuggestionSetup=处理建议设置
+com_zte_ums_ict_framework_ui_sidebar_AlarmBoxSetup=告警箱设置
+com_zte_ums_ict_framework_ui_sidebar_measureObjectMang=测量对象管理
+
+com_zte_ums_ict_framework_ui_sidebar_thresholdTaskMang=门限任务管理
+com_zte_ums_ict_framework_ui_sidebar_anDevMan=AN产品管理
+com_zte_ums_ict_framework_ui_sidebar_cellMang=网元管理
+com_zte_ums_ict_framework_ui_sidebar_snmpPing= SNMP Ping
+com_zte_ums_ict_framework_ui_sidebar_telnet=Telnet
+com_zte_ums_ict_framework_ui_sidebar_workOder=工单管理
+com_zte_ums_ict_framework_ui_sidebar_resMang=资源管理
+com_zte_ums_ict_framework_ui_sidebar_SecurityMang=安全管理
+com_zte_ums_ict_framework_ui_sidebar_operationSet=操作集管理
+com_zte_ums_ict_framework_ui_sidebar_userLockStatus=用户锁定情况
+com_zte_ums_ict_framework_ui_sidebar_loginUserMang=登录用户管理
+com_zte_ums_ict_framework_ui_sidebar_userBlackList=用户黑名单
+com_zte_ums_ict_framework_ui_sidebar_operationSet=操作集
+com_zte_ums_ict_framework_ui_sidebar_LogMang=日志管理
+com_zte_ums_ict_framework_ui_sidebar_backRestore=备份恢复
+com_zte_ums_ict_framework_ui_sidebar_dbStructBack=整库结构备份
+com_zte_ums_ict_framework_ui_sidebar_baseDataBack=基础数据备份
+com_zte_ums_ict_framework_ui_sidebar_logDataBackRestore=日志数据备份恢复
+com_zte_ums_ict_framework_ui_sidebar_alarmDataBackRestore=告警数据备份恢复
+com_zte_ums_ict_framework_ui_loading=加载中......
+com_zte_ums_ict_framework_ui_searching=搜索中......
+com_zte_ums_ict_framework_ui_clickTooFast=您点击的太快了，请稍候重新点击下该菜单，谢谢
+com_zte_ums_ict_framework_ui_loadmenuerror=菜单加载失败
+com_zte_ums_ict_framework_ui_confirmlogout=你确认要注销吗?
+com_zte_ums_aos_framework_ui_heartbeat_fail=会话已经失效。
+com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError=页头不支持固定边栏,先固定页头才能固定边栏.
+com_zte_ums_ict_framework_ui_fixedsiderightpositionError=固定边栏不支持边栏靠右，先设置边栏为默认.
+com_zte_ums_ict_framework_ui_loadchgpwdpageError=加载修改密码页面失败
+com_zte_ums_ict_framework_ui_searchmessage=关键字{0}的搜索结果如下：
+com_zte_ums_ict_framework_ui_month=一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月
+com_zte_ums_ict_framework_ui_customdate=自定义日期
+com_zte_ums_ict_framework_ui_from=从
+com_zte_ums_ict_framework_ui_to=到
+com_zte_ums_ict_framework_ui_apply=应用
+com_zte_ums_ict_framework_ui_today=今天
+com_zte_ums_ict_framework_ui_yestoday=昨天
+com_zte_ums_ict_framework_ui_lastdays=最近{0}天
+com_zte_ums_ict_framework_ui_thismonth=本月
+com_zte_ums_ict_framework_ui_lastmonth=上个月
+com_zte_ums_ict_framework_ui_group_about=关于
+
+com_zte_ums_ict_framework_ui_group_logout=注销
+com_zte_ums_ict_framework_ui_changePwd=修改密码
+com_zte_ums_ict_framework_ui_group_fullscreen=全屏
+com_zte_ums_ict_framework_ui_group_exitfullscreen=退出全屏
+com_zte_ums_ict_framework_moudle_help = 帮助
+com_zte_ums_ict_framework_moudle_menutoggler=更多...
+
+com_zte_ums_ict_alarmcount_total_label = 总计:{0}
+com_zte_ums_ict_alarmcount_critical_label = 严重:{0}
+com_zte_ums_ict_alarmcount_critical_text = 严重告警
+com_zte_ums_ict_alarmcount_major_label = 主要:{0}
+com_zte_ums_ict_alarmcount_major_text = 主要告警
+com_zte_ums_ict_alarmcount_minor_label = 次要:{0}
+com_zte_ums_ict_alarmcount_minor_text = 次要告警
+com_zte_ums_ict_alarmcount_warning_label = 警告:{0}
+com_zte_ums_ict_alarmcount_warning_text = 警告告警
+com_zte_ums_ict_alarmcount_none_label=当前系统无告警
+com_zte_ums_ict_alarmcount_total_before_text =当前系统共有
+com_zte_ums_ict_alarmcount_total_after_text =个告警
+
+com_zte_ums_ict_framework_ui_sidebar_performMonitor=性能监视
+com_zte_ums_ict_framework_ui_sidebar_resource=资源
+com_zte_ums_ict_framework_ui_sidebar_manualAdd=手动添加
+com_zte_ums_ict_framework_ui_sidebar_gisTopo=GIS拓扑
+
+
+com_zte_ums_ict_framework_ui_sidebar_userDispatch=用户分发
+com_zte_ums_ict_framework_ui_sidebar_roleCollect=角色收集
+
+com_zte_ums_ict_sm_user_op_ok=操作成功。
+com_zte_ums_ict_sm_user_close_button=关闭
+com_zte_ums_ict_sm_user_confirm=确定
+com_zte_ums_ict_sm_user_ok=确定
+com_zte_ums_ict_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前用户密码设置
+com_zte_ums_ict_sm_user_modify_current_password=当前用户密码设置
+com_zte_ums_ict_sm_user_old_password=旧密码
+com_zte_ums_ict_sm_user_confirmpassword=确认新密码
+com_zte_ums_ict_sm_user_cancel_button=取消
+com_zte_ums_ict_sm_user_password=新密码
+com_zte_ums_ict_sm_password_confirm_not_consistent = 密码输入不一致
+com_zte_ums_ict_sm_user_inputoldpwd=请输入原密码
+com_zte_ums_ict_sm_user_inputnewpwd=请输入新密码
+com_zte_ums_ict_sm_user_inputnewpwdagain=请再次输入新密码
+com_zte_ums_ict_portal_chgpwd_oldpwdError=原始密码错误
+com_zte_ums_ict_login_inputname=请输入用户名
+com_zte_ums_ict_login_inputpwd=请输入密码
+
+com_zte_ums_eco_service=业务
+
+com_zte_ums_ict_framework_ui_blue=中兴蓝3
+com_zte_ums_ict_framework_ui_ztebluelight=中兴蓝1
+com_zte_ums_ict_framework_ui_zteblue=中兴蓝2
+
+com_zte_ums_ict_about_ppu_field_name = 名称
+com_zte_ums_ict_about_ppu_field_version = 版本号
+com_zte_ums_ict_about_ppu_field_desc = 描述
+com_zte_ums_ict_about_ppu_field_time = 更新时间
+com_zte_ums_ict_framework_moudle_about = 关于
+com_zte_ums_ict_framework_about_detail = 详情
+com_zte_ums_ict_framework_about_version=版本号：
+com_zte_ums_ict_portal_login_companyName=2015 © ZTE - 中兴通讯股份有限公司
+
+com_zte_ums_ict_framework_ui_main_title=
+com_zte_ums_ict_framework_ui_page_title=虚拟化管理编排系统
+com_zte_ums_ict_framework_ui_page_title_2=虚拟化管理编排系统
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-en-US.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-en-US.properties
new file mode 100644
index 00000000..00a32fbe
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-en-US.properties
@@ -0,0 +1,49 @@
+#
+# 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.
+#
+
+com_zte_ums_ict_portal_login_welcome=Welcome
+com_zte_ums_ict_portal_login_userPassword=User Name or Password Error
+inputUserName=Please Input User Name
+inputPassword=Please Input Password
+com_zte_ums_ict_portal_login_rememberMe=Remember Me
+com_zte_ums_ict_portal_login_companyName=2014 @; ZTE - Corporation
+com_zte_ums_ict_login_inputname=Please Input User Name
+com_zte_ums_ict_login_inputpwd=Please Input Password
+com_zte_ums_aos_portal_login_username=Username:
+com_zte_ums_aos_portal_login_password=Password:
+com_zte_ums_aos_portal_login_validateCode=Validate Code:&nbsp; 
+com_zte_ums_aos_portal_login_login=Login
+com_zte_ums_aos_portal_login_reset=Reset
+com_zte_ums_aos_portal_login_notice=To make your experience more smoothly and better, please download the lastest browser(Windows 32bit):
+com_zte_ums_aos_portal_login_group_localdownload=Local download
+com_zte_ums_aos_portal_login_group_officialdownload=Official download
+com_zte_ums_aos_portal_ui_changePwd=Change Password
+com_zte_ums_aos_sm_user_op_ok=Operation succeeded.
+com_zte_ums_aos_sm_user_close_button=Close
+com_zte_ums_aos_sm_user_confirm=Confirm
+com_zte_ums_aos_login_warning_title = Warning
+com_zte_ums_aos_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User Password Set
+com_zte_ums_aos_sm_user_modify_current_password=User Password Set
+com_zte_ums_aos_sm_user_old_password=Old Password
+com_zte_ums_aos_sm_user_confirmpassword=Confirm Password
+com_zte_ums_aos_sm_user_cancel_button=Cancel
+com_zte_ums_aos_sm_user_password=New Password
+com_zte_ums_aos_sm_password_confirm_not_consistent = password and confirm password is not the same.
+com_zte_ums_aos_portal_login_group_download = Download
+com_zte_ums_aos_portal_login_notice_about_chromeFrame=Please download and install the following browser.Otherwise, some functions may become exceptional.
+com_zte_ums_aos_portal_login_recommend_notice=Recommend the use of IE8, IE9, IE10, Chrome27, Firefox20.1 browser, recommend the display resolution: 1280 * 800.
+com_zte_ums_ict_portal_login_serv_error=Login Error
+com_zte_ums_ict_portal_login_title=NFV Mano System
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-zh-CN.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-zh-CN.properties
new file mode 100644
index 00000000..18164a5e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-i18n-zh-CN.properties
@@ -0,0 +1,49 @@
+#
+# 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.
+#
+
+com_zte_ums_ict_portal_login_welcome=欢迎登录
+com_zte_ums_ict_portal_login_userPassword=用户名和密码错误
+inputUserName=请输入用户名
+inputPassword=请输入密码
+com_zte_ums_ict_portal_login_rememberMe=记住我
+com_zte_ums_ict_portal_login_companyName=2014 © ZTE - 中兴通讯股份有限公司
+com_zte_ums_ict_login_inputname=请输入用户名
+com_zte_ums_ict_login_inputpwd=请输入密码
+com_zte_ums_aos_portal_login_username=用户名：
+com_zte_ums_aos_portal_login_password=密　码：
+com_zte_ums_aos_portal_login_validateCode=验证码：
+com_zte_ums_aos_portal_login_login=登录
+com_zte_ums_aos_portal_login_reset=重置
+com_zte_ums_aos_portal_login_notice=为了有更好更流畅的操作体验，请更新到最新的浏览器，请下载(Windows 32位)：
+com_zte_ums_aos_portal_login_group_localdownload=本地下载
+com_zte_ums_aos_portal_login_group_officialdownload=官方下载
+com_zte_ums_aos_portal_ui_changePwd=修改密码
+com_zte_ums_aos_sm_user_op_ok=操作成功。
+com_zte_ums_aos_sm_user_close_button=关闭
+com_zte_ums_aos_sm_user_confirm=确定
+com_zte_ums_aos_login_warning_title = 警告
+com_zte_ums_aos_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前用户密码设置
+com_zte_ums_aos_sm_user_modify_current_password=当前用户密码设置
+com_zte_ums_aos_sm_user_old_password=旧密码
+com_zte_ums_aos_sm_user_confirmpassword=确认密码
+com_zte_ums_aos_sm_user_cancel_button=取消
+com_zte_ums_aos_sm_user_password=新密码
+com_zte_ums_aos_sm_password_confirm_not_consistent = 密码输入不一致。
+com_zte_ums_aos_portal_login_group_download = 下载
+com_zte_ums_aos_portal_login_notice_about_chromeFrame=为了不影响系统的功能正常使用，请连网安装并使用下面的浏览器：
+com_zte_ums_aos_portal_login_recommend_notice=推荐使用IE8及以上、Chrome27及以上、Firefox20.1及以上版本浏览器，推荐显示分辨率：1280×800。
+com_zte_ums_ict_portal_login_serv_error=登录异常
+com_zte_ums_ict_portal_login_title=虚拟化管理编排系统
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-en-US.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-en-US.properties
new file mode 100644
index 00000000..8ecfed9f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-en-US.properties
@@ -0,0 +1,50 @@
+#
+# 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.
+#
+
+
+com_zte_ums_ict_portal_login_title=ICT Management System
+com_zte_ums_ict_portal_login_welcome=Welcome
+com_zte_ums_ict_portal_login_userPassword=User Name or Password Error
+inputUserName=Please Input User Name
+inputPassword=Please Input Password
+com_zte_ums_ict_portal_login_rememberMe=Remember Me
+com_zte_ums_ict_portal_login_companyName=2014 @; ZTE - Corporation
+com_zte_ums_ict_login_inputname=Please Input User Name
+com_zte_ums_ict_login_inputpwd=Please Input Password
+com_zte_ums_aos_portal_login_username=Username:
+com_zte_ums_aos_portal_login_password=Password:
+com_zte_ums_aos_portal_login_validateCode=Validate Code:&nbsp; 
+com_zte_ums_aos_portal_login_login=Login
+com_zte_ums_aos_portal_login_reset=Reset
+com_zte_ums_aos_portal_login_notice=To make your experience more smoothly and better, please download the lastest browser(Windows 32bit):
+com_zte_ums_aos_portal_login_group_localdownload=Local download
+com_zte_ums_aos_portal_login_group_officialdownload=Official download
+com_zte_ums_aos_portal_ui_changePwd=Change Password
+com_zte_ums_aos_sm_user_op_ok=Operation succeeded.
+com_zte_ums_aos_sm_user_close_button=Close
+com_zte_ums_aos_sm_user_confirm=Confirm
+com_zte_ums_aos_login_warning_title = Warning
+com_zte_ums_aos_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;User Password Set
+com_zte_ums_aos_sm_user_modify_current_password=User Password Set
+com_zte_ums_aos_sm_user_old_password=Old Password
+com_zte_ums_aos_sm_user_confirmpassword=Confirm Password
+com_zte_ums_aos_sm_user_cancel_button=Cancel
+com_zte_ums_aos_sm_user_password=New Password
+com_zte_ums_aos_sm_password_confirm_not_consistent = password and confirm password is not the same.
+com_zte_ums_aos_portal_login_group_download = Download
+com_zte_ums_aos_portal_login_notice_about_chromeFrame=Please download and install the following browser.Otherwise, some functions may become exceptional.
+com_zte_ums_aos_portal_login_recommend_notice=Recommend the use of IE8, IE9, IE10, Chrome27, Firefox20.1 browser, recommend the display resolution: 1280 * 800.
+com_zte_ums_ict_portal_login_serv_error=Login Error
diff --git a/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-zh-CN.properties b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-zh-CN.properties
new file mode 100644
index 00000000..c1d96f2d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/i18n/web-portal-login-integration-i18n-zh-CN.properties
@@ -0,0 +1,50 @@
+#
+# 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.
+#
+
+
+com_zte_ums_ict_portal_login_title=ICT管理系统
+com_zte_ums_ict_portal_login_welcome=欢迎登录
+com_zte_ums_ict_portal_login_userPassword=用户名和密码错误
+inputUserName=请输入用户名
+inputPassword=请输入密码
+com_zte_ums_ict_portal_login_rememberMe=记住我
+com_zte_ums_ict_portal_login_companyName=2014 © ZTE - 中兴通讯股份有限公司
+com_zte_ums_ict_login_inputname=请输入用户名
+com_zte_ums_ict_login_inputpwd=请输入密码
+com_zte_ums_aos_portal_login_username=用户名：
+com_zte_ums_aos_portal_login_password=密　码：
+com_zte_ums_aos_portal_login_validateCode=验证码：
+com_zte_ums_aos_portal_login_login=登录
+com_zte_ums_aos_portal_login_reset=重置
+com_zte_ums_aos_portal_login_notice=为了有更好更流畅的操作体验，请更新到最新的浏览器，请下载(Windows 32位)：
+com_zte_ums_aos_portal_login_group_localdownload=本地下载
+com_zte_ums_aos_portal_login_group_officialdownload=官方下载
+com_zte_ums_aos_portal_ui_changePwd=修改密码
+com_zte_ums_aos_sm_user_op_ok=操作成功。
+com_zte_ums_aos_sm_user_close_button=关闭
+com_zte_ums_aos_sm_user_confirm=确定
+com_zte_ums_aos_login_warning_title = 警告
+com_zte_ums_aos_sm_user_modify_current_password_label=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前用户密码设置
+com_zte_ums_aos_sm_user_modify_current_password=当前用户密码设置
+com_zte_ums_aos_sm_user_old_password=旧密码
+com_zte_ums_aos_sm_user_confirmpassword=确认密码
+com_zte_ums_aos_sm_user_cancel_button=取消
+com_zte_ums_aos_sm_user_password=新密码
+com_zte_ums_aos_sm_password_confirm_not_consistent = 密码输入不一致。
+com_zte_ums_aos_portal_login_group_download = 下载
+com_zte_ums_aos_portal_login_notice_about_chromeFrame=为了不影响系统的功能正常使用，请连网安装并使用下面的浏览器：
+com_zte_ums_aos_portal_login_recommend_notice=推荐使用IE8及以上、Chrome27及以上、Firefox20.1及以上版本浏览器，推荐显示分辨率：1280×800。
+com_zte_ums_ict_portal_login_serv_error=登录异常
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-dark.png b/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-dark.png
new file mode 100644
index 00000000..e6e984ed
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-dark.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-light.png b/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-light.png
new file mode 100644
index 00000000..601beacc
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/about/about-bg-light.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/about/about-netnumen.png b/openo-portal/portal-common/src/main/webapp/common/image/about/about-netnumen.png
new file mode 100644
index 00000000..2bc029bd
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/about/about-netnumen.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/accordion-plusminus.png b/openo-portal/portal-common/src/main/webapp/common/image/accordion-plusminus.png
new file mode 100644
index 00000000..1fef1782
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/accordion-plusminus.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/ajax-loading.gif b/openo-portal/portal-common/src/main/webapp/common/image/ajax-loading.gif
new file mode 100644
index 00000000..115f8984
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/ajax-loading.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/ajax-modal-loading.gif b/openo-portal/portal-common/src/main/webapp/common/image/ajax-modal-loading.gif
new file mode 100644
index 00000000..696ea341
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/ajax-modal-loading.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/arrow-down.png b/openo-portal/portal-common/src/main/webapp/common/image/arrow-down.png
new file mode 100644
index 00000000..c503da9b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/arrow-down.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/avatar.png b/openo-portal/portal-common/src/main/webapp/common/image/avatar.png
new file mode 100644
index 00000000..2a14b35d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/avatar.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/bg-opacity.png b/openo-portal/portal-common/src/main/webapp/common/image/bg-opacity.png
new file mode 100644
index 00000000..1be54cb0
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/bg-opacity.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/bg-white-lock.png b/openo-portal/portal-common/src/main/webapp/common/image/bg-white-lock.png
new file mode 100644
index 00000000..159e1754
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/bg-white-lock.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/bg-white.png b/openo-portal/portal-common/src/main/webapp/common/image/bg-white.png
new file mode 100644
index 00000000..159e1754
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/bg-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked-disabled.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked-disabled.png
new file mode 100644
index 00000000..0ba905f0
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked-disabled.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked.png
new file mode 100644
index 00000000..2ddfb0a0
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-checked.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-disabled.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-disabled.png
new file mode 100644
index 00000000..a53c89c2
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-disabled.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-hover.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-hover.png
new file mode 100644
index 00000000..c2821132
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-hover.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-init.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-init.png
new file mode 100644
index 00000000..e352cc51
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/checkbox-init.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked-disabled.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked-disabled.png
new file mode 100644
index 00000000..16eecc57
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked-disabled.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked.png
new file mode 100644
index 00000000..6c60d128
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-checked.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-disabled.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-disabled.png
new file mode 100644
index 00000000..c27289db
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-disabled.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-hover.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-hover.png
new file mode 100644
index 00000000..03138ca6
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-hover.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-init.png b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-init.png
new file mode 100644
index 00000000..b428c58f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/checkbox-radio/radio-init.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/chrome_icon.png b/openo-portal/portal-common/src/main/webapp/common/image/chrome_icon.png
new file mode 100644
index 00000000..f71bf971
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/chrome_icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/datatable-row-openclose.png b/openo-portal/portal-common/src/main/webapp/common/image/datatable-row-openclose.png
new file mode 100644
index 00000000..8ec9e976
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/datatable-row-openclose.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/empty.png b/openo-portal/portal-common/src/main/webapp/common/image/empty.png
new file mode 100644
index 00000000..a1d202bc
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/empty.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/firefox_icon.png b/openo-portal/portal-common/src/main/webapp/common/image/firefox_icon.png
new file mode 100644
index 00000000..81470065
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/firefox_icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close-white.png b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close-white.png
new file mode 100644
index 00000000..d5bebfc9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close.png b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close.png
new file mode 100644
index 00000000..6dae950c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search-close.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.jpg b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.jpg
new file mode 100644
index 00000000..63b31802
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.png b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.png
new file mode 100644
index 00000000..2a72156c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/hor-menu-search.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/icon-color-close.png b/openo-portal/portal-common/src/main/webapp/common/image/icon-color-close.png
new file mode 100644
index 00000000..9b7dfacc
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/icon-color-close.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/icon-color.png b/openo-portal/portal-common/src/main/webapp/common/image/icon-color.png
new file mode 100644
index 00000000..b9666ee9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/icon-color.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/icon-img-down.png b/openo-portal/portal-common/src/main/webapp/common/image/icon-img-down.png
new file mode 100644
index 00000000..1b85914d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/icon-img-down.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/icon-img-up.png b/openo-portal/portal-common/src/main/webapp/common/image/icon-img-up.png
new file mode 100644
index 00000000..d90af400
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/icon-img-up.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/input-spinner.gif b/openo-portal/portal-common/src/main/webapp/common/image/input-spinner.gif
new file mode 100644
index 00000000..5b33f7e5
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/input-spinner.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/logo.png b/openo-portal/portal-common/src/main/webapp/common/image/integration/logo.png
new file mode 100644
index 00000000..a36c5e8b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/logo.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/logo_white.png b/openo-portal/portal-common/src/main/webapp/common/image/integration/logo_white.png
new file mode 100644
index 00000000..2a48ef41
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/logo_white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/netnumenLogo.png b/openo-portal/portal-common/src/main/webapp/common/image/integration/netnumenLogo.png
new file mode 100644
index 00000000..d899116f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/netnumenLogo.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_1.jpg b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_1.jpg
new file mode 100644
index 00000000..4a7b0722
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_1.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_2.jpg b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_2.jpg
new file mode 100644
index 00000000..db94b166
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_2.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_3.jpg b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_3.jpg
new file mode 100644
index 00000000..f2949dfe
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_bg_3.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_16.gif b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_16.gif
new file mode 100644
index 00000000..362b825a
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_16.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_white.png b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_white.png
new file mode 100644
index 00000000..a36c5e8b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/zte_logo_white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/integration/ztelogo.png b/openo-portal/portal-common/src/main/webapp/common/image/integration/ztelogo.png
new file mode 100644
index 00000000..ebe122a2
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/integration/ztelogo.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/loading-spinner-grey.gif b/openo-portal/portal-common/src/main/webapp/common/image/loading-spinner-grey.gif
new file mode 100644
index 00000000..6d614d3d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/loading-spinner-grey.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/loading.gif b/openo-portal/portal-common/src/main/webapp/common/image/loading.gif
new file mode 100644
index 00000000..29bbff00
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/loading.gif
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/1.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/1.png
new file mode 100644
index 00000000..59ba9a63
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/1.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/2.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/2.png
new file mode 100644
index 00000000..e0410c33
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/2.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/3.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/3.png
new file mode 100644
index 00000000..318efa6b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/3.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/4.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/4.png
new file mode 100644
index 00000000..b8de07ab
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/4.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/5.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/5.png
new file mode 100644
index 00000000..ae36671e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/5.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/6.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/6.png
new file mode 100644
index 00000000..de1e1b05
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/icon/6.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/logo.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/logo.png
new file mode 100644
index 00000000..f0acf46d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/logo.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/1.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/1.png
new file mode 100644
index 00000000..632549ad
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/1.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/2.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/2.png
new file mode 100644
index 00000000..a634594a
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/2.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/3.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/3.png
new file mode 100644
index 00000000..83d03656
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/3.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/4.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/4.png
new file mode 100644
index 00000000..552cb1f2
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/4.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/5.png b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/5.png
new file mode 100644
index 00000000..277e52db
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/mainpage/pic/5.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/menu-toggler.png b/openo-portal/portal-common/src/main/webapp/common/image/menu-toggler.png
new file mode 100644
index 00000000..3d5c2d41
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/menu-toggler.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/overlay-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/overlay-icon.png
new file mode 100644
index 00000000..ecdb629a
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/overlay-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon-white.png
new file mode 100644
index 00000000..a415159f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon.png
new file mode 100644
index 00000000..5f4901f1
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-collapse-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon-white.png
new file mode 100644
index 00000000..2f3a2721
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon.png
new file mode 100644
index 00000000..f0451215
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-config-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon-white.png
new file mode 100644
index 00000000..f2ecf78a
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon.png
new file mode 100644
index 00000000..54b891b5
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-expand-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon-white.png
new file mode 100644
index 00000000..a14730b8
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon.png
new file mode 100644
index 00000000..bdb0f08e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-reload-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon-white.png
new file mode 100644
index 00000000..ddc6d2c1
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon.png
new file mode 100644
index 00000000..e2a02c62
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/portlet-remove-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/remove-icon-small.png b/openo-portal/portal-common/src/main/webapp/common/image/remove-icon-small.png
new file mode 100644
index 00000000..382bb241
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/remove-icon-small.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/reset_password.png b/openo-portal/portal-common/src/main/webapp/common/image/reset_password.png
new file mode 100644
index 00000000..8b512e0b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/reset_password.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon-blue.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-blue.png
new file mode 100644
index 00000000..345c3db0
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-blue.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon-brown.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-brown.png
new file mode 100644
index 00000000..2038c6a5
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-brown.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon-purple.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-purple.png
new file mode 100644
index 00000000..af6a91cf
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-purple.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon-red.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-red.png
new file mode 100644
index 00000000..84aefe3f
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-red.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon-white.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-white.png
new file mode 100644
index 00000000..c7532f45
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/search-icon.png b/openo-portal/portal-common/src/main/webapp/common/image/search-icon.png
new file mode 100644
index 00000000..bae1d730
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/search-icon.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/select-caret.png b/openo-portal/portal-common/src/main/webapp/common/image/select-caret.png
new file mode 100644
index 00000000..c24827e3
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/select-caret.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-right.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-right.png
new file mode 100644
index 00000000..c5a8914c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-right.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-rtl.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-rtl.png
new file mode 100644
index 00000000..c5a8914c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow-rtl.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow.png
new file mode 100644
index 00000000..a02299ab
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-menu-arrow.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-blue.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-blue.png
new file mode 100644
index 00000000..ef92187e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-blue.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-brown.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-brown.png
new file mode 100644
index 00000000..9a020b35
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-brown.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-light.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-light.png
new file mode 100644
index 00000000..25ce84aa
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-light.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-purple.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-purple.png
new file mode 100644
index 00000000..72d593bf
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close-purple.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close.png b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close.png
new file mode 100644
index 00000000..0a520a4e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-search-close.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-grey.jpg b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-grey.jpg
new file mode 100644
index 00000000..83855dd5
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-grey.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-light.jpg b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-light.jpg
new file mode 100644
index 00000000..d2c3d97e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/sidebar-toggler-light.jpg
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/syncfusion-icons-white.png b/openo-portal/portal-common/src/main/webapp/common/image/syncfusion-icons-white.png
new file mode 100644
index 00000000..625dcc09
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/syncfusion-icons-white.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/image/user.png b/openo-portal/portal-common/src/main/webapp/common/image/user.png
new file mode 100644
index 00000000..f9d5ac4b
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/image/user.png
diff --git a/openo-portal/portal-common/src/main/webapp/common/index.html b/openo-portal/portal-common/src/main/webapp/common/index.html
new file mode 100644
index 00000000..7a778347
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/index.html
@@ -0,0 +1,23 @@
+<!--
+    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.
+-->
+<html>
+
+<head>
+    <meta http-equiv="Refresh" content="1;url=login.html"> </head>
+
+<body> Loading... </body>
+
+</html>
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/Main2moreMenu.js b/openo-portal/portal-common/src/main/webapp/common/js/Main2moreMenu.js
new file mode 100644
index 00000000..3fadb215
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/Main2moreMenu.js
@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+var sideBarMenu_to_moreMenu_frame = new Array();
+var horBarMenu_to_moreMenu_frame = new Array();
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.js b/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.js
new file mode 100644
index 00000000..9e2b10d8
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.js
@@ -0,0 +1,4008 @@
+/*
+ * 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.
+ */
+String.prototype.trim = function() { 
+	return this.replace(/(^\s*)|(\s*$)/g, "");  
+};
+String.prototype.format=function() {  
+	if(arguments.length==0) return this;  
+	for(var s=this, i=0; i<arguments.length; i++)  
+		s=s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);  
+	return s;  
+}; 
+String.prototype.startWith=function(str){     
+  var reg=new RegExp("^"+str);     
+  return reg.test(this);        
+};
+String.prototype.endWith=function(str){     
+  var reg=new RegExp(str+"$");     
+  return reg.test(this);        
+};
+
+/*全屏 参考:http://www.alixixi.com/web/a/2015031794521.shtml */
+var s=!function(w,d){
+	var fs={
+			supportsFullScreen:false,
+			isFullScreen:false,
+			requestFullScreen:'',
+			exitFullScreen:'',
+			fullscreenchange:'',
+			prefix:''
+		},
+	aP=['webkit','moz','ms'],    //opera 15 支持全屏是webkit内核
+	len=aP.length,
+	i=0;
+	if(d.exitFullscreen){
+		fs.supportsFullScreen=true
+	}else{
+		for(; i<len; i++){
+			if(d[aP[i]+'ExitFullscreen']||d[aP[i]+'CancelFullScreen']){
+				fs.supportsFullScreen=true;
+				fs.prefix=aP[i];
+				break
+			}
+		}
+	}        
+	if(fs.supportsFullScreen){
+		var p=fs.prefix;
+		fs.fullscreenchange=function(fn){
+			d.addEventListener(p=='ms' ? 'MSFullscreenChange' : p+'fullscreenchange',function(){
+				fn && fn()
+			},false)
+		};
+		fs.fullscreenchange(function(){
+			fs.isFullScreen=(function(p){
+				switch (p) {
+					case '':
+						return d.fullscreen;
+					case 'webkit':
+						return d.webkitIsFullScreen;
+					case 'moz':
+						return d.mozFullScreen;
+					case 'ms':
+						return d.msFullscreenElement ? true : false
+				}
+			})(p)
+		});
+		fs.requestFullScreen=function(elem){
+			var elem=elem||d.documentElement;
+			try{
+				p ? elem[p+'RequestFullScreen']() : elem.requestFullScreen()    //chrome，ff，标准
+			}catch(e){
+				elem[p+'RequestFullscreen']()    //elem.msRequestFullscreen
+			}
+		};
+		fs.exitFullScreen=function(){
+			try{
+				p ? d[p+'ExitFullscreen']() : d.exitFullscreen()    //ie，新版chrome或标准
+			}catch(e){
+				d[p+'CancelFullScreen']()    //老版chrome 火狐
+			}
+		}
+	}
+	w.screenfull=fs
+}(window,document);
+/*
+ * Purl (A JavaScript URL parser) v2.3.1
+ * Developed and maintanined by Mark Perkins, mark@allmarkedup.com
+ * Source repository: https://github.com/allmarkedup/jQuery-URL-Parser
+ * Licensed under an MIT-style license. See https://github.com/allmarkedup/jQuery-URL-Parser/blob/master/LICENSE for details.
+ */
+;(function(factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(factory);
+    } else {
+        window.purl = factory();
+    }
+})(function() {
+    var tag2attr = {
+            a       : 'href',
+            img     : 'src',
+            form    : 'action',
+            base    : 'href',
+            script  : 'src',
+            iframe  : 'src',
+            link    : 'href',
+            embed   : 'src',
+            object  : 'data'
+        },
+
+        key = ['source', 'protocol', 'authority', 'userInfo', 'user', 'password', 'host', 'port', 'relative', 'path', 'directory', 'file', 'query', 'fragment'], // keys available to query
+		aliases = { 'anchor' : 'fragment' }, // aliases for backwards compatability
+		parser = {
+            strict : /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,  //less intuitive, more accurate to the specs
+            loose :  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // more intuitive, fails on relative paths and deviates from specs
+        },
+		isint = /^[0-9]+$/;
+
+    function parseUri( url, strictMode ) {
+        var str = decodeURI( url ),
+        res   = parser[ strictMode || false ? 'strict' : 'loose' ].exec( str ),
+        uri = { attr : {}, param : {}, seg : {} },
+        i   = 14;
+        while ( i-- ) {
+            uri.attr[ key[i] ] = res[i] || '';
+        }
+		// build query and fragment parameters
+        uri.param['query'] = parseString(uri.attr['query']);
+        uri.param['fragment'] = parseString(uri.attr['fragment']);
+		// split path and fragement into segments
+        uri.seg['path'] = uri.attr.path.replace(/^\/+|\/+$/g,'').split('/');
+        uri.seg['fragment'] = uri.attr.fragment.replace(/^\/+|\/+$/g,'').split('/');
+		// compile a 'base' domain attribute
+        uri.attr['base'] = uri.attr.host ? (uri.attr.protocol ?  uri.attr.protocol+'://'+uri.attr.host : uri.attr.host) + (uri.attr.port ? ':'+uri.attr.port : '') : '';
+
+        return uri;
+    }
+
+    function getAttrName( elm ) {
+        var tn = elm.tagName;
+        if ( typeof tn !== 'undefined' ) return tag2attr[tn.toLowerCase()];
+        return tn;
+    }
+
+    function promote(parent, key) {
+        if (parent[key].length === 0) return parent[key] = {};
+        var t = {};
+        for (var i in parent[key]) t[i] = parent[key][i];
+        parent[key] = t;
+        return t;
+    }
+
+    function parse(parts, parent, key, val) {
+        var part = parts.shift();
+        if (!part) {
+            if (isArray(parent[key])) {
+                parent[key].push(val);
+            } else if ('object' == typeof parent[key]) {
+                parent[key] = val;
+            } else if ('undefined' == typeof parent[key]) {
+                parent[key] = val;
+            } else {
+                parent[key] = [parent[key], val];
+            }
+        } else {
+            var obj = parent[key] = parent[key] || [];
+            if (']' == part) {
+                if (isArray(obj)) {
+                    if ('' !== val) obj.push(val);
+                } else if ('object' == typeof obj) {
+                    obj[keys(obj).length] = val;
+                } else {
+                    obj = parent[key] = [parent[key], val];
+                }
+            } else if (~part.indexOf(']')) {
+                part = part.substr(0, part.length - 1);
+                if (!isint.test(part) && isArray(obj)) obj = promote(parent, key);
+                parse(parts, obj, part, val);
+                // key
+            } else {
+                if (!isint.test(part) && isArray(obj)) obj = promote(parent, key);
+                parse(parts, obj, part, val);
+            }
+        }
+    }
+
+    function merge(parent, key, val) {
+        if (~key.indexOf(']')) {
+            var parts = key.split('[');
+            parse(parts, parent, 'base', val);
+        } else {
+            if (!isint.test(key) && isArray(parent.base)) {
+                var t = {};
+                for (var k in parent.base) t[k] = parent.base[k];
+                parent.base = t;
+            }
+            if (key !== '') {
+                set(parent.base, key, val);
+            }
+        }
+        return parent;
+    }
+
+    function parseString(str) {
+        return reduce(String(str).split(/&|;/), function(ret, pair) {
+            try {
+                pair = decodeURIComponent(pair.replace(/\+/g, ' '));
+            } catch(e) {
+                // ignore
+            }
+            var eql = pair.indexOf('='),
+                brace = lastBraceInKey(pair),
+                key = pair.substr(0, brace || eql),
+                val = pair.substr(brace || eql, pair.length);
+
+            val = val.substr(val.indexOf('=') + 1, val.length);
+
+            if (key === '') {
+                key = pair;
+                val = '';
+            }
+
+            return merge(ret, key, val);
+        }, { base: {} }).base;
+    }
+
+    function set(obj, key, val) {
+        var v = obj[key];
+        if (typeof v === 'undefined') {
+            obj[key] = val;
+        } else if (isArray(v)) {
+            v.push(val);
+        } else {
+            obj[key] = [v, val];
+        }
+    }
+
+    function lastBraceInKey(str) {
+        var len = str.length,
+            brace,
+            c;
+        for (var i = 0; i < len; ++i) {
+            c = str[i];
+            if (']' == c) brace = false;
+            if ('[' == c) brace = true;
+            if ('=' == c && !brace) return i;
+        }
+    }
+
+    function reduce(obj, accumulator){
+        var i = 0,
+            l = obj.length >> 0,
+            curr = arguments[2];
+        while (i < l) {
+            if (i in obj) curr = accumulator.call(undefined, curr, obj[i], i, obj);
+            ++i;
+        }
+        return curr;
+    }
+
+    function isArray(vArg) {
+        return Object.prototype.toString.call(vArg) === "[object Array]";
+    }
+
+    function keys(obj) {
+        var key_array = [];
+        for ( var prop in obj ) {
+            if ( obj.hasOwnProperty(prop) ) key_array.push(prop);
+        }
+        return key_array;
+    }
+
+    function purl( url, strictMode ) {
+        if ( arguments.length === 1 && url === true ) {
+            strictMode = true;
+            url = undefined;
+        }
+        strictMode = strictMode || false;
+        url = url || window.location.toString();
+
+        return {
+            data : parseUri(url, strictMode),
+            // get various attributes from the URI
+            attr : function( attr ) {
+                attr = aliases[attr] || attr;
+                return typeof attr !== 'undefined' ? this.data.attr[attr] : this.data.attr;
+            },
+            // return query string parameters
+            param : function( param ) {
+                return typeof param !== 'undefined' ? this.data.param.query[param] : this.data.param.query;
+            },
+
+            // return fragment parameters
+            fparam : function( param ) {
+                return typeof param !== 'undefined' ? this.data.param.fragment[param] : this.data.param.fragment;
+            },
+            // return path segments
+            segment : function( seg ) {
+                if ( typeof seg === 'undefined' ) {
+                    return this.data.seg.path;
+                } else {
+                    seg = seg < 0 ? this.data.seg.path.length + seg : seg - 1; // negative segments count from the end
+                    return this.data.seg.path[seg];
+                }
+            },
+            // return fragment segments
+            fsegment : function( seg ) {
+                if ( typeof seg === 'undefined' ) {
+                    return this.data.seg.fragment;
+                } else {
+                    seg = seg < 0 ? this.data.seg.fragment.length + seg : seg - 1; // negative segments count from the end
+                    return this.data.seg.fragment[seg];
+                }
+            }
+        };
+    }    
+    purl.jQuery = function($){
+        if ($ != null) {
+            $.fn.url = function( strictMode ) {
+                var url = '';
+                if ( this.length ) {
+                    url = $(this).attr( getAttrName(this[0]) ) || '';
+                }
+                return purl( url, strictMode );
+            };
+            $.url = purl;
+        }
+    };
+    purl.jQuery(window.jQuery);
+    return purl;
+});
+//把框架所有的ajax请求集中到一起，发一条请求，获取所有的配置信息。	
+ZteFrameWork_conf = {
+	userName:store.get('username'),
+	changePassItem:FrameConst.change_pass?FrameConst.change_pass:true,
+	helpMenuItem:false,
+	aboutMenuItem:false,
+	flightMenuItem:false,
+	fullscreenMenuItem:false,
+	logoutMenuItem:true,
+	defaultThemeColor:"ztebluelight2",
+	dbType:"other",
+	acceptLanguage:"zh-CN"
+};
+$("#currentUser").html(ZteFrameWork_conf.userName);
+
+$.ajax({ 			
+	url : FrameConst.REST_FRAMECOMMIFO,  
+	type : "GET",
+	cache:false,			
+	contentType : 'application/json; charset=utf-8',
+	success: function(data){
+		var tempConf = data;
+		if(	tempConf.helpMenuItem && tempConf.helpMenuItem != "" ){
+			ZteFrameWork_conf.helpMenuItem = tempConf.helpMenuItem;
+		}
+		if(	tempConf.aboutMenuItem && tempConf.aboutMenuItem != "" ){
+			ZteFrameWork_conf.aboutMenuItem = tempConf.aboutMenuItem;
+		}		
+		if(	tempConf.flightMenuItem && tempConf.flightMenuItem != "" ){
+			ZteFrameWork_conf.flightMenuItem = tempConf.flightMenuItem;
+		}
+		if(	tempConf.fullscreenMenuItem && tempConf.fullscreenMenuItem != "" ){
+			ZteFrameWork_conf.fullscreenMenuItem = tempConf.fullscreenMenuItem;
+		}
+		if(	tempConf.logoutMenuItem && tempConf.logoutMenuItem != "" ){
+			ZteFrameWork_conf.logoutMenuItem = tempConf.logoutMenuItem;
+		}
+		if(	tempConf.defaultThemeColor && tempConf.defaultThemeColor != "" ){
+			ZteFrameWork_conf.defaultThemeColor = tempConf.defaultThemeColor;
+		}
+		if(	tempConf.dbType && tempConf.dbType != "" ){
+			ZteFrameWork_conf.dbType = tempConf.dbType;
+		}	 
+		if(	tempConf.acceptLanguage && tempConf.acceptLanguage != "" ){
+			ZteFrameWork_conf.acceptLanguage = tempConf.acceptLanguage;
+		}
+		if(	tempConf.changePassItem && tempConf.changePassItem != "" ){
+			ZteFrameWork_conf.changePassItem = tempConf.changePassItem;
+		}
+		
+		setFrameWorkByConf();
+		//userName = data;
+		//console.info('login user is :' + data);
+	},
+	error:function(data){
+		setFrameWorkByConf();
+	}
+}); 
+
+function setThemeColor( configColor ){
+	var panel = $('.zte-theme-panel');
+    $('.theme-colors > ul > li', panel).each(function () {
+        var color = $(this).attr("data-style");
+        if (color == configColor) {
+            // 匹配上了才重设默认主题
+            $(this).addClass("current");
+            $('#style_color').attr("href", "css/themes/" + color + ".css");
+            //if (store) {
+                store('style_color', color);
+            //}
+       }
+    });
+}; 
+
+function setFrameWorkByConf(){
+		//设置用户相关的框架下拉菜单是否可用
+		    var helpMenuItem = ZteFrameWork_conf.helpMenuItem;
+			var aboutMenuItem = ZteFrameWork_conf.aboutMenuItem;
+            var flightMenuItem = ZteFrameWork_conf.flightMenuItem;
+			var fullscreenMenuItem = ZteFrameWork_conf.fullscreenMenuItem;
+			var logoutMenuItem = ZteFrameWork_conf.logoutMenuItem;
+			var changePassMenuItem = ZteFrameWork_conf.changePassMenuItem;
+            if (!helpMenuItem || helpMenuItem === "false") {
+                $('#uep_ict_help_url').parent('li').remove();
+            }
+			if(!aboutMenuItem|| aboutMenuItem === "false"){
+				$('[data-target="#aboutDlg"]').parent('li').remove();
+			}
+			if(!helpMenuItem && !aboutMenuItem){
+				$('#uep_ict_help_div').remove();
+			}
+            if (!flightMenuItem|| flightMenuItem === "false") {
+                $('#header_notification_bar').html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>");
+            }
+			if (!fullscreenMenuItem|| fullscreenMenuItem === "false") {
+				//$('#trigger_fullscreen').parent().css("display", "none");
+				$('#trigger_fullscreen_div').html("");
+			}
+			if (!logoutMenuItem || logoutMenuItem === "false") {
+				//$('#trigger_logout').parent().css("display", "none");
+				$('#trigger_logout_div').html("");
+			}
+			if ((!fullscreenMenuItem && !logoutMenuItem) || (fullscreenMenuItem === "false" && logoutMenuItem === "false")) {				
+				$('#full_logout_divider').css("display", "none");
+			}
+			if (!changePassMenuItem ) {				
+				$('#changePwd_labellink').css('display','none');
+				$('#full_logout_divider').css('display','none');
+			}		
+			
+		//设置二次开发者选择的框架皮肤
+		var defaultColor = ZteFrameWork_conf.defaultThemeColor;
+		var panel = $('.zte-theme-panel');
+		$('ul > li', panel).removeClass("current"); 
+        if (store && !store('style_color')) { // cookie没有才设置默认主题
+            setThemeColor(defaultColor);
+        }else{
+			setThemeColor(store('style_color'));
+		}
+};
+
+/*新增的hashtabel实现类，用户后续iframe的缓存，前进后退时打开过的页面的菜单id的缓存等*/
+function Hashtable()  
+{ 
+  this._hash = {}; 
+  this._count = 0; 
+  this.add = function(key, value)  
+  { 
+    if (this._hash.hasOwnProperty(key)) 
+      return false; 
+    else { 
+        this._hash[key] = value; this._count++; return true;
+    } 
+  } ;
+  this.hash = function() { return this._hash; };
+  this.remove = function(key) { delete this._hash[key]; this._count--; } ;
+  this.count = function() { return this._count; };
+  this.items = function(key) { if (this.contains(key)) return this._hash[key]; }; 
+  this.contains = function(key) { return this._hash.hasOwnProperty(key); }; 
+  this.clear = function() { this._hash = {}; this._count = 0; }; 
+  this.replace = function(key, value)  
+  { //有则删除后增加///相当于更新
+	if(this.contains(key)){ 
+	   this.remove(key);
+    }
+	return this.add(key, value);
+  } ;
+};
+
+var fMenuSiderDivId = 'page-f-sidebar-menu';
+var fMenuMegaDivId = 'f_hormenu';
+var megaSiderDivId = 'page-megachild-sidebar-menu';
+var megaDivId = 'main_hormenu';
+var zteframework_menu_horizontal = "horizontal";
+var zteframework_menu_vertical = "vertical";
+var zteframework_menu_fmenu = "fmenu";
+var zteframework_showNav = "true";
+var zteframework_smallView = 960;//原来为992，但是在投影仪上不准（投影仪设置为1024，但是实际尺寸比1024小），边栏菜单也会被移除，这个设置一个稍小的值。
+
+/*下面是主框架的核心*/
+var ZteFrameWork = function () {
+	var defaultLanage=getLanguage();
+    var isRTL = false;//文档顺序
+	var isTouch=function(){
+		try {
+                document.createEvent("TouchEvent");
+                return true;
+            } catch (e) {
+                return false;
+            }
+	};
+	var isDesktop = !isTouch;
+    var isIE8 = false;
+    var isIE9 = false;
+    var isIE10 = false;	
+	var gdocTitle="";
+    var _sidebarWidth = 225;
+    var _sidebarCollapsedWidth = 35;
+    var responsiveHandlers = [];    
+    var cachedIframes=new Hashtable(); 
+	var cachedIframesObject=new Hashtable();
+	var breadcrumbBtnMenus=new Hashtable(); 
+	var _menuCategorys=new Hashtable();
+    var _iframe="page-mainIframe"; //全局变量保存的是当前正在打开使用的iframe
+	var _sceneURLRootPath="";
+	var _hashSource="";//信号量
+	var _isClicked=false;//信号量
+	//var _breadcrumbSource=false;
+	
+    // 皮肤颜色
+    var layoutColorCodes = {
+        'blue': '#4b8df8',
+        'red': '#e02222',
+        'green': '#35aa47',
+        'purple': '#852b99',
+        'grey': '#555555',
+        'light-grey': '#fafafa',
+        'yellow': '#ffb848',
+		'ztebluelight': '#3366cc'
+    };
+    // 获取真实的设备窗口大小，参考了  http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
+    var _getViewPort = function () {
+        var e = window, a = 'inner';
+        if (!('innerWidth' in window)) {
+            a = 'client';
+            e = document.documentElement || document.body;
+        }
+        return {
+            width: e[a + 'Width'],
+            height: e[a + 'Height']
+        }
+    }
+    // 初始化
+    var dealInit = function () {
+		var sence = '0';
+		var menuSence = getUrlParam("menu");
+		var confSence = 0;
+		if (menuSence) {
+		    sence = menuSence;
+		} else {
+		    sence = confSence;
+		}
+		switch (sence) {
+		case "1":
+		    gdocTitle = $('#com_zte_ums_ict_framework_ui_page_title_1').text().trim();
+		    break;
+		case "2":
+		    gdocTitle = $('#com_zte_ums_ict_framework_ui_page_title_2').text().trim();
+		    break;
+		case "3":
+		    gdocTitle = $('#com_zte_ums_ict_framework_ui_page_title_3').text().trim();
+		    break;
+		case "0":
+		default:
+		    gdocTitle = $('#com_zte_ums_ict_framework_ui_page_title').text().trim();
+		    break;
+		}		
+        if ($('body').css('direction') === 'rtl') {
+            isRTL = true;
+        }
+        isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
+        isIE9 = !! navigator.userAgent.match(/MSIE 9.0/);
+        isIE10 = !! navigator.userAgent.match(/MSIE 10.0/);
+        if (isIE10) {
+            $('html').addClass('ie10'); // IE10 
+        }        
+        if (isIE10 || isIE9 || isIE8) {
+            $('html').addClass('ie'); //  IE10 
+        }        
+        var deviceAgent = navigator.userAgent.toLowerCase();        
+        if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
+            $(document).on('focus', 'input, textarea', function () {
+                $('.page-header').hide();
+                if($('.page-footer')&&$('.page-footer').length>0)
+                  $('.page-footer').hide();
+            });
+            $(document).on('blur', 'input, textarea', function () {
+                $('.page-header').show();
+                if($('.page-footer')&&$('.page-footer').length>0)
+                  $('.page-footer').show();
+            });
+        } else  {
+             $(document).on('focus', 'input, textarea', function () {
+                if($('.page-footer')&&$('.page-footer').length>0)
+                  $('.page-footer').hide();
+            });
+            $(document).on('blur', 'input, textarea', function () {
+                if($('.page-footer')&&$('.page-footer').length>0)
+                  $('.page-footer').show();
+            });
+        }
+    }
+    //处理滚动到
+    var dealScrollTo=function (el, offeset) {
+	
+    }     
+    var dealstartPageLoading=function(message) {
+            $('.page-loading').remove();
+            $('body').append('<div class="page-loading"><img src="'+ ICTFRAME_CONST_SPINNER_GIF_PATH +'"/>&nbsp;&nbsp;<span>' + (message ? message : $.i18n.prop('com_zte_ums_ict_framework_ui_loading')) + '</span></div>');
+	}
+    var dealstopPageLoading=function() {
+            $('.page-loading').remove();
+    }        
+    var dealSidebarState = function () {
+        // 窗体宽度小尺寸（平板和iphone模式下）时移出左边栏
+        var viewport = _getViewPort();
+        if (viewport.width < zteframework_smallView) {
+            $('body').removeClass("page-sidebar-closed");
+        }else{
+			if (getCookie('sidebar_closed') === '1') {
+				$('body').addClass('page-sidebar-closed');
+			}
+		}
+    }
+    //  ZteFrameWork.addResponsiveHandler()回调函数.
+    var runResponsiveHandlers = function () {
+        //重新初始化其他订阅的元素elements
+        for (var i = 0; i < responsiveHandlers.length; i++) {
+            var each = responsiveHandlers[i];
+            each.call();
+        }
+    }
+    // 窗体重新调整大小时初始化调整边栏状态高度
+    var dealResponsive = function () {
+        dealSidebarState();
+        ajustHorMenuDropDirection();
+        dealSidebarAndContentHeight();
+        dealFixedSidebar();
+        runResponsiveHandlers();
+    }
+    // 页面重载入时初始化调整内部布局
+    var dealResponsiveOnInit = function () {
+        dealSidebarState();
+        dealSidebarAndContentHeight();
+        setTimeout(function () {
+            ajustHorMenuDropDirection(true);
+        }, 100);
+    }
+    // 窗体重新调整大小时初始化调整布局
+    var dealResponsiveOnResize = function () {
+        var resize;
+        if (isIE8) {
+            var currheight;
+            $(window).resize(function () {
+                if (currheight == document.documentElement.clientHeight) {
+                    return; 
+                }
+                if (resize) {
+                    clearTimeout(resize);
+                }
+                resize = setTimeout(function () {
+                    dealResponsive();
+                }, 50);            
+                currheight = document.documentElement.clientHeight; 
+            });
+        } else {
+            $(window).resize(function () {
+                if (resize) {
+                    clearTimeout(resize);
+                }
+                resize = setTimeout(function () {
+                    dealResponsive();
+                }, 50); 
+            });
+        }
+    }	
+	var changeSiderBar = function(hideAllMenu){
+		var siderbarpos = $(".nav-pos-direction", $(".zte-theme-panel")).val();
+		var sidermenu  = $("#page-sidebar-menu");
+		var hormenu = $("#main_hormenu");
+        var fhorMenu = $("#" + fMenuMegaDivId);
+        var fsiderMenu = $("#" + fMenuSiderDivId);
+		if(hideAllMenu){
+			sidermenu.css('display','block');// 侧边栏显示
+			hormenu.css("display", "none");//隐藏水平菜单栏
+            fhorMenu.css('display','none');
+            fsiderMenu.css('display','none');
+			return;
+		}		
+		if (zteframework_menu_horizontal == siderbarpos) {
+				sidermenu.css('display','none');// 侧边栏隐藏
+                fhorMenu.css('display','none');// 侧边栏隐藏
+                fsiderMenu.css('display','none');// 侧边栏隐藏
+                hormenu.css("display", "block");//显示水平菜单栏
+		} else if (zteframework_menu_vertical == siderbarpos) {
+				sidermenu.css('display','block');// 侧边栏显示
+				hormenu.css("display", "none");//隐藏水平菜单栏
+                fhorMenu.css('display','none');// 侧边栏隐藏
+                fsiderMenu.css('display','none');// 侧边栏隐藏
+		} else if (zteframework_menu_fmenu == siderbarpos) {
+			sidermenu.css('display','none');
+			hormenu.css("display", "none");
+			fhorMenu.css('display','block');
+			fsiderMenu.css('display','block');
+			//除了toggle按钮之外，是否还有其他儿子是要显示的，如果没有，那么竖菜单不显示；反之，显示。
+			var lis = fsiderMenu.children(".sidebar-toggler-wrapper").siblings();
+			if(lis.length > 0 && lis.css('display') != "none"){
+				fsiderMenu.css('display','block');
+				//
+				$("body").removeClass("page-full-width");
+				if ($('body').hasClass("page-sidebar-closed")) {
+					$(".page-content").css("marginLeft", _sidebarCollapsedWidth);
+				} else {
+					$(".page-content").css("marginLeft", _sidebarWidth);
+				}
+			}
+        }			
+	}
+    //根据当前菜单在屏幕的位置，和一级菜单下二级菜单的排列，来决定菜单是向左展开还是向右展开
+    var ajustHorMenuDropDirection = function( isInit ){
+        //获取屏幕宽度
+        var bodyWidth = document.body.clientWidth;
+        //循环，获取每个一级菜单在屏幕中的位置
+        var levelOneAdropdowns = $('a.dropdown-toggle', '#main_hormenu' );
+        //每一个文字span的图标、他父亲的margin\padding等占用的位置
+        var marginCount = 5 * 2 + 17.5 + 2 * 2 + 30 + 15 * 2 + 3;
+        for( var i = 0 ; i < levelOneAdropdowns.length ; i++ ){
+            var a = $(levelOneAdropdowns[i]);
+            var leftOffset = a.offset().left;
+            //获取二级菜单的数量
+            var ul = a.parent().children('.dropdown-menu');
+            var groupDivs = $('.zteDivWidth' , ul);
+            var widthOfDropDownMenu = 0;
+            for(var j = 0 ; j < groupDivs.length && groupDivs.length >0 ; j++ ){//循环获取每个分组的宽度
+                var eachDiv = groupDivs[j];
+                var maxLengthText = "";
+                var maxLength = 0;
+                var spans = $('span' , eachDiv).each(function(){
+                    var innerText = this.innerText;
+                    if( innerText.length > maxLength ){
+                        maxLength= innerText.length;
+                        maxLengthText = innerText;
+                    }
+                });
+                widthOfDropDownMenu = widthOfDropDownMenu + getStringWidth(maxLengthText , 14) + marginCount;
+            }
+            //预估每个组占宽度150PX，多预计一点
+            if( widthOfDropDownMenu + leftOffset > bodyWidth ){
+                console.log("ajust class dropdown-menu-right ,id = "+ a.attr("id") );
+                ul.addClass('dropdown-menu-right');
+                //var right = bodyWidth - (leftOffset + a.width() + 15);
+                //ul.attr('style' ,'right:' + right );
+            }else{
+                ul.removeClass('dropdown-menu-right');
+                //ul.removeAttr('style');
+            }
+        }
+    }
+    // 屏幕大小发生变化或者移动设备旋转屏幕时处理响应式布局.
+    var dealSidebarAndContentHeight = function (isToggler) {
+        var content = $('.page-content');		
+        var contentbody = $('.page-content-body');
+		var sidebar = $('.page-sidebar');
+        var body = $('body');
+        var height;
+        var viewport = _getViewPort();
+		var scrAvaHeight=Math.min(window.screen.availHeight,viewport.height)-5;
+        var footer=$('.footer');                  
+        var pgbread=$('.page-breadcrumb');
+		var pageableDiv=$('#pageableDiv');
+		console.log("pageableDiv height:"+pageableDiv.outerHeight(true));
+		var pheader=$('.header');
+		var childPagetype=!!cachedIframesObject.items(_iframe)?cachedIframesObject.items(_iframe).childpageType:"";
+		if(childPagetype==="isc")//smartclient的子页面固定高度为视口可用内容区高度
+		{
+			$('.sidebar-option', panel).val("fixed");
+		}	
+		dealShownav();
+		var available_height =scrAvaHeight - ((!footer||footer.length<=0)?0:footer.outerHeight(true)) - pheader.outerHeight(true);
+		var _pageableDivHeight=(!pageableDiv||pageableDiv.length<=0||pageableDiv.is(":visible")==false)?0:pageableDiv.outerHeight(true);
+		var h= scrAvaHeight-pheader.outerHeight(true)-((!footer||footer.length<=0||footer.is(":visible")==false)?0:footer.outerHeight(true))-pgbread.outerHeight(true)-_pageableDivHeight-(contentbody.outerHeight(true)-contentbody.height());
+        var miframe=_iframe==""?"page-mainIframe": _iframe;
+        var pagemyIframe=$('.page-content .page-content-body .'+miframe); //.page-mainIframe
+        if(pagemyIframe&&pagemyIframe.length>0){    
+            //处理iframe,下面计算中间iframe的高度
+				var deviceAgent = navigator.userAgent.toLowerCase();        
+				  if (deviceAgent.match(/(iphone|ipod|ipad)/)) { //||viewport.height<=480
+				       var w=viewport.width-content.offset().left-(pagemyIframe.offset().left-content.offset().left)*2;//宽度=总宽度-左边栏宽度-内容区内边距。左右两个
+					   pagemyIframe.width(w); 
+			      }
+			      //对桌面必须计算高度
+				  var tmp_style = sidebar.attr('style');// firefox下执行 sidebar.height()会改变style样式，这里缓存下执行前的style样式，执行完后重新赋给页面元素
+				  console.log("pym:parent iframe "+miframe+" sidebar.height:"+sidebar.height()+" h:"+h);
+				  h=sidebar.height()>h?sidebar.height():h;
+				  //IE下，把iframe的高度再减掉7，因为IE10及以下版本，计算的高度会比IE实际显示区域大，导致出现IE滚动条。
+				  /*h=h-ICTFRAME_CONST_IFRAME_HEIGHT_AJUST;
+				  if(isIE){
+					h=h-ICTFRAME_CONST_IFRAME_HEIGHT_AJUST_IE;
+				  }*/
+				sidebar.attr('style',tmp_style);
+				if (isDesktop) {
+				    //pagemyIframe.attr("height",h); 
+					if(cachedIframesObject.items(miframe).setMinHeight){
+						var minHeight=Math.min(scrAvaHeight,h);
+						console.log("pym:parent iframe "+miframe+" window.screen.availHeight:"+scrAvaHeight+" viewport.height:"+viewport.height+" h:"+h+" minHeight:"+minHeight);
+						cachedIframesObject.items(miframe).setMinHeight(minHeight);
+					}
+			      }else{ 
+						//pagemyIframe.attr("height","100%");//去掉这里错误的设置,ipad上测试高度不正确
+						var _h=h;
+						try{
+							_h=pagemyIframe.contents().height();
+						}catch(e){}
+						h=_h>h?_h:h;
+						if(cachedIframesObject.items(miframe).setMinHeight){
+							var minHeight=Math.min(scrAvaHeight,h);
+							console.log("pym:parent iframe "+miframe+" window.screen.availHeight:"+scrAvaHeight+" viewport.height:"+viewport.height+" h:"+h+" minHeight:"+minHeight);
+							cachedIframesObject.items(miframe).setMinHeight(minHeight);
+						}
+			      }				  
+        }
+          
+        if (body.hasClass("page-footer-fixed") === true && body.hasClass("page-sidebar-fixed") === true) {              
+            if (content.height() < available_height) {
+                //content.attr('style', 'min-height:' + available_height + 'px !important');
+				dealAddStyle(content,'min-height',available_height + 'px',true);
+            }
+        } else{
+          if (body.hasClass("page-footer-fixed") === true && body.hasClass("page-sidebar-fixed") === false) {
+              if (content.height() < available_height) {
+                  //content.attr('style', 'min-height:' + available_height + 'px !important');
+				  dealAddStyle(content,'min-height',available_height + 'px',true);
+              }
+          } else {
+              if (body.hasClass('page-sidebar-fixed')) {
+                  height = _calculateFixedSidebarViewportHeight();
+              } else {
+                  // firefox下执行 sidebar.height()会改变style样式，这里缓存下执行前的style样式，执行完后重新赋给页面元素
+                  var tmp_style = sidebar.attr('style');
+                 // height = sidebar.height() + 20;
+                  sidebar.attr('style',tmp_style);
+                  var headerHeight = pheader.outerHeight(true);
+                  var footerHeight = (!footer||footer.length<=0)?0:footer.outerHeight(true);                
+                  if ($(window).width() > 1024 && (height + headerHeight + footerHeight)  < scrAvaHeight) {
+                      height = scrAvaHeight - headerHeight - footerHeight;
+                  }
+              }            
+              if (height <= content.height()) {//这里为了避免内容区域很小的时候出现内容区域无法充满屏幕,把min-height修改为height
+                  //content.attr('style', 'min-height:' + height + 'px !important');
+				  dealAddStyle(content,'min-height',height + 'px',true);
+              }
+          }
+        }
+		// 屏幕小尺寸时会隐藏边栏，这时菜单由小屏幕右上图标控制，当屏幕变化到大尺寸屏幕时，
+		// 需要按原菜单出现方式恢复菜单显示。
+		var screenwidth = $(window).width();
+		if(screenwidth >= zteframework_smallView){
+			changeSiderBar();
+			if($(".page-sidebar-menu li").css('display') != "none"){
+				if ($('body').hasClass("page-sidebar-closed") && $(".sidebar-toggler").hasClass("close-by-viewportChange")) {	
+					if( !isToggler ){
+						$(".sidebar-toggler")[1].click();
+					}
+					$(".sidebar-toggler").removeClass("close-by-viewportChange");
+				}
+			}
+		}
+		else {
+			changeSiderBar(true);
+		}
+    }
+    var showIframe=function(iframe){
+        var resize,pagemainIframe;             
+        if (cachedIframes.count()>0) {
+            for (var i in cachedIframes.hash()) {
+                cachedIframes.replace(i,0);
+                var pagemyIframe=$('.page-content .page-content-body .'+i);			      
+			    if(pagemyIframe&&pagemyIframe.length>0){
+					if(iframe==i){
+						pagemyIframe.show();
+						cachedIframes.replace(i,1); 								        								        
+					} else{
+						if("page-mainIframe"===i){//2015年12月10日 wimax要求页面切换后删除没有配置cacheNum的缓存页面
+							pagemainIframe=i;
+							pagemyIframe.attr("src","");
+							pagemyIframe.remove();
+						}else{
+							pagemyIframe.hide();						
+						}
+						cachedIframes.replace(i,0);
+					}
+			    }
+            }
+        }
+		if(pagemainIframe){
+			delete cachedIframes._hash[pagemainIframe];
+			delete cachedIframesObject._hash[pagemainIframe];
+		}
+		if (!cachedIframes.contains(iframe)) {
+			cachedIframes.add(iframe,1);
+            //增加的iframe加载完毕后 停止加载中提示信息
+			myIframe=$('.'+iframe);
+			myIframe.show();
+    		myIframe.load(function(){
+    		    /*if (!isDesktop) {
+                    if (resize) {
+                        clearInterval(resize);
+                    }
+                    resize = setInterval(dealIframeHeight, 400,$(this)); 
+                }*/
+    			ZteFrameWork.stopPageLoading();
+    		});     		             
+        }                                  
+    }
+	var hidemenu=function(){
+		$('.hor-menu').hide();
+		dealAddStyle($('.page-content'),'margin-left','0px',true);
+		dealAddStyle($('.page-sidebar'),'display','none',true);
+        var fsiderMenu = $("#" + fMenuSiderDivId);
+        fsiderMenu.children().css('display' , 'none');
+	}
+	var hideAlarmLight=function(){
+		//$('#header_notification_bar').hide();
+		//$('#header_notification_bar').empty();
+		$('#header_notification_bar').html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>");
+	}
+	var dealShownav=function(){
+        var showNav=ZteFrameWork.getLocationURLParameter('showNav');
+		if( showNav=="false"){
+            zteframework_showNav = showNav;
+			hidemenu();
+			hideAlarmLight();
+		}
+	}
+	/*  点击菜单时，处理对应该菜单项的横，左菜单项	*/
+	var dealRelateMenu = function(source) {
+		// 点击子菜单时，对应的横竖菜单项也联动为选择样式，(高亮,箭头变化)
+		var panel = $('.zte-theme-panel');
+		var navPosOption = $('.nav-pos-direction', panel).val();
+		var targetsource = null;
+		var targetContainer = null;
+		if (navPosOption === "vertical") {
+			// 当前是左菜单，则处理对应的横菜单
+			targetsource = $("#"+source.attr("id"), $("#main_hormenu"));
+			targetContainer = $(".header ul");				
+		} else if (navPosOption === "horizontal") {
+            var rtn = dealMgaBarRelated(source);
+			dealFMenuRelated(source , megaSiderDivId);
+            targetContainer = rtn[0];
+            targetsource = rtn[1];
+		}else if(navPosOption === zteframework_menu_fmenu){
+            dealFMenuRelated(source , fMenuSiderDivId);
+        }
+		if (targetContainer) {
+			// 移除原有菜单项的活动及箭头样式
+			targetContainer.children('li.active').removeClass('active');
+			targetContainer.find('.arrow.open').removeClass('open');
+		}
+		if (targetsource) {
+			// 增加活动及箭头样式
+			targetsource.parents('li').each(function () {
+				$(this).addClass('iframe active');
+				$(this).find('a > span.arrow').addClass('open');
+			});
+			targetsource.parents('li').addClass('active');
+			if (navPosOption === "horizontal") {
+				if (targetsource.parent().parent().parent().is("li")) {
+					$('.arrow', targetsource.parent().parent().parent()).addClass("open");
+				}
+			}
+		}
+	}
+    var dealMgaBarRelated = function(source){
+        // 当前是横菜单，则处理对应的左菜单
+        targetsource = $("#"+source.attr("id"), $("[class='page-sidebar-menu']"));
+        targetContainer = $("#page-sidebar-menu ul");
+        // 将先前左菜单展开的子菜单收缩
+        $("li.open",targetContainer).each(function() {
+            var style = $("ul.sub-menu", this).attr("style");
+            if (style) {
+                $("ul.sub-menu", this).removeAttr("style");
+                $(this).removeClass('open');
+            }
+        });
+        // 当前是横菜单，但在屏幕缩小的情况下显示的是tip垂直菜单，而横菜单是隐藏的，所以需额外处理横菜单
+        if (source.parent().parent().parent().parent().attr("class").indexOf("page-sidebar-menu") >= 0) {
+            var tiptargetsource = $("#"+source.attr("id"), $("#main_hormenu"));
+            var tiptargetContainer = $(".header ul");
+            tiptargetContainer.children('li.active').removeClass('active');
+            tiptargetContainer.find('.arrow.open').removeClass('open');
+            tiptargetsource.parents('li').each(function () {
+                $(this).addClass('iframe active');
+                $(this).find('a > span.arrow').addClass('open');
+            });
+            tiptargetsource.parents('li').addClass('active');
+        }
+        return [targetContainer ,targetsource ];
+    }
+    var dealFMenuRelated = function(source , siderDivId ){
+        var fsiderMenu = $("#" + siderDivId);
+		if(isMoreMenuItemClick){//更多菜单点击 , 临时方案，增加信号量，使用之后就置为false
+			isMoreMenuItemClick = false 
+		}else if($(source).parents('li').hasClass('mega-menu-dropdown')){//F的横向菜单的点击
+            var id = source.attr('id');            
+            //非被点击的一级菜单的二级菜单都不显示
+            $('#' + siderDivId + '>li').hide();
+            var level2Lis =  $("a[hparentid= " + id + "]" , fsiderMenu).parent();
+            level2Lis.show();
+            if(level2Lis.length > 0){//把竖向菜单的收起放大按钮显示出来
+                $('#' + siderDivId + '>li.sidebar-toggler-wrapper').show();
+            }
+            if($("a[hparentid= " + id + "]" , fsiderMenu).length > 0){ //有子孙菜单时，把F菜单的竖菜单显示出来
+                dealFSidermenu(source ,siderDivId );
+            }else{//否则隐藏竖菜单
+                fsiderMenu.css('display','none');
+                $("body").addClass("page-full-width");
+                $(".page-content").css("marginLeft", _sidebarWidth);
+            }
+
+        }else{//F菜单的竖向菜单点击
+            //处理一种特殊情况，告警灯打开新页面，所有的菜单都不出现，因此，虽然这个source在竖菜单，但竖菜单这个时候实际上是没有显示的
+            if( zteframework_showNav == "true") {
+                $('#' + siderDivId + '>li').hide();     
+				var lis = $(source).parents('li');	
+				var id = lis.eq(lis.length-1).children( 'a' ).attr('hparentid');				
+                //var id = $(source).parents('li').children('a').attr('hparentId');
+                var level2Lis =  $("a[hparentid=" + id + "]" , fsiderMenu).parent();
+                level2Lis.show();
+                if(level2Lis.length > 0) {//把竖向菜单的收起放大按钮显示出来
+                    $('#'+ siderDivId + '>li.sidebar-toggler-wrapper').show();
+                }
+                //$('#' + siderDivId + '>li')[0].show();
+                dealFSidermenu(source , siderDivId);
+            }
+        }
+    }
+    var dealFSidermenu = function(source , siderDivId){
+        var fsiderMenu = $("#" + siderDivId);
+        fsiderMenu.css('display','block');
+		$('ul.sub-menu',fsiderMenu).css('display','block');
+		$('.arrow',fsiderMenu).addClass('open');
+        $("body").removeClass("page-full-width");
+        if ($('body').hasClass("page-sidebar-closed")) {
+            $(".page-content").css("marginLeft", _sidebarCollapsedWidth);
+        } else {
+            $(".page-content").css("marginLeft", _sidebarWidth);
+        }
+        var href = source.attr("href");
+        $('li.iframe' ,fsiderMenu ).removeClass('active');
+        var selectedIframeLi = $("a[href ='" + href + "']"  ,fsiderMenu ).parent();
+        selectedIframeLi.addClass('active');
+        selectedIframeLi.parent().parent().addClass("open").addClass("active");
+        selectedIframeLi.parent().css('display','block');
+        selectedIframeLi.parent().parent().children('a').children('.arrow').addClass('open');
+    }
+	var dealMenuItemClick=function(source,e,menuContainerStr){
+            var url = source.attr("href");
+            if(!url||url.length<2)
+              return;            
+            e.preventDefault(); 			
+			if(!_isClicked){//导航情况下,首先要模拟点开菜单分组
+				_isClicked=true;//如果菜单有子菜单点击一次来展开子菜单，注意这个信号量的变化，避免死循环
+				var mainMenu=source.parents('li').last();
+				if(!mainMenu.hasClass('open')){
+					dealLiAClick(mainMenu.children('a:eq(0)'));
+				}
+			}			
+			if(menuContainerStr&&menuContainerStr.length>0){
+				var menuContainer = $('.'+menuContainerStr+' ul');
+				
+				menuContainer.children('li.active').removeClass('active');
+				// menuContainer.children('arrow.open').removeClass('open');
+				//menuContainer.find('.arrow.open').addClass('open');
+			}
+			source.parents('li').each(function () {
+                $(this).addClass('iframe active');
+                $(this).children('a > span.arrow').addClass('open');
+            });
+            source.parents('li').addClass('active');			
+			// 处理点击菜单对应的横或左菜单项的选择样式
+			dealRelateMenu(source);			
+            if(menuContainerStr&&menuContainerStr.length>0){
+				if ($(window).width() <= 991 && $('.'+menuContainerStr).hasClass("in")) {
+					$('.navbar-toggle').click();
+				} 
+			}			
+            if(dealMultTabPage(source)) 
+                return true;              
+            dealScrollTo();
+            var breadmenuID=e.data&&e.data.breadcrumbBtnMenuItem&&e.data.breadcrumbBtnMenuItem.length>0?e.data.breadcrumbBtnMenuItem:"";
+			if(breadmenuID.length>0){//面包削导航来的，只需要重新生成面包削即可				
+				//找到更多菜单按钮
+				var moreMenuItem = $('#' + breadmenuID , $('#pageableDiv'));
+				if( moreMenuItem.length == 0 ){
+					moreMenuItem = $('#' + breadmenuID , $('.more-botton-zone'));
+				}
+				dealBreadcrumbBtnMenuItemClick(moreMenuItem,e); 
+				//dealBreadcrumb(source,false,e); 
+			}else{//非面包削导航来的，
+				dealstartPageLoading(); 			
+				if(dealIframe(source,e))//当返回true时说明是正常加载iframe了，否则面包削不能切换
+					dealBreadcrumb(source,false,e);
+			}
+			//dealShownav();
+    };	
+	var dealMenuItemGetFocus=function(source,e,menuContainerStr){
+            var url = source.attr("href");
+            if(!url||url.length<2)
+              return;            
+            e.preventDefault();			
+			if(!_isClicked){//导航情况下,首先要模拟点开菜单分组
+				_isClicked=true;//如果菜单有子菜单点击一次来展开子菜单，注意这个信号量的变化，避免死循环
+				var mainMenu=source.parents('li').last();
+				dealLiAClick(mainMenu.children('a:eq(0)'));
+			}			
+			if(menuContainerStr&&menuContainerStr.length>0){
+				var menuContainer = $('.'+menuContainerStr+' ul');
+				
+				menuContainer.children('li.active').removeClass('active');
+				menuContainer.children('arrow.open').removeClass('open');
+			}
+			source.parents('li').each(function () {
+                $(this).addClass('iframe active');
+                $(this).children('a > span.arrow').addClass('open');
+            });
+            source.parents('li').addClass('active');
+			
+            if(menuContainerStr&&menuContainerStr.length>0){
+				if ($(window).width() <= 991 && $('.'+menuContainerStr).hasClass("in")) {
+					$('.navbar-toggle').click();
+				} 
+			}
+    };	
+     //处理iframe的核心处理类，逻辑较为复杂，注意各种参数的处理
+    var dealIframe=function(aObject,e){
+			_hashSource="";
+            var url = aObject.attr("href");
+            if(!url||url.length<2)
+              return;
+			url=ZteFrameWork.handlBaseURL(url);
+		    //-----------2015年9月21日新增V5中大O需要的按照实例（根据选择的系统实例变化url的ip和端口地址）进行动态切换菜单的功能
+		    var category= aObject.attr("category");//处理菜单中定义的Category属性
+			if(category&&category.length>0){//处理Category属性
+				var newIpPort=_menuCategorys.items(category);
+				if(newIpPort&&newIpPort.ipPort&&newIpPort.ipPort.trim()!=""){//如果找到了
+					var newIpPortstr=ZteFrameWork.getDomainURL(newIpPort.ipPort);//去掉ip和port后多余的部分
+					var urlipport=ZteFrameWork.getDomainURL(url);
+					console.log("old url:"+url);
+					url=newIpPortstr+url.replace(urlipport,"");
+					console.log("newIpPort:"+newIpPortstr+"      newURL:"+url);					
+				}				
+			}
+			//------------
+            dealstartPageLoading();
+            var cacheNum= aObject.attr("cacheNum");//当第三方应用需要框架缓存曾经打开过的页面时使用。
+            var shiftJS= aObject.attr("shiftJS");//当第三方应用不需要后面的href页面进行重新加载仅仅执行某个脚本打开某个功能时使用
+			var _iframeName= aObject.attr("iframeName");//对有些第三方应用设置了顶层frame名字的，这个必须设置
+			var _iframeAutoScroll= aObject.attr("iframeAutoScroll");//设置iframe的滚动条是否出现,可以设置为auto,yes或者no,默认为no 不出现.
+			_iframeAutoScroll=!!_iframeAutoScroll?(_iframeAutoScroll==='yes'?'yes':_iframeAutoScroll==='auto'?'auto':'no'):'no';
+			_xdomain= aObject.attr("xdomain");//对有些第三方应用如果跨域了,需要设置这个信任域属性,以便于来跨域通讯.这里取值是一个正则表达式
+			_xdomain=_xdomain&&_xdomain.length>0?_xdomain:"*";
+			var _cssfile= aObject.attr("cssSrc");//设置iframe中页面需要动态加载的css文件.
+			_cssfile=(_cssfile&&_cssfile.length>0)?_cssfile:"";
+			var _runShiftJS="";
+			var pageContentBody=$('.page-content .page-content-body');
+			var tabHtml="";			
+			var tabContentHtml="";
+			var tabID="";
+			var tabContentID="";
+            var iframename='';
+			function createIframe(pdiv,url,id,name,clsname,xdom,autoScroll){
+				var pymParent = new pym.Parent(pdiv, url, {xdomain:xdom});
+				pymParent.iframe.id=id;
+				pymParent.iframe.name=name;
+				//pymParent.iframe.setAttribute('display', "none");
+				//pymParent.iframe.style.height="100%";
+				//pymParent.iframe.setAttribute('height', "100%");
+				pymParent.iframe.setAttribute('class', clsname);
+				pymParent.iframe.setAttribute('allowfullscreen','');
+				pymParent.iframe.setAttribute('mozallowfullscreen','');
+				pymParent.iframe.setAttribute('oallowfullscreen','');
+				pymParent.iframe.setAttribute('msallowfullscreen','');
+				pymParent.iframe.setAttribute('webkitallowfullscreen',''); 
+				//pymParent.iframe.setAttribute('scrolling',autoScroll);
+				pymParent.iframe.setAttribute('onload', 'ZteFrameWork.SyncCSS(this,0,"'+_cssfile+'");ZteFrameWork.stopPageLoading();');
+				cachedIframesObject.replace(id,pymParent);//缓存iframe对象实体
+				pymParent.onMessage('height', function(he){
+					  console.log("The frame "+id+" receive message height is "+he);
+					  var pagemyIframe=$('.page-content .page-content-body .'+id);
+					  var h=Math.max(this.minHeight,he);
+					  pagemyIframe.height(h);
+				});
+				return pymParent;
+			};		
+			
+            if(cacheNum){//处理缓存iframe和iframename标签
+                cacheNum="page-mainIframe"+cacheNum; 
+				iframename="fraMain"+cacheNum;                
+            }else{
+                cacheNum="page-mainIframe";
+				iframename="fraMain";        
+            }
+			iframename=!!_iframeName?_iframeName:iframename;
+            _iframe= cacheNum;//注意这里_iframe是一个全局变量
+                
+            var miframe=_iframe==""?"page-mainIframe": _iframe;
+            var pagemyIframe=$('.page-content .page-content-body .'+miframe);
+			var nagivJS=e&&e.data&&e.data.action?e.data.action:"";
+			nagivJS=(!!nagivJS&&nagivJS.length>0)?(nagivJS.trim().toLowerCase()=="null"?nagivJS:"javascript:$('.page-content .page-content-body ."+miframe+"')[0].contentWindow."+nagivJS.trim()+";"):"";      
+			nagivJS=nagivJS.trim();
+			
+			_runShiftJS=(!!shiftJS&&shiftJS.length>0)?(shiftJS.trim().toLowerCase()=="null"?shiftJS:"javascript:$('.page-content .page-content-body ."+miframe+"')[0].contentWindow."+shiftJS+";"):"";      
+			if(pagemyIframe&&pagemyIframe.length>0){//如果iframe已经添加了，则直接更改url或者执行切换或导航函数
+			    var src=pagemyIframe.attr("src"); 					
+			    if((!!shiftJS||nagivJS.length>0)&&(src==url||src.split('?')[0]==url.split('?')[0])&& cacheNum!="page-mainIframe") {    //url相同时,处理缓存shiftJS标签
+					//这里shiftJS必须定义iframe中的页面定义到window上的函数；
+					//pagemyIframe.attr("scrolling",_iframeAutoScroll);
+					cachedIframesObject.items(miframe).settings.xdomain=_xdomain;	
+					if(nagivJS.length>0&&nagivJS.toLowerCase()!="null")
+						_runShiftJS=nagivJS;//如果是nagivJS导航过来的，nagivJS优先级高于shiftJS，如果有nagivJS就用nagivJS替换_runShiftJS； 直接执行一次导航切换
+					try{	
+						if(_runShiftJS.trim().toLowerCase()!="null")
+							eval(_runShiftJS);
+					}catch(e){
+						if  (e  instanceof  EvalError)   {
+							console.log(e.name  +   " EvalError:  "   +  e.message);
+						}   else   if  (e  instanceof  SyntaxError)   {
+							console.log(e.name  +   " SyntaxError:  "   +  e.message);
+						}else   if  (e  instanceof  Error)   {
+						    if(e.name.toLowerCase().trim()=="typeerror")
+							{
+							   //console.log($.i18n.prop('com_zte_ums_ict_framework_ui_clickTooFast'));
+								var parm={runShiftJS:_runShiftJS};
+								pagemyIframe.one('load',parm,function(e){ 
+									var runShiftJS=e&&e.data&&e.data.runShiftJS?e.data.runShiftJS:"";
+									if(runShiftJS.length>0&&runShiftJS.toLowerCase()!="null")
+										eval(runShiftJS);//点击太快了，页面没有加载完毕，那就加载完毕了再次执行
+								})
+							}							
+						} 
+						return false;//返回false 后续不再做其他动作了
+					}
+					finally{
+						ZteFrameWork.stopPageLoading();
+					}
+				}else{//否则url不同,或者url相同但没有shiftjs
+					if(nagivJS.length>0&&nagivJS.toLowerCase()!="null"){//如果是代码导航过来的去掉url参数中的默认action动作
+						url=url.split('?')[0];//去掉？参数，防止默认执行动作，只响应nagivJS指定的动作；
+					}
+					if(src.split('#')[0]!=url.split('#')[0])//如果相等说明是通过锚点导航的，真实url没有变化，对SPA应用比较普遍
+					{
+						pagemyIframe.attr("src","");//url和src不同说明更换了页面，需要清空重新加载
+					}else //if (src.trim()==url.trim()) //没有shiftjs并且url相同，说明不需要再次加载了,已经加载过了
+					{
+						ZteFrameWork.stopPageLoading();
+					}	
+					pagemyIframe.attr("src",url);
+					
+					if(nagivJS.length>0&&nagivJS.toLowerCase()!="null"){//如果是nagivJS导航过来的，iframe加载完毕后执行一次导航切换脚本
+						var parm={nagivJS:nagivJS};
+						pagemyIframe.one('load',parm,function(e){ 
+							var nagivJS=e&&e.data&&e.data.nagivJS?e.data.nagivJS:"";
+							if(nagivJS.length>0&&nagivJS.toLowerCase()!="null")
+								eval(nagivJS);//如果没有加载过，加载后也要执行跳转的函数
+						});						
+					}
+					if(_cssfile.length>0&&_cssfile.toLowerCase()!="null"){//如果配置了cssSrc，每次切换都重新执行一边这个css文件，防止有遗漏
+						parm={syncCSSJS:'ZteFrameWork.SyncCSS(this,10,"'+_cssfile+'");ZteFrameWork.stopPageLoading();'};
+						pagemyIframe.one('load',parm,function(e){ 
+							var syncCSSJS=e&&e.data&&e.data.syncCSSJS?e.data.syncCSSJS:"";
+							if(syncCSSJS.length>0&&syncCSSJS.toLowerCase()!="null")
+								eval(syncCSSJS);
+						});
+					}					
+				}
+				
+			}else{//否则添加新的iframe元素     overflow:visible;
+				if(nagivJS.length>0&&nagivJS.toLowerCase()!="null"){//如果是代码导航过来的去掉url参数中的默认action动作
+						url=url.split('?')[0];//去掉？参数，防止默认执行动作，只响应nagivJS指定的动作；
+				}
+				var pdiv="pdiv_"+miframe;
+				if($("#"+pdiv).length<=0){//检查下，如果该div没有添加过就添加
+					pageContentBody.append("<div id='"+pdiv+"'></div>");
+				}	
+				dealstartPageLoading(); 				
+				pymParent=createIframe(pdiv, url,miframe,miframe,miframe,_xdomain,_iframeAutoScroll);				
+				pagemyIframe=$(pymParent.iframe);
+				
+				if(nagivJS.length>0&&nagivJS.toLowerCase()!="null"){//如果是nagivJS导航过来的，iframe加载完毕后执行一次导航切换
+					var parm={nagivJS:nagivJS};
+					pagemyIframe=$('.page-content .page-content-body .'+miframe);
+					if(pagemyIframe&&pagemyIframe.length>0){	
+						pagemyIframe.one('load',parm,function(e){ 
+							var nagivJS=e&&e.data&&e.data.nagivJS?e.data.nagivJS:"";
+							if(nagivJS.length>0&&nagivJS.toLowerCase()!="null")
+								eval(nagivJS);//如果没有加载过，加载后也要执行跳转的函数
+						})
+					}
+				}			
+				
+			}  					
+            showIframe(miframe);                  
+            ZteFrameWork.fixContentHeight(); // 调整高度  
+			return true;
+   }
+    // 处理边栏菜单
+	var dealLiAClick=function(source){
+		if (source.next().hasClass('sub-menu') == false) {
+			if ($('.btn-navbar').hasClass('collapsed') == false) {
+				$('.btn-navbar').click();
+			}
+			return;
+		}
+
+		if (source.next().hasClass('sub-menu always-open')) {
+			return;
+		}
+		var parent = source.parent().parent();
+		var the = source;
+		var menu = $('.page-sidebar-menu');
+		var sub = source.next();
+		var autoScroll = menu.data("auto-scroll") ? menu.data("auto-scroll") : true;
+		var slideSpeed = menu.data("slide-speed") ? parseInt(menu.data("slide-speed")) : 200;
+		parent.children('li.open').children('a').children('.arrow').removeClass('open');
+		parent.children('li.open').children('.sub-menu:not(.always-open)').slideUp(200);
+		parent.children('li.open').removeClass('open');		
+		var slideOffeset = -200;
+		if (sub.is(":visible")) {
+			$('.arrow', source).removeClass("open");
+			source.parent().removeClass("open");
+			sub.slideUp(slideSpeed, function () {
+				if (autoScroll == true && $('body').hasClass('page-sidebar-closed') == false) {
+					if ($('body').hasClass('page-sidebar-fixed')) {
+						
+					} else {
+						dealScrollTo(the, slideOffeset);
+					}
+				}
+				dealSidebarAndContentHeight();
+			});
+		} else {
+			$('.arrow', source).addClass("open");
+			source.parent().addClass("open");
+			sub.slideDown(slideSpeed, function () {
+				if (autoScroll == true && $('body').hasClass('page-sidebar-closed') == false) {
+					if ($('body').hasClass('page-sidebar-fixed')) {
+						dealScrollTo(the, slideOffeset);
+					}
+				}
+				dealSidebarAndContentHeight();
+			});
+		}	
+	}	
+    var dealSidebarMenu = function () {//这里注册和处理边栏菜单的各类点击事件
+        $('.page-sidebar').on('click', 'li > a', function (e) {
+            if ($(this).next().hasClass('sub-menu') == false) {
+                if ($('.btn-navbar').hasClass('collapsed') == false) {
+                    $('.btn-navbar').click();
+                }
+                return;
+            }
+            if ($(this).next().hasClass('sub-menu always-open')) {
+                return;
+            }
+            dealLiAClick($(this));
+            e.preventDefault();
+        });
+
+        // 处理左边导航中的菜单连接，显示在iframe中
+        $('.page-sidebar').on('click', ' li > a.iframe', function (e) {
+			//dealMenuItemClick($(this),e,"page-sidebar")
+			e.preventDefault();
+			var menuItemID=$(this).attr("id");
+			if(!!menuItemID&&menuItemID.length>0){
+				_setLocationHash(menuItemID);
+				_hashSource="dhByInterface";				
+			}//else{
+			_isClicked=true;
+			dealMenuItemClick($(this),e,"page-sidebar");
+			//}	
+		}); 
+        // 处理更多菜单的菜单连接，显示在iframe中dropdown-menu
+        $('.page-breadcrumb').on('click', ' li > a.iframe', function (e) {
+			var url = $(this).attr("href");
+			if(url.length<2)
+			  return;
+			e.preventDefault();
+			dealBreadcrumbBtnMenuItemClick($(this),e);   			
+		}); 
+        // 处理可翻页更多菜单中的菜单连接，显示在iframe中dropdown-menu
+        $('#pageableDiv').on('click', ' div > a.iframe', function (e) {
+			var url = $(this).attr("href");
+			if(url.length<2)
+			  return;
+			e.preventDefault();
+			dealBreadcrumbBtnMenuItemClick($(this),e);   			
+		}); 
+		// 处理可翻页更多菜单中的菜单连接，显示在iframe中dropdown-menu
+        $('#pageableDiv').on('click', ' li > a.iframe', function (e) {
+			var url = $(this).attr("href");
+			if(url.length<2)
+			  return;
+			e.preventDefault();
+			if(e.target){
+				var tg=$("span",e.target);
+				tg=tg.length>0?tg[0]:e.target;
+				$(".open a>div>span",e.target.parentNode.parentNode.parentNode.parentNode.parentNode).replaceWith(tg.outerHTML);
+			}
+			dealBreadcrumbBtnMenuItemClick($(this),e);   			
+		}); 	
+			
+         // 处理header下拉菜单中的菜单连接，显示在iframe中
+         $('.dropdown').on('click', ' li > a.iframe', function (e) {
+			var url = $(this).attr("href");
+			if(url.length<2)
+			  return;
+			e.preventDefault();
+			dealScrollTo();
+			dealstartPageLoading();
+			
+			dealIframe($(this),e)
+			dealBreadcrumb($(this),false,e);    			
+		});
+    }      
+	var getSceneURL=function(url){
+		if(url&&url.trim().length>0){
+			url=url.trim();
+			//url=
+			_sceneURLRootPath=_sceneURLRootPath+url;
+		}
+	}	
+	var gurl="";//临时全局变量，存储当前加载的more菜单，如果加载过了，就不再加载了。下面的方法中会用到	
+	var moreMenusisLoaded=true;
+	var waittime=null;
+    var getBreadcrumbRightButtons=function(url,e){					
+			if (url.length<2){
+				return;
+			}
+			url=ZteFrameWork.handlBaseURL(url);
+			if (gurl==url){				
+				if(e===true){
+					$('#pageableDiv').show();
+				}else if(e&&e.target&&e.currentTarget){
+					var defaultDisplay=$(e.target).attr("defaultDisplay");
+					defaultDisplay=(!defaultDisplay)?$(e.currentTarget).attr("defaultDisplay"):defaultDisplay;
+					if(defaultDisplay&&defaultDisplay.trim()=="false"){
+						$('#pageableDiv').hide();
+					}else{
+						$('#pageableDiv').show();
+					}
+				}
+				return;
+				
+			}else{
+				gurl=url;
+				clearMoreOperations();
+			}
+			//处理e参数，注意e可能为null
+			var breadmenuID=e&&e.data&&e.data.breadcrumbBtnMenuItem&&e.data.breadcrumbBtnMenuItem.length>0?e.data.breadcrumbBtnMenuItem:"";
+			breadmenuID=breadmenuID.length<=0?(e&&e.breadcrumbBtnMenuItem&&e.breadcrumbBtnMenuItem.length>0?e.breadcrumbBtnMenuItem:""):breadmenuID;
+            moreMenusisLoaded=false;
+            $.ajax({
+                type: "GET",
+                cache: false,
+                url: url,
+                dataType: "html", 
+                success: function (res) {
+					try{
+						//$('.page-breadcrumb').append(res);					
+						var resScriptsSriped = stripHtmlScripts(res);
+						//$('.page-breadcrumb').append(resScriptsSriped);
+						$('.more-botton-zone').children().remove();
+						//V5新增逻辑，如果displayType = pageableDiv,那么就用滑动的DIV来显示更多菜单里面的内容，如果没有配置，或为其他值，就按原有方式显示
+						var tempDiv = $('<div style="display:none"></div>');
+						tempDiv.children().remove();
+						tempDiv.append(resScriptsSriped);
+						
+						//获取UL属性
+						var displayType = $('.dropdown-menu',tempDiv).attr('displayType');
+						if( displayType && displayType != 'pageableDiv'){
+							$('.more-botton-zone').append(resScriptsSriped);
+							$('#pageableDiv').hide();						
+						}else{
+							var tempUl = $('.dropdown-menu',tempDiv);
+							if(tempUl.length>0){
+								moreOperations(tempUl[0]);							
+								if(e&&e.target&&e.currentTarget){
+									var defaultDisplay=$(e.target).attr("defaultDisplay");
+									defaultDisplay=(!defaultDisplay)?$(e.currentTarget).attr("defaultDisplay"):defaultDisplay;
+									if(defaultDisplay&&defaultDisplay.trim()=="false"){
+										$('#pageableDiv').hide();
+									}else{
+										$('#pageableDiv').show();							
+									}
+								}
+							}
+						}					
+						runHtmlScripts(res);						
+					}catch(ex){
+					}finally{
+						moreMenusisLoaded=true;                    
+					}
+					groupButtonAuthentication();
+					if(breadmenuID.length>0){//面包削导航来的，只需要重新生成面包削即可
+						var menuitem=undefined;
+						var panel = $('.zte-theme-panel');
+						var navPosOption = $('.nav-pos-direction', panel).val();
+						//var items=$("a[id='"+breadmenuID+"']");
+						var items = undefined;
+						if (navPosOption === "vertical"){ //从垂直菜单里面找
+							items=$("#page-sidebar-menu a[id='"+breadmenuID+"']");
+							
+						}else{//从水平菜单里面找
+							items=$(".hor-menu a[id='"+breadmenuID+"']");
+						}
+						if (!items || items.length < 1) {
+							items=$(".page-content a[id='"+breadmenuID+"']");
+						}						
+						if(items.length>0){
+							for(var i=0;i<items.length;i++){
+                                if($(items[i]).parentsUntil('.more-botton-zone .btn-group').hasClass('dropdown-menu')){
+									menuitem=$(items[i]);
+									break;
+								}
+								if($(items[i]).parentsUntil('#pageableDiv').hasClass('row1')){
+									menuitem=$(items[i]);
+									break;
+								}								
+							}
+						}
+						if(!!menuitem&&menuitem.length>0)
+							dealBreadcrumbBtnMenuItemClick(menuitem,e); 	
+					}                    
+                },
+				error: function (xhr, ajaxOptions, thrownError) {//加载操作菜单失败!com_zte_ums_ict_framework_ui_loadmenuerror
+                    $('.page-breadcrumb').append('<h4>'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');
+					moreMenusisLoaded=true;
+            }
+        });
+    }        
+    
+	//处理多tab也场景   ----redirect 该标签暂时保留,不建议使用了
+    dealMultTabPage=function(clickedObject){
+            var url = clickedObject.attr("href");
+            if(!url||url.length<2)
+              return;
+           var redirect=clickedObject.attr("redirect"); //处理多tab页面的需求
+           if (!!redirect&&redirect.length>0){
+                 var miframe=_iframe==""?"page-mainIframe": _iframe;
+                 var pagemyIframe=$('.page-content .page-content-body .'+miframe); //.page-mainIframe
+                 //var pagemyIframe=$('.page-content .page-content-body .page-mainIframe');
+                 var oldhref="";
+			           if(pagemyIframe&&pagemyIframe.length>0){
+                    oldhref=pagemyIframe.attr("src");
+                    if(url.split("?")[0]==oldhref.split("?")[0])
+                    {
+                      eval(redirect);                      
+                      dealBreadcrumb(clickedObject,false,e);
+                      return true; 
+                    }                    
+                }
+            };
+            return false;   
+    };	
+    //处理主菜单面包削导航
+    var globleCurrentBreadcrumb="";
+	var globleCurrentMainMenuItemID="";
+	var dhByBreadcrumb = false;
+    var dealBreadcrumb=function(clickedObject,notGenUID,e){//notGenUID为true就不重新生成id
+		var mbreadcrumb=$('.breadcrumbUl');
+		ZteFrameWork.setPageTitle(clickedObject.find('span').text().trim());              
+		var clieckedObj= clickedObject.parent('li');
+		if(clieckedObj.length == 0){ //分页式更多菜单，a链接的父亲是div
+			clieckedObj= clickedObject.parent('div');
+		}
+		  //如果点击的是F菜单的竖菜单，还需要找到横菜单上的对应父亲加入到clieckedObj
+		var navPosOption = $('.nav-pos-direction', panel).val();			 
+		var parentid = clickedObject.attr('hparentid');						  			 
+		var breadcrumGroupButtonSrc=clickedObject.attr("breadcrumGroupButtonSrc"); 
+		globleCurrentMainMenuItemID=clickedObject.attr("id"); 
+		var mhmtl="";
+		var url="";
+		var tempObj=null;
+		//var breadChangeType = e? (e.data ? e.data.breadChangeType:null):null;
+		if( dhByBreadcrumb ){
+			mhmtl = dealClickBreadcrumb(clieckedObj);
+			dhByBreadcrumb = "";
+		}else{
+			while  (clieckedObj&&clieckedObj.length>0){
+			   if(clieckedObj.children('a')){
+					if(!notGenUID){
+						url=ZteFrameWork.getUniqueID("aid");//+Math.floor(Math.random() * (new Date()).getTime());
+						clieckedObj.children('a').attr("name",url);
+					}else{
+						url=clieckedObj.children('a').attr("name");
+					}
+					tempObj=clieckedObj.clone();
+					tempObj.children('a').removeClass('iframe');
+					tempObj.children('a').removeClass('active');
+					tempObj.children('a').attr("href","javascript:ZteFrameWork.goToURL('"+url+"');");
+					var arrowdown = $(".fa-angle-down", tempObj.children('a'));
+					if (arrowdown) {
+						arrowdown.remove();
+					}
+					if(tempObj.children('a').length>0){
+						  mhmtl=tempObj.children('a')[0].outerHTML+"<i class='fa fa-angle-right'></i>"+mhmtl;
+					}                            
+					//如果是F菜单和横菜单的子竖菜单点击，需要做特殊处理
+					if( clieckedObj.parent('ul').attr('id') == fMenuSiderDivId || clieckedObj.parent('ul').attr('id') == megaSiderDivId){																		
+						var id = clieckedObj.children( 'a' ).attr('hparentid');									
+						//判断是F菜单还是横菜单
+						var megaMenu = null;
+						if(navPosOption ==  zteframework_menu_horizontal){
+							magaMenu = $('#'+megaDivId);
+						}else if(navPosOption ==  zteframework_menu_fmenu){
+							magaMenu = $('#'+fMenuMegaDivId);
+						}
+						clieckedObj =  $("a[id=" + id + "]" , magaMenu).parent('li');								
+					}else{
+						clieckedObj=clieckedObj.parents('li');
+					}	
+			   }
+			}			  
+			if(clieckedObj[0]&&clieckedObj[0].length>0) {
+				mhmtl=clieckedObj.children('a')[0].outerHTML+"<i class='fa fa-angle-right'></i>"+mhmtl;
+			}
+		}		
+		mbreadcrumb.empty();
+		$('.more-botton-zone').empty();
+		globleCurrentBreadcrumb=mhmtl;
+		store("globleCurrentBreadcrumb",globleCurrentBreadcrumb);
+		mbreadcrumb.append(mhmtl);			  
+		if(breadcrumGroupButtonSrc&&breadcrumGroupButtonSrc.length>0){				  
+			getBreadcrumbRightButtons(breadcrumGroupButtonSrc,e);
+		}else{
+			$('#pageableDiv').hide();
+		}                            
+              
+    };	
+	//面包屑发起的点击，就不重新生成面包屑，只是把该面包屑的后续节点移出。
+	var dealClickBreadcrumb = function(clieckedObj){
+		var index = globleCurrentBreadcrumb.indexOf(clieckedObj.children('a').attr("name"));
+		if( index > -1 ){//截取
+			var indexofSign = globleCurrentBreadcrumb.indexOf("<i class='fa fa-angle-right'>",index);
+			var newBreadcrumb = globleCurrentBreadcrumb.substring(0,indexofSign) + "<i class='fa fa-angle-right'></i>";
+			return newBreadcrumb;
+		}	
+	}		
+    //处理面包削中菜单点击后的导航(更多菜单的面包屑)
+    var dealBreadcrumbBtnGroupMenus=function(clickedObject,notGenUID , e ){
+        var mbreadcrumb=$('.breadcrumbUl');
+		var clieckedObj= clickedObject.parent();			  
+        var breadcrumGroupButtonSrc=clickedObject.attr("breadcrumGroupButtonSrc");
+        var mhmtl="";
+        var url="";
+        var tempObj=null;
+		var menuid=clickedObject.attr("id");
+		if (!breadcrumbBtnMenus.contains(menuid)) {//把当前面包削中的菜单id和该子菜单对应的父菜单关联缓存起来
+			breadcrumbBtnMenus.add(menuid,globleCurrentMainMenuItemID);
+		}			 
+		while  (clieckedObj&&clieckedObj.length>0){ 
+			tempObj=clieckedObj.clone();
+			if(tempObj.children('a')){
+				tempObj.children('a').removeClass('iframe');
+				url=tempObj.children('a').attr("href");
+				tempObj.children('a').attr("onclick","ZteFrameWork.openbreadcrumbLink($(this),event);");
+				var tempdiv = tempObj.children('a').children('div');
+				if( tempdiv.length > 0 ){
+					var innerofDiv = tempdiv[0].innerHTML;
+					tempdiv.remove();
+					tempObj.children('a')[0].innerHTML = innerofDiv;
+				} 
+				if(tempObj.children('a').length>0){                   
+					  mhmtl=tempObj.children('a')[0].outerHTML+"<i class='fa fa-angle-right'></i>"+mhmtl;
+				}
+				clieckedObj=clieckedObj.parents('li');
+			}
+			   
+		}
+		if(clieckedObj[0]&&clieckedObj[0].length>0) {
+			mhmtl=clieckedObj.children('a')[0].outerHTML+"<i class='fa fa-angle-right'></i>"+mhmtl;
+		}
+		  
+		if(breadcrumGroupButtonSrc&&breadcrumGroupButtonSrc.length>0){
+			getBreadcrumbRightButtons(breadcrumGroupButtonSrc,true);
+		}else{
+			$('#pageableDiv').hide();
+		}
+		mbreadcrumb.empty();
+		var category= clickedObject.attr("category");//处理菜单中定义的Category属性
+		if(category&&category.length>0){//处理Category属性
+			var newIpPort=_menuCategorys.items(category);
+			if(newIpPort&&newIpPort.ipTitle&&newIpPort.ipTitle.trim()!=""){//如果找到了
+				mhmtl=newIpPort.ipTitle+'<i class="fa fa-angle-right"></i>'+mhmtl;
+			}				
+		}
+		mhmtl=globleCurrentBreadcrumb+mhmtl;
+		mbreadcrumb.append(mhmtl);		
+	};
+	var isMoreMenuItemClick = false;
+	var dealBreadcrumbBtnMenuItemClick=function(clickObj,e){		
+		dealScrollTo();
+		var menuItemID=clickObj.attr("id");
+		if(!!menuItemID&&menuItemID.length>0){
+			_setLocationHash(menuItemID);
+			var breadmenuID=e&&e.data&&e.data.breadcrumbBtnMenuItem&&e.data.breadcrumbBtnMenuItem.length>0?e.data.breadcrumbBtnMenuItem:"";
+			_hashSource=breadmenuID&&breadmenuID.length>0?"":"dhByInterface";//hash进来的，不是导航进来的。
+		}
+		if(!(e&&e.breadcrumbBtnMenuItem&&e.breadcrumbBtnMenuItem.length>0)){//如果仅仅是tab跳转设置bread进来的，就框架不处理菜单点击，直接重新建立bread即可
+			dealstartPageLoading();                
+			dealIframe(clickObj,e);
+		}
+		dealBreadcrumbBtnGroupMenus(clickObj,false,e); 	
+	}
+    // 固定边栏布局时计算边栏高度.
+    var _calculateFixedSidebarViewportHeight = function () {
+        var viewport = _getViewPort();
+        var sidebarHeight =viewport.height - $('.header').height() + 1;
+        if ($('body').hasClass("page-footer-fixed")) {
+            sidebarHeight = sidebarHeight - (!$('.footer')||$('.footer').length<=0)?0:$('.footer').outerHeight();
+        }
+        return sidebarHeight;
+    }
+    // 处理固定边栏
+    var dealFixedSidebar = function () {
+        var menu = $('.page-sidebar-menu');
+        if (menu.parent('.slimScrollDiv').size() === 1) { 
+            menu.removeAttr('style');
+            $('.page-sidebar').removeAttr('style');
+        }
+
+       if ($('.page-sidebar-fixed').size() === 0) {
+            dealSidebarAndContentHeight();
+            return;
+        }
+
+        var viewport = _getViewPort();
+        if (viewport.width >= zteframework_smallView) {
+            var sidebarHeight = _calculateFixedSidebarViewportHeight();
+            dealSidebarAndContentHeight();
+        }
+    }
+    // 固定边栏时处理菜单 hover 效果.
+    var dealFixedSidebarHoverable = function () {
+        if ($('body').hasClass('page-sidebar-fixed') === false) {
+            return;
+        }
+        $('.page-sidebar').off('mouseenter').on('mouseenter', function () {
+             dealSiderBarMouseenter();
+        });
+        $('.page-sidebar').off('mouseleave').on('mouseleave', function () {
+             dealSiderBarMouseLeave();
+        });
+    }
+    var dealSiderBarMouseenter=function(){
+            var body = $('body');
+            var siderbar=$('.page-sidebar');
+            if ((body.hasClass('page-sidebar-closed') === false || body.hasClass('page-sidebar-fixed') === false) || $(this).hasClass('page-sidebar-hovering')) {
+                return;
+            }
+            body.removeClass('page-sidebar-closed').addClass('page-sidebar-hover-on');
+            var siderbartoggle=$('.sidebar-toggler');
+            
+            if (body.hasClass("page-sidebar-reversed")) {
+                siderbar.width(_sidebarWidth);
+                dealSiderBarWidthChange();
+            } else {
+                siderbar.addClass('page-sidebar-hovering');
+                siderbar.animate({
+                    width: _sidebarWidth
+                }, 350, '', function () {
+                    siderbar.removeClass('page-sidebar-hovering');
+                    dealSiderBarWidthChange();
+                });
+            }
+    }
+    var dealSiderBarMouseLeave=function(){
+            var body = $('body');
+            if ((body.hasClass('page-sidebar-hover-on') === false || body.hasClass('page-sidebar-fixed') === false) || $(this).hasClass('page-sidebar-hovering')) {
+                return;
+            }
+            var siderbar=$('.page-sidebar');
+            var siderbartoggle=$('.sidebar-toggler');
+            if (body.hasClass("page-sidebar-reversed")) {
+                body.addClass('page-sidebar-closed').removeClass('page-sidebar-hover-on');
+                siderbar.width(_sidebarCollapsedWidth);
+                if(siderbartoggle){
+                     siderbartoggle.removeAttr('style');
+                }
+                dealSiderBarWidthChange();
+            } else {
+                siderbar.addClass('page-sidebar-hovering');
+                siderbar.animate({
+                    width: _sidebarCollapsedWidth
+                }, 350, '', function () {
+                    body.addClass('page-sidebar-closed').removeClass('page-sidebar-hover-on');
+                    dealSiderBarWidthChange();
+                    siderbar.removeClass('page-sidebar-hovering');
+                    if(siderbartoggle){         
+                        siderbartoggle.removeAttr('style');
+                    }
+                });
+            }
+    
+    }
+    //处理style css
+    var dealAddStyle=function(element, property, value, important) {
+		var styleText=element.attr('style')?element.attr('style'):"";
+		styles=styleText.split(";");
+		var find="";
+		for(i=0;i<styles.length;i++){
+			if(styles[i].indexOf(property)>=0){
+				find=styles[i];//看是否已经添加过,如果添加过就需要替换掉
+				break;
+			}
+		}
+		styleText=find.length>0?styleText.replace(find,""):styleText;
+		styleText=(styleText + ';'+property + ':' + value + ((important) ? ' !important' : '') + ';').replace(/;;/g,";");
+        element.attr('style',styleText );
+    }
+    var dealSiderBarWidthChange=function(){
+	
+    }
+    // 处理边栏菜单切换时的关闭和隐藏.
+    var dealSidebarToggler = function () {
+        var viewport = _getViewPort();
+        if (getCookie('sidebar_closed') === '1' && viewport.width >= zteframework_smallView) {
+            $('body').addClass('page-sidebar-closed');
+        }
+        $('.page-sidebar, .sidebar-toggler').on('click', '.sidebar-toggler', function (e) {
+              e.preventDefault();
+              var body = $('body');
+              var sidebar = $('.page-sidebar');
+              if(body.hasClass('page-sidebar-closed')){
+                  $(this).removeAttr('style');  
+              }           
+        } );        
+        $('.page-sidebar, .header').on('click', '.sidebar-toggler', function (e) {
+            var body = $('body');
+            var sidebar = $('.page-sidebar');
+            if ((body.hasClass("page-sidebar-hover-on") && body.hasClass('page-sidebar-fixed')) || sidebar.hasClass('page-sidebar-hovering')) {
+                body.removeClass('page-sidebar-hover-on');
+                sidebar.css('width', '').hide().show();
+                dealSidebarAndContentHeight(); //fix content & sidebar height
+                setCookie('sidebar_closed', '0');
+                dealSiderBarWidthChange(); 
+                e.stopPropagation();
+                runResponsiveHandlers();
+                return;
+            }
+            $(".sidebar-search", sidebar).removeClass("open");
+			var panel = $('.zte-theme-panel');
+			var sidebarPosOption = $('.sidebar-pos-option', panel).val();
+			var pcontent = $("[class='page-content']");
+            if (body.hasClass("page-sidebar-closed")) {
+                body.removeClass("page-sidebar-closed");
+                if (body.hasClass('page-sidebar-fixed')) {
+                    sidebar.css('width', '');                     
+                }
+				setCookie('sidebar_closed', '0');
+				pcontent.css("marginLeft",_sidebarWidth);
+				dealSiderBarWidthChange(); 
+            } else {
+                body.addClass("page-sidebar-closed");
+                $(this).removeAttr('style');
+				setCookie('sidebar_closed', '1');
+				pcontent.css("marginLeft", _sidebarCollapsedWidth);
+				dealSiderBarWidthChange(); 
+            }
+			//针对侧边栏伸缩的情况需加入对.page-content的判断。
+            dealSidebarAndContentHeight(true); 
+            runResponsiveHandlers();
+        });
+    }
+    // 处理水平菜单
+    var dealHorizontalMenu = function () {
+        $('.header').on('click', '.hor-menu .hor-menu-search-form-toggler', function (e) {
+            if ($(this).hasClass('off')) {
+                $(this).removeClass('off');
+                $('.header .hor-menu .search-form').hide();
+            } else {
+                $(this).addClass('off');
+                $('.header .hor-menu .search-form').show();
+            }
+            e.preventDefault();
+        });
+		// 处理水平菜单 处理header下拉菜单中的菜单连接，显示在iframe中
+        $('.header').on('click', ' li > a.iframe', function (e) {
+			//dealMenuItemClick($(this),e,"header"); 
+			e.preventDefault();
+			var menuItemID=$(this).attr("id");
+			if(!!menuItemID&&menuItemID.length>0){
+				_setLocationHash(menuItemID);	
+				_hashSource="dhByInterface";
+			}//else{
+			_isClicked=true;
+			   dealMenuItemClick($(this),e,"header"); 
+			//}		
+        });   
+        //处理TAB点击
+        $('.header').on('click', '.hor-menu a[data-toggle="tab"]', function (e) {     
+            e.preventDefault();
+            var nav = $(".hor-menu .nav");
+            var active_link = nav.find('li.current');
+            $('li.active', active_link).removeClass("active");
+            $('.selected', active_link).remove();
+            var new_link = $(this).parents('li').last();
+            new_link.addClass("current");
+            new_link.find("a:first").append('<span class="selected"></span>');
+        });
+    }	
+	// 增加一个对服务端的心跳
+	var doHeartbeat = function() {		
+		//心跳超时次数		
+		var heartBeatTimes = 0;
+		return setInterval(function() {
+			var userName;
+			if( userName == null ){
+				var userName = ZteFrameWork_conf.userName;
+			}
+			var heartUrl = FrameConst.REST_HEARTBEAT + "?username=" + encodeURIComponent(userName);
+			$.ajax(heartUrl, {
+				dataType : "text",
+				cache : false
+			}).done(function(data) {
+				// if (data != "true") { //收到不属于取值范围内的回复，说明出现不可预知情况，取消心跳。是原framework.js中的逻辑，比较奇怪，先保留注释。
+					// disableHeartbeat();
+				// }
+				//收到心跳回应消息，心跳超时次数置0
+				if( data == "true" ){
+					heartBeatTimes = 0;	
+				}				
+			});
+			heartBeatTimes++;
+			//心跳超时6次即1分钟，转到登录界面，认为链路断。
+			if(heartBeatTimes >= 6){
+				disableHeartbeat();
+				//console.log(com_zte_ums_aos_framework_ui_heartbeat_timeout);										   
+				bootbox.alert($.i18n.prop('com_zte_ums_aos_framework_ui_heartbeat_fail'), function () {                    
+					window.location.replace("login.html");
+				});
+			}
+		}, 10000);
+	};	
+	if( FrameConst.do_heartbeat ){
+		var heartbeatTimer = doHeartbeat();
+	}
+	window.enableHeartbeat = function() {
+		if (!heartbeatTimer) {
+			//重新启动心跳功能，心跳超时次数置0
+			heartBeatTimes = 0;
+			heartbeatTimer = doHeartbeat();
+			return "Enabled";
+		}
+		return "Already enabled!";
+	};
+	window.disableHeartbeat = function() {
+		if (heartbeatTimer) {
+			clearInterval(heartbeatTimer);
+			heartbeatTimer = null;
+			return "Disabled";
+		}
+		return "Already disabled!";
+	};	
+	window.doLogout = function(){
+		window.location=FrameConst.REST_LOGOUT;
+	};
+    //处理ict注销确认
+    $('#trigger_logout').click(function(){
+                bootbox.confirm($.i18n.prop('com_zte_ums_ict_framework_ui_confirmlogout'), function(result) { //你确认要注销吗?
+                   if(result){
+                     doLogout();
+                    }
+                }); 
+            });
+    // Handle full screen mode toggle
+    var isscreenFull=false;
+    var dealFullScreenMode = function() {
+        // 处理全屏事件
+        function toggleFullScreen() {
+            if(!screenfull.supportsFullScreen){//不支持全屏
+                if (isIE&&typeof window.ActiveXObject !== "undefined") { // Older IE.
+                    var wscript = new ActiveXObject("WScript.Shell");
+			              if (wscript !== null) {
+				                wscript.SendKeys("{F11}");
+                        isscreenFull=!isscreenFull;                                                
+			               }
+		            }else{
+                    isscreenFull=screenfull.supportsFullScreen;
+                }; 
+            }else{
+              screenfull.isFullScreen?screenfull.exitFullScreen():screenfull.requestFullScreen();
+              isscreenFull= screenfull.isFullscreen;
+            }
+            setTimeout(function(){
+              if(isscreenFull){
+                  $("#fullscreen_label").text($.i18n.prop('com_zte_ums_ict_framework_ui_group_exitfullscreen'));
+              }else{
+                  $("#fullscreen_label").text($.i18n.prop('com_zte_ums_ict_framework_ui_group_fullscreen'));
+              }
+           },500);    
+        } 
+                 
+        $('#trigger_fullscreen').click(function() {
+            toggleFullScreen();
+        });
+    }    
+    //清理当前正在显示的iframe之外缓存的iframe，
+    var dealClearCachedIframes=function(isall){
+            if (cachedIframes.count()>0) {
+                for (var i in cachedIframes.hash()) {
+                    var pagemyIframe=$('.page-content .page-content-body .'+i);			      
+                    if(pagemyIframe&&pagemyIframe.length>0){
+                         if(isall==true){
+							pagemyIframe.attr("src","");
+						    pagemyIframe.remove();
+						 }else if(i!=_iframe)
+							pagemyIframe.attr("src","");
+        					pagemyIframe.remove();						
+					}
+				}
+           }
+           cachedIframes.clear();
+		   if (cachedIframesObject.count()>0) {//清理缓存的iframe实体对象。
+                for (var i in cachedIframesObject.hash()) {
+                    if(i!=_iframe)
+        				cachedIframesObject.remove(i);
+				}
+           }
+        }
+    var lastSelectedLayout = '';    
+    var dealTheme = function () {
+        var panel = $('.zte-theme-panel');
+        if ($('body').hasClass('page-boxed') == false) {
+            $('.layout-option', panel).val("fluid");
+        }
+        $('.sidebar-option', panel).val("default");
+		$('.language-option', panel).val(defaultLanage);
+        $('.header-option', panel).val("fixed");
+        $('.footer-option', panel).val("default");
+        if ( $('.sidebar-pos-option').attr("disabled") === false) {
+            $('.sidebar-pos-option', panel).val(ZteFrameWork.isRTL() ? 'right' : 'left');
+        }		
+        var _resetLayout = function () {
+            dealResetLayout();
+        }   
+        var _setLayout = function () {
+			dealSetLayout();
+        }
+        var setColor = function (color) {
+            var color_ = (ZteFrameWork.isRTL() ? color + '-rtl' : color);
+            $('#style_color').attr("href", ICTFRAME_CONST_THEME_COLOR_CSS_PREFFIX + color_ + ".css");
+            setCookie('style_color', color);
+			syncColorCSS();
+        }		
+        $('.toggler', panel).click(function () {
+            $('.toggler').hide();
+            $('.toggler-close').show();
+            $('.zte-theme-panel > .theme-options').show();
+        });
+
+        $('.toggler-close', panel).click(function () {
+            $('.toggler').show();
+            $('.toggler-close').hide();
+            $('.zte-theme-panel > .theme-options').hide();
+        });
+        $('.theme-colors > ul > li', panel).click(function () {
+            var color = $(this).attr("data-style");
+            setColor(color);
+            $('ul > li', panel).removeClass("current");
+            $(this).addClass("current");
+        });
+        $('.layout-option,.header-option, .sidebar-option, .footer-option, .sidebar-pos-option, .nav-pos-direction', panel).change(_setLayout);
+		if (getCookie('style_color') != undefined) {
+			setColor(getCookie('style_color'));
+		}
+		$('.language-option', panel).change(function(){
+			var languageOption = $('.language-option', panel).val();
+			setCookie('language-option', languageOption);		
+			window.location.reload();
+		});		
+    }	
+	var dealResetLayout = function () {
+            $("body").
+            removeClass("page-boxed").
+            removeClass("page-footer-fixed").
+            removeClass("page-sidebar-fixed").
+            removeClass("page-header-fixed").
+            removeClass("page-sidebar-reversed");
+            $('.header > .header-inner').removeClass("container");
+            if ($('.page-container').parent(".container").size() === 1) {
+                $('.page-container').insertAfter('body > .clearfix');
+            }
+            if ($('.footer > .container').size() === 1) {
+                $('.footer').html($('.footer > .container').html());
+            } else if ($('.footer').parent(".container").size() === 1) {
+                $('.footer').insertAfter('.page-container');
+            }
+            $('body > .container').remove();			
+    }	
+    /*
+     * 此方法在客户端初始化和设置面板上选择菜单方向的时候用。
+     * param navPosOption
+     */
+	var dealNavPos = function(navPosOption) {
+		// 横竖边栏切换功能禁用，则返回
+		var panel = $('.zte-theme-panel');
+		if ($('.nav-pos-direction', panel).attr("disabled") == "disabled") {
+			return;
+		}
+		var sidermenu = $("#page-sidebar-menu");
+		var hormenu = $("#main_hormenu");
+        var sidermenu = $("#page-sidebar-menu");
+        var hormenu = $("#main_hormenu");
+		var horSiderMenu = $('#' + megaSiderDivId );
+        var fhorMenu = $("#" + fMenuMegaDivId);
+        var fsiderMenu = $("#" + fMenuSiderDivId);
+		var pcontent = $("[class='page-content']");
+		if (sidermenu && sidermenu.length > 0 && hormenu && hormenu.length  > 0 && fhorMenu && fhorMenu.length  > 0) {
+			if (navPosOption === zteframework_menu_horizontal) {
+				sidermenu.css('display','none');// 侧边栏隐藏
+                fhorMenu.css('display','none');
+                fsiderMenu.css('display','none');
+				pcontent.css("marginLeft",0);
+				$("body").addClass("page-full-width");//调整内容显示
+				hormenu.css("display", "block");//显示水平菜单栏
+				// 导航位置为水平菜单时，边栏和边栏位置为默认和靠左，且将其切换功能禁用掉
+				$('.sidebar-option', panel).val("default");
+				$('.sidebar-option', panel).attr("disabled", true);
+				$('.sidebar-pos-option', panel).val("left");
+				$('.sidebar-pos-option', panel).attr("disabled", true);
+			} else if (navPosOption === zteframework_menu_vertical ) {
+				$("body").removeClass("page-full-width");
+				sidermenu.css('display','block');//侧边栏显示
+				var body = $('body');
+				if (body.hasClass("page-sidebar-closed")) {
+					pcontent.css("marginLeft", _sidebarCollapsedWidth);
+				} else {
+					pcontent.css("marginLeft", _sidebarWidth);
+				}
+				hormenu.css("display", "none");//隐藏水平菜单栏
+                fhorMenu.css('display','none');
+                fsiderMenu.css('display','none');
+				horSiderMenu.css('display','none');
+				$('.sidebar-option', panel).attr("disabled", false);
+				$('.sidebar-pos-option', panel).attr("disabled", false);
+			} else if(navPosOption === zteframework_menu_fmenu ){
+                sidermenu.css('display','none');// 侧边栏隐藏
+                hormenu.css("display", "none");//隐藏水平菜单栏
+                fsiderMenu.css('display','none');
+                fhorMenu.css('display','block');
+                pcontent.css("marginLeft",0);
+                $("body").addClass("page-full-width");//调整内容显示
+                // 导航位置为水平菜单时，边栏和边栏位置为默认和靠左，且将其切换功能禁用掉
+                $('.sidebar-option', panel).val("default");
+                $('.sidebar-option', panel).attr("disabled", true);
+                $('.sidebar-pos-option', panel).val("left");
+                $('.sidebar-pos-option', panel).attr("disabled", true);
+            }
+		}
+	}	
+    var dealSetLayout = function(){
+	    var panel = $('.zte-theme-panel');
+        var layoutOption = $('.layout-option', panel).val();  
+		var languageOption = $('.language-option', panel).val();		
+		var headerOption = $('.header-option', panel).val();
+        var footerOption = $('.footer-option', panel).val();        
+		var navPosOption = $('.nav-pos-direction', panel).val();		
+		dealNavPos(navPosOption);
+		var sidebarOption = $('.sidebar-option', panel).val();
+		var sidebarPosOption = $('.sidebar-pos-option', panel).val();
+        if (sidebarOption == "fixed" && headerOption == "default") {
+            alert($.i18n.prop('com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError'));  //页头不支持固定边栏,先固定页头才能固定边栏.
+            $('.header-option', panel).val("fixed");
+            $('.sidebar-option', panel).val("fixed");
+            sidebarOption = 'fixed';
+            headerOption = 'fixed';
+        }
+        if (sidebarOption == "fixed" && sidebarPosOption == "right") {
+            alert($.i18n.prop('com_zte_ums_ict_framework_ui_fixedsiderightpositionError'));  //固定边栏情况下，边栏不能靠右。.
+            $('.sidebar-pos-option', panel).val("left");
+            sidebarPosOption = 'left';
+        }
+        dealResetLayout(); // reset layout to default state
+        if (layoutOption === "boxed") {
+                $("body").addClass("page-boxed");
+                // set header
+                $('.header > .header-inner').addClass("container");
+                var cont = $('body > .clearfix').after('<div class="container"></div>');
+                // set content
+                $('.page-container').appendTo('body > .container');
+                // set footer
+                if (footerOption === 'fixed') {
+                    $('.footer').html('<div class="container">' + $('.footer').html() + '</div>');
+                } else {
+                    $('.footer').appendTo('body > .container');
+                }
+        }		
+        if (lastSelectedLayout != layoutOption) {
+                runResponsiveHandlers();
+        }
+        lastSelectedLayout = layoutOption;
+            //header
+        if (headerOption === 'fixed') {
+                $("body").addClass("page-header-fixed");
+                $(".header").removeClass("navbar-static-top").addClass("navbar-fixed-top");
+        } else {
+                $("body").removeClass("page-header-fixed");
+                $(".header").removeClass("navbar-fixed-top").addClass("navbar-static-top");
+        }
+            //sidebar
+        if ($('body').hasClass('page-full-width') === false) {
+                if (sidebarOption === 'fixed') {
+                    $("body").addClass("page-sidebar-fixed");
+                } else {
+                    $("body").removeClass("page-sidebar-fixed");
+                }
+        }
+            //footer 
+        if (footerOption === 'fixed') {
+                $("body").addClass("page-footer-fixed");
+        } else {
+                $("body").removeClass("page-footer-fixed");
+        }
+            //sidebar position
+        if (ZteFrameWork.isRTL()) {
+                if (sidebarPosOption === 'left') {
+                    $("body").addClass("page-sidebar-reversed");
+                    $('#frontend-link').tooltip('destroy').tooltip({placement: 'right'});
+                } else {
+					var pcontent = $("[class='page-content']");
+					pcontent.css("marginLeft",0);//侧边栏靠右，则左边内容填充为0
+                    $("body").removeClass("page-sidebar-reversed");
+                    $('#frontend-link').tooltip('destroy').tooltip({placement: 'left'});
+                }
+        } else {
+                if (sidebarPosOption === 'right') {
+					var pcontent = $("[class='page-content']");
+					pcontent.css("marginLeft",0);//侧边栏靠右，则左边内容填充为0
+                    $("body").addClass("page-sidebar-reversed");
+                    $('#frontend-link').tooltip('destroy').tooltip({placement: 'left'});
+                } else {
+                    $("body").removeClass("page-sidebar-reversed");
+                    $('#frontend-link').tooltip('destroy').tooltip({placement: 'right'});
+                }
+        }
+        dealSidebarAndContentHeight();   
+        dealFixedSidebar(); 
+        dealFixedSidebarHoverable(); 		
+		dealSiderBarWidthChange();
+		setCookie('layout-option', layoutOption);
+		setCookie('language-option', languageOption);
+		setCookie('header-option', headerOption);
+		setCookie('sidebar-option', sidebarOption);
+		setCookie('sidebar-pos-option', sidebarPosOption);
+		setCookie('nav-pos-direction', navPosOption);
+    }
+	var setCookie = function (key, value) {
+	    if (store) {
+	        store(key, value);
+	    }
+	}	
+	var getCookie = function (key) {
+	    if (store) {
+	        return store(key);
+	    } else {
+	        return undefined;
+	    }
+	}	
+	/*下面处理前进后退和锚点访问*/
+	var _getLocationHash = function() {
+		    return location.hash.replace("#_", "");
+	}
+	/*统一入口设置锚点*/
+	var _setLocationHash = function(menuItemID) {
+		    location.hash = getLocationHashByMenuId(menuItemID);
+	}
+    var getLocationHashByMenuId = function(menuItemID){
+        return "#_" + menuItemID;
+    }
+	// hash control
+	var loadCurrentHash = function(e,data){
+		var locationhash = _getLocationHash();	//important
+		if(!!locationhash&&locationhash.length>0){
+			if(_hashSource.trim()=="dhByInterface"){
+				_hashSource="";
+			}else{
+				processChangedHash(locationhash,data);
+			}
+		}
+	}	
+	// hash control  这种写法安全点	
+	var processChangedHash = function(path) {
+		var id = path;
+		var action = undefined;
+		var spIndex = path.indexOf("/");
+		if(spIndex != -1) {
+			id = path.substring(0,spIndex);
+			action = path.substring(spIndex+1);
+		}
+		ZteFrameWork.goToURLByIDAndNewAction(id,action);
+	}
+	var syncColorCSS=function(){//注册皮肤切换事件处理函数，处理iframe中的皮肤切换
+		var pagemyIframe=null;
+		if (cachedIframes.count()>0) {
+            for (var i in cachedIframes.hash()) {                			      
+			    pagemyIframe=$('.page-content .page-content-body .'+i);
+			    if(pagemyIframe&&pagemyIframe.length>0){
+					ZteFrameWork.SyncCSS(pagemyIframe[0],1,"");
+				}
+            }
+        }
+	}	
+	var getCurrentVisibleIframe=function(){
+		var pagemyIframe=null;
+        if (cachedIframes.count()>0) {
+            for (var i in cachedIframes.hash()) {                			      
+			    if(cachedIframes.items(i)===1){
+					pagemyIframe=$('.page-content .page-content-body .'+i);
+			    }
+            }
+        }
+		return pagemyIframe;		                                
+    }
+	//处理跨域请求代理，通过该代理进行iframe间传递参数，注意这里的代理页面proxy.html必须部署到要跨域的对端域的服务器web根目录下
+	var dealCrossProxy=function(ifrm,crossproxysrc,ifmHeadlins,flag){//crossproxysrc这个是proxy.html对应的url根路径
+		var url=$.url(ZteFrameWork.getCurrentScript(document));
+		var proxyHtmlPath=url.attr("directory")+"proxy/proxy.html"//这中情况适用于使用了该界面集成框架的应用系统
+	    var _ifmProxy=$('<iframe id="ifm_Proxy" name="ifm_Proxy" oldproxyorigin="'+crossproxysrc+'" src="'+crossproxysrc+proxyHtmlPath+'" style="border: 0px; margin: 0px; padding: 0px; width: 100%; display:none;" ></iframe>');
+		var _ifm=$('#ifm_Proxy');
+		_ifm.hide();
+		var pageContentBody=$('.page-content .page-content-body');
+		var linksrcs=new Array();
+		var linksids=new Array();
+		var linktyps=new Array();
+		var _src="";
+		for (i=0;i<ifmHeadlins.length;i++){
+			if(typeof ifmHeadlins[i].link.href!== "undefined"){
+				_src=ifmHeadlins[i].link.href;
+				linktyps.push("css");			
+			}
+			else if(typeof ifmHeadlins[i].link.src!== "undefined"){
+				if(!!ifmHeadlins[i].link.src&&ifmHeadlins[i].link.src.length>0){
+					_src=ifmHeadlins[i].link.src;
+					linktyps.push("javascriptfile");
+				}else{
+					_src=ifmHeadlins[i].link.text;
+					linktyps.push("javascripttext");
+				}
+			}else{
+				linktyps.push("undefined");
+			}
+			linksrcs.push(_src);
+			linksids.push({"pos":ifmHeadlins[i].pos,"scope":ifmHeadlins[i].scope,"id":ifmHeadlins[i].link.id});
+		}
+		var parm={iFrame:ifrm,cssLinktyps:linktyps,cssLinksrcs:linksrcs,cssLinkids:linksids,origin:crossproxysrc,flag:flag};
+		if(_ifm&&_ifm.length<=0){//没有添加过
+		    _ifmProxy.appendTo(pageContentBody);
+			_ifmProxy.one('load',parm,function(e){ 
+			    var data={iFrame:e.data.iFrame,cssLinktyps:e.data.cssLinktyps,cssLinksrcs:e.data.cssLinksrcs,cssLinkids:e.data.cssLinkids,flag:flag};
+				$('#ifm_Proxy')[0].contentWindow.postMessage(data,e.data.origin);//window.location.origin
+			});
+		}else if(_ifm.attr("oldproxyorigin")!=crossproxysrc){//代理已经添加过了，看是否是同一个网站的代理，如果不是需要重新加载
+			_ifm.attr("src","");
+			_ifm.attr("oldproxyorigin",crossproxysrc);
+			_ifm.one('load',parm,function(e){ 
+			    var data={iFrame:e.data.iFrame,cssLinktyps:e.data.cssLinktyps,cssLinksrcs:e.data.cssLinksrcs,cssLinkids:e.data.cssLinkids,flag:flag};
+				$('#ifm_Proxy')[0].contentWindow.postMessage(data,e.data.origin);//window.location.origin
+			});
+			_ifm.attr("src",_ifmProxy.attr("src"));
+		}else{//已经添加过，直接触发消息发送即可		
+			var data={iFrame:parm.iFrame,cssLinktyps:parm.cssLinktyps,cssLinksrcs:parm.cssLinksrcs,cssLinkids:parm.cssLinkids,flag:flag};
+			_ifm[0].contentWindow.postMessage(data,parm.origin);//window.location.origin
+		}
+	}
+    return {  
+        init: function () {
+			if(zte_http_headers){
+				store("zte_http_headers",zte_http_headers);
+			}
+            dealInit(); 
+            dealResponsiveOnResize(); 
+            dealResponsiveOnInit(); 
+            dealClearCachedIframes(true); ////清理当前正在显示的iframe之外缓存的iframe，
+			breadcrumbBtnMenus.clear();
+            dealFixedSidebar(); // deals fixed sidebar menu
+            dealFixedSidebarHoverable(); // deals fixed sidebar on hover effect 
+            dealSidebarMenu(); // deals main menu
+            dealHorizontalMenu(); // deals horizontal menu
+            dealSidebarToggler(); // deals sidebar hide/show            
+            dealTheme(); // deals style customer tool		
+			dealSetLayout();			
+			$(function() {
+				$(window).on('hashchange',function(){
+                    loadCurrentHash();
+                });
+			});            
+            dealFullScreenMode(); // deals full screen
+			$("#header_dropdown_user").css('display','block');
+			$("#com_zte_ums_ict_framework_img_netnumenLogo").css('display','inline');
+			$("#com_zte_ums_ict_framework_ui_main_title").css('display','inline');
+			handeCtxMenuitem();
+        },
+        //公开清理缓存的所有Iframe的方法：isALL==true则清理所有，否则清理当前正在显示的iframe之外缓存的iframe，。
+        clearCachedIframes:function(isAll){
+          dealClearCachedIframes(isAll);
+        },
+		
+		setBaseURLRoot:function(ipportStr){//菜单url的跟ip和端口例如:http://10.74.151.122:21180
+			if (store) {
+				store('baseURLRoot', ipportStr);
+			}
+			var url = $.url(ipportStr);
+			location.hash=url.attr('fragment');
+			var auth=url.attr('query');
+			if (store) {
+				store('baseURLRootAuth', auth);
+			}
+		},
+		getBaseURLRoot:function(ipportStr){//菜单url的跟ip和端口例如:http://10.74.151.122:21180
+			var rooturl="";
+			if (store) {
+				rooturl=store('baseURLRoot');
+			}
+			return !rooturl?"":rooturl;
+		},
+		clearBaseURLRoot:function(){//菜单url的跟ip和端口例如:http://10.74.151.122:21180
+			if (store) {
+				store('baseURLRoot', "",-1);
+			}
+		},
+		setPageTitle:function(title){//设置页面标题
+			$('title').html(title+" - "+gdocTitle); 
+		},
+		getLanguage:function(){//获取语言
+			return ZteFrameWork_conf.acceptLanguage;
+		},
+        
+		getLocationHash:function(){
+			return _getLocationHash();
+		},
+		setSceneURLRootPath:function(sceneURLRootPath){
+			if(sceneURLRootPath&&sceneURLRootPath.trim().length>0){//如果定义了场景的全局参数
+				_sceneURLRootPath=sceneURLRootPath.trim();
+				if(_sceneURLRootPath.charAt(_sceneURLRootPath.length-1)!='/')
+				{
+				   _sceneURLRootPath=_sceneURLRootPath+'/';
+				}
+			}
+		},
+        //public function to add callback a function which will be called on window resize
+        addResponsiveHandler: function (func) {
+            responsiveHandlers.push(func);
+        },
+
+		hiddenAlarmLight:function(){
+		   hideAlarmLight();
+		},
+		
+		hiddenMenu:function(){
+			hidemenu();
+		},		
+		setBreadcrumbByMenuID:function(id){
+			//var breaditem=$('#'+id);
+			var menuitem=undefined;
+			// var items=$("a[id='"+id+"']");
+			var items = undefined;
+			var panel = $('.zte-theme-panel');
+			var navPosOption = $('.nav-pos-direction', panel).val();
+			if (navPosOption === "vertical"){ //从垂直菜单里面找
+				items=$("#page-sidebar-menu a[id='"+id+"']");
+				if (!items || items.length < 1) {
+					items=$(".page-content a[id='"+id+"']");
+				}
+			}else if(navPosOption === zteframework_menu_horizontal){//从水平菜单里面找
+                items=$("#main_hormenu a[id='"+id+"']");
+                if(items.length == 0){
+                    //横菜单没有找到，再在横菜单的子菜单找一次
+                    items=$("#page-megachild-sidebar-menu a[id='"+id+"']");
+                }
+            }else if(navPosOption === zteframework_menu_fmenu){
+                items=$("#f_hormenu a[id='"+id+"']");
+                if(items.length == 0){
+                    //横菜单没有找到，再在竖菜单找一次。
+                    items=$("#page-f-sidebar-menu a[id='"+id+"']");
+                }
+            }
+			var isbreadcrumbMenuItem=false;
+			if(items.length>0){
+				for(var i=0;i<items.length;i++){
+					if($(items[i]).parentsUntil('.header-inner').hasClass('hor-menu')){
+						menuitem=$(items[i]);
+						break;
+					}else if($(items[i]).parentsUntil('.page-container').hasClass('page-sidebar')){
+						menuitem=$(items[i]);
+						break;
+                    }else if($(items[i]).parentsUntil('.more-botton-zone .btn-group').hasClass('dropdown-menu')){
+						menuitem=$(items[i]);
+						isbreadcrumbMenuItem=true;
+						break;
+					}else if($(items[i]).parentsUntil('#pageableDiv').hasClass('row1')){
+						menuitem=$(items[i]);
+						isbreadcrumbMenuItem=true;
+						break;
+					}
+				}
+			}
+			
+			if(menuitem&&menuitem.length>0){				
+				if(isbreadcrumbMenuItem){
+					dealBreadcrumbBtnGroupMenus(menuitem,false);
+				}else{
+					dealBreadcrumb(menuitem,true,null);				
+				}	
+			}else{
+				var breadcrumbBtnMenuItemParent="";
+				if(!menuitem||menuitem.length<=0){//没有找到该菜单，可能是面包削中的，需要额外处理
+					var menuItemID=id;
+					if (breadcrumbBtnMenus.contains(menuItemID)) {//有缓存
+						breadcrumbBtnMenuItemParent="#"+breadcrumbBtnMenus.items(menuItemID);
+						menuitem=$(breadcrumbBtnMenuItemParent);	
+						//_breadcrumbSource=true;
+					}
+				}
+				var parm=undefined;
+				if(breadcrumbBtnMenuItemParent&&breadcrumbBtnMenuItemParent.length>0){
+					parm={breadcrumbBtnMenuItem:menuItemID};
+				}
+				if(parm&&menuitem&&menuitem.length>0) {
+					dealBreadcrumb(menuitem,true,parm);
+				}
+			}						
+		},				
+        setSiderbarCollapseWidth:function(width){
+            _sidebarCollapsedWidth = width;
+        },
+        getSiderbarCollapseWidth:function(){
+            return _sidebarCollapsedWidth;
+        },
+        setSidebarWidth:function(width){
+            _sidebarWidth = width;
+        },
+        getSidebarWidth:function(){
+            return _sidebarWidth;
+        },
+        //2015年10月26日新增动态切换菜单的功能，这里的菜单还需要再次更换菜单项访问的ip端口信息				
+		handlBaseURL:function(url){
+			var baseURLRoot=ZteFrameWork.getBaseURLRoot();
+			if (baseURLRoot.length>0) {//2015年10月26日新增动态切换菜单的功能，这里的菜单还需要再次更换菜单项访问的ip端口信息
+					baseURLRoot=ZteFrameWork.getDomainURL(baseURLRoot);//去掉ip和port后多余的部分
+					console.log("old a link href url:"+url);
+					url=baseURLRoot+url.replace(ZteFrameWork.getDomainURL(url),"");
+					console.log("baseURLRoot:"+baseURLRoot+"      newURL:"+url);			
+			};
+			return url;
+		},
+		
+        startPageLoading: function(message) {
+            dealstartPageLoading(message);
+        },
+        stopPageLoading: function() {
+            dealstopPageLoading();
+        },
+        //public function to get a paremeter by name from URL
+        getLocationURLParameter: function (paramName,separator) {
+            var searchString = decodeURIComponent(window.location.search.substring(1)).toLowerCase(),
+                i, val, params = searchString.split(separator?separator:"&");
+			paramName=paramName.toLowerCase();
+            for (i = 0; i < params.length; i++) {
+                val = params[i].split("=");
+                if (val[0] == paramName) {
+                    return unescape(val[1]);
+                }
+            }
+            return null;
+        },
+        //public function to get a paremeter by name from URL
+        getURLParameter: function (paramName,url) {
+            var searchString = decodeURIComponent(url).toLowerCase(),
+                i, val, params = searchString.split("&");
+			paramName=paramName.toLowerCase();
+            for (i = 0; i < params.length; i++) {
+                val = params[i].split("=");
+                if (val[0] == paramName) {
+                    return unescape(val[1]);
+                }
+            }
+            return null;
+        },
+        // check for device touch support
+        isTouchDevice: function () {
+            return isTouch;
+        },
+        getUniqueID: function(prefix) {
+            return prefix+'_' + Math.floor(Math.random() * (new Date()).getTime());
+        },
+        // check IE8 mode
+        isIE8: function () {
+            return isIE8;
+        },
+        // check IE9 mode
+        isIE9: function () {
+            return isIE9;
+        },
+        //check RTL mode
+        isRTL: function () {
+            return isRTL;
+        },
+		getViewPort:function(){
+		    return _getViewPort();
+		},
+        // get layout color code by color name
+        getLayoutColorCode: function (name) {
+            if (layoutColorCodes[name]) {
+                return layoutColorCodes[name];
+            } else {
+                return '';
+            }
+        } , 
+		fixContentHeight: function () {
+            dealSidebarAndContentHeight();
+        },
+		dealAtoIframe:function(aObj,event){
+			var containerStr=aObj.parentsUntil('.page-container').hasClass('page-sidebar')?'page-sidebar':"";//
+			containerStr=aObj.parentsUntil('.header-inner').hasClass('hor-menu')?'header':containerStr;			
+			dealMenuItemClick(aObj,event,containerStr);
+			_isClicked=false;
+		},
+		getDomainURL:function(urlAddress){
+			var url = $.url(urlAddress);
+			var protocol=url.attr('protocol');
+			var host=url.attr('host');
+			var port=url.attr('port');
+			var crossOrign=protocol+"://"+host+(port.length>0?":"+port:"");	
+			return crossOrign;
+		},
+		getCurrentScript:function(doc) {//doc为 document对象
+			/*	注意该功能在其他脚本中调用时出safari获取到的脚本路径为本方法所在脚本的路径，
+				其他浏览器获取到的为调用该方法的脚本所在路径
+				取得正在解析的script节点
+			*/
+			if(doc&&doc.currentScript) { //firefox 4+
+				console.log("0、 "+doc.currentScript.src);
+				return doc.currentScript.src;
+			}
+			// 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js
+			var stack;
+			try {
+				a.b.c(); //强制报错,以便捕获e.stack
+			} catch(e) {//safari的错误对象只有line,sourceId 或者高版本还有sourceURL
+				stack = e.stack;		
+				if(e.sourceURL){//safari 浏览器没有e.stack但有e.sourceURL
+					stack=e.sourceURL;			
+				}else if(!stack && window.opera){
+					//opera 9没有e.stack,但有e.Backtrace,但不能直接取得,需要对e对象转字符串进行抽取
+					stack = (String(e).match(/of linked script \S+/g) || []).join(" ");
+				}
+				console.log("1、 "+stack);
+			}
+			if(stack) {
+				/*e.stack最后一行在所有支持的浏览器大致如下:
+				*chrome23:
+				* at http://113.93.50.63/data.js:4:1
+				*firefox17:
+				*@http://113.93.50.63/query.js:4
+				*opera12:
+				*@http://113.93.50.63/data.js:4
+				*IE10:
+				*  at Global code (http://113.93.50.63/data.js:4:1)
+				*/
+				console.log("2、 "+stack);
+				stack = stack.split( /[@ ]/g).pop();//取得最后一行,最后一个空格或@之后的部分
+				stack = stack[0] == "(" ? stack.slice(1,-1) : stack;
+				console.log("3、 "+stack);
+				return stack.replace(/(:\d+)?:\d+$/i, "");//去掉行号与或许存在的出错字符起始位置
+			}
+			if(doc){
+				var nodes = doc.getElementsByTagName("script"); //只在head标签中寻找
+				for(var i = 0, node; node = nodes[i++];) {
+					if(node.readyState === "interactive") {
+						console.log("4、 "+(node.className = node.src));
+						return node.className = node.src;
+					}
+				}
+			}
+		},
+		/*下面的flag为0表示默认不触发孙子iframe中的onload事件,为1表示要触发,flag为10则对cssSrc重复执行，其他不做重复执行*/
+		SyncCSS:function(ifrm,flag,cssSrc){//将主框架中的皮肤css应用到打开的iframe页面中
+			if(!ifrm)return;
+			var ifmHeadlins = new Array();
+			if(cssSrc&&cssSrc.length>0&&cssSrc.endWith(".css")){
+			    var _div = $('<a href="'+cssSrc+'"></a>');  
+				var csslink=document.createElement("link");			
+				csslink.href=_div[0].href;//这里同步菜单定义中cssSrc属性指定的css文件到iframe
+				 _div = null; 
+				csslink.rel="stylesheet";
+				csslink.type="text/css";
+				csslink.id="ifram_csssrc";
+				ifmHeadlins.push({"pos":"head","scope":"all","link":csslink});//pos是添加到子iframe中的位置，scope是子窗体作用返回，one表示直接子窗体，all表示嵌套所有子窗体
+			}
+			if(flag!=10){//当flag为10时下面的css和js都不执行
+				if($('#style_color').length>0){
+					var csslink=document.createElement("link");			
+					csslink.href=$('#style_color')[0].href.replace(".css","_ifrm.css");//这里同步的皮肤页面修改为原皮肤页面文件名后缀添加ifrm的css皮肤文件
+					csslink.rel="stylesheet";
+					csslink.type="text/css";
+					csslink.id="style_color";
+					ifmHeadlins.push({"pos":"head","scope":"all","link":csslink});//pos是添加到子iframe中的位置，scope是子窗体作用返回，one表示直接子窗体，all表示嵌套所有子窗体
+				}
+				// 将 font-awesome字体图标应用到模块iframe
+				if($('#font_awesome').length>0){
+					var awesomelink=document.createElement("link");			
+					awesomelink.href=$('#font_awesome')[0].href;
+					awesomelink.rel="stylesheet";
+					awesomelink.type="text/css";
+					awesomelink.id="font_awesome";
+					ifmHeadlins.push({"pos":"head","scope":"all","link":awesomelink});
+				}
+				// 将pym.js or pym.min.js应用到模块iframe
+				var pymjsObj=$("script[src*='/pym.']");//模糊查找
+				pymjsObj=pymjsObj.length>0?pymjsObj:$("script[src*='/pym1.']");
+				if(pymjsObj.length>0){
+					var pymjs=document.createElement("script");	
+					pymjs.src=pymjsObj[0].src;
+					pymjs.type="text/javascript";
+					pymjs.id=!!pymjsObj[0].id?pymjsObj[0].id:"pymjs";
+					ifmHeadlins.push({"pos":"head","scope":"one","link":pymjs});
+					pymjs=document.createElement("script");	//pym脚本文件加载后要执行new pym.Child()进行iframe子窗体实例化,便于子窗体和父窗体通讯new pym.Child({ id: '"+_iframe+"' ,polling: 1000})
+					var frameid=(_iframe.split('-').length>0?_iframe.split('-')[1]:"1");
+					pymjs.text="var t1;function pmchd(){console.log('In the frame "+_iframe+",pym code call is begining; '+(typeof pym!= 'undefined'));if(typeof pym != 'undefined'){pymChild"+frameid+" = new pym.Child({ id: 'pdiv_"+_iframe+"' ,polling: 500});window.clearInterval(t1); }};t1 = window.setInterval(pmchd,5);";
+					pymjs.type="text/javascript";
+					pymjs.id="pymChild";
+					ifmHeadlins.push({"pos":"htmlend","scope":"one","link":pymjs});				
+				}
+				// 将hk.js or hk.min.js应用到模块iframe
+				var hkjsObj=$("script[src*='/hk.']");//模糊查找
+				hkjsObj=hkjsObj.length>0?hkjsObj:$("script[src*='/hk1.']");
+				if(hkjsObj.length>0){
+					var hkjs=document.createElement("script");	
+					hkjs.src=hkjsObj[0].src;
+					hkjs.type="text/javascript";
+					hkjs.id=!!hkjsObj[0].id?hkjsObj[0].id:"hkjs";
+					ifmHeadlins.push({"pos":"head","scope":"one","link":hkjs});
+					hkjs=document.createElement("script");	////hk.js 加载后拦截ajax请求进行转发				
+				}
+			}
+			var crossOrign=ZteFrameWork.getDomainURL(ifrm.src);					
+			if(	window.location.origin==crossOrign){	//第一层同域处理	
+				for (i=0;i<ifmHeadlins.length;i++){
+					var link=ifrm.contentDocument.getElementById(ifmHeadlins[i].link.id);
+					if(link){
+							if(link.parentNode.tagName.toUpperCase==="HEAD"){
+								ifrm.contentDocument.head.removeChild(link);
+							}else if(link.parentNode.tagName.toUpperCase==="HTML"){
+								ifrm.contentDocument.removeChild(link);
+							}
+					}
+					if(ifmHeadlins[i].pos=="head")
+						ifrm.contentDocument.head.appendChild(ifmHeadlins[i].link);
+					else if (ifmHeadlins[i].pos=="bodyend")
+						ifrm.contentDocument.body.appendChild(ifmHeadlins[i].link);
+					else if (ifmHeadlins[i].pos=="htmlend")
+						ifrm.contentDocument.body.parentNode.appendChild(ifmHeadlins[i].link);
+				}
+				//对iframe中又有嵌套一级iframe的地方进行同步，只同步scope为all的
+				var childifrms=ifrm.contentDocument.getElementsByTagName("iframe");
+				if(childifrms&&childifrms.length>0){
+					var ifmHeadlins2 = new Array();
+					for (i=0;i<ifmHeadlins.length;i++){//筛选出scope为all的
+						if(ifmHeadlins[i].scope=="one") break;
+						ifmHeadlins2.push(ifmHeadlins[i]);		
+					}
+					for(j=0;j<childifrms.length;j++){
+						var parm={ifmHeadlins:ifmHeadlins2};
+						var childOrign=ZteFrameWork.getDomainURL(childifrms[j].src);
+						if(window.location.origin==childOrign){//同域
+							var ifrmload=function(e){ 
+								for (i=0;i<e.data.ifmHeadlins.length;i++){
+									var ifmheadlink=$(e.data.ifmHeadlins[i].link).clone()[0];////注意这里必须克隆，否则会出现元素移动，前面ifrm添加的都会被移出
+									var link=this.contentDocument.getElementById(ifmheadlink.id);
+									if(link){
+										if(link.parentNode.tagName.toUpperCase==="HEAD"){
+											this.contentDocument.head.removeChild(link);
+										}else if(link.parentNode.tagName.toUpperCase==="HTML"){
+											this.contentDocument.removeChild(link);
+										}
+									}
+									if(e.data.ifmHeadlins[i].pos=="head"){
+										this.contentDocument.head.appendChild(ifmheadlink);
+									}else if(e.data.ifmHeadlins[i].pos=="bodyend"){
+										this.contentDocument.body.appendChild(ifmheadlink);
+									}else if (ifmHeadlins2[i].pos=="htmlend"){
+										this.contentDocument.body.parentNode.appendChild(ifmheadlink);
+									}
+								}
+							}
+							$(childifrms[j]).off('onload',parm,ifrmload);
+							$(childifrms[j]).on('onload',parm,ifrmload);
+							$(childifrms[j]).trigger("onload");
+							
+						}else{
+							if(ifmHeadlins2.length>0){
+								console.log('跨域访问: 系统将进入跨域访问代理处理流程 ');
+								dealCrossProxy(childifrms[j].name,childOrign,ifmHeadlins2,flag);
+							}
+						}
+					}				
+				}
+			}else{
+				if(ifmHeadlins.length>0){
+						console.log('跨域访问: 系统将进入跨域访问代理处理流程 ');
+						dealCrossProxy(ifrm.name,crossOrign,ifmHeadlins,flag);
+				}
+			}			
+		},	
+	    goToURL:function(url){
+			dhByBreadcrumb = true;//全局变量，声明此次事件是由点击面包屑发起的
+			var showNav=ZteFrameWork.getLocationURLParameter('showNav');
+			if(showNav=="false"){//如果不显示菜单,就强制刷新本页
+				location.reload();
+			}else{
+	           url="a[name='"+url+"']";
+               $(url).click(); 
+			}
+         },
+		goToURLByName:function(name){
+	        var showNav=ZteFrameWork.getLocationURLParameter('showNav');
+			if(showNav=="false"){//如果不显示菜单,就强制刷新本页
+				location.reload();
+			}else{
+				url="a[name='"+name+"']";
+				$(url).click(); 
+			}	
+		},
+		goToURLByID:function(id){
+			if(!id){
+				return;
+			}  
+			var showNav=ZteFrameWork.getLocationURLParameter('showNav');
+			if(showNav=="false"){//如果不显示菜单,就强制刷新本页
+				location.reload();
+			}else{
+				if(id.indexOf("#")<0){
+					id="#"+id;        
+				}
+				$(id).click(); 
+			}
+        },
+		goToPortal:function(id){
+			var _url=top.location.href;
+			console.log(_url);
+			//_url="/ngict/iui/framework/";
+			var url=$.url(_url);
+			top.location=url.attr("directory")+"uifportal.html#"+id+"/";
+		},
+		//Category
+		goToURLByIDAndNewIPPort:function(id,newIPPort,newActionStr){
+			//先把NewIPPort对象:newIPPort={menuCategoryID:'vim',ipPortStr:'htpp://10.74.151.123:31180',newTitle:''}缓存到Category数组中，
+			//menuCategoryID属性是更多菜单上配置的菜单的分类id，;
+			//ipPortStr属性是该id的菜单要替换的新的ip和端口地址字符串，包括协议部分，比如http://10.74.151.64:21169
+			//newTitle属性用于放置新开ip的页面对应到面包屑上的名字，可以为“”，空标识不关注
+			_menuCategorys.replace(newIPPort.menuCategoryID,{ipPort:newIPPort.ipPortStr,ipTitle:newIPPort.newTitle});//把当前面包削中的菜单id和该子菜单对应的父菜单关联缓存起来
+			if (store) {
+                store('menuCategoryID', newIPPort.menuCategoryID+"[menuCategoryID]"+newIPPort.ipPortStr+"[menuCategoryID]"+(!!newIPPort.newTitle?newIPPort.newTitle:""));
+            }
+			//这里增加按照newIPPort.menuCategoryID分类加载more菜单的处理逻辑
+			//首先根据id找到对应的主菜单菜单项
+			var menuitem = this.findMenuItemByMenuId(id);	
+			if(!menuitem||menuitem.length<=0){//主菜单中没有找到，就找more菜单，找到id对应的more菜单项所属的主菜单项
+				var mainMenuId = this.getMenuItemId_From_MoreMenuRelation(id);	
+				if( !!mainMenuId&&mainMenuId.length>0 ){//more菜单中找到了id对应的主菜单项id，根据id返回主菜单项
+					menuitem = this.findMenuItemByMenuId(mainMenuId);
+					if(!!menuitem&&menuitem.length>0){
+						var more=$("#"+id,$('#pageableDiv')).parent();
+						$(".box.boxOperation", $(".carousel-inner")).removeClass("moreButtonSelected");
+						more=$('a>div.box',more);
+						if (more.hasClass('moreButtonSelected') == false){
+							more.addClass('moreButtonSelected');
+						}
+						var pagesTags=$('.item.moreButtonsTag');
+						if(pagesTags.length>0){
+							for(var i=0;i<pagesTags.length;i++){
+								var tags=$(pagesTags[i]);
+								tags.removeClass('active');					
+								if($('.moreButtonSelected',tags).length>0){
+									tags.addClass('active');
+								}
+							}
+						}	
+					}					
+				}
+			}						
+			//其次找到的菜单项中newIPPort.menuCategoryID对应的src覆盖breadcrumgroupbuttonsrc属性值，
+			if(!!menuitem&&menuitem.length>0){
+				var mulsrc=menuitem.attr(newIPPort.menuCategoryID+"-multiInsrc");
+				if(!!mulsrc){
+					menuitem.attr("breadcrumgroupbuttonsrc" ,mulsrc);
+					getBreadcrumbRightButtons(mulsrc,true);
+				}				
+			}
+			if (waittime) {
+                    clearInterval(waittime);
+            }
+            waittime = setInterval(function () {
+                    if(moreMenusisLoaded==true){
+						clearInterval(waittime);
+						ZteFrameWork.goToURLByIDAndNewAction(id,newActionStr,null);
+					}
+                }, 10); 
+		},
+		goToURLByIDAndNewAction:function(id,newActionStr,newBrowserPageOption){
+			if(!id){
+				return;
+			}
+
+			/*if(id.indexOf("#")<0){
+				id="#"+id;        
+			}*/
+			var menuitem = this.findMenuItemByMenuId(id);
+			//处理新开页面情况
+            if(newBrowserPageOption){
+                var href = ICTFRAME_CONST_DEFAULTPAGE_PATH;
+                var hash = getLocationHashByMenuId(id);
+                var newin=window.open(href + newBrowserPageOption.paramStr + hash,newBrowserPageOption.windowTitle);
+					newin.name=newActionStr;//注意这种传递参数的方法，被打开的页面中需要通过top.name中获取该传递的参数。
+                return;
+            }
+			//$(window).off('hashchange', loadCurrentHash);				
+			var menuItemID=menuitem?menuitem.attr("id"):"";
+			if(!!menuItemID&&menuItemID.length>0){
+				//menuItemID="#" + menuItemID;
+				//menuItemID=!!newActionStr?menuItemID:menuItemID+"/no";
+				_setLocationHash(menuItemID);					
+			}
+			var breadcrumbBtnMenuItemParent="";
+			if(!menuitem||menuitem.length<=0){//没有找到该菜单，可能是面包削中的，需要额外处理
+				menuItemID=id;
+				if (breadcrumbBtnMenus.contains(menuItemID)) {//有缓存
+					breadcrumbBtnMenuItemParent=breadcrumbBtnMenus.items(menuItemID);
+					menuitem=this.findMenuItemByMenuId(breadcrumbBtnMenuItemParent);	
+					//_breadcrumbSource=true;
+				}
+				// else{//在新增的可翻页的更多菜单里面找
+					// var pageDiv = $('#pageableDiv');
+					// menuitem=$('#' + menuItemID , pageDiv);
+				// }
+				if( menuitem && menuitem.length > 0){
+					isMoreMenuItemClick = true;		
+				}
+			}
+			if(!menuitem||menuitem.length<=0){
+				//面包屑和主菜单都没有找到，情况可能是：更多菜单点击打开后，刷新，hash已经更改，但是对应的更多菜单的html没有加载，需要找到更多菜单和主菜单的对应关系
+				var mainMenuId = this.getMenuItemId_From_MoreMenuRelation( id );
+				if( mainMenuId ){
+					menuitem = this.findMenuItemByMenuId(mainMenuId);
+				}
+				
+			}
+			if (store&&store("globleCurrentBreadcrumb")){
+				 globleCurrentBreadcrumb=store("globleCurrentBreadcrumb");
+				 //下面处理下刷新整个页面后从cookie中获取来的最后一次操作的面包屑对应的对应菜单的name属性回写，便于面包屑事件响应能够找到对应的菜单
+				 var al=$("a",$("<div>"+globleCurrentBreadcrumb+"</div>"));
+				 var alink,gal;
+				 for(i=0;i<al.length;i++){
+					alink=$(al[i]);
+					gal=$("a[id='"+alink.attr("id")+"']");//从整个页面查找
+					for(j=0;j<gal.length;j++){
+						$(gal[j]).attr("name",alink.attr("name"));
+					}
+				 }
+			}
+			if(menuitem&&menuitem.length>0){
+				var panel = $('.zte-theme-panel');
+				var navPosOption = $('.nav-pos-direction', panel).val();
+				if(navPosOption === zteframework_menu_fmenu){
+					var hparentid=menuitem.attr("hparentid");
+					var id=menuitem.attr("id");
+					var i=0,menuItemH=menuitem;
+					while (id!=hparentid&&i<20){
+						menuItemH=ZteFrameWork.findMenuItemByMenuId(hparentid);
+						hparentid=menuItemH.attr("hparentid");
+						id=menuItemH.attr("id");
+						i++;
+					};
+					if(!menuItemH.hasClass('active'))
+						menuItemH.parent().addClass("active");
+				}
+			}else{
+				console.log("goToURLByIDAndNewAction():Can't find the menuitem.The menu ID is:"+id+".Please check if the ID or ID cache is correct.");
+			}
+			//try{
+				var parm=undefined;
+				if(!!newActionStr&&breadcrumbBtnMenuItemParent&&breadcrumbBtnMenuItemParent.length>0){
+					parm={action:newActionStr,breadcrumbBtnMenuItem:menuItemID};
+				}else if(!!newActionStr){
+					parm={action:newActionStr};
+				}else if(breadcrumbBtnMenuItemParent&&breadcrumbBtnMenuItemParent.length>0){
+					parm={breadcrumbBtnMenuItem:menuItemID};
+				}else if(mainMenuId){
+					isMoreMenuItemClick = true;		
+					parm={breadcrumbBtnMenuItem:menuItemID};
+				}
+				//if(breadChangeType){
+				//	if(!parm){
+				//		parm = {};
+				//	}
+				//	parm.breadChangeType = breadChangeType;
+				//}
+				if(parm&&parm.action || parm&&parm.breadChangeType) {
+					_hashSource="dhByInterface";
+				}
+				
+				if(menuitem&&menuitem.length>0){
+					menuitem.one('click',parm,function(e){	//临时一次性的注册一次click事件处理函数，执行完毕会自动删除			
+						ZteFrameWork.dealAtoIframe($(this),e);
+						//$(window).one('hashchange', loadCurrentHash);
+						return false;
+					}); 
+					menuitem.click();//后执行	
+				}					
+			/*}catch(e){}
+			finally{
+				//$(window).on('hashchange', loadCurrentHash);
+			}*/				
+        },
+
+        getBreadcrumbEle:function(){
+            return $('.breadcrumbUl')[0];
+        },
+
+
+        findMenuItemByMenuId:function( id ){
+			var menuitem=undefined;
+			var panel = $('.zte-theme-panel');
+			var navPosOption = $('.nav-pos-direction', panel).val();			
+			
+			var items = undefined;
+			if (navPosOption === "vertical"){ //从垂直菜单里面找
+				items=$("#page-sidebar-menu a[id='"+id+"']");
+			}else if(navPosOption === zteframework_menu_horizontal){//从水平菜单里面找
+				items=$("#main_hormenu a[id='"+id+"']");
+				if(items.length == 0){
+                    //横菜单没有找到，再在横菜单的子菜单找一次
+                    items=$("#page-megachild-sidebar-menu a[id='"+id+"']");
+                }
+			}else if(navPosOption === zteframework_menu_fmenu){
+                items=$("#f_hormenu a[id='"+id+"']");
+                if(items.length == 0){
+                    //横菜单没有找到，再在竖菜单找一次。
+                    items=$("#page-f-sidebar-menu a[id='"+id+"']");
+
+                }
+				
+            }
+			if( items&&items.length == 0 ){
+					console.log( 'fmenu alink length is :' + $("#page-f-sidebar-menu a").length );
+					console.log( 'cant find menu in sidemenu、megamenu and fmenu , the menu id is ' + id );					
+			}
+			if(items&&items.length>0){
+				for(var i=0;i<items.length;i++){
+					if($(items[i]).parentsUntil('.header-inner').hasClass('hor-menu')){
+						menuitem=$(items[i]);
+						break;
+					}else if($(items[i]).parentsUntil('.page-container').hasClass('page-sidebar')){
+						menuitem=$(items[i]);
+						break;
+					}
+				}
+			}
+			return menuitem;
+		},
+		
+		getMenuItemId_From_MoreMenuRelation:function( id ){
+			var panel = $('.zte-theme-panel');              
+			var navPosOption = $('.nav-pos-direction', panel).val();
+			var mainMenuId = null;
+			if (navPosOption === zteframework_menu_vertical){
+				relationAry=sideBarMenu_to_moreMenu_frame;					
+			}else if(navPosOption === zteframework_menu_horizontal){
+				relationAry=horBarMenu_to_moreMenu_frame;
+			}else if(navPosOption === zteframework_menu_fmenu){
+				relationAry=horBarMenu_to_moreMenu_frame;
+			}				
+			if ( !relationAry || !id ){
+				return;
+			}
+			for ( var i = 0 ; i < relationAry.length ; i++ ){
+				var eachMain = relationAry[i];
+				var moreMenuIds = eachMain.moreMenuIds;
+				for ( var j = 0 ; j < moreMenuIds.length ; j++ ){
+					if( moreMenuIds[j] && moreMenuIds[j] == id ){
+						return eachMain.mainMenuId;
+					}
+				}
+			}
+			return null;			
+		},
+		
+		getMenuItemFoucsByID : function (id) {
+		    if(!id){
+				return;
+			}
+			var menuitem=undefined;
+			// var items=$("a[id='"+id+"']");
+			var items = undefined;
+			var panel = $('.zte-theme-panel');
+			var navPosOption = $('.nav-pos-direction', panel).val();
+            if (navPosOption === "vertical"){ //从垂直菜单里面找
+                items=$("#page-sidebar-menu a[id='"+id+"']");
+            }else if(navPosOption === zteframework_menu_horizontal){//从水平菜单里面找
+                items=$("#main_hormenu a[id='"+id+"']");
+                if(items.length == 0){
+                    //横菜单没有找到，再在横菜单的子菜单找一次
+                    items=$("#page-megachild-sidebar-menu a[id='"+id+"']");
+                }
+            }else if(navPosOption === zteframework_menu_fmenu){
+                items=$("#f_hormenu a[id='"+id+"']");
+                if(items.length == 0){
+                    //横菜单没有找到，再在竖菜单找一次。
+                    items=$("#page-f-sidebar-menu a[id='"+id+"']");
+
+                }
+            }
+			if(items.length>0){
+				for(var i=0;i<items.length;i++){
+					if($(items[i]).parentsUntil('.header-inner').hasClass('hor-menu')){
+						menuitem=$(items[i]);
+						break;
+					}else if($(items[i]).parentsUntil('.page-container').hasClass('page-sidebar')){
+						menuitem=$(items[i]);
+						break;
+					}
+				}
+			}
+			var breadcrumbBtnMenuItemParent="";
+			if(!menuitem||menuitem.length<=0){//没有找到该菜单，可能是面包削中的，需要额外处理
+				menuItemID=id;
+				if (breadcrumbBtnMenus.contains(menuItemID)) {//有缓存
+					breadcrumbBtnMenuItemParent="#"+breadcrumbBtnMenus.items(menuItemID);
+					menuitem=$(breadcrumbBtnMenuItemParent);
+				}
+			}
+			var parm = undefined;
+			if (breadcrumbBtnMenuItemParent && breadcrumbBtnMenuItemParent.length > 0) {
+			    parm = {
+			        breadcrumbBtnMenuItem : menuItemID
+			    };
+			}
+		    if (menuitem && menuitem.length > 0) {
+		        menuitem.one('click', parm, function (e) { //临时一次性的注册一次click事件处理函数，执行完毕会自动删除
+		            var containerStr = $(this).parentsUntil('.page-container').hasClass('page-sidebar') ? 'page-sidebar' : ""; //
+		            containerStr = $(this).parentsUntil('.header-inner').hasClass('hor-menu') ? 'header' : containerStr;
+		            _isClicked = false;
+		            dealMenuItemGetFocus($(this),e,containerStr);
+		            return false;
+		        });
+		        menuitem.click(); //后执行
+		    }
+		},     
+      // 处理面包削中的按钮菜单增加的导航连接，显示在iframe中
+		openbreadcrumbLink:function(aObject,e) {
+                var url = aObject.attr("href");
+                if(!url||url.length<2)
+                    return;
+				e.preventDefault();				
+                dealScrollTo(); 
+				var menuItemID=aObject.attr("id");
+				if(!!menuItemID&&menuItemID.length>0){
+					_setLocationHash(menuItemID);	
+					_hashSource="dhByInterface";
+				}
+					dealstartPageLoading();
+    			   	dealIframe(aObject,e);
+		},
+		getURLParam:function(name){
+            var reg = new RegExp("(^|&)" + name.toLowerCase() + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+            var search =decodeURIComponent(location.search.substring(1)).toLowerCase(); 
+            var r =search.match(reg);  //匹配目标参数
+            if (r != null) return unescape(r[2]); 
+            return null; //返回参数值
+		}
+    };
+    
+}();
+
+var currentRunningScriptSrcPath = {};
+//抽取html片段中任意位置的script标签（包括代码是内嵌的情况）逐个运行（不会在单个script加载不到的时候停下来）
+function runHtmlScripts(s) {
+	var div = document.createElement('div');
+	div.innerHTML = s;
+	var scripts = div.getElementsByTagName('script');				
+	$(scripts).each(function(){
+		var src = this.src;
+		src=ZteFrameWork.handlBaseURL(src);
+		if(src){
+			//存储当前Script标签的绝对路径以适应该js被其他系统跨域引用的情况
+			currentRunningScriptSrcPath[src.substring(src.lastIndexOf("/") + 1)] = src.substring(0, src.lastIndexOf("/")+1);
+			$.getScript(src);			
+		}else{
+			$.globalEval(this.text || this.textContent || this.innerHTML || '');
+		}
+	});
+}
+function stripHtmlScripts(s) {
+	var div = document.createElement('div');
+	div.innerHTML = s;
+	var scripts = div.getElementsByTagName('script');				
+	$(scripts).each(function(){
+		/* if(this.src){
+			$.getScript(this.src);
+		}else{
+			$.globalEval(this.text || this.textContent || this.innerHTML || '');
+		} */
+		this.src=ZteFrameWork.handlBaseURL(this.src);
+		this.parentNode.removeChild(this);
+	});
+	return div.innerHTML;
+}
+function getsiderBarMenu(url){
+    if (url.length<2){
+        return;
+    }
+	url=ZteFrameWork.handlBaseURL(url);	   
+    ZteFrameWork.startPageLoading();//菜单加载中请稍候....
+    var pagesidebar=$('#page-sidebar-menu');
+    pagesidebar.empty();
+    pagesidebar.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");
+    $.ajax({
+        type: "GET",
+        cache: false,
+        url: url,
+        dataType: "html", 
+        success: function (res) {		
+			//去除script标签以后添加到主框架以防止append方法因为加载script标签失败导致后面的代码无法运行
+			//res = stripHtmlScripts(res);
+			var resScriptsSriped = stripHtmlScripts(res);
+            pagesidebar.append(resScriptsSriped);
+			runHtmlScripts(res);			
+			
+            siderBarMenuAuthentication();
+            dealMysqlBackupMenu();
+            //loadi18n_WebFramework_sideMenu();
+			setTimeout(function () {
+                ZteFrameWork.stopPageLoading();
+			    goToHomePage();
+            }, 1000);
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            //$('#page-sidebar-menu').append('<h4 class="nav-load-error">'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!;//加载系统菜单失败!
+        }
+    });
+};
+var setLayoutValueByCookie = function () {
+	    var panel = $('.zte-theme-panel');
+	    if (store('layout-option') != undefined) {
+	        $('.layout-option', panel).val(store('layout-option'));
+	    }
+		if (store('language-option') != undefined) {
+	        $('.language-option', panel).val(store('language-option'));
+	    }
+		if (store('sidebar-option') != undefined) {
+	        $('.sidebar-option', panel).val(store('sidebar-option'));
+	    }
+		if (store('header-option') != undefined) {
+	        $('.header-option', panel).val(store('header-option'));
+	    }
+		if (store('sidebar-pos-option') != undefined) {
+	        $('.sidebar-pos-option', panel).val(store('sidebar-pos-option'));
+	    }
+		var horMenuLoadTip = $("[class='nav-load-error']", $(".hormenu"));
+		var sideMenuLoadTip = $("[class='nav-load-error']", $("[class='page-sidebar-menu']"));
+		// 横竖菜单都无错误提示,都正确加载
+	//	if ((!horMenuLoadTip || horMenuLoadTip.length <= 0) && (!sideMenuLoadTip || sideMenuLoadTip.length <= 0)) {
+			// if (store('nav-pos-direction') != undefined) {
+				// var navPosOption = store('nav-pos-direction');
+				// $('.nav-pos-direction', panel).val(navPosOption);
+			// } else {
+				$('.nav-pos-direction', panel).val('fmenu');
+				// $.ajax({
+					// "dataType" : 'json',
+					// "type" : "GET",
+					// "async" : false,
+					 // url : FrameConst.REST_GET_FRAME_MENUDIRECTION + "&tmpstamp=" + new Date().getTime(),
+					// "success" : function (obj) {
+						// if (obj.value && (obj.value != "")) {
+							// $('.nav-pos-direction', panel).val(obj.value);
+						// }
+					// }
+				// });
+			//}
+		// } else {
+			// $('.nav-pos-direction', panel).attr("disabled", true);
+		// }
+}
+function getHorMenu(url){
+	setLayoutValueByCookie();
+    if (url.length<2){
+        return;
+    }
+	url=ZteFrameWork.handlBaseURL(url);    
+    ZteFrameWork.startPageLoading();//菜单加载中请稍候....	
+    var pagehorbar=$('#main_hormenu')
+    pagehorbar.empty();
+    $.ajax({
+        type: "GET",
+        async : false,
+        cache: false,
+        url: url,
+        dataType: "html", 
+        success: function (res) {
+			//去除script标签以后添加到主框架以防止append方法因为加载script标签失败导致后面的代码无法运行
+			//res = stripHtmlScripts(res);
+			var resScriptsSriped = stripHtmlScripts(res);			
+            $('#main_hormenu').append(resScriptsSriped);
+			runHtmlScripts(res);
+			// 增加mysql判断，如果数据库为mysql，去掉基础数据备份功能菜单项
+			var dbType = ZteFrameWork_conf.dbType;
+			if (dbType == "mysql") {
+				var item=$(".hor-menu a[id='uep-ict-backup-baseDataBack']");
+				item.parent().remove();
+			}
+            horMenuAuthentication('main_hormenu');
+            ZteFrameWork.stopPageLoading();
+			if($('.nav-pos-direction', panel).val() === "horizontal"){
+			setTimeout(function () {
+                //goToHomePage();//注意这里由于水平和左边栏菜单都在一个页面中出现，所以这里只调用一次
+            }, 150);
+			}
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            //$('#main_hormenu').append('<h4 class="nav-load-error">'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!
+			var pcontent = $("[class='page-content']");
+			//pcontent.css("marginLeft",225);
+			$('.nav-pos-direction', panel).attr("disabled", true);
+        }
+    });
+};
+//加载横菜单的子菜单，加到左边的siderbar里面
+function getMegaFMenu( url ){
+    if (url.length<2){
+        return;
+    }
+	url=ZteFrameWork.handlBaseURL(url);       
+    ZteFrameWork.startPageLoading();//菜单加载中请稍候....	
+    var siderDiv =$( '#' + megaSiderDivId );
+    siderDiv.empty();
+	siderDiv.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");
+    $.ajax({
+        type: "GET",
+        async : false,
+        cache: false,
+        url: url,
+        dataType: "html", 
+        success: function (res) {
+			//去除script标签以后添加到主框架以防止append方法因为加载script标签失败导致后面的代码无法运行			
+			var resScriptsSriped = stripHtmlScripts(res);			
+            siderDiv.append(resScriptsSriped);
+			runHtmlScripts(res);
+            FMenuAuthentication( megaDivId ,megaSiderDivId );
+			rebuildHorMenu();
+			ajustFMenu( megaDivId ,megaSiderDivId );
+            ZteFrameWork.stopPageLoading();			
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            //siderDiv.append('<h4 class="nav-load-error">'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!
+			//var pcontent = $("[class='page-content']");
+			//pcontent.css("marginLeft",225);
+        }
+    });
+}
+
+function iniHorMenu(){
+    var hormenu=$('#main_hormenu');
+	if(!hormenu) return;
+    var url=hormenu.attr("menuSrc");
+    if(url&&url.length>0){
+       getHorMenu(url);
+    }
+	//
+	var megaFMenu = $('#'+megaSiderDivId);
+	if(!megaFMenu) return;
+    var url = 	megaFMenu.attr("menuSrc");
+	if(url&&url.length>0){
+       getMegaFMenu(url);
+    }
+};
+function iniFMenu(){
+    var fhormenu=$('#f_hormenu');
+    var fsidemenu=$('#page-f-sidebar-menu');
+    if(!fhormenu || !fsidemenu) return;
+    var urlmega=fhormenu.attr("menuSrc");
+    var urlsider=fsidemenu.attr("menuSrc");
+    if(urlmega&&urlmega.length>0 && urlsider && urlsider.length > 0){
+        getFMenu(urlmega , urlsider);
+    }
+};
+function getFMenu( urlMega , urlSider ){
+    if (urlMega.length<2 || urlSider.length<2){
+        return;
+    }
+	urlMega=ZteFrameWork.handlBaseURL(urlMega);
+    urlSider=ZteFrameWork.handlBaseURL(urlSider);		
+    ZteFrameWork.startPageLoading();//菜单加载中请稍候....
+    var fhorbar=$('#f_hormenu');
+    fhorbar.empty();
+    var fSideBar= $("#page-f-sidebar-menu");
+    fSideBar.empty();
+    $.ajax({
+        type: "GET",
+        async : false,
+        cache: false,
+        url: urlMega,
+        dataType: "html",
+        success: function (res) {
+			var resScriptsSriped = stripHtmlScripts(res);
+            $('#f_hormenu').append(resScriptsSriped);
+            horMenuAuthentication('f_hormenu');
+			runHtmlScripts(res);
+            dealMysqlBackupMenu();
+            ZteFrameWork.stopPageLoading();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            $('#f_hormenu').append('<h4 class="nav-load-error">'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!
+            var pcontent = $("[class='page-content']");           
+			$('.nav-pos-direction', panel).attr("disabled", true);
+        }
+    });
+    var fpagesidebar=$('#' + fMenuSiderDivId);
+    fpagesidebar.empty();
+    fpagesidebar.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");
+    $.ajax({
+        type: "GET",
+        cache: false,
+        url: urlSider,
+        dataType: "html",
+        success: function (res) {
+			var resScriptsSriped = stripHtmlScripts(res);
+			fpagesidebar.append(resScriptsSriped);
+            //先全部隐藏，后面根据与hash的匹配情况来显示
+            fpagesidebar.children().css('display','none');
+			runHtmlScripts(res);
+            dealMysqlBackupMenu();
+            FMenuAuthentication( fMenuMegaDivId ,fMenuSiderDivId );
+			ajustFMenu( fMenuMegaDivId ,fMenuSiderDivId );				
+            ZteFrameWork.stopPageLoading();
+            loadi18n_WebFramework_sideMenu();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            $('.page-f-sidebar-menu').append('<h4 class="nav-load-error">'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!;//加载系统菜单失败!
+        }
+    });
+};
+function iniSidebarMenu(){
+	var sidermenu=$('#page-sidebar-menu');
+	if(!sidermenu) return;
+    var url=sidermenu.attr("menuSrc");
+    if(url&&url.length>0){
+       getsiderBarMenu(url);
+    }          
+};
+function getChangePWDDlg(url){
+    if (url.length<2){
+        return;
+    }
+    ZteFrameWork.startPageLoading();//加载中....
+    var pageChangepasswd=$('.modal-dialog .Changepasswd');
+    pageChangepasswd.empty();
+    $.ajax({
+        type: "GET",
+        cache: false,
+        url: url,
+        dataType: "html", 
+        success: function (res) {
+            $('.modal-dialog .Changepasswd').append(res);
+            ChangePWD.init();
+            ZteFrameWork.stopPageLoading();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            $('.modal-dialog .Changepasswd').append('<h4>'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadchgpwdpageError')+'</h4>');//加载修改密码页面失败!
+        }
+    });
+};
+function iniChangePWDDlg(){
+    var url=$('.modal-dialog .Changepasswd').attr("dlgsrc");
+    if(url&&url.length>0){
+        getChangePWDDlg(url);
+    }
+};
+function getHeaderMenu(url){
+    if (url.length<2){
+        return;
+    }
+    ZteFrameWork.startPageLoading();//加载中请稍候....
+    var headerMenu=$('#headerMenu');
+    headerMenu.empty();
+    $.ajax({
+        type: "GET",
+        cache: false,
+        async: false,
+        url: url,
+        dataType: "html", 
+        success: function (res) {
+            $('#headerMenu').append(res);
+            ZteFrameWork.stopPageLoading();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            //$('#headerMenu').append('<h4>'+$.i18n.prop('com_zte_ums_ict_framework_ui_loadmenuerror')+'</h4>');//加载系统菜单失败!
+        }
+    });
+};
+function goToHomePage(){
+    locationhash = ZteFrameWork.getLocationHash();
+	if(!!locationhash&&locationhash.length>0){//有锚点，直接触发
+		var newIPPort=null;				
+		if (store&&store('menuCategoryID')) {
+			var s=store('menuCategoryID').split('[menuCategoryID]');
+			if(s.length>2){
+			   newIPPort={menuCategoryID:s[0],ipPortStr:s[1],newTitle:s[2]};
+			}				
+        }
+		if(!!newIPPort){
+			ZteFrameWork.goToURLByIDAndNewIPPort(locationhash,newIPPort,null);
+		}else{
+			ZteFrameWork.goToURLByIDAndNewAction(locationhash,null,null);
+		}
+	}else{//否则还是模拟点击配置了start类的菜单
+	    var containerStr = "";
+		//var sidermenu = $("[class='page-sidebar-menu']", $("[class='page-sidebar navbar-collapse collapse']"));
+		var sidermenu = $("#page-sidebar-menu");
+		var hormenu = $("#main_hormenu");
+        var fhormenu = $('#' + fMenuMegaDivId);
+		var fhormenusider = $('#page-f-sidebar-menu');		
+        var startmenu = null;
+		var navPosOption = $('.nav-pos-direction', panel).val();		
+		// 侧边栏显示，根据侧边栏CSS选择
+		if (navPosOption === "vertical") {
+		    //containerStr=$('.page-sidebar').length>0?'.page-sidebar':"";
+            startmenu = $('.iframe.start' , sidermenu);
+			dealStartMenu( startmenu, sidermenu );									
+		}
+		// 水平菜单显示，根据水平菜单CSS选择
+		else if (navPosOption === "horizontal") {
+		    //containerStr=$('.hor-menu').length>0?'.header':containerStr;
+            startmenu = $('.iframe.start' , hormenu);
+			dealStartMenu( startmenu, hormenu );
+
+		}
+        //F菜单的恒菜单显示
+        else if (navPosOption === zteframework_menu_fmenu) {
+            //containerStr=$('.hor-menu').length>0?'.header':containerStr;
+            startmenu = $('.iframe.start' ,fhormenu);
+			if (startmenu && startmenu.length < 1) {
+				startmenu = $('.iframe.start' ,fhormenusider);
+			}
+			dealStartMenu( startmenu, fhormenu,fhormenusider );			
+        }
+	}	
+}; 
+var dealStartMenu = function(startmenu , menuContainer,menuContainer2 ){
+		var timer =setInterval(function () {
+			if(startmenu&&startmenu.length>0){
+				startmenu.click();
+				clearInterval(timer);
+			}else{
+				console.log('the start menu click event is not be triggerd ,so do it repeat!!');
+				$('a[operation]', menuContainer).each(function () {
+					startmenu = $(this);
+					return false;
+				});
+				if (menuContainer2&&startmenu && startmenu.length < 1) {
+					$('a[operation]', menuContainer2).each(function () {
+						startmenu = $(this);
+						return false;
+					});
+				}
+			}
+		}, 100);
+		handeCtxMenuitem();
+	}
+// 屏蔽横竖菜单项的右键功能
+function handeCtxMenuitem() {
+	$(".page-sidebar ul li a").each(function() {
+		if ($(this).attr("href") && $(this).attr("href") != "javascript:;" && $(this).attr("href") != "#") {
+			$(this).attr("oncontextmenu", "return false");
+		}
+	});
+	$(".hormenu li a").each(function() {
+		if ($(this).attr("href") && $(this).attr("href") != "javascript:;" && $(this).attr("href") != "#") {
+			$(this).attr("oncontextmenu", "return false");
+		}
+	});
+}
+function initBaseInfo(){    
+    $("#logout_label").text($.i18n.prop('com_zte_ums_ict_framework_ui_group_logout'));
+    $("#fullscreen_label").text($.i18n.prop('com_zte_ums_ict_framework_ui_group_fullscreen'));
+    $("#changePwd_label").text($.i18n.prop('com_zte_ums_ict_framework_ui_changePwd'));
+    $("#com_zte_ums_ict_framework_moudle_about").text($.i18n.prop('com_zte_ums_ict_framework_moudle_about'));
+	$("#com_zte_ums_ict_framework_moudle_help").text($.i18n.prop('com_zte_ums_ict_framework_moudle_help'));
+	$("#zte_menu-toggler").attr("title",$.i18n.prop('com_zte_ums_ict_framework_moudle_menutoggler'));	
+};
+window.closeModal = function(modalid) {
+    if(!modalid){
+       return;
+    }    
+    if(modalid.indexOf("#")<0){
+      modalid="#"+modalid;        
+    }
+    $(modalid).modal('hide');  
+};
+function getLcsRight(lcsoperations) {
+	var lcsrights = new Array();
+	if (lcsoperations && (lcsoperations.length > 0)) {
+		// 请求后台license value
+		//----test data----
+		// var testjson = '{"data":[{"id":"mylcs","name":"xxx","value":"false"}]}';
+		// var testopt = eval('(' + testjson + ')');
+		// var testarray = testopt.data;		
+		//-----end test data---				
+		var keys = {
+			"keys" : lcsoperations
+		};
+		var jsonvalues = JSON.stringify(keys);
+		var data = {
+			"data" : jsonvalues
+		};
+		var url=FrameConst.REST_GETLICENSEINFO + "?tmpstamp=" + new Date().getTime();
+		url=ZteFrameWork.handlBaseURL(url);
+		$.ajax({
+			"dataType" : 'json',
+			"type" : "GET",
+			"async" : false,
+			"url" : url,
+			"data" : data,
+			//"contentType" : 'application/json; charset=utf-8',
+			"success" : function (response) {
+				if (response) {
+					lcsrights = response.data;
+				}
+			},
+			"error" : function (XMLHttpRequest, textStatus, errorThrown) {
+				lcsrights = null;
+			}
+		});
+		return lcsrights;
+	}
+	return lcsrights;
+}
+// 侧边栏菜单鉴权
+function siderBarMenuAuthentication() {
+	// license 鉴权
+	var menuids = new Array();
+	var lcsoperations = new Array();
+	//从页面DOM取得菜单license项。
+	$('a[licenseid]', $('.page-sidebar-menu')).each(function () {
+		var licenseid = $(this).attr("licenseid");
+		if (licenseid) {
+			lcsoperations.push(licenseid);
+			var id = $(this).attr("id");
+			menuids.push(id);
+		}
+	});
+	var lcsrights = getLcsRight(lcsoperations);// 取得license数据。
+	if (lcsrights && (lcsrights.length == menuids.length)) {
+		// 根据后台license值判断所在菜单项是否显示
+		for (var i = 0; i < menuids.length; i++) {
+			var id = menuids[i];
+			var lcskey = lcsoperations[i];
+			var lcsitem = lcsrights[i];
+			// 菜单项如果配了licenseid, 并且不是true字符串, 则移除菜单项
+			if (lcsitem.value != "True") {
+				$('#'+id, $('.page-sidebar-menu')).parent().remove();
+			}
+		}
+	}	
+    var operations = new Array();
+    $('a[operation]', $('.page-sidebar-menu')).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			operations.push(operation);
+		}
+    }); // 遍历菜单项，提取所有的操作码
+    var rightObj = getAllOperCodeRights(operations); // 对操作码进行鉴权判断
+    $('a[operation]', $('.page-sidebar-menu')).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			if (!hasRight(operation, rightObj)) {
+				$(this).parent("li").remove(); // 删除没有权限的菜单项
+			}
+		}
+    });
+    rebuildSiderBarMenu();
+};
+// 横向菜单栏鉴权
+function horMenuAuthentication( horMenuId ) {
+	// license 鉴权
+	var menuids = new Array();
+	var lcsoperations = new Array();
+	//从页面DOM取得菜单license项。
+	$('a[licenseid]', $('#'+ horMenuId)).each(function () {
+		var licenseid = $(this).attr("licenseid");
+		if (licenseid) {
+			lcsoperations.push(licenseid);
+			var id = $(this).attr("id");
+			menuids.push(id);
+		}
+	});
+	var lcsrights = getLcsRight(lcsoperations);// 取得license数据。
+	if (lcsrights && (lcsrights.length == menuids.length)) {
+		// 根据后台license值判断所在菜单项是否显示
+		for (var i = 0; i < menuids.length; i++) {
+			var id = menuids[i];
+			var lcskey = lcsoperations[i];
+			var lcsitem = lcsrights[i];
+			// 菜单项如果配了licenseid, 并且不是true字符串, 则移除菜单项
+			if (lcsitem.value != "True") {
+				$('#'+id, $('#'+ horMenuId)).parent().remove();
+			}
+		}
+	}
+    var operations = new Array();
+    $('a[operation]', $('#'+ horMenuId)).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			operations.push(operation);
+		}
+    }); // 遍历菜单项，提取所有的操作码
+    var rightObj = getAllOperCodeRights(operations); // 对操作码进行鉴权判断
+    $('a[operation]', $('#'+ horMenuId)).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			if (!hasRight(operation, rightObj)) {
+				$(this).parent("li").remove(); // 删除没有权限的菜单项
+			}
+		}
+    });
+    rebuildHorMenu();
+};
+//根据F菜单的竖菜单来调整横菜单。获取hparentid相同的竖菜单中的第一个，来更新横菜单上对应父亲菜单的href、catchnum等信息
+function ajustFMenu(megaBarDivId , siderbarDivId){
+    var hparentIds = {};
+    $('a[hparentid]', $('#'+ siderbarDivId)).each(function () {
+        var hparentId = $(this).attr("hparentId");
+        var parentMenu = $('a[id = ' + hparentId + ']', $('#' + megaBarDivId));
+        var oldAHref = parentMenu.attr("href");
+        if (oldAHref == null || oldAHref.trim() == "#" || oldAHref == "javascript") {
+            var hrefMenu = $(this);
+            //竖菜单的第一级有可能是虚菜单，则找这个虚节点下面的第一个有href的菜单
+            if(  $(this).attr('href') == null || $(this).attr('href') == "#" || $(this).attr('href') == "javascript:;"){
+                $('a[href]', $(this).parent().children('ul')).each(function () {
+                    hrefMenu = $(this);
+                    if (hrefMenu != null && hrefMenu != "#" && hrefMenu != "javascript") {
+                        return false; //跳出循环
+                    }
+                })
+            }
+            parentMenu.attr("href", hrefMenu.attr("href"));
+            parentMenu.attr("shiftjs", hrefMenu.attr("shiftjs"));
+            parentMenu.attr("cachenum", hrefMenu.attr("cachenum"));
+			parentMenu.attr("iframeName", hrefMenu.attr("iframeName"));
+			parentMenu.attr("xdomain", hrefMenu.attr("xdomain"));
+			parentMenu.attr("cssSrc", hrefMenu.attr("cssSrc"));	
+			parentMenu.attr("category", hrefMenu.attr("category"));				
+            parentMenu.attr("breadcrumgroupbuttonsrc", hrefMenu.attr("breadcrumgroupbuttonsrc"));
+            parentMenu.attr("operation", hrefMenu.attr("operation"));
+            parentMenu.attr("iframeautoscroll", hrefMenu.attr("iframeautoscroll"));
+        }
+    });
+}
+function FMenuAuthentication(megaBarDivId , siderbarDivId){
+    var beforeHparentId = {};
+    $('a[hparentid]', $('#'+ siderbarDivId)).each(function(){
+        var parentid = $(this).attr("hparentid");
+        beforeHparentId[parentid] = 1;
+    });
+	checkFmenuRightByAttr('licenseid' , megaBarDivId , siderbarDivId , getLcsRight);
+	checkFmenuRightByAttr('operation' , megaBarDivId , siderbarDivId,  getAllOperCodeRights);
+    rebuildSiderBarMenu();
+	var afterHparentId={};
+    $('a[hparentid]', $('#'+ siderbarDivId)).each(function(){
+        var parentid = $(this).attr("hparentid");
+        afterHparentId[parentid] = 1;
+    });
+    //比较鉴权前后的父菜单差异，如果这个父菜单自己没有href属性，且鉴权后，所有的子菜单都没有权限，那么这个父菜单需要从界面上去掉
+    for( var parentid in beforeHparentId ){
+        if( afterHparentId[parentid] == null ){
+            var parent = $('#'+ parentid , $('#'+ megaBarDivId));
+            if(parent.attr('href') == null || parent.attr('href') == "javascript:;" || parent.attr('href') == "#"){
+                parent.parent().remove();
+            }
+        }
+    }
+}
+function checkFmenuRightByAttr( attrName, megaBarDivId , siderbarDivId ,callback ){
+	// license 鉴权
+	var menuids = new Array();
+	var parentMenuId = new Array();
+	var operations = new Array();
+	//从页面DOM取得菜单license项。
+	$('a['+ attrName+']', $('#'+ siderbarDivId)).each(function () {
+		var attrValue = $(this).attr(attrName);
+		if (attrValue) {
+			operations.push(attrValue);
+			var id = $(this).attr("id");
+			menuids.push({'id':id });
+		}
+	});
+	var rights = callback(operations);// 取得license数据。
+	if (rights && (rights.length == menuids.length)) {
+		// 根据后台license值判断所在菜单项是否显示
+		for (var i = 0; i < menuids.length; i++) {
+			var id = menuids[i].id;
+			var hparentId =menuids[i].hParentId;
+			var key = operations[i];
+			var item = rights[i];
+			// 菜单项如果配了licenseid, 并且不是true字符串, 则移除菜单项
+			if (item.value != "True") {
+				$('#'+id, $('#'+ siderbarDivId)).parent().remove();
+			}
+		}
+	}
+}
+// “更多操作”分组按钮鉴权
+function groupButtonAuthentication() {
+	// license 鉴权
+	var menuids = new Array();
+	var lcsoperations = new Array();
+	//从页面DOM取得菜单license项。
+    $('a[licenseid]', $('.more-botton-zone > li.btn-group')).each(function () {
+		var licenseid = $(this).attr("licenseid");
+		if (licenseid) {
+			lcsoperations.push(licenseid);
+			var id = $(this).attr("id");
+			menuids.push(id);
+		}		
+	});
+	var lcsrights = getLcsRight(lcsoperations);// 取得license数据。
+	if (lcsrights && (lcsrights.length == menuids.length)) {
+		// 根据后台license值判断所在菜单项是否显示
+		for (var i = 0; i < menuids.length; i++) {
+			var id = menuids[i];
+			var lcskey = lcsoperations[i];
+			var lcsitem = lcsrights[i];
+			// 菜单项如果配了licenseid, 并且不是true字符串, 则移除菜单项
+			if (lcsitem.value != "True") {
+                $('#'+id, $('.more-botton-zone > li.btn-group')).parent().remove();
+			}
+		}
+	}
+	// 增加mysql判断，如果数据库为mysql，去掉基础数据备份功能菜单项
+	var dbType = ZteFrameWork_conf.dbType;
+	if (dbType == "mysql") {
+        $("#uep-ict-backup-baseDataBack",$('.more-botton-zone > li.btn-group')).parent().remove();
+	}	
+    var operations = new Array();
+    $('a[operation]', $('.more-botton-zone > li.btn-group')).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			operations.push(operation);
+		}
+    }); // 遍历菜单项，提取所有的操作码
+    var rightObj = getAllOperCodeRights(operations); // 对操作码进行鉴权判断
+    $('a[operation]', $('.more-botton-zone > li.btn-group')).each(function () {
+        var operation = $(this).attr("operation");
+		if (operation) {
+			if (!hasRight(operation, rightObj)) {
+				$(this).parent("li").remove(); // 删除没有权限的菜单项
+			}
+		}
+    });
+    // 如果“更多菜单”下没有子菜单了，则删除整个“更多菜单”下拉框。
+    if ($('li > a', $('.more-botton-zone > li.btn-group')).length == 0) {
+        $('.more-botton-zone > li.btn-group').remove();
+    }
+};
+// 删除没有子菜单的一级菜单，查看新菜单是否配了登录默认页面，如没有则指定第一个有权限的菜单作为登录后默认页面
+function rebuildSiderBarMenu() {
+    if ($('a.start').length == 0) {
+        $('li > a[href!="javascript:;"]', $('.page-sidebar-menu')).eq(0).addClass("start");
+    }
+    $('ul.sub-menu', $('.page-sidebar-menu')).each(function () {
+        if ($(this).has('li').length == 0) {
+            $(this).parent("li").remove();
+        }
+    });
+};
+// 删除没有子菜单的一级菜单，查看新菜单是否配了登录默认页面，如没有则指定第一个有权限的菜单作为登录后默认页面
+function rebuildHorMenu() {
+    if ($('a.start').length == 0) {
+        $('li > a[href!="#"]', $('#main_hormenu')).eq(0).addClass("start");
+    }
+    $('ul.mega-menu-submenu', $('#main_hormenu')).each(function () {
+        if ($(this).has('li > a').length == 0) {
+            $(this).remove(); // 删空的分组列
+        }
+    });
+    //删除增加的分组div
+    $('div.zteDivWidth', $('#main_hormenu')).each(function () {
+        if ($(this).has('ul').length == 0) {
+            $(this).remove(); // 删空的分组列
+        }
+    });
+    $('ul.dropdown-menu', $('#main_hormenu')).each(function () {
+        if ($(this).has('ul').length == 0) {
+            $(this).parent("li").remove(); // 删空的一级菜单栏
+        }
+    });
+    $('li.divider', $('#main_hormenu')).each(function () {
+        if ($(this).next().hasClass('divider')) {
+            $(this).remove(); // 连续出现分隔线则删除一个
+        }
+    });
+    $('li.divider', $('#main_hormenu')).each(function () {
+        if ($(this).next().length == 0) {
+            $(this).remove(); // 如果分隔线在最后一行，则删除之
+        }
+    });
+}
+//获取页面菜单栏所有的操作码权限
+function getAllOperCodeRights(operations) {
+    var rights = new Array();
+	if( operations && operations.length > 0 ){
+		var data = {
+			"operations" : operations
+		};
+		var sendData = JSON.stringify(data);
+		var url=FrameConst.REST_CHECKRIGHT + "?data=" + sendData + "&tmpstamp=" + new Date().getTime();
+		url=ZteFrameWork.handlBaseURL(url);
+		$.ajax({
+			"dataType" : 'json',
+			"type" : "GET",
+			"async" : false,
+			"url" : url,
+			"data" : null,
+			//"contentType" : 'application/json; charset=utf-8',
+			"success" : function (response) {
+				rights = response.value;
+			},
+			"error" : function (XMLHttpRequest, textStatus, errorThrown) {
+				if (XMLHttpRequest.status == 401) {
+					window.location.replace("login.html");
+				 } else {
+					console.log('Communication Error!');
+				}
+			}
+		});
+	}
+    return {
+        opCodes : operations,
+        rights : rights
+    };
+};
+// 判断操作码是否有权限
+function hasRight(opCode, rightObj) {
+    for (var i = 0; i < rightObj.opCodes.length; i++) {
+        if (rightObj.opCodes[i] == opCode) {
+            return (rightObj.rights[i] == true);
+        }
+    }
+    return false;
+};
+// 处理mysql环境下备份菜单的合并问题
+function dealMysqlBackupMenu() {
+	var dbType = ZteFrameWork_conf.dbType;
+    if (dbType !== undefined && dbType !== "mysql") {
+        return;
+    }
+    var sidermenu = $("[class='page-sidebar-menu']");
+    var hormenu = $(".hormenu");
+	//这段代码先这么写,html的位置不一定正确，如果后面位置不一致，再修改。
+    if (sidermenu.length > 0 && $('#uep-ict-backup-dataBackup').length > 0) {
+		$('#uep-ict-backup-dataBackup', sidermenu).attr("breadcrumGroupButtonSrc", ICTFRAME_CONST_DATABACKUP_PATH);
+    }
+	if (hormenu.length > 0 && $('#uep-ict-backup-dataBackup').length > 0) {
+		$('#uep-ict-backup-dataBackup', hormenu).attr("breadcrumGroupButtonSrc", ICTFRAME_CONST_DATABACKUP_PATH);
+        $('#uep-ict-backup-dataBackup').parent('li').attr('style', 'display:block');
+        $('#uep-ict-backup-allDbStructBackup').parent('li').attr('style', 'display:none');
+        $('#uep-ict-backup-baseDataBack').parent('li').attr('style', 'display:none');
+    }
+};
+// 浏览器缩小后导航栏隐藏的情况下点击navbar-toggle显示菜单的前置工作，
+// 浏览器缩小后导航栏隐藏的情况下点击navbar-toggle显示菜单的前置工作，
+function dealMavToggle(navtoggle) {
+    var sidermenu  = $("#page-sidebar-menu");
+	var hormenu = $("#main_hormenu");
+	var panel = $(".zte-theme-panel");
+	var siderbarpos = $(".nav-pos-direction", panel).val()
+	if ("hidden" == $(navtoggle).attr("navtoggledispattr")) {
+		$(navtoggle).attr("navtoggledispattr", "display");
+		sidermenu.css('display','block');//侧边栏显示
+		hormenu.css("display", "none");//隐藏水平菜单栏		
+	} else {
+		$(navtoggle).attr("navtoggledispattr", "hidden");
+		sidermenu.css('display','none');//侧边栏隐藏
+		hormenu.css("display", "none");
+	}	
+};
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.min.js b/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.min.js
new file mode 100644
index 00000000..2b5c041d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/core/ZteFrameWork.min.js
@@ -0,0 +1,165 @@
+/*
+ * 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.
+ */
+String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"")};String.prototype.format=function(){if(0==arguments.length)return this;for(var b=this,d=0;d<arguments.length;d++)b=b.replace(RegExp("\\{"+d+"\\}","g"),arguments[d]);return b};String.prototype.startWith=function(b){return RegExp("^"+b).test(this)};String.prototype.endWith=function(b){return RegExp(b+"$").test(this)};
+var s=!function(b,d){var h={supportsFullScreen:!1,isFullScreen:!1,requestFullScreen:"",exitFullScreen:"",fullscreenchange:"",prefix:""},k=["webkit","moz","ms"],g=k.length,n=0;if(d.exitFullscreen)h.supportsFullScreen=!0;else for(;n<g;n++)if(d[k[n]+"ExitFullscreen"]||d[k[n]+"CancelFullScreen"]){h.supportsFullScreen=!0;h.prefix=k[n];break}if(h.supportsFullScreen){var m=h.prefix;h.fullscreenchange=function(b){d.addEventListener("ms"==m?"MSFullscreenChange":m+"fullscreenchange",function(){b&&b()},!1)};
+h.fullscreenchange(function(){h.isFullScreen=function(b){switch(b){case "":return d.fullscreen;case "webkit":return d.webkitIsFullScreen;case "moz":return d.mozFullScreen;case "ms":return d.msFullscreenElement?!0:!1}}(m)});h.requestFullScreen=function(b){b=b||d.documentElement;try{m?b[m+"RequestFullScreen"]():b.requestFullScreen()}catch(h){b[m+"RequestFullscreen"]()}};h.exitFullScreen=function(){try{m?d[m+"ExitFullscreen"]():d.exitFullscreen()}catch(b){d[m+"CancelFullScreen"]()}}}b.screenfull=h}(window,
+document);
+(function(b){"function"===typeof define&&define.amd?define(b):window.purl=b()})(function(){function b(b,d){for(var h=decodeURI(b),h=I[d?"strict":"loose"].exec(h),g={attr:{},param:{},seg:{}},n=14;n--;)g.attr[u[n]]=h[n]||"";g.param.query=k(g.attr.query);g.param.fragment=k(g.attr.fragment);g.seg.path=g.attr.path.replace(/^\/+|\/+$/g,"").split("/");g.seg.fragment=g.attr.fragment.replace(/^\/+|\/+$/g,"").split("/");g.attr.base=g.attr.host?(g.attr.protocol?g.attr.protocol+"://"+g.attr.host:g.attr.host)+(g.attr.port?
+":"+g.attr.port:""):"";return g}function d(b){b=b.tagName;return"undefined"!==typeof b?l[b.toLowerCase()]:b}function h(b,d,g,k){var l=b.shift();if(l){var v=d[g]=d[g]||[];if("]"==l)if(n(v))""!==k&&v.push(k);else if("object"==typeof v){d=b=v;g=[];for(var m in d)d.hasOwnProperty(m)&&g.push(m);b[g.length]=k}else d[g]=[d[g],k];else{~l.indexOf("]")&&(l=l.substr(0,l.length-1));if(!w.test(l)&&n(v))if(0===d[g].length)v=d[g]={};else{m={};for(var u in d[g])m[u]=d[g][u];v=d[g]=m}h(b,v,l,k)}}else n(d[g])?d[g].push(k):
+d[g]="object"==typeof d[g]?k:"undefined"==typeof d[g]?k:[d[g],k]}function k(b){return g(String(b).split(/&|;/),function(b,d){try{d=decodeURIComponent(d.replace(/\+/g," "))}catch(g){}var k=d.indexOf("="),l;a:{for(var m=d.length,x,u=0;u<m;++u)if(x=d[u],"]"==x&&(l=!1),"["==x&&(l=!0),"="==x&&!l){l=u;break a}l=void 0}m=d.substr(0,l||k);l=d.substr(l||k,d.length);l=l.substr(l.indexOf("=")+1,l.length);""===m&&(m=d,l="");k=m;m=l;if(~k.indexOf("]")){var q=k.split("[");h(q,b,"base",m)}else{if(!w.test(k)&&n(b.base)){l=
+{};for(q in b.base)l[q]=b.base[q];b.base=l}""!==k&&(q=b.base,l=q[k],"undefined"===typeof l?q[k]=m:n(l)?l.push(m):q[k]=[l,m])}return b},{base:{}}).base}function g(b,d,h){for(var g=0,k=b.length>>0;g<k;)g in b&&(h=d.call(void 0,h,b[g],g,b)),++g;return h}function n(b){return"[object Array]"===Object.prototype.toString.call(b)}function m(d,h){1===arguments.length&&!0===d&&(h=!0,d=void 0);d=d||window.location.toString();return{data:b(d,h||!1),attr:function(b){b=q[b]||b;return"undefined"!==typeof b?this.data.attr[b]:
+this.data.attr},param:function(b){return"undefined"!==typeof b?this.data.param.query[b]:this.data.param.query},fparam:function(b){return"undefined"!==typeof b?this.data.param.fragment[b]:this.data.param.fragment},segment:function(b){if("undefined"===typeof b)return this.data.seg.path;b=0>b?this.data.seg.path.length+b:b-1;return this.data.seg.path[b]},fsegment:function(b){if("undefined"===typeof b)return this.data.seg.fragment;b=0>b?this.data.seg.fragment.length+b:b-1;return this.data.seg.fragment[b]}}}
+var l={a:"href",img:"src",form:"action",base:"href",script:"src",iframe:"src",link:"href",embed:"src",object:"data"},u="source protocol authority userInfo user password host port relative path directory file query fragment".split(" "),q={anchor:"fragment"},I={strict:/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,loose:/^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/},
+w=/^[0-9]+$/;m.jQuery=function(b){null!=b&&(b.fn.url=function(h){var g="";this.length&&(g=b(this).attr(d(this[0]))||"");return m(g,h)},b.url=m)};m.jQuery(window.jQuery);return m});ZteFrameWork_conf={userName:store.get("username"),changePassItem:FrameConst.change_pass?FrameConst.change_pass:!0,helpMenuItem:!1,aboutMenuItem:!1,flightMenuItem:!1,fullscreenMenuItem:!1,logoutMenuItem:!0,defaultThemeColor:"ztebluelight2",dbType:"other",acceptLanguage:"zh-CN"};$("#currentUser").html(ZteFrameWork_conf.userName);
+$.ajax({url:FrameConst.REST_FRAMECOMMIFO,type:"GET",cache:!1,contentType:"application/json; charset=utf-8",success:function(b){b.helpMenuItem&&""!=b.helpMenuItem&&(ZteFrameWork_conf.helpMenuItem=b.helpMenuItem);b.aboutMenuItem&&""!=b.aboutMenuItem&&(ZteFrameWork_conf.aboutMenuItem=b.aboutMenuItem);b.flightMenuItem&&""!=b.flightMenuItem&&(ZteFrameWork_conf.flightMenuItem=b.flightMenuItem);b.fullscreenMenuItem&&""!=b.fullscreenMenuItem&&(ZteFrameWork_conf.fullscreenMenuItem=b.fullscreenMenuItem);b.logoutMenuItem&&
+""!=b.logoutMenuItem&&(ZteFrameWork_conf.logoutMenuItem=b.logoutMenuItem);b.defaultThemeColor&&""!=b.defaultThemeColor&&(ZteFrameWork_conf.defaultThemeColor=b.defaultThemeColor);b.dbType&&""!=b.dbType&&(ZteFrameWork_conf.dbType=b.dbType);b.acceptLanguage&&""!=b.acceptLanguage&&(ZteFrameWork_conf.acceptLanguage=b.acceptLanguage);b.changePassItem&&""!=b.changePassItem&&(ZteFrameWork_conf.changePassItem=b.changePassItem);setFrameWorkByConf()},error:function(b){setFrameWorkByConf()}});
+function setThemeColor(b){var d=$(".zte-theme-panel");$(".theme-colors > ul > li",d).each(function(){var d=$(this).attr("data-style");d==b&&($(this).addClass("current"),$("#style_color").attr("href","css/themes/"+d+".css"),store("style_color",d))})}
+function setFrameWorkByConf(){var b=ZteFrameWork_conf.helpMenuItem,d=ZteFrameWork_conf.aboutMenuItem,h=ZteFrameWork_conf.flightMenuItem,k=ZteFrameWork_conf.fullscreenMenuItem,g=ZteFrameWork_conf.logoutMenuItem,n=ZteFrameWork_conf.changePassMenuItem;b&&"false"!==b||$("#uep_ict_help_url").parent("li").remove();d&&"false"!==d||$('[data-target="#aboutDlg"]').parent("li").remove();b||d||$("#uep_ict_help_div").remove();h&&"false"!==h||$("#header_notification_bar").html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>");
+k&&"false"!==k||$("#trigger_fullscreen_div").html("");g&&"false"!==g||$("#trigger_logout_div").html("");(!k&&!g||"false"===k&&"false"===g)&&$("#full_logout_divider").css("display","none");n||($("#changePwd_labellink").css("display","none"),$("#full_logout_divider").css("display","none"));b=ZteFrameWork_conf.defaultThemeColor;d=$(".zte-theme-panel");$("ul > li",d).removeClass("current");store&&!store("style_color")?setThemeColor(b):setThemeColor(store("style_color"))}
+function Hashtable(){this._hash={};this._count=0;this.add=function(b,d){if(this._hash.hasOwnProperty(b))return!1;this._hash[b]=d;this._count++;return!0};this.hash=function(){return this._hash};this.remove=function(b){delete this._hash[b];this._count--};this.count=function(){return this._count};this.items=function(b){if(this.contains(b))return this._hash[b]};this.contains=function(b){return this._hash.hasOwnProperty(b)};this.clear=function(){this._hash={};this._count=0};this.replace=function(b,d){this.contains(b)&&
+this.remove(b);return this.add(b,d)}}
+var fMenuSiderDivId="page-f-sidebar-menu",fMenuMegaDivId="f_hormenu",megaSiderDivId="page-megachild-sidebar-menu",megaDivId="main_hormenu",zteframework_menu_horizontal="horizontal",zteframework_menu_vertical="vertical",zteframework_menu_fmenu="fmenu",zteframework_showNav="true",zteframework_smallView=960,ZteFrameWork=function(){var b=getLanguage(),d=!1,h=function(){try{return document.createEvent("TouchEvent"),!0}catch(c){return!1}},k=!h,g=!1,n=!1,m=!1,l="",u=225,q=35,I=[],w=new Hashtable,x=new Hashtable,
+C=new Hashtable,V=new Hashtable,y="page-mainIframe",J="",v="",D=!1,ca={blue:"#4b8df8",red:"#e02222",green:"#35aa47",purple:"#852b99",grey:"#555555","light-grey":"#fafafa",yellow:"#ffb848",ztebluelight:"#3366cc"},G=function(){var c=window,t="inner";"innerWidth"in window||(t="client",c=document.documentElement||document.body);return{width:c[t+"Width"],height:c[t+"Height"]}},va=function(){var c=getUrlParam("menu");switch(c?c:0){case "1":l=$("#com_zte_ums_ict_framework_ui_page_title_1").text().trim();
+break;case "2":l=$("#com_zte_ums_ict_framework_ui_page_title_2").text().trim();break;case "3":l=$("#com_zte_ums_ict_framework_ui_page_title_3").text().trim();break;default:l=$("#com_zte_ums_ict_framework_ui_page_title").text().trim()}"rtl"===$("body").css("direction")&&(d=!0);g=!!navigator.userAgent.match(/MSIE 8.0/);n=!!navigator.userAgent.match(/MSIE 9.0/);(m=!!navigator.userAgent.match(/MSIE 10.0/))&&$("html").addClass("ie10");(m||n||g)&&$("html").addClass("ie");navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)?
+($(document).on("focus","input, textarea",function(){$(".page-header").hide();$(".page-footer")&&0<$(".page-footer").length&&$(".page-footer").hide()}),$(document).on("blur","input, textarea",function(){$(".page-header").show();$(".page-footer")&&0<$(".page-footer").length&&$(".page-footer").show()})):($(document).on("focus","input, textarea",function(){$(".page-footer")&&0<$(".page-footer").length&&$(".page-footer").hide()}),$(document).on("blur","input, textarea",function(){$(".page-footer")&&0<
+$(".page-footer").length&&$(".page-footer").show()}))},F=function(c){$(".page-loading").remove();$("body").append('<div class="page-loading"><img src="'+ICTFRAME_CONST_SPINNER_GIF_PATH+'"/>&nbsp;&nbsp;<span>'+(c?c:$.i18n.prop("com_zte_ums_ict_framework_ui_loading"))+"</span></div>")},da=function(){G().width<zteframework_smallView?$("body").removeClass("page-sidebar-closed"):"1"===Q("sidebar_closed")&&$("body").addClass("page-sidebar-closed")},W=function(){for(var c=0;c<I.length;c++)I[c].call()},fa=
+function(){da();ea();B();X();W()},wa=function(){da();B();setTimeout(function(){ea(!0)},100)},xa=function(){var c;if(g){var t;$(window).resize(function(){t!=document.documentElement.clientHeight&&(c&&clearTimeout(c),c=setTimeout(function(){fa()},50),t=document.documentElement.clientHeight)})}else $(window).resize(function(){c&&clearTimeout(c);c=setTimeout(function(){fa()},50)})},ga=function(c){var t=$(".nav-pos-direction",$(".zte-theme-panel")).val(),f=$("#page-sidebar-menu"),b=$("#main_hormenu"),
+H=$("#"+fMenuMegaDivId),d=$("#"+fMenuSiderDivId);c?(f.css("display","block"),b.css("display","none"),H.css("display","none"),d.css("display","none")):zteframework_menu_horizontal==t?(f.css("display","none"),H.css("display","none"),d.css("display","none"),b.css("display","block")):zteframework_menu_vertical==t?(f.css("display","block"),b.css("display","none"),H.css("display","none"),d.css("display","none")):zteframework_menu_fmenu==t&&(f.css("display","none"),b.css("display","none"),H.css("display",
+"block"),d.css("display","block"),c=d.children(".sidebar-toggler-wrapper").siblings(),0<c.length&&"none"!=c.css("display")&&(d.css("display","block"),$("body").removeClass("page-full-width"),$("body").hasClass("page-sidebar-closed")?$(".page-content").css("marginLeft",q):$(".page-content").css("marginLeft",u)))},ea=function(c){c=document.body.clientWidth;for(var t=$("a.dropdown-toggle","#main_hormenu"),f=0;f<t.length;f++){for(var b=$(t[f]),H=b.offset().left,d=b.parent().children(".dropdown-menu"),
+g=$(".zteDivWidth",d),h=0,k=0;k<g.length&&0<g.length;k++){var l="",m=0;$("span",g[k]).each(function(){var c=this.innerText;c.length>m&&(m=c.length,l=c)});h=h+getStringWidth(l,14)+94.5}h+H>c?(console.log("ajust class dropdown-menu-right ,id = "+b.attr("id")),d.addClass("dropdown-menu-right")):d.removeClass("dropdown-menu-right")}},B=function(c){var t=$(".page-content"),f=$(".page-content-body"),b=$(".page-sidebar"),d=$("body"),g,h=G(),l=Math.min(window.screen.availHeight,h.height)-5,z=$(".footer"),
+m=$(".page-breadcrumb"),n=$("#pageableDiv");console.log("pageableDiv height:"+n.outerHeight(!0));var u=$(".header");"isc"===(x.items(y)?x.items(y).childpageType:"")&&$(".sidebar-option",panel).val("fixed");var r=ZteFrameWork.getLocationURLParameter("showNav");"false"==r&&(zteframework_showNav=r,ha(),ia());r=l-(!z||0>=z.length?0:z.outerHeight(!0))-u.outerHeight(!0);n=!n||0>=n.length||!1==n.is(":visible")?0:n.outerHeight(!0);f=l-u.outerHeight(!0)-(!z||0>=z.length||!1==z.is(":visible")?0:z.outerHeight(!0))-
+m.outerHeight(!0)-n-(f.outerHeight(!0)-f.height());m=""==y?"page-mainIframe":y;if((n=$(".page-content .page-content-body ."+m))&&0<n.length){if(navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)){var q=h.width-t.offset().left-2*(n.offset().left-t.offset().left);n.width(q)}q=b.attr("style");console.log("pym:parent iframe "+m+" sidebar.height:"+b.height()+" h:"+f);f=b.height()>f?b.height():f;b.attr("style",q);if(!k){q=f;try{q=n.contents().height()}catch(Ja){}f=q>f?q:f}x.items(m).setMinHeight&&
+(n=Math.min(l,f),console.log("pym:parent iframe "+m+" window.screen.availHeight:"+l+" viewport.height:"+h.height+" h:"+f+" minHeight:"+n),x.items(m).setMinHeight(n))}!0===d.hasClass("page-footer-fixed")&&!0===d.hasClass("page-sidebar-fixed")?t.height()<r&&K(t,"min-height",r+"px",!0):!0===d.hasClass("page-footer-fixed")&&!1===d.hasClass("page-sidebar-fixed")?t.height()<r&&K(t,"min-height",r+"px",!0):(d.hasClass("page-sidebar-fixed")?g=ja():(q=b.attr("style"),b.attr("style",q),b=u.outerHeight(!0),z=
+!z||0>=z.length?0:z.outerHeight(!0),1024<$(window).width()&&g+b+z<l&&(g=l-b-z)),g<=t.height()&&K(t,"min-height",g+"px",!0));$(window).width()>=zteframework_smallView?(ga(),"none"!=$(".page-sidebar-menu li").css("display")&&$("body").hasClass("page-sidebar-closed")&&$(".sidebar-toggler").hasClass("close-by-viewportChange")&&(c||$(".sidebar-toggler")[1].click(),$(".sidebar-toggler").removeClass("close-by-viewportChange"))):ga(!0)},ya=function(c){var t;if(0<w.count())for(var f in w.hash()){w.replace(f,
+0);var b=$(".page-content .page-content-body ."+f);b&&0<b.length&&(c==f?(b.show(),w.replace(f,1)):("page-mainIframe"===f?(t=f,b.attr("src",""),b.remove()):b.hide(),w.replace(f,0)))}t&&(delete w._hash[t],delete x._hash[t]);w.contains(c)||(w.add(c,1),myIframe=$("."+c),myIframe.show(),myIframe.load(function(){ZteFrameWork.stopPageLoading()}))},ha=function(){$(".hor-menu").hide();K($(".page-content"),"margin-left","0px",!0);K($(".page-sidebar"),"display","none",!0);$("#"+fMenuSiderDivId).children().css("display",
+"none")},ia=function(){$("#header_notification_bar").html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>")},Aa=function(c){var b=$(".zte-theme-panel"),b=$(".nav-pos-direction",b).val(),f=null,p=null;"vertical"===b?(f=$("#"+c.attr("id"),$("#main_hormenu")),p=$(".header ul")):"horizontal"===b?(f=za(c),ka(c,megaSiderDivId),p=f[0],f=f[1]):b===zteframework_menu_fmenu&&ka(c,fMenuSiderDivId);p&&(p.children("li.active").removeClass("active"),p.find(".arrow.open").removeClass("open"));f&&(f.parents("li").each(function(){$(this).addClass("iframe active");
+$(this).find("a > span.arrow").addClass("open")}),f.parents("li").addClass("active"),"horizontal"===b&&f.parent().parent().parent().is("li")&&$(".arrow",f.parent().parent().parent()).addClass("open"))},za=function(c){targetsource=$("#"+c.attr("id"),$("[class='page-sidebar-menu']"));targetContainer=$("#page-sidebar-menu ul");$("li.open",targetContainer).each(function(){$("ul.sub-menu",this).attr("style")&&($("ul.sub-menu",this).removeAttr("style"),$(this).removeClass("open"))});if(0<=c.parent().parent().parent().parent().attr("class").indexOf("page-sidebar-menu")){c=
+$("#"+c.attr("id"),$("#main_hormenu"));var b=$(".header ul");b.children("li.active").removeClass("active");b.find(".arrow.open").removeClass("open");c.parents("li").each(function(){$(this).addClass("iframe active");$(this).find("a > span.arrow").addClass("open")});c.parents("li").addClass("active")}return[targetContainer,targetsource]},ka=function(c,b){var f=$("#"+b);if(R)R=!1;else if($(c).parents("li").hasClass("mega-menu-dropdown")){var p=c.attr("id");$("#"+b+">li").hide();var d=$("a[hparentid= "+
+p+"]",f).parent();d.show();0<d.length&&$("#"+b+">li.sidebar-toggler-wrapper").show();0<$("a[hparentid= "+p+"]",f).length?la(c,b):(f.css("display","none"),$("body").addClass("page-full-width"),$(".page-content").css("marginLeft",u))}else"true"==zteframework_showNav&&($("#"+b+">li").hide(),p=$(c).parents("li"),p=p.eq(p.length-1).children("a").attr("hparentid"),d=$("a[hparentid="+p+"]",f).parent(),d.show(),0<d.length&&$("#"+b+">li.sidebar-toggler-wrapper").show(),la(c,b))},la=function(c,b){var f=$("#"+
+b);f.css("display","block");$("ul.sub-menu",f).css("display","block");$(".arrow",f).addClass("open");$("body").removeClass("page-full-width");$("body").hasClass("page-sidebar-closed")?$(".page-content").css("marginLeft",q):$(".page-content").css("marginLeft",u);var p=c.attr("href");$("li.iframe",f).removeClass("active");f=$("a[href ='"+p+"']",f).parent();f.addClass("active");f.parent().parent().addClass("open").addClass("active");f.parent().css("display","block");f.parent().parent().children("a").children(".arrow").addClass("open")},
+Z=function(c,b,f){var p=c.attr("href");if(p&&!(2>p.length)){b.preventDefault();D||(D=!0,p=c.parents("li").last(),p.hasClass("open")||Y(p.children("a:eq(0)")));f&&0<f.length&&$("."+f+" ul").children("li.active").removeClass("active");c.parents("li").each(function(){$(this).addClass("iframe active");$(this).children("a > span.arrow").addClass("open")});c.parents("li").addClass("active");Aa(c);f&&0<f.length&&991>=$(window).width()&&$("."+f).hasClass("in")&&$(".navbar-toggle").click();if(dealMultTabPage(c))return!0;
+f=b.data&&b.data.breadcrumbBtnMenuItem&&0<b.data.breadcrumbBtnMenuItem.length?b.data.breadcrumbBtnMenuItem:"";0<f.length?(c=$("#"+f,$("#pageableDiv")),0==c.length&&(c=$("#"+f,$(".more-botton-zone"))),L(c,b)):(F(),S(c,b)&&M(c,!1,b))}},Ba=function(c,b,f){var p=c.attr("href");!p||2>p.length||(b.preventDefault(),D||(D=!0,b=c.parents("li").last(),Y(b.children("a:eq(0)"))),f&&0<f.length&&(b=$("."+f+" ul"),b.children("li.active").removeClass("active"),b.children("arrow.open").removeClass("open")),c.parents("li").each(function(){$(this).addClass("iframe active");
+$(this).children("a > span.arrow").addClass("open")}),c.parents("li").addClass("active"),f&&0<f.length&&991>=$(window).width()&&$("."+f).hasClass("in")&&$(".navbar-toggle").click())},S=function(c,b){function f(c,b,f,t,d,p,g){c=new pym.Parent(c,b,{xdomain:p});c.iframe.id=f;c.iframe.name=t;c.iframe.setAttribute("class",d);c.iframe.setAttribute("allowfullscreen","");c.iframe.setAttribute("mozallowfullscreen","");c.iframe.setAttribute("oallowfullscreen","");c.iframe.setAttribute("msallowfullscreen","");
+c.iframe.setAttribute("webkitallowfullscreen","");c.iframe.setAttribute("onload",'ZteFrameWork.SyncCSS(this,0,"'+m+'");ZteFrameWork.stopPageLoading();');x.replace(f,c);c.onMessage("height",function(c){console.log("The frame "+f+" receive message height is "+c);var b=$(".page-content .page-content-body ."+f);c=Math.max(this.minHeight,c);b.height(c)});return c}v="";var p=c.attr("href");if(p&&!(2>p.length)){var p=ZteFrameWork.handlBaseURL(p),d=c.attr("category");if(d&&0<d.length&&(d=V.items(d))&&d.ipPort&&
+""!=d.ipPort.trim()){var d=ZteFrameWork.getDomainURL(d.ipPort),g=ZteFrameWork.getDomainURL(p);console.log("old url:"+p);p=d+p.replace(g,"");console.log("newIpPort:"+d+"      newURL:"+p)}F();var h=c.attr("cacheNum"),k=c.attr("shiftJS");c.attr("iframeName");var l=c.attr("iframeAutoScroll"),l=l?"yes"===l?"yes":"auto"===l?"auto":"no":"no";_xdomain=(_xdomain=c.attr("xdomain"))&&0<_xdomain.length?_xdomain:"*";var m=c.attr("cssSrc"),m=m&&0<m.length?m:"",n="",u=$(".page-content .page-content-body");y=h=h?
+"page-mainIframe"+h:"page-mainIframe";var d=""==y?"page-mainIframe":y,g=$(".page-content .page-content-body ."+d),r=b&&b.data&&b.data.action?b.data.action:"",r=r&&0<r.length?"null"==r.trim().toLowerCase()?r:"javascript:$('.page-content .page-content-body ."+d+"')[0].contentWindow."+r.trim()+";":"",r=r.trim(),n=k&&0<k.length?"null"==k.trim().toLowerCase()?k:"javascript:$('.page-content .page-content-body ."+d+"')[0].contentWindow."+k+";":"";if(g&&0<g.length)if(l=g.attr("src"),!(k||0<r.length)||l!=
+p&&l.split("?")[0]!=p.split("?")[0]||"page-mainIframe"==h)0<r.length&&"null"!=r.toLowerCase()&&(p=p.split("?")[0]),l.split("#")[0]!=p.split("#")[0]?g.attr("src",""):ZteFrameWork.stopPageLoading(),g.attr("src",p),0<r.length&&"null"!=r.toLowerCase()&&(p={nagivJS:r},g.one("load",p,function(c){c=c&&c.data&&c.data.nagivJS?c.data.nagivJS:"";0<c.length&&"null"!=c.toLowerCase()&&eval(c)})),0<m.length&&"null"!=m.toLowerCase()&&(p={syncCSSJS:'ZteFrameWork.SyncCSS(this,10,"'+m+'");ZteFrameWork.stopPageLoading();'},
+g.one("load",p,function(c){c=c&&c.data&&c.data.syncCSSJS?c.data.syncCSSJS:"";0<c.length&&"null"!=c.toLowerCase()&&eval(c)}));else{x.items(d).settings.xdomain=_xdomain;0<r.length&&"null"!=r.toLowerCase()&&(n=r);try{"null"!=n.trim().toLowerCase()&&eval(n)}catch(q){return q instanceof EvalError?console.log(q.name+" EvalError:  "+q.message):q instanceof SyntaxError?console.log(q.name+" SyntaxError:  "+q.message):q instanceof Error&&"typeerror"==q.name.toLowerCase().trim()&&(p={runShiftJS:n},g.one("load",
+p,function(c){c=c&&c.data&&c.data.runShiftJS?c.data.runShiftJS:"";0<c.length&&"null"!=c.toLowerCase()&&eval(c)})),!1}finally{ZteFrameWork.stopPageLoading()}}else if(0<r.length&&"null"!=r.toLowerCase()&&(p=p.split("?")[0]),g="pdiv_"+d,0>=$("#"+g).length&&u.append("<div id='"+g+"'></div>"),F(),pymParent=f(g,p,d,d,d,_xdomain,l),g=$(pymParent.iframe),0<r.length&&"null"!=r.toLowerCase()&&(p={nagivJS:r},(g=$(".page-content .page-content-body ."+d))&&0<g.length))g.one("load",p,function(c){c=c&&c.data&&c.data.nagivJS?
+c.data.nagivJS:"";0<c.length&&"null"!=c.toLowerCase()&&eval(c)});ya(d);ZteFrameWork.fixContentHeight();return!0}},Y=function(c){if(!1==c.next().hasClass("sub-menu"))!1==$(".btn-navbar").hasClass("collapsed")&&$(".btn-navbar").click();else if(!c.next().hasClass("sub-menu always-open")){var b=c.parent().parent(),f=$(".page-sidebar-menu"),d=c.next(),g=f.data("auto-scroll")?f.data("auto-scroll"):!0,f=f.data("slide-speed")?parseInt(f.data("slide-speed")):200;b.children("li.open").children("a").children(".arrow").removeClass("open");
+b.children("li.open").children(".sub-menu:not(.always-open)").slideUp(200);b.children("li.open").removeClass("open");d.is(":visible")?($(".arrow",c).removeClass("open"),c.parent().removeClass("open"),d.slideUp(f,function(){!0==g&&!1==$("body").hasClass("page-sidebar-closed")&&$("body").hasClass("page-sidebar-fixed");B()})):($(".arrow",c).addClass("open"),c.parent().addClass("open"),d.slideDown(f,function(){!0==g&&!1==$("body").hasClass("page-sidebar-closed")&&$("body").hasClass("page-sidebar-fixed");
+B()}))}},Ca=function(){$(".page-sidebar").on("click","li > a",function(c){!1==$(this).next().hasClass("sub-menu")?!1==$(".btn-navbar").hasClass("collapsed")&&$(".btn-navbar").click():$(this).next().hasClass("sub-menu always-open")||(Y($(this)),c.preventDefault())});$(".page-sidebar").on("click"," li > a.iframe",function(c){c.preventDefault();var b=$(this).attr("id");b&&0<b.length&&(N(b),v="dhByInterface");D=!0;Z($(this),c,"page-sidebar")});$(".page-breadcrumb").on("click"," li > a.iframe",function(c){2>
+$(this).attr("href").length||(c.preventDefault(),L($(this),c))});$("#pageableDiv").on("click"," div > a.iframe",function(c){2>$(this).attr("href").length||(c.preventDefault(),L($(this),c))});$("#pageableDiv").on("click"," li > a.iframe",function(c){if(!(2>$(this).attr("href").length)){c.preventDefault();if(c.target){var b=$("span",c.target),b=0<b.length?b[0]:c.target;$(".open a>div>span",c.target.parentNode.parentNode.parentNode.parentNode.parentNode).replaceWith(b.outerHTML)}L($(this),c)}});$(".dropdown").on("click",
+" li > a.iframe",function(c){2>$(this).attr("href").length||(c.preventDefault(),F(),S($(this),c),M($(this),!1,c))})},ma="",T=!0,U=null,aa=function(c,b){if(!(2>c.length))if(c=ZteFrameWork.handlBaseURL(c),ma==c)if(!0===b)$("#pageableDiv").show();else{if(b&&b.target&&b.currentTarget){var f=$(b.target).attr("defaultDisplay");(f=f?f:$(b.currentTarget).attr("defaultDisplay"))&&"false"==f.trim()?$("#pageableDiv").hide():$("#pageableDiv").show()}}else{ma=c;clearMoreOperations();var d=b&&b.data&&b.data.breadcrumbBtnMenuItem&&
+0<b.data.breadcrumbBtnMenuItem.length?b.data.breadcrumbBtnMenuItem:"",d=0>=d.length?b&&b.breadcrumbBtnMenuItem&&0<b.breadcrumbBtnMenuItem.length?b.breadcrumbBtnMenuItem:"":d;T=!1;$.ajax({type:"GET",cache:!1,url:c,dataType:"html",success:function(c){try{var f=stripHtmlScripts(c);$(".more-botton-zone").children().remove();var g=$('<div style="display:none"></div>');g.children().remove();g.append(f);var h=$(".dropdown-menu",g).attr("displayType");if(h&&"pageableDiv"!=h)$(".more-botton-zone").append(f),
+$("#pageableDiv").hide();else{var k=$(".dropdown-menu",g);if(0<k.length&&(moreOperations(k[0]),b&&b.target&&b.currentTarget)){var l=$(b.target).attr("defaultDisplay");(l=l?l:$(b.currentTarget).attr("defaultDisplay"))&&"false"==l.trim()?$("#pageableDiv").hide():$("#pageableDiv").show()}}runHtmlScripts(c)}catch(m){}finally{T=!0}groupButtonAuthentication();if(0<d.length){c=void 0;g=$(".zte-theme-panel");f=void 0;f="vertical"===$(".nav-pos-direction",g).val()?$("#page-sidebar-menu a[id='"+d+"']"):$(".hor-menu a[id='"+
+d+"']");if(!f||1>f.length)f=$(".page-content a[id='"+d+"']");if(0<f.length)for(g=0;g<f.length;g++){if($(f[g]).parentsUntil(".more-botton-zone .btn-group").hasClass("dropdown-menu")){c=$(f[g]);break}if($(f[g]).parentsUntil("#pageableDiv").hasClass("row1")){c=$(f[g]);break}}c&&0<c.length&&L(c,b)}},error:function(c,b,f){$(".page-breadcrumb").append("<h4>"+$.i18n.prop("com_zte_ums_ict_framework_ui_loadmenuerror")+"</h4>");T=!0}})}};dealMultTabPage=function(c){var b=c.attr("href");if(b&&!(2>b.length)){var f=
+c.attr("redirect");if(f&&0<f.length){var d=$(".page-content .page-content-body ."+(""==y?"page-mainIframe":y)),g="";if(d&&0<d.length&&(g=d.attr("src"),b.split("?")[0]==g.split("?")[0]))return eval(f),M(c,!1,e),!0}return!1}};var E="",na="",ba=!1,M=function(c,b,f){var d=$(".breadcrumbUl");ZteFrameWork.setPageTitle(c.find("span").text().trim());var g=c.parent("li");0==g.length&&(g=c.parent("div"));var h=$(".nav-pos-direction",panel).val();c.attr("hparentid");var k=c.attr("breadcrumGroupButtonSrc");na=
+c.attr("id");var l=c="",m=null;if(ba)b=E.indexOf(g.children("a").attr("name")),-1<b?(b=E.indexOf("<i class='fa fa-angle-right'>",b),c=E.substring(0,b)+"<i class='fa fa-angle-right'></i>"):c=void 0,ba="";else{for(;g&&0<g.length;)g.children("a")&&(b?l=g.children("a").attr("name"):(l=ZteFrameWork.getUniqueID("aid"),g.children("a").attr("name",l)),m=g.clone(),m.children("a").removeClass("iframe"),m.children("a").removeClass("active"),m.children("a").attr("href","javascript:ZteFrameWork.goToURL('"+l+"');"),
+(l=$(".fa-angle-down",m.children("a")))&&l.remove(),0<m.children("a").length&&(c=m.children("a")[0].outerHTML+"<i class='fa fa-angle-right'></i>"+c),g.parent("ul").attr("id")==fMenuSiderDivId||g.parent("ul").attr("id")==megaSiderDivId?(g=g.children("a").attr("hparentid"),h==zteframework_menu_horizontal?magaMenu=$("#"+megaDivId):h==zteframework_menu_fmenu&&(magaMenu=$("#"+fMenuMegaDivId)),g=$("a[id="+g+"]",magaMenu).parent("li")):g=g.parents("li"));g[0]&&0<g[0].length&&(c=g.children("a")[0].outerHTML+
+"<i class='fa fa-angle-right'></i>"+c)}d.empty();$(".more-botton-zone").empty();E=c;store("globleCurrentBreadcrumb",E);d.append(c);k&&0<k.length?aa(k,f):$("#pageableDiv").hide()},oa=function(c,b,f){b=$(".breadcrumbUl");var d=c.parent(),g=c.attr("breadcrumGroupButtonSrc");f="";var h=null,h=c.attr("id");for(C.contains(h)||C.add(h,na);d&&0<d.length;)if(h=d.clone(),h.children("a")){h.children("a").removeClass("iframe");h.children("a").attr("href");h.children("a").attr("onclick","ZteFrameWork.openbreadcrumbLink($(this),event);");
+var k=h.children("a").children("div");if(0<k.length){var l=k[0].innerHTML;k.remove();h.children("a")[0].innerHTML=l}0<h.children("a").length&&(f=h.children("a")[0].outerHTML+"<i class='fa fa-angle-right'></i>"+f);d=d.parents("li")}d[0]&&0<d[0].length&&(f=d.children("a")[0].outerHTML+"<i class='fa fa-angle-right'></i>"+f);g&&0<g.length?aa(g,!0):$("#pageableDiv").hide();b.empty();(c=c.attr("category"))&&0<c.length&&(c=V.items(c))&&c.ipTitle&&""!=c.ipTitle.trim()&&(f=c.ipTitle+'<i class="fa fa-angle-right"></i>'+
+f);f=E+f;b.append(f)},R=!1,L=function(c,b){var f=c.attr("id");f&&0<f.length&&(N(f),v=(f=b&&b.data&&b.data.breadcrumbBtnMenuItem&&0<b.data.breadcrumbBtnMenuItem.length?b.data.breadcrumbBtnMenuItem:"")&&0<f.length?"":"dhByInterface");b&&b.breadcrumbBtnMenuItem&&0<b.breadcrumbBtnMenuItem.length||(F(),S(c,b));oa(c,!1,b)},ja=function(){var c=G().height-$(".header").height()+1;$("body").hasClass("page-footer-fixed")&&(c=c-(!$(".footer")||0>=$(".footer").length)?0:$(".footer").outerHeight());return c},X=
+function(){var c=$(".page-sidebar-menu");1===c.parent(".slimScrollDiv").size()&&(c.removeAttr("style"),$(".page-sidebar").removeAttr("style"));0===$(".page-sidebar-fixed").size()?B():G().width>=zteframework_smallView&&(ja(),B())},pa=function(){!1!==$("body").hasClass("page-sidebar-fixed")&&($(".page-sidebar").off("mouseenter").on("mouseenter",function(){Da()}),$(".page-sidebar").off("mouseleave").on("mouseleave",function(){Ea()}))},Da=function(){var c=$("body"),b=$(".page-sidebar");!1===c.hasClass("page-sidebar-closed")||
+!1===c.hasClass("page-sidebar-fixed")||$(this).hasClass("page-sidebar-hovering")||(c.removeClass("page-sidebar-closed").addClass("page-sidebar-hover-on"),$(".sidebar-toggler"),c.hasClass("page-sidebar-reversed")?b.width(u):(b.addClass("page-sidebar-hovering"),b.animate({width:u},350,"",function(){b.removeClass("page-sidebar-hovering")})))},Ea=function(){var c=$("body");if(!1!==c.hasClass("page-sidebar-hover-on")&&!1!==c.hasClass("page-sidebar-fixed")&&!$(this).hasClass("page-sidebar-hovering")){var b=
+$(".page-sidebar"),f=$(".sidebar-toggler");c.hasClass("page-sidebar-reversed")?(c.addClass("page-sidebar-closed").removeClass("page-sidebar-hover-on"),b.width(q),f&&f.removeAttr("style")):(b.addClass("page-sidebar-hovering"),b.animate({width:q},350,"",function(){c.addClass("page-sidebar-closed").removeClass("page-sidebar-hover-on");b.removeClass("page-sidebar-hovering");f&&f.removeAttr("style")}))}},K=function(c,b,f,d){var g=c.attr("style")?c.attr("style"):"";styles=g.split(";");var h="";for(i=0;i<
+styles.length;i++)if(0<=styles[i].indexOf(b)){h=styles[i];break}g=0<h.length?g.replace(h,""):g;g=(g+";"+b+":"+f+(d?" !important":"")+";").replace(/;;/g,";");c.attr("style",g)},Fa=function(){var c=G();"1"===Q("sidebar_closed")&&c.width>=zteframework_smallView&&$("body").addClass("page-sidebar-closed");$(".page-sidebar, .sidebar-toggler").on("click",".sidebar-toggler",function(c){c.preventDefault();c=$("body");$(".page-sidebar");c.hasClass("page-sidebar-closed")&&$(this).removeAttr("style")});$(".page-sidebar, .header").on("click",
+".sidebar-toggler",function(c){var b=$("body"),d=$(".page-sidebar");b.hasClass("page-sidebar-hover-on")&&b.hasClass("page-sidebar-fixed")||d.hasClass("page-sidebar-hovering")?(b.removeClass("page-sidebar-hover-on"),d.css("width","").hide().show(),B(),A("sidebar_closed","0"),c.stopPropagation()):($(".sidebar-search",d).removeClass("open"),c=$(".zte-theme-panel"),$(".sidebar-pos-option",c).val(),c=$("[class='page-content']"),b.hasClass("page-sidebar-closed")?(b.removeClass("page-sidebar-closed"),b.hasClass("page-sidebar-fixed")&&
+d.css("width",""),A("sidebar_closed","0"),c.css("marginLeft",u)):(b.addClass("page-sidebar-closed"),$(this).removeAttr("style"),A("sidebar_closed","1"),c.css("marginLeft",q)),B(!0));W()})},Ga=function(){$(".header").on("click",".hor-menu .hor-menu-search-form-toggler",function(c){$(this).hasClass("off")?($(this).removeClass("off"),$(".header .hor-menu .search-form").hide()):($(this).addClass("off"),$(".header .hor-menu .search-form").show());c.preventDefault()});$(".header").on("click"," li > a.iframe",
+function(c){c.preventDefault();var b=$(this).attr("id");b&&0<b.length&&(N(b),v="dhByInterface");D=!0;Z($(this),c,"header")});$(".header").on("click",'.hor-menu a[data-toggle="tab"]',function(c){c.preventDefault();c=$(".hor-menu .nav").find("li.current");$("li.active",c).removeClass("active");$(".selected",c).remove();c=$(this).parents("li").last();c.addClass("current");c.find("a:first").append('<span class="selected"></span>')})},qa=function(){var c=0;return setInterval(function(){var b;null==b&&
+(b=ZteFrameWork_conf.userName);b=FrameConst.REST_HEARTBEAT+"?username="+encodeURIComponent(b);$.ajax(b,{dataType:"text",cache:!1}).done(function(b){"true"==b&&(c=0)});c++;6<=c&&(disableHeartbeat(),bootbox.alert($.i18n.prop("com_zte_ums_aos_framework_ui_heartbeat_fail"),function(){window.location.replace("login.html")}))},1E4)};if(FrameConst.do_heartbeat)var O=qa();window.enableHeartbeat=function(){return O?"Already enabled!":(heartBeatTimes=0,O=qa(),"Enabled")};window.disableHeartbeat=function(){return O?
+(clearInterval(O),O=null,"Disabled"):"Already disabled!"};window.doLogout=function(){window.location=FrameConst.REST_LOGOUT};$("#trigger_logout").click(function(){bootbox.confirm($.i18n.prop("com_zte_ums_ict_framework_ui_confirmlogout"),function(c){c&&doLogout()})});var P=!1,Ha=function(){function c(){if(screenfull.supportsFullScreen)screenfull.isFullScreen?screenfull.exitFullScreen():screenfull.requestFullScreen(),P=screenfull.isFullscreen;else if(isIE&&"undefined"!==typeof window.ActiveXObject){var c=
+new ActiveXObject("WScript.Shell");null!==c&&(c.SendKeys("{F11}"),P=!P)}else P=screenfull.supportsFullScreen;setTimeout(function(){P?$("#fullscreen_label").text($.i18n.prop("com_zte_ums_ict_framework_ui_group_exitfullscreen")):$("#fullscreen_label").text($.i18n.prop("com_zte_ums_ict_framework_ui_group_fullscreen"))},500)}$("#trigger_fullscreen").click(function(){c()})},ra=function(c){if(0<w.count())for(var b in w.hash()){var f=$(".page-content .page-content-body ."+b);f&&0<f.length&&(!0==c?(f.attr("src",
+""),f.remove()):b!=y&&f.attr("src",""),f.remove())}w.clear();if(0<x.count())for(b in x.hash())b!=y&&x.remove(b)},sa="",Ia=function(){var c=$(".zte-theme-panel");!1==$("body").hasClass("page-boxed")&&$(".layout-option",c).val("fluid");$(".sidebar-option",c).val("default");$(".language-option",c).val(b);$(".header-option",c).val("fixed");$(".footer-option",c).val("default");!1===$(".sidebar-pos-option").attr("disabled")&&$(".sidebar-pos-option",c).val(ZteFrameWork.isRTL()?"right":"left");var d=function(c){var b=
+ZteFrameWork.isRTL()?c+"-rtl":c;$("#style_color").attr("href",ICTFRAME_CONST_THEME_COLOR_CSS_PREFFIX+b+".css");A("style_color",c);c=null;if(0<w.count())for(var d in w.hash())(c=$(".page-content .page-content-body ."+d))&&0<c.length&&ZteFrameWork.SyncCSS(c[0],1,"")};$(".toggler",c).click(function(){$(".toggler").hide();$(".toggler-close").show();$(".zte-theme-panel > .theme-options").show()});$(".toggler-close",c).click(function(){$(".toggler").show();$(".toggler-close").hide();$(".zte-theme-panel > .theme-options").hide()});
+$(".theme-colors > ul > li",c).click(function(){var b=$(this).attr("data-style");d(b);$("ul > li",c).removeClass("current");$(this).addClass("current")});$(".layout-option,.header-option, .sidebar-option, .footer-option, .sidebar-pos-option, .nav-pos-direction",c).change(function(){ta()});void 0!=Q("style_color")&&d(Q("style_color"));$(".language-option",c).change(function(){var b=$(".language-option",c).val();A("language-option",b);window.location.reload()})},ta=function(){var c=$(".zte-theme-panel"),
+b=$(".layout-option",c).val(),f=$(".language-option",c).val(),d=$(".header-option",c).val(),g=$(".footer-option",c).val(),h=$(".nav-pos-direction",c).val();var k=$(".zte-theme-panel");if("disabled"!=$(".nav-pos-direction",k).attr("disabled")){var l=$("#page-sidebar-menu"),m=$("#main_hormenu"),l=$("#page-sidebar-menu"),m=$("#main_hormenu"),n=$("#"+megaSiderDivId),v=$("#"+fMenuMegaDivId),w=$("#"+fMenuSiderDivId),r=$("[class='page-content']");l&&0<l.length&&m&&0<m.length&&v&&0<v.length&&(h===zteframework_menu_horizontal?
+(l.css("display","none"),v.css("display","none"),w.css("display","none"),r.css("marginLeft",0),$("body").addClass("page-full-width"),m.css("display","block"),$(".sidebar-option",k).val("default"),$(".sidebar-option",k).attr("disabled",!0),$(".sidebar-pos-option",k).val("left"),$(".sidebar-pos-option",k).attr("disabled",!0)):h===zteframework_menu_vertical?($("body").removeClass("page-full-width"),l.css("display","block"),$("body").hasClass("page-sidebar-closed")?r.css("marginLeft",q):r.css("marginLeft",
+u),m.css("display","none"),v.css("display","none"),w.css("display","none"),n.css("display","none"),$(".sidebar-option",k).attr("disabled",!1),$(".sidebar-pos-option",k).attr("disabled",!1)):h===zteframework_menu_fmenu&&(l.css("display","none"),m.css("display","none"),w.css("display","none"),v.css("display","block"),r.css("marginLeft",0),$("body").addClass("page-full-width"),$(".sidebar-option",k).val("default"),$(".sidebar-option",k).attr("disabled",!0),$(".sidebar-pos-option",k).val("left"),$(".sidebar-pos-option",
+k).attr("disabled",!0)))}k=$(".sidebar-option",c).val();l=$(".sidebar-pos-option",c).val();"fixed"==k&&"default"==d&&(alert($.i18n.prop("com_zte_ums_ict_framework_ui_fixedsidedefaultheaderError")),$(".header-option",c).val("fixed"),$(".sidebar-option",c).val("fixed"),d=k="fixed");"fixed"==k&&"right"==l&&(alert($.i18n.prop("com_zte_ums_ict_framework_ui_fixedsiderightpositionError")),$(".sidebar-pos-option",c).val("left"),l="left");$("body").removeClass("page-boxed").removeClass("page-footer-fixed").removeClass("page-sidebar-fixed").removeClass("page-header-fixed").removeClass("page-sidebar-reversed");
+$(".header > .header-inner").removeClass("container");1===$(".page-container").parent(".container").size()&&$(".page-container").insertAfter("body > .clearfix");1===$(".footer > .container").size()?$(".footer").html($(".footer > .container").html()):1===$(".footer").parent(".container").size()&&$(".footer").insertAfter(".page-container");$("body > .container").remove();"boxed"===b&&($("body").addClass("page-boxed"),$(".header > .header-inner").addClass("container"),$("body > .clearfix").after('<div class="container"></div>'),
+$(".page-container").appendTo("body > .container"),"fixed"===g?$(".footer").html('<div class="container">'+$(".footer").html()+"</div>"):$(".footer").appendTo("body > .container"));sa!=b&&W();sa=b;"fixed"===d?($("body").addClass("page-header-fixed"),$(".header").removeClass("navbar-static-top").addClass("navbar-fixed-top")):($("body").removeClass("page-header-fixed"),$(".header").removeClass("navbar-fixed-top").addClass("navbar-static-top"));!1===$("body").hasClass("page-full-width")&&("fixed"===
+k?$("body").addClass("page-sidebar-fixed"):$("body").removeClass("page-sidebar-fixed"));"fixed"===g?$("body").addClass("page-footer-fixed"):$("body").removeClass("page-footer-fixed");ZteFrameWork.isRTL()?"left"===l?($("body").addClass("page-sidebar-reversed"),$("#frontend-link").tooltip("destroy").tooltip({placement:"right"})):(c=$("[class='page-content']"),c.css("marginLeft",0),$("body").removeClass("page-sidebar-reversed"),$("#frontend-link").tooltip("destroy").tooltip({placement:"left"})):"right"===
+l?(c=$("[class='page-content']"),c.css("marginLeft",0),$("body").addClass("page-sidebar-reversed"),$("#frontend-link").tooltip("destroy").tooltip({placement:"left"})):($("body").removeClass("page-sidebar-reversed"),$("#frontend-link").tooltip("destroy").tooltip({placement:"right"}));B();X();pa();A("layout-option",b);A("language-option",f);A("header-option",d);A("sidebar-option",k);A("sidebar-pos-option",l);A("nav-pos-direction",h)},A=function(c,b){store&&store(c,b)},Q=function(c){if(store)return store(c)},
+N=function(c){location.hash="#_"+c},ua=function(c,b,f,d){var g=$.url(ZteFrameWork.getCurrentScript(document)).attr("directory")+"proxy/proxy.html",g=$('<iframe id="ifm_Proxy" name="ifm_Proxy" oldproxyorigin="'+b+'" src="'+b+g+'" style="border: 0px; margin: 0px; padding: 0px; width: 100%; display:none;" ></iframe>'),h=$("#ifm_Proxy");h.hide();var k=$(".page-content .page-content-body"),l=[],m=[],n=[],q="";for(i=0;i<f.length;i++)"undefined"!==typeof f[i].link.href?(q=f[i].link.href,n.push("css")):"undefined"!==
+typeof f[i].link.src?f[i].link.src&&0<f[i].link.src.length?(q=f[i].link.src,n.push("javascriptfile")):(q=f[i].link.text,n.push("javascripttext")):n.push("undefined"),l.push(q),m.push({pos:f[i].pos,scope:f[i].scope,id:f[i].link.id});c={iFrame:c,cssLinktyps:n,cssLinksrcs:l,cssLinkids:m,origin:b,flag:d};h&&0>=h.length?(g.appendTo(k),g.one("load",c,function(c){var b={iFrame:c.data.iFrame,cssLinktyps:c.data.cssLinktyps,cssLinksrcs:c.data.cssLinksrcs,cssLinkids:c.data.cssLinkids,flag:d};$("#ifm_Proxy")[0].contentWindow.postMessage(b,
+c.data.origin)})):h.attr("oldproxyorigin")!=b?(h.attr("src",""),h.attr("oldproxyorigin",b),h.one("load",c,function(c){var b={iFrame:c.data.iFrame,cssLinktyps:c.data.cssLinktyps,cssLinksrcs:c.data.cssLinksrcs,cssLinkids:c.data.cssLinkids,flag:d};$("#ifm_Proxy")[0].contentWindow.postMessage(b,c.data.origin)}),h.attr("src",g.attr("src"))):h[0].contentWindow.postMessage({iFrame:c.iFrame,cssLinktyps:c.cssLinktyps,cssLinksrcs:c.cssLinksrcs,cssLinkids:c.cssLinkids,flag:d},c.origin)};return{init:function(){zte_http_headers&&
+store("zte_http_headers",zte_http_headers);va();xa();wa();ra(!0);C.clear();X();pa();Ca();Ga();Fa();Ia();ta();$(function(){$(window).on("hashchange",function(){var c=location.hash.replace("#_","");if(c&&0<c.length)if("dhByInterface"==v.trim())v="";else{var b=c,f=void 0,d=c.indexOf("/");-1!=d&&(b=c.substring(0,d),f=c.substring(d+1));ZteFrameWork.goToURLByIDAndNewAction(b,f)}})});Ha();$("#header_dropdown_user").css("display","block");$("#com_zte_ums_ict_framework_img_netnumenLogo").css("display","inline");
+$("#com_zte_ums_ict_framework_ui_main_title").css("display","inline");handeCtxMenuitem()},clearCachedIframes:function(c){ra(c)},setBaseURLRoot:function(c){store&&store("baseURLRoot",c);c=$.url(c);location.hash=c.attr("fragment");c=c.attr("query");store&&store("baseURLRootAuth",c)},getBaseURLRoot:function(c){c="";store&&(c=store("baseURLRoot"));return c?c:""},clearBaseURLRoot:function(){store&&store("baseURLRoot","",-1)},setPageTitle:function(c){$("title").html(c+" - "+l)},getLanguage:function(){return ZteFrameWork_conf.acceptLanguage},
+getLocationHash:function(){return location.hash.replace("#_","")},setSceneURLRootPath:function(c){c&&0<c.trim().length&&(J=c.trim(),"/"!=J.charAt(J.length-1)&&(J+="/"))},addResponsiveHandler:function(c){I.push(c)},hiddenAlarmLight:function(){ia()},hiddenMenu:function(){ha()},setBreadcrumbByMenuID:function(c){var b=void 0,f=void 0,d=$(".zte-theme-panel"),d=$(".nav-pos-direction",d).val();if("vertical"===d){if(f=$("#page-sidebar-menu a[id='"+c+"']"),!f||1>f.length)f=$(".page-content a[id='"+c+"']")}else d===
+zteframework_menu_horizontal?(f=$("#main_hormenu a[id='"+c+"']"),0==f.length&&(f=$("#page-megachild-sidebar-menu a[id='"+c+"']"))):d===zteframework_menu_fmenu&&(f=$("#f_hormenu a[id='"+c+"']"),0==f.length&&(f=$("#page-f-sidebar-menu a[id='"+c+"']")));d=!1;if(0<f.length)for(var g=0;g<f.length;g++)if($(f[g]).parentsUntil(".header-inner").hasClass("hor-menu")){b=$(f[g]);break}else if($(f[g]).parentsUntil(".page-container").hasClass("page-sidebar")){b=$(f[g]);break}else if($(f[g]).parentsUntil(".more-botton-zone .btn-group").hasClass("dropdown-menu")){b=
+$(f[g]);d=!0;break}else if($(f[g]).parentsUntil("#pageableDiv").hasClass("row1")){b=$(f[g]);d=!0;break}if(b&&0<b.length)d?oa(b,!1):M(b,!0,null);else{f="";if(!b||0>=b.length){var h=c;C.contains(h)&&(f="#"+C.items(h),b=$(f))}c=void 0;f&&0<f.length&&(c={breadcrumbBtnMenuItem:h});c&&b&&0<b.length&&M(b,!0,c)}},setSiderbarCollapseWidth:function(c){q=c},getSiderbarCollapseWidth:function(){return q},setSidebarWidth:function(c){u=c},getSidebarWidth:function(){return u},handlBaseURL:function(c){var b=ZteFrameWork.getBaseURLRoot();
+0<b.length&&(b=ZteFrameWork.getDomainURL(b),console.log("old a link href url:"+c),c=b+c.replace(ZteFrameWork.getDomainURL(c),""),console.log("baseURLRoot:"+b+"      newURL:"+c));return c},startPageLoading:function(c){F(c)},stopPageLoading:function(){$(".page-loading").remove()},getLocationURLParameter:function(c,b){var f,d,g=decodeURIComponent(window.location.search.substring(1)).toLowerCase().split(b?b:"&");c=c.toLowerCase();for(f=0;f<g.length;f++)if(d=g[f].split("="),d[0]==c)return unescape(d[1]);
+return null},getURLParameter:function(c,b){var f,d,g=decodeURIComponent(b).toLowerCase().split("&");c=c.toLowerCase();for(f=0;f<g.length;f++)if(d=g[f].split("="),d[0]==c)return unescape(d[1]);return null},isTouchDevice:function(){return h},getUniqueID:function(c){return c+"_"+Math.floor(Math.random()*(new Date).getTime())},isIE8:function(){return g},isIE9:function(){return n},isRTL:function(){return d},getViewPort:function(){return G()},getLayoutColorCode:function(c){return ca[c]?ca[c]:""},fixContentHeight:function(){B()},
+dealAtoIframe:function(c,b){var f=c.parentsUntil(".page-container").hasClass("page-sidebar")?"page-sidebar":"",f=c.parentsUntil(".header-inner").hasClass("hor-menu")?"header":f;Z(c,b,f);D=!1},getDomainURL:function(c){var b=$.url(c);c=b.attr("protocol");var f=b.attr("host"),b=b.attr("port");return c+"://"+f+(0<b.length?":"+b:"")},getCurrentScript:function(c){if(c&&c.currentScript)return console.log("0\u3001 "+c.currentScript.src),c.currentScript.src;var b;try{a.b.c()}catch(f){b=f.stack,f.sourceURL?
+b=f.sourceURL:!b&&window.opera&&(b=(String(f).match(/of linked script \S+/g)||[]).join(" ")),console.log("1\u3001 "+b)}if(b)return console.log("2\u3001 "+b),b=b.split(/[@ ]/g).pop(),b="("==b[0]?b.slice(1,-1):b,console.log("3\u3001 "+b),b.replace(/(:\d+)?:\d+$/i,"");if(c){c=c.getElementsByTagName("script");b=0;for(var d;d=c[b++];)if("interactive"===d.readyState)return console.log("4\u3001 "+(d.className=d.src)),d.className=d.src}},SyncCSS:function(c,b,f){if(c){var d=[];if(f&&0<f.length&&f.endWith(".css")){f=
+$('<a href="'+f+'"></a>');var g=document.createElement("link");g.href=f[0].href;f=null;g.rel="stylesheet";g.type="text/css";g.id="ifram_csssrc";d.push({pos:"head",scope:"all",link:g})}10!=b&&(0<$("#style_color").length&&(g=document.createElement("link"),g.href=$("#style_color")[0].href.replace(".css","_ifrm.css"),g.rel="stylesheet",g.type="text/css",g.id="style_color",d.push({pos:"head",scope:"all",link:g})),0<$("#font_awesome").length&&(f=document.createElement("link"),f.href=$("#font_awesome")[0].href,
+f.rel="stylesheet",f.type="text/css",f.id="font_awesome",d.push({pos:"head",scope:"all",link:f})),g=$("script[src*='/pym.']"),g=0<g.length?g:$("script[src*='/pym1.']"),0<g.length&&(f=document.createElement("script"),f.src=g[0].src,f.type="text/javascript",f.id=g[0].id?g[0].id:"pymjs",d.push({pos:"head",scope:"one",link:f}),f=document.createElement("script"),g=0<y.split("-").length?y.split("-")[1]:"1",f.text="var t1;function pmchd(){console.log('In the frame "+y+",pym code call is begining; '+(typeof pym!= 'undefined'));if(typeof pym != 'undefined'){pymChild"+
+g+" = new pym.Child({ id: 'pdiv_"+y+"' ,polling: 500});window.clearInterval(t1); }};t1 = window.setInterval(pmchd,5);",f.type="text/javascript",f.id="pymChild",d.push({pos:"htmlend",scope:"one",link:f})),f=$("script[src*='/hk.']"),f=0<f.length?f:$("script[src*='/hk1.']"),0<f.length&&(g=document.createElement("script"),g.src=f[0].src,g.type="text/javascript",g.id=f[0].id?f[0].id:"hkjs",d.push({pos:"head",scope:"one",link:g}),g=document.createElement("script")));f=ZteFrameWork.getDomainURL(c.src);if(window.location.origin==
+f){for(i=0;i<d.length;i++)(f=c.contentDocument.getElementById(d[i].link.id))&&("HEAD"===f.parentNode.tagName.toUpperCase?c.contentDocument.head.removeChild(f):"HTML"===f.parentNode.tagName.toUpperCase&&c.contentDocument.removeChild(f)),"head"==d[i].pos?c.contentDocument.head.appendChild(d[i].link):"bodyend"==d[i].pos?c.contentDocument.body.appendChild(d[i].link):"htmlend"==d[i].pos&&c.contentDocument.body.parentNode.appendChild(d[i].link);if((c=c.contentDocument.getElementsByTagName("iframe"))&&0<
+c.length){var h=[];for(i=0;i<d.length&&"one"!=d[i].scope;i++)h.push(d[i]);for(j=0;j<c.length;j++)d={ifmHeadlins:h},f=ZteFrameWork.getDomainURL(c[j].src),window.location.origin==f?(f=function(c){for(i=0;i<c.data.ifmHeadlins.length;i++){var b=$(c.data.ifmHeadlins[i].link).clone()[0],f=this.contentDocument.getElementById(b.id);f&&("HEAD"===f.parentNode.tagName.toUpperCase?this.contentDocument.head.removeChild(f):"HTML"===f.parentNode.tagName.toUpperCase&&this.contentDocument.removeChild(f));"head"==
+c.data.ifmHeadlins[i].pos?this.contentDocument.head.appendChild(b):"bodyend"==c.data.ifmHeadlins[i].pos?this.contentDocument.body.appendChild(b):"htmlend"==h[i].pos&&this.contentDocument.body.parentNode.appendChild(b)}},$(c[j]).off("onload",d,f),$(c[j]).on("onload",d,f),$(c[j]).trigger("onload")):0<h.length&&(console.log("\u8de8\u57df\u8bbf\u95ee: \u7cfb\u7edf\u5c06\u8fdb\u5165\u8de8\u57df\u8bbf\u95ee\u4ee3\u7406\u5904\u7406\u6d41\u7a0b "),ua(c[j].name,f,h,b))}}else 0<d.length&&(console.log("\u8de8\u57df\u8bbf\u95ee: \u7cfb\u7edf\u5c06\u8fdb\u5165\u8de8\u57df\u8bbf\u95ee\u4ee3\u7406\u5904\u7406\u6d41\u7a0b "),
+ua(c.name,f,d,b))}},goToURL:function(c){ba=!0;"false"==ZteFrameWork.getLocationURLParameter("showNav")?location.reload():$("a[name='"+c+"']").click()},goToURLByName:function(c){"false"==ZteFrameWork.getLocationURLParameter("showNav")?location.reload():(url="a[name='"+c+"']",$(url).click())},goToURLByID:function(c){c&&("false"==ZteFrameWork.getLocationURLParameter("showNav")?location.reload():(0>c.indexOf("#")&&(c="#"+c),$(c).click()))},goToPortal:function(c){var b=top.location.href;console.log(b);
+b=$.url(b);top.location=b.attr("directory")+"uifportal.html#"+c+"/"},goToURLByIDAndNewIPPort:function(b,d,f){V.replace(d.menuCategoryID,{ipPort:d.ipPortStr,ipTitle:d.newTitle});store&&store("menuCategoryID",d.menuCategoryID+"[menuCategoryID]"+d.ipPortStr+"[menuCategoryID]"+(d.newTitle?d.newTitle:""));var g=this.findMenuItemByMenuId(b);if(!g||0>=g.length){var h=this.getMenuItemId_From_MoreMenuRelation(b);if(h&&0<h.length&&(g=this.findMenuItemByMenuId(h))&&0<g.length&&(h=$("#"+b,$("#pageableDiv")).parent(),
+$(".box.boxOperation",$(".carousel-inner")).removeClass("moreButtonSelected"),h=$("a>div.box",h),!1==h.hasClass("moreButtonSelected")&&h.addClass("moreButtonSelected"),h=$(".item.moreButtonsTag"),0<h.length))for(var k=0;k<h.length;k++){var l=$(h[k]);l.removeClass("active");0<$(".moreButtonSelected",l).length&&l.addClass("active")}}g&&0<g.length&&(d=g.attr(d.menuCategoryID+"-multiInsrc"))&&(g.attr("breadcrumgroupbuttonsrc",d),aa(d,!0));U&&clearInterval(U);U=setInterval(function(){!0==T&&(clearInterval(U),
+ZteFrameWork.goToURLByIDAndNewAction(b,f,null))},10)},goToURLByIDAndNewAction:function(b,d,f){if(b){var g=this.findMenuItemByMenuId(b);if(f)window.open(ICTFRAME_CONST_DEFAULTPAGE_PATH+f.paramStr+("#_"+b),f.windowTitle).name=d;else{(f=g?g.attr("id"):"")&&0<f.length&&N(f);var h="";if(!g||0>=g.length)f=b,C.contains(f)&&(h=C.items(f),g=this.findMenuItemByMenuId(h)),g&&0<g.length&&(R=!0);if(!g||0>=g.length){var k=this.getMenuItemId_From_MoreMenuRelation(b);k&&(g=this.findMenuItemByMenuId(k))}if(store&&
+store("globleCurrentBreadcrumb")){E=store("globleCurrentBreadcrumb");for(var l=$("a",$("<div>"+E+"</div>")),m,n,q=0;q<l.length;q++)for(m=$(l[q]),n=$("a[id='"+m.attr("id")+"']"),j=0;j<n.length;j++)$(n[j]).attr("name",m.attr("name"))}if(g&&0<g.length){if(b=$(".zte-theme-panel"),$(".nav-pos-direction",b).val()===zteframework_menu_fmenu){l=g.attr("hparentid");b=g.attr("id");var q=0;for(m=g;b!=l&&20>q;)m=ZteFrameWork.findMenuItemByMenuId(l),l=m.attr("hparentid"),b=m.attr("id"),q++;m.hasClass("active")||
+m.parent().addClass("active")}}else console.log("goToURLByIDAndNewAction():Can't find the menuitem.The menu ID is:"+b+".Please check if the ID or ID cache is correct.");b=void 0;d&&h&&0<h.length?b={action:d,breadcrumbBtnMenuItem:f}:d?b={action:d}:h&&0<h.length?b={breadcrumbBtnMenuItem:f}:k&&(R=!0,b={breadcrumbBtnMenuItem:f});if(b&&b.action||b&&b.breadChangeType)v="dhByInterface";g&&0<g.length&&(g.one("click",b,function(b){ZteFrameWork.dealAtoIframe($(this),b);return!1}),g.click())}}},getBreadcrumbEle:function(){return $(".breadcrumbUl")[0]},
+findMenuItemByMenuId:function(b){var d=void 0,f=$(".zte-theme-panel"),g=$(".nav-pos-direction",f).val(),f=void 0;"vertical"===g?f=$("#page-sidebar-menu a[id='"+b+"']"):g===zteframework_menu_horizontal?(f=$("#main_hormenu a[id='"+b+"']"),0==f.length&&(f=$("#page-megachild-sidebar-menu a[id='"+b+"']"))):g===zteframework_menu_fmenu&&(f=$("#f_hormenu a[id='"+b+"']"),0==f.length&&(f=$("#page-f-sidebar-menu a[id='"+b+"']")));f&&0==f.length&&(console.log("fmenu alink length is :"+$("#page-f-sidebar-menu a").length),
+console.log("cant find menu in sidemenu\u3001megamenu and fmenu , the menu id is "+b));if(f&&0<f.length)for(b=0;b<f.length;b++)if($(f[b]).parentsUntil(".header-inner").hasClass("hor-menu")){d=$(f[b]);break}else if($(f[b]).parentsUntil(".page-container").hasClass("page-sidebar")){d=$(f[b]);break}return d},getMenuItemId_From_MoreMenuRelation:function(b){var d=$(".zte-theme-panel"),d=$(".nav-pos-direction",d).val();d===zteframework_menu_vertical?relationAry=sideBarMenu_to_moreMenu_frame:d===zteframework_menu_horizontal?
+relationAry=horBarMenu_to_moreMenu_frame:d===zteframework_menu_fmenu&&(relationAry=horBarMenu_to_moreMenu_frame);if(relationAry&&b){for(d=0;d<relationAry.length;d++)for(var f=relationAry[d],g=f.moreMenuIds,h=0;h<g.length;h++)if(g[h]&&g[h]==b)return f.mainMenuId;return null}},getMenuItemFoucsByID:function(b){if(b){var d=void 0,f=void 0,g=$(".zte-theme-panel"),g=$(".nav-pos-direction",g).val();"vertical"===g?f=$("#page-sidebar-menu a[id='"+b+"']"):g===zteframework_menu_horizontal?(f=$("#main_hormenu a[id='"+
+b+"']"),0==f.length&&(f=$("#page-megachild-sidebar-menu a[id='"+b+"']"))):g===zteframework_menu_fmenu&&(f=$("#f_hormenu a[id='"+b+"']"),0==f.length&&(f=$("#page-f-sidebar-menu a[id='"+b+"']")));if(0<f.length)for(g=0;g<f.length;g++)if($(f[g]).parentsUntil(".header-inner").hasClass("hor-menu")){d=$(f[g]);break}else if($(f[g]).parentsUntil(".page-container").hasClass("page-sidebar")){d=$(f[g]);break}f="";if(!d||0>=d.length)menuItemID=b,C.contains(menuItemID)&&(f="#"+C.items(menuItemID),d=$(f));b=void 0;
+f&&0<f.length&&(b={breadcrumbBtnMenuItem:menuItemID});d&&0<d.length&&(d.one("click",b,function(b){var c=$(this).parentsUntil(".page-container").hasClass("page-sidebar")?"page-sidebar":"",c=$(this).parentsUntil(".header-inner").hasClass("hor-menu")?"header":c;D=!1;Ba($(this),b,c);return!1}),d.click())}},openbreadcrumbLink:function(b,d){var f=b.attr("href");!f||2>f.length||(d.preventDefault(),(f=b.attr("id"))&&0<f.length&&(N(f),v="dhByInterface"),F(),S(b,d))},getURLParam:function(b){b=RegExp("(^|&)"+
+b.toLowerCase()+"=([^&]*)(&|$)");b=decodeURIComponent(location.search.substring(1)).toLowerCase().match(b);return null!=b?unescape(b[2]):null}}}(),currentRunningScriptSrcPath={};
+function runHtmlScripts(b){var d=document.createElement("div");d.innerHTML=b;b=d.getElementsByTagName("script");$(b).each(function(){var b=this.src;(b=ZteFrameWork.handlBaseURL(b))?(currentRunningScriptSrcPath[b.substring(b.lastIndexOf("/")+1)]=b.substring(0,b.lastIndexOf("/")+1),$.getScript(b)):$.globalEval(this.text||this.textContent||this.innerHTML||"")})}
+function stripHtmlScripts(b){var d=document.createElement("div");d.innerHTML=b;b=d.getElementsByTagName("script");$(b).each(function(){this.src=ZteFrameWork.handlBaseURL(this.src);this.parentNode.removeChild(this)});return d.innerHTML}
+function getsiderBarMenu(b){if(!(2>b.length)){b=ZteFrameWork.handlBaseURL(b);ZteFrameWork.startPageLoading();var d=$("#page-sidebar-menu");d.empty();d.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");$.ajax({type:"GET",cache:!1,url:b,dataType:"html",success:function(b){var k=stripHtmlScripts(b);d.append(k);runHtmlScripts(b);siderBarMenuAuthentication();dealMysqlBackupMenu();setTimeout(function(){ZteFrameWork.stopPageLoading();goToHomePage()},
+1E3)},error:function(b,d,g){}})}}
+var setLayoutValueByCookie=function(){var b=$(".zte-theme-panel");void 0!=store("layout-option")&&$(".layout-option",b).val(store("layout-option"));void 0!=store("language-option")&&$(".language-option",b).val(store("language-option"));void 0!=store("sidebar-option")&&$(".sidebar-option",b).val(store("sidebar-option"));void 0!=store("header-option")&&$(".header-option",b).val(store("header-option"));void 0!=store("sidebar-pos-option")&&$(".sidebar-pos-option",b).val(store("sidebar-pos-option"));$("[class='nav-load-error']",
+$(".hormenu"));$("[class='nav-load-error']",$("[class='page-sidebar-menu']"));$(".nav-pos-direction",b).val("fmenu")};
+function getHorMenu(b){setLayoutValueByCookie();2>b.length||(b=ZteFrameWork.handlBaseURL(b),ZteFrameWork.startPageLoading(),$("#main_hormenu").empty(),$.ajax({type:"GET",async:!1,cache:!1,url:b,dataType:"html",success:function(b){var h=stripHtmlScripts(b);$("#main_hormenu").append(h);runHtmlScripts(b);"mysql"==ZteFrameWork_conf.dbType&&$(".hor-menu a[id='uep-ict-backup-baseDataBack']").parent().remove();horMenuAuthentication("main_hormenu");ZteFrameWork.stopPageLoading();"horizontal"===$(".nav-pos-direction",
+panel).val()&&setTimeout(function(){},150)},error:function(b,h,k){$("[class='page-content']");$(".nav-pos-direction",panel).attr("disabled",!0)}}))}
+function getMegaFMenu(b){if(!(2>b.length)){b=ZteFrameWork.handlBaseURL(b);ZteFrameWork.startPageLoading();var d=$("#"+megaSiderDivId);d.empty();d.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");$.ajax({type:"GET",async:!1,cache:!1,url:b,dataType:"html",success:function(b){var k=stripHtmlScripts(b);d.append(k);runHtmlScripts(b);FMenuAuthentication(megaDivId,megaSiderDivId);rebuildHorMenu();ajustFMenu(megaDivId,megaSiderDivId);ZteFrameWork.stopPageLoading()},
+error:function(b,d,g){}})}}function iniHorMenu(){var b=$("#main_hormenu");b&&((b=b.attr("menuSrc"))&&0<b.length&&getHorMenu(b),(b=$("#"+megaSiderDivId))&&(b=b.attr("menuSrc"))&&0<b.length&&getMegaFMenu(b))}function iniFMenu(){var b=$("#f_hormenu"),d=$("#page-f-sidebar-menu");b&&d&&(b=b.attr("menuSrc"),d=d.attr("menuSrc"),b&&0<b.length&&d&&0<d.length&&getFMenu(b,d))}
+function getFMenu(b,d){if(!(2>b.length||2>d.length)){b=ZteFrameWork.handlBaseURL(b);d=ZteFrameWork.handlBaseURL(d);ZteFrameWork.startPageLoading();$("#f_hormenu").empty();$("#page-f-sidebar-menu").empty();$.ajax({type:"GET",async:!1,cache:!1,url:b,dataType:"html",success:function(b){var d=stripHtmlScripts(b);$("#f_hormenu").append(d);horMenuAuthentication("f_hormenu");runHtmlScripts(b);dealMysqlBackupMenu();ZteFrameWork.stopPageLoading()},error:function(b,d,h){$("#f_hormenu").append('<h4 class="nav-load-error">'+
+$.i18n.prop("com_zte_ums_ict_framework_ui_loadmenuerror")+"</h4>");$("[class='page-content']");$(".nav-pos-direction",panel).attr("disabled",!0)}});var h=$("#"+fMenuSiderDivId);h.empty();h.append("<li class='sidebar-toggler-wrapper'><div class='sidebar-toggler hidden-xs hidden-sm'></div></li>");$.ajax({type:"GET",cache:!1,url:d,dataType:"html",success:function(b){var d=stripHtmlScripts(b);h.append(d);h.children().css("display","none");runHtmlScripts(b);dealMysqlBackupMenu();FMenuAuthentication(fMenuMegaDivId,
+fMenuSiderDivId);ajustFMenu(fMenuMegaDivId,fMenuSiderDivId);ZteFrameWork.stopPageLoading();loadi18n_WebFramework_sideMenu()},error:function(b,d,h){$(".page-f-sidebar-menu").append('<h4 class="nav-load-error">'+$.i18n.prop("com_zte_ums_ict_framework_ui_loadmenuerror")+"</h4>")}})}}function iniSidebarMenu(){var b=$("#page-sidebar-menu");b&&(b=b.attr("menuSrc"))&&0<b.length&&getsiderBarMenu(b)}
+function getChangePWDDlg(b){2>b.length||(ZteFrameWork.startPageLoading(),$(".modal-dialog .Changepasswd").empty(),$.ajax({type:"GET",cache:!1,url:b,dataType:"html",success:function(b){$(".modal-dialog .Changepasswd").append(b);ChangePWD.init();ZteFrameWork.stopPageLoading()},error:function(b,h,k){$(".modal-dialog .Changepasswd").append("<h4>"+$.i18n.prop("com_zte_ums_ict_framework_ui_loadchgpwdpageError")+"</h4>")}}))}
+function iniChangePWDDlg(){var b=$(".modal-dialog .Changepasswd").attr("dlgsrc");b&&0<b.length&&getChangePWDDlg(b)}function getHeaderMenu(b){2>b.length||(ZteFrameWork.startPageLoading(),$("#headerMenu").empty(),$.ajax({type:"GET",cache:!1,async:!1,url:b,dataType:"html",success:function(b){$("#headerMenu").append(b);ZteFrameWork.stopPageLoading()},error:function(b,h,k){}}))}
+function goToHomePage(){if((locationhash=ZteFrameWork.getLocationHash())&&0<locationhash.length){var b=null;if(store&&store("menuCategoryID")){var d=store("menuCategoryID").split("[menuCategoryID]");2<d.length&&(b={menuCategoryID:d[0],ipPortStr:d[1],newTitle:d[2]})}b?ZteFrameWork.goToURLByIDAndNewIPPort(locationhash,b,null):ZteFrameWork.goToURLByIDAndNewAction(locationhash,null,null)}else{var b=$("#page-sidebar-menu"),d=$("#main_hormenu"),h=$("#"+fMenuMegaDivId),k=$("#page-f-sidebar-menu"),g=null,
+g=$(".nav-pos-direction",panel).val();"vertical"===g?(g=$(".iframe.start",b),dealStartMenu(g,b)):"horizontal"===g?(g=$(".iframe.start",d),dealStartMenu(g,d)):g===zteframework_menu_fmenu&&((g=$(".iframe.start",h))&&1>g.length&&(g=$(".iframe.start",k)),dealStartMenu(g,h,k))}}
+var dealStartMenu=function(b,d,h){var k=setInterval(function(){b&&0<b.length?(b.click(),clearInterval(k)):(console.log("the start menu click event is not be triggerd ,so do it repeat!!"),$("a[operation]",d).each(function(){b=$(this);return!1}),h&&b&&1>b.length&&$("a[operation]",h).each(function(){b=$(this);return!1}))},100);handeCtxMenuitem()};
+function handeCtxMenuitem(){$(".page-sidebar ul li a").each(function(){$(this).attr("href")&&"javascript:;"!=$(this).attr("href")&&"#"!=$(this).attr("href")&&$(this).attr("oncontextmenu","return false")});$(".hormenu li a").each(function(){$(this).attr("href")&&"javascript:;"!=$(this).attr("href")&&"#"!=$(this).attr("href")&&$(this).attr("oncontextmenu","return false")})}
+function initBaseInfo(){$("#logout_label").text($.i18n.prop("com_zte_ums_ict_framework_ui_group_logout"));$("#fullscreen_label").text($.i18n.prop("com_zte_ums_ict_framework_ui_group_fullscreen"));$("#changePwd_label").text($.i18n.prop("com_zte_ums_ict_framework_ui_changePwd"));$("#com_zte_ums_ict_framework_moudle_about").text($.i18n.prop("com_zte_ums_ict_framework_moudle_about"));$("#com_zte_ums_ict_framework_moudle_help").text($.i18n.prop("com_zte_ums_ict_framework_moudle_help"));$("#zte_menu-toggler").attr("title",
+$.i18n.prop("com_zte_ums_ict_framework_moudle_menutoggler"))}window.closeModal=function(b){b&&(0>b.indexOf("#")&&(b="#"+b),$(b).modal("hide"))};function getLcsRight(b){var d=[];if(b&&0<b.length){b={data:JSON.stringify({keys:b})};var h=FrameConst.REST_GETLICENSEINFO+"?tmpstamp="+(new Date).getTime(),h=ZteFrameWork.handlBaseURL(h);$.ajax({dataType:"json",type:"GET",async:!1,url:h,data:b,success:function(b){b&&(d=b.data)},error:function(b,g,h){d=null}})}return d}
+function siderBarMenuAuthentication(){var b=[],d=[];$("a[licenseid]",$(".page-sidebar-menu")).each(function(){var g=$(this).attr("licenseid");g&&(d.push(g),g=$(this).attr("id"),b.push(g))});var h=getLcsRight(d);if(h&&h.length==b.length)for(var k=0;k<b.length;k++){var g=b[k];"True"!=h[k].value&&$("#"+g,$(".page-sidebar-menu")).parent().remove()}var n=[];$("a[operation]",$(".page-sidebar-menu")).each(function(){var b=$(this).attr("operation");b&&n.push(b)});var m=getAllOperCodeRights(n);$("a[operation]",
+$(".page-sidebar-menu")).each(function(){var b=$(this).attr("operation");b&&(hasRight(b,m)||$(this).parent("li").remove())});rebuildSiderBarMenu()}
+function horMenuAuthentication(b){var d=[],h=[];$("a[licenseid]",$("#"+b)).each(function(){var b=$(this).attr("licenseid");b&&(h.push(b),b=$(this).attr("id"),d.push(b))});var k=getLcsRight(h);if(k&&k.length==d.length)for(var g=0;g<d.length;g++){var n=d[g];"True"!=k[g].value&&$("#"+n,$("#"+b)).parent().remove()}var m=[];$("a[operation]",$("#"+b)).each(function(){var b=$(this).attr("operation");b&&m.push(b)});var l=getAllOperCodeRights(m);$("a[operation]",$("#"+b)).each(function(){var b=$(this).attr("operation");
+b&&(hasRight(b,l)||$(this).parent("li").remove())});rebuildHorMenu()}
+function ajustFMenu(b,d){$("a[hparentid]",$("#"+d)).each(function(){var d=$(this).attr("hparentId"),d=$("a[id = "+d+"]",$("#"+b)),k=d.attr("href");if(null==k||"#"==k.trim()||"javascript"==k){var g=$(this);null!=$(this).attr("href")&&"#"!=$(this).attr("href")&&"javascript:;"!=$(this).attr("href")||$("a[href]",$(this).parent().children("ul")).each(function(){g=$(this);if(null!=g&&"#"!=g&&"javascript"!=g)return!1});d.attr("href",g.attr("href"));d.attr("shiftjs",g.attr("shiftjs"));d.attr("cachenum",g.attr("cachenum"));
+d.attr("iframeName",g.attr("iframeName"));d.attr("xdomain",g.attr("xdomain"));d.attr("cssSrc",g.attr("cssSrc"));d.attr("category",g.attr("category"));d.attr("breadcrumgroupbuttonsrc",g.attr("breadcrumgroupbuttonsrc"));d.attr("operation",g.attr("operation"));d.attr("iframeautoscroll",g.attr("iframeautoscroll"))}})}
+function FMenuAuthentication(b,d){var h={};$("a[hparentid]",$("#"+d)).each(function(){var b=$(this).attr("hparentid");h[b]=1});checkFmenuRightByAttr("licenseid",b,d,getLcsRight);checkFmenuRightByAttr("operation",b,d,getAllOperCodeRights);rebuildSiderBarMenu();var k={};$("a[hparentid]",$("#"+d)).each(function(){var b=$(this).attr("hparentid");k[b]=1});for(var g in h)if(null==k[g]){var n=$("#"+g,$("#"+b));null!=n.attr("href")&&"javascript:;"!=n.attr("href")&&"#"!=n.attr("href")||n.parent().remove()}}
+function checkFmenuRightByAttr(b,d,h,k){var g=[],n=[];$("a["+b+"]",$("#"+h)).each(function(){var d=$(this).attr(b);d&&(n.push(d),d=$(this).attr("id"),g.push({id:d}))});if((d=k(n))&&d.length==g.length)for(k=0;k<g.length;k++){var m=g[k].id;"True"!=d[k].value&&$("#"+m,$("#"+h)).parent().remove()}}
+function groupButtonAuthentication(){var b=[],d=[];$("a[licenseid]",$(".more-botton-zone > li.btn-group")).each(function(){var g=$(this).attr("licenseid");g&&(d.push(g),g=$(this).attr("id"),b.push(g))});var h=getLcsRight(d);if(h&&h.length==b.length)for(var k=0;k<b.length;k++){var g=b[k];"True"!=h[k].value&&$("#"+g,$(".more-botton-zone > li.btn-group")).parent().remove()}"mysql"==ZteFrameWork_conf.dbType&&$("#uep-ict-backup-baseDataBack",$(".more-botton-zone > li.btn-group")).parent().remove();var n=
+[];$("a[operation]",$(".more-botton-zone > li.btn-group")).each(function(){var b=$(this).attr("operation");b&&n.push(b)});var m=getAllOperCodeRights(n);$("a[operation]",$(".more-botton-zone > li.btn-group")).each(function(){var b=$(this).attr("operation");b&&(hasRight(b,m)||$(this).parent("li").remove())});0==$("li > a",$(".more-botton-zone > li.btn-group")).length&&$(".more-botton-zone > li.btn-group").remove()}
+function rebuildSiderBarMenu(){0==$("a.start").length&&$('li > a[href!="javascript:;"]',$(".page-sidebar-menu")).eq(0).addClass("start");$("ul.sub-menu",$(".page-sidebar-menu")).each(function(){0==$(this).has("li").length&&$(this).parent("li").remove()})}
+function rebuildHorMenu(){0==$("a.start").length&&$('li > a[href!="#"]',$("#main_hormenu")).eq(0).addClass("start");$("ul.mega-menu-submenu",$("#main_hormenu")).each(function(){0==$(this).has("li > a").length&&$(this).remove()});$("div.zteDivWidth",$("#main_hormenu")).each(function(){0==$(this).has("ul").length&&$(this).remove()});$("ul.dropdown-menu",$("#main_hormenu")).each(function(){0==$(this).has("ul").length&&$(this).parent("li").remove()});$("li.divider",$("#main_hormenu")).each(function(){$(this).next().hasClass("divider")&&
+$(this).remove()});$("li.divider",$("#main_hormenu")).each(function(){0==$(this).next().length&&$(this).remove()})}
+function getAllOperCodeRights(b){var d=[];if(b&&0<b.length){var h=JSON.stringify({operations:b}),h=FrameConst.REST_CHECKRIGHT+"?data="+h+"&tmpstamp="+(new Date).getTime(),h=ZteFrameWork.handlBaseURL(h);$.ajax({dataType:"json",type:"GET",async:!1,url:h,data:null,success:function(b){d=b.value},error:function(b,d,h){401==b.status?window.location.replace("login.html"):console.log("Communication Error!")}})}return{opCodes:b,rights:d}}
+function hasRight(b,d){for(var h=0;h<d.opCodes.length;h++)if(d.opCodes[h]==b)return!0==d.rights[h];return!1}
+function dealMysqlBackupMenu(){var b=ZteFrameWork_conf.dbType;if(void 0===b||"mysql"===b){var b=$("[class='page-sidebar-menu']"),d=$(".hormenu");0<b.length&&0<$("#uep-ict-backup-dataBackup").length&&$("#uep-ict-backup-dataBackup",b).attr("breadcrumGroupButtonSrc",ICTFRAME_CONST_DATABACKUP_PATH);0<d.length&&0<$("#uep-ict-backup-dataBackup").length&&($("#uep-ict-backup-dataBackup",d).attr("breadcrumGroupButtonSrc",ICTFRAME_CONST_DATABACKUP_PATH),$("#uep-ict-backup-dataBackup").parent("li").attr("style",
+"display:block"),$("#uep-ict-backup-allDbStructBackup").parent("li").attr("style","display:none"),$("#uep-ict-backup-baseDataBack").parent("li").attr("style","display:none"))}}
+function dealMavToggle(b){var d=$("#page-sidebar-menu"),h=$("#main_hormenu"),k=$(".zte-theme-panel");$(".nav-pos-direction",k).val();"hidden"==$(b).attr("navtoggledispattr")?($(b).attr("navtoggledispattr","display"),d.css("display","block")):($(b).attr("navtoggledispattr","hidden"),d.css("display","none"));h.css("display","none")};
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/core/const.js b/openo-portal/portal-common/src/main/webapp/common/js/core/const.js
new file mode 100644
index 00000000..1dba1f3e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/core/const.js
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+var fMenuSiderDivId = 'page-f-sidebar-menu';
+var ICTFRAME_CONST_SPINNER_GIF_PATH="../../iui/framework/img/loading-spinner-grey.gif";
+var ICTFRAME_CONST_IFRAME_HEIGHT_AJUST = 10;
+var ICTFRAME_CONST_IFRAME_HEIGHT_AJUST_IE = 5;
+var ICTFRAME_CONST_THEME_COLOR_CSS_PREFFIX = "css/themes/";
+var ICTFRAME_CONST_DEFAULTPAGE_PATH = "default.html?";
+var ICTFRAME_CONST_DATABACKUP_PATH = 'menus/dataBackup-mysql.html';
+var IS_V5_TESTVERSION = true;
+
+
+var FrameConst={};
+//Ĭ�ϵ�¼�ɹ���תҳ��
+FrameConst.DEFAULT_LOGINSKIP_PAGE = "main-page.html";
+
+FrameConst.do_heartbeat = false;
+FrameConst.change_pass = false;
+//�Ƿ����
+FrameConst.isEncypt = "false"; 
+//FrameConst.REST_FRAMECOMMIFO = "/web/rest/web-common/getMenuItemVisible";
+FrameConst.REST_FRAMECOMMIFO = "../../api/uiframe/v1/frameCommInfo";
+//FrameConst.REST_HEARTBEAT = "/web/rest/web-common/common?action=heartbeat";
+FrameConst.REST_HEARTBEAT = "../../api/uiframe/v1/heartbeat";
+//FrameConst.REST_GETLICENSEINFO = "/web/rest/web-license/getlicensevalueinfo";
+FrameConst.REST_GETLICENSEINFO = "../../api/uiframe/v1/licensevalueinfo";
+//FrameConst.REST_CHECKRIGHT = "/web/rest/web-common/checkRight";
+FrameConst.REST_CHECKRIGHT = "../../api/uiframe/v1/checkRight";
+//FrameConst.REST_LOGIN = "/web/res/web-common/login";
+FrameConst.REST_LOGIN = "../../api/uiframe/v1/login";
+//FrameConst.REST_LOGOUT = "/web/res/web-common/loginOut?SSOAction=SSOLogout";
+FrameConst.REST_LOGOUT = "../../api/uiframe/v1/loginOut?SSOAction=SSOLogout";
+//FrameConst.REST_GET_FRAME_MENUDIRECTION = "/web/rest/web-common/GetConfByKey?key=usf.mainframe.web.navigation.direction";
+FrameConst.REST_GET_FRAME_MENUDIRECTION = "../../api/uiframe/v1/confByKey?key=usf.mainframe.web.navigation.direction";
+//FrameConst.REST_GET_USERNAME = "/web/rest/web-common/common?action=getUserName";
+FrameConst.REST_GET_USERNAME = "../../api/uiframe/v1/userName";
+
+
+//FrameConst.REST_GET_VERSIONINFO = "/web/rest/web-common/getVersionInfo";
+FrameConst.REST_GET_VERSIONINFO = "../../api/uiframe/v1/versionInfo";
+var zte_http_headers=new Array();
+zte_http_headers.push({"key":"ICTAuthentication","value":"icttka","store":true});
+zte_http_headers.push({"key":"isFromWeb","value":"1","store":false});
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/core/hk.min.js b/openo-portal/portal-common/src/main/webapp/common/js/core/hk.min.js
new file mode 100644
index 00000000..73ab7f2c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/core/hk.min.js
@@ -0,0 +1,819 @@
+/*
+ * 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.
+ */
+;(function(window, define) {
+    var _ = {
+        version: "2.3.0",
+        areas: {},
+        apis: {},
+
+        // utilities
+        inherit: function(api, o) {
+            for (var p in api) {
+                if (!o.hasOwnProperty(p)) {
+                    o[p] = api[p];
+                }
+            }
+            return o;
+        },
+        stringify: function(d) {
+            return d === undefined || typeof d === "function" ? d+'' : JSON.stringify(d);
+        },
+        parse: function(s) {
+            // if it doesn't parse, return as is
+            try{ return JSON.parse(s); }catch(e){ return s; }
+        },
+
+        // extension hooks
+        fn: function(name, fn) {
+            _.storeAPI[name] = fn;
+            for (var api in _.apis) {
+                _.apis[api][name] = fn;
+            }
+        },
+        get: function(area, key){ return area.getItem(key); },
+        set: function(area, key, string){ area.setItem(key, string); },
+        remove: function(area, key){ area.removeItem(key); },
+        key: function(area, i){ return area.key(i); },
+        length: function(area){ return area.length; },
+        clear: function(area){ area.clear(); },
+
+        // core functions
+        Store: function(id, area, namespace) {
+            var store = _.inherit(_.storeAPI, function(key, data, overwrite) {
+                if (arguments.length === 0){ return store.getAll(); }
+                if (data !== undefined){ return store.set(key, data, overwrite); }
+                if (typeof key === "string"){ return store.get(key); }
+                if (!key){ return store.clear(); }
+                return store.setAll(key, data);// overwrite=data, data=key
+            });
+            store._id = id;
+            try {
+                var testKey = '_safariPrivate_';
+                area.setItem(testKey, 'sucks');
+                store._area = area;
+                area.removeItem(testKey);
+            } catch (e) {}
+            if (!store._area) {
+                store._area = _.inherit(_.storageAPI, { items: {}, name: 'fake' });
+            }
+            store._ns = namespace || '';
+            if (!_.areas[id]) {
+                _.areas[id] = store._area;
+            }
+            if (!_.apis[store._ns+store._id]) {
+                _.apis[store._ns+store._id] = store;
+            }
+            return store;
+        },
+        storeAPI: {
+            // admin functions
+            area: function(id, area) {
+                var store = this[id];
+                if (!store || !store.area) {
+                    store = _.Store(id, area, this._ns);//new area-specific api in this namespace
+                    if (!this[id]){ this[id] = store; }
+                }
+                return store;
+            },
+            namespace: function(namespace, noSession) {
+                if (!namespace){
+                    return this._ns ? this._ns.substring(0,this._ns.length-1) : '';
+                }
+                var ns = namespace, store = this[ns];
+                if (!store || !store.namespace) {
+                    store = _.Store(this._id, this._area, this._ns+ns+'.');//new namespaced api
+                    if (!this[ns]){ this[ns] = store; }
+                    if (!noSession){ store.area('session', _.areas.session); }
+                }
+                return store;
+            },
+            isFake: function(){ return this._area.name === 'fake'; },
+            toString: function() {
+                return 'store'+(this._ns?'.'+this.namespace():'')+'['+this._id+']';
+            },
+
+            // storage functions
+            has: function(key) {
+                if (this._area.has) {
+                    return this._area.has(this._in(key));//extension hook
+                }
+                return !!(this._in(key) in this._area);
+            },
+            size: function(){ return this.keys().length; },
+            each: function(fn, and) {
+                for (var i=0, m=_.length(this._area); i<m; i++) {
+                    var key = this._out(_.key(this._area, i));
+                    if (key !== undefined) {
+                        if (fn.call(this, key, and || this.get(key)) === false) {
+                            break;
+                        }
+                    }
+                    if (m > _.length(this._area)) { m--; i--; }// in case of removeItem
+                }
+                return and || this;
+            },
+            keys: function() {
+                return this.each(function(k, list){ list.push(k); }, []);
+            },
+            get: function(key, alt) {
+                var s = _.get(this._area, this._in(key));
+                return s !== null ? _.parse(s) : alt || s;// support alt for easy default mgmt
+            },
+            getAll: function() {
+                return this.each(function(k, all){ all[k] = this.get(k); }, {});
+            },
+            set: function(key, data, overwrite) {
+                var d = this.get(key);
+                if (d != null && overwrite === false) {
+                    return data;
+                }
+                return _.set(this._area, this._in(key), _.stringify(data), overwrite) || d;
+            },
+            setAll: function(data, overwrite) {
+                var changed, val;
+                for (var key in data) {
+                    val = data[key];
+                    if (this.set(key, val, overwrite) !== val) {
+                        changed = true;
+                    }
+                }
+                return changed;
+            },
+            remove: function(key) {
+                var d = this.get(key);
+                _.remove(this._area, this._in(key));
+                return d;
+            },
+            clear: function() {
+                if (!this._ns) {
+                    _.clear(this._area);
+                } else {
+                    this.each(function(k){ _.remove(this._area, this._in(k)); }, 1);
+                }
+                return this;
+            },
+            clearAll: function() {
+                var area = this._area;
+                for (var id in _.areas) {
+                    if (_.areas.hasOwnProperty(id)) {
+                        this._area = _.areas[id];
+                        this.clear();
+                    }
+                }
+                this._area = area;
+                return this;
+            },
+
+            // internal use functions
+            _in: function(k) {
+                if (typeof k !== "string"){ k = _.stringify(k); }
+                return this._ns ? this._ns + k : k;
+            },
+            _out: function(k) {
+                return this._ns ?
+                    k && k.indexOf(this._ns) === 0 ?
+                        k.substring(this._ns.length) :
+                        undefined : // so each() knows to skip it
+                    k;
+            }
+        },// end _.storeAPI
+        storageAPI: {
+            length: 0,
+            has: function(k){ return this.items.hasOwnProperty(k); },
+            key: function(i) {
+                var c = 0;
+                for (var k in this.items){
+                    if (this.has(k) && i === c++) {
+                        return k;
+                    }
+                }
+            },
+            setItem: function(k, v) {
+                if (!this.has(k)) {
+                    this.length++;
+                }
+                this.items[k] = v;
+            },
+            removeItem: function(k) {
+                if (this.has(k)) {
+                    delete this.items[k];
+                    this.length--;
+                }
+            },
+            getItem: function(k){ return this.has(k) ? this.items[k] : null; },
+            clear: function(){ for (var k in this.list){ this.removeItem(k); } },
+            toString: function(){ return this.length+' items in '+this.name+'Storage'; }
+        }// end _.storageAPI
+    };
+
+    // setup the primary store fn
+    if (window.store){ _.conflict = window.store; }
+    var store =
+        // safely set this up (throws error in IE10/32bit mode for local files)
+        _.Store("local", (function(){try{ return localStorage; }catch(e){}})());
+    store.local = store;// for completeness
+    store._ = _;// for extenders and debuggers...
+    // safely setup store.session (throws exception in FF for file:/// urls)
+    store.area("session", (function(){try{ return sessionStorage; }catch(e){}})());
+
+    //Expose store to the global object
+    window.store = store;
+
+    if (typeof define === 'function' && define.amd !== undefined) {
+        define(function () {
+            return store;
+        });
+    } else if (typeof module !== 'undefined' && module.exports) {
+        module.exports = store;
+    }
+
+})(this, null);
+
+// XHook - v1.3.3 - https://github.com/jpillora/xhook
+// Jaime Pillora <dev@jpillora.com> - MIT Copyright 2015
+(function(window,undefined) {
+var AFTER, BEFORE, COMMON_EVENTS, EventEmitter, FIRE, FormData, NativeFormData, NativeXMLHttp, OFF, ON, READY_STATE, UPLOAD_EVENTS, XHookFormData, XHookHttpRequest, XMLHTTP, convertHeaders, depricatedProp, document, fakeEvent, mergeObjects, msie, proxyEvents, slice, xhook, _base,
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+document = window.document;
+
+BEFORE = 'before';
+
+AFTER = 'after';
+
+READY_STATE = 'readyState';
+
+ON = 'addEventListener';
+
+OFF = 'removeEventListener';
+
+FIRE = 'dispatchEvent';
+
+XMLHTTP = 'XMLHttpRequest';
+
+FormData = 'FormData';
+
+UPLOAD_EVENTS = ['load', 'loadend', 'loadstart'];
+
+COMMON_EVENTS = ['progress', 'abort', 'error', 'timeout'];
+
+msie = parseInt((/msie (\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
+
+if (isNaN(msie)) {
+  msie = parseInt((/trident\/.*; rv:(\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
+}
+
+(_base = Array.prototype).indexOf || (_base.indexOf = function(item) {
+  var i, x, _i, _len;
+  for (i = _i = 0, _len = this.length; _i < _len; i = ++_i) {
+    x = this[i];
+    if (x === item) {
+      return i;
+    }
+  }
+  return -1;
+});
+
+slice = function(o, n) {
+  return Array.prototype.slice.call(o, n);
+};
+
+depricatedProp = function(p) {
+  return p === "returnValue" || p === "totalSize" || p === "position";
+};
+
+mergeObjects = function(src, dst) {
+  var k, v;
+  for (k in src) {
+    v = src[k];
+    if (depricatedProp(k)) {
+      continue;
+    }
+    try {
+      dst[k] = src[k];
+    } catch (_error) {}
+  }
+  return dst;
+};
+
+proxyEvents = function(events, src, dst) {
+  var event, p, _i, _len;
+  p = function(event) {
+    return function(e) {
+      var clone, k, val;
+      clone = {};
+      for (k in e) {
+        if (depricatedProp(k)) {
+          continue;
+        }
+        val = e[k];
+        clone[k] = val === src ? dst : val;
+      }
+      return dst[FIRE](event, clone);
+    };
+  };
+  for (_i = 0, _len = events.length; _i < _len; _i++) {
+    event = events[_i];
+    if (dst._has(event)) {
+      src["on" + event] = p(event);
+    }
+  }
+};
+
+fakeEvent = function(type) {
+  var msieEventObject;
+  if (document.createEventObject != null) {
+    msieEventObject = document.createEventObject();
+    msieEventObject.type = type;
+    return msieEventObject;
+  } else {
+    try {
+      return new Event(type);
+    } catch (_error) {
+      return {
+        type: type
+      };
+    }
+  }
+};
+
+EventEmitter = function(nodeStyle) {
+  var emitter, events, listeners;
+  events = {};
+  listeners = function(event) {
+    return events[event] || [];
+  };
+  emitter = {};
+  emitter[ON] = function(event, callback, i) {
+    events[event] = listeners(event);
+    if (events[event].indexOf(callback) >= 0) {
+      return;
+    }
+    i = i === undefined ? events[event].length : i;
+    events[event].splice(i, 0, callback);
+  };
+  emitter[OFF] = function(event, callback) {
+    var i;
+    if (event === undefined) {
+      events = {};
+      return;
+    }
+    if (callback === undefined) {
+      events[event] = [];
+    }
+    i = listeners(event).indexOf(callback);
+    if (i === -1) {
+      return;
+    }
+    listeners(event).splice(i, 1);
+  };
+  emitter[FIRE] = function() {
+    var args, event, i, legacylistener, listener, _i, _len, _ref;
+    args = slice(arguments);
+    event = args.shift();
+    if (!nodeStyle) {
+      args[0] = mergeObjects(args[0], fakeEvent(event));
+    }
+    legacylistener = emitter["on" + event];
+    if (legacylistener) {
+      legacylistener.apply(undefined, args);
+    }
+    _ref = listeners(event).concat(listeners("*"));
+    for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+      listener = _ref[i];
+      listener.apply(undefined, args);
+    }
+  };
+  emitter._has = function(event) {
+    return !!(events[event] || emitter["on" + event]);
+  };
+  if (nodeStyle) {
+    emitter.listeners = function(event) {
+      return slice(listeners(event));
+    };
+    emitter.on = emitter[ON];
+    emitter.off = emitter[OFF];
+    emitter.fire = emitter[FIRE];
+    emitter.once = function(e, fn) {
+      var fire;
+      fire = function() {
+        emitter.off(e, fire);
+        return fn.apply(null, arguments);
+      };
+      return emitter.on(e, fire);
+    };
+    emitter.destroy = function() {
+      return events = {};
+    };
+  }
+  return emitter;
+};
+
+xhook = EventEmitter(true);
+
+xhook.EventEmitter = EventEmitter;
+
+xhook[BEFORE] = function(handler, i) {
+  if (handler.length < 1 || handler.length > 2) {
+    throw "invalid hook";
+  }
+  return xhook[ON](BEFORE, handler, i);
+};
+
+xhook[AFTER] = function(handler, i) {
+  if (handler.length < 2 || handler.length > 3) {
+    throw "invalid hook";
+  }
+  return xhook[ON](AFTER, handler, i);
+};
+
+xhook.enable = function() {
+  window[XMLHTTP] = XHookHttpRequest;
+  if (NativeFormData) {
+    window[FormData] = XHookFormData;
+  }
+};
+
+xhook.disable = function() {
+  window[XMLHTTP] = xhook[XMLHTTP];
+  window[FormData] = NativeFormData;
+};
+
+convertHeaders = xhook.headers = function(h, dest) {
+  var header, headers, k, name, v, value, _i, _len, _ref;
+  if (dest == null) {
+    dest = {};
+  }
+  switch (typeof h) {
+    case "object":
+      headers = [];
+      for (k in h) {
+        v = h[k];
+        name = k.toLowerCase();
+        headers.push("" + name + ":\t" + v);
+      }
+      return headers.join('\n');
+    case "string":
+      headers = h.split('\n');
+      for (_i = 0, _len = headers.length; _i < _len; _i++) {
+        header = headers[_i];
+        if (/([^:]+):\s*(.+)/.test(header)) {
+          name = (_ref = RegExp.$1) != null ? _ref.toLowerCase() : void 0;
+          value = RegExp.$2;
+          if (dest[name] == null) {
+            dest[name] = value;
+          }
+        }
+      }
+      return dest;
+  }
+};
+
+NativeFormData = window[FormData];
+
+XHookFormData = function(form) {
+  var entries;
+  this.fd = form ? new NativeFormData(form) : new NativeFormData();
+  this.form = form;
+  entries = [];
+  Object.defineProperty(this, 'entries', {
+    get: function() {
+      var fentries;
+      fentries = !form ? [] : slice(form.querySelectorAll("input,select")).filter(function(e) {
+        var _ref;
+        return ((_ref = e.type) !== 'checkbox' && _ref !== 'radio') || e.checked;
+      }).map(function(e) {
+        return [e.name, e.type === "file" ? e.files : e.value];
+      });
+      return fentries.concat(entries);
+    }
+  });
+  this.append = (function(_this) {
+    return function() {
+      var args;
+      args = slice(arguments);
+      entries.push(args);
+      return _this.fd.append.apply(_this.fd, args);
+    };
+  })(this);
+};
+
+if (NativeFormData) {
+  xhook[FormData] = NativeFormData;
+  window[FormData] = XHookFormData;
+}
+
+NativeXMLHttp = window[XMLHTTP];
+
+xhook[XMLHTTP] = NativeXMLHttp;
+
+XHookHttpRequest = window[XMLHTTP] = function() {
+  var ABORTED, currentState, emitFinal, emitReadyState, facade, hasError, hasErrorHandler, readBody, readHead, request, response, setReadyState, status, transiting, writeBody, writeHead, xhr;
+  ABORTED = -1;
+  xhr = new xhook[XMLHTTP]();
+  request = {};
+  status = null;
+  hasError = void 0;
+  transiting = void 0;
+  response = void 0;
+  readHead = function() {
+    var key, name, val, _ref;
+    response.status = status || xhr.status;
+    if (!(status === ABORTED && msie < 10)) {
+      response.statusText = xhr.statusText;
+    }
+    if (status !== ABORTED) {
+      _ref = convertHeaders(xhr.getAllResponseHeaders());
+      for (key in _ref) {
+        val = _ref[key];
+        if (!response.headers[key]) {
+          name = key.toLowerCase();
+          response.headers[name] = val;
+        }
+      }
+    }
+  };
+  readBody = function() {
+    if (!xhr.responseType || xhr.responseType === "text") {
+      response.text = xhr.responseText;
+      response.data = xhr.responseText;
+    } else if (xhr.responseType === "document") {
+      response.xml = xhr.responseXML;
+      response.data = xhr.responseXML;
+    } else {
+      response.data = xhr.response;
+    }
+    if ("responseURL" in xhr) {
+      response.finalUrl = xhr.responseURL;
+    }
+  };
+  writeHead = function() {
+    facade.status = response.status;
+    facade.statusText = response.statusText;
+  };
+  writeBody = function() {
+    if ('text' in response) {
+      facade.responseText = response.text;
+    }
+    if ('xml' in response) {
+      facade.responseXML = response.xml;
+    }
+    if ('data' in response) {
+      facade.response = response.data;
+    }
+    if ('finalUrl' in response) {
+      facade.responseURL = response.finalUrl;
+    }
+  };
+  emitReadyState = function(n) {
+    while (n > currentState && currentState < 4) {
+      facade[READY_STATE] = ++currentState;
+      if (currentState === 1) {
+        facade[FIRE]("loadstart", {});
+      }
+      if (currentState === 2) {
+        writeHead();
+      }
+      if (currentState === 4) {
+        writeHead();
+        writeBody();
+      }
+      facade[FIRE]("readystatechange", {});
+      if (currentState === 4) {
+        setTimeout(emitFinal, 0);
+      }
+    }
+  };
+  emitFinal = function() {
+    if (!hasError) {
+      facade[FIRE]("load", {});
+    }
+    facade[FIRE]("loadend", {});
+    if (hasError) {
+      facade[READY_STATE] = 0;
+    }
+  };
+  currentState = 0;
+  setReadyState = function(n) {
+    var hooks, process;
+    if (n !== 4) {
+      emitReadyState(n);
+      return;
+    }
+    hooks = xhook.listeners(AFTER);
+    process = function() {
+      var hook;
+      if (!hooks.length) {
+        return emitReadyState(4);
+      }
+      hook = hooks.shift();
+      if (hook.length === 2) {
+        hook(request, response);
+        return process();
+      } else if (hook.length === 3 && request.async) {
+        return hook(request, response, process);
+      } else {
+        return process();
+      }
+    };
+    process();
+  };
+  facade = request.xhr = EventEmitter();
+  xhr.onreadystatechange = function(event) {
+    try {
+      if (xhr[READY_STATE] === 2) {
+        readHead();
+      }
+    } catch (_error) {}
+    if (xhr[READY_STATE] === 4) {
+      transiting = false;
+      readHead();
+      readBody();
+    }
+    setReadyState(xhr[READY_STATE]);
+  };
+  hasErrorHandler = function() {
+    hasError = true;
+  };
+  facade[ON]('error', hasErrorHandler);
+  facade[ON]('timeout', hasErrorHandler);
+  facade[ON]('abort', hasErrorHandler);
+  facade[ON]('progress', function() {
+    if (currentState < 3) {
+      setReadyState(3);
+    } else {
+      facade[FIRE]("readystatechange", {});
+    }
+  });
+  if ('withCredentials' in xhr || xhook.addWithCredentials) {
+    facade.withCredentials = false;	
+  }
+  facade.status = 0;
+  facade.open = function(method, url, async, user, pass) {
+    currentState = 0;
+    hasError = false;
+    transiting = false;
+    request.headers = {};
+    request.headerNames = {};
+    request.status = 0;
+    response = {};
+    response.headers = {};
+    request.method = method;
+    request.url = url;
+    request.async = async !== false;
+    request.user = user;
+    request.pass = pass;
+    setReadyState(1);
+  };
+  facade.send = function(body) {
+    var hooks, k, modk, process, send, _i, _len, _ref;
+    _ref = ['type', 'timeout', 'withCredentials'];
+	if(navigator.userAgent.indexOf("Firefox/") != -1){http://atmosphere-framework.2306103.n4.nabble.com/Atmosphere-js-withCredentials-true-does-not-work-in-Firefox-td4656661.html
+		_ref = ['type', 'timeout'];	  
+	}
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      k = _ref[_i];
+      modk = k === "type" ? "responseType" : k;
+      if (modk in facade) {
+        request[k] = facade[modk];
+      }
+    }
+    request.body = body;
+    send = function() {
+      var header, value, _j, _len1, _ref1, _ref2;
+      proxyEvents(COMMON_EVENTS, xhr, facade);
+      if (facade.upload) {
+        proxyEvents(COMMON_EVENTS.concat(UPLOAD_EVENTS), xhr.upload, facade.upload);
+      }
+      transiting = true;
+      xhr.open(request.method, request.url, request.async, request.user, request.pass);
+      _ref1 = ['type', 'timeout', 'withCredentials'];
+	  if(navigator.userAgent.indexOf("Firefox/") != -1){//http://atmosphere-framework.2306103.n4.nabble.com/Atmosphere-js-withCredentials-true-does-not-work-in-Firefox-td4656661.html
+		_ref1 = ['type', 'timeout'];	  
+	  }
+      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+        k = _ref1[_j];
+        modk = k === "type" ? "responseType" : k;
+        if (k in request) {
+          xhr[modk] = request[k];
+        }
+      }
+      _ref2 = request.headers;
+      for (header in _ref2) {
+        value = _ref2[header];
+        xhr.setRequestHeader(header, value);
+      }
+      if (request.body instanceof XHookFormData) {
+        request.body = request.body.fd;
+      }
+      xhr.send(request.body);
+    };
+    hooks = xhook.listeners(BEFORE);
+    process = function() {
+      var done, hook;
+      if (!hooks.length) {
+        return send();
+      }
+      done = function(userResponse) {
+        if (typeof userResponse === 'object' && (typeof userResponse.status === 'number' || typeof response.status === 'number')) {
+          mergeObjects(userResponse, response);
+          if (__indexOf.call(userResponse, 'data') < 0) {
+            userResponse.data = userResponse.response || userResponse.text;
+          }
+          setReadyState(4);
+          return;
+        }
+        process();
+      };
+      done.head = function(userResponse) {
+        mergeObjects(userResponse, response);
+        return setReadyState(2);
+      };
+      done.progress = function(userResponse) {
+        mergeObjects(userResponse, response);
+        return setReadyState(3);
+      };
+      hook = hooks.shift();
+      if (hook.length === 1) {
+        return done(hook(request));
+      } else if (hook.length === 2 && request.async) {
+        return hook(request, done);
+      } else {
+        return done();
+      }
+    };
+    process();
+  };
+  facade.abort = function() {
+    status = ABORTED;
+    if (transiting) {
+      xhr.abort();
+    } else {
+      facade[FIRE]('abort', {});
+    }
+  };
+  facade.setRequestHeader = function(header, value) {
+    var lName, name;
+    lName = header != null ? header.toLowerCase() : void 0;
+    name = request.headerNames[lName] = request.headerNames[lName] || header;
+    if (request.headers[name]) {
+      value = request.headers[name] + ', ' + value;
+    }
+    request.headers[name] = value;
+  };
+  facade.getResponseHeader = function(header) {
+    var name;
+    name = header != null ? header.toLowerCase() : void 0;
+    return response.headers[name];
+  };
+  facade.getAllResponseHeaders = function() {
+    return convertHeaders(response.headers);
+  };
+  if (xhr.overrideMimeType) {
+    facade.overrideMimeType = function() {
+      return xhr.overrideMimeType.apply(xhr, arguments);
+    };
+  }
+  if (xhr.upload) {
+    facade.upload = request.upload = EventEmitter();
+  }
+  return facade;
+};
+/*
+if (typeof this.define === "function" && this.define.amd) {
+  define("xhook", [], function() {
+    return xhook;
+  });
+} else {*/
+  (this.exports || this).xhook = xhook;
+//}
+
+}.call(this,window));
+
+xhook.before(function(request) {
+	var zte_headers = store('zte_http_headers');
+	if (zte_headers && zte_headers.length > 0) {
+		for (i = 0; i < zte_headers.length; i++) {
+			if (zte_headers[i].store === true) {
+				if ( !! store(zte_headers[i].value)) {
+					request.headers[zte_headers[i].key] = store(zte_headers[i].value).toUpperCase()
+				}
+			} else {
+				request.headers[zte_headers[i].key] = zte_headers[i].value
+			}
+		}
+	}
+});
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/core/pym.min.js b/openo-portal/portal-common/src/main/webapp/common/js/core/pym.min.js
new file mode 100644
index 00000000..78b2f513
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/core/pym.min.js
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+(function(a){if(typeof define==="function"&&define.amd){define("pym",[],a)}else{if(typeof module!=="undefined"&&module.exports){module.exports=a()}else{window.pym=a.call(this)}}window.pym=a.call(this)})(function(){var a="xPYMx";function e(){var k,i;if(window.innerHeight&&window.scrollMaxY){k=window.innerWidth+window.scrollMaxX;i=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){k=document.body.scrollWidth;i=document.body.scrollHeight}else{k=document.body.offsetWidth;i=document.body.offsetHeight}}var j,l;if(self.innerHeight){if(document.documentElement.clientWidth){j=document.documentElement.clientWidth}else{j=self.innerWidth}l=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){j=document.documentElement.clientWidth;l=document.documentElement.clientHeight}else{if(document.body){j=document.body.clientWidth;l=document.body.clientHeight}}}if(i<l){pageHeight=l}else{pageHeight=i}if(k<j){pageWidth=k}else{pageWidth=j}arrayPageSize=new Array(pageWidth,pageHeight,j,l);return arrayPageSize}var g={};var c=function(i){var k=new RegExp("[\\?&]"+i.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]")+"=([^&#]*)");var j=k.exec(location.search);if(j===null){return""}return decodeURIComponent(j[1].replace(/\+/g," "))};var b=function(j,i){if(i.xdomain!=="*"){if(!j.origin.match(new RegExp(i.xdomain+"$"))){return}}return true};var h=function(l,i,j){var k=["pym",l,i,j];return k.join(a)};var f=function(j){var i=["pym",j,"(\\S+)","(.+)"];return new RegExp("^"+i.join(a)+"$")};var d=function(){var n=document.querySelectorAll("[data-pym-src]:not([data-pym-auto-initialized])");var m=n.length;for(var i=0;i<m;++i){var l=n[i];l.setAttribute("data-pym-auto-initialized","");if(l.id===""){l.id="pym-"+i}var o=l.getAttribute("data-pym-src");var k=l.getAttribute("data-pym-xdomain");var j={};if(k){j.xdomain=k}new g.Parent(l.id,o,j)}};g.Parent=function(m,j,i){this.id=m;this.url=j;this.el=document.getElementById(m);this.iframe=null;this.minHeight="0";this._olddisplay="";this.oldHeight=0;this.childpageType="";this.setMinHeight=function(n){this.minHeight=n;this._onHeightMessage(n)};this.settings={xdomain:"*"};this.messageRegex=f(this.id);this.messageHandlers={};i=(i||{});this._constructIframe=function(){var o=this.el.offsetWidth.toString();this.iframe=document.createElement("iframe");var q="";var n=this.url.indexOf("#");if(n>-1){q=this.url.substring(n,this.url.length);this.url=this.url.substring(0,n)}if(this.url.indexOf("?")<0){this.url+="?"}else{this.url+="&"}this.iframe.src=this.url.trim().indexOf("javascript:")>=0?"":this.url+"initialWidth="+o+"&childId="+this.id;"&parentUrl="+encodeURIComponent(window.location.href)+q;this.iframe.setAttribute("width","100%");this.iframe.setAttribute("scrolling","no");this.iframe.setAttribute("marginheight","0");this.iframe.setAttribute("frameborder","0");this.el.appendChild(this.iframe);var p=this;window.addEventListener("resize",this._onResize)};this._onResize=function(){this.sendWidth()}.bind(this);this._fire=function(o,p){if(o in this.messageHandlers){for(var n=0;n<this.messageHandlers[o].length;n++){this.messageHandlers[o][n].call(this,p)}}};this.remove=function(){window.removeEventListener("message",this._processMessage);window.removeEventListener("resize",this._onResize);this.el.removeChild(this.iframe)};this._processMessage=function(q){if(!b(q,this.settings)){return}if(typeof q.data!=="string"){return}var n=q.data.match(this.messageRegex);if(!n||n.length!==3){return false}var o=n[1];var p=n[2];this._fire(o,p)}.bind(this);this._onHeightMessage=function(o){var n=parseInt(o);n=Math.max(this.minHeight,n);if(this.oldHeight!=n){if(this.childpageType&&this.childpageType.length>0&&this.childpageType==="isc"){console.log("parent window detect that the child iframe page loaded smartclient,the iframe height will ignore the child's Height change message;");if(this.minHeight<n){n=this.minHeight}}this.oldHeight=n;this.iframe.setAttribute("height",n+"px")}};this._onNavigateToMessage=function(n){document.location.href=n};this._onChildpageTypeMessage=function(n){this.childpageType=n};this.onMessage=function(n,o){if(!(n in this.messageHandlers)){this.messageHandlers[n]=[]}this.messageHandlers[n].push(o)};this.sendMessage=function(n,o){this.el.getElementsByTagName("iframe")[0].contentWindow.postMessage(h(this.id,n,o),"*")};this.sendWidth=function(){var n=this.el.offsetWidth.toString();this.sendMessage("width",n)};for(var k in i){this.settings[k]=i[k]}this.onMessage("height",this._onHeightMessage);this.onMessage("navigateTo",this._onNavigateToMessage);this.onMessage("childpageType",this._onChildpageTypeMessage);var l=this;window.addEventListener("message",this._processMessage,false);this._constructIframe();return this};g.Child=function(i){this.parentWidth=null;this.id=null;this.oldHeight=0;this.parentUrl=null;this.settings={renderCallback:null,xdomain:"*",polling:0};this.messageRegex=null;this.messageHandlers={};i=(i||{});this.onMessage=function(m,n){if(!(m in this.messageHandlers)){this.messageHandlers[m]=[]}this.messageHandlers[m].push(n)};this._fire=function(n,o){if(n in this.messageHandlers){for(var m=0;m<this.messageHandlers[n].length;m++){this.messageHandlers[n][m].call(this,o)}}};this._processMessage=function(p){if(!b(p,this.settings)){return}if(typeof p.data!=="string"){return}var m=p.data.match(this.messageRegex);if(!m||m.length!==3){return}var n=m[1];var o=m[2];this._fire(n,o)}.bind(this);this._onWidthMessage=function(n){var m=parseInt(n);if(m!==this.parentWidth){this.parentWidth=m;if(this.settings.renderCallback){this.settings.renderCallback(m)}this.sendHeight()}};this.sendMessage=function(m,n){window.parent.postMessage(h(this.id,m,n),"*")};this.sendHeight=function(){var n=document.getElementsByTagName("body")[0];height=n.offsetHeight;if(typeof isc!="undefined"&&l.oldPageType!="isc"){height=5;console.log("child iframe id="+l.id+"  loaded smartclient");l.oldPageType="isc";l.sendMessage("childpageType","isc")}var m=0;if(l.oldHeight>height){m=l.oldHeight-height}else{m=height-l.oldHeight}if(m<=70){return}if(l.oldHeight!=height){l.oldHeight=height;console.log("child iframe id="+l.id+" sedHeight:"+height);l.sendMessage("height",height)}}.bind(this);this.scrollParentTo=function(m){this.sendMessage("navigateTo","#"+m)};this.navigateParentTo=function(m){this.sendMessage("navigateTo",m)};this.id=c("childId")||i.id;this.messageRegex=new RegExp("^pym"+a+this.id+a+"(\\S+)"+a+"(.+)$");var k=parseInt(c("initialWidth"));this.parentUrl=c("parentUrl");this.onMessage("width",this._onWidthMessage);for(var j in i){this.settings[j]=i[j]}var l=this;window.addEventListener("message",this._processMessage,false);if(this.settings.renderCallback){this.settings.renderCallback(k)}this.sendHeight();if(this.settings.polling){window.setInterval(this.sendHeight,this.settings.polling)}return this};d();return g});
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/fm_light.js b/openo-portal/portal-common/src/main/webapp/common/js/fm_light.js
new file mode 100644
index 00000000..e31224c5
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/fm_light.js
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+(function($) {
+    String.prototype.trim = function() { 
+		return this.replace(/(^\s*)|(\s*$)/g, ""); 
+	};
+	String.prototype.format=function() {  
+		if(arguments.length==0) return this;  
+			for(var s=this, i=0; i<arguments.length; i++)  
+			s=s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);  
+		return s;  
+   };  
+   //告警计数点击事件
+	$(function(){
+		   $("#hd_alarmcount_critical_value").parentsUntil('a').parent().click(function() {
+			      openNewPage(1);
+				});
+
+		   $("#hd_alarmcount_major_value").parentsUntil('a').parent().click(function() {
+			      openNewPage(2);
+				});
+
+		   $("#hd_alarmcount_minor_value").parentsUntil('a').parent().click(function() {
+			      openNewPage(3);
+				});
+
+		   $("#hd_alarmcount_warning_value").parentsUntil('a').parent().click(function() {
+			      openNewPage(4);
+				});
+		   function openNewPage(severity)
+		   {
+			   window.open("default.html?showNav=false&severity=" + severity + "#_uep-ict-fm-currentAlarm",
+			             "fm_portlet_page_title");
+		   }
+		});	
+    try{
+  	  //base版本不加载告警统计，并在界面隐藏
+    $().ready(function(){
+		if(typeof(base) == "undefined" || !base){
+			 if($("#header_notification_bar")&&$("#header_notification_bar").length>0&&$("#header_notification_bar").children().length>0){
+				// 对告警灯进行鉴权，如果有当前告警权限，显示告警灯，否则返回�?
+				var operations = new Array();
+				operations.push("common.fm.currentview");		
+				var rightObj = getAllOperCodeRights(operations);
+				var operation = $("#uep-ict-fm-currentAlarm").attr("operation");;
+				if (!hasRight(operation, rightObj)) {
+					$('#header_notification_bar').html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>");
+					return;
+				}
+				// get total alarm count
+				$("#hd_heighestAlarmcount_label").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_none_label'));
+				$("#hd_alarmcount_total_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_total_label'));
+				$("#hd_alarmcount_critical_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_critical_label'));
+				$("#hd_alarmcount_major_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_major_label'));
+				$("#hd_alarmcount_minor_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_minor_label'));
+				$("#hd_alarmcount_warning_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_warning_label'));
+			
+				function alarmLight(alarmcount){
+				    if (!alarmcount || !alarmcount.unAckedCount || (alarmcount.unAckedCount.length < 4) || !alarmcount.ackedCount || (alarmcount.ackedCount.length < 4)) {
+						return;
+					}
+					var criticalNum = alarmcount.unAckedCount[0] + alarmcount.ackedCount[0];
+					var majorNum = alarmcount.unAckedCount[1] + alarmcount.ackedCount[1];
+					var minorNum = alarmcount.unAckedCount[2] + alarmcount.ackedCount[2];
+					var warningNum = alarmcount.unAckedCount[3] + alarmcount.ackedCount[3];
+					var totalNum= criticalNum+ majorNum+  minorNum+  warningNum;
+					var heighestAlarmcount=0;
+					var hd_heighestAlarmcount_label="";
+					if(criticalNum>0){
+						heighestAlarmcount =criticalNum;
+						hd_heighestAlarmcount_label=$.i18n.prop('com_zte_ums_ict_alarmcount_critical_label');
+						// $("#hd_heighestAlarmcount_li").attr("class",$("#hd_alarmcount_critical_li").attr("class"));
+					}else if(majorNum>0){
+						heighestAlarmcount =majorNum;
+						hd_heighestAlarmcount_label=$.i18n.prop('com_zte_ums_ict_alarmcount_major_label');
+					}else if(minorNum>0){
+						heighestAlarmcount =minorNum;
+						hd_heighestAlarmcount_label=$.i18n.prop('com_zte_ums_ict_alarmcount_minor_label');
+					}else if(warningNum>0){
+						heighestAlarmcount =warningNum;
+						hd_heighestAlarmcount_label=$.i18n.prop('com_zte_ums_ict_alarmcount_warning_label');
+					}else{
+						heighestAlarmcount =0;
+						hd_heighestAlarmcount_label=$.i18n.prop('com_zte_ums_ict_alarmcount_none_label');
+					}
+						 
+						$("#hd_heighestAlarmcount_value").text(heighestAlarmcount);
+						$("#hd_alarmcount_total_value").text(totalNum);
+						$("#hd_alarmcount_critical_value").text(criticalNum);
+						$("#hd_alarmcount_major_value").text(majorNum);
+						$("#hd_alarmcount_minor_value").text(minorNum);
+						$("#hd_alarmcount_warning_value").text(warningNum);
+
+						$("#hd_heighestAlarmcount_value").attr("title",hd_heighestAlarmcount_label.format(heighestAlarmcount ));  
+					  $("#hd_alarmcount_total_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_total_label').format(totalNum ));  									
+					  $("#hd_alarmcount_critical_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_critical_label').format( criticalNum ));
+						$("#hd_alarmcount_major_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_major_label').format(majorNum));
+						$("#hd_alarmcount_minor_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_minor_label').format(minorNum));
+						$("#hd_alarmcount_warning_value").attr("title",$.i18n.prop('com_zte_ums_ict_alarmcount_warning_label').format(warningNum));
+				
+						$("#hd_alarmcount_critical_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_critical_text'));
+						$("#hd_alarmcount_major_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_major_text'));
+						$("#hd_alarmcount_minor_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_minor_text'));
+						$("#hd_alarmcount_warning_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_warning_text'));
+					
+						$("#hd_alarmcount_total_before_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_total_before_text'));
+						$("#hd_alarmcount_total_after_text").text($.i18n.prop('com_zte_ums_ict_alarmcount_total_after_text'));
+						$("#header_notification_bar").css('display','block');
+				}
+				function queryAlarmTotalCount() {
+					$.getJSON("/web/rest/web/fm/count/total", function(data) {
+						//var alarmcount = $.parseJSON(data);
+						alarmLight(data);
+						if($("#header_notification_bar")&&$("#header_notification_bar").length>0&&$("#header_notification_bar").children().length>0){
+							registerAlarmTotalCountToCometd();
+						}
+					})
+				}
+				if($("#header_notification_bar")&&$("#header_notification_bar").length>0&&$("#header_notification_bar").children().length>0){
+					queryAlarmTotalCount();
+				}
+				var registerAlarmTotalCountToCometd = function () {
+					var self = this;
+					var cometd = $.cometd;
+					var cometURL = location.protocol + "//" + location.host + "/web/cometd";
+					cometd.configure({
+					url: cometURL,
+					logLevel: 'debug'
+					});
+					cometd.addListener('/meta/handshake', function (handshake){          	
+						if (handshake.successful === true) {
+							cometd.batch(function () {   			 
+								cometd.subscribe('/alarm/usercount', function (message) {
+								var alarmcount =message.data;
+								alarmLight(alarmcount);  	        				 
+								})
+							})
+						}
+					});
+					cometd.handshake();
+				};
+					
+				// if($("#header_notification_bar")&&$("#header_notification_bar").length>0&&$("#header_notification_bar").children().length>0){
+					// registerAlarmTotalCountToCometd();
+				// }
+				//setInterval(queryAlarmTotalCount, 30 * 1000);		
+			}
+		}
+		else if(base){
+			//$("#header_notification_bar").hide();
+			//$('#header_notification_bar').empty();
+			$('#header_notification_bar').html("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div>");
+		}
+    });
+    }catch(e){} 
+})(jQuery); 
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n-login.js b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n-login.js
new file mode 100644
index 00000000..05285709
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n-login.js
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+//加载本模块国际化文件并处理静态国际化部分
+function loadProperties_login(lang){
+    jQuery.i18n.properties({
+        language:lang,
+        name:'web-portal-login-integration-i18n',
+        path:'i18n/', 
+        mode:'map', 
+        callback: function() {
+			var i18nItems = $('[name_i18n=com_zte_ums_ict_framework_ui_i18n_login]');
+			for(var i=0;i<i18nItems.length;i++){
+			    var $item = $(i18nItems.eq(i));
+			    var itemId = $item.attr('id');
+				var itemValue = $.i18n.prop(itemId);
+				//从老的js文本文件中读取可能包含"和;字样
+				if(itemValue.indexOf(';')>0){
+					itemValue = itemValue.replace(';', '');
+				}
+				if(/[\'\"]/.test(itemValue)){
+					itemValue = itemValue.replace(/\"/g,'');
+					itemValue = itemValue.replace(/\'/g,'');
+				}
+				if(typeof($item.attr("title"))!="undefined"){
+					$item.attr("title", itemValue);
+				}else if(typeof($item.attr("placeholder"))!="undefined"){
+					$item.attr("placeholder", itemValue);
+				}else{
+					$item.text(itemValue);
+				}
+			}			
+        }
+    });
+}
+
+function loadi18n_login(lang){
+    loadProperties_login(lang);
+}
+
+
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n.js b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n.js
new file mode 100644
index 00000000..d62dbbd9
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18n.js
@@ -0,0 +1,110 @@
+/*
+ * 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.
+ */
+var lang = getLanguage();
+//lang = 'en-US';
+
+//加载主页面head部分国际化
+function loadProperties(lang){
+    jQuery.i18n.properties({
+        language:lang,
+        name:'web-framework-integration-i18n',
+        path:'i18n/', // 资源文件路径
+        mode:'map', // 用 Map 的方式使用资源文件中的值
+        callback: function() {// 加载成功后设置显示内容
+			var i18nItems = $('[name_i18n=com_zte_ums_ict_framework_ui_i18n]');
+			for(var i=0;i<i18nItems.length;i++){
+			    var $item = $(i18nItems.eq(i));
+			    var itemId = $item.attr('id');
+				if(typeof($item.attr("title"))!="undefined"){
+					$item.attr("title", $.i18n.prop(itemId));
+				}else{
+					$item.text($.i18n.prop(itemId));
+				}
+			}			
+        }
+    });
+}
+
+function loadi18n_WebFramework_1(){
+    $.getScript("js/tools.js", function(){
+        var lang = getLanguage();
+        loadProperties(lang);
+    });
+}
+
+function loadi18n_WebFramework(){
+    loadProperties(lang);
+}
+
+/*
+function loadPropertiesSideMenu(lang){
+    jQuery.i18n.properties({
+        language:lang,
+        name:'web-framework-i18n',
+        path:'i18n/', // 资源文件路径
+        mode:'map', // 用 Map 的方式使用资源文件中的值
+        callback: function() {// 加载成功后设置显示内容
+			var i18nItems = $('[name=com_zte_ums_ict_framework_ui_i18n]');
+			for(var i=0;i<i18nItems.length;i++){
+			    var $item = $(i18nItems.eq(i));
+			    var itemId = $item.attr('id');
+				if(typeof($item.attr("placeholder"))=="undefined"){
+					$item.text($.i18n.prop(itemId));
+				}else{
+					$item.attr("placeholder", $.i18n.prop(itemId));
+				}
+			}			
+        }
+    });
+}*/
+
+/**
+* 国际化资源文件加载函数；
+* 相应参数为当前语言（由框架从后端取得），国际化资源文件名前缀，资源文件所在路径。
+*/
+/**
+* 国际化资源文件加载函数；
+* 相应参数为当前语言（由框架从后端取得），国际化资源文件名前缀，资源文件所在路径。
+*/
+function loadPropertiesSideMenu(lang, propertiesFileNamePrefix, propertiesFilePath , name_I18n){
+	console.info('loadPropertiesSideMenu has been called  ' + propertiesFilePath);
+	if(!name_I18n) name_I18n='com_zte_ums_ict_framework_ui_i18n_sideMenu';
+    jQuery.i18n.properties({
+        language:lang,
+        name:propertiesFileNamePrefix,
+        path:propertiesFilePath, // 资源文件路径
+        mode:'map', // 用 Map 的方式使用资源文件中的值
+        callback: function() {// 加载成功后设置显示内容
+			var i18nItems = $('[name_i18n='+ name_I18n + ']');
+			for(var i=0;i<i18nItems.length;i++){
+			    var $item = $(i18nItems.eq(i));
+			    var itemId = $item.attr('id');
+				if(typeof($item.attr("placeholder"))=="undefined"){
+					$item.text($.i18n.prop(itemId));
+				}else{
+					$item.attr("placeholder", $.i18n.prop(itemId));
+				}
+			}			
+        }
+    });
+}
+
+function loadi18n_WebFramework_sideMenu(){
+	//默认0场景菜单资源文件
+    //loadPropertiesSideMenu(lang, 'web-framework-i18n', 'i18n/');
+	//加载各应用菜单资源文件
+	var srcpath ="i18n/";
+	loadPropertiesSideMenu(lang , 'web-framework-integration-i18n', srcpath);}
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18nApp_universal.js b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18nApp_universal.js
new file mode 100644
index 00000000..9a6cd48c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/international/loadi18nApp_universal.js
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+function loadAppPropertiesSideMenu(lang){
+	/**
+	* 调用框架的国际化资源文件加载函数；
+	* 相应参数为当前语言（由框架从后端取得），国际化资源文件名前缀，资源文件所在路径。
+	*/
+	loadPropertiesSideMenu(lang, 'app-universal-i18n', 'i18n/');
+}
+loadAppPropertiesSideMenu(lang);
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/json2.js b/openo-portal/portal-common/src/main/webapp/common/js/json2.js
new file mode 100644
index 00000000..a281d22c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/json2.js
@@ -0,0 +1,341 @@
+/*
+ * 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.
+ */
+
+if (typeof JSON !== 'object') {
+    JSON = {};
+}
+
+(function () {
+    'use strict';
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                    f(this.getUTCMonth() + 1) + '-' +
+                    f(this.getUTCDate())      + 'T' +
+                    f(this.getUTCHours())     + ':' +
+                    f(this.getUTCMinutes())   + ':' +
+                    f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+            Boolean.prototype.toJSON = function (key) {
+                return this.valueOf();
+            };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0
+                    ? '[]'
+                    : gap
+                    ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                    : '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === 'string') {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0
+                ? '{}'
+                : gap
+                ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/
+                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/login.js b/openo-portal/portal-common/src/main/webapp/common/js/login.js
new file mode 100644
index 00000000..6fda2122
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/login.js
@@ -0,0 +1,225 @@
+/*
+ * 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.
+ */
+String.prototype.trim = function() { 
+	return this.replace(/(^\s*)|(\s*$)/g, "");  
+};
+function loginSubmitHandler(form) {
+			          var params = {};
+					  params["username"] =$("#inputUserName").val().trim();
+					  var sourcePass = $("#inputPassword").val();
+					  var pass = sourcePass;
+					  if( FrameConst.isEncypt === "true"){
+					      pass = ict_framework_func1(pass);
+					  }
+					  params["password"] = pass;
+					  params["isEncypted"]  = FrameConst.isEncypt;					  
+					  saveUserInfo(params);			          
+  					  $.ajax({  
+							url : FrameConst.REST_LOGIN,  
+							type : 'POST',  
+							data : JSON.stringify(params),  
+							dataType : 'json',  
+							contentType : 'application/json; charset=utf-8',  
+							success : function(data, status, xhr) {  
+							if(data.result == 0){
+								 var epass=CryptoJS.MD5(params.username+sourcePass);
+								 store("icttka", epass.toLocaleString());
+							}
+								processLoginResult(data,params);
+							},  
+							Error : function(xhr, error, exception) {  
+								alert( error );
+								if( console ){
+									console.log( "login fail:" + error );
+									console.log( exception ); 
+								}
+							}   
+						});	   
+};
+
+
+var Login = function () {
+
+	var handleLogin = function() {
+		$('.login-form').validate({
+	            errorElement: 'span', //default input error message container
+	            errorClass: 'help-block', // default input error message class
+	            focusInvalid: false, // do not focus the last invalid input
+	            rules: {
+	                username: {
+	                    required: true
+	                },
+	                password: {
+	                    required: false
+	                },
+	                remember: {
+	                    required: false
+	                }
+	            },
+
+	            messages: {
+	                username: {
+	                   required: $.i18n.prop('com_zte_ums_ict_login_inputname').replace(/\"/g,'') 
+	                },
+	                password: {
+	                   required: $.i18n.prop('com_zte_ums_ict_login_inputpwd').replace(/\"/g,'')
+	                }
+	            },
+
+	            invalidHandler: function (event, validator) { //display error alert on form submit   
+	                $('.alert-danger', $('.login-form')).show();
+	            },
+
+	            highlight: function (element) { // hightlight error inputs
+	                $(element)
+	                    .closest('.form-group').addClass('has-error'); // set error class to the control group
+	            },
+
+	            success: function (label) {
+	                label.closest('.form-group').removeClass('has-error');
+	                label.remove();
+	            },
+
+	            errorPlacement: function (error, element) {
+	                error.insertAfter(element.closest('.input-icon'));
+	            },
+
+	            submitHandler: loginSubmitHandler
+	        });
+
+	        $('.login-form input').keypress(function (e) {
+		    	$("#nameOrpwdError").hide();
+				$("#loginConnError").hide();
+	            if (e.which == 13) {  
+	                if ($('.login-form').validate().form()) {
+	                    $('.login-form').submit();
+	                }
+	                return false;
+	            }
+	        });
+			
+			$("input[name='remember']").bind("click", function () {
+			    saveUserInfo();
+			});
+	}
+
+	var handleForgetPassword = function () {
+		$('.forget-form').validate({
+	            errorElement: 'span', //default input error message container
+	            errorClass: 'help-block', // default input error message class
+	            focusInvalid: false, // do not focus the last invalid input
+	            ignore: "",
+	            rules: {
+	                email: {
+	                    required: true,
+	                    email: true
+	                }
+	            },
+
+	            messages: {
+	                email: {
+	                    required: "Email is required."
+	                }
+	            },
+
+	            invalidHandler: function (event, validator) { //display error alert on form submit   
+
+	            },
+
+	            highlight: function (element) { // hightlight error inputs
+	                $(element)
+	                    .closest('.form-group').addClass('has-error'); // set error class to the control group
+	            },
+
+	            success: function (label) {
+	                label.closest('.form-group').removeClass('has-error');
+	                label.remove();
+	            },
+
+	            errorPlacement: function (error, element) {
+	                error.insertAfter(element.closest('.input-icon'));
+	            },
+
+	            submitHandler: function (form) {
+	                form.submit();
+	            }
+	        });
+
+	        $('.forget-form input').keypress(function (e) {
+	            if (e.which == 13) {
+	                if ($('.forget-form').validate().form()) {
+	                    $('.forget-form').submit();
+	                }
+	                return false;
+	            }
+	        });
+
+	        $('#forget-password').click(function () {
+	            $('.login-form').hide();
+	            $('.forget-form').show();
+	        });
+
+	        $('#back-btn').click(function () {
+	            $('.login-form').show();
+	            $('.forget-form').hide();
+	        });
+
+	}
+    return {
+        //main function to initiate the module
+        init: function () {
+        	
+            handleLogin();
+            handleForgetPassword();
+	       
+	       	$.backstretch([
+		        "img/integration/zte_bg_1.jpg",
+		        "img/integration//zte_bg_2.jpg",
+		        "img/integration//zte_bg_3.jpg"
+		        ], {
+		          fade: 500,
+		          duration: 15000
+		    });
+        }
+    };
+}();
+
+
+$(document).ready(function() {
+    if (store("remember") == "true") {
+        $("input[name='remember']").attr("checked", "checked");
+        $("#inputUserName").val(store("inputUserName"));
+        $("#inputPassword").val(store("inputPassword"));
+    }
+});
+
+
+function saveUserInfo(params) {
+    var rmbcheck=$("input[name='remember']");
+    if (rmbcheck.attr("checked")==true||rmbcheck.is(':checked')) {
+	    var userName = $("#inputUserName").val();
+        var passWord = $("#inputPassword").val();
+        store("remember", "true"); 
+        store("inputUserName", params.username); 
+        store("inputPassword", passWord); 
+    }
+    else {
+        store.remove("remember");
+        store.remove("inputUserName");
+        store.remove("inputPassword");
+    }
+}
+
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/mainpage/about.js b/openo-portal/portal-common/src/main/webapp/common/js/mainpage/about.js
new file mode 100644
index 00000000..6468440c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/mainpage/about.js
@@ -0,0 +1,142 @@
+/*
+ * 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.
+ */
+var iniAboutInfo = function() {
+
+    //转换colomn
+
+    var divId = "ict_about_table_div";
+    var tableId = "abouttable";
+    var column = [
+        {"mData": "name", name: $.i18n.prop('com_zte_ums_ict_about_ppu_field_name'), "sWidth": '20%'},
+        {"mData": "version", name: $.i18n.prop('com_zte_ums_ict_about_ppu_field_version'), "sWidth": '25%'},
+        {"mData": "describe", name: $.i18n.prop('com_zte_ums_ict_about_ppu_field_desc'), "sWidth": '25%'},
+        {"mData": "time", name: $.i18n.prop('com_zte_ums_ict_about_ppu_field_time'), "sWidth": '30%'}
+    ];
+    //先把原来的表格清空
+    $('#' + divId).children().remove();
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= ' + tableId + '>'
+        + '<thead>'
+        + '<tr role="row" class="heading" >'
+        + '</tr>'
+        + '</thead>'
+        + '<tbody>'
+        + '</tbody>'
+        + '</table>';
+    $('#' + divId).append(tableEleStr);
+    var trEle = $('#' + tableId + ' > thead >tr');
+
+    for (var one in column) {
+        var th = '<th>' + column[one].name + '</th>';
+        trEle.append(th);
+    }
+    var table = $("#" + tableId).dataTable({
+        "bFilter": false,// 搜索栏
+        "bPaginate":false,
+        "bInfo":false,
+        "bSort":false,
+        'bAutoWidth':true
+    });
+    $.ajax({
+        type: "GET",
+        cache: false,
+        url: FrameConst.REST_GET_VERSIONINFO,
+        dataType: "json",
+        success: function (data) {
+            console.log(data);
+            //主版本号
+            $(".ict_main_version").append('<span>' + data.mainversion + '</span>');
+            //表格数据填充
+            for( var i = 0 ; i < data.ppuinfo.length ; i++ ) {
+                var eachPPU = data.ppuinfo[i];
+                $('#'+ tableId).dataTable().fnAddData([eachPPU.name ,eachPPU.version ,eachPPU.describe , eachPPU.time ]);
+            }
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+           
+        }
+    });
+};
+
+function internationalization(){
+    var lang = getLanguage();
+    //加载国际化
+    jQuery.i18n.properties({
+        language:lang,
+        name:'web-framework-integration-i18n',
+        path:'i18n/', // 资源文件路径
+        mode:'map', // 用 Map 的方式使用资源文件中的值
+        callback: function() {// 加载成功后设置显示内容
+            var i18nItems = $('[name_i18n=com_zte_ums_ict_framework_ui_i18n]' , '.aboutDlg');
+            for(var i=0;i<i18nItems.length;i++){
+                var $item = $(i18nItems.eq(i));
+                var itemId = $item.attr('id');
+                if(typeof($item.attr("title"))!="undefined"){
+                    $item.attr("title", $.i18n.prop(itemId));
+                }else{
+                    $item.text($.i18n.prop(itemId));
+                }
+            }
+        }
+    });
+
+}
+
+function getAboutDlg(url){
+    if (url.length<2){
+        return;
+    }
+    ZteFrameWork.startPageLoading();//加载中....
+    var aboutDiv =jQuery('.modal-dialog .aboutDlg');
+    aboutDiv.empty();
+    $.ajax({
+        type: "GET",
+        cache: false,
+        url: url,
+        dataType: "html",
+        success: function (res) {
+            jQuery('.modal-dialog .aboutDlg').append(res);
+            iniAboutInfo();
+            internationalization();
+            ZteFrameWork.stopPageLoading();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            
+        }
+    });
+};
+
+function iniAboutDlg(){
+    var url=jQuery('.modal-dialog .aboutDlg').attr("dlgsrc");
+    if(url&&url.length>0){
+        getAboutDlg(url);
+    }
+};
+
+var ict_about_dlg_close = function(){
+    link_click('about');
+    console.log("about click close");
+    $('#aboutDlg').modal('hide');
+};
+var link_click = function( pageName ){
+    console.log("about click change");
+    if(pageName === 'info'){
+        $('.aboutmain').attr("style" , "display:none");
+        $('.aboutinfo').attr("style" , "display:block");
+    }else{
+        $('.aboutmain').attr("style" , "display:block");
+        $('.aboutinfo').attr("style" , "display:none");
+    }
+};
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/mainpage/ict.main.page.js b/openo-portal/portal-common/src/main/webapp/common/js/mainpage/ict.main.page.js
new file mode 100644
index 00000000..3752ac02
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/mainpage/ict.main.page.js
@@ -0,0 +1,142 @@
+/*
+ * 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.
+ */
+var initMainPage = function(){
+	var modules;
+	var resConfig;
+
+	var lang = getLanguage();
+	var propertiesFileNamePrefix = "";
+	//var jsonUrl = "json/main-page-" + lang + ".json";	
+	//var jsonUrl = mainpagePath;
+	var jsonUrl = "appRes/json/main-page.json";
+	var appResExist = false;
+	
+	$.ajax({
+		  async:false,
+		  "type" : "GET",
+		  url: jsonUrl,
+		  dataType: "json",
+		  "success" : function (res, textStatus, jqXHR) {		
+				resConfig = res;
+				modules = res.modules;	
+				propertiesFileNamePrefix = res.propertiesFileNamePrefix;	
+				appResExist	= true;
+		  },
+		  "error" : function () {
+			   //alert("Config file load error!");
+		  }
+	});		
+	
+	if(!appResExist){
+		jsonUrl = "json/main-page.json";		
+		$.ajax({
+			  async:false,
+			  "type" : "GET",
+			  url: jsonUrl,
+			  dataType: "json",
+			  "success" : function (res, textStatus, jqXHR) {		
+					resConfig = res;
+					modules = res.modules;	
+					propertiesFileNamePrefix = res.propertiesFileNamePrefix;				 
+			  },
+			  "error" : function () {
+				   alert("Config file load error!");
+			  }
+		});		
+	}
+
+	var template = "<div class='brick {image}'>" + 
+					"<a id='{linkId}' href='{url}' class='entranceLink'>" + 
+					"<div class='row'>" + 
+					   "<div class='cover contentToggle'>{cover}</div>" +
+					   "<div class='{toolsImage}'></div>" +  
+					   "<div class='contentTip  contentToggle'>{contentTip}</div>" +
+					"</div>" + 
+					"</a>" +  					
+			   "</div>";
+			   
+	var templatePic = "<div class='brick {image}'>" + 
+					"<div class='row'>" + 
+					   "<div class='cover contentToggle'>{cover}</div>" +
+					   "<div class='{toolsImage}'></div>" +  
+					   "<div class='contentTip  contentToggle'>{contentTip}</div>" +
+					"</div>" + 				
+			   "</div>";
+	
+	for (var i = 0; i < modules.length; ++i) {
+			
+		if(!modules[i].background){
+			alert("Brick background missed!");
+			return;
+		}
+		
+		var temp = "";		
+		
+		if(modules[i].linkId){
+			temp = template.replace("{linkId}", modules[i].linkId)
+						.replace("{image}", modules[i].background)
+						.replace("{toolsImage}", modules[i].toolsImage)
+						.replace("{url}", modules[i].url)
+						.replace("{contentTip}", modules[i].contentTip);
+		}else{
+			temp = templatePic.replace("{image}", modules[i].background)
+						.replace("{url}", modules[i].url)
+						.replace("{contentTip}", "");
+		}
+		
+		if(modules[i].cover){
+			temp = temp.replace("{cover}", "<span id='" + modules[i].cover + "' name_i18n='com_zte_ums_ict_framework_ui_i18n'></span>");
+		}else{
+			temp = temp.replace("{cover}","");
+		}
+		
+		$($(".column")[i % 4]).append(temp);
+			
+	}
+			
+	
+	$(function() {						
+		
+		$("#headerName").html("<img src='" + resConfig.productImage + "' />" );
+		
+		$(".brick").mouseover(function(){	
+			$(".contentTip", this).fadeTo(1000, 1);					
+			$(".cover", this).fadeOut(1000);
+		});
+		
+		$(".brick").mouseout(function(){
+			$(".contentTip", this).fadeTo(1000, 0);	
+			$(".cover", this).fadeIn(1000);
+		});
+		
+		//添加模块导航链接
+//		var parentPage = window.parent;
+//		while(!parentPage.ZteFrameWork){
+//			parentPage = parentPage.parent;
+//		}				
+		$("a.entranceLink").click(function(e){
+			e.preventDefault();
+			if($(this).attr("id") && $(this).attr("id") != "undefined"){
+				location.href = "default.html" + "#_" + $(this).attr("id");
+			}
+		});					
+		
+		//国际化
+		loadPropertiesSideMenu(lang, propertiesFileNamePrefix, "appRes/i18n/" , "com_zte_ums_ict_framework_ui_i18n");
+		//loadPropertiesSideMenu(lang, propertiesFileNamePrefix, "i18n/" , "com_zte_ums_ict_framework_ui_i18n");
+		loadPropertiesSideMenu(lang, "web-framework-integration-i18n", "i18n/" , "com_zte_ums_ict_framework_ui_i18n");
+	});
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/moreOperation.js b/openo-portal/portal-common/src/main/webapp/common/js/moreOperation.js
new file mode 100644
index 00000000..70b0862c
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/moreOperation.js
@@ -0,0 +1,166 @@
+/*
+ * 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.
+ */
+var resetSelectedItem=function(menuAlink){
+	if(menuAlink.children('div.boxOperation').length>0){
+		$(".box.boxOperation", $(".carousel-inner")).removeClass("moreButtonSelected");
+		menuAlink.children('div.boxOperation').addClass('moreButtonSelected');
+	}else if(menuAlink.parents('div.boxOperation').length>0){
+		$(".box.boxOperation", $(".carousel-inner")).removeClass("moreButtonSelected");
+		menuAlink.parents('div.boxOperation').addClass('moreButtonSelected');
+	}
+}
+var reSelected=function(){
+	if(ZteFrameWork){
+		var menuID = ZteFrameWork.getLocationHash();
+		var menuAlink = $('#'+ menuID,$('#pageableDiv'));
+		if(menuAlink.length>0){
+			resetSelectedItem(menuAlink);
+		}else{
+			menuAlink = $('#'+ menuID,$('.hor-menu'));
+			if(!!menuAlink.attr("defaultchildmenuid")&&menuAlink.attr("defaultchildmenuid").length>0){
+				menuAlink = $('#'+ menuAlink.attr("defaultchildmenuid"),$('#pageableDiv'));
+				if(menuAlink.length>0){
+					resetSelectedItem(menuAlink);
+				}
+			}
+		}
+	}
+}
+var inter=null;
+	
+var clearMoreOperations=function(){
+    $('#pageableDiv').removeClass("moreOpen");
+	$('#pageableDiv').addClass("moreClose");
+	$('.col-xs-12',$('#pageableDiv')).removeClass("moreOpen");
+	$('.col-xs-12',$('#pageableDiv')).addClass("moreClose");	
+    $(".carousel-inner").children().remove();
+	if (inter) {
+        clearInterval(inter);
+    };
+}
+
+var moreOperations = function(html){
+	$('#pageableDiv').removeClass("moreClose");
+	$('#pageableDiv').addClass("moreOpen");
+	$('.col-xs-12',$('#pageableDiv')).removeClass("moreClose");
+	$('.col-xs-12',$('#pageableDiv')).addClass("moreOpen");	
+	showArrow();
+	$(".carousel-inner").children().remove();
+    inter=setInterval(reSelected, 200);
+	var moreViewData=[];	
+	var div = document.createElement('div');
+	//div.innerHTML = html;
+	$(div).append(html);
+	var liTages =$("ul:first",div).children(); //div.getElementsByTagName('li')
+	for(var i=0;i<liTages.length;i++){
+		if(!$(liTages[i]).hasClass("divider")){
+			var aLink = {};
+			if($(liTages[i]).hasClass("dropdown")){//???????????
+			    var _litages=$(liTages[i]);
+				aLink.html='<div class="box boxOperation">'+_litages.prop("outerHTML")+"</div>";
+			}else{
+			var aLinkTag = $("a", liTages[i]);
+			aLink.id = aLinkTag.attr("id");
+			var aLinkContent = aLinkTag.html();
+			aLinkTag.empty().html('<div class="box boxOperation"></div>');
+			$(".box", aLinkTag).html(aLinkContent);
+			aLink.html = aLinkTag.prop("outerHTML");
+			}
+			moreViewData.push(aLink);
+		}
+	}
+
+	var transformQueryViewData = function(queryViewData, pageSize){
+		var newData = [];
+		var pageNo = Math.floor(queryViewData.length / pageSize) + 1;
+		if(queryViewData.length % pageSize == 0){
+			pageNo--;
+		}
+		for(var i=0;i<pageNo;i++){
+			newData.push({array:[]});
+		}
+		for(var j=0;j<queryViewData.length;j++){
+			newData[Math.floor(j/pageSize)].array.push(queryViewData[j]);  
+		}	
+		return newData;
+	}
+	
+	var moreOperationItems = [];
+	
+	var generateOperationItems = function(){	
+		for(var i=0;i<moreOperationItems.length;i++){
+			var itemHtml = '<div id="page_' + i + '" class="item moreButtonsTag">' + 
+								  '<div class="col-xs-12" style="padding-right: 20px;">' + 
+								  "</div>" + 
+							   "</div>";	  
+			$(".carousel-inner").append(itemHtml);
+		}
+		for(var i=0;i<moreOperationItems.length;i++){
+			for(var j=0;j<moreOperationItems[i].array.length;j++){
+				var buttonHtml = '<div class="moreButton boxPadding">' + moreOperationItems[i].array[j].html + '</div>';
+				$(".col-xs-12", $("#page_" + i + ".item")).append(buttonHtml);				
+			}
+		}		
+	}
+
+	//moreOperationItems = transformQueryViewData(moreViewData, 14);
+	
+	var moreOperationPageSize = 14;	
+	var windowWidth = $(window).width();
+	if(windowWidth >= 1367 && windowWidth < 1441){
+		moreOperationPageSize = 12;
+	}else if(windowWidth >= 1281 && windowWidth < 1367){
+		moreOperationPageSize = 11;
+	}else if(windowWidth >= 1025 && windowWidth < 1281){
+		moreOperationPageSize = 10;
+	}else if(windowWidth >= 920 && windowWidth < 1281){
+		moreOperationPageSize = 9;
+	}else if(windowWidth >= 820 && windowWidth < 920){
+		moreOperationPageSize = 8;
+	}else if(windowWidth >= 680 && windowWidth < 820){
+		moreOperationPageSize = 7;
+	}else if(windowWidth >= 540 && windowWidth < 680){
+		moreOperationPageSize = 4;
+	}else if(windowWidth >= 390 && windowWidth < 540){
+		moreOperationPageSize = 3;
+	}else if(windowWidth < 390){
+		moreOperationPageSize = 2;
+	}
+
+	moreOperationItems = transformQueryViewData(moreViewData, moreOperationPageSize);
+	generateOperationItems();
+	
+	$(".box.boxOperation").click(function(){
+		$(".box.boxOperation", $(".carousel-inner")).removeClass("moreButtonSelected");
+		$(this).addClass("moreButtonSelected");
+	});
+
+	$($(".item", $(".carousel-inner"))[0]).addClass("active");	
+	
+	if($(".item.moreButtonsTag").length < 2){
+		hideArrow();
+	} 
+}
+
+var showArrow = function(){
+	$(".carousel-control").show();
+	$(".boxOperation").removeClass("boxOperationOnePage");
+}
+	
+var hideArrow = function(){
+	$(".carousel-control").hide();
+	$(".boxOperation").addClass("boxOperationOnePage");
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/security/aes.js b/openo-portal/portal-common/src/main/webapp/common/js/security/aes.js
new file mode 100644
index 00000000..a5dc52b2
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/security/aes.js
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+var CryptoJS=CryptoJS||function(u,p){var d={},l=d.lib={},s=function(){},t=l.Base={extend:function(a){s.prototype=this;var c=new s;a&&c.mixIn(a);c.hasOwnProperty("init")||(c.init=function(){c.$super.init.apply(this,arguments)});c.init.prototype=c;c.$super=this;return c},create:function(){var a=this.extend();a.init.apply(a,arguments);return a},init:function(){},mixIn:function(a){for(var c in a)a.hasOwnProperty(c)&&(this[c]=a[c]);a.hasOwnProperty("toString")&&(this.toString=a.toString)},clone:function(){return this.init.prototype.extend(this)}},
+r=l.WordArray=t.extend({init:function(a,c){a=this.words=a||[];this.sigBytes=c!=p?c:4*a.length},toString:function(a){return(a||v).stringify(this)},concat:function(a){var c=this.words,e=a.words,j=this.sigBytes;a=a.sigBytes;this.clamp();if(j%4)for(var k=0;k<a;k++)c[j+k>>>2]|=(e[k>>>2]>>>24-8*(k%4)&255)<<24-8*((j+k)%4);else if(65535<e.length)for(k=0;k<a;k+=4)c[j+k>>>2]=e[k>>>2];else c.push.apply(c,e);this.sigBytes+=a;return this},clamp:function(){var a=this.words,c=this.sigBytes;a[c>>>2]&=4294967295<<
+32-8*(c%4);a.length=u.ceil(c/4)},clone:function(){var a=t.clone.call(this);a.words=this.words.slice(0);return a},random:function(a){for(var c=[],e=0;e<a;e+=4)c.push(4294967296*u.random()|0);return new r.init(c,a)}}),w=d.enc={},v=w.Hex={stringify:function(a){var c=a.words;a=a.sigBytes;for(var e=[],j=0;j<a;j++){var k=c[j>>>2]>>>24-8*(j%4)&255;e.push((k>>>4).toString(16));e.push((k&15).toString(16))}return e.join("")},parse:function(a){for(var c=a.length,e=[],j=0;j<c;j+=2)e[j>>>3]|=parseInt(a.substr(j,
+2),16)<<24-4*(j%8);return new r.init(e,c/2)}},b=w.Latin1={stringify:function(a){var c=a.words;a=a.sigBytes;for(var e=[],j=0;j<a;j++)e.push(String.fromCharCode(c[j>>>2]>>>24-8*(j%4)&255));return e.join("")},parse:function(a){for(var c=a.length,e=[],j=0;j<c;j++)e[j>>>2]|=(a.charCodeAt(j)&255)<<24-8*(j%4);return new r.init(e,c)}},x=w.Utf8={stringify:function(a){try{return decodeURIComponent(escape(b.stringify(a)))}catch(c){throw Error("Malformed UTF-8 data");}},parse:function(a){return b.parse(unescape(encodeURIComponent(a)))}},
+q=l.BufferedBlockAlgorithm=t.extend({reset:function(){this._data=new r.init;this._nDataBytes=0},_append:function(a){"string"==typeof a&&(a=x.parse(a));this._data.concat(a);this._nDataBytes+=a.sigBytes},_process:function(a){var c=this._data,e=c.words,j=c.sigBytes,k=this.blockSize,b=j/(4*k),b=a?u.ceil(b):u.max((b|0)-this._minBufferSize,0);a=b*k;j=u.min(4*a,j);if(a){for(var q=0;q<a;q+=k)this._doProcessBlock(e,q);q=e.splice(0,a);c.sigBytes-=j}return new r.init(q,j)},clone:function(){var a=t.clone.call(this);
+a._data=this._data.clone();return a},_minBufferSize:0});l.Hasher=q.extend({cfg:t.extend(),init:function(a){this.cfg=this.cfg.extend(a);this.reset()},reset:function(){q.reset.call(this);this._doReset()},update:function(a){this._append(a);this._process();return this},finalize:function(a){a&&this._append(a);return this._doFinalize()},blockSize:16,_createHelper:function(a){return function(b,e){return(new a.init(e)).finalize(b)}},_createHmacHelper:function(a){return function(b,e){return(new n.HMAC.init(a,
+e)).finalize(b)}}});var n=d.algo={};return d}(Math);
+(function(){var u=CryptoJS,p=u.lib.WordArray;u.enc.Base64={stringify:function(d){var l=d.words,p=d.sigBytes,t=this._map;d.clamp();d=[];for(var r=0;r<p;r+=3)for(var w=(l[r>>>2]>>>24-8*(r%4)&255)<<16|(l[r+1>>>2]>>>24-8*((r+1)%4)&255)<<8|l[r+2>>>2]>>>24-8*((r+2)%4)&255,v=0;4>v&&r+0.75*v<p;v++)d.push(t.charAt(w>>>6*(3-v)&63));if(l=t.charAt(64))for(;d.length%4;)d.push(l);return d.join("")},parse:function(d){var l=d.length,s=this._map,t=s.charAt(64);t&&(t=d.indexOf(t),-1!=t&&(l=t));for(var t=[],r=0,w=0;w<
+l;w++)if(w%4){var v=s.indexOf(d.charAt(w-1))<<2*(w%4),b=s.indexOf(d.charAt(w))>>>6-2*(w%4);t[r>>>2]|=(v|b)<<24-8*(r%4);r++}return p.create(t,r)},_map:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="}})();
+(function(u){function p(b,n,a,c,e,j,k){b=b+(n&a|~n&c)+e+k;return(b<<j|b>>>32-j)+n}function d(b,n,a,c,e,j,k){b=b+(n&c|a&~c)+e+k;return(b<<j|b>>>32-j)+n}function l(b,n,a,c,e,j,k){b=b+(n^a^c)+e+k;return(b<<j|b>>>32-j)+n}function s(b,n,a,c,e,j,k){b=b+(a^(n|~c))+e+k;return(b<<j|b>>>32-j)+n}for(var t=CryptoJS,r=t.lib,w=r.WordArray,v=r.Hasher,r=t.algo,b=[],x=0;64>x;x++)b[x]=4294967296*u.abs(u.sin(x+1))|0;r=r.MD5=v.extend({_doReset:function(){this._hash=new w.init([1732584193,4023233417,2562383102,271733878])},
+_doProcessBlock:function(q,n){for(var a=0;16>a;a++){var c=n+a,e=q[c];q[c]=(e<<8|e>>>24)&16711935|(e<<24|e>>>8)&4278255360}var a=this._hash.words,c=q[n+0],e=q[n+1],j=q[n+2],k=q[n+3],z=q[n+4],r=q[n+5],t=q[n+6],w=q[n+7],v=q[n+8],A=q[n+9],B=q[n+10],C=q[n+11],u=q[n+12],D=q[n+13],E=q[n+14],x=q[n+15],f=a[0],m=a[1],g=a[2],h=a[3],f=p(f,m,g,h,c,7,b[0]),h=p(h,f,m,g,e,12,b[1]),g=p(g,h,f,m,j,17,b[2]),m=p(m,g,h,f,k,22,b[3]),f=p(f,m,g,h,z,7,b[4]),h=p(h,f,m,g,r,12,b[5]),g=p(g,h,f,m,t,17,b[6]),m=p(m,g,h,f,w,22,b[7]),
+f=p(f,m,g,h,v,7,b[8]),h=p(h,f,m,g,A,12,b[9]),g=p(g,h,f,m,B,17,b[10]),m=p(m,g,h,f,C,22,b[11]),f=p(f,m,g,h,u,7,b[12]),h=p(h,f,m,g,D,12,b[13]),g=p(g,h,f,m,E,17,b[14]),m=p(m,g,h,f,x,22,b[15]),f=d(f,m,g,h,e,5,b[16]),h=d(h,f,m,g,t,9,b[17]),g=d(g,h,f,m,C,14,b[18]),m=d(m,g,h,f,c,20,b[19]),f=d(f,m,g,h,r,5,b[20]),h=d(h,f,m,g,B,9,b[21]),g=d(g,h,f,m,x,14,b[22]),m=d(m,g,h,f,z,20,b[23]),f=d(f,m,g,h,A,5,b[24]),h=d(h,f,m,g,E,9,b[25]),g=d(g,h,f,m,k,14,b[26]),m=d(m,g,h,f,v,20,b[27]),f=d(f,m,g,h,D,5,b[28]),h=d(h,f,
+m,g,j,9,b[29]),g=d(g,h,f,m,w,14,b[30]),m=d(m,g,h,f,u,20,b[31]),f=l(f,m,g,h,r,4,b[32]),h=l(h,f,m,g,v,11,b[33]),g=l(g,h,f,m,C,16,b[34]),m=l(m,g,h,f,E,23,b[35]),f=l(f,m,g,h,e,4,b[36]),h=l(h,f,m,g,z,11,b[37]),g=l(g,h,f,m,w,16,b[38]),m=l(m,g,h,f,B,23,b[39]),f=l(f,m,g,h,D,4,b[40]),h=l(h,f,m,g,c,11,b[41]),g=l(g,h,f,m,k,16,b[42]),m=l(m,g,h,f,t,23,b[43]),f=l(f,m,g,h,A,4,b[44]),h=l(h,f,m,g,u,11,b[45]),g=l(g,h,f,m,x,16,b[46]),m=l(m,g,h,f,j,23,b[47]),f=s(f,m,g,h,c,6,b[48]),h=s(h,f,m,g,w,10,b[49]),g=s(g,h,f,m,
+E,15,b[50]),m=s(m,g,h,f,r,21,b[51]),f=s(f,m,g,h,u,6,b[52]),h=s(h,f,m,g,k,10,b[53]),g=s(g,h,f,m,B,15,b[54]),m=s(m,g,h,f,e,21,b[55]),f=s(f,m,g,h,v,6,b[56]),h=s(h,f,m,g,x,10,b[57]),g=s(g,h,f,m,t,15,b[58]),m=s(m,g,h,f,D,21,b[59]),f=s(f,m,g,h,z,6,b[60]),h=s(h,f,m,g,C,10,b[61]),g=s(g,h,f,m,j,15,b[62]),m=s(m,g,h,f,A,21,b[63]);a[0]=a[0]+f|0;a[1]=a[1]+m|0;a[2]=a[2]+g|0;a[3]=a[3]+h|0},_doFinalize:function(){var b=this._data,n=b.words,a=8*this._nDataBytes,c=8*b.sigBytes;n[c>>>5]|=128<<24-c%32;var e=u.floor(a/
+4294967296);n[(c+64>>>9<<4)+15]=(e<<8|e>>>24)&16711935|(e<<24|e>>>8)&4278255360;n[(c+64>>>9<<4)+14]=(a<<8|a>>>24)&16711935|(a<<24|a>>>8)&4278255360;b.sigBytes=4*(n.length+1);this._process();b=this._hash;n=b.words;for(a=0;4>a;a++)c=n[a],n[a]=(c<<8|c>>>24)&16711935|(c<<24|c>>>8)&4278255360;return b},clone:function(){var b=v.clone.call(this);b._hash=this._hash.clone();return b}});t.MD5=v._createHelper(r);t.HmacMD5=v._createHmacHelper(r)})(Math);
+(function(){var u=CryptoJS,p=u.lib,d=p.Base,l=p.WordArray,p=u.algo,s=p.EvpKDF=d.extend({cfg:d.extend({keySize:4,hasher:p.MD5,iterations:1}),init:function(d){this.cfg=this.cfg.extend(d)},compute:function(d,r){for(var p=this.cfg,s=p.hasher.create(),b=l.create(),u=b.words,q=p.keySize,p=p.iterations;u.length<q;){n&&s.update(n);var n=s.update(d).finalize(r);s.reset();for(var a=1;a<p;a++)n=s.finalize(n),s.reset();b.concat(n)}b.sigBytes=4*q;return b}});u.EvpKDF=function(d,l,p){return s.create(p).compute(d,
+l)}})();
+CryptoJS.lib.Cipher||function(u){var p=CryptoJS,d=p.lib,l=d.Base,s=d.WordArray,t=d.BufferedBlockAlgorithm,r=p.enc.Base64,w=p.algo.EvpKDF,v=d.Cipher=t.extend({cfg:l.extend(),createEncryptor:function(e,a){return this.create(this._ENC_XFORM_MODE,e,a)},createDecryptor:function(e,a){return this.create(this._DEC_XFORM_MODE,e,a)},init:function(e,a,b){this.cfg=this.cfg.extend(b);this._xformMode=e;this._key=a;this.reset()},reset:function(){t.reset.call(this);this._doReset()},process:function(e){this._append(e);return this._process()},
+finalize:function(e){e&&this._append(e);return this._doFinalize()},keySize:4,ivSize:4,_ENC_XFORM_MODE:1,_DEC_XFORM_MODE:2,_createHelper:function(e){return{encrypt:function(b,k,d){return("string"==typeof k?c:a).encrypt(e,b,k,d)},decrypt:function(b,k,d){return("string"==typeof k?c:a).decrypt(e,b,k,d)}}}});d.StreamCipher=v.extend({_doFinalize:function(){return this._process(!0)},blockSize:1});var b=p.mode={},x=function(e,a,b){var c=this._iv;c?this._iv=u:c=this._prevBlock;for(var d=0;d<b;d++)e[a+d]^=
+c[d]},q=(d.BlockCipherMode=l.extend({createEncryptor:function(e,a){return this.Encryptor.create(e,a)},createDecryptor:function(e,a){return this.Decryptor.create(e,a)},init:function(e,a){this._cipher=e;this._iv=a}})).extend();q.Encryptor=q.extend({processBlock:function(e,a){var b=this._cipher,c=b.blockSize;x.call(this,e,a,c);b.encryptBlock(e,a);this._prevBlock=e.slice(a,a+c)}});q.Decryptor=q.extend({processBlock:function(e,a){var b=this._cipher,c=b.blockSize,d=e.slice(a,a+c);b.decryptBlock(e,a);x.call(this,
+e,a,c);this._prevBlock=d}});b=b.CBC=q;q=(p.pad={}).Pkcs7={pad:function(a,b){for(var c=4*b,c=c-a.sigBytes%c,d=c<<24|c<<16|c<<8|c,l=[],n=0;n<c;n+=4)l.push(d);c=s.create(l,c);a.concat(c)},unpad:function(a){a.sigBytes-=a.words[a.sigBytes-1>>>2]&255}};d.BlockCipher=v.extend({cfg:v.cfg.extend({mode:b,padding:q}),reset:function(){v.reset.call(this);var a=this.cfg,b=a.iv,a=a.mode;if(this._xformMode==this._ENC_XFORM_MODE)var c=a.createEncryptor;else c=a.createDecryptor,this._minBufferSize=1;this._mode=c.call(a,
+this,b&&b.words)},_doProcessBlock:function(a,b){this._mode.processBlock(a,b)},_doFinalize:function(){var a=this.cfg.padding;if(this._xformMode==this._ENC_XFORM_MODE){a.pad(this._data,this.blockSize);var b=this._process(!0)}else b=this._process(!0),a.unpad(b);return b},blockSize:4});var n=d.CipherParams=l.extend({init:function(a){this.mixIn(a)},toString:function(a){return(a||this.formatter).stringify(this)}}),b=(p.format={}).OpenSSL={stringify:function(a){var b=a.ciphertext;a=a.salt;return(a?s.create([1398893684,
+1701076831]).concat(a).concat(b):b).toString(r)},parse:function(a){a=r.parse(a);var b=a.words;if(1398893684==b[0]&&1701076831==b[1]){var c=s.create(b.slice(2,4));b.splice(0,4);a.sigBytes-=16}return n.create({ciphertext:a,salt:c})}},a=d.SerializableCipher=l.extend({cfg:l.extend({format:b}),encrypt:function(a,b,c,d){d=this.cfg.extend(d);var l=a.createEncryptor(c,d);b=l.finalize(b);l=l.cfg;return n.create({ciphertext:b,key:c,iv:l.iv,algorithm:a,mode:l.mode,padding:l.padding,blockSize:a.blockSize,formatter:d.format})},
+decrypt:function(a,b,c,d){d=this.cfg.extend(d);b=this._parse(b,d.format);return a.createDecryptor(c,d).finalize(b.ciphertext)},_parse:function(a,b){return"string"==typeof a?b.parse(a,this):a}}),p=(p.kdf={}).OpenSSL={execute:function(a,b,c,d){d||(d=s.random(8));a=w.create({keySize:b+c}).compute(a,d);c=s.create(a.words.slice(b),4*c);a.sigBytes=4*b;return n.create({key:a,iv:c,salt:d})}},c=d.PasswordBasedCipher=a.extend({cfg:a.cfg.extend({kdf:p}),encrypt:function(b,c,d,l){l=this.cfg.extend(l);d=l.kdf.execute(d,
+b.keySize,b.ivSize);l.iv=d.iv;b=a.encrypt.call(this,b,c,d.key,l);b.mixIn(d);return b},decrypt:function(b,c,d,l){l=this.cfg.extend(l);c=this._parse(c,l.format);d=l.kdf.execute(d,b.keySize,b.ivSize,c.salt);l.iv=d.iv;return a.decrypt.call(this,b,c,d.key,l)}})}();
+(function(){for(var u=CryptoJS,p=u.lib.BlockCipher,d=u.algo,l=[],s=[],t=[],r=[],w=[],v=[],b=[],x=[],q=[],n=[],a=[],c=0;256>c;c++)a[c]=128>c?c<<1:c<<1^283;for(var e=0,j=0,c=0;256>c;c++){var k=j^j<<1^j<<2^j<<3^j<<4,k=k>>>8^k&255^99;l[e]=k;s[k]=e;var z=a[e],F=a[z],G=a[F],y=257*a[k]^16843008*k;t[e]=y<<24|y>>>8;r[e]=y<<16|y>>>16;w[e]=y<<8|y>>>24;v[e]=y;y=16843009*G^65537*F^257*z^16843008*e;b[k]=y<<24|y>>>8;x[k]=y<<16|y>>>16;q[k]=y<<8|y>>>24;n[k]=y;e?(e=z^a[a[a[G^z]]],j^=a[a[j]]):e=j=1}var H=[0,1,2,4,8,
+16,32,64,128,27,54],d=d.AES=p.extend({_doReset:function(){for(var a=this._key,c=a.words,d=a.sigBytes/4,a=4*((this._nRounds=d+6)+1),e=this._keySchedule=[],j=0;j<a;j++)if(j<d)e[j]=c[j];else{var k=e[j-1];j%d?6<d&&4==j%d&&(k=l[k>>>24]<<24|l[k>>>16&255]<<16|l[k>>>8&255]<<8|l[k&255]):(k=k<<8|k>>>24,k=l[k>>>24]<<24|l[k>>>16&255]<<16|l[k>>>8&255]<<8|l[k&255],k^=H[j/d|0]<<24);e[j]=e[j-d]^k}c=this._invKeySchedule=[];for(d=0;d<a;d++)j=a-d,k=d%4?e[j]:e[j-4],c[d]=4>d||4>=j?k:b[l[k>>>24]]^x[l[k>>>16&255]]^q[l[k>>>
+8&255]]^n[l[k&255]]},encryptBlock:function(a,b){this._doCryptBlock(a,b,this._keySchedule,t,r,w,v,l)},decryptBlock:function(a,c){var d=a[c+1];a[c+1]=a[c+3];a[c+3]=d;this._doCryptBlock(a,c,this._invKeySchedule,b,x,q,n,s);d=a[c+1];a[c+1]=a[c+3];a[c+3]=d},_doCryptBlock:function(a,b,c,d,e,j,l,f){for(var m=this._nRounds,g=a[b]^c[0],h=a[b+1]^c[1],k=a[b+2]^c[2],n=a[b+3]^c[3],p=4,r=1;r<m;r++)var q=d[g>>>24]^e[h>>>16&255]^j[k>>>8&255]^l[n&255]^c[p++],s=d[h>>>24]^e[k>>>16&255]^j[n>>>8&255]^l[g&255]^c[p++],t=
+d[k>>>24]^e[n>>>16&255]^j[g>>>8&255]^l[h&255]^c[p++],n=d[n>>>24]^e[g>>>16&255]^j[h>>>8&255]^l[k&255]^c[p++],g=q,h=s,k=t;q=(f[g>>>24]<<24|f[h>>>16&255]<<16|f[k>>>8&255]<<8|f[n&255])^c[p++];s=(f[h>>>24]<<24|f[k>>>16&255]<<16|f[n>>>8&255]<<8|f[g&255])^c[p++];t=(f[k>>>24]<<24|f[n>>>16&255]<<16|f[g>>>8&255]<<8|f[h&255])^c[p++];n=(f[n>>>24]<<24|f[g>>>16&255]<<16|f[h>>>8&255]<<8|f[k&255])^c[p++];a[b]=q;a[b+1]=s;a[b+2]=t;a[b+3]=n},keySize:8});u.AES=p._createHelper(d)})();
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/security/changepwd.js b/openo-portal/portal-common/src/main/webapp/common/js/security/changepwd.js
new file mode 100644
index 00000000..29a4096d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/security/changepwd.js
@@ -0,0 +1,191 @@
+/*
+ * 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.
+ */
+var ChangePWD = function () {
+	$.validator.addMethod("passwordCheck", function() {
+		if( $('#password').attr('type') == 'text' && $('#rpassword').attr('type') == 'text'){
+			return true;
+		} 
+		if( $('#password').attr('type') == 'password' && $('#rpassword').attr('type') == 'password' ){
+			if($('#password').val() == $('#rpassword').val() ){
+				return true;
+			}
+		}
+		if($('#password').val() =='' && $('#rpassword').attr('type') == 'text' || $('#rpassword').val() =='' && $('#password').attr('type')){
+			return true;
+		}
+		return false;
+	});
+    var handleLogin = function () {
+        $('.login-form').validate({
+            errorElement : 'span', //default input error message container
+            errorClass : 'help-block', // default input error message class
+            focusInvalid : true, // do not focus the last invalid input
+            onfocusout : function (element) {
+                $(element).valid();
+            },
+            rules : {
+                oldpassword : {
+                    required : false
+                },
+                password : {
+                    required : false
+                },
+                rpassword : {
+                    required : false,
+                    passwordCheck : true
+                }
+            },
+
+            messages : {
+                oldpassword : {
+                    required : $.i18n.prop('com_zte_ums_ict_sm_user_inputoldpwd')
+                },
+                password : {
+                    required : $.i18n.prop('com_zte_ums_ict_sm_user_inputnewpwd')
+                },
+                rpassword : {
+                    required : $.i18n.prop('com_zte_ums_ict_sm_user_inputnewpwdagain'),
+                    equalTo : $.i18n.prop('com_zte_ums_ict_sm_password_confirm_not_consistent'),
+					passwordCheck : $.i18n.prop('com_zte_ums_ict_sm_password_confirm_not_consistent'),
+                }
+            },
+
+            invalidHandler : function (event, validator) { //display error alert on form submit
+                $('.alert-danger', $('.login-form')).show();
+            },
+
+            highlight : function (element) { // hightlight error inputs
+                $(element)
+                .closest('.form-group').addClass('has-error'); // set error class to the control group
+            },
+
+            success : function (label) {
+                label.closest('.form-group').removeClass('has-error');
+                label.remove();
+            },
+
+            errorPlacement : function (error, element) {
+                error.insertAfter(element.closest('.input-icon'));
+            },
+
+            submitHandler : function (form) {
+                // form.submit();
+                var params = {};
+                var currentUser = httpRequest("GET", FrameConst.REST_GET_USERNAME, "");
+                params["userName"] = currentUser;
+                params["password"] = $("#oldpassword").attr('type')=='password' ? $("#oldpassword").val() : '';
+                params["newPassword"] = $("#password").attr('type')=='password' ? $("#password").val() : '';
+                params["confirmPassword"] = $("#rpassword").attr('type')=='password' ? $("#rpassword").val() : '';
+
+				 
+                jQuery('#submitBtn').prop("disabled", true);
+                $.ajax({
+                    type : "POST",
+                    url : "/web/rest/sm/user/modifyCurrentPassword",
+                    data : params,
+                    dataType : "json",
+                    success : function (data) {
+                        var returnValue = data;
+						
+                        if (returnValue && returnValue.result == 1) {
+                            bootbox.alert($.i18n.prop('com_zte_ums_ict_sm_user_op_ok'), function () {								
+                                window.closeModal('changepwdDlg');
+                            });
+                        } else {
+                            bootbox.alert(returnValue.response.data);                         
+                        }
+						jQuery('#submitBtn').prop("disabled", false);
+                    },
+                    error : function (xhr, ajaxOptions, thrownError) {
+                        jQuery('#submitBtn').prop("disabled", false);
+                    }
+                });
+
+            }
+        });
+
+        $('.login-form input').keypress(function (e) {
+            $("#nameOrpwdError").hide();
+            if (e.which == 13) {
+                if ($('.login-form').validate().form()) {
+                    $('.login-form').submit();
+                }
+                return false;
+            }
+        });
+    }
+    var handleI18n = function () {
+        $("#com_zte_ums_ict_sm_user_modify_current_password").text($.i18n.prop('com_zte_ums_ict_sm_user_modify_current_password'));
+        $("#com_zte_ums_ict_sm_user_old_password").text($.i18n.prop('com_zte_ums_ict_sm_user_old_password'));
+        $("#com_zte_ums_ict_sm_user_password").text($.i18n.prop('com_zte_ums_ict_sm_user_password'));
+        $("#com_zte_ums_ict_sm_user_confirmpassword").text($.i18n.prop('com_zte_ums_ict_sm_user_confirmpassword'));
+
+        $("#oldpassword").attr("placeholder", $.i18n.prop('com_zte_ums_ict_sm_user_old_password'));
+        $("#password").attr("placeholder", $.i18n.prop('com_zte_ums_ict_sm_user_password'));
+        $("#rpassword").attr("placeholder", $.i18n.prop('com_zte_ums_ict_sm_user_confirmpassword'));
+
+        $("#com_zte_ums_ict_sm_user_ok").text($.i18n.prop('com_zte_ums_ict_sm_user_ok'));
+        $("#com_zte_ums_ict_sm_user_cancel_button").text($.i18n.prop('com_zte_ums_ict_sm_user_cancel_button'));
+
+    }
+	var handleShowModalEvent = function () {
+	    $('#changepwdDlg').on('show.bs.modal', function (e) {
+	        $("#oldpassword").val("");
+	        $("#password").val("");
+	        $("#rpassword").val("");
+			$(".has-error", this).removeClass("has-error");
+			$("span.help-block", this).hide();
+			
+			if(!('placeholder' in document.createElement('input'))){   // �ж�������Ƿ�֧�� placeholder,ie9��֧�֣���Ҫ���⴦��
+					$("#rpassword").rules("remove", "equalTo");
+					$('[placeholder]').focus(function() {
+						var input = $(this);
+						input.attr('type','password');
+						$("#rpassword").rules("add", {    
+							passwordCheck :true
+						});					
+						if (input.val() == input.attr('placeholder')) {
+							input.val('');
+							
+						}
+					}).blur(function() {
+						var input = $(this);
+						if (input.val() == '' || input.val() == input.attr('placeholder')) {
+							input.attr('type','text');
+							$("#rpassword").rules("remove", "passwordCheck");
+							
+							input.val(input.attr('placeholder'));
+							
+						}
+					}).blur();
+			
+			
+			//
+			};
+			
+
+	    });
+	}
+    return {
+        //main function to initiate the module
+        init : function () {
+            handleI18n();
+			handleShowModalEvent();
+            handleLogin();
+        }
+    };
+}
+();
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/security/framework-util.js b/openo-portal/portal-common/src/main/webapp/common/js/security/framework-util.js
new file mode 100644
index 00000000..8939a281
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/security/framework-util.js
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+function ict_framework_func1(word){  
+         var a1 = CryptoJS.enc.Utf8.parse(ict_framework_aes_a1);   
+         var a2  = CryptoJS.enc.Utf8.parse(ict_framework_aes_a2);   
+		 var srcs = CryptoJS.enc.Utf8.parse(word);  
+         var encrypted = CryptoJS.AES.encrypt(srcs, a1, { iv: a2,mode:CryptoJS.mode.CBC});  
+         return encrypted.toString();  
+}
+  
+function ict_framework_func2(word){  
+        var a1 = CryptoJS.enc.Utf8.parse(ict_framework_aes_a1);   
+        var a2  = CryptoJS.enc.Utf8.parse(ict_framework_aes_a2);   
+        var decrypt = CryptoJS.AES.decrypt(word, a1, { iv: a2,mode:CryptoJS.mode.CBC});  
+        return CryptoJS.enc.Utf8.stringify(decrypt).toString();  
+} 
+
+
+
+
+
+
+
+var ict_framework_aes_a1 = "9763853428462486";
+var ict_framework_aes_a2 = "9763853428462486";
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/security/security.js b/openo-portal/portal-common/src/main/webapp/common/js/security/security.js
new file mode 100644
index 00000000..521130c4
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/security/security.js
@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+var ErrResult_LOGIN_SUCCESS = 0;
+var ErrResult_LOGIN_FAILURE = 4;
+var ErrResult_LOGIN_SUCCESS_WARN = 1;
+var ErrResult_LOGIN_SUCCESS_PASSWORD_WARN = 2;
+var ErrResult_LOGIN_SUCCESS_PASSWORD_MUSTCHANGE = 3;
+var ErrResult_LOGIN_SERV_ERROR = -1;
+
+function processLoginResult(data,params){
+   if(data.home="web/res/web-framework/index.html"||data.home.indexOf("index.html")>0){
+       data.home=FrameConst.DEFAULT_LOGINSKIP_PAGE;
+	   //下面这部分是为了演示需要临时增加的自动切换
+       /*if(params.username=="admin1"){
+			data.home="/web/res/web-framework/default.html?menu=1";
+	   }else if(params.username=="admin2"){
+			data.home="/web/res/web-framework/default.html?menu=2";
+	   }else if(params.username=="admin3"){
+			data.home="/web/res/web-framework/default.html?menu=3";
+	   }else if(params.username=="admin4"){
+			data.home="/web/res/web-framework/default.html?menu=4";
+	   }else if(params.username=="admin5"){
+			data.home="/web/res/web-framework/default.html?menu=5";
+	   }else if(params.username=="admin6"){
+			data.home="/web/res/web-framework/default.html?menu=6";
+	   }else if(params.username=="admin7"){
+			data.home="/web/res/web-framework/default.html?menu=7";
+	   }*/
+    }
+	var toHomePage = function(){
+		location.href = data.home;
+	}
+	
+	var loginHander = function(inParams){
+		if(inParams != undefined){
+			login(inParams);
+		}
+		else{
+			login(params);
+		}
+	}
+	
+	var errors = data.detail;
+	if(data.result == 0){
+		store('username',params.username);
+		if(errors){
+			if(errors.code==ErrResult_LOGIN_SUCCESS_PASSWORD_WARN){
+				
+				com_zte_ums_aos_portal_PasswordDialog.create({
+					ID : "LOGIN_MODIFY_PASSWORD",
+					username : params.username,
+					oldPassword : ict_framework_func2(params.password),
+					descLabel : errors[ErrResult_LOGIN_SUCCESS_PASSWORD_WARN],
+					cancelHander : toHomePage,
+					confirmHander : toHomePage
+				});
+				LOGIN_MODIFY_PASSWORD.show();
+			}
+			else if(errors.code==ErrResult_LOGIN_SUCCESS_WARN){
+				window.alert(errors[ErrResult_LOGIN_SUCCESS_WARN],toHomePage);
+			}
+			else {
+				location.href = data.home;
+			}
+		}
+		else {
+			location.href = data.home;
+		}
+	}
+	else {
+		if(errors.code==ErrResult_LOGIN_SUCCESS_PASSWORD_MUSTCHANGE){
+				com_zte_ums_aos_portal_PasswordDialog.create({
+					ID : "LOGIN_MODIFY_PASSWORD",
+					username : params.username,
+					oldPassword : ict_framework_func2(params.password),
+					descLabel : errors[ErrResult_LOGIN_SUCCESS_PASSWORD_MUSTCHANGE],
+					confirmHander : loginHander
+					
+				});
+				LOGIN_MODIFY_PASSWORD.show();
+		}
+		else if(errors.code==ErrResult_LOGIN_FAILURE){
+		    $("#nameOrpwdError").addClass('alert-danger');
+			$("#com_zte_ums_ict_portal_login_userPassword").html(errors[ErrResult_LOGIN_FAILURE]);			
+			var tip = $("#nameOrpwdError");
+			if (tip.attr("tipstatus") == "normal") {
+				tip.show();
+			} else if (tip.attr("tipstatus") == "close") {
+				tip.attr("tipstatus", "normal");
+			}
+			// if(0 < $("#inputPassword").length){
+				// $("#inputPassword")[0].value = "";
+			// }
+		}
+		else if(errors.code==ErrResult_LOGIN_SERV_ERROR){
+			$("#loginConnError").addClass('alert-danger');
+			var tip = $("#loginConnError");
+			if (tip.attr("tipstatus") == "normal") {
+				tip.show();
+			} else if (tip.attr("tipstatus") == "close") {
+				tip.attr("tipstatus", "normal");
+			}
+		}
+	}
+}
+function login(params){
+	$.post("login",{
+		username : params.username,
+		password : params.password,
+		isEncypted:true
+	},function(data){
+		processLoginResult(data,params);
+	},"json");
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/js/tools.js b/openo-portal/portal-common/src/main/webapp/common/js/tools.js
new file mode 100644
index 00000000..e65233ef
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/js/tools.js
@@ -0,0 +1,1036 @@
+/*
+ * 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.
+ */
+;(function(window, define) {
+    var _ = {
+        version: "2.3.0",
+        areas: {},
+        apis: {},
+
+        // utilities
+        inherit: function(api, o) {
+            for (var p in api) {
+                if (!o.hasOwnProperty(p)) {
+                    o[p] = api[p];
+                }
+            }
+            return o;
+        },
+        stringify: function(d) {
+            return d === undefined || typeof d === "function" ? d+'' : JSON.stringify(d);
+        },
+        parse: function(s) {
+            // if it doesn't parse, return as is
+            try{ return JSON.parse(s); }catch(e){ return s; }
+        },
+
+        // extension hooks
+        fn: function(name, fn) {
+            _.storeAPI[name] = fn;
+            for (var api in _.apis) {
+                _.apis[api][name] = fn;
+            }
+        },
+        get: function(area, key){ return area.getItem(key); },
+        set: function(area, key, string){ area.setItem(key, string); },
+        remove: function(area, key){ area.removeItem(key); },
+        key: function(area, i){ return area.key(i); },
+        length: function(area){ return area.length; },
+        clear: function(area){ area.clear(); },
+
+        // core functions
+        Store: function(id, area, namespace) {
+            var store = _.inherit(_.storeAPI, function(key, data, overwrite) {
+                if (arguments.length === 0){ return store.getAll(); }
+                if (data !== undefined){ return store.set(key, data, overwrite); }
+                if (typeof key === "string"){ return store.get(key); }
+                if (!key){ return store.clear(); }
+                return store.setAll(key, data);// overwrite=data, data=key
+            });
+            store._id = id;
+            try {
+                var testKey = '_safariPrivate_';
+                area.setItem(testKey, 'sucks');
+                store._area = area;
+                area.removeItem(testKey);
+            } catch (e) {}
+            if (!store._area) {
+                store._area = _.inherit(_.storageAPI, { items: {}, name: 'fake' });
+            }
+            store._ns = namespace || '';
+            if (!_.areas[id]) {
+                _.areas[id] = store._area;
+            }
+            if (!_.apis[store._ns+store._id]) {
+                _.apis[store._ns+store._id] = store;
+            }
+            return store;
+        },
+        storeAPI: {
+            // admin functions
+            area: function(id, area) {
+                var store = this[id];
+                if (!store || !store.area) {
+                    store = _.Store(id, area, this._ns);//new area-specific api in this namespace
+                    if (!this[id]){ this[id] = store; }
+                }
+                return store;
+            },
+            namespace: function(namespace, noSession) {
+                if (!namespace){
+                    return this._ns ? this._ns.substring(0,this._ns.length-1) : '';
+                }
+                var ns = namespace, store = this[ns];
+                if (!store || !store.namespace) {
+                    store = _.Store(this._id, this._area, this._ns+ns+'.');//new namespaced api
+                    if (!this[ns]){ this[ns] = store; }
+                    if (!noSession){ store.area('session', _.areas.session); }
+                }
+                return store;
+            },
+            isFake: function(){ return this._area.name === 'fake'; },
+            toString: function() {
+                return 'store'+(this._ns?'.'+this.namespace():'')+'['+this._id+']';
+            },
+
+            // storage functions
+            has: function(key) {
+                if (this._area.has) {
+                    return this._area.has(this._in(key));//extension hook
+                }
+                return !!(this._in(key) in this._area);
+            },
+            size: function(){ return this.keys().length; },
+            each: function(fn, and) {
+                for (var i=0, m=_.length(this._area); i<m; i++) {
+                    var key = this._out(_.key(this._area, i));
+                    if (key !== undefined) {
+                        if (fn.call(this, key, and || this.get(key)) === false) {
+                            break;
+                        }
+                    }
+                    if (m > _.length(this._area)) { m--; i--; }// in case of removeItem
+                }
+                return and || this;
+            },
+            keys: function() {
+                return this.each(function(k, list){ list.push(k); }, []);
+            },
+            get: function(key, alt) {
+                var s = _.get(this._area, this._in(key));
+                return s !== null ? _.parse(s) : alt || s;// support alt for easy default mgmt
+            },
+            getAll: function() {
+                return this.each(function(k, all){ all[k] = this.get(k); }, {});
+            },
+            set: function(key, data, overwrite) {
+                var d = this.get(key);
+                if (d != null && overwrite === false) {
+                    return data;
+                }
+                return _.set(this._area, this._in(key), _.stringify(data), overwrite) || d;
+            },
+            setAll: function(data, overwrite) {
+                var changed, val;
+                for (var key in data) {
+                    val = data[key];
+                    if (this.set(key, val, overwrite) !== val) {
+                        changed = true;
+                    }
+                }
+                return changed;
+            },
+            remove: function(key) {
+                var d = this.get(key);
+                _.remove(this._area, this._in(key));
+                return d;
+            },
+            clear: function() {
+                if (!this._ns) {
+                    _.clear(this._area);
+                } else {
+                    this.each(function(k){ _.remove(this._area, this._in(k)); }, 1);
+                }
+                return this;
+            },
+            clearAll: function() {
+                var area = this._area;
+                for (var id in _.areas) {
+                    if (_.areas.hasOwnProperty(id)) {
+                        this._area = _.areas[id];
+                        this.clear();
+                    }
+                }
+                this._area = area;
+                return this;
+            },
+
+            // internal use functions
+            _in: function(k) {
+                if (typeof k !== "string"){ k = _.stringify(k); }
+                return this._ns ? this._ns + k : k;
+            },
+            _out: function(k) {
+                return this._ns ?
+                    k && k.indexOf(this._ns) === 0 ?
+                        k.substring(this._ns.length) :
+                        undefined : // so each() knows to skip it
+                    k;
+            }
+        },// end _.storeAPI
+        storageAPI: {
+            length: 0,
+            has: function(k){ return this.items.hasOwnProperty(k); },
+            key: function(i) {
+                var c = 0;
+                for (var k in this.items){
+                    if (this.has(k) && i === c++) {
+                        return k;
+                    }
+                }
+            },
+            setItem: function(k, v) {
+                if (!this.has(k)) {
+                    this.length++;
+                }
+                this.items[k] = v;
+            },
+            removeItem: function(k) {
+                if (this.has(k)) {
+                    delete this.items[k];
+                    this.length--;
+                }
+            },
+            getItem: function(k){ return this.has(k) ? this.items[k] : null; },
+            clear: function(){ for (var k in this.list){ this.removeItem(k); } },
+            toString: function(){ return this.length+' items in '+this.name+'Storage'; }
+        }// end _.storageAPI
+    };
+
+    // setup the primary store fn
+    if (window.store){ _.conflict = window.store; }
+    var store =
+        // safely set this up (throws error in IE10/32bit mode for local files)
+        _.Store("local", (function(){try{ return localStorage; }catch(e){}})());
+    store.local = store;// for completeness
+    store._ = _;// for extenders and debuggers...
+    // safely setup store.session (throws exception in FF for file:/// urls)
+    store.area("session", (function(){try{ return sessionStorage; }catch(e){}})());
+
+    //Expose store to the global object
+    window.store = store;
+
+    if (typeof define === 'function' && define.amd !== undefined) {
+        define(function () {
+            return store;
+        });
+    } else if (typeof module !== 'undefined' && module.exports) {
+        module.exports = store;
+    }
+
+})(this, null);
+
+// XHook - v1.3.3 - https://github.com/jpillora/xhook
+// Jaime Pillora <dev@jpillora.com> - MIT Copyright 2015
+(function(window,undefined) {
+var AFTER, BEFORE, COMMON_EVENTS, EventEmitter, FIRE, FormData, NativeFormData, NativeXMLHttp, OFF, ON, READY_STATE, UPLOAD_EVENTS, XHookFormData, XHookHttpRequest, XMLHTTP, convertHeaders, depricatedProp, document, fakeEvent, mergeObjects, msie, proxyEvents, slice, xhook, _base,
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+document = window.document;
+
+BEFORE = 'before';
+
+AFTER = 'after';
+
+READY_STATE = 'readyState';
+
+ON = 'addEventListener';
+
+OFF = 'removeEventListener';
+
+FIRE = 'dispatchEvent';
+
+XMLHTTP = 'XMLHttpRequest';
+
+FormData = 'FormData';
+
+UPLOAD_EVENTS = ['load', 'loadend', 'loadstart'];
+
+COMMON_EVENTS = ['progress', 'abort', 'error', 'timeout'];
+
+msie = parseInt((/msie (\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
+
+if (isNaN(msie)) {
+  msie = parseInt((/trident\/.*; rv:(\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
+}
+
+(_base = Array.prototype).indexOf || (_base.indexOf = function(item) {
+  var i, x, _i, _len;
+  for (i = _i = 0, _len = this.length; _i < _len; i = ++_i) {
+    x = this[i];
+    if (x === item) {
+      return i;
+    }
+  }
+  return -1;
+});
+
+slice = function(o, n) {
+  return Array.prototype.slice.call(o, n);
+};
+
+depricatedProp = function(p) {
+  return p === "returnValue" || p === "totalSize" || p === "position";
+};
+
+mergeObjects = function(src, dst) {
+  var k, v;
+  for (k in src) {
+    v = src[k];
+    if (depricatedProp(k)) {
+      continue;
+    }
+    try {
+      dst[k] = src[k];
+    } catch (_error) {}
+  }
+  return dst;
+};
+
+proxyEvents = function(events, src, dst) {
+  var event, p, _i, _len;
+  p = function(event) {
+    return function(e) {
+      var clone, k, val;
+      clone = {};
+      for (k in e) {
+        if (depricatedProp(k)) {
+          continue;
+        }
+        val = e[k];
+        clone[k] = val === src ? dst : val;
+      }
+      return dst[FIRE](event, clone);
+    };
+  };
+  for (_i = 0, _len = events.length; _i < _len; _i++) {
+    event = events[_i];
+    if (dst._has(event)) {
+      src["on" + event] = p(event);
+    }
+  }
+};
+
+fakeEvent = function(type) {
+  var msieEventObject;
+  if (document.createEventObject != null) {
+    msieEventObject = document.createEventObject();
+    msieEventObject.type = type;
+    return msieEventObject;
+  } else {
+    try {
+      return new Event(type);
+    } catch (_error) {
+      return {
+        type: type
+      };
+    }
+  }
+};
+
+EventEmitter = function(nodeStyle) {
+  var emitter, events, listeners;
+  events = {};
+  listeners = function(event) {
+    return events[event] || [];
+  };
+  emitter = {};
+  emitter[ON] = function(event, callback, i) {
+    events[event] = listeners(event);
+    if (events[event].indexOf(callback) >= 0) {
+      return;
+    }
+    i = i === undefined ? events[event].length : i;
+    events[event].splice(i, 0, callback);
+  };
+  emitter[OFF] = function(event, callback) {
+    var i;
+    if (event === undefined) {
+      events = {};
+      return;
+    }
+    if (callback === undefined) {
+      events[event] = [];
+    }
+    i = listeners(event).indexOf(callback);
+    if (i === -1) {
+      return;
+    }
+    listeners(event).splice(i, 1);
+  };
+  emitter[FIRE] = function() {
+    var args, event, i, legacylistener, listener, _i, _len, _ref;
+    args = slice(arguments);
+    event = args.shift();
+    if (!nodeStyle) {
+      args[0] = mergeObjects(args[0], fakeEvent(event));
+    }
+    legacylistener = emitter["on" + event];
+    if (legacylistener) {
+      legacylistener.apply(undefined, args);
+    }
+    _ref = listeners(event).concat(listeners("*"));
+    for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+      listener = _ref[i];
+      listener.apply(undefined, args);
+    }
+  };
+  emitter._has = function(event) {
+    return !!(events[event] || emitter["on" + event]);
+  };
+  if (nodeStyle) {
+    emitter.listeners = function(event) {
+      return slice(listeners(event));
+    };
+    emitter.on = emitter[ON];
+    emitter.off = emitter[OFF];
+    emitter.fire = emitter[FIRE];
+    emitter.once = function(e, fn) {
+      var fire;
+      fire = function() {
+        emitter.off(e, fire);
+        return fn.apply(null, arguments);
+      };
+      return emitter.on(e, fire);
+    };
+    emitter.destroy = function() {
+      return events = {};
+    };
+  }
+  return emitter;
+};
+
+xhook = EventEmitter(true);
+
+xhook.EventEmitter = EventEmitter;
+
+xhook[BEFORE] = function(handler, i) {
+  if (handler.length < 1 || handler.length > 2) {
+    throw "invalid hook";
+  }
+  return xhook[ON](BEFORE, handler, i);
+};
+
+xhook[AFTER] = function(handler, i) {
+  if (handler.length < 2 || handler.length > 3) {
+    throw "invalid hook";
+  }
+  return xhook[ON](AFTER, handler, i);
+};
+
+xhook.enable = function() {
+  window[XMLHTTP] = XHookHttpRequest;
+  if (NativeFormData) {
+    window[FormData] = XHookFormData;
+  }
+};
+
+xhook.disable = function() {
+  window[XMLHTTP] = xhook[XMLHTTP];
+  window[FormData] = NativeFormData;
+};
+
+convertHeaders = xhook.headers = function(h, dest) {
+  var header, headers, k, name, v, value, _i, _len, _ref;
+  if (dest == null) {
+    dest = {};
+  }
+  switch (typeof h) {
+    case "object":
+      headers = [];
+      for (k in h) {
+        v = h[k];
+        name = k.toLowerCase();
+        headers.push("" + name + ":\t" + v);
+      }
+      return headers.join('\n');
+    case "string":
+      headers = h.split('\n');
+      for (_i = 0, _len = headers.length; _i < _len; _i++) {
+        header = headers[_i];
+        if (/([^:]+):\s*(.+)/.test(header)) {
+          name = (_ref = RegExp.$1) != null ? _ref.toLowerCase() : void 0;
+          value = RegExp.$2;
+          if (dest[name] == null) {
+            dest[name] = value;
+          }
+        }
+      }
+      return dest;
+  }
+};
+
+NativeFormData = window[FormData];
+
+XHookFormData = function(form) {
+  var entries;
+  this.fd = form ? new NativeFormData(form) : new NativeFormData();
+  this.form = form;
+  entries = [];
+  Object.defineProperty(this, 'entries', {
+    get: function() {
+      var fentries;
+      fentries = !form ? [] : slice(form.querySelectorAll("input,select")).filter(function(e) {
+        var _ref;
+        return ((_ref = e.type) !== 'checkbox' && _ref !== 'radio') || e.checked;
+      }).map(function(e) {
+        return [e.name, e.type === "file" ? e.files : e.value];
+      });
+      return fentries.concat(entries);
+    }
+  });
+  this.append = (function(_this) {
+    return function() {
+      var args;
+      args = slice(arguments);
+      entries.push(args);
+      return _this.fd.append.apply(_this.fd, args);
+    };
+  })(this);
+};
+
+if (NativeFormData) {
+  xhook[FormData] = NativeFormData;
+  window[FormData] = XHookFormData;
+}
+
+NativeXMLHttp = window[XMLHTTP];
+
+xhook[XMLHTTP] = NativeXMLHttp;
+
+XHookHttpRequest = window[XMLHTTP] = function() {
+  var ABORTED, currentState, emitFinal, emitReadyState, facade, hasError, hasErrorHandler, readBody, readHead, request, response, setReadyState, status, transiting, writeBody, writeHead, xhr;
+  ABORTED = -1;
+  xhr = new xhook[XMLHTTP]();
+  request = {};
+  status = null;
+  hasError = void 0;
+  transiting = void 0;
+  response = void 0;
+  readHead = function() {
+    var key, name, val, _ref;
+    response.status = status || xhr.status;
+    if (!(status === ABORTED && msie < 10)) {
+      response.statusText = xhr.statusText;
+    }
+    if (status !== ABORTED) {
+      _ref = convertHeaders(xhr.getAllResponseHeaders());
+      for (key in _ref) {
+        val = _ref[key];
+        if (!response.headers[key]) {
+          name = key.toLowerCase();
+          response.headers[name] = val;
+        }
+      }
+    }
+  };
+  readBody = function() {
+    if (!xhr.responseType || xhr.responseType === "text") {
+      response.text = xhr.responseText;
+      response.data = xhr.responseText;
+    } else if (xhr.responseType === "document") {
+      response.xml = xhr.responseXML;
+      response.data = xhr.responseXML;
+    } else {
+      response.data = xhr.response;
+    }
+    if ("responseURL" in xhr) {
+      response.finalUrl = xhr.responseURL;
+    }
+  };
+  writeHead = function() {
+    facade.status = response.status;
+    facade.statusText = response.statusText;
+  };
+  writeBody = function() {
+    if ('text' in response) {
+      facade.responseText = response.text;
+    }
+    if ('xml' in response) {
+      facade.responseXML = response.xml;
+    }
+    if ('data' in response) {
+      facade.response = response.data;
+    }
+    if ('finalUrl' in response) {
+      facade.responseURL = response.finalUrl;
+    }
+  };
+  emitReadyState = function(n) {
+    while (n > currentState && currentState < 4) {
+      facade[READY_STATE] = ++currentState;
+      if (currentState === 1) {
+        facade[FIRE]("loadstart", {});
+      }
+      if (currentState === 2) {
+        writeHead();
+      }
+      if (currentState === 4) {
+        writeHead();
+        writeBody();
+      }
+      facade[FIRE]("readystatechange", {});
+      if (currentState === 4) {
+        setTimeout(emitFinal, 0);
+      }
+    }
+  };
+  emitFinal = function() {
+    if (!hasError) {
+      facade[FIRE]("load", {});
+    }
+    facade[FIRE]("loadend", {});
+    if (hasError) {
+      facade[READY_STATE] = 0;
+    }
+  };
+  currentState = 0;
+  setReadyState = function(n) {
+    var hooks, process;
+    if (n !== 4) {
+      emitReadyState(n);
+      return;
+    }
+    hooks = xhook.listeners(AFTER);
+    process = function() {
+      var hook;
+      if (!hooks.length) {
+        return emitReadyState(4);
+      }
+      hook = hooks.shift();
+      if (hook.length === 2) {
+        hook(request, response);
+        return process();
+      } else if (hook.length === 3 && request.async) {
+        return hook(request, response, process);
+      } else {
+        return process();
+      }
+    };
+    process();
+  };
+  facade = request.xhr = EventEmitter();
+  xhr.onreadystatechange = function(event) {
+    try {
+      if (xhr[READY_STATE] === 2) {
+        readHead();
+      }
+    } catch (_error) {}
+    if (xhr[READY_STATE] === 4) {
+      transiting = false;
+      readHead();
+      readBody();
+    }
+    setReadyState(xhr[READY_STATE]);
+  };
+  hasErrorHandler = function() {
+    hasError = true;
+  };
+  facade[ON]('error', hasErrorHandler);
+  facade[ON]('timeout', hasErrorHandler);
+  facade[ON]('abort', hasErrorHandler);
+  facade[ON]('progress', function() {
+    if (currentState < 3) {
+      setReadyState(3);
+    } else {
+      facade[FIRE]("readystatechange", {});
+    }
+  });
+  if ('withCredentials' in xhr || xhook.addWithCredentials) {
+    facade.withCredentials = false;	
+  }
+  facade.status = 0;
+  facade.open = function(method, url, async, user, pass) {
+    currentState = 0;
+    hasError = false;
+    transiting = false;
+    request.headers = {};
+    request.headerNames = {};
+    request.status = 0;
+    response = {};
+    response.headers = {};
+    request.method = method;
+    request.url = url;
+    request.async = async !== false;
+    request.user = user;
+    request.pass = pass;
+    setReadyState(1);
+  };
+  facade.send = function(body) {
+    var hooks, k, modk, process, send, _i, _len, _ref;
+    _ref = ['type', 'timeout', 'withCredentials'];
+	if(navigator.userAgent.indexOf("Firefox/") != -1){http://atmosphere-framework.2306103.n4.nabble.com/Atmosphere-js-withCredentials-true-does-not-work-in-Firefox-td4656661.html
+		_ref = ['type', 'timeout'];	  
+	}
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      k = _ref[_i];
+      modk = k === "type" ? "responseType" : k;
+      if (modk in facade) {
+        request[k] = facade[modk];
+      }
+    }
+    request.body = body;
+    send = function() {
+      var header, value, _j, _len1, _ref1, _ref2;
+      proxyEvents(COMMON_EVENTS, xhr, facade);
+      if (facade.upload) {
+        proxyEvents(COMMON_EVENTS.concat(UPLOAD_EVENTS), xhr.upload, facade.upload);
+      }
+      transiting = true;
+      xhr.open(request.method, request.url, request.async, request.user, request.pass);
+      _ref1 = ['type', 'timeout', 'withCredentials'];
+	  if(navigator.userAgent.indexOf("Firefox/") != -1){//http://atmosphere-framework.2306103.n4.nabble.com/Atmosphere-js-withCredentials-true-does-not-work-in-Firefox-td4656661.html
+		_ref1 = ['type', 'timeout'];	  
+	  }
+      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+        k = _ref1[_j];
+        modk = k === "type" ? "responseType" : k;
+        if (k in request) {
+          xhr[modk] = request[k];
+        }
+      }
+      _ref2 = request.headers;
+      for (header in _ref2) {
+        value = _ref2[header];
+        xhr.setRequestHeader(header, value);
+      }
+      if (request.body instanceof XHookFormData) {
+        request.body = request.body.fd;
+      }
+      xhr.send(request.body);
+    };
+    hooks = xhook.listeners(BEFORE);
+    process = function() {
+      var done, hook;
+      if (!hooks.length) {
+        return send();
+      }
+      done = function(userResponse) {
+        if (typeof userResponse === 'object' && (typeof userResponse.status === 'number' || typeof response.status === 'number')) {
+          mergeObjects(userResponse, response);
+          if (__indexOf.call(userResponse, 'data') < 0) {
+            userResponse.data = userResponse.response || userResponse.text;
+          }
+          setReadyState(4);
+          return;
+        }
+        process();
+      };
+      done.head = function(userResponse) {
+        mergeObjects(userResponse, response);
+        return setReadyState(2);
+      };
+      done.progress = function(userResponse) {
+        mergeObjects(userResponse, response);
+        return setReadyState(3);
+      };
+      hook = hooks.shift();
+      if (hook.length === 1) {
+        return done(hook(request));
+      } else if (hook.length === 2 && request.async) {
+        return hook(request, done);
+      } else {
+        return done();
+      }
+    };
+    process();
+  };
+  facade.abort = function() {
+    status = ABORTED;
+    if (transiting) {
+      xhr.abort();
+    } else {
+      facade[FIRE]('abort', {});
+    }
+  };
+  facade.setRequestHeader = function(header, value) {
+    var lName, name;
+    lName = header != null ? header.toLowerCase() : void 0;
+    name = request.headerNames[lName] = request.headerNames[lName] || header;
+    if (request.headers[name]) {
+      value = request.headers[name] + ', ' + value;
+    }
+    request.headers[name] = value;
+  };
+  facade.getResponseHeader = function(header) {
+    var name;
+    name = header != null ? header.toLowerCase() : void 0;
+    return response.headers[name];
+  };
+  facade.getAllResponseHeaders = function() {
+    return convertHeaders(response.headers);
+  };
+  if (xhr.overrideMimeType) {
+    facade.overrideMimeType = function() {
+      return xhr.overrideMimeType.apply(xhr, arguments);
+    };
+  }
+  if (xhr.upload) {
+    facade.upload = request.upload = EventEmitter();
+  }
+  return facade;
+};
+/*
+if (typeof this.define === "function" && this.define.amd) {
+  define("xhook", [], function() {
+    return xhook;
+  });
+} else {*/
+  (this.exports || this).xhook = xhook;
+//}
+
+}.call(this,window));
+
+xhook.before(function(request) {
+	var zte_headers = store('zte_http_headers');
+	if (zte_headers && zte_headers.length > 0) {
+		for (i = 0; i < zte_headers.length; i++) {
+			if (zte_headers[i].store === true) {
+				if ( !! store(zte_headers[i].value)) {
+					request.headers[zte_headers[i].key] = store(zte_headers[i].value).toUpperCase()
+				}
+			} else {
+				request.headers[zte_headers[i].key] = zte_headers[i].value
+			}
+		}
+	}
+});
+/**
+ * 初始化脚本文件装载工具
+ * zongying 2010.12
+ *  modify：
+ */ 
+$Boot = {};
+
+/**
+ * 创建命名空间
+ * @param {Object} name
+ * @param {Object} object
+ */
+$Boot.createNamespace = function(name, object) {
+    var splits = name.split(".");
+    var parent = window;
+    //document.window浏览器内置对象
+    var part = splits[0];
+    for (var i = 0, len = splits.length - 1; i < len; i++, part = splits[i]) {
+        if (!parent[part]) {
+            parent = parent[part] = {};
+        } else {
+            parent = parent[part];
+        }
+    }
+    // 存放对象
+    parent[part] = object;
+    // 返回 last part name (例如：classname)
+    return part;
+}
+
+$Boot.isDefined = function(o) {
+    return typeof (o) != "undefined"
+}
+/**
+ * 启动配置类
+ */
+$Boot.Config = function() {
+
+    function isDefined(o) {
+        return typeof (o) != "undefined"
+    }
+
+    //用户应用当前目录
+    if (!isDefined(window.$userAppDir)) {
+        window.$userAppDir = './'
+    }
+    //组件库目录
+    if (!isDefined(window.$userFrameDir)) {
+        window.$userFrameDir = '/common/'
+    }
+    //用户i18文件目录
+    if (!isDefined(window.$userI18nDir)) {
+        window.$userI18nDir = './'
+    }
+
+    //当前语言 默认为英语
+    var language = "zh-CN";
+    //var languageList = ['ar', 'ba', 'cr', 'cs', 'de', 'el', 'es', 'fi', 'fr', 'fr-FR', 'hu-HU', 'id', 'it', 'ja', 'nb-NO', 'nl', 'pl', 'pl-PL', 'pt', 'pt-BR', 'ro-RO', 'ru-RU', 'sk', 'sr', 'sr-Latn', 'sv-SE', 'en-US','uk-UA', 'zh-CN', 'zh-TW'];
+    var languageList = ['en-US', 'zh-CN'];
+	
+	//从服务端取客户端接受语言类型
+    var getAcceptLangFromServer = true;
+	
+	
+	    /**
+     * 创建XMLHttpRequest对象
+     */
+    function createXMLHttpRequest() {
+        if (window.ActiveXObject) {
+            return new ActiveXObject("Microsoft.XMLHTTP");
+        } else if (window.XMLHttpRequest) {
+            return new XMLHttpRequest();
+        } else {
+            throw new Error("This Brower do not support XMLHTTP!!");
+        }
+    }
+
+	
+	    /**
+     * 同步发送xml http  请求
+     * @param {Object} url
+     * @param {Object} data
+     * @param {Object} method
+     */
+    function httpRequest(method, url, data) {
+        var xmlhttp;
+        xmlhttp = createXMLHttpRequest();
+        var sendData = null;
+        if (method == "get") {
+            url = url + "?" + data;
+
+        } else if (method == "post") {
+            sendData = data;
+        }
+        xmlhttp.open(method, url, false);
+        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
+        xmlhttp.setRequestHeader("If-Modified-Since", "0");
+        xmlhttp.send(sendData);
+        if (xmlhttp.status == 200)
+            return xmlhttp.responseText;
+    }
+	
+	    /**
+     * 同步发送xml http  请求（给外部调用）
+     * @param {Object} url
+     * @param {Object} data
+     * @param {Object} method
+     */
+    this.httpRequestStatic = function(method, url, data) {
+        var xmlhttp;
+        xmlhttp = createXMLHttpRequest();
+        var sendData = null;
+        if (method == "get") {
+            url = url + "?" + data;
+
+        } else if (method == "post") {
+            sendData = data;
+        }
+        xmlhttp.open(method, url, false);
+        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
+        xmlhttp.setRequestHeader("If-Modified-Since", "0");
+        xmlhttp.send(sendData);
+        if (xmlhttp.status == 200)
+            return xmlhttp.responseText;
+    }
+	
+	function inArray(array, obj) {
+        for (var i = 0; i < array.length; i++) {
+            if (array[i] == obj) {
+                return true;
+            }
+        }
+        return false;
+
+    }
+	
+    /**
+     * 取得浏览器语言信息
+     */
+    this.getLanguage = function() {        
+		var rtnLanguage = localStorage.getItem("language-option");		
+		if( rtnLanguage == "null" || rtnLanguage == null ){
+			rtnLanguage = window.navigator.userLanguage||window.navigator.language;
+		}
+		if( rtnLanguage == '"zh-CN"' || rtnLanguage == "zh-CN" ){
+			return "zh-CN";
+		}else{
+			return "en-US";
+		}
+		//return "en-US";
+    }
+
+	this.getUrlParam=function(name){
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+            var search =decodeURIComponent(location.search.substring(1)); //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
+            var r =search.match(reg);  //匹配目标参数
+            if (r != null) return unescape(r[2]); //unescape() 函数可对通过 escape() 编码的字符串进行解码。
+            return null; //返回参数值
+    }
+
+
+}
+
+//创建命名空间
+$Boot.createNamespace("com.zte.ums.aos.framework.BootConfig", $Boot.Config);
+//创建基础配置对象实例
+$Boot.bootConfig = new com.zte.ums.aos.framework.BootConfig();
+
+function getLanguage(){
+   return $Boot.bootConfig.getLanguage();
+}
+
+function getStringWidth(text,fontSize)
+{
+    var span = document.getElementById("_ictframework_getwidth");
+    if (span == null) {
+        span = document.createElement("span");
+        span.id = "_ictframework_getwidth";
+        document.body.appendChild(span);
+    }
+    span.innerText = text;
+    span.style.whiteSpace = "nowrap";
+    $("#_ictframework_getwidth").attr('style','font-size:'+fontSize+'px;');
+	var width = span.offsetWidth;
+	$("#_ictframework_getwidth").attr('style','display:none');
+    return width;
+}
+
+function getUrlParam(name){
+    return $Boot.bootConfig.getUrlParam(name);
+}
+
+function httpRequest(method, url, data) {
+    return $Boot.bootConfig.httpRequestStatic(method, url, data)
+}
+
+// 定义JQUERY AJAX 完成函数，判断返回状态，如果状态正常，但HEADER头里有session超时信息，则刷新重登录
+// 如果状态为 401, 也刷新重登录
+// 注意如果在$.ajax() 函数中定义了 complete，则覆盖了这里预定义complete内容，以$.ajax()函数中定义的为准，这里预定义的函数则失效，如果
+// 要继续判断session超时，则需要在 $.ajax()函数中定义的complete函数中加入这里预定义内容。
+if (jQuery) {
+	$.ajaxSetup({
+		complete:function(XMLHttpRequest,textStatus){
+			 if (XMLHttpRequest.status == 401) {
+				window.location.replace("login.html"); 
+			 }
+			 // if (XMLHttpRequest.status == 200) {
+				// var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus"); ////通过XMLHttpRequest取得响应头，sessionstatus，  
+				 // if(sessionstatus=="timeout"){
+					 // window.location.replace("/");
+				 // }
+			 // } else if (XMLHttpRequest.status == 401) {
+				// window.location.replace("/");
+			 // } 
+		}
+	});
+}
diff --git a/openo-portal/portal-common/src/main/webapp/common/json/main-page.json b/openo-portal/portal-common/src/main/webapp/common/json/main-page.json
new file mode 100644
index 00000000..4b5e169d
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/json/main-page.json
@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+{
+	"propertiesFileNamePrefix":"web-framework-integration-i18n",
+	"productName":"Net Numen ICT",
+	"productImage":"img/integration/zte_logo_white.png",
+	"modules":[
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_dashboard",
+			"background":"skyBlue-mainpage",
+			"toolsImage":"toolsImageBrokenLine",
+			"url":"",	
+		    "linkId":"ngict-dashboard-index",
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_monitor",
+			"background":"golden-mainpage",
+			"toolsImage":"toolsImageHierachy",
+			"url":"",
+			"linkId":"ngict-itm-monintor",
+			"contentTip":""
+		},
+		{
+			"cover":"",
+			"background":"manLieONCloud-image",
+			"toolsImage":"",
+			"url":"http://vnjs.net/www/project/freewall/",
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_alarm",
+			"background":"orange-mainpage",
+			"toolsImage":"toolsImageGear",
+			"url":"",
+			"linkId":"ngict-fm-summary",	
+			
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_performance",
+			"background":"pinkishRed-mainpage",
+			"toolsImage":"toolsImagePresent",
+			"url":"",
+			"linkId":"ngict-pm-meatask",	
+			
+			"contentTip":""
+		},
+		{
+			"cover":"",
+			"background":"magicCube-image",
+			"toolsImage":"",
+			"url":"",
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_security",
+			"background":"grassGreen-mainpage",
+			"toolsImage":"toolsImageFile",
+			"url":"",
+			"linkId":"ngict-sm",	
+			
+			"contentTip":""
+		},
+		{
+			"cover":"",
+			"background":"meeting-image",
+			"toolsImage":"",
+			"url":"",
+			"contentTip":""
+		},
+		{
+			"cover":"",
+			"background":"earth-image",
+			"toolsImage":"",
+			"url":"",
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_log",
+			"background":"orange-mainpage",
+			"toolsImage":"toolsImageGear",
+			"url":"",
+			"linkId":"ngict-log",	
+			
+			"contentTip":""
+		},
+		{
+			"cover":"com_zte_ums_ict_framework_main_page_system",
+			"background":"skyBlue-mainpage",
+			"toolsImage":"toolsImageBriefcase",
+			"url":"",
+			"linkId":"ngict-system",	
+			
+			"contentTip":""
+		},
+		{
+			"cover":"",
+			"background":"magicThought-image",
+			"toolsImage":"",
+			"url":"",
+			"contentTip":""
+		}
+	]
+}
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/login.html b/openo-portal/portal-common/src/main/webapp/common/login.html
new file mode 100644
index 00000000..79ca3faf
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/login.html
@@ -0,0 +1,195 @@
+<!--
+    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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title id="com_zte_ums_ict_portal_login_title" name_i18n="com_zte_ums_ict_framework_ui_i18n_login"></title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<meta content="" name="description"/>
+<meta content="" name="author"/>
+<link href="../component/thirdparty/fakeLoader/fakeLoader.css" rel="stylesheet" type="text/css" />
+<script> 
+   if(top != window){
+       top.location.href = location.href;
+   }
+</script>
+<link href="../component/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
+<link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
+<link href="../component/thirdparty/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
+<link href="./css/style-custom.css" rel="stylesheet" type="text/css"/>
+<link href="./css/style.css" rel="stylesheet" type="text/css"/>
+<link href="./css/style-responsive.css" rel="stylesheet" type="text/css"/>
+<link href="./css/plugins.css" rel="stylesheet" type="text/css"/>
+<link href="./css/login.css" rel="stylesheet" type="text/css"/>
+<link rel="shortcut icon"  href="./img/integration/zte_logo_16.gif"/>
+<script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="./js/core/const.js" ></script>
+<script type="text/javascript" src="./appRes/js/custom-const.js" ></script>
+<script type="text/javascript" src="./js/security/security.js"></script>
+<script type="text/javascript" src="../component/thirdparty/fakeLoader/fakeLoader.min.js"></script>
+<script type="text/javascript" src="./js/core/hk.min.js" ></script>
+<script type="text/javascript" src="./js/tools.js"></script>
+<script type="text/javascript">
+var Sys = {};
+var ua = navigator.userAgent.toLowerCase();
+var s;
+(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
+(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
+(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
+(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
+(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
+
+
+function judgeVersion(configVer,localVer){
+    var configs= configVer.split(".");
+    var locals= localVer.split(".");
+    var length = 0;
+    if(configs.length >= locals.length){
+    	length = locals.length;
+    }else{
+    	length = configs.length;
+    }
+    for(var i = 0; i < length; i++){
+    	var tempConfig = parseInt(configs[i],10);
+    	var tempLocal = parseInt(locals[i],10);
+    	if(tempConfig > tempLocal){
+    		return true;
+    	}
+    }
+    return false;
+	
+	
+}
+
+function showPrompt(flag){
+    if(flag == "chromeFrame"){
+    	document.getElementById("downloadChromeFrame").style.display="";
+		
+		$("#chromedown").attr("href","https://www.google.com/intl/"+getLanguage()+"/chrome/browser/");
+    }
+}
+function hidetip(tipid) {
+	var tip = $("#" + tipid);
+	tip.hide();
+	tip.attr("tipstatus", "close");
+}
+</script>
+</head>
+<body class="login"><div id="pageLoading" class="fakeloader" ></div>
+		<script type="text/javascript">
+			$("#pageLoading").fakeLoader({text:"",bgColor:"#1178ee",opacity:'1',spinner:"spinner2",zIndex:99999999});
+		</script>	
+<div class="logo">
+	<a href="./default.html">
+		<img id="com_zte_ums_ict_framework_img_login_logo" src="./img/integration/ztelogo.png" name_img="com_zte_ums_ict_framework_img" style="display:none" alt=""/>
+		<img id="com_zte_ums_ict_framework_img_login_logo_white" src="./img/integration/zte_logo_white.png" name_img="com_zte_ums_ict_framework_img" style="display:none" alt=""/>
+  	</a>
+</div>
+<div class="content">
+	<form class="login-form" method="post" id="fm1" action="./login">
+		<h3 class="form-title"><span id="com_zte_ums_ict_portal_login_welcome" name_i18n="com_zte_ums_ict_framework_ui_i18n_login"></span> </h3>
+		<div class="alert display-hide" id="nameOrpwdError" tipstatus="normal">
+			<button class="close" data-close="alert" onclick="hidetip('nameOrpwdError');"></button>
+			<div id="com_zte_ums_ict_portal_login_userPassword" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" style="display:inline"></div>
+		</div>
+		<div class="alert display-hide" id="loginConnError" tipstatus="normal">
+			<button class="close" data-close="alert" onclick="hidetip('loginConnError');"></button>
+			<div id="com_zte_ums_ict_portal_login_serv_error" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" style="display:inline"></div>
+		</div>
+		<div class="form-group">
+			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
+			<label id="com_zte_ums_aos_portal_login_username" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" class="control-label visible-ie8 visible-ie9" i18n-html="com_zte_ums_aos_portal_login_username"></label>
+			<div class="input-icon">
+				<i class="fa fa-user"></i>
+				<input class="form-control placeholder-no-fix" id="inputUserName" type="text" autocomplete="off" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" placeholder="" name="username"/>
+			</div>
+		</div>
+		<div class="form-group">
+			<label id="com_zte_ums_aos_portal_login_password" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" class="control-label visible-ie8 visible-ie9" i18n-html="com_zte_ums_aos_portal_login_password"></label>
+			<div class="input-icon">
+				<i class="fa fa-lock"></i>
+				<input class="form-control placeholder-no-fix" id="inputPassword" type="password" autocomplete="off" name_i18n="com_zte_ums_ict_framework_ui_i18n_login" placeholder="" name="password"/>
+			</div>
+		</div>
+		<div class="form-actions">
+			<label class="checkbox"><input type="checkbox" name="remember" value="1"><span id="com_zte_ums_ict_portal_login_rememberMe" name_i18n="com_zte_ums_ict_framework_ui_i18n_login">
+			</span></label>
+			<button type="submit" i18n-value="com_zte_ums_aos_portal_login_login" id="submitBtn" class="btn blue pull-right">
+			<span id="com_zte_ums_aos_portal_login_login" name_i18n="com_zte_ums_ict_framework_ui_i18n_login">
+			</span> <i class="m-icon-swapright m-icon-white"></i>
+			</button>
+		</div>		
+	</form>
+</div>
+<center>
+<div class="download" id="downloadChromeFrame" style="display:none">
+    <p id="notice3" i18n-html="com_zte_ums_aos_portal_login_notice_about_chromeFrame"></p>
+    <div id="chromeFrameUrl">
+    	<image class="browser_logo" src="./img/chrome_icon.png"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.google.com/intl/en_US/chrome/browser/" id="chromedown">Chrome</a>&nbsp;&nbsp;&nbsp;&nbsp;<image class="browser_logo" src="./img/firefox_icon.png"/>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.mozilla.org/" id="firefoxdown">Firefox</a>&nbsp;&nbsp;&nbsp;&nbsp;<br/>
+    </div>
+</div>
+</center>
+<div class="copyright">
+	 <span id="com_zte_ums_ict_portal_login_companyName" name_i18n="com_zte_ums_ict_framework_ui_i18n_login">
+			</span>.
+</div>
+
+<!--[if lt IE 9]>
+	<script src="/ngict/iui/component/thirdparty/respond/respond.min.js"></script>
+	<script src="/ngict/iui/component/thirdparty/excanvas/excanvas.min.js"></script> 
+	<![endif]-->
+<script src="../component/thirdparty/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+<script src="../component/thirdparty/jquery-blockui/jquery.blockui.min.js" type="text/javascript"></script>
+<script src="../component/thirdparty/uniform/jquery.uniform.min.js" type="text/javascript"></script>
+<script src="../component/thirdparty/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
+<script src="../component/thirdparty/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
+<script src="./js/security/aes.js" type="text/javascript"></script>
+<script src="./js/security/framework-util.js" type="text/javascript"></script>
+<script src="./js/login.js" type="text/javascript"></script>
+<script src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js" type="text/javascript"></script>
+<script src="./js/international/loadi18n-login.js" type="text/javascript"></script>
+<script type="text/javascript" src="./appRes/js/custom.js" ></script>
+<script>
+		jQuery(document).ready(function() {
+		  var lang = getLanguage();
+		  //lang = "en-US";
+		  loadi18n_login(lang);
+		  $("#com_zte_ums_ict_framework_img_login_logo").css('display','inline');
+		  $("#com_zte_ums_ict_framework_img_login_logo_white").css('display','inline');
+		  Login.init();
+		  		  
+		  if(store("inputUserName")){
+			$("#inputUserName").val(store("inputUserName"));
+		  }
+		$.ajax({ 	
+			url : FrameConst.REST_GET_USERNAME,  
+			type : "GET",
+			cache:false,			
+			contentType : 'application/json; charset=utf-8',
+			success: function(data){
+				var userName = data;
+				if(userName && userName !=""){ 
+						window.location = FrameConst.DEFAULT_LOGINSKIP_PAGE;
+				}
+			} 
+		});	
+		$("#pageLoading").setToHide();		
+		});
+</script>
+
+</html>
diff --git a/openo-portal/portal-common/src/main/webapp/common/main-page.html b/openo-portal/portal-common/src/main/webapp/common/main-page.html
new file mode 100644
index 00000000..d700a209
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/main-page.html
@@ -0,0 +1,100 @@
+<!--
+    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.
+-->
+<!DOCTYPE html>
+<html>
+	<head>
+		<title id="com_zte_ums_ict_framework_ui_page_title" name_i18n="com_zte_ums_ict_framework_ui_i18n"></title>
+		<meta content="text/html; charset=utf-8" http-equiv="content-type">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="description" content="ICT Main Page" />
+		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, fit zone"/>
+		<link rel="stylesheet" type="text/css" href="css/style-ict-bootstrap.css" />
+		<link rel="shortcut icon"  href="img/integration/zte_logo_16.gif"/>
+		<link href="../component/thirdparty/fakeLoader/fakeLoader.css" rel="stylesheet" type="text/css" />
+		<link href="../component/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>	
+		<script type="text/javascript" src="../component/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+		<script type="text/javascript" src="./js/core/const.js"></script>
+		<script type="text/javascript" src="./appRes/js/custom.js" ></script>
+		<script type="text/javascript" src="./js/core/hk.min.js"></script>
+		<script type="text/javascript" src="../component/thirdparty/fakeLoader/fakeLoader.min.js"></script>			
+		<script type="text/javascript" src="js/tools.js"></script>
+		<script type="text/javascript" src="../component/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>				
+		<script type="text/javascript" src="../component/thirdparty/jquery-cokie/jquery.cokie.min.js"></script>		
+		<script type="text/javascript" src="./js/international/loadi18n.js"></script>
+		<script type="text/javascript" src="./js/mainpage/ict.main.page.js"></script>		
+		<script type="text/javascript" src="./js/core/pym.min.js"></script>
+		<script type="text/javascript" src="./js/core/ZteFrameWork.min.js"></script>				
+		<style type="text/css">
+			html, body {
+				margin: 0;
+				padding: 0;				
+			}			
+			.layout {
+				padding-top:0px;
+			}
+			body {
+				font-family: microsoft yahei !important;
+				background: #484747;
+			}
+			.main-page-wrapper {
+				margin-left: 100px;
+				margin-right: 100px;
+			}
+			.brick .row {
+				margin-right: 5px;
+				margin-left: 5px;
+				margin-top: 10px;
+			}
+			.column{
+				padding-left: 5px;
+				padding-right: 5px;				
+			}
+			a:hover{
+				color:white;
+			}
+		</style>
+	</head>
+	<body><div id="pageLoading" class="fakeloader" ></div><script type="text/javascript">
+			$("#pageLoading").fakeLoader({text:"",bgColor:"#1178ee",opacity:'1',spinner:"spinner2",zIndex:99999999});
+		</script>
+		<div class='header'>
+			<div class="clearfix">
+				<div class="float-left">
+						<h2><a id="headerName" href="#">Net Numen</a></h2>
+						<!-- <div class='target'>Creating dynamic grid layouts.</div> -->
+				</div>
+			</div>
+		</div>
+		<div class="layout" style="overflow:hidden;">
+			<div class="main-page-wrapper">
+				<div id="freewall" class="row">
+					<div class="col-sm-6  col-md-3 col-lg-3 column"></div>
+					<div class="col-sm-6  col-md-3 col-lg-3 column"></div>
+					<div class="col-sm-6  col-md-3 col-lg-3 column"></div>
+					<div class="col-sm-6  col-md-3 col-lg-3 column"></div>
+				</div>				
+			</div>
+		</div>
+		<script type="text/javascript">						
+			jQuery(document).ready(function() {
+				initMainPage();						
+				$("#pageLoading").setToHide();
+				/* var lang = getLanguage();			
+				loadProperties(lang); */
+			});			
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/openo-portal/portal-common/src/main/webapp/common/main_Fmegabar.html b/openo-portal/portal-common/src/main/webapp/common/main_Fmegabar.html
new file mode 100644
index 00000000..5897267e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/main_Fmegabar.html
@@ -0,0 +1,15 @@
+<!--
+    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.
+-->
diff --git a/openo-portal/portal-common/src/main/webapp/common/main_Fsiderbar.html b/openo-portal/portal-common/src/main/webapp/common/main_Fsiderbar.html
new file mode 100644
index 00000000..5897267e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/main_Fsiderbar.html
@@ -0,0 +1,15 @@
+<!--
+    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.
+-->
diff --git a/openo-portal/portal-common/src/main/webapp/common/main_siderbar.html b/openo-portal/portal-common/src/main/webapp/common/main_siderbar.html
new file mode 100644
index 00000000..5897267e
--- /dev/null
+++ b/openo-portal/portal-common/src/main/webapp/common/main_siderbar.html
@@ -0,0 +1,15 @@
+<!--
+    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.
+-->