@import "base"

body
  background-color: #211e1e !important
  font-family: Roboto
  font-size: 1.3rem !important
  margin: 0
  color: #000

#page
  width: 980px
  background-color: white
  margin: 0 auto
  padding: 10px 10px 0 10px

header
  background-color: white
  margin: -10px -10px 0px -10px

@media only all and (min-width: 320px) and (max-width: 480px)
  body
    font-size: 10px !important
    overflow-x: hidden !important
    width: revert !important
  #page
    width: inherit !important
    overflow-x: hidden !important

@media (min-width: 540px) and (max-width: 1024px)
  #page
    margin: 0 auto
    padding: 10px 10px 0 10px
    width: auto

#nav-top-bar
  margin: 11px 11px 0 11px
  .new_main_menu
    list-style: none
    margin: 0
    padding: 0
    li
      display: inline-block
      margin-right: 32px
      a
        @include top-navbar-menu-colors
        font-size: 11pt
        text-decoration: none

#navbar-inner
  @include top-navbar-colors
  padding-top: 1px
  margin-left: 4px
  margin-right: 5px
  height: 42px

@media (min-width: 320px) and (max-width: 340px)
  #nav-top-bar
    margin: 11px 4px 0 0px !important
    .new_main_menu
      li
        margin-right: 2px !important
        a
          font-size: 10px !important
	  
@media (min-width: 341px) and (max-width: 480px)
  #nav-top-bar
    margin: 11px 10px 0 11px !important
  .new_main_menu
    li
      margin-right: 6px !important
      a
        font-size: 10px !important
#nav-top-bar .new_main_menu li a:hover
	color: #fff
	text-decoration: underline
#page_contents
  .separator-div
    @include site-separator-color

#project_container
  background-color: white
  margin: 0 auto
  padding: 10px 10px 0 10px
  #page-contents
    width: auto
    #project_masthead
      .no_padding
        //margin-left: 1rem
      #project_header_activity_indicator.no_padding
        margin-left: 2rem
    #project_header
      padding-left: 0
      margin-left: -1rem
  .thirtyfive_project_activity_text
    margin-top: 5.5rem
    line-height: 1.3rem
  .thirtyfive_project_activity_level_na
    top: 1rem
  .quick_reference_heading, .nutshell_heading
    padding-left: 2rem

@media (min-width: 320px) and (max-width: 480px)
  .navbar
    margin-right: 0px !important
    .btn
      font-size: 10px !important
  .company-div
    float: none !important
    .navbar_large_text
      font-size: 18px !important

.navbar
  border-width: 0
  margin-top: 15px
  margin-right: 15px
  margin-bottom: 5px !important
  margin-left: 15px
  padding: 0 0 5px 0
  min-height: 30px
  .logo-div
    height: 35px
    float: left
    .logo_link
      text-decoration: none
      margin-top: 3px
    .logo_img
      height: 100%
  .company-div
    @include top-navigation-colors
    float: left
    .navbar_small_text
      font-size: 10px !important
    .navbar_large_text
      font-size: 24px
    a
      @include top-navigation-colors
      text-decoration: none
  .spacing-div
    float: left
    width: 2px
    height: 30px
    background-color: white
    margin: 0 auto
  .separator-div
    @include site-separator-color
    @include site-separator-background-color
    float: left
    width: 1px
    height: 30px
    margin: 0 2px 0 2px
  .actions-div
    float: right
  .twitter-text
    @include twitter-background-color
    color: white
    font-weight: bold
    font-size: 0.80em
  .btn
    border: 0
    display: inline-block
    font-size: 15px
    line-height: 25px
    margin: 0
    padding: 1px 6px 0 7px
  .follow_btn
    @include follow-button-colors
    display: inline-block
    padding: 0 0 0 4px
    height: 24px
    i, p, img
      color: white
      display: inline-block
      vertical-align: top
    i
      color: #555
      vertical-align: middle
      &:before
        padding-right: 0
    p
      font-weight: normal
      line-height: 24px
      text-transform: none
      margin: 0
      border-radius: 0 4px 4px 0
    img
      margin-right: -1px
  ul
    list-style: none
    margin: 3px 0 0 0
    li
      float: left
      padding: 0 0 0 8px
#top_nav_actions
  float: right
  margin-right: 5px
  li
    padding-top: 5px

@media (min-width: 320px) and (max-width: 340px)
  #top_nav_actions
    margin-right: 0px !important

#logged_user_menu
  a
    color: black !important
    text-transform: none
    text-decoration: none
    margin: 0 0px 15px
    padding-right: 10px
    padding-top: 3px
  ul
    margin-top: 40px
    border-radius: 0
    li
      width: 150px
      a
        color: black
        margin: 0
        &:hover
          background-color: #0082C6 !important
          color: #fff !important
    .divider
      width: 100%
      height: 1px
      margin: 13px 0
      overflow: hidden
      border-bottom: 1px solid #e5e5e5


#flash-msg .alert
  border-radius: 0

#page-contents
  margin-left: 5px
  margin-right: 5px

.no_padding
  padding: 0px !important

.no-margin
  margin: 0px !important

.no-margin-left
  margin-left: 0px

.no-margin-top
  margin-top: 0px

.signature_color
  @include explore-people-signature-text-color

.mezzo
  margin-top: -1px
  border-top: 1px solid #aaa

.c3_light
  background-color: $c3_light

.error
  color: red !important
  margin: 0 0px 7px 0px !important
  font-weight: bold
  clear: both
  font-size: 12px

.invite_message
  padding: 13px
  line-height: 36px
