﻿.etubody {
	/*
	margin-left: 200;
	font-family: "Lato", sans-serif;
	background-color: #e5e5e5;*/
	background-image:url(tausta.jpg); 
	background-size: cover;  
	background-repeat: no-repeat ; 
	background-attachment: fixed;
}
body
{ /*
	background: linear-gradient(to bottom, #3399ff 0%, #66ff33 90%);*/
	/*	background-color: #B2D732;*/

}
.pienirivivali{
	margin-bottom: 2px;
	margin-top: 2px;
/*
	margin-left: 10px;
	margin-right: 10px;
	line-height:50%;
	*/
}

/**/
.dropdown {
/** / position: relative;
  display: inline-block;/**/
}

.dropbtn {
/**/  display: none; /**/
	position: fixed;

  background-color: #f1d200;
  background-color: rgba(241, 210, 0, 0.3);/**/
  color: black;
/** /  padding: 6px; /**/
  font-size: 16px;
  border: none;
}

.dropdown-content {
/**/  display: none; /**/
/** /  display: block; /**/
 /**/  position: absolute; /**/
/** /  top: 30px;/**/
  background-color: #f1f1f1;
  min-width: 60px;
/** /  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);/**/
 /**/ z-index: 1;/**/
}

.dropdown-content a {
/** /	float: none;/**/
  color: black;
  padding: 2px 6px;
  text-decoration: none;
  display: block;
/** /  text-align: left;/**/
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {
/**/	display: block; /**/
	}

.dropdown:hover .dropbtn {
	background-color: #3e8e41; 
/** /	display: block; /**/
}


/**/


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.sidebar {
  margin: 0;
  padding: 0;
  position: fixed;
  /*
  width: 200px;
  background-color: #e5e5e5;
  height: 100%;
  */
  background-color: rgba(255, 255, 255, 0);/**/
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
/*  padding: 16px;
*/
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
	background-color: rgba(140, 255, 20, 0.5);
  color: brown;
}

.sidebar a.varipainike
{
	background-color: #f1d200;
	margin-bottom: 5px;
	padding: 10px 15px 10px 15px;
	border: 2px solid #fff;
	border-radius: 27px;
}

.content {
  /**/margin-left: 190px;/**/
  padding: 2px 0px 30px 0px;
 /** / height: 500px;/**/
  background-color: rgba(255, 0, 0, 0.0);/**/
}
.sisalto1 {
text-align: center;
	margin-bottom: 10px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	margin-left: 20px;
/*	
	margin-left: auto;
	margin-right: auto;
	*/
	width: 90%;
	max-width:800px;
	min-width: 480px;
 /* height: 1000px;*/
  background-color: rgb(238, 255, 204);/**/
}
.sisallon1-sisalto { /*teksti*/
/**/	display: inline-block;/**/

	padding: 10px 10px 10px 10px;
/**/	font-size:24px; 
	  font-weight: bold;/**/
/**/	text-align: center; /**/
}

.sisalto {
/*  border-top-left-radius: 25px;
  border-top-right-radius: 25px;*/
	margin-left: 20px;
/*	
	margin-left: auto;
	margin-right: auto;
	*/
  width: 90%;
   max-width:800px;
	min-width: 480px;
/* height: 1000px;*/
  background-color: rgb(238, 255, 204);/**/
}
.sisallon-sisalto { /*teksti*/
	padding: 10px 10px 10px 20px; 
}

.sisalto2 {
	margin-top: 10px;
 border-bottom-left-radius: 25px;
 border-bottom-right-radius: 25px;
	margin-left: 20px;
/*	
	margin-left: auto;
	margin-right: auto;
	*/
  width: 90%;
  max-width:800px;
	min-width: 480px;
/* height: 1000px;*/
  background-color: rgb(238, 255, 204);/**/
}
.sisallon2-sisalto { /*teksti*/
	padding: 10px 10px 10px 20px;
}


/*
@media screen and (max-width: 1700px) {*/
@media screen and (max-width: 700px) {
  .sidebar {
 /** /   width: 95%;
   height: auto;/**/
 /**/   position: relative;/**/
	left: 10px;
  }
  .sidebar a {float: left;}
  .content {margin-left: 0;}
	.sisalto1 {
		width: 75%;
		min-width: 360px;
		max-width: 525px;
	margin-left: auto;
	margin-right: auto;
	}
	.sisalto {
		width: 75%;
		max-width: 525px;
		min-width: 360px;
	margin-left: auto;
	margin-right: auto;
	}
	.sisalto2 {
/** /		background-color: rgb(238, 200, 204);/**/
		width: 75%;
		max-width: 525px;
		min-width: 360px;
	margin-left: auto;
	margin-right: auto;
	}

}
/* 580*/
@media screen and (max-width: 580px) {
	.sidebar {
		display: none;
	}
	.dropbtn {
 /**/	display: inline-block;/**/
	}
}
@media screen and (max-width: 400px) 
{
	/** /  .sidebar a {
		text-align: center;
		float: none;
	  }
	  /**/
	.content {
	  padding: 0px;
	}
		.sisalto1 {
			width: 100%;
			max-width: 360px;
			min-width: 200px;
		}
	.sisallon1-sisalto { /*teksti*/
	font-size:20px; 
	}
		.sisalto {
			width: 100%;
			max-width: 360px;
			min-width: 200px;
		}
		.sisalto2 {
	/** /	background-color: rgb(0, 255, 255);/**/
			width: 100%;
			max-width: 360px;
			min-width: 200px;
		}
	}


