/* MISC CSS
   --------- */

.uploadCell img:not(.imgExpanded) {
    max-width: 250px;
    max-height: 250px;
    height: initial;
}

.multipleUploads .uploadCell:not(.expandedCell) {
    max-width: 250px;
}

/* Webkit Scrollbar Metrics */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}

::-webkit-scrollbar-track-piece {
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    -webkit-border-radius: 8px;
}

::-webkit-scrollbar-thumb:horizontal {
    width:50px;
    -webkit-border-radius:8px;
}

#mainPanel {overflow-y: initial; } /* Move scrollbar to body element. */




/* ========================================================================== */
/* DEFAULT THEME
   ------------- */

/* Basic Page Colors and Metrics
   ----------------------------- */

body {
    background: url('https://i.imgur.com/Bjyf1oj.png') top repeat-x, #eef2ff;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

.topBoards a, #divLatestImages img, #divLatestPosts .latestPostCell,
  .innerPost, .sideCatalogCell, .markedPost, .sideCatalogMarkedCell,
  .catalogCell {
    background-color: #D6DAF0;
}

/* Highlighted posts. Make it subtle. */
.markedPost, .sideCatalogMarkedCell {
    background-color: #D5CEF8;
}

a, .coloredIcon, .unhideButton, .embedButton, #selectedTab, #showFormsButton {
    color: #34345C;
}

a:hover, .coloredIcon:hover, .unhideButton:hover, .embedButton:hover, #selectedTab:hover, #showFormsButton:hover {
    color: #DD0000;
}

.glowOnHover:hover, a:hover { text-shadow: none; }

hr { border-color: #B7C5D9; }

.small {font-size: 80%; }


/* Replies (and other things like them) backgrounds
   ------------------------------------------------ */
#divLatestPosts .latestPostCell, .innerPost, .sideCatalogCell, .markedPost, .sideCatalogMarkedCell, .catalogCell {
    border-color: #B7C5D9;
    border-width: 1px;
    border-style: none solid solid none;
    border-radius: 0px;
}

.postInfo, .opHead, .divMessage, .panelUploads, .panelIp, .panelProxyIp, .contentOmissionIndicator, .labelOmission, .labelId, .panelASN {
    font-size: 97.5%; /* 13px when body 10pt */
}

.postCell {margin: 0.4em 0;}

/* Post information and other formatting
   ------------------------------------- */

.title {
    font-weight: normal;
}

.title .coloredIcon {
    font-weight: bold;
    font-size: 90%;
}

.title .linkName {
    color: #34345C;
    font-weight: bold;
    text-decoration: underline; /* Fix for others */
}

.title .linkName.noEmailName {
    color: #117743;
    text-decoration: none;
}

.panelBacklinks { font-size: 76.9%; /* 10px when body 10pt */ }

