.border-right
    border-right 1px solid #ddd

.border-left
    border-left 1px solid #ddd

.tab-notification
    color #fff
    background-color #51a351

.chat-form
  margin-bottom: 10px
  position: relative

  textarea
    margin-bottom: 0.618em
    line-height: 1.618em

.guidelines-not-accepted p
  border: 1px solid #ccc
  padding: 1em;
  margin-bottom: 0.5em;

.slight-vertical-padding
  clear: both
  padding-top: 0.618em

.chat-buttons
  @extend $hrpg-button
  float: right;
  input
    margin-right: 0.618em

.chat-message
  markdown, span.time
    padding: 0 3px
    line-height: 1.618em

  .long-title .tooltip
    white-space: normal
  
  span.time
    white-space: nowrap
    
  .chat-plus-one
    opacity: 0
    background-color: #eee
    padding: 3px 3px 0px 3px

  &:hover .chat-plus-one
    opacity: 1
    color: #999

.tavern-chat, .party-chat
  
  li
    padding-top:15px
    padding-bottom:15px
    border-bottom 1px solid #ddd
    word-wrap:break-word
    position:relative

    &.highlight
      background: #EEE
      
    label
        margin-right:5px
    
    .float-label
      float:left
      position:absolute
      top:17px;
    
    .hidden-label
      visibility:hidden
      
    .scrollable-message
      max-height: 6.472em
      overflow-y:auto

      h1, h2, h3, h4, h5
        // 20px normally
        margin-top:5px
        margin-bottom:5px
    
    .expander
      float: right
      position: absolute
      bottom: 18px
      right: 20px
      background: white
      max-width: 20px
      max-height: 20px
      width: 100%
      height: 100%
      text-align: center

  .own-message
    border-left: 4px solid #333
    padding-left: 2px
    
  markdown
    p:first-child
      display:inline
      
    img
      max-height:50px
      vertical-align:top

    li
      border:0
      padding-top:0px
      padding-bottom:0px

.panel-tiers
  div
    display: none
    margin-top: 10px


// Name tags – For color variables, see global-colors.styl

hrpg-contributor-label-mixin($hrpg-contributor-color)
  //@extend $hrpg-label
  hrpg-label-color-mixin($hrpg-contributor-color)

.label-contributor-1
  hrpg-contributor-label-mixin($color-contributor-one)
.label-contributor-2
  hrpg-contributor-label-mixin($color-contributor-two)
.label-contributor-3
  hrpg-contributor-label-mixin($color-contributor-three)
.label-contributor-4
  hrpg-contributor-label-mixin($color-contributor-four)
.label-contributor-5
  hrpg-contributor-label-mixin($color-contributor-five)
.label-contributor-6
  hrpg-contributor-label-mixin($color-contributor-six)
.label-contributor-7
  hrpg-contributor-label-mixin($color-contributor-seven)
.label-contributor-8
  hrpg-contributor-label-mixin($color-contributor-mod)
.label-contributor-9
  hrpg-contributor-label-mixin($color-contributor-staff)
.label-npc
  hrpg-contributor-label-mixin($color-contributor-npc)
  color: #00FF00 !important


#market-tab
    position relative
    height 500px

.buttonList li
    margin: 5px
    
.option-group .option-time
    padding: 0px 5px

// Autocomplete [TODO] make this nicer
.list-at-user 
    width: 100%
    max-width: 120px
    position: absolute
    background: white
    border: 1px solid #a4a4a4
    z-index: 10


.list-at-user li 
    line-height:14px
    border-bottom: 1px solid #a4a4a4
    list-style-type: none


.list-at-user li:hover 
    cursor: pointer
    background: #b9dff4


.list-at-user li span 
    margin: 2px
    font-size: 11.844px
    margin-left: 5px
    display: inline-block


.list-cur 
    background: #b9dff4