ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / sudairsocs / www / forum / Themes / Reseller_v2.0.4 / css / custom

dl, dd, dt, ol, ul, p, legend {
	margin: 0;
	padding: 0;
}
dt {
	font-weight: 400;
}
legend {
	float: none;
}

/** Compat Fixes **/
.sceditor-button div {
	background-image: url("../../images/icons/editor_sprite.png");
}
.sceditor-container {
	width: 100% !important;
}
.sy-box.sy-loading {
	background-image: url(../../images/loading_sm.gif);
}
.errorbox::before, .noticebox::before, .infobox::before {
	background-image: url(../../images/icons/main_icons_sprite.png);
}
@media (hover) {
	.top_menu.scroll .body {
		max-height: var(--topmenu-height);
		overflow: auto;
	}
}
.popup_heading {
	display: block;
}
#view_package .bg, #view_package .bg:is(.odd) {
	background: var(--window-bg);
	border-color: var(--window-border-color);
	border-radius: var(--window-border-radius);
	border-style: var(--window-border-style);
	border-width: var(--window-border-width);
	box-shadow: var(--window-box-shadow);
	color: var(--window-color);
	padding-block: var(--window-padding-block);
	padding-inline: var(--window-padding-inline);
	margin-block: var(--window-margin-block);
	margin-inline: var(--window-margin-inline);
	overflow: auto;
}
#view_package .bg:nth-child(even of .bg), #view_package .bg:is(.even) {
	background: var(--window-even-bg)
}
#view_package .bg:hover {
	background: var(--window-bg_hover);
}
#view_package .bg:is(:nth-of-type(even), .even):hover {
	background: var(--window-even-bg_hover);
}
.search_order {
	padding: .75em 0 0;
}
/** Login Popup **/
#frmLogin {
	display: grid;
	gap: 1em;

dl {
		display: grid;
		gap: 1em .5em;
		grid-template-columns: 1fr 1fr;

dt {
			font-weight: 700;
			text-align: end;
		}
	}
	p {
		margin-inline: auto;
		text-align: center;
	}
}

/** Settings **/
dl.settings + :is(button, .button) {
	display: flex;
	margin-block: 2em 0;
	margin-inline: auto;
}
.calendar_top {
	gap: .75em;
}
/** End of Compat Fixes **/

/** Theme Settings **/
#st_settings_tabs {
	ul {
		align-items: center;
		display: flex;
		margin: 0;
		padding: .5em 0;
		user-select: none;

li {
			width: auto !important;
		}
		& + .windowbg > div[role="tabpanel"]:not(.active) {
			display: none;
		}
	}
	#settingtype-information {
		--window-border-width: 2px 4px;

&.active ~ input[type="submit"] {
			display: none;
		}
	}
}

/** Theme Information **/
.st-theme-information {
	align-items: flex-start;
	display: grid;
	font-size: .9em;
	grid-template-columns: 1fr 1.5fr;
	gap: .75em;
	padding: .75em .75em .25em;

h4 {
		font-size: 1.3em;
		padding-inline-start: 48px;
	}
	.block {
		display: grid;
		gap: .5em;
		position: relative;
	}
	.block-content {
		align-items: center;
		display: grid;
		gap: .25em;
		grid-template-columns: auto 1fr;
		margin-inline-start: 48px;

.details {
			border-inline-start-width: 0;
			padding-block: .5em;
			padding-inline-start: 48px;
			transition: all 0.5s ease-in-out;
		}
		.icon {
			align-items: center;
			align-self: center;
			background: var(--window-bg);
			border-color: var(--window-border-color);
			border-style: solid;
			border-radius: 50%;
			border-width: 3px;
			display: flex;
			font-size: 1.3em;
			font-weight: 700;
			height: 64px;
			inset-inline-start: calc(-1.25em + 32px);
			justify-content: center;
			position: absolute;
			text-align: center;
			transition: all 0.2s ease-in-out;
			width: 64px;
			z-index: 2;
		}
		&:is(:hover, :focus-within) {
			background: var(--window-bg_hover);

.icon {
				background-color: var(--window-target-bg);
				color: var(--primary-color-800);
				scale: 1.15;
			}
		}
	}
	@media screen and (max-width: 991px) {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
}

/** Admin Home **/
#admin_content:has(.admin_tabs) > p.information {
	display: none;
}
.admin_areas a:not(.inactive) > * {
	transition-duration: 250ms;
}
@media (hover) {
	.admin_areas a:not(.inactive):hover > .windowbg {
		transition: all ease-in-out 125ms;
		scale: 1.075;
	}
}
@media (prefers-reduced-motion) {
	.admin_areas a:not(.inactive) > * {
		transition: none;
	}
}
.admin_tabs {
	display: grid;
	gap: .2em;
	grid-column: 1/-1;
	grid-template-columns: auto 1fr;
}
.admin_tabs ul {
	flex-direction: column;
	gap: .75em;
	padding-block: 1em;
}
.admin_tabs li {
	max-width: 235px;
	padding: 0;
	width: 100%;
}
.admin_tabs li button {
	justify-content: flex-start;
	width: 100%;
}
.admin_tabs .tab-content {
	height: auto !important;
	max-height: 250px;
}
.admin_tabs .st-theme-information {
	--window-border-width: 0 0 1px;
	--window-box-shadow: none;
	font-size: .85em;
	grid-template-columns: 1fr;
}
.admin_tabs h4 {
	padding-inline-start: 0;
}
.admin_tabs .details {
	padding-inline-start: 32px;
}
@media screen and (max-width: 767px) {
	.admin_tabs {
		grid-template-columns: 1fr;
	}
	.admin_tabs ul {
		flex-direction: row;
		flex-wrap: wrap;
		padding-block: 0;
	}
	.admin_tabs ul ul {
		gap: .25em;
	}
	.admin_tabs li {
		max-width: none;
	}
}

/** Carousel **/
.st_carousel {
	.carousel-indicators {
		gap: .5em;

[data-bs-target] {
			border-bottom: none;
			border-top: none;
			height: auto;
			width: auto;
		}
		a[data-bs-target] {
			aspect-ratio: 1 / 1;
			background: var(--button-bg);
			border-radius: 50%;
			margin: 0;
			width: 15px;

&.active {
				background: var(--button-bg_active);
			}
		}
		span.title {
			display: none;
		}
	}
	.carousel-item,
	.carousel-block {
		height: var(--st-carousel-height);
	}
	.carousel-item {
		background-image: url(../../images/theme/default.png);
		background-position: center;
	}
	.carousel-block {
		align-items: center;
		background: rgba(0, 0, 0, 0.65);
		display: flex;
		justify-content: center;
		text-align: center;

.carousel-caption {
			bottom: 30%;
			color: white;
			position: static;
		}
		h5 {
			color: var(--catbg-color);
			font-size: 2.4em;
			font-weight: bold;
			margin-block-end: 0.5em;
		}
		p {
			font-size: 1.3em;
			padding-block: 0.2em;
		}
		.button {
			margin-block-start: 2em;
		}
	}
	.carousel-control-next span.fa::before {
		content: "\f105";
	}
	.carousel-control-prev span.fa::before {
		content: "\f104";
	}
}
/** Carousel **/

/** Posting Events **/
#post_header + #post_event {
	margin-block: 1em 2em;
}
#post_event .roundframe {
	overflow: auto;
	padding: 12px 12%;
}
#post_event fieldset {
	margin-bottom: 12px;
	padding: 6px 12px;
}
#post_event fieldset:not(:last-child) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 0;
}
#event_time_input {
	display: flex;
	flex-direction: column;
	gap: .5em;
	width: 100%;
}
#event_time_input div {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
#event_time_input label {
	min-width: 125px;
}
#event_time_input label:first-of-type + input {
	flex: 1;
}
#post_event input[type="checkbox"] {
	height: auto;
	vertical-align: initial;
}
#post_event input[type="text"][disabled] {
	color: transparent;
}
#event_options,
#event_time_options {
	display: flex;
	flex-direction: column;
	gap: .75em;
}
.event_option {
	display: flex;
	gap: .5em;
	line-height: 25px;
}
.event_option label {
	min-width: 125px;
}
.event_option label + :is(input:not([type="checkbox"]), select, div) {
	flex: 1;
}
#tz {
	max-width: 100%;
}
#rrule_end {
	white-space: nowrap;
}
.rrule_input.inline_block {
	vertical-align: top;
}
.byday_label,
.bymonth_label,
.bymonthday_label {
	white-space: nowrap;
}
.byday_label span,
.bymonth_label span,
.bymonthday_label span {
	display: inline-block;
}
.bymonth_label span {
	width: 4ch;
}
.bymonthday_label span {
	width: 2ch;
	text-align: center;
}
.bymonthday_label input:disabled + span {
	opacity: 0.5;
}
#event_link_to label,
#topic_link_to label {
	margin-right: 2ch;
	display: inline-block;
}
/** Posting Events **/

/** Navigation **/
[dir="rtl"] .dropdown-item::after {
	rotate: 180deg;
}
@media screen and (max-width: 991px)  {
	.dropdown-item::after {
		rotate: 90deg;
	}
	[dir="rtl"] .dropdown-item::after {
		rotate: -270deg;
	}
}
.dropend .dropdown-menu[data-bs-popper] {
	inset-inline-end: auto;
	inset-inline-start: 100%;
	margin-inline-start: var(--bs-dropdown-spacer);
}
nav > button.collapsed {
	opacity: 1;
}
#genericmenu,
#adm_submenus,
#mainNav {
	.navbar-brand, .navbar-toggler {
		background: none;
		border-width: 0;
		box-shadow: none;
		color: var(--mobilegeneric-color);
		font-size: var(--mobilegeneric-font-size);
		font-weight: var(--mobilegeneric-font-weight);
		gap: 0 .75em;
		padding: .25em 0;
		text-decoration: var(--mobilegeneric-text-decoration);
		text-shadow: var(--mobilegeneric-text-shadow);

&:hover {
			border-width: 0;
			color: var(--mobilegeneric-color_hover);
			font-weight: var(--mobilegeneric-font-weight_hover);
			text-decoration: var(--mobilegeneric-text-decoration_hover);
			text-shadow: var(--mobilegeneric-text-shadow_hover);
		}
		&:is(:focus, :focus-visible, :focus-within) {
			border-width: 0;
			color: var(--mobilegeneric-color_focus);
			font-weight: var(--mobilegeneric-font-weight_focus);
			text-decoration: var(--mobilegeneric-text-decoration_focus);
			text-shadow: var(--mobilegeneric-text-shadow_focus);
		}
	}
	.navbar-brand {
		align-items: center;
		display: inline-flex;
		min-height: var(--st-nav-a1-height);
		padding: 0;
	}
}
#genericmenu, #adm_submenus {
	padding-inline: 1em;
	row-gap: 1em;

@media screen and (max-width: 991px) {
		.navbar-brand {
			display: inline-flex;
		}
	}
}
a.hide_popup {
	font-weight: 900 !important;
	padding-inline: 0;
}
#genericNavbar,
#adm_submenus {
	.navbar-nav {
		align-items: center;
		display: flex;
		gap: .5em;
		user-select: none;
	}
	.nav-item > .nav-link {
		--amt-bg: var(--primary-color-700);
		align-items: center;
		background: var(--dropmenu-a1-bg);
		border-color: var(--dropmenu-a1-border-color);
		border-radius: var(--dropmenu-a1-border-radius);
		border-style: var(--dropmenu-a1-border-style);
		border-width: var(--dropmenu-a1-border-width);
		box-shadow: var(--dropmenu-a1-box-shadow);
		color: var(--dropmenu-a1-color);
		display: flex;
		font-family: var(--dropmenu-a1-font-family);
		font-size: var(--dropmenu-a1-font-size);
		font-weight: var(--dropmenu-a1-font-weight);
		gap: .5em;
		min-height: var(--dropmenu-a1-height);
		padding: .2em .75em;
		text-decoration: var(--dropmenu-a1-text-decoration);
		text-shadow: var(--dropmenu-a1-text-shadow);

&:hover {
			background: var(--dropmenu-a1-bg_hover);
			border-color: var(--dropmenu-a1-border-color_hover);
			border-width: var(--dropmenu-a1-border-width_hover);
			box-shadow: var(--dropmenu-a1-box-shadow_hover);
			color: var(--dropmenu-a1-color_hover);
			font-weight: var(--dropmenu-a1-font-weight_hover);
			text-decoration: var(--dropmenu-a1-text-decoration_hover);
			text-shadow: var(--dropmenu-a1-text-shadow_hover);
		}
		&:focus {
			background: var(--dropmenu-a1-bg_focus);
			border-color: var(--dropmenu-a1-border-color_focus);
			border-width: var(--dropmenu-a1-border-width_focus);
			box-shadow: var(--dropmenu-a1-box-shadow_focus);
			color: var(--dropmenu-a1-color_focus);
			font-weight: var(--dropmenu-a1-font-weight_focus);
			text-decoration: var(--dropmenu-a1-text-decoration_focus);
			text-shadow: var(--dropmenu-a1-text-shadow_focus);
		}
		&:focus-visible {
			outline: var(--dropmenu-a1-outline);
			outline-offset: var(--dropmenu-a1-outline-offset);
		}
		&.active {
			--amt-bg: var(--primary-color-100);
			background: var(--dropmenu-a1-bg_active);
			border-color: var(--dropmenu-a1-border-color_active);
			border-width: var(--dropmenu-a1-border-width_active);
			box-shadow: var(--dropmenu-a1-box-shadow_active);
			color: var(--dropmenu-a1-color_active);
			font-weight: var(--dropmenu-a1-font-weight_active);
			text-decoration: var(--dropmenu-a1-text-decoration_active);
			text-shadow: var(--dropmenu-a1-text-shadow_active);
		}
		&:not(.active) {
			--amt-color: white;
		}
	}
	.dropdown-menu {
		background: var(--dropmenu-child-bg);
		border-color: var(--dropmenu-child-border-color);
		border-radius: var(--dropmenu-child-border-radius);
		border-style: var(--dropmenu-child-border-style);
		border-width: var(--dropmenu-child-border-width);
		box-shadow: var(--dropmenu-child-box-shadow);
		flex-direction: column;
		margin-block: 1px;
		min-width: var(--dropmenu-child-width);
		padding: .25em 0;
		position: absolute;
		transition: all ease-in-out 500ms;
		z-index: 4;

&.show {
			display: flex;
		}
	}
	li > .dropdown-item {
		align-items: center;
		background: var(--dropmenu-an-bg);
		border-color: var(--dropmenu-an-border-color);
		border-radius: var(--dropmenu-an-border-radius);
		border-style: var(--dropmenu-an-border-style);
		border-width: var(--dropmenu-an-border-width);
		color: var(--dropmenu-an-color);
		display: flex;
		font-family: var(--dropmenu-an-font-family);
		font-size: var(--dropmenu-an-font-size);
		font-weight: var(--dropmenu-an-font-weight);
		gap: .2em .5em;
		min-height: var(--dropmenu-an-height);
		padding-block: .2em;
		padding-inline: .75em;
		text-decoration: var(--dropmenu-an-text-decoration);
		text-shadow: var(--dropmenu-an-text-shadow);

&:hover {
			background: var(--dropmenu-an-bg_hover);
			border-color: var(--dropmenu-an-border-color_hover);
			border-width: var(--dropmenu-an-border-width_hover);
			color: var(--dropmenu-an-color_hover);
			font-weight: var(--dropmenu-an-font-weight_hover);
			text-decoration: var(--dropmenu-an-text-decoration_hover);
			text-shadow: var(--dropmenu-an-text-shadow_hover);
		}
		&:focus {
			background: var(--dropmenu-an-bg_focus);
			border-color: var(--dropmenu-an-border-color_focus);
			border-width: var(--dropmenu-an-border-width_focus);
			color: var(--dropmenu-an-color_focus);
			font-weight: var(--dropmenu-an-font-weight_focus);
			text-decoration: var(--dropmenu-an-text-decoration_focus);
			text-shadow: var(--dropmenu-an-text-shadow_focus);
		}
		&:focus-visible {
			outline: var(--dropmenu-an-outline);
			outline-offset: var(--dropmenu-an-outline-offset);
		}
		&:is(.active, .chosen) {
			background: var(--dropmenu-an-bg_active);
			border-color: var(--dropmenu-an-border-color_active);
			border-width: var(--dropmenu-an-border-width_active);
			color: var(--dropmenu-an-color_active);
			font-weight: var(--dropmenu-an-font-weight_active);
			text-decoration: var(--dropmenu-an-text-decoration_active);
			text-shadow: var(--dropmenu-an-text-shadow_active);

&:hover {
				font-weight: var(--dropmenu-an-font-weight_active);
			}
		}
	}
	@media (max-width: 991px) {
		.nav-item {
			width: 100%;
		}
		.dropdown-menu.show {
			position: static;
		}
	}
}
/** Main Nav **/
nav#mainNav {
	background: var(--st-nav-bg);
	border-color: var(--st-nav-border-color);
	border-radius: var(--st-nav-border-radius);
	border-style: var(--st-nav-border-style);
	border-width: var(--st-nav-border-width);
	box-shadow: var(--st-nav-box-shadow);
	padding-block: 0;

