ample_assets 0.0.1

data/app/assets/javascripts/ample_assets/classes/ample_assets_uploadify.js.coffee

@@ -0,0 +1,30 @@
+# **AmpleAssets** is drag and drop file management for Rails applications. 
+# 
+class window.AmpleAssetsUploadify extends CoffeeCup
+
+  init: ->
+    @log "init()"
+    @html()
+
+  html: ->
+    @log "html()"
+    csrf_token = $('meta[name=csrf-token]').attr('content')
+    csrf_param = $('meta[name=csrf-param]').attr('content')
+    auth_token = $('meta[name=auth-token]').attr('content')
+    uploadify_script_data = {}
+    uploadify_script_data[csrf_param] = encodeURIComponent(encodeURIComponent(csrf_token))
+    uploadify_script_data['auth_token'] = auth_token
+    $('#uploadify').uploadify
+      'uploader': '/assets/ample_assets/uploadify.swf'
+      'script': "#{ample_assets.mount_at}files"
+      'cancelImg': '/assets/ample_assets/cancel.png'
+      'buttonImg': '/assets/ample_assets/btn-select-files.png'
+      'height': 34
+      'scriptData': uploadify_script_data
+      'queueID': 'fileQueue'
+      'auto': true
+      'multi': true
+      'wmode': 'transparent'
+      'onAllComplete': ->
+        $('body').trigger('ample_uploadify.complete');
+

data/app/assets/javascripts/ample_assets/files.js.coffee

@@ -0,0 +1,5 @@
+$ ->
+
+  if typeof ample_assets != 'undefined'
+    new AmpleAssetsToolbar pages: ample_assets.pages unless ample_assets.load == false
+

data/app/assets/stylesheets/ample_assets.css

@@ -0,0 +1,3 @@
+/**
+ *= require ./ample_assets/application
+ */

data/app/assets/stylesheets/ample_assets/application.css

@@ -0,0 +1,8 @@
+/*
+ * 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 . 
+*/
+

data/app/assets/stylesheets/ample_assets/bourbon/css3/_border-radius.scss

@@ -0,0 +1,59 @@
+@mixin border-radius ($radii) {
+  -webkit-border-radius: $radii;
+     -moz-border-radius: $radii;
+      -ms-border-radius: $radii;
+       -o-border-radius: $radii;
+          border-radius: $radii;
+}
+
+@mixin border-top-left-radius($radii) {
+  -webkit-border-top-left-radius: $radii;
+     -moz-border-top-left-radius: $radii;
+      -ms-border-top-left-radius: $radii;
+       -o-border-top-left-radius: $radii;
+          border-top-left-radius: $radii;
+}
+
+@mixin border-top-right-radius($radii) {
+  -webkit-border-top-right-radius: $radii;
+     -moz-border-top-right-radius: $radii;
+      -ms-border-top-right-radius: $radii;
+       -o-border-top-right-radius: $radii;
+          border-top-right-radius: $radii;
+}
+
+@mixin border-bottom-left-radius($radii) {
+  -webkit-border-bottom-left-radius: $radii;
+     -moz-border-bottom-left-radius: $radii;
+      -ms-border-bottom-left-radius: $radii;
+       -o-border-bottom-left-radius: $radii;
+          border-bottom-left-radius: $radii;
+}
+
+@mixin border-bottom-right-radius($radii) {
+  -webkit-border-bottom-right-radius: $radii;
+     -moz-border-bottom-right-radius: $radii;
+      -ms-border-bottom-right-radius: $radii;
+       -o-border-bottom-right-radius: $radii;
+          border-bottom-right-radius: $radii;
+}
+
+@mixin border-top-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+  @include border-top-right-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include border-bottom-left-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-bottom-left-radius($radii);
+}

data/app/assets/stylesheets/ample_assets/bourbon/css3/_box-shadow.scss

@@ -0,0 +1,11 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadows)
+  {
+    $full: $shadows;
+
+  -webkit-box-shadow: $full;
+     -moz-box-shadow: $full;
+      -ms-box-shadow: $full;
+       -o-box-shadow: $full;
+          box-shadow: $full;
+}

data/app/assets/stylesheets/ample_assets/custom_mixins.scss

