/*  ********* Navigator  ********* */
#navigator .col-1 {
	width: 100%;
	margin-bottom: 30px;
}
#navigator .col-1 ul {
	padding-bottom: 10px;
}
#navigator .col-1 li {
	display: inline-block;
	background: none;
}
#navigator .col-2 {
	width: 70%;
}
#navigator .col-2 .col-box {
	margin-left: 0;
	border-left: 0;
	padding-left: 0;
}
#navigator .col-3 {
	width: 30%;
}
#navigator .close {
	right: 20px;
}
/* GRID / LAYOUT
############################ */
.single-page #main {
	float: right;
	max-width: 100%;
}
#search-box,
#nav-meta {
	right: 10px;
}
#site-info {
	margin-top: 20px;
}

#nav-global .menu .overview {
	margin-left: 10px;
}
/*
.banderol.few-navi #nav-global .nav-global-toc ol {
	width: 100%;
}
.banderol.few-navi #nav-global .nav-global-toc li {
	clear: right;
	width: 100%;
	text-align: right;
}
*/
/* ***** stage ************* */
#stage .teaser-box {
	max-width: 85%;
}
#stage .teaser-box h2,
#stage .teaser-wrapper p {
	float: none;
	width: 100%;
}
#stage .teaser-box h2 {
	font-size: 300%;
}
#stage .prev span,
#stage .next span {
	top: 11em;
	height: 5.4em;
	width: 4.4em;
	background: #000 url(../img/icons/teaser-wrapper-small-sprite.png) 43% 6px no-repeat;
}
#stage .next span {
	background-position: 43% -192px;
}
#faculty-stage #stage .teaser-box {
	margin-right: 0;
	margin-left: 0;
}
#faculty-stage #stage .teaser-box-2 {
	background: #00549F;
}
#faculty-stage #stage .teaser-box-2 h2 {
	position: static;
	font-size: 350%;
}
#stage .teaser-box-2 {
	bottom: 28px;
	padding: 10px;
}
#stage .teaser-wrapper p .more {
	float: right;
}
/*  ********* Persona  ********* */
.persona-item .overview {

}
.persona-item ul {

}
.persona-item li {

	margin-right: 0;
}

#persona ol li a {
	font-weight: 400;
	text-align: center;
	padding: 60px 15px 20px;
}
.latest.events h2 {
	float: left;
}
.latest.events span.date {
	font-size: 100%;
}
#main .latest li h2 {
	font-size: 130%;
}

/* two Columne Box */

.csscolumns .two-columne #main .text .mb-middle.more-box {
	float: right;
	width: 30.3em;
	margin-left: 20px;
}
.csscolumns .two-columne #main .box .vcard img {
	margin: 0 15px 15px 0;
	/* float: none; Michael Simon A.A. [2014.08.21]: Ansprechpartnerboxen in einer zweispaltigen Seite haben sich nicht richtig verhalten. */
}
.csscolumns .two-columne #main .box .vcard .vcard-inner {
	/* Michael Simon A.A. [2014.08.21]: Ansprechpartnerboxen in einer zweispaltigen Seite haben sich nicht richtig verhalten.
	display:inline-block;
	float: none;
	*/
	text-align: center;
}
.csscolumns .two-columne #main .box .vcard .vcard-inner div {
	/* Michael Simon A.A. [2014.08.21]: Ansprechpartnerboxen in einer zweispaltigen Seite haben sich nicht richtig verhalten.
	display:inline-block;
	float: none;
	*/
	text-align: center;
}
/* Michael Simon A.A. [2014.08.21]: Ansprechpartnerboxen in einer zweispaltigen Seite haben sich nicht richtig verhalten.
.csscolumns .two-columne #wrapper #main .box .vcard * {
    text-align: center;
}
*/
#main .text .mb-middle.more-box ul {
	background: #ffe57f;
}
.two-columne #main .box-wrapper-mod {
	float: left;
}
#main .box-wrapper-mod .box {
	margin: 0 0 20px 0;
}
.two-columne #main .box {
	margin: 0 2% 10px 0;
	padding: 12px 2%;
	width: 93%;
	max-width: none;
	float: none;
}
.two-columne #main .box.contact {
	margin-right: 0;
}
.csscolumns .two-columne #main .box .vcard div {
	max-width: none;
}
.csscolumns .two-columne .text-block {
	width: 100%;
	float: left;
}
.two-columne #main .text .mb-middle.more-box {
	width: auto;
	margin: 0 0 10px 0;
}
.two-columne #main .cl-small {
	width: auto;
}
/* Michael Simon [2018.12.06]: Neuausrichtung der Telefonnummer auf Mitarbeiterseiten, damit sie Response immer mittig ist.
.contact-person #main .vcard .contact-box .tel dt {
	width: 11em;
} */
.contact-person #main .vcard .contact-box .fax dt {
	width: 4em;
}


