.tool-container { background-color: #262626; border:#434343 1px solid; border-radius: 4px; position: absolute; }

.tool-items{ padding:10px; line-height: 1.75; color:#999; }
.tool-items a{ color:#999; }

.tool-container .arrow { width: 0; height: 0; position: absolute; border-width: 7px; border-style: solid; }
.tool-container.tool-top .arrow { border-color: #434343 transparent transparent; left: 50%; bottom: -14px; margin-left: -7px;
}
.tool-container.tool-bottom .arrow { border-color: transparent transparent #434343; left: 50%; top: -14px; margin-left: -7px; }
.tool-container.tool-left .arrow { border-color: transparent transparent transparent #434343; top: 50%; right: -14px; margin-top: -7px; }
.tool-container.tool-right .arrow { border-color: transparent #5e696d transparent transparent; top: 50%; left: -14px; margin-top: -7px; }

.tooltips-primary { background-color: #02baf2; }
.tooltips-primary.tool-top .arrow { border-color: #02baf2 transparent transparent; }
.tooltips-primary.tool-bottom .arrow { border-color: transparent transparent #02baf2; }
.tooltips-primary.tool-left .arrow { border-color: transparent transparent transparent #02baf2; }
.tooltips-primary.tool-right .arrow { border-color: transparent #02baf2 transparent transparent; }


.tooltips-danger { background-color: #f84545; }
.tooltips-danger.tool-top .arrow { border-color: #f84545 transparent transparent; }
.tooltips-danger.tool-bottom .arrow { border-color: transparent transparent #f84545; }
.tooltips-danger.tool-left .arrow { border-color: transparent transparent transparent #f84545; }
.tooltips-danger.tool-right .arrow { border-color: transparent #f84545 transparent transparent; }
 
.tooltips-warning { background-color: #f3bc65; }
.tooltips-warning.tool-top .arrow { border-color: #f3bc65 transparent transparent; }
.tooltips-warning.tool-bottom .arrow { border-color: transparent transparent #f3bc65; }
.tooltips-warning.tool-left .arrow { border-color: transparent transparent transparent #f3bc65; }
.tooltips-warning.tool-right .arrow { border-color: transparent #f3bc65 transparent transparent; }

.tooltips-info { background-color: #e96300; }
.tooltips-info.tool-top .arrow { border-color: #e96300 transparent transparent; }
.tooltips-info.tool-bottom .arrow { border-color: transparent transparent #e96300; }
.tooltips-info.tool-left .arrow { border-color: transparent transparent transparent #e96300; }
.tooltips-info.tool-right .arrow { border-color: transparent #e96300 transparent transparent; }

.tooltips-success { background-color: #28948c; }
.tooltips-success.tool-top .arrow { border-color: #28948c transparent transparent; }
.tooltips-success.tool-bottom .arrow { border-color: transparent transparent #28948c; }
.tooltips-success.tool-left .arrow { border-color: transparent transparent transparent #28948c; }
.tooltips-success.tool-right .arrow { border-color: transparent #28948c transparent transparent; }

.animate-standard { -webkit-animation: standardAnimate 0.3s 1 ease; }
.animate-flyin { -webkit-animation: rotateAnimate 0.5s 1 ease; }
.animate-grow { -webkit-animation: growAnimate 0.4s 1 ease; }
.animate-flip { -webkit-animation: flipAnimate 0.4s 1 ease; }
.animate-bounce { -webkit-animation: bounceAnimate 0.4s 1 ease-out; }


@-webkit-keyframes rotateAnimate {
	from { 
		transform: rotate(180deg) translate(-120px);
		opacity: 0;
	}
	to { 
		transform: rotate(0deg) translate(0px);
		opacity: 1;
	}
}


@-webkit-keyframes standardAnimate {
	from { 
		transform: translateY(20px);
		opacity: 0;
	}
	to { 
		transform: translateY(0px);
		opacity: 1;
	}
}


@-webkit-keyframes growAnimate {
	0% { 
		transform: scale(0) translateY(40px);
		opacity: 0;
	}
	70% {
		transform: scale(1.5) translate(0px);
	}
	100% { 
		transform: scale(1) translate(0px);
		opacity: 1;
	}
}


@-webkit-keyframes rotate2Animate {
	from { 
		transform: rotate(-90deg);
		transform-origin: 0% 100%;
		opacity: 0;
	}
	to { 
		transform: rotate(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes flipAnimate {
	from { 
		transform: rotate3d(2,2,2,180deg);
		opacity: 0;
	}
	to { 
		transform: rotate3d(0,0,0,0deg);
		opacity: 1;
	}
}


@-webkit-keyframes bounceAnimate {
	0% { 
		transform: translateY(40px);
		opacity: 0;
	}
	30% {
		transform: translateY(-40px);
	}

	70% {
		transform: translateY(20px);
	}

	100% { 
		transform: translateY(0px);
		opacity: 1;
	}
}
.hidden { display: none; }