* { padding: 0; margin: 0 auto; }
body { background-color: green; }

body > header { position: absolute; top: 0; left: 0; right: 0; height: 8.5em; overflow: scroll; }
body > header > div.breadcrumb { height: 1em; background-color: green; text-align: left; padding-left: .25em; font-family: 'Maven Pro'; padding-bottom: .25em; }
body > header > div.breadcrumb > a { text-decoration: none; text-transform: uppercase; color: #98bf21; font-size: .9em; }
body > header > h1 { background-color: white; text-align: center; height: 3em; }
body > header > h1.mediumheader { display: none; }
body > header > h1 > a { text-decoration: none; font-variant: small-caps; font-family: baskerville, serif; font-size: 2.5em; color: #030; }

body > section { position: absolute; bottom: 0; top: 8.5em; left: 14em; right: 15em; overflow: scroll; background-color: #e9eea8; padding: 0 1em 1em 1em; font-family: 'Open Sans'; }

body > section h1, body > section h2, body > section h3, body > section h4, body > section h5, body > section h6 { font-family: 'Permanent Marker'; text-align: center; padding-bottom: .5em; padding-top: .75em; }
body > section h1 { font-size: 3em; padding-top: .5em; }
body > section h2 { font-size: 2.5em; }
body > section h3 { font-size: 2em; }
body > section h4 { font-size: 1.5em; }
.center { text-align: center; }
.left { text-align: left; }
.hidden { display: none; }

body > section > article { position: relative; }
body > section > article > header,
body > section > article > section,
body > section > article > footer { width: 90%; }

body > section > article > section > picture.fullscreen { width: 100%; }
body > section > article > section > picture > img, body > section > article > section > picture > source { width: 100%; }

picture.halfwidth { width: 40%; display: inline-block;  }
picture.halfwidth:after { clear: both; }
picture > img, picture > source { width: 100%; }

hr { border: 0; height: .2em; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); margin: 1em; }
hr.tableheader { height: .1em; margin-top: .25em; margin-bottom: .25em; }
hr.tablerow { height: .05em; margin-top: .25em; margin-bottom: .25em; }

p { padding-bottom: .5em; }
section ul { padding-bottom: .5em; padding-left: 1.5em; }

body > section > article > header > h1 { padding-top: 0em; }

body > section > article > section.termine { width:100%; }
body > section > article > section.termine > div.termin { width:80%; display:block; clear:both; margin-bottom:1em; }
body > section > article > section.termine > div.termin > span.date { float:left; min-width:20%; text-align:left; }
body > section > article > section.termine > div.termin > span.name { float:left; min-width:60%; text-align:center; }
body > section > article > section.termine > div.termin > span.time { float:right; min-width:20%; text-align:right; }
span.smalltime { display: none; }

 /*format musiker portraits and captions for musiker as well as vorstand */
body > section > article > section.musiker_wrapper,
body > section > article > section > article > section.musiker_wrapper { text-align: center; }

body > section > article > section.musiker_wrapper > figure.musiker_image,
body > section > article > section > article > section.musiker_wrapper > figure.musiker_image { display: inline-block; width: 300px; margin: 1em; }

body > section > article > section.musiker_wrapper > figure.musiker_image > picture,
body > section > article > section > article > section.musiker_wrapper > figure.musiker_image > picture { width: 100%; }

body > section > article > section.musiker_wrapper > figure.musiker_image > picture > img,
body > section > article > section.musiker_wrapper > figure.musiker_image > picture > source,
body > section > article > section > article > section.musiker_wrapper > figure.musiker_image > picture > img,
body > section > article > section > article > section.musiker_wrapper > figure.musiker_image > picture > source { width: 100%; }

body > section > article > section.musiker_wrapper > figure.musiker_image > figcaption,
body > section > article > section > article > section.musiker_wrapper > figure.musiker_image > figcaption {}

body > section > article > header.notenarchiv > h1 { margin-bottom: -.75em; }
body > section > article > section.notenarchiv { width: 100%; text-align: center; }
body > section > article > section.notenarchiv > form.search_input {}
form.search_input > div.line, form.create_input > div.line { margin-bottom: .25em; }
form.search_input > div.line > span.search_parameter { margin-left: .5em; margin-right: .5em; }

/* notenarchiv - create */
form.create_input > span { margin-bottom: .1em; vertical-align: middle; }
form.create_input > span.standard { display: inline-block; }
form.create_input > span.hidden { display: none; }
form.create_input > span > span.name { display: inline-block; width: 9em; }
form.create_input > span > span.content { display: inline-block; width: 11em; }
form.create_input > span > span.content > input,
form.create_input > span > span.content > textarea { width: 15em; padding-left: .5em; margin: 0; }
form.create_input > label.additional { display: inline-block; width: 3em; }
label#l_new_composer { text-decoration: underline; color: blue; }
input#i_new_composer[type=checkbox] { display: none; }
input#i_new_composer[type=checkbox]:checked ~ span.hide { display: none; }
input#i_new_composer[type=checkbox]:checked ~ span.hidden { display: inline-block; }
input#i_new_composer[type=checkbox]:checked ~ label.subadditional { display: inline-block; width: 3em; }

/* notenarchiv - search */
section.notenarchiv > div.search_result > div.header { font-weight: bold; }
section.notenarchiv > div.search_result > div.line > span { display: inline-block; }
section.notenarchiv > div.search_result > div.line > span.title_column { width: 10em; }
section.notenarchiv > div.search_result > div.line > span.composer_column { width: 10em; }
section.notenarchiv > div.search_result > div.line > span.musictype_column { width: 10em; }
section.notenarchiv > div.search_result > div.line > span.format_column { width: 7em; }
section.notenarchiv > div.search_result > div.line > span.archive_location_column { width: 4em; }
section.notenarchiv > div.search_result > div.line > span.last_performed_at_column { width: 6em; }
section.notenarchiv > div.search_result > div.line > span.show_notes { width: 1em; text-align: right; }
section.notenarchiv > div.search_result > div.line > span.show_notes > a > img { width: 1em; text-align: right; }
section.notenarchiv > div.search_result > div.line > span.edit_entry { width: 1em; text-align: left; }
section.notenarchiv > div.search_result > div.line > span.edit_entry > a > img { width: 1em; text-align: right; }
div.split > div { padding-top:1em; }

/* notenarchiv - noten */
section.notenarchiv > div.noten_result > div.header { font-weight: bold; }
section.notenarchiv > div.noten_result > div.line > span { display: inline-block; }
section.notenarchiv > div.noten_result > div.line > span.title_column { width: 10em; }
section.notenarchiv > div.noten_result > div.line > span.composer_column { width: 10em; }
section.notenarchiv > div.noten_result > div.line > span.musictype_column { width: 10em; }
section.notenarchiv > div.noten_result > div.line > span.format_column { width: 7em; }
section.notenarchiv > div.noten_result > div.line > span.archive_location_column { width: 4em; }
section.notenarchiv > div.noten_result > div.line > span.last_performed_at_column { width: 6em; }
section.notenarchiv > div.noten_result > div.line > span.show_notes { width: 1em; }
section.notenarchiv > div.noten_result > div.line > span.edit_entry { width: 1em; }

/* notenarchiv - composer */
section.notenarchiv > div.composer_result > div.header { font-weight: bold; }
section.notenarchiv > div.composer_result > div.line > span { display: inline-block; }
section.notenarchiv > div.composer_result > div.line > span.prefix_column { width: 3.5em; }
section.notenarchiv > div.composer_result > div.line > span.firstname_column { width: 5em; }
section.notenarchiv > div.composer_result > div.line > span.middlename_column { width: 10em; }
section.notenarchiv > div.composer_result > div.line > span.lastname_column { width: 6em; }
section.notenarchiv > div.composer_result > div.line > span.suffix_column { width: 3.5em; }
section.notenarchiv > div.composer_result > div.line > span.edit_entry { width: 1em; }

/* notenarchiv - musictype */
section.notenarchiv > div.musictype_result > div.header { font-weight: bold; }
section.notenarchiv > div.musictype_result > div.line > span { display: inline-block; }
section.notenarchiv > div.musictype_result > div.line > span.name_column { width: 25em; }
section.notenarchiv > div.musictype_result > div.line > span.edit_entry { width: 1em; }

/* notenarchiv - format */
section.notenarchiv > div.format_result > div.header { font-weight: bold; }
section.notenarchiv > div.format_result > div.line > span { display: inline-block; }
section.notenarchiv > div.format_result > div.line > span.name_column { width: 7em; }
section.notenarchiv > div.format_result > div.line > span.edit_entry { width: 1em; }

div.tables_wrapper { width: 100%; }
div.tables_wrapper > div.obmaenner,
div.tables_wrapper > div.kapellmeister { width: 50%; float: left; }
div.tables_wrapper > div > div.line { width: 100%; }
div.tables_wrapper > div > div.line > span.date { width: 40%; float: left; text-align: right; margin-right: 1.5em; },
div.tables_wrapper > div > div.line > span.name { width: 60%; float: left; text-align: left; }

label.show-menu { display: none; }
body > nav { position:absolute; bottom:0; left:0; top:8.5em; width:14em; background-color:green; overflow:scroll; }
body > nav input { display:none; }
body > nav > ul > li > a,body > nav > ul > li > ul > li > a, body > nav > label { display:block; width:12em;text-align:center;padding-top:.25em;padding-bottom:.25em;background-color:#98bf21;color:#000;margin-bottom:.5em;font-family:'Maven Pro';font-size:1.05em;font-weight:bold;text-decoration:none;text-transform:uppercase; }
body > nav > ul > li > ul > li > a { background-color:#7a991a; }
body > nav > ul > li > ul { display:none; }
/*body > nav > ul > li:hover > ul { display:block; }*/
body > nav > ul li.selected > a { background-color:#006; color:#7a991a; }
body > nav > ul > li.selected > ul,body > nav > ul > li.subselected > ul { display:block; }
body > nav > ul > li > ul > li.selected { display:block; }

body > footer { position:absolute; bottom:0; right:0; top:8.5em; width:15em; background-color:green; overflow:scroll; text-align:center; }
body > nav > span.halfmobile { text-align: center; margin-top: 1em; }
body > nav > span.halfmobile > div.tpb, body > footer > div.tpb { width:10em; }
body > nav > span.halfmobile > div.social, body > footer > div.social { padding-top:.5em; padding-left:.5em; padding-right:.5em; }
body > nav > span.halfmobile > div.social > a > img, body > footer > div.social > a > img { width:15%; background-color: rgba(0,0,0,.3); }


div.login { margin: .5em .75em 0 .75em; padding: .5em; background-color: #98bf21; font-family: 'Open Sans'; }
div.login > form.login > span.line { display: block; }
div.login > form.login > span.line > label { display: inline-block; width: 3em; text-align: left; }
div.login > form.login > span.line > input { display: inline-block; width: 12em; }
div.login { margin: .5em .75em 0 .75em; padding: .5em; background-color: #98bf21; font-family: 'Open Sans'; }
div.login > form.logout > span.line { display: block; }

div.search_result > div.line:after,
div.composer_result > div.line:after,
div.musictype_result > div.line:after,
div.format_result > div.line:after {
    display:block;
    content:'';
    /*border-bottom: .1em solid black;*/
    border-width: 0 0 .1em 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    height: 1px;
    margin-top: .25em;
    margin-bottom: .25em;
}

div.composer_result > div.line:after { width: 50em; text-align: center; margin: 0 auto; margin-bottom: .2em; margin-top: .2em; }
div.musictype_result > div.line:after { width: 20em; text-align: center; margin: 0 auto; margin-bottom: .2em; margin-top: .2em; }
div.format_result > div.line:after { width: 20em; text-align: center; margin: 0 auto; margin-bottom: .2em; margin-top: .2em; }

.line > * { vertical-align: middle; }
/*
hr {
border: 0;
height: .2em;

hr.tableheader { height: .1em; margin-top: .25em; margin-bottom: .25em; }
hr.tablerow { height: .05em; margin-top: .25em; margin-bottom: .25em; }
*/

.halfmobile { display: none; }

/* popup */
#mask { display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: 0.8; z-index: 999; }
.window-popup { display: none; background: #fff; padding: .5em; border: .1em solid #0f0; float: left; font-size: 1.2em; position: fixed; top: 40%; left: 50%; z-index: 99999; box-shadow: 0px 0px .2em #0f0; -moz-box-shadow: 0px 0px .2em #0f0; -webkit-box-shadow: 0px 0px .2em #0f0; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align: center; }
.window-popup > h1 { font-size: 1.5em; margin-top: -.75em; margin-bottom: -.5em; }
.window-popup > p { margin-bottom: 0; padding-bottom: 0; }

/* small termine */
@media only screen and (max-width: 1100px) {
    body > section > article > section.termine { text-align: center; }
    body > section > article > section.termine > div.termin > span.date { float: none; }
    span.smalltime { display: inline-block; }
    body > section > article > section.termine > div.termin > span.name { float: none; display: block; }
    body > section > article > section.termine > div.termin > span.time { display: none; }
}

/* half mobile */
@media only screen and (max-width: 900px) {
    body > footer { display: none; }
    body > nav > span.halfmobile { display: block; margin-bottom: 1em; }
    body > section { right: .75em; }

    body > section > article > section.termine { text-align: center; }
    body > section > article > section.termine > div.termin > span.date { float: none; }
    span.smalltime { display: inline-block; }
    body > section > article > section.termine > div.termin > span.name { float: none; display: block; }
    body > section > article > section.termine > div.termin > span.time { display: none; }
}

/* full mobile */
@media only screen and (max-width: 700px) {
    body > header > h1.fullheader { display: none; }
    body > header > h1.mediumheader { display: block; }

    body > nav > span.halfmobile { display: none; }

    body > nav { position:relative; width: 100%; }
    body > nav input { display:none; }
    body > nav > ul > li > a,
    body > nav > ul > li > ul > li > a, body > nav > label {
        display: block;
        width: 90%;
        text-align: center;
        padding-top: .25em;
        padding-bottom: .25em;
        background-color: #98bf21;
        color: #000;
        margin-bottom: .5em;
        font-family: 'Maven Pro';
        font-size: 1.05em;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
    }

    label.show-menu { display: block; }

    /* hide ul */
    body > nav > ul { display: none; }

    /* show on menu button */
    body > nav > input:checked ~ #menu { display: block; }
    body > nav > input:checked ~ #menu ul { display: block; }
    body > nav > ul > li > ul > li > a { background-color: #7a991a; }

    body > section { position: relative; width: 90%; left: 0; margin-top: .5em; }

    body > footer { display: block; position: relative; margin-top: 1em; width: 90%; }

    div.login { margin: .5em 0 0 0; padding: .5em; background-color: #98bf21; font-family: 'Open Sans'; }
}