body{
	font-family: Arial;
    font-size: 16px;
	line-height: 1;	
	margin: 0px;
	padding: 0px;
	background-color: white;
	background-image:url(taustagrad2.jpg);
	background-repeat: repeat-x;
	#background-attachment: fixed;
}
p{
	color: #555555;
    padding:2;
    font-size:14px;
    
}
p.tarkenne{
    font-size:12px;
    color:gray;
    text-align: left;
    padding:2;
    margin:0;
    #line-height:1;
}
p.kalenteripaiva{
    font-size:12px;
    color:gray;
    text-align: right;
    padding:2;
    margin:0;
    line-height:1;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}
p.desibeli{
    display: inline-block;
    font-size:12px;
    color:black;
    text-align: center;
    padding:7;
    margin:0;
    line-height:1;
}
p.LAeqD{
    display: inline-block;
    font-size:12px;
    color:black;
    text-align: center;
    padding:2;
    margin:0;
    line-height:1;
}
p.LAeqN{
    display: inline-block;
    font-size:12px;
    color:darkblue;
    text-align: center;
    padding:2;
    margin:0;
    line-height:1;
}
p.PM10{
    display: block;
    font-size:12px;
    color:black;
    text-align: center;
    padding:7;
    margin:0;
    line-height:1;
}
p.PM25{
    display: none;
    font-size:12px;
    color:black;
    text-align: center;
    padding:7;
    margin:0;
    line-height:1;
}
p.PM1{
    display: none;
    font-size:12px;
    color:black;
    text-align: center;
    padding:7;
    margin:0;
    line-height:1;
}
p.TSP{
    display: none;
    font-size:12px;
    color:black;
    text-align: center;
    padding:7;
    margin:0;
    line-height:1;
}
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 0;
}
a:hover {
	color: red;
	text-decoration: none;
}

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

h0{
 font-family: Arial;
 font-size: 130%;
 color: #BBBBBB;
 padding: 10px;
 margin: 0 0 0 0;

}
h1{
 font-family: Tahoma;
 font-weight: normal;
 font-size: 30px;
 color: #cc6633;
 padding: 0;
 margin: 20 0 20 0;
	
}
h2{
 font-family: Arial;
 font-size: 100%;
 color: #3366CC;
 padding: 0px;
 margin: 20 0 10 0;
}
h3{
 font-family: Arial;
 font-size: 14px;
 color: #444;
 padding: 0px;
 margin: 10 0 10 10;
}

hr{
 padding: 0 0 0 0;
 margin: 0 0 8 0;
 color: #3399BB;
}
label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 width: 150px;
 display: inline-block;
 text-align:left;
}

select{
	background: #FFFFCC;
	border: 1px solid #AAAAAA;
	padding: 1px;
	margin: 2 0 0 0;
}
select:hover{
	color: #333333;
	background: #FFFFAA;
	border: 1px solid #781351;
}
input{
	background: #FFFFCC;
	border: 1px solid #AAAAAA;
	padding: 1px;
	margin: 2 0 0 0;
}
input:hover{
	color: #781351;
	background: #FFFFAA;
	border: 1px solid #781351;
}
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;
}

