@charset "UTF-8"; 

/* Kokotupa Osaamispalvelut -verkkosivuston CSS-tyyliasetukset. Tekijä: Antti Knaapila, Kokotupa Osaamispalvelut. */

/* Charset-sääntö määrittelee käytettävän kirjaimiston. Säännön tulee olla alussa, ennen ensimmäistäkään kirjainta. */ 

/* Komennon "@media screen" kaarisulkeiden välissä annetaan muotoilut sivujen näkymiselle tietokoneen näyttöjen ruuduilla, ja sen jälkeen asetukset, jotka huomioidaan kun näytön koko on pienempi kuin asetettu pikselimäärä. 

Tässä hyödynnetään "media query":ä kertomaan, miten suuri on käytössä oleva näyttö. Ks. lisää: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Näytön koon (ja suunnan) mukaan voidaan myös muuttaa fonttia ja tarvittaessa piilottaa osia näkymästä pienillä näytöillä.

"@media print":in sulkeiden välissä on asetukset, jotka otetaan huomioon sivuja tulostettaessa (näiden vaikutuksen voit tarkistaa sivun tulostuksen esikatselutilassa). 

Tämän sivuston layout on tehty responsiiviseksi (eli mukautumaan automaattisesti erikokoisia näyttöjä käytettäessä) käyttäen "Grid-view":ta ja edellä mainittuja "media query":jä. */


