/*indeksigrid-sivuni indeksigrid2.css = tyyligrid1 */
* {
  box-sizing: border-box;
}

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

	/*EI BODYSSA PALMUKUVAA*/

	/*background-image: url(indeksitaustat/palmut3.jpg); OLI KÄYTÖSSÄ KOKO HOIDOLLE - ASIDE:ssa palmut3Pieni*/

background-color: silver;

}


/*--------------LAATIKOT------------------*/


/*Revontulikuva*/
#eka	{
	position: absolute; /*MITÄ TARKOITTAA?*/

	left: 100px;
	top: 10px;
	z-index: 3; /*MITÄ TARKOITTAA?*/

}



#toka	{
	width: 400px;
	height: 200px;
	background-color: rgba(0,254,0,0.7); /*vihreä*/
	position: absolute; /*MITÄ TARKOITTAA?*/

	left: 10px;
	top: 200px;
	z-index: 1; /*MITÄ TARKOITTAA?*/

}


#kolmas	{
	width: 600px;
	height: 400px;
	background-color: rgba(0,0,254,0.3); /*läpinäkyvä lila*/
	position: absolute; /*MITÄ TARKOITTAA?*/

	left: 200px;
	top: 100px;
	z-index: 6; /*MITÄ TARKOITTAA?*/

}

#kolmas p 	{
	background-color: white; /*valkoinen pieni laatikko, p-elementissä tekstiä*/
	display: inline; /*MITÄ TARKOITTAA?*/

	padding: 30px;
	position: absolute; /*MITÄ TARKOITTAA?*/

	top: 50%;
	left: 50%;
}

#apu	{
	border: 1px black solid;
	position: relative; /*MITÄ TARKOITTAA?*/
	height: 100vh;
	overflow: hidden; /*MITÄ TARKOITTAA?*/

}


/*--------------LAATIKOT------------------*/




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

/* header */
header {
  /*background-color: #B39797;  VAIHDOIN rgba(241,241,241,0.8);*/
  background-image: url(ylakuvat/MiamiOmppu.jpg);
  padding: 30px;
  text-align: center;
  font-size: 25px;
}


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

mutta löytyy hampurilaissäätöjä

JOS TÄMÄ ON POISSA KÄYTÖSTÄ - ISOLLA NÄYTÖLLÄ NÄKYY PURILAISEN
3 VIIVAA ALLEKKAIN

oranssi HAMPURILAISVALIKKO eli PURILAINEN piiloon 

JES PURILAINEN TULI NÄKYVIIN JA KLIKKAAMALLA TULI MENUVALIKKO ESIIN kapeat ALEKKAIN */

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



#laatikko	{
	/*width: 800px; */
width: 100%;
	height: 600px; /*400*/

	border: dotted 5px rgb(62, 62, 63);
	padding: 40px;
	margin-left: 10px; /*0.5em;*/
	margin-right: 10px; /*0.5em;*/


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

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

	/*background-image: url(indeksitaustat/MiamiBeach3.jpg); OLI KÄYTÖSSÄ nyt on palmut vain Asidessa*/

	background-repeat: no-repeat;

	/* border-box, padding-box tai content-box */
	background-origin: content-box;
/*color: white;*/
}



/*LINKIT 4 TILAA NÄMÄ TEKEVÄT LINKISTÄ LAATIKKOMAISEN*/
/*text-decoration: none; TEKSTIN? ALLEVIIVAUS POIS */
/*
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*/
		/* seuraava muotoilu poistaa alleviivaukset linkeistä */
		text-decoration: none;
		text-align: left; /* center;*/


width: auto;
  		padding: 10px;
  		color: black;
	  	}
	  
	  #menukohteet a:hover {
	  	background: #401408;
	  	color: white;
		}
	

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

/* SIIRSIN YLEMMÄKSI


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


	.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/palmut3Pieni.jpg);*/

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

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



footer {

	background-image: url(indeksitaustat/hiekka.jpg);
 /* background-color: #8E8888; VAIHDOIN #f1f1f1;  */
  padding: 10px;
  text-align: center;
}



/* MEDIA max-LEVEYS 600 px
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*/
#laatikko	{
	width: 400px;
	height: 1000px;
	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;*/
}




/*ORANSSI HAMPURILAISVALIKON eli PURILAISEN taustaväri*/

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

nav label { 
    	display: inline-block; 
    	color: black;
    	background: orange; 

    	/* font-style: normal; */

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



 
/*ASIDE:een*/

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

}




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

	  #menukohteet { 
		display: none; 
	}


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

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


/*ORANSSI HAMPURILAISVALIKON eli PURILAISEN taustaväri*/

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

/*

nav label { 
    display: inline-block; 
    color: black;
    background: orange; 

    /* font-style: normal; */

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

*/
  
  
}