layout with sidebar scss

//-----------source meta structure-------------//



$div-border-color: #f1f1f1;
$note-tag-companybg: #d3741c;
$note-tag-companybg-hover: #bb5b00;
$note-tag-topicbg: #2b7ea0;
$note-tag-topicbg-hover: #01648d;
$note-tag-notexist: #f0f0f0;
$note-tag-notexist-hover: #ececec;
$anchor_color: #03998d;

$card-header-color: #dbdbdb;

.TYPE-analysis {
  &.STRUCTURE-analysis_comparison a.internal-link,
  >.source-side > a {
    float: none;
    text-align: center;
  }

}
/*--------Borders------------ */
.TYPE-analysis,
.TYPE-company,
.TYPE-topic,
.TYPE-metric {
  .source-side {
    width: 70%;
    border-right: 1px solid $div-border-color;
    padding-right: 20px;
    .ui-tabs {
      border: 0;
    }
  }
}

#main > .TYPE-note {
  > .card-header {
    background-color: #fff;
  }
  .source-side {
    border-right: 1px solid $div-border-color;
  }

}
.TYPE-note.card-content .source-side > .RIGHT-tag {
  margin-top: 20px;

}
.TYPE-analysis.card-content {
  .search-no-results {
    display: none;
  }
  > .search-result-list {
    padding: 0;
  }
  .side-by-side {
    text-align: center;
    padding: 0;
    margin-bottom: 20px;
    .company-link {
      float: left;
    }
    .topic-link {
      float: right;
    }
    .TYPE-image {
      display: inline-block;
      padding: 10px;
      border-radius: 2px;
      -moz-border-radius: 2px;
      border: 0 solid #ededed;
    }
    img {
      max-height: 130px;
    }
    .analysis-name {
      font-size: 1.4em;
      line-height: 1.6em;
    }
    .analysis-joint {
      font-size: 0.8em;
    }

  }
  > .source-side {
    > h1 {
      margin-top: 40px;
      padding: 0;
    }
    > .TYPE-search > .card-content {
      padding-left: 3%;
    }

  }
  .RIGHT-right_sidebar.card-content {
    > h1 {
      padding: 0;
    }
    > h2 {
      font-weight: normal;
      font-size: 1em;
      padding: 0 0 15px 3%;
    }
    > .card-content {
      padding-bottom: 25px;
    }
  }

}
//'make a note' button in source page
.TYPE-page .source-side .internal-link {
  padding: 0;

}
//To hide 'make a note' in new and edit source page. It is not required there.
.TYPE-page.new-view .source-side .internal-link,
.TYPE-page.edit-view .source-side .internal-link {
  display: none;

}
// To divide source and meta sides of content in Company, Note, Topic , Analysis and Source pages
.source-side,
.meta-side {
  float: left;
  padding: 0;
  margin-left: 2.5%;

}
.TYPE-metric {
  .source-side {
    width: 65%;
  }
  .meta-side {
    width: 30%;
    text-align: center;
    margin-left:0;
    .ui-tabs{
      border:none;
    }
  }

}
.TYPE-analysis {
  .source-side {
    width: 63% !important;
  }
  .meta-side {
    width: 30% !important;
  }

}

.TYPE-analysis .meta-side,
.TYPE-company .meta-side,
.TYPE-topic .meta-side {
  width: 22%;
}
.SELF-source,
.TYPE-note {
  .creator-credit {
    text-align: center;
    .search-result-list {
      display: inline-block;
    }

  }
  .preview-visit-link {
    float: right;
  }
  .remove-source {
    display: none;
    float: right;
    cursor: pointer;
  }

}
.TYPE-note .source-side,
.TYPE-page .source-side {
  width: 45%;
  margin-left: 2.5%;
  padding-right: 2.5%;
}
.TYPE-note .meta-side,
.TYPE-page .meta-side {
  width: 44.5%;
  position: static;
  > .card-slot {
    margin: 20px 0;
  }
  > .RIGHT-source > .card-header {
    margin-top: 0;
  }

}
.sourcebox > input {
  width: 100%;

}
/* .TYPE-note .meta-side .RIGHT-source, */

// I commenting it ..I dunno why this is here...
// .TYPE-note {
//   .source-side {
//     width: 100%;
//     padding-right: 0;
//     margin-left: 0;
//   }
//
// }

