/*Sivun tyyliasetukset*/

/* Komennon "@media screen" kaarisulkeiden välissä annetaan muotoilut sivujen näkymiselle tietokoneen näyttöjen ruuduilla, "@media print":in sulkeiden välissä on lisämuotoilut, jotka otetaan huomioon sivuja tulostettaessa (näiden vaikutuksen voit tarkistaa sivun tulostuksen esikatselutilassa) ja "@media handheld":in sulkeiden välissä on asetukset, jotka huomioidaan sivuja katsottaessa kännyköillä ja vastaavilla pienillä laitteilla. */


@media screen {


/* Muotoillaan SIVUA yleisesti. "margin: 10px" -määrittelyllä saadaan sivun alkuun 10 px marginaali, jotta sisältö (taulukko) ei olisi avan kiinni selaimen reunassa. "margin-bottom: 2em" -määrittelyllä saadaan sivun loppuun marginaalia niin, että sivun pohjaväri näkyy vähän taulukon alapuolella */

body	{ background: #008080; color: black; margin: 10px; margin-bottom: 2em }


/* Muotoillaan TAULUKKOA yleisesti */

table	{ width: 840px; background: transparent; color: black }


/* Muotoillaan SOLUJA yleisesti (td, table data). "vertical-align: top" -määrittelyllä saadaan aseteltua teksti alkamaan kussakin solussa ylhäältä. */

td	{ background: white; color: black; vertical-align: top }


/* Muotoillaan FONTIT (koot jne.) otsikoille (h1-h6) ja leipätekstille (p). "padding" ja margin" -määrittelyt (ylös-oikealle-alas-vasemmalle) on myös hyvä antaa, koska ilman niitä selaimet käyttävät näille oletusarvojaan, jotka saattavat poiketa selaimesta toiseen, jolloin sivut voisivat näkyä erilaisina eri selaimilla katsottuna. */

h1	{ font-family: Arial,sans-serif; font-size: 160%; padding: 15px 10px 10px 10px; margin: 0px }

h2	{ font-family: Arial,sans-serif; font-size: 120%; padding: 15px 10px 5px 10px; margin: 0px }

h3	{ font-family: Arial,sans-serif; font-size: 100%; padding: 15px 10px 0px 10px; margin: 0px }

/* Otsikkotaso 4 on näillä sivuilla tarkoitettu INGRESSEILLE sekä pienimmille otsikoille, esimerkiksi sivupalkissa. */

h4	{ font-family: Arial,sans-serif; font-size: 90%; padding: 10px 10px 0px 10px; margin: 0px }

/* Otsikkotaso 5 on näillä sivuilla tarkoitettu tavanomaisille KUVATEKSTEILLE. */

h5	{ font-family: Arial,sans-serif; font-size: 80%; padding: 0px 10px 0px 10px; margin: 0px }

/* Otsikkotaso 6 on näillä sivuilla tarkoitettu sivuhuomautuksille, alaviitteille, pienille kuvateksteille tms. erityisen pientä fonttikokoa tarvitseville kohdille */

h6	{ font-family: Arial,sans-serif; font-size: 70%; font-weight: normal; padding: 0px 10px 0px 10px; margin: 0px }

/* Leipätekstin (p, paragraph) muotoilut */

p	{ font-family: Arial,sans-serif; font-size: 90%; padding: 10px 10px 0px 10px; margin: 0px }

/* Muotoillaan numeroimattomat luettelot. Marginaalin määrittelyt: ylös-oikealle-alas-vasemmalle */

ul	{ font-family: Arial,sans-serif; font-size: 90%; padding: 0px; margin: 10px 25px 10px 50px; list-style-type: disc }

/* Muotoillaan luetteloiden jäsenelementit (li, list item). Marginaalin määrittelyt (Huom: suhteessa koko luettelon määrittelyihin): ylös-oikealle-alas-vasemmalle */

li	{ font-family: Arial,sans-serif; font-size: 100%; padding: 0px; margin: 0px 0px 10px 0px }

/* Muotoillaan poikkiviivat (lähinnä vasemmassa linkkipalkissa). */

hr	{ color: #87A8A1 }

/* Muotoillaan ylärivin vasenta solua. "padding" -määrittelyllä annetaan täytön määrittelyt samalla leipätekstille (spesifisesti tähän soluun) ylös, oikealle, alas ja vasemmalle */

.vasen1		{ width: 25%; background: #6FF2B3; color: black; vertical-align: bottom}

.vasen1 p 	{ font-family: 'Courier New',monospace; font-size: 120%; font-weight: bold; padding: 5px 10px 3px 10px; margin: 0px }

.vasen1 a 	{ text-decoration: none }


/* Muotoillaan ylärivin oikeaa solua. "padding" -määrittelyllä annetaan täytön määrittelyt samalla leipätekstille (spesifisesti tähän soluun) ylös, oikealle, alas ja vasemmalle  */

.oikea1		{ width: 75%; background: #D9ECFB; color: black }

.oikea1 p 	{ font-size: 100%; font-weight: bold; padding: 12px 10px 5px 10px; margin: 0px }

.oikea1 a	{ text-decoration: none }


/* Muotoillaan keskirivin vasenta solua */

.vasen2		{ background: #D8FCE8; color: black }

.vasen2 a	{ text-decoration: none }

.vasen2	h2	{ font-family: Arial,sans-serif; font-size: 120%; padding: 5px 10px 12px 10px; margin: 0px }

.vasen2	h4	{ font-family: Arial,sans-serif; font-size: 90%; padding: 10px 10px 5px 10px; margin: 0px }

.vasen2 h6	{ font-family: Arial,sans-serif; font-size: 70%; font-weight: normal; padding: 0px 5px 0px 10px; margin: 0px }

.vasen2 ul	{ font-family: Arial,sans-serif; font-size: 90%; padding: 0px; margin: 5px 5px 10px 25px; list-style-type: disc }

.vasen2 li	{ font-family: Arial,sans-serif; font-size: 90%; font-weight: bold; padding: 0px; margin: 0px 0px 10px 0px }


/* Muotoillaan keskirivin oikeaa solua */

.oikea2		{ background: white; color: black }

.oikea2 a	{ text-decoration: none }


/* Muotoillaan alarivin vasenta solua */

.vasen3		{ background: #6FF2B3; color: black }


/* Muotoillaan alarivin oikeaa solua */

.oikea3		{ background: #37FFFF; color: black }

.oikea3 p	{ padding: 10px 10px 15px 10px; margin: 0px }


}



@media print {

body	{ background: transparent ; color: black }

table	{ width: 100% }

img	{ width: 1px; height: 1px; visibility: hidden }

}


@media handheld {

body	{ background: transparent ; color: black }

table	{ width: auto}

/* 'auto' -arvolla pyydetään kännykkää tai vastaavaa määrittelemään itse sopivimmat leveydet palstoille */

}


/*Sivun tyyliasetuksia on viimeksi muokattu 19.1.2020.*/