/*
	Extra/Global stylesheet code!
	Anything that stays consistent no matter the theme used should be in here
*/


/* Global Values */

.oldpost {
	background: inherit;
	color: #f00000;
	font-weight: 700;
}

/* Emote Hover (needs to be reworked) */
a.emotetip {
    text-decoration: none;
}
a.emotetip:hover {
    cursor: auto;
    position: relative;
}
a.emotetip span {
    display: none
}
a.emotetip:hover span {
	color: #fff;
	border: #000 1px solid;
	border-radius: 5px;
	padding: 5px 5px 5px 5px;
	display: block;
	width: auto;
	background: #000 no-repeat;
	position: absolute;
	bottom: 35px;
    margin: auto;
	text-decoration: none
}

/* 
	This is used when an emoji is replaced by a twemoji using javascript
	This makes the emoji more visible and supported on more devices and browsers
	Tor for example doesn't support emojis at all
*/
.emoji {
	display: inline-block;
	position: relative;
	top: -1px;
	vertical-align: middle;
	max-width: 28px;
	max-height: 28px;
	height: auto;
	width: auto;
	filter: drop-shadow(0.5px 0 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(-0.5px 0 0 black) drop-shadow(0 -0.5px 0 black);
}

/* 
	Rainbow /cow/ text 
*/
.cow {
    animation: rainbold 1s linear infinite;
    color: red;
    font-size: 2.0em;
/*  letter-spacing: 0.33em; */
    margin-left: 6px;
    text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet;
}

@keyframes rainbold {
    0% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
  14% { color: orange; text-shadow: -1px 0px yellow, -2px 0px green, -3px 0px blue, -4px 0px indigo, -5px 0px violet, -6px 0px red; }
  28% { color: yellow; text-shadow: -1px 0px green, -2px 0px blue, -3px 0px indigo, -4px 0px violet, -5px 0px red, -6px 0px orange; }
  43% { color: green; text-shadow: -1px 0px blue, -2px 0px indigo, -3px 0px violet, -4px 0px red, -5px 0px orange, -6px 0px yellow; }
  57% { color: blue; text-shadow: -1px 0px indigo, -2px 0px violet, -3px 0px red, -4px 0px orange, -5px 0px yellow, -6px 0px green; }
  71% { color: indigo; text-shadow: -1px 0px violet, -2px 0px red, -3px 0px orange, -4px 0px yellow, -5px 0px green, -6px 0px blue; }
  85% { color: violet; text-shadow: -1px 0px red, -2px 0px orange, -3px 0px yellow, -4px 0px green, -5px 0px blue, -6px 0px indigo; }
 100% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
}

@-moz-keyframes rainbold {
    0% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
  14% { color: orange; text-shadow: -1px 0px yellow, -2px 0px green, -3px 0px blue, -4px 0px indigo, -5px 0px violet, -6px 0px red; }
  28% { color: yellow; text-shadow: -1px 0px green, -2px 0px blue, -3px 0px indigo, -4px 0px violet, -5px 0px red, -6px 0px orange; }
  43% { color: green; text-shadow: -1px 0px blue, -2px 0px indigo, -3px 0px violet, -4px 0px red, -5px 0px orange, -6px 0px yellow; }
  57% { color: blue; text-shadow: -1px 0px indigo, -2px 0px violet, -3px 0px red, -4px 0px orange, -5px 0px yellow, -6px 0px green; }
  71% { color: indigo; text-shadow: -1px 0px violet, -2px 0px red, -3px 0px orange, -4px 0px yellow, -5px 0px green, -6px 0px blue; }
  85% { color: violet; text-shadow: -1px 0px red, -2px 0px orange, -3px 0px yellow, -4px 0px green, -5px 0px blue, -6px 0px indigo; }
 100% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
}

@-webkit-keyframes rainbold {
    0% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
  14% { color: orange; text-shadow: -1px 0px yellow, -2px 0px green, -3px 0px blue, -4px 0px indigo, -5px 0px violet, -6px 0px red; }
  28% { color: yellow; text-shadow: -1px 0px green, -2px 0px blue, -3px 0px indigo, -4px 0px violet, -5px 0px red, -6px 0px orange; }
  43% { color: green; text-shadow: -1px 0px blue, -2px 0px indigo, -3px 0px violet, -4px 0px red, -5px 0px orange, -6px 0px yellow; }
  57% { color: blue; text-shadow: -1px 0px indigo, -2px 0px violet, -3px 0px red, -4px 0px orange, -5px 0px yellow, -6px 0px green; }
  71% { color: indigo; text-shadow: -1px 0px violet, -2px 0px red, -3px 0px orange, -4px 0px yellow, -5px 0px green, -6px 0px blue; }
  85% { color: violet; text-shadow: -1px 0px red, -2px 0px orange, -3px 0px yellow, -4px 0px green, -5px 0px blue, -6px 0px indigo; }
 100% { color: red; text-shadow: -1px 0px orange, -2px 0px yellow, -3px 0px green, -4px 0px blue, -5px 0px indigo, -6px 0px violet; }
}


/* 
	Regular rainbow text 
*/
.rainbow {
-webkit-animation:rainbow 1s infinite;
-ms-animation:rainbow 1s infinite;
-o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
}
@-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}


