@charset "utf-8";

/****************************/
/* BODY & SEITE (zentriert) */
/****************************/

/* Geisterbalken fr Firefox erzwingen */
html {
	min-height: 100.05%;
}

body { 
	margin: 0px; padding: 0px;
	font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:16px;
	text-align: center;  /*IE*/
	color: #171717;	background: url(../pic/back.gif) repeat-x #C31A20;
}

#seite {
	width: 800px; padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	text-align: left; min-height: 500px;
	border-left: 5px solid #C31A20; border-right: 5px solid #C31A20;
	background:url(../pic/back_colleft.jpg) repeat-y #FFFFFF;
}


/*******************/
/* Allgemeines*     /
/*******************/

h1 {
	margin: 0px 0px 12px 0px; padding: 0px;
	font-size: 14px; line-height: 16px; color:#4A626C;
	clear:both;
}

h2, h2.lead, p.lead {
	margin-top:15px; margin-bottom: 8px; padding: 0px;
	font-size: 12px; line-height: 16px; 
	clear: left; color:#4A626C;
}
	/* Lead */
	h2.lead, p.lead {
		margin-top: 0px;
		color: #4A626C; font-weight: bold;
	}
	.loopContainer h2, dl h2 {
		margin: 0px; clear: none;
		font-size: 12px;
	}

	h2 a:link, h2 a:visited {
		text-decoration: none;
		color: #4A626C;
	}

	h2 a:hover, h2 a:active {
		text-decoration: underline;
	}


h3 {
	margin: 0px 0px 8px 0px; padding: 0px;
	font-size: 11px; line-height: 14px;
	clear: left;
	color: #425861;
}
	h3.datum {
		margin: 0px 0px 8px 0px; padding: 0px;
		color:#4A626C;
	}

h5 {
	font-size: 13px;
}

	h5 a:link, h5 a:visited {
		text-decoration: none;
		color: #191818;
	}

	h5 a:hover, h5 a:active {
		text-decoration: underline;
		color: #000000;
	}

/*dl {
	width: 100%; clear:both;
}
dt {
	width:75px; float: left;
	margin: 0px 0px 15px 0px;
	clear: left;
}

dd {
	width: 289px; float: left;
	margin: 0px 0px 0px 0px; padding: 0px;

}*/

dl {
	width: 100%;
	margin-bottom: 20px;
}

	dt {
		margin: 0px 0px 3px 0px;
		clear: left;
		font-size: 12px; font-weight: bold;
	}
	
	dt a:link, dt a:visited {
		text-decoration: none;
		color:#324249;
	}

	dd {
		width: 294px;
		margin: 0px 0px 20px 0px;
		float:left;
	}

	dt .picPreview {
		margin: 3px 10px 20px 0px;
		float: left;
	}
	dd.noPic {
		width: 100%; 
	}



p {
	margin: 0px 0px 8px 0px; padding: 0px;
	/*text-align: left;*/
	/* clear:left; verträgt sich nicht mit Kontaktformular */
	text-align: justify;
}
	p.abstand {
		font-size: 1px; line-height: 3px;
		clear: left;
	}
	.loopContainer p, dd p {
		margin-bottom: 3px;
		font-size: 11px; line-height: 14px;
		text-align: left;
	}
	#colRight p {
		margin: 0px 8px 10px 10px;
		font-size: 11px; line-height: 14px; color:#585555;
	}
	#colDynPage p {
		/*text-align: left;*/
		/* clear:left; verträgt sich nicht mit Kontaktformular */
	}
	.picDetailContainerP, #colRight .picDetailContainerP  {
		margin:0px 0px 10px 0px; padding:0px 4px;
		font-size: 10px; line-height: 12px;
		font-weight: normal;
	}	

