Fix positioning of paw sprites

public/css/inventory.styl

@@ -97,9 +97,16 @@ menu.pets .customize-menu
 .pet-button
     border: none
     background: none white
+
+//adjust position of flying pig down to leave some room between rows
+button[class*="Pet-FlyingPig"]
+    position: relative
+    top: 16px
+
 .pet-not-owned
     width: 81px;
     height: 99px;
+    position:  relative;
     /* Would use css3 filters and just display the original pet image with a black hue,
        but doesn't seem to work in Firefox or Opera */
     /*filter: brightness(0%)
@@ -107,9 +114,17 @@ menu.pets .customize-menu
     -moz-filter: brightness(0%)
     -o-filter: brightness(0%)
     -ms-filter: brightness(0%)*/
-
-    .PixelPaw
-      margin-top: 36px // align paw with pets, at the bottom of the button
+    
+    // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser)
+    .PixelPaw, .PixelPaw-Gold
+      position: absolute
+      top: 38px
+      left: 16px
+      
+//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link
+menu.pets-rare a
+    display: inline-block
+    vertical-align: top
 
 .selectableInventory
   background-color: lightgreen !important

views/options/inventory/stable.jade

@@ -76,7 +76,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html')
 
       .col-md-12
         h4=env.t('rarePets')
-        menu
+        menu.pets-rare
           div
             button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom')
             button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom')