@import "client/common.css.scss";
@charset "UTF-8";

.sidebar {

    background-color: $ColorElementPrimary;

    .panel-header {
        margin:0px;
        padding:0px;
        cursor:pointer;
    }

    .panelcontents {
        overflow-y:auto;
        overflow-x:hidden;
    }

    h2 {
        background-color: shade($ColorElementPrimary, 20); 
        margin:0px 0px 6px 0px;
        padding: 3px 0px 3px 10px;
        font-size: 180%;
        font-weight: 100;
        color: $ColorSidebarText;
        cursor:pointer;
    }

    h2 .badge {
        position:absolute;
        height:15px;
        top:8px;
        right:5px;
        width:19px;
        background-color:lighten($ColorElementPrimary, 5);
        color:shade($ColorElementPrimary, 30);
        font-size:11px;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:400;
        text-align:center;
        padding-top:4px;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;

        &.highlighted {
          background-color:white;
        }
    }

    .expander {
        background-color:$ColorUIBackground;
        font-size:80%;
        color:shade($ColorText, 30);
        cursor:pointer;
    }
    .expander p {
        text-align:right;
        padding: 0px 0px 6px 0px;
    }
    .expander img {
        vertical-align: middle;
        margin-left: 12px;
    }
    .expander.hidden p {
        text-align:left;
    }
    .expander.hidden img {
        margin-left: 0px;
    }

    .search form {
        margin: 0px;
        padding: 0px;
    }

    input[type="text"] {
        background-color:#227985;
        border: solid 1px #01545f;
        font-weight:400;
        font-size:15px;
        color:#abd2d7;
        width: 92%;
        margin: 4px 4px 8px 8px;
        padding: 3px;
    }

    li {
        position: relative;
        border-bottom:solid 1px shade($ColorElementPrimary, 20);
        clear:both;
    }

    li strong {
        font-weight:bold;
    }

    li.offline {
        background-color: shade($ColorElementPrimary, 20);
        color: shade($text, 10);
        opacity:0.5;
        ms-filter: "alpha(opacity=50)";
    }

   .avatar-small {
        float:left;
        padding:1px;
        width:36px;
        height:36px;
        background-color:#ed3618;
        margin:10px;
        -webkit-border-radius:18px;
        -moz-border-radius:18px;
        border-radius:18px;
    }

   .avatar-small img {
        width: 36px;
        height: 36px;
        -webkit-border-radius:18px;
        -moz-border-radius:18px;
        border-radius:18px;
    }

    li .friend-name {
        float:left;
        font-size:18px;
        margin-top:12px;

        .friend-name-label {
        }
    }

    li .friend-status {
        font-size:11px;
        color:#D5E2E4;
    }

    .friend-icon {
        float:right;
        margin-top:18px;
        margin-right:20px;
    }

    li a {
        color:#B3DD15;
    }

    li a:hover {
        color:#FFF;
    }

    .name {
        display:block;
        position:absolute;
        line-height: 18px;
        height: 18px;
        left: 48px;
        top: 10px;
        font-weight: bold;
        font-size:110%;
    }

    .status {
        display:block;
        position:absolute;
        line-height:12px;
        height: 12px;
        left: 48px;
        top: 26px;
        font-style: italic;
        font-size: 100%;
    }

    .chatcontents {
      position: relative;
    }

    .chat-list-scroller {
      position: relative;
      display: block;
      overflow: auto;
      margin: 0px 15px;
      height: 210px;
    }

    .btn-send-chat-message {
      margin-top: 5px;
      margin-right: 30px;
    }
  
    #new-chat-message {
      width: 90%;
      height: 40px;
    }

    .chat-status {
      line-height: 20px;
      text-align: center;
      padding: 10px;
    }

    .chat-message {
      margin:5px 0;

      .chat-message-sender {
        font-weight:bold;
        margin-right:10px;
        color: #020C81;

        &:after {
          content:':'
        }
      }

      .chat-message-text {
        line-height:18px;
        white-space:pre-line;
        color: #D5E2E4;
      }

      .chat-message-timestamp {
        margin-top:4px;
        color:#AAA;
        display:block;
        font-size:12px;
      }
    }

    .chat-sender {
      width: 100%;
      position: absolute;
      bottom: 10px;
      padding: 0px 15px;
    }

    em {
        color:#9DB8AF
    }

    .note-text {
        font-size: 11px;
        padding-right: 20px;
        position:relative;
        margin-top:5px;
        margin-bottom:5px;
        line-height:130%;
    }

    .note-delete {
        position:absolute;
        width:13px;
        height:13px;
        top:0px;
        right:3px;
    }

    .sidebar-search-result {
        display:block;
        position:relative;
        border-bottom:solid 1px #01545f;
    }

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

    .result-location {
        font-size:11px;
        color:#D5E2E4;
        font-weight:200;
    }

    .results-wrapper {
        width: 300px;
        overflow-y:auto;
        overflow-x:hidden;
    }

    .sidebar-search-connected {
        text-align:center;
        vertical-align:middle;
        background-color:#4c4c4c;
        padding-bottom:10px;
        font-size:11px;
    }

    ul#sidebar-friend-list {
      .invite-friend-row {
        margin-left:58px;
      }
      .avatar-small {
        background-color:inherit;
      }

      .invitation-button-holder {
        display:none;
        margin-top:6px;
        margin-left:-3px;
      }
    }

   #sidebar-notification-list {

     .text-message {
        word-wrap:break-word;
     }

     .more-text-available {
     }
   }
}