body {
	font-family: Helvetica, Arial, Geneva, sans-serif;
	background-color: white;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}
img#jukeboxmodelogo {
	max-width: 100%; height: 185px; vertical-align: bottom; float: right; padding-left: 5px; margin-right: 0.1%;
}
@media only screen and (max-width: 511px) {
	img#jukeboxmodelogo {
	max-width: 40%; height: auto; max-height: 125px; vertical-align: top; float: right; padding-left: 1%; margin-right: 0.1%;
	}
}

div#jbxcontainer {
	background-color: white;
	width: 60%;	/* wenn breiter als 1440px */
	margin-left: 20%;
}
@media only screen and (max-width: 1440px) {
	div#jbxcontainer {
		background-color: white;
		width: 100%;
		margin-left: 0%;
	}
}

#inhaltsspalteinnen {
	text-align: justify;
	line-height: 150%
}

div#inhaltsspalteaussen {
	float: left;
	width: 80%;
	color: black;
	background-color: white;
	margin-bottom: 1.18cm;
	padding-top: 10px;
}

@media only screen and (max-width: 511px) {
	div#inhaltsspalteaussen { float: none; width: 100%; }
}

div#inhaltsspalteinnen, div#menuespalteinnen {
	padding-left: 5px;
	padding-right: 5px;
}
.linksbuendig {
	text-align: left;
}
.rechtsbuendig {
	text-align: right;
}

div#jbxheader {
	min-height: 185px;
	background-image: linear-gradient(25deg, #005500	0%, #0044aa 80%);
	padding-left: 7%;
	padding-right: 0%;
	color: white;
}

.jbxheadertext {
	text-shadow: 1px -1px #204040ff, -1px 1px #204040ff;

}
@media only screen and (max-width: 511px) {
	div#jbxheader { padding-left: 3%; 	min-height: 125px;}
	
	h1 { font-size: 24px; }
	h2 { font-size: 18px; }
	h3 { font-size: 17px; }
	h4 { font-size: 16px; }
}

#jbxtopspace {
	width: 4%; height: 1em; float:top; /* den Namen nach unten einrücken */
}
@media only screen and (max-width: 700px) {
	#jbxtopspace {
		width: 4%; height: 1px; float:top; /* auf kleineren Displays aber nicht so viel */
	}
}
@media only screen and (max-width: 511px) {
	#jbxtopspace {
		width: 4%; height: 0px; float:top; /* auf ganz kleinen Displays gar nicht */
	}
}
#jbxindent {
	width: 4%; height: 90px; float:left; /* den Namen nach rechts einrücken */
	min-height: 185px;
	background-color: red;

}
@media only screen and (max-width: 511px) {
	#jbxindent {
	width: 1%; height: 0px; float:left;
	}
}

.textkastenrechtsgrau {
    background-color: #eeeeee;
    width: 50%;
    padding: 2px 5px 2px 5px;
    margin: 5px 0px 5px 15px;
    /* border: 3px green solid; */
	float: right;
}
.textkastenrechtsgrauklein {
    background-color: #eeeeee;
    width: 45%;
    padding: 2px 5px 2px 5px;
    margin: 5px 0px 5px 15px;
    /* border: 3px green solid; */
	float: right;
	font-size: 12px;
	line-height: normal;
}


/* Fußzeile */
.jbxfootertext {
	color: white;
	font-size: 16px;
}
@media only screen and (max-width: 511px) {
	.jbxfootertext {
	font-size: 12px;
	}
}

.flaggelinks {
	max-width: 30%; height: 10px; vertical-align: top; float: right; padding-left: 0px; margin-right: 0.5%;
}
@media only screen and (max-width: 511px) {
	.flaggelinks {
		max-width: 30%; height: 10px; vertical-align: top; float: right; padding-left: 5px; margin-right: 0;
	}
}

.flaggerechts {
	max-width: 30%; height: 10px; vertical-align: top; float: right; padding-left: 10px; margin-right: 0.5%;
}
@media only screen and (max-width: 511px) {
	.flaggerechts {
		max-width: 30%; height: 10px; vertical-align: top; float: right; padding-left: 5px; margin-right: 0;
	}
}

.nachoben {
	max-width: 30%; height: 13px; vertical-align: top; float: left; margin-left: 10%;
}
@media only screen and (max-width: 511px) {
	.nachoben {
		max-width: 30%; height: 12px; vertical-align: top; float: right; margin-right: 4.5%;
	}
}

.nachrechts {
	max-width: 30%; height: 15px; float: right; margin-left: 5%; margin-right: 4.5%; margin-top: 2%;
}
@media only screen and (max-width: 511px) {
	.nachrechts {
		max-width: 30%; height: 12px; float: right; margin-right: 4.5%; margin-top: 2%;
	}
}