/*
	hell rotate
*/
.hell {
	font-size:30px;
	color:red;
	white-space:pre;
	display:inline-block;
	-webkit-animation:hell 1s 2s infinite;
	animation:hell 2s infinite;
	width:8em;
}
@-webkit-keyframes hell {
0% {animation-timing-function: ease-in; transform: rotate( 0deg )}
10% {transform: rotate( -4deg )}
50% {transform: rotate( -8deg )}
100% {animation-timing-function: ease-out; transform: rotate( 1deg )}
}
@keyframes hell {
0% {animation-timing-function: ease-in; transform: rotate( 0deg )}
10% {transform: rotate( -4deg )}
50% {transform: rotate( -8deg )}
100% {animation-timing-function: ease-out; transform: rotate( 1deg )}
}

/* 
	Flashing Text
*/
.regflashtext {
	-webkit-animation-name: flashreg;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: flashreg;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: flashreg;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	color: inherit;
}

@-moz-keyframes flashreg {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
}

@-webkit-keyframes flashreg {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
}

@keyframes flashreg {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
}

/* Rainbow 2 */
@keyframes rainbow2{0%{color:#f00;transform:scale(1) rotate(0deg)}16%{color:#ff0;transform:scale(1.3) rotate(22.5deg)}33%{color:#0f0;transform:scale(1.15) rotate(11.25deg)}50%{color:#0ff;transform:scale(1) rotate(0deg)}66%{color:#00f;transform:scale(1.3) rotate(-22.5deg)}83%{color:#f0f;transform:scale(1.15) rotate(-11.25deg)}100%{color:#f00;transform:scale(1) rotate(0deg)}}.rainbow2{font-weight:bolder;font-size:1.5rem;text-transform:uppercase;display:inline-block;text-shadow:0 2px 4px black;animation:rainbow2 1s infinite linear}


/* Red/Blue Text */

.redtext {
	color: darkred;
	font-size: 15pt;
	font-weight: 700;
}
.rquote {
	color: #E0727F;
}

div.closed {
	font-size:x-large;
	text-align:center;
	color:red;
	font-weight:700;
	padding-top:100px;
	padding-bottom:100px
}

/* 
	Global Theme CSS
*/

/* Files */

.fileText {
	max-width: 600px;
	white-space: nowrap;
}
.omiticon {
	margin-bottom: -3px;
	margin-right: 3px;
	margin-left: 2px;
}
.fileDeletedRes {
	height: 13px;
	width: 127px;
}
.deleted {
	cursor: not-allowed;
}

.postMenuBtn {
	margin-left: 5px;
	text-decoration: none;
	line-height: 1em;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.1s;
	-moz-transition: -moz-transform 0.1s;
	transition: transform 0.1s;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width: 1em;
	height: 1em;
	text-align: center;
	outline: none;
	opacity: 0.8;
}
.postMenuBtn:hover {
	opacity: 1;
}
.menu.open hr {
	margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid inherit;
    width:100%
}
a.menu.open {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

input[type=checkbox] {
	position: relative;
}

.hide { display: none; }

.sage {
	color: #FF0000;
	font-weight: 700;
	cursor: help;
}

/* Optional get marker enabled by the `checkem` Options-field token.
   The renderer also applies the existing .sage class, preserving its placement,
   bold weight, and question-mark help cursor. */
.sage.checkem {
	font-weight: 700;
	cursor: help;
	white-space: nowrap;
}

.checkem-none,
.checkem-dubs {
	color: #FF0000;
}

.checkem-trips {
	color: #770099;
}

.checkem-rainbow-red    { color: #FF0000; }
.checkem-rainbow-orange { color: #FF8000; }
.checkem-rainbow-yellow { color: #C49A00; }
.checkem-rainbow-green  { color: #009933; }
.checkem-rainbow-blue   { color: #0066CC; }
.checkem-rainbow-violet { color: #770099; }

.checkem-ultra {
	background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00b050, #0080ff, #4b0082, #ee82ee, #ff0000);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #ff0000;
	animation: checkem-ultra-rainbow 2s linear infinite;
}

@keyframes checkem-ultra-rainbow {
	from { background-position: 0% 50%; }
	to   { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.checkem-ultra {
		animation: none;
	}
}

div.post div.file {
	display: block;
}

div.post div.file div.fileInfo {
	margin-right: 10px;
  word-break: break-all;
}

div.replyContainer div.post div.file div.fileInfo {
	margin-left: 20px;
}

div.post div.file .fileThumb {
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 3px;
	margin-bottom: 5px;
}

span.fileThumb {
	margin-left: 0px !important;
	margin-right: 5px !important;
}

div.reply span.fileThumb, div.reply span.fileThumb img {
	float: none !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

div.post div.file .fileThumb img {
	border: none;

	float: left;
}

textarea.paneltext {
	margin: 0px;
	margin-right: 2px;
	padding: 2px 4px 3px 4px;
	border: 1px solid #AAAAAA;
	width: 792px;
	outline: none;
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
}

/* Limits text in file input. */
#postFile {
  margin-right: 10px;
  width: 200px;
}

/* Minor things */

div.delFrame {
	margin: 0.5em;
}

.containad {
    overflow: hidden;
	clear:both;
}​

.bannerImg {
	border: 1px solid #000;
}

.thread-stats {
	cursor: default;
}

.open-qr-wrap {
	float: center;
}

.cap.janitor {
	color: #4169E1;
}

.uflag {
	display: inline-block;
	position: relative;
	top: -1px;
	vertical-align: middle;
	/*
	display: inline-block;
	position: relative;
	height: auto;
	top: 2px;
	*/
}
.uflag:hover {
	opacity: 0.7;
	cursor: help;
}

.flag_preview {
	left: 7px;
}

.tag {
	display: inline-block;
	position: relative;
	top: -1px;
	vertical-align: middle;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	padding: 2px 8px;
	border-radius: 10px;
	margin-right: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Always show selection cursor and make it so text can't be selected */
	cursor: pointer;
	user-select: none
}
.tag:hover{ opacity:.85 }
.tag:active{transform:scale(.95)}

/* Collapsed post area */
#PostAreaToggle, p.ToggleFormButton {
	font-size: 22px;
	font-weight: bold;
	margin: 6.66667px 0 !important;
	padding: 0
}
#PostAreaToggle, .togrules {
	text-align: left;
	position: static;
	max-width: 30%;
	font-size:11px;
	content:"\2022 \20"
}
hr.PostAreahr {
	width: 40%
}
#PostAreaToggle + span > p > a > label {
	cursor: pointer
}
#PostAreaToggle + span + div {
	display: none
}
#PostAreaToggle:checked + span {
	display: none
}
#PostAreaToggle:checked + span + div {
	display: inline-block
}
.hidden {
	display:none
}
.mobile {
	display: none;
}
.menu.gen {
  min-width: 80px;
  max-width: 100px;
  white-space: nowrap;
}
/* Tripcode inside capcode - inherit capcode color and match weight */
.cap .postertrip {
    color: inherit !important;
    font-weight: normal !important;
}
/* Ensure cap spans have consistent font-weight */
.cap {
    font-weight: bold;
}
/* Cap-specific colors (already in main CSS, but ensure consistency) */
.cap.admin { color: #FF101A; }
.cap.moderator { color: #709; }
.cap.manager { color: #FF0080; }
.cap.dev { color: #0000ed; }
.cap.janitor { color: #4169E1; }
/* Blotter Styling */
#blotter, #blotter * {
    font-size: 11px !important;
}
#blotter {
    width: 468px;
    margin: 2px auto 0 auto;
    border-collapse: collapse;
    line-height: 1.2;
}
#blotter td {
    vertical-align: top;
    padding: 0 2px;
}
.blotter-date {
    width: 1%;
    padding-right: 8px !important;
    white-space: nowrap;
    font-weight: normal;
}
.blotter-content {
    padding-left: 0 !important;
    text-align: left;
}
#blotter tfoot {
    text-align: right;
}
#blotter tfoot td {
    padding-top: 0px; padding-bottom: 2px;
}
#blotter hr {
    border: none;
    border-top: 1px solid;
    margin: 2px 0;
    opacity: 0.3;
}
/* Hide/Show blotter buttons */
#toggleBlotter {
    color: #0000ee;
    text-decoration: none;
    font-size: 11px !important; /* 1px shorter than the 11px 'Show All' button */
}
#blotter tfoot a:not(#toggleBlotter) {
    font-size: 11px !important; /* 'Show All' button at 11px */
}
#toggleBlotter:hover, #blotter tfoot a:hover {
    text-decoration: underline;
}




