/**  user.css
 *
 *  TUHH-Relaunch Styles
 *  ueberschreiben und ergaenzen die Styles des Prototypen
 */

/* iconclasses */
@import url(iconclasses.css);

/* Hamburger-Menü-Button */
#hamburger {
	display:none;
	clip: rect(0, 0, 0, 0);
}

/* -------------------------------------
 *  Allgemein
 *  ------------------------------------- */

/* Hintergrundbild in TUHHrelaunch/img/bgs */
#wrapper {
  background: url(../Images/bgs/tuhh-bg.jpg) -400px 0 no-repeat;
}
/* Prevent iOS text size adjust after orientation change, without disabling user zoom */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* -------------------------------------
 *  Branding
 *  ------------------------------------- */

 /* Neues Logo (ohne blaue Unterzeile) */
 #logo span {
   background-color: #f8f4f4;
   background-image: url("../Images/TUHH_logo_rgb_schutzraum.svg");
   background-position: center;
 }
/* Icon 1px weiter unten positionieren */
#nav-meta li a {
  background: url(../Images/Aperto/icons/sprite-1.png) 0 -395px no-repeat;
}
/* keinen Help-Cursor in der sprachumschaltung */
.languages ul li a abbr {
  cursor: pointer;
}

 /* -------------------------------------
  *  Seitenfuss
  *  ------------------------------------- */

/* Link auf E-Mail-Adresse des Autors */
#site-info p a {
  color: #666;
}
/* Icon 1px weiter unten positionieren */
#site-info li a {
    background: url("../Images/Aperto/icons/sprite-1.png") no-repeat scroll 0 -595px transparent;
}
/* Linkfarbe visited korrigieren */
#site-info li a:visited {
    color: #000;
}

/* -------------------------------------
 *  Detailseite
 *  ------------------------------------- */

/**  Breadcrumb  **/
#breadcrumb {
	display:none;
}

/* Tabelle ohne Rahmen */

.text td.blau {
  background-color: #EEF4F4
}

.text td.grau {
  background-color: #F5F5F5;
}

.text td.blaugrau,
.text th.blaugrau {
  background-color: #E5EAEA;
}

.text thead th.blaublau {
  background-color: #D5E1E6;
}

/* Photos */
.text dl.photolinks,
.text dl.photorechts {
  width: auto;
  position: relative;
}
.text dl.photolinks {
  float: left;
  margin: 5px 10px 5px 0;
}
.text dl.photorechts {
  float: right;
  margin: 5px 0 5px 10px;
}
.text dl.photolinks dt,
.text dl.photorechts dt {
  background: none;
  margin: 0;
  padding: 0;
}
.text dl.photolinks dd,
.text dl.photorechts dd {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  padding: 5px 5px 5px 0;
  font-size: 120%;
  color: #454545;
  width: auto;
  margin: 0
}
.text dl.photolinks .caption,
.text dl.photorechts .caption {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.85);
  width: 100%;
}
/* position der Bildunterschrift */
.text dl.photolinks dd,
.text dd.photolinks.caption,
.text dl.photorechts dd,
.text dd.photorechts.caption {
    position: static;
}

/* textlinks */
.text a {
  color: #27827F;
  text-decoration: underline;
}
.text a:visited {
  color: #2C5458;
}
.text a:hover,
.text a:active,
.text a:focus {
  color: #000;
}

/* Schriftgroesse geschachtelter Blockelemente */
.text dd p, .text dd div, .text dd li,
.text td p, .text td div, .text td li,.text th p,
.text th div, .text th li, .text li li, .text li p,
.text li div, .text li table tr th, .text li table tr td,
.text table tbody tr td table tbody tr td,
.text table tbody tr td table tbody tr th,
.text li input, .text li select, .text li textarea,
.text li label, .text p input, .text p select,
.text p textarea, .text p label, .text p span input,
.text p span select, .text p span textarea,
.text p span label, .text td input, .text td select,
.text td textarea, .text td div label, .text td div input {
  font-size: 100%;
}
.text td h1, .text th h1 {
  font-size: 140%;
}
.text td h2, .text th h2 {
  font-size: 130%;
}
.text td h3, .text th h3 {
  font-size: 120%;
}
.text td h4, .text th h4 {
  font-size: 110%;
}

/* Tabellenzellen standardmaessig linksbuendig */
.text table tr td {
  text-align: left;
}
/* Tabellenbreite immer 100% */
.text table {
  width: 100%;
}
/* Definition-Liste */
.text dl dd {
   padding-left: 0.75em;
}
/* Zeilenabstand von Absaetzen und Listen angleichen */
/* .text li {
  line-height: 1.3em;
} */

/* Liste Umfluss korrigieren */
.text ol, .text ul {
  overflow: hidden;
}

/* -------------------------------------
 *  Rechte Spalte
 *  ------------------------------------- */

