@import 'vars.scss';
@import 'mixins/collection.scss';
@import "compass/css3/box-shadow";


.tagbox {
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top, #d8d8d8 0%, #ffffff 37%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(37%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #d8d8d8 0%,#ffffff 37%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #d8d8d8 0%,#ffffff 37%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #d8d8d8 0%,#ffffff 37%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #d8d8d8 0%,#ffffff 37%); /* W3C */
	border:2px solid #6f6f6f;
	padding:5px 0 0 5px !important;
	@include border-radius(4px);
	margin:0 0 10px !important;
	min-height:31px !important;
}

.tag,
.tags a {
	background: $blue;
	@include border-radius(3px);
	margin: 0 5px 5px 0;
	position: relative;
	float:left;
	min-width: 20px;
	height: 20px;
	padding:3px 5px;
	line-height:20px;
	color:#fff;
	

	&:hover {
		text-decoration:none;
		background: $blue;
		@include opacity(1);
	}
}

.tag,
.tags a {
	border:none;

	&.active {
		&.orange {
			background:#f48506;
		}

		&.green {
			background:#80b813;
		}		
	}
	&.orange {
		&:hover {
			background:#838383;	
		}		
	}

	&.green {
		&:hover {
			background:#838383;
		}
	}
}

.tag {
	padding-right:15px;
}

.tags a {
	@include opacity(0.4);
}

.tags a {
	&.active {
		@include opacity(1);
	}
}