/* CONTAINER
-------------------------------------------------------------------------------------------------- */

body {
	background: #f3f3f3;
}

/* für zentrierte Bereiche */
#top .container,
#stage .container,
#page {
	width: 980px;
	margin: 0 auto;
}

#page {
	clear: left;
	position: relative;
	padding: 0;
}

/* für Inhalte (navigation, content, features) */
#main {
	width: 100%;
	margin-bottom: 24px;
	float: left;
	background: #fff;
	border: 1px solid #eee;
	border-top-width: 0;
}



/* KOPFBEREICH (Hauptnavigation + Suche)
-------------------------------------------------------------------------------------------------- */

#top {
	float: left;
	width: 100%;
	padding: 0.5em 0 0.5em;
	border-bottom: 1px solid #666;
	background: url(../img/top-bg.png) repeat-x left bottom;
}

/* Hauptnavigation */

#hauptnavigation {
	position: relative;
	width: 100%;
	margin-left: 6px;
}

#hauptnavigation ul {
	margin-left: 0;
}

#hauptnavigation,
#hauptnavigation ul li {
	float: left;
	background: none;
}

#hauptnavigation ul li a,
#hauptnavigation ul li span.a {
	display: block;
	color: #fff;
	line-height: 1;
	border: 2px solid transparent;
	margin-right: 36px;
	padding: 3px 12px;
	background: none;

}

#hauptnavigation ul li.active-path span.a,
#hauptnavigation ul li.active-path a {
	color: #333;
	background: url(../img/hauptnav-a-bg.png) no-repeat left top;
	border-color: #eee;
}

#hauptnavigation ul li a:hover,
#hauptnavigation ul li a:focus {
	border-color: #ccc;
}

#hauptnavigation form {
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

#hauptnavigation form label {
	display: none;
}

#hauptnavigation form div.row {
	margin: 0;
	margin-left: 1em;
	padding: 0;
	float: left;
	width: auto;
}

#hauptnavigation form div.row div.field {
	margin-left: 0;
}

#hauptnavigation form input.text {
	width: 150px;
}

#hauptnavigation form input.button {
	padding: 1px 2px;
	background-color: #828282;
	background-image: none;
	color: white;
	border-color: #555555;
}


/* STAGE  (Logo, image-bild, Sysnav)
-------------------------------------------------------------------------------------------------- */

#stage {
	clear: left;
	height: 220px;
	background: url(../img/stage-bg.png) repeat-x left bottom;
	border-bottom: 6px solid #fff;
}

#stage .container {
	position: relative;
	height: 220px;
	background: url(../img/stage-glow-bg.png) no-repeat center bottom;
}

#logo {
	float: left;
	margin-top: 57px;
	margin-left: 20px;
	width: 171px;
}

#logo a {
	border-bottom-width: 0;
}

.powered-by span {
	float: left;
	margin-top: 5px;
	font-size: 0.857em;
}

.powered-by img {
	float: right;
}

#stage img.stage-image {
	border: 6px solid #fff;
	position: absolute;
	top: 24px;
	left: 240px;
	z-index: 100;
}

#stage .feature {
	position: absolute;
	width: 980px;
	top: 0;
	left: 0;
	height: 260px;
}

#stage .feature img, #stage .feature object {
	position: absolute;
	top: 24px;
	left: 240px;
	z-index: 10;
}

#stage .feature object {
	background: none;
}

#stage .feature img {
	border: 6px solid #fff;
	background: #fff;
}

#stage .feature .text {
	position: absolute;
	right: 20px;
	top: 34px;
	height: 200px;
	width: 220px;
}

/* Warenkorb */

#stage #warenkorb {
	position: absolute;
	top: 28px;
	left: 752px;
}

#stage #warenkorb img {
	position: relative;
	top: 3px;
	margin-right: 10px;
}

#stage #warenkorb a {
	font-size: 0.857em;
	color: #555;
	border-color: #ddd;
	position: relative;
}

#stage #warenkorb a:hover,
#stage #warenkorb a:focus {
	border-color: #555;
}


/* Sysnav */

#stage #sysnav {
	position: absolute;
	top: 57px;
	left: 734px;
	width: 196px;
	background: url(../img/sysnav-bg.png) no-repeat left top;
	border: 6px solid #fff;
	border-bottom-width: 0;
	font-size: 0.857em;
	padding: 3px 12px 12px 12px;
}

#stage #sysnav ul {
	list-style-type: none;
	margin-left: 0;
}

#stage #sysnav li {
	float: left;
	margin-right: 15px;
	background: none;
	padding: 0;
}

#stage #sysnav li.last-child {
	margin-right: 0;
}

#stage #sysnav li a,
#stage #sysnav li a:hover,
#stage #sysnav li a:focus {
	color: #555;
	border-width: 0;
	background: none;
	padding: 0;
}

#stage #sysnav li a:hover,
#stage #sysnav li a:focus {
	border-bottom: 1px solid #999;
}

#stage #sysnav span.a {
	font-weight: bold;
}

#stage .container #online-center-badge {
	position: absolute;
	top: 6.286em;
	left: 721px;
	width: 211px;
	border: 6px solid white;
	background: url(../img/online-center-bg.png) no-repeat right top;
	padding: 20px 10px 20px 26px;
}

#stage .container #online-center-badge p {
	margin-bottom: 0;
}

#stage .container #online-center-badge p a {
	display: block;
	background: url(../img/arrow-button-blue.png) no-repeat 170px 1em;
	border-bottom-width: 0;
	line-height: 1.2;
	color: #fff;
	font-size: 1.286em;
	width: 207px;
}

#stage .container #online-center-badge p a span {
	font-size: 1.333em;
	display: block;
	font-weight: bold;
	line-height: 1;
}



