From f5cf9aa13be230ada6f0d6a9dd9783c4b4e01190 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 29 Jul 2012 15:43:28 -0400
Subject: [PATCH] redesign outfits#index with thumbnails

---
 app/stylesheets/outfits/_edit.sass     |  26 +-
 app/stylesheets/outfits/_index.sass    |  72 ++-
 app/stylesheets/partials/_outfit.sass  |  42 ++
 app/views/outfits/_outfit.html.haml    |  16 +-
 public/stylesheets/compiled/screen.css | 606 ++++++++++++++-----------
 5 files changed, 453 insertions(+), 309 deletions(-)
 create mode 100644 app/stylesheets/partials/_outfit.sass

diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass
index 607e2418..d32d9ca6 100644
--- a/app/stylesheets/outfits/_edit.sass
+++ b/app/stylesheets/outfits/_edit.sass
@@ -3,6 +3,7 @@
 
 @import "partials/context_button"
 @import "partials/icon"
+@import "partials/outfit"
 @import star
 
 $object-padding: 6px
@@ -396,11 +397,11 @@ body.outfits-edit
     $outfit-margin: 1px
     $outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
     > ul
+      +outfits-list
       +sidebar-view-child
       background: image-url("loading.gif") no-repeat center top
       display: none
       font-family: $main-font
-      list-style: none
       margin: 0 auto 1em
       min-height: 16px
       width: $outfit-outer-size * 3
@@ -409,13 +410,9 @@ body.outfits-edit
         background: transparent
       
       > li
-        +inline-block
-        +outfit-star
         height: $outfit-inner-size
         margin: $outfit-margin
         width: $outfit-inner-size
-        overflow: hidden
-        position: relative
         
         $outfit-header-h-padding: 4px
         $outfit-header-v-padding: 2px
@@ -423,17 +420,9 @@ body.outfits-edit
         $outfit-header-inner-height: 12px
         $outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
         header, footer, .outfit-delete-confirmation
-          color: white
           font-size: $outfit-header-inner-height
-          left: 0
           padding: $outfit-header-v-padding $outfit-header-h-padding
-          position: absolute
           width: $outfit-header-inner-width
-          z-index: 2
-        
-        header, footer
-          background: black
-          background: rgba(0, 0, 0, 0.75)
         
         header
           +opacity(0.75)
@@ -442,11 +431,10 @@ body.outfits-edit
         
         footer, .outfit-delete-confirmation
           display: none
-          top: 0
         
         .outfit-delete-confirmation
-          background: red
-          background: rgba(255, 50, 50, 0.75)
+          +outfit-banner
+          +outfit-banner-background(rgb(255, 50, 50))
           text-align: center
           top: 0
           
@@ -458,12 +446,9 @@ body.outfits-edit
         $outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
         .outfit-thumbnail
           +opacity(.5)
-          cursor: pointer
           display: none
           left: $outfit-thumbnail-h-offset
-          position: absolute
           top: $outfit-thumbnail-v-offset
-          z-index: 1
         
         .outfit-star
           bottom: 0
@@ -490,9 +475,6 @@ body.outfits-edit
             border: 1px solid white
             width: 6em
         
-        a
-          color: white
-        
         &:hover
           header
             +opacity(1)
diff --git a/app/stylesheets/outfits/_index.sass b/app/stylesheets/outfits/_index.sass
index fd40a952..9dc5f94b 100644
--- a/app/stylesheets/outfits/_index.sass
+++ b/app/stylesheets/outfits/_index.sass
@@ -1,27 +1,55 @@
+@import "partials/outfit"
 @import star
 
+$outfit-inner-height: 150px
+$outfit-inner-width: 150px
+$outfit-banner-h-padding: 4px
+$outfit-banner-v-padding: 2px
+$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
+
 body.outfits-index
   #outfits
-    list-style: none
-
-    li
-      +outfit-star
-      clear: left
-      float: left
-      margin-bottom: .5em
-
-    h4
-      float: left
-      width: 12em
-
-    .outfit-edit-link, form
-      float: left
-      font-size: 85%
-      margin-left: 1em
-
-    .outfit-edit-link
-      +awesome-button
-
+    +outfits-list
+    
+    > li
+      height: $outfit-inner-height
+      margin: 2px
+      width: $outfit-inner-width
+      
+      header, footer
+        padding: $outfit-banner-v-padding $outfit-banner-h-padding
+        width: $outfit-banner-inner-width
+      
+      footer
+        display: none
+        
+        .outfit-edit-link
+          float: left
+          text-decoration: none
+        
+        form
+          float: right
+          
+          .outfit-delete-button
+            margin: 0
+            padding: 0
+        
+        .outfit-edit-link, .outfit-delete-button
+          &:hover
+            text-decoration: underline
+      
+      .outfit-star
+        cursor: auto
+      
+      .outfit-name
+        text-decoration: none
+        
+        &:hover
+          text-decoration: underline
+      
+      &:hover
+        footer
+          display: block
+    
     .outfit-delete-button