.TYPE-topic,
.TYPE-company {
  .TYPE_PLUS_RIGHT-search-Xcount {
    display: inline;
  }
  .source-side>.RIGHT-logo {
    height: 60px;
    overflow: hidden;
  }
  .empty-tab {
    padding-top: 15%;
    text-align: center;
  }
  #tabs {
    min-height: 300px;
    li {
      .TYPE_PLUS_RIGHT-search-Xcount {
        display: inline-flex;
        background: #909090;
        text-align: center;
        padding: 2px 6px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        font-size: 0.8em;
        margin-right: 5px;
        color: white;
      }
    }

  }
  .subtitle-header {
    float: left;
    padding-right: 6px;

  }
  .page-main-content {
    margin-top: 18px;
    float: left;

  }
  .page-heading {
    margin-bottom: 14px;
    border-bottom: 1px solid $div-border-color;
    margin-top: 18px;
    h1 {
      padding: 1px 0;
    }

  }
  .titled_with_edit-view.TYPE_PLUS_RIGHT-company-about,
  .titled_with_edit-view.TYPE_PLUS_RIGHT-topic-about {
    display: inline;

  }
  .TYPE_PLUS_RIGHT-company-Xeditor,
  .TYPE_PLUS_RIGHT-analysis-Xeditor,
  .TYPE_PLUS_RIGHT-basic-Xeditor,
  {
    float: left;

    .search-result-list {
      padding: 0;
      .search-result-item {
        display: inline;
        float: left;
        padding-right: 6px;
      }
    }

  }
  .TYPE-search.RIGHT-analysis_with_overview,
  .TYPE_PLUS_RIGHT-company-analysis_needing_overview,
  .TYPE_PLUS_RIGHT-company-analysis_needing_note,
  .TYPE_PLUS_RIGHT-company-analysis_needing_source,
  .TYPE_PLUS_RIGHT-topic-analysis_needing_overview,
  .TYPE_PLUS_RIGHT-topic-analysis_needing_note,
  .TYPE_PLUS_RIGHT-topic-analysis_needing_source,
  {
    .search-result-item.item-content {
      background: #fff;
      padding: 0 12px;
      border: 1px solid #f3f3f3;
      margin-bottom: 14px;
      float: left;
      padding-bottom:20px;
    }

  }
  .TYPE_PLUS_RIGHT-company-analysis_with_overview {
    .search-result-list:nth-of-type(1) {
      .search-result-item {
        // background: #F3F3F3;
        // margin: 10px 2px 10px;
        // padding: 0px 8px 0px 8px;
        // font-size: 0.8em;
      }
    }

  }
  .TYPE_PLUS_RIGHT-topic-analysis_needing_overview,
  .TYPE_PLUS_RIGHT-topic-analysis_needing_note,
  .TYPE_PLUS_RIGHT-topic-analysis_needing_source,
  .TYPE_PLUS_RIGHT-company-analysis_needing_overview,
  .TYPE_PLUS_RIGHT-company-analysis_needing_note,
  .TYPE_PLUS_RIGHT-company-analysis_needing_source {
    overflow: hidden;
    .search-result-item {
      width: 310px;
      float: left;
      display: inline-block;
      padding: 11px 10px !important;
      height: 53px;
      margin: 2px 18px 10px 0;

    }
    .search-result-list {
      float: left;
    }
    .paging {
      display: block;
      clear: both;
    }
    .TYPE_PLUS_RIGHT-company-logo {
      float: left;
      background: #fff;
      overflow: hidden;
      height: 42px;
      width: 58px;
      padding: 6px;
      border: 1px solid #f0f0f0;
      text-align: center;
    }
    .TYPE_PLUS_RIGHT-topic-image {
      float: left;
      background: #2f2f2f;
      overflow: hidden;
      height: 54px;
      border: 1px solid #f0f0f0;
    }
    h1 {
      clear: left;
      display: inline;
    }
    .RIGHT-note {
      float: left;
      width: 68%;
      margin: 0 10px;
      a {
        float: left;
        width: 100%;
        height: 40px;
      }
      .RIGHT-count {
        float: left;
      }
      .RIGHT-attr {
        font-size: 0.8em;
        a {
          float: right;
          width: auto;
          i {
            margin-right: 4px;
          }
        }
      }
    }

  }
  .TYPE_PLUS_RIGHT-topic-analysis_with_overview,
  .TYPE_PLUS_RIGHT-company-analysis_with_overview {
    .TYPE_PLUS_RIGHT-company-about,
    .TYPE_PLUS_RIGHT-analysis-overview {
      width: 100%;
      max-height: 150px;
      overflow: hidden;
      padding-left: 0;
    }
    .analysis-blurb-content .analysis-overview {
      font-size: 0.8em;
      color: #777;
    }
    .topic-image {
      width: 22%;
      float: left;
      padding-right: 16px;
    }
    .analysis-header {
      float: left;
      width: 100%;
      height: auto;
      h1 {
        display: inline;
        float: left;
        width: auto;
        padding:0;
        margin:0;
      }
      .note-value {
        float: right;
        width: 135px;
        text-align: right;
        font-size: 0.8em;
      }

    }
    .analysis-blurb-content {
      width: 75%;
      float: left;
    }
  }
}


/*--------Metric and Ratings------------ */

.TYPE-metric{
  .right-sidebar-button {
      width: 30%;
      margin: 16px auto;
       a {
        color: #fff;
        text-decoration: none;
        }
    }
    
}

#metric-values{
  margin:2px;
  div{
    display:inline-block;
  }
 .company-logo div {
      max-width: 20px;
    }
  .company-title,.company-metric-content{
    padding: 2px 7px;
    text-align: center;
    width: 128px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .company-title{
    color:#fff;
    background: $note-tag-companybg;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    &:hover{
      background: $note-tag-companybg-hover;
    }
  }
  .company-metric-content{
    color: #676767;
    background: #E8E8E8;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left: -4px;
  }
  .m-year{

  }
  .m-value{
    font-weight:bold;
    >div{
      overflow:inherit;
    }
  }
}