@charset "utf-8";
/* CSS Document */
@import url("./definitions.css");
@import url("./defPopup.css");

@font-face {
  font-family: 'articleText01';
  src: local('Work Sans'),
       url('../../../fonts/Cardo-Bold.woff');
}

.extraTabs {
	display:flex; flex-direction: row;
	margin:0 auto; padding:0;
}
.extraTabs button {
  display: block; width:8.5em; height:2.5em;
  background-color: GAINSBORO; color: black;
  padding: 10px 5px; margin:3px;
  cursor: pointer; outline: none;
  font-family: 'header-big'; font-size: 12pt; line-height: 1;
	text-align: center; font-weight: bold;
  border: none;
  transition: 0.3s;
}
.GrammatikSubT {
	font-family: 'header-big'; font-size: 14pt; font-weight: bold;
	text-decoration: underline; letter-spacing: 1px;
	padding: 0 5px 0; margin:12px 0 0 15px;
	color:DIMGRAY;
}
/* parts of the speech Tabs o*/
.partsTabs .N:hover {
	background-color:YELLOWGREEN; color: black;
}
.partsTabs .V:hover {
	background-color:DODGERBLUE; color: white;
}
.partsTabs .Adv:hover {
	background-color:#ee82ee; color: black;
}
.partsTabs .Art:hover {
	background-color:#b5651d; color: white;
}
.partsTabs .Pro:hover {
	background-color:#ef3038; color: white;
}

.N.active {
	display:inline; padding:1px 3px;
	background-color:YELLOWGREEN; color: black;
}
.V.active {
	display:inline; padding:1px 3px;
	background-color:DODGERBLUE; color: white;
}
.Adv.active {
	display:inline; padding:1px 3px;
	background-color:#ee82ee; color: black; /*lavender magenta*/
}
.Art.active {
	display:inline; padding:1px 3px;
	background-color:#b5651d; color: white; /*light brown*/
}
.Pro.active {
	display:inline; padding:1px 3px;
	background-color:#ef3038; color: white; /*Deep carmine pink*/
}
/* parts of the speech Tabs x*/



/* Zeitformen Tabs o*/
.ZeitTabs .Praes:hover {
	background-color:forestgreen; color:white;
}
.ZeitTabs .Perf:hover {
	background-color:#ff6700; color:white;
}
.ZeitTabs .Praet:hover {
	background-color:#c2b280; color:black;
}
.ZeitTabs .Pqperf:hover {
	background-color:#fff600; color:black;
}

.Praes.active {
	display:inline; padding:4px 6px;
	background-color:forestgreen; color:white;
}
.Perf.active {
	display:inline; padding:4px 6px;
	background-color:#ff6700; color:white;
}
.Praet.active {
	display:inline; padding:4px 6px;
	background-color:#c2b280; color:black;
}
.Pqperf.active {
	display:inline; padding:4px 6px;
	background-color:#fff600; color:black;
}
/* Zeitformen Tabs x*/

/* Satztypen o*/
.SatzTyp .NS:hover {
	background-color:#702963; color:white;
}
.NS.active {
	display:inline; padding:8px 10px;
	background-color:#702963; color:white;
}
/* Satztypen x*/




#Grammatik .aInteractTitle {
	margin:5px 0 0 0;
}

.aInteractDiv {
	display:block; width: 100%;
	margin: 0; padding: 0px;
}


.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}
.tabset .tab-panel {
  display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}
.tabset > label {
  position: relative; display: inline-block; min-width: 6em;
  padding: 15px; margin:0;
  border: 2px solid transparent; border-bottom: 0;
  cursor: pointer;
	font-family: 'article-title'; font-size: 17pt;
	font-weight: bold; text-align: center;
	color:DIMGRAY;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: black; background-color: PALEGREEN;
}

.tabset > input:checked + label {
  /*border-color: green;*/ border-top: 2px solid green; border-left: 2px solid green; border-right: 2px solid green;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
	background-color: white; color:green;
}
.tabset > input:first-child:checked + label {
  border-left: none;
}

.tab-panel {
  padding: 20px 0; margin:0;
  border-top: 2px solid green;
}

.quelle_block {
	display:block;
	font-size:16pt; font-weight: bold; font-family: 'header-big';
	margin:5px 2% 5px auto;
	text-align: right;
}
.quelle_link {
	text-decoration: none!important;
	background-color: yellow; color: black;
	padding:0 4px;
	font-size:13pt; font-weight: normal;
}
.quelle_link:hover {
	background-color: greenyellow; color: black;
}









