/* This is Daniel's content.css file */
/* Common styles used in screens */
@import "client/common.css.scss";@charset "UTF-8";

#content {
  background-color: #353535;
  border: 1px solid #ed3618;
  clear: both;
  float: left;
  margin-top: 39px;
  height: auto;
  width: auto;
  position:relative;
  padding-bottom:3px;
}

/* Daniel's tweaks */
.screen, .screen .content {
    .content-head {
        position: absolute;
        height:21px;
        padding:4px 0;
        width:100%;
        background-color:$ColorScreenPrimary;

        .content-icon {
            margin: -1px 10px 0 4px;
            float:left;
        }

        .content-nav {
            float:right;
            margin-right:10px;

            a {
                &.arrow-right,
                &.arrow-left {
                    float:left;
                    display:block;
                    margin-top:2px;
                    width: 0;
                    height: 0;
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent;
                }
                &.arrow-right {
                    margin-right:10px;
                    border-left: 7px solid #FFF;
                }
                &.arrow-left {
                    margin-right:20px;
                    border-right:7px solid #FFF;
                }

            }
        }

        h1 {
            margin: -3px 0px 0px 0px;
            padding:0;
            float:left;
            font-weight:100;
            font-size:24px;
        }
    }
    .content-body {
        height:100%;
        width:100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 29px;

        .content-body-scroller {
            height:inherit;
            position:relative;
            display:block;
            overflow:auto;
//            padding: 10px 35px;

            @media screen and (max-width: $narrow-screen) {
//                padding: 10px 20px;
            }

            &.outer {
                overflow: hidden;
                > * {
                    height:inherit;
                }
            }
        }
    }

    .filter-head {
        position: absolute;
        padding:11px 0;

      .btn-refresh-entries {
        margin-top:7px;
      }
    }
    .filter-body {
        height:100%;
        width:100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 49px;
    }

    .profile-head {
        position: absolute;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
    }
    .profile-body {
        height:100%;
        width:100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 157px;
        > * {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
          box-sizing:border-box;
        }
    }
    .profile-body-content {
        height: inherit;
        overflow:auto;
        &.outer {
          overflow:hidden;
        }
        &.padded {
          padding:10px 25px;
        }
    }

    .profile-social-head {
        position: absolute;
        width:100%;
        padding:0 25px;
        line-height:25px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing:border-box;

        +.profile-wrapper {
          padding-top: 0;
        }
    }
    .profile-social-body {
        height:100%;
        width:100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing:border-box;
        padding-top:25px;
        .profile-social-body-wrapper {
          height:inherit;
        }
        .profile-social-content {
          padding:0 25px;
        }
    }
}

.result-list-button-wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  > a.smallbutton {
    margin: 2px;
    &.button-grey {
      display:none; // @FIXME VRFS-930 / VRFS-931 per comment from David - don't show.
    }
  }
}


.home-icon {
  float:left;
  margin-right:20px;
}


#content-scroller, .content-scroller {
  height:inherit;
  position:relative;
  display:block;
  overflow:auto;
}

//.content-wrapper {
//  padding:10px 30px 10px 36px;
//  font-size:15px;
//  color:#ccc;
//  border-bottom: dotted 1px #444;
//  overflow-x:hidden;
//  white-space:nowrap;
//}

.content-wrapper h2 {
  color:#fff;
  font-weight:600;
  font-size:24px;
}

.content-wrapper, .dialog, .dialog-inner, .ftue-inner {

  select, textarea,  input[type=text], input[type=password], div.friendbox {
    background-color:#c5c5c5;
    border:none;
    -webkit-box-shadow: inset 2px 2px 3px 0px #888;
    box-shadow: inset 2px 2px 3px 0px #888;
    color:#666;
  }

}

.create-session-description {
  padding:5px;
  width:100%;
  height:80px;
}

.friendbox {
  padding:5px;
  height:60px;
}

.invite-friend {
  margin:0px 4px 4px 4px;
  float:left;
  display:block;
  background-color:#666;
  color:#fff;
  font-size:12px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding:2px 2px 2px 4px;
}

.content-wrapper div.friendbox input[type=text] {
  -webkit-box-shadow: inset 0px 0px 0px 0px #888;
  box-shadow: inset 0px 0px 0px 0px #888;
  color:#666;
  font-style:italic;
}

