/*
In dieser CSS-Datei ist es möglich, das Aussehen der meisten Elemente des Shops zu verändern.
Alle Texte, Links, Hintergrundfarben, Hintergundbilder usw. des Shops werden hier eingestellt
und können hier verändert werden.
Dazu ist es lediglich notwendig zu wissen, welches Objekt man wie verändern will und wo es
angezeigt wird. Ich habe versucht, immer verständlich dazuzuschreiben, um was es sich handelt.
*/

/* Hintergrundbild der Seite */
body { 
		 background-repeat:repeat;
		 background-image : url(../gelber_stoff.jpg); 
		 margin-left : 10px;
		 margin-right : 0px;
		 margin-top : 0px;
		 margin-right : 10px;
		 } 

/* Rahmen für Bestseller und neue Produkte */
.rundrum { 
				 border-width : 1px; 
				 border-style : solid; 
				 border-color : #ffcc99; 
				 padding : 5px; 
				 background-color : white;
				 vertical-align:middle;
 				font-family : Arial; 
				text-decoration : none; 
				font-size : 12px; 
				 } 

/* Rahmen für artikel zB auf Startseite */
/* wird aufgerufen von function artikellink */
.artikellink { 
				 float: left;
				 border-width : 1px; 
				 border-style : solid; 
				 border-color : #ffcc99; 
				 padding : 5px; 
				 margin : 2px;
				 background-color : white;
				 text-align :center;
 				 font-family : Arial; 
				 text-decoration : none; 
				 font-size : 12px; 
				 min-width:150px;
				 max-width:220px;
				 min-height : 180px;
				 overflow:hidden;
				 } 

/* Überschrift auf allen Seiten*/
	h1 { 
				color : #646464; 
				font-family : Arial; 
				text-decoration : none;
				text-align : center; 
				font-size : 18px ; 
				margin-top : 5px;
				margin-bottom : 3px;
				}
/* 2. Überschrift z.B. Produkttitel*/
	h2 { 
				color : #646464; 
				font-family : Arial; 
				text-decoration : none;
				text-align : center; 
				font-size : 16px ; 
				margin-bottom : 3px;
				}
				
/* 3. Überschrift z.B. Produktbeschreibung*/
	h3 { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none;
				text-align : left; 
				font-size : 14px ; 
				margin-top : 3px;
				margin-bottom : 3px;
				}
			
/* Trennlinie */
	hr { 
				height : 2px;
				color : #646464; 
				line-height: 5px;
				width : 100%;
				}

/* allgemeiner Text auf allen Seiten*/
	p { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none; 
				font-size : 12px; 
				}
												 
/* Aktions-Überschrift */
	.aktion { 
				font-family : Arial; 
				color : #800040; 
				text-align : left; 
				font-size : 14px ; 
        font-weight : bold; 
				margin-bottom : 3px;
				}

/* allgemeiner Text auf allen Seiten*/
	.text { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none; 
				font-size : 12px; 
				text-align : left; 
				}
				
/* allgemeiner zentrierter Text auf allen Seiten*/
	.textmittig { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none; 
				font-size : 12px; 
				text-align : center; 
				margin-right : 20px;
				}

/* allgemeiner rechtsbündiger Text auf allen Seiten*/
	.textrechts { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none; 
				font-size : 12px; 
				text-align : right; 
				}
								
/* kleiner Text zB für Hinweise*/
	.textklein { 
						 color : #003366; 
						 font-family : Arial; 
						 text-decoration : none; 
						 font-size : 10px; 
						 }
	 
/* Aussehen des Preises auf allen Seiten*/
	.preis { 
				 color : #003366; 
				 font-family : Arial; 
         text-decoration : none; 
         font-weight : bold; 
         font-size : 16px; 
         } 
				 
/* Aussehen des alten Preises auf allen Seiten*/
	.alterpreis { 
          color : red; 
          font-family : Arial; 
          text-decoration : line-through; 
          font-weight : bold; 
          font-style : italic; 
          font-size : 16px; 
} 

/* Aussehen des hervorgehobenen Textes zB: Sie sparen % */
	.hervorgehoben { 
          color : #800040; 
          font-weight : bold; 
					font-style : italic;
          font-size : 14px; 
} 

/* Text am Fuss auf allen Seiten*/
	.fusstext { 
				color : #003366; 
				font-family : Arial; 
				text-decoration : none; 
				font-size : 10px; 
				text-align : right; 
				margin-right : 20px;
				}

/* Kopf */
  .header {
  background: #FFFFCD;
				}
				
/* allgemeine Tabellenagaben */
  table {	border : 0;
					margin : 0px;
					padding: 3px;
				}
				
/* Images*/
  img { 
       border : 0px; 
      } 

	.ganze_breite {
				width: 100%;
				}
								
