fix(toolbar): Issue with toolbar is positioned under the ring overlay

css/_base.scss

@@ -169,6 +169,7 @@ form {
 }
 
 .tipsy {
+    z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
     }
@@ -176,4 +177,4 @@ form {
     &-arrow {
         border-color: $tooltipBg;
     }
-}
+}

css/_variables.scss

@@ -60,6 +60,7 @@ $defaultWatermarkLink: '../images/watermark.png';
 /**
  * Z-indexes. TODO: Replace this by a function.
  */
+$tooltipsZ: 901;
 $toolbarZ: 900;
 $overlayZ: 800;
 
@@ -72,4 +73,4 @@ $defaultDarkFontColor: #000;
 $buttonFontColor: #777;
 $buttonHoverFontColor: #287ade;
 $linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
+$linkHoverFontColor: #287ade;

css/_videolayout_default.scss

@@ -1,8 +1,3 @@
-.video-wrapper {
-    position: relative;
-    z-index: 1;
-}
-
 #videospace {
     display: block;
     position: absolute;

index.html

@@ -95,7 +95,7 @@
         </div>
         <!--#include virtual="plugin.welcomepage.footer.html" -->
     </div>
-    <div id="videoconference_page" class="video-wrapper">
+    <div id="videoconference_page">
         <div id="mainToolbarContainer">
                 <div id="notice" class="notice" style="display: none">
                     <span id="noticeText" class="noticeText"></span>