.content-wrapper {
		display: grid;
		gap: 1em .25em;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto;

@media screen and (max-width: 991px) {
			padding-inline: 1em;
		}
	}

ul.navbar-nav {
		gap: 0;
	}
	li > a {
		align-items: center;
		background: var(--st-nav-a1-bg);
		border-color: var(--st-nav-a1-border-color);
		border-radius: var(--st-nav-a1-border-radius);
		border-style: var(--st-nav-a1-border-style);
		border-width: var(--st-nav-a1-border-width);
		box-shadow: var(--st-nav-a1-box-shadow);
		color: var(--st-nav-a1-color);
		display: flex;
		font-family: var(--st-nav-a1-font-family);
		font-size: var(--st-nav-a1-font-size);
		font-weight: var(--st-nav-a1-font-weight);
		gap: .5em;
		min-height: var(--st-nav-a1-height);
		padding: .25em 1.25em;
		text-decoration: var(--st-nav-a1-text-decoration);
		text-shadow: var(--st-nav-a1-text-shadow);

&:hover {
			background: var(--st-nav-a1-bg_hover);
			border-color: var(--st-nav-a1-border-color_hover);
			border-width: var(--st-nav-a1-border-width_hover);
			box-shadow: var(--st-nav-a1-box-shadow_hover);
			color: var(--st-nav-a1-color_hover);
			font-weight: var(--st-nav-a1-font-weight_hover);
			text-decoration: var(--st-nav-a1-text-decoration_hover);
			text-shadow: var(--st-nav-a1-text-shadow_hover);
		}
		&:focus {
			background: var(--st-nav-a1-bg_focus);
			border-color: var(--st-nav-a1-border-color_focus);
			border-width: var(--st-nav-a1-border-width_focus);
			box-shadow: var(--st-nav-a1-box-shadow_focus);
			color: var(--st-nav-a1-color_focus);
			font-weight: var(--st-nav-a1-font-weight_focus);
			text-decoration: var(--st-nav-a1-text-decoration_focus);
			text-shadow: var(--st-nav-a1-text-shadow_focus);
		}
		&:focus-visible {
			outline: var(--st-nav-a1-outline);
			outline-offset: var(--st-nav-a1-outline-offset);
		}
		&.active {
			background: var(--st-nav-a1-bg_active);
			color: var(--st-nav-a1-color_active);
			font-weight: var(--st-nav-a1-font-weight_active);
			text-decoration: var(--st-nav-a1-text-decoration_active);
			text-shadow: var(--st-nav-a1-text-shadow_active);
		}
	}
	li > .dropdown-menu {
		--bs-dropdown-spacer: 1px;
		background: var(--st-nav-dropdown-bg);
		border-color: var(--st-nav-dropdown-border-color);
		border-radius: var(--st-nav-dropdown-border-radius);
		border-style: var(--st-nav-dropdown-border-style);
		border-width: var(--st-nav-dropdown-border-width);
		box-shadow: var(--st-nav-dropdown-box-shadow);
		min-width: var(--st-nav-dropdown-width);
		padding: .25em 0;
		transition: all ease-in-out 500ms;
		z-index: 4;

a {
			background: var(--st-nav-an-bg);
			border-color: var(--st-nav-an-border-color);
			border-radius: var(--st-nav-an-border-radius);
			border-style: var(--st-nav-an-border-style);
			border-width: var(--st-nav-an-border-width);
			color: var(--st-nav-an-color);
			font-family: var(--st-nav-an-font-family);
			font-size: var(--st-nav-an-font-size);
			font-weight: var(--st-nav-an-font-weight);
			min-height: var(--st-nav-an-height);
			text-decoration: var(--st-nav-an-text-decoration);
			text-shadow: var(--st-nav-an-text-shadow);

&:hover {
				background: var(--st-nav-an-bg_hover);
				border-color: var(--st-nav-an-border-color_hover);
				color: var(--st-nav-an-color_hover);
				font-weight: var(--st-nav-an-font-weight_hover);
				text-decoration: var(--st-nav-an-text-decoration_hover);
				text-shadow: var(--st-nav-an-text-shadow_hover);
			}
			&:focus {
				background: var(--st-nav-an-bg_focus);
				border-color: var(--st-nav-an-border-color_focus);
				color: var(--st-nav-an-color_focus);
				font-weight: var(--st-nav-an-font-weight_focus);
				text-decoration: var(--st-nav-an-text-decoration_focus);
				text-shadow: var(--st-nav-an-text-shadow_focus);
			}
			&:focus-visible {
				outline: var(--st-nav-an-outline);
				outline-offset: var(--st-nav-an-outline-offset);
			}
			&.active {
				background: var(--st-nav-an-bg_active);
				color: var(--st-nav-an-color_active);
				font-weight: var(--st-nav-an-font-weight_active);
				text-decoration: var(--st-nav-an-text-decoration_active);
				text-shadow: var(--st-nav-an-text-shadow_active);
			}
		
		}
	}
	@media screen and (max-width: 720px) {
		padding-inline: .75em;
	}
}

