body {
	font-family: sans-serif;
	background-color: gray;
}

h1 {
	color: white;
	font-size: 1.8em;
	font-weight: normal;
	margin-top: 0em;
	margin-left: 0.3em;	
}
/* Hauptanzeige */
#container {
	width: 1000px;
	margin: auto;
}

#flag {
	background-color: rgb(18,10,190);
  background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 1) 10%);
	background-size: 50% 22.5%;
	height: 4.5em;
	width: 6.5em;
	margin-bottom: 0.5em;
	margin-top: 1em;
	margin-left: 0.5em;
}
#flag > div:nth-Child(1) {
	position: relative;
	background-color: rgb(18,10,190);
	height: 2.5em;
	width: 2.5em;
 }
#flag > div:nth-Child(2) {
	position: relative;
	background-color: white;
	height: 2.6em;
	width: 0.5em;
	top: -2.5em;
	left: 1em;
 }
#flag > div:nth-Child(3) {
	position: relative;
	background-color: white;
	height: 0.5em;
	width: 2.5em;
	top: -4.1em;
	left: 0em;
 }

#anzeige{
	color: #888;
	background-color: #444;
	padding: 0.5em;
	cursor: pointer;
	width: 100%;
}

#anzeige:hover {
	background-color: #555;
	color: #fff;
}

/* Suchfeld */
#search-container {
  display: grid;
  grid-template-columns: 2em auto 4em;
  grid-gap: 0.2em;
  background-color: #aaa;
  padding: 0.5em;
  width: 100%;
}
#search-container > div {
  text-align: center;
  font-size: 1em;
  line-height: 1.2em;
  padding: .2em .4em;
  border: 1px solid #fff;
  border-radius: 3px;
  font-size: 1.2em;
  color: #fff; 
  background-color: #000;
}
#search-container > div > input {
  text-align: center;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  color: #0f0; 
  background-color: #000;
  width: 100%;
}
#search-container > div:hover {
  background-color: rgba(255,0,0,0.7);
  border: 1px solid red;  
  color: #fff;
  cursor:pointer;
}

/* Tastatur */
#keyb-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-gap: 0.2em;
  background-color: #aaa;
  padding: 0.5em;
  width: 100%;
}
#keyb-container > div {
  text-align: center;
  vertical-align: middle;
  font-size: 1em;
  line-height: 1.2em;
  padding: .2em .4em;
  border: 1px solid #fff;
  border-radius: 3px;
  font-size: 1.2em;
  color: #fff; 
  background-color: #000;
  cursor: pointer;
}
#keyb-container > div:hover {
  background-color: rgba(255,0,0,0.7);
  border: 1px solid red;  
  color: #fff;
  cursor:pointer;
}

#clipboard {
width: 0%;
height: 0;
background-color: gray;
border: none;
}

#showCopy {
	display: none;
	background-color: #aaa;
	color: #555;
	text-align: center;
	padding: 0.5em;
	margin-bottom: 0.5em;
  width: 100%;
}

/* Suchergebnis */
#suchergebnis {
  display: none;
  grid-template-columns: auto auto;
  grid-gap: 0.2em;
  background-color: #fff;
  padding: 0.5em;
  width: 100%;
}
#suchergebnis > div {
  padding: 0.5em;
  cursor: pointer;
}
#suchergebnis > div:nth-child(odd) {
  font-weight: bold;
  text-align: right;
}
#suchergebnis > div:nth-child(odd):hover {
  background-color: #0080ff;
}
#suchergebnis > div:nth-child(even):hover {
  background-color: #ffff00;
}
/* setup */
#setup_aktiv {
  width: 100%;
  background-color: #444;
  color: #888;
  padding: 0.5em;
  grid-template-columns: auto auto auto auto;
  grid-gap: 0.2em;
  display: grid;
}

#setup_aktiv > div {
 padding: 0.5em;
 cursor: pointer;
 }

