@charset "utf-8";
/**
 **************************************************
 * Welle Master / welle.hdlab2.de
 * main.css
 *
 * @author: HDNET GmbH & Co. KG
 * @version: 2.3
 * @updated: 2009-02-01 (BN)
 **************************************************
**/



/**
 **************************************************
 * CSS RESET
 *
 * @description: general reset for all browsers
 **************************************************
**/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
}

table { 
	border-collapse:collapse; 
	border-spacing:0; 
}

h1,h2,h3,h4,h5,h6,strong,b,th,dt {
	font-size:100%;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left; 
}

img,abbr,acronym {
	border:0; 
}

em,i,dfn,cite,var,address {
	font-style:normal;
}

pre,code {
	font-family:'courier new',courier,mono;
	font-size:12px;
}

q:before,q:after {
	content:''; 
}

:focus {
	outline:0;
}



/**
 **************************************************
 HELPER CLASSES 
 *
 * @description: helper classes for common problems or quick fixes
 **************************************************
**/
.clearOnly {
	clear:both;
}

.clear {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
}

.left {
	float:left;
}

.right {
	float:right;
}

.noPadding {
	padding:0 !important;
}

.noMargin {
	margin:0 !important;
}

.none {
	display:none !important;
}

.hidden {
	visibility:hidden !important;
}

.error {
	color:red;
	font-weight:bold;
}

.sprite,
.sprite a {
	text-indent:-9999px;
	font-size:0;
	line-height:0;
}

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {
	display:inline-block;
}

/* Hide from IE Mac \*/.clearfix{ display:block; }/* End hide from IE Mac */




/**
 **************************************************
 GENERAL DEFINITIONS
 *
 * @description: define the basic appearance of the site
 **************************************************
**/
html {
	height:100%;
	/*Defaults to ~16px across browsers*/
	/*font-size:100.01%;*/
	/*Defaults to ~12px across browsers*/
	font-size:75.01%;
}

body {
	height:100%;
	font-family:tahoma,verdana,arial,sans-serif;
	font-size:11px;
	line-height:16px;
	color:#8b8b8b;
	/*color:#9b9b9b;*/
	background:#fff;
}

h1 {
	font-size:19px;
	line-height:24px;
	font-weight:bold;
	color:#6e6e6e;
	/*letter-spacing:-0.01em;*/
	margin-bottom:10px;
}

h2 {
	font-size:17px;
	line-height:22px;
	color:#707070;
	margin-bottom:4px;
}

h3 {
	color:#707070;	
	font-weight:bold;
}

h4,h5,h6 {
	font-size:11px;
	line-height:16px;
	font-weight:bold;
	margin-bottom:2px;
}

h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {
	display:none;
}

p,ol,ul,dl {
	margin-bottom:16px;
}

ul {
	padding-left:17px;
	list-style:disc outside;
}

ol {
	padding-left:26px;
	list-style:decimal-leading-zero outside; 
}

dt {
	font-weight:bold;
}

a {
	color:#9b9b9b;
	text-decoration:none;
}

a:hover {
	border-style:solid;
}

strong,b {
	font-weight:bold;
}

em,i {
	font-style:italic;
}

hr {
	clear:both;
	/*Only chance to get the standard visuals away*/
	border-width:0;
	border-bottom:1px dotted #c4c4c4;
}

table {
	border:0;
	margin-top:2px;
	margin-bottom:17px;
}

table caption {
	font-size:13px;
	font-weight:bold;
	padding:0 0 3px 3px;
}

table tr {

}

table th,
table td {
	padding:1px 4px 5px 4px;
	border:0;
	vertical-align:top;
}

table th {
	padding-left:0;
	font-weight:bold;
}

table p {
	margin-bottom:0;
}

form {
	
}

form legend {
	display:none;
}

form label {
	clear:left;
	float:left;
	width:135px;
}

form label em {
	font-style:normal;
	color:red;
}

form input.text,
form input.checkbox,
form input.radio,
form select,
form textarea {
	float:left;
	width:194px;
	height:16px;
	padding:2px 2px 1px 2px;
	border:1px solid #cacaca;
	margin:0 0 5px 0;
	font:inherit;
	color:#666;
}

form input.file {
	padding:2px 2px 1px 2px;
	margin:0 0 5px 0;
}


form textarea {
	height:64px;
}

form input.w1 {
	width:44px;
}

form input.w2 {
	width:94px;
}

form input.w3 {
	width:144px;
}

form input.checkbox,
form input.radio {
	width:auto;
	height:auto;
	border:0 none;
	margin:3px 0 5px 1px;
}

form select {
	/* Selects have wrong box model. Add all paddings/margins/borders from above */
	width:200px;
	height:21px;
	padding:0;
}

/* Selects with a defined size (listboxes) */
form select.listbox {
	height:auto;
}

form select option {

}

form input.submit,
form input.reset,
form input.button {
	float:left;
	padding:1px 2px 0 18px;
	border:1px solid #cacaca;
	border-right:1px solid #b3b3b3;
	border-bottom:1px solid #b3b3b3;
	margin:0 0 5px 0;
	font-weight:bold;
	color:#888;
	/*background:#f3f3f3 url(../img/ico-submit.png) 2px 2px no-repeat;*/
	background:#f3f3f3 url(../img/ico-tick.png) 2px 2px no-repeat;
}

form p {
	clear:left;
	margin-bottom:0;
}



/**
 **************************************************
 LAYOUT
 *
 * @description: building the design
 **************************************************
**/
#page {
	position:relative;
	width:970px;
	min-height:100%;
	margin:0 auto 0 auto;
	background-color:#fff;
}

#header {
	position:relative;
	width:970px;
	height:55px;
	/* BEN: For Suckerfish/IE6 */
	z-index:34;
	background:#fff url(../img/header-bg.png) repeat-x;
}

h1#logo {
	position:absolute;
	top:20px;
	left:15px;
}

ul#navMeta {
	position:absolute;
	top:19px;
	right:15px;
}

