/* 
	CSS- Datei: school.css
*/

html {
	scroll-behavior: smooth;
}

dt {
	font-weight: 700;
	font-variant: small-caps;
	letter-spacing: 0.15em;
	font-size: 110%;
	color: rgb(183, 190, 207);
}
ul {
	padding-left: 0;
}
ul li {
	font-weight: 700;
	color: rgb(0, 79, 159);
	cursor: pointer;
}
ul li:hover {
	color: rgb(227, 6, 19);
}

.thinSpace {
	display: inline-block;
	width: 0.1em;
}

.notStrong {
	font-weight: 400;
}

.uppercaseLetterSpace {
	letter-spacing: 0.15em;
	font-variant: small-caps;
	/* text-transform: uppercase; */
}

.spacerHalfLine {
	height: 0.5em;
}

.posRelWrap {
	position: relative;
}

.inSchool {
	margin-left: 1.5em;
	font-size: 98%;
	padding-right: 0.5em;
	text-align: justify;
}
#box4form {
	display: none;
}


.asSubHeader {
	margin-bottom: 1.5em;
	margin-top: -0.25em;
	padding-left: 1em;
}

.captionInForm {
	position: relative;
	width: 100%;
	font-size: 1em;
	color: rgb(0, 79, 159);
	/* background-color: rgb(0, 79, 159); */
	padding: 0 0em 0.155em 0em;
	margin-top: 0;
}
.black {
	color: black;
}
.expandArrow {
	position: absolute;
	right: 0.0em;
	top: -0.25em;
	font-size: 160%;
	background-color: rgb(183, 190, 207);
	border-radius: 50%;
	padding: 0 0.38em 0.1em 0.38em;
	cursor: pointer;
}
.expandArrow:hover {
	transform: rotate(90deg);
}
.horizontal {
	transition: transform 0.15s ease;
}
.downwards {
	transform: rotate(90deg);
	transition: transform 0.25s ease;
}
.downwards:hover {
	transform: rotate(-90deg);
}

.block4Form {
	position: relative;
	padding-top: 0.4em;
	margin-bottom: 0.1em;
	transition: all 0.5s ease-in-out;
}
.block4Form:last-child {
	margin-top: 0.25em;
}
.withBottomLine {
	border-bottom: solid 0.3vmin;
}

/* Menü aus und Einklappen */
.collapsed {
	height: 2.3em;
	overflow: hidden;
}
/* 
.collapsed h4 {
	margin-bottom: 0.25em;
}
 */
/* Klassen für individuelle Ausklapphöhe des Unterpunkte des Formulars */
.heightPresets {
	height: 33.2em;
	overflow: hidden;
}
.heightSensor {
	height: 7.0em;
	overflow: hidden;
}
.heightFocalLength {
	height: 13.1em;
	overflow: hidden;
}
.heightAperture {
	height: 22.5em;
	overflow: hidden;
}
.heightFcDist {
	height: 17.7em;
	overflow: hidden;
}
.heightSpeed {
	height: 9.8em;
	overflow: hidden;
}
.heightISO {
	height: 8.5em;
	overflow: hidden;
}

#techForm {
	text-align: left;
}
.line4Form {
	position: relative;
	width: 100%;
}

#techForm label, #techForm input {
	display: inline-block;
	width: auto;
	font-size: 100%;
}

input[name="framesize"] {
	margin-right: 2em;
}

.sliderLine {
	line-height: 1.75em;
}
.secondOf2 {
	margin-bottom: 1.25em;
}

input[type="number"] {
	display: inline-block;
	position: absolute;
	right: 0;
	text-align: right;
}

#techForm input[type="range"] {
	display: inline-block;
	width: 12em;
	padding: 0;
	margin: 0;
	position: relative;
	top: 0.3em;	/* Chrome bräuchte die Hälfte: 0.15em */

}

.dynamicOutput {
	position: absolute;
	right: 0;
	bottom: 0;
	font-weight: 700;
}
.alignRight {
	position: absolute;
	right: 0;
}

#outputLenChosen {
	display: inline-block;
	width: 4.4em;
	text-align: right;
}

#imgSearch {
	width: 100%;
}

#outputLenChosen {
	display: inline-block;
	margin-left: 0;
}

#fcLen4Search {
	display: inline-block;
	width: 11em;
	text-align: right;
}

input#fcLenAsNum, input#fcTolAsNum {
	width: 6em;
}

.topicBlock {
	margin-bottom: 1em;
}
.indented {
	margin-left: 2em;
}

.yellowButton {
	background-color: rgb(183, 190, 207);
	cursor: pointer;
}
.yellowButton:hover {
	background-color: rgb(255, 221, 0);
}
.smallBut {
	position: absolute;
	right: 0.5em;
	bottom: -0.55em;
	font-size: 85%;
}
.blueButton {
	position: absolute;
	right: 0;
}

@media only screen and (min-width: 680px) {
	.collapsed {
		height: 2.4em;
		overflow: hidden;
	}
	.smallBut {
		bottom: auto;
		top: 0;
	}
}

@media only screen and (min-width: 780px) {
	.smallBut { 
		right: -1em;
	}
	.mediumBut {
		font-size: 100%;
		right: -1.65em;
	}
}


@media only screen and (min-width: 940px) {
	.inSchool {
		width: 70%;
	}
}

@media only screen and (min-width: 1020px) {

	.inSchool {
		margin-left: 3.4em;
		font-size: 100%;
	}

	.smallBut {
 		right: 2em;
 	}
 	
 	.mediumBut {
 		right: 0;
 	}
 	.h3min1020 {
 		font-weight: 700;
 	}
}

@media only screen and (min-width: 1080px) {
	p.inSchool {
		width: 43vmax;
		margin-left: 2.0em;
	}
/* 
	.smallBut {
		right: auto;
		bottom: auto;
		left: 35vmax;
		top: 0;
	}
 */
	.smallBut {
 		right: 1.0em;
 	}
}

/* 
@media only screen and (min-width: 1280px) {

	p.inSchool {
		margin-left: auto;
		margin-right: auto;
		width: 640px;
	}
}
 */

/*
Die FARBEN
Blau:
0, 79, 159

Rot:
227, 6, 19

Gelb
255, 221, 0

Grau
183, 190, 207

Hellgrau
235, 233, 233

Weiß
246, 246, 246

Filmschwarz
32, 13, 0
*/