From c9bc20d3dc01a350eabf7dc4799321a7dd3bb0df Mon Sep 17 00:00:00 2001
From: Evan Theurer <theurer@struktur.de>
Date: Thu, 5 Mar 2015 17:39:28 +0100
Subject: [PATCH] Fix scss-lint error MergeableSelector.

---
 src/styles/components/_audiovideo.scss        | 263 +++----
 src/styles/components/_buddylist.scss         | 130 ++--
 .../components/_buddypicturecapture.scss      |   6 +-
 .../components/_buddypictureupload.scss       |  15 +-
 src/styles/components/_chat.scss              | 716 +++++++++---------
 src/styles/components/_fileinfo.scss          | 105 +--
 src/styles/components/_presentation.scss      | 301 ++++----
 src/styles/components/_rightslide.scss        |  12 +-
 src/styles/components/_roombar.scss           |  13 +-
 src/styles/components/_screenshare.scss       |  21 +-
 src/styles/components/_settings.scss          |  37 +-
 src/styles/components/_usability.scss         |  22 +-
 src/styles/components/_youtubevideo.scss      | 185 ++---
 src/styles/global/_overlaybar.scss            |  44 +-
 14 files changed, 919 insertions(+), 951 deletions(-)

diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss
index 1eaea45d..d2ea565f 100644
--- a/src/styles/components/_audiovideo.scss
+++ b/src/styles/components/_audiovideo.scss
@@ -26,9 +26,7 @@
   right: 0;
   top: $minbarheight;
   user-select: none;
-}
 
-#audiovideo {
   @include breakpt($breakpoint-video-small, max-width, only screen) {
     right: 0;
   }
@@ -109,9 +107,7 @@
   video {
     object-fit: cover;
   }
-}
 
