.admin {
	padding: 4px;
	border-radius: 4px;
	background: green;
	margin: 6px;
	width: 200px;
	display: inline-block;
}
.admin.protected {
	background: red;
}
.admin INPUT[type="submit"] {
	width: 100%;
}
.admin.protected INPUT[type="submit"] {
	width: 90%;
}


.bbcode PRE.code {
    background: #DEDEDE;
	font-size: 0.9rem;
}
.bbcode BLOCKQUOTE {
	border: 1px solid black;
	padding: 8px;
	background: #DDD;
}
.bbcode .anchor A.alink {
	visibility: hidden;
}
.bbcode .anchor:hover A.alink {
	visibility: visible;
}


.comment {
	text-align: left;
	position: relative;
	word-wrap: break-word;
}
.comment IMG {
	max-width: 100%;
}
.comment .info {
	visibility: hidden;
	text-align: center;
	padding: 8px;
	background: #DDD;
	border: 1px solid #CCC;
	position: absolute;
	top: 0;
	left: -195px;
	width: 180px;
	z-index: 1;
	box-shadow: 0 0 4px #000;
	border-radius: 4px;
}
.comment:hover .info {
	visibility: visible;
}

.comment_add TEXTAREA {
	width: 100%;
}
.comment_add INPUT {
	width: 100%;
}

#comment-list-list .blockbody,
#comment-list-recent .blockbody,
#comment-list-image .blockbody,
#comment-list-user .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

.command_example {
	margin: 12pt;
	padding-left: 16pt;
}

.command_example pre {
    padding:4pt;
    border: dashed 2px black;
}

.command_example p {
    padding-left: 16pt;
}

@media (min-width: 750px) {
    .command_example pre {
        display: table-cell;
        width: 256px;
    }

    .command_example p {
        display: table-cell;
    }
}

#image-list .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0px;
	padding: 0px;
	text-align: left;
	margin: 0 10px 10px 0;
}
.shm-image-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, calc(var(--thumb-width) + 42px) );
	place-items: center;
}
.shm-image-list .thumb {
	margin-bottom: 8px;
}

.setupblocks {
	column-width: 400px;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	column-break-inside: avoid;
	text-align: center;
	width: 90%;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75rem;
	resize: vertical;
}

#Setupmain .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.setupblock .form {
	width: 100%;
}
.setupblock .form TH {
	font-weight: normal;
}
INPUT, TEXTAREA, SELECT, BUTTON {
	box-sizing: border-box;
	font-size: 1em;
}

TABLE.form {width: 300px;}
TABLE.form.zebra {width: 100%;}

TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TR TD {text-align: left;}
TABLE.form TBODY TR TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TBODY TR.header TD,
TABLE.form TBODY TR.header TH {text-align: center; width: auto;}
TABLE.form TD + TH {padding-left: 8px;}
TABLE.form INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.form SELECT,
TABLE.form TEXTAREA,
TABLE.form BUTTON {width: 100%;}

*[onclick],
H3[class~="shm-toggler"] {
	cursor: pointer;
}

#flash {
	background: #FF7;
	color: #444;
	display: block;
	padding: 8px;
	margin: 8px;
	border: 1px solid #882;
}

.tag {
	overflow-wrap: anywhere;
}
TABLE#large_upload_form.form {
	width: 100%;
}

.mini_upload INPUT {
	width: 100%;
}

TABLE.form.image_info {
	width: 550px;
	max-width: 100%;
}

.image_info .edit {
	display: block;
}
.image_info .view {
	display: none;
}

.image_info.infomode-view .edit {
	display: none;
}
.image_info.infomode-view .view {
	display: block;
}

.image_info TEXTAREA {
	min-width: 100%;
	min-height: 3rem;
}