/* "normale" Links */
a:link {
	color: #171717;
}
a:visited  {
	color: #171717;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}

	a:link.nounderline, a:link.visited.nounderline {
		text-decoration: none;	
	}
	a:hover.nounderline, a:active.nounderline {
		text-decoration: underline;	
	}

	.mehr a:link, .mehr a:visited,
	.zurueck a:link, .zurueck a:visited
	 {
		padding-left: 15px;
		text-decoration:underline;
		background-position: left; background-repeat:no-repeat;
		/* background-image:url(../pic/pfeil.gif);*/
	}

	.zurueck a:link, .zurueck a:visited {
		padding-left: 11px;
		background-image:url(../pic/zurueck_pfeil.gif); background-position: left; background-repeat:no-repeat;
	}

	.mehr a:hover, .mehr a:active,
	.zurueck a:hover, .zurueck a:active	{
		text-decoration: underline;
	}

a.pfeil, #colRight a.pfeil {
	font-size: 11px; font-weight: bold;	padding-left:15px;
	text-decoration:underline;
	background-image:url(../pic/mehr_pfeil.gif); background-position: left; background-repeat:no-repeat;
}

img {
	margin:0px; padding:0px; border:none;
}

img.icon {
	/* position: relative; top:5px; */
	vertical-align: middle;
	margin: 2px 0px 2px 0px; padding:0px 0px 0px 5px;
}

/* Listen */
ul {
	margin: 8px 0px 15px 8px;
	padding-left:0px;
	list-style: none;
	/* list-style: square outside; */
}
	ul li {
	margin: 0px 0px 2px 0px;
	padding-left: 15px;
	background-image: url(../pic/li-punkt.gif); background-repeat:no-repeat; background-position: 0px 5px; 

}


ol {
	margin: 8px 0px 15px 0px;
	padding-left:30px;
}
	ol li {

	}

	ol li a:link, ol li a:visited {
	}

	ol li a:hover {
	}

sub, sup {
	line-height: 3px;
	margin-right: 5px;
	font-size:11px;
}

/* Clear */
.clr {
	clear: both; line-height:1px;
}
.clrLeft {
	clear: left;
}
.clrRight {
	clear: right;
}

strong {
	color:#4A626C;
}

.grauFett, .textHi, .textError {
	font-weight: bold;
	color: #171717;
} 

#metaNavigation {
	margin-left: -10000px;
	position: absolute;
}

/*******************************************/
/* Kopfbereich mit Sprachauswahl und Image */
/*******************************************/
#kopf {	
	width: 800px; height: 155px;
	margin: 0px; padding: 0px;
	float: left;
	background: url(../pic/back_kopf.gif) right no-repeat;
 }

	#kopfLogo {
		width:200px; height:155px; margin:0px 0px 0px 0px;
		float:left;
	}

	#topNavigation {
		width:185px; height:100px; float:left;
		margin:20px 0px 0px 0px; padding: 35px 0px 0px 0px;
		background: url(../pic/back_topnavigation.jpg) no-repeat;
	}

		#topNavigation img {
			width:185px; margin:0px 0px 10px 0px; padding:0px;
			border:none;
		}

	#kopfImage {
		width: 300px; height:90px; 
		margin: 0px; padding: 40px 50px 25px 50px;
		float:left; 
		position: relative; /*damit darin kopfImage absolut positioniert werden kann*/
	}
		#slideshow {
			clear:both; position:relative;
			/*background: url(../pic/kopf_image/back_kopfimage.jpg)*/
		}
		#slideshow img {
			display:none; position:absolute;
		}
		#slideshow img.start {
			display:block;
		}

		#navMain, #navLeft, #navRight {
			float: left; display: block; white-space: nowrap; padding:0px; 
		}
		#navMain {
			position:absolute; top: 260px;  z-index:1;
			width: 786px; height: 25px;
			margin: 0px; padding: 15px 0px 0px 14px;
			background: #FFF; 
		}
	

	



/********************/
/* Linke Spalte     */
/********************/
#colLeft {
	width: 200px; margin: 0px; padding: 0px 17px 0px 0px; 
	clear:both; float:left; text-align: center;
	min-height:400px;
}

	#colLeftSuche {
		height:27px; padding:7px 10px 0px 15px; margin:0px 0px 18px 0px;
		background:url(../pic/back_transweiss.png) repeat-y;
	}

		#colLeftSuche #suchbegriff {
			width:94px; margin: 0px;
			float:left;
		}

		#colLeftSuche .button {
			float:right; margin:0px; padding:0px;
		}


	#navLeft {
		width: 200px; height: 186px;
		margin:0px; padding:3px 0px 0px 0px; 
		background:url(../pic/back_transweiss.png) repeat-y;
	}

	#sponsorenLeft, #sponsorenRight, #ulgRight {
		clear:both; width: 138px;
		margin:0px auto 0px auto;
	}
	
	#ulgRight {
		margin-top: 30px;
	}

		#sponsorenLeft img, #sponsorenRight img, #ulgRight img {
			clear:both; width: 138px; border:0px;
			margin:0px 0px 10px 0px; padding:0px;
		}

