Adds the new desing for the toolbars.

css/main.css

@@ -19,6 +19,9 @@ html, body{
     width: 20%;
     max-width: 200px;
     overflow: hidden;
+    /* background-color:#dfebf1;*/
+    background-color:#FFFFFF;
+    border-left:1px solid #424242;
     z-index: 5;
 }
 
@@ -114,13 +117,13 @@ html, body{
     display: inline-block;
     position: relative;
     color: #FFFFFF;
-    top: 0;
+    top: 0px;
     padding: 10px 0px;
-    width: 39px;
+    width: 38px;
     cursor: pointer;
     font-size: 11pt;
     text-align: center;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.6);
     z-index: 1;
 }
 
@@ -177,12 +180,12 @@ html, body{
 
 a.button:hover,
 a.bottomToolbarButton:hover {
-    top: 0;
+    top: 0px;
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
     background-clip: padding-box;
-    -webkit-border-radius: 5px;
+    -webkit-border-radius: 6px;
     -webkit-background-clip: padding-box;
 }
 
@@ -196,7 +199,16 @@ a.bottomToolbarButton:hover {
     top: 5;
     width: 1px;
     height: 20px;
-    background: #676767;
+    background: #373737;
+}
+
+.bottom_button_separator {
+    display: inline-block;
+    position: relative;
+    left: 5;
+    width: 20px;
+    height: 1px;
+    background: #373737;
 }
 
 input[type='text'], input[type='password'], textarea {
@@ -267,16 +279,14 @@ form {
 #bottomToolbar {
     display:block;
     position: absolute;
-    right: -1;
+    right: 0;
+    margin-right: 5px;
     bottom: 40px;
     width: 29px;
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
+    border-radius: 6px;
     color: #FFF;
-    border: 1px solid #000;
-    background: rgba(50,50,50,.65);
-    padding-top: 5px;
-    padding-bottom: 5px;
+    border: 1px solid rgba(256, 256, 256, 0.2);
+    background: rgba(0,0,0,0.8);
     z-index: 6; /*+1 from #remoteVideos*/
 }
 
@@ -285,8 +295,9 @@ form {
     position: relative;
     color: #FFFFFF;
     top: 0;
-    padding-top: 3px;
-    width: 29px;
+    padding-top: 6px;
+    margin: 2px;
+    width: 25px;
     height: 20px;
     cursor: pointer;
     font-size: 10pt;

css/popover.css

@@ -8,7 +8,7 @@
   min-width: 100px;
   padding: 1px;
   text-align: left;
-  color: #428bca;
+  color: #333333;
   background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid #cccccc;

css/popup_menu.css

@@ -2,17 +2,17 @@
 ul.popupmenu {
     display:none;
     position: absolute;
-    padding:0;
+    padding:10px;
     margin: 0;
     bottom: 0;
-    margin-bottom: 25px;
-    padding-bottom: 5px;
-    padding-top: 5px;
+    margin-bottom: 35px;
+    padding-bottom:  10px;
+    padding-top: 10px;
     right: 10px;
     left: -5px;
     width: 100px;
-    background-color: rgba(0,0,0,1);
-    -webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    background-color: rgba(0,0,0,0.9);
+    border: 1px solid rgba(256, 256, 256, 0.2);
     border-radius:8px;
 }
 
@@ -30,8 +30,8 @@ ul.popupmenu li {
 }
 
 ul.popupmenu li:hover {
-    background-color: rgba(82, 82, 82, .7);
-    border-radius:2px;
+    background-color: rgba(256, 256, 256, .2);
+    border-radius:6px;
 }
 
 /*Link Appearance*/

css/videolayout_default.css

@@ -285,14 +285,17 @@
 #toolbar {
     display:inline-block;
     position:relative;
+    margin-top:5px;
     margin-left:auto;
     margin-right:auto;
-    height:39px;
+    padding-left:2px;
+    padding-right:2px;
+    height:38px;
     width:auto;
-    background: linear-gradient(to bottom, rgba(103,103,103,.65) , rgba(0,0,0,.65));
-    -webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
+    background-color: rgba(0,0,0,0.8); 
+    border: 1px solid rgba(256, 256, 256, 0.2);
+    border-radius: 6px;
+    
 }
 
 #subject {

index.html

@@ -58,12 +58,12 @@
     <script src="message_handler.js?v=1"></script>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=4"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=23"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=10" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=24"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=11" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
-    <link rel="stylesheet" href="css/popup_menu.css?v=2">
-    <link rel="stylesheet" href="css/popover.css?v=1">
+    <link rel="stylesheet" href="css/popup_menu.css?v=3">
+    <link rel="stylesheet" href="css/popover.css?v=2">
     <link rel="stylesheet" href="css/contact_list.css?v=1">
     <link rel="stylesheet" href="css/welcome_page.css?v=1">
     <!--
@@ -263,11 +263,13 @@
                         <i id="chatBottomButton" class="icon-chat-simple"></i>
                     </a>
                 </span>
+                <div class="bottom_button_separator"></div>
                 <span class="bottomToolbar_span">
                     <a class="bottomToolbarButton" data-container="body" data-toggle="popover" data-placement="top" data-container="body" id="contactlistpopover" content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
                         <i id="contactListButton" class="icon-contactList"></i>
                     </a>
                 </span>
+                <div class="bottom_button_separator"></div>
                 <span class="bottomToolbar_span">
                     <a class="bottomToolbarButton" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="top" content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
                         <i id="filmStripButton" class="icon-filmstrip"></i>