/*
Farben
d43f3a rot
#333333 dunkelgrau
#c6c6c6 hellgrau, textfarbe
*/

/*
 * Splash & Home Page
 * --------------------------------------------------
 */

h1 {
	font-size:100pt;
	line-height:150pt;
	color: #d43f3a;
}

h2 {
	font-size:50pt;
	/*line-height:120pt;*/
	color: #d43f3a;
}

.hero-unit {
	margin: 50px auto;
	background-color: black;
	background: black;
	background-color: black;
	box-shadow: none;
	text-align:center;
}


a.enter-link {
	color: white;
}
    


.carousel-splash div {
    font-family: 'Miniver', Helvetica, Arial, sans-serif;
    font-size:105%;
    line-height:100%;
}
    

.teaser-font, .teaser-font-small, .wolken-font {
	/*font-family: 'Crafty Girls', Helvetica, Arial, sans-serif;*/
	font-family: 'Gloria Hallelujah', Helvetica, Arial, sans-serif;
	font-weight: bolder;
    line-height:20pt;
	color: white;
}

.carousel-splash p{
	color:#c6c6c6;
}

/*center image or text content*/
.centered-content {
	text-align:center;	
}

.highlight {
	color: #d43f3a;
}

/*img.wolken-img{
	min-width: 100%;
	
}*/

img.wolken-img:hover{
filter: grayscale(100%);
filter: blur(10px);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
-webkit-filter: blur(10px); /* For Webkit browsers */
-webkit-filter: opacity(0.1); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

.wolken-font{
	margin-top: 50px;
	font-size: 12pt; //größe auf großen schirmen, auf kleinen wird das angepasst 
}

/* Medium */
@media only screen and (min-width: 992px) and (max-width: 1200px){
	.wolken-font{
		margin-top: 0px;
		font-size: 11pt; //größe auf großen schirmen, auf kleinen wird das angepasst 
	}
}


/*auf kleineren Screens wird der Textblock länger => ovales bild in hochformat statt im querformat*/ 
@media only screen and (max-width: 991px) and (min-width: 768px){
	img.wolken-img{
		height:260px;	
		width:220px;
	}
	
	.wolken-font{
	margin-top: 5px;
	font-size: 10pt; //größe auf großen schirmen, auf kleinen wird das angepasst 
	}
}

@media only screen and (min-width: 870px){
	.carousel-splash p {
		font-size: 20pt;
	}
}

/* Normale Größen für Karussel und Teaser Text */
@media only screen and (min-width: 501px){
	.teaser-font {
		font-size: 15pt;
	}
	
	.teaser-font-small {
		font-size: 11pt;
	}


	.carousel-splash .item{
      height: 140px;
	}
	.carousel-home .item, .logo-div{
	      height: 140px;
	}
}

/*auf ganz kleinen screens teaser font verkleinern und karussel vergrößern, da sich sonst nicht der ganze text im karussel ausgeht*/
@media only screen and (min-width: 320px) and (max-width: 500px){
	.teaser-font {
	font-size: 10pt;
	}
	
	.teaser-font-small {
		font-size: 9pt;
	}
	
	.carousel-home .item, .carousel-splash .item{
      height: 160px;
	}
	
	.carousel-home .item, .logo-div{
	      height: 150px; 
	}


}

@media only screen and (max-width: 319px){
	.teaser-font {
	font-size: 10pt;
	}
	
	.teaser-font-small {
		font-size: 9pt;
	}
	
	.carousel-home .item, .carousel-splash .item{
      height: 200px;
	}
	
	
}
	
/*p.wolken{
	/*visibility: hidden;
	opacity:0;
}

p.wolken:hover{
	visibility: visible;
	font-size:8pt;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: justify;
}
.Center-Container {
  position: relative;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}*/

.wolken-div{
overflow:hidden;
position:relative;
}

.wolken-text{
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
z-index:1000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
padding-top: 0px;

}


.wolken-text:hover{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 5s;
-moz-transition:opacity 5s;
-webkit-transition:opacity 5s ease-out; /*TODO: check kann man einfach ein langsames fade-out auch machen? Kann man transition in älteren browsern noch hinbekommen*/
}

/* Das KASPAR-Logo zentrieren */
.Absolute-Center-Image{ 
  width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  /* Durch Position absolute verwendet er aus irgendeinem grund das padding des darüberliegenden divs nicht mehr > nochmal padding hinzugefügt, damit bild nicht über text hinausragt*/ 
  padding:15px;
}

/*img.wolken{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}*/

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class 
.carousel {
  margin-bottom: 60px;
  margin-top: 60px;
}*/
/* Since positioning the image, we need to help out the caption 
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */

/*.carousel .item {
      height: 200px;
}*/

/*.carousel-home .item{
      height: 140px;
}*/

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 200px;*/
}

