@CHARSET "ISO-8859-1";

/* 
 * Legt einen Stil für den Vokabeltrainer fest. Dieser Stil ist aber nicht notwendig und kann in anderen Anwendungen geändert werden.
 */


html, body {
	margin:			0;
	padding:		0;
	height:			100%;
	background:		#CCCCCC;
	cursor:			default;
	overflow:		hidden;
	font-family:	Helvetica,sans-serif;
}

#nachricht {
	position:		absolute;
	padding:		5px;
	z-index:		2;
	top:			calc( 50% - 104px );
	height:			200px;
	left:			calc( 50% - 204px );
	width:			400px;
	display:		none;
	background:		#CCCCCC;
	border:			2px solid #CCCCCC;
}

#nachricht.fehler-nachricht {
	border:			2px solid #FF2222;
}

#nachricht.erfolgs-nachricht {
	border:			2px solid #77BB99;
}

#nachricht #text {
	max-height:			150px;
	overflow-y:			auto;
}

#nachricht #titel {
	font-size:		140%;
	font-weight:	bold;
}

#nachricht #schliessen {
	position:		absolute;
	bottom:			0;
	width:			100px;
	left:			140px;
}

#anmelde-benachrichtigung {
	visibility:		hidden;
	color:			#FF2222;
}

#wrapper {
	position:		absolute;
	z-index:		1;
	top:			0;
	height:			100%;
	width:			100%;
	background:		url('./library.jpg');
}

.maske {
	max-height:		100vh;
	padding:		5px;
	width:			calc( 80% - 10px );
	left:			10%;
	top:			8%;
	position:		absolute;
	z-index:		5;
	background:		#EEEEEE;
}

.maske-kopf {
	text-align:		center;
	font-size:		150%;
	font-weight:	bold;
}

.maske-inhalt {
	border-top:		2px solid #77BB99;
	min-height:		70vh;
	padding:		3px;
	max-height:		70vh;
	overflow-y:		auto;
}

.maske-buttons,
.abschnitt-linie {
	border-top:	 	2px solid #77BB99;
}

#impressum {
	position:		absolute;
	z-index:		100;
}

a {
	color:			#448866;
}

a:hover {
	color:			#77BB99;
}

.button {
	background:		#77BB99;
	max-width:		200px;
	padding:		5px;
	cursor:			pointer;
	margin:			5px 5px 0 5px;
	display:		inline-block;
	text-align:		center;
	border-radius:	2px;
	color:			#EEEEEE;
}

.impressum-button {
	float:			right;
}

.wortschatz-button {
	display:		inline-block;
	min-width:		80px;
	float:			right;
}

.button:hover {
	background:		#559977;
}

.wortschatz-maske .beschriftung-oben {
	vertical-align:	baseline;
	padding-top:	5px;
}

.wortschatz-maske td:first-child {
	width:			120px;
}

.wortschatz-maske td:last-child {
	width:			90%;
}

.wortschatz-zeile h3 {
	margin:			5px 5px 0 5px;
	display: 		inline-block;
}

.wortschatz-zeile div {
	max-width:		70%;
}

.wortschatz-zeile:not(:last-of-type) {
	border-bottom:	1px solid #559977;
}

.wort-liste-eintrag:nth-of-type( 2n ) {
	background:		#DDDDDD;
}

.wort-liste-eintrag:hover {
	background:		linear-gradient( #AADDBB 80%, #BBDDCC );
}

.wort-liste-eintrag > div {
	display:		inline-block;
	padding:		5px;
	vertical-align:	middle;
}

.wort-liste-eintrag > div {
	width:			calc( 20% - 10px );
}

#wort-liste .button-wrapper {
	padding:		0px;
}

#wort-liste .button-wrapper > div {
	display:		inline-block;
	width:			calc( 50% - 1px );
	padding:		0;
}

.wort-liste-eintrag .button {
	display:		block;
	opacity:		.3;
}

.wort-liste-eintrag:hover .button {
	opacity:		1;
}

#anzeigen .maske-buttons {
	display: 		flex;
}

#anzeigen .maske-buttons .button {
	max-width:		200px;
}

#anzeigen .maske-buttons input {
	flex-basis:		-moz-available;
	flex-basis:		-webkit-available;
	flex-basis:		-ms-available;
	flex-basis:		-o-available;
	flex-basis:		available;
}

#frage, #loesung, #anzeigen, #neues-wort, #wort-bearbeiten {
	background:		#FFFFEE;
}

#loesung .maske-buttons .button {
	position:		relative;
	left:			200px;
}

#wort-liste {
	width:			100%;
	word-wrap:		break-word;
}

#wort-liste .button {
	margin:			1px 5px;
	padding:		4px 2px;
}

.maske-buttons .button:hover {
	padding-bottom:	3px;
	border-bottom:	2px solid #338844;
}

.wort-eingabe {
	height:			100px;
	max-height:		100px;
	min-height:		100px;
	width:			80%;
	max-width:		80%;
	min-width:		80%;
	display:		block;
	word-wrap:		break-word;
	outline:		none;
	resize:			none;
	white-space:	pre-wrap;
}

#suchfeld {
	width:			calc( 100% - 445px );
	margin-top:		5px;
	border-radius:	2px;
	background:		#DDEEDD;
}

#suchfeld:focus {
	border-color:	#66AA99;
	background:		#DDE8DD;
}

div.wort {
	background:		#CCCCCC;
	padding:		5px;
	width:			50%;
	font-size:		200%;
}

input, textarea {
	border:			1px solid #77BB99;
	padding:		5px;
	font:			inherit;
}

input:focus, textarea:focus {
	border-width:	2px;
	padding:		4px;
}

.ganzer-eintrag {
	display:		none;
}