.post_controls FORM {
	margin-bottom: 0.75em;
}
.post_controls FORM:last-child {
	margin-bottom: 0;
}
div#front-page h1 {font-size: 4rem; margin-top: 2em; margin-bottom: 0; text-align: center; border: none; background: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
div#front-page {text-align:center;}
div#front-page .space {margin-bottom: 1em;}
div#front-page div#links a {display: inline-block; margin: 0 0.5em;}
div#front-page li {list-style-type: none; margin: 0;}
@media (max-width: 800px) {
	div#front-page h1 {font-size: 3rem; margin-top: 0.5em; margin-bottom: 0.5em;}
}
div#front-page > #search > form {margin: 0 auto;}
div#front-page > #search > form > input[type=submit]{padding: 4px 6px;}
#counter {display: grid; justify-content: center; margin: auto; max-width: 66%;}
.counter-img {grid-row: 1; max-width: 100%; height: auto;}
.notes-container {
	position: absolute;
	pointer-events: none;
}

.notes-container .note {
	display: flex;
	justify-content: center;
	align-items: center;	
	color: black;
	background-color: #FFE;
	border: 1px dashed black;
	overflow: hidden;
	position: absolute;
	opacity: 0.5;
	z-index: 1;
	pointer-events: auto;
}
.notes-container .note.editing {
	opacity: 1;
	border: 1px dashed red;
	z-index: 2;
}
.notes-container .note.editing.dragging {
	opacity: 0.5;
	z-index: 2;
}
.notes-container .note:hover {
	opacity: 1;
	z-index: 3;
}

.notes-container .editor {
	display: grid;
	color: black;
	background-color: #EFE;
	border: 1px dashed blue;
	position: absolute;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"text text"
		"save cancel"
		"delete delete";
	z-index: 4;
	pointer-events: auto;
}
.notes-container .editor TEXTAREA {
	grid-area: text;
	// resize: none;
}
.notes-container .editor BUTTON[value="Save"] {
	grid-area: save;
}
.notes-container .editor BUTTON[value="Cancel"] {
	grid-area: cancel;
}
.notes-container .editor BUTTON[value="Delete"] {
	grid-area: delete;
}

#reportedimage .reason {
	max-width: 30em;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
#reportedimage .formstretch INPUT {
	width: 100%;
}
.admin {
	padding: 4px;
	border-radius: 4px;
	background: green;
	margin: 6px;
	width: 200px;
	display: inline-block;
}
.admin.protected {
	background: red;
}
.admin INPUT[type="submit"] {
	width: 100%;
}
.admin.protected INPUT[type="submit"] {
	width: 90%;
}



CODE {
	background: #DEDEDE;
	font-size: 0.8em;
}
BLOCKQUOTE {
	border: 1px solid black;
	padding: 8px;
	background: #DDD;
}
.anchor A.alink {
	visibility: hidden;
}
.anchor:hover A.alink {
	visibility: visible;
}


.comment {
	text-align: left;
	position: relative;
	word-wrap: break-word;
}
.comment IMG {
	max-width: 100%;
}
.comment .info {
	visibility: hidden;
	text-align: center;
	padding: 8px;
	background: #DDD;
	border: 1px solid #CCC;
	position: absolute;
	top: 0;
	left: -195px;
	width: 180px;
	z-index: 1;
	box-shadow: 0 0 4px #000;
	border-radius: 4px;
}
.comment:hover .info {
	visibility: visible;
}

.comment_add TEXTAREA {
	width: 100%;
}
.comment_add INPUT {
	width: 100%;
}

#comment-list-list .blockbody,
#comment-list-recent .blockbody,
#comment-list-image .blockbody,
#comment-list-user .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}

.command_example {
	margin: 12pt;
	padding-left: 16pt;
}

.command_example pre {
    padding:4pt;
    border: dashed 2px black;
}

.command_example p {
    padding-left: 16pt;
}

@media (min-width: 750px) {
    .command_example pre {
        display: table-cell;
        width: 256px;
    }

    .command_example p {
        display: table-cell;
    }
}


/*noinspection CssRedundantUnit*/
#image-list .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0px;
	padding: 0px;
	text-align: left;
	margin: 0 10px 10px 0;
}

