@charset "utf-8";
/* 
 * plan recommend tip style *
 */
 
.tip-recommend{
	position:absolute;
	right:-20px;
	top:-15px;
	z-index:20;
	padding:1px 5px;
	border:1px solid #70A62D;
	border-radius:2px;
	background-color:#97D054;
	color:#FFF;
	line-height:1.5em;
	-moz-animation:tipTranslate 3s ease 3s infinite;
	-ms-animation:tipTranslate 3s ease 3s infinite;
	-o-animation:tipTranslate 3s ease 3s infinite;
	-webkit-animation:tipTranslate 3s ease 3s infinite;
	animation:tipTranslate 3s ease 3s infinite;
	text-shadow:1px 1px 0 rgba(0,0,0,0.3);
}
.tip-recommend:before{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-3px;
	z-index:102;
	width:0;
	height:0;
	line-height:0;
	font-size:0;
	border-width:3px;
	border-color:#97D054 transparent transparent #97D054;
	border-style:solid dashed dashed solid;
}
.tip-recommend:after{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-4px;
	z-index:101;
	width:0;
	height:0;
	line-height:0;
	font-size:0;
	border-width:4px;
	border-color:#70A62D transparent transparent #70A62D;
	border-style:solid dashed dashed solid;
}
.tip-green{
	background-color:#50B400;
	border-color:#469B00;
}
.tip-green:before{
	border-color:#50B400 transparent transparent #50B400;
	border-style:solid dashed dashed solid;
} 
.tip-green:after{
	border-color:#469B00 transparent transparent #469B00;
	border-style:solid dashed dashed solid;
}
.tip-blue{
	background-color:#3983C1;
	border-color:#3377AE;
}
.tip-blue:before{
	border-color:#3983C1 transparent transparent #3983C1;
	border-style:solid dashed dashed solid;
} 
.tip-blue:after{
	border-color:#3377AE transparent transparent #3377AE;
	border-style:solid dashed dashed solid;
} 
.tip-yellow{
	background-color:#FFC108;
	border-color:#D09C00;
}
.tip-yellow:before{
	border-color:#FFC108 transparent transparent #FFC108;
	border-style:solid dashed dashed solid;
} 
.tip-yellow:after{
	border-color:#D09C00 transparent transparent #D09C00;
	border-style:solid dashed dashed solid;
} 
.tip-orange2{
	background-color:#f90;
	border-color:#DF8600;
}
.tip-orange2:before{
	border-color:#f90 transparent transparent #f90;
	border-style:solid dashed dashed solid;
} 
.tip-orange2:after{
	border-color:#DF8600 transparent transparent #DF8600;
	border-style:solid dashed dashed solid;
}
.tip-orange{
	background-color:#FE8001;
	border-color:#DA6D01;
}
.tip-orange:before{
	border-color:#FE8001 transparent transparent #FE8001;
	border-style:solid dashed dashed solid;
} 
.tip-orange:after{
	border-color:#DA6D01 transparent transparent #DA6D01;
	border-style:solid dashed dashed solid;
}
 
.tip-red{
	background-color:#E5010F;
	border-color:#CD010C;
}
.tip-red:before{
	border-color:#E5010F transparent transparent #E5010F;
	border-style:solid dashed dashed solid;
} 
.tip-red:after{
	border-color:#CD010C transparent transparent #CD010C;
	border-style:solid dashed dashed solid;
}
.tip-red2{
	background-color:#CE2411;
	border-color:#BC2110;
	color:#FFFF26;
}
.tip-red2:before{
	border-color:#CE2411 transparent transparent #CE2411;
	border-style:solid dashed dashed solid;
} 
.tip-red2:after{
	border-color:#BC2110 transparent transparent #BC2110;
	border-style:solid dashed dashed solid;
}  
.tip-magenta{
	background-color:#F83476;
	border-color:#F7155F;
}
.tip-magenta:before{
	border-color:#F83476 transparent transparent #F83476;
	border-style:solid dashed dashed solid;
} 
.tip-magenta:after{
	border-color:#F7155F transparent transparent #F7155F;
	border-style:solid dashed dashed solid;
} 

