/*	benutzte Farben:

	#FAA := dunkel-rosa
	#CAF := hell-lila
	#EFE := grünlich weiß (body background-color)
	#EDF := helleres lila
*/
/*	Die verwendeten CSS-Eigenschaften werden leider noch nicht alle von allen Browsern (korrekt) unterstützt, dadurch kommt es zu unterschiedlicher Darstellung in verschiedenen Browsern, eine exakt gleiche Darstellung ist aber irrelevant. Die Benutzbarkeit ist auf jeden Fall gewährleitset.
*/
/*	Automatische Nummerierung der Überschriften	(funktioniert bisher nur im Opera 5). Bei Bedarf die Auskommentierung aufheben: */
/*	@import url("counter.css");*/

/*	Generelles */
body
{
	margin: 2px;
	border: solid 2px #CAF;
	padding: 0;
	color: black;
	background-color: #EFE;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 101%;	/* Es ist zwar besser, relative Einheiten wie 'em' zu benutzen, aber diese CSS-Datei screen.css	gilt nur für die Medien	screen (Bildschirm), tv und presentation (z.B. Operas Vollbildschirmmodus), sowie handheld für Handys und PalmTops (unterstützt derzeit nur kein Browser), welche im Gegensatz zu z.B. print (Ausdruck) Pixel benutzen.
*/
}
/*	Übersicht über die Abstände und Ränder.

          border                                              border
 margin-left  padding-left                         padding-right  margin-right
************||----------------------Inhalt----------------------||************  p, dl, ul, ol
************||||||||||||------------Inhalt----------------------||************  blockquote, address
************||||||||||||------------Inhalt----------------------||************  h1, h2, h3, h4, h5, h6
     12     2/12           22/12                    22           2     12       px
*/
p, dl, ul, ol
{
	margin: 5px 12px;
	border: 2px gray solid;
	padding: 2px 22px;
	width: 75%;
	max-width: 100ex;
	min-width: 12ex;
	color: black;
	background-color: #EDF;
}
blockquote, address
{
	margin: 5px 12px;
	border: 2px gray solid; border-left-width: 12px;
	padding: 2px 22px 2px 12px;
	width: 75%;
	max-width: 100ex;
	min-width: 12ex;
	color: black;
	background-color: #EDF;
}
/*	Überschriften */
h1, h2, h3, h4, h5, h6
{
	margin: 16px 12px;
	border: 2px black solid; border-left-width: 12px;
	padding: 2px 22px 2px 12px;
	width: 75%;
	max-width: 100ex;
	min-width: 12ex;
	color: black;
	background-color: #CAF;
	font-family: Arioso, Harrington, "French Script MT", "Monotype Corsiva", "Lucida Calligraphy", cursive;
	font-weight: bold;
}
h1 {font-size: 2.0em}
h2 {font-size: 1.8em}
h3 {font-size: 1.6em}
h4 {font-size: 1.4em}
h5 {font-size: 1.2em}
h6 {font-size: 1.0em}

/*	IDs */

/*	Die Navigation */
#nav
{
	float: right;	/* Die Navigation 'klebt' am rechten Fensterrand. */
	margin: -2px -2px 2px 2px;
	border: solid 2px #CAF;
	padding: 1px;
	width: 120px;	/* Im Gegensatz zum Inhaltsteil der Seiten besitzt die Navigation eine feste Breite, sie besitzt schließlich keinen Fließtext. */
	background-color: #EFE;
	clear: none;
}
/*	Übersicht über die Abstände und Ränder der Navigation.

Kategorien

#nav    ||-............................................................................................................-|| 120px
 ul        ............................................................................................................     +2px
  li       *..........................................................................................................*    118px
   a        ||--------..........................................................................................----||     +16px
   :hover   ||||||----..........................................................................................----||     102px

Galerien

#nav    ||-............................................................................................................-|| 120px
 ul        ............................................................................................................     +2px
  li       *..........................................................................................................*    118px
   ol       ..........................................................................................................     +14px
    li      *------------............................................................................................*     104px
     a                   ||--------............................................................................----||      +16px
	 :hover              ||||||----............................................................................----||       88px
*/
#nav ul, #nav ol
{
	margin: 0;
	border-width: 0;
	padding: 0;
	background-color: transparent;
	list-style-type: none;
}
#nav ul li
{
	margin: 1px;
	padding: 0;
	width: 118px;
}
#nav ol li
{
	margin: 1px;
	width: 104px;
	padding: 0 0 0 12px;
}