-      margin: 0
-
+      +reset-awesome-button
diff --git a/app/stylesheets/partials/_outfit.sass b/app/stylesheets/partials/_outfit.sass
new file mode 100644
index 00000000..04a5f67f
--- /dev/null
+++ b/app/stylesheets/partials/_outfit.sass
@@ -0,0 +1,42 @@
+=outfit
+  +inline-block
+  +outfit-star
+  overflow: hidden
+  position: relative
+  
+  header, footer
+    +outfit-banner
+    +outfit-banner-background(black)
+  
+  header
+    bottom: 0
+  
+  footer
+    top: 0
+  
+  .outfit-thumbnail
+    cursor: pointer
+    position: absolute
+    z-index: 1
+  
+  a
+    color: white
+
+=outfits-list
+  // remove whitespace between inline-block elements
+  font-size: 0
+  list-style: none
+  
+  > li
+    +outfit
+    font-size: 14px
+
+=outfit-banner
+  color: white
+  left: 0
+  position: absolute
+  z-index: 2
+
+=outfit-banner-background($color)
+  background: $color
+  background: rgba($color, 0.75)
diff --git a/app/views/outfits/_outfit.html.haml b/app/views/outfits/_outfit.html.haml
index ebf3c9a0..181ff8d9 100644
--- a/app/views/outfits/_outfit.html.haml
+++ b/app/views/outfits/_outfit.html.haml
@@ -1,6 +1,14 @@
 = outfit_li_for(outfit) do
-  .outfit-star
-  %h4= link_to outfit.name, outfit
-  = link_to_edit_outfit 'Edit', outfit, :class => 'outfit-edit-link'
-  = button_to('Delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?")
+  - if outfit.image?
+    = link_to image_tag(outfit.image.small.url), outfit
+  
+  %header
+    .outfit-star
+    = link_to outfit.name, outfit, :class => 'outfit-name'
+  
+  %footer
+    = link_to_edit_outfit 'edit', outfit, :class => 'outfit-edit-link'
+    = button_to 'delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?"
+  
+  
 
diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css
index 90013a03..7b07aeaf 100644
--- a/public/stylesheets/compiled/screen.css
+++ b/public/stylesheets/compiled/screen.css
@@ -2046,12 +2046,12 @@ body.items-show.js #trade-hangers p.showing-more {
 }
 
 @import url(../shared/jquery.jgrowl.css);
