@import "libs/bootstrap.css.less";

.years {
  list-style: none;
  .clearfix();

  li {
    float: left;
    padding: 3px 10px;
    margin-right: 5px;
    margin-bottom: 7px;
    .border-radius(4px);
    #gradient > .vertical(lighten(#617acd, 10%), #617acd);
    color: #fff;
    border: 1px solid darken(#617acd, 10%);
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
    .box-shadow(~"inset 0px 1px 0px rgba(255, 255, 255, 0.30), 0px 1px 3px rgba(0, 0, 0, 0.45)");
    cursor: pointer;

    &:hover {
      #gradient > .vertical(lighten(#617acd, 15%), #617acd);
    }

    &:active {
      #gradient > .vertical(lighten(#617acd, 10%), lighten(#617acd, 0%));
      .box-shadow(~"inset 0px -1px 0px rgba(255, 255, 255, 0.30), inset 0px 1px 5px rgba(0, 0, 0, 0.45)");
    }

    &.active {
      #gradient > .vertical(lighten(#617acd, 20%), lighten(#617acd, 10%));
      .box-shadow(~"inset 0px -1px 0px rgba(255, 255, 255, 0.30), inset 0px 1px 5px rgba(0, 0, 0, 0.45)");
    }
  }
}

.collections {
  .collection {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e4;
    color: #666666;
    text-decoration: none;
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    display: block;

    &:hover {
      background: #f3f3f3;

      .name {
        color: darken(#5e78cd, 10%);
      }
    }

    .left-c {
      .columns(8);
    }

    .right-c {
      .columns(1);
      margin-right: 0;
      width: 60px;
    }

    .name {
      font-weight: bold;
      font-size: 15px;
      font-style: normal;
      text-decoration: none;
      color: #5e78cd;     
    }

    .mix-count {
      background: #888;
      display: inline;
      float: right;
      padding: 5px 10px;
      .border-radius(20px);
      color: #fff;
    }

  }
}