/* Tyylitiedosto XML-dokumentille otukset.xml
   ==========================================

   XML-dokumentilla ei ole oletusulkoasua. Selain ei tiedä, mitä
   elementit tarkoittavat, joten jokaiselle on kerrottava erikseen
   ainakin display-ominaisuus. Ilman sitä kaikki esitetään
   tekstitason elementteinä yhtenä pötkönä.

   Tyylitiedosto liitetään XML-dokumenttiin prosessointiohjeella
   heti dokumentin alussa:

   <?xml-stylesheet type="text/css" href="otukset.css"?>
*/

otuskirja {
  display: block;
  max-width: 42em;
  margin: 1em auto;
  padding: 1em;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #23201c;
  background-color: #fbf7f0;
}

otsikko {
  display: block;
  font-size: 1.9em;
  font-weight: bold;
  color: #7a3b12;
}

alaotsikko {
  display: block;
  font-style: italic;
  color: #5d574e;
  margin-bottom: 1.5em;
}

otus {
  display: block;
  margin-bottom: 1em;
  padding: 0.8em;
  border: 2px solid #7a3b12;
  border-radius: 0.4em;
  background-color: #ffffff;
}

nimi {
  display: block;
  font-size: 1.25em;
  font-weight: bold;
  color: #7a3b12;
}

laji {
  display: block;
  font-style: italic;
  color: #5d574e;
}

kuvaus {
  display: block;
  margin-top: 0.5em;
}

/* Pseudoelementit toimivat XML:ssä samoin kuin HTML:ssä. */

havaintoja {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #5d574e;
}

havaintoja::before {
  content: "Havaintoja: ";
  font-weight: bold;
}

havaintoja::after {
  content: " kpl";
}

/* Attribuuttivalitsin toimii myös XML:ssä. Huomaa, että XML on
   kirjainkoosta riippuvainen: Vaarallisuus ja vaarallisuus ovat
   eri attribuutteja. */

otus[vaarallisuus="suuri"] {
  border-color: #b3261e;
  background-color: #fdf3f1;
}

otus[vaarallisuus="suuri"] nimi::after {
  content: " (varo!)";
  color: #b3261e;
}

otus[vaarallisuus="pieni"] {
  border-color: #1f5c46;
}

/* Attribuutin arvon voi myös tulostaa näkyviin attr()-funktiolla. */

otus::before {
  content: "Vaarallisuus: " attr(vaarallisuus);
  display: block;
  float: right;
  font-size: 0.85em;
  color: #5d574e;
}