dropdown images as embedded assets and not 2 separate image tags

app/helpers/aspect_global_helper.rb

@@ -71,8 +71,6 @@ module AspectGlobalHelper
 
     str = <<LISTITEM
 <li data-aspect_id=#{aspect.id} class='#{klass}'>
-  <img src='/images/icons/check_yes_ok.png' width=18 height=18 class='check'/>
-  <img src='/images/icons/check_yes_ok_white.png' width=18 height=18 class='checkWhite'/>
   #{aspect.name}
 </li>
 LISTITEM

public/javascripts/contact-edit.js

@@ -11,7 +11,6 @@ var ContactEdit = {
 
   processClick: function(li, evt){
     var dropdown = li.closest('.dropdown');
-
     if (dropdown.hasClass('inviter')) {
       ContactEdit.inviteFriend(li, evt);
     }
@@ -42,9 +41,8 @@ var ContactEdit = {
       "person_id": li.parent().data("person_id"),
       "_method": (selected) ? "DELETE" : "POST"
     }, function(aspectMembership) {
-      ContactEdit.toggleCheckbox(checkbox);
+      li.toggleClass("selected");
       ContactEdit.updateNumber(li.closest(".dropdown_list"), li.parent().data("person_id"), aspectMembership.aspect_ids.length);
-
       Diaspora.widgets.publish("aspectDropdown/updated", [li.parent().data("person_id"), li.parents(".dropdown").parent(".right").html()]);
     });
   },
@@ -70,11 +68,6 @@ var ContactEdit = {
 
     button.html(replacement + ' ▼');
   },
-  
-  toggleCheckbox: 
-    function(check){
-      check.parent('li').toggleClass('selected');
-    }
 };
 
 $(document).ready(function(){

public/stylesheets/sass/ui.sass

@@ -136,15 +136,17 @@
         :position relative
         :color #222
 
-        .check,
-        .checkWhite
-          :position absolute
-          :left 4px
-          :top 1px
+        &.selected
+          :background
+            :image url('/images/icons/check_yes_ok.png')
+            :position 3px 1px
+            :repeat no-repeat
 
-        .checkWhite
-          :display none
-          :top 0px
+        &.selected:hover
+          :background
+            :image url('/images/icons/check_yes_ok_white.png')
+            /* bump top position up 1px to compensate for the 1px added top border */
+            :position 3px 0px
 
         &.newItem
           a
@@ -154,10 +156,6 @@
             &:hover
               :text-decoration none
 
-        &:not(.selected)
-          .check
-            :display none
-
   &.hang_right
     .wrapper
       @include border-radius(3px, 0, 3px, 3px)
@@ -180,9 +178,13 @@
     .selected
       :font-weight bold
 
+    .button
+      :background #666
+    
     .button,
     .wrapper ul > li:hover
-      :background #666
+      :background
+        :color #666
       :color #fff
       :text-shadow none
 
@@ -202,10 +204,3 @@
     .wrapper ul > li *
       :cursor pointer
 
-    .selected:hover .checkWhite
-      :display block
-
-    .selected:hover .check
-      :display none
-
-