body {
	background-color: #F9F9F5;
	max-width: 900px;
	margin: 20px auto;
	padding:  0 20px;
/*	line-height: 1.5; */
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

p {
  margin-top: 0;
  margin-bottom: 0.9em; /* jos liian iso kappaleväli laita 0.6 */
  line-height: 1.5;
}
@media (max-width: 700px) {
  p {
    margin-bottom: 0.6em; /* mobiilille hitusen väljemmäksi kuin PC */
    line-height: 1.3;   /* samoin hiukan väljempää mobiilissa*/
  }
}


img {
    max-width: 900px !important;  
    width: 100% !important;        
    height: auto !important;      /* Pitää kuvasuhteen oikeana */
    display: block;    /* Helpottaa asettelua */
    margin: 20px auto; /* Keskittää kuvan, jos ikkuna on leveämpi kuin 1200px */
}
/* Perussääntö kaikille videoille (16:9 laajakuva) */
iframe {
    max-width: 800px !important; /* 1200 x 675,, 1024 x 576,, 800 x 450,, 640 x 360  JA  Ylä 20px, Oikea 0, Ala 20px, Vasen 30px   ja keskitys vasoik margin: 20px auto; oli 20px 0; */
    width: 100% !important;
    height: 56.25vw !important; 
    max-height: 450px !important;
    display: block;    
    margin: 20px 0; 
    border: none;
}
table.cons-med-norm-tih {
	border-collapse: collapse;
	border-spacing: 0;
}
table.cons-med-norm-tih td,
table.cons-med-norm-tih th {
	line-height: 1.0;
	padding: 0 6px;
	font-weight: normal;
}
table.cons-med-norm-tihright {
	border-collapse: collapse;
	border-spacing: 0;
}
table.cons-med-norm-tihright td,
table.cons-med-norm-tihright th {
	line-height: 1.0;
	padding: 0 6px;
	font-weight: normal; 
}
.table-container,
.text-container {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 18px;
    position: relative;
}

/* Taulukot eivät litisty liikaa */
.table-container table,
.text-container table {
  /*  min-width: 620px;*/
  max-width: none;
}

/* WebKit / Chrome / Safari: näkyvämpi vierityspalkki silloin kun selain näyttää sen */
.table-container::-webkit-scrollbar,
.text-container::-webkit-scrollbar {
    height: 12px;
}

.table-container::-webkit-scrollbar-track,
.text-container::-webkit-scrollbar-track {
    background: #E0E0E0;
}

.table-container::-webkit-scrollbar-thumb,
.text-container::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 8px;
}

/* Firefox */
.table-container,
.text-container {
    scrollbar-width: auto;
    scrollbar-color: #808080 #E0E0E0;
}

/* Mobiilille aina näkyvä vihje */
@media screen and (max-width: 700px), (hover: none) and (pointer: coarse) {
    .table-container::after,
    .text-container::after {
        content: "← vieritä taulukkoa →";
        position: sticky;
        left: 0;
        bottom: 0;
        display: block;

        font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;

        padding: 3px 6px;
        margin-top: 4px;

        color: #3D3D3A;
        background-color: #E0E0E0;
        border: 1px solid #C0C0C0;
    }
}
/*                                           UUSIVERSIO LOPPU*/



/* Normaali, käymätön linkki */
a:link {
    color: #0066CC;
    text-decoration: underline;
}
/* Käyty linkki */
a:visited {
    color: #800000;
}
/* Hiiren ylitys (hover) - tärkeä käytettävyyden kannalta */
a:hover {
    color: #4d077f;;
    text-decoration: none; /* Poistaa alleviivauksen hiiren alla */
}
/* Aktiivinen linkki (klikkaushetkellä) */
a:active {
    color: #CC0000;
}

.yla {
  font-size: 0.85em;
  line-height: 0;
  position: relative;
  top: -0.35em;
  margin-left: -0.05em; /* Lähentää yläviitettä */
}

.ala {
  font-size: 12px;
  line-height: 0;
  position: relative;
  bottom: -0.15em; /* Alaviite alemmaksi -0.2 on enemmän */
  margin-left: -0.05em; /* Alaviite vaatii usein vähemmän lähennystä */
}
.keskita {
	text-align: center;
}

