body {background-color:white;
        text-align:left;
        font-size:100,01%;
        font-family:"Century Gothic", CenturyGothic, Geneva, AppleGothic,sans-serif;
        line-height: 150%;  
        color:black; 
        margin:1em 1em 1em;
  display: flex;
  flex-flow: row wrap;
}


p, dd, address {
        font-size:100,01%;
        font-family:"Century Gothic", CenturyGothic, Geneva, AppleGothic,sans-serif;
        line-height: 150%;  
        color:black; 
        font-style:normal;
}

p { margin: 0 0 0.5em 0;}
dd { margin: 0 0 0.5em 2em;}

.hidden { 
position:absolute; 
left:-1000px; 
top:-1000px; 
width:0; 
height:0; 
overflow:hidden; 
display:inline; 
} 


/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  
header, 
nav, 
article, 
aside, 
footer
 {
	border-radius: 0.5em;
	flex: 1 100%;
}


nav {display:none;}

.fabar_nav 
 {
	flex: 1 100%;
  text-align:right;
  margin-right:2em;
}

header {
    display: flex;
    flex-flow: column wrap;
    align-items: center; 
    text-align: center; 
   }
 
header img {flex: 1 0 96px; width:96px; margin:10px; }
  
ul#navlist
 { padding:0px;
  list-style-type:none;
  text-align:right;
  margin-right:2em;
}
 
#navlist li 
{ 
margin-bottom:1.6em;
white-space:nowrap;
}

  #navlist li a:link, #navlist li a:visited, #navlist li span {
display: block;
padding:0.4em; 
   border-radius: 10px; 
    font-weight: bold;
    font-size:120%;
}
 
 #navlist li span {
  background-color: white;
  border: solid 2px #ff3300; 
  color: #ff3300;
    box-shadow: 10px 10px 5px #ff3300;
   }
 
#navlist li a:link, #navlist li a:visited {
  background-color: #5D841E;
  border: solid 2px #5D841E; 
  color: white;
   box-shadow: 10px 10px 5px silver;
   }
 
#navlist li a:hover, #navlist li a:focus {
  background-color: white;
  border: solid 2px #5D841E; 
  color: #5D841E;
   box-shadow: 10px 10px 5px #5D841E;
   }

div#aboutme {
display: flex;
flex-flow: column nowrap;} 

div#aboutme img {margin:1em;max-width:90%;height:auto;}
div#aboutme address {line-height: 150%;}

   
a:link,a:visited
{ text-decoration:none; 
font-weight:normal; 
        font-size:11.5pt;
        font-family:Verdana,Arial,sans-serif;
color:#ff3300; }

a:hover,a:active,a:focus 
{ text-decoration:underline; 
font-weight:bold; 
color:#ff3300; }

h1.headerh1 {
font-size:130%; 
padding:0 30px; 
color:  #ff3300;
border-color: #ff3300;
}

a.headerlink:link {
 font-weight:bold; 
 }

a.headerlink:focus, a.headerlink:hover {
  border: 1px solid #ff3300;
  text-decoration:none;
  border-radius: 10px;
background-color:#E4F0B8; }


h1 
{
font-weight:bold; 
font-size:200%; 
color:#5D841E;  
line-height:170%;
margin:0px; 
}

h2, dt 
{ font-weight:bold; 
font-size:110%; 
color:#ff3300;}

.green {color:#5D841E; }

ul.square {list-style-type:square; padding-left:1em;}
ul.square li {
      color:black; 
      margin-bottom:0.5em;
      line-height:150%;}

aside {padding: 20px; margin: 10px; border: solid 1px #ff3300;}
article {padding: 20px; margin: 10px; border: solid 1px #5D841E;}

@media all and (min-width: 50em) {
 body {
margin:1em 10% 1em 10%; 
}

main { 
width:100%;
display: flex;
    }

 .fabar_nav {display:none }
nav {display: block;}
 
 header {
     flex-flow: row nowrap;
     justify-content: flex-end;
	 align-items:flex-end;
	text-align: right; 
	}
 
 header img {
    flex: 0 0 96px;
	-webkit-flex: 0 0 96px;
	-mx-flex: 0 0 96px;
    width: 96px;
  }
 
 h1.headerh1 {
font-size:180%; 
padding:0 1em 0 6em;
}

ul.square {padding-left:2em; margin-bottom:1em;}

div#aboutme {
display: flex;
flex-flow: row nowrap;
align-items: center; } 

div#aboutme img {margin:1em 5em 1em 1em;}
div#aboutme address {line-height: 150%;}


ul#navlist {
    text-align:center;
    margin:4em 0; 
 	}

ul#navlist li {float: left; margin-right:5%;} 
  
article {                        
   flex-basis: 2 1 70%;
   margin: 10px 20px 10px 0px;
  }
 
  aside {
   flex: 1 1 30%;;
   margin: 10px 0px 10px 20px;
  }
  ]