/** Buttonlist **/
.pagesection .buttonlist {
	align-items: center;

@media screen and (max-width: 720px) {
		display: inline-flex;

li {
			width: auto;
		}
	}
}
.pagesection .mobile_buttons {
	display: none;
}
.buttonlist > li > :is(a, button) {
	display: inline-flex;
	gap: .5em;
	height: 100%;
	padding-block: 0;
	white-space: nowrap;

& ~ .top_menu .title_bar {
		width: 100%;
	}
	&.active ~ .top_menu {
		--topmenu-width: 12em;
	}
	& ~ .top_menu li a:has(span.main_icons) {
		align-items: center;
		display: grid;
		grid-template-columns: 1.5em 1fr;

&.active {
			font-weight: 400;
		}
		span.main_icons {
			align-self: center;
			grid-row: 1/3;
			text-align: center;
		}
		span.text-label:not(:has(+ span)) {
			grid-row: 1/3;
		}
	}
	@media screen and (max-width: 767px) {
		& ~ .top_menu {
			--dropmenu-an-height: 4em;
			display: flex;
			font-size: 1.25em;
			inset-block: auto 0;
			inset-inline: 0;
			margin-inline: auto;
			opacity: .75;
			position: fixed;
			transition: all ease-in-out 5000ms;
			visibility: hidden;
			width: 100%;
			z-index: -2;
			.dropmenu {
				width: 100%;
			}
			.dropmenu ul {
				align-content: flex-start;
				flex: 1;
				gap: .5em;
				height: 100%;
				overflow: auto;
				overscroll-behavior: contain;
			}
			.dropmenu ul a {
				padding-block: 1em;
			}
			.viewport {
				background: var(--topmenu-bg);
				height: 100%;
				margin-block-end: -100%;
				max-height: 45dvh;
				overflow: auto;
				position: relative;
				transition: all ease-in-out 350ms;
			}
		}
		& ~ .top_menu.visible {
			align-items: flex-end;
			backdrop-filter: blur(3px);
			background: var(--popup-bg);
			height: 100dvh;
			inset-block: auto 0;
			margin-block: 0;
			opacity: 1;
			transition: none;
			visibility: visible;
			z-index: 4;

.viewport {
				margin-block: 0;
				transition: all ease-in-out 200ms;
			}
		}
	}
	@media screen and (min-width: 768px) {
		& ~ .top_menu .title_bar {
			display: none;
		}
	}
}
.buttonlist > li:has(a ~ button, button ~ button) {
	align-items: center;
	display: inline-flex;
}
.buttonlist > li:has(a ~ button, button ~ button) > a.sub_buttons::after {
	display: none;
}
.buttonlist > li > button:not(:first-child) {
	border-inline-start: none;
	border-end-start-radius: 0;
	border-start-start-radius: 0;
	margin-inline-start: -4px;
	padding-block: 0;
	padding-inline: calc(.75em) .75em;
	position: relative;
}
.buttonlist > li > button:not(:first-child)::before {
	background: var(--buttonlist-link-color_active);
	content: "";
	height: var(--buttonlist-link-height);
	inset-inline-start: 0;
	opacity: .25;
	position: absolute;
	width: 1px;
}
.buttonlist > li > button:not(:first-child):is(:hover, :focus, :focus-visible, :focus-within) {
	background: var(--secondary-color-300);
}
.buttonlist > li > :first-child:has(span.main_icons):not(.w-label) span.text-label,
.buttonlist > li > :first-child:has(span.main_icons):not(.w-label).sub_buttons::after {
	display: none;
}

/** Profile **/
#profileview.st_profile_1 {
	gap: .75em;
	grid-template-columns: 1fr;

#basicinfo {
		background: transparent;
		display: grid;
		gap: 0;
		grid-template-areas: "avatar info additional"
							 "avatar details additional";
		grid-template-columns: auto 1fr auto;
		grid-template-rows: 200px auto;
		padding: 0;
		position: relative;

&:has(.profile_cover) {
			--heading-color: white;

> img.avatar {
				top: calc(200px - 90px);
				z-index: 2;
			}
		}

&:not(:has(.profile_cover)) {
			grid-template-rows: auto auto;

.upper_container {
				background: var(--window-bg);
				border-radius: 0;
				color: var(--heading-color);
			}
		}

