/* reset CSS v2.0, http://cssreset.com */
/* html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, 
strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, 
label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {	
	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
} */

body {
  background:#fff;
}

.platzhalter {
	background:#f3f3f3;
	min-height:75px;
}


/* ##### Dummy- Inhalte ##### */
div.FPdummy {
	width:160px;
	height:200px;
	background:#e6e6e6;
	margin:0 auto 30px auto;
}

div.FPhint {
	height:20px;
}

@media (max-width: 767px) {
	div.FPhint {
		background:red;
	}
}

@media (min-width: 768px) {
	div.FPhint {
		background:orange;
	}
}

@media (min-width: 992px) {
		div.FPhint {
		background:blue;
	}
}

@media (min-width: 1200px){
		div.FPhint {
		background:green;
	}
}

/* ##### MISC ##### */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* scrollbalken im IE immer sichtbar, überdeckt sonst ggf. Seitenelemente*/
@-ms-viewport {
	width: auto !important;
	-ms-overflow-style property
}

/* mouseover für bootstrap 3 Navigation ab Breite von 767px, */
/* ggf. für mobile Endgeräte ausschalten */

@media (min-width: 767px) {
	ul.nav li.dropdown:hover ul.dropdown-menu,
	ul.nav li.multi-dropdown:hover ul.multi-level {
		display: block;
		margin-top:0px
	}
	.dropdown-toggle {cursor:pointer !important;}
}	


/* ##### navigation DESIGN:fp1 ##### */	

.navbar-brand {
  float: left;
  height: 50px;
  padding: 5px 20px 0 0;
  font-size: 18px;
  line-height: 20px;
}

.navbar-fp1 {
  background-color: #fff;
  border-color: #fff;
  z-index: 90;
  border-radius: 0px;
}	

.navbar-fp1 .navbar-brand {
  color: #777;
}
.navbar-fp1 .navbar-brand:hover,
.navbar-fp1 .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-fp1 .navbar-text {
  color: #777;
}
.navbar-fp1 .navbar-nav > li > a {
  color: #777;
}
.navbar-fp1 .navbar-nav > li > a:hover,
.navbar-fp1 .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-fp1 .navbar-nav > .active > a,
.navbar-fp1 .navbar-nav > .active > a:hover,
.navbar-fp1 .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-fp1 .navbar-nav > .disabled > a,
.navbar-fp1 .navbar-nav > .disabled > a:hover,
.navbar-fp1 .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-fp1 .navbar-toggle {
  border-color: #ddd;
}
.navbar-fp1 .navbar-toggle:hover,
.navbar-fp1 .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-fp1 .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-fp1 .navbar-collapse,
.navbar-fp1 .navbar-form {
  border-color: #e7e7e7;
}
.navbar-fp1 .navbar-nav > .open > a,
.navbar-fp1 .navbar-nav > .open > a:hover,
.navbar-fp1 .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
@media (max-width: 767px) {
  .navbar-fp1 .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-fp1 .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-fp1 .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-fp1 .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.navbar-fp1 .navbar-link {
  color: #777;
}
.navbar-fp1 .navbar-link:hover {
  color: #333;
}
.navbar-fp1 .btn-link {
  color: #777;
}
.navbar-fp1 .btn-link:hover,
.navbar-fp1 .btn-link:focus {
  color: #333;
}
.navbar-fp1 .btn-link[disabled]:hover,
fieldset[disabled] .navbar-fp1 .btn-link:hover,
.navbar-fp1 .btn-link[disabled]:focus,
fieldset[disabled] .navbar-fp1 .btn-link:focus {
  color: #ccc;
}	


/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 200px }

@media ( min-width: 767px ) {
  .panel-group { width: 600px; }
  .thumbnail { margin: 0; }
}

/* ##### animationen ##### */
/* 
# weitere animationen: js/animation.css
*/
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}	

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}


		
/* ##### sticky header ##### */	

header {
	position: fixed;
	width: 100%;
	height: 55px;
	background: #fff;
	/* color: #fff; */
            
	/* set animation 
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;*/
	z-index: 90;
}
        
header.sticky {
	height: 55px; 
	background: #fff;
	border-bottom:1px solid #e3e3e3;
	z-index: 90;
}

		  
/* ##### top sliding panel ##### */

#toppanel {
	position:fixed;   				/* panel will overlap content, no scrolling => open/close always visible */
	/* position:absolute; */		/* panel will overlap content, scrolling */
	/* position: relative; */   	/* panel will "push" content down */
	top: 0;
	width: 100%;
	z-index: 99;
	margin-left: auto;
	margin-right: auto;
}

#panel {
	width: 100%;
	height: 150px;
	color: #eee;
	background: #363839;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

#toggler {
	position: relative;
}

.hint {
	height:40px;
	width:40px;
	position: absolute;
   	top:0; 
	right:0;
   	z-index: 99;	
}

.hint a.panelopen, .hint a.panelclose {
	height: 40px;
	width: 40px;
	/* line-height: 35px !important; */	
	cursor: pointer;
	display: block;
	position: relative;
	color:#efefef;
	text-decoration:none;
	text-align:right;
	padding:5px 7px 0 0;
}

#dreieckRO {
	width: 0;
	height: 0;
	border-top: 40px solid #363839;
	border-left: 40px solid transparent;
	position:absolute;
	top:0; 
	left:0;
}



/* ##### star rating ##### */	

.rating {
    float:left;
}

/* 
	:not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   	follow these rules. Every browser that supports :checked also supports :not(), so
   	it doesn’t make the test unnecessarily selective 
*/

.rating:not(:checked) > input {
	clip: rect(0px, 0px, 0px, 0px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    /* text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); */
}

.rating:not(:checked) > label:before {
	/* content: "\f006"; */ /* Stern (nur Rand) */
   	content: "\f005";
	font-family: FontAwesome;
  	font-weight: normal;
  	font-style: normal;
}

.rating > input:checked ~ label {
    color: #f70;
   /*  text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); */
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    /* text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); */
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    /* text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); */
}

.rating > label:active {
    position:relative;
}

/* ##### multi level menü für bootstrap 3 ##### */

.dropdown-submenu {
    position: relative; 
	 z-index:999;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    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;
}