/*
 *                 (\o/)
 *                 (/|\)
 * ---===============================---
 *            BASE STYLESHEET
 * ---===============================---
 *
 */

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }

html {
	line-height: 1.4;
	color: #333;
}
body { display: block; }

.container {
	max-width: 900px;
	padding: 0 1rem;
	margin: 0 auto;
}

/* == LINKS ================================================================ */

a {
	color: #468aa7;
	text-decoration: none;
}
a:hover {
	color: black;
	text-decoration: underline dotted;
}

a.itemlink::before { content: "{"; }
a.itemlink::after { content: "}"; }
a.taglink::before { content: "#"; }

/* == NAVBAR =============================================================== */

.navbar {
	padding: 0.5rem 0 1.6rem 0;
}
.navbar a {
	color: #999;
}
.navbar a:hover {
	color: black;
}
.navbar .active {
	font-weight: bold;
	color: #333;
}
.navbar .separator {
	cursor: default;
	pointer-events: none;
	user-select: none;
}

.navbar-menu-left {
	display: inline;
}
.navbar-menu-left a {
	margin-right: 0.5rem;
}
.navbar-menu-right {
	display: inline;
	float: right;
}
.navbar-menu-right a {
	margin-left: 0.5rem;
}

.navbar-title a {
	color: #333;
	font-weight: bold;
	display: inline-block;
	margin-right: 1.5rem;
}

.navbar-menu-aside {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 100;
	text-align: right;
}
.navbar-menu-aside summary::marker,
.navbar-menu-aside summary::-webkit-details-marker {
	display: none;
}
.navbar-menu-aside summary {
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: pointer;
	display: block;
}
.navbar-aside-icon {
	box-sizing: content-box;
	width: 20px;
}
.navbar-menu-aside .content {
	background-color: white;
	border: 1px solid black;
	overflow: scroll;
	max-height: calc( 100vh - 4.5rem );
	margin-bottom: 2rem;
	padding: 1rem;
}
 /* Hide scrollbar for Chrome, Safari and Opera */
.navbar-menu-aside .content::-webkit-scrollbar {
	display: none;
}
.navbar-menu-aside .content a {
	display: block;
}
.navbar-menu-aside hr {
	margin: 10px -1rem;
	width: auto;
}
.navbar-menu-aside span {
	opacity: 0.3;
	font-size: 0.9rem;
}


/* == FOOTER =============================================================== */

footer {
	color: #999;
	font-size: 0.9rem;
	margin-bottom: 2rem;
}

.navbar-footer {
	border-top: 1px dotted #999;
	margin-bottom: 1rem;
}


/* == MAIN ELEMENTS ======================================================== */

