ranklet-template.scss

#ranklet-{{context.id}} {
	.ranklet-wrapper { counter-reset:ranklet-item; }
	.ranklet-item {
		position:relative;
		margin:0 0 12px;
		overflow:hidden;
		cursor:pointer;
		&:first-child:before {
			width:40px;
			height:40px;
			font-size:16px;
			line-height:2.5;
			background:#ffd700;
			content:counter(ranklet-item);
			counter-increment:ranklet-item;
		}
		&:nth-child(2):before {
			background:#c0c0c0;
			content:counter(ranklet-item);
			counter-increment:ranklet-item;			
		}
		&:nth-child(3):before {
			background:#c47222;
			content:counter(ranklet-item);
			counter-increment:ranklet-item;						
		}
		&:before {
			position:absolute;
			top:0;
			left:0;
			width:30px;
			height:30px;
			font-family:sans-serif;
			font-size:13px;
			font-weight:700;
			line-height:2.5;
			color:#ffffff;
			background:#ff2400;
			text-align:center;
			content:counter(ranklet-item);
			counter-increment:ranklet-item;
			z-index:10;
		}
	}
	.ranklet-link {
		display:block;
		color:#333333;
		overflow:hidden;
	}
	.ranklet-image {
		float:left;
		width:30%;
		height:80px;
		img {
			width:100%;
			height:auto;
		}
	}
	.ranklet-title {
		margin:0 0 0 33%;
	}
}