.courses {
  @include box-sizing(border-box);
  @include clearfix;
  margin: 40px 0px;
  padding: 0px 10px;
  width: flex-grid(12);

  .course {
    background: rgb(240,240,240);
    border: 1px solid rgb(220,220,220);
    @include border-radius(4px);
    @include box-sizing(border-box);
    float: left;
    font-size: 0em;
    min-height: 100px;
    margin-bottom: 25px;
    padding: 10px;
    width: flex-grid(6);
    @include transition(all, 0.15s, linear);

    @media only screen and (max-width: 768px) {
      float: none;
      margin-right: 0px;
      width: flex-grid(12);
    }

    &:nth-child(odd) {
      margin-right: flex-gutter();
    }

    &:last-child {
      margin-bottom: none;
    }

    > a {
      @include clearfix;
      display: block;
      position: relative;
    }

    .cover {
      background: rgb(225,225,225);
      border: 1px solid rgb(150,150,150);
      @include border-radius(4px);
      @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
      float: left;
      height: 100px;
      margin: 0px;
      opacity: 0.8;
      overflow: hidden;
      position: relative;
      @include transition(all, 0.15s, linear);
      width: 100px;

      @media only screen and (max-width: 320px) {
        display: none;
      }

      .shade {
        background: rgba(0,0,0, 0.3);
        @include border-radius(4px);
        bottom: 0px;
        content: "";
        display: block;
        left: 0px;
        opacity: 0;
        position: absolute;
        top: 0px;
        @include transition(all, 0.15s, linear);
        right: 0px;
      }

      .arrow {
        border-top: 1px solid;
        border-left: 1px solid;
        border-color: rgb(255,255,255);
        @include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
        content: "";
        display: block;
        height: 55px;
        left: 40px;
        opacity: 0;
        position: absolute;
        top: 23px;
        @include transform(rotate(-45deg));
        @include transition(all, 0.15s, linear);
        width: 55px;
      }

      img {
        @include border-radius(4px);
        display: block;
        min-height: 100%;
        min-width: 100%;
        width: 100%;
      }
    }

    .info {
      margin-left: 115px;

      @media only screen and (max-width: 320px) {
        margin: 0px;
      }

      > hgroup {
        margin-right: 80px;

        @media only screen and (max-width: 320px) {
          margin: 0px;
        }

        h2 {
          font: bold 1.8rem/2.5rem $sans-serif;
          margin-bottom: 2px;
          overflow: hidden;
          text-shadow: 0 1px rgba(255,255,255, 0.6);
          @include transition(color, 0.15s, linear);
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        p {
          color: $base-font-color;
          font: normal 1rem/1.6rem $sans-serif;
          overflow: hidden;
          text-shadow: 0 1px rgba(255,255,255, 0.6);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .edit, .register {
        border: 1px solid rgb(220,220,220);
        background: rgb(230,230,230);
        color: $lighter-base-font-color;
        display: block;
        font: normal 12px/14px $sans-serif;
        padding: 6px 10px;
        position: absolute;
        right: 0px;
        top: 0px;
        @include transition(all, 0.15s, linear);

        @media only screen and (max-width: 320px) {
          display: none;
        }

        &:hover {
          background: rgb(255,255,255);
          color: $blue;
        }
      }

      .meta {
        border-top: 1px solid rgb(200,200,200);
        @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
        font-size: 1rem;
        height: 34px;
        margin-top: 10px;
        opacity: 0.9;
        position: relative;
        @include transition(opacity, 0.15s, linear);
        width: 100%;

        &:hover {
          opacity: 0.9;
        }

        > * {
          height: 18px;
          position: absolute;
          top: 15px;
        }

        p + p {
          margin-top: 0px;
        }

        .complete {
          left: 0px;

          p {
            font: normal 1rem/1.6rem $serif;

            span {
              color: $base-font-color;
              font-family: $sans-serif;
              margin-left: 3px;
            }
          }
        }

        .dates {
          p {
            color: $lighter-base-font-color;
            font: normal 1rem/1.6rem $serif;
            @include inline-block;
            text-align: right;

            &:first-child {
              border-right: 1px solid rgb(200,200,200);
              margin-right: 10px;
              padding-right: 10px;
            }

            time {
              color: $base-font-color;
              font-family: $sans-serif;
              margin-left: 3px;
            }
          }
        }

        .end-date {
          border-left: 1px solid rgb(200,200,200);
          right: 0px;
          padding-left: 15px;

          @media only screen and (max-width: 320px) {
            display: none;
          }

          p {
            color: $lighter-base-font-color;
            font: normal 1rem/1.6rem $serif;
            text-align: right;

            time {
              color: $base-font-color;
              font-family: $sans-serif;
              margin-left: 3px;
            }
          }
        }

        .progress {
          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
          left: 90px;
          right: 140px;

          @media only screen and (max-width: 320px) {
            right: 0px;
          }

          .meter {
            background: rgb(230,230,230);
            border: 1px solid rgb(200,200,200);
            @include border-radius(3px);
            @include box-sizing(border-box);
            height: 100%;
            padding: 2px;

            .meter-fill {
              @include border-radius(3px);
              background: rgb(210,210,210);
              height: 100%;
              width: 60%;
            }
          }
        }
      }
    }

    &:hover {
      background: rgb(245,245,245);
      @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
      cursor: pointer;

      .edit {
        background: rgb(220,220,220);
        border-color: rgb(190,190,190);
      }

      .cover {
        opacity: 1;

        .shade, .arrow {
          opacity: 1;
        }
      }

      h2 {
        //color: $blue;
        //text-decoration: underline;
      }

      .meta {
        opacity: 0.9;
      }
    }
  }
}