ul#navMain {
	/*display:none;*/
	position:absolute;
	/* Height of self */
	bottom:-70px;
}

#contentArea {
	position:relative;
	width:970px;
	min-height:570px;
	/* The space for ul#navMain should be 70px BUT as the big images have to lay UNDER #navMain this has to be realised through FCE-wrappers */
	/*padding-top:70px;*/
}

/* BEN: The corresponding DOM-element is generated via jquery and used in navMain() for example */
div.overlay {
	display:none;
	position:absolute;
	left:0;
	top:0;
	z-index:5;
	width:970px;
	height:570px;
	background:#000;
	/* Jquery does this */
	/*opacity:0.5;*/
}

/*#primaryContent {
	position:relative;
	padding:0 70px;
}*/

#footer {
	position:relative;
	width:970px;
	height:100px;
}

ul#navBreadcrumb {
	position:absolute;
	top:10px;
	left:15px;
}

ul#navMisc {
	position:absolute;
	top:10px;
	right:15px;
}



/**
 **************************************************
 LAYOUT SPECIFIC (LOGO,NAVIGATION,SEARCHBOX...)
 *
 * @description: detailed formatting of the basic elements
 **************************************************
**/
h1#logo a {
	border:0;
}

/* Meta navigation */
ul#navMeta {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
	font-size:10px;
}

ul#navMeta li {
	height:19px;
	float:left;
	padding-right:5px;
	margin-right:5px;
	background:transparent url(../img/ico-nav-divider.png) center right no-repeat;
}

ul#navMeta a {
	padding:0 1px;
	border-color:#9f9990;
}

ul#navMeta li.act a {
	color:#111;
}

ul#navMeta li.navLang {
	padding-right:5px;
	margin-right:1px;
	background:transparent url(../img/ico-nav-language-divider.png) center right no-repeat;
}

ul#navMeta li.navLang {
	padding-right:5px;
	margin-right:1px;
	background:transparent url(../img/ico-nav-language-divider.png) center right no-repeat;
}

ul#navMeta li.navLangAct a {
	color:#111;
	/*color:#fff;
	background-color:#9f9990;*/
}

ul#navMeta li.navLangLast {
	padding-right:5px;
	margin-right:5px;
	background:transparent url(../img/ico-nav-divider.png) center right no-repeat;
}

ul#navMeta li.last {
	padding-right:0;
	margin-right:0;
	background:none;
}

/* BEN: Right now this is also the last item but let's see */
ul#navMeta li.navHome {
	padding-top:1px;
}
 
/* BEN: navMain, heavily worked on with jquery */
ul#navMain {
	height:70px;
	padding:0;
	margin:0 0 0 10px;
	list-style:none;
}

ul#navMain li {
	position:relative;
	/* BEN: Same width for all */
	width:155px;
	height:70px;
	padding:0;
	margin:0;
	float:left;
	text-align:center;
}

ul#navMain a {
	position:absolute;
	/* BEN: IE7 needs these */
	top:0;
	left:0;
	display:block;
	width:155px;
	height:20px;
	padding:25px 10px;
	border-bottom:0;
	font-size:17px;
	font-weight:bold;
	font-style:normal;
	color:#fff;
}

ul#navMain li:hover a,
ul#navMain li.over a {
	color:#fff;
	background:transparent url(../img/nav-main-l2-bg.png) repeat-y;
}

ul#navMain li.act a .cufon {
	border-bottom:2px solid #fff;	
}

ul#navMain li ul.l2 {
	display:none;
	position:absolute;
	top:70px;
	left:0;
	width:145px;
	padding:0 15px;
	margin:0;
	z-index:33;
	list-style:none;
	background:transparent url(../img/nav-main-l2-bg.png) repeat-y;
}

ul#navMain li:hover ul.l2,
ul#navMain li.over ul.l2 {
	display:block;
}

ul#navMain ul.l2 li {
	float:none;
	width:145px;
	/* BEN:IE6 */
	height:auto;
	border-top:1px solid #9f9990;
	/* BEN: Better... */
	/*border-top:1px solid #111;*/
}

ul#navMain ul.l2 li.last {
	border-bottom:1px solid #9f9990;
	/* BEN: Better... */
	/*border-bottom:1px solid #111;*/
}

ul#navMain ul.l2 li a {
	position:relative;
	width:145px;
	height:15px;
	padding:2px 0 3px 0;
	font-size:11px;
	font-weight:normal;
	background:none;
}

ul#navMain ul.l2 li img {
	display:none;
	/*width:141px;
	height:83px;*/
	padding:0 2px 2px 2px;
}

ul#navMain ul.l2 li:hover,
ul#navMain ul.l2 li:hover a,
ul#navMain ul.l2 li.over,
ul#navMain ul.l2 li.over a,
ul#navMain ul.l2 li.act,
ul#navMain ul.l2 li.act a {
	font-weight:bold;
	color:#333;
	border-bottom:0;
	background:white;
}

ul#navMain ul.l3 {
	display:none;
	position:absolute;
	/*left:-9999px;*/
	top:0;
	left:145px;
	/* Approx */
	width:730px;
	/* BEN: One li is 106px * max four rows */
	height:424px;
	padding:0 0 0 1px;
	margin:0;
	z-index:33;
	list-style:none;
	/*opacity:0.8;*/
}

/* BEN: This should be included ONLY if JS is off */
/*ul#navMain ul.l2 li:hover ul.l3,
ul#navMain ul.l2 li.over ul.l3 {
	display:block;
}*/

ul#navMain ul.l3 li {
	float:left;
	margin:0 1px 1px 0;
	border-top:0;
	background:#fff;
	cursor:pointer;
}

/* BEN: Override for "Aktuelles" (#navMain>li.last). Here the third level has to be opened to the left! */
ul#navMain li.last ul.l3 {
	left:auto;
	right:145px;
	padding:0 1px 0 0;
}

ul#navMain li.last ul.l3 li {
	float:right;
	margin:0 0 1px 1px;
}
/* :NEB */

