@charset "utf-8";
/*
 sl-wein.de structure
 @author Jan Syring-Lingenfelder
*/

body {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.clearfix { clear:both; }
.hidden { display: none; }

@media only screen and (min-height: 700px) and (min-width: 900px) {
	/* vertical center nur wenn der bildschirm groß genug ist */
	.wrapper {
		top: 50%;
		margin-top: -350px;
	}
}
/* desktop normal */
@media only screen and (min-width: 900px) {
	.wrapper { position: absolute; width: 900px; height: 700px; left: 50%; margin-left: -450px;	}
	.header {	width: 100%; height: 210px; }
	.logo { background:url(../img/nav/nav-bg.png); width: 190px; height: 210px; float: left; }
	.logo img { margin: 52px 10px; }
	.header nav { width: 710px;	padding-top: 175px;	float:left;	text-align: center;	}
	ul.level1 {	list-style-type: none;	padding: 0;	margin: 0; position: absolute; }

	ul.level1 > li { float: left; width: 142px; }

	ul.level1 > li > div { margin-top: 10px; height: 25px; background:url(../img/nav/nav-bg.png);	}

	ul.level1 > li:hover > ul.level2 { display:block;	}
	ul.level2 {	list-style-type: none; display:none; padding: 5px 0; text-align: left; z-index: 999; }

	ul.level2 > li { padding-left: 10px; }

	.content_wrapper { height: 490px; width: 100%; }
	.sidebar { height: 430px; width: 160px; float: left; padding: 30px 15px; }
	.content { box-sizing: border-box; width: 710px; height: 470px; float: left; overflow:auto; padding: 35px; }
	.footer { position: absolute; bottom: 0px; right: 0px; width: 710px; height: 20px; clear:both; }
	.wide { padding-left: 190px; }
	.rootline, .footer_menu { float: left; font-size: x-small; padding: 2px 5px; box-sizing: border-box; }
	.footer_menu { text-align: right; float: right !important; }
	#menuButton { display:none; }
}

/* tablet */
@media only screen and (min-width: 640px) and (max-width: 899px) {
	/* header kriegt 640*149 */
	.wrapper { position: absolute; width: 640px; left: 50%; margin-left: -320px;	}
	.header {	width: 100%; height: 149px; background-size: contain !important; }
	.logo { background:url(../img/nav/nav-bg.png); width: 190px; height: 149px; float: left; }
	.logo img { margin: 52px 10px; }
	.header nav { width: 640px;	float:left;	text-align: center;	}
	ul.level1 {	list-style-type: none;	padding: 0;	margin: 0; position: absolute; }

	ul.level1 > li { float: left; width: 128px; }

	ul.level1 > li > div { height: 25px; background-color:#500f0f;	}

	ul.level1 > li:hover > ul.level2 { display:block;	}
	ul.level2 {	list-style-type: none; display:none; padding: 5px 0; text-align: left; z-index: 999; }

	ul.level2 > li { padding-left: 10px; }

	.content_wrapper { height: 490px; width: 100%; }
	.sidebar { height: 430px; width: 160px; float: left; padding: 30px 15px; }
	.content { box-sizing: border-box; width: 450px; height: 470px; float: left; overflow:auto; padding: 35px; }
	.footer { position: absolute; bottom: 0px; right: 0px; width: 640px; height: 20px; clear:both; }
	.wide { padding-left: 190px; }
	.rootline, .footer_menu { float: left; font-size: x-small; padding: 2px 5px; box-sizing: border-box; }
	.footer_menu { text-align: right; float: right !important; }
	#menuButton { display:none;	}
}

/* smartphone */
@media only screen and (max-width: 639px) {
	.header {	padding-bottom: 5px; }
	#menuButton {
		background-image:url(../img/icons/icon-menu.svg); background-position:left center; background-repeat:no-repeat;
		text-indent: 30px; display: block; margin-left: 10px; cursor: pointer;
	}
	.header nav ul { list-style-type: none; }
	.content { padding: 10px; }
}