body {
    background:#DADFE1 url("files/Liederbuch/Kinderliederbuch/bg_music.jpg") center top repeat;
    font-family:Andada,Raleway,Arial,'San Francisco','Helvetica Neue',sans-serif;
}
a {
    text-underline-offset:5px;
}
#wrapper {
    margin-top:5px;
    margin-bottom:5px;
    padding:5px;
    background-color:#fffacf;
    -webkit-box-shadow:0 0 1px 1px #af6b2f;
    box-shadow:0 0 1px 1px #af6b2f;
    border-radius:4px;
    font-family:Andada,Raleway,Arial,'Unicode MS',Helvetica,Sans-Serif;
    color:#3d3d3b;
    cursor:default;
    overflow:hidden;
}
#container {
    width:100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-flow: row wrap-reverse;
    justify-content:flex-start;
    margin-top:1rem;
}
@media screen and (min-width:1650px) {
    .mobile1 {
        display:none;
    }
}
#left {
    order:1;
    flex-grow: 1;
    flex-basis:260px;
}
#main {
    order:2;
    flex-grow: 4;
    flex-basis:600px;
    padding: 10px;
}
.invisible {
    display:none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
ol,
li {
    margin:0;
    padding:0;
}
h1 {
    padding-top:10px;
    padding-bottom:8px;
    font-size:2.1rem;
    line-height:2.4rem;
    font-weight:bold;
}
h2,
h3,
h4 {
    padding:30px 5px 18px 1px;
    font-size:1.1rem;
    line-height:1.4rem;
    font-weight:bold;
}
h5 {
    padding-top:10px;
    padding-bottom:8px;
    font-size:1.05rem;
    line-height:1.4rem;
    font-weight:bold;
}
p {
    margin-bottom:10px;
    font-size:1rem;
    line-height:1.5rem;
    letter-spacing:1px;
}
@media screen and (min-width:500px) {
    p {
        text-align: justify;
    }
}
#container li {
    font-size:1rem;
    line-height:1.4rem;
}
#main h1 {
    display:block;
    margin-top:5px;
    margin-bottom:10px;
    padding-top:7px;
    padding-bottom:7px;
    border-top:1px solid;
    border-bottom:1px solid;
    font-weight:bold;
}
a,
a:active,
a:hover,
a:visited {
    color:#02545c;
}
img {
    margin:5px 10px 5px 25px;
    border:2px solid rgba(0,0,0,.5);
}
.leftimage {
    margin:10px 20px 10px 0px;
}
#left img {
    margin:2px 15px 5px 0px;
}

