/* Classic board colors. The default does not follow the operating system.
   html[data-theme="dark"] switches to the dark preview below. The page does
   not set that attribute. --link and --visited are set only on pages that
   already chose a link color. --link-dark is the readable forum color. */

:root {
	--page: #ffffff;
	--text: #000000;
	--panel: #FFF5E3;
	--mini: #666666;
}

body {
	background-color: var(--page);
	color: var(--text);
}

a:link {
	color: var(--link);
}

a:visited {
	color: var(--visited);
}

td[bgcolor="#FFF5E3"],
td[bgcolor="#fff5e3"],
td[bgcolor="fff5e3"],
table[bgcolor="#FFF5E3"],
table[bgcolor="#fff5e3"],
table[bgcolor="fff5e3"] {
	background-color: var(--panel);
}

/* Dark preview. Active only while html has data-theme="dark".
   Classic values above stay in effect otherwise. */
html[data-theme="dark"] {
	color-scheme: dark;
	--page: #1b1d21;
	--text: #d8d9dd;
	--panel: #2e2b26;
	--visited: #d7a4d0;
	--mini: #b0b0b0;
	--link: var(--link-dark);
	--field: #2a2d33;
	--line: #5c616b;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] button {
	background-color: var(--field);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="image"],
html[data-theme="dark"] button[style*="background:transparent"],
html[data-theme="dark"] input[style*="background:transparent"] {
	background-color: transparent;
}

html[data-theme="dark"] tr[bgcolor="#ffffff"],
html[data-theme="dark"] tr[bgcolor="#FFFFFF"],
html[data-theme="dark"] td[bgcolor="#ffffff"],
html[data-theme="dark"] td[bgcolor="#FFFFFF"] {
	background-color: var(--page);
}

html[data-theme="dark"] font[color="#000000"],
html[data-theme="dark"] font[color="#000"] {
	color: var(--text);
}

html[data-theme="dark"] a[style*="color:#0000ff"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] a[style*="color: #000066"],
html[data-theme="dark"] a[style*="color:#000066"] {
	color: #a9bfff !important;
}

html[data-theme="dark"] a[style*="color: blue"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] button[style*="color:#0000ff"] {
	color: #8ab4ff !important;
}

html[data-theme="dark"] button[style*="color:#000000"] {
	color: var(--text) !important;
}

html[data-theme="dark"] .dropbtn {
	color: #a9bfff;
}

html[data-theme="dark"] .dropdown-content {
	background-color: var(--field);
}

html[data-theme="dark"] .dropdown-content a {
	color: var(--text);
}

html[data-theme="dark"] .dropdown-content a:hover {
	background-color: #3a3e46;
}

html[data-theme="dark"] span[style*="background:#fff"],
html[data-theme="dark"] #xoxo-search-panel {
	background: var(--field) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}

html[data-theme="dark"] #xoxo-search input,
html[data-theme="dark"] #xoxo-search select {
	color: var(--text);
}

html[data-theme="dark"] #xoxo-search input::placeholder {
	color: #9a9da3;
}

html[data-theme="dark"] .xoxo-invites {
	background: #243044;
	color: #c5d4f5;
}

html[data-theme="dark"] #xoxo-tip {
	background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .xoxo-tip-box {
	background: var(--page);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] .xoxo-tip-coin {
	background: var(--field);
	color: var(--text);
	border-color: var(--line);
}

html[data-theme="dark"] .rnv2 {
	color: var(--text);
	background-color: #4a4524;
}

html[data-theme="dark"] table[bgcolor="CCCC66"] {
	background-color: #3d3a22;
}

/* Night navigation uses the saved text bar. Classic keeps the GIFs. */
.xoxo-nav-night { display: none; }

html[data-theme="dark"] .xoxo-nav-classic { display: none; }

html[data-theme="dark"] .xoxo-nav-night { display: inline !important; }

html[data-theme="dark"] .xoxo-nav,
html[data-theme="dark"] .xoxo-nav:link,
html[data-theme="dark"] .xoxo-nav:visited,
html[data-theme="dark"] .xoxo-nav:hover,
html[data-theme="dark"] .xoxo-nav:active {
	color: #159100;
	text-decoration: none;
	font-weight: bold;
	font-family: "MS Sans Serif", sans-serif;
}

html[data-theme="dark"] .xoxo-mark {
	font-size: 0.65em;
	color: #a9bfff;
}

html[data-theme="dark"] .xoxo-bullet {
	font-size: 1.35em;
	vertical-align: -0.15em;
	color: #a9bfff;
}

/* The dark form rule paints every button. The more control stays clear. */
html[data-theme="dark"] .xoxo-tools-open,
html[data-theme="dark"] .xoxo-tools-open:hover,
html[data-theme="dark"] .xoxo-tools-open:active,
html[data-theme="dark"] .xoxo-tools-open:focus {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

html[data-theme="dark"] .xoxo-tools-open:focus-visible {
	outline: 1px dotted #b0b0b0;
	outline-offset: 2px;
}

html[data-theme="dark"] .xoxo-tools-open svg circle {
	fill: #b0b0b0;
}

/* ReplyArrow.gif is an 11x13 black corner on a transparent background. */
html[data-theme="dark"] img[src$="ReplyArrow.gif"] {
	filter: invert(72%);
}

/* Night copies of the word buttons and the logo. The markup keeps the classic file. */
html[data-theme="dark"] img[src$="Top.gif"] {
	content: url("/imgs/dark/Top.png");
	width: 41px;
	height: 19px;
}

html[data-theme="dark"] img[src$="Parent.gif"] {
	content: url("/imgs/dark/Parent.png");
	width: 53px;
	height: 19px;
}

html[data-theme="dark"] img[src$="Previous.gif"] {
	content: url("/imgs/dark/Previous.png");
	width: 64px;
	height: 19px;
}

html[data-theme="dark"] img[src$="Reply.gif"] {
	content: url("/imgs/dark/Reply.png");
	width: 50px;
	height: 19px;
}

html[data-theme="dark"] img[src$="Edit.gif"] {
	content: url("/imgs/dark/Edit.png");
	width: 41px;
	height: 19px;
}

html[data-theme="dark"] img[src$="ban.gif"] {
	content: url("/imgs/dark/ban.png");
	width: 41px;
	height: 19px;
}

html[data-theme="dark"] img[src$="hide.gif"] {
	content: url("/imgs/dark/hide.png");
	width: 44px;
	height: 19px;
}

html[data-theme="dark"] img[src$="autoadmitlogo.jpg"] {
	content: url("/imgs/dark/autoadmitlogo.png");
	width: 170px;
	height: 47px;
}