/* Stylesheet v1.0 für fis-online.de - 20.12.2006 - Tobias Brummer

Dieses Stylesheet ist gemäß dem CSS Validator von W3.org (http://jigsaw.w3.org/css-validator/) nach dem CSS3 Standard validiert und hat diesen Test ohne Fehler und Warnungen bestanden */

/* BODY:

Dieser Tag definiert die Hintergrundfarbe der Internetseite. Man kann hier auch zusätzlich einige andere Angaben machen, wie z.B. Schriftart, Schriftgröße, usw. Diese werden auf alle anderen Tags vererbt, wenn diese keine eigene Angaben dafür haben. 

Die a: Tags beschreiben das verhalten der Links auf der gesamten Internetseite, solang nicht in einem eigenen Tag anders definiert. Man kann hier also beschreiben, wie die Farbe der Links sein soll (a:link	{color: #000;}, welche Farbe besuchte Links haben sollen (a:visited	{color: #000;} und welche Farbe die Links haben sollen, wenn man darauf zeigt (a:hover	{color: #000;}.

Grundsätzliches:

- Farben die 2 gleiche Stellen haben, also z. B. #112233, kann man einfach als #123 abkürzen.
- Wenn man eine Farbe angibt, sollte man eine Hintergundfarbe mit angeben. Wenn keine gewünscht ist, sollte man den Befehl "inherit" nehmen. Dieser lässt den Tag die (Hintergund-)Farbe des Elternteils erben, also meist des Body Tags. 
- Manche Dinge sollte man nicht einfach weglassen, selbst wenn man sie nur mit "none" definiert, weil evtl. sonst ungewünschte Ergebnisse auftreten, wenn etwas vererbt wird. 

Die Struktur der Tags sollte immer gleich sein. Hier mal ein Beispiel:

.beispiel	{
	color: #000;
	background-color: #000;
	__ oder __
	background-image: url(/beispiel.png); 
	background-repeat: repeat;
	
	position: fixed;
	z-index: 1;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px
	
	width: 50%;
	height: 50%;
	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
	font: 60pt Helvetica, sans-serif;
	clear: both;
	text-decoration: none;
	letter-spacing: 0.5pt;
	text-align: center;
	line-height: 10px;
	
	display: block;
	
	list-style: none; 
	white-space: nowrap;
	
*/

body	{
	color: #000;
	background-color: #C3C3C3;
}

a:link, a:visited	{
	color: #3d3d3d;
	background-color: inherit;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 13px;
	text-decoration: none;
}

a:hover	{
	color: #797979;
	background-color: #f3f3f3;

	text-decoration: none;
}

/* HEADER:

Diese Tags stellen den Header dar. .space ist eine Fläche ganz oben, die etwas Platz zwischen dem Rand der Internetseite und .logo und .gradient lässt. .logo ist das Logo. .gradient ist der Farbverlauf, der sich hinter dem Menü und dem Logo befindet. .shadow ist der Schatten am unteren Ende des Headers. z-index: 3; gibt die Ebene der Grafik, des Texts o. ä. an, d.h. z-index: 0; ist die hinterste Ebene. Alles was >0 ist, liegt über der Hintergrundebene */

.space	{ 
	color: inherit;
	background-color: #efefef;

	position: fixed;
	z-index: 3;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 21px;
}

.logo	{ 
	background-image: url(../images/logo.png); 
	
	position: fixed; 
	z-index: 4; 
	top: 13px; 
	left: 26px; 
	
	width: 117px;
	height: 78px;
}

.gradient	{ 
	background-image: url(../images/bg.png); 
	
	position: fixed; 
	z-index: 3; 
	top: 21px; 
	left: 0px; 
	
	width: 100%;
	height: 76px;
}

.shadow	{ 
	background-image: url(../images/schatten.png); 
	background-repeat: repeat-x;
	
	position: fixed; 
	z-index: 3; 
	top: 97px; 
	left: 0px; 
	
	width: 100%;
	height: 50px;
}

/* IMPRINT:

Diese Tags beschreiben das Impressum. Sie machen im Grunde genau das selbe wie die des Headers */

.flag	{
	background-image: url(../images/deutsch.png);
	background-repeat: no-repeat;

	position: fixed;
	z-index: 5;
	bottom: 0px;
	left: 0px;

	width: 50px;
	height: 13px;
	
	padding-left: 221px;
}

.imprint	{ 
	color:#acacac;
	background-color: #111;

	position: fixed; 
	z-index: 3; 
	bottom: 0px; 
	left: 0px;
	
	width: 100%;
	height: 13px;

	padding-left: 221px;
	
	font: 10px Helvetica, sans-serif;
	clear: both;
	letter-spacing: 0.5pt;
}

.imprint a:link, .imprint a:visited	{
	color: #dedede;
	background-color: inherit;
	
	font: 10px Helvetica, sans-serif;
	clear: both;
	letter-spacing: 0.5pt;
	
	text-decoration: none;
}

.imprint a:hover	{
	color: #7a7a7a;
	background-color: inherit;

	text-decoration: none;
}

/* MENU:

Diese Tags bilden das Menü. Es ist so konstruiert, dass man ohne Probleme einen Menüpunkt in der HTML Datei hinzufügen kann */

