/****** Menus: First Level ******/
nav#sidebar			div#menu		ul																	{ padding: 0 5px 0 5px; margin: 0; list-style-type: none; }
	nav#sidebar			div#menu	ul	li																{ overflow: hidden; }
	nav#sidebar			div#menu	ul	li			a		img.menu_icon								{ height: 13px; width: 13px; }
	nav#sidebar			div#menu	ul	li:hover	a		img.menu_icon								{ height: 16px; width: 16px; }
	nav#sidebar			div#menu	ul	li			a													{ transition: all 0.2s ease-in-out; border-left: 6px solid #333; color: #000; display: block; padding: 3px 5px; }
	nav#sidebar			div#menu	ul	li			a:hover												{ width: calc(100% - 5px); font-weight: bold; background-color: #333; border-left-color: var(--page-border-color); }
	nav#sidebar			div#menu	ul	li			a		span.menu_item_text							{ margin-left: 10px; }
	nav#sidebar			div#menu	ul	li			a:hover span.menu_item_text							{ color: #FFF; }

/****** Menus: Second Level ******/
	nav#sidebar			div#menu	ul	li			ul													{ transition: all 0.2s ease-in-out; padding: 0 0 0 10px; width: 100%; opacity: 0; }
	nav#sidebar:hover	div#menu	ul	li			ul													{ opacity: 100% !important; }
	nav#sidebar			div#menu	ul	li			ul		li											{ transition: all 0.2s ease-in-out; height: 0; }
	nav#sidebar:hover	div#menu	ul	li			ul		li											{ height: 22px; }
	nav#sidebar			div#menu	ul	li			ul		li					a						{ font-size: 80%; width: calc(100% - 35px); margin-left: 25px; border-left: 4px solid #333; padding: 5px; }
	nav#sidebar			div#menu	ul	li			ul		li					a span.menu_item_text	{ margin-left: 0; }