ul#navMain ul.l3 li.last {
	border-bottom:0;
}

ul#navMain ul.l2 li ul.l3 li,
ul#navMain ul.l2 li ul.l3 li a {
	font-weight:normal;
}

ul#navMain ul.l2 li ul.l3 li:hover,
ul#navMain ul.l2 li ul.l3 li:hover a,
ul#navMain ul.l2 li ul.l3 li.over,
ul#navMain ul.l2 li ul.l3 li.over a,
ul#navMain ul.l2 li ul.l3 li.act,
ul#navMain ul.l2 li ul.l3 li.act a {
	font-weight:bold;
	border-bottom:0;
}

ul#navMain ul.l3 li img {
	display:block;
}
/* :NEB navMain */

ul#navBreadcrumb,
ul#navMisc {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
	font-size:10px;
}

ul#navBreadcrumb li,
ul#navMisc li {
	float:left;
	padding-right:5px;
	margin-right:5px;
}

ul#navBreadcrumb li {
	height:17px;
	background:url(../img/nav-breadcrumb-item-bg.gif) center right no-repeat;
}

ul#navMisc li {
	height:17px;
	background:transparent url(../img/ico-nav-divider.png) center right no-repeat;
}

ul#navBreadcrumb li.last,
ul#navBreadcrumb li.first,
ul#navMisc li.last {
	padding-right:0;
	margin-right:0;
	background:none;
}

ul#navBreadcrumb li.first {
	margin-right:5px;
}

ul#navBreadcrumb li.last,
ul#navBreadcrumb li.last a {
	color:#4c433b;
	text-transform:uppercase;
}

ul#navBreadcrumb a,
ul#navMisc a {
	border-color:#9f9990;
}



/**
 **************************************************
 CSS STYLED CONTENT
 *
 * @description: just a copy from the extension output
 * @beware: margins to text that are set here have to be changed in TS constants too
 **************************************************
**/

/* BEN: As we use almost only own FCEs i added "bare" rendering to cssstyledcontent
 * which means we don't need the standard CSS for it...
 */

/* If more than 2 images in an image-ce are present there's the class "multiple"... */

div.item div.multiple img {
	position:relative;
	float:left;
	margin-right:10px;
}

/* This is exactly "div.ce.text.borderBottom" */
div.borderBottom {
	position:relative;
	padding-bottom:29px;
	border-bottom:1px solid #d4d4d4;
	margin-bottom:30px;
}

div.borderBottom p {
	/*width:66%;*/
	margin-bottom:0;
}



/**
 **************************************************
 CSS STYLED CONTENT SPECIALS
 *
 * @description: formatting of more specific csc-output
 **************************************************
**/
div.csc-header {
	clear:both;
} 
 
div.csc-textpic-image a {
	border:0;
}

p.csc-textpic-caption {
	font-size:10px;
	color:#666;
}

div.indent {
	margin-left:50px;
}

td.csc-uploads-icon {
	padding:4px;
}

td.csc-uploads-icon a {
	border:0 none;
}



/* Tables */
.contenttable {
	margin-bottom:12px;
}

.contenttable-2 th {
	background:#b50027;
	font-weight:bold;
	text-transform:uppercase;
}

.contenttable-2 td {
	background:#9abb87;
}

.contenttable-3 {
	width:100%;
	border-collapse:collapse;
	color:#fff;
}

.contenttable-3 caption {
	text-align:right;
	color:#222;
}

.contenttable-3 th,
.contenttable-3 td {
}

.contenttable-3 th {
	font-weight:bold;
	text-transform:uppercase;
	background:#333;
}

.contenttable-3 th.td-0,
.contenttable-3 td.td-0  {
	width:10%;
}

.contenttable-3 th.td-1,
.contenttable-3 td.td-1,
.contenttable-3 th.td-2,
.contenttable-3 td.td-2,
.contenttable-3 th.td-3,
.contenttable-3 td.td-3  {
	width:30%;
}

.contenttable-3 tr.tr-even {
	background:#444;
}

.contenttable-3 tr.tr-odd {
	background:#555;
}

/* CSC-Uploads */
table.csc-uploads {
	background:none;
	border:0 none;
}

table.csc-uploads th,
table.csc-uploads td {
	border:0 none;
}

table.csc-uploads td.csc-uploads-fileSize {
	padding-left:10px;
}

/* Standard frames */
div.csc-frame {
}

div.csc-frame-frame1 {
	padding:5px;
	border:10px solid #999;
	margin-bottom:17px;
}

div.csc-frame-frame2 {
	padding:5px;
	border:10px solid #B50027;
	margin-bottom:17px;
}

div.csc-frame-rulerBefore {
	border-top:1px solid #999;
}

div.csc-frame-rulerAfter {
	border-bottom:1px solid #999;
	margin-top:-17px;
	margin-bottom:17px;
}

div.csc-frame-indent {
	margin-left:50px;
}

div.csc-frame-indent3366 {
	margin-left:33%;
}

div.csc-frame-indent6633 {
	margin-left:66%;
}

/* Sitemap */
div.csc-sitemap {

}

div.csc-sitemap a:hover {
	text-decoration:underline;
}

div.csc-sitemap ul {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
}

div.csc-sitemap ul li {
	float:left;
	position:relative;
	width:150px;
	font-weight:bold;
}

div.csc-sitemap ul li ul {
	margin-bottom:15px;
}

div.csc-sitemap ul li ul li {
	float:none;
	padding-left:13px;
	font-weight:normal;
	background:transparent url(../img/sitemap-bullet.png) 0px 6px no-repeat;
}

div.csc-sitemap ul li ul li ul {
	margin-bottom:8px;
}

div.csc-sitemap ul li ul li ul li {
	font-size:10px;
	background:transparent url(../img/sitemap-bullet-small.png) 0px 7px no-repeat;
}



/**
 **************************************************
 LAYOUT SPECIFIC CHANGES OF BASE FORMATS
 *
 * @description: overwrite base formats depending on layout
 * @example: make text smaller in secondary content area
 **************************************************
**/



