@import 'common';

#jamtrackLanding {

  div[data-react-class="JamTrackLandingScreen"], .content-body-scroller {
    height:100%;
  }
  .search-by-string-btn {
    float: right;
    margin-top: 2px;
  }
  .search-by-filter-btn {
    float:right;
    margin-top:10px;
  }
  .search-help {
    margin:10px 0 10px 0;
    line-height:150%;
  }

  .filter-help {
    margin:20px 0 10px 0;
    line-height:150%;
  }

  .autocompleter {
    width: calc(100% - 90px);

    display:inline-block;
  }
  .search-controls {
    .autocompleter {
      margin-bottom: 20px;
    }
  }
  .purchased-jam-tracks-holder {
    margin-top:20px;
    
    
    .search-by-string-btn {
      margin-right:0;
    }
  }

  .purchased-jam-tracks {
    height:167px;
    overflow:auto;
    margin-top:10px;
  }

  .jamtable {

    a {
      text-decoration: underline !important;
      color:#fc0 !important;
    }
    th {
      font-size:14px;
      padding:3px 10px;
    }
    td {
      padding:4px 15px;
      font-size:14px;
    }
    tbody {

    }

    margin-bottom:20px;
  }

  .search-area {
    .easydropdown-wrapper{
      max-width:350px;
      @include border_box_sizing;
      &:nth-child(1) {
        margin-right:10px;
        width:calc(50% - 10px);

      }
      &:nth-child(2) {
        margin-left:10px;
        width:calc(50% - 10px);
      }
    }
    button {
      margin-right:0;
    }
  }

  //font-family: verdana;
  .two-column-list-container {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin-left: 0;
    ul {
      list-style-type: none;
      li {
        margin: 1px 4px 1px 0;
        font-size:12px;
        line-height:14px;
      }
    }
  }

  #band_list {
    margin-top:10px;
    margin-left:0;

    li {
      font-size:12px;
    }
  }
  .browse-header {
    padding: 4px 0 4px 0;
    color:#ccc;
  }

  .list-columns {
    h2 {
      font-size: 20px;
      font-weight:700;
      text-transform: lowercase;
      margin-bottom: 10px !important;
    }

    .what, .howto {
      margin-bottom: 2em;
      font-size: 14px;
      line-height: 19px;
      color: #cccccc;
    }

    .what ul {
      margin-top:20px;
    }

    .details {
      margin-bottom: 4px !important;
    }

    .about {
      @include border_box_sizing;
      float: left;
      width: 50%;
      padding:20px 20px 0 20px;
      > * {
        margin: 4px;
      }


      ul {
        li {
          margin: 1px 4px 1px 4px;
          font-size:12px;
          line-height:14px ;
        }
      }
    }

    .browse {
      @include border_box_sizing;
      float: left;
      width: 50%;
      padding:20px 20px 0 20px;
      > * {
        margin: 4px;
      }

      .para {
        color: #cccccc;
      }

      h2.browse-jamtracks {
        margin-top:30px;
      }
    }

    .download-all {
      margin-top: 64px;
      line-height: 150%;
    }
  }
  .video-container-container {

  }
  .video-container {
    width:100%;
    padding-bottom:53.33%;
    margin:30px 0 30px 30px;
  }

  .video-thumbnail {
    width:100%;
    padding-top:53.33%;
    margin:25px 0;
    background:url(//img.youtube.com/vi/askHvcCoNfw/maxresdefault.jpg) no-repeat center;

    img.play {
      margin:-35.75% auto 0;
    }
  }
  .ios-appstore-badge {
    display:block;
    text-align:center;
  }
}