.aInteract {
	display:block; width: 100%; min-height:5em;
	margin: 20px 0 0 0; padding:20px 40px;
	background-color: whitesmoke;
}
.aInteractTitle {
	font-family: 'articleText01'; font-size: 23pt; font-weight: bold;
	text-align: center;
	
	overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.aInteractText {
	font-family: 'articleText01'; font-size: 17pt; line-height: 1.75;
	text-align: justify;
	
	overflow-wrap: break-word;
  word-wrap: break-word;
	
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
	
	-webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 2; /* For Safari */
  -ms-hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-chars: 6 3 2;
	
	-webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;   
  -webkit-hyphenate-limit-zone: 8%;
	hyphenate-limit-lines: 2;   
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
	
	-ms-word-break: normal;
  word-break:normal;
	white-space: normal;
}
.hlighted {
	padding:1px 3px;
	cursor:pointer;
	border: solid 2px transparent;
}
.hlighted_merged {
	border-radius: 8px;
}
.hlighted:hover {
	padding:1px 3px;
	cursor:pointer;
	background-color: transparent!important; color:black!important;
	border: solid 2px black;
}

/* 34 colours in alphabetical order */
.hlighted_2 {
	background-color: blue; color:white;
}
.hlighted_27 {/*Boston University Red*/
	background-color: #cc0000; color:white;
}
.hlighted_15 {/*Cadmium yellow*/
	background-color: #fff600; color:black; 
}
.hlighted_16 {/*Café au lait*/
	background-color: #a67b5b; color:white; 
}
.hlighted_7 { /*Cal Poly Pomona green*/
	background-color: #1e4d2b; color:white; 
}
.hlighted_18 {/*Cerise pink*/
	background-color: #ec3b83; color:white; 
}
.hlighted_19 {/*Chartreuse*/
	background-color: #7fff00; color:black; 
}
.hlighted_22 {/*Chrome yellow*/
	background-color: #ffa700; color:black; 
}
.hlighted_20 {/*Cinnamon*/
	background-color: #d2691e; color:white; 
}
.hlighted_23 {/*Cobalt*/
	background-color: #0047ab; color:white; 
}
.hlighted_14 {
	background-color: crimson; color:white;
}
.hlighted_8 {
	background-color: DARKORANGE; color:white;
}
.hlighted_25 {
	background-color: DEEPPINK; color:white;
}
.hlighted_3 {
	background-color: gold; color:black;
}
.hlighted_21 {
	background-color: MEDIUMPURPLE; color:white;
}
.hlighted_9 {
	background-color: KHAKI; color:black;
}
.hlighted_32 {/*Lemon*/
	background-color: #fff700; color:black;
}
.hlighted_34 {/*Maize*/
	background-color: #fbec5d; color:black;
}
.hlighted_13 {
	background-color: NAVAJOWHITE; color:black;
}
.hlighted_33 { /*North Texas Green*/
	background-color: #059033; color:white;
}
.hlighted_31 {
	background-color: ORANGERED; color:black;
}
.hlighted_10 {
	background-color: PALETURQUOISE; color:black;
}
.hlighted_6 {
	background-color: PINK; color:black;
}
.hlighted_29 { /*Rich electric blue*/
	background-color: #0892d0; color:white;
}
.hlighted_30 { /*Rich lilac*/
	background-color: #b666d2; color:white;
}
.hlighted_12 {
	background-color: ROSYBROWN; color:white;
}
.hlighted_5 {
	background-color: SADDLEBROWN; color:white;
}
.hlighted_28 {/*Scarlet*/
	background-color: #ff2400; color:white;
}
.hlighted_4 {
	background-color: SEAGREEN; color:white;
}
.hlighted_26 {
	background-color: SILVER; color:black;
}
.hlighted_11 {
	background-color: STEELBLUE; color:white;
}
.hlighted_24 {
	background-color: TEAL; color:white;
}
.hlighted_17 {
	background-color: TOMATO; color:white;
}
.hlighted_1 {
	background-color: violet; color:white;
}



.same {
	padding:1px 4px;
	cursor:pointer;
	border: solid 2px transparent;
}
.same:hover {
	padding:1px 4px;
	cursor:pointer;
	background-color: transparent!important; color:black!important;
	border: solid 2px black;
}
.same_o {
	border-radius: 8px 0 0 8px;
}
.same_x {
	border-radius: 0 8px 8px 0;
}


/* 16 colours  in alphabetical order */

.same_15 {
	background-color: CHOCOLATE; color:white;
}
.same_3 {/*Electric purple*/
	background-color: #bf00ff; color:white; 
}
.same_4 {/*Emerald*/
	background-color: #50c878; color:black;
}
.same_5 {/*Fallow*/
	background-color: #c19a6b; color:white;
}
.same_7 {/*Fern*/
	background-color: #71bc78; color:white;
}
.same_6 {/*Ferrari Red*/
	background-color: #ff2800; color:white;
}
.same_2 {
	background-color: gray; color:white;
}
.same_9 {/*Guppie green*/
	background-color: #00ff7f; color:black;
}
.same_10 {/*Halayà úbe*/
	background-color: #663854; color:white;
}
.same_16 {/*Malachite*/
	background-color: #0bda51; color:black;
}
.same_13 {/*Olive Drab*/
	background-color: #6b8e23; color:white; 
}
.same_12 {/*Peridot*/
	background-color: #e6e200; color:black;
}
.same_11 {/*Pumpkin*/
	background-color: #ff7518; color:white;
}
.same_1 {
	background-color: SALMON; color:white;
}
.same_8 {
	background-color: SKYBLUE; color:black;
}
.same_14 {
	background-color: SLATEBLUE; color:white;
}







#exercise3 .art-frame-mini {
	width:90%!important;
}
#exercise2 .art-frame-mini, #exercise6 .art-frame-mini {
	width:75%!important;
}



@media screen and (max-width : 980px ){

#exercise3 .art-frame-mini {
	width:95%!important;
}
#exercise2 .art-frame-mini, #exercise6 .art-frame-mini {
	width:90%!important;
}
}


@media screen and (max-width: 690px) {

#exercise3 .art-frame-mini {
	width:100%!important;
}
#exercise2 .art-frame-mini, #exercise6 .art-frame-mini {
	width:100%!important;
}
}