/*MUUTTUJAT*/
:root {
	/*TAUSTAN LEVEYS*/
	--leveys-pohja: 900px;
	/*TAUSTAN PUDOTUS*/
	--siirto-pysty-pohja:7px;
	/*MARGINAALIEN LEVEYS (myös keskimarginaali)*/
	--leveys-marginaali:30px;
	/*SISÄLLÖN KOKONAISLEVEYS (esim. header)*/ 
	--leveys-otsikko:calc(var(--leveys-pohja) - 2*var(--leveys-marginaali));
	/*OTSIKON KORKEUS*/
	--korkeus-otsikko:60px;
	/*KUVAOSION LEVEYS (section.kuvat)*/
	--leveys-osio-kuvat:240px;
	/*TEKSTIOSION LEVEYS (section.teksti)*/
	--leveys-osio-teksti:calc(var(--leveys-pohja) - 3 * var(--leveys-marginaali) - var(--leveys-osio-kuvat));
		/*Kuva-alueen leveys asetetaan ennen tekstialueen leveyttä,*/
		/*koska tekstialueen leveys riippuu kuva-alueen leveydestä.*/
	--siirto-pysty-osio-teksti:60px;
	--siirto-pysty-osio-kuvat:calc(60px + var(--siirto-pysty-osio-teksti));
	/*KUVAPALSTAN LEVEYS*/
	--leveys-palsta-kuvat:calc(var(--leveys-osio-kuvat) + var(--leveys-marginaali));
	--leveys-palsta-teksti:var(--leveys-osio-teksti);
	/*KUVAKEHYS*/
	--leveys-kuvakehys:1px;
	--viiva-kuvakehys:solid;
	--väri-kuvakehys:white;
	--kuvakehys:var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);
	--väri-kuvakehys-aktiivinen:black;
	--varjo-vaakasiirto-kuvakehys-aktiivinen:0;
	--varjo-pystysiirto-kuvakehys-aktiivinen:2px;
	--varjo-häivealue-kuvakehys-aktiivinen:8px;
	--varjo-laajuus-kuvakehys-aktiivinen:2px;
	--varjo-väri-kuvakehys-aktiivinen:#888888;
	--varjo-kuvakehys-aktiivinen:var(--varjo-vaakasiirto-kuvakehys-aktiivinen) var(--varjo-pystysiirto-kuvakehys-aktiivinen) var(--varjo-häivealue-kuvakehys-aktiivinen) var(--varjo-laajuus-kuvakehys-aktiivinen) var(varjo-väri-kuvakehys-aktiivinen);
	
	/*KARTAN SKAALAUSTEKIJÄT*/
	--skaalaus-kartta:calc(2/3);
	--mitat-kartta-iframe:calc(1 / var(--skaalaus-kartta) * var(--leveys-osio-kuvat) - 2 * var(--leveys-kuvakehys));
	--leveys-karttakehys:calc(1 / var(--skaalaus-kartta) * var(--leveys-kuvakehys));
	
	/*ETUSIVUN KARTAN SKAALAUSTEKIJÄT*/
	/*Mieluiten olisi sama kuin muissa kartoissa, mutta 
	  Paikkatietoikkuna on lopettanut merkintöjen näyttämisen
	  uloimmalla zoomaustasolla (zoomLevel=1)*/
	--skaalaus-kartta-etusivu:calc(1/3);
	--mitat-kartta-etusivu-iframe:calc(1 / var(--skaalaus-kartta-etusivu) * var(--leveys-osio-kuvat) - 2 * var(--leveys-kuvakehys));
	--leveys-karttakehys-etusivu:calc(1 / var(--skaalaus-kartta-etusivu) * var(--leveys-kuvakehys));

	/*SVG GRAFIIKAT*/
	--linkki-oikea-yläkulma:url('data:image/svg+xml;utf8,<svg> ... </svg>');
}
/*PIILOTETAAN VIERITYSPALKIT*/
/*EI TOIMI - jätetty muistoksi kokeilusta*/ 
/*Olisiko tämä on ehkä sittenkin parempi kuin aiempi tapa,
  jossa vierityspalkit on jemmattu näkymän ulkopuolelle.
  Se tuntuu hajoavan vähän väliä. */

