/* blocknotice_anim container - can be anything you want */
.blocknotice_anim {
	animation: jump 5s;
	animation-iteration-count: infinite;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual blocknotice_anim */
.blocknotice_anim .blocknotice_animtext {
  visibility: hidden;
  font-size: 14px;
  width: 220px;
  background-color: #487592;
  color: #e7eff5;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 20%;
}

/* blocknotice_anim arrow */
.blocknotice_anim .blocknotice_animtext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: #487592 transparent transparent transparent;
  z-index: 2;
}

/* Toggle this class - hide and show the blocknotice_anim */
.blocknotice_anim .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the blocknotice_anim) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

@keyframes jump {
  0%,100% { transform: translate(1px, 1px); }
  10% { transform: translate(1px, 1px); }
  20% { transform: translate(1px, 1px); }
  30% { transform: translate(1px, 1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(1px, 4px); }
}

.urate{
	list-style:none;
	margin:-15px 0 10px;
	padding:0;
	height:20px;
	position:relative;
	background:url(/img/rating_star_blue.webp) top left repeat-x
}
.urate+p{
	display:none
}
.urate li{
	text-indent:-90000px;
	padding:0;
	margin:0;
	float:left
}
.urate li a{
	outline:none;
	display:block;
	width:20px;
	height:20px;
	text-decoration:none;
	text-indent:-9000px;
	z-index:20;
	position:absolute;
	padding:0
}
.urate li a:hover{
	background:url(/img/rating_star_blue.webp) left center;
	z-index:2;
	left:0
}
.urate a.r1-unit{
	left:0
}
.urate a.r1-unit:hover{
	width:20px
}
.urate a.r2-unit{
	left:20px
}
.urate a.r2-unit:hover{
	width:40px
}
.urate a.r3-unit{
	left:40px
}
.urate a.r3-unit:hover{
	width:60px
}
.urate a.r4-unit{
	left:60px
}
.urate a.r4-unit:hover{
	width:80px
}
.urate a.r5-unit{
	left:80px
}
.urate a.r5-unit:hover{
	width:100px
}
.urate li.current-rating{
	background:url(/img/rating_star_blue.webp) left bottom;
	position:absolute;
	height:20px;
	display:block;
	text-indent:-9000px;
	z-index:1
}
.previewrate{
	list-style:none;
	margin: 0px;
	padding:0;
	height:12px;
	position:relative;
	background:url(/img/rating_star_blue.webp) top left repeat-x;
	background-size:12px;
}
.previewrate+p{
	display:none
}
.previewrate li{
	text-indent:-90000px;
	padding:0;
	margin:0;
	float:left
}
.previewrate li.currpost-rating {
	background:url(/img/rating_star_blue.webp) left bottom;
	background-size:12px;
	position:absolute;
	height:12px;
	display:block;
	text-indent:-9000px;
	z-index:1
}