html,
body {
margin: 0;
padding: 0;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

/* =========================================================
GLOBAL TOP-BAR
========================================================= */

#globalbar {
width: 100%;
height: 30px;

margin: 0;
padding: 0;

display: flex;
align-items: stretch;

background: #222;
border-bottom: 1px solid #333;

font-family: Arial, sans-serif;


}

#globalbar a {
height: 30px;


margin: 0;
padding: 0 10px;

display: flex;
align-items: center;

color: #aaa;
background: transparent;

text-decoration: none;

font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 30px;

border: 0;
border-right: 1px solid #444;

white-space: nowrap;
user-select: none;

transition:
    background-color 0.12s ease,
    color 0.12s ease;


}

#globalbar a:hover {
color: #fff;
background: #444;
}

#globalbar a.active {
color: #fff;
background: #0066cc;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

#globalbar a {
    padding: 0 8px;
    font-size: 10px;
}

}