/*
html {
    scrollbar-width: none;
}
body {
    -ms-overflow-style: none;
}  
body::-webkit-scrollbar {
    display: none;
}
*/
/*Ratkaistu: Chromeen ilmestyneet vaakavierityspalkit sai pois
  laittamalla Section tagiin overflow-x: clip;*/

body {
	background-color: rgb(180,180,170);
	font-family: 'Josefin Sans', serif;
	margin: 0;
	/*VANHOJA MÄÄRITTELYJÄ*/
	/*background-color: white;*/
	/*background-color: rgb(152,151,149);*/
}

  
/*VERHO KORVATAAN KAHDELLA SEURAAVALLA DIVILLÄ*/
/*POISTA KUN KAIKKI JUTUT KÄSITELTY*/
div#otsikkokuva, #häivennys, #verho, #pohja{
	background-size: 100%;
	position: absolute;
	top: var(--siirto-pysty-pohja);
	left: calc((100% - var(--leveys-pohja))/2);
	width: var(--leveys-pohja);
	height: calc(100% - var(--siirto-pysty-pohja));
	margin: 0;
}
div#otsikkokuva{
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	pointer-events: none;
	z-index: 15;
	box-shadow: 2px 1px 5px 3px #888888;
}
div#häivennys{
	background: linear-gradient(gainsboro 150px, transparent 250px);
	pointer-events: none;
	z-index: 10;
}
/*VERHO KORVATAAN 2 YLLÄOLEVALLA DIVILLÄ*/
/*POISTA KUN KAIKKI JUTUT KÄSITELTY*/
div#verho {
	background-image: url('tausta.png'); 
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	pointer-events: none;
	z-index: 15;
}
div#pohja {
	background-color: gainsboro;
	z-index: 0;
	box-shadow: 2px 1px 5px 3px #888888;
}
article {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

/*ARTIKKELIEN TAUSTAT ...*/

#otsikkokuva.aloituspohja2020 {
	/*Tämä häivyttää kuvan, mutta teksti ei katoa kuvan alle
	  Tekstin häivytys tehdään kohdassa div#häivennys*/
	background-image: url('0001 Aloituspohja/PS_IGP2002.jpg');
	background-size: 140%;
	background-position: -295px -230px;
	mask-image: linear-gradient(black 130px, transparent 240px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 240px);
}

#otsikkokuva.saariselkä1998 {
	background-image: url('0001 Aloituspohja/PS_IGP2002.jpg');
	background-size: 140%;
	background-position: -295px -230px;
	mask-image: linear-gradient(black 130px, transparent 250px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 250px);
}

#otsikkokuva.halti1999 {
	background-image: url('1999 Halti/Halti 1999L-20.jpg');
	background-size: 100%;
	background-position: center top -70px;
	mask-image: linear-gradient(black 130px, transparent 290px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 290px);
}

#otsikkokuva.hammastunturi2004 {
	background-image: url('2004 Hammastunturi/0408131509L.jpg');
	background-size: 101%;
	background-position: center top -70px;
	mask-image: linear-gradient(black 140px, transparent 310px);
	-webkit-mask-image: linear-gradient(black 140px, transparent 310px);
}

#otsikkokuva.hammastunturi2005 {
	background-image: url('2005 Hammastunturi/0508151358L.jpg');
	background-size: 100%;
	background-position: center top -158px;
	mask-image: linear-gradient(black 140px, transparent 310px);
	-webkit-mask-image: linear-gradient(black 140px, transparent 310px);
}

#otsikkokuva.paistunturit2007 {
	background-image: url('2007 Kevo ja Paistunturit/PS_IGP1914.jpg');
	background-position: center top -355px;
	mask-image: linear-gradient(black 120px, transparent 240px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 240px);
}