/**
 **************************************************
 NEWS
 *
 * @description: css definitons for EXT: tt_news
 * @beware: is dependent on the modified template
 **************************************************
**/
.news {

}

.news p.date,
.news p.timeData,
.news p.author,
.news p.imgCaption,
.news p.back {
	margin-bottom:0;
	font-size:10px;
}

.news span.more {
	white-space:nowrap;
}

.news p.back {
	clear:both;
	border-top:1px solid #c4c4c4;
	margin-top:20px;
}

.news .images {
	float:left;
	margin:3px 10px 1.5em 0;
}

.news .images a {
	border-bottom:0;
}

.news .addInfo dl {
	padding-top:5px;
	border-top:1px dotted #c4c4c4;
}



/**
 **************************************************
 INDEXED SEARCH
 *
 * @description: css definitons for EXT: indexed_search
 * @beware: is dependent on the modified template
 **************************************************
**/
.tx-indexedsearch {

}

.tx-indexedsearch label {
	float:none;
	display:block;
}

/*.tx-indexedsearch input#tx-indexedsearch-searchbox-sword {
	position:relative;
	float:left;
	display:inline;
}*/

.tx-indexedsearch div.btn {
	margin-top:0;
	margin-left:5px;
}

.tx-indexedsearch .tx-indexedsearch-whatis {
	display:none;
}

.tx-indexedsearch-browsebox {
	display:none;	
}

.tx-indexedsearch .tx-indexedsearch-res {
	margin-top:35px;
}

.tx-indexedsearch .result {
	padding-top:5px;
	border-top:1px dotted #4f4f4f;
}

.tx-indexedsearch h3 {
	position:relative;
}

.tx-indexedsearch h3 a {
	text-decoration:underline;
}

.tx-indexedsearch h3 span {
	display:inline;
	color:#9b9b9b;
}

.tx-indexedsearch h3 span.icon {
	/*vertical-align:text-bottom;*/
}

.tx-indexedsearch h3 span.percent {
	position:absolute;
	right:0;
}

.tx-indexedsearch p.descr {

}

.tx-indexedsearch dl.info {
	display:none;
}

.tx-indexedsearch dl.info dt {
	clear:left;
	float:left;
	width:65px;
}

.tx-indexedsearch dl.info dd {
	float:left;
}

.tx-indexedsearch .tx-indexedsearch-redMarkup {
	color:#c8000b;
	font-weight:normal;
}

.tx-indexedsearch .tx-indexedsearch-browsebox ul {
	padding-left:0;
	font-size:10px;
}

.tx-indexedsearch .tx-indexedsearch-browsebox li {
	margin-right:10px;
	display:inline;
}

.tx-indexedsearch .tx-indexedsearch-browsebox a {
	border-color:#b4b4b4;
	color:#b4b4b4;
}



/**
 **************************************************
 TMailform
 *
 * @description: css definitons for EXT: pil_mailform
 * @beware: is dependent on the modified template
 **************************************************
**/
.tx-pilmailform-pi1 {

}

.tx-pilmailform-pi1 fieldset {
	padding:5px 10px 10px 10px;
	border:1px solid #dadada;
	margin:0 0 25px 0;
}

.tx-pilmailform-pi1 legend {
	display:inline;
	font-weight:bold;
}

.tx-pilmailform-pi1 p.formNotice {
	font-size:10px;
}



/**
 **************************************************
 EXT: HOME
 *
 * @description: Everything needed to feel... at home
 * @note: Every template has also the class "fce" or "ext" depending on what it is
 **************************************************
**/
.home {
	position:relative;
	width:970px;
	height:570px;
	overflow:hidden;
}

.home ul {
	padding-left:0;
	list-style-type:none;
}

.home ul li {

}

.home a#prev,
.home a#next {
	display:block;
	position:absolute;
	top:240px;
	left:0;
	width:20px;
	height:40px;
	cursor:pointer;
	background:url(../img/ico-prev.png) top left no-repeat;
	z-index:20;
}

.home a#next {
	left:auto;
	right:0;
	background:url(../img/ico-next.png) top right no-repeat;
}

.home ul#imageArray {
	position:relative;
	/* BEN: Set by navHome() in 'userfunctions.js'*/
	/*width:970px;*/
}

.home ul#imageArray li {
	position:relative;
	float:left;
}

.home #navItems {
	position:absolute;
	right:15px;
	bottom:10px;
	width:585px;
	height:90px;
	/*background:red;*/
}

.home ul#navImageArray {
	float:left;
	position:relative;
	width:435px;
	height:90px;
}

.home ul#navImageArray li {
	float:left;
	position:relative;
	width:85px;
	height:90px;
	margin-right:2px;
	cursor:pointer;
}

.home ul#navImageArray li img {
	/*width:81px;
	height:48px;*/
	border:2px solid #fff;
	margin:19px 0;
}

.home ul#navImageArray li div {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:85px;
	height:90px;
}

.home ul#navImageArray li div h1,
.home #navItems #teaser h1 {
	height:15px;
	width:auto;
	padding:3px 2px 1px 4px;
	margin:0 15px 0 0;
	font-size:11px;
	line-height:13px;
	color:#fff;
	background-color:#afab9d;
}

.home ul#navImageArray li div.hover h1 {
	color:#736c5a;
	background-color:#fff;
}

.home ul#navImageArray li div img {
	margin:0;
}

.home ul#navImageArray li div a.more,
.home #navItems #teaser a.more {
	display:block;
	height:15px;
	width:35px;
	padding:3px 2px 1px 15px;
	font-size:11px;
	line-height:13px;
	color:#fff;
	background:#afab9d url(../img/ico-arrow-redongray.png) 0 2px no-repeat;
}

.home ul#navImageArray li div a.more:hover,
.home #navItems #teaser a.more:hover {
	background:#ee0000 url(../img/ico-arrow-whiteonred.png) 0 2px no-repeat;
}