.carousel-icon-kaspar{
	height: 40px;
	width: 25px;
	position: absolute;
	top: 50%;
}



/*
 * Content Page
 * --------------------------------------------------
 */
  
 /* Navbar oben auf content seiten*/
body.content {
  padding-top: 50px;
}


 .navbar-inverse .nav > li > a {
	background-color: transparent;
	color: white;
}

 .navbar-inverse .nav > li > a.nav-impressum-link{
	color:#c6c6c6;
}

/*.navbar-collapse.collapse {
	height: 40px !important;
}*/

 .navbar-inverse .nav > li > a:hover {
background-color: transparent;
color: #d43f3a;
}

.navbar-inverse .nav > .active > a, .navbar-inverse .nav > .active > a:hover {
background-color: grey;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
color: black;
}

 /* Off Canvas  Navigation*/
 
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
    .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }

	html,
	body {
	  overflow-x: hidden; /* Prevent scroll on narrow devices */
	}
	
	/*bugfix von mir: wenn der toggle nav button und der text überlappen, funktioniert er nicht (zumindest in chrome) => auf kleinen devices abstand oben vergrößern, damit button über text ist)*/
	div.row-below-nav{
		margin-top:40px;
	}
}

@media only screen and (min-width: 500px){
	div.columns{
    -moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	widows: 3;orphans: 3; /*Schusterjungen und Hurenkinder verhindern*/
  }
}

.sidebar-nav li a{
	padding: 0;
}
.sidebar-nav li a:hover{
	background-color: #333333;
}

.sidebar-nav li.active > a, .sidebar-nav li.active > a:hover{
	color:black;
	background-color: white;
}

/*Headlines der Tagebücher */
h5{
	font-size: 15pt;
    line-height:15pt;
}

/*Unterüberschriften Nutzungsbedingungen */
h6{
	font-size: 12pt;
    line-height:15pt;
    color:white;
}
/* Trick, damit trotz Navbar genau der Anchor ins Bild kommt */
.top-link{
	padding-top: 60px;
	margin-top:-40px;
}
div#top{
	padding-top: 40px;
	margin-top:-40px;
}
/*
* VIDEO
* --------------------------------------------------
*/

.blinking {
	text-decoration:underline;
}


/*.bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; left: 0;}*/

.admin a, div.admin, .admin p{
	color:black;
}

.admin:hover a, div.admin:hover, .admin:hover p{
	color:white;
}

input.chat{
	border-color: white;
	background-color: #333333;
	height: 52px;
}

.post-video-overlay-link{
	color:white;
}

					.post-video-overlay{
						display:none;
						position: absolute;
						width:350px;
						height:250px;
						background-color: #333333;
						opacity:0.9;
						filter:alpha(opacity=90); /* For IE8 and earlier */
					}

/*abstand zwischen chat-form und text auf l devices => damit chat-form aus video mit dem aus browser aligned ist*/
@media only screen and (min-width: 1200px) {
					.chat-form{
						padding-top: 230px
					}

					.post-video-overlay{					
						top: 126px;
						left:166px;
					}

}

/*abstand zwischen chat-form und text auf m devices => damit chat-form aus video mit dem aus browser aligned ist*/
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.chat-form{
	padding-top: 120px
}
					.post-video-overlay{					
						top: 110px;
						left:155px;
					}
}