-/* line 48, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 49, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-toolbar {
   margin-bottom: 0.5em;
   text-align: left;
 }
-/* line 51, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-toolbar form {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2064,23 +2064,23 @@ body.outfits-edit #preview-toolbar form {
 body.outfits-edit #preview-toolbar form {
   *display: inline;
 }
-/* line 54, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 55, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-info form {
   display: inline;
 }
-/* line 57, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 58, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form ul {
   list-style: none;
 }
-/* line 59, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 60, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form ul, body.outfits-edit #pet-state-form ul li {
   display: inline;
 }
-/* line 61, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 62, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form input {
   display: none;
 }
-/* line 63, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 64, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form label {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -2116,7 +2116,7 @@ body.outfits-edit #pet-state-form label:hover {
 body.outfits-edit #pet-state-form label:active {
   top: 1px;
 }
-/* line 66, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 67, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form li.selected button {
   background: #0b61a4 url('/images/alert-overlay.png?1315327995') repeat-x;
 }
@@ -2124,30 +2124,30 @@ body.outfits-edit #pet-state-form li.selected button {
 body.outfits-edit #pet-state-form li.selected button:hover {
   background-color: #005093;
 }
-/* line 68, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 69, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-state-form.hidden {
   visibility: hidden;
 }
-/* line 70, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 71, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper {
   float: right;
 }
-/* line 72, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 73, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper button {
   display: none;
 }
-/* line 74, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 75, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper #share-outfit {
   display: inline-block;
 }
-/* line 76, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 77, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper.loading {
   background-image: url('/images/loading.gif?1315327995');
   background-position: left center;
   background-repeat: no-repeat;
   padding-left: 20px;
 }
-/* line 82, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 83, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit, body.outfits-edit #save-outfit-not-signed-in, body.outfits-edit #save-current-outfit, body.outfits-edit #save-outfit-finish {
   background: #ff5c00 url('/images/alert-overlay.png?1315327995') repeat-x;
 }
@@ -2155,28 +2155,28 @@ body.outfits-edit #save-outfit, body.outfits-edit #save-outfit-not-signed-in, bo
 body.outfits-edit #save-outfit:hover, body.outfits-edit #save-outfit-not-signed-in:hover, body.outfits-edit #save-current-outfit:hover, body.outfits-edit #save-outfit-finish:hover {
   background-color: #ee4b00;
 }
-/* line 84, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 85, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #current-outfit-permalink, body.outfits-edit #shared-outfit-permalink {
   display: none;
   margin-right: 0.25em;
 }
-/* line 87, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 88, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #current-outfit-permalink img, body.outfits-edit #shared-outfit-permalink img {
   bottom: -2px;
   height: 16px;
   position: relative;
   width: 16px;
 }
-/* line 89, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 90, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #shared-outfit-url {
   display: none;
   width: 15em;
 }
-/* line 92, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 93, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview {
   clear: both;
 }
-/* line 94, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 95, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf {
   float: left;
   height: 380px;
@@ -2184,15 +2184,15 @@ body.outfits-edit #preview-swf {
   position: relative;
   width: 380px;
 }
-/* line 101, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 102, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf.swf-adapter #preview-image-container {
   display: none;
 }
-/* line 104, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 105, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf.image-adapter #preview-swf-container {
   display: none;
 }
-/* line 106, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 107, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-image-container {
   position: relative;
 }
@@ -2202,12 +2202,12 @@ body.outfits-edit #preview-image-container img {
   position: absolute;
   top: 0;
 }
-/* line 109, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 110, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-image-container, body.outfits-edit #preview-image-container img {
   height: 100%;
   width: 100%;
 }
-/* line 112, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 113, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-swf-overlay {
   -moz-opacity: 0;
   -webkit-opacity: 0;
@@ -2220,7 +2220,7 @@ body.outfits-edit #preview-swf-overlay {
   top: 0;
   width: 100%;
 }
-/* line 120, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 121, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-images-pending {
   background: black;
   background: rgba(0, 0, 0, 0.75);
@@ -2232,11 +2232,11 @@ body.outfits-edit #preview-images-pending {
   right: 0;
   z-index: 1000;
 }
-/* line 130, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 131, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-images-pending.waiting-on-0 {
   display: none;
 }
-/* line 132, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 133, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode {
   margin-right: 1em;
   position: absolute;
@@ -2245,21 +2245,21 @@ body.outfits-edit #preview-mode {
   top: 0;
   width: 7em;
 }
-/* line 140, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 141, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode.flash-active #preview-mode-flash {
   color: #004400;
   font-weight: bold;
 }
-/* line 143, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 144, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode.image-active #preview-mode-image {
   color: #004400;
   font-weight: bold;
 }
-/* line 145, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 146, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode.image-active #preview-mode-note, body.outfits-edit #preview-mode.image-active #report-broken-image {
   display: block;
 }
-/* line 153, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 154, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-toggle {
   -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
@@ -2275,37 +2275,37 @@ body.outfits-edit #preview-mode-toggle {
   text-align: center;
   width: 5em;
 }
-/* line 162, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 163, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-toggle li {
   border-top: 1px solid #aaddaa;
   cursor: pointer;
   padding: 0.125em 0;
   width: 100%;
 }
-/* line 167, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 168, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-toggle li:first-child {
   border-top: 0;
 }
-/* line 169, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 170, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-download-image {
   display: none;
   margin: 1em auto;
 }
-/* line 172, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 173, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-download-image h3 {
   font-size: 125%;
   margin-bottom: 0.5em;
 }
-/* line 175, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 176, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-download-image ul {
   list-style: none;
 }
-/* line 177, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 178, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-download-image button {
   font-size: 75%;
   width: 100%;
 }
-/* line 180, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 181, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-note, body.outfits-edit #report-broken-image {
   display: block;
   font-size: 75%;
@@ -2314,16 +2314,16 @@ body.outfits-edit #preview-mode-note, body.outfits-edit #report-broken-image {
   text-decoration: none;
   width: 100%;
 }
-/* line 187, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 188, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-note em, body.outfits-edit #report-broken-image em {
   font-style: normal;
   text-decoration: underline;
 }
-/* line 190, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 191, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-mode-note, body.outfits-edit #report-broken-image {
   display: none;
 }
-/* line 193, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 194, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar {
   float: left;
   height: 380px;
@@ -2331,67 +2331,67 @@ body.outfits-edit #preview-sidebar {
   margin-bottom: 1em;
   width: 400px;
 }
-/* line 200, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 201, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-closet {
   display: none;
 }
-/* line 202, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 203, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-outfits {
   display: block;
 }
-/* line 205, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 206, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.sharing #preview-closet {
   display: none;
 }
-/* line 207, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 208, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.sharing #preview-sharing {
   display: block;
 }
-/* line 209, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 210, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar .sidebar-view {
   margin: 1.5em 0;
 }
-/* line 212, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 213, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet h2 {
   margin-bottom: 0;
 }
-/* line 214, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 215, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet ul {
   text-align: center;
 }
-/* line 216, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 217, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object {
   background: #eeffee;
 }
-/* line 218, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 219, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object img {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
 }
-/* line 220, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 221, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.worn {
   background: transparent;
 }
-/* line 222, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 223, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.worn img {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 224, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 225, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets {
   background: #fbe3e4;
   color: #8a1f11;
   padding-bottom: 1.25em;
 }
-/* line 228, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 229, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-closet .object.no-assets .no-assets-message {
   display: block;
 }
-/* line 230, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 231, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .no-assets-message {
   background: #f3dbdc;
   bottom: 0;
@@ -2403,7 +2403,7 @@ body.outfits-edit .no-assets-message {
   position: absolute;
   width: 100%;
 }
-/* line 240, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 241, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #no-assets-full-message {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -2421,12 +2421,12 @@ body.outfits-edit #no-assets-full-message {
   top: -9999px;
   width: 30em;
 }
-/* line 251, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 252, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form {
   clear: both;
   text-align: left;
 }
-/* line 254, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 255, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form h2 {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2439,7 +2439,7 @@ body.outfits-edit #preview-search-form h2 {
 body.outfits-edit #preview-search-form h2 {
   *display: inline;
 }
-/* line 257, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 258, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form input {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2451,17 +2451,17 @@ body.outfits-edit #preview-search-form input {
 body.outfits-edit #preview-search-form input {
   *display: inline;
 }
-/* line 259, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 260, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form input[type=submit] {
   margin-right: 2em;
 }
-/* line 261, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 262, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .preview-search-form-your-items {
   display: none;
   font-size: 85%;
   margin-right: 1em;
 }
-/* line 265, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 266, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2473,53 +2473,53 @@ body.outfits-edit #preview-search-form-pagination {
 body.outfits-edit #preview-search-form-pagination {
   *display: inline;
 }
-/* line 267, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 268, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination a, body.outfits-edit #preview-search-form-pagination span {
   margin: 0 0.25em;
 }
-/* line 269, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 270, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-pagination .current {
   font-weight: bold;
 }
-/* line 271, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 272, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-clear {
   display: none;
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 275, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 276, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-loading {
   display: none;
   font-size: 75%;
   font-style: italic;
   margin-left: 2em;
 }
-/* line 281, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 282, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-no-results {
   display: none;
 }
-/* line 283, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 284, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-help {
   font-size: 87.5%;
   margin-left: 2em;
 }
-/* line 286, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 287, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .search-helper {
   font-family: inherit;
 }
-/* line 288, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 289, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .possible-error {
   display: none;
 }
-/* line 291, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 292, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #fullscreen-copyright {
   display: none;
 }
-/* line 293, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 294, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen {
   height: 100%;
 }
-/* line 296, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 297, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #container {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -2532,31 +2532,31 @@ body.outfits-edit.fullscreen #container {
   position: relative;
   width: 80%;
 }
-/* line 304, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 305, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen h1 {
   display: none;
 }
-/* line 306, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 307, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #short-url-response {
   position: static;
 }
-/* line 308, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 309, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview {
   width: 100%;
 }
-/* line 310, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 311, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar {
   float: right;
   margin: 0;
   position: relative;
   width: 400px;
 }
-/* line 315, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 316, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-sidebar.viewing-saving-outfit {
   height: auto;
   max-height: 100%;
 }
-/* line 318, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 319, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form {
   bottom: 1.5em;
   left: 0;
@@ -2565,7 +2565,7 @@ body.outfits-edit.fullscreen #preview-search-form {
   position: absolute;
   width: 100%;
 }
-/* line 326, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 327, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #preview-search-form-help div {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -2578,27 +2578,27 @@ body.outfits-edit.fullscreen #preview-search-form-help div {
 body.outfits-edit.fullscreen #preview-search-form-help div {
   *display: inline;
 }
-/* line 329, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 330, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer {
   bottom: 0;
   left: 0;
   position: absolute;
   width: 100%;
 }
-/* line 334, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 335, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer ul, body.outfits-edit.fullscreen #footer p, body.outfits-edit.fullscreen #footer li {
   display: inline;
 }
-/* line 336, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 337, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.fullscreen #footer ul {
   margin-right: 2em;
 }
-/* line 339, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 340, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object {
   padding: 6px;
   position: relative;
 }
-/* line 342, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 343, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul {
   display: none;
   left: 0;
@@ -2606,11 +2606,11 @@ body.outfits-edit .object ul {
   position: absolute;
   top: 0;
 }
-/* line 348, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 349, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul li {
   margin-bottom: 0.25em;
 }
-/* line 350, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 351, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object ul li a {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -2655,11 +2655,11 @@ body.outfits-edit .object ul li a:active {
 body.outfits-edit .object ul li a:hover {
   background-color: #999999;
 }
-/* line 353, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 354, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info {
   display: block;
 }
-/* line 360, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 361, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon {
   background: url('/images/nc.png?1315327995') no-repeat;
   height: 16px;
@@ -2669,14 +2669,14 @@ body.outfits-edit .nc-icon {
   top: 64px;
   width: 16px;
 }
-/* line 368, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 369, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .nc-icon:hover {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
 }
-/* line 371, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 372, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info {
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
@@ -2697,53 +2697,48 @@ body.outfits-edit .object-info {
   top: 0;
   width: 16px;
 }
-/* line 382, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 383, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info span {
   font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   position: relative;
   top: -2px;
 }
-/* line 388, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 389, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .object-info:hover {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 391, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 392, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits {
   display: none;
   text-align: left;
 }
-/* line 398, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 399, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul {
+  font-size: 0;
+  list-style: none;
   margin-left: 24px;
   margin-right: 24px;
   background: url('/images/loading.gif?1315327995') no-repeat center top;
   display: none;
   font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
-  list-style: none;
   margin: 0 auto 1em;
   min-height: 16px;
   width: 336px;
 }
-/* line 408, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul.loaded {
-  background: transparent;
-}
-/* line 411, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 30, ../../../app/stylesheets/partials/_outfit.sass */
 body.outfits-edit #preview-outfits > ul > li {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: middle;
   *vertical-align: auto;