#menu	{
	position: fixed;
	z-index: 4;
	top: 76px;
	left: 219px;

	width: 100%;
	height: 13px;

	font: bold 12pt Helvetica, sans-serif;
	clear: both;
}

#menu ul	{
	margin: 0;
	padding: 0;
		
	list-style-type: none;
} 

#menu li	{
	padding: 0;
	margin: 0;

	float: left;
	text-align: left;
}

#menu a, #menuselected a	{
	color: #3d3d3d;
	background-color: inherit;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 13px;
	
	padding: 1px 10px 1px 1px;

	text-align: left;
	text-decoration: none;
}  

#menu a:hover	{
	color: #797979;
	background-color: #f3f3f3;
}

/* HEAD:

Dieser Tag hat die Funktion, den oberen Bereich der Internetseite etwas nach unten zu verschieben um zu umgehen, dass Text hinter den Header kommt. 

ACHTUNG: WIRD IM INTERNET EXPLORER < 7 NICHT BENÖTIGT!!! */

#head	{
	width: 100%;
	height: 111px;
}

/* HEADINGS:

h1 ist eine Überschrift. Man kann sie sehr einfach benutzen, einfach in der HTML Datei schauen. Bei Bedarf nach mehr Überschriften, einfach h1 kopieren, unterhalb einfügen, in h2 umbennen und wie gewünscht anpassen. So kann man es für weitere Überschriften auch machen */

h1	{
	color: #005b9d;
	background-color: inherit;

	margin-bottom: 24px;

	font: bold 11pt Helvetica, sans-serif;
	clear: both;
}

/* PAGENAME:

#pageName definiert den Namen der Seite, der Links angezeigt wird */

#pageName	{
	position: fixed;
	z-index: 3;
	
	left: 25px;
}

/* CONTENT:

.content beschreibt wie der Inhalt der Internetseite dargestellt werden soll. .content p steuert das verhalten des <p> Befehls für einen neuen Absatz */

.content	{
	margin: 0px 101px 21px 212px;
	padding-bottom: 2px;
	
	font: 9pt Helvetica, sans-serif;
	clear: both;
	text-align: justify;
	line-height: 13px;
	width: 550px;
}

.content p	{
	padding: 0px 0px 1px 0px;
}

.content ul	{
	padding-bottom: 1px;

	list-style: square;
}


/* NAVBAR:

#navBar ist die Navigationsleiste links auf den Produktseiten. Dieser Bereich ist in jeder HTML Datei vorhanden, nur in einem Kommentar ausgeblendet. Wenn dieser Bereich benötigt wird, einfach in der HTML Datei die Kommentar Tags entfernen */

#navBar ul a:link, #navBar ul a:visited	{
	display: block;
	
	list-style: none;
}

#navBar ul	{
	margin: 0; 
	padding: 0;
	
	list-style: none; 
}

#sectionLinks	{
	color: #3d3d3d;
	background-color: inherit;
	
	position: fixed;
	z-index: 3;
	top: 165px;
	left: 21px;

	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
}

#sectionLinks a:link, #sectionLinks a:visited	{
	color: #3d3d3d;
	background-color: inherit;

	padding: 0px 13px 0px 5px;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
	text-decoration: none;
}

#sectionLinks a:hover	{
	color: #797979;
	background-color: #f3f3f3;
}

#sectionLinks br	{
	heigth: -50px;	
}

/* SPACER:

Dieser Tag ist nur ein Abstandhalter für Seiten, bei denen es keine Überschrift gibt. Somit wird sichergestellt, dass der Content richtig ausgerichtet wird */

.spacer	{
	height: 40px;
}

/* IMAGE:

Dieser Tag wird eingesetzt, wenn ein Bild eingefügt werden soll. Er sagt diesem, wie es sich auszurichten hat */

#image	{
	padding: 11px 0px 1px 1px;
}

/* CONTACT:

Die folgenden Tags definieren das Aussehen der Elemente des Kontaktformulars */

textarea	{
	color: #000;
	background-color: #fff;
	
	height: 334px;
	width: 329px;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
	
	margin: -2px 0px -2px 1px;
	padding: 2px 2px 0px 5px;
	
	border: 1px dotted #000;
}

input	{
	color: #000;
	background-color: #fff;
	
	height: 19px;
	width: 331px;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
	
	margin: -2px 0px 2px 1px;
	padding: 5px 0px 0px 5px;
	

	border: 1px dotted #000;
}

.send	{
	color: #000;
	background-color: transparent;
	
	height: 19px;
	width: auto;

	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
	
	margin: -4px 0px 0px -2px;
	padding: 0px 0px 0px 0px;
	
	border: 0px;
	
	display: inline;
}

.send:hover	{
	color: #797979;
	background-color: #f3f3f3;
	
	cursor: pointer;
	
}
.reset	{
	color: #000;
	background-color: transparent;
	
	height: 19px;
	width: auto;
	
	font: bold 9pt Helvetica, sans-serif;
	clear: both;
	line-height: 26px;
	
	margin: 0px 0px 0px 6px;
	padding: 0px 0px 0px 0px;
	
	border: 0px;
	
	display: inline;
}

.reset:hover	{
	color: #797979;
	background-color: #f3f3f3;
	
	cursor: pointer;
}