/**	  * Zeichenkodierung UTF-8
	  * Die Seite gliedert sich in folgende Sektionen:
	  *    - #titel
	  *    - #linkLeiste
	  *    - #inhalt (Haupttext)
	  *    - .kastenAussen/.kastenInnen (mehrere m?gliche K?sten an der rechten Seite)
	  *    - .fusszeile
	  *
	  *    - alles wird umschlossen vom #scrollbereich
	  *
	  * Zur Visualisierung der Ränder dieser Seitenbereiche den folgenden Kommentar entfernen:
	  *
	
	#titel 		{ border: 1px solid red; }
	#linkLeiste 	{ border: 1px solid green; }
	#inhalt 		{ border: 1px solid blue; }
	#fusszeile 	{ border: 1px solid black; }
	.kastenAussen	{ border: 1px solid orange; }
	.kastenInnen 	{ border: 1px solid cyan; }
	
*/
@charset "utf-8";
	 body {
		font: normal 100.01% Helvetica, Arial, sans-serif;
		color: black;
		background-color: white;
		margin: 0; 			/* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
		padding: 0;
		min-width: 30em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
	  }
	  
/** #scrollbereich.  Das alles umschlie?ende div; die ganze Seite. Hier befindet sich auch der obere Hintergrundverlauf der Seite.*/
	#scrollbereich {
		position:relative;
		clear: none;
    		width: 99%;
		/*background: #FFFFFF;
		/*margin: 0 auto;  Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite bei Bedarf zentriert. */
		text-align: left; 	/* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
		margin: 0 0 0 0;
		min-width: 900px;
	}

	#fixiert {
		margin: 0 0 0 0;
    		width: 99%;
		min-width: 900px;
	}
			
	/** Abstände bei allen Elementen vorsichtshalber auf Null setzen. */
	div, h1, h2, h3, p, img, dl, dt, dd {
		margin: 0;
		padding: 0;
		border: none;
	}
	h1 {font: bold   1.6em Arial, Helvetica, sans-serif; color: #555; margin: 0 0 0.5em 0; letter-spacing: 0.10em;}
	h2 {font: bold   1.2em Arial, Helvetica, sans-serif; color: #444; margin: 0 0 0.5em 0; letter-spacing: 0.05em;}
	h3 {font: bold   1.0em Arial, Helvetica, sans-serif; color: #333; margin: 1.0em 0 0.5em 0; letter-spacing: 0.05em;}
	h4 {font: bold   0.9em Arial, Helvetica, sans-serif; color: #222; margin: 1.0em 0 0.5em 0; letter-spacing: 0.05em;}
	p  {font: normal 0.9em Arial, Helvetica, sans-serif; color: #000; line-height: 1.4em; margin: 0 0 0.5em 0; letter-spacing: 0;}
	sup {color: #f00; font-size: 80%; letter-spacing: 0;}			/* für die hochgestellte 21. Size-Angabe wirkt nur in IE?*/
	.pklein {font-size: 0.8em}
	
	a:link 		{font-weight:bold; color:#333025; text-decoration:underline; }
	a:visited 	{font-weight:bold; color:#66604a; text-decoration:underline; }
	a:focus 		{font-weight:bold; color:#d00; text-decoration:underline; }
	a:hover 		{font-weight:bold; color:#d00; text-decoration:underline; }
	a:active 	{font-weight:bold;	color:lime;}

	img.bord{
		border: 1px solid #666;
	}		
/** Navigationskasten (hellblau) 									*/
   	#navikasten {
		position: absolute;
		top: 0; left: 8px;
		height: 55px;
		width: 100%;
		min-width: 900px;
		padding: 8px 0 0 0;
		background-color: white;
	}
	html>body #navikasten {  /* nur fuer moderne Browser! */
    		position: fixed;
  	}
	
/** #titel (Titelzeile).Text ersetzen durch das Simpelfilter-Logo.	*/
	#titel a {
		display: block;
		float: left;
		background: url(images/sf_logo4.png) 0 0 no-repeat;
		height: 50px; 
		width: 260px;
		margin: 0 -60px 0 10px;
		/*left: -200px;*/
	}
	#titel a:hover{ cursor: pointer;}
	#titel a span {	display: none;	}

						
/** #linkLeiste (die Linkzeile).									*/											 
	ul#linkLeiste {
		margin: 11px 10px 0 0;		/**Werte: oben/rechts/unten/links*/
		padding: 0 40px 0 320px;
		text-align: left;
		background: #def;
		opacity: 1.0;
	}
	*:first-child+html ul#linkLeiste { /*Star-Plus-Html-Hack, gilt nur für IE7*/
		margin: 14px 35px 0 0;
	}

	ul#linkLeiste li,
	#footer {
		display: inline;
		list-style-type: none;
	}

	ul#linkLeiste a,
	#footer span,
	#footer a {
		font: normal 0.8em Arial, Helvetica, sans-serif;
		letter-spacing: 0.1em;
		padding: 0.05em 0.5em;		/* Raum um Text (für Farbe bei hoover)*/
		text-decoration: none;
		text-transform: uppercase;	/* immer Großbuchstaben*/
		color: #000;
	}
	
	ul#linkLeiste a:hover,	/** Links unter dem Mauszeiger. */
	#footer a:hover
		{color:#ffffff; 	background: #8eadff;}
		
	ul#linkLeiste a.selekt, /* a.selektiert bezeichnet den Seitenbereich, indem wir uns gerade befinden*/ 
	#footer a.selekt
	 	{color: #d00;	font-weight: bold;}
	 
	ul#linkLeiste a:hover.selekt, 	/** Links unter dem Mauszeiger. */
	#footer a:hover.selekt
		{color: #faa;}

/** #warenkorb													*/													
	ul#linkLeiste a#warenkorb{ 
		background: url(images/korb-icon.gif) center 3px no-repeat;
		height: 28px; 
		width: 35px;
		margin: 0;
		padding: 16px 30px 0;
	}
	#warenkorb span { display: none; }	/* dient zur Ausblendung der Textanzeige*/

	ul#linkLeiste a:hover#warenkorb{
		background-color: #8eadff;
		background-image: url(images/korb-icon-white.gif);
		cursor: pointer;
	}
	ul#linkLeiste a.selekt#warenkorb {
		background-image: url(images/korb-icon-red.gif)
	}
	
/** #pfadleiste													*/											 
	ul#pfadleiste {
		margin: 0 0 0 280px;		/**Werte: oben/rechts/unten/links*/
		/*padding: 0 40px 1px 0;*/
		text-align: left;
	}
	*:first-child+html ul#pfadleiste { /*Star-Plus-Html-Hack, gilt nur für IE7*/
		margin: 14px 35px 0 0;
	}

	ul#pfadleiste li{
		font: normal 0.7em Arial, Helvetica, sans-serif;
		/*letter-spacing: 0.1em;*/
		display: inline;
		list-style-type: none;
		color: #777;
	}

	ul#pfadleiste a{
		text-decoration: none;
		font-weight: normal;
		color: #aaa;
		padding: 0.05em 0.3em;		/* Raum um Text (für Farbe bei hoover)*/
	}
	
	ul#pfadleiste a:hover	/** Links unter dem Mauszeiger. */
		{color:#000;
		/*background: #77f;*/
		}
		
	