-  height: 110px;
-  margin: 1px;
-  width: 110px;
   overflow: hidden;
   position: relative;
+  font-size: 14px;
 }
 /* line 7, ../../../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
 body.outfits-edit #preview-outfits > ul > li {
@@ -2771,22 +2766,50 @@ body.outfits-edit #preview-outfits > ul > li.starred .outfit-star {
 body.outfits-edit #preview-outfits > ul > li.loading .outfit-star {
   background-image: url('/images/loading.gif?1315327995');
 }
-/* line 425, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li header, body.outfits-edit #preview-outfits > ul > li footer, body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation {
-  color: white;
-  font-size: 12px;
-  left: 0;
-  padding: 2px 4px;
-  position: absolute;
-  width: 102px;
-  z-index: 2;
-}
-/* line 434, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 7, ../../../app/stylesheets/partials/_outfit.sass */
 body.outfits-edit #preview-outfits > ul > li header, body.outfits-edit #preview-outfits > ul > li footer {
+  color: white;
+  left: 0;
+  position: absolute;
+  z-index: 2;
   background: black;
   background: rgba(0, 0, 0, 0.75);
 }
-/* line 438, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 11, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-edit #preview-outfits > ul > li header {
+  bottom: 0;
+}
+/* line 14, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-edit #preview-outfits > ul > li footer {
+  top: 0;
+}
+/* line 17, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-edit #preview-outfits > ul > li .outfit-thumbnail {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+}
+/* line 22, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-edit #preview-outfits > ul > li a {
+  color: white;
+}
+/* line 409, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul.loaded {
+  background: transparent;
+}
+/* line 412, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li {
+  height: 110px;
+  margin: 1px;
+  width: 110px;
+}
+/* line 422, ../../../app/stylesheets/outfits/_edit.sass */
+body.outfits-edit #preview-outfits > ul > li header, body.outfits-edit #preview-outfits > ul > li footer, body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation {
+  font-size: 12px;
+  padding: 2px 4px;
+  width: 102px;
+}
+/* line 427, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li header {
   -moz-opacity: 0.75;
   -webkit-opacity: 0.75;
@@ -2795,90 +2818,86 @@ body.outfits-edit #preview-outfits > ul > li header {
   bottom: 0;
   cursor: pointer;
 }
-/* line 443, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 432, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li footer, body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation {
   display: none;
-  top: 0;
 }
-/* line 447, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 435, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation {
-  background: red;
+  color: white;
+  left: 0;
+  position: absolute;
+  z-index: 2;
+  background: #ff3232;
   background: rgba(255, 50, 50, 0.75);
   text-align: center;
   top: 0;
 }
-/* line 453, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 441, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation span {
   font-weight: bold;
 }
-/* line 459, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 447, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-thumbnail {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   -o-opacity: 0.5;
   -khtml-opacity: 0.5;
-  cursor: pointer;
   display: none;
   left: -20px;
-  position: absolute;
   top: -24px;
-  z-index: 1;
 }
-/* line 468, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 453, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-star {
   bottom: 0;
   margin-right: 4px;
 }
-/* line 472, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 457, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-delete {
   float: right;
 }
-/* line 475, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 460, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-rename-button {
   float: left;
 }
-/* line 478, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 463, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-rename-button, body.outfits-edit #preview-outfits > ul > li .outfit-delete {
   font-size: 85%;
   text-decoration: none;
 }
-/* line 482, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 467, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-rename-button:hover, body.outfits-edit #preview-outfits > ul > li .outfit-delete:hover {
   text-decoration: underline;
 }
-/* line 485, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 470, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-rename-form {
   display: none;
 }
-/* line 488, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 473, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li .outfit-rename-form input {
   background: transparent;
   border: 1px solid white;
   width: 6em;
 }
-/* line 493, ../../../app/stylesheets/outfits/_edit.sass */
-body.outfits-edit #preview-outfits > ul > li a {
-  color: white;
-}
-/* line 497, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 479, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li:hover header {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 500, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 482, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li:hover .outfit-thumbnail {
   -moz-opacity: 0.75;
   -webkit-opacity: 0.75;
   -o-opacity: 0.75;
   -khtml-opacity: 0.75;
 }
-/* line 503, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 485, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li:hover footer {
   display: block;
 }
-/* line 507, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 489, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.active header {
   -moz-opacity: 1;
   -webkit-opacity: 1;
@@ -2886,66 +2905,66 @@ body.outfits-edit #preview-outfits > ul > li.active header {
   -khtml-opacity: 1;
   font-weight: bold;
 }
-/* line 511, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 493, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.active .outfit-thumbnail {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 515, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 497, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.confirming-deletion footer {
   display: none;
 }
-/* line 518, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 500, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-delete-confirmation {
   display: block;
 }
-/* line 522, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 504, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.renaming .outfit-name {
   display: none;
 }
-/* line 525, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 507, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.renaming .outfit-rename-form {
   display: inline;
 }
-/* line 529, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 511, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.thumbnail-available .outfit-thumbnail {
   display: block;
 }
-/* line 533, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 515, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits > ul > li.loading .outfit-star {
   background-image: url('/images/loading_outfit_pane.gif?1343373151');
 }
-/* line 536, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 518, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in {
   text-align: center;
   overflow-x: hidden;
 }
-/* line 540, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 522, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in img {
   border-color: #006600;
   border-style: solid;
   border-width: 1px 0;
 }
-/* line 546, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 528, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in figure {
   display: block;
   margin: 0 0 1em 0;
   padding: 0;
 }
-/* line 551, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 533, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in figcaption {
   display: block;
   font-weight: bold;
 }
-/* line 555, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 537, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in p {
   margin-left: 24px;
   margin-right: 24px;
   font-size: 85%;
 }
-/* line 559, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 541, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in #preview-outfits-log-in {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -2985,11 +3004,11 @@ body.outfits-edit #preview-outfits #preview-outfits-not-logged-in #preview-outfi
 body.outfits-edit #preview-outfits #preview-outfits-not-logged-in #preview-outfits-log-in:hover {
   background-color: #ee4b00;
 }
-/* line 563, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 545, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing {
   display: none;
 }
-/* line 566, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 548, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-urls {
   margin-left: 24px;
   margin-right: 24px;
@@ -2997,23 +3016,23 @@ body.outfits-edit #preview-sharing #preview-sharing-urls {
   margin-bottom: 1em;
   margin-top: 1em;
 }
-/* line 573, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 555, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-urls li {
   display: block;
   padding: 0.25em 0;
   width: 100%;
 }
-/* line 578, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 560, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-urls li label {
   display: block;
   font-weight: bold;
 }
-/* line 582, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 564, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-urls li input {
   display: block;
   width: 100%;
 }
-/* line 586, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 568, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-url-formats {
   margin-left: 24px;
   margin-right: 24px;
@@ -3026,7 +3045,7 @@ body.outfits-edit #preview-sharing #preview-sharing-url-formats {
   font-size: 0;
   text-align: center;
 }
-/* line 594, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 576, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-url-formats li {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3045,13 +3064,13 @@ body.outfits-edit #preview-sharing #preview-sharing-url-formats li {
 body.outfits-edit #preview-sharing #preview-sharing-url-formats li {
   *display: inline;
 }
-/* line 605, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 587, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-url-formats li.active {
   background: #eeffee;
   color: inherit;
   font-weight: bold;
 }
-/* line 610, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 592, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-url-formats li:first-child {
   -moz-border-radius-topleft: 5px;
   -webkit-border-top-left-radius: 5px;
@@ -3067,7 +3086,7 @@ body.outfits-edit #preview-sharing #preview-sharing-url-formats li:first-child {
   border-bottom-left-radius: 5px;
   border-left-width: 1px;
 }
-/* line 615, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 597, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-url-formats li:last-child {
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
@@ -3083,7 +3102,7 @@ body.outfits-edit #preview-sharing #preview-sharing-url-formats li:last-child {
   border-bottom-right-radius: 5px;
   border-right-color: #006600;
 }
-/* line 620, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 602, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper {
   border: 1px solid #aaddaa;
   display: block;
@@ -3092,7 +3111,7 @@ body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper {
   position: relative;
   width: 150px;
 }
-/* line 628, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 610, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-thumbnail-loading {
   height: 100%;
   left: 0;
@@ -3100,7 +3119,7 @@ body.outfits-edit #preview-sharing #preview-sharing-thumbnail-loading {
   top: 0;
   width: 100%;
 }
-/* line 635, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 617, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-thumbnail-loading span {
   color: #448844;
   font-size: 85%;
@@ -3110,63 +3129,63 @@ body.outfits-edit #preview-sharing #preview-sharing-thumbnail-loading span {
   top: 50%;
   width: 100%;
 }
-/* line 644, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 626, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing #preview-sharing-thumbnail, body.outfits-edit #preview-sharing #preview-sharing-thumbnail-generating {
   display: none;
 }
-/* line 648, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 630, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded #preview-sharing-thumbnail-saving {
   display: none;
 }
-/* line 651, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 633, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded #preview-sharing-urls, body.outfits-edit #preview-sharing.urls-loaded #preview-sharing-url-formats, body.outfits-edit #preview-sharing.urls-loaded #preview-sharing-thumbnail-generating {
   display: block;
 }
-/* line 655, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 637, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded.thumbnail-loaded #preview-sharing-thumbnail-loading {
   display: none;
 }
-/* line 658, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 640, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded.thumbnail-loaded #preview-sharing-thumbnail {
   display: block;
 }
-/* line 662, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 644, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded.thumbnail-available #preview-sharing-thumbnail-loading {
   -moz-opacity: 0.85;
   -webkit-opacity: 0.85;
   -o-opacity: 0.85;
   -khtml-opacity: 0.85;
 }
-/* line 665, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 647, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sharing.urls-loaded.thumbnail-available #preview-sharing-thumbnail {
   display: block;
 }
-/* line 668, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 650, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .preview-sidebar-nav {
   float: right;
   font-size: 85%;
   margin-right: 24px;
   margin-top: 1em;
 }
-/* line 680, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 662, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar #preview-sidebar-navbar-closet {
   background: white;
   border-bottom-color: white;
   font-weight: bold;
 }
-/* line 684, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 666, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-sidebar-navbar-closet, body.outfits-edit #preview-sidebar.sharing #preview-sidebar-navbar-closet {
   background: transparent;
   border-bottom: 1px solid #aaddaa;
   font-weight: normal;
 }
-/* line 687, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 669, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar.viewing-outfits #preview-sidebar-navbar-outfits, body.outfits-edit #preview-sidebar.sharing #preview-sidebar-navbar-sharing {
   background: white;
   border-bottom-color: white;
   font-weight: bold;
 }
-/* line 690, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 672, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-navbar {
   -moz-border-radius: 10px 10px 0 0;
   -webkit-border-radius: 10px 10px 0 0;
@@ -3186,7 +3205,7 @@ body.outfits-edit #preview-sidebar-navbar {
 body.outfits-edit #preview-sidebar-navbar {
   display: block;
 }
-/* line 699, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 681, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-navbar > div {
   background: transparent;
   border-bottom: 1px solid #aaddaa;
@@ -3198,11 +3217,11 @@ body.outfits-edit #preview-sidebar-navbar > div {
   text-align: center;
   width: 132px;
 }
-/* line 708, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 690, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-navbar > div:first-child {
   border-left: 0;
 }
-/* line 711, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 693, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-content {
   -moz-border-radius: 0 0 10px 10px;
   -webkit-border-radius: 0 0 10px 10px;
@@ -3215,7 +3234,7 @@ body.outfits-edit #preview-sidebar-content {
   height: 300px;
   overflow: auto;
 }
-/* line 718, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 700, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edit #outfit-not-found, body.outfits-edit #preview-sidebar-donation-request {
   margin-left: 24px;
   margin-right: 24px;
@@ -3223,7 +3242,7 @@ body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edi
   margin-top: 1em;
   text-align: center;
 }
-/* line 725, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 707, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-donation-request {
   background: #e6efc2;
   border: 1px solid #c6d880;
@@ -3231,23 +3250,23 @@ body.outfits-edit #preview-sidebar-donation-request {
   font-size: 85%;
   padding: 1em;
 }
-/* line 730, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 712, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-donation-request-no-thanks {
   margin-left: 1em;
 }
-/* line 733, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 715, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-success {
   background: #e6efc2;
   border: 1px solid #c6d880;
   color: #264409;
 }
-/* line 736, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 718, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-error, body.outfits-edit #outfit-not-found {
   background: #fbe3e4;
   border: 1px solid #fbc2c4;
   color: #8a1f11;
 }
-/* line 739, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 721, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #userbar-message {
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
@@ -3255,16 +3274,16 @@ body.outfits-edit #userbar-message {
   -khtml-opacity: 0.5;
   display: none;
 }
-/* line 743, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 725, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #new-outfit-name {
   font: inherit;
   line-height: 1;
 }
-/* line 747, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 729, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #pet-type-form, body.outfits-edit #pet-state-form, body.outfits-edit #preview-swf, body.outfits-edit #preview-search-form {
   position: relative;
 }
-/* line 750, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 732, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .control-overlay {
   height: 100%;
   left: 0;
@@ -3273,11 +3292,11 @@ body.outfits-edit .control-overlay {
   width: 100%;
   z-index: 5;
 }
-/* line 758, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 740, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-sidebar-nav-outfits, body.outfits-edit #save-outfit-signed-in {
   display: none;
 }
-/* line 761, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 743, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form {
   display: none;
   margin-right: 0;
@@ -3310,7 +3329,7 @@ body.outfits-edit form#save-outfit-form .outfit-star {
   margin-left: -24px;
   margin-right: 0;
 }
-/* line 767, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 749, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3324,46 +3343,46 @@ body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#sav
 body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button {
   *display: inline;
 }
-/* line 772, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 754, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit form#save-outfit-form .outfit-star {
   margin-top: 0.25em;
 }
-/* line 775, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 757, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit .outfit-url {
   font-size: 75%;
 }
-/* line 778, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 760, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #preview-search-form-error {
   background: #fbe3e4;
   border: 1px solid #fbc2c4;
   color: #8a1f11;
   padding: 0.25em 0.5em;
 }
-/* line 783, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 765, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #preview-sidebar-nav-outfits {
   display: block;
 }
-/* line 785, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 767, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit {
   display: inline-block;
 }
-/* line 789, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 771, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit {
   display: none;
 }
-/* line 791, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 773, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit-copy {
   display: inline-block;
 }
-/* line 799, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 781, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-form {
   display: block;
 }
-/* line 801, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 783, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-copy, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #current-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #share-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-url {
   display: none;
 }
-/* line 803, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 785, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in .preview-search-form-your-items {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -3375,39 +3394,49 @@ body.outfits-edit.user-signed-in .preview-search-form-your-items {
 body.outfits-edit.user-signed-in .preview-search-form-your-items {
   *display: inline;
 }
-/* line 805, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 787, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #preview-outfits-not-logged-in {
   display: none;
 }
-/* line 807, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 789, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-signed-in #preview-outfits-list {
   display: block;
 }
-/* line 811, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 793, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit.user-not-signed-in #save-outfit-not-signed-in {
   display: inline-block;
 }
-/* line 815, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 797, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-permalink, body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-url {
   display: inline-block;
 }
-/* line 817, ../../../app/stylesheets/outfits/_edit.sass */
+/* line 799, ../../../app/stylesheets/outfits/_edit.sass */
 body.outfits-edit #save-outfit-wrapper.shared-outfit #current-outfit-permalink {
   display: none !important;
 }
 
