/*
  Dieses CSS wird benutzt seit: 01.10.2019
*/
 

/*  
   ***************************************************************************************
   0. Dokumentenweite Einstellungen
   ***************************************************************************************
*/   

   body {
	    font-family: Tahoma, Verdana, Arial, Geneva, Helvetica, sans-serif;
	    font-size:90%; 
	    line-height:130%; 
	    margin:0px 15px 0px 15px;
	    background-repeat:no-repeat;
   }

   body.withbackground {background-image:url(../i/bg.png);}
   
   img { border:none;} /* Bilder haben nie einen Rahmen */     
   
   im.loc,
   im.sec,
   im.ext {width: 11px, height:11px}


/*  
   *************************************************************************************************************************
   1. Vorhandene Elemente, die aber nicht angezeigt werden sollen
   *************************************************************************************************************************
*/   

   img.sec{display:none}         /* sec-Icon bei Volltexten */
   .en {display:none}            /* Englische Texte sind per default nicht sichtbar */

   /* Beim Ausdruck sollen folgende Elemente nicht gedruckt werden: */
   @media print {	
    	img.p, 
	    div.notfound, 
	    a.amazon, 
	    form.google, 
	    button {display:none;}
   }

/*  
   *************************************************************************************************************************
   2. Titelmenu und Menubalken
   *************************************************************************************************************************
*/   

   #titelmenu {
      margin-top:10px;
	    margin-bottom:0px;
	    padding-left:10px;
      white-space:nowrap;     /* notwendig, damit die Menublöcke einzeilig bleiben */
   }
	
   #titelmenu li {
	    list-style-type:none;
	    display: inline-block;
	    min-width:60px;
	    max-width:60px;
	    width:60px;
	    margin: 0px 3px 0px 3px;
	    padding:9px 8px 8px 8px;
	    text-align:center;
	    z-index:1;
   }

   #titelmenu li a {
	    text-align:center;
   }

   #titelmenu li a img{
    	display:block;
	    margin-left:6px;
	    width:  48px;
	    height: 48px;
	    margin-bottom:0px;
   }

   #titelmenu li.search{color:silver;}

   #mobilnavigation {display:none}
   #mobilnavigation {font-style:italic;}
   #mobilnavigation li {border-style:solid;border-color:silver;border-width:1px;width:58px;min-width:55px}

   #searchbox input {width:50px;}

   #menubalken {
	    margin-left:-15px;
	    margin-right:-15px;
	    margin-bottom:0px;
	    padding-left:40px;
	    padding-top:5px;
	    padding-bottom:5px;
	    font-size:80%;
      border-style:solid;
	    border-width:0px 0px 0px 0px;
	    border-color:silver;
	    box-shadow: -1px 5px 5px #888;
	 }

   img.titelbild {max-height:400px}

   .titelbild  {
      border-style: none; 
	    border-width: 1px;
	    border-color:grey;
	    margin-left:15px;
	    filter: drop-shadow(10px 5px 5px #888);
	 }

   @media (max-width:900px) { 
      #titelmenu li.g     {display:none}
   } 
 
   @media (max-width:820px) { 

 		  #titelmenu          {white-space:normal;}               /* Jetzt dürfen die einzelnen Menublöcke sich auf mehreren Zeilen verteilen */
	    #titelmenu li       {margin: 3px}
	    #titelmenu li.g     {display:inline-block}
	    #titelmenu li a img {display:none;}                    /* Verberge die Icons im Menu */
      #menubalken         {display:none}                     /* Verberge den Menubalken, da eh nicht antippbar */
   }    

   #obenrechts {
	    position: fixed;
      top: 28px;
      right: 1%;
      z-index:1000
   }

/*  
   ***************************************************************************************
   3. Dynamischer Kopfbereich (wird kleiner beim nach unten scrollen)
   ***************************************************************************************
*/ 

#outerheader  {
	background-color:rgba(196,196,196,0.5);
	margin:-15px;padding:15px 15px 0px 15px
  }

