Corrected styling for whiteboard controls and an upload container

bigbluebutton-html5/app/client/stylesheets/whiteboard.less

@@ -4,10 +4,6 @@
   padding: 0 !important;
   min-width: 0;
 
-  #whiteboard-container{
-    min-height: 60px;
-  }
-
   @media @landscape {
     border-top: 0px;
     border-left: 0px;
@@ -71,6 +67,8 @@
 
 #whiteboard-container {
   position: relative; // makes the fullscreen button's absolute position work
+  min-height: 60px;  //For the case when the slide is not loaded and a raise hand button overlaps the hamburger button in portrait views
+  border-bottom: 1px solid #d7d7d7;
   @media @landscape {
     display: -moz-flex;
     display: -ms-flexbox;
@@ -80,36 +78,17 @@
     align-items: center;
     -webkit-align-items: center;
     -ms-align-items: center;
-    //border-bottom: 1px solid extract(@lightGrey, 3);
   }
 }
 
 #whiteboard-controls {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 4em 5px 5px;
-
-  /*
-  opacity: 0;
-  -webkit-transition: opacity .3s;
-  transition: opacity .3s;
-
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-  */
+  width: 100%;
+  height: 70px;
 
   button, .btn {
-    outline: none;
-    display: inline-block;
+    outline: none;   // overwriting default Foundation's outline
     margin: 0;
     padding: 0;
-    border: none;
-    background: none;
-    color: #fff;
     height: 50px;
     width: 50px;
     border-radius: 50%;
@@ -127,48 +106,42 @@
 }
 
 .whiteboard-buttons {
-  &-left,
-  &-center,
-  &-right {
-
-  }
-
   &-left {
     float: left;
-  }
-
-  &-center {
-    pointer-events: none;
-    position: absolute;
-    width: 100%;
-    text-align: center;
-    bottom: 5px;
+    width: 20%;
   }
 
   &-right {
     float: right;
+    width: 20%;
+  }
+
+  &-center {
+    margin: 0 auto;
+    text-align: center;
+    width: 60%;
   }
 
   &-slide {
-    pointer-events: auto;
-    color: #fff;
+    margin-top: 10px;
+    margin-bottom: 10px;
     background-color: #3896D3;
     border-color: #007095;
     display: inline-block;
     border-radius: 50px;
 
-    > button, .button {
-      background-color: transparent;
-    }
-
     .current {
-      color: #fff;
+      color: extract(@white, 1);
       font-weight: bold;
       vertical-align: super;
     }
   }
 }
 
+/******************************/
+/*     Upload Menu Styling    */
+/******************************/
+
 .presenter-uploader {
   @presenteUploaderBg: #eee;
   @presenteUploaderColor: rgba(0, 0, 0, .5);
@@ -179,19 +152,15 @@
     max-width: 20vw;
     min-width: 300px;
     position: relative;
-    z-index: 100;
-
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
     &-btn {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-
       .presenter-uploader-container & {
-        z-index: 1;
+        float: left;
         background-color: @presenteUploaderBg !important;
         border-color: transparent !important;
         color: @presenteUploaderColor !important;
-
         &:focus,
         &:hover {
           color: @presenteUploaderColorHover;
@@ -202,10 +171,10 @@
 
   &-container {
     overflow: hidden;
-    z-index: 1000;
+    color: @presenteUploaderColor;
     background-color: @presenteUploaderBg;
     padding: 10px 10px;
-    border-radius: 10px 10px 10px 25px;
+    border-radius: 10px 10px 10px 10px;
     display: none;
     transition: all .3s;
     position: absolute;
@@ -213,24 +182,22 @@
 
     .is-open & {
       display: block;
+      z-index: 1;
       box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
     }
   }
 
   &-tip {
     padding: 10px 10px 10px 60px;
-    text-transform: uppercase;
     font-size: 9px;
     font-weight: bold;
     margin: -10px;
     text-align: right;
     min-height: 50px;
-    color: @presenteUploaderColor;
   }
 
   &-dropzone {
     margin-bottom: 10px;
-    color: @presenteUploaderColor;
     opacity: .4;
     transition: opacity 3s;
     text-align: center;
@@ -420,11 +387,13 @@
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }
 }
+/******************************/
+/* End of Upload Menu Styling */
+/******************************/
+
 
 .presenter-whiteboard {
-  height: calc(~'100% - 2px');
-  //-2px is for something who is going of the canvas an generating scroll
-  padding-bottom: 60px;
+  height: calc(~'100% - 70px');
 }
 
 .poll-whiteboard {
@@ -642,8 +611,6 @@
   background-color: #34495E;
 }
 
-
-
 .FABContainer {
   &.noPresentation{
     right: 60px;