/* ################################################################################################ */
/* FILE: 	OStStyle.css */
/* AUTHOR: 	Oliver Stoll */
/* LAST:	2025-05-28 */
/* REMARKS:	Zentrale CSS-Formate für ALLE Webseiten. */
/* LOCAL:	keine lokalen Anpassungen in dieser Datei, */
/* 			es wird jeweils danach (also vorrangig) eine lokale CSS Datei geladen. */
/* ################################################################################################ */

/* Grundeinstellungen für den Textkörper */
body {
	background-color: white; color: black;
	background-image: url('../Images/Hintergrund.jpg');
	font-family: "Times New Roman",Times,serif;
	font-size: 100%;
	font-weight: normal;
	}

p { margin-top: 0em; margin-bottom: 1em; }

/* Grundeinstellung für Formatierung zur Nutzung mit class="WERT" z.B. class="mitte" */
/* Achtung: es wird nur das erste class Attribut genutzt */
	.links { text-align: left; }
	.rechts { text-align: right; }
	.mitte { text-align: center; }
	.block { text-align: justify; }

	.oRand { border: none; }
	.mRand { border: thin solid black; }
	.dRand { border: medium solid black; }
	.fRand { border: thick solid black; }

	.rot { color: red; }
	.blau { color: blue; }
	.gruen { color: green; }
	.schwarz { color: black; }

/* Formate für Überschriften */
div#DateiKopf { text-align:center; font-size:200%; margin-bottom: 12pt; }
h1,h2,h3,h4,h5,h6 {font-family:"Times New Roman"; }
h1 { font-size: 200%; margin-bottom: 12pt; }
h2 { font-size: 150%; margin-bottom: 12pt; }
h3 { font-size: 125%; margin-bottom: 8pt; }
h4 { font-size: 110%; margin-bottom: 4pt; }
h5 { font-size: 110%; font-weight: bold; }
h6 { font-size: 110%; font-style: italic; }

/* Format für den Link zu einer Archiv/Original-Datei */
div#Archiv { text-align: right; font-size: 75%; margin-bottom: -3ex; }

/* Anpassung von Standardformaten für einen buchähnlichen Textsatz */
em { font-weight: bold; font-style: normal; }
ul { margin-left: 0em; }
li { margin-bottom: 1ex; }
tt { font-size: 125% }
pre { font-size: 125% }
dt { font-weight: bold; }

/* MG-Beschreibungen benutzen das HTML-Tag <blockquote> */
blockquote {
	background-color: #E6FFE6; color: black;
	font-family: "Times New Roman";
	text-align: justify;
	border: 1px solid black;
	margin-left: 1em;
	margin-right: 1em;
	padding: 1ex;
	}
/* für blockquote mit id="narrow" (Innenabstand klein) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
blockquote#narrow {
	text-align: left;
	margin-top: 0em;
	margin-bottom: 0em;
	padding: 2px;
	}

/* Hervorhebungen aller Art nutzen das HTML-Tag <em> */
em { font-weight: bold; }
/* Eigennamen von Personen, Orten und besonderen Objekten nutzen das HTML-Tag <var> */
var { font-style: italic; }
/* Fertigkeiten, Erfolgswürfe und Prüfwürfe nutzen das HTML-Tag <dfn> */
dfn { font-style: italic; font-weight: bold; }
/* Wörtliche Rede in Beschreibungen oder Erklärungen nutzt das HTML-Tag <cite> */
cite { font-style: italic; }

/* div Element mit Absatzformatierung ohne Abstand aber eingezogener 1. Zeile (Bereichsdefinitionen) */
div#einzug { margin-bottom: 1em; }
	div#einzug p { margin-top: 0em; margin-bottom: 0em; text-indent: 2em; }
	div#einzug ul { margin-top: 0em; }