/* Teaser
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#main .teaser-row .teaser.teaser-special .teaser-inner {
	padding-top: 10px;
	padding-bottom: 10px;
}
#main .teaser-row .teaser-special .ts-box {
	margin: 0 10px 0 10px;
}

#home #main .teaser-row .list-teaser-group h3,
#home #main .teaser-row .list-teaser-group ul {
	margin-left: 0;
}


#home #wrapper #main .teaser-row .teaser.grid-2.h-color-1 .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-2 .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-3 .teaser-inner {
	padding: 10px;
}
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-1:last-child .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-2:last-child .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-3:last-child .teaser-inner {
	padding: 10px 10px 10px 37px;
}
#home.startpage #wrapper #main .teaser-row .teaser.grid-2.h-color-1:last-child .teaser-inner,
#home.startpage #wrapper #main .teaser-row .teaser.grid-2.h-color-2:last-child .teaser-inner,
#home.startpage #wrapper #main .teaser-row .teaser.grid-2.h-color-3:last-child .teaser-inner {
	padding: 10px 10px 10px 10px; /* Michael Simon A.A. [2014.08.04]: Die RWTH-Startseite muss hier (padding: 10px 10px 10px 37px) rausgenommen werden, da sonst ein breiter haesslicher Rand links entsteht. ACHTUNG: Bei Tablet Portrait muss es dann wieder rein! */
}
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-1:first-child .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-2:first-child .teaser-inner,
#home #wrapper #main .teaser-row .teaser.grid-2.h-color-3:first-child .teaser-inner {
	padding: 10px 10px 10px 10px;
}
#main .teaser-row .teaser-list.h-color-1 .teaser-inner .ts-box,
#main .teaser-row .teaser-list.h-color-2 .teaser-inner .ts-box,
#main .teaser-row .teaser-list.h-color-3 .teaser-inner .ts-box {
	padding-top: 0;
}
#main .teaser-row .teaser-list.h-color-1 .teaser-inner .ts-box h2.mod,
#main .teaser-row .teaser-list.h-color-2 .teaser-inner .ts-box h2.mod,
#main .teaser-row .teaser-list.h-color-3 .teaser-inner .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-2.h-color-1 .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-3.h-color-1 .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-2.h-color-2 .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-3.h-color-2 .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-2.h-color-3 .ts-box h2.mod,
#wrapper #main .teaser-row .teaser.grid-3.h-color-3 .ts-box h2.mod {
	padding-top: 0;
	margin-top: 0;
}
#main .teaser-row .h-color-2 h2,
#main .teaser-row .h-color-2 h2 a {
	color: #fff;
}
.teaser-row .links-big ul {
	width: 47.6%;
}
.teaser-row .links-big ul {
	margin: 0 0 0 3.4%;
	width: 46.5%;
}