@@ -0,0 +1,47 @@
+// ------------------------------------------------------ //
+//    MATH & LAYOUT               												//
+// ------------------------------------------------------ //
+
+@function calc-em($target-px, $context) {
+  @return ($target-px / $context) * 1em;
+}
+
+@mixin clearfix {
+  &:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+// ------------------------------------------------------ //
+//    Background/Colors           												//
+// ------------------------------------------------------ //
+
+@mixin imprint {
+  background: #141414;
+  background: -moz-linear-gradient(top, #141414 0%, #070707 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#141414), color-stop(100%,#070707));
+  background: -webkit-linear-gradient(top, #141414 0%,#070707 100%);
+  background: -o-linear-gradient(top, #141414 0%,#070707 100%);
+  background: -ms-linear-gradient(top, #141414 0%,#070707 100%);
+  background: linear-gradient(top, #141414 0%,#070707 100%);
+  
+  @include box-shadow((inset rgba(0,0,0,1) 1px 2px 3px));
+  
+  border-bottom: 1px solid rgba(255,255,255,.2);
+}
+
+// ------------------------------------------------------ //
+//    Bourbon Mixins:                                     //
+//  	Taken from thoughtbot's bourbon gem,                //
+//    found here: https://github.com/thoughtbot/bourbon   //
+// ------------------------------------------------------ //
+
+  // ---- Box Shadow ------------------------------------ //
+  @import 'bourbon/css3/box-shadow';
+  
+  // ---- Border Radius --------------------------------- //
+  @import 'bourbon/css3/border-radius';

data/app/assets/stylesheets/ample_assets/facebox.css

@@ -0,0 +1,79 @@
+#facebox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  text-align: left;
+}
+
+
+#facebox .popup{
+  position:relative;
+  border:3px solid rgba(0,0,0,0);
+  -webkit-border-radius:5px;
+  -moz-border-radius:5px;
+  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);
+}
+
+#facebox .content {
+  display:table;
+  width: 370px;
+  background: #fff;
+  -webkit-border-radius:4px;
+  -moz-border-radius:4px;
+  border-radius:4px;
+}
+
+#facebox .content > p:first-child{
+  margin-top:0;
+}
+#facebox .content > p:last-child{
+  margin-bottom:0;
+}
+
+#facebox .close{
+  position:absolute;
+  top:5px;
+  right:5px;
+  padding:2px;
+  background:#fff;
+}
+#facebox .close img{
+  opacity:0.3;
+}
+#facebox .close:hover img{
+  opacity:1.0;
+}
+
+#facebox .loading {
+  text-align: center;
+}
+
+#facebox .image {
+  text-align: center;
+}
+
+#facebox 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;
+}

data/app/assets/stylesheets/ample_assets/files.css.scss

