body {
  font-family: Arial;
  font-color:#303030;
}
.nappi {
  width:140px;
  height:85px;
  border-radius:8px;
  background-color:#80b6ff;
  border-color:#505050;
  font-size:16px;
}
.nappi:hover {
  width:140px;
  height:85px;
  border-radius:8px;
  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 10px 0 rgba(0,0,0,0.19);
  background-color:#6096df;
  cursor:pointer;
}
.nappioikein {
  width:140px;
  height:85px;
  border-radius:8px;
  background-color:#60df96;
  border-color:#505050;
  font-size:16px;
}
.nappivaarin {
  width:140px;
  height:85px;
  border-radius:8px;
  background-color:#ff6650;
  border-color:#505050;
  font-size:16px;
}

.next {
  border-radius:8px;
  background-color:#80b6ff;
  border-color:#505050;
  font-size:16px;
  margin-left:30px;
  cursor:pointer;
}

nappi:active, nappi:focus, next:active, next:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
#before, #next {
  cursor: pointer;
}
#lukualue {
   z-index:1;
}
.kuva {
   border:1px solid #555; 
   padding:4px;
   z-index:3;
}
.text {
   margin-left:10px;
   margin-top:-0px;
   width:688px;
   padding:1px;
   z-index:10;
   color:#333;
   font-weight:bold;
}
#pist {
   margin-top:50px;
}
#tehtavaosio {
 xborder:solid #000 2px;
 width:700px;
 margin-top:20px;
 margin-left:35px;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.kulmio {
   position: absolute;
   top: 50px;
   left: 270px;
   -webkit-animation:spin 10s linear infinite;
   -moz-animation:spin 10s linear infinite;
   animation:spin 10s linear infinite;
}
#a1, #a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9, #a10, #a11, #a12,
#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10, #b11, #b12,
#c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8, #c9, #c10, #c11, #c12,
#d1, #d2, #d3, #d4, #d5, #d6, #d7, #d8, #d9, #d10, #d11, #d12,
#e1, #e2, #e3, #e4, #e5, #e6, #e7, #e8, #e9, #e10, #e11, #e12 {
   border: solid #ddd 5px;
}
#a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover, #a6:hover, #a7:hover, #a8:hover, #a9:hover, #a10:hover, #a11:hover, #a12:hover,
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, #b6:hover, #b7:hover, #b8:hover, #b9:hover, #b10:hover, #b11:hover, #b12:hover,
#c1:hover, #c2:hover, #c3:hover, #c4:hover, #c5:hover, #c6:hover, #c7:hover, #c8:hover, #c9:hover, #c10:hover, #c11:hover, #c12:hover,
#d1:hover, #d2:hover, #d3:hover, #d4:hover, #d5:hover, #d6:hover, #d7:hover, #d8:hover, #d9:hover, #d10:hover, #d11:hover, #d12:hover,
#e1:hover, #e2:hover, #e3:hover, #e4:hover, #e5:hover, #e6:hover, #e7:hover, #e8:hover, #e9:hover, #e10:hover, #e11:hover, #e12:hover {
   border: solid #88c 5px;
}