/* main styles */
* {
    box-sizing: border-box;
}

html {
    background-color: #101010;
    color: #808080;
    width: 100%;
    height: 100%;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    margin: 0;
    height: 100%;
}

a,
body header nav ul li a,
body header nav ul li a:visited,
a:hover {
    color: #a0a0a0;
}
h1 { color: #f0f0f0; font-size: 33px; }
h2 { color: #d0d0d0; font-size: 29px; }
h3 { color: #b0b0b0; font-size: 25px; }
h4 { color: #a0a0a0; font-size: 21px; }
h5,h6 { color: #909090; font-size: 20px; }

strong { color: #a0a0a0; }
table tr:nth-child(2n){
    background-color: #202020;
}
table tr:nth-child(2n+1){
    background-color: #303030;
}
table thead th {
    background-color: #101010;
}
table td,
table th {
    padding: 5px 10px;
}


/* top bar */
#topbar {
    background-color: #222;
}
.topbartitle h1 a,
.topbartitle h1 a:hover,
.topbartitle h1 a:visited {
    text-decoration: none;
    color: #f0f0f0;
}

/* nav menu */
#navmenu{
    background-color: #222;
}

/* footer */
.footer{
    background-color: #222;
}

/* thumbnails */
.thumbnail.hl50 {
    height: 50px;
}
.thumbnail.hl100 {
    height: 100px;
}
.thumbnail.hl150 {
    height: 150px;
}
.thumbnail.hl200 {
    height: 200px;
}
.thumbnail.hl300 {
    height: 300px;
}
.thumbnail.wp50 {
    width: calc(50% - 4px);
}
.thumbnail.wp33 {
    width: calc(33% - 4px);
}
.thumbnail.wp25 {
    width: calc(25% - 4px);
}
.thumbnail.wp20 {
    width: calc(20% - 4px);
}
.thumbnail.wp15 {
    width: calc(15% - 4px);
}
.thumbnail.wp10 {
    width: calc(10% - 4px);
}
.thumbnail.right {
    float: right;
    margin: 2px;
}
.thumbnail.left {
    float: left;
    margin: 2px;
}

/* FIXME : limit to post ? */
img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* read more */
span.readmore {
    width: 100%;
    display: inline;
    float: right;
    text-align: right;
    padding: 10px 50px 0px 0px;
}
span.readmore a {
    font-size: 0.8em;
}

/* preview */
.preview {
    display: flex;
    flex-wrap: wrap;
}
.preview-ltr {
    direction: ltr;
}
.preview-rtl {
    direction: rtl;
}
.preview-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 380px;
}
.preview-cell-image {
    direction: ltr;
}
.preview-cell-text {
    padding: 0px 50px 20px 50px;
    text-align: justify;
    direction: ltr;
}
.preview-cell-text h1,
.preview-cell-text h3 {
    text-align: center;
}

/* banners */
.banner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.banner-cell {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: normal;
    align-items: center;
    flex: 250px;
    padding: 0px 5px 0px 5px;
}

.banner-w380 > .banner-cell {
    flex: 380px;
}
.banner-w500 > .banner-cell {
    flex: 500px;
}

.banner-subcell-text {
    padding: 0px 5px 0px 5px;
    text-align: justify;
}
.banner-h100 > .banner-cell > .banner-subcell-text {
    padding: 0px 5px 100px 5px;
}
.banner-subcell-img {
    position: relative;
    text-align: center;
    color: white;
}
.banner-subcell-caption {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -25%);
}
.banner-subcell-showcasetitle {
    position: absolute;
    top: 0px;
    left: 10px;
}
.banner-subcell-showcasetitle h2,
.banner-subcell-caption h2 {
    -webkit-text-stroke-width: 0.9px;
    -webkit-text-stroke-color: black;
    color: #ffffdd;
}


/* changes */
ul.changelogheader {
    text-align: left;
    list-style-type: none;
}

.change-entry {
    display: flex;
    justify-content: space-between;
}
.change-entry-text {
    padding: 0px 50px 20px 50px;
    text-align: justify;
    direction: ltr;
    flex: 85%;
}
.change-entry-pic {
    position: relative;
    text-align: center;
    color: white;
    flex: 195px;
}

/* download */
.download1 {
    padding: 15px 20px 15px 20px;
    background-color: #80371a;
}
.download2 {
    padding: 3px 20px 3px 20px;
    background-color: #652b14;
}
.download3 {
    padding: 3px 20px 3px 20px;
    background-color: #481e0e;
}

/* warning */
.warning {
    padding: 2px 20px 2px 20px;
    background-color: #28110f;
    color: #ff6666;
}

/* forum */
.forum {
    padding: 2px 20px 2px 20px;
    background-color: #481e0e;
}