﻿@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #222222;
	/*margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffuellung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: left; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #FF0000;
	color: #FFFF00;
	/*background-image: url(http://www.wugsi.com/images/Background.gif);*/
	/*font: 100% Verdana, Arial;*/
	font-size: 14px;
    }
.wugsi   #container {
  /*height: 100%;*/
	width: 85%;
	margin: 0 auto; /* Durch automatische Raender (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 5px solid #000000;
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element Ueerschrieben. */
	background-color: #000000;
	background-color: #444444;
	background-image: #url(/images/Background.gif);
    } 
.wugsi      #container  a:link   {
	color: #33CCFF;
}
.wugsi #container a:visited {
	color: #99EEFF;
}


.wugsi #Banner {
	padding: 0px 10px;
	text-align: center;
    } 
.wugsi #Banner  h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, koennen Sie das Auftreten unerwarteter Abstaende zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnoetig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auffuellung anstelle von Raendern laesst sich gewaehrleisten, dass das Element die Kanten des div nicht beruehrt. */
	text-align: center;
    }
    /* Tipps fuer sidebar1:
    1. Da wir mit relativen Einheiten arbeiten, ist es empfehlenswert, fuer die Randleiste keine Auffuellung zu verwenden. Sie wird bei standardgerechten Browsern der Gesamtbreite hinzugefuegt, und dies wiederum fuehrt zu einer unbekannten tatsaechlichen Breite. 
    2. Da der Randleistenwert in Gevierten (ems) angegeben wird, variiert die Breite der Randleiste je nach der Standardgroesse des Textes.
    3. Zwischen der Kante des div und den darin liegenden Elementen kann ein Abstand eingefuegt werden, indem Sie diesen Elementen wie in ".wugsi #sidebar1 p" demonstriert einen linken und rechten Rand zuweisen.
    */
.wugsi #Menue {
	float: left;
	width: 12em; /* Die Hintergrundfarbe wird nur fuer die Laenge des Spalteninhalts angezeigt. */
	padding: 15px 0; /* Durch die Auffuellung oben und unten entsteht in diesem div ein visueller Leerraum.  */
	text-align: center;
    }
.wugsi #Menue  p , 
.wugsi #Menue   h3 
   {
    	margin-left: 10px; /* Fuer jedes Element, das in den seitlichen Spalten platziert wird, sollten ein linker und ein rechter Rand angegeben werden. */
    	margin-right: 10px;
    }

    /* Tipps fuer mainContent:
    1. Der Abstand zwischen mainContent und sidebar1 entsteht durch den linken Rand des mainContent-div. Der Spaltenbereich bleibt unabhaengig von der Inhaltsmenge des sidebar1-div immer gleich. Sie koennen diesen linken Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 fuellen soll, wenn der Inhalt in #sidebar1 endet.
    2. Wenn ein Element im mainContent-div platziert wird, das zu breit ist, entsteht moeglicherweise ein Float-Drop (d.h. der nicht floatende mainContent-Bereich wird unter die Randleiste verschoben). Bei einem Mischlayout (prozentbasierte Gesamtbreite und em-basierte Randleiste) kann die verfuegbare Breite gegebenenfalls nicht exakt berechnet werden. Wenn die Textgroesse des Benutzers ueber dem Durchschnitt liegt, faellt das Randleisten-div breiter aus, und dementsprechend ist im mainContent-div weniger Platz verfuegbar. Sie sollten sich dieser Einschraenkung bewusst sein. Dies gilt insbesondere, wenn der Kunde Inhalte mit Contribute hinzufuegt.
    3. Im unten stehenden bedingten Kommentar fuer Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch koennen moeglicherweise verschiedene IE-spezifische Fehler verhindert werden.
    */
    .wugsi #Hauptfenster{
	margin: 0 20px 0 13em;
    } 
.wugsi #Hauptfenster  h1 {
	text-align: center;
}

.wugsi #Fusszeile {
	padding: 0 10px;
	background-color: #000099;
    } 
   .wugsi #Fusszeile  p {
    	margin: 0; /* Wenn Sie die Raender des ersten Elements in der Fusszeile auf 0 einstellen, koennen Sie unerwartete Abstaende zwischen divs vermeiden. */
    	padding: 10px 0; /* Durch die Verwendung der Auffuellung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
.Link      {
	font-size: 24px;
	font-weight: bold;
	line-height: 70px;
	border: thick ridge #00FF00;

}
.Beschreibung {
	margin-left: 54px;
}
.Courier {font-family: "Courier New", Courier, monospace}


    
    /* Verschiedene wieder verwertbare Klassen */
    .fltrt { /* Mit dieser Klasse koennen Sie ein Element auf der Seite nach rechts fliessen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse koennen Sie ein Element auf der Seite nach links fliessen lassen. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schliessen eines Containers sein, der wiederum einen vollstaendigen Float enthalten sollte. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
