/* Vanhan saitin muut näkyvät tyylit, jotka eivät olleet style.css:ssä:
   - galleria: CMSMS Gallery -moduulin Fancybox.css (galleriaosa sellaisenaan, sivutus pois, koska kuvia on 10)
   - kuvakatselu: Fancybox 1.3.4:n ulkoasu (musta kehys, 70 % musta tausta, fancybox.png-napit)
   - upotukset: YouTube ja Facebook ladataan vasta klikkauksesta (ei kolmannen osapuolen pyyntöä ennen sitä)
   - template-attribuuttien korvaajat (align="center"), koska CSP estää inline-tyylit */

/* --- Galleria (Fancybox.css) --- */
.gallery .img {
	height: 80px;
	float: left;
	margin: 10px;
	text-align: center;
}

.gallery .img a {
	display: inline-block;
	border: 1px solid #ddd;
	padding: 1px;
}

.gallery .img a:hover {
	border-color: #999;
}

.gallery img {
	border: none;
}

.gallery .pagenavigation {
	height: 5px;
}

.galleryclear {
	clear: both;
}

/* --- Kuvakatselu (Fancybox 1.3.4:n ulkoasu) --- */
.katselu-tausta {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: #000;
	opacity: 0.7;
}

.katselu {
	position: fixed;
	z-index: 1101;
	padding: 10px;
	background: #000;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.katselu img {
	display: block;
	width: 100%;
	height: 100%;
}

.katselu-sulje,
.katselu-edellinen span,
.katselu-seuraava span {
	position: absolute;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent url(fancybox/fancybox.png) no-repeat;
	cursor: pointer;
}

.katselu-sulje {
	top: -15px;
	right: -15px;
	z-index: 1103;
	background-position: -40px 0;
}

.katselu-edellinen,
.katselu-seuraava {
	position: absolute;
	top: 10px;
	bottom: 10px;
	width: 35%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 1102;
}

.katselu-edellinen { left: 10px; }
.katselu-seuraava { right: 10px; }

.katselu-edellinen span,
.katselu-seuraava span {
	top: 50%;
	margin-top: -15px;
	left: -9999px;
}

.katselu-edellinen span { background-position: -40px -30px; }
.katselu-seuraava span { background-position: -40px -60px; }

.katselu-edellinen:hover span,
.katselu-edellinen:focus-visible span { left: 20px; }

.katselu-seuraava:hover span,
.katselu-seuraava:focus-visible span { left: auto; right: 20px; }

/* --- Upotukset: klikkauksella ladattava YouTube ja Facebook --- */
a.youtube-upotus,
a.fb-upotus {
	position: relative;
	display: inline-block;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}

a.youtube-upotus {
	width: 500px;
	height: 315px;
	background: #000;
	font: 18px/1.3 Roboto, Arial, sans-serif;
}

a.youtube-upotus .upotus-otsikko {
	position: absolute;
	top: 12px;
	left: 16px;
	right: 16px;
}

a.youtube-upotus::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background: #212121;
	opacity: 0.8;
}

a.youtube-upotus:hover::before,
a.youtube-upotus:focus-visible::before {
	background: #f00;
	opacity: 1;
}

a.youtube-upotus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -7px;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #fff;
}

a.fb-upotus {
	width: 380px;
	height: 650px;
	font: bold 12px Verdana, Geneva, sans-serif;
}

a.fb-upotus span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 14px;
	border-radius: 4px;
	background: #1877f2;
	white-space: nowrap;
}

a.fb-upotus:hover span,
a.fb-upotus:focus-visible span {
	background: #166fe5;
	text-decoration: underline;
}

.upotus-kehys {
	border: 0;
}

/* --- Vanhan doctypen rivikorkeus ---
   Vanha sivu oli XHTML 1.0 Transitional -doctypellä (selaimen "almost standards" -tila), jossa rivi, jolla on
   pelkkiä kuvia tai upotuksia, on niiden korkuinen. HTML5-doctypellä niiden alle jää fontin alapidennyksen
   rako (2–4 px), joka siirtää laatikoita. Alareunaan tasaus poistaa raon samalla tavalla. */
img,
a.youtube-upotus,
a.fb-upotus,
.upotus-kehys {
	vertical-align: bottom;
}

/* --- Template-attribuuttien korvaajat --- */
.keskita {
	text-align: center;
}

/* 404 ja haku: vanhan teeman otsikot olivat kuvia, joten tekstiotsikko vaalea */
.box h1.teksti {
	color: #fff;
}

.box.vapaa {
	height: auto;
	min-height: 267px;
}

/* Perusteeman hakulomakkeen piilotettu nimiö (perus.css, jota tämä teema ei lataa) */
.vain-ruudunlukija {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}