body {
    background-position: top center;
    background-attachment: fixed;
    background-size: 100vw 100vh;
}
@media (max-width: 1999px) {
    body {
        background-image: url("/static/soatok-background-optimized.jpg")
    }
}
@media (min-width: 2000px) {
    body {
        background-image: url("/static/soatok-background.jpg")
    }
}
#main-wrapper {
    color: #e0e0e0;
    min-height: 100vh;
}
#content-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
    min-height: calc(100vh - 112px);
    padding-top: 1rem;
}
#content {
    box-shadow: rgba(0, 0, 255, 0.25) 0 0 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.7);
    margin-left: 0;
    padding: 1rem;
}
#content blockquote {
    background-color: rgba(32, 32, 32, 0.3);
    border-left-width: 3px;
    border-left-style: solid;
    border-color: #555;
    color: #efefef;
    text-shadow: #000 0 1px 1px;
    padding: 0.5rem 0.5rem 0.5rem 0.6rem;
}
#content blockquote p:last-child {
    margin-bottom: 0;
}
#top-row {
    background-image: linear-gradient(
        top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -o-linear-gradient(
        top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -ms-linear-gradient(
        top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -moz-linear-gradient(
        top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -webkit-linear-gradient(
        top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    color: #ffffff;
    padding: 1rem;
}
#left-nav {
    background-image: linear-gradient(
        left,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -o-linear-gradient(
        left,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -ms-linear-gradient(
        left,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -moz-linear-gradient(
        left,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    padding-top: 1rem;
}
#left-nav > nav > ul {
    background-color: rgba(0, 0, 0, 0.1);
    padding-left: 0;
    margin-left: 0;
}
.nav-menu, .nav-submenu {
    list-style: none;
    padding-left: 0;
}
.nav-drop {
    font-weight: bold;
}

.nav-menu li {
    background-color: rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s;
}
.nav-menu li:hover {
    background-color: rgba(40, 40, 40, 0.33);
}
.nav-menu li > ul > li {
    padding-left: 1rem;
}
.social-media {
    color: #fff;
    height: 1rem;
    vertical-align: text-bottom;
}
nav a, nav a:visited {
    color: #327de1;
}
nav a:hover {
    color: #28b0ff;
}

.table-body-striped > table {
    background-color: rgba(0, 0, 0, 0.5);
}
.table-body-striped tbody > tr:nth-child(2n + 1) {
    background-color: rgba(0, 0, 128, 0.15);
}
.article-image.float-right {
    margin-left: 1rem;
}
.article-image.float-left {
    margin-right: 1rem;
}
#article-list {
    list-style: none;
    padding: 0;
}
#article-list ul {
    list-style: none;
    padding: 0;
}
#article-list .entry-title {
    font-size: 15pt;
}
#content pre {
    color: #ccc !important;
}
.zec {
    background: #222;
    font-size: 14pt;
    padding: 0.33rem 0.33rem 0.33rem 1.33rem;
}
.full-image {
    max-width: 100%;
    margin: 0.5rem;
}
.text-center {
    text-align: center;
}
.quote {
    background-color: rgba(32, 32, 32, 0.3);
    border-left-width: 3px;
    border-left-style: solid;
    border-color: #555;
    color: #efefef;
    text-shadow: #000 0 1px 1px;
    padding: 0.5rem 0.5rem 0.5rem 0.6rem;
    font-size: 14pt;
}
.bigger {
    font-size: 125%;
}
.call-to-action {
    background-image: linear-gradient(
        top,
        rgba(16, 16, 16, 0.3) 0%,
        rgba(53, 53, 53, 0.55) 100%
    );
    background-image: -o-linear-gradient(
        top,
        rgba(16, 16, 16, 0.3) 0%,
        rgba(53, 53, 53, 0.55) 100%
    );
    background-image: -ms-linear-gradient(
        top,
        rgba(16, 16, 16, 0.3) 0%,
        rgba(53, 53, 53, 0.55) 100%
    );
    background-image: -moz-linear-gradient(
        top,
        rgba(16, 16, 16, 0.3) 0%,
        rgba(53, 53, 53, 0.55) 100%
    );
    background-image: -webkit-linear-gradient(
        top,
        rgba(16, 16, 16, 0.3) 0%,
        rgba(53, 53, 53, 0.55) 100%
    );
    border: 1px solid #456;
    border-radius: 0.33rem;
    display: inline-block;
    margin: auto;
    padding: 0.25rem 0.33rem;
}
.call-to-action:hover {
    background-image: linear-gradient(
        top,
        rgba(32, 32, 32, 0.3) 0%,
        rgba(64, 64, 64, 0.55) 100%
    );
    background-image: -o-linear-gradient(
        top,
        rgba(32, 32, 32, 0.3) 0%,
        rgba(64, 64, 64, 0.55) 100%
    );
    background-image: -ms-linear-gradient(
        top,
        rgba(32, 32, 32, 0.3) 0%,
        rgba(64, 64, 64, 0.55) 100%
    );
    background-image: -moz-linear-gradient(
        top,
        rgba(32, 32, 32, 0.3) 0%,
        rgba(64, 64, 64, 0.55) 100%
    );
    background-image: -webkit-linear-gradient(
        top,
        rgba(32, 32, 32, 0.3) 0%,
        rgba(64, 64, 64, 0.55) 100%
    );
    background-color: #111;
    border-color: #568;
    color: #91d3ff;
    text-decoration: none;
}