/* stylesheet made by BlueBear. freeware. copy as you wish. */

html {

	/* fonts, available at Google Fonts;
	 * use: https://fonts.googleapis.com/css?family=Crimson%20Pro|Lato ...
	 */
	--heading-font: Crimson Pro, Garamond, serif;
	--base-text-font: Crimson Pro, Verdana, sans-serif;
	--alt-text-font: var(--base-text-font);	/* alternative font for special parts */
	--tooltip-font: var(--base-text-font);

	/* font sizes */
	--h3-text-size: 22pt;
	--h2-text-size: 24pt;
	--h1-text-size: 26pt;
	--th-text-size: 22pt;
	--base-text-size: 16pt;					/* W3 Schools recommendation (minimum) */
	--small-text-size: 14pt;

	/* color scheme */
	--base-text-color: OldLace;
	--alt-text-color: Gray;                 /* alternative text color for marking special parts. */
	--link-color: DodgerBlue;
	--border-color: DarkSlateGray;
	--shining-color: Ivory;
	--deep-background-color: rgb(8, 8, 8);
	--background-color: rgb(32, 32, 32);
	--ui-background-color: var(--deep-background-color);

	/* object and section sizing */
	--max-content-width: 1280px;			/* 4*320, usually 1/4 is the side panel */
	--max-tooltip-width: 256px;

	--padding-unit: 4px;
}
body {

	/* background of the whole page */
	background-color: var(--background-color);

	/* color default */
	color: var(--base-text-color);

	/* font defaults */
	font-family: var(--base-text-font);
	font-size: var(--base-text-size);
	font-variant: normal;

	/* apply box size calculation that is used for flexbox style */
	box-sizing: border-box;
}

a { color: var(--link-color); }
a:hover { color: var(--shining-color); }

/* ensure that all used headings use the heading font */
h1 { font-family: var(--heading-font); font-variant: small-caps; font-size: var(--h1-text-size); }
h2 { font-family: var(--heading-font); font-variant: small-caps; font-size: var(--h2-text-size); }
h3 { font-family: var(--heading-font); font-variant: small-caps; font-size: var(--h3-text-size); }
th { font-family: var(--heading-font); font-variant: small-caps; font-size: var(--th-text-size); }

/* a list of items that are shown as bubbles on multiple lines */
ul.bubbles {
	list-style: none;
}
ul.bubbles > li {
	display: inline-block;
	margin: 0;
	padding: var(--padding-unit);
}

/* text that contains a tooltip with details */
.tooltip_holder {
	position: relative;
	display: inline-block;
	color: var(--link-color);
	min-width: 9px;
	font-family: var(--tooltip-font);
	font-size: var(--base-text-size);
	text-align: center;
	vertical-align: top;
}

/* a whole list item can be a tooltip holder */
li.tooltip_holder {
	color: var(--base-text-color);
	font-family: var(--base-text-font);
	font-size: var(--base-text-size);
	border-bottom: 1px dotted var(--link-color);
}

/* the tooltip detail, revealed on mouse hover */
.tooltip {
	font-family: var(--tooltip-font);
	font-variant: normal;
	font-size: var(--small-text-size);
	font-weight: normal;
	width: var(--max-tooltip-width);
	overflow: auto;
	background-color: black;
	color: var(--base-text-color);
	text-align: left;
	padding: var(--padding-unit);
	border: 1px solid var(--border-color);
	border-radius: var(--padding-unit);
	position: fixed;
	z-index: 1;					/* ensure tooltip covers the normal content */
	visibility: hidden;			/* important: when not visible, do not react on hover */
	opacity: 0;					/* initially invisible */
	transition: opacity 0.3s;	/* appear/disappear gradually */
}

/* when the tooltip holder is hovered over, show the tooltip */
.tooltip_holder:hover .tooltip {
	visibility: visible;		/* visible and reacting on hover, keeping it on as needed */
	opacity: 1;					/* full opacity */
}

div.quote {
	display: block;
	color: var(--alt-text-color);
	font-family: var(--alt-text-font);
}
div.quote_author {
	text-align: right;
}

/* navigation bar */
nav {

	/* always use the full width of the screen (Mac-like), even when the contents are shorter */
	width: 100%;

	/* ensure it is always high enough as one line of text, which is 20pt */
	height: 20pt;

	/* place it to the top of the page */
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 1;					/* if necessary, cover other items */

	background-color: var(--deep-background-color);

	/* use the same font as headings */
	font-family: var(--heading-font);
	font-variant: small-caps;

	vertical-align: top;

	border: 1px solid var(--border-color);
}
nav a {

	/* show items in a line, not column */
	display: inline-block;

	/* some horizontal padding so that links are not stuck together */
	padding: 0 var(--padding-unit);

	/* hide the default underlining as it is disturbing in a menu */
	text-decoration: none;
}
nav a:hover {
	background-color: var(--link-color);
}
nav img {
	background-color: var(--deep-background-color);
	width: 80px;
	float: left;
	border-radius: var(--padding-unit);
	padding-right: var(--padding-unit);
	padding-bottom: var(--padding-unit);
}

/* the main columnar structure; "content" is the wrapper,
 * and contains "side_column" and "main_column".
 * The navbar is not part of this; it is separate, usually on the top.
 */
.content {
	display: flex;
	background-color: var(--background-color);
	max-width: var(--max-content-width);

	/* ensure there is enough place above for the navbar which is 22pt tall,
	 * and horizontally place the content to the middle of the page
	 */
	margin: 22px auto;

	/* some extra pixels for better visual separation */
	padding-top: 8px;
}
.side_column {
	width: 25%;
	float: left;
	overflow: auto;
	text-align: left;
}
.main_column {
	width: 75%;
	float: left;
	overflow: auto;
	text-align: left;
	padding-left: var(--padding-unit);
}

/* single column variant */
.single_column_content {
	background-color: var(--background-color);
	max-width: var(--max-content-width);

	/* ensure there is enough place above for the navbar which is 22pt tall,
	 * and horizontally place the content to the middle of the page
	 */
	margin: 22px auto;

	/* some extra pixels for better visual separation */
	padding-top: 8px;

	text-align: left;
}

/* image(s) in the side column are icons unless specified otherwise */
.side_column > img {
	max-width: 100%;
}

ul.menu {
	padding: 0 0;
	margin: 0 0;
}
ul.menu > li {
	text-align: center;
	display: block;
	font-family: var(--heading-font);
	font-size: var(--th-font-size);
	font-variant: small-caps;
	padding-bottom: var(--padding-unit);
	margin-bottom: var(--padding-unit);
}
ul.menu > li:hover {
	background-color: var(--ui-background-color);
	border-radius: var(--padding-unit);
}
ul.menu > li > a {
	text-decoration-line: none;
}
ul.menu > li > a:hover {
	color: var(--shining-color);
}

hr {
	border: 1px solid var(--border-color);
}

div.blog {
	border-left: 4px dotted var(--border-color);
	padding-left: 16px;
}
div.blog h3 {
	border-left: 4px solid var(--border-color);
	margin-left: -20px;
	padding-left: 16px;
}
div.blog p {
	white-space: pre-line;
}