.tip-cyan{
	background-color:#31BC80;
	border-color:#2BA471;
}
.tip-cyan:before{
	border-color:#31BC80 transparent transparent #31BC80;
	border-style:solid dashed dashed solid;
} 
.tip-cyan:after{
	border-color:#2BA471 transparent transparent #2BA471;
	border-style:solid dashed dashed solid;
} 
.tip-golden{
	background-color:#FFCC00;
	border-color:#B90000;
	color:#B20000;
	text-shadow:1px 1px 0 #F0E402;
}
.tip-golden:before{
	border-color:#FFCC00 transparent transparent #FFCC00;
	border-style:solid dashed dashed solid;
} 
.tip-golden:after{
	border-color:#B90000 transparent transparent #B90000;
	border-style:solid dashed dashed solid;
}
.tip-purple{
	background-color:#C40FB1;
	border-color:#8D0B81;
}
.tip-purple:before{
	border-color:#C40FB1 transparent transparent #C40FB1;
	border-style:solid dashed dashed solid;
} 
.tip-purple:after{
	border-color:#8D0B81 transparent transparent #8D0B81;
	border-style:solid dashed dashed solid;
} 
@-moz-keyframes tipTranslate{
	0%{
		-moz-transform:translateY(0);
	}
	10%{
		-moz-moz:translateY(3px);
	}
	20%{
		-moz-transform:translateY(0);
	}
	30%{
		-moz-transform:translateY(3px);
	}
	40%{
		-moz-transform:translateY(0);
	}
	50%{
		-moz-transform:translateY(0);
	}
	100%{
		-moz-transform:translateY(0);	
	}
}
@-ms-keyframes tipTranslate{
	0%{
		-ms-transform:translateY(0);
	}
	10%{
		-ms-moz:translateY(3px);
	}
	20%{
		-ms-transform:translateY(0);
	}
	30%{
		-ms-transform:translateY(3px);
	}
	40%{
		-ms-transform:translateY(0);
	}
	50%{
		-ms-transform:translateY(0);
	}
	100%{
		-ms-transform:translateY(0);	
	}
}
@-ms-keyframes tipTranslate{
	0%{
		-ms-transform:translateY(0);
	}
	10%{
		-ms-moz:translateY(3px);
	}
	20%{
		-ms-transform:translateY(0);
	}
	30%{
		-ms-transform:translateY(3px);
	}
	40%{
		-ms-transform:translateY(0);
	}
	50%{
		-ms-transform:translateY(0);
	}
	100%{
		-ms-transform:translateY(0);	
	}
}
@-o-keyframes tipTranslate{
	0%{
		-o-transform:translateY(0);
	}
	10%{
		-o-transform:translateY(3px);
	}
	20%{
		-o-transform:translateY(0);
	}
	30%{
		-o-transform:translateY(3px);
	}
	40%{
		-o-transform:translateY(0);
	}
	50%{
		-o-transform:translateY(0);
	}
	100%{
		-o-transform:translateY(0);	
	}
}
@-webkit-keyframes tipTranslate{
	0%{
		-webkit-transform:translateY(0);
	}
	10%{
		-webkit-transform:translateY(3px);
	}
	20%{
		-webkit-transform:translateY(0);
	}
	30%{
		-webkit-transform:translateY(3px);
	}
	40%{
		-webkit-transform:translateY(0);
	}
	50%{
		-webkit-transform:translateY(0);
	}
	100%{
		-webkit-transform:translateY(0);	
	}
}
@keyframes tipTranslate{
	0%{
		transform:translateY(0);
	}
	10%{
		transform:translateY(3px);
	}
	20%{
		transform:translateY(0);
	}
	30%{
		transform:translateY(3px);
	}
	40%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(0);
	}
	100%{
		transform:translateY(0);	
	}
}