h1,h2,h3,h4,h5 {
	line-height: 1.15;
	margin: 1.5rem auto 1rem; /* top | left and right | bottom */
}
p {
	margin: 1rem 0;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
code {
	color: #555;
	font-size: 0.8rem;
	font-family: monospace;
	padding: 0 2px;
}
kbd {
	font-size: 0.8rem;
	border: 1px solid #bbb;
	padding: 0 2px;
}
blockquote {
	margin: 2rem 0;
	padding: 0 2rem;
	color: #777;
}
dt {
	font-weight: bold;
}
dt:not(:first-child) {
	margin-top: 0.5rem;
}
dd {
	margin-left: 1.5rem;
}
hr {
	border: unset;
	border-bottom: 1px dotted #999;
	margin: 2rem auto;
}
table {
	border-collapse: collapse;
	margin: 1rem auto;
}
table th,
table td {
	border: 1px solid #999;
	padding: 2px 5px;
}
table th {
	background-color: #ddd;
}
table td {
	background-color: white;
}
ul,ol { margin: 0.5rem 0 0.5rem 1rem; }

ul {
	list-style-type: square;
}
ol > li::marker {
	font-weight: bold;
}
video {
	margin: 1rem 0;
	display: block;
	width: 100%;
}
figure.figvideo {
	all: unset;
	display: block;
}
figure.figvideo figcaption {
	margin-top: 0.2rem;
}
section {
	clear: both;
}
summary {
	cursor: pointer;
}


.addon-error {
	opacity: 0.5;
	font-size: 0.9rem;
	color: red;
	display: inline-block;
}

.item-show-hide {
	position: absolute;
	top: 8px;
	right: 10px;
	color: #999;
	cursor: default;
	font-weight: bold;
}

/* == DOWNLOADS ============================================================ */

.file-download a {
	font-weight: bold;
}
.files-download-list * {
	margin: 0;
}
.files-download-list span.file-download {
	padding-right: 2pt;
	display: inline-block;
}
/*.files-download-list span.file-download:not(:last-child)::after {*/
.files-download-list span.file-download::after {
	content: "; ";
}


/* == PAGE HEADER INFO ===================================================== */

.item-banner {
	text-align: center;
}
.item-banner img {
	max-width: 100%;
}
.item-banner .graphic-type-thumb,
.item-banner .graphic-type-logo {
	margin-top: 1rem;
}

.item-connections-group {
	margin-top: 0.5rem;
	padding: 0.2rem 0;
	border-top: 1px dotted;
	border-bottom: 1px dotted;
	font-size: 0.8rem;
	line-height: 1.2;
	font-weight: bold;
}
.item-connections-group ul {
	padding: 0;
	margin: 0 0 0.5rem 0;
}


/* ITEM CONNECTIONS/TAGS */

.item-tags,
/* this is a details element */
.item-connections {
	margin: 0.2rem 0;
}
.item-connections-group .content {
	padding-left: 1.5rem;
	border-left: 2px solid #999;
	margin: 0.5rem 0 0.5rem 1px;
}
.item-connections-group .taglink,
.item-connections-group .itemlink {
	margin-left: 5pt;
	display: inline-block;
}


/* == LAYOUTS ============================================================== */

/* === DEFAULT === */

.item-body {
	padding-top: 1.5rem;
}
.item-title {
	margin: 0;
	line-height: 1;
	font-size: 2rem;
	text-wrap: balance;
}
.item-author,
.item-summary,
.item-details,
.item-other-info {
	line-height: 1.3;
	margin: 0;
}
.item-author {
	font-style: italic;
}
.item-content {
	padding: 1rem 0;
}
.item-footer {
	color: #999;
	font-size: 0.9rem;
	text-align: center;
}

.text-right {
	display: block;
	text-align: right;
}
.text-center {
	display: block;
	text-align: center;
}
.align-center {
	display: block;
	margin: 2.5rem auto;
}

.go-back {
	font-weight: bold;
	font-size: 1.2rem;
}

.button {
	margin: 0.5rem;
	padding: 0.5rem;
	display: inline-block;
	border-top: 1px dashed;
	border-bottom: 1px dashed;
	font-weight: bold;
}


/* === LAYOUT: DEFAULT === */
/* Default page layout */


/* === LAYOUT: HOMEPAGE === */
.layout-homepage .item-header {
	padding: 20px 0;
	text-align: center;
}
.homepage-logo {
	width: 75px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	pointer-events: none;
}
.layout-homepage .item-connections-group {
	margin: 1rem 0 0 0;
	padding: 0;
}
.layout-homepage .item-connections-group * {
	border: none;
}


/* === LAYOUT: WIKI === */
.layout-wiki .item-footer {
	font-family: monospace;
	font-size: 0.7rem;
	text-align: right;
}
.layout-wiki .item-footer * {
	margin: 0 auto;
}
.layout-wiki code {
	background-color: #ddd;
	border: 1px solid #bbb;
}
.layout-wiki pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: 0.8rem;
	border-left: 2px solid #eee;
	padding-left: 0.3rem;
}
.layout-wiki pre code {
	border: none;
	white-space: pre;
	display: block;
	background-color: #eee;
	padding: 1rem 1rem;
	overflow-x: auto;
}