@@ -0,0 +1,750 @@
+/* ------------------------------------------- */
+/*    VARIABLES & SETUP              					 */
+/* ------------------------------------------- */
+
+/* Primary Typography configuration */
+$font-family	          : Helvetica, "Helvetica Neue", Arial, sans-serif;
+$base-font-size         : 16px;
+$text-highlight-color   : #1b6fc0;
+$text-error-color       : #c00d0d;
+
+/* Border-radius configuration */
+$border-radius          : 3px;
+
+/* Asset border configuration */
+$asset-border-color     : #999999;
+$asset-border           : 3px solid $asset-border-color;
+$asset-border-hover     : 3px solid #FFF;
+
+@import 'custom_mixins';
+
+/* ------------------------------------------- */
+/*    WEBKIT ANIMATIONS												 */
+/* ------------------------------------------- */
+
+@-webkit-keyframes pulse_target {
+ 	0% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(29,160,0, 1) 0 0 16px));
+	 }
+	 50% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(29,160,0, .5) 0 0 6px));
+	 }
+	 100% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(29,160,0, 1) 0 0 16px));
+	 }
+} // pulse animation
+
+@-webkit-keyframes pulse_success {
+  0% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(62,110,155, 1) 0 0 16px));
+	 }
+	 50% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(62,110,155, .5) 0 0 6px));
+	 }
+	 100% {
+	   @include box-shadow((inset rgba(0,0,0,.2) 0 2px 4px, rgba(62,110,155, 1) 0 0 16px));
+	 }
+}
+   
+.asset-drop-target {
+  &.asset-success {
+    color: #FFF;
+    text-shadow: rgba(0,0,0,1) 0 -1px 0;
+
+    border: 1px solid #3e6e9b;
+
+    background: #3e6e9b;
+    background: -moz-linear-gradient(top, #3e6e9b 0%, #124d87 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e6e9b), color-stop(100%,#124d87));
+    background: -webkit-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+    background: -o-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+    background: -ms-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+    background: linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+
+    -webkit-animation-name: pulse_success;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-iteration-count: infinite;
+  } //success
+  
+  &, &.asset-inactive-target {
+    border: 1px solid #3e7532;
+    background: #6ca852;
+    background: -moz-linear-gradient(top, #6ca852 0%, #3e7532 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ca852), color-stop(100%,#3e7532));
+    background: -webkit-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+    background: -o-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+    background: -ms-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+    background: linear-gradient(top, #6ca852 0%,#3e7532 100%);
+    -webkit-animation-name: pulse_target;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-iteration-count: infinite;
+  }
+}
+
+/* ------------------------------------------- */
+/*   TOP FORM ELEMENTS              					 */
+/* ------------------------------------------- */
+
+.asset-drop {
+  font-family: $font-family;  
+  font-size: $base-font-size;
+  clear: both; 
+  text-align: center;
+  .droppable {
+    width: calc-em(75px, $base-font-size);
+    height: calc-em(75px, $base-font-size);
+    margin: 0 0 calc-em(20px, $base-font-size);
+    border: 1px solid #A5A5A5;
+    
+    background: #eeeeee;
+    background: -moz-linear-gradient(top, #eeeeee 0%, #c6c6c6 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c6c6c6));
+    background: -webkit-linear-gradient(top, #eeeeee 0%,#c6c6c6 100%);
+    background: -o-linear-gradient(top, #eeeeee 0%,#c6c6c6 100%);
+    background: -ms-linear-gradient(top, #eeeeee 0%,#c6c6c6 100%);
+    background: linear-gradient(top, #eeeeee 0%,#c6c6c6 100%);
+    
+    @include border-radius(1px);
+    
+    @include box-shadow(inset rgba(0,0,0,.2) 0 2px 4px);
+    span {
+      display: block;
+      margin: calc-em(21px, 12px) 0 0 0;
+      
+      font-weight: bold;
+      color: darken(#c6c6c6, 35%);
+      font-size: calc-em(12px, $base-font-size);
+      line-height: calc-em(21px, 12px);
+      text-shadow: rgba(0,0,0,.05) 0 -1px 0, rgba(255,255,255,1) 0 1px 0;
+    } //span
+     
+     
+
+    &.asset-drop-target {
+      border: 1px solid #3e7532;
+      
+      background: #6ca852;
+      background: -moz-linear-gradient(top, #6ca852 0%, #3e7532 100%);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ca852), color-stop(100%,#3e7532));
+      background: -webkit-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+      background: -o-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+      background: -ms-linear-gradient(top, #6ca852 0%,#3e7532 100%);
+      background: linear-gradient(top, #6ca852 0%,#3e7532 100%);
+      
+      
+      -webkit-animation-name: pulse_target;
+      -webkit-animation-duration: 1s;
+      -webkit-animation-timing-function: ease-in-out;
+      -webkit-animation-iteration-count: infinite;
+      
+      span {
+        color: darken(#3e7532, 15%);
+        text-shadow: rgba(0,0,0,.05) 0 -1px 0, rgba(255,255,255,.3) 0 1px 0;
+      } //span
+      
+      &.asset-success {
+        border: 1px solid #3e6e9b;
+        
+        background: #3e6e9b;
+        background: -moz-linear-gradient(top, #3e6e9b 0%, #124d87 100%);
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e6e9b), color-stop(100%,#124d87));
+        background: -webkit-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+        background: -o-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+        background: -ms-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+        background: linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+        
+        -webkit-animation-name: pulse_success;
+        -webkit-animation-duration: 1s;
+        -webkit-animation-timing-function: ease-in-out;
+        -webkit-animation-iteration-count: infinite;
+      } //success
+      
+    } //asset-drop-target
+    
+    .draggable {
+      img {
+        border: none;
+      }
+    }
+  } //droppable
+  
+  .asset-action {
+    display: block;
+    text-indent: -9999px;
+    width: calc-em(20px, $base-font-size);
+    height: calc-em(20px, $base-font-size);
+    position: absolute;
+    margin-left: calc-em(65px, $base-font-size);
+    margin-top: calc-em(65px, $base-font-size);
+    &.asset-select {
+      margin-top: calc-em(20px, $base-font-size);
+    } //asset-select
+  } //asset-action 
+  
+  .asset-remove {
+    background: url("/assets/ample_assets/remove.png") no-repeat top left;
+    &.hide {
+      display: none;
+    } //hide
+  } //asset-remove
+  
+} //asset-drop
+
+#asset-gravity-handle {
+  background: url('/assets/ample_assets/gravity.png') no-repeat 0 0;
+  width: 50px;
+  height: 50px;
+  cursor: move;
+}
+
+.asset-selection, 
+.asset-detail {
+  font-family: $font-family;  
+  font-size: $base-font-size;
+  margin-top: 20px;
+  padding: 15px 10px 10px;
+  width: 540px;
+  div.asset-media {
+    width: 480px;
+    text-align: center;
+    padding: 20px;
+    background: #f2f2f2;
+    border: 1px solid #d4d4d4;
+  } //asset-media
+  .asset-detail {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  } //asset-details
+} //asset-detail
+
+.asset-detail {
+  font-size: $base-font-size * 0.8;
+  .asset-delete {
+    float: right;
+    margin: 10px 20px 0 0;
+    background: url('/assets/ample_assets/remove.png') no-repeat center left;
+    padding: 5px 0 5px 25px;
+    color: #91291a;
+    text-decoration: none;
+    font-weight: bold;
+  }
+  #asset-gravity-notification {
+    background: #60b84b;
+    border: 1px solid #509940;
+    color: #FFF;
+    padding: 3px 10px;
+    margin: 3px 0 5px 0;
+    width: 502px;
+    font-weight: bold;
+    text-align: center;
+    display: none;
+  }
+  hr {
+    width: 520px;
+    margin: 0 0 10px; 
+    padding: 0;
+    border: none; 
+    color: #D4D4D4;
+    background-color: #D4D4D4;
+    height: 1px;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  li {
+    color: #999;
+  }
+}
+
+.asset-selection {
+  @include clearfix;
+  min-height: 0;
+  font-size: $base-font-size * 0.8;
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  div.asset-media {
+    width: 140px;
+    min-height: 0;
+  } //asset-media
+  p {
+    text-transform: capitalize;
+    margin-top: 0;
+    span {
+      padding: 0 5px;
+      font-size: $base-font-size * 0.65;
+    }
+  } //p
+  hr.space {
+    visibility: hidden;
+    clear: both;
+  } //space
+  label {
+    font-weight: bold;
+  } //label
+  input#asset-width,
+  input#asset-alt,
+  input#asset-height {
+    padding: calc-em(5px, 13px) calc-em(5px, 13px);
+    margin: 0;
+    border: 1px solid rgba(0,0,0,.4);
+    width: calc-em(39px, 13px);
+    font-size: calc-em(12px, $base-font-size);
+    text-align: center;
+  } //asset-height, asset-width
+  input#asset-alt {
+    margin-top: 10px;
+    width: auto;
+    text-align: left;
+  }
+  .asset-media,
+  .asset-dimensions {
+    float: left;
+  } //asset-media
+  .asset-dimensions {
+    width: 285px;
+    padding: 0 20px;
+  } //asset-dimensions
+} //asset-selection
+
+textarea {
+  &.drag-notice {
+    border: 1px solid #3e7532;
+  } 
+} //textarea
+
+#pdf {
+	width: 480px;
+	height: 300px;
+  padding: 20px;
+  background: #f2f2f2;
+  border: 1px solid #d4d4d4;
+} //pdf
+
+/* ------------------------------------------- */
+/*   ASSET MANAGER                  					 */
+/* ------------------------------------------- */
+
+#ample-assets-handle {
+  font-family: $font-family;  
+  font-size: $base-font-size;
+  outline: none; 
+  padding: calc-em(10px, 13px) calc-em(20px, 13px); 
+  cursor: pointer;
+  background: #2B2B2B url('/assets/ample_assets/bg-noise.png') repeat top left; 
+  
+  color: #FFF; 
+  font-size: calc-em(13px, $base-font-size);
+  font-weight: bold; 
+  text-decoration: none;
+  text-shadow: rgba(0,0,0,1) 0 -1px 0, rgba(255,255,255,.1) 0 1px 0;
+  
+  @include border-top-left-radius(6px);
+  @include box-shadow((rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.2) 0 2px 0, inset rgba(255,255,255,.1) 2px 0 0));
+
+} //handle
+
+
+#ample-assets {
+  font-family: $font-family;  
+  font-size: $base-font-size;
+  position: fixed; 
+  left: 0; 
+  bottom: 0; 
+  width: 100%; 
+  height: 0; 
+  
+  .container {
+    width: 950px;
+    margin: 0 auto;
+  } //container
+  
+  .background {
+    clear: both;
+    background: #2b2b2b url('/assets/ample_assets/bg-noise.png') repeat top left;
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, -moz-linear-gradient(top, #2b2b2b 0%, #191919 44%, #111111 100%);
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2b2b), color-stop(44%,#191919), color-stop(100%,#111111));
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, -webkit-linear-gradient(top, #2b2b2b 0%,#191919 44%,#111111 100%);
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, -o-linear-gradient(top, #2b2b2b 0%,#191919 44%,#111111 100%);
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, -ms-linear-gradient(top, #2b2b2b 0%,#191919 44%,#111111 100%);
+    background: url('/assets/ample_assets/bg-noise.png') repeat top left, linear-gradient(top, #2b2b2b 0%,#191919 44%,#111111 100%);
+
+    @include box-shadow((rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.2) 0 2px 0, inset rgba(255,255,255,.1) 2px 0 0));
+   
+  } //background
+   
+   // ---- Ample Panels Styles ------------------------------------ //
+   
+   .collapse {
+     float: right;
+     position: relative; 
+     right: 0;
+     background: url('/assets/ample_assets/collapse.png') no-repeat center center;
+     display: block;
+     width: 12px;
+     height: 12px;
+     padding: 10px;
+     text-indent: -99999em;
+   }
+   
+   .pages {
+     width: 100%;
+     margin-top: calc-em($base-font-size, $base-font-size);
+   } //pages
+
+   .page {
+     @include clearfix; 
+     &.panels {
+       border: none;
+       @include imprint;
+
+       width: calc-em(940px,$base-font-size);
+       margin: 0 auto;
+       padding: calc-em(16px, $base-font-size) 0;
+
+       @include border-radius($border-radius);
+       
+     } //panels
+      
+     ul {
+       margin: 0;
+       padding: 0;
+     } //ul
+     
+   } //page
+
+  // ---- Pagination Controls ------------------------------------ //
+  .controls {
+    @include clearfix;
+    display: none;
+    position: absolute;
+    width: calc-em(950px, $base-font-size);
+    margin: calc-em(-70px, $base-font-size) 0 0 0;
+    .previous,
+    .next {
+      position: relative;
+      text-indent: -9999px;
+      width:15px;
+      height:27px; 
+    }
+    .previous {
+      float: left;
+      background: url('/assets/ample_assets/btn-prev.png') no-repeat top left;
+    } //previous
+    .next {
+      float: right;
+      background: url('/assets/ample_assets/btn-next.png') no-repeat top left;
+    } //next
+  } //controls
+  
+
+  
+  .ampn {
+    margin-left: calc-em(14px, $base-font-size);
+    position: relative;
+    z-index: 100;
+    .empty {
+      color: #D4D4D4;
+      font-size: 14px;
+      text-align: center;
+      padding: calc-em(36px, $base-font-size);
+      a {
+        color: #7799b8;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        } //hover
+      } //a
+    } //empty
+  } //ampn
+   
+  // ---- Search Box ------------------------------------ //    
+
+  .asset-search {
+    @include clearfix;
+    float: right;
+    margin: calc-em(10px, $base-font-size) 0 0 0;
+    width: calc-em(295px, $base-font-size);
+    
+    @include imprint;
+    
+    @include border-radius(4px);
+    
+    @include box-shadow((inset rgba(0,0,0,1) 1px 2px 3px, inset rgba(255,255,255,.15) 0 -1px 0));
+    border-top: none;
+    border-bottom: none;
+    
+    input {
+      color: #FFF;
+      
+      float: left;
+      padding: calc-em(7px, 12px) calc-em(5px, 12px) calc-em(6px, 12px);
+      margin: 0;
+      
+      background: none;
+      border: none;
+      
+      width: calc-em(210px, 12px);
+      font-size: calc-em(12px, $base-font-size);
+      
+      @include border-left-radius(4px);
+      
+    } //input
+    
+    label {
+      border-left: 1px solid #000;
+      border-bottom: 1px solid #000;
+      float: right;
+      display: block;
+      padding: 0 calc-em(14px, 13px);
+      line-height: calc-em(28px, 13px);
+      
+      font-size: calc-em(13px, $base-font-size);
+      
+      color: #FFF;
+      text-shadow: rgba(0,0,0,1) 0 -1px 0;
+      
+      background: #3e6e9b;
+      background: -moz-linear-gradient(top, #3e6e9b 0%, #124d87 100%);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e6e9b), color-stop(100%,#124d87));
+      background: -webkit-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+      background: -o-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+      background: -ms-linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+      background: linear-gradient(top, #3e6e9b 0%,#124d87 100%);
+      
+      @include border-right-radius(4px);
+      @include box-shadow((inset rgba(255,255,255,.3) 0 1px 0, inset rgba(255,255,255,.1) -1px 0 0, rgba(0,0,0,.4) -2px 0 1px));
+
+    } //label
+    
+
+      
+  } //asset-search
+
+  .container {
+    width: 950px;
+    margin: 0 auto;
+  } //container
+
+  .asset-pages {
+    width: 100%;
+  } //asset-pages
+  
+  .assets-empty {
+    display: none;
+  } //assets-empty
+  
+
+  .page {
+    @include clearfix; 
+    &.panels {
+      width: calc-em(930px,$base-font-size);
+      margin: 0 auto;
+      padding: calc-em(16px, $base-font-size) 0;
+      @include border-radius(4px);
+      border: none;
+      border-bottom: 1px solid rgba(255,255,255,.2);
+
+      background: #141414;
+      background: -moz-linear-gradient(top, #141414 0%, #070707 100%);
+      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#141414), color-stop(100%,#070707));
+      background: -webkit-linear-gradient(top, #141414 0%,#070707 100%);
+      background: -o-linear-gradient(top, #141414 0%,#070707 100%);
+      background: -ms-linear-gradient(top, #141414 0%,#070707 100%);
+      background: linear-gradient(top, #141414 0%,#070707 100%);
+      @include box-shadow((inset rgba(0,0,0,1) 1px 2px 3px));
+    } //panels
+    ul {
+      display: none;
+      margin: 0;
+      padding: 0;
+    } //ul
+  } //page
+
+  .tabs {
+    @include clearfix; 
+    padding-top: 2px;
+    text-shadow: rgba(0,0,0,1) 0 -1px 0, rgba(255,255,255,.1) 0 1px 0;
+    font-weight: bold;
+    padding: 0 calc-em(11px, $base-font-size);
+    span.asset-loading {
+      display: none; 
+      float: left;
+      background: url('/assets/ample_assets/loading.gif') no-repeat center center;
+      width: calc-em(20px, 13px); 
+      height: calc-em(20px, 13px); 
+      margin: calc-em(10px, 13px) 0 0 calc-em(10px, 13px);
+    } //asset-loading
+    .asset-results {
+      display: none;
+    } //asset-results
+  } //tabs
+
+  a.assets-reload,
+  a.tab {
+    float: left; 
+    display: block;
+    outline: none; 
+    margin: calc-em(10px, 13px) 0 0 calc-em(10px, 13px); 
+    padding: 0 calc-em(14px, 13px);
+    border: 1px solid #000;
+    
+    color: #FFF;
+    font-size: calc-em(13px, $base-font-size);
+    line-height: calc-em(26px, 13px);
+    text-decoration: none; 
+    text-shadow: rgba(0,0,0,1) 0 1px 0;
+    
+    @include border-radius($border-radius);
+    
+    background: #333333;
+    background: -moz-linear-gradient(top, #333333 0%, #1c1c1c 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#1c1c1c));
+    background: -webkit-linear-gradient(top, #333333 0%,#1c1c1c 100%);
+    background: -o-linear-gradient(top, #333333 0%,#1c1c1c 100%);
+    background: -ms-linear-gradient(top, #333333 0%,#1c1c1c 100%);
+    background: linear-gradient(top, #333333 0%,#1c1c1c 100%);
+    
+    @include box-shadow((inset rgba(255,255,255,.1) 0 1px 0, inset rgba(255,255,255,.1) -1px 0 0, inset rgba(255,255,255,.1) 1px 0 0, rgba(0,0,0,.6) 0 1px 2px));
+    
+    &.on, &:active {
+      color: #E5E5E5;
+      line-height: calc-em(27px, 13px);
+      text-shadow: rgba(0,0,0,1) 0 -1px 0;
+      border: none;
+      
+      @include imprint;
+        
+    } //on
+    
+  } //tab, assets-reload
+  
+  a.assets-reload {
+    margin-left: 0;
+    span {
+      display: block;
+      background: url('/assets/ample_assets/reload.png') no-repeat center center;
+      width: 16px;
+      height: 20px;
+      padding: 3px 0;
+    } //span
+  } //assets-reload
+  
+  li {
+    display: block;
+    float: left;
+    
+    &.file a {
+      display: block;
+      background: url('/assets/ample_assets/loading.gif') no-repeat center center;
+      width: calc-em(75px, $base-font-size);
+      height: calc-em(75px, $base-font-size);
+      border: $asset-border;
+      background: #111111;
+      
+      @include border-radius($border-radius);
+      @include box-shadow(rgba(0,0,0,1) 0 2px 3px);
+      opacity: 1;
+
+      -webkit-transition: .3s linear border;
+      -moz-transition: .3s linear border;
+      transition: .3s linear border;
+
+      &:hover {
+       border: $asset-border-hover; 
+       cursor: move; 
+      }
+      img {
+        border: none;
+      }
+    } //file a
+     
+  } //li
+   
+  // ---- Uploadify Styling ------------------------------------ //
+  
+  #upload {
+    padding: 0 calc-em(11px, $base-font-size);
+     p {
+       float: left;
+       width: calc-em(113px, $base-font-size);
+     }
+     .uploadifyQueue {
+       float: left;
+       width: calc-em(780px, $base-font-size);
+       max-height: calc-em(100px, $base-font-size);
+       @include clearfix;
+       overflow-y: scroll;
+
+       .uploadifyQueueItem {
+         float: left;
+         width: calc-em(350px, 11px);
+         margin: calc-em(10px, 11px) calc-em(10px, 11px) 0 0;
+         padding: calc-em(10px, 11px);
+
+         background: rgba(0,0,0,.2);
+         border: 1px solid #000;
+
+         @include border-radius($border-radius);
+
+         font-weight: bold;
+         font-size: calc-em(11px, $base-font-size);
+         text-shadow: rgba(0,0,0,1) 0 -1px 0, rgba(255,255,255,.1) 0 1px 0;
+         text-transform: uppercase;
+
+         .cancel {
+           float: right;
+         } //cancel icon
+
+         .fileName {
+           color: #FFF;
+         } //fileName
+
+         .percentage {
+           color: $text-highlight-color;
+         } //percentage
+
+
+         .uploadifyProgress,
+         .uploadifyError {
+
+          @include imprint;
+
+           border: 1px solid #000;
+           border-bottom: 1px solid rgba(255,255,255,.2);       
+           width: 100%;
+           padding: calc-em(3px, 11px);
+           margin-top: calc-em(10px, 11px);
+
+           @include border-radius($border-radius);
+           @include box-shadow((inset rgba(0,0,0,1) 1px 2px 3px));
+
+           .uploadifyProgressBar {
+           	height: calc-em(5px, 11px);
+           	width: 1px;
+             background-color: #0099FF;
+
+             color: $text-highlight-color;
+
+           	@include border-right-radius(12px);
+           } //progressBar
+
+         } //progressbarContainer
+
+         &.uploadifyError {
+           .percentage {
+             color: $text-error-color;
+           } //percentage
+         } //uploadifyError
+       } //uploadifyQueueItem
+
+     } //uploadifyQueue
+      
+   } //upload
+  
+} //ample-assets