.home #navItems #teaser {
	float:right;
	position:relative;
	width:150px;
	height:71px;
	overflow:hidden;
	/*background:yellow;*/
}

.home #navItems #teaser h1 {
	margin:0 35px 0 0;
	background-color:#736c5a;
}

.home #navItems #teaser img {
	border:2px solid #fff;
}

.home #navItems #teaser p {
	height:95px;
	padding:5px;
	margin:0;
	font-size:11px;
	line-height:14px;
	background-color:#fff;
}

.home #navItems #teaser a {
	
}



/**
 **************************************************
 EXT: PRODUKTÜBERSICHT
 *
 * @description: Everything needed for productOverview
 * @note: Every template has also the class "fce" or "ext" depending on what it is
 **************************************************
**/
.productOverview {
	position:relative;
	width:970px;
	height:570px;
	overflow:hidden;
}

.productOverview ul {
	padding-left:0;
	margin-bottom:0;
	list-style-type:none;
}

.productOverview ul li {
	width:970px;
	height:570px;
}

.productOverview a#prev,
.productOverview a#next {
	display:block;
	position:absolute;
	top:240px;
	left:0;
	width:20px;
	height:40px;
	cursor:pointer;
	background:url(../img/ico-prev.png) top left no-repeat;
	z-index:20;
}

.productOverview a#next {
	left:auto;
	right:0;
	background:url(../img/ico-next.png) top right no-repeat;
}

.productOverview ul#imageArray {
	position:relative;
	/* BEN: Set by navHome() in 'userfunctions.js'*/
	/*width:970px;*/
}

.productOverview ul#imageArray li {
	float:left;
	position:relative;
}

.productOverview ul#imageArray li a.hotspot {
	display:block;
	position:absolute;
	/* To be styled inline... */
	/*top:200px;
	left:300px;*/
	width:19px;
	height:19px;
	cursor:pointer;
	background:transparent url(../img/ico-hotspot.png) top left no-repeat;
}

.productOverview ul#imageArray li div.hsContent {
	display:none;
	position:absolute;
	top:70px;
	/* Center spot as default */
	left:485px;
	width:auto;
	height:auto;
	padding:10px;
	background:#fff;
}

.productOverview ul#imageArray li div.hsContent a.close {
	display:block;
	position:relative;
	width:100%;
	height:20px;
	cursor:pointer;
	background:#fff url(../img/ico-close.gif) top right no-repeat;
}

.productOverview ul#imageArray li div.hsContent div.media {
	/* BEN: Set by Smarty via inline-styles */
	/*width:315px;
	height:175px;*/
	float:none;
	background:#fff;
}

.productOverview ul#imageArray li div.hsContent p {
	margin-bottom:0;
}

.productOverview ul#imageArray li div.hsContent div.media,
.productOverview ul#imageArray li div.hsContent h2,
.productOverview ul#imageArray li div.hsContent p {
	position:relative;
}

.productOverview div.buttons {
	position:absolute;
	right:29px;
	bottom:115px;
	width:auto;
	height:20px;
}

.productOverview a.btn {
	float:right;
	position:relative;
	display:block;
	/* BEN: bg-image is 122x22 */
	height:15px;
	width:105px;
	padding:4px 2px 3px 15px;
	margin-left:5px;
	font-size:11px;
	line-height:13px;
	font-weight:bold;
	color:#fff;
	background:transparent url(../img/btn-overview-bg.png) no-repeat;
}

.productOverview a.btn:hover {
	background:transparent url(../img/btn-overview-bg-hover.png) no-repeat;
}

.productOverview #infobar {
	position:absolute;
	left:0;
	bottom:0;
	width:970px;
	height:105px;
	background:transparent url(../img/overview-navitems-bg.png) no-repeat;
}

.productOverview #infobar #infobox {
	float:left;
	position:relative;
	width:365px;
	height:85px;
	padding-right:10px;
	margin:10px 0 10px 15px;
	overflow:hidden;
}

.productOverview #infobar .item {
	width:365px;
	height:85px;
}

.productOverview #infobar #infobox h1 {
	margin-bottom:3px;
	font-size:11px;
	line-height:15px;
	font-weight:bold;
	color:#fff;
}

.productOverview #infobar #infobox h1 span {
	display:inline;
	padding-left:10px;
	border-left:1px solid #fff;
	margin-left:10px;
}

.productOverview #infobar #infobox p {
	margin-bottom:0;
	font-size:11px;
	line-height:13px;
	color:#fff;
}

/*
.productOverview #navItems #infobox a.more {
	
}
*/

.productOverview #navItems {
	float:right;
	position:relative;
	width:532px;
	height:76px;
	padding:0 24px 0 23px;
	border-left:1px solid #9f9990;
	margin:15px 0;
}

.productOverview #navItems a.prev,
.productOverview #navItems a.next {
	display:block;
	position:absolute;
	top:1px;
	left:7px;
	width:10px;
	height:76px;
	cursor:pointer;
	background:transparent url(../img/ico-overview-prev.png) no-repeat;
}

.productOverview #navItems a.prev:hover {
	background:transparent url(../img/ico-overview-prev-hover.png) no-repeat;
}

.productOverview #navItems a.next {
	left:auto;
	/* BEN: not 15px because the last li-item of ul#navImageArray has a margin-right of 5px */
	right:13px;
	background:transparent url(../img/ico-overview-next.png) no-repeat;
}

.productOverview #navItems a.next:hover {
	background:transparent url(../img/ico-overview-next-hover.png) no-repeat;
}

.productOverview #navItems a.disabled {
	display:none;
}

.productOverview .scrollable {
	position:relative;
	/* BEN: All li's have a margin-right:5px so i substract these here */
	/*width:532px*/
	width:527px;
	height:76px;
	overflow:hidden;
}

.productOverview ul#navImageArray {
	position:absolute;
	width:99999px;
}

.productOverview ul#navImageArray li {
	float:left;
	position:relative;
	width:128px;
	height:76px;
	margin-right:5px;
	cursor:pointer;
}

