@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,700");
@import url("https://dengine.net/theme/stylesheets/topbar.css");
@import url("https://dengine.net/theme/stylesheets/sitemap.css");

body {
    background: #282D2B url("https://dengine.net/images/site-background0.jpg") no-repeat fixed;
    background-position: center 100%;
    background-size: 240% 240%;
    font-family: "Source Sans Pro";
    font-weight: 400;
    font-size: 14pt;
    color: #ddd;
    margin: 0;
}

.websymbol, .websymbol-logo {
    font-family: "WebSymbolsRegular";
    font-weight: normal;
    font-style: normal;
}

.websymbol-logo {
    display: inline-block;
    width: 1.5em;
}

#page-title {
    width: 100%;
    height: 15em;
    text-align: center;
    text-shadow: 0 0 1em black;
    background: #282D2B url("https://dengine.net/theme/images/site-banner0.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}
@media only screen and (max-width: 640px) {
    #page-title {
        height: 10em;
    }
}
#page-title h1 {
    margin: 0;
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    font-weight: bold;
    font-size: 200%;
    color: white;
}

#content {
    max-width: 51em;
    margin: 1em auto 0 auto;
}
@media only screen and (max-width: 640px) {
    #content {
        max-width: none;
        margin: 1em 0 0 0;
    }
}
#content a {
    color: #eb4;
    text-decoration: none;
}
#content a:hover {
    color: #fc0;
    text-decoration: underline;
}
#content a.button {
    border-radius: 0.5ex;
    padding: 0.75ex 1.4ex;
    display: inline-block;
    margin: 1ex 0;
    font-size: x-large;
    font-weight: bold;
    background-color: rgba(220, 255, 240, 0.3);
    color: rgba(0, 0, 0, 0.7);
}
#content a.button:hover {
    text-decoration: none;
    background-color: rgba(220, 255, 240, 0.4);
    color: black;
}
#content .download-button a.button {
    padding-left: 0.9em;
}
#content .undersigned {
    text-align: right;
    font-style: italic;
}
.undersigned .role {
    font-size: 75%;
    color: #bbb;
}

#welcome {
    width: 100%;
    margin: 8em auto 6em auto;
    text-align: center;
}
#welcome div {
    display: inline-block;
    vertical-align: top;
}
#welcome .main-logo {
    background-image: url("https://dengine.net/theme/images/deng-logo-512.png");
    width: 256px;
    height: 256px;
    background-size: 100% 100%;
}
#welcome .intro {
    text-align: left;
    font-size: 120%;
    min-width: 23em;
    max-width: 55%;
    height: 256px;
    margin: 0 1em;
}
@media only screen and (max-width: 640px) {
    #welcome .intro {
        min-width: 15em;
    }
}
#welcome .intro section {
    margin: 47px 0;
}
#welcome h1 {
    font-weight: 300;
    font-size: 160%;
    margin: 0 0 0.15ex 0;
    color: rgba(220, 255, 240, 0.5);
}
#welcome p {
    margin: 0;
}
#welcome ul.supported-platforms {
    list-style: none;
    margin: 0;
    -webkit-padding-start: 0;
}
#welcome ul.supported-platforms li {
    display: inline-block;
    margin: 0;
    margin-right: 1em;
    font-size: 60%;
}

#hero, #features {
    margin: 5em 0em;
}
#hero-video {
    width: 450px;
    float: right;
    margin-left: 2em;
    margin-bottom: 3em;
}
#features .heading {
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    font-size: 90%;
    margin-right: 1ex;
}
#features article {
    float: right;
    width: 54%;
    font-size: 90%;
}
#feature-image {
    width: 40%;
    margin-right: 2em;
    margin-bottom: 2em;
}
@media only screen and (max-width: 750px) {
    #hero-video {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 1em;
    }
    #features article {
        float: none;
        width: 100%;
    }
    #feature-image {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 1em;
    }
}

div.block {
    margin: 0 0 1em 0;
    background-color: rgba(0, 0, 0, 0.15);
    padding: 2em;
}
div.block:not(:first-child) {
    margin-top: 1em;
}
div.block h1 {
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 0;
    color: #eee;
}
div.block h1:last-child {
    margin-bottom: 0;
}
div.block h2 {
    font-size: 125%;
    margin-top: 1.5em;
}
div.block h3 {
    font-size: 110%;
    font-weight: 400;
    margin-top: 1.5em;
}
div.block p, div.block ul, div.block ol {
    color: #c0c0c0;
}
div.block.blog-post {
    background-color: rgba(0, 0, 0, 0.4);
}
#content .blog-post h1 a {
    color: white;
}
.blog-post .post-metadata {
    color: #aaa;
    font-size: 80%;
    margin-bottom: 1.75em;
}
.blog-post .post-tag {
    display: inline;
    font-weight: 300;
}
.blog-post h1 {
    margin-bottom: 0;
}
.blog-post .post-content {
    line-height: 1.4;
}

#page-content {
    float: right;
    max-width: 45em;
    width: 75%;
}
@media only screen and (max-width: 650px) {
    #page-content {
        float: none;
        width: 100%;
        max-width: none;
    }
}
#overview p {
    margin: 0;
    color: #eee;
}
div.package-badge {
    background-image: url("https://dengine.net/theme/images/package.png");
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: left center;
    padding-left: 42px;
}
#content div.package-badge a:hover {
    text-decoration: none;
}
#content div.package-badge a:hover .package-name {
    text-decoration: underline;
}
div.package-badge .package-name {
    font-size: 110%;
}
div.package-badge .package-metadata {
    font-size: 85%;
    color: #ccc;
}
div.package-badge time {
    color: #aaa;
}
div.package-description {
    padding-left: 42px;
}
div.package-description p.package-description {
    color: #d0d0d0;
}
div.package-description p.package-notes {
    color: #b0b0b0;
    font-weight: 300;
}
div.package-description:not(:last-of-type) {
    margin-bottom: 2em;
}
div.package-description p {
    margin: 1ex 0;
    font-size: 95%;
}
img.distro-icon {
    width: 23px;
    height: 23px;
    padding-right: 1ex;
    vertical-align: middle;
}

#sidebar {
    font-size: 95%;
    width: 20em;
    margin: 0 1em;
}
#sidebar .partition {
    display: inline-block;
    vertical-align: top;
    margin-bottom: -1em;
}
@media only screen and (max-width: 650px) {
    #sidebar {
        width: 100%;
        margin: 0;
    }
    #sidebar .partition {
        padding-left: 2em;
    }
}
#sidebar .heading {
    text-transform: uppercase;
    margin: 1em 0 0 0;
    font-size: 90%;
    font-weight: bold;
}
#sidebar ul {
    list-style-type: none;
    padding: 0;
    padding-left: 1em;
    margin-top: 0.5ex;
    margin-bottom: 1em;
    font-weight: 300;
}