/* Webkinz Wiki: the look of Webkinz World (Ganz) around 2008. Loaded after the skin's skin.css by config/theme.php.

   Original art, exported with FFDec from the game files in the Flashpoint copy (webkinz/flashpoint/files):
     meadow.jpg    the Webkinz World meadow from the 2008 site tour (SWF/TOUR/1_introduction.swf, image 76),
                   enlarged from 805 px
     coin.png      the KinzCash coin (SWF/ARCADE/GAMES/zingoz.swf, sprite 179)
     heroes.webp   a puppy pet and the Adoption Center's host (SWF/TOUR/2_adopt_center.swf, sprites 60 and 31),
                   the KinzCash piggy bank (Game_Over_600x450.swf, sprite 26), and the batter and the Zingoz from
                   Wacky Zingoz (zingoz.swf, sprites 266 and 111). The files do not name any of them.
   Colours are sampled from the same files: arcade blue #029aff, royal blue #0049b6, purple #8c00cf, KinzCash
   yellow #ffe500, orange #ff9900, cream #ffffae, grass #8de831. Nothing here is generated. */
/* Fonts. Original, by name: Ganz's own house faces Webkinz Med, Webkinz Book, WebkinzOS Med and WebkinzOS Book,
   embedded in fonts.swf (51 copies across the game folders) and most of the interface; Arial, Verdana and Comic
   Sans MS in individual games. The Webkinz faces are Ganz's property and have not been extracted or served;
   Fredoka (themes.json "bubbly") is a stand-in for Webkinz Med, chosen by eye. Arial for text is the skin's default. */

:root:root {
	--main: #0049b6;
	--main-deep: #000099;
	--main-light: #9de3fc;
	--main-navbox: #0049b6;
	--on-main: #ffffff;
	--accent: #ffe500;
	--banner-ink: #ffffff;
	--footer-ink: #ffffff;
	--paper: #ffffff;
	--ink: #101a40;
	--ink-soft: #4a5a80;
	--rule: #cfe6fb;
	--link: #0049b6;
	--link-new: #b3261a;
	--card: #ffffd6;
	--card-edge: #cfe6fb;
	--stripe: #ffffd6;
	--sidebar-w: 214px;
}

body {
	background: #bfedfd linear-gradient( #9de3fc, #bfedfd 300px, #dff6c9 900px );
}