/********************/
/* Rechte Spalte     */
/********************/


#colRight {
	width: 200px; margin:5px 0px 0px 17px; padding:0px 0px 0px 0px;  
	float:left; text-align: center; 
}


	#navRight {
		width: 184px; height: 189px;
		border-right: 1px solid #4A4838;
		margin-top:5px; margin-bottom:35px; padding:0px; 
	}

	#colRight ul {
		padding-left:15px; margin-bottom:5px;
		text-align: left;
	}
	#colRight ul li {
		/* line-height: 20px; */
	}

	/* "normale" Links */
	#colRight ul a:link, #colRight ul a:visited  {
		color: #4772A5; text-decoration:none;
	}
	
	#colRight ul a:hover, #colRight ul a:active {
		color: #000000; text-decoration:underline;
	}


	#colRight .teaserEinzeilig, #colRight .teaserZweizeilig {
		margin: 0px 17px 10px 18px; width: 138px;
		text-align: center; line-height: 15px;
		border:1px solid #D7E0EC; background:url(../pic/back_teaser.gif) repeat-x; 
		font-weight: bold; font-size: 13px;
	}
		#colRight .teaserEinzeilig {
			height: 25px; padding-top: 13px;
		}
		#colRight .teaserZweizeilig {
			height: 34px; padding-top: 4px;
		}

		#colRight .teaserEinzeilig a:link, #colRight .teaserEinzeilig a:visited,
		#colRight .teaserZweizeilig a:link, #colRight .teaserZweizeilig a:visited  {
			color: #6E6E6E; text-decoration: none;
		}
		#colRight .teaserEinzeilig a:hover, #colRight .teaserEinzeilig a:active,
		#colRight .teaserZweizeilig a:hover, #colRight .teaserZweizeilig a:active {
			color: #000000; text-decoration: underline;
		}

#colDetailPage #colRight {
	background-image:none;
}

/*****************************************/
/* Inhalt normal: mit colRight           */
/*****************************************/

#colInhalt {
	width: 366px; margin: 0px; padding: 14px 0px 10px 0px;
	float: left;
}

#colInhaltRahmenUnten, #colInhaltRahmenOben {
	clear: both;
}

#sieSindHier {
	height:27px;
	margin: 0px 0px 0px 0px;
	padding: 15px 0px 0px 0px; 
	line-height:17px; font-size:11px;
	color: #000000;
}

	#sieSindHier a:link, #sieSindHier a:visited {
		color: #4A626C;
		text-decoration:none;
	}
	
	#sieSindHier a:hover, #sieSindHier a:active {
		color: #000000;
		text-decoration: underline;
	}
	
	
#fussZeile {
	width: 800px; height: 75px;
	font-size:10px;
}

	#quickNavigation {
		width: 200px; margin: 0px auto 0px auto;
		height: 20px; padding-top:12px;
		text-align:center;
	}

	#fussNavigation {
		clear:both;	float: left;
		width: 800px; height: 30px; padding-top: 14px;
		border-top: 1px solid #C31A20; text-align: center;
		background:url(../pic/back_fussnav.gif) center 10px no-repeat #FFF;
	}

	#fussZeile a:link,
	#fussZeile a:visited {
		padding:0px 5px 0px 5px;
		color: #324249; text-decoration: none; font-weight: bold;
	}

	#fussZeile a:hover,
	#fussZeile a:active {
		color: #000; text-decoration: none;		
	}

	#fussZeile a.first {
		background:none;
	}

#interactLink {
	clear: both;
	padding-top: 25px;
	font-size: 9px;
}
	#interactLink a:link, #interactLink a:visited {
		text-decoration: none;
		color:#880000;
	}
	#interactLink a:hover {
		text-decoration: underline;
	}
	
