$sizes: (('fifteen', 15, 1), ('twenty', 20, 0), ('twentyfive', 25, 19), ('thirtyfive', 35, 23))
$pai_levels: (('very_high',0), ('high', 1), ('moderate', 2), ('low', 3), ('very_low', 4), ('inactive', 5), ('na', 6), ('new', 7))

@each $size in $sizes
  $icon_family: nth($size, 1)
  $dimension:   nth($size, 2)
  $left_margin: nth($size, 3)
  $activity_level: #{$icon_family}_project_activity_level

  #{$activity_level}
    width:  #{$dimension}px
    height: #{$dimension}px
    margin-left: #{$left_margin}px

  @each $level in $pai_levels
    $postfix:    nth($level, 1)
    $multiplier: nth($level, 2)
    .#{$activity_level}_#{$postfix}
      @extend #{$activity_level}
      background-image: asset_url("projects/pai/pai-#{$dimension}px.png")
      @if $dimension == 35
        background-position: -#{($multiplier * $dimension)+($multiplier*2)}px 0
      @else if $dimension == 25
        background-position: -#{($multiplier * $dimension)+($multiplier*1.3)}px 0
      @else if $dimension == 20
        background-position: -#{($multiplier * $dimension)+($multiplier*1)}px 0
      @else
        background-position: -#{($multiplier * $dimension)+($multiplier*0.8)}px 0
      background-repeat: no-repeat
      position: absolute
      top: 1rem

.margin_top_two
  margin-top: 2rem

.thirtyfive_project_activity_text
  width: 200px

.row-eq-height
  display: -webkit-box
  display: -webkit-flex
  display: -ms-flexbox
  display:         flex

#projects_index_list, #managed_projects_list
  margin: 20px 0 0 0
  .well
    padding: 15px
    h2
      line-height: inherit
  .compare
    margin: -15px -15px 0 0
  .sp_form.styled
    background-color: #DBE4EE
    padding: 6px 4px 6px 10px
    margin: 0
    border-radius: 0 4px 0 0
    -webkit-border-radius: 0 4px 0 0
    &.selected
      background-color: #0088cc
      color: #fff
  .logo
    margin: 25px 20px 25px 0
  .info
    width: 490px
    i
      float: right
  .claimed-by-org
    margin: 0 15px 0 10px
  .desc
    margin-bottom: 10px
    &.last
      display: none
      margin-bottom: 20px
  .stats
    margin: 0 15px 0 0
    span
      margin-left: 10px
    a
      width: 80px
      text-align: right
      display: inline-block
      font-weight: bold
      font-size: 1.2em
      span
        margin-left: 0
        font-size: 12px
  .reviews-and-pai
    position: relative
    @each $level in $pai_levels
      .twentyfive_project_activity_level_#{nth($level, 1)}
        margin-left: 0
        top: 0
    .twentyfive_project_activity_text
      margin: -5px 0 0 25px
      text-align: center
      width: 65px
      min-height: 35px
    .stars
      margin: 10px 0 5px 4px
    .reviews
      clear: left
      width: 85px
      text-align: center
  .add-info
    clear: left
    width: 574px
    .main_language
      margin-left: 85px
    a
      text-decoration: underline
  .tags
    clear: left
    margin-top: 10px

.cocomo-form
  border: 2px solid #E0E4E8
  .control-label
    margin-bottom: 2px
  .caption
    background-color: #E0E4E8
    padding: 0.5em

#cocomo_page
  li
    margin-left: 30px
  .chzn-results
    li
      margin: 0
      width: 130px
      overflow: auto

#project_masthead
  height: 85px

  #project_icon
    margin-top: 8px

  #widgets
    width: 31rem

  #project_header
    padding-right: 0px
    .project_title
      margin: 0px 0px 0px 0px
      h1
        margin: 15px 0px 6px 0px
      i
        @include project-icon-colors

  .about
    margin-top: 10px
    li
      margin: 15px 0 15px 30px
#add_this
  margin-left: 5.3rem
  margin-top: 5.3rem
  a
    @include add-this-link-colors

#project_container
  #project_masthead
    #widgets
      width: 30rem
