﻿@media screen {

	/* force vertical scrollbar */
	body {
		overflow-y: scroll;
		background: #ececec url('../images/apps/tmpl/bg.jpg') fixed;
}

	/* Layout Module Configuration & fallback for unsupported media queries */
	.ym-wrapper {
		min-width: 480px;
		max-width: 940px; 
		margin: 0 auto;
	}

	/* Basic Element Styling */
	header {
		background: #444;
		color: #ccc;
		padding: 1.5em;
	}

	header h1 {
		background: transparent;
		color: #fff;
	}

	nav {
		background: #222222;
	}
	
	/* Header und dessen Inhalte________________ */
	#top-balken-wrap {
		position: fixed;
		top: 0;
		height: 96px;
		width: 100% !important;
		min-width: 480px;
		max-width: 1200px;
		z-index: 1000;
	}
	#top-balken {
		width: 100%;
		height: 96px;
		margin: 0 auto;
		position: relative;
		background: white;
		border-bottom: 4px solid #DA0000;
	}
	#top-schatten {
		height: 8px;
		width: 100%;
		background: url('../images/apps/tmpl/verlauf.png') repeat-x left top;
		margin: 0 auto;
		display: none;
	}

/* Logo */
#top-balken h1 {
	margin: auto 50px auto 30px;
	padding: 0;
	max-width: 158px;
	overflow:hidden;
	display:table;
	font-size: 100%;
	line-height: 94px;
	border-collapse: collapse;
	float: left;
}

#top-balken h1 img {
	vertical-align: middle;
}

#top-balken h1 span.sl_header_logo {
	display: block;
	height: 96px;
	max-width: 158px;
	background: url('../images/logo.png') no-repeat left 50%;
	text-indent: -100000px;
	
}

.sl_logout {
	display: block; 
	max-height: 1.5em;
	min-width: 14em;
	position: absolute;
	top: 20px;
	right: 20px;
	color: #999;
}

.sl_logout a {
	color: #666;
}

.sl_logout a:hover, .sl_logout a:active {
	text-decoration: underline;
	color: #333;
}
	
#sl_lg_per {
	width: 40em;
	text-align: right;
	display: block;
	max-height: 1.5em;
	overflow: hidden;
	float:left;
}

/* Hauptnavigation */
#top-balken ul {
	margin: auto;
	padding: 0;
	list-style: none;
	position: relative;
	top: 41px;
}
#top-balken ul li {
	margin: 0 10px 0 0;
	padding: 0 10px 0 0;
	float: right;
	border-right: 1px solid #ccc;
}
#top-balken ul li:last-child {
	border-right: none;
}

#top-balken ul li a {
	width: 19px;
	height: 17px;
	text-indent: -10000px;
	display: block;
}

#top-balken li#navi-home a {background-image: url('../images/apps/tmpl/navi-home.png');  }
#top-balken li#navi-nachrichten a {background-image: url('../images/apps/tmpl/navi-nachrichten.png'); 
text-indent: 0;
}
#top-balken li#navi-cart a {background-image: url('../images/apps/tmpl/navi-cart.png'); 
text-indent: 0;
}
#top-balken li#navi-einstellungen a {background-image: url('../images/apps/tmpl/navi-einstellungen.png');
}
#top-balken li#navi-help a {background-image: url('../images/apps/tmpl/navi-help.png');
}

#top-balken ul li a:hover, #top-balken ul li a.hover, #top-balken ul li a:active, #top-balken ul li a.current {
	background-position: 0 17px;
}

#counter {
	position: relative;
	text-indent: 0;
	top: -1.2em;
	left: .75em;
	color: white;
	font-size: 10px;
	line-height: 15px;
	font-weight: bold;
	text-shadow: 1px 1px 1px #333;
	background: #DA0000;
	padding: 0 4px;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}

	
	/* Ende Header ________________________________ */
	footer {
		margin: 1.5em 0 0 0;
		background: #eee;
		color: #444;
		padding: 1.5em;
	}

	footer p {
		margin: 0;
	}

	/* Column-Set Configuration: 1-3 (sidebar right) */
	.ym-column {
		display:block;
		overflow:hidden;
		padding-right: 340px;
		width:auto;
	}

	.ym-col1 { /* content */
		float:left;
		width: 100%;
	}

	.ym-col3 { /* sidebar */
		position:relative;
		float:left;
		width: 340px;
		margin-left:0;
		margin-right:-340px;
	}

	.ym-col1 .ym-cbox { padding: 0 0.75em 0 1.5em; }
	.ym-col3 .ym-cbox { padding: 0 20px 0 12px; }

	.ym-g30 { width:30%; }
	.ym-gbox { padding: 0 0.75em;}
	.ym-gbox-full { padding: 0;}
	.ym-gbox-left {padding: 0 0.75em 0 0;}
	.ym-gbox-right {padding: 0 0 0 0.75em;}
	

	/* skip links styling */
	.ym-skiplinks a.ym-skip:focus,
	.ym-skiplinks a.ym-skip:active {
		color:#fff;
		background:#333;
		border-bottom:1px #000 solid;
		padding:10px 0;
		text-align: center;
		text-decoration:none;
	}

}

@media screen and ( max-width: 940px ) {

	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
	.linearize-level-1,
	.linearize-level-1 > [class*="ym-g"],
	.linearize-level-1 > [class*="ym-col"] {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}

	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
	.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
		overflow: hidden; /* optional for containing floats */
		padding: 0;
		margin: 0;
	}

	nav .ym-hlist ul {
		padding-right: 10px;
	}

	.ym-searchform {
		display:block;
		float: none;
		width: auto;
		padding-right: 10px;
		text-align: right;
	}

	.ym-searchform input[type="search"] {
		width: 14%;
	}
	
	#sl_lg_per {
		width: 28em;
	}
	
}
@media screen and ( max-width: 640px) {
	
	#sl_lg_per {
		width: 10.33em;
	}
	
	.infoblock.infoblock-lieferant .spalte2 {
		width: 100% !important; 
	}
	
	p.lieferant-intro, .tabs {
		margin-left: 10px !important;
	}
}

@media screen and ( max-width: 490px) {

	.ym-wbox {
		padding: 0;
	}

	header {
		padding: 0.75em 10px;
	}

	header h1 {
		font-size: 1.5em;
		line-height: 1em;
		margin: 0;
	}

	footer,
	#main,
	.ym-searchform,
	nav .ym-hlist ul {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
	.linearize-level-2,
	.linearize-level-2 > [class*="ym-g"],
	.linearize-level-2 > [class*="ym-col"] {
		display: block;
		float: none;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}

	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
	.linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
		overflow: hidden; /* optional for containing floats */
		padding: 0;
		margin: 0;
	}

	.ym-searchform,
	nav .ym-hlist ul,
	nav .ym-hlist li {
		display:block;
		float: none;
		width: auto;
		text-align: left;
	}

	.ym-searchform input[type="search"] {
		width: 75%;
	}
}


