* {
  font-family: Verdana;
}

body {
  margin-left: 50px;
  background-color: #eee;
}

img {
  z-index: 0;
}

label {
  z-index: 10;
}

.virheViesti {
  padding: 5px;
  color: #000;
  background-color: #fa8072;
  border: 1px solid;
  border-color: #f00;
  border-radius: 5px;
}

.etusivuTeksti {
  float: left;
}

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

.osio1 {
  color: #A9A9A9;
  text-shadow: 1px 1px #000;
}

.osio2 {
  /*color: #FFD700;*/

  color: #dcab00;
  text-shadow: 1px 1px #000;
}

.osio3 {
  color: #f00;
  text-shadow: 1px 1px #000;
}

.osio4 {
  color: #00f;
  text-shadow: 1px 1px #000;
}

#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;
  margin: 0;
  color: #e04e12;
  text-align: center;
  text-shadow: 1px 1px #000;
  background-color: #ddd;
  border-radius: 10px;
}

.tarkistaPainike {
  padding: 5px;
  margin-top: 20px;
  font-size: 12pt;
  font-weight: 700;
}

.yhteensopivuusIlmoitus {
  width: 70%;
  padding: 8px;
  background-color: #EEEEEE;
  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 10px 10px 0;
  text-decoration: none;
  background-color: #fff;
  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-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 20pt;
  font-weight: 700;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid;
  border-color: #000;
  border-radius: 0;
}

/*
.osioLinkki:hover {
    border: 4px solid;
    border-color: #000;
    margin-right: 7px;
    margin-bottom: 7px;
    margin-top: 7px;
    margin-left: -3px;
}
*/

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

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

.osioYhteenvetoOtsikko {
  text-align: center;
}

.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: #fff;
  border: 1px solid;
  border-radius: 0;
}

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

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

.tehtavaSisalto {
  position: relative;
  float: left;
}

.tehtavaKuva {
  position: relative;
  float: left;
  margin-left: 10px;
}

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;
}

.vastausOikeinVaarinTaulukkoHorisontaalinen {
  margin: 0 auto;
}


.vastausOikeinVaarin {
  width: 90px;
  padding: 5px;
  margin: 5px;
  text-align: center;
  background-color: #fff;
  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;
}

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

.vastausOikeaVaiteOikein {
  background-color: #90EE90 !important;
}

.vastausOikeaVaiteVaarin {
  background-color: #FA8072 !important;
}

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

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

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

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

.kirjaimetOikeaJarjestysKirjainKaytetty {
  background-color: #999;
}

.kirjaimetOikeaJarjestysLahtoKehikko {
  padding: 5px;
  background-color: #fff;
  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 5px 5px 0;
  text-align: center;
  background-color: #fff;
  border: 1px solid;
  border-radius: 10px;
}

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

.raahaaLaatikkoonVastaus {
  width: 200px;
  padding: 5px;
  margin: 5px 5px 5px 0;
  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;
}

.oikeaJarjestysVastausKehikko img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.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;
}

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

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

.oikeaJarjestysVastausKehikkoKuvausVertikaalinen {
  width: 210px;
  padding: 5px;
  background-color: #fff;
  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;
}

.oikeaJarjestysVastausKehikkoElementtiVertikaalinen {
  width: 220px;
  height: 100px;
  padding: 0;
  background-color: #fff;
  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;
  background-color: #fff;
  border-radius: 10px;
}

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

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

.oikeaJarjestysVastausVaarin {
  background-color: #FA8072;
}

.oikeaJarjestysOikeaVastaus {
  padding-top: 20px;
}

.raahaaPuuttuvaVastausKehikko {
  margin-top: 40px;
  margin-bottom: 20px;
}

.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;
  background-color: #fff;
  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;
}

.kuvaValintaKuvat {
  position: relative;
  display: inline-block;
  float: left;
  height: auto;
  margin-right: 20px;
}

.kuvaValintaKuvaKehikko {
  position: relative;
}

.kuvaValintaTehtavakuva {
  position: relative;
}

.kuvaValintaVastaus {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.kuvaValintaVastausTarkistus {
  position: absolute;
  top: 0;
  left: 0;
}

.kuvaValintaVastaukset {
  float: left;
}

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

.kuvaValintaOikeaVastausKehikko {
  margin-top: 40px;
}

.avoinKysymysKuva {
  margin-bottom: 20px;
}

.oikeaJarjestysVastausKehikko7 img {
  display: block;
  height: 250px;
  margin-right: auto;
  margin-left: auto;
}

.oikeaJarjestysVastausElementti3 {
  clear: both;
}