/* Inhaltselement */
#extras div.csc-default {
  background: rgba(255, 255, 255, 0.95);
  padding: 15px;
}
#extras .box div.csc-default {
  padding: 0;
}
/* Farbe der Links korrigieren */
.subnav li a, .subnav li a:visited, .subnav .back a, .subnav .back a:visited {
  color: #000000;
}
/* Listen in der Sidebar richtig darstellen */
#extras .box ul.ce-menu, #extras .box .ce-bodytext ul {
  font-size: 140%;
  margin-left: 1.1em;
}
#extras .box ul.ce-menu ul, #extras .box .ce-bodytext ul ul {
  margin-left: 1em;
  font-size: inherit;
}


/* -------------------------------------
 *  Submenue
 *  ------------------------------------- */

/* wegfressen von bedingten Trennstrichen verhindern */
#nav-global li a {
  word-wrap: normal;
}
/* Fehlen des Menü-Öffners kompensieren */
#nav-global li#nav-section-one.nosub,
#nav-global li#nav-section-two.nosub,
#nav-global li#nav-section-three.nosub,
#nav-global li#nav-section-five.nosub,
#nav-global li#nav-section-four.nosub {
	border-right: 1px solid #FFF;
	padding-right:0;
}
#nav-global li#nav-section-one.nosub {
    width: 195px;
}
#nav-global li#nav-section-two.nosub {
    width: 185px;
}
#nav-global li#nav-section-three.nosub {
    width: 185px;
}
#nav-global li#nav-section-four.nosub {
	border-right:0;
    width: 170px;
}
#nav-global li#nav-section-five.nosub {
	border-right:0;
    width: 205px;
}

/* rechten Rand vom siebten Menüpunkt des Submenüs verschummeln */
#nav-global #nav-global-box li li:nth-child(7) {
	float:right;
}
/* -------------------------------------
 *  Neue Inhaltselemente
 *  ------------------------------------- */

/* inset links */
.text div.left50 {
  width: 270px;
  float: left;
   margin: 5px 10px 5px 0;
   font-size: 110%;
   background-color: #DEEAEF;
 }
/* inset rechts */
.text div.right50 {
   width: 270px;
   float: right;
   margin: 5px 0 5px 10px;
   font-size: 110%;
   background-color: #DEEAEF;
}

/* -------------------------------------
 *  Eigene Styles fuer alle Seiten
 *  ------------------------------------- */

/* hr */
.text hr {
  width: 100%;
  margin: 0.5em 0;
  height: 1px;
  color: #000;
  border-style: none;
  background-color: #000;
}
/* sub und sup */
.text sub {
	font-size: 65%;
	vertical-align: bottom;
	position: relative;
	top: 2px;
}
.text sup {
	font-size: 65%;
	vertical-align: top;
	position: relative;
	top: -2px;
}
/* legal Liste */
.text ul.legal {
  list-style-image: url(../Images/hyphen.png);
}
/* Absaetze in Vorschriften */
.text ol.absatz {
  counter-reset: li;
  list-style: none;
  margin-top: 12px;
}
.text ol.absatz > li {
  position: relative;
  display: block;
  padding: 0 0 12px 0;
}
.text ol.absatz > li:before {
  content: "(" counter(li) ")";
  counter-increment: li;
  position: absolute;
  top: 0;
  left: -35px;
}
/* Alphabetische Aufzaehlungen in Vorschriften */
.text ol.unterabsatz {
  counter-reset: li;
  list-style: none;
  margin: 6px 0 -6px;
}
.text ol.unterabsatz > li {
  position: relative;
  display: block;
  padding: 0 0 12px 0;
}
.text ol.unterabsatz > li:before {
  content: counter(li, lower-alpha) ")";
  counter-increment: li;
  position: absolute;
  top: 0;
  left: -35px;
}
.text li ol.unterabsatz > li:before {
  left: -20px;
}
.text ol.absatz > li ol.unterabsatz, .text ol.absatz > li ol, .text ol.absatz > li ul {
  padding-left: 20px;
}