// settings page styles
.settings_module
  :cursor pointer
  &:hover
    h4
      text-decoration: underline
    .module_icon
      &.basics
        background-position: 0 -40px
      &.code_locations
        background-position: -40px -40px
      &.aliases
        background-position: -80px -40px
      &.logo
        background-position: -120px -40px
      &.links
        background-position: -160px -40px
      &.orgs_manage_projects
        background-position: -599px -40px
      &.permissions
        background-position: -200px -40px
      &.licenses
        background-position: -240px -40px
      &.tags
        background-position: -280px -40px
      &.history
        background-position: -320px -40px
      &.managers
        background-position: -360px -40px
      &.news
        background-position: -400px -40px
      &.badges
        background-position: -891px -40px
  .settings_description
    width: 240px
    padding-left: 10px
  // module icon sprites
  .module_icon
    background-image: asset_url('icons/ohloh-icon-sprite.png')
    background-repeat: no-repeat
    height: 40px
    width: 40px
    display: block
    &.basics
      background-position: 0 0
    &.code_locations
      background-position: -40px 0px
    &.aliases
      background-position: -80px 0px
    &.logo
      background-position: -120px 0px
    &.links
      background-position: -160px 0px
    &.orgs_manage_projects
      background-position: -599px 0px
    &.permissions
      background-position: -200px 0px
    &.licenses
      background-position: -240px 0px
    &.tags
      background-position: -280px 0px
      height: 36px
      width: 31px
    &.history
      background-position: -320px 0px
    &.managers
      background-position: -360px 0px
      width: 36px
    &.news
      background-position: -400px 0px
    &.badges
      background-position: -890px 0px

#projects_similar_page
  .project_content_title
    height: 40px
  @each $level in $pai_levels
    .fifteen_project_activity_level_#{nth($level, 1)}
      position: absolute
      top: 0px !important

#links_index_page
  .links
    width: 600px

.license-template
  display: none

#vulnerability-report
  word-wrap: break-word
  .score-card
    .range-good
      padding-left: 0
    .range-poor
      padding-right: 0
    .indicator
      padding-left: 10px
      padding-right: 10px
    .range-good, .range-poor
      font-size: 1.2rem
      text-align: center

