/*
 * Windows 3.1 theme for AJAX Chat
 *
 * Supports both the current AJAX Chat templates and the older template used
 * by rrtindustries.com. The controls use the Windows 3.1 palette and geometry,
 * not the later Windows 95 close-button/taskbar conventions.
 */
@import url('global.css');
@import url('fonts.css');
@import url('print.css');
@import url('custom.css');

@font-face {
	font-family:'Win31System';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('windows31_images/win95fa-latin-400-normal.woff2') format('woff2');
}

:root {
	--win31-desktop:#008080;
	--win31-face:#c0c0c0;
	--win31-light:#ffffff;
	--win31-shadow:#808080;
	--win31-dark:#000000;
	--win31-title:#000080;
	--win31-selection:#000080;
	--win31-window:#ffffff;
	--win31-link:#0000ff;
}

html,
body,
body.ajax-chat {
	background:var(--win31-desktop) !important;
	color:var(--win31-dark);
	font-family:'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	font-size:12px;
	font-smooth:never;
	-webkit-font-smoothing:none;
}

body.ajax-chat,
body {
	margin:0;
	padding:0;
}

::selection {
	background:var(--win31-selection);
	color:var(--win31-light);
}

#content,
#content *,
#loginContent,
#loginContent * {
	box-sizing:border-box;
}

/* Main application window */
#content {
	position:absolute;
	left:4px;
	right:4px;
	top:4px;
	bottom:4px;
	width:auto;
	height:auto;
	min-width:300px;
	min-height:220px;
	background:var(--win31-face);
	border:1px solid var(--win31-light);
	box-shadow:
		inset -1px -1px 0 var(--win31-dark),
		inset 1px 1px 0 #dfdfdf,
		2px 2px 0 var(--win31-dark);
	color:var(--win31-dark);
	overflow:hidden;
}

#content,
#loginContent {
	font-family:'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	font-size:12px;
}

/* Windows 3.1 captions: system menu at left, down/up controls at right. */
#content #headline,
#content #headlineContainer,
#loginContent #loginHeadline,
#loginContent #loginHeadlineContainer {
	position:absolute;
	left:3px;
	right:3px;
	top:3px;
	width:auto;
	height:19px;
	margin:0 !important;
	padding:0 41px;
	background:var(--win31-title);
	box-shadow:0 1px 0 var(--win31-dark);
	color:var(--win31-light);
	font:700 12px/19px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
	white-space:nowrap;
	overflow:visible;
}

#content #headline,
#content #headlineContainer h1,
#loginContent #loginHeadline,
#loginContent #loginHeadlineContainer h1 {
	color:var(--win31-light);
	font:700 12px/19px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
}

#content #headlineContainer h1,
#loginContent #loginHeadlineContainer h1 {
	display:block !important;
	margin:0 !important;
	padding:0;
}

#content #headline::before,
#content #headlineContainer::before,
#loginContent #loginHeadline::before,
#loginContent #loginHeadlineContainer::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:20px;
	height:19px;
	background:url('windows31_images/system-menu.svg') no-repeat 0 0;
	image-rendering:pixelated;
}

#content #headline::after,
#content #headlineContainer::after,
#loginContent #loginHeadline::after,
#loginContent #loginHeadlineContainer::after {
	content:'';
	position:absolute;
	right:0;
	top:0;
	width:39px;
	height:19px;
	background:url('windows31_images/caption-controls.svg') no-repeat 0 0;
	image-rendering:pixelated;
}

/* Theme-owned hit target for the left (minimize) half of the caption strip.
 * The visual remains the native-pixel ::after artwork until it is pressed. */
#content #headline::after,
#content #headlineContainer::after {
	pointer-events:none;
}

#content #headline > .windows31-caption-minimize,
#content #headlineContainer > .windows31-caption-minimize {
	position:absolute;
	right:19px;
	top:0;
	z-index:2;
	display:block;
	width:20px;
	min-width:0;
	height:19px;
	min-height:0;
	margin:0;
	padding:0;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	color:transparent !important;
	font-size:0;
	cursor:default;
	-webkit-appearance:none;
	appearance:none;
}

#content #headline > .windows31-caption-minimize:active,
#content #headlineContainer > .windows31-caption-minimize:active {
	background:var(--win31-face) url('windows31_images/caption-minimize-pressed.svg') no-repeat 0 0 !important;
	image-rendering:pixelated;
}

#content #headline > .windows31-caption-minimize:focus,
#content #headlineContainer > .windows31-caption-minimize:focus {
	outline:0 !important;
}

/* Windows 3.x minimized top-level windows become desktop icons rather than
 * taskbar buttons. The companion runtime only toggles this theme-owned state. */
