body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	background-color: #FFF;
	margin-top: 0px;
	margin-bottom: 0px;
	background-attachment: scroll;
	background-image: url(kuvat/tausta.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin-left: 0px;
	margin-right: 0px;
}

.leipis {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-left: 0px;
}
#wrapper {
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	width: 900px;
}
#header {
	color: #333;
	width: 900px;
	float: left;
	padding: 0px;
	border: 1px solid #ccc;
	height: 100px;
	margin: 0;
	background: #BD9C8C;
}
#leftcolumn { 
 color: #333;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 500px;
 width: 10px;
 float: left;
 position: relative;
}
#content {
	float: left;
	border: 0px none #76881C;
	margin: 0px;
	padding: 0px;
	width: 900px;
	display: inline;
}
#rightcolumn {
	color: #5F5F5F;
	border: 0px solid #ccc;
	height: 180px;
	width: 180px;
	float: right;
	position: relative;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}
#rightcolumn li{
	list-style-position: outside;
	list-style-image: url(kuvat/dot2.png);
	list-style-type: none;
}

body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
	line-height: 25px;
}
.topfield_table {
	height: 211px;
	width: 910px;
	position: absolute;
	top: 0;
}
 .clock {
	font-size: 8pt;
	color: #000;
	float:right; margin-top:95px	  
	  }
.referenssifield {
	background-color: #FFF;
	height: 450px;
	width: 870px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 5px;
	margin-left: 20px;
}
.contentfield {
	margin: 0px;
	padding-top: 42px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 40px;
	width: 830px;
	min-height: 240px;
}
.content_ala {
	color: #999999;
	margin: 0px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 80px;
	font-size: 14px;
	line-height: 19px;
	text-align: center;
}
.logot{
	  text-align:center;
	  }
.bottomfield {
	width: 910px;
	padding: 0px;
	height: 25px;
	margin-left:15px;
    border-top: 1px dashed #ddd;
	
}

h1 {
	font-size: 23px;
	color: #0065D5;
	line-height: 24px;
	font-weight: normal;
}

.text_center {
	text-align: center;
	font-size: 10px;
}
h2 {
	font-size: 20px;
	color: #0065D5;
	font-weight: normal;
	line-height: 5px;
}
h3 {
	font-size: 15px;
	color: #333333;
	line-height: 20px;
	margin-bottom: 0px;
}

a:link {
	text-decoration: underline;
	color: #007CF9;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
	color: #000000;
}


.ala_palsta {
	width: 300px;
}
.linkki {
	text-transform: uppercase;
	height: 38px;
	padding-right: 20px;
	padding-left: 4px;
	background-image: url(kuvat/linkki.gif);
	background-repeat: no-repeat;
	background-position: right center;
	float: left;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}
.top{
	height: 180px;
	width: 920px;
	padding: 0px;
	margin: 0 auto;
	
}
nav {
	float: right;
	margin-top:60px;	

}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url(kuvat/menu-icon.png) center;

}

nav a:hover#menu-icon {
	background-color: #444;
	border-radius: 4px 4px 0 0;

}

nav ul {
	padding-top:20px;
	float:right;
	list-style: none;	
}

nav ul li {
	display: inline;
	font-family: 'Lato, helvetica, "Muli", sans-serif', 'arial';
	font-weight: normal;
	margin-right:18px;
	}
	
nav li {
	display: inline-block;
	float: left;
	
}
nav a, nav a:active, nav a:visited {
		color:#000000;
		padding-top:18px;		
		color: white;
		text-transform:uppercase;
		font-size:14px;
		text-decoration: none!important;
	}

nav ul li:hover a, nav ul li.current a {
	color: #0095da;
	border-top: 8px solid #0095da;
	padding-bottom:5px;
	}

#tooltip{
	position:absolute;
	border-radius: 4px;
	border:1px solid #fff;
	padding:2px 8px;
	color:#FFFFFF;
	display:none;
	background-color: #666666;
	opacity: 0.9;
}	

/* lomake html5*/
*:focus {outline: none;}

.contact_form{
	float:right;
	margin-left: 30px;
}

.contact_form h2, .contact_form label {font-family:Tahoma, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 10px;}

.contact_form ul {
    width:350px;
    list-style-type:none;
	list-style-position:outside;
	padding:0px;
	float:right
}
.contact_form li{
	padding:6px; 
	border-bottom:1px solid #eee;
	position:relative;
	list-style-image: none!important;
} 
.contact_form li:first-child, .contact_form li:last-child {
	
}

.contact_form h2 {
	font: 100% Georgia;
	font-size: 11px;
	margin-top: 0px;
	font-style:italic;
	background-image: none!important;
}
.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}


.contact_form label {
	width:60px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:15px; 
	width:180px; 
	padding:4px 6px;
}
.contact_form select {
	width:200px; 
	padding:4px 6px;
}
.contact_form textarea {padding:6px; width:250px;height:100px;}


.contact_form input, .contact_form textarea, .contact_form select{ 
		border:1px solid #aaa;
		box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		border-radius:2px;
		padding-right:10px;
		-moz-transition: padding .25s; 
		-webkit-transition: padding .25s; 
		-o-transition: padding .25s;
		transition: padding .25s;
	}
.contact_form input:focus, .contact_form textarea:focus {
		background: #fff; 
		border:1px solid #555; 
		box-shadow: 0 0 3px #aaa; 
		padding-right:35px;
	}

