/*indeksigrid-sivuni indeksigrid2.css = tyyligrid1 */


/*The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
tosin kyllä isoni kun laitoin

* {
  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;


}


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

/* header */
header {
  
	/*background-color: #B39797;  VAIHDOIN rgba(241,241,241,0.8);
	background-image: url(Ristikot/ristikkoTaustaa.jpg);
	background-image: url(indeksitaustat/laatikkotausta.jpg); 
	background-image: url("taustakuviksi/Merenneito.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: url("palloja.jpg");*/
}



/* 
ISOLLA NÄYTÖLLÄ hampurilainen piiloon, 
muuten näkyisi isolla näytöllä
menuvalikossa hampurilaisen 3 viivaa alekkain */


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




/* VALIKKOKOHTEET pystysuoraan kun klik. HAMP.KUVAA ja perusmuotoilu - TÄSSÄ SIIS PIENELLE NÄYTÖLLE*/

#menukohteet a {
	display: inline-block; /* PIENELLÄ NÄYTÖLLÄ inline-block vierekkäin, block on allekkain*/


	/*seuraava muotoilu poistaa alleviivaukset linkeistä */
	text-decoration: none;
	background-image: url("ristikkoNappi.jpg"); /*linkkivalikon tausta ristikko*/
	/* background-color:rgb(134, 134, 131); valikon TAUSTA harmaa tai background-color: navy;*/
	color: black;

	padding: 0.2em; /*10px; */
	margin-bottom: 0.2em;
	/*margin-right: 0.5em;*/

	/*purple alalaita*/
	border-bottom: 0.3em groove purple;

	text-align: left;  /*center;*/

	width: auto; /* leventää 100%; auto;*/


  	
	font-weight: bolder;

	}
	  
#menukohteet a:hover {
	background: #bfa0d3;
	color: brown;
	font-weight: bolder;
	}
	

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


/*------------HAITARI-----------------*/

/*body {
    padding: 0;
    margin: 0;
}
*/

/*
header {
    background-color: #cfa;
    padding: 1em;
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}
*/


article {
    margin: 0 2em;
}


/*
footer {
    background-color: #cfa;
    padding: 1em;
    box-shadow: 0 -3px 5px rgba(0,0,0,0.5);
}
*/

/*------------HAITARI-----------------*/

/*div id="haitari1" class="haitari"*/
.haitari {
    max-width: 45em;
    margin: 0 auto;
}

h2.haitariotsikko {
    background-color: #cc66ff; /*haitarin otsikkotausta LILA*/ /* #fd0;*/
    padding: 0.3em 0.5em;
    border: 2px solid black;
    border-radius: 0.5em;
    margin: 0;
    cursor: pointer;
}

/*scripti*/
h2.haitariotsikko.auki,
h2.haitariotsikko:hover {
    background-color: #ffff99; /*haitarin hover kun kursori päällä KELTAINEN */  /* #fe9; */
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/*MISSÄ TÄMÄ ON KÄYTÖSSÄ?*/
h2.haitariotsikko::before {
    content: "\25B6";
    padding: 0 0.5em 0 0;
    font-size: 80%;
    vertical-align: top;
}


.haitarisisalto {
    background-color: #ffccff;  /*haitarin sisältö VAALEANPUNAINEN*/ /*#f0f0f0;*/
    margin: 0 2em;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border: 1px solid #666;
    padding: 1em;
    display: none;
}

/*scripti*/
h2.haitariotsikko.auki::before {
    content: "\25BC";
}


/*scripti
 id =>  div id="haitari1" class="haitari"*/
#haitari1 h2.haitariotsikko.auki + .haitarisisalto {
    display: block;
}

/*------------HAITARI-----------------*/





/**/

#laatikko	{
	/*width: 800px; */
	width: 100%;
	height: 700px; /*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-repeat: no-repeat; 				/*MITÄ TARKOITTAA REPEAT?*/

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

	background-origin: content-box;

	/*color: white;*/
}




/*Ristikot2-sivulle painikelaatikko EI VOIMASSA*/
/*
#painikelaatikko {

	/* divin ulkoasu - iso alue ja uloin reuna*/				
	border: 2px grey solid;				
	/*background-color:#F7EAF6; */

	background-color: rgb(159, 160, 162);


	/* 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: 780px;				
	height:550px;				
							
					
	/* tarvitaan, jotta iso kuva asettuu oikein divin sisälle */				
	position: relative;				
}				
*/