#otsikkokuva.kaldoaivi2008 {
	background-image: url('2008 Kaldoaivi/0808041558L.jpg');
	background-position: center top -205px;
	mask-image: linear-gradient(black 120px, transparent 295px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 295px);
}

#otsikkokuva.pöyrisjärvi2009 {
	background-image: url('2009 Pöyrisjärvi/_IGP4092.JPG');
	background-position: center top -150px;
	mask-image: linear-gradient(black 120px, transparent 235px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 235px);
}

#otsikkokuva.vätsäri2011 {
	background-image: url('2011 Vätsäri/1107261448L.jpg');
	background-position: center top -105px;
	mask-image: linear-gradient(black 120px, transparent 270px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 270px);
}

#otsikkokuva.muotkatunturit2012 {
	background-image: url('2012 Muotkatunturit/24L.jpg');
	background-position: center top -92px;
	mask-image: linear-gradient(black 120px, transparent 270px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 270px);
}

#otsikkokuva.ropi2016 {
	background-image: url('2016 Ropi/1608041301L.jpg');
	background-position: center top -85px;
	mask-image: linear-gradient(black 120px, transparent 270px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 270px);
}

/*KESKEN, EI ASEMOITU, KUVA ETSIMÄTTÄ*/
#otsikkokuva.kaldoaivi2017 {
	background-image: url('2017 Kaldoaivi/???.jpg');
	background-position: center top -355px;
	mask-image: linear-gradient(black 120px, transparent 235px);
	-webkit-mask-image: linear-gradient(black 120px, transparent 235px);
}
/*KESKEN, KUVA ETSIMÄTTÄ*/
#otsikkokuva.tsaibma2018 {
	background-image: url('../0001 Aloituspohja/PS_IGP2002.jpg');
	background-size: 140%;
	background-position: -295px -230px;
	mask-image: linear-gradient(black 130px, transparent 240px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 240px);
}
/*KESKEN, EI ASEMOITU*/
#otsikkokuva.vätsäri2021 {
	background-image: url('2021 Vätsäri/2108171716L.jpg');
	/*background-size: 140%;*/
	background-position: center top -50px;
	mask-image: linear-gradient(black 130px, transparent 240px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 240px);
}

#otsikkokuva.tsarmitunturi2025 {
	background-image: url('2025 Tsarmitunturi/2508121155L.jpg');
	/*background-size: 140%;*/
	background-position: center top -190px;
	mask-image: linear-gradient(black 130px, transparent 255px);
	-webkit-mask-image: linear-gradient(black 130px, transparent 255px);
}

/*...ARTIKKELIEN TAUSTAT*/

header {
	position: relative;
	z-index: 20;
	width: var(--leveys-otsikko);
	height: var(--korkeus-otsikko);
	margin: 0 auto 0 auto;
	padding-top: 85px;
}
header.halti1999 {
	padding-top: 90px;
}
header.paistunturit2007 {
	padding-top: 100px;
}
header.kaldoaivi2008 {
	padding-top: 100px;
}
header.pöyrisjärvi2009 {
	padding-top: 95px;
}
header.vätsäri2011 {
	padding-top: 90px;
}
header.muotkatunturit2012 {
	padding-top: 105px;
}

header.tsarmitunturi2025 {
	padding-top: 85px;
}

