@charset "utf-8";
/* CSS Document */

ul#demo-block{ margin:0 15px 15px 15px; }
			ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('../img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
			ul#demo-block li a{ color:#eee; font-weight:bold; }



.st_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../img/pattern.png) repeat-x bottom left;
	opacity:0.0;
	z-index: -2;
	
	
}

/* INFO BOX 

------------------------------------ */
.infobr {
	position:relative;
}

#but_info {
	
	padding: 0.4em;
}
#info {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0,0,0);
/* RGBa with 0.5 opacity */
	background: rgba(0,0,0, 0.6);
	margin-left:25px;
	border: 1px solid #333;
	padding: 0.4em;
	width: 50%;
	display: none;
	font-size: 1.5em;
	font-family: 'Century Gothic', sans-serif;
	color: #CCC
	
}
 #info a {
                display: block;
                color: #999999;
                text-decoration: none;
				font-style:oblique;
				text-decoration:underline;
				                
                font-weight: 700;
				float:left;
            }
            
            #info a:hover, 
            #info .current {
			color: #993300;
                
            }
#info h1 {
                display: block;
                color: #993300;
                text-decoration: none;                
                font-size: 1.5em;
                font-weight: 700;
            }
#info img {
                display: block;
				 float:left;
				 padding: 0.4em;
				
            }
            


/* INFO ENDE 





------------------------------------ *//* SUB MENUE BOX 

------------------------------------ */

#but_sub {
	right: 10px;
	position: fixed;
	top: 0px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
}
#sub {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0,0,0);
/* RGBa with 0.5 opacity */
	background: rgba(0,0,0, 0.5);
	right: 10px;
position: fixed;

top: 0px;
margin-top: 45px;
margin-right: 10px;
margin-bottom: 0px;
	border: 1px solid #333;
	
	width: 120px;
	height: 120px; /*button höhe = 30px*/
	display: none;
	font-size: 1.5em;
	font-family: 'Century Gothic', sans-serif;
	color: #CCC;
	
	
}
 #sub a {
                display: block;
                color: #999999;
                text-decoration: none;
				font-style:oblique;
				text-decoration:underline;
				                
                font-weight: 700;
				float:left;
            }
            
            #sub a:hover, 
            #sub .current {
			opacity: 0.9;
                
            }
#sub h1 {
                display: block;
                color: #993300;
                text-decoration: none;                
                font-size: 1.5em;
                font-weight: 700;
            }
#sub img {
	display: block;
	float: right;
	opacity: 0.4;
					
            }
			#sub img a {
	display: block;
	float: right;
	
					
            }
			#sub img:hover {
	
	opacity: 0.9;
					
            }
            


/* INFO ENDE 

------------------------------------ */


/* SIDEBAR 

------------------------------------ */

#but_sidebar {
	
	
		position:absolute;
	width:100%;
	top:140px;  /* Abstand der Nav zum Titel */
	left: 5px;
}

#but_sidebar li {
	float:left;
	position:relative;
	
	
	
	
	
	width:100%;
}

#but_sidebar2 {
	
	
		position:absolute;
	width:100%;
	top:200px;  /* Abstand der Nav zum Titel */
	left: 5px;
}

#but_sidebar2 li {
	float:left;
	position:relative;
	
	
	
	
	
	width:100%;
}


/* tooltip*/

a.tooltip {
  position: relative;
  text-decoration: none;
  display: inline;
  
}
a.tooltip:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 20%;
  background: #000000;
  padding: 5px 15px;
  color: #CCC;
  font-size: 1em;
	font-family: 'Century Gothic', sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius : 5px;
  border-radius : 5px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
  z-index:99;
}
a.tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid #000000;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
  opacity: 0;
  left: 30%;
  bottom: 90%;
}
a.tooltip:hover:after {
  bottom: 100%;
}
a.tooltip:hover:before {
  bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
  opacity: 1;
}

/*ENDE tooltip*/


/* RESPONSIVE */



 @media all and (max-width : 50em) { 
			#info {
				font-size: 1em;
			}
			.st_overlay{
	
	opacity:0.0;
			
			}
			
			
			}
			
			@media all and (max-width : 25em) { 
			#info {
				font-size: 1em;
				width: 80%;
			}
			#info img {
                display: none;
				
				
            }
			
			#slidecounter { 
			
			display: none; 
			
			}
			}