a:link
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: normal;
    color: #042C45;
    text-decoration: underline;
}

a:active
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: normal;
	color: #FF9600;
	text-decoration: underline;
}
a:visited

{
    FONT-FAMILY:  Arial, Verdana, Helvetica;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: normal;
	color: #042C45;
	text-decoration: underline;
}

a:hover
{
    FONT-FAMILY:  Arial, Verdana, Helvetica;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: nomal;
	color: #323200;
	text-decoration: none;
}

H1
{
    FONT-FAMILY:  Arial, Verdana, Helvetica;
    FONT-SIZE: 22pt;
    FONT-WEIGHT: bold;
	COLOR: #000000
}

H2
{
    FONT-FAMILY:  Arial, Verdana, Helvetica;
    FONT-SIZE: 19pt;
    FONT-WEIGHT: bold;
	COLOR: #000000
}

H3
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: bold;
    COLOR: #000000
}

H4
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: bold;
    COLOR: #000000
}

H5
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 7pt;
    FONT-WEIGHT: bold;
    COLOR: #000000
}

H6
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 5pt;
    FONT-WEIGHT: bold;
    COLOR: #000000;
    page-break-before:always;
}

BODY
{
    FONT-FAMILY: Arial, Verdana, Helvetica;
    FONT-SIZE: 10pt;
	COLOR: #000000;
	background: url(/images/tausta.jpg)  no-repeat center center fixed;
	background-color : #C0EEFE;
    background-size: cover;
}

table.hakupalkki
 {
    border: 1px solid #FF9600;
    border-radius: 4px;
  }

/* Ulkoasun asetuksia */
.port_alapalkki
{
    -webkit-border-radius: 25px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius: 25px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-radius: 25px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    border-top:3px solid #ffffff;
    background: url(/images/portaali/bg_bottom.jpg) repeat;
    position: relative;
    width: 99%;
    margin: 0px 0px 0px -2px;
    bottom: -20px;
}

.port_ylapalkki
{
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;
    border-bottom: 3px solid #ffffff;
    background: url(/images/portaali/bg_bottom.jpg) repeat;
    position: relative;
    width: 100%;
    margin: 0px 0px 0px 0px;
    top: -10px;
}
.port_ylapalkki1
{
    box-shadow: 0 0 5px #888;
    border-bottom: 3px solid #ffffff;
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    margin: 0px 0px 0px 0px;
    top: -10px;
}
.main_alue
{
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    border:2px solid #b5b5b5;
    background-color: #ffffff;

}


.etusivunimi {
    FONT-SIZE: 12pt;
    FONT-WEIGHT: bold;
	COLOR: #FFFFFF;
  }
  
.copyright {
    FONT-SIZE: 8pt;
	COLOR: #FFFFFF;
  }

.tausta {
	background-color: #FFFFFF;
  }

.submitbutton {
background-color: #9ac5e4;
color: white;
}

.list_label {
	background: url(/images/css_image/list_label2.gif) repeat-x;
	background-color: #99c8FF;
	display: "";
  }

.bg_lista {
	background: url(/images/css_image/row0.gif) repeat-x;
	background-color: #FFFFFF;

  }

.row0 {
	background: url(/images/css_image/row0.gif) repeat-x;
	background-color: #FFFFFF;
  }

.row1 {
	background: url(/images/css_image/row0.gif) repeat-x;
	background-color: #FFFFFF;
	border-radius: 7px;
  }

.rowselected {
	background: url(/images/css_image/rowselected.gif) repeat-x;
	background-color: #FFc800;
	border-radius: 7px;
  }

.mask_side {
	background-color: #000000;
	background: url(/images/css_image/mask_side.gif) repeat;
  }

.tausta {
	background-color: #000000;
	background: url(/images/css_image/tausta.jpg) no-repeat;
  }

