Merge branch 'valo' to master

Updated release notes to the form previously used in master.
The ticket list link needs to be updated separately in the
7.3 branch.

Change-Id: I7b7d09a1281261d3a1b8793cfff9ba8951a07798

14 files changed, 1057 insertions, 172 deletions

diff --git a/client/src/com/vaadin/client/AnimationUtil.java b/client/src/com/vaadin/client/AnimationUtil.java
new file mode 100644
index 0000000000..2077cee3c0
--- /dev/null
+++ b/client/src/com/vaadin/client/AnimationUtil.java
@@ -0,0 +1,178 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client;
+
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.dom.client.Style;
+
+/**
+ * Utility methods for working with CSS transitions and animations.
+ * 
+ * @author Vaadin Ltd
+ */
+public class AnimationUtil {
+
+    /**
+     * For internal use only. May be removed or replaced in the future.
+     * 
+     * Set the animation-duration CSS property.
+     * 
+     * @param elem
+     *            the element whose animation-duration to set
+     * @param duration
+     *            the duration as a valid CSS value
+     */
+    public static void setAnimationDuration(Element elem, String duration) {
+        Style style = elem.getStyle();
+        style.setProperty(ANIMATION_PROPERTY_NAME + "Duration", duration);
+    }
+
+    /**
+     * For internal use only. May be removed or replaced in the future.
+     * 
+     * Set the animation-delay CSS property.
+     * 
+     * @param elem
+     *            the element whose animation-delay to set
+     * @param delay
+     *            the delay as a valid CSS value
+     */
+    public static void setAnimationDelay(Element elem, String delay) {
+        Style style = elem.getStyle();
+        style.setProperty(ANIMATION_PROPERTY_NAME + "Delay", delay);
+    }
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public static native JavaScriptObject addAnimationEndListener(Element elem,
+            AnimationEndListener listener)
+    /*-{
+      var callbackFunc = $entry(function(e) {
+        listener.@com.vaadin.client.AnimationUtil.AnimationEndListener::onAnimationEnd(Lcom/google/gwt/dom/client/NativeEvent;)(e);
+      });
+
+      elem.addEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, callbackFunc, false);
+      
+      // Store function reference for later removal
+      if(!elem._vaadin_animationend_callbacks) {
+        elem._vaadin_animationend_callbacks = [];
+      }
+      elem._vaadin_animationend_callbacks.push(callbackFunc);
+      
+      return callbackFunc;
+    }-*/;
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public static native void removeAnimationEndListener(Element elem,
+            JavaScriptObject listener)
+    /*-{
+      elem.removeEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, listener, false);
+    }-*/;
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public static native void removeAllAnimationEndListeners(Element elem)
+    /*-{
+      if(elem._vaadin_animationend_callbacks) {
+        var callbacks = elem._vaadin_animationend_callbacks;
+        for(var i=0; i < callbacks.length; i++) {
+          elem.removeEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, callbacks[i], false);
+        }
+      }
+    }-*/;
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public interface AnimationEndListener {
+        public void onAnimationEnd(NativeEvent event);
+    }
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public static native String getAnimationName(NativeEvent event)
+    /*-{
+        if(event.webkitAnimationName)
+            return event.webkitAnimationName;
+        else if(event.animationName)
+            return event.animationName;
+        else if(event.mozAnimationName)
+            return event.mozAnimationName;
+        else if(event.oAnimationName)
+            return event.oAnimationName;
+
+        return "";
+    }-*/;
+
+    /** For internal use only. May be removed or replaced in the future. */
+    public static native String getAnimationName(ComputedStyle cstyle)
+    /*-{
+        var cs = cstyle.@com.vaadin.client.ComputedStyle::computedStyle;
+
+        if(!cs.getPropertyValue)
+            return "";
+
+        if(cs.getPropertyValue("-webkit-animation-name"))
+            return cs.getPropertyValue("-webkit-animation-name");
+
+        else if(cs.getPropertyValue("animation-name"))
+            return cs.getPropertyValue("animation-name");
+
+        else if(cs.getPropertyValue("-moz-animation-name"))
+            return cs.getPropertyValue("-moz-animation-name");
+
+        else if(cs.getPropertyValue("-o-animation-name"))
+            return cs.getPropertyValue("-o-animation-name");
+
+        return "";
+    }-*/;
+
+    private static final String ANIMATION_END_EVENT_NAME = whichAnimationEndEvent();
+
+    private static native String whichAnimationEndEvent()
+    /*-{
+        var el = document.createElement('fakeelement');
+        var anims = {
+          'animationName': 'animationend',
+          'OAnimationName': 'oAnimationEnd',
+          'MozAnimation': 'animationend',
+          'WebkitAnimation': 'webkitAnimationEnd'
+        }
+    
+        for(var a in anims){
+            if( el.style[a] !== undefined ){
+                return anims[a];
+            }
+        }
+    }-*/;
+
+    private static final String ANIMATION_PROPERTY_NAME = whichAnimationProperty();
+
+    private static native String whichAnimationProperty()
+    /*-{
+        var el = document.createElement('fakeelement');
+        var anims = [
+          'animation',
+          'oAnimation',
+          'mozAnimation',
+          'webkitAnimation'
+        ]
+    
+        for(var i=0; i < anims.length; i++) {
+            if( el.style[anims[i]] !== undefined ){
+                return anims[i];
+            }
+        }
+    }-*/;
+
+}
diff --git a/client/src/com/vaadin/client/ApplicationConfiguration.java b/client/src/com/vaadin/client/ApplicationConfiguration.java
index a1f1513d58..0d17fbd94f 100644
--- a/client/src/com/vaadin/client/ApplicationConfiguration.java
+++ b/client/src/com/vaadin/client/ApplicationConfiguration.java
@@ -29,6 +29,7 @@ import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.GWT.UncaughtExceptionHandler;
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.JsArrayString;
+import com.google.gwt.core.client.RunAsyncCallback;
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
 import com.google.gwt.logging.client.LogConfiguration;
@@ -43,6 +44,7 @@ import com.vaadin.client.debug.internal.ProfilerSection;
 import com.vaadin.client.debug.internal.Section;
 import com.vaadin.client.debug.internal.TestBenchSection;
 import com.vaadin.client.debug.internal.VDebugWindow;
+import com.vaadin.client.debug.internal.theme.DebugWindowStyles;
 import com.vaadin.client.event.PointerEventSupport;
 import com.vaadin.client.metadata.BundleLoadCallback;
 import com.vaadin.client.metadata.ConnectorBundleLoader;