html.windows31-chat-minimized,
body.windows31-chat-minimized {
	min-width:100%;
	min-height:100%;
	overflow:hidden;
	background:var(--win31-desktop) !important;
}

body.windows31-chat-minimized #content {
	display:none !important;
}

#windows31DesktopIcon {
	position:fixed;
	left:16px;
	bottom:7px;
	z-index:2147483646;
	display:block;
	box-sizing:border-box;
	width:75px;
	min-width:0;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	color:#000;
	font:400 12px/12px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
	text-shadow:none;
	cursor:default;
	touch-action:none;
	user-select:none;
	-webkit-appearance:none;
	appearance:none;
}

#windows31DesktopIcon[hidden] {
	display:none !important;
}

#windows31DesktopIcon:focus {
	outline:0;
}

#windows31DesktopIcon .windows31-desktop-icon-image {
	display:block;
	width:32px;
	height:32px;
	margin:0 auto 5px;
	background:transparent url('windows31_images/desktop-chat-icon.png') no-repeat center / 32px 32px;
	image-rendering:pixelated;
}

#windows31DesktopIcon .windows31-desktop-icon-label {
	display:-webkit-box;
	box-sizing:border-box;
	width:75px;
	max-height:36px;
	padding:0;
	overflow:hidden;
	color:#000;
	font:400 12px/12px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
	white-space:normal;
	word-break:normal;
	overflow-wrap:normal;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

#windows31DesktopIcon[data-selected='true'] .windows31-desktop-icon-label,
#windows31DesktopIcon:focus-visible .windows31-desktop-icon-label {
	background:var(--win31-selection);
	color:var(--win31-light);
	outline:1px dotted var(--win31-light);
	outline-offset:-1px;
}

.windows31-desktop-icon-drag-outline {
	position:fixed;
	z-index:2147483647;
	box-sizing:border-box;
	pointer-events:none;
}

.windows31-desktop-icon-drag-outline::before {
	content:'';
	position:absolute;
	left:21px;
	top:0;
	box-sizing:border-box;
	width:34px;
	height:34px;
	border:1px dotted #000;
}

.windows31-desktop-icon-drag-outline::after {
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:37px;
	bottom:0;
	border:1px dotted #000;
}

/* The RRTI template adds a Radio link beside its heading. Keep it usable as a
 * small command link below the caption instead of losing it in the title. */
#content #headlineContainer > a {
	position:absolute;
	right:29px;
	top:23px;
	z-index:5;
	margin:0 !important;
	padding:2px 5px;
	background:var(--win31-face);
	color:var(--win31-title);
	font:400 12px/18px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif !important;
	text-decoration:underline;
}

/* RRTI also has an unlabelled, absolutely positioned Back to RRTI block. */
#content > div:not([id]):has(> h1 > a[href='/']) {
	top:27px !important;
	right:76px !important;
	z-index:5;
}

#content > div:not([id]) > h1:has(> a[href='/']) {
	margin:0;
	font:400 12px/20px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
}

#content > div:not([id]) > h1 > a[href='/'] {
	color:var(--win31-title);
	font:400 12px/20px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
}

/* Top command row */
#content #logoutChannelContainer {
	position:absolute;
	left:7px;
	right:32px;
	top:27px;
	z-index:4;
	display:flex;
	align-items:center;
	gap:4px;
	height:26px;
	white-space:nowrap;
}

#content #logoutChannelInner {
	display:inline-flex;
	align-items:center;
	gap:4px;
	min-width:0;
}

#content #logoutButton {
	float:none;
	margin:0;
}

#content #logoutChannelContainer label {
	margin-left:2px;
}

#content #statusIconContainer {
	position:absolute;
	right:7px;
	top:29px;
	z-index:5;
	width:20px;
	height:20px;
	background:var(--win31-face) !important;
	background-image:none !important;
	border:1px solid var(--win31-dark);
	box-shadow:
		inset 1px 1px 0 var(--win31-shadow),
		inset -1px -1px 0 var(--win31-light);
}

#content #statusIconContainer::before {
	content:'';
	position:absolute;
	left:5px;
	top:5px;
	width:8px;
	height:8px;
	background:#008000;
	border:1px solid var(--win31-dark);
}

#content #statusIconContainer.waiting::before,
#content #statusIconContainer.statusContainerOn::before {
	background:#ffff00;
}

#content #statusIconContainer.retrying::before,
#content #statusIconContainer.statusContainerAlert::before {
	background:#ff0000;
}

/* Current template layout */
#content #mainPanelContainer {
	position:absolute;
	left:7px;
	right:7px;
	top:57px;
	bottom:95px;
}

