// Styles for the Askbot sidebar

div.discussion-wrapper aside {
  @extend .sidebar;
  border-left: 1px solid #d3d3d3;
  @include border-radius(0 4px 4px 0);
  border-right: 1px solid #f6f6f6;
  @include box-shadow(inset 1px 0 0 #f6f6f6);
  padding: lh();
  width: flex-grid(3);

  &.main-sidebar {
    min-width:200px;
  }

  h1 {
    @extend .bottom-border;
    margin: (-(lh())) (-(lh())) 0;
    padding: lh(.5) lh();
  }

  h2 {
    color: #4D4D4D;

    &.first {
      margin-top: 0px;
    }
  }

  h3 {
    border-bottom: 0;
    box-shadow: none;
  }

  div.inputs {
    input[type="submit"] {
      width: 27%;
      float: right;
    }

    input[type="text"] {
      width: 62%;
    }
  }

  div.box {
    display: block;
    margin: lh(.5) 0;

    &:last-child {
      @include box-shadow(none);
      border: 0;
    }

    h2 {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 14px;
      letter-spacing: 1px;

      &:not(.first) {
        @include box-shadow(inset 0 1px 0 #eee);
        border-top: 1px solid #d3d3d3;
        margin: 0 (-(lh())) 0;
        padding: lh(.5) lh();
      }
    }

    &.contributors {

      a {
        @include border-radius(3px);
        border: 1px solid #aaa;
        cursor: pointer;
        display: inline-block;
        margin-right: 6px;
        position: relative;

        &:before {
          @include border-radius(3px);
          @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
          top: 1px; left: 1px; bottom: 1px; right: 1px;
          content: '';
          position: absolute;
        }

      }
      img.gravatar {
        @include border-radius(3px);
      }
    }

    &.tag-selector {
     ul {
       margin-bottom: 10px;
       display: block;
     }
    }
  }

  div.search-box {
    margin-top: lh(.5);
    input {
      @include box-sizing(border-box);
      display: inline;
    }

    input[type='submit'] {
      @include box-shadow(none);
      opacity: 0.5;
      background: url(../images/askbot/search-icon.png) no-repeat center;
      border: 0;
      margin-left: 3px;
      position: absolute;
      text-indent: -9999px;
      width: 24px;

      &:hover {
        opacity: 0.9;
      }

      &:focus {
        opacity: 1;
      }
    }

    input#keywords {
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
    }

    input#clear {
      @include box-shadow(none);
      @include border-radius(15px);
      border: none;
      background: #bbb;
      color: #fff;
      display: inline;
      font-size: 10px;
      margin-left: -25px;
      padding: 2px 5px;
    }
  }

  div#tagSelector {
    h2 {
      @include box-shadow(inset 0 1px 0 #eee);
      border-top: 1px solid #d3d3d3;
      margin: 0 (-(lh())) 0;
      padding: lh(.5) lh();
      text-transform: uppercase;
      font-weight: bold;
      font-size: 14px;
      letter-spacing: 1px;
    }

    ul {
      margin: 0;
    }

    div.inputs {
      margin-bottom: lh();
    }

    div#displayTagFilterControl {
      p.choice {
        @include inline-block();
        margin-right: lh(.5);
      }
    }
  }

  // Question view sopecific

  div.follow-buttons {
    margin-top: 20px;
    display: block;

    a.button {
      @include box-sizing(border-box);
      display: block;
      text-align: center;
      width: 100%;
    }
  }


  div.question-stats {
    ul {
      color: #777;
      list-style: none;

      li {
        padding: 7px 0 0;

        &:last-child {
          @include box-shadow(none);
          border: 0;
        }
        strong {
          float: right;
          padding-right: 10px;
        }
      }
    }
  }

  div.user-info, div.user-stats {
    @extend div.question-stats;
    overflow: hidden;

    div {
      float: left;
      display: block;
    }

    div.karma {
      background: #eee;
      border: 1px solid #D3D3D3;
      @include border-radius(3px);
      @include box-sizing(border-box);
      @include box-shadow(inset 0 0 0 1px #fff, 0 1px 0 #fff);
      padding: lh(.4) 0;
      text-align: center;
      width: flex-grid(1, 3);
      float: right;

      strong {
        display: block;
        font-style: 20px;
      }
    }

    div.meta {
      width: flex-grid(2,3);
      padding-right: flex-gutter(3)*0.5;
      @include box-sizing(border-box);

      h2 {
        border: 0;
        @include box-shadow(none);
        margin: 0 0 8px 0;
        padding: 0;
      }

      p {
        color: #777;
        font-size: 14px;
      }
    }
  }

  div.user-stats {
    overflow: visible;

    ul {
      font-size: 14px;

      h2 {
        margin:0 (-(lh())) 5px (-(lh()));
        padding: lh(.5) lh();
      }
    }
 }

  div.question-tips, div.markdown {
    ul {
      margin-left: 8%;
    }

    ol {
      margin-left: 8%;
    }
  }
  div.markdown ul li {
    margin: 20px 0;

    &:first-child {
      margin: 0;
    }

    ol li {
      margin: 0;
    }
  }

  div.view-profile {
    h2 {
      border-top: 0;
      @include box-shadow(none);
    }

    a {
      width: 100%;
      @include box-sizing(border-box);
      text-align: center;
      padding: 10px;
      display: block;
      margin-top: 10px;
      @extend .light-button;

      &:first-child {
        margin-top: 0;
      }

      span {
        font-weight: bold;
      }
    }
  }
}
