/*******************************************************************************
* Stylesheet für die IMISE-Webseite
* Datum: 09.03.2018
* Autor: Ingolf Hagen
*
* Farbdefinitionen
*
* Dunkelblau              #00658c
* Dunkelblau (blass)      #379DBF
* Dunkelblau (dunkel)     #004b64
* Hellblau                #0079c6
* Hellblau (blass)				#6e9bb7
* Violett                 #ad71cf
* Orange                  #ff8200
*	Hellgrau (Hintergrund)  #f7f3f7
* Hellgrau (Ränder)       #efebe7
* Grau (Uni-Logo)         #9c9a9c
* Grau (Schrift)          #949a94
*                         #747a74
* Weiß                    #ffffff
*
* Dreieck als Anstrich: ►
*******************************************************************************/


/******************************************************************************
* Reset von Browsereinstellungen
*******************************************************************************/

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

* { 
	margin: 0; 
	padding: 0; 
}


/*******************************************************************************
* Allgemeine Definitionen
*******************************************************************************/

body {
	margin: 2px;
	background-color: #f7f3f7;
	font-family: arial,sans-serif;
	font-size: 95%;
}


@media only screen and (min-width: 15em) {

	body {
		margin: 4px;
	}

}

@media only screen and (min-width: 20em) {

	body {
		margin: 8px;
	}

}

.head, .breadcrumb, .body {
	width: 100%;
	margin-left: 0;
	margin-right: 0;	
	margin-top: 1%;
	background-color: #ffffff;
	padding: 0;
	border: none;
	border-bottom: 4px solid #efebe7;
	overflow: hidden;
}

@media only screen and (min-width: 33em) {
	
	.head, .breadcrumb, .body {
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
	}

}

/*******************************************************************************
* Kopfbereich
*******************************************************************************/

.head_container_1 {
	min-height: 39px;
}

@media only screen and (min-width: 33em) {

	.head_container_1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
		flex-wrap: nowrap;	
	}

}


.head_container_1-utilitybar {
	display: block;
	color: #ffffff;
	background-color: #0079c6;	
	padding: 3px 0 3px 0;	
	margin: 0 0 4px 0;
	text-align: left;
}

@media only screen and (min-width: 10em) {

	.head_container_1-utilitybar {
		padding: 6px 0.5ex 6px 1ex;	
		margin: 0 0 8px 0;
		min-height: 19px;
		line-height: 19px;
	}

}

@media only screen and (min-width: 20em) {

	.head_container_1-utilitybar {
		padding: 6px 1em 6px 1em;
	}

}


@media only screen and (min-width: 33em) {

	.head_container_1-utilitybar {
		margin: 0 5px 8px 1ex;
	}

}

.head_container_1-utilitybar a, .head_container_1-utilitybar a:visited {
	color: #ffffff;
}

.head_container_1-unilogo {
	display: inline;
	background-color: #9c9a9c;
}


@media only screen and (min-width: 33em) {

	.head_container_1-unilogo {
		margin: 0 0 8px 0;
		height: 31px;
		padding: 0;
	}

}

.head_container_1-unilogo img {
	max-width: 100%;
	height: auto;
}

@media only screen and (min-width: 32em) {

	.head_container_1-unilogo img {
		max-width: none;
	}

}

.head_container_2-logo {
	background-color: #ffffff;
	padding: 4px 0 1px 0;
	margin: 0;
}

@media only screen and (min-width: 10em) {

	.head_container_2-logo {
		padding: 8px 0 1px 1ex;
	}
}

.head_container_2-logo img {
	max-width:100%;
	height: auto;
}

.head_container_3-fulltitle {
	background-color: #ffffff;
	color: #747a74;
	padding: 0;
}

@media only screen and (min-width: 10em) {

	.head_container_3-fulltitle {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;	
		min-height: 25px;
		line-height: 25px;
		padding-bottom: 6px;
		padding-left: 1ex;
		padding-right: 1ex;
	}
	
}


.head_container_3-fulltitle div.fulltitle {
	display: block;
	padding: 0;
}