/* für Unsorted-Listen mit id="topm" (top-Abstand medium) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
ul#topm { margin-top: 0.5ex; margin-bottom: 0.5ex; }
	ul#topm  li { margin-bottom: 0.5ex; }

/* für Unsorted-Listen mit id="tops" (top-Abstand small) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
ul#tops { margin-top: 0ex; margin-bottom: 0ex; }
	ul#tops  li { margin-bottom: 0ex; }

/* für Ordered-Listen mit id="topm" (top-Abstand medium) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
ol#topm { margin-top: 0.5ex; margin-bottom: 0.5ex; }
	ol#topm  li { margin-bottom: 0.5ex; }

/* für Ordered-Listen mit id="tops" (top-Abstand small) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
ol#tops { margin-top: 0ex; margin-bottom: 0ex; }
	ol#tops  li { margin-bottom: 0ex; }

/* für Definitions-Listen mit id="topm" (top-Abstand medium) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
dl#topm {  }
	dl#topm  dt { margin-bottom: 3px; }
	dl#topm  dd { margin-bottom: 6px; }
	/* für unsorted-List innerhalb einer Definitions-Liste */
	dl#topm  ul { margin-top: 3px; margin-bottom: 3px; }
	dl#topm  li { margin-bottom: 3px; }

/* Sonderformate für Bilder im Textkörper */
span#Untertitel { font-style: italic; font-size: 80%; }
div#BoxLinks { float: left; margin-right: 20px; margin-bottom: 10px; text-align: center; }
div#BoxRechts { float: right; margin-left: 20px; margin-bottom: 10px; text-align: center; }
/* Bildformate, Einstellung für Smartphones (kleines Display) */
@media (max-width: 800px){
	#H75 { width: 100%; border-width: 2px; border-style: solid; }
	#H150 { width: 100%; border-width: 2px; border-style: solid; }
	#H200 { width: 100%; border-width: 2px; border-style: solid; }
	#H250 { width: 100%; border-width: 2px; border-style: solid; }
	#H300 { width: 100%; border-width: 2px; border-style: solid; }
	#H450 { width: 100%; border-width: 2px; border-style: solid; }
	#H600 { width: 100%; border-width: 2px; border-style: solid; }
	}
/* Bildformate Einstellung für PC und Tablet (großes Display) */
@media (min-width: 900px){
	#H75 { height: 75px; border-width: 2px; border-style: solid; }
	#H150 { height: 150px; border-width: 2px; border-style: solid; }
	#H200 { height: 200px; border-width: 2px; border-style: solid; }
	#H250 { height: 250px; border-width: 2px; border-style: solid; }
	#H300 { height: 300px; border-width: 2px; border-style: solid; }
	#H450 { height: 450px; border-width: 2px; border-style: solid; }
	#H600 { height: 600px; border-width: 2px; border-style: solid; }
	}

/* Tabelle Standardformat normalisieren */
table { border: 1px solid black; empty-cells: show; border-collapse: collapse; margin-bottom: 1em; }
caption { font-style: italic; text-align: center; padding: 3px; }
thead { font-weight: bold; text-align: center; vertical-align: center; }
tbody { vertical-align: top; text-align: left; }
tfoot { font-weight: bold; text-align: right; }
tr {  }
	tr#o { vertical-align: top; }
	tr#m { vertical-align: middle; }
	tr#u { vertical-align: bottom; }
th { border: 1px solid black; padding: 6px; }
td { border: 1px solid black; padding: 3px; }
	td#l { text-align: left; }
	td#z { text-align: center; }
	td#r { text-align: right; }
	td#o { vertical-align: top; }
	td#m { vertical-align: middle; }
	td#u { vertical-align: bottom; }
	td#ol { vertical-align: top; text-align: left; }
	td#ml { vertical-align: middle; text-align: left; }
	td#ul { vertical-align: bottom; text-align: left; }
	td#oz { vertical-align: top; text-align: center; }
	td#mz { vertical-align: middle; text-align: center; }
	td#uz { vertical-align: bottom; text-align: center; }
	td#or { vertical-align: top; text-align: right; }
	td#mr { vertical-align: middle; text-align: right; }
	td#ur { vertical-align: bottom; text-align: right; }