/** "Fließende" Kästen. 											*/	
	/** Jeder Kasten besteht aus zwei divs, einem .kastenAussen und einem .kastenInnen.
	* Dies liegt daran, dass die K?sten den Abstand 70% + 3em vom linken Rand haben sollen,
	* man aber nicht zwei unterschiedliche Ma?angaben in einer margin-Anweisung angeben kann.
	* Deshalb wird dies aufgeteilt: .kastenAussen hat 70%, .kastenInnen 3em Abstand zum linken Rand. */

	/*äußerer Kasten, weiß														*/
		.kastenAussen {
			float: right; 
			width: 25%; 					/* breite bezieht sich auf Fontgröße, deshalb hier auch definieren */
			max-width: 20em;
			min-width: 12em;
		}
	
	/*spezieller Abstand für allerersten Kasten									*/
		#ersterKasten {
			margin-top: 6em;
		}
		
	/** Innerer Kasten wird grau hinterlegt und braucht Innenabstand (padding).	*/
		/** Dieser ist ausnahmsweise in Pixeln angegeben, da wir ihn f?r h2 wieder pixelgenau "?berschreiten" müssen 	*/
		.kastenInnen {
			margin: 0 0 15px 10px;
			padding: 7px;
			background-color: #eee;
			opacity: 0.9;
			filter: "alpha(opacity=90)";
			filter: alpha(opacity=90);
		}

	/** Die Überschriften in Kästen. 												*/
		.kastenInnen h2 {
			font: bold 1em Arial, Helvetica, sans-serif;
			letter-spacing: 0.1em;
			color: #333;
			margin-bottom: 0.5em; 
		}
		.kastenInnen h3 {
			margin: 1em 0 0.25em 0;
			font: bold 0.9em Arial, Helvetica, sans-serif;
			letter-spacing: 0.05em;
			color: #3f4364;
		}
		
	/** grauer Text als Platzhalter für Überschriften in Kästen (Mozilla-Darstellungsfehler)  */
		.kastenInnen h6 {
			margin: 1em 0 0.25em 0;
			font: 0.8em Arial, Helvetica, sans-serif;
			color: #eee;
		}

	/** Angaben in den Kästen stehen momentan meist in definition lists (dl).		
		* Definition lists sind f?r Glossare gedacht, eignen sich aber auch f?r andere Sachen.
		* Im Unterschied zu unordered lists, die nur einen Elementtyp li kennen, hat die definition
		* list zwei: dt (definition term) und dd (definition definition), also Terminus und Erkl?rung.
		* Ich habe diesen Typ f?r die Features-Liste eingesetzt, aber auch im Download-Kasten. 
		*/
		.kastenInnen dl dt {
			margin: 0.5em 0 0 0;
			font: bold 0.8em Arial, Helvetica, sans-serif;
			letter-spacing: 0.2em;
			/*text-transform: lowercase;*/
			color: #3f4364;
		}
	
	/** Absätze und dd-Elemente werden gleich behandelt.  							*/
		.kastenInnen p,
		.kastenInnen dl dd {
			margin: 0 0 0.5em 0;
			font: 0.8em Arial, Helvetica, sans-serif;
			letter-spacing: 0.05em;
			text-align: left;
			color: #5f6384;
		}

	/** Die Links im Kasten.  													*/
		.kastenInnen a {
			font-weight: bold;
			text-decoration: none;
			color: #00a;
		}
	/** Links unter dem Mauszeiger.  												*/
		.kastenInnen a:hover {
			color: #c22;
		}
		
	/** Tastaturschrift 															*/
		.kastenInnen kbd {
			margin: 0 0 0.5em 0;
			font: bold 0.75em Arial, Helvetica, sans-serif;
			letter-spacing: -0.02em;
			text-align: left;
			text-transform: uppercase;
			color: #8C008C;
		}
		
	/** Normale ungeordnete Listen im Kasten.										*/
		.kastenInnen ul li {
			font: bold 0.8em Arial, Helvetica, sans-serif;
			letter-spacing: 0.02em;
			color: #5f6384;
		}
		.kastenInnen ul li ul li {
			font: normal 0.7em Arial, Helvetica, sans-serif;
			color: #5f6384;
		}


		
