/*
Stylesheet für die Formatierung von Daniel Bettacs Homepage.
*/

/* Standardvorgaben für alle Bereiche */
body {
	color: #000000;
	background-color: #90BADE;
	direction: ltr;
	text-align: justify ;
	font-family: 'Times New Roman';
	font-style: normal ;
	font-variant: normal;	
	font-size: 12.0pt;
	font-weight: normal ;
	font-stretch: normal ;
	}
a		{ color: #0000FF; }
a:link	{ color: #0000FF; }
a:visited	{ color: #CC8800; }
a:hover	{ color: #00FF00; }
a:active	{ color: #FF0000; }
a:focus	{ color: #FF0000; }

/*
Menübereich
Der Menübereich muss in der HTML-Datei immer direkt _vor_ dem Inhaltsbereich kommen, weil sonst das Layout nicht stimmt.
 */

#menu { /* Der Menü-Block. Scrollt normal mit der Seite mit. */
	position: relative;
	float: left; /* Der nachfolgende Bereich umfliesst das Menü von rechts. Das Menü muss in der HTML-Seite also direkt vor dem Text kommen, damit das Layout funktioniert. */
	width: 130px;
	height: auto;
	padding: 5px;
	margin-top: 0;
	margin-left: 0;
	text-align: center;
	color: #000000;
	background-color: #D4D0C8;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF #000000 #000000 #FFFFFF;
	}

/* Hier einige Definitionen, die aus den normalen Listenfeldern des Menüs Buttons machen. */
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}

#menu li {
	margin: 0px 0px 2px 0px;
	}

#menu li a { /* Aus jedem Link im Listenfeld wird nun ein Button. */
	display: block;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF #000000 #000000 #FFFFFF;
	background-color: #D4D0C8;
	color: #000000;
	text-decoration: none;
	width: 100%;
	text-align: center;
	}

/* nötig als Workaround für evtl. Darstellungsprobleme unter IE/Windows */
html>body #menu li a {
	width: auto;
	}

#menu li a:active { /* Änderung bei Mouseover */
	border-color: #000000 #FFFFFF #FFFFFF #000000;
	}
#menu li a:hover { /* Änderung bei Mouseover */
	color: #FFFFFF;
	}
#menu img {
	align:center
	}

/* Inhaltsbereich */
/* Der Inhaltsbereich muss in der HTML-Datei immer direkt _nach_ dem Menübereich kommen, weil sonst das Layout nicht stimmt. */

#content {
	position: relative;
	float: none;
	width: auto;
	height: auto;
	padding: 5px;
	margin-top: 0;
	margin-left: 135px;
	text-align: justify;
	color: #000000;
	background-color: #FFFFAA;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF #000000 #000000 #FFFFFF;
	}
#content ul {
	list-style: none;
	margin: 0 0 0 2em;
	}
#content li {
	}
#zaehler {
	text-align: center;
	}
#zaehler p {
	text-align: center;
	}
#fussnote {
	position: relative;
	padding: 2em 2em 2em 2em;
	margin-top: 5px;
	margin-left: 155px;
	margin-right: 155px;
	text-align: justify;
	color: #FFFFFF;
	background-color: #CC0000;
	font-weight: bold;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF #000000 #000000 #FFFFFF;
	}

/* Der Bereich ist für die Lösungen von Aufgaben und sonstige Spoiler gedacht. */
/* Der Text muss in ein <a> ... </a> verpackt werden, da die verwendeten Styles nur für <a> existieren. */
/* Die Reihenfolge der Style-Definitionen ist wichtig! */
/* Beispiel: die "hover"-Darstellung soll bei einem Klick von der "active"-Darstellung ersetzt werden. "active" MUSS dafür nach "hover" definiert werden, weil sonst nur die "hover"-Darstellung aktiv ist (schliesslich ist der Mauspfeil bei "hover" auch über dem Bereich). */
#spoiler {
	width: auto;
	min-width: 5em;
	max-width:20em;
	margin-left: 1em;
	}
#spoiler a {
	color: #FF0000;
	background-color: #FF0000;
	display:block;
	padding:0.5em;
	cursor:help;
	}
