jam-cloud/web/app/assets/stylesheets/client/band.css.scss

@import "client/common.css.scss";


.band-setup-bio {
    height:90px;
    overflow:auto;
}

.band-setup-genres {
    width:100%;
    height:90px;
    background-color:#c5c5c5;
    border:none;
    -webkit-box-shadow: inset 2px 2px 3px 0px #888;
    box-shadow: inset 2px 2px 3px 0px #888;
    color:#000;
    overflow:auto;
    font-size:14px;
}

.band-setup-photo {

    .avatar-space {
      color: $color2;
      margin: 20px;
      position:relative;
      min-height:300px;

      img.preview_profile_avatar {
      }
    }


    .spinner-large {
      width:300px;
      height:300px;
      line-height: 300px;
      position:absolute;
      top:0;
      left:0;
      z-index: 2000; // to win over jcrop
    }

    .no-avatar-space {
      border:1px dotted $color2;

      color: $color2;
      width:300px;
      height:300px;
      line-height: 300px;
      text-align: center;
      vertical-align: middle;
      background-color:$ColorTextBoxBackground;

    }
  }

.band-profile-header {
    padding:20px;
    height:120px;
}

.band-profile-header h2 {
    font-weight:200;
    font-size: 28px;
    float:left;
    margin: 0px 150px 0px 0px;
}

.band-profile-status {
    font-size:12px;
    float:left;
    display:inline-block;
    vertical-align:middle;
    line-height:30px;
}

.band-profile-photo {
    height: 95px;
    width: 15%;
    float:left;
}

.band-profile-nav {
    width:85%;
    position:relative;
    float:right;
    margin-right:-10px;
}

.band-profile-nav a {
    width:24%;
    text-align:center;
    height: 27px;
    display: block;
    float:left;
    margin-right:5px;
    vertical-align:bottom;
    padding-top:65px;
    background-color:#535353;
    color:#ccc;
    font-size:17px;
    text-decoration:none;
}

.band-profile-nav a:hover {
    background-color:#666;
    color:#fff;
}

.band-profile-nav a.active {
    background-color:#ed3618;
    color:#fff;
}

.band-profile-nav a.active:hover {
    background-color:#ed3618;
    cursor:default;
}

.band-profile-nav a.last {
    margin-right:0px !important;
}

.avatar-profile {
    float:left;
    padding:2px;
    width:88px;
    height:88px;
    background-color:#ed3618;
    -webkit-border-radius:44px;
    -moz-border-radius:44px;
    border-radius:44px;
}

.avatar-profile img {
    width:88px;
    height:88px;
    -webkit-border-radius:44px;
    -moz-border-radius:44px;
    border-radius:44px;
}

.band-profile-wrapper {
    padding:10px 25px 10px 25px;
    font-size:15px;
    color:#ccc;
    border-bottom: dotted 1px #444;
    position:relative;
    display:block;

    .result-name {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 2px;
      padding-right:4px;
    }
    .stats {
      margin-top: 4px;
      img {
        vertical-align: middle;
      }
    }
    .lcol {
      width: 200px;
    }
    .whitespace {
      // equal to lcol width.
      padding-left: 200px;
    }
    .instruments {
      width:128px;
      img {
        height:24px;
        width:24px;
        margin-right:2px;

        &:last-child {
          margin-right:0px;
        }

      }
    }
    .button-row {
      margin-top:10px;
      margin-bottom:5px;
      .result-list-button-wrapper {
        margin:0;
      }
    }
}

.band-profile-about-left {
    width:16%;
    float:left;
    font-size:13px;
    line-height:140%;
    display:block;
}

.band-profile-about-left h3 {
    color:#fff;
    margin-bottom:0px;
    font-size:13px;
    font-weight:bold;
    display:inline;
}

.band-profile-about-right {
    float:right;
    font-size:13px;
    width:84%;
    line-height:140%;
    display:block;
}

.band-profile-about-right .band-profile-instrument {
    text-align:center;
    margin-right:15px;
    float:left;
}

.proficiency-beginner {
    font-size:10px;
    color:#8ea415;
    font-weight:600;
}

.proficiency-intermediate {
    font-size:10px;
    color:#0b6672;
    font-weight:600;
}

.proficiency-expert {
    font-size:10px;
    color:#ed3618;
    font-weight:600;
}

.band-profile-members {
    width:100%;
    min-height:90px;
    background-color:#242323;
    position:relative;
    float:left;
    margin:10px 20px 10px 0px;
    padding-bottom:5px;
}

.band-profile-member-name {
    float:left;
    font-size:12px;
    margin-top:12px;
    font-weight:bold;
}

.band-profile-member-location {
    font-size:12px;
    font-weight:200;
}

.band-profile-member-genres {
    float:left;
    width:40%;
    font-size:10px;
    margin-left:10px;
    padding-right:5px;
}

.band-profile-social-left {
    float:left;
    width:32%;
    margin-right:12px;
    border-right:solid 1px #666;
}

.band-profile-social-mid {
    float:left;
    width:31%;
    margin-right:12px;
    border-right:solid 1px #666;
}

.band-profile-social-right {
    float:left;
    width:31%;
}

.band-profile-social-left h2, .band-profile-social-mid h2, .band-profile-social-right h2 {
    font-weight:200;
    color:#fff;
    font-size:20px;
}

.band-profile-block {
    clear:left;
    white-space:nowrap;
    display:block;
    margin-bottom:10px;
}

.band-profile-block-name {
    display:inline-block;
    margin-top:13px;
    font-size:14px;
    color:#fff;
    font-weight:bold;
}

.band-profile-block-city {
    font-size:12px;
}

#band-filter-results {
  margin: 0 10px 5px 10px;
}

.band-list-result {
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
}

.band-wrapper {
  overflow: auto; 
  height: 480px;
  width:  100%;
}

#band-setup-form {
  .easydropdown {
    padding: 0 3px;
    width:100%;
  }

  .easydropdown-wrapper {
    width:80%;
  }

  div.field {
    margin: 10px;
  }

  label {
    margin-bottom:2px;
  }
}