:root{
    --tausta: #014778;
    --tausta2: #002F50;
	--lomake: white; 
    --pohjavari: white;
	--kehys: navy;
	--painike: #0693E3;
    

    --tekstivari-perus: black;
    --tekstivari-korostus: #0693E3;
    --tekstivari-kaanteinen: white;
    --tekstivari-paaotsake: navy;
    
	--fontsize: 17px;
	--varjo: #ccc;
    
}

body{
	font-family: Arial;
    font-size: 16px;
	line-height: 1;	
	margin: 0px;
	padding: 0px;
	background-color: var(--tausta);
	#background-attachment: fixed;
}
p{
	color: #AAA;
    padding:0;
    font-size:14px;
    
}
p.label{
    font-size:12px;
    color:gray;
    text-align: left;
    padding:2;
    margin:0 20 0 0;
    display:inline-block;
}
p.selite{
	color: #555555;
    padding:0px;
    margin:0px;
    font-size:13px;
	
}

form {
    display: inline;
}

a{
	color: gray;
	text-decoration: none;
    display: inline-block;
    text-align:left;
    margin: 10 10 10 20;
}
a:hover {
	color: red;
	text-decoration: none;
}

iframe{
    border: none; 
}
canvas{
	width:auto;	
}

h0{
 font-family: Arial;
 font-size: 35px;
 color: #3b427c;
 padding: 10px;
 margin: 0 0 0 0;
 display:block;
 text-align: center;
 line-height: 40px;
 

}
h1{
 font-family: Calibri;
 font-weight: normal;
 font-size: 35px;
 color: #DDD;
 padding: 0;
 margin: 10 0 10 0;
	
}
h2{
 font-family: Arial;
 font-weight: normal;
 font-size: 100%;
 color: #3366CC;
 padding: 0px;
 margin: 20 0 10 0;
 width: -webkit-fill-available;
 border-bottom: 1px solid #CCC;
}
h3{
 font-family: Arial;
 font-size: 14px;
 color: #444;
 padding: 0px;
 margin: 10 0 10 10;
}

div.palikka{
	text-align:center; 
	#flex: 1; 
	padding: 20; 
	margin: 20; 
	border-style: groove; 
	border-width:0px; 
    border-radius: 20px;
	box-shadow: 0 0 200px #888;
	max-width: 800px;
	background-color: var(--tausta2);
}
div.laatikkokehys{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  margin: 0; /* Poistaa selaimen oletusmarginaalit */
}

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  right: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  margin:0px;
}
.overlay-content {
  position: relative;
  top: 20%; /* 20% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 30px;
  color: #BBB;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 60px;
}
span.input{
	padding: 5px;
}
span.navi{
	display: block;
	position: absolute; 
	text-decoration: none;
	top: 20; 
	right: 20;  
	cursor:pointer;
	font-size:30px;
	color: var(--tekstivari-perus);
}
@media only screen and (max-width: 800px) {
	span.navi{
		color: var(--tekstivari-kaanteinen);
	}
}



hr{
 padding: 0 0 0 0;
 margin: 0 0 8 0;
 color: #3399BB;
}
label{
 font: normal 100% Calibri;
 color: #334d55;
 width: 100%;
 display: flex;
 text-align:left;
}

select{
	border: 1px solid #AAAAAA;
	text-align: left;
	padding: 10;
	margin: 0;
	background-color: #D3E2D3;
	width: -webkit-fill-available;
}
select:hover{
	background: #F3F3F3;
}
input{
	border: 1px solid #AAAAAA;
	text-align: center;
	font-family: Arial;
    font-size: 18px;
	padding: 10;
	margin: 0 20 10 0;
	color: white;
}
input:focus{
	outline: 0px solid black; /* Esimerkiksi 2px leveä, oranssi valaistus */
}
input[type=text] {
	height: 40px;
    width: 300px;
    margin: 10 0 0 0;
	padding: 20px;
	background-color: transparent;
	border-width: 0 0 1 0;
	border-style: solid;
	border-color: #777;
}
input[type=password] {
    height: 40px;
    width: 300px;
    margin: 10 0 0 0;
	padding: 20px;
	background-color: transparent;
	border-width: 0 0 1 0;
	border-style: solid;
	border-color: #777;
	
}.painike {
 	min-width: 300px;
	min-height: 40px;
	background-color: var(--painike);
	color: var(--tekstivari-kaanteinen);
	font-weight:normal;
    font-family: Arial;
    font-size: 18px;
	margin: 20 0 0 0;
	border-radius: 20px;
	border-width: 0;
	
	
}
input[type=checkbox] {
	border: 0px solid #AAAAAA;
	text-align: left;
	padding: 0;
	margin: 5px;
	width: 20px;
	height: 20px;
	border-bottom: 1px solid #F2F2F2;
}

