/*MEDIA QUERY - Menü verstecken, Menü-Schaltfläche anzeigen */

@media screen { 
    #printlogo {visibility: hidden;}
}

@media print {    
    #menu, #links, #v_titel, #fuss, #hintprint, #logo, #printhint { display: none; }
    #printlogo { visibility: visible;}
    #content { margin-top: 1em; background-color: #FFF !important;
        -webkit-print-color-adjust: exact;  font-size: 10pt; }
    hr { font-size: 1.2em; page-break-before: always;}
}


#menu { background-color: #7AC142; margin:0px;}
#menu li {
    display: table-cell;
    width: 14%;
    table-layout: fixed;
    border-spacing: 5px;
    text-align: center;
    font-weight: bold;
    line-height:220%;
}

@media only screen and (max-width: 40rem) {
    #v_titel {
        font-size:160%;
        padding: 0.1rem 1rem;
    }
    

    #subnavigation { display: none; }
    #loginformular {display: none;}
    .messagepop {
          background-color:white;
          border:1px solid grey;
          cursor:default;
          display:none;
          position:absolute;
          top: 50px;
          right: 10px;
          text-align:left;
          width:80%;
          max-width: 14em;
          z-index:50;
          padding: 25px 25px 20px;
    }
    .messagepop p, .messagepop.div {
          border-bottom: 1px solid #EFEFEF;
          margin: 8px 0;
          padding-bottom: 8px;
    }
    input[required=required] {
        border-color: green;
        -webkit-box-shadow: 0 0 5px rgba(0, 111, 55, .5);
        -moz-box-shadow: 0 0 5px rgba(0, 111, 55, .5);
        -o-box-shadow: 0 0 5px rgba(0, 111, 55, .5);
        -ms-box-shadow: 0 0 5px rgba(0, 111, 55, .5);
        box-shadow: 0 0 5px rgba(0, 111, 55, .5);
}
    label { 
        display: inline-block;   
    }
    input.suchformular {
        font-size: 1.2em;
        margin-bottom: 0.8em;
        padding: 0.3em;
        width: 10em;
        height: 1.1em;
        border: 1px solid grey;
    }
    .suchknopf {
        -webkit-appearance: none;
        color:white;
        font:Arial,Helvetica,sans-serif;
        font-size:1.2em;
        background-color: #7AC142;
        height: 1.8em;
        border: 1px solid grey;
     }

    #menu-icon, #menu-suche, #menu-facebook, #menu-login {
	width:  35px;
	height: 35px;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        border-radius: 0.4em;
        background-clip: padding-box;
        margin-right:0.6em;
        margin-top:0.2em;
        margin-bottom:0.2em;
        float:right;
        border:1px solid grey;
    }

    #menu-icon {
	background-image:url(../layoutgrafik/menu-icon.png);
    }

    #menu-suche {
	background-image: url(../layoutgrafik/search-icon.png);
        margin-top:0.5em;
    }
    #menu-facebook {
	background-image: url(../layoutgrafik/facebook-icon.png);
        margin-top:0.5em;
    }

    #menu-login {
        background-color: #bdcbc9;
        background-image: url(../layoutgrafik/login-icon.png);
        margin-top:0.5em;
    }

    nav h1 {
        font-size: 100%;
        margin:0px;
        padding-left:1em;
        padding-top:0.5em;
        display:block;
    }

    nav ul.top { 
        display:none;
        position: absolute;
        background-color: rgb(122, 193, 66);
        border: 2px solid #A8A8A8;
        right: 20px;
        width: 50%;
        border-radius: 4px 0 4px 4px;
    }

    nav li {
        text-align: left;
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    nav:hover ul {
	display: block;
    }

    nav:hover ul {
        margin:0;
        padding-left:0.3rem;
        padding-right:0.1rem;
    }
    
    nav a {
        display:block;
    }
}

div.col { padding:0.3rem; clear: both;}

body {
    padding:0px;
    margin:0px;
    color:#000000;
    font-family:Verdana,Arial,Helvetica,sans-serif;
}

/* Menue ...inspiriert durch:
   http://blog.teamtreehouse.com/create-an-absolute-basic-mobile-css-responsive-navigation-menu
*/
.clear {clear:both;}
#suchformularmobil { 
    display: none;
    }



ul.navigation li { font-size:smaller; background-color:rgb(122, 193, 66);}

nav a, nav h1 {
    color:white;
    font-weight:bold;
    font-size: 0.94em;
}

nav ul {
/*    border-bottom: 1px black solid; */
}

nav ul {
    list-style: none;
}