/* ---------- Banner ---------- */
.vwa-wiki-webkinz .vwa-banner {
	background: url( heroes.webp ) 64% calc( 100% - 2px ) / auto 150px no-repeat, #9de3fc url( meadow.jpg ) 50% 100% / cover no-repeat;
	border-bottom: 6px solid #8c00cf;
	box-shadow: 0 4px 0 #ffcc00;
	margin-bottom: 0;
	min-height: 220px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.vwa-banner-inner {
	flex: 1;
	padding: 10px 22px;
}

.vwa-wordmark-logo img {
	max-height: 120px;
	filter: drop-shadow( 0 3px 3px rgba( 0, 60, 110, 0.3 ) );
}

.vwa-wordmark-lockup img {
	max-height: 150px;
}

.vwa-personal ul {
	font-family: var( --font-heading );
	font-weight: 700;
	text-shadow: 0 1px 2px rgba( 0, 60, 110, 0.7 );
}

.vwa-personal a,
.vwa-personal a:visited {
	color: #ffffff;
}

.vwa-personal a:hover {
	color: #ffe500;
	text-decoration: none;
}

.vwa-search {
	background: #ffffff;
	border: 3px solid #0049b6;
	border-radius: 22px;
}

.vwa-search input[type='search'] {
	color: #1d1d1d;
}

.vwa-search button {
	color: #0049b6;
}

/* ---------- Frame ---------- */
.vwa-frame {
	gap: 16px;
	padding: 26px 16px 24px;
	max-width: 1460px;
	margin: 0 auto;
}

.vwa-sidebar {
	margin-right: 0;
	padding: 0;
	background: none;
	gap: 14px;
}

.vwa-portlet {
	background: #ffffff;
	border: 3px solid #0049b6;
	border-radius: 16px;
	padding: 0 0 10px;
	overflow: hidden;
	box-shadow: 0 5px 0 rgba( 0, 73, 182, 0.2 );
}

.vwa-sidebar h2 {
	margin: 0 0 9px;
	padding: 7px 12px 6px;
	background: linear-gradient( #2a9dff, #0049b6 );
	color: #ffffff;
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 1px rgba( 0, 0, 80, 0.6 );
}

.vwa-sidebar ul {
	padding: 0 12px;
	gap: 5px;
}

.vwa-sidebar a,
.vwa-sidebar a:visited {
	color: #0049b6;
	font-size: 13.5px;
	font-weight: 700;
}

.vwa-sidebar a:hover {
	color: #8c00cf;
}

.vwa-sheet {
	background: #ffffff;
	border: 3px solid #0049b6;
	border-radius: 20px;
	box-shadow: 0 5px 0 rgba( 0, 73, 182, 0.2 );
}

/* ---------- Page head and article ---------- */
.vwa-page-head {
	border-bottom: 3px solid #cfe6fb;
}

.vwa-page-head .firstHeading {
	color: #8c00cf;
}

.vwa-page-head .firstHeading::before {
	border-color: #8c00cf;
	background: #ffe500;
}

.vwa-tabs a,
.vwa-tabs a:visited {
	color: #0049b6;
}

.vwa-tabs a:hover {
	color: #8c00cf;
	text-decoration: none;
}

.vwa-tabs .selected a {
	color: #101a40;
	border-bottom-color: #ff9900;
}

.vwa-article h1,
.vwa-article h2,
.vwa-article .mw-heading1,
.vwa-article .mw-heading2 {
	color: #0049b6;
	border-bottom: 3px solid #cfe6fb;
}

.vwa-article h3,
.vwa-article .mw-heading3 {
	color: #d96a00;
}

.mw-parser-output li::marker {
	color: #ff9900;
}

.hatnote {
	background: #ffffd6;
	border-left-color: #ff9900;
}

.vwa-hero input[type='submit'],
.vwa-card input[type='submit'],
.vwa-article .cdx-button--action-progressive.cdx-button--weight-primary,
.vwa-article .mw-ui-button.mw-ui-progressive {
	border: 2px solid #550000;
	border-radius: 22px;
	background: linear-gradient( #ffb733, #ff8800 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.45 ), 0 3px 0 rgba( 0, 0, 0, 0.2 );
	color: #550000;
	font: 400 18px/1 var( --font-display );
	letter-spacing: 0.03em;
}

.vwa-hero input[type='submit']:hover,
.vwa-card input[type='submit']:hover {
	filter: brightness( 1.08 );
	background: linear-gradient( #ffb733, #ff8800 );
	color: #550000;
}

.vwa-hero .cdx-text-input__input,
.vwa-card .cdx-text-input__input {
	border: 2px solid #0049b6;
	border-radius: 22px;
	background: #ffffff;
	color: #1d1d1d;
	padding: 0 14px;
}

/* ---------- Main page ---------- */
.vwa-hero {
	padding: 0;
	border: 4px solid #0049b6;
	border-radius: 20px;
	background: none;
	overflow: hidden;
	box-shadow: 0 5px 0 rgba( 0, 73, 182, 0.2 );
	margin: 4px 0 24px;
}

.vwa-hero-inner {
	border: 0;
	border-radius: 0;
	background: linear-gradient( #fff694, #ffe86d );
}

.vwa-hero p.vwa-eyebrow {
	color: #8c00cf;
}

.vwa-hero p.vwa-title {
	color: #0049b6;
	text-shadow: 0 2px 0 #ffffff;
}

.vwa-hero p.vwa-lede {
	color: #101a40;
}

.vwa-hero a,
.vwa-hero a:visited {
	color: #0049b6;
}

.vwa-cards {
	gap: 20px 18px;
}

.vwa-card {
	padding: 0;
	border: 3px solid #0049b6;
	border-radius: 16px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 5px 0 rgba( 0, 73, 182, 0.2 );
}

.vwa-card-inner {
	border: 0;
	border-radius: 0;
	background: #ffffff;
}

.vwa-card p.vwa-card-title,
.infobox-title,
.navbox-title {
	color: #ffffff;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 1px rgba( 0, 0, 80, 0.6 );
	background: linear-gradient( #2a9dff, #0049b6 );
}

.vwa-card:nth-child( even ) p.vwa-card-title {
	background: linear-gradient( #b83ae6, #8c00cf );
	color: #ffe500;
}

/* ---------- Boxes ---------- */
.infobox {
	padding: 0;
	border: 3px solid #0049b6;
	border-radius: 16px;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 5px 0 rgba( 0, 73, 182, 0.2 );
}

.infobox-inner {
	border: 0;
	border-radius: 0;
	background: #ffffff;
}

.infobox dt {
	color: #d96a00;
}

.infobox-foot {
	height: 10px;
	background: linear-gradient( #2a9dff, #0049b6 );
}

.toc,
.catlinks {
	border: 2px solid #cfe6fb;
	border-radius: 22px;
	background: #ffffd6;
}

.wikitable {
	border: 2px solid #0049b6;
	background: #ffffff;
}

.wikitable > * > tr > th {
	background: #0049b6;
	color: #ffffff;
}

.wikitable > * > tr > td {
	border-color: #cfe6fb;
}

.navbox {
	border: 3px solid #0049b6;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffd6;
}

/* ---------- Footer ---------- */
.vwa-footer {
	align-items: center;
	text-align: center;
	margin-top: 10px;
	padding: 70px 20px 30px;
	background: linear-gradient( rgba( 141, 232, 49, 0 ), #8de831 50px, #329900 );
	color: #ffffff;
	text-shadow: 0 1px 2px rgba( 0, 60, 0, 0.7 );
}

.vwa-footer ul,
.vwa-footer-icons {
	justify-content: center;
}

.vwa-footer a,
.vwa-footer a:visited {
	color: #ffff66;
}

.vwa-footer-icons span {
	background: #ffffff;
	border-radius: 22px;
	padding: 8px 14px;
}

.vwa-page-head .firstHeading::before {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 0;
	background: url( coin.png ) 50% 50% / contain no-repeat;
}

.vwa-sidebar h2 {
	text-align: center;
}

/* ---------- Narrower screens: the characters stand in a row of their own under the logo and search box ---------- */
@media ( max-width: 1180px ) {
	.vwa-wiki-webkinz .vwa-banner {
		background-position: 50% 100%, 50% 100%;
		background-size: auto 96px, cover;
		padding-bottom: 104px;
	}
}

@media ( max-width: 760px ) {
	.vwa-wiki-webkinz .vwa-banner {
		min-height: 0;
		background-size: auto 74px, cover;
		padding-bottom: 82px;
	}

	.vwa-wordmark-logo img {
		max-height: 110px;
	}

	.vwa-frame {
		padding: 16px 8px;
	}

	.vwa-sidebar {
		padding: 0;
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
		gap: 8px;
	}

	.vwa-sidebar ul {
		flex-direction: column;
	}

	.vwa-sheet {
		margin-top: 0;
	}
}

@media print {
	body,
	.vwa-footer {
		background: #fff;
	}

	.vwa-sheet {
		border: 0;
		box-shadow: none;
	}
}