div.kalenteri2018{
	background-color: white;
	min-width: 400px;
	width: 100%;
	padding: 0px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
div.kalenteri_rivi{
    display: flex;
    flex-wrap: wrap;
    align-items: auto;
	align-content: flex-strech;
	min-height: 40px;
}
div.kalenteri_rivi_otsikko{
    display: flex;
    flex-wrap: wrap;
    align-items: auto;
	align-content: flex-strech;
	min-height: 22px;
	color: gray;
	vertical-align: middle;
}
div.kalenteri_solu_ap{
    #flex: 30%;
	margin: 0px;
	padding: 0px;
	flex-basis: 0%;
    flex-grow: 1;
	text-align: center;
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: lightgray;
	border-collapse: collapse;
	
}
div.kalenteri_solu_vl{
    margin: 0px;
	padding: 0px;
	text-align: left;
    height:auto;
	flex-grow: 1;
	flex-basis: 0%;
	text-align: center;
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: lightgray;
	border-collapse: collapse;
	background-color: #FEF;
	
}
div.kalenteri_solu_button{
	width: fill;
	height: fill;
	background-color: transparent;
	border-width: 2px;
	padding: 0px;
	border-style: solid;
	border-color: transparent;
	margin: 0px;	
}
div.kalenteri_solu_button_sel{
	width: fill;
	background-color: transparent;
	border-width: 2px;
	padding: 0px;
	border-style: solid;
	border-color: gray;
	margin: 0px;	
}
div.kalenteri_solu_button:hover{
	border-width: 2px;
	border-style: solid;
	border-color: red;
	
}
@media screen and (max-width: 1200px) {
    div.kalenterisolu_ap{
        padding: 0 0 0 10;
    }
	div.kalenterisolu_vl{
        padding: 0 0 0 10;
    }
}
@media screen and (max-width: 800px) {
    div.kalenteri2018{
        width: fill;
		margin: 0 10 0 0;
		min-width: 350px;
    }
	div.kalenterisolu_ap {
        flex-direction: column;
		
    }
    div.kalenterisolu_vl{
        padding: 0 0 0 0;
    }
}



table.tuloskalenteri{
    margin-top: 0px;
	width: 95%;
	border-width: 0px;
	border-spacing: 0px;
	border-style: solid;
	border-color: lightgray;
	border-collapse: separate;
}
table.tuloskalenteri th{
	margin: 0px;
    height: 30px;
    vertical-align: middle;
    #width: 100px;
	background-color: white;
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: lightgray;
	text-align: center;
    font-weight: normal;
}
table.tuloskalenteri td{
	margin: 0px;
    height: 100px;
    vertical-align: top;
    background-color: white;
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: lightgray;
	text-align: center;
}
table.tuloskalenteri td.vl{
	background-color: #F9F9ff;
    border-color: lightgray;
	
}
table.tuloskalenteri th.vl{
	background-color: #F9F9ff;
    border-color: lightgray;
	
}
div.tulosrivi{
    font-family: Arial;
    font-size: 90%;
    width: 100px;
    margin: 0px;
    padding: 3px;
    text-align: left;
    color: green;
}

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

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

table.kalenteri{
    margin-top: 0px;
	width: 500px;
	border-width: 0px;
	border-spacing: 0px;
	border-style: solid;
	border-color: lightgray;
	border-collapse: separate;
}
table.kalenteri td{
	margin: 5px;
    height: 30px;
    #width: 80px;
	background-color: white;
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: lightgray;
	text-align: center;
}
table.kalenteri td.vl{
	background-color: #FEF3F3;
    border-color: lightgray;
	
}
.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;
}
.kartta{
 display: inline-block;
 margin: 0 50 0 0;
 vertical-align: top;
 padding:0;
}
#saatiedot{
 display: inline-block;
 vertical-align: top;
 min-width: 400px;
 max-width: 1000px;
}
@media screen and (max-width: 800px) {
	div.melutiedot{
        width: 95%;
    }
	.Spektri{
		width:95%; 
		height:200px; 
		display:block;
		
	}

}



.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; 

}

.Tietoruutu{
	width: 220px;
    #padding: 5px;
	
    display:block;
    
	background-color: white;
	border-width: 1px;
	border-style: solid;
	border-color: lightgray;
	text-align: left;
    
}
.Tietoruutu_aika{
    font-size:80%;
    color:gray;
    text-align: left;
    margin: 5;
}
.Tietoruutu_teksti{
    font-size:80%;
    color:black;
    text-align: left;
    margin: 5;
}

/***********************************************/
/* NAPIT                                       */
/***********************************************/
.toChar {
	min-width: 100px;
	min-height: 30px;
	background-color: #DDDDDD;
	color: black;
	font-weight:normal;
    font-family: Arial;
    font-size: 100%;
	margin: 0 20 0 20;
}
.toChar:hover {
	min-width: 100px;
	height: 30px;
	background-color: gray;
	color: white;
	font-weight:normal;
}

.kirjautumispainike {
	position: absolute; 
	top: 5; 
	right: 5;  
	width: 120px;
	height: 30px;
	border-color: gray;
	background-color: #CCCCCC;
	color: gray;
	font-weight:normal;
}
.kirjautumispainike:hover {
	background-color: gray;
	color: white;
	font-weight:normal;
}

.ilmoitusboxi{
	position: absolute; 
	top: 0; 
	right: 40%;  
	width: 300px; 
	height: 38px;
	background-color: red;
}

