h1,h2,h3,h4,h5,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i 
{font-family:verdana,arial,helvetica,sans-serif;}
h1 {
	font-size:18px; font-weight:bold; 
   margin-bottom:4px; margin-top:1px;
   list-style-type: disc;
   }
h2 { 
    font-size:14px; 
    font-weight:bold; 
    margin-bottom:4px; 
    margin-top:1px;
    list-style-type: disc;  
    }
h3 {
	font-size:11px; 
	font-weight:bold; 
	color:#000000; 
	text-align: centre;
   margin-bottom:4px; 
   margin-top:1px;
   list-style-type: disc;  
   }
h4 { 
   font-size:12px; 
   color:#000000; 
   text-align:centre; 
   margin-bottom:1px; 
   margin-top:1px; 
   }
h5 {
	  font-size:18px;	
   color:#888888; 
   margin-bottom:4px; 
   margin-top:1px;
   list-style-type: disc;
   }
h6 {
   font-size: 70px;
   font-weight: bold;
   color: #000000;
   text-align: right;
   margin-bottom: 0px;
   margin-top: 0px;
   }
p {
	font-size:1.0em; 
	margin-bottom:1px; 
	margin-top:1px;
	list-style-image: url(../Site/Bilder/punkt.gif);
	}

a { color: #555;}
a:hover {color: #f00;}

   html{
        height: 100%;
    }

body {
 margin: 0px;
 height: 100%;
	}

img {
 border: 0;	
	}

/* Kopfleiste */
.headline {
	min-width: 0px;
	margin: 0 auto; padding: 10px;
	display: flex;
   flex-flow: row wrap;
	justify-content: space-between;
	align-content: center; align-items: center;
	background-color: #fff;
	}

.headline div.top-li {
    order: 1
    flex: 0 1 auto;
    align-self: auto; padding-left: 10px;
    min-width: auto; min-height: auto;
    margin-left: auto; margin-right: auto;
}

.headline div.top-mi {
    order: 2
    flex: 3 1 auto;
    align-self: auto;
    min-width: 0; min-height: auto;
    color: #f00; font-size: 1.4em; font-weight: bold;
    margin-left: auto; margin-right: auto;
}

.headline div.top-re {
    order: 3
    flex: 0 1 auto;
    align-self: auto;
    font-size:0.9em; font-weight:bold; color:#222;
    min-width: 0; min-height: auto;
    margin-left: auto; margin-right: auto;
}		

/* Menu */
div.navbar {   
  color: #222; background-color: #fff;
  margin: 5px auto; max-width: 800px;
  border-bottom: 1px solid #f00;
  font-size: 1.0em;
  display: flex;
  justify-content: space-around;
  }

a.button_up {
   text-align: center; font-size:0.8em; font-weight:bold;
	} 
a.button_up:link {
  text-decoration: none; display: block;
  padding: 0.5em; color: #555;
	}

a.button_up:visited {
  text-decoration: none; display: block;
  padding: 0.5em; color: #555;
	}

a.button_up:hover {
  text-decoration: none;
  display: block; color: #f00;
	}
	
@media all and (max-width: 600px) {
  .navbar {
      flex-flow: column wrap;
      padding: 0;
  }

  a.button_up {
      padding: 0px;
  }
 
  a.button_up {
    text-align: center; padding: 10px;
    border-bottom: 1px solid #f00;
  }
}

/* main */
div.main {
	padding: 20px; margin: 0 auto; position: relative;
		}

/* anmelden */
div.anmelden {   
  color: #111; background-color: #fff;
  font-size: 0.9em;
  max-width: 800px;
  margin: 0px auto; padding: 10px;
  }

/* content */
div.content {   
  color: #111; background-color: #fff;
  font-size: 1.2em;
  max-width: 800px; padding: 10px;
  margin: 0px auto;
  }

/* Button Artikelliste, abmelden, zurück, ... */
.button-klein {
 text-align: center;
 font-size:0.8em; font-weight:bold; color:#222; background-color: #eee;
 padding: 2px 5px;
 border-bottom: 1px solid #f00;
 /*border-radius: 5px; */
	} 

a.button-klein:link {
 	text-decoration: none;
	}

a.button-klein:visited {
 	text-decoration: none;
	}

a.button-klein:hover {
 background-color: #fff; color: #f00;
 text-decoration: none;
	}


/* DB-Info Tabelle */
.liste {
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: auto; margin-right: auto;
}
.liste th {
    text-align: left; font-size: 0.9em;
    padding: 0.5em;
    border-bottom: 1px solid #ddd;
}
.liste td {
    text-align: left;
    padding: 0.5em;
    border-bottom: 1px solid #ddd;
}

/* Liste für Eingabe */
.liste-eing {
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: auto; margin-right: auto;
}
.liste-eing th {
    text-align: left; font-size: 0.9em;
    padding: 0.3em;
    border-bottom: 1px solid #ddd;
}
.liste-eing td {
    text-align: left;
    padding: 0.3em;
}


/* form login */
    .anmeld-form {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        background: #fff;
    }
    .login-form{
        width: 280px;
        margin: 0 auto;
        padding: 1em;
        background: #fff;
        color: #ddd;
    }
    .form-header{
        text-align: center;
        margin-top: 2em;
        margin-bottom : 2em;        
        font-size: 1.3em;
        color: #333;       
    }
    .form-input{
        background: #eee;
        border: 1px solid #f00;
        padding: 12px;
        width: 100%;
        font-size: 1.1em;
        font-weight: bold;
        color: #333;
        box-sizing: border-box;
    }
    .form-group{
        margin-bottom: 1em;
    }
    .form-button{
        background: #800;
        border: 1px solid #800;
        color: #ddd;
        font-weight: bold;
        padding: 10px;
        width: 100%;
        text-transform: uppercase;
    }
    .form-button:hover{
        background: #f00;
    }
    .form-footer{
        text-align: center;
    }

/* form status */
.status-form{
   width: 280px;
   margin: 0 auto;
   padding: 0.8em;
   background: #fff;
   color: #333;
   }
.status-header{
   text-align: left;
   padding-bottom: 1.0em;		       
   font-size: 1.3em;
   color: #333;       
   }

.status-set{
   margin-bottom: 1em;
   }
.status-button{
   background: #eee;
   border-bottom: 2px solid #555;
   font-size: 1.2em;
   color: #333;
   font-weight: bold;
   padding: 0.5em;
   margin-top: 0em;
   width: 100%;
   }
.status-button:hover{
	background: #fff;
   color: #f00;
   border-bottom: 2px solid #f00;
   }

/* form einst */
.einst-form{
	width: 400px;
   margin: 0 auto;
   padding: 0.8em;
   background: #fff;
   color: #333;
   }
.einst-header{
   text-align: left;
   padding-bottom: 1.0em;		       
   font-size: 1.3em;
   color: #333;       
   }
.einst-set{
   font-size: 0.9em;
   margin-bottom: 1.3em;
   }
.einst-input{
   background: #fff;
   border-style: none;
   border-bottom: 1px solid #f00;
   padding: 2px;
   width: 100%;
   font-size: 1.3em;
   font-weight: bold;
   color: #333;
   margin-top: 0.1em;
   box-sizing: border-box;
   }
.einst-input-readonly{
   background: #fff;
   border-style: none;
   padding: 2px;
   width: 100%;
   font-size: 1.3em;
   font-weight: bold;
   color: #333;
   margin-top: 0.1em;
   box-sizing: border-box;
   }
.einst-button{
   background: #eee;
   border-bottom: 2px solid #555;
   font-size: 1.2em;
   color: #333;
   font-weight: bold;
   padding: 0.5em;
   margin-top: 1em;
   width: 100%;
   }
.einst-button:hover{
   background: #fff;
   color: #f00;        
   border-bottom: 2px solid #f00;
   }


/* ------------------------------------------------------------------------------------ */








div.line {
  displa

y:inline-block; min-width:1px; float: left;
  margin-top:2px; padding:2px 0px; 
  font-size:14px; text-align:center; font-weight:normal; 
  color:#555;
  }


div.submenu {
  position: relative;
  margin-left: 145px; margin-top: 4px;
  padding: 5px;  
  float: left;
  background-color: #336699;
  font-family:Arial, Verdana, sans-serif; font-size:13px; text-align: center;
  	}


div.right {
  float: right; position: relative;
  width: 220px; margin: 10px;	
  background-color: #ffa07a;
	 }
	 
#anmeld {
	width: 240px; background-color: #ddd; text-align: center;
   border:1px solid #4d4d4d; border-radius: 5px;  
   box-shadow: 2px 2px 5px black;
   margin: auto; padding-top: 20px; padding-bottom: 20px;
     }

div.form {
    width: 500px; background: #ddd; text-align: left; 
    border:1px solid #333; border-radius: 5px; box-shadow: 2px 2px 5px black;
    margin: 40px auto; padding: 20px;
		}

div.login {
    width: 200px; background-color: #ddd; text-align: left; 
    border:1px solid #f00; border-radius: 5px; box-shadow: 2px 2px 5px black;
    margin: 40px auto; padding: 20px;
		}



div.navi_inactive {
    float: left; width: 155px; height:  20px;
	 margin-top:10px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px;
	 padding: 10px; text-align: center;
	 font-size:11px; color: #888888; background-color: #cccccc;
	 border-radius: 5px; box-shadow: 2px 2px 5px black;
		}

	a.navi {
  float: left; width: 155px; height:  20px;
	 margin-top:10px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px;
	 padding: 10px; text-align: center; color:#555; background-color: #f3e2a9;
	 border-radius: 5px; box-shadow: 2px 2px 5px black;
		}
		
	a.navi:link {
      text-decoration: none;		
		}
	a.navi:visited {
      text-decoration: none;		
		}		
	a.navi:hover {
		background-color: #f90;
      text-decoration: none;		
		}



		
a.button_ausw {
	display: inline; float: left;
	width: 500px; margin-bottom: 10px; padding: 8px 50px;
   border: 1px solid #808080; border-radius: 2px; box-shadow: 2px 2px 5px black;   
   background: #f3e2a9;  text-align: left; font-size:12px; font-weight:bold;
   color:#555; 
	} 

a.button_ausw:link {
 	text-decoration: none;
	}
a.button_ausw:visited {
	text-decoration: none;
	}
a.button_ausw:hover {
	background: #f90; text-decoration: none;
	}		



a.button_anmeld {
  display: inline;
  width:300px; margin-bottom: 10px; padding: 5px 10px;
  text-align: center;  font-size:12px; font-weight:bold; 
  color:#555; background-color: #f3e2a9;
  border: 1px solid #808080;  border-radius: 5px; 
	} 

a.button_anmeld:link {
 	text-decoration: none;
	}

a.button_anmeld:visited {
 	text-decoration: none;
	}

a.button_anmeld:hover {
 background-color: #f90;
 text-decoration: none;
	}