#main .teaser-row .teaser.h-color-1 .teaser-inner,
#main .teaser-row .teaser.h-color-2 .teaser-inner,
#main .teaser-row .teaser.h-color-3 .teaser-inner {
	background-image: url(../img/bgs/line-color-teaser.png);
	background-position: 0 0;
	background-repeat: repeat-y;
	padding: 10px 10px 10px 37px;
}

#main .teaser-row .links-big {
	margin-bottom: 20px;
}

#main .teaser-row .teaser.facts h2 {
	text-align: center;
}
#gallery-overview #main .teaser-row .teaser .teaser-inner img,
#search-results #main .teaser-row .teaser .teaser-inner img {
	margin-bottom: 0;
}
#main .teaser-row .teaser .teaser-inner img {
	margin-bottom: 0;
}

#main .teaser-row .h-color-1 .ts-box,
#main .teaser-row .h-color-2 .ts-box,
#main .teaser-row .h-color-3 .ts-box {
	 padding: 10px;
 }

#main .teaser-row .grid-2 .ts-box {
	padding: 0 0 10px 0;
}
#main .teaser-row .grid-2.h-color-1 img,
#main .teaser-row .grid-2.h-color-2 img,
#main .teaser-row .grid-2.h-color-3 img {
	padding: 0;
}
#main .teaser-row .teaser-list .links {
	width: 100%;
	clear: both;
	padding-top: 10px;
}

#main .teaser-row .teaser-group .teaser {
	display: inline-block;
	float: none;
}
#main .teaser-row .teaser:first-child .teaser-inner {
	padding-left: 0;
	background-image: none;
}
#main .teaser-row .teaser.h-color-1:first-child .teaser-inner,
#main .teaser-row .teaser.h-color-2:first-child .teaser-inner,
#main .teaser-row .teaser.h-color-3:first-child .teaser-inner {
	padding-left: 10px;
	background-image: none;
}

#main .teaser-row .teaser-group .teaser {
	margin-bottom: 20px;
}

#main .teaser-row .teaser-group .teaser.first h2 {
	/*padding-top: 10px; */
}
#main .teaser-row .teaser-group .teaser.second {
	margin-bottom: 20px;
}
#main .teaser-row .teaser-group .teaser.third {
	margin-bottom: 20px;
}
#main .teaser-row .teaser-group .teaser:last-child,
#main .teaser-row .teaser-group .orgainfo:last-child,
#main .teaser-row .teaser-group .events:last-child,
#main .teaser-row .teaser-group .latest:last-child {
	margin-bottom: 20px;
}

#main .teaser-row .teaser.grid-2 ul {

}



/*.nav-col #main .teaser-row .teaser {
	width:  34%;
 }
.nav-col #main .teaser-row .teaser:first-child {
	width: 66%;
}
.nav-col #main .teaser-row .teaser.grid-2,
.single-page #main .teaser-row .teaser.grid-2 {
	width: 65%;
}*/



/*#search-results #main .teaser-row.t-col-3 .tg-mod .teaser,
.nav-col #main .teaser-row.t-col-3 .teaser,
.single-page #main .teaser-row.t-col-3 .teaser {
	display: inline-block;
	width: 51.9%;
}*/



.teaser-row .grid-3.teaser-special img {
	float: left;
	width: auto;
	margin-right: 15px;
}
.teaser-row .grid-2 img {
	margin-right: 0;
	float: none;
	width: 100%;
	height: auto;
}
.teaser-row .teaser .col-1 {
	width: 100%;
	display: block;
	margin: 0 0 25px 0;
	padding: 0;
}
.teaser-row .teaser .col-2 {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#main .teaser-row .teaser.grid-2 .teaser-inner img,
#main .teaser-row .teaser.grid-3 .teaser-inner img {
	max-width: 100%;
	/*width: auto; Michael Simon A.A. [2014.08.12]: Durch das Ausliefern von gr��eren Bildern wurden hiermit auch gr��ere Bilder auf der Webseite dargestellt. */
	margin-right: 15px;
	float: left;
	height: auto;
}
#home #main .teaser-row .teaser.grid-2 .teaser-inner img,
#home #main .teaser-row .teaser.grid-3 .teaser-inner img {
	max-width: 100%;
	height: auto;
	width: 100%;
	float: left;
	margin: 0 10px 10px 0;
}
#home #main .list-teaser-group h3,
#home #main .list-teaser-group ul {
	margin-left: 20px;
}
#home #main .list-teaser-group {

	border-right: 0;
	min-height: 0;
	position: static;
	padding-bottom: 0;
}
#main .list-teaser-group li.all {
	position: static;
	margin-top: 10px;
}

