H1 {
   font-size : 10pt;
   font-family: arial;
   font-weight: bold;
}

H2 {
   font-size : 10pt;
   font-family: arial;
   font-weight: normal;
}

Body {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9b9ba0+0,f2f4f7+100 */
   background: rgb(234,237,239);
   background: url('../img/backbackground.png'), -moz-radial-gradient(center, ellipse cover,  rgba(234,237,239,1) 0%, rgba(138,178,229,1) 100%);
   background: url('../img/backbackground.png'), -webkit-radial-gradient(center, ellipse cover,  rgba(234,237,239,1) 0%,rgba(138,178,229,1) 100%);
   background: url('../img/backbackground.png'), radial-gradient(ellipse at center,  rgba(234,237,239,1) 0%,rgba(138,178,229,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaedef', endColorstr='#8ab2e5',GradientType=1 );
   font-family: arial;
   font-size: 16px;
}

input {
  box-shadow: none;
  border-radius: none;
  padding: 2px;
}

input.inputText {
  border: solid 1px #cccccc;
  transition: box-shadow 0.3s, border 0.3s;
}

td {
   vertical-align: middle;
}

td.pikkuruutu {
   text-align: center;
   cursor: pointer;
   border-radius:3px;
   box-shadow: 0 1px 7px rgba(0,0,0,.2);
   border-style: solid;
   border-width: 1px;
}

.pikkuruutu:hover {
   opacity: 0.7;
   box-shadow: 0 4px 4px -2px rgba(0,0,0,0);
}

DIV.tuntematon, td.tyhja {
   border-color: #AAAAAA;
   background: rgb(212,212,212);
}

DIV.tunnettu, td.taysi {
   border-color: #39b45c;
   background-color: rgb(136,233,103);
}

DIV.teema, td.vajaa {
   border-color: #0078b6;
   background-color: rgb(140,164,238);
}

DIV.vihje {
   border-color: #cdce43;
   background-color: rgb(232,234,108);
}

DIV.pelikentta {
   width: 800px; 
   height: 600px; 
   background-image: url(../img/background.jpg);
}

DIV.vinkki {
   border-style: double !important;
   border-width: 3px !important;
}  

DIV.sana {
   height: 26px;
   line-height: 26px;
   vertical-align: middle;
   font-family: sans-serif; 
   font-size: 16px;
   padding: 0px 8px 0px 8px;
   white-space:pre;
   overflow:hidden;
   cursor: move;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   border-radius:3px;
   box-shadow: 0 1px 7px rgba(0,0,0,.3);
   position: absolute;
   border-style: solid;
   border-width: 1px;
}

DIV.tyhja {
   font-size : 200pt;
   font-family: arial;
   font-weight: bold;
   color : #DDDDDD;
   text-align: center;
   vertical-align: middle;
   position: relative;
   top: 150px;
}

DIV.index {
   font-size : 10pt;
   font-family: arial;
}

DIV.index_otsikko {
   font-weight: bold;
   font-size : 13pt;
   font-family: arial;
}

DIV.index_iso {
   font-weight: bold;
   color : #777777;
   font-size : 22pt;
   font-family: arial;
}

A {
   color : Gray;
   text-decoration : none;
}

A:Visited {
   color : Gray;
   text-decoration : none;
}

A:Hover {
   text-decoration : none;
   color : Silver;
}

.varjo {
   border: solid 1px #777777;
}

.varjo:before, .varjo:after {
   z-index: -1;
   position: absolute;
   content: "";
   bottom: 18px;
   left: 15px;
   width: 45%;
   top: 80%;
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
   transform: rotate(-3deg);
}

.varjo:after {
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}
.varjo2 {
   border: solid 1px #777777;
}

.varjo2:before, .varjo2:after {
   z-index: -1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 5px;
   width: 45%;
   top: 80%;
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
   transform: rotate(-3deg);
}

.varjo2:after {
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}

td.kyseinen {
   box-shadow: inset 0 0 8px 0px #FF2222;
}
td.aloitus {
   border-radius:20px;
}

SPAN.err {
    border-bottom: dotted #ff0000;
}
