/* responsive.css fix2
  2014-10-29 SHueser responsive Design, Media-queries fuer kleine Viewports
  2014-11-04 SHueser Bereichsnavi jetzt in mehreren Ebenen bedienbar
  2014-11-24 SHueser line-height-angabe (2.2em) im body entfernt, damit Text inner- und ausserhalb von Paragraphs gleichhoch angezeigt wird.

*/


/* AP: Inserted styles  */
/*
Desktop-Ansicht
*/
		@media all and (min-width: 800px){
			.hideFullScreen{
			 display:none !important;
			}

			#hideFullScreen{
			 display:none !important;
			}

			#outerContainer{
				width:550px;
				height:354px;
    			margin: 0 auto;
			}

			#outerContainerLongterm{
				width:500px;
				height:162px;
    			margin: 0 auto;
			}

		}
/*
 Mobile-Ansicht
*/
       @media all and (max-width: 800px){
         .kopfgrafiken {
           display:none !important;
       	 }
  		div.sidebarContainingDiv{
			padding: 3%;
  			height: 0;
  			overflow: hidden;
  			max-width:auto;
  			height: auto;
  			outline:1px solid;
			outline-color:#B2B3B6;
			left:0px;
			margin:0 auto;
  		}
		img#sfb876-logo{
			left:0px;
			padding:0px;
			height:70%;
		}
		#hideSmallScreen{
		 	display:none ;
		}
    	.hideFullScreen{
  			display:inline;
  		}

		div#changeBlock{
			float:none;
			diplay:inline-block;
			max-width:auto;
		}

		#outerContainer{
		    width:280px;
		    height:180px;
    		margin: 0 auto;
		}

		#outerContainerLongterm{
				width:309px;
				height:100px;
    			margin: 0 auto;
			}

		#outerContainer,#outerContainerLongterm  img{
 			width: 100% !important;
 			height: auto !important;
		}

/* I-Frame Container */
		.embed-container {
    		position: relative;
    		padding-bottom: 75%;
    		height: 0;
    		overflow: hidden;
		}
		.embed-container iframe {
    		position: absolute;
   			top:0;
    		left: 0;
    		width: 100%;
    		height: 100%;
		}

		.adressblock iframe{
			position: absolute;
   			top:0;
    		left: 0;
    		width: 100%;
    		height: 100%;
		}

		  table.tbl tr th.firstCol:first-child{
		  display: none;
		  }

		  table.tbl tr td:first-child{
		  display: none;
		  }

 		 table.tbl tr table  td:first-child{
 		 display:table-cell !important;
 		 }

 		 tr.borderBottom td {
 			 border-bottom:1pt solid black;
		}

		/*
		Use of timetables in css
		*/
		table#responsiveTimetable{width:100%;}
 		table#responsiveTimetable thead{display:none;}
 		table#responsiveTimetable tr:nth-of-type(2n) {background-color: inherit;}
 		table#responsiveTimetable tr td:first-child {
 			content: attr(data-td);
 			background: #f0f0f0;
 			font-weight:bold;
 			font-size:1.3em;
 		}
		table#responsiveTimetable tbody td{display:block; text-align:center;}
		table#responsiveTimetable tbody td:before{
			content: attr(data-th);
			display: block;
			text-align:center;
		}

		/*Tabellenzeilen abwechselnd grau und weiß hinterlegt*/
		table#responsiveTimetable tr td:nth-child(odd) {
		    background-color: #E8E8E8;
		}

		table#responsiveTimetable tr td:nth-child(even) {
		    background-color: #FFFFFF;
		}


		div#adress{
		display:block;
		border-collapse:separate;
		border-spacing:15px 25px;
		width:100%;
		}

		div.blockName{
		display: none;
		}

		div.adressblock{
		display:block;
		width:100%;
		}

		div.adressRow{
		display:block;
		}

	  div.tableStyle{
	  display:flex;
	  flex-direction: column;
	  font-size: 0.9em;
	  align-items:center;
	}

.StripedTable div.tablerowStripes:nth-of-type(odd){
	background-color:#E8E8E8;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.StripedTable div.tablerowStripes:nth-of-type(even){
	background-color:#FFFFFF;
	display:flex;
	flex-direction:column;
	align-items:center;
}

div.tablerowStripes .fixedImgDiv{
	border-right: 0px;
}

		.visibleHidden{
			visibility:hidden;
		}

   }

/*AP: End inserted styles */