/* Legacy template layout (chat and side panels are direct #content children). */
#content > #chatList {
	position:absolute;
	left:7px;
	right:217px;
	top:57px;
	bottom:95px;
	height:auto;
}

#content > #onlineListContainer,
#content > #helpContainer,
#content > #settingsContainer {
	position:absolute;
	right:7px;
	top:57px;
	bottom:95px;
	height:auto;
}

#content > #onlineListContainer {
	width:200px;
}

#content > #helpContainer,
#content > #settingsContainer {
	width:360px;
}

#content #inputFieldContainer {
	position:absolute;
	left:7px;
	right:7px;
	bottom:42px;
	padding:0;
}

#content #inputFieldContainer #inputField {
	display:block;
	width:100%;
	height:41px;
	padding:3px 5px;
	resize:none;
}

#content #submitButtonContainer {
	position:absolute;
	right:139px;
	bottom:7px;
	height:26px;
	white-space:nowrap;
}

#content #messageLengthCounter {
	display:inline-block;
	height:24px;
	min-width:44px;
	margin:0 5px 0 0;
	padding:5px 4px 3px;
	background:var(--win31-face);
	box-shadow:
		inset 1px 1px 0 var(--win31-shadow),
		inset -1px -1px 0 var(--win31-light);
	color:var(--win31-dark);
	font:400 12px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
	vertical-align:top;
}

#content #bbCodeContainer {
	position:absolute;
	left:7px;
	bottom:7px;
	padding:0;
	height:26px;
}

#content #optionsContainer {
	position:absolute;
	right:7px;
	bottom:7px;
	display:flex;
	align-items:flex-start;
	padding:0;
	height:26px;
	white-space:nowrap;
}

#content #colorCodesContainer,
#content #emoticonsContainer {
	left:7px;
	bottom:38px;
	padding:3px;
	z-index:8;
}

#content #copyright {
	position:absolute;
	right:390px;
	top:auto;
	bottom:10px;
	font-size:11px;
	font-family:'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	line-height:20px;
}

/* Reusable Windows 3.1 raised and sunken edges */
#content #bbCodeContainer input,
#content #logoutButton,
#content #submitButton,
#content #manOfTheHourButton,
#content #settingsContainer #settingsList input.button,
#loginContent #loginButton,
#loginForm #loginButton,
#tm-jump-latest {
	min-height:24px;
	margin:0 2px 0 0;
	padding:3px 9px;
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-face) !important;
	background-image:none !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow) !important;
	color:var(--win31-dark) !important;
	font:400 12px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif !important;
	text-shadow:none !important;
	cursor:default;
	-webkit-appearance:none;
	appearance:none;
}

#content #bbCodeContainer input {
	vertical-align:top;
}

/* Keep #submitButton explicit: the RRTI Man-of-the-Hour userscript mirrors
 * submit-button rules onto its adjacent injected button. */
#content #submitButton,
#content #manOfTheHourButton {
	height:24px !important;
	min-width:78px;
	vertical-align:top !important;
}

#content #bbCodeContainer #bbCodeBold,
#content #bbCodeContainer input[style*='font-weight'] {
	font-weight:700 !important;
}

#content #bbCodeContainer #bbCodeItalic,
#content #bbCodeContainer input[style*='font-style'] {
	font-style:italic !important;
}

#content #bbCodeContainer input:hover,
#content #logoutButton:hover,
#content #submitButton:hover,
#content #manOfTheHourButton:hover,
#loginContent #loginButton:hover,
#loginForm #loginButton:hover,
#tm-jump-latest:hover {
	background:var(--win31-face) !important;
	color:var(--win31-dark) !important;
}

#content #bbCodeContainer input:active,
#content #logoutButton:active,
#content #submitButton:active,
#content #manOfTheHourButton:active,
#content #settingsContainer #settingsList input.button:active,
#loginContent #loginButton:active,
#loginForm #loginButton:active,
#tm-jump-latest:active {
	padding:4px 8px 2px 10px;
	box-shadow:
		inset 1px 1px 0 var(--win31-shadow),
		inset -1px -1px 0 var(--win31-light) !important;
}

#content button:focus,
#content input:focus,
#content select:focus,
#loginContent input:focus,
#loginContent select:focus,
#tm-jump-latest:focus {
	outline:1px dotted var(--win31-dark);
	outline-offset:-4px;
}

#content button:disabled,
#content input:disabled,
#content select:disabled,
#loginContent input:disabled,
#loginContent select:disabled {
	color:var(--win31-shadow) !important;
	text-shadow:1px 1px var(--win31-light) !important;
}

