a {
	color: #941c31;
}

html {
	background: #696969 url(../img/gbg.png);
}

body {
	margin: 0 auto;
	padding: 15px 30px 45px 30px;
	font-family: 'Martel', serif;
}

/* generic */

.flex-right {
	display: flex;
	flex-direction: row-reverse;
}

.flex-middle {
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.is-flex {
	display: flex;
}

/* Modern Button System */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-family: inherit;
    margin: 0 0.25rem;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-primary {
    background-color: #941c31;
    color: white;
}

.btn-primary:hover {
    background-color: #7a1729;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-warning {
    background-color: #ffc107;
    color: #000;
}

.btn-warning:hover {
    background-color: #e0a800;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #941c31;
    color: #941c31;
}

.btn-outline:hover {
    background-color: #941c31;
    color: white;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

/* Legacy button compatibility */
button.std-button {
    background-color: #941c31;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    border-radius: 4px;
    padding: 3px 10px 3px 10px;
    margin: 0 5px;
}

#page {
	background-color: white;
}

#bottomad {
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: center;
}

#topad {
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: center;
}

main {
	display: flex;
	padding: 0 10px;
}

main ul {
	list-style: disc outside url(../img/rbullet.png);
	padding-inline-start: 20px;
}

#left {
	flex: 1;
	padding-right: 10px;
	margin-top: 5px;
}

#left.full-width {
	flex: 1;
	max-width: 100%;
	padding-right: 20px;
	margin-top: 5px;
}

#left h1 {
	background-image: url(../img/rbg.png);
	color: white;
	padding: 3px;
	font-size: 1.1em;
}

#right {
	width: 300px;
}

h1,
h2,
h3,
h4 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#title {
	background: #d8d8da url(../img/title3.jpg);
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0;
	padding: 0;
	font-family: 'Martel Sans', sans-serif;
	font-size: 35.5px;
	font-weight: 990;
	height: 88px;
	padding-left: 10px;
	vertical-align: text-bottom;
	white-space: nowrap;
	overflow: hidden;
}

#title p {
	color: white;
	text-decoration: none;
	margin: 0;
	margin-top: 45px;
	text-shadow: 1px 1px 2px black;
}

#title p a {
	text-decoration: none;
	color: white;
}

#subtitle {
	background-color: #941c31;
	background-image: url(../img/rbg.png);
	margin: 0;
	padding: 0;
	color: #d8d8da;
	font-family: 'Martel Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	height: 22px;
	padding-left: 13px;
	letter-spacing: .1rem;
	white-space: nowrap;
	overflow: hidden;
}

#menubar {
	padding: 0;
	margin: 0;
	background-image: linear-gradient(#dedede, #888888);
	font-family: 'Martel Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
}

a.navbutton {
	text-decoration: none;
	color: #000000;
	background: url(../img/div.png) no-repeat right;
	padding: 2ex;
	line-height: 2.2em;
}

a.navbutton:hover {
	text-decoration: none;
}

div.block {
	border: solid 1px maroon;
	margin-top: 10px;
	padding: 0;
	overflow: hidden;
}

div.block h2 {
	font: bold 14px Verdana, sans-serif;
	background: #941c31 url(../img/rbg.png);
	color: #ffffff;
	margin: 0px;
	padding: 0em 0em 0.2em 0.2em;
}

div.block div.block-contents {
	padding: 5px;
}

footer {
	background-color: #941c31;
	background-image: url(../img/rbg.png);
	margin: 0;
	padding: 1.5rem 1rem;
	color: #d8d8da;
	font-family: 'Martel Sans', sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
}

footer p {
	margin: 0;
	padding: 0;
}

article.story {
	border-bottom: 1px dashed #c0c0c0;
	margin-bottom: 2em;
	padding-bottom: 1em;
	line-height: 1.5;
}

article.story h2 {
	color: #941c31;
	font-size: 1.2em;
	margin: 0 0 0.5em 0;
	line-height: 1.3;
}

article.story p.date {
	color: #aaa;
	padding: 0;
	margin: 0 0 0.3em 0;
	font-size: 0.9em;
}

article.story div.bottom {
	text-align: right;
	font-size: 0.85em;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin-top: 1em;
	padding-top: 0.5em;
	border-top: 1px solid #f0f0f0;
}

article.story a {
	color: #941c31;
}

article.story p.author {
	color: #666;
	font-size: 0.9em;
	margin: 0 0 1em 0;
	font-style: italic;
}

article.story div.bottom a {
	color: #941c31;
	text-decoration: none;
	margin-left: 15px;
	display: inline-block;
}

article.story div.bottom a:first-child {
	margin-left: 0;
}

article.story div.bottom a:hover {
	text-decoration: underline;
}

