@charset "utf-8";
@import "mobile.css" screen and (max-width: 580px);
@import "desktop.css" screen and (min-width: 581px);

body {
	font-size: 16pt;
	line-height: 120%;
}

body, #header, #footer {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

h1, h2, h3 {
	font-weight: 700;
}

h1 {
	color: #0677ce;
	text-align: left;
	margin-bottom: 0;
}

h4 {
	font-size: 1.05rem;
	font-weight: 400;
	margin-top: .2em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
}

#content a:link, h1 a:link, #nav a:link, #footer a:link {
	color: #0677ce;
	text-decoration: none;
}

/* Fix für Anker-Links auf der Seite */
/* alte Version */
/*table td h3 a[id]:before { 
	display: block;
 	content: " "; 
  height: 4.5rem;
  margin-top: -4.5rem;
  visibility: hidden; 
}*/
/* 2020-02-22: neuer Fix mit scoll-margin-top, vgl. https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/ */
#top, td h3 a[id] {
	scroll-margin-top: 4.5rem;
}

h1 a:visited, #nav a:link, #footer a:link {
	color: #0677ce;
}

#content a:not([id]):hover {
	text-decoration: none;
	transition-property: background;
	transition-duration: .2s;
	background: #ddeffc;
}

#content a:visited {
	color: #0677ce;	
	text-decoration: none;
}

#content a:active {
	text-decoration: underline;
}

td {
	vertical-align: top;
}

#info {
	background-color: #eee;
	font-size: .85rem;
	border: 1px dashed #0677ce;
}

#info * {
	padding-left: .2rem;
}

#image {
	float: right;
	margin-left: .5rem;
	margin-bottom: .5rem;
}

#image img {
	max-width: 20vw;
	height: auto;
	border: solid 1px 000000; 
	border-radius: 5px;
}

* html div#content {
	height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}

div#content h2, div#content h3, div#content p {
	margin-left: 0;
	margin-right: 0;
}

div#content h1 {
	font-size: 1.2rem;
}

div#content h2 {
	font-size: 1.15rem;
	margin-top: .2rem;
	margin-bottom: .2rem;
}

div#content h3 {
	font-size: 1.1rem;
	margin-top: .5rem;
	margin-bottom: 0;
}

div#content p, div#content table, div#content ul, div#content ol, div#content details {
	font-size: 1.05rem;
	margin-top: .2rem;
	margin-right: 0;
}

div#content p, div#content table {
	margin-bottom: 1rem;
	margin-left: 0;
}
	
div#content ul, div#content ol {
	margin-bottom: .2rem;
	margin-left: 1.2rem;
}

div#content table {
	max-width: 95%;
}

p#nav {
	text-align: right;
}

p#nav, p#footer {
	font-size: .8rem;
	margin-top: 2rem;
	padding: .1rem;
	clear: both;
}

img {
	max-width: 70vw;
	height: auto;
}

a img {
	border: none;
}

li {
	margin-bottom: .5rem;
}

#content li {
	margin-left: -2rem;
}

.glossar { 
	font-weight: 700;
}

.top {
	text-align: right;
	vertical-align: bottom;
}	

.mail {
	unicode-bidi: bidi-override; 
	direction: rtl;
	text-align: left;
}

a[href^="http"]:before {
	content:url(images/extlink.svg);
}

a[href$=".bib"]:after {
	content:url(images/bibtex.svg);
}

a[href$=".pdf"]:after {
	content:url(images/pdf.svg);
}

a[href="http://elearning.uni-bielefeld.de/studip/"]:before {
	content:url(images/studip.svg);
}

a[href^="http://ekvv.uni-bielefeld.de/"]:before {
	content:url(images/ekvv.png);
}

li.book {
	list-style-image:url(images/book.svg);
}

li.article {
	list-style-image:url(images/article.svg);
}

li.presentation {
	list-style-image:url(images/presentation.svg);
}

li.poster {
	list-style-image:url(images/poster-dh.svg);
}

hr {
	color: #0677ce;
}

th {
	text-align: left;
	border-bottom: 2px solid #000;
}

td[colspan="3"] {
	border-bottom: 1px solid #0677ce;
}

details {
  padding: .6rem .6rem 0;
}
details p {
  padding: .5rem;
  /*line-height: 2;*/
  font-size: 0.9rem;
  text-align: left;
}
summary {
		display: block;
    font-weight: 700;
    list-style: none;
    margin: -.5em -.5em 0;
    outline: none;
    color: #0677ce;
}
/* für Chrome */
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  display: inline-block;
  content: "›";
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
  transition: all 300ms ease;
}
summary:hover {
  cursor: pointer;
}
details[open] summary {
  color: #0677ce;
  transition: all 300ms ease;
}
details[open] p {
  animation: openDetail 400ms ease;
  background: #f9f9f9;
}
details[open] summary::before {
  transform: rotate(90deg);
}
/*
@-webkit-keyframes openDetail {
  0% {
    opacity: 0;
    background: white;
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
  100% {
    opacity: 1;
    background: #f9f9f9;
    transform: translateY(0%);
  }
}
*/
@keyframes openDetail {
  0% {
    opacity: 0;
    background: white;
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
  100% {
    opacity: 1;
    background: #f9f9f9;
    transform: translateY(0%);
  }
}
details summary a {
	display: inline;
}