/*
 * TerraEarth Site: the look of the WordPress theme "TerraEarth.com (design 3)"
 * by Jeff Grasso (boxxleman) and Michel van den Brink (eFlare), ported to
 * the phpBB extension. Headings use the theme's bundled "Lunchtime Doubly So"
 * web font (the old site drew them with Cufon).
 */

@font-face {
	font-family: 'LunchtimeDS';
	src: url('fonts/lunchds-webfont.woff') format('woff'),
		url('fonts/lunchds-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html { background: #1F1F1F url('images/bg1.gif'); }

body.te-site {
	font-size: 62.5%;
	font-family: Verdana, Geneva, sans-serif;
	background: #1F1F1F url('images/bg1.gif');
	color: #FFF;
	text-align: center;
	margin: 0 0 20px 0;
	padding: 0;
	line-height: normal;
}

.te-site #page {
	text-align: left;
	margin: 20px auto;
	padding: 0;
	width: 957px;
}

/* Banner */
.te-site #fullhead { position: absolute; top: 10px; z-index: 10; }

.te-site #header {
	height: 158px;
	width: 957px;
	background: url('images/header.png') no-repeat;
	margin: 0;
	padding: 0;
}

.te-site #header .description { text-indent: -9000px; overflow: hidden; height: 0; }

.te-site #header .te-logo {
	text-indent: -9000px;
	overflow: hidden;
	height: 158px;
	margin: 0 0 0 190px;
	padding: 0;
	width: 575px;
}

.te-site #header .te-logo a { float: left; height: 158px; width: 575px; }

.te-site #header .social-right li, .te-site #header .social-left li { float: left; padding-left: 7px; }
.te-site #header .social-right li a, .te-site #header .social-left li a { width: 32px; height: 32px; display: block; text-indent: -99999px; overflow: hidden; }
.te-site #header .social-right, .te-site #header .social-left { list-style-type: none; float: right; margin: 29px 42px 0 0; padding: 0; }
.te-site #header .social-left { margin: 29px 0 0 30px; float: left; }
.te-site #header .social-right .fb { background: url('images/social-facebook.png'); }
.te-site #header .social-right .tw { background: url('images/social-twitter.png'); }
.te-site #header .social-right .yt { background: url('images/social-yt.png'); }
.te-site #header .social-left .email { background: url('images/social-email.png'); }
.te-site #header .social-left .rss { background: url('images/social-rss.png'); }

/* Section menu: one sprite, hover/active states 74px down.
   The Store entry was cut out of the theme's mainnav.png (and the items
   re-centred), so the offsets below differ from the old theme's. */
.te-site #mainnav { width: 957px; height: 59px; }
.te-site #mainnav, .te-site #mainnav li a:hover, .te-site #mainnav li a:focus, .te-site #mainnav li a.active {
	background: url('images/mainnav.png') no-repeat 0 0;
}
.te-site #mainnav ul { list-style-type: none; height: 59px; padding: 0; margin: 0; }
.te-site #mainnav li { float: left; margin-top: 13px; margin-left: 1px; }
.te-site #mainnav li a { text-indent: -9000px; overflow: hidden; float: left; height: 33px; width: 100%; }
.te-site #mainnav li.sb { margin-left: 64px; width: 168px; }
.te-site #mainnav li.sb a:hover, .te-site #mainnav li.sb a:focus, .te-site #mainnav li.sb a.active { background-position: -64px -74px; }
.te-site #mainnav li.iog { width: 212px; }
.te-site #mainnav li.iog a:hover, .te-site #mainnav li.iog a:focus, .te-site #mainnav li.iog a.active { background-position: -233px -74px; }
.te-site #mainnav li.tn { width: 159px; }
.te-site #mainnav li.tn a:hover, .te-site #mainnav li.tn a:focus, .te-site #mainnav li.tn a.active { background-position: -446px -74px; }
.te-site #mainnav li.forums { margin-left: 12px; width: 105px; }
.te-site #mainnav li.forums a:hover, .te-site #mainnav li.forums a:focus, .te-site #mainnav li.forums a.active { background-position: -617px -74px; }
.te-site #mainnav li.comic { width: 81px; }
.te-site #mainnav li.comic a:hover, .te-site #mainnav li.comic a:focus, .te-site #mainnav li.comic a.active { background-position: -723px -74px; }
.te-site #mainnav li.extra { width: 88px; }
.te-site #mainnav li.extra a:hover, .te-site #mainnav li.extra a:focus, .te-site #mainnav li.extra a.active { background-position: -805px -74px; }

