@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap);
/*
 * sams.tj look for the MyBB forum (theme "sams.tj", a child of Default).
 * Source: wrapper-dev/sites/forum-theme/samstj.css. Installed by install_theme.php; edit here, not in the ACP.
 * Same palette as sams.tj (sites/shared/site.css): Press Start 2P, white text with a hard black shadow,
 * the sams background picture under a dark veil, black boxes with a green border, gold headings,
 * grey Minecraft buttons.
 */
:root {
	--accent: #55ff55;
	--accent-rgb: 85, 255, 85;
	--gold: #ffd700;
	--box: rgba(0, 0, 0, 0.8);
	--row1: rgba(0, 0, 0, 0.55);
	--row2: rgba(20, 20, 20, 0.65);
	--line: #444;
	--text: #fff;
	--muted: #bbb;
	--pixel: "Press Start 2P", monospace;
}

/* ---- page ---- */
body {
	background-color: #111;
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url(https://sams.tj/images/website-background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	color: var(--text);
	font-family: var(--pixel);
	font-size: 10px;
	line-height: 1.8;
	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 0;
}
#container { color: var(--text); font-family: var(--pixel); font-size: 10px; }
#container, #content { background: transparent; }
table, td, th, input, select, textarea, button { font-family: var(--pixel); }
a:link, a:visited, a:active { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }
.smalltext { font-size: 8px; color: var(--muted); }
.smalltext a:link, .smalltext a:visited { color: var(--accent); }
.largetext { font-size: 13px; color: var(--gold); }
hr { background-color: var(--line); color: var(--line); }

/* ---- header: the sams.tj title in place of the banner picture ---- */
#logo {
	background: rgba(0, 0, 0, 0.75);
	border-bottom: 2px solid var(--accent);
	padding: 18px 0 12px;
}
#logo .wrapper > a img { display: none; }
#logo .wrapper > a::before {
	content: "Sam's Minecraft Server - Forum";
	display: inline-block;
	font-size: 20px;
	color: #fff;
	text-shadow: 3px 3px 0 #000;
	line-height: 1.4;
	padding: 6px 0;
}
#logo .wrapper > a:hover::before { color: var(--accent); }
#header ul.menu li a, #logo ul.top_links a { color: #ccc; font-size: 9px; text-shadow: 2px 2px 0 #000; }
#header ul.menu li a:hover, #logo ul.top_links a:hover { color: var(--accent); }