.mehr, .zurueck, .blaettern {
	margin: 0px 0px 5px 0px;
	font-size:11px;
}
	.mehr {
		margin-bottom: 16px;
		text-align: right; 
		display: block; /* wegen IE6*/
	}
	.zurueck {
		text-align: left;
		clear:left;
	}

	.blaettern {
		margin-top: 20px;
		clear: both; font-weight: bold;
		float: left;
	}

	/*'detailblaettern*/
	.blaettern .vorher {
		float:left;
		width:100px;
		text-align:left;
	}
	
	.blaettern .seiteninfo {
		float:left;
		width:166px;
		text-align:center;
	}
	
	.blaettern .nachher {
		float:right;
		width:100px;
		text-align:right;
	}

	.mehr img {

	}

.datum, .autor {
	margin: 0px; float: left; font-weight: bold;
	color: #4A626C;
}

.autor {
	float:none;
}

.loop {
	/* LoopStyle für eingebundene Loops: Abstand nach oben und unten */
	margin: 20px 0px 20px 0px;
	clear:left;
}

.loopOhneAbstand {
	/* LoopStyle für Loops am Seitenbeginn */
	clear:left;
}

/**********************************/
/* Inhalt inkl. colRight          */
/**********************************/
#colGanzeBreite, #colDynPage, #colDetailPage {
	float: left; width: 583px;
}

/* Pseudo colRight - auch picDetailContainer beachten */
#colDynPage #colInhalt {
	width: 366px; margin: 0px; padding-right: 202px;
}


/********************/
/* Table:           */
/********************/


/********************/
/* Bilder           */
/********************/

/* Positionierung ausserhalb colInhalt in Pseudo-ColRight oder colRight*/
.picDetailContainer {
	width: 185px;
	/* rechter Rand = Bildbreite + padding+rechterRand(colInhalt) als Minuswert*/
	/* linker Rand = rechterRand colInhalt, damit in IE und Firefox gleich*/
	margin: -4px -202px 5px 17px; padding: 0px;
	float: right; clear:right; display: inline;

	/* auch #colDynPage #colInhalt beachten */

}
#colRight .picDetailContainer {
	margin: 5px 15px 10px 0px;	/* Abstand oben wegen dynamischer Seiten */
}

/* Container für Bild im Textbaustein-Loop */
.picDetail {
	width:102px; padding: 2px;
	margin:0px 0px 15px 15px; border:1px solid #C11618;
	float: right;

}
	#colDynPage .picDetail, #colRight .picDetail, #colDetailPage picDetail {
	width:179px; margin: 0px; padding: 2px;
	}

.picPreview {
	width: 56px; padding:2px;
	margin: 2px 0px; border: 1px solid #C11618;
}

.picGalerie {

}

	.picGalerie .picPreview {
		margin: 0px 14px 14px 0px;
	}
	
	.picGalerie .last {
		margin-right: 0px;
	}

/********************/
/* Bilder allgmein  */
/********************/

img.picNull {
	margin:0px; padding:0px; border:none;
}
img.picTrans {
	margin: 0; border: none; background: #FFFFFF; 
	/* filter:Alpha (opacity=70); -moz-opacity:0.7; */
}
img#kopfImageX {
	margin:0px; padding:0px;
}

/******************************************************************/
/* Formularelemente, vgl. auch kontaktformular.css, warenkorb.css */
/******************************************************************/

form, select, input, textarea, submit {
	margin:0px; padding:0px; 
}
/* Schriftfamilie dezidiert angeben! v.a. wegen textarea!*/
/* Schriftgröße in em, damit abhängig von default-body-Größe*/
select, input, textarea, submit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

/*	#colInhalt form {

	}*/

	form input {
		height: 18px; padding: 0px 0px 0px 2px; line-height: 19px;
		border: 1px solid #58594F; background: #FAFAFA;
	}	

	form textarea {
		padding: 0px 0px 0px 2px; line-height: 19px;
		border: 1px solid #58594F; background: #FAFAFA;
	}	

	form select {
		height: 20px; padding: 0px 0px 0px 2px; line-height: 19px;
		border: 1px solid #58594F; background: #FAFAFA;
	}