/* Paper: red sidebar column + dark content column (one background image) */
.te-site #paper {
	width: 881px;
	margin: 135px auto -5px auto;
	background: #1C1414 url('images/paper.gif') repeat-y 0 0;
}
.te-site #paperpadding { padding: 100px 20px 0 15px; }

/* Typography */
.te-site a, .te-site a:link, .te-site a:visited { color: #fffe66; text-decoration: none; }
.te-site a:hover, .te-site a:active, .te-site a:focus { color: #FF0; text-decoration: underline; }
.te-site a img { border: none; }
.te-site h1, .te-site h2, .te-site h3, .te-site h4 { font-family: Verdana; font-weight: normal; color: #FFF; }
.te-site h2 { font-size: 32pt; margin: 15px 0 0; }
.te-site h3 { font-size: 20pt; padding: 0; margin: 10px 0 0; }
.te-site h4 { font-size: 18pt; padding: 0; margin: 8px 0 0; }
.te-site small { font-family: Verdana; font-size: 0.9em; line-height: 1.5em; color: #fff; }
.te-site hr { display: none; }
.te-site .center { text-align: center; }
.te-site .screen-reader-text { position: absolute; left: -1000em; }

.te-site #sidebar h1, .te-site #sidebar h2, .te-site #sidebar h3, .te-site #sidebar h4,
.te-site #content h2, .te-site #content h3, .te-site #content h4, .te-site .pagetitle {
	font-family: LunchtimeDS, Verdana, Geneva, sans-serif;
	text-shadow: #000 1px 1px;
}
.te-site #content h2, .te-site #content h3, .te-site #content h4, .te-site .pagetitle { text-shadow: #000 2px 2px, #000 -1px -1px; }
.te-site #content h2 a, .te-site #content h3 a, .te-site #content h4 a, .te-site .pagetitle a { color: #F9F943; }

/* Sidebar */
.te-site #sidebar { padding: 0 0 10px 0; width: 170px; float: left; font-size: 12px; }
.te-site #sidebar form { margin: 0; }
.te-site #sidebar a { text-shadow: #000 1px 1px; }
.te-site #sidebar h1, .te-site #sidebar h2, .te-site #sidebar h3 { margin: 5px 0 0; padding: 0; font-size: 16px; text-align: left; font-weight: normal; }
.te-site #sidebar h1 a { color: #FFF; }
.te-site #sidebar .sidebar_header { margin-bottom: 4px; }
.te-site #sidebar ul, .te-site #sidebar ul ol { margin: 0; padding: 0; }
.te-site #sidebar ul li { list-style-type: none; list-style-image: none; margin-bottom: 6px; }
.te-site #sidebar ul ul, .te-site #sidebar ul ol { margin: 5px 0 0 10px; }
.te-site #sidebar ul ul ul { margin: 0 0 0 10px; }
.te-site #sidebar ul ul li { margin: 3px 0 0; padding: 0; color: #fff; }
.te-site #sidebar #side-section-nav, .te-site #sidebar li h2 { margin-top: 20px; }
.te-site #sidebar .searchitem h2 { margin: 0 0 5px 0; }
.te-site #sidebar .searchitem { margin: 0 0 15px 0; }
.te-site #sidebar ul ul li:before, .te-site #sidebar .side-nav > li:before { content: "\00BB \0020"; }
.te-site #sidebar .side-nav { margin-left: 10px; }
.te-site #sidebar .side-nav li { margin: 3px 0 6px; }
.te-site #sidebar .side-nav ul { margin: 3px 0 0 10px; }
.te-site #sidebar .side-nav ul li:before { content: "\2022 \0020"; }
.te-site #sidebar .side-nav li.current_page_item > a,
.te-site #sidebar .side-nav li.current_page_ancestor > a { font-weight: bold; color: #FFF; }
.te-site #sidebar ul#side-section-nav ul li { margin: 0 0 6px 3px; }
.te-site #sidebar .search .s { width: 135px; padding: 2px; border: 1px solid #999; }
.te-site #sidebar .search .submit-img { display: inline; margin-bottom: -3px; vertical-align: middle; }
.te-site #sidebar .te-userbar { margin-top: 30px; font-size: 11px; }
.te-site #sidebar .te-userbar li { margin-bottom: 4px; }

/* Content column */
.te-site #content { font-size: 1.2em; margin-left: 190px; }
.te-site .post { margin: 0 0 40px; text-align: justify; }
.te-site .narrowcolumn .entry { line-height: 1.4em; }
.te-site .post hr { border: 0; display: block; margin-top: 20px; margin-bottom: 5px; border-top: 1px dashed #6B4D4D; height: 1px; line-height: 1px; }
.te-site .postmetadata { padding-top: 5px; color: #fff; }
.te-site .post h3 { margin: 30px 0 -4px 0; }
.te-site .post h4 { margin: 15px 0 -6px 0; }
.te-site .te-list-intro { font-style: italic; margin: 15px 0 25px; }
.te-site .te-back { margin: 12px 0 0; }
.te-site .te-edit { margin-top: 30px; font-size: 0.9em; }
.te-site .te-found li { margin-bottom: 10px; }
.te-site .te-found .teaser { font-style: italic; text-indent: 0; margin-top: 2px; }
/* Search: picture results (terraearth/gallery) as a thumbnail grid */
.te-site .te-found-thumbs { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.te-site .te-found-thumbs li { margin: 0; padding: 0; background: none; }
.te-site .te-found-thumbs a { display: block; text-align: center; font-size: 11px; line-height: 1.3; }
.te-site .te-found-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #000; margin-bottom: 3px; }
.te-site .te-found-thumbs span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-site .te-found-more { margin: 4px 0 14px 0; }
.te-site .te-found-jump a { display: inline-block; margin: 0 14px 4px 0; font-weight: bold; }

.te-site .pagetitle {
	margin: 15px -15px 0 -13px;
	background: url('images/pagetitle.gif') repeat-x;
	padding: 14px 15px 15px 13px;
	text-align: left;
	display: block;
	font-weight: normal;
	font-size: 32pt;
}

.te-site #breadcrumb {
	/* The old theme had a 15px ad slot above the breadcrumb. */
	margin: 15px -15px 0 -13px;
	overflow: hidden;
	background: url('images/breadcrumb.gif') repeat-x;
	padding: 7px 0;
}
.te-site #breadcrumb ul { list-style-type: none; margin: 0 15px 0 13px; padding: 0; }
.te-site #breadcrumb ul li { margin: 0; padding: 0 0 0 20px; float: left; background: url('images/icon/arrow.gif') no-repeat 7px 50%; }
.te-site #breadcrumb ul li a, .te-site #breadcrumb ul li span { color: #FFF; }
.te-site #breadcrumb ul li.bread-item-0 { padding-left: 0; background: none; }
.te-site #breadcrumb ul li.bread-item-0 a { color: #fffe66; }
.te-site #breadcrumb ul li.bread-item-last > a, .te-site #breadcrumb ul li.bread-item-last > span { padding: 0 25px 2px 0; background: url('images/icon/feather.gif') no-repeat 100% -1px; }

/* Lists inside entries: the theme's "bullet" style */
.te-site .entry ul { margin-left: 0; list-style: none; padding: 0 0 0 10px; text-indent: -10px; }
.te-site .entry li { margin: 7px 0 8px 10px; }
.te-site .entry ul li:before { content: "\00BB \0020"; }
.te-site .entry ol { padding: 0 0 0 35px; margin: 0; }
.te-site .entry ol li { margin: 0; padding: 0; list-style: decimal outside; }

/* Tables and images from the guide pages */
.te-site .entry table th, .te-site .entry table td { vertical-align: top; }
.te-site .entry table th { font-weight: bold; text-align: left; padding-right: 15px; }
.te-site .entry table { border-collapse: separate; font-size: 1em; }
.te-site p img { padding: 0; max-width: 100%; }
.te-site img.centered, .te-site .aligncenter, .te-site div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.te-site img.alignright { padding: 4px; margin: -7px 0 2px 7px; display: inline; clear: right; }
.te-site img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.te-site .alignright { float: right; }
.te-site .alignleft { float: left; }
.te-site .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; border-radius: 3px; }
.te-site .wp-caption img { margin: 0; padding: 0; border: 0 none; }
.te-site .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #000; }
.te-site blockquote { border-left: 5px solid #320000; margin: 1em 0; padding: 1px 10px; background: #600000; width: 90%; font-style: italic; }
.te-site .sectioninstruct { margin-top: 20px; padding-top: 5px; border-top: 1px dashed #6B4D4D; }
.te-site .post .halfbox { float: left; width: 210px; margin: 0 10px 10px 0; }
.te-site .staff div.entry > table { margin: 10px 0; }

/* phpBB post markup inside news entries */
.te-site .entry .postimage { max-width: 100%; }
.te-site .entry blockquote cite { display: block; font-style: normal; font-weight: bold; }
.te-site .entry .codebox { background: #2C2020; padding: 5px; }

.te-site .navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; overflow: hidden; }

/* Footer: the credits scroll */
.te-site #footer {
	padding: 0;
	margin: -10px auto 0 auto;
	width: 957px;
	height: 85px;
	background: url('images/credits.png') no-repeat;
	text-indent: -99999px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Small screens (the old theme was a fixed 957 px page). The banner and
   the credits scroll scale down; the section banner (a single sprite)
   becomes a text menu in the sprite's colours; the sidebar goes below
   the content.
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
	.te-site #page { width: auto; margin: 8px; }
	.te-site #fullhead { position: static; }
	.te-site #header {
		width: 100%;
		height: auto;
		aspect-ratio: 957 / 158;
		background-size: 100% auto;
		position: relative;
	}
	.te-site #header .social-left, .te-site #header .social-right { display: none; }
	.te-site #header .te-logo { width: 100%; height: 100%; margin: 0; }
	.te-site #header .te-logo a { width: 100%; height: 100%; float: none; display: block; }

	.te-site #mainnav {
		width: auto;
		height: auto;
		margin: 6px 0 0 0;
		padding: 6px 4px;
		background: #1C1414;
		border: 2px solid #D8CFC4;
		border-radius: 6px;
		box-shadow: 0 0 0 1px #000;
	}
	.te-site #mainnav ul { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
	.te-site #mainnav li,
	.te-site #mainnav li.sb, .te-site #mainnav li.iog, .te-site #mainnav li.tn,
	.te-site #mainnav li.forums, .te-site #mainnav li.comic, .te-site #mainnav li.extra {
		float: none;
		width: auto;
		margin: 0;
	}
	.te-site #mainnav li a,
	.te-site #mainnav li a:hover, .te-site #mainnav li a:focus, .te-site #mainnav li a.active {
		float: none;
		width: auto;
		height: auto;
		display: block;
		padding: 4px 2px;
		text-indent: 0;
		overflow: visible;
		background: none;
		font-family: LunchtimeDS, Verdana, Geneva, sans-serif;
		font-size: 18px;
		line-height: 1.2;
		text-shadow: #000 2px 2px, #000 -1px -1px;
		text-transform: uppercase;
	}
	.te-site #mainnav li.sb a { color: #FFFE33; }
	.te-site #mainnav li.iog a { color: #4DA6FF; }
	.te-site #mainnav li.tn a { color: #FF3B3B; }
	.te-site #mainnav li.forums a, .te-site #mainnav li.comic a, .te-site #mainnav li.extra a { color: #FF9A2E; }
	.te-site #mainnav li a:hover, .te-site #mainnav li a:focus, .te-site #mainnav li a.active { text-decoration: underline; }

	.te-site #paper { width: auto; margin: 8px 0 0 0; background: #1C1414; border: 1px solid #000; }
	.te-site #paperpadding { padding: 0 12px 12px 12px; display: flex; flex-direction: column; }
	.te-site #content { order: 1; margin-left: 0; font-size: 1.4em; }
	.te-site #sidebar {
		order: 2;
		float: none;
		width: auto;
		margin: 20px -12px -12px -12px;
		padding: 12px;
		background: #600000 url('images/bg1.gif');
		font-size: 14px;
	}
	.te-site #sidebar .search .s { width: calc(100% - 30px); font-size: 16px; }
	.te-site #breadcrumb, .te-site .pagetitle { margin-left: -12px; margin-right: -12px; }
	.te-site #breadcrumb { margin-top: 0; }
	.te-site h2, .te-site .pagetitle { font-size: 24pt; }
	.te-site h3 { font-size: 16pt; }
	.te-site .post { text-align: left; }
	.te-site img, .te-site .entry img { max-width: 100%; height: auto; }
	.te-site iframe, .te-site video { max-width: 100%; }
	.te-site .entry table { display: block; max-width: 100%; overflow-x: auto; }
	.te-site .post .halfbox { float: none; width: auto; }
	.te-site img.alignright, .te-site img.alignleft, .te-site .alignright, .te-site .alignleft { float: none; display: block; margin: 8px auto; }

	.te-site #footer { width: 100%; height: auto; aspect-ratio: 957 / 85; background-size: 100% auto; margin-top: 8px; }
}