-/* line 4, ../../../app/stylesheets/outfits/_index.sass */
+/* line 11, ../../../app/stylesheets/outfits/_index.sass */
 body.outfits-index #outfits {
+  font-size: 0;
   list-style: none;
 }
-/* line 7, ../../../app/stylesheets/outfits/_index.sass */
-body.outfits-index #outfits li {
-  clear: left;
-  float: left;
-  margin-bottom: 0.5em;
+/* line 30, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  overflow: hidden;
+  position: relative;
+  font-size: 14px;
+}
+/* line 7, ../../../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
+body.outfits-index #outfits > li {
+  *display: inline;
 }
 /* line 4, ../../../app/stylesheets/outfits/_star.sass */
-body.outfits-index #outfits li .outfit-star {
+body.outfits-index #outfits > li .outfit-star {
   bottom: -2px;
   height: 16px;
   position: relative;
@@ -3421,62 +3450,117 @@ body.outfits-index #outfits li .outfit-star {
   margin-right: 8px;
 }
 /* line 14, ../../../app/stylesheets/outfits/_star.sass */
-body.outfits-index #outfits li.starred .outfit-star {
+body.outfits-index #outfits > li.starred .outfit-star {
   background-image: url('/images/star.png?1315327995');
 }
 /* line 16, ../../../app/stylesheets/outfits/_star.sass */
