* {
  box-sizing: border-box;
    /* Ei vain ymmärrä... Mutta jostain syystä tämä box-sizing oli edellytys että sisältöjen floattaus oikealta vasemmalle toimii. =>? */
  color: white;
}


/* TÄSTÄ ALKAEN copy-pastettu W3C-tutorista Img-gallerian esimerkkiä */

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
  height: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: auto;
  height: 120px;
/* Seuraavat block-auto-auto copy-pastettu W3C-esimerkistä, miten kuva keskitetään. */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

/* TÄHÄN ASTI copy-pastettu W3C-tutorista Img-gallerian esimerkkiä */

body {
  margin: 0;
  background-color: black;
}

iframe.below-Nav_ifrm {
  width: 100%;
  height: 94vh;
  border: none;
}

iframe.bot_gallery_ifrm {
  width: 100%;
  height: 450px;
  border: none;
}

/* Style the top navigation bar */
.topnav {
  height: 5vh;
  min-height: 40px;
  overflow: hidden;
  background-color: rgb(20 30 50);
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  width: 25%;
  color: lightblue;
  text-align: center;
  padding: 1vh 0px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: black;
  color: white;
}

/* 7.1.2024 Jäi pahanpäiväisesti jumiin, miten iframe:n, tai sen kokoa määrittävän div:n, korkeuden saisi mukautumaan joko sisällön tai näytön mukaan. Sisällön mukaan ok, jos border pois näkyvistä. Näytön mukaan olisi passeli jos jättää borderit näkyviin. 
Mutta ei sitten millään onnistunut!
Pakko laittaa kiinteä mitta (div-"container":lle) ja sitten borderi piiloon ettei liikaa näy mihin mitta on asetettu. Kiinteä mitta pitää arvata olemaan vähän isompi kuin sisältö. Tämä menettely vesittää tavoitteen, koska iframe:een haluttaisi lähettää eri korkuisia sisältöjä.
9.2.2024 Lopulta näytön mukaan sai toimiaan "vh"-yksiköissä (viewport height 1%). Nyt NavBarin alle jäävä iframe on näytön koon mukaan. Gallerian ala-gallerian korkeus on edelleen kiinteä, mutta sen suhteen ei ole niin selvää mikä olisi parempi. Kun ylägalleria muuttaa korkeuttaan, ei ole selvää miten alempi määriteltäisiin sopivaksi.
*/


/* 7.1.2024 päivän päätteeksi: 
Tarkemmin ajatellen, tämä kahden (tai kolmenkaan, mitä tulikin jo välillä kokeiltua) floattailevan sarakkeen layout ei voi palvella exhib-galleriaa. Tämä float-sarakkeiden rakenne täytetään riveittäin: Ei sovellu!
Exhib-galleria pitää rakentaa enemmän puhtaalta pöydältä. Tehtävä ihan erillinen galleria-sivu, jollain uudella rakenteella. Sen voipi sitten törkätä päärakenteen iframeen (toivottavasti).
*/



/* Create TWO unequal columns that floats next to each other */
.column {
  float: right;
  padding: 10px;
}

/* 1st column (rhs) */
.column.right {
  width: 75%;
}

/* 2nd column (lhs) */
.column.left {
  width: 25%;
  overflow: hidden;
}

/* Clear floats after the columns */
/* Alustavasti (5Jan2024), tälle ei ole käyttöä, koska ei ole tarkoitus laittaa mitään footeriakaan */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the (three? or two?) columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.right, .column.left {
    width: 100%;
  }
}

/* Alustavasti (5Jan2024), tälle ei ole käyttöä, koska ei ole tarkoitus laittaa mitään footeria */
/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}