/* ei apu*/

* {
  box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;


	/*background-image: url(indeksitaustat/palmut3.jpg); */

	background-color: silver;
	text-align:center;

}


h1,h2,h3,h4	{
	font-family: 'Indie Flower', cursive;
}



header {
  
	/*background-color: #B39797;  VAIHDOIN rgba(241,241,241,0.8);
	background-image: url(indeksitaustat/laatikkotausta.jpg); 
	*/

 	/*linkkivalikon tausta oma Paintissa tekemäni*/

 	 padding: -40px;
 	 /*padding: 20px;*/

  	text-align: center;
  	font-size: 25px;

 	height:200px;
}



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



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




/*--------------------------------Nav ja nav label purilainen input-------------------------------------------------*/
/*--------------------------------Nav ja nav label purilainen input-------------------------------------------------*/
/*--------------------------------Nav ja nav label purilainen input-------------------------------------------------*/

/* nav label, #purilainen, input --- aivan alussa?*/

/* löytyy HAMPURILAISSÄÄTÖJÄ - HAMPURILAISpurilainen piiloon */



nav label, #purilainen, input { 
	display: none; 
	  }



#kuvalaatikko1 {

	/* divin ulkoasu */
	border: 2px green solid;
	background-color:#F7EAF6; /*sorsat1-h tt  hakee t  lt */


	/* divin sis ll  asiat aseteltu vasemmalle */
	text-align:left;
	padding-left:10px;

	/* 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:700px;				
	height:750px;	

	
	/* tarvitaan, jotta iso kuva asettuu oikein divin sisälle */
	position: relative;
}


/*London-kuvia_kiertaen css 
a.galleriakuva*/



a img 
{
	border: 3px green solid;
	margin-top: 5px;
	margin-left: 0px;
}




/*#kierto li */

li.kuvagalleria { 
	list-style-type: none; 	/* pallukat pois */
	display:inline;  	
	position:relative;
	float:left;
	width: 150px; 		
	}





/*----------------------------------------------------------*/
/*----------------ei mukana------------------------------------------*/
/*----------------------------------------------------------*/

/*LINKIT 4 TILAA
NÄMÄ TEKEVÄT LINKISTÄ LAATIKKOMAISEN*/

/*text-decoration: none; ALLEVIIVAUS POIS*/
/*tulee laatikko-tausta linkille*/

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:rgb(134, 134, 131); valikon TAUSTA harmaa*/
	background-image: url("perhonenNappi2.jpg"); /*linkkivalikon tausta ristikko*/

	/*seuraava muotoilu poistaa alleviivaukset linkeistä */
	text-decoration: none;
	text-align: left; /* center;*/
	}
	  
#menukohteet a:hover {
	 background: #bfa0d3;
	 color: brown;
font-weight: bolder;

	}
	

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

#menukohteet a {
  	width: auto;
  	padding: 10px;
  	color: black;
font-weight: bolder;

	}








/* MITES NÄÄ HOVERIT */

/* kun hiiri valikon kohdan päällä, sisempi valikko 
#menu li li a:hover {
	background-color: #3399FF;
}*/


/* tuo esille sisemmän valikon - MISSÄ KOHDEN TÄMÄN PITÄISI OLLA?*/
#menu ul li:hover ul {
	visibility: visible;
}

/*Uloimp linkk sävy???*/
/*#menu li a span{line-height:30px; float:left; display:block; padding-right:15px; 
background:url('topMenuImages.png') repeat-x;}*/


	/*LISÄTTY ?????????Tällä määrittelyllä sain alasvetovalikon 
	tietyn kokoiseksi
	#menu li li a span{
    	width: 60px;
	}*/

/*#menu li a:hover span{background-position:100% -60px;}*/

/*#menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; 
background:url('topMenuImages.png') repeat-x; color:rgb(35,17,125);}*/
	
/*#menu li a.active span, .menu li a.active:hover span
{background:url('topMenuImages.png') repeat-x;}*/