/* Hintergrundfarbe rechts und links vom Shop*/
  .hintergrund { 
          background-color : silver; 
          } 

/* Farbe des dünnen Seitenstreifens links und rechts des Shops*/
	.rahmen			{ background-color:#517BA8;}


/* definiert die Hintergrundfarbe des Logofensters am Kopf des Shops */
.logo			{
/*						background-image : url(../batiks.jpg); */
						height : 65px;
						width  : 100%;
						}

.banner		{
						position : absolute;
						left		 : 20px;
						top			 : 10px;
						width		 : 300px;
						}

.login		{
						position : absolute;
						top			 : 3px;
						margin-top: 0px;
						right		 : 10px;
						margin-bottom: 0px;
						}
						
	/* Aussehen von Standdard-Links */
	a:link { 
        font-family : Arial; 
        text-decoration : none; 
        font-weight : bold;
  } 
  a:visited { 
        font-family : Arial; 
        text-decoration : none; 
        font-weight : bold; 
  } 
  a:hover { 
        color : #990000; 
        font-family : Arial; 
        text-decoration : underline; 
        font-weight : bold; 
        } 
  a:active { 
        font-family : Arial; 
        text-decoration : none; 
        font-weight : bold; 
        } 
	
/* definiert das Fenster unterhalb des Shoplogos: Link zum Warenkorb und Hauptmenü ( "Startseite", "Links, "Versand",...)*/
	.schwarz 			{
									background-color: #517BA8;
									height : 20px;
									padding : 5px;
									margin : 0px; 
									font-weight:bold; 
									font-family: Arial; 
									text-decoration: none; 
									text-align : center; 
									color: #E2EDFC; 
									font-size:12px;
									}
/* für Warenkorb */
	.schwarzklein 	{
									background-color: #517BA8;
									height : 20px; 
									font-weight:bold; 
									font-family: Arial; 
									text-decoration: none; 
									color: #E2EDFC; 
									font-size:10px;
									}
	a.schwarz:link		{ font-weight:bold; text-decoration: none; 		color: #E7E5E5; font-size:12px;}
	a.schwarz:visited	{ font-weight:bold; text-decoration: none; 		color: #E7E5E5; font-size:12px;}
	a.schwarz:hover		{ font-weight:bold; text-decoration: underline; color: #E7E5E5; font-size:12px;}
	a.schwarz:active	{ font-weight:bold; text-decoration: underline; color: #E7E5E5; font-size:12px;}

/* Aussehen des Produktmenüs im linken Teil des Shops */
	.produktemenue { 
				position:relative;
				top : 0px;
				left: 0px;
				width : 160px;
				margin-left : 0px;
				padding-left : 10px;
				padding-right : 0px;
        font-size : 12px; 
        font-family : Arial; 
        text-decoration : none; 
        font-weight : normal; 
/*        background-repeat : repeat; 
        background-image : url(../bilder/produktemenue-bg.jpg); */ 
        } 
  a.produktmenue:link { 
        font-size : 12px; 
        font-family : Arial; 
        text-decoration : none; 
        color : #003366; 
        font-weight : normal; 
        } 
  a.produktmenue:visited { 
        font-size : 12px; 
        font-family : Arial; 
        text-decoration : none; 
        color : #003366; 
        font-weight : normal; 
        } 
  a.produktmenue:hover { 
        font-size : 12px; 
        font-family : Arial; 
        text-decoration : underline; 
        color : #990000; 
        font-weight : normal; 
        } 
  a.produktmenue:active { 
        font-size : 12px; 
        font-family : Arial; 
        text-decoration : underline; 
        color : #003366; 
        font-weight : normal; 
        } 

/* definiert die Sonderangebote die unterhalb des Produktmenüs im linken Bereich des Shops gezeigt werden (wenn sie aktiviert sind) */
	.highlights			{ color: #003366; text-decoration:none; font-family:Arial; font-size:12px; font-weight:bold;}
	a.highlight:link	{ color: #003366; text-decoration:none; font-family:Arial; font-size:12px;}
	a.highlight:visited	{ color: #003366; text-decoration:none; font-family:Arial; font-size:12px;}
	a.highlight:hover	{ color: #990000; text-decoration:underline; font-family:Arial; font-size:12px;}
	a.highlight:active	{ color: #003366; text-decoration:none; font-family:Arial; font-size:12px;}

/* definiert die Hauptseiten rechts unten */
	.hauptseiten	{text-align: center;
			 margin-right : 10px;
			 width :80%;} 

/* Aussehen von Links auf den Hauptseiten rechts unten (wegen anderer Hintergrundfarbe oft sinnvoll) */
	a.alternativ:link		{ color: #003366; font-family: Arial; text-decoration: none;}
	a.alternativ:visited	{ color: #003366; font-family: Arial; text-decoration: none;}
	a.alternativ:hover		{ color: #990000; font-family: Arial; text-decoration: underline;}
	a.alternativ:active		{ color: #003366; font-family: Arial; text-decoration: none;}

/* Aussehen von besonders kleinen Links auf den Hauptseiten rechts unten (wegen anderer Hintergrundfarbe oft sinnvoll) */
	a.kleinlink:link	{ color: #003366; font-family: Arial; text-decoration: none; font-size:10px; }
	a.kleinlink:visited	{ color: #003366; font-family: Arial; text-decoration: none; font-size:10px; }
	a.kleinlink:hover	{ color: #990000; font-family: Arial; text-decoration: underline; font-size:10px; }
	a.kleinlink:active	{ color: #003366; font-family: Arial; text-decoration: none; font-size:10px; }
	
/* Aussehen der Bildunterschriften in Produktübersichtsseite */
	.klein	{ font-family: Arial; color: #000000; text-decoration: none; font-size:12px; }

/* Aussehen von Trennlinien in der Produktdetailansicht */
	.trennlinie {color:#517BA8; background-color: #517BA8; height:1px; text-align:center; border:1px dotted}

/* Aussehen und Anordnung des Produktbildes innerhalb des Produktbeschreibungstextes */
	.produktbild	{ text-align:right; margin-right:8px; margin-bottom: 8px;}
	.produkttext	{ font-family: Arial; color: #003366; text-decoration: none; font-size:12px; }

/* definiert die Überschriften auf den verschiedenen Hauptseiten */
	.headline	{ font-family: Arial; color: #333333; text-decoration: none; font-size:16px; text-align: center; font-weight: 600; }

/* definiert die Hintergrundfarbe der Tabelle im Warenkorb und im letzten Schritt der Bestellung */
	.warenkorbtabelle	{ background-color: #E2EDFC;
											padding					: 1px,5px,1px,5px;
											margin					: 0px;
											}

/* Warnhinweis bei falsch eingegebener Kundenadresse oder nicht akzeptierten AGBs*/
	.warnung	{ font-family: Arial;
        	color: #FF3300;
        	text-decoration: none;
        	font-size:12px;
        	font-weight:bold;
        	background-color:#FFFF66;
					line-height : 18px;
					padding : 5px;
        	}

/* Aussehen des Schriftzuges "sie sind hier" auf der Übersichtsseite über eine Produktrubrik*/
	.siesindhier			{min-width:200px;
										 position: left;
										 font-family: Arial;
										 color: #336699;
										 text-decoration: none;
										 font-size:12px;
										 text-align:left;
										 vertical-align:middle;
										 }
	.siesindhier_invers		{ font-family: Arial; color: #FFFFCC; text-decoration: none; font-size:12px; background-color: #336699; }
	a.siesindhier:link		{ font-family: Arial; color: #336699; text-decoration: none; font-size:12px; }
	a.siesindhier:visited		{ font-family: Arial; color: #336699; text-decoration: none; font-size:12px; }
	a.siesindhier:hover		{ font-family: Arial; color: #990000; text-decoration: underline; font-size:12px; }
	a.siesindhier:active		{ font-family: Arial; color: #336699; text-decoration: none; font-size:12px; }

/* definiert Schriftart und Farbe für alle Buttons im Shop*/
	.schaltflaeche	{ font-family: Arial; color: #336699; background-color: #E2EDFC; text-decoration: none; font-size:12px; font-weight: bold;}
	
/* Aussehen des Besucherzählers und des Links zum Copyright am Fuß des Shops*/
	.counter			{ text-align:center; color: #D8D4D5; text-decoration:none; font-family:Arial; font-size:10px; background-color: #517BA8;}
	a.counter:link		{ color: #D8D4D5; text-decoration:none; font-family:Arial; font-size:10px;}
	a.counter:visited	{ color: #D8D4D5; text-decoration:none; font-family:Arial; font-size:10px;}
	a.counter:hover		{ color: #FFFFCC; text-decoration:underline; font-family:Arial; font-size:10px;}
	a.counter:active	{ color: #D8D4D5; text-decoration:none; font-family:Arial; font-size:10px;}

/* definiert das Aussehen von Listen und Aufzählungen*/
	.liste	{text-align:left; margin-left:2em; margin-top:5px; margin-bottom:5px;}
	
/* die eingeblendeten Bilder */
  .pic_hover {
						 position:fixed;
						 display:none;
						 top:3px;
						 left:3px;
						 background-color:#FFFFFF;
						 border-width:2px;
						 border-style:solid;
						 border-color:#C0C0C0;
						 padding:0px;
						 z-index: 99; 
						}