/* ************************************************************************** */
/* Verhalten von Bereichsgrafik und Wortmarken in lay_css, wg config ******** */
/* Button-Beschriftung (mehr/weniger) in lay_css wg sprachabh. ************** */
/* ************************************************************************** */

/* ************************************************************************** */
/* Tablet Querformat 1024px, kleines Tablet Querformat 962px **************** */
/* Viewports sind fast breit genug fuer die volle Sicht. ******************** */
/* ************************************************************************** */
@media all and (max-width: 1000px) {
  /* Bereich Kopfgrafik ***************************************************** */
  /* Wortmarken ruecken nach links */
  span#ebene-logos {
    padding-left:2em;
  }
  /* Panoramaview ausblenden */
  div#panoramabilder {
    display: none;
  }
}

/* ************************************************************************** */
/* Tablet Hochformat ******************************************************** */
/* Navigationen zusammenklappen, Inhalt dafuer breiter ********************** */
/* ************************************************************************** */
@media all and (max-width: 800px) {
  /* Bereich Navi *********************************************************** */
  /* Brotkrumennavigation Spracheintrag wird ausgeblendet */
  div#brotkrumenNavi span {
    display:none;
  }
  /* Direkteinstieg ausblenden */
  div#direkteinstieg {
    display:none;
  }

  /* Hauptnavi klappt zusammen und aendert Farben */
  .jsEnabled div#hauptnavi {
    display:none;
  }
  div#hauptnavi ul.hauptNavi li {
    padding:0;
    line-height:2.2em;
  }
  div#hauptnavi ul.hauptNavi {
    padding-bottom:0;
  }
  div#hauptnavi ul li {
    display:inline-block !important;
    background:none;
    width:100%;
    margin-bottom:.4em;
  }
  div#hauptnavi ul li:last-child {
    margin-bottom:0;
  }
  div#hauptnavi ul.hauptNavi li a {
    width:100%;
    padding:0;
  }

  div#hauptnavi ul li a {
    display:inline-block !important;
    width:100%;
    font-size:1em;
  }
  #toggle-navigation {
    background-color:#B2B3B6;
    background-image:url(../images/menu-small.png);
    background-position:right bottom;
    background-repeat:no-repeat;
    width:42px;
    height:36px;
    display:inline-block;
    float:left;
    cursor:pointer;
    position:absolute;
    left:0;
    bottom:0;
  }

  /* Bereichsnavigation ***************************************************** */
  /* div#bereichsnavi -> ul -> li.toplevel -> span#notclickable -> Seitenname (gleich dem Hauptnavi-Punkt) */
  .jsEnabled div#bereichsnavi ul li.toplevel ul {
    display:none;
  }
  div#bereichsnavi ul li.toplevel ul li.aktiv ul {
    display:block;
  }
  div#bereichsnavi ul li.toplevel ul li.aktivKinder ul {
    display:block;
  }
  span#notclickable {
    color: white !important;
    line-height: 2.2em !important;
    margin: 0;
    padding-left:0.4em;
    background-color: #b2b3b6 !important;
    cursor:pointer;
  }
  span#notclickable span {
    display: inline !important;
    float:right;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.8em;
  }

  /* "Zacken bauen" */
  span#notclickable:first-child {
    background-color:#B2B3B6;
    display:block;
    border:2px solid #649600;
    position:relative;
  }
  span#notclickable:first-child:after,span#notclickable:first-child:before {
    top:100%;
    left:50%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
  }
  span#notclickable:first-child:after {
    margin-left:-8px;
    border-color:#B2B3B6 transparent transparent;
    border-width:8px;
  }
  span#notclickable:first-child:before {
    margin-left:-11px;
    border-color:#649600 transparent transparent;
    border-width:11px;
  }

  div#bereichsnavi ul li.toplevel ul li {
    line-height:2.2em;
    margin-top:.2em;
  }
  div#bereichsnavi ul > li.toplevel > ul > li:not(.aktiv) {
    background-color:#ddd;
  }
  div#bereichsnavi ul a {
    padding-left:.5em;
  }
  /* Werbung u.ae. ausblenden */
  div#partner, div.werbung, div.werbung_horizontal_portal {
    display: none;
  }
  /* Bereich Inhalt ********************************************************* */
  /* Inhalt nimmt ganze Breite ein */
  div#wrapper_neu > div {
    width:auto;
    display:block;
    padding-bottom: .4em;
  }
  div#inhalt {
    border-top:1px solid #B2B3B6;
    border-bottom:1px solid #B2B3B6;
    min-height:5em;
  }
  div#contentwrapper {
    border-top:.4em solid #B2B3B6;
  }
  /* Text sollte links ausgerichtet sein. Kein Blocksatz oder justify */
  .blocksatz {
    text-align:left;
  }
  [align=justify]  {
    text-align:left;
  }
  a:focus, div#hauptnavi ul.hauptNavi li a:focus, a:hover, div#hauptnavi ul.hauptNavi li a:hover, a:link:hover, a:visited:hover, a:focus, a:active {
    background-color: #649600;
    color: #fff !important;
  }
  div#bereichsnavi, div#inhalt, div#nebeninhalt {
    border-left: 0.4em solid #b2b3b6;
    border-right: 0.4em solid #b2b3b6;
  }
  div#brotkrumenNavi {
    border:none;
    padding:0.2em 0 0 0;
  }
  div#brotkrumenNavi ul li a {
    line-height:1.8em;
    display:inline-block;
  }

  div#nebeninhalt {
      padding-top: .4em;
  }
  /* kleineren margin fuer Bilder */
  img.bild_links, img.bild_links_ohne_umfluss, img.mitarbeiter_foto {
    margin-right: 5px;
    margin-bottom: 5px;
  }
  img.bild_rechts {
    margin-bottom: 5px;
    margin-left: 5px;
  }
}

