/* ---------------------------------------------------------
   Basisgestaltung und Layoutbereiche
   ---------------------------------------------------------*/

* {
  -web-kit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

/* flexible Bilder begrenzen auf Viewports */

img {
  max-width: 100%;
  height: auto;
}

body { 
  background: white;
  color: #333;
  margin: 0 auto; 
}

/* Bilder zentrieren */

 .imgzentriert {
 text-align: center;
}

/* Kopf- und Fussbereich einfaerben */ 
header[role="banner"], 
footer[role="contentinfo"] {
  background: #ef3a3a;
  color: white; 
  width: 100%;
  left: 0;
}

/* header mit abgerundeten Ecken

header[role="banner"] {
  border-radius:3em 0.25em 3em 0.25em ;
}
*/

/* header mit scharfen Ecken */

header[role="banner"] {
  border-radius:0em 0em 0em 0em ;
}


/* Farbverlauf funktioniert dzt. nur bei firefox
 
header[role="banner"], 
footer[role="contentinfo"] {
  background: linear-gradient(to right, #ef3a3a, #BBDDFF);
}

*/


/* Elemente verstecken in visuellen Layouts */  
.hideme {
  position: absolute;
  top: -32768px;
  left: -32768px;
}

/* Info: nicolasgallagher.com/micro-clearfix-hack/ */ 
.cf:before, .cf:after { content: " "; display: table; } 
.cf:after, .clear { clear: both; } 

/* Padding fuer Layoutbereiche */ 

header[role="banner"] , 
nav[role="navigation"], 
div[class="wrap"],  
footer[role="contentinfo"] {
  padding: 1em;
}

/* Pageheader und -footer */
header[role="banner"] h1 {
  color: white; 
  padding: 0;
  margin: 0;
}
header[role="banner"] a {
  color: white;
  text-decoration: none; 
}
header[role="banner"] p {
  padding: 0;
  margin: 0;
}
footer[role="contentinfo"] a {
  color: white;
  text-decoration: none;  
}

/* Pageheader mit Schrift Purisa */ 

header[role="banner"] h1 {
  font-family:  'Purisa', 'Open Sans', sans-serif; 
  font-size: 32px; 
  font-size: 2rem;
  letter-spacing: 1px;
}

/* Ueberschriften und Fliesstext gestalten */ 

html {
  font-family: 'Purisa', 'Open Sans', sans-serif;
  font-size: 100%; 
}
h1   { font-size: 32px; font-size: 2rem; }   
h2   { font-size: 22px; font-size: 1.375rem; }  
h3   { font-size: 20px; font-size: 1.25rem; }

/* Ueberschriften und Fliesstext gestalten */ 

html {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 100%; 
}
body { font-size: 14px; font-size: 0.875rem; }
main { line-height: 1.7; }


@media screen and (min-width: 770px) { 

  body { 
    width: 90%; 
    max-width: 1280px; 

   -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);

    margin: 1em auto; 
  }

  html {
    background: #dddddd url("grey-bg.png") repeat left top; 
  }

  div.wrap { 
    overflow: hidden; 
  } 

  footer[role="contentinfo"] {
    clear:both;
  } 


} /* Ende @media */ 


/* eof */