/* Text fields and classic drop-down list boxes */
#content textarea,
#content input[type='text'],
#content input[type='password'],
#loginContent input[type='text'],
#loginContent input[type='password'] {
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-window) !important;
	box-shadow:inset 1px 1px 0 var(--win31-shadow);
	color:var(--win31-dark) !important;
	font:400 12px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	caret-color:var(--win31-dark);
}

#content select,
#loginContent select,
#loginForm select {
	height:19px;
	padding:1px 18px 1px 3px;
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background-color:var(--win31-window) !important;
	background-image:url('windows31_images/combo-button.svg') !important;
	background-origin:border-box !important;
	background-position:right top !important;
	background-repeat:no-repeat !important;
	background-size:17px 19px !important;
	box-shadow:none;
	color:var(--win31-dark) !important;
	font:400 12px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	-webkit-appearance:none;
	appearance:none;
}

#content #logoutChannelContainer select {
	width:112px;
	height:19px;
}

/* Windows 3.x check boxes used an X, not the later tick mark. */
#content input[type='checkbox'],
#loginContent input[type='checkbox'] {
	width:13px;
	height:13px;
	margin:2px 3px;
	border:1px solid var(--win31-dark);
	border-radius:0;
	background:var(--win31-window);
	box-shadow:inset 1px 1px 0 var(--win31-shadow);
	vertical-align:middle;
	-webkit-appearance:none;
	appearance:none;
}

#content input[type='checkbox']:checked,
#loginContent input[type='checkbox']:checked {
	background-color:var(--win31-window);
	background-image:
		linear-gradient(45deg, transparent 40%, var(--win31-dark) 40%, var(--win31-dark) 58%, transparent 58%),
		linear-gradient(-45deg, transparent 40%, var(--win31-dark) 40%, var(--win31-dark) 58%, transparent 58%);
	background-position:center;
	background-repeat:no-repeat;
	background-size:9px 9px;
}

#content input[type='radio'],
#loginContent input[type='radio'] {
	width:13px;
	height:13px;
	margin:2px 3px;
	border:1px solid var(--win31-dark);
	border-radius:50%;
	background:var(--win31-window);
	box-shadow:inset 1px 1px 0 var(--win31-shadow);
	vertical-align:middle;
	-webkit-appearance:none;
	appearance:none;
}

#content input[type='radio']:checked,
#loginContent input[type='radio']:checked {
	background:radial-gradient(circle, var(--win31-dark) 0 3px, var(--win31-window) 4px);
}

/* Chat transcript and child windows */
#content #chatList {
	border:0 !important;
	border-radius:0 !important;
	background:var(--win31-window) !important;
	box-shadow:none !important;
	color:var(--win31-dark);
	overflow:auto;
}

/* AJAX Chat's base theme enlarges code to 1.2em. Keep the Win3.x-era
 * fixed-pitch face at the transcript's compact text size instead. */
#content #chatList code {
	font:400 1em/1 'Courier New', 'Liberation Mono', Courier, monospace;
	white-space:pre-wrap;
}

#content #onlineListContainer,
#content #helpContainer,
#content #settingsContainer {
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-face) !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow);
	color:var(--win31-dark);
	overflow:hidden;
}

#content #onlineListContainer h3,
#content #helpContainer h3,
#content #settingsContainer h3 {
	position:relative;
	height:19px;
	min-height:19px;
	margin:2px 2px 0;
	padding:0 41px 0 20px;
	background:var(--win31-title) !important;
	box-shadow:0 1px 0 var(--win31-dark);
	color:var(--win31-light) !important;
	font:700 12px/19px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
	text-align:center;
	white-space:nowrap;
}

#content #onlineListContainer h3::before,
#content #helpContainer h3::before,
#content #settingsContainer h3::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:20px;
	height:19px;
	background:url('windows31_images/system-menu-small.svg') no-repeat 0 0;
	image-rendering:pixelated;
}

#content #onlineListContainer h3::after,
#content #helpContainer h3::after,
#content #settingsContainer h3::after {
	content:'';
	position:absolute;
	right:0;
	top:0;
	width:39px;
	height:19px;
	background:url('windows31_images/caption-controls.svg') no-repeat 0 0;
	image-rendering:pixelated;
}

#content #onlineListContainer #onlineList,
#content #helpContainer #helpList,
#content #settingsContainer #settingsList {
	position:absolute;
	left:3px;
	right:3px;
	top:24px;
	bottom:3px;
	border:1px solid var(--win31-dark);
	background:var(--win31-window);
	color:var(--win31-dark);
	overflow:auto;
}

#content #helpContainer #helpList table,
#content #settingsContainer #settingsList table {
	width:100%;
	border-collapse:collapse;
}

#content #helpContainer #helpList dl,
#content #settingsContainer #settingsList dl,
#content #helpContainer #helpList td,
#content #settingsContainer #settingsList td {
	padding:3px 5px;
}

