riederbergTV-custom.css

/* Picture Resize test */
img, .thumbinner, .thumb {
	max-width: 100% !important;
	height: auto !important;
	width: auto\9; /* ie8 */
}

#subnav-top-left {
	display: none;
}

.navbar-app-brand {
	display: inline;
	height: 50px;
	/*vertical-align: middle;*/
}

.navbar-app-brand > a.navbar-brand {
	color: white;
	font-family: Volkhov, 'Noto Serif', Georgia, serif;
	font-size: 1.5em;
	font-weight: 400;
}

.navbar-app-brand img {
	margin-left: 5px;
	background-color: white;
	min-height: 40px;
	-moz-border-radius: 9px;
 	border-radius: 9px; /* standards-compliant: (IE) */
}

/* Mobile-first Ansatz, #subnav-bottom im mobilen Einsatz ausblenden! */
#subnav-bottom {
	display:none;
}

#subnav-top-left {
	padding: 0;
}

@media(max-width: 767px) {
	/* Suchleiste über die gesamte Breite strecken */
  div#subnav-top-right {
		width: 100%;
	}

	/* Menü in mobiler Anzeige aufhübschen */
	nav div.navbar-collapse ul.nav {
			text-align: center;
	}

	nav div.navbar-collapse ul.nav > li {
		height: 50px;
	}

	nav div.navbar-collapse ul.nav > li > a {
		font-size: 1.4em;
		line-height: 50px;
		padding: 0;
	}
}

/* Branding richtig positionieren */
.subnav-NOT-fixed {
	padding-left: 20px;
	padding-right: 20px;
}
.subnav .container {
	padding-left: 0;
	padding-right: 0;
}

/* Padding im Footer-Text resetten und auf 15px einstellen */
footer > div.container {
	padding: 0;
}

div#subnav-top-right {
	padding-left: 0;
	padding-right: 0;
}

.subnav-NOT-fixed > div.container > div:first-child {
	margin-top: 10px;
}

/* Reduziere Höhe von normaler Navbar */
.navbar {
  min-height: 30px;
}
.navbar .nav > li > a, .navbar .navbar -nav > li > a, .navbar a.navbar-brand {
	padding-top: 5px;
	padding-bottom: 5px;
}
.subnav-fixed {
	top: 29px;
	border-color: #d5d5d5;
	background-color: inherit;
	box-shadow: none;
}

/* navbar-toggle Button verschieben */
.navbar-toggle {
	margin-right: 20px;
}


/* Anpassung für zweite Navbar (subnav) */
.subnav {
	background-color: white;
	border:none;
	margin-bottom: 10px; /* for static .subnav */
}
.subnav .container {
	padding-bottom: 0;
	/*margin: auto 20px;*/
	border-bottom: 1px solid #D5D5D5;
}

/* Wichtig! Sonst wird das Branding um margin-left/right: -15px versetzt!  */
.subnav .row {
	margin: 0;
}
.subnav .nav {
  display: block;
}

.subnav .navbar-brand {
	font-family: Volkhov, 'Noto Serif', Georgia, serif;
	font-size: 1.5em;
	height: auto;
	padding: 10px 0;
	/*margin: auto -15px;*/
	color: #111;
}
.navbar-brand img {
	margin-right: 0;
}
.subnav .navbar-brand img {
	max-height: 40px;
	margin-left: 0;
	margin
	padding-right: 5px;
}
.subnav .nav {
	margin-left: -10px;
}
.subnav .navbar-search,
.subnav .navbar-form {
	margin-left: 0;
}
.subnav form#searchform {
	display: inline-block;
	padding: 0;
	margin-right: 12px;
	width:100%
}
.subnav form #searchInput {
	width: 100%;
	box-shadow: none;
	background-color: transparent;
	text-align: right;
}
.subnav form#searchform .input-group-addon {
	background-color: transparent;
	border: none;
	color: inherit;
	padding-left: 0;
	padding-right: 0;
}

.subnav form#searchform .input-group-addon i {
	padding-left: 10px;
}

.subnav #subnav-bottom-catlinks .navbar-nav > li {
  float: left;
}

/*.subnav #subnav-bottom-catlinks {
	margin-left: 10px;
	margin-top: -10px;
}*/

div#hauptseite-projektbeschreibung  p {
	margin: 0;
}

/* Verstecke einige Dinge, solange es sich nicht um einen angemeldeten Nutzer handelt */
.userIsNotLoggedIn table.video-metadaten {
	display: none;
}

/* Screen Responsive Stuff */
div#the-slider {
	display: none !important;
}

.page-header {
	margin: 10px 0;
	padding: 0;
}

