@import "mixins";

.dk-inner {
  padding:20px 0;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;

  .error{
    color:red;
  }

  .queue-count{
    width:20%;
  }

  .title-value{
    width:30%;
  }
  
  .row_columnheads th a {
    color: black;
    text-decoration: none;
  }
  .row_columnheads th a:hover {
    color: black;
    text-decoration: none;
  }
  
  .form_help_text{
    color: #999;
  }

  // common resets
  input {margin:0;}

    
    thead th {
        background: transparent;
        border-bottom: 1px solid lightgray;
    }
    tbody tr td {
        border-top: 1px solid lightgray;
    }
    table.left-labels tr:first-child td {
        border-top: none;
    }
    table.left-labels tr th {
        white-space:nowrap;
        vertical-align: top;
    }
    td.center {
        text-align:center;
    }
    
    tbody tr:nth-child(even) td, tbody tr.even td {
        /*background: #e5ecf9;*/
        background: transparent;
    }

  .quiet {
    font-weight:normal;
    color:#888;
  }
  .clear { clear:both; }
  .center { text-align:center; }
  
  .pagination{
    color:#aaa;
    text-align:center;
  }

  .dk-roof {
    margin-bottom:24px;
    h2 { 
      margin-bottom: .15em;
      font-weight:600; 
      
      a { 
        color:#333;
        text-decoration:none;

        &:hover {
          text-decoration:underline;
        }
      }
    } // h2
  } // .dk-roof

  .dk-search {
    border:1px solid #ccc;
    padding:1%;
    background:#eee;
    @include border-radius(4px);
    margin-bottom:24px;

    input.question-search {
      @include border-radius(4px);
      padding:8px 1%;
      border:1px solid #ccc;
      font-size:16px;
      width:87%;
      height:16px;
      float:left;
    }

    .submit-question-search {
      height:34px;
      width:10%;
      padding:8px 1%;
      float:right;
      @include linear-gradient(lighten(green, 3%), darken(green, 5%));

      @include border-radius(4px);
      border:1px solid darken(green, 13%);
      cursor:pointer;

      color:white;
      font-size:15px;
      line-height:15px;
      text-align:center;
      text-shadow: 1px 1px darken(green, 50%);

      &:hover {
        @include linear-gradient(darken(green, 0%), darken(green, 8%));
      }
    } // .submit-question-search
  } // .dk-search


  .dk-content {
    width:72%;
    float:left;

    .dk-widget {
      border:1px solid #ccc;
      @include box-shadow(2px, 2px, 6px, #ddd);
      @include border-radius(4px);
      padding:18px 2% 22px;
      background:#fff;
      margin-bottom:24px;

      h2 { margin-bottom:0.10em; font-weight:600; }
      h3 {
          margin-bottom:0.6em;
          font-weight:normal;
          
          span.title{
          }
          span.superscript{
              color:#999;
          }
      }
      h5 { margin-bottom:1em }

      img { max-width:96%; padding:1%; border:1px solid #ccc; }

      .followup{
          .title{
              color:#999;
          }
      }

      ol.question-list {
        font-size:14px;
        margin-left:10px;
      }
      hr.light { color:#e7e7e7; background:#e7e7e7; }

      form.dk-form {
        .field-wrapper {
          padding-bottom:12px;

          &.field-phone_number {
            display:none;
          }

          .field-label {
            label { font-size:14px; font-weight:600; }
            small { font-size:11px; }
          }

          input, textarea { 
            padding:8px 1%;
            font-size:12px;
            width:96%;
            border:1px solid #ccc;
          }

          input[type=checkbox] {
            margin-top:6px;
          }

          ul.errorlist {
            color:#8a1f11;
            margin:0;
            padding:0;
            list-style:none;
          }
        } // .field-wrapper

        .form-footer {
          border-top:1px dashed #ccc;
          padding-top:10px;
          width:96%;

          input.submit-question {
            font-size:16px;
          }
        }
      } // form.ask-question


      // these are just stacked, no difference in 
      // question vs. response
      .dk-dialog {
        padding-bottom:1.8em;
        overflow:auto;
        min-height:78px;

        p { margin-bottom: 1em; }

        .the-author.gravatar {
          width:13%;
          overflow:hidden;
          float:left;

          img {
            margin-top:8px;
            padding:5%;
            border: 1px solid #ccc;
            max-width:60px;
            max-height:60px;
            width:80%;
            height:80%;
          }

          &.smaller {
            img {
              margin-top:0;
              margin-left:17%;
              max-width:40px;
              max-height:40px;
            }
          }
        }
        .the-content.gravatar {
          width:87%;
          float:right;
        }

        &:hover .dk-mod-bar {
          @include opacity(1);
        }
      }

      .dk-mod-bar {
        @include border-radius(2px);
        padding:3px 4px 2px;
        background:#eee;
        @include opacity(0.5);
        float:right;

        .dk-label {
          margin:0 2px;
        }

        form {
          display:inline-block;

          input {
            border:none;
            cursor:pointer;
          }
        }
      } // .dk-mod-bar

    } // dk-widget
  } // .dk-content


  .dk-sidebar {
    width:25%;
    float:right;
    padding-top:10px;

    .inner {
      padding:0 2%;
    }

    h4 { margin-bottom:0.3em; font-weight:600; }
    hr { margin-bottom:0.6em; color:#bbb; background:#bbb; }
  }

  // from bootstrap 2.0
  .dk-label {
    padding: 1px 3px 2px;
    position:relative;
    top:-1px;
    font-size: 10px;
    //font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    background-color: #999;
    @include border-radius(3px);
  }

    .dk-label-priority1, .dk-label-priority2, .dk-label-priority3, .dk-label-priority4, .dk-label-priority5 {
        padding: 1px 12px;
        font-weight: bold;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        margin: 2px;
        display: block;
        text-align: center;
        width: 20px;
    }


  // Colors
  .dk-label-important        { background-color: #B94A48; }
  .dk-label-warning          { background-color: #C67605; }
  .dk-label-success          { background-color: #468847; }
  .dk-label-info             { background-color: #3A87AD; }
  
  // Colors
  .dk-label-priority1 {
    background-color: #c00;
    color: #fff;
  }
    .dk-label-priority2 {
        background-color: #e80;
        color: #fff;
    }
    .dk-label-priority3 {
        background-color: #fe8;
        color: #000;
    }
    .dk-label-priority4 {
        background-color: #59c;
        color: #fff;
    }
    .dk-label-priority5 {
        background-color: #8c5;
        color: #fff;
    }
  
} // .dk-inner