article.story div.bottom img {
	vertical-align: middle;
	margin-right: 4px;
}

/* Clearfix for article content */
article.story:after {
	content: "";
	display: table;
	clear: both;
}

/* Improve paragraph spacing in articles */
article.story p {
	margin: 0 0 1em 0;
	line-height: 1.6;
}

.story img.topic {
	float: left;
	margin: 0 15px 10px 0;
	max-width: 80px;
}

/* forum */
.forums div.forum {
	border: 1px solid #590000;
	padding: 15px;
	margin-bottom: 20px;
}

.forums div.forum h2 {
	margin: 0;
}

span.lastposter {
	margin-left: 20px;
	font-weight: bold;
}

div.locked h2 {
	padding-left: 20px;
	background-image: url(../img/folder_lock.gif);
	background-repeat: no-repeat;
}

div.sticky h2 {
	padding-left: 20px;
	background-image: url(../img/folder_sticky.gif);
	background-repeat: no-repeat;
}

div.announce h2 {
	padding-left: 20px;
	background-image: url(../img/folder_announce.gif);
	background-repeat: no-repeat;
}

/* topic page */

#editor {
	width: 100%;
	display: none;
}

.new-post {
	width: 100%;
	height: 300px;
}

.postholder .editbtn {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: #941c31;
	font-weight: bold;
}

.postholder .editlist {
	display: none;
	font-size: small;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-color: #e2e2e2;
}

.bbquote {
	background-color: #dddbdb;
	padding: 5px;
	margin: auto 5px;
	font-style: italic;
}

div.forum-list {
	margin-top: 15px;
	font-family: 'Martel Sans', sans-serif;
	font-weight: bold;
	font-size: 1.1em;
}

#topic-title {
	font-family: 'Martel', serif;
	padding-left: 5px;
}

.avatar {
	margin-left: -3px;
	margin-top: -3px;
	margin-right: 10px;
	margin-bottom: 3px;
	font-size: small;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.avatar>img {
	max-width: 64px;
	max-height: 64px;
}

section.forum div.topic {
	display: flex;
	border-bottom: 1px dashed #aaa;
	margin: 5px 0 0px 20px;
	padding-bottom: 5px;
	font-size: 1.0em;
	justify-content: space-between;
}

section.forum div.topic h2 {
	font-size: 1.05em;
	margin: 0;
	margin-bottom: 5px;
}

/* Sponsored topic styling for AdSense compliance */
section.forum div.sponsored-topic {
	display: block;
	min-height: 60px;
	padding: 10px;
	margin: 10px 0;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
}

section.forum div.sponsored-topic .ad-label {
	font-size: 0.8em;
	color: #6c757d;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

section.forum div.sponsored-topic .adsbygoogle {
	min-height: 50px;
}

div.author {
	font-weight: bold;
}

div.author a {
	padding-right: 7px
}

div.rhc {
	color: #696969;
	font-style: italic;
}

div.rhc a img {
	padding-top: 15px;
	height: 20px;
	width: 20px;
}

div.topics-top {
	border-bottom: 1px solid;
	padding-bottom: 10px;
}

div.topics-bottom {
	display: flex;
	padding-top: 10px;
	margin-bottom: 20px;
}

div.topics-bottom div {
	flex: 1;
}

div.pager {
	text-align: right;
	margin-left: auto;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: 500;
}

div.pager a {
	padding-right: 7px
}

#btn-reply-topic {
	margin: 20px;
}

/* Topic button styling - migrate to modern system */
section.topic div.btn button {
	background-color: #941c31;
	color: white;
	font-family: inherit;
	font-weight: 500;
	border: none;
	border-radius: 6px;
	margin: 0 0.5rem;
	padding: 0.5rem 1rem;
	cursor: pointer;
	transition: all 0.2s;
}

section.topic div.btn button:hover {
	background-color: #7a1729;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Mobile responsive button adjustments */
@media (max-width: 768px) {
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        margin: 0.2rem;
        width: auto;
        min-width: 0;
    }
    
    .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
    
    section.topic div.btn button {
        padding: 0.4rem 0.8rem;
        margin: 0 0.25rem;
        font-size: 0.85rem;
    }
}

section.topic div.post {
	border: 1px #c90000 solid;
	padding: 10px;
	margin: 10px 0;
}

section.topic div.post div.author {
	display: flex;
	justify-content: space-between;
	background: #941c31 url(../img/rbg.png);
	color: #ffffff;
	padding: 3px 10px;
	margin: -10px -10px 10px;
}

	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: small;
	border: #000000 1px dashed;
	background-color: #eee;
	margin-bottom: 20px;
}

	margin: 0px 30px 0px 4px;
}

	margin-left: 20px;
	margin-right: 20px;
}

	padding: 5px;
}