@media screen {

/* SIVUN (body) yleiset muotoilut (näytöille, jotka yli 992 pikseliä). Muotoilut pienille näytöille jäljempänä.

Esimerkiksi:

- background color --> taustaväri
- color --> tekstin väri
- margin --> marginaalia tarpeen mukaan ylös (sivun alkuun), oikealle, alas (sivun loppuun) ja vasemmalle, esimerkiksi jotta sisältö ei olisi avan kiinni selaimen reunassa alaosasta (niin, että sivun pohjaväri näkyy vähän viimeisen elementin alapuolella). 

- box-sizing --> Asetuksella "box-sizing" määritellään, miten elementtien koko lasketaan. Joko "content-box" (oletusarvo) tai "border-box". Jos "border box" niin elementin kokoon lasketaan myös väli elementistä ääriviivaan ("padding") sekä ääriviiva ("border"). Määrittely pitää elementin (esim. laatikon) ulkoisen koon vakiona, vaikka "padding":a tai "border":ia muutetaan. */

/* HUOM. Tähti (*) ulottaa määrittelyt sivun kaikkiin elementteihin. */

* {  box-sizing: border-box; }

body {
  background-color: white;	/* Sivun yleinen taustaväri. */ 
  color: black; 			/* Tekstin oletusväri */
  margin: 0px 2px 0px 0px;	/* Sivun äärimmäisten elementtien marginaalit selaimen reunaan (eli kuinka leveästi näkyy taustaväriä äärimmäisen elementin ja selaimen reunan välissä. */
  
}

/* Kappaleiden ja otsikkojen jne. tekstialueille on hyvä antaa määrittelyt "font-size", "padding" ja margin" (ylös-oikealle-alas-vasemmalle), koska ilman niitä selaimet käyttävät näille oletusarvojaan, jotka saattavat poiketa selaimesta toiseen. */ 

/* KAPPALEIDEN (p, paragraph) leipätekstien muotoilut */

p	{ font-family: Trebuchet MS,sans-serif; font-size: 100%; padding: 10px 30px 10px 40px; margin: 0px }

/* OTSIKOIDEN (h1-h6) yleiset muotoilut. */

h1	{ font-family: Trebuchet MS,sans-serif; font-size: 150%; padding: 10px 30px 10px 40px; margin: 0px }

h2	{ font-family: Trebuchet MS,sans-serif; font-size: 120%; padding: 10px 30px 10px 40px; margin: 0px }

h3	{ font-family: Trebuchet MS,sans-serif; font-size: 110%; padding: 10px 30px 10px 40px; margin: 0px }

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

h4	{ font-family: Trebuchet MS,sans-serif; font-size: 100%; padding: 10px 30px 10px 40px; margin: 0px }

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

h5	{ font-family: Trebuchet MS,sans-serif; font-size: 90%; padding: 10px 30px 10px 40px; margin: 0px }

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

h6	{ font-family: Trebuchet MS,sans-serif; font-size: 80%; padding: 10px 30px 10px 40px; margin: 0px }


/* NUMEROIMATTOMIEN LUETTELOIDEN muotoilut. Marginaalin määrittelyt: ylös-oikealle-alas-vasemmalle */

ul	{ font-family: Trebuchet MS,sans-serif; font-size: 100%; padding: 0px; margin: 10px 60px 10px 60px; list-style-type: disc }

/* NUMEROITUJEN LUETTELOIDEN muotoilut. */

ol	{ font-family: Trebuchet MS,sans-serif; font-size: 100%; padding: 0px; margin: 10px 60px 10px 60px; }

/* Luetteloiden jäsenelementtien (li, list item) muotoilut. Marginaalin määrittelyt (Huom: suhteessa koko luettelon määrittelyihin): ylös-oikealle-alas-vasemmalle. HUOM. "By default, <li> elements are block elements."  */

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

/* POIKKIVIIVOJEN muotoilu. */

hr	{ color: #87A8A1 }

/* KUVIEN yleinen muotoilu. Kuvan leveys ei saa venyä alkuperäistä suuremmaksi, mutta kuvan korkeus saa vaihdella automaattisesti kuvan korkeuden mukaan. */

img { 
  max-width: 100%; 
  height: auto; 
  display: block;
  margin-left: auto;
  margin-right: auto; }

/* Kuvatekstien yleinen muotoilu. */

figcaption { 
  font-family: Trebuchet MS,sans-serif; 
  font-size: 90%; 
  letter-spacing: 1px;
  padding: 0; 
  color: #008080;
  text-align: center }

/* LINKKIEN yleinen muotoilu. Poistetaan oletusarvoinen linkkien alleviivaus. */

a	{ text-decoration: none }




/* Jaetaan gridillä sivut kolmeen sarakkeeseen ja kolmeen riviin (3 x 3 = 9 grid items). Rivejä tulee niin monta kuin tarvitaan "grid-item":eille, jotka tullaan määrittelemään (HTML). */

/* Nimetään "grid item":it (rivi 1 on ylin rivi, rivi 3 alin) tehtävän mukaan, niin jatkossa on helpompi muistaa, mitä missäkin on. Käytetään nimeämiseen "grid-area" -ominaisuutta. */

.item1 { grid-area: rivi1vas; }			/* Rivi 1 */
.item2 { grid-area: linkkipalkki; }
.item3 { grid-area: rivi1oik; }

.item4 { grid-area: rivi2vas; }			/* Rivi 2. */
.item5 { grid-area: leipateksti; }
.item6 { grid-area: rivi2oik; }

.item7 { grid-area: rivi3vas; }			/* Rivi 3. */
.item8 { grid-area: yhteystiedot; }
.item9 { grid-area: rivi3oik; }

/* "Grid container" on "parent element" ja "grid element" on "child element". W3Schools: "Direct child elements of the grid container automatically becomes grid items." */

.grid-container {
  display: grid;	/* Tekee "grid-containerista" block-level grid containerin */
  grid-template-columns: 5% 90% 5%; /* Sarakkeiden lkm ja leveys */
  grid-template-rows: auto auto auto; /* Rivien lkm ja korkeus */
  grid-column-gap: 0;
  grid-row-gap: 0;
  background-color: white; 
  padding: 0px;
}

/* Grid item:ien yhteiset muotoilut. Valitaan elementtien valitsimella (">", CSS element selector) grid-containerin ("parent element") suorat "child element":it muotoiluja varten. Eli muotoillaan kaikkia grid-elementtejä yhteisesti. (Sen jälkeen annetaan erikseen spesifiset muotoilut eri grid elementeille.)  */

.grid-container > div {	

 /* padding: 0px;	*/
  overflow: visible;	/* Täytyy olla "visible", jotta alasvetovalikot näkyvät. */
}

/* Grid item 1. */

.rivi1vas {
  background-color: #008080; /* Teal */
  position: sticky;			/* Linkkipalkki "tarttuu" sivun yläreunaan skrollattaessa. */
  position: -webkit-sticky; 	/* Safari requires a -webkit -prefix */
  top: 0;	/* Ei taustaa näkymään linkkipalkin ja sivun yläreunan välistä. */ 
  background-color: rgba(0, 128, 128, 0.8);
  
 }

/* Grid item 2. Linkkipalkki. Tehdään skrollattaessakin sivun yläosassa pysyvä linkkipalkki "position: sticky" -asetuksella. Asetus tarvitsee myös asemointia varten "top" tai vastaavan astuksen. */

.linkkipalkki {
  text-align: center;
  padding: 10px 0px 0px 0px; /* Lisätään tilaa linkkipalkin ja sivun yläreunan väliin */
  position: sticky;			/* Linkkipalkki "tarttuu" sivun yläreunaan skrollattaessa. */
  position: -webkit-sticky; 	/* Safari requires a -webkit -prefix */
  top: 0;	/* Ei taustaa näkymään linkkipalkin ja sivun yläreunan välistä */ 
  overflow: visible;
  background-color: rgba(0, 128, 128, 0.8); /* Hieman läpikuultava Teal (#008080) RGBA-muodossa. Kolme ensimmäistä arvoa ovat normaalit RGB-arvot. Neljäs on alpha eli läpikuultavuus (0 - täysin näpinäkyvä, 1 - ei lainkaan läpinäkyvä. Vastaa "opacity" asetuksen arvoa. "Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead" */ 

 }


/* Grid item 3. */

.rivi1oik {
  background-color: #008080; /* Teal */
  position: sticky;			/* Linkkipalkki "tarttuu" sivun yläreunaan skrollattaessa */
  position: -webkit-sticky; 	/* Safari requires a -webkit -prefix */
  top: 0;	/* Ei taustaa näkymään linkkipalkin ja sivun yläreunan välistä */ 
  background-color: rgba(0, 128, 128, 0.8);
  
 }

/* Grid item 4. */

.rivi2vas {
  background-color: white;
}

/* Grid item 5. Leipäteksti. */

.leipateksti {
  background-color: white;
  text-align: left;
  max-width: 1000px;		/* Asetetaan maksimileveydeksi 1000 px. */
  margin: auto;				/* Asemoi leipätekstin keskelle sen jälkeen kun 1000 px on ylitetty. */
}
 
 /* Grid item 6. */
 
.rivi2oik {
  background-color: white;
}
 
 /* Grid item 7. */
 
.rivi3vas {
  background-color: #1B2AB3; /* Sininen taustaväriksi. */
 }

/* Grid item 8. Yhteystiedot. */

.yhteystiedot {
  background-color: #1B2AB3;/* Sininen taustaväriksi. */
  color: white;				/* Tekstin väriksi valkoinen */
  text-align: center;		/* Keskitetään teksti. Samalla elementti keskittyy. */
  line-height: 150%;		/* Asetetaan riviväliksi 1,5. */

 }

/* Grid item 9, */

.rivi3oik {
  background-color: #1B2AB3; /* Sininen taustaväriksi. */
}
 

/* Linkkipalkin muotoilut */

.navbar ul {				/* Valitaan kaikki ul elementit navbar:in sisältä. */
  list-style-type: none;	/* Poistetaan pallot listasta */
 
}

.navbar li {
  display: inline;	/* Muutetaan li:n display -muoto inlineksi, jotta kukin linkki ottaisi vain sen tilan jonka tarvitsee, ei koko riviä (joka on li:n oletus) */

}

.navbar li a {
  display: inline;
  text-align: center;
  padding: 8px;	/* Suurennetaan "linkkinappulan" kokoa hieman */
  text-decoration: none;
  font-family: Trebuchet MS,sans-serif; 
  font-size: 110%;
  letter-spacing: 1px;
  color: white;
  background-color: #008080;
  border-radius: 10px; 
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
}

.navbar li a:hover {
  background-color: #37FFFF;
  color: black;
}

.navbar li a.activenavlink {
  background-color: #003C3C;
  color: white;
}

.navbar li a.homelink {  
  margin: 0 5px 0 0;
}

.navbar li a.langlink {  
  background-color: #1B2AB3; 
  margin: 0 0 0 5px;
}
  
.navbar li a.langlink:hover {  
  background-color: #37FFFF; 
  color: black;
}

/* Kontaineri (<div> -elementti) alasvetovalikon linkeille ("The container <div> - needed to position the dropdown content"). */

.dropdown {
  position: relative;	/* The element is positioned relative to its normal position. */
  display: inline-block; /* Sallii elementin koon säätelyn "inline" -asemassa. */
  overflow: visible;
}

/* Alasvetovalikon linkkinappula. Tehdään samat muotoilut kuin muille linkeille. */

.dropbutton {	
  background-color: #008080;
  color: white;
  padding: 8px;
  font-family: Trebuchet MS,sans-serif; 
  font-size: 110%;
  letter-spacing: 1px;
  border-radius: 10px; 
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute; /* "The element is positioned relative to its first positioned (not static) ancestor element." */
  width: auto;
  z-index: 1;	/* TÄRKEÄ! Mahdollistaa alavalikon asettumisen "alla olevan" elementin päälle. "Specifies the stack order of an element." */
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 10px 10px;
  margin: 2px;
  text-decoration: none;
  display: block;
  float: left;
  overflow: visible;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.5);
  z-index: 1; /* TÄRKEÄ! Mahdollistaa alavalikon asettumisen "alla olevan" elementin päälle. "Specifies the stack order of an element." */
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  overflow: visible;
}  

.dropdown:hover .dropbutton {
  background-color: #003C3C;

}
  
#date { padding: 10px 10px 20px 40px; font-size: 90%; }
  
  
}




