/* global CSS values */
/* global rules to override any browser CSS and to set global values */
.small {
    font-size: 75%;
    text-decoration: none;
}
.small a {
    text-decoration: none;
}
h3, p, label {
    margin: 0.25em 0;
}
hr {
    border-color: #ff0000;
    border-style: solid none none;
    border-width: 1px medium medium;
    height: 0;
}
a {
    color: #ffb300;
    text-decoration: none;
}
a:hover {
    text-shadow: 0 0 0px #117743;
}
u {
    text-decoration: underline;
}
s {
    text-decoration: line-through;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
input, select, textarea {
    background: #282a2e none repeat scroll 0 0;
    border: 0px double #07371f;
    border-radius: 0px;
    color: #acacac;
    font-family: "Awesome",sans-serif;
    font-size: 80%;
    padding-left: 0.25em;
}
input[type="button"], input[type="submit"], button {
    background: #16171a none repeat scroll 0 0;
    border: 1px solid #ff0000;
    border-radius: 0px;
    color: #acacac;
    font-family: "Awesome",sans-serif;
    font-size: 80%;
    font-weight: bold;
    margin-top: 0.5em;
    padding-left: 0.25em;
}
.title {
    font-weight: bold;
}
.fileBrowser {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

/* import resources here; external CSS, fonts, etc */
@font-face {
    font-family: "Awesome";
    font-style: normal;
    font-weight: normal;
    src: url("hack-regular-webfont.eot?#iefix&v=2.018") format("embedded-opentype"), url("hack-regular-webfont.woff2?v=2.018") format("woff2"), url("hack-regular-webfont.woff?v=2.018") format("woff"), url("hack-regular-webfont.ttf?v=2.018") format("truetype"), url("hack-regular-webfont.svg?v=2.018#hackregular") format("svg");
}
@font-face {
    font-family: "Icons";
    font-style: normal;
    font-weight: normal;
    src: url("pen-iconic.eot?#iconic-sm") format("embedded-opentype"), url("open-iconic.woff") format("woff"), url("open-iconic.ttf") format("truetype"), url("open-iconic.otf") format("opentype"), url("open-iconic.svg#iconic-sm") format("svg");
}

/* body styles, inherited by whole page */
body {
    background: #1d1f21 none repeat scroll 0 0;
    color: #acacac;
    font-family: "Awesome",sans-serif;
    font-size: 100%;
    margin: 0;
}

/* header and nav / top of page styles */
header {
    margin: 3em auto 0;
    text-align: center;
    width: 50%;
}
nav {
    background-color: #151515;
    border-bottom: 1px solid #ff0000;
    font-size: 70%;
    padding-bottom: 3px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}
nav a {
    display: inline-block;
    margin: 0 0.2em;
    text-decoration: none;
}
nav span {
    display: inline-block;
    margin: 0 0.2em;
    text-decoration: none;
}
#navLinkSpan {
    float: left;
}
#navBoardsSpan {
}
#navOptionsSpan {
    float: right;
}
#navLinkHome::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#navBoardList::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkOverboard::before, #navOverboard::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#navPosting::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#navCatalog::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkTop::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkBottom::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkBack::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}

/* board list */
#boardsWrapper {
    margin: 1em auto;
    text-align: center;
    width: 80%;
}
#boardsWrapper #divBoards {
    display: inline-block;
    margin: 2em 1em 0;
    text-align: left;
}
.boardsCell span {
    text-overflow: ellipsis;
}
.search {
    margin: 1em 0;
}
.search form {
    display: inline-block;
}
#boardsSort, #searchButton {
    margin-top: 1em;
}
#divPages {
    display: inline-block;
}
#divPages a {
    padding: 0 0.25em;
    text-decoration: none;
}

/* thread and board pages */
.threadPages {
    float: left;
    margin-top: 0.5em;
}
.threadPages a {
    text-decoration: none;
}
.boardPages {
    color: #c0840a;
    padding: 0.1em 0.25em;
}
#linkNext::after {
    content: "";
    font-family: Icons;
    margin: 0 0.25em;
}
#linkPrevious::before {
    content: "";
    font-family: Icons;
    margin: 0 0.25em;
}
#linkPrevious, #linkNext {
    vertical-align: middle;
}