@media only screen and (min-width: 10em) {

	.head_container_3-fulltitle div.fulltitle {
		display: block;
		flex-shrink: 20;
		line-height: 120%;
		padding: 1px 0 1px 1px;
	}

}

@media only screen and (min-width: 15em) {

	.head_container_3-fulltitle div.fulltitle {
		font-weight: bold;
	}

}

@media only screen and (min-width: 20em) {

	.head_container_3-fulltitle div.fulltitle {
		padding: 1px 1em 1px 1px;
	}

}

@media only screen and (min-width: 32em) {

	.head_container_3-fulltitle div.fulltitle {
		max-width: 70%;
		padding: 1px;
	}

}

.head_container_3-fulltitle div.langswitches {
	display: block;
	font-size: 90%;
	white-space: nowrap;
	padding: 1ex 0 1ex 0;
} 

@media only screen and (min-width: 10em) {

	.head_container_3-fulltitle div.langswitches {
		display: block;
		font-size: 90%;
		line-height: 120%;
		white-space: nowrap;
		padding: 1px 0 1px 1px;
	}

}

div.langswitches a .langswitch {
	display: none;
}

@media only screen and (min-width: 32em) {

	div.langswitches a .langswitch {
		display: inline;
	}

}

/*******************************************************************************
* Breadcrumbs
*******************************************************************************/

.breadcrumb_container_1 {
	padding-left: 0;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	font-size: 95%;
}

div.breadcrumb_container_1, div.breadcrumb_container_1 a, div.breadcrumb_container_1 a:visited {
	color:#747a74;
}

@media only screen and (min-width: 10em) {

	.breadcrumb_container_1 {
		padding-left: 1ex;
	}
	
}

@media only screen and (min-width: 15em) {

	.is-current-crumb {
		font-weight: bold;
	}

}


/*******************************************************************************
* Körper
*******************************************************************************/

.body {
	margin-top: 0;
}

.body_container_1 {
	padding-left: 0;
}


@media only screen and (min-width: 10em) {

	.body_container_1 {
		padding-left:0.7ex;
	}
	
}


@media only screen and (min-width: 38em) {

	.body_container_1	{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		align-content: stretch;
		flex-wrap: nowrap;	
	}

}


/*******************************************************************************
* Navigation
*******************************************************************************/

.nav {
	display: block;
	width: 100%;
	vertical-align: top;	
	padding: 1em 0 0 0;
}

@media only screen and (min-width: 38em) {

	.nav {
		padding-top: 0;
		flex: 1 1 20%;
		width: auto;
	}

}


.nav_1 {
	padding: 0 0 2em 0;
	width: 97%;
}

.nav_1 a {
	display: block;
}

.nav_1-entry {
	border-bottom:1px solid #00658c;
	padding: 0.5ex 0;
}

.nav_1-entry-is-active {
	padding: 0.5ex 0;
}

@media only screen and (min-width: 10em) {

	.nav_1-entry, .nav_1-entry-is-active {
		padding: 0.5ex 1px;
	}
	
}

.nav_1-entry a, .nav_1-entry a:visited {
	font-weight: normal;
	color: #747a74;
}

.nav_1-entry-is-active a, .nav_1-entry-is-active a:visited {
	font-weight: normal;
	color: #00658c;
}

.nav_2 {
	padding: 0;
	margin-left: 1ex;
}

.nav_2-entry, .nav_2-entry-is-active {
	padding: 1px 0;
}

.nav_2-entry a, .nav_2-entry a:visited  {
	font-size: 95%;
	font-weight: normal;
	color: #00658c;
}

.nav_2-entry-is-active a, .nav_2-entry-is-active a:visited {
	font-size: 95%;
	font-weight: normal;
	color: #ff8200;
}

.nav_3 {
	padding: 0;
	margin: 0 0 0 1ex;
}

.nav_3-entry {
	padding: 0;
}

.nav_3-entry a, .nav_3-entry a:visited {
	margin-left: 0;
	padding-left: 0;
	font-weight: normal;
	font-size:90%;
	quotes: "»" "»" "»" "»";
	color: #0079c6;
}

