@charset "UTF-8";
/* Reset */
@import url(/css/basic.css);
@media screen, print, handheld {
/*
Schrift - Abweichung von Verdana
	-
Schriftgröße - Abweichungen von 1em
	0.78	h1 span (entspricht rechnerisch 1.0em = 1.30em x 0.78) Zurücknahme der Berufsbezeichnung 
	      gebenüber dem Sitetitel.
	0.94	ul.nav strong, table.one th (Reduktion des Grauwertes bei fetten Schnitten)
	0.85	p.remark-date, p.information-architecture
	0.90	blockquote 
	1.30	h1, h3
	1.70	h2
Zeilenhöhe - Abweichungen von 1.45
	-
Sperrung
	0.10	h1
	0.15	h1 span, p.subtitle
Kursiv
	em
Fett
	h4, ul.nav strong
Kapitälchen mit Versalien
	-
Kapitälchen ohne Versalien
	-
Versalsatz
	-
Unterstreichung
	-
Rahmen, Linien oder Unterstreichung (ausserhalb von Tabellen)
	-
Schriftfarbe - Abweichung von Schwarz - Standardhintergrund Eierschale
	orange (blass) a:visited
	orange (kräftig) a:link, ul.nav
Unterlegung - Farbe oder Grau - Abweichung von Eierschale
	-
Unterlegung - Farbe - bei negativer (heller) Schrift mit dunkler Unterlegung
	-
Linienfarbe in Tabellen - Abweichung von Schwarz
	grün	.one, .one td, .one th
Ausrichtung - rechts oder zentriert (ohne Seitenlayout)
	rechts		p.remark-date, td.duration
	zentriert 	td.pointer
Abstände - vertikal (ohne Seitenlayout)
	folgt
Abstände - horizontal (ohne Seitenlayout)
	2em  h4 span (Zurücknahme der Werknummer gegenüber dem Werknamen)
Seitenlayout
	Spaltenanzahl im Kopf
	Zeilenlänge
*/

/***********************************************************
Farbe
************************************************************/
/*orange*/ 
a:link { color: rgb(207,102,0);  }
/*orange, geringer gesättigt */
a:visited { color: rgb(207,147,88); }
/*grün*/ 
h1, h1 a:link, h1 a:visited, h2, h3, h4, .one th, ul.nav strong, .home .content strong { color: rgb(84,166,45);  }
.one, .one td, .one th { border-color: rgb(84,166,45); }
/*eierschale*/ 
body, .submit { background: #fbfaf4; }
/*eierschale, stärker gesättigt*/
.one th { background-color: #F3EFDE; }
/*input#search-field { border-right-color: #F3EFDE; border-bottom-color: #F3EFDE; }*/
/*grau*/
/*input#search-field { border-left-color: rgb(200,200,200); border-top-color: rgb(200,200,200); }*/
/***********************************************************
Block "Top"
************************************************************/

.top { max-width: 73ex; }

.top-one { float: left; width: 100%; }

h1 { float: left; display: inline; margin-bottom: .5em; padding-right: 2em;  font-size: 1.3em; 
letter-spacing: .1em;   }

div.search { text-align: right; margin-bottom: 2em;  }
h1 span { font-size: .85em; font-weight: normal;}
div.search form.search input#search-field { width: 8em; /*border-style: solid;*/ }
div.search form.search input.submit { padding-left: .5em; padding-right: .5em; }
div.search {white-space: nowrap; float: right; /*Ohne float:right bricht IE8 vor dem DIV nicht um*/}

.top-two { clear: left; float: left; width: 100%; font-weight: bold; }

ul.nav { margin-left: 0; float: left; display: inline; padding-right: 4em; font-weight: bold; }
ul.nav li { margin-left: 0; float: left; display: inline; padding-right: 2.2em; white-space: nowrap; }

div.language-switcher { text-align: right; margin-bottom: 5em; }
/***********************************************************
Diverse
************************************************************/
body { margin: /*25px 20px 20px 50px;*/ 2.5% 2% 2% 5%; }
.skip:focus, .skip:active {/* Skip-Links für Tab-Navigation sichtbar schalten */ position: static; left: 0; top: 0; }
a:link, a:visited { text-decoration: none; }
p, h2, h3, h4, blockquote, address{ margin: .6em 0; }
h2 { font-size: 1.7em; font-weight: normal; }
h3  { font-size: 1.3em; margin-top: 5em; font-weight: normal; } 
h4 { font-size: 1em; margin-top: 4em; font-weight: bold; }
h4 span { font-weight: normal; padding-left: 1.5em; }
blockquote { font-size: 0.9em; padding-left: 3em; }
img.fr { float: right; padding-left: 10px; padding-bottom: 10px; }
div.content { clear: left; max-width: 73ex;} /* Achtung! Auch die Breite von Top anpassen*/
.subtitle { letter-spacing: .15em; }
.author {}
address { margin-top: 2em; }
.remark-date{ text-align: right; font-size: 0.85em; }
.information-architecture{ margin-top: 7em; font-size: 0.85em; }
.home .content strong { font-weight: normal; }

ul.portrait { margin: 0; padding: 0; line-height: 0; overflow: hidden; /* "overflow" vermeidet "clear: both" für nachfolgende Elemente. "hidden" muss für IE sein, sonst wird ein Scrollbalken dargestellt. */ width: 100%; /* Redundantes Layout für IE hinzufuegen */ margin-bottom: 2em; }
ul.portrait li { margin: 0 1px 1px 0; padding: 0; list-style-type: none; float: left; }
ul.portrait img { height: 80px; border: none; margin: 0; padding: 0; }
/***********************************************************
Ausblenden
************************************************************/
p.skip, label, body.home h2#content, span.qmark { position: absolute; left: -1000px; top: -1000px; width: 0; max-height: 0; overflow: hidden; display: inline; }
/***********************************************************
Tabelle mit Gesamtwerk
************************************************************/
.one {  border-width: 1px;  border-style: solid; }
.one td, .one th { border-width: 1px; border-style: solid; padding: 2px 5px; vertical-align: top; }
.one th { font-size: .94em;  }
.one td.work, .one td.workpart {  }/* hier Elementselektor angeben, weil auch für body die Klasse work existiert */
.one td.instrumentation{  }
.one td.instrumentation ul { list-style-type: circle; margin: 0 0 0 1.1em; }
.one td.instrumentation ul li { margin: 0; }
.one td.workpart { padding-left: 1.5em; }
.one td.duration, .one td.number { padding-left: 5px !important;} /* Padding in "number workpart" und "duration workcompontent" überschreiben */
.one td.duration { text-align: right; }
.one td.pointer { text-align: center; }
.one caption { text-align: right; padding-bottom: 1em; font-size: .85em; margin-top: 3em; /*margin hier statt an table, weil FF margin einer table zwischen table und caption darstellt */}
}
@media screen {
/***********************************************************
Ausblenden
************************************************************/
p.url { position: absolute; left: -1000px; top: -1000px; width: 0; max-height: 0; overflow: hidden; display: inline; }
}

@media screen and (max-width: 600px){
		body	{ margin: 2%; }
	}
@media print {
.top-two, .search, .skip, .play, .score, .remark { display: none; }

div.content, .top { max-width: 100%; }
h1 span{ font-size: 76%; }
h1 { margin-bottom: .5em; font-size: 130%; font-weight: normal; }
h1, h2, h3, h4, h5 { page-break-after: avoid; }
/*body.work h3 { page-break-before: always; }*/
.top-one a { border-bottom: none !important; }
.one{ margin-left: 1pt; margin-right: 1pt; } /* Wegen eines Bugs der Browser, die sonst die Rahmenlinie beim Druck abschneiden*/
a:link, a:visited { border-bottom: dotted 1pt black; }
.top-one a, .one a { border-bottom: none; }
.one, .one td, .one th{ border: 1pt solid black;  }
td.number, td.work, td.duration, td.audio, td.remark, td.score, td.genre, td.instrumentation  { page-break-inside: avoid; }
/*
.top-one a[href^="/"]:after { content:" - http://simon-barber.com"; }
a[href^="http"]:after { content:" ("attr(href)")"; }
a[href^="/"]:after { content:" (http://simon-barber.com"attr(href)")"; }
*/
.home .content strong { font-size: 80%; padding-right: 2em; }
.url { font-family: "Courier New", monospace; text-align: right; font-size: 80%; }
}