Adding hover icoons for notifications & conversations

Added white versions of the icons on hover to match the hover of other
header items.
Changing the notifications hover icon to the regular notifications icon when active so
it is visible with the white background.

Fixing the hard coded background-position value for notifications_grey

Can not depend on generated sprite background position as it will change
with changes in icons

Moving the $icons variable to a broader scope

Since the variable is used in the header, the sprites now are imported
before the header

Using the default sprite map instead of the explicitly created sprite map

app/assets/stylesheets/application.css.sass

@@ -5,9 +5,9 @@
 @import 'new_styles/_spinner'
 
 @import 'sidebar'
+@import 'sprites'
 @import 'header'
 @import 'footer'
-@import 'sprites'
 @import 'opengraph'
 
 @import 'profile.css.scss'

app/assets/stylesheets/header.css.scss

@@ -75,6 +75,11 @@ body > header {
       &:hover .badge_count { background-color: lighten(#A40802, 5%); }
       
       .icons-notifications_grey { height: 16px; }
+
+      &.active .icons-notifications_grey:hover {
+        background-position: sprite-position($icons-sprites, notifications_grey);
+      }
+
       .icons-mail_grey { height: 11px }
 
       a.badge_link {