.gridialue {
/*tämä muotoilu pitää asettaa juurikin gridin containerille */
		
	display: grid;
	grid-template-columns: 200px auto auto;
	grid-template-rows: auto auto; /*MUUTOS*/
	}
	
	
/*MUUTOS*/

.columnh { grid-row: 1 / 2; grid-column: 1 / 4; } /*header*/
.columnx { grid-row: 2 / 3; grid-column: 1 / 2; } /*aside x*/
.columny { grid-row: 2 / 3; grid-column: 2 / 3; } /*main*/
.columnz { grid-row: 2 / 3; grid-column: 3 / 4; } /*aside x*/
.columnf { grid-row: 3 / 4; grid-column: 1 / 4; } /*footer*/




/*MUUTOS*/

aside	{
	/*background:  #D4B8B8;  VAIHDOIN pink;    */

	background-image: url(indeksitaustat/laatikkotausta.jpg); 

	/*background-color: #e0e0db;*/ /*rgb(146, 136, 155);*/

	padding: 20px;
	border: solid 1px black;
	}



footer {

	background-image: url(indeksitaustat/laatikkotausta.jpg); 

 	/* background-color: #8E8888;   */

  	padding: 10px;
  	text-align: center;
	}



/* NÄYTTÖ PIENEKSI 600 px:ksi tai pienemmäksi
Responsive layout - sarakkeet latoutumaan päällekkäin pienillä näytöillä */


@media (max-width: 600px) {

.gridialue {
	grid-template-columns: auto;
	grid-template-rows: auto auto auto; /*MUUTOS*/
  	}
  
	.columnh { grid-row: 1 / 2; grid-column: 1 / 2; } /*header*/
	.columnx { grid-row: 2 / 3; grid-column: 1 / 2; } /*aside x*/
	.columny { grid-row: 3 / 4; grid-column: 1 / 2; } /*main*/
	.columnz { grid-row: 4 / 5; grid-column: 1 / 2; } /*aside x*/
	.columnf { grid-row: 5 / 6; grid-column: 1 / 2; } /*footer*/
  

/*pienentyessä tulee RAKENNUS kuva esiin*/
#kuvalaatikko1	{
	width: 400px;
	height: 1200px;
	border: dotted 5px rgb(62, 62, 63);
	padding: 50px;

	/*background-color: rgb(146, 136, 155);
	background-image: url(indeksitaustat/building.jpg);*/

	background-repeat: no-repeat;

	/* border-box, padding-box tai content-box */

	background-origin: content-box;

	/*color: black;*/
	}





/* HAMPURILAISvalikko, block allekkain vai inline-block vierekkäin */
/* HAMPURILAISvalikko, block allekkain vai inline-block vierekkäin */
/* HAMPURILAISvalikko, block allekkain vai inline-block vierekkäin */


nav label { 
    	display: inline-block; 
    	color: black;
    	background: blue;  /* PURILAISEN taustaväri SININEN*/


    	/* font-style: normal; */

    	font-size: 2em;
    	padding: .3em;
	position: fixed;
	top: 10px;
	right: 10px;
	height: 80px;
	z-index: 5000;
 	}



 /*ASIDEen - mikä merkitys tällä on?*/

img {
  	border: 1px solid #ddd;
  	border-radius: 4px;
  	padding: 5px;
  	width: 5px;
	height: 5px;
	}




  	/* Valikon kohteiden näyttäminen ja piilottaminen */
	/* kun NÄYTTÖ PIENEKSI, OIK. YLÄKULM. hampurilainen, mutta menukohteet piilotetaan, klikattava hamp.valikkoa */

	#menukohteet { 
		display: none; 
	}


	/* kun hampurilaista klikataan, muuttuu sen input-kenttä valituksi eli checked ja samalla tulee alapuolelta menukohteet näkyville */

	  nav input:checked ~ #menukohteet { 
		display: inline-block;
	  }
  
  
}