.footerbox {
  display: flex;
  justify-content: right;
	background-image: linear-gradient(25deg, #005500	0%, #004488 80%);
}
.footerbox > div {
  /* background-color: #eeeeee; */
  width: 100px;
  margin: 3px;
  text-align: center;
  line-height: 15px;
  font-size: 14px;
}
.breit {
  flex-grow: 10;
  border: 3px solid transparent;
}
.schmal {
  flex-grow: 1;
  /* border: 3px solid rgb(222 222 222 / 50%); */
}
/* --- */




.textkasten {
	background-color: #eeeeee;
	width: 90%;
	padding: 2px;
}

/* Navigationsmenü */

div#menuespalteaussen {
	float: right;
	width: 20%;
	color: black;
	/* background-color: red; */
}
@media only screen and (max-width: 511px) {
	div#menuespalteaussen { float: none; width: 60%; margin-left: auto; margin-right: 5%; padding-bottom: 15px;}
}
@media only screen and (max-width: 350px) {
	div#menuespalteaussen { float: none; width: 96%; margin-left: auto; margin-right: 2%; padding-bottom: 15px;}
}

#menuespalteinnen {
	background-color: white;
}

#menueknoepfe {
	width: 99%;
	text-align: center;
	padding-top: 30px;
}
@media only screen and (max-width: 511px) {
	#menueknoepfe {
		padding-top: 3px;
	}
}
#menueknoepfe ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
}

#menueknoepfe li {
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: block;
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
	font-family: Arial, Helvetica, sans-serif;
}

#menueknoepfe li a {
	color: rgb(40,60,170);
	background-color: rgb(208,208,208);
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-style: outset;
	border-color: silver;
	text-decoration: none;
	display: block;
}

#menueknoepfe li#aktuellermenuepunkt a:link,
#menueknoepfe li#aktuellermenuepunkt a:visited {
	color: rgb(20,30,145);
	background-color: rgb(180,180,180);
}

#menueknoepfe li a:hover {
	color: white;
	background-color: gray;
}

/* Untermenüknöpfe */
#menueknoepfe ul li > ul {
	color: rgb(64,128,128);
	background-color: rgb(208,208,208);
	width: 70%;
	position: relative; left: 30%;
}

#menueknoepfe ul li > ul #inaktivermenuepunkt a:link,
#menueknoepfe ul li > ul #inaktivermenuepunkt a:visited {
	color: rgb(64,128,128);
	background-color: rgb(208,208,208);
}

#menueknoepfe ul li > ul #inaktivermenuepunkt a:hover {
	color: white;
	background-color: gray;
}

.einzelbildklein {
	transition: transform 0.7s;
	width: 3.5em;
	float: right;
	padding: 0px 4px 0px 4px;
}
.einzelbildklein:hover {
 transform: scale(10, 10);
}
.einzelbildklein:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildrechts {
	transition: transform 0.7s;
	width: 10em;
	float: right;
	padding: 0px 0px 2px 10px; /* top | right | bottom | left */
}
.einzelbildrechts:hover{
 transform: scale(3.5, 3.5) translate(-15%, 0);
}
.einzelbildrechts:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildrechtsklein {
	transition: transform 0.7s;
	max-width: 5em;
	max-height: 3.3em;
	float: right;
	padding: 0px 0px 5px 10px;
}
.einzelbildrechtsklein:hover {
 transform: scale(7, 7) translate(-20%, 0);
}
.einzelbildrechtsklein:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}


.einzelbildrechtsmittel {
	transition: transform 0.7s;
	max-width: 10em;
	max-height: 7em;
	float: right;
	padding: 0px 0px 5px 10px;
}
.einzelbildrechtsmittel:hover {
 transform: scale(3, 3) translate(-30%, 0);
}
.einzelbildrechtsmittel:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildrechtshalbgross {
	transition: transform 0.7s;
	max-width: 15em;
	max-height:15em;
	float: right;
	padding: 0px 0px 5px 10px;
}
.einzelbildrechtshalbgross:hover {
 transform: scale(2, 2) translate(-30%, 0);
}
.einzelbildrechtshalbgross:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildlinks {
	transition: transform 0.7s;
	width: 10em;
	float: left;
	padding: 2px 10px 2px 0px;
}
.einzelbildlinks:hover {
 transform: scale(3.5, 3.5) translate(30%, 0);
}
.einzelbildlinks:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildlinksklein {
	transition: transform 0.7s;
	max-width: 5em;
	max-height: 3.3em;
	float: left;
	padding: 2px 10px 2px 0px;
}
.einzelbildlinksklein:hover {
 transform: scale(7, 7) translate(40%, 0);
}
.einzelbildlinksklein:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildlinkssmittel {
	transition: transform 0.7s;
	max-width: 10em;
	max-height: 7em;
	float: left;
	padding: 2px 10px 2px 0px; /* top | right | bottom | left */
}
.einzelbildlinkssmittel:hover {
 transform: scale(4.5, 4.5) translate(30%, 0);
}
.einzelbildlinkssmittel:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