.pk_min {
  background-image: url('/images/css_image/pk_min.gif');
  background-repeat: repeat-x;
  background-color: #beff00;
}
.pk_min_bg {background-color: #beff00;}

.rk_min {
  background-image: url('/images/css_image/rk_min.gif');
  background-repeat: repeat-x;
  background-color: #f4edb2;
}
.rk_min_bg {background-color: #f4edb2;}

.mk_min {
  background-image: url('/images/css_image/mk_min.gif');
  background-repeat: repeat-x;
  background-color: #d78c73;
}
.mk_min_bg {background-color: #d78c73;}

.yhteensa_min {
  background-image: url('/images/css_image/rowselected.gif');
  background-repeat: repeat-x;
  background-color: #FFc800;
}

.kcal {
  background-image: url('/images/css_image/list_label2.gif');
  background-repeat: repeat-x;
  background-color: #99c8FF;
}

/* HUOLTO tyoaika_raportin tulokset */

.tyoaika_tulos
{
    FONT-WEIGHT: BOLD;
    color: #000000;
    text-decoration: none;
}

.tyoaika_tulos_green
{
    FONT-WEIGHT: BOLD;
    color: #259500;
    text-decoration: none;
}

.tyoaika_tulos_yel
{
    FONT-WEIGHT: BOLD;
    color: #bfbf00;
    text-decoration: none;
}

.tyoaika_tulos_red
{
    FONT-WEIGHT: BOLD;
    color: #ff0000;
    text-decoration: none;
}



/*  TEXTAREAN PITUUSVAROITUS  */

div.lengthwarning {
  margin: 2px;
  padding: 2px;
  border: 1px #ff0000 solid;
  background: #ffee99;
}

@media print{
  div.lengthwarning {
    display: none;
  }
}

div.lengthwarning strong {
  font-weight: bold;
  color: #ff0000;
}

div.lengthwarning input {
  overflow: visible;
}


/* ###  LUOKAT  ###################### */

.hidden,
.piilossa {
  display: none;
}

@media print {
  .not_to_print,
  .eipaperille {
    display: none;
  }
}

/*### Painikkeet https://designmodo.com/create-css3-buttons/ */

.painike {
	display: inline-block;
	position: relative;
	margin: 5px;
	padding: 0 15px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255,255,255,.22);
	font: bold 12px/25px Arial, sans-serif;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

	.painike:hover {
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
		box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	}

	.painike:active {
		-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
		-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
		box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	}
/* Big Button Style */

.big {
	padding: 0 40px;
	padding-top: 10px;
	text-transform: uppercase;
	font: bold 20px/22px Arial, sans-serif;
}

.big span {
	display: block;
	text-transform: none;
	font: italic normal 12px/18px Georgia, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}
.leveys100 {
		width:100%;
}
.leveys80 {
		width:80%;
}
.leveys60 {
		width:60%;
}
.leveys40 {
		width:40%;
}
.leveys20 {
		width:20%;
}
.vasen {
	text-align: left;
}

.white {
	color: #000000;

	background: #FFFFFF; /* Old browsers */
	background: -moz-linear-gradient(top,  #FFFFFF 0%, #f3f3f3  100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FFFFFF 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FFFFFF 0%,#f3f3f3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FFFFFF 0%,#f3f3f3 100%); /* IE10+ */
	background: linear-gradient(top,  #FFFFFF 0%,#f3f3f3 100%); /* W3C */
}

.green {
	color: #f1fed6;

	background: #a5cd4e; /* Old browsers */
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
.green-light {
	color: #f1fed6;

	background: #a5cd4e; /* Old browsers */
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #aabd01 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#aabd01)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#aabd01 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a5cd4e 0%,#aabd01 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#aabd01 100%); /* IE10+ */
	background: linear-gradient(top,  #a5cd4e 0%,#aabd01 100%); /* W3C */
}

.yellow {
	color: #5e5b14;

	background: #f8f370; /* Old browsers */
	background: -moz-linear-gradient(top,  #f8f370 0%, #b7b23a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f370), color-stop(100%,#b7b23a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f8f370 0%,#b7b23a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f8f370 0%,#b7b23a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f8f370 0%,#b7b23a 100%); /* IE10+ */
	background: linear-gradient(top,  #f8f370 0%,#b7b23a 100%); /* W3C */
}

.blue {
	color: #19667d;

	background: #c0eeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #c0eeff 0%, #69d1f8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0eeff), color-stop(100%,#69d1f8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #c0eeff 0%,#69d1f8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #c0eeff 0%,#69d1f8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #c0eeff 0%,#69d1f8 100%); /* IE10+ */
	background: linear-gradient(top,  #c0eeff 0%,#69d1f8 100%); /* W3C */
}
.blue-light {
	color: #FFFFFF;

	background: #FFFFFF; /* Old browsers */
	background: -moz-linear-gradient(top,  #FFFFFF 0%, #99FFFF 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#99FFFF)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FFFFFF 0%,#99FFFF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FFFFFF 0%,#99FFFF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FFFFFF 0%,#99FFFF 100%); /* IE10+ */
	background: linear-gradient(top,  #FFFFFF 0%,#99FFFF 100%); /* W3C */
}

.gray {
	color: #515151;

	background: #d3d3d3; /* Old browsers */
	background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
	background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}
.red {
	color: #723131;

	background: #ffb1b1; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffb1b1 0%, #ee5c5c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb1b1), color-stop(100%,#ee5c5c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffb1b1 0%,#ee5c5c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffb1b1 0%,#ee5c5c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffb1b1 0%,#ee5c5c 100%); /* IE10+ */
	background: linear-gradient(top,  #ffb1b1 0%,#ee5c5c 100%); /* W3C */
}
.orange {
	color: #723131;

	background: #FF9600; /* Old browsers */
	background: -moz-linear-gradient(top,  #FF9600 0%, #ffc800 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9600), color-stop(100%,#ffc800)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FF9600 0%,#ffc800 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FF9600 0%,#ffc800 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FF9600 0%,#ffc800 100%); /* IE10+ */
	background: linear-gradient(top,  #FF9600 0%,#ffc800 100%); /* W3C */
}

/* Buttonien asetukset päättyvät */
.painike2 {
	display: inline-block;
	position: relative;
	margin: 5px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255,255,255,.22);
	font: bold 12px/25px Arial, sans-serif;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.whatsapp {
	color:  #FFFFFF;
    text-decoration: none;

	background: #25d366; /* Old browsers */
	background: -moz-linear-gradient(top,  #25d366 0%, #25d366 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25d366), color-stop(100%,#25d366)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #25d366 0%,#25d366 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #25d366 0%,#009245 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #25d366 0%,#25d366 100%); /* IE10+ */
	background: linear-gradient(top,  #25d366 0%,#25d366 100%); /* W3C */
}
a.painike2:link {
	color:#FFFFFF;
	padding: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	font: bold 18px/20px Arial, sans-serif;
	text-align: center;
    text-decoration: none;
}
a.painike2:visited {
	color:#FFFFFF;
	text-decoration: none;
}
a.painike2:hover {color:#FFD700;}

/* Taulukon muodostus lennossa */
.center-left {
  display: grid;
  justify-items: center;
  align-items: center;
}

.width-cl {
  width:   width: 12ch;
}

.title-cl {
  text-align: center;
}
.col-x2 {
  grid-template-columns: repeat(2, 1fr);
}
.col-x3 {
  grid-template-columns: repeat(3, 1fr);
}
.col-x4 {
  grid-template-columns: repeat(4, 1fr);
}
/* Taulukon muodostus lennossa päättyy */