/*Auf s devices, schrift und chatfeld verkleinern*/
@media only screen and (max-width: 991px) and (min-width: 768px){
                    .chat-text h4{
                    	font-size:12pt
                    }
                    .chat-text p{
						font-size:10pt;
                    }
					.chat-form{
						padding-top: 10px
					}
					input.chat{
						height:30px;
					}
					.post-video-overlay{					
						top: 55px;
						left:75px;
					}
}

/*Auf xs devices ist chatfeld unterhalb des, texts => eigene breiten definieren*/
@media only screen and (max-width: 767px) {
                    .chat-text{
						padding: 15px
					}
                    
                    .post-video-overlay{				
						position:static; /*Bewirkt, dass das element im normalen flow angezeigt wird => auf kleinen screens liegt es nicht über dem bild, da das bild je nach screen größe unterschiedlich skaliert wird und daher nicht mit dem overlay zusammenpasst*/
						top:10px;
						width: 100%;
						height: 100%;
					
					}
					
					.post-video-overlay p{
                    	padding:0px;
					}
					input.chat{
						height:30px;
						width:60%;
						display:inline-block;
						margin-right: 20px;
					}
					
					.chat-form{
						padding: 15px
					}
					
}


 .btn-small-text{
 	font-size:10pt;
 	white-space: normal;
 	background-color: #333333;
 	border-color: #333333;
 }

/*
* Recommendation Form
* --------------------------------------------------
*/


input.recommendation-input, select.recommendation-input{
	height:34px;
	color:gray;
	background-color: black;
}

.error-message{
	color:#d43f3a;
	background-color: #333333;
	border-color: #d43f3a;
}


.recommendation-input:focus{   
    border-color: rgba(212, 63, 58, 0.8);
    box-shadow: 0 1px 1px rgba(212, 63, 58, 0.075) inset, 0 0 8px rgba(212, 63, 58, 0.6);
    outline: 0 none;
}

input.recommendation-input, textarea.recommendation-input, select.recommendation-input {   
    border-color: #333333;
    box-shadow: 0 1px 1px #333333 inset, 0 0 8px #333333;
    outline: 0 none;
    border-radius:0;
}

/* Die folgende Zeile extra, damit Telnummern input unten rot umrandet ist, wenn has-error*/ 
.has-error input{
	border-bottom:1px solid;
}

/* change the white to any color ;) fix, damit chrome nicht die hintergrundfarbe der input box beim autofill ändert*/
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px gray inset;
/*TODO: da könnte ich mich noch spielen, damit das nach auto-fill genauso aussieht wie sonst immer (wie ändere ich rahmenfarbe und schriftfarbe, funkt irgrendwie nicht), aber ist nicht unbedingt nötig => geht so auch*/
    }
    
.invisiblebody{
	background-color: black;
	border: 0px solid #333333;

}


.emailbody{
	background-color: #1C1C1C;
	border: 0px solid #333333;
	margin-bottom:30px;
}

.emailbody .panel-body{
	padding:8px;
	border: 0px solid #333333;
}
 .emailbody p {
 	padding-left: 12px;
 	color:gray;
 }
 
 
 
 .emailbody textarea, .emailbody input{
	color:gray;
	box-shadow: none;
	border-top-style: none;
	border-left-style: none;
	border-right-style: none;
	border-bottom: 1px solid; 
	border-color: #333333;
	
	/*color: green;
	box-shadow: 0 1px 1px black inset, 0 0 8px black;*/
	background-color: #1C1C1C;
}   

/*
* GENERAL
* --------------------------------------------------
*/

.menu, a.enter-link, h5, h6{
    font-family: 'Oldenburg', Georgia, Times, serif;
}

.kaspar {
	font-family: 'Satisfy', Georgia, Times, cursive;
}


p{
    font-family: 'Oldenburg', Georgia, Times, serif;
}

a{
	font-weight:bold;
	color: gray;
}

a:hover{
	font-weight:bold;
	color: #d43f3a;
	
}

h4 {
    font-size: 15pt;
    line-height:15pt;
}

.centered{
    float: none;
    margin: auto;
}

/*.btn{
	padding: 10px;
	margin-bottom: 50px;
}*/

.row {
	margin-top: 15px;
	margin-bottom: 15px;
}

.well{
	background-color: #333333;
}

body {
	background-color: black;
}