@charset "utf-8";

/* GENERAL */
*:focus {
	outline: none;
	}

a:focus {
	background-color: #eef !important;
	}

a {
	color: #507;
	font-style: normal;
	text-decoration: none;
	}

samp,
a:hover {
	color: #f70;
	}

a img {
	border: none;
	}

acronym {
	border-bottom: 1px solid #000;
	text-decoration: none;
	cursor: help;
	}

samp {
	font: normal 14px 'Trebuchet MS', Arial, Sans-serif;
	}

body {
	min-width: 700px;
	margin: 0;
	background: #444 url('./gfx/footer_shade.png') bottom repeat-x;
	background-attachment: fixed;
	font: normal 14px 'Trebuchet MS', Arial, Sans-serif;
	}

h1,
h2,
.container {
	position: relative;
	}

h1 span,
h2 span,
.box {
	position: absolute;
	}
	
h1,
h1 span,
h2,
h2 span,
.container,
.box {
	top: 0;
	left: 0;
	}

/* HEADER */
#header {
	width: 100%;
	height: 200px;
	background: url('./gfx/header_back.png') center repeat-x;
	}

#menu {
	height: 200px;
	margin: 0 auto;
	font: normal 16px 'Trebuchet MS', Arial, Sans-serif;
	background: url('./gfx/headline.jpg') center no-repeat;
	text-align: center;
	}

#menu > ul {
	height: 200px;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	}

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

#menu > ul > li {
	position: relative;
	top: 0;
	left: 0;
	z-index: 20;
	height: 100%;
	width: 144px;
	float: left;
	}

#menu li div {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	z-index: 25;
	width: 144px;
	padding: 0;
	background: url('./gfx/menu_back.png') center repeat-y;
	margin: 0;
	}
	
#menu div ul {
	height: 100%;
	padding: 0 15px;
	background: url('./gfx/menu_bottom.png') bottom repeat-x;
	margin: 0;
	overflow: hidden;
	line-height: 150%;
	}
	
#menu div .box {
	top: -20px;
	z-index: 18;
	height: 20px !important;
	width: 100%;
	margin: 0;
	background: url('./gfx/menu_top.png') center top no-repeat;
	}
	
#menu div ul p {
	line-height: 12px;
	padding: 10px;
	padding-top: 0;
	margin: 0;
	font-weight: bold;
	color: #777;
	}
	
#menu.highlighted div ul p {
	color: #f70;
	}

.noscript #menu div {
	height: 20px;
	}

/* special handling of UL only necessary for Opera */
.script #menu div ul,
.noscript #menu div:hover,
.noscript #menu div:hover ul,
#menu div.active {
	height: auto;
	}

#menu div.active ul {
	background: none;
	}
	
#menu div.active p {
	color: #507;
	}

#menu a {
	color: #777;
	text-decoration: none;
	padding: 1px 0;
	border-top: 1px solid #ebebeb;
	margin: 0;
	display: block;
	}

#menu a:hover {
	color: #000;
	}
	
#menu li.active a {
	background: #f6f6f6;
	color: #000;
	cursor: default;
	}

#header blockquote {
	left: auto;
	right: 150px;
	}

#header blockquote p {
	margin: 0;
	font: normal 16px Garamond, Georgia, Times, Serif;
	font-style: italic;
	color: #fff;
	text-align: right;
	}

#header blockquote #quote:before {
	content: '„';
	}
	
#header blockquote #quote:after {
	content: '“';
	}

#header blockquote cite {
	font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
	font-style: normal;
	}

/* FOOTER */
.page {
	margin: 0 auto;
	background: #fff;
	}

.page,
#footer {
	width: 700px;
	clear: both;
	}

#footer {
	margin: 60px auto;
	background: url('./gfx/footer_back.png') center top no-repeat;
	}

/* CONTENT */
.content {
	background: #fff;
	border: 1px solid transparent;
	margin: 0;
	text-align: center;
	}

h1 {
	z-index: 50;
	}

h1,
h2,
h3 {
	padding-left: 25px;
	border-bottom: 1px solid #000;
	margin: 0;
	margin-top: 48px;
	margin-right: 40px;
	font: normal 24px Garamond, Georgia, Times, Serif;
	color: #507;
	text-align: left;
	}

h1 var {
	padding-top: 5px;
	border: none;
	float: right;
	color: #777;
	font: normal 16px 'Trebuchet MS', Arial, Sans-Serif;
	font-style: normal;
	}

h1 var a,
h1 var del {
	padding: 0 5px;
	border: none !important;
	}
	
h1 var del {
	visibility: hidden;
	}

h2 {
	line-height: 22px !important;
	width: 684px;
	padding-top: 55px;
	padding-left: 20px;
	text-indent: 5px;
	background: url('./gfx/deco_separator.png') center top no-repeat;
	border: none;
	margin-bottom: .5em;
	}

