/**
 *  responsive-480.css
 *  Styles für width < 480px
 *  Überschreibt responsive-960.css
 *  Wird ggf. von responsive-320.css überschrieben
 */

/** --------------
    GLOBAL 
    ------------------ **/

/**  body für Hamburger-Menü  **/
body {
  overflow-x:hidden;
}

/** Überschriften-Größen **/

.text h1 {
	font-size:210%;
}
.text h2 {
	font-size:190%;
}
.text h3 {
	font-size:170%;
}

/** page-switcher **/

#page-switcher div span {
    display:none;
}
#page-switcher div.direction h3 {
  display:none;
}
#page-switcher .dir-1,
#page-switcher .dir-2 {
    display:none;
}

/** tabs **/

.tabs .toc a {
  padding: 12px 20px;
  padding: 5px;
  word-break:hyphenate;
}
/** col-subcol **/

/** extras **/

/*#extras div:not(.subnav)*/
#extras>div:not(.donothide):not(.subnav) {
  display:none;
}

/** --------------
    ZENTRALSEITEN
    ------------------ **/

/** wrapper **/

body div#wrapper {
  background-image: none;
}
#wrapper div.holder {
  margin: 10px 0px 20px;
  overflow:visible;
}

/** container **/


/** branding **/

#branding {
  background-color: whitesmoke;
}
#branding-box {
  height: auto;
  padding: 0px;
  width: 100%;
}

/** logo **/

#logo {
  float: none;
  height: auto;
}
#logo a,
#logo em,
#logo span {
  position: static;
  text-align: left;
  width: auto;
}
#logo span {
  background-color: WhiteSmoke;
  background-position: center 0;
  position: relative;
  top: -60px;
}

/** search **/

#search-box {
  float: none;
  position: static;
  padding: 0 20px;
}
#search-box .button {
  top: 6px;
  position: relative;
}
#search-box input {
    width: 75%;
}

/** nav-meta **/

#nav-meta {
  float: none;
  font-size: 120%;
  height: 4em;
  overflow: hidden;
  padding: 1em 20px 0 20px;
  position: static;
}
#nav-meta li {
  margin: 0;
}
#nav-meta li a {
  background: url("../Images/Aperto/icons/sprite-1.png") no-repeat scroll 5px -383px transparent;
  padding: 1em;
}
#nav-meta li li,
#nav-meta li li:first-child {
  border: none;
  padding: 0;
}
#nav-meta li li abbr {
  padding: 1em 0;
  display: block;
}
#nav-meta li li:first-child > * {
  display: block;
  padding: 1em 0 1em 0;
}
#nav-meta li li:last-child abbr {
  padding-right: 1em;
}
#nav-meta li li:first-child abbr {
  border-right: 1px solid black;
  padding: 0 5px 0 0;
}

/** nav-global **/

#nav-global {
  float: none;
}
#nav-global-box {
  background-color: black;
  overflow: hidden;
}
#nav-global-box > ul > li {
	font-size: 120%;
}
#nav-global li#nav-section-five {
  float: right;
}
#nav-global li#nav-section-one > a,
#nav-global li#nav-section-two > a,
#nav-global li#nav-section-four > a,
#nav-global li#nav-section-three > a {
  border-right: 1px solid white;
}
#nav-global li a.nav-toggle {
  display: none;
}
#nav-global li *,
#nav-global li strong,
#nav-global li strong em {
  word-wrap: normal;
}
#nav-global li#nav-section-one:hover ul,
#nav-global li#nav-section-two:hover ul,
#nav-global li#nav-section-three:hover ul,
#nav-global li#nav-section-four:hover ul,
#nav-global li#nav-section-five:hover ul,
.js #nav-global li#nav-section-one.active:hover ul,
.js #nav-global li#nav-section-two.active:hover ul,
.js #nav-global li#nav-section-three.active:hover ul,
.js #nav-global li#nav-section-four.active:hover ul,
.js #nav-global li#nav-section-five.active:hover ul {
  height: auto;
  width: 500%;
}
#nav-global li li,
#nav-global li:hover li,
#nav-global li li:first-child,
#nav-global li:hover li:first-child {
	width: 45%;
}
#nav-global li.active ul,
#nav-global li#nav-section-one.active ul,
#nav-global li#nav-section-two.active ul,
#nav-global li#nav-section-three.active ul,
#nav-global li.a11y-focus-key ul {
  height: auto;
}
#nav-global #nav-global-box li li {
	display: table;
	font-size: 110%;
	height: 3em;
	overflow: hidden;
	width: 50%;
}
#nav-global li li:hover {
  background: none repeat scroll 0% 0% rgb(208, 222, 155);
}
#nav-global li li.on {
  background-color: rgb(208, 222, 155);
}
#nav-global li li a,
#nav-global li li em,
#nav-global li li strong {
  min-height: 1em;
  text-align: left;
}
#nav-global li li a,
#nav-global li li strong,
#nav-global li:hover li a,
#nav-global li.active li a,
#nav-global li.a11y-focus-key li a,
#nav-global li li:first-child a,
#nav-global li li:hover a,
#nav-global li li:active a {
  background: url("../Images/Aperto/icons/sprite-1.png") no-repeat scroll 15px -584px transparent;
  display: table-cell;
  margin: auto 0 auto 0;
  padding: 0 10px 0px 25px;
  vertical-align: middle;
}

