bubble {
		position: relative;
		}
	bubble > contents {
		z-index: 100001; zoom: 1;
		text-decoration: none;
		position: absolute;
		display: none;	

		/* we need to try white-space:pre + max-width: 100% on the contents*/
		
		xwhite-space: nowrap;
		min-width: 100px;
		xmax-width: 100%;
		
		background: white; 
		background: rgba(255,255,255,0.95);
		color:black; 
		border: 1px solid gray;
		 
		opacity: 0.5;
		padding: .5em;
		cursor: default;
		box-shadow: 0px 2px 10px gray;
	 	vertical-align: bottom;
		margin: 9px 0px 9px 0px;
		border-radius:6px;    
	    pointer-events: none;
		}
		
	bubble[data-show] > contents, bubble:hover > contents {
		display: inline-block;
		
		min-width: 25px;
		xwidth: 100%;
		xmax-width: 500px;
		
		opacity: 1.0;	/* bubble must be 1.0, but background can be partially opaque */
		
		left: 0px;
		right: auto;
		top: 100%;
		bottom: auto;
		
	    -webkit-animation: bubble_fade_in 0.1s linear;
	   	animation: bubble_fade_in 0.1s linear;
		}
	@keyframes bubble_fade_in {
	   /* from { opacity: 0.0; transform: scale(0.95,1.1) translate(0,5%); } */
	    from { opacity: 0.0; transform: scale(0.05,0.05) translate(-50%,-50%); }
	      to { opacity: 1.0; transform: scale(1.0,1.0) translate(0,0); }
	}
		@-webkit-keyframes bubble_fade_in {
	   /* from { opacity: 0.0; -webkit-transform: scale(0.95,1.1) translate(0,5%); }*/
	    from { opacity: 0.0; -webkit-transform: scale(0.05,0.05) translate(-50%,-50%); }
	      to { opacity: 1.0; -webkit-transform: scale(1.0,1.0) translate(0,0); }
	}

	bubble[data-above][data-show] > contents, bubble[data-above]:hover > contents {
		top: auto;
		bottom: 100%;
		}
	bubble[data-right][data-show] > contents, bubble[data-right]:hover > contents {
		left: auto;
		right: 0px;
	    }
	   
	bubble[data-hover][data-show] > contents:before, bubble[data-hover]:hover > contents:before {
		z-index: -1; zoom: 1;
		position: absolute;
		/*left: 0px; top: -10px; right: 0px; height: 10px; content: ""; */
		left: -6px; top: -10px; right: -6px; bottom: -10px; content: ""; 
		display: block;
		background: white;
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=") repeat;
  	 	}
		
	/*IE fix attempt because no pointer-events: */
	bubble > contents:hover {
		display: none;
		}
	bubble[data-hover] > contents:hover {
		display: block;
		}

	bubble[data-hover] > contents, bubble[data-hover] > contents:before {
		pointer-events: auto;
		}
	bubble > contents:after {
		background: transparent;
		position: absolute;
		display: block;
		content: "";
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid black;
		border-bottom: 10px solid rgba(0,0,0,.65);

		top: -10px;
		bottom: auto;
		
		left: 5px;	
		right: auto;
		
		height:0px;
		width:0px;
		}

	bubble[data-right] > contents:after {
		left: auto;
		right: 5px;
		}
	bubble[data-above] > contents:after {
		top: auto;
		bottom: -10px;
		border-top: 10px solid black;
		border-top: 10px solid rgba(0,0,0,.85);
		border-bottom: none;
		}