@charset "utf-8";
/* CSS Document */
.tooltip {
	position: relative;
	/* background: #eaeaea;*/
	/* cursor: help;*/
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	color: #222;
	outline: none;
}

.tooltip span
{
	clear:both;
	visibility: hidden;
	position: absolute; 
	bottom: 25px;
	left: 50%;
	z-index: 99999 !important;
	width: 350px;
	margin-left: -202px;
	-webkit-margin-start: -202px;
	padding: 20px 25px;
	-webkit-padding-before:20px; -webkit-padding-end:25px; -webkit-padding-after:20px; -webkit-padding-start:25px;
	border: 2px solid #ccc;
	opacity: .9;
	background-color: #ddd;                     
	background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
	-moz-border-radius: 4px;
	border-radius: 4px;  
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
	text-shadow: 0 1px 0 rgba(255,255,255,.4); 
	text-align:left;
	color:#222;
	font-size:9pt;
	font-weight:normal;
}

.tooltip:hover {
	border: 0; /* IE6 fix */
}

.tooltip:hover span {
	visibility: visible;
}

.tooltip span:before,
.tooltip span:after {
	content: "";
	position: absolute;
	z-index: 9999;
	bottom: -7px;
	left: 50%;
	margin-left: -8px;  
	-webkit-margin-start: -8px;
	border-top: 8px solid #ddd;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;        
	border-bottom: 0;  
}

.tooltip span:before {
	border-top-color: #ccc;
	bottom: -8px;
}

/* Yellow */
.yellow-tooltip span {
	border-color: #e1ca82;
	background-color: #ffeaa6;                     
}

.yellow-tooltip span:after { 
	border-top-color: #ffeaa6;
}

.yellow-tooltip span:before {
	border-top-color: #e1ca82;
}

/* Navy */
.navy-tooltip span {
	color: #fff;
	text-shadow: 0 1px 0 #000;  
	border-color: #161a1f;
	background-color: #1e2227;
}

.navy-tooltip span:after { 
	border-top-color: #1e2227;
}

.navy-tooltip span:before {
	border-top-color: #161a1f;
}

/* White */
.white-tooltip span {
	color: #666666;
	opacity: .95;
	border: 1px solid #ccc;
	border-color: #b0b0b0;
	background-color: #ffffff;
}

.white-tooltip span:after { 
	border-top-color: #ffffff;
}

.white-tooltip span:before {
	border-top-color: #b0b0b0;
}


/* Blue */
.blue-tooltip span {
	border-color: #59add4;
	background-color: #61bde7;
}

.blue-tooltip span:after { 
	border-top-color: #61bde7;
}

.blue-tooltip span:before {
	border-top-color: #59add4;
}

/* Red */
.red-tooltip span {
	border-color: #f89393;
	background-color: #efa2a2;
}

.red-tooltip span:after { 
	border-top-color: #efa2a2;
}

.red-tooltip span:before {
	border-top-color: #f89393;
}

/* Pink */
.pink-tooltip span {
	border-color: #ce4378;
	background-color: #ea4c88;
}

.pink-tooltip span:after { 
	border-top-color: #ea4c88;
}

.pink-tooltip span:before {
	border-top-color: #ce4378;
}