/* Shared foundation: reset, typography and the small widgets every page of
   the site uses. Page chrome lives in chrome.css, page-specific styling in
   its own file (catalogue.css for the listings page). */

/*-------------------------------
		Reset & body
-------------------------------*/

/* Theme accent (the gallery module and card overlays read it). */
:root { --accent: #b01414 }

/*-------------------------------
		General stuff
-------------------------------*/
* {margin: 0; padding: 0; border: 0; outline: none;}

body {background: #040404; font-size: 11px; color: var(--text);
	  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;}

@media only screen and (max-width: 620px) {
	body {font-size: 12px;}
}

/*-------------------------------
		Typography
-------------------------------*/

/*-------------------------------
		Headers & Paragraph
-------------------------------*/
h1, h2, h3, h4 {color: var(--link); font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;}

h1 {font-size: 18px; text-align: center; display: block; margin: 18px 0 0;}

h2 {font-size: 18px; margin: 18px 0 0;}

h3 {font-size: 16px; text-align: center; display: block; margin: 12px 0 0;}

h4 {font-size: 16px; margin: 12px 0 0;}

p {padding: 0 0 5px; text-indent: 10px;}

/* address is italic by default — reset it; the semantics are wanted, the face is not */
address {font-style: normal;}

ul {list-style-position: inside; list-style-type: square;}

/*-------------------------------
		HTML elements
-------------------------------*/
a {color: var(--gold); /*color: #4392ca;*/ text-decoration: underline;}

a:hover {text-decoration: none;}

a[aria-current] {text-decoration: none; color: #ddd; font-style: italic;}

hr {background: url("../img/hr.fb99858916c6.webp") no-repeat 50% 0%; height: 15px; margin: 0; border: 0; clear: both;}

.pages hr, .info-for-users > hr, .near-cities > hr {margin: 10px;}

/*-------------------------------
		Buttons & links
-------------------------------*/

.button, .button-primary, .button-dark {-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: var(--text-strong);
	font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: bold; line-height: 1;
	padding: 3px 10px 4px; margin: 5px 5px; text-align: center; text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
	text-decoration: none; display: inline-block;}

.button:hover, .button-primary:hover, .button-dark:hover {cursor: pointer;}

/* Anything carrying data-goto is clickable: goto.js turns the click into a
   jump. Spans instead of links — the address is not for the crawler. */
[data-goto] {cursor: pointer;}

/*-------------------------------
		Form controls
-------------------------------*/
/* The white fields of the theme; every form of the site shares them. */
input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select {
	background: var(--text-strong); border: 1px solid var(--text-muted); color: var(--ink); padding: 3px 5px; margin: 3px;
	font-size: 11px; font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;}

textarea {vertical-align: top;}

/* The green notice strip inside forms */
.notice {display: block; border: 1px solid #206020; background: #0a190a; color: var(--text-light);
	padding: 3px; margin: 4px 6px; text-align: center; list-style: none;}

/*-------------------------------
		Panels
-------------------------------*/
/* The centred content panels: medium for forms and notes, wide for texts. */
.panel-medium, .panel-wide {margin: 10px auto; padding: 10px; text-align: center;
	background: var(--panel); border: 1px solid var(--border); border-width: 1px 0;}

.panel-medium {width: 350px;}

.panel-wide {width: 610px;}

@media only screen and (max-width: 620px) {
	.panel-medium {width: min(350px, 100% - 20px);}
	.panel-wide {width: min(440px, 100% - 20px); margin: 5px auto 20px; padding: 5px;}
}

/*-------------------------------
		Data table
-------------------------------*/
/* The light grid of the histories and the cabinet: a white table sitting on
   the dark page, as the RichFaces skin drew it. */
table.data {margin: 0 auto; border-collapse: collapse; background: var(--text-strong);
	border: 1px solid #C4C0C9; empty-cells: show;}

.data th {border: solid #C4C0C9; border-width: 0 1px 1px 0; padding: 4px;
	background: linear-gradient(to bottom, #ECE9E4 0%, #D4CFC7 100%);
	color: var(--ink); font: bold 11px Arial, Verdana, sans-serif; text-align: center;}

.data td {border: solid #C4C0C9; border-width: 0 1px 1px 0; padding: 4px;
	color: var(--ink); font: 11px Arial, Verdana, sans-serif;}

.button {background: #330303; background: -moz-linear-gradient(top, #540505 0%, #330303 50%, #330303 50%, #330303 100%); background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #540505), color-stop(0.5, #330303), color-stop(0.5, #330303), color-stop(1, #330303)); border: 1px solid #444;}

.button:hover {background: #660303; background: -moz-linear-gradient(top, var(--accent-border) 0%, #660303 50%, #660303 50%, #660303 100%); background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, var(--accent-border)), color-stop(0.5, #660303), color-stop(0.5, #660303), color-stop(1, #660303));}

.button:active {background: #520202; background: -moz-linear-gradient(top, #660303 0%, #520202 50%, #520202 50%, #520202 100%); background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #660303), color-stop(0.5, #520202), color-stop(0.5, #520202), color-stop(1, #520202));}

.button:active, .button-primary:active, .button-dark:active {border-color: var(--gold) !important;}

/* The current item in a row of button links */
.button[aria-current] {color: var(--text-strong); font-style: normal; border-color: var(--gold);}

/* The quiet variant: secondary actions — unsubscribe and the like. */
.button-dark {color: #aaa; border: 1px solid var(--border-light);
	background: linear-gradient(to bottom, #292929 0%, #191919 50%, #191919 50%, #292929 100%);}

/* The bright variant: the primary action next to plain .button links —
   log in, register, submit. */
.button-primary {border: 1px solid #951100;
	background: linear-gradient(to bottom, #ed2d2d 0%, #c72a2a 50%, #710000 50%, #640000 100%);
	box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px var(--border-light);}

.button-primary:hover {background: linear-gradient(to bottom, #f27272 0%, #db4d4d 50%, #cc0000 50%, #a30202 100%);}

.button-primary:active {background: linear-gradient(to bottom, #d42828 0%, #ad2424 50%, #9c0000 50%, #700000 100%);
	box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);}

/* Tel */
.tel {font-size: 16px; color: var(--link); text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;}

.tel:hover {text-decoration: underline;}

@media only screen and (max-width: 620px) {
	.tel {font-size: 17px;}
}

/*-------------------------------
		Shared widgets
-------------------------------*/

/*-------------------------------
		Top static message
-------------------------------*/
.static-message {text-align: center; font-size: 14px; margin: 5px; padding: 7px;
	color: var(--text-strong); background-color: rgb(43, 34, 10); border: 1px solid #b98b45;}

.static-message .not-adowner-msg {font-size: 16px; color: #40a040;}

.static-message .not-adowner-msg a {display: block;}

.static-message b a {color: var(--text-strong);}

.static-message .warning {color: orange;}

.static-message .good {color: #40a040;}

.static-message p {text-indent: 0; padding: 0;}

/* The owner's version of the banner: bigger type, links each on its own line */
.static-message .adowner-msg {font-size: 18px; line-height: 1.5;}

.static-message .adowner-msg a {display: block;}

@media only screen and (max-width: 620px) {
	.static-message .not-adowner-msg {font-size: 20px;}
}

/*-------------------------------
		Index
-------------------------------*/
.pages {margin: 0 auto; text-align: center;}

.pages a {background: var(--panel); border: 1px solid var(--border); font-weight: normal !important; padding: 4px; margin: 5px 5px; text-decoration: none;}

.pages a:hover {background: var(--border); text-decoration: underline;}

.pages a[aria-current] {background: #090909; border: 1px solid var(--gold);}

/* Numbered page buttons (site map, forum, archive) */
.pages .button {min-width: 15px;}

/*-------------------------------
		Tabs
-------------------------------*/
.tabbed-panel {margin: 0; background: #040404; border-bottom: 1px solid #540505; text-align: center;}

/* Before a comment box the row sinks into it, so the tabs sit on its top
   border like folder tabs. Desktop only — the narrow layout keeps them flat. */
@media only screen and (min-width: 621px) {
	.tabbed-panel:has(+ .comment-box) {margin-bottom: -26px;}
}

.tabbed-panel a {display: inline-block; margin: 5px 5px 0; padding: 3px 10px 5px;
	font-family: "helvetica neue", helvetica, arial, sans-serif; text-decoration: none;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
	border: 1px solid var(--border); border-bottom: 0; border-radius: 4px 4px 0 0;
	background: linear-gradient(to bottom, #252525 0%, var(--panel-raised) 50%, var(--panel-raised) 100%);}

.tabbed-panel a:hover {border-color: #770707;
	background: linear-gradient(to bottom, var(--accent-border) 0%, #660303 50%, #660303 100%);}

.tabbed-panel a[aria-current] {color: var(--text-strong); font-style: normal; border-color: #770707;
	background: linear-gradient(to bottom, #540505 0%, #330303 50%, #330303 100%);}

/* The bigger variant of the row (payment instructions) */
.tabbed-panel.big {margin-bottom: 25px;}

.tabbed-panel.big a {font-size: 14px;}

@media only screen and (max-width: 620px) {
	/* No vertical margins: the main column is a flex column, and the 5px the
	   theme kept here used to vanish into collapsed margins anyway. */
	.tabbed-panel {margin: 0; padding-bottom: 8px; background: none;}
	.tabbed-panel a {font-size: 16px; margin: 2px; border: 1px solid #444444; border-radius: 0;}
	.tabbed-panel a[aria-current] {border-color: #770707;}
}

table.pricetable {width: 100%; border-spacing: 0;}

.pricetable th {padding: 1px 0; text-align: left; font-weight: normal;}

.pricetable td {padding: 1px 0; text-align: left; font-weight: bold; color: var(--text-strong);}

/* Info boxes: the text blocks the sidebar and pages carry. */

.info-for-users p {text-align: justify;}

.info-for-users h2 {margin: 10px 5px 5px; text-align: center; font-size: 16px;}

.info-for-users h3 {margin: 10px 5px 5px; text-align: center; font-size: 15px;}

.info-for-users ul {list-style-position: inside; list-style-type: disc;}

.info-for-users ul li {padding-left: 1px;}

@media only screen and (max-width: 620px) {
	/*-------------------------------
			SEO
		-------------------------------*/
	.info-for-users p {font-size: 14px; text-indent: 20px;}
	.info-for-users ul {font-size: 14px; line-height: 1.4;}
	.info-for-users h2 {font-size: 17px !important;}
	.info-for-users h3 {font-size: 16px !important;}
}