.setupblocks {
	column-width: 400px;
	-moz-column-width: 400px;
	-webkit-column-width: 400px;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	-moz-break-inside: avoid;
	-webkit-break-inside: avoid;
	column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	text-align: center;
	width: 90%;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75em;
	resize: vertical;
}

.helpable {
	border-bottom: 1px dashed gray;
}

.ok {
	background: #AFA;
}
.bad {
	background: #FAA;
}

#Setupmain .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}


ARTICLE SELECT {width: 150px;}
INPUT, TEXTAREA {box-sizing: border-box;}
TD>INPUT[type="button"],
TD>INPUT[type="submit"],
TD>INPUT[type="text"],
TD>INPUT[type="password"],
TD>INPUT[type="email"],
TD>SELECT,
TD>TEXTAREA,
TD>BUTTON {width: 100%;}

TABLE.form {width: 300px;}
TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TD {text-align: left;}
TABLE.form TBODY TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TD + TH {padding-left: 8px;}

*[onclick],
H3[class~="shm-toggler"],
.sortable TH {
	cursor: pointer;
}
IMG {border: none;}
FORM {margin: 0;}
IMG.lazy {display: none;}

#flash {
	background: #FF7;
	display: block;
	padding: 8px;
	margin: 8px;
	border: 1px solid #882;
}

#installer {
	background: #EEE;
	font-family: "Arial", sans-serif;
	font-size: 14px;
	width: 512px;
	margin: 16px auto auto;
	border: 1px solid black;
	border-radius: 16px;
}
#installer P {
	padding: 5px;
}
#installer A {
	text-decoration: none;
}
#installer A:hover {
	text-decoration: underline;
}
#installer H1, #installer H3 {
	background: #DDD;
	text-align: center;
	margin: 0;
	padding: 2px;
}
#installer H1 {
	border-radius: 16px 16px 0 0;
}
#installer H3 {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
#installer TH {
	text-align: right;
}
#installer INPUT,
#installer SELECT {
	width: 100%;
	box-sizing: border-box;
}

/* Only need to change the file/url inputs */
#large_upload_form INPUT.wid {
	width: 100%;
}
#radio_button {
	width: auto;
}
#wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

/* This is needed since the theme style.css forcibly sets vertical align to "top". */
TABLE.vert TD, TABLE.vert TH {vertical-align: middle;}
.mini_upload INPUT {
	width: 100%;
}

.setupblocks {
	column-width: 400px;
	-moz-column-width: 400px;
	-webkit-column-width: 400px;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	-moz-break-inside: avoid;
	-webkit-break-inside: avoid;
	column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	text-align: center;
	width: 90%;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75em;
	resize: vertical;
}

.helpable {
	border-bottom: 1px dashed gray;
}

.ok {
	background: #AFA;
}
.bad {
	background: #FAA;
}

#Setupmain .blockbody {
	background: none;
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
}


.js .image_info .edit {
	display: none;
}
.js .image_info .view {
	display: block;
}

.no-js .image_info .edit {
	display: block;
}
.no-js .image_info .view {
	display: none;
}


.note {
	display: block;

	background-color: #FFE;
	border: 1px dashed black;
	overflow: hidden;
	position: absolute;
	z-index: 0;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.notep {
	display: none;
	color: #412a21;
	background-color: #fffdef;
	border: #412a21 1px solid;
	font-size: 8pt;
	margin-top: 0;
	padding: 2px;
	position: absolute;
	width: 175px;
}

#noteform, #noteEditForm {
	display: none;
	position: absolute;
	width: 250px;
}

#noteform textarea, #noteEditForm textarea {
	width: 100%;
}

/*
 * imgAreaSelect default style
 */