.text h2 {
	font-size: 240%;
}
.latest {
	width: 49.8%;
	margin-bottom: 30px
}
#home .latest.news ul {
	margin-right: 0;
}
.latest.news {
	width: 50%;
	border-right: 0;
}
.single-page #main {
	float: none;
	max-width: 100%;
}
.teaser-row .teaser-video span.video-opener {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -28px 0 0 -28px;
	height: 55px;
	width: 55px;
	display: block;
	text-indent: -4000px;
	background: url(../img/bgs/video-opener-small.png) no-repeat 0 0;
}

@media only screen and (max-width: 1023px){
	#branding-inner {
		margin-left: 20px;
		width: calc(100% - 20px);
	}
	#top-grid {
		right: 10px;
	}
	#navigator h2 {
		margin-left: 20px;
	}

	h1 {
		font-size: 300%;
		margin: 0 0 20px 0;
	}
	#section-header {
		margin-left: 20px;
	}
	#persona-search form {
		display: inline-block;
	}

	#persona-search select {
		width: 160px
	}
	/* Michael Simon [2016.11.07]: Auch beim Tablet soll die neue Persona angezeigt werden.
	#persona ol li {
		width: 16%;
		margin: 0;
	}
	*/
	#persona ol li#persona-search {
		float: right;
		display: table;
		text-align: center;
	}

	.persona-item .overview {
		float: none;
		width: 100%;
	}
	.persona-item ul {
		display: table;
		width: 100%;
	}
	.persona-item li {
		margin-left: 0;
		margin-right: 0;
		width: 47.3%
	}
	.persona-item li:nth-child(2n+1) {
		margin-right: 2%;
	}
	.persona-item li:nth-child(3n+1) {
		margin-left: 0;
	}
	.persona-item .close {
		margin-right: 20px;
	}
	#search-results .listing li span {

	}
	#search-results .listing li span a {
		word-wrap: break-word;
	}



	/* Teaser
	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



	.text .photo-mod {
		clear: both;
		margin: 0 10px 10px 0;
	}
	.text .photo {
		width: 100% !important;
	}
	/* Michael Simon A.A. [2014.08.06]: Damit unsere kleineren Bild-Text-Modul Bilder (223px) auch responsive funktionieren. */
	.text .photo.smallimage {
		width: 22.3em !important;
	}
	.csscolumns .two-columne .text .photo.smallimage {
		width: 100% !important;
		max-width: 35em;
	}
	
	.text .photo.dir-2 {
		margin-left: 0;
	}
	.text .photo img {
		width: 100% !important;
		height: auto !important;
	}
	/* Michael Simon A.A. [2014.08.06]: Damit unsere kleineren Bild-Text-Modul Bilder (233px) auch responsive funktionieren. */
	.text .photo.smallimage img {
		width: auto !important;
	}
	.csscolumns .two-columne .text .photo.smallimage img {
		width: 100% !important;
	}
	
	.article-metadata {
		margin-bottom: 20px;
	}
	#site-info {
		margin-top: 0;
	}
	img.landscape {
		width: 100%;
		height: auto;
	}
	.two-columne #main .text .mb-middle.more-box {
		padding: 12px 13px 95px 13px;
	}

	#main .box-wrapper.dir-2 .box {
		margin-left: 0;
		margin-right: 20px;
	}
	.text .photo {
		float: none;
	}
	/* Michael Simon A.A. [2014.08.06]: Damit unsere kleineren Bild-Text-Modul Bilder (233px) auch responsive funktionieren. */
	.csscolumns .two-columne .text .photo,
	.text .photo.smallimage {
		float: left;
	}
	/* Michael Simon A.A. [2014.08.06]: Damit unsere kleineren Bild-Text-Modul Bilder (233px) auch responsive funktionieren. */
	.csscolumns .two-columne .text .photo.dir-2,
	.text .photo.smallimage.dir-2 {
		float: right;
	}
	.csscolumns .two-columne .photo,
	.text-media-block .ct-video {
		width: 100%;
	}
	.two-columne #main .box-wrapper .box {
		width: 30.7em;
		margin-left: 20px;
	}
	.text .text-media-block {
		padding-left: 0;
	}
	.text-media-block .photo,
	.text-media-block .ct-video {
		margin-left: 0;
	}
	#events .event-search input,
	#wrapper .new-search input {

	}
	/* Listing Overview allgemein */
	.listing li h2,
	#overview .listing li h2 {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		margin-bottom: 10px;
	}
	.listing li h2 {
		margin-top: 10px;
	}
	.listing li .location,
	.listing li .type {
		width: 100%;
		margin-bottom: 10px;
	}
	#overview .listing li span {
		width: 30%;
		padding-bottom: 10px;
	}
	.listing li span.date-time {
		float: none;
		display: inline-block;
		width: 30%;
	}

}