/* Wiki heading numbering */
.nocount::before {
	content: none !important;
	counter-increment: none !important;
}
.layout-wiki .item-content {
	counter-reset: h2counter;
}
.layout-wiki .item-content h1 { counter-reset: h2counter; }
.layout-wiki .item-content h2::before {
	content: counter(h2counter) ". ";
	counter-increment: h2counter;
}
.layout-wiki .item-content h2 { counter-reset: h3counter; }
.layout-wiki .item-content h3::before {
	content: counter(h2counter) "." counter(h3counter) ". " ;
	counter-increment: h3counter;
}
.layout-wiki .item-content h3 { counter-reset: h4counter; }
.layout-wiki .item-content h4::before {
	content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". " ;
	counter-increment: h4counter;
}
.layout-wiki .item-content h4 { counter-reset: h5counter; }
.layout-wiki .item-content h5::before {
	content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ". " ;
	counter-increment: h5counter;
}
.layout-wiki .item-content h5 { counter-reset: h6counter; }
.layout-wiki .item-content h6::before {
	content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ". " ;
	counter-increment: h6counter;
}



/* === LAYOUT: GALLERY === */
/* === LAYOUT: PROJECT === */

/* === LAYOUT: BLOGPOST === */
.layout-blogpost .blogpost-info {
	margin: 0.2rem 0;
	color: #999;
	font-size: 0.9rem;
}


/* == ADDONS =============================================================== */

/* === SITEMAP === */

.items-index,
.tags-index,
.items-index-treeview,
.items-index-itemcard {
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}
.items-index li a,
.items-index dt {
	font-weight: bold;
	line-height: 1.2;
}
.items-index dd {
	margin: 0;
}
.items-index div {
	line-height: 1.2;
	margin: 0 0 1rem 1.5rem;
	font-size: 0.9rem;
}
.items-index .itemlink,
.items-index .taglink {
	margin-right: 5pt;
	display: inline-block;
}
.items-index .author {
	font-style: italic;
}
.items-index .description {
	font-style: italic;
	opacity: 0.8;
}
.items-index .permalink {
	font-weight: bold;
}

.items-index-treeview { margin: 1rem 0; }
.items-index-treeview ul { margin: 0 0 0 1rem; }
.items-index-treeview > ul > li { }
.items-index-treeview a { font-weight: bold; }
.items-index-treeview small { opacity: 0.7; }
.items-index-treeview del { opacity: 0.7; font-style: italic; text-decoration: none; }


/* === TAGS LIST === */
.tags-index a {
	font-weight: bold;
}
.tag-container {
}
.tag-container h2 {
	font-size: 1.7rem;
	margin: 0;
}
.tag-container .tag-summary {
	font-style: italic;
	font-size: 1.1rem;
	margin: 0;
}

/* === AUTHORS LIST === */
.authors-index a {
	font-size: 1.2rem;
	font-weight: bold;
}
.authors-container {
}
.authors-container h2 {
	font-size: 1.7rem;
	margin: 0;
}
.authors-container .author-site,
.authors-container .author-email,
.authors-container .author-contact,
.authors-container .author-info {
	font-size: 1.1rem;
	margin: 0;
}


/* === ITEMCARD === */
.itemcard {
	display: flex;
	margin: 1.5rem 0;
}
.itemcard .thumb {
	background-color: #eee;
	background: repeating-linear-gradient(
	45deg,
	#eee,
	#eee 10px,
	#ddd 10px,
	#ddd 20px
	);
	width: 4rem;
	height: 4rem;
	max-width: 4rem;
	object-fit: cover;
	border: 1px solid #999;
	box-shadow: 0.4rem 0.4rem 0 #ddd;
	margin-right: 1rem;
}
.itemcard .thumb:hover {
	box-shadow: 5px 5px 0 #aaa;
	filter: contrast(80%);
}
.itemcard .info * {
	margin: 0 0 3pt 0;
	line-height: 1.1;
}
.itemcard .title {
	font-weight: bold;
	font-size: 1.2rem;
	text-wrap: balance;
}
.itemcard .summary,
.itemcard .details,
.itemcard .authors {
	font-size: 0.9rem;
}
.itemcard .tags {
	margin-top: 0.2rem;
	font-size: 0.9rem;
}
.itemcard .taglink:not(:last-child) {
	margin-right: 5pt;
	display: inline-block;
}