.nav_3-entry-is-active a, .nav_3-entry-is-active a:visited {
	margin-left: 0;
	padding-left: 0;
	font-weight: normal;
	font-size:90%;
	quotes: "»" "»" "»" "»";
	color: #ff8200;
}

@media only screen and (min-width: 15em) {

	.nav_1-entry a, .nav_1-entry-is-active a, .nav_2-entry-is-active a, .nav_3-entry-is-active a {
		font-weight: bold;
	}

}

#navigation .nav-open {
	display: block;
	padding-bottom: 2em;
}

#navigation .nav-close {
	display: none;
	padding-bottom: 0.5em;
}

#navigation .nav-open a,  #navigation .nav-close a {
	color: #747a74;
	font-size: 100%;
}

@media only screen and (min-width: 15em) {

	#navigation .nav-open a,  #navigation .nav-close a {
		font-size: 110%;
		font-weight: bold;
	}

}

#navigation .nav_1 {
	display: none;
}

#navigation:target .nav-open {
	display: none;
}
	
#navigation:target .nav-close {
	display: block;
}

#navigation:target .nav_1 {
	display: block;
}

@media only screen and (min-width: 38em) {
	
	#navigation .nav-open, #navigation .nav-close {
		display: none;
	}

	#navigation:target .nav-close {
		display: none;
	}

	#navigation .nav_1 {
		display: block;
	}

	.nav_1 a {
		display: inline;
	}

}


nav.pager {
	padding-top: 3ex;
}

ul.pager__items li.pager__item {
	list-style: none;
	display: inline;
}
ul.pager__items li.is-active a {
	color: #004b64;
}


/*******************************************************************************
* Inhalt
******************************************************************************/

.content {
	display: block;
	overflow: auto;
	margin-top: 0;
	padding: 0;
	vertical-align: top;
	width: 100%;
}

@media only screen and (min-width: 38em) {

	.content {
		padding: 0 3% 0 1%;
		flex: 1 1 75%;
		width: auto;
	}

}

.content_container_1 {
	box-sizing: content-box;
}

span.color-red {
	color:red;
}

span.highlighted {
	background-color:#FFDDDD; 
	font-style:italic";
}


/*******************************************************************************
* Statuszeile
******************************************************************************/

.status {
	text-align: right;
	font-size: 90%;
	color: #9c9a9c;
	padding: 0.5ex;
}

.status a {
	color: #9c9a9c;
}


.status span.last_modification {
	margin-right: 1ex;
}

.status div.editor {
	display: inline;
}

.status span, .status span a {
	color: #747a74;
}


/*******************************************************************************
* Links
******************************************************************************/

a {
	color: #0079c6;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #6e9bb7;
}


/*******************************************************************************
* Überschriften
*******************************************************************************/

h1 {
	font-size: 100%;
	color: #ff8200;
	margin: 0;
	padding: 0;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 100%;
	color: #004b64;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 100%;
	color: #00658c;
	margin-top: 0.8em;
	margin-bottom: 0.3em;
}

h4 {
	font-size: 100%;
	color: #00658c;
	margin-top: 0.5em;
	margin-bottom: 0em;
}

h5 {
	font-size: 100%;
	color: #00658c;
	margin-top: 0.5em;
	margin-bottom: 0em;
	font-weight: normal;
	font-style: italic;
}

h6 {
	font-size: 100%;
	color: #00658c;
	margin-top: 0.5em;
	margin-bottom: 0;
	font-weight: normal;
}

@media only screen and (min-width: 15em) {

	h1 {
		font-size: 120%;
	}

	h2 {
		font-size: 110%;
	}

}

@media only screen and (min-width: 20em) {

	h1 {
		font-size: 150%;
	}

	h2 {
		font-size: 120%;
	}

	h3 {
		font-size: 110%;
	}

}

div.caption {
	font-size: 100%;
	font-weight: bold;
	color: #004b64;
	margin: 0;
	padding: 0;
	margin-bottom: 0.3em;
}


/*******************************************************************************
* Grafiken
*******************************************************************************/

