body {
	max-width: 66em;
	margin: 0 auto;
	font-family: 'NotoSans', sans-serif;
	font-size: 13pt;
}

#main-content {
	padding: 0 .7em 10em;
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
}

div.heading {
	margin: 3em 0 1.5em;
	overflow: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
}

#main-table, #main-periodic-table {
	display: none;
}

td, th {
	border: 1px solid black;
	vertical-align: middle;
	padding: .2em .7em;
	position: relative;
}

/* Used by the page/Steam/source/tutorial link icons; not the icons in icon bars */
img.icon {
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

kbd {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-decoration: underline;
}

textarea {
	width: 100%;
	height: 50em;
}

/* Language Dropdown */
.lang {
	position: absolute;
	top: 16px;
	right: 16px;
}

	.lang > .lang-label {
		font-size: 10pt;
		transform: none;
	}

	.lang > .lang-selector {
		margin-left: 5px;
		max-width: 100%;
	}

/* Top controls */
#top-controls {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #fff;
	padding: 16px 0 0;
	min-height: .6cm;
}

	#top-controls #search-switcher {
		display: inline-block;
		width: .4cm;
		height: .4cm;
		margin-right: .1cm;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 1 9 5 1 9z" /></svg>');
		background-repeat: no-repeat;
	}

	#top-controls .search-container {
		display: none;
	}

		#top-controls .search-container.visible {
			display: inline;
		}

		#top-controls .search-container #search-field {
			width: 15em;
		}

		#top-controls .search-container .search-field-clear {
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4,6 6,4 10,8 14,4 16,6 12,10 16,14 14,16 10,12 6,16 4,14 8,10z"/></svg>');
			width: 1em;
			height: 1em;
			display: inline-block;
			vertical-align: middle;
			border: 1px solid #000;
			border-radius: 100%;
		}

		#top-controls .search-container .search-options {
			display: inline-block;
			vertical-align: middle;
		}

			#top-controls .search-container .search-options .search-option {
				padding-left: .5em;
			}

		#top-controls .search-container #search-field-mission {
			max-width: 43%;
		}

			#top-controls .search-container #search-field-mission option.solved {
				background-color: #dfd;
			}

			#top-controls .search-container #search-field-mission option.unsolved {
				background-color: #fdd;
			}

			#top-controls .search-container #search-field-mission option.tp {
				background-color: #ddf;
			}

		#top-controls .search-container #search-field-mission-link {
			display: none;
		}

			#top-controls .search-container #search-field-mission-link[href] {
				display: inline;
			}

	#top-controls #tabs {
		position: sticky;
		top: 15px;
		float: right;
		z-index: 21;
	}

		#top-controls #tabs > .tab {
			display: inline-block;
			background-color: #eef;
			border: 1px solid #eef;
			border-bottom: none;
			border-top-color: #ccf;
			border-right-color: #ccf;
			border-right-width: 2px;
			border-top-left-radius: .5em;
			border-top-right-radius: .5em;
			text-decoration: none;
			color: #024;
			padding: 0 .5em .115em 28px;
			margin-left: .2em;
			vertical-align: bottom;
			background-size: 20px 20px;
			background-position: 4px center;
			background-repeat: no-repeat;
		}

			#top-controls #tabs > .tab#rule-seed-link {
				background-image: url(HTML/img/spanner.png);
			}

			#top-controls #tabs > .tab#filters-link {
				background-image: url(HTML/img/filter-icon.png);
			}

			#top-controls #tabs > .tab#options-link {
				background-image: url(HTML/img/sliders.png);
			}


div.modlink-wrap {
	line-height: 1;
}

body:not(.display-description) div.modlink-wrap {
	margin-top: .3em;
}

div.modlink-wrap a.modlink {
	font-size: 115%;
}

	div.modlink-wrap a.modlink .mod-icon {
		width: 32px;
		height: 32px;
		float: left;
		margin: 0 .5em 0 0;
		image-rendering: pixelated;
	}

body:not(.display-description) div.modlink-wrap a.modlink .mod-icon {
	margin-top: -.3em;
}

div.infos {
	font-size: 85%;
}

td.infos-1 div.infos {
	margin-left: 2.8em;
}

div.infos .inf {
	display: inline;
}

div.infos .inf2::before {
	content: ' • ';
}

