* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  margin: 2vw;
}

img {
  z-index: 0;
}

label {
  z-index: 10;
}

.etusivuTeksti {
  float: left;
}

.etusivuKuva {
  float: left;
}

#etusivuTarkistusIkkunaTausta {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .75;
}

#etusivuTarkistusIkkunaLataus {
  position: fixed;
  top: 100px;
  right: 0;
  left: 0;
  z-index: 25;
  display: none;
  width: 800px;
  height: 200px;
  padding: 10px;
  padding-top: 100px;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  font-size: 18pt;
  text-align: center;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

#etusivuTarkistusIkkuna {
  position: fixed;
  top: 100px;
  right: 0;
  left: 0;
  z-index: 25;
  display: none;
  width: 800px;
  padding: 10px;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

.etusivuPaaotsikko {
  width: 400px;
  color: #e04e12;
  text-align: center;
  background-color: #ddd;
  border-radius: 10px;
}

.tarkistaPainike {
  padding: 5px;
  font-size: 12pt;
  font-weight: bold;
}

.yhteensopivuusIlmoitus {
  width: 70%;
  padding: 8px;
  background-color: #eee;
  border: 5px solid;
  border-color: #f00;
}


.naviPlaceholder {
  display: inline-block;
  width: 210px;
  padding: 10px;
  margin: 11px;
}

.navi {
  display: inline-block;
  width: 210px;
  padding: 5px;
  margin: 10px;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 0;
  box-sizing: border-box;
}

.navi:hover {
  outline: 3px solid #000;
}

.navi img {
  text-decoration: none;
  vertical-align: middle;
  border: none;
}

.naviSeuraavaTehtava {
  margin-left: 100px;
}

.naviSeuraavaTehtava:hover {
  margin-left: 99px;
}

.naviYhteenveto {
  width: 450px;
}

.osioLinkki {
  float: left;
  width: 360px;
  height: 100px;
  padding: 15px;
  margin: 10px;
  border: 1px solid;
  border-color: #000;
  border-radius: 0;
}

/*
.osioLinkki:hover {
  margin: 7px;
  border: 4px solid;
  border-color: #000;
}
*/

.osioLinkki:hover {
  outline: 3px solid #000;
}

.osioLinkki img {
  text-decoration: none;
  border: none;
}

.osioYhteenvetoPisteet {
  max-width: 800px;
  padding: 5px;
  border: 3px solid;
  border-radius: 10px;
}

.osioYhteenvetoKysymys {
  padding: 5px;
  margin-bottom: 30px;
  clear: both;
  border-bottom: 1px solid;
}

textarea {
  width: 400px;
  height: 200px;
}

.kysymysKuva {
  float: left;
}

.kysymysVaihe {
  float: left;
  width: 20px;
  padding: 5px;
  padding-top: 7px;
  margin: 5px;
  text-align: center;
  background-color: #eee;
  border: 1px solid;
  border-radius: 0;
}

.kysymysVaiheAktiivinen {
  position: relative;
  top: -2px;
  bottom: 2px;
  width: 28px;
  height: 25px;
  margin: 3px;
  font-size: 15pt;
  font-weight: bold;
  background-color: #95a8de;
  border: 3px solid;
}

.kysymysVaiheEdelliset {
  margin: 3px;
  background-color: #999;
  border: 3px solid;
}

.tehtavaSisalto {
  float: left;
}

.tehtavaKuva {
  float: left;
}

/*
input.vastausOikeinVaarinRadio {
  display: none;
}
*/

.oikeinVaarinSisalto5 {
  max-width: 800px;
}

.oikeinVaarinHorisontaalinen {
  text-align: center;
}

.oikeinVaarin5 {
  float: left;
  width: 360px;
  height: 300px;
  padding: 5px;
  margin: 5px;
  border: 1px solid;
  border-radius: 10px;
}

.oikeinVaarinVastausTekstiHorisontaalinen {
  clear: both;
}

.oikeinVaarinVastausTekstiHorisontaalinen5 {
  height: 230px;
}

.vastausOikeinVaarinTaulukkoHorisontaalinen {
  margin: 0 auto;
}


.vastausOikeinVaarin {
  width: 90px;
  padding: 5px;
  margin: 5px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
}

.vastausOikeinVaarin:hover {
  cursor: pointer;
}