/* 
Ristikko-linkit menivät hyvää järjestykseen laatikossa 7.9.
*/

/*#kierto li */

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



/*OVALBUTTON2*/
/* li-elementin perusmäärittelyt */
 
#ovalbutton2 li {
	float: left;  /*jos halutaan painikkeet samalle riville */
	list-style-type: none;
	width: 150px; /* tekstille varattava tila */
	line-height: 24px; /* taustakuvan korkeus */
/*text-align: center;*/
	margin-bottom: 10px; /* marginaalit sen mukaan, onko painikkeet alekkain vai vierekkäin */
	margin-left: 5px;
}


/* ensin määritellään painikkeen vasen puoli ja teksin muotoilut */
/* kuva asemoidaan vasemmalle ylhäälle (left top) ja kuvasta näytetään yläosa (top) */

#ovalbutton2 a {
	background: transparent url('oval-orange-left.gif') no-repeat top left; /* PAINIKKEEN VASEN LAITAVÄRI */
	display: block;
	font: bold 13px Tahoma;
	color: purple;
	line-height: 24px; /* Sama kuin taustakuvan korkeus -- teksti keskellä riviä */
	padding-left: 5px; /* Kuvan vasem. puolen leveys - oli 11px mutta nyt menee vas.puol. uppoaa txtiin */
	text-decoration: none;
}



/* ------------------------------------------------------------------------------------- */


/* Painikkeen oikeapuoli on span-elementin taustakuvana. 
Kuva asemoidaan ylhäälle oikealle (top right), kuvasta näkyy vain se osa joka mahtuu li-elementin leveyteen */
#ovalbutton2 a span {
	background: transparent url('oval-orange-right.gif') no-repeat top right; /* PAINIKKEEN oikea LAITAVÄRI*/
	display: block;
	padding-right: 11px; /* Sama arvo kuin edellä padding-left -- teksti keskelle */
}



/* ------------------------------------------------------------------------------------- */


/* Hover-kuva esille, kuva asemoidaan alareunastaan -painikk vas puolen sävy */
#ovalbutton2 a:hover {
	background-position: bottom left;
}




/* ------------------------------------------------------------------------------------- */


/* Hover kuva esille, kuva asemoidaan alareunastaan -painikk oik puolen sävy */
#ovalbutton2 a:hover span {
	background-position: bottom right;
	color: black;
}


/*----------------------------------------------------------*/
/*--------------------nav ei käytössä sama a ja hover kuin #menukohteessa--------------------------------------*/
/*----------------------------------------------------------*/

/*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*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/










/*-------------------------------------GRIDIALUE----------------------------------*/
.gridialue {
/*tämä muotoilu pitää asettaa juurikin gridin containerille */
		
	display: grid;
	grid-template-columns: 200px auto auto;
	grid-template-rows: auto auto; /*MUUTOS*/
	}
	
/*---------------------------------GRIDIALUE PÄÄTTYY--------------------------------*/
	
/*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;
	}





/*-------------------------------------MEDIA-------------------------------------*/
/*-------------------------------------MEDIA-------------------------------------*/


/* MEDIA max-leveys kun menee vähintään 600 px:ksi
Responsive layout 
- sarakkeet latoutumaan päällekkäin pienillä näytöillä */



@media (max-width: 600px) {


/*-------------------------------------GRIDIALUE----------------------------------*/

.gridialue {
	grid-template-columns: auto;
	grid-template-rows: auto auto auto; /*MUUTOS*/
  	} 

/*---------------------------------GRIDIALUE PÄÄTTYY--------------------------------*/

  
	.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: 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;*/
	}




/*hampurilaisen taustaväri keltainen*/

nav label { 
    	display: inline-block; /* block allekkain - inline-block allekkain  - mikä oli vierekkäin ??? */

    	color: black;
    	background: yellow; 

    	/* font-style: normal; */

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



 /*ASIDEen - onko tämä kuvia varten???*/

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




  	/* Valikon kohteiden näyttäminen ja piilottaminen */
	/* kun NÄYTTÖ PIENENEE, valikkokohteet piilotetaan, klikattava hamp.valikkoa */

	  #menukohteet { 
		display: none; 
	}


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

	  nav input:checked ~ #menukohteet { 
		display: inline-block;
	  }
 
}
/*-------------------------------MEDIA PÄÄTTYY-------------------------------------*/
/*-------------------------------MEDIA PÄÄTTYY-------------------------------------*/