body, div	{ margin: 0; }

#apu	{
		/*background-image: url(Miami-kuvat/palmut3.jpg);*/
		background-color: rgb(159, 160, 162);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;

	text-align:center;		

}

.varitetty_otsikko	 {
	/*background-image: linear-gradient(rgb(217, 194, 198),rgb(111, 107, 107));	*/
	
	/*background-image: radial-gradient(red, yellow, green);*/

/*linkkinappulapalkille värikäs kapea alue*/
	background-image: radial-gradient(brown, yellow, green);
	padding-top: 10px;
}



#kuvalaatikko1 {	


	/* divin ulkoasu - iso alue ja uloin reuna*/				
	border: 2px grey solid;				
	background-color:#A68064;
					
					
	/* divin sisällä asiat aseteltu vasemmalle */				
	text-align:left;		

	/* divin keskitysastuksia */				
	margin-top:40px;				
	margin-left:auto;				
	margin-right:auto;
		
					
	/* leveys ja korkeus siten, että iso kuva mahtuu divin sisälle ja pikku kuvat myös */				
	width: 780px;				
	height:550px;				
								
					
	/* tarvitaan, jotta iso kuva asettuu oikein divin sisälle */				
	position: relative;				
}	





/*  pikkukuvat ovat linkkejä, ei alleviivausta = ei linkin reunaviivaa */					
a.galleriakuva {					
	text-decoration: none; 				
}					
					
/*  pikkukuvan ulkoasun asetukset */					
a.galleriakuva img{					
	border: 3px black solid;				
	margin-left: 5px;				
	margin-top: 5px;				
}					
					
/* (pikku+iso)kuvien reunaviiva muuttuu vahvoiksi katkoviivoiksi, kun hiiri päällä */					
a.galleriakuva:hover img{					
	border: 3px red dashed;				
	/* on ollut alkuperäisessä esimerkissä */				
	/* background-color: transparent; */				
}					
					
					
/* Ison kuvan asetukset */					
a.galleriakuva span {					
	/* divin sisällä kuvalle määrätään tarkka paikka, jotta kaikki kuvat tulevat				
	esille samaan paikkaan */				
					
	position: absolute;				
	top: 0px;				
	left: 240px;				
					
	/* sama marginaali kuin pikkukuvalla --> yläreuna samalla kohdalla */				
	margin-top: 5px;				
					
	/* Kuvan ympärille hieman tyhjää tilaa */				
	padding: 5px;				
					
	/* tyhjälle tilalle taustaväri */;				
	background-color: #EAEAAE; 				
					
	/* isonkuvan alla taustavärin ympärille SININEN 1px katkoviiva */				
	border: 1px dashed blue;				
					
	/* Kuvatekstin värii ja paikka kuvan alla */;				
	color: black; 				
	text-align: center;				
					
	/* Kuva on piilossa, kunnes hiiri viedään  pikkukuvan päälle */				
	visibility: hidden; 				
}					
					
/* Kun hiiri pikkukuvan päällä tuodaan isompi kuva näkyville */					
a.galleriakuva:hover span{ 					
	visibility: visible;				
}					
					


.kuvamuotoilu1	{

	filter: blur(10px);
	
}

.kuvamuotoilu1:hover	{

	filter: none;
	
}

.kuvamuotoilu2	{
	filter: opacity(50%);
}

h1	{
	
	border: 30px solid transparent;
	border-image-source: url(borderimg2.png);
	border-image-slice: 100;
	border-image-repeat: space;
	
}

/*text-decoration: none; ALLEVIIVAUS POIS*/
/*LINKIT 4 TILAA*/
/**/
nav a	{
	text-decoration: none; 
	background-color: navy;
	color: white;
	padding: 0.2em;
	border-bottom: 0.3em groove purple;
	margin-right: 0.5em;
}


/*LEIJUMISTA TEHDÄÄN UUSI MUOTOILU KUN OLLAAN LINKIN PÄÄLLÄ*/
nav a:hover	{
	background-color: white;
	color: navy;
}

/*VIERAILTU*/
nav a:visited	{
	background-color: rgb(135, 135, 139);
	color: black;
}

/*a:active*/


/* VALIKKOKOHTEET pystysuoraan kun klik. HAMP.KUVAA ja perusmuotoilu - TÄSSÄ SIIS PIENELLE NÄYTÖLLE*/
#menukohteet a {
	display: block; /* inline-block vierekkäin tai block; allekkain*/
	width: 100%;
	padding: 0.2em;
	margin-bottom: 0.2em;

	background-color:ffc7f0; /* VALIKON TAUSTA = harmaa linkkinappulapalkki*/

	/* seuraava muotoilu poistaa alleviivaukset linkeistä */
	text-decoration: none;
	text-align: left; /* center;*/
	}
  
  #menukohteet a:hover {
	background: #c0bab8;
	color: white; /*hiirellä päälle muuttuu teksti valkoiseksi*/
	}


/* VALIKKOKOHTEET VAAKAAN OLETUKSENA */
#menukohteet { 
	display: flex; 
	}

#menukohteet a {
	width: auto;
	padding: 10px;
	color: black; /*teksti musta*/
	}