#genrelist, #musicianlist {
  position:relative;
  z-index:99;
  width: 175px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-color:#C5C5C5;
  border: none;
  color:#333;
  font-weight:400;
  padding:0px 0px 0px 8px;
  height:20px;
  line-height:20px;
  overflow:hidden;
  -webkit-box-shadow: inset 2px 2px 3px 0px #888;
  box-shadow: inset 2px 2px 3px 0px #888;
}

#musicianlist, .session-controls #genrelist {
  width: 150px;
}

#genrelist a, #musicianlist a {
  color:#333;
  text-decoration:none;
}

.genre-wrapper, .musician-wrapper {
  float:left;
  width:175px;
  height:127px;
  overflow:auto;
}

.musician-wrapper, .session-controls .genre-wrapper {
  width:150px;
}

.genrecategory {
  font-size:11px;
  float:left;
  width:135px;
}

.filtercategory, .session-controls .genrecategory {
  font-size:11px;
  float:left;
  width:110px;
}

a.arrow-up {
  float:right;
  margin-right:5px;
  display:block;
  margin-top:6px;
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #333;
}

a.arrow-down {
  float:right;
  margin-right:5px;
  display:block;
  margin-top:6px;
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #333; 
}

.settings-session-description {
  padding:10px;
  width:300px;
}

#session-controls {
  width:100%;
  padding:6px 0px 11px 0px;
  background-color:#4c4c4c;
  min-height:20px;
//  overflow-x:scroll;
  select {
    font-size:11px;
    margin-top:4px;
  }
}

#session-controls .searchbox {
  float:left;
  width:140px;
  margin-left: 10px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-color:#C5C5C5;
  border: none;
  color:#333;
  font-weight:400;
  padding:0px 0px 0px 8px;
  height:20px;
  line-height:20px;
  overflow:hidden;
  -webkit-box-shadow: inset 2px 2px 3px 0px #888;
  box-shadow: inset 2px 2px 3px 0px #888;
}

#session-controls input[type=text] {
  background-color:#c5c5c5;
  border:none;
  color:#666;
}

.avatar-tiny {
  float:left;
  padding:1px;
  width:24px;
  height:24px;
  background-color:#ed3618;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
}

.ftue-background {
  background-image:url(../content/bkg_ftue.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  min-height:475px;
  min-width:672px;
}

table.generaltable {
  background-color: #262626;
  border: 1px solid #4D4D4D;
  color: #FFFFFF;
  font-size: 11px;
  margin-top: 6px;
  width: 100%;

  th {
    background-color: #4D4D4D;
    border-right: 1px solid #333333;
    font-weight: 300;
    padding: 6px;
  }

  td {
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    padding: 9px 5px 5px;
    vertical-align: top;
    white-space: normal;
  }

  .noborder {
    border-right: medium none;
  }
}

ul.shortcuts {
  border:1px solid #ED3618;

  li {
    margin:0;
    height:20px;
    line-height:20px;
    padding:2px;
  }

  .account-home, .band-setup, .account-menu-group, .get-help, .download-app, .community-forum, .invite-friends {
    border-bottom:1px;
    border-style:solid;
    border-color:#ED3618;
  }



  span.arrow-right {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #FFCC00;
    padding-left:5px;
  }

  ul.shortcuts-submenu {
    display:none;

    li {
      margin:0;
      height:20px;
      line-height:20px;
      padding:2px;
      color:#FFCC00;
    }

    li.google-invite, li.email-invite, li.facebook-invite {
      padding-left:9px;
    }

  }
}

.tagline {
  font-size:30px;
  margin-top:35px;
  color:#ed3718;
  font-weight:300;
  width:345px;
  clear:left;
  white-space:normal;
}

.smallbutton {
  font-size:10px !important;
  padding:2px 8px !important;
}


a.arrow-down-orange {
  margin-left:5px;
  margin-top:4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #ED3618;
}

.whitespace {
  white-space:normal;
}

.w0 {width:0% !important}
.w5 {width:5% !important}
.w10 {width:10% !important}
.w15 {width:15% !important}
.w20 {width:20% !important}
.w25 {width:25% !important}
.w30 {width:30% !important}
.w35 {width:35% !important}
.w40 {width:40% !important}
.w45 {width:45% !important}
.w50 {width:50% !important}
.w55 {width:55% !important}
.w60 {width:60% !important}
.w65 {width:65% !important}
.w70 {width:70% !important}
.w75 {width:75% !important}
.w80 {width:80% !important}
.w85 {width:85% !important}
.w90 {width:90% !important}
.w95 {width:95% !important}
.w100 {width:100% !important}