/* variables ------------------------------------------- */
:root {
	--col-bgd-01: #eaeaea; /* light gray, background */
	--col-txt-02: #232323; /* dark gray, text */
	--col-hrf-03: #5298c6; /* blue, hyperlink */
	--col-nav-04: #363636; /* dark gray, navigation bar, menu */
	--col-txt-05: #9e9e9e; /* light gray, text, menu text */
	--col-tab-06: #ffffff; /* white, tab background */
	--col-txt-07: #ffffff; /* white, text */
	--col-nav-08: #cfcfcf; /* light gray, menu hover text */
	--col-tab-09: #dedede; /* gray, tab border, separator */
	--col-brd-10: rgba(0,0,0,.125); /* light gray, border */
	--col-bgd-11: rgba(0,0,0,.5); /* gray, counter background */
	--margin-top-txt: 6px; /* just for test */
}
.dark:root {
	--col-bgd-01: #000000; /* black, background */
	--col-txt-02: #dcdcdc; /* light gray, text */
	--col-hrf-03: #5298c6; /* blue, hyperlink */
	--col-nav-04: #363636; /* dark gray, navigation bar, menu */
	--col-txt-05: #616161; /* gray, text, menu text */
	--col-tab-06: #2d2d2d; /* dark gray, tab background */
	--col-txt-07: #ffffff; /* white, text */
	--col-nav-08: #cfcfcf; /* light gray, menu hover text */
	--col-tab-09: #1f1f1f; /* gray, tab border, separator */
	--col-brd-10: rgba(255,255,255,.15); /* gray, border */
	--col-bgd-11: rgba(0,0,0,.5); /* gray, counter background */
	--margin-top-txt: 6px; /* just for test */
}
/* general settings ------------------------------------ */
body {
	margin: 0;
	background-color: var(--col-bgd-01);
}
*, ::after, ::before {
	box-sizing: border-box;
}
p, div, button, span {
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--col-txt-02);
}
.page-w {
	max-width: 670px;
	margin: 0 auto;
	padding: 5px;
}
main {
	margin-top: 32px;
}
main a {
	text-decoration: none;
	color: var(--col-hrf-03);
}
main a:hover {
	text-decoration: underline;
}
/* navbar ---------------------------------------------- */
nav {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #363636;
	border-bottom: 1px solid var(--col-bgd-01);
	transition: transform .5s;
	z-index: 1001;
}
nav.hidden {
	transform: translateY(-100%);
}
.m-menu a, .logo {
	display: block;
	background-color: #363636;
	text-decoration: none;
	padding: 6px 8px;
	color: #9e9e9e;
}
.logo {
	margin-left: 4px;
	color: #ffffff;
}
.m-menu a:hover, .s-menu a:hover, .icon:hover {
	color: #cfcfcf;
	cursor: pointer;
}
.m-menu .active > a {
	color: #ffffff;
}
.m-menu, .s-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 599.98px) {
	.m-menu, .s-menu {
		display: none;
	}
	.s-menu a {
		background-color: #363636;
		padding-left: 18px;
	}
	nav span.icon {
		float: right;
		padding: 6px 10px;
		display: block;
		color: #9e9e9e;
	}
}
@media screen and (min-width: 600px) {
	nav {
		height: 37px;
	}
	nav span.icon {
		display: none;
	}
	.logo {
		float: left;
	}
	.m-menu li {
		float: left;
		position: relative;
	}
	.m-menu li.right {
		float:right;
	}
	.m-menu li.right:last-child {
		margin-right: 4px;
	}
	.s-menu {
		display: none;
		position: absolute;
		white-space: nowrap;
		z-index: 1002;
	}
	.s-menu a {
		padding: 4px 8px;
	}
	.s-menu li {
		width: 100%;
	}
}
/* index page layout ----------------------------------- */
table.index {
	margin: 0.5rem 0;
}
.index tr td {
	vertical-align: text-top;
	padding: 0;
}
.index tr td.idat, table.index tr td.iday {
	white-space: nowrap;
	padding-right: 5px;
}
.index tr td.idat:empty, table.index tr td.iday:empty {
	padding: 0;
}
@media (max-width: 599.98px) {
	table.index tr td.iday {
		display: none;
	}
}
ul.index {
	margin: 8px 1px;
	padding: 0;
}
.index li {
	list-style: none;
	margin: 2px 0 2px 20px;
	text-indent: -20px;
}
/* pages ----------------------------------------------- */
.tab {
	border: 1px solid var(--col-tab-09);
	border-radius: .25rem;
	margin-top: 5px;
	padding: 0 10px;
	background-color: var(--col-tab-06);
}
.tab-header {
	padding: 0.5rem 0;
	margin: 0 1px;
	border-bottom: 1px solid var(--col-tab-09);
}
.tab-footer {
	padding: 0.5rem 0;
	margin: 0 1px;
	border-top: 1px solid var(--col-tab-09);
}
p {
	text-align: justify;
	margin: 0.5rem 1px;
}
.light {
	color: var(--col-txt-05);
}
blockquote {
	display: block;
	position: relative;
	border-left: 5px solid var(--col-brd-10);
	padding-left: 10px;
	margin: 0.5rem 1px;
	text-align: justify;
	color: var(--col-txt-05);
}
blockquote > footer {
	display: inline;
	font-size: 90%;
}
blockquote > footer::before {
	content: '\00a0 \007c \00a0';
}
/* pictures -------------------------------------------- */
.pic-gallery {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0;
	display: flex;
}
.g-pic {
	outline: 1px solid var(--col-brd-10);
	outline-offset: -1px;
	margin: 1px;
}
.g-pic img {
	width: 100%;
	height: auto; /* size in pixels for fixed width ------ */
	max-height: 185px; /* no needed for fixed width ------ */
	vertical-align: middle;
	object-fit: cover;
}
.h-pic {
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}
.pic-gallery > *:last-child {
	margin: 0;
	outline: 0;
	outline-offset: 0;
	overflow: hidden;
}
/* gallery flexbox ------------------------------------- */
.pic-page {
	flex-wrap: wrap;
}
/* travel flexbox -------------------------------------- */
.pic-travel-counter {
	position: relative;
}
.pic-travel-counter span {
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #ffffff;
	background: rgba(0,0,0,.5);
	padding: 5px 10px;
	border-radius: 13px;
	pointer-events: none;
	z-index: 10;
}
/* map ------------------------------------------------- */
.embed-map {
	overflow: hidden;
	margin: 0.5rem 0;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	border: 1px solid var(--col-tab-06);
}
.embed-map iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	border: 1px solid var(--col-brd-10);
}