/*********************************************************************************************** Style-Overrides für Virtuemart ***********************************************************************************************/ /*Info- und Fehlerboxen*/ .shop_info, .shop_tip, .shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip { background-color: orange; border: none; } ul, li {list-style-type:none;padding-left: 0em;} .vmCartModule a:link {color: #555;text-decoration: none; font-weight:bold;} /*Stil der unbesuchten Links für menu_links*/ .vmCartModule a:visited {color: #555;text-decoration: none; font-weight:bold;} /*Stil der besuchten Links für menu_links*/ /*Virtuemart Hauptseite*/ #vmMainPage h2{ color:orange;} /*Styling des Menüs mit dem Suffix _shop (außen, NICHT einzelne Menüpunkte! Im Modul Virtuemart Product Categories muss Tigratree als Darstellung eingestellt sein!/ /*Der suffix _shop muss im Backend beim Menümodul als "Menü-Klassen-Suffix" angegeben sein! (-> Erweiterte Parameter)*/ /*Gesamtes Menü*/ .mainlevel_shop { margin: 0px; /*Rand des Menüs*/ padding: 1px 0 0; /*Abstand zu Inhalt*/ background: url(../images/hg_menue.gif); /*Hintergrundgrafik für Hauptmenüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ line-height: 120%; /*Zeilenhöhe der Menüpunkte*/ color:#555; font-size: 100%; list-style-type:square; } /*Abstand für Bilder*/ .contentpaneopen img {padding: 0px;} /*Styling Login-Modul Virtuemart*/ .moduletable_links { color:#555; list-style-type:none; padding: 5px; border: 0px dotted; background-color: #e90; } .moduletable_links a:link {color:#555; font-weight: normal;} .moduletable_links a:visited{color:#555; font-weight: normal;} .moduletable_links a:active{color:#555; font-weight: normal;} .moduletable_links a:hover {color:yellow; font-weight: normal;} .moduletable_links li {list-style-type:none;} /************************************************************************************************ Hilfselemente ************************************************************************************************/ /*ALLE (*) Ränder und Abstände zunächst auf 0 setzen*/ * { margin:0; padding:0; } /*Fakespalte bis nach ganz unten*/ #fauxcol_li { background: url(../images/faux.png); background-repeat: repeat-y; background-position: 24% 0%; } /*Genereller Abstandshalter zwischen Containern in Pixeln*/ .abstand {padding:10px;} .abstand2 {padding:10px;} /*Bilderlinks ohne Rahmen zeichnen*/ img {border:0;} /*Firefox Scrollbar Hack. Fügt auch bei kurzen Seiten einen Scrollbalken ein*/ html {height: 100%; margin-bottom: 1px; } /************************************************************************************************ Allgemeine Stylings ************************************************************************************************/ /*Abstände Außen für Überschriften (h), Absätze (p), Zitiersatz (blockquote), Formulare (form), Formularbeschriftungen (label) */ /*unsortierte/sortierte/definierte Listen (ul, ol, dl), textfelder (fieldset), Adressen ( address)*/ h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address { margin:0em ; } p { text-decoration: none; text-align: justify; } /*Abstände Links (=Einrückung) für Listenelemente (li) und Elemente definierter Listen (dd): */ li,dd { margin-left:0em; } /*Formular-Gruppe*/ fieldset { padding:0.5em; border: none; } /*Eingabefeld generell (ohne suffix ), z. B. für Kontaktformular*/ .inputbox { border:solid; border-width: 1px; color:#555; } /*Eingabefeld mit suffix _suche (ist im Modul unter Modulparameter/Modul-Suffix einzugeben)*/ .inputbox_suche { border: 1px solid; color:gray; width:50px; padding-right: 30%; float:left; font-size:16px; } /*Styling des Buttons*/ input.button_suche { color:gray; background-color:#DC9214; font-weight:bold; font-size: 15px; border:1px solid; } /*Styling des gesamten Suchfeldes*/ .search_suche { padding-left: 37px; } /************************************************************************************************ Styling der Joomla-Spezifischen Klassen ************************************************************************************************/ /*Klasse für die Komponenten*/ /*contentpane wird von einigen Komponenten benutzt, contentpaneopen z. B. für die Inhaltskomponente. Daher: gleich stylen!*/ .contentpane, .contentpaneopen { margin: 10px;} /*Klasse für Überschrift der Komponenten*/ .componentheading { font-size: 180%; font-weight: bold; margin-top: 0em; line-height: 100%; margin-bottom: 0em; color:orange; } /*Klasse für Komponentennamen*/ .contentheading { font-weight: bold; color: #555; } /*Styling des Weiterlesen-Links*/ a.readon:link, a.readon:visited { font-weight: bold; } /*Styling des Standard-Containers der Module, die mit style=xhtml aufgerufen werden */ .moduletable { margin:0em; /*Rand*/ border:0px; /*Eventuell Rahmen*/ padding:0 5px; } /*Styling für den Kopf der Kategorieliste ("# Beitragstitel") */ /*Styling für die Einträge in der Kateorieliste (Joomla!-Standard) : separat für gerade und ungerade Zeilen*/ /*Und der Tabellen, in denen die Einträge stehen*/ .sectiontableheader{ /*Kopf Kategorieliste Schrift*/ color:black; font-weight: bold; margin-right: 1em; font-size: 100%; text-align:center; } tr.sectiontableheader td, td.sectiontableheader { /*Kopf Kategroieliste Tabellenzelle*/ padding-right:0 1em 1em 0; } /*Stylings für Zeilen genereller Tabellen(von mehreren Komponenten genutzt! z. B. Virtuemart). Styling für ungerade und gerade Zeilen separat.*/ .sectiontableentry1{ /*Ungerade Einträge Kategorieliste Schrift*/ font-weight: bold; font-size: 100%; } tr.sectiontableentry1 td , td.sectiontableentry1 { /*Ungerade Einträge Kategorieliste Tabellenzelle*/ padding: 2px; background-color: none; } .sectiontableentry2{ /*Gerade Einträge Kategorieliste Schrift*/ font-weight: bold; background-color: none; font-size: 100%; } tr.sectiontableentry2 td , td.sectiontableentry2 { /*Ungerade Einträge Kategorieliste Tabellenzelle*/ padding:2px; background-color: none; } /*Klasse für Breadcrumbs*/ .pathway { font-size: 85%; } .pathway a:link{color: #555; font-size: 85%;} .pathway a:visited{color: #555; font-size: 85%;} .pathway a:hover{color: #555; font-size: 85%;} /************************************************************************************************ Styling der allgemeinen Schriften, Links etc. ************************************************************************************************/ /*Standardschrift und Standard-Zeilenhöhe*/ body { font-size:76%; /*Schriftgröße*/ background-image: url(../images/hintergrund.png); /*Hintergrundgrafik laden*/ background-repeat: repeat-x; /*Hintergrundgrafik nebeneinanderlegen*/ margin: 0px 0px 0px 0px; /*Randabstände der gesamten Seite*/ font-family: Verdana,Arial,sans-serif; /*Schriftarten (erwünschte und optionale)*/ color: #555; /*Schriftfarbe*/ line-height: 1.3em; /*Zeilenhöhe in em=Einheiten; 1 Einheit=1Buchstabe*/ } /*Überschriften h1 (größte) bis h6 (kleinste)*/ h1 {font-size: 180%;font-weight: bold;margin-top: 0em;line-height: 180%; margin-bottom: 10px; color:orange; } h2 {font-size: 180%;font-weight: bold;margin-top: 0em;line-height: 100%; margin-bottom: 0em; color:black; } h3 {font-size: 180%;font-weight: bold;margin-top: 0em;line-height: 180%; margin-bottom: 10px; color:orange; } /*Sind auch die Kategorieüberschriften für VirtueMart*/ h4 {font-size: 100%;font-weight: bold;margin-top: 0em;line-height: 100%; margin-bottom: 0em; color:orange; } /*Sind auch die Kategorieüberschriften für VirtueMart*/ h5 {font-size: 76%;margin: 1.2em 0em 1.2em 0em;font-weight: bold;} h6 {font-size: 68%;margin: 1.2em 0em 1.2em 0em;font-weight: bold;} /*Stil der Links = auch der Menüelemente, falls diese nicht separat definiert sind! */ a:link {color: orange;text-decoration: none; font-weight:bold;} /*Stil der unbesuchten Links*/ a:visited {color: orange;text-decoration: none; font-weight:bold;} /*Stil der besuchten Links*/ a:hover {color: gray;text-decoration: none; font-weight:bold;} /*Stil, wenn Maus über Link ist*/ a:active {color: #555;text-decoration: none; font-weight:bold;} /*Stil während des Klickens*/ a:focus {background-color: none;text-decoration: none;} /*Stil beim Auswählen mit Tabulator*/ /************************************************************************************************ Styling des Menüs mit dem Suffix _oben Muss im Backend beim Menümodul als "Menü-Klassen-Suffix" angegeben sein! (-> Erweiterte Parameter) ************************************************************************************************/ /*Styling des Menüs mit dem Suffix _oben (außen, NICHT einzelne Menüpunkte!*/ /*Gesamtes Menü*/ .menu_oben { line-height: 100%; /*Zeilenhöhe der Menüpunkte*/ font-size: 90%; /*Schriftgröße für Menü*/ margin: 0; /*Rand des Menüs*/ padding: 1px 0 0; /*Abstand zu Inhalt*/ list-style-type: none; /*Aufzählungszeichen für Hauptmenüpunkte ausschalten*/ background: url(../images/hg_me nue.gif); /*Hintergrundgrafik für Hauptmenüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ } /*Styling der Hauptmenüpunkte für menu_oben*/ .menu_oben li { font-size: 90%; /*Schriftgröße für Menü*/ padding-left: 0px; /*Einrückung der Untermenüpunkte*/ list-style-type: none; /*Aufzählungszeichen für Untermenüpunkte ausschalten*/ background: url(../images/hg_men ue.gif); /*Hintergrundgrafik für Untermenüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ display:inline; /*Menüpunkte nebeneinander statt untereinander*/ margin-left: 1em; /*Abstand zwischen einzelnen Menüpunkten*/ } /*Styles für die aktiven Menüpunkte*/ .menu_oben #current { } /*Styles der Links (Verweise) für menu_oben*/ .menu_oben a:link {color: yellow;text-decoration:none; font-weight:bold;} /*Stil der unbesuchten Links für menu_oben*/ .menu_oben a:visited {color: yellow;text-decoration: none;font-weight:bold;} /*Stil der besuchten Links für menu_oben*/ .menu_oben a:hover {color: orange;text-decoration: none;font-weight:bold;} /*Stil, wenn Maus über Link ist für menu_oben*/ .menu_oben a:active {color: black;text-decoration: none;font-weight:bold;} /*Stil während des Klickens für menu_oben*/ .menu_oben a:focus {background-color: none;text-decoration: none;} /*Stil beim Auswählen mit Tabulator für menu_oben*/ /************************************************************************************************/ /*Styling des Menüs mit dem suffix _links */ /*Muss im Backend beim Menümodul als "Menü-Klassen-Suffix" angegeben sein! (-> Erweiterte Parameter)*/ /************************************************************************************************/ /*Styling des Menüs mit dem Suffix _links (außen, NICHT einzelne Menüpunkte!*/ /*Gesamtes Menü*/ .menu_links { margin: 0px; /*Rand des Menüs*/ padding: 1px 0 0; /*Abstand zu Inhalt*/ background: url(../images/hg_menue.gif); /*Hintergrundgrafik für Hauptmenüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ line-height: 120%; /*Zeilenhöhe der Menüpunkte*/ list-style-type:none; } /*Styling der Hauptmenüpunkte für menu_links*/ .menu_links li { padding-left: 0px; /*Einrückung der einzelnen Menüpunkte*/ padding-top: 3px; /*Abstand oben für einzelne Menüpunkte*/ padding-bottom: 3px; /*Abstand unten für einzelne Menüpunkte*/ list-style-type: none; /*Aufzählungszeichen für einzelne Menüpunkte an- oder ausschalten*/ background: url(../images/hg_menue.gif); /*Eventuell Hintergrundgrafik für einzelne Menüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ border-bottom:1px dotted #555; /*Eventuell Rahmen*/ background-color:none; /*Hintergrundfarbe für einzelne Menüpunkte*/ } /*Styling der Untermenüpunkte für menu_links*/ .menu_links li li { padding-left: 0px; /*Einrückung der einzelnen Menüpunkte*/ padding-top: 3px; /*Abstand oben für einzelne Menüpunkte*/ padding-bottom: 3px; /*Abstand unten für einzelne Menüpunkte*/ list-style-type: square; /*Aufzählungszeichen für einzelne Menüpunkte an- oder ausschalten*/ background: url(../images/hg_menue.gif); /*Eventuell Hintergrundgrafik für einzelne Menüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ border-top:1px dotted #555; /*Eventuell Rahmen oben! Unten ist bereits Rahmen für */ border-bottom:none; /*Rahmen unten würde von Elternelement (li) übernommen, also löschen!*/ margin-left:2em; /*Einrückung der Unteremnüpunkte*/ } /*Styles für die aktiven Menüpunkte für menu_links*/ .menu_links #current { background-image: url(../images/active_menue.gif); /*Hintergrundgrafik für aktiven Menüpunkt laden*/ background-repeat: repeat-y; /*Hintergrundgrafik wiederholen*/ } /*Styles der Links (Verweise) für menu_links*/ .menu_links a:link {color: #555;text-decoration: none; font-weight:bold;} /*Stil der unbesuchten Links für menu_links*/ .menu_links a:visited {color: #555;text-decoration: none; font-weight:bold;} /*Stil der besuchten Links für menu_links*/ .menu_links a:hover {color: yellow;text-decoration: none; font-weight:bold;} /*Stil, wenn Maus über Link ist für menu_links*/ .menu_links a:active {color: #555;text-decoration: none; font-weight:bold;} /*Stil während des Klickens für menu_links*/ .menu_links a:focus {background-color: none;text-decoration: none;} /*Stil beim Auswählen mit Tabulator für menu_links*/ /*Styling der Hauptmenüpunkte für menu_links*/ .mainlevel_shop li { padding-left: 0px; /*Einrückung der einzelnen Menüpunkte*/ padding-top: 3px; /*Abstand oben für einzelne Menüpunkte*/ padding-bottom: 3px; /*Abstand unten für einzelne Menüpunkte*/ list-style-type: none; /*Aufzählungszeichen für einzelne Menüpunkte an- oder ausschalten*/ background: url(../images/hg_menue.gif); /*Eventuell Hintergrundgrafik für einzelne Menüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ border-bottom:1px dotted #555; /*Eventuell Rahmen*/ background-color:none; /*Hintergrundfarbe für einzelne Menüpunkte*/ } /*Styling der Untermenüpunkte für menu_links*/ .mainlevel_shop li li { padding-left: 0px; /*Einrückung der einzelnen Menüpunkte*/ padding-top: 3px; /*Abstand oben für einzelne Menüpunkte*/ padding-bottom: 3px; /*Abstand unten für einzelne Menüpunkte*/ list-style-type: square; /*Aufzählungszeichen für einzelne Menüpunkte an- oder ausschalten*/ background: url(../images/hg_menue.gif); /*Eventuell Hintergrundgrafik für einzelne Menüpunkte*/ background-repeat: repeat-x; /*Hintergrundgrafik wiederholen*/ border-top:1px dotted #555; /*Eventuell Rahmen oben! Unten ist bereits Rahmen für */ border-bottom:none; /*Rahmen unten würde von Elternelement (li) übernommen, also löschen!*/ margin-left:2em; /*Einrückung der Unteremnüpunkte*/ } /*Styles für die aktiven Menüpunkte*/ .mainlevel_shop #current { background-image: url(../images/active_menue.gif); /*Hintergrundgrafik für aktiven Menüpunkt laden*/ background-repeat: repeat-y; /*Hintergrundgrafik wiederholen*/ } /*Styles der Links (Verweise) für menu_links*/ .mainlevel_shop a:link {color: #555;text-decoration: none; font-weight:normal;} /*Stil der unbesuchten Links für menu_links*/ .mainlevel_shop a:visited {color: #555;text-decoration: none; font-weight:normal;} /*Stil der besuchten Links für menu_links*/ .mainlevel_shop a:hover {color: yellow;text-decoration: none; font-weight:normal;} /*Stil, wenn Maus über Link ist für menu_links*/ .mainlevel_shop a:active {color: #555;text-decoration: none; font-weight:normal;} /*Stil während des Klickens für menu_links*/ .mainlevel_shop a:focus {background-color: none;text-decoration: none;} /*Stil beim Auswählen mit Tabulator für menu_links*/ /**********************************************************************************************/ /*Styling der Container */ /*Die Container enthalten die einzelnen Modulpositionen. */ /*Diese müssen in der templateDetails.xml unter angemeldet werden. */ /**********************************************************************************************/ /*Container für den Schattenwurf rechts*/ #schatten { background-image: url(../images/schatten.png); /*Hintergrundgrafik bzw. transparentes Overlay laden, falls vorhanden*/ background-position: top right; /*Bild oben rechts positionieren*/ background-repeat: repeat-y; /*Hintergrundgrafik bzw. transparentes Overlay in Y wiederholen*/ min-width:780px; /*Minimale Breite des gesamten Inhalts plus Breite des Schatten*/ max-width:980px; /*Maximale Breite des gesamten Inhalts plus Breite des Schattens*/ width:auto !important; /*Zentrieren des gesamten Inhaltscontainers*/ text-align:left; /*IE6 kennt margin 10% 100% nicht, daher müssen diese*/ margin:0 auto; } /*Der Hauptcontainer mit minimaler und maximaler Breite*/ #wrap { min-width:760px; /*Minimale Breite des gesamten Inhalts*/ max-width:960px; /*Maximale Breite des gesamten Inhalts*/ width:auto !important; /*Zentrieren des gesamten Inhaltscontainers*/ text-align:left; /*IE6 kennt margin 10% 100% nicht, daher müssen diese*/ margin:0 auto; /*drei Zeilen eingefügt werden*/ } /*Der Kopf ist das Elternelement der Container gelb, orange, grau, rot*/ #kopf { width:100%; height:190px; background-color: #aaa; background-image: url(../images/kopf.jpg); background-repeat: no-repeat; overflow: hidden; } /*Container gelb linker Teil, Elterncontainer von gelb_rechts*/ #gelb_links { position:relative; /*Relativen Verschub zum Elternelement*/ top:50px; /*Position Y relativ zum Elternelement*/ left:10px; /*Position X relativ zum Elternelement*/ min-width:740px; /*Minimale Breite des gesamten Balkens abzüglich 2xPadding*/ max-width:960px; /*Maximale Breite des gesamten Balkens*/ height:103px; /*Höhe der Graphik abzüglich 2xPadding*/ padding:10px 0px 10px 10px; /*Abstand zwischen Außenrand und Inhalt: Oben, Rechts, Unten, Links*/ margin: 0px 30px 0px 10px; /*Abstand der Ränder vom Bildschirmrand: Oben, Rechts, Unten, Links*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ background-image: url(../images/gelb_links.gif); /*Hintergrundgrafik laden*/ background-repeat: no-repeat; /*Keine Wiederholung der Grafik*/ background-position: top left; /*Grafik links ausrichten*/ z-index: 1; /*Lage der Container. Höhere Zahl=weiter vorne*/ } /*Container gelb rechter Teil, die Container-Divs werden "ineinandgeschoben", um eine variable Breite zu erhalten.*/ #gelb_rechts { position:relative; /*Relativen Verschub zum Elternelement*/ top:-10px; /*"natürlichen" Vorschub ausgleichen*/ height:103px; /*Höhe der Graphik abzüglich 2xPadding*/ padding:10px 10px 10px 0px; /*Abstand zwischen Außenrand und Inhalt: Oben, Rechts, Unten, Links*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ background-image: url(../images/gelb_rechts.gif);/*Hintergrundgrafik laden*/ background-repeat: no-repeat; /*Keine Wiederholung der Grafik*/ background-position: top right; /*Grafik rechts ausrichten*/ z-index: 1; /*Lage der Container. Höhere Zahl=weiter vorne*/ } /*Container orange*/ #orange { position:relative; /*Relativen Verschub zum Elternelement*/ top:-120px; /*Position Y relativ zum Elternelement*/ left:76%; /*Position X relativ zum Elternelement*/ width:157px; /*Breite der Graphik abzüglich 2xPadding*/ height:63px; /*Höhe der Graphik abzüglich 2xPadding*/ padding:10px; /*Abstand zwischen Außenrand und Inhalt */ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ background-image: url(../images/orange.gif); /*Hintergrundgrafik laden*/ background-repeat: no-repeat; /*Keine Wiederholung der Grafik*/ z-index: 2; /*Lage der Container. Höhere Zahl=weiter vorne*/ } /*Container grau*/ #grau { position:relative; /*Relativen Verschub zum Elternelement*/ top:-165px; /*Position Y relativ zum Elternelement*/ left:66%; /*Position X relativ zum Elternelement*/ width:235px; /*Breite der Graphik abzüglich 2xPadding*/ height:126px; /*Höhe der Graphik abzüglich 2xPadding*/ padding:10px; /*Abstand zwischen Außenrand und Inhalt */ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ background-image: url(../images/grau.gif); /*Hintergrundgrafik laden*/ background-repeat: no-repeat; /*Keine Wiederholung der Grafik*/ z-index: 4; /*Lage der Container. Höhere Zahl=weiter vorne*/ } /*Container rot*/ #rot { position:relative; top:-340px; /*Position Y relativ zum Elternelement*/ left:55%; /*Position X relativ zum Elternelement*/ width:192px; /*Breite der Graphik abzüglich 2xPadding*/ height:29px; /*Höhe der Graphik abzüglich 2xPadding*/ padding:10px; /*Abstand zwischen Außenrand und Inhalt */ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ background-image: url(../images/rot.gif); /*Hintergrundgrafik laden*/ background-repeat: no-repeat; /*Keine Wiederholung der Grafik*/ z-index: 3; /*Lage der Container. Höhere Zahl=weiter vorne*/ } /*Zeile unter dem Kopf*/ #oben { width:50%; /*#oben, #oben_mi und #oben_re müssen zusammen 100% sein!*/ height:33px; /* Höhe*/ background-color: #999; /*Hintergrundfarbe der Menüzeile*/ border-bottom: 0px dotted; /*Linie am unteren Rand der Zeile*/ float:left; display:inline; } #oben_mi { width:0%; /*#oben, #oben_mi und #oben_re müssen zusammen 100% sein!*/ height:33px; /* Höhe*/ background-color: #999; /*Hintergrundfarbe der Menüzeile*/ border-bottom: 0px dotted; /*Linie am unteren Rand der Zeile*/ float:left; } /*Zeile unter dem Kopf, rechts*/ #oben_re { width:50%; /*#oben, #oben_mi und #oben_re müssen zusammen 100% sein!*/ height:33px; /*Höhe*/ background-color: #999; /*Hintergrundfarbe der Menüzeile*/ border-bottom: 0px dotted; /*Linie am unteren Rand der Zeile*/ float:left; text-align:right; } /*Brotkrumen*/ #brotkrumen { /*Brotkrumen (Navigationshilfe)*/ /*Eventuelle float-Styles vom Header ausschalten*/ width:100%; /*Breite in Bezug auf Elternelement (100%)*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ font-weight:bold; /*Schrift fett*/ background-color:#ccc; /*Hintergrundfarbe*/ float:left; height:33px; } #brotkrumen_re { width:0%; /*Breite in Bezug auf Elternelement (100%)*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ font-weight:bold; /*Schrift fett*/ background-color:#ccc; /*Hintergrundfarbe*/ text-align:right; height:33px;} /*Spalte links von Content*/ #links { clear:both; /*Eventuelle float-Styles vom Header ausschalten*/ float:left; /*Nebeneinand und linksbündig ausgerichtet*/ width:24%; /*Breite in Prozent des im Elterncontainer verfügbaren Platzes*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ } /*Hauptcontainer für Content*/ #content { background-color:white; /*Hintergrundfarbe*/ float:left; /*Nebeneinand und linksbündig ausgerichtet*/ width:76%; /*Breite in Prozent des im Elterncontainer verfügbaren Platzes*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ } /*Spalte rechts von Content*/ #rechts { float:left; /*Nebeneinand und linksbündig ausgerichtet*/ width:0%; /*Breite in Prozent des im Elterncontainer verfügbaren Platzes*/ overflow:hidden; /*Inhalt darf Container nicht "sprengen"*/ } /*Zeile unter dem Content*/ #unten { background-color: #ccc; /*Darf nicht durchscheinend sein, da rechter Spaltenhintergrund (Fakespalte) sonst durchscheint*/ clear:both; /*Dieser befehl hebt das Float wieder auf, damit sich die untere Zeile über die gesamte Länge erstreckt */ background-image: url(../images/schatten_u.png); background-repeat: repeat-x; background-position:bottom; } /*Dies sind die Styles für die Newsletter-Komponente*/ #nl_oben { background-image: url(http://www.kirchert.com/modellbau/images/nl_oben.png); background-repeat: no-repeat; height: 160px; width: 638px; } #nl_mitte { background-image: url(http://www.kirchert.com/modellbau/images/nl_mitte.png); background-repeat: repeat-y; padding-left: 10px; padding-right: 80px; width: 638px; } #nl_trenner { background-image: url(http://www.kirchert.com/modellbau/images/nl_trenner.png); background-repeat: repeat-y; padding-left: 10px; padding-right: 80px; width: 638px; } #nl_unten { width:100%; background-image: url(http://www.kirchert.com/modellbau/images/nl_unten.png); background-repeat: no-repeat; padding-left: 10px; padding-right: 80px; height: 26px; width: 638px; }