body { font-family: Gabriola, Arial, Verdana, sans-serif; margin: 0; padding: 0; }

a img { border: none; }

#container { margin: 0 auto; }

#header { text-align: center; top: 0; width: 100%; }
#logo { width: 70%; }

#navigation { text-align: center; }
#navigation ul { display: inline-block; list-style-type: none; margin: 0 auto; padding: 0; }
#navigation ul li { background-color: #F2F2F2; cursor: pointer; float: left; font-size: 150%; line-height: 130%; padding: 0 15px; }
#navigation ul li a { color: #000000; text-decoration: none; }
#navigation ul li a:hover { color: #585858; }
#navigation ul li:first-child { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#navigation ul li:last-child { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: none; }

section { min-height: 300px; }
section h1 { border-bottom: 1px solid #000000; font-size: 200%; text-align: center; padding: 5% 0 0 0; width: 100%; }
section ul { display: inline-block; margin: 0 auto; text-align: left; }
section ul li { font-size: 125%; }

#start { text-align: center; }
#start p { font-size: 140%; line-height: 150%; }

#angebote { text-align: center; }
#angebote h2, #angebote h3 { font-size: 180%; margin: 0; padding: 0; }
#angebote h3 { font-size: 150%; }

#kontakt { text-align: center; }
#kontakt ul { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#kontakt ul li { font-size: 120%; padding: 1% 0; text-align: center; width: 100%; word-wrap: break-word; }
#kontakt a { color: #000000; text-decoration: none; }
#kontakt a:hover { color: #585858; }

#impressum { text-align: center; }
#impressum p { font-size: 140%; line-height: 150%; }

.clear { clear: both;  }

/* media queries */
@media (min-width: 960px) {
  #container { width: 960px; }
}
@media (min-width: 480px) and (max-width: 960px) {
  #container { width: 90%; }
  #logo { width: 75%; }
} 
@media (max-width: 480px) {
  #container { width: 95%; }
  #logo { width: 90%; }
}