/* Denis Kjelsberg / 01.2017 */

* {
	color: rgb(0,0,255);
	font-family: "Century Gothic";
	font-size: 100%;
	}

h1, h2, h3 {
	font-size: 110%;
	}

body {
	background-color: rgb(230,250,255);
	margin-top: 6px;
	margin-right: 12px;
	margin-bottom: 6px;
	margin-left: 12px;
}

.dk-h1-span {
	font-size: 130%;
	font-style: italic;
	text-shadow: 2px 2px 2px grey;
	color: white;
	background-color: rgb(210,230,255);
	padding: 10px;
	}

.dk-h2-div {
	font-size: 120%;
	width: 60%;
	background-color: rgb(210,230,255);
	padding: 0px 1px 0px 1px;
	}

/* Für das Dropdown und die Checkboxes der 'Configbar' */
.dk-div-configbar {
	float: right;
	margin: 4px 0px 4px 18px;
	border: 1px solid;
	border-color: #DDDDDD;
	padding: 8px;
	}

/* Für die Butttons der 'Navigbar' */
.dk-btn-navigbar {
	float: left;
	margin: 4px 18px 4px 0px;
	padding: 8px;
	}

/* Für die Paginationsbereiche */
.dk-txt-pagination-normal {
	float: left;
	margin: 4px 10px 4px 0px;
	padding: 4px;
	}
.dk-txt-pagination-marker {
	float: left;
	margin: 4px 10px 4px 0px;
	padding: 4px;
	background-color: rgb(190,210,255);
	}

/* Die kleinen Bilder, die 'aufblasen' (siehe auch übernächste Definition) */
.dk-img-small-blowup {
	height: 100px;
	position: relative;
	margin-right: 12px;
	margin-bottom: 9px;
	cursor: pointer;
	opacity: 0.9;
	}
.dk-img-small-blowup:hover {
	transition: 0.3s ease;
	transform: scale(1.15, 1.15);
	opacity: 1;
	}

.dk-img-small-border-light {
	border: 1px solid gray;
	}
.dk-img-small-border-strong {
	border: 3px solid rgb(127,0,255);
	}

.dk-div-small-for-pdf {
	float: left;
	height: 94px;
	width: 120px;
	background-color: rgb(250,250,250);
	padding: 3px;
	word-break: break-all;
	}
.dk-div-small-for-url {
	float: left;
	height: 94px;
	width: 120px;
	background-color: rgb(210,210,210);
	padding: 3px;
	word-break: break-all;
	}

/* Das Haupt-Div für das grosse Bild soll 80% des Bildschirms belegen */
.dk-div-main-block {
	display: inline-block;
	float: left;
	text-align: center;
	/* width: 80%; */
	height: auto;
	}
/* @media screen and (min-width: 1000px) */
/* @media screen and (min-aspect-ratio: 16/9) */
/* @media screen and (orientation: landscape) */
/* http://www.w3.org/TR/css3-mediaqueries/#orientation */
@media screen and (min-width: 1000px) {
	.dk-div-main-block  {
		width: 80%;
		}
	}
/* @media screen and (max-width: 1000px) */
/* @media screen and (max-aspect-ratio: 16/9) */
/* @media screen and (orientation: portrait) */
/* http://www.w3.org/TR/css3-mediaqueries/#orientation */
@media screen and (max-width: 1000px) {
	.dk-div-main-block  {
		width: 100%;
		}
	}

/* Das Bild selber soll 80% von den  80% des 'Main'-Divs belegen => ~64% (0.80*0.80) des Bildschirms
                   bzw. 80% von den 100% des 'Main'-Divs belegen => ~80% (0.80*1.00) des Bildschirms */
.dk-div-image-block {
	display: inline-block;
	vertical-align: middle;
	width: 80%;
	height: auto;
	}

/* Die Pfeile links und rechts sollen jeweils 9% von den  80% des 'Main'-Divs belegen => ~7% (0.09*0.80) des Bildschirms
                                 bzw. jeweils 9% von den 100% des 'Main'-Divs belegen => ~9% (0.09*1.00) des Bildschirms */
.dk-div-arrow-block {
	display: inline-block;
	vertical-align: middle;
	width: 9%;
	height: auto;
	}