/* no space between classes itemcard and poster */
.itemcard.poster {
	display: block;
}
.itemcard.poster .thumb {
	all: unset;
	width: 100%;
}
.itemcard.poster .info {
	text-align: center;
	margin-top: 0.5rem;
}
/* remove margin and use gap when using gallery mode */
.gallery-columns-base .itemcard {
	margin: 0 0 1rem 0;
}


/* === ITEMS PRINT ENTRIES === */

.feed-link {
	margin-top: 5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
}
.feed-link img {
	width: 0.6rem;
	vertical-align: baseline;
}

.itemsprint-entries {
	margin: 3rem 0;
}
.itemprint-entry {
	margin-bottom: 3rem;
}
.itemprint-entry .header {
	margin-bottom: 1rem;
}
.itemprint-entry .header p,
.itemprint-entry-basic .header p {
	margin: 0.2rem 0;
	color: #999;
	font-size: 0.9rem;
}
.itemprint-entry .header h1 {
	margin: 1.5rem 0 0 0;
	font-size: 1.6rem;
}
.itemprint-entry-basic {
	margin-bottom: 1.5rem;
}


/* == FIGURES AND GALLERY ================================================== */

figure {
	display: inline-block;
	margin: 0 auto;
}
figure img {
	border: 1px solid #555;
}
figure img:hover {
	box-shadow: 0 0 10px #ddd;
}
figure .without-border {
	border: none;
}
figure .without-border:hover {
	box-shadow: unset;
}
figcaption {
	margin: 0.5rem 0 0.1rem 0;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1;
}

.figure-custom-width img {
	width: 100%;
}

.gallery {
	margin: 1rem 0;
}
.gallery img {
	max-width: 100%;
	display: block;
}
.image-format-square {
	aspect-ratio: 1/1;
	object-fit: cover;
}

[class*='grid-columns-'] {
	display: grid;
	grid-gap: 1rem;
}
[class*='grid-columns-'] > * {
	margin: 0;
}

.grid-group { margin: 2rem 0; }
.grid-group > .itemcard,
.grid-group > figure {
	margin: 0;
	padding: 0;
}

.grid-columns-1,
.grid-min-columns-1 {
	grid-template-columns: 1fr;
}
.gallery .grid-columns-1 figure,
.gallery .grid-min-columns-1 figure {
	margin: auto;
}
.gallery .grid-columns-1 img,
.gallery .grid-min-columns-1 img {
	aspect-ratio: unset;
	object-fit: unset;
}

.grid-columns-2 { grid-template-columns: 1fr 1fr; }
.grid-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-columns-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-columns-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.grid-columns-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

.grid-columns-2 img,
.grid-columns-3 img,
.grid-columns-4 img,
.grid-columns-5 img,
.grid-columns-6 img {
	width: 100%;
}

.grid-columns-auto,
.grid-min-columns-auto {
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important;
}

.grid-rows-same-height {
	grid-auto-rows: 1fr;
}

.grid-gap-small  { grid-gap: 0.5rem; }
.grid-gap-medium { grid-gap: 1rem; }
.grid-gap-large  { grid-gap: 2rem; }
.grid-gap-larger { grid-gap: 3rem; }


.text-columns-2 { gap: 1rem; columns: 2; vertical-align: top; }
.text-columns-3 { gap: 1rem; columns: 3; vertical-align: top; }
.text-columns-4 { gap: 1rem; columns: 4; vertical-align: top; }


