@charset "utf-8";

body {
	background-color: #252525;
	background-image: url("./images/hg.jpg");
	background-repeat: repeat;
	margin: 0;
	padding: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	
}

/* The progress container (grey background) */
.progress-container {
  position: fixed;
  top: 83px;
  width: 500px;
  height: 8px;
  background: #ccc;
  z-index:5;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}



/*
a.anker {
	visibility: hidden;
	height: 0px !important;
	position: absolute;
	margin: -100px;
}
*/
a.anker {
	position: relative;
    top: -70px;  
	visibility: hidden;
}

#containerout {
	top: 0px;
/*	min-height: 1000px;
	height: 100% !important;*/
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	/*height: auto !important;  !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: #252525;
	background-image: url('./images/hgcontainerout.png');
	background-repeat: repeat;
/*	color: #CCCCCC;*/
}
#downloadwrapper {
	height: 100%;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-image: url('./images/hgcontainerout.png');
	background-repeat: repeat;
}
#container {
	height: 100%;
	padding-top: 55px;
	width: 500px;
	color: #CCCCCC;
	background-color: #252525;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	font-size: 12px;
}
#downloadarea {
	font-size: 12px;
	font-weight: normal;
	line-height: 1.3em;
	text-align: center;
	height: 100%;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #252525;
}
#menue {
	position: fixed;
	top: 0px;
	width: 500px;
	padding-top: 15px;
	background-color: #252525;
	margin-left: auto;
	margin-right: auto;
	z-index:15;
	
}
#browserdata {
	width: 400px;
	height: auto;
	background-color: #252525;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
}
html {
	scroll-behavior: smooth;
	webkit-scroll-behavior: auto;
}
p, span {
	line-height: 1.3em;
}
ul {
	display: inline-block;
	list-style-type: none;
	padding: 0px;
	background-color: #000;
	width: 500px;
	align-content: center;
	margin: auto auto;
	font-size: 12px;
/*	height:20px;*/
}
li {
	display: inline-block;
	float: left;
/*	height:20px;*/
	align-content: center;
	text-align: center;
}
li a:link {
	display: block;
	color: #fff;
	/*height: 20px;*/
	align-content: center;
	text-align: center;
	padding-bottom: 4px;
	padding-top: 4px;
	text-decoration: none;
	border: 1px solid #FFF;
}
li a:visited {
	display: block;
	color: #fff;
/*	height: 20px;*/
	align-content: center;
	text-align: center;
	padding-bottom: 4px;
	padding-top: 4px;
	text-decoration: none;
	border: 1px solid #FFF;
}
li a:hover {
	display: block;
	background-color: #FFFF99;
	color: #000;
}
hr {
	margin: 0 auto;
	width: 70%;
}

details summary::before {

   content:  " 🡳  ";	
 /*/ content:"🡒   "; 
  
 
 /*  you can style it however you want, use background-image for example */
}

/* By using [open] we can define different styles when the disclosure widget is open */
details[open] summary::before { 
  content:" 🡱  "; 
	/*content:"🡑   "; */
 
  	
}
details summary::after {

   content:  "  🡳  ";	
 /*/ content:"🡒   "; 
  
 
 /*  you can style it however you want, use background-image for example */
}

/* By using [open] we can define different styles when the disclosure widget is open */
details[open] summary::after { 
  content:"  🡱  "; 
	/*content:"🡑   "; */
 
  	
}
summary:hover {
  color:#FFFF99;
  font-size:12px;
  cursor:pointer;
  margin:0;
  display:block;
  text-align:center;
	
}

summary { 
  color:#69ADFA;
  font-size:12px;
  cursor:pointer;
  margin:0;
  display:block;
  text-align:center;
}

.nachlese {
	display: block;
	width:480px;
	border: 0px;
	background-color: transparent;
	line-height: 10px;
	margin: 0 auto;
	padding-left:10px;
	
	
/*	position:relative;*/
}

ul.nachlese {
	display: block;
	width:480px;
	border: 0px;
	background-color: transparent;
	line-height: 10px;
	margin: 0 auto;
	
	
}

li.nachlese a:link{
	color: #69ADFA;
	border: 0px;
	text-align: right;
	width:460px;
	line-height: 10px;
	list-style: none;
	background-color: transparent;
}
/*

.nachlese li{
	color: #69ADFA;
	border: 0px;
	margin: 0 auto;
margin: 0 auto;
}
*/

li.nachlese a:hover{
	color: #FFFF99;
	border: 0px;
}
li.logdaten {
	
	background-color:#252525;
}
ul.logdaten {
	
	background-color:#252525;
}

.table_download {
	border: #CCC solid 1px;
	width: 50%;
	text-align: center;
}

a.linkimtext:link {
	text-decoration: none;
	color: #69ADFA;
	font-weight: normal;
}
a.linkimtext:visited {
	text-decoration: none;
	color: #69ADFA;
	font-weight: normal;
}
a.linkimtext:hover {
	text-decoration: none;
	color: #FFFF99;
	font-weight: normal;
}
/*
a.linkimtext:active {
	text-decoration: none;
	color: #CCC;
	font-weight: normal;
}
*/


a:link {
	text-decoration: none;
	color: #69ADFA;
	font-weight: normal;
}
a:visited {
	text-decoration: none;
	color: #69ADFA;
	font-weight: normal;
}
a:hover {
	text-decoration: none;
	color: #FFFF99;
	font-weight: normal;
}


