@charset "utf-8";


/* © 2003-2015 Norbert Lindenberg. All rights reserved. */


/********** color scheme **********
	#9098a0 medium gray - borders
	#f0f2f4 light gray - background
	#d0d4d8 medium-light gray - special use, e.g., day of week
	#b0b0ff medium blue - current place
	#7070ff medium blue - hover
*/


/********** YUI reset **********/

/*
YUI 3.8.0 (build 5744)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
legend{color:#000}


/********** Improved reset **********/

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

var {
	font-style: italic;
}

ol {
	list-style: decimal outside;
}

ul {
	list-style: disc outside;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

article, section, nav, aside, header, footer, main, figcaption, figure {
	display: block;
	margin: 0;
	padding: 0;
}


/********** fonts **********/

@font-face {
	font-family: "Malang Web";
	src: url("Malang.ttf");
}

@font-face {
	font-family: "Ubud Web";
	src: url("Ubud.ttf");
}

@font-face {
	font-family: "DejaVu Sans Web";
	src: url("DejaVuSansSubset.woff");
}

body, :lang(en), :lang(de), :lang(id) {
	font-family: "Georgia", serif;
}

:lang(ja) {
	font-family: "Hiragino Mincho Pro", "MS PMincho", "Georgia", serif;
}

:lang(ko) {
	font-family: "AppleMyungjo", "Batang", "Georgia", serif;
}

:lang(zh-Hans) {
	font-family: "STSong", "SimSun", "Georgia", serif;
}

:lang(zh-Hant) {
	font-family: "LiSong Pro", "MingLiu", "Georgia", serif;
}

:lang(ban) {
	font-family: "Ubud", "Ubud Web", "Georgia", serif;
}

:lang(jv) {
	font-family: "Yogya", "Malang Web", "Georgia", serif;
}

:lang(en-fonipa) {
	font-family: "Menlo", sans-serif;
}

span.math {
	font-family: "DejaVu Sans", "DejaVu Sans Web", "Helvetica Neue", sans-serif;
}

header :lang(en), footer :lang(en), nav :lang(en),
header :lang(de), footer :lang(de), nav :lang(de),
header :lang(id), footer :lang(id), nav :lang(id),
code:lang(en), code :lang(en), div.pre :lang(en),
code:lang(de), code :lang(de), div.pre :lang(de),
code:lang(id), code :lang(id), div.pre :lang(id) {
	font-family: "Verdana", sans-serif;
}

nav :lang(ja),
code:lang(ja), code :lang(ja), div.pre :lang(ja) {
	font-family: "Hiragino Kaku Gothic Pro", "MS PGothic", "Verdana", sans-serif;
}

nav :lang(ko),
code:lang(ko), code :lang(ko), div.pre :lang(ko) {
	font-family: "AppleGothic", "Gulim", "Verdana", sans-serif;
}

nav :lang(zh-Hans),
code:lang(zh-Hans), code :lang(zh-Hans), div.pre :lang(zh-Hans) {
	font-family: "STHeiti", "SimHei", "Verdana", sans-serif;
}

nav :lang(zh-Hant),
code:lang(zh-Hant), code :lang(zh-Hant), div.pre :lang(zh-Hant) {
	font-family: "LiHei Pro", "MingLiu", "Verdana", sans-serif;
}

#contact label, #contact button, #contact textarea, #contact input, #contact select {
	font-family: "Georgia", "Malang", "Ubud", "Malang Web", "Ubud Web", serif;
}


/********** page layout **********/

body {
	margin: 0;
	padding: 0;
	width: 100%; /* use maximum space in window; avoid scrolling */
	min-width: 320px; /* users may have to scroll after zooming in */
}

#browser-alert {
	border: 10px solid red;
	padding: 10px;
}

#browser-alert h3 {
	margin-top: 0;
}