/* new post */
.post-bottom {
	margin: 0;
	padding: 0;
}

.edit-note {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: small;
	padding-top: 3px;
}

textarea#newposttext {
	width: 100%;
	text-align: left;
}

div#new-post {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

div.buttons {
	margin-top: 15px;
}

/* messages */
div.messages {
	display: flex;
	border: #000000 1px solid;
	min-height: 200px;
	margin-bottom: 20px;
}

div.messages div.left-panel {
	background-color: #941c31;
	color: white;
	padding-left: 5px;
}

div.messages div.left-panel h2 {
	font-size: 1.05em;
	background-color: #941c31;
	color: white;
	padding-right: 10px;
	padding-left: 5px;
}

div.messages div.left-panel ul {
	list-style: none;
	padding-inline-start: 20px;
}

div.messages li.selected {
	padding-top: 7px;
	background-color: #590000;
}

div.messages li.unread {
	list-style: disc;
	font-weight: bold;
}

div.messages div.left-panel a {
	color: white;
	text-decoration: none;
}

div.messages div.left-panel a:hover {
	color: blue;
}


div.messages div.right-panel {
	padding: 5px;
}

div.messages div.right-panel div.datestamp {
	font-weight: 900;
	text-align: center;
	border-top: 1px #000000 solid;
	margin-top: 10px;
}

div.messages div.right-panel div.ts {
	font-weight: 900;
	text-align: center;
	min-width: fit-content;
	margin-right: 5px;
}

div.messages div.right-panel span.author {
	color: blue;
	margin-right: 5px;
	font-weight: 800;
}

div.messages div.right-panel div.buttons {
	display: flex;
	justify-content: flex-end;
	padding-right: 5px;
}

div.messages div.right-panel div.input {
	margin-top: 10px;
}


/* responsive stuff */

@media only screen and (max-width: 1024px) {
	main {
		display: block;
		padding: 0 10px;
	}

	#right {
		width: auto;
		column-count: 2;
	}
}

@media only screen and (max-width: 768px) {
	html {
		background: none;
	}

	body {
		margin: 0;
		padding: 0;
	}

	section.forum div.topic {
		display: block;
	}

	div.rhc a img {
		padding-top: 10px;
	}

	#right {
		width: auto;
		column-count: 1;
	}
}


/* messages */
#side {
	width: 340px;
}

#content {
	margin-right: 340px;
}

div.select {
	font-size: 0.7em;
	margin-bottom: 0.6em;
}

table#messages td.subject {}

table#messages a:hover {
	color: black;
	font-weight: bold;
	cursor: pointer;
}

table#messages tr {
	height: 1.2em;
}

div.poo {
	overflow: hidden;
	height: 1.2em;
}

span.teaser {
	color: #ccc;
}

table#messages tr.new {
	font-weight: bold;
	background-color: #e0eeee;
}

table#messages td.date {
	text-align: right;
}

table#messages td {
	border-bottom: 1px solid black;
}

table#messages tr.last td {
	border: none;
}

tableh {
	white-space: nowrap;
}

div#messages {
	padding: 0.5em;
	background-color: #ffffee;
}

#r2 {
	width: 8em;
}

#r4 {
	width: 6em;
}

#nav ul,
#nav li {
	display: inline;
}

div#message table th {
	text-align: right;
	width: 5em;
}

div#message table {
	width: 100%;
}

div#message table td textarea {
	width: 90%;
	height: 10em;
}

div.adminbuttons {
	margin: 5px;
	padding: 5px;
	border: 1px dashed black;
	text-align: center;
	font-size: 10px;
	background-color: #ccc;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

img.new-mail {
	height: 15px;
	margin: 0;
	padding: 0;
}

tr#phone {
	display: none;
}

/* === REGISTRATION FORM STYLES === */

/* Registration Container */
.registration-container {
	max-width: 600px;
	margin: 20px auto;
	padding: 0 20px;
}

.registration-form {
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 30px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Form Grid Layout */
.form-grid {
	display: grid;
	gap: 24px;
}

/* Form Groups */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-label {
	font-family: 'Martel Sans', sans-serif;
	font-weight: 600;
	font-size: 1em;
	color: #333;
	margin-bottom: 4px;
}

.input-container {
	position: relative;
}

.form-input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 1em;
	font-family: 'Martel', serif;
	background: #fff;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: #941c31;
	box-shadow: 0 0 0 3px rgba(148, 28, 49, 0.1);
}

.form-input:required:invalid {
	border-color: #ddd;
}

.form-input:required:valid {
	border-color: #28a745;
}

.form-hint {
	font-size: 0.85em;
	color: #666;
	font-style: italic;
}

/* Form Notice */
.form-notice {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 20px;
	margin: 10px 0;
}