#content .rowEven,
#content .rowOdd,
#content #helpList dl:nth-child(even),
#content #helpList dl:nth-child(odd),
#content #settingsList dl:nth-child(even),
#content #settingsList dl:nth-child(odd) {
	background:var(--win31-window);
}

#content #chatList .rowEven.private,
#content #chatList .rowOdd.private {
	background:#ffffc0;
}

#content #chatList > div:hover {
	background:#e0e0e0;
}

#content #chatList > div:focus-within {
	background:var(--win31-selection);
	color:var(--win31-light);
}

#content #chatList > div:focus-within a {
	color:var(--win31-light) !important;
}

#content #chatList div,
#content #onlineListContainer #onlineList div {
	padding:2px 5px;
}

#content #chatList span.dateTime {
	color:#606060;
	font-size:11px;
}

#content #chatList span.guest,
#content #chatList span.user,
#content #chatList span.customUser,
#content #chatList span.moderator,
#content #chatList span.admin,
#content #chatList span.chatBot {
	font-weight:700;
}

#content .guest { color:var(--win31-shadow); }
#content .user { color:var(--win31-dark); }
#content .customUser { color:#800080; }
#content .moderator { color:#008000; }
#content .admin,
#content #chatList .chatBotErrorMessage { color:#ff0000; }
#content .chatBot { color:#808000; }

#content a,
#loginContent a {
	color:var(--win31-link);
	text-decoration:underline;
}

#content a:hover,
#loginContent a:hover {
	color:var(--win31-title);
	text-decoration:underline;
}

#content #chatList .delete {
	display:block;
	float:right;
	width:10px;
	height:10px;
	margin:2px 0 0;
	padding:0;
	border:0 !important;
	background:var(--win31-face) url('windows31_images/message-delete.svg') no-repeat center / 10px 10px !important;
	filter:none;
	image-rendering:pixelated;
	text-decoration:none !important;
}

#content #chatList .delete:focus {
	outline:1px dotted var(--win31-dark);
	outline-offset:-1px;
}

#content #chatList .deleteSelected {
	border:0 !important;
	outline:1px dotted var(--win31-dark);
	outline-offset:-1px;
}

/* Popup/user menus */
#content .popup,
.ajax-chat .popup,
#content ul.userMenu {
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-window) !important;
	box-shadow:2px 2px 0 var(--win31-dark) !important;
	color:var(--win31-dark) !important;
}

#content ul.userMenu {
	padding:2px;
	list-style:none;
}

#content ul.userMenu li a {
	padding:2px 14px 2px 18px;
}

#content ul.userMenu li a:hover {
	background:var(--win31-selection);
	color:var(--win31-light);
	text-decoration:none;
}

/* Online-user actions as a classic expandable outline tree. */
#content #onlineList > div {
	position:relative;
	padding:0 !important;
	background:var(--win31-window) !important;
}

#content #onlineList > div > a {
	position:relative;
	display:block;
	min-height:14px;
	padding:0 2px 0 14px;
	line-height:14px;
	text-decoration:none;
}

/* Later classic tree-view expander, redrawn on an exact 9px pixel grid. */
#content #onlineList > div > a::before {
	content:'';
	position:absolute;
	left:2px;
	top:3px;
	width:9px;
	height:9px;
	background:url('windows31_images/tree-expand-plus.svg') no-repeat 0 0;
	image-rendering:pixelated;
}

#content #onlineList > div > a::after {
	content:'';
	position:absolute;
	left:10px;
	top:7px;
	width:4px;
	height:1px;
	background:repeating-linear-gradient(
		to right,
		var(--win31-shadow) 0 1px,
		transparent 1px 2px
	);
}

#content #onlineList > div:has(
	> ul.userMenu:not([style*='display:none']):not([style*='display: none'])
) > a::before {
	background-image:url('windows31_images/tree-expand-minus.svg');
}

#content #onlineList > div > ul.userMenu {
	position:relative;
	margin:0 !important;
	padding:0 0 0 18px !important;
	border:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	list-style:none;
}

/* Gray alternating pixels reproduce the later Windows dotted tree branches. */
#content #onlineList > div > ul.userMenu::before {
	content:'';
	position:absolute;
	left:6px;
	top:-3px;
	bottom:7px;
	width:1px;
	background:repeating-linear-gradient(
		to bottom,
		var(--win31-shadow) 0 1px,
		transparent 1px 2px
	);
}

#content #onlineList > div > ul.userMenu > li {
	position:relative;
	min-height:14px;
	margin:0;
	padding:0;
	list-style:none;
}

