/*
  SIVUN YLEISET ASETUKSET
  Tämä vaikuttaa koko sivuun: taustaväri, fontti, marginaalit ja sivun minimikorkeus.
*/
body {

  direction: ltr;
  min-height: 901px;
  margin: 0;
  background-color: #EDDAFA;
  font-family: "Elms Sans", Arial, sans-serif;
}

/*
  VASEN SIVUPALKKI
  Tämä tekee sivupalkista kiinteän vasempaan reunaan.
  width: 200px määrää sivupalkin leveyden.
  background-color määrää violetin taustavärin.
*/
.sidenav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  padding-top: 20px;
  overflow-x: hidden;
  background-color: #CFB4E1;
  text-align: center;
}

/*
  SIVUPALKIN LINKIT
  Tämä määrittää linkkien koon, välin ja sen, ettei linkeissä näy alleviivausta.
*/
.sidenav a {
  display: block;
  padding: 6px;
  color: #818181;
  font-size: 25px;
  text-decoration: none;
}

/*
  SIVUPALKIN KUVAT
  Tämä keskittää kaikki sivupalkin kuvat.
*/
.sidenav img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/*
  OIKEA SIVUPALKKI
  Tämä tekee oikeaan reunaan kiinteän sivupalkin.
  Ei sisällä nappeja, vain taustavärialueen.
*/
.right-sidebar {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #CFB4E1;
}

/*
  PÄÄSISÄLTÖALUE
  margin-left: 200px siirtää sisällön sivupalkin oikealle puolelle.
  Jos sivupalkin leveys muuttuu, tämä arvo pitää yleensä muuttaa samaan leveyteen.
*/
.main {
  margin-left: 200px;
  margin-right: 200px;
  padding-top: 40px;
}

/*
  YLÄBANNERI
  Tämä keskittää bannerikuvan ja tekee siitä 50 % sivun leveydestä.
*/
.page-banner {
  display: block;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  vertical-align: middle;
}

/*
  SISÄLTÖALUEEN KEHYS
  Tämä alue sisältää valkoisen tekstilaatikon.
*/
.container {
  position: relative;
  margin-top: 40px;
  
}

/*
  VALKOINEN TEKSTILAATIKKO
  Tämä levittää tekstilaatikon koko pääsisältöalueen levyiseksi.
  width: 100% täyttää sivupalkin oikealle puolelle jäävän alueen.
  box-sizing: border-box varmistaa, että padding ei levennä laatikkoa yli ruudun.
*/
.text-block {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 30px 100px;
  background-color: white;
  color: black;
  text-align: center;
}

/*
  MATALAN NÄYTÖN KORJAUS
  Jos ruutu on todella matala, sivupalkin välejä ja linkkitekstin kokoa pienennetään.
*/
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

/*
  MOBIILINÄKYMÄ / KAPEAT RUUDUT
  Kun ruutu on alle 700px leveä, sivupalkki ei jää vasempaan reunaan,
  vaan siirtyy normaaliksi yläpalkkimaiseksi alueeksi sisällön yläpuolelle.
*/
@media screen and (max-width: 700px) {
  .sidenav {
    position: static;
    width: 100%;
    height: auto;
    padding-top: 10px;
  }

  .main {
    margin-left: 0;
    padding-top: 20px;
  }

  .page-banner {
    width: 90%;
  }

  .text-block {
    padding: 20px;
  }
}