input[type=text] {
    height: 40px;
    width: 300px;
    margin: 10 0 0 0;
	padding: 20px;
	font-family: Arial;
    font-size: 16px;
	background-color: transparent;
	border-width: 0 0 1 0;
	border-style: solid;
	border-color: blue;
	
}
input[type=password] {
    height: 40px;
    width: 300px;
    margin: 10 0 0 0;
	padding: 20px;
	font-family: Arial;
    font-size: 16px;
	background-color: transparent;
	border-width: 0 0 1 0;
	border-style: solid;
	border-color: blue;
	
}
.painike {
 	min-width: 300px;
	min-height: 50px;
	background-color: #DDDDDD;
	color: black;
	font-weight:normal;
    font-family: Arial;
    font-size: 100%;
	margin: 20 0 0 0;
}
.painike:hover{
	min-width: 300px;
	height: 50px;
	background-color: gray;
	color: white;
	font-weight:normal;
}   
button.valintapainike {
 	min-width: 140px;
	height: 30px;
	background-color: orange;
	color: black;
	font-weight:normal;
    font-family: Arial;
    font-size: 100%;
	border-width: 0px;
	padding: 1px;
	border-style: solid;
	border-color: gray;
	margin: 5 5 5 0;
}
button.valintapainike:hover{
	background-color: gray;
	color: white;
	font-weight:normal;
}   
button.valintapainike_aktive{
 	width: 140px;
	height: 30px;
	background-color: #777;
	color: white;
	font-weight:normal;
    font-family: Arial;
    font-size: 100%;
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: gray;
	margin: 5 5 5 0;
}
button.valintapainike_aktive:hover{
	background-color: #gray;
	color: white;
	font-weight:normal;
}   
button.valintapainike_minor {
 	min-width: 120px;
	height: 30px;
	background-color: #FC9;
	color: black;
	font-weight:normal;
    font-family: Arial;
    font-size: 80%;
	border-width: 0px;
	padding: 1px;
	border-style: solid;
	border-color: gray;
	margin: 5 5 5 5;
}
button.valintapainike_minor:hover{
	background-color: gray;
	color: white;
	font-weight:normal;
}   

@media screen and (max-width: 800px) {
	button.valintapainike{
        width: 95%;
		display: block;
    }
	button.valintapainike_aktive{
        width: 95%;
		display: block;
    }
	.kirjautumispainike{
		display: none;
	}
	#content{
		min-width: 300px;
		margin: 0 0 0 0;
	}
	
}



button.projektinappi{
    width: 94%;
    height: 50px;
    text-align: left;
    font-weight:normal;
    font-family: Arial;
    font-size: 100%;
	margin: 5 0 0 0;
    padding: 0 0 0 10;
    background-color: ccc;
	border-width: 0px;
	border-style: solid;
	border-color: gray;
	
}
button.projektinappi:hover{
    background-color: eee;
	
	
}

    
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#masthead{
	position:static; 
	height:38px; 
	z-index:50; 
	margin: 0 0 0 0;
	#padding: 0 0 0 0;
	padding: 5 5 5 0;
	background-color:#222222;
	/*background-image:url(intranet.png);*/
	background-position:top;
	#min-width: 420px;
}
#content{
  	#position:static;
	text-align: left;
	margin: 0 0 0 20;
	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%;
}

div.laatikko{
  	width: 300px;
	height: 200px;
	padding: 0px 0px 0px 0px;
	/*background-color:#CC8855;*/
}

/************* PÄÄVALIKKO **************/
#globalNav{
	/*background-color: #222222;*/
	color:#999999;
	margin: 0 0 20 0;
    padding: 10px 10px 10px 10px;
	white-space: nowrap;
	text-align: left;
	#width: 100%;
}


/************* ALAREUNA ***************/
#siteInfo{
	display: block;
	padding: 20px;
	text-align: center;
	font-size: 100%;
	color: #CC6633;
	
}
#siteInfo a{
	color: #999999;
}

#hidden-data{
	display: none;
}



/************* LOADER ***************/

div.lataamo {
  display: inline-block;
  vertical-align: middle;
  margin-top: 250px;;
  text-align: center;
  width: 100%;
  height: 100%;
  color: white;
  
}
.loader {
  display: inline-block;
  #position: static;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin: 20;
  border: 10px solid #3498db;
  border-radius: 10%;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#myDiv {
  display: none;
  text-align: center;
}