/* ------*/
/* Fonts */
/* ------*/

@font-face {
	font-family: 'OpenSans Regular' ; 
	src: url('./includes/fonts/open_sans_regular.woff') ;
	}
@font-face {
	font-family: 'OpenSans Light' ;
	src: url('./includes/fonts/open_sans_light.woff') ;
	}
@font-face {
	font-family: 'OpenSans Bold' ;
	src: url('./includes/fonts/open_sans_bold.woff') ;
	}

/* ------------------------------ */
/* Styles for main structure tags */
/* ------------------------------ */

html {
	margin: 0 ;
	padding: 0 ;
	width: 100% ; 
	height: 100% ;
	}

body {
	display: grid ;
	grid-template-rows: auto 1fr auto ;
	min-height: 100vh ;
	width: 100% ; 
	margin: 0 ;
	padding: 0 ;
	font-family: 'OpenSans Regular', sans-serif ;
	font-size: 15px ;
	line-height: 1.6 ;
	color: #FFFFFF ;
	background-color: #000000 ;
	}

header {
	display: block ;
	padding: 20px ;
	font-family: 'OpenSans Bold', sans-serif ;
	font-size: 18px ;
	text-align: center ;
	text-shadow: 0 0 10px #000000 ;
	background-color: #29292F ;
	}

nav {
	display: grid ;
	grid-template-rows: auto ;
	grid-gap: 20px ;
	padding: 20px ;
	text-align: center ;
	text-shadow: 0 0 10px #000000 ;
	background-color: #29292F ;
	}

aside {
	padding: 20px ;
	background-color: #29292F ;
	}

article {
	padding: 20px ;
	background-color: #29292F ;
	}

footer {
	display: grid ;
	grid-template-columns: 50px auto 50px ;
	grid-gap: 20px ;
	padding: 20px ;
	text-align: center ;
	background-color: #29292F ;
	}

/* --------------------------- */
/* Styles for main inline tags */
/* --------------------------- */

a {
	color: #DEC79B ;
	cursor: pointer ;
	text-decoration: none ;
	}

b {
	font-family: 'OpenSans Bold', sans-serif ;
	}

cite {
	color: #00FF00 ;
	}

figure {
	margin: 0 ;
	padding: 0 ;
	}

figcaption {
	padding: 10px ;
	font-size: 13px ;
	text-align: center ;
	}

img {
	width: auto ;
	height: auto ;
	max-width: 100% ;
	}

img[src*=".svg"] {
	margin: 5px ;
	}

input[type="search"] {
	width: 90% ;
	margin-top: 10px ;
	margin-bottom: 20px ;
	border: none ;
	}

input[type="text"] {
	width: 250px ;
	margin-top: 10px ;
	margin-bottom: 20px ;
	border: none ;
	}

/* ------------------ */
/* Styles for classes */
/* ------------------ */

.skip {
	position: absolute ;
	top: -500px ;
	}

.thumbnail {
	display: block ;
	float: left ;
	width: auto ;
	margin-bottom: 20px ;
	}

.options {
	display: block ;
	float: right ;
	width: auto ;
	}

.metadata {
	display: block ;
	clear: both ;
	width: 100% ;
	font-size: 13px ;
	}

.pass {
	margin: 5px ;
	padding: 5px ;
	background-color: #006400 ;
	}

.fail {
	margin: 5px ;
	padding: 5px ;
	background-color: #8B0000 ;
	}

.map {
	position: absolute ;
	width: 100% ;
	height: 100% ;
	}

/* ----------------------- */
/* Styles for grid layouts */
/* ----------------------- */

/* Grid für den Bereich <main> mit <aside> und <section> */
.grid-main {
	display: grid ;
	grid-template-rows: auto ;
	grid-gap: 10px ;
	margin: 10px ;
	}

/* Grid für den Bereich <main> mit voller Breite der Kästchen */
.grid-main-full {
	display: grid ;
	grid-template-rows: auto ;
	grid-gap: 10px ;
	margin: 10px ;
	}

/* Grid für den Bereich <section> mit voller Breite der Kästchen */
.grid-main-section {
	display: grid ;
	grid-template-colums: auto ;
	grid-gap: 10px ;
	}

/* Grid for mainpage, galleries and exposition */
.grid-main-mainpage {
	display: grid ;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
	grid-gap: 10px ;
	margin: 10px ;
	}

