/*
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-y;
  background-image : url(../body_bg.jpg); 
  margin-left : 0px;
  margin-right : 0px;
  margin-top : 0px;
  margin-right : 0px;
  } 


/* DIV für die Farbskala */
.farbskala {
  font-size 	: 12px;
  text-align : left; 
  position: relative;
  top : 0px;
  left : 30px;
  margin-left :0px;
  width : 750px;
  }
.farbskala img { display: block; }
#showfabrics {
  /*height : 210px;*/
	}

/* Rahmen für Bestseller und neue Produkte */
.rundrum {
  position : relative;
  left : 0px;
	margin-top : 5px;
  border-width : 1px; 
  border-style : solid; 
  border-color : #ffcc99; 
  padding 			: 3px; 
  vertical-align:middle;
  font-family : Arial; 
  text-decoration : none; 
  font-size 			 : 10px; 
  /* text-align			 : left; */
  } 

.rundrum h2 { /* background-color : #ffcc99; */
  background-repeat:no-repeat;
  background-image : url(../bilder/rundrum_kopf_links.jpg);      
  font-size: 12px;
  margin : -4px -3px 5px -4px;
  padding : 4px 4px 4px 10px;
  }												 

.rundrum_kopf_rechts {  /* background-color : #ffffff; */ 
  background-repeat:no-repeat; 
  background-image : url(../bilder/rundrum_kopf_rechts.jpg);  
  position: relative;
  top: 0px;
  right: 0px; 
  width:9px;
  z-index:99; 
  }												 

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

.artikellinkdelete {
  position:relative;
  float: left;
  border-width : 0px; 
  border-style : none; 
  padding : 0px; 
  margin : 1px;
  left   : 0px;
  background-color : none;
  }

/* Ü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;
	/* margin-left: 80px; */
	min-width : 650px;
  }
/* 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 : 1px;
  color : #646464; 
  background-color : #646464;
  border : 0px; 
  line-height: 1px;
  /*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; 
  }

/* 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 : #0E4072; 
  font-family : 'Times New Roman' , Arial; 
  text-decoration : none; 
  font-weight : bold; 
  font-size : 20px;
	margin-left : 5px; 
  /*				 font-style : italic; */
  } 

/* 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; 
	margin-left : 5px; 
  } 

/* Aussehen des hervorgehobenen Textes zB: Sie sparen % */
.hervorgehoben { 
  color : #800040; 
  font-weight : bold; 
  font-style : italic;
  font-size : 14px; 
  } 
/* Eingaefelder */
input[type=text] {
  color : #003366; 
  font-family : Arial; 
  font-size : 12px;
  font-weight : bold; 
	background-color : #FFF0D6; 
  }
/* Listen */
select {
  color : #003366; 
  font-family : Arial; 
  font-size : 12px;
	background-color : #FFF0D6; 
  }

textarea { 
  color : #003366; 
  font-family : Arial; 
  font-size : 12px;
	background-color : #FFF0D6; 
  }
	
/* algemeine Links im Menue und text */
.linkstring {
  color : #800040; 
  font-weight : bold; 
  font-style : normal;
  font-size : 12px; 
  } 
  
#livesearch {
  visibility : hidden;
  border : 2px;
  padding : 0px 2px 2px 5px;
  margin : 2px;
  border-style : solid; 
  border-color : #ffcc99; 
  position : absolute;
  top : 110px;
  left: 60px;
  width : 700px;
  height : 470px;
  max-height : 480px;
  /*min-height : 100px;*/
  overflow : scroll;
  color : black;
  font-family: Arial;
  font-size : 12px;
  font-weight : normal;
  background-color : white;
  text-align : left;
  z-index : 99;
  }

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


/* allgemeine Tabellenangaben */
table {	
  border : 0;
  margin : 0px;
  padding: 3px;
  /* vertical-align:top; */ 
  }

/* Images*/
img { 
  border : 0px; 
  } 

img.button { 
  cursor : pointer;
	background-color: transparent;
	}

