/* Kesätyyli 2025 */

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

body {
    background-color: #c98a45; /* warm amber */
    background-image: url("pic/vuori.png"), linear-gradient(to bottom, #f4c177, #d97437, #894e1d); 
    background-repeat: no-repeat;
    background-position: center top;
    border-style: none;
    background-size: auto auto;
}

h1 {
    color: #FFFFee; /* #ffeed0;*/ /* soft cream */
    text-shadow: 4px 4px 3px black;
	font-size: 220%;
	letter-spacing:5px;
}

h2 {
	color: #FFFFee; /*20A0E0; /* #F9890E; /* #D06040; /* rich orange */
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	text-shadow: 5px 5px 1px black;
	font-size: 140%;
	letter-spacing:3px;
}

.title {
	padding: 10px;
	color: #c75a29; /* rich orange */
	text-shadow: 2px 2px 4px black;
	text-align: center;
	font-family: Impact, Coda, Anton, "Arial Black", sans-serif;
	font-size: x-large;
	letter-spacing: 2px;
}

.title b {
	color: #F9890E;
	/* font-family: Impact, Coda, Anton, "Arial Black", sans-serif; */
	font-size: 80%;
}

/**** Tab pages ****/
div.tab-frame input{ display:none;}
div.tab-frame a{float:left; padding:5px 5px;} /*kyyla.org link */
div.tab-frame a:hover{float:left; padding:5px 5px; 
		color: black; background-color:#F9890E; } 
div.tab-frame label{ display:block; float:left;padding:5px 5px; cursor:pointer}
div.tab-frame label:hover{float:left; padding:5px 5px;
                color: black; background-color: #F9890E;}
div.tab-frame input:checked + label{ background:#c98a45; 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;}



.laatikko {
	width:680px;
	margin: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
    /*background-color: #f5c99b;*/ /* golden peach */
	border: 1px solid black;
	border-style: none;	
}

.sisalto {
	padding: 15px;
	line-height: 1.5;	
    background-color: #ffe5c3; /* pale autumn light */
	opacity: 0.8;
}

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

footer {
	background-color: #ffe5c3; /* pale autumn light */
	font-size: 80%;
	padding: 5px;
    text-align: right;
	border: 1px solid black;
	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: #f0c491;
    color: black;
}

a:hover {
    background-color: #f8dab3;
    color: #663300;
}

/* 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, .laatikko, .header {
        width: 100%;
		opacity: 1.0;
    }
	.tab-frame, .tab {
		width: 100%;
		padding: 0px;
		border: 0px;
		opacity: 1.0;
	}
	.laatikko {
		border: 0px;
	}
	.sisalto {
		padding: 2px;
		opacity: 1.0;
	}
	table {
		padding: 5px;
		border: 0px;
	}	
	/* body { background-image:none; } */
}