/* =============================================================================
   Tooltips
   ========================================================================== */

a.tooltip { position:relative; display:inline-block; z-index:100; }
a.tooltip span { position:absolute; width:150px; padding:3px; left:50%; font-size:13px; line-height:16px; margin-left:-80px; text-align:center; visibility:hidden; 
	bottom: 40px; /** Use 30px for simple fade in effect - Removes slide down effect **/
	
	opacity: 0;
	
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	
	-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
   	-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
}

/* Custom Width */
a.width180 span { width:180px; margin-left:-103px; }


/* CSS Down Arrow */
a.tooltip span:after {
	content:'';
	position:absolute;
	bottom:-10px;
	left:50%;
	margin-left:-9px;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}

a:hover.tooltip span {
	opacity:1;

	visibility:visible;
	bottom:30px;
	z-index:100;
}
	
a.imgleft { float:left; margin: 0 15px 10px 0; }
a.imgright{ float:right; margin:0 0 10px 15px;}
a.imgleft span, a.imgright span{ bottom:140px; /** Use 130px for simple fade in effect - Removes slide down effect **/}
a:hover.imgleft span, a:hover.imgright span{ bottom:130px; }
		
/* Blue */
a.ttblue{ color:#39F; }
a.ttblue span{ background:#5d96bc; border:1px solid #5d96bc; color:#FFF;}
a.ttblue span:after{ border-top:10px solid #5d96bc; }