body {
        background-image: url("./2020-logo-adler.2.png");
        background-repeat: no-repeat;
        background-position: center;
        font-family: arial,calibri,sans-serif;
        color: black;
        font-size:18px;
    }
    
    a {
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }
    
    div#aktrezept {
       font-family: Arial;
       font-size: 12px;
       background-repeat: no-repeat;
       background-opacity: 0.5;
       order: 100;
       border: 5px solid darkgray;
       width: 1000px;
       text-align: left;
       padding: 10px;
    }
    
    div#ausgabe {
       border: solid 0px black;
    }
    
    div#aktrezept{
       border: 2px solid gray; 
       font-size: 14px;
    };
    
    H1 {
		font-family: sans-serif, calibri, arial;
		font-size: 48px;
		color: gray;
	}
	
	input#filterinfo {
		font-size: 9px;
		height: 13px;
		width:250px;
		border: hidden;
	}
    
    input#suchtext {
        font-size: 14px;
        width: 350px;
        height:30px;
        font-family: sans-serif, calibri, arial;
        border-radius: 5px 5px;
    }
    
    table {
         text-align:center;
         width: 1000px;
         padding: 8px;
         color: black;
    }
    
    table#brdr {
        border: 1px solid darkgray;
        background-color: yellow;
    }
    
	.tablehead {
		margin: 6px;
		border: 2px solid gray;
	}
	
	tr:nth-child(even) {
		background-color: #dddddd;
	}

    TH {
		border: 1px solid darkblue;
        font-size: 15px;
        background-color:gray;
        color: white;
        font-style: italic;
	}
	
    TH#z1 {
        font-family: arial,calibri,sans-serif;
		border: 1px solid darkblue;
        font-size: 24px;
        background-color: #f3f3f3;
        color: #000061;
	}
    
    TD {
	    font-family: arial, calibri;
        margin-left:5px; 
        margin-right:5px;
        text-align:left;
		font-size: 16px;
    }
    
    td#z1 {
        border: 1px solid darkblue;
        text-align: right;
        background-color: #f3f3f3;
        cursor: pointer;
    }
	
	TR#durch {
		text-align:left;
		text-decoration: line-through;
	}
    
    TD#lft {
        text-align:left;
    }
    TD#suche {
        width: 800px;
    }
    TD#ntz {
       text-align:left;
       font-size: 11px;
    }
    
    TD#lft_durch {
        text-align:left;
		text-decoration: line-through;
    }
	
	td#bgrd {
		background-color: darkblue;
	}
    
    td#zusinf {
      font-size: 12px;  
    }
    
    img#bcksym {
      width:20px;
      height: 20px;
      border: 2px solid red;
    }
    img#fn {
        witdh:50px;
        height:50px;
    }
    
    img#fn:hover {
	  border:0px; 
	  width:300px; 
	  height:300px;
	  left:0px;
	  border: 2px solid gray;
    }
    
    img#btn {
        cursor: pointer;
    }
    
    img#spimg {
        width:15px;
        height:20px;
    }
    
    img.mkbigger {
        transition: transform 0.5s;
    }
    img.mkbigger:hover {
        transform: scale(15.0, 15.0);
    }
    img#vorschau {
        width: 20px;
        height: 20px;
        align-items: middle;
    }
    
    img#buttop {
        width:30px;
        height:30px;
        border: 4px solid gray;
        cursor: pointer;
        visibility: visible;
    }
    
    img#buttop:hover {
       -webkit-filter: invert(1);
	   filter: invert(1);
    }
          
    img#katgry {
        width:16px; 
        height:16px;
    }
    
    input {
        font-size: 20px;
        height: 22px;
    }
    
    span#butsuch {
        cursor: pointer; 
        border: 4px solid darkgray; 
        border-radius: 3px 3px;
        padding:3px;
        font-size: 13px;
        font-weight: bold;
        border-radius: 13px 3px;
    }
    
    span#butsuch:hover {
         border: 4px solid red;
         font-size: 13px;
         border-radius: 3px 13px;
    }
    
</style>

/*<img src="bild.png" class="beispiel1">*/
    span {
        font-family: arial;
        font-size: 14px;
        color: black;
    }
    span#jr {
        color:yellow; 
        font-weight:bold;
        color: yellow;
        font-size:14px;
    }
    
    SPAN#mnu {
        color:yellow; 
        font-weight:bold;
        color: black;
        font-size:14px;
        cursor: pointer;
    }
    
	span#gre {
		font-family: arial, calibri ;
		font-size: 9px;
		color: green;
	}    
    
    span#infkl {
		font-family: arial, calibri;
		font-size: 9px;
		color: gray;
	};
    
	span#red {
	    color: red;
		font-family: calibri, arial;
		font-size: 14px;
	}
    span#info {
	    color: darkgray;
		font-family: arial, calibri;
		font-size: 11px; 
        font-weight: bold;
    }
    
    span#guzik {
       color: white;
       background-color: black;
       font-weight: bold;
       margin: 1px;
       border: 1px solid yellow;
       border-radius: 3px 20%;
    }

    span#b1:hover {
        background-color: black;
        color: white;
        width: 100px;
    }
    
    span#toprzpt {
        font-weight: bold;
        background-color: black;
        color: red;  
    }
    
    span#menutit {
       display: block;
       width: 150px;
       height:18px;
       border: 2px solid gray;
       border-radius: 3px 20%;
       font-size:16px;
       font-weight: bold;
       font-style: italic;
    };
    
    summary {
      font-weight: bold;
      color: darkblue;
    }
    
    h100 {d
        font-size: 30px;
        font-weight: bold;
        color: red;
    }
    
    dessert {
        color: #B18904;
    }
    
    cy {
     background-color: yellow;
    }
    
    pasta {
        color: green;
    }
    
    sosse {
        color: brown;
    }
    
    suppe {
        color: black;
    }
    
    dip {
        color: red;
    }
    
    beilage {
        color: darkblue;
    }
    
    tapaz {
        color: blue;
    };
    
    notiz {
        color: red;
    };
    
    stp {
        color: darkgray;
        background-color: #98F5FF;
        font-weight: bold;
    };
    
    sonstige {
        color:#808000;
    }
    
    span#b1 {
        border: 2px solid black;
        cursor: pointer;
        padding: 5px;
        border-radius: 5px ;
        background-color: white;
        color: darkblue;
        font-weight: bold;
        font-size: 10px;
        text-shadow: 1px 1px gray;
    };
    
    span#wtinf {
      font-size: 36px; 
    };
    
/* Überschrift */
    main {
        background: transparent;
        width: 80%;
        margin: 8px auto;
    }
  
    h2 {
      font-size: 150%;
      /*text-transform: uppercase;*/
      font-family: Georgia, serif, Arial;
      transform: scale(1,2);
    }

    #eins {
      font-size: 30px;
      color: red; 
      display: inline-block;
      transform: translate(0.1em,0.1em) rotate(20deg) scale(2);
      margin: 0;
      padding: 5;
      text-shadow: 3px 1px black;
    }
    
    .polen {
        width: 15px;
        height:0px;
        border-top: 4px solid white;
        border-bottom: 4px solid red;
    } 

/* schattenschrift
body {
		padding: 0;
		margin: 0;
		background: url("stgallen-big.jpg") no-repeat center center fixed;
		 -webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
 		 background-size: cover;
	}	
*/
	.container { 
		height: 3vh;
		width: 30vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-family: 'Montserrat', sans-serif;
		-webkit-text-fill-color:transparent;
		-webkit-text-stroke:1px white;
        background-color: darkgray;
	}
    
    crot {
        color: red;
    }