#pss_bg, #pvs_bg
  height: 45px
  background: -webkit-linear-gradient(left, #CCE6F4, #18306F)
  background: -o-linear-gradient(left, #CCE6F4, #18306F)
  background: -moz-linear-gradient(left, #CCE6F4, #18306F)
  //standard syntax
  background: linear-gradient(to right, #CCE6F4, #18306F)

#pss_bg
  .meter
    height: 10px
    width: 88%
    background: #ccc
#pvs_bg
  margin-bottom: 9px

.pointer
  width: 10px
  height: 55px
  display: inline-block
  background: #717171
  margin-top: -5px

.pointer-value
  font-size: 10px
  display: table-cell
  padding: 3px
  color: #fff
  font-weight: 900
  width: inherit

#report-divider
  margin-top: 14px

.pvr_link
  float: right
  padding: 10px

#did_you_know
  &.col-md-4
    li
      margin-bottom: 1.2em
      padding: 0 20px
  &.col-md-12
    li
      display: table-cell
      width: 1%
      padding: 0 2em
#vulnerability_version_chart
  margin: 0 auto
  width: 100%
  height: 250px

#vulnerability_per_version
  padding: 19px 
  .well
    background: white !important

  .title span
    font-size: 12px
    font-style: italic

.project_licenses
  margin-bottom: 1em
  .all-license-div
    margin-top: 18em
  .license_title_container
    margin-top: 1em
    padding-left: 1em
    h4
      margin-bottom: 0
  .license_panel_title
    padding-left: 1em
  .license_details
    min-height: 50px
    i.fa
      margin-top: 0.3em
    p
      margin: 0 0 3px
    h5
      margin-bottom: 0.5em
    .license_title
      margin-top: 0
      margin-bottom: 1em
  .license_details > .row:first-of-type
    display: flex
  .tipso_style
    border-bottom: medium none
    cursor: pointer
  #permitted
    @include licenses-permitted-color
    margin-top: -20px
    .well
      padding-bottom: 0
      padding-top: 0
      height: 85%
      p
        margin-left: 2em
  #forbidden
    @include licenses-forbidden-color
    margin-top: -20px
    padding-left: 0
    .well
      padding-bottom: 0
      padding-top: 0
      height: 85%
      p
        margin-left: 2em
  #required
    @include licenses-required-color
    margin-top: -5px
    padding-left: 0
    .well
      padding-bottom: 0
      padding-top: 0
      height: 91%
      p
        margin-left: 2em
    h5
      margin-top: 1em
.project_security
  .security-panel-title
    padding-left: 1em
    margin-top: 30px !important

.versions_affected
  height: 70px !important
  overflow-y: auto
  word-break: break-word

#vulnerabilities_index_page
  .no_vulnerability
    text-align: center
    margin-bottom: 25px
  .vul_description
    padding-right: 30px
    text-align: justify
  .release_timespan
    @include vulnerabilities-release-timespan-colors
    width: 40px
    height: 26px
    padding: 0
    text-align: center
    line-height: 25px
    border: 0
    &.disabled
      background-color: #9A9A9A !important
    &:hover
      font-weight: bold !important

.rating_stars_value
  float: left
  padding-top: 4px
  padding-left: 2px

.security_blog_link
  float: right
  padding: 0 30px 10px 0
  margin-top: -20px

.vulnerability_filter_severity
  .title
    font-weight: 400
    font-size: 1.1em
    line-height: 1.2

.vulnerability_filter_version
  .title
    font-weight: 400
    font-size: 1.25em
    line-height: 1.2

.vulnerability_filter_wrapper
  .ctrl
    width: auto
  .title
    padding-right: 1rem

#vulnerability-chart-divider
  padding: 40px 4rem 20px 4rem !important

.vulnerabilities-datatable
  tbody tr
    &:nth-child(odd)
      @include site-well-color
  position: relative
  btn i
    @mixin site-link-color
    display: inline
    &.disable
      @include vulnerabilities-disabled-text-color
    &:hover
      cursor: pointer
    &.fa.fa-sort-amount-desc, &.fa.fa-sort-amount-asc
      padding-top: 3px

.overlay-loader
  position: absolute
  display: none
  top: 0
  z-index: 1
  opacity: 0.7
  width: 100%
  height: 100%
  background-color: #000
  .loader
    display: block
    margin-top: 5px
    margin-left: auto
    margin-right: auto

#project_badges_page
  margin-bottom: 2rem
  .title
    margin-bottom: 2rem
  .no-left-padding
    padding-left: 0
  .badge_table_container
    .table-responsive
      .table
        tbody
          tr td
            padding-top: 1.5rem
            padding-bottom: 1.5rem
            vertical-align: top !important
            .btn-mini.col-xs-12
              padding: 0.12rem 1.5rem
              width: 100%
            .url_update_btn
              color: green
              font-size: 2.1rem
              cursor: pointer
            .edit_url_close_btn
              color: red
              font-size: 2.1rem
              cursor: pointer
            #save_badge
              margin-bottom: 0.5rem

.project_summary_container
  section
    margin-bottom: 1em
    &:last-child
      margin-bottom: 0

#project_tags, #project_badges
  .title
    @include site-link-color
    margin-bottom: 0.3em

#project_badges
  .badges img
    margin-left: 5px
    &:first-child
      margin-left: 0
  .more_badges p
    float: right

.license_link
  float: right
  margin-top: -2em
  padding: 0 2em 1em 0
.box
  display: inline
  padding: 0 20px 10px 0
  float: left
dl.kpi
  width: 180px
  height: 88px
  background-color: #d9edf7
  float: left
  padding: 10px 0
  border: 1px solid darken(#d9edf7, 15%)
  em
    vertical-align: bottom
    font-style: normal
  dd 
    color: #31708f
    text-align: center
    font-family: arial,helvetica,clean,sans-serif
    font-size: 24px
    margin-left: 0
    padding: 10px 5px
    line-height: 20px
    
  dd.snapshot-date
    font-size: 24px

  dt 
    text-align: center
    font-size: 15px
    font-weight: normal
    color: #31708f
    line-height: 20px

  p.information
    text-align: left
    font-size: 14px
    margin-left: 0
    padding-left: 10px
    padding-bottom: 5px
#scan_data_row
  margin: 0 30px
.scan_data_title
  padding-left: 1em
