html, body { margin: 0; padding: 0; height:100%;  }

h1 { font-size: 24px; line-height: 1.25em; }
h2 { font-size: 22px; line-height: 1.25em; }
h3 { font-size: 20px; line-height: 1.25em; }
h4 { font-size: 18px; line-height: 1.25em; }
h5 { font-size: 16px; line-height: 1.25em; }
h6 { font-size: 14px; line-height: 1.25em; }

#wrap { position: relative; z-index: 50; min-height: 100%; height: auto; height: 100% !important;  }

	#navbar { position: absolute; top: 0; left: 0; width: 100%; background: #474747; color: #fff: }
		#navigation { margin: 0; padding: 7px 0; float: left; }
			#navigation li { float: left; }
			#navigation li > a { color: #fff; text-shadow: none; font-weight: bold; text-transform: uppercase; margin-left: 20px; }
		#meta { margin: 0; padding: 0; float: right; }
			#meta li { float: left; line-height: 34px; }
			#meta li > a { color: #fff; text-shadow: none; font-weight: bold; font-size: 11px; text-transform: uppercase; margin-right: 10px; }
			.special_facebook > a { margin-top: 9px; text-indent: -99999px; width: 14px; height: 14px; background: url(../img/fb.jpg) no-repeat; display: block; }
		#navigation a:hover, #meta a:hover { background: transparent; }
		#meta .special_facebook > a:hover { background: url(../img/fb.jpg) no-repeat; }
	#main { min-height: 100%;  }
	#main .container { padding-top: 65px;}
		.contact { float: right; margin-top: -31px; }
			.contact img { width: 225px; }
		.logo { display: block; width: 20%; margin: 0 auto; }
		.content-wrapper { background: #000; background: rgba(0, 0, 0, 0.75); color: #fff; width: 75%; padding: 45px; margin: 25px auto 295px auto;  overflow: hidden; }

	#colophon { position: relative; bottom: 0; left: 0; width: 100%; padding-bottom: 20px; background: transparent url(../img/wooden.jpg) repeat-x center bottom; height: 270px; margin-top: -270px; }
		.speisekarte-button { width: 80%; margin: 0 auto; }
			.speisekarte-button img { margin: 0 auto; }
			.speisekarte-button span { text-align: center; text-decoration: none; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px #000; letter-spacing: 1px; }
			.speisekarte-button:hover { text-decoration: none; }

@media only screen and (max-width : 720px) {
	.logo { width: 50%; }
	.content-wrapper { width: auto; }
	.speisekarte-button { width: 75%; }
	#navbar { position: static; }
	#colophon { height: 150px; margin-top: -150px; }
	.content-wrapper { margin: 0 0 175px 0; padding-top: 0; }
	#main .container { margin-top: 0; padding-top: 0; }
	.contact { margin-top: 0; }
}

@media screen and (orientation:landscape) and (max-width: 720) {
	#colophon { position: static; margin-top: 25px;  }
}