/* nu verschijnt de bubble er vlak boven, let op zet wel de distance in de jquery function ff goed */
.bubbleInfo {
	position: relative; 
}

/*
.bubbleInfo { 
    width:500px;
    background:green;
    float:left;  
}
*/     



.trigger {
	position: relative;
  width:137px;
/*  height:41px;	*/
/*	background:green; */
  font-family: Arial,Helvetica,sans-serif;  
  font-size:15px;  
  font-weight:bold;  
  line-height:1em;  
  text-align:center;
  color:#FFF; 

}


/* Bubble pop-up */                
.popup {
	position: absolute;
/*	width: 400px;
	height:300px; */
	display: none;
	border-collapse: collapse;
	z-index: 50;
}


/* START COLORS */
  .popup div.back_sleutel_blue {	
    width:329px;
    background-image: url('../images/popup/blue_sleutel_back.gif');  
    padding:15px;
    line-height:1em;         
    float:left;        	
  }
  .popup div.back_blue {
    background:#008DC5;    
    padding:2px;   
  }      
  
  .popup div.back_sleutel_yellow {	
    width:329px;
    background-image: url('../images/popup/yellow_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }          
  .popup div.back_yellow {
    background:#F7E533;    
    padding:2px;   
  }          
  .popup div.back_sleutel_darkgrey {	
    width:329px;
    background-image: url('../images/popup/dark_grey_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_darkgrey {
    background:#454B4C;    
    padding:2px;   
  }
  .popup div.back_sleutel_grey {	
    width:329px;
    background-image: url('../images/popup/grey_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_grey {
    background:#80828E;    
    padding:2px;   
  }          
  .popup div.back_sleutel_red {	
    width:329px;
    background-image: url('../images/popup/red_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_red {
    background:#E04544;    
    padding:2px;   
  }
  .popup div.back_sleutel_green {	
    width:329px;
    background-image: url('../images/popup/green_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_green {
    background:#009F54;    
    padding:2px;   
  }
  .popup div.back_sleutel_orange {	
    width:329px;
    background-image: url('../images/popup/orange_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_orange {
    background:#E9984C;    
    padding:2px;   
  } 
  .popup div.back_sleutel_brown {	
    width:329px;
    background-image: url('../images/popup/brown_sleutel_back.gif');  
    padding:15px;
    line-height:1em;          
    float:left;        	
  }                    
  .popup div.back_brown {
    background:#A98F3A;    
    padding:2px;   
  } 
                                                                       
/* END COLORS */          
  
  .popup div.padding_band_naam {
    padding-left:2px;
    padding-top:1px;
    padding-right:0;
    padding-bottom:0;            
    float:left;          
  }         
  .popup div.band_naam {
    width:212px;
    padding:5px;
    font-size:14px;
    font-weight:bold;
    color:#222;            
    background:yellow;            
    float:left;            
  }
  .popup img.band_img {
    width:98px;        
    padding:0;
    padding-right:2px;
    float:left;            
  }
  .popup div.band_bio {
    font-size:10px;
    color:#FFF;
    text-align:justify;
  }
  
  .popup div.padding_luister {
    padding:2px;
    padding-bottom:0;                       
    float:left;            
  }
  .popup a.luister {
    width:48px;
    padding-bottom:3px;
    padding-left:5px;
    font-size:9px;
    font-weight:bold;
    color:#666;
    text-decoration:underline;
    background:#FFF;
    float:left;            
  }
  .popup a:hover.luister {
    width:48px;
    padding-bottom:3px;
    padding-left:5px;
    font-size:9px;
    font-weight:bold;
    color:#666;
    text-decoration:underline;
    background:yellow;
    float:left;            
  }             
   
  .popup div.padding_date_time {
    padding:2px;
    padding-right:0;
    padding-bottom:0;            
    float:left;
  }
  .popup div.date_time {
    width:135px;
    padding-left:5px;
    font-size:9px;
    font-weight:bold;
    color:#FFF;            
    background:#666;
    float:left;
  }
  .popup div.padding_stages {
    padding:2px;
    padding-right:0;
    padding-bottom:0;            
    float:left;
  }          
  .popup div.upstage {
    width:80px;
    text-align:center;
    border-left:0;
    border-right:0;                    
    font-size:9px;
    font-weight:bold;
    color:#FFF;                        
    background:green;
    float:left;            
  }
  .popup div.downstage {
    width:80px;
    text-align:center;
    border-left:0;
    border-right:0;                    
    font-size:9px;
    font-weight:bold;
    color:#FFF;                        
    background:red;
    float:left; 
  }