@import("iemac-center.css");


.banner {
	position:fixed;
	top:0;
	text-align: center;
	font-size:0.58em;
	background-color:#EB0000;
	color:white;
	text-shadow:1px 1px 1px #666666;
	font-weight:700;
	letter-spacing:.3vw;
	width:100%;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	z-index: 999;
	padding:0.3vw 0;
}

body, .bg_image {
        font-size:24px;
		font-size:2vw;
		background-color: #750075;
		background:#750075 url(/pictures/Hintergruende/HG_Swing_02_Violett_Rot_Rot_Q70_1920.jpg) center center fixed no-repeat;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		font-family:Georgia, 'Times New Roman', Times, serif;
		color:#FFFFFF;
		margin-top:-1vw;
		}
 
.navbar-default {
    background-color:rgba(210,210,210,0.3);
	background:linear-gradient(to bottom,transparent, #84007B, rgba(132,0,123,0.5));
	font-weight:bold;
	border:none;
	font-size:0.45em;
	margin-bottom:0;
}
/* title */
.navbar-default .navbar-brand {
	color:#FFF6BB;
}
.navbar-default .navbar-brand:hover {
	color:#FFF6BB;
}
.navbar-default .navbar-brand:focus {
	color:#FFF6BB;
}
/* link */
.navbar-default .navbar-nav > li > a {
	color:#FFF6BB;
	font-weight:normal;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #ff0000;
	font-weight:normal;
}
.navbar-default .navbar-nav > li > a:focus {
	color:#FFF6BB;
	font-weight:normal;
}

/**********  SUB MENUS  *********************/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
	right: auto;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

@media (max-width: 1380px) {
	.navbar-left {
		display:none;
	}
}
@media (max-width: 1300px) {
	.navbar-brand {
		display:none;
	}
}
@media (max-width: 1100px) {
	#projekte {
		display:none;
	}
}
@media (max-width: 900px) {
	#medien {
		display:none;
	}
}

/*****  TABLET  *****/
@media
	(max-width: 768px) {
	body   { font-size:16px; }
	.no-xs { display:none; }
	.navbar-default {
		font-size:1em;
	}
}

/* ==========================================================================
   Full size background video
   ========================================================================== */
   
video#bgvid { 
    position: absolute;
    top: -2em;
    left: 50%;
    /*min-width: 100%;*/
	max-width: 100%;
    /*min-height: 100%;*/
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(/pictures/Movies/Wellen-Clip-Web-11-Titelbild.jpg) no-repeat;
    /*background-size: cover;*/ 
}
/* Not only does IE8 not recognize the <video> tag, it fails to recognize any HTML5 at all, ignoring every new element in the spec. This is problematic, as we want to be able to at least style the element in the browser and place a background image in it. To do so, we need two things: a single line of JavaScript, inside a conditional comment. */
video { display: block; }

/* While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background. */
@media screen and (max-width: 992px) {

html {
	background: url(/pictures/Movies/Wellen-Clip-Web-11-Titelbild.jpg) #000 no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
    }
video#bgvid {
    display: none;
    }
}
video#bgvid {
    -ms-transition: 1s opacity;
    -moz-transition: 1s opacity;
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

#vidpause {
	border:none;
	background-color:transparent;
	color:#656565;
}

/* ==========================================================================
   End full size background video
   ========================================================================== */
.harmony-bottom {
	height:22vw;
}
@media
	(max-width: 992px) {
	.harmony-bottom {
		height:180px;
	}
}

.anwendung {
	font-size:1.9vw;
	line-height:2.5vw;
	color:#ffff00;
	margin-top:1vw;
	text-shadow: 1px 1px 1px #000000;
	font-weight:bold;
	font-style:italic;
}
@media (max-width: 768px) {
	.anwendung {
		font-size:2.5vw;
		line-height:3.5vw;
	}
}

/*##########################################################
##
## Rudolph Haase - Referenz rechts
##
############################################################*/

#author {
		position:relative;
		float:left;
		width:240px;
		height:auto;
		margin:40px 20px 25px 0;
		background-color:#F2F2F2;
		text-align:center;
		padding:10px;
		-webkit-box-shadow:rgba(0,0,0,.2) 7px 7px;
		-moz-box-shadow:rgba(0,0,0,.2) 7px 7px;
		box-shadow:rgba(0,0,0,.2) 7px 7px;
		}
.authortext {
		text-align:left;
		font-family:"Times New Roman", Times, serif;
		font-size:14px;
		line-height:normal;
		}
.author_name {
		font-size:20px;
		font-weight:bold;
		}
		
#title_author {
		text-align:center;
		font-size:22px;
		color:#333333;
		font-weight:bold;
		padding:1px 0;
		border-top:1px solid #333333;
		border-bottom:1px solid #333333;
		background-color:#F2F2F2;
		}

