@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "locomotive/shared/helpers";

ul.content-assets {

  list-style: none;
  margin: 0px;
  padding: 0px;

  li.asset {
    position: relative;
    float: left;
    width: 139px;
    height: 170px;
    clear: none;

    margin: 0 10px 10px 0;

    border: 1px solid #ccced7;

    @include border-radius(8px);
    @include box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 0px 0px);
    background: #ebedf4;

    &.last {
      margin-right: 0px;
    }

    h4 {
      margin: 0px;

      line-height: 30px;

      text-align: left;

      @include border-top-radius(8px);
      @include background-image(linear-gradient(#ebedf4, #d7dbe7));
      border-bottom: 1px solid #ccced7;

      a {
        @include hover-link;

        margin-left: 5px;
        outline: none;

        font-size: 11px;
        color: #1f82bc;
        font-weight: bold;
      }
    }

    .icon, .image {
      width: 85px;
      height: 85px;
      border: 4px solid #fff;
      margin: 20px 0 0px 22px;
      cursor: pointer;

      @include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 5px 1px);
    }

    .image {
      background: transparent image-url("locomotive/list/empty.png") repeat 0 0;

      .inside {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 85px;
        height: 90px;
      }
    } // .image

    .icon {

      .inside {
        position: relative;
        top: 30px;
        width: 85px;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);

        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        @include single-text-shadow(rgba(0, 0, 0, 0.3), 1px, 1px, 1px);
      }

      &.pdf {
        background: #e82f2d;
        @include background-image(linear-gradient(left top, #fc4e42, #b9101d));
      }

      &.media {
        background: #6e489c;
        @include background-image(linear-gradient(left top, #ba89d1, #4f317d));
      }

      &.other {
        background: #4a4a50;
        @include background-image(linear-gradient(left top, #92939a, #28282b));
      }
    } // .icon

    .actions {
      position: absolute;
      bottom: 17px;
      right: 17px;

      a {
        display: block;
        width: 16px;
        height: 16px;

        background: transparent image-url("locomotive/list/icons/trash_off.png") repeat 0 0;

        text-indent: -9999px;

        &:hover{
          background-image: image-url("locomotive/list/icons/trash.png");
        }
      }
    }

  } // li.asset

}