/* https://wiki.selfhtml.org/wiki/CSS/Tutorials/mehrspaltige_Layouts */
html{
    background-color: #E6F0FA;
    margin:0;
}
body {
    margin: auto;
    max-width: 80em;
    min-width: 16em;
    font-family: sans-serif;
    background-color: #fff;
}
/* Header */
header img {
    width: 100%;
    height: auto;
}

a {
    color: #005BAC;
    text-decoration: none;
}

a:hover {
    color: #4CAF50;
    text-decoration: dotted;
}

/* Navigation */
nav {
    max-width: 15em;
    font-size: 1em;
    float: left;
}

nav img {
    width: 100%;
    height: auto;
}
nav ul {
    list-style-type: none;
    padding-left: 0;
}

nav li a, nav li span {
    padding: .5em .5em .5em 1em;
    display: block;
}
nav li a:hover{
    background-color: #E6F0FA;
}
nav ul a:link {color: #333; font-style: normal;text-decoration: none;}
nav ul a:visited {color: #333; font-style: normal;text-decoration: none;}
nav ul a:hover {color: #005BAC; font-style: normal; text-decoration: none;}
nav ul a:active {color: #005BAC; font-style: normal; text-decoration: none;}
nav ul a:focus {color: #005BAC; font-style: normal; text-decoration: none;}

nav ul li span {color:#005BAC}

nav ul.menulevel1{
    margin-top: 0.3;
}

/* Menuelevel 1 */
nav ul.menulevel1 li {
    line-height: 1.2em;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid #005BAC;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}

nav ul.menulevel2 li {
    line-height: 1.2em;
    font-weight: 400;
    text-align: left;
    border: 0;
    margin-top: 0;
}

/* Search*/
#searchbox {
    padding: .5em .5em .5em 1em;
}

main {
    display: block;
    min-width: 16em;
    margin-left: 16em;
    margin-right: 0.5em;
    max-width: 65em;
}

article {width: 100%;}
article h1 {
    margin: 0 0 1em 0;
    border-bottom: solid 0.1em #005BAC;
    padding: 1em 0 1em 0;
    padding-left: 50px;
    background-image: url("img/icon-article_h1.png");
    background-repeat: no-repeat;
    background-position: left center;
}
article h2 {margin-bottom: 0.3em;}
article p {margin-bottom: 0.5em;}

footer {
    background: #005BAC;
    border-color: #828282;
    padding: 1em;
    color: #eee;
    margin-top: 0.5em;
}

footer p {
    float: right;
    margin: 0;
}

footer p a {
    text-decoration: none;
    color: #eee;
}
footer p a:hover {
    text-decoration: none;
    color: #ecdfcb;
}
/* clearfix hack to solve float issue */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Formular */
input {
    color: #003056;
    border: 0.1em solid #003056;
    padding: 0.3em 0.5em;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin: 0.1em 0.2em;
}
input[type=submit], input[type=reset] {
    text-align: center;
    transition-duration: 0.4s;
    cursor: pointer;
}

input[type=submit]:hover,  input[type=reset]:hover {
    background-color: #003056;
    color: white;
}

/* Responsive hier
1. Header Img ausblenden
2. float left ausbauen von Navigation */

@media screen and (max-width: 650px) {
    .ortsverband {
        width: 100%;
        display: block;
    }
    nav {
        width: 100%;
        font-size: 1em;
        float: none;
    }
    main {
        display: block;
        width: 100%;
        margin-left: 0.5em;
        margin-right: 0.5em;
        clear: both;
    }
    header img {
        display: none;
    }
    img {
        width: 100%;
        height: auto;
    }
}