/* Added by Manus for text formatting */


.greentext { color: #789922 !important; background: none !important; }
.pinktext { color: #ff00ee !important; }
.bluetext { color: #00f !important; background: none !important; padding: 0 !important; }


/* Additional capcode styles for extension.js compatibility */
.capcodeJanitor .name, .capcodeJanitor .name a, .capcodeJanitor .postertrip, .capcodeJanitor strong.capcode {
}

/* Additional capcode styles for extension.js compatibility */
.capcodeJanitor .name, .capcodeJanitor .name a, .capcodeJanitor .postertrip, .capcodeJanitor strong.capcode {
}

/* Additional capcode styles for extension.js compatibility */
.capcodeJanitor .name, .capcodeJanitor .name a, .capcodeJanitor .postertrip, .capcodeJanitor strong.capcode {
    color: #4169E1 !important;
}
.id_janitor { color: #4169E1 !important; }

/* Fix blurry capcode icons */
.identityIcon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    height: 16px !important;
    width: 16px !important;
}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.identityIcon[src*="icon-admin.gif"]{content:url("/global/imgs/logo/icon-admin@2x.gif")}.identityIcon[src*="icon-moderator.gif"]{content:url("/global/imgs/logo/icon-moderator@2x.gif")}.identityIcon[src*="icon-developer.gif"]{content:url("/global/imgs/logo/icon-developer@2x.gif")}.identityIcon[src*="icon-manager.gif"]{content:url("/global/imgs/logo/icon-manager@2x.gif")}.identityIcon[src*="icon-janny.gif"]{content:url("/global/imgs/logo/icon-janny@2x.gif")}}
.capIcon {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	margin-bottom: -3px;
	width: 16px;
	height: 16px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.capIcon[src*="icon-admin.gif"] { content: url("/global/imgs/logo/icon-admin@2x.gif"); }
	.capIcon[src*="icon-moderator.gif"] { content: url("/global/imgs/logo/icon-moderator@2x.gif"); }
	.capIcon[src*="icon-developer.gif"] { content: url("/global/imgs/logo/icon-developer@2x.gif"); }
	.capIcon[src*="icon-manager.gif"] { content: url("/global/imgs/logo/icon-manager@2x.gif"); }
	.capIcon[src*="icon-janny.gif"] { content: url("/global/imgs/logo/icon-janny@2x.gif"); }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.capIcon[src*="icon-admin.gif"] { content: url("/global/imgs/logo/icon-admin@2x.gif"); }
	.capIcon[src*="icon-moderator.gif"] { content: url("/global/imgs/logo/icon-moderator@2x.gif"); }
	.capIcon[src*="icon-developer.gif"] { content: url("/global/imgs/logo/icon-developer@2x.gif"); }
	.capIcon[src*="icon-manager.gif"] { content: url("/global/imgs/logo/icon-manager@2x.gif"); }
	.capIcon[src*="icon-janny.gif"] { content: url("/global/imgs/logo/icon-janny@2x.gif"); }
}

/* Bottom board controls: pagination/catalog left, delete/style settings right. */
@media (min-width: 700px) {
    .afterPosts > .delsettings {
        float: right;
        width: auto;
        margin-left: 12px;
        white-space: nowrap;
        text-align: right;
    }

    .afterPosts > .pagelist {
        float: left;
        margin-right: 12px;
    }
}


.afterPosts .boardlist {
    display: block;
    margin-top: -3px;
}