div.infos .inf-twitch {
	font-size: 10pt;
}

	div.infos .inf-twitch::before, div.infos .inf-rule-seed::before {
		background-size: 10px 10px;
		background-repeat: no-repeat;
	}

	div.infos .inf-twitch::before {
		background-image: url(HTML/img/twitch.svg);
		background-position: right 4px;
		background-position: calc(100% - 2px) 4px;
		padding-right: 12px;
	}



div.infos .inf-time-mode {
	font-size: 10pt;
}

	div.infos .inf-time-mode::before, div.infos .inf-time-mode::before {
		background-size: 12px 12px;
		background-repeat: no-repeat;
	}

	div.infos .inf-time-mode::before {
		background-position: right 4px;
		background-position: calc(100% - 2px) 3px;
		padding-right: 12px;
	}

	div.infos .inf-time-mode.inf-time-mode-Unassigned::before {
		background-image: url(HTML/img/time-mode-Unassigned.svg);
	}

	div.infos .inf-time-mode.inf-time-mode-Assigned::before {
		background-image: url(HTML/img/time-mode-Assigned.svg);
	}

	div.infos .inf-time-mode.inf-time-mode-Community::before {
		background-image: url(HTML/img/time-mode-Community.svg);
	}

	div.infos .inf-time-mode.inf-time-mode-TwitchPlays::before {
		background-image: url(HTML/img/time-mode-TwitchPlays.svg);
	}

div.infos .inf-rule-seed::before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path style="fill:%23026" d="M 778 0 C 720 0 662 21 618 65 C 553 131 536 226 568 307 L 308 567 C 227 534 131 551 66 616 C 10 672 -10 748 4 819 L 172 652 L 312 687 L 313 688 L 348 829 L 181 996 C 252 1010 329 990 384 935 C 449 869 466 773 433 692 L 692 433 C 774 466 871 450 937 384 C 992 328 1012 252 998 181 L 831 348 L 689 313 L 654 172 L 822 4 C 807 1 792 0 778 0 z"/></svg>');
	background-position: right 4px;
	padding-right: 10px;
}

div.infos .inf-author, div.infos .inf-published {
	opacity: .5;
}

	div.infos .inf-author::before {
		white-space: pre;
	}

	div.infos .inf-author::after {
		content: '\0020 ';
		white-space: normal;
	}

	div.infos .inf-author span.contributors {
		text-decoration: underline dotted;
		cursor: pointer;
	}

div.infos .inf-published {
	font-size: smaller;
}

div.infos .inf-difficulty .inf-difficulty-sub {
	font-weight: bold;
}

div.infos .inf-id {
	opacity: .5;
	font-family: Consolas, 'DejaVu Sans Mono', monospace;
	display: block;
}

td.infos-1 div.infos > .inf-description {
	display: block;
	font-size: 90%;
	color: #888;
	padding-right: 2em;
}

	td.infos-1 div.infos > .inf-description > .inf-tags::before {
		content: 'Tags:\a0 ';
	}

#main-table .manual-selector {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 30px;
	font-size: 6pt;
	text-decoration: none;
	text-align: center;
	color: hsl(240, 50%, 50%);
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30"><path fill="hsl(240, 60%, 70%)" d="M0 10,24 10,12 30z" /></svg>');
}

body:not(.display-origname) div.modlink-wrap .inf-origname,
body:not(.display-difficulty) div.infos .inf-difficulty,
body:not(.display-origin) div.infos .inf-origin,
body:not(.display-twitch) div.infos .inf-twitch,
body:not(.display-time-mode) div.infos .inf-time-mode,
body:not(.display-rule-seed) div.infos .inf-rule-seed,
body:not(.display-quirks) div.infos .inf-quirks,
body:not(.display-symbol) div.infos .inf-symbol,
body:not(.display-souvenir) div.infos .inf-souvenir,
body:not(.display-id) div.infos .inf-id,
body:not(.display-description) div.infos .inf-description-only,
body:not(.display-tags) div.infos .inf-tags,
body:not(.display-published) div.infos .inf-published,
body:not(.display-all-contributors) div.infos .inf-author.all-contributors,
body.display-all-contributors div.infos .inf-author:not(.all-contributors) {
	display: none;
}

div.modlink-wrap .inf-origname {
	opacity: .3;
	font-size: 10pt;
}

	div.modlink-wrap .inf-origname::before {
		content: '(';
	}

	div.modlink-wrap .inf-origname::after {
		content: ')';
	}

tr.mod.selected {
	background: rgba(68, 130, 255, .4);
}

td.infos-2 div.infos > .inf-description, td.infos-1 div.infos > div {
	display: none;
}

