/* KYYLÄn uudistettu LukemalLAN CSS tyyli, ei ilmoittautumissivuille
	https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
	
*/

* {
    box-sizing: border-box; /*padding ei kasvata leveyttä */
}

/* body { */
html {

	color: white; background: #000000; 
	/* Sivulla ei kannata olla reunusta. Pitäisi olla itse taustassa. */
	/*
	border-style: solid none solid none;
	padding: 25px;
	background-origin: border-box;  
	background-origin: padding-box;
	*/
	/* background-position: right 10px top 20px; --ei toimi  */
	
	background: 	linear-gradient(to bottom, 
	#007070 10%, 		
	#006060 10% 20%,
	#005050 20% 30%,
	#004040 30% 40%,
	#002020 40% 60%,
	#004040 60% 70%,
	#005050 70% 80%,
	#006060 80% 90%,
	#007070 90%
	); 	

	
	/* padding-top: 20px; siirtää sisältöä, ei taustaa */
	/* taivaalla repeat-x tai no-repeat tai cover/contain */
	 
	/* background-blend-mode: normal, normal; */
	
	/* background-size: 20vmin, cover; */

	height: 1400px; 
	/* width: 100vw; */
	/* min-height: 100vh; /* taivas käyttää	100 vh? */
}



/* Tab pages */
div.tab-frame input{ display:none;}
div.tab-frame a{float:left; padding:5px 5px;  
	margin: 5px; outline: 2px outset lightgray;} /*kyyla.org link */
div.tab-frame a:hover{float:left; padding:5px 5px; 
		color: black; background-color: #1191df; /* vaalea sininen */
		margin: 5px; outline: 2px inset lightgray; } 
div.tab-frame label{ display:block; float:left;padding:5px 5px; cursor:pointer; 
					 margin: 5px; outline: 2px outset lightgray; }
div.tab-frame label:hover{float:left; padding:5px 5px;
						  color: black; background-color: #1191df; 
						  margin: 5px; outline: 2px outset lightgray;}
div.tab-frame input:checked + label{ /* background:#003461; color:white; */ cursor:default}
div.tab-frame div.tab{ display:none; padding:5px 5px;clear:left}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked ~ .tab:nth-of-type(4),
div.tab-frame input:nth-of-type(5):checked ~ .tab:nth-of-type(5) 
{ display:block;}


/* Links inside tab content */
div.tab a:link, a:visited {
	outline-style: none;
	float: none;
    color: black;
	text-decoration: underline;
}

div.tab a:hover, a:active {
	outline-style: none;
	float: none;
    background-color: #1191df;
    color: black;
	text-decoration: underline;
	outline-style: none;
}

.banneri {
    max-width: 680px;
    margin: 0 auto;
}

.banneri img {
    width: 100%;      /* scale down */
    height: auto;     /* keep aspect ratio */
    max-width: 680px; /* never scale up */
    display: block;	  /* Remove inline element gap */

	max-height: 380px; /* max height works better when aspect-ratio can change between images */
	object-fit: contain; /* keep aspect ratio if height constraint hits */
}


/* Tämän sisällä header, navigaatio, sisältö ja footer */
.laatikko {
	max-width: 680px; /* korjaus */	
	margin: 0 auto;
	
	padding: 0px; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* background-color: deepskyblue;	/* vaalea  */
	/* border-style: none; */
}




.sisalto {
	width: 100%; /* 100% of laatikko, eli max 680 */
	
	padding: 15px;
	line-height: 1.5;
	background-color: rgba(145, 145, 185, 0.8);
	outline-style: outset;
	/*background: linear-gradient(to bottom, #1191df , #4c5a54, #587f00);
	background-color: ivory; */
}

.heippa { color: darkorange; border: solid; padding: 2px;  
	transform: rotate(-20deg);
	max-width: 200px;
	padding: 2px;
	margin: -10px -10px 0px 0px;
	outline-style: none;
	text-align: right;
	/*display: block;*/ 
}
	
.heippa:hover {   
	color: orange;
}
	

.pallot {
	text-align: right; 
	border: 1px solid black; border-style: hidden solid hidden hidden;
	color: dimgray;
}

/* Ylälogo head.txt - ei käytössä ? */
header {
	background-color: orange;
	background-repeat: no-repeat;
	background-position: center;
    text-align: center;
	height: auto; 
	border: 1px solid yellow;
	opacity: 0.8;
} */


/* Lopun yhteystiedot bot.txt */
footer {
    background-color: #006060;
	/* font-size: 80%; */
    padding: 5px;
    text-align: center;
	/* border: 1px solid yellow; */
	opacity: 0.8;
}

/* Navigaatiolinkit top.txt 
nav {
    overflow: hidden;
	border: 1px solid black;
	background-color: #1191df;
	opacity: 0.6;
}
nav a {
	font-size: 80%;
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
}
nav a:hover {
    background-color: #ddd;
    color: black;
}
*/


/* kesalanien saantojen taulukko */
table.saannot {
	table-layout: auto; width: 100%;
	border: 0px; 
}

table.saannot th, td {		
    text-align: left;
    padding: 5px;
    border: 0px;
}
	
/* Create two columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    /* height: 300px; Should be removed. Only for demonstration */
}
/* Left and right column */
.column.side {
    width: 50%;
}
 
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media (max-width: 660px) {
    .column.side, 
	.topnav, 
	.header, 
	.banneri {
        width: 100%;
		opacity: 1.0;
    }
	
	.tab-frame, .tab {
		width: 100%;
		padding: 0;
		border: 0;
		opacity: 1.0;
	}
	
	.laatikko {
		max-width: 100%; /* optional, but safe */
        border: 0;
	}
	
	.sisalto {
		padding: 2px;
		opacity: 1.0;
	}
	table {
		padding: 5px;
		border: 0px;
	}	
	/* body { background-image:none; } */	
}