/*	Aussehen der Hyperlinks im Navigationsbereich */
#nav a
{
	display: block;
	margin: 0;
	border: 2px solid gray;
	padding: 1px 4px 1px 8px;
}
#nav ul a
{
	width: 102px;
}
#nav ol a
{
	width: 88px;
}
#nav a:link, #nav a:visited
{
	border: 2px solid gray;
	background-color: #EDF;
	text-decoration: none;
}
#nav a:link
{
	color: black;
}
#nav a:visited
{
	color: gray;
}
#nav a:hover, #nav a:active
{
	border: 2px solid black; border-left-width: 6px;
	padding-left: 4px;
	background-color: #CAF;
}
#nav a:hover
{
	color: black;
}
#nav a:active
{
	color: gray;
}

/*	Aussehen der Hyperlinks außerhalb der Navigation */
a:link
{
	color: navy;
/*	Man sollte überlegen, ob Links nicht besser, wie von vielen Surfern erwartet, in einer anderen Farbe dargestellt werden sollten; etwas bläuliches böte sich an. */
	background-color: transparent;
/*	Es ist empfehlenswert, immer Vorder- _und_ Hintergrundfarbe oder weder noch anzugeben, da es ansonsten allzu leicht vorkommt, dass Schrift und Hintergrund die gleiche der ähnliche Farbe haben. */
	text-decoration: underline;
/*	Links sollten _immer_ unterstrichen sein. Am besten ist es außerdem ausschließlich Links zu unterstreichen.*/
}
a:visited
{
	color: gray;
	background-color: transparent;
	text-decoration: underline;
}
a:hover
{
	color: black;
	background-color: #CAF;
}
a:active
{
	color: gray;
	background-color: #CAF;
}

/*	Darstellung der Bilder */
/*	Vorschaubilder */
/*p.thumb ruby
{
	width: 120px;
	height:120px;
}*/
p.thumb img
{
	margin: 0;
	border: 1px gray solid;
	padding: 0;
}
a img
{
	border-width: 0;
}

@media screen {
	a img
	{
		border-width: 0;
		cursor: url("img/lupe.cur"), url("img/lupe"), pointer;
	/*	Bisher zeigt leider kein Browser GIF-Dateien als Cursor an, wird aber bestimmt, sobald es unterstützt wird, ein netter Effekt sein. */
	}
	abbr[title], acronym[title]
	{
		border-bottom: thin dotted gray;
		cursor: help;
	/*	Moderne grafische HTML-Browser zeigen beim Überfahren eines Elementes mit einem title-Attribut dessen Inhalt in einem so gennannten Tool-Tipp an, das sind diese aufpoppenden meist gelblich hinterlegten "Sprechblasen".*/
	}
}

/*	Die folgenden automatisch einzufügenden Icons werden leider derzeit (2002-03-21) nur von Mozilla unterstützt. */

/*	QBullets */
a.remote:before {content: url("qbullets/remote") " "}
a.newwin:before	{content: url("qbullets/window") " "}
a.pic:before	{content: url("qbullets/picture") " "}
a.note:before	{content: url("qbullets/note") " "}
a.help:before	{content: url("qbullets/help") " "}
a.info:before	{content: url("qbullets/info") " "}
a.smtp:before	{content: url("qbullets/mailto") " "}
a.file:before	{content: url("qbullets/disk") " "}

/*	Landesfahne vor Links */
a[hreflang="de"]:hover:before,
a[hreflang="de-DE"]:hover:before	{content: url("img/de") " "}	/* deutsch */
a[hreflang="de-AT"]:hover:before	{content: url("img/at") " "}	/* österreichisch */
a[hreflang="de-CH"]:hover:before	{content: url("img/ch") " "}	/* schweizerdeutsch */
a[hreflang="en"]:hover:before,
a[hreflang="en-UK"]:hover:before	{content: url("img/uk") " "}	/* englisch */
a[hreflang="en-US"]:hover:before	{content: url("img/us") " "}	/* us-amerikanisch */
a[hreflang="fr"]:hover:before		{content: url("img/fr") " "}	/* französisch */
a[hreflang="fr-CA"]:hover:before	{content: url("img/ca") " "}	/* franko-kanadisch */
a[hreflang="fr-CH"]:hover:before	{content: url("img/ch") " "}	/* schweizer französisch */
a[hreflang="it"]:hover:before		{content: url("img/it") " "}	/* italienisch */
a[hreflang="es"]:hover:before		{content: url("img/es") " "}	/* spanisch */