#kayttotarkoitustaulu tr {
	text-align: center;
        height: 30px;
    }

#kayttotarkoitustaulu .bluegradient {
	background: linear-gradient(#aacfef, #cee0f3);
    }
.bluegradient2 {
	background: linear-gradient(#cee0f3,white);
    }
	
#kayttotarkoitustaulu .orangegradient {
	background: linear-gradient(#f9d6b8, #f6e5d7);
    }
.orangegradient2 {
	background: linear-gradient(#f6e5d7,white);
    }


#kayttotarkoitustaulu .purplegradient {
	background: linear-gradient(#d2a7cd, #d6c4d7);
    }
.purplegradient2 {
	background: linear-gradient(#d6c4d7,white);
    }

#kayttotarkoitustaulu tr:nth-child(odd)   {
         background: white;
    }
	
#kayttotarkoitustaulu .greengradient {
	background: linear-gradient(#a5b466, #dfe7bd);
    }
.greengradient2 {
	background: linear-gradient(#dfe7bd,white);
    }

#kayttotarkoitustaulu tr:nth-child(odd)   {
         background: #d7e9f3;
    }

#kayttotarkoitustaulu tr:nth-child(even)   {
         background: white;
    }
#kayttotarkoitustaulu tr:first-child {
	background: transparent !important;
    }

#kayttotarkoitustaulu th {
	height: 80px;
        width: 20%;
    }

#kayttotarkoitustaulu th: first-child {
        width: 40%;
    }

#kayttotarkoitustaulu th, 
#kayttotarkoitustaulu td {
         border: solid 1px black;
    }


#kayttotarkoitustaulu td:first-child, th:first-child {
        text-align: left !important;
        padding-left: 5px; 
    }

.bluecircle {
      display: inline-block;
      width: 20px;
      height: 20px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
     margin: 0 2px 0 2px;
      background: #53b7ff;
      border: solid 1px black;
    }
.greencircle {
      display: inline-block;
      width: 20px;
      height: 20px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
     margin: 0 2px 0 2px;
      background: #26c926;
      border: solid 1px black;
    }
.ochercircle {
      display: inline-block;
      width: 20px;
      height: 20px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
     margin: 0 2px 0 2px;
      background: #FFCB79;
      border: solid 1px black;
    }
.null {
      display: inline-block;
      width: 20px;
      height: 20px;
     margin: 0 2px 0 2px;
    }

/*kosteus-asteikko*/

#ylaselite::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #afe1f0;
	border-radius: 50%;
	margin-right: 10px;
        vertical-align: middle;
}

#alaselite::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #e0e66f;
	border-radius: 50%;
	margin-right: 10px;
        vertical-align: middle;
}

div#palkki {
    display: block;
    position: absolute;
    width: 20px;
    line-height: calc(14 * 1.8);
    background: linear-gradient(45deg, #E2E66A, #abe1fa);
    border-radius: 10px;
}

#kosteusasteikko li {
    list-style: none;
    margin-left: 5px;
}

#kosteusasteikko li strong::before {
	content: "";
	position: relative;
	margin-left: -30px;
}

ul#kosteusasteikko {
    margin-left: 15px;
}


#kosteusasteikko  li::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background-color: white;
	margin-left: -60px;
	position: absolute;
}

#kosteusasteikko  li:last-child::after {
	content: none; /*ei piirretä viimeistä*/
}