li.active { 
/*    background-color:#009136; /* Farbe aus 'Gerechtigkeit1.jpg' / Logo */
    display:list-item;
    padding-left:0.2rem;
    padding-bottom:0px;
}

li.active a {
    padding-left:0.2em;
}

div.active {
    /*background-color:#009136;'/  /* Farbe aus 'Gerechtigkeit1.jpg' / Logo */
    border-bottom: 2px solid #009136;
}

nav ul {
    margin-top:0px;margin-bottom:0px;
    padding-top:0px;padding-bottom:0px;
}

#contentService > div.flexbox > div.col {
    text-align:center;
}

#contentService > div.flexbox > div.col > div {
    text-align:left;
}

/* Layout
   ========================================================================== */
/*VBE stuff*/
.aktuelles_datum { font-size: 1.2em;}
.datum_ueberschrift { font-size: 0.9em; font-weight: bold;}
.content_artikel {font-size: 13px;}
.teaser_artikel { font-weight:bold;}
.formelement, .formbuttons, .formtextarea  {
    color:#188630; font-size:13px; width:272px; height: 20px; border-radius: 0px; border:1px solid; padding:5px;
}
.formelement, .formbuttons, .formtextarea, .formdropdown  {
    color:#188630; font-size:13px; width:272px; height: 20px; border-radius: 0px; border:1px solid; padding:5px;
}
.formdropdown, .formbuttons { height: 30px;}
.formtextarea {  height: 200px; }
.formbuttons { width:15em; border: 1px solid; font-size:13px; color: #188630; margin: 1.8em 0 1.8em 0;}
.inthedark { display: none; }
.ueberschrift  { font-size: 1.2em; color:black;}
.main {padding:20px 25px 0 0;}

/*tr:nth-child(odd) {background: #7AC142; color:white;}*/

div.fieldset { 
    color: black; 
    background: white;
    font-size: 1.2rem; 
    border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom:5px;
    border: none;
}
 
form.edit div.fieldset {
    background:#F0F0F0;
	padding: 1em;
}

.anmeldung, div.fieldset > label.anmeldung {
    display:block;
    width:100%;
}

div.fieldset > h2 {
    font-weight:normal;
    font-size:100%;
    margin:0px;
}

div.fieldset > div {
    margin-bottom:0.5rem;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color:white;
  background-image:url(../images/pfeil_gruen.png);
  background-position: right;
  background-repeat: no-repeat;

}

select, #datum_von, #datum_bis, input[type=text], input[type=email], input[type=password] {
   height: 2.6rem;
   padding: 2px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    border: solid 1px #7AC142;
    font-size:100%;
    vertical-align:middle;
}

#umkreis {
    width:8rem;
}

select.daySel {
    width:3rem;
}

select.monSel {
    width:8rem;
}

select.yearSel {
    width:5rem;
}

input.anmeldung, select.anmeldung{
    max-width:45em;
    border:1px solid #ccc;
    font-size:1em;
    padding: 5px;
    min-height:30px;
    display:block;
    margin-bottom:15px;
    margin-top:5px;
    outline: none;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
}

input.date{
    max-width:45em;
    border:1px solid #ccc;
    font-size:1em;
    padding: 5px;
    min-height:30px;
    display:inline;
    margin-bottom:15px;
    margin-top:5px;
    outline: none;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
}

#kategorie, #zielgruppe, #plz, #datum_von, #datum_bis {
    width: 10rem;
}

#entfernung {
    float:right;
    text-align:right;
    width:19rem;
/*    border:1px solid green; */
    clear:both;
}

input[type="date"] {
    font-size:100%;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:normal;
}

form.fade input[type="text"], form.fade input[type="password"], form.fade input[type="email"], form.fade input[type="date"], form.fade input[type="tel"] { 
    font-size:1em;
    outline: 0;
    transition: border-bottom 0.3s; 
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="tel"]:focus { 
    border-bottom: 3px solid green; 
}

input[type=checkbox], input[type=radio]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
}

input[type=radio]{
    margin:10px;
}

