Try to fix the daily builed failed bug.

change the esr catagory name to portal, Fix the pom definition.

Change-Id: I21861aba0fe9b7d0528c5ffcb220d6e6096efcc4
Issue-ID: AAI-224
Signed-off-by: lizi00164331 <li.zi30@zte.com.cn>

48 files changed, 13013 insertions, 0 deletions

diff --git a/portal/pom.xml b/portal/pom.xml
new file mode 100644
index 0000000..aa63a25
--- /dev/null
+++ b/portal/pom.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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.
+
+-->
+<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <groupId>org.onap.aai.esr-gui</groupId>
+        <artifactId>aai-esr-gui-parent</artifactId>
+        <version>1.0.0-SNAPSHOT</version>
+    </parent>
+    <modelVersion>4.0.0</modelVersion>
+    <artifactId>aai-esr-gui-portal</artifactId>
+	<version>1.0.0-SNAPSHOT</version>
+    <packaging>war</packaging>
+    <name>esr-gui/portal</name>
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-war-plugin</artifactId>
+                <configuration>
+                    <failOnMissingWebXml>false</failOnMissingWebXml>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>
diff --git a/portal/src/main/webapp/extsys/ems/css/animate.min.css b/portal/src/main/webapp/extsys/ems/css/animate.min.css
new file mode 100644
index 0000000..3b04801
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/css/animate.min.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/css/ems.css b/portal/src/main/webapp/extsys/ems/css/ems.css
new file mode 100644
index 0000000..6838e7e
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/css/ems.css
@@ -0,0 +1,553 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+body {
+    font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+.blue {
+
+    background-color: #5b9bd1;
+    border-radius: 20px;
+    color: #fff;
+    font-weight: bold;
+    padding: 8px 0;
+    text-align: center;
+    width: 100px;
+}
+
+.blue:hover {
+    background-color: #e8f3fd;
+    color: #5b9bd1;
+}
+
+.blue.selected {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+.blue.selected:hover {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+p {
+    color: #444;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 21px;
+    margin: 0 0 12px 0;
+}
+
+p.credit {
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+    line-height: 140%;
+    margin: 36px 0 12px 0;
+    padding: 8px 0 0 0;
+    text-align: center;
+}
+
+ul.column {
+    float: left;
+    list-style: none;
+    width: 675px;
+}
+
+ul.column li {
+    background: #eee;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    float: left;
+    margin: 10px 0 0 10px;
+    display: block;
+    height: 150px;
+    text-align: center;
+    width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after, .button-collection:after, .clearfix:after, div.project-info:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.container-fluid {
+    background-color: white !important;
+    min-height: 500px;
+}
+
+.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;
+}
+
+.c3 {
+    margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+
+}
+
+.blue:selected {
+    border: 0;
+    background-color: #5b9bd1;
+}
+
+.btn {
+    /* border-width: 0; */
+    /* padding: 7px 14px; */
+    /* font-size: 14px; */
+    /* outline: none !important; */
+    /* background-image: none !important; */
+    /* filter: none; */
+    /* -webkit-box-shadow: none; */
+    -moz-box-shadow: none;
+    /* box-shadow: none; */
+    /* text-shadow: none; */
+}
+
+select {
+    border-width: 1px;
+    padding: 4px 1px;
+    border-radius: 4px;
+}
+
+.input-sm {
+    padding: 4px 10px;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Bootstrap buttons */
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.btn-default:active, .btn-default.active {
+    background-image: none;
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
+.btn-default:active:hover, .btn-default.active:hover {
+    background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+    background-image: none;
+}
+
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default .badge {
+    color: #fff;
+    background-color: #333;
+}
+
+.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] {
+    color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+    background-color: #f1f3fa;
+    padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+    background-color: #fff;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+    display: inline;
+}
+
+div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span {
+    /**height:33px;*/
+    margin-left: 15px;
+    color: #5b9bd1;
+    border-color: #ccc;
+    font-weight: bold;
+}
+
+.input {
+    width: 250px;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -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;
+}
+
+div.separator {
+    margin: 20px;
+}
+
+div.separator div {
+    text-align: center;
+    line-height: 0;
+}
+
+div.separator-line {
+    height: 1px !important;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+}
+
+.dropdown-toggle {
+    color: #5b9bd1;
+}
+
+.calendar-date {
+    color: #5b9bd1;
+}
+
+.range_inputs {
+    color: #5b9bd1;
+}
+
+.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;
+}
+
+#skills-chart-breadcrumb {
+    margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+    width: 220px;
+    line-height: 0;
+    height: 31px;
+    vertical-align: top;
+    margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+    width: 205px;
+}
+
+.daterangepicker .ranges input {
+    width: 95px !important;
+}
+
+td.details-control {
+    cursor: pointer;
+}
+
+tr.shown td.details-control {
+}
+
+.details table td {
+    word-wrap: break-word;
+    word-break: normal;
+    border-top: 1px solid #dddddd;
+}
+
+.details table tr:first-child td {
+    border-top: none;
+}
+
+.details table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+td.title {
+    width: 10%;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 8px 10px;
+}
+
+div.dataTables_length, div.dataTables_info {
+    display: inline;
+}
+
+div.dataTables_paginate {
+    display: inline;
+    float: right;
+}
+
+div.pagination-panel {
+    margin-right: 10px;
+}
+
+input.pagination-panel-input {
+    width: 50px;
+}
+
+#ict_res_table_div {
+    margin-top: 15px;
+}
+
+#ict_res_table_div label {
+    font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label {
+    color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+    color: #5b9bd1;
+}
+
+.cancelBtn {
+    padding: 5px 10px 5px 10px;
+}
+
+.btn:focus, .btn:active:focus, .btn.active:focus {
+    outline: 0;
+}
+
+#ict_res_table_div table {
+    width: 100% !important;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+#ict_vim_table tbody tr {
+    cursor: pointer;
+}
+
+/*卡片面板样式*/
+.animated-panel {
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-delay: 0.1s;
+}
+
+.hpanel {
+    border: none;
+    box-shadow: none;
+    margin-bottom: 25px;
+
+}
+
+.hpanel .panel-body {
+    border: 1px solid #e4e5e7;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+}
+
+.h-200 {
+    min-height: 120px;
+}
+
+.m-t-xl {
+    margin-top: 40px;
+}
+.card-name{
+    text-align: center;
+}
+.m-t-xl div {
+    margin-bottom: 15px;
+}
+
+.text-success {
+    color: #0d638f;
+}
+
+.hpanel > .panel-footer {
+    color: inherit;
+    border: 1px solid #e4e5e7;
+    border-top: none;
+    font-size: 90%;
+    background: #f7f9fa;
+    height: 40px;
+    padding: 5px 15px;
+}
+
+.color_cloud {
+    color: #ccc;
+}
+
+.stats-title {
+
+}
+
+h3 {
+    margin-top: 10px;
+    margin-bottom: 40px;
+    font-weight: 200;
+}
+
+.blue-font {
+    color: #428bca;
+}
+
+.hpanel > .panel-footer .pull-right a {
+    margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn {
+    min-width: 30px !important;
+}
+
+.font-bold {
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+.hpanel_show {
+    background-color: #f7f9fa;
+}
+.vnfm-padding {
+    padding-left: 0;
+}
+.step-content{
+    margin-top: 20px;
+}
+.px-ui-steps{
+    height: 36px;
+}
+.px-ui-horizon-ul-horizon{
+    display: flex;
+    box-orient: horizontal;
+    margin: 0;
+    padding: 0;
+}
+.px-ui-steps-li{
+    list-style: none;
+    position: relative;
+    width: 386px;
+    height: 24px;
+    line-height: 24px;
+    float: left;
+    margin-right: 0;
+}
+.px-ui-menuitem-div-passive{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 120px;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+.step-active div:first-child span:last-child{
+    color: #4d5761;
+}
+.step-active div:last-child, .step-active div:first-child span:first-child{
+    background: #33bcff;
+}
+.px-ui-steps-number-passive{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    float: left;
+    color: #fff;
+    text-align: center;
+    background: #ddd;
+}
+.px-ui-steps-title-passive{
+    white-space: nowrap;
+}
+.px-ui-steps-title-active{
+    color: #4d5761;
+}
+.px-ui-steps-title-passive{
+    color: #7c868d;
+}
+
+.px-ui-underline-passive{
+    width: 100%;
+    height: 2px;
+    margin-top: 35px;
+    position: absolute;
+    background: #ddd;
+}
+#btnPreStep, #btnSave{
+    display: none;
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/emsView.html b/portal/src/main/webapp/extsys/ems/emsView.html
new file mode 100644
index 0000000..56a364e
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/emsView.html
@@ -0,0 +1,342 @@
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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 lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/>
+    <link href="css/animate.min.css" rel="stylesheet"/>
+    <link href="css/ems.css" rel="stylesheet"/>
+    <style> .ms-controller {  visibility: hidden } </style>
+</head>
+<body>
+<div ms-controller="emsController" class="container-fluid ms-controller">
+    <div id="addEmsDlg" class="modal fade" tabindex="-1" role="dialog"
+         aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content Changepasswd">
+                <div class="content">
+                    <div class="modal-header">
+                        <h4 id="myModalLabel">{{modalTitle}}</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div class="px-ui-steps">
+                            <ul class="px-ui-horizon-ul-horizon" role="tablist">
+                                <li class="px-ui-steps-li step-active" id="step-resource">
+                                    <div  class="px-ui-menuitem-div-passive">
+                                        <span class="px-ui-steps-number-passive">1</span>
+                                        <span class="px-ui-steps-title-passive">Resource</span>
+                                    </div>
+                                    <div class="px-ui-underline-passive"></div>
+                                </li>
+                                <li class="px-ui-steps-li" id="step-performance">
+                                    <div class="px-ui-menuitem-div-passive">
+                                        <span class="px-ui-steps-number-passive">2</span>
+                                        <span class="px-ui-steps-title-passive">Performance</span>
+                                    </div>
+                                    <div class="px-ui-underline-passive"></div>
+                                </li>
+                                <li class="px-ui-steps-li" id="step-alarm">
+                                    <div class="px-ui-menuitem-div-passive">
+                                        <span class="px-ui-steps-number-passive">3</span>
+                                        <span class="px-ui-steps-title-passive">Alarm</span>
+                                    </div>
+                                    <div class="px-ui-underline-passive"></div>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="step-content">
+                            <form class="form-horizontal" id="form_resource" role="form">
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Name</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.emsName" name="emsName" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Ftptype</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <select ms-duplex="currentElement.resource.ftptype" name="ftptype" class="form-control">
+                                            <option value="ftp">ftp</option>
+                                            <option value="sftp">sftp</option>
+                                        </select>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>IP</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.resource.ip" name="ip" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Port</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.resource.port" name="port" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>User</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.resource.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Password</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input type="password" class="form-control" rows="3" ms-duplex="currentElement.resource.password"  name="password"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Remotepath</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input class="form-control" rows="3" ms-duplex="currentElement.resource.remotepath" name="remotepath"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Passive</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <select class="form-control" rows="3" ms-duplex="currentElement.resource.passive" name="passive">
+                                        <option value="true">true</option>
+                                        <option value="false">false</option>
+                                    </select>
+                                     <span class="help-block"></span>
+                                    </div>
+                                </div>
+                            </form>
+                            <form class="form-horizontal" id="form_performance" role="form" hidden>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Ftptype</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <select ms-duplex="currentElement.performance.ftptype" name="type" class="form-control">
+                                            <option value="ftp">ftp</option>
+                                            <option value="sftp">sftp</option>
+                                        </select>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>IP</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.performance.ip" name="ip" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Port</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.performance.port" name="port" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>User</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.performance.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Password</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input type="password" class="form-control" rows="3" ms-duplex="currentElement.performance.password"  name="password"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Remotepath</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input class="form-control" rows="3" ms-duplex="currentElement.performance.remotepath" name="remotepath"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Passive</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <select class="form-control" rows="3" ms-duplex="currentElement.performance.passive" name="passive">
+                                        <option value="true">true</option>
+                                        <option value="false">false</option>
+                                    </select>
+                                     <span class="help-block"></span>
+                                    </div>
+                                </div>
+                            </form>
+                            <form class="form-horizontal" id="form_alarm" role="form" hidden>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>IP</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.alarm.ip" name="ip" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Port</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.alarm.port" name="port" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>User</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.alarm.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Password</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input type="password" class="form-control" rows="3" ms-duplex="currentElement.alarm.password"  name="password"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn" id="btnPreStep" ms-click="$preStep">Back</button>
+                        <button class="btn btn-primary" id="btnNextStep" ms-click="$nextStep">Next</button>
+                        <button class="btn btn-primary" id="btnSave" ms-click="$saveEMS" id_i18n="nfv-ems-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                        <button class="btn" id="btnCancel" ms-click="dismiss" aria-hidden="true" id_i18n="nfv-ems-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row-fluid" data-name="cond_zone">
+        <div class="col-md-12">
+            <button class="btn white radius_l" id="app-new-btn" ms-click="$registerEMS">
+                <i class="ict-new"></i> <span id_i18n="nfv-ems-iui-text-registerBtn"  name_i18n="com_zte_nfv_nsoc_i18n"></span>
+            </button>
+        </div>
+    </div>
+
+    <div class="col-sm-12 vnfm-padding" ms-each-el="emsInfo">
+        <div class="col-sm-3 animated-panel zoomIn">
+            <div class="hpanel stats">
+                <div class="panel-body h-200" ms-hover="hpanel_show">
+                    <div class="pull-left">
+                        <span class="label label-success" ms-if="el.status == status.success" id_i18n="nfv-ems-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                        <span class="label label-danger" ms-if="el.status == status.failed" ms-attr-title="el.errorInfo" data-toggle="tooltip" id_i18n="nfv-ems-iui-text-status-fail" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                    </div>
+                    <div class="stats-icon pull-right">
+                        <i class="fa fa-server  fa-5x color_cloud"></i>
+                    </div>
+                    <div class="m-t-xl">
+                        <h3 ms-text="el.emsName"></h3>
+                        <!--<div class="card-name"><span ms-text="el.emsName"></span></div>-->
+                    </div>
+                </div>
+                <div class="panel-footer">
+                    <div class="pull-right">
+                        <a class="btn btn-default btn-sm" ms-click="updateEMS($index)"><i
+                                class="fa fa-pencil-square-o fa-lg"></i></a>
+                        <a class="btn btn-default btn-sm" ms-click="delEMS(el.emsId, $index)"><i class="fa fa-trash-o fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12">
+        <div class="pull-left text-muted">
+            <small><span id_i18n="nfv-ems-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" ms-text="emsInfo.size()"></span>
+                <span id_i18n="nfv-ems-iui-text-total-ems" name_i18n="com_zte_nfv_nsoc_i18n"></span></small>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>
+<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>-->
+<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>-->
+<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
+
+<script type="text/javascript" src="js/commonUtil.js"></script>
+<script type="text/javascript" src="js/loadi18n_nsoc.js"></script>
+
+<script type="text/javascript" src="js/ems-validate.js"></script>
+<script type="text/javascript" src="js/emsController.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties
new file mode 100644
index 0000000..f39749a
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties
@@ -0,0 +1,55 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//ems
+nfv-ems-iui-title=EMS Manage
+nfv-ems-iui-message-title=Ems info
+nfv-ems-iui-message-query-fail=Query ems failed.
+nfv-ems-iui-message-save-success=Save successfully.
+nfv-ems-iui-message-save-fail=Save failed.
+nfv-ems-iui-message-ems-already-exists=Ems already exists.
+nfv-ems-iui-message-update-success=Update successfully.
+nfv-ems-iui-message-update-fail=Update failed.
+nfv-ems-iui-message-delete-confirm=Do you want to delete the current ems?
+nfv-ems-iui-message-delete-success=Ems deleted successfully.
+nfv-ems-iui-message-delete-fail=Ems deleted failed.
+
+nfv-ems-iui-text-update=Modify ems info
+nfv-ems-iui-text-register=Register ems info
+nfv-ems-iui-text-name=Name
+nfv-ems-iui-text-type=type
+nfv-ems-iui-text-version=version
+nfv-ems-iui-text-certificateUrl=certificate URL
+nfv-ems-iui-text-vendor=Vendor
+nfv-ems-iui-text-userName=Username
+nfv-ems-iui-text-password=Password
+nfv-ems-iui-text_description=Description
+nfv-ems-iui-text-cancelBtn=cancel
+nfv-ems-iui-text-saveBtn=save
+nfv-ems-iui-text-registerBtn=Register
+nfv-ems-iui-text-status-normal=Normal
+nfv-ems-iui-text-status-fail=Abnormal
+nfv-ems-iui-text-total=Total
+nfv-ems-iui-text-total-ems= of ems
+
+nfv-ems-iui-validate-name=Please enter a name
+nfv-ems-iui-validate-type=Please enter the ems type
+nfv-ems-iui-validate-version=Please enter version
+nfv-ems-iui-validate-vendor=Please enter vendor
+nfv-ems-iui-validate-ems=Please select a EMS
+nfv-ems-iui-validate-url-required=Please enter the URL
+nfv-ems-iui-validate-url=Please enter the right URL
+nfv-ems-iui-text-url-tip=Example: http://10.0.0.1
diff --git a/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties
new file mode 100644
index 0000000..e6bdacd
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties
@@ -0,0 +1,54 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//ems
+nfv-ems-iui-title=EMS管理
+nfv-ems-iui-message-title=EMS信息
+nfv-ems-iui-message-query-fail=查询EMS失败。
+nfv-ems-iui-message-save-success=保存成功。
+nfv-ems-iui-message-save-fail=保存失败。
+nfv-ems-iui-message-ems-already-exists=EMS已经存在
+nfv-ems-iui-message-update-success=修改成功。
+nfv-ems-iui-message-update-fail=修改失败。
+nfv-ems-iui-message-delete-confirm=确定删除所选ems信息？
+nfv-ems-iui-message-delete-success=删除成功
+nfv-ems-iui-message-delete-fail=删除失败
+nfv-ems-iui-text-update=修改EMS信息
+nfv-ems-iui-text-register=注册EMS信息
+nfv-ems-iui-text-name=名称
+nfv-ems-iui-text-type=类型
+nfv-ems-iui-text-version=版本
+nfv-ems-iui-text-certificateUrl=认证url
+nfv-ems-iui-text_description=描述
+nfv-ems-iui-text-vendor=厂商
+nfv-ems-iui-text-userName=接入用户
+nfv-ems-iui-text-password=接入密码
+nfv-ems-iui-text-cancelBtn=取消
+nfv-ems-iui-text-saveBtn=保存
+nfv-ems-iui-text-registerBtn=注册EMS
+nfv-ems-iui-text-status-normal=正常
+nfv-ems-iui-text-status-fail=报警
+nfv-ems-iui-text-total=共
+nfv-ems-iui-text-total-ems=EMS
+
+nfv-ems-iui-validate-name=请输入名称
+nfv-ems-iui-validate-type=请输入EMS类型
+nfv-ems-iui-validate-version=请输入版本号
+nfv-ems-iui-validate-vendor=请输入厂商
+nfv-ems-iui-validate-vim=请选择EMS
+nfv-ems-iui-validate-url-required=请输入URL
+nfv-ems-iui-validate-url=请输入正确的URL
+nfv-ems-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/js/commonUtil.js b/portal/src/main/webapp/extsys/ems/js/commonUtil.js
new file mode 100644
index 0000000..44a72f3
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/js/commonUtil.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 commonUtil = {};
+commonUtil.arrayRemove = function (aryInstance, index) {
+    if (aryInstance == undefined || aryInstance == null) {
+        return;
+    }
+    for (var i = 0, n = 0; i < aryInstance.length; i++) {
+        if (aryInstance[i] != aryInstance[dx]) {
+            aryInstance[n++] = aryInstance[i];
+        }
+    }
+    aryInstance.length -= 1;
+};
+
+//For the expansion of the Date, convert the Date to specify the format String
+// examples：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function (dateObj, format) {
+    var o = {
+        "M+": dateObj.getMonth() + 1, //month
+        "d+": dateObj.getDate(),    //day
+        "h+": dateObj.getHours(),   //hour
+        "m+": dateObj.getMinutes(), //minute
+        "s+": dateObj.getSeconds(), //second
+        "q+": Math.floor((dateObj.getMonth() + 3) / 3),  //quarter
+        "S": dateObj.getMilliseconds() //millisecond
+    }
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+        (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(format))
+            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
+                ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+};
+
+//tooltip
+commonUtil.showMessage = function (message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;" + $.i18n.prop("nfv-nso-iui-common-tip"),
+        message: message
+    }, {
+        type: type
+    });
+};
+
+commonUtil.registerCometdMessage = function (url, channel, callback) {
+    var cometd = new $.Cometd();
+    var cometdURL = location.protocol + "//" + location.host + url;
+    cometd.configure({
+        url: cometdURL,
+        logLevel: "info"
+    });
+    // unregister websocket transport, use long-polling transport
+    cometd.unregisterTransport('websocket');
+    // store channel object parameters(this object include channel and callback function), start from arguments[1]
+    var _args = arguments;
+
+    cometd.addListener("/meta/handshake", function (handshake) {
+        if (handshake.successful === true) {
+            cometd.batch(function () {
+                //subscribe channel
+                cometd.subscribe(channel, function (message) {
+                    callback.call(this, message.data);
+                });
+            });
+        }
+    });
+    cometd.handshake();
+}
+
+commonUtil.format = function () {
+    if (arguments.length == 0) {
+        return null;
+    }
+    var str = arguments[0];
+    for (var i = 0; i < arguments.length; i++) {
+        var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm");
+        str = str.replace(reg, arguments[i]);
+    }
+    return str;
+}
+
+commonUtil.get = function (url, params, callback) {
+    $.ajax({
+        type: "GET",
+        url: url,
+        //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        dataType: "json",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.post = function (url, params, callback, contentType) {
+    $.ajax({
+        type: "POST",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.delete = function (url, callback, contentType) {
+    $.ajax({
+        type: "DELETE",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        success: callback
+    });
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/js/ems-validate.js b/portal/src/main/webapp/extsys/ems/js/ems-validate.js
new file mode 100644
index 0000000..7cca638
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/js/ems-validate.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 () {
+    var form = $('#vnfm_form');
+    var error = $('.alert-danger', form);
+    var success = $('.alert-success', form);
+
+    form.validate({
+        doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+        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: {
+            name: {
+                required: true,
+                maxlength: 20
+            },
+            type: {
+                required: true,
+                maxlength: 20
+            },
+            version: {
+                required: true,
+                maxlength: 20
+            },
+            vendor: {
+                required: true,
+                maxlength: 20
+            },
+            url: {
+                required: true,
+                url: true
+            }
+        },
+        messages: {
+            name: {
+                required: $.i18n.prop("nfv-ems-iui-validate-name")
+            },
+            type: {
+                required: $.i18n.prop("nfv-ems-iui-validate-type")
+            },
+            version: {
+                required: $.i18n.prop("nfv-ems-iui-validate-version")
+            },
+            vendor: {
+                required: $.i18n.prop("nfv-ems-iui-validate-vendor")
+            },
+            url: {
+                required: $.i18n.prop("nfv-ems-iui-validate-url-required"),
+                url: $.i18n.prop("nfv-ems-iui-validate-url")
+            }
+        },
+        errorPlacement: function (error, element) { // render error placement for each input type
+            error.insertAfter(element); // for other inputs, just perform default behavior
+        },
+        invalidHandler: function (event, validator) { //display error alert on form submit   
+            success.hide();
+            error.show();
+        },
+        highlight: function (element) { // hightlight error inputs
+            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+        },
+        unhighlight: function (element) { // revert the change done by hightlight
+            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
+        },
+        success: function (label) {
+            label.addClass('valid') // mark the current input as valid and display OK icon
+                .closest('.form-group').removeClass('has-error'); // set success class to the control group
+        },
+        submitHandler: function (form) {
+            success.show();
+            error.hide();
+            //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+        }
+    });
+});
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/js/emsController.js b/portal/src/main/webapp/extsys/ems/js/emsController.js
new file mode 100644
index 0000000..b615b62
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/js/emsController.js
@@ -0,0 +1,329 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vm = avalon.define({
+        $id: "emsController",
+        emsInfo: [],
+        currentElement: {},
+        $emsList: [],
+        $newElement: {
+            "emsId": "",
+            "status": "active",
+            "emsName": "",
+            "version": "v1.0",
+            "vendor": "ZTE",
+            "description": "ems description",
+            "resource": {
+                "ftptype": "ftp",
+                "ip": "",
+                "port": "",
+                "user": "root",
+                "password": "",
+                "remotepath": "/opt/Gcp/data/",
+                "passive": true
+            },
+            "performance": {
+                "ftptype": "ftp",
+                "ip": "",
+                "port": "",
+                "user": "root",
+                "password": "",
+                "remotepath": "",
+                "passive": true
+            },
+            "alarm": {
+                "ip": "",
+                "port": 2000,
+                "user": "root",
+                "password": ""
+            }
+        },
+        vimSelectItems: [],
+        saveType: "add",
+        server_rtn: {
+            info_block: false,
+            warning_block: false,
+            rtn_info: "",
+            $RTN_SUCCESS: "RTN_SUCCESS",
+            $RTN_FAILED: "RTN_FAILED"
+        },
+        modalTitle: $.i18n.prop("nfv-ems-iui-text-register"),
+        urlTip: "",
+        currentStep: 1,
+        status: {
+            success: "active",
+            failed: "inactive"
+        },
+        $format: {
+            "ipv4": /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
+            "port": /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
+            "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
+        },
+        $restUrl: {
+            queryEmsInfoUrl: "/esrui/extsys/ems/mock-data/ems.json",//'/onapapi/aai/esr/v1/ems',
+            addVnfmInfoUrl: '/onapapi/aai/esr/v1/ems',
+            updateVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/',
+            delVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/',
+            queryMocUrl: '',
+            queryVimUrl: '/onapapi/aai/esr/v1/vims'
+        },
+        $htmlText: {
+            saveSuccess: $.i18n.prop("nfv-ems-iui-message-save-success"),
+            saveFail: $.i18n.prop("nfv-ems-iui-message-save-fail"),
+            alreadyExist: $.i18n.prop("nfv-ems-iui-message-ems-already-exists"),
+            updateSuccess: $.i18n.prop("nfv-ems-iui-message-update-success"),
+            updateFail: $.i18n.prop("nfv-ems-iui-message-update-fail")
+        },
+        $initTable: function () {
+            $.ajax({
+                "type": 'GET',
+                "url": vm.$restUrl.queryEmsInfoUrl,
+                "dataType": "json",
+                "success": function (resp) {
+                    vm.emsInfo = resp;
+                    vm.$emsList = $.extend(true, [], resp) ;
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    bootbox.alert($.i18n.prop("nfv-ems-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown);
+                    return;
+                },
+                complete: function () {
+                    $("[data-toggle='tooltip']").tooltip();
+                }
+            });
+        },
+        $nextStep: function () {
+            if(vm.currentStep == 1 && !vm.validate("resource")){
+                 return false;
+            } else if(vm.currentStep == 2 && !vm.validate("performance")){
+                return false;
+            }
+            vm.currentStep ++;
+            vm.showStep();
+        },
+        $preStep: function () {
+            if(vm.currentStep == 2 && !vm.validate("resource")){
+                return false;
+            } else if(vm.currentStep == 3 && !vm.validate("alarm")){
+                return false;
+            }
+            vm.currentStep --;
+            vm.showStep();
+        },
+        showStep: function () {
+            var show = function (filter) {
+                $(".px-ui-steps ul li.step-active").removeClass("step-active");
+                $("#step-" + filter).addClass("step-active");
+                $(".step-content form").hide();
+                $("#form_" + filter).show();
+            };
+            switch (vm.currentStep){
+                case 1:
+                    show("resource");
+                    $("#btnSave, #btnPreStep").hide();
+                    $("#btnNextStep").show();
+                    break;
+                case 2:
+                    show("performance");
+                    $("#btnSave").hide();
+                    $("#btnNextStep, #btnPreStep").show();
+                    break;
+                case 3:
+                    show("alarm");
+                    $("#btnNextStep").hide();
+                    $("#btnSave, #btnPreStep").show();
+                    break;
+            }
+        },
+        $registerEMS: function () {
+            vm.currentElement = $.extend(true, {}, vm.$newElement);
+            vm.currentIndex = -1;
+            vm.saveType = "add";
+            vm.modalTitle = $.i18n.prop("nfv-ems-iui-text-register");
+            vm.$showTable();
+        },
+        $showTable: function () {
+            vm.currentStep = 1;
+            vm.showStep();
+            $(".form-group").removeClass('has-success').removeClass('has-error');
+            $("#addEmsDlg").modal("show");
+        },
+        dismiss: function () {
+            if(vm.currentIndex !== -1){
+                vm.currentElement.emsName = vm.$emsList[vm.currentIndex].emsName;
+            }
+            $("#addEmsDlg").modal("hide");
+        },
+        $saveEMS: function () {
+            var form = $('#vnfm_form');
+           //TODO valiate
+            vm.server_rtn.info_block = true;
+            vm.server_rtn.warning_block = false;
+
+            //save VIM info
+            var res = false;
+            if (vm.saveType == "add") {
+                res = vm.postEMS();
+            } else {
+                res = vm.putEMS();
+            }
+            if(res){
+                $("#addEmsDlg").modal("hide");
+            }
+        },
+        updateEMS: function (index) {
+            vm.saveType = "update";
+            vm.currentIndex = index;
+            vm.currentElement = vm.emsInfo[index];
+            vm.$showTable();
+        },
+        delEMS: function (id, index) {
+            bootbox.confirm($.i18n.prop("nfv-ems-iui-message-delete-confirm"), function (result) {
+                if (result) {
+                    vm.emsInfo.splice(index, 1);
+                    vm.$emsList.splice(index, 1);
+                    console.log(vm.emsInfo[index]);
+                   /* $.ajax({
+                        type: "DELETE",
+                        url: vm.$restUrl.delVnfmInfoUrl + id,
+                        dataType: "json",
+                        success: function (data, statusText, jqXHR) {
+                            if (jqXHR.status == "204") {
+
+                                commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-success"), "success");
+                            } else {
+                                commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning");
+                            }
+                        },
+                        error: function () {
+                            commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning");
+                        }
+                    });*/
+                }
+            });
+        },
+        validate: function (formId) {
+            var res = true;
+            var emsSave = vm.getEMSSave();
+            var ip = emsSave[formId].ip;
+            var port = emsSave[formId].port;
+            if(!vm.$format.ipv4.test(ip)){
+                $("#form_" + formId + " input[name='ip']").next().html("The IP format is incorrect");
+                res = res && false;
+            } else {
+                $("#form_" + formId + " input[name='ip']").next().html("");
+            }
+            if(!vm.$format.port.test(port)){
+                $("#form_" + formId + " input[name='port']").next().html("The port format is incorrect");
+                res = res && false;
+            } else {
+                $("#form_" + formId + " input[name='port']").next().html("");
+            }
+            return res;
+        },
+        postEMS: function () {
+            var emsSave = vm.getEMSSave();
+            if(!vm.validate("alarm")){
+                return false;
+            }
+            emsSave.emsId = Math.floor(Math.random() * 100000) / 100000;
+            vm.emsInfo.push(emsSave);
+            vm.$emsList.push(emsSave);
+            console.log(emsSave);
+            return true;
+            /*$.ajax({
+                type: "POST",
+                url: vm.$restUrl.addVnfmInfoUrl,
+                data: JSON.stringify(vm.currentElement),
+                dataType: "json",
+                contentType: "application/json",
+                success: function (data) {
+                    vm.server_rtn.info_block = false;
+                    vm.server_rtn.warning_block = false;
+                    if (data) {
+                        vm.vnfmInfo = [];
+                        vm.$initTable();
+
+                        $('#addEmsDlg').modal('hide');
+                        commonUtil.showMessage(vm.$htmlText.saveSuccess, "success");
+                    } else {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = vm.$htmlText.saveFail;
+                        commonUtil.showMessage(vm.$htmlText.saveFail, "failed");
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.server_rtn.warning_block = true;
+                    vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                    vm.server_rtn.info_block = false;
+                }
+            });*/
+        },
+        putEMS: function () {
+            console.log(vm.getEMSSave());
+            if(!vm.validate("alarm")){
+                return false;
+            }
+            return true;
+           /* $.ajax({
+                type: "PUT",
+                url: vm.$restUrl.updateVnfmInfoUrl + vm.currentElement.emsId,
+                data: JSON.stringify(vm.currentElement),
+                dataType: "json",
+                contentType: "application/json",
+                success: function (data) {
+                    vm.server_rtn.info_block = false;
+                    vm.server_rtn.warning_block = false;
+                    if (data) {
+                        for (var i = 0; i < vm.vnfmInfo.length; i++) {
+                            if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) {
+                                vm.vnfmInfo[i].name = vm.addVnfm.name;
+                                vm.vnfmInfo[i].vimId = $("#vimId").val();
+                                vm.vnfmInfo[i].vendor = vm.addVnfm.vendor;
+                                vm.vnfmInfo[i].version = vm.addVnfm.version;
+                                vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl;
+                                vm.vnfmInfo[i].description = vm.addVnfm.description;
+                                vm.vnfmInfo[i].url = vm.addVnfm.url;
+                                vm.vnfmInfo[i].userName = vm.addVnfm.userName;
+                                vm.vnfmInfo[i].password = vm.addVnfm.password;
+                            }
+                        }
+                        $('#addEmsDlg').modal('hide');
+                        commonUtil.showMessage(vm.$htmlText.updateSuccess, "success");
+                    } else {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = vm.$htmlText.updateFail;
+                        commonUtil.showMessage(vm.$htmlText.updateFail, "failed");
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.server_rtn.warning_block = true;
+                    vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                    vm.server_rtn.info_block = false;
+                }
+            });*/
+        },
+        getEMSSave: function () {
+            var emsSave = $.extend(true, {}, vm.currentElement.$model);
+            emsSave.alarm = vm.currentElement.alarm.$model;
+            emsSave.resource = vm.currentElement.resource.$model;
+            emsSave.performance = vm.currentElement.performance.$model;
+            return emsSave;
+        }
+    });
+vm.currentElement = $.extend(true, {}, vm.$newElement);
+avalon.scan();
+vm.$initTable();
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js
new file mode 100644
index 0000000..45224af
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 loadPropertiesSideMenu(lang, fileNamePrefix, filePath) {
+    jQuery.i18n.properties({
+        language: lang,
+        name: fileNamePrefix,
+        path: filePath,
+        mode: 'map',
+        callback: function () {
+            var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]");
+            for (var i = 0; i < i18nItems.length; i++) {
+                var $item = $(i18nItems.eq(i));
+                var itemId = $item.attr("id_i18n");
+                var itemTitle = $item.attr("title");
+                if (typeof(itemTitle) != "undefined") {
+                    $item.attr("title", $.i18n.prop(itemId));
+                } else {
+                    $item.text($.i18n.prop(itemId));
+                }
+            }
+        }
+    });
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/ems/mock-data/ems.json b/portal/src/main/webapp/extsys/ems/mock-data/ems.json
new file mode 100644
index 0000000..d02e57e
--- /dev/null
+++ b/portal/src/main/webapp/extsys/ems/mock-data/ems.json
@@ -0,0 +1,66 @@
+[

+  {

+    "emsId": "123098765",

+    "status": "active",

+    "emsName": "EMS_TEST",

+    "version": "v1.0",

+    "vendor": "ZTE",

+    "description": "ems description",

+    "resource": {

+      "ftptype": "ftp",

+      "ip": "10.44.55.145",

+      "port": "2000",

+      "user": "root",

+      "password": "test",

+      "remotepath": "/opt/Gcp/data/",

+      "passive": true

+    },

+    "performance": {

+      "ftptype": "ftp",

+      "ip": "10.44.55.145",

+      "port": "2000",

+      "user": "root",

+      "password": "test",

+      "remotepath": "/opt/Gcp/data/",

+      "passive": true

+    },

+    "alarm": {

+      "ip": "10.44.55.145",

+      "port": 2000,

+      "user": "root",

+      "password": "test"

+    }

+  },

+  {

+    "emsId": "12309876566",

+    "status": "inactive",

+    "emsName": "EMS_TEST_FAILED",

+    "version": "v1.0",

+    "vendor": "ZTE",

+    "description": "ems description",

+    "resouce": {

+      "ftptype": "sftp",

+      "ip": "10.44.55.15",

+      "port": "2100",

+      "user": "root",

+      "password": "test",

+      "remotepath": "/opt/Gcp/data/",

+      "passive": true

+    },

+    "performance": {

+      "ftptype": "sftp",

+      "ip": "10.44.55.15",

+      "port": "2100",

+      "user": "root",

+      "password": "test",

+      "remotepath": "/opt/Gcp/data/",

+      "passive": true

+    },

+    "alarm": {

+      "ip": "10.44.55.15",

+      "port": 2100,

+      "user": "root",

+      "password": "test"

+    }

+  }

+]
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css b/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css
new file mode 100644
index 0000000..3b04801
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css b/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css
new file mode 100644
index 0000000..0998451
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css
@@ -0,0 +1,550 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+body {
+    font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+.blue {
+
+    background-color: #5b9bd1;
+    border-radius: 20px;
+    color: #fff;
+    font-weight: bold;
+    padding: 8px 0;
+    text-align: center;
+    width: 100px;
+}
+
+.blue:hover {
+    background-color: #e8f3fd;
+    color: #5b9bd1;
+}
+
+.blue.selected {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+.blue.selected:hover {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+p {
+    color: #444;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 21px;
+    margin: 0 0 12px 0;
+}
+
+p.credit {
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+    line-height: 140%;
+    margin: 36px 0 12px 0;
+    padding: 8px 0 0 0;
+    text-align: center;
+}
+
+ul.column {
+    float: left;
+    list-style: none;
+    width: 675px;
+}
+
+ul.column li {
+    background: #eee;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    float: left;
+    margin: 10px 0 0 10px;
+    display: block;
+    height: 150px;
+    text-align: center;
+    width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after, .button-collection:after, .clearfix:after, div.project-info:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.container-fluid {
+    background-color: white !important;
+    min-height: 500px;
+}
+
+.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;
+}
+
+.c3 {
+    margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+
+}
+
+.blue:selected {
+    border: 0;
+    background-color: #5b9bd1;
+}
+
+.btn {
+    /* border-width: 0; */
+    /* padding: 7px 14px; */
+    /* font-size: 14px; */
+    /* outline: none !important; */
+    /* background-image: none !important; */
+    /* filter: none; */
+    /* -webkit-box-shadow: none; */
+    -moz-box-shadow: none;
+    /* box-shadow: none; */
+    /* text-shadow: none; */
+}
+
+select {
+    border-width: 1px;
+    padding: 4px 1px;
+    border-radius: 4px;
+}
+
+.input-sm {
+    padding: 4px 10px;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Bootstrap buttons */
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.btn-default:active, .btn-default.active {
+    background-image: none;
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
+.btn-default:active:hover, .btn-default.active:hover {
+    background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+    background-image: none;
+}
+
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default .badge {
+    color: #fff;
+    background-color: #333;
+}
+
+.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] {
+    color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+    background-color: #f1f3fa;
+    padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+    background-color: #fff;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+    display: inline;
+}
+
+div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span {
+    /**height:33px;*/
+    margin-left: 15px;
+    color: #5b9bd1;
+    border-color: #ccc;
+    font-weight: bold;
+}
+
+.input {
+    width: 250px;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -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;
+}
+
+div.separator {
+    margin: 20px;
+}
+
+div.separator div {
+    text-align: center;
+    line-height: 0;
+}
+
+div.separator-line {
+    height: 1px !important;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+}
+
+.dropdown-toggle {
+    color: #5b9bd1;
+}
+
+.calendar-date {
+    color: #5b9bd1;
+}
+
+.range_inputs {
+    color: #5b9bd1;
+}
+
+.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;
+}
+
+#skills-chart-breadcrumb {
+    margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+    width: 220px;
+    line-height: 0;
+    height: 31px;
+    vertical-align: top;
+    margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+    width: 205px;
+}
+
+.daterangepicker .ranges input {
+    width: 95px !important;
+}
+
+td.details-control {
+    cursor: pointer;
+}
+
+tr.shown td.details-control {
+}
+
+.details table td {
+    word-wrap: break-word;
+    word-break: normal;
+    border-top: 1px solid #dddddd;
+}
+
+.details table tr:first-child td {
+    border-top: none;
+}
+
+.details table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+td.title {
+    width: 10%;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 8px 10px;
+}
+
+div.dataTables_length, div.dataTables_info {
+    display: inline;
+}
+
+div.dataTables_paginate {
+    display: inline;
+    float: right;
+}
+
+div.pagination-panel {
+    margin-right: 10px;
+}
+
+input.pagination-panel-input {
+    width: 50px;
+}
+
+#ict_res_table_div {
+    margin-top: 15px;
+}
+
+#ict_res_table_div label {
+    font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label {
+    color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+    color: #5b9bd1;
+}
+
+.cancelBtn {
+    padding: 5px 10px 5px 10px;
+}
+
+.btn:focus, .btn:active:focus, .btn.active:focus {
+    outline: 0;
+}
+
+#ict_res_table_div table {
+    width: 100% !important;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+#ict_vim_table tbody tr {
+    cursor: pointer;
+}
+
+/*卡片面板样式*/
+.animated-panel {
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-delay: 0.1s;
+}
+
+.hpanel {
+    border: none;
+    box-shadow: none;
+    margin-bottom: 25px;
+
+}
+
+.hpanel .panel-body {
+    border: 1px solid #e4e5e7;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+}
+
+.h-200 {
+    min-height: 120px;
+}
+
+.m-t-xl {
+    margin-top: 40px;
+}
+.card-name{
+    text-align: center;
+}
+.m-t-xl div {
+    margin-bottom: 15px;
+}
+
+.text-success {
+    color: #0d638f;
+}
+
+.hpanel > .panel-footer {
+    color: inherit;
+    border: 1px solid #e4e5e7;
+    border-top: none;
+    font-size: 90%;
+    background: #f7f9fa;
+    height: 40px;
+    padding: 5px 15px;
+}
+
+.color_cloud {
+    color: #ccc;
+}
+
+.stats-title {
+
+}
+
+h3 {
+    margin-top: 10px;
+    margin-bottom: 40px;
+    font-weight: 200;
+}
+
+.blue-font {
+    color: #428bca;
+}
+
+.hpanel > .panel-footer .pull-right a {
+    margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn {
+    min-width: 30px !important;
+}
+
+.font-bold {
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+.hpanel_show {
+    background-color: #f7f9fa;
+}
+.vnfm-padding {
+    padding-left: 0;
+}
+.step-content{
+    margin-top: 20px;
+}
+.px-ui-steps{
+    height: 36px;
+}
+.px-ui-horizon-ul-horizon{
+    display: flex;
+    box-orient: horizontal;
+    margin: 0;
+    padding: 0;
+}
+.px-ui-steps-li{
+    list-style: none;
+    position: relative;
+    width: 386px;
+    height: 24px;
+    line-height: 24px;
+    float: left;
+    margin-right: 0;
+}
+.px-ui-menuitem-div-passive{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 120px;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+.step-active div:first-child span:last-child{
+    color: #4d5761;
+}
+.step-active div:last-child, .step-active div:first-child span:first-child{
+    background: #33bcff;
+}
+.px-ui-steps-number-passive{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    float: left;
+    color: #fff;
+    text-align: center;
+    background: #ddd;
+}
+.px-ui-steps-title-passive{
+    white-space: nowrap;
+}
+.px-ui-steps-title-active{
+    color: #4d5761;
+}
+.px-ui-steps-title-passive{
+    color: #7c868d;
+}
+
+.px-ui-underline-passive{
+    width: 100%;
+    height: 2px;
+    margin-top: 35px;
+    position: absolute;
+    background: #ddd;
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties
new file mode 100644
index 0000000..caaa70e
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties
@@ -0,0 +1,55 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//sdnc
+nfv-sdnc-iui-title=SDNC Manage
+nfv-sdnc-iui-message-title=SDNC info
+nfv-sdnc-iui-message-query-fail=Query sdnc failed.
+nfv-sdnc-iui-message-save-success=Save successfully.
+nfv-sdnc-iui-message-save-fail=Save failed.
+nfv-sdnc-iui-message-sdnc-already-exists=SDNC already exists.
+nfv-sdnc-iui-message-update-success=Update successfully.
+nfv-sdnc-iui-message-update-fail=Update failed.
+nfv-sdnc-iui-message-delete-confirm=Do you want to delete the current sdnc?
+nfv-sdnc-iui-message-delete-success=SDNC deleted successfully.
+nfv-sdnc-iui-message-delete-fail=SDNC deleted failed.
+
+nfv-sdnc-iui-text-update=Modify sdnc info
+nfv-sdnc-iui-text-register=Register sdnc info
+nfv-sdnc-iui-text-name=Name
+nfv-sdnc-iui-text-type=type
+nfv-sdnc-iui-text-version=version
+nfv-sdnc-iui-text-certificateUrl=certificate URL
+nfv-sdnc-iui-text-vendor=Vendor
+nfv-sdnc-iui-text-userName=Username
+nfv-sdnc-iui-text-password=Password
+nfv-sdnc-iui-text_description=Description
+nfv-sdnc-iui-text-cancelBtn=cancel
+nfv-sdnc-iui-text-saveBtn=save
+nfv-sdnc-iui-text-registerBtn=Register
+nfv-sdnc-iui-text-status-normal=Normal
+nfv-sdnc-iui-text-status-fail=Abnormal
+nfv-sdnc-iui-text-total=Total
+nfv-sdnc-iui-text-total-sdnc= of sdnc
+
+nfv-sdnc-iui-validate-name=Please enter a name
+nfv-sdnc-iui-validate-type=Please enter the sdnc type
+nfv-sdnc-iui-validate-version=Please enter version
+nfv-sdnc-iui-validate-vendor=Please enter vendor
+nfv-sdnc-iui-validate-sdnc=Please select a SDNC
+nfv-sdnc-iui-validate-url-required=Please enter the URL
+nfv-sdnc-iui-validate-url=Please enter the right URL
+nfv-sdnc-iui-text-url-tip=Example: http://10.0.0.1
diff --git a/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties
new file mode 100644
index 0000000..df3a227
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties
@@ -0,0 +1,54 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//sdnc
+nfv-sdnc-iui-title=SDNC管理
+nfv-sdnc-iui-message-title=SDNC信息
+nfv-sdnc-iui-message-query-fail=查询SDNC失败。
+nfv-sdnc-iui-message-save-success=保存成功。
+nfv-sdnc-iui-message-save-fail=保存失败。
+nfv-sdnc-iui-message-sdnc-already-exists=SDNC已经存在
+nfv-sdnc-iui-message-update-success=修改成功。
+nfv-sdnc-iui-message-update-fail=修改失败。
+nfv-sdnc-iui-message-delete-confirm=确定删除所选sdnc信息？
+nfv-sdnc-iui-message-delete-success=删除成功
+nfv-sdnc-iui-message-delete-fail=删除失败
+nfv-sdnc-iui-text-update=修改SDNC信息
+nfv-sdnc-iui-text-register=注册SDNC信息
+nfv-sdnc-iui-text-name=名称
+nfv-sdnc-iui-text-type=类型
+nfv-sdnc-iui-text-version=版本
+nfv-sdnc-iui-text-certificateUrl=认证url
+nfv-sdnc-iui-text_description=描述
+nfv-sdnc-iui-text-vendor=厂商
+nfv-sdnc-iui-text-userName=接入用户
+nfv-sdnc-iui-text-password=接入密码
+nfv-sdnc-iui-text-cancelBtn=取消
+nfv-sdnc-iui-text-saveBtn=保存
+nfv-sdnc-iui-text-registerBtn=注册SDNC
+nfv-sdnc-iui-text-status-normal=正常
+nfv-sdnc-iui-text-status-fail=报警
+nfv-sdnc-iui-text-total=共
+nfv-sdnc-iui-text-total-sdnc=SDNC
+
+nfv-sdnc-iui-validate-name=请输入名称
+nfv-sdnc-iui-validate-type=请输入SDNC类型
+nfv-sdnc-iui-validate-version=请输入版本号
+nfv-sdnc-iui-validate-vendor=请输入厂商
+nfv-sdnc-iui-validate-vim=请选择SDNC
+nfv-sdnc-iui-validate-url-required=请输入URL
+nfv-sdnc-iui-validate-url=请输入正确的URL
+nfv-sdnc-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js b/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js
new file mode 100644
index 0000000..44a72f3
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 commonUtil = {};
+commonUtil.arrayRemove = function (aryInstance, index) {
+    if (aryInstance == undefined || aryInstance == null) {
+        return;
+    }
+    for (var i = 0, n = 0; i < aryInstance.length; i++) {
+        if (aryInstance[i] != aryInstance[dx]) {
+            aryInstance[n++] = aryInstance[i];
+        }
+    }
+    aryInstance.length -= 1;
+};
+
+//For the expansion of the Date, convert the Date to specify the format String
+// examples：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function (dateObj, format) {
+    var o = {
+        "M+": dateObj.getMonth() + 1, //month
+        "d+": dateObj.getDate(),    //day
+        "h+": dateObj.getHours(),   //hour
+        "m+": dateObj.getMinutes(), //minute
+        "s+": dateObj.getSeconds(), //second
+        "q+": Math.floor((dateObj.getMonth() + 3) / 3),  //quarter
+        "S": dateObj.getMilliseconds() //millisecond
+    }
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+        (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(format))
+            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
+                ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+};
+
+//tooltip
+commonUtil.showMessage = function (message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;" + $.i18n.prop("nfv-nso-iui-common-tip"),
+        message: message
+    }, {
+        type: type
+    });
+};
+
+commonUtil.registerCometdMessage = function (url, channel, callback) {
+    var cometd = new $.Cometd();
+    var cometdURL = location.protocol + "//" + location.host + url;
+    cometd.configure({
+        url: cometdURL,
+        logLevel: "info"
+    });
+    // unregister websocket transport, use long-polling transport
+    cometd.unregisterTransport('websocket');
+    // store channel object parameters(this object include channel and callback function), start from arguments[1]
+    var _args = arguments;
+
+    cometd.addListener("/meta/handshake", function (handshake) {
+        if (handshake.successful === true) {
+            cometd.batch(function () {
+                //subscribe channel
+                cometd.subscribe(channel, function (message) {
+                    callback.call(this, message.data);
+                });
+            });
+        }
+    });
+    cometd.handshake();
+}
+
+commonUtil.format = function () {
+    if (arguments.length == 0) {
+        return null;
+    }
+    var str = arguments[0];
+    for (var i = 0; i < arguments.length; i++) {
+        var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm");
+        str = str.replace(reg, arguments[i]);
+    }
+    return str;
+}
+
+commonUtil.get = function (url, params, callback) {
+    $.ajax({
+        type: "GET",
+        url: url,
+        //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        dataType: "json",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.post = function (url, params, callback, contentType) {
+    $.ajax({
+        type: "POST",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.delete = function (url, callback, contentType) {
+    $.ajax({
+        type: "DELETE",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        success: callback
+    });
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js
new file mode 100644
index 0000000..45224af
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 loadPropertiesSideMenu(lang, fileNamePrefix, filePath) {
+    jQuery.i18n.properties({
+        language: lang,
+        name: fileNamePrefix,
+        path: filePath,
+        mode: 'map',
+        callback: function () {
+            var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]");
+            for (var i = 0; i < i18nItems.length; i++) {
+                var $item = $(i18nItems.eq(i));
+                var itemId = $item.attr("id_i18n");
+                var itemTitle = $item.attr("title");
+                if (typeof(itemTitle) != "undefined") {
+                    $item.attr("title", $.i18n.prop(itemId));
+                } else {
+                    $item.text($.i18n.prop(itemId));
+                }
+            }
+        }
+    });
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js b/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js
new file mode 100644
index 0000000..7cca638
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 () {
+    var form = $('#vnfm_form');
+    var error = $('.alert-danger', form);
+    var success = $('.alert-success', form);
+
+    form.validate({
+        doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+        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: {
+            name: {
+                required: true,
+                maxlength: 20
+            },
+            type: {
+                required: true,
+                maxlength: 20
+            },
+            version: {
+                required: true,
+                maxlength: 20
+            },
+            vendor: {
+                required: true,
+                maxlength: 20
+            },
+            url: {
+                required: true,
+                url: true
+            }
+        },
+        messages: {
+            name: {
+                required: $.i18n.prop("nfv-ems-iui-validate-name")
+            },
+            type: {
+                required: $.i18n.prop("nfv-ems-iui-validate-type")
+            },
+            version: {
+                required: $.i18n.prop("nfv-ems-iui-validate-version")
+            },
+            vendor: {
+                required: $.i18n.prop("nfv-ems-iui-validate-vendor")
+            },
+            url: {
+                required: $.i18n.prop("nfv-ems-iui-validate-url-required"),
+                url: $.i18n.prop("nfv-ems-iui-validate-url")
+            }
+        },
+        errorPlacement: function (error, element) { // render error placement for each input type
+            error.insertAfter(element); // for other inputs, just perform default behavior
+        },
+        invalidHandler: function (event, validator) { //display error alert on form submit   
+            success.hide();
+            error.show();
+        },
+        highlight: function (element) { // hightlight error inputs
+            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+        },
+        unhighlight: function (element) { // revert the change done by hightlight
+            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
+        },
+        success: function (label) {
+            label.addClass('valid') // mark the current input as valid and display OK icon
+                .closest('.form-group').removeClass('has-error'); // set success class to the control group
+        },
+        submitHandler: function (form) {
+            success.show();
+            error.hide();
+            //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+        }
+    });
+});
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js b/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js
new file mode 100644
index 0000000..ef663b0
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js
@@ -0,0 +1,268 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vm = avalon.define({
+        $id: "emsController",
+        sdncList: [],
+        currentElement: {},
+        currentIndex: 0,
+        $sdncList: [],
+        $newElement: {
+            "sdnControllerId":"a6c42529-cd6",
+            "name":"sdnc1",
+            "status": "active",
+            "url":"",
+            "userName":"admin",
+            "password":"admin",
+            "version":"v1.0",
+            "vendor":"ZTE",
+            "description":"",
+            "protocol":"netconf",
+            "productName":"",
+            "type":"WAN"
+        },
+        vimSelectItems: [],
+        saveType: "add",
+        server_rtn: {
+            info_block: false,
+            warning_block: false,
+            rtn_info: "",
+            $RTN_SUCCESS: "RTN_SUCCESS",
+            $RTN_FAILED: "RTN_FAILED"
+        },
+        modalTitle: $.i18n.prop("nfv-sdnc-iui-text-register"),
+        urlTip: "",
+        currentStep: 1,
+        status: {
+            success: "active",
+            failed: "inactive"
+        },
+        $format: {
+            "ipv4": /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
+            "port": /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
+            "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
+        },
+        $restUrl: {
+            queryEmsInfoUrl: "/esrui/extsys/sdncontroller/mock-data/sdnc.json",//'/onapapi/aai/esr/v1/ems',
+            addVnfmInfoUrl: '/onapapi/aai/esr/v1/ems',
+            updateVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/',
+            delVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/',
+            queryMocUrl: '',
+            queryVimUrl: '/onapapi/aai/esr/v1/vims'
+        },
+        $htmlText: {
+            saveSuccess: $.i18n.prop("nfv-sdnc-iui-message-save-success"),
+            saveFail: $.i18n.prop("nfv-sdnc-iui-message-save-fail"),
+            alreadyExist: $.i18n.prop("nfv-sdnc-iui-message-ems-already-exists"),
+            updateSuccess: $.i18n.prop("nfv-sdnc-iui-message-update-success"),
+            updateFail: $.i18n.prop("nfv-sdnc-iui-message-update-fail")
+        },
+        $initTable: function () {
+            $.ajax({
+                "type": 'GET',
+                "url": vm.$restUrl.queryEmsInfoUrl,
+                "dataType": "json",
+                "success": function (resp) {
+                    vm.sdncList = resp;
+                    vm.$sdncList = $.extend(true, [], resp) ;
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    bootbox.alert($.i18n.prop("nfv-sdnc-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown);
+                    return;
+                },
+                complete: function () {
+                    $("[data-toggle='tooltip']").tooltip();
+                }
+            });
+        },
+       $registerSDNC: function () {
+            vm.currentIndex = -1;
+            vm.currentElement = $.extend(true, {}, vm.$newElement);
+            vm.saveType = "add";
+            vm.modalTitle = $.i18n.prop("nfv-sdnc-iui-text-register");
+            vm.$showTable();
+        },
+        $showTable: function () {
+            $(".form-group").removeClass('has-success').removeClass('has-error');
+            $("#addEmsDlg").modal("show");
+        },
+        dismiss: function () {
+            if(vm.currentIndex !== -1){
+                vm.currentElement.name = vm.$sdncList[vm.currentIndex].name;
+            }
+            $("#addEmsDlg").modal("hide");
+        },
+        $saveSDNC: function () {
+            var form = $('#vnfm_form');
+            if(!vm.validate()){
+                return;
+            }
+            vm.server_rtn.info_block = true;
+            vm.server_rtn.warning_block = false;
+
+            //save VIM info
+            var res = false;
+            if (vm.saveType == "add") {
+                res = vm.postSDNC();
+            } else {
+                res = vm.putSDNC();
+            }
+            if(res){
+                $("#addEmsDlg").modal("hide");
+            }
+        },
+        updateSDNC: function (index) {
+            vm.saveType = "update";
+            vm.currentIndex = index;
+            vm.fillElement(vm.sdncList[vm.currentIndex], vm.currentElement)
+            vm.$showTable();
+        },
+        validate: function () {
+            var res = true;
+            var sdncSave = vm.getSDNCSave();
+           var url = sdncSave.url;
+            if(!vm.$format.url.test(url)){
+                $("#form_sdnc input[name='url']").next().html("The url format is incorrect");
+                res = res && false;
+            } else {
+                $("#form_sdnc input[name='url']").next().html("");
+            }
+            return res;
+        },
+        delSDNC: function (id, index) {
+            bootbox.confirm($.i18n.prop("nfv-sdnc-iui-message-delete-confirm"), function (result) {
+                if (result) {
+                    vm.sdncList.splice(index, 1);
+                    vm.$sdncList.splice(index, 1);
+                    console.log(vm.sdncList[index]);
+                   /* $.ajax({
+                        type: "DELETE",
+                        url: vm.$restUrl.delVnfmInfoUrl + id,
+                        dataType: "json",
+                        success: function (data, statusText, jqXHR) {
+                            if (jqXHR.status == "204") {
+
+                                commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-success"), "success");
+                            } else {
+                                commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-fail"), "warning");
+                            }
+                        },
+                        error: function () {
+                            commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-fail"), "warning");
+                        }
+                    });*/
+                }
+            });
+        },
+        postSDNC: function () {
+            var emsSave = vm.getSDNCSave();
+            emsSave.sdnControllerId = Math.floor(Math.random() * 100000) / 100000;
+            vm.sdncList.push(emsSave);
+            vm.$sdncList.push(emsSave);
+            console.log(emsSave);
+            return true;
+            /*$.ajax({
+                type: "POST",
+                url: vm.$restUrl.addVnfmInfoUrl,
+                data: JSON.stringify(vm.currentElement),
+                dataType: "json",
+                contentType: "application/json",
+                success: function (data) {
+                    vm.server_rtn.info_block = false;
+                    vm.server_rtn.warning_block = false;
+                    if (data) {
+                        vm.vnfmInfo = [];
+                        vm.$initTable();
+
+                        $('#addEmsDlg').modal('hide');
+                        commonUtil.showMessage(vm.$htmlText.saveSuccess, "success");
+                    } else {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = vm.$htmlText.saveFail;
+                        commonUtil.showMessage(vm.$htmlText.saveFail, "failed");
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.server_rtn.warning_block = true;
+                    vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                    vm.server_rtn.info_block = false;
+                }
+            });*/
+        },
+        putSDNC: function () {
+            console.log(vm.getSDNCSave());
+            vm.fillElement(vm.currentElement, vm.sdncList[vm.currentIndex]);
+            return true;
+           /* $.ajax({
+                type: "PUT",
+                url: vm.$restUrl.updateVnfmInfoUrl + vm.currentElement.emsId,
+                data: JSON.stringify(vm.currentElement),
+                dataType: "json",
+                contentType: "application/json",
+                success: function (data) {
+                    vm.server_rtn.info_block = false;
+                    vm.server_rtn.warning_block = false;
+                    if (data) {
+                        for (var i = 0; i < vm.vnfmInfo.length; i++) {
+                            if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) {
+                                vm.vnfmInfo[i].name = vm.addVnfm.name;
+                                vm.vnfmInfo[i].vimId = $("#vimId").val();
+                                vm.vnfmInfo[i].vendor = vm.addVnfm.vendor;
+                                vm.vnfmInfo[i].version = vm.addVnfm.version;
+                                vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl;
+                                vm.vnfmInfo[i].description = vm.addVnfm.description;
+                                vm.vnfmInfo[i].url = vm.addVnfm.url;
+                                vm.vnfmInfo[i].userName = vm.addVnfm.userName;
+                                vm.vnfmInfo[i].password = vm.addVnfm.password;
+                            }
+                        }
+                        $('#addEmsDlg').modal('hide');
+                        commonUtil.showMessage(vm.$htmlText.updateSuccess, "success");
+                    } else {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = vm.$htmlText.updateFail;
+                        commonUtil.showMessage(vm.$htmlText.updateFail, "failed");
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.server_rtn.warning_block = true;
+                    vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                    vm.server_rtn.info_block = false;
+                }
+            });*/
+        },
+        fillElement: function (sourceElement, targetElement) {
+            targetElement["sdnControllerId"] = sourceElement["sdnControllerId"];
+            targetElement["name"] = sourceElement["name"];
+            targetElement["status"] = sourceElement["status"];
+            targetElement["url"] = sourceElement["url"];
+            targetElement["userName"] = sourceElement["userName"];
+            targetElement["password"] = sourceElement["password"];
+            targetElement["version"] = sourceElement["version"];
+            targetElement["vendor"] = sourceElement["vendor"];
+            targetElement["description"] = sourceElement["description"];
+            targetElement["protocol"] = sourceElement["protocol"];
+            targetElement["productName"] = sourceElement["productName"];
+            targetElement["type"] = sourceElement["type"];
+        },
+        getSDNCSave: function () {
+            var emsSave = $.extend(true, {}, vm.currentElement.$model);
+            return emsSave;
+        }
+    });
+vm.currentElement = $.extend(true, {}, vm.$newElement);
+avalon.scan();
+vm.$initTable();
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json b/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json
new file mode 100644
index 0000000..d432191
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json
@@ -0,0 +1,30 @@
+[

+  {

+    "sdnControllerId":"a6c42529-cd6b-4c01-b149-03eb54b20a03",

+    "name":"sdnc1",

+    "status": "active",

+    "url":"http://10.74.151.13:8181",

+    "userName":"admin",

+    "password":"admin",

+    "version":"v1.0",

+    "vendor":"ZTE",

+    "description":"",

+    "protocol":"netconf",

+    "productName":"",

+    "type":"WAN"

+  },

+  {

+    "sdnControllerId":"a6c42529-cd6b-4c01-b149-03eb54b20a04",

+    "name":"sdnc2",

+    "status": "inactive",

+    "url":"http://10.74.151.13:8181",

+    "userName":"admin",

+    "password":"admin",

+    "version":"v1.0",

+    "vendor":"ZTE",

+    "description":"",

+    "protocol":"netconf",

+    "productName":"",

+    "type":"WAN"

+  }

+]
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/sdncontroller/sdncView.html b/portal/src/main/webapp/extsys/sdncontroller/sdncView.html
new file mode 100644
index 0000000..6bcb68f
--- /dev/null
+++ b/portal/src/main/webapp/extsys/sdncontroller/sdncView.html
@@ -0,0 +1,208 @@
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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 lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/>
+    <link href="css/animate.min.css" rel="stylesheet"/>
+    <link href="css/sdnc.css" rel="stylesheet"/>
+    <style> .ms-controller {  visibility: hidden } </style>
+</head>
+<body>
+<div ms-controller="emsController" class="container-fluid ms-controller">
+    <div id="addEmsDlg" class="modal fade" tabindex="-1" role="dialog"
+         aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content Changepasswd">
+                <div class="content">
+                    <div class="modal-header">
+                        <h4 id="myModalLabel">{{modalTitle}}</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div class="step-content">
+                            <form class="form-horizontal" role="form" id="form_sdnc">
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Name</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.name" name="name" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Url</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.url" name="url" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Username</span>
+                                        <span class="required" aria-required="true">*</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input type="text" ms-duplex="currentElement.userName" name="userName" class="form-control"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Password</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                    <input type="password" class="form-control" rows="3" ms-duplex="currentElement.password"  name="password"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Version</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                        <input class="form-control" rows="3" ms-duplex="currentElement.version" name="version"/>
+                                        <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Vendor</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                         <input class="form-control" rows="3" ms-duplex="currentElement.vendor" name="vendor"/>
+                                         <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Protocol</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                         <input class="form-control" rows="3" ms-duplex="currentElement.protocol" name="protocol"/>
+                                         <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>ProductName</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                         <input class="form-control" rows="3" ms-duplex="currentElement.productName" name="productName"/>
+                                         <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Type</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                         <input class="form-control" rows="3" ms-duplex="currentElement.type" name="type"/>
+                                         <span class="help-block"></span>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="control-label col-sm-3">
+                                        <span>Description</span>
+                                    </label>
+                                    <div class="col-sm-7">
+                                         <input class="form-control" rows="3" ms-duplex="currentElement.description" name="description"/>
+                                         <span class="help-block"></span>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-primary" id="btnSave" ms-click="$saveSDNC" id_i18n="nfv-sdnc-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                        <button class="btn" id="btnCancel" ms-click="dismiss" aria-hidden="true" id_i18n="nfv-sdnc-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row-fluid" data-name="cond_zone">
+        <div class="col-md-12">
+            <button class="btn white radius_l" id="app-new-btn" ms-click="$registerSDNC">
+                <i class="ict-new"></i> <span id_i18n="nfv-sdnc-iui-text-registerBtn"  name_i18n="com_zte_nfv_nsoc_i18n"></span>
+            </button>
+        </div>
+    </div>
+
+    <div class="col-sm-12 vnfm-padding" ms-each-el="sdncList">
+        <div class="col-sm-3 animated-panel zoomIn">
+            <div class="hpanel stats">
+                <div class="panel-body h-200" ms-hover="hpanel_show">
+                    <div class="pull-left">
+                        <span class="label label-success" ms-if="el.status == status.success" id_i18n="nfv-sdnc-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                        <span class="label label-danger" ms-if="el.status == status.failed" ms-attr-title="el.errorInfo" data-toggle="tooltip" id_i18n="nfv-sdnc-iui-text-status-fail" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                    </div>
+                    <div class="stats-icon pull-right">
+                        <i class="fa fa-server  fa-5x color_cloud"></i>
+                    </div>
+                    <div class="m-t-xl">
+                        <h3 ms-text="el.name"></h3>
+                        <!--<div class="card-name"><span ms-text="el.emsName"></span></div>-->
+                    </div>
+                </div>
+                <div class="panel-footer">
+                    <div class="pull-right">
+                        <a class="btn btn-default btn-sm" ms-click="updateSDNC($index)"><i class="fa fa-pencil-square-o fa-lg"></i></a>
+                        <a class="btn btn-default btn-sm" ms-click="delSDNC(el.emsId, $index)"><i class="fa fa-trash-o fa-lg"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12">
+        <div class="pull-left text-muted">
+            <small><span id_i18n="nfv-sdnc-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" ms-text="sdncList.size()"></span>
+                <span id_i18n="nfv-sdnc-iui-text-total-sdnc" name_i18n="com_zte_nfv_nsoc_i18n"></span></small>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>
+<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>-->
+<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>-->
+<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
+
+<script type="text/javascript" src="js/commonUtil.js"></script>
+<script type="text/javascript" src="js/loadi18n_nsoc.js"></script>
+
+<script type="text/javascript" src="js/sdnc-validate.js"></script>
+<script type="text/javascript" src="js/sdncController.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/css/bootstrap.css b/portal/src/main/webapp/extsys/vim/css/bootstrap.css
new file mode 100644
index 0000000..236640f
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/css/bootstrap.css
@@ -0,0 +1,4966 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+    display: block;
+}
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+audio:not([controls]) {
+    display: none;
+}
+
+html {
+    font-size: 100%;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+a:hover,
+a:active {
+    outline: 0;
+}
+
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle;
+}
+
+button,
+input {
+    *overflow: visible;
+    line-height: normal;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+
+input[type="search"] {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+.clearfix {
+    *zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: "";
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.hide-text {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}
+
+.input-block-level {
+    display: block;
+    width: 100%;
+    min-height: 28px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+a {
+    color: #0088cc;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #005580;
+    text-decoration: underline;
+}
+
+.row {
+    margin-left: -20px;
+    *zoom: 1;
+}
+
+.row:before,
+.row:after {
+    display: table;
+    content: "";
+}
+
+.row:after {
+    clear: both;
+}
+
+[class*="span"] {
+    float: left;
+    margin-left: 20px;
+}
+
+.container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+    width: 940px;
+}
+
+.span12 {
+    width: 940px;
+}
+
+.span11 {
+    width: 860px;
+}
+
+.span10 {
+    width: 780px;
+}
+
+.span9 {
+    width: 700px;
+}
+
+.span8 {
+    width: 620px;
+}
+
+.span7 {
+    width: 540px;
+}
+
+.span6 {
+    width: 460px;
+}
+
+.span5 {
+    width: 380px;
+}
+
+.span4 {
+    width: 300px;
+}
+
+.span3 {
+    width: 220px;
+}
+
+.span2 {
+    width: 140px;
+}
+
+.span1 {
+    width: 60px;
+}
+
+.offset12 {
+    margin-left: 980px;
+}
+
+.offset11 {
+    margin-left: 900px;
+}
+
+.offset10 {
+    margin-left: 820px;
+}
+
+.offset9 {
+    margin-left: 740px;
+}
+
+.offset8 {
+    margin-left: 660px;
+}
+
+.offset7 {
+    margin-left: 580px;
+}
+
+.offset6 {
+    margin-left: 500px;
+}
+
+.offset5 {
+    margin-left: 420px;
+}
+
+.offset4 {
+    margin-left: 340px;
+}
+
+.offset3 {
+
+    margin-left: 260px;
+}
+
+.offset2 {
+    margin-left: 180px;
+}
+
+.offset1 {
+    margin-left: 100px;
+}
+
+.row-fluid {
+    width: 100%;
+    *zoom: 1;
+}
+
+.row-fluid:before,
+.row-fluid:after {
+    display: table;
+    content: "";
+}
+
+.row-fluid:after {
+    clear: both;
+}
+
+.row-fluid [class*="span"] {
+    display: block;
+    float: left;
+    width: 100%;
+    min-height: 28px;
+    margin-left: 2.127659574%;
+    *margin-left: 2.0744680846382977%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.row-fluid [class*="span"]:first-child {
+    margin-left: 0;
+}
+
+.row-fluid .span12 {
+    width: 99.99999998999999%;
+    *width: 99.94680850063828%;
+}
+
+.row-fluid .span11 {
+    width: 91.489361693%;
+    *width: 91.4361702036383%;
+}
+
+.row-fluid .span10 {
+    width: 82.97872339599999%;
+    *width: 82.92553190663828%;
+}
+
+.row-fluid .span9 {
+    width: 74.468085099%;
+    *width: 74.4148936096383%;
+}
+
+.row-fluid .span8 {
+    width: 65.95744680199999%;
+    *width: 65.90425531263828%;
+}
+
+.row-fluid .span7 {
+    width: 57.446808505%;
+    *width: 57.3936170156383%;
+}
+
+.row-fluid .span6 {
+    width: 48.93617020799999%;
+    *width: 48.88297871863829%;
+}
+
+.row-fluid .span5 {
+    width: 40.425531911%;
+    *width: 40.3723404216383%;
+}
+
+.row-fluid .span4 {
+    width: 31.914893614%;
+    *width: 31.8617021246383%;
+}
+
+.row-fluid .span3 {
+    width: 23.404255317%;
+    *width: 23.3510638276383%;
+}
+
+.row-fluid .span2 {
+    width: 14.89361702%;
+    *width: 14.8404255306383%;
+}
+
+.row-fluid .span1 {
+    width: 6.382978723%;
+    *width: 6.329787233638298%;
+}
+
+.container {
+    margin-right: auto;
+    margin-left: auto;
+    *zoom: 1;
+}
+
+.container:before,
+.container:after {
+    display: table;
+    content: "";
+}
+
+.container:after {
+    clear: both;
+}
+
+.container-fluid {
+    padding-right: 20px;
+    padding-left: 20px;
+    *zoom: 1;
+}
+
+.container-fluid:before,
+.container-fluid:after {
+    display: table;
+    content: "";
+}
+
+.container-fluid:after {
+    clear: both;
+}
+
+p {
+    margin: 0 0 9px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+p small {
+    font-size: 11px;
+    color: #999999;
+}
+
+.lead {
+    margin-bottom: 18px;
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 27px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    font-family: inherit;
+    font-weight: bold;
+    color: inherit;
+    text-rendering: optimizelegibility;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+    font-weight: normal;
+    color: #999999;
+}
+
+h1 {
+    font-size: 30px;
+    line-height: 36px;
+}
+
+h1 small {
+    font-size: 18px;
+}
+
+h2 {
+    font-size: 24px;
+    line-height: 36px;
+}
+
+h2 small {
+    font-size: 18px;
+}
+
+h3 {
+    font-size: 18px;
+    line-height: 27px;
+}
+
+h3 small {
+    font-size: 14px;
+}
+
+h4,
+h5,
+h6 {
+    line-height: 18px;
+}
+
+h4 {
+    font-size: 14px;
+}
+
+h4 small {
+    font-size: 12px;
+}
+
+h5 {
+    font-size: 12px;
+}
+
+h6 {
+    font-size: 11px;
+    color: #999999;
+    text-transform: uppercase;
+}
+
+.page-header {
+    padding-bottom: 17px;
+    margin: 18px 0;
+    border-bottom: 1px solid #eeeeee;
+}
+
+.page-header h1 {
+    line-height: 1;
+}
+
+ul,
+ol {
+    padding: 0;
+    margin: 0 0 9px 25px;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+    margin-bottom: 0;
+}
+
+ul {
+    list-style: disc;
+}
+
+ol {
+    list-style: decimal;
+}
+
+li {
+    line-height: 18px;
+}
+
+ul.unstyled,
+ol.unstyled {
+    margin-left: 0;
+    list-style: none;
+}
+
+dl {
+    margin-bottom: 18px;
+}
+
+dt,
+dd {
+    line-height: 18px;
+}
+
+dt {
+    font-weight: bold;
+    line-height: 17px;
+}
+
+dd {
+    margin-left: 9px;
+}
+
+.dl-horizontal dt {
+    float: left;
+    width: 120px;
+    overflow: hidden;
+    clear: left;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dl-horizontal dd {
+    margin-left: 130px;
+}
+
+hr {
+    margin: 18px 0;
+    border: 0;
+    border-top: 1px solid #eeeeee;
+    border-bottom: 1px solid #ffffff;
+}
+
+strong {
+    font-weight: bold;
+}
+
+em {
+    font-style: italic;
+}
+
+.muted {
+    color: #999999;
+}
+
+abbr[title] {
+    cursor: help;
+    border-bottom: 1px dotted #ddd;
+}
+
+abbr.initialism {
+    font-size: 90%;
+    text-transform: uppercase;
+}
+
+blockquote {
+    padding: 0 0 0 15px;
+    margin: 0 0 18px;
+    border-left: 5px solid #eeeeee;
+}
+
+blockquote p {
+    margin-bottom: 0;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 22.5px;
+}
+
+blockquote small {
+    display: block;
+    line-height: 18px;
+    color: #999999;
+}
+
+blockquote small:before {
+    content: '\2014 \00A0';
+}
+
+blockquote.pull-right {
+    float: right;
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid #eeeeee;
+    border-left: 0;
+}
+
+blockquote.pull-right p,
+blockquote.pull-right small {
+    text-align: right;
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+    content: "";
+}
+
+address {
+    display: block;
+    margin-bottom: 18px;
+    font-style: normal;
+    line-height: 18px;
+}
+
+small {
+    font-size: 100%;
+}
+
+cite {
+    font-style: normal;
+}
+
+code,
+pre {
+    padding: 0 3px 2px;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 12px;
+    color: #333333;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+code {
+    padding: 2px 4px;
+    color: #d14;
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+}
+
+pre {
+    display: block;
+    padding: 8.5px;
+    margin: 0 0 9px;
+    font-size: 12.025px;
+    line-height: 18px;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+pre.prettyprint {
+    margin-bottom: 18px;
+}
+
+pre code {
+    padding: 0;
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+}
+
+.pre-scrollable {
+    max-height: 340px;
+    overflow-y: scroll;
+}
+
+form {
+    margin: 0 0 18px;
+}
+
+fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+legend {
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 27px;
+    font-size: 19.5px;
+    line-height: 36px;
+    color: #333333;
+    border: 0;
+    border-bottom: 1px solid #eee;
+}
+
+legend small {
+    font-size: 13.5px;
+    color: #999999;
+}
+
+label,
+input,
+button,
+select,
+textarea {
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 18px;
+}
+
+input,
+button,
+select,
+textarea {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    color: #333333;
+}
+
+input,
+textarea,
+select,
+.uneditable-input {
+    display: inline-block;
+    width: 210px;
+    height: 18px;
+    padding: 4px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    line-height: 18px;
+    color: #555555;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+.uneditable-textarea {
+    width: auto;
+    height: auto;
+}
+
+label input,
+label textarea,
+label select {
+    display: block;
+}
+
+input[type="image"],
+input[type="checkbox"],
+input[type="radio"] {
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 3px 0;
+    *margin-top: 0;
+    /* IE7 */
+
+    line-height: normal;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0 \9;
+    /* IE9 and down */
+
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+input[type="image"] {
+    border: 0;
+}
+
+input[type="file"] {
+    width: auto;
+    padding: initial;
+    line-height: initial;
+    background-color: #ffffff;
+    background-color: initial;
+    border: initial;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    width: auto;
+    height: auto;
+}
+
+select,
+input[type="file"] {
+    height: 28px;
+    /* In IE7, the height of the select element cannot be changed by height, only font-size */
+
+    *margin-top: 4px;
+    /* For IE7, add top margin to align select with labels */
+
+    line-height: 28px;
+}
+
+input[type="file"] {
+    line-height: 18px \9;
+}
+
+select {
+    width: 220px;
+    background-color: #ffffff;
+}
+
+select[multiple],
+select[size] {
+    height: auto;
+}
+
+input[type="image"] {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+textarea {
+    height: auto;
+}
+
+input[type="hidden"] {
+    display: none;
+}
+
+.radio,
+.checkbox {
+    min-height: 18px;
+    padding-left: 18px;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+    float: left;
+    margin-left: -18px;
+}
+
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+    padding-top: 5px;
+}
+
+.radio.inline,
+.checkbox.inline {
+    display: inline-block;
+    padding-top: 5px;
+    margin-bottom: 0;
+    vertical-align: middle;
+}
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+    margin-left: 10px;
+}
+
+input,
+textarea {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+input:focus,
+textarea:focus {
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    outline: thin dotted \9;
+    /* IE6-9 */
+
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+.input-mini {
+    width: 60px;
+}
+
+.input-small {
+    width: 90px;
+}
+
+.input-medium {
+    width: 150px;
+}
+
+.input-large {
+    width: 210px;
+}
+
+.input-xlarge {
+    width: 270px;
+}
+
+.input-xxlarge {
+    width: 530px;
+}
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
+    float: none;
+    margin-left: 0;
+}
+
+input,
+textarea,
+.uneditable-input {
+    margin-left: 0;
+}
+
+input.span12,
+textarea.span12,
+.uneditable-input.span12 {
+    width: 930px;
+}
+
+input.span11,
+textarea.span11,
+.uneditable-input.span11 {
+    width: 850px;
+}
+
+input.span10,
+textarea.span10,
+.uneditable-input.span10 {
+    width: 770px;
+}
+
+input.span9,
+textarea.span9,
+.uneditable-input.span9 {
+    width: 690px;
+}
+
+input.span8,
+textarea.span8,
+.uneditable-input.span8 {
+    width: 610px;
+}
+
+input.span7,
+textarea.span7,
+.uneditable-input.span7 {
+    width: 530px;
+}
+
+input.span6,
+textarea.span6,
+.uneditable-input.span6 {
+    width: 450px;
+}
+
+input.span5,
+textarea.span5,
+.uneditable-input.span5 {
+    width: 370px;
+}
+
+input.span4,
+textarea.span4,
+.uneditable-input.span4 {
+    width: 290px;
+}
+
+input.span3,
+textarea.span3,
+.uneditable-input.span3 {
+    width: 210px;
+}
+
+input.span2,
+textarea.span2,
+.uneditable-input.span2 {
+    width: 130px;
+}
+
+input.span1,
+textarea.span1,
+.uneditable-input.span1 {
+    width: 50px;
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+    cursor: not-allowed;
+    background-color: #eeeeee;
+    border-color: #ddd;
+}
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+    background-color: transparent;
+}
+
+.control-group.warning > label,
+.control-group.warning .help-block,
+.control-group.warning .help-inline {
+    color: #c09853;
+}
+
+.control-group.warning input,
+.control-group.warning select,
+.control-group.warning textarea {
+    color: #c09853;
+    border-color: #c09853;
+}
+
+.control-group.warning input:focus,
+.control-group.warning select:focus,
+.control-group.warning textarea:focus {
+    border-color: #a47e3c;
+    -webkit-box-shadow: 0 0 6px #dbc59e;
+    -moz-box-shadow: 0 0 6px #dbc59e;
+    box-shadow: 0 0 6px #dbc59e;
+}
+
+.control-group.warning .input-prepend .add-on,
+.control-group.warning .input-append .add-on {
+    color: #c09853;
+    background-color: #fcf8e3;
+    border-color: #c09853;
+}
+
+.control-group.error > label,
+.control-group.error .help-block,
+.control-group.error .help-inline {
+    color: #b94a48;
+}
+
+.control-group.error input,
+.control-group.error select,
+.control-group.error textarea {
+    color: #b94a48;
+    border-color: #b94a48;
+}
+
+.control-group.error input:focus,
+.control-group.error select:focus,
+.control-group.error textarea:focus {
+    border-color: #953b39;
+    -webkit-box-shadow: 0 0 6px #d59392;
+    -moz-box-shadow: 0 0 6px #d59392;
+    box-shadow: 0 0 6px #d59392;
+}
+
+.control-group.error .input-prepend .add-on,
+.control-group.error .input-append .add-on {
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #b94a48;
+}
+
+.control-group.success > label,
+.control-group.success .help-block,
+.control-group.success .help-inline {
+    color: #468847;
+}
+
+.control-group.success input,
+.control-group.success select,
+.control-group.success textarea {
+    color: #468847;
+    border-color: #468847;
+}
+
+.control-group.success input:focus,
+.control-group.success select:focus,
+.control-group.success textarea:focus {
+    border-color: #356635;
+    -webkit-box-shadow: 0 0 6px #7aba7b;
+    -moz-box-shadow: 0 0 6px #7aba7b;
+    box-shadow: 0 0 6px #7aba7b;
+}
+
+.control-group.success .input-prepend .add-on,
+.control-group.success .input-append .add-on {
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #468847;
+}
+
+input:focus:required:invalid,
+textarea:focus:required:invalid,
+select:focus:required:invalid {
+    color: #b94a48;
+    border-color: #ee5f5b;
+}
+
+input:focus:required:invalid:focus,
+textarea:focus:required:invalid:focus,
+select:focus:required:invalid:focus {
+    border-color: #e9322d;
+    -webkit-box-shadow: 0 0 6px #f8b9b7;
+    -moz-box-shadow: 0 0 6px #f8b9b7;
+    box-shadow: 0 0 6px #f8b9b7;
+}
+
+.form-actions {
+    padding: 17px 20px 18px;
+    margin-top: 18px;
+    margin-bottom: 18px;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+    *zoom: 1;
+}
+
+.form-actions:before,
+.form-actions:after {
+    display: table;
+    content: "";
+}
+
+.form-actions:after {
+    clear: both;
+}
+
+.uneditable-input {
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: not-allowed;
+    background-color: #ffffff;
+    border-color: #eee;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+}
+
+:-moz-placeholder {
+    color: #999999;
+}
+
+::-webkit-input-placeholder {
+    color: #999999;
+}
+
+.help-block,
+.help-inline {
+    color: #555555;
+}
+
+.help-block {
+    display: block;
+    margin-bottom: 9px;
+}
+
+.help-inline {
+    display: inline-block;
+    *display: inline;
+    padding-left: 5px;
+    vertical-align: middle;
+    *zoom: 1;
+}
+
+.input-prepend,
+.input-append {
+    margin-bottom: 5px;
+}
+
+.input-prepend input,
+.input-append input,
+.input-prepend select,
+.input-append select,
+.input-prepend .uneditable-input,
+.input-append .uneditable-input {
+    position: relative;
+    margin-bottom: 0;
+    *margin-left: 0;
+    vertical-align: middle;
+    -webkit-border-radius: 0 3px 3px 0;
+    -moz-border-radius: 0 3px 3px 0;
+    border-radius: 0 3px 3px 0;
+}
+
+.input-prepend input:focus,
+.input-append input:focus,
+.input-prepend select:focus,
+.input-append select:focus,
+.input-prepend .uneditable-input:focus,
+.input-append .uneditable-input:focus {
+    z-index: 2;
+}
+
+.input-prepend .uneditable-input,
+.input-append .uneditable-input {
+    border-left-color: #ccc;
+}
+
+.input-prepend .add-on,
+.input-append .add-on {
+    display: inline-block;
+    width: auto;
+    height: 18px;
+    min-width: 16px;
+    padding: 4px 5px;
+    font-weight: normal;
+    line-height: 18px;
+    text-align: center;
+    text-shadow: 0 1px 0 #ffffff;
+    vertical-align: middle;
+    background-color: #eeeeee;
+    border: 1px solid #ccc;
+}
+
+.input-prepend .add-on,
+.input-append .add-on,
+.input-prepend .btn,
+.input-append .btn {
+    margin-left: -1px;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.input-prepend .active,
+.input-append .active {
+    background-color: #a9dba9;
+    border-color: #46a546;
+}
+
+.input-prepend .add-on,
+.input-prepend .btn {
+    margin-right: -1px;
+}
+
+.input-prepend .add-on:first-child,
+.input-prepend .btn:first-child {
+    -webkit-border-radius: 3px 0 0 3px;
+    -moz-border-radius: 3px 0 0 3px;
+    border-radius: 3px 0 0 3px;
+}
+
+.input-append input,
+.input-append select,
+.input-append .uneditable-input {
+    -webkit-border-radius: 3px 0 0 3px;
+    -moz-border-radius: 3px 0 0 3px;
+    border-radius: 3px 0 0 3px;
+}
+
+.input-append .uneditable-input {
+    border-right-color: #ccc;
+    border-left-color: #eee;
+}
+
+.input-append .add-on:last-child,
+.input-append .btn:last-child {
+    -webkit-border-radius: 0 3px 3px 0;
+    -moz-border-radius: 0 3px 3px 0;
+    border-radius: 0 3px 3px 0;
+}
+
+.input-prepend.input-append input,
+.input-prepend.input-append select,
+.input-prepend.input-append .uneditable-input {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.input-prepend.input-append .add-on:first-child,
+.input-prepend.input-append .btn:first-child {
+    margin-right: -1px;
+    -webkit-border-radius: 3px 0 0 3px;
+    -moz-border-radius: 3px 0 0 3px;
+    border-radius: 3px 0 0 3px;
+}
+
+.input-prepend.input-append .add-on:last-child,
+.input-prepend.input-append .btn:last-child {
+    margin-left: -1px;
+    -webkit-border-radius: 0 3px 3px 0;
+    -moz-border-radius: 0 3px 3px 0;
+    border-radius: 0 3px 3px 0;
+}
+
+.search-query {
+    padding-right: 14px;
+    padding-right: 4px \9;
+    padding-left: 14px;
+    padding-left: 4px \9;
+    /* IE7-8 doesn't have border-radius, so don't indent the padding */
+
+    margin-bottom: 0;
+    -webkit-border-radius: 14px;
+    -moz-border-radius: 14px;
+    border-radius: 14px;
+}
+
+.form-search input,
+.form-inline input,
+.form-horizontal input,
+.form-search textarea,
+.form-inline textarea,
+.form-horizontal textarea,
+.form-search select,
+.form-inline select,
+.form-horizontal select,
+.form-search .help-inline,
+.form-inline .help-inline,
+.form-horizontal .help-inline,
+.form-search .uneditable-input,
+.form-inline .uneditable-input,
+.form-horizontal .uneditable-input,
+.form-search .input-prepend,
+.form-inline .input-prepend,
+.form-horizontal .input-prepend,
+.form-search .input-append,
+.form-inline .input-append,
+.form-horizontal .input-append {
+    display: inline-block;
+    *display: inline;
+    margin-bottom: 0;
+    *zoom: 1;
+}
+
+.form-search .hide,
+.form-inline .hide,
+.form-horizontal .hide {
+    display: none;
+}
+
+.form-search label,
+.form-inline label {
+    display: inline-block;
+}
+
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend {
+    margin-bottom: 0;
+}
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio,
+.form-inline .checkbox {
+    padding-left: 0;
+    margin-bottom: 0;
+    vertical-align: middle;
+}
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+    float: left;
+    margin-right: 3px;
+    margin-left: 0;
+}
+
+.control-group {
+    margin-bottom: 9px;
+}
+
+legend + .control-group {
+    margin-top: 18px;
+    -webkit-margin-top-collapse: separate;
+}
+
+.form-horizontal .control-group {
+    margin-bottom: 18px;
+    *zoom: 1;
+}
+
+.form-horizontal .control-group:before,
+.form-horizontal .control-group:after {
+    display: table;
+    content: "";
+}
+
+.form-horizontal .control-group:after {
+    clear: both;
+}
+
+.form-horizontal .control-label {
+    float: left;
+    width: 140px;
+    padding-top: 5px;
+    text-align: right;
+}
+
+.form-horizontal .controls {
+    *display: inline-block;
+    *padding-left: 20px;
+    margin-left: 160px;
+    *margin-left: 0;
+}
+
+.form-horizontal .controls:first-child {
+    *padding-left: 160px;
+}
+
+.form-horizontal .help-block {
+    margin-top: 9px;
+    margin-bottom: 0;
+}
+
+.form-horizontal .form-actions {
+    padding-left: 160px;
+}
+
+table {
+    max-width: 100%;
+    background-color: transparent;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table {
+    width: 100%;
+    margin-bottom: 18px;
+}
+
+.table th,
+.table td {
+    padding: 8px;
+    line-height: 18px;
+    text-align: left;
+    vertical-align: top;
+    border-top: 1px solid #dddddd;
+}
+
+.table th {
+    font-weight: bold;
+}
+
+.table thead th {
+    vertical-align: bottom;
+}
+
+.table caption + thead tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child th,
+.table colgroup + thead tr:first-child td,
+.table thead:first-child tr:first-child th,
+.table thead:first-child tr:first-child td {
+    border-top: 0;
+}
+
+.table tbody + tbody {
+    border-top: 2px solid #dddddd;
+}
+
+.table-condensed th,
+.table-condensed td {
+    padding: 4px 5px;
+}
+
+.table-bordered {
+    border: 1px solid #dddddd;
+    border-collapse: separate;
+    *border-collapse: collapsed;
+    border-left: 0;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.table-bordered th,
+.table-bordered td {
+    border-left: 1px solid #dddddd;
+}
+
+.table-bordered caption + thead tr:first-child th,
+.table-bordered caption + tbody tr:first-child th,
+.table-bordered caption + tbody tr:first-child td,
+.table-bordered colgroup + thead tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child td,
+.table-bordered thead:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child td {
+    border-top: 0;
+}
+
+.table-bordered thead:first-child tr:first-child th:first-child,
+.table-bordered tbody:first-child tr:first-child td:first-child {
+    -webkit-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+}
+
+.table-bordered thead:first-child tr:first-child th:last-child,
+.table-bordered tbody:first-child tr:first-child td:last-child {
+    -webkit-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    -moz-border-radius-topright: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child th:first-child,
+.table-bordered tbody:last-child tr:last-child td:first-child {
+    -webkit-border-radius: 0 0 0 4px;
+    -moz-border-radius: 0 0 0 4px;
+    border-radius: 0 0 0 4px;
+    -webkit-border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    -moz-border-radius-bottomleft: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child th:last-child,
+.table-bordered tbody:last-child tr:last-child td:last-child {
+    -webkit-border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    -moz-border-radius-bottomright: 4px;
+}
+
+.table-striped tbody tr:nth-child(odd) td,
+.table-striped tbody tr:nth-child(odd) th {
+    background-color: #f9f9f9;
+}
+
+.table tbody tr:hover td,
+.table tbody tr:hover th {
+    background-color: #f5f5f5;
+}
+
+table .span1 {
+    float: none;
+    width: 44px;
+    margin-left: 0;
+}
+
+table .span2 {
+    float: none;
+    width: 124px;
+    margin-left: 0;
+}
+
+table .span3 {
+    float: none;
+    width: 204px;
+    margin-left: 0;
+}
+
+table .span4 {
+    float: none;
+    width: 284px;
+    margin-left: 0;
+}
+
+table .span5 {
+    float: none;
+    width: 364px;
+    margin-left: 0;
+}
+
+table .span6 {
+    float: none;
+    width: 444px;
+    margin-left: 0;
+}
+
+table .span7 {
+    float: none;
+    width: 524px;
+    margin-left: 0;
+}
+
+table .span8 {
+    float: none;
+    width: 604px;
+    margin-left: 0;
+}
+
+table .span9 {
+    float: none;
+    width: 684px;
+    margin-left: 0;
+}
+
+table .span10 {
+    float: none;
+    width: 764px;
+    margin-left: 0;
+}
+
+table .span11 {
+    float: none;
+    width: 844px;
+    margin-left: 0;
+}
+
+table .span12 {
+    float: none;
+    width: 924px;
+    margin-left: 0;
+}
+
+table .span13 {
+    float: none;
+    width: 1004px;
+    margin-left: 0;
+}
+
+table .span14 {
+    float: none;
+    width: 1084px;
+    margin-left: 0;
+}
+
+table .span15 {
+    float: none;
+    width: 1164px;
+    margin-left: 0;
+}
+
+table .span16 {
+    float: none;
+    width: 1244px;
+    margin-left: 0;
+}
+
+table .span17 {
+    float: none;
+    width: 1324px;
+    margin-left: 0;
+}
+
+table .span18 {
+    float: none;
+    width: 1404px;
+    margin-left: 0;
+}
+
+table .span19 {
+    float: none;
+    width: 1484px;
+    margin-left: 0;
+}
+
+table .span20 {
+    float: none;
+    width: 1564px;
+    margin-left: 0;
+}
+
+table .span21 {
+    float: none;
+    width: 1644px;
+    margin-left: 0;
+}
+
+table .span22 {
+    float: none;
+    width: 1724px;
+    margin-left: 0;
+}
+
+table .span23 {
+    float: none;
+    width: 1804px;
+    margin-left: 0;
+}
+
+table .span24 {
+    float: none;
+    width: 1884px;
+    margin-left: 0;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    *margin-right: .3em;
+    line-height: 14px;
+    vertical-align: text-top;
+    background-image: url("../img/glyphicons-halflings.png");
+    background-position: 14px 14px;
+    background-repeat: no-repeat;
+}
+
+[class^="icon-"]:last-child,
+[class*=" icon-"]:last-child {
+    *margin-left: 0;
+}
+
+.icon-white {
+    background-image: url("../img/glyphicons-halflings-white.png");
+}
+
+.icon-glass {
+    background-position: 0 0;
+}
+
+.icon-music {
+    background-position: -24px 0;
+}
+
+.icon-search {
+    background-position: -48px 0;
+}
+
+.icon-envelope {
+    background-position: -72px 0;
+}
+
+.icon-heart {
+    background-position: -96px 0;
+}
+
+.icon-star {
+    background-position: -120px 0;
+}
+
+.icon-star-empty {
+    background-position: -144px 0;
+}
+
+.icon-user {
+    background-position: -168px 0;
+}
+
+.icon-film {
+    background-position: -192px 0;
+}
+
+.icon-th-large {
+    background-position: -216px 0;
+}
+
+.icon-th {
+    background-position: -240px 0;
+}
+
+.icon-th-list {
+    background-position: -264px 0;
+}
+
+.icon-ok {
+    background-position: -288px 0;
+}
+
+.icon-remove {
+    background-position: -312px 0;
+}
+
+.icon-zoom-in {
+    background-position: -336px 0;
+}
+
+.icon-zoom-out {
+    background-position: -360px 0;
+}
+
+.icon-off {
+    background-position: -384px 0;
+}
+
+.icon-signal {
+    background-position: -408px 0;
+}
+
+.icon-cog {
+    background-position: -432px 0;
+}
+
+.icon-trash {
+    background-position: -456px 0;
+}
+
+.icon-home {
+    background-position: 0 -24px;
+}
+
+.icon-file {
+    background-position: -24px -24px;
+}
+
+.icon-time {
+    background-position: -48px -24px;
+}
+
+.icon-road {
+    background-position: -72px -24px;
+}
+
+.icon-download-alt {
+    background-position: -96px -24px;
+}
+
+.icon-download {
+    background-position: -120px -24px;
+}
+
+.icon-upload {
+    background-position: -144px -24px;
+}
+
+.icon-inbox {
+    background-position: -168px -24px;
+}
+
+.icon-play-circle {
+    background-position: -192px -24px;
+}
+
+.icon-repeat {
+    background-position: -216px -24px;
+}
+
+.icon-refresh {
+    background-position: -240px -24px;
+}
+
+.icon-list-alt {
+    background-position: -264px -24px;
+}
+
+.icon-lock {
+    background-position: -287px -24px;
+}
+
+.icon-flag {
+    background-position: -312px -24px;
+}
+
+.icon-headphones {
+    background-position: -336px -24px;
+}
+
+.icon-volume-off {
+    background-position: -360px -24px;
+}
+
+.icon-volume-down {
+    background-position: -384px -24px;
+}
+
+.icon-volume-up {
+    background-position: -408px -24px;
+}
+
+.icon-qrcode {
+    background-position: -432px -24px;
+}
+
+.icon-barcode {
+    background-position: -456px -24px;
+}
+
+.icon-tag {
+    background-position: 0 -48px;
+}
+
+.icon-tags {
+    background-position: -25px -48px;
+}
+
+.icon-book {
+    background-position: -48px -48px;
+}
+
+.icon-bookmark {
+    background-position: -72px -48px;
+}
+
+.icon-print {
+    background-position: -96px -48px;
+}
+
+.icon-camera {
+    background-position: -120px -48px;
+}
+
+.icon-font {
+    background-position: -144px -48px;
+}
+
+.icon-bold {
+    background-position: -167px -48px;
+}
+
+.icon-italic {
+    background-position: -192px -48px;
+}
+
+.icon-text-height {
+    background-position: -216px -48px;
+}
+
+.icon-text-width {
+    background-position: -240px -48px;
+}
+
+.icon-align-left {
+    background-position: -264px -48px;
+}
+
+.icon-align-center {
+    background-position: -288px -48px;
+}
+
+.icon-align-right {
+    background-position: -312px -48px;
+}
+
+.icon-align-justify {
+    background-position: -336px -48px;
+}
+
+.icon-list {
+    background-position: -360px -48px;
+}
+
+.icon-indent-left {
+    background-position: -384px -48px;
+}
+
+.icon-indent-right {
+    background-position: -408px -48px;
+}
+
+.icon-facetime-video {
+    background-position: -432px -48px;
+}
+
+.icon-picture {
+    background-position: -456px -48px;
+}
+
+.icon-pencil {
+    background-position: 0 -72px;
+}
+
+.icon-map-marker {
+    background-position: -24px -72px;
+}
+
+.icon-adjust {
+    background-position: -48px -72px;
+}
+
+.icon-tint {
+    background-position: -72px -72px;
+}
+
+.icon-edit {
+    background-position: -96px -72px;
+}
+
+.icon-share {
+    background-position: -120px -72px;
+}
+
+.icon-check {
+    background-position: -144px -72px;
+}
+
+.icon-move {
+    background-position: -168px -72px;
+}
+
+.icon-step-backward {
+    background-position: -192px -72px;
+}
+
+.icon-fast-backward {
+    background-position: -216px -72px;
+}
+
+.icon-backward {
+    background-position: -240px -72px;
+}
+
+.icon-play {
+    background-position: -264px -72px;
+}
+
+.icon-pause {
+    background-position: -288px -72px;
+}
+
+.icon-stop {
+    background-position: -312px -72px;
+}
+
+.icon-forward {
+    background-position: -336px -72px;
+}
+
+.icon-fast-forward {
+    background-position: -360px -72px;
+}
+
+.icon-step-forward {
+    background-position: -384px -72px;
+}
+
+.icon-eject {
+    background-position: -408px -72px;
+}
+
+.icon-chevron-left {
+    background-position: -432px -72px;
+}
+
+.icon-chevron-right {
+    background-position: -456px -72px;
+}
+
+.icon-plus-sign {
+    background-position: 0 -96px;
+}
+
+.icon-minus-sign {
+    background-position: -24px -96px;
+}
+
+.icon-remove-sign {
+    background-position: -48px -96px;
+}
+
+.icon-ok-sign {
+    background-position: -72px -96px;
+}
+
+.icon-question-sign {
+    background-position: -96px -96px;
+}
+
+.icon-info-sign {
+    background-position: -120px -96px;
+}
+
+.icon-screenshot {
+    background-position: -144px -96px;
+}
+
+.icon-remove-circle {
+    background-position: -168px -96px;
+}
+
+.icon-ok-circle {
+    background-position: -192px -96px;
+}
+
+.icon-ban-circle {
+    background-position: -216px -96px;
+}
+
+.icon-arrow-left {
+    background-position: -240px -96px;
+}
+
+.icon-arrow-right {
+    background-position: -264px -96px;
+}
+
+.icon-arrow-up {
+    background-position: -289px -96px;
+}
+
+.icon-arrow-down {
+    background-position: -312px -96px;
+}
+
+.icon-share-alt {
+    background-position: -336px -96px;
+}
+
+.icon-resize-full {
+    background-position: -360px -96px;
+}
+
+.icon-resize-small {
+    background-position: -384px -96px;
+}
+
+.icon-plus {
+    background-position: -408px -96px;
+}
+
+.icon-minus {
+    background-position: -433px -96px;
+}
+
+.icon-asterisk {
+    background-position: -456px -96px;
+}
+
+.icon-exclamation-sign {
+    background-position: 0 -120px;
+}
+
+.icon-gift {
+    background-position: -24px -120px;
+}
+
+.icon-leaf {
+    background-position: -48px -120px;
+}
+
+.icon-fire {
+    background-position: -72px -120px;
+}
+
+.icon-eye-open {
+    background-position: -96px -120px;
+}
+
+.icon-eye-close {
+    background-position: -120px -120px;
+}
+
+.icon-warning-sign {
+    background-position: -144px -120px;
+}
+
+.icon-plane {
+    background-position: -168px -120px;
+}
+
+.icon-calendar {
+    background-position: -192px -120px;
+}
+
+.icon-random {
+    background-position: -216px -120px;
+}
+
+.icon-comment {
+    background-position: -240px -120px;
+}
+
+.icon-magnet {
+    background-position: -264px -120px;
+}
+
+.icon-chevron-up {
+    background-position: -288px -120px;
+}
+
+.icon-chevron-down {
+    background-position: -313px -119px;
+}
+
+.icon-retweet {
+    background-position: -336px -120px;
+}
+
+.icon-shopping-cart {
+    background-position: -360px -120px;
+}
+
+.icon-folder-close {
+    background-position: -384px -120px;
+}
+
+.icon-folder-open {
+    background-position: -408px -120px;
+}
+
+.icon-resize-vertical {
+    background-position: -432px -119px;
+}
+
+.icon-resize-horizontal {
+    background-position: -456px -118px;
+}
+
+.icon-hdd {
+    background-position: 0 -144px;
+}
+
+.icon-bullhorn {
+    background-position: -24px -144px;
+}
+
+.icon-bell {
+    background-position: -48px -144px;
+}
+
+.icon-certificate {
+    background-position: -72px -144px;
+}
+
+.icon-thumbs-up {
+    background-position: -96px -144px;
+}
+
+.icon-thumbs-down {
+    background-position: -120px -144px;
+}
+
+.icon-hand-right {
+    background-position: -144px -144px;
+}
+
+.icon-hand-left {
+    background-position: -168px -144px;
+}
+
+.icon-hand-up {
+    background-position: -192px -144px;
+}
+
+.icon-hand-down {
+    background-position: -216px -144px;
+}
+
+.icon-circle-arrow-right {
+    background-position: -240px -144px;
+}
+
+.icon-circle-arrow-left {
+    background-position: -264px -144px;
+}
+
+.icon-circle-arrow-up {
+    background-position: -288px -144px;
+}
+
+.icon-circle-arrow-down {
+    background-position: -312px -144px;
+}
+
+.icon-globe {
+    background-position: -336px -144px;
+}
+
+.icon-wrench {
+    background-position: -360px -144px;
+}
+
+.icon-tasks {
+    background-position: -384px -144px;
+}
+
+.icon-filter {
+    background-position: -408px -144px;
+}
+
+.icon-briefcase {
+    background-position: -432px -144px;
+}
+
+.icon-fullscreen {
+    background-position: -456px -144px;
+}
+
+.dropup,
+.dropdown {
+    position: relative;
+}
+
+.dropdown-toggle {
+    *margin-bottom: -3px;
+}
+
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+    outline: 0;
+}
+
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: top;
+    border-top: 4px solid #000000;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+    content: "";
+    opacity: 0.3;
+    filter: alpha(opacity=30);
+}
+
+.dropdown .caret {
+    margin-top: 8px;
+    margin-left: 2px;
+}
+
+.dropdown:hover .caret,
+.open .caret {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 4px 0;
+    margin: 1px 0 0;
+    list-style: none;
+    background-color: #ffffff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.dropdown-menu.pull-right {
+    right: 0;
+    left: auto;
+}
+
+.dropdown-menu .divider {
+    *width: 100%;
+    height: 1px;
+    margin: 8px 1px;
+    *margin: -5px 0 5px;
+    overflow: hidden;
+    background-color: #e5e5e5;
+    border-bottom: 1px solid #ffffff;
+}
+
+.dropdown-menu a {
+    display: block;
+    padding: 3px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: 18px;
+    color: #333333;
+    white-space: nowrap;
+}
+
+.dropdown-menu li > a:hover,
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+    color: #ffffff;
+    text-decoration: none;
+    background-color: #0088cc;
+}
+
+.open {
+    *z-index: 1000;
+}
+
+.open .dropdown-menu {
+    display: block;
+}
+
+.pull-right .dropdown-menu {
+    right: 0;
+    left: auto;
+}
+
+.dropup .caret,
+.navbar-fixed-bottom .dropdown .caret {
+    border-top: 0;
+    border-bottom: 4px solid #000000;
+    content: "\2191";
+}
+
+.dropup .dropdown-menu,
+.navbar-fixed-bottom .dropdown .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+}
+
+.typeahead {
+    margin-top: 2px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.well {
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #eee;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.well blockquote {
+    border-color: #ddd;
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+.well-large {
+    padding: 24px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.well-small {
+    padding: 9px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+.fade {
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transition: opacity 0.15s linear;
+    -moz-transition: opacity 0.15s linear;
+    -ms-transition: opacity 0.15s linear;
+    -o-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+}
+
+.fade.in {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.collapse {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    -webkit-transition: height 0.35s ease;
+    -moz-transition: height 0.35s ease;
+    -ms-transition: height 0.35s ease;
+    -o-transition: height 0.35s ease;
+    transition: height 0.35s ease;
+}
+
+.collapse.in {
+    height: auto;
+}
+
+.close {
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 18px;
+    color: #000000;
+    text-shadow: 0 1px 0 #ffffff;
+    opacity: 0.2;
+    filter: alpha(opacity=20);
+}
+
+.close:hover {
+    color: #000000;
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.4;
+    filter: alpha(opacity=40);
+}
+
+button.close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+}
+
+.btn {
+    display: inline-block;
+    *display: inline;
+    padding: 4px 10px 4px;
+    margin-bottom: 0;
+    *margin-left: .3em;
+    font-size: 13px;
+    line-height: 18px;
+    *line-height: 20px;
+    color: #333333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #f5f5f5;
+    *background-color: #e6e6e6;
+    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: linear-gradient(top, #ffffff, #e6e6e6);
+    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+    background-repeat: repeat-x;
+    border: 1px solid #cccccc;
+    *border: 0;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+    border-bottom-color: #b3b3b3;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+    *zoom: 1;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn:hover,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+}
+
+.btn:active,
+.btn.active {
+    background-color: #cccccc \9;
+}
+
+.btn:first-child {
+    *margin-left: 0;
+}
+
+.btn:hover {
+    color: #333333;
+    text-decoration: none;
+    background-color: #e6e6e6;
+    *background-color: #d9d9d9;
+    /* Buttons in IE7 don't get borders, so darken on hover */
+
+    background-position: 0 -15px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -ms-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
+}
+
+.btn:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+.btn.active,
+.btn:active {
+    background-color: #e6e6e6;
+    background-color: #d9d9d9 \9;
+    background-image: none;
+    outline: 0;
+    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn.disabled,
+.btn[disabled] {
+    cursor: default;
+    background-color: #e6e6e6;
+    background-image: none;
+    opacity: 0.65;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+
+.btn-large {
+    padding: 9px 14px;
+    font-size: 15px;
+    line-height: normal;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.btn-large [class^="icon-"] {
+    margin-top: 1px;
+}
+
+.btn-small {
+    padding: 5px 9px;
+    font-size: 11px;
+    line-height: 16px;
+}
+
+.btn-small [class^="icon-"] {
+    margin-top: -1px;
+}
+
+.btn-mini {
+    padding: 2px 6px;
+    font-size: 11px;
+    line-height: 14px;
+}
+
+.btn-primary,
+.btn-primary:hover,
+.btn-warning,
+.btn-warning:hover,
+.btn-danger,
+.btn-danger:hover,
+.btn-success,
+.btn-success:hover,
+.btn-info,
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-inverse.active {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.btn {
+    border-color: #ccc;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+
+.btn-primary {
+    background-color: #0074cc;
+    *background-color: #0055cc;
+    background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
+    background-image: -o-linear-gradient(top, #0088cc, #0055cc);
+    background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
+    background-image: linear-gradient(top, #0088cc, #0055cc);
+    background-repeat: repeat-x;
+    border-color: #0055cc #0055cc #003580;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+    background-color: #0055cc;
+    *background-color: #004ab3;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+    background-color: #004099 \9;
+}
+
+.btn-warning {
+    background-color: #faa732;
+    *background-color: #f89406;
+    background-image: -ms-linear-gradient(top, #fbb450, #f89406);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
+    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
+    background-image: -o-linear-gradient(top, #fbb450, #f89406);
+    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
+    background-image: linear-gradient(top, #fbb450, #f89406);
+    background-repeat: repeat-x;
+    border-color: #f89406 #f89406 #ad6704;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-warning:hover,
+.btn-warning:active,
+.btn-warning.active,
+.btn-warning.disabled,
+.btn-warning[disabled] {
+    background-color: #f89406;
+    *background-color: #df8505;
+}
+
+.btn-warning:active,
+.btn-warning.active {
+    background-color: #c67605 \9;
+}
+
+.btn-danger {
+    background-color: #da4f49;
+    *background-color: #bd362f;
+    background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
+    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
+    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
+    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
+    background-image: linear-gradient(top, #ee5f5b, #bd362f);
+    background-repeat: repeat-x;
+    border-color: #bd362f #bd362f #802420;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-danger:hover,
+.btn-danger:active,
+.btn-danger.active,
+.btn-danger.disabled,
+.btn-danger[disabled] {
+    background-color: #bd362f;
+    *background-color: #a9302a;
+}
+
+.btn-danger:active,
+.btn-danger.active {
+    background-color: #942a25 \9;
+}
+
+.btn-success {
+    background-color: #5bb75b;
+    *background-color: #51a351;
+    background-image: -ms-linear-gradient(top, #62c462, #51a351);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
+    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
+    background-image: -o-linear-gradient(top, #62c462, #51a351);
+    background-image: -moz-linear-gradient(top, #62c462, #51a351);
+    background-image: linear-gradient(top, #62c462, #51a351);
+    background-repeat: repeat-x;
+    border-color: #51a351 #51a351 #387038;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-success:hover,
+.btn-success:active,
+.btn-success.active,
+.btn-success.disabled,
+.btn-success[disabled] {
+    background-color: #51a351;
+    *background-color: #499249;
+}
+
+.btn-success:active,
+.btn-success.active {
+    background-color: #408140 \9;
+}
+
+.btn-info {
+    background-color: #49afcd;
+    *background-color: #2f96b4;
+    background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
+    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
+    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
+    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
+    background-image: linear-gradient(top, #5bc0de, #2f96b4);
+    background-repeat: repeat-x;
+    border-color: #2f96b4 #2f96b4 #1f6377;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-info:hover,
+.btn-info:active,
+.btn-info.active,
+.btn-info.disabled,
+.btn-info[disabled] {
+    background-color: #2f96b4;
+    *background-color: #2a85a0;
+}
+
+.btn-info:active,
+.btn-info.active {
+    background-color: #24748c \9;
+}
+
+.btn-inverse {
+    background-color: #414141;
+    *background-color: #222222;
+    background-image: -ms-linear-gradient(top, #555555, #222222);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
+    background-image: -webkit-linear-gradient(top, #555555, #222222);
+    background-image: -o-linear-gradient(top, #555555, #222222);
+    background-image: -moz-linear-gradient(top, #555555, #222222);
+    background-image: linear-gradient(top, #555555, #222222);
+    background-repeat: repeat-x;
+    border-color: #222222 #222222 #000000;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.btn-inverse:hover,
+.btn-inverse:active,
+.btn-inverse.active,
+.btn-inverse.disabled,
+.btn-inverse[disabled] {
+    background-color: #222222;
+    *background-color: #151515;
+}
+
+.btn-inverse:active,
+.btn-inverse.active {
+    background-color: #080808 \9;
+}
+
+button.btn,
+input[type="submit"].btn {
+    *padding-top: 2px;
+    *padding-bottom: 2px;
+}
+
+button.btn::-moz-focus-inner,
+input[type="submit"].btn::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+button.btn.btn-large,
+input[type="submit"].btn.btn-large {
+    *padding-top: 7px;
+    *padding-bottom: 7px;
+}
+
+button.btn.btn-small,
+input[type="submit"].btn.btn-small {
+    *padding-top: 3px;
+    *padding-bottom: 3px;
+}
+
+button.btn.btn-mini,
+input[type="submit"].btn.btn-mini {
+    *padding-top: 1px;
+    *padding-bottom: 1px;
+}
+
+.btn-group {
+    position: relative;
+    *margin-left: .3em;
+    *zoom: 1;
+}
+
+.btn-group:before,
+.btn-group:after {
+    display: table;
+    content: "";
+}
+
+.btn-group:after {
+    clear: both;
+}
+
+.btn-group:first-child {
+    *margin-left: 0;
+}
+
+.btn-group + .btn-group {
+    margin-left: 5px;
+}
+
+.btn-toolbar {
+    margin-top: 9px;
+    margin-bottom: 9px;
+}
+
+.btn-toolbar .btn-group {
+    display: inline-block;
+    *display: inline;
+    /* IE7 inline-block hack */
+
+    *zoom: 1;
+}
+
+.btn-group > .btn {
+    position: relative;
+    float: left;
+    margin-left: -1px;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.btn-group > .btn:first-child {
+    margin-left: 0;
+    -webkit-border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    -webkit-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-bottomleft: 4px;
+    -moz-border-radius-topleft: 4px;
+}
+
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+    -webkit-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -moz-border-radius-bottomright: 4px;
+}
+
+.btn-group > .btn.large:first-child {
+    margin-left: 0;
+    -webkit-border-bottom-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    -webkit-border-top-left-radius: 6px;
+    border-top-left-radius: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    -moz-border-radius-topleft: 6px;
+}
+
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
+    -webkit-border-top-right-radius: 6px;
+    border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    -moz-border-radius-topright: 6px;
+    -moz-border-radius-bottomright: 6px;
+}
+
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
+    z-index: 2;
+}
+
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+    outline: 0;
+}
+
+.btn-group > .dropdown-toggle {
+    *padding-top: 4px;
+    padding-right: 8px;
+    *padding-bottom: 4px;
+    padding-left: 8px;
+    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-group > .btn-mini.dropdown-toggle {
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+.btn-group > .btn-small.dropdown-toggle {
+    *padding-top: 4px;
+    *padding-bottom: 4px;
+}
+
+.btn-group > .btn-large.dropdown-toggle {
+    padding-right: 12px;
+    padding-left: 12px;
+}
+
+.btn-group.open .dropdown-toggle {
+    background-image: none;
+    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-group.open .btn.dropdown-toggle {
+    background-color: #e6e6e6;
+}
+
+.btn-group.open .btn-primary.dropdown-toggle {
+    background-color: #0055cc;
+}
+
+.btn-group.open .btn-warning.dropdown-toggle {
+    background-color: #f89406;
+}
+
+.btn-group.open .btn-danger.dropdown-toggle {
+    background-color: #bd362f;
+}
+
+.btn-group.open .btn-success.dropdown-toggle {
+    background-color: #51a351;
+}
+
+.btn-group.open .btn-info.dropdown-toggle {
+    background-color: #2f96b4;
+}
+
+.btn-group.open .btn-inverse.dropdown-toggle {
+    background-color: #222222;
+}
+
+.btn .caret {
+    margin-top: 7px;
+    margin-left: 0;
+}
+
+.btn:hover .caret,
+.open.btn-group .caret {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.btn-mini .caret {
+    margin-top: 5px;
+}
+
+.btn-small .caret {
+    margin-top: 6px;
+}
+
+.btn-large .caret {
+    margin-top: 6px;
+    border-top-width: 5px;
+    border-right-width: 5px;
+    border-left-width: 5px;
+}
+
+.dropup .btn-large .caret {
+    border-top: 0;
+    border-bottom: 5px solid #000000;
+}
+
+.btn-primary .caret,
+.btn-warning .caret,
+.btn-danger .caret,
+.btn-info .caret,
+.btn-success .caret,
+.btn-inverse .caret {
+    border-top-color: #ffffff;
+    border-bottom-color: #ffffff;
+    opacity: 0.75;
+    filter: alpha(opacity=75);
+}
+
+.alert {
+    padding: 8px 35px 8px 14px;
+    margin-bottom: 18px;
+    color: #c09853;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    background-color: #fcf8e3;
+    border: 1px solid #fbeed5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.alert-heading {
+    color: inherit;
+}
+
+.alert .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    line-height: 18px;
+}
+
+.alert-success {
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.alert-danger,
+.alert-error {
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7;
+}
+
+.alert-info {
+    color: #3a87ad;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.alert-block {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.alert-block > p,
+.alert-block > ul {
+    margin-bottom: 0;
+}
+
+.alert-block p + p {
+    margin-top: 5px;
+}
+
+.nav {
+    margin-bottom: 18px;
+    margin-left: 0;
+    list-style: none;
+}
+
+.nav > li > a {
+    display: block;
+}
+
+.nav > li > a:hover {
+    text-decoration: none;
+    background-color: #eeeeee;
+}
+
+.nav > .pull-right {
+    float: right;
+}
+
+.nav .nav-header {
+    display: block;
+    padding: 3px 15px;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 18px;
+    color: #999999;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+}
+
+.nav li + .nav-header {
+    margin-top: 9px;
+}
+
+.nav-list {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 0;
+}
+
+.nav-list > li > a,
+.nav-list .nav-header {
+    margin-right: -15px;
+    margin-left: -15px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.nav-list > li > a {
+    padding: 3px 15px;
+}
+
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    background-color: #0088cc;
+}
+
+.nav-list [class^="icon-"] {
+    margin-right: 2px;
+}
+
+.nav-list .divider {
+    *width: 100%;
+    height: 1px;
+    margin: 8px 1px;
+    *margin: -5px 0 5px;
+    overflow: hidden;
+    background-color: #e5e5e5;
+    border-bottom: 1px solid #ffffff;
+}
+
+.nav-tabs,
+.nav-pills {
+    *zoom: 1;
+}
+
+.nav-tabs:before,
+.nav-pills:before,
+.nav-tabs:after,
+.nav-pills:after {
+    display: table;
+    content: "";
+}
+
+.nav-tabs:after,
+.nav-pills:after {
+    clear: both;
+}
+
+.nav-tabs > li,
+.nav-pills > li {
+    float: left;
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+    padding-right: 12px;
+    padding-left: 12px;
+    margin-right: 2px;
+    line-height: 14px;
+}
+
+.nav-tabs {
+    border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs > li {
+    margin-bottom: -1px;
+}
+
+.nav-tabs > li > a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    line-height: 18px;
+    border: 1px solid transparent;
+    -webkit-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs > li > a:hover {
+    border-color: #eeeeee #eeeeee #dddddd;
+}
+
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+    color: #555555;
+    cursor: default;
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-bottom-color: transparent;
+}
+
+.nav-pills > li > a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+    color: #ffffff;
+    background-color: #0088cc;
+}
+
+.nav-stacked > li {
+    float: none;
+}
+
+.nav-stacked > li > a {
+    margin-right: 0;
+}
+
+.nav-tabs.nav-stacked {
+    border-bottom: 0;
+}
+
+.nav-tabs.nav-stacked > li > a {
+    border: 1px solid #ddd;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.nav-tabs.nav-stacked > li:first-child > a {
+    -webkit-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs.nav-stacked > li:last-child > a {
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+}
+
+.nav-tabs.nav-stacked > li > a:hover {
+    z-index: 2;
+    border-color: #ddd;
+}
+
+.nav-pills.nav-stacked > li > a {
+    margin-bottom: 3px;
+}
+
+.nav-pills.nav-stacked > li:last-child > a {
+    margin-bottom: 1px;
+}
+
+.nav-tabs .dropdown-menu {
+    -webkit-border-radius: 0 0 5px 5px;
+    -moz-border-radius: 0 0 5px 5px;
+    border-radius: 0 0 5px 5px;
+}
+
+.nav-pills .dropdown-menu {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.nav-tabs .dropdown-toggle .caret,
+.nav-pills .dropdown-toggle .caret {
+    margin-top: 6px;
+    border-top-color: #0088cc;
+    border-bottom-color: #0088cc;
+}
+
+.nav-tabs .dropdown-toggle:hover .caret,
+.nav-pills .dropdown-toggle:hover .caret {
+    border-top-color: #005580;
+    border-bottom-color: #005580;
+}
+
+.nav-tabs .active .dropdown-toggle .caret,
+.nav-pills .active .dropdown-toggle .caret {
+    border-top-color: #333333;
+    border-bottom-color: #333333;
+}
+
+.nav > .dropdown.active > a:hover {
+    color: #000000;
+    cursor: pointer;
+}
+
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover {
+    color: #ffffff;
+    background-color: #999999;
+    border-color: #999999;
+}
+
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret {
+    border-top-color: #ffffff;
+    border-bottom-color: #ffffff;
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.tabs-stacked .open > a:hover {
+    border-color: #999999;
+}
+
+.tabbable {
+    *zoom: 1;
+}
+
+.tabbable:before,
+.tabbable:after {
+    display: table;
+    content: "";
+}
+
+.tabbable:after {
+    clear: both;
+}
+
+.tab-content {
+    overflow: auto;
+}
+
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+    border-bottom: 0;
+}
+
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+    display: none;
+}
+
+.tab-content > .active,
+.pill-content > .active {
+    display: block;
+}
+
+.tabs-below > .nav-tabs {
+    border-top: 1px solid #ddd;
+}
+
+.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 {
+    border-top-color: #ddd;
+    border-bottom-color: transparent;
+}
+
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover {
+    border-color: transparent #ddd #ddd #ddd;
+}
+
+.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 {
+    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
+}
+
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover {
+    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 {
+    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
+}
+
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover {
+    border-color: #ddd #ddd #ddd transparent;
+    *border-left-color: #ffffff;
+}
+
+.navbar {
+    *position: relative;
+    *z-index: 2;
+    margin-bottom: 18px;
+    overflow: visible;
+}
+
+.navbar-inner {
+    min-height: 40px;
+    padding-right: 20px;
+    padding-left: 20px;
+    background-color: #2c2c2c;
+    background-image: -moz-linear-gradient(top, #333333, #222222);
+    background-image: -ms-linear-gradient(top, #333333, #222222);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
+    background-image: -webkit-linear-gradient(top, #333333, #222222);
+    background-image: -o-linear-gradient(top, #333333, #222222);
+    background-image: linear-gradient(top, #333333, #222222);
+    background-repeat: repeat-x;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.navbar .container {
+    width: auto;
+}
+
+.nav-collapse.collapse {
+    height: auto;
+}
+
+.navbar {
+    color: #999999;
+}
+
+.navbar .brand:hover {
+    text-decoration: none;
+}
+
+.navbar .brand {
+    display: block;
+    float: left;
+    padding: 8px 20px 12px;
+    margin-left: -20px;
+    font-size: 20px;
+    font-weight: 200;
+    line-height: 1;
+    color: #999999;
+}
+
+.navbar .navbar-text {
+    margin-bottom: 0;
+    line-height: 40px;
+}
+
+.navbar .navbar-link {
+    color: #999999;
+}
+
+.navbar .navbar-link:hover {
+    color: #ffffff;
+}
+
+.navbar .btn,
+.navbar .btn-group {
+    margin-top: 5px;
+}
+
+.navbar .btn-group .btn {
+    margin: 0;
+}
+
+.navbar-form {
+    margin-bottom: 0;
+    *zoom: 1;
+}
+
+.navbar-form:before,
+.navbar-form:after {
+    display: table;
+    content: "";
+}
+
+.navbar-form:after {
+    clear: both;
+}
+
+.navbar-form input,
+.navbar-form select,
+.navbar-form .radio,
+.navbar-form .checkbox {
+    margin-top: 5px;
+}
+
+.navbar-form input,
+.navbar-form select {
+    display: inline-block;
+    margin-bottom: 0;
+}
+
+.navbar-form input[type="image"],
+.navbar-form input[type="checkbox"],
+.navbar-form input[type="radio"] {
+    margin-top: 3px;
+}
+
+.navbar-form .input-append,
+.navbar-form .input-prepend {
+    margin-top: 6px;
+    white-space: nowrap;
+}
+
+.navbar-form .input-append input,
+.navbar-form .input-prepend input {
+    margin-top: 0;
+}
+
+.navbar-search {
+    position: relative;
+    float: left;
+    margin-top: 6px;
+    margin-bottom: 0;
+}
+
+.navbar-search .search-query {
+    padding: 4px 9px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 1;
+    color: #ffffff;
+    background-color: #626262;
+    border: 1px solid #151515;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.navbar-search .search-query:-moz-placeholder {
+    color: #cccccc;
+}
+
+.navbar-search .search-query::-webkit-input-placeholder {
+    color: #cccccc;
+}
+
+.navbar-search .search-query:focus,
+.navbar-search .search-query.focused {
+    padding: 5px 10px;
+    color: #333333;
+    text-shadow: 0 1px 0 #ffffff;
+    background-color: #ffffff;
+    border: 0;
+    outline: 0;
+    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+    margin-bottom: 0;
+}
+
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
+    padding-right: 0;
+    padding-left: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+    width: 940px;
+}
+
+.navbar-fixed-top {
+    top: 0;
+}
+
+.navbar-fixed-bottom {
+    bottom: 0;
+}
+
+.navbar .nav {
+    position: relative;
+    left: 0;
+    display: block;
+    float: left;
+    margin: 0 10px 0 0;
+}
+
+.navbar .nav.pull-right {
+    float: right;
+}
+
+.navbar .nav > li {
+    display: block;
+    float: left;
+}
+
+.navbar .nav > li > a {
+    float: none;
+    padding: 9px 10px 11px;
+    line-height: 19px;
+    color: #999999;
+    text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.navbar .btn {
+    display: inline-block;
+    padding: 4px 10px 4px;
+    margin: 5px 5px 6px;
+    line-height: 18px;
+}
+
+.navbar .btn-group {
+    padding: 5px 5px 6px;
+    margin: 0;
+}
+
+.navbar .nav > li > a:hover {
+    color: #ffffff;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.navbar .nav .active > a,
+.navbar .nav .active > a:hover {
+    color: #ffffff;
+    text-decoration: none;
+    background-color: #222222;
+}
+
+.navbar .divider-vertical {
+    width: 1px;
+    height: 40px;
+    margin: 0 9px;
+    overflow: hidden;
+    background-color: #222222;
+    border-right: 1px solid #333333;
+}
+
+.navbar .nav.pull-right {
+    margin-right: 0;
+    margin-left: 10px;
+}
+
+.navbar .btn-navbar {
+    display: none;
+    float: right;
+    padding: 7px 10px;
+    margin-right: 5px;
+    margin-left: 5px;
+    background-color: #2c2c2c;
+    *background-color: #222222;
+    background-image: -ms-linear-gradient(top, #333333, #222222);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
+    background-image: -webkit-linear-gradient(top, #333333, #222222);
+    background-image: -o-linear-gradient(top, #333333, #222222);
+    background-image: linear-gradient(top, #333333, #222222);
+    background-image: -moz-linear-gradient(top, #333333, #222222);
+    background-repeat: repeat-x;
+    border-color: #222222 #222222 #000000;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+}
+
+.navbar .btn-navbar:hover,
+.navbar .btn-navbar:active,
+.navbar .btn-navbar.active,
+.navbar .btn-navbar.disabled,
+.navbar .btn-navbar[disabled] {
+    background-color: #222222;
+    *background-color: #151515;
+}
+
+.navbar .btn-navbar:active,
+.navbar .btn-navbar.active {
+    background-color: #080808 \9;
+}
+
+.navbar .btn-navbar .icon-bar {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background-color: #f5f5f5;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-navbar .icon-bar + .icon-bar {
+    margin-top: 3px;
+}
+
+.navbar .dropdown-menu:before {
+    position: absolute;
+    top: -7px;
+    left: 9px;
+    display: inline-block;
+    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: '';
+}
+
+.navbar .dropdown-menu:after {
+    position: absolute;
+    top: -6px;
+    left: 10px;
+    display: inline-block;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #ffffff;
+    border-left: 6px solid transparent;
+    content: '';
+}
+
+.navbar-fixed-bottom .dropdown-menu:before {
+    top: auto;
+    bottom: -7px;
+    border-top: 7px solid #ccc;
+    border-bottom: 0;
+    border-top-color: rgba(0, 0, 0, 0.2);
+}
+
+.navbar-fixed-bottom .dropdown-menu:after {
+    top: auto;
+    bottom: -6px;
+    border-top: 6px solid #ffffff;
+    border-bottom: 0;
+}
+
+.navbar .nav li.dropdown .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open .caret {
+    border-top-color: #ffffff;
+    border-bottom-color: #ffffff;
+}
+
+.navbar .nav li.dropdown.active .caret {
+    opacity: 1;
+    filter: alpha(opacity=100);
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+    background-color: transparent;
+}
+
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
+    color: #ffffff;
+}
+
+.navbar .pull-right .dropdown-menu,
+.navbar .dropdown-menu.pull-right {
+    right: 0;
+    left: auto;
+}
+
+.navbar .pull-right .dropdown-menu:before,
+.navbar .dropdown-menu.pull-right:before {
+    right: 12px;
+    left: auto;
+}
+
+.navbar .pull-right .dropdown-menu:after,
+.navbar .dropdown-menu.pull-right:after {
+    right: 13px;
+    left: auto;
+}
+
+.breadcrumb {
+    padding: 7px 14px;
+    margin: 0 0 18px;
+    list-style: none;
+    background-color: #fbfbfb;
+    background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
+    background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
+    background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
+    background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
+    background-image: linear-gradient(top, #ffffff, #f5f5f5);
+    background-repeat: repeat-x;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
+    -webkit-box-shadow: inset 0 1px 0 #ffffff;
+    -moz-box-shadow: inset 0 1px 0 #ffffff;
+    box-shadow: inset 0 1px 0 #ffffff;
+}
+
+.breadcrumb li {
+    display: inline-block;
+    *display: inline;
+    text-shadow: 0 1px 0 #ffffff;
+    *zoom: 1;
+}
+
+.breadcrumb .divider {
+    padding: 0 5px;
+    color: #999999;
+}
+
+.breadcrumb .active a {
+    color: #333333;
+}
+
+.pagination {
+    height: 36px;
+    margin: 18px 0;
+}
+
+.pagination ul {
+    display: inline-block;
+    *display: inline;
+    margin-bottom: 0;
+    margin-left: 0;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    *zoom: 1;
+    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.pagination li {
+    display: inline;
+}
+
+.pagination a {
+    float: left;
+    padding: 0 14px;
+    line-height: 34px;
+    text-decoration: none;
+    border: 1px solid #ddd;
+    border-left-width: 0;
+}
+
+.pagination a:hover,
+.pagination .active a {
+    background-color: #f5f5f5;
+}
+
+.pagination .active a {
+    color: #999999;
+    cursor: default;
+}
+
+.pagination .disabled span,
+.pagination .disabled a,
+.pagination .disabled a:hover {
+    color: #999999;
+    cursor: default;
+    background-color: transparent;
+}
+
+.pagination li:first-child a {
+    border-left-width: 1px;
+    -webkit-border-radius: 3px 0 0 3px;
+    -moz-border-radius: 3px 0 0 3px;
+    border-radius: 3px 0 0 3px;
+}
+
+.pagination li:last-child a {
+    -webkit-border-radius: 0 3px 3px 0;
+    -moz-border-radius: 0 3px 3px 0;
+    border-radius: 0 3px 3px 0;
+}
+
+.pagination-centered {
+    text-align: center;
+}
+
+.pagination-right {
+    text-align: right;
+}
+
+.pager {
+    margin-bottom: 18px;
+    margin-left: 0;
+    text-align: center;
+    list-style: none;
+    *zoom: 1;
+}
+
+.pager:before,
+.pager:after {
+    display: table;
+    content: "";
+}
+
+.pager:after {
+    clear: both;
+}
+
+.pager li {
+    display: inline;
+}
+
+.pager a {
+    display: inline-block;
+    padding: 5px 14px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
+}
+
+.pager a:hover {
+    text-decoration: none;
+    background-color: #f5f5f5;
+}
+
+.pager .next a {
+    float: right;
+}
+
+.pager .previous a {
+    float: left;
+}
+
+.pager .disabled a,
+.pager .disabled a:hover {
+    color: #999999;
+    cursor: default;
+    background-color: #fff;
+}
+
+.modal-open .dropdown-menu {
+    z-index: 2050;
+}
+
+.modal-open .dropdown.open {
+    *z-index: 2050;
+}
+
+.modal-open .popover {
+    z-index: 2060;
+}
+
+.modal-open .tooltip {
+    z-index: 2070;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    background-color: #000000;
+}
+
+.modal-backdrop.fade {
+    opacity: 0;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+}
+
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 1050;
+    width: 560px;
+    margin: -250px 0 0 -280px;
+    overflow: auto;
+    background-color: #ffffff;
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    *border: 1px solid #999;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding-box;
+    background-clip: padding-box;
+}
+
+.modal.fade {
+    top: -25%;
+    -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
+    -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
+    -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
+    -o-transition: opacity 0.3s linear, top 0.3s ease-out;
+    transition: opacity 0.3s linear, top 0.3s ease-out;
+}
+
+.modal.fade.in {
+    top: 50%;
+}
+
+.modal-header {
+    padding: 9px 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.modal-header .close {
+    margin-top: 2px;
+}
+
+.modal-body {
+    max-height: 400px;
+    padding: 15px;
+    overflow-y: auto;
+}
+
+.modal-form {
+    margin-bottom: 0;
+}
+
+.modal-footer {
+    padding: 14px 15px 15px;
+    margin-bottom: 0;
+    text-align: right;
+    background-color: #f5f5f5;
+    border-top: 1px solid #ddd;
+    -webkit-border-radius: 0 0 6px 6px;
+    -moz-border-radius: 0 0 6px 6px;
+    border-radius: 0 0 6px 6px;
+    *zoom: 1;
+    -webkit-box-shadow: inset 0 1px 0 #ffffff;
+    -moz-box-shadow: inset 0 1px 0 #ffffff;
+    box-shadow: inset 0 1px 0 #ffffff;
+}
+
+.modal-footer:before,
+.modal-footer:after {
+    display: table;
+    content: "";
+}
+
+.modal-footer:after {
+    clear: both;
+}
+
+.modal-footer .btn + .btn {
+    margin-bottom: 0;
+    margin-left: 5px;
+}
+
+.modal-footer .btn-group .btn + .btn {
+    margin-left: -1px;
+}
+
+.tooltip {
+    position: absolute;
+    z-index: 1020;
+    display: block;
+    padding: 5px;
+    font-size: 11px;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    visibility: visible;
+}
+
+.tooltip.in {
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+}
+
+.tooltip.top {
+    margin-top: -2px;
+}
+
+.tooltip.right {
+    margin-left: 2px;
+}
+
+.tooltip.bottom {
+    margin-top: 2px;
+}
+
+.tooltip.left {
+    margin-left: -2px;
+}
+
+.tooltip.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-top: 5px solid #000000;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+}
+
+.tooltip.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #000000;
+}
+
+.tooltip.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #000000;
+    border-left: 5px solid transparent;
+}
+
+.tooltip.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-right: 5px solid #000000;
+    border-bottom: 5px solid transparent;
+}
+
+.tooltip-inner {
+    max-width: 200px;
+    padding: 3px 8px;
+    color: #ffffff;
+    text-align: center;
+    text-decoration: none;
+    background-color: #000000;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.popover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1010;
+    display: none;
+    padding: 5px;
+}
+
+.popover.top {
+    margin-top: -5px;
+}
+
+.popover.right {
+    margin-left: 5px;
+}
+
+.popover.bottom {
+    margin-top: 5px;
+}
+
+.popover.left {
+    margin-left: -5px;
+}
+
+.popover.top .arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-top: 5px solid #000000;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+}
+
+.popover.right .arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-right: 5px solid #000000;
+    border-bottom: 5px solid transparent;
+}
+
+.popover.bottom .arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #000000;
+    border-left: 5px solid transparent;
+}
+
+.popover.left .arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #000000;
+}
+
+.popover .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.popover-inner {
+    width: 280px;
+    padding: 3px;
+    overflow: hidden;
+    background: #000000;
+    background: rgba(0, 0, 0, 0.8);
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+}
+
+.popover-title {
+    padding: 9px 15px;
+    line-height: 1;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #eee;
+    -webkit-border-radius: 3px 3px 0 0;
+    -moz-border-radius: 3px 3px 0 0;
+    border-radius: 3px 3px 0 0;
+}
+
+.popover-content {
+    padding: 14px;
+    background-color: #ffffff;
+    -webkit-border-radius: 0 0 3px 3px;
+    -moz-border-radius: 0 0 3px 3px;
+    border-radius: 0 0 3px 3px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding-box;
+    background-clip: padding-box;
+}
+
+.popover-content p,
+.popover-content ul,
+.popover-content ol {
+    margin-bottom: 0;
+}
+
+.thumbnails {
+    margin-left: -20px;
+    list-style: none;
+    *zoom: 1;
+}
+
+.thumbnails:before,
+.thumbnails:after {
+    display: table;
+    content: "";
+}
+
+.thumbnails:after {
+    clear: both;
+}
+
+.row-fluid .thumbnails {
+    margin-left: 0;
+}
+
+.thumbnails > li {
+    float: left;
+    margin-bottom: 18px;
+    margin-left: 20px;
+}
+
+.thumbnail {
+    display: block;
+    padding: 4px;
+    line-height: 1;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+a.thumbnail:hover {
+    border-color: #0088cc;
+    -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+    -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+    box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+}
+
+.thumbnail > img {
+    display: block;
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.thumbnail .caption {
+    padding: 9px;
+}
+
+.label,
+.badge {
+    font-size: 10.998px;
+    font-weight: bold;
+    line-height: 14px;
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    white-space: nowrap;
+    vertical-align: baseline;
+    background-color: #999999;
+}
+
+.label {
+    padding: 1px 4px 2px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+.badge {
+    padding: 1px 9px 2px;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    border-radius: 9px;
+}
+
+a.label:hover,
+a.badge:hover {
+    color: #ffffff;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.label-important,
+.badge-important {
+    background-color: #b94a48;
+}
+
+.label-important[href],
+.badge-important[href] {
+    background-color: #953b39;
+}
+
+.label-warning,
+.badge-warning {
+    background-color: #f89406;
+}
+
+.label-warning[href],
+.badge-warning[href] {
+    background-color: #c67605;
+}
+
+.label-success,
+.badge-success {
+    background-color: #468847;
+}
+
+.label-success[href],
+.badge-success[href] {
+    background-color: #356635;
+}
+
+.label-info,
+.badge-info {
+    background-color: #3a87ad;
+}
+
+.label-info[href],
+.badge-info[href] {
+    background-color: #2d6987;
+}
+
+.label-inverse,
+.badge-inverse {
+    background-color: #333333;
+}
+
+.label-inverse[href],
+.badge-inverse[href] {
+    background-color: #1a1a1a;
+}
+
+@-webkit-keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@-moz-keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@-ms-keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@-o-keyframes progress-bar-stripes {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 40px 0;
+    }
+}
+
+@keyframes progress-bar-stripes {
+    from {
+        background-position: 40px 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+.progress {
+    height: 18px;
+    margin-bottom: 18px;
+    overflow: hidden;
+    background-color: #f7f7f7;
+    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
+    background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
+    background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
+    background-repeat: repeat-x;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.progress .bar {
+    width: 0;
+    height: 18px;
+    font-size: 12px;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    background-color: #0e90d2;
+    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+    background-image: -o-linear-gradient(top, #149bdf, #0480be);
+    background-image: linear-gradient(top, #149bdf, #0480be);
+    background-image: -ms-linear-gradient(top, #149bdf, #0480be);
+    background-repeat: repeat-x;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
+    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transition: width 0.6s ease;
+    -moz-transition: width 0.6s ease;
+    -ms-transition: width 0.6s ease;
+    -o-transition: width 0.6s ease;
+    transition: width 0.6s ease;
+}
+
+.progress-striped .bar {
+    background-color: #149bdf;
+    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    -webkit-background-size: 40px 40px;
+    -moz-background-size: 40px 40px;
+    -o-background-size: 40px 40px;
+    background-size: 40px 40px;
+}
+
+.progress.active .bar {
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+    -moz-animation: progress-bar-stripes 2s linear infinite;
+    -ms-animation: progress-bar-stripes 2s linear infinite;
+    -o-animation: progress-bar-stripes 2s linear infinite;
+    animation: progress-bar-stripes 2s linear infinite;
+}
+
+.progress-danger .bar {
+    background-color: #dd514c;
+    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
+    background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
+    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
+    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
+    background-image: linear-gradient(top, #ee5f5b, #c43c35);
+    background-repeat: repeat-x;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
+}
+
+.progress-danger.progress-striped .bar {
+    background-color: #ee5f5b;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-success .bar {
+    background-color: #5eb95e;
+    background-image: -moz-linear-gradient(top, #62c462, #57a957);
+    background-image: -ms-linear-gradient(top, #62c462, #57a957);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
+    background-image: -webkit-linear-gradient(top, #62c462, #57a957);
+    background-image: -o-linear-gradient(top, #62c462, #57a957);
+    background-image: linear-gradient(top, #62c462, #57a957);
+    background-repeat: repeat-x;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
+}
+
+.progress-success.progress-striped .bar {
+    background-color: #62c462;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-info .bar {
+    background-color: #4bb1cf;
+    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
+    background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
+    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
+    background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
+    background-image: linear-gradient(top, #5bc0de, #339bb9);
+    background-repeat: repeat-x;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
+}
+
+.progress-info.progress-striped .bar {
+    background-color: #5bc0de;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-warning .bar {
+    background-color: #faa732;
+    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
+    background-image: -ms-linear-gradient(top, #fbb450, #f89406);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
+    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
+    background-image: -o-linear-gradient(top, #fbb450, #f89406);
+    background-image: linear-gradient(top, #fbb450, #f89406);
+    background-repeat: repeat-x;
+    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
+}
+
+.progress-warning.progress-striped .bar {
+    background-color: #fbb450;
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.accordion {
+    margin-bottom: 18px;
+}
+
+.accordion-group {
+    margin-bottom: 2px;
+    border: 1px solid #e5e5e5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.accordion-heading {
+    border-bottom: 0;
+}
+
+.accordion-heading .accordion-toggle {
+    display: block;
+    padding: 8px 15px;
+}
+
+.accordion-toggle {
+    cursor: pointer;
+}
+
+.accordion-inner {
+    padding: 9px 15px;
+    border-top: 1px solid #e5e5e5;
+}
+
+.carousel {
+    position: relative;
+    margin-bottom: 18px;
+    line-height: 1;
+}
+
+.carousel-inner {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.carousel .item {
+    position: relative;
+    display: none;
+    -webkit-transition: 0.6s ease-in-out left;
+    -moz-transition: 0.6s ease-in-out left;
+    -ms-transition: 0.6s ease-in-out left;
+    -o-transition: 0.6s ease-in-out left;
+    transition: 0.6s ease-in-out left;
+}
+
+.carousel .item > img {
+    display: block;
+    line-height: 1;
+}
+
+.carousel .active,
+.carousel .next,
+.carousel .prev {
+    display: block;
+}
+
+.carousel .active {
+    left: 0;
+}
+
+.carousel .next,
+.carousel .prev {
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.carousel .next {
+    left: 100%;
+}
+
+.carousel .prev {
+    left: -100%;
+}
+
+.carousel .next.left,
+.carousel .prev.right {
+    left: 0;
+}
+
+.carousel .active.left {
+    left: -100%;
+}
+
+.carousel .active.right {
+    left: 100%;
+}
+
+.carousel-control {
+    position: absolute;
+    top: 40%;
+    left: 15px;
+    width: 40px;
+    height: 40px;
+    margin-top: -20px;
+    font-size: 60px;
+    font-weight: 100;
+    line-height: 30px;
+    color: #ffffff;
+    text-align: center;
+    background: #222222;
+    border: 3px solid #ffffff;
+    -webkit-border-radius: 23px;
+    -moz-border-radius: 23px;
+    border-radius: 23px;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+
+.carousel-control.right {
+    right: 15px;
+    left: auto;
+}
+
+.carousel-control:hover {
+    color: #ffffff;
+    text-decoration: none;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+}
+
+.carousel-caption {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 10px 15px 5px;
+    background: #333333;
+    background: rgba(0, 0, 0, 0.75);
+}
+
+.carousel-caption h4,
+.carousel-caption p {
+    color: #ffffff;
+}
+
+.hero-unit {
+    padding: 60px;
+    margin-bottom: 30px;
+    background-color: #eeeeee;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.hero-unit h1 {
+    margin-bottom: 0;
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+    color: inherit;
+}
+
+.hero-unit p {
+    font-size: 18px;
+    font-weight: 200;
+    line-height: 27px;
+    color: inherit;
+}
+
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.hide {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.invisible {
+    visibility: hidden;
+}
diff --git a/portal/src/main/webapp/extsys/vim/css/skill.css b/portal/src/main/webapp/extsys/vim/css/skill.css
new file mode 100644
index 0000000..929dde6
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/css/skill.css
@@ -0,0 +1,97 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+body {
+    font-family: 'Open Sans', sans-serif;
+    /*background-color: #f1f3fa;*/
+    width: '100%';
+    height: '100%';
+    margin-top: 10px;
+}
+
+div.skills-sunburst {
+    font-size: 12px;
+    font-weight: 400;
+    text-align: center;
+}
+
+#skillmap .skills-wrapper {
+    margin-top: 10px;
+    overflow: auto;
+}
+
+#skillmap .skills-sunburst {
+    float: left;
+    width: 500px;
+    margin-left: -80px;
+}
+
+#skillmap .skills-sunburst svg {
+    font: 11px 'Source Sans Pro', sans-serif;
+    font-weight: 900;
+
+    cursor: pointer;
+}
+
+#skillmap .skills-chart {
+    float: right;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 15px;
+    margin: 80px 20px 0 0;
+}
+
+#skillmap .skills-chart .breadcumb-text {
+    font-size: 13px;
+    font-weight: 700;
+}
+
+#skillmap .skills-chart #skills-chart-line {
+    fill: none;
+    stroke-width: 3.5px;
+}
+
+#skillmap .skills-chart .axis path,
+#skillmap .skills-chart .axis line {
+    fill: none;
+}
+
+#skillmap .skills-chart .x-axis path,
+#skillmap .skills-chart .y-axis path {
+    stroke: #444;
+    stroke-width: 1px;
+    shape-rendering: geometricPrecision;
+}
+
+#explanation {
+    position: absolute;
+    top: 165px;
+    left: 170px;
+    width: 140px;
+    text-align: center;
+    color: #666;
+    margin-top: 30px;
+}
+
+#percentage {
+    font-size: 2em;
+}
+
+#endlabel {
+    font-sizte: 1.5em;
+}
+
+div.skills-sunburst text {
+    text-anchor: middle;
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/css/vim.css b/portal/src/main/webapp/extsys/vim/css/vim.css
new file mode 100644
index 0000000..0998451
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/css/vim.css
@@ -0,0 +1,550 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+body {
+    font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+.blue {
+
+    background-color: #5b9bd1;
+    border-radius: 20px;
+    color: #fff;
+    font-weight: bold;
+    padding: 8px 0;
+    text-align: center;
+    width: 100px;
+}
+
+.blue:hover {
+    background-color: #e8f3fd;
+    color: #5b9bd1;
+}
+
+.blue.selected {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+.blue.selected:hover {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+p {
+    color: #444;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 21px;
+    margin: 0 0 12px 0;
+}
+
+p.credit {
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+    line-height: 140%;
+    margin: 36px 0 12px 0;
+    padding: 8px 0 0 0;
+    text-align: center;
+}
+
+ul.column {
+    float: left;
+    list-style: none;
+    width: 675px;
+}
+
+ul.column li {
+    background: #eee;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    float: left;
+    margin: 10px 0 0 10px;
+    display: block;
+    height: 150px;
+    text-align: center;
+    width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after, .button-collection:after, .clearfix:after, div.project-info:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.container-fluid {
+    background-color: white !important;
+    min-height: 500px;
+}
+
+.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;
+}
+
+.c3 {
+    margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+
+}
+
+.blue:selected {
+    border: 0;
+    background-color: #5b9bd1;
+}
+
+.btn {
+    /* border-width: 0; */
+    /* padding: 7px 14px; */
+    /* font-size: 14px; */
+    /* outline: none !important; */
+    /* background-image: none !important; */
+    /* filter: none; */
+    /* -webkit-box-shadow: none; */
+    -moz-box-shadow: none;
+    /* box-shadow: none; */
+    /* text-shadow: none; */
+}
+
+select {
+    border-width: 1px;
+    padding: 4px 1px;
+    border-radius: 4px;
+}
+
+.input-sm {
+    padding: 4px 10px;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Bootstrap buttons */
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.btn-default:active, .btn-default.active {
+    background-image: none;
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
+.btn-default:active:hover, .btn-default.active:hover {
+    background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+    background-image: none;
+}
+
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default .badge {
+    color: #fff;
+    background-color: #333;
+}
+
+.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] {
+    color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+    background-color: #f1f3fa;
+    padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+    background-color: #fff;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+    display: inline;
+}
+
+div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span {
+    /**height:33px;*/
+    margin-left: 15px;
+    color: #5b9bd1;
+    border-color: #ccc;
+    font-weight: bold;
+}
+
+.input {
+    width: 250px;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -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;
+}
+
+div.separator {
+    margin: 20px;
+}
+
+div.separator div {
+    text-align: center;
+    line-height: 0;
+}
+
+div.separator-line {
+    height: 1px !important;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+}
+
+.dropdown-toggle {
+    color: #5b9bd1;
+}
+
+.calendar-date {
+    color: #5b9bd1;
+}
+
+.range_inputs {
+    color: #5b9bd1;
+}
+
+.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;
+}
+
+#skills-chart-breadcrumb {
+    margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+    width: 220px;
+    line-height: 0;
+    height: 31px;
+    vertical-align: top;
+    margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+    width: 205px;
+}
+
+.daterangepicker .ranges input {
+    width: 95px !important;
+}
+
+td.details-control {
+    cursor: pointer;
+}
+
+tr.shown td.details-control {
+}
+
+.details table td {
+    word-wrap: break-word;
+    word-break: normal;
+    border-top: 1px solid #dddddd;
+}
+
+.details table tr:first-child td {
+    border-top: none;
+}
+
+.details table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+td.title {
+    width: 10%;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 8px 10px;
+}
+
+div.dataTables_length, div.dataTables_info {
+    display: inline;
+}
+
+div.dataTables_paginate {
+    display: inline;
+    float: right;
+}
+
+div.pagination-panel {
+    margin-right: 10px;
+}
+
+input.pagination-panel-input {
+    width: 50px;
+}
+
+#ict_res_table_div {
+    margin-top: 15px;
+}
+
+#ict_res_table_div label {
+    font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label {
+    color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+    color: #5b9bd1;
+}
+
+.cancelBtn {
+    padding: 5px 10px 5px 10px;
+}
+
+.btn:focus, .btn:active:focus, .btn.active:focus {
+    outline: 0;
+}
+
+#ict_res_table_div table {
+    width: 100% !important;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+#ict_vim_table tbody tr {
+    cursor: pointer;
+}
+
+/*卡片面板样式*/
+.animated-panel {
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-delay: 0.1s;
+}
+
+.hpanel {
+    border: none;
+    box-shadow: none;
+    margin-bottom: 25px;
+
+}
+
+.hpanel .panel-body {
+    border: 1px solid #e4e5e7;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+}
+
+.h-200 {
+    min-height: 120px;
+}
+
+.m-t-xl {
+    margin-top: 40px;
+}
+.card-name{
+    text-align: center;
+}
+.m-t-xl div {
+    margin-bottom: 15px;
+}
+
+.text-success {
+    color: #0d638f;
+}
+
+.hpanel > .panel-footer {
+    color: inherit;
+    border: 1px solid #e4e5e7;
+    border-top: none;
+    font-size: 90%;
+    background: #f7f9fa;
+    height: 40px;
+    padding: 5px 15px;
+}
+
+.color_cloud {
+    color: #ccc;
+}
+
+.stats-title {
+
+}
+
+h3 {
+    margin-top: 10px;
+    margin-bottom: 40px;
+    font-weight: 200;
+}
+
+.blue-font {
+    color: #428bca;
+}
+
+.hpanel > .panel-footer .pull-right a {
+    margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn {
+    min-width: 30px !important;
+}
+
+.font-bold {
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+.hpanel_show {
+    background-color: #f7f9fa;
+}
+.vnfm-padding {
+    padding-left: 0;
+}
+.step-content{
+    margin-top: 20px;
+}
+.px-ui-steps{
+    height: 36px;
+}
+.px-ui-horizon-ul-horizon{
+    display: flex;
+    box-orient: horizontal;
+    margin: 0;
+    padding: 0;
+}
+.px-ui-steps-li{
+    list-style: none;
+    position: relative;
+    width: 386px;
+    height: 24px;
+    line-height: 24px;
+    float: left;
+    margin-right: 0;
+}
+.px-ui-menuitem-div-passive{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 120px;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+}
+.step-active div:first-child span:last-child{
+    color: #4d5761;
+}
+.step-active div:last-child, .step-active div:first-child span:first-child{
+    background: #33bcff;
+}
+.px-ui-steps-number-passive{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    float: left;
+    color: #fff;
+    text-align: center;
+    background: #ddd;
+}
+.px-ui-steps-title-passive{
+    white-space: nowrap;
+}
+.px-ui-steps-title-active{
+    color: #4d5761;
+}
+.px-ui-steps-title-passive{
+    color: #7c868d;
+}
+
+.px-ui-underline-passive{
+    width: 100%;
+    height: 2px;
+    margin-top: 35px;
+    position: absolute;
+    background: #ddd;
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/css/vimChart.css b/portal/src/main/webapp/extsys/vim/css/vimChart.css
new file mode 100644
index 0000000..279798d
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/css/vimChart.css
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;
+    padding: 0px !important;
+    margin: 0px !important;
+    direction: ltr;
+    background-color: #f1f3fa !important;
+}
+
+.row {
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+select {
+    border-width: 1px;
+    padding: 4px 1px;
+    border-radius: 4px;
+}
+
+.container-fluid {
+    background-color: #fff;
+}
+
+.titlefont {
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+.separator-line {
+    height: 1px;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+    margin-bottom: 15px;
+    margin-top: 6px;
+    opacity: 0.6;
+}
+
+.main {
+    height: 400px;
+    /* width: 778px !important; */
+    overflow: hidden;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #e3e3e3;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js b/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js
new file mode 100644
index 0000000..d0388b3
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 loadPropertiesSideMenu(lang, propertiesFileNamePrefix, propertiesFilePath) {
+    jQuery.i18n.properties({
+        language: lang,
+        name: propertiesFileNamePrefix,
+        path: propertiesFilePath, // resource path
+        mode: 'map', 
+        callback: function () {
+            var i18nItems = $('[name_i18n=com_zte_conductor_ui_i18n]');
+            for (var i = 0; i < i18nItems.length; i++) {
+                var $item = $(i18nItems.eq(i));
+                var itemId = $item.attr('id_i18n');
+                var itemTitle = $item.attr('title');                
+                if (typeof($item.attr("title")) == "string") {
+                    $item.attr("title", ($.i18n.prop(itemTitle)));
+                }
+                if (undefined != itemId && typeof($item.attr("placeholder")) == "undefined") {
+                    $item.text($.i18n.prop(itemId));
+                } else if (undefined != itemId && typeof($item.attr("placeholder")) != "undefined") {
+                    $item.attr("placeholder", $.i18n.prop(itemId));
+                }
+            }
+        }
+    });
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'roc-vim-iui-i18n', 'i18n/');
+
diff --git a/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties
new file mode 100644
index 0000000..de4baa3
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties
@@ -0,0 +1,93 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+############## vimView.html i18n ##############
+com_zte_ums_eco_roc_vim_checking_status=Checking vim status...
+com_zte_ums_eco_roc_vim_name=Name
+com_zte_ums_eco_roc_vim_auth_url=Auth URL
+com_zte_ums_eco_roc_vim_username=Username
+com_zte_ums_eco_roc_vim_password=Password
+com_zte_ums_eco_roc_vim_tenant=Tenant
+com_zte_ums_eco_roc_vim_vendor=Vendor
+com_zte_ums_eco_roc_vim_type=Type
+com_zte_ums_eco_roc_vim_version=Version
+com_zte_ums_eco_roc_vim_cancel=Cancel
+com_zte_ums_eco_roc_vim_save=Save
+com_zte_ums_eco_roc_vim_status_update_time=Status update time:
+com_zte_ums_eco_roc_vim_register=Register
+com_zte_ums_eco_roc_vim_normal=Normal
+com_zte_ums_eco_roc_vim_abnormal=Abnormal
+com_zte_ums_eco_roc_vim_display_type=Cloud type:
+com_zte_ums_eco_roc_vim_display_version=Cloud region version:
+com_zte_ums_eco_roc_vim_total=Total
+com_zte_ums_eco_roc_vim_metric=vims
+com_zte_ums_eco_roc_vim_register_info=Register
+com_zte_ums_eco_roc_vim_modify_info=Modify
+com_zte_ums_eco_roc_vim_domain=Domain 
+com_zte_ums_eco_roc_vim_description=Description  
+############## js  ######################
+com_zte_ums_eco_roc_vim_auth_url_require_message=please input auth url
+com_zte_ums_eco_roc_vim_auth_url_alarm_message=example: http://xx.xx.xx.xx:5000/v2.0
+com_zte_ums_eco_roc_vim_name_alarm_message=please input vim name
+com_zte_ums_eco_roc_vim_username_alarm_message=please input username
+com_zte_ums_eco_roc_vim_password_alarm_message=please input password
+com_zte_ums_eco_roc_vim_tenant_alarm_message=please input tenant
+com_zte_ums_eco_roc_vim_version_alarm_message=please input version
+com_zte_ums_eco_roc_vim_vendor_alarm_message=please input vendor
+com_zte_ums_eco_roc_vim_getting_info=getting info...
+com_zte_ums_eco_roc_vim_dealing_info=dealing
+com_zte_ums_eco_roc_vim_confirm_delete_vim_record=Do you want to delete this instance?
+com_zte_ums_eco_roc_vim_vdu_isExists=This VIM's VUDs are used, you can't remove it.
+com_zte_ums_eco_roc_vim_growl_msg_query_vdu_failed=query VDU failed
+
+com_zte_ums_eco_roc_vim_growl_msg_title=vim info
+com_zte_ums_eco_roc_vim_growl_msg_remove_success=delete success
+com_zte_ums_eco_roc_vim_growl_msg_remove_failed=delete failed
+com_zte_ums_eco_roc_vim_growl_msg_remove_server_success=delete server success:
+com_zte_ums_eco_roc_vim_growl_msg_remove_server_failed=delete server falied:
+com_zte_ums_eco_roc_vim_growl_msg_query_failed=query faile
+
+com_zte_ums_eco_roc_vim_growl_msg_save_success=save success
+com_zte_ums_eco_roc_vim_growl_msg_save_failed=save failed
+com_zte_ums_eco_roc_vim_growl_msg_add_server_success=add server success, access port：
+com_zte_ums_eco_roc_vim_growl_msg_add_server_failed=add server falied：
+
+
+############## vimChart.html i18n ##############
+
+com_zte_ums_eco_roc_vim_resource_use=-resource using status
+com_zte_ums_eco_roc_vim_resource_vim_use=virtual machine manager resource using status
+com_zte_ums_eco_roc_vim_resource_tenant_use=-tenant quota using status
+
+com_zte_ums_eco_roc_vim_resource_chart_used=used:
+com_zte_ums_eco_roc_vim_resource_chart_total=total:
+com_zte_ums_eco_roc_vim_resource_chart_return=return
+com_zte_ums_eco_roc_vim_resource_chart_save_picture=save picture as
+com_zte_ums_eco_roc_vim_resource_chart_click_save=click save
+
+com_zte_ums_eco_roc_vim_resource_vim_cpu=CPU
+com_zte_ums_eco_roc_vim_resource_vim_memory=Memory
+com_zte_ums_eco_roc_vim_resource_vim_disk=Disk
+
+com_zte_ums_eco_roc_vim_resource_tenant_cpu=CPU
+com_zte_ums_eco_roc_vim_resource_tenant_memoryMb=Memory
+com_zte_ums_eco_roc_vim_resource_tenant_instances=Instances
+com_zte_ums_eco_roc_vim_resource_tenant_floatingIps=FloatingIps
+com_zte_ums_eco_roc_vim_resource_tenant_securityGroups=securityGroup
+com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage=volumeStorage
+com_zte_ums_eco_roc_vim_resource_tenant_volumes=Volumes
+
+com_zte_ums_eco_roc_vim_title_notice=Notice:
diff --git a/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties
new file mode 100644
index 0000000..dec6e8d
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties
@@ -0,0 +1,95 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+
+############## vimView.html i18n ##############
+com_zte_ums_eco_roc_vim_checking_status=vim连接状态检查中...
+com_zte_ums_eco_roc_vim_name=名称
+com_zte_ums_eco_roc_vim_auth_url=接入URL
+com_zte_ums_eco_roc_vim_username=用户名
+com_zte_ums_eco_roc_vim_password=密码
+com_zte_ums_eco_roc_vim_tenant=租户
+com_zte_ums_eco_roc_vim_vendor=厂商
+com_zte_ums_eco_roc_vim_type=类型
+com_zte_ums_eco_roc_vim_version=版本
+com_zte_ums_eco_roc_vim_cancel=取消
+com_zte_ums_eco_roc_vim_save=保存
+com_zte_ums_eco_roc_vim_status_update_time=状态更新时间：
+com_zte_ums_eco_roc_vim_register=注册VIM
+com_zte_ums_eco_roc_vim_normal=正常
+com_zte_ums_eco_roc_vim_abnormal=报警
+com_zte_ums_eco_roc_vim_display_type=类型：
+com_zte_ums_eco_roc_vim_total=共
+com_zte_ums_eco_roc_vim_metric=个vim
+com_zte_ums_eco_roc_vim_register_info=注册vim信息
+com_zte_ums_eco_roc_vim_modify_info=修改vim信息
+com_zte_ums_eco_roc_vim_domain=域信息 
+com_zte_ums_eco_roc_vim_description=描述
+############## js  ######################
+com_zte_ums_eco_roc_vim_auth_url_require_message=请输入url
+com_zte_ums_eco_roc_vim_auth_url_alarm_message=url格式有误(参考：http://xx.xx.xx.xx:5000/v2.0)
+com_zte_ums_eco_roc_vim_name_alarm_message=请输入名称
+com_zte_ums_eco_roc_vim_username_alarm_message=请输入用户名
+com_zte_ums_eco_roc_vim_password_alarm_message=请输入密码
+com_zte_ums_eco_roc_vim_tenant_alarm_message=请输入租户
+com_zte_ums_eco_roc_vim_version_alarm_message=请输入版本号
+com_zte_ums_eco_roc_vim_vendor_alarm_message=请输入厂商
+
+com_zte_ums_eco_roc_vim_getting_info=获取中...
+com_zte_ums_eco_roc_vim_dealing_info=处理中...
+
+com_zte_ums_eco_roc_vim_confirm_delete_vim_record=确定删除所选vim信息？
+com_zte_ums_eco_roc_vim_vdu_isExists=业务编排仍在使用此VIM上的VDU，不能删除它
+com_zte_ums_eco_roc_vim_growl_msg_query_vdu_failed=查询VDU失败
+
+
+com_zte_ums_eco_roc_vim_growl_msg_title=vim信息
+com_zte_ums_eco_roc_vim_growl_msg_remove_success=删除成功
+com_zte_ums_eco_roc_vim_growl_msg_remove_failed=删除失败
+com_zte_ums_eco_roc_vim_growl_msg_save_success=保存成功
+com_zte_ums_eco_roc_vim_growl_msg_save_failed=保存失败
+com_zte_ums_eco_roc_vim_growl_msg_remove_server_success=删除Server成功：
+com_zte_ums_eco_roc_vim_growl_msg_remove_server_failed=删除Server失败：
+com_zte_ums_eco_roc_vim_growl_msg_query_failed=查询失败
+com_zte_ums_eco_roc_vim_growl_msg_add_server_success=增加Server成功，端口号：
+com_zte_ums_eco_roc_vim_growl_msg_add_server_failed=增加Server失败：
+
+
+############## vimChart.html i18n ##############
+
+com_zte_ums_eco_roc_vim_resource_use=-资源使用情况
+com_zte_ums_eco_roc_vim_resource_vim_use=虚拟机管理器资源使用情况
+com_zte_ums_eco_roc_vim_resource_tenant_use=-租户配额使用情况
+
+com_zte_ums_eco_roc_vim_resource_chart_used=已用:
+com_zte_ums_eco_roc_vim_resource_chart_total=总共:
+com_zte_ums_eco_roc_vim_resource_chart_return=返回
+com_zte_ums_eco_roc_vim_resource_chart_save_picture=保存为图片
+com_zte_ums_eco_roc_vim_resource_chart_click_save=点击保存
+
+com_zte_ums_eco_roc_vim_resource_vim_cpu=虚拟内核
+com_zte_ums_eco_roc_vim_resource_vim_memory=内存
+com_zte_ums_eco_roc_vim_resource_vim_disk=磁盘
+
+com_zte_ums_eco_roc_vim_resource_tenant_cpu=虚拟内核
+com_zte_ums_eco_roc_vim_resource_tenant_memoryMb=内存
+com_zte_ums_eco_roc_vim_resource_tenant_instances=实例
+com_zte_ums_eco_roc_vim_resource_tenant_floatingIps=浮动IP
+com_zte_ums_eco_roc_vim_resource_tenant_securityGroups=安全组
+com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage=卷存储
+com_zte_ums_eco_roc_vim_resource_tenant_volumes=云硬盘
+
+com_zte_ums_eco_roc_vim_title_notice=提示:
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/js/client-cometd.js b/portal/src/main/webapp/extsys/vim/js/client-cometd.js
new file mode 100644
index 0000000..86c60bf
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/client-cometd.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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.
+ */
+/**
+ * Created by 10184303 on 15-11-17.
+ */
+
+$(function () {
+    var registerCometdMessage = function (url, callback) {
+        var cometd = new $.Cometd();
+        var cometdURL = location.protocol + "//" + location.host + "/api/nsocnotification/v1";
+        cometd.configure({
+            url: cometdURL,
+            logLevel: "debug"
+        });
+
+        cometd.addListener("/meta/handshake", function (handshake) {
+            if (handshake.successful === true) {
+                cometd.batch(function () {
+                    cometd.subscribe(url, function (message) {
+                        callback.call(this, message.data);
+                    });
+                });
+            }
+        });
+        cometd.handshake();
+    }
+    registerCometdMessage("/VIMstatus", function (data) {
+        var alarmArray = JSON.parse(data.greeting);
+        console.log(data.greeting);
+        for (var i = 0; i < alarmArray.length; i++) {
+            vm.vimStatusTime = alarmArray[i].checkTime;
+            for (var n = 0; n < vm.vimInfo.length; n++) {
+                if (alarmArray[i].id == vm.vimInfo[n].oid && alarmArray[i].hostStorageInfo == "") {
+                    vm.vimInfo[n].status = alarmArray[i].status;
+                    vm.vimInfo[n].errorInfo = alarmArray[i].alarmContent;
+                    break;
+                }
+                if (alarmArray[i].id == vm.vimInfo[n].oid && alarmArray[i].hostStorageInfo.length != "") {
+                    vm.vimInfo[n].status = "inactive";
+                    vm.vimInfo[n].errorInfo = alarmArray[i].hostStorageInfo;
+                    break;
+                }
+
+            }
+        }
+
+        setTimeout('resUtil.tooltipVimStatus()', 5000);
+    });
+});
+
diff --git a/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js b/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js
new file mode 100644
index 0000000..d88405b
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js
@@ -0,0 +1,925 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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.
+ */
+/* jqBootstrapValidation
+ * A plugin for automating validation on Twitter Bootstrap formatted forms.
+ *
+ * v1.3.6
+ *
+ * License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file
+ *
+ * http://ReactiveRaven.github.com/jqBootstrapValidation/
+ */
+
+(function ($) {
+
+    var createdElements = [];
+
+    var defaults = {
+        options: {
+            prependExistingHelpBlock: false,
+            sniffHtml: true, // sniff for 'required', 'maxlength', etc
+            preventSubmit: true, // stop the form submit event from firing if validation fails
+            submitError: false, // function called if there is an error when trying to submit
+            submitSuccess: false, // function called just before a successful submit event is sent to the server
+            semanticallyStrict: false, // set to true to tidy up generated HTML output
+            autoAdd: {
+                helpBlocks: true
+            },
+            filter: function () {
+                // return $(this).is(":visible"); // only validate elements you can see
+                return true; // validate everything
+            }
+        },
+        methods: {
+            init: function (options) {
+
+                var settings = $.extend(true, {}, defaults);
+
+                settings.options = $.extend(true, settings.options, options);
+
+                var $siblingElements = this;
+
+                var uniqueForms = $.unique(
+                    $siblingElements.map(function () {
+                        return $(this).parents("form")[0];
+                    }).toArray()
+                );
+
+                $(uniqueForms).bind("submit", function (e) {
+                    var $form = $(this);
+                    var warningsFound = 0;
+                    var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
+                    $inputs.trigger("submit.validation").trigger("validationLostFocus.validation");
+
+                    $inputs.each(function (i, el) {
+                        var $this = $(el),
+                            $controlGroup = $this.parents(".control-group").first();
+                        if (
+                            $controlGroup.hasClass("warning")
+                        ) {
+                            $controlGroup.removeClass("warning").addClass("error");
+                            warningsFound++;
+                        }
+                    });
+
+                    $inputs.trigger("validationLostFocus.validation");
+
+                    if (warningsFound) {
+                        if (settings.options.preventSubmit) {
+                            e.preventDefault();
+                        }
+                        $form.addClass("error");
+                        if ($.isFunction(settings.options.submitError)) {
+                            settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true));
+                        }
+                    } else {
+                        $form.removeClass("error");
+                        if ($.isFunction(settings.options.submitSuccess)) {
+                            settings.options.submitSuccess($form, e);
+                        }
+                    }
+                });
+
+                return this.each(function () {
+
+                    // Get references to everything we're interested in
+                    var $this = $(this),
+                        $controlGroup = $this.parents(".control-group").first(),
+                        $helpBlock = $controlGroup.find(".help-block").first(),
+                        $form = $this.parents("form").first(),
+                        validatorNames = [];
+
+                    // create message container if not exists
+                    if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) {
+                        $helpBlock = $('<div class="help-block" />');
+                        $controlGroup.find('.controls').append($helpBlock);
+                        createdElements.push($helpBlock[0]);
+                    }
+
+                    // =============================================================
+                    //                                     SNIFF HTML FOR VALIDATORS
+                    // =============================================================
+
+                    // *snort sniff snuffle*
+
+                    if (settings.options.sniffHtml) {
+                        var message = "";
+                        // ---------------------------------------------------------
+                        //                                                   PATTERN
+                        // ---------------------------------------------------------
+                        if ($this.attr("pattern") !== undefined) {
+                            message = "Not in the expected format<!-- data-validation-pattern-message to override -->";
+                            if ($this.data("validationPatternMessage")) {
+                                message = $this.data("validationPatternMessage");
+                            }
+                            $this.data("validationPatternMessage", message);
+                            $this.data("validationPatternRegex", $this.attr("pattern"));
+                        }
+                        // ---------------------------------------------------------
+                        //                                                       MAX
+                        // ---------------------------------------------------------
+                        if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
+                            var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
+                            message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->";
+                            if ($this.data("validationMaxMessage")) {
+                                message = $this.data("validationMaxMessage");
+                            }
+                            $this.data("validationMaxMessage", message);
+                            $this.data("validationMaxMax", max);
+                        }
+                        // ---------------------------------------------------------
+                        //                                                       MIN
+                        // ---------------------------------------------------------
+                        if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
+                            var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
+                            message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->";
+                            if ($this.data("validationMinMessage")) {
+                                message = $this.data("validationMinMessage");
+                            }
+                            $this.data("validationMinMessage", message);
+                            $this.data("validationMinMin", min);
+                        }
+                        // ---------------------------------------------------------
+                        //                                                 MAXLENGTH
+                        // ---------------------------------------------------------
+                        if ($this.attr("maxlength") !== undefined) {
+                            message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
+                            if ($this.data("validationMaxlengthMessage")) {
+                                message = $this.data("validationMaxlengthMessage");
+                            }
+                            $this.data("validationMaxlengthMessage", message);
+                            $this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
+                        }
+                        // ---------------------------------------------------------
+                        //                                                 MINLENGTH
+                        // ---------------------------------------------------------
+                        if ($this.attr("minlength") !== undefined) {
+                            message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
+                            if ($this.data("validationMinlengthMessage")) {
+                                message = $this.data("validationMinlengthMessage");
+                            }
+                            $this.data("validationMinlengthMessage", message);
+                            $this.data("validationMinlengthMinlength", $this.attr("minlength"));
+                        }
+                        // ---------------------------------------------------------
+                        //                                                  REQUIRED
+                        // ---------------------------------------------------------
+                        if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
+                            message = settings.builtInValidators.required.message;
+                            if ($this.data("validationRequiredMessage")) {
+                                message = $this.data("validationRequiredMessage");
+                            }
+                            $this.data("validationRequiredMessage", message);
+                        }
+                        // ---------------------------------------------------------
+                        //                                                    NUMBER
+                        // ---------------------------------------------------------
+                        if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
+                            message = settings.builtInValidators.number.message;
+                            if ($this.data("validationNumberMessage")) {
+                                message = $this.data("validationNumberMessage");
+                            }
+                            $this.data("validationNumberMessage", message);
+                        }
+                        // ---------------------------------------------------------
+                        //                                                     EMAIL
+                        // ---------------------------------------------------------
+                        if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
+                            message = "Not a valid email address<!-- data-validator-validemail-message to override -->";
+                            if ($this.data("validationValidemailMessage")) {
+                                message = $this.data("validationValidemailMessage");
+                            } else if ($this.data("validationEmailMessage")) {
+                                message = $this.data("validationEmailMessage");
+                            }
+                            $this.data("validationValidemailMessage", message);
+                        }
+                        // ---------------------------------------------------------
+                        //                                                MINCHECKED
+                        // ---------------------------------------------------------
+                        if ($this.attr("minchecked") !== undefined) {
+                            message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->";
+                            if ($this.data("validationMincheckedMessage")) {
+                                message = $this.data("validationMincheckedMessage");
+                            }
+                            $this.data("validationMincheckedMessage", message);
+                            $this.data("validationMincheckedMinchecked", $this.attr("minchecked"));
+                        }
+                        // ---------------------------------------------------------
+                        //                                                MAXCHECKED
+                        // ---------------------------------------------------------
+                        if ($this.attr("maxchecked") !== undefined) {
+                            message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->";
+                            if ($this.data("validationMaxcheckedMessage")) {
+                                message = $this.data("validationMaxcheckedMessage");
+                            }
+                            $this.data("validationMaxcheckedMessage", message);
+                            $this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked"));
+                        }
+                    }
+
+                    // =============================================================
+                    //                                       COLLECT VALIDATOR NAMES
+                    // =============================================================
+
+                    // Get named validators
+                    if ($this.data("validation") !== undefined) {
+                        validatorNames = $this.data("validation").split(",");
+                    }
+
+                    // Get extra ones defined on the element's data attributes
+                    $.each($this.data(), function (i, el) {
+                        var parts = i.replace(/([A-Z])/g, ",$1").split(",");
+                        if (parts[0] === "validation" && parts[1]) {
+                            validatorNames.push(parts[1]);
+                        }
+                    });
+
+                    // =============================================================
+                    //                                     NORMALISE VALIDATOR NAMES
+                    // =============================================================
+
+                    var validatorNamesToInspect = validatorNames;
+                    var newValidatorNamesToInspect = [];
+
+                    do // repeatedly expand 'shortcut' validators into their real validators
+                    {
+                        // Uppercase only the first letter of each name
+                        $.each(validatorNames, function (i, el) {
+                            validatorNames[i] = formatValidatorName(el);
+                        });
+
+                        // Remove duplicate validator names
+                        validatorNames = $.unique(validatorNames);
+
+                        // Pull out the new validator names from each shortcut
+                        newValidatorNamesToInspect = [];
+                        $.each(validatorNamesToInspect, function (i, el) {
+                            if ($this.data("validation" + el + "Shortcut") !== undefined) {
+                                // Are these custom validators?
+                                // Pull them out!
+                                $.each($this.data("validation" + el + "Shortcut").split(","), function (i2, el2) {
+                                    newValidatorNamesToInspect.push(el2);
+                                });
+                            } else if (settings.builtInValidators[el.toLowerCase()]) {
+                                // Is this a recognised built-in?
+                                // Pull it out!
+                                var validator = settings.builtInValidators[el.toLowerCase()];
+                                if (validator.type.toLowerCase() === "shortcut") {
+                                    $.each(validator.shortcut.split(","), function (i, el) {
+                                        el = formatValidatorName(el);
+                                        newValidatorNamesToInspect.push(el);
+                                        validatorNames.push(el);
+                                    });
+                                }
+                            }
+                        });
+
+                        validatorNamesToInspect = newValidatorNamesToInspect;
+
+                    } while (validatorNamesToInspect.length > 0)
+
+                    // =============================================================
+                    //                                       SET UP VALIDATOR ARRAYS
+                    // =============================================================
+
+                    var validators = {};
+
+                    $.each(validatorNames, function (i, el) {
+                        // Set up the 'override' message
+                        var message = $this.data("validation" + el + "Message");
+                        var hasOverrideMessage = (message !== undefined);
+                        var foundValidator = false;
+                        message =
+                            (
+                                message
+                                    ? message
+                                    : "'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->"
+                            )
+                        ;
+
+                        $.each(
+                            settings.validatorTypes,
+                            function (validatorType, validatorTemplate) {
+                                if (validators[validatorType] === undefined) {
+                                    validators[validatorType] = [];
+                                }
+                                if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) {
+                                    validators[validatorType].push(
+                                        $.extend(
+                                            true,
+                                            {
+                                                name: formatValidatorName(validatorTemplate.name),
+                                                message: message
+                                            },
+                                            validatorTemplate.init($this, el)
+                                        )
+                                    );
+                                    foundValidator = true;
+                                }
+                            }
+                        );
+
+                        if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) {
+
+                            var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]);
+                            if (hasOverrideMessage) {
+                                validator.message = message;
+                            }
+                            var validatorType = validator.type.toLowerCase();
+
+                            if (validatorType === "shortcut") {
+                                foundValidator = true;
+                            } else {
+                                $.each(
+                                    settings.validatorTypes,
+                                    function (validatorTemplateType, validatorTemplate) {
+                                        if (validators[validatorTemplateType] === undefined) {
+                                            validators[validatorTemplateType] = [];
+                                        }
+                                        if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) {
+                                            $this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]);
+                                            validators[validatorType].push(
+                                                $.extend(
+                                                    validator,
+                                                    validatorTemplate.init($this, el)
+                                                )
+                                            );
+                                            foundValidator = true;
+                                        }
+                                    }
+                                );
+                            }
+                        }
+
+                        if (!foundValidator) {
+                            $.error("Cannot find validation info for '" + el + "'");
+                        }
+                    });
+
+                    // =============================================================
+                    //                                         STORE FALLBACK VALUES
+                    // =============================================================
+
+                    $helpBlock.data(
+                        "original-contents",
+                        (
+                            $helpBlock.data("original-contents")
+                                ? $helpBlock.data("original-contents")
+                                : $helpBlock.html()
+                        )
+                    );
+
+                    $helpBlock.data(
+                        "original-role",
+                        (
+                            $helpBlock.data("original-role")
+                                ? $helpBlock.data("original-role")
+                                : $helpBlock.attr("role")
+                        )
+                    );
+
+                    $controlGroup.data(
+                        "original-classes",
+                        (
+                            $controlGroup.data("original-clases")
+                                ? $controlGroup.data("original-classes")
+                                : $controlGroup.attr("class")
+                        )
+                    );
+
+                    $this.data(
+                        "original-aria-invalid",
+                        (
+                            $this.data("original-aria-invalid")
+                                ? $this.data("original-aria-invalid")
+                                : $this.attr("aria-invalid")
+                        )
+                    );
+
+                    // =============================================================
+                    //                                                    VALIDATION
+                    // =============================================================
+
+                    $this.bind(
+                        "validation.validation",
+                        function (event, params) {
+
+                            var value = getValue($this);
+
+                            // Get a list of the errors to apply
+                            var errorsFound = [];
+
+                            $.each(validators, function (validatorType, validatorTypeArray) {
+                                if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
+                                    $.each(validatorTypeArray, function (i, validator) {
+                                        if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
+                                            errorsFound.push(validator.message);
+                                        }
+                                    });
+                                }
+                            });
+
+                            return errorsFound;
+                        }
+                    );
+
+                    $this.bind(
+                        "getValidators.validation",
+                        function () {
+                            return validators;
+                        }
+                    );
+
+                    // =============================================================
+                    //                                             WATCH FOR CHANGES
+                    // =============================================================
+                    $this.bind(
+                        "submit.validation",
+                        function () {
+                            return $this.triggerHandler("change.validation", {submitting: true});
+                        }
+                    );
+                    $this.bind(
+                        [
+                            "keyup",
+                            "focus",
+                            "blur",
+                            "click",
+                            "keydown",
+                            "keypress",
+                            "change"
+                        ].join(".validation ") + ".validation",
+                        function (e, params) {
+
+                            var value = getValue($this);
+
+                            var errorsFound = [];
+
+                            $controlGroup.find("input,textarea,select").each(function (i, el) {
+                                var oldCount = errorsFound.length;
+                                $.each($(el).triggerHandler("validation.validation", params), function (j, message) {
+                                    errorsFound.push(message);
+                                });
+                                if (errorsFound.length > oldCount) {
+                                    $(el).attr("aria-invalid", "true");
+                                } else {
+                                    var original = $this.data("original-aria-invalid");
+                                    $(el).attr("aria-invalid", (original !== undefined ? original : false));
+                                }
+                            });
+
+                            $form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation");
+
+                            errorsFound = $.unique(errorsFound.sort());
+
+                            // Were there any errors?
+                            if (errorsFound.length) {
+                                // Better flag it up as a warning.
+                                $controlGroup.removeClass("success error").addClass("warning");
+
+                                // How many errors did we find?
+                                if (settings.options.semanticallyStrict && errorsFound.length === 1) {
+                                    // Only one? Being strict? Just output it.
+                                    $helpBlock.html(errorsFound[0] +
+                                        ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
+                                } else {
+                                    // Multiple? Being sloppy? Glue them together into an UL.
+                                    $helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" +
+                                        ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" ));
+                                }
+                            } else {
+                                $controlGroup.removeClass("warning error success");
+                                if (value.length > 0) {
+                                    $controlGroup.addClass("success");
+                                }
+                                $helpBlock.html($helpBlock.data("original-contents"));
+                            }
+
+                            if (e.type === "blur") {
+                                $controlGroup.removeClass("success");
+                            }
+                        }
+                    );
+                    $this.bind("validationLostFocus.validation", function () {
+                        $controlGroup.removeClass("success");
+                    });
+                });
+            },
+            destroy: function () {
+
+                return this.each(
+                    function () {
+
+                        var
+                            $this = $(this),
+                            $controlGroup = $this.parents(".control-group").first(),
+                            $helpBlock = $controlGroup.find(".help-block").first();
+
+                        // remove our events
+                        $this.unbind('.validation'); // events are namespaced.
+                        // reset help text
+                        $helpBlock.html($helpBlock.data("original-contents"));
+                        // reset classes
+                        $controlGroup.attr("class", $controlGroup.data("original-classes"));
+                        // reset aria
+                        $this.attr("aria-invalid", $this.data("original-aria-invalid"));
+                        // reset role
+                        $helpBlock.attr("role", $this.data("original-role"));
+                        // remove all elements we created
+                        if (createdElements.indexOf($helpBlock[0]) > -1) {
+                            $helpBlock.remove();
+                        }
+
+                    }
+                );
+
+            },
+            collectErrors: function (includeEmpty) {
+
+                var errorMessages = {};
+                this.each(function (i, el) {
+                    var $el = $(el);
+                    var name = $el.attr("name");
+                    var errors = $el.triggerHandler("validation.validation", {includeEmpty: true});
+                    errorMessages[name] = $.extend(true, errors, errorMessages[name]);
+                });
+
+                $.each(errorMessages, function (i, el) {
+                    if (el.length === 0) {
+                        delete errorMessages[i];
+                    }
+                });
+
+                return errorMessages;
+
+            },
+            hasErrors: function () {
+
+                var errorMessages = [];
+
+                this.each(function (i, el) {
+                    errorMessages = errorMessages.concat(
+                        $(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {submitting: true}) : []
+                    );
+                });
+
+                return (errorMessages.length > 0);
+            },
+            override: function (newDefaults) {
+                defaults = $.extend(true, defaults, newDefaults);
+            }
+        },
+        validatorTypes: {
+            callback: {
+                name: "callback",
+                init: function ($this, name) {
+                    return {
+                        validatorName: name,
+                        callback: $this.data("validation" + name + "Callback"),
+                        lastValue: $this.val(),
+                        lastValid: true,
+                        lastFinished: true
+                    };
+                },
+                validate: function ($this, value, validator) {
+                    if (validator.lastValue === value && validator.lastFinished) {
+                        return !validator.lastValid;
+                    }
+
+                    if (validator.lastFinished === true) {
+                        validator.lastValue = value;
+                        validator.lastValid = true;
+                        validator.lastFinished = false;
+
+                        var rrjqbvValidator = validator;
+                        var rrjqbvThis = $this;
+                        executeFunctionByName(
+                            validator.callback,
+                            window,
+                            $this,
+                            value,
+                            function (data) {
+                                if (rrjqbvValidator.lastValue === data.value) {
+                                    rrjqbvValidator.lastValid = data.valid;
+                                    if (data.message) {
+                                        rrjqbvValidator.message = data.message;
+                                    }
+                                    rrjqbvValidator.lastFinished = true;
+                                    rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message);
+                                    // Timeout is set to avoid problems with the events being considered 'already fired'
+                                    setTimeout(function () {
+                                        rrjqbvThis.trigger("change.validation");
+                                    }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
+                                }
+                            }
+                        );
+                    }
+
+                    return false;
+
+                }
+            },
+            ajax: {
+                name: "ajax",
+                init: function ($this, name) {
+                    return {
+                        validatorName: name,
+                        url: $this.data("validation" + name + "Ajax"),
+                        lastValue: $this.val(),
+                        lastValid: true,
+                        lastFinished: true
+                    };
+                },
+                validate: function ($this, value, validator) {
+                    if ("" + validator.lastValue === "" + value && validator.lastFinished === true) {
+                        return validator.lastValid === false;
+                    }
+
+                    if (validator.lastFinished === true) {
+                        validator.lastValue = value;
+                        validator.lastValid = true;
+                        validator.lastFinished = false;
+                        $.ajax({
+                            url: validator.url,
+                            data: "value=" + value + "&field=" + $this.attr("name"),
+                            dataType: "json",
+                            success: function (data) {
+                                if ("" + validator.lastValue === "" + data.value) {
+                                    validator.lastValid = !!(data.valid);
+                                    if (data.message) {
+                                        validator.message = data.message;
+                                    }
+                                    validator.lastFinished = true;
+                                    $this.data("validation" + validator.validatorName + "Message", validator.message);
+                                    // Timeout is set to avoid problems with the events being considered 'already fired'
+                                    setTimeout(function () {
+                                        $this.trigger("change.validation");
+                                    }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
+                                }
+                            },
+                            failure: function () {
+                                validator.lastValid = true;
+                                validator.message = "ajax call failed";
+                                validator.lastFinished = true;
+                                $this.data("validation" + validator.validatorName + "Message", validator.message);
+                                // Timeout is set to avoid problems with the events being considered 'already fired'
+                                setTimeout(function () {
+                                    $this.trigger("change.validation");
+                                }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst
+                            }
+                        });
+                    }
+
+                    return false;
+
+                }
+            },
+            regex: {
+                name: "regex",
+                init: function ($this, name) {
+                    return {regex: regexFromString($this.data("validation" + name + "Regex"))};
+                },
+                validate: function ($this, value, validator) {
+                    return (!validator.regex.test(value) && !validator.negative)
+                        || (validator.regex.test(value) && validator.negative);
+                }
+            },
+            required: {
+                name: "required",
+                init: function ($this, name) {
+                    return {};
+                },
+                validate: function ($this, value, validator) {
+                    return !!(value.length === 0 && !validator.negative)
+                        || !!(value.length > 0 && validator.negative);
+                },
+                blockSubmit: true
+            },
+            match: {
+                name: "match",
+                init: function ($this, name) {
+                    var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first();
+                    element.bind("validation.validation", function () {
+                        $this.trigger("change.validation", {submitting: true});
+                    });
+                    return {"element": element};
+                },
+                validate: function ($this, value, validator) {
+                    return (value !== validator.element.val() && !validator.negative)
+                        || (value === validator.element.val() && validator.negative);
+                },
+                blockSubmit: true
+            },
+            max: {
+                name: "max",
+                init: function ($this, name) {
+                    return {max: $this.data("validation" + name + "Max")};
+                },
+                validate: function ($this, value, validator) {
+                    return (parseFloat(value, 10) > parseFloat(validator.max, 10) && !validator.negative)
+                        || (parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative);
+                }
+            },
+            min: {
+                name: "min",
+                init: function ($this, name) {
+                    return {min: $this.data("validation" + name + "Min")};
+                },
+                validate: function ($this, value, validator) {
+                    return (parseFloat(value) < parseFloat(validator.min) && !validator.negative)
+                        || (parseFloat(value) >= parseFloat(validator.min) && validator.negative);
+                }
+            },
+            maxlength: {
+                name: "maxlength",
+                init: function ($this, name) {
+                    return {maxlength: $this.data("validation" + name + "Maxlength")};
+                },
+                validate: function ($this, value, validator) {
+                    return ((value.length > validator.maxlength) && !validator.negative)
+                        || ((value.length <= validator.maxlength) && validator.negative);
+                }
+            },
+            minlength: {
+                name: "minlength",
+                init: function ($this, name) {
+                    return {minlength: $this.data("validation" + name + "Minlength")};
+                },
+                validate: function ($this, value, validator) {
+                    return ((value.length < validator.minlength) && !validator.negative)
+                        || ((value.length >= validator.minlength) && validator.negative);
+                }
+            },
+            maxchecked: {
+                name: "maxchecked",
+                init: function ($this, name) {
+                    var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
+                    elements.bind("click.validation", function () {
+                        $this.trigger("change.validation", {includeEmpty: true});
+                    });
+                    return {maxchecked: $this.data("validation" + name + "Maxchecked"), elements: elements};
+                },
+                validate: function ($this, value, validator) {
+                    return (validator.elements.filter(":checked").length > validator.maxchecked && !validator.negative)
+                        || (validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative);
+                },
+                blockSubmit: true
+            },
+            minchecked: {
+                name: "minchecked",
+                init: function ($this, name) {
+                    var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]");
+                    elements.bind("click.validation", function () {
+                        $this.trigger("change.validation", {includeEmpty: true});
+                    });
+                    return {minchecked: $this.data("validation" + name + "Minchecked"), elements: elements};
+                },
+                validate: function ($this, value, validator) {
+                    return (validator.elements.filter(":checked").length < validator.minchecked && !validator.negative)
+                        || (validator.elements.filter(":checked").length >= validator.minchecked && validator.negative);
+                },
+                blockSubmit: true
+            }
+        },
+        builtInValidators: {
+            email: {
+                name: "Email",
+                type: "shortcut",
+                shortcut: "validemail"
+            },
+            validemail: {
+                name: "Validemail",
+                type: "regex",
+                regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}",
+                message: "Not a valid email address<!-- data-validator-validemail-message to override -->"
+            },
+            passwordagain: {
+                name: "Passwordagain",
+                type: "match",
+                match: "password",
+                message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->"
+            },
+            positive: {
+                name: "Positive",
+                type: "shortcut",
+                shortcut: "number,positivenumber"
+            },
+            negative: {
+                name: "Negative",
+                type: "shortcut",
+                shortcut: "number,negativenumber"
+            },
+            number: {
+                name: "Number",
+                type: "regex",
+                regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?",
+                message: "Must be a number<!-- data-validator-number-message to override -->"
+            },
+            integer: {
+                name: "Integer",
+                type: "regex",
+                regex: "[+-]?\\\d+",
+                message: "No decimal places allowed<!-- data-validator-integer-message to override -->"
+            },
+            positivenumber: {
+                name: "Positivenumber",
+                type: "min",
+                min: 0,
+                message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->"
+            },
+            negativenumber: {
+                name: "Negativenumber",
+                type: "max",
+                max: 0,
+                message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->"
+            },
+            required: {
+                name: "Required",
+                type: "required",
+                message: "This is required<!-- data-validator-required-message to override -->"
+            },
+            checkone: {
+                name: "Checkone",
+                type: "minchecked",
+                minchecked: 1,
+                message: "Check at least one option<!-- data-validation-checkone-message to override -->"
+            }
+        }
+    };
+
+    var formatValidatorName = function (name) {
+        return name
+            .toLowerCase()
+            .replace(
+                /(^|\s)([a-z])/g,
+                function (m, p1, p2) {
+                    return p1 + p2.toUpperCase();
+                }
+            )
+            ;
+    };
+
+    var getValue = function ($this) {
+        // Extract the value we're talking about
+        var value = $this.val();
+        var type = $this.attr("type");
+        if (type === "checkbox") {
+            value = ($this.is(":checked") ? value : "");
+        }
+        if (type === "radio") {
+            value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : "");
+        }
+        return value;
+    };
+
+    function regexFromString(inputstring) {
+        return new RegExp("^" + inputstring + "$");
+    }
+
+    /**
+     * Thanks to Jason Bunting via StackOverflow.com
+     *
+     * http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910
+     * Short link: http://tinyurl.com/executeFunctionByName
+     **/
+    function executeFunctionByName(functionName, context /*, args*/) {
+        var args = Array.prototype.slice.call(arguments).splice(2);
+        var namespaces = functionName.split(".");
+        var func = namespaces.pop();
+        for (var i = 0; i < namespaces.length; i++) {
+            context = context[namespaces[i]];
+        }
+        return context[func].apply(this, args);
+    }
+
+    $.fn.jqBootstrapValidation = function (method) {
+
+        if (defaults.methods[method]) {
+            return defaults.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else if (typeof method === 'object' || !method) {
+            return defaults.methods.init.apply(this, arguments);
+        } else {
+            $.error('Method ' + method + ' does not exist on jQuery.jqBootstrapValidation');
+            return null;
+        }
+
+    };
+
+    $.jqBootstrapValidation = function (options) {
+        $(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this, arguments);
+    };
+
+})(jQuery);
diff --git a/portal/src/main/webapp/extsys/vim/js/vim-validate.js b/portal/src/main/webapp/extsys/vim/js/vim-validate.js
new file mode 100644
index 0000000..2297458
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/vim-validate.js
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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.
+ */
+/**
+ * Created by 10184303 on 15-11-17.
+ */
+var form = $('#vim_form');
+var error = $('.alert-danger', form);
+var success = $('.alert-success', form);
+form.validate({
+    doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+    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: {
+        url: {
+            required: true,
+            url: true,
+            maxlength: 50
+            //,repeatedName: true
+        },
+        vimName: {
+            required: true,
+            maxlength: 20
+        },
+        version: {
+            required: true,
+            maxlength: 20
+        },
+        vendor: {
+            required: true,
+            maxlength: 20
+        },
+        userName: {
+            required: true,
+            maxlength: 20
+        },
+        password: {
+            required: true,
+            maxlength: 20
+        },
+        tenant: {
+            required: true,
+            maxlength: 20
+        }
+    },
+    messages: {
+        url: {
+            //required: $.i18n.prop('com_zte_ums_zenic_topology_connectmanager_enter_name')
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_auth_url_require_message'),
+            url: $.i18n.prop('com_zte_ums_eco_roc_vim_auth_url_alarm_message')
+        },
+        vimName: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_name_alarm_message')
+        },
+        userName: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_username_alarm_message')
+        },
+        password: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_password_alarm_message')
+        },
+        version: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_version_alarm_message')
+        },
+        vendor: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_vendor_alarm_message')
+        },
+        tenant: {
+            required: $.i18n.prop('com_zte_ums_eco_roc_vim_tenant_alarm_message')
+        }
+    },
+    errorPlacement: function (error, element) { // render error placement for each input type
+        error.insertAfter(element); // for other inputs, just perform default behavior
+    },
+
+    invalidHandler: function (event, validator) { //display error alert on form submit
+        success.hide();
+        error.show();
+        //ZteFrameWork.scrollTo(error, -200);
+    },
+
+    highlight: function (element) { // hightlight error inputs
+        $(element)
+            .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+    },
+
+    unhighlight: function (element) { // revert the change done by hightlight
+        $(element)
+            .closest('.form-group').removeClass('has-error'); // set error class to the control group
+    },
+
+    success: function (label) {
+        label
+            .addClass('valid') // mark the current input as valid and display OK icon
+            .closest('.form-group').removeClass('has-error'); // set success class to the control group
+    },
+
+    submitHandler: function (form) {
+        success.show();
+        error.hide();
+        //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+    }
+
+});
diff --git a/portal/src/main/webapp/extsys/vim/js/vimChart.js b/portal/src/main/webapp/extsys/vim/js/vimChart.js
new file mode 100644
index 0000000..078a7e6
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/vimChart.js
@@ -0,0 +1,430 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vimChart = {};
+
+
+var labelTop = {
+    normal: {
+        label: {
+            show: true,
+            position: 'outer',
+            formatter: function (params) {
+                var total = params.series.data[1].value + params.series.data[0].value;
+                var util = params.series.data[0].util;                
+                return $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_used') + params.value + util + "\n" +
+                    $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_total') + total + util;
+            },
+            textStyle: {
+                baseline: 'bottom',
+                fontWeight: 'normal'
+
+            }
+        },
+        labelLine: {
+            show: true
+        }
+    }
+};
+
+
+var labelFromatter = {
+    normal: {
+        label: {
+            formatter: function (params) {
+                return params.series.data[0].name + "\n" + (100 - params.percent).toFixed(0) + '%'
+            },
+            textStyle: {
+                baseline: 'center',
+                color: "#000",
+                fontWeight: 'bold'
+
+
+            }
+        }
+    }
+}
+var labelBottom = {
+    normal: {
+        color: '#ccc',
+        label: {
+            show: true,
+            position: 'center'
+        },
+        labelLine: {
+            show: false
+        }
+    },
+    emphasis: {
+        color: 'rgba(0,0,0,0)'
+    }
+};
+
+var radius = [40, 55];
+
+var vimPieChart;
+
+vimChart.vimPieChartInit = function () {
+    vimPieChart = echarts.init(document.getElementById('vimPieChartDiv'));
+    vimPieChart.showLoading({
+        text: "Loading",
+        effect: "whirling",
+        textStyle: {
+            fontSize: 20
+        }
+    });
+
+}
+
+vimChart.vimPieChart = function (data) {
+
+    var option = {
+        animation: true,
+        legend: {
+            x: 'left',
+            y: "top",
+            data: [
+                $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'),
+                $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'),
+                $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk')
+            ],
+            orient: 'vertical'
+        },
+        color: ["#578ebe", "#44b6ae", "#DABA36"],
+        title: {
+            text: '',
+            subtext: '',
+            x: 'center'
+        },
+        toolbox: {
+            show: true,
+
+            feature: {
+                saveAsImage: {
+                    show: true,
+                    title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'),
+                    type: 'png',
+                    lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')]
+                }
+            }
+        },
+        series: [
+            {
+                type: 'pie',
+                center: ['15%', '55%'],
+                radius: radius,
+                itemStyle: labelFromatter,
+                data: [
+                    {
+                        name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'),
+                        value: data.usage.cpu,
+                        itemStyle: labelTop,
+                        util: ''
+                    },
+                    {name: 'other', value: data.resource.cpu - data.usage.cpu, itemStyle: labelBottom}
+
+                ]
+            },
+            {
+                type: 'pie',
+                center: ['40%', '55%'],
+                radius: radius,
+                itemStyle: labelFromatter,
+                data: [
+                    {
+                        name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'),
+                        value: data.usage.memoryMb,
+                        itemStyle: labelTop,
+                        util: 'MB'
+                    },
+                    {name: 'other', value: data.resource.memoryMb - data.usage.memoryMb, itemStyle: labelBottom}
+
+                ]
+            },
+            {
+                type: 'pie',
+                center: ['65%', '55%'],
+                radius: radius,
+                itemStyle: labelFromatter,
+                data: [
+                    {
+                        name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk'),
+                        value: data.usage.diskGb,
+                        itemStyle: labelTop,
+                        util: 'GB'
+                    },
+                    {name: 'other', value: data.resource.diskGb - data.usage.diskGb, itemStyle: labelBottom}
+
+                ]
+            }
+
+        ]
+    };
+
+
+     
+    vimPieChart.hideLoading();
+    vimPieChart.setOption(option);
+    window.onresize = vimPieChart.resize;
+
+
+}
+
+vimChart.getPieCenter = function (n) {
+    var center;
+    switch (n) {
+        case 1:
+            center = ['15%', '30%'];
+            break;
+        case 2:
+            center = ['40%', '30%'];
+            break;
+        case 3:
+            center = ['65%', '30%'];
+            break;
+        case 4:
+            center = ['15%', '80%'];
+            break;
+        case 5:
+            center = ['40%', '80%'];
+            break;
+        case 6:
+            center = ['65%', '80%'];
+            break;
+        case 7:
+            center = ['90%', '80%'];
+            break;
+
+    }
+    return center;
+}
+
+
+var tenantPieChart;
+vimChart.tenantPieChartInit = function () {
+    tenantPieChart = echarts.init(document.getElementById('tenantPieChartDiv'));
+
+    tenantPieChart.showLoading({
+        text: "Loading",
+        effect: "whirling",
+        textStyle: {
+            fontSize: 20
+        }
+    });
+}
+vimChart.tenantPieChart = function (data) {
+
+    var legend_data = new Array();
+    var series = new Array();
+    var n = 0;
+
+    if (data.quota.instances != -1) {
+        n++;
+
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances'));
+        var instances_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances'),
+                    value: data.usage.instances,
+                    itemStyle: labelTop,
+                    util: ''
+                },
+                {name: 'other', value: data.quota.instances - data.usage.instances, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(instances_series);
+
+    }
+    if (data.quota.cpu != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu'));
+        var cpu_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu'),
+                    value: data.usage.cpu,
+                    itemStyle: labelTop,
+                    util: ''
+                },
+                {name: 'other', value: data.quota.cpu - data.usage.cpu, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(cpu_series);
+    }
+    if (data.quota.memoryMb != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb'));
+        var memoryMb_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb'),
+                    value: data.usage.memoryMb,
+                    itemStyle: labelTop,
+                    util: 'MB'
+                },
+                {name: 'other', value: data.quota.memoryMb - data.usage.memoryMb, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(memoryMb_series);
+    }
+    if (data.quota.floatingIps != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps'));
+        var floatingIps_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps'),
+                    value: data.usage.floatingIps,
+                    itemStyle: labelTop,
+                    util: ''
+                },
+                {name: 'other', value: data.quota.floatingIps - data.usage.floatingIps, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(floatingIps_series);
+    }
+    if (data.quota.securityGroups != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups'));
+        var securityGroups_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups'),
+                    value: data.usage.securityGroups,
+                    itemStyle: labelTop,
+                    util: ''
+                },
+                {name: 'other', value: data.quota.securityGroups - data.usage.securityGroups, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(securityGroups_series);
+    }
+    if (data.quota.volumes != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes'));
+        var volumes_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes'),
+                    value: data.usage.volumes,
+                    itemStyle: labelTop,
+                    util: ''
+                },
+                {name: 'other', value: data.quota.volumes - data.usage.volumes, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(volumes_series);
+    }
+    if (data.quota.volumeStorage != -1) {
+        n++;
+        legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage'));
+        var volumeStorage_series = {
+            type: 'pie',
+            center: vimChart.getPieCenter(n),
+            radius: radius,
+            itemStyle: labelFromatter,
+            data: [
+                {
+                    name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage'),
+                    value: data.usage.volumeStorage,
+                    itemStyle: labelTop,
+                    util: 'GB'
+                },
+                {name: 'other', value: data.quota.volumeStorage - data.usage.volumeStorage, itemStyle: labelBottom}
+
+            ]
+        };
+        series.push(volumeStorage_series);
+    }
+
+
+    var option = {
+        animation: true,
+        legend: {
+            x: 'left',
+            y: "top",
+            data: legend_data,
+            orient: 'vertical'
+        },
+        color: ["#578ebe", "#44b6ae", "#DABA36", "#F79695", "#9699e0", "#57b5e3", "#48c79c"],
+        title: {
+            text: '',
+            subtext: '',
+            x: 'center'
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {
+                    show: true,
+                    title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'),
+                    type: 'png',
+                    lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')]
+                }
+            }
+        },
+        series: series
+    };
+
+
+  
+    tenantPieChart.hideLoading();
+    tenantPieChart.setOption(option);
+    window.onresize = tenantPieChart.resize;
+
+
+}
+
+vimChart.growl = function (message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;" + $.i18n.prop('com_zte_ums_eco_roc_vim_title_notice'),
+        message: message + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
+    }, {
+        type: type,
+        delay: 0
+    });
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/js/vimChartController.js b/portal/src/main/webapp/extsys/vim/js/vimChartController.js
new file mode 100644
index 0000000..cdfaa40
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/vimChartController.js
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vm = avalon
+    .define({
+        $id: "vimChartController",
+        $vimChartUrl: '../../api/vim/v1/{vim_id}/resource',
+        $tenantChartUrl: '../../api/vim/v1/{vim_id}/resource/{tenant_name}',
+        $tenantListUrl: '../../api/vim/v1/{vim_id}/tenants',
+        $tenantRoleUrl: '../../api/vim/v1/{vim_id}/roles',
+        vimInfo: {
+            name: name,
+            id: id,
+            tenant: tenant,
+            isAdmin: true
+        },
+        tenantSelectList: {
+            condName: $.i18n.prop("com_zte_ums_eco_roc_vim_type"),
+            component_type: 'select',
+            selectItems: []
+        },
+        initChart: function () {
+
+            //has admin role
+            var tenantRoleUrl = vm.$tenantRoleUrl.replace("{vim_id}", vm.vimInfo.id);
+            $.ajax({
+                "type": 'get',
+                "url": tenantRoleUrl,
+                "dataType": "json",
+                success: function (resp) {
+                    vm.vimInfo.isAdmin = (resp == null) ? false : resp.isAdminRole;
+
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vimChart.growl("get [tenant Role] is error ：" + textStatus + ":" + errorThrown, "danger");
+                },
+                complete: function () {
+                    if (vm.vimInfo.isAdmin == true) {
+
+                        //get all resource 
+                        vm.vimChartLoad();
+
+                        //get tenant list
+                        vm.vimListLoad();
+                    }
+
+                }
+            });
+            //get resource of tenant 
+            vm.tenantChartLoad();
+        },
+        gotoVimPage: function () {
+            window.parent.ZteFrameWork.goToURLByIDAndNewAction('eco_roc_vimmgr');
+        },
+        vimListLoad: function () {
+            var tenantListUrl = vm.$tenantListUrl.replace("{vim_id}", vm.vimInfo.id);
+            $.ajax({
+                "type": 'get',
+                "url": tenantListUrl,
+                "dataType": "json",
+                success: function (resp) {
+                    vm.tenantSelectList.selectItems = (resp == null) ? [] : resp;
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vimChart.growl("get [tenant List] is error ：" + textStatus + ":" + errorThrown, "danger");
+                }
+            });
+        },
+        vimChartLoad: function () {
+            var viminitData = {
+                "resource": {
+                    "cpu": 0,
+                    "memoryMb": 503,
+                    "diskGb": 9.8
+                },
+                "usage": {
+                    "cpu": 0,
+                    "memoryMb": 0,
+                    "diskGb": 0
+                }
+            }
+
+            vimChart.vimPieChartInit();
+
+            var vimChartUrl = vm.$vimChartUrl.replace("{vim_id}", vm.vimInfo.id);
+
+
+            $.ajax({
+                "type": 'get',
+                "url": vimChartUrl,
+                "dataType": "json",
+                success: function (resp) {
+                    var vimData = (resp == null) ? viminitData : resp;
+                    vimChart.vimPieChart(vimData);
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vimChart.growl("get [virtual machine manager resource using status] is error ：" + textStatus + ":" + errorThrown, "danger");
+                }
+            });
+
+        },
+        tenantChartLoad: function () {
+            var tenantChartUrl = vm.$tenantChartUrl.replace("{vim_id}", vm.vimInfo.id).replace("{tenant_name}", vm.vimInfo.tenant);
+
+            var tenantinitData = {
+                "tenant_name": "",
+                "errormsg": "",
+                "quota": {
+                    "cpu": 0,
+                    "memoryMb": 0,
+                    "instances": 0,
+                    "floatingIps": 0,
+                    "securityGroups": 0,
+                    "volumeStorage": 0,
+                    "volumes": 0
+                },
+                "usage": {
+                    "cpu": 0,
+                    "memoryMb": 0,
+                    "instances": 0,
+                    "floatingIps": 0,
+                    "securityGroups": 0,
+                    "volumeStorage": 0,
+                    "volumes": 0
+                }
+            };
+            vimChart.tenantPieChartInit();
+            $.ajax({
+                "type": 'get',
+                "url": tenantChartUrl,
+                "dataType": "json",
+                success: function (resp) {
+                    var tenantData = (resp == null) ? tenantinitData : resp;
+                    if (tenantData.errormsg != null) {
+                        vimChart.growl(tenantData.errormsg, "danger");
+                    }
+                    vimChart.tenantPieChart(tenantData);
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vimChart.growl("get [tenant quota using status] occur error ：" + textStatus + ":" + errorThrown, "danger");
+                }
+            });
+
+        }
+
+    });
+avalon.scan();
+vm.initChart();
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/js/vimController.js b/portal/src/main/webapp/extsys/vim/js/vimController.js
new file mode 100644
index 0000000..486936c
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/vimController.js
@@ -0,0 +1,267 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vm = avalon
+    .define({
+        $id: "vimController",
+        vimInfo: [],
+        executeWait: {clazz: 'alert-info', visible: true, text: $.i18n.prop('com_zte_ums_eco_roc_vim_checking_status')},
+        executeError: {clazz: 'alert-danger', visible: true, text: 'error'},
+        currentElement: {},
+        currentIndex: -1,
+        saveType: "add",
+        modalTitle: $.i18n.prop('com_zte_ums_eco_roc_vim_register'),
+        $blankElement: {
+            "cloud-owner": "ZTE",
+            "status": "active",
+            "cloud-region-id": "",
+            "cloud-type": "openstack",
+            "cloud-region-version": "v1.0",
+            "owner-defined-type": "",
+            "cloud-zone": "",
+            "complex-name": "",
+            "cloud-extra-info": "",
+            "auth-info-items": [
+                {
+                    "username": "",
+                    "password": "",
+                    "auth-url": "",
+                    "ssl-cacert": "",
+                    "ssl-insecure": "",
+                    "cloud-domain": ""
+                }
+            ]
+        },
+        $Status: {
+            success: "active",
+            failed: "inactive",
+            displayActive: $.i18n.prop('com_zte_ums_eco_roc_vim_normal'),
+            displayInactive: $.i18n.prop('com_zte_ums_eco_roc_vim_abnormal')
+        },
+        isSave: true,
+        action: {ADD: 'add', UPDATE: 'update'},
+        $queryVimInfoUrl: 'mock-data/vim.json',//'/onapapi/aai/esr/v1/vims',
+        $addVimInfoUrl: '/onapapi/aai/esr/v1/vims/',
+        $updateVimInfoUrl: '/onapapi/aai/esr/v1/vims/',
+        $delVimInfoUrl: '/onapapi/aai/esr/v1/vims/{vim_id}',
+        $initTable: function () {
+            $.ajax({
+                "type": 'get',
+                "url": vm.$queryVimInfoUrl,
+                "success": function (resp, statusText, jqXHR) {
+                    if (jqXHR.status == "200") {
+                        vm.vimInfo = resp;
+                    }
+                    else {
+                        vm.vimInfo = [];
+                        bootbox.alert($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_query_failed"));
+                        return;
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    bootbox.alert($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_query_failed") + textStatus + ":" + errorThrown);
+                    return;
+                },
+                complete: function () {
+                    resUtil.tooltipVimStatus();
+                }
+            });
+
+        },
+        $showVimTable: function (index, action) {
+            vm.isSave = false;
+            vm.currentIndex = index;
+            vm.saveType = action;
+            if (vm.action.ADD == action) {
+                vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_register');
+                vm.fillElement(vm.$blankElement, vm.currentElement);
+            } else {
+                vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_modify_info');
+                vm.fillElement(vm.vimInfo[index], vm.currentElement);
+            }
+            vm.$showModal();
+        },
+        $showModal: function () {
+            $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove();
+            $("#addVimDlg").modal("show");
+        },
+        $hideModal: function () {
+            $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove();
+            $("#addVimDlg").modal("hide");
+        },
+        $saveVimTable: function (index) {
+            vm.isSave = true;
+            if (form.valid() == false) {
+                vm.isSave = false;
+                return false;
+            }
+            var res = false;
+            if (vm.saveType == "add") {
+                res = vm.persistVim();
+            } else if (vm.saveType == "update") {
+                res = vm.updateVim();
+            }
+            if(res){
+                vm.$hideModal();
+            }
+        },
+        //add vim
+        persistVim: function () {
+            var newElement = vm.getVIMSave();
+            vm.vimInfo.push(newElement);
+            return true;
+            /*$.ajax({
+                type: "Post",
+                url: vm.$addVimInfoUrl,
+                data: JSON.stringify(vm.currentElement.$model),
+                async: false,
+                dataType: "json",
+                contentType: 'application/json',
+                success: function (data, statusText, jqXHR) {
+                    vm.executeWait.visible = false;
+                    vm.executeError.visible = false;
+                    if (jqXHR.status == "201") {
+                        vm.addVim.vimId = data.vimId;
+                        vm.addVim.name = data.name;
+                        vm.addVim.tenant = data.tenant;
+                        vm.addVim.type = data.type;
+                        var newVim = jQuery.extend({}, vm.addVim);
+                        vm.vimInfo.push(newVim);
+
+                        $('#addVimDlg').modal('hide');
+                        resUtil.growl($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_title") + $.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_save_success"), "success");
+                    } else {
+                        vm.executeError.visible = true;
+                        vm.executeError.text = $.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_save_failed");
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.executeError.visible = true;
+                    vm.executeError.text = textStatus + ":" + errorThrown;
+                    vm.executeWait.visible = false;
+                    vm.isSave = false;
+                }
+            });*/
+        },
+        //update vim
+        updateVim: function () {
+            vm.fillElement(vm.getVIMSave(), vm.vimInfo[vm.currentIndex]);
+            return true;
+           /* $.ajax({
+                type: "Put",
+                url: vm.$updateVimInfoUrl + vm.addVim.vimId,
+                contentType: 'application/json',
+                data: JSON.stringify(vm.currentElement.$model),
+                dataType: "json",
+                async: false,
+                success: function (data, statusText, jqXHR) {
+                    vm.executeWait.visible = false;
+                    vm.executeError.visible = false;
+                    if (jqXHR.status == "200") {
+                        for (var i = 0; i < vm.vimInfo.length; i++) {
+                            if (vm.vimInfo[i].vimId == vm.addVim.vimId) {
+                                vm.vimInfo[i].name = vm.addVim.vimName;
+                                vm.vimInfo[i].userName = vm.addVim.userName;
+                                vm.vimInfo[i].password = vm.addVim.password;
+                                vm.vimInfo[i].url = vm.addVim.url;
+                                vm.vimInfo[i].tenant = vm.addVim.tenant;
+                                vm.vimInfo[i].domain = vm.addVim.domain;
+                                vm.vimInfo[i].description = vm.addVim.description;
+                                vm.vimInfo[i].type = vm.addVim.vimType;
+                                vm.vimInfo[i].version=vm.addVim.version;
+                                vm.vimInfo[i].vendor=vm.addVim.vendor;
+                            }
+                        }
+                        $('#addVimDlg').modal('hide');
+                        resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_save_success'), "success");
+                    }
+                    else {
+                        vm.executeError.visible = true;
+                        vm.executeError.text = $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_save_failed');
+                    }
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    vm.isSave = false;
+                    vm.executeError.visible = true;
+                    vm.executeError.text = textStatus + ":" + errorThrown;
+                    vm.executeWait.visible = false;
+                }
+            });*/
+        },
+        delVim: function (index) {
+            bootbox.confirm($.i18n.prop('com_zte_ums_eco_roc_vim_confirm_delete_vim_record'), function (result) {
+                if (result) {
+                    var id = vm.vimInfo[index]["id"];
+                    vm.vimInfo.splice(index, 1);
+                   /* $.ajax({
+                        type: "DELETE",
+                        url: vm.$delVimInfoUrl.replace('{vim_id}', el.vimId),
+                        success: function (data, statusText, jqXHR) {
+                            if (jqXHR.status == "204") {
+                                for (var i = 0; i < vm.vimInfo.length; i++) {
+                                    if (el.vimId == vm.vimInfo[i].vimId) {
+                                        vm.vimInfo.splice(i, 1);
+                                        break;
+                                    }
+                                }
+                                resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_remove_success'), "success");
+                            }
+                            else {
+                                resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_remove_failed'), "warning");
+                            }
+                        },
+                        error: function (XMLHttpRequest, textStatus, errorThrown) {
+                            resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + errorThrown, "danger");
+                        }
+                    });*/
+                }
+            });
+        },
+        fillElement: function (sourceElement, targetElement) {
+            targetElement["cloud-owner"] = sourceElement["cloud-owner"];
+            targetElement["status"] = sourceElement["status"];
+            targetElement["cloud-region-id"] = sourceElement["cloud-region-id"];
+            targetElement["cloud-type"] = sourceElement["cloud-type"];
+            targetElement["cloud-region-version"] = sourceElement["cloud-region-version"];
+            targetElement["owner-defined-type"] = sourceElement["owner-defined-type"];
+            targetElement["cloud-zone"] = sourceElement["cloud-zone"];
+            targetElement["complex-name"] = sourceElement["complex-name"];
+            targetElement["cloud-extra-info"] = sourceElement["cloud-extra-info"];
+            if(!targetElement["auth-info-items"]){
+                targetElement["auth-info-items"] = [{}];
+            }
+            targetElement["auth-info-items"][0]["username"] = sourceElement["auth-info-items"][0]["username"];
+            targetElement["auth-info-items"][0]["password"] = sourceElement["auth-info-items"][0]["password"];
+            targetElement["auth-info-items"][0]["auth-url"] = sourceElement["auth-info-items"][0]["auth-url"];
+            targetElement["auth-info-items"][0]["ssl-cacert"] = sourceElement["auth-info-items"][0]["ssl-cacert"];
+            targetElement["auth-info-items"][0]["ssl-insecure"] = sourceElement["auth-info-items"][0]["ssl-insecure"];
+            targetElement["auth-info-items"][0]["cloud-domain"] = sourceElement["auth-info-items"][0]["cloud-domain"];
+        },
+        getVIMSave: function () {
+            var vimSave = $.extend(true, {}, vm.currentElement.$model);
+            vimSave["auth-info-items"] = $.extend(true, {}, vm.currentElement["auth-info-items"].$model);
+            return vimSave;
+        },
+        gotoChartPage: function (oid, name, tenant) {
+            window.location.href = "vimChart.html?" + oid + "&" + name + "&" + tenant;
+        }
+    });
+vm.currentElement = $.extend(true, {}, vm.$blankElement);
+avalon.scan();
+vm.$initTable();
+
+
+
+
diff --git a/portal/src/main/webapp/extsys/vim/js/vimUtil.js b/portal/src/main/webapp/extsys/vim/js/vimUtil.js
new file mode 100644
index 0000000..610a266
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/js/vimUtil.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 resUtil = {};
+
+resUtil.tooltipVimStatus = function () {
+    $("[data-toggle='tooltip']").tooltip();
+
+}
+
+resUtil.growl = function (message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;Notice: ",
+        message: message + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
+    }, {
+        type: type
+    });
+    /*
+     $.bootstrapGrowl(message, {
+     ele: 'body', // which element to append to
+     type: type, // (null, 'info', 'danger', 'success')
+     offset: {from: 'bottom', amount: 20}, // 'top', or 'bottom'
+     align: 'right', // ('left', 'right', or 'center')
+     width: 'auto', // (integer, or 'auto')
+     delay: 3000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
+     allow_dismiss: false, // If true then will display a cross to close the popup.
+     stackup_spacing: 10 // spacing between consecutively stacked growls.
+     });
+     */
+}
+
+
+
+
+
+
+
+
diff --git a/portal/src/main/webapp/extsys/vim/mock-data/vim.json b/portal/src/main/webapp/extsys/vim/mock-data/vim.json
new file mode 100644
index 0000000..d18b74f
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/mock-data/vim.json
@@ -0,0 +1,44 @@
+[

+  {

+    "cloud-owner": "ZTE",

+    "status": "active",

+    "cloud-region-id": "region-one",

+    "cloud-type": "openstack",

+    "cloud-region-version": "v1.0",

+    "owner-defined-type": "owner-defined-type",

+    "cloud-zone": "cloud zone",

+    "complex-name": "complex name",

+    "cloud-extra-info": "cloud-extra-info",

+    "auth-info-items": [

+      {

+        "username": "admin",

+        "password": "admin",

+        "auth-url": "http://10.74.151.13:5000/v2.0",

+        "ssl-cacert": "ssl-cacert",

+        "ssl-insecure": "ssl-insecure",

+        "cloud-domain": "cloud-domain"

+      }

+    ]

+  },

+  {

+    "cloud-owner": "ZTE",

+    "status": "inactive",

+    "cloud-region-id": "region-one",

+    "cloud-type": "openstack",

+    "cloud-region-version": "v1.0",

+    "owner-defined-type": "owner-defined-type",

+    "cloud-zone": "cloud zone",

+    "complex-name": "complex name",

+    "cloud-extra-info": "cloud-extra-info",

+    "auth-info-items": [

+      {

+        "username": "admin",

+        "password": "admin",

+        "auth-url": "http://10.74.151.13:5000/v2.0",

+        "ssl-cacert": "ssl-cacert",

+        "ssl-insecure": "ssl-insecure",

+        "cloud-domain": "cloud-domain"

+      }

+    ]

+  }

+]
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/vimChart.html b/portal/src/main/webapp/extsys/vim/vimChart.html
new file mode 100644
index 0000000..c6fe522
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/vimChart.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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 lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
+    <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
+    <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet" type="text/css">
+    <link href="../../thirdparty/css/ZteIctIcons/style.css" rel="stylesheet" type="text/css">
+    <link href="../../thirdparty/animate/animate.min.css" rel="stylesheet" type="text/css"/>
+    <link href="css/vimChart.css" rel="stylesheet" type="text/css"/>
+    <style>
+        .ms-controller {
+            visibility: hidden
+        }
+    </style>
+    <script>
+        var id, name, tenant;
+        if (window.location.search && window.location.search.length > 1) {
+            var arr = window.location.search.split("&");
+            id = arr[0].replace("?", "");
+            name = arr[1];
+            tenant = arr[2];
+        }
+    </script>
+</head>
+<body>
+<div class="ms-controller" ms-controller="vimChartController">
+    <div class="container-fluid">
+
+        <div class="row" style=" margin-top: 15px;">
+            <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">
+                {{vimInfo.name}}<span id_i18n="com_zte_ums_eco_roc_vim_resource_use"
+                                      name_i18n="com_zte_conductor_ui_i18n"></span>
+            </div>
+            <div class="pull-right">
+                <a href="#" ms-click="gotoVimPage()" id_i18n="com_zte_ums_eco_roc_vim_resource_chart_return"
+                   name_i18n="com_zte_conductor_ui_i18n"></a>
+
+            </div>
+        </div>
+        <div class="separator-line"></div>
+
+        <div class="row row-fluid">
+
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 " ms-if="vimInfo.isAdmin==true">
+
+                <div class="form-body">
+                    <div class="form-title">
+                        <span id_i18n="com_zte_ums_eco_roc_vim_resource_vim_use"
+                              name_i18n="com_zte_conductor_ui_i18n"></span>
+                    </div>
+                    <div id="vimPieChartDiv" style="width:100%;height:200px" class="main"></div>
+
+                </div>
+            </div>
+
+
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
+                <div class="form-body">
+                    <div class="form-title">
+                        {{vimInfo.tenant}}<span id_i18n="com_zte_ums_eco_roc_vim_resource_tenant_use"
+                                                name_i18n="com_zte_conductor_ui_i18n"></span>
+                        <div class="pull-right">
+                            <select class="form-control m-b" ms-if="vimInfo.isAdmin==true"
+                                    ms-each="tenantSelectList.selectItems" ms-duplex="vimInfo.tenant"
+                                    ms-change="tenantChartLoad()">
+                                <option ms-attr-value='el.name'>{{el.name}}</option>
+                            </select>
+
+
+                        </div>
+                    </div>
+
+                    <div id="tenantPieChartDiv" style="width:100%;height:400px" class="main"></div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</div>
+
+<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
+<script src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>
+<script type="text/javascript" src="./i18n/loadi18nApp.js"></script>
+<script src="../../thirdparty/echarts/echarts-all.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
+<script src="../../thirdparty/avalon/avalon.js"></script>
+<script type="text/javascript" src="js/vimChart.js"></script>
+<script type="text/javascript" src="js/vimChartController.js"></script>
+<script type="text/javascript" src="../../thirdparty/js/core/hk.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vim/vimView.html b/portal/src/main/webapp/extsys/vim/vimView.html
new file mode 100644
index 0000000..ba67d45
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vim/vimView.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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 lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/uniform/css/uniform.default.css" rel="stylesheet"/>
+    <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet" type="text/css">
+    <link href="css/vim.css" rel="stylesheet" type="text/css"/>
+    <link href="css/skill.css" rel="stylesheet" type="text/css"/>
+    <link href="../../thirdparty/animate/animate.min.css" rel="stylesheet" type="text/css"/>
+    <style>
+        .ms-controller {
+            visibility: hidden
+        }
+    </style>
+</head>
+<body>
+<div class="ms-controller container-fluid" ms-controller="vimController">
+
+    <div id="addVimDlg" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
+         aria-hidden="true" data-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content Changepasswd">
+                <div class="content">
+                    <div class="modal-header">
+                        <h4 id="myModalLabel">{{ modalTitle }}</h4>
+                    </div>
+                    <!-- modal body begin-->
+                    <div class="modal-body">
+                        <!--<div class="alert alert-info" ms-visible="executeWait.visible">{{executeWait.text}}</div>
+                        <div class="alert alert-danger " ms-visible="executeError.visible">{{executeError.text}}</div>-->
+
+                        <form class="form-horizontal" id="vim_form" role="form">
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-owner</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-owner']" name="cloudOwner" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-region-id</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-region-id']" name="cloudRegionId" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-type</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <select ms-duplex="currentElement['cloud-type']">
+                                        <option value='openstack'>openstack</option>
+                                    </select>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-region-version</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-region-version']" name="cloudRegionVersion" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>owner-defined-type</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['owner-defined-type']" name="ownerDefinedType" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-zone</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-zone']" name="cloudZone" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>complex-name</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['complex-name']" name="complexName" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-extra-info</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['cloud-extra-info']" name="cloudExtraInfo" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>username</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0].username" name="username" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>password</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="password" ms-duplex="currentElement['auth-info-items'][0].password" name="password" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>                           
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>auth-url</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['auth-url']" name="authUrl" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>ssl-cacert</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-cacert']" name="sslCacert" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>ssl-insecure</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-insecure']" name="sslInsecure" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>cloud-domain</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="currentElement['auth-info-items'][0]['cloud-domain']" name="cloudDomain" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <!-- modal body end-->
+                    <div class="modal-footer">
+                        <button class="btn" data-dismiss="modal" aria-hidden="true"><span
+                                id_i18n="com_zte_ums_eco_roc_vim_cancel" name_i18n="com_zte_conductor_ui_i18n"></span>
+                        </button>
+                        <button class="btn btn-primary" type="submit" ms-attr-disabled="isSave" ms-click="$saveVimTable()">
+                            <span id_i18n="com_zte_ums_eco_roc_vim_save" name_i18n="com_zte_conductor_ui_i18n"></span>
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="row-fluid col-sm-12" data-name="cond_zone">
+        <div class="col-sm-4">
+            <button class="btn white radius_l" id="app-new-btn" ms-click="$showVimTable(-1, 'add')">
+                <i class="ict-new"></i> <span id_i18n="com_zte_ums_eco_roc_vim_register"
+                                              name_i18n="com_zte_conductor_ui_i18n"></span>
+            </button>
+        </div>
+        <!-- <div class="fa fa-refresh text-muted refresh-status-text"><small><span id_i18n="com_zte_ums_eco_roc_vim_status_update_time" name_i18n="com_zte_conductor_ui_i18n"></span></small><small ms-text="vimStatusTime"></small></div>-->
+    </div>
+
+    <div class="row-fluid col-sm-12 " ms-each-el="vimInfo">
+        <div class="col-sm-3 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;">
+            <div class="hpanel stats">
+
+                <div class="panel-body h-200" ms-hover="hpanel_show">
+                    <div class="pull-left">
+                        <span class="label label-success" ms-text="$Status.displayActive"></span>
+                    </div>
+                    <div class="stats-icon pull-right">
+                        <i class="fa fa-cloud  fa-5x color_cloud"></i>
+                    </div>
+                    <div class="m-t-xl">
+                        <h3 ms-text="el['cloud-owner'] + ':' + el['cloud-region-id']"></h3>
+                        <div class="font">
+                            <span id_i18n="com_zte_ums_eco_roc_vim_display_type"name_i18n="com_zte_conductor_ui_i18n"></span>
+                            <span ms-text="el['cloud-type']"></span>
+                        </div>
+                        <div class="font">
+                            <span id_i18n="com_zte_ums_eco_roc_vim_display_version"name_i18n="com_zte_conductor_ui_i18n"></span>
+                            <span ms-text="el['cloud-region-version']"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-footer">
+                    <div class="pull-right">
+                        <a class="btn btn-default btn-sm" ms-click="$showVimTable($index, 'update')"><i
+                                class="fa fa-pencil-square-o fa-lg"></i></a>
+                        <a class="btn btn-default btn-sm" ms-click="delVim($index)"><i class="fa fa-trash-o fa-lg"> </i></a>
+                        <!--<a class="btn btn-default btn-sm" ms-click="gotoChartPage(el.oid,el.name,el.user)"><i class="fa fa-pie-chart fa-lg"> </i></a>-->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="row-fluid">
+        <div class="col-md-12">
+            <div class="pull-left text-muted">
+                <small><span id_i18n="com_zte_ums_eco_roc_vim_total" name_i18n="com_zte_conductor_ui_i18n"></span>
+                    <span class="blue-font" ms-text="vimInfo.size()"></span>
+                    <span id_i18n="com_zte_ums_eco_roc_vim_metric" name_i18n="com_zte_conductor_ui_i18n"></span></small>
+            </div>
+        </div>
+    </div>
+
+</div>
+<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
+<script type="text/javascript" src="i18n/loadi18nApp.js"></script>
+<script type="text/javascript" src="js/vim-validate.js"></script>
+<script src="../../thirdparty/avalon/avalon.js"></script>
+<script type="text/javascript" src="js/vimUtil.js"></script>
+<script type="text/javascript" src="js/vimController.js"></script>
+<script src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/js/core/hk.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/css/animate.min.css b/portal/src/main/webapp/extsys/vnfm/css/animate.min.css
new file mode 100644
index 0000000..3b04801
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/css/animate.min.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/css/vnfm.css b/portal/src/main/webapp/extsys/vnfm/css/vnfm.css
new file mode 100644
index 0000000..9dd1e5f
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/css/vnfm.css
@@ -0,0 +1,486 @@
+/**
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+body {
+    font-family: microsoft yahei !important;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+
+.grey {
+    background-color: #e5e5e5;
+    color: #333;
+}
+
+.blue {
+
+    background-color: #5b9bd1;
+    border-radius: 20px;
+    color: #fff;
+    font-weight: bold;
+    padding: 8px 0;
+    text-align: center;
+    width: 100px;
+}
+
+.blue:hover {
+    background-color: #e8f3fd;
+    color: #5b9bd1;
+}
+
+.blue.selected {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+.blue.selected:hover {
+    border: 0;
+    background-color: #5b9bd1;
+    color: #fff;
+}
+
+p {
+    color: #444;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 21px;
+    margin: 0 0 12px 0;
+}
+
+p.credit {
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+    line-height: 140%;
+    margin: 36px 0 12px 0;
+    padding: 8px 0 0 0;
+    text-align: center;
+}
+
+ul.column {
+    float: left;
+    list-style: none;
+    width: 675px;
+}
+
+ul.column li {
+    background: #eee;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    float: left;
+    margin: 10px 0 0 10px;
+    display: block;
+    height: 150px;
+    text-align: center;
+    width: 215px;
+}
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after, .button-collection:after, .clearfix:after, div.project-info:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.container-fluid {
+    background-color: white !important;
+    min-height: 500px;
+}
+
+.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;
+}
+
+.c3 {
+    margin-top: 120px;
+}
+
+.skills-chart-breadcrumb {
+
+}
+
+.blue:selected {
+    border: 0;
+    background-color: #5b9bd1;
+}
+
+.btn {
+    /* border-width: 0; */
+    /* padding: 7px 14px; */
+    /* font-size: 14px; */
+    /* outline: none !important; */
+    /* background-image: none !important; */
+    /* filter: none; */
+    /* -webkit-box-shadow: none; */
+    -moz-box-shadow: none;
+    /* box-shadow: none; */
+    /* text-shadow: none; */
+}
+
+select {
+    border-width: 1px;
+    padding: 4px 1px;
+    border-radius: 4px;
+}
+
+.input-sm {
+    padding: 4px 10px;
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Bootstrap buttons */
+
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.open .btn-default.dropdown-toggle {
+    color: #333;
+    background-color: #ededed;
+    border-color: #b3b3b3;
+}
+
+.btn-default:active, .btn-default.active {
+    background-image: none;
+    background-color: #e0e0e0;
+    font-weight: bold;
+}
+
+.btn-default:active:hover, .btn-default.active:hover {
+    background-color: #e6e6e6;
+}
+
+.open .btn-default.dropdown-toggle {
+    background-image: none;
+}
+
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn-default .badge {
+    color: #fff;
+    background-color: #333;
+}
+
+.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] {
+    color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div {
+    background-color: #f1f3fa;
+    padding: 0px;
+}
+
+div[data-name="cond_zone"] div {
+    background-color: #fff;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+div[data-name="res-conds-zone"] {
+    display: inline;
+}
+
+div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span {
+    /**height:33px;*/
+    margin-left: 15px;
+    color: #5b9bd1;
+    border-color: #ccc;
+    font-weight: bold;
+}
+
+.input {
+    width: 250px;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -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;
+}
+
+div.separator {
+    margin: 20px;
+}
+
+div.separator div {
+    text-align: center;
+    line-height: 0;
+}
+
+div.separator-line {
+    height: 1px !important;
+    width: 100%;
+    background: #ddd;
+    overflow: hidden;
+}
+
+.dropdown-toggle {
+    color: #5b9bd1;
+}
+
+.calendar-date {
+    color: #5b9bd1;
+}
+
+.range_inputs {
+    color: #5b9bd1;
+}
+
+.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;
+}
+
+#skills-chart-breadcrumb {
+    margin-bottom: 10px
+}
+
+/*增加daterangepicker的css*/
+input[name="daterange"] {
+    width: 220px;
+    line-height: 0;
+    height: 31px;
+    vertical-align: top;
+    margin-top: 2px;
+}
+
+.daterangepicker .ranges {
+    width: 205px;
+}
+
+.daterangepicker .ranges input {
+    width: 95px !important;
+}
+
+td.details-control {
+    background: url('../images/details_open.png') no-repeat center center;
+    cursor: pointer;
+}
+
+tr.shown td.details-control {
+    background: url('../images/details_close.png') no-repeat center center;
+}
+
+.details table td {
+    word-wrap: break-word;
+    word-break: normal;
+    border-top: 1px solid #dddddd;
+}
+
+.details table tr:first-child td {
+    border-top: none;
+}
+
+.details table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+td.title {
+    width: 10%;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 8px 10px;
+}
+
+div.dataTables_length, div.dataTables_info {
+    display: inline;
+}
+
+div.dataTables_paginate {
+    display: inline;
+    float: right;
+}
+
+div.pagination-panel {
+    margin-right: 10px;
+}
+
+input.pagination-panel-input {
+    width: 50px;
+}
+
+#ict_res_table_div {
+    margin-top: 15px;
+}
+
+#ict_res_table_div label {
+    font-weight: 100;
+}
+
+.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label {
+    color: #5b9bd1;
+}
+
+.daterangepicker .ranges .input-mini {
+    color: #5b9bd1;
+}
+
+.cancelBtn {
+    padding: 5px 10px 5px 10px;
+}
+
+.btn:focus, .btn:active:focus, .btn.active:focus {
+    outline: 0;
+}
+
+#ict_res_table_div table {
+    width: 100% !important;
+}
+
+.control-label .required {
+    color: #e02222;
+    font-size: 12px;
+    padding-left: 2px;
+}
+
+#ict_vim_table tbody tr {
+    cursor: pointer;
+}
+
+/*卡片面板样式*/
+.animated-panel {
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.hpanel {
+    background-color: none;
+    border: none;
+    box-shadow: none;
+    margin-bottom: 25px;
+
+}
+
+.hpanel .panel-body {
+    border: 1px solid #e4e5e7;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+}
+
+.h-200 {
+    min-height: 220px;
+}
+
+.m-t-xl {
+    margin-top: 40px;
+}
+
+.m-t-xl div {
+    margin-bottom: 15px;
+}
+
+.text-success {
+    color: #0d638f;
+}
+
+.hpanel > .panel-footer {
+    color: inherit;
+    border: 1px solid #e4e5e7;
+    border-top: none;
+    font-size: 90%;
+    background: #f7f9fa;
+    height: 40px;
+    padding: 5px 15px;
+}
+
+.color_cloud {
+    color: #ccc;
+}
+
+.stats-title {
+
+}
+
+h3 {
+    margin-top: 10px;
+    margin-bottom: 40px;
+    font-weight: 200;
+}
+
+.blue-font {
+    color: #428bca;
+}
+
+.hpanel > .panel-footer .pull-right a {
+    margin-left: 5px;
+}
+
+.hpanel > .panel-footer .pull-right .btn {
+    min-width: 30px !important;
+}
+
+.font-bold {
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.hpanel_show {
+    background-color: #f7f9fa;
+}
+
+.vnfm-padding {
+    padding-left: 0;
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties
new file mode 100644
index 0000000..6d10a1d
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties
@@ -0,0 +1,55 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//vnfm
+nfv-vnfm-iui-title=VNFM Manage
+nfv-vnfm-iui-message-title=vnfm info
+nfv-vnfm-iui-message-query-fail=Query vnfm failed.
+nfv-vnfm-iui-message-save-success=Save successfully.
+nfv-vnfm-iui-message-save-fail=Save failed.
+nfv-vnfm-iui-message-vnfm-already-exists=vnfm already exists.
+nfv-vnfm-iui-message-update-success=Update successfully.
+nfv-vnfm-iui-message-update-fail=Update failed.
+nfv-vnfm-iui-message-delete-confirm=Do you want to delete the current vnfm?
+nfv-vnfm-iui-message-delete-success=Vnfm deleted successfully.
+nfv-vnfm-iui-message-delete-fail=Vnfm deleted failed.
+
+nfv-vnfm-iui-test-update=Modify vnfm info
+nfv-vnfm-iui-text-register=Register vnfm info
+nfv-vnfm-iui-text-name=Name
+nfv-vnfm-iui-text-type=type
+nfv-vnfm-iui-text-version=version
+nfv-vnfm-iui-text-certificateUrl=certificate URL
+nfv-vnfm-iui-text-vendor=Vendor
+nfv-vnfm-iui-text-userName=Username
+nfv-vnfm-iui-text-password=Password
+nfv-vnfm-iui-text_description=Description
+nfv-vnfm-iui-text-cancelBtn=cancel
+nfv-vnfm-iui-text-saveBtn=save
+nfv-vnfm-iui-text-registerBtn=Register
+nfv-vnfm-iui-text-status-normal=Normal
+nfv-vnfm-iui-text-status-fail=Alarm
+nfv-vnfm-iui-text-total=Total
+nfv-vnfm-iui-text-total-vnfm= of vnfm
+
+nfv-vnfm-iui-validate-name=Please enter a name
+nfv-vnfm-iui-validate-type=Please enter the vnfm type
+nfv-vnfm-iui-validate-version=Please enter version
+nfv-vnfm-iui-validate-vendor=Please enter vendor
+nfv-vnfm-iui-validate-vim=Please select a VIM
+nfv-vnfm-iui-validate-url-required=Please enter the URL
+nfv-vnfm-iui-validate-url=Please enter the right URL
+nfv-vnfm-iui-text-url-tip=Example: http://10.0.0.1
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties
new file mode 100644
index 0000000..6adad99
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties
@@ -0,0 +1,55 @@
+#
+# Copyright 2016-2017 ZTE Corporation.
+#
+# 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.
+#
+
+//vnfm
+nfv-vnfm-iui-title=VNFM管理
+nfv-vnfm-iui-message-title=vnfm信息
+nfv-vnfm-iui-message-query-fail=查询vnfm失败。
+nfv-vnfm-iui-message-save-success=保存成功。
+nfv-vnfm-iui-message-save-fail=保存失败。
+nfv-vnfm-iui-message-vnfm-already-exists=vnfm 已经存在
+nfv-vnfm-iui-message-update-success=修改成功。
+nfv-vnfm-iui-message-update-fail=修改失败。
+nfv-vnfm-iui-message-delete-confirm=确定删除所选vnfm信息？
+nfv-vnfm-iui-message-delete-success=删除成功
+nfv-vnfm-iui-message-delete-fail=删除失败
+
+nfv-vnfm-iui-test-update=修改vnfm信息
+nfv-vnfm-iui-text-register=注册vnfm信息
+nfv-vnfm-iui-text-name=名称
+nfv-vnfm-iui-text-type=类型
+nfv-vnfm-iui-text-version=版本
+nfv-vnfm-iui-text-certificateUrl=认证url
+nfv-vnfm-iui-text_description=描述
+nfv-vnfm-iui-text-vendor=厂商
+nfv-vnfm-iui-text-userName=接入用户
+nfv-vnfm-iui-text-password=接入密码
+nfv-vnfm-iui-text-cancelBtn=取消
+nfv-vnfm-iui-text-saveBtn=保存
+nfv-vnfm-iui-text-registerBtn=注册vnfm
+nfv-vnfm-iui-text-status-normal=正常
+nfv-vnfm-iui-text-status-fail=报警
+nfv-vnfm-iui-text-total=共
+nfv-vnfm-iui-text-total-vnfm= vnfm
+
+nfv-vnfm-iui-validate-name=请输入名称
+nfv-vnfm-iui-validate-type=请输入vnfm类型
+nfv-vnfm-iui-validate-version=请输入版本号
+nfv-vnfm-iui-validate-vendor=请输入厂商
+nfv-vnfm-iui-validate-vim=请选择VIM
+nfv-vnfm-iui-validate-url-required=请输入URL
+nfv-vnfm-iui-validate-url=请输入正确的URL
+nfv-vnfm-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js b/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js
new file mode 100644
index 0000000..44a72f3
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 commonUtil = {};
+commonUtil.arrayRemove = function (aryInstance, index) {
+    if (aryInstance == undefined || aryInstance == null) {
+        return;
+    }
+    for (var i = 0, n = 0; i < aryInstance.length; i++) {
+        if (aryInstance[i] != aryInstance[dx]) {
+            aryInstance[n++] = aryInstance[i];
+        }
+    }
+    aryInstance.length -= 1;
+};
+
+//For the expansion of the Date, convert the Date to specify the format String
+// examples：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function (dateObj, format) {
+    var o = {
+        "M+": dateObj.getMonth() + 1, //month
+        "d+": dateObj.getDate(),    //day
+        "h+": dateObj.getHours(),   //hour
+        "m+": dateObj.getMinutes(), //minute
+        "s+": dateObj.getSeconds(), //second
+        "q+": Math.floor((dateObj.getMonth() + 3) / 3),  //quarter
+        "S": dateObj.getMilliseconds() //millisecond
+    }
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+        (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(format))
+            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
+                ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+};
+
+//tooltip
+commonUtil.showMessage = function (message, type) {
+    $.growl({
+        icon: "fa fa-envelope-o fa-lg",
+        title: "&nbsp;&nbsp;" + $.i18n.prop("nfv-nso-iui-common-tip"),
+        message: message
+    }, {
+        type: type
+    });
+};
+
+commonUtil.registerCometdMessage = function (url, channel, callback) {
+    var cometd = new $.Cometd();
+    var cometdURL = location.protocol + "//" + location.host + url;
+    cometd.configure({
+        url: cometdURL,
+        logLevel: "info"
+    });
+    // unregister websocket transport, use long-polling transport
+    cometd.unregisterTransport('websocket');
+    // store channel object parameters(this object include channel and callback function), start from arguments[1]
+    var _args = arguments;
+
+    cometd.addListener("/meta/handshake", function (handshake) {
+        if (handshake.successful === true) {
+            cometd.batch(function () {
+                //subscribe channel
+                cometd.subscribe(channel, function (message) {
+                    callback.call(this, message.data);
+                });
+            });
+        }
+    });
+    cometd.handshake();
+}
+
+commonUtil.format = function () {
+    if (arguments.length == 0) {
+        return null;
+    }
+    var str = arguments[0];
+    for (var i = 0; i < arguments.length; i++) {
+        var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm");
+        str = str.replace(reg, arguments[i]);
+    }
+    return str;
+}
+
+commonUtil.get = function (url, params, callback) {
+    $.ajax({
+        type: "GET",
+        url: url,
+        //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        dataType: "json",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.post = function (url, params, callback, contentType) {
+    $.ajax({
+        type: "POST",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        data: params || {},
+        success: callback
+    });
+}
+
+commonUtil.delete = function (url, callback, contentType) {
+    $.ajax({
+        type: "DELETE",
+        url: url,
+        contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
+        success: callback
+    });
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js
new file mode 100644
index 0000000..a543a20
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 loadPropertiesSideMenu(lang, fileNamePrefix, filePath) {
+    jQuery.i18n.properties({
+        language: lang,
+        name: fileNamePrefix,
+        path: filePath,
+        mode: 'map',
+        callback: function () {
+            var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]");
+            for (var i = 0; i < i18nItems.length; i++) {
+                var $item = $(i18nItems.eq(i));
+                var itemId = $item.attr("id");
+                var itemTitle = $item.attr("title");
+                if (typeof(itemTitle) != "undefined") {
+                    $item.attr("title", $.i18n.prop(itemId));
+                } else {
+                    $item.text($.i18n.prop(itemId));
+                }
+            }
+        }
+    });
+}
+var lang = getLanguage();
+loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js b/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js
new file mode 100644
index 0000000..627d6d5
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 () {
+    var form = $('#vnfm_form');
+    var error = $('.alert-danger', form);
+    var success = $('.alert-success', form);
+
+    form.validate({
+        doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
+        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: {
+            name: {
+                required: true,
+                maxlength: 20
+            },
+            type: {
+                required: true,
+                maxlength: 20
+            },
+            version: {
+                required: true,
+                maxlength: 20
+            },
+            vendor: {
+                required: true,
+                maxlength: 20
+            },
+            url: {
+                required: true,
+                url: true
+            }
+        },
+        messages: {
+            name: {
+                required: $.i18n.prop("nfv-vnfm-iui-validate-name")
+            },
+            type: {
+                required: $.i18n.prop("nfv-vnfm-iui-validate-type")
+            },
+            version: {
+                required: $.i18n.prop("nfv-vnfm-iui-validate-version")
+            },
+            vendor: {
+                required: $.i18n.prop("nfv-vnfm-iui-validate-vendor")
+            },
+            url: {
+                required: $.i18n.prop("nfv-vnfm-iui-validate-url-required"),
+                url: $.i18n.prop("nfv-vnfm-iui-validate-url")
+            }
+        },
+        errorPlacement: function (error, element) { // render error placement for each input type
+            error.insertAfter(element); // for other inputs, just perform default behavior
+        },
+        invalidHandler: function (event, validator) { //display error alert on form submit   
+            success.hide();
+            error.show();
+        },
+        highlight: function (element) { // hightlight error inputs
+            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
+        },
+        unhighlight: function (element) { // revert the change done by hightlight
+            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
+        },
+        success: function (label) {
+            label.addClass('valid') // mark the current input as valid and display OK icon
+                .closest('.form-group').removeClass('has-error'); // set success class to the control group
+        },
+        submitHandler: function (form) {
+            success.show();
+            error.hide();
+            //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
+        }
+    });
+});
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js b/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js
new file mode 100644
index 0000000..1df32b1
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js
@@ -0,0 +1,302 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vm = avalon
+    .define({
+        $id: "vnfmController",
+        vnfmInfo: [],
+        //mocSelectItems : [],
+        vimSelectItems: [],
+        server_rtn: {
+            info_block: false,
+            warning_block: false,
+            rtn_info: "",
+            $RTN_SUCCESS: "RTN_SUCCESS",
+            $RTN_FAILED: "RTN_FAILED"
+        },
+        $Status: {
+            success: "active",
+            failed: "inactive"
+        },
+        $restUrl: {
+            queryVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms',
+            addVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms',
+            updateVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms/',
+            delVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms/',
+            queryMocUrl: '',
+            queryVimUrl: '/onapapi/aai/esr/v1/vims'
+        },
+        $htmlText: {
+            saveSuccess: $.i18n.prop("nfv-vnfm-iui-message-save-success"),
+            saveFail: $.i18n.prop("nfv-vnfm-iui-message-save-fail"),
+            alreadyExist: $.i18n.prop("nfv-vnfm-iui-message-vnfm-already-exists"),
+            updateSuccess: $.i18n.prop("nfv-vnfm-iui-message-update-success"),
+            updateFail: $.i18n.prop("nfv-vnfm-iui-message-update-fail")
+        },
+        $initTable: function () {
+            $.ajax({
+                "type": 'GET',
+                "url": vm.$restUrl.queryVnfmInfoUrl,
+                //"dataType": "json",
+                "success": function (resp) {
+                    for (var i = 0; i < resp.length; i++) {
+                        resp[i].status = vm.$Status.success;
+                    }
+                    vm.vnfmInfo = resp;
+                },
+                error: function (XMLHttpRequest, textStatus, errorThrown) {
+                    bootbox.alert($.i18n.prop("nfv-vnfm-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown);
+                    return;
+                },
+                complete: function () {
+                    vnfmUtil.tooltipVnfmStatus();
+                }
+            });
+        },
+        // $initMoc : function() {
+        // 	/*var url = vm.$restUrl.queryMocUrl;
+        //     commonUtil.get(url, null, function(resp) {
+        //         if (resp) {
+        //             vm.addVnfm.moc = resp.data;
+        //         }
+        //     });*/
+        //     var resp = [
+        //     	{ id : "nfv.vnfm.eco", name : "VNFM(ECO)"},
+        //     	{ id : "nfv.vnfm.tacker", name : "VNFM(Tacker)"},
+        //     	{ id : "nfv.vnfm.cmcc", name : "VNFM(CMCC)"},
+        //     	{ id : "nfv.vnfm.etsi", name : "VNFM(ETSI)"}
+        //     ]
+        //     vm.mocSelectItems = resp;
+        // },
+        $initVim: function () {
+            $.ajax({
+                type: 'get',
+                url: vm.$restUrl.queryVimUrl,
+                dataType: 'json',
+                success: function (resp) {
+                    if (resp) {
+                        vm.vimSelectItems = resp;
+                    }
+                    vm.vimSelectItems.push({"vimId": "", "name": ""});
+                }
+            });
+        },
+        addVnfm: {
+            title: $.i18n.prop("nfv-vnfm-iui-text-register"),
+            vnfmId: "",
+            name: "",
+            type: "",
+            //moc : "",
+            nameReadonly : false,
+            vimId: "",
+            //vimVisiable : false,
+            vendor: "",
+            version: "",
+            description: "",
+            certificateUrl: "",
+            url: "",
+            urlTip: $.i18n.prop("nfv-vnfm-iui-text-url-tip"),
+            userName: "",
+            password: "",
+            saveType: "add",
+            status: ""
+        },
+        $showVnfmTable: function () {
+            vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-text-register"),
+                vm.addVnfm.vnfmId = "";
+            vm.addVnfm.name = "";
+            vm.addVnfm.type = "";
+            //vm.addVnfm.moc = "";
+            vm.addVnfm.nameReadonly = false;
+            vm.addVnfm.vimId = "";
+            //vm.addVnfm.vimVisiable = false;
+            vm.addVnfm.vendor = "";
+            vm.addVnfm.version = "";
+            vm.addVnfm.description = "";
+            vm.addVnfm.certificateUrl = "";
+            vm.addVnfm.url = "";
+            vm.addVnfm.userName = "";
+            vm.addVnfm.password = "";
+            vm.addVnfm.saveType = "add";
+            vm.server_rtn.warning_block = false;
+            vm.server_rtn.info_block = false;
+            //vm.$initMoc();
+            vm.$initVim();
+            //vm.$mocChange();
+
+            $(".form-group").each(function () {
+                $(this).removeClass('has-success');
+                $(this).removeClass('has-error');
+                $(this).find(".help-block[id]").remove();
+            });
+            $("#addVnfmDlg").modal("show");
+        },
+        // $getMocName : function(mocId) {
+        //       	var items = vm.mocSelectItems;
+        //           for(var i=0;i<items.length;i++) {
+        //    		if(items[i].id == mocId) {
+        //    			return items[i].name;
+        //    		}
+        //    	}
+        //    	return "";
+        // },
+        $saveVnfm: function () {
+            var form = $('#vnfm_form');
+            if (form.valid() == false) {
+                return false;
+            }
+            vm.server_rtn.info_block = true;
+            vm.server_rtn.warning_block = false;
+            vm.addVnfm.status = vm.$Status.success;
+
+            var param = {
+                name: vm.addVnfm.name,
+                //status : vm.addVnfm.status,
+                //moc : $("#moc").val(),
+                //vimId : vm.$getVimId($("#moc").val()),
+                vimId: $("#vimId").val(),
+                vendor: vm.addVnfm.vendor,
+                version: vm.addVnfm.version,
+                type: vm.addVnfm.type,
+                description: vm.addVnfm.description,
+                certificateUrl: vm.addVnfm.certificateUrl,
+                url: vm.addVnfm.url,
+                userName: vm.addVnfm.userName,
+                password: vm.addVnfm.password
+            }
+            //save VIM info
+            if (vm.addVnfm.saveType == "add") {  
+                //      for( var i = 0; i < vm.vnfmInfo.length; i ++ ){
+                //     if(vm.addVnfm.name == vm.vnfmInfo[i].name){                       
+                //        vm.server_rtn.warning_block = true;
+                //        vm.server_rtn.rtn_info = vm.$htmlText.alreadyExist;
+                //        commonUtil.showMessage(vm.$htmlText.alreadyExist, "failed");
+                //        return;
+                //     }
+                // }     
+                $.ajax({
+                    type: "POST",
+                    url: vm.$restUrl.addVnfmInfoUrl,
+                    data: JSON.stringify(param),
+                    dataType: "json",
+                    contentType: "application/json",
+                    success: function (data) {
+                        vm.server_rtn.info_block = false;
+                        vm.server_rtn.warning_block = false;
+                        if (data) {
+                            vm.vnfmInfo = [];
+                            vm.$initTable();
+
+                            $('#addVnfmDlg').modal('hide');
+                            commonUtil.showMessage(vm.$htmlText.saveSuccess, "success");
+                        } else {
+                            vm.server_rtn.warning_block = true;
+                            vm.server_rtn.rtn_info = vm.$htmlText.saveFail;
+                            commonUtil.showMessage(vm.$htmlText.saveFail, "failed");
+                        }
+                    },
+                    error: function (XMLHttpRequest, textStatus, errorThrown) {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                        vm.server_rtn.info_block = false;
+                    }
+                });
+            } else {
+                $.ajax({
+                    type: "PUT",
+                    url: vm.$restUrl.updateVnfmInfoUrl + vm.addVnfm.vnfmId,
+                    data: JSON.stringify(param),
+                    dataType: "json",
+                    contentType: "application/json",
+                    success: function (data) {
+                        vm.server_rtn.info_block = false;
+                        vm.server_rtn.warning_block = false;
+                        if (data) {
+                            for (var i = 0; i < vm.vnfmInfo.length; i++) {
+                                if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) {
+                                    vm.vnfmInfo[i].name = vm.addVnfm.name;
+                                    vm.vnfmInfo[i].vimId = $("#vimId").val();
+                                    vm.vnfmInfo[i].vendor = vm.addVnfm.vendor;
+                                    vm.vnfmInfo[i].version = vm.addVnfm.version;
+                                    vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl;
+                                    vm.vnfmInfo[i].description = vm.addVnfm.description;
+                                    vm.vnfmInfo[i].url = vm.addVnfm.url;
+                                    vm.vnfmInfo[i].userName = vm.addVnfm.userName;
+                                    vm.vnfmInfo[i].password = vm.addVnfm.password;
+                                }
+                            }
+                            $('#addVnfmDlg').modal('hide');
+                            commonUtil.showMessage(vm.$htmlText.updateSuccess, "success");
+                        } else {
+                            vm.server_rtn.warning_block = true;
+                            vm.server_rtn.rtn_info = vm.$htmlText.updateFail;
+                            commonUtil.showMessage(vm.$htmlText.updateFail, "failed");
+                        }
+                    },
+                    error: function (XMLHttpRequest, textStatus, errorThrown) {
+                        vm.server_rtn.warning_block = true;
+                        vm.server_rtn.rtn_info = textStatus + ":" + errorThrown;
+                        vm.server_rtn.info_block = false;
+                    }
+                });
+            }
+        },
+        //  		mocRendered : function(action) {
+        // 	if(vm.addVnfm.saveType === "update" && vm.addVnfm.moc) {
+        // 		var items = vm.mocSelectItems;
+        // 		for(var i=0;i<items.length;i++) {
+        //     		if(items[i].id == vm.addVnfm.moc) {
+        //     			$("#moc")[0].selectedIndex = i;
+        //     			vm.$mocChange();
+        //     			break;
+        //     		}
+        //     	}
+        // 	} else {
+        // 		$("#moc")[0].selectedIndex = 0;
+        // 	}
+        // },
+        vimRendered: function (action) {
+            var items = vm.vimSelectItems;
+            if (vm.addVnfm.saveType === "update") {
+                for (var i = 0; i < items.length; i++) {
+                    if (items[i].vimId == vm.addVnfm.vimId) {
+                        $("#vimId")[0].selectedIndex = i;
+                        break;
+                    }
+                }
+            } else {
+                $("#vimId")[0].selectedIndex = items.length - 1;
+            }
+        },
+        // $mocChange : function() {
+        // 	var mocId = $('#moc').val();
+        // 	if(mocId == "nfv.vnfm.tacker") {
+        // 		vm.addVnfm.vimVisiable = true;
+        // 	} else {
+        // 		vm.addVnfm.vimVisiable = false;
+        // 	}
+        // },
+        // $getVimId : function(mocId) {
+        // 	if(vm.addVnfm.vimVisiable) {
+        // 		return $("#vimId").val();
+        // 	} else {
+        // 		return "";
+        // 	}
+        // }
+    });
+avalon.scan();
+vm.$initTable();
+//vm.$initMoc();
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js b/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js
new file mode 100644
index 0000000..21038da
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2016-2017 ZTE Corporation.
+ *
+ * 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 vnfmUtil = {};
+
+vnfmUtil.delVnfm = function (vnfmId) {
+    bootbox.confirm($.i18n.prop("nfv-vnfm-iui-message-delete-confirm"), function (result) {
+        if (result) {
+            $.ajax({
+                type: "DELETE",
+                url: vm.$restUrl.delVnfmInfoUrl + vnfmId,
+                dataType: "json",
+                success: function (data, statusText, jqXHR) {
+                    if (jqXHR.status == "204") {
+                        for (var i = 0; i < vm.vnfmInfo.length; i++) {
+                            if (vnfmId == vm.vnfmInfo[i].vnfmId) {
+                                //delete the vnfm object from vnfm array
+                                vm.vnfmInfo.splice(i, 1);
+                                break;
+                            }
+                        }
+                        commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-success"), "success");
+                    } else {
+                        commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning");
+                    }
+                },
+                error: function () {
+                    commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning");
+                }
+            });
+        }
+    });
+}
+
+vnfmUtil.updateVnfm = function (data) {
+    vm.addVnfm.vnfmId = data.vnfmId;
+    vm.addVnfm.name = data.name;
+    //vm.addVnfm.moc = data.moc;
+    //vm.addVnfm.mocDisabled = true;
+    vm.addVnfm.vendor = data.vendor;
+    vm.addVnfm.version = data.version;
+    vm.addVnfm.description = data.description;
+    vm.addVnfm.type = data.type;
+    vm.addVnfm.vimId = data.vimId;
+    vm.addVnfm.url = data.url;
+    vm.addVnfm.nameReadonly=true;
+    vm.addVnfm.userName = data.userName;
+    vm.addVnfm.password = data.password;
+    vm.addVnfm.saveType = "update";
+    vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-test-update");
+    vm.server_rtn.info_block = false;
+    vm.server_rtn.warning_block = false;
+    //vm.$initMoc();
+    vm.$initVim();
+
+    $(".form-group").each(function () {
+        $(this).removeClass('has-success');
+        $(this).removeClass('has-error');
+        $(this).find(".help-block[id]").remove();
+    });
+    $("#addVnfmDlg").modal("show");
+}
+
+vnfmUtil.tooltipVnfmStatus = function () {
+    $("[data-toggle='tooltip']").tooltip();
+}
\ No newline at end of file
diff --git a/portal/src/main/webapp/extsys/vnfm/vnfmView.html b/portal/src/main/webapp/extsys/vnfm/vnfmView.html
new file mode 100644
index 0000000..a26ed57
--- /dev/null
+++ b/portal/src/main/webapp/extsys/vnfm/vnfmView.html
@@ -0,0 +1,240 @@
+<!--
+
+    Copyright 2016-2017 ZTE Corporation.
+
+    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 lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/>
+    <link href="../../thirdparty/css/ZteIctIcons/style.css" rel="stylesheet"/>
+    <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/>
+    <link href="css/animate.min.css" rel="stylesheet"/>
+    <link href="css/vnfm.css" rel="stylesheet"/>
+    <style>
+        .ms-controller {
+            visibility: hidden
+        }
+    </style>
+
+</head>
+<body>
+<div ms-controller="vnfmController" class="container-fluid ms-controller">
+    <div id="addVnfmDlg" class="modal  fade" tabindex="-1" role="dialog"
+         aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content Changepasswd">
+                <div class="content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal"
+                                aria-hidden="true">×
+                        </button>
+                        <h4 id="myModalLabel">{{addVnfm.title}}</h4>
+                    </div>
+                    <div class="modal-body">
+                        <form class="form-horizontal" id="vnfm_form" role="form">
+                            <input type="hidden" ms-duplex="addVnfm.vnfmId" name="vnfmId" class="form-control"/>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-name" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.name" name="name" class="form-control" ms-readonly="addVnfm.nameReadonly"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-type" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.type" name="type" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-vendor" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.vendor" name="vendor" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-version" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.version" name="version" class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span>URL</span>
+                                    <span class="required" aria-required="true">*</span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.url" name="url" class="form-control"
+                                           ms-attr-placeholder="addVnfm.urlTip"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">VIM
+                                    <span></span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <select class="form-control" id="vimId" name="vimId">
+                                        <option ms-repeat-vim="vimSelectItems" ms-attr-value="vim.vimId"
+                                                data-repeat-rendered="vimRendered">{{vim.name}}
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-certificateUrl"
+                                          name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.certificateUrl" name="certificateUrl"
+                                           class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-userName" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="text" ms-duplex="addVnfm.userName" name="userName"
+                                           class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text-password" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                                </label>
+                                <div class="col-sm-7">
+                                    <input type="password" ms-duplex="addVnfm.password" name="password"
+                                           class="form-control"/>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="control-label col-sm-3">
+                                    <span id="nfv-vnfm-iui-text_description" name_i18n="com_zte_nfv_nsoc_i18n"></span>                                    
+                                </label>
+                                <div class="col-sm-7">
+                                    <textarea class="form-control" rows="3" ms-duplex="addVnfm.description"
+                                              name="description"></textarea>
+                                    <span class="help-block"></span>
+                                </div>
+                            </div>
+                        </form>
+
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn" data-dismiss="modal" aria-hidden="true" id="nfv-vnfm-iui-text-cancelBtn"
+                                name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                        <button class="btn btn-primary" type="submit" ms-click="$saveVnfm"
+                                id="nfv-vnfm-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row-fluid" data-name="cond_zone">
+        <div class="col-md-12">
+            <button class="btn white radius_l" id="app-new-btn" ms-click="$showVnfmTable">
+                <i class="ict-new"></i> <span id="nfv-vnfm-iui-text-registerBtn"
+                                              name_i18n="com_zte_nfv_nsoc_i18n"></span>
+            </button>
+        </div>
+    </div>
+
+    <div class="col-sm-12 vnfm-padding" ms-each-el="vnfmInfo">
+        <div class="col-sm-4 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;">
+            <div class="hpanel stats">
+                <div class="panel-body h-200" ms-hover="hpanel_show">
+                    <div class="pull-left">
+                        <span class="label label-success" ms-if="el.status === $Status.success"
+                              id="nfv-vnfm-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                        <span class="label label-danger" ms-attr-title="el.errorInfo" data-toggle="tooltip"
+                              ms-if="el.status === $Status.failed" id="nfv-vnfm-iui-text-status-fail"
+                              name_i18n="com_zte_nfv_nsoc_i18n"></span>
+                    </div>
+                    <div class="stats-icon pull-right">
+                        <i class="fa fa-server  fa-5x color_cloud"></i>
+                    </div>
+                    <div class="m-t-xl">
+                        <h3 ms-text="el.name"></h3>
+                        <div><span id="nfv-vnfm-iui-text-type" name_i18n="com_zte_nfv_nsoc_i18n"></span>：<span
+                                ms-text="el.type"></span></div>
+                        <div>URL：<span ms-text="el.url"></span></div>
+                    </div>
+                </div>
+                <div class="panel-footer">
+                    <div class="pull-right">
+                        <a class="btn btn-default btn-sm" ms-click="vnfmUtil.updateVnfm(el.$model)"><i
+                                class="fa fa-pencil-square-o fa-lg"></i></a>
+                        <a class="btn btn-default btn-sm" ms-click="vnfmUtil.delVnfm(el.vnfmId)"><i
+                                class="fa fa-trash-o fa-lg"> </i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12">
+        <div class="pull-left text-muted">
+            <small><span id="nfv-vnfm-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font"
+                                                                                                      ms-text="vnfmInfo.size()"></span>
+                <span id="nfv-vnfm-iui-text-total-vnfm" name_i18n="com_zte_nfv_nsoc_i18n"></span></small>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script>
+<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script>
+<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>-->
+<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>-->
+<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script>
+
+<script type="text/javascript" src="../../thirdparty/js/tools.js"></script>
+
+<script type="text/javascript" src="js/commonUtil.js"></script>
+<script type="text/javascript" src="js/loadi18n_nsoc.js"></script>
+
+<script type="text/javascript" src="js/vnfm-validate.js"></script>
+<script type="text/javascript" src="js/vnfmUtil.js"></script>
+<script type="text/javascript" src="js/vnfmController.js"></script>
+</body>
+</html>
\ No newline at end of file