/*Pure CSS Tool Tips
http://www.impressivewebs.com/pure-css-tool-tips/
example html:
<a href="#" data-tooltip="This is a pure CSS tooltip">hover over this link</a>
see pdf
*/


a[data-tooltip]:link, a[data-tooltip]:visited {
	position: relative;
	text-decoration: none;
	/*border-bottom: solid 1px;*/
}

a[data-tooltip]:before {
	content: "";
	position: absolute;
	border-top: 20px solid #0090ff;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	visibility: hidden;
	top: -30px;
	left: -20px; 
/*	
	
	top: -35px;
	left: -20px;
	
	 */
}

a[data-tooltip]:after {
	content: attr(data-tooltip);
	position: absolute;
	color: white;
	font-size:12px;
	top: -35px;
	left: -26px;
	
	/*
	top: -35px;
	left: -26px;   */
	background: #0090ff;
	padding: 5px 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	white-space: nowrap;
	visibility: hidden;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
	visibility: visible;
	-moz-transition: visibility 0s linear .3s;
}

/*CSS "Popup Window"
http://codesnippets.joyent.com/posts/show/708
EX html
<a href="#"  onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' ">
link text or object</a>
<div id="PopUp" class="popup">
pop up content
<div style='text-align: right;font-weight:bold;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " >
<span style="text-decoration: underline;">Close</span></a></div> 
</div>
*/

.popup {
display: none;
 position: absolute; 
 left: 20px; 
 top: 20px; 
 border: solid black 1px; 
 padding: 10px; 
 background-color: rgb(255,255,225); 
 /*text-align: justify; */
 font-size: 12px; 
 width: 300px;'
right:-100%
}

.popup2 {
display: none;
 position: absolute; 
 left: -20%; 
 top: 15%; 
 color:fff;
 border: solid black 2px; 
 padding: 10px; 
 background-color: #48a9e4; 
 /*text-align: justify; */
 font-size: 12px; 
 width: 300px;
 z-index:99;
}

.popupright {
display: none;
 position: absolute; 
 left: 75%; 
 top: 10%;
 border: solid black 1px; 
 padding: 10px; 
 background-color: rgb(255,255,225); 
 /*text-align: justify; */
 font-size: 12px; 
 width: 300px;'
}