/* board banner */
.boardHeader p {
    color: #ffb300;
}
.boardHeader p#labelName {
    font-size: 200%;
}
.boardHeader p#labelDescription {
    font-size: 100%;
}
.boardHeader a {
    display: inline-block;
    font-size: 75%;
    text-decoration: none;
}

/* post new thread */
#postWrapper {
    margin: 1em auto;
    text-align: center;
}
#newPostFieldset {
    border: 1px dashed #ff0000;
    display: inline-block;
    padding: 0.5em;
}
#postBox {
    margin: 0 auto 1em;
    text-align: left;
}
#postBox textarea {
    height: 12em;
    width: 28em;
}
#postBox div.wider input {
    width: 20em;
}
#postBox input, #postBox textarea {
    margin-top: 0.5em;
}
#postBox input:focus, #postBox textarea:focus {
    box-shadow: 0 0 0px 0px #117743;
}
#postWrapper button {
    font-size: 125%;
    margin: 0.5em auto;
    width: 8em;
}
#postWrapper button:active {
    box-shadow: 0 0 0px #117743;
}
.spoilerCheckbox, #flagsDiv {
    display: inline-block;
}
#postWrapper label {
    font-size: 80%;
}
input#checkboxSpoiler[type="checkbox"] {
    display: none;
}
input#checkboxSpoiler[type="checkbox"] + label::before {
    color: #FF0000;
    content: "";
    display: inline-block;
    font-family: Icons;
    margin-right: 0.5em;
}
input#checkboxSpoiler[type="checkbox"]:checked + label::before {
    color: #117743;
    content: "";
    display: inline-block;
    font-family: Icons;
    margin-right: 0.5em;
}
a.rules::after {
    color: #117743;
    content: "";
    font-family: Icons;
    font-size: 80%;
    height: 80%;
    margin-right: 0.5em;
    padding-left: 0.25em;
    vertical-align: middle;
}

/* thread/post report and management form */
#reportFieldset {
    border: 1px dashed #FF0000;
    clear: both;
    float: left;
    margin: 2em 0 1em 1em;
    padding: 0.5em;
}
.contentAction label {
    font-size: 80%;
}
#threadReport label, #threadReport img, .contentAction label, .contentAction img, #transferControls, #ipDelete {
    display: block;
}
#threadReport label.checkbox, #threadReport input[type="checkbox"] {
    display: inline-block;
}
#threadReport #fieldCaptchaReport {
    display: inline-block;
}
.buttonBox {
    margin-top: 0.5em;
}
#divControls, #transferControls, #ipDelete {
    margin: 1em;
}
#divControls input, #divControls label {
    display: inline-block;
}
#threadLinks {
    font-size: 80%;
    margin: 1em;
}
#boardLinks {
    font-size: 80%;
    margin: 1em 1em 1em 0;
}

/* thread list, some elements are in the post section */
#threadList {
    margin: 1em;
}
#panelMessage {
    margin: 1em;
}
#divMessage {
    text-align: center;
}