/* MEDIA QUERY --> Sivuista responsiivisia, eli mukautuvat erikokoisille näytöille. Media Query Syntax: @media not|only mediatype and (expressions) { CSS-Code; } */ 


/* KESKIKOKOISET näytöt: 600-800 pikseliä. */

@media screen and (max-width: 800px) and (min-width: 600px)

{

body { background: transparent ; color: black }

img	{ max-width: 100%; height: auto; }

.rivi1vas { display: none; }
.linkkipalkki { grid-column: 1 / span 3; position: static; }
.rivi1oik { display: none; }

.rivi2vas { display: none; }
.leipateksti { grid-column: 1 / span 3; }
.rivi2oik { display: none; }

.rivi3vas { display: none; }
.yhteystiedot { grid-column: 1 / span 3; }
.rivi3oik { display: none; }

.navbar { display: block; }

.navbar li { display: block; width: 200px; height: 45px; margin: auto; padding: 0; }

.navbar li a { display: block; }

.navbar li a.langlink {  
  margin: auto;
}

.dropbutton {	
  display: block; width: 200px; margin: auto;
} 

.palvelut-dropdown {
  display: block;
}

.palvelut-dropdown-content {
  display: block;
  z-index: 1;
}

.palvelut-dropdown-content a {
  display: block;
}

}


