*, *::after, *::before {
   box-sizing: border-box; 
   /*! color: whitesmoke; */
}

html {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   height: 100%; }

body { 
   min-height: 100vh; 
   font-family: Verdana; 
   /*! color: ; */ 
   background-color: #222; }
header {
	font-size: xx-large;
	text-indent: 1rem;
	color: brown;
	text-shadow: 1px 1px 1px black;
	letter-spacing: 1px; }
h1, header {
   color: wheat;
   margin:0;
   padding:.5em; }
h2 {
   text-align: center; 
   color: dimgray; }
tfoot td {
   font-size: larger;
   background-color: antiquewhite; }
span#insg {
   color: #555;
   font-weight: bold;
   font-size: xx-large;
   background-color: #FFD700;
   padding: 0.5rem;
   border-radius: 0.5rem; }
legend {
   font-size: smaller;
   margin: -0.5rem 0 0;
   color: #91490c; 
   font-weight: bold; }
legend.ausw {
   padding-top: 1.5em;
   color: dimgray; 
   font-weight: bold; }
.umlaute {
   margin: 5em; 
   font-size: larger; }
th {
   font-size: larger;
   padding: 0.5rem; 
   background-color: #efefef; 
   white-space: nowrap; }
tr:nth-child(odd), div.tabelle:nth-child(even) {
   background-color: #f9f9f9; }
tr:nth-child(even), div.tabelle:nth-child(odd) {
   background-color: #e9e9e9; }
div.tabelle {
   margin: 0.5em 0; }
div.tabelle a {
   color: black;
   font-size: unset; }
div.tabelle a:hover {
   color: black; }
div.tabelle a:hover span.preis {
   color: darkcyan; }
div.tabelle span.preis {
   float: right;
   clear: right;
   font-weight: bold;
   color: darkslategrey; }
div.tabelle span.zust {
   font-weight: 300;
   color: cadetblue; }
tr.null {
   color: darkred;
   font-style: italic; }
td {
   padding: 5px 7px;
   border-radius: 3px; }
.preis {
   text-align: right;
   font-weight: bold;
   white-space: nowrap; }
td.zust {
   text-align: center; 
   white-space: nowrap; }
td.jaBild {
   color: green; 
   white-space: nowrap; }
td.noBild {
   color: darkgoldenrod; }
article, fieldset {
   text-align:justify;
   background-color: #eee;
   margin: 1rem;
   border-radius: 3px;
   padding: .5em;
   border-color: #444; 
   display: inline-block; }
section {
   background-color: #fefefe; 
   padding: 3px 5px;
   margin: 0.5rem 1rem;
   border-radius: 5px; 
   text-align: justify; 
   clear: right; }
div.bild {
   float: right; }
.warnung { 
   background-color: yellow; }
fieldset {
   font-size: larger; }
fieldset p {
   text-align: right; }
fieldset p.links {
   text-align: left; }
fieldset.links {
   text-align: left; 
   float: inline; }
td.breit {
   padding: 0.7rem; 
   background-color: #eee; }
p, h3 {
   color: whitesmoke;
   text-align: justify;
   padding: .5em; }
p table {
   color: #222; }
a:link { 
   color: #907add;
   padding: 1em;
   font-size: larger;
   text-decoration: none; }
footer a:link, p a:link {
   color: lightgreen; }
a:visited {
   color:maroon; }
a:hover { 
   font-weight: bolder; }
button, a[href="shop5kasse.php"] {	 
   background-color: cadetblue;
   color: #333;
   padding: 0.5rem 1rem;
   border-radius: 0.4rem;
   text-shadow: 1px 1px 1px black;
   font-size: larger; 
   margin: .5em;
}
button:hover, button:focus {
   background-color: blue;
   color: yellow; }
.light {
   font-weight: lighter; }
.altpreis {
   text-decoration: line-through red; }
img[alt] {
   background-color: #555;
   color: white; 
   padding: 3px;
   border-radius: 5px; }
a:link.preview {
   background-color: #333;
   color: #eee;
   margin: 3px;
   padding: 3px;
   display: block; }
a[href="shop5kasse.php"] {
   background-color: #00868B;
   font-size: large; }
input {
   font-weight: bold; 
   padding: 4px; }
input[type="number"] {
   width: 4rem; 
   font-size: larger; }
select {
   font-size: 1em;
   font-family: inherit; }
select option {
   padding: 2px 5px }
select option:hover {
   background-color: beige; }
select option:checked {
   font-size: larger;
   text-align: right; }
/* Checkbox */
.container {
   display: block;
   text-align: left;
   position: relative;
   padding-left: 35px;
   margin: 9px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none; }
/* Hide the browser's default checkbox */
.container input {
   position: absolute;
   opacity: 0;
   cursor: pointer; }
/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: #999; }
.container:hover {
   background-color: blanchedalmond; }
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
   background-color: #555; }
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
   background-color: #09365a; }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none; }
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
   display: block;}
/* Style the checkmark/indicator */
.container .checkmark:after {
   left: 7px;
   top: 3px;
   width: 5px;
   height: 10px;
   border: solid yellow;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg); }
/* Popup container */
.popup {
   position: relative;
   display: inline-block;
   cursor: pointer; }
.popup:hover, .popup:active {
   color: #900; }
/* The actual popup */
.popup .popuptext {
   visibility: hidden;
   width: 300px;
   background-color: #555;
   color: #BDB;
   text-align: left;
   border-radius: 6px;
   padding: 8px 8px;
   position: absolute;
   z-index: 1;
   top: 125%;
   left: 3%; }
.popup .popuptextZ {
   max-width: 150px;
   font-weight: normal; }
.popup .popuptextB {
   left: -55px; 
   width: 250px;
   font-weight: normal; }
.popup .popuptextPP {
   width: 400px; }
.popup .popuptextZust {
   width: auto; 
   white-space: nowrap; }
.popup .popupbild {
   visibility: hidden;
   border-radius: 1rem;
   position: absolute;
   margin: 0.5rem -0.5rem 0 0;
   padding: -5px;
   border: -5px;
   z-index: 1;
   top: 125%;
   right: 3%; 
   max-width: 555px; 
   overflow-y: hidden; }
/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-top: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent; }
.popup .popupbild::after {
    content: "";
    position: absolute;
    margin-left: -15px; }
/* (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 } }
/* Translation */
article[id]:hover:after {
   display: block; 
   margin-top: 1rem;
   margin-left: 0; 
   max-width: 400px; 
   color: #907; }
ins {
   text-decoration: none; }
header:hover::after,
ins:hover:after, h2:hover:after, 
label:hover:after, a:hover:after {
   padding-left: 0.5rem; 
   color:#907;
   font-weight: normal; }
/* English Translation 
header#ausverkauf:hover:after {
   content: "SALEOUT"; 
   padding-left: 1rem; }
article#privat:hover::after {
   content: "You are approaching the private saleout. Before any payment you get the confirmation of your order and further information via mail. For questions please contact me on ausv\2014 at\2014 golowerda\2014 dot\2014 de."; }
article#order:hover::after {
   content: "Please select the article for the shopping card (button below). You may adjust the amount in the next step." }
article#ausland:hover::after {
   content: "Please send your request for a delivery out of Germany." }
article#absend:hover::after {
   content: "Please note: After sending the form all your inbetween data will be deleted!";
   max-width: none; }
article#best:hover::after {
   content: "Thank you for your order! You will soon receive confirmation and further information due to payment. All you inbetween data are deleted by now." }
article#anzartikel:hover::after {
   content: "Please note that a new search for articles will set back the amount of all articles to default (i.e. one). Please adjust their quantity before progressing to cashier.";
   max-width: 590px; }  
article#zuviel:hover::after {
   content: "Please choose more/other creteria for limiting your request or go to the list/compact view." }
button#aktuallies:hover::after {
   content: "Click to update";
   padding-left: 1rem; }
button#versand:hover::after {
   content: "Confirm the mode of shipment";
   padding-left: 1rem; }
button#zahlungsartbest:hover::after {
   content: "Confirm the method of shipment";
   padding-left: 1rem; }
#abtei:hover:after {
   content: "department"; 
   padding-left: 0.5rem; }
#bu:hover:after {
   content: "books"; }
#ma:hover:after {
   content: "magazins"; }
#sp:hover:after {
   content: "board games"; }
#fi:hover:after {
   content: "movies" }
a[href="shop1abt.php"]:hover:after {
   content: "department"; }
a[href="shop4korb.php"]:hover:after {
   content: "basket"; }
a[href="shop5kasse.php"]:hover:after {
   content: "checkout"; }
label[for="adres"]:hover:after {
   content: "your address"; }
label[for="zusatz"]:hover:after {
   content: "additional message"; } */