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

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

background-color: silver;

}


h1	{
	font-family: 'Indie Flower', cursive;
font-size: 30px;
}


h2,h3,h4 {
	font-family: 'Indie Flower', cursive;
font-size: 20px;
}







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

/*HTML: div id="haitari1" class="haitari" MIKÄ TÄN IDEA ON???*/
.haitari {
    max-width: 45em;
    margin: 0 auto;
}

h2.haitariotsikko {
    background-color: #F57F74; /*haitarin otsikkotausta punainen*/ /* #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: #8DF573; /*haitarin hover kun kursori päällä vihreä */  /* #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: #add8e6;  /*haitarin sisältö vaaleansininen*/ /*#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;
}





/*eri värit haitarissa*/


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




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

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

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


.haitarisisalto2 {
    background-color: #a7fac0;  /*haitarin sisältö vihreä*/ /*#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.haitariotsikko2.auki::before {
    content: "\25BC";
}


/*scripti
 id =>  div id="haitari1" class="haitari2"*/
#haitari1 h2.haitariotsikko2.auki + .haitarisisalto2 {
    display: block;
}


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









/* header */
header {


 	/* background-color: rgba(241,241,241,0.8); */
	background-color: #e0e0db; /*rgb(146, 136, 155);*/
  	/*background-image: url(Kissa/Merenneito.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 hampurilaisen 3 VIIVAA ALLEKKAIN
oranssi hampurilaisvalikko 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: 2000px; /*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;

	/* 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); linkkivalikon TAUSTA harmaa*/
background-image: url("perhonen2.jpg"); /*linkkivalikon tausta hiiri*/

		/* seuraava muotoilu poistaa alleviivaukset linkeistä */
		text-decoration: none;
		text-align: left; /* center;*/
	  	

	  	}
	  
	  #menukohteet a:hover {
	  	background: #401408;
	  	color: yellow; /*linkin teksti keltainen kun kursori menee päälle*/
font-weight: bolder;

		}
	

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

	#menukohteet a {
  		width: auto;
  		padding: 10px;
  		color: red; /*linkin teksti Homepage punainen */
/*font-style: bold; MITEN SAATIIN LIHAVOITUA CSS:SSÄ - ja html:ssä*/
font-weight: bolder;

		}



	.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(Kissa/scratch_cats.jpg);*/
	 background-color: #f1f1f1; /*  #8E8888; */
  	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: 800px;
	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;
  }



 /*ASIDEen*/

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

*/
  

#clockback {background-image: url('images/klo.png'); background-repeat: no-repeat; width: 130px; height: 130px; top: 18px; margin-left: 30px; position: absolute;}

  
}