[ux] increase widths to fit all info in roster

public/css/app/layout.styl

@@ -20,7 +20,7 @@ h3
   position: absolute
   top: 0px
   right: 0px
-  left: 181px
+  left: 201px
   height: 100%
   borderbox()
 

public/css/app/roster.styl

@@ -6,7 +6,7 @@
   top: 0px
   bottom: 0px
   left: 0px
-  width: 180px
+  width: 200px
   background-color: $sidebarBg
   z-index: 300
   overflow-y: auto;
@@ -33,7 +33,7 @@
 
       a
         position: relative
-        width: 130px
+        width: 150px
 
       .button
         background: $sidebarActive
@@ -173,8 +173,9 @@
       text-align: center
       background: rgba(0, 174, 239, .8)
 
-    .idle
+    .idleTime
       font-size: 10px
+      color: darken($textSecondary, 50%)
 
 @keyframes pulsate
   0%

public/css/app/settings.css

@@ -1,9 +0,0 @@
-.uploadRegion {
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius: 10px;
-  -o-border-radius: 10px;
-  -border-radius: 10px;
-  border-radius: 10px;
-  border: 1px dashed #777;
-}

public/css/otalk.css

@@ -268,7 +268,7 @@ h3 {
   position: absolute;
   top: 0px;
   right: 0px;
-  left: 181px;
+  left: 201px;
   height: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -321,7 +321,7 @@ h3 {
   top: 0px;
   bottom: 0px;
   left: 0px;
-  width: 180px;
+  width: 200px;
   background-color: #0b1316;
   z-index: 300;
   overflow-y: auto;
@@ -354,7 +354,7 @@ h3 {
 }
 #menu .main li a {
   position: relative;
-  width: 130px;
+  width: 150px;
 }
 #menu .main li .button {
   background: #1f2d49;
@@ -545,9 +545,10 @@ h3 {
   text-align: center;
   background: rgba(0,174,239,0.8);
 }
-#roster li .idle,
-#bookmarks li .idle {
+#roster li .idleTime,
+#bookmarks li .idleTime {
   font-size: 10px;
+  color: #5c5c5c;
 }
 @-moz-keyframes pulsate {
   0% {