.vastausOikeinVaarin input {
  display: none;
}

.vastausOikeinVaarinValittu {
  background-color: #95a8de;
}

.vastausOikeinVaarinKorosta {
  margin: 3px;
  border: 3px solid;
}

.vastausOikeinVaarinVaarinLabelOikein {
  background-color: #90ee90;
}

.vastausOikeinVaarinVaarinLabelVaarin {
  background-color: #fa8072;
}

tr.oikeinVaarinRivi5 td:first-child {
  padding: 5px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
}

span.taytaPuuttuvaVastaus {
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 10px;
}

span.taytaPuuttuvaOikein {
  background-color: #90ee90;
}

span.taytaPuuttuvaVaarin {
  background-color: #fa8072;
}

.oikeaVaiteSisalto3 {
  max-width: 800px;
}

.oikeaVaiteSisalto5 {
  max-width: 850px;
}

.oikeaVaiteSisalto17 {
  max-width: 850px;
}

.vastausOikeaVaite {
  width: 600px;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  border: 1px solid;
  border-radius: 10px;
}

.vastausOikeaVaiteOikein {
  background-color: #90ee90;
}

.vastausOikeaVaiteVaarin {
  background-color: #fa8072;
}

.vastausOikeaVaiteKorosta {
  margin: 3px;
  border: 3px solid;
}

.vastausOikeaVaite3 {
  float: left;
  width: 200px;
  height: 365px;
  text-align: center;
}

.vastausOikeaVaite5 {
  float: left;
  width: 400px;
  height: 250px;
  text-align: center;
}

.vastausOikeaVaite17 {
  float: left;
  width: 400px;
  height: 335px;
}

.vastausOikeaVaiteTeksti17 {
  margin-left: 25px;
}

.vastausOikeaVaiteValittu {
  background-color: #95a8de;
}

.vastausOikeaVaiteMielipide {
  background-color: #95a8de;
}

.kirjaimetOikeaJarjestysKirjain {
  padding: 5px;
  margin: 0;
  text-align: center;
}

.kirjaimetOikeaJarjestysKirjainKaytetty {
  background-color: #999;
}

.kirjaimetOikeaJarjestysLahtoKehikko {
  padding: 5px;
  border: 1px solid;
}


.vastausKirjaimetOikeaJarjestys {
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 10px;
}

.vastausKirjaimetOikeaJarjestysOikein {
  background-color: #90ee90;
}

.vastausKirjaimetOikeaJarjestysVaarin {
  background-color: #fa8072;
}

#raahaaLaatikkoonLaatikot {
  float: left;
  width: 250px;
}

#raahaaLaatikkoonVastaukset {
  float: left;
  width: 250px;
}

#raahaaLaatikkoonLaatikotOikeaVastaus {
  float: left;
  width: 250px;
  margin-left: 100px;
}

.raahaaLaatikkoonLaatikko {
  float: left;
  width: 300px;
  padding: 5px;
  padding-bottom: 30px;
  margin: 5px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
}

.raahaaLaatikkoonLaatikkoVastattu {
  float: left;
  width: 300px;
  padding: 5px;
  margin: 5px;
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
}