h2:after {
	content: ":";
	}

h1 span,
h2 span {
	left: -32px;
	top: -24px;
	width: 57px;
	height: 66px;
	padding-right: 53px;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	color: transparent;
	font-size: 0;
	display: block;
	}
	
h2 span {
	top: 30px;
	}

span.a { background-image: url('./caps/A.png'); }
span.ä { background-image: url('./caps/Ä.png'); }
span.b { background-image: url('./caps/B.png'); }
span.c { background-image: url('./caps/C.png'); }
span.d { background-image: url('./caps/D.png'); }
span.e { background-image: url('./caps/E.png'); }
span.f { background-image: url('./caps/F.png'); }
span.g { background-image: url('./caps/G.png'); }
span.h { background-image: url('./caps/H.png'); }
span.i { background-image: url('./caps/I.png'); }
span.j { background-image: url('./caps/J.png'); }
span.k { background-image: url('./caps/K.png'); }
span.l { background-image: url('./caps/L.png'); }
span.m { background-image: url('./caps/M.png'); }
span.n { background-image: url('./caps/N.png'); }
span.o { background-image: url('./caps/O.png'); }
span.ö { background-image: url('./caps/Ö.png'); }
span.p { background-image: url('./caps/P.png'); }
span.q { background-image: url('./caps/Q.png'); }
span.r { background-image: url('./caps/R.png'); }
span.s { background-image: url('./caps/S.png'); }
span.t { background-image: url('./caps/T.png'); }
span.u { background-image: url('./caps/U.png'); }
span.ü { background-image: url('./caps/Ü.png'); }
span.v { background-image: url('./caps/V.png'); }
span.w { background-image: url('./caps/W.png'); }
span.x { background-image: url('./caps/X.png'); }
span.y { background-image: url('./caps/Y.png'); }
span.z { background-image: url('./caps/Z.png'); }

p,
ul {
	padding: 0 20px;
	margin: 21px 0;
	}
	
p,
ul,
h2 dfn {
	font: normal 14px 'Trebuchet MS', Arial, Sans-serif;
	color: #111;
	}

h2 dfn {
	margin-left: 10px;
	display: block;
	}

h1 + p,
h1 + form,
h1 + h2 {
	z-index: 40;
	padding-top: 40px;
	margin-top: -20px;
	background: url('./gfx/deco.png') right top no-repeat;
	}
	
h1 + h2 {
	padding-top: 55px;
	}

.page p,
.page ul,
.page ol {
	line-height: 22px;
	text-align: left;
	}

.page ul,
.page ol {
	margin-left: 1em;
	}

.page p kbd {
	padding: 1px 2px;
	background: #fcfcfc;
	border: 1px solid #ebebeb;
	color: #000;
	font-family: 'Trebuchet MS', Arial, Sans-Serif;
	}

.page p.lyric {
	font-style: italic;
	}
	
.page p.lyric span {
	width: 100%;
	display: block;
	text-align: center;
	}

.page .author {
	color: #507;
	font: normal 14px 'Trebuchet MS', Arial, Sans-serif;
	}
	
.page .author strong {
	font-size: 16px;
	font-weight: bold;
	}

.page hr {
	height: 12px;
	background: url('./gfx/deco_separator.png') center no-repeat;
	border: none;
	margin: 48px 0;
	}

.page .half {
	width: 49.5%;
	vertical-align: top;
	display: inline-block;
	}

.page li {
	margin: .5em 0;
	list-style: disc inside;
	}

.dates li {
	padding-left: 90px;
	list-style-type: none !important;
	text-align: left;
	}

.dates li span {
	margin-left: -90px;
	font: normal 14px Georgia, Times, Serif;
	font-style: italic;
	float: left;
	}

.page a {
	border-bottom: 1px solid #507;
	color: #507;
	text-decoration: none;
	}
	
.page a:hover {
	color: #f70;
	border-color: #f70;
	}
	
.page a:visited {
	border-bottom-style: dotted;
	}

a.jumper {
	height: 17px;
	width: 17px;
	padding: 0;
	background: #507 url('./gfx/button_up.png') center no-repeat;
	border: none;
	margin-left: 10px;
	margin-bottom: 5px;
	display: block;
	float: right;
	}
	
a.jumper:hover {
	background-color: #f70;
	}
	
a.jumper:visited,
.jumper a:visited {
	border: none;
	}

.page acronym {
	border-bottom: 1px dotted #000;
	cursor: help;
	}

.thumbs > a,
.titles li > a,
.previews li > a {
	border: none !important;
	font-size: 15px;
	}

.thumbs {
	padding: 10px;
	padding-left: 25px;
	text-align: left;
	}
	
