@media screen and (min-width: 1400px) {
    #main {
        width: 1360px;
        left: 50%;
        margin-left: -680px;
    }
    div.spacer {
        height: 15px;
    }
}
@media screen and (min-width: 550px) and (max-width: 1400px) {
    #main {
        width: calc(100% - 40px);
        left: 0;
        margin-left: 20px;
        margin-right: 20px;
    }
    div.spacer {
        height: 15px;
    }
    .ct-line {
        stroke-width: 0.28vw;
    }
    .ct-point {
        stroke-width: 0.71vw;
    }
}
@media screen and (max-width: 550px) {
    #main {
        width: 100%;
        left: 0;

    }
    div.spacer {
        height: 5px;
    }
    .ct-line {
        stroke-width: 0.56vw;
    }
    .ct-point {
        stroke-width: 1.42vw;
    }
    .ct-label {
        font-size: 2vw;
    }
}
@media screen {
    * {
        font-family: 'Source Sans Pro', sans-serif;
        color: white;
        scrollbar-color: #333 #222;
    }
    a {
        color: darkorange;
    }
    body {
        background-color: black;
    }
    code {
        color: #BBB;
    }
    pre {
        background-color: #272727;
        padding: 13px;
    }
    #main {
        top: 0;
        position: absolute;
        background-color: #333;
        min-height: 100%;
        min-width: 360px;
    }
    p.cite {
        padding: 7px;
    }
    p.cite, p.cite * {
        background-color: white;
        color: black;
        font-family: 'Crimson Text', serif;
    }
    p.citecode {
        background-color: #272727;
        padding: 4px 7px 7px 7px;
    }
}
@media all {
    code, pre {
        font-family: 'Cousine', monospace;
        font-size: 0.9em;
    }
    #instantclick-bar {
        background: darkorange;
    }
    div.scrollbox-outer.pgpkey {
        max-width: 650px;
    }
}
@media screen and (min-width: 1100.0001px) {
    #head > ul > li {
        background-color: #666;
        width: 180px;
    }
    #head > ul > li > a > span {
        display: inline;
    }
    #head > ul > li > a > div {
        display: none;
    }
    #head > ul > li:hover {
        background-color: #777;
    }
    #head > ul > li.active {
        background-color: darkorange;
    }
    #head > ul > li > a {
        padding: 12px 14px;
    }
}
@media screen and (max-width: 1100px) {
    #head > ul > li {
        background-color: transparent;
    }
    #head > ul > li > a > span {
        display: none;
    }
    #head > ul > li > a > div {
        display: inline-block;
        width: 32px;
        height: 32px;
        background-size: 160px;
    }
    #head > ul > li > a {
        padding: 11.5px 9px 4.5px 9px;
    }
    #head > ul > li > a > div.home {
        background-position: 0 -128px;
    }
    #head > ul > li:hover > a > div.home {
        background-position: 0 0;
    }
    #head > ul > li.active > a > div.home {
        background-position: 0 -256px;
    }
    #head > ul > li > a > div.products {
        background-position: 128px -128px;
    }
    #head > ul > li:hover > a > div.products {
        background-position: 128px 0;
    }
    #head > ul > li.active > a > div.products {
        background-position: 128px -256px;
    }
    #head > ul > li > a > div.docs {
        background-position: 256px -128px;
    }
    #head > ul > li:hover > a > div.docs {
        background-position: 256px 0;
    }
    #head > ul > li.active > a > div.docs {
        background-position: 256px -256px;
    }
    #head > ul > li > a > div.contact {
        background-position: 384px -128px;
    }
    #head > ul > li:hover > a > div.contact {
        background-position: 384px 0;
    }
    #head > ul > li.active > a > div.contact {
        background-position: 384px -256px;
    }
    #head > ul > li > a > div.blog {
        background-position: 512px -128px;
    }
    #head > ul > li:hover > a > div.blog {
        background-position: 512px 0;
    }
    #head > ul > li.active > a > div.blog {
        background-position: 512px -256px;
    }
}
@media screen {
    #head {
        width: 100%;
        height: 60px;
    }
    #head > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #head > ul > li {
        display: inline;
        float: left;
        margin-right: 3px;
        margin-top: 3px;
        font-weight: 300;
        font-size: 1.5em;
    }
    #head > ul > li#logo {
        background-color: transparent;
        background-image: url(favicon.png);
        background-size: 48px;
        background-repeat: no-repeat;
        width: 40px;
        height: 22px;
        margin-top: 10px;
        margin-left: 17px;
        padding: 12px 14px;
    }
    #head > ul > li > a {
        display: block;
        text-decoration: none;
    }
    #head > ul > li > a > div {
        background-image: url(images/icons/navbar.png?);
    }
    a.home-category.software, div.head-banner.software {
        background-position: 0% 0%;
    }
    a.home-category.minecraft, div.head-banner.minecraft {
        background-position: 33.2% 0%;
    }
    a.home-category.extensions, div.head-banner.extensions {
        background-position: 66.5% 0%;
    }
    a.home-category.games, div.head-banner.games {
        background-position: 99.7% 0%;
    }
    a.home-category.website, div.head-banner.website {
        background-position: 0% 33.2%;
    }
    a.home-category.docs, div.head-banner.docs {
        background-position: 33.2% 33.2%;
    }
    a.home-category.devdoc, div.head-banner.devdoc {
        background-position: 66.5% 33.2%;
    }
    a.home-category.research, div.head-banner.research {
        background-position: 99.7% 33.2%;
    }
    a.home-category.products, div.head-banner.products {
        background-position: 0% 66.5%;
    }
    a.home-category.docsall, div.head-banner.docsall {
        background-position: 33.2% 66.5%;
    }
    a.home-category.schematics, div.head-banner.schematics {
        background-position: 66.5% 99.7%;
    }
    a.home-category.models, div.head-banner.models {
        background-position: 99.7% 99.7%;
    }
    a.home-category.donate {
        background-position: 66.5% 66.5%;
    }
    a.home-category.contact {
        background-position: 99.7% 66.5%;
    }
    a.home-category.legacy, div.head-banner.legacy {
        background-position: 33.2% 99.7%;
    }
    /*div.head-banner {
        width: 100%;
        height: 100px;
        background-size: 100%;
        background-position: left 65%;
        position: absolute;
        margin-left: -20px;
    }
    div.head-banner > div.shade {
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        width: 100%;
        position: absolute;
    }
    div.head-banner h1 {
        margin: 25px 0 0 40px;
    }*/
    a.home-category {
        float: left;
        display: block;
        text-decoration: none;
        background-image: url(images/categories/spritegrid6.jpg);
        background-size: 405%;
    }
    a.prod-category {
        background-size: 100%;
    }
    a.home-category > div {
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
    }
    a.home-category:hover > div {
        background-color: rgba(85, 85, 85, 0.5);
    }
    a.home-category > div > p {
        font-size: 1.9vw;
        padding: 0.5vw 1vw;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
@media screen and (min-width: 1400px) {
    a.home-category {
        width: 301.203px;
        height: 150.594px;
        margin-right: 21.141px;
        margin-bottom: 21.141px;
    }
    a.home-category > div {
        height: 36.984px;
        margin-top: 113.621px;
    }
    a.home-category > div > p {
        font-size: 20.0763px;
        padding: 5.28177px 10.5635px;
    }
}
@media screen and (min-width: 1238px) and (max-width: 1400px) {
    a.home-category {
        width: 21vw;
        height: 10.5vw;
        margin-right: 1.474vw;
        margin-bottom: 1.474vw;
    }
    a.home-category > div {
        height: 2.579vw;
        margin-top: 7.921vw;
    }
    a.home-category > div > p {
        font-size: 1.4vw;
        padding: 0.368vw 0.737vw;
    }
}
@media screen and (min-width: 950px) and (max-width: 1238px) {
    a.home-category {
        width: 27.5vw; /* 28.5 */
        height: 13.75vw; /* 14.25 */
        margin-right: 1.93vw; /* 2 */
        margin-bottom: 1.93vw; /* 2 */
    }
    a.home-category > div {
        height: 3.377vw; /* 3.5 */
        margin-top: 10.373vw; /* 10.75 */
    }
    a.home-category > div > p {
        font-size: 1.833vw; /* 1.9 */
        padding: 0.482vw 0.965vw; /* 0.5 1 */
    }
}
@media screen and (min-width: 600px) and (max-width: 950px) {
    a.home-category {
        width: 38.8vw;
        height: 19.4vw;
        margin-right: 2.723vw;
        margin-bottom: 2.723vw;
    }
    a.home-category > div {
        height: 4.765vw;
        margin-top: 14.635vw;
    }
    a.home-category > div > p {
        font-size: 2.587vw;
        padding: 0.681vw 1.361vw;
    }
}
@media screen and (max-width: 600px) {
    a.home-category {
        width: calc(89vw - 40.5px);
        height: calc(44vw - 20.25px);
        margin-bottom: calc(6.175vw - 2.81px);
        margin-right: 0;
    }
    a.home-category > div {
        height: calc(10.807vw - 4.918px);
        margin-top: calc(33.193vw - 15.105px);
    }
    a.home-category > div > p {
        font-size: calc(5.867vw - 2.67px);
        padding: calc(1.544vw - 0.707px) calc(3.088vw - 1.414px);
    }
}
@media all {
    div.float-left {
        float: left;
        margin-right: 20px;
    }
    div.float-right {
        float: right;
        margin-left: 20px;
    }
    div.float-clear {
        clear: both;
    }
    div.float-remaining {
        overflow: hidden;
    }
    div#introduction > p {
        font-style: italic;
        font-size: 1.1em;
    }
    div.content-spacer {
        height: 20px;
    }
    div#mydetails {
        margin-right: 60px;
    }
}
@media screen {
    div#content, div#footer > p {
        padding: 0px 20px;
    }
    div#content-footer {
        height: 80px;
    }
    div#footer {
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    div.spacer {
        width: 100%;
        background-color: black;
    }
    div.gray-spacer {
        width: calc(100% + 30px);
        height: 20px;
        background-color: #333;
        margin-left: -15px;
    }
    hr {
        border: none;
        border-bottom: 1px solid #777;
    }
    div#blog-content pre {
        overflow-x: scroll;
    }
}
@media all and (max-width: 1238px) {
    div#introduction {
        width: 100%;
    }
    div#mydetails {
        margin-right: 20px;
    }
}
@media all {
    img.thumbimg {
        width: 200px;
        height: 200px;
    }
    p.socialicons {
        margin: 0;
    }
    p.socialicons img {
        width: 44px;
        height: 44px;
        margin: 10px 10px 0 10px;
        background-size: 44px;
    }
    div.form-float {
        width: 400px;
        max-width: calc(100% - 20px);
        margin-right: 50px;
    }
    div.form-widefield {
        width: 850px;
        max-width: calc(100% - 20px);
    }
}
@media screen {
    div.layout-icons {
        width: 100%;
        margin-bottom: 13px;
    }
    div.layout-icons div {
        width: 24px;
        height: 24px;
        margin: 9.5px 0 0 15px;
        display: inline-block;
        position: absolute;
        cursor: pointer;
        background-size: 24px;
    }
    p.socialicons img.github {
        background-image: url(images/icons/github.png);
    }
    p.socialicons img.twitter {
        background-image: url(images/icons/twitter.png);
    }
    div.layout-icons div#mode-grid {
        background-image: url(images/icons/grid.png);
    }
    div.layout-icons div#mode-list {
        background-image: url(images/icons/list.png);
    }
    div.layout-icons.search-only div {
        display: none;
    }
    div.layout-icons div:nth-child(3) {
        margin-left: 50px;
    }
    div.search-bar {
        margin-top: 21px;
        margin-right: -40px;
    }
    a.home-category.item-list, .item-list {
        display: none;
    }
    div.product-info {
        background-color: #272727;
        padding: 0px 15px;
        width: 200px;
        margin-bottom: 20px;
        margin-left: 30px;
    }
    div#prod-content img, div#prod-content iframe, div#blog-content img {
        max-width: calc(100% - 260px);
    }
}
@media print {
    p.socialicons img.github {
        background-image: url(images/icons/github-print.png);
    }
    p.socialicons img.twitter {
        background-image: url(images/icons/twitter-print.png);
    }
}
@media screen and (max-width: 550px) {
    div#prod-content img, div#prod-content iframe, div#blog-content img {
        max-width: calc(100vw - 57px);
    }
}
@media screen and (max-width: 400px) {
    div.product-info {
        width: calc(100% - 35px);
        float: left;
        margin-left: 0;
        margin-right: 0;
    }
    div#prod-content img, div#prod-content iframe, div#blog-content img {
        max-width: 100%;
    }
}
@media screen {
    div.product-info > p {
        background-size: 32px;
        background-position: 0 4px;
        padding-left: 46px;
        background-repeat: no-repeat;
    }
    div.product-info > p.about {
        background-image: url(images/icons/about.png);
    }
    div.product-info > p.computer {
        background-image: url(images/icons/computer.png);
    }
    div.product-info > p.gear {
        background-image: url(images/icons/gear.png);
    }
    div.product-info > p.tools {
        background-image: url(images/icons/tools.png);
    }
    div.product-info > p.download {
        background-image: url(images/icons/download.png);
    }
    div.product-info > p.link {
        background-image: url(images/icons/link.png);
    }
    div.product-info > p.timer {
        background-image: url(images/icons/timer.png);
    }
    div.product-info > p.license {
        background-image: url(images/icons/license.png);
    }
    div.product-info > p.source {
        background-image: url(images/icons/source.png);
    }
    div.product-info > p.docite {
        background-image: url(images/icons/docite.png);
    }
    div.product-info > p.download-stat {
        background-image: url(images/icons/download-stat.png);
    }
    div.product-info > p.document {
        background-image: url(images/icons/document.png);
    }
    div.product-info > p.book {
        background-image: url(images/icons/book.png);
    }
    p.blog-desc-author {
        color: darkgrey;
        margin-bottom: 8px;
    }
    p.blog-desc-preview {
        margin-top: 8px;
    }
    object.doc-embed {
        width: 100%;
        height: 70vh;
    }
    div.doc-embed {
        background-color: #222;
        padding: 1rem;
        clear: both;
        height: 70vh;
        overflow-y: scroll;
    }
}
@media all and (max-width: 998px) {
    div.form-widefield {
        width: 400px;
    }
}
@media all {
    input[type=text], input[type=email], textarea {
        padding: 4px 7px;
        margin-top: 5px;
        width: 100%;
    }
    input[type=submit], input[type=button], button {
        padding: 5px 7px;
        margin-top: 5px;
        width: 160px;
        font-size: 1.05em;
        max-width: calc(100% - 20px);
    }
    textarea {
        height: 250px;
    }
}
@media print {
    input[type=text], input[type=email] {
        border: 0;
        border-bottom: 1px solid black;
    }
    input[type=submit], input[type=button], button, textarea {
        border: 1px solid black;
    }
}
@media all {
    .ct-series-a .ct-line, .ct-series-a .ct-point {
        stroke: darkorange !important;
    }
    .ct-series-b .ct-line, .ct-series-b .ct-point {
        stroke: #666 !important;
    }
    p.chart-legend .chart-a {
        color: darkorange;
    }
    p.chart-legend .chart-b {
        color: #666;
    }
    .peerwarn {
        font-weight: bold;
    }
}
@media screen {
    .ct-label {
        color: white !important;
    }
    .ct-grid {
        stroke: #666 !important;
    }
}
@media print {
    .ct-label {
        color: black !important;
    }
    .ct-grid {
        stroke: black !important;
    }
}
@media screen {
    div.scrollbox-outer {
        width: calc(100% - 40px);
        max-height: 400px;
        overflow-y: scroll;
        background: #272727;
        margin-bottom: 20px;
        border: 20px solid #272727;
    }
    div.scrollbox-inner {
        width: calc(100% - 40px);
        margin-top: -20px;
    }
    .ok, .ok * {
        color: lime;
    }
    .fail, .fail * {
        color: red;
    }
    .peerwarn {
        color: red;
    }
    input[type=text], input[type=email], textarea {
        background-color: #666;
        border: 0;
    }
    input[type=submit], input[type=button], button {
        background-color: #666;
        cursor: pointer;
        border: 0;
    }
    input[type=submit]:hover, input[type=button]:hover, button:hover {
        background-color: #777;
        border: 0;
    }
    input[type=image] {
        border: 0;
    }
    input#search {
        width: calc(100% - 100px);
        font-size: 1.3em;
    }
    div.search-only input#search {
        width: calc(100% - 15px);
    }
    p.license-notice {
        color: #ff8c00;
        font-weight: bold;
    }
    .important {
        color: red;
    }
    p.blocked-why {
        font-weight: bold;
    }
    .visible {
        display: block;
    }
    p.chart-legend {
        text-align: center;
    }
    .print-only {
        display: none;
    }
    div#footer div.footer-float {
        padding-left: 20px;
        max-width: calc(100% - 140px);
    }
}
@media print {
    * {
        font-family: 'Crimson Text', 'Crimson', serif;
        color: black;
    }
    hr {
        border: none;
        border-bottom: 1px solid black;
    }
    div#footer > hr {
        border-bottom: 1px solid black;
    }
    div#footer img {
        width: 50px;
        height: 50px;
        float: right;
        margin-left: 20px;
        margin-top: -30px;
    }
    code {
        color: #777;
    }
    pre {
        background-color: #EEE;
        padding: 13px;
        border: 1px dotted black;
    }
    pre code {
        color: black;
    }
    img {
        max-width: 100vw;
        max-height: none;
    }
    .item-grid {
        display: none;
    }
    .item-list {
        display: block !important;
    }
    .print-boxed {
        border: 1px solid black;
        padding: 0px 20px 0px 15px;
        background-color: #EEE;
    }
    .dont-print, .layout-icons, .layout-icons + hr {
        display: none;
    }
}
@media all {
    table#sitemap-table {
        border: none;
        border-collapse: collapse;
        background-color: #222;
        width: 100%;
        table-layout: fixed;
    }
    table#sitemap-table tr:nth-child(2n) {
        background-color: #272727;
    }
    table#sitemap-table tbody tr:hover {
        background-color: #333;
    }
    table#sitemap-table th {
        text-align: left;
        padding: 10px;
        background-color: #171717;
    }
    table#sitemap-table td {
        padding: 10px;
    }
    table#sitemap-table td > div {
        display: block;
        width: 95%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }
    table#sitemap-table td > div:before {
        content:'';
        width: 100%;
        height: 20px;
        top: 0;
        left: 0;
        position: absolute;
        background: linear-gradient(to right, transparent 95%, #222);
        pointer-events: none;
    }
    table#sitemap-table tr:nth-child(2n) td > div:before {
        background: linear-gradient(to right, transparent 95%, #272727);
    }
    table#sitemap-table tr:hover td > div:before {
        background: linear-gradient(to right, transparent 95%, #333);
    }
    table#sitemap-table thead th {
        border-bottom: 1px solid #000;
    }
}