-body.outfits-index #outfits li.loading .outfit-star {
+body.outfits-index #outfits > li.loading .outfit-star {
   background-image: url('/images/loading.gif?1315327995');
 }
-/* line 13, ../../../app/stylesheets/outfits/_index.sass */
-body.outfits-index #outfits h4 {
-  float: left;
-  width: 12em;
-}
-/* line 17, ../../../app/stylesheets/outfits/_index.sass */
-body.outfits-index #outfits .outfit-edit-link, body.outfits-index #outfits form {
-  float: left;
-  font-size: 85%;
-  margin-left: 1em;
-}
-/* line 22, ../../../app/stylesheets/outfits/_index.sass */
-body.outfits-index #outfits .outfit-edit-link {
-  /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -o-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  border-radius: 5px;
-  background: #006400 url('/images/alert-overlay.png?1315327995') repeat-x;
-  border: 0;
-  display: inline-block;
-  padding: 0.5em 0.75em 0.45em;
+/* line 7, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li header, body.outfits-index #outfits > li footer {
   color: white;
+  left: 0;
+  position: absolute;
+  z-index: 2;
+  background: black;
+  background: rgba(0, 0, 0, 0.75);
+}
+/* line 11, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li header {
+  bottom: 0;
+}
+/* line 14, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li footer {
+  top: 0;
+}
+/* line 17, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li .outfit-thumbnail {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+}
+/* line 22, ../../../app/stylesheets/partials/_outfit.sass */
+body.outfits-index #outfits > li a {
+  color: white;
+}
+/* line 14, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li {
+  height: 150px;
+  margin: 2px;
+  width: 150px;
+}
+/* line 19, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li header, body.outfits-index #outfits > li footer {
+  padding: 2px 4px;
+  width: 142px;
+}
+/* line 23, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li footer {
+  display: none;
+}
+/* line 26, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li footer .outfit-edit-link {
+  float: left;
   text-decoration: none;
-  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-  position: relative;
-  font-weight: bold;
-  line-height: 1;
 }
-/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-index #outfits .outfit-edit-link:hover {
-  background-color: #005300;
+/* line 30, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li footer form {
+  float: right;
 }
-/* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-index #outfits .outfit-edit-link:hover {
-  color: white;
-}
-/* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.outfits-index #outfits .outfit-edit-link:active {
-  top: 1px;
-}
-/* line 25, ../../../app/stylesheets/outfits/_index.sass */
-body.outfits-index #outfits .outfit-delete-button {
+/* line 33, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li footer form .outfit-delete-button {
   margin: 0;
+  padding: 0;
+}
+/* line 38, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li footer .outfit-edit-link:hover, body.outfits-index #outfits > li footer .outfit-delete-button:hover {
+  text-decoration: underline;
+}
+/* line 41, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li .outfit-star {
+  cursor: auto;
+}
+/* line 44, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li .outfit-name {
+  text-decoration: none;
+}
+/* line 47, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li .outfit-name:hover {
+  text-decoration: underline;
+}
+/* line 51, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits > li:hover footer {
+  display: block;
+}
+/* line 54, ../../../app/stylesheets/outfits/_index.sass */
+body.outfits-index #outfits .outfit-delete-button {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -o-border-radius: 0;
+  -ms-border-radius: 0;
+  -khtml-border-radius: 0;
+  border-radius: 0;
+  background: transparent;
+  display: inline;
+  padding: 0;
+  color: inherit;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  text-shadow: none;
+  border-bottom: 0;
+  position: static;
+  font-weight: normal;
+  line-height: inherit;
+}
+/* line 72, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.outfits-index #outfits .outfit-delete-button:hover {
+  background: transparent;
+  color: inherit;
+}
+/* line 75, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.outfits-index #outfits .outfit-delete-button:active {
+  top: auto;
 }
 
 /* line 2, ../../../app/stylesheets/partials/_campaign-progress.sass */