/** subnav **/

.subnav {
    width: auto;
}

/** footer **/

/** --------------
    STARTSEITE
    ------------------ **/

/** stage **/

#stage .grid-2 li a, 
#stage .grid-3 li a, 
#stage .grid-4 li a, 
#stage .grid-5 li a {
	font-size: 120%;
}

/** teaser **/

.tabs .section img {
	height: auto;
	max-width: 100%;
}
.tabs .section h2 {
  clear: both;
}

.has-pause-button .pause-button {
  height:30px;
  width:30px;
}
.tabs .pause-button.paused {
  background-position: 83% 50%;
}
.tabs .pause-button.playing {
  background-position: 16% 31%;
}

/** service-board **/

#service-board .prev span, 
#service-board .next span {
	width: 24px;
}
#service-board .col-1,
#service-board .col-2,
#service-board .col-3 {
    width: 100%;
}
#service-board .toc-wrapper {
  width: auto;
  margin-right: 24px;
}
/** persona-choice **/

#persona-choice.pc-mod {
  padding-right: 10px
}
#persona-choice.pc-mod p {
  width: auto;
  margin-bottom: 20px;
}
#persona-choice.pc-mod .persona-select {
  width: auto;
}
#persona-choice .form-row {
  margin-right:0;
}

/** Die TUHH auf **/

/** Partner der TUHH  **/

/** Zertifikate **/

/** --------------
    DETAILSEITEN
    ------------------ **/

/** col-subcol **/

.col-subcol #main,
.col-subcol #extras {
  float: none;
  width: auto;
}

/** main **/

#main {
  width: auto;
  margin-bottom: 10px;
}

/** text **/

div.text {
  overflow: auto;
}

/** box **/

.box {
  width: auto;
}

/** breadcrumb **/

#breadcrumb {
	display: block;
	margin:0.5em 0 0.5em 0;
	overflow:auto;
	padding:0;
	float:none;
}
#breadcrumb li {
	background-color:#eff3dc;
	border-radius:0 0 10px 0;
	float: left;
	font-size: 120%;
	list-style: none;
	margin-right:1px;
	padding: 5px 0px 5px 0px;
}
#breadcrumb li:last-of-type {
	background-color:#bed075;
	padding: 5px 5px 5px 2px;
}
#breadcrumb li a {
	padding: 5px 5px 5px 2px;
}
#breadcrumb li a:hover {
	background-color:orange;
	border-radius:0 0 10px 0;
	text-decoration:none;
}

/* Hamburger-Menü */

#hamburger {
	background-color:#bed075;
	background-image:url( ../Images/hamburger.svg);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 50%;
	border-radius:10px;
	cursor:pointer;
	display:block;
	float:right;
	font-size:200%;
	height:20px;
	line-height:100%;
	padding:0 2px 5px 2px;
	position:relative;
	right:5px;
	text-align: center;
	top:-2px;
	width:30px;
}
/*
#hamburger:hover {
    background-color: orange;
}
*/
#hamburger.off {
	display:none;
}

.subnav {
    background: whitesmoke none;
	box-shadow: 10px 10px 15px grey;
    height: auto;
	margin-bottom:20px;
    position: absolute;
	right:-50%;
    top:45px;
	transition:all 0.5s;
	width:50%;
}
.subnav.on {
	right:45px;
	transition:all 0.5s;
}
/** --------------
    WEBSITES DER TUHH
    ------------------ **/

#stage.stage-mod {
    margin-top: 0;
}
#web-navigator {
  background-image: none;
}
#web-navigator .panel-wrapper,
#web-navigator .panel-wrapper:first-child {
    width: 100%;
}
/** --------------
    DAS WICHTIGSTE FÜR
    ------------------ **/

/* persona-choice */

#persona-choice .form-row {
  margin: 0 0 12px 20px;
}
#persona-choice fieldset {
  float: right;
  margin-right: 0px;
}
#persona-choice .combobox input {
  padding-right: 0px;
}
#persona-choice h1 {
  padding-right: 4px;
  float: none;
  font-size: 165%;
}

/* linklist */

.tabs .linklist ul,
.tabs .linklist ul:first-child {
  width: 100%;
}

/* tabs-studyfields */

.tabs.tabs-studyfields .toc li,
.tabs.tabs-linklist .toc li {
    font-size: 120%;
}
.tabs-studyfields .linklist li a img {
	height: auto;
	margin-bottom: 0;
	padding: 5px;
	width: 50px;
}
.tabs-studyfields .linklist li a span {
	bottom: 5px;
	left: 60px;
}