/* hier beginnt Teil 1: */
/* Alle Styles OHNE vorangestellten Punkt sind "allgemeine Styles", sie werden von der HTML-Datei automatisch erkannt und brauchen nicht extra festgelegt werden! */

/* "body" bedeutet: alles was im html-Quelltext zwischen <body> und </body> steht und nicht explizit ein anderer Style zugewiesen ist */
body {
	background-color:#FFCC33;						/* Hintergrundfarbe (mein Standard: #FFCC33) */
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 12px;								/* Schriftgröße */
	line-height: 24px;								/* Zeilenhöhe */
	color:black;									/* Schriftfarbe */
	text-align:justify;								/* Textausrichtung */
}

/* "td, th" bedeutet: alles was im html-Quelltext zwischen <table> und </table> steht (also alle Tabellen) und nicht explizit ein anderer Style zugewiesen ist */
td, th {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 12px;								/* Schriftgröße */
	line-height: 24px;								/* Zeilenhöhe */
	color:black;									/* Schriftfarbe */
	text-align:justify;								/* Textausrichtung */
}

/* "a" bedeutet: alles was im html-Quelltext zwischen <a> und </a> steht (also alle Hyperlinks) und nicht explizit ein anderer Style zugewiesen ist */
a {
	color:#3366FF;									/* Schriftfarbe */
	font-weight: bold;								/* Schriftdicke (hier auf FETT) */	
	text-decoration: none;							/* Dekoration (z.B. Unterstrichen, Überstrichen, Durchgestrichen) (hier auf "keine Dekoration" gesetzt) */
}

/* "a" bedeutet: alles was im html-Quelltext zwischen <form> und </form> steht und nicht explizit ein anderer Style zugewiesen ist */
form {
	background-color: #CCCC99;
}

/* hier beginnt Teil 2: */
/* Alle Styles MIT vorangestellten Punkt sind "eigens definierte Styles", sie werden von der HTML-Datei nur erkannt, wenn sie explizit zugewiesen werden! */

.titel {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
  	font-size: 24px;								/* Schriftgröße */
	line-height: 30px;								/* Zeilenhöhe */
  	background-color:#0047BA;						/* Hintergrundfarbe */
	color:#FFCC33;									/* Schriftfarbe */
}

.kopfzeile {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 24px;								/* Schriftgröße */
	background-color:#0047BA;						/* Hintergrundfarbe */
  	color:#FFCC33;									/* Schriftfarbe */
}

.fusszeile {
  	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 14px;								/* Schriftgröße */
	font-weight: bold;								/* Schriftdicke (hier auf FETT) */
	line-height: 22px;								/* Zeilenhöhe */
	background-color:#0047BA;						/* Hintergrundfarbe */
  	color:#FFCC33;									/* Schriftfarbe */
}

.nav {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	color:#0047BA; 									/* Schriftfarbe */
	font-size: 14px;								/* Schriftgröße */
  	font-weight: bold;								/* Schriftdicke (hier auf FETT) */
	background-color:#E1E1E1;						/* Hintergrundfarbe */
}

.gross {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 14px;								/* Schriftgröße */
	color: #333333;									/* Schriftfarbe */
}

.gross-link-style {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 14px;								/* Schriftgröße */
	color:#3366FF;									/* Schriftfarbe */
  	font-weight: bold;								/* Schriftdicke (hier auf FETT) */
	background-color:#E1E1E1;						/* Hintergrundfarbe */
}

.klein {
	font-family: Arial, Helvetica, sans-serif;		/* Schriftart */
	font-size: 9px;									/* Schriftgröße */
	line-height: 14px;								/* Zeilenhöhe */
	color: #333333;									/* Schriftfarbe */
}

.box1 {
	border-color: #CCCCCC #333333 #333333 #CCCCCC;	/* Rand-Farben */
	border-width: medium;							/* Rand-Dicke */
  	border-style: ridge;							/* Rand-Stil */
}

/* hier beginnt Teil 3: */
/* mit "a:hover" wird festgelegt, wie sich der Hyperlink verändern soll, wenn die Maus über den Hyperlink hovert (fährt). */
a:hover {
	text-decoration: underline;						/* Dekoration (hier Unterstrichen), wenn die Maus auf Hyperlink fährt */
}

.gross-link-style:hover {
	text-decoration: underline;						/* Dekoration (hier Unterstrichen), wenn die Maus auf Hyperlink fährt */
}

/* hier beginnt Teil 4: */
/* Diese Operationen werden ausgeführt, wenn als Stylezusatz "big" oder "small" ausgewählt werden */
input.big {
	width: 100px;
}

input.small {
	width: 50px;
}