/* 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. ******************************************************************************************************************************** */ /* allgemeiner Text auf allen Seiten rechts unten*/ .text { color: #003399; font-family: Verdana,Arial,Helvetica; text-decoration: none; font-size:8pt; } /* Hintergrundfarbe rechts und links vom Shop*/ .hintergrund { background-color: white;} /* Farbe des dünnen Seitenstreifens links und rechts des Shops*/ .rahmen { background-color:#FFFFFF;} /* definiert die Hintergrundfarbe des Logofensters am Kopf des Shops */ .logo { background-color: #FFFFFF;} /* definiert das Fenster unterhalb des Shoplogos: Link zum Warenkorb und Hauptmenü ( "Startseite", "Links, "Versand",...)*/ .schwaarz { background-color: #517BA8; font-weight:bold; font-family: Arial,Verdana,Helvetica; text-decoration: none; color: #E2EDFC; font-size:12px;} a.schwarz:link { font-weight:bold; font-family: Arial,Verdana,Helvetica; text-decoration: none; color: #E2EDFC; font-size:12px;} a.schwarz:visited { font-weight:bold; font-family: Arial,Verdana,Helvetica; text-decoration: none; color: #E2EDFC; font-size:12px;} a.schwarz:hover { font-weight:bold; font-family: Arial,Verdana,Helvetica; text-decoration: underline; color: #ff4500; font-size:12px;} a.schwarz:active { font-weight:bold; font-family: Arial,Verdana,Helvetica; text-decoration: underline; color: #E2EDFC; font-size:12px;} /* Aussehen des Produktmenüs im linken Teil des Shops */ /*.produktemenue {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: none; font-weight:bold; background-color: #DCDCDC; background-position: 50% 20px; background-repeat: no-repeat; background-image:url(../bilder/produktemenue-bg.jpg);}*/ .produktemenue {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: none; font-weight:bold; background-color: #DCDCDC; background-position: 50% 20px; background-repeat: no-repeat;} a.produktmenue:link {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: none; color: #003366;} a.produktmenue:visited {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: none; color: #003366;} a.produktmenue:hover {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: underline; color: #ff4500;} a.produktmenue:active {font-size:11px; font-family: Arial,Verdana,Helvetica; text-decoration: underline; color: #003366;} /* wichtige Überschriften */ .wichtigeUeberschrift { background-color: #E67817; color: #FFFFFF; font-family:Arial,Verdana,Helvetica;} /* Sonderangebote: Überschrift */ .sonderangebotUeberschrift { background-color: #E67817; color: #FFFFFF; text-decoration:none; font-family:Arial,Verdana,Helvetica; margin-left:5px;} .menuUeberschrift { background-color: #517BA8; color: #FFFFFF; text-decoration:none; font-family:Arial,Verdana,Helvetica; font-size:12px; font-weight:bold; margin-left:0px;} /* 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:Verdana,Arial,Helvetica; font-size:12px; font-weight:bold;} a.highlight:link { color: #003366; text-decoration:none; font-family:Verdana,Arial,Helvetica; font-size:11px;} a.highlight:visited { color: #003366; text-decoration:none; font-family:Verdana,Arial,Helvetica; font-size:11px;} a.highlight:hover { color: #ff4500; text-decoration:underline; font-family:Verdana,Arial,Helvetica; font-size:11px;} a.highlight:active { color: #003366; text-decoration:none; font-family:Verdana,Arial,Helvetica; font-size:11px;} /* definiert die Hauptseiten rechts unten */ /*.hauptseiten { background-color:#F3F3F3; background-image:url(../bilder/hintergrund.jpg); background-repeat:no-repeat; background-position: 60% 50%; background-attachment:fixed; padding:0px;}*/ .hauptseiten { background-color:#F3F3F3; background-repeat:no-repeat; background-position: 60% 50%; background-attachment:fixed; padding:0px;} /* Aussehen von Links auf den Hauptseiten rechts unten (wegen anderer Hintergrundfarbe oft sinnvoll) */ a.alternativ:link { color: #003366; font-family: Verdana,Arial,Helvetica; text-decoration: none;} a.alternativ:visited { color: #003366; font-family: Verdana,Arial,Helvetica; text-decoration: none;} a.alternativ:hover { color: #ff4500; font-family: Verdana,Arial,Helvetica; text-decoration: underline;} a.alternativ:active { color: #003366; font-family: Verdana,Arial,Helvetica; text-decoration: none;} /* Aussehen von besonders kleinen Links auf den Hauptseiten rechts unten (wegen anderer Hintergrundfarbe oft sinnvoll) */ a.kleinlink:link { color: #ff4500; font-family: Verdana,Arial,Helvetica; text-decoration: none; font-size:10px; } a.kleinlink:visited { color: #ff4500; font-family: Verdana,Arial,Helvetica; text-decoration: none; font-size:10px; } a.kleinlink:hover { color: #FF0000; font-family: Verdana,Arial,Helvetica; text-decoration: underline; font-size:10px; } a.kleinlink:active { color: #ff4500; font-family: Verdana,Arial,Helvetica; text-decoration: none; font-size:10px; } /* Aussehen der Bildunterschriften in Produktübersichtsseite "Produktdeatils" */ .klein { font-family: Verdana,Arial,Helvetica; color: #000000; text-decoration: none; font-size:11px; } /* Aussehen von Trennlinien in der Produktdetailansicht */ /*.trennlinie {color:#517BA8; background-color: #517BA8; height:1px; text-align:center; border:1px dotted}*/ .trennlinie {color:#517BA8; background-color: #517BA8; height:2px; text-align:center; border:1px} /* Aussehen und Anordnung des Produktbildes innerhalb des Produktbeschreibungstextes */ .produktbild { text-align: center; margin-right:8px; margin-bottom: 8px;} .produkttext { font-family: Verdana,Arial,Helvetica; color: #003399; text-decoration: none; font-size:11px; } .sortiermenu { font-family: Verdana,Arial,Helvetica; color: #003399; text-decoration: none; font-size:11px; margin-left:5px; } /* Link "vorheriges Bild" und "nächstes Bild" in der Produktdetailansicht */ a.bild:link {font-weight:normal; font-size:10px; text-decoration: none; color: #E67817;} a.bild:visited {font-weight:normal; font-size:10px; text-decoration: none; color: #E67817;} a.bild:hover {font-weight:normal; font-size:10px; text-decoration: underline; color: #E67817;} a.bild:active {font-weight:normal; font-size:10px; text-decoration: none; color: #E67817;} /* definiert die Schrift beim Produkt-Detail (Preis, Varianten) */ .preistext { font-family: Arial,Verdana,Helvetica; color: #003399; text-decoration: none; font-size:12px; } /* definiert die Überschriften auf den verschiedenen Hauptseiten */ .headline { font-family: Verdana,Arial,Helvetica; color: #ff4500; text-decoration: none; font-size:14px; text-align: left; font-weight: 600; } /* definiert die Hintergrundfarbe der Tabelle im Warenkorb und im letzten Schritt der Bestellung */ /*.warenkorbtabelle { background-color: #DCDCDC;}*/ .warenkorbtabelle { background-color: #E2EDFC;} /*.warenkorbtabelle { background-color: #B0C4DE;}*/ /* Warnhinweis bei falsch eingegebener Kundenadresse oder nicht akzeptierten AGBs*/ .warnung { font-family: Arial,Verdana,Helvetica; color: #FF3300; text-decoration: none; font-size:12px; font-weight:bold; background-color:#FFFF66;} /* Aussehen des Schriftzuges "sie sind hier" auf der Übersichtsseite über eine Produktrubrik*/ .siesindhier { font-family: Arial,Verdana,Helvetica; color: #336699; text-decoration: none; font-size:12px; } a.siesindhier:link { font-family: Arial,Verdana,Helvetica; color: #336699; text-decoration: none; font-size:12px; } a.siesindhier:visited { font-family: Arial,Verdana,Helvetica; color: #336699; text-decoration: none; font-size:12px; } a.siesindhier:hover { font-family: Arial,Verdana,Helvetica; color: #990000; text-decoration: underline; font-size:12px; } a.siesindhier:active { font-family: Arial,Verdana,Helvetica; color: #336699; text-decoration: none; font-size:12px; } /* Schriftart und Farbe für alle anderen Buttons im Shop*/ .schaltflaeche { font-family: Verdana,Arial,Helvetica; color: #517BA8; background-color: #F3F3F3; text-decoration: none; font-size:12px; font-weight: normal; border-style: outset; border-color: #517BA8; border-width: 1px;} /* Schriftart und Farbe für den Button "suchen" der Produktsuche rechts oben im Shop*/ /*.schaltflaeche1 { font-family: Verdana,Arial,Helvetica; color: #E2EDFC; background-color: #517BA8; text-decoration: none; font-size:10px; font-weight: normal; border-style: solid; border-width: 1px; border-color: #E2EDFC;}*/ .schaltflaeche1 { font-family: Verdana,Arial,Helvetica; color: #FF6600; background-color: #E2EDFC; text-decoration: none; font-size:11px; font-weight: normal; border-style: solid; border-color: #FF6600; border-width: 1px;} /* Schriftart und Farbe für die Buttons "ändern" und "entfernen im Warenkorb*/ .schaltflaeche2 { font-family: Verdana,Arial,Helvetica; color: #FF6600; background-color: #E2EDFC; text-decoration: none; font-size:11px; font-weight: normal; border-style: solid; border-color: #FF6600; border-width: 1px;} /* Schriftart und Farbe für alle anderen Buttons im Shop*/ .schaltflaeche3 { font-family: Verdana,Arial,Helvetica; color: #517BA8; background-color: #E2EDFC; text-decoration: none; font-size:12px; font-weight: normal; border-style: outset; border-color: #517BA8; border-width: 1px;} /* Aussehen des Besucherzählers und des Links zu "www.kaufmann-ag.ch" am Fuß des Shops*/ .counter { color: #D8D4D5; text-decoration:none; font-family:Arial,Verdana,Helvetica; font-size:10px; } a.counter:link { color: #D8D4D5; text-decoration:none; font-family:Arial,Verdana,Helvetica; font-size:10px;} a.counter:visited { color: #D8D4D5; text-decoration:none; font-family:Arial,Verdana,Helvetica; font-size:10px;} a.counter:hover { color: #FFFFCC; text-decoration:underline; font-family:Arial,Verdana,Helvetica; font-size:10px;} a.counter:active { color: #D8D4D5; text-decoration:none; font-family:Arial,Verdana,Helvetica; font-size:10px;} /* definiert das Aussehen von Listen und Aufzählungen*/ .liste {text-align:left; margin-left:2em; margin-top:5px; margin-bottom:5px;} /* Definition allgemeiner HTML-Elemente im Shop */ /************************************************/ /* Listen und Aufzählungen */ li {margin-left:2em; margin-top:5px; margin-bottom:5px;} /* PullDownMenüs */ select {font-size: 10px;} /* eine bestimmte Option in einem PulldownMenü */ option {margin-bottom: 2px;} /* Eingabefelder für Texte */ input {font-size: 10px; border: 1px solid #E67817;} /* horizontale HTML-Linie */ hr {margin-top:0px; margin-bottom:0px; height:0px; border:1px dashed silver; background:silver;} form {margin: 0px; padding:0px; border: 0px solid white;} /* Horizontales Menue */ /**********************/ /* LAYOUT - HEADER */ #header {background: #FFF repeat-x 0 100%; margin: 5px 0 10px; padding: 55px 0 8px; border-bottom: 1px solid #FF6600;} #header #site-name {font: 265% verdana; letter-spacing: -.05em; margin:0 0 0 40px; padding:3px 0; color:#CCC; border:none} /* NAV Horizontal - top */ #nav, #nav ul {padding: 0; margin: 0; list-style: none} #nav {font-weight:normal; height:2.09em; font: normal 96% verdana; ; margin: 0} /* Position des Horizontalen Menues */ #nav li {position:relative; background: #FFF url("../../_images/css/kago-background.gif"); float: left; width: 10em; display:block; margin: 0; border-bottom: 1px solid #003399; border-left: 1px solid #003399; padding:0} #nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none; cursor:pointer; color:#003399; display: block; padding: 4px 10px 2px} #nav a:hover {background:#003399 url("../../_images/css/kago-background-rollover.gif"); color:#FFF} /* Blau: Schriftfarbe wenn mit der Maus auf Link gezeigt wird */ /* NAV Horizontal - Unterlink */ #nav li ul {border-left: 1px solid #003399; background: #FFF no-repeat 100% 100%; width:15.8em; font-size:90%; margin-top:1px; position: absolute; font-weight:normal; left: -999em} #nav li:hover ul, #nav li.sfhover ul {left: 0; z-index:99999} #nav li li {background: url("../../_images/css/kago-background.gif"); float:none; border:none; border: 1px solid #003399; border-right:1px solid #003399; border-top:none; border-left:none; padding-left:0} #nav li li.last {border-bottom:1px solid #003399;} #nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#003399;padding: 3px 10px 2px; width:14em} #nav li li a:hover {color:#FFF; background:#003399 url("../../_images/css/kago-background-rollover.gif")} /* NAV Horizontal - Aktuell AKTIVER ausgewaehlter Link */ #nav li.active {background: #FF6600 url("../../_images/css/kago-background-orange.gif"); border-bottom: 1px solid #003399} /* Hintergrundfarbe von Aktivem Menue: Orange */ #nav li.active ul {border-left: 1px solid #003399; border-right: 1px solid #003399; background: #FFF no-repeat 100% 100%} /* Hintergrundfarbe von nicht ausgewaehlten Unterlinks im aktiven Menue */ #nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {} #nav li.active a:hover { color:#FFF} /* Weiss: Schriftfarbe wenn mit der Maus auf Link gezeigt wird */ /* NAV Horizontal - Unterlink von AKTIVEM Menue */ #nav li.active li {border:none; border-top: 0px solid #003399; border-bottom: 1px solid #003399} #nav li.active li.last {border-bottom: 1px solid #003399;} #nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#003399} /* Schriftfarbe Untermenue */ #nav li.active li a:hover {background: #003399 url("../../_images/css/kago-background-rollover.gif"); color:#FFF} #nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#003399; font-weight:normal; background: #FF6600 repeat-x 0 99%} /* Hintergrundfarbe von aktivem Untermenue-Link */ /* hide from IE mac \*/ #nav li {width:auto} /* end hiding from IE5 mac */