#content #onlineList > div > ul.userMenu > li::before {
	content:'';
	position:absolute;
	left:-12px;
	top:7px;
	width:12px;
	height:1px;
	background:repeating-linear-gradient(
		to right,
		var(--win31-shadow) 0 1px,
		transparent 1px 2px
	);
}

#content #onlineList > div > ul.userMenu > li > a {
	display:block;
	min-height:14px;
	padding:0 2px !important;
	color:var(--win31-dark) !important;
	line-height:14px;
	text-decoration:none;
}

#content #onlineList > div > a:hover,
#content #onlineList > div > a:focus,
#content #onlineList > div > ul.userMenu > li > a:hover,
#content #onlineList > div > ul.userMenu > li > a:focus {
	background:var(--win31-selection);
	color:var(--win31-light) !important;
	outline:1px dotted var(--win31-light);
	outline-offset:-2px;
	text-decoration:none;
}

#content #colorCodesContainer,
#content #emoticonsContainer {
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-face) !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow),
		2px 2px 0 var(--win31-dark);
}

#content #colorCodesContainer a {
	border:1px solid var(--win31-dark);
}

/* Pixel toolbar buttons */
#content #optionsContainer input.button,
#content #settingsContainer #settingsList input.button,
#content #logoutChannelContainer #showChannelsButton {
	width:24px !important;
	height:24px !important;
	margin:0 0 0 1px;
	padding:3px !important;
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background-color:var(--win31-face) !important;
	background-position:center !important;
	background-repeat:no-repeat !important;
	background-size:16px 16px !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow);
	image-rendering:pixelated;
	-webkit-appearance:none;
	appearance:none;
}

#content #optionsContainer input.button:active,
#content #settingsContainer #settingsList input.button:active,
#content #logoutChannelContainer #showChannelsButton:active {
	background-position:calc(50% + 1px) calc(50% + 1px) !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-shadow),
		inset -1px -1px 0 var(--win31-light);
}

#content #optionsContainer #helpButton {
	background-image:url('windows31_images/toolbar-help.svg') !important;
}

#content #optionsContainer #settingsButton {
	background-image:url('windows31_images/toolbar-settings.svg') !important;
}

#content #optionsContainer #onlineListButton {
	background-image:url('windows31_images/toolbar-users.svg') !important;
}

#content #optionsContainer #audioButton {
	background-image:url('windows31_images/toolbar-audio.svg') !important;
}

#content #optionsContainer #audioButton.off {
	background-image:url('windows31_images/toolbar-audio-off.svg') !important;
}

#content #optionsContainer #autoScrollButton {
	background-image:url('windows31_images/toolbar-scroll.svg') !important;
}

#content #optionsContainer #autoScrollButton.off {
	background-image:url('windows31_images/toolbar-scroll-off.svg') !important;
}

#content #settingsContainer #settingsList input.playback {
	background-image:url('windows31_images/toolbar-play.svg') !important;
}

#content #logoutChannelContainer #showChannelsButton {
	background-image:url('windows31_images/toolbar-channels.svg') !important;
}

/* Tampermonkey additions used on RRTI */
body #tm-jump-latest {
	z-index:2147483647;
	padding:4px 10px !important;
	border-radius:0 !important;
	background:var(--win31-face) !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow),
		2px 2px 0 var(--win31-dark) !important;
	transform:none !important;
}

body #tm-unread-badge {
	min-width:16px !important;
	height:16px !important;
	padding:0 4px !important;
	border-radius:0 !important;
	background:var(--win31-title) !important;
	color:var(--win31-light) !important;
	font:400 11px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif !important;
}

/* Inline previews become square, sunken Windows child panes. Media itself is
 * intentionally left smooth; pixel rendering is limited to UI artwork. */
body #content #chatList .inlineLinkPreviewItem {
	border:2px solid !important;
	border-color:var(--win31-shadow) var(--win31-light) var(--win31-light) var(--win31-shadow) !important;
	border-radius:0 !important;
	background:var(--win31-window) !important;
	box-shadow:inset 1px 1px 0 var(--win31-dark) !important;
	color:var(--win31-dark) !important;
}

body #content #chatList .inlineLinkPreviewBody {
	display:block;
	padding:6px 8px !important;
}

body #content #chatList .inlineLinkPreviewHost,
body #content #chatList .inlineLinkPreviewTitle,
body #content #chatList .inlineLinkPreviewDescription,
body #content #chatList .inlineLinkPreviewMeta {
	display:block;
}

body #content #chatList .inlineLinkPreviewHost,
body #content #chatList .inlineLinkPreviewMeta {
	color:#606060 !important;
	opacity:1 !important;
}