header {
		width: 100%;
		padding-left:-15px;
	}	

	.header-fix {
		position:fixed;
		top:-69px;
		filter: grayscale(1);
		-webkit-filter: grayscale(1);
/*		transition: 0.5s; */
		z-index:500;
		background-color:#f0f0f0;}


/*  
   *************************************************************************************************************************
   4. Überschriften h1, h2
   *************************************************************************************************************************
*/   

    h1 {
	    margin-left:15px;
	    margin-top:40px;
	    line-height:150%
    }
    
  
/*  
    h1.haupttitel {
       display: flex; 
       align-items: center;
       margin-top:15px;
    }
*/      
    h1.haupttitel img {margin-left:5px}

		body.o04 main h1:before {content: "Frage: ";   display:block;color:#AAAAAA}
    body.o05 main h1:before {content: "Aussage: "; display:block;color:#AAAAAA}

    h2 {
	    display: flex;
	    align-items: center;
    }

    @media (max-width:820px) { 
    	h1 {font-size:150%}
	    h2 {font-size:120%}
    }


/*  
   ***************************************************************************************
   5. Links
   ***************************************************************************************
*/   

    a {text-decoration:none;} 
    ul.b a.b {font-weight:bold}
    a.amazon {font-size:75%;} 

		a.p img.icon, span.p img.icon {border-radius: 50%;}    



/*  
   ***************************************************************************************
   6. Originaltexte (Breite und Anordnung)
   ***************************************************************************************
*/  
  
  /* 
     Originaltextsammlungen sind in einem div.grid eingepackt. 

     Jede Originaltextbox (z_mz) enthält dann wieder zwei divs:
     - Das Zitat (.z00 oder .z00plus)
     - Die Quellenangabe (.qua2)

     Zitate gibt es schmal (.z00) oder breit (.z00plus)
     
  */
  
   .z_mz, .z {
      margin:2ex;
   } 	
   
   div.grid div.o_mz, 
   div.grid div.z_mz, 
   div.grid div.z {
      float:left; 
      width:38ex;
   } 
   
   .z12plus_mz, 
   .z15plus_mz, 
   div.blahfasel {
      max-width:79ex;
   } 
  
   .z, 
   .z12plus, 
   .z14plus, 
   .z15plus {
      min-width:80ex; 
      width:80ex;
   }

   .qa2 {font-size: 70%;}	


   @media (max-width:820px) { 

       div.grid div.o_mz, 
       div.grid div.z_mz, 
       div.grid div.z {
          float:left; 
          width:36ex;
          max-width:36ex;
      }
      
	    .z12plus_mz, 
	    .z15plus_mz, 
	    div.blahfasel {
		      min-width:35ex ; 
		      max-width:35ex
		  } 
	
	    .z, 
	    .z12plus, 
	    .z15plus , 
	    .z14plus {
	    	  min-width:35ex; 
	    	  width:35ex; 
	    	  max-width:35ex}    	
   }

/*  
   ***************************************************************************************
   7. Originaltext-Boxen (Aussehen)
   ***************************************************************************************
*/

   /* Eigenschaften aller Sprachboxen */

.z7plus, .z7plus_mz, .z12, .z12plus, .z12plus_mz, 
     .z14, .z14plus, .z14plus_mz, 
     .z15, .z15plus, .z15plus_mz,  
     .z16, .z16plus, .z16plus_mz, 
     .z22, .z22plus, .z22plus_mz,
     div.blahfasel, span.z     
       {
	   font-family:  Verdana, Arial, Helvetica, sans-serif; 
	   color:#000000; 
	   padding:1ex;
	   background-color:#EEEEEE;
	   min-height:6ex;
	   box-shadow: 10px 10px 5px #888;
	   margin-bottom:10px;
	   margin-top:10px;
	   line-height:150%;
	   display:table;
	   }

/* Zusaetzliche Eigenschaften von Definitionen (o12) */
.z12, .z12plus, .z12plus_mz {
	   border-style: solid;  
	   border-width: 0px 0px 0px 5px;
	   border-color:#444;
	  }

/* Zusaetzliche Eigenschaften von Zusammenfassungen, Bemerkungen und Biographien */
.z7,  .z7plus,  .z7plus_mz,
.z14, .z14plus, .z14plus_mz,
.z15, .z15plus, .z15plus_mz, 
.z16, .z16plus, .z16plus_mz, 
.z22, .z22plus, .z22plus_mz,
div.blahfasel 
       {
	   border-style: dotted; 
	   border-width: 0px 0px 0px 5px;
	   border-color:#444;  
       }
 

/*  
   ***************************************************************************************
   8. Icons bei Aufzählungen
   ***************************************************************************************
*/  
   ul.b { list-style-image:url(../i/folder_icon.gif) }
   ul.b ul { list-style-image:url(../i/topic_icon.gif) }

   li.b { margin-top:5px;  }
   ul.t { list-style-image:url(../i/topic_icon.gif) }

   ul.k { list-style-image:url(../i/b2.gif); 
          font-family: Tahoma, Arial, Helvetica, sans-serif;
          font-size:9pt;
   }

/*  
   ***************************************************************************************
   9. SVG-Objekte
   ***************************************************************************************
*/  

   svg object {margin:auto; }

   div.svg {
	    background:white;width:90%;margin-left:5%;
	 }

   div.svg:hover {
      box-shadow:10px 10px 20px 10px grey inset;
	    background: -moz-linear-gradient(100% 100% 90deg, silver, #FFFFFF); 
	    background: -webkit-linear-gradient(#FFFFFF, silver); 
	    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(silver));
	 }


/*  
   ***************************************************************************************
   20. Sparklines
   ***************************************************************************************
*/   

	.a-sparkline, 
	.b-sparkline,
	.f-sparkline, 
	.p-sparkline, 
	.t-sparkline {width:40px; float:left;text-align:right}

/*  
   ***************************************************************************************
   21. Warnbox (zu neu / zu alt)
   ***************************************************************************************
*/ 

   div.archive-warning {
	    border-style: dashed; 
	    border-width: 1px;
	    background:#EEEEEE;
	    margin:15px;
	    width:80ex;
	    min-width:150px;
	    max-width:90%;
	    min-height:45px;
	    padding:4px;
	    vertical-align:middle;
   }

   div.archive-warning img {
      float:left;
   }

/*  
   ***************************************************************************************
   22. Preview-Bildern beim Hoovern
   ***************************************************************************************
*/ 

   #preview{
	    position:absolute;
	    display:none;
	    max-height:90px;
	    box-shadow: 10px 10px 5px 5px rgba(128,128,128, 1);
	    -webkit-box-shadow: 10px 10px 5px #888;
	}

	#preview img {
		max-height:80px;
		border:solid;border-width:1px;
}

/*  
   ***************************************************************************************
   23. visJs (Die Farben sind im js-File definiert)
   ***************************************************************************************
*/  	

   #visZitationsGraph,
   #visTagCloud,
   #visBegriffsNetzwerk
    {
      height: 50vh;
      resize: vertical;
      overflow:auto;
   }

   #visStatistikDiagramm {
	    margin-top:20px
   }

   #visZeitleiste div.vis-item-content img {
   	  height:80px;
   	  float: left;
   	  padding-right:10px;
   }

