opengovernment/askthem

@import load

div.attr
  span.attr
    color: $lightblue
    display: inline-block
    margin-right: 20px
    font-size: 0.813em
    line-height: 1.385em
    &:last-child
      margin-right: 0

div.avatar
  +border-radius(30px)
  display: inline-block
  overflow: hidden
  width: 100%
  img
    float: left
    width: 100%
    height: auto

.preview-avatar
  +border-radius(15px)
  position: relative
  top: 10px
  left: -10px

.profile div.avatar
  +border-radius(65px)
  max-width: 130px

.people-list > li div.avatar
  max-width: 60px
  width: 17.647058823529%
  vertical-align: top

.people-list .avatar
  width: 60px
  height: 60px

.recipient div.avatar
  max-width: 60px
  width: 17.647058823529%
  vertical-align: top

.edit_avatar
  width: 100%
  max-width: 130px
  +border-radius(50%)
  border: 1px solid $darkblue

.person_wikipedia
  line-height: 1.5

#user_remove_image
  margin-bottom: 1em

/*
 *Representatives

section.people
  header
    position: relative
    a.cta-pill
      float: right
  div.person_info
    display: inline-block
    @media (min-width: 420px)
      width: 59.61538%
  div.avatar
    +border-radius(60px)
    border: none
    display: inline-block
    overflow: hidden
    width: 17.204301075269%
    vertical-align: top
    img
      +border-radius(40px)
      float: left
      width: 100%
      background-color: #d8f2f6
  div.person_details
    display: inline-block
    margin-bottom: 24px
    margin-left: 4.301075268817%
    width: 75%
  .attr
    span.count
      display: inline-block
      margin-right: 20px
      color: #7b969e
      font-size: 0.813em
      line-height: 1.385em
  &.listings
    h1
      float: left
      clear: both
      display: inline-block

.people-list > li
  display: inline-block
  padding-bottom: 30px
  @media (min-width: 420px)
    width: 50%
    float: left
  div.person-info
    display: inline-block
    margin-left: 5.128205128205%
    width: 76.470588235294%
    h2
      color: #3b626c
      display: inline-block
      +RobotoRegular
      font-size: 1.125em
      line-height: 1.333em
      a
        color: #3c636e
        &:hover
          color: $linkhover
    span.jurisdiction
      color: $middlegrey
      display: inline-block
      font-size: 0.813em
      +Helvetica
      font-weight: 100
      line-height: 1.385em
    span.stats
      color: #7b969e
      display: inline-block
      font-size: 0.813em
      +Helvetica
      line-height: 1.385em
      span
        display: inline-block
        padding-right: 20px
        margin-left: 10px
        position: relative
        &:first-child
          margin-left: 0px
          &:after
            color: #E5E5E5
            content: "\2022"
            position: absolute
            right: 0

.is-verified
  margin:
    top: .25em
    bottom: .25em
    //left: 160px
  display: inline-block
  position: relative
  color: $green

.verified-tooltip
  display: none
  +box-shadow(0 3px rgba($black, .05))
  +border-radius(6px)
  background-color: #f6fae9
  font-size: 12px
  color: $green
  padding: 10px
  width: 100px
  position: absolute
  left: 30px
  top: -8px
  z-index: 100
  &:before
    content: ''
    height: 0
    width: 0
    border:
      right: 12px solid #f6fae9
      top: 12px solid transparent
      bottom: 12px solid transparent
    left: -8px
    top: 18%
    position: absolute

.is-showing
  display: inline

.is-hidden
  display: none

span.tip.private.hover-tip
  display: none
  top: -2px
  right: -145px
  background-color: #f8f8f8
  z-index: 10
  &:before
    border:
      top: 8px solid transparent
      right: 8px solid #f8f8f8
      bottom: 8px solid transparent

span.tip.private.hover-tip.is-showing
  display: block

/*
 *User Profiles
section.profile
  padding-top: 42px
  div.avatar
    vertical-align: middle
  div.person-info
    display: inline-block
    vertical-align: middle
    margin-left: 1.923076923077%
    @media (max-width: 420px)
      text-align: center
    span.loc
      font-size: 1.125em
      line-height: 1.667em
    ul.links>li
      display: inline-block
      margin-right: 04.615384615385%
      a
        display: block
        font-size: 0.813em
        line-height: 1.846em

.rating
  padding:
    top: 1em
    right: 3em
    bottom: 1em
  line-height: 1.5

.unaffiliated-people
  margin-top: 60px

ul.single-featured li
  padding-bottom: 0
  div.avatar
    height: 40px
    width: 40px
  div.person-info
    margin-left: 4%
    span.jurisdiction
      display: none
    span.stats
      span
        padding-right: 10px
    .is-verified
      display: none

.person-list-button
  display: block
  width: 35%
  margin-top: .5em
  margin-left: 18%
  text-align: center