#setup_aktiv > div:hover {
 background-color: #888;
 color: white;
 }

#setup_aktiv > div > input {
 margin-right: 0.5em;
 cursor: pointer; 
 }

/* Status */
#status_1 {
  grid-template-columns: 4em auto 4em;
  background-color: #333;
  padding: 0.5em;
  width: 100%;
  display: grid;
  color: white;
  display: none;
}
#status_1 > div:nth-child(1) {
  text-align: center;
  font-size: 1.0em;
  line-height: 1.0em;
  padding: 0.5em;
  color: rgb(255,128,0);
  cursor: pointer;
  border-bottom: 0.5em solid #0f0;
}
#status_1 > div:nth-child(1):hover {
  color: #fff;
  background-color: #888;
}

#status_1 > div:nth-child(2) {
  text-align: center;
  font-size: 1.0em;
  line-height: 1.0em;
  padding: 0.5em;
}
#status_1 > div:nth-child(3) {
  text-align: center;
  font-size: 1.0em;
  line-height: 1.0em;
  padding: 0.5em;
  color: rgb(100,100,100);
  cursor: pointer;  
  border-bottom: 0.5em solid #555; 
}
#status_1 > div:nth-child(3):hover {
  color: #fff;
  background-color: #888;
}
#status {
  grid-template-areas:
   'ell ger'
   'regel id';
  background-color: #333;
  padding: 0.5em;
  width: 100%;
  display: grid;
  color: white;
  display: none;
}
	
#status > div:nth-child(1) {
  font-size: 1.3em;
  line-height: 1.0em;
  padding: 0.5em;
  color: #0a0;
  font-weight: bold;
  text-align: right;
  border-top: 1px solid gray; 
  border-bottom: 1px solid gray;  
  grid-area: ell;  
}
#status > div:nth-child(2) {
  font-size: 1.3em;
  line-height: 1.0em;
  padding: 0.5em;
  color: #dd0;
  font-weight: bold;
  text-align: left;
  border-top: 1px solid gray; 
  border-bottom: 1px solid gray;     
  grid-area: ger;
}	
#status > div:nth-child(3) {
  line-height: 1.0em;
  padding: 0.5em;
  font-size: 0.9em;
  color: white;
  text-align: right;
  cursor: pointer;  
  grid-area: regel;
}
#status > div:nth-child(4) {
  font-size: 1.0em;
  line-height: 1.0em;
  padding: 0.5em;
  color: gray;
  text-align: left;   
  grid-area: id;
}

/* Konjugationsanzeige */
#grid-container {
  grid-template-columns: auto auto auto auto;
  grid-gap: 0.2em;
  background-color: #fff;
  padding: 0.5em;
  width: 100%;
  display: none;
}

#grid-container > div {
  text-align: right;
  font-size: 1em;
  line-height: 1.2em;
  padding: 0.5em;
  border-radius: 5px;
}	

#ind_praes, #ind_aor, #konj_praes, #konj_aor, 
#ind_perf, #konj_perf, #opt, 
#imperfekt, #plusquamperfekt, #kond_praes, #kond_perf, 
#fut_cont, #fut_einmal, #fut_perf, 
#imp_praes, #imp_aor, #part_praes, #part_perf
 {
  border-top: 1px solid black;
  color: black;
  text-align: left;
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 0.2em;
  padding: 0.3em;
  cursor: pointer;
  grid-template-columns: auto;
  grid-gap: 0.2em;
  display: grid;
}	

#ind_praes, #ind_aor, #konj_praes, #konj_aor, 
#ind_perf, #konj_perf, #opt, 
#imperfekt, #plusquamperfekt, #kond_praes, #kond_perf, 
#fut_cont, #fut_einmal, #fut_perf, 
#imp_praes, #imp_aor, #part_praes, #part_perf > div
 {
  line-height: 1.5em;
}	

.praesens {
  border: 1px solid gray;
	background-color: rgba(160, 180, 255, 1);
	color: navy;
}