.highlight {
    padding:0;
    margin:0;
}
p.highlight {
    background-color:#ffeabf;
    border-color:rgba(28,78,105,.5);
    border-radius:5px;
    padding:19px;
}
#header {
    background-color:#fa9d32;
    border-top:0px double rgba(151,72,2,.1);
    border-right:0px double rgba(151,72,2,.1);
    border-bottom:3px double rgba(151,72,2,.1);
    border-left:0px double rgba(151,72,2,.1);
    border-radius:4px;
}
@media screen and (max-width:1649px) {
    #header {
        margin-top: 60px;
    }
}
@media screen and (max-width:1649px) {
    #header .mod_navigation {
        display:none;
    }
    .mobile1,
    .mobile1 img {
        position: fixed;
        z-index: 500;
        top: 18px;
        left: 10px;
        margin:0;
    }
    .mobile_menu nav {
       padding-top: 80px;
    }
    .mobile_menu nav ul li {
       display:block;
       min-width:40vw;
       text-align:left;
    }
}
.mod_navigation.block {
    position:relative;
    margin-right:20px;
    padding:20px 6px;
}
#header h1 {
    min-width:50px;
    display:block;
    margin-bottom:3rem;
    font-size:4rem;
    line-height:4rem;
    font-weight:bold;
    color:#f0f0f0;
    text-align: center;
    text-shadow: 3px 3px 1px rgba(23, 23, 23, 0.5);
     -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
}
@media screen and (max-width:550px) {
    #header h1 {
        min-width:50px;
        display:block;
        margin-bottom:1rem;
        font-size:3rem;
        line-height:3.4rem;
    }
}
#header h3 {
    margin-top:1rem;
    font-size:2rem;
    line-height:2rem;
    font-weight:bold;
    color:#f0f0f0;
    text-align: center;
    text-shadow: 2px 1px 1px rgba(23, 23, 23, 0.5);
}
@media screen and (max-width:550px) {
    #header h3 {
        margin-top:1.8rem;
        font-size:1.5rem;
        line-height:1.8rem;
    }
}
.mod_randomImage.block {
    bottom:0;
    left:0;
    right:0;
    top:-90px;
    position:relative;
    float:right;
    margin:0 0 -70px;
}
ul.level_1 a,
ul.level_1 a:link,
ul.level_1 a:visited,
ul.level_1 a:hover {
    position:relative;
    outline: none;
}
.mod_navigation ul.level_1 {
    width:100%;
    border-top:2px solid #c30;
    border-bottom:2px solid #c30;
    font-size:.8rem;
    line-height:2.5rem;
    text-transform:uppercase;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
}
.level_1 {
    margin-right:10px;
    margin-left:10px;
}
@media screen and (min-width:1650px) {
    ul.level_1>li>a,
    ul.level_1>li.active {
        color:#9e2613;
        font-weight:normal;
        cursor: pointer; 
        text-decoration: none;
        overflow:visible;
    }
}
@media screen and (max-width:1199px) {
    ul.level_1>li>a,
    ul.level_1>li.active {
        height:30px;
        position:relative;
        display:block;
        padding:10px 3px 0;
        font-size:14px;
        line-height:30px;
        color:#FFF;
        cursor: pointer;
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        horizontal-align: middle;
    }
}
@media screen and (max-width:1199px) {
    ul.level_1>li.active, ul.level_1>li:hover{
        margin-top:10px;
    }
}
.level_1 a,
.level_1 a:link,
.level_1 a:visited,
.level_1 a.active,
.level_1 a:hover,
ul.level_1>li.active {
    font:1.2rem/2.9rem Andada,Raleway,Arial,'Unicode MS',Helvetica,Sans-Serif;
}
ul.level_1>li>a:hover,
ul.level_1>li.active {
    background-color:#9e2613;
    color:#fff;
    padding: 0px 4px;
    font-weight:300;
}
@media screen and (max-width:1649px) {
ul.level_1>li.active {
    padding-bottom: 19px;
    margin-bottom: -15px;
    line-height:2rem;
}}

ul.level_1>li:before,
ul.level_1>li:after {
    width:7px;
    height:30px;
    left:-7px;
    top:0;
    position:absolute;
    display:block;
    content:' ';
}
#left {
    padding: 20px;
    margin-left:0;
}
#home {
    padding:10px;
    border-left:3px double rgba(28,78,105,.2);
}
.ce_comments .info {
    padding-top:.25em;
    padding-bottom:.25em;
    padding-left:.3em;
    background-color:#b5b5b5;
    border-top:1px dotted;
    font-size:1em;
    font-weight:bold;
}
.ce_comments .comment {
    margin-bottom:10px;
    padding:.25em .5em;
    background-color:#fff;
    font-size:1em;
}
.formbody input,
.formbody textarea {
    margin-top:8px;
    padding:.25em;
    border:1px inset #7d827d;
}
#footer {
    width:100%;
    padding-top:20px;
    padding-bottom:20px;
    text-align:center;
    background-color:#600;
    color:#fff;
}
#footer ul p,
#footer ul a:hover,
#footer ul a:visited,
#footer ul a,
#footer ul li {
    padding-right:10px;
    padding-left:10px;
    font-size:1rem;
    text-decoration:none;
    color:#fff;
}