> :is(.upper_container, .lower_container, img.avatar) {
			position: relative;
			z-index: 1;
		}
		> img.avatar {
			--avatar-size: 120px;
			align-self: flex-start;
			grid-area: avatar;
		}
		.upper_container {
			align-self: flex-end;
			background: rgba(0, 0, 0, 0.5);
			border-end-start-radius: 35px;
			color: var(--heading-color);
			display: grid;
			grid-area: info;
			grid-column: avatar/additional;
			grid-template-columns: subgrid;
			padding-block: .5em;

& > * {
				padding-inline: 1em;
			}
			& > :not(.icon_fields) {
				grid-column: info;
				text-align: start;
			}
			ul.icon_fields {
				align-self: center;
				grid-area: additional;
				grid-row: 1/3;
				margin: 0;

a {
					color: var(--heading-color);
				}
			}
		}
		.lower_container {
			display: flex;
			gap: .75em;
			grid-area: details;
			grid-column: details/additional;
			padding: .25em 1em;
		}
		.profile_cover {
			background: var(--navigatesection-bg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			border-end-start-radius: 35px;
			grid-column: avatar/additional;
			grid-row: 1;
			height: 100%;
			position: relative;
			width: 100%;

::before {
				background: black;
				content: "";
				display: block;
				height: 100%;
				opacity: .4;
				position: absolute;
				width: 100%;
			}
		}
	}
	#detailedinfo {
		background: var(--window-bg);
		border-color: var(--window-border-color);
		border-radius: var(--window-border-radius);
		border-style: var(--window-border-style);
		border-width: var(--window-border-width);
		box-shadow: var(--window-box-shadow);
	}
}
#profileview.st_profile_2 {
	gap: .5em;
	grid-template-columns: 1fr;

#basicinfo {
		background: var(--window-bg);
		border-color: var(--window-border-color);
		border-radius: var(--window-border-radius);
		border-style: var(--window-border-style);
		border-width: var(--window-border-width);
		box-shadow: var(--window-box-shadow);
		display: grid;
		gap: 0;
		grid-template-areas: "avatar"
							 "info"
							 "details";
		grid-template-columns: 1fr;
		grid-template-rows: 220px auto auto;
		padding: 0;
		position: relative;

&:has(.profile_cover) {
			> img.avatar {
				top: calc(var(--avatar-size) * .5);
			}
		}
		&:not(:has(.profile_cover)) {
			grid-template-rows: auto auto auto;

.upper_container {
				padding-block: 0;
			}
		}
		> :is(.upper_container, .lower_container, img.avatar) {
			position: relative;
			z-index: 1;
		}
		> img.avatar {
			--avatar-size: 100px;
			align-self: flex-end;
			border-color: var(--roundframe-border-color);
			border-style: var(--roundframe-border-style);
			border-width: var(--roundframe-border-width);
			box-shadow: var(--roundframe-box-shadow);
			box-shadow: var(--roundframe-box-shadow);
			grid-area: avatar;
		}
		.upper_container {
			display: grid;
			grid-area: info;
			padding-block: calc(var(--avatar-size) + .5em) 0;

& > * {
				padding-inline: 1em;
				margin: 0;
			}
		}
		.lower_container {
			display: flex;
			gap: .75em;
			grid-area: details;
			justify-content: center;
			padding: .25em 1em;
		}
		.profile_cover {
			background: var(--navigatesection-bg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: var(--window-border-radius);
			border-end-end-radius: 0;
			border-end-start-radius: 0;
			grid-area: avatar;
			height: 100%;
			position: relative;
			width: 100%;

dl {
			border: none;
			margin: 0;
			padding: 0;
			word-break: break-all;
		}
		.signature {
			grid-column: 1/-1;
		}
		@media screen and (max-width: 991px) {
			grid-template-columns: 1fr;
		}
	}
}

/** Member List **/
#mlist {
	display: grid;
	gap: .75em;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

&:not(:has(.block-member)) {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.block-member {
		align-content: flex-start;
		display: grid;
		gap: .25em;
		justify-content: center;
		text-align: center;
	}
}

/** Users Online **/
.online_list {
	--avatar-size: 40px;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: .75em;

.user-online-block {
		align-items: center;
		display: grid;
		gap: .25em;
		grid-template-columns: auto 1fr;
	}
}

/** Navigate Section **/
.navigate_section {
	margin-block-start: 0;
	margin-inline: 0 !important;

ul {
		padding-block: .5em;
	}
	&:has(+ div.content-wrapper > #content_section #display_head) {
		margin-block-end: 0;

li:is(.last, :last-child) > *:not(span.dividers) {
			display: none;
		}
	}
}
.pagesection + .navigate_section > .content-wrapper {
	max-width: 100% !important;
	width: auto !important;
}
#content_section .navigate_section {
	--breadcrumb-bg: var(--information-bg);
	--breadcrumb-border-radius: .25em;
	--navigatesection-border-radius: .25em;
	margin-block: 1.25em;
}

#display_head {
	margin-block-start: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	padding-block-start: .75em;
}

/** Boards **/
.boardindex_table .main_container {
	background: var(--navigatesection-bg);
	border-radius: .2em;
	padding: .5em;

.category_description {
		background: var(--roundframe-bg);
		font-size: .75em;
		padding: .25em .75em;
	}
}
.board_container {
	font-size: .9em;

.board_icon {
		text-align: center;
		padding: 8px 0 0 0;
		width: 60px;
		flex-shrink: 0;

a {
			background: url(../../images/boardicons.png) no-repeat 0 0 / 90px;
			display: inline-block;
			width: 45px;
			height: 45px;

&.board_on {
				background-position: 0 0;
			}
			&.board_on2 {
				background-position: -45px 0;
			}
			&.board_off {
				background-position: -45px -45px;
			}
			&::before {
				display: none;
			}
		}
	}
	&.sboard_off {
		.board_info .subject {
			font-weight: 400;
		}
	}
	.board_children {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: .5em;
	}
	p.moderators {
		padding-block: .25em;

a {
			font-weight: 400;
		}
	}
}
a.moderation_link {
	background: orange;
}