.productOverview ul#navImageArray li img {
	/*width:128px;
	height:76px;*/
}

.productOverview ul#navImageArray li div {
	display:none;
	position:absolute;
	top:0;
	left:0;
	/* BEN: We need an "inner" border */
	/*width:128px;
	height:76px;*/
	width:120px;
	height:68px;
	border:4px solid #fff;
}




/**
 **************************************************
 EXT: PRODUKTDETAILS
 *
 * @description: Everything needed for productDetails
 * @note: Every template has also the class "fce" or "ext" depending on what it is
 **************************************************
**/
.productDetails {
	position:relative;
	width:970px;
	/*height:570px;
	overflow:hidden;*/
}

.productDetails .headerImage {
	position:relative;
	width:970px;
	height:130px;
}

.productDetails .content {
	position:relative;
	width:908px;
	/*height:620px;*/
	padding:40px 30px 0 30px;
	border:1px solid #d4d4d4;
}

/* BEN: primaryContent & secondaryContent should be used sitewide */
.productDetails #primaryContent {
	position:relative;
	float:left;
	width:425px;
	margin-right:48px;
}

.productDetails #secondaryContent {
	position:relative;
	float:left;
	width:435px;
}
/* :NEB */

.productDetails .info {
	padding-right:70px;
	/* BEN: To make it obvious */
	/*height:195px;
	overflow-y:scroll;*/
}

.productDetails .info ul {
	list-style-type:disc;
	padding-left:17px;
}

.productDetails .info ul li {
	float:none;
}

/* BEN: For semantic reasons this is a h1 but a VERY small one... */
.productDetails h1 {
	font-size:10px;
	line-height:12px;
	font-weight:bold;
	margin-bottom:4px;
	color:#8b8b8b;
}

.productDetails h3 {
	margin-bottom:10px;
}

.productDetails ul {
	padding-left:0;
	margin-bottom:0;
	list-style-type:none;
}

.productDetails ul li {
	position:relative;
	float:left;
}

.productDetails div.finishes {
	position:absolute;
	bottom:0;
	/* Mainly to prevent an IE-Bug (z-index-bug). But looks okay for all browsers... */
	width:320px;
	margin-bottom:15px;
}

.productDetails div.finishes ul li {
	width:32px;
	height:16px;
	margin:0 8px 8px 0;
} 

.productDetails div.finishes ul li div.hover {
	display:none;
	position:absolute;
	top:-55px;
	left:36px;
	z-index:10;
	width:100px;
	height:auto;
	padding:14px;
	border:1px solid #d4d4d4;
	background:#fff;
}

.productDetails div.finishes ul li div.hover p {
	line-height:13px;
	margin:3px 0 0 0;
}

.productDetails div.tools,
.productDetails div.navItemsContainer {
	padding-top:9px;
	border-top:1px solid #d4d4d4;
	margin-bottom:15px;
}

.productDetails div.tools h3 {
	margin-bottom:25px;	
}

.productDetails div.tools ul {
	margin-bottom:15px;	
}

.productDetails div.tools ul.itemArray li {
	width:90px;
	margin-right:10px;
}

.productDetails div.tools ul.itemArray a {
	display:block;
	padding-left:10px;
	line-height:13px;
	color:#736c5a;
	background:transparent url(../img/ico-arrow-redonwhite-small.png) 0px 3px no-repeat;
}

/* BEN: For links around images */
.productDetails div.tools ul.itemArray a.clean {
	display:inline;
	padding:0;
	line-height:inherit;
	background:none;
}

.productDetails div.tools ul.miscItemArray li {
	width:105px;
	height:15px;
	padding-left:25px;
	margin:0 10px 7px 0;
}

.productDetails div.tools ul.miscItemArray li.merkzettel {
	background:transparent url(../img/ico-merkzettel.png) 0px 0px no-repeat;
}

.productDetails div.tools ul.miscItemArray li.prospekt {
	background:transparent url(../img/ico-prospekt.png) 0px 0px no-repeat;
}

.productDetails div.tools ul.miscItemArray li.tellAFriend {
	background:transparent url(../img/ico-tellafriend.png) 0px 0px no-repeat;
}

.productDetails div.tools ul.miscItemArray li.print {
	background:transparent url(../img/ico-print.png) 0px 0px no-repeat;
}

.productDetails div.tools ul.miscItemArray li.typenplan {
	background:transparent url(../img/ico-typenplan.png) 0px 0px no-repeat;
}

.productDetails div.tools ul.miscItemArray a {
	display:block;
	line-height:13px;
	color:#736c5a;
}

/* BEN: These two exist only to force the same height for the contents */
.productDetails div.infoContainer,
.productDetails div.typesContainer {
	position:relative;
	width:435px;
	height:300px;
}

.productDetails div.imageContainer {
	position:relative;
	width:435px;
	height:300px;
	overflow:hidden;
}

.productDetails ul#navTypes {
	position:absolute;
	bottom:70px;
	right:0;
	width:110px;
	margin-bottom:0;
	background:#fff;
}

.productDetails ul#navTypes li {
	float:none;
	width:110px;
}

.productDetails ul#navTypes a {
	display:block;
	padding-left:15px;
	border:1px solid #fff;
	margin-bottom:1px;
	line-height:15px;
	color:#736c5a;
}

.productDetails ul#navTypes li.act a,
.productDetails ul#navTypes a:hover {
	border:1px solid #d4d4d4;
	background:transparent url(../img/ico-arrow-redonwhite-small.png) 3px 4px no-repeat;
}

.productDetails p.imgCaption {
	height:55px;
	padding:15px 0 0 0;
	margin:0;
	/* Faded in via jQuery */
	display:none;
}

.productDetails #navItems {
	position:relative;
	width:360px;
	height:78px;
	padding:0 33px 0 42px;
}

.productDetails #navItems a.prev,
.productDetails #navItems a.next {
	display:block;
	position:absolute;
	top:20px;
	left:0;
	width:20px;
	height:40px;
	cursor:pointer;
	background:transparent url(../img/ico-prev.png) no-repeat;
}

