/* ------------------------------------------- */
/*    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