/* Grid for images on mainpage, galleries and exposition */
.grid-main-mainpage figure img {
	width: 100% ;
	height: 200px ;
	object-fit: cover ;
	}

/* Grid for data in treeindex, treelist, treerecent, treesearch and treeview */
.grid-main-preview {
	display: grid ;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
	grid-gap: 10px ;
	}

/* Grid for data in imageview and slideshow */
.grid-main-fullview {
	display: grid ;
	grid-template-colums: auto ;
	grid-gap: 10px ;
	margin-top: 20px ;
	text-align: center ;
	}

/* Grid for data in overview */
.grid-main-overview {
	display: grid ;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
	grid-gap: 10px ;
	margin: 20px ;
	}

/* Grid for images in overview */
.grid-main-overview figure img {
	width: 100% ;
	height: 300px ;
	object-fit: cover ;
	}

/* Grid for navigation */
.grid-main-info {
	display: grid	;
	grid-template-columns: 20% auto 20% ;
	padding: 10px ;
	text-align: center ;
	background-color: #29292F ;
	}

/* Grid for left-side icons in navigation */
.grid-main-info-left {
	display: grid ;
	grid-template-rows: auto auto auto auto ;
	}

/* Grid for left-side icons in navigation */
.grid-main-info-middle {
	display: grid ;
	grid-template-rows: auto auto ;
	}

/* Grid for right-side icons in navigation */
.grid-main-info-right {
	display: grid ;
	grid-template-rows: auto auto auto auto ;
	}

/* --------------- */
/* Styles for menu */
/* --------------- */

nav div ul {
	display: none ;
	margin: 0 ;
	padding: 0 ;
	}

nav div input {
	display: none ;
	}

nav div label {
	display: block ;
	font-family: 'OpenSans Bold', sans-serif ;
	color: #DEC79B ;
	cursor: pointer ;
	}

nav div input:checked + label + ul {
	display: block ;
	margin-bottom: 10px ;
	}

nav div ul li {
	list-style-type: none ;
	margin-top: 5px ;
	}

/* --------------- */
/* Styles for tree */
/* --------------- */

aside a {
	padding-left: 10px ;
	}

aside ol {
	margin: 0 ;
	padding: 0 ;
	}

aside ol ol {
	display: none ;
	list-style-type: none ;
	}

aside ol li {
	list-style-type: none ;
	}

.toggle-checkbox {
	display: none ;
	}

.branch {
	display: flex ;
	align-items: center ;
	cursor: pointer ;
	}

.branch::before {
	content: url('../includes/images/icons/tree_open.svg') ;
 }

.toggle-checkbox:checked + .branch::before {
	content: url('../includes/images/icons/tree_close.svg') ;
	}

.toggle-checkbox:checked ~ ol {
	display: block ;
	padding-left: 20px ;
	}

.leaf {
	display: flex ;
	align-items: center ;
	}

.leaf::before {
	content: url('../includes/images/icons/tree_show.svg') ;
	}

/* ---------------------------------------- */
/* Styles for different larger screen sizes */
/* ---------------------------------------- */

@media screen and (min-width:768px) {

	header {
		font-size: 20px ;
		}

	nav {
		grid-template-columns: auto auto auto auto ;
		}

	.grid-main {
		grid-template-columns: 420px auto ;
		}

	.grid-main-mainpage {
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) ;
		}
	
	.grid-main-mainpage figure img {
		height: 300px ;
		}

	}

@media screen and (min-width:1024px) {

	header {
		font-size: 22px ;
		}

	.grid-main-mainpage {
		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)) ;
		}

	.grid-main-mainpage figure img {
		height: 400px ;
		}

	}

@media screen and (min-width:1280px) {

	header {
		font-size: 24px ;
		}

	.grid-main-mainpage {
		grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) ;
		}

	.grid-main-mainpage figure img {
		height: 500px ;
		}

	.grid-main-info-left {
		grid-template-columns: auto auto auto auto ;
		}

	.grid-main-info-right {
		grid-template-columns: auto auto auto auto ;
		direction: rtl;
		}

	}

@media screen and (min-width:1920px) {

	header {
		font-size: 26px ;
		}

	.grid-main-mainpage {
		grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)) ;
		}

	.grid-main-mainpage figure img {
		height: 600px ;
		}

	}