/* usage: .ribbon-tr(@margin:auto, @padding:auto, @font:1em, @bgcolor:#f00, @color:#fff, @hover:#ccc, @hoverfont:#fff); */

.ribbon-tr(@margin:auto, @padding:auto, @font:1em, @bgcolor:#f00, @color:#fff, @hover:#c00, @hoverfont:#fff) {
 	position:absolute;
	right:0;
	top:0;
	width:200px;
	height:150px;
	text-decoration:none;
	overflow:hidden;
	z-index: 9999;

	&:hover, .ribbon a {
		/* text-decoration:none; */
	}

	.tag:hover { background: @hover; color: @hoverfont; }

	.tag {
		display:block;
		height:30px;
		width:200px;
		background:@bgcolor;
		color:@color;
		font-size:@font;
		padding:@padding;
		text-align:center;
		text-decoration:none;
		-webkit-transform-origin:15px 0px;
		-moz-transform-origin:15px 0px;
		-ms-transform-origin:15px 0px;
		-o-transform-origin:15px 0px;
		transform-origin:15px 0px;
		-webkit-transform:translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
		-moz-transform:translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
		-ms-transform:translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
		-o-transform:translate(80.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);


			.tag:after {
			content: '';
			display:block;
			position:absolute;
			top:0;
			left:0;
			width:196px;
			height:26px;
			margin:1px;
			border:1px solid rgba( 255, 255, 255, 0.4 );
			}



		}
}

@media screen and (max-width: 800px) {

	.ribbon-tr {
		width:120px;
		height:120px;

		.tag {
			height: 30px;
			width: 120px;
			-webkit-transform: translate(50.00000000000003px, -14.999999999999996px) rotate(45.000000000000014deg);
		}

		.tag:after {
			width: 156px;
			height: 26px;
		}
	}
}