/* == OTHER THINGS ========================================================= */

.figure-left {
	display: inline;
	float: left;
	clear: both;
	margin: 0 1rem 0 2px;
}
.figure-right {
	vertical-align: middle;
	display: inline;
	float: right;
	clear: both;
	margin: 0 2px 0 1rem;
}
.figure-center {
	display: block;
	padding: 1rem 0;
	margin: 1.5rem auto 1rem auto;
	clear: both;
	text-align: center;
}

/* aside note / notice */
.item-content aside {
	background-color: #eee;
	border: 1px solid #ccc;
	margin: 2rem 0;
	padding: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.1;
}
.item-content aside * {
	margin: 0;
}
.item-content aside code {
	font-size: 0.8em;
}
.item-content .notice {
	background-color: #F1E6C2;
	border: 1px solid #E7AB19;
	padding: 0 5px;
}


/* == ERROR INFO =========================================================== */

.error {
	text-align: center;
	margin: 3rem auto;
}
.error big {
	font-size: 2rem;
	font-weight: bold;
}
.error code {
	all: unset;
	font-family: monospace;
	font-weight: bold;
	text-decoration: underline;
}


/* == MEDIA QUERIES ======================================================== */

@media screen and (max-width: 700px) {
	/* NAVBAR */
	.navbar-title {
		display: block;
		font-size: 1.3rem;
		max-width: calc(100% - 3rem);
		margin-top: 0.5rem;
	}
	.navbar-title a {
		display: inline;
	}
	.navbar a {
		display: inline-block;
		padding-top: 4px;
	}
	.navbar-menu-right {
		display: inline;
		float: unset;
	}
	.navbar-menu-right a {
		margin-right: 0.5rem;
		margin-left: 0;
	}

	.navbar-menu-aside {
		bottom: unset;
		top: 1.3rem;
	}
	.navbar-menu-aside a {
		padding: 0;
		line-height: 2;
	}
	.navbar-menu-aside summary {
		bottom: unset;
		top: 0;
	}
	.navbar-menu-aside .content {
		margin-bottom: 0;
		margin-top: 2rem;
		min-width: 150px;
	}

	.aside-menu-active {
		display: none !important;
	}

	.item-show-hide {
		top: 0.1rem;
		right: 1rem;
	}

	.figure-left,
	.figure-right {
		float: unset;
		display: block;
		padding: 0;
		margin: 1rem auto;
		text-align: center;
	}
	.grid-columns-2 { grid-template-columns: 1fr 1fr; }
	.grid-columns-3 { grid-template-columns: 1fr 1fr; }
	.grid-columns-4 { grid-template-columns: 1fr 1fr; }
	.grid-columns-5 { grid-template-columns: 1fr 1fr; }
	.grid-columns-6 { grid-template-columns: 1fr 1fr 1fr; }

	.text-columns-2 { columns: 1; }
	.text-columns-3 { columns: 2; }
	.text-columns-4 { columns: 2; }
}

@media screen and (max-width: 500px) {
	/* GALLERY */
	[class*='grid-columns-'] { grid-template-columns: 1fr; }
	[class*='grid-columns-'] figure { display: block; }
	[class*='grid-columns-'] img,
	.image-format-square {
		height: auto;
		object-fit: unset;
		aspect-ratio: unset;
	}

	/* GRID-MIN-COLUMNS */
	[class*='grid-min-columns-'] {
		display: grid;
		grid-gap: 0.5rem;
	}
	[class*='grid-min-columns-'] .image-format-square {
		aspect-ratio: 1/1 !important;
		object-fit: cover !important;
	}
	.grid-min-columns-2 { grid-template-columns: 1fr 1fr; }
	.grid-min-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
	.grid-min-columns-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
	.grid-min-columns-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	.grid-min-columns-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

	.text-columns-2 { columns: 1; }
	.text-columns-3 { columns: 1; }
	.text-columns-4 { columns: 1; }
}