body #content #chatList .inlineLinkPreviewThumbBadge,
body #content #chatList .inlineLinkPreviewThumbExpandLabel {
	border:1px solid var(--win31-light) !important;
	border-radius:0 !important;
	background:var(--win31-title) !important;
	box-shadow:1px 1px 0 var(--win31-dark) !important;
	color:var(--win31-light) !important;
}

body #content #chatList .inlineLinkPreviewThumbExpand {
	background:transparent !important;
}

/*
 * Native Windows 3.1 scrollbars. The doubled-ID specificity and !important
 * declarations intentionally beat rrti-chat-dark-scrollbar-style, which is
 * injected after the selected AJAX Chat stylesheet by Tampermonkey.
 */
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
) {
	scrollbar-width:auto !important;
	scrollbar-color:auto !important;
}

@supports (-moz-appearance:none) {
	body #content :is(
		#chatList,
		#onlineListContainer,
		#onlineList,
		#onlineListContainer *,
		#helpList,
		#settingsList,
		#inputField
	) {
		scrollbar-color:var(--win31-face) var(--win31-face) !important;
	}
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar {
	width:17px !important;
	height:17px !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track-piece {
	border:0 !important;
	border-radius:0 !important;
	background-color:var(--win31-face) !important;
	background-image:none !important;
	box-shadow:none !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track:vertical,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track-piece:vertical {
	background-image:linear-gradient(to right,
		var(--win31-dark) 0 1px,
		var(--win31-face) 1px calc(100% - 1px),
		var(--win31-dark) calc(100% - 1px)) !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track:horizontal,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-track-piece:horizontal {
	background-image:linear-gradient(to bottom,
		var(--win31-dark) 0 1px,
		var(--win31-face) 1px calc(100% - 1px),
		var(--win31-dark) calc(100% - 1px)) !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-thumb {
	min-width:17px !important;
	min-height:17px !important;
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background-color:var(--win31-face) !important;
	background-image:none !important;
	box-shadow:
		inset 1px 1px 0 var(--win31-light),
		inset -1px -1px 0 var(--win31-shadow),
		inset -2px -2px 0 var(--win31-shadow) !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-thumb:hover {
	background-color:var(--win31-face) !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button {
	display:block !important;
	width:17px !important;
	height:17px !important;
	border:0 !important;
	border-radius:0 !important;
	background-color:transparent !important;
	background-position:center !important;
	background-repeat:no-repeat !important;
	background-size:17px 17px !important;
	box-shadow:none !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:vertical:decrement {
	background-image:url('windows31_images/arrow-up.svg') !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:vertical:increment {
	background-image:url('windows31_images/arrow-down.svg') !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:horizontal:decrement {
	background-image:url('windows31_images/arrow-left.svg') !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:horizontal:increment {
	background-image:url('windows31_images/arrow-right.svg') !important;
}

/* Chromium exposes double-ended button slots when the generic button is made
 * visible. Windows 3.1 used one directional button at each end. */
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:vertical:increment:start,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:vertical:decrement:end,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:horizontal:increment:start,
body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-button:horizontal:decrement:end {
	display:none !important;
}

body #content :is(
	#chatList,
	#onlineListContainer,
	#onlineList,
	#onlineListContainer *,
	#helpList,
	#settingsList,
	#inputField
)::-webkit-scrollbar-corner {
	border:1px solid var(--win31-dark) !important;
	border-radius:0 !important;
	background:var(--win31-face) !important;
	box-shadow:inset 1px 1px 0 var(--win31-light) !important;
}

/* Login dialog */
#loginContent {
	position:absolute !important;
	left:50%;
	top:50%;
	width:340px !important;
	height:auto !important;
	min-height:330px;
	margin:0 !important;
	padding:29px 10px 10px !important;
	transform:translate(-50%, -50%);
	background:var(--win31-face);
	border:1px solid var(--win31-light);
	box-shadow:
		inset -1px -1px 0 var(--win31-dark),
		inset 1px 1px 0 #dfdfdf,
		2px 2px 0 var(--win31-dark);
	color:var(--win31-dark);
	font:400 12px/16px 'Win31System', 'MS Sans Serif', Tahoma, sans-serif;
}

#loginContent #loginHeadline,
#loginContent #loginHeadlineContainer {
	left:3px;
	right:3px;
	top:3px;
	padding-top:0 !important;
}

#loginContent #loginHeadlineContainer {
	margin:0 !important;
}

#loginContent #loginForm,
#loginContent #loginFormContainer,
#loginContent #errorContainer {
	margin:0 !important;
}

#loginContent #loginForm,
#loginContent #loginFormContainer {
	padding:3px 8px 0;
}

#loginContent #loginForm div,
#loginContent #loginFormContainer div {
	margin:6px 0;
}

#loginContent input[type='text'],
#loginContent input[type='password'],
#loginContent select {
	width:100%;
	height:24px;
}

#loginContent #loginButton {
	float:right;
	min-width:78px;
}

#loginContent #errorContainer:not(:empty) {
	margin:4px 8px !important;
	padding:4px;
	border:1px solid var(--win31-dark);
	background:var(--win31-window);
	color:#ff0000;
}