/* Tabelleninhalte oben ausrichten */

table td, table td * {
    vertical-align: top;
}

#konfiguration {
  border-collapse: collapse;
  width: 98%;
}
#konfiguration td, #konfiguration th {
  border: 1px solid #d0d0d0;
  padding: 8px;
}

#konfiguration tr th:nth-child(1),#konfiguration  tr th:nth-child(3),
#konfiguration tr td:nth-child(1),#konfiguration  tr td:nth-child(3) {
  background: #f2f2f2;
}



.flexcontainerwhite {
	display: -webkit-box; /* --- veraltete Varianten */
	display: -moz-box;
	display: -ms-flexbox; 
	display: -webkit-flex;/* --- */
	
	display: flex;
	background-color: white;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.flexcontainersilver {
	display: flex;
	background-color: silver;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.flexitemsilver {
	color: #555;
	background-color: silver;
	width: 18em;
	margin: 10px;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
	min-width: 15em
}
.flexitemwhite {
	color: #555;
	background-color: white;
	width: 18em;
	margin: 10px;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
	min-width: 15em
}

.einzelbildinflexscale2 {
	transition: transform 0.7s;
	float: right;
	padding: 0px 0px 5px 10px;
}
.einzelbildinflexscale2:hover {
 transform: scale(2.0, 2.0);
}
.einzelbildinflexscale2:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}

.einzelbildinflex {
	transition: transform 0.7s;
	float: right;
	padding: 0px 0px 5px 10px;
}
.einzelbildinflex:hover {
 transform: scale(3.5, 3.5);
}
.einzelbildinflex:active{
 transition: transform 0.1s;
 transform: scale(1.0, 1.0) translate(0, 0);
}



.diagramm {
	width: 12em;
	padding: 1px 1px 1px 5%;
}

.mono{font-family: monospace; font-size: 18px}
.mono16{font-family: monospace; font-size: 16px}
.mono15{font-family: monospace; font-size: 15px}
.mono12{font-family: monospace; font-size: 12px}
.size10{font-size: 11px; line-height:normal; }
.gruen{color:#008800;}
.blau{color:#0020a5;}
.grau{color:gray}
.orange{color:#b06008;}
.hellgrau{color:#eee;}
.ul {text-decoration:underline}
.fett{font-weight:bold}
.hintergrundhellgrau{background-color:#ddd}
.serif{font-family: Georgia, serif;}
.kursiv {font-style: italic;}
.hintergrunddunkelgrau{background-color:#222}

.terminal {
    display: inline;
    background-color: #222;
	color: #eee;
    padding: 0px 0px; /* Abstand um den Text */
	font-family: monospace; font-size: 17px
  }

.center{text-align: center;}

/* Download-Knöpfe */

.downloadbutton {
	display: inline-block;
	position: relative;
	padding: 10px 40px;
	border-radius: 6px;
	background-color: #2C8783;
	color: white;
  
	font-family: sans-serif;
	text-decoration: none;
	font-size: 1.2em;
	text-align: right;
	text-indent: 22px;
	
	margin-top: 12px;
	margin-left: 6px;
}
.ungetestet {
	background-color: #777;
}
.downloadbutton:hover {
	background-color: #306050;
	color: white;
}
.downloadbutton:before, .downloadbutton:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}
/* oben offene Box wird durch den 2px-Rahmen rechts/unten/links dargestellt  */
.downloadbutton:before {
	width: 10px;
	height: 3px;
	border-style: solid;
	border-width: 0px 2px 2px 2px;
}
/* Das Dreieck wird erzeugt, indem vom 5px dicken Rahmen um das after-Pseudoobjekt
   der Größe Null nur das obere waagerechte Stück sichtbar ist */
.downloadbutton:after {
	width: 0;
	height: 0;
	margin-left: 2px;
	margin-top: -7px;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: transparent;
	border-top-color: inherit;
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}
.downloadbutton:hover:before {
	border-color: #2C8783;
}
.ungetestet:hover {
	background-color: #666;
	color: #eee;
}
.downloadbutton:hover:after {
	border-top-color: #fb6;
	animation-play-state: running;
}
@keyframes downloadArrow {
	0% {
		margin-top: -8px;
		opacity: 1;
	}
	50% {
		margin-top: 0;
		opacity: 0;
	}
	51% {
		margin-top: -15px;
		opacity: 0;
	}
	100% {
		margin-top: -8px;
		opacity: 1;
	}
}