/** ISSUES ICONS **/
body.display-restricted-manuals tr.mod.cbs-restricted .mod-name::before,
tr.mod:not(.issues-None) .mod-name::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .25em;
	vertical-align: middle;
}

body.display-restricted-manuals #actual-periodic-table a.module.cbs-restricted div.mod-icon::after,
#actual-periodic-table a.module:not(.issues-None) div.mod-icon::after {
	content: '';
	position: absolute;
	left: 18px;
	top: 18px;
	width: 17px;
	height: 17px;
}

tr.mod.issues-Gameplay .mod-name::before, #actual-periodic-table a.issues-Gameplay div.mod-icon::after {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path d="M 0 1 .5 0 1 1 z" fill="%23f24" stroke="none" /></svg>') left top no-repeat;
	background-size: 100% 100%;
}

tr.mod.issues-Superficial .mod-name::before, #actual-periodic-table a.issues-Superficial div.mod-icon::after {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle cx=".5" cy=".5" r=".5" fill="%23fc4" stroke="none" /></svg>') left top no-repeat;
	background-size: 100% 100%;
}

.mobile-cell .alt-indicator.cbs-restricted,
body.display-restricted-manuals tr.mod.cbs-restricted .mod-name::before,
body.display-restricted-manuals #actual-periodic-table a.cbs-restricted div.mod-icon::after {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="%23e53935" d="M32 2a30 30 0 1 0 0 60 30 30 0 0 0 0-60zm22 30c0 4.6-1.4 9-3.9 12.5L19.5 13.9A22 22 0 0 1 54 32zm-44 0c0-4.6 1.4-9 3.9-12.5l30.6 30.6A22 22 0 0 1 10 32z"/></svg>') left top no-repeat;
	background-size: 100% 100%;
}

.slider {
	margin-top: .5em;
}

#main-table {
	border-collapse: separate;
	border-spacing: 0;
}

	#main-table th {
		position: sticky;
		top: 42.8px;
		background: white;
		z-index: 10;
		border: 1px solid black;
		box-sizing: border-box;
	}

	#main-table th,
	#main-table td.infos-2 .inf-difficulty,
	#main-table td.infos-2 .inf-published,
	#main-table td.infos-2 .inf-twitch,
	#main-table td.infos-2 .inf-time-mode {
		white-space: nowrap;
	}

	#main-table td {
		border-top: none;
		border-right: none;
	}

		#main-table td.infos-2 {
			border-right: 1px solid black;
		}

	#main-table th {
		border-right: none;
	}

		#main-table th.infos {
			border-right: 1px solid black;
		}

.header {
	display: flex;
	justify-content: space-between;
}

#logo {
	width: 600px;
	height: 208px;
}

#icons {
	padding-top: 2.5em;
}


/* Mobile interface only */
#page-opt, td.mobile-ui {
	display: none;
}

#main-table td.selectable {
	border-right: none;
	padding-right: 0;
	white-space: nowrap;
	width: 1px;
}

	#main-table td.selectable div.dropdown {
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path fill="%233D3D3D" d="M0,0 8,0 4,8z" /></svg>');
		background-repeat: no-repeat;
		padding-right: 12px;
		background-size: 12px 12px;
		background-position: 30px center;
		cursor: pointer;
	}

	#main-table td.selectable.last {
		padding-right: .7em;
	}

	#main-table td.selectable + td.selectable {
		border-left: none;
		padding-left: 0;
	}

#main-table th::after {
	font-size: 70%;
	font-weight: normal;
	color: black;
	text-decoration: none;
}

#main-table-container {
	position: relative;
}

#module-count {
	text-align: right;
}

#rule-seed {
	width: 19em;
	text-align: center;
}

	#rule-seed #rule-seed-input {
		width: 100px;
	}

	#rule-seed .ui {
		font-size: 14pt;
	}

	#rule-seed .explain {
		font-size: 10pt;
	}

#rule-seed-mobile {
	display: none;
}

div.vstack {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.hstack {
	display: flex;
	flex-direction: row;
}

#options {
	column-count: 2;
	column-gap: 3em;
}

.filter-invert {
	border-bottom: 1px solid #444;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
	font-weight: bold;
}

#filters.no-profile-selected .filter-profile:not(.upload) {
	display: none;
}

#filters .upload > label {
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

#filters td, #filters th {
	text-align: left;
	border: none;
	padding: 0 .02cm;
	font-weight: normal;
}