#loginContent #loginRegisteredUsers {
	clear:both;
	padding-top:7px;
}

#loginContent #copyright {
	clear:both;
	margin:28px 8px 0 !important;
	text-align:right;
}

@media (max-width:900px) {
	#content #copyright {
		display:none;
	}
}

@media (max-width:700px) {
	#content {
		left:0;
		right:0;
		top:0;
		bottom:0;
		box-shadow:inset -1px -1px 0 var(--win31-dark);
	}

	#content #headline,
	#content #headlineContainer {
		left:2px;
		right:2px;
		top:2px;
	}

	#content #headlineContainer > a,
	#content > div:not([id]):has(> h1 > a[href='/']) {
		display:none;
	}

	#content #logoutChannelContainer {
		left:4px;
		right:28px;
		top:25px;
		height:25px;
		overflow:hidden;
	}

	#content #logoutChannelContainer label {
		display:none;
	}

	#content #statusIconContainer {
		right:4px;
		top:27px;
	}

	#content #mainPanelContainer {
		left:4px;
		right:4px;
		top:53px;
		bottom:86px;
	}

	#content > #chatList {
		left:4px;
		right:173px;
		top:53px;
		bottom:86px;
	}

	#content > #onlineListContainer,
	#content > #helpContainer,
	#content > #settingsContainer {
		right:4px;
		top:53px;
		bottom:86px;
	}

	#content > #onlineListContainer {
		width:164px;
	}

	#content > #helpContainer,
	#content > #settingsContainer {
		width:320px;
	}

	#content #inputFieldContainer {
		left:4px;
		right:4px;
		bottom:36px;
	}

	#content #inputFieldContainer #inputField {
		height:42px;
	}

	#content #bbCodeContainer {
		left:4px;
		bottom:5px;
	}

	#content #bbCodeContainer input {
		min-height:23px;
		padding:2px 6px;
	}

	#content #bbCodeContainer input:active {
		padding:3px 5px 1px 7px;
	}

	#content #optionsContainer {
		right:4px;
		bottom:5px;
	}

	#content #submitButtonContainer,
	#content #emoticonsContainer {
		display:none;
	}
}

@media (max-width:480px) {
	#content #headline,
	#content #headlineContainer h1 {
		font-size:11px;
	}

	#content #logoutChannelContainer select {
		width:84px;
	}

	#content > #chatList {
		right:4px;
	}

	#content > #onlineListContainer,
	#content > #helpContainer,
	#content > #settingsContainer {
		left:4px;
		right:4px;
		width:auto;
		z-index:6;
	}

	#content #mainPanelContainer #onlineListContainer,
	#content #mainPanelContainer #helpContainer,
	#content #mainPanelContainer #settingsContainer {
		left:0;
		right:0;
		top:0;
		bottom:0;
		width:auto;
		z-index:6;
	}

	#content #bbCodeContainer #bbCodeIMG,
	#content #bbCodeContainer #bbCodeURL,
	#content #bbCodeContainer #bbCodeQuote,
	#content #bbCodeContainer #bbCodeCode {
		display:none;
	}

	#loginContent {
		left:4px;
		right:4px;
		top:4px;
		width:auto !important;
		max-width:none;
		transform:none;
	}
}

@media (max-height:300px) {
	#content #logoutChannelContainer,
	#content #statusIconContainer,
	#content #bbCodeContainer,
	#content #optionsContainer,
	#content #emoticonsContainer,
	#content #submitButtonContainer {
		display:none;
	}

	#content #mainPanelContainer,
	#content > #chatList,
	#content > #onlineListContainer,
	#content > #helpContainer,
	#content > #settingsContainer {
		top:27px;
		bottom:38px;
	}

	#content #inputFieldContainer {
		bottom:3px;
	}

	#content #inputFieldContainer #inputField {
		height:30px;
	}
}

@media print {
	html,
	body,
	body.ajax-chat {
		background:#fff !important;
	}

	#content {
		position:static;
		border:0;
		box-shadow:none;
	}

	#content #headline,
	#content #headlineContainer,
	#content #logoutChannelContainer,
	#content #statusIconContainer,
	#content #inputFieldContainer,
	#content #submitButtonContainer,
	#content #bbCodeContainer,
	#content #optionsContainer,
	#content #copyright {
		display:none !important;
	}
}