/** Post View **/
.post_container {
	align-items: flex-start;
	column-gap: 3em;

.windowbg,
	.approvebg, .approvebg2 {
		margin: 0;
		position: relative;

&::after,
		&::before {
			background: var(--window-bg);
			content: "";
			height: 30px;
			inset-block: 1.25em auto;
			inset-inline: -10px auto;
			position: absolute;
			transform: skew(50deg, 0);
			width: 50px;
		}
		&::after {
			margin-block-start: 30px;
		}
		&::before {
			transform: skew(-50deg, 0);
		}
		& > * {
			position: relative;
			z-index: 1;
		}
		&.postarea {
			padding: .5em 1em !important;

@media screen and (max-width: 767px) {
				border-start-start-radius: 0;
				border-start-end-radius: 0;
			}
		}
		.keyinfo, .post {
			padding-inline: .75em;

@media screen and (max-width: 767px) {
				padding-inline: 0;
			}
		}
		.moderatorbar:has(> *) {
			padding-block: 1em .25em;
			z-index: 0;
		}
		.under_message {
			z-index: 3;
		}
		@media screen and (max-width: 767px) {
			&::after, &::before {
				display: none;
			}
		}
	}
}
:is(#forumposts, #pmFolder) div:has(> div.post_container) {
	&:not(:first-of-type, :last-of-type) {
		margin-block: 1.25em;
	}
}
:nth-child(even of div) {
	& > .post_container :is(.windowbg, .poster) {
		background: var(--window-even-bg);

&::after,
		&::before {
			background: var(--window-even-bg);
		}
	}
}
*:target .windowbg {
	background: var(--window-target-bg);

&::after,
	&::before {
		background: var(--window-target-bg);
	}
}
.poster {
	border-radius: var(--window-border-radius);

@media screen and (max-width: 767px) {
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}

/** Info Center **/
.info_block {
	grid-template-columns: none;
	grid-auto-flow: row;

.info_block_icon {
		align-items: baseline;
		gap: .5em;
		justify-content: flex-start;
		padding: .5em;
		width: auto;
	
		> span:not(:first-child) {
			font-size: .9em;
		}
	}
}

/** Top Info **/
#top_info > li > a {
	--amt-font-size: .5em;
	--topinfo-font-size: 1em;
	padding: .2em .5em;

&.active.open {
		background: var(--topinfo-bg_focus);
	}
	img.avatar {
		--avatar-size: 30px;
	}
}
#top_info:has(> li:where(.button_signup, .button_login)) {
	--_color-hue: var(--secondary-color-hue);
	--topinfo-bg: var(--secondary-color-400);
	--topinfo-bg_active: var(--primary-color-200);
	--topinfo-border-color: var(--secondary-color-800);
	--topinfo-border-color_active: var(--primary-color-400);
	--topinfo-border-color_focus: transparent;
	--topinfo-border-color_hover: transparent;
	--topinfo-border-radius: .5em;
	--topinfo-border-radius_active: .5em;
	--topinfo-border-radius_focus: .5em;
	--topinfo-border-radius_hover: .5em;
	--topinfo-box-shadow: 0 -3px 0 1px hsl(var(--_color-hue), 35%, 15%, 30%) inset;
	--topinfo-box-shadow_active: 0 0px 5px 1px hsl(var(--_color-hue), 35%, 15%, 25%) inset;
	--topinfo-color: white;
	--topinfo-height: 4em;
	--topinfo-text-shadow: var(--titlebg-text-shadow);
	--topinfo-text-shadow_hover: var(--titlebg-text-shadow);
	--topinfo-text-transform: uppercase;
	gap: .75em;

> li:is(.button_signup) {
		--_color-hue: var(--primary-color-hue);
		--topinfo-bg_focus: var(--primary-color-800);
		--topinfo-box-shadow_focus: var(--topinfo-box-shadow);
		--topinfo-color_focus: white;

> a.open:is(:hover, :focus, :focus-visible) {
			--topinfo-bg_focus: var(--primary-color-600);
		}
	}
	> li:is(.button_login) {
		--topinfo-bg_hover: var(--secondary-color-600);
	}
	li > a {
		padding: .5em 1em;

span.text-label {
			font-size: 1.15em;
		}
	}
}
/** Button **/
.button, a.button, input[type="button"] {
	padding: .5em 1.25em;
}

/** Footer **/
#footer {
	padding-block: 1.75em;

.content-wrapper {
		display: grid;
		gap: 1.25em;
		grid-template-columns: 1fr 1fr;
	}
	.social_icons {
		display: flex;
		flex-wrap: wrap;
		font-size: 1.25em;
		gap: .5em;
		grid-column: 1/3;
		justify-content: center;
		text-align: center;
	}
	ul:where(:not(.copyright)) {
		justify-self: flex-end;
		text-align: end;
	}
	p {
		grid-column: 1/3;
		text-align: center;
	}
	@media screen and (max-width: 767px) {
		.content-wrapper {
			grid-template-columns: 1fr;
			text-align: center;
		}
		ul, p, div {
			grid-column: 1;
			justify-self: center;
			text-align: center;
		}
	}
}

