/* There isn't much space between the Bootstrap navbar and the page content */
#header {
	margin-bottom: 1em;
}

#header {
	border-bottom: 1px solid lightgrey;
}

#footer {
	border-top: 1px solid lightgrey;
}

#pagedate {
	float: right;
}

/* Bootstrap's navbar packs everything without margins or padding.
 * Ensure the search form has some space. */

#searchform {
	margin-left: 1em;
}

.parentlinks {
	margin-right: 1em;
}

/* Alignment of header and footer items of the default inline pages.
 * Using flexbox layout here, since it can wrap when things get too crowded.
 * It's a bit better than floats. */
.inlineheader {
	display: flex;
}

.inlineheader header {
	flex: 1 1 auto;
}

.inlineheader {
	flex: 0 1 auto;
}

.inlinefooter {
	display: flex;
	flex-wrap: wrap;
}

.inlinefooter .pageinfo {
	flex: 1 1 auto;
}

.inlinefooter .tags {
	flex: 0 1 auto;
}

.inline-actions {
	display: inline;
}

.inline-actions ul, .inline-actions li {
	list-style-type: none;
	display: inline;
}

/* Popups */
/* popup template and backlinks hiding */
.popup .balloon,
.popup .paren,
.popup .expand {
	position: absolute;
	z-index: 1000;
	display: none;
	color: #373a3c;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
}

.balloon ul {
	list-style: none;
	margin: 0;
	padding: 0.5em;
}

.popup:hover .balloon,
.popup:focus .balloon {
	display: inline;
}

/* Table style, similar to Bootstrap .table-border and with .table-inverse headers */
table {
	margin-bottom: 1em;
	background-color: white;
	display: block;
	overflow: auto;
}

table td, table th {
	border: 1px solid #eceeef;
	padding: 0.5em;
}

table th {
	color: #eceeef;
	background-color: #373a3c;
	border-color: #55595c;
}

table tr:hover {
	background-color: #f5f5f5;
}

/* Rounded corners on tables */
table {
	border-collapse: separate;
	border-spacing: 0;
}

table tr:first-child td:first-child, table tr:first-child th:first-child {
	border-top-left-radius: 0.25rem;
}
table tr:first-child td:last-child, table tr:first-child th:last-child {
	border-top-right-radius: 0.25rem;
}
table tr:last-child td:first-child {
	border-bottom-left-radius: 0.25rem;
}
table tr:last-child td:last-child {
	border-bottom-right-radius: 0.25rem;
}

/* Improve look of calendars */
.month-calendar td,
.month-calendar th,
.year-calendar td,
.year-calendar th {
	min-width: 2.5em;
	text-align: center;
}

.month-calendar-day-link, .year-calendar-month-link {
  background-color: #d9edf7;
}

/* Give RSS and Atom buttons an orange color */
.feedbutton {
	background: #ff8000;
	border-color: #e07000;
	color: white;
	font-weight: bold;
}

.feedbutton:hover {
	background: #ffc080;
}

/* Carousel alignment */
.carousel-page {
	margin: 1em;
}

.carousel-image {
	margin: auto;
}

/* Improve the Bootstrap blockquote style */
blockquote {
	border-left: 4px solid rgba(0,0,0,.1);
	padding-left: 0.5em;
}

/* Fix image width in cards. */
.card-img-top, .card-img-bottom {
	width: 100%;
	height: auto;
}

/* Dark mode */
@media only screen and (prefers-color-scheme: dark) {
body {
	background-color: #000;
	color: #aaa;
}

.bg-light, #header {
	background-color: #333 !important;
	border-color: #666;
}

.card {
	background-color: #000 !important;
	border-color: #666;
}

table, tbody {
	background-color: inherit;
}

table td, table th, #footer {
	border-color: #666;
}

blockquote {
	border-color: #444;
}

.card-header, #searchbox {
	background-color: #222;
	border-color: #666;
}

#searchform button {
	background-color: #666;
	border-color: #666;
}

#searchbox {
	color: #aaa;
}

.text-body {
	color: #aaa !important;
}

a {
	color: #5ae;
}

a:hover {
	color: #48d;
}

table tr:hover {
	background-color: #111;
}

thead th {
	background-color: #222;
	color: #ccc;
}

.navbar-toggler img {
	filter: invert(1);
}