@charset "utf-8";
@import url("http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic");
/* CSS Document */

body {
background: #b5c6d0; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f6f8 0%, #b5c6d0 0%, #d8e1e7 28%, #e0eff9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(0%,#b5c6d0), color-stop(28%,#d8e1e7), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f6f8 0%,#b5c6d0 0%,#d8e1e7 28%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f6f8 0%,#b5c6d0 0%,#d8e1e7 28%,#e0eff9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f6f8 0%,#b5c6d0 0%,#d8e1e7 28%,#e0eff9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f6f8 0%,#b5c6d0 0%,#d8e1e7 28%,#e0eff9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
font-family: 'Roboto', sans-serif;
}

a:link, a:visited {
	text-decoration:none;
	border: 0;
}
a:hover,a:active 
{
	text-decoration:none;
	border: 0;
}


.container {
		height: 100%;
		width: 100%;
}

h1 {
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		font-size: 28pt;		
		margin-left: 40px;	
}

th {
		font-weight: 300;
		font-size: 17pt;	
	
}

table {
	margin: 40px;	
	background-color: #fff;
	font-size: 11pt;
}

.hallitukset {
	font-size: 10pt;	
	letter-spacing: -1px;
}

div {
	width: 60px;
	text-align: center;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 13pt;
		line-height: 1.75em;
		color: #fff;
		text-shadow: 1px 1px 9px rgba(1,1,1,0.35);
		cursor: help;
}

div:hover {
-webkit-box-shadow: 3px 3px 15px 5px rgba(15,15,15,0.3);
box-shadow: 3px 3px 15px 5px rgba(15,15,15,0.3);
border: 1px solid rgba(255,255,255,0.9);
margin: -1px;
}

.sdp {
	background-color: #d12424;	
	color: #fff;

}
.sdp2 {
	background-color: #ae1414;
}
.sdp2:hover .tooltiptext {
    visibility: visible;
}

.kepu {
	background-color: #2f6c3e;	
	color: #fff;
}
.kok {
	background-color: #004f7c;	
	color: #fff;
}
.kok:hover .tooltiptext {
    visibility: visible;
}

.lib {
	background-color: #d5cb61;	
}
.lib:hover .tooltiptext {
    visibility: visible;
}


.rkp {
	background-color: #e1dc92;	
}
.rkp:hover .tooltiptext {
    visibility: visible;
}

.rkp2 {
	background-color: #9d9525;	
}
.rkp2:hover .tooltiptext {
    visibility: visible;
}

.kd {
	background-color: #5b7d88;	
}
.kd:hover .tooltiptext {
    visibility: visible;
}

.ps {
	background-color: #6bbad4;	
}
.ps:hover .tooltiptext {
    visibility: visible;
}

.ps2 {
	background-color: #609aac;	
}
.ps2:hover .tooltiptext {
    visibility: visible;
}

.ps3 {
	background-color: #ffd800;	
}
.ps3:hover .tooltiptext {
    visibility: visible;
}


.ikl {
	background-color: #131313;	
	color: #fff;
}
.ikl:hover .tooltiptext {
    visibility: visible;
}

.vihr {
	background-color: #8fdc5c;	
}
.vihr:hover .tooltiptext {
    visibility: visible;
}

.muut {
	background-color: #c6c6c6;
}
.muut:hover .tooltiptext {
    visibility: visible;
}

.kom {
	background-color: #981010;
}
.kom:hover .tooltiptext {
    visibility: visible;
}

.selitys {
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}
.vaara {
background: #febbbb; /* Old browsers */
background: -moz-linear-gradient(top,  #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(45%,#fe9090), color-stop(100%,#ff5c5c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */
}
.eu {
background: #deefff; /* Old browsers */
background: -moz-linear-gradient(top,  #deefff 0%, #98bede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #deefff 0%,#98bede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #deefff 0%,#98bede 100%); /* IE10+ */
background: linear-gradient(to bottom,  #deefff 0%,#98bede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
}
.multa {
background: #e4efc0; /* Old browsers */
background: -moz-linear-gradient(top,  #e4efc0 0%, #abbd73 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4efc0), color-stop(100%,#abbd73)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e4efc0 0%,#abbd73 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e4efc0 0%,#abbd73 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e4efc0 0%,#abbd73 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4efc0', endColorstr='#abbd73',GradientType=0 ); /* IE6-9 */
}
.punamulta {
background: #c8dba6; /* Old browsers */
background: -moz-linear-gradient(top,  #c8dba6 0%, #cbd8a4 27%, #d97467 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8dba6), color-stop(27%,#cbd8a4), color-stop(100%,#d97467)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c8dba6 0%,#cbd8a4 27%,#d97467 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c8dba6 0%,#cbd8a4 27%,#d97467 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c8dba6 0%,#cbd8a4 27%,#d97467 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c8dba6 0%,#cbd8a4 27%,#d97467 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8dba6', endColorstr='#d97467',GradientType=0 ); /* IE6-9 */
}
.sota {
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
color: #fff;	
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 1px;
	font-size: 13px;
 
    /* Position the tooltip text */
    position: relative;
    z-index: 1;
	left: 105%;
	top: 5px;
}


/* Show the tooltip text when you mouse over the tooltip container */
.sdp:hover .tooltiptext {
    visibility: visible;
}
.kepu:hover .tooltiptext {
    visibility: visible;
}


.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}