/*########  Referenz links  ######################*/

#author_left {
		position:relative;
		float:right;
		margin:40px 0 25px 20px;
		}

.leftspace {
		display:block;
		padding-left:23px;
		}

.leftspace2 {
		display:none;
		padding-left:23px;
		}

/*##########################################################
##
## Musikbuecher
##
############################################################*/

.ueberschrift, .kapitel {
		font-family:'Times New Roman', Times, serif;
		color:#333333;
		font-size:28px;
		font-weight:bold;
		}
.text {
		font-family:'Times New Roman', Times, serif;
		color:#333333;
		font-size:18px;
		font-weight:normal;
		line-height:24px;
		text-align:justify;
		}
.seitenschrift {
		font-family: Arial, Helvetica, sans-serif;
		color:#333333;
		font-size:14px;
		font-weight:normal;
		line-height:normal;
		}

.subjektiv01 {
	font-size: 3.7vw;
	color:#9AFFAE;
	text-shadow:2px 2px 4px #00ff00;
}
@media (min-width: 1600px) {
	.subjektiv01 {
		font-size:3vw;
	}
}
.subjektiv {
	font-size: 3.6vw;
	color:#9AFFAE;
	text-shadow:2px 2px 4px #00ff00;
}
@media (max-width: 768px) {
	.subjektiv {
		font-size:4.6vw;
	}
}
.title_astronomy {
	font-size:4vw;
	color:#000;
	text-shadow:none;
	font-weight:bold;
	font-family: Times, "Times New Roman", "serif";
}
@media (min-width: 769px) {
	.title_astronomy {
		font-size:2.5vw;
	}
}
@media (min-width: 1400px) {
	.title_astronomy {
		font-size:3vw;
	}
}
@media (min-width: 1600px) {
	.title_astronomy {
		font-size:2.6vw;
	}
}
.bg_astronomy {
	height:100%;
	width:70%;
	background-size: 250% 200%;
	text-align:center;
	margin:1.5vw auto 1.5vw auto;
	border-radius: 5px;
	padding:.5vw 1vw;
	box-shadow:0px 10px 25px #660000;
	white-space:nowrap;
	background-image:linear-gradient(45deg, yellow, #FFD55B, yellow, #FFCA2F, yellow);
	animation: astro alternate 30s infinite;
}
@keyframes astro {
    0% { background-position: 0% 100%;}
    100% { background-position: 100% 50%; }
}
@media (max-width: 768px) {
	.bg_astronomy {
		width:90%;
	}
}
@media (min-width: 993px) {
	.astro3 {
		width:100%;
	}
}
.title {
	margin:2vw 0;
	text-align:center;
	font-size:3.4vw;
	line-height:3vw;
	color:#FF0000;
	font-weight:bold;
	}


.pagelink	{
		position:relative;
		width:100%;
		margin:35px 0 100px 5px;
		padding:0.8vw 0;
		text-align:center;
		background-image:url(/pictures/Buttons/bt_gray_light220.gif);
		background-repeat:repeat;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size:24px;
		-webkit-box-shadow:rgba(0,0,0,.1) 7px 7px;
		-moz-box-shadow:rgba(0,0,0,.1) 7px 7px;
		box-shadow:rgba(0,0,0,.1) 7px 7px;
		border:2px groove white; 
		-moz-border-radius:5px;
		border-radius:5px;
		clear:both;
		}
.pagelink a:link 	{ color:#0000FF; text-decoration:none; }
.pagelink a:visited { color:#0000FF; text-decoration:none; }
.pagelink a:hover 	{ color:#FF0000; text-decoration:none; }

.pageleft {
		display:block;
		float:left;
		margin-left:15px;
		}
.pageright {
		display:block;
		float:right;
		margin-right:15px;
		}


.copyright {
	margin:20px 0 120px 4.6vw;
	font-size:1.2vw;
}
.copyright a:link 	 { color:#ffffff; text-decoration:none; }
.copyright a:visited { color:#ffffff; text-decoration:none; }
.copyright a:hover 	 { color:#FFFF00; text-decoration:none; }

@media (max-width: 768px) {
	.copyright {
		font-size: 1.8vw;
	}
}


.content {
	background-size: 250% 200%;
	background-color:rgba(76,0,127,0.75);
	background:linear-gradient(45deg, #ffffff, #DDDDDD, #ffffff, #DDDDDD, #ffffff, #DDDDDD, #ffffff, #DDDDDD);
}
	
.zitat {
	text-align:center;
	font-weight:bold;
	font-size:22px;
}
.unterschrift_zitat {
	text-align:right;
	font-weight:bold;
	font-size:24px;
	font-style:italic;
}