section {
	cursor: n-resize;
	height: inherit;
	margin: 0;
	border: 0;
	padding-right:var(--leveys-marginaali);
	overflow: auto;
    overflow-x: clip;
	scroll-behavior: smooth;
	/*VANHOJA MÄÄRITTELYJÄ*/
	/*padding-top: 60px;*//*pudottaa sisällöt alemmas*//*TARPEETON*/
	/*width: calc(var(--leveys-otsikko)/2);*//*TARPEETON, molemmilla oma määrittely*/
	/*cursor: ns-resize;*/
}
/* SUOMENNUS KÄYNNISSÄ, POISTETAAN .text JA .images KOHDAT KUN VALMISTA */
/*
section.text { 
	width: 490px;
	height: calc(100% - 60px);
	text-align: justify;
}
*/
section.teksti {
	width: var(--leveys-osio-teksti);
	height: calc(100% - 60px); /*miinus section{padding-top:}*/
	text-align: justify;
	padding-top: var(--siirto-pysty-osio-teksti);
	scroll-padding-top: var(--siirto-pysty-osio-kuvat); /*TÄSTÄ OMA MUUTTUJA? (vrt. section.kuvat)*/
}
/*
section.images {
	width: 320px;
	height: calc(100% - 60px);
	padding-left: 30px;
	scroll-behavior: smooth;
	scroll-padding-top: 40px;
}
*/
section.kuvat {
	/*width: 320px;*/
	width: var(--leveys-osio-kuvat);
	height: calc(100% - var(--siirto-pysty-osio-kuvat));
	padding-left: 30px; 
	padding-top: var(--siirto-pysty-osio-kuvat);
	/*padding-top: 120px;*/
	scroll-padding-top: var(--siirto-pysty-osio-kuvat);
}
h1 {
	font-family: 'Montez', cursive;
	font-size: 2em;
	color: white;
	opacity: 0.9;
	text-shadow: black 0.1em 0.1em 0.2em;
	margin: 0;
}
h2 {
	font-family: 'Montez', cursive;
	font-size: 1.5em;
	margin: 0.5em 0 0.5em 0;
}
p {
	font-family: inherit;
	font-size: 1em;
	line-height: 1.3em;
	hyphens: auto;
	width: inherit;
}
ul{
	list-style-type: none;
	padding: 0 0 0.5em 0.5em;
	margin: 0;
}
li {
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4em;
}
a {
	text-decoration: none;
	color: #0033cc;
}
a:target {
	text-decoration:underline;
}

/*LUULTAVASTI TURHA, 
	Taulukot poistettu
table, th, td {
	width: 450px;
	border-collapse: collapse;
	border: 2px ridge rgb(254,137,58);
	margin-top: 20px;
	padding: 3px;
}
*/
figure {
	margin: unset;
}
figure.kuva {
	position: relative; /*TÄMÄ TARVITAAN JOTTA KARTTALINKKI TOIMII*/
}
figcaption {
	font-family: inherit;
	font-size: 0.9em;
	line-height: 1.2em;
	margin: 0.4em 0;
	hyphens: auto;
	width: inherit;
}

#content {
	width: 840px;
	height: 60%;
	height: calc(100% - 160px);
	/* height: 100% - header (padding+height+20); START HERE!*/
	margin: 0 auto 0 auto;
}
#sisältö {
	width: 840px;
	height: 60%;
	height: calc(100% - 160px);
	margin: 0 auto 0 auto;
}

#column {
	/*width: 420px;*/
	height: 100%;
	float: left;
	overflow: hidden;
}
#column.left {
	width: 490px;
}
#column.right{
	width: 350px;
}
#palsta {
	/*width: 420px;*/
	height: 100%;
	float: left;
	overflow: hidden;
}
#palsta.vasen {
	/*width: 490px;*/
	width: 570px;
}
#palsta.oikea{
	/*width: 350px;*/
	width: 270px;
}

