.head {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.head-inner {
  display: table-row;
}

.head-logo-wrap {
  display: table-cell;
  padding: 10px 0;
}
.head-logo {
  padding: 10px 14px;
  margin-left: -14px;
  z-index: 5;
  font-weight: bold;
  font-size: $fs + 2px;
  left: 0;
  background-color: transparent;
  display: inline-block;

  > a:hover {
    text-decoration: none;
  }

  &-title {
    color: $fg;
    padding-bottom: 3px;
    &-author {
      font-weight: normal;
      color: $grey;
    }
  }

  &-subtitle {
    font-size: 14px;
    color: $fg;
    font-weight: normal;
    padding-top: 2px;
    line-height: 18px;
  }

}
.head.no-subtitle .head-logo {
  padding-bottom: 0;

  > a {
    border-bottom: 1px transparent solid;
    display: inline-block;

    &:hover {
      border-bottom: 1px $border-color solid;
    }

    .head-logo-subtitle,
    .head-logo-title {
      display: block;
      float: left;
    }

    .head-logo-subtitle {
      margin-left: 10px;
      font-size: $fs;
    }

    .head-logo-subtitle > br {
      display: none;
    }
  }
}

.head-items {
  text-align: right;
  display: table-cell;
  vertical-align: top;
  color: $dark-grey; // color of separators
  padding-top: 15px;
}
a.head-item {
  border: 1px $head-items-border solid;
  border-radius: 6px;
  color: $fg;
  font-size: $fs;
  display: inline-block;
  padding: 6px 10px;
  margin: 0 0 0 5px;
  vertical-align: middle;
  text-transform: lowercase;

  &.is-ic {
    color: $link-color;
    padding-right: 9px;

    > svg {
      position: relative;
      top: -1px;
      margin-bottom: -5px;
    }
  }

  &:hover {
    border-color: $head-items-hover-border;
    color: $link-color;
  }
  &.is-selected, &.is-selected:hover {
    text-decoration: none;
    color: $fg;
    border-color: $head-items-selected-border !important;
    box-shadow: 0 1px 1px $head-items-selected-shadow inset;
  }

  //&:last-child > span {
  //  border-right: 0;
  //  padding-right: 1px;
  //}
}

body a.head-item.is-theme-switcher svg path,
body a.head-item.is-settings svg path {
  fill: $fg;
}

#svgicon_moon_light_18,
#svgicon_moon_dark_18,
#svgicon_moon_auto_18 {
  display: none;
}