.productDetails #navItems a.next {
	left:auto;
	/* BEN: not 15px because the last li-item of ul#navImageArray has a margin-right of 5px */
	right:0;
	background:transparent url(../img/ico-next.png) no-repeat;
}

.productDetails .scrollable {
	position:relative;
	width:360px;
	height:78px;
	overflow:hidden;
}

.productDetails ul#imageArray {

}

.productDetails ul#imageArray li {
	width:435px;
	height:300px;
}

/* BEN: TEMP: Force images to right size */
.productDetails ul#imageArray li img {
	/*width:315px;
	height:230px;*/
}

.productDetails ul#navImageArray {
	position:absolute;
	width:99999px;
}

.productDetails ul#navImageArray li {
	width:81px;
	height:58px;
	padding:10px 0;
	margin-right:9px;
	cursor:pointer;
}

/* BEN: TEMP: Force images to right size */
.productDetails ul#navImageArray li img {
	/*width:81px;
	height:58px;*/
}

.productDetails ul#navImageArray li div {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:81px;
	height:78px;
	background:transparent url(../img/productdetails-act-arrows.png) no-repeat;
}

/* BEN: Adding additional slider to scroll #navImageArray */
.productDetails .sliderContainer {
	position: relative;
	width:411px;
	height:24px;
	padding:0 12px;
	margin:25px 0 0 0;
	background:transparent url(../img/history-slider-bg.png) top left repeat-x;
}

.productDetails .sliderContainer div.cornerRight,
.productDetails .sliderContainer div.cornerLeft {
	position:absolute;
	top:0;
	/*z-index:5;*/
	width:12px;
	height:24px;
}

.productDetails .sliderContainer div.cornerRight {
	right:0;	
	background:transparent url(../img/history-slider-corner-right.png) top left no-repeat;
}

.productDetails .sliderContainer div.cornerLeft {
	left:0;	
	background:transparent url(../img/history-slider-corner-left.png) top left no-repeat;
}

.productDetails .slider {
	position:relative;
	left:40px;
	width:335px;
	height:24px;
}

.productDetails .slider a.ui-slider-handle {
	position:absolute;
	top:-0;
	z-index:3;
	width:80px;
	height:24px;
	margin-left:-40px;
	cursor:move;
	background:transparent url(../img/slider-handle.png) top left no-repeat;
}

.productDetails .slider span {
	position:absolute;
	top:3px;
	left:0;
	z-index:4;
	font-size:11px;
	color:#555;
	white-space:nowrap;
	cursor:pointer;
}
/* BEN: The slider goes out again... */
.productDetails .sliderContainer {
	display:none;	
}
/* :NEB */



/**
 **************************************************
 FCE - History
 *
 * @description: 
 * @example: 
 **************************************************
**/
div.history {
	position:relative;
	width:970px;
	/*height:570px;
	overflow:hidden;*/
}

div.history .headerImage {
	position:relative;
	width:970px;
	height:130px;
	overflow:hidden;
}

div.history .content {
	position:relative;
	width:912px;
	/*height:620px;*/
	padding:40px 28px 0 28px;
	border:1px solid #d4d4d4;
}

div.history #intro {
	position:absolute;
	z-index:22;
	width:912px;
	height:300px;
	padding-bottom:30px;
	border-bottom:1px solid #d4d4d4;
	background:#fff;
}

div.history ul {
	padding-left:0;
	margin-bottom:0;
	list-style-type:none;
}

div.history ul li {
	float:left;
	position:relative;
}

div.history p {
	font-size:11px;
	line-height:15px;
	/*color:#777;*/
}

div.history .items {
	position:relative;
	width:912px;
	height:300px;
	padding-bottom:30px;
	border-bottom:1px solid #d4d4d4;
	margin:0 0 30px 0;
	overflow:hidden;
}

div.history ul#itemArray {
	width:99999px;
}

div.history #intro ul li,
div.history ul#itemArray li {
	width:912px;
}

div.history #intro ul li .text,
div.history ul#itemArray li .text {
	position:relative;
	float:left;
	width:445px;
	height:300px;
	margin:0 32px 0 0;
}

div.history #intro ul li .scrollPane,
div.history ul#itemArray li .scrollPane {
	width:385px;
	height:300px;
	/* BEN: Must be set due to a bug in jquery.scrollpane */
	padding-right:60px;
	/*overflow:auto;*/
}

div.history .jScrollPaneContainer {
	background:url(../img/scroll-content-panel-bg.gif) 436px 0 repeat-y !important;
}

div.history .noTrack {
	background:none !important;
}

div.history #intro ul li .text h1,
div.history ul#itemArray li .text h1 {
	font-size:18px;
	font-weight:bold;
	/*color:#666;*/
}

div.history ul#itemArray li .text h3 {
	font-size:14px;
	/*color:#555;*/
}

div.history #intro ul li .image,
div.history ul#itemArray li .image {
	position:relative;
	float:left;
	width:435px;
	height:300px;
}

div.history #intro ul li .image p.caption,
div.history ul#itemArray li .image p.caption {
	margin-top:5px;
}

div.history .controls {
	margin-bottom:10px;
}

div.history .scrollable {
	position:relative;
	width:912px;
	height:75px;
	overflow:hidden;
}

div.history ul#navItemArray {
	position:absolute;
	width:99999px;
}

div.history ul#navItemArray li {
	float:left;
	position:relative;
	width:126px;
	height:75px;
	margin-right:5px;
	cursor:pointer;
}

div.history ul#navItemArray li.chapter {
	cursor:default;
}

div.history ul#navItemArray li div {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:120px;
	height:69px;
	border:3px solid #989285;
}

div.history .sliderContainer {
	position: relative;
	width:888px;
	height:24px;
	padding:0 12px;
	margin:20px 0 0 0;
	background:transparent url(../img/history-slider-bg.png) top left repeat-x;
}