@@ -642,6 +644,21 @@ public class ApplicationConfiguration implements EntryPoint {
             if (isQuietDebugMode()) {
                 window.close();
             } else {
+                // Load debug window styles asynchronously
+                GWT.runAsync(new RunAsyncCallback() {
+                    @Override
+                    public void onSuccess() {
+                        DebugWindowStyles dws = GWT
+                                .create(DebugWindowStyles.class);
+                        dws.css().ensureInjected();
+                    }
+
+                    @Override
+                    public void onFailure(Throwable reason) {
+                        Window.alert("Failed to load Vaadin debug window styles");
+                    }
+                });
+
                 window.init();
             }
 
diff --git a/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java
new file mode 100644
index 0000000000..249b24a938
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.debug.internal.theme;
+
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.resources.client.CssResource.NotStrict;
+import com.google.gwt.resources.client.DataResource;
+import com.google.gwt.resources.client.DataResource.DoNotEmbed;
+
+public interface DebugWindowStyles extends ClientBundle {
+
+    @Source({ "debugwindow.css" })
+    @NotStrict
+    public CssResource css();
+
+    // Can't embed because IE8 doesn't support datauri for fonts (images only)
+    @Source("font.eot")
+    @DoNotEmbed
+    DataResource iconFontEot();
+
+    // Can't embed because GWT compiler doesn't know the mimetype for these
+    // (ends up as content/unknown)
+    @Source("font.ttf")
+    @DoNotEmbed
+    DataResource iconFontTtf();
+
+    @Source("font.woff")
+    @DoNotEmbed
+    DataResource iconFontWoff();
+
+    @Source("font.svg")
+    @DoNotEmbed
+    DataResource iconFontSvg();
+
+}
\ No newline at end of file
diff --git a/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css
new file mode 100644
index 0000000000..78e537140e
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css
@@ -0,0 +1,322 @@
+.v-debug-console {
+  background: #fff;
+  opacity: .9;
+  border: 1px solid #000;
+  font-family: sans-serif;
+}
+
+.v-debug-console-caption {
+  background: #000;
+  border-bottom: 1px solid grey;
+  color: white;
+  font-weight: bold;
+}
+
+.v-debug-console-content {
+  font-size: x-small;
+  overflow: auto;
+  white-space: pre;
+}
+
+.v-debug-console-content input {
+  font-size: xx-small;
+}
+
+/* Debug style */
+.v-app .invalidlayout,
+.v-app .invalidlayout * {
+  background: #f99 !important;
+}
+
+/* NEW debug window */
+
+@def mainbg #fff;
+@def darkborder #666;
+@def lightborder #999;
+@def maincolor #666;
+@def maincolor-lighten-5pc #737373;
+@def maincolor-lighten-10pc gray;
+@def maincolor-lighten-15pc #8c8c8c;
+@def activecolor #000;
+
+@url urlForTtf iconFontTtf;
+@url urlForWoff iconFontWoff;
+@url urlForEot iconFontEot;
+@url urlForSvg iconFontSvg;
+
+@font-face {
+  font-family: 'vdebugfont';
+  src: urlForEot;
+}
+
+@font-face {
+  font-family: 'vdebugfont';
+  src: urlForWoff format('woff'),
+       urlForTtf format('truetype'),
+       urlForSvg format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.v-debugwindow [data-icon]:before,
+.v-debugwindow-menu [data-icon]:before {
+  font-family: 'vdebugfont';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  vertical-align: text-bottom;
+}
+
+.v-debugwindow {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  opacity: .8;
+  color: maincolor;
+  font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+  font-size: 13px;
+}
+
+.v-debugwindow-handle {
+  position: absolute;
+  bottom: 0;
+  background-color: #fff;
+  opacity: 0;
+  z-index: 1000;
+}
+
+.v-debugwindow-handle-sw {
+  width: 7px;
+  height: 7px;
+}
+
+.v-debugwindow-handle-se {
+  right: 0;
+  width: 14px;
+  height: 14px;
+}
+
+.v-debugwindow:hover {
+  opacity: 1;
+}
+
+.v-debugwindow * {
+  font-size: inherit !important;
+}
+
+.v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 {
+  font-size: 10px;
+}
+
+.v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 {
+  font-size: 13px;
+}
+
+.v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 {
+  font-size: 16px;
+}
+
+.v-debugwindow-head {
+  text-align: right;
+  background-color: transparent;
+}
+
+.v-debugwindow-tabs {
+  display: inline-block;
+}
+
+.v-debugwindow-tab, .v-debugwindow-controls > * {
+  width: 2em;
+  border: none;
+  margin: 0;
+  line-height: 1.5em;
+  background-color: mainbg;
+  color: maincolor;
+}
+
+.v-debugwindow-tab {
+  position: relative;
+  top: 1px;
+  border-width: 1px 0 1px 1px;
+  border-style: solid;
+  border-color: darkborder;
+  border-radius: 2px 2px 0 0;
+}
+
+.v-debugwindow-tab-selected {
+  color: maincolor;
+  background-color: mainbg;
+  border-bottom: 1px solid #fff;
+}
+
+.v-debugwindow-controls {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  background-color: mainbg;
+  border: 1px solid darkborder;
+  border-radius: 2px 2px 0 0;
+}
+
+.v-debugwindow-section-head {
+  text-align: left;
+  background-color: mainbg;
+  border: 1px solid darkborder;
+  border-bottom: 1px solid lightborder;
+  box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6);
+  min-height: 1.5em;
+  line-height: 1.5em;
+  padding-left: 5px;
+}
+
+.v-debugwindow-button {
+  border: none;
+  background-color: transparent;
+  color: maincolor;
+}
+
+.v-debugwindow-button:hover {
+  color: activecolor;
+  text-decoration: underline;
+}
+
+.v-debugwindow-button-active {
+  color: maincolor;
+  box-shadow: 1px 1px 3px 0 inset;
+}
+
+.v-debugwindow-content {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6);
+  background-color: mainbg;
+  border: 1px solid darkborder;
+  border-top: none;
+}
+
+.v-debugwindow-menu {
+  background-color: mainbg;
+  padding: 4px;
+  border: 1px solid lightborder;
+  border-top: none;
+  border-radius: 0 0 5px 5px;
+  box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6);
+}
+
+.v-debugwindow-menu-content {
+  min-width: 100px;
+}
+
+.v-debugwindow-menu-content .v-debugwindow-button {
+  line-height: 22px;
+}
+
+.v-debugwindow-menu-content > div > .v-debugwindow-button {
+  width: 33%;
+}
+
+/* GLOBAL color every other row */
+.v-debugwindow-row {
+  display: table-row;
+}
+
+/* Escape function signature so that this gets past GWT compiler */
+.v-debugwindow-row:nth-child\(odd\) {
+  background-color: rgba(0, 61, 255, 0.11);
+}
+
+.v-debugwindow-row > span {
+  display: table-cell;
+  padding: 4px;
+}
+
+.v-debugwindow-row.SEVERE {
+  color: #550000;
+  background-color: #FFC5C5;
+}
+
+.v-debugwindow-row.WARNING {
+  background-color: #FFFF99;
+}
+
+.v-debugwindow-row.FINE {
+  color: maincolor-lighten-5pc;
+}
+
+.v-debugwindow-row.FINER {
+  color: maincolor-lighten-10pc;
+}
+
+.v-debugwindow-row.FINEST {
+  color: maincolor-lighten-15pc;
+}
+
+.v-debugwindow-row > span.caption {
+  color: #999;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.v-debugwindow-row > span.value {
+  width: 100%;
+}
+
+.v-debugwindow-selector > span.value {
+   width: 100%;
+}
+
+.v-debugwindow-selector :hover {
+   background: rgba(255,32,32,0.5);
+}
+
+/* LOG */
+.v-debugwindow-log {
+  font-family: monospace;
+}
+
+.v-debugwindow-log .v-debugwindow-reset {
+  color: #fff;
+  background-color: #4C92ED;
+  padding: 4px;
+}
+
+.v-debugwindow-log .v-debugwindow-time {
+  text-align: right;
+  color: #999;
+}
+
+.v-debugwindow-log .v-debugwindow-message {
+  white-space: nowrap;
+  width: 100%
+}
+
+.v-debugwindow-log .v-debugwindow-message:hover {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.v-debugwindow-log .v-debugwindow-message em {
+  background-color: #C4E6F8;
+}
+
+
+/* HIERARCHY */
+.v-debugwindow-hierarchy .v-debugwindow-info {
+  padding: 1em;
+}
+
+
+/* NETWORK */
+.v-debugwindow-network .v-debugwindow-row {
+  display: block !important;
+}
+
+.v-debugwindow-network .v-debugwindow-row > span {
+  display: inline;
+}
diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.eot b/client/src/com/vaadin/client/debug/internal/theme/font.eot
new file mode 100644
index 0000000000..c2a63b3f08
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/font.eot
diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.svg b/client/src/com/vaadin/client/debug/internal/theme/font.svg
new file mode 100644
index 0000000000..9d00e7b2fc
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/font.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M381.186 86.878l-19.971 158.833c-5.863 46.622-48.723 84.419-95.716 84.419h-14.532c-47.001 0-89.858-37.817-95.716-84.419l-19.97-158.833c-1.436-11.424 6.727-20.682 18.243-20.682h209.425c11.51 0 19.677 9.259 18.24 20.682zM258.649 282.012c-0.247-0.002-0.88-0.024-1.846-0.089-1.701-0.113-3.619-0.303-5.697-0.592-5.904-0.816-11.787-2.227-17.148-4.329-4.881-1.913-9.060-4.299-12.364-7.148-2.764-2.384-5.232-5.065-7.418-7.995-3.359-4.502-5.904-9.371-7.723-14.231-0.628-1.681-1.117-3.22-1.477-4.573-0.119-0.443-0.212-0.821-0.316-1.281-1.186-6.304-7.257-10.453-13.564-9.268-6.304 1.186-10.453 7.257-9.268 13.564 0.127 0.667 0.355 1.684 0.705 2.995 0.548 2.050 1.262 4.301 2.161 6.703 2.546 6.805 6.097 13.6 10.862 19.983 3.173 4.252 6.786 8.176 10.868 11.697 5.449 4.699 11.878 8.372 19.062 11.185 7.233 2.832 14.846 4.657 22.436 5.708 2.645 0.366 5.115 0.613 7.35 0.759 1.398 0.092 2.451 0.131 3.103 0.139 6.414 0.075 11.675-5.065 11.752-11.479 0.077-6.412-5.062-11.675-11.476-11.75zM240.26 405.353c0-9.469 7.678-17.147 17.147-17.147s17.147 7.678 17.147 17.147v55.31c0 9.469-7.678 17.147-17.147 17.147s-17.147-7.678-17.147-17.147v-55.31zM382.291 357.86c-8.071-4.954-10.599-15.509-5.649-23.581s15.509-10.6 23.581-5.649l47.144 28.922c8.071 4.953 10.599 15.509 5.649 23.581-4.954 8.071-15.509 10.6-23.581 5.649l-47.144-28.921zM109.74 327.524c8.071-4.953 18.629-2.422 23.581 5.649 4.953 8.071 2.422 18.63-5.649 23.581l-47.144 28.921c-8.071 4.954-18.63 2.422-23.581-5.649-4.953-8.071-2.422-18.63 5.649-23.581l47.145-28.921zM146.053 49.625c-11.511 0-20.84-9.339-20.84-20.836v-30.617c0-11.507 9.314-20.836 20.84-20.836h222.163c11.51 0 20.841 9.339 20.841 20.836v30.617c0 11.507-9.313 20.836-20.841 20.836h-222.163z" horiz-adv-x="536" />
+<glyph unicode="&#xf002;" d="M329.143 242.286q0 52.857-37.572 90.428t-90.428 37.572-90.428-37.572-37.572-90.428 37.572-90.428 90.428-37.572 90.428 37.572 37.572 90.428zM475.428 4.572q0-14.857-10.857-25.714t-25.714-10.857q-15.428 0-25.714 10.857l-98 97.714q-51.143-35.428-114-35.428-40.857 0-78.143 15.857t-64.285 42.857-42.857 64.286-15.857 78.143 15.857 78.143 42.857 64.286 64.285 42.857 78.143 15.857 78.143-15.857 64.286-42.857 42.857-64.286 15.857-78.143q0-62.857-35.428-114l98-98q10.572-10.572 10.572-25.714z" horiz-adv-x="476" />
+<glyph unicode="&#xf00c;" d="M477.428 318.286q0-11.428-8-19.428l-245.714-245.714q-8-8-19.428-8t-19.428 8l-142.286 142.286q-8 8-8 19.428t8 19.428l38.857 38.857q8 8 19.428 8t19.428-8l84-84.286 187.429 187.714q8 8 19.428 8t19.428-8l38.857-38.857q8-8 8-19.429z" />
+<glyph unicode="&#xf00d;" d="M370.857 102.286q0-11.428-8-19.428l-38.857-38.857q-8-8-19.428-8t-19.428 8l-84 84-84-84q-8-8-19.428-8t-19.428 8l-38.857 38.857q-8 8-8 19.428t8 19.428l84 84-84 84q-8 8-8 19.428t8 19.428l38.857 38.857q8 8 19.428 8t19.428-8l84-84 84 84q8 8 19.428 8t19.428-8l38.857-38.857q8-8 8-19.428t-8-19.428l-84-84 84-84q8-8 8-19.428z" horiz-adv-x="403" />
+<glyph unicode="&#xf011;" d="M438.857 224q0-44.572-17.428-85.143t-46.857-70-70-46.857-85.143-17.428-85.143 17.428-70 46.857-46.857 70-17.428 85.143q0 52 23 98t64.715 77.143q12.285 9.143 27.285 7.143t23.857-14.286q9.143-12 7-27t-14.143-24.143q-28-21.143-43.285-51.714t-15.285-65.143q0-29.715 11.572-56.715t31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714q0 34.572-15.286 65.143t-43.286 51.714q-12 9.143-14.143 24.143t7 27q8.857 12.286 24 14.286t27.143-7.143q41.714-31.143 64.714-77.143t23-98zM256 443.428v-182.857q0-14.857-10.857-25.714t-25.715-10.857-25.714 10.857-10.857 25.714v182.857q0 14.857 10.857 25.715t25.714 10.857 25.714-10.857 10.857-25.715z" horiz-adv-x="439" />
+<glyph unicode="&#xf013;" d="M292.572 224q0 30.286-21.428 51.714t-51.714 21.428-51.714-21.428-21.428-51.714 21.428-51.714 51.714-21.428 51.714 21.428 21.428 51.714zM438.857 255.143v-63.429q0-3.428-2.286-6.572t-5.714-3.714l-52.857-8q-5.428-15.428-11.143-26 10-14.286 30.572-39.428 2.857-3.428 2.857-7.143t-2.572-6.572q-7.714-10.572-28.286-30.857t-26.857-20.286q-3.428 0-7.428 2.572l-39.428 30.857q-12.572-6.572-26-10.857-4.572-38.857-8.286-53.143-2-8-10.286-8h-63.428q-4 0-7 2.428t-3.286 6.143l-8 52.572q-14 4.572-25.714 10.572l-40.285-30.572q-2.857-2.572-7.143-2.572-4 0-7.143 3.143-36 32.572-47.143 48-2 2.857-2 6.572 0 3.428 2.285 6.572 4.285 6 14.572 19t15.428 20.143q-7.715 14.286-11.715 28.286l-52.285 7.714q-3.715 0.572-6 3.572t-2.285 6.714v63.428q0 3.429 2.285 6.572t5.428 3.714l53.143 8q4 13.143 11.143 26.286-11.428 16.286-30.572 39.428-2.857 3.429-2.857 6.857 0 2.857 2.572 6.571 7.428 10.286 28.143 30.714t27 20.429q3.715 0 7.428-2.857l39.428-30.572q12.572 6.572 26 10.857 4.572 38.857 8.286 53.143 2 8 10.286 8h63.428q4 0 7-2.428t3.286-6.143l8-52.572q14-4.572 25.714-10.572l40.572 30.572q2.572 2.572 6.857 2.572 3.714 0 7.143-2.857 36.857-34 47.143-48.572 2-2.285 2-6.285 0-3.429-2.286-6.572-4.286-6-14.572-19t-15.428-20.143q7.428-14.285 11.714-28l52.286-8q3.714-0.571 6-3.571t2.286-6.714z" horiz-adv-x="439" />
+<glyph unicode="&#xf014;" d="M146.286 269.714v-164.571q0-4-2.571-6.572t-6.571-2.572h-18.285q-4 0-6.572 2.572t-2.572 6.572v164.572q0 4 2.572 6.571t6.572 2.571h18.285q4 0 6.572-2.571t2.571-6.572zM219.429 269.714v-164.571q0-4-2.571-6.572t-6.572-2.572h-18.286q-4 0-6.572 2.572t-2.571 6.572v164.572q0 4 2.571 6.571t6.572 2.571h18.286q4 0 6.572-2.571t2.571-6.572zM292.572 269.714v-164.571q0-4-2.572-6.572t-6.572-2.572h-18.286q-4 0-6.572 2.572t-2.571 6.572v164.572q0 4 2.571 6.571t6.572 2.571h18.286q4 0 6.572-2.571t2.572-6.572zM329.143 62.857v270.857h-256v-270.857q0-6.286 2-11.572t4.143-7.714 3-2.428h237.715q0.857 0 3 2.428t4.143 7.714 2 11.572zM137.143 370.286h128l-13.714 33.428q-2 2.572-4.857 3.143h-90.571q-2.857-0.571-4.857-3.143zM402.286 361.143v-18.286q0-4-2.572-6.572t-6.572-2.571h-27.428v-270.857q0-23.714-13.428-41t-32.286-17.286h-237.714q-18.857 0-32.285 16.714t-13.428 40.428v272h-27.428q-4 0-6.572 2.572t-2.571 6.571v18.286q0 4 2.571 6.572t6.572 2.571h88.285l20 47.714q4.285 10.572 15.429 18t22.572 7.429h91.428q11.428 0 22.572-7.429t15.428-18l20-47.714h88.286q4 0 6.572-2.571t2.572-6.572z" horiz-adv-x="403" />
+<glyph unicode="&#xf017;" d="M310.857 214.857v-18.286q0-3.714-2.714-6.428t-6.428-2.714h-109.714q-3.714 0-6.428 2.714t-2.714 6.428v128q0 3.714 2.714 6.428t6.428 2.714h18.286q3.714 0 6.428-2.714t2.714-6.428v-100.572h82.286q3.714 0 6.428-2.714t2.714-6.428zM365.714 224q0 29.714-11.572 56.714t-31.286 46.714-46.714 31.286-56.714 11.571-56.714-11.571-46.715-31.286-31.285-46.714-11.572-56.714 11.572-56.714 31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xf021;" d="M431.714 178.286q0-1.428-0.286-2-18.286-76.572-76.572-124.143t-136.571-47.572q-41.715 0-80.715 15.714t-69.572 44.857l-36.857-36.857q-5.428-5.428-12.857-5.428t-12.857 5.428-5.428 12.857v128q0 7.428 5.428 12.857t12.857 5.428h128q7.428 0 12.857-5.428t5.429-12.857-5.428-12.857l-39.143-39.143q20.285-18.857 46-29.143t53.429-10.286q38.286 0 71.428 18.572t53.143 51.143q3.143 4.857 15.143 33.428 2.286 6.572 8.572 6.572h54.857q3.714 0 6.428-2.714t2.714-6.428zM438.857 406.857v-128q0-7.428-5.428-12.857t-12.857-5.428h-128q-7.428 0-12.857 5.428t-5.428 12.857 5.428 12.857l39.428 39.428q-42.286 39.143-99.714 39.143-38.286 0-71.428-18.571t-53.143-51.143q-3.143-4.857-15.143-33.429-2.285-6.572-8.572-6.572h-56.857q-3.715 0-6.428 2.714t-2.715 6.428v2q18.572 76.572 77.143 124.143t137.143 47.571q41.714 0 81.143-15.857t70-44.714l37.143 36.857q5.428 5.428 12.857 5.428t12.857-5.428 5.428-12.857z" horiz-adv-x="439" />
+<glyph unicode="&#xf023;" d="M201.143 187.428q0 15.143-10.714 25.857t-25.857 10.714-25.857-10.714-10.714-25.857q0-10.572 5.429-19.143t14.572-13.428l-19.714-65.428q-1.428-4.286 1.429-8t7.429-3.714h54.857q4.571 0 7.429 3.714t1.429 8l-19.715 65.428q9.143 4.857 14.572 13.428t5.428 19.143zM91.428 260.572h146.286v54.857q0 30.286-21.428 51.714t-51.714 21.429-51.715-21.429-21.428-51.714v-54.857zM329.143 233.143v-164.571q0-11.428-8-19.428t-19.428-8h-274.286q-11.428 0-19.428 8t-8 19.428v164.571q0 11.429 8 19.429t19.428 8h9.143v54.857q0 52.572 37.715 90.286t90.285 37.714 90.285-37.714 37.714-90.286v-54.857h9.143q11.428 0 19.428-8t8-19.428z" horiz-adv-x="329" />
+<glyph unicode="&#xf02e;" d="M332.572 443.428q6.572 0 12.572-2.572 9.428-3.714 15-11.714t5.572-17.714v-368.286q0-9.714-5.572-17.714t-15-11.714q-5.428-2.286-12.572-2.286-13.714 0-23.714 9.143l-126 121.143-126-121.143q-10.285-9.428-23.715-9.428-6.572 0-12.572 2.572-9.428 3.714-15 11.714t-5.572 17.714v368.286q0 9.714 5.572 17.714t15 11.715q6 2.571 12.572 2.571h299.428z" horiz-adv-x="366" />
+<glyph unicode="&#xf05a;" d="M292.572 86.857v18.286q0 4-2.572 6.572t-6.572 2.572h-27.428v137.143q0 4-2.571 6.571t-6.571 2.571h-91.428q-4 0-6.572-2.571t-2.571-6.572v-18.286q0-4 2.571-6.572t6.572-2.571h27.428v-109.715h-27.428q-4 0-6.572-2.572t-2.571-6.572v-18.286q0-4 2.571-6.572t6.572-2.572h128q4 0 6.572 2.572t2.572 6.572zM256 306.286v54.857q0 4-2.571 6.571t-6.571 2.572h-54.857q-4 0-6.571-2.572t-2.571-6.571v-54.857q0-4 2.571-6.572t6.572-2.571h54.857q4 0 6.571 2.571t2.572 6.572zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xf05b;" d="M342 187.428h-31.143q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h31.143q-9.143 30.857-32.143 53.857t-53.857 32.143v-31.143q0-7.429-5.429-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v31.143q-30.857-9.143-53.857-32.143t-32.143-53.857h31.143q7.429 0 12.857-5.428t5.428-12.857v-36.571q0-7.428-5.428-12.857t-12.857-5.428h-31.143q9.143-30.857 32.143-53.857t53.857-32.143v31.143q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-31.143q30.857 9.143 53.857 32.143t32.143 53.857zM438.857 242.286v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-40.857q-10.572-46-44.143-79.572t-79.572-44.143v-40.857q0-7.428-5.428-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v40.857q-46 10.572-79.572 44.143t-44.143 79.572h-40.857q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h40.857q10.572 46 44.143 79.572t79.572 44.143v40.857q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-40.857q46-10.571 79.572-44.143t44.143-79.572h40.857q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" />
+<glyph unicode="&#xf05e;" d="M365.714 224q0 39.714-20.286 74.286l-200.286-200.286q34.572-20.286 74.286-20.286 29.714 0 56.714 11.572t46.714 31.286 31.286 46.714 11.572 56.714zM93.428 149.714l200.286 200.286q-34.572 20.286-74.286 20.286-29.714 0-56.714-11.572t-46.715-31.286-31.285-46.714-11.572-56.714q0-39.714 20.285-74.286zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xf065;" d="M215.714 178.286q0-3.714-2.857-6.572l-94.857-94.857 41.143-41.143q5.429-5.428 5.429-12.857t-5.428-12.857-12.857-5.428h-128q-7.428 0-12.857 5.428t-5.428 12.857v128q0 7.428 5.428 12.857t12.857 5.428 12.857-5.428l41.143-41.143 94.857 94.857q2.857 2.857 6.572 2.857t6.572-2.857l32.572-32.572q2.857-2.857 2.857-6.572zM438.857 425.143v-128q0-7.429-5.428-12.857t-12.857-5.428-12.857 5.428l-41.143 41.143-94.857-94.857q-2.857-2.857-6.572-2.857t-6.572 2.857l-32.572 32.572q-2.857 2.857-2.857 6.572t2.857 6.572l94.857 94.857-41.143 41.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h128q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" />
+<glyph unicode="&#xf066;" d="M219.429 205.714v-128q0-7.428-5.429-12.857t-12.857-5.428-12.857 5.428l-41.143 41.143-94.857-94.857q-2.857-2.857-6.572-2.857t-6.572 2.857l-32.572 32.572q-2.857 2.857-2.857 6.572t2.857 6.572l94.857 94.857-41.143 41.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h128q7.428 0 12.857-5.428t5.429-12.857zM435.143 397.714q0-3.714-2.857-6.571l-94.857-94.857 41.143-41.143q5.428-5.429 5.428-12.857t-5.428-12.857-12.857-5.429h-128q-7.428 0-12.857 5.428t-5.429 12.857v128q0 7.429 5.428 12.857t12.857 5.428 12.857-5.428l41.143-41.143 94.857 94.857q2.857 2.857 6.572 2.857t6.572-2.857l32.572-32.572q2.857-2.857 2.857-6.572z" horiz-adv-x="439" />
+<glyph unicode="&#xf06a;" d="M219.429 443.428q59.715 0 110.143-29.428t79.857-79.857 29.428-110.143-29.428-110.143-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428zM256 87.143v54.286q0 4-2.571 6.714t-6.286 2.714h-54.857q-3.714 0-6.572-2.857t-2.857-6.572v-54.286q0-3.714 2.857-6.572t6.572-2.857h54.857q3.714 0 6.286 2.714t2.571 6.714zM255.429 185.428l5.143 177.428q0 3.429-2.857 5.143-2.857 2.286-6.857 2.286h-62.857q-4 0-6.857-2.286-2.857-1.714-2.857-5.143l4.857-177.428q0-2.857 2.857-5t6.857-2.143h52.857q4 0 6.714 2.143t3 5z" horiz-adv-x="439" />
+<glyph unicode="&#xf071;" d="M292.572 87.143v54.286q0 4-2.714 6.714t-6.428 2.714h-54.857q-3.714 0-6.429-2.714t-2.714-6.714v-54.286q0-4 2.714-6.714t6.428-2.714h54.857q3.714 0 6.428 2.714t2.714 6.714zM292 194l5.143 131.143q0 3.428-2.857 5.428-3.714 3.143-6.857 3.143h-62.857q-3.143 0-6.857-3.143-2.857-2-2.857-6l4.857-130.572q0-2.857 2.857-4.714t6.857-1.857h52.857q4 0 6.714 1.857t3 4.714zM288 460.857l219.428-402.285q10-18-0.572-36-4.857-8.286-13.286-13.143t-18.143-4.857h-438.857q-9.715 0-18.143 4.857t-13.286 13.143q-10.572 18-0.572 36l219.429 402.286q4.857 8.857 13.429 14t18.572 5.143 18.572-5.143 13.428-14z" />
+<glyph unicode="&#xf0c9;" d="M438.857 96v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 242.286v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 388.572v-36.572q0-7.428-5.428-12.857t-12.857-5.429h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.571q0 7.429 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" />
+<glyph unicode="&#xf0d0;" d="M340 314l83.714 83.714-30.572 30.572-83.714-83.714zM467.714 397.714q0-7.714-5.143-12.857l-367.428-367.428q-5.143-5.143-12.857-5.143t-12.857 5.143l-56.572 56.572q-5.143 5.143-5.143 12.857t5.143 12.857l367.428 367.428q5.143 5.143 12.857 5.143t12.857-5.143l56.572-56.572q5.143-5.143 5.143-12.857zM81.715 452l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28zM181.714 405.714l56-17.143-56-17.143-17.143-56-17.143 56-56 17.143 56 17.143 17.143 56zM447.428 269.143l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28zM264.572 452l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28z" horiz-adv-x="476" />
+<glyph unicode="&#xf0e8;" d="M512 123.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857h-146.286v-54.857h27.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857h-146.286v-54.857h27.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857q0 14.857 10.857 25.714t25.715 10.857h146.286v54.857h-27.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h91.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-27.428v-54.857h146.286q14.857 0 25.714-10.857t10.857-25.714v-54.857h27.428q11.428 0 19.428-8t8-19.428z" />
+<glyph unicode="&#xf0ec;" d="M512 141.714v-54.857q0-3.714-2.714-6.428t-6.428-2.714h-393.143v-54.857q0-3.714-2.715-6.428t-6.428-2.714q-3.428 0-6.857 2.857l-91.143 91.428q-2.571 2.572-2.571 6.286 0 4 2.571 6.572l91.428 91.428q2.572 2.572 6.572 2.572 3.715 0 6.428-2.714t2.715-6.428v-54.857h393.143q3.714 0 6.428-2.714t2.714-6.428zM512 297.143q0-4-2.572-6.572l-91.428-91.428q-2.572-2.572-6.572-2.572-3.714 0-6.428 2.714t-2.714 6.428v54.857h-393.143q-3.715 0-6.428 2.714t-2.715 6.429v54.857q0 3.714 2.715 6.428t6.428 2.714h393.143v54.857q0 4 2.572 6.571t6.572 2.572q3.428 0 6.857-2.857l91.143-91.143q2.572-2.571 2.572-6.572z" />
+<glyph unicode="&#xf0f0;" d="M109.715 96q0-7.428-5.428-12.857t-12.857-5.428-12.857 5.428-5.428 12.857 5.428 12.857 12.857 5.428 12.857-5.428 5.428-12.857zM402.286 78.572q0-34.572-20.857-54.286t-55.428-19.714h-249.714q-34.572 0-55.428 19.714t-20.857 54.286q0 19.428 1.571 37.428t6.857 39.428 13.572 37.857 23.143 29.428 34.285 17.286q-6.285-14.857-6.285-34.286v-58q-16.572-5.714-26.572-20t-10-31.714q0-22.857 16-38.857t38.857-16 38.857 16 16 38.857q0 17.428-10.143 31.714t-26.428 20v58q0 17.714 7.143 26.572 37.715-29.714 84.285-29.714t84.285 29.714q7.143-8.857 7.143-26.572v-18.286q-30.286 0-51.714-21.428t-21.428-51.714v-25.428q-9.143-8.286-9.143-20.286 0-11.428 8-19.428t19.429-8 19.428 8 8 19.428q0 12-9.143 20.286v25.428q0 14.857 10.857 25.714t25.714 10.857 25.714-10.857 10.857-25.714v-25.428q-9.143-8.286-9.143-20.286 0-11.428 8-19.428t19.428-8 19.428 8 8 19.428q0 12-9.143 20.286v25.428q0 19.428-9.857 36.428t-26.714 26.714q0 2.857 0.143 12.143t0 13.714-0.714 11.857-2 13.428-3.714 11.428q19.428-4.286 34.286-17.286t23.143-29.428 13.572-37.857 6.857-39.428 1.572-37.428zM310.857 333.714q0-45.428-32.143-77.572t-77.572-32.143-77.572 32.143-32.143 77.571 32.143 77.572 77.572 32.143 77.572-32.143 32.143-77.572z" horiz-adv-x="403" />
+<glyph unicode="&#xf10c;" d="M365.714 224q0 29.714-11.572 56.714t-31.286 46.714-46.714 31.286-56.714 11.571-56.714-11.571-46.715-31.286-31.285-46.714-11.572-56.714 11.572-56.714 31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+<glyph unicode="&#xf110;" d="M141.714 96q0-17.143-12.143-29.143t-29-12q-17.143 0-29.143 12t-12 29.143 12 29.143 29.143 12q16.857 0 29-12t12.143-29.143zM265.143 41.143q0-15.143-10.714-25.857t-25.857-10.714-25.857 10.714-10.714 25.857 10.714 25.857 25.857 10.714 25.857-10.714 10.714-25.857zM91.428 224q0-18.857-13.428-32.286t-32.285-13.428-32.285 13.428-13.428 32.286 13.428 32.286 32.285 13.428 32.285-13.428 13.428-32.286zM388.572 96q0-13.143-9.428-22.572t-22.572-9.428-22.572 9.428-9.428 22.572 9.428 22.572 22.572 9.428 22.572-9.428 9.428-22.572zM150.857 352q0-20.857-14.714-35.572t-35.572-14.714-35.572 14.714-14.715 35.572 14.715 35.572 35.572 14.714 35.572-14.714 14.714-35.572zM283.428 406.857q0-22.857-16-38.857t-38.857-16-38.857 16-16 38.857 16 38.857 38.857 16 38.857-16 16-38.857zM438.857 224q0-11.428-8-19.428t-19.428-8-19.428 8-8 19.428 8 19.428 19.428 8 19.428-8 8-19.428zM379.428 352q0-9.428-6.714-16.143t-16.143-6.714-16.143 6.714-6.714 16.143 6.714 16.143 16.143 6.714 16.143-6.714 6.714-16.143z" horiz-adv-x="448" />
+<glyph unicode="&#xf111;" d="M438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.ttf b/client/src/com/vaadin/client/debug/internal/theme/font.ttf
new file mode 100644
index 0000000000..eee808e07e
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/font.ttf
diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.woff b/client/src/com/vaadin/client/debug/internal/theme/font.woff
new file mode 100644
index 0000000000..2cd069ffdf
--- /dev/null
+++ b/client/src/com/vaadin/client/debug/internal/theme/font.woff
diff --git a/client/src/com/vaadin/client/ui/VNotification.java b/client/src/com/vaadin/client/ui/VNotification.java
index 93dc26f8be..af7e429340 100644
--- a/client/src/com/vaadin/client/ui/VNotification.java
+++ b/client/src/com/vaadin/client/ui/VNotification.java
@@ -17,14 +17,13 @@
 package com.vaadin.client.ui;
 
 import java.util.ArrayList;
-import java.util.Date;
 import java.util.EventObject;
 import java.util.Iterator;
 
 import com.google.gwt.aria.client.Roles;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
@@ -33,6 +32,8 @@ import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.AnimationUtil;
+import com.vaadin.client.AnimationUtil.AnimationEndListener;
 import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.UIDL;
@@ -53,6 +54,14 @@ public class VNotification extends VOverlay {
     public static final Position BOTTOM_LEFT = Position.BOTTOM_LEFT;
     public static final Position BOTTOM_RIGHT = Position.BOTTOM_RIGHT;
 
+    private static final String STYLENAME_POSITION_TOP = "v-position-top";
+    private static final String STYLENAME_POSITION_RIGHT = "v-position-right";
+    private static final String STYLENAME_POSITION_BOTTOM = "v-position-bottom";
+    private static final String STYLENAME_POSITION_LEFT = "v-position-left";
+    private static final String STYLENAME_POSITION_MIDDLE = "v-position-middle";
+    private static final String STYLENAME_POSITION_CENTER = "v-position-center";
+    private static final String STYLENAME_POSITION_ASSISTIVE = "v-position-assistive";
+
     /**
      * Position that is only accessible for assistive devices, invisible for
      * visual users.
@@ -66,16 +75,11 @@ public class VNotification extends VOverlay {
     private static final int mouseMoveThreshold = 7;
     private static final int Z_INDEX_BASE = 20000;
     public static final String STYLE_SYSTEM = "system";
-    private static final int FADE_ANIMATION_INTERVAL = 50; // == 20 fps
 
     private static final ArrayList<VNotification> notifications = new ArrayList<VNotification>();
 
-    private int startOpacity = 90;
-    private int fadeMsec = 400;
-    private int delayMsec = 1000;
-
-    private Timer fader;
-    private Timer delay;
+    private boolean infiniteDelay = false;
+    private int hideDelay = 0;
 
     private int x = -1;
     private int y = -1;
@@ -103,13 +107,14 @@ public class VNotification extends VOverlay {
     @Deprecated
     public VNotification(int delayMsec) {
         this();
-        this.delayMsec = delayMsec;
+        setDelay(delayMsec);
+
         if (BrowserInfo.get().isTouchDevice()) {
             new Timer() {
                 @Override
                 public void run() {
                     if (isAttached()) {
-                        fade();
+                        hide();
                     }
                 }
             }.schedule(delayMsec + TOUCH_DEVICE_IDLE_DELAY);
@@ -127,24 +132,17 @@ public class VNotification extends VOverlay {
     @Deprecated
     public VNotification(int delayMsec, int fadeMsec, int startOpacity) {
         this(delayMsec);
-        this.fadeMsec = fadeMsec;
-        this.startOpacity = startOpacity;
+        AnimationUtil.setAnimationDuration(getElement(), fadeMsec + "ms");
+        getElement().getStyle().setOpacity(startOpacity / 100);
     }
 
-    public void startDelay() {
-        DOM.removeEventPreview(this);
-        if (delayMsec > 0) {
-            if (delay == null) {
-                delay = new Timer() {
-                    @Override
-                    public void run() {
-                        fade();
-                    }
-                };
-                delay.schedule(delayMsec);
-            }
-        } else if (delayMsec == 0) {
-            fade();
+    private void setDelay(int delayMsec) {
+        if (delayMsec < 0) {
+            infiniteDelay = true;
+            hideDelay = 0;
+        } else {
+            infiniteDelay = false;
+            hideDelay = delayMsec;
         }
     }
 
@@ -237,15 +235,21 @@ public class VNotification extends VOverlay {
     }
 
     public void show(Position position, String style) {
-        setOpacity(getElement(), startOpacity);
-        if (style != null) {
+        if (temporaryStyle != null) {
+            removeStyleName(temporaryStyle);
+            removeStyleDependentName(temporaryStyle);
+            temporaryStyle = null;
+        }
+        if (style != null && style.length() > 0) {
             temporaryStyle = style;
             addStyleName(style);
             addStyleDependentName(style);
         }
+
+        setPosition(position);
         super.show();
+        updatePositionOffsets(position);
         notifications.add(this);
-        setPosition(position);
         positionOrSizeUpdated();
         /**
          * Android 4 fails to render notifications correctly without a little
@@ -258,149 +262,144 @@ public class VNotification extends VOverlay {
 
     @Override
     public void hide() {
-        DOM.removeEventPreview(this);
-        cancelDelay();
-        cancelFade();
-        if (temporaryStyle != null) {
-            removeStyleName(temporaryStyle);
-            removeStyleDependentName(temporaryStyle);
-            temporaryStyle = null;
+        // Run only once
+        if (notifications.contains(this)) {
+            DOM.removeEventPreview(this);
+
+            // Still animating in, wait for it to finish before touching
+            // the animation delay (which would restart the animation-in
+            // in some browsers)
+            if (getStyleName().contains(
+                    VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                AnimationUtil.addAnimationEndListener(getElement(),
+                        new AnimationEndListener() {
+                            @Override
+                            public void onAnimationEnd(NativeEvent event) {
+                                if (AnimationUtil
+                                        .getAnimationName(event)
+                                        .contains(
+                                                VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                                    VNotification.this.hide();
+                                }
+                            }
+                        });
+            } else {
+                // Use a timer in browsers without CSS animation support
+                // to show the notification for the duration of the delay
+                if (BrowserInfo.get().isIE8() || BrowserInfo.get().isIE9()) {
+                    new Timer() {
+                        @Override
+                        public void run() {
+                            VNotification.super.hide();
+                        }
+                    }.schedule(hideDelay);
+                } else {
+                    if (hideDelay > 0) {
+                        AnimationUtil.setAnimationDelay(getElement(), hideDelay
+                                + "ms");
+                    }
+                    VNotification.super.hide();
+
+                }
+                fireEvent(new HideEvent(this));
+                notifications.remove(this);
+            }
         }
-        super.hide();
-        notifications.remove(this);
-        fireEvent(new HideEvent(this));
     }
 
-    public void fade() {
-        DOM.removeEventPreview(this);
-        cancelDelay();
-        if (fader == null) {
-            fader = new Timer() {
-                private final long start = new Date().getTime();
+    private void updatePositionOffsets(com.vaadin.shared.Position position) {
+        final Element el = getElement();
 
-                @Override
-                public void run() {
-                    /*
-                     * To make animation smooth, don't count that event happens
-                     * on time. Reduce opacity according to the actual time
-                     * spent instead of fixed decrement.
-                     */
-                    long now = new Date().getTime();
-                    long timeEplaced = now - start;
-                    float remainingFraction = 1 - timeEplaced
-                            / (float) fadeMsec;
-                    int opacity = (int) (startOpacity * remainingFraction);
-                    if (opacity <= 0) {
-                        cancel();
-                        hide();
-                    } else {
-                        setOpacity(getElement(), opacity);
-                    }
-                }
-            };
-            fader.scheduleRepeating(FADE_ANIMATION_INTERVAL);
+        // Remove all offsets (GWT PopupPanel defaults)
+        el.getStyle().clearTop();
+        el.getStyle().clearLeft();
+
+        switch (position) {
+        case MIDDLE_LEFT:
+        case MIDDLE_RIGHT:
+            center();
+            el.getStyle().clearLeft();
+            break;
+        case TOP_CENTER:
+        case BOTTOM_CENTER:
+            center();
+            el.getStyle().clearTop();
+            break;
+        case MIDDLE_CENTER:
+            center();
+            break;
         }
     }
 
     public void setPosition(com.vaadin.shared.Position position) {
         final Element el = getElement();
-        el.getStyle().clearTop();
-        el.getStyle().clearLeft();
-        el.getStyle().clearBottom();
-        el.getStyle().clearRight();
+
+        // Remove any previous positions
+        el.removeClassName(STYLENAME_POSITION_TOP);
+        el.removeClassName(STYLENAME_POSITION_RIGHT);
+        el.removeClassName(STYLENAME_POSITION_BOTTOM);
+        el.removeClassName(STYLENAME_POSITION_LEFT);
+        el.removeClassName(STYLENAME_POSITION_MIDDLE);
+        el.removeClassName(STYLENAME_POSITION_CENTER);
+        el.removeClassName(STYLENAME_POSITION_ASSISTIVE);
+
         switch (position) {
         case TOP_LEFT:
-            el.getStyle().setTop(0, Unit.PX);
-            el.getStyle().setLeft(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_TOP);
+            el.addClassName(STYLENAME_POSITION_LEFT);
             break;
         case TOP_RIGHT:
-            el.getStyle().setTop(0, Unit.PX);
-            el.getStyle().setRight(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_TOP);
+            el.addClassName(STYLENAME_POSITION_RIGHT);
             break;
         case MIDDLE_LEFT:
-            center();
-            el.getStyle().setLeft(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_MIDDLE);
+            el.addClassName(STYLENAME_POSITION_LEFT);
             break;
         case MIDDLE_RIGHT:
-            center();
-            el.getStyle().clearLeft();
-            el.getStyle().setRight(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_MIDDLE);
+            el.addClassName(STYLENAME_POSITION_RIGHT);
             break;
         case BOTTOM_RIGHT:
-            // Avoiding strings would be ugly since another Position is imported
-            // TODO this is most likely redundant
-            el.getStyle().setProperty("position", "absolute");
-
-            el.getStyle().setBottom(0, Unit.PX);
-            el.getStyle().setRight(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_BOTTOM);
+            el.addClassName(STYLENAME_POSITION_RIGHT);
             break;
         case BOTTOM_LEFT:
-            el.getStyle().setBottom(0, Unit.PX);
-            el.getStyle().setLeft(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_BOTTOM);
+            el.addClassName(STYLENAME_POSITION_LEFT);
             break;
         case TOP_CENTER:
-            center();
-            el.getStyle().setTop(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_TOP);
+            el.addClassName(STYLENAME_POSITION_CENTER);
             break;
         case BOTTOM_CENTER:
-            center();
-            el.getStyle().clearTop();
-            el.getStyle().setBottom(0, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_BOTTOM);
+            el.addClassName(STYLENAME_POSITION_CENTER);
             break;
         case ASSISTIVE:
-            el.getStyle().setTop(-2000, Unit.PX);
-            el.getStyle().setLeft(-2000, Unit.PX);
+            el.addClassName(STYLENAME_POSITION_ASSISTIVE);
             break;
-        default:
-        case MIDDLE_CENTER:
-            center();
-            break;
-        }
-    }
-
-    private void cancelFade() {
-        if (fader != null) {
-            fader.cancel();
-            fader = null;
-        }
-    }
-
-    private void cancelDelay() {
-        if (delay != null) {
-            delay.cancel();
-            delay = null;
-        }
-    }
-
-    private void setOpacity(Element el, int opacity) {
-        el.getStyle().setOpacity(opacity / 100.0);
-        if (BrowserInfo.get().isIE()) {
-            el.getStyle().setProperty("filter",
-                    "Alpha(opacity=" + opacity + ")");
         }
     }
 
     @Override
     public void onBrowserEvent(Event event) {
-        DOM.removeEventPreview(this);
-        if (fader == null) {
-            fade();
-        }
+        hide();
     }
 
     @Override
     public boolean onEventPreview(Event event) {
         int type = DOM.eventGetType(event);
         // "modal"
-        if (delayMsec == -1 || temporaryStyle == STYLE_SYSTEM) {
+        if (infiniteDelay || temporaryStyle == STYLE_SYSTEM) {
             if (type == Event.ONCLICK) {
                 if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))) {
-                    fade();
+                    hide();
                     return false;
                 }
             } else if (type == Event.ONKEYDOWN
                     && event.getKeyCode() == KeyCodes.KEY_ESCAPE) {
-                fade();
+                hide();
                 return false;
             }
             if (temporaryStyle == STYLE_SYSTEM) {
@@ -412,25 +411,24 @@ public class VNotification extends VOverlay {
         // default
         switch (type) {
         case Event.ONMOUSEMOVE:
-
             if (x < 0) {
                 x = DOM.eventGetClientX(event);
                 y = DOM.eventGetClientY(event);
             } else if (Math.abs(DOM.eventGetClientX(event) - x) > mouseMoveThreshold
                     || Math.abs(DOM.eventGetClientY(event) - y) > mouseMoveThreshold) {
-                startDelay();
+                hide();
             }
             break;
         case Event.ONMOUSEDOWN:
         case Event.ONMOUSEWHEEL:
         case Event.ONSCROLL:
-            startDelay();
+            hide();
             break;
         case Event.ONKEYDOWN:
             if (event.getRepeat()) {
                 return true;
             }
-            startDelay();
+            hide();
             break;
         default:
             break;
@@ -511,17 +509,17 @@ public class VNotification extends VOverlay {
     public static VNotification createNotification(int delayMsec, Widget owner) {
         final VNotification notification = GWT.create(VNotification.class);
         notification.setWaiAriaRole(null);
+        notification.setDelay(delayMsec);
 
-        notification.delayMsec = delayMsec;
         if (BrowserInfo.get().isTouchDevice()) {
             new Timer() {
                 @Override
                 public void run() {
                     if (notification.isAttached()) {
-                        notification.fade();
+                        notification.hide();
                     }
                 }
-            }.schedule(notification.delayMsec + TOUCH_DEVICE_IDLE_DELAY);
+            }.schedule(delayMsec + TOUCH_DEVICE_IDLE_DELAY);
         }
         notification.setOwner(owner);
         return notification;
diff --git a/client/src/com/vaadin/client/ui/VOverlay.java b/client/src/com/vaadin/client/ui/VOverlay.java
index 0e9dcbe4cb..a4f62775e1 100644
--- a/client/src/com/vaadin/client/ui/VOverlay.java
+++ b/client/src/com/vaadin/client/ui/VOverlay.java
@@ -16,14 +16,18 @@
 
 package com.vaadin.client.ui;
 
+import java.util.logging.Level;
+import java.util.logging.Logger;
+
 import com.google.gwt.animation.client.Animation;
 import com.google.gwt.aria.client.Roles;
+import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.dom.client.Document;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.IFrameElement;
+import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.dom.client.Style;
 import com.google.gwt.dom.client.Style.BorderStyle;
-import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.dom.client.Style.Position;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.logical.shared.CloseEvent;
@@ -33,16 +37,45 @@ import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.AnimationUtil;
+import com.vaadin.client.AnimationUtil.AnimationEndListener;
 import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.ComponentConnector;
+import com.vaadin.client.ComputedStyle;
 import com.vaadin.client.Util;
-import com.vaadin.client.VConsole;
 
 /**
+ * <p>
  * In Vaadin UI this Overlay should always be used for all elements that
  * temporary float over other components like context menus etc. This is to deal
  * stacking order correctly with VWindow objects.
+ * </p>
+ * 
+ * <h3>Shadow</h3>
+ * <p>
+ * The separate shadow element underneath the main overlay element is <strong>
+ * <em>deprecated</em></strong>, and should not be used for new overlay
+ * components. CSS box-shadow should be used instead of a separate shadow
+ * element. Remember to include any vendor-prefixed versions to support all
+ * browsers that you need to. To cover all possible browsers that Vaadin 7
+ * supports, add <code>-webkit-box-shadow</code> and the standard
+ * <code>box-shadow</code> properties.
+ * </p>
+ * 
+ * <p>
+ * For IE8, which doesn't support CSS box-shadow, you can use the proprietary
+ * DropShadow filter. It doesn't provide the exact same features as box-shadow,
+ * but it is suitable for graceful degradation. Other options are to use a
+ * border or a pseudo-element underneath the overlay which mimics a shadow, or
+ * any combination of these.
+ * </p>
+ * 
+ * <p>
+ * Read more about the DropShadow filter from <a
+ * href="http://msdn.microsoft.com/en-us/library/ms532985(v=vs.85).aspx"
+ * >Microsoft Developer Network</a>
+ * </p>
  */
 public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
 
@@ -119,7 +152,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      * Shadow element style. If an extending class wishes to use a different
      * style of shadow, it can use setShadowStyle(String) to give the shadow
      * element a new style name.
+     * 
+     * @deprecated See main JavaDoc for VOverlay
      */
+    @Deprecated
     public static final String CLASSNAME_SHADOW = "v-shadow";
 
     /**
@@ -128,9 +164,16 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      */
     public static final String CLASSNAME_CONTAINER = "v-overlay-container";
 
-    /*
+    public static final String ADDITIONAL_CLASSNAME_ANIMATE_IN = "animate-in";
+    public static final String ADDITIONAL_CLASSNAME_ANIMATE_OUT = "animate-out";
+
+    /**
      * The shadow element for this overlay.
+     * 
+     * @deprecated See main JavaDoc for VOverlay
+     * 
      */
+    @Deprecated
     private Element shadow;
 
     /*
@@ -172,7 +215,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      * </pre>
      * 
      * See default theme 'shadow.css' for implementation example.
+     * 
+     * @deprecated See main JavaDoc for VOverlay
      */
+    @Deprecated
     private static final String SHADOW_HTML = "<div aria-hidden=\"true\" class=\"top-left\"></div><div class=\"top\"></div><div class=\"top-right\"></div><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div><div class=\"bottom-left\"></div><div class=\"bottom\"></div><div class=\"bottom-right\"></div>";
 
     /**
@@ -180,6 +226,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      */
     private static final int POPUP_PANEL_ANIMATION_DURATION = 200;
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     private boolean sinkShadowEvents = false;
 
     public VOverlay() {
@@ -197,6 +247,11 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         adjustZIndex();
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay. Use the other constructors
+     *             without the <code>showShadow</code> parameter.
+     */
+    @Deprecated
     public VOverlay(boolean autoHide, boolean modal, boolean showShadow) {
         super(autoHide, modal);
         setShadowEnabled(showShadow);
@@ -210,7 +265,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      * 
      * @param enabled
      *            true if shadow should be displayed
+     * 
+     * @deprecated See main JavaDoc for VOverlay
      */
+    @Deprecated
     protected void setShadowEnabled(boolean enabled) {
         if (enabled != isShadowEnabled()) {
             if (enabled) {
@@ -226,6 +284,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     protected boolean isShadowEnabled() {
         return shadow != null;
     }
@@ -240,6 +302,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     private void removeShadowIfPresent() {
         if (isShadowAttached()) {
             // Remove event listener from the shadow
@@ -249,6 +315,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     private boolean isShadowAttached() {
         return isShadowEnabled() && shadow.getParentElement() != null;
     }
@@ -362,7 +432,9 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
     @Override
     public void show() {
         current = this;
-        super.show();
+
+        maybeShowWithAnimation();
+
         if (isAnimationEnabled()) {
             new ResizeAnimation().run(POPUP_PANEL_ANIMATION_DURATION);
         } else {
@@ -371,6 +443,67 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         current = null;
     }
 
+    private JavaScriptObject animateInListener;
+
+    private boolean maybeShowWithAnimation() {
+        boolean isAttached = isAttached() && isShowing();
+        super.show();
+
+        // Don't animate if already visible or browser is IE8 or IE9 (no CSS
+        // animation support)
+        if (isAttached || BrowserInfo.get().isIE8()
+                || BrowserInfo.get().isIE9()) {
+            return false;
+        } else {
+            // Check if animations are used
+            setVisible(false);
+            addStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN);
+            if (isShadowEnabled()) {
+                shadow.addClassName(CLASSNAME_SHADOW + "-"
+                        + ADDITIONAL_CLASSNAME_ANIMATE_IN);
+            }
+
+            ComputedStyle cs = new ComputedStyle(getElement());
+            String animationName = AnimationUtil.getAnimationName(cs);
+            if (animationName == null) {
+                animationName = "";
+            }
+            setVisible(true);
+
+            if (animationName.contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                // Disable GWT PopupPanel animation if used
+                setAnimationEnabled(false);
+                animateInListener = AnimationUtil.addAnimationEndListener(
+                        getElement(), new AnimationEndListener() {
+                            @Override
+                            public void onAnimationEnd(NativeEvent event) {
+                                String animationName = AnimationUtil
+                                        .getAnimationName(event);
+                                if (animationName
+                                        .contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                                    AnimationUtil.removeAnimationEndListener(
+                                            getElement(), animateInListener);
+                                    removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                                    if (isShadowEnabled()) {
+                                        shadow.removeClassName(CLASSNAME_SHADOW
+                                                + "-"
+                                                + ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                                    }
+                                }
+                            }
+                        });
+                return true;
+            } else {
+                removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                if (isShadowEnabled()) {
+                    shadow.removeClassName(CLASSNAME_SHADOW + "-"
+                            + ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                }
+                return false;
+            }
+        }
+    }
+
     @Override
     protected void onDetach() {
         super.onDetach();
@@ -414,7 +547,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      *            The new style name for the shadow element. Will be prefixed by
      *            CLASSNAME_SHADOW, e.g. style=='foobar' -> actual style
      *            name=='v-shadow-foobar'.
+     * 
+     * @deprecated See main JavaDoc for VOverlay
      */
+    @Deprecated
     protected void setShadowStyle(String style) {
         if (isShadowEnabled()) {
             shadow.setClassName(CLASSNAME_SHADOW + "-" + style);
@@ -455,17 +591,17 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
             return;
         }
         // Calculate proper z-index
-        String zIndex = null;
+        int zIndex = -1;
         try {
             // Odd behaviour with Windows Hosted Mode forces us to use
             // this redundant try/catch block (See dev.vaadin.com #2011)
-            zIndex = DOM.getStyleAttribute(getElement(), "zIndex");
+            zIndex = Integer.parseInt(getElement().getStyle().getZIndex());
         } catch (Exception ignore) {
             // Ignored, will cause no harm
-            zIndex = "1000";
+            zIndex = 1000;
         }
-        if (zIndex == null) {
-            zIndex = "" + Z_INDEX;
+        if (zIndex == -1) {
+            zIndex = Z_INDEX;
         }
         // Calculate position and size
         if (BrowserInfo.get().isIE()) {
@@ -502,7 +638,11 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
-    private void updateShadowPosition(final double progress, String zIndex,
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
+    private void updateShadowPosition(final double progress, int zIndex,
             PositionAndSize positionAndSize) {
         // Opera needs some shaking to get parts of the shadow showing
         // properly (ticket #2704)
@@ -514,12 +654,8 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
 
         updatePositionAndSize(shadow, positionAndSize);
-        shadow.getStyle().setProperty("zIndex", zIndex);
-        if (progress < 0.9) {
-            shadow.getStyle().setDisplay(Display.NONE);
-        } else {
-            shadow.getStyle().clearDisplay();
-        }
+        shadow.getStyle().setZIndex(zIndex);
+        shadow.getStyle().setProperty("display", progress < 0.9 ? "none" : "");
 
         // Opera fix, part 2 (ticket #2704)
         if (BrowserInfo.get().isOpera()) {
@@ -582,6 +718,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         sinkShadowEvents();
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     private void sinkShadowEvents() {
         if (isSinkShadowEvents() && isShadowAttached()) {
             // Sink the same events as the actual overlay has sunk
@@ -591,6 +731,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     private void unsinkShadowEvents() {
         if (isShadowAttached()) {
             DOM.setEventListener(shadow, null);
@@ -607,7 +751,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
      * overlay
      * 
      * @param sinkShadowEvents
+     * 
+     * @deprecated See main JavaDoc for VOverlay
      */
+    @Deprecated
     protected void setSinkShadowEvents(boolean sinkShadowEvents) {
         this.sinkShadowEvents = sinkShadowEvents;
         if (sinkShadowEvents) {
@@ -617,6 +764,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         }
     }
 
+    /**
+     * @deprecated See main JavaDoc for VOverlay
+     */
+    @Deprecated
     protected boolean isSinkShadowEvents() {
         return sinkShadowEvents;
     }
@@ -675,7 +826,9 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
         if (ac == null) {
             // could not figure out which one we belong to, styling will
             // probably fail
-            VConsole.error("Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel");
+            Logger.getLogger(getClass().getSimpleName())
+                    .log(Level.WARNING,
+                            "Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel");
             return RootPanel.get().getElement();
         } else {
             return getOverlayContainer(ac);
@@ -790,4 +943,94 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> {
          return $wnd.innerHeight !== undefined ? $wnd.innerHeight :-1;
     }-*/;
 
-}
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.google.gwt.user.client.ui.PopupPanel#hide()
+     */
+    @Override
+    public void hide() {
+        hide(false);
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see com.google.gwt.user.client.ui.PopupPanel#hide(boolean)
+     */
+    @Override
+    public void hide(final boolean autoClosed) {
+        if (BrowserInfo.get().isIE8() || BrowserInfo.get().isIE9()) {
+            super.hide(autoClosed);
+        } else {
+            if (getStyleName().contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                AnimationUtil.addAnimationEndListener(getElement(),
+                        new AnimationEndListener() {
+                            @Override
+                            public void onAnimationEnd(NativeEvent event) {
+                                if (AnimationUtil
+                                        .getAnimationName(event)
+                                        .contains(
+                                                ADDITIONAL_CLASSNAME_ANIMATE_IN)) {
+                                    VOverlay.this.hide(autoClosed);
+                                }
+                            }
+                        });
+            } else {
+                // Check if animations are used
+                addStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                if (isShadowEnabled()) {
+                    shadow.addClassName(CLASSNAME_SHADOW + "-"
+                            + ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                }
+                ComputedStyle cs = new ComputedStyle(getElement());
+                String animationName = AnimationUtil.getAnimationName(cs);
+                if (animationName == null) {
+                    animationName = "";
+                }
+
+                if (animationName.contains(ADDITIONAL_CLASSNAME_ANIMATE_OUT)) {
+                    // Disable GWT PopupPanel closing animation if used
+                    setAnimationEnabled(false);
+
+                    AnimationUtil.addAnimationEndListener(getElement(),
+                            new AnimationEndListener() {
+                                @Override
+                                public void onAnimationEnd(NativeEvent event) {
+                                    String animationName = AnimationUtil
+                                            .getAnimationName(event);
+                                    if (animationName
+                                            .contains(ADDITIONAL_CLASSNAME_ANIMATE_OUT)) {
+                                        AnimationUtil
+                                                .removeAllAnimationEndListeners(getElement());
+                                        // Remove both animation styles just in
+                                        // case
+                                        removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                                        removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                                        if (isShadowEnabled()) {
+                                            shadow.removeClassName(CLASSNAME_SHADOW
+                                                    + "-"
+                                                    + ADDITIONAL_CLASSNAME_ANIMATE_IN);
+                                            shadow.removeClassName(CLASSNAME_SHADOW
+                                                    + "-"
+                                                    + ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                                        }
+                                        VOverlay.super.hide(autoClosed);
+                                    }
+                                }
+                            });
+                    // No event previews should happen after the animation has
+                    // started
+                    VOverlay.this.setPreviewingAllNativeEvents(false);
+                } else {
+                    removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                    if (isShadowEnabled()) {
+                        shadow.removeClassName(CLASSNAME_SHADOW + "-"
+                                + ADDITIONAL_CLASSNAME_ANIMATE_OUT);
+                    }
+                    super.hide(autoClosed);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/com/vaadin/client/ui/VPopupView.java b/client/src/com/vaadin/client/ui/VPopupView.java
index adf070f453..931945e546 100644
--- a/client/src/com/vaadin/client/ui/VPopupView.java
+++ b/client/src/com/vaadin/client/ui/VPopupView.java
@@ -91,6 +91,9 @@ public class VPopupView extends HTML implements Iterable<Widget> {
         addClickHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {
+                preparePopup(popup);
+                showPopup(popup);
+                center();
                 fireEvent(new VisibilityChangeEvent(true));
             }
         });
@@ -111,7 +114,8 @@ public class VPopupView extends HTML implements Iterable<Widget> {
 
     /** For internal use only. May be removed or replaced in the future. */
     public void preparePopup(final CustomPopup popup) {
-        popup.setVisible(false);
+        popup.setVisible(true);
+        popup.setWidget(loading);
         popup.show();
     }
 
@@ -128,8 +132,6 @@ public class VPopupView extends HTML implements Iterable<Widget> {
      */
     public void showPopup(final CustomPopup popup) {
         popup.setPopupPosition(0, 0);
-
-        popup.setVisible(true);
     }
 
     /** For internal use only. May be removed or replaced in the future. */
@@ -270,9 +272,7 @@ public class VPopupView extends HTML implements Iterable<Widget> {
         public void hide(boolean autoClosed) {
             VConsole.log("Hiding popupview");
             syncChildren();
-            if (popupComponentWidget != null && popupComponentWidget != loading) {
-                remove(popupComponentWidget);
-            }
+            clearPopupComponentConnector();
             hasHadMouseOver = false;
             shortcutActionHandler = null;
             super.hide(autoClosed);
@@ -333,15 +333,18 @@ public class VPopupView extends HTML implements Iterable<Widget> {
             }
         }
 
-        @Override
-        public boolean remove(Widget w) {
+        private void clearPopupComponentConnector() {
             if (popupComponentConnector != null) {
                 popupComponentConnector.removeStateChangeHandler(this);
             }
             popupComponentConnector = null;
             popupComponentWidget = null;
             captionWrapper = null;
+        }
 
+        @Override
+        public boolean remove(Widget w) {
+            clearPopupComponentConnector();
             return super.remove(w);
         }
 
diff --git a/client/src/com/vaadin/client/ui/VWindow.java b/client/src/com/vaadin/client/ui/VWindow.java
index 9b1f7a6f3c..7c1a21f654 100644
--- a/client/src/com/vaadin/client/ui/VWindow.java
+++ b/client/src/com/vaadin/client/ui/VWindow.java
@@ -303,7 +303,10 @@ public class VWindow extends VWindowOverlay implements
     }
 
     private static VWindow getTopmostWindow() {
-        return windowOrder.get(windowOrder.size() - 1);
+        if (windowOrder.size() > 0) {
+            return windowOrder.get(windowOrder.size() - 1);
+        }
+        return null;
     }
 
     /** For internal use only. May be removed or replaced in the future. */
@@ -1030,6 +1033,7 @@ public class VWindow extends VWindowOverlay implements
     }
 
     private void onCloseClick() {
+        // Send the close event to the server
         client.updateVariable(id, "close", true, true);
     }
 
@@ -1263,7 +1267,7 @@ public class VWindow extends VWindowOverlay implements
         // are not cancelled here and target this window to be consume():d
         // meaning the event won't be sent to the rest of the preview handlers.
 
-        if (getTopmostWindow().vaadinModality) {
+        if (getTopmostWindow() != null && getTopmostWindow().vaadinModality) {
             // Topmost window is modal. Cancel the event if it targets something
             // outside that window (except debug console...)
             if (DOM.getCaptureElement() != null) {
diff --git a/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java b/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java
index bde5f6a051..6afceb75de 100644
--- a/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java
+++ b/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java
@@ -26,6 +26,7 @@ import com.vaadin.client.VCaptionWrapper;
 import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.AbstractHasComponentsConnector;
 import com.vaadin.client.ui.PostLayoutListener;
+import com.vaadin.client.ui.VOverlay;
 import com.vaadin.client.ui.VPopupView;
 import com.vaadin.shared.ui.ComponentStateUtil;
 import com.vaadin.shared.ui.Connect;
@@ -100,27 +101,37 @@ public class PopupViewConnector extends AbstractHasComponentsConnector
         if (!getChildComponents().isEmpty()) {
             getWidget().preparePopup(getWidget().popup);
             getWidget().popup.setPopupConnector(getChildComponents().get(0));
-            if (ComponentStateUtil.hasStyles(getState())) {
-                final StringBuffer styleBuf = new StringBuffer();
-                final String primaryName = getWidget().popup
-                        .getStylePrimaryName();
+
+            final StringBuffer styleBuf = new StringBuffer();
+            final String primaryName = getWidget().popup.getStylePrimaryName();
+            styleBuf.append(primaryName);
+
+            // Add "animate-in" class back if already present
+            boolean isAnimatingIn = getWidget().popup.getStyleName().contains(
+                    VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN);
+
+            if (isAnimatingIn) {
+                styleBuf.append(" ");
                 styleBuf.append(primaryName);
+                styleBuf.append("-");
+                styleBuf.append(VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN);
+            }
+
+            if (ComponentStateUtil.hasStyles(getState())) {
                 for (String style : getState().styles) {
                     styleBuf.append(" ");
                     styleBuf.append(primaryName);
                     styleBuf.append("-");
                     styleBuf.append(style);
                 }
-                getWidget().popup.setStyleName(styleBuf.toString());
-            } else {
-                getWidget().popup.setStyleName(getWidget().popup
-                        .getStylePrimaryName());
             }
+
+            getWidget().popup.setStyleName(styleBuf.toString());
             getWidget().showPopup(getWidget().popup);
             centerAfterLayout = true;
 
-            // The popup shouldn't be visible, try to hide it.
         } else {
+            // The popup shouldn't be visible, try to hide it.
             getWidget().popup.hide();
         }
     }
diff --git a/client/src/com/vaadin/client/ui/window/WindowConnector.java b/client/src/com/vaadin/client/ui/window/WindowConnector.java
index 5c8f5e2d2d..2a2f031144 100644
--- a/client/src/com/vaadin/client/ui/window/WindowConnector.java
+++ b/client/src/com/vaadin/client/ui/window/WindowConnector.java
@@ -19,6 +19,7 @@ import java.util.logging.Logger;
 
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.dom.client.Node;
 import com.google.gwt.dom.client.Style;
 import com.google.gwt.dom.client.Style.Position;
 import com.google.gwt.dom.client.Style.Unit;
@@ -58,6 +59,8 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector
         SimpleManagedLayout, PostLayoutListener, MayScrollChildren,
         WindowMoveHandler {
 
+    private Node windowClone;
+
     private ClickEventHandler clickEventHandler = new ClickEventHandler(this) {
         @Override
         protected void fireClick(NativeEvent event,
@@ -192,6 +195,17 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector
     public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) {
         // We always have 1 child, unless the child is hidden
         getWidget().contentPanel.setWidget(getContentWidget());
+
+        if (getParent() == null && windowClone != null) {
+            // If the window is removed from the UI, add the copy of the
+            // contents to the window (in case of an 'out-animation')
+            getWidget().getElement().removeAllChildren();
+            getWidget().getElement().appendChild(windowClone);
+
+            // Clean reference
+            windowClone = null;
+        }
+
     }
 
     @Override
@@ -268,6 +282,16 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector
             window.center();
         }
         window.positionOrSizeUpdated();
+
+        if (getParent() != null) {
+            // Take a copy of the contents, since the server will detach all
+            // children of this window when it's closed, and the window will be
+            // emptied during the following hierarchy update (we need to keep
+            // the contents visible for the duration of a possible
+            // 'out-animation')
+            windowClone = getWidget().getElement().getFirstChild()
+                    .cloneNode(true);
+        }
     }
 
     @Override