img {
	border: none;
}

.content_container_1 img {
	max-width:100%;
	height: auto;
}

div.section .right {
	float: right;
	margin-left: 1ex;
}

div.section .left {
	float: left;
	margin-right: 1ex;
}

figcaption {
	font-size:80%;
	padding-bottom: 0.5em;
}

.align-center {
/* Die CSS-Regeln von Drupal genügen nicht immer für die zentrierte Anzeige.
   Es gibt zum Beispiel Probleme bei 'img' innerhalb von 'figure' */
	text-align: center;
}

/*******************************************************************************
* Absätze
*******************************************************************************/

div.section {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
}

div.summary p {
	font-weight: bold;
}

div.pdfsection {
	margin: 1.5em 0 0 0;
}

div.pdfsection p {
	margin: 0;
}

p {
	text-align: left;
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
}

.clear {
    clear: both;
}

/* Zur Unterscheidung (kurzen) Textbereichen oder Zeilen, jedoch OHNE Hervorhebung*/
.distinguish {
	font-style: italic;
}

/* Hervorhebung innerhalb eines unterschiedenen Textbereiches*/
.distinguish em {
	text-decoration: underline;
}

div.name {
	display: inline;
}

div.phone, div.phone span.value {
	display: inline;
	white-space: nowrap;
}

/* Kontaktdaten */
div.contact {
	margin-bottom: 1em;
}

div.contact div.name {
	font-weight: bold;
	display: block;
}

div.contact div.description {
}

div.contact div.mail {
}

div.contact div.phone {
}

div.contact div.fax {
}

div.contact div.postalAddress {
	padding-bottom: 1em;
	padding-top: 0.5em;
}

div.contact div.postalAddress span.label {
	display: block;
	padding-bottom: 0.2em;
}


/*******************************************************************************
 * Visitenkarte
 ******************************************************************************/
div.personalTitle {
	margin-top: 0.5em;
}

div.vcard div {
	display: block;
	margin-bottom: 1em;
}

div.vcard span.label {
	font-weight: bold;
	display: block
}

div.vcard span.value {
	padding-left: 2ex;
	display: block;
}

div.vcard div.photo {
	float: right;
}

div.vcard div.title span.value {
	padding-left: 0;
}


/*******************************************************************************
 * Dokumente 
 ******************************************************************************/

div.document {
	padding-bottom: 1em;
}

div.document div.title {
	font-weight: bold;
}

div.document div.description {
	margin-bottom: 0.5em;
}

div.document div.editor {
	display: inline;
}

div.document div.support {
}

div.document div.source {
}

div.document div.year {
	display: inline;
	margin-left: 1ex;
}


/* Neuigkeiten */
div.news {
}

div.news div.caption {
}

div.news div.caption span.date {
	font-style: italic;
	display: inline;
}

/* Veranstaltungen */
div.event {
	margin-bottom: 1em;
}

div.event div.caption span.date {
	font-style: italic;
	display: inline;
}

/* Stellenausschreibungen */
div.job {
	margin-bottom: 1em;
}

div.job div.caption span.date {
	font-style: italic;
	 display: inline;
}

sup, sub {
	font-size: 60%;
}

/* ein wichtiger Hinweis */
div.note {
	border: 1px dashed #aa6666;
	background-color: #ffcccc;
	padding-left: 1ex;
	padding-right: 1ex;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	margin-bottom: 1em;
}

div.note::before {
	content: "Hinweis: ";
	font-weight: bold;
}

/* ein Hinweis */
div.hint {
	
}

div.hint p::before {
	content: "Hinweis: ";
	font-weight: bold;
}

/* die Login-Box im Edit- und QS-System */
div.previewLogin {
	border: 1px dashed #aa6666;
	background-color: #ffcccc;
}


/*******************************************************************************
* Listen
*******************************************************************************/

dl {
	margin: 0;
	padding: 0;
}

dd {
	padding: 0ex;
	margin: 0ex;
	margin-bottom: 1em;
	padding-left: 2ex;
}

