//= require ./vendor/normalize
//= require ./common/foundation/base

@import "./common/foundation/variables";
@import "./common/foundation/colors";
@import "./common/base/onebox";

article.post {
  border-bottom: 1px solid #ddd;

  &.deleted {
    background-color: #ffe5e5;
  }

  .quote .title {
    border-left: 5px solid scale-color($primary, $lightness: 90%);
    background-color: lighten($primary, 76%);
    padding: 10px 10px 0 12px;
    .avatar { margin-right: 7px; }
  }

  ol, ul {
    clear: none;
  }

  blockquote {
    padding: 10px 8px 10px 13px;
    margin: 0 0 10px 0;
    background-color: scale-color($primary, $lightness: 95%);
    border-left: 5px solid scale-color($primary, $lightness: 90%);
    p {
      margin: 0 0 10px 0;
    }
  }

  .post-date {
    float: right;
    color: #aaa;
    font-size: 12px;
    margin: 10px 4px 0 0;
  }

  .author {
    padding: 10px 5px;
    float: left;
    text-align: center;

    img {
      max-width: 45px;
    }
  }

  h3.username {
    font-size: 13px;
    margin: 0 0 10px 0;
    word-wrap: break-word;

    a {
      color: #5c5c5c
    }
    a.staff {
      background-color: #ffffc2;
    }

    a.new-user {
      color: lighten($primary, 35%);
    }

    span.title {
      font-weight: normal;
      color: #999;
    }
  }

  .cooked {
    padding: 10px 0 20px 0;
    margin-left: 65px;
    word-wrap: break-word;

    img {
      max-width:100%;
    }
    p {
      margin: 0 0 1em 0;
    }
  }
}

img.emoji {
  width: 20px;
  height: 20px;
}

.post-replies {
  background-color: #eee;
  padding: 5px;
  display: inline-block;
}

.in-reply-to {
  font-size: 13px;
  width: 200px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 6px;
  display: inline-block;
  float: right;
  color: #0088cc;
}

.replies {
  font-size: 15px;
  color: #999;
}

header.embedded {
  padding: 10px 10px 20px 10px;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
}

footer {
  font-size: 18px;

  .logo {
    margin-right: 10px;
    margin-top: 10px;
  }

  a[href].button {
    margin: 10px 0 0 10px;
  }
}

.logo {
  float: right;
  max-height: 30px;
}

a[href].button {
  background-color: #eee;
  padding: 5px;
  display: inline-block;
}