changed design

app/assets/javascripts/facebox.js

@@ -84,8 +84,8 @@
     settings: {
       opacity      : 0.2,
       overlay      : true,
-      loadingImage : '/images/loading.gif',
-      closeImage   : '/images/closelabel.png',
+      loadingImage : '/assets/loading.gif',
+      closeImage   : '/assets/closelabel.png',
       imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
       faceboxHtml  : '\
     <div id="facebox" style="display:none;"> \

app/assets/stylesheets/application.css

@@ -1,7 +1,5 @@
 /*
- * This is a manifest file that'll automatically include all the stylesheets available in this directory
- * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
- * the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require_self
- *= require_tree . 
+ *= require reset
+ *= require layout
+ *= require facebox
 */

app/assets/stylesheets/facebox.css.sass

@@ -0,0 +1,82 @@
+@import mixins.css.sass
+
+#facebox
+  position: absolute
+  top: 0
+  left: 0
+  z-index: 100
+  text-align: left
+  .popup
+    position: relative
+    border: 3px solid rgba(0, 0, 0, 0)
+    +border_radius(5px)
+    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4)
+    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4)
+    box-shadow: 0 0 18px rgba(0, 0, 0, 0.4)    
+    width: 500px
+  .content
+    display: table
+    padding: 25px
+    background: #222
+    -webkit-border-radius: 4px
+    -moz-border-radius: 4px
+    border-radius: 4px
+    width: 450px
+    color: #d3d3c7
+    > p
+      font-size: 14px
+      margin: 26px 0
+      line-height: 1.7
+      &:first-child
+        margin-top: 0
+      &:last-child
+        margin-bottom: 0
+    h1
+      margin: 0 0 10px 0
+      font-size: 24px
+    h2
+      margin: 0 0 20px 0
+      font-size: 18px
+    ul,ol
+      list-style-position: outside
+      margin: 0 0 20px 20px
+    li
+      line-height: 1.6
+      margin: 0 0 8px 0
+    ul
+      list-style-type: disc
+    ol
+      list-style-type: decimal
+  .close
+    position: absolute
+    top: 5px
+    right: 5px
+    padding: 8px
+    +border_radius(8px)
+    background: #999
+    width: 8px
+    height: 8px
+    img
+      opacity: 0.3
+      float: left
+    &:hover img
+      opacity: 1.0
+  .loading, .image
+    text-align: center
+  img
+    border: 0
+    margin: 0
+
+#facebox_overlay
+  position: fixed
+  top: 0px
+  left: 0px
+  height: 100%
+  width: 100%
+
+.facebox_hide
+  z-index: -100
+
+.facebox_overlayBG
+  background-color: #000
+  z-index: 99