/* Styling for TAGS */

.thetag, .metadrag {
	display: block;
	width: auto;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	color: black;
	font-size: 11px;
	background: transparent;
}
.tag { 
	background: #606060;
	border: #606060;
	border-radius: 0 5px 5px 0;
	color: white;
	font-weight: normal;
	display: inline-block;
	/* float: left; */
	clear: both;
	height: 20px;
	left: 0;
	line-height: 20px;
	margin: 1px 5px 1px 10px;
	padding: 0 10px 0 15px;
	position: relative;
	top: 0;
	font-size: 11px;
	z-index: 1100;
}
.tag strong {
	color: white;
}
.tag:before { 
	border-bottom: 10px transparent solid;
	border-right: 8px #606060 solid; 
	border-top: 10px transparent solid;
	content: '';
	height: 0;
	left: -8px;
	position: absolute;
	top: 0;
	width: 0;
}
.tag:after { 
	background: #fafafa; 
	border: 1px #fafafa solid; 
	border-radius: 20px;
	content: '';
	height: 6px;
	left: 0;
	position: absolute;
	width: 6px;
	top: 6px;
}

.backyellow { background: yellow; }
.tag.backyellow:before { border-right-color: yellow; }
.colorblack { color: #202020; }
.backorange { background: #fc9900; }
.tag.backorange:before { border-right-color: #fc9900; }
.ztop { z-index: 1003; }
.borderRed { border: 4px solid red; }

.tag.reddish { background: #f06060; border: #f06060; }
.tag.reddish:before { border-right-color: #f06060; }
.tag.blue { background: #6060f0; border: #6060f0; }
.tag.blue:before { border-right-color: #6060f0; }
.tag.green { background: #60f060; border: #60f060; }
.tag.green:before { border-right-color: #60f060; }
.tag.purple { background: #f060f0; border: #f060f0; }
.tag.purple:before { border-right-color: #f060f0; }

.tag.marker { background: #4aaa4a; border: #4aaa4a; }
.tag.marker:before { border-right-color: #4aaa4a; }
.tag.ref { background: #6aaa6a; border: #6aaa6a; }
.tag.ref:before { border-right-color: #6aaa6a; }
.tag.str { background: #6aba6a; border: #6aba6a; }
.tag.str:before { border-right-color: #6aba6a; }
.tag.number { background: #6aca6a; border: #6aca6a; }
.tag.number:before { border-right-color: #6aca6a; }
.tag.obj { background: #6ada6a; border: #6ada6a; }
.tag.obj:before { border-right-color: #6ada6a; }
.tag.coord { background: #6aea6a; border: #6aea6a; }
.tag.coord:before { border-right-color: #6aea6a; }
.tag.legendoff { background: #dadada; border: #dadada; color: #8a8a8a; }
.tag.legendoff:before { border-right-color: #dadada; }

.tag:hover {
	background: #a0a0a0; border: #a0a0a0;
	cursor: pointer;
	color: white;
}
.tag:hover:before, span.tag:hover:before {
	border-right-color: #a0a0a0;	
}
.metagroup {
	clear: both; 
	display: block;
	/* width: 50%; */
	margin-left: 40px;
	margin-bottom: 5px;
}
.tagasblock {
	display: inline-block;
	float: left;
}
.dragfade {
	opacity: 0.5;
}
.catcher {
	min-height: 300px;
	border: 0px dotted red;
	padding: 10px;
	z-index: 500;
}
.meta.ui-draggable-dragging { opacity: 0.5; }

div#contentmid p.tag {
	padding: 0 5px 0 15px;
}	

div.metasensorbox {
	clear: both;
	display: none;
	width: 70%;
	margin-left: 45px;
}
#catcher div.metasensorbox {
	width: 90%;
	margin-left: 0px;
}
div.metasensorbox div.sensorlist, #catcher div.metasensorbox div.sensorlist {
	max-height: 200px;
	overflow: auto;
	margin: 0 0 15px 0;
	border-bottom: 1px solid gray;
	padding: 4px;
}
#data div.metasensorbox h4, #catcher div.metasensorbox h4 {
	font-size: 1.0em;
}
#data div.sensorlist p {
	font-size: 0.9em;
}
.uomtag {
	line-height: 20px;
	height: 20px;
	margin: 3px 5px 3px 10px;
	padding: 0 10px 0 15px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: bold;
	line-height: 0;
	background: #f6f6a6;
}
.tag.sensorsy {
	opacity: 1.0;
}
.tag.sensorsn {
	opacity: 0.5;
}
.inline {
	display: inline-block;
}
p.legendcounter {
	background: transparent;
}
#catcher p.legendcounter {
	background: transparent;
	width: 30px;
	padding: 3px 7px;
	margin-left: 0;
}