@media (min-width: 768px) {
	.navbar-app-brand {
		display:none;
	}

	#subnav-top-left {
		display: block;
	}

	/* Links in der schwarzen Leiste verstecken, wenn wir in der Desktop-Ansicht sind! */
	#dropdown-RTV-menu {
		display: none;
	}
	/* Die untere Navigation in der Desktop-Ansicht anzeigen */
	#subnav-bottom {
		display: block;
	}

	/* Skalierung des Headers wieder auf den bootstrap3-Standard setzen, damit dieser richtig positioniert wird und mitskaliert */
	.subnav .container {
		width: 720px;
		padding: 0;
	}

	.subnav-NOT-fixed > div.container > div:first-child {
		margin-top: 0;
	}

	.subnav .navbar-brand img {
		padding-left: 0;
	}

	.page-header {
		margin: 0px 0px 10px;
		padding: 0;
	}

	/* Negatives margin-top, um das Branding nach oben zu schieben. Danach ziehen wird das Logo einzeln wieder runter. Dadurch können wir den RTV-Schriftzug und das Menü in etwa gleichen Verhältnissen auf der Höhe des Logos ausrichten! */
	.subnav .navbar-brand {
		font-size: 3.2em;
		margin-top: -20px;
		padding: 15px 0;
	}
	.subnav .navbar-brand img {
		padding-top: 25px;
		margin-right: 0;
		max-height: 105px;
	}
	.subnav #subnav-bottom-catlinks {
		margin-top: -43px;
		padding-left: 130px;
	}
}

@media (min-width: 992px) {
	div#the-slider {
		display: block !important;
	}

	div#hauptseite-projektbeschreibung {
		margin-top: -2em;
	}
	div#hauptseite-projektbeschreibung .mw-headline {
		margin-top: 0;
	}
	.subnav .container {
			width: 940px;
	}

	/* Erklärung zum negativen margin-top: siehe oben. */
	.subnav .navbar-brand {
		font-size: 4em;
		margin-top: -20px;
	}
	.subnav .navbar-brand img {
		padding-top: 20px;
		max-height: 110px;
	}
	.subnav #subnav-bottom-catlinks {
		margin-top: -40px;
		padding-left: 150px;
	}
	.subnav-NOT-fixed > div.container {
		padding: 0;
	}
	footer.bottom {
		margin-top: 80px;
	}
}

@media (min-width: 1200px) {
	.subnav .container {
		width: 1140px;
	}
}

/*
 * Videolinks (Allgemein)
 */
.list-group-item.videolink {
	padding: 0;
}

/* Textfarbe des Video-Untertitels ändern und einen sehr dünnen Schatten drum rum setzen, für eine bessere Lesbarkeit*/
div.videolink > a > h3 > span.small {
	color: rgb(215, 215, 215);
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	font-size: 80%;
}

/*
 * Videolinks auf Startseite
 */
.videoliste.hauptseite .videolink a.video {
	display: block;
	position: relative;
	margin-bottom: 8px;
}
.videoliste.hauptseite .videolink a.video:hover {
	text-decoration: none;
}
.videoliste.hauptseite .videolink h3 {
	opacity: 0.8;
	transition: all 200ms linear 0s;
	min-height: 43px;
	width: 100%;
	padding: 1px 6px;
	border: none !important;
	position: absolute;
	bottom: 6px;
	color: white !important;
	background-color: rgba(0, 0, 0, 0.85);
	/*background-color: rgba(255, 255, 255, 0.8);*/
}
.videoliste.hauptseite .videolink:hover h3,
.videoliste.hauptseite .videolink:focus h3,
.videoliste.hauptseite .videolink:active h3 {
	opacity: 1;
	transition: all 200ms linear 0s;

	color: #222 !important;
	/*Green from navbar# background-color: rgba(99,255,143, 0.8);*/
	background-color: rgba(255, 255, 255, 0.8);
}

.videoliste.hauptseite .videolink:hover span.small,
.videoliste.hauptseite .videolink:focus span.small,
.videoliste.hauptseite .videolink:active span.small {
	color: rgb(70, 70, 70);
}

.name-container {
	min-height: 43px;
	width: 100%;
	padding: 5px 10px;
	border: none !important;
	position: absolute;
	bottom: 5px;
}

.name-container span {
	color: rgb(255, 255, 255);
	font-weight: 500;
}

.name-container .dozent {
	display: block;
	width: 100%;
	margin-right: 20px;
}

.name-container .dozentText > span {
	display: inline-block;
	/*background-color: rgb(254, 22, 98);*/
	background-color: rgba(255,50,103,0.9);
	font-size: 1.2em;
	line-height: 1em;
	padding: 5px;
	/*max-width: 85%;*/
	text-align: left;
}


.name-container .videotitel {
	display: block;
	width: 100%;
	margin-top: -4px;
}

.name-container .videotitelText > span {
	display: inline-block;
	background-color: rgba(89, 185, 89, 0.9);
	font-size: 1em;
	/*max-width: 95%;*/
	/*margin-top: -4px;*/
	padding: 5px;
	margin-left: 15px;
	line-height: 1.2em;
	text-align: right;
}