/* Tabelle als Layoutinstrument */
.text table.texttable {
  width: 100%;
  border: none;
}
.text table.texttable td, .text table.texttable th {
  font-size: 140%;
  border: none;
  vertical-align: top;
}
.text .foot1 {
  font-size: 100%;
}
/* linklists */
.text a.linklist, .text a.downloadlist {
    display: inline;
    margin: 0 0 3px 0;
    font-size: 110%; /* 15px */
    font-weight: bold;
}
.text a.linklist:hover,
.text a.linklist:active,
.text a.linklist:focus,
.text a.downloadlist:hover,
.text a.downloadlist:active,
.text a.downloadlist:focus {
    color: #000;
}
.text a.downloadlist {
    background: url(../Images/Aperto/icons/sprite-1.png) 0 -3799px no-repeat;
    padding-left: 20px;
}
.text a.downloadlist:hover,
.text a.downloadlist:active,
.text a.downloadlist:focus {
    background-position: 0 -3999px;
}
/* Hervorhebung */
.text span.betont {
  background-color: #DEEAEF;
}
/* code */
.text span.code {
  background-color: #EBEBEB;
  font-family: monospace;
}
/* Ordered List in Declaration List Item */
.text dd ol {
	padding-left: 2em;
}
/* Unordered List in Declaration List Item */
.text dd ul {
	padding-left: 0.95em;
}
/* Declaration List fuer Top-Level-Seiten */
.text dl.contentlist {
    margin: 0 0 15px 0;
}
.text dl.contentlist dt {
    background-color: #fff;
    padding: 5px 0 5px 0;
    margin: 0;
    font-size: 160%;
    font-weight: bold;
}
.text dl.contentlist dd {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 140%;
}
/* aligns + indent setzt der RTE */
.box .align-center,
.text .align-center {
	text-align: center;
}
.box .align-right,
.text .align-right {
	text-align: right;
}
.box .align-left,
.text .align-left {
	text-align: left;
}
.text div.indent, .text blockquote {
  margin-left: 35px;
}
/* text grau */
.text .greytext {
  color: #888;
}
/* Tabelle Numerisch rechtsbuendig*/
.text table.numeric th, .text table.numeric td {
  font-size: 11px;
  text-align: right;
}
/* clickables */
input[type=reset],
input[type=button],
input[type=submit],
input[type=image] {
    cursor: pointer;
}
/* abbr */
abbr {
  cursor: help;
  text-decoration: none;
  border-bottom-width: .1em;
  border-bottom-style: dotted;
}
/* Float-Container fuer Bilder */
.text figure.rpic {
  float: right;
  margin: 0.5em 0 0.25em 1em;
}
.text figure.lpic {
  float: left;
  margin: 0.5em 1em 0.25em 0;
}
.text figure.lpic, .text figure.rpic {
  font-size: 110%;
  color: #666;
  text-align: center;
  display: table;
}
.text figure.lpic img, .text figure.rpic img {
  border: 1px solid #ccc;
  padding: 2px;
  display: block;
}
.text figure.lpic a, .text figure.rpic a {
  font-size: inherit;
  font-weight: bold;
  text-decoration:none;
}
.text figure.lpic a:hover, .text figure.lpic a:focus,
.text figure.rpic a:hover, .text div.rpic a:focus {
  text-decoration: underline;
}
.text figure.lpic figcaption, .text figure.rpic figcaption {
  display: table-caption;
  width: inherit;
  text-align: left;
  caption-side: bottom;
}
/* Warning */
.text p.warning, .text div.warning {
  display: block;
  background-color: #deeaef;
  padding: 10px 10px;
  margin: 1em 0em;
  border-left: 25px solid #de3123;
  min-height: 38px;
}
.text p.warning:before, .text div.warning:before {
  float: left;
  margin: 20px 0 0 -0.5em;
  font-size: 40px;
  content: '!';
  color: white;
  display: block;
  width: 21px;
  height: 35px;
  line-height: 40px;
  margin-left: -33px;
  margin-top: 0;
  text-align: center;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}
/* Spaltenbreiten fuer Tabellen */
.text td.width_5_pct, .text th.width_5_pct {
  width:5%;
}
.text td.width_10_pct, .text th.width_10_pct {
  width:10%;
}
.text td.width_20_pct, .text th.width_20_pct {
  width:20%;
}
.text td.width_30_pct, .text th.width_30_pct {
  width:30%;
}
.text td.width_40_pct, .text th.width_40_pct {
  width:40%;
}
.text td.width_50_pct, .text th.width_50_pct {
  width:50%;
}

/* Button im Textbereich */
.text .box p .more a {
  text-decoration: none;
}

/* Skip To Top Link */
.text div#skipToTop a {
  	background: #fff url(../Images/Aperto/icons/sprite-1.png) 0 -3393px no-repeat;
  	padding-left: 1.5em;
  	font-size: 140%;
}

/* Akkordeon */
img.inout {
 margin: 0 0.3em 0.125em 0;
}
h1 img.inout, h2 img.inout {
 margin: 0 0.3em 0.2em 0;
}
.akkordeonminipic {
  float: right;
  padding: 5px 0;
  margin-top: -10px;
  height: 42px;
}

/* Buttonstyles */
.text div.button1 p, .text div.button2 p, .box div.button1 p, .box div.button2 p {
	font-size: 180%;
	margin: 0;
	padding: 0;
}
.text div.button1 a, .text div.button2 a, .box div.button1 a, .box div.button2 a {
	text-decoration: none;
	color: #fff;
	display: block;
}
.text div.button1 a:visited, .text div.button2 a:visited,
.text div.button1 a:visited, .text div.button2 a:visited {
	color: #fff;
}
.text div.button1 a:hover, .text div.button2 a:hover,
.box div.button1 a:hover, .box div.button2 a:hover {
	color: #000;
}
.text div.button1, .text div.button2, .box div.button1, .box div.button2 {
	color: #fff;
	padding: 10px 25px;
	text-align: center;
	margin: 5px 2em 10px 0;
	width: auto;
	display: inline-block;
	border-radius: 8px;
	box-shadow: 2px 2px 2px #666;
}
.text div.button1, .box div.button1 {
	background-color: #77933c; /* green */
}
.text div.button2, .box div.button2 {
	background-color: #31859c; /* blue */
}
.box  div.button1, .box div.button2 {
	display: block;
	margin-right: 0;
}