-.audiovideo {
   .remoteContainer {
     bottom: 0;
     left: 0;
@@ -159,132 +155,131 @@
     transition-property: opacity;
     width: 100%;
   }
-}
-
-.audiovideo .remoteVideos {
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition-duration: 2s;
-  transition-property: opacity;
-
-  video {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.audiovideo .remoteVideo {
-  background: $video-background;
-  display: inline-block;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  position: relative;
-  vertical-align: bottom;
-  //visibility: hidden;
-  width: 100%;
 
-  &.withvideo {
-    //visibility: visible;
-  }
+  .remoteVideos {
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition-duration: 2s;
+    transition-property: opacity;
 
-  &.onlyaudio {
-    background: $video-onlyaudio-background;
-    //visibility: visible;
+    video {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
   }
 
-  .onlyaudio {
-    color: $video-onlyaudio;
-    display: none;
-    font-size: 80px;
+  .overlayActions {
+    background: $video-overlayactions;
+    bottom: 0;
+    height: 140px;
     left: 0;
-    margin-top: -40px;
-    pointer-events: auto;
+    margin: auto 0;
+    opacity: 0;
+    padding: 3px 0;
     position: absolute;
-    right: 0;
-    text-align: center;
-    top: 45%;
-  }
+    top: 0;
+    width: 40px;
+    z-index: 5;
 
-  &.onlyaudio video,
-  &.dummy video {
-    visibility: hidden;
+    .btn {
+      color: #ccc;
+      cursor: pointer;
+      display: block;
+      outline: 0;
+      text-shadow: 0 0 5px #000;
+      width: 40px;
+    }
   }
 
-  &.onlyaudio .onlyaudio {
-    display: block;
-  }
+  .remoteVideo {
+    background: $video-background;
+    display: inline-block;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    position: relative;
+    vertical-align: bottom;
+    //visibility: hidden;
+    width: 100%;
 
-  &.dummy .onlyaudio {
-    display: block;
-  }
+    &.withvideo {
+      //visibility: visible;
+    }
 
-  .peerActions {
-    // scss-lint:disable SelectorDepth
-    bottom: 5%;
-    left: 40px;
-    opacity: 0;
-    pointer-events: auto;
-    position: absolute;
-    right: 40px;
-    text-align: center;
-    transition-duration: .2s;
-    transition-property: opacity;
-    z-index: 10;
+    &.onlyaudio {
+      background: $video-onlyaudio-background;
+      //visibility: visible;
+
+      .onlyaudio {
+        display: block;
+      }
+    }
 
-    &:hover {
-      opacity: .5;
+    .onlyaudio {
+      color: $video-onlyaudio;
+      display: none;
+      font-size: 80px;
+      left: 0;
+      margin-top: -40px;
+      pointer-events: auto;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 45%;
     }
 
-    i {
-      font-size: 3vw;
+    &.onlyaudio video,
+    &.dummy video {
+      visibility: hidden;
     }
-  }
 
-  .peerLabel {
-    bottom: 4%;
-    color: #fff;
-    font-size: 2.5vw;
-    left: 4%;
-    max-width: 30%;
-    opacity: .7;
-    overflow: hidden;
-    padding: 4px;
-    position: absolute;
-    text-overflow: ellipsis;
-    text-shadow: 0 0 4px #000;
-    white-space: nowrap;
-    z-index: 8;
-  }
-}
+    &.dummy .onlyaudio {
+      display: block;
+    }
 
-.audiovideo .overlayActions {
-  background: $video-overlayactions;
-  bottom: 0;
-  height: 140px;
-  left: 0;
-  margin: auto 0;
-  opacity: 0;
-  padding: 3px 0;
-  position: absolute;
-  top: 0;
-  width: 40px;
-  z-index: 5;
+    .peerActions {
+      // scss:lint:disable NestingDepth, SelectorDepth
+      bottom: 5%;
+      left: 40px;
+      opacity: 0;
+      pointer-events: auto;
+      position: absolute;
+      right: 40px;
+      text-align: center;
+      transition-duration: .2s;
+      transition-property: opacity;
+      z-index: 10;
+
+      &:hover {
+        opacity: .5;
+      }
+
+      i {
+        font-size: 3vw;
+      }
+    }
 
-  .btn {
-    color: #ccc;
-    cursor: pointer;
-    display: block;
-    outline: 0;
-    text-shadow: 0 0 5px #000;
-    width: 40px;
+    .peerLabel {
+      bottom: 4%;
+      color: #fff;
+      font-size: 2.5vw;
+      left: 4%;
+      max-width: 30%;
+      opacity: .7;
+      overflow: hidden;
+      padding: 4px;
+      position: absolute;
+      text-overflow: ellipsis;
+      text-shadow: 0 0 4px #000;
+      white-space: nowrap;
+      z-index: 8;
+    }
   }
-
 }
 
 .remoteVideo {
@@ -327,28 +322,6 @@
   }
 }
 
-.renderer-auditorium {
-  position: relative;
-
-  span:before {
-    content: '\f183';
-    left: 50%;
-    margin-left: -.8em;
-    margin-top: -.5em;
-    position: absolute;
-    top: 50%;
-  }
-
-  span:after {
-    content: '\f183';
-    margin-right: -.9em;
-    margin-top: -.5em;
-    position: absolute;
-    right: 50%;
-    top: 50%;
-  }
-}
-
 .renderer-smally {
   // scss-lint:disable SelectorDepth
   background: #000;
@@ -457,6 +430,26 @@
 }
 
 .renderer-auditorium {
+  position: relative;
+
+  span:before {
+    content: '\f183';
+    left: 50%;
+    margin-left: -.8em;
+    margin-top: -.5em;
+    position: absolute;
+    top: 50%;
+  }
+
+  span:after {
+    content: '\f183';
+    margin-right: -.9em;
+    margin-top: -.5em;
+    position: absolute;
+    right: 50%;
+    top: 50%;
+  }
+
   .remoteContainer {
     border-left: 40px solid #000;
   }
@@ -467,10 +460,6 @@
     top: 180px;
     width: 320px;
 
-    .overlayLogo {
-      display: none;
-    }
-
     video {
       height: 100%;
       margin-top: -9px;
diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss
index 5cc99341..6560a5af 100644
--- a/src/styles/components/_buddylist.scss
+++ b/src/styles/components/_buddylist.scss
@@ -76,9 +76,7 @@
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.buddylist {
   &.loading {
     .buddylistloading {
       display: block;
@@ -139,13 +137,11 @@
   position: relative;
   text-align: left;
   width: 100%;
-}
 
-.buddy:hover {
-  background: $buddylist-action-background;
-}
+  &:hover {
+    background: $buddylist-action-background;
+  }
 
-.buddy {
   &.withSubline .buddy1,
   &.contact .buddy1 {
     top: 15px;
@@ -156,8 +152,15 @@
     display: block;
   }
 
-  &.hovered .buddyactions {
-    right: 0;
+  &.hovered {
+
+    .buddyactions {
+      right: 0;
+    }
+
+    .buddysessions {
+      max-height: 999px;
+    }
   }
 
   .fa.contact:before {
@@ -249,68 +252,65 @@
     white-space: nowrap;
     width: 120px;
   }
-}
 
-.buddy .buddyactions {
-  background: $buddylist-action-background;
-  height: 66px;
-  line-height: 66px;
-  padding: 0 10px;
-  position: absolute;
-  right: -125px;
-  text-align: right;
-  top: 0;
-  transition-duration: .3s;
-  transition-property: right;
-  white-space: nowrap;
-  z-index: 5;
-
-  .btn {
-    font-size: $buddylist-action-font-size;
-    height: 40px;
-    line-height: 40px;
-    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    width: 42px;
+  .buddyactions {
+    background: $buddylist-action-background;
+    height: 66px;
+    line-height: 66px;
+    padding: 0 10px;
+    position: absolute;
+    right: -125px;
+    text-align: right;
+    top: 0;
+    transition-duration: .3s;
+    transition-property: right;
+    white-space: nowrap;
+    z-index: 5;
+
+    .btn {
+      font-size: $buddylist-action-font-size;
+      height: 40px;
+      line-height: 40px;
+      padding: 0;
+      text-align: center;
+      vertical-align: middle;
+      width: 42px;
+    }
   }
-}
 
-.buddysessions {
-  margin-bottom: 10px;
-  margin-top: 56px;
-  max-height: 0;
-  transition-delay: .1s;
-  transition-duration: .5s;
-  transition-property: max-height;
-
-  ul {
-    border-left: 1px dotted $bordercolor;
-    border-right: 1px dotted $bordercolor;
-    margin: 0 14px;
-    padding-left: 0;
-    padding-top: 10px;
-  }
+  .buddysessions {
+    margin-bottom: 10px;
+    margin-top: 56px;
+    max-height: 0;
+    transition-delay: .1s;
+    transition-duration: .5s;
+    transition-property: max-height;
+
+    ul {
+      border-left: 1px dotted $bordercolor;
+      border-right: 1px dotted $bordercolor;
+      margin: 0 14px;
+      padding-left: 0;
+      padding-top: 10px;
+    }
 
-  li {
-    list-style-type: none;
-    margin-bottom: 2px;
-    margin-left: 0;
+    ul li {
+      // scss-lint:disable NestingDepth
+      list-style-type: none;
+      margin-bottom: 2px;
+      margin-left: 0;
 
-    &:hover .btn-group {
-      visibility: visible;
-    }
-  }
+      .btn-group {
+        visibility: hidden;
+      }
 
-  .btn-group {
-    visibility: hidden;
-  }
+      &:hover .btn-group {
+        visibility: visible;
+      }
+    }
 
-  .currentsession .buddy3 {
-    font-weight: bold;
+    .currentsession .buddy3 {
+      font-weight: bold;
+    }
   }
 }
-
-.buddy.hovered .buddysessions {
-  max-height: 999px;
-}
diff --git a/src/styles/components/_buddypicturecapture.scss b/src/styles/components/_buddypicturecapture.scss
index 225e9cc1..02104c2b 100644
--- a/src/styles/components/_buddypicturecapture.scss
+++ b/src/styles/components/_buddypicturecapture.scss
@@ -61,10 +61,10 @@
     top: 0;
     visibility: hidden;
     z-index: 5;
-  }
 
-  .videoFlash.flash {
-    visibility: visible;
+    &.flash {
+      visibility: visible;
+    }
   }
 
   .preview {
diff --git a/src/styles/components/_buddypictureupload.scss b/src/styles/components/_buddypictureupload.scss
index 4f9edace..dfe2ef16 100644
--- a/src/styles/components/_buddypictureupload.scss
+++ b/src/styles/components/_buddypictureupload.scss
@@ -39,6 +39,7 @@
   }
 
   .showUploadPicture {
+    // scss-lint:disable NestingDepth
     background-color: $componentbg;
     border: 1px solid $bordercolor;
     height: 200px;
@@ -52,10 +53,14 @@
 
     &.imgData {
       background-color: #000;
-    }
 
-    &.imgData .chooseUploadPicture {
-      display: none;
+      .chooseUploadPicture {
+        display: none;
+      }
+
+      &:hover .imageUtilites {
+        visibility: visible;
+      }
     }
 
     .chooseUploadPicture {
@@ -95,10 +100,6 @@
     }
   }
 
-  .showUploadPicture.imgData:hover .imageUtilites {
-    visibility: visible;
-  }
-
   .moveHorizontal {
     position: relative;
     top: -4px;
diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss
index 96da661c..1b979bff 100644
--- a/src/styles/components/_chat.scss
+++ b/src/styles/components/_chat.scss
@@ -135,6 +135,7 @@
 }
 
 .chat {
+  // scss-lint:disable NestingDepth
   background: $chat-background;
   bottom: 0;
   display: none;
@@ -143,450 +144,448 @@
   position: absolute;
   right: 0;
   top: 0;
-}
-
-.chat {
-  &.active {
-    &.visible {
-      display: block;
-    }
 
-    .chatbody {
-      // nothing
+  &.newmessage {
+    .chatheadertitle:after {
+      content: '***';
+      position: absolute;
+      right: 32px;
+      top: 2px;
     }
 
     .chatheader {
-      // nothing
+      animation: newmessage 1s ease -.3s infinite;
     }
   }
-}
 
-.chatmenu {
-  height: 36px;
-  left: 0;
-  padding: 2px 4px;
-  position: absolute;
-  right: 0;
-  top: 36px;
-
-  @include breakpt($breakpoint-chat-small, max-height) {
-    display: none;
+  &.active.visible {
+    display: block;
   }
-}
-
-.chatbody {
-  border-left: 1px solid $bordercolor;
-  bottom: -1px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 74px;
 
-  @include breakpt($breakpoint-chat-small, max-height) {
-    border-top: 1px solid $bordercolor;
-    top: 0;
-    top: 0;
-  }
-}
+  &.with_pictures .message {
+    &.is_self {
+      padding-right: 54px;
 
-.chatheader {
-  background: $chat-header;
-  border-bottom: 1px solid $bordercolor;
-  border-left: 1px solid $bordercolor;
-  height: 36px;
-  left: 0;
-  line-height: 34px;
-  padding: 0 4px 0 8px;
-  position: absolute;
-  right: 0;
-  top: 0;
+      .timestamp {
+        right: 58px;
+      }
+    }
 
-  @include breakpt($breakpoint-chat-small, max-height) {
-    display: none;
+    &.is_remote {
+      padding-left: 58px;
+    }
   }
 
-  .chatstatusicon {
-    cursor: pointer;
-    display: block;
-    font-size: 1.4em;
-    height: 36px;
+  .chatbodybottom {
+    background: $chat-bottom-background;
+    bottom: 1px;
     left: 0;
+    margin: 0 auto;
     position: absolute;
-    text-align: center;
-    top: 0;
-    width: 36px;
-  }
-
-  .chatheadertitle {
-    display: inline;
-    padding-left: 28px;
-  }
-
-  .ctrl {
-    color: $chat-ctrl;
-    position: absolute;
-    right: 1px;
-    top: 0;
+    right: 0;
 
-    .#{$fa-css-prefix} {
-      cursor: pointer;
-      padding: 6px;
+    @include breakpt($breakpoint-chat-small, max-height) {
+      height: auto;
     }
   }
 
-  span {
-    display: inline-block;
-    max-width: 60%;
+  .typinghint {
+    color: $chat-typing;
+    font-size: .8em;
+    height: 14px;
     overflow: hidden;
-    pointer-events: none;
-    text-overflow: ellipsis;
-    vertical-align: middle;
+    padding: 0 6px;
     white-space: nowrap;
-  }
-}
-
-.chat .outputbox {
-  bottom: 75px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
 
-  @include breakpt($breakpoint-chat-small, max-height) {
-    bottom: 45px;
+    @include breakpt($breakpoint-chat-small, max-height) {
+      display: none;
+    }
   }
-}
 
-.chat .output {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: .4em 0;
-
-  > i {
-    clear: both;
-    color: $chat-meta;
-    display: block;
-    font-size: .8em;
-    padding: 6px 0;
-    text-align: center;
+  .inputbox {
+    position: relative;
 
-    &.p2p {
-      font-weight: bold;
-      padding: 6px 0;
+    @include breakpt($breakpoint-chat-small, max-height) {
+      height: auto;
     }
-  }
-}
-
-.chat.with_pictures .message {
-  &.is_self {
-    padding-right: 54px;
 
-    .timestamp {
-      right: 58px;
+    .btn {
+      display: none;
+      padding: .5em 1em;
+      position: absolute;
+      right: 6px;
+      top: 1px;
     }
-  }
 
-  &.is_remote {
-    padding-left: 58px;
+    > div {
+      border-top: 1px solid $bordercolor;
+    }
   }
-}
 
-.chat .message {
-  background: $chat-msg-background;
-  border: 1px solid $chat-msg-border;
-  border-radius: 6px;
-  box-shadow: 0 0 2px 0 $chat-msg-shadow;
-  clear: both;
-  display: block;
-  margin: 0 4px 2px 18px;
-  padding: 8px;
-  position: relative;
-  word-wrap: break-word;
-
-  ul {
-    list-style-type: none;
+  .input {
+    border-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    display: block;
+    height: 54px;
     margin: 0;
-    padding-left: 0;
-  }
+    max-height: 54px; /* FF hack */
+    resize: none;
+    width: 100%;
 
-  li {
-    line-height: 1.1em;
-    margin: 4px 0;
-    padding-left: 1.2em;
-    position: relative;
+    @include breakpt($breakpoint-chat-small, max-height) {
+      max-height: 2.5em;
+    }
 
-    &:before {
-      color: $chat-msg-default-icon-color;
-      content: '\f075';
-      font-family: FontAwesome;
-      left: 0;
-      position: absolute;
-      text-align: center;
-      width: 12px;
+    &:active,
+    &:focus {
+      border-color: $chat-input-border-color;
     }
   }
 
-  .timestamp {
-    color: $chat-timestamp;
-    font-size: .8em;
+  .outputbox {
+    bottom: 75px;
+    left: 0;
     position: absolute;
-    right: 8px;
-    text-align: right;
-    top: 8px;
-  }
+    right: 0;
+    top: 0;
 
-  .timestamp-space {
-    float: right;
-    height: 10px;
-    width: 40px;
+    @include breakpt($breakpoint-chat-small, max-height) {
+      bottom: 45px;
+    }
   }
 
-  strong {
-    display: block;
-    margin-right: 40px;
-    overflow: hidden;
-    padding-bottom: 2px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
+  .output {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: .4em 0;
 
-.chat .message {
-  &.is_self li:before {
-    color: $chat-msg-default-icon-color;
-    transform: scale(-1, 1);
-  }
+    > i {
+      clear: both;
+      color: $chat-meta;
+      display: block;
+      font-size: .8em;
+      padding: 6px 0;
+      text-align: center;
 
-  li {
-    &.unread:before {
-      color: $chat-msg-unread-icon-color;
-      content: $chat-msg-unread-icon;
+      &.p2p {
+        font-weight: bold;
+        padding: 6px 0;
+      }
     }
+  }
+
+  .message {
+    // scss-lint:disable DuplicateProperty
+    background: $chat-msg-background;
+    border: 1px solid $chat-msg-border;
+    border-radius: 6px;
+    box-shadow: 0 0 2px 0 $chat-msg-shadow;
+    clear: both;
+    display: block;
+    margin: 0 4px 2px 18px;
+    padding: 8px;
+    position: relative;
+    word-wrap: break-word;
 
-    &.sending:before {
-      color: $chat-msg-sending-icon-color;
-      content: $chat-msg-sending-icon;
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding-left: 0;
     }
 
-    &.sent:before {
-      color: $chat-msg-sent-icon-color;
-      content: $chat-msg-sent-icon;
+    .timestamp {
+      color: $chat-timestamp;
+      font-size: .8em;
+      position: absolute;
+      right: 8px;
+      text-align: right;
+      top: 8px;
     }
 
-    &.delivered:before {
-      color: $chat-msg-delivered-icon-color;
-      content: $chat-msg-delivered-icon;
+    .timestamp-space {
+      float: right;
+      height: 10px;
+      width: 40px;
     }
 
-    &.received:before {
-      color: $chat-msg-received-icon-color;
-      content: $chat-msg-received-icon;
+    strong {
+      display: block;
+      margin-right: 40px;
+      overflow: hidden;
+      padding-bottom: 2px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    &.read:before {
-      color: $chat-msg-read-icon-color;
-      content: $chat-msg-read-icon;
+    li {
+      line-height: 1.1em;
+      margin: 4px 0;
+      padding-left: 1.2em;
+      position: relative;
+
+      &:before {
+        color: $chat-msg-default-icon-color;
+        content: '\f075';
+        font-family: FontAwesome;
+        left: 0;
+        position: absolute;
+        text-align: center;
+        width: 12px;
+      }
+
+      &.unread:before {
+        color: $chat-msg-unread-icon-color;
+        content: $chat-msg-unread-icon;
+      }
+
+      &.sending:before {
+        color: $chat-msg-sending-icon-color;
+        content: $chat-msg-sending-icon;
+      }
+
+      &.sent:before {
+        color: $chat-msg-sent-icon-color;
+        content: $chat-msg-sent-icon;
+      }
+
+      &.delivered:before {
+        color: $chat-msg-delivered-icon-color;
+        content: $chat-msg-delivered-icon;
+      }
+
+      &.received:before {
+        color: $chat-msg-received-icon-color;
+        content: $chat-msg-received-icon;
+      }
+
+      &.read:before {
+        color: $chat-msg-read-icon-color;
+        content: $chat-msg-read-icon;
+      }
     }
-  }
-}
 
-.chat .message {
-  &.is_self .buddyPicture {
-    left: auto;
-    right: 4px;
-  }
+    .buddyPicture {
+      background: $actioncolor1;
+      border-radius: 2px;
+      height: 46px;
+      left: 4px;
+      overflow: hidden;
+      position: absolute;
+      text-align: center;
+      top: 4px;
+      width: 46px;
+      z-index: 0;
 
-  .buddyPicture {
-    background: $actioncolor1;
-    border-radius: 2px;
-    height: 46px;
-    left: 4px;
-    overflow: hidden;
-    position: absolute;
-    text-align: center;
-    top: 4px;
-    width: 46px;
-    z-index: 0;
+      .#{$fa-css-prefix} {
+        color: $actioncolor2;
+        line-height: 46px;
+      }
 
-    .#{$fa-css-prefix} {
-      color: $actioncolor2;
-      line-height: 46px;
+      img {
+        bottom: 0;
+        display: block;
+        left: 0;
+        max-height: 100%;
+        max-width: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
 
-    img {
-      bottom: 0;
+    &:before,
+    &:after {
+      border-style: solid;
+      content: '';
       display: block;
-      left: 0;
-      max-height: 100%;
-      max-width: 100%;
       position: absolute;
-      right: 0;
-      top: 0;
+      width: 0;
     }
-  }
-}
 
-.chat .message {
-  // scss-lint:disable DuplicateProperty
-  &:before,
-  &:after {
-    border-style: solid;
-    content: '';
-    display: block;
-    position: absolute;
-    width: 0;
-  }
+    &.is_remote {
+      background: $chat-msg-remote-background;
 
-  &.is_remote {
-    background: $chat-msg-remote-background;
+      &:before {  // arrow border
+        border-color: transparent $chat-arrow-border;
+        border-width: 7px 11px 7px 0;
+        bottom: auto;
+        left: -12px;
+        top: 4px;
+      }
 
-    &:before {  // arrow border
-      border-color: transparent $chat-arrow-border;
-      border-width: 7px 11px 7px 0;
-      bottom: auto;
-      left: -12px;
-      top: 4px;
+      &:after { // arrow background
+        border-color: transparent $chat-msg-remote-background;
+        border-width: 6px 10px 6px 0;
+        bottom: auto;
+        left: -11px;
+        top: 5px;
+      }
     }
 
-    &:after { // arrow background
-      border-color: transparent $chat-msg-remote-background;
-      border-width: 6px 10px 6px 0;
-      bottom: auto;
-      left: -11px;
-      top: 5px;
-    }
-  }
+    &.is_self {
+      background: $chat-msg-self-background;
+      margin-left: 4px;
+      margin-right: 18px;
+      padding-right: 0;
 
-  &.is_self {
-    background: $chat-msg-self-background;
-    margin-left: 4px;
-    margin-right: 18px;
-    padding-right: 0;
-
-    &:before { // arrow border
-      border-color: transparent $chat-arrow-border;
-      border-width: 7px 0 7px 11px;
-      bottom: 4px;
-      bottom: auto;
-      right: -12px;
-    }
+      &:before { // arrow border
+        border-color: transparent $chat-arrow-border;
+        border-width: 7px 0 7px 11px;
+        bottom: 4px;
+        bottom: auto;
+        right: -12px;
+      }
 
-    &:after { // arrow background
-      border-color: transparent $chat-msg-self-background;
-      border-width: 6px 0 6px 10px;
-      bottom: 5px;
-      bottom: auto;
-      right: -11px;
-    }
-  }
+      &:after { // arrow background
+        border-color: transparent $chat-msg-self-background;
+        border-width: 6px 0 6px 10px;
+        bottom: 5px;
+        bottom: auto;
+        right: -11px;
+      }
 
-  &.with_name {
-    // none
-  }
-  &.with_hoverimage {
-    .buddyPicture {
-      overflow: visible;
-      z-index: initial;
-      &:hover .buddyInfoActions {
-        height: 40px;
-        opacity: 1;
+      li:before {
+        color: $chat-msg-default-icon-color;
+        transform: scale(-1, 1);
       }
-    }
-    .buddyInfoActions {
-      cursor: default;
-      display: inline-block;
-      height: 0;
-      left: 0;
-      opacity: 0;
-      overflow: hidden;
-      position: absolute;
-      top: 48px;
-      transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
-      white-space: nowrap;
-      z-index: 1;
-      .btn-group {
-        display: block;
-        margin: 0 auto;
-        width: 55px;
+
+      .buddyPicture {
+        left: auto;
+        right: 4px;
       }
-      .btn-primary {
-        padding: 2px 5px;
+    }
+
+    &.with_name {
+      // none
+    }
+
+    &.with_hoverimage {
+
+      .buddyPicture {
+        overflow: visible;
+        z-index: initial;
+
+        &:hover .buddyInfoActions {
+          height: 40px;
+          opacity: 1;
+        }
       }
-      .fa {
-        color: #fff;
-        line-height: 24px;
+
+      .buddyInfoActions {
+        cursor: default;
+        display: inline-block;
+        height: 0;
+        left: 0;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        top: 48px;
+        transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
+        white-space: nowrap;
+        z-index: 1;
+
+        .btn-group {
+          display: block;
+          margin: 0 auto;
+          width: 55px;
+        }
+
+        .btn-primary {
+          padding: 2px 5px;
+        }
+
+        .fa {
+          color: #fff;
+          line-height: 24px;
+        }
       }
     }
   }
 }
 
-.chat {
-  .chatbodybottom {
-    background: $chat-bottom-background;
-    bottom: 1px;
-    left: 0;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
+.chatmenu {
+  height: 36px;
+  left: 0;
+  padding: 2px 4px;
+  position: absolute;
+  right: 0;
+  top: 36px;
 
-    @include breakpt($breakpoint-chat-small, max-height) {
-      height: auto;
-    }
+  @include breakpt($breakpoint-chat-small, max-height) {
+    display: none;
   }
+}
 
-  .typinghint {
-    color: $chat-typing;
-    font-size: .8em;
-    height: 14px;
-    overflow: hidden;
-    padding: 0 6px;
-    white-space: nowrap;
+.chatbody {
+  border-left: 1px solid $bordercolor;
+  bottom: -1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 74px;
 
-    @include breakpt($breakpoint-chat-small, max-height) {
-      display: none;
-    }
+  @include breakpt($breakpoint-chat-small, max-height) {
+    border-top: 1px solid $bordercolor;
+    top: 0;
+    top: 0;
   }
+}
 
-  .inputbox {
-    position: relative;
+.chatheader {
+  background: $chat-header;
+  border-bottom: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
+  height: 36px;
+  left: 0;
+  line-height: 34px;
+  padding: 0 4px 0 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
 
-    @include breakpt($breakpoint-chat-small, max-height) {
-      height: auto;
-    }
+  @include breakpt($breakpoint-chat-small, max-height) {
+    display: none;
+  }
 
-    .btn {
-      display: none;
-      padding: .5em 1em;
-      position: absolute;
-      right: 6px;
-      top: 1px;
-    }
+  .chatstatusicon {
+    cursor: pointer;
+    display: block;
+    font-size: 1.4em;
+    height: 36px;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 36px;
+  }
 
-    > div {
-      border-top: 1px solid $bordercolor;
-    }
+  .chatheadertitle {
+    display: inline;
+    padding-left: 28px;
   }
 
-  .input {
-    border-color: transparent;
-    border-radius: 0;
-    box-shadow: none;
-    display: block;
-    height: 54px;
-    margin: 0;
-    max-height: 54px; /* FF hack */
-    resize: none;
-    width: 100%;
+  .ctrl {
+    color: $chat-ctrl;
+    position: absolute;
+    right: 1px;
+    top: 0;
 
-    @include breakpt($breakpoint-chat-small, max-height) {
-      max-height: 2.5em;
+    .#{$fa-css-prefix} {
+      cursor: pointer;
+      padding: 6px;
     }
+  }
 
-    &:active,
-    &:focus {
-      border-color: $chat-input-border-color;
-    }
+  span {
+    display: inline-block;
+    max-width: 60%;
+    overflow: hidden;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
   }
 }
 
@@ -595,16 +594,3 @@
   50% {background-color: $componentbg;}
   100% {background-color: $actioncolor1;}
 }
-
-.chat.newmessage {
-  .chatheadertitle:after {
-    content: '***';
-    position: absolute;
-    right: 32px;
-    top: 2px;
-  }
-
-  .chatheader {
-    animation: newmessage 1s ease -.3s infinite;
-  }
-}
diff --git a/src/styles/components/_fileinfo.scss b/src/styles/components/_fileinfo.scss
index c11a5a57..778ab375 100644
--- a/src/styles/components/_fileinfo.scss
+++ b/src/styles/components/_fileinfo.scss
@@ -27,9 +27,23 @@
   padding: 1em;
   position: relative;
   text-align: center;
-}
 
-.file-info {
+  &.downloader {
+    .anim {
+      margin-left: -40px;
+    }
+
+    .file-info-size {
+      margin-bottom: 10px;
+    }
+  }
+
+  &.downloading {
+    .file-info-size {
+      border-color: $fileinfo-downloading-size-border;
+    }
+  }
+
   > div {
     position: relative;
     z-index: 3;
@@ -54,6 +68,37 @@
     text-align: left;
     top: 14px;
   }
+
+  .uploader {
+    // scss-lint:disable NestingDepth
+    .file-info-speed {
+      bottom: 6px;
+    }
+
+    .actions {
+      margin-left: 30px;
+      opacity: 0;
+    }
+
+    .anim {
+      margin-left: 0;
+    }
+
+    .hovercontrol {
+      &:hover .anim {
+        margin-left: -50px;
+      }
+
+      &:hover .actions {
+        margin-left: 0;
+        opacity: 1;
+      }
+
+      > div {
+        transition: all .2s ease-in-out;
+      }
+    }
+  }
 }
 
 .is_remote .file-info {
@@ -91,6 +136,7 @@
   }
 
   > div {
+    //scss-lint:disable NestingDepth
     bottom: 0;
     box-shadow: none !important;
     left: 0;
@@ -101,12 +147,13 @@
 
     &.progress-bar {
       opacity: .5;
-    }
 
-    &.progress-bar.download {
-      opacity: 1;
-      z-index: 1;
+      &.download {
+        opacity: 1;
+        z-index: 1;
+      }
     }
+
   }
 }
 
@@ -118,49 +165,3 @@
   right: 0;
   text-align: center;
 }
-
-.file-info.uploader {
-  .file-info-speed {
-    bottom: 6px;
-  }
-
-  .actions {
-    margin-left: 30px;
-    opacity: 0;
-  }
-
-  .anim {
-    margin-left: 0;
-  }
-
-  .hovercontrol {
-    &:hover .anim {
-      margin-left: -50px;
-    }
-
-    &:hover .actions {
-      margin-left: 0;
-      opacity: 1;
-    }
-
-    > div {
-      transition: all .2s ease-in-out;
-    }
-  }
-}
-
-.file-info.downloader {
-  .anim {
-    margin-left: -40px;
-  }
-
-  .file-info-size {
-    margin-bottom: 10px;
-  }
-}
-
-.file-info.downloading {
-  .file-info-size {
-    border-color: $fileinfo-downloading-size-border;
-  }
-}
diff --git a/src/styles/components/_presentation.scss b/src/styles/components/_presentation.scss
index ffe8ad56..a0101fa5 100644
--- a/src/styles/components/_presentation.scss
+++ b/src/styles/components/_presentation.scss
@@ -19,16 +19,146 @@
  *
  */
 
+.mainPresentation #presentation {
+  display: block;
+}
+
 .presentation {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.mainPresentation #presentation {
-  display: block;
+  .overlaybar {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    .overlaybar-content {
+      // scss-lint:disable NestingDepth
+      max-width: 100%;
+
+      .pagecontrol {
+        height: 30px;
+      }
+    }
+
+    .btn-prev {
+      left: 40px;
+    }
+
+    .btn-next {
+      left: auto;
+      right: 0;
+    }
+
+    .overlaybar-button {
+      font-size: 20px;
+      line-height: 28px;
+      padding: 4px 6px;
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .thumbnail {
+    color: #333;
+    display: inline-block;
+    height: 122px;
+    margin-left: 20px;
+    margin-top: 20px;
+    position: relative;
+    text-shadow: none;
+    vertical-align: middle;
+    width: 160px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &.presentable {
+      cursor: pointer;
+    }
+
+    &:hover .presentation-action {
+      display: block;
+    }
+
+    &:hover .notavailable {
+      display: block;
+    }
+
+    .caption {
+      // scss-lint:disable NestingDepth
+      overflow: hidden;
+      padding-bottom: 0;
+      text-overflow: ellipsis;
+
+      .size {
+        font-size: 10px;
+      }
+
+      .progress {
+        position: relative;
+      }
+
+      .download-info {
+        bottom: 0;
+        color: $text-color;
+        left: 0;
+        line-height: 20px;
+        position: absolute;
+        right: 0;
+        text-shadow: 1px 1px 1px #fff;
+        top: 0;
+      }
+    }
+
+    .active {
+      bottom: 0;
+      color: #84b819;
+      font-size: 10em;
+      left: 0;
+      opacity: .7;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
+    }
+
+    .notavailable {
+      bottom: 0;
+      color: #d2322d;
+      display: none;
+      font-size: 10em;
+      left: 0;
+      opacity: .25;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      top: 0;
+    }
+
+    .presentation-action {
+      display: none;
+      position: absolute;
+      top: 1px;
+    }
+
+    .download {
+      left: 1px;
+    }
+
+    .delete {
+      right: 1px;
+    }
+
+    .filetype {
+      font-size: 5em;
+    }
+  }
 }
 
 .presentationpane {
@@ -42,25 +172,27 @@
   .welcome {
     padding: 0;
 
+    h1 {
+      white-space: normal;
+    }
+
     .btn {
       margin-top: 30px;
     }
-  }
 
-  h1 {
-    white-space: normal;
-  }
+    .progress span {
+      text-shadow: none;
+    }
 
-  .download-info {
-    color: $text-color;
-    left: 0;
-    position: absolute;
-    text-shadow: 1px 1px 1px #fff;
-    width: 100%;
+    .progress .download-info {
+      color: $text-color;
+      left: 0;
+      position: absolute;
+      text-shadow: 1px 1px 1px #fff;
+      width: 100%;
+    }
   }
-}
 
-.presentationpane {
   .canvasContainer {
     height: 100%;
     width: 100%;
@@ -89,150 +221,19 @@
     display: none;
     margin: 0;
     padding: 0;
-  }
 
-  .odfcontainer.showonepage {
-    overflow: hidden;
-    text-align: center;
+    &.showonepage {
+      overflow: hidden;
+      text-align: center;
+    }
   }
 }
 
-.presentation .overlaybar {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-}
-
-.presentation .overlaybar .overlaybar-content {
-  max-width: 100%;
-}
-
-.presentation .overlaybar .overlaybar-button {
-  font-size: 20px;
-  line-height: 28px;
-  padding: 4px 6px;
-  position: absolute;
-  top: 0;
-}
-
-.overlaybar-content .pagecontrol {
-  height: 30px;
-}
-
-.presentation .overlaybar .btn-prev {
-  left: 40px;
-}
-
-.presentation .overlaybar .btn-next {
-  left: auto;
-  right: 0;
-}
-
 .pageinfo input {
   display: inline;
   width: 70px;
 }
 
-.presentation .thumbnail {
-  color: #333;
-  display: inline-block;
-  height: 122px;
-  margin-left: 20px;
-  margin-top: 20px;
-  position: relative;
-  text-shadow: none;
-  vertical-align: middle;
-  width: 160px;
-}
-
-.presentation .thumbnail.presentable {
-  cursor: pointer;
-}
-
-.presentation .thumbnail:first-child {
-  margin-left: 0;
-}
-
-.presentation .thumbnail .caption {
-  overflow: hidden;
-  padding-bottom: 0;
-  text-overflow: ellipsis;
-}
-
-.presentation .thumbnail .caption .size {
-  // scss-lint:disable SelectorDepth
-  font-size: 10px;
-}
-
-.presentation .thumbnail .caption .progress {
-  // scss-lint:disable SelectorDepth
-  position: relative;
-}
-
-.presentation .thumbnail .caption .download-info {
-  // scss-lint:disable SelectorDepth
-  bottom: 0;
-  color: $text-color;
-  left: 0;
-  line-height: 20px;
-  position: absolute;
-  right: 0;
-  text-shadow: 1px 1px 1px #fff;
-  top: 0;
-}
-
-.presentation .thumbnail .active {
-  bottom: 0;
-  color: #84b819;
-  font-size: 10em;
-  left: 0;
-  opacity: .7;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-}
-
-.presentation .thumbnail .notavailable {
-  bottom: 0;
-  color: #d2322d;
-  display: none;
-  font-size: 10em;
-  left: 0;
-  opacity: .25;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-}
-
-.presentation .thumbnail:hover .notavailable {
-  display: block;
-}
-
-.presentation .thumbnail .presentation-action {
-  display: none;
-  position: absolute;
-  top: 1px;
-}
-
-.presentation .thumbnail .download {
-  left: 1px;
-}
-
-.presentation .thumbnail .delete {
-  right: 1px;
-}
-
-.presentation .thumbnail:hover .presentation-action {
-  display: block;
-}
-
-.presentation .thumbnail .filetype {
-  font-size: 5em;
-}
-
 .presentations {
   height: 156px;
   margin-left: -25px;
diff --git a/src/styles/components/_rightslide.scss b/src/styles/components/_rightslide.scss
index 28b24f69..a7c2b9c3 100644
--- a/src/styles/components/_rightslide.scss
+++ b/src/styles/components/_rightslide.scss
@@ -28,14 +28,14 @@
   top: $minbarheight;
   transition: right 200ms ease-in-out;
   z-index: 5;
+
+  .rightslidepane {
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
 }
 
 .withBuddylist #rightslide {
   right: 0;
 }
-
-#rightslide .rightslidepane {
-  height: 100%;
-  position: relative;
-  width: 100%;
-}
diff --git a/src/styles/components/_roombar.scss b/src/styles/components/_roombar.scss
index 3c2ec41b..b182d44c 100644
--- a/src/styles/components/_roombar.scss
+++ b/src/styles/components/_roombar.scss
@@ -26,12 +26,11 @@
   right: 0;
   top: $minbarheight;
   z-index: 4;
-}
 
-#roombar .roombar {
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+  .roombar {
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
-
diff --git a/src/styles/components/_screenshare.scss b/src/styles/components/_screenshare.scss
index ad19392f..838bae41 100644
--- a/src/styles/components/_screenshare.scss
+++ b/src/styles/components/_screenshare.scss
@@ -19,16 +19,22 @@
  *
  */
 
+.mainScreenshare #screenshare {
+  display: block;
+}
+
 .screenshare {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.mainScreenshare #screenshare {
-  display: block;
+  .overlaybar {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 }
 
 .screensharepane {
@@ -39,9 +45,6 @@
   position: absolute;
   right: 0;
   top: 0;
-}
-
-.screensharepane {
   .remotescreen {
     position: relative;
   }
@@ -56,9 +59,3 @@
   max-height: none;
   width: auto;
 }
-
-.screenshare .overlaybar {
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
diff --git a/src/styles/components/_settings.scss b/src/styles/components/_settings.scss
index ae6f3ed3..3b874c8a 100644
--- a/src/styles/components/_settings.scss
+++ b/src/styles/components/_settings.scss
@@ -20,6 +20,7 @@
  */
 
 #settings {
+  // scss-lint:disable NestingDepth
   background: $settings-background;
   border-left: 1px solid $bordercolor;
   bottom: 0;
@@ -30,27 +31,27 @@
   transition: right 200ms ease-in-out;
   width: 520px;
   z-index: 50;
-}
 
-#settings.show {
-  right: 0;
-
-  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-    background: $settings-background;
-    left: 0;
-    width: auto;
-  }
-
-  .form-actions {
+  &.show {
+    right: 0;
 
     @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-      bottom: 0;
-      height: 60px;
+      background: $settings-background;
       left: 0;
-      margin-bottom: 0;
-      padding: 6px 0 6px 120px;
-      position: fixed;
-      right: 0;
+      width: auto;
+    }
+
+    .form-actions {
+
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
+        bottom: 0;
+        height: 60px;
+        left: 0;
+        margin-bottom: 0;
+        padding: 6px 0 6px 120px;
+        position: fixed;
+        right: 0;
+      }
     }
   }
 }
@@ -65,9 +66,7 @@
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.settings {
   @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     padding-bottom: 10px;
   }
diff --git a/src/styles/components/_usability.scss b/src/styles/components/_usability.scss
index 62c72463..20c87055 100644
--- a/src/styles/components/_usability.scss
+++ b/src/styles/components/_usability.scss
@@ -19,6 +19,16 @@
  *
  */
 
+.withChat #help,
+.withBuddylist #help {
+  right: 260px;
+}
+
+.withChat.withBuddylist #help,
+.withSettings #help {
+  right: 520px;
+}
+
 #help {
   bottom: 10px;
   color: #aaa;
@@ -32,19 +42,7 @@
   transition: right 200ms ease-in-out;
   user-select: none;
   width: 350px;
-}
 
-.withChat #help,
-.withBuddylist #help {
-  right: 260px;
-}
-
-.withChat.withBuddylist #help,
-.withSettings #help {
-  right: 520px;
-}
-
-#help {
   @include breakpt($breakpoint-useability-small, max-width, only screen) {
     display: none;
   }
diff --git a/src/styles/components/_youtubevideo.scss b/src/styles/components/_youtubevideo.scss
index 452cf135..0221154e 100644
--- a/src/styles/components/_youtubevideo.scss
+++ b/src/styles/components/_youtubevideo.scss
@@ -19,12 +19,66 @@
  *
  */
 
+.mainYoutubevideo #youtubevideo {
+  display: block;
+}
+
 .youtubevideo {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
+
+  .click-container {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 5;
+  }
+
+  .welcome {
+    max-width: 700px;
+
+    h1 {
+      margin-top: 10px;
+    }
+
+    .welcome-container {
+      max-width: 700px;
+    }
+
+    .welcome-logo {
+      background: transparent;
+      font-size: 10em;
+    }
+  }
+
+  .overlaybar {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .overlaybar-content {
+    max-width: 100%;
+    width: 100%;
+
+    form .overlaybar-buttons {
+      position: absolute;
+      right: 23px;
+      top: 6px;
+    }
+  }
+
+  .overlaybar-input {
+    padding-right: 15px;
+    position: relative;
+    width: 100%;
+  }
+
 }
 
 .youtubevideopane {
@@ -55,67 +109,14 @@
   &:hover {
     opacity: .8;
   }
-}
-
-#youtubeplayerinfo div {
-  background-color: #f9f2f4;
-  border-radius: 10px;
-  display: inline-block;
-  font-size: 2em;
-  padding: 20px 40px;
-}
-
-.youtubevideo .click-container {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 5;
-}
-
-.youtubevideo .welcome {
-  max-width: 700px;
-}
 
-.youtubevideo .welcome h1 {
-  margin-top: 10px;
-}
-
-.youtubevideo .welcome .welcome-container {
-  max-width: 700px;
-}
-
-.youtubevideo .welcome .welcome-logo {
-  background: transparent;
-  font-size: 10em;
-}
-
-.mainYoutubevideo #youtubevideo {
-  display: block;
-}
-
-.youtubevideo .overlaybar {
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.youtubevideo .overlaybar-content {
-  max-width: 100%;
-  width: 100%;
-}
-
-.youtubevideo .overlaybar-input {
-  padding-right: 15px;
-  position: relative;
-  width: 100%;
-}
-
-.youtubevideo .overlaybar-content .overlaybar-buttons {
-  position: absolute;
-  right: 23px;
-  top: 6px;
+  div {
+    background-color: #f9f2f4;
+    border-radius: 10px;
+    display: inline-block;
+    font-size: 2em;
+    padding: 20px 40px;
+  }
 }
 
 .volumecontrol {
@@ -143,37 +144,37 @@
   display: inline-block;
   padding: 6px 8px;
   vertical-align: middle;
-}
-
-.volumebar .bar {
-  -webkit-appearance: none;
-  background-color: #aaa;
-  border: 1px solid #aaa;
-  height: 3px;
-  outline: 0;
-  width: 100px;
-}
-
-.volumebar .bar::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background-color: #fff;
-  height: 20px;
-  width: 6px;
-}
-
-.volumebar .bar::-moz-range-track {
-  background: #aaa;
-  border: 0;
-}
-
-.volumebar .bar::-moz-range-thumb {
-  background-color: #fff;
-  border-radius: 0;
-  height: 20px;
-  width: 6px;
-}
 
-.volumebar .bar::-moz-focusring {
-  outline: 1px solid #aaa;
-  outline-offset: -1px;
+  .bar {
+    -webkit-appearance: none;
+    background-color: #aaa;
+    border: 1px solid #aaa;
+    height: 3px;
+    outline: 0;
+    width: 100px;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      background-color: #fff;
+      height: 20px;
+      width: 6px;
+    }
+
+    &::-moz-range-track {
+      background: #aaa;
+      border: 0;
+    }
+
+    &::-moz-range-thumb {
+      background-color: #fff;
+      border-radius: 0;
+      height: 20px;
+      width: 6px;
+    }
+
+    &::-moz-focusring {
+      outline: 1px solid #aaa;
+      outline-offset: -1px;
+    }
+  }
 }
diff --git a/src/styles/global/_overlaybar.scss b/src/styles/global/_overlaybar.scss
index 12d0a03d..3ba9d41d 100644
--- a/src/styles/global/_overlaybar.scss
+++ b/src/styles/global/_overlaybar.scss
@@ -20,6 +20,7 @@
  */
 
 .overlaybar {
+  // scss-lint:disable QualifyingElement
   background: $overlaybar-background;
   border-bottom: 1px solid #222;
   border-top: 1px solid #222;
@@ -30,14 +31,30 @@
   text-shadow: 0 0 5px #000;
   user-select: none;
   vertical-align: middle;
-}
 
-.overlaybar {
-  // scss-lint:disable QualifyingElement
   &:hover {
     background: $componentfg2;
   }
 
+  &.notvisible {
+    background: transparent;
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    pointer-events: none;
+
+    &:hover {
+      background: transparent;
+    }
+
+    .overlaybar-content {
+      display: none;
+    }
+
+    .overlaybar-overlay {
+      display: block;
+    }
+  }
+
   .btn {
     text-shadow: none;
   }
@@ -59,27 +76,6 @@
   label {
     padding-top: 6px !important;
   }
-}
-
-.overlaybar {
-  &.notvisible {
-    background: transparent;
-    border-bottom: 1px solid transparent;
-    border-top: 1px solid transparent;
-    pointer-events: none;
-
-    &:hover {
-      background: transparent;
-    }
-
-    .overlaybar-content {
-      display: none;
-    }
-
-    .overlaybar-overlay {
-      display: block;
-    }
-  }
 
   .overlaybar-button {
     color: $overlaybar-btn;