/*
div#alkukuva{
	padding-top: 60px;
}
*/
div#skaalattu{
	/*padding: 0;*/
	overflow: hidden;
}
/* ÄH!
div#tyhjä{
	width: 320px;
	height: 120px;
	position: fixed;
	margin: 0;
	border: 0;
}
*/
.image {
	width: 320px;
	height: auto;
	margin-bottom: 40px;
	border: 0px;
	clear: both;
	text-align: center;
}
.image a {
	background-color: transparent;
	border: 0px;
	color: #0033cc;
	float: inherit;
}
.image p {
	font-size: 0.9em;
	line-height: 1.2em;
}
.image img {
	width: calc(320px - (2*1px) - (2*8px)); /*miinus border miinus box-shadow*/
	border: 0;
	border: 1px solid white;
}
.image iframe {
	border: 1px solid white;
	/*
	height: 320px;
	width: 320px;
	opacity: 0.66;
	*/
	transform: scale(0.75, 0.75);
	transform-origin: 0 0;
}
/*.image:target{
	padding-top: 60px;
}*/ /*ks. section */
.kuva {
	/*width: 320px;*/
	width: 240px;
	height: auto;
	margin-bottom: 40px;
	border: 0px;
	clear: both;
	text-align: center;
}
.kuva a {
	background-color: transparent;
	border: 0px;
	color: #0033cc;
	float: inherit;
}
.kuva p {
	font-size: 0.9em;
	line-height: 1.2em;
}
.kuva img {
	/*width: calc(320px - (2*1px) - (2*8px)); /*miinus border miinus box-shadow*/
	width: calc(240px - (2*1px) - (2*8px)); /*miinus border miinus box-shadow*/
	border: 0;
	border: 1px solid white;
}
.kuva.graafi iframe {
	/*border: 1px solid white;
	
	height: 320px;
 
	opacity: 0.66;
	*/
	width: 600px;
	height: 371px;
	transform: scale(0.533, 0.533);
	transform-origin: 0 0;
}
.kuva.alkukuva.karttalinkkikehys iframe {
	/*KESKENERÄINEN*/
	/*borderin outo koko johtuu skaalauksista*/
	border: 1.78px solid white;
	/*
	height: 320px;
	width: 320px;
	opacity: 0.66;
	*/
	/*ALKUPERÄINEN SKAALAUS, JOKA TEKEE PAIKKATIETOIKKUNAN KARTOISTA SIROMPIA*/
	/*transform: scale(0.75, 0.75);*/
	/*TÄMÄ SKAALAUS KORJAA LISÄKSI OIKEAN PALSTAN KAVENTAMISEN SEURAUKSET*/
	transform: scale(0.556, 0.556);
	transform-origin: 0 0;
}
.image:target img{
	/*
	position: relative;
	top: 120px;
	scroll-snap-destination:;
	scroll-padding-top: 60px; /*väärä paikka*/
	border-color: black;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 
.kuva:target img{
	/*
	position: relative;
	top: 120px;	
	scroll-padding-top: 60px; /*väärä paikka*/
	border-color: black;
	/*
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	*/
	box-shadow: 0 2px 8px 2px #888888;
}

.skaalattu{
	overflow: hidden;
}

/* POIS KUN KORVATTU ALLA OLEVILLA >>>>*/
.karttalinkkikehys{
	position: relative;
	overflow: hidden;
	width:var(--leveys-osio-kuvat);
	height:var(--leveys-osio-kuvat);
}
.kuva.karttalinkkikehys iframe {
	/*KESKENERÄINEN*/
	width: var(--mitat-kartta-iframe);
	height: var(--mitat-kartta-iframe);
	transform: scale(var(--skaalaus-kartta), var(--skaalaus-kartta));
	transform-origin: 0 0;
	border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);
	/*border: calc(1/var(--skaalaus-kartta))px solid white;*/
	/*border: 2px solid white;*/
	/*
	VANHOJA MÄÄRITYKSIÄ
	border: calc(1/var(--skaalaus-kartta)px) solid white;
	opacity: 0.66;
	*/
}
.karttalinkki{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*border: 1px solid white;*/
	/*background-color: red;
	opacity: 0.66;*/
}
.karttalinkki a{
	display:block;
		height:100%;
}
/* <<< POIS KUN KORVATTU ALLA OLEVILLA*/
.kartta{
	position: relative;
	overflow: hidden;
	/*width:var(--leveys-osio-kuvat);*/
	height:var(--leveys-osio-kuvat);
}
/*VANHA: pois kun alla oleva käytössä*/
.kuva.kartta iframe {
	/*KESKENERÄINEN*/
	width: var(--mitat-kartta-iframe);
	height: var(--mitat-kartta-iframe);
	transform: scale(var(--skaalaus-kartta), var(--skaalaus-kartta));
	transform-origin: 0 0;
	border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);
}
/*UUSI: käyttöön kun aloituspohja valmis ja muutokset tehty juttuihin*/
.kartta iframe {
	/*KESKENERÄINEN*/
	width: var(--mitat-kartta-iframe);
	height: var(--mitat-kartta-iframe);
	transform: scale(var(--skaalaus-kartta), var(--skaalaus-kartta));
	transform-origin: 0 0;
	/*BORDER siirretään ympäröivään diviin*/
	border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);
}
.kuva.kartta figcaption{
	/*display: block;*/
}