@media only screen and (max-width: 980px){
	/*#search-box {
		position: relative;
		display: inline-block;
		top: 0;
		margin-top: 12px;
		background: none;
		float: left;
		margin-left: 30px;
	}
	#search-box form {
		clear: both;
		background: none;
		position: relative;
	}
	#branding-inner {
		display: block;
	}*/
	/*#branding #search-box input {
		background-color: #B7B7B7;
		color: #fff;
		width: 170px;

	}
	::-webkit-input-placeholder {
		color: #fff;
	}
	:-moz-placeholder {
		color: #fff;
	}
	::-moz-placeholder {
		color: #fff;
	}
	:-ms-input-placeholder {
		color: #fff;
	}
	#branding #search-box input.button {
		top: 0;
		right: .5em;
	}
	#branding #search-box input.button {
		background-position: 4px -2391px;
	}
	#branding #search-box input.button:hover,
	#branding #search-box input.button:focus {
		background-position: 4px -2191px;
	}
	#logo {
		display: block;
		float: left;
		position: static;
		margin-top: 0;
	}
	#logo-extension {
		display: block;
		float: none;
		margin-left: 0;
		padding-left: 0;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 15px;
		clear: both;
		width: 75%;
	}*/

	#search-box, #nav-meta {
		right: 10px;
	}
	#nav-global {
		margin-top: 0;
	}

	#persona-search select {
		width: 140px
	}
	#stage .teaser-wrapper {
		background: #00549F;
	}
	#stage .teaser-box {
		background: #00549F;
	}
	/* Michael Simon A.A. [2014.08.08]: In der JS-losen Variante sollen die Divs unter den Bildern 100% breit sein, wenn sie unter die Buehne gerutscht sind. */
	.js-off #stage .teaser-box {
		max-width: 100%;
	}
	#stage .teaser-box .teaser-box-2 {
		position: static;
		overflow: hidden;
	}
	#stage .teaser-wrapper h2 {
		float: none;
		font-size: 280%;
		font-weight: normal;
		width: 100%;
	}
	#stage .teaser-wrapper p {
		float: none;
		width: 100%;
	}
	#stage .teaser-wrapper p .more {
		text-align: right;
	}
	#faculty-stage #stage .teaser-box-2 {
		position: static;
	}
	.csscolumns .two-columne .text-block {
		-moz-column-count:1;
		-moz-column-gap: normal;
		-webkit-column-count:1;
		-webkit-column-gap: normal;
		column-count:1;
		column-gap: normal;
	}
	.js-on #faculty-stage #stage .rack {
		height: auto;
	}
	.two-columne #main .box,
	.two-columne #main .box-wrapper-mod,
	.two-columne #main .text .more-box {
		float: left;
		max-width: 100%;
	}
	.csscolumns .two-columne #main .box .vcard img {
		float: left;
	}
	.csscolumns .two-columne #main .box .vcard .vcard-inner {
		float: left;
	}
	.csscolumns .two-columne #main .box .vcard .vcard-inner div {
		/* Michael Simon A.A. [2014.08.21]: Ansprechpartnerboxen in einer zweispaltigen Seite haben sich nicht richtig verhalten.
		float: none;
		*/
		display: block;
	}
	.csscolumns .two-columne #wrapper #main .box .vcard * {
	    text-align: left;
	}
    /* Forms */
	/* Michael Simon A.A. [2014.07.30]: Diese Deklaration von der styles.css hierher geholt, damit die Felder nur ab einer Tabletbreite 100% werden und nicht bei der normalen Desktopansicht. Dadurch waren keine Formularfelder mehr nebeneinander. */
	.form-wrapper div {
		width: 100% !important;
	}
	.form-wrapper div div.form-item-m,
	.form-wrapper div div.form-item-l,
	.form-wrapper div div.form-item-s {
		width: 100%;
		margin-bottom: 5px;
	}
	.form-wrapper div div.form-item-m input,
	.form-wrapper div div.form-item-l input,
	.form-wrapper div div.form-item-s input,
	.form-wrapper div div.form-item-m textarea,
	.form-wrapper div div.form-item-l textarea,
	.form-wrapper div div.form-item-s textarea,
	.form-wrapper fieldset .multiple-labels fieldset input,
	.form-wrapper input, .form-wrapper textarea,
	.form-wrapper div.mod input.mod {
		width: 98% !important;
	}
    .form-wrapper div div.form-item-m select,
	.form-wrapper div div.form-item-l select,
	.form-wrapper div div.form-item-s select {
	    width: 100%;
	}
	#main .form-wrapper p.error {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 880px){

	.persona-item li {
		width: 47.1%;

	}
	/* Michael Simon [2016.11.07]: Auch beim Tablet soll die neue Persona angezeigt werden.
	#persona ol li {
		font-size: 132%;
	}
	#persona ol li a {
		padding: 60px 0 20px;
	}
	*/
	.two-column-box div,
	.two-column-box div.tcb-first {
		width: 97.26%;
		margin-bottom: 25px;
	}
	.two-column-box div {
		margin: 0;
	}
	.csscolumns .two-columne #main .box .vcard img {
		float: left;
		margin-right: 15px;
	}
	#main .box-wrapper.dir-2 .box {
		margin-left: 0;
		margin-right: 20px;
	}

	#main .listing p {
		padding-bottom: 20px;
	}
	/* Teaser */
	.teaser-row .section-teaser {
		display: block;
		min-width: 0;
		width: 100%;
		padding-right: 0;
	}
	.teaser-row .section-latest {
		display: block;
		width: 100%;
	}
	.teaser-row .grid-3.teaser-special img {
		float: none;
		margin-right: 0;
		width: auto;
		margin-bottom: 10px;
	}
	.teaser-row .grid-3 img {
		float: left;
	}
	#main .teaser-row .teaser.grid-2 .teaser-inner img,
	#main .teaser-row .teaser.grid-3 .teaser-inner img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (max-width: 850px){
	#home #nav-global {
		margin-top: 0;
	}
	#nav-global {
		margin-top: 0;
	}
}
@media only screen and (max-width: 770px){

	#search-results #main {
		display: block;
		float: none;
		width: 100%;
		background: none;
		padding: 0;
	}
}
#wrapper #main .text .profile li .more-info,
#wrapper #main .text .profile dd .more-info {
	width: 25px;
	height: 28px;
}