.thumbs img,
#previous img,
#next img {
	width: 60px;
	height: 60px;
	padding: 10px 12px;
	background: url('./gfx/thumb_back.png') center no-repeat;
	}
	
.previews img {
	width: 200px;
	height: 113px;
	padding: 10px 12px;
	background: url('./gfx/preview_back.png') center no-repeat;
	margin-right: 10px;
	margin-top: -8px;
	float: left;
	}	

.thumbs > a {
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 20;
	height: 80px;
	width: 84px;
	display: inline-block;
	}
	
.thumbs > a span {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 25;
	width: 60px;
	height: auto;
	max-height: 60px;
	color: #507;
	background: #fff;
	display: block;
	visibility: hidden;
	overflow: hidden;
	opacity: .7;
	}

.thumbs > a:hover span {
	visibility: visible;
	}

.thumbs p {
	padding-left: 0;
	margin-left: -5px;
	margin-top: 0;
	}

/* only for older browsers not supporting selector '>' */
.thumbs p a,
.previews p a {
	position: static;
	height: auto;
	width: auto;
	display: inline;
	}

.previews li {
	list-style: none;
	min-height: 120px;
	padding-bottom: 23px;
	margin-top: 1em;
	clear: both;
	text-align: left;
	}

.titles {
	background: url('./gfx/table_2nd.png') center repeat-y;
	}

.titles li {
	list-style: none;
	padding: 15px 30px;
	background: #fff;
	margin: 0;
	text-align: left;
	}
	
.titles.links li {
	padding-left: 55px;
	text-align: left;
	}

.titles.links li > a img {
		height: 16px;
		width: 16px;
		margin-bottom: -3px;
		margin-left: -25px;
		margin-right: 9px;
		vertical-align: baseline;
	}
	
.titles li:nth-child(odd) {
	background: transparent url('./gfx/table_shade.png') center top no-repeat;
	}

.half .titles {
	background: none;
	}

.half .titles li {
	list-style: disc inside;
	padding: 0;
	background: none;
	margin-bottom: .5em;
	}

.titles li > a dfn {
	margin: 0 .25em;
	font-size: 12px; 
	font-style: normal;
	}

.previews p,
.titles p {
	padding: 0;
	margin-top: .5em;
	margin-bottom: .5em;
	}

/* HELP-BOX */
div.help {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	width: auto;
	padding: 0 10px;
	border: 1px solid #eee;
	margin: 1.5em 20px;
	overflow: hidden;
	}

div.help h3,
div.help p {
	padding: 0;
	margin: 0;
	}

div.help h3 {
	line-height: 20px;
	padding: 5px 0;
	padding-left: 25px;
	background: url('./gfx/mark_help.png') center left no-repeat;
	border-bottom: 1px solid #eee;
	font-size: 20px;
	vertical-align: middle;
	cursor: pointer;
	}

div.help.folded h3 {
	border: none;
	}

div.help h3 a {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 16px;
	width: 16px;
	background: url('./gfx/help_edge.gif') center no-repeat;
	border: none !important;
	cursor: nw-resize;
	}

div.help h3:hover {
	color: #f70;
	}

div.help h3:after {
	content: ':';
	}

div.help p {
	margin: 1em 0;
	}
	
div.help.folded p {
	display: none;
	}
	
.noscript div.help:hover p {
	display: block;
	}
	
.noscript div.help:hover h3 {
	border-bottom: 1px solid #eee;
	}

/* FOOTER 2, DISCLAIMER */
#footer p {
	padding: 5px 0;
	margin: 0;
	margin-bottom: 40px;
	}
	
#footer p,
p.jumper {
	color: #777;
	font-size: 12px;
	text-align: center;
	}

p.jumper {
	color: #000;
	}
	
li p.jumper {
	text-align: left;
	}

#footer p span,
p.jumper a,
p.jumper strong,
span.line {
	padding: 0 8px;
	white-space: nowrap;
	}

p.jumper strong {
	color: #f70;
	font-size: 16px;
	}

p.jumper span,
span.line {
	color: #777;
	font-size: 12px;
	}

#footer p a,
#disclaimer p a,
p.jumper a {
	border: none;
	}

#disclaimer p {
	padding: 0 25px;
	padding-bottom: 1em;
	margin: 0;
	font-size: 11px;
	color: #888;
	text-align: justify;
	}
	
#disclaimer p#validator {
	margin-top: -2em;
	float: right;
	clear: both;
	}

#disclaimer p a {
	color: #f70;
	}

#disclaimer p strong {
	margin-right: 10px;
	}

#disclaimer hr {
	width: 100%;
	height: 59px;
	border: none;
	background: url('./gfx/edge.png') center top repeat-x;
	margin: 0;
	}
	
#disclaimer {
	background: none;
	margin: 0;
	}