.kartta.etusivu iframe {
	/*KESKENERÄINEN*/
	/*Sovittaa Paikkatietoikkunan zoomLevel=2 -kartan etusivun kartan kehykseen sopivaksi.
	  Käytetään jos jos Paikkatietoikkunan zoomLevel=1 ei toimi, eli reissujen pallukat eivät näy.*/
	width: var(--mitat-kartta-etusivu-iframe);
	height: var(--mitat-kartta-etusivu-iframe);
	transform: scale(var(--skaalaus-kartta-etusivu), var(--skaalaus-kartta-etusivu));
	transform-origin: 0 0;
	border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);
}
.kuva.kartta-etusivu figcaption{
	display: block;
}


.karttalinkkialue{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:var(--leveys-osio-kuvat);


}
.karttalinkkialue a{
	display:block;
	height:100%;
	/*
	background-color: red;
	opacity: 0.66;
	*/
}
/*
.alkukuva.karttalinkki {
		padding-top: 0;
		height: 320px;
}
*/

/*Luokka nimetty uudestaan ks. alla*/
.paikkamerkki{
	cursor:crosshair;
	position:absolute;
	top:0;
	right:8px; /*SAMA KUIN BOX-SHADOW (sekin pitäisi parametrisoida)*/
	padding-right:3px;
	padding-top:1px;
	width:1em;
	line-height:1em;
	opacity: 0.66;
	font-size:22px;
	font-family:'Noto Sans JP';
}
.paikkamerkki:after{
	font-family:"Noto Sans JP";
	vertical-align:top;
	content:"\25E5";
}

/*TÄMÄ ON SE PAREMPI*/
.karttapaikka{
	cursor:crosshair;
	position:absolute;
	top:0;
	right:8px; /*SAMA KUIN BOX-SHADOW (sekin pitäisi parametrisoida)*/
	padding-right:3px;
	padding-top:1px;
	width:1em;
	line-height:1em;
	opacity: 0.66;
	font-size:22px;
	font-family:'Fira Mono', 'Noto Sans JP';
}
.karttapaikka:after{
	font-family:'Fira Mono', 'Noto Sans JP';
	vertical-align:top;
	content:"\25E5";
}

.upotus{
	position: relative;
	overflow:hidden;
	background-color:white; /*Varmuuden vuoksi, olettaen että säädatankin tausta on valkoinen*/ 
	/*border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) var(--väri-kuvakehys);*/
	border: var(--leveys-kuvakehys) var(--viiva-kuvakehys) silver;
	width: calc(var(--leveys-osio-kuvat)-2*var(--leveys-kuvakehys)); /*tästä oma muuttuja*/
	/*width: var(--leveys-osio-kuvat);*/
}
.upotus iframe{
	transform-origin: 0 0;
	transform:translate(-1px, 0px); /*Tämä piilottaa google sheetsin iframen vasemmass reunassa olevan 1px harmaan viivan, josta ei muutoin pääse eroon*/
	border:none;
	height:100%;
	width:100%;
}