/** Der Hauptteil. #inhalt.										*/
	/** nimmt 70% der Breite der Seite ein. Nachfolgende Elemente umfliessen ihn rechts, (Kästen auf der rechten Seite).*/
		#inhalt {
			float: left;
			width: 70%;
			/*min-width: 640px;*/
			margin: 40px 10px 0 10px;
			padding: 1.5em 0 20px 13px;
			font-family: Arial, Helvetica, sans-serif;
		}
		*:first-child+html #inhalt { /*Star-Plus-Html-Hack, gilt nur für IE7*/
			/*zoom: 1;*/
			margin: 0 10px 0 10px;
		}
	/** Überschriften							*/	
		/** Seiten-Überschrift. 									*/
			#inhalt h1 {
				margin: 0.5em 0 1.25em 0;
				font: italic 2em Arial, Helvetica, sans-serif;
				letter-spacing: 0.1em;
				text-align: center;
				color: #c22;
			}
		
		/** Untertitel 											*/
			#inhalt h1.ut {
				margin: -2.25em 0 1.25em 0;
				font: italic 1em Arial, Helvetica, sans-serif;
				letter-spacing: 0.1em;
				text-align: center;
				color: #666;
			}

		/** Zwischen-Überschriften.  								*/
			#inhalt h2 {
				margin: 1.0em 0 0.75em 0;
				font: italic 1.25em Arial, Helvetica, sans-serif;
				letter-spacing: 0.1em;
				color: #c22;
			}
		
		/** Noch eine Zwischen-Überschrift.  						*/
			#inhalt h3 {
				margin: 1em 0 0.25em;
				font: bold 1em Arial, Helvetica, sans-serif;
				letter-spacing: 0.1em;
				color: #222;
			}

		/** Noch kleinere Zwischen-?berschrift. Passt zu p.klein  	*/
			#inhalt h4 {
				margin: 0.5em 0 0.2em;
				font: 0.95em Arial, Helvetica, sans-serif;
				letter-spacing: 0.1em;
				color: #222;
			}

	/** Links im Hauptteil.						*/	
		/** kursiv und dieselbe blaue Farbe wie die Überschriften rechts oder das Simpelfilter-Logo. */
		#inhalt a {
			font-family: Arial, Helvetica, sans-serif;
			font-style: bold;
			text-decoration: none;
			color: #00a;
		}
		#inhalt dt a {
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold;
				font-style: italic;
				text-decoration: none;
				color: #00a;
		}
		
		/** Links unter dem Mauszeiger.  */
			#inhalt a:hover {
				color: #c22;
				background-color: #fff;
			}

	/** Klassen für wechselnde Hintergrundfarben	*/	
		/** weißer Hintergrund */
			#inhalt .weisserHG {
				padding: 12px 7px 7px 7px;
				background-color: #fff;
				clear:left;
			}
		
		/** grauer Hintergrund.*/
			/** clear:both sorgt für Erweiterung des Kastens bis zum Ende eines evtl. eingefügten Bildes. grauer Hintergrund läuft aber nur über Text */
			#inhalt .grauerHG {
				padding: 12px 7px 7px 7px;
				background-color: #eee;
				clear:both
			}

		/**Überschriften in den weißen und grauen Kästen erhalten andere Abstände nach oben und unten */
			#inhalt .weisserHG h3,
			#inhalt .grauerHG h3{
				margin: 0em 0 0.75em;
			}

	/** Absätze im Hauptteil.					*/	
		#inhalt p {
			margin: 0 0 0.5em 0;
			font-size: 0.95em;
			line-height: 1.5em;
			letter-spacing: 0.05em;
			text-align: left;
			color: #111;
		}
		#inhalt p.klein {
			margin: 0 0 0.5em 0;
			font-size: 0.85em;
			line-height: 1.25em;
			letter-spacing: 0.05em;
			text-align: left;
			color: #444;
		}
		#inhalt kbd {
			margin: 0 0 0.5em 0;
			font: bold 0.8em Arial, Helvetica, sans-serif;
			letter-spacing: -0.02em;
			text-align: left;
			text-transform: uppercase;
			color: #8C008C;
		}

	/** Normale ungeordnete Listen im Hauptteil.	*/	
		/* Für die Site-Map genutzt, wobei man mehrere ineinander schachteln kann. Ausgezeichnet sind hier 1.-3. Stufe. */
		#inhalt ul li a{
			font-weight: bold;
		}
		#inhalt ul li ul li a{
			font-weight: normal;
		}
		#inhalt ul li ul li ul li a{
			font-style: italic;
		}

	/** Definition Lists im Hauptteil				*/	
		/** Als Inhaltsverzeichnis eines neuen Abschnitts benutzt und entsprechend formatiert.	*/
		#inhalt dl {
			margin-top: 1em;
			margin-bottom: 1em; 
		}
		
		#inhalt dl dt {
			margin: 0 0 0.2em;
			font: italic 1.1em Times, serif;
			letter-spacing: 0.2em;
			color: #c22;
		}
		
		#inhalt dl dd {
			margin: 0 0 1em;
			font-size: 0.95em;
			line-height: 1.5em;
			letter-spacing: 0.05em;
			text-align: left;
			color: #444;	
		}

	/** Bilder und Textumläufe 					*/	
		/** Das Bild muss in der HTML-Datei vor dem umfließenden Absatz/Absätzen kommen. Ist kein Umlauf gew?nscht, kann die Klasse weggelassen werden.*/
		#inhalt img.umlaufLinks {
			/*clear: left;*/
			/*float: left;*/
			margin: 0.25em 0.75em 0.25em 0;
		}
		#inhalt img.umlaufRechts {
			/*clear: right;*/
			float: right;
			margin: 0.25em 0 0.25em 0.75em;
		}

	/** Bilder mit Bildunterschriften 			*/	
		/** Ein Absatz p in solch einem BildBehälter wird automatisch als Bildunterschrift betrachtet.	*/
		#inhalt .bildBehaelter {
			margin: 1.5em 0 1.25em 0;
			text-align: center;
		}
		#inhalt .bildBehaelter img {
			margin: 0.25em;
		}
		#inhalt .bildBehaelter p {
			font-style: italic;
			font-size: 0.9em;
			text-align: center;
			color: #666;
		}

	/** Bild-Text-Boxen im Haupttext			*/	

		.mainbox {
			border-color:#def;
			border-style:solid;
			border-width:1.5em 3px 3px;
			max-width: 430px;
			padding:5px;
			margin: 0.5em 0.5em 0 0;
			float: left;
		}
		#inhalt .mainbox h3{
			margin: -1.7em 0 0.25em 0;
		}
		#inhalt .mainbox img{
			max-width: 424px;
			margin: 5px 0;
		}
	
		.text{
			padding: 0.5em;
		}
		
		div.imglinks{
			float: left;
			margin-right: 1em;
		}
		div.imgrechts{
			float: right;
			margin-left: 1em;
		}
	
		div.clear{clear: both}

	
	/** Tabellendefinition, border: 1px solid black;*/
		#inhalt table{
			padding: 0em;
			background-color: #fff;
			max-width: 800px;
		}
		#inhalt table th{		/**Kopfzeile-zellen*/
			font-size: 0.9em;
			text-align: center;
			color: #666;
			background-color: #def;
			border: 0;
			height: 30px;
		}
		#inhalt table td{		/**Zeilen*/
			margin: 0 0 0 0;
			font-size: 0.75em;
			line-height: 1.00em;
			text-align: left;
			color: #000;
			background-color: #def;
			padding: 0.25em 0.5em;
		}

		#inhalt table tr td.preis{
			background-color: #def;
			font-weight: bolder;
		}
		#inhalt table tr td.id{
			background-color: #def;
		}
	
	
