/* 
#FDF5E6 lecihtes braun
#9C6B30; mittleres braun
*/


body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}


#top-logo { position: absolute; top: 0.5em; right: 0.5em; }

#top-title { position: absolute; left: 50%; top: 0.35em; }

#top-title > div {
    position: relative; left: -50%; 
    font-size: 200%; font-weight: bold;
    padding: 0 0.5em; border-radius: 15px;
}



#background {
    position: absolute; width: 100%; z-index: -1;
}


@media screen and (min-width: 800px){
    #background {
	height: 70px;
	background-color: white;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-image: url("../media/pict/bg_header.jpg");
	/* opc-adapt-url background-image: url("[cdir]/media/pict/bg_header.jpg"); */
    }


    #top-nav   { padding-top: 55px; text-align: center;}
    #top-title div { color: white; background-color: rgba(0,0,0,0.5); }
}




@media screen and (max-width: 800px){
    #background { background-color: #C7AC8A; height: 60px; }

    #top-nav { padding-top: 60px;}
    #top-nav .nav-menu { background-color: #E6D9C9 ; }
}




table.tbl-A { background-color: #f8f8f0; padding: 0.5em 1em;}
table.tbl-A th, table.tbl-A td { padding: 0.125em 0.5em;}



form.login > p > span { display: inline-block; min-width: 7em;}


div.login-msg {
    background-color: #eee;
    border: solid 3px red;
    margin: 0.25em 1em; padding: 0.25em 1em;
    animation: msg-border 250ms 6 alternate-reverse forwards;
    overflow: hidden;
}

@keyframes msg-border { 100% { border-color:#eee; }}


div#footer { diplay: absolute; bottom: 0px;}



div#home {display: flex; flex-wrap: wrap; margin: 0;  justify-content: center; }
div#home > div { width: 20em; margin: 0.5em; padding: 0.5em; background-color: #fefaf7;}
div#home > div > ul > li { margin-bottom: 0.5em;}
div#home a { text-decoration: none; font-weight: bold; color: #9C6B30;}
div#home > div > h2 { margin: 0.5em 0;}

div#wetter { display: absolute;}


.disabled { color: #999;}





.service-list > div { margin: 0.5em 0; line-height: 125%;}


img.btn-img { width: 20px; cursor: pointer; vertical-align: middle; }