/* site header
-------------------- */

.header-wrap
  width: 100% // this is for the sticky
  height: 10em
  padding: 2.25em 1.5em 2em
  z-index: 1
  background: #f5f5f5
  border-bottom: 1px solid #ccc
  margin-top: -1px

.user-menu
  position: absolute
  top: 0.5em
  right: 0.5em
  .tile
    cursor: pointer
    font-weight: 400
    color: #494949
    color: hsla(0, 0%, 15%, 0.8)
    background-color: darken($better, 10%)
    &:hover, &:focus
      background-color: darken($best, 20%)
    &:active
      background-color: darken($best, 30%)
      color: white

.user-reporter:after
  content: '▾'
  float: right


/* flyout navigation pattern
----------------------------- */
.stacked > li
  display:list-item
  > a
    display:block

.flyout, .flyout-alt
  position: relative
.flyout-content
  position: absolute
  top: 100%
  right: -99999px
  height: 0
  overflow: hidden
.flyout:hover > .flyout-content
  right: 0
.flyout-alt:hover > .flyout-content
  top: 0
  right: 100%

.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content
  height: auto
  overflow: visible

.flyout .tile {
  width: 5em;
}
.stacked .tile {
  outline: 0
  border: 1px solid rgba(0,0,0,0.2)
  border-top: 0
}

/* hero box
-------------------- */
.site-header
  display: table
  margin: 0 auto
  width: 100%

.hero-avatar, .party-member-avatar
  display: table-cell

@media (min-width: 37.5em)
  .site-header
    width: 80%
@media (min-width: 60em)
  .site-header
    width: 60%

.hero-avatar, .party-member-avatar
  padding: 0
  margin: 0
  vertical-align: top

.hero-avatar
  width: 90px

.party-member-avatar
  width: 90px


/* progress bars
-------------------- */
.hero-stats
  padding: 0 0.5em
  display: table-cell
  vertical-align: middle
  
  .meter, .bar
    box-shadow: none
    border-radius: 0

  .meter
    position: relative
    background: white
    opacity: 1
    outline: 1px solid rgba(0,0,0,0.2)
    outline-offset: -1px
    overflow: visible // firefox outline fix
    margin-bottom: 1.5em
    height: 2em

    .bar
      background: none
      border: 1px solid rgba(0,0,0,0.2)
      height: 100%


  .health .bar
    background-color: darken($worse, 38%)
  .experience .bar
    background-color: darken($neutral, 30%)

  .meter-text
    position: absolute
    top: 0
    right: 1em
    z-index: 1
    color: #111
    line-height: 2