html,
	body {
		margin:0;
		padding:0;
		height:100%;
                min-height:100%;
                font-family: arial;
                font-size: 10pt;
	}
	#container {
		min-height:100%;
                height: 100%;
		position:relative;
                overflow: hidden;
        background-image: url(bg.jpg);
         background-repeat: repeat;
	}
	#header {

		height:70px;
                background-image: url(bg.jpg);
                background-repeat: repeat;
	}

        #headerleft { float:left;   height: 70px; width: 50%;               background-image: url(header.jpg);background-repeat: no-repeat; background-position: left;}

         #headerright {  float: right; height: 70px;width: 50%;background-image: url(footer.jpg);
	 background-repeat: no-repeat; background-position: right;}

	#bdy {


	/* Height of the footer */
	}
	#footer {
		position:absolute;
		bottom:0;
		width:100%;
		height:30px;			/* Height of the footer */
	 background-image: url(bg.jpg);
                background-repeat: repeat;
	}


        #left {
            width: 100%;
            height: 85%;
            min-height: 85%;
            background-image: url(mitteklein.jpg);
            background-repeat: repeat;
            overflow: auto;
        }

         #left_sub {
            float: left;
            margin-left: 0.25%;
            margin-top: 0.2%;
            width: 19%;
            height: 98%;
            min-height: 98%;
            overflow: hidden;

        }






table {
    margin-top: 20px;
    margin-bottom: 20px;
    width:99%;

    border-color: #333366;
    border-style: solid;

    border-width: 0 0 1px 1px;

    border-spacing: 0px;
    border-collapse: collapse;

}
th {
    border-width: 1px 1px 0 0;
    border-collapse: collapse;
    border-color: #333366;
    border-style: solid;

    background-color: #CCCCCC;
}

td {
    border-width: 1px 1px 0 0;
    border-color: #333366;
    border-style: solid;

    background-color: #FFFFFF;
}

textarea {
    width: 100%;
    height: 50px;
    overflow: auto;
    background-color: #EEEEEE;
}

input[type=text], input[type=file] {
    width: 50%;
    background-color: #FFFFFF;
}



input[type=button] {
    width: 210px;

}
input[type=submit] {
    width: 210px;

}



#content {
    height: 100%;
    background: #FFFFFF;
    padding-bottom: 30px;
}

#links {
    border: solid 1px; border-color:#48f;background:#F2F2E5;
    margin: 3px;
    float: left;
    width: 20%;
    height: 78%;
    background: #DDDDDD;
    overflow: auto;
}



#mitte {
    margin: 3px;
    float: left;
    width: 50%;
    height: 78%;
    background: #B2B2B2;
    border: solid 1px; border-color:#48f;background:#F2F2E5;

}

#rechts {
     margin: 3px;
    float: left;
    width: 26%;
    height: 78%;
    background: #c1d3e5;
     border: solid 1px; border-color:#48f;
}

#fotos {
	height: 300px;
	overflow: auto;
}

#fotos2 {
	height: 220px;
	overflow: auto;
}
#fotos_g {

    width: 10550px;
	overflow: auto;
}

#fotos_c {

    width: 1800px;
	overflow: auto;
}

#fotos_n {

    width: 800px;
	overflow: auto;
}

/* Menue - ueberarbeitet: geht jetzt ueber die gesamte Breite,
   die Punkte verteilen sich gleichmaessig (Flexbox statt Sprite-Floats) */

#menu{ width:100%; }
.menu{
    margin:0; padding:0; height:36px; width:100%;
    display:flex;
    list-style:none;
    background:url('topMenuImages.png') repeat-x;
    box-sizing:border-box;
}
.menu li{
    flex:1 1 0;
    padding:0; margin:0; list-style:none;
    min-width:0;
}
.menu li a{
    display:flex; align-items:center; justify-content:center;
    height:36px; width:100%;
    color:rgb(255,255,255); text-decoration:none;
    font:13px Verdana, Arial, Helvetica, sans-serif;
    cursor:pointer;
    background:url('topMenuImages.png') 0px -30px repeat-x;
    box-sizing:border-box;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu li a span{ line-height:normal; padding:0 6px; }
.menu li a:hover{ background-position:0px -60px; color:rgb(255,255,255); }
.menu li a.active, .menu li a.active:hover{
    font:13px Verdana, Arial, Helvetica, sans-serif;
    background:url('topMenuImages.png') 0px -90px repeat-x;
    color:rgb(255,255,255);
}

@media (max-width: 600px){
    .menu li a{ font-size:11px; }
    .menu li a span{ padding:0 3px; }
}

/* Fotogalerie der Seite "40 Jahre" */
#fotos40{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 0 20px 0;
}
#fotos40 a{ display:block; }
#fotos40 img{
    height:160px;
    width:auto;
    display:block;
    border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
}

/* Logout-Leiste auf den geschuetzten Seiten */
#logout-bar{
    text-align:right;
    font-size:11px;
    padding:4px 12px 0 0;
    color:#333333;
}
#logout-bar a{ color:#333366; }

/* Login-Seite */
#left.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
}
#login-box{
    background:#ffffff;
    border:1px solid #cccccc;
    border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    padding:24px 28px;
    width:260px;
}
#login-box h3{ margin-top:0; text-align:center; }
#login-box label{
    display:block;
    margin-bottom:12px;
    font-size:12px;
    color:#333333;
}
#login-box input[type=text],
#login-box input[type=password]{
    display:block;
    width:100%;
    margin-top:4px;
    padding:6px;
    box-sizing:border-box;
}
#login-box button{
    width:100%;
    padding:8px;
    background:#4CAF50;
    color:#ffffff;
    border:none;
    border-radius:3px;
    cursor:pointer;
    font-size:13px;
}
#login-box button:hover{ background:#3e8e41; }
.login-error{
    color:#b30000;
    font-size:12px;
    text-align:center;
}
#cookie-hint{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1000;
    background:#222222;
    color:#f2f2f2;
    padding:12px 16px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    box-shadow:0 -2px 6px rgba(0,0,0,0.4);
}
#cookie-hint span{ max-width:700px; }
#cookie-hint button{
    background:#4CAF50;
    color:#ffffff;
    border:none;
    padding:6px 18px;
    cursor:pointer;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    border-radius:3px;
}
#cookie-hint button:hover{ background:#3e8e41; }