html {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: arial,helvetica,sans-serif;
  font-size: 100%;
  text-align: left;
  color: black;
}

#page {
  margin: 0 auto 0 auto;
  padding: 0px;
  background: #f5f5f5;
  width: 1150px;
  display: block;
  vertical-align: top;
  height: 1500;
}

#header {
  margin: 0 0 0 28px;
  padding: 1px 0 0 0;
  width: 100%;
  height: 160px;

}

#laite {
  margin: 0 0 0 20;
  background: #e5e5e5;
  padding: 0px 10px 0;
  float: left;
  display: inline-block;
  width: 320px;
  height: auto;
}

#mitoitusarvot {
  margin: 0px auto 10px auto;
  border: 2px solid #aaaaaa;
  background: #e5efe5;
  padding: 5px 5px 5px 5px;
  display: inline-block;
  width: 300px;
  height: auto;
}


#tulokset {
  margin: 0 auto 20 0;
  background: #e5e5e5;
  padding: 0px 10px 0;
  display: block;
  width: 360px;
  height: auto;
  float: left;
  vertical-align: top;
  border-top: 0px solid #acacac;
  border-bottom: 0px solid #acacac;
  border-left: 3px solid #acacac;
}

	#tulokset table {
		margin: 10px 0 0 0;
		display: block;
		float: left;
	}
	
#lisaarvot {
  margin: 0 auto 20 0;
  background: #e5e5e5;
  padding: 0px 10px 0;
  display: inline-block;
  width: 360px;
  height: auto;
  float: left;
  vertical-align: top;
  border-top: 0px solid #acacac;
  border-bottom: 0px solid #acacac;
  border-left: 3px solid #acacac;
}

	#lisaarvot table {
		margin: 10px 0 0 0;
		display: block;
		float: left;
	}
	
textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #595759;
	margin: 4px 0;
	background:transparent url(img/input_bg.jpg) no-repeat 0 0;
	padding: 3px;
	border-top: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
} 

input.userinput, select.userinput {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #595759;
	margin: 2px 0;
	background:transparent url(img/input_bg.jpg) no-repeat 0 0;
	padding: 1px;
	border-top: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}

h2 {
    display:inline-block;
	color: #3e69ac;
	font-size: 24px;
    padding-left:0px;
    padding-top:6px;
    padding-bottom:0px;
    margin-bottom:6px;
    margin-top:10px;
	font-weight: bolder;

}
h3 {
    display:inline-block;
	font-size: 17px;
    padding-left:0px;
    padding-top:6px;
    padding-bottom:0px;
    margin-bottom:6px;
    margin-top:10px;
	font-weight: bolder;
}

p, br, td, tr  {
	
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
}

tr.dark {
	background: #cccccc;	
}
tr.blue {
	background: #5e89cc;
	color: #ffffee;	
}



@media only screen and (max-width: 768px) {

#page {
  
  width: 100%;
  
  height: auto;
}

}





@media only screen and (max-width: 640px) {

#page {
  
  width: 100%;
  
  height: auto;
}

}

@media only screen and (max-width: 640px) {
#header {
  margin: 0 0 0 5px;
  padding: 0 0 0 0;
  width: 100%;
  height: auto;

}

}










@media only screen and (max-width: 640px) {
	
	
	
	img {
 height: auto;
 width:90%;
 
}

.nappi{
	
	position: absolute;
  left:300px;
  top:600 px;
 
}


} 


@media only screen and (max-width: 640px) {
#laite
{
	margin: 0 0 0 0;
 
  padding: 00  0 0;
    float:none;
    display: block;
    width:100%;
	height: auto
	
 
}
}



@media only screen and (max-width: 640px) {
#tulokset
{
	
	margin: 0 0 0 0;
 
  padding: 0,0,0,0;
    float:none;
    display: block;
    width: 95%;
    height: auto;
	
}
}
@media only screen and (max-width: 640px) {
#lisaarvot
{
	
	margin: 0 0 0 0;
 
  padding: 0 0  0 0;
    float:none;
    display: block;
    width: 100%;
    height: auto;
	
	
}
}

@media only screen and (max-width: 640px) {

#mitoitusarvot {
  margin: 5;
  border: 2px solid #aaaaaa;

  padding: 0 ;
 
  width: 95%;
  height: auto;
}

}