
/*
 * Dynamic Tag Form - for jQuery 1.3+
 * http://codecanyon.net/user/RikdeVos?ref=RikdeVos
 *
 * Copyright 2012, Rik de Vos
 * You need to buy a license if you want use this script.
 * http://codecanyon.net/item/dynamic-tag-form/482498?ref=RikdeVos
 *
 * Version: 1.1 (Feb 13 2012)
 */

.tag_title {
	font-family: Helvetica, Arial, sans-serif;
	color: #5e5e5e;
	font-size: 16px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.tag_title .tag_description {
	font-family: Helvetica, Arial, sans-serif;
	color: #adadad;
	font-size: 12px;
}

.tag_form {
	width: 400px;
	height: 90px;
	background: #fff;
	
	font-family: Helvetica, Arial, sans-serif;
	color: #adadad;
	font-size: 12px;
	line-height: 30px;
	padding: 5px 10px 5px 10px;
	margin: 10px 0 10px 0;
	border: 1px solid #ddd;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: text;
	
	-webkit-transition-property: color, -webkit-box-shadow;
	-moz-transition-property: color, -moz-box-shadow;
	-ms-transition-property: color, -moz-box-shadow;
	transition-property: color, -moz-box-shadow;
	
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.tag_form::-webkit-scrollbar {
	width: 5px;
	padding-left: 5px;
}

.tag_form::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(0,0,0,0.5); 
	margin-right: 10px;
}

.tag_form_tags {
	overflow-y: scroll;
}



.tag_form:hover, .tag_form:focus, .tag_form.focus  {
	border: 1px solid #9dcef6;
	color: #8ca1ad;
	-webkit-box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	-moz-box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	
	
	-webkit-transition-property: border, color, -webkit-box-shadow;
	-moz-transition-property: border, color, -moz-box-shadow;
	-o-transition-property: border, color, box-shadow;
	-ms-transition-property: border, color, box-shadow;
	transition-property: border, color, box-shadow;
	
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;

}

input.tag_form {
	height: 25px;
	margin-bottom: 20px;
	outline: 0px solid black;
}
textarea.tag_form {
	outline: 0px solid black;
	line-height: 1.5em;
	resize: none;
}
	
	a.tag_button, input[type=submit].tag_button {
		display: inline-block;
		width: 90px;
		height: 30px;
		line-height: 30px;
		font-family: Helvetica, Arial, sans-serif;
		cursor: pointer;
		text-decoration: none;
		font-size: 12px;
		font-weight: bold;
		color: #f4f4f4;
		text-shadow: 0 1px 0 rgba(0,0,0,.25);
		text-align: center;
		border: 1px solid #56636f;
		background: #7a8996;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#97a7ae, endColorstr=#667385);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(151,167,174)), color-stop(100%, rgb(102,115,133)));
		background-image: -webkit-linear-gradient(center top,rgb(151,167,174) 0%,rgb(102,115,133) 100%);
		background-image: -moz-linear-gradient(center top,rgb(151,167,174) 0%,rgb(102,115,133) 100%);
		background-image: -o-linear-gradient(center top,rgb(151,167,174) 0%,rgb(102,115,133) 100%);
		background-image: -ms-linear-gradient(center top,rgb(151,167,174) 0%,rgb(102,115,133) 100%);
		background-image: linear-gradient(center top,rgb(151,167,174) 0%,rgb(102,115,133) 100%);

		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 2px 3px rgba(0,0,0,.24);
		-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.24);
		box-shadow: 0 2px 3px rgba(0,0,0,.24);
	}
	
	a.tag_button:hover, input[type=submit].tag_button:hover {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a7b9c1, endColorstr=#667385);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(167,185,193)), color-stop(100%, rgb(102,115,133)));
		background-image: -webkit-linear-gradient(center top,rgb(167,185,193) 0%,rgb(102,115,133) 100%);
		background-image: -moz-linear-gradient(center top,rgb(167,185,193) 0%,rgb(102,115,133) 100%);
		background-image: -o-linear-gradient(center top,rgb(167,185,193) 0%,rgb(102,115,133) 100%);
		background-image: -ms-linear-gradient(center top,rgb(167,185,193) 0%,rgb(102,115,133) 100%);
		background-image: linear-gradient(center top,rgb(167,185,193) 0%,rgb(102,115,133) 100%);
		
	}
	
	.tag_form input[type=text][name=add_tag] {
		height: 25px;
		width: 100px;
		border-width: 0;
		background: transparent;
		outline: 0px solid black;
		color: #adadad;
	}
	
	.tag_form input[type=text][name=add_tag]:focus {
		color: #8ca1ad;
	}
	
	
		
	.tag_form .clear {
		clear: both;
	}
	
	
		.tag {
			list-style: none;
			display: inline-block;
			height: 25px;
			min-width: 10px;
			margin-right: 5px;
			
			font-family: Helvetica, Arial, sans-serif;
			color: #94652d;
			font-size: 12px;
			font-weight: bold;
			text-decoration: none;
			font-style: normal;
			line-height: 22px;
			text-shadow: 0 1px 0 rgba(255,255,255,.3);
	
			padding: 0 10px 0 20px;
			position: relative;
		}
		
		.tag:after {
			position: absolute;
			right: 0;
			content: '';
			height: 22px;
			width: 1px;
			background: #ce902b;
		}

		.tag_form_click_remove .tag {
			cursor: pointer;
		}
		
	.tag {
		background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAhYAAAAZCAYAAABtjmcvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFQTM4OEIwRTcwQkNFMDExODlBODk3MzgwREY5RjU3QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNjlFRjNDREJDOEExMUUwQjM5QTg0QTRENUJCREMyNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNjlFRjNDQ0JDOEExMUUwQjM5QTg0QTRENUJCREMyNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMjM4OEIwRTcwQkNFMDExODlBODk3MzgwREY5RjU3QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQTM4OEIwRTcwQkNFMDExODlBODk3MzgwREY5RjU3QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiUGm1EAAALqSURBVHja7Ns9TBNhGMDx56C0By1tkSC2IqL9QIoaddJBDWIcXZysitFJMA5uGhMDMdENWWQxwc3BGF2NuJiYOKiIuKkxIMQTa/hsBWLb866FItgLHPP/l7xp3/bt8kz/vG0VWYeBnuZ2h8vdm15ICQAAgBXHWgfe3m3uMKLiXqi1TVTfJhGljKkBAICilLWiwqlWGFFxXlRvlWRTH0Uy3FoAAACbYVGIimNGVPj8kk0SFQAAYANhUYiKlrbFqBgiKgAAgP2wWI6Kc7mvP/TZD0QFAACwHxbLUXFW1Eo/UQEAADYWFoWoOHpGVK8RFTODRAUAALAfFstREc/fVOSiIlk4pGd1GR8ek0ktkdtXBWqktqFOlBKFCQIAgALHm+5YqxkV4SOnRfX4RJ8eECWdXHHox9dRGRz89vDBi0Sfub9wPHVxX6k3Hqj3mdXBFAEAQD4sShSlvW7/CSMqvKJPvRNZFRWmCS0hff2JnievJzVzr+vS0xkYiQeiJ0VSX5giAADIh8XMXOb+2Pvnp1xyQFTHb8uDwWrnrPEwtfjcYz4qri2iz35iigAAIMf8kYT6rCt6NVjjvR3a2ySq8/+vNrQRTUaHtd6f0+k75n6zz3F9W+xgR7DpkOi/XjJFAABQCAuXsdxPb0SuhLb6OkO7G/+LC13XRdPmZWr8e27vr2uSYOywyPyoCDcWAADgn7AoNZZqxsXja+HL0Xr/zXAsasRFZtXJEhFPRKQ8kN/PaSLJz/x4EwAArAiLpbhwrYyLsKhlGSYEAABshYVYxsWuncQFAACwHRbWcdG4w4iLNJMCAAC2wsI6LiLbpZybCwAAYDMsisXFpWi9ryscaZByxx8mBgAALJVavK4by/y7R/bRq4mh1j3upJKZb6kNBEUyC0wNAAAUpazx3tLNhaf/VmN3daUjzsgAAMBGwmJ1XLiNVWEsp1jfdAAAAMJiXXFRthgVjnV+DgAAEBaW55YCQyEsAABAMX8FGABKltQNQykG/QAAAABJRU5ErkJggg==) no-repeat;
	}