/* Für die 'Landscape'-Bilder (es entspricht dem 'normal' Fall) soll die "width" angegeben werden, */
/* nicht die "max-width", sonst werden die Bilder schmaller wenn die Höhe verkleinert wird.        */

/* Für die 'Portrait'-Bilder sollen die Breite und die Höhe angegeben werden, damit das Bild durch */
/* die gegebene Breite (98%) nicht zu hoch wird.   Aber Achtung, wenn für ein Bild die Breite      */
/* und die Höhe angegeben werden sollen, müssen beide Werte als 'max' formuliert werden, also      */
/* "max-width" und "max-height", sonst wird das Bild verzerrt beim vergrössern / verkleinern.      */

/* Für die 'PDF' und die 'URL' muss die "width" angegeben werden, nicht die "max-width", sonst ist */
/* das was im Browser angezeigt wird sehr schmall; siehe weiter unten noch ".dk-img-large-height". */

/* Das Haupt-Bild soll das 'Image'-Div komplett füllen (98% anstatt 100% damit es mit den Rändern trotzdem zentriert ist) */
.dk-img-large-basis {
	/* height: auto; */   /* 'auto' ist Default; wenn es nicht explizit angegeben wird, kann es noch überschrieben werden */
	vertical-align: middle;
	margin-top: 6px;
	margin-bottom: 6px;
	border: 2px solid;
	border-color: #2020FF;
	border-radius: 2%;
	}
.dk-img-large-normal {	/* Für Bilder entspricht es 'Landscape' */
	width: 98%;
	}
.dk-img-large-portrait {
	max-width: 98%;
	max-height: 90vh;
	}

/* Die Höhe für 'PDF' und 'URL' kann leider nicht in "%" angegeben werden, funktioniert nicht ...   */
/* Sie kann aber in "%" vom 'Viewport' (Browser Window Size) angegeben werden, siehe weiter unten ! */
/*
@media screen and (min-height: 900px) {
	.dk-img-large-pdfurl {
		width: 98%;
		height: 900px;
		}
	}
@media screen and (max-height: 900px) {
	.dk-img-large-pdfurl {
		width: 98%;
		height: 450px;
		}
	}
*/
.dk-img-large-pdfurl {
	width: 98%;
	height: 90vh;
	}

/* Das Pfeil-Bild soll das 'Arrow'-Div komplett füllen (100%) */
.dk-img-icon-next-yes {
	width: 100%;
	height: auto;
	vertical-align: middle;
	}
.dk-img-icon-next-not {
	width: 100%;
	height: auto;
	vertical-align: middle;
	opacity: 0.5;
	}

/* Der 'Playaudio'-Buttton soll das 'Main'-Div zu 60% füllen */
.dk-btn-playaudio {
	width: 60%;
	height: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	border: 4px solid;
	border-color: #2020FF;
	border-radius: 4px;
	padding: 6px;
	font-weight: bold;
	background-color: #BBCCFF;
	}

/* Das Text-Div soll 20% des Bildschirms belegen (80% wird bereits für das Haupt-Div gebraucht) */
.dk-div-text-block {
	float: left;
	/* width: 19%; */
	/* min-width: 200px; */
	height: auto;
	margin-top: 30px;
	margin-bottom: 0px;
	border: 2px solid;
	border-color: #2020FF;
	border-radius: 2%;
	padding: 4px;
	}
/* @media screen and (min-width: 1000px) */
/* @media screen and (min-aspect-ratio: 16/9) */
/* @media screen and (orientation: landscape) */
/* http://www.w3.org/TR/css3-mediaqueries/#orientation */
@media screen and (min-width: 1000px) {
	.dk-div-text-block  {
		width: 17%;
		margin-left: 16px;	/* um nach rechts zu versetzen (Abstand zum Bild) */
		}
	}
/* @media screen and (max-width: 1000px) */
/* @media screen and (max-aspect-ratio: 16/9) */
/* @media screen and (orientation: portrait) */
/* http://www.w3.org/TR/css3-mediaqueries/#orientation */
@media screen and (max-width: 1000px) {
	.dk-div-text-block  {
		width: 80%;
		margin-left: 9%;	/* um zu zentrieren (gegenüber obenstehendem Bild)*/
		}
	}