.panelBacklinks a { color: #34345c; }
.panelBacklinks a:hover { color: #DD0000; }

.labelSubject { color: #0F0C5D; }

.linkSelf, .linkQuote {
    font-weight: normal;
    color: #303030;
}

.linkSelf:hover, .linkQuote:hover { color: red; }

/* Make hovering over filenames less annoying. Red is too much. */
.uploadDetails .originalNameLink:hover { color: #004758; }

.divMessage .quoteLink { color: #d00; }

.divMessage a {
    color: #34345C;
    text-decoration: underline;
}
.divMessage a:hover { color: red; }

.greenText { color: #789922; }
.redText { color: #AF0A0F; }

/* Stop theme colors breaking spoilers. */
.spoiler:hover { background: black; color: white !important; }
.spoiler a {
    color: black !important;
    text-decoration: underline;
}
.spoiler:hover a { color: white !important; }


/* Navigation Bar
   -------------- */

nav {
    background-color: #D6DAF0;
    border-color: #89A;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    font-size: 80%;
}


/* Input elements and controls
   --------------------------- */

input, select, textarea {
  border: 1px solid #A9A9A9;
  background: white;
  color: black;
  font-family: arial,helvetica,sans-serif;
  font-size: 80%;
  border-radius: 0;
}

input[type="button"], input[type="submit"], button, .dropzone, .selectedCell {
    border: 2px solid #c1c6da;
    border-radius: 5px;
    background: #e1e5f5;
    color: #34345c;
    padding-left: 0.25em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
}

.dropzone, .selectedCell { border-radius: 0; }

.floatingMenu, #quick-reply table {
    background: #E4E8FB;
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,.25);
}

.modalDecorationPanel { background: #E4E8FB; } /* Report Form */

.extraMenu, .hideMenu { color: black; }

/* The dashing around the post form and various panels. */
#newPostFieldset {
    border: 1px dashed #B7C5D9;
}

#quick-reply table, .modalDecorationPanel, .floatingMenu, #settingsFieldset, .reportFieldset {
    border: 1px dashed #787a99;
}

/* The tick/cross checkboxes would be green otherwise. */
input.postingCheckbox[type="checkbox"] + label::before {
    color: #7D66ED;
}

/* A hopefully subtle focus ring for the text inputs. */
#postingForm input:focus,
#postingForm textarea:focus,
.modalDecorationPanel input[type="text"]:focus,
#settingsMenu input[type="text"]:focus,
#settingsMenu textarea:focus {
    box-shadow: 0px 0px 2px 0px #0911AE75;
}

/* Mainly in settings menu */
#selectedTab {
    text-shadow: none;
    font-weight: bold;
}

#cssInput, #jsInput { font-size: 90%; }


/* Posting Form
   ------------ */

/* Left column labels of the form. */
#postingForm th, .modalTableBody th {
    background: #98E;
    border: none;
    font-size: 100%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #303030;
    border-radius: 0;
    width: 85px;
}

#postingTable textarea,
#postingTable input[type="text"] {
    font-size: 90%;
    padding: 0.1em 0.3em;
}

/* The text inputs need a width adjustment because the cols attribute is
   dependant on the font metrics.
   The JS can override this if the user adjusts the posting form width. */
#fieldMessage { width: 265px; }
#newPostFieldset { width: 30em; }

/* The little rules icon next to the link. */
a.rules::after {
    color: #7D66ED;
}


/* Board Heading
   ------------- */

#labelDescription { color: #AF0A0F; }

#labelName {
    font-weight: bold;
    font-family: tahoma;
    letter-spacing: -2px;
    color: #800000;
    margin: 0.25em 0 0 0;
}


/* Theme Misc
   ------------- */

body::-webkit-scrollbar-track-piece { background-color: #c5c9e4; }
body::-webkit-scrollbar-thumb { background-color: #8C8ABB; }



/* ========================================================================== */
/* DARK THEME (CLEAR)
   ------------------ */

/* Basic Page Colors and Metrics
   ----------------------------- */
body.theme_clear {
    background: #2f2f2f;
    color: #c5c8c6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

.theme_clear .topBoards a,
.theme_clear #divLatestImages img,
.theme_clear #divLatestPosts .latestPostCell,
.theme_clear .innerPost,
.theme_clear .sideCatalogCell,
.theme_clear .markedPost,
.theme_clear .sideCatalogMarkedCell,
.theme_clear .catalogCell {
    background-color: #2f343e;
}

/* Highlighted posts. Make it subtle. */
.theme_clear .markedPost,
.theme_clear .sideCatalogMarkedCell {
    background-color: #394156;
}

.theme_clear a,
.theme_clear .coloredIcon,
.theme_clear .unhideButton,
.theme_clear .embedButton,
.theme_clear #selectedTab,
.theme_clear #showFormsButton {
    color: #81a2be;
}

.theme_clear a:hover,
.theme_clear .coloredIcon:hover,
.theme_clear .unhideButton:hover,
.theme_clear .embedButton:hover,
.theme_clear #selectedTab:hover,
.theme_clear #showFormsButton:hover {
    color: #c95f5f;
}

.theme_clear .glowOnHover:hover,
.theme_clear a:hover {
    text-shadow: none;
}

.theme_clear hr,
.theme_clear #threadList hr {
    border-color: #282a2e;
}

.theme_clear .small {font-size: 80%; }