/* INHALTE (Navigation, Breadcrumbs, Content, Features)
-------------------------------------------------------------------------------------------------- */

/* Navigation
   - allgemeine Styles    */

#navigation {
	float: left;
	margin-left: 6px;
	width: 233px;
	line-height: 1.25;
}

#navigation ul {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 0;
}

#navigation a,
#navigation span.a {
	color: #333;
	border-bottom-width: 0;
	background: none;
}


/* Level 1 */

#navigation ul {
	font-size: 1.286em;
}

#navigation li {
	padding: 2px 0 2px 14px;
	background: url(../img/nav-li-bg.png) no-repeat left top;
	margin-bottom: 3px;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eee;
}

#navigation li.active-path {
	padding-bottom: 0;
}

#navigation li a,
#navigation li span.a {
	display: block;
	width: 204px;
	background: url(../img/nav-a-bg.png) no-repeat right 0.15em;
}

#navigation li a:hover,
#navigation li a:focus {
	background: url(../img/nav-a-hover-bg.png) no-repeat right 0.15em;
}

#navigation li.active-path a,
#navigation li.active-path span.a {
	padding-bottom: 3px;
	background-image: url(../img/nav-a-active-bg.png);
}


/* Level 2 */

#navigation ul ul {
	font-size: 0.778em;
	background: #fefac9;
	border-top: 2px solid #fff;
	margin-left: -14px;
	padding: 4px 0;
}

#navigation ul ul li,
#navigation ul ul li.active-path {
	padding: 3px 20px 3px 14px;
	background: none;
	margin: 0;
	border-width: 0;
}

#navigation ul ul li a,
#navigation ul ul li a:hover,
#navigation ul ul li a:focus {
	background: none;
	width: auto;
}

#navigation ul ul li.active-path a,
#navigation ul ul li.active-path span.a {
	font-weight: bold;
	background: none;
	padding-bottom: 0;
}

#navigation ul ul li.active-path a {
	color: #555;
}

#navigation ul ul li.active-path span.a {
	color: #0099fe;
}

#navigation ul li.active-path ul li a,
#navigation ul li.active-path ul li span.a {
	display: inline;
	background: none;
}


/* Level 3 */

#navigation ul ul ul {
	font-size: 0.857em;
	border-width: 0;
	padding: 3px 0;
	margin: 0;
}

#navigation ul ul ul li {
	padding: 2px 0 2px 10px;
}

#navigation ul ul ul li.active-path {
	background: url(../img/nav-li-level-3-active-bg.png) no-repeat 2px 0.5em;
}

#navigation ul ul li.active-path ul li a {
	font-weight: normal;
	color: #333;
}


/* Breadcrumbs */

ol#breadcrumbs {
	float: left;
	clear: left;
	width: 100%;
	list-style-type: none;
	margin: 0 0 1.5em 0;
	font-size: 0.714em;
}

ol#breadcrumbs li {
	float: left;
	margin-right: 4px;
	padding-left: 6px;
	background: url(../img/breadcrumbs-li-bg.png) no-repeat left 0.5em;
}

ol#breadcrumbs li.first {
	padding-left: 0;
	background: none;
}

ol#breadcrumbs li a {
	color: #555;
	border-color: #999;
}

ol#breadcrumbs li a:hover,
ol#breadcrumbs li a:focus {
	color: #333;
	border-color: #555;
}

ol#breadcrumbs li span.a {
	font-weight: bold;
}


/* Content */

#content {
	width: 460px;
	float: left;
	padding: 20px 20px 36px 20px;
}

#main.no-features #content {
	width: 700px;
}

#main.no-navigation #content {
	margin-left: 240px;
}


/* Unterdokumente */

ul.documents-list {
	float: left;
	margin: 0 0 1.5em 0;
	padding: 0;
	width: 100%;
	border-top: 3px solid #ccebff;
}

ul.documents-list li {
	background-image: none;
	float: left;
	width: 100%;
	padding: 0;
	padding-bottom: 5px;
	border-bottom: 3px solid #ccebff;
}

ul.documents-list li h2 {
	margin: 0.25em 0 0.5em 0;
	padding: 0 10px;
}

ul.documents-list li p {
	margin-bottom: 0.8em;
	font-size: 0.857em;
	padding: 0 10px;
}

ul.documents-list li img {
	float: left;
	margin: 0 20px 20px 0;
}

ul.documents-list li.clickable h2 a {
	border-width: 0;
}

ul.documents-list li.clickable {
	cursor: pointer;
}

ul.documents-list li.clickable:hover {
	background-color: #e5f5ff;
}


/* Weitere Dokumente */

.further-contents h2 {
	clear: left;
	width: 100%;
	margin: 0 0 0.5em;
	color: #333;
	font-size: 1em;
}

.further-contents ul {
	margin-left: 0;
}

.further-contents ul li {
	font-size: 0.857em;
	background-image: url(../../common/img/internal-deeplink-a-bg.png);
	background-position: left 0.5em;
}

div.clearing {
	width: 100%;
	clear: both;
}

/* Pagination */

ol.pager {
	list-style-type: none;
	margin: 0;
	clear: left;
	font-size: 0.857em;
}

ol.pager li {
	float: left;
	margin-right: 10px;
}

ol.pager li a {
	display: block;
	float: left;
	border: 1px solid #B2E0FF;
	padding: 1px 5px;
	text-align: center;
}

ol.pager li a:hover,
ol.pager li a:focus {
	border-color: #0099fe;
}

ol.pager li span.a {
	font-size: 1.167em;
	display: block;
	float: left;
	padding: 0 5px;
	font-weight: bold;
	text-align: center;
}