body {
    background: white;
    border: 0;  padding: 0; margin: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: black;
}
h1, h2, h3 {
    font-family: "URW Gothic L", "Trebuchet MS", Arial, sans-serif;
    text-align: left; clear: left;
    page-break-after: avoid;
}

a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
a.ext { color: #52f; }
a { color: #b12; }
a:link img, a:visited img { border: 2px solid; padding: 1px; }
a:hover img, a:active img { border: 3px solid; padding: 0; }

q { quotes: "\00BB" "\00BB" "\203A" "\203A"; }
q:before { content: open-quote; }
q:after { content: close-quote; }

blockquote { font-style: italic; }

blockquote.palaute {
    border: .5em groove #00c;
    border-radius: 5px;
    background: #eef;
    margin: 1em;
    padding: .5em;
    text-align: center;
}

div.painike {
    clear: both;
    border: .5em outset #cdcdff;
    border-radius: 3px;
    background: #ccf;
    margin: 1em;
    padding: .2em;
    text-align: center;
    font-size: 200%;
    text-transform: uppercase;
}

td input { width: 100%; }
td textarea { width: 100%; height: 8em; }
form table th { text-align: left; }

#nav li {
    font-variant: small-caps;
    float: left;
    padding: .2em .3em;
    display: block;
}

#tags { margin: 0; border: 0; padding: 0; }

#tags li {
    float: left;
    padding: 0 .3em;
    display: block;
}

#tags .s10 { font-size: 2.8em; font-weight: bold; }
#tags .s9 { font-size: 2.8em; }
#tags .s8 { font-size: 2.2em; font-weight: bold; }
#tags .s7 { font-size: 2.2em; }
#tags .s6 { font-size: 1.7em; font-weight: bold; }
#tags .s5 { font-size: 1.7em; }
#tags .s4 { font-size: 1.3em; font-weight: bold; }
#tags .s3 { font-size: 1.3em; }
#tags .s2 { font-size: 1em; font-weight: bold; }
#tags .s1 { font-size: 1em; }
#tags .s0 { font-size: .8em; }

#nav ol li {
    text-transform: uppercase;
    float: right;
    padding: 0 .2em;
}

#nav li * li {
    font-variant: normal;
    padding: 0 2.1px;
}

#body {
    clear: both;
    margin: 1em;
}

#blog, #mainblog, div.right {
    display: none;
    padding: 0 .2em;
    margin: 0 0 0 5px;
    border-radius: 10px;
    float: right;
    clear: both;
    background-color: #eef;
}

#blog li, #mainblog li { list-style-type: none }
#blog ul, #mainblog ul { padding: 0 }

ul.pages { float: right; }

ul.pages li {
    float: left;
    padding: .2em .3em;
    font-size: 1.5em;
    margin: 0 .1em;
    display: block;
    border-radius: 5px;
    background-color: #eef;
}

.date {
    display: block;
    float: right;
}

div.qa {
  border: medium double;
  margin: .5em;
  padding: .25em;
  background: #ffc;
  page-break-inside: avoid;
}

div.qa .a li, div.qa li.a {
    border-bottom: thin solid;
    margin-right: 1em;
}

div.qa ul li.a { list-style-type: none }

dt { font-weight: bold }

@media print {
    img.left, img.right, #post img, #nav, .pages, .noprint, div.painike {
	display: none;
    }
}

@media screen {
    .noscreen { display: none; }

    #nav {
	max-width: 1020px;
	background-color: #ccf;
	width: 100%;
	margin: auto;
	width: 100%;
    }

    body{
	background: #ccf;
    }

    #body{
	background: white;
	max-width: 1000px;
	margin: auto;
	padding: 10px;
    }

    #nav ul, #nav ol, ul.pages {
	margin: 0; border: 0; padding: 0;
	font-weight: bold;
    }
    #nav ul * ul {
	background: rgba(48,48,128,.6);
	padding: 0; display: block; float: right;
	font-weight: normal;
	font-style: italic;
    }

    #nav li {
	margin: 0; border: 0; padding: 0;
    }

    #nav li.super, #nav li.sel, #nav a {
	color: #004;
	padding: .5em 7px;
    }

    #nav li.sel, #nav li.super {
	background: rgba(128,128,160,.8);
	padding: .5em 8px;
    }

    #nav a {
	background: rgba(128,128,160,.5);
    }

    #nav ol li a {
	border-radius: 10px;
	background: rgba(128,128,160,.3);
    }

    #nav li.sel, #nav a {
	display: block;
    }

    #nav li.super a, #nav li.super ul li.sel {
	display: inline;
	padding: 0;
    }

    #nav li.super a {
	background: transparent;
    }

    #nav li.super ul li.sel {
	padding: 0 8px;
	display: block; float: left;
    }

    #nav li.super ul li a {
	padding: 0 4.1px;
	display: block; float: left;
    }

    #nav a:hover, #nav a:active, .pages a:hover, .pages a:active {
	text-decoration: none;
	text-shadow: 0 3px 5px #000;
    }

    img.left, img.right, #post img {
	display: inline;
	max-width: 100%;
	height: auto;
	margin-left: 2px;
    }
}

@media screen and (min-width:950px) and (min-height:300px) {
    #nav {
	background: #ccf url("kasvuntaika.svg") no-repeat;
    }

    #nav ul {
	padding-top: 156px;
    }
}

@media screen and (min-width:675px) {
    #post {
	max-width: 660px;
    }
    #post img {
	display: inline;
    }
}

@media screen and (min-width:700px) {
    #mainblog, div.right {
	display: block;
    }

    img.right {
	display: block;
	float: right;
    }
    img.left {
	display: block;
	float: left;
    }
}

@media screen and (min-width:900px) { #blog { display: block; } }
@media screen and (min-width:900px) { #blog { max-width: 210px; } }
@media screen and (min-width:920px) { #blog { max-width: 25%; } }
@media screen and (min-width:960px) { #blog { max-width: 28%; } }
@media screen and (min-width:980px) { #blog { max-width: 30%; } }
@media screen and (min-width:1000px) { #blog { max-width: 31%; } }
@media screen and (min-width:1030px) { #blog { max-width: 340px; } }
@media screen and (min-width:1050px) { body { padding-bottom: 10px; } }
@media (prefers-color-scheme: dark) {
    body { background: black; color: white; }
    a.ext { color: #88f; }
    a { color: #f88; }
    blockquote.palaute, ul.pages li, #blog, #mainblog, div.right {
	background-color: #110;
    }
    div.qa { background: #003; }
}
@media screen and (prefers-color-scheme: dark) {
    #nav li.super, #nav li.sel, #nav a { color: #ff8; }
    #nav, body { background-color: #008; }
    #body{ background: black; }
}