/* 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://prolikewoah.com/uploads/fade-miku.png') top repeat-x, url('https://prolikewoah.com/uploads/s1.png') bottom 0px right 20px fixed no-repeat;
	background-color: #D2FFEE;
	background-size: auto, 10vw auto;
	animation: mascot 120s steps(1) infinite forwards;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

@keyframes mascot {
	0% { background-image:
		url('https://prolikewoah.com/uploads/fade-miku.png'),
		url('https://prolikewoah.com/uploads/s1.png');
	}
	25% { background-image:
		url('https://prolikewoah.com/uploads/fade-miku.png'),
		url('https://prolikewoah.com/uploads/s2.png');
	}
	50% { background-image:
		url('https://prolikewoah.com/uploads/fade-miku.png'),
		url('https://prolikewoah.com/uploads/s3.png');
	}
	75% { background-image:
		url('https://prolikewoah.com/uploads/fade-miku.png'),
		url('https://prolikewoah.com/uploads/s4.png');
	}
	100% { background-image:
		url('https://prolikewoah.com/uploads/fade-miku.png'),
		url('https://prolikewoah.com/uploads/s1.png');
	}
}




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

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

a, .coloredIcon, .unhideButton, .embedButton, #selectedTab, #showFormsButton {
    color: #00637B;
}

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

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

hr { border-color: #B7D9C5; }
.floatingMenu hr { border-color: #69937B; }

.small {font-size: 80%; }


/* Replies (and other things like them) backgrounds
   ------------------------------------------------ */
#divLatestPosts .latestPostCell, .innerPost, .sideCatalogCell, .markedPost, .sideCatalogMarkedCell, .catalogCell {
    border-color: #8FCCCD;
	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.35em 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;
}

.title .linkName.noEmailName {
	color: #117743;
}

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

.panelBacklinks a { color: #00637B; }
.panelBacklinks a:hover { color: #DD0000; }

.labelSubject { color: #0e696d; }

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

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

.divMessage .quoteLink { color: #00637B; }
.divMessage .quoteLink:hover { color: #004758; }

.divMessage a { color: #00637B; }
.divMessage a:hover { color: #DD0000; }

.orangeText { color: #E0727F; }
.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: #94d8da;
	border-color: #70a6a7;
	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%;
}

input[type="button"], input[type="submit"], button, .dropzone, .selectedCell {
    border: 2px solid #639fad;
    border-radius: 5px;
    background: #aad7d7;
    color: #00637B;
    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;
}

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

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

.extraMenu, .hideMenu { color: black; }

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

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

/* 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 #09ae70;
}

/* 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: #95D2D3;;
	border: none;
	font-size: 90%;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#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: #81a2be;
}


/* 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: #00637B; }
body::-webkit-scrollbar-thumb { background-color: #B6DDDE; }



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

/* Basic Page Colors and Metrics
   ----------------------------- */
body.theme_clear {
	background: url('https://prolikewoah.com/uploads/s1.png') bottom 0px right 20px fixed no-repeat;
	background-color: #2f2f2f;
	background-size: 10vw auto;
	animation: mascot_clear 120s steps(1) infinite forwards;
	color: #c5c8c6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

@keyframes mascot_clear {
	0% { background-image:
		url('https://prolikewoah.com/uploads/s1.png');
	}
	25% { background-image:
		url('https://prolikewoah.com/uploads/s2.png');
	}
	50% { background-image:
		url('https://prolikewoah.com/uploads/s3.png');
	}
	75% { background-image:
		url('https://prolikewoah.com/uploads/s4.png');
	}
	100% { background-image:
		url('https://prolikewoah.com/uploads/s1.png');
	}
}

.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 { 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;
}

.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: url('https://prolikewoah.com/uploads/s1.png') bottom 0px right 20px fixed no-repeat;
	background-color: #1d1f21;
	background-size: 10vw auto;
	animation: mascot_tomorrow 120s steps(1) infinite forwards;
    color: #C5C8C6;
}

@keyframes mascot_tomorrow {
	0% { 
		background-image: url('https://prolikewoah.com/uploads/s1.png');
	}
	25% { 
		background-image: url('https://prolikewoah.com/uploads/s2.png');
	}
	50% { 
		background-image: url('https://prolikewoah.com/uploads/s3.png');
	}
	75% { 
		background-image: url('https://prolikewoah.com/uploads/s4.png');
	}
	100% { 
		background-image: url('https://prolikewoah.com/uploads/s1.png');
	}
}

.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 { 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 { 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;
}

.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 {
	animation: webringbutton-rainbow 3s linear infinite;
}

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

/* remove text from buttons */
a#navBoardList::after,
a#navOverboard::after,
a#navPosting::after,
a#watcherButton::after,
a#settingsButton::after { content: "" }

/* change + to ? for help */
a#navPosting::before { content: "\e0b0" }
/* remove styles from webring button */
a.WebringButton { 
	animation: none; 
	text-shadow: none; 
}