@viewport{
	zoom: 1.0;
	width: extend-to-zoom;
}
blockquote{
	margin-top:25px;
}
.anker {
	position:relative;
	bottom:150px;
}
summary::-webkit-details-marker {
	display: none;
}
summary:hover {
	text-decoration: underline;
}
body{
	scroll: no;
	background-color:black;
	color:#DDD;
	margin: 10px auto;
	max-width: 60em;
}
input:disabled {
	background: lightgrey;
}
nav li {
	display: inline-block;
}
a { color: green; }
/* visited link */
a:visited { text-decoration: underline solid green; }
/* mouse over link */
a:hover { color: violet; }
/* selected link */
a:active { color: lightblue; }
.grow { transition: all .2s ease-in-out; }
.grow:hover {
	zoom: 3;
	font-size:x-large;
	-moz-transform: scale(3);
	-moz-transform-origin: 0 0;
	-o-transform: scale(3);
	-o-transform-origin: 0 0;
	-webkit-transform: scale(3);
	-webkit-transform-origin: 0 0;
	transform: scale(3); /* Standard Property */
	transform-origin: 0 0;  /* Standard Property */
}
.unselectable {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;	  /* Likely future */   
	pointer-events: none;
}
html, body {
	height: 100%;
	min-height: 100%;
}
/* Fortschrittsbalken begin */
@keyframes balken {
	0%      {width:0; opacity: 0;}
	10%     {width:0; opacity:.2;}
	80%     {width:100%; opacity:.8;}
	100%    {width:100%; opacity: 0;}
}
.balken {
	position: relative;
	background: linear-gradient(90deg,#f00,#ffa500,#ff0,#008000,#00f,#800080);
	height: .125em;
	padding:1px;
	margin:0px;
	animation: balken 6s ease-out infinite;
}
/* Fortschrittsbalken ende */
.borderme {
	border:1px dashed lightgrey;
	padding:10px;
	margin:5px;
	border-radius: 20px;
}
.HoverBorder h3 {
	margin:15px;
	padding:20px;
	margin-top:45px;
}
.HoverBorder p {
	margin:15px 0 0;
}
legend {
	float:right;
	color:slategrey;
	border:1px solid dimgray;
	border-style:dashed;
}
.HoverBorder:hover {
	border:5px dashed grey;
}
header {
	border: 2px solid darkblue;
	padding:10px;
	margin:5px;
}
nav {
	border: 2px solid DimGrey;
	padding:10px;
	margin:5px;
}
#timetable,#dir {
	border:2px solid DimGrey;
	padding:10px;
	margin:5px;
	height:100%;
}
#timetable ul,#dir ul {
	padding:10px;
	margin:10px;
}
wikitable,dir {
	border:2px solid DimGrey;
	padding:10px;
	margin:5px;
	height:100%;
}
wikitable ul,dir ul {
	padding:10px;
	margin:10px;
}
main {
	border: 2px solid HotPink;
	padding: 10px;
	margin:5px;
}
footer {
	border: 2px solid SeaGreen;
	padding: 10px;
	margin:5px;
}
beitrag {
	border: 2px solid Grey;
	padding: 10px;
	margin:5px;
}
@font-face {
	font-family:tropical_summer_signature;
	src: url('tropical_summer_signature-webfont.ttf') format('truetype'),
		url('tropical_summer_signature-webfont.woff2') format('woff2'),
		url('tropical_summer_signature-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:Element120;
	src: url('Element_120.otf') format('woff2'), url('Element_120.otf') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:EditPoints;
	src: url('EditPointsFilled.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:Pinguin;
	src: url('Penguin-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:klingon;
	src:url('klingontng.ttf') format('truetype');
}
@font-face {
	font-family:Brush; 
	src: local("Brush"), url("/style/AlexBrush-Regular.ttf") format("TrueType");
}
@font-face {
	font-family:Garbage; 
	src: local("Brush"), url("/style/Garbage King.ttf") format("TrueType");
}
@font-face {
	font-family:direwolf; 
	src:url('direwolf.ttf') format('truetype');
}
div > header > h1 > a {
	font-family:tropical_summer_signature;
	text-decoration:none;
	font-size:150%;
}
div > summary > h3 > a, h3 > a {
	font-family:serif;
	text-decoration:none;
	font-size:100%;
}
.klingon {
	font-family:klingon;
	text-decoration: none;
	font-size: 150%;
}
.FontElement120{
	font-family:Element120;
	text-decoration: none;
	font-size: 100%;
	color:violet;
}
.FontEditPoints{
	font-family:EditPoints;
	text-decoration: none;
	font-size: 250%;
	color:blue;
}
.FontPinguin{
	font-family:Pinguin;
	text-decoration: none;
	font-size: 250%;
	color:blue;
}
p { color:lightblue; text-indent:0.5em; }
p:hover { color: violet; }
p:active { color: red; }
li { color:lightblue; }
li { list-style:circle; }
li:hover { color: violet; }
li:active { color: red; }
marquee { color:lightblue; }
marquee:hover { color: violet; }
marquee:active { color: red; }

pre {
/*	white-space: nowrap; */
	white-space: pre-wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 10px;
	font-size: 2vw;
}
pre:hover {
	overflow: visible;
}
.rahmen {
	margin:10px;
	padding:10px;
	color:#aaa;
	background-color:#222;
	text-shadow:0 1px 0 #000;
	border-radius:15px;
	border-bottom:1px solid #555;
	box-shadow:0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
	font:16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

tab { padding-left: 8em; }
tab2 { padding-left: 4em; }

 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
/*  width: 120px; */
  width: 50%;
  background: rgba(0,0,0,0.1);
/*  background-color: #555; */
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
/*  bottom: 125%; */
  bottom: 101%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

tr:hover {background-color:2e2e2e;}
/* tr:hover {color:white;} */

/* details, summary start https://codepen.io/matt-west/pen/xtHdc */
*, *:before, *:after {
	/* border-box content-box */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

details {
  border-radius: 3px;
  margin: 1em 0;
}

summary {
  background: #333;
  color: green;
  border-radius: 3px;
  padding: 5px 10px;
  outline: none;
}

details[open] summary {
  background: #005200;
  color: grey;
}

/* details, summary end */
hr {
	width:90%;
	align:center;
	margin-top:15px;
	border-style:dashed;
}

/* blink start */
.blink {
  animation: blink 2s steps(1, end) infinite;
}
@keyframes blink {
 0% {
	opacity: 1;
 }
 50% {
	opacity: 0;
 }
 100% {
	opacity: 1;
 }
}
/* blink end */
/* class hoverTable beim Gebrauch von Tabellen */
table.hoverTable tr:hover:nth-child(odd)  {background-color:#828282;}
table.hoverTable tr:hover:nth-child(even) {background-color:#A9A9A9;}

blockquote.geschweift {
	padding-left: 70px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #000;
	margin: 5px;
	background-image: url(images/openquote1.gif);
/*	background-image: url(images/openquote5.gif);*/
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
}
blockquote.geschweift div {
	padding-right: 50px;
	display: block;
	background-image: url(images/closequote1.gif);
/*	background-image: url(images/closequote5.gif);*/
	background-repeat: no-repeat;
	background-position: bottom right;
}
/* Start tabs */
/* Ende tabs */
/* VERSUCH: nur a-Kinder in h3-Eltern sind besoffen */
h3 { text-align:center; }
h3 > a { text-decoration:none; }

.borderline {
	width:97%;
	float:left;
	border:1px dashed lightgrey;
	padding:10px;
	margin:5px;
	border-radius: 20px;
}

.maxi:hover > cpan { font-size:150%; }
.maxima:hover > cpan { font-size:300%; }

tr td.redbackground:hover { background-color:darkred;transition:2s; }
tr td.greenbackground:hover { background-color:darkgreen;transition:2s; }