h2.cons-otsikko {       /* TAULUKOIDEN OTSIKKO EI EROTU TAULUKON TEKSTIOSASTA */
    font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
    font-size: medium;   /* Sama koko kuin taulukossa */
    font-weight: normal; /* Ei lihavointia, jos haluat sen "piiloon" */
    line-height: 1.0;
    margin: 0;           /* Poistaa tyhjän tilan otsikon ympäriltä */
    padding: 2px 0;      /* Vain pieni hienosäätöväli */
    color: #3D3D3A;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	h2.cons-otsikko {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}
h2.cons-otsikko-bld {       /* TAULUKOIDEN OTSIKKO LIHAVOITU*/
    font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
    font-size: medium;   /* Sama koko kuin taulukossa */
    font-weight: bold; 
    line-height: 1.0;
    margin: 0;           /* Poistaa tyhjän tilan otsikon ympäriltä */
    padding: 2px 0;      /* Vain pieni hienosäätöväli */
    color: #3D3D3A;
}


/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	h2.cons-otsikko-bld {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}
h1.taho-otsikko {
    font-family: Tahoma, sans-serif;
    font-size: medium;
    font-weight: bold;   /* Lihavointi auttaa erottamaan ala-aiheet */
    margin-top: 1.5em;   /* Jättää tilaa edeltävään tekstiin */
    margin-bottom: 0.5em;
    color: #3D3D3A;
}

h2.taho-otsikko {
    font-family: Tahoma, sans-serif;
    font-size: medium;
    font-weight: bold;   /* Lihavointi auttaa erottamaan ala-aiheet */
    margin-top: 1.5em;   /* Jättää tilaa edeltävään tekstiin */
    margin-bottom: 0.5em;
    color: #3D3D3A;
}
h2.taho-med-nor {
	font-family: Tahoma;
	font-size: medium;
	text-align: left;
	color: #3D3D3A;
	font-weight: normal;
}
.taho-med-noalign {
	font-family: Tahoma;
	font-size: medium;
	color: #3D3D3A;
}

.taho-pie-noaln-left25 {
	font-family: Tahoma;
	font-size: small;
	color: #3D3D3A;
	margin-left: 25px;
}

.taho-iso {
	font-family: Tahoma;
	font-size: large;
	color: #3D3D3A;
}
.taho-xpien-leftali {
	font-family: Tahoma;
	font-size: x-small;
	text-align: left;
	line-height: 1;
	color: #3D3D3A;
}
.taho-pien-leftali {
	font-family: Tahoma;
	font-size: small;
	text-align: left;
	line-height: 1.1;
	color: #3D3D3A;
}
.taho-13-tight-left25 {
	font-family: Tahoma;
	color: #3D3D3A;
	line-height: 1.2;
	margin-left: 25px;
	font-size: 13px;
}

.taho-med-bgr1 {
	font-family: Tahoma;
	color: #3D3D3A;
	font-size: medium;
	background-color: #FADD91;
}
.cons-details-summary {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: left;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #3D3D3A;
	text-decoration: underline;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}
/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-details-summary {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.cons-taul-sel-nowrap {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: left;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */
	color: #3D3D3A;
	margin-top: 6px;
	white-space: nowrap;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-taul-sel-nowrap {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

/* TAULUKOIDEN numeeriset solut */
.cons-med-norm-tihright {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: right;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}
/* TAULUKOIDEN numeeriset solut */
/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-med-norm-tihright {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.cons-med-norm-tihcent {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: center;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-med-norm-tihcent {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.cons-med-norm-tihright-bgcolr {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: right;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #F9F9F5;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-med-norm-tihright-bgcolr {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.cons-med-norm-tihleft {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: left;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-med-norm-tihleft {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.cons-med-norm-tih {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	text-align: left;
	font-weight: normal;
	line-height: 1.0; /* Säädä tätä (esim. 0.8 on erittäin tiheä) */;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.cons-med-norm-tih {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas-med-normal {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: medium;
	font-weight: normal;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas-med-normal {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas-med-iso {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: large;
	font-weight: normal;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas-med-iso {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas-pieni-norm {
	font-family: Consolas;
	font-size: small;
	font-weight: normal;
	color: #3D3D3A;	
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas-pieni-norm {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas-xpieni-norm {
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;
	font-size: x-small;
	font-weight: normal;
	color: #3D3D3A;
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas-xpieni-norm {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.consolas-teal {
	color: #008080;
	font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", "Roboto Mono", monospace;	
	font-variant-numeric: slashed-zero;
	font-feature-settings: "zero" 1;
}

/* Puhelin / kosketuslaite: käytä ensin Googlelta ladattavaa Roboto Monoa */
@media screen and (max-width: 1200px), (hover: none) and (pointer: coarse) {
	.consolas-teal {
		font-family: "Roboto Mono", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
		font-size: 12px;
	}
}

.arial-med-normal {
	font-family: Arial;
	font-size: medium;
	font-weight: normal;
	color: #3D3D3A;
}
.bahn-narrow-pieni {
	font-size: small;
	font-family: "Bahnschrift Condensed";
	font-weight: normal;
	color: #6D6D6A;
}
.arialnarr {
	font-family: "Arial Narrow";
	color: #3D3D3A;
}
.xiso {
	font-size: x-large;
}
.iso {
	font-size: large;
}
.medium {
	font-size: medium;
}

.pieni {
	font-size: small;
}
.xpieni {
	font-size: x-small;
}
.alleviiv {
	text-decoration: underline;
}
.alleviiv-tupuna {
	color: #800000;
	text-decoration: underline;
}
.yliviiva {
	text-decoration: line-through;
}
.harmaa {
	color: #C0C0C0;
}
.harmaa80 {
	color: #808080;
}

.mustharm {
	color: #333333;
}
.kelt {
	color: #FFE600;
}
.ora {
	color: #FF6600;
}
.puna {
	color: #FF2000;
}
.tupuna {
	color: #800000;
}
.vihrea {
	color: #008000;
}
.teal {
	color: #008080;	
}
.sini {
	color: #0066CC;
}
.vaharback {
	background-color: #E0E0E0;
}
.harback {
	background-color: #C0C0C0;
}
.har80back {
	background-color: #808080;
}
.tausta1 {
	background-color: #72CE72;
}
.tealback {
	background-color: #008080;
}
.keltback {
	background-color: #FFE600;
}
.vaorback {
	background-color: #FFCC66;
}
.orkeltback {
	background-color: #FF6600;
}
.punaback {
	background-color: #FF2000;
}