/*	option {

	}	*/

	form submit {
		width: 150px; border: none;
		color: #fff;
	}

	label {
		line-height:19px; margin:0px; padding: 0px; display:block;
	}

.button {
	width: 68px; height: 20px; border: none;
	margin-left:0px; padding:0px; line-height: 18px;
	font-size: 11px; font-weight: bold; text-align:center;
	background: url(../pic/button.gif); cursor: pointer;
	color: #FFF; 
}

		a.button:link, a.button:visited  {
			color: #FFF; text-decoration: none;
		}
		a.button:hover, a.button:active {
			color: #C10D12; text-decoration: underline;
			background: url(../pic/button-hi.gif);
		}


/********************************************************************/
/* Style-Sheets für Produkte-Loop und Detailseite mit Bestellbutton */
/********************************************************************/

.ohneBottomAbstand {
	margin-bottom: 0px;
}

/* Loop */
dd .preis {
	float:left; margin-top:-15px;
}

dd .button {
	float:right; margin-top:-6px;
}

/* Detailseite */
#preisUndBestellen {
	padding: 10px 10px 0px 10px; margin: 20px 0px 18px 0px;
	clear:both;	background: #E2E2E2;

}

	.ohneProduktDetail {
		height:45px;
	}
	
	.mitProduktDetail {
		height:70px;
	}


	#preisUndBestellen #preis {
		float:left;
	}
	
	#preisUndBestellen #bestellen {
		padding:0px; text-align:right; margin-top:14px;
	}

	#preisUndBestellen form {
		float:right;
	}
	
	.buttonInaktiv {
		width:100px; padding-right:0px;
		background: none; text-align: right; border: none;
	}

	#produktDetail1 {
		width:130px; margin-bottom:5px;
	}
	
	#produktAnzahl {
		width:55px;
	}




/*****************/
/* PopupHinweise */
/*****************/
#popupHinweis {
 position: absolute; z-index:500; top: 290px; margin-left:60px;
 width: 250px; background: #ffffff; border: #757575 solid 1px;
 /*filter:progid:DXImageTransform.Microsoft.Shadow(Color=#BDBDBD, direction=135, strength=8);*/
}    

#popupHinweis .titel {
 height:23px; padding-left:5px;
 text-align:center; line-height:21px;
 font-size:12px; font-weight:bold;
 background: #757575; color:#FFFFFF;
}    

#popupHinweis .close a:link, #popupHinweis .close a:visited,
#popupHinweis .titel a:link, #popupHinweis .titel a:visited {
 font-size:11px;	color:#34547A
}

#popupHinweis .close a:hover, #popupHinweis .close  a:active,
#popupHinweis .titel a:hover, #popupHinweis .titel  a:active {
 color:#000000;
}

#popupHinweis .text {
 background: #FFFFFF;
 padding:5px;text-align:center;
 font-size:12px; color:#000000;
}    

#popupHinweis .close {
 padding:4px;
 font-size:11px; color:#000000;text-align:center;
 background: #C6C6C6;
} 

/*****************/
/* Indexfilter   */
/*****************/
#indexfilter {	/* Form */
	/* background:  #E0E0E0; */
	padding: 0px 0px 10px 10px; margin: 0px 0px 18px 0px;
	clear:both;
	background: url(../pic/grauestreifen.gif); border: none;

	border:1px solid #D2DAE2;
}
	
.indexfilter {	/* DIV */
	margin: 0px; padding-top:5px; height: 40px;
}

	#indexfilter label {
		font-weight:bold; color: #4A626C;
	}
	
	.formfeld {
		float:left;
	}
	
	form p {
		clear:both;
	}

	form .inputNormal {
		width:120px; margin-right: 10px;
	}
	form .inputSchmal {
		width:55px; margin-right: 10px;
	}

	form .selectNormal {
		width:124px; margin-right: 10px;
	}
	form .selectSchmal {
		width:57px; margin-right: 10px;
	}

	form .selectBreit {
		width:202px; margin-right: 10px;
	}

	form .selectDoppelt {
		width:258px; margin-right: 10px;
	}	
	
	form .checkbox {
		width: 21px; border: 0px none;
	}