daitokai/daitokaiet

/* social */
.social
  #data_table
    th
      background: #333
      text-align: center
    .value
      width: 5em
    .date
      width: 5em
      text-align: center

.arrow_box
  display: none
  position: absolute
  padding: 10px
  -webkit-border-radius: 8px
  -moz-border-radius: 8px
  border-radius: 8px
  background: #333
  color: #fff

  &:after
    position: absolute
    bottom: 90%
    left: 30%
    width: 0
    height: 0
    margin-left: -10px
    border: solid transparent
    border-color: rgba(51, 51, 51, 0)
    border-bottom-color: #333
    border-width: 10px
    pointer-events: none
    content: " "

.record
  p
    font-size: 1.4em
    font-weight: bold

.unfollow-link
  .unfollow
    display: none
  &:hover
    color: white
    background-color: #d9534f
    border-color: #d43f3a
    .follow
      display: none
    .unfollow
      display: block

ul.result
  text-decoration: none
  li
    list-style: none
    .card
      margin: 4px
      padding: 8px
      border: 1px solid silver
      h1
        margin-top: 0
        margin-bottom: 0
        display: inline-block
        max-width: 240px
      h2.right
        float: right
      .user-icon
        margin-top: 4px
        float: left
      .follow-link, .unfollow-link
        float: right
        margin-top: 10px
      p
        margin-top: -14px
        padding-left: 52px
        margin-bottom: 0

@media (max-width: 480px)
  ul.result
    li
      .card
        padding: 8px 8px 8px 8px
        h1
          padding-bottom: 20px
        h2
          display: inline-block
        .follow-link, .unfollow-link
          display: inline-block
          width: 100%
          margin-top: 10px
        p
          margin-top: -20px