/*
 * Ylikirjoitukset TimelineJS3:n omaan timeline.css:ään (ladataan
 * cdn.knightlab.com:sta, ks. vadelma-aikajana.php). Luokat ja alkuperäiset
 * värit tarkistettu suoraan kirjaston lähdekoodista 2026-09-21.
 */

.vadelma-aikajana {
	width: 100%;
}

/* Koko widgetin juuritaso varmuuden vuoksi, ettei valkoinen pilkahda
 * mistään kulmasta läpi. */
.tl-timeline {
	background-color: #011401 !important;
}

/* Navigointipalkin (alaosan aikajana) tausta */
.tl-timenav {
	background-color: #011401 !important;
}

/* Zoomaus/koti-painikkeet istuvat juuri navigointipalkin yläreunassa */
.tl-menubar-button {
	background-color: rgba(255, 255, 255, .12) !important;
	color: #ffffff !important;
}

.tl-menubar-button:hover,
.tl-menubar-button:focus-visible {
	background-color: #fa4273 !important;
	color: #ffffff !important;
}

.tl-timenav .tl-timenav-line {
	background-color: rgba(255, 255, 255, .2) !important;
}

/* Vetämiseen tarkoitettu läpinäkyvä kerros koko navigointipalkin päällä -
 * ei sisällä omaa väriä kirjaston CSS:ssä, mutta varmistetaan siltä
 * varalta ettei mikään selain/versio piirrä siihen omaa taustaa. */
.tl-timenav .tl-timenav-slider,
.tl-timenav .tl-timenav-slider-background {
	background: transparent !important;
}

/* Päivämäärärivi (tick-teksti) navigointipalkin alaosassa */
.tl-timeaxis-background {
	background-color: #011401 !important;
	border-top-color: rgba(255, 255, 255, .15) !important;
}

.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major {
	background-color: #011401 !important;
}

.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick {
	color: #ffffff !important;
}

.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick {
	color: rgba(255, 255, 255, .55) !important;
}

.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick .tl-timeaxis-tick-text span {
	color: rgba(255, 255, 255, .4) !important;
}

.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-major .tl-timeaxis-tick:before,
.tl-timeaxis .tl-timeaxis-content-container .tl-timeaxis-minor .tl-timeaxis-tick:before {
	border-left-color: rgba(255, 255, 255, .25) !important;
	color: #011401 !important;
}

/* Yksittäiset tapahtumamerkinnät navigointipalkissa */
.tl-timemarker .tl-timemarker-content-container {
	background-color: rgba(255, 255, 255, .1) !important;
	border-color: rgba(255, 255, 255, .2) !important;
}

.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline,
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
	color: #ffffff !important;
}

.tl-timemarker .tl-timemarker-line-left,
.tl-timemarker .tl-timemarker-line-right {
	background-color: rgba(255, 255, 255, .3) !important;
}

.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container,
.tl-timemarker:hover .tl-timemarker-content-container,
.tl-timemarker:focus .tl-timemarker-content-container {
	background-color: #fa4273 !important;
	border-color: #fa4273 !important;
}

/* Sisältödian otsikko (yläosan iso teksti) hieman pienemmäksi */
.tl-text h2.tl-headline-title,
.tl-text h2.tl-headline {
	font-size: 30px !important;
	line-height: 34px !important;
}

.tl-timeline h2.tl-headline-title small {
	font-size: 20px !important;
	line-height: 22px !important;
}

.tl-skinny .tl-text h2.tl-headline-title,
.tl-skinny .tl-text h2.tl-headline,
.tl-medium .tl-text h2.tl-headline-title,
.tl-medium .tl-text h2.tl-headline {
	font-size: 26px !important;
	line-height: 30px !important;
}