header {
	padding: 20px 10px;
	border-bottom: 1px solid;
	border-color: white;
	background-color: #b0b0ff;
	background: linear-gradient(to bottom,  #d0d0ff,  #9090ff);
}

nav#minitoc {
	border-top: 1px solid;
	border-color: #9098a0;
	background-color: #b0b0ff;
	background: linear-gradient(to bottom,  #d0d0ff,  #a0a0ff);
}

main {
	margin: 30px 10px;
}

footer {
	padding: 5px 10px;
	border-top: 1px solid;
	border-color: #f0f2f4;
	background-color: #b0b0ff;
	background: linear-gradient(to bottom,  #a0a0ff,  #8080ff);
}


/********** header styles **********/

#sitetitle {
	font-weight: normal;
	color: black;
	font-size: 1.5em;
	line-height: 1em;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	text-decoration: none;
	-webkit-tap-highlight-color: #7070ff;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	color: black;
	clear: both;
}

h1 {
	font-size: 2em;
	line-height: 1.3em;
	margin-bottom: 0.5em
}

h2 {
	font-size: 1.5em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	margin-top: 1em;
}

h2::before {
	content: "";
	display: block;
	height: 0.3em;
}

h2:first-child::before {
	height: 0px;
}

h3 {
	font-size: 1.3em;
	margin: 1em 0;
}

h4 {
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}

h5 {
	font-size: 0.8em;
	margin: 1em 0;
	padding: 0;
	color: #9098a0;
}

h6 {
	font-size: 0.2em;
}


/********** main content **********/

main::after {
	/* make sure main contains all its floating elements */
	content: "";
	display: block;
	visibility: hidden;
	clear: both;
}

main a:hover {
	background-color: #7070ff;
	border-bottom: 1px solid #303030;
	color: white;
}

main p, main li, main td, main th {
	font-size: 1em;
	line-height: 1.4em;
	color: #303030;
}

main p {
	text-align: left;
	margin: 1em 0;
}

main figure {
	width: 100%;
	text-align: center;
}

main figure img {
	padding: 5px;
	border: 1px solid #9098a0;
}

main figcaption {
	padding: 0 1em;
	font-size: 0.8em;
	line-height: 1.3em;
}

main blockquote {
	padding: 0 1em;
	background-color: #f0f2f4;
}

main ol, main ul {
	padding-left: 2em;
}

main a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #9098a0;
	-webkit-tap-highlight-color: #7070ff;
}

main div.entry {
	margin-top: 2.3em;
}

main p:first-child, main div.entry:first-child {
	margin-top: 0em;
	padding-top: 0em;
}

main div.entry h2 {
	margin-top: 0;
}

main ul.pagetoc li {
	list-style: none;
	line-height: 1.5em;
}

main code, main div.pre p {
	font-size: 0.9em;
}

main div.pre {
	color: #303030;
	margin: 1em 0;
	padding-left: 1em;
}

main div.pre p {
	margin-top: 0em;
	margin-bottom: 0em;
	line-height: 1.5em;
	padding-left: 2em;
	text-indent: -2em;
}

main div.pre p.indent0 {
	margin-left: 0;
}

main div.pre p.indent4 {
	margin-left: 1em;
}

main div.pre p.indent8 {
	margin-left: 2em;
}

main div.pre p.indent12 {
	margin-left: 3em;
}

main div.pre p.indent16 {
	margin-left: 4em;
}

main code:lang(ja), main div.pre p :lang(ja) {
	font-size: 1em;
}

main code:lang(ko), main div.pre p :lang(ko) {
	font-size: 1em;
}

main code:lang(zh-Hans), main div.pre p :lang(zh-Hans) {
	font-size: 1em;
}

main code:lang(zh-Hant), main div.pre p :lang(zh-Hant) {
	font-size: 1em;
}

main table {
	border-width: 1px;
	border-style: solid;
	border-color: #9098a0;
	border-collapse: collapse;
	margin: 1em 0;
	max-width: 100%;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
}

main th, main td {
	border-width: 1px;
	border-style: solid;
	border-color: #9098a0;
	padding: 3px;
	vertical-align: baseline;
	line-height: 1.4em;
}

main th {
	background-color: #f0f2f4;
	font-weight: bold;
	text-align: left;
}

main .unicodename {
	text-transform: lowercase;
	font-variant: small-caps;
}


/********** contact form **********/

#contact table, #contact th, #contact td {
	border-style: none;
}

#contact th, #contact td {
	vertical-align: top;
}

#contact td:first-child {
	width: 40%;
}

#contact label {
	margin-right: 1em;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
}

#contact input, #contact textarea {
	width: 100%;
}

#contact label, #contact button, #contact textarea, #contact input, #contact select {
	font-size: 1em;
	line-height: 1.2em;
	margin-bottom: 1em;
}


/********** mini site navigation **********/

nav#minitoc ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav#minitoc li {
	display: inline-block;
	border-right: 1px solid;
	border-color: white;
}

nav#minitoc a {
	display: block;
	padding: 5px 10px;
	color: black;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
	-webkit-tap-highlight-color: #7070ff;
}

nav#minitoc a:hover {
	color: white;
	background-color: #7070ff;
	text-shadow: none;
}

nav#minitoc img {
	width: 1em;
	height: 0.85em;
}


/********** legal **********/

#legal {
	font-size: 0.6em;
	line-height: 1.4em;
}

#legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid black;
	-webkit-tap-highlight-color: #7070ff;
}


/********** medium screens **********/

