codecombat/app/styles/sales-view.sass

#sales-view

  background-color: #F5F5F5
  font-family: Helvetica, sans-serif
  font-size: 15px
  line-height: 20px

  // TODO: better way to remove content styling?
  #site-content-area
    width: 100%
    background-color: #F5F5F5
    border: none
    margin: auto
    padding: 0px
    min-height: inherit

  .btn-contact-us
    background-color: #3878DE
    border: none
    color: #FFFFFF
    font-size: 18px
    margin-top: 20px
    padding: 20px
    width: 330px
    text-decoration: none
    text-transform: uppercase

    div
      text-align: left

    img
      float: left
      margin-right: 10px


  .btn-create-account, .btn-enter-courses
    background-color: #09AC48
    color: #FFFFFF
    display: inline-block
    font-size: 18px
    margin: 10px
    padding: 24px
    width: 400px
    text-decoration: none
    text-transform: uppercase

  .btn-login-account
    color: #FFFFFF
    text-decoration: underline

  .btn-setup-class
    margin-top: 20px
    text-transform: uppercase
    width: 300px

  .section-header
    font-family: Merriweather
    font-size: 23px
    line-height: 29px
    padding: 0px 24px 0px 24px
    border-bottom: 1px solid lightgray

  .section-subheader
    font-family: Helvetica, sans-serif
    font-size: 13px
    color: #727272
    line-height: 15px

  .text-right
    text-align: right

  #top-page-content
    background-image: url('/images/pages/sales/hero_background.png')
    background-size: cover
    color: #FFFFFF

    td
      vertical-align: top

    .big-quote-mark
      font-family: Merriweather
      font-size: 130px
      font-weight: 700
      line-height: 130px
      margin-right: 0px
      opacity: 0.5

    .hero-quote-container
      margin: 20px 20px 20px 0px
      width: 60%

    .hero-quote
      color: #FFFFFF
      font-family: Merriweather
      font-size: 38px
      font-weight: 700
      line-height: 48px

    .hero-quote-attribution
      font-family: Helvetica, sans-serif
      font-style: italic
      font-size: 15px
      color: #FFFFFF
      line-height: 20px
      margin-right: 100px
      text-align: right

    #down-arrow
      padding: 20px

  #main-content
    text-align: left
    display: inline-block
    width: 850px

    #blurb1
      padding: 0px 20px 0px 20px

    .blurb-subtitle
      font-size: 17px
      font-weight: bold

    #course-comparisons
      font-size: 12px
      margin: 20px
      width: 90%

      img
        width: 100%

    .img-caption
      font-family: Helvetica, sans-serif
      font-style: italic
      font-size: 11px
      color: #727272
      line-height: 13px

    .img-face
      background-color: #f0e5c7
      border-radius: 50%
      height: 100px
      width: 100px

    .img-game
      width: 100%

    .teacher-quote
      font-family: Merriweather
      font-weight: 300
      font-size: 18px
      line-height: 20px

    .teacher-name
      font-family: Helvetica, sans-serif
      font-weight: 700
      font-size: 16px
      line-height: 19px

    .teacher-location
      font-family: Helvetica, sans-serif
      font-style: italic
      font-size: 12px
      line-height: 14px

    #quote1-container
      background-image: url('/images/pages/sales/quote1.png')
      background-repeat: no-repeat
      background-size: 100% auto
      height: 265px
      padding: 12px
      margin-right: 10px

      .hero-quote-attribution
        margin-top: 60px

    #quote2-container
      background-image: url('/images/pages/sales/quote2.png')
      background-repeat: no-repeat
      background-size: 100% auto
      height: 265px
      padding: 12px
      margin-left: 10px

      .teacher-quote
        margin-top: 60px

      .hero-quote-attribution
        margin-top: 20px

    .twitter-attribution
      font-family: Helvetica
      font-weight: 700
      font-size: 11px
      line-height: 14px
      color: black
      display: inline-block
      text-decoration: none