#spoiler a:hover {
	color: #FF5555;
	background-color: #FF5555;
	}
#spoiler a:active {
	color: #0000FF;
	background-color: #FFFFAA;
	}
#spoiler a:before {
	content: "Spoiler! Klicken oder markieren, um den Text zu sehen.";
	color: #FFFFAA;
	}

#monat {
	font-family: 'Arial';
	font-style: normal ;
	font-variant: normal;	
	font-size: 12.0pt;
	font-weight: normal ;
	font-stretch: normal ;
	position: relative;
	color: #000000;
	background-color: #BBBBBB;
	text-align: center;
	vertical align: middle;
	width: 14em;
	height: auto;
	padding: 0.5em 0.5em 0 0.5em;
	margin: 0.1em;
	float: left;
	font-family: 'Times New Roman';
	font-style: normal;
	font-weight: normal;
	font-size: 10pt;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF #000000 #000000 #FFFFFF;
	cursor:help;
	}
#monat p {
	display: inline;
	}
#monat h1,#monat h2,#monat h3,#monat h4,#monat h5,#monat h6 { /* gemeinsame Formatierung aller Tage */
	font-family: 'Arial';
	font-style: normal ;
	font-variant: normal;	
	font-size: 8.0pt;
	font-weight: normal ;
	font-stretch: normal ;
	display: inline;
	margin: 2px 0 2px 0;
	padding: 1px;
	width: 2em;
	height: 1em;
	text-align: center;
	vertical align: middle;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	}
#monat h1 { color: #000000; background-color: #BBBBBB; border-color: #BBBBBB; } /* normale Tage */
#monat h2 { color: #FFFFFF; background-color: #888800; border-color: #888800 #000000 #888800 #000000;} /* Kopfzeile */
#monat h3 { color: #FF0000; background-color: #BBBBBB; border-color: #BBBBBB; } /* Sonntage */
#monat h4 { color: #0000FF; background-color: #BBBBBB; border-color: #FFFFFF #000000 #000000 #FFFFFF; } /* Geburtstage */
#monat h5 { color: #00FFFF; background-color: #BBBBBB; border-color: #FFFFFF #000000 #000000 #FFFFFF; } /* Feiertage und Sonstige */
#monat h6 { color: #000000; background-color: #FFFFAA; border-color: #000000 #FFFFFF #FFFFFF #000000; } /* heute */
#monat a {
	margin: 2px 0 2px 0;
	padding: 1px;
	width: 2em;
	height: 1em;
	text-align: center;
	vertical align: middle;
	text-decoration: none;
	}

/*
Hinweise
======

Viele Styles funktionieren erst ab bestimmten Browserversionen. Die meisten Styles dieser Seiten werden vom IE 4.x (oder niedriger) sowie Netscape 4x (oder niedriger) nicht bzw. nicht richtig interpretiert.

Bestimmte Styles sind auch bis jetzt nicht in allen Browsern umgesetzt:

	a:before
	a:after
		funktioniert im Opera 7.11, 7.21 und 7.23
		funktionier NICHT im IE 5, IE 5.5

	a:active
		funktioniert im Opera Opera 7.11, 7.21 und 7.23
		funktionier NICHT im IE 5, IE 5.5

	a:hover
		funktioniert im Opera Opera 7.11, 7.21 und 7.23
		funktioniert EINGESCHRÄNKT im IE 5, IE 5.5  (funktioniert nicht mit <a>...</a>, sondern nur mit <a href="...">...</a>)

	width:auto
		funktionier NICHT im Opera 7.11, 7.21 und 7.23, IE 5.0, IE 5.5 (wird komplett ignoriert)
	min-width
	max-width
		funktioniert NICHT im Opera Opera 7.11, 7.21 und 7.23 (width wird fest auf max-width gesetzt)
		funktioniert NICHT im IE 5, IE 5.5 (wird komplett ignoriert)

	display:block in Kombination mit width: 100% 
		funktioniert NICHT im IE (alle Versionen), als Workaround kann width:auto verwendet werden (siehe Definitionen des "menu"-Bereiches).

*/