diff --git a/html/main.html b/html/main.html
index 99c27acb..834dd710 100644
--- a/html/main.html
+++ b/html/main.html
@@ -8,11 +8,11 @@
 <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
 <page></page>
 <div id="bar">
-    <div class="left">
+    <div class="bar-left">
     	<%template "logo" .%>
     </div>
     <status-message></status-message>
-    <div class="ng-cloak right">
+    <div class="ng-cloak bar-right">
         <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
         <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
         <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
@@ -42,4 +42,4 @@
 <script data-main="<%.Cfg.S%>/js/<%.App%>" data-plugin="<%.Cfg.Plugin%>" src="<%.Cfg.S%>/js/libs/require/require.js"></script>
 <%template "extra-body" .%>
 </body>
-</html><%end%>
\ No newline at end of file
+</html><%end%>
diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index d368302b..5425fd7e 100644
--- a/src/styles/components/_bar.scss
+++ b/src/styles/components/_bar.scss
@@ -33,7 +33,7 @@
   @include box-shadow(0 2px 10px 0 $componentfg3);
   @include touch-callout(none);
   @include user-select(none);
-  .left {
+  .bar-left {
     bottom: 0;
     left: 0;
     top: 0;
@@ -62,7 +62,7 @@
   }
 }
 
-#bar .right {
+#bar .bar-right {
   bottom: 1px;
   padding-right: 8px;
   position: absolute;
@@ -127,7 +127,7 @@
     margin: -5px .5em 0 .5em;
     width: 46px;
   }
-  > .middle {
+  .bar-middle {
     background-color: $componentbg;
     display: inline-block;
     min-height: 44px;
diff --git a/static/partials/statusmessage.html b/static/partials/statusmessage.html
index bddddd86..1216daf4 100644
--- a/static/partials/statusmessage.html
+++ b/static/partials/statusmessage.html
@@ -1,4 +1,4 @@
-<span class="middle status-{{status}}" ng-switch on="status">
+<span class="bar-middle status-{{status}}" ng-switch on="status">
   <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
   <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
   <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>