.no_padding_left
  padding-left: 0px !important

.no_padding_right
  padding-right: 0px !important

.col-md-12
  @extend .no_padding

@media (min-width: 320px) and (max-width: 480px)
  h2
    font-size: 12px !important
    margin-top: 5px !important
  .navbar
    .follow_btn
      height: 20px !important
      p
        line-height: 20px !important

.busy, a.busy
  background: transparent asset_url('ui/spinner.gif') no-repeat center

.center
  text-align: center

.bad
  color: #8B0000

.good
  color: #006400

.strong
  font-weight: bold

.clear_both
  clear: both

table
  td,th
    vertical-align: middle !important

.valign_centre
  vertical-align: middle !important

.btn-group
  a
    margin-right: 3px

.alert
  border-radius: 0
  padding: 8px 35px 8px 14px
  .close
    font-size: 16px

.well
  @include site-well-color
  border: medium none
  box-shadow: none
  border-radius: 0px

.well#sign-in-text
  @include site-well-color
  border: medium none
  box-shadow: none
  border-radius: 0px
  width: auto

@media (min-width: 768px) and (max-width: 1024px)
  .well#new_login
    width: auto

.well#accounts-sign-up
  @include site-well-color
  border: medium none
  box-shadow: none
  border-radius: 0px
  width: auto

fieldset
  legend
    margin-bottom: 7px
    border-bottom-style: none

.btn
  font-weight: normal !important

.badge-success
  background-color: #7AB247 !important

.badge-info
  background-color: #0082C6 !important

.badge
  padding-left: 9px
  padding-right: 9px
  border-radius: 0px

.inline
  display: inline

.wrapword
  white-space: -moz-pre-wrap !important
  white-space: -webkit-pre-wrap
  white-space: -pre-wrap
  white-space: -o-pre-wrap
  white-space: pre-wrap
  word-wrap: break-word
  word-break: break-all
  white-space: normal

.right_border
  margin-top: 1.5rem
  margin-bottom: 4rem
  border-right: 1px solid #ccc
  &.top_section
    margin-bottom: 0
    padding-bottom: 0
  &.bottom_section
    margin-top: 0
    padding-top: 0

.container-fluid#project_container
  a
    @include site-link-color
  padding-left: 10px
  padding-right: 10px
  .row.mezzo
    margin: 0 -10px
  .page-contents
    margin: 0
  .no_padding_right
    padding-right: 0
  .no_padding_left
    padding-left: 0
  .manage_padding
    padding: 0 2rem
    &.chart_container
      padding-top: 2rem !important
  .highcharts-container
    width: 100% !important
  .project_row
    #did_you_know
      padding-left: 15px !important
      padding-right: 15px !important
    .resize_well
      height: 100%
      padding: 0
    .community_well, .activity_well
      height: 100%
    .bottom_section
      margin-bottom: 1.5rem
      &.languages_container
        display: flex
        justify-content: center
        .language_table_container
          align-self: center
    .community_container.top_section
      margin-top: 1.5rem
    .language_table_container
      .language_table
        width: 30rem
        .language_stat_box
          width: 15rem
          .language_legends
            width: 12rem
          .language_percentage_indicator
            width: 2rem
    .quick_reference_container,.nutshell_container,.project_summary_container,#vulnerability_per_version,#vulnerability-report,#did_you_know
      margin-bottom: 3rem
      word-wrap: break-word
      .well
        @include site-well-color
        height: 100%
        margin-bottom: 0
      .no_analysis_message .alert
        .title h3
          margin-top: 0
    .vertical_scroll_bar
      height: 250px
      overflow-y: scroll
      overflow-x: hidden
      word-wrap: break-word
    #community_rating
      .community_rating_header
        margin-bottom: 0.7em
      .add_rating_container
        margin-top: 0.7rem
        padding-top: 0.5rem
  .analysis_blank_container
    .blank_message_container
      padding: 0 15px !important
      margin-top: 15px
      .analysis_alert_container
        padding-left: 0

  @media screen and (min-width: 1280px) and (max-width:1365px)
    .project_row
      padding: 0 2rem 0rem 2rem

      .manage_padding
        padding: 0
      .community_well, .activity_well
        margin-bottom: 0
      .language_table_container
        .language_table
          width: 29rem
          .language_stat_box
            width: 14rem
            .language_legends
              width: 12rem
            .language_percentage_indicator
              width: 2rem
      .quick_reference_container
        .well
          .col-xs-4
            padding-left: 0

  @media screen and (min-width: 1366px) and (max-width:1919px)
    #project_masthead
      .project_title
        margin-left: 0
    .project_row
      .community_well, .activity_well
        margin-bottom: 0
      .language_pie_image
        width: 6rem
        img
          width: 100%
      .language_table_container
        .language_table
          width: 27rem
          .language_stat_box
            width: 13rem

  @media screen and (min-width: 1920px)
    #project_masthead
      .project_title
        margin-left: -4rem
    .project_row
      padding: 0 10rem 0rem 10rem
      .manage_padding
        padding: 0
      .community_well, .activity_well
        padding-right: 4rem
        padding-left: 4rem
        margin-bottom: 0
      .language_table_container
        .language_table
          width: 37rem
          .language_stat_box
            width: 18rem
            .language_legends
              width: 14rem
            .language_percentage_indicator
              width: 3rem

  @media screen and (min-width: 992px) and  (max-width: 1279px)
    .project_row
      .language_table_container
        .language_table
          width: 24rem
          .language_stat_box
            width: 12rem
            .language_legends
              width: 14rem
            .language_percentage_indicator
              width: 3rem