@media only screen and (max-width: 20em) {

	dd {
		padding-left: 0.4em;
	}

}

dl.highlight dt {
	font-weight: bold;
}

dl.bullet dt {
	display: list-item;
	list-style-position: inside;
	font-weight: bold;
}

/* Kontaktdaten*/
dl.contact > dt {
	font-weight: bold;
}

div.pdfsection ul {
	margin: 0;
}

div.pdfsection li {
	margin: 0 0 0 2ex;
}

ul {
	margin: 0;
	margin-top: 0.5em;
	margin-bottom: 1em;
	padding: 0ex;
}

li {
	margin-left: 2ex;
	margin-bottom: 0.5em;
}

@media only screen and (max-width: 20em) {

	li {
		list-style-position: inside; 
		margin-left: 0.2em;
	}

	li > div {
		display: inline;
	}

}

.separate_items {
	margin-bottom: 0;
}

.separate_items li {
	margin-bottom: 1em;
}

div.sitemap ul {
	margin-top: 0;
	margin-bottom: 0.5em;
}

div.sitemap li {
	margin-bottom: 0;
}

ul.simple {
	list-style-type: none;
}

ul.simple li {
	margin-left: 0;
}

div.toc ul {
	list-style-type: none;
	quotes: "»" "»" "»" "»";
}

div.toc ul li {
	margin-left: 0;
	margin-bottom: 0.2em;
}

div.toc ul li:before {
	content: open-quote " ";
}

/*******************************************************************************
* Linien 
*******************************************************************************/

hr.pparagraph {
	margin-top: -1em;
}

/*******************************************************************************
* Akkordeon
*******************************************************************************/

.accordion .inner {
  cursor: pointer;
}

.accordion .inner:focus, 
.accordion .inner:hover {
  text-decoration: underline;
}

.accordion .inner[aria-expanded="true"]:before  {
  content: "\2212  ";
}

.accordion .inner[aria-expanded="false"]:before  {
  content: "\002B  ";
}

.accordion .summary {
    display: inline-block;
    font-size: inherit;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding: 0;
    text-align: left;
}

.accordion .summary * {
	display: inline;
}

.accordion .details {
  background-color: white;
  overflow: hidden;
  text-align: left;
}

.accordion .details[aria-hidden="true"] {
  height: 0;
}
 
.accordion .details[aria-hidden="false"] {
  height: 100%;
}

.accordion .indention {
  padding: 0 1em;
}

/*******************************************************************************
* Tabellen
*******************************************************************************/

table th, table td {
	text-align: left;
	vertical-align: top;
	padding-right: 2em;
}

table caption {
	text-align: left;
	padding-bottom: 0.5em;
}

table.fullwidth {
	width: 96%;
}

/* einfache, farblose Standardtabelle, volle Breite */
table.standard {
/*	width: 96%;*/
	margin-bottom: 1em;
	border-collapse: collapse;	
}

table.standard th, table.standard td {
	text-align: left;
	vertical-align: top;
	padding-right: 2ex;	
	padding-left: 0;
}

/*table.standard tr {
	border-bottom: 1px solid #aa8ba4;
}*/

table.standard th {
	border-bottom: 1px solid #004b64;
}

table.standard .width20perc {
	width: 20%;
}

table.standard .width30perc {
	width: 30%;
}

table.standard .width50perc {
	width: 50%;
}

table.standard td {
	padding-top: 0.2em;
}

table.standard tr.main_line {
	font-weight: bold;
}
table.standard tr.sub_line td {
	padding-left: 2ex;
}

/* einfache, farblose Standardtabelle, minimale Breite */
table.standard_narrow {
	margin-bottom: 1em;
	border-collapse: collapse;
}

table.standard_narrow th, table.standard_narrow td {
	text-align: left;
	vertical-align: top;
	padding-right: 2ex;	
	padding-left: 0;
}

table.standard_narrow th {
	border-bottom: 1px solid #004b64;
}

table.standard_narrow td {
	padding-top: 0.2em;
}

/* Linien unter jeder Zelle */
table.lines {
	border-collapse: collapse;
}