@media (min-width: 450px) {

	body {
		min-width: 450px;
	}

	main ol, main ul {
		padding-left: 3em;
	}

	main div.pre {
		padding-left: 3em;
	}

	main div.pre p {
		padding-left: 3em;
		text-indent: -3em;
	}

	main div.pre p.indent0 {
		margin-left: 0;
	}

	main div.pre p.indent4 {
		margin-left: 1.5em;
	}

	main div.pre p.indent8 {
		margin-left: 3em;
	}

	main div.pre p.indent12 {
		margin-left: 4.5em;
	}

	main div.pre p.indent16 {
		margin-left: 6em;
	}

	main figcaption {
		padding: 0.5em 2em 0 2em;
		line-height: 1.5em;
	}

	main blockquote {
		padding: 0 2em;
	}
}


/********** large screens **********/

@media (min-width: 700px) {

	body {
		min-width: 700px;
	}

	header {
		padding: 20px 20px;
		border-color: #9098a0;
	}

	main {
		margin: 50px 20px;
	}

	nav#minitoc {
		padding: 0px 10px;
	}

	footer {
		padding: 5px 20px;
	}

	#sitetitle {
		padding-left: 0.15em;
	}

	h1 {
		font-size: 3em;
	}

	h2 {
		font-size: 1.8em;
		line-height: 1.5em;
	}

	h2:before {
		height: 1em;
	}

	main p, main li {
		line-height: 1.8em;
	}

	#legal {
		font-size: 0.8em;
	}
}


/********** high resolution **********/

@media print, (-webkit-device-pixel-ratio: 2), (min-resolution: 2dppx) {

	body {
		font-size: 1.1em; /* Iowan Old Style is quite small */
	}

	nav#minitoc li {
		font-size: 0.9em;
	}

	body, :lang(en), :lang(de), :lang(id) {
		font-family: "Iowan Old Style", "Georgia", serif;
	}

	:lang(en-fonipa) {
		font-family: "Menlo", sans-serif;
	}

	:lang(ban), :lang(jv) {
		font-size: 0.95em;
	}

	header :lang(en), footer :lang(en), nav :lang(en),
	header :lang(de), footer :lang(de), nav :lang(de),
	header :lang(id), footer :lang(id), nav :lang(id),
	code:lang(en), code :lang(en), div.pre :lang(en),
	code:lang(de), code :lang(de), div.pre :lang(de),
	code:lang(id), code :lang(id), div.pre :lang(id) {
		font-family: "Helvetica", "Verdana", sans-serif;
	}

	#contact label, #contact button, #contact textarea, #contact input, #contact select {
		font-family: "Iowan Old Style", "Georgia", "Malang", "Ubud", "Malang Web", "Ubud Web", serif;
	}
}


/********** print **********/

@media print {

	nav#minitoc, .noprint {
		display: none;
	}

	header, footer {
		background: white;
		border-color: #9098a0;
	}

	header, #sitetitle, main, footer, #legal {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	h1 {
		font-size: 24pt;
	}

	h2 {
		font-size: 16pt;
	}

	h3 {
		font-size: 12pt;
	}

	#sitetitle {
		font-size: 16pt;
	}

	main p, main li, main td, main th {
		font-size: 10pt;
		color: black;
		line-height: 1.5em;
	}

	main a {
		color: black;
		text-decoration: none;
		border: none;
	}

	code:lang(en), code :lang(en), div.pre :lang(en),
	code:lang(de), code :lang(de), div.pre :lang(de),
	code:lang(id), code :lang(id), div.pre :lang(id) {
		font-size: 9pt;
	}

	main h1 code, main h2 code, main h3 code {
		font-size: 0.9em;
	}

	#legal, #legal a {
		font-size: 8pt;
		border: none;
	}
}


/********** lindenbergsoftware.com **********/

#language {
	font-size: 1.5em;
	line-height: 1em;
	text-decoration: none;
	-webkit-tap-highlight-color: #7070ff;
	float: right;
}

#language img {
	height: 22px;
	width: 22px;
}

main a.appicon, main div.appstore a {
	color: inherit;
	text-decoration: none;
	border-bottom: none;
	-webkit-tap-highlight-color: inherit;
}

main a.appicon:hover, main div.appstore a:hover {
	color: inherit;
	background-color: inherit;
	border-bottom: none;
}

main a.appicon img {
	max-height: 5em;
	border-radius: 18px;
	margin-right: 20px;
	margin-bottom: 5px;
	float: left;
}

main div.keyboard {
	line-height: 0;
	margin-bottom: 1em;
	max-width: 100%;
}

main div.keyboard img {
	padding: 2px;
	max-width: calc(100% - 2px);
	border: 1px solid #9098a0;
}

main div.appstore {
	text-align: center;
	margin: 30px;
}


/********** medium screens **********/

@media (min-width: 450px) {

	main div.appstore {
		margin-top: 50px;
	}

	main div.appstore img {
		width: 270px;
		height: 80px;
	}
}