/** Die Fußzeile. Hier endet der Textfluss (clear: left)			*/
  	#footer {
		position: absolute;
		bottom: 0; left: 0;
		margin: 0 8px 0 8px;
		width: 100%;
   		min-width: 900px;
		background: #def;
		text-align: center;
	}
	html>body #footer {  /* nur fuer moderne Browser! */
    		position: fixed;
   	}

	#footer span {		
		color: #666;				/* für Copyright-Text*/
	}
	
	#footer a.up span,
	#footer a.en span,
	#footer a.de span,
	#footer a.noads span
		{ display: none; }	/* dient zur Ausblendung der Textanzeige*/

	#footer a.up{ 
		background: url(images/up.png) center 0px no-repeat;
		padding: 0 30px;
		margin: 0 3em;
	}
	
	#footer a.up:hover{
		background: url(images/up-hover.png) center 0px no-repeat;
		/*background-color: #99f;*/
	}

	#footer a.en{ 
		background: url(images/en.gif) center 0 no-repeat;
		padding: 0 20px;
	}
	#footer a.de{ 
		background: url(images/de.gif) center 0 no-repeat;
		padding: 0 20px;
	}
	#footer a.noads{ 
		background: url(images/noads_39x14.gif) center 0 no-repeat;
		padding: 0 20px;
		margin: 0 8px 0 0;
	}

	#footer a.en:hover,
	#footer a.de:hover,
	#footer a.noads:hover
	{
		;
	}