jam-cloud/web/app/assets/stylesheets/client/help.scss

@import "client/common";

//body.jam, body.web, .dialog{
html {
  .bt-wrapper {
    font-size: 14px;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-weight: 300;
    .bt-content {
      color:#cccccc;

      font-size:14px;

      p {
        margin:1em;
        line-height:150%;
        font-size:14px;
        width:auto;
        @include border_box_sizing;
      }
      ul {
        font-size:14px;
        margin-left: 2em;
        list-style: disc;
        color:#CCCCCC;
      }

      li {
        margin-left:1em;
        margin-bottom:.5em;
      }

      .definition {
        font-weight:bold;
      }

      .no-audio-help {
        p {margin-bottom:20px !important;}
      }

      .help-musician-score-count {
        .measurement {

        }

        .measurement-value {
          font-size:24px;
        }

        .measurement-absent {
          font-style:italic;
          font-size:12px;
          display:block;
        }
      }

      .help-high-latency-notice {
        width:400px;
      }

      .big-help {
        font-size:20px;
        color: #ed3618;
        p {color:#ed3618}

        &.jamtrack-web-play {
          p {
            font-size:20px;
          }
        }

        a {
          color:black !important;
        }
      }

      .session-help {
        padding:5px;
      }

      .big-dark-help {
        font-size:20px;
        color: $ColorTextTypical;
        p {color:$ColorTextTypical}

        &.jamtrack-web-play {
          p {
            font-size:20px;
          }
        }

        a {
          color:$latencyBadgeFair;
        }
      }

      .larger-text {
        margin:10px;
        font-size:12px;
        line-height:125%;
      }


      .side-remaining-jamclass-credits, .side-remaining-test-drives, .side-buy-test-drive, .side-buy-normal-lesson, .side-didnt-find-teacher {
        h2 {
          font-size:20px;
          color:white;
          margin:.8em .8em;
        }
        p {
          margin:.8em 1em;
          line-height:120%;
        }
        .book-now {
          width:100px;
          display:block;
          margin:30px auto;
        }
        .post-help {
          width:100px;
          display:block;
          margin:30px auto;
        }

        .textarea-wrapper {
          padding: 0 1em;
          width:100%;
          @include border_box_sizing;
        }

        textarea {
          height:70px;
          @include border_box_sizing;
          width:100%;
          font-size:14px;
        }

        .field {
          margin: 0 1em;
          label {
            width:50px;
            display:inline-block;
            font-size:14px;
          }
          input {
            font-size:14px;
            display:inline-block;
            margin-bottom:20px;
            width:178px;
          }
        }

      }

      .ftue-step-2-instructions, .ftue-step-4-instructions, .ftue-step-5-instructions {
        width:180px;
      }
      .ftue-step-2-sample-rate {
        width:180px;
      }

      .test-drive-package-go {
        width:300px;
      }

      .help-hover-recorded-tracks, .help-hover-stream-mix, .help-hover-recorded-backing-tracks {

        font-size:12px;
        padding:5px;
        @include border_box_sizing;
        width:450px;

        .sync-definition {
          padding:0 10px;
        }

        .client-box {
          float:left;
          width:50%;
          min-width:200px;
          @include border_box_sizing;
        }

        .upload-box {
          float:left;
          width:50%;
          min-width:200px;
          @include border_box_sizing;

        }

        @include client-state-box;
        .client-state {
          width:100%;
          margin:5px 0 10px;
          font-size:16px;
        }

        @include upload-state-box;
        .upload-state {
          width: 100%;
          margin:5px 0 10px;
          font-size:16px;
        }

        .client-state-info, .upload-state-info {
          text-align:center;
          font-size:12px;
        }

        .client-state-definition {
          margin-bottom:20px;
        }

        .upload-state-definition {
          margin-bottom:20px;
        }
        .summary {
          margin-bottom:10px;

          .title {
            text-align:center;
            font-size:16px;
            margin:10px 0 5px;
          }
        }
      }

      .help-hover-mix {

        font-size:12px;
        padding:5px;
        @include border_box_sizing;
        width:450px;

        .mix-box {
          float:left;
          width:100%;
          min-width:400px;
          @include border_box_sizing;
        }

        @include mix-state-box;
        .mix-state {
          width:100%;
          margin:5px 0 10px;
          font-size:16px;
          //background-color:black ! important;
        }

        .mix-state-info {
          text-align:center;
          font-size:12px;
        }

        .mix-state-definition {
          margin-bottom:20px;
        }

        .summary {
          margin-bottom:10px;

          .title {
            text-align:center;
            font-size:16px;
            margin:10px 0 5px;
          }
        }
      }
    }
  }
}