Hypertabs {
  display: flex
  flex-direction: column

  height: 100% /* needed to stop scroller blowing out */

  nav {
    display: flex
    
    background: linear-gradient(to bottom, #efefef, #e5e5e5)

    section.tabs {
      flex-grow: 1
      display: flex

      div.tab {
        flex-grow: 1

        display: flex
        align-items: center
        justify-content: space-between

        font-size: .9rem
        background-color: #efefef
        overflow-x: hidden

        padding: 0 .4rem
        margin-left: .6rem
        border: 1px gainsboro solid
        border-bottom: none

        -selected {
          color: #222
          background-color: #fff
          /* border: 1px #bababa solid */
          border-bottom: none

          a.close {
            visibility: visible
          }
        }

        -notify {
          background-color: orange;
        }


        a {
          color: #666

          :hover {
            color: #0088cc
            text-decoration: none
          }
        }

        a.link {
          flex-grow: 1
          flex-shrink: 0
          overflow-x: hidden
          max-width: 220px
          white-space: nowrap
          text-overflow: ellipsis
        }

        a.close {
          visibility: hidden
        }
      }

    }

    div.extra {
      display: flex
      align-items: center
    }
  }

  section.content {
    display: flex

    height: 100% /* needed to stop scroller blowing out */

    div.page {
      flex-grow: 1

      display: flex /* hack to get give Scroller context it's needed */

      padding-top: .2rem
    }
  }
}