table.lines td {
	border-bottom: 1px solid #004b64;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

table.thinlines td {
	border-bottom: 1px solid #95b2bc;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

/* farblose Tabelle im Gitter-Stil*/
table.grid {
/* width: 96%; */
  margin-bottom: 1em;
  border: 1px solid #004b64;
  border-collapse: collapse;
}

table.grid td {
	border: 1px solid #004b64;
  padding: 1ex;
}

table.horizontal th, table.horizontal td {
	vertical-align: top;
	text-align: left;
}

table.modul {
  width: 96%;
  margin-bottom: 1em;
  border: 2px solid #004b64;
	border-collapse: collapse;
	padding: 1ex;
}

table.modul th {
  border-bottom: 1px solid #004b64;
  padding: 1ex;
}

table.modul td {
  padding: 1ex;
}

@media only screen and (max-width: 48em) {

	table.responsiv tbody th {
		padding-left: 0;
		padding-right: 0.3em;
	}

	table.responsiv td {
		padding-left: 0;
		padding-right: 0.3em;
	}
	
}

@media only screen and (max-width: 33em) {

	table.responsiv, table.responsiv tbody, table.responsiv tr {
		display: block;
	}

	table.responsiv thead {
		display: none;
	}

	table.responsiv tr:first-child {
		border-top: 1px solid #00658c;
	}

	table.responsiv tr {
		border-bottom: 1px solid #00658c;
		padding: .5em;
	}

	table.responsiv td::before {
		content: attr(data-label) ":";
		padding-right: 0.5em;
	}

	table.responsiv tbody th {
		display: block;
		font-weight: bold;
		padding: .2em 0;
		text-align: left;
	}

	table.responsiv tbody th a {
		font-weight: normal;
	}

	table.responsiv td {
		display: block;
		padding: .2em 0;
		text-align: left;
	}

}

@media only screen and (max-width: 26em) {

	table.responsiv tr {
		padding: .5em 0 .5em .2em;
	}

}

@media only screen and (max-width: 20em) {
	table.responsiv tr {
		padding: .5em 0;
	}
}

td.nowrap {
	white-space: nowrap;
}


/*******************************************************************************
* Liste der Suchergebnisse
*******************************************************************************/

ul.searchresults {
}

ul.searchresults li {
	list-style-type:none;
	margin-left:0ex;
	margin-bottom:1.5ex;
}

ul.searchresults div.caption {
	font-weight:bold;
	margin:0ex;
}

ul.searchresults div.description {
	font-weight:normal;
	font-style:italic;
	margin:0ex;
}

ul.searchresults div.summary {
	font-weight:normal;
	margin:0ex;	
}

ul.searchresults div.url {
	font-size:80%;
	margin:0ex;	
}


ul.searchresults div.hit_info {
	font-size:80%;
	color:gray;
}


/*******************************************************************************
* Formulare
*******************************************************************************/

input, textarea { font-family: Arial,sans-serif,Tahoma; color: black; }
fieldset { margin: 2ex; padding: 2ex; }
.inputfield:focus, .inputfield:hover { background-color: #efebe7; }
.inputfield { width:100%; }
.inputlabel:hover { background-color: #efebe7; }
.inputerror { background-color: #ffcccc; }
div.label { float:left; }
div.label8 { float:left; width:8ex; }
div.label12 { float:left; width:12ex; }
div.label16 { float:left; width:16ex; }
div.label22 { float:left; width:22ex; }
div.label32 { float:left; width:32ex; }
div.input { float:left; margin-left:auto; margin-right:1em; margin-bottom:5px; }
div.row { clear:both; }


div.form-item div.description {
	font-size:75%;
        margin-bottom:10px;
}

div.form-item label {
	display: inline-block;
	min-width: 10em;
}

div.form-item input.form-text {
	display: inline-block;
	max-width: 93%;
}

/*******************************************************************************
* Anpassung an den Internet Explorer 11
*******************************************************************************/

@media only screen and (min-width: 38em) {

	_:-ms-fullscreen,
	:root .content_container_1 {
		padding-left: 5em;
	}

}