/* Any changes to this file will be overwritten. To change the content of this file, edit the source files from which it was compiled. */ @import url(https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=DynaPuff:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Unkempt:wght@400;700&display=swap);@keyframes wiggle{0%{transform:rotate(5deg)}30%{transform:rotate(11deg)}60%{transform:rotate(-1deg)}100%{transform:rotate(5deg)}}:root{--perm-read-bg-color:hsl(101, 78%, 86%);--perm-writable-bg-color:hsl(0, 100%, 87%);--perm-execute-bg-color:hsl(31, 95%, 84%);--perm-custom-bg-color:hsl(100, 5%, 76%);--perm-no-change-bg-color:hsl(99, 24%, 23%);--perm-groups-bg-color:hsl(0, 0%, 100%);--manage-boards-li-recycle-board-bg-color:hsl(180, 33%, 98%);--manage-boards-li-redirect-board-bg-color:hsl(60, 33%, 98%);--move-smileys-link-hover-img-border-color:hsl(208, 44%, 61%);--move-smileys-selected-item-border-color:hsl(39, 100%, 59%);--stripes-even-bg-color:hsl(0, 0%, 5%);--stripes-odd-bg-color:hsl(206, 30%, 5%);--alternative-bg-color:hsl(0, 0%, 5%);--alternative-bg-2-color:hsl(202, 21%, 3%);--ajax-in-progress-bg-color:hsl(0, 0%, 100%);--ajax-in-progress-border-color:hsl(27, 100%, 49%);--ajax-in-progress-border-style:solid;--ajax-in-progress-border-width:4px;--ajax-in-progress-link-color:hsl(39, 100%, 50%);--ajax-in-progress-txt-color:hsl(27, 100%, 49%);--auto-suggest-border-color:var(--border-color);--auto-suggest-border-style:solid;--auto-suggest-border-width:1px;--auto-suggest-border-radius:3px;--auto-suggest-item-bg-color:var(--window-bg-color);--auto-suggest-item-hover-bg-color:var(--window-table-row-bg-hover-color);--auto-suggest-item-hover-txt-color:var(--body-txt-color);--body-bg-color:linear-gradient(180deg, hsl(270, 15%, 87%) 1px, hsl(336, 100%, 97%) 1px);--body-txt-color:hsl(210, 9%, 16%);--body-font-family:"Inter", "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;--body-font-size:100%;--body-line-height:150%;--body-doodle-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'240'%20viewBox%3D'0%200%20240%20240'%3E%0A%20%20%3Crect%20width%3D'240'%20height%3D'240'%20fill%3D'none'%2F%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%0A%20%20%20%20%3Cpath%20d%3D'M12%2030%20Q50%208%2082%2040%20T148%2036'%20stroke%3D'hsl(260%2C65%25%2C65%25)'%20stroke-width%3D'3'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M30%20200%20q40%20-8%2060%2018%20t70%20-6'%20stroke%3D'hsl(48%2C92%25%2C62%25)'%20stroke-width%3D'3'%20opacity%3D'0.7'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M100%20150%20q12%20-18%2028%200%20t32%200'%20stroke%3D'hsl(335%2C71%25%2C61%25)'%20stroke-width%3D'3'%20opacity%3D'0.6'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D'hsl(260%2C65%25%2C65%25)'%20stroke-width%3D'6'%20fill%3D'none'%20stroke-linecap%3D'round'%20transform%3D'rotate(-8%2060%2070)'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'60'%20cy%3D'70'%20r%3D'36'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M60%2034v72M60%2070l-24%2018M60%2070l24%2018'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D'hsl(260%2C65%25%2C65%25)'%20stroke-width%3D'5'%20fill%3D'none'%20stroke-linecap%3D'round'%20transform%3D'rotate(10%20190%2070)'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'190'%20cy%3D'70'%20r%3D'20'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M190%2050v40M190%2070l-14%2012M190%2070l14%2012'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpath%20d%3D'M40%20122c0-12%2010-22%2022-22%206%200%2012%203%2016%208%204-5%2010-8%2016-8%2012%200%2022%2010%2022%2022%200%2017-14%2028-38%2048-24-20-38-31-38-48z'%20fill%3D'hsla(335%2C71%25%2C61%25%2C0.5)'%20stroke%3D'hsl(335%2C71%25%2C61%25)'%20stroke-width%3D'3'%20stroke-linejoin%3D'round'%20transform%3D'rotate(-6%2096%20140)'%2F%3E%0A%20%20%3Cpath%20d%3D'M170%20150l8%2014%2016%202-12%2010%203%2016-15-8-15%208%203-16-12-10%2016-2z'%20fill%3D'hsla(48%2C92%25%2C62%25%2C0.6)'%20stroke%3D'hsl(48%2C92%25%2C62%25)'%20stroke-width%3D'3'%20stroke-linejoin%3D'round'%20transform%3D'rotate(8%20170%20170)'%2F%3E%0A%20%20%3Cpath%20d%3D'M116%20186l7%2010%2012%202-9%208%202%2012-12-6-12%206%202-12-9-8%2012-2z'%20fill%3D'hsla(260%2C65%25%2C65%25%2C0.5)'%20stroke%3D'hsl(260%2C65%25%2C65%25)'%20stroke-width%3D'2.5'%20stroke-linejoin%3D'round'%20transform%3D'rotate(-12%20116%20196)'%2F%3E%0A%20%20%3Cpath%20d%3D'M132%2022%20C150%2012%20178%2012%20200%2026'%20stroke%3D'hsl(260%2C65%25%2C65%25)'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%0A%20%20%3Cg%20fill%3D'hsl(260%2C65%25%2C65%25)'%20opacity%3D'0.25'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'24'%20cy%3D'30'%20r%3D'4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'214'%20cy%3D'130'%20r%3D'4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'92'%20cy%3D'212'%20r%3D'3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'204'%20cy%3D'200'%20r%3D'5'%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");--border-color:hsl(260, 100%, 96%);--border-style:dashed;--border-width:2px;--html-bg-color:linear-gradient(180deg, hsl(270, 15%, 87%) 1px, hsl(336, 100%, 97%) 1px);--heading-font-size:1em;--heading-txt-color:hsl(0, 0%, 1%);--highlight-txt-color:hsl(27, 100%, 50%) !important;--horizontal-rule-bg-color:hsl(225, 62%, 30%);--horizontal-rule-box-shadow:0 1px 0 hsl(225, 62%, 10%) inset;--info-link:hsl(192, 100%, 22%);--link:hsl(192, 100%, 22%);--link-hover:hsl(192, 100%, 25%);--moderation-link-bg-color:hsl(0, 100%, 30%);--moderation-link-border-radius:50%;--strong-txt-color:hsl(0, 0%, 10%);--option-bg-hover-color:hsl(130, 36%, 91%);--wrapper-bg-color:hsl(0, 0%, 100%, 0.3);--wrapper-border-color:hsl(0, 0%, 0%);--wrapper-border-style:solid;--wrapper-border-width:1px;--wrapper-border-radius:9px;--wrapper-box-shadow:0px 0px 5px 0px hsl(0, 0%, 0%)inset;--inner-section-bg-color:transparent;--inner-wrap-bg-color:hsl(0, 0%, 100%);--inner-wrap-border-color:hsl(0, 0%, 73%);--inner-wrap-border-style:solid;--inner-wrap-border-width:1px;--checkbox-and-radio-bg-color:hue-rotate(96deg);--selection-bg-color:hsl(224, 65%, 40%);--selection-txt-color:hsl(224, 100%, 100%);--focus-outline-color:hsl(260, 65%, 65%);--placeholder-txt-color:hsl(0, 0%, 40%);--breadcrumb-bg-color:hsl(228, 16%, 100%);--breadcrumb-border-color:hsl(260, 100%, 96%);--breadcrumb-border-style:dashed;--breadcrumb-border-width:2px;--breadcrumb-border-radius:22px;--breadcrumb-box-shadow:0px 0px 1px 1px hsl(210, 22%, 35%)inset;--breadcrumb-font-family:"Comic Neue", "Comic Sans MS", sans-serif;--breadcrumb-font-size:1em;--breadcrumb-divider-color:hsl(0, 0%, 0%);--breadcrumb-divider-font-family:"Comic Neue", "Comic Sans MS", sans-serif;--breadcrumb-divider-font-size:1.5em;--breadcrumb-divider-line-height:150%;--breadcrumb-link-color:hsl(0, 0%, 0%);--breadcrumb-txt-color:hsl(0, 0%, 0%);--button-bg-color:hsl(260, 100%, 96%);--button-bg-hover:hsl(260, 100%, 96%);--button-bg-active:hsl(260, 100%, 96%);--button-bg-focus:hsl(260, 100%, 96%);--button-border-color:hsl(228, 16%, 40%);--button-border-style:solid;--button-border-width:1px;--button-border-radius:13px;--button-box-shadow:3px 4px 0px hsl(211, 67%, 10%);--button-font-size:0.8rem;--button-line-height:2.2em;--button-min-height:calc(2.3em + 0.8rem * (0.8 - 0.85));--button-active-border-color:hsl(228, 16%, 30%);--button-active-border-style:solid;--button-active-border-width:1px;--button-active-font-weight:bold;--button-hover-border-color:hsl(228, 16%, 30%);--button-hover-box-shadow:0px 0px 0 hsl(211, 67%, 10%);--button-txt-color:hsl(0, 0%, 0%);--button-txt-color-active:hsl(0, 0%, 0%);--button-txt-color-hover:hsl(0, 0%, 0%);--button-txt-color-focus:hsl(0, 0%, 0%);--button-txt-color-active-and-focus:hsl(0, 0%, 0%);--button-txt-color-hover-and-focus:hsl(0, 0%, 0%);--button-txt-shadow-color:hsl(0, 0%, 100%);--forum-title-link-color:hsl(274, 25%, 1%);--forum-title-font-size:1.5em;--forum-title-font-family:"Unkempt", sans-serif;--forum-title-txt-shadow:0px 1px 1px hsl(189, 25%, 100%);--children-bg-color:hsl(0, 0%, 97%);--children-link-color:hsl(210, 9%, 16%);--news-bg-color:hsl(228, 16%, 57%);--news-left-bg-color:hsl(211, 67%, 10%);--sub-bar-bg-color:hsl(0, 0%, 97%);--sub-bar-link-color:hsl(210, 9%, 16%);--sub-bar-link-txt-shadow:0px 1px 1px hsl(180, 14%, 84%);--up-contain-bg-color:hsl(0, 0%, 100%);--up-contain-border-color:hsl(260, 100%, 96%);--information-bg-color:hsl(0, 0%, 100%);--information-border-color:hsl(260, 100%, 96%);--information-border-style:dashed;--information-border-width:2px;--information-border-radius:0 0 7px 7px;--moderationbuttons-check-focus-box-shadow:0 0 4px hsl(205, 65%, 57%);--cat-bar-bg-color:transparent;--cat-bar-border-radius:6px 6px 0 0;--cat-bar-collapsed-border-radius:6px;--cat-bar-desc-txt-color:hsl(210, 9%, 16%);--cat-bar-link-color:hsl(210, 9%, 16%);--cat-bar-link-txt-shadow:0px 1px 1px hsl(0, 100%, 100%);--cat-bar-strong-txt-color:hsl(0, 0%, 100%);--catbg-cycle-1-bg-color:hsl(22, 95%, 96%);--catbg-cycle-2-bg-color:hsl(260, 100%, 96%);--catbg-cycle-3-bg-color:hsl(155, 90%, 95%);--catbg-box-shadow:2px 3px 0 rgba(0, 0, 0, 0.2);--catbg-ribbon-box-shadow:0 2px 4px rgba(0, 0, 0, 0.18);--hero-section-bg-color:hsl(154, 92%, 95%);--hero-section-button-bg-color:hsl(260, 100%, 96%);--hero-section-button-border-color:hsl(211, 67%, 10%);--hero-section-button-shadow-color:hsl(211, 67%, 10%);--hero-section-button-link-color:hsl(0, 0%, 0%);--hero-section-border-color:hsl(22, 95%, 96%);--hero-section-border-style:dashed;--hero-section-border-width:3px;--hero-section-h2-border-color:hsl(194, 8%, 49%);--hero-section-accent-before-bg-color:hsl(154, 92%, 90%);--hero-section-accent-after-bg-color:hsl(154, 92%, 90%);--info-block-information-bg-color:hsl(228, 16%, 57%);--info-block-icon-bg-color:hsl(204, 24%, 6%);--info-center-container-bg-color:hsl(228, 16%, 57%);--info-center-border-radius:3px;--info-center-box-shadow:0px 2px 0px hsl(210, 11%, 4%);--info-center-block-border-color:hsl(20, 90%, 86%);--info-center-block-bg-color:hsl(20, 90%, 96%);--info-center-title-bar-border-color:hsl(0, 10%, 46%);--roundframe-bg-color:hsl(228, 16%, 100%);--roundframe-border-radius:22px;--roundframe-border-color:hsl(260, 100%, 96%);--info-center-stats-card-bg-color:hsl(336, 100%, 97%);--info-center-stats-card-border-color:hsl(336, 100%, 85%);--upshrink-icon-bg-color:hsl(336, 100%, 50%);--title-bar-bg-color:hsl(20, 90%, 96%);--title-bar-border-radius:0px;--title-bar-link:hsl(20, 25%, 10%);--topic-header-bg-color:hsl(258, 100%, 96%);--title-bar-txt-shadow:0px 1px 1px hsl(20, 100%, 100%);--calendar-today-bg-color:hsl(216, 100%, 97%);--calendar-days-hover-bg-color:hsl(216, 100%, 97%);--calendar-holiday-bg-color:hsl(218, 40%, 95%);--calendar-holiday-bg-hover-color:hsl(218, 40%, 80%);--calendar-event-bg-color:hsl(117, 92%, 92%);--calendar-event-bg-hover-color:hsl(117, 92%, 98%);--calendar-birthday-bg-color:hsl(284, 40%, 95%);--calendar-birthday-bg-hover-color:hsl(284, 40%, 80%);--birthday-txt-color:hsl(284, 90%, 40%);--event-txt-color:hsl(120, 90%, 28%);--event-time-txt-color:hsl(0, 0%, 47%);--holiday-txt-color:hsl(218, 100%, 50%);--warn-moderate-txt-color:hsl(39, 100%, 50%);--warn-watch-txt-color:hsl(120, 100%, 25%);--error-box-bg-color:hsl(0, 100%, 90%);--error-box-border-color:hsl(353, 60%, 50%);--error-box-border-style:solid;--error-box-border-width:2px;--notice-box-bg-color:hsl(50, 100%, 90%);--notice-box-border-color:hsl(48, 100%, 57%);--notice-box-border-style:solid;--notice-box-border-width:1px;--notice-box-txt-color:hsl(0, 0%, 10%);--info-box-bg-color:hsl(120, 100%, 90%);--info-box-border-color:hsl(120, 100%, 25%);--info-box-border-style:solid;--info-box-border-width:1px;--info-box-txt-color:hsl(211, 24%, 3%);--desc-box-border-color:hsl(0, 0%, 77%);--desc-box-border-style:solid;--desc-box-border-width:1px;--errorfile-table-td-bg-color:hsl(0, 0%, 98%);--errorfile-table-current-bg-color:hsl(0, 87%, 88%);--errorfile-table-file-line-bg-color:hsl(99, 24%, 23%);--errorfile-table-file-line-current-bg-color:hsl(0, 93%, 77%);--code-bg-color:hsl(224, 10%, 88%);--code-border-color:hsl(224, 10%, 78%);--code-border-top-color:hsl(0, 0%, 13%);--code-border-bottom-color:hsl(0, 0%, 27%);--code-border-radius:2px;--code-font-size:0.78rem;--code-header-bg-color:hsl(0, 0%, 92%);--code-header-font-size:0.9em;--code-header-txt-color:hsl(0, 0%, 1%);--approve-bg-color:hsl(0, 100%, 6%);--approve-bg-color-2:hsl(0, 100%, 7%);--approve-txt-color:hsl(99, 24%, 23%);--fieldset-legend-txt-color:hsl(36, 16%, 20%);--fieldset-txt-shadow:0px 1px 1px hsl(36, 16%, 100%);--fieldset-border-color:hsl(0, 0%, 3%);--fieldset-border-style:solid;--fieldset-border-width:1px;--fieldset-border-radius:3px;--footer-bg-color:hsl(22, 90%, 96%);--footer-box-shadow:0px 1px 0px 0px hsl(224, 55%, 9%)inset;--footer-border-color:hsl(21, 89%, 86%);--footer-border-style:dashed;--footer-border-width:3px;--footer-copyright-box-shadow:0px -1px 0px hsl(224, 35%, 0%) inset;--footer-copyright-border:1px solid hsl(224, 55%, 9%);--footer-font-size:0.9em;--footer-txt-color:hsl(0, 0%, 0%);--generic-bar-bar-bg-color:hsl(225, 40%, 85%);--generic-bar-bar-box-shadow:0px 0px 1px 1px hsla(0, 0%, 0%, 0.2) inset;--generic-bar-bar-border-radius:1px;--generic-bar-border-color:hsl(0, 0%, 0%);--generic-bar-border-style:solid;--generic-bar-border-width:1px;--generic-bar-border-radius:2px;--generic-bar-bg-color:hsl(225, 40%, 95%);--generic-bar-txt-color:hsl(0, 0%, 5%);--generic-bar-span-txt-shadow:0px 1px 1px hsl(225, 40%, 97%);--generic-bar-vertical-bar-box-shadow:0px 0px 1px 1px hsla(0, 0%, 0%, 0.2) inset;--progress-bar-border-radius:4px;--progress-bar-txt-color:hsl(0, 0%, 5%);--progress-bar-bar-bg-color:hsl(100, 67%, 55%);--progress-bar-bar-bg-image:linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent);--progress-bar-bar-box-shadow:-1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset;--progress-yellow-bar-bg-color:hsl(47, 92%, 54%);--progress-green-bar-bg-color:hsl(100, 67%, 55%);--progress-red-bar-bg-color:hsl(6, 88%, 63%);--progress-blue-bar-bg-color:hsl(191, 76%, 55%);--header-bg-color:hsl(260, 100%, 96%);--header-border-radius:15px 15px 0px 0px;--header-border-color:hsl(155, 90%, 95%);--header-border-style:solid;--header-border-width:1px;--header-box-shadow:0px 0px 5px 0px hsl(0, 0%, 0%) inset;--top-info-border-color:hsl(210, 31%, 42%);--top-info-border-style:solid;--top-info-border-width:1px;--top-info-link-bg-color:transparent;--top-info-link-hover-bg-color:hsl(228, 16%, 57%);--top-info-link-active-bg-color:hsl(228, 16%, 57%);--top-info-link-focus-bg-color:hsl(228, 16%, 57%);--top-info-link-hover-color:hsl(210, 9%, 6%);--top-info-link-color:hsl(210, 9%, 16%);--top-info-link-txt-color:hsl(0, 0%, 0%);--top-info-link-txt-shadow:0px 1px 1px hsl(180, 14%, 100%);--top-info-active-link-color:hsl(0, 0%, 0%);--top-info-hover-link-color:hsl(39, 100%, 50%);--top-info-link-hover-border-color:hsl(154, 92%, 95%);--top-info-link-focus-border-color:hsl(154, 92%, 95%);--top-menu-bg-color:hsl(260, 100%, 96%);--top-menu-box-shadow:none;--top-menu-border-radius:3px;--top-menu-strong-txt-color:hsl(0, 0%, 10%);--top-section-bg-color:hsl(45, 51%, 70%);--top-section-box-shadow:0px -2px 1px 0px hsl(223, 24%, 6%)inset;--top-section-border-color:hsl(210, 23%, 25%);--top-section-border-style:solid;--top-section-border-width:1px;--ibst-txt-color:hsl(0, 0%, 0%);--ibst-bg-color:hsl(336, 100%, 97%);--ibst-box-shadow:2px 3px 0px hsl(0, 0%, 0%);--ibst-border-color:hsl(0, 0%, 0%);--ibst-border-style:solid;--ibst-border-width:2px;--ibst-disabled-bg-color:hsl(336, 20%, 80%);--ibst-disabled-border-color:hsl(0, 0%, 0%);--ibst-disabled-txt-color:hsl(0, 0%, 100%);--ibst-focus-bg-color:hsl(336, 100%, 97%);--ibst-focus-border-color:hsl(0, 0%, 0%);--ibst-font-family:"Inter", "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;--ibst-font-size:1.8em;--ibst-font-line-height:140%;--ibst-hover-bg-color:hsl(154, 92%, 95%);--ibst-hover-border-color:hsl(0, 0%, 0%);--ibst-textarea-hover-bg-color:var(--ibst-hover-bg-color);--errorfile-table-bg-color:hsl(206, 30%, 95%);--errorfile-table-td-current-bg-color:hsla(33, 92%, 51%, 0.2);--errorfile-table-td-current-border-color:hsla(0, 0%, 0%, 0.2);--errorfile-table-td-current-border-style:solid;--errorfile-table-td-current-border-width:1px;--amt-active-bg-color:hsla(0, 0%, 0%, 0.2);--amt-bg-color:hsl(0, 100%, 30%);--amt-border-radius:10px;--amt-txt-color:hsl(0, 0%, 90%);--dropmenu-bg-color:hsl(260, 100%, 96%);--dropmenu-border-color:hsl(180, 15%, 83%);--dropmenu-box-shadow:0px 0px 5px 0px hsl(226, 25%, 10%)inset;--dropmenu-link-box-shadow:0px 0px 5px 0px transparent inset;--dropmenu-hover-bg-color:hsl(154, 92%, 95%);--dropmenu-hover-border-color:hsl(258, 100%, 96%);--dropmenu-link-color:hsl(210, 9%, 16%);--dropmenu-link-hover-color:hsl(210, 9%, 16%);--dropmenu-strong-txt-color:hsl(0, 0%, 10%);--dropmenu-subsections-font-family:Arial, sans-serif;--dropmenu-subsections-font-size:83.33%;--dropmenu-subsections-line-height:150%;--dropmenu-squiggle:url("data:image/svg+xml;utf8,"); --dropmenu-squiggle-size: 28px 8px; --menu-bg-color: hsl(260, 100%, 96%); --menu-border-color: hsl(260, 100%, 90%); --menu-border-style: solid; --menu-border-width: 1px; --menu-link-bg-active-color: hsl(154, 92%, 95%); --menu-link-bg-active-hover-color: hsl(154, 92%, 95%); --menu-link-bg-focus-color: hsl(154, 92%, 95%); --menu-link-bg-hover-color: hsl(154, 92%, 95%); --menu-link-color: hsl(210, 9%, 16%); --menu-link-active-color: hsl(210, 9%, 0%); --menu-link-active-hover-color: hsl(210, 9%, 0%); --menu-link-focus-color: hsl(0, 0%, 0%); --menu-link-hover-color: hsl(0, 0%, 0%); --menu-heart-color: hsl(154, 92%, 95%); /* Mentions */ --atwho-view-bg-color: hsl(0, 0%, 10%); --atwho-view-border-color: hsl(0, 0%, 13%); --atwho-view-border-style: solid; --atwho-view-border-width: 1px; --atwho-view-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); --atwho-view-border-radius: 3px; --atwho-view-small-txt-color: hsl(0, 0%, 47%); --atwho-view-strong-text: hsl(225, 100%, 60%); --atwho-view-cur-bg-color: hsl(225, 100%, 60%); --atwho-view-cur-txt-color: hsl(0, 0%, 100%); --atwho-view-cur-small-txt-color: hsl(0, 0%, 100%); --atwho-view-cur-strong-txt-color: hsl(0, 0%, 100%); /* On/Off Icons (User) */ --on-off-border-radius: 50%; --on-bg-color: hsl(100, 75%, 63%); --on-border-color: hsl(100, 61%, 55%); --off-bg-color: hsl(0, 3%, 65%); --off-border-color: hsl(0, 2%, 58%); /* Pagination */ --current-page-txt-color: hsl(0, 100%, 50%); --current-page-border-color: hsl(0, 0%, 13%); --nav-page-border-color: hsl(0, 0%, 13%); /* Popup Windows */ --popup-container-bg-color: hsla(0, 0%, 0%, 0.8); --popup-content-bg-color: hsl(0, 0%, 100%); --popup-content-txt-color: hsl(0, 0%, 0%); --popup-content-border-color: var(--up-contain-border-color); --popup-content-border-radius: 6px 6px 2px 2px; --popup-content-box-shadow: 0px 0px 1px 1px hsl(0, 0%, 0%); --popup-heading-txt-color: hsl(210, 9%, 16%); --popup-window-bg-color: hsl(260, 100%, 96%); --popup-window-box-shadow: 0px 0px 1px 0px hsl(0, 0%, 0%); --popup-window-border-color: var(--border-color); --popup-window-border-radius: 7px 7px 3px 3px; --popup-hide-button-bg-color: transparent; /* Post Bit Section */ --display-head-txt-color: hsl(0, 0%, 8%); --poster-info-bg-color: hsl(258, 100%, 96%); --poster-online-link-color: hsl(258, 43%, 45%); --key-post-info-link-color: hsl(258, 43%, 45%); --keyinfo-postinfo-modified-txt-color: hsl(258, 10%, 10%); --subject-title-link-color: hsl(193, 35%, 28%); --page-number-txt-color: hsl(258, 43%, 45%); --inner-border-color: hsl(225, 62%, 10%); --inner-border-style: dashed; --inner-border-width: 1px; --inner-box-shadow: 0 1px 0 hsl(225, 62%, 30%) inset; --signature-border-color: hsl(225, 62%, 10%); --signature-box-shadow: 0 1px 0 hsl(225, 62%, 30%) inset; /* Post Draft Options */ --post-draft-options-bg-color: var(--window-bg-color); --post-draft-options-border-color: var(--border-color); --post-draft-options-border-style: solid; --post-draft-options-border-width: 1px; --post-draft-options-border-left-color: var(--border-color); --post-draft-options-border-left-style: solid; --post-draft-options-border-left-width: 1px; --post-draft-options-border-radius: 0 0 4px 4px; --post-draft-options-settings-border-color: var(--border-color); --post-draft-options-settings-border-style: solid; --post-draft-options-settings-border-width: 1px; --post-draft-options-settings-strong-txt-color: var(--body-txt-color); /* Post Options */ --post-options-bg-color: hsl(228, 16%, 97%); --post-options-bg-hover-color: hsl(224, 31%, 87%); --post-options-border-color: hsl(224, 31%, 87%); --post-options-border-style: solid; --post-options-border-width: 1px; --post-options-border-radius: 4px 0px 4px 4px; --post-options-border-color-hover: hsl(224, 31%, 7%); --post-options-link-border-radius: 3px; --post-options-font-weight: normal; /* Post BBC Links */ --bbc-link-border-color: hsl(218, 29%, 74%); --bbc-link-hover-border-color: hsl(220, 33%, 30%); --bbc-link-hover-border-style: solid; --bbc-link-hover-border-width: 1px; /* Profile Section */ --activity-stats-bg-color: hsl(99, 24%, 23%); --activity-stats-border-color: var(--border-color); --activity-stats-border-style: solid; --activity-stats-border-width: 1px; --detailedinfo-border-color: var(--border-color); --detailedinfo-border-style: solid; --detailedinfo-border-width: 1px; --detailedinfo-txt-color: var(--body-txt-color); --counter-txt-color: hsl(0, 0%, 85%); --list-posts-box-shadow: 0 1px 0 hsl(0, 0%, 100%) inset; --pick-theme-selected-bg-color: hsl(290, 100%, 97%); --unread-pm-bg-color: hsl(120, 100%, 90%); --unread-notify-hover-bg-color: hsl(258, 100%, 98%); /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ --personal-messages-capcity-bar-bg-color: hsl(206, 30%, 95%); --personal-messages-capcity-bar-border-color: hsl(0, 0%, 68%); --personal-messages-capcity-bar-border-style: solid; --personal-messages-capcity-bar-border-width: 1px; --personal-messages-empty-capacity-bar-bg-color: hsl(111, 41%, 73%); --personal-messages-filled-capacity-bar-bg-color: hsl(42, 100%, 47%); --personal-messages-full-capacity-bar-bg-color: hsl(0, 93%, 49%); --warning-level-none-bar-bg-color: hsl(100, 67%, 55%); --warning-level-watched-bar-bg-color: hsl(51, 100%, 50%); --warning-level-moderated-bar-bg-color: hsl(39, 100%, 50%); --warning-level-muted-bar-bg-color: hsl(6, 88%, 63%); /* Quote Blocks */ --quote-block-alt-bg: hsl(258, 20%, 90%); --quote-block-standard-bg: hsl(258, 20%, 90%); --quote-block-border-color: hsl(258, 40%, 80%); --quote-block-border-style: solid; --quote-block-border-width: 1px; --quote-block-border-lr-color: hsl(258, 40%, 80%); --quote-block-border-lr-style: solid; --quote-block-border-lr-width: 3px; --quote-block-font-size: 0.85rem; --quote-cite-bg-color: hsl(258, 30%, 97%); --quote-cite-border-color: hsla(0, 0%, 0%, 0.1); --quote-cite-border-style: solid; --quote-cite-border-width: 1px; --quote-cite-before-font-size: 22px; --quote-cite-before-font-style: normal; --quote-cite-font-size: 0.9em; --quote-header-txt-color: hsl(0, 0%, 87%); --quote-header-font-size: 0.9em; --quote-txt-color: hsl(0, 0%, 87%); /* Registration Section */ --coppa-contact-bg-color: hsl(0, 0%, 10%); --coppa-contact-border-color: hsl(0, 0%, 13%); --coppa-contact-border-style: solid; --coppa-contact-border-width: 1px; --coppa-contact-txt-color: hsl(0, 0%, 83%); --valid-input-bg-color: hsl(100, 100%, 7%); --invalid-input-bg-color: hsl(0, 100%, 7%); /* SCEditor */ --sce-brightness-filter: brightness(100%); --sce-toolbar-group-bg: hsl(247, 24%, 84%); --sce-toolbar-group-border-color: hsl(258, 100%, 100%); /* Slider */ --sy-pager-link-bg-color: hsl(211, 67%, 100%); --sy-pager-link-box-shadow: inset 0px -3px 0px hsla(0, 0%, 100%, 8%); /* Style Color Picker */ --styleselect-color-blue: hsl(206, 31%, 46%); --styleselect-color-red: hsl(6, 31%, 46%); --styleselect-color-green: hsl(106, 31%, 46%); --styleselect-color-purple: hsl(280, 31%, 46%); /* Two Factor Auth Code Container */ --tfacode-bg-color: hsl(206, 74%, 89%); /* The "new" button */ --new-button-bg-color: hsl(260, 100%, 96%); --new-button-border-radius: 9px; --new-button-font-family: verdana, sans-serif; --new-button-font-size: 9px; --new-button-font-weight: 700; --new-button-line-height: 15px; --new-button-txt-color: hsl(0, 0%, 0%); --new-button-txt-color-visited: hsl(0, 0%, 0%); --new-button-txt-color-hover: hsl(0, 0%, 0%); /* Toggle */ --toggle-bg: #f7f7f7 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAABECAMAAADTNBe3AAAAb1BMVEVHcExZj71Zj71YirtZj71Zj71djr9GqL5Zj71Zj71ZkL1ajLtZj71Zj71akL5XkL1bkr5Yj71Yj71Zj71Zj71ajrxYj75Ykb1aj71Zj71Yj71ZkL1Zj71Zj71RlLxZkL1Zjr1aj71ajb5YkL1Zj71qfufzAAAAI3RSTlMA0bwGX6MNAv3qRBZ59jo1EVAx+sMs4CKSyYiXq9wJVGyLSjWTTfUAAADpSURBVBgZ7cFHkoMwAATAIUrkDDbYONT8/41LURRLkODmE924/JLr4szthhOJlDEOWQZpWDgSchDiQBNxEDXQMzkyBXRsTmxopB4nXgA1hzMHSr7kPx8K/ZNkdH84pkfy2WOvJUvbxUD4jmSLnap4vjDLyyLHhri3FhbEuxRYs7/YiF9Yc7Hj4nLRiAW2EqxVjxQrfZdj41NnWEiMD7b6mmaFSdDJuseOT/L+zlMRZI+C9KHgcMGBSuBx5gVQsjmzoSZMTkoBjSbiKKqgFXIUQs8yODAsHEgkKWMc6sgbjrm1l+JEluHyQ3/hAhoP/b3Z7wAAAABJRU5ErkJggg==) no-repeat 0 0 / 17px; --toggle-bg-hover: hsl(208, 45%, 83%); --toggle-border-color: hsl(0, 0%, 77%); --toggle-border-style: solid; --toggle-border-width: 1px; --toggle-border-radius: 4px; --toggle-box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 1px #fff inset, 0 -5px 4px rgba(0,0,0,.1) inset; --toggle-box-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.25) inset; /* ToolTips */ --tooltip-bg-color: hsl(0, 0%, 100%); --tooltip-border-color: hsl(0, 0%, 67%); --tooltip-border-style: solid; --tooltip-border-width: 1px; --tooltip-txt-color: hsl(0, 0%, 20%); --tooltip-border-radius: 4px; --tooltip-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.05) inset; /* Window Backgrounds */ --window-approve-topic-bg-color: hsl(0, 100%, 90%); --window-approve-post-bg-color: hsl(0, 100%, 90%); --window-bg-color: hsl(0, 0%, 100%); --window-bg-even-color: hsl(0, 0%, 100%); --window-bg-odd-color: hsl(0, 0%, 100%); --window-locked-bg-color: hsl(193, 1%, 97%); --window-sticky-bg-color: hsl(36, 16%, 94%); --window-sticky-locked-bg-color: hsl(36, 10%, 84%); --window-target-bg-color: hsl(22, 90%, 98%); --window-table-row-bg-hover-color: hsl(22, 90%, 98%); /* Video Container */ --video-container-bg-color: hsl(0, 0%, 0%); /* Basic Colors */ --black: hsl(0, 0%, 0%); --white: hsl(0, 0%, 100%); --red: hsl(0, 100%, 50%); --blue: hsl(240, 100%, 50%); --green: hsl(120, 100%, 25%); /* Inline SVG backgrounds */ --menu-wave-image: url("data:image/svg+xml;utf8,"); --footer-doodle-image: url("data:image/svg+xml;utf8,"); --header-doodle-image: url("data:image/svg+xml;utf8,"); --display-title-doodle-image: url("data:image/svg+xml;utf8,"); --main-container-ribbon-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2764%27%20viewBox%3D%270%200%2028%2064%27%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2710%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(335%2C71%25%2C61%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%2310084%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2726%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(193%2C35%25%2C28%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%239733%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2742%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(335%2C71%25%2C61%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%2310084%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2758%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(193%2C35%25%2C28%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%239733%3B%3C%2Ftext%3E%0A%3C%2Fsvg%3E"); --spiral-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cpath%20d%3D%27M60%2012%20C100%2012%20108%2040%20108%2060%20C108%2088%2088%20108%2060%20108%20C40%20108%2024%2094%2024%2074%20C24%2054%2040%2044%2056%2044%20C72%2044%2084%2056%2084%2072%20C84%2084%2076%2092%2064%2092%20C52%2092%2044%2084%2044%2072%20C44%2064%2050%2058%2058%2058%20C66%2058%2064%2062%2064%2064%27%20fill%3D%27none%27%20stroke%3D%27hsl%28260%2C65%25%2C65%25%29%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%272%27%20fill%3D%27hsl%28260%2C65%25%2C65%25%29%27%2F%3E%3C%2Fsvg%3E); } :root[data-theme="dark"] { /* Admin CP Stuff */ /* Styles for the file permissions section. */ --perm-read-bg-color: hsl(101, 78%, 16%); --perm-writable-bg-color: hsl(0, 100%, 17%); --perm-execute-bg-color: hsl(31, 95%, 14%); --perm-custom-bg-color: hsl(100, 5%, 16%); --perm-no-change-bg-color: hsl(99, 24%, 23%); --perm-groups-bg-color: hsl(0, 0%, 100%); --manage-boards-li-recycle-board-bg-color: hsl(180, 33%, 8%); --manage-boards-li-redirect-board-bg-color: hsl(60, 33%, 9%); --move-smileys-link-hover-img-border-color: hsl(208, 44%, 21%); --move-smileys-selected-item-border-color: hsl(39, 100%, 29%); /* Alternating colors */ --stripes-even-bg-color: hsl(0, 0%, 5%); --stripes-odd-bg-color: hsl(206, 30%, 5%); --alternative-bg-color: hsl(0, 0%, 5%); --alternative-bg-2-color: hsl(202, 21%, 3%); /* AJAX Notification Bar */ --ajax-in-progress-bg-color: hsl(0, 0%, 100%); --ajax-in-progress-border-color: hsl(27, 100%, 49%); --ajax-in-progress-border-style: solid; --ajax-in-progress-border-width: 4px; --ajax-in-progress-link-color: hsl(39, 100%, 50%); --ajax-in-progress-txt-color: hsl(27, 100%, 49%); /* Auto Suggest Control */ --auto-suggest-border-color: var(--border-color); --auto-suggest-border-style: solid; --auto-suggest-border-width: 1px; --auto-suggest-border-radius: 3px; --auto-suggest-item-bg-color: var(--window-bg-color); --auto-suggest-item-hover-bg-color: var(--window-table-row-bg-hover-color); --auto-suggest-item-hover-txt-color: var(--body-txt-color); /* Body */ --body-bg-color: linear-gradient(180deg, hsl(258, 28%, 12%) 1px, hsl(258, 25%, 7%) 1px); --body-txt-color: hsl(0, 0%, 92%); --border-color: hsl(258, 16%, 28%); --border-style: dashed; --border-width: 2px; --html-bg-color: hsl(228, 26%, 6%); --heading-txt-color: hsl(0, 0%, 98%); --highlight-txt-color: hsl(45, 100%, 70%) !important; --horizontal-rule-bg-color: hsl(258, 28%, 24%); --horizontal-rule-box-shadow: 0 1px 0 hsl(258, 28%, 14%) inset; --info-link: hsl(195, 65%, 72%); --link: hsl(195, 65%, 72%); --link-hover: hsl(195, 75%, 80%); --strong-txt-color: hsl(0, 0%, 98%); --option-bg-hover-color: hsl(258, 32%, 18%); --wrapper-bg-color: hsl(229, 22%, 10%); --wrapper-border-color: hsl(258, 16%, 28%); --wrapper-border-style: solid; --wrapper-border-width: 1px; --wrapper-border-radius: 9px; --wrapper-box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.4) inset; --inner-section-bg-color: hsla(0, 0%, 100%, 0.02); --inner-wrap-bg-color: hsl(229, 22%, 10%); --inner-wrap-border-color: hsl(228, 15%, 26%); --inner-wrap-border-style: solid; --inner-wrap-border-width: 1px; --selection-bg-color: hsl(210, 90%, 45%); --selection-txt-color: hsl(0, 0%, 100%); --focus-outline-color: hsl(195, 80%, 60%); --placeholder-txt-color: hsl(0, 0%, 65%); --checkbox-and-radio-bg-color: hue-rotate(50deg); /* Breadcrumb */ --breadcrumb-bg-color: hsl(229, 22%, 10%); --breadcrumb-border-color: hsl(258, 16%, 28%); --breadcrumb-border-style: dashed; --breadcrumb-border-width: 2px; --breadcrumb-border-radius: 22px; --breadcrumb-box-shadow: 0px 0px 1px 1px hsla(0, 0%, 0%, 0.45) inset; --breadcrumb-font-family: "Comic Neue", "Comic Sans MS", sans-serif; --breadcrumb-font-size: 1em; --breadcrumb-divider-color: hsl(0, 0%, 65%); --breadcrumb-divider-font-family: "Comic Neue", "Comic Sans MS", sans-serif; --breadcrumb-divider-font-size: 1.5em; --breadcrumb-divider-line-height: 150%; --breadcrumb-link-color: hsl(0, 0%, 92%); --breadcrumb-txt-color: hsl(0, 0%, 80%); /* Buttons */ --button-bg-color: hsl(249, 29%, 19%); --button-bg-hover: hsl(249, 29%, 19%); --button-bg-active: hsl(249, 29%, 19%); --button-bg-focus: hsl(249, 29%, 19%); --button-border-color: hsl(270, 55%, 0%); --button-border-style: solid; --button-border-width: 1px; --button-border-radius: 13px; --button-box-shadow: 3px 4px 0px hsl(270, 30%, 0%); --button-active-border-color: hsl(270, 60%, 0%); --button-active-border-style: solid; --button-active-border-width: 1px; --button-active-font-weight: bold; --button-hover-border-color: hsl(270, 60%, 0%); --button-hover-box-shadow: 0px 0px 0 hsl(211, 67%, 0%); --button-txt-color: hsl(0, 0%, 98%); --button-txt-color-active: hsl(0, 0%, 98%); --button-txt-color-hover: hsl(0, 0%, 98%); --button-txt-color-focus: hsl(0, 0%, 98%); --button-txt-color-active-and-focus: hsl(0, 0%, 98%); --button-txt-color-hover-and-focus: hsl(0, 0%, 98%); --button-txt-shadow-color: hsl(270, 25%, 10%); /* Board Index */ --forum-title-link-color: hsl(45, 100%, 75%); --forum-title-font-size: 1.5em; --forum-title-font-family: "Unkempt", sans-serif; --forum-title-txt-shadow: 0px 1px 1px hsl(189, 25%, 0%); --children-bg-color: hsl(229, 22%, 8%); --children-link-color: hsl(0, 0%, 92%); --news-bg-color: hsl(258, 28%, 18%); --news-left-bg-color: hsl(258, 28%, 12%); --sub-bar-bg-color: hsl(229, 22%, 10%); --sub-bar-link-color: hsl(0, 0%, 92%); --sub-bar-link-txt-shadow: 0px 1px 1px hsl(228, 20%, 5%); --up-contain-bg-color: hsl(228, 22%, 10%); --up-contain-border-color: hsl(258, 16%, 28%); --information-bg-color: hsl(229, 22%, 10%); --information-border-color: hsl(258, 16%, 28%); /* Category */ --cat-bar-bg-color: transparent; --cat-bar-border-radius: 6px 6px 0 0; --cat-bar-collapsed-border-radius: 6px; --cat-bar-desc-txt-color: hsl(45, 85%, 75%); --cat-bar-link-color: hsl(45, 90%, 70%); --cat-bar-link-txt-shadow: 0px 1px 1px hsl(0, 100%, 0%); --cat-bar-strong-txt-color: hsl(0, 0%, 98%); --catbg-cycle-1-bg-color: hsl(22, 25%, 16%); --catbg-cycle-2-bg-color: hsl(260, 20%, 16%); --catbg-cycle-3-bg-color: hsl(155, 10%, 15%); --catbg-box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5); --catbg-ribbon-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); /* Hero Section */ --hero-section-bg-color: hsl(154, 22%, 15%); --hero-section-button-bg-color: hsl(249, 29%, 19%); --hero-section-button-border-color: hsl(270, 55%, 0%); --hero-section-button-shadow-color: hsl(270, 30%, 0%); --hero-section-button-link-color: hsl(0, 0%, 98%); --hero-section-border-color: hsl(260, 26%, 7%); --hero-section-border-style: dashed; --hero-section-border-width: 3px; --hero-section-h2-border-color: hsl(228, 20%, 32%); --hero-section-accent-before-bg-color: hsl(154, 22%, 12%); --hero-section-accent-after-bg-color: hsl(154, 22%, 12%); /* Info Center*/ --info-block-information-bg-color: hsl(230, 24%, 18%); --info-block-icon-bg-color: hsl(229, 22%, 10%); --info-center-container-bg-color: hsl(230, 24%, 18%); --info-center-border-radius: 3px; --info-center-box-shadow: 0px 2px 0px hsl(230, 20%, 8%); --info-center-block-border-color: hsl(258, 16%, 28%); --info-center-block-bg-color: hsl(229, 22%, 8%); --info-center-title-bar-border-color: hsl(230, 10%, 42%); --roundframe-bg-color: hsl(229, 22%, 10%); --roundframe-border-radius: 22px; --roundframe-border-color: hsl(258, 16%, 28%); --info-center-stats-card-bg-color: hsl(258, 28%, 16%); --info-center-stats-card-border-color: hsl(258, 20%, 32%); --upshrink-icon-bg-color: hsl(336, 100%, 60%); /* Title Bar */ --title-bar-bg-color: hsl(252, 28%, 16%); --title-bar-border-radius: 0px; --title-bar-link: hsl(45, 90%, 70%); --topic-header-bg-color: hsl(258, 28%, 18%); --title-bar-txt-shadow: 0px 1px 1px hsl(228, 20%, 8%); /* Calendar colors for birthdays, events and holidays */ --calendar-today-bg-color: hsl(220, 70%, 22%); --calendar-days-hover-bg-color: hsl(220, 70%, 26%); --calendar-holiday-bg-color: hsl(210, 35%, 22%); --calendar-holiday-bg-hover-color: hsl(210, 35%, 28%); --calendar-event-bg-color: hsl(120, 50%, 24%); --calendar-event-bg-hover-color: hsl(120, 50%, 30%); --calendar-birthday-bg-color: hsl(280, 40%, 24%); --calendar-birthday-bg-hover-color: hsl(280, 40%, 30%); --birthday-txt-color: hsl(280, 70%, 75%); --event-txt-color: hsl(120, 70%, 70%); --event-time-txt-color: hsl(0, 0%, 70%); --holiday-txt-color: hsl(210, 80%, 70%); --warn-moderate-txt-color: hsl(39, 100%, 70%); --warn-watch-txt-color: hsl(120, 80%, 60%); /*Error, Info, and Notice Boxes. */ --error-box-bg-color: hsl(0, 65%, 20%); --error-box-border-color: hsl(0, 65%, 45%); --error-box-border-style: solid; --error-box-border-width: 2px; --notice-box-bg-color: hsl(45, 70%, 20%); --notice-box-border-color: hsl(45, 80%, 45%); --notice-box-border-style: solid; --notice-box-border-width: 1px; --notice-box-txt-color: hsl(0, 0%, 96%); --info-box-bg-color: hsl(150, 50%, 16%); --info-box-border-color: hsl(150, 60%, 35%); --info-box-border-style: solid; --info-box-border-width: 1px; --info-box-txt-color: hsl(0, 0%, 96%); --desc-box-border-color: hsl(228, 15%, 30%); --desc-box-border-style: solid; --desc-box-border-width: 1px; /* File Error */ --errorfile-table-td-bg-color: hsl(229, 22%, 10%); --errorfile-table-current-bg-color: hsl(0, 60%, 22%); --errorfile-table-file-line-bg-color: hsl(0, 0%, 12%); --errorfile-table-file-line-current-bg-color: hsl(0, 65%, 25%); /* Code Blocks */ --code-bg-color: hsl(230, 20%, 14%); --code-border-color: hsl(230, 20%, 22%); --code-border-top-color: hsl(230, 10%, 35%); --code-border-bottom-color: hsl(230, 10%, 18%); --code-border-radius: 2px; --code-font-size: 0.78rem; --code-header-bg-color: hsl(230, 20%, 18%); --code-header-font-size: 0.9em; --code-header-txt-color: hsl(0, 0%, 95%); /* Colors for background of posts requiring approval */ --approve-bg-color: hsl(10, 65%, 16%); --approve-bg-color-2: hsl(10, 65%, 18%); --approve-txt-color: hsl(120, 40%, 70%); /* FieldSet */ --fieldset-legend-txt-color: hsl(0, 0%, 92%); --fieldset-txt-shadow: 0px 1px 1px hsl(0, 0%, 6%); --fieldset-border-color: hsl(228, 15%, 30%); --fieldset-border-style: solid; --fieldset-border-width: 1px; --fieldset-border-radius: 3px; /* Footer */ --footer-bg-color: hsl(229, 22%, 8%); --footer-box-shadow: 0px 1px 0px 0px hsl(228, 55%, 9%) inset; --footer-border-color: hsl(258, 16%, 28%); --footer-border-style: dashed; --footer-border-width: 3px; --footer-copyright-box-shadow: 0px -1px 0px hsl(224, 35%, 0%) inset; --footer-copyright-border: 1px solid hsl(224, 35%, 0%); --footer-font-size: 0.9em; --footer-txt-color: hsl(0, 0%, 92%); /* Generic & Progress Bar */ --generic-bar-bar-bg-color: hsl(257, 30%, 18%); --generic-bar-bar-box-shadow: 0px 0px 1px 1px hsl(0, 0%, 0%, 0.3) inset; --generic-bar-bar-border-radius: 1px; --generic-bar-border-color: hsl(228, 15%, 0%); --generic-bar-border-style: solid; --generic-bar-border-width: 1px; --generic-bar-border-radius: 2px; --generic-bar-bg-color: hsl(257, 30%, 10%); --generic-bar-txt-color: hsl(0, 0%, 95%); --generic-bar-span-txt-shadow: 1px 1px hsla(0, 0%, 0%, 0.8); --generic-bar-vertical-bar-box-shadow: 4px -4px 4px hsla(0, 0%, 0%, 0.1) inset, 4px 4px 4px hsla(0, 0%, 100%, 0.3) inset; --progress-bar-border-radius: 4px; --progress-bar-txt-color: hsla(0, 0%, 100%, 0.85); --progress-bar-bar-bg-color: hsl(120, 50%, 40%); --progress-bar-bar-bg-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 100%, 0.15) 50%, hsla(0, 0%, 100%, 0.15) 75%, transparent 75%, transparent); --progress-bar-bar-box-shadow: -1px 1px 0 hsla(0, 0%, 100%, 0.25) inset, 1px -1px 0 hsla(0, 0%, 0%, 0.1) inset; --progress-yellow-bar-bg-color: hsl(45, 90%, 50%); --progress-green-bar-bg-color: hsl(120, 50%, 40%); --progress-red-bar-bg-color: hsl(0, 65%, 50%); --progress-blue-bar-bg-color: hsl(200, 70%, 50%); /* Header */ --header-bg-color: hsl(247, 24%, 14%); --header-border-radius: 15px 15px 0px 0px; --header-border-color: hsl(152, 22%, 15%); --header-border-style: solid; --header-border-width: 1px; --header-box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.6) inset; --top-info-border-color: hsl(230, 25%, 32%); --top-info-border-style: solid; --top-info-border-width: 1px; --top-info-link-bg-color: transparent; --top-info-link-hover-bg-color: hsl(230, 24%, 18%); --top-info-link-active-bg-color: hsl(230, 24%, 18%); --top-info-link-focus-bg-color: hsl(230, 24%, 18%); --top-info-link-hover-color: hsl(0, 0%, 100%); --top-info-link-color: hsl(0, 0%, 90%); --top-info-link-txt-color: hsl(0, 0%, 90%); --top-info-link-txt-shadow: 0px 1px 1px hsl(180, 14%, 0%); --top-info-active-link-color: hsl(0, 0%, 98%); --top-info-hover-link-color: hsl(45, 100%, 70%); --top-info-link-hover-border-color: hsl(230, 25%, 32%); --top-info-link-focus-border-color: hsl(230, 25%, 32%); --top-menu-bg-color: hsl(230, 24%, 16%); --top-menu-box-shadow: none; --top-menu-border-radius: 3px; --top-menu-strong-txt-color: hsl(0, 0%, 100%); --top-section-bg-color: hsl(230, 26%, 12%); --top-section-box-shadow: 0px -2px 1px 0px hsl(230, 25%, 6%) inset; --top-section-border-color: hsl(230, 25%, 24%); --top-section-border-style: solid; --top-section-border-width: 1px; /* Input, Button, Select, Textarea */ --ibst-txt-color: hsl(0, 0%, 95%); --ibst-bg-color: hsl(229, 22%, 15%); --ibst-box-shadow: 2px 3px 0px hsl(0, 0%, 0%); --ibst-border-color: hsl(230, 15%, 0%); --ibst-border-style: solid; --ibst-border-width: 2px; --ibst-disabled-bg-color: hsl(230, 12%, 22%); --ibst-disabled-border-color: hsl(0, 0%, 0%); --ibst-disabled-txt-color: hsl(0, 0%, 70%); --ibst-focus-bg-color: hsl(230, 24%, 16%); --ibst-focus-border-color: hsl(195, 80%, 0%); --ibst-font-family: "Inter", "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; --ibst-font-size: 1.8em; --ibst-font-line-height: 140%; --ibst-hover-bg-color: hsl(154, 22%, 15%); --ibst-hover-border-color: hsl(195, 80%, 0%); --ibst-textarea-hover-bg-color: var(--ibst-hover-bg-color); /* Maintenance Mode */ --errorfile-table-bg-color: hsl(229, 22%, 10%); --errorfile-table-td-current-bg-color: hsla(33, 60%, 40%, 0.35); --errorfile-table-td-current-border-color: hsla(0, 0%, 0%, 0.2); --errorfile-table-td-current-border-style: solid; --errorfile-table-td-current-border-width: 1px; /* Menu */ --amt-active-bg-color: hsla(0, 0%, 100%, 0.08); --amt-bg-color: hsl(0, 100%, 30%); --amt-border-radius: 10px; --amt-txt-color: hsl(0, 0%, 90%); --dropmenu-bg-color: hsl(247, 24%, 14%); --dropmenu-border-color: hsl(230, 15%, 30%); --dropmenu-box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.4)inset; --dropmenu-link-box-shadow: 0px 0px 5px 0px transparent inset; --dropmenu-hover-bg-color: hsl(152, 22%, 20%); --dropmenu-hover-border-color: hsl(247, 24%, 14%); --dropmenu-link-color: hsl(0, 0%, 92%); --dropmenu-link-hover-color: hsl(0, 0%, 98%); --dropmenu-strong-txt-color: hsl(0, 0%, 98%); --dropmenu-subsections-font-family: Arial, sans-serif; --dropmenu-subsections-font-size: 83.33%; --dropmenu-subsections-line-height: 150%; --dropmenu-squiggle: url("data:image/svg+xml;utf8,"); --dropmenu-squiggle-size: 28px 8px; --menu-bg-color: hsl(247, 24%, 14%); --menu-border-color: hsl(230, 15%, 30%); --menu-border-style: solid; --menu-border-width: 1px; --menu-link-bg-active-color: hsl(152, 22%, 15%); --menu-link-bg-active-hover-color: hsl(152, 22%, 15%); --menu-link-bg-focus-color: hsl(152, 22%, 15%); --menu-link-bg-hover-color: hsl(152, 22%, 15%); --menu-link-color: hsl(0, 0%, 90%); --menu-link-active-color: hsl(0, 0%, 98%); --menu-link-active-hover-color: hsl(0, 0%, 98%); --menu-link-focus-color: hsl(0, 0%, 98%); --menu-link-hover-color: hsl(0, 0%, 100%); --menu-heart-color: hsl(154, 12%, 15%); /* Mentions */ --atwho-view-bg-color: hsl(230, 24%, 12%); --atwho-view-border-color: hsl(230, 15%, 30%); --atwho-view-border-style: solid; --atwho-view-border-width: 1px; --atwho-view-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); --atwho-view-border-radius: 3px; --atwho-view-small-txt-color: hsl(0, 0%, 75%); --atwho-view-strong-text: hsl(195, 65%, 72%); --atwho-view-cur-bg-color: hsl(195, 65%, 50%); --atwho-view-cur-txt-color: hsl(0, 0%, 98%); --atwho-view-cur-small-txt-color: hsl(0, 0%, 95%); --atwho-view-cur-strong-txt-color: hsl(0, 0%, 98%); /* On/Off Icons (User) */ --on-off-border-radius: 50%; --on-bg-color: hsl(120, 65%, 40%); --on-border-color: hsl(120, 55%, 35%); --off-bg-color: hsl(0, 0%, 35%); --off-border-color: hsl(0, 0%, 30%); /* Pagination */ --current-page-txt-color: hsl(0, 100%, 80%); --current-page-border-color: hsl(45, 100%, 60%); --nav-page-border-color: hsl(45, 100%, 60%); /* Popup Windows */ --popup-container-bg-color: hsla(0, 0%, 0%, 0.75); --popup-content-bg-color: hsl(247, 24%, 14%); --popup-content-txt-color: hsl(0, 0%, 95%); --popup-content-border-color: var(--up-contain-border-color); --popup-content-border-radius: 6px 6px 2px 2px; --popup-content-box-shadow: 0px 0px 1px 1px hsl(0, 0%, 0%); --popup-heading-txt-color: hsl(0, 0%, 98%); --popup-window-bg-color: hsl(247, 24%, 14%); --popup-window-box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.6)inset; --popup-window-border-color: hsl(230, 15%, 30%); --popup-window-border-radius: 7px 7px 3px 3px; --popup-hide-button-bg-color: transparent; /* Post Bit Section */ --display-head-txt-color: hsl(0, 0%, 95%); --poster-info-bg-color: hsl(247, 24%, 14%); --poster-online-link-color: hsl(45, 100%, 70%); --key-post-info-link-color: hsl(45, 100%, 70%); --keyinfo-postinfo-modified-txt-color: hsl(0, 0%, 70%); --subject-title-link-color: hsl(195, 65%, 72%); --page-number-txt-color: hsl(45, 100%, 70%); --inner-border-color: hsl(228, 15%, 30%); --inner-border-style: dashed; --inner-border-width: 1px; --inner-box-shadow: 0 1px 0 hsl(228, 15%, 18%) inset; --signature-border-color: hsl(228, 15%, 24%); --signature-box-shadow: 0 1px 0 hsl(228, 15%, 18%) inset; /* Post Draft Options */ --post-draft-options-bg-color: hsl(247, 24%, 14%); --post-draft-options-border-color: hsl(230, 15%, 30%); --post-draft-options-border-style: solid; --post-draft-options-border-width: 1px; --post-draft-options-border-left-color: hsl(230, 15%, 30%); --post-draft-options-border-left-style: solid; --post-draft-options-border-left-width: 1px; --post-draft-options-border-radius: 0 0 4px 4px; --post-draft-options-settings-border-color: hsl(230, 15%, 30%); --post-draft-options-settings-border-style: solid; --post-draft-options-settings-border-width: 1px; --post-draft-options-settings-strong-txt-color: hsl(0, 0%, 92%); /* Post Options */ --post-options-bg-color: hsl(230, 35%, 18%); --post-options-bg-hover-color: hsl(230, 35%, 22%); --post-options-border-color: hsl(230, 35%, 22%); --post-options-border-style: solid; --post-options-border-width: 1px; --post-options-border-radius: 4px 0px 4px 4px; --post-options-border-color-hover: hsl(230, 35%, 26%); --post-options-link-border-radius: 3px; --post-options-font-weight: normal; /* Post BBC Links */ --bbc-link-border-color: hsl(200, 50%, 55%); --bbc-link-hover-border-color: hsl(195, 65%, 65%); --bbc-link-hover-border-style: solid; --bbc-link-hover-border-width: 1px; /* Profile Section */ --activity-stats-bg-color: hsl(247, 24%, 14%); --activity-stats-border-color: hsl(230, 15%, 30%); --activity-stats-border-style: solid; --activity-stats-border-width: 1px; --detailedinfo-border-color: hsl(230, 15%, 30%); --detailedinfo-border-style: solid; --detailedinfo-border-width: 1px; --detailedinfo-txt-color: hsl(0, 0%, 92%); --counter-txt-color: hsl(0, 0%, 80%); --list-posts-box-shadow: 0 1px 0 hsl(0, 0%, 15%) inset; --pick-theme-selected-bg-color: hsl(230, 22%, 16%); --unread-pm-bg-color: hsl(120, 40%, 25%); --unread-notify-hover-bg-color: hsl(230, 35%, 24%); /* Progress Bars & Generic Bars & Warning Bars & Personal Message Bar*/ --personal-messages-capcity-bar-bg-color: hsl(229, 22%, 10%); --personal-messages-capcity-bar-border-color: hsl(230, 15%, 30%); --personal-messages-capcity-bar-border-style: solid; --personal-messages-capcity-bar-border-width: 1px; --personal-messages-empty-capacity-bar-bg-color: hsl(120, 40%, 30%); --personal-messages-filled-capacity-bar-bg-color: hsl(45, 85%, 48%); --personal-messages-full-capacity-bar-bg-color: hsl(0, 65%, 45%); --warning-level-none-bar-bg-color: hsl(120, 50%, 40%); --warning-level-watched-bar-bg-color: hsl(45, 90%, 50%); --warning-level-moderated-bar-bg-color: hsl(39, 100%, 50%); --warning-level-muted-bar-bg-color: hsl(0, 65%, 50%); /* Quote Blocks */ --quote-block-alt-bg: hsl(247, 24%, 14%); --quote-block-standard-bg: hsl(247, 24%, 14%); --quote-block-border-color: hsl(228, 15%, 30%); --quote-block-border-style: solid; --quote-block-border-width: 1px; --quote-block-border-lr-color: hsl(228, 15%, 30%); --quote-block-border-lr-style: solid; --quote-block-border-lr-width: 3px; --quote-block-font-size: 0.85rem; --quote-cite-bg-color: hsl(228, 20%, 18%); --quote-cite-border-color: hsla(0, 0%, 100%, 0.08); --quote-cite-border-style: solid; --quote-cite-border-width: 1px; --quote-cite-before-font-size: 22px; --quote-cite-before-font-style: normal; --quote-cite-font-size: 0.9em; --quote-header-txt-color: hsl(0, 0%, 85%); --quote-header-font-size: 0.9em; --quote-txt-color: hsl(0, 0%, 87%); /* Registration Section */ --coppa-contact-bg-color: hsl(0, 0%, 10%); --coppa-contact-border-color: hsl(0, 0%, 13%); --coppa-contact-border-style: solid; --coppa-contact-border-width: 1px; --coppa-contact-txt-color: hsl(0, 0%, 83%); --valid-input-bg-color: hsl(100, 100%, 7%); --invalid-input-bg-color: hsl(0, 100%, 7%); /* SCEditor */ --sce-brightness-filter: brightness(125%); --sce-toolbar-group-bg: hsl(247, 50%, 5%); --sce-toolbar-group-border-color: hsl(230, 15%, 20%); /* Slider */ --sy-pager-link-bg-color: hsl(247, 24%, 14%); --sy-pager-link-box-shadow: inset 0px -3px 0px hsla(0, 0%, 100%, 8%); /* Style Color Picker */ --styleselect-color-blue: hsl(206, 31%, 46%); --styleselect-color-red: hsl(6, 31%, 46%); --styleselect-color-green: hsl(106, 31%, 46%); --styleselect-color-purple: hsl(280, 31%, 46%); /* Two Factor Auth Code Container */ --tfacode-bg-color: hsl(228, 24%, 14%); /* The "new" button */ --new-button-bg-color: hsl(249, 29%, 19%); --new-button-border-radius: 9px; --new-button-font-family: verdana, sans-serif; --new-button-font-size: 9px; --new-button-font-weight: 700; --new-button-line-height: 15px; --new-button-txt-color: hsl(0, 0%, 100%); --new-button-txt-color-visited: hsl(0, 0%, 100%); --new-button-txt-color-hover: hsl(0, 0%, 100%); /* Toggle */ --toggle-bg: #1e2435 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAABECAMAAADTNBe3AAAAb1BMVEVHcExZj71Zj71YirtZj71Zj71djr9GqL5Zj71Zj71ZkL1ajLtZj71Zj71akL5XkL1bkr5Yj71Yj71Zj71Zj71ajrxYj75Ykb1aj71Zj71Yj71ZkL1Zj71Zj71RlLxZkL1Zjr1aj71ajb5YkL1Zj71qfufzAAAAI3RSTlMA0bwGX6MNAv3qRBZ59jo1EVAx+sMs4CKSyYiXq9wJVGyLSjWTTfUAAADpSURBVBgZ7cFHkoMwAATAIUrkDDbYONT8/41LURRLkODmE924/JLr4szthhOJlDEOWQZpWDgSchDiQBNxEDXQMzkyBXRsTmxopB4nXgA1hzMHSr7kPx8K/ZNkdH84pkfy2WOvJUvbxUD4jmSLnap4vjDLyyLHhri3FhbEuxRYs7/YiF9Yc7Hj4nLRiAW2EqxVjxQrfZdj41NnWEiMD7b6mmaFSdDJuseOT/L+zlMRZI+C9KHgcMGBSuBx5gVQsjmzoSZMTkoBjSbiKKqgFXIUQs8yODAsHEgkKWMc6sgbjrm1l+JEluHyQ3/hAhoP/b3Z7wAAAABJRU5ErkJggg==) no-repeat 0 0 / 17px; --toggle-bg-hover: hsl(230, 24%, 20%); --toggle-border-color: hsl(228, 15%, 30%); --toggle-border-style: solid; --toggle-border-width: 1px; --toggle-border-radius: 4px; --toggle-box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(255, 255, 255, 0.05) inset, 0 -5px 4px rgba(0,0,0,.2) inset; --toggle-box-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.45) inset; /* ToolTips */ --tooltip-bg-color: hsl(247, 24%, 14%); --tooltip-border-color: hsl(228, 15%, 30%); --tooltip-border-style: solid; --tooltip-border-width: 1px; --tooltip-txt-color: hsl(0, 0%, 90%); --tooltip-border-radius: 4px; --tooltip-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35), 0 0px 10px rgba(0, 0, 0, 0.08) inset; /* Window Backgrounds */ --window-approve-topic-bg-color: hsl(0, 60%, 20%); --window-approve-post-bg-color: hsl(0, 60%, 20%); --window-bg-color: hsl(229, 22%, 10%); --window-bg-even-color: hsl(229, 22%, 10%); --window-bg-odd-color: hsl(229, 22%, 10%); --window-locked-bg-color: hsl(228, 21%, 14%); --window-sticky-bg-color: hsl(45, 35%, 18%); --window-sticky-locked-bg-color: hsl(45, 35%, 14%); --window-target-bg-color: hsl(258, 28%, 18%); --window-table-row-bg-hover-color: hsl(258, 28%, 20%); /* Video Container */ --video-container-bg-color: hsl(0, 0%, 0%); /* Inline SVG backgrounds */ --menu-wave-image: url("data:image/svg+xml;utf8,"); --footer-doodle-image: url("data:image/svg+xml;utf8,"); --header-doodle-image: url("data:image/svg+xml;utf8,"); --display-title-doodle-image: url("data:image/svg+xml;utf8,"); --main-container-ribbon-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2764%27%20viewBox%3D%270%200%2028%2064%27%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2710%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(335%2C71%25%2C65%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%2310084%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2726%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(195%2C70%25%2C75%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%239733%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2742%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(335%2C71%25%2C65%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%2310084%3B%3C%2Ftext%3E%0A%20%20%3Ctext%20x%3D%2714%27%20y%3D%2758%27%20text-anchor%3D%27middle%27%20font-size%3D%2715%27%20fill%3D%27hsl(195%2C70%25%2C75%25)%27%20font-family%3D%27Inter%2C%20Arial%2C%20sans-serif%27%20opacity%3D%270.18%27%3E%26%239733%3B%3C%2Ftext%3E%0A%3C%2Fsvg%3E"); --spiral-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cpath%20d%3D%27M60%2012%20C100%2012%20108%2040%20108%2060%20C108%2088%2088%20108%2060%20108%20C40%20108%2024%2094%2024%2074%20C24%2054%2040%2044%2056%2044%20C72%2044%2084%2056%2084%2072%20C84%2084%2076%2092%2064%2092%20C52%2092%2044%2084%2044%2072%20C44%2064%2050%2058%2058%2058%20C66%2058%2064%2062%2064%2064%27%20fill%3D%27none%27%20stroke%3D%27hsl%28195%2C80%25%2C60%25%29%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%272%27%20fill%3D%27hsl%28195%2C80%25%2C60%25%29%27%2F%3E%3C%2Fsvg%3E); } /* You can find detailed information at https://wiki.simplemachines.org/smf/Curve2_CSS */ /* Index */ html { background: var(--html-bg-color); scroll-padding-top: 3rem; } body { background: var(--body-bg-color); background-size: 50px 50px; font-family: var(--body-font-family); font-size: var(--body-font-size); line-height: var(--body-line-height); color: var(--body-txt-color); display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 0; } body::before { content: ""; position: absolute; inset: 0; background-image: var(--body-doodle-image); z-index: -1; background-repeat: repeat; background-size: 300px 300px; background-position: 0 0; opacity: 0.2; } ::selection { text-shadow: none; background: var(--selection-bg-color); color: var(--selection-txt-color); } /* General reset */ * { box-sizing: border-box; padding: 0; margin: 0; } ul, ol { list-style: none; } ul.normallist { list-style-type: disc; padding: 0 0 0 15px; } table { empty-cells: show; } abbr { border-bottom: 0.1em dotted; } input, button, select, textarea { color: var(--ibst-txt-color); font-family: var(--ibst-font-family); font-size: var(--ibst-font-size); line-height: var(--ibst-font-line-height); background: var(--ibst-bg-color); outline: none; border: var(--ibst-border-width) var(--ibst-border-style) var(--ibst-border-color); vertical-align: middle; border-radius: 9px; box-shadow: var(--ibst-box-shadow); padding: 0.3em 0.4em; } input:hover, textarea:hover, button:hover, select:hover { outline: none; border-color: var(--ibst-hover-border-color); background: var(--ibst-hover-bg-color); } textarea:hover { background: var(--ibst-textarea-hover-bg-color); } input:focus, textarea:focus, button:focus, select:focus { outline: none; border-color: var(--ibst-focus-border-color); background: var(--ibst-focus-bg-color); } input::placeholder, textarea::placeholder { color: var(--placeholder-txt-color); opacity: 1; } input, button, select { padding: 0 0.4em; min-height: 2em; line-height: 2em; } select { padding: 0.22em 0.2em; /* selects don't apply line-height */ } /* Selects with more than one line */ select[size] { height: auto; } input[type="file"] { padding: 2px; height: auto; } /* Remove default mozilla dotted borders */ input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; } /* Prevent inputs and images overflowing */ img, input, select, textarea { max-width: 100%; } /* This is a specific issue on Ubuntu - Chrome */ #chrome input { font-family: "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; } /* The following is necessary */ textarea { font-size: 1em; } /* Use a consistent monospace font everywhere */ .monospace, .bbc_code, .phpcode, pre { font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace; } .sceditor-container textarea, .sceditor-container textarea:focus { box-shadow: none; } #quick_edit_body_container textarea, .move_topic textarea, dd textarea { width: 100%; min-height: 100px; } /* Apply the font only to these elements */ input, button, select { font-size: 0.9rem; } /* Number inputs don't support size nor width, so add some common ones here and set a default... */ input[type="number"] { padding-right: 0; /* Removes weird white space after arrows in some browsers */ width: calc(4ch + 15px + 0.8em); } input[type="number"][size="2"], input[type="number"][size="1"] { width: calc(2ch + 15px + 0.8em); } input[type="number"][size="3"] { width: calc(3ch + 15px + 0.8em); } input[type="number"][size="5"] { width: calc(5ch + 15px + 0.8em); } input[type="number"][size="6"] { width: calc(6ch + 15px + 0.8em); } select option { padding: 0 4px; } select { color: var(--ibst-txt-color); } /* Fieldsets are used to group elements */ fieldset { padding: 18px; margin: 0 0 6px 0; border: var(--fieldset-border-width) var(--fieldset-border-style); border-color: var(--border-color); border-radius: var(--fieldset-border-radius); background: var(--window-bg-color); } fieldset legend { font-weight: bold; color: var(--fieldset-legend-txt-color); box-shadow: none; border: none; } summary { margin: 5px 0; } /* Define strong as bold, and em as italics */ /* Note: in some particular places, strong has been redefined as font-weight: 600; */ /* This gives a better effect for those areas, and will default to bold for fonts which do not support numerical font-weight */ strong, .strong { font-weight: bold; color: var(--strong-txt-color); } .cat_bar strong { color: var(--cat-bar-strong-txt-color); } em, .em { font-style: italic; } /* Default color on these tags */ h1, h2, h3, h4, h5, h6 { font-size: var(--heading-font-size); color: var(--heading-txt-color); } /* All input elements that are checkboxes or radio buttons shouldn't have a border around them */ input[type="checkbox"], input[type="radio"] { border: none; background: none; vertical-align: middle; box-shadow: none; margin: 0 3px; filter: var(--checkbox-and-radio-bg-color); } .moderationbuttons_mobile_check { display: none; } /* Give disabled input elements a different style */ input[disabled], textarea[disabled], select[disabled], .button.disabled, .button[disabled]:hover { background: var(--ibst-disabled-bg-color); color: var(--ibst-disabled-txt-color); border-color: var(--ibst-disabled-border-color); opacity: 0.8; cursor: default; } /* Standard horizontal rule.. ([hr], etc.) */ hr { border: none; margin: 12px 0; height: 2px; background: var(--horizontal-rule-bg-color); box-shadow: var(--horizontal-rule-box-shadow); } /* This is about links */ a, a:visited { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; cursor: pointer; transition: ease 0.15s; } /* Help popups require a different styling of the body element. */ /* Deprecated? */ body#help_popup { padding: 12px; } #likes li { clear: both; padding: 1px 0; display: flex; align-items: center; } #likes .avatar { height: 5em; width: 5em; margin: 0 10px 0 0; } #likes li .like_profile { flex: 1 0 auto; } #likes li .like_time { padding: 4px 0; } #likes .description { font-style: italic; opacity: 0.4; font-size: 0.9em; display: block; } .msg_like span { margin: 0px; } /* The "new" button */ .new_posts, a.new_posts { display: inline-block; position: relative; top: -2px; padding: 0 4px; background: var(--new-button-bg-color); color: var(--new-button-txt-color)!important; font-family: var(--new-button-font-family); font-size: var(--new-button-font-size); font-weight: var(--new-button-font-weight); line-height: var(--new-button-line-height); border-radius: var(--new-button-border-radius); padding: 4px 8px 4px; } a.new_posts:visited { color: var(--new-button-txt-color-visited); } .new_posts:hover, .new_posts:focus { color: var(--new-button-txt-color-visited); text-decoration: none; } /* Common classes to easy styling. ------------------------------------------------------- */ .floatright { float: right; } .floatleft { float: left; } .floatnone { float: none; } .flow_auto { overflow: auto; } .flow_hidden { overflow: hidden; } .clear { clear: both; } .clear_left { clear: left; } .clear_right { clear: right; } /* Default font sizes: small (8pt), normal (10pt), and large (14pt). */ .smalltext, tr.smalltext th { font-size: 0.9em; } .largetext { font-size: 1.4em; } h3.largetext { font-size: large; } .xlargetext { font-size: x-large; } .centertext, .centercol { margin: 0 auto; text-align: center; } .righttext { margin-left: auto; margin-right: 0; text-align: right; } .lefttext { margin-left: 0; margin-right: auto; text-align: left; } .justifytext { text-align: justify; } .double_height { line-height: 2em; } /* some common padding styles */ .padding { padding: 8px; } .main_section, .lower_padding { padding-bottom: 6px; } .half_content { width: 50%; display: inline-block; vertical-align: top; } .half_content:nth-of-type(odd) { margin-right: -0.25em; padding-right: 0.3%; } .half_content:nth-of-type(even) { margin-left: -0.2em; padding-left: 0.3%; } /* Blockquote stylings */ blockquote { margin: 0 0 14px 0; padding: 12px 14px; font-size: var(--quote-block-font-size); background: var(--quote-block-standard-bg); border: 1px solid var(--quote-block-border-color); border-left: 4px solid var(--quote-block-border-lr-color); border-radius: 10px 10px; } blockquote cite { display: block; border-left: var(--quote-cite-border-width) var(--quote-cite-border-style) var(--quote-cite-border-color); font-size: var(--quote-cite-font-size); margin: 0 0 8px -10px; padding: 8px 10px; background: var(--quote-cite-bg-color); border-radius: 8px; font-weight: 600; } blockquote cite::before { color: var(--quote-txt-color); font-size: var(--quote-cite-before-font-size); font-style: var(--quote-cite-before-font-style); content: "\275D"; margin-right: 3px; vertical-align: middle; } .bbc_standard_quote { background-color: var(--quote-block-standard-bg); border-top: 0; } .bbc_alternate_quote { background-color: var(--quote-block-alt-bg); margin-right: 10px; } /* A code block - maybe PHP ;). */ .bbc_code { display: block; font-size: var(--code-font-size); background: var(--code-bg-color); border: 1px solid var(--code-border-color); border-left: 4px solid var(--code-border-color); border-radius: 0 0 10px 10px; margin: 0 0 14px 0; padding: 10px 12px; overflow: auto; white-space: nowrap; max-height: 25em; } /* The "Quote:" and "Code:" header parts... */ .codeheader { color: var(--code-header-txt-color); font-size: var(--code-header-font-size); padding: 8px 12px; background: var(--code-header-bg-color); border: 1px solid var(--code-border-color); border-left: 4px solid var(--code-border-color); border-radius: 10px 10px 0 0; margin: 0 0 -1px 0; } .quoteheader { color: var(--quote-header-txt-color); font-size: var(--quote-header-font-size); padding: 6px 12px; background: var(--quote-cite-bg-color); border: 1px solid var(--quote-block-border-color); border-left: 4px solid var(--quote-block-border-lr-color); border-radius: 10px 10px 0 0; margin: 0 0 -1px 0; font-weight: 600; } /* For links to change the code stuff... */ .codeoperation { font-weight: normal; } /* Expand code bbc */ .expand_code { max-height: none; } /* Styling for BBC tags */ .bbc_link { border-bottom: var(--bbc-link-hover-border-width) var(--bbc-link-hover-border-style) var(--bbc-link-hover-border-color); } .bbc_link:hover { text-decoration: none; border-bottom: var(--bbc-link-hover-border-width) var(--bbc-link-hover-border-style) var(--bbc-link-hover-border-color); } .bbc_size { line-height: 1.4em; } .bbc_color a { color: inherit; } .bbc_table { font: inherit; color: inherit; } .bbc_table td { font: inherit; color: inherit; vertical-align: top; } .bbc_list { text-align: left; padding: 0 0 0 35px; list-style-type: inherit; } .bbc_float { margin-bottom: 1em; /* default max-width to use if none was specified in the BBC */ max-width: 45%; } .bbc_float.floatleft { margin-right: 1em; clear: left; } .bbc_float.floatright { margin-left: 1em; clear: right; } .bbc_img { object-fit: contain; } .postarea .bbc_img.resized:hover { cursor: pointer; } .bbc_img.original_size { height: auto !important; width: auto !important; max-height: none; max-width: 100%; } /* No image should have a border when linked. */ a img { border: 0; } /* Those collapse and expand icons are wonderful. */ .toggle_up::before, .toggle_down::before { width: 28px; height: 17px; display: inline-block; background: transparent url(../images/custom/collapse.png) no-repeat 0 0 / 28px; overflow: hidden; content: ''; vertical-align: middle; margin: 0px 5px 0 5px; border: none; border-radius: 3px; box-shadow: none; transition: background-color 0.25s; padding: 0; } .toggle_down::before { background: transparent url(../images/custom/expand.png) no-repeat 0 0 / 28px; box-shadow: none; } /* Generally, those [?] icons. This makes your cursor a help icon. */ .help { cursor: help; opacity: 0.9; } .help:hover { opacity: 1; } /* Highlighted text - such as search results. */ .highlight { font-weight: bold; color: var(--highlight-txt-color); font-size: 1.1em; background-color: inherit; } /* the page navigation area */ .pagesection { padding: 2px 0; overflow: hidden; } .pagesection .pagelinks { display: flex; } .pages::after, .jump_to::after, .code::after, strong[id^='child_list_']::after { content: ":"; } .pages { font-size: 0.9em; margin-left: 4px; display: inline-flex; justify-content: center; align-items: center; } #main_content_section .pagesection { margin: 4px 0 0 0; } .nav_page { position: relative; min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; font-weight: bold; transform: rotate(5deg); margin: 0 4px; } .nav_page:hover { text-decoration: none; } .nav_page::before { content: ""; position: absolute; inset: 0; border: 3px dashed var(--nav-page-border-color); border-radius: 50%; transform: rotate(2deg); } .nav_page::after { content: "♡"; position: absolute; bottom: -10px; right: -10px; font-size: 1.2em; transform: rotate(10deg); opacity: 0.6; } .nav_page:hover { animation: wiggle 0.4s ease-in-out; } .nav_page .main_icons.next_page::before { content: "→"!important; font-size: 1.4em; margin-top: -8px; transform: rotate(9deg); } .nav_page .main_icons.previous_page::before { content: "←"!important; font-size: 1.4em; margin-top: -8px; transform: rotate(9deg); } .expand_pages { font-weight: bold; cursor: pointer; } .current_page { color: var(--current-page-txt-color); font-weight: bold; position: relative; width: 44px; height: 44px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; font-weight: bold; transform: rotate(5deg); margin: 0 4px; } .current_page:hover { animation: wiggle 0.4s ease-in-out; } .current_page::before { content: ""; position: absolute; inset: 0; border: 3px dashed var(--current-page-border-color); border-radius: 50%; transform: rotate(2deg); } .current_page::after { content: "✦"; position: absolute; bottom: -10px; right: -10px; font-size: 1.2em; transform: rotate(10deg); opacity: 0.9; } /* Posts and personal messages displayed throughout the forum. */ .post { overflow: auto; line-height: 1.4em; padding: 1px 0; } /* Calendar colors for birthdays, events and holidays */ .birthday { color: var(--birthday-txt-color); } .event { color: var(--event-txt-color); } .holiday > span { color: var(--holiday-txt-color); } /* Events that are currently selected on the calendar. Won't see it much, probably. */ .sel_event { font-weight: bold; } .warn_moderate { color: var(--warn-moderate-txt-color); } .warn_watch, .success { color: var(--warn-watch-txt-color); } a.moderation_link, a.moderation_link:visited { font-weight: bold; padding: 1px 1px; background: var(--moderation-link-bg-color); border-radius: var(--moderation-link-border-radius); border-radius: 50%; color: var(--amt-txt-color)!important; } /* AJAX notification bar ------------------------------------------------------- */ #ajax_in_progress { background: var(--ajax-in-progress-bg-color); border-bottom: var(--ajax-in-progress-border-width) var(--ajax-in-progress-border-style) var(--ajax-in-progress-border-color); color: var(--ajax-in-progress-txt-color); text-align: center; font-size: 1.6em; padding: 8px; width: 100%; line-height: 25px; position: fixed; top: 0; left: 0; } #ajax_in_progress a { color: var(--ajax-in-progress-link-color); text-decoration: underline; font-size: 0.9em; float: right; margin-right: 20px; } /* Lists with settings use these a lot. ------------------------------------------------------- */ dl.settings { clear: right; overflow: auto; margin: 0 0 10px 0; padding: 5px; } dl.settings dt { width: 56%; float: left; margin: 0 0 10px 0; clear: both; } dl.settings dt.windowbg { width: 98%; float: left; margin: 0 0 3px 0; padding: 0 0 5px 0; clear: both; } dl.settings dd { width: 42%; float: right; margin: 0 0 3px 0; } dl.settings img { margin: 0 10px 0 0; vertical-align: middle; } /* a general table class */ table.table_grid { border-collapse: collapse; margin: 0; width: 100%; } table.table_grid td { padding: 3px; } /* Some predefined widths (mostly for tables) */ .table_grid.half_content, .half_table { width: 50%; } .equal_table { width: 33%; } .quarter_table { width: 25%; } .small_table { width: 10%; } .table_icon { width: 5%; } .title_bar th, .windowbg th { padding: 2px 8px; } .title_bar .sort_down, .title_bar .sort_up { margin: -3px 0 0 2px; } /* GenericList */ .additional_row { padding: 6px 0 6px 0; } .additional_row::after { content: ""; display: block; clear: both; } img.sort, .sort { margin-bottom: -4px; margin-left: 4px; } /* table_grid styles for Profile > Show Permissions. */ #permissions table.table_grid td { padding: 5px 10px; cursor: default; } .postbg { border-left: var(--border-width) var(--border-style) var(--border-color); border-right: var(--border-width) var(--border-style) var(--border-color); } /* Styles used by the auto suggest control. ------------------------------------------------------- */ .auto_suggest_div { position: absolute; visibility: hidden; border-radius: var(--auto-suggest-border-radius); outline: none !important; border: var(--auto-suggest-border-width) var(--auto-suggest-border-style) var(--auto-suggest-border-color); z-index: 100; } .auto_suggest_item { background: var(--auto-suggest-item-bg-color); padding: 1px 4px; } .auto_suggest_item_hover { background: var(--auto-suggest-item-hover-bg-color); cursor: pointer; color: var(--auto-suggest-item-hover-txt-color); padding: 1px 4px; } /* Styles for the standard dropdown menus. ------------------------------------------------------- */ .dropmenu, #top_info { position: relative; } /* Level 1 button background. */ .dropmenu > li { display: inline-block; margin: 0px; font-size: 1em; line-height: 1.9em; padding: 0px; font-family: "Unkempt", sans-serif; font-weight: 700; } #top_info > li { display: inline-block; margin: 0px; font-size: 1em; line-height: 1.9em; padding: 0px; } /* Disable default focus outlines */ .dropmenu a { outline: 0; box-shadow: var(--dropmenu-link-box-shadow); } /* Squiggle borders (top & bottom) for dropmenu — theme-aware via color on the element */ .dropmenu { /* use a separate color for the squiggle so links keep their own color */ background-image: var(--dropmenu-squiggle), var(--dropmenu-squiggle); background-repeat: repeat-x, repeat-x; background-position: top center, bottom center; background-size: var(--dropmenu-squiggle-size), var(--dropmenu-squiggle-size); background-origin: padding-box; background-clip: padding-box; /* keep dropmenu layering intact */ z-index: 5; } .dropmenu::after { /* ensure existing heart/icon stays above the squiggle */ z-index: 6; } /* For cases where we want to spotlight something specific to an item, e.g. an amount */ .amt { margin-left: 3px; padding: 1px 6px; color: var(--amt-txt-color); background: var(--amt-bg-color); border-radius: var(--amt-border-radius); font-weight: 700; font-family: "Inter", "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif; } .dropmenu li .active .amt, #top_info li .active .amt { background: var(--amt-active-bg-color); color: inherit; } #top_info .top_menu.visible { display: block; } /* Needed for new PM notifications. */ .dropmenu li strong { color: var(--dropmenu-strong-txt-color); } .dropmenu li a { padding: 11px 11px; display: block; border: none; color: var(--menu-link-color); } #top_info > li > a { background: transparent; padding: 0px 4px; display: block; margin: 0px; text-decoration: none; color: var(--top-info-link-color); position: relative; font-size: 0.95rem; border-bottom: 2px dashed transparent; text-shadow: var(--top-info-link-txt-shadow); } /* Level 1 active button. */ .dropmenu a.active { background: var(--menu-link-bg-active-color); color: var(--menu-link-active-color); font-weight: bold; } #top_info a.active { color: var(--top-info-active-link-color); font-weight: bold; } /* Level 1 hover effects. */ .dropmenu > li:hover > a { color: var(--menu-link-hover-color); cursor: pointer; text-decoration: none; background: var(--menu-link-bg-hover-color); transition: ease 0.7s; } .dropmenu > li > a:focus { color: var(--menu-link-focus-color); cursor: pointer; text-decoration: none; background: var(--menu-link-bg-focus-color); } #top_info > li > a:focus, #top_info > li > a.open { color: var(--top-info-link-txt-color); cursor: pointer; text-decoration: none; border-bottom: 2px dashed var(--top-info-link-focus-border-color); cursor: pointer; } #top_info > li:hover > a { background: transparent; color: var(--top-info-link-hover-color); text-decoration: none; border-bottom: 2px dashed var(--top-info-link-hover-border-color); cursor: pointer; } #top_info > li:hover > a i.fa-solid.fa-envelope::before, #top_info > li:hover > a i.fa-solid.fa-envelope::before { content: "\f2b6"; } #top_info > li > a:focus i.fa-solid.fa-envelope::before, #top_info > li > a.open i.fa-solid.fa-envelope::before { content: "\f2b6"; } /* Level 1 active button. */ .dropmenu li a.active:hover, .dropmenu li:hover a.active { background: var(--menu-link-bg-active-hover-color); color: var(--menu-link-active-hover-color); text-shadow: none; } a.mobile_user_menu, a[class^="mobile_generic_menu_"] { display: none; } #main_menu { background: var(--menu-bg-color); border: none; border-left: none; border-right: none; margin-bottom: 20px; position: relative; } #main_menu::before { content: ""; position: absolute; left: 0; top: -4px; width: 100%; height: 6px; background-repeat: repeat-x; background-position: center; background-size: 28px 6px; background-image: var(--menu-wave-image); } #main_menu::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 6px; background-repeat: repeat-x; background-position: center; background-size: 28px 6px; background-image: var(--menu-wave-image); } .dropmenu::after { content: "❤"; position: absolute; height: 20px; right: 15px; top: 13px; opacity: 1; color: var(--menu-heart-color); } /* User information. */ .profile_user_info, .profile_user_avatar { display: inline-block; margin: 0 9px; vertical-align: middle; } .profile_user_avatar img.avatar { max-width: 100px; } .profile_username { font-size: 150%; display: block; } .profile_user_links ol { margin-left: 0; clear: both; column-count: 2; } .profile_user_links li { font-size: .8rem; line-height: 2em; padding-left: 10px; -webkit-hyphens: auto; hyphens: auto; } /* Fixes bug with border-box on scrollable js */ .scrollable, .scrollable *, #profile_menu { box-sizing: content-box; } .top_menu.scrollable { max-height: 30em; } .pm_unread, .alerts_unread { margin-top: 5px; border-top: var(--border-width) var(--border-style) var(--border-color); } .unread_notify { border-bottom: var(--border-width) var(--border-style) var(--border-color); } .no_unread { margin-top: 5px; text-align: center; } .unread_notify:hover { background: var(--unread-notify-hover-bg-color); text-decoration: none; } .unread_notify:last-child { border-bottom: none; } .unread_notify { display: flex; align-items: center; padding: 6px 5px; line-height: 20px; } .unread_notify.alert_read { opacity: 0.5; outline: none; filter: grayscale(1); } .unread_notify strong { font-weight: 600; } .unread_notify .avatar { width: 40px; height: 40px; object-fit: scale-down; margin: 4px 4px 4px 0; display: inline-block; color: transparent; /* For broken images */ vertical-align: bottom; } .unread_notify_image { position: relative; width: 44px; margin-right: 4px; text-align: center; } .unread_notify_image span.alert_icon { display: block; line-height: 1em; } .unread_notify_image .avatar + .alert_icon { width: auto; position: absolute; right: 0; top: 0; } .unread_notify .details { display: inline-block; vertical-align: top; max-width: calc(100% - 48px); } #pm_menu .subject { font-weight: bold; } /* Levels 2 and 3 submenu wrapper. */ .dropmenu li ul { z-index: 90; position: absolute; display: none; min-width: 18.2em; padding: 0.5em; font-weight: normal; background: var(--dropmenu-bg-color); border: none; margin-top: 0px; margin-left: -2px; border-top: none; } .top_menu { z-index: 90; position: absolute; display: none; min-width: 18.2em; padding: 0.5em; font-weight: normal; border: none; border-radius: var(--top-menu-border-radius); box-shadow: none; background: var(--top-menu-bg-color); color: var(--top-info-link-color); } .top_menu a { color: var(--top-info-link-color); text-decoration: none; } .top_menu strong { color: var(--top-menu-strong-txt-color); } /* Level 2 link background. */ .dropmenu li li { margin: 0; padding: 0; width: 17em; font-size: 1em; border-radius: var(--top-menu-border-radius); border: none; } /* Necessary to allow highlighting of 1st level while hovering over submenu. */ .dropmenu li:hover li a, .dropmenu li li a { position: relative; background: none; padding: 6px 12px; color: var(--dropmenu-link-color); border: 2px dashed transparent; line-height: 2em; } .dropmenu li li a > img { vertical-align: middle; } /* The profile/pm menus are declared off .dropmenu li ul for consistency but have other characteristics. */ .top_menu { min-width: 25em; } .top_menu .login { width: 100%; } .top_menu .login dt { text-align: left; width: 55%; } .top_menu .login dd { width: 43%; } .top_menu .login input { width: 90%; } /* Level 3 submenu wrapper positioning. */ .dropmenu li ul ul { margin: -2em 0 0 15.3em; } /* Level 3 maintains font-size the same as Level 2. */ .dropmenu li li li a { font-size: 1em; } /* Levels 2 and 3 hover effects. */ .dropmenu li li:hover { border: none; } .dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover { background: var(--dropmenu-hover-bg-color); color: var(--dropmenu-link-hover-color); text-decoration: none; border: 2px dashed var(--dropmenu-hover-border-color); } /* Reposition Level 2 submenu as visible on hover. */ .dropmenu li:hover ul { display: block; } /* Hiding Level 3 submenu off hover. */ .dropmenu li:hover ul ul, .dropmenu li ul ul, .dropmenu li:hover ul ul ul, .dropmenu li ul ul ul { left: -9999px; } /* Reposition as visible on hover. */ .dropmenu li li:hover ul, .dropmenu li li ul { left: -14px; } .dropmenu li li.subsections > a::after { position: absolute; padding: 5px 0; right: 10px; font-family: var(--dropmenu-subsections-font-family); font-size: var(--dropmenu-subsections-font-size); line-height: var(--dropmenu-subsections-line-height); content: "\25ba"; } /* Highlighting of current section */ .dropmenu li li a.chosen { font-weight: bold; } /* The extra menu rows for admin sections, etc. */ #adm_submenus { margin: 0 0 6px 0; overflow: hidden; } /* Styles for the standard button lists. ------------------------------------------------------- */ .buttonlist, .buttonrow, .pagelinks { z-index: 100; padding: 5px 8px; } .button, a.button, .quickbuttons > li > a, .inline_mod_check { display: inline-flex; padding: 6px 12px; color: var(--button-txt-color); font-size: var(--button-font-size); font-weight: 600; font-family: "Comic Neue", "Comic Sans MS", sans-serif; line-height: var(--button-line-height); text-transform: uppercase; cursor: pointer; min-height: var(--button-min-height); border: var(--button-border-width) var(--button-border-style); border-color: var(--button-border-color); border-radius: var(--button-border-radius); box-sizing: border-box; vertical-align: middle; background: var(--button-bg-color); box-shadow: var(--button-box-shadow); text-shadow: 0px 1px 1px var(--button-txt-shadow-color); transition: transform .16s cubic-bezier(.3,.9,.6,1.4), box-shadow .16s cubic-bezier(.3,.9,.6,1.4); letter-spacing: 0.3px; } .unread_side_buttons { margin-bottom: 10px; } html[lang="el-GR"] .button, html[lang="el-GR"] .quickbuttons > li > a, html[lang="el-GR"] .inline_mod_check { text-transform: capitalize; } .pagesection .button { color: var(--button-txt-color); } .button:hover, .button:focus, .quickbuttons > li:hover > a, .quickbuttons > li > a:focus { color: var(--button-txt-color-hover-and-focus); border-color: var(--button-hover-border-color); text-decoration: none; } .button:hover, .button:focus { color: var(--button-txt-color-hover); box-shadow: var(--button-hover-box-shadow); transform: translateY(3px) scale(.95); } .button:hover, #search_form .button:hover { background: var(--button-bg-hover); } /* the active one */ .button.active { background: var(--button-bg-active); color: var(--button-txt-color-active); font-weight: var(--button-active-font-weight); border: var(--button-active-border-width) var(--button-active-border-style) var(--button-active-border-color); } .button.active:hover, .button.active:focus { color: var(--button-txt-color-active-and-focus); background: var(--button-bg-focus); box-shadow: none; } .cat_bar .button { box-shadow: none; } /* In a .buttonrow, the buttons are joined together */ .buttonrow { margin: 0 5px; } .buttonrow .button { display: table-cell; border-radius: 0; } .buttonrow .button:first-child { border-radius: 3px 0 0 3px; } .buttonrow .button:last-child { border-radius: 0 3px 3px 0; } /* in a titlebg, the buttonlist is of small height */ .titlebg .buttonlist { margin: 0; padding: 0; } /* Styles for the general looks of the theme. ------------------------------------------------------- */ /* Box-shadow only on this one. */ #wrapper { clear: both; background: transparent; border: none; box-shadow: none; padding: 0px; } /* Set maximum width limit for content */ #top_section .inner_wrap, #wrapper, #header .inner_wrap, #footer .inner_wrap, .footer_copyright, #main_menu .inner_wrap, #hero_section .inner_wrap { max-width: 1200px; margin: 0 auto; width: unset; } /* The framing graphics */ /* The top bar. */ #top_section { border-bottom: var(--top-section-border-width) var(--top-section-border-style) var(--top-section-border-color); box-shadow: var(--top-section-box-shadow); background: var(--top-section-bg-color); clear: both; } #top_section::after { content: ""; display: block; clear: both; } #top_section .inner_wrap { flex-direction: row; flex-wrap: nowrap; display: flex; justify-content: space-between; align-items: center; } #top_info { padding: 0px; z-index: 9; } #pm_menu, #alerts_menu, #profile_menu { right: 0; padding-right: 10px; } #alerts_menu_top { position: relative; } #alerts_menu_top .amt { text-indent: -9999px; white-space: nowrap; overflow: hidden; position: absolute; height: 12px; width: 3px; border-radius: 50%; right: 0px; } #pm_menu_top { position: relative; } #pm_menu_top .amt { text-indent: -9999px; white-space: nowrap; overflow: hidden; position: absolute; height: 12px; width: 3px; border-radius: 50%; right: -4px; } #profile_menu_top > img.avatar { height: 16px; max-width: 16px; margin: 0px 4px 1px 1px; align-content: center; display: inline-flex; vertical-align: text-top; } #profile_menu_top::after { content: " \25BC"!important; } #profile_menu_top { font-weight: 700; } .notice { font-weight: bold; } #languages_form, #search_form { padding: 5px 0; margin-right: 10px; display: inline-flex; align-items: center; } #languages_form { margin: 0 0 0 10px; } .search-form input, .search-form button, .search-form select { font-size: 1.23em; } .search-form input { padding: 4px 8px; background: var(--ibst-bg-color); border: none; color: var(--top-info-link-color); height: 2em; line-height: 2em; width: 200px; } .search-form input:hover, .search-form input:focus { background: var(--ibst-hover-bg-color); } .search-form input.button { background: var(--ibst-bg-color); padding: 0 10px; } .search-form input.button:hover{ background: var(--ibst-hover-bg-color); } .search-form button { background: var(--ibst-bg-color); padding: 0px 10px; border: none; color: var(--top-info-link-color); } .search-form button:hover{ background: var(--ibst-hover-bg-color); cursor: pointer; } .search-form button button:hover{ background: var(--ibst-hover-bg-color); cursor: pointer; } /* The logo and slogan. */ #header { padding: 0px; background: var(--header-bg-color); border-bottom: 3px dashed var(--header-border-color); position: sticky; top: 0; z-index: 10; min-height: 56px; } #header::after { content: ""; display: block; clear: both; } #header .inner_wrap { display: flex; justify-content: space-between; min-height: 53px; align-items: center; } .header-doodles { display: block; width: 260px; height: 43px; margin: 0 auto; background-image: var(--header-doodle-image); background-repeat: no-repeat; background-size: contain; background-position: center; } .header-doodles svg { display: none; } /* The main title. */ h1.forumtitle { font-size: var(--forum-title-font-size); font-family: var(--forum-title-font-family); padding: 0px; font-weight: 700; flex: 1 1 auto; max-width: 360px; } h1.forumtitle a { color: var(--forum-title-link-color); text-shadow: var(--forum-title-txt-shadow); text-decoration: none; } .forumtitle::before{ content: "✦"; color: var(--forum-title-link-color); } /* Even guests need to be aligned */ .welcome { padding: 0 10px; line-height: 2.5em; } .user_panel { padding: 0px; margin: 0px; display: inline-flex; } /* Hero Section */ #hero_section { background: var(--hero-section-bg-color); padding: 20px 0px; margin-bottom: 20px; border-bottom: 3px dashed var(--hero-section-border-color); padding: 4rem 2rem 3rem; text-align: center; position: relative; overflow: hidden; } #hero_section .inner_wrap { flex-direction: column; flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; max-width: 720px; } #hero_section h2 { font-size: 2.7rem; margin: 0 0 1rem 0; position: relative; } .hero_heading { border-bottom: 6px dashed var(--hero-section-h2-border-color); padding-bottom: 20px; } .hero_text { font-family: "Comic Neue", sans-serif; } #hero_section p { font-size: 0.95rem; margin: 0 0 2rem 0; line-height: 1.6em; max-width: 520px; } #hero_section::before { position: absolute; width: 210px; height: 210px; background: var(--hero-section-accent-before-bg-color); opacity: 0.3; filter: blur(36px); border-radius: 50% 60% 40% 70%; content:""; top: -70px; left: 5%; z-index: 1; } #hero_section::after { position: absolute; width: 210px; height: 210px; background: var(--hero-section-accent-after-bg-color); opacity: 0.3; filter: blur(36px); border-radius: 50% 60% 40% 70%; content:""; bottom: -70px; right: 5%; z-index: 1; } /* Hero Button */ .hero_button { padding: 0.85rem 1.8rem; background: var(--hero-section-button-bg-color); border: 2px solid var(--hero-section-button-border-color); border-radius: 22px; font-size: 1rem; cursor: pointer; box-shadow: 3px 4px 0 var(--hero-section-button-shadow-color); transition: transform .16s cubic-bezier(.3,.9,.6,1.4), box-shadow .16s cubic-bezier(.3,.9,.6,1.4); display: inline-flex; align-items: center; gap: 0.5rem; margin: 0px 4px; position: relative; } a.hero_button, a.hero_button:hover { color: var(--hero-section-button-link-color); text-decoration: none; font-weight: 600; } .hero_button:hover { transform: translateY(3px) scale(.95); box-shadow: 0px 0px 0 var(--hero-section-button-shadow-color); } .hero_button:active { transform: translateY(4px) scale(.92); box-shadow: 0px 0px 0 var(--ink); transition: transform .08s ease-out, box-shadow .08s ease-out; } /* /* The user info, news, etc.*/ #upper_section { padding: 4px 2px 0 2px; } #inner_section { background: var(--inner-section-bg-color); padding: 0px 10px 0px 10px; } #inner_section::after { content: ""; display: block; clear: both; } /* The upper_section, float the two each way */ #inner_wrap { display: flex; justify-content: space-between; align-items: center; } #upper_section #inner_wrap { padding: 6px 0px; } /* The login form. */ #guest_form { overflow: hidden; font-size: 0.9em; margin-left: -2px; } /* News section. */ #inner_wrap .news { padding: 0 4px 0px 1ch; font-size: 0.9em; display: inline-flex; align-items: baseline; max-width: 50%; } #inner_wrap .news h2 { line-height: initial; } #inner_wrap .news h2, #inner_wrap .news p { display: inline; padding-left: 1ch; } .news_section { padding: 0px; margin: 8px 0px; font-size: 0.9em; display: flex; max-width: 100%; background: var(--news-bg-color); height: max-content; } .news_section_left { margin: 0px; padding: 0px 10px; background: var(--news-left-bg-color); font-size: 20px; } .news_section_right { margin: 0 ; width: 100%; padding: 0px 5px 0px 5px; } .news_section h2 { line-height: initial; padding: 2px 5px; } .news_section p { display: inline; } /* The navigation list (i.e. linktree) */ .navigate_section { padding: 0px; margin: 0px 0px 8px 0px; width: 100%; position: relative; } .navigate_section::before { content: "☯"; position: absolute; right: 10px; top: 5px; opacity: 0.2; font-size: 25px; } #main_content_section .navigate_section { margin: 4px 0 0 0; padding: 0; } .navigate_section ul { background: var(--breadcrumb-bg-color); margin: 0px; padding: 0 10px; font-family: var(--breadcrumb-font-family); font-size: var(--breadcrumb-font-size); overflow: hidden; border: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-border-color); border-radius: var(--breadcrumb-border-radius); } .navigate_section ul li { float: left; padding-bottom: 3px; line-height: 1.1em; color: var(--breadcrumb-txt-color); } .navigate_section ul li a, .navigate_section ul li em { padding: 4px 0 4px; margin-top: -4px; display: inline-block; color: var(--breadcrumb-link-color); } .navigate_section ul li span { display: inline-block; margin-top: 8px; } .navigate_section ul li .dividers { color: var(--breadcrumb-divider-color); font-family: var(--breadcrumb-divider-font-family); font-size: var(--breadcrumb-divider-font-size); padding: 0 2px 0 6px; } .navigate_section ul li .board_moderators a { padding: 4px 0; } .navigate_section a:hover span { text-decoration: underline; } .navigate_section a:nth-child(1) { transform: rotate(-2deg); } .navigate_section a:nth-child(2) { transform: rotate(1deg); } .navigate_section a:nth-child(3) { transform: rotate(-1deg); } .navigate_section a:nth-child(4) { transform: rotate(-2deg); } .navigate_section a:nth-child(5) { transform: rotate(1deg); } .navigate_section a:nth-child(6) { transform: rotate(-1deg); } /* The content section */ #content_section { margin: 0 auto; clear: both; } #main_content_section { padding: 0px 2px; } #main_content_section::after { content: ""; display: block; clear: both; } /* Footer is now full-width by default. */ /* The footer with copyright links etc. */ #footer { margin: 4em 0 0 0; padding: 8px 0 12px 0px; background: var(--footer-bg-color); border-top: var(--footer-border-width) var(--footer-border-style) var(--footer-border-color); flex: none; z-index: 1; } #footer li, #footer p, #footer a { font-size: var(--footer-font-size); color: var(--footer-txt-color); font-family: "Comic Neue", "Comic Sans MS", sans-serif; } #footer .footer_links { display: block; text-align: center; } #footer .copyright { display: block; font-family: "Comic Neue", "Comic Sans MS", sans-serif; } #footerfix { flex: 1 0 auto; } #footer .inner_wrap { padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; flex-direction: column; } #footer .inner_wrap::before { content: ""; position: absolute; left: 0; width: 180px; max-width: 20vw; height: 85px; background-image: var(--footer-doodle-image); background-repeat: no-repeat; background-size: contain; background-position: left center; transform: rotate(5deg); } #footer .inner_wrap::after { content: ""; position: absolute; right: 0; width: 180px; max-width: 20vw; height: 85px; background-image: var(--footer-doodle-image); background-repeat: no-repeat; background-size: contain; background-position: left center; opacity: 0.9; transform: scaleX(-1) rotate(5deg); } .footer_social_links { margin: 0px; padding: 4px 0px; } .footer-text { text-align: center; } .footer-text nav a { margin: 0 8px; text-decoration: none; color: var(--link); } .footer-text nav a:hover { text-decoration: underline; } /* Items to the right */ .footer_logo { padding: 0px; font-size: 2.5em; text-align: center; flex: 1; align-content: center; } .footer_logo a img[src$=".svg"] { width: 100% !important; } img#footerlogo { padding: 0px; font-size: 2.5em; text-align: center; flex: 1; } img#footerlogo { margin: 0px; } /* The posting icons */ #postbuttons_upper ul li a span { line-height: 19px; padding: 0 0 0 6px; } .mark_read { margin: -5px 0 16px 0; float: right; } .mark_read .buttonlist { margin: 0 4px; padding: 0; } .fix_rtl_names { display: inline-block; } /* The quick buttons */ .quickbuttons { margin: 0 0 5px; clear: right; float: right; text-align: right; } #recent .quickbuttons { margin: 0; } .quickbuttons > li { float: left; } .quickbuttons > li > a, .inline_mod_check { display: block; height: auto; padding: 4px 8px; line-height: 3em; margin: 0; border-radius: 0; } .quickbuttons > li:first-child > a { border-radius: 4px 0 0 4px; } .quickbuttons > li:last-child > a, .inline_mod_check:last-child { border-radius: 0 4px 4px 0; } .quickbuttons > li:only-child > a, .inline_mod_check:only-child { border-radius: 4px; margin: 2px; height: 23px; } .inline_mod_check input { position: relative; top: -2px; height: auto; } .moderationbuttons_check:focus { box-shadow: var(--moderationbuttons-check-focus-box-shadow); } .quick_edit, .post_options { position: relative; } /* Drop part of QuickButtons */ .post_options ul { display: none; position: absolute; top: 100%; right: -1px; z-index: 90; padding: 6px; background: var(--post-options-bg-color); font-weight: var(--post-options-font-weight); text-align: left; border: var(--post-options-border-width) var(--post-options-border-style) var(--post-options-border-color); border-radius: var(--post-options-border-radius); } .post_options:hover ul { display: block; } .post_options ul a { display: block; width: 13em; padding: 0 6px; line-height: 2.2em; text-decoration: none; border: none; border-radius: var(--post-options-link-border-radius); color: var(--button-txt-color); } .post_options ul a:hover, .post_options ul a:focus { background: var(--post-options-bg-hover-color); border: none; } /* Note: The next declarations are for keyboard access with js disabled. */ .quickbuttons ul li a:focus { margin: 0 -9910px 0 9910px; } /* Cancel for hover and/or js access. */ .quickbuttons ul li:hover a:focus, .quickbuttons ul li a:focus { margin: 0; } /* Fixes for quickbuttons Fix for quote on reply box */ #post_modify { border-radius: 4px; } /* The jump to box */ #display_jump_to { padding: 5px 0; margin: 4px 0; float: right; font-size: 1em; } #topic_icons #message_index_jump_to { padding: 0; float: right; } /* The category separator string is 29 dashes */ #display_jump_to_select, #message_index_jump_to_select, #search_jump_to_select, #quick_mod_jump_to_select, #list_integration_hooks select { width: 29ch; overflow: hidden; min-height: 30px; } .quickModifyMargin { margin: 10px 0 5px 0; padding-bottom: 5px; } /* Styles for edit event section ---------------------------------------------------- */ #post_event .roundframe { padding: 12px 12%; overflow: auto; } #post_event fieldset { padding: 6px; clear: both; } #post_event span.label { margin: 0 0.5em 0 2px; min-width: 60px; display: inline-block; } .event_options { line-height: 25px; display: flex; flex-flow: row wrap; } .event_options div { min-height: 25px; margin-bottom: 5px; flex: 1 0 auto; } .event_options_left { box-sizing: border-box; width: 55%; min-width: 238px; } .event_options_right { box-sizing: border-box; width: 45%; min-width: 270px; } .event_options_left div, .event_options_right div { white-space: nowrap; } #post_event #event_main input { margin: 0; } #event_time_input { clear: left; } #event_time_input > div { display: flex; } #event_time_input input.date_input { width: 40%; margin: 2px 0.5ch 0; flex: 1 1 auto; } #event_time_input input.time_input { width: 13ch; margin: 2px 0.5ch 0; flex: 0 1 auto; } #post_event input[type="checkbox"] { height: auto; } #post_event input[type="text"][disabled] { color: transparent; } #post_event select, #event_options input[type="text"], #tz { max-width: calc(100% - 75px); } #post_event select, #evtitle, #event_location { width: calc(100% - 75px); } #post_event input[type="checkbox"] + select { max-width: calc(100% - 95px); } /* Styles for the recent messages section. ---------------------------------------------------- */ #readbuttons_top .pagelinks, #readbuttons .pagelinks { padding-bottom: 12px; width: 60%; } #readbuttons .pagelinks { padding-top: 12px; } #recent { clear: both; } /* Styles for the move topic section. */ .move_topic { width: 710px; margin: auto; text-align: left; } div.move_topic fieldset { margin-top: 1ex; padding: 6px; } /* Styles for the report topic/user section. */ #report_form dl.settings dt { width: 20%; } #report_form dl.settings dd { width: 79%; } #report_comment { width: 70%; } /* Styles for the split topic section. */ div#selected, div#not_selected { width: 49%; } ul.split_messages li a.split_icon { padding: 0 6px; opacity: 0.8; } ul.split_messages li a.split_icon:hover { opacity: 1; } .split_messages, .message_header { margin-bottom: 8px; } /* Styles for the merge topic section. */ ul.merge_topics li { list-style-type: none; } dl.merge_topic dt { width: 25%; } dl.merge_topic dd { width: 74%; } fieldset.merge_options { clear: both; } .custom_subject { margin: 6px 0; } /* Styles for the login areas. ------------------------------------------------------- */ .login { width: 540px; max-width: 100%; margin: 0 auto; } .popup_content .login { width: 100%; } .login dl { overflow: auto; clear: right; } .login dt, .login dd { margin: 0 0 5px 0; width: 44%; padding: 1px; } .login dt { float: left; clear: both; text-align: right; font-weight: bold; } .login dd { width: 54%; float: right; text-align: left; } .login p { text-align: center; } .login input[type="submit"] { margin: 1em 0 0 1em; } .login p:not(:last-of-type) input[type="submit"] { margin-bottom: 1em; } /* Additional register fields */ #registration fieldset { border: none; padding: 0; margin: 0; } #registration .roundframe { border-top: none; } dl.register_form { margin: 0; clear: right; } dl.register_form dt { font-weight: normal; float: left; clear: both; width: 50%; margin: 6px 0 0 0; } dl.register_form dt span { display: block; } dl.register_form dd { float: left; width: 49%; margin: 6px 0 0 0; } #confirm_buttons { text-align: center; padding: 12px 0; } .coppa_contact { padding: 4px; width: 32ex; background: var(--coppa-contact-bg-color); color: var(--coppa-contact-txt-color); margin-left: 5ex; border: var(--coppa-contact-border-width) var(--coppa-contact-border-style) var(--coppa-contact-border-color); } .valid_input { background: var(--valid-input-bg-color); } .invalid_input { background: var(--invalid-input-bg-color); } /* Styles for maintenance mode. ------------------------------------------------------- */ #maintenance_mode img.floatleft { margin-right: 12px; } /* Custom profile fields like to play with us some times. */ #admin_content .custom_field { margin-bottom: 15px; } #admin_login .centertext { padding: 12px; } #admin_login .centertext .error { padding: 0 0 12px 0; } #admin_login .centertext a.help img, .custom_field a img { vertical-align: middle; } tr.windowbg td, tr.bg td, .table_grid tr td { padding: 4px 8px; } #credits p { font-style: italic; } .errorfile_table { background: var(--errorfile-table-bg-color); border-collapse: collapse; } .errorfile_table .file_line { text-align: right; padding-right: 6px; } .errorfile_table td.current { font-weight: bold; border-top: var(--errorfile-table-td-current-border-width) var(--errorfile-table-td-current-border-style) var(--errorfile-table-td-current-border-color); border-bottom: var(--errorfile-table-td-current-border-width) var(--errorfile-table-td-current-border-style) var(--errorfile-table-td-current-border-color); border-width: 1px 0 1px 1px; background: var(--errorfile-table-td-current-bg-color); } .generic_menu { margin: 5px 0; background: var(--menu-bg-color); } /* Small fix for topics */ .quickbuttons .main_icons::before, .button .main_icons::before { margin: -3px 3px 0 1px; } .main_icons.gender_None::before { background: none; } .main_icons.gender_0::before { display: none; } /* This is a small fix for dropmenu icons */ .dropmenu .main_icons::before, #profile_menu .main_icons::before, .dropmenu img { margin: -3px 4px 0 0; vertical-align: middle; } .dropmenu .main_icons::before, .dropmenu img { margin: -3px 4px 0 0; vertical-align: middle; max-width: max-content; } /* Styles for (fatal) errors. ------------------------------------------------- */ #fatal_error { width: 80%; margin: 0 auto 10px auto; } .errorbox::before, .noticebox::before, .infobox::before { width: 16px; height: 16px; background: url(../images/icons/main_icons_sprite.png) no-repeat -57px -83px; left: 10px; content: ""; position: absolute; top: 50%; margin-top: -8px; } .errorbox, .noticebox, .infobox { padding: 7px 10px 7px 35px; margin-bottom: 12px; position: relative; } .errorbox { background-color: var(--error-box-bg-color); border-top: var(--error-box-border-width) var(--error-box-border-style) var(--error-box-border-color); border-bottom: var(--error-box-border-width) var(--error-box-border-style) var(--error-box-border-color); } .errorbox h3 { padding: 0; margin: 0; font-size: 1.1em; text-decoration: underline; } .errorbox p { margin: 12px 0 0 0; } .errorbox p.alert { padding: 0; margin: 0 4px 0 0; float: left; width: 12px; font-size: 1.5em; } .errorbox span { text-decoration: underline; } /* Styles for info boxes ------------------------------------------------- */ .noticebox::before { background-position: -83px -83px; } .infobox::before { background-position: -161px -83px; } .noticebox { color: var(--notice-box-txt-color); background: var(--notice-box-bg-color); border-top: var(--notice-box-border-width) var(--notice-box-border-style) var(--notice-box-border-color); border-bottom: var(--notice-box-border-width) var(--notice-box-border-style) var(--notice-box-border-color); } .infobox { color: var(--info-box-txt-color); background: var(--info-box-bg-color); border-top: var(--info-box-border-width) var(--info-box-border-style) var(--info-box-border-color); border-bottom: var(--info-box-border-width) var(--info-box-border-style) var(--info-box-border-color); } .descbox { padding: 7px 10px 7px 10px; border: var(--desc-box-border-width) var(--desc-box-border-style) var(--desc-box-border-color); margin: 6px 0; } /* Styles for stats bars and progress bars. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .generic_bar, .progress_bar { border: var(--generic-bar-border-width) var(--generic-bar-border-style) var(--generic-bar-border-color); background: var(--generic-bar-bg-color); min-height: 16px; line-height: 1.4em; border-radius: var(--generic-bar-border-radius); position: relative; overflow: hidden; color: var(--generic-bar-txt-color); } .generic_bar span, .progress_bar span { position: relative; z-index: 2; text-shadow: var(--generic-bar-span-txt-shadow); display: inline-block; padding: 0 5px; } .generic_bar .bar, .progress_bar .bar { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; background: var(--generic-bar-bar-bg-color); transition: width .3s; border-radius: var(--generic-bar-bar-border-radius); box-shadow: var(--generic-bar-bar-box-shadow); display: block; } .generic_bar.vertical { width: 15px; } .generic_bar.vertical .bar { right: 0; top: auto; box-shadow: var(--generic-bar-vertical-bar-box-shadow); } .progress_bar { border-radius: var(--progress-bar-border-radius); text-align: center; font-weight: bold; color: var(--progress-bar-txt-color); } .progress_bar .bar { box-shadow: var(--progress-bar-bar-box-shadow); background-color: var(--progress-bar-bar-bg-color); background-size: 30px 30px; background-image: var(--progress-bar-bar-bg-image); } .progress_yellow .bar { background-color: var(--progress-yellow-bar-bg-color); } .progress_green .bar { background-color: var(--progress-green-bar-bg-color); } .progress_red .bar { background-color: var(--progress-red-bar-bg-color); } .progress_blue .bar { background-color: var(--progress-blue-bar-bg-color); } /* Styles for the profile section. ------------------------------------------------- */ dl { overflow: auto; } /* The basic user info on the left */ #basicinfo { width: 20%; float: left; } #detailedinfo { width: 79.5%; float: right; } #basicinfo > * { margin-bottom: 3px; } #basicinfo h4 { font-size: 1.4em; font-weight: normal; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } #basicinfo h4 span.position { font-size: 0.8em; display: block; } #basicinfo img.avatar, dl.settings img.avatar { display: block; max-width: 160px; height: auto !important; } #basicinfo ul { list-style-type: none; } #basicinfo .icon_fields li { display: block; float: left; margin-right: 5px; height: 20px; } #basicinfo #userstatus { display: block; clear: both; } #basicinfo #userstatus img { vertical-align: middle; } #detailedinfo dl, #tracking dl { clear: right; overflow: auto; margin: 0 0 18px 0; padding: 0 0 15px 0; border-bottom: var(--detailedinfo-border-width) var(--detailedinfo-border-style) var(--detailedinfo-border-color); } #detailedinfo dt, #tracking dt { width: 35%; margin: 0 0 3px 0; font-weight: bold; color: var(--detailedinfo-txt-color); } #detailedinfo dd, #tracking dd { width: 65%; float: left; margin: 0 0 3px 0; } #detailedinfo .noborder { border-bottom: 0; } #detailedinfo dt.clear { width: 100%; } #personal_picture { display: block; margin-bottom: 4px; } #avatar_server_stored div { float: left; } #avatar_upload { overflow: auto; } #smileypr { margin-left: 10px; } .edit_avatar_img { margin: 0 0 1em; } /* Activity by time */ #activitytime { margin: 6px 0; } .activity_stats { margin: 10px 0; } .activity_stats li { width: 4.16%; float: left; text-align: center; } .activity_stats li span { display: block; border: var(--activity-stats-border-width) var(--activity-stats-border-style) var(--activity-stats-border-color); border-left: none; border-right: none; background: var(--activity-stats-bg-color); } .activity_stats li.last span { border-right: none; } .activity_stats li .generic_bar { height: 100px; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: 0 auto; } .activity_stats li .generic_bar span { position: absolute; top: -1000em; left: -1000em; } .profile_pie { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAAoCAMAAADzJSouAAABCFBMVEVHcExFdqdHeKpPfa04bKA2a6FLeqsubJRFdaePr9BCdKZDdKeJqsxDdKZDdKc/c6VMfK1EdahEdqhEdaczZpk5cqo2aqBKeapCc6ZDdKeBpMhCdKdnkLpIeapDdadQgbFTgbBslLxFd6hulr41ap85baFXhLI9cKVJeKlxlr9airk5ap6sxd6vx+CwyeGqw91UhbOyyeKtxd+owty0y+Otxt9Ofq5VhrVhkb+pwt1Zibdjk8BairiuxuBfjrxnlsOyyuJRgrFQgbCnwdtcjLpYiLZXh7VTg7Jbi7lgkL1djbpPgK9Mfa1fj7xllMGat9VKe6xllcGlwNtpmMSWtNNejruuxt94ncRU++KOAAAALHRSTlMAq/PiExzjAsX+86b82Ihg9pvtuQoEONhlj/rU7fu1++bt9+41Nubi3+7/OmAQfeAAAAnqSURBVHja7d0Be5JqGwdwdeVEcXNYbdPN1U5Fp9eUWkcckqYKCKg4xPH9v8kLoArwPHDX8TS38d+1XVN/3Y/uuW+rTEilvDn831Hu9MDKae7ozWEKG9dlSyWqeg5zxR27h1o3cc/dFWkrxcj5eHmS/dtofHfyxfj708nLaKfJi0VnJGYKEDcGOmi9EbPjeol7bM5o/+l16bfLhZve8orGzMeL9Eftuy/Gx/SLKKdN3ZqjUhniFmOgA9az1q3t8v4l7pE5e5B2UK9WuoOtm+0ufFlmUfNxlg2MkVM6exzhNKtwz07bhLneKAN1Z4lLXIwj2ruolxn1ug2Ao5e9VVxlf1HoYD+/Tv/1MzxH379+fZd+jXXaurQMdL1e56oGcjOg61yVgfUS9+QcIf/7euWrjtVFlfh1Sz1kSv6+f5Ujw0NkfVghc69wTlNWc0TAnJ2lCXM9rpq4xEU6zyD9br2qcOd0cOy6wh0yvTvG28+vc8RPbIjca4zTRm41GehsasKclXEV5nig+5y4J+ZIGeeqJqxelXevmxIx63J32HDbfk6lyZ8RIdMYp41mdroEzNmRv8KclY4EczOxBnNCOXFPyX0nZYwrC0sCUq8mbK6MXlec4dNhNn16/O5rZN4do5027jiBuk5HacKcFblbBzkrV2eJe46OnKLd2ZXVaUR8PdutMtai1i11IlNa9emLg0bkHDUa2RdIp322y4yMDYx0WxrrrHRnDZBzZi6TuOfogoO0dhnZ7jUytp7jVulFOLqNnaG280m7/wqeNhoxMdJIp31uW5kBXbutVGDOytKEOTdsDea4cuKekCOnSFfmnAsjMqZejdte0+Gb+HWDV28jOx9tzunTlx8bsXn7EuUM+57wBsy129MezFkZkzDn1uVMkLNSStzjdSXyi99VumgnuxdGlZh63omYmlhHYebHmSH3Im3/H4cTI36QjBOUMwRZlmdAJ8vKPzAny5vhjHF2urz5DeKciIXEPVZXEBXFP0qVJdqtL43M6Hq+q8Y/cPcvdG04gtV/h9kGIJ8OEc4Qp1NOg7mAjHDT5VgHOSdC7xbkVskk7rG6TNfqdu8ofa0oQba03XTd3lPejKhHdTfOjlJpoB09BYQ+TL356wsg7z4gnCF2uzOg645JmOuOlFuQs8N1dJDb5Cpxj9VdOd98Vir3a2cqeOeGX8TV8wTjSl1AqA+pIwIySMQRwhniUtBgbjk2YW7Jz+5Bzqay9uUe4DxhzhO3X+68SzTjHXt+zrjfdfn1KDXMEcqx3stju5vQ67KBq3gC/TjYJSDMUSrXhAxSM4dwBju6gzlFUe5hjjOB9RReNkDOF6GYuP1yVUEQuouKHueKwuYCP3ZHyRxFOzucNUlx9VaR0Y9jrAAyzqVOf4ByinAGK+owN+J0mBNImBtxSgXkgqESt1+Osr8qnDiemdq3OLeKPUqWNccxzqHyt9h6bkQS5YojSD4XUwf+B3uPyQHCGcwC6AQC5jgD6HizDnHjUDKJ2y+X2X4vCnKPbMY7O3YHmON4Z8kuwUCctT7K0WNQ6NTBP6AcIJzR0mFuYMJcH1yvDnKqFEoGuS4fCtJJiUO4OtDpJMpl/JdZUblbABzPCxzDQxzPSaB6PM+gHM2DEjNI3zZBNuoM6ASY029gbngLczdGOFmEa1YWMsdyPM9tg2qsZk9cbU2M43iQ00WY2zRqjDMFmJvC7p/GQVydlEWsq+saUTEXs5mscKLAohyioUWo42GOE2COR9WLHKStswbpGygHCFevg1xdv4HVg667a+f8uUMzZ0uG8TQC4hfXDU7k/EE6XeA4gLvvciBnSCB3v+Qgrm6KEPejgmJBZ8wEJOMylKzwAsNIDPr2bUNzoDyYo2GOTp3CGvD0XzjUwJ3+gXV/2Q0JUxYkRrBCIV29aTq3boN0dUMUBIAzWQHijL4AcTojQBzJCgDXXKCq+Z1mcpKACUUJoOy9K8JcMZUb1gEZ5p6Fa1qfemXRFdUqzmljRtxGwjjSi2xXRDk9oDD1jL4YcuF6TZMVAU5jRDHWNXUOyTxuaCqSiI1ULEbc6nPMfrscC3K51BEBaUD7Bc9n5JqVCFdh2E0GOGd6kO3OkW7JBoKsZwzYkEPU41k23g1Flo13BMNGuibZYXBk5c49d1oUYQ5a70+6IxXi1KPUm3f+p2T0x8X75+PsRDq9KzFu2JLfeYrM1saOGHBr6YxblHOY4e6lx7GIelp/talRrrncDjjW3fqfBULOmIkSy4SaKeBauKZ7ZI6CDBL1PnX4qR5oIlQ+HVounj0J11w7HGzWSdEdE4lyHIpZLetJwK2l7p02u14eVc9QmWBW9bbTVq8vGER8zkYSw8Q5fYlBrqNE/M2bx2E7hgG5PMAxD+hoiKMPU6kTohkb4iRxvgzd33DUAt4Nxe3PGesU/36oyHWJ0CCh6gmI/Q24W7KP7gOvIyIGxXaFAcNITHQcp8b332NwJ614Nzmx39j3Nr6xnDfOJc7X3UJfkq6jnM5sXgbGOnPgf7kY6YxW6GXlsDMGEuLlZ7/TJEw8zuxL+DguI8XGcdfx7hroMg/p6HjnvLEvlY59iiYKiQvlxuy3ahHu9saQ+m7wTl+TKEe0+v6oCDfrhxNwOtNHZ+uG8qCPj+vKaj8mK9cCOnW/XXoS5+YF9+An2ZvbyAxXByFJnD8aFePI/sCOmsc7ZbANzhH2TsY5cbWpEW7sHRKk08RQcyFcHjVsKKcC3WC/HR0zR4PVwU9Sxxc3kbk4Ttxvuaap2htyiXcr4QbjmsRk4MvlWdgR6iCUgFsMMFm7s4/9QVTW9+/scvBn3dnDumMq2lGbA4CnK1H9Uikk7nddr6Wq81qE0wfqOi2cI+aqNxOUk9VQAq6iYrJ15Ykaka2rAV35ibj0dZTLFDyHLCax7TIkvYcYTtyvuaEyaVWj3FBprTLBuVti3vIE6YZSK5iAMwYtdLyuOmlh85xd7tIzOAF36TlkcepVDvucWvEf9D5xv+KGt3qrGu3MyXrfsM43SHOkI0MdEXQSpl/8rjpvJQ7187vGuWtvH9inrbjQh4joF4XXifsvna5OrMwva3hHzCebYNxyEkjQ1S4nyARdGeh2XW/fXZpCO8q/v/bfqLJEuA+I8AnEErdjx9v7kY9y20GaY5w+8G8vyuXn4TZAuDOwm+zYzffaHdOIkbsMnWjMObXfW3fr9HWIt4UXifuP3dCcz69rkY6Yr4J1lbkvaFe7nsxhbv4grrznLk1f+tkljdpf52Szny7IdReQFxEnY07cDl0+zrmDdJnHnySY8mxxhCvkd+tO8g+z7kO5E5raOgp3Mmbn9OcfjnKn2YOD7Gnu6H3UadIT9wddNp+niucxrkjl8zt05w9Ub9/dUa5IWymG9u3/WGmw8yCFXGwAAAAASUVORK5CYII=); background-size: auto 20px; float: left; height: 20px; width: 20px; margin: 0 12px 0 0; text-indent: -1000em; } /* View posts */ .topic .time { float: right; } .counter { padding: 5px 6px 1px 2px; font-size: 2.2em; font-weight: bold; color: var(--counter-txt-color); float: left; } .topic_details { padding: 0 4px 4px 4px; } .counter + .topic_details { margin-left: 25px; } .list_posts { border-top: var(--border-width) var(--border-style) var(--border-color); padding-top: 1em; margin-top: 1em; margin-bottom: 1em; clear: both; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .topic h4 { margin: 3px 0; } .topic .post { margin: 0 12px; min-height: 80px; height: auto !important; height: 80px; } .topic .mod_icons { text-align: right; margin-right: 12px; } #creator dt { width: 40%; } #creator dd { width: 55%; margin: 0 0 10px 2px; } .centericon { vertical-align: middle; } .sizefix { width: 16px; height: 16px; } .boardslist > ul > li { margin: 12px; } .boardslist > ul > li > ul { columns: 2 250px; } .boardslist > ul > li > ul > li { break-inside: avoid; display: inline-block; vertical-align: top; width: 100%; } .boardslist a { font-weight: bold; border-bottom: var(--border-width) var(--border-style) var(--border-color); display: block; margin-bottom: 0.5em; } .boardslist a:hover { text-decoration: none; border-bottom: var(--border-width) var(--border-style) var(--border-color); } .boardslist label { display: inline-block; text-indent: -3ch; margin: 0 3ch; } #theme_settings { overflow: auto; margin: 0; padding: 0; } #theme_settings li { margin: 10px 0; padding: 0; } /* Paid Subscriptions */ #paid_subscription { width: 100%; } #paid_subscription dl.settings { margin-bottom: 0; } #paid_subscription dl.settings dd, #paid_subscription dl.settings dt { margin-bottom: 4px; } /* Pick theme */ #pick_theme { width: 100%; float: left; } #pick_theme .selected { background: var(--pick-theme-selected-bg-color); } /* Signature preview */ #preview_signature, #preview_signature_display { width: 100%; overflow: hidden; } /* Issue a warning */ #warn_body { width: 100%; font-size: 0.9em; } #warn_temp { font-size: smaller; } /* Warning level bar */ .warning_level { text-align: center; font-weight: bold; max-width: 250px; } .warning_level.none .bar { background-color: var(--warning-level-none-bar-bg-color); } .warning_level.watched .bar { background-color: var(--warning-level-watched-bar-bg-color); } .warning_level.moderated .bar { background-color: var(--warning-level-moderated-bar-bg-color); } .warning_level.muted .bar { background-color: var(--warning-level-muted-bar-bg-color); } /* Styles for the statistics center. ------------------------------------------------- */ #statistics .roundframe { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; } dl.stats dt { width: 50%; float: left; margin: 0 0 4px 0; line-height: 1.5em; clear: both; font-size: 1em; overflow: hidden; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } dl.stats dd { width: 48%; font-size: 1em; float: left; margin: 0 0 4px 2%; } dl.stats { padding: 5px; } /* Forum history table. */ #stats td, #stats th { width: 15%; padding: 4px; text-align: center; } #stats tr.windowbg th.lefttext { text-align: left; } #stats tr.windowbg th.stats_month { width: 25%; padding: 0 2em; text-align: left; } #stats tr.windowbg td.stats_day { padding: 0 3.5em; text-align: left; } /* Styles for the personal messages section. ------------------------------------------------- */ #personal_messages h3 span#author, #personal_messages h3 span#topic_title { float: left; } #personal_messages h3 span#author { margin: 0 0 0 6px; } #personal_messages h3 span#topic_title { margin: 0 0 0 9em; } #personal_messages div.labels { padding: 0 12px 0 0; } #personal_messages .capacity_bar { background: var(--personal-messages-capcity-bar-bg-color); display: block; margin: 6px 0 0 12px; height: 12px; border: var(--personal-messages-capcity-bar-border-width) var(--personal-messages-capcity-bar-border-style) var(--personal-messages-capcity-bar-border-color); width: 10em; } #personal_messages .capacity_bar span { border-right: var(--personal-messages-capcity-bar-border-width) var(--personal-messages-capcity-bar-border-style) var(--personal-messages-capcity-bar-border-color); display: block; height: 12px; } #personal_messages .capacity_bar span.empty { background: var(--personal-messages-empty-capacity-bar-bg-color); } #personal_messages .capacity_bar span.filled { background: var(--personal-messages-filled-capacity-bar-bg-color); } #personal_messages .capacity_bar span.full { background: var(--personal-messages-full-capacity-bar-bg-color); } #personal_messages .reportlinks { padding: 6px 1.3em; } #personal_messages .pm_inline_time { display: none; } #search_labels li { padding: 4px 6px; } #manrules div.righttext { padding: 4px 1px; } dl.addrules dt.floatleft { width: 15em; padding: 0 15px 6px 15px; } #addrule fieldset { clear: both; } #to_item_list_container div, #bcc_item_list_container div { float: left; margin-right: 10px; } .unread_pm { background: var(--unread-pm-bg-color); } /* Styles for the show alerts section. ------------------------------------------------- */ #alerts .alert_inline_time { display: none; } #alerts .quickbuttons { display: flex; margin: 4px 0; } #alerts .quickbuttons li, #alerts .alert_time { white-space: nowrap; } #alerts .alert_image { width: 65px; padding: 6px 0; text-align: center; vertical-align: middle; } #alerts .alert_image > div { position: relative; } #alerts .alert_image .avatar { max-width: 80%; max-height: 80%; margin-top: 4px; vertical-align: bottom; } #alerts .alert_image span.alert_icon { display: block; width: 100%; line-height: 1em; } #alerts .alert_image .avatar + .alert_icon { width: auto; position: absolute; right: 0; top: 0; } /* Styles for the memberlist section. ------------------------------------------------- */ #mlist_search { margin: auto; max-width: 500px; } #mlist .selected { white-space: nowrap; } #mlist .is_online { width: 60px; } #mlist .email_address { width: 25px; } #mlist .website_url { width: 70px; } #mlist .icq, #mlist .skype { width: 30px; } #mlist .post_count { width: 115px; } /* Styles for the search section. ------------------------------------------------- */ #searchform fieldset { text-align: left; padding: 0; border: none; } #searchform .roundframe { border-radius: 0; margin: 0; padding: 32px; } #searchform .alt { border-top: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } #searchform p.clear { clear: both; } #advanced_search { text-align: center !important; } #advanced_search dl#search_options { margin: 0 auto; width: 600px; padding-top: 12px; overflow: hidden; } #advanced_search dt { padding: 2px; text-align: right; width: 20%; } #advanced_search dd { width: 75%; float: left; padding: 2px; margin: 0 0 0 6px; text-align: left; } #search_results { margin-bottom: 5px; } /* Styles for the help section. ------------------------------------------------- */ #help_container { padding: 0 0 8px 0; } #helpmain { margin: 12px 0 0 0; padding: 8px 20px 12px 20px; border: var(--border-width) var(--border-style) var(--border-color); overflow: auto; } #helpmain p { margin: 10px 0; line-height: 1.5em; } #helpmain ul { line-height: 2em; margin: 0 0 0 25px; } #helpmain ul li { list-style-type: disc; } #helpmain ul li a { font-weight: bold; } /* Styles for the tooltips ------------------------------------------------------- */ .tooltip { position: absolute; z-index: 999; left: -9999px; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; max-width: 350px; padding: 6px 9px; color: var(--tooltip-txt-color); background: var(--tooltip-bg-color); border: var(--tooltip-border-width) var(--tooltip-border-style) var(--tooltip-border-color); border-radius: var(--tooltip-border-radius); box-shadow: var(--tooltip-box-shadow); } /* Styles for popup windows */ .popup_container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--popup-container-bg-color); z-index: 6; } #genericmenu > .popup_container { z-index: 5; } #adm_submenus > .popup_container { z-index: 4; } .popup_window, #main_menu .popup_window, #genericmenu .popup_window, #adm_submenus .popup_window { position: relative; width: auto; z-index: 99; box-shadow: var(--popup-window-box-shadow); border: 2px dashed var(--popup-window-border-color); border-radius: var(--popup-window-border-radius); margin: 0 auto; padding: 0; } .popup_window { top: 15%; width: 480px; padding: 0 8px 8px 8px; background: var(--popup-window-bg-color); } .popup_heading { padding: 12px 8px; color: var(--popup-heading-txt-color); } .catbg.popup_heading { width: 100%; } .popup_content { color: var(--popup-content-txt-color); line-height: 1.6em; max-height: 30em; overflow: auto; padding: 12px 8px; background: var(--popup-content-bg-color); border: 2px dashed var(--popup-content-border-color); border-radius: var(--popup-content-border-radius); } #main_menu .popup_heading, #genericmenu .popup_heading, #adm_submenus .popup_heading { display: none; } #main_menu .popup_container, #genericmenu > .popup_container, #adm_submenus > .popup_container { display: block; position: relative; background: none; margin: 0; height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */ } .main_icons.hide_popup { float: right; color: var(--white); } .popup_heading > .main_icons.hide_popup { float: right; color: var(--white); background: var(--popup-hide-button-bg-color); text-align: center; padding: 0px 2px 4px 2px; border-radius: 50%; color: var(--popup-heading-txt-color); } .popup_heading .icon { vertical-align: middle; margin: -4px 4px 0 0; } .generic_list_wrapper, .windowbg, .approvebg, .approvebg2 { background: var(--window-bg-color); margin: 12px 0 0 0; padding: 12px 16px; border: var(--border-width) var(--border-style) var(--border-color); overflow: auto; } /* Here comes the glory... */ .windowbg:nth-of-type(even), .bg.even { background: linear-gradient(180deg, var(--window-bg-even-color) 0%, var(--window-bg-odd-color) 100%); } .windowbg:nth-of-type(odd), .bg.odd { background: linear-gradient(180deg, var(--window-bg-even-color) 0%, var(--window-bg-odd-color) 100%); } /* Highlight the target item */ .windowbg:target { background: var(--window-target-bg-color); } /* Add some hover on table rows */ tr.windowbg:hover { background: var(--window-table-row-bg-hover-color); } /* Special treatment for #forumposts area */ #forumposts .windowbg, #forumposts .approvebg, #forumposts .approvebg2, #pmFolder .windowbg { overflow: visible; border-radius: 22px; } /* Nobody wants locked topics to stand out much. */ .windowbg.locked { background: var(--window-locked-bg-color); } /* Sticky topics get a different background */ .windowbg.sticky { background: var(--window-sticky-bg-color); } /* Locked AND sticky are a bit more technical */ .windowbg.sticky.locked { background: var(--window-sticky-locked-bg-color); } /* Awaiting approval is a bit special, topics first */ .windowbg.approvetopic { background: var(--window-approve-topic-bg-color); } /* Unapproved posts in approved topics */ .windowbg.approvepost { background: var(--window-approve-post-bg-color); } .generic_list_wrapper .additional_row { margin: 0; padding: 5px 0; border-radius: 0; } .generic_list_wrapper table.table_grid { border-bottom: var(--border-width) var(--border-style) var(--border-color); } div#editlang_desc { margin-bottom: 8px; } .topic_details .smalltext { font-size: 0.9em; } .table_grid tr.windowbg td.centercol { text-align: center; } tr.windowbg { box-shadow: none; } #postmodify #message { width: 100%; } #postmodify .lastedit { font-weight: bold; } /* Colors for background of posts requiring approval */ .approvebg { color: var(--approve-txt-color); background: var(--approve-bg-color); } .approvebg2 { color: var(--approve-txt-color); background: var(--approve-bg-color-2); } div#manage_boards dl dd textarea[name=desc] { margin-top: 1px; } .bold_text { font-weight: bold; } /* Profile > This needed for responsive (get rid of
) */ .infolinks { display: block; } #groups .windowbg { box-shadow: none; border-radius: 0; border-top: 0; margin: 0; } #groups .padding { margin: 0 0 25px 0; } .groupmembership textarea { width: 100%; } .groupmembership .righttext { margin-top: 1ex; } /* BoardIndex */ /* This place covers board places (boardindex/messageindex/recent) */ .boardindex_table:not(:last-child) { margin-bottom: 15px; } h3 .collapse { float: right; margin: 4px 4px 0 0; } .board_icon a { display: inline; text-decoration: none; } .board_icon a:hover, .board_icon a:focus { text-decoration: none; } .board_icon a::before { display: inline; font-family: "Font Awesome 7 Free"; font-size: 2em; content: "\f086"; color: var(--link); } .board_icon a.board_on::before { font-weight: 900; } .board_icon a:hover::before { color: var(--link-hover); text-decoration: none; } .board_icon a.board_on2::before { font-weight: 900; } .board_icon a.board_off::before { font-weight: 900; opacity: 0.2; } .board_icon a.board_redirect::before { font-weight: 900; content: "\f0a9"; } .board_icon { text-align: center; padding: 8px 0 0 0; width: 60px; flex-shrink: 0; } .boardindex_table .board_icon { width: 80px; } .boardindex_table .info { width: calc(55% - 80px); } .boardindex_table .board_stats { padding: 13px 2px 10px 2px; display: flex; justify-content: center; flex-direction: column; } .boardindex_table .board_stats p { border: none; text-align: center; margin: 0px 16px; display: block; } .board_stats_post_txt { font-size: 1em; font-weight: 400; } .board_stats_post_numbers { font-size: 1.3em; font-weight: 400; display: block; padding: 0px 0px 6px 0px; } .info { overflow: hidden; overflow-wrap: break-word; padding: 5px 5px 5px 0; flex-grow: 1; } .info .subject { font-weight: 700; font-size: 1em; color: var(--info-link); font-family: "Dynapuff", sans-serif; } .info .subject a { display: inline-block; color: var(--info-link); background-image: var(--info-link-gradient); background-size: 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .board_stats { width: 15%; font-size: 1em; margin: 0 0 0 auto; } .board_icon, .info, .board_stats, .lastpost { display: inline-block; align-self: center; } .lastpost { width: 30%; font-size: 0.9em; position: relative; display: inline-flex; padding-top: 3px; } .lastpost .board_avatar { padding-top: 7px; } .board_avatar { display: inline-flex; justify-content: center; align-items: center; margin-right: 2px; } .board_avatar img{ width: 35px; height: 35px; border-radius: 50%; } @media (max-width: 855px) { .board_avatar { display: none; } } .board_lastpost { padding: 3px 0px 0px 0px; } .main_container { margin-bottom: 24px; background-color: var(--up-contain-bg-color); background-image: var(--main-container-ribbon-image); background-repeat: repeat-y; background-position: calc(100% - 12px) 0; background-size: 20px 64px; border: 2px dashed var(--up-contain-border-color); position: relative; padding: 0.675em 1.875em 1.875em 1.875em; overflow: visible; border-radius: 22px; } .main_container::before, .main_container::after { position: absolute; font-size: 1.5rem; opacity: 0.3; } .main_container::before { content: "☮"; top: 8px; left: 12px; } .main_container::after { content: "☯"; bottom: 8px; left: 12px; } .up_contain { background: var(--up-contain-bg-color); overflow: hidden; border: none; margin: 0px 0px 0px 0px; display: flex; flex-wrap: wrap; } /* Child boards */ .children { background: var(--children-bg-color); border: none; margin: 0px; padding: 0px 0px 0px 80px; width: 100%; } .children a { color: var(--children-link-color); text-decoration: none; } .children p { font-size: 0.9em; line-height: 2.2em; columns: 3 238px; } .children strong { column-span: all; display: block; } .children span { display: block; padding: 2px 0px; } p.moderators { font-size: 0.9em; font-weight: bold; } span.postby { display: block; font-style: italic; } /* Info Center */ #info_center { clear: both; position: relative; } #info_center .title_bar { background: transparent; position: relative; margin: 0px 0px 8px 0px; position: relative; border-bottom: 3px dashed var(--info-center-title-bar-border-color); } #info_center .title_bar::before { content: "✦"; position: relative; margin: 0px; position: absolute; left: -2px; top: 8px; } #info_center.roundframe { background: transparent !important; border: none; padding: 0px; } #info_center .sub_bar { background: transparent; } #upshrink_stats { margin-top: 0px; } #ic_recentposts { background: var(--info-block-information-bg-color); line-height: 1.6em; width: 100%; margin: 0px; font-size: 0.9em; } #ic_recentposts th { text-align: left; padding: 0 4px 0 0; } #ic_recentposts td { border-top: var(--border-width) var(--border-style) var(--border-color); padding: 0 4px 0 0; vertical-align: top; } #ic_recentposts tr:first-child td { border-top: none; } #ic_recentposts .recentpost strong { width: 40%; } #ic_recentposts .recentposter { width: 15%; } #ic_recentposts .recentboard { width: 20%; } #ic_recentposts .recenttime { width: 25%; } #ic_recentposts .recenttime strong { color: var(--body-txt-color); } #ic_recentposts .windowbg { background: none; } #upshrink_stats p.inline { border: none; line-height: 1.8em; font-size: 0.9em; background: var(--info-center-stats-card-bg-color); margin: 8px 8px; padding: 8px; border: 1px dashed var(--info-center-stats-card-border-color); border-radius: 22px; position: relative; } #upshrink_stats p.inline::after { content: "☮"; display: block; position: absolute; right: -4px; color: var(--upshrink-icon-bg-color); opacity: 0.4; } #upshrink_stats p.inline span { margin: 0; padding: 0px 0px; } #upshrink_stats span.membergroups { display: block; } /* Info Center Blocks */ .info_center_container { background: var(--info-center-container-bg-color); margin: 5px 0px; box-shadow: var(--info-center-box-shadow); border-radius: var(--info-center-border-radius); } .info_block_icon { display: block; min-height: 100%; padding: 3px 10px 3px 8px; min-width: 30px; background: var(--info-block-icon-bg-color); } .info_block_information { background: var(--info-block-information-bg-color); border-radius: var(--info-center-border-radius); } /* MessageIndex */ /* Start with description and other things */ #description_board, .filter_row { padding: 8px 10px; border-radius: 6px 6px 0 0; border-bottom: none; box-shadow: none; } #description_board h3, #description_board div { display: inline-block; } #description_board h3::after { content: " - "; } /* Topic list */ #topic_header { margin: 4px 0px 8px 0px; padding: 8px 0px; border-radius: 0; display: flex; background: var(--topic-header-bg-color); border: none; position: relative; } #topic_header div { font-weight: bold; font-size: 1.1em; padding: 0; } #topic_header input { margin-top: 5px !important; } #topic_header::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 100px; height: 50px; background-image: var(--display-title-doodle-image); background-repeat: no-repeat; background-size: contain; opacity: 0.2; } #topic_container .windowbg { border: var(--border-width) var(--border-style) var(--border-color); display: flex; padding: 0; margin: 0px 0px 4px 0px; overflow: hidden; border-radius: 13px; } #topic_container .lastpost, #topic_header .lastpost { width: 25%; } #topic_container .lastpost, #topic_container .board_stats { flex-shrink: 0; } .message_index_title { font-family: "Dynapuff", sans-serif; } .icon img, .moderation input { margin-top: 15px; } .moderation { display: inline-block; width: 35px; flex-shrink: 0; vertical-align: middle; text-align: center; } /* Quick moderation selects and submit */ #quick_actions { margin: 6px 0; } /* Icons and jump to */ #topic_icons::before { display: block; height: 8px; clear: both; content: ""; } #topic_icons .information { font-size: .9em; border-radius: 11px; } #topic_icons p { padding: 0 12px 0 4px; line-height: 2em; } /* Should lose this before RC1. It's a kludge. Can be fixed by new image */ #topic_icons .floatleft img:first-child { padding: 0 2px; } /* Display */ /* Poll question */ #poll { overflow: hidden; position: relative; } #poll::before { content: ""; position: absolute; left: 8px; top: 80px; font-size: 1.2rem; opacity: 0.2; transform: rotate(-15deg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 80% 100%; width: 400px; height: 135px; } /* Poll vote options */ #poll_options ul.options li { padding: 6px 0 6px 25px; } /* Poll results */ #poll_options dl.options { padding: 12px 0 12px 25px; line-height: 1.4em; } #poll_options dl.options dt { padding: 4px 0; width: 30%; max-width: 30em; float: left; clear: left; } #poll_options dl.options .voted { font-weight: bold; } #poll_options dl.options dd { width: 60%; max-width: 45em; float: left; margin: 0 0 4px 0; text-align: right; } /* Poll notices */ #poll_options p { margin: 0 18px 2px 18px; padding: 0 6px 6px 6px; } div#pollmoderation { overflow: auto; } /* Styles for edit poll section. */ #edit_poll dl.poll_options dt { width: 33%; } #edit_poll dl.poll_options dd { width: 65%; } /* Linked events */ .event_title { font-size: larger; vertical-align: middle; } .event_title + a { margin-left: 1em; } /* On to the posts */ #forumposts { clear: both; margin: 8px 0 0 0; } #forumposts .cat_bar { margin: 0 0 -4px 0; } /* Topic information */ #forumposts .catbg img { margin: 0 4px -2px 0; } #forumposts .catbg span { white-space: pre; /* Specific sizing for clarity without ClearType. */ font-size: 0.818em; font-weight: normal; padding: 2px 0; } /* ---------------------------------------------------- */ /* Adjust parent .windowbg for better looks of content. */ #forumposts .windowbg, #forumposts .approvebg, #personal_messages .windowbg { padding: 0; } /* -------------------- */ /* Grid parent element. */ /* -------------------- */ .post_wrapper { display: grid; grid-template-columns: 175px minmax(0,calc(100% - 175px)); grid-auto-rows: 1fr min-content; position: relative; border-radius: 22px; } /* ---------------------- */ /* You need to kill this! */ .post_wrapper::after { display: none; } /* ----------------- */ /* First grid child. */ .poster { grid-column: 1 / 2; grid-row: 1 / 3; width: 175px; padding: 10px 0 10px 15px; background: var(--poster-info-bg-color); border-radius: 22px 0px 0px 22px; position: relative; } .poster::before { content: '★'; position: absolute; top: 0px; left: 8px; font-size: 0.8rem; opacity: 0.2; transform: rotate(-13deg); } .poster::after { content: '♥'; position: absolute; bottom: 0px; left: 8px; font-size: 0.8rem; opacity: 0.2; transform: rotate(13deg); } /* ------------------ */ /* Second grid child. */ .postarea { grid-column: 2 / 3; grid-row: 1 / 2; margin: 0; padding: 10px 15px 0 10px; position: relative; } .postarea::before { content: ''; border-right: 10px solid var(--window-bg-color); border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; left: -10px; } .postarea::after { content: ''; background-image: var(--main-container-ribbon-image); background-repeat: repeat-y; background-position: calc(100% - 12px) 0; background-size: 20px 64px; position: absolute; right: -12px; height: 100%; width: 30px; top: 0; opacity: 0.9; overflow: visible; } .windowbg:target .postarea::before { content: ''; border-right: 10px solid var(--window-target-bg-color); border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; left: -10px; } /* ----------------- */ /* Third grid child. */ .moderatorbar { grid-column: 2 / 3; grid-row: 2 / 3; margin: 0; padding: 0 15px 10px 10px; } /* ----------------------------------- */ /* Media queries, for smaller screens. */ /* ----------------------------------- */ @media screen and (max-width: 720px) { .post_wrapper { display: block; } .poster { width: auto; min-height: 65px; padding: 2px 10px 5px; border-radius: 22px 22px 0px 0px; } .poster::before, .poster::after { content: ""; display: none; } .poster h4, .poster .user_info { margin-left: 4px; } .poster li.avatar { display: inline !important; position: absolute; left: 4px; } .poster img.avatar { max-height: 50px !important; max-width: 50px !important; } .poster li { padding-right: 4px; vertical-align: bottom; } .poster .blurb { display: none; } .postarea::before { content: ''; border-bottom: 10px solid var(--window-bg-color); border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: -20px; left: 15px; } .windowbg:target .postarea::before { content: ''; position: absolute; border-bottom: 10px solid var(--window-target-bg-color); border-left: 10px solid transparent; border-right: 10px solid transparent; top: -20px; left: 15px; } } /* The visible stuff below the avatar. */ .user_info > li { margin: 1px 0px ; text-align: center; } .user_info li.im_icons, .user_info li.profile { text-align: center; justify-content: center; display: flex; } .profile_icons, .im_icons ol li { display: inline-flex; } .poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus { margin: 0; padding: 0; text-decoration: none; text-align: center; font-size: 1rem; font-family: Dynapuff, sans-serif; } .poster li.membergroup { font-weight: bold; } .poster li.poster_online, .poster li.poster_online:hover { padding: 1px 1px 1px 1px; margin: 3px 10px; } .poster li.poster_online a { color: var(--poster-online-link-color); line-height: 1.6em; } .poster li.poster_online:hover, .poster li.poster_online:hover a { text-decoration: underline; } .poster li.warning a img { vertical-align: bottom; padding: 0 2px; } .poster img { vertical-align: middle; } ul.user_info li a img.avatar { object-fit: scale-down; max-height: 100px; max-width: 100px; border-radius: 50%; } .postarea, .moderatorbar { margin: 0px; } .postarea div.flow_hidden { width: 100%; } .moderatorbar { clear: right; } .messageicon { display: inline-block; } .messageicon img, #iconList img { vertical-align: middle; } .keyinfo .postinfo { padding: 1px 0 5px 0; line-height: 1.5em; font-size: 0.9em; font-weight: bold; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .keyinfo .postinfo::after, .under_message::after { content: ""; clear: right; display: block; } .keyinfo .postinfo a, .keyinfo .postinfo a strong { color: var(--key-post-info-link-color); } .keyinfo .postinfo .spacer { flex: 1 1 auto; } .keyinfo .postinfo .modified { color: var(--keyinfo-postinfo-modified-txt-color); font-weight: normal; font-style: italic; padding: 2px 4px 0 4px; } /* PMs postinfo */ #personal_messages .keyinfo .postinfo { flex-direction: column; align-items: flex-start; font-weight: normal; } #reason::before { content: " - "; } .subject_title a { font-size: 0.9em; color: var(--subject-title-link-color); font-weight: bold; } .subject_hidden a { display: none; } .page_number { color: var(--page-number-txt-color); font-weight: bold; padding: 4px 0 0 4px; line-height: 1.5em; } .inner { padding: 7px 8px 2px 2px; margin: 0; border-top: var(--inner-border-width) var(--inner-border-style) var(--inner-border-color); min-height: 85px; word-wrap: break-word; /* IE fallback */ overflow-wrap: break-word; } img.smiley { vertical-align: bottom; } .attachments { padding: 12px 0 0 0; } .attached { padding: 0 6px 8px 6px; max-width: 100%; display: inline-block; vertical-align: top; } .attachments_top { margin: 0 auto; text-align: center; } .attachments hr { clear: both; margin: 12px 0; } #post_attachments_area #attachment_upload { border: 3px dashed var(--border-color); } .show_on_hover:hover span { display:none; } .show_on_hover:hover:before { content:attr(data-hover); } /* Separator of posts. More useful in the print stylesheet. */ #forumposts .post_separator { display: none; } /* Next and previous topic links */ .nextlinks { text-transform: capitalize; } /* Styles for the quick reply area. */ #quickreply { clear: both; } #quickreply_options .roundframe { margin: 0; padding: 8px 10% 12px 10%; border-top-left-radius: 0; border-top-right-radius: 0; } #quickReplyExpand { float: right; margin: 2px 2px 0 2px; } /* Styles for edit post section */ form#postmodify .roundframe { padding: 12px 12%; margin: 12px 0 0 0; } #post_header { padding: 6px; overflow: hidden; } #post_header dt { float: left; padding: 0; width: 15%; margin: 6px 0 0 0; font-weight: bold; } #post_header dd { float: left; padding: 0; width: 83%; margin: 4px 0; } #post_header img { vertical-align: middle; } ul.post_options { margin: 0 0 0 12px; padding: 0; overflow: hidden; } ul.post_options li { margin: 2px 0; width: 49%; float: left; } #post_additional_options_header { margin-top: 0.5em; } #post_additional_options { overflow: hidden; } #post_additional_options .progress_bar { height: 22px; } #post_settings, #postAttachment, #postAttachment2, #attachment_previews { padding: 10px 0; } #postAttachment dd, #postAttachment2 dd { margin: 4px 0; } #postAttachment dd { width: 45%; float: left; } #postAttachment dt, #postAttachment2 dt { font-weight: bold; } #post_draft_options { background: var(--post-draft-options-bg-color); border: var(--post-draft-options-border-width) var(--post-draft-options-border-style) var(--post-draft-options-border-color); border-left: var(--post-draft-options-border-left-width) var(--post-draft-options-border-left-style) var(--post-draft-options-border-left-color); border-top: none; border-radius: var(--post-draft-options-border-radius); } #post_draft_options .settings dd, #post_draft_options .settings dt { width: 50%; border-top: var(--post-draft-options-settings-border-width) var(--post-draft-options-settings-border-style) var(--post-draft-options-settings-border-color); padding: 5px 10px; margin: 0; } #post_draft_options .settings dd:first-of-type, #post_draft_options .settings dt:first-child { border-top: none; /* Some people are OCD, like me. :P */ } #post_draft_options .settings strong { color: var(--post-draft-options-settings-strong-txt-color); } #post_confirm_buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; } #post_confirm_buttons, #shortcuts { padding: 12px 0; } #post_confirm_buttons .smalltext { flex: 1; word-break: break-word; margin: 0 5px 0 0; } #post_confirm_buttons .post_button_container { vertical-align: top; } #post_confirm_buttons .padding { flex: 1 100%; } .post_verification { margin-top: 6px; } .post_verification #verification_control { margin: 4px 0 4px 12px; } /* The BBC buttons */ #bbcBox_message { margin: 10px 6px; } #bbcBox_message div { margin: 2px 0; vertical-align: top; } #bbcBox_message div img { margin: 0 1px 0 0; vertical-align: top; } #bbcBox_message select { margin: 0 2px; } /* The smiley strip */ #smileyBox_message { margin: 6px; } /* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */ .signature, .attachments, .under_message, .custom_fields_above_signature, .custom_fields_below_signature { width: 100%; overflow: auto; clear: right; padding: 12px 0 3px 0; border-top: 1px solid var(--signature-border-color); box-shadow: var(--signature-box-shadow); line-height: 1.4em; font-size: 0.9em; } .signature::After { content: ''; background-image: var(--main-container-ribbon-image); background-repeat: repeat-y; background-position: calc(100% - 12px) 0; background-size: 20px 64px; position: absolute; right: -12px; height: 100%; width: 30px; top: 0; opacity: 1; overflow: visible; } .under_message { overflow: visible; border: none; box-shadow: none; } .smflikebutton { margin-top: 4px; } .like_count, .smflikebutton:last-child { margin-bottom: 4px; } /* Events */ .edit_event { margin: 0 10px; vertical-align: top; } /* ModerationButtons */ #moderationbuttons { float: left; } #moderationbuttons_strip { float: left; margin: 4px 0 4px; } #moderationbuttons ul li { padding: 0 6px 4px 0; margin: 0; } /* File error */ .errorfile_table { font-family: monospace; border-spacing: 1px; } .errorfile_table td { background: var(--errorfile-table-td-bg-color); } .errorfile_table .current { background: var(--errorfile-table-current-bg-color); } .errorfile_table .file_line.current { background: var(--errorfile-table-file-line-current-bg-color); } .errorfile_table .file_line { background: var(--errorfile-table-file-line-bg-color); } /* General Classes */ /* Cat_bar / catbg */ div.cat_bar { background: var(--cat-bar-bg-color); padding: 8px 8px; border-radius: var(--cat-bar-border-radius); min-height: 34px; position: relative; width: 100%; transform: none; overflow: visible; } .cat_bar.collapsed, .cat_bar.cat_bar_round { border-radius: var(--cat-bar-collapsed-border-radius); } .cat_bar h3 { padding: 8px 12px 8px 12px; min-height: 34px; } .catbg { padding: 0.45rem 0.9rem; border-radius: 8px; box-shadow: var(--catbg-box-shadow); width: max-content; transform: rotate(-1.5deg); position: relative; } .catbg:hover { transform: rotate(0deg); transition: transform 0.2s ease-in-out; } /* Cycle cat_bar colors 1-2-3, repeat */ .catbg:nth-of-type(3n + 1) { background: var(--catbg-cycle-1-bg-color); } .catbg:nth-of-type(3n + 2) { background: var(--catbg-cycle-2-bg-color); } .catbg:nth-of-type(3n + 3) { background: var(--catbg-cycle-3-bg-color); } /* Cycle category bars red/blue/green */ #boardindex_table .main_container:nth-of-type(3n + 1) > .cat_bar .catbg { background: var(--catbg-cycle-1-bg-color); } #boardindex_table .main_container:nth-of-type(3n + 2) > .cat_bar .catbg { background: var(--catbg-cycle-2-bg-color); } #boardindex_table .main_container:nth-of-type(3n + 3) > .cat_bar .catbg { background: var(--catbg-cycle-3-bg-color); } .catbg::before, .catbg::after { content: ""; position: absolute; width: 32px; height: 14px; background: linear-gradient( 135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7) ); top: -8px; border-radius: 3px; box-shadow: var(--catbg-ribbon-box-shadow); opacity: 0.9; } .catbg::before { left: 6px; transform: rotate(-10deg); } .catbg::after { right: 6px; transform: rotate(8deg); } /* Styles for rounded headers. */ .cat_bar .desc { color: var(--cat-bar-desc-txt-color); font-size: 0.9em; margin: 0px 0 0px 12px; font-weight: 500; word-break: break-all; } .cat_bar .desc a { color: var(--cat-bar-link-color); } h3.catbg { font-size: 1.1em; font-weight: 700; overflow: visible; min-height: 34px; max-width: 100%; font-family: "Dynapuff", sans-serif; } h3.catbg, h3.catbg a, h3.catbg a:hover { color: var(--cat-bar-link-color); text-shadow: var(--cat-bar-link-txt-shadow); text-decoration: none; } h3.catbg a:hover { text-decoration: none; } h3.catbg .main_icons::before, h3.catbg .icon { margin: 0 5px 0 0; } .cat_bar + .windowbg, .cat_bar + .roundframe { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .cat_bar + .title_bar { margin-top: 0; } /* Roundframe */ .roundframe { margin: 10px 0 0 0; padding: 16px 16px; background: var(--roundframe-bg-color); border: 2px dashed var(--roundframe-border-color); border-radius: var(--roundframe-border-radius); overflow: auto; } /* TitleBar & SubBar */ .title_bar { background: var(--title-bar-bg-color); color: var(--title-bar-link); border-radius: var(--title-bar-border-radius); margin: 0px; } .title_bar a{ color: var(--title-bar-link); text-decoration: underline; } .title_bar a:hover{ color: var(--title-bar-link); text-decoration: none; } .sub_bar { border: none; background: var(--sub-bar-bg-color); clear: both; } .sub_bar i { font-size: 0.9em; margin-right: 2px; } h3.titlebg, h4.titlebg, .titlebg { background: none; color: var(--title-bar-link); overflow: hidden; padding: 8px 12px 6px 12px; font-size: 1.1em; text-shadow: var(--title-bar-txt-shadow); position: relative; font-family: "Dynapuff", sans-serif; } h3.subbg, h4.subbg, .subbg { background: none; color: var(--title-bar-link); overflow: hidden; padding: 8px 12px 6px 12px; font-size: 1.2em; text-shadow: var(--title-bar-txt-shadow); position: relative; font-family: "Comic Neue", sans-serif; } .titlebg a { background: none; color: var(--title-bar-link); text-decoration: none; } .subbg a { background: none; color: var(--sub-bar-link-color); text-decoration: none; } .title_bar + .windowbg, .title_bar + .roundframe { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* Other */ /* Information */ .information { background: var(--information-bg-color); overflow: auto; padding-bottom: .5em; border: var(--information-border-width) var(--information-border-style) var(--information-border-color); border-radius: var(--information-border-radius); margin: 0 0 10px 0; padding: 12px 9px 8px 9px; width: 100% } .generic_list_wrapper .information div { background: none; } .information a:not(.button) { font-weight: bold; } p.information img { vertical-align: middle; } #messageindex .information { border-radius: 0; margin: 0; } #topic_icons .information, #messageindex .information { border-top: var(--information-border-width) var(--information-border-style) var(--information-border-color); } #topic_icons .information::before { content: "★ ♡ ✦ ♥ ☆ ♡ ★ ✧ ♥ ♡"; position: absolute; white-space: nowrap; font-size: 22px; color: var(--link); opacity: 0.85; transform: rotate(8deg); top: 78px; right: 8px; line-height: 1.2em; opacity: 0.3; } #topic_icons { position: relative; } .topic_pages { font-size: 0.75em; margin: 0 0 0 5px; } .topic_pages::before { content: "\00ab "; } .topic_pages::after { content: " \00bb" } .topic_pages .nav_page { min-height: 22px !important; min-width: 22px !important; } /* Mentions */ .atwho-view { position: absolute; top: 0; left: 0; display: none; margin-top: 18px; background: var(--atwho-view-bg-color); border: var(--atwho-view-border-width) var(--atwho-view-border-style) var(--atwho-view-border-color); border-radius: var(--atwho-view-border-radius); box-shadow: var(--atwho-view-box-shadow); min-width: 120px; z-index: 11110 !important; } .atwho-view .cur { background: var(--atwho-view-cur-bg-color); color: var(--atwho-view-cur-txt-color); } .atwho-view .cur small { color: var(--atwho-view-cur-small-txt-color); } .atwho-view strong { color: var(--atwho-view-strong-tex); } .atwho-view .cur strong { color: var(--atwho-view-cur-strong-txt-color); font-weight: bold; } .atwho-view ul { list-style: none; padding: 0; margin: auto; } .atwho-view ul li { display: block; padding: 5px 10px; border-bottom: var(--atwho-view-border-width) var(--atwho-view-border-style) var(--atwho-view-border-color); cursor: pointer; } .atwho-view small { font-size: smaller; color: var(--atwho-view-small-txt-color); font-weight: normal; } /* On/Off Icons (User) */ .on, .off { display: inline-block; width: 14px; height: 14px; border-radius: var(--on-off-border-radius); border: 1px solid transparent; vertical-align: middle; } .on { background: var(--on-bg-color); border-color: var(--on-border-color); } .off { background: var(--off-bg-color); border-color: var(--off-border-color); } #userstatus .smalltext { margin: 0 0 0 5px !important; } /* Styles for print media. */ @media print { #headerarea { display: none; } .tborder { border: none; } } /* Who */ .action_who #upper_show { margin-top: 6px; } .action_who #lower_pagesection { margin-top: 4px; } .action_who #lower_pagelinks { margin-top: -4px; } .action_who select { margin-top: -1px !important; } span.member.hidden { display: inline-block; font-style: italic; } /* Icons (converted from img to css) */ /* Stay here till I find a better place for you guys */ h3.profile_hd::before { vertical-align: middle; } h3.profile_hd::before, .main_icons.profile_hd::before { content: ""; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADfklEQVR42sWQfUzMcRzH7/v7+ZNhTMloNuGPOP3hRvNHKam7iEMrKs4cy9CDhywqJQ91rEZ1PVxPdHdcJHWnmUoyzx22High5RJHxzU6svv4fv7ot1pns7s23+217z6f9+fzfv9+X95/P7MImUgJpZyjXMIb63ExdyFkEuVUkKdn+5Hdu38ej42FOKn0p8/ixS20X03xdShgJiHbhAJBZ+LevRAfGQmHpFKIlUggXCSyerm7d1I92qEAZ/okkSEhQ7uCgyFMJILNAQEg9vYGlSwGxF5eQ6g7FOBESFOovz8UHg2HH015HEMtpRCwbBmgbrd53homWDCd6L35fBh8poCBh9kcWK/08ADUcc6uAHkgU7HHd97rJa6uMPAoB0x3MzmwFri5Aeo4Z1dAtogp0Gdv6REvdwdTYwYY69I5sMY+6jhnV8B5IeN0TkiKKbq+myesvTWpMAzW2Ecd53j2nswA4pThTy40F+0y9VQlQff1RMAba+yjznP0yPzIqpxN05r1csnXzssHf+ONNfZ543VSvHmvlJGLID9sDuCN9bgYs5LbS9ntDfHHvHhN77XJMAzW2EfdPuOttwTsttoEl+j7Cqm6tzU3NxeM9TIOuVwOO5SGVpeoewqcw/l/Mw7XTWAjavY572ko2Vrytk3x7BeoO6wgU9bDwIMsjvSyOlC+tEK+3gIRRW/acB73cP/v5mFVzmxYdfLCQ43azLvfoOCpBeSPLVD4fAgSKntAo9FwHL3WTfVfkPXgBw0ZhIxGEyw82KjFffQZax5yZeqE0Ksyv7Qn+rMNX0BW3w9ptSa6+B0w4EjFO7BYLBzxV7sAA87cNsPpW/2QXoc7n8Ev7bEefdBvdMAmVbhHXO2dkzf74PiNPkit+TQq4HD5GzCbzRxxmtcjA+jOR0jR9dK9D4A+6Dc6ICg/V1rY8jmhshuSqgxjAg6oO8BoNHLsV7WPCUi8/p4+3TtAH/QbHSDM0EaVvRzEp7AVEFP2AgwGA0f0xTabAfh06IN+I/1ns76pOZ5x1R0xqg6LrYCoC63Q1dXFsa+0xWZAtLLdgj6sTzL+gRsXQKbOXUGbclaYqWUCs6qZtXkVZF3hZSIuLSMblMW8jZcUfD5/5zC8jeoiIr5YStYXq5iggnJmjbySCTyvo1+uY1cm5ZMprqtHBkymzKC4UuZTFjgIGs+mTEPzPzqnvjG+ly3qAAAAAElFTkSuQmCC) no-repeat; height: 24px; width: 24px; display: inline-block; } .main_icons.profile_sm::before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXpUWHRBdXRob3IAAHjaC0gtSq4EAAW+AgT0/P20AAABVUlEQVQoz2NgIAEwSjEyIjgMDOJAKg+IFYH4PhBPevr//0uYPDMPkuL/DAytBqamsa7e3sZ/GRg0Xj5/LviFgWEHTJ7lL6pNNg0FXhI6apIMV25JSfhEn7NBlmRxUEVw7r9l4NLXlmP4/fMnA4iWF2LgevUWSbGtCsIZtioMO+9dPCMuIiUv9PjZw3dx5ow7T2/7j1BcwL+GgYGJGcjiYlD+e20J6+4JgVpG1kLXzh39PFmofwkDQz5cMRPCkv/GP0WNKr5++8mmqKLCAKJBfOb4Xcbw0GDSDQcFmrkkP0ttdax54DchE96vDLwM71SieD3cLLXOXnkg+VU15N7/yyueMjH8/srA8OtzQaavnu/3778ZXrPKMfj6+oLpb99+MeQFGfmC5MFuZvj+DuSESxPmrVcTFRHmeveD5eGl+TnrLstlBgpzXJR/9ebtV4bvPy4xkAoAE8p3+S8J5/IAAAAASUVORK5CYII=) no-repeat; } .xx { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAASCAYAAABrXO8xAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXpUWHRBdXRob3IAAHjaC0gtSq4EAAW+AgT0/P20AAAB/klEQVQ4y6VTQWsTQRh9s9ltemhIcmm1UjAkoiTm1F4tGPXooSB47q2/oYcW2ovgVWzPhd70apGCXjw3W/CW0gTq0SSUTZOS3Z34vi/JSntRdOCb2fn2vXnv+2YX+MdhXm1twRjzks93/4D9Yq09+7i7qxt3NBqBsXiwvb0/jGOEEtYiHucV5Ps+Do6PN0SI0ZCcYwlkGCvgMNQYXl9jcHWFXq+HIAh0/bCzs0/cs7XNzQdKjElkGDnK4eylUpj1PMy4LlzHkTLQ6XTw7vAQtXJ573u9/lqtiqJwhPTt5ETt5XI59Pt9PCqVgChCrVbTfCaTwWff7zaOjuBGY6KRk0sEimUB5fN5VdZBcsS8PtKdKsZMKpFTs9lUtXa7reTzSYOy2SwGgwGq1SqIv0FUq09XVlTRFgqwJEj8YH1ClnyKGOIdJUYTohxz9mlpfLmy400svThPXEjN9xYW6PomUWt8v3cH6+sW5dWHCC9/apeLxWJSs8cuR4lV3ttU8XGlgVN/BqEXIOgM8aRg0Gq1kE6nNe5TkfhbVnn6xttAHGpto0mNU0Wp0WiDb1vl9LVe13q63a6ucvHSUSFKjYX5+d9W5dOSVabny8uJkiqzu9P9VJF4xbqXPJ0jnfwu1JamCMFMVvFm5fNjEK9Yt09FvryYq1Te/NV/6DgX+J/xCz3TPPmO1vJrAAAAAElFTkSuQmCC) 2px no-repeat; padding: 25px 6px 25px 18px; } /* Topic/Board follow-alert menu */ .notify_dropdown strong { font-size: 1.1em; } .notify_dropdown a { display: block; padding: 0.5em; text-decoration: none; border: 1px solid transparent; border-radius: 3px; } .notify_dropdown a:hover, .notify_dropdown a:focus { border-color: var(--border-color); } .notify_dropdown span { font-size: 0.9em; } /* Some new stuff */ #display_head { clear: both; margin: 0px 0px 16px 0px; border-radius: 22px; position: relative; } #display_head p { color: var(--display-head-txt-color); } #display_head span { margin: -4px 0 0 0; } #display_head::after { content: ""; position: absolute; right: 0px; top: 10px; width: 48px; height: 28px; background: var(--display-title-doodle-image) no-repeat center/contain; opacity: 0.30; } .display_title { font-weight: normal; font-size: 26px; margin-bottom: 0.25em; line-height: 1.05em; overflow-wrap: break-word; } #reported_posts .main_icons, #reported_members .main_icons { margin: -3px 1px 0 0; } #reported_posts .quickbuttons li a, #reported_members .quickbuttons li a { background: none; } /* Some colors for generic usage */ /* Sometimes there will be an error when you post */ /* Messages that somehow need to attract the attention. */ .red, .meaction, .error, .alert, .warn_mute { color: var(--red); } .blue { color: var(--blue); } .green { color: var(--green); } /* Adding some classes for generic usage and JS rules */ .hidden { display: none; } .inline_block { display: inline-block; } .block { display: block; margin: 0 0 5px 0; } /* Alternating colors */ .stripes:nth-of-type(even) { background-color: var(--stripes-even-bg-color); } .stripes:nth-of-type(odd) { background-color: var(--stripes-odd-bg-color); } .alternative { background-color: var(--alternative-bg-color); } .alternative2 { background-color: var(--alternative-bg-2-color); } .centerbox { top: 50%; left: 50%; transform: translate(-50%, -50%); } .dz-image-preview { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin-top: 12px; } #attachment_previews { display: none; } #attachment_previews div.descbox > div, #attachment_previews div.errorbox > div, #attachment_previews div.infobox > div { padding: 10px; } #attachment_previews .attach-preview { flex: 0 0 auto; width: 170px; } #attachment_previews .attachment_info { flex: 1 1 auto; width: 250px; } #attachment_previews .attach-ui { min-height: 36px; padding: 10px 0; float: right; } input[name="attachBBC"] { width: 100%; margin-top: 10px; } .attachment_info .progress_bar, .attachment_info .attached_BBC, a#attach_cancel_all, a#attach_upload_all, .attach-ui { display: none; } .attachment_info .progress_bar { margin: 6px 0; } .attached_BBC_width_height label { min-width: 100px; display: inline-block; } .attached_BBC_width, .attached_BBC_height { margin: 10px 1em 0 0; display: inline-block; } .attachment_info input[type="number"] { width: 5em; } #attachment_upload { min-height: 50px; } #drop_zone_ui { display: none; } #total_progress { width: 50%; display: none; } #max_files_progress, #max_files_progress_text { display: none; } /* Hide this from desktop users sshh... our little sekrit */ .mobile_buttons, .mobile_display { display: none; } /* Two-Factor Auth code container */ .tfacode { background: var(--tfacode-bg-color); padding: 5px; display: inline-block; } /* TFA QR block */ .tfa_qrcode { padding: 6% 8%; } .tfa_qrcode img { width: 140px; } /* This was named as "winfo" before, but its better named noup */ .noup { border-top-left-radius: 0; border-top-right-radius: 0; margin: 0 0 10px 0 !important; } .information.noup { border-radius: 0; margin: 0 !important; border-bottom: none; } .windowbg.noup { box-shadow: none; } /* Make the reCAPTCHA dialog centered to match the positioning of the built-in verification */ .g-recaptcha { display: inline-block; } /* If its collapsed you know what to do */ .collapsed { opacity: 0.5; transition: 1s; } .collapsed:hover { opacity: 1; } /* Lets not allow our textarea in news section overflow too much to left */ tr[id^='list_news_lists_'] textarea { width: 100%; resize: vertical; min-height: 100px; } /* Responsive Youtube embed */ .videocontainer { max-width: 560px; } .centertext .videocontainer, .justifytext .videocontainer { margin: 0 auto; } .righttext .videocontainer { margin: 0 0 0 auto; } .lefttext .videocontainer { margin: 0 auto 0 0; } .videocontainer > div { position: relative; padding-bottom: 56.25%; } .videocontainer iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .videocontainer video { object-fit: contain; background: var(--video-container-bg-color); max-width: 100%; } .backtrace:not(:last-child) { padding-bottom: 0.5em; border-bottom: var(--border-width) var(--border-style) var(--border-color); margin-bottom: 0.5em; } /* To break or not to break that is the question indeed */ .word_break { word-break: break-all; } div.sceditor-container:not(.sceditor-maximize) { z-index: 4; } #attach_current_directory { word-break: break-word; } /* Add max-width for theme thumbnails */ img.theme_thumbnail { max-width: 250px; } #lang_main_files_list .name, #member_list .email, #approve_list .email { word-break: break-word; } /*Font Awesome Icons Stuff*/ .main_icons, .icon { margin-inline-end: 4px; display: inline-flex; justify-content: center; align-items: center; } .main_icons.error { color: unset; } .centericon { vertical-align: middle; } .main_icons::before { content: ""; width: 16px; height: 16px; display: inline; background: transparent; vertical-align: middle; } .main_icons.home::before { content: "\f015"; } .main_icons.search::before { content: "\f002"; } .main_icons.admin::before { content: "\f7d9"; } .main_icons.moderate::before { content: "\f637"; } .main_icons.mlist::before { content: "\f0c0"; } .main_icons.lock::before, .main_icons.security::before { content: "\f023"; } .main_icons.sticky::before { content: "\f249"; } .main_icons.poll::Before { content: "\f681"; } .menu_icon::before, .toggle_down::before, .toggle_up::before, .errorbox::before, .infobox::before, .noticebox::before, .main_icons { font-family: "Font Awesome 7 Free"; font-weight: 900; } .main_icons.help::before { content: "\f059"; } .main_icons.search::before, .main_icons.engines::before { content: "\f002"; } .main_icons.quick_edit_button::before, .main_icons.modify_button::before { content: "\f044"; } .main_icons.check::before { content: "\f059"; } .main_icons.invalid::before { content: "\f071"; } .main_icons.gender_2::before { content: "\f221"; } .main_icons.select_above::before { content: "\f0d8"; } .main_icons.select_here::before { content: "\f0d9"; } .main_icons.select_below::before { content: "\f0d7"; } .main_icons.watch::before { content: "\f1e5"; } .main_icons.move::before, .main_icons.next_page::before { content: "\f35a"; } .main_icons.general::before, .main_icons.boards::before, .main_icons.topics_views::before { content: "\f200"; } .main_icons.gender_1::before { content: "\f222"; } .main_icons.features::before { content: "\f1de"; } .main_icons.posters::before { content: "\f091"; } .main_icons.replies::before, .main_icons.topics_replies::before { content: "\f46d"; } .main_icons.history::before, .main_icons.time_online::before, .main_icons.scheduled::before { content: "\f017"; } .main_icons.views::before { content: "\f200"; } .main_icons.last_post::before { content: "\f14d"; } .main_icons.starters::before, .main_icons.people::before, .main_icons.membergroups::before, .main_icons.mlist::before { content: "\f500"; } .main_icons.poll::before { content: "\f681"; } .main_icons.previous_page::before { content: "\f359"; } .main_icons.inbox::before { content: "\f0e0"; } .main_icons.permissions::before, .main_icons.login::before { content: "\f2f6"; } .main_icons.login { width: max-content; } .main_icons.www::before { content: "\f0ac"; } .main_icons.exit::before, .main_icons.logout::before { content: "\f2f5"; } .main_icons.switch::before { content: "\f079"; } .main_icons.replied::before, .main_icons.send::before { content: "\f658"; } .main_icons.im_on::before { content: "\f075"; } .main_icons.im_off::before { content: "\f075"; } .main_icons.split_desel::before { content: "\f0a8"; } .main_icons.split_sel::before { content: "\f0a9"; } .main_icons.mail::before { content: "\f0e0"; } .main_icons.warning_mute::before { content: "\f4b3"; } .main_icons.alerts::before, .main_icons.warn_button::before, .main_icons.warning_moderate::before { content: "\f071"; } .main_icons.mail_new::before { content: "\f0e0"; } .main_icons.drafts::before, .main_icons.reply_button::before, .main_icons.reply_all_button::before { content: "\f573"; } .main_icons.warning_watch::before { content: "\f06a"; } .main_icons.calendar_export::before { content: "\f271"; } .main_icons.calendar::before { content: "\f133"; } .main_icons.calendar_modify::before { content: "\f304"; } .main_icons.plus::before { content: "\f055"; } .main_icons.warning::before, .main_icons.moderate::before { content: "\f637"; } .main_icons.themes::before { content: "\f55d"; } .main_icons.support::before { content: "\f590"; } .main_icons.liked_users::before, .main_icons.liked_messages::before, .main_icons.like::before { content: "\f164"; } .main_icons.unlike::before { content: "\f165"; } .main_icons.current_theme::before { content: "\f482"; } .main_icons.stats::before { content: "\f080"; } .main_icons.right_arrow::before { content: "\f0da"; } .main_icons.left_arrow::before { content: "\f0d9"; } .main_icons.smiley::before { content: "\f580"; } .main_icons.server::before { content: "\f233"; } .main_icons.ban::before, .main_icons.ignore::before { content: "\f05e"; } .main_icons.boards::before { content: "\f07b"; } .main_icons.regcenter::before { content: "\f304"; } .main_icons.posts::before { content: "\f15b"; } .main_icons.sort_down::before { content: "\f884"; } .main_icons.change_menu2::before, .main_icons.sent::before { content: "\f061"; } .main_icons.post_moderation_moderate::before { content: "\f071"; } .main_icons.sort_up::before { content: "\f885"; } .main_icons.post_moderation_deny::before { content: "\f023"; } .main_icons.post_moderation_attach::before { content: "\f0c6"; } .main_icons.post_moderation_allow::before { content: "\f138"; } .main_icons.personal_message::before { content: "\f0e0"; } .main_icons.permissions::before, .main_icons.signup::before { content: "\f084"; } .main_icons.paid::before { content: "\f53a"; } .main_icons.packages::before { content: "\f466"; } .main_icons.filter::before { content: "\f0b0"; } .main_icons.change_menu::before { content: "\f060"; } .main_icons.package_ops::before { content: "\f085"; } .main_icons.reports::before { content: "\f0c5"; } .main_icons.news::before { content: "\f1ea"; } .main_icons.delete::before, .main_icons.prune::before, .main_icons.remove_button::before { content: "\f1f8"; } .main_icons.modifications::before { content: "\f12e"; } .main_icons.maintain::before, .main_icons.admin::before { content: "\f7d9"; } .main_icons.administration::before, .main_icons.home::before { content: "\f015"; } .main_icons.frenemy::before { content: "\f506"; } .main_icons.attachment::before { content: "\f0c6"; } .main_icons.lock::before, .main_icons.security::before { content: "\f023"; } .main_icons.error::before, .main_icons.disable::before { content: "\f06a"; } .main_icons.languages::before { content: "\f1ab"; } .main_icons.recent_posts::before { content: "\f086"; } .main_icons.members_request::before { content: "\f234"; } .main_icons.members_delete::before { content: "\f503"; } .main_icons.members::before { content: "\f0c0"; } .main_icons.members_watched::before { content: "\f507"; } .main_icons.sticky::before { content: "\f08d"; } .main_icons.corefeatures::before, .main_icons.settings::before, .main_icons.manrules::before, .main_icons.manlabels::before { content: "\f085"; } .main_icons.calendar::before { content: "\f073"; } .main_icons.logs::before { content: "\f022"; } .main_icons.valid::before { content: "\f00c"; } .main_icons.approve::before, .main_icons.enable::before, .main_icons.approve_button::before, .main_icons.read_button::before { content: "\f00c"; } .main_icons.close::before { content: "\f05e"; } .main_icons.details::before { content: "\f15c"; } .main_icons.merge::before { content: "\f0c1"; } .main_icons.folder::before { content: "\f078"; } .main_icons.restore_button::before { content: "\f2f1"; } .main_icons.split_button::before { content: "\f127"; } .main_icons.unapprove_button::before, .main_icons.unread_button::before, .main_icons.hide_popup::before { content: "\f00d"; } .main_icons.quote::before { content: "\f10e"; } .main_icons.quote_selected::before { content: "\f246"; } .main_icons.notify_button::before { content: "\f0f3"; } .main_icons.profile_sm::before { content: "\f007"; background: none; } /* Info Center Blocks */ .info_center_block { border-radius: 4px; border: 2px dashed var(--info-center-block-border-color); margin-bottom: 16px; background: var(--info-center-block-bg-color); border-radius: 22px; padding: 8px 4px; } .recent_post_link { font-size: 1.1em; font-weight: bold; } .recent_posts_board_link { display: block; } .recent_avatar { width: 24px; height: 24px; border-radius: 50%; margin-left: 4px; } /* BoardStats Flex Grid Thingy thing thing */ .boardstats_grid_row { flex-basis: 100%; padding: 8px; margin: 0px 4px; text-align: center; font-size: 1em; background: var(--info-center-stats-card-bg-color); border-radius: 9px; border: 1px dashed var(--info-center-stats-card-border-color); } @media screen and (min-width:800px) { .boardstats_grid_column { display: flex; flex-direction: row; flex-wrap: nowrap; } .boardstats_flex { flex: 1; } } /* Recent Flex Grid Thingy thing thing */ .recent_grid_column { padding: 0px 6px; margin: 0px; text-align: left; font-size: 1em; } #recent_posts_content { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; } #recent_posts_content::after { content: "☮"; display: block; position: absolute; bottom: -7px; right: 2px; color: var(--upshrink-icon-bg-color); opacity: 0.4; font-size: 0.9em; } @media screen and (min-width:800px) { .recent_grid_row { background: var(--info-center-stats-card-bg-color); margin: 4px 8px; padding: 8px; border: 1px dashed var(--info-center-stats-card-border-color); display: flex; border-radius: 22px; } .recent_grid_flex { flex: 1; } } @media screen and (max-width: 799px) { .recent_grid_row img.avatar { display: none; } .recent_grid_row { background: var(--info-center-stats-card-bg-color); margin: 4px 8px; padding: 8px; border: 1px dashed var(--info-center-stats-card-border-color); display: flex; border-radius: 22px; } #recent_posts_content { display: flex; flex-direction: column; } } .recent_grid_row img.avatar { max-width: 35px!important; max-height: 35px!important; border-radius: 50%; padding: 0px; align-self: flex-start; } /* Social Icons */ .social-icons { display: flex; font-size: 1.2em; padding: 0px 8px 0px 8px; text-align: left; } .social-icons a { margin: 0px 4px 0px 0px; padding: 0px; } .social-icons i:hover, .social-icons a:hover { transform: rotate(720deg) scale(1.3); transition: ease 0.35s; } .header_user_panel { display: flex; flex-direction: column-reverse; } /*Light&Dark Mode Switcher*/ .theme-switch-wrapper { padding: 0px; margin: 0px; text-align: center; } .theme-switch { display: inline-flex; color: var(--top-info-link-color); width: 26px; height: 16px; position: relative; border-radius: 34px; background-color: transparent; border: none; } .theme-switch-wrapper:hover { border-bottom: 2px dashed var(--top-info-link-hover-border-color); } .theme-switch input { display:none; } .slider { background-color: transparent; bottom: 0; cursor: pointer; } .slider:hover { color: var(--top-info-link-hover-color); } .slider:before { background-color: transparent; content: "\f185"; transition: .4s; font-family: "Font Awesome 7 Free"; font-weight: 700; font-size: 16px; text-shadow: var(--top-info-link-txt-shadow); margin: 0px 4px; } input:checked + .slider { background-color: transparent; } input:checked + .slider:before { background-color: transparent; } input:checked + .slider:before { content: "\f186"; font-weight: 700; font-family: "Font Awesome 7 Free";font-size:16px;text-shadow:var(--top-info-link-txt-shadow);margin:0 4px}.slider:before{color:var(--top-info-link-color)}@media (min-width:856px) and (max-width:1024px){#alerts .alert_time{display:none}#alerts .alert_inline_time{display:block}}@media (min-width:721px) and (max-width:855px){#alerts .alert_time{display:none}#alerts .alert_inline_time{display:block}}@media (max-width:855px){#profile_menu_top .textmenu,#pm_menu_top .textmenu,#alerts_menu_top .textmenu{display:none}#pm_menu_top .main_icons,#alerts_menu_top .main_icons{display:inline-block}#member_list .ip,#member_list .last_active,#member_list .user_name{display:none!important}}@media (min-width:720px) and (max-width:799px){#top_info .welcome{display:none}#event_time_options{width:44%}#event_title{padding:0}#evtitle{width:98%}.event_options_left,.event_options_right{display:block;max-width:unset;width:unset}#event_title input[type="text"]{width:100%}#post_event #event_board select{width:calc(100% - 90px);max-width:unset}}@media screen and (max-width:720px){.header-doodles{display:none}#list_integration_hooks th#header_list_integration_hooks_function_name,#list_integration_hooks td.function_name,#list_integration_hooks th#header_list_integration_hooks_remove,#list_integration_hooks td.remove{display:none}.moderationbuttons_check{display:none}.moderationbuttons_mobile_check{display:inline-block}#mobile_action .button,#mobile_moderation .button,#mobile_action .top_menu{width:100%;margin:0;border-radius:0;border-left:0;border-right:0;text-indent:5px}#mobile_action .button,#mobile_moderation .button{line-height:2.8em;height:auto}#mobile_action .notify_dropdown{top:0!important;left:0!important;position:relative}#mobile_action .top_menu{padding:0;margin:0 auto}#mobile_action .notify_dropdown a{border-bottom:var(--border-width) var(--border-style) var(--border-color)}#mobile_action .notify_dropdown a:last-of-type{border-bottom:none}#mobile_action .notify_dropdown span{display:none}.mobile_buttons{margin:5px 0}.mobile_buttons .button{margin:0}.pagesection .buttonlist,#moderationbuttons{display:none}.mobile_buttons{display:block}#top_info{padding:0}.infolinks{display:inline-block;margin:5px 7px 0 0}#registration .field_icons{float:left;margin:5px 0 0 3px}dl.register_form dt span{display:inline}#quick_actions{display:flex;justify-content:flex-end;flex-wrap:wrap}#quick_actions>*{flex:0 1 auto;margin:0 5px 0 0;max-width:40%;white-space:nowrap}#quick_actions>.button.qaction{flex:0 0 auto;margin:0!important}.quickbuttons li:hover ul{display:none}.action_home{width:100%!important}#wrapper{border-radius:0}#footer{padding:10px}#top_section .inner_wrap,#wrapper,#header,#footer .inner_wrap,#main_menu .inner_wrap{width:100%}#upper_section,#inner_section,#content_section{border-radius:0}#boardindex_table .stats{display:none}.login{width:100%}#inner_wrap{flex-flow:row wrap}#inner_wrap .user,#inner_wrap .news{width:auto;max-width:initial}#languages_form{padding-right:10px}.board_stats{display:none!important}.info{width:calc(100% - 65px)}.lastpost{width:100%;padding:0;display:block;min-height:2em}.up_contain .lastpost{background:var(--children-bg-color);border-top:var(--border-width) var(--border-style) var(--border-color);min-height:initial;font-size:.8em}.lastpost p{margin:5px}.board_lastpost{padding:0 0 0 0}.board_lastpost a{text-decoration:none}span.postby{display:inline-block}.children{margin:0;padding:0 0 0 5px;width:100%}.children p{font-size:0.8rem!important;line-height:2.2em;columns:unset}.children strong{column-span:all;display:inline}.children span{display:inline}.children span::after{content:"•";color:var(--white)}#ic_recentposts{margin:0;width:100%}#upshrink_stats p.inline,#upshrink_stats p.last{padding:5px}#messageindex .board_icon,#messageindex .lastpost{display:none}#messageindex .info{padding:8px 10px}.moderation a{padding:3px}#topic_container .moderation .main_icons{display:none}#unread .board_icon,#unread .lastpost,#unreadreplies .board_icon,#unreadreplies .lastpost{display:none}#unread .info,#unreadreplies .info{padding-left:5px}.postarea{margin:0}.inner{padding:1em 2px}.moderatorbar{margin:0}.keyinfo{padding-top:5px;margin-top:5px;clear:both}.keyinfo .postinfo{font-weight:400}.keyinfo .postinfo a.smalltext:hover{text-decoration:underline}img.icon,#forumposts .catbg img{display:none}.poster h4{display:inline-block;margin-left:50px}.user_info{display:inline}.user_info li,.custom_fields_above_member,.user_info li.im_icons,.user_info li.profile{display:none}.user_info li.title,.user_info li.membergroup{display:inline-block;font-weight:400}.like_count,.smflikebutton:last-child{margin-bottom:8px}.button.mobile{margin:0 0 5px 0}.pagelinks{margin:0}#admin_content .content{padding:0}#creator dt{width:33%}#creator dd{width:65%}#basicinfo,#detailedinfo{width:100%}#basicinfo{margin:0 0 5px 0}#edit_buddies .buddy_custom_fields{display:none}#personal_messages .pm_time,#personal_messages .pm_from_to{display:none}#personal_messages .pm_inline_time{display:block}#alerts .alert_text,#alerts .alert_time,#alerts .alert_buttons{display:block}#alerts .alert_time{float:left}#alerts .alert_text{margin:11px 0 0}#alerts .alert_buttons .quickbuttons{margin:0 0 11px;display:block}#alerts .alert_image{width:60px}form#postmodify .roundframe,#post_event .roundframe{padding:5px}#post_header input{width:100%}#post_confirm_buttons .smalltext{display:none}ul.post_options{padding:0;margin:0}ul.post_options li{margin:2px 5px 0 0;width:48%}#searchform .roundframe{padding:5px}#advanced_search dt{text-align:left;width:100%;float:left}#advanced_search dd{width:auto}#advanced_search dl#search_options{width:100%}input#searchfor,input#userspec{width:75%}#inner_wrap.hide_720,.hide_720,#inner_wrap time,#inner_wrap .news,#message_index_jump_to,.nextlinks,#display_jump_to,#siteslogan,th.id_group,th.registered,th.posts,th.reg_group,th.reg_date,td.reg_group,td.reg_date,td.id_group,td.registered,td.posts:not(.unique),td.statsbar.posts,#approve_list .ip,#approve_list .date_registered,#group_members .date_registered,#main_content_section .navigate_section,.time,#header_custom_profile_fields_field_type,#header_custom_profile_fields_active,#header_custom_profile_fields_placement,#custom_profile_fields .active,#custom_profile_fields .field_type,#custom_profile_fields .placement{display:none!important}#topic_notification_list .last_post,#topic_notification_list .started_by,#request_list .time_applied,#file_list .date,#ban_list .notes,#ban_list .reason,#ban_log .email,#mail_queue .priority,#attachments .posted{display:none}.admin_search{float:none}.table_grid.half_content{width:100%;margin:0;padding:0}.table_grid select{max-width:85vw}#private,#enclose{width:95%}#language_list .character_set{display:none}.hide_720{display:none}.block_720{display:block}.inlineblock_720{display:inline-block}}@media (min-width:801px){#mobile_user_menu.popup_container{display:block!important}div[id^="mobile_generic_menu_"].popup_container{display:block!important}#main_menu .popup_window,#genericmenu .popup_window,#adm_submenus .popup_window{box-shadow:none;border-width:0;background:none}}@media (max-width:800px){#main_menu .popup_container,#genericmenu .popup_container,#adm_submenus .popup_container{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:5}#main_menu .popup_heading,#genericmenu .popup_heading,#adm_submenus .popup_heading{display:block;padding:10px 8px 8px 8px}#main_menu{margin:0 2px;border:none;display:flex}.popup_window,#main_menu .popup_window,#genericmenu .popup_window,#adm_submenus .popup_window{top:20%;width:95vw;min-height:auto;max-height:90vh;overflow-x:hidden;overflow-y:scroll}#adm_submenus{padding:0}#adm_submenus .dropmenu li{float:left;margin:0}.generic_menu{display:none}#mobile_user_menu .dropmenu,div[id^="mobile_generic_menu_"] .generic_menu{display:block;border:none}a.mobile_user_menu,a[class^="mobile_generic_menu_"]{display:flex;align-items:center;margin:0;min-width:100px;color:var(--top-info-link-color);padding:10px 0}a[class^="mobile_generic_menu_"]{margin:8px 0}.menu_icon{display:inline-block;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgdmVyc2lvbj0iMS4xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgd2lkdGg9IjI0cHgiCiAgIGhlaWdodD0iMjRweCIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGlkPSJzdmcxIgogICBzb2RpcG9kaTpkb2NuYW1lPSJtZW51LnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGY0MzI3ZjQsIDIwMjUtMDUtMTMpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgIGlkPSJkZWZzMSIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgIGlkPSJuYW1lZHZpZXcxIgogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICBpbmtzY2FwZTpzaG93cGFnZXNoYWRvdz0iMiIKICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgaW5rc2NhcGU6ZGVza2NvbG9yPSIjZDFkMWQxIgogICBpbmtzY2FwZTp6b29tPSIzMy42MjUiCiAgIGlua3NjYXBlOmN4PSIxMiIKICAgaW5rc2NhcGU6Y3k9IjEyIgogICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiCiAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMDkiCiAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcxIiAvPgo8ZwogICBpZD0iSWNvbnMiCiAgIHN0eWxlPSJvcGFjaXR5OjAuNzU7Ij4KCTxwYXRoCiAgIGlkPSJtZW51IgogICBkPSJNNiwxNWgxMmMwLjU1MywwLDEsMC40NDcsMSwxdjFjMCwwLjU1My0wLjQ0NywxLTEsMUg2Yy0wLjU1MywwLTEtMC40NDctMS0xdi0xQzUsMTUuNDQ3LDUuNDQ3LDE1LDYsMTV6IE01LDExdjEgICBjMCwwLjU1MywwLjQ0NywxLDEsMWgxMmMwLjU1MywwLDEtMC40NDcsMS0xdi0xYzAtMC41NTMtMC40NDctMS0xLTFINkM1LjQ0NywxMCw1LDEwLjQ0Nyw1LDExeiBNNSw2djFjMCwwLjU1MywwLjQ0NywxLDEsMWgxMiAgIGMwLjU1MywwLDEtMC40NDcsMS0xVjZjMC0wLjU1My0wLjQ0Ny0xLTEtMUg2QzUuNDQ3LDUsNSw1LjQ0Nyw1LDZ6IiAvPgo8L2c+CjxnCiAgIGlkPSJHdWlkZXMiCiAgIHN0eWxlPSJkaXNwbGF5Om5vbmU7Ij4KPC9nPgo8cGF0aAogICBzdHlsZT0iZmlsbDojZmZmZmZmO3N0cm9rZS13aWR0aDowLjAyOTczOTgiCiAgIGQ9Ik0gNS43MzM0MTM4LDcuOTQyMTYzNiBDIDUuNDMxMjAwNyw3Ljg0NzI4NDIgNS4yMzkwMTczLDcuNjc5MDQzNCA1LjEwMzA1MzIsNy4zOTAzMzQ2IDUuMDI2NzE4OCw3LjIyODI0NDggNS4wMjYwMjIzLDcuMjIwMTc3OCA1LjAyNjAyMjMsNi40OTgxNDEzIGMgMCwtMC43MjU5NDExIDIuOWUtNCwtMC43MjkyNDMyIDAuMDc4NzUsLTAuODk2NTkzNyBDIDUuMjA1MDU3NCw1LjM4NzY0NDQgNS4zODc2NDQ0LDUuMjA1MDU3NCA1LjYwMTU0NzYsNS4xMDQ3NzIxIGwgMC4xNjc5NjkxLC0wLjA3ODc1IEggMTIgMTguMjMwNDgzIGwgMC4xNjc5NjksMC4wNzg3NSBjIDAuMjEzOTA0LDAuMTAwMjg1MyAwLjM5NjQ5MSwwLjI4Mjg3MjMgMC40OTY3NzYsMC40OTY3NzU1IDAuMDc4NDYsMC4xNjczNTA1IDAuMDc4NzUsMC4xNzA2NTI2IDAuMDc4NzUsMC44OTY1OTM3IDAsMC43MjI2NTU0IC02LjM0ZS00LDAuNzI5OTc1NiAtMC4wNzczNiwwLjg5MzU1MDMgLTAuMTA2NTU5LDAuMjI3MTg1NSAtMC4yMjk5MjIsMC4zNTgxNjEgLTAuNDQ5NDc3LDAuNDc3MjEyNiBsIC0wLjE4NjkyMSwwLjEwMTM1NiAtNi4yMDA3NDMsMC4wMDU2MiBjIC01LjA3MjA4MjYsMC4wMDQ2IC02LjIyMzU1NTIsLTAuMDAxNTQgLTYuMzI2MDY2MiwtMC4wMzM3MjEgeiIKICAgaWQ9InBhdGgxIiAvPjxwYXRoCiAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjAuMDI5NzM5OCIKICAgZD0iTSA1LjY4OTEzNjYsMTIuOTI4Mjc2IEMgNS4zNzI3NTEsMTIuODEzMDEzIDUuMTQ3NDA0OSwxMi41NzEwMDggNS4wNTIxMDY3LDEyLjI0NDE1MyBjIC0wLjAzNjc4NywtMC4xMjYxNzEgLTAuMDQzOTEzLC0wLjI4ODE2IC0wLjAzNTk3OSwtMC44MTc4NDQgMC4wMDk1NywtMC42Mzg4NjcgMC4wMTI0MjIsLTAuNjY1ODY5IDAuMDg3MDQ5LC0wLjgyNDA3OSAwLjA5NzY4NCwtMC4yMDcwOTIgMC4yODIwNjYsLTAuMzkxMjE2IDAuNDk3OTAzOCwtMC40OTcyMSBMIDUuNzY5NTE2NCwxMC4wMjIzIEggMTIgMTguMjMwNDgzIGwgMC4xNjg0MzYsMC4wODI3MiBjIDAuMjE1ODM4LDAuMTA1OTk0IDAuNDAwMjE5LDAuMjkwMTE4IDAuNDk3OTA0LDAuNDk3MjEgMC4wNzY1LDAuMTYyMTg0IDAuMDc3MTUsMC4xNjk3NDUgMC4wNzcxNSwwLjg5Mjc2OSB2IDAuNzI5MTk5IGwgLTAuMDk3OSwwLjE5ODkyMSBjIC0wLjEwNjQ3OCwwLjIxNjM0MiAtMC4yNTg1ODQsMC4zNjczNjkgLTAuNDc5Nzc1LDAuNDc2MzY4IGwgLTAuMTM2MDc2LDAuMDY3MDYgLTYuMjE1NjEzLDAuMDA2MyBjIC01LjgwNDA3MjIsMC4wMDU5IC02LjIyNDg3NCwwLjAwMyAtNi4zNTU0NzM0LC0wLjA0NDYxIHoiCiAgIGlkPSJwYXRoMiIgLz48cGF0aAogICBzdHlsZT0iZmlsbDojZmZmZmZmO3N0cm9rZS13aWR0aDowLjAyOTczOTgiCiAgIGQ9Ik0gNS42NDYyOTE0LDE3LjkxNTc3IEMgNS40MjU3MzE3LDE3LjgzMDk0OCA1LjIzOTIyMTgsMTcuNjUzNjYgNS4xMjM3Njk0LDE3LjQxOTA4NCBsIC0wLjA5Nzc0NywtMC4xOTg2MDMgdiAtMC43MjkyIC0wLjcyOTE5OSBsIDAuMDgzMSwtMC4xNjkyMjIgQyA1LjIxNjM3ODEsMTUuMzc0NDQ4IDUuNDY0MzM4MSwxNS4xNDU3MDkgNS42NzI1MTkyLDE1LjA3MzEzNiA1LjgyMjMzNjYsMTUuMDIwOTA5IDYuMDkxNjM2NiwxNS4wMTg1ODcgMTIsMTUuMDE4NTg3IGMgNS45MDgzNjMsMCA2LjE3NzY2MywwLjAwMjMgNi4zMjc0ODEsMC4wNTQ1NSAwLjIwODE4MSwwLjA3MjU3IDAuNDU2MTQxLDAuMzAxMzEyIDAuNTYzMzk3LDAuNTE5NzI0IGwgMC4wODMxLDAuMTY5MjIyIHYgMC43MjkxOTkgMC43MjkyIGwgLTAuMDk3NzUsMC4xOTg2MDMgYyAtMC4xMTczMzYsMC4yMzg0MDQgLTAuMzAzNDU2LDAuNDEzMDE4IC0wLjUzMDk2NCwwLjQ5ODE0IC0wLjE2MDY1NywwLjA2MDExIC0wLjE5ODY3NywwLjA2MDQ2IC02LjM1MzgxNiwwLjA1ODkyIC02LjA5NTk2NCwtMC4wMDE1IC02LjE5NDU3MDcsLTAuMDAyNSAtNi4zNDUxNTg2LC0wLjA2MDM4IHoiCiAgIGlkPSJwYXRoMyIgLz48L3N2Zz4K) no-repeat;height:24px;width:24px}.dropmenu li,.dropmenu li:hover,.dropmenu li a,.dropmenu li a:hover,.dropmenu li a.active,.dropmenu li a.active:hover,.dropmenu li:hover a.active,.dropmenu li ul,.dropmenu li li,.dropmenu li li a{width:100%;padding:0;margin:0;border-left:0;border-right:0}.dropmenu li a,.dropmenu li a:hover{text-indent:4px;border-radius:0;padding:5px 0!important}.dropmenu li li li a,.dropmenu li li li a:hover{padding:5px 24px!important}.dropmenu li a,.dropmenu li:hover a,.dropmenu li a.active,.dropmenu li a.active:hover,.dropmenu ul li a:hover,.dropmenu li li a:hover,.dropmenu ul li li:hover,.dropmenu li ul,.dropmenu li li:hover ul,.dropmenu li li ul{border-left:0;border-right:0}.dropmenu ul li a{width:auto!important}.dropmenu li.subsections>a::after{position:absolute;padding:5px 0;right:10px;font-family:var(--dropmenu-subsections-font-family);font-size:var(--dropmenu-subsections-font-size);line-height:var(--dropmenu-subsections-line-height);content:"\25bc"!important}.dropmenu li ul,.dropmenu li li:hover ul,.dropmenu li li ul{position:relative;border-radius:0;left:0;top:0;box-shadow:none;border:none}.dropmenu li ul ul{margin:0!important}}@media (min-width:481px) and (max-width:560px){#event_time_options{width:40%}#event_title,#event_board{width:100%}#evtitle{width:98%}}@media (max-width:480px){h1.forumtitle a,h1.forumtitle{padding:0;margin:0 2px;align-items:center;text-align:center;max-width:360px;display:inline-flex;font-size:3vh}#top_info>li>a{padding:0}#top_info>li{padding:0 2px}#alerts_menu_top .amt{right:-4px}#pm_menu_top .amt{right:-4px}.theme-switch{margin:0 0 0 -8px}.header-doodles{display:none}.board_moderators{display:none}#top_info .welcome{display:none}#top_info .infolinks{margin:0 5px 0 0}#pm_menu,#alerts_menu,#profile_menu{min-width:initial;width:25em;max-width:calc(100vw - 17px)}#search_form{display:none}.info{padding:8px 5px 8px 0}#footer{text-align:center}#footer ul{width:100%;float:none}#footer li{display:inline;float:none;padding:0 4px 0 4px;text-align:center}.main_container{padding:0;margin:0 0 16px 0}#main_content_section .pagelinks{display:block}#main_content_section .pagesection{margin:5px 0;padding:0}#topic_icons p{display:block;width:100%}.mobile_subject{position:relative}fieldset{max-width:100%;min-width:unset}#registration .button{font-size:.67em}dl.register_form,dl.register_form dt,dl.register_form dd{float:none;width:100%}.login dt,.login dd{float:none;width:100%;text-align:left}.login #ajax_loginuser,.login #ajax_loginpass,.login #loginuser,.login #loginpass,.login select{width:100%}.subject_title input{width:90%}#quickreply_options .roundframe{padding:8px 10px 12px 10px}#post_header dd{width:55%}#post_header dt{width:35%}img#icons{margin:0 0 0 5px}#quickreply_options #postmodify{width:100%}.user_info li.title{display:none}#poll_options dl.options{padding:0}#poll_options dl.options dt,#poll_options dl.options dd,dl.settings dt,dl.settings dd,#creator .settings dt,#creator .settings dd,div#report_form dl.settings dd,div#report_form dl.settings dt,#tracking dt,#tracking dd,#detailedinfo dt,#detailedinfo dd,#advanced_search dt,#advanced_search dd{width:100%;float:none}#post_draft_options dl.settings dt,#post_draft_options dl.settings dd{width:50%;float:left}dl.settings dd textarea,#report_comment{width:100%}.move_topic{width:100%}.bbc_float{max-width:100%!important;margin-left:0.5em!important;margin-right:0.5em!important}#personal_messages .pm_icon{display:none}#personal_messages div.labels{clear:both}#alerts .alert_image{width:40px;padding-left:6px}#alerts .alert_image .avatar{display:none}#alerts .alert_image .avatar+.alert_icon{position:static}#edit_buddies .buddy_email{display:none}.half_content{width:100%;margin:0;padding:0}th.recentboard,th.recenttime,td.recentboard,td.recenttime{display:none}.sceditor-container{min-height:375px}th.website_url,td.website_url,td.reg_group,td.reg_date,td.post_num{display:none}#mlist .post_count{width:50px}#mlist .post_count .generic_bar{border:0;background:transparent;color:inherit}#mlist .post_count .generic_bar .bar{background:transparent;box-shadow:none}#mlist_search dt{width:100%;display:block;padding:0}#mlist_search dd{padding:0;margin:0}#mlist_search input[type="checkbox"]{margin:0 13px 3px 3px;vertical-align:middle}.post_note input{width:75%}.modbox .floatleft{float:none}#warning_list .reason,#moderation_log_list .position,#moderation_log_list .ip,#group_members .last_active,#group_request_list .date,#group_lists .icons,#regular_membergroups_list .icons,#post_count_membergroups_list .icons,#watch_user_list .last_login{display:none}#live_news,#support_info{width:100%;padding:0;margin:0 0 5px 0}fieldset.admin_group a{width:50%;float:left;margin:0 0 5px 0}.error_info,#fatal_error{width:100%!important;padding:0!important;float:none}.event_options_left,.event_options_right{width:100%}#event_title,#event_board{width:100%}#evtitle{width:98%}#header_news_lists_preview,tr[id^="list_news_lists_"] td:nth-child(even),#header_smiley_set_list_default,#header_smiley_set_list_url,#header_smiley_set_list_check,tr[id^="list_smiley_set_list_"] td:nth-child(odd),#header_mail_queue_priority,tr[id^="list_mail_queue_"] td:nth-child(odd),#header_member_list_user_name,#header_member_list_ip,#header_member_list_last_active,#header_member_list_posts{display:none}tr[id^="list_mail_queue_"] td:first-of-type,tr[id^="list_mail_queue_"] td:last-of-type{display:table-cell}.msearch_details{width:100%!important;float:none}.msearch_details .righttext{text-align:left}.msearch_details input{width:90%}.msearch_details input[type="checkbox"]{width:5%}#request_list .time_applied,#track_user_list .date,#track_user_list .date2,#file_list .filesize,#file_list .downloads,#ban_list .added,#ban_list .num_triggers,#ban_log .date,#mail_queue .age,#attachments .subject{display:none}#likes li .like_time{display:none}.hide_480{display:none}.block_480{display:block}.inlineblock_480{display:inline-block}}@media (max-width:360px){.poster li.avatar{display:none!important}.poster h4{margin:0}}@media (max-width:480px){#advanced_search,.popup_window{width:100%;max-width:100%}#wrapper{overflow:hidden}.main_container::after{content:"☯";bottom:8px;right:12px;left:unset}.main_container::before{content:"";display:none}#profile_menu_top>img.avatar{height:16px;max-width:16px;margin:0 0;align-content:center;display:inline-flex;vertical-align:text-top}}