/* COLORS
bg             - #12151A

primary        - #191E24
secondary      - #2A323C
tertiary       - #475566

text           - #A6ADBB
text_secondary - #869FBF

client         - #8BBF86
client_bg      - #2A3E21

backport       - #BF86B7
backport_bg    - #3E213A

caution        - #3E3E21
caution_bg     - #CCCA6D

alert          - #CC6D87
alert_bg       - #3E2129

code           - #869FBF
code_bg        - #212C3E

scrollbar_base - #465464
*/

/* GENERAL ----------------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    scrollbar-face-color: #869FBF;
    scrollbar-track-color: #2A323C;
    scrollbar-arrow-color: #869FBF;
    scrollbar-base-color: #465464; /* arbitrary color because frick IE11 */
}

body {
    font-size: .9rem;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #12151A;
    color: #A6ADBB;
}

.text-secondary, h2, h3 {
    color: #869FBF;
}

ul {
    margin-top: .6rem;
    margin-bottom: 0;
}

.content {
    margin: 2rem 2rem 2rem 12rem; /* 10rem is navbar offset */
}

.heading {
    width: 100%;
    display: inline-flex;
    align-items: center;
}

.heading-bar {
    flex: 1;
    height: 1px;
    background-color: #475566;
    margin-left: 1rem;
}

#general,
#sprites,
#sounds,
#ini {
    padding-bottom: .6rem;
    border-bottom: 1px solid #475566;
}

/* HIGHLIGHT --------------------------------------------------------------------------------- */
.highlight-client {
    color: #8BBF86;
    background-color: #2A3E21;
}

.highlight-backport {
    color: #BF86B7;
    background-color: #3E213A;
}

.highlight-caution {
    color: #CCCA6D;
    background-color: #3E3E21;
}

.highlight-alert {
    color: #CC6D87;
    background-color: #3E2129;
}

.highlight-code {
    color: #869FBF;
    background-color: #212C3E;
}

.highlight-client,
.highlight-backport,
.highlight-caution,
.highlight-alert,
.highlight-code {
    font-weight: bold;
    padding: 0.1rem 0.2rem;
    border-radius: .3rem;
}

/* NAVBAR ------------------------------------------------------------------------------------ */
.navbar {
    margin-top: 0;
    width: 10rem;
    background: #2A323C;
    padding: 0.6rem;
    position: fixed;
    top: 0;
    bottom: 0;
    border-radius: 0 .5rem .5rem 0;
    overflow-y: auto;
}

.heading-navbar {
    text-align: center;
    margin: 1rem 0;
    padding-bottom: .6rem;
    border-bottom: 1px solid #475566;
}

.navbar ul {
    padding-left: 1rem;
}

.navbar li {
    list-style: none;
    padding: .5rem 0 0 0;
}

.navbar ul li {
    list-style: none;
    position: relative;
    padding: .5rem 0 0 1.3rem;
}

.navbar ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid #475566;
}

.navbar ul li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 1rem;
    border-bottom: 1px solid #475566;
}

.navbar li:last-child::before {
    height: 1rem; /* remove line overflow */
}

.navbar a {
    text-decoration: none;
    color: #869FBF;
}

.navbar a:hover {
    color: #475566;
}

/* HERO -------------------------------------------------------------------------------------- */
.hero {
    background-color: #2A323C;
    padding: 3rem;
    text-align: center;
    border-radius: .5rem;
}

.hero h2 {
    margin: 0;
    font-size: 2.5rem;
}

/* BOX --------------------------------------------------------------------------------------- */
.box {
    background-color: #191E24;
    padding: 1rem;
    border-radius: .5rem;
    margin: 0 0 1.5rem 0;
}

.box:last-child {
    margin-bottom: 0;
}

.box-sprite {
    padding-left: 1rem;
    margin-top: .6rem;
    display: flex;
    align-items: center;
}

/* images must be a fixed width & height to align each list correctly (will fix eventually) */
.box-sprite ul {
    padding-left: 2.5rem;
    margin: 0;
}