/* Replies (and other things like them) backgrounds
   ------------------------------------------------ */

.theme_clear .topBoards a,
.theme_clear #divLatestImages img,
.theme_clear #divLatestPosts .latestPostCell,
.theme_clear .innerPost,
.theme_clear .sideCatalogCell,
.theme_clear .markedPost,
.theme_clear .sideCatalogMarkedCell,
.theme_clear .catalogCell {
    border-radius: 7px 7px 7px 0;
    border: none;
    box-shadow: 1px 2px 4px rgba(0,0,0,.24);
}

.theme_clear .postInfo,
.theme_clear .opHead,
.theme_clear .divMessage,
.theme_clear .panelUploads,
.theme_clear .panelIp,
.theme_clear .panelProxyIp,
.theme_clear .contentOmissionIndicator,
.theme_clear .labelOmission,
.theme_clear .labelId,
.theme_clear .panelASN {
    font-size: 100%;
}

.theme_clear .postCell {
    padding-bottom: 4px;
    margin: 0.4em 0;
}


/* Post information and other formatting
   ------------------------------------- */

.theme_clear .title a,
.theme_clear .title .coloredIcon {
    color: #5f89ac;
}

.theme_clear .title a:not(.linkName):hover,
.theme_clear .title .coloredIcon:hover {
    color: #6B9BC2;
}

.theme_clear .title {
    font-size: 90%;
    font-weight: normal;
}

.theme_clear .title .coloredIcon {
    font-weight: bold;
    font-size: 90%;
}

.theme_clear .title .linkName {
    color: #bd8f8f;
    font-weight: bold;
    text-decoration: underline;
}

.theme_clear .title .linkName.noEmailName {
    color: #c1b8b8;
    text-decoration: none;
}

.theme_clear .labelOmission {
    color: #c1b8b8;
    font-size: 90%;
}

.theme_clear .panelBacklinks { font-size: 80%; }