#filters th {
	padding-right: .2cm;
}

#filters-col1 {
	margin-right: 2.3em;
}

#more {
	width: 35em;
	padding: 0 2em 2em;
}

	#more table {
		border: none;
		width: 100%;
	}

		#more table td, #more table th {
			border: none;
			text-align: left;
			vertical-align: top;
			padding: 0 0 .5em 0;
			box-sizing: border-box;
		}

		#more table th {
			padding-right: 1em;
		}

		#more table.file-locations input {
			width: 100%;
			box-sizing: border-box;
		}

		#more table.file-locations th {
			width: 1px;
			white-space: nowrap;
		}

	#more > .small-links {
		text-align: right;
		font-size: 9pt;
	}

div.popup {
	display: none;
	position: absolute;
	border: 1px solid black;
	padding: 2em;
	background: #fafaff;
	box-shadow: 5px 5px 5px rgba(0,0,0,.3);
	z-index: 100;
}

	div.popup > div.close {
		display: none;
	}

	div.popup p.small-print {
		font-size: 70%;
		margin: .1em .25em;
	}

	div.popup div.bottom-links {
		font-size: 70%;
		margin: 1em .25em;
		border-top: 1px solid #ccc;
		padding-top: 1em;
	}

		div.popup div.bottom-links > div {
			display: inline;
		}

			div.popup div.bottom-links > div:not(:first-child) {
				padding-left: 1.5em;
				border-left: 1px solid #888;
			}

			div.popup div.bottom-links > div:not(:last-child) {
				padding-right: 1.5em;
			}

	div.popup form div.submit {
		text-align: center;
		margin-top: 1em;
	}

		div.popup form div.submit button {
			font-size: 24pt;
			font-weight: bold;
			padding: .2em 1em;
		}

	div.popup div.manual-select {
		display: table;
		width: 100%;
	}

		div.popup div.manual-select > div {
			display: table-row;
		}

			div.popup div.manual-select > div:hover {
				background: #ccf;
			}

			div.popup div.manual-select > div > div, div.popup div.manual-select div.mobile-cell > div {
				display: table-cell;
				vertical-align: middle;
				padding: .2em .7em;
			}

		div.popup div.manual-select div.mobile-cell {
			display: contents;
		}

		div.popup div.manual-select div.title {
			font-size: 15pt;
			font-weight: bold;
		}

		div.popup div.manual-select div.language {
			font-size: 12pt;
		}

		div.popup div.manual-select div.extra {
			font-size: 9pt;
		}
		div.popup div.manual-select div.alt-indicator.cbs-restricted {
			padding: 0;
			width: 10px;
			height: 10px;
		}

			div.popup div.manual-select div.extra .descriptor {
				font-weight: bold;
			}

		div.popup div.manual-select div.link {
			padding-left: 1.5em;
			position: relative;
		}

			div.popup div.manual-select div.link:hover {
				background: navy;
				color: white;
			}

				div.popup div.manual-select div.link:hover a {
					color: #aaf;
				}

			div.popup div.manual-select div.link.checked:before {
				position: absolute;
				content: '✓';
				left: 0.3em;
				top: 50%;
				transform: translateY(-50%);
			}

		div.popup div.manual-select div.last-updated {
			font-size: smaller;
		}

	div.popup.tutorial-select {
		padding: 1em;
	}

	div.popup div.tutorial-select {
		display: table;
	}

		div.popup div.tutorial-select > a {
			display: table-row;
			text-decoration: none;
			color: black;
		}

			div.popup div.tutorial-select > a:hover {
				background: #ccf;
			}

			div.popup div.tutorial-select > a > div {
				display: table-cell;
				vertical-align: middle;
				padding: .2em 1.2em;
			}

				div.popup div.tutorial-select > a > div:nth-child(2) {
					font-size: small;
				}

				div.popup div.tutorial-select > a > div > img.icon {
					width: 24px;
					height: 24px;
				}

	div.popup h3, div.popup h4 {
		border-bottom: 1px solid #ccc;
	}

	div.popup h4 {
		margin: 0 0 .5em;
	}

	div.popup .option-group {
		break-inside: avoid;
	}

		div.popup .option-group:not(:last-child) {
			margin-bottom: 1.5em;
		}

		div.popup .option-group .sub-option {
			margin-left: 2em;
		}

		div.popup .option-group #results-limit {
			width: 4em;
		}

	div.popup.manual-select {
		padding: 1em;
	}

	div.popup #languages-option {
		max-height: 300px;
		overflow-y: scroll;
		padding-right: 10px;
	}