.imgareaselect-border1 {
	background: url(../../../../ext/notes/border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(../../../../ext/notes/border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(../../../../ext/notes/border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(../../../../ext/notes/border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
	opacity: 0.5;
}

.imgareaselect-handle {
    background-color: #fff;
    border: solid 1px #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-outer {
    /*background-color: #000;*/
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.imgareaselect-selection {
}

/* Makes sure the note block is hidden */
section#note_system {
	height: 0;
}
section#note_system > .blockbody {
	padding: 0;
	border: 0;
}

#reportedimage .reason {
	max-width: 30em;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

:root {
    /* Light Mode */
    --primary-color-light: #262b2c;
    --secondary-color-light: #15191a;
    --header-color-light: #1b1f20;
    --text-background-color-light: #1b1f20;
    --element-borders-light: #262b2c;
    
    --normal-text-color-light: #ffffFF;
    --tab-text-color-light: #ffffff;
    --visited-text-color-light: #12c0ff;
    --inverse-text-color-light: #222222;
    
    --textarea-background-color-light: #555555;
    --textarea-background-hover-color-light: #888888;
    --textarea-focused-color-light: #FFFFFF;
    
    --paginator-bar-background-color-light: #303337;
    --paginator-button-background-color-light: #363b3c;

    /* Dark Mode */
    --primary-color-dark: #8C9FAD;
    --secondary-color-dark: #121212;
    --header-color-dark: #FFFFFF;
    --element-borders-dark: #333333;

    /* Initial Theme: Light Mode */
    --primary-color: var(--primary-color-light);
    --secondary-color: var(--secondary-color-light);
    --header-color: var(--header-color-light);
    --text-background-color: var(--footer-color-light);
    --element-borders: var(--element-borders-light);
    
    --normal-text-color: var(--normal-text-color-light);
    --tab-text-color: var(--tab-text-color-light);
    --visited-text-color: var(--visited-text-color-light);
    --inverse-text-color: var(--inverse-text-color-light);
    
    --textarea-background-color: var(--textarea-background-color-light);
    --textarea-background-hover-color: var(--textarea-background-hover-color-light);
    --textarea-focused-color: var(--textarea-focused-color-light);
    --paginator-bar-background-color: var(--paginator-bar-background-color-light);
    --paginator-button-background-color: var(--paginator-button-background-color-light);
}

BODY {
    background: var(--secondary-color);
    color: var(--normal-text-color); /* Dark color for light theme, light color for dark theme */
    font-family: sans-serif;
    font-size: 14px;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

BODY.dark-mode {
    --primary-color: var(--primary-color-dark);
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --header-color: var(--header-color-dark);
    --text-background-color: var(--footer-color-dark);
    --element-borders: var(--element-borders-dark);
    
    --normal-text-color: var(--normal-text-color-dark);
    --tab-text-color: var(--tab-text-color-dark);
    --visited-text-color: var(--visited-text-color-dark);
    --inverse-text-color: var(--inverse-text-color-dark);
    
    --textarea-background-color: var(--textarea-background-color-dark);
    --textarea-background-hover-color: var(--textarea-background-hover-color-dark);
    --textarea-focused-color: var(--textarea-focused-color-dark);
    
    --paginator-bar-background-color: var(--paginator-bar-background-color-dark);
    --paginator-button-background-color: var(--paginator-button-background-color-dark);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  3                            menu bar                            *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.menu {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: var(--header-color);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.menu b {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 18px;
}

.menu a.tab,
.menu a.tab:visited {
    font-weight: bold;
    color: var(--tab-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu a.tab:hover,.menu a.tab:active {
    background-color: var(--secondary-color);
    color: var(--tab-text-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tab-selected {
    background-color: var(--secondary-color);
    color: var(--tab-text-color);
    text-decoration: none;
    transition: background-color 0.3s ease;

    border: 2px solid var(--secondary-color);
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    border-radius: 5px;
}

.menu .tab,
.menu .tab-selected,
.menu .tframe,
#tips {
    border-radius: 4px;
    border: 1px solid var(--element-borders);
    padding: 6px;
    margin-right: 8px;
    cursor: pointer;
    break-inside: avoid;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.menu .tframe {
    margin: 4px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  3                        secondary bars                          *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* General Styles */
.sbar {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust this value for desired spacing */
    border: 1px solid var(--element-borders);
    margin: 0;
    padding: 8px;
    background: var(--primary-color);
    font-size: 85%;
    border-radius: 4px;
}

.sbar > *:last-child {
    margin-right: 0; /* Reset margin for the last item */
}

.sbar:last-child {
    border-bottom: none;
    text-align: left;
}

.sfoot {
    border-top: none;
    text-align: center;
}

.shm-image-list {
    margin-top: 10px;
}

.navside, #comment-list-recent .blockbody, .lazy {
    background: var(--primary-color);
    padding: 8px;
    border: 1px solid var(--element-borders);
    margin: 10px 0;
    border-radius: 4px;
    font-size: 85%;
}

.navside.navtop, .shm-image-list, #Statsmain {
    text-align: left;
}

/* Top Navigation */
.navtop, .maintop {
    font-size: 110%;
    margin: 10px 0;
    padding: 10px;
    position: relative;
    width: 50%;
}

.navtop {
    top: 12px;
}

/* Specific Elements */
#tips, #blotter1, #blotter2 {
    margin: 0 16px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  3                  things common to all pages                    *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
H1 A {
    color: var(--normal-text-color);
}
A,
A:hover,
A:active,
A:visited {
    color: var(--visited-text-color);
}
H3 {
    text-align: left;
    margin: 0;
}
THEAD {
    font-weight: bold;
}
TD {
    vertical-align: baseline;
    text-align: left;
}
CODE {
    background: #dedede;
    font-size: 0.8em;
}
#subtitle {
    width: 256px;
    font-size: 0.75em;
    margin: -16px auto auto;
    text-align: center;
    border: 1px solid black;
    border-top: none;
    background: #ddd;
}

TABLE.zebra {
    border-collapse: collapse;
    border: 2px solid var(--element-borders);
    width: 100%;
}

TABLE.zebra TD,
TABLE.zebra TH {
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

TABLE.zebra THEAD TD,
TABLE.zebra THEAD TH {
    border-bottom: 2px solid var(--element-borders);
    background-color: var(--primary-color);
    color: white;
}

TABLE.zebra TFOOT TD,
TABLE.zebra TFOOT TH {
    border-top: 2px solid var(--element-borders);
    background-color: var(--primary-color);
    color: white;
}

TABLE.zebra TR:nth-child(odd) {
    background-color: var(--primary-color);
    color: white;
}

TABLE.zebra TR:nth-child(even) {
    background-color: var(--secondary-color);
}
TABLE.image_info {
    margin: auto;
    width: 100%;
}

TABLE.image_info TD {
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}
TABLE.tag_list {
    border-collapse: collapse;
    width: 100%;
}

TABLE.tag_list TBODY TD {
    padding: 4px;
    line-height: 1.2;
}

TABLE.tag_list > THEAD {
    display: none;
}

TABLE.tag_list TBODY TD:after {
    content: " ";
}

TABLE.form {width: 300px;}
TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TD {text-align: left;}
TABLE.form TBODY TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TD + TH {padding-left: 8px;}

FORM {
    margin: 0;
    color: var(--normal-text-color);
}

large_upload_form INPUT.wid {
	width: 100%;
}

INPUT,BUTTON,TEXTAREA {
    background-color: var(--textarea-background-color);
    border-radius: 4px;
    border: 1px solid var(--element-borders);
    cursor: pointer;
    margin-right: 12px; /* Adjusted margin */
    padding: 8px;
    margin-top: 2px;
    transition: background-color 0.3s, text-decoration 0.3s;
    color: var(--normal-text-color);
}

.form {
    color: var(--normal-text-color) !important;
}

INPUT[type=text]:focus, TEXTAREA:focus {
    background-color: var(--textarea-focused-color) !important;
    color: var(--inverse-text-color) !important;
}

INPUT[type=file] {
    color: var(--normal-text-color) !important;
}

INPUT[type=submit] {
    color: var(--normal-text-color);
    background-color: var(--secondary-color);
    border-radius: 4px;
    border: 1px solid var(--element-borders);
    cursor: pointer;
    margin-right: 12px; /* Adjusted margin */
    padding: 8px;
    margin-top: 4px;
    transition: background-color 0.3s, text-decoration 0.3s;
}

INPUT:hover,
button:hover,
TEXTAREA:hover {
    background-color: var(--textarea-background-hover-color);
    text-decoration: underline wavy;
}

FOOTER {
    clear: both;
    padding: 8px;
    font-size: 0.7em;
    text-align: center;
    border-top: 1px solid var(--element-borders);
    background: var(--text-background-color);
}

A {
    text-decoration: none;
}
A:hover {
    text-decoration: underline;
}

BLOCKQUOTE {
    border: 1px solid var(--element-borders);
    padding: 8px;
    background: var(--text-background-color);
}

UL {
    text-align: left;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *             the navigation bar, and all its blocks             *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

NAV {
    width: 200px;
    float: left;
    text-align: center;
    margin-left: px;
}
NAV .blockbody {
    font-size: 0.85em;
    text-align: center;
}
NAV TABLE {
    width: 190px;
}
NAV TD {
    vertical-align: baseline;
}
NAV INPUT,
nav button {
    width: 95%;
    padding: 0;
}
NAV SELECT {
    width: 100%;
    padding: 0;
}

.command_example {
    margin: 12pt;
    padding: 16pt;
    display: flex;
    flex-direction: column;
}
  
.command_example pre {
    padding: 8pt;
    border: 3px dashed var(--secondary-color);
    flex: 1;
    min-width: 256px;
}
  
.command_example p {
    padding-left: 16pt;
    align-self: center;
}
  
@media (min-width: 750px) {
    .command_example {
        flex-direction: row;
    }
  
    .command_example pre {
        flex: none;
        width: 256px;
        min-width: auto;
    }
}

#comments P {
    text-align: left;
    width: 150px;
    max-width: 150px;
    overflow: scroll;
}

.comment {
    text-align: left;
    position: relative;
    word-wrap: break-word;
    margin-bottom: 5px;
    padding: 8px;
    border: 1px solid var(--element-borders);
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.comment img {
    max-width: 100%;
}

.comment .info {
    display: none;
    text-align: center;
    padding: 8px;
    background: var(--header-color);
    border: 1px solid var(--element-borders);
    position: absolute;
    top: -0px;
    right: -8px;
    width: 180px;
    z-index: 1;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.comment:hover .info {
    display: block;
}

.more:after {
    content: " >>>";
}

.tag_count:before {
    content: "(";
}
.tag_count:after {
    content: ")";
}

.paginator {
	padding: 4px;
    
    background-color: var(--paginator-bar-background-color)
}

.paginator A {
    background-color: var(--paginator-button-background-color);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: var(--tab-text-color);
	border: 2px solid var(--element-borders);
	cursor: default;
	margin-right: 2px;
    margin-left: 2px;
	padding: 2px;
}

.paginator A:hover {
	background-color: var(--primary-color);
	text-decoration: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *                 the main part of each page                     *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ARTICLE {
    margin-left: 226px;
    margin-right: 16px;
    text-align: left;
    height: 1%;
}
ARTICLE.body_noleft {
    margin-left: 4px;
    margin-right: 16px;
    margin-bottom: 16px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
    height: 1%;
}
ARTICLE TABLE {
    width: 90%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *                     specific page types                        *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#pagelist {
    margin-top: 32px;
}

.setupblock {
    text-align: center;
    width: 350px;
}
.setupblock TEXTAREA {
    width: 300px;
    font-size: 0.75em;
}

.helpable {
    border-bottom: 1px dashed gray;
}

.ok {
    background: #afa;
}
.bad {
    background: #faa;
}

NAV .thumbblock {
    float: none;
    height: auto;
}
NAV .thumb {
    margin-bottom: 0;
}
.shm-thumb {
    width: 200px;
    display: inline-block;
}
.thumb {
    display: inline-block;
    text-align: center;
    margin-bottom: 32px;
}

.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .sidebar {
        display: none;
    }
}

.shm-main-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*# sourceMappingURL=ccaa.1751583884.4ebb546dfe1b0076669aac2f5ff2c50e.css.map */