@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#user-home
  margin-top: 20px

  .left-column
    +make-sm-column(4)

  .right-column
    +make-sm-column(8)

  .profile-wrapper
    text-align: center
    outline: 1px solid darkgrey
    max-width: 100%
    +center-block()

    > .picture
      width: 100%
      background-color: #ffe4bc
      border: 4px solid white

    > .profile-info
      background: white

      .extra-info
        padding-bottom: 3px
        &:empty
          display: none

    .name
      margin: 0px auto
      padding: 10px inherit
      color: white
      text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000

  .profile-menu
    padding-left: 0px
    width: 100%
    > a
      border-radius: 0
      border-width: 1px 0px 0px 0px
      border-color: darkgrey
      &:hover
        border-color: #888
      > span
        color: #555555
        font-size: 15px
        margin-left: 5px

.contributor-categories
  list-style: none
  padding: 0px
  margin-top: 15px

  > .contributor-category
    outline: 1px solid black
    margin-bottom: 15px

    > .contributor-image
      border: none
      width: 100%
      border-bottom: 1px solid black

    > .contributor-title
      text-align: center
      padding: 5px 0px
      margin: 0px
      background: white

.vertical-buffer
  padding: 10px 0px