.icons {
	text-align: center;
	margin: 1em 0;
}

	.icons .icon {
		margin: 0 .6em;
		display: inline-block;
		vertical-align: top;
		padding-bottom: .25em;
	}

		.icons .icon.mobile-only {
			display: none;
		}

		.icons .icon > .icon-link {
			color: #0000EE;
		}

			.icons .icon > .icon-link:visited {
				color: #551A8B;
			}

			.icons .icon > .icon-link > .icon-img {
				width: 60px;
			}

			.icons .icon > .icon-link > .icon-label {
				display: block;
			}

ul.below-icons {
	margin-top: 2.5em;
}

	ul.below-icons:not(.first) {
		margin-top: 1.5em;
		padding-top: .5em;
		border-top: 1px solid #ccc;
	}

	ul.below-icons li {
		margin: 1em 0;
	}

		ul.below-icons li div.link-extra {
			margin-left: 1em;
			font-size: 10pt;
		}

	ul.below-icons .important {
		font-weight: bold;
		font-size: 18pt;
	}

.pdf-merge {
	text-align: center;
	padding: .75em 0;
}

/* “Random module” popup */
#random-chosen-icon {
	image-rendering: pixelated;
	width: 128px;
}
#random-chosen-description {
	font-size: 80%;
	color: #777;
	width: 17em;
}

/* When RULE SEED is active */
body.rule-seed-active tr.mod.rs td.infos-1 {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path style="fill:%23026" d="M 778 0 C 720 0 662 21 618 65 C 553 131 536 226 568 307 L 308 567 C 227 534 131 551 66 616 C 10 672 -10 748 4 819 L 172 652 L 312 687 L 313 688 L 348 829 L 181 996 C 252 1010 329 990 384 935 C 449 869 466 773 433 692 L 692 433 C 774 466 871 450 937 384 C 992 328 1012 252 998 181 L 831 348 L 689 313 L 654 172 L 822 4 C 807 1 792 0 778 0 z"/></svg>');
	background-size: 2em 2em;
	background-position: calc(100% - 2.5em) center;
	background-repeat: no-repeat;
}

body.rule-seed-active #main-table-container #tabs > #rule-seed-link {
	font-size: 18pt;
	background-color: hsl(0,80%,80%);
	background-size: 25px 25px;
	border-top-color: hsl(0,80%,70%);
	border-right-color: hsl(0,80%,70%);
	border-left-color: hsl(0,80%,95%);
	padding-left: 33px;
}


/* Periodic Table of Modules */
#actual-periodic-table {
	display: flex;
	flex-wrap: wrap;
	clear: both;
}

	#actual-periodic-table .module {
		border: 2px solid #666;
		width: 91px;
		height: 58px;
		text-align: center;
		position: relative;
		margin-right: -2px;
		margin-bottom: -2px;
		color: black;
	}

		#actual-periodic-table .module.highlight {
			z-index: 100;
			box-shadow: 0 0 10px rgba(0,0,0,.6);
			border-color: black;
		}

	#actual-periodic-table .manual-selector {
		display: block;
		position: absolute;
		right: 1px;
		top: 20px;
		width: 8px;
		height: 10px;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 10"><path fill="hsl(240, 60%, 70%)" d="M0,0 8,0 4,10z" /></svg>');
		background-repeat: no-repeat;
		background-size: contain;
	}

	#actual-periodic-table .symbol {
		font-family: Georgia;
		position: absolute;
		box-sizing: border-box;
		left: 0;
		right: 0;
		top: 0;
		height: 36px;
		padding: 7px 7px 0 34px;
		font-size: 18pt;
		text-align: center;
	}

		#actual-periodic-table .symbol > .inner {
			display: inline-block;
			transform-origin: left center;
		}

	#actual-periodic-table .mod-icon {
		background-repeat: no-repeat;
		position: absolute;
		top: 2px;
		left: 2px;
		width: 32px;
		height: 32px;
	}

	#actual-periodic-table .Trivial {
		background-color: hsl(120, 100%, 93%);
	}

	#actual-periodic-table .VeryEasy {
		background-color: hsl(100, 100%, 93%);
	}

	#actual-periodic-table .Easy {
		background-color: hsl(80, 100%, 93%);
	}

	#actual-periodic-table .Medium {
		background-color: hsl(60, 100%, 93%);
	}

	#actual-periodic-table .Hard {
		background-color: hsl(40, 100%, 93%);
	}

	#actual-periodic-table .VeryHard {
		background-color: hsl(20, 100%, 93%);
	}

	#actual-periodic-table .Extreme {
		background-color: hsl(0, 100%, 93%);
	}

	#actual-periodic-table .souvenir {
		position: absolute;
		left: 37px;
		top: -1px;
		font-size: 7pt;
		text-align: left;
	}

	#actual-periodic-table .tpscore {
		position: absolute;
		right: 2px;
		top: -1px;
		font-size: 7pt;
		text-align: right;
	}

	#actual-periodic-table .name {
		position: absolute;
		left: 0;
		right: 0;
		top: 36px;
		bottom: 1px;
		font-family: 'Agency FB';
		font-size: 9pt;
		line-height: 1;
	}

		#actual-periodic-table .name .inner {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			transform: translate(-50%, -50%);
			line-height: .9;
		}

