@charset "UTF-8";

/**  TuTech-Styles  */
@import url(./tutech_application.css);
@import url(./v6-anpassungen.css);

/** ------------------------------------------ 
 *  uebernommen aus layout00INSTITUTE
 * -------------------------------------------  
 */
.clear { clear: both;  }
.float_left { float: left; display:inline; margin-right: 1em; margin-bottom: 0.15em;  }
.float_right { float: right; display:inline; margin-left: 1em; margin-bottom: 0.15em;  }
.img_left { float: left; display:inline; margin-right: 1em; margin-bottom: 1em;  }
.img_right { float: right; display:inline; margin-left: 1em; margin-bottom: 1em;  }
.align_center { text-align:center; margin: 0.5em auto }
.center { text-align:center; margin: 0.5em auto }
.align_right {text-align: right;}
.ilegend { margin-left: 1em; margin-bottom: 0.15em; font-size: 90%; font-style: italic; }

/** ------------------------------------------ 
 *  - fuer das Institutslogo im SVG-Format
 *  - muss in der institutseigenen CSS-Datei 
 *    individuell angepasst werden
 * -------------------------------------------  
 */
#page-header h1 img {
  height: 138px;
  width: auto; /* 227px */
}
.fold-header #page-header h1 img {
  height: 60px;
  width: auto; /* 99px */
}
@media screen and (max-width: 1024px) {
  #page-header h1 img, .fold-header #page-header h1 img {
    height: 60px;
    width: auto; /* 99px */
  }
}

/** ------------------------------------------------ 
 *  Teaser-Hintergrund, falls kein Teaser vorhanden
 * -------------------------------------------------  
 */
.js #teaser-bar #teaser {
  background: #f0f0f0;
}

/** ------------------------------------------------------
 * totop: Sprung nach oben am Ende eines Inhaltselementes
 * -------------------------------------------------------
 * */
div.skiptop {
    color: #3333b0;
    font-size: 90%;
    margin: 0 0 1em 0;
  }
div.skiptop a {
    display: block;
    background: transparent url(../Img/arrow-up-blue.gif) no-repeat 0 50%;
    padding: 0 0 0 1.25em;
    }

/** ---------------------------------------------
 *  Bilder responsive machen
 * ----------------------------------------------
 */
@media screen and (max-width: 768px) {
  #content img {
      height: auto;
      width: auto;
      max-width: 100%;
  }
  #content div.csc-textpic .csc-textpic-imagewrap figure {
      max-width: 100%;
      overflow: hidden;
      display: block;
  }
  #content div.csc-textpic-center .csc-textpic-imagewrap,
  #content div.csc-textpic-center figure.csc-textpic-imagewrap {
      width: 100%;
      display: block;
  }
  #content div.csc-textpic-center .csc-textpic-center-outer {
      max-width: 100%;
  }
  #content div.csc-textpic-center .csc-textpic-center-inner {
      width: 100%;
  }
  #content figcaption.csc-textpic-caption {
      display: block;
  }
  #sidebar img {
      height: auto;
      width: auto;
      max-width: 100%;
  }
  #sidebar div.csc-textpic .csc-textpic-imagewrap figure {
      max-width: 100%;
      overflow: hidden;
      display: block;
  }
  #sidebar div.csc-textpic-center .csc-textpic-imagewrap,
  #sidebar div.csc-textpic-center figure.csc-textpic-imagewrap {
      width: 100%;
      display: block;
  }
  #sidebar div.csc-textpic-center .csc-textpic-center-outer {
      max-width: 100%;
  }
  #sidebar div.csc-textpic-center .csc-textpic-center-inner {
      width: 100%;
  }
  #sidebar figcaption.csc-textpic-caption {
      display: block;
  }
  #sidebar div.csc-textpic-imagecolumn {
      max-width: 100%;
  } 
}