/* ------*/
/* 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 {
	margin: 0 ;
	padding: 0 ;
	width: 100% ; 
	height: 100% ;
	font-family: 'OpenSans Regular', sans-serif ;
	font-size: 16px ;
	line-height: 1.6 ;
	color: #FFFFFF ;
	background-color: #000000 ;
	}

header {
	display: grid ;
	grid-template-columns: 40px auto 40px ;
	grid-gap: 40px;
	padding: 20px ;
	font-family: 'OpenSans Bold', sans-serif ;
	font-size: 20px ;
	text-align: center ;
	background-color: #29292F ;
	}

main {
	width: 100%;
	height: 100%;
	}

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

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

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

footer {
	display: grid ;
	grid-template-columns: 40px auto 40px ;
	grid-gap: 40px;
	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 ;
	}

span {
	color: #00FF00 ;
	}

ol {
	margin: 0 ;
	padding: 0 ;
	}

figure {
	margin: 0 ;
	padding: 0 ;
	}

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

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

img[src*=".svg"] {
	width: 40px ;
	}

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

nav ol li {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	}

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

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

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

.thumbnail {
	display: block ;
	float: left ;
	width: auto ; 
	}

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

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

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

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

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

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

/* Grid für den Bereich <main> mit <aside> und <section> */
/* Dieser Grid kann durch Media Queries angepasst werden */
.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 für die Übersicht mit flexibler Breite der Kästchen */
.grid-main-preview {
	display: grid ;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) ;
	grid-gap: 10px ;
	}
 
/* Grid für da Vollbild mit seitlichen Navigatiosnbereichen */
.grid-main-fullview {
	display: grid ;
	grid-template-columns: 100px auto 100px ;
	margin-top: 10px ;
	text-align: center ;
	}

/* Grid für den Hautpbereich <main> mit grossen flexiblen Kästchen */
/* Die Breite der Kästchen kann durch Media Queries angepasst werden */
.grid-main-figure-large {
	display: grid ;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) ;
	grid-gap: 10px ;
	margin: 10px ;
	}

.grid-main-figure-large figure img {
	width: 100% ;
	height: 340px ;
	object-fit: cover ;
	}

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

main aside ol {
	padding: 0 ;
	}

main aside ol ol {
	padding-left: 20px ;
	}

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

main aside li div {
	display: table ;
	}

main aside li div a {
	display: table-cell ;
	vertical-align: middle ;
	padding-left: 10px ;
	}

main aside li div:before {
	content: url('includes/images/icons/branch_show.svg') ;
	}

main aside input {
	display: none ;
	}

main aside input ~ label:before {
	content: url('includes/images/icons/select_all.svg') ;
	}

main aside input ~ label + ol > li {
	display: none ;
	}

main aside input:checked ~ label:before {
	content: url('includes/images/icons/select_none.svg') ;
	}

main aside input:checked ~ label + ol > li {
	display: block ;
	}

main aside label {
	display: table ;
	}

main aside label a {
	display: table-cell ;
	vertical-align: middle ;
	padding-left: 10px ;
	}

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

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

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

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

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

	}