/*  
   ***************************************************************************************
   24. Vortragsfolien
   ***************************************************************************************
*/  

	img.folie {width:200px; box-shadow: 10px 10px 5px #888;margin:10px}
	img.folie:hover {width:500px}

/*  
   ***************************************************************************************
   25. Zebratabellen
   ***************************************************************************************
*/ 
  #mitglieder td, #mitgliedschaften td {padding:15px}

  #mitgliedschaften tr:nth-child(odd),
  #mitglieder tr:nth-child(odd) {background: #ffeffe}



/*  
   ***************************************************************************************
   26. Filter-UI bei Erwähnungen
   ***************************************************************************************
*/  

   div.typfilter {margin:10px;padding:10px;background-color:#EEEEEE;}
   div.typfilter div {display:flex}
   div.typfilter div div {display:inline}
   div.typtitel {font-weight:bold; }


/*  
   ***************************************************************************************
   30. Responsive / Mobile
   ***************************************************************************************
*/

   /* Wenn das Fenster <820px, dann ....: */
   @media (max-width:820px) { 

		  #buchverweise > thead > tr > th:nth-of-type(n+6),    
      #textverweise > thead > tr > th:nth-of-type(n+6),
      #buchverweise > tbody > tr > td:nth-of-type(n+6),
      #textverweise > tbody > tr > td:nth-of-type(n+6) {display:none}
    
      tr.bibtitel > td:nth-of-type(3),
      tr.bibtitel > td:nth-of-type(4),
      tr.bibtitel > td:nth-of-type(5),
      tr.bibtitel > td:nth-of-type(7),
      tr.bibtitel > td:nth-of-type(11),
      tr.bibtitel > td:nth-of-type(12),
      tr.bibtitel > td:nth-of-type(13)     {display:none}
    
      tr.bibbody > td:nth-of-type(3),
      tr.bibbody > td:nth-of-type(4),
      tr.bibbody > td:nth-of-type(5),
      tr.bibbody > td:nth-of-type(7),
      tr.bibbody > td:nth-of-type(11),
      tr.bibbody > td:nth-of-type(12),
      tr.bibbody > td:nth-of-type(13) {display:none}
    
      #objektmenus, 
      #statistikmenus, 
      #mobilnavigation {display:inline;}
    
      #obenrechts {
         position: static; 
    	   display:none;
    	   top: unset;
         right: unset;
         z-index:unset}
      
		  img.titelbild {max-width: 100px;  }  
		  
		  img.helptext {display:none}  

      div.vis-configuration-wrapper {display:none !important} /* Konfigrationsmenu für vis-Grafiken ausblenden */

   }
 
  
   @media (max-width:600px) {

    h2 img {height:1em}
    td.vleft1,td.vleft2,td.vleft3,td.vleft4,td.vleft5,td.vleft8 {display:none}
    #buchverweise > thead > tr > th:nth-of-type(2),
    #buchverweise > tbody > tr > td:nth-of-type(2),
    #buchverweise > thead > tr > th:nth-of-type(5),
    #buchverweise > tbody > tr > td:nth-of-type(5) {display:none}

    #textverweise > thead > tr > th:nth-of-type(2),
    #textverweise > tbody > tr > td:nth-of-type(2),
    #textverweise > thead > tr > th:nth-of-type(5),
    #textverweise > tbody > tr > td:nth-of-type(5) {display:none}
}



/*  
   ***************************************************************************************
   X. .o21 Einstellungen
   ***************************************************************************************
*/


		body.o21 ol a, body.o21 div.h2c ol span
			{
				overflow:hidden;
				text-overflow: ellipsis;
				max-width:325px;
				display:inline-block;
				line-height:110%;
				vertical-align:-40%;
				white-space: normal;
				
			}

		.o21 a.w img, .o21 .b img, .o21 .t img {
			display:block;
			margin-bottom:10px;
			margin-right:0px;
			max-width:80px;
			margin-left: auto;
		  margin-right: auto;
		  }
		
		body.o21 a.w {
			text-align:center;
				min-width:100px;
				width:100px;
				white-space: normal;
				}
			
		.o21 .b, .o21 .t {
			text-align:center;
				width:200px;
				white-space: normal;
				}
		
		.o21 .b,
		.o21 .t,
		.o21 .p 
		 {min-width:200px;}		
		 
		.o21 .a,
		.o21 .f
		 {min-width:325px;}		
		
		.o21 ol a.b,
		.o21 ol a.t,
		.o21 ol a.f,
		.o21 ol a.a
		 {white-space: normal;}

/*  
   ***************************************************************************************
   50. Suchformulare
   ***************************************************************************************
*/ 


		div.notfound {clear: left} 

		/* Alle Suchformulare gleich hoch und grau hinterlegt */
		.notfound form {
			height:140px;
			margin-top:10px;
			padding:10px;
			padding-top:15px;
			background-color:#EEE}

		/* Alle Suchfelder und Knöpfe gleich breit */
		.notfound input[type=text],
		.notfound input[type=submit] {
			margin:10px;
			width:175px
			}
		
		/* Das Suchicon von Amazon auf einer neuen Zeile */
			.notfound input[type=image] {display:block !important}
		
		form.google, { float:right !important;}
		form.google input {	font-size:8pt;}
		
		span.amazon {font-family:verdana,arial,helvetica; font-size:50%;}

/*  
   ***************************************************************************************
   51. Sortierbare Tabellen
   ***************************************************************************************
*/ 


		table.sortable {width:95%}

		table.sortable a.sortheader {
		    background-color:#eee;
		    color:blue;
		    font-weight: bold;
		    text-decoration: none;
		    display: block;
		}

		table.sortable span.sortarrow {
		    color: black;
		    text-decoration: none;
		}

		table.sortable th {text-align:left}

/*  
   ***************************************************************************************
   X. UNSORTED
   ***************************************************************************************
*/   

img.p {max-height:350px}

img.lesestatus {
	width:64px;
	float:left;
	margin:5px;
}

div.toplist {
	float:left;
	padding:1ex;
	margin:1ex;
	border-width:1px;
	border-color:silver;
	border-style:solid;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color:white;}
	
	

main {margin-top:25px}
.main-fix {margin-top:135px}

.bibtitel {background-color: #DDDDDD; font-weight:bold; font-size:90%;}
.bibbody, .box  {background-color: #EEEEEE; font-size:90%;}

.webtechnisches {
    font-family:"Courier New", courier, monospace;
    font-size:x-small;  
    margin:10px; margin-bottom:1px;line-height:50%;
   }
   

/* Begriffslisten */

div.sort {margin-left: 20px;}

div.grid  {margin-left: 15px;margin-bottom: 1em}
div.grid div.w_mz {float:left;width: 40ex;}  



img.w, img.b {float:left;margin:40px;}
img.w {max-height:256px;background-color:white}

div.bib, div.au, div.au2, div.ut, div.ut2, div.linkform, p, div.grafikhelp, div.svghelp {margin-left: 15px;}

div.au2, div.ut2 {margin-bottom:15px}



/* Kleines Icon (22.1.04 - ) */

   img.icon {height:10ex; float:left; margin-right:10px;margin-bottom:5px;} 

/* Icon bei Personenboxen sind kleiner */
   .p_box img.icon {height:6ex}


  
/* Buecher einer Person (04.02.04 - ) */

    img.bicon {float:left;margin-right:5px;}

		
div.p_box:hover {box-shadow: 3px 3px 1px #888;}

span.kuerzel {font-size: 200%; font-weight:bold; position: relative;top:10px}

p.titel {font-weight:bold; margin:1px;}
p.untertitel, p.originaltitel, p.originaluntertitel {margin:1px;}
      
/* not found */

.nf1, .nf2,.nf4, .nf5, .nf8 { 
	border-right-style:dotted;
	border-right-width:1px;
	vertical-align:bottom;
       }





table.gehtsum {border:0; margin:10px;}
table.gehtsum td {padding:5px}

#tp { width:100%}

#tp td {padding:4px;vertical-align:top}

#showall {
	margin-top:25px;
	padding:15px;
	margin-left:75px;
	font-weight: bold;}
	
#showall:hover {
	background-color:#BBB;
}



td.vleft1, td.vleft2, td.vleft3, td.vleft4, td.vleft5, td.vleft7, td.vleft8 {
	border-style: none;
	border-right-style:solid;
	border-width:5px;
	vertical-align:top;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center}
	
td.st {color: gray;text-align:right} /* Statistik */	


#mitglieder, #mitgliedschaften {width:auto;margin-left:15px;}	

span.untert2 {font-style:italic;}


div.grafikhelp, div.grafikhelplink {font-size:70%;text-align:center; font-style:italic;margin-top:5px;vertical-align:text-bottom}



div.invisible, div.applet-invisible {display:none}
div.visible, div.applet-visible {display:block}



div.datenquellen {margin-left:20px}

div.social {margin-left: 10px}

.social ul {
	display: inline;
	padding: 0;
	margin: 0;}

.social li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 2px;}

.social ul li:before { content: ""; }
.social img { border: 0; }

.j00, .j0, .j1, .j2, .j3, .j4, .j5, .j6, .j7, .j8, .j9 {border-width:0px 0px 0px 5px;border-style:solid;padding:4px;zoom:1;}
.j0 {border-color:#ff0000}
.j1 {border-color:#ffaa00}
.j2 {border-color:#ffff00}
.j3 {border-color:#aaffaa}
.j4 {border-color:#aaffff}
.j5 {border-color:#00ffff}
.j6 {border-color:#0000ff}
.j7 {border-color:#aaaaaa}
.j8 {border-color:#aaaaaa}
.j00 {border-color:#dddddd}
ul.t .j00 {border-width:0px}

#my-timeline {margin-left:15px;margin-right:15px;}


	  


div.begriffsnavigation {
	float:right;
	width:300px;;
	margin:5px;
}

ul.jahreszahlen li,
ul.iconboxen li,
ul.buchstaben li	{float:left;
                   list-style-type:none;
                   display: inline-block;	
                   font-size:130%;
                 }


ul.iconboxen li		{     width:22ex;
                        max-width:50ex; 
                        min-height:50px;
                        margin:1ex;
                        }
                        
ul.buchstaben li	{     width:2ex;
                        margin:0.5ex;
                        text-align:center;}

ul.jahreszahlen li {width:6ex; margin:0.5ex;text-align:center;}
                        
ul.iconboxen li img { vertical-align:middle}
ul.buchstaben li a {  text-align:center;}

#my-timeline {
	height:500px;
	}


	
p.erklaerungen {width:80ex;}	

div.standorte {margin-left:15px}




/*
   x. Fusszeilen
   -------------
*/   

#qrcode {margin:15px;}



span.z {font-style: italic;margin-left:0px;margin-bottom:20px;display:block}

span.z::before, span.z::after {content: '"';}
	

td a.w, td span.w {vertical-align: middle;padding:15px;line-height:4;}

td a.w img, td span.w img  {height:40px; vertical-align: middle;margin-right:15px}
.w img {margin-right:10px}


div.fuenfzig {
	float:left;
	width:44%;
	min-width:250px;
	padding:10px;
	background:#eee;
	margin:10px;
	
}

h2 span.i18n {margin-right:0.5ex}


@media screen {

	ol a.p, ol span.p, table.gehtsum a.p, table.gehtsum span.p, .au2 .p,
	ol a.b, ol span.b, table.gehtsum table tr td:nth-child(4) a.b, table.gehtsum table tr td:nth-child(4) span.b, .bib .b,
	ol a.t, ol span.t, table.gehtsum table tr td:nth-child(4) a.t, table.gehtsum table tr td:nth-child(4) span.t, 
	table.bem a.b, table.bem span.b,
	table.bem a.t, table.bem span.t,
	a.w, span.w,
	a.a, span.a,
	a.f, span.f,
div.au a.j {

    line-height:240%;
    padding:5px;
    border-style:solid;
    border-width:thin;
    border-color:grey;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin-left:3px;
    margin-right:3px;
    margin-top:10px;
	}
}