@import "common";
@import "../compass/css3/inline-block";
@import "../compass/css3/border-radius";

.resource {
  .sidebar {
    .fa {
      color: $silver;
      margin-right: rem-calc(5);
    }

    h3, h4 {
      color: adjust-lightness($primary_gray, 10%);
      font: {
        size: rem-calc(12);
        weight: $bold;
      }
      text-transform: uppercase;

      small {
        color: adjust-lightness($primary_gray, 20%);
        display: block;
        font: $normal rem-calc(12) $default_font;
        margin: rem-calc(5 0 0 20);
        text-transform: none;
      }
    }

    h3 {
      border-bottom: rem-calc(2) solid $clouds;
      margin-bottom: rem-calc(30);
      padding-bottom: rem-calc(10);
    }

    h4 {
      border-bottom: none;
      margin: rem-calc(10 0 0 0);
    }

    p {
      color: adjust-lightness($primary_gray, 20%);
      font: $normal rem-calc(12) $default_font;
      margin: rem-calc(0 0 24 20);
    }

    .gravatar {
      height: rem-calc(72);
      margin: rem-calc(0 15 15 0);
      width: rem-calc(72);
    }

    .collaborators_avatar {
      margin-bottom: rem-calc(20);

      ul li {
        list-style-type: none;
        margin-bottom: 0;
      }

      .gravatar-container {
        @include inline-block;
      }

      .f-dropdown {
        margin: rem-calc(15 0 0 -5);
      }

      .gravatar {
        @include border-radius(rem-calc(40));
        height: rem-calc(40);
        width: rem-calc(40);
      }
    }

    .button {
      margin-bottom: rem-calc(30);
    }

    @media #{$medium-down} {
      .button {
        display: block;
        margin: rem-calc(10 0 0 0);
        width: 100%;

        &:last-of-type {
          margin-bottom: rem-calc(30);
        }
      }
    }

    .owner_avatar {
      @include clearfix;
      font: {
        size: rem-calc(18);
        weight: $bold;
      }

      .gravatar {
        float: left;
        margin-top: rem-calc(-15);
      }

      small {
        display: block;
        font: {
          size: rem-calc(14);
          weight: $normal;
        }
        margin-top: rem-calc(5);
      }
    }

    .owner_tool {
      @include clearfix;
      margin-top: rem-calc(12);
      font: {
        size: rem-calc(18);
        weight: $bold;
      }

      .gravatar {
        float: left;
        margin-top: rem-calc(0);
        width: rem-calc(50);
        height: rem-calc(50);
      }

      small {
        display: block;
        font: {
          size: rem-calc(14);
          weight: $normal;
        }
        margin-top: rem-calc(5);
      }
    }
  }

  .heading {
    border: none;
    font-size: rem-calc(30);
    margin-bottom: rem-calc(15);
    position: relative;
    z-index: 1;

    @media #{$small-down} {
      small {
        display: block;
        float: none;
        margin: rem-calc(5 0 5 0);
      }
    }

    @media #{$small-down} {
      .button {
        width: 100%;
      }
    }
  }

  @media #{$mobile-only} {
    .heading {
      margin-bottom: rem-calc(25);
    }
  }

  @media #{$small-only} {
    .heading {
      margin-bottom: rem-calc(15);
    }
  }

  pre.install {
    margin-bottom: rem-calc(30);
  }
}
