html, body {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  padding: 0;
  height: 100%;
  background: #222;
}

* {
  box-sizing: border-box;
  outline: none;
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: black;
  }
  ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #444;
    &:hover {
      background-color: #222;
    }
  }
}

div[static] {
  font-size: 11px;
  left: 4px;
  bottom: 4px;
  position: absolute;
  color: #777;
  a {
    color: #C73;
    text-decoration: none;
  }
}

div[root] {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  div[main] {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    div[spacer] {
      flex: 1;
      -webkit-flex: 1;
    }
    div[content] {
      position: relative;
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
      div[facebook] {
        flex: 1;
        -webkit-flex: 1;
        display: flex;
        display: -webkit-flex;
        div {
          margin: 0 16px 0 auto;
          padding: 16px;
          background: fade(black, 10%);
          align-self: flex-end;
          -webkit-align-self: flex-end;
        }
      }
      div[flash-wrapper] {
        color: fade(white, 50%);
        padding: 16px;
        background: fade(black, 10%);
        a {
          color: #C73;
          display: block;
          text-align: center;
        }
      }
      div[meta] {
        flex: 1;
        -webkit-flex: 1;
        align-self: flex-end;
        -webkit-align-self: flex-end;
        span {
          margin: 0 8px 0 16px;
          color: #555;
          display: inline-block;
          max-width: 280px;
          background: fade(black, 10%);
          &:not(:empty) {
            padding: 16px;
          }
          a {
            color: #C73;
            text-decoration: none;
          }
        }
      }
    }
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow-y: scroll;
    li {
      padding: 8px;
      cursor: pointer;
      border-left: 3px solid #111;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      background: #666;
      &:not(:last-child) {
        margin-bottom: 1px;
      }
      &:hover {
        color: #999;
        background: #555;
        border-left: 3px solid #BBB;
      }
      &:active {
        color: #888;
        background: #444;
      }
      &[visited] {
        color: #777;
        background: #333;
        border-left: 3px solid #1a1;
      }
    }
  }
}