ol, ul{list-style:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html {-webkit-text-size-adjust:100%;}
body {font-family:Arial, Verdana, sans-serif; color: #555; font-size: 14px; background:#FFF;font-weight:normal; line-height:20px;}
hr {clear:both; display:block; margin:20px 0; width:100%;border:1px solid #CCC;}


#wrapper    {width:80%; max-width:1000px; padding:20px; background-color:#FFF; margin:40px auto; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.45); -moz-box-shadow:0 0 8px rgba(0,0,0,0.45); box-shadow:0 0 8px rgba(0,0,0,0.45);}
#footer     {text-align:center; color:#999; padding:15px 0 0 0; font-size:0.85em;}
#content    {width:100%; background:#f9f9f9; padding:20px;}

h1 {text-align:center; padding:0 0 20px 0; line-height:28px;}
p.subtext {text-align:center; margin-bottom:30px;}
h1, h2, h3 {font-weight:normal; margin-bottom:8px;}
ul {margin:0 0 25px 0;}
p  {margin:0 0 25px 25px;}
ul {list-style:square;}

hr {clear:both; width:100%; border:none; height:1px;}
hr.trenner {border-top:1px solid #FFF; height:1px; margin:30px 0;}
hr.trenner-2 {border-top:2px solid #CCC; height:1px; margin:30px 0;}

.desc a {color:#000099;}
#footer a {color:#777;}

/* Einfache Flexboxdefinition zu gleichen Höhe */
/* Flexboxbereiche bisher: Startblocks, sidebar ab 900px, Megamenu .sf-menu .flexo, .seo-con */
.flexo {
  width:100%;
  display: -ms-flexbox; display: -webkit-flex; display: flex;  
 -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;

 -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;

 -webkit-align-content: stretch;  -ms-flex-line-pack: stretch; align-content: stretch;
 -webkit-align-items: stretch;  -ms-flex-align: stretch; align-items: stretch;
 -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}


pre { 
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 background-color:#F5F5F5;
 padding:10px;
 border-radius:10px;
 display:block;
 margin:30px 0;
 }
pre:before {content:"Quellcode:"; display:block; font-size:1em;margin-bottom:10px; color:#1A4099; font-weight:bold;}
pre.options:before {content:"Options:";}



ul#nav   {list-style:none; margin:0 0 30px 0; padding:0;}
ul#nav:after {content:"."; clear:both; height:0; line-height:0;}
#nav li   {float:left; margin:0 2px 0 0; padding:0;}
#nav li a {display:block; padding:10px; text-align:center; color:#FFF; background-color:#4057A6; text-decoration:none; font-size:16px;}
#nav li.active a {background-color:#888;}

#start #nav-start,
#slider #nav-slider {background-color:#999;}

ol.subnav       {list-style:none; margin:0 0 50px 0; padding:0;}
ol.subnav:after {content:"."; clear:both; display:block; width:100%; height:0; line-height:0;}
.subnav li      {float:left; margin:0 2px 0 0; padding:0;}
.subnav li a    {display:block; padding:10px; text-align:center; color:#444; background-color:#C1C1B3; text-decoration:none; font-size:16px;}
.subnav li a.current  {background-color:#666; color:#CCC;}
.subnav li a:hover    {background-color:#CCC; color:#444;}


button.button {padding:10px 25px;}


@media only screen and (max-width: 700px) {
  #wrapper {width:98%; padding:2%; margin-top:20px;}
  #content {padding:3%;}

}


.popover {
  background-color:#EEE;
  padding:20px;
  box-shadow:0 0 8px rgba(0,0,0,0.3);

  transition: background-color 1.8s;
  @starting-style {
    background-color: #C0D6AD;
  }
}

.popover p {margin-left:0;}