.gray {
    color: #888;
    a {
        color: #888;
    }
    a:hover {
        color: #555;
    }
}

.blank {
    background-color: #fff;
}

.highlight {
    background-color: #eee;
}

.col3 {

    #forumrules ul, ol {
        margin: 5px 10px;
    }
    #forumrules ul li {
        list-style-type: disc;
        margin-left: 0.5em;
        margin-bottom: 1em;
    }
    #forumrules ol li {
        list-style-type: decimal;
        margin-left: 1em;
        margin-bottom: 0.5em;
        padding-bottom: 0;
    }

    /* Community landing more and less buttons */
    .morelessbuttons {
        display: inline;
        float: left;
        padding: 0.7em 0.7em 1.3em 0;
    }
}

.groupul{
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

.postbox {
    border: 1px solid #fff;
}

.postleftcolumn {
    background-color: #ddd;
    border-right: #bbb;
}

.credentials{
    background-color: #ccc;
}

.middle{
    vertical-align: middle !important;
    align-self: center !important;
    text-align: center;
}

.l-forum-single-post {
  display: grid;
  grid-template-areas:
      "user_info post_info"
      "content content"
      "edit edit"
      "report permalink"
      "moderate admin_edit"
;
  grid-template-columns: 150px 1fr;
  margin-bottom: 8px;
  border: 1px solid #fff;
  background-color: #ddd;
}

.l-search-post {
  display: grid;
  grid-template-areas:
      "user_info post_info"
      "content content"
      "permalink thread_info"
      "moderate admin_edit"
  ;
  grid-template-columns: 150px 1fr;
  margin-bottom: 8px;
  border: 1px solid #fff;
  background-color: #ddd;
}

.l-forum-single-post img,
.l-search-post img {
  max-width: 100%;
}

.c-single-post-post_info,
.c-search-post_info {
  grid-area: post_info;
  background-color: white;
  padding: 4px;
}

.c-search-thread_info {
  grid-area: thread_info;
  background-color: white;
  padding: 4px;
}

.c-single-post-content,
.c-search-content {
  grid-area: content;
  background-color: white;
  padding: 4px;
  word-break: break-word;
}

/**
 Components to structure the forum results grid
 */
.c-single-post-user_info,
.c-search-user_info {
  grid-area: user_info;
  background-color: #ccc;
  padding: 4px;
}

.c-single-post-post_info,
.c-search-post_info{
  grid-area: post_info;
  background-color: #ccc;
  padding: 4px;
}

.c-single-post-moderate,
.c-search-moderate {
  grid-area: moderate;
  padding: 4px;
}

.c-single-post-moderate:empty {
  padding: 0;
}

.c-single-post-admin_edit,
.c-search-admin_edit {
  grid-area: admin_edit;
  padding: 4px;
}

.c-single-post-admin_edit:empty,
.c-search-admin_edit:empty {
  padding: 0;
  height: 0;
}

.c-single-post-permalink,
.c-search-permalink {
  background-color: white;
  grid-area: permalink;
  padding: 4px;
}

.c-single-post-report,
.c-search-report {
  background-color: white;
  grid-area: report;
  align-self: center;
  padding: 4px;
}

.c-single-post-edit {
  grid-area: edit;
  background-color: white;
  padding: 4px;
}

.c-single-post-edit:empty {
  padding: 0;
  height: 0;
}

/**
 * Color changes for alternating posts
 */
.l-forum-single-post--dark > .c-single-post-report,
.l-forum-single-post--dark > .c-single-post-permalink,
.l-forum-single-post--dark > .c-single-post-edit,
.l-forum-single-post--dark > .c-single-post-content,
.l-search-post--dark > .c-search-report,
.l-search-post--dark > .c-search-permalink,
.l-search-post--dark > .c-search-edit,
.l-search-post--dark > .c-search-thread_info,
.l-search-post--dark > .c-search-content {
  background-color: #eee;
}

.l-search-post--dark > .c-search-user_info,
.l-search-post--dark > .c-search-post_info {
  background-color: #bbb;
}

@media (min-width: 768px) {
  .l-forum-single-post {
    display: grid;
    grid-template-areas:
        "user_info post_info"
        "user_info content"
        "report content"
        "permalink content"
        "edit content"
        "moderate content"
        "admin_edit content";
    grid-template-columns: 150px 1fr;
    grid-template-rows: min-content min-content min-content min-content min-content 1fr;
  }

  .l-search-post {
    display: grid;
    grid-template-areas:
        "user_info post_info"
        "user_info content"
        "permalink content"
        "permalink thread_info";
    grid-template-columns: 150px 1fr;
    grid-template-rows: min-content max-content 1fr;
  }

  .c-single-post-post_info,
  .c-search-post_info,
  .c-search-thread_info {
    background-color: white;
  }

  .c-single-post-report,
  .c-single-post-permalink,
  .c-single-post-edit,
  .c-search-permalink {
    background-color: #ddd;
  }

  .l-search-post--dark > .c-search-post_info,
  .l-search-post--dark > .c-search-post-content,
  .l-search-post--dark > .c-search-post-thread_info {
    background-color: green;
  }

  .l-search-post--dark > .c-search-post_info {
    background-color: #eee;
  }

  .l-forum-single-post--dark > .c-single-post-post_info,
  .l-forum-single-post--dark > .c-single-post-content {
    background-color: #eee;
  }


  .l-forum-single-post--dark > .c-single-post-permalink,
  .l-forum-single-post--dark > .c-single-post-moderate,
  .l-forum-single-post--dark > .c-single-post-admin_edit,
  .l-forum-single-post--dark > .c-single-post-edit,
  .l-search-post--dark > .c-search-permalink {
    background-color: #ddd;
  }

  .l-forum-single-post--dark > .c-single-post-report {
    background-color: #ddd;
  }
}