.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);
       		  background-repeat: repeat-x; 
						height : 70px;
						background-color: #136098;
						/*width  : 100%;*/
						}

.banner		{
						position : absolute;
						left		 : 20px;
						top			 : 10px;
						width		 : 300px;
						background-repeat: no-repeat;
						}

.login		{ font-family : Arial;
						font-size : 11px; 
						position 			 : absolute;
						top			 			 : 2px;
						margin-top		 : 0px;
						padding		 		 : 1px;
						right		 			 : 10px;
						margin-bottom	 : 0px;
						color					 : #FFFFCC;
						background-color: #136098;
						}

.ohnerand  {margin : 0px;
					  padding: 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 die Menueleiste unterhalb des Shoplogos: Link zum Warenkorb und Hauptmenü ( "Startseite", "Links, "Versand",...)*/
.schwaarz	{
  /*background-color: #517BA8;*/
  background-repeat:repeat-x;
  background-image : url(../gurt.jpg); 
  /* height : 60px; */
  padding : 0px;
  margin : 0px; 
  font-weight:bold; 
  font-family: Arial; 
  text-decoration: none; 
  text-align : center; 
  color: #E2EDFC; 
  font-size:12px;
  }
schwaarz table {
							padding : 0px;
							}
																
/* für Warenkorb */
.schwaarzklein 	{
							/*background-color: #517BA8;*/
							/*height : 20px;*/ 
							padding : 0px;
							margin : 0px; 
							font-weight:bold; 
							font-family: Arial; 
							text-decoration: none; 
							color: #E2EDFC; 
							font-size:10px;
							}
a.schwarz:link		{ font-weight:bold; font-family: Arial; text-decoration: none; 		color: #E7E5E5; font-size:12px;}
a.schwarz:visited	{ font-weight:bold; font-family: Arial; text-decoration: none; 		color: #E7E5E5; font-size:12px;}
a.schwarz:hover		{ font-weight:bold; font-family: Arial; text-decoration: underline; color: #FFFFCC; font-size:12px;}
a.schwarz:active	{ font-weight:bold; font-family: Arial; 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 : 140px;
		float: left;
		margin-left : 0px;
		margin-right : 10px;
		padding-left : 8px;
		padding-right : 10px;
    font-size : 12px; 
    font-family : Arial; 
    text-decoration : none; 
    font-weight : normal; 
    } 
.produktemenueimg img{
    margin-top : 6px;
		}

a.pmenue2 { 
      font-size : 12px; 
      font-family : Arial; 
      text-decoration : none; 
      color : #003366; 
      font-weight : normal; 
      } 
a.pmenue2:hover { 
      text-decoration : underline; 
      color : #990000; 
      } 
a.pmenue2:active { 
      text-decoration : underline; 
      color : #003366; 
      } 

/* 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;
  position: absolute;
  /* left  : 10px;
  margin-left  : 165px; */
  left  : 175px;
  margin-left  : 0px; 
  margin-right : 15px;
  } 

/* 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; }

/* Sondrpreis in der Produktliste im Bild unten rechts */
	 .sonderpreis  { font-family: Arial; 
									 color: #1C0482; 
									 text-decoration: none; 
									 font-size:11px;
									 font-weight: bold; 
									 line-height: 10px;
									 text-align: left;
									 text-indent: 22px;
	 							 	 position: relative;
	 							 	 top: -30px;
									 right: -60px;
									 vertical-align: middle;
									 height: 18px;
									 margin-top:15px;
									 padding-top: 5px;
									 padding-bottom: 3px;
									 background-image: url(../sonderpreis.gif);
									 background-repeat:no-repeat;

/*									 visibility: hidden;*/   
									 }
/* Lagerbestand - die Farbe wird im Programm über "Optionen" automatisch gesetzt */
	 .lagerbestand { font-family: Arial;
	 							 	 font-size:11px;
									 text-align:left;
	 							 	 margin-top: 5px;
									 margin-bottom: 5px;
									 margin-left: 3px;}
									 
/* Aussehen und Anordnung des Warenkorbmenues innerhalb der Produktbeschreibung */	
	.warenkorbfenster	{ background-color: #E2EDFC;
											padding					: 1px 5px 1px 5px;
											font-size       : 12px;
											text-align  : left;		
										}

	.warenkorbtext	{ font-family: Arial; 
										color: #003366; 
										text-decoration: none; 
										font-size:12px;
									  text-align:left;										 
										border-top: 1px solid grey;
										margin-top: 15px;
										padding-top: 5px;
										}
	.warenkorbbutton {margin-top: 5px;
									  margin-left: 10px;
									  text-align: right;
										vertical-align: baseline;
									  
/*									position: absolute;
										right: 50px;*/
										}
		
/* 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;
										  font-size       : 12px;
											text-align  		: right;																						
											width						: 95%;
											left 						: 10px;
											vertical-align  : middle;
											}

/* Formatierung einer Select-Liste */
  .select-bereich {  width: 250px;
									}											

/* 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;
        	}

/* Erfolgsmeldung zB bei Auktionsgeboten */
	.success	{ font-family: Arial;
        	color: #001C23;
        	text-decoration: none;
        	font-size:12px;
        	font-weight:bold;
        	background-color:#9AFF9C;
					line-height : 18px;
					padding : 5px;
        	}					
/* Aussehen des Schriftzuges "sie sind hier" auf der Übersichtsseite über eine Produktrubrik*/
	.siesindhier			{min-width:250px;
										 left: 5px;
										 font-family: Arial;
										 color: #336699;
										 text-decoration: none;
										 font-size:12px;
										 text-align:left;
										 vertical-align:baseline;
										 }

	.invers		{ color: #FFFFCC;
							background-image:  url(../bilder/bg_invers.jpg);
							background-repeat: repeat-x;
							margin					 : 0 2px 0 2px;
							padding					 : 0 5px 0 5px;
							border-width : 1px;
 	 					  border-style : solid; 
				 			border-color : #003366; 
/*						  background-color: #336699;*/
						}

	a.siesindhier:link		  { color: #336699; text-decoration: none; }
	a.siesindhier:visited		{ color: #336699; text-decoration: none; }
	a.siesindhier:hover		  { color: #990000; text-decoration: underline; }
	a.siesindhier:active		{ color: #336699; text-decoration: none; }

/* Zeile unterhalb von 'sie sind hier' */
  .ansicht {			 	 font-family: Arial;
										 color: #336699;
										 text-decoration: none;
										 font-size:12px;
										 text-align:left;
 				 
					 					 border-width : 0 0 1px 0 ; 
				 	 					 border-style : solid; 
				 						 border-color : #003366; 
										 
										 margin: 5px 0 10px 0;
					 }
/* die anklickbarenen Links in der zeile */ 
	.ansichtlink  {		 border-width : 1px;
				 	 					 border-style : solid; 
				 						 border-color : #003366; 
										 margin				: 0 2px 0 2px;
										 padding			: 0 5px 0 5px;
											}
  a.ansichtlink:hover {color: #FFFFCC;
							background-image:  url(../bilder/bg_invers.jpg);
							background-repeat: repeat-x;
							text-decoration: none;
							}
											
/* 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;
										}

  .schaltflaeche:hover { 
        							 color : #990000; 
        							 text-decoration : underline; 
        							 } 
										
  .button {					background-color: #E2EDFC;
										border			  : 0px;
										outline       : none;
										padding				: 0 5px 0 5px;
										cursor				: pointer;
										}	
/* 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; 
    }
						
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------- Einstellungen für die Info-Fenster
/* ----------------------------------------------------------------------------------------------------------------*/
/*{padding: 0; margin: 0;}*/

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#585858;
	filter:alpha(opacity=65);
	-moz-opacity: 0.65;
	opacity: 0.65;
}

* html #TB_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #4759A9;
/*	border: 4px solid #525252; */
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}