/*** Variables ***/

$comment-margin-left: 30px;
$discussion-title-size: 1.6em;
$comment-title-size: 1.0em;
$post-font-size: 0.9em;
$comment-info-size: 0.75em;
$comment-font-size: 0.8em;
$discussion-input-width: 100%;

$tag-background-color: #e7ecdd;
$tag-border-color: #babdb3;
$tag-text-color: #5b614f;



/*** Mixins ***/

@mixin discussion-font {
  font-family: inherit;
}

@mixin discussion-clickable {
  color: black;
  &:hover {
    text-decoration: none;
  }
}

@mixin standard-discussion-link {
  text-decoration: none;
  &:hover {
    color: #1C71DD;
    text-decoration: none;
  }
}

.discussion-loading {
  background-image: url(../images/discussion/loading.gif);
  width: 15px;
  height: 15px;
  margin-left: 2px;
  display: inline-block;
}

/*** Discussions ***/

.discussion {

  #open_close_accordion {
    display: none;
  }

  p + p, ul + p, ol + p {
    margin-top: 0;
  }

  /*** Sidebar ***/

  .sidebar-module {    
    @include clearfix;
    padding: 0 26px 24px;
    margin-bottom: 24px;    
    border-bottom: 1px solid #d3d3d3;
    font-size: 13px;

    header {
      margin-bottom: 14px;
      @include clearfix;
    }

    h4 {
      float: left;
      font-size: 15px;
      font-weight: bold;
    }

    .sidebar-new-post-button, .sidebar-promote-moderator-button {
      @include button;
    }

    .sidebar-revoke-moderator-button {
      @include button(simple, gray);
    }

    .sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button {
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin: 20px 0;
      padding: 11px;
      font-size: 1.1em;
      text-align: center;

      &:hover {
        text-decoration: none;
      }
    }

    .sidebar-new-post-button {
      margin: 40px 0 20px 0;
    }

    .sidebar-view-all {
      float: right;
      font-size: 13px;
      line-height: 1.6em;
      @include standard-discussion-link;
    }

    .discussion-sidebar-following-list {
      li {
        @include clearfix;
        margin-bottom: 8px;
        border: none;
      }

      a {        
        @include standard-discussion-link;
        background: none;

        span {
          line-height: 1.3;
        }
      }
    }

    .discussion-sidebar-tags-list li {
      @include clearfix;
      border-bottom: none;
    }

    .sidebar-tag-count {
      color: #9a9a9a;
      font-size: .85em;
      line-height: 3em;
    }

    .sidebar-following-name {
      float: left;
      width: 80%;
    }

    .sidebar-vote-count {
      float: right;
      width: 20%;
      text-align: right;
      color: #9a9a9a;
    }

//user profile

    .user-profile {
      @extend .sidebar;
       margin-top: 24px;
     }

    .sidebar-username {
      font-size: 1.5em;
      font-weight: bold;
      line-height: 1.5em;
      margin-top: 20px;
    }

    .sidebar-user-roles {
      color: darkGray;
      font-style: italic;
      margin-bottom: 15px;
    }

    .sidebar-threads-count, .sidebar-comments-count {
      
      span {
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.5em;
        margin-right: 10px;
      }
    }
  }

  .discussion-non-content {
    margin-left: flex-gutter();
  }

  /*** Post ***/

  .discussion-title {
    @include discussion-font;
    @include discussion-clickable;
    display: inline-block;
    font-size: $discussion-title-size;
    font-weight: bold;
    margin-bottom: flex-gutter(6);
  }

  .discussion-title-wrapper {
    .discussion-watch-discussion, .discussion-unwatch-discussion {
      @include discussion-font;
      display: none;
      font-size: $comment-info-size;
      margin-left: 5px;
    }
  }

  .discussion-right-wrapper {
    min-height: 40px;
    margin: 24px 0 24px 68px;
  }

  .admin-actions {
    float: right;
    margin: 0.4em 1em 0 2em;
    padding: 0;

    li {
      margin-bottom: 6px !important;
    }

    a {
      display: block;      
      height: 25px;
      padding-left: 25px;
      border-radius: 50%;
      background: url(../images/admin-actions-sprite.png) no-repeat;
      font-size: .8em;      
      line-height: 25px;
      color: #b8b8b8;
      @include transition(color, .1s);

      &:hover {
        text-decoration: none;
      }

      &.admin-endorse {
        background-position: 0 0;        

        &:hover {
          color: #63b141;
          background-position: 0 -75px;
        }
      }

      &.admin-edit {
        background-position: 0 -25px;

        &:hover {
          color: #009fe2;
          background-position: 0 -100px;
        }
      }

      &.admin-delete {
        background-position: 0 -50px;

        &:hover {
          color: #d45050;
           background-position: 0 -125px;
        }
      }
    }
  }

  .comments {
    .admin-actions {
      margin-top: 0;

      li {
        margin-bottom: 2px !important;
      }

      a {
        width: 20px;
        height: 20px;
        padding-left: 0;
        overflow: hidden;
        text-indent: -9999px;

        &.admin-endorse {
          background-position: 0 -150px;

          &:hover {
            background-position: 0 -225px;
          }
        }

        &.admin-edit {
          background-position: 0 -175px;

          &:hover {
            background-position: 0 -250px;
          }
        }

        &.admin-delete {
          background-position: 0 -200px;

          &:hover {
            background-position: 0 -275px;
          }
        }
      }
    }
  }




  /*** thread ***/
  
  .thread {
    //display: none;

    .search-highlight {
      display: inline;
      font-weight: bold;
      background-color: lightyellow;
    }

    .thread-title {
      @include discussion-font;
      @include discussion-clickable;
      display: block;
      margin-bottom: 1em;
      font-size: $comment-title-size;
      font-weight: bold;
      line-height: 1.4em;
    }

    .thread-body, .content-body {
      @include discussion-font;
      font-size: $post-font-size;
      margin-bottom: 4px;
      margin-top: 3px;

      p {
        @include discussion-font;
      }
    }

    .thread-tags {
      display: inline-block;
    }

    .info {
      @include discussion-font;
      color: gray;
      font-size: $comment-info-size;
      font-style: italic;
      margin-top: 1em;

      a:hover {
        text-decoration: none;
        color: #1C71DD;
      }

      .comment-time {
        display: inline;
        float: right;
        margin-right: 1em;
      }

      .show-comments-wrapper {        
        display: inline;
        margin-right: 20px;
      }

      .discussion-actions {        
        display: inline;
        margin: 0;
        padding: 0;

        li {
          display: inline;
          margin-right: 20px;
        }
      }

      .discussion-link {
        @include discussion-font;
        color: #1d9dd9;
        display: inline;

        &.discussion-unfollow-thread {
          color: #dea03e;
        }
      }
    }

    .discussion-content {
      border-top: lightgray 1px solid;
      overflow: hidden;
      // padding: 1.5% 0;

      .discussion-reply-new {
        @include discussion-font;
        margin-left: 68px;

        .reply-body {
          @include discussion-font;
          display: block;
          font-size: $post-font-size;
          margin-top: 10px;
          width: 95%;
        }

        .reply-post-control {
          margin-top: 1%;
        }
      }
    }

    //COMMENT STYLES
    .comments {
      overflow: hidden;

      .discussion-votes {
        margin-top: 8px;
      }

      .discussion-right-wrapper {
        margin: 10px 0 10px 68px;
      }

      .comment {
        margin-left: 68px;
        .comment-body, .content-body {
          @include discussion-font;
          color: black;
          display: block;
          font-size: $comment-font-size;
          margin-top: 3px;
        }

        &.endorsed {
          > .discussion-content {
            background-color: #fcfcea;
          }
        }
      }
    }
  }




  /*** Sorting ***/

  .discussion-sort {
    float: right;
    font-size: 0.8em;
    margin-top: -36px;

    .discussion-label {
      display: block;
      float: left;
      padding: 0 14px;
      line-height: 34px;
    }

    .discussion-sort-link {
      display: block;
      float: left;
      padding: 0 14px;
      line-height: 34px;

      &:hover {
        color: #1C71DD;
        text-decoration: none;
      }
    }

    .discussion-sort-link.sorted {
      color: #000;
      border-bottom: 2px solid #000;
    }
  }

  /*** Search ***/

  .search-wrapper-inline {
    display: inline-block;
    margin-top: 3%;
    width: 80%;
  }

  .search-wrapper {
    margin-bottom: 50px;
    margin-left: .5%;
  }

  .discussion-search-form {
    display: inline-block;
    margin-bottom: 1%;
    width: flex-grid(12);

    .discussion-link {
      @include button(simple, #999);
      color: white;
      display: inline-block;
      font-size: inherit;
      font-weight: bold;
      margin-left: 1%;
      padding-top: 9px;
      text-decoration: none;
    }

    .discussion-search-text {
      @include discussion-font;
    }

    .search-input {
      float: left;
      font: inherit;
      font-style: normal;
      // width: 72%;
      width: flex-grid(8);
      margin-left: flex-grid(1);
    }
  }

  .search-within {
    display: block;
    margin-bottom: 3%;
  }

  .discussion-search-within-board {
    font: inherit;
    font-size: $post-font-size;
    font-style: normal;
  }

  /*** buttons ***/

  .control-button {
    @include button;
    @include discussion-font;
    background-color: #959595;
    @include background-image(linear-gradient(top, #959595, #7B7B7B));
    border: 1px solid #6F6F6F;
    @include box-shadow(inset 0 1px 0 #A2A2A2, 0 0 3px #CCC);    
    color: white;
    display: inline-block;
    font-size: inherit;
    font-weight: bold;
    margin-bottom: 3%;
    padding-top: 9px;
    width: inherit;
    text-decoration: none;
    text-shadow: none;

    &:hover {
      background-color: #A2A2A2;
      @include background-image(linear-gradient(top, #A2A2A2, #7B7B7B));
      border: 1px solid #555;
      @include box-shadow(inset 0 1px 0 #BBB, 0 0 3px #CCC);
    }
  }

  .follow-wrapper {
    display: inline;
  }

  /*** votes ***/

  .discussion-votes {
    float: left;
    width: 60px;
    margin-top: 18px;
    text-align: center;

    .discussion-vote {      
      display: block;      
      width: 50px;
      height: 17px;
      margin: auto;
      background: url(../images/vote-arrows.png) no-repeat;
      font-size: 15px;
      font-weight: bold;
      color: black;
      @include hide-text;
      @include transition(all, 0, easeOut);
    }

    .discussion-vote-up {
      margin-bottom: 5px;
      background-position: -50px -3px;      

      &:hover {
        background-position: -50px -5px;
        @include transition-duration(0.05s);
      }

      &.voted {
        background-position: 0 -3px;
        color: #1C71DD;
        @include transition-duration(0);
      }
    }

    .discussion-vote-down {
      margin-top: 7px;
      background-position: -50px -30px;

      &:hover {
        background-position: -50px -28px;
        @include transition-duration(0.05s);
      }

      &.voted {
        background-position: 0 -30px;
        color: #1C71DD;
        @include transition-duration(0);
      }
    }   

    .discussion-vote-count {
      @include discussion-font;
      font-size: $post-font-size;
    }

    .discussion-votes-point {
      font-size: 1.1em;
      font-weight: bold;
      color: #9a9a9a;
    }
  }
  
  
  /*** new post ***/
  
  .new-post-form, .discussion-thread-edit {
    
    .title-input, .body-input {
      display: block !important;
      font: inherit;
      font-style: normal;
      //width: $discussion-input-width !important;
    }

    .new-post-similar-posts-wrapper {
      @include border-radius(3px);
      border: 1px solid #EEE;
      font-size: $post-font-size;
      line-height: 150%;
      margin-top: 1%;
      padding: 1% 1.5%;
    }
    
    .hide-similar-posts {
      float: right;
    }
    
    .new-post-similar-posts {
      font: inherit;
      .similar-post {
        display: block;
        line-height: 150%;
      }
    }

    .discussion-errors {
      color: #8F0E0E;
      display: block;
      margin-left: -5%;
    }

    .new-post-body {
    }

    .tagsinput {
      background: #FAFAFA;
      border: 1px solid #C8C8C8;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin-top: flex-gutter();
      vertical-align: top;
      -webkit-font-smoothing: antialiased;
    }
  }

  .discussion-content-edit, .discussion-reply-new, .new-post-form {
    margin: 10px 0 10px 0;
    
    .discussion-errors {
      color: #8F0E0E;
      display: block;
      font: inherit;
      font-size: $post_font_size;
      list-style: none;
      margin-left: -3%;
      padding-left: 2em;
    }
    
    a:hover {
      color: #1C71DD;
      text-decoration: none;
    }

    .new-post-title {
      display: block;
      padding: 5px 12px;
      border-width: 1px;
      width: 100%;
    }

    .thread-title-edit {
      width: 100%;
    }

    &.collapsed {
      .new-post-title {
        display: none;
        visibility: hidden;
      }

      .wmd-button-row {
        height: 0;
      }

      .wmd-input {
        height: 100px;
        @include border-radius(3px);
      }

      .wmd-preview {
        height: 0;
        padding: 0;
        border-width: 0;
      }

      .post-options {
        height: 0;
      }

      .post-control {
        display: none;
      }

      .tagsinput {
        display: none;
      }
    }

    .new-post-control {
      margin-left: 75%;
      margin-top: 1%;

     .discussion-cancel-post {
        margin-right: 1.5%;
      } 
    }

    .reply-post-control {

      .discussion-cancel-post {
        margin-right: 1.5%;
      }
    }
    
    .edit-post-control {
      margin-top: 1%;

      .discussion-cancel-update {
        margin-right: 1.5%;
      }
    }

    .control-button {
      @include button;
      @include discussion-font;
      margin-right: 16px;
      padding-top: 9px;
      color: white;
      display: inline-block;
      font-size: inherit;
      font-weight: bold;
      text-decoration: none;
      width: inherit;
      
      &:hover {
        color: white;
      }
    }

    label {
      display: inline;
      font-family: $sans-serif;
      font-size: .8em;
      font-style: normal;
      font-weight: 400;
    }
  }

  .discussion-content-edit {
    margin: 3%;
  }

  .new-post-form {
    margin: 10px 0 40px 0;
  }

  .discussion-reply-new {
    
    .discussion-auto-watch {
      margin-left: 2%;
    }
  }

  .thread-tag {
    background: $tag-background-color;
    border: 1px solid $tag-border-color;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    color: $tag-text-color;
    float: left;
    font-size: 13px;
    margin: 5px 7px 5px 0;
    padding: 5px 7px;
    text-decoration: none;

    &:hover {
      border-color: #7b8761;
      color: #2f381c;
      text-decoration: none;
    }
  }

  /*** pagination ***/

  .discussion-paginator {
    font-size: $post-font-size;
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;

    div {
      display: inline-block;
      font-weight: bold;
      margin: 0 5px;

      a {
        background: #EEE;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        color: black;
        font-weight: normal;
        padding: 4px 10px;
        text-decoration: none;

        &:hover {
          background: #DDD;
        }
      }
    }
  }

  &.inline-discussion, .forum-discussion, .user-discussion {
    .new-post-form {
      margin: 24px 60px;

      .post-options {
        margin: 8px 0 16px 0;
        overflow: hidden;

        label {
          margin-right: 15px;
          display: inline;
        }
      }

      .post-control {
        overflow: hidden;
        margin: 0 0 5% 0;
      }
    }
  }
}



/*** base editor styles ***/

.wmd-panel {
  width: 100%;
  min-width: 500px;
}

.wmd-button-bar  {
  width: 100%;
  background-color: Silver; 
}

.wmd-input {
  height: 150px;
  width: 100%;
  background-color: #e9e9e9;
  border: 1px solid #c8c8c8;
  font-family: Monaco, 'Lucida Console', monospace;
  font-style: normal;
  font-size: 0.8em;
  line-height: 1.6em;
  @include border-radius(3px 3px 0 0);

  &::-webkit-input-placeholder {
    color: #888;
  }
}

.wmd-preview {
  position: relative;
  font-family: $sans-serif;
  padding: 25px 20px 10px 20px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #c8c8c8;
  border-top-width: 0;
  @include border-radius(0 0 3px 3px);
  overflow: hidden;
  @include transition(all, .2s, easeOut);

  &:before {
    content: 'PREVIEW';
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 11px;
    color: #bbb;
  }

  p {
    font-family: $sans-serif;
  }
  background-color: #fafafa;
}

.wmd-button-row {
  position: relative; 
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
  padding: 0px;  
  height: 20px;
  overflow: hidden;
  @include transition(all, .2s, easeOut);
}

.wmd-spacer {
  width: 1px; 
  height: 20px; 
  margin-left: 14px;
  
  position: absolute;
  background-color: Silver;
  display: inline-block; 
  list-style: none;
}

.wmd-button {
  width: 20px;
  height: 20px;
  padding-left: 2px;
  padding-right: 3px;
  position: absolute;
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

.wmd-button > span {
  background-image: url('/static/images/wmd-buttons.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.wmd-spacer1 {
  left: 50px;
}
.wmd-spacer2 {
  left: 175px;
}

.wmd-spacer3 {
  left: 300px;
}

.wmd-prompt-background {
  background-color: Black;
}

.wmd-prompt-dialog {
  border: 1px solid #999999;
  background-color: #F5F5F5;
}

.wmd-prompt-dialog > div {
  font-size: 0.8em;
  font-family: arial, helvetica, sans-serif;
}


.wmd-prompt-dialog > form > input[type="text"] {
  border: 1px solid #999999;
  color: black;
}

.wmd-prompt-dialog > form > input[type="button"] {
  border: 1px solid #888888;
  font-family: trebuchet MS, helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
}
