my.diff

diff --git a/app/styles/_list-controller.scss b/app/styles/_list-controller.scss
index bbcfae9..8ba7cc0 100644
--- a/app/styles/_list-controller.scss
+++ b/app/styles/_list-controller.scss
@@ -32,6 +32,10 @@
       }
     }
   }
+  
+  .item-listing {
+    margin-right: 36px;
+  }
 
   .rec-detail {
     min-height: 325px; position: relative;
diff --git a/app/views/list.html b/app/views/list.html
index 121b8a5..52df1af 100644
--- a/app/views/list.html
+++ b/app/views/list.html
@@ -29,12 +29,12 @@
                   </select>
                 </div>
                 <div class="section">
-                  <div class="product item-listing" style="margin-right: 36px" ng-repeat="product in item.recommendations">
+                  <div class="product item-listing" ng-class="{true: 'sale', false: ''}[product.onSale]" ng-repeat="product in item.recommendations">
                     <a class="qa-product-link" href="" title="{{product.brandAndDisplayName}}" ng-click="showRecommendationDetail(item, $index)">
                       <p class="item-listing-image">
                         <img class="js-product-image qa-product-image" ng-src={{product.imageLarge.url}} alt="Denali Fleece Jacket - Men's" height="160" width="160">
                       </p>
-                      <span class="qa-percent-off percent-off" style="position: absolute; top: 3px;" ng-show="product.onSale">
+                      <span class="qa-percent-off percent-off" ng-show="product.onSale">
                         <span class="discount-amount-text">30%</span> <span class="percent-off-label">Off</span>
                       </span>
                       <p class="item-listing-rating">