.toggle-tip a:hover{
	background: #f3f3f3;
	color: #222;
	border: 1px solid #dcd5d5;
}
.toggle-tip a{
	font-size: 14px;
	width: 150px;
	background: #f9f9f8;
	color: #8e8989;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #f9f8f8;
	margin: 3px;
	margin-left: 8px;
	display: inline-block;	
}
.toggle-tip{
	background: url(images/toggle-bottom.png) no-repeat;
    position: absolute;
    width: 24px;
    height: 7px;
    font-size: 11px;
    cursor:pointer;
	
}
.toggle-tip:before{
    font-weight: bold;
}

.toggle-tip:hover p{
	z-index: 2;
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}
.toggle-tip p{
    display: none;
    background: #f9f8f8;
	color: #222;
	border: 1px solid #dcd5d5;
    padding: 10px;
    max-width: 550px;
    position: absolute;
    border-radius: 10px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    font-size: 11px;
    line-height: 1.4;
}
 
.toggle-tip p:before{
    position: absolute;
    border:6px solid transparent;
    border-bottom-color:#dcd5d5;
    right:12px;
    top:-12px;
}
 
.toggle-tip p:after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-20px;
    left:0;
}
 
@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
	}
 
    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}