.notice-content strong {
	color: #941c31;
	font-family: 'Martel Sans', sans-serif;
}

.notice-content p {
	margin: 8px 0 0 0;
	line-height: 1.5;
}

/* Form Actions */
.form-actions {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.submit-button {
	background: linear-gradient(135deg, #941c31, #b32d47);
	color: white;
	border: none;
	padding: 14px 32px;
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Martel Sans', sans-serif;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-width: 200px;
}

.submit-button:hover {
	background: linear-gradient(135deg, #7a1728, #941c31);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(148, 28, 49, 0.3);
}

.submit-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(148, 28, 49, 0.3);
}

/* Loading states for submit button */
.submit-button[disabled] {
	opacity: 0.7;
	cursor: not-allowed;
	background: linear-gradient(135deg, #666, #888);
}

.submit-button .button-text {
	display: inline-block;
}

.submit-button .button-loading {
	display: none;
}

.submit-button.htmx-request .button-text {
	display: none;
}

.submit-button.htmx-request .button-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.button-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #ffffff;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* Loading indicator for the form */
.loading-indicator {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 20px 30px;
	border-radius: 8px;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	z-index: 1000;
	backdrop-filter: blur(2px);
}

.loading-indicator.htmx-request {
	display: flex;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #ffffff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Form Footer */
.form-footer {
	text-align: center;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.form-footer p {
	margin: 8px 0;
	color: #666;
}

.form-footer a {
	color: #941c31;
	text-decoration: none;
	font-weight: 500;
}

.form-footer a:hover {
	text-decoration: underline;
}

/* Error and Success Messages */
.error-message {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f1aeb5;
	border-radius: 6px;
	padding: 16px 20px;
	margin: 20px auto;
	max-width: 600px;
	font-size: 1.1em;
	font-weight: 500;
	text-align: center;
}

.success-message {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
	padding: 16px 20px;
	margin: 20px auto;
	max-width: 600px;
	font-size: 1.1em;
	line-height: 1.5;
}

/* Registration Form Feedback Styles */
.username-feedback, .email-feedback {
	margin-top: 8px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.9em;
	font-weight: 500;
	border: 1px solid;
	transition: all 0.3s ease;
	position: relative;
}

.username-feedback.available, .email-feedback.available {
	color: #28a745;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.username-feedback.unavailable, .email-feedback.unavailable {
	color: #dc3545;
	background-color: #f8d7da;
	border-color: #f1aeb5;
}

.username-feedback.checking, .email-feedback.checking {
	color: #007bff;
	background-color: #d1ecf1;
	border-color: #b8daff;
	animation: pulse 1.5s ease-in-out infinite alternate;
}

.username-feedback.error, .email-feedback.error {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeaa7;
}

.username-feedback.neutral, .email-feedback.neutral {
	color: #6c757d;
	background-color: #f8f9fa;
	border-color: #dee2e6;
}

.username-feedback .suggestions {
	margin-top: 8px;
	font-size: 0.85em;
	color: #6c757d;
}

.username-feedback .suggestion-link {
	color: #007bff;
	cursor: pointer;
	text-decoration: underline;
	margin: 0 2px;
	transition: color 0.2s ease;
}

.username-feedback .suggestion-link:hover {
	color: #0056b3;
	font-weight: bold;
}

@keyframes pulse {
	0% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
	.registration-container {
		margin: 10px;
		padding: 0 10px;
	}
	
	.registration-form {
		padding: 20px 15px;
		border-radius: 6px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	}
	
	.form-grid {
		gap: 18px;
	}
	
	.form-input {
		padding: 10px 12px;
		font-size: 16px; /* Prevents zoom on iOS */
	}
	
	.form-label {
		font-size: 0.95em;
	}
	
	.form-hint {
		font-size: 0.8em;
	}
	
	.submit-button {
		width: 100%;
		padding: 16px;
		font-size: 1em;
		min-width: auto;
	}
	
	.form-notice {
		padding: 15px;
		margin: 8px 0;
	}
	
	.notice-content p {
		font-size: 0.9em;
	}
	
	.username-feedback, .email-feedback {
		font-size: 0.85em;
		padding: 8px 12px;
	}
	
	.username-feedback .suggestions {
		font-size: 0.8em;
	}
	
	.form-footer {
		margin-top: 20px;
		padding-top: 15px;
	}
	
	.form-footer p {
		font-size: 0.9em;
	}
}

@media (max-width: 480px) {
	.registration-form {
		padding: 15px 10px;
	}
	
	.form-label {
		font-size: 0.9em;
	}
	
	.form-input {
		padding: 8px 10px;
	}
	
	.form-hint {
		font-size: 0.75em;
	}
	
	.submit-button {
		padding: 14px;
		font-size: 0.95em;
	}
}