/* PIENET näytöt: Alle 600 pikseliä. */

@media screen and (max-width: 600px)

{

body { background: transparent ; color: black }

img	{ max-width: 100%; height: auto; }

.rivi1vas { display: none; }
.linkkipalkki { grid-column: 1 / span 3; position: static; }
.rivi1oik { display: none; }

.rivi2vas { display: none; }
.leipateksti { grid-column: 1 / span 3; }
.leipateksti h1 { font-size: 140%; padding: 10px; }
.leipateksti h2 { font-size: 110%; padding: 10px; }
.leipateksti h3 { font-size: 100%; padding: 10px; }
.leipateksti h4 { font-size: 90%; padding: 10px; }
.leipateksti p { font-size: 90%; padding: 10px; }
.leipateksti ul	{ font-size: 90%; padding: 0px; margin: 0px 10px 10px 20px; }
.leipateksti ol	{ font-size: 90%; padding: 0px; margin: 0px 10px 10px 30px; }
.leipateksti li { font-size: 90%; padding: 5px; }
.leipateksti figcaption { font-size: 80%; }
.rivi2oik { display: none; }

.rivi3vas { display: none; }
.yhteystiedot { grid-column: 1 / span 3; }
.yhteystiedot p { font-size: 90%; padding: 10px; }
.rivi3oik { display: none; }

.navbar { display: block; }

.navbar li { display: block; width: 200px; height: 45px; margin: auto; padding: 0; }

.navbar li a { display: block; }

.navbar li a.langlink {  
  margin: auto;
}

.dropbutton {	
  display: block; width: 200px; margin: auto;
} 

.palvelut-dropdown {
  display: block;
}

.palvelut-dropdown-content {
  display: block;
  z-index: 1;
}

.palvelut-dropdown-content a {
  display: block;
}


#date { padding: 10px 10px 20px 10px; }

}


/* TULOSTUSASETUKSET. Otetaan huomioon sivuja tulostettaessa. Vaikutuksen voit tarkistaa sivun tulostuksen esikatselutilassa. */

@media print {

body { background: transparent ; color: black }

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

.rivi1vas { display: none; }
.linkkipalkki { grid-column: 1 / span 3; }
.rivi1oik { display: none; }

.rivi2vas { display: none; }
.leipateksti { grid-column: 1 / span 3; }
.rivi2oik { display: none; }

.rivi3vas { display: none; }
.yhteystiedot { grid-column: 1 / span 3; }
.rivi3oik { display: none; }

}

/*Sivuston tyyliasetuksia on viimeksi muokattu 1.3.2020. Antti Knaapila, Kokotupa Osaamispalvelut*/