div.history .sliderContainer div.cornerRight,
div.history .sliderContainer div.cornerLeft {
	position:absolute;
	top:0;
	z-index:5;
	width:12px;
	height:24px;
}

div.history .sliderContainer div.cornerRight {
	right:0;	
	background:transparent url(../img/history-slider-corner-right.png) top left no-repeat;
}

div.history .sliderContainer div.cornerLeft {
	left:0;	
	background:transparent url(../img/history-slider-corner-left.png) top left no-repeat;
}

div.history .slider {
	position:relative;
	left:40px;
	width:808px;
	height:24px;
}

div.history .slider a.ui-slider-handle {
	position:absolute;
	top:-0;
	z-index:3;
	width:80px;
	height:24px;
	margin-left:-40px;
	cursor:move;
	background:transparent url(../img/history-slider-handle.png) top left no-repeat;
}

div.history .slider span {
	position:absolute;
	top:3px;
	left:0;
	z-index:4;
	font-size:11px;
	color:#555;
	white-space:nowrap;
	cursor:pointer;
}



/**
 **************************************************
 EXT: FINISHES
 *
 * @description: Everything needed for div.ext.finishes
 * @note: Every template has also the class "fce" or "ext" depending on what it is
 **************************************************
**/
div#finishes {
	position:relative;
	width:908px;
}

div#finishes h1 {
	font-weight:bold;
}

div#finishes .scrollPane {
	/* 908 - jScrollbarMargin(20) */
	width:888px;
	height:450px;
	padding-right:20px;
}

div#finishes ul#itemArray {
	/* 908 -jScrollPaneTrack(8) - jScrollbarMargin(20) */
	width:880px;
	padding-left:0;
	margin-bottom:0;
	list-style-type:none;
}

div#finishes ul#itemArray li {
	float:left;
	position:relative;
	/* 220px * 4 items in a row = 880px */
	width:200px;
	height:280px;
	border-bottom:1px solid #d4d4d4;
	margin-right:20px;
	margin-bottom:25px;
}

div#finishes ul#itemArray h3 {
	margin-bottom:4px;
}

div#finishes ul#itemArray p {
	line-height:14px;
	margin-bottom:14px;
}

div#finishes ul#itemArray strong {
	line-height:19px;
}



/**
 **************************************************
 EXT: MERKZETTEL
 *
 * @description: Everything needed for div.merkzettel
 * @note: Every template has also the class "fce" or "ext" depending on what it is
 **************************************************
**/
div.merkzettel {
	visibility:hidden;
	position:absolute;
	left:0;
	top:0;
	width:970px;
	height:570px;
	z-index:36;
}

div.merkzettelOverlay {
	visibility:hidden;
	position:absolute;
	left:0;
	top:0;
	/*z-index:37 !important;*/
	width:970px;
	height:570px;
	background:#000;
	/* Jquery does this */
	/*opacity:0.6;*/
}

div.merkzettel .content {
	display:block;
	visibility:hidden;
	position:absolute;
	right:0;
	top:0;
	/*z-index:38;*/
	padding:0;
	width:420px;
	/*height:465px;*/
	background:#fff;
}

div.merkzettel .content.loading {
	background:#fff url(../img/ico-loading-30.gif) center center no-repeat;
}

div.merkzettel .head {
	position:relative;	
}

div.merkzettel .head a.close {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:10px;
	height:10px;
	cursor:pointer;
	background:#fff url(../img/ico-close.gif) top right no-repeat;
}

div.merkzettel a.btn {
	position:relative;
	display:block;
	/* BEN: bg-image is 144x22 */
	height:15px;
	width:127px;
	padding:4px 2px 3px 15px;
	margin-top:10px;
	font-size:11px;
	line-height:13px;
	font-weight:bold;
	color:#fff;
	background:transparent url(../img/btn-merkzettel-bg.png) no-repeat;
}

div.merkzettel a.btn:hover {
	background:transparent url(../img/btn-merkzettel-bg-hover.png) no-repeat;	
}

div.merkzettel .scrollPane {
	width:340px;
	height:328px;
	/* BEN: Must be set due to a bug in jquery.scrollpane */
	padding-right:60px;
	/*overflow:auto;*/
}

div.merkzettel .jScrollPaneContainer {
	background:url(../img/scroll-content-panel-bg.gif) 391px 0 repeat-y !important;
}

div.merkzettel .noTrack {
	background:none !important;
}

div.merkzettel ul.itemArray {
	padding-left:0;
	margin-bottom:0;
	list-style:none;
}

div.merkzettel ul.itemArray li {
	position:relative;
	width:370px;
	border-top:1px solid #d0d0d0;
	padding-top:4px;
}

div.merkzettel ul.itemArray li.last {
	border-bottom:1px solid #d0d0d0;
}

div.merkzettel ul.itemArray li .img {
	position:relative;
	float:left;
	width:124px;
	height:73px;
	padding-bottom:4px;
	margin:0 11px 0 0;
}

div.merkzettel ul.itemArray li .desc {
	position:relative;
	float:left;
	width:215px;
	height:73px;
	padding-bottom:4px;
	margin:0 20px 0 0;
}

div.merkzettel ul.itemArray li .desc p {
	margin-bottom:0;	
}

div.merkzettel ul.itemArray li .desc h4 {
	font-size:11px;
}

div.merkzettel ul.itemArray li .desc a {
	position:absolute;
	bottom:4px;
	left:0;
	display:block;
	padding-left:15px;
	margin-bottom:1px;
	color:#736C5A;
	line-height:15px;
	cursor:pointer;
}

div.merkzettel ul.itemArray li .desc a.go {
	background:transparent url(../img/ico-arrow-redonwhite-small.png) 3px 4px no-repeat;
}

div.merkzettel ul.itemArray li .desc a.del {
	left:100px;
	background:transparent url(../img/ico-delete.png) 0 1px no-repeat;
}

div.mzPage .content {
	position:static;
	visibility:visible;
}

div.mzPage .content>div {
	padding:0 !important;	
}

div.mzPage .head a.close {
	display:none;	
}