.imppraesens {
  border: 1px solid gray;
	background-color: rgba(180, 180, 220, 1);
	color: navy;
}
.imperfekt {
  border: 1px solid gray;
	background-color: rgba(160, 180, 255, 0.3);
	color: navy;
}
.aorist {
  border: 1px solid gray;
	background-color: rgba(120, 255, 160, 0.3);
	color: darkgreen;
}
.konjaorist {
  border: 1px solid gray;
	background-color: rgba(120, 255, 160, 0.5);
	color: darkgreen;
}
.perfekt {
  border: 1px solid gray;
	background-color: rgba(100, 255, 140, 0.7);
	color: darkgreen;
}
.impaorist {
  border: 1px solid gray;
	background-color: rgba(40, 255, 40, 0.5);
	color: darkgreen;
}
.noShow {
  border: 1px solid gray;
	background-color: silver;
	color: black;
	cursor: pointer;
	display: none;
}
.leer {
   display: block;
}


@media only screen and (max-width: 420px) {
body {
/*	border: 0.5em red solid;*/
	}

/* Hauptanzeige */
#container {
	width: 100%;
	margin: auto;
}

/* Suchfeld */
#search-container {
  display: grid;
  grid-template-columns: 2em auto 4em;
  grid-gap: 0.2em;
  background-color: #aaa;
  padding: 0.5em;
  width: 95%;
}
#search-container > div {
  text-align: center;
  font-size: 1em;
  line-height: 1.2em;
  padding: .2em .4em;
  border: 1px solid #fff;
  border-radius: 3px;
  font-size: 1.2em;
  color: #fff; 
  background-color: #000;
}

#search-container > div > input {
  text-align: center;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  color: #0f0; 
  background-color: #000;
  width: 100%;
}
#search-container > div:hover {
  background-color: rgba(255,0,0,0.7);
  border: 1px solid red;  
  color: #fff;
  cursor:pointer;
}

/* Tastatur */
#keyb-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-gap: 0.2em;
  background-color: #aaa;
  padding: 0.5em;
  width: 95%;

}
#showCopy {
	margin-bottom: 0.5em;
  width: 95%;
}

/* Suchergebnis */
#suchergebnis {
  display: none;
  grid-template-columns: auto auto;
  grid-gap: 0.2em;
  background-color: #fff;
  padding: 0.5em;
  width: 95%;
}
#setup_aktiv {
  grid-template-columns: auto;
  width: 95%;
}

/* Status */
#status_1 {
  grid-template-columns: 3em auto 3.5em;
  background-color: #333;
  padding: 0.5em;
  width: 95%;
  display: grid;
  color: white;
  display: none;
}
#status_1 > div:nth-child(1) {
  text-align: center;
  font-size: 0.8em;
  line-height: 1em;
}	
#status_1 > div:nth-child(2) {
  text-align: center;
  font-size: 0.8em;
  line-height: 1em;
}	
#status_1 > div:nth-child(3) {
  text-align: center;
  font-size: 0.8em;
  line-height: 1em;
}	

#status {
  grid-template-areas:
   'ell'
   'ger';
  background-color: #333;
  padding: 0.5em;
  width: 95%;
  display: grid;
  color: white;
  display: none;
}



#status > div:nth-child(1) {
  text-align: center;
  font-size: 1.1em;
  line-height: 1em;
  padding: 0.2em;
  border-bottom: none;
  margin-top: 0.2em;
}	
#status > div:nth-child(2) {
  text-align: center;
  font-size: 1.1em;
  line-height: 1em;
  padding: 0.2em;
  border: none;  
}	
#status > div:nth-child(3) {
  display: none;
}
#status > div:nth-child(4) {
  display: none; 
}	

/* Konjugationsanzeige */
#anzeige{
	width: 95%;
}

#grid-container {
  grid-template-columns: auto;
  width: 95%;
}

.leer {
   display: none;
}

}