/* ************************************************************************** */
/* Mobile Querformat ******************************************************** */
/* Texte aublenden, Icons bevorzugen **************************************** */
/* Uebersichten zusammenklappen, Fusszeile untereinander ******************** */
/* ************************************************************************** */
@media all and (max-width: 480px) {
  /* Bereich Servicenavi **************************************************** */
  /* text vor icons ausblenden */
  div#serviceNavi ul li span {
    display:none;
  }
  div#serviceNavi ul li label[for=suchfeld]  {
    display:none;
  }
  div#serviceNavi ul li:last-child {
    border: none;
    margin-left:-0.4em;
  }


  /* Bereich Kopfgrafik ***************************************************** */
  /* TU-Logo rueckt nach rechts */
  img#unido-logo {
    margin-left:5em;
  }
  div#kopfgrafikbereich {
    height:55px;
  }

  /* Bereich Inhalt ********************************************************* */
  div#inhalt_spalte_links,div#inhalt_spalte_rechts {
    width:auto;
    float:left;
    margin-bottom:0;
  }

  /* Bereich Fusszeile ****************************************************** */
  /* Eintraege in Fusszeile untereinander statt nebeneinander */
  div#fusszeile ul {
    margin:2px 0 4px;
  }
  div#fusszeile ul li {
    display:block;
    text-align:center;
    border-bottom:1px solid #DDD;
    padding:2px;
  }
  div#fusszeile ul li:after {
    content:"";
  }
  div#fusszeile ul li, div#fusszeile ul li > a {
    list-style:none;
    display:block;
    width:100%;
    line-height: 2em;
  }
  div#fusszeile ul li > a.email_link {
    padding:0;
  }
  div#fusszeile ul li.abstandshalter {
    border-right:0;
    margin-right:0;
  }

  /* Bereich Uebersichten *************************************************** */
  div.aktuelles_meldung .item-titel, div.aktuelles_meldung .item-titel-mehr, div.aktuelles_meldung .item-titel-weniger {
    cursor:pointer;
  }
  div.aktuelles_meldung .button {
    display:inline;
    color:black;
    line-height: 2em;
    font-size:0.75em;
    font-weight:normal;
  }
  div.aktuelles_meldung:hover .button {
    background-color: #649600;
    color: #fff;
  }
  /* Ausblenden nur, wenn JS zum Einblenden aktiviert */
  .jsEnabled div.aktuelles_meldung .item-uebersicht {
    display:none;
  }
  .jsEnabled div.aktuelles_meldung .item-titel a, .jsEnabled div.aktuelles_meldung .item-titel-mehr a {
    pointer-events:none;
  }
  /* FAQ's werden alle eingeklappt und die Uebersicht ausgeblendet */
  .jsEnabled ol.faq-linkliste {
    display:none !important;
  }
}


/* ************************************************************************** */
/* Mobile Hochformat, sehr schmale Geraete ********************************** */
/* Logo verkleinern und body schmaler, damit kein horizonales Scrollen ****** */
/* ************************************************************************** */
@media all and (max-width: 320px) {
  body {
    min-width:190px;
  }
  /* Bereich Kopfgrafik  **************************************************** */
  /* TU-Logo wird verkleinert */
  img#unido-logo {
    width:80% !important;
    height:80% !important;
  }
}