.button	{ 	font-size: 20px; margin: 4px; 
			padding: 15px 25px; border-radius: 15px; 
			box-shadow: 0 5px #999; 
			color: white; background-color: #4CAF50;
			transition-duration: 0.15s; }
.button:hover { background-color: darkolivegreen; color: yellow; }

.kartei	{ 	font-size: 25px; margin: 4px; 
			padding: 15px 25px; border-radius: 15px; 
			box-shadow: 0 2px #999; 
			color: yellow; background-color:#CC0066;
			transition-duration: 0.05s; }
.kartei:hover { background-color: saddlebrown; color: antiquewhite; }

.auswahl	{ 	font-size: 20px; margin: 22px; 
			padding: 10px 10px; border-radius: 5px; 
			box-shadow: 0 1px #999; 
			color: darkgreen; background-color: lightskyblue;
			transition-duration: 0.02s; }
.auswahl:hover { background-color: #8b4544; color: wheat; }

.maske 	{	font-size: 25px; color: #4d004d; 
            background-color: navajowhite;
			border: 2px solid #f44336; padding: 3px }
.luecke	{ 	font-size: 11px; margin: 1px;
			border-radius: 7px; width: 100%;
			color: transparent; background-color: red;
			}
.keinabsatz {  display:inline; margin: 0px }
body	{	background-color: beige; font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
			font-size: 16px; }
a:link       {color:blue; font-family:Georgia; 
            font-size:25px; text-align:right }
a:visited    {color:blue}
a:hover      {color:purple}
table   {	width:100%; height:20px; text-align:center }

input[type=checkbox]:not(old),
input[type=radio]:not(old) { opacity: 0 }
input[type=checkbox]:not(old) + label,
input[type=radio]:not(old) + label {
		display:inline-block;
		margin-left: -20px;
		margin-top: -20px 		}
input[type=radio]:not(old):checked + label {
		font-size: 30px;
		padding: 10px 15px; 
        border-radius: 10px; 
		margin-bottom: -5px;
		box-shadow: 0 2px #999; 
		color: white; background-color: maroon; 
		transition-duration: 0.2s; }
input[type=checkbox]:not(old):checked + label {
		font-size: 20px;
		padding: 10px 15px; border-radius: 7px; 
		margin-bottom: 5px;
		box-shadow: 0 2px #999; 
		color: white; background-color: maroon; 
		transition-duration: 0.1s; }

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer; 
    font-size: 20px }

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 500%;
    background-color: #555;
    color: #ccc;
    text-align: center;
    border-radius: 9px;
    padding: 12px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px }

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

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;} }

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;} }