.videolink:hover div.dozentText span,
.videolink:focus div.dozentText span,
.videolink:active div.dozentText span {
	transition: all 250ms linear 0s;
	/*background-color: rgb(254, 80, 130);*/
	background-color: rgba(255,50,103,0.7);
}

.videolink:hover div.videotitelText span,
.videolink:focus div.videotitelText span,
.videolink:active div.videotitelText span {
	transition: all 250ms linear 0s;
	/*background-color: rgba(150, 254, 171);*/
	background-color: rgba(89, 185, 89, 0.7);
}
/* Die ganzen folgenden Größenverhältnisse sind alle etwas arbiträr.. oder?
	 Kann meinetwegen gerne zu etwas sinnvollerem geändert werden!
	 MG - 20160215
*/
@media (min-width: 450px) {
	.name-container .dozentText {
		margin-left: 15px;
	}
	.name-container .videotitelText {
		margin-left: 40px;
	}
}

@media (min-width: 550px) {
	.name-container .dozentText {
		font-size: 1.4em;
	}

	.name-container .videotitelText {
		font-size: 1.1em;
	}
}

@media (min-width: 768px) {
	.name-container .dozentText {
		font-size: 1.4em;
	}

	.name-container .videotitelText {
		font-size: 1.1em;
	}
}

@media (min-width: 1200px) {
	.name-container .dozentText {
		font-size: 1.2em;
	}

	.name-container .videotitelText {
		font-size: 1em;
	}
}

/*.videoliste.hauptseite .videolink  * .subtitle h3 .small {
	color: rgb(210, 205, 205)
	font-size: 0.8em;
}*/

.videoliste.hauptseite .videolink  img {
	max-width: 100%;
	height: auto;
}

/*
 * Videolinks auf anderen Seiten
 */
.videoliste:not(.hauptseite) .videolink,
.videoliste:not(.hauptseite) .videolink  .beschreibung {
	height: 70px;
}
.videoliste:not(.hauptseite) .videolink  .vorschaubild {
	float: left;
	clear: both;
	margin-right: 5px;
}
.videoliste:not(.hauptseite) .videolink  .vorschaubild  a.video{
	display: inline-block;
}
.videoliste:not(.hauptseite) .videolink  .beschreibung  h4 {
	margin-top: 2px;
	margin-bottom: 4px;
}

/*
 * Videoseite
 */
video {
	cursor: pointer;
}

.videospalte {
	text-align: justify;

	/* Kopiere BS CSS für col-md-8 hier herein, um nicht in allen Videos die Klasse manuell einfügen zu müssen */
	position: relative;
	min-height: 1px;
	/*padding-right: 15px;
	padding-left: 15px;*/
}

.seitenleiste {
	padding-right: 0;
	padding-left: 0;
}

@media (min-width: 992px) {
	.seitenleiste {
		padding-left: 15px;
	}
}

@media (min-width: 992px) {
	/* Kopiere BS CSS für col-md-8 hier herein, um nicht in allen Videos die Klasse manuell einfügen zu müssen */
	.videospalte {
		float: left;
		width: 66.6667%;
	}
}
/* Abstand zwischen Videoplayer und Text */
.videobereich {
	margin-bottom: 15px;
}

.seitenleiste table.wikitable, .seitenleiste h3 {
	margin-top: 0px;
}


/*
 * Footer
 */
footer.bottom {
		color: white;
    background: #222;
    padding-top: 2em;
    padding-bottom: 2em;
}

footer.bottom div#footer-gfx-container {
  margin-top: -107px;
}

/* Bild im Footer automatisch skalieren und Abstand zum Text herstellen */
.floatright img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

/*
 * BS Overwrites
 */
.btn, .well, .alert, .form-control, .list-group-item.videolink {
	border-radius: 0;
}

/*
 * FIXES
 */

 /* No title on start page */
 .page-Hauptseite .pagetitle {
	 display: none;
 }

/* Checkboxes */
.client-js .mw-ui-checkbox:not(#noop) input[type="checkbox"] {
  margin: 0;
	margin-left: -20px;
  opacity: 1;
  height: 20px;
  width: 20px;
}

/* TODO: Bilder im Content skalieren! */
/*img.thumbimage {
	max-width: 400px;
	height: auto;
}*/


/*@media (max-width: 400px) {
	h1, .h1 {font-size: 1.3em}
	h2, .h2 {font-size: 1.2em}
	h3, .h3 {font-size: 1.1em}
}
/*@media (min-width: 401px) {*/
	h1, .h1 {font-size: 1.8em}
	h2, .h2 {font-size: 1.5em}
	h3, .h3 {font-size: 1.2em}
/*}*/
@media (min-width: 768px) {
	h1, .h1 {font-size: 2.0em}
	h2, .h2 {font-size: 1.7em}
	h3, .h3 {font-size: 1.3em}
}
@media (max-width: 767px) {
	#wiki-body.container, .videospalte {
		padding: 0;
	}
	body {
		padding-top: 40px
	}
}
@media (max-width: 991px) {
	body {
		padding-top: 30px
	}
}