/* posts */
.divPosts {
    margin: 1em 0;
}
.postCell {
    margin: 0.25em 0;
}
.innerPost, .markedPost {
    background: #282a2e none repeat scroll 0 0;
    border-radius: 0px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding-right: 0.25em;
}
.postInfo, .opHead, .divMessage, .panelUploads, .panelIp, .panelProxyIp, .contentOmissionIndicator, .labelOmission, .linkThumb {
    font-size: 80%;
}
.markedPost {
    background: rgba(50, 50, 50, 0.4) none repeat scroll 0 0;
}
.linkName {
    color: #ff0000;
    font-weight: bold;
}
.linkName:hover {
    color: #aa0000;
}
.noEmailName, .noEmailName:hover {
    color: #AA0000;
    text-shadow: none;
}
.quoteLink {
    color: #ff0000;
}
.labelId:hover {
    text-shadow: 0 0 5px #a00;
}
.linkSelf {
    color: #acacac;
    text-decoration: none;
}
.linkSelf:hover {
    color: #aa0000;
}
.linkQuote {
    color: #acacac;
    text-decoration: none;
}
.linkQuote:hover {
    color: #ff0000;
}
.labelSubject {
    color: #aa0000;
    font-weight: bold;
}
.labelRole {
    color: #ff0000;
    font-weight: bold;
}
.labelRole::before {
    color: #a00;
    content: "";
    font-family: Icons;
}
.divMessage {
    margin-bottom: 0.5em;
    margin-left: 3em;
    margin-top: 1em;
    word-wrap: break-word;
}
.multipleUploads .innerPost .divMessage, .multipleUploads .markedPost .divMessage {
    clear: both;
}
.divBanMessage {
    color: #ff0000;
    font-size: 100%;
    font-weight: bold;
    margin: 1em;
}
.divBanMessage::before {
    color: #a00;
    content: "";
    font-family: Icons;
}
.uploadCell {
    float: none;
    margin: 0.25em 1em 0.25em 0.5em;
}
.uploadCell img {
    float: left;
    margin-bottom: 1em;
    margin-right: 1em;
}
.multipleUploads .opUploadPanel, .multipleUploads .panelUploads {
    float: left;
    width: 100%;
}
.multipleUploads .uploadCell {
    float: left;
}
.uploadDetails {
    margin-bottom: 0.5em;
}
.opCell {
    clear: left;
}
.panelIp, .panelProxyIp {
    margin: 0.25em 1em 0.25em 0.5em;
}
.panelBacklinks a {
    color: #aa0000;
    padding-left: 0.5em;
    text-decoration: none;
}
.hideLink {
    vertical-align: top;
}
.aa {
    display: block !important;
    font-family: Mona,"MS PGothic","ＭＳ Ｐゴシック",sans-serif;
    font-size: 12pt;
    line-height: 1.1;
}
.labelLastEdit {
    margin-left: 0.75em;
    margin-top: 0.75em;
}
.contentOmissionIndicator {
    margin: 1em 0;
}
.labelOmission {
    margin-left: 0.5em;
    margin-top: 0.5em;
}
.imgFlag {
    max-height: 16px;
    max-width: 16px;
}

/* markdown */
.greenText {
    color: #789922;
}
.redText {
    color: #af0a0f;
    font-size: 125%;
    font-weight: bold;
}
span.spoiler {
    background: #000 none repeat scroll 0 0;
    color: #000;
    padding: 0 1px;
}
.spoiler:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #acacac;
}

/* refresh timer */
.divRefresh {
    clear: both;
    display: block;
    float: left;
    height: 1.5em;
    margin: 0 0 0 1em;
    padding: 0;
}
.divRefresh label, .divRefresh input {
    display: inline-block;
    font-size: 80%;
    margin: 0;
}

/* catalog */

/* this is important since the catalog cell container shares the same id as the actual threads container on other pages */
.catalogDiv {
    margin: 1em auto;
    text-align: center;
    width: 95%;
}
#catalogId {
    font-size: 150%;
    margin: 1.5em 0 1em;
    text-align: center;
}
.red {
    color: #FF0000;
}
.linkThumb img {
    max-height: 128px;
    max-width: 128px;
}
.catalogCell {
    background: #282a2e none repeat scroll 0 0;
    border: 1px solid #ff0000;
    border-radius: 0px;
    display: inline-block;
    height: 14em;
    margin: 0.1em;
    overflow: hidden;
    padding: 0.25em;
    text-align: center;
    width: 10em;
}
.catalogCell .divMessage {
    font-size: 75%;
    margin: 0;
}
.catalogCell .labelSubject {
    font-size: 75%;
}
.threadStats {
    font-size: 75%;
}
.lockIndicator::before {
    color: #a00;
    content: "";
    font-family: Icons;
}
.pinIndicator::after {
    color: #a00;
    content: "";
    font-family: Icons;
}
.cyclicIndicator::after {
    color: #a00;
    content: "";
    font-family: Icons;
}
.bumpLockIndicator::after {
    color: #a00;
    content: "";
    font-family: Icons;
}
#archiveThreadList div, #archiveBoardList div {
    margin: 0.25em 0;
}