/* für Tabellen mit id="noline" (keine Linien zwischen Zeilen) die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
table#noline {  }
	table#noline td { border-top: 0; border-bottom: 0; padding: 3px; }

/* Originaltexte aus Spielbüchern können mit Schriftgrösse 0% ausgeblendet werden */
p#Original { font-size: 100%; }
div#Original { font-size: 100%; }

/* Soundtrack-Verweise benötigen mehrere Tags zur Definition von Tabelleneinträgen */
td#SoundtrackImg { padding: 5pt; text-align: left; }
td#SoundtrackZeit { width: 6ex; text-align: center; }
td#SoundtrackThema { text-align: left; }
td#SoundtrackSrc { text-align: left; padding-left: 1ex; font-style: italic; }

/* Tags für die Beschreibung von Gegnern und Kreaturen */
div#GegnerName { text-align: center; font-size: 125%; font-weight: bold; }
div#GegnerTyp { text-align: center; font-size: 110%; margin-bottom: 1ex; }
table#GegnerTab { empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 70ex; }
table#GegnerTab tbody { text-align: center; }
div#GegnerKat { text-align: left; margin-top: 2ex; margin-bottom: 1ex; font-weight: bold; }
div#GegnerInh { text-align: left; margin-left: 2ex; }
/* für Tabellen mit id="GegnerZauber" die Formatierung von Standardelementen anpassen (Bereichsdefinitionen) */
table#GegnerZauber  {font-family:'Arial'; font-size: 90%; }
	table#GegnerZauber  tbody { text-align: center; }
	table#GegnerZauber  th {padding: 3pt; }
	table#GegnerZauber  td {padding: 0pt; }

/* Tags für die Beschreibung von Fertigkeiten */
table#FertigkeitTab { empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 120ex; }
div#FertigkeitName { text-align: center; font-size: 125%; font-weight: bold; }
div#FertigkeitTyp { text-align: center; font-size: 110%; margin-bottom: 1ex; }
div#FertigkeitKat { text-align: left; margin-top: 2ex; margin-bottom: 1ex; font-weight: bold; }
div#FertigkeitInh { text-align: left; margin-left: 2ex; }

/* Tags für die Beschreibung von Zaubern */
table#ZauberTab { empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 100ex; }
div#ZauberName { text-align: center; font-size: 125%; font-weight: bold; margin-bottom: 1ex; }
div#ZauberTyp { text-align: center; font-size: 110%; margin-bottom: 1ex; }
div#ZauberKat { text-align: left; margin-top: 2ex; margin-bottom: 1ex; font-weight: bold; }
div#ZauberInh { text-align: left; margin-left: 0ex; }

/* Sonderformate für WebAlben */
#WebAlbumKopf { font-size: 150%; text-align: center; margin-top: 1ex; margin-bottom: 1ex; font-weight: bold; }
#WebAlbumPicPar { text-align: center; }
	#WebAlbumPicPar img{ width: 70%; border-width: 10px; border-style: ridge; border-color: navy; }
	#WebAlbumPicPar p{ text-align: center; margin-left: 2ex; font-weight: normal; font-size: 110%; }
#WebAlbumPic {  }
#WebAlbumTxt { text-align: center; margin-left: 2ex; font-weight: normal; font-size: 110%; }
#WebAlbumNav { text-align: center; }
	#WebAlbumNav img{ width: 50px; }

	/* Anpassungen für Anzeige auf dem Smartphone = Displaybreite < 1.000 px */
	/* - Randabstände verkleinern, komplette Displaybreite nutzen */
	/* - überschriebene Konstrukte müssen oben vollständig gesetzt sein */
@media (max-width: 1000px){
	ul { margin-left: -1em; }
	dd { margin-left: 1em; }
	blockquote { padding: 3px; margin-left: 0em; margin-right: 0em; }
	div#GegnerInh { margin-left: 0ex; }
	#WebAlbumPicPar img{ width: 100%; border-width: 0px; border-style: solid; border-color: black; }
	#WebAlbumNav img{ width: 25px; }
	}