.theme_clear .labelSubject { color: #ce52c9; }

.theme_clear .linkSelf, .theme_clear .linkQuote { font-weight: normal; }

.theme_clear .uploadDetails { font-size: 90%; }

.theme_clear .uploadDetails .hideMobile,
.theme_clear .uploadDetails .sizeLabel,
.theme_clear .uploadDetails .dimensionLabel,
.theme_clear .uploadDetails .originalNameLink { font-size: 80%; }

/* Make hovering over filenames less annoying. Red is too much. */
.theme_clear .uploadDetails .originalNameLink:hover { color: #92B6D5; }

.theme_clear .divMessage a { text-decoration: none; } /* Undo Yotsuba B Style */
.theme_clear .divMessage a { color: #5f89ac; }
.theme_clear .divMessage a:hover { color: #6B9BC2; }

.theme_clear .redText { color: #DD293F; }

.theme_clear .greenText { color: #b5bd68; }

.theme_clear .orangeText { color: #E0727F; }

.theme_clear .spoiler:hover { color: #c5c8c6; background: #00000040; }


/* Navigation Bar
   -------------- */

.theme_clear nav {
    background-color: #423756;
    border: none;
    border-top: 3px solid #2F2F2F;
    font-size: 80%;
    box-shadow: none;
}


/* Input elements and controls
   --------------------------- */

.theme_clear input,
.theme_clear select,
.theme_clear textarea {
    border: 1px double #282830;
    border-radius: 5px;
    background: #3D3E42;
    color: #BDBDBD;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}

.theme_clear input[type="button"],
.theme_clear input[type="submit"],
.theme_clear button,
.theme_clear .dropzone,
.theme_clear .selectedCell {
    border: 3px double #282830;
    border-radius: 5px;
    background: #34353C;
    color: #ABABAB;
    padding-left: 0.25em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;
}

.theme_clear .floatingMenu,
.theme_clear #quick-reply table {
    background: #30343C;
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,.5);
}

.theme_clear .modalDecorationPanel { background: #404757; }

.theme_clear .extraMenu,
.theme_clear .hideMenu {
    color: #c5c8c6;
}

/* The dashing around the post form and various panels. */
.theme_clear #newPostFieldset,
.theme_clear #quick-reply table,
.theme_clear .modalDecorationPanel,
.theme_clear .floatingMenu,
.theme_clear #settingsFieldset,
.theme_clear .reportFieldset {
    border: 1px dashed #181818;
}

/* The tick/cross checkboxes would be green otherwise. */
.theme_clear input.postingCheckbox[type="checkbox"] + label::before {
    color: #81a2be;
}

/* A hopefully subtle focus ring for the text inputs. */
.theme_clear #postingForm input:focus,
.theme_clear #postingForm textarea:focus,
.theme_clear .modalDecorationPanel input[type="text"]:focus,
.theme_clear #settingsMenu input[type="text"]:focus,
.theme_clear #settingsMenu textarea:focus {
    box-shadow: 0px 0px 5px 0px #004F91;
}

/* Mainly in settings menu */
.theme_clear #selectedTab {
    text-shadow: none;
    font-weight: bold;
}

.theme_clear #cssInput,
.theme_clear #jsInput {
    font-size: 90%;
}


/* Posting Form
   ------------ */

/* Left column labels of the form. */
.theme_clear #postingForm th,
.theme_clear .modalTableBody th {
    background: #1D1D21;
    border:1px solid #000;
    font-size: 90%;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #c5c8c6; /* Undo Yotsuba B Style */
}

.theme_clear #postingTable textarea,
.theme_clear #postingTable input[type="text"] {
    font-size: 90%;
    padding: 0.1em 0.3em;
}

/* The text inputs need a width adjustment because the cols attribute is
   dependant on the font metrics.
   The JS can override this if the user adjusts the posting form width. */
.theme_clear #fieldMessage { width: 265px; }
.theme_clear #newPostFieldset { width: 30em; }

/* The little rules icon next to the link. */
.theme_clear a.rules::after {
    color: #81a2be;
}


/* Board Heading
   ------------- */

.theme_clear #labelName,
.theme_clear #labelDescription {
    color: #E0727F;
}

.theme_clear #labelName {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: inherit;
    margin: 0.25em 0 0 0;
}

.theme_clear #favouriteButton::before {
    font-family: Icons;
    content: "☯";
    margin-left: 0.5em;
    cursor: pointer;
}

.theme_clear .checkedFavouriteButton::before { color: red; }


/* Theme Misc
   ------------- */

body.theme_clear::-webkit-scrollbar-track-piece { background-color: #292929; }
body.theme_clear::-webkit-scrollbar-thumb { background-color: #666; }


/* ========================================================================== */
/* Tomorrow Theme
   -------------- */

body.theme_tomorrow {
    background: #1d1f21;
    color: #C5C8C6;
}

.theme_tomorrow .topBoards a,
.theme_tomorrow #divLatestImages img,
.theme_tomorrow #divLatestPosts .latestPostCell,
.theme_tomorrow .innerPost,
.theme_tomorrow .sideCatalogCell,
.theme_tomorrow .markedPost,
.theme_tomorrow .sideCatalogMarkedCell,
.theme_tomorrow .catalogCell {
    background-color: #282a2e;
}

.theme_tomorrow .markedPost,
.theme_tomorrow .sideCatalogMarkedCell {
    background-color: #1d1d21;
    border: 1px solid #111;
}

.theme_tomorrow a,
.theme_tomorrow .coloredIcon,
.theme_tomorrow .unhideButton,
.theme_tomorrow .embedButton,
.theme_tomorrow #selectedTab,
.theme_tomorrow #showFormsButton {
    color: #81a2be;
}

.theme_tomorrow a:hover,
.theme_tomorrow .coloredIcon:hover,
.theme_tomorrow .unhideButton:hover,
.theme_tomorrow .embedButton:hover,
.theme_tomorrow #selectedTab:hover,
.theme_tomorrow #showFormsButton:hover {
    color: #5F89AC;
}

.theme_tomorrow hr { border-color: #282a2e; }
.theme_tomorrow .floatingMenu hr { border-color: #000; }

.theme_tomorrow #divLatestPosts .latestPostCell,
.theme_tomorrow .innerPost,
.theme_tomorrow .sideCatalogCell,
.theme_tomorrow .markedPost,
.theme_tomorrow .sideCatalogMarkedCell,
.theme_tomorrow .catalogCell {
    border-color: #282a2e;
}

.theme_tomorrow .title .linkName { text-decoration: none; } /* Undo Yotsuba B Style */

.theme_tomorrow .title .linkName { color: #81a2be; }
.theme_tomorrow .title .linkName:not(.noEmailName)[href="mailto:sage"]::after {
    content: "SAGE!";
    color: red;
    margin-left: 5px;
}
.theme_tomorrow .title .linkName:not(.noEmailName):hover { color: #5F89AC; }

.theme_tomorrow .title .linkName.noEmailName { color: #C5C8C6; }

.theme_tomorrow .panelBacklinks a { color: #81a2be; }
.theme_tomorrow .panelBacklinks a:hover { color: #5F89AC; }

.theme_tomorrow .labelSubject { color: #b294bb; }

.theme_tomorrow .linkSelf,
.theme_tomorrow .linkQuote {
    color: #C5C8C6;
}

.theme_tomorrow .uploadDetails .originalNameLink:hover { color: #5F89AC; }

.theme_tomorrow .divMessage .quoteLink,
.theme_tomorrow .divMessage a { text-decoration: none; } /* Undo Yotsuba B Style */

.theme_tomorrow .divMessage .quoteLink { color: #81a2be; }
.theme_tomorrow .divMessage .quoteLink:hover { color: #5F89AC; }

.theme_tomorrow .divMessage a { color: #81a2be; }
.theme_tomorrow .divMessage a:hover { color: #5F89AC; }

.theme_tomorrow .greenText { color: #adbd68; }
.theme_tomorrow .redText { color: red; }

.theme_tomorrow nav {
    background-color: #282a2e;
    border-color: #111;
}

.theme_tomorrow input[type="button"],
.theme_tomorrow input[type="submit"],
.theme_tomorrow button,
.theme_tomorrow .dropzone,
.theme_tomorrow .selectedCell {
    border: 2px solid #111;
    background: #353535;
    color: #bcbcbc;
}

.theme_tomorrow .floatingMenu,
.theme_tomorrow #quick-reply table {
    background: #282A2E;
}

.theme_tomorrow .modalDecorationPanel { background: #383B42; }

.theme_tomorrow #newPostFieldset,
.theme_tomorrow #quick-reply table,
.theme_tomorrow .modalDecorationPanel,
.theme_tomorrow .floatingMenu,
.theme_tomorrow #settingsFieldset,
.theme_tomorrow .reportFieldset {
    border: 1px solid #000;
}

.theme_tomorrow input.postingCheckbox[type="checkbox"] + label::before {
    color: #81a2be;
}

.theme_tomorrow #postingForm th,
.theme_tomorrow .modalTableBody th {
    background: #282A2E;
    border: 1px solid #000;
    color: #C5C8C6; /* Undo Yotsuba B Style */
}

.theme_tomorrow a.rules::after {
    color: #81a2be;
}

.theme_tomorrow #labelDescription { color: #C5C8C6; }

.theme_tomorrow #labelName { color: #C5C8C6; }

body.theme_tomorrow::-webkit-scrollbar-track-piece { background-color: #292929; }
body.theme_tomorrow::-webkit-scrollbar-thumb { background-color: #666; }

.theme_tomorrow .labelOmission { color: #707070; }

.theme_tomorrow .extraMenu,
.theme_tomorrow .hideMenu {
    color: #C5C8C6;
}


/***************** I'm a very serious board admin ********************/
@keyframes intensify {
     50% { transform:rotate(-15deg); }
    100% { transform:rotate(15deg); }
}

.labelRole::before {
    animation: intensify .1s linear infinite;
    display: inline-block;
    content: "\1F346";
}

/**************** since people can't find the catalog ****************/

a#navCatalog::after {
    content: "(Catalog)";
}

/* Make Webring a normal link */
.WebringButton {
    animation: none;
    text-shadow: none;
    padding-top: 1px;
    font-size: 9pt;
}