@media screen and (max-width: 1000px) {
	input[type=text] {
		width: -webkit-fill-available;
	}
	input[type=password] {
		width: -webkit-fill-available;
	}.painike {
		width: -webkit-fill-available;
	}
	select {
		width: -webkit-fill-available;
	}
}

textarea{
	font-family: Arial;
	font-size: 85%;
	background: #FFFFCC;
	border: 1px solid #AAAAAA;
	margin: 2 0 0 0;
}
textarea:hover{

	color: #781351;
	background: #FFFFAA;
	border: 1px solid #781351;
}
button{
	border: 1px solid #AAAAAA;
	padding: 10;
	margin: 10 0 10 0;
	min-width: 160px;
}
button:hover{
	background-color: #F9F9ff;
}

table.spektritaulukko{
    color:gray;
    font-size:10px;
    text-align: left;
    padding:2;
    margin:0;
    line-height:10px;

}
table.spektritaulukko td{
    min-width: 70px;
}

.kuvaaja{
    width:49%; 
    height:250px; 
    display:inline-block;
}
.MPkuvaaja{
    width:95%; 
    height:270px; 
    display:inline-block;
    margin: 20 0 20 0;
}
.saakuvaaja{
    width:95%; 
    height:200px; 
    display:inline-block;
    margin: 20 0 20 0;
}
.Spektri{
    width:450px; 
    height:200px; 
    display:inline-block;
    margin: 20 0 20 0;
}

.tulostiedot{
 display: inline-block;
 margin: 0 50 0 0;
 width: 60%;
 vertical-align: top;
 padding:0;
}
div.melutiedot{
 display: inline-block;
 margin: 0 30 0 0;
 vertical-align: top;
 padding:0;
}
.graaffivalikko{
 display: inline-block;
 margin: 0 50 0 0;
 vertical-align: top;
 padding:0;
}

.fadelayer{
	position: absolute; 
	top: 0; 
	left: 0;  
	width: 100%; 
	height: 300%;
	background-color: gray;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0) transparent;
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	z-index: 10; 

}

.ilmoitusboxi{
	position: absolute; 
	text-align: center;
	top: 0px;
	left: 0px;
	padding: 10px;
	background-color: green;
	color: white;
}



    
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#content{
  	#position:static;
	text-align: left;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	#width: 100%;
	#min-width: 300px;
	
}
#alareuna{  
	bottom: 0%; 
	z-index:4; 
	margin: 30 0 0 0;
	padding: 10px;
	background-color:transparent;
	display: block;
    position:float;  
	text-align: center;
	width: 100%;
}

@media only screen and (max-width: 1200px) {
	div.osio, div.pohja{
		padding: 10;
		min-height: 70%;
		margin: 0px;
		
	}
	div.osio_bottom{
		padding: 20px;
		margin: 0px;
		
	}
	div.kaavake, div.lomakepohja{
		margin: 10 10 10 10;
	}
	span.navi{
	  position: static;
	  padding: 20px;
	  background-color: black;
	  text-align: right;
	  top: 0;
	  right: 0;
	  color: var(--tekstivari-kaanteinen);
	}

}

@media only screen and (max-width: 1000px) {
	div.paivakirja_sisalto, div.paivakirja_otsake{
		display: block;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	div.lomakepohja{
		margin: 0 0 0 0;
		width: auto;
		border-width: 1;
		border-color: gray;
		border-radius: 0;
	}
	div.overlay a {
		font-size: 26px;
	}
	div.fadelayer{
		background: rgba(0, 0, 0, 0);
		position: static;
	}
}
	
@media screen and (max-width: 550px) {
	.overlay .closebtn {
		font-size: 40px;
		top: 17px;
		right: 35px;
	}
	div.fadelayer{
		background: rgba(0, 0, 0, 0);
		position: static;
	}
}