.contact_form input:required, .contact_form textarea:required {
	background: #fff url(kuvat/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
	background: #fff url(kuvat/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	background: #fff url(kuvat/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}


.form_hint {
	background: #c30000;
	border-radius: 2px 2px 2px 2px;
	color: white;
	margin-left:7px;
	padding: 1px 5px;
	z-index: 999; 
	position: absolute; 
	display: none;
}
.form_hint::before {
	content: "\25C0";
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #c20000;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
	

button.submit {
	background-image: url(-webkit-gradient(%20linear,%20left%20bottom,%20left%20top,%20color-stop(0.22,%20rgb(92,92,92)),%20color-stop(0.79,%20rgb(158,158,158))%20));
	background-image: -o-linear-gradient(bottom, rgb(92,92,92) 22%, rgb(158,158,158) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(92,92,92) 22%, rgb(158,158,158) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(92,92,92) 22%, rgb(158,158,158) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(92,92,92) 22%, rgb(158,158,158) 79%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.22, rgb(92,92,92)),
	color-stop(0.79, rgb(158,158,158))
);
	border: 1px solid #fff;
	border-radius: 2px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	box-shadow: inset 0 1px 0 0 #ddd;

	-webkit-box-shadow: 0 1px 0 0 #ddd inset ;
	-moz-box-shadow: 0 1px 0 0 #000 inset;
	-ms-box-shadow: 0 1px 0 0 #000 inset;
	-o-box-shadow: 0 1px 0 0 #000 inset;
	color: white;
	font-weight: bold;
	padding: 4px 8px;
	text-align: center;
	background-color: #0066FF;
	
}
button.submit:hover {
	opacity:.9;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #666 ;
	box-shadow: 0 0 10px 5px #666 inset; 
	-webkit-box-shadow:0 0 10px 5px #666  inset ;
	-moz-box-shadow: 0 0 10px 5px #666  inset;
	-ms-box-shadow: 0 0 10px 5px #666  inset;
	-o-box-shadow: 0 0 10px 5px #666  inset;
	
}

/* SLIMBOX */
#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(images/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 8px solid #CCCCCC;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(images/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(images/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(images/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
.img_border {
	border: 1px solid #0066FF;
	padding: 3px;
	background-color: #FFFFFF;
	box-shadow: 5px 5px 10px #999;

	-moz-box-shadow: 5px 5px 10px #999;  
	-webkit-box-shadow: 5px 5px 10px #999;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";  
	margin-bottom: 4px;
}
 #blocks{
		 width:auto;
		 display:block;
		 float:left;
		 min-width:49%;
		 margin-bottom:20px;
		 min-height:180px;
		 }


@media (max-width: 768px)  {
  body {
	background-image: url(kuvat/tausta_mob.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
  .top{
  height: 100px;
	 
  float:left; 
}

#menu-icon {
		display:inline-block;
	}
nav{
	position:absolute;
	top: -45px;
	right:20px
	}


nav ul, nav:active ul { 
		display: none;
		position: absolute;
		padding: 5px;
		background: #000;
		border: 1px solid #444;
		right: 0px;
		top: 25px;
		width: 250px;
		border-radius: 4px 0 4px 4px;
	}

nav li {
		display:block;
		text-align: center;
		width: 100%;
		margin: 0;
		color: #fff;
	}
nav li a{
		display:block;
		padding:10px;
		color: #fff;
		text-decoration:none;
	}
nav a, nav a:active, nav a:visited {
		color:#000000;
		padding-top:0px;		
		color: white;
		text-transform:uppercase;
		font-size:14px;
		text-decoration: none!important;
	}		
nav li a:hover{
	background: #2262AD;
	color: #fff;
	padding:10px;
	text-decoration:none;
	
	}

nav:hover ul {
		display: block;
	}

  h1{ 
	  font-size: 17pt;}

  .top img{
	  width:auto;
	  max-width:300px;
	  height:auto;
	  margin-left: -5px;
	  margin-top: -40px;
	  display:block;
	 }
   .clock {
	  display:none;
	  }
	#wrapper, .contentfield{
		 width:94%;
		 padding-left: 5px;
		}
		#content, .bottomfield {
		 width:100%;
		}	
		
		 #blocks{
		 width:auto;
		 display:block;
		 float:left;
		 min-width:50%;
		 margin-bottom:20px;

		 }
  .content_ala {
		 font-size:12pt;
		}	
}


@media (max-width: 480px)  {
  .top img{
	  width:auto;
	  max-width:240px;
	  height:auto;
	  margin-left: -5px;
	  margin-top: -40px;
	  display:block;
	 }
	 
	 #blocks{
		 width:99.5%;
		 display:block;
		 min-height:auto;
		margin-bottom:30px;
		 }
	 #blocks img{
		 max-width:320px;
		 float:left;
		 }	 
		 

  .logot img{
	  width:90%;
	  height:auto;
	  }
  h1{ 
	  font-size: 16pt;}
   .clock {
	  display:none;
	  }
	#wrapper, .contentfield{
		 width:95%;
		 padding-left: 10px;
		}
		#content, .bottomfield {
		 width:100%;
		}	
	.contact_form{
	float:left;
	width: 99%; 	margin-left: 0px;
}	
.contact_form input {
	height:18px; 
	width:95%; 
	padding:4px 6px;
}
		  
}