#footer .social_icons a {
	--social-icon-light: 58%;
	align-items: center;
	border-radius: 1em;
	display: flex;
	font-size: 0.9em;
	height: 25px;
	justify-content: center;
	padding: 1em;
	text-decoration: none;
	width: 25px;

&:is(:hover, :focus, :focus-visible) {
		--social-icon-light: 40%;
	}
	&.facebook {
		background-color: hsl(213, 99%, var(--social-icon-light));
	}
	&.twitter {
		background-color: hsl(204, 88%, var(--social-icon-light));
	}
	&.instagram {
		background-color: hsl(326, 57%, var(--social-icon-light))
	}
	&.youtube {
		background-color: hsl(0, 100%, var(--social-icon-light));
	}
	&.tiktok {
		background-color: hsl(178, 90%, var(--social-icon-light));
	}
	&.twitch {
		background-color: hsl(264, 100%, var(--social-icon-light));
	}
	&.discord {
		background-color: hsl(235, 86%, var(--social-icon-light));
	}
	&.steam {
		background-color: hsl(213, 35%, var(--social-icon-light));
	}
	&.github {
		background-color: hsl(0, 0%, var(--social-icon-light));
	}
	&.linkedin {
		background-color: hsl(210, 90%, var(--social-icon-light));
	}
	&.rss {
		background-color: hsl(25, 85%, var(--social-icon-light));
	}
	i {
		color: hsl(0, 0%, 100%)
	}
}

/** Header **/
header#header .content-wrapper {
	@media screen and (max-width: 767px) {
		flex-wrap: wrap;
		padding-inline: 1em;
	}
}

/** Display Head **/
#display_head {
	padding-block: 1.75em;
}

/** News Fader **/
.news_section .sy-box {
	align-items: flex-start;
	grid-template-columns: 1fr auto;
	padding-block: 0;

.sy-list {
		display: flex;

li.sy-slide {
			align-items: flex-start;
			display: flex;
			flex: 1;
			padding-block: .8em;
		}
	}
	.sy-pager {
		flex-direction: column;
		gap: .25em;
		padding-block: .8em;

li {
			transition: all ease-in-out 300ms;
		}
		li.sy-active {
			transition: all ease-in-out 500ms;
			width: calc(var(--newsfader-pager-width) * 2);
		}
	}
}
.news_section {
	grid-template-columns: 1fr;

& > .icon {
		display: none;
	}
}

/** Toggler **/
.toggle_up, .toggle_down {
	align-items: center;
	background: rgba(0, 0, 0, 0.35);
	border-color: transparent;
	border-radius: .25em;
	box-shadow: 0 0 5px -11px rgba(0, 0, 0, 0.65) inset;
	display: flex;
	padding: .5em .2em;
	position: relative;

&::after, &::before {
		background: var(--toggle-bg);
		border-color: var(--toggle-border-color);
		border-radius: var(--toggle-border-radius);
		border-style: var(--toggle-border-style);
		border-width: var(--toggle-border-width);
		box-shadow: var(--toggle-box-shadow);
		content: "";
		display: inline-block;
		height: var(--toggle-height);
		margin-inline: .2em;
		overflow: hidden;
		transition: background-color 0.25s;
		vertical-align: middle;
		width: var(--toggle-width);
	}
	&:is(:hover, :focus, :focus-visible) {
		background: rgba(0, 0, 0, 0.65);

&::after, &::before {
			background: var(--toggle-bg_hover);
			box-shadow: var(--toggle-box-shadow);
		}
	}
	&:not(.toggle_down)::after {
		display: none;
	}
	&:is(.toggle_down)::after {
		height: var(--toggle-width);
		inset: auto 0;
		margin-inline: auto;
		position: absolute;
		width: var(--toggle-height);
	}

&#postMoreExpandLink {
		--toggle-bg: var(--primary-color-700);
		--toggle-bg_hover: var(--primary-color-900);
		background: var(--primary-color-50);
		border-radius: .5em;
		display: flex;
		gap: .5em;
		padding-inline: .75em;

&:is(.toggle_down)::after {
			margin-inline-start: calc(var(--toggle-width) * .75);
			inset: auto;
		}
		+ span {
			display: none;
		}
	}
}

.nextlinks {
	font-size: .9em;
	justify-content: flex-start;
	padding-block-start: .75em;
}

/** Recent Posts **/
#ic_recentposts {
	--avatar-size: 25px;

tr {
		--window-border-radius: 0;
		--window-border-width: 0 0 1px;
		--window-margin-block: 0;
		--window-padding-block: 0;
		display: grid;
		grid-template-columns: 35% 20% 20% 25%;

&.windowbg:first-of-type {
			--window-border-width: 1px 0 1px;
		}
		& > :is(th, td) {
			align-items: center;
			display: flex;
			gap: .5em;
			width: auto !important;
		}
	}

@media screen and (max-width: 991px) {
		tr {
			grid-template-columns: 40% 25% 35%;

& > .recentboard {
				display: none;
			}
		}
	}
	@media screen and (max-width: 767px) {
		tr {
			grid-template-columns: 50% 50%;

& > .recenttime {
				display: none;
			}
		}
	}
}

[+] ..
[-] theme_responsive.css [edit]
[-] theme_colors.css [edit]
[-] all.min.css [edit]
[-] animate.min.css [edit]
[-] icons.css [edit]
[-] index.php [edit]
[-] bootstrap.min.css [edit]
[-] app.css [edit]
[-] coloris.css [edit]