/* index page */
#indexWrapper {
    margin: 2em auto;
    width: 80%;
}
#logoBox {
    margin: 0 auto 1em;
    text-align: center;
    width: 100%;
}
#infoBox {
    font-size: 120%;
    margin: 1em auto 2em;
    padding: 0.5em;
    text-align: center;
    width: 100%;
}
#links, #divStats {
    font-size: 75%;
    padding: 0.5em;
    text-align: center;
}
#links a {
    text-decoration: none;
}
#linkLogs::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkGraphs::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkArchives::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkAccount::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkGlobalRules::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkAbout::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkEngine::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkLinks::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
#linkContact::before {
    content: "";
    font-family: Icons;
    margin-right: 0.25em;
}
.topBoards {
    margin: 1em 0;
    text-align: center;
    width: 100%;
}
.topBoards a {
    background: #282a2e none repeat scroll 0 0;
    border-radius: 0px;
    display: inline-block;
    font-size: 90%;
    margin: 0.5em 0.25em;
    padding: 0.25em 0.5em;
    text-decoration: none;
}
.topBoards br {
    display: none;
}
#divLatestPosts {
    margin: 1em;
    text-align: center;
    width: 100%;
}
#divLatestPosts .latestPostCell {
    background: #282a2e none repeat scroll 0 0;
    border: 1px solid #ff0000;
    border-radius: 0px;
    display: inline-block;
    font-size: 75%;
    margin: 0.5em;
    max-height: 8em;
    max-width: 15%;
    overflow: hidden;
    padding: 0.5em;
    vertical-align: middle;
}
.latestPostCell a {
    display: block;
}
#divLatestImages {
    margin: 0 auto;
    text-align: center;
}
#divLatestImages .latestImageCell {
    display: inline-block;
    margin: 0 0.5em;
    max-width: 15%;
    vertical-align: middle;
}
#divLatestImages img {
    background: #282a2e none repeat scroll 0 0;
    border-radius: 0px;
    max-width: 100%;
    padding: 5px;
}

/* CSS for pages that deal with site and account settings and bans */
#settingsWrapper {
    margin: 2em auto;
    text-align: center;
    width: 80%;
}
#settingsFieldset {
    border: 1px dashed #FF0000;
    display: inline-block;
    padding: 1em;
    text-align: left;
}
#settingsWrapper input {
    display: block;
    margin: 0.5em 0.5em 0.5em 0;
}
.banners {
    margin: 1em;
    padding: 0.5em;
    width: auto;
}
#settingsFieldset textarea {
    display: block;
    height: 5em;
}
#settingsFieldset label {
    display: block;
}
#settingsFieldset label input {
    display: inline-block;
}
#settingsFieldset hr {
    border-color: #117743;
}
#settingsWrapper .captchaDiv input {
    display: inline-block;
}
input.wide, textarea.wide {
    width: 90%;
}
#redirect, #maint {
    text-align: center;
}
#labelCaptchaId {
    color: #ff0000;
}
#staticPageWrapper {
    margin: 2em auto;
    text-align: center;
}
#staticPageFieldset {
    border: 1px dashed #FF0000;
    display: inline-block;
    padding: 0.5em 1em;
    text-align: left;
}

/* footer styles */
footer {
    font-size: 75%;
    margin: 3em 0 2em;
    text-align: center;
    width: 100%;
}

/* this has to go down here to override anything above it */
.hidden {
    display: none;
}
#settingsWrapper input.hidden {
    display: none;
}
.filteredPost .postInfo, .filteredPost .panelUploads, .filteredPost .divMessage {
    display: none;
}
.filteredPost::before {
    color: #a00;
    content: "";
    font-family: Icons;
    margin: 1em;
}