/****** Divs ******/
div.post																								{ box-sizing: border-box; border: 4px solid #ddd; border-color: var(--page-border-color); border-radius: 15px; background-color: #ddd; background-color: var(--page-postbackground-color); margin: 5px; color: #000; position: relative; overflow: auto; }
	div.post[id^="id"]:hover																			{ filter: brightness(1.05); }
	div.post[id^="id"]:hover h2, div.post[id^="id"]:hover h3.h2											{ filter: brightness(.95); }
	div.post h2, div.post h3.h2																			{ border-bottom: 3px #000 solid; padding: 5px 0 5px 40px; font-size: 120%; margin: 0; background-color: #bbb; background-color: var(--page-theme-color); background-image: var(--page-icon); background-size: 24px 24px; background-repeat: no-repeat; background-position: 9px 3px; }
	div.post h3																							{ font-size: 100%; border-bottom: 3px #000 solid; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 5px 0 5px 35px; margin: 0; background-repeat: no-repeat; background-size: auto 15px; background-position: 8px 5px; background-color: #bbb; background-color: var(--page-theme-color); background-image: var(--page-icon); }
		div.post h2::after, div.post h3.h2::after														{ content:"\00a0>"; }
	div.post p																							{ padding: 5px 5px 0 5px; }
	div.post > p																						{ padding: 10px; }
	div:not(.post) > h2																					{ color: #000; font-size: 140%; margin: 20px 5px; padding: 5px 0 5px 5px; border-bottom: 3px #000 solid; border-top-left-radius: 10px; border-top-right-radius: 10px; }
div.coupon																								{ text-align: center; border: 4px dashed #000; border-radius: 15px; margin-top: 25px; background: #FFF; padding-bottom: 15px; width: max-content; }
	div.post div.coupon p								  												{ padding-left: 10px; padding-right: 10px; }

div.floaterrow																							{ clear: both; }
div.diagnostic																							{ cursor: pointer; background: #CCC; border: 1px solid black; padding: 0 3px 0 3px; border-radius: 5px; position: absolute; z-index: 2; max-width: 375px; right: 20px; top: 20px; }
	div.diagnostic.collapsed																			{ overflow: hidden; transition: all .5s ease-in-out; }

div.floatleft																							{ float: left; }
div.floatright																							{ float: right; }
	div.floatleft h2, div.floatright h2, div.floatleft h3.h2, div.floatright h3.h2						{ margin-top: 0; padding-right: 10px; }
div.nopadding																							{ padding: 0 !important; }
div.errormessage h2, div.errormessage h3.h2																{ background-image: var(--error-background-image); background-color: #B333B3; }
div.dragitem																							{ background-color: #FFFFFF; border: 1px solid black; padding: 5px; border-radius: 5px; cursor: move; }

/****** Definition lists ******/
dl.inlinelist																							{ margin: 0; line-height: 130%; }
	dl.inlinelist dt																					{ font-weight: bold; display: inline; float: unset !important; color: #000; }
		dl.inlinelist dt:not(:first-child)::before														{ content: " // "; color: #000; color: var(--page-word-color); }
	dl.inlinelist dd																					{ all: unset; display: inline; margin-left: 0 !important; }
	dl.inlinelist span.inlinelist																		{ all: unset; font-weight: bold; color: #000; }
		dl.inlinelist span.inlinelist:not(:first-child)::before											{ content: " // "; }
		dl.inlinelist span.inlinelist::after															{ content: "\00a0::"; }

/****** Forms and inputs ******/
	form dt, form dd																					{ min-height: 28px; }
	input, select, textarea																				{ border: 1px solid black; border-radius: 5px; padding: 5px; font-size: 95%; }
	textarea																							{ font-size: large; }
		input:focus, select:focus, textarea:focus 														{ background-color: #FFFFCC; }
	form input:disabled, form a:disabled																{ filter: grayscale(75%); }
	form input[type="submit"], form input[type="button"]												{ padding-top: 2px; padding-bottom: 2px; font-size: 95%; color: #000000; }
	form input[type="submit"]:hover:enabled, form input[type="button"]:hover:enabled					{ filter: brightness(1.3); transition: all 0.3s ease; }
	form input[type="file"]:not(.dropbox)																{ width: 115px; height: 20px; padding: 2px 5px; font-size: unset; }
	form input[type="file"]:hover:enabled																{ filter: brightness(1.3); transition: all 0.3s ease; }
	form input[type="file"]::file-selector-button														{ display: none; }
	form input[type="button"]																			{ height: 26px; }
	form input[type="range"]																			{ padding: 0; margin: 0; }
	form input[type="search"]																			{ background-image: --search-background-image; background-repeat: no-repeat; background-size: 23px 23px; background-position: 99% center; }
	div.buttonset																						{ text-align: center; padding: 5px; }
		div.buttonset a, div.buttonset a:visited														{ text-align: center; padding: 5px; border-radius: 5px; padding-top: 2px; font-size: 95%; color: #000000; border: 1px solid black; background-color: #fff; background-color: var(--page-theme-color); }
		div.buttonset input:first-child																	{ margin-top: 16px; }
		div.buttonset input:not(:last-child)															{ margin-bottom: 5px; }

input[type="submit"], input[type="button"], input[type="reset"], input[type="file"]						{ background-color: #fff; background-color: var(--page-theme-color); }
	input:required, select:required, textarea:required													{ box-shadow: 0 0 0 3px var(--page-theme-color); }
	input:invalid, select:invalid, textarea:invalid														{ border: 1px solid black; border-color: var(--page-border-color); }

dl.filelist																								{ margin-left: 18px; display: grid; grid-auto-flow: dense; grid-template-columns: repeat(3, .1fr 1fr); grid-column-gap: 5px; place-items: baseline; }
	dl.filelist dt																						{ font-weight: bold; color: #000; color: var(--page-word-color); }
	dl.filelist dt::after																				{ content: "\00a0::"; }
	dl.filelist dd																						{ border: 1px solid black; text-align: center; margin-left: 0; margin-right: 20px; margin-bottom: 5px; padding: 5px; border-radius: 10px; }
		dl.filelist dd.sandboxmode																		{ background-image: var(--sandbox-background-image); background-size: contain; }

dl.dropbox																								{ margin: 0 5px; }
	dl.dropbox dt																						{ width: 0; height: 0; opacity: 0; }
	dl.dropbox dd																						{ margin: 0; text-align: center; position: relative; top: -20px; border-radius: 5px; border: 3px solid black; }
	dl.dropbox dd																						{ border: 3px solid var(--page-border-color); }
		dl.dropbox dd label																				{ position: relative; top: 3.5em; z-index: 2; padding: 30px; border-radius: 15px; border: 1px solid black; pointer-events: none; background-color: #fff; background-color: var(--page-postbackground-color); }
			dl.dropbox dd label::before																	{ content: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E"); display: inline-block; width: 19px; height: 19px; vertical-align: text-bottom;}
		dl.dropbox dd input[type="file"]																{ width: 98%; height: 7em; border: 3px dashed black; border-radius: 5px; position: relative; top: -10px; background: transparent; color: transparent; }
		dl.dropbox dd.sandboxmode input[type="file"]													{ background-image: var(--sandbox-background-image); }

/****** Switches and filters ******/
	input.switch																						{ display: none !important; }
		input.switch + label																			{ background-color: #000000; color: #FFFFFF; border: 1px solid black; margin-left: 0; margin-right: 5px; padding: 2px 5px 2px 5px; border-radius: 5px; display: inline-block; min-width: 65px; height: 20px; }
		input.switch:checked + label																	{ background-color:  var(--page-border-color); color: #000000; }
		input[type="checkbox"].switch + label															{ min-width: 100px; padding-left: 3px; }
		input[type="checkbox"].switch:checked + label													{ padding-right: 3px; text-align: right; }
		input[type="radio"].switch + label																{ min-width: 100px; text-align: center; }
		input[type="radio"].switch:checked + label														{ }
	input.filtertoggle																					{ display: none; }
		label.filtertoggle																				{ border: 1px solid black; font-size: 75%; padding: 3px 20px 3px 3px; border-radius: 15px; white-space: nowrap; line-height: 25px; background-image: var(--filteron-background-image); background-repeat: no-repeat; background-size: 15px 15px; background-position: right 2px top 2px; background-color: #fff; background-color: var(--page-theme-color); }
		label.filtertoggle.filteroff																	{ filter: brightness(60%); background-image: var(--filteroff-background-image); }
		label.filtertoggle.filterexpand																	{ background-image: var(--filterexpand-background-image); }
		label.filtertoggle.filtercollapse																{ background-image: var(--filtercollapse-background-image); }
		label.filtertoggle.filtershowall																{ background-image: var(--filtershowall-background-image); }

/****** Tables ******/
table																									{ width: 99.5%; border-collapse: collapse; margin: 5px; }
	table caption																						{ font-size: 120%; margin: 0; }
	table thead																							{ border-bottom: 4px solid #fff; border-bottom-color: var(--page-theme-color); }
	table thead tr th																					{ background-color: #fff; background-color: var(--page-theme-color); color: #000000; }
	table tr th, table tr td																			{ border-bottom: 1px solid black; padding: 5px; }
		table tr th a																					{ display: block; }
			table tr th a.buttonlink, table tr td a.buttonlink											{ font-weight: initial; font-size: small; }
		table tr:hover th, table tr:hover td															{ filter: brightness(120%); }
	table tr th span.hovermenu, table tr td span.hovermenu												{ display: none; top: 0; right: -15px; position: absolute; border: 1px solid #AAAAAA; border-color: var(--page-theme-color); background-color: #666666; padding: 5px; border-radius: 10px; text-wrap: nowrap; }
		table tr:hover th span.hovermenu, table tr:hover td span.hovermenu								{ display: block; }
		table tr th span.hovermenu, table tr td span.hovermenu a										{ margin-right: 2px; }
	table thead tr:first-child th:first-child															{ border-top-left-radius: 10px; }
	table thead tr:first-child th:last-child															{ border-top-right-radius: 10px; }
	table tbody tr th																					{ text-align: left; background-color: #777; }
		table tbody tr:last-child th, table tbody tr:last-child td										{ border-bottom: none; padding: 5px; }
		table tbody tr:last-child th:first-child														{ border-bottom-left-radius: 10px; }
		table tbody tr:last-child td:last-child															{ border-bottom-right-radius: 10px; }
	table tr.moveable																					{ position: relative; background-color: var(--page-postbackground-color); border-radius: 15px; z-index: 1000; cursor: grabbing; }
	table tr:not(.moveable) td span.moveicon															{ cursor: grab; }
	table tr.moveable       td span.moveicon															{ cursor: grabbing; }
table.databasespill																						{ }
	table.databasespill tr																				{ background-color: #333; }
	table.databasespill tr td																			{ color: #CCCCCC; }
	table tbody tr.highlighted th, table tbody tr.highlighted td										{ background-color: #FFFFE0; filter: brightness(75%); }

/****** Calendar dialog box ******/
div#calendar																							{ text-align: center; margin: 5px 5px 5px 5px; padding: 0 1% 5px 1%; border-radius: 15px; }
	div#calendar div.calendar_date_appearance															{ padding: 3px 3px 0 3px; border-bottom: 3px solid #fff; border-bottom-color: var(--page-border-color); }
	div#calendar div.calendar_date_startappearance														{ margin-right: -5px; padding-right: 8px; border-bottom: 3px solid #fff; border-bottom-color: var(--page-border-color); }
	div#calendar div.calendar_date_middleappearance														{ margin: 0 -5px; padding: 3px 8px 3px 8px; border-bottom: 3px solid #fff; border-bottom-color: var(--page-border-color); }
	div#calendar div.calendar_date_endappearance														{ margin-left: -5px; padding-left: 8px; border-bottom: 3px solid #fff; border-bottom-color: var(--page-border-color); }
		div#calendar div.calendar_date a																{ color: #3366FF; }
div.calendarpopup																						{ top: 50%; left: 50%; width: 90%; transform: translate(-50%, -50%); padding-bottom: 5px; }
	div.calendarpopup dl.categories																		{ margin: 5px 5px 0 5px; }
	.calendar_week																						{ padding-bottom: 7px; }
	.calendar_daysofweek, .calendar_date, .calendar_date_appearance, .calendar_date_startappearance, .calendar_date_middleappearance, .calendar_date_endappearance
																										{ background-color: #333; color: white; }
	.calendar_daysofweek																				{ font-weight: bold; }
	.calendar_daysofweek, .calendar_date, .calendar_nodate												{ padding: 3px; margin: 0 0 0 3px; }
	.calendar_nodate, .calendar_daysofweek, .calendar_date, .calendar_date_appearance					{ display: inline-grid; width: 10%; }

/****** Other dialog boxes ******/
div.dialogbox																							{ box-shadow: 0 0 100px black; box-shadow: 0 0 100px var(--page-border-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.2s ease-in-out; z-index: 10; overflow: hidden; max-height: 95vh; }
	div.dialogbox.expandcollapse h2, div.dialogbox.expandcollapse h3.h2									{ cursor: revert; }
	div.dialogbox.expandcollapse																		{ width: 98%; height: 100%; }
		div.dialogbox.expandcollapse div.expandcollapselink												{ top: 4px; position: relative; }
	div.dialogbox.calendardialogbox																		{ top: 35%; width: 20%; min-width: 300px; }
	div.dialogbox.databasedialogbox																		{ max-width: 90%; overflow-wrap: anywhere; }
	div.dialogbox.imagedialogbox																		{ background-size: contain; background-repeat: no-repeat; }
div.dialogboxinline																						{ padding: 5px; margin: 5px; border-radius: 15px; transition: box-shadow 0.2s ease-in-out; }
	div.dialogboxinline:focus-within																	{ box-shadow: rgba(0, 0, 0, 0.8) 0 0 100vh 100vw; }
	div.dialogboxinline:focus																			{ box-shadow: rgba(0, 0, 0, 0.8) 0 0 100vh 100vw; }

form.dialogbox																							{ box-shadow: 0 0 100px black; box-shadow: 0 0 10px var(--page-border-color); position: absolute; left: 50%; top: 30%; transform: translate(-50%, -30%); width: 90%; max-height: 90%; border-radius: 15px; overflow: hidden; z-index: 10; transition: all 0.2s ease-in-out; opacity: 0; }
	form.dialogbox div																					{ margin: 0; max-height: 100%; }
		form.dialogbox div.gridbox																		{ margin-left: 5px; margin-right: 5px; margin-top: 5px; }
		form.dialogbox div.scrollzone																	{ overflow-y: auto; padding-left: 5px; padding-right: 5px; padding-top: 5px; }
		form.dialogbox div.scrollzone																	{ max-height: 85vh; } /* @@css: this doesn't work on all zooms */
	form.dialogbox span.errormessage.dialogfeedback, form.dialogbox span.successmessage.dialogfeedback, form.dialogbox span.warningmessage.dialogfeedback
																										{ float: right; width: 48% }

div.flashdialogbox																						{ transition: all 0.7s ease-in-out; min-width: 20%; position: absolute; bottom: 50px; right: 50px; pointer-events: none; }
	div.flashdialogbox h2																				{ display: none; }
	div.flashdialogbox p																				{ margin-top: 10px; margin-bottom: 10px; text-align: center; }

div.dialogboxoverlay																					{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #333333; opacity: 75%; }

div.closediv, div.expandcollapse div.expandcollapselink													{ position: absolute; overflow: hidden; }
	div.expandcollapse h2 + div.expandcollapselink														{ right: 0; top: -4px; }
	div:not(.expandcollapse) h2 + div.closediv															{ right: 0; top: 0; }
	div:not(.expandcollapse) h3 + div.closediv, div.expandcollapse h3 + div.expandcollapselink			{ right: 2px; top: 2px; }
	div.closediv img.closelink																			{ transform: rotate(45deg); }

/****** Popups (hotspots, calendar) ******/
div.popup																								{ position: fixed; box-shadow: 0 0 100px black; text-align: left; border: 2px solid #000; border-radius: 10px; padding: 0 5px 0 5px; transition: all 0.3s ease; font-size: 90%; color: #000; z-index: 1; background-color: #000; background-color: var(--page-postbackground-color); }
	div.popup:not(:has(h2))																				{ padding: 5px; }
	div.popup h2, div.popup h3.h2																		{ border-bottom: 2px #000 solid; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 2px 18px 0 30px !important; background-color: #888; background-repeat: no-repeat; background-size: 13px 13px; background-position: 5px 2px; font-size: 100% !important; color: #000; text-align: left; margin: 0 -5px 0 -5px !important; background-color: #bbb; background-color: var(--page-theme-color); }
	div.popup dl.categories dd																			{ padding-bottom: 5px; }
	div.popup p																							{ margin: 0; }
	div.popup.calendarlink																				{ top: 197px; right: 50px; }
	div.popup:not(.calendarpopup) dl.categories															{ margin: 0; }
	div.popup.characters																				{ top: -1000px; pointer-events: none; }

/****** Expand/collapse divs ******/
div.expandcollapse																						{ transition: height .5s ease-in-out; }
	div.expandcollapse > h2, div.expandcollapse > h3.h2													{ cursor: pointer; }
	div.expandcollapse .expandcollapse_element															{ transition: height .5s ease-in-out; }
	div.expandcollapse.collapsed .expandcollapse_element												{ display: none; height: 0%; overflow: hidden; }
	div.expandcollapse:not(.collapsed) .expandcollapse_element											{ height: 100%; }
	div.expandcollapse:not(.collapsed) .expandcollapse_preview											{ display: none; }
	div.expandcollapse div.expandcollapselink img.expandcollapse_img									{ transition: all .5s ease-in-out; cursor: pointer; }
		div.expandcollapse:not(.collapsed) div.expandcollapselink img.expandcollapse_img				{ transform: rotate(45deg); }

/******* Hotspots *******/
/* on character dialog: position: relative; display: block; border: 1px solid black; border-radius: 30px; */
svg																										{ border-radius: 15px; border: 4px solid black; border-color: var(--page-border-color); }
	svg circle.hotspot, svg rect.mugshot																{ stroke: #000000; stroke-width: 3; fill-opacity: 0.4; cursor: auto; }
		svg circle.hotspot:hover, svg rect.mugshot:hover, svg circle.hotspot.current					{ fill-opacity: 0.8; }
		svg circle.hotspot:hover, svg rect.mugshot:hover												{ cursor: move; }
		svg circle.hotspot.error, svg rect.mugshot.error												{ stroke: #FB1818 !important; }
		svg circle.mugshotcorner																		{ fill: #FFF; stroke: #000; }
	svg text.hotspotnumber																				{ stroke: #FFFFFF; cursor: move; text-anchor: middle; dominant-baseline: middle; }

/******* Links *******/
	a, a:visited																						{ text-decoration: none; color: #0000AA; }
	a.buttonlink																						{ display: inline-block; padding: 4px 5px 3px 5px; border-radius: 5px; border: 1px solid black; background-color: var(--page-theme-color); cursor: default; color: #000 !important; }
	dl.categories dd a.buttonlink																		{ margin-top: 0; }
	a.buttonlink.disabled																				{ filter: brightness(60%); }
	a.buttonlink:hover:not(.disabled)																	{ filter: brightness(1.3); transition: all 0.3s ease; }
	dd a.buttonlink																						{ margin-top: 5px; }
	div.maintenancelink																					{ position: absolute; right: 5px; top: 5px; margin: 0; }
		div.expandcollapselink ~ div.maintenancelink, div.closediv ~ div.maintenancelink				{ margin-right: 30px; }
		div.maintenancelink a																			{ background: #CCC; border: 1px solid black; padding: 0 3px 0 3px; border-radius: 5px; font-family: "Garamond", "Times New Roman", serif; color: #0000AA; }
	div#maintenancelinkmenu																				{ top: 15px; text-wrap: nowrap; font-size: 130%; z-index: 2; transition: all 0.5s ease-in-out; }
		div#maintenancelinkmenu																			{ max-width: 500px; }
		div#maintenancelinkmenu.pulledin																{ max-width: 30px; }
	div#maintenancelinkmenu.pulledin a#maintenancelinkpulltab span										{ transform: rotateY(180deg); }
	div#maintenancelinkmenu a#maintenancelinkpulltab span												{ transition: all 0.5s ease-in-out 0.5s; }

/******* Carousel *******/
div#carousel div.carousel_item																			{ position: relative; display: inline-block; background: -moz-linear-gradient( left, #808080, #C0C0C0, #C0C0C0, #C0C0C0, #808080 ); }
	div#carousel div.carousel_item img																	{ width: 100%; height: 100%; }
	div#carousel div.carousel_item p.carousel_heading													{ position: absolute; top: 0; left: 9%; border: 4px solid #111; border-radius: 15px; background-color: #777; padding: 0 5px 1px 5px; color: #000; margin: 15px; font-size: 180%; }
	div#carousel div.carousel_item p.carousel_text														{ position: absolute; bottom: 10px; right: 10px; border: 1px solid #111; border-radius: 15px; background-color: #777; padding: 0 5px 1px 5px; color: #000; margin: 5px; font-size: 100%; }
		div#carousel div.carousel_item p.carousel_text a, 
		div#carousel div.carousel_item p.carousel_text a:visited										{ color: revert; }

/****** Miscellany ******/
main#mainblock > h1																						{ margin-top: 0; margin-bottom: 0; text-align: center; font-family: "JohnnyFever", "Garamond", serif; position: sticky; top: 0; letter-spacing: .2rem; font-size: 3rem; color: #fff; color: var(--page-theme-color); }
	body.sandbox main#mainblock > h1																	{ background-image: var(--sandbox-background-image); -webkit-text-stroke: 0.1px black;}
h2 + div																								{ margin-top: 5px; }
p																										{ margin-top: 0; }
	p.fineprint																							{ margin: 0; }
progress																								{ height: 25px; -webkit-appearance: progress-bar; /*accent-color: #ddd; accent-color: var(--page-theme-color);*/ }
progress::-webkit-progress-bar, progress::-moz-progress-bar												{ background-color: var(--page-theme-color); }
progress::-webkit-progress-value																		{ background-color: #4caf50; }

.spoilerblock																							{ filter: blur(20px); }
	.spoilerblock:hover																					{ filter: blur(0px); transition: all 0.3s ease; }
	.spoilerblock a																						{ pointer-events: none; }
		.spoilerblock a:hover, .spoilerblock a:visited, .spoilerblock a:visited:hover.spoilerblock a:link:hover
																										{ pointer-events: unset; }
.alertlabel																								{ border-radius: 15px; border: 1px solid black; padding: 0 10px; white-space: nowrap; background-color: #fff; background-color: var(--page-theme-color); }
img.swellimage																							{ transition: all 0.3s ease-in-out; position: relative; width: 100%; }
	img.swellimage:hover																				{ transform: scale(1.4); z-index: 1; }
div.warning, dd.warning, span.warning																	{ margin-right: 5px; padding: 5px 10px; border-radius: 15px; border: 1px solid black; border-color: var(--page-border-color); }
span.errormessage, dd.errormessage, span.successmessage, dd.successmessage, span.warningmessage, dd.warningmessage
																										{ padding: 5px 0 5px 10px; }
	span.errormessage::before, dd.errormessage::before, span.successmessage::before, dd.successmessage::before, span.warningmessage::before, dd.warningmessage::before
																										{ position: relative; top: 3px; left: -10px; }
	span.errormessage::before, dd.errormessage::before													{ content: var(--error-background-image); }
	span.successmessage::before, dd.successmessage::before												{ content: var(--success-background-image); }
	span.warningmessage::before, dd.warningmessage::before												{ content: var(--warning-background-image); }
.clearall																								{ clear: both; padding-top: 10px; }
.object_hcentered																						{ position: relative; left: 50%; transform: translate(-50%); }
.object_vcentered																						{ position: relative; top: 50%; transform: translate(-50%); }
.alignment_centered																						{ text-align: center; }
.alignment_justified																					{ text-align: justify; }
.alignment_right																						{ text-align: right; }
.alignment_left																							{ text-align: left; }
.alignment_top																							{ vertical-align: top; }
.alignment_bottom																						{ vertical-align: bottom; }
.signoff																								{ font-size: 80%; padding-top: 10px; }
div.flexspan																							{ display: flex; flex-direction: row; justify-content: space-between; }
div.gridbox																								{ display: grid; gap: 5px; align-items: stretch; justify-content: space-around; align-content: start; grid-auto-columns: 1fr; grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	div.gridbox.gridspan1																				{ grid-template-columns: 1fr; }
	div.gridbox.gridspan2																				{ grid-template-columns: repeat(2, 1fr); }
	div.gridbox.gridspan3																				{ grid-template-columns: repeat(3, 1fr); }
	div.gridbox.gridspan4																				{ grid-template-columns: repeat(4, 1fr); }
	div.gridbox.gridspan5																				{ grid-template-columns: repeat(5, 1fr); }
	div.gridbox.gridspan6																				{ grid-template-columns: repeat(6, 1fr); }
	div.gridbox.gridspan7																				{ grid-template-columns: repeat(7, 1fr); }
	div.gridbox.gridspan8																				{ grid-template-columns: repeat(8, 1fr); }
	div.gridbox.gridspanX																				{ grid-template-columns: repeat(auto-fill, 1fr); }
	div.gridbox.gridaligncenter																			{ text-align: center; }
	div.gridbox div.griditemspanacrossall																{ grid-column: 1 / -1; }
/* determine if a box spans more than 1 column/row by using grid-column-start/grid-column-end or grid-row-start/grid-row-end
   so a cell that spans from column 2 to 4, use grid-column-start: 2; grid-column-end: 4; or grid-column: 2 / 4; or grid-column: 2 / span 3; */
img.socialmediaicon																						{ width: 23px; height: 23px; }
img.icon																								{ width: 15px; height: 15px; vertical-align: text-bottom; }
.invisible																								{ clip: rect(1px, 1px, 1px, 1px); margin: 0; overflow: hidden; position: fixed; left: 1px; top: 1px; width: 1px; height: 1px; }	/* to hide visually but not from screen readers */
.hidden																									{ display: none !important; }	/* to hide from screen readers and visually */
.slogan																									{ font-style: italic; font-weight: bold; margin-bottom: 15px; color: #000; color: var(--page-word-color); }
.paypalbutton																							{ border-width: 0; padding: 0; }
.eigthlength																							{ width: 12%; }
.quarterlength																							{ width: 24%; }
.halflength																								{ width: 49%; }
.threequarterlength																						{ width: 74%; }
.fulllength																								{ width: 99%; }
/*select.eigthlength																						{ width: 13%; }
select.quarterlength																					{ width: 25%; }
select.halflength																						{ width: 50%; }
select.threequarterlength																				{ width: 75%; }
select.fulllength																						{ width: 100%; }*/
.shallowdepth																							{ height: 4em; }
.deepdepth																								{ height: 20em; }
.smallfont																								{ font-size: small; }
ul.inlinelist																							{ padding-left: 0; margin-top: 0; margin-bottom: 0; line-height: 150%; }
	ul.inlinelist li																					{ display: inline; }
		ul.inlinelist li:not(:first-child)::before														{ font-weight: bold; content: " // "; color: #000; color: var(--page-word-color); }
.margintop0, .margin0																					{ margin-top: 0; }
.marginbottom0, .margin0																				{ margin-bottom: 0; }
.margintop10, .margin10																					{ margin-top: 10px; }
.marginbottom10, .margin10																				{ margin-bottom: 10px; }

/******* Third-party styles *******/
.my-form																								{ margin-bottom: 10px; }
#gallery																								{ margin-top: 10px; }
#gallery img																							{ width: 150px; margin-bottom: 10px; margin-right: 10px; vertical-align: middle; }
.bottom-bar-smashwords, .inner-smashwords, .light-smashwords, .btn-smashwords							{ border-radius: 15px !important; }
.smashwords-widget div[class^="outer"] .inner-smashwords												{ padding-top: 2px; z-index: 0 !important; }
.button																									{ display: inline-block; padding: 10px; background: #ccc; cursor: pointer; border-radius: 5px; border: 1px solid #000000; }
	.button:hover																						{ background: #ddd; }
#fileElem																								{ display: none; }
.material-symbols-outlined																				{ vertical-align: middle; }
div#phpinfo div.center																					{ position: absolute; right: 0; background-color: #000; }
div#phpinfo div.center h2																				{ background-color: #777; margin-bottom: 0; }
div#phpinfo div.center table																			{ margin-top: 0; }