Tighten up button styling.

bar.css

@@ -1,13 +1,15 @@
 body { margin:0; font-family:sans-serif; }
 
-button { margin:5px 2px; border-radius:2px; vertical-align:middle; }
-button#like { background:buttonface url(/images/upgray.png) no-repeat 5px center; padding-left:22px; }
-.liked button#like { background-image:url(/images/upmod.png)}
-button#dislike { background:buttonface url(/images/downgray.png) no-repeat 5px center; padding-left:22px; }
-.disliked button#dislike { background-image:url(/images/downmod.png)}
-button#comments { background:buttonface url(/images/comments.png) no-repeat 5px center; padding-left:22px; }
-.liked button#like, .disliked button#dislike { border:2px inset buttonface; }
-.liked button#like:active, .disliked button#dislike:active { border:2px outset buttonface; }
+button, .liked button#like:active, .disliked button#dislike:active { margin:5px 2px; border-radius:5px; background:-webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(200,200,200)), color-stop(1, rgb(250,250,250))); border:2px outset rgba(255,255,255,.4); vertical-align:middle; }
+button:active, .liked button#like, .disliked button#dislike { background:-webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(200,200,200)), color-stop(1, rgb(180,180,180))); border:2px inset rgba(255,255,255,.4); }
+.liked button#like { border:2px solid #FF8B60; }
+.disliked button#dislike { border:2px solid #9494FF; }
+button span { background-position:left center; background-repeat:no-repeat; padding-left:18px; vertical-align:middle; }
+button#like span { background-image:url(/images/upgray.png); }
+.liked button#like span { background-image:url(/images/upmod.png); }
+button#dislike span { background-image:url(/images/downgray.png); }
+.disliked button#dislike span { background-image:url(/images/downmod.png); }
+button#comments span { background-image:url(/images/comments.png); }
 
 #bar { display:table; color:white; text-align:left; font-family:sans-serif; border-top-left-radius:5px; border-bottom-left-radius:5px; }
 #bar > * { display:table-cell; vertical-align:middle; }
@@ -17,6 +19,7 @@ button#comments { background:buttonface url(/images/comments.png) no-repeat 5px
 .liked #score { color:#FF8B60; }
 .disliked #score { color:#9494FF; }
 #title { padding:5px 0; }
+
 #close { background:none; padding:0; border:1px solid transparent; border-radius:2px; }
 #close img { vertical-align:middle; padding:3px; }
 #close:hover { border-color:rgba(255,255,255,.4); }

bar.html

@@ -35,7 +35,7 @@
         }
         $('#score').text(info.score);
         $('#title').text(info.title)
-        $('#comments').text(info.num_comments);
+        $('#comments span').text(info.num_comments);
 
         window.setTimeout(function() {
           msgJSON({action:'size', width:$('#bar').outerWidth(), height:$('#bar').outerHeight()});
@@ -83,9 +83,9 @@
         <a id="logo" href="http://www.reddit.com" target="_top"></a>
         <span id="score">?</span> <span id="title"></span>
         <div id="buttons">
-          <button id="like">Like</button>
-          <button id="dislike">Dislike</button>
-          <button id="comments">?</button>
+          <button id="like"><span>Like</span></button>
+          <button id="dislike"><span>Dislike</span></button>
+          <button id="comments"><span>?</span></button>
           <button id="close" ><img src="/images/close.png" alt="close"/></button>
         </div>
     </div>

pageOverlay.js

@@ -7,7 +7,7 @@ shineOverlay = {
     var result = $('<div id="_shine-overlay"></div>')
       .append($('<iframe id="_shine-frame" src="bar.html" scrolling="no" frameborder="0"></iframe>'))
       .appendTo('body')
-      .css('visible', false);
+      .css('visibility', 'visible');
 
     return result;
   },
@@ -40,8 +40,8 @@ shineOverlay = {
       this.visible = true;
       $('#_shine-overlay')
         .css({
-          'right':(-$('#_shine-overlay').innerWidth())+'px',
-          'visible':true})
+          'right': (-$('#_shine-overlay').innerWidth())+'px',
+          'visibility': 'visible'})
         .animate({'right': 0});
     }
   },
@@ -51,7 +51,7 @@ shineOverlay = {
       this.visible = false;
       $('#_shine-overlay')
         .animate({right:(-$('#_shine-overlay').innerWidth())+'px'}, function() {
-          $('#_shine-overlay').css('visible', false);
+          $('#_shine-overlay').css('visibility', 'hidden');
         });
     }
   }