#panel .upper {
	background: rgba(0, 0, 0, 0.85);
	color: var(--text);
	border-top: none;
	border-bottom: 2px solid var(--line);
	font-size: 9px;
}
#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active { color: var(--accent); }
#panel .upper a:hover { color: #fff; }
#panel .lower { background: rgba(0, 0, 0, 0.7); color: var(--muted); border-top: none; border-bottom: 2px solid var(--line); font-size: 9px; }
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:active { color: #ccc; }
#panel .lower a:hover { color: var(--accent); }
#panel input.textbox { border-color: var(--line); }

/* ---- breadcrumb ---- */
.navigation { color: var(--muted); font-size: 9px; padding: 6px 0 10px; }
.navigation a:link, .navigation a:visited { color: var(--accent); }
.navigation .active { color: var(--gold); font-size: 11px; }

/* ---- boxes and tables (the feature cards on sams.tj) ---- */
.tborder {
	background: var(--box);
	border: 2px solid var(--accent);
	border-radius: 0;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	padding: 0;
	-moz-border-radius: 0; -webkit-border-radius: 0;
}
.tborder tbody tr:last-child > td,
.tborder tbody tr:last-child > td:first-child,
.tborder tbody tr:last-child > td:last-child,
.thead, .tborder tbody:nth-last-child(2) .thead { border-radius: 0 !important; }
.thead {
	background: rgba(0, 0, 0, 0.6);
	color: var(--gold);
	border-bottom: 2px dashed var(--line);
	padding: 12px 10px;
}
.thead strong, .thead a:link, .thead a:visited, .thead a:active { color: var(--gold); font-size: 11px; }
.thead a:hover { color: #fff; }
.thead .smalltext { color: var(--muted); }
.tcat {
	background: rgba(var(--accent-rgb), 0.12);
	color: var(--accent);
	border-top: none;
	border-bottom: 1px solid var(--line);
	font-size: 8px;
	padding: 7px 10px;
}
.tcat a:link, .tcat a:visited, .tcat a:hover, .tcat a:active { color: var(--accent); }
.trow1, .trow2, .trow_shaded, .tfoot, .trow_sep {
	color: var(--text);
	border-top: 1px solid #222;
	border-right: 1px solid #222;
	border-left: 1px solid #222;
}
.trow1 { background: var(--row1); }
.trow2 { background: var(--row2); }
.trow_shaded { background: rgba(255, 85, 85, 0.15); }
tr.trow_selected td { background: rgba(var(--accent-rgb), 0.15); color: #fff; }
.trow_sep { background: rgba(0, 0, 0, 0.7); color: var(--gold); font-size: 9px; }
.tfoot { background: rgba(0, 0, 0, 0.6); color: var(--muted); border-top: 1px solid var(--line); }
.tfoot a:link, .tfoot a:visited, .tfoot a:active { color: var(--accent); }
.trow1 strong a:link, .trow2 strong a:link, .trow1 strong a:visited, .trow2 strong a:visited { color: #fff; }
.trow1 strong a:hover, .trow2 strong a:hover { color: var(--accent); }
/* forum names on the index (the h3 of the sams cards) */
.trow1 > strong > a, .trow2 > strong > a { font-size: 11px; color: var(--gold) !important; }
.trow1 > strong > a:hover, .trow2 > strong > a:hover { color: #fff !important; }
.subject_new a, a.subject_new { color: var(--gold); }
.subject_old a, a.subject_old { color: #ddd; }
.forum_status { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }
fieldset { border: 2px solid var(--line); background: rgba(0, 0, 0, 0.5); }
fieldset legend { color: var(--gold); }

/* ---- posts ---- */
.post { background: transparent; }
.post .post_author { background: rgba(0, 0, 0, 0.6); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); }
.post.classic .post_author { border: 1px solid var(--line); border-top: 2px solid var(--accent); }
.post .post_author .largetext a, .post .post_author strong a { color: var(--accent); font-size: 11px; }
.post .post_author div.author_statistics { color: var(--muted); border-left-color: var(--line); font-size: 8px; }
.post .post_head { border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 8px; }
.post .post_head a:link, .post .post_head a:visited { color: var(--gold); }
.post_body { color: var(--text); font-size: 10px; line-height: 2; padding: 10px 2px; }
.post_content { background: rgba(0, 0, 0, 0.45); }
.post_content .signature { border-top: 1px dashed var(--line); color: var(--muted); }
.post .post_meta { color: var(--muted); }
.post_controls { background: rgba(0, 0, 0, 0.6); border-bottom: 1px solid var(--line); }
.post.unapproved_post, .post.deleted_post { background: rgba(255, 85, 85, 0.12); }
.post.unapproved_post .post_author, .post.deleted_post .post_author { background: rgba(255, 85, 85, 0.2); }
blockquote { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
blockquote cite { color: var(--gold); border-bottom: 1px dashed var(--line); font-style: normal; }
.codeblock { background: #000; border: 1px solid var(--line); }
.codeblock .title { color: var(--accent); border-bottom: 1px dashed var(--line); }
.codeblock code { color: #ddd; font-size: 10px; }

/* ---- buttons (the grey Minecraft button from sams.tj) ---- */
input.button, button, a.button, .postbit_buttons > a, .pagination a, div.jqi .jqibuttons button, #search input.button, #panel input.button {
	background: #c6c6c6;
	color: #000;
	border-width: 3px;
	border-style: solid;
	border-color: #fff #555 #555 #fff;
	border-radius: 0;
	text-shadow: none;
	font-family: var(--pixel);
	font-size: 8px;
	font-weight: bold;
	box-shadow: none;
}
input.button:hover, button:hover, a.button:hover, .postbit_buttons > a:hover, .pagination a:hover, #search input.button:hover, #panel input.button:hover {
	background: #dcdcdc;
	color: #000;
	border-color: #fff #555 #555 #fff;
	outline: 2px solid var(--accent);
}
a.button:link, a.button:visited, a.button:active, .postbit_buttons > a:link, .postbit_buttons > a:visited { color: #000; }
.postbit_buttons > a span, a.button span { color: #000; }
.pagination .pages { color: var(--muted); }
.pagination .pagination_current { background: var(--accent); color: #000; border: 3px solid #000; border-radius: 0; text-shadow: none; font-weight: bold; }

/* ---- form fields ---- */
input.textbox, textarea, select {
	background: #000;
	color: #fff;
	border: 2px solid var(--line);
	border-radius: 0;
	font-family: var(--pixel);
	font-size: 9px;
	text-shadow: none;
}
input.textbox:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
textarea { line-height: 1.8; }
/* the editor's own writing area keeps a plain font: it is drawn inside an iframe and the pixel font
   is hard to edit in */
.sceditor-container { border: 2px solid var(--line) !important; border-radius: 0 !important; }

/* ---- notices, menus, popups ---- */
.pm_alert, .red_alert, div.error, .error_message, .success_message {
	background: rgba(0, 0, 0, 0.85);
	border: 2px solid var(--gold);
	color: #fff;
	border-radius: 0;
}
.red_alert, div.error, .error_message { border-color: #ff5555; }
.success_message { border-color: var(--accent); }
div.error p, div.error ul { color: #fff; }
.popup_menu { background: #111; border: 2px solid var(--accent); }
.popup_menu .popup_item { background: #111; color: #ccc; }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover { background: #222; color: var(--accent); }
.modal, div.jqi { background: #111; color: #fff; border: 3px solid var(--gold); border-radius: 0; box-shadow: none; }
div.jqi .jqititle { color: var(--gold); border-bottom: 1px dashed var(--line); }
.jGrowl-notification { background: #111; border: 2px solid var(--accent); color: #fff; }
.tt-suggestion.tt-is-under-cursor { background-color: #222; color: var(--accent); }
.online { color: var(--accent); }
.offline { color: #888; }

/* ---- footer ---- */
#footer .upper { background: rgba(0, 0, 0, 0.85); border-top: 2px solid var(--accent); border-bottom: none; color: var(--muted); font-size: 9px; }
#footer .upper a:link, #footer .upper a:visited, #footer .upper a:active { color: var(--accent); }
#footer .lower { background: transparent; color: #ccc; font-size: 8px; }
#footer .lower a:link, #footer .lower a:visited, #footer .lower a:active { color: #ccc; }
#footer .lower a:hover { color: var(--accent); }

/* ---- phones ---- */
@media (max-width: 700px) {
	#logo .wrapper > a::before { font-size: 13px; }
	body, #container { font-size: 9px; }
	.post_body { font-size: 9px; }
}