/*		OpenFrame CMS 		 		CSS Prototyp  				version 0.11 alpha		version 0.12 alpha	-	Gebrauchsanweisung		version 0.13 alpha	-	Neue Grundstruktur des Codes		version 0.14 alpha	-	Weitere Umstruktierung				version 0.16 alpha - Layer fuer Sprachsteuerung (#sprache) integriert		version 0.17 alpha - Layer fuer Logo integriert (#logo) und von #pageHeader getrennt			medium: -not specified-						Gebrauchsanweisung:		- Designer			-- Alle Elemente, die von einem ! angefuehrt werden, muessen im Design beruecksichtigt und definiert werden			-- Es muss dokumentiert werden (separate readme?), welche Elemente/Layers im jeweiligen Design unterstuetzt werden			-- Groessenangaben generell in em anstatt px, mit 1em = 10px; em koennen vom User skaliert werden, px nicht		*//* ________________________________ BEGINN KALIBRATION - NIEMALS AENDERN! ________________________________ */		* {			margin:0;					padding:0;					font-size:1em;		}		h1,h2,h3,h4,h5,h6 {			font-weight:normal;			}				em {		font-weight: bold;		font-style: normal;		}		#clear {			/* Universeller Clear-Layer, nach Float-Elementen anzuwenden */			clear:both;		}		body {			font-size:62.5%; /* ________________________________ ENDE KALIBRATION ________________________________ *//* ________________________________ BEGINN MINIMALVERSION - UNBEDINGT ANPASSEN ________________________________ */									/* _____ GRUNDELEMENTE TEXT _____ */			font-family: Arial, Helvetica, sans-serif;			background-color: #812900;			background-image: url("bg_body.gif");			color: #000000;/*			color: #320f01;*/		}		/* Text *//*!*/	p {		font-size: 1.5em;		margin-bottom: 0.5em;		}			/* Headlines *//*!*/	h1 {												/* nur fuer Seitenueberschrift, 1x pro Seite */		font-size: 4em;		font-weight: bold;				}	/*!*/	h2 {												/* Untertitel fuer Abschnitt, 1x pro Seite */		font-size: 2em;		font-weight: bold;		margin-bottom: 1.5em;		}		/*!*/	h3 {												/* Zwischenueberschriften: Fliesstext und Menue (FIR) */		font-size: 1.5em;		font-weight: bold;		margin-bottom: 1em;		}		/* Links im Fliesstext *//*!*/	a:link {											/* Textlink, normal */		}	/*!*/	a:visited {											/* Textlink, bereits besucht  */		}	/*!*/	a:hover {											/* Textlink, hover */		}									/* _____ LAYOUT ALLGEMEIN _____ */									/*!*/	#container {										/* allumfassender Container-Layer */		position: absolute;		left: 50%;		top: 50%;		width: 73.6em;		height: 45.2em;		margin-left: -36.8em;		margin-top: -25.1em;		}	/*!*/		#intro {										/* beinhaltet Logo bzw. Ueberschrift, Zusammenfassung und Einleitung */		position: absolute;		left: 0em;		width: 17.1em;		height: 45.0em;		border-width: 1px;		border-style: solid;		border-color: #fea331;		background-color: #6e2402;		background-image: url("bg_layer1_1px.gif");		text-align: right;		z-index:5;			}	/*!*/				#pageHeader {							/* Titel der Website bzw. Firma etc */					position: absolute;					z-index: 10;					top:42.0em;					left:2.0em;					width: 13.4em;					height: 13.9em;					border: 0px solid #676767;										}										#logo {									/* Logo */					left: 4.5em;					position: absolute;					top: 34.0em;					z-index: 20;					}				/*!*/		#supportingText {								/* Begleittext */		position: absolute;		left: 17.8em;		width: 55.2em;		height: 45.0em;		border-width: 0px;		border-style: solid;		border-color: #fea331;			}							/* ---------- Fusszeile ---------- *//*!*/		#footer {			color: #fea331;			padding-left: 0.5em;			padding-right: 0.5em;			position: absolute;						text-align: left;			top: 45.5em;			width: 71.6em;			}		/*!*/				#footer a:link {					} /*!*/				#footer a:visited {					}				/*!*/				#footed a:hover {					}		/* ---------- Copyright-Angabe mit Link zu OpenFrame ---------- */			/*!*/		#copyright {			color: #000000;			float: right;			text-align: right;			width: auto;			}/*!*/				#copyright a:link, a:visited {					text-decoration: none;					color: #000000;					} /*!*/				#copyright a:hover {					text-decoration: none;					color: #fea331;					}									/* _____ LAYOUT NAVIGATION _____ */		/* ---------- Navigationspfad ---------- *//*!*/				#navpfad {								/* "Sie befinden sich hier" */					}		/* ---------- HAUPTNAVIGATION ---------- *//*!*/				#nav1 {							/* Hauptnavigation Container-Layer, nur Lageangaben: position, margin, top, right */					position: absolute;					z-index:15;					left:1em;					top:10em;					width: 15.0em;					height: 13em;					text-align: right;					}		/*!*/						#nav1-innen {				/* Hauptnaviation Layer innen */							}		/*!*/						#nav1 ul {					/* Hauptnavigation: Ungeordnete Liste, nur Randangaben: margin, padding */							margin: 0.5em;							padding: 0px;							font-size: 1.2em;							}				/*!*/								#nav1 li {			/* Hauptnavigation: Einzelne Links, als Block definieren */									list-style-type: none;									display: block;									height:1.3em;									}						/*!*/										#nav1 li a:link {											text-decoration: none;											color: #000000;/*											color: #320f01;*/											}								/*!*/										#nav1 li a:visited {											text-decoration: none;											color: #000000;/*											color: #320f01;*/											}								/*!*/										#nav1 li a:hover {											color: #fda331;											}								/*!*/										#nav1 li a:active {											color: #fda331;											}									/* _____ LAYOUT ZUSATZELEMENTE _____ */									/* _____ LAYOUT BANNER _____ */									/*!*/		#banner1 {			}/* ________________________________ ENDE MINIMALVERSION ________________________________ *//*!*/				#quickSummary {							/* Zusammenfassung Layer */					}						/*!*/				#preamble {								/* Einleitung */					}		h4 {					}		h5 {		}		h6 {		}					#designelement {						/* Optionales Designelement, z.B. Wasserzeichen, falls Logo abweichend von #pageHeader separat bzw. fest erscheinen soll */					}/* ________________________________ BEGINN INHALT-LAYERS ________________________________ *//* ________________________________ ENDE INHALT-LAYERS ________________________________ *//* ________________________________ BEGINN NAVIGATION ________________________________ */		/* ---------- SCHNELLNAVIGATION ---------- */					#nav2 {		/* Schnellnavigation Container-Layer, nur Lageangaben: position, margin, top, right */					}									#nav2-innen {		/* Schnellnavigation Layer innen */							}		/* BEGINN AUSLAGERN */														#nav2 h3.erstermenuebereich {					/* Menue Zwischenueberschrift durch Grafik ersetzen? FIR */									background:;								}														#nav2 h3.erstermenuebereich span {				/* FIR */									display:none;									/* Don't touch! */								}							/* ENDE AUSLAGERN */									#nav2 ul {			/* Schnellnavigation: Ungeordnete Liste, nur Randangaben: margin, padding */							}													#nav2 li {			/* Schnellnavigation: Einzelne Links, als Block definieren */									}																	#nav2 li a:link {											}																			#nav2 li a:visited {											}																			#nav2 li a:hover {											}																			#nav2 li a:active {											}		/* ---------- NEBENNAVIGATION ---------- */							#nav3 {		/* Nebennavigation Container-Layer, nur Lageangaben: position, margin, top, right */					}									#nav3-innen {		/* Nebennavigation Layer innen */							}		/* BEGINN AUSLAGERN */														#nav3 h3.erstermenuebereich {					/* Menue Zwischenueberschrift durch Grafik ersetzen? FIR */									background:;								}														#nav3 h3.erstermenuebereich span {				/* FIR */									display:none;									/* Don't touch! */								}							/* ENDE AUSLAGERN */									#nav3 ul {		/* Nebennavigation: Ungeordnete Liste, nur Randangaben: margin, padding */							}													#nav3 li {		/* Nebennavigation: Einzelne Links, als Block definieren */									}																	#nav3 li a:link {											}																			#nav3 li a:visited {											}																			#nav3 li a:hover {											}																			#nav3 li a:active {											}		/* ---------- MODULNAVIGATION ---------- */				#nav4 {		/* Modulnavigation Container-Layer, nur Lageangaben: position, margin, top, right */				}								#nav4-innen {		/* Modulnavigation Layer innen */						}		/* BEGINN AUSLAGERN */														#nav4 h3.erstermenuebereich {					/* Menue Zwischenueberschrift durch Grafik ersetzen? FIR */									background:;								}														#nav4 h3.erstermenuebereich span {				/* FIR */									display:none;									/* Don't touch! */								}							/* ENDE AUSLAGERN */								#nav4 ul {		/* Modulnavigation: Ungeordnete Liste, nur Randangaben: margin, padding */						}												#nav4 li {		/* Modulnavigation: Einzelne Links, als Block definieren */								}																#nav4 li a:link {										}																		#nav4 li a:visited {										}																		#nav4 li a:hover {										}																		#nav4 li a:active {										}/* ________________________________ ENDE NAVIGATION ________________________________ *//* ________________________________ BEGINN ZUSATZELEMENTE ________________________________ */			#status {			/* Status-Layer, z.B. fuer Datum, Username etc. */			}			#steuerung {		/* Steuereinheit, z.B. Buttons fuer Druckversion, Artikel mailen etc. */			}						#sprache {			/* Auswahl der Sprache, z.B. mit Flaggensymbolen */			left: 62.0em;			position: absolute;			text-align: right;			top: -1.1em;			width: 10em;			z-index: 100;			}							#sprache a:link, a:visited {				color: #fea331;				text-decoration: none;				}								#sprache a:hover {				color: #000000;				}			#design {			/* Auswahl des Designs durch Wechseln der CSS-Datei */			}			#info {				/* Info-Layer */			}		/* BEGINN AUSLAGERN */			#extraDiv1 {		/* BlindGif-Ersatz, position:absolute; */			}	/* ENDE AUSLAGERN *//* ________________________________ ENDE ZUSATZELEMENTE ________________________________ *//* ________________________________ BEGINN MODULE ________________________________ */		/* ---------- ALLGEMEIN ---------- */			#module-kurz {				/* Layer mit ausgewählten Modul-Kurzinformationen */			}		/* ---------- LOGIN ---------- */			#login {					/* User Log In Form */			}					#whosonline {				/* Anzeige "Who is online" */			}				/* ---------- SUCHE ---------- */			#suche {					/* Schnellsuche */			}				/* ---------- NEWS ---------- */					#module-kurz-news {			/* optionale Integration im allg. Modul-Layer #module-kurz, z.B. die letzte Schlagzeile */					}				/* ---------- KALENDER ---------- */					#module-kurz-kalender {		/* optionale Integration im allg. Modul-Layer #module-kurz, z.B. die naechsten 3 Veranstaltungen */					}				/* ---------- FORUM ---------- */					#module-kurz-forum {		/* optionale Integration im allg. Modul-Layer #module-kurz, z.B. die letzten 3 Forumsbeitraege */					}/* ________________________________ ENDE MODULE ________________________________ *//* ________________________________ BEGINN BANNER ________________________________ */					#banner2 {			}	/* ________________________________ ENDE BANNER ________________________________ *//* _______________________________________________________________________________________________________ *//* ______________________________________________ RESOURCES ______________________________________________ *//* _______________________________________________________________________________________________________ *//*		Inspiration	http://www.csszengarden.com/tr/deutsch				- Zen GardenNavigation/Menus	http://builder.com.com/5100-6371-5153115.html 		- Horizontale Navigation mittels ungeordneter ListenFIR	http://www.stopdesign.com/articles/replace_text/	- Anleitung		Prinzip FIR:		- Im Fliesstext der XTHML-Datei			-- Fuer jeden Abschnitt des Fliesstextes einen <div> mit eindeutiger bzw. einmaliger ID definieren, moeglichst der Ueberschrift entsprechend			-- Ueberschrift als <h3> und mit <span> umklammern			-- Alle Absaetze mit <p class="p1"> etc fortlaufend nummerieren			-- Beispielcode:					<div id="t-wersindwir">						<h3><span>Wer sind wir?</span></h3>						<p class="p1"><span>erster absatz<span></p>						<p class="p2"><span>zweiter absatz<span></p>					</div>			-- Wenn Ueberschrift getauscht werden muss: <h3 class="swap"> und...		- ... in separater CSS-Datei, individuell fuer genau dieses Projekt (z.B. Dateiname: "projekt1_designname.css")			-- h3#t-wersindwir {background-image:url("../designelemente/title_wersindwir.gif")}	*/