input[type=text]:invalid { 
/*	width: 400px;*/
	background: hsl(5,30%,80%);
	
}
input[type=text]:valid {
/*	width: 400px;*/
	background-color:hsla(116,89%,89%,1.00);
	
}
input[type=input] { 
/*	width: 400px;*/
	background: hsl(5,30%,80%);
	
}	
	
td.titel_buecher:hover {
	opacity: 0.6;
	transition: .8s ease;
	align-content: center;/* border: 1px solid #D2D99F; */
}

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
.abbildung_buch {
	border-radius: 10px;
	border: 1px solid #FFFFFF;
	height:198px;
}
.titel_buecher:hover {
	/*opacity: 0.6;
	transition: .8s ease;
	align-content: center;/* border: 1px solid #D2D99F; */
}
.titel_buecher img {
	margin-bottom: 3px;
	align-content: center;/* border: 1px solid #D2D99F; */
}

#adresse {
	width: 500px;
	height: auto;
	top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	text-align: center;
}
#bild {
	display: block;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}

.bild {

	display: block;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
#beschreibung {
	width: 500px;
	text-align: justify;
	margin: 0;
}
#holzinger {
	width: 500px;
	margin: auto;
}
#passworteingabe {
	width: 500px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	text-align: center;
}
#auswahl {
	width: 500px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
#table_buecher {
	margin: 0 auto;
	width: 500px;
}
#table_download {
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	height: 69px;
	border: #CCC solid 1px;
	font-size: 12px;
}

ul.browser {
	display: inline-block;
	width: 400px;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-color: #252525;
}
li.browserleft {
	display: inline-block;
	line-height: 16px;
	float: left;
	font-size: 12px;
	font-weight: normal;
	list-style: none;
	width: 35%;
	text-align: right;
}
li.browserright {
	display: inline-block;
	line-height: 16px;
	font-size: 12px;
	font-weight: normal;
	list-style: none;
	float: right;
	width: 60%;
	text-align: left;
}
.copyfett {
	line-height: 1.3em;
	font-weight: bold;
	text-align: justify;
	font-size: 12px;
	color: #CCC;
}
.copyfettzentriert {
	line-height: 1.3em;
	font-weight: bold;
	text-align: center;
	font-size: 12px;
	color: #CCC;
}
.copyfettrechts {
	line-height: 1.3em;
	font-weight: bold;
	text-align: right;
	font-size: 12px;
	color: #CCC;
}
.headline {
	font-size: 24px;
	font-weight: bold;
	color: #CCC;
	text-align: center;
	letter-spacing: 2px
}
.headlinesmall {
	font-size: 16px;
	font-weight: bold;
	color: #CCC;
	text-align: left;
}
.headlinesmallzentriert {
	font-size: 16px;
	font-weight: bold;
	color: #CCC;
	text-align: center;
}
.bildmitte {
/*
	font-size: 12px;
	font-weight: normal;
	line-height: 1.3em;
	text-align: center;
*/
	display:block;
	margin-left: auto;
	margin-right: auto;
}
.einzug {
	line-height: 1.3em;
	color: #CCC;
	text-align: left;
	margin-left: 40px;
}
.copyzentriert {
	line-height: 1.3em;
	font-weight: normal;
	color: #CCC;
	text-align: center;
	font-size: 12px;
}
.copyblock {
	line-height: 1.3em;
	font-weight: normal;
	text-align: justify;
	color: #CCC;
	font-size: 12px;
}
.captions {
	font-size: 11px;
	font-weight: normal;
	color: #CCC;
	text-align: center;
}
.captionsleft {
	font-size: 11px;
	font-weight: normal;
	color: #CCC;
	text-align: left;
}
.captionsright {
	font-size: 11px;
	font-weight: normal;
	color: #CCC;
	text-align: right;
}
.zentriert {
	margin: 0 auto;
	font-weight: normal;
	text-align: center;
}
.image {/* Add the following properties to the selector to which the effect has to be applied */ /* Chrome, Safari */
	/*-webkit-box-shadow: 4px 4px 10px #787E7D; /* Standard syntax */
	/*/box-shadow: 4px 4px 10px #787E7D;*/
	width: 498px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #FFFFFF;
	opacity: 1.0;
	transition: .8s ease;
}
.image:hover {/* Add the following properties to the selector to which the effect has to be applied */ /* Chrome, Safari */
	/*-webkit-box-shadow: 4px 4px 10px #787E7D; /* Standard syntax */
	/*/box-shadow: 4px 4px 10px #787E7D;*/
	opacity: 0.4;
	transition: .8s ease;
	width: 498px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #69ADFA;
}
.image_location {/* Add the following properties to the selector to which the effect has to be applied */ /* Chrome, Safari */
	/*-webkit-box-shadow: 4px 4px 10px #787E7D; /* Standard syntax */
	/*/box-shadow: 4px 4px 10px #787E7D;*/
	width: 498px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #FFFFFF;
	opacity: 1.0;
	transition: .8s ease;
}
.image_location:hover {/* Add the following properties to the selector to which the effect has to be applied */ /* Chrome, Safari */
	/*-webkit-box-shadow: 4px 4px 10px #787E7D; /* Standard syntax */
	/*/box-shadow: 4px 4px 10px #787E7D;*/
		width: 498px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #69ADFA;
}