#module-ui table td, #module-ui table th {
	border: none;
}

#module-ui table th {
	font-size: 16pt;
	font-weight: bold;
	white-space: nowrap;
}

#module-ui table.fields th {
	text-align: right;
}

#module-ui table.nested > * > tr > th {
	text-align: left;
	font-size: 12pt;
}

	#module-ui table.nested > * > tr > th h2 {
		font-size: 20pt;
		border-bottom: 1px solid #888;
		margin: 0;
	}

#module-ui table.nested > tbody > tr > td {
	vertical-align: top;
}

#module-ui table td .explain {
	font-size: 9pt;
	white-space: pre-line;
}

#module-ui table td input:not([type="checkbox"]), #module-ui table td select, #module-ui table td textarea {
	width: 100%;
	box-sizing: border-box;
}

#module-ui table td textarea {
	height: 10em;
}

#legal {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .6;
	border-top: 1px solid #888;
	font-size: 10pt;
	padding: .5em;
}

/* Desktop version for narrow screens */
@media screen and (max-width: 1090px) {
	.header {
		flex-direction: column;
		align-items: center;
		justify-items: center;
	}

	.lang {
		position: relative;
		line-height: 40px;
		top: 0;
		right: 0;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 1090px) and (min-width: 650.01px) {
	body {
		font-size: 12pt;
		max-width: none;
	}

	#logo {
		text-align: center;
	}

	#icons {
		width: 35em;
		margin: 0 auto 2em;
		padding-top: 0;
		text-align: right;
	}

		#icons > * {
			text-align: center;
		}

	td.infos-1 {
		padding: .2em 2.2em .2em .7em;
	}

		td.infos-1 div.modlink-wrap {
			margin: 0;
		}

			td.infos-1 div.modlink-wrap .mod-icon {
				float: left;
				margin: .1em .5em 0 0 !important;
			}

			td.infos-1 div.modlink-wrap a.modlink .mod-name {
				margin: 0;
			}

		td.infos-1 div.infos {
			padding: .1em 0;
			position: relative;
			margin-left: 3em;
		}

			td.infos-1 div.infos > div.inf-type,
			td.infos-1 div.infos > div.inf-author,
			body.display-difficulty td.infos-1 div.infos > div.inf-difficulty,
			body.display-origin td.infos-1 div.infos > div.inf-origin,
			body.display-published td.infos-1 div.infos > div.inf-published,
			body.display-twitch td.infos-1 div.infos > div.inf-twitch,
			body.display-time-mode td.infos-1 div.infos > div.inf-time-mode,
			body.display-souvenir td.infos-1 div.infos > div.inf-souvenir,
			body.display-symbol td.infos-1 div.infos > div.inf-symbol,
			body.display-quirks td.infos-1 div.infos > div.inf-quirks,
			body.display-id td.infos-1 div.infos > div.inf-id,
			body.display-rule-seed td.infos-1 div.infos > div.inf-rule-seed {
				display: inline;
			}

			td.infos-1 div.infos > div.inf-id::before,
			td.infos-1 div.infos > div.inf2::before {
				content: '\a0 • ';
			}

			td.infos-1 div.infos > div.inf-author::before {
				content: ' • by ';
			}

	body.display-origname td.infos-1 div.infos div.inf-origname,
	body.display-description td.infos-1 div.infos > div.inf-description,
	body.display-quirks td.infos-1 div.infos > div.inf-quirks-id,
	body.display-id td.infos-1 div.infos > div.inf-quirks-id {
		display: block;
	}

	td.infos-2, th.infos {
		display: none;
	}

	#more {
		width: 33em;
	}

	tr.mod[data-issues="Superficial"] .mod-name, tr.mod[data-issues="Gameplay"] .mod-name {
		padding-left: 3.5em;
		background-position: 2.25em 50%;
	}

	#main-table th {
		top: 40px;
	}

		#main-table th.modlink {
			border-right: 1px solid black;
		}

	#main-table td.infos-1 {
		border-right: 1px solid black;
	}
}

/* Mobile interface */
@media screen and (max-width: 650px) {

	body {
		margin-bottom: 1em;
	}

	#top-controls {
		border-bottom-color: #ccc;
		margin-bottom: -1px;
		margin-right: 1px;
	}

	#main-table-container > #tabs {
		margin-right: 1px;
	}

	#page-opt {
		display: block;
		position: absolute;
		width: 60px;
		height: 60px;
		top: 20px;
		right: 0;
	}

	a.mobile-opt {
		display: block;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 30 70"><circle cx="5" cy="5" r="5" fill="%23000" /><circle cx="5" cy="25" r="5" fill="%23000" /><circle cx="5" cy="45" r="5" fill="%23000" /></svg>') right center no-repeat;
		background-size: contain;
	}

	#page-opt-popup {
		padding: 2em 1em;
	}

	#main-content > .header > #icons {
		display: none;
	}

	#main-table {
		display: block;
		border: none;
		border-bottom: 1px solid #ccc;
	}

		#main-table tr.header-row {
			display: none;
		}

		#main-table td.infos-1 div.infos {
			margin-left: 3.5em;
		}

		#main-table tbody {
			display: block;
		}

		#main-table tr.mod {
			display: block;
			position: relative;
			clear: both;
			border-top: 1px solid #ccc;
			min-height: 2em;
		}

		#main-table td {
			display: block;
			border: none;
			padding: 0;
			font-size: 8pt;
			overflow: auto;
		}

			#main-table td.selectable {
				display: none;
			}

			#main-table td .manual-selector {
				display: none;
			}

		#main-table div.modlink-wrap {
			margin: 0;
		}

			#main-table div.modlink-wrap a.modlink {
				display: block;
				font-size: 12pt;
				text-decoration: none;
			}

				#main-table div.modlink-wrap a.modlink .mod-icon {
					float: left;
					margin: .1em 0;
				}

				#main-table div.modlink-wrap a.modlink .mod-name {
					width: 14.5em;
					line-height: 1;
					display: block;
				}

		#main-table td.infos-2 {
			position: absolute;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			text-align: right;
		}


			#main-table td.infos-2 .inf-twitch {
				font-size: inherit;
			}

				#main-table td.infos-2 .inf-twitch::before {
					background-size: 7px 7px;
					background-position: 10px 3px;
					background-position: calc(100% - 2px) 3px;
					padding-right: 9px;
				}

			#main-table td.infos-2 .inf-time-mode {
				font-size: inherit;
			}

				#main-table td.infos-2 .inf-time-mode::before {
					background-size: 7px 7px;
					background-position: 10px 3px;
					background-position: calc(100% - 2px) 3px;
					padding-right: 9px;
				}

			#main-table td.infos-2 .inf-rule-seed::before {
				background-size: 7px 7px;
				background-position: right 3px;
				padding-right: 7px;
			}

			#main-table td.infos-2 div.infos {
				font-size: 80%;
			}

				#main-table td.infos-2 div.infos .inf-author {
					font-size: 95%;
				}

		#main-table td.mobile-ui {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 50px;
			display: block;
		}

			#main-table td.mobile-ui > a.mobile-opt {
				width: 100%;
				height: 25pt;
			}

		#main-table td.infos-2 .inf-difficulty::before {
			content: '\000a';
			white-space: pre;
		}

	body.display-id #main-table tr.mod {
		min-height: 2.5em;
	}

	body:not(.display-description) #main-table div.modlink-wrap a.modlink .mod-name {
		position: absolute;
		left: 2.5em;
		top: 1.1em;
		transform: translateY(-50%);
	}

	body.display-description #main-table div.modlink-wrap a.modlink .mod-icon {
		margin: 1px .5em 1px 0;
	}

	body.display-description #main-table td.infos-1 div.infos .inf-description {
		display: block;
		width: 25em;
		line-height: 1;
		font-size: 70%;
		padding-left: 1.3em;
		margin-top: .3em;
	}

	#logo {
		width: 320px;
		height: 111px;
	}

	div.popup {
		left: 12px;
		right: 12px;
		top: 12px;
		bottom: 12px;
		position: fixed;
		overflow: auto;
		font-size: 75%;
		width: auto !important;
	}

		div.popup > div.close {
			display: block;
			position: fixed;
			top: 2px;
			right: 2px;
			width: 40px;
			height: 40px;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4.5" fill="%23fff" stroke-width=".5" stroke="%23000" /><line x1="3" y1="3" x2="7" y2="7" stroke="black" stroke-width="1.5" /><line x1="3" y1="7" x2="7" y2="3" stroke="black" stroke-width="1.5" /></svg>') right center no-repeat;
			cursor: pointer;
		}

		div.popup > p.manual-select {
			padding: 2em 0 1em;
		}

		div.popup div.manual-select div.mobile-cell {
			display: table-cell;
			padding: .5em 0;
		}

			div.popup div.manual-select div.mobile-cell > div {
				display: block;
				padding: 0;
			}

		div.popup div.manual-select div.descriptor {
			display: inline;
		}

		div.popup div.manual-select div.author {
			display: inline;
			padding-left: .75em;
		}

		div.popup p.small-print {
			margin-top: 3em;
		}

	kbd {
		text-decoration: inherit;
	}

	#tabs {
		display: none;
	}

	div.popup > div.icons, div.popup > #icons {
		float: none;
		padding: 0;
		line-height: 140px;
	}

		div.popup > div.icons div.icon {
			display: inline-block;
			margin: 0 .6em;
			text-align: center;
			vertical-align: top;
			line-height: 1.4;
		}

			div.popup > div.icons div.icon > .icon-link > .icon-img {
				width: 60px;
			}

			div.popup > div.icons div.icon > .icon-link > .icon-label {
				position: static;
				display: block;
				margin-top: .5em;
				width: 5em;
				transform: none;
			}

	div.popup div.module-further-info {
		padding: .7em .5em;
		font-size: 90%;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

		div.popup div.module-further-info + div.module-further-info {
			border-top: none;
		}

	div.popup div.tutorial-videos {
		border-top: 1px solid #ccc;
	}

	#more div.highlighting-controls {
		display: none;
	}

	#more table.file-locations td, #more table.file-locations th {
		vertical-align: middle;
		padding: 1px;
	}

	#more input[type=text] {
		font-size: 10pt;
		padding: 0 2px;
	}

	#top-controls .search-container .search-options {
		font-size: 10pt;
	}

	body.rule-seed-active #rule-seed-mobile {
		background: hsl(0,80%,90%);
		border: 1px solid hsl(0,80%,50%);
		border-radius: .2em;
		box-shadow: rgba(0, 0, 0, .2) 0 0 10px;
		display: block;
		margin-top: .5em;
		padding: .1em 0;
		text-align: center;
	}

		body.rule-seed-active #rule-seed-mobile::before {
			content: 'Rule seed = ';
		}

	body.rule-seed-active tr.mod.rs td.infos-1 {
		background-image: none;
		position: relative;
	}

		body.rule-seed-active tr.mod.rs td.infos-1::before {
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			left: 64%;
			top: 50%;
			transform: translate(-50%,-50%);
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path style="fill:hsla(240, 100%, 50%, 0.2)" d="M 778 0 C 720 0 662 21 618 65 C 553 131 536 226 568 307 L 308 567 C 227 534 131 551 66 616 C 10 672 -10 748 4 819 L 172 652 L 312 687 L 313 688 L 348 829 L 181 996 C 252 1010 329 990 384 935 C 449 869 466 773 433 692 L 692 433 C 774 466 871 450 937 384 C 992 328 1012 252 998 181 L 831 348 L 689 313 L 654 172 L 822 4 C 807 1 792 0 778 0 z"/></svg>');
			background-size: cover;
			background-repeat: no-repeat;
		}

	#filters, #options {
		column-count: initial;
	}

	#main-table td.infos-2 {
		border-right: none;
	}
}

@media print {
	#main-table td.selectable, #main-table tr.header-row th:nth-child(1), #main-table td.selectable, #main-table tr.header-row th:nth-child(1), #logo, #icons, #top-controls, .manual-selector {
		display: none;
	}

	table#main-table tr {
		page-break-inside: avoid;
		page-break-after: auto
	}

	a {
		text-decoration: none;
		color: black;
	}

	#main-table td, #main-table th {
		border: none;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
}