.raahaaLaatikkoonVastaus {
  width: 200px;
  padding: 5px;
  margin: 5px;
  cursor: move;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

.raahaaLaatikkoonVastausOikein {
  background-color: #90ee90;
}

.raahaaLaatikkoonVastausVaarin {
  background-color: #fa8072;
}

.raahaaLaatikkoonLaatikkoKorosta {
  background-color: #75b6ff;
}


.oikeaJarjestysVastausKehikko {
  clear: left;
}

.oikeaJarjestysVastausVaihtoehdot3 {
  float: left;
  width: 300px;
  clear: none;
}

.oikeaJarjestysVastausKehikko3 {
  float: left;
  clear: none !important;
}

.oikeaJarjestysVastausVaihtoehdot4 {
  float: left;
  width: 300px;
  clear: none;
}

.oikeaJarjestysVastausKehikko4 {
  float: left;
  clear: none;
}

.oikeaJarjestysVastausVaihtoehdot7 {
  float: left;
  width: 300px;
  clear: none;
}

.oikeaJarjestysVastausKehikko7 {
  float: left;
  clear: none;
}

.oikeaJarjestysVastausVaihtoehdot9 {
  float: left;
  width: 300px;
  clear: none;
}

.oikeaJarjestysVastausKehikko9 {
  float: left;
  clear: none !important;
}

.oikeaJarjestysVastausVaihtoehto {
  width: 210px;
  padding: 5px;
  margin: 0;
  cursor: move;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

.oikeaJarjestysVastausVaihtoehtoKehikko {
  float: left;
  width: 250px;
  min-height: 1px;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}

.oikeaJarjestysVastausVaihtoehtoKehikko3 {
  float: none;
}

.oikeaJarjestysVastausVaihtoehtoKehikko4 {
  float: none;
}

.oikeaJarjestysVastausVaihtoehtoKehikko7 {
  float: none;
}

.oikeaJarjestysVastausVaihtoehtoKehikko9 {
  float: none;
}

.oikeaJarjestysVastausElementtiVertikaalinen {
  float: left;
  width: 250px;
  margin-top: 10px;
}

.oikeaJarjestysVastausElementtiHorisontaalinen {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
}

.oikeaJarjestysVastausElementti3 {
  float: none;
}

.oikeaJarjestysVastausElementti4 {
  float: none;
  margin-top: 0;
  margin-bottom: 10px;
}

.oikeaJarjestysVastausElementti7 {
  float: none;
  margin-top: 0;
  margin-bottom: 10px;
}

.oikeaJarjestysVastausElementti9 {
  float: none;
  margin-top: 0;
  margin-bottom: 10px;
}

.oikeaJarjestysVastausKehikkoElementtiHorisontaalinen7 {
  float: none;
  margin-top: 0;
  margin-bottom: 10px;
}

.oikeaJarjestysVastausKehikkoKuvausVertikaalinen {
  width: 210px;
  padding: 5px;
  border: 1px solid;
  border-radius: 0 0 10px 10px;
}

.oikeaJarjestysVastausKehikkoKuvausHorisontaalinen {
  float: left;
  height: 100px;
  padding: 5px;
}

.vastausPisteTeksti {
  margin: 2px;
  color: #888;
  text-align: center;
  border: 2px dashed;
  border-radius: 10px;
}

.vastausPisteTeksti8 {
  height: 125px;
  padding-top: 125px;
}

.oikeaJarjestysVastausKehikkoElementtiVertikaalinen {
  width: 220px;
  height: 100px;
  padding: 0;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-radius: 10px 10px 0 0;
}

.oikeaJarjestysVastausKehikkoElementtiHorisontaalinen {
  float: left;
  width: 220px;
  height: 300px;
  padding: 0;
  border-radius: 10px;
}

.oikeaJarjestysVastausKehikkoElementti8 {
  height: 260px;
  border-radius: 10px;
}

.oikeaJarjestysVastausKehikkoElementtiHorisontaalinen8 {
  height: 260px;
  border-radius: 10px;
}

.oikeaJarjestysVastausKehikkoKuvausHorisontaalinen8 {
  height: 250px;
}

.oikeaJarjestysVastausVaihtoehto8 {
  height: 250px;
}

/*
.oikeaJarjestysVastausKehikkoElementti1 {
    height: 80px;
}
*/

.oikeaJarjestysVastausKehikkoElementtiKorosta {
  background-color: #75b6ff;
}

.oikeaJarjestysVastausOikein {
  background-color: #90ee90;
}

.oikeaJarjestysVastausVaarin {
  background-color: #fa8072;
}

.raahaaPuuttuvaLauselista {
  position: relative;
}


.raahaaPuuttuvaLause {
  float: left;
  padding: 5px;
  margin: 5px;
  cursor: move;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

.raahaaPuuttuvaLauseOikein {
  background-color: #90ee90;
}

.raahaaPuuttuvaLauseVaarin {
  background-color: #fa8072;
}

.raahaaPuuttuvaVastausPiste {
  display: inline-block;
  width: 30px;
  padding: 4px;
  border: 2px dashed;
  border-color: #888;
  border-radius: 10px;
}

.raahaaPuuttuvaVastausPisteTeksti {
  display: inline-block;
  color: #888;
  text-align: center;
  background: none;
}

.raahaaPuuttuvaVastausPisteKorosta {
  background-color: #75b6ff;
}

.raahaaPuuttuvaLauseTarkistus {
  display: inline-block;
  padding: 5px;
  border: 1px solid;
  border-radius: 10px;
}