codecombat/app/styles/employers.sass

#employers-view
  .artisanal-claim
    background: transparent url(/images/pages/employer/artisanal_claim.png) no-repeat center
    margin-bottom: 5px
    height: 24px

  .employer-button
    background: #fce232 /* Old browsers */
    background: -moz-linear-gradient(top, #fce232 0%, #ea8e2b 100%) 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fce232), color-stop(100%,#ea8e2b))
    background: -webkit-linear-gradient(top, #fce232 0%,#ea8e2b 100%) 
    background: -o-linear-gradient(top, #fce232 0%,#ea8e2b 100%) 
    background: -ms-linear-gradient(top, #fce232 0%,#ea8e2b 100%) 
    background: linear-gradient(to bottom, #fce232 0%,#ea8e2b 100%)
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce232', endColorstr='#ea8e2b',GradientType=0 )
    vertical-align: text-bottom
    margin-left: 30px

  #filter-column
    margin-left: 0px
    padding-right: 0

  #candidates-column
    padding-left: 5px
    padding-right: 5px

  //filter panels
  #filter
    border: 2px solid #CBCBCB
    margin-bottom: 10px
    .panel-heading
      background-color: #D9D9D9
      cursor: pointer
      border-top-left-radius: 0px
      border-top-right-radius: 0px
      #folder-icon
        margin-right: 5px
        color: #919191
    .panel-body
      background-color: #D9D9D9
      border-top-left-radius: 0px
      border-top-right-radius: 0px
      padding: 5px 10px 10px 10px
    .panel
      border: 1px red
      border-radius: 0px
     
  #filters
    margin-bottom: 10px
    .filter_section
      min-width: 25%
      margin-right: 10px
      display: inline-block
      vertical-align: top

    h4
      margin-bottom: 5px

    label
      display: block
      font-weight: normal
      margin-bottom: 0
      cursor: pointer
      input
        margin-right: 5px

  .get-started-button
    vertical-align: text-bottom
    margin-left: 10px
  
  #filter-button, #create-alert-button
    float: right
    
  #login-link, #logout-link
    position: absolute
    right: 10px
    top: -25px
    color: black
    display: inline-block
    :visited
      color: black
  #logout-link:hover
    cursor: pointer
      
  #tagline, .hiring-call-to-action
    width: 100%
    text-align: center
    display: inline-block
    margin-top: 20px
    h1, h2, h3 
      display: inline-block
    button
      display: inline-block
  h1, h2, h3, h4
    font-family: Arial, Helvetica, sans-serif
    color: #333333
  #tagline
    margin-bottom: 20px

  .see-candidates-header
    margin: 30px
    text-align: center

    #see-candidates
      cursor: pointer

  .reasons
    height: 275px
    margin-bottom: 25px
    width: 100%    

    .information_row
      height: 150px
      padding-right: 15px
    
    .reason
      width: 33%
      padding-left: 3%
      height: 150px
      display: inline-block
      vertical-align: top
    .employer_icon
      display: block
      width: 125px
      margin: 0px auto
      
    .reason_long
      width: 50%
      padding-left: 3%
      display: inline-block
      .employer_icon
        display: inline-block
        width: 25%
        max-width: 125px
        vertical-align: text-bottom
      .reason_text
        display: inline-block
        width: 75%
  #bottom_row
    height: auto
  #candidate-table
    background-color: #E7E7E7
    table
      cursor: pointer
      width: 96%
      margin-left: 2%
      margin-right: 2%
      margin-bottom: 30px
      .tag_column, .location_column, .education_column, .work_column
        width: 33%
        display: inline-block
        img
          margin-right: 5px
          vertical-align: top
      tr 
        .candidate-picture
          background-color: transparent
          background-size: cover
          background-repeat: no-repeat
          background-position: center
          width: 75px
          height: 75px
          border-radius: 5px
          overflow: hidden
          margin-right: 10px
          &.anonymous
            background-size: contain
          
        .candidate-description
          width: 100%
          vertical-align: bottom
          div
            text-overflow: ellipsis
            overflow: hidden
            height: 17px

      td.candidate-description
        padding-bottom: 5px
      td.candidate-name-cell
        padding-top: 15px
        padding-bottom: 5px
        font-size: 18px

      .border_row
        border-bottom: 1px solid #d3d3d3
        vertical-align: bottom
        td
          padding-top: 5px
          padding-bottom: 15px

  .teaser-profiles #candidate-table table
    .tag_column, .location_column, .education_column, .work_column
      width: 25%
    tr
      .candidate-description
        padding-top: 15px
      .candidate-picture
        width: 50px
        height: 50px
      
  #results
    display: inline-block
  .tablesorter
    //img
    //  display: none

    .tablesorter-header
      cursor: pointer
      &:hover
        color: black

      &:first-child
        // Make sure that "Developer #56" doesn't wrap onto second row
        min-width: 110px

    .tablesorter-headerAsc
      background-color: #cfc

    .tablesorter-headerDesc
      background-color: #ccf

    tr
      cursor: pointer

    tr.expired
      opacity: 0.5

    code
      background-color: rgb(220, 220, 220)
      color: #555
      margin: 2px 0
      display: inline-block
      text-transform: lowercase

    td:nth-child(3) select
      min-width: 100px
    td:nth-child(6) select
      min-width: 50px
    td:nth-child(7) select
      min-width: 100px

#employers-view, #profile-view.viewed-by-employer
  #outer-content-wrapper, #intermediate-content-wrapper, #inner-content-wrapper
    background: #B4B4B4

  .main-content-area
    background-color: #EAEAEA