/*
Header

Markup:
<header>
<nav class="header-nav">
    <a class="nav-item">Item0</a>
    <a class="nav-item nav-item-selected">Item1</a>
    <a class="nav-item">Item2</a>
</nav>
<h1 class="header-log">Logo</h1>
</header>

Styleguide 1.4
*/

header {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 8;
}

.header-logo {
    text-decoration: none;
    font-size: 2em;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
}

.header-nav {
    float: right;
}

.header-nav .nav-item {
    padding: 0.5em 1em;
    opacity: 0.5;
    cursor: default;
}

.header-nav .nav-item:hover,
.header-nav .nav-item.nav-item-hover {
    opacity: 0.8;
}

.header-nav .nav-item.nav-item-selected {
    opacity: 1;
}

.header-nav-icon {
    display: none;
}