textarea.anmeldung {
    max-width:43em;
    border:1px solid #ccc;
    font-size:1em;
    padding: 5px;
    min-height:30px;
    display:inline;
    margin-bottom:15px;
    margin-top:5px;
    outline: none;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
a.termin:link, a.termin:visited { font-size: 1.05em; color: #008C50;text-decoration: none;font-weight: bold;}
a.termin:hover {text-decoration: underline;}

.termin {
    clear:both;
}

.ueberschrift_einleitung { 
    display: inline;
    font-size: 1.5rem;
    line-height: 2rem;
}

div.content_tiny, #contentService > div.flexbox > div.col > div.content_tiny {
    text-align:right;
    color: #959595;
    font-size: 9px;
}

div.laufband {
    background-color: #E7ECEB;
    padding-top: 0.5%;
    margin-bottom: 0.8em;
}

header {
    background-color:white;
    text-align:left;
    vertical-align:bottom;
}

#headerelements { text-align:right; }

header object {
    width: calc(100% - 80px);
    max-width: 400px;
    margin-right:2em;
}

.pressemitteilungen {
    height:22em;
}

.aktuellethemen {
    height:23.8em;
}

.headerbox {
    background-color: white;
}

#logo {
    width: 30%;
    min-width:180px;
    max-width:311px;
    padding:1rem;
}

nav {
    clear:both; 
    background-color: rgb(122, 193, 66);
    width:100%;
}

 /*video wrapper fuer das eingebettete VBE youtube video - Thierry Koblentz*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
    overflow: hidden;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.elastic-videowrapper { 
    width: 500px;
    max-width: 100%;
} 

div.flexbox > div.col {
    background-color:white;
    margin-bottom:0.5em;
    margin-top:0.5em;
}

/* Links
   ========================================================================== */

a {
    color: #497bad;
    text-decoration: none;
}

a:hover { text-decoration: underline; }


/* Elements
   ========================================================================== */

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 2rem auto;
    width: 3rem;
}

@media (min-width: 40rem) {
    hr { margin: 2.5rem auto; }
}

hr.small { margin: 1.5rem auto; }


img.resize {
    display: block;
    height: auto;
    margin: 0 auto 1.5rem auto;
    width: 100%;
}

img.header {
    display: block;
    height: auto;
    margin: 0 auto 1.5rem auto;
    max-width: 100%;
}

.rwd {
    margin: 0 auto 1.5rem auto;
    max-width: 440px;
}

pre.band {
    font-size: 16px;font-weight: bold; color: #63666F;
    text-align:center;
    overflow: hidden;
    margin:0px;
}

div.elastic-video-wrapper { white-space: normal; margin-right:0px; }

/* Layout
   ========================================================================== */


@media (min-width:40rem) {

    #v_titel {
        position:absolute;
        right:0.5rem;
        top:0.5rem;
        font-size:130%;
    }

    #v_titel a {
        padding:1rem;
    }

    nav h1 {
        display:none;
    }

    div.laufband {
        padding-right: 0.2em;
        padding-left: 0.2em;
    }

    pre.band {
        padding-left:1%;
        padding-right:1%;
    }

    /* Header
       ========================================================================== */

    .mobile {
        margin: 0 auto;
        max-width: 150px;
    }
    #subnavigation { clear:right; font-size:small;text-align:right;margin-bottom:0.5em; }
    #subnavigation a { color: #63666F;text-decoration: none; }

    /* Section
       ========================================================================== */

    section {
        border-top: 0px solid white;
        padding: 0rem 0;
    }

    section:first-of-type { border-top: none; }


    nav ul li {
        display: inline-block;
        float: left;
        padding: 10px
    }
    nav ul li.active {
        padding-top:0px;
        margin-left:1rem;
    }


/*    Besser nicht alles verkleinern... oder zumindest den Kalender ausnehmen! 
html { font-size: 80%; } */

    .content_aktuell {color: #000;font-size: 80%;}

    .headerbox {
        background-color: white;
    }

    header object {
        margin:0.5em;
        width:400px;
    }
    
    /*Header Inhalte*/
    #suchelement  { display: block; float: left;width: 154px;height:1.485em; border-top:1px solid silver; border-bottom:1px solid silver;border-left:1px solid silver; }
    #suchbutton  { float: left;width: 29px;height:27px; border-top:1px solid silver; border-bottom:1px solid silver;border-right:1px solid silver;}
    .noBorder {padding:4px;color: #000000;font-size: 0.8em;height:1.2em;border: none;}
    .hiddensearch {display: none;}
    

    #facebooklink {
	width:  80px;
	height: 29px;
	background: url(../layoutgrafik/hintergrund_facebook_like.png) center;
        background-repeat:no-repeat;
        background-clip: padding-box;
    } 

/*
    #suchformularmobil {  float: right; margin-right:1em; margin-top:7em;background-color: pink;display:inline;}
    #loginformular {float: right;width: 191px;height:27px; border:1px solid silver; margin-top:7em; margin-right:0em;background-color: yellow;}
*/

    #suchformularmobil { display:inline;}
    #suchformularmobil, #loginformular, #facebooklink { float:right; }

    #loginformular { width: 191px;height:27px; border:1px solid silver; margin-right:0em;}

    #id_login1 {display: inline-block; width:69px; height:19px; border-right:1px solid silver;}
    #id_login2 {display: inline-block; width:69px; height:19px; border-right:1px solid silver;}
    #loginbutton {float:right; width: 29px;height:27px;}

    #headervornav { position:sticky;}

    #headerelements {float:right;width:100%;}
    #headerformular {width:calc(100% - 430px);float:right;padding-bottom:1em;}

    #headerformular > form, #headerform > a { margin-left: 1em; margin-bottom: 0.5em; }
}

@media (min-width: 52rem){
    #v_titel {
        font-size:200%;
    }
}

/* Ab 64 em wird die Schrift etwas größer und die Boxen wachsen nicht mehr weiter */
@media (min-width: 64rem) {

  html { font-size: 100%; }
    a.ueberschrift_aktuell:link, a.ueberschrift_aktuell:visited {font-size: 130%;color: #D2232B;text-decoration: none;font-weight: normal;}
    a.ueberschrift_aktuell:hover {text-decoration: underline;}
    .content_aktuell {color: #000;
                      font-size:90%;}
    
    body {
        margin: 0 auto;
        /* Maximale Breite des Containers bei großen Aufloesungen festlegen*/
        min-width: 63rem;
    }

    header object {
        margin:1em;
    }
    .hiddensearch {
        display: none;
    }

    #v_titel {
        font-size:240%;
    }

}

input.goto {
    width: 2rem;
}

input.goto, input.go_button {
    height: 2rem;
    vertical-align:top;
}

td.menu { background-color:white; vertical-align:top;padding:1rem; }

table.complete { background-color: white;margin:1rem; padding: 1rem; }

div.button { }

div.buttonlist { margin-bottom:1em; margin-top:0.2em; line-height:200%; }

div.buttonlist input { display:none; }

div.buttonlist label {
  color: black;
  border-radius:5px; float:left; padding:5px;margin:5px; 
}

div.fieldtable {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    width:100%;
    border-collapse:separate; 
    border-spacing:0 5px;
}

div.fieldtable div.fieldrow {
    display:table-row;
}

div.fieldtable div.fieldrow > div.td, div.fieldtable div.fieldrow > label {
    display:table-cell;
    padding: 12px; 
    background: white;
	font-size: 1.2rem;
}

div.fieldtable div.fieldrow > div.td {
    border-radius: 5px 0px 0px 5px;
    padding-right: 0px;
}

div.fieldtable div.fieldrow > label {
    width:100%;
    border-radius: 0px 5px 5px 0px;
}

#fuss > div.fuss_container_tabelle { 
    color: #FFF;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}

/*  flex:  flex-grow + flex-shrink + flex-basis  */
div.fuss_spalte { 
    flex:1 1 23%;
    -webkit-flex:1 1 13rem; /* Für Safari auf iOS 8/2015 */
    max-width:18rem;
    min-width: 14rem;
    line-height:200%;
}

div.fuss_spalte h3 { margin-bottom:0px; margin-top:1em; font-weight:bold; }
div.fuss_spalte a:link, div.fuss_spalte a:visited { color: #FFFFFF; text-decoration: none; display:block;}
div.fuss_spalte a:hover {text-decoration: underline;}

div.fuss_spalte > * { padding-left:1em; }

#fuss, #abbinder { width:100%; }

#abbinder { background-color:#FFF;}
#abbinder a:link, #abbinder a:visited {font-family: Arial,sans-serif;font-size: 15px;color: #000;text-decoration: none;font-weight: bold;}
#abbinder a:hover {text-decoration: underline;}

#abbinder div.c { font-size: 10px; padding-top:0.3em; }
#abbinder div.links { font-size: 12px; font-weight: bold;text-align:right;float:right; }
#abbinder > div.fuss_container_tabelle { margin-top: 0.1em; }

#fuss {
    clear:both;
    background-color: #68827E;
    padding-bottom:1em;
}

#v_titel {
    background-color:red;
    color:white;
}

#v_titel a {
    color: white;    
    display:block;
}

#beschreibung {
    clear: both;
    padding-top:0.8em;
    margin: 0px 1rem;
}

#content, #container, div.col {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

div.kacheln > div.kachel_doppelt {
    background-color:white;
    padding:0.2em;
    margin-bottom:10px;
}

a.ueberschrift_aktuell:link, a.ueberschrift_aktuell:visited {
    margin:0.4em 0.6em 0 0;
    color: #D2232B;
    text-decoration: none;
    font-weight: bold;
}

a.ueberschrift_aktuell:hover {text-decoration: underline;}