/*
 * Mariampil template (2012) for Joomla 6.
 * Part 1 is the Joomla 2.5 template.css (image path now ../images/). Part 2 styles the Joomla 6 core markup the
 * way the Joomla 2.5 markup looked, plus what SmartResizer, RokBox and caption.js used to do (now the plugin
 * System - Mariampil). Part 3: narrow screens (the 2012 layout was a fixed 1000px page).
 */

/* ======================= 1. Joomla 2.5 template ======================= */

/* TAGS */

body {
	font-family: Georgia, Times, "Times New Roman", serif;
	background: url("../images/gradient.png") repeat-x scroll center top #FFFFFF;
	font-size: 14pt;
	color: #333333;
	margin: 8px;
}

p {
	padding: 0px;
	margin: 0px 0px 12px 0px;
	text-align: justify;
}

a {
	color: #185012;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

pre {
	font-family: courier, monospace;
	font-size: 11pt;
	white-space: pre-wrap;
}

h2 {
	margin: 0px;
	padding: 0px 0px 12px 0px;
	font-size: 14pt;
	font-weight: bold;
}

h1 {
	margin: 0px;
	padding: 0px 0px 18px 0px;
	font-size: 18pt;
	font-weight: bold;
}

/* STRUCTURE */

.wrapper {
	margin: auto;
	width: 1000px;
}

.main {
	float: left;
	width: 720px;
}

.side {
	float: right;
	width: 248px;
}

.header {
	height: 100px;
	margin: 24px 0px 0px 0px;
}

.title {
	text-decoration: none;
	font-size: 24pt;
}

.footer {
	padding: 40px 0px 0px 0px;
	height: 100px;
	border-top: #cccccc 1px solid;
}

.clear {
	clear: both;
	padding: 28px 0px 0px 0px;
}

/* PAGINATION */

.pagination ul,
ul.pagination {
	list-style-type: none;
	padding: 0;
}

.pagination ul li,
ul.pagination li {
	display: inline-block;
	padding: 4px;
	margin: 2px;
	border: #cccccc 1px solid;
}

.counter {
	text-align: right;
	margin: 4px 0px 4px 0px;
	color: #999999;
}

/* IMAGES */

.img_caption,
.mp-caption {
	font-size: 10pt;
	padding: 0px 16px 2px 0px;
}

/* MENU */

.menu,
.side ul.mod-menu {
	padding: 0px 0px 24px 0px;
	margin: 0px;
	list-style-type: none;
}

.menu li,
.side ul.mod-menu li {
	padding: 0px 0px 8px 0px;
}

/* BLOG */

.item-separator {
	margin: 0px 0px 8px 0px;
}

.article-info {
	padding: 0px;
	margin: 4px 0px;
	font-size: 10pt;
	color: #999999;
}

h2 .subheading-category {
	margin: 0px;
	padding: 0px 0px 18px 0px;
	font-size: 18pt;
}

/* SEARCH */

.search,
.side .mod-finder {
	padding: 0 0 24px 0px;
}

/* ======================= 2. Joomla 6 core markup ======================= */

/* Bootstrap 5 helper classes used by Joomla 6 core layouts */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.d-none { display: none !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
[class^="icon-"], [class*=" icon-"] { display: none; }

/* Content images and tables: never wider than the column */
.main img {
	max-width: 100%;
	height: auto;
}
.main iframe {
	max-width: 100%;
}

/* Article page and blog */
.page-header h1,
.page-header h2 {
	margin: 0;
	padding: 0 0 12px 0;
	font-size: 14pt;
	font-weight: bold;
}
.com-content-article .page-header h2,
.com-content-article .page-header h1 {
	font-size: 14pt;
}
.blog > h1,
.com-content-category-blog > h1,
.com-content-category-blog > .page-header h1 {
	font-size: 18pt;
	padding: 0 0 18px 0;
}
.com-content-category-blog__category-title,
.com-content-category-blog h2 .subheading-category {
	font-size: 18pt;
	padding: 0 0 18px 0;
}
.blog-item,
.com-content-article__body {
	overflow: hidden;
}
.blog-items {
	margin-bottom: 8px;
}
.blog-item {
	margin: 0 0 8px 0;
}
.blog-item + .blog-item {
	padding-top: 4px;
}
.article-info dt {
	display: none;
}
.article-info dd {
	margin: 0;
}
.readmore {
	margin: 0 0 12px 0;
}
.readmore a.btn {
	font-size: 11pt;
}
.readmore .visually-hidden {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	clip: auto !important;
}

/* Photos (plugin System - Mariampil: the SmartResizer look of the old site) */
img.mp-thumb {
	float: left;
	padding: 4px;
	margin: 0px 8px 8px 0px;
	border: 1px solid #669966;
}
a.mp-zoom {
	cursor: zoom-in;
}
.mp-figure {
	display: table;
	margin: 0 0 12px 0;
}
.mp-figure .mp-caption {
	display: table-caption;
	caption-side: bottom;
}
.mp-figure-thumb {
	float: left;
	max-width: 100%;
	margin: 0 8px 8px 0;
}
.mp-figure-thumb img.mp-thumb {
	float: none;
	margin: 0;
}
.mp-figure-thumb .mp-caption {
	display: block;
	padding: 2px 0 0 0;
	text-align: left;
	line-height: 1.25;
}

/* Pagination (Joomla 6) */
.com-content-category-blog__navigation,
.com-content-category-blog__pagination {
	clear: both;
}
.pagination .page-link {
	text-decoration: none;
}
.pagination .active .page-link,
.pagination .disabled .page-link {
	color: #999999;
}

/* Smart Search: box in the right column and results page */
.side .mod-finder form,
.side form.mod-finder {
	display: flex;
	gap: 4px;
}
.side .mod-finder input[type="search"],
.side .mod-finder input[type="text"] {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 11pt;
	padding: 2px 4px;
	border: 1px solid #cccccc;
}
.side .mod-finder .awesomplete {
	flex: 1;
}
.btn,
button.btn,
input.button,
.side .mod-finder button {
	font-family: inherit;
	font-size: 11pt;
	padding: 2px 8px;
	border: 1px solid #669966;
	background: #f4f8f0;
	color: #185012;
	cursor: pointer;
}
.btn:hover,
.side .mod-finder button:hover {
	background: #e3eedb;
}
.com-finder__search .form-inline,
.com-finder__search .input-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.com-finder .js-finder-search-query {
	width: 320px;
	max-width: 100%;
	font-family: inherit;
	font-size: 12pt;
	padding: 2px 4px;
}
.com-finder [data-bs-toggle="collapse"],
.com-finder__advanced,
.result__title-url,
.result__date,
.result__taxonomy {
	display: none !important;
}
.com-finder__results-list {
	padding-left: 0;
	list-style: none;
}
.result__item {
	margin: 0 0 16px 0;
}
.result__title {
	font-size: 13pt;
	margin: 0 0 4px 0;
}
.com-finder__counter {
	color: #999999;
	font-size: 10pt;
}
mark {
	background: #fffebb;
	color: inherit;
}

/* Contact form (replaces Fox Contact): heading, the hint, the form - nothing else */
.com-contact {
	display: flex;
	flex-direction: column;
}
.com-contact > h1 {
	order: -2;
}
.com-contact__miscinfo,
.com-contact .contact-miscinfo {
	order: -1;
}
.com-contact > .page-header,
.com-contact__container,
.com-contact > h3,
.com-contact__miscinfo h3,
.com-contact .contact-miscinfo h3 {
	display: none;
}
.com-contact__miscinfo dl,
.com-contact__miscinfo dd {
	margin: 0;
}
.com-contact__miscinfo dt {
	display: none;
}
.com-contact form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
.com-contact form legend {
	display: none;
}
.com-contact .control-group {
	margin: 0 0 12px 0;
}
.com-contact .control-label label {
	display: block;
	font-size: 11pt;
	margin: 0 0 2px 0;
}
.com-contact .control-label .star {
	color: #b00;
}
.com-contact input[type="text"],
.com-contact input[type="email"],
.com-contact textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 706px;
	font-family: inherit;
	font-size: 12pt;
	padding: 4px;
	border: 1px solid #cccccc;
}
.com-contact textarea {
	height: 180px;
}
.com-contact .form-control-feedback,
.com-contact .invalid-feedback {
	color: #b00;
	font-size: 10pt;
}

/* System messages (Joomla 6 <joomla-alert>) */
#system-message-container joomla-alert {
	display: block;
	padding: 6px 12px;
	margin: 0 0 12px;
	border: 1px solid #669966;
	background: #f4f8f0;
	font-size: 11pt;
}
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="error"],
#system-message-container joomla-alert[type="warning"] {
	border-color: #cc9999;
	background: #fbf3f3;
	color: #a00;
}
#system-message-container .joomla-alert--close {
	float: right;
	border: 0;
	background: none;
	font-size: 16px;
	cursor: pointer;
}

/* Error page */
.error-page .error-code {
	font-size: 40pt;
	color: #cccccc;
	font-weight: bold;
	margin: 0 0 12px;
}

/* ======================= 3. Narrow screens ======================= */

.menu-link {
	display: none;
}

@media (max-width: 1020px) {
	body {
		margin: 0;
		font-size: 13pt;
	}
	.wrapper {
		width: auto;
		padding: 0 14px;
	}
	.header {
		height: auto;
		margin: 16px 0 20px 0;
	}
	.title {
		font-size: 20pt;
	}
	.menu-link {
		display: inline-block;
		float: right;
		margin-top: 6px;
		font-size: 12pt;
	}
	p {
		text-align: left;
	}
	.main, .side {
		float: none;
		width: auto;
	}
	.side {
		margin-top: 28px;
		padding-top: 16px;
		border-top: #cccccc 1px solid;
	}
	.footer {
		height: auto;
		padding: 16px 0 24px 0;
	}
	.main table {
		display: block;
		overflow-x: auto;
	}
}
@media (max-width: 480px) {
	img.mp-thumb {
		max-width: 42vw;
		height: auto;
	}
	.mp-figure-thumb {
		max-width: 44vw;
	}
}