@mixin runo-tree($primaryStyleName : v-tree) {

.#{$primaryStyleName}-node {
	background: transparent url(img/collapsed.png) no-repeat 2px 1px;
}
.#{$primaryStyleName}-node-expanded {
	background: transparent url(img/expanded.png) no-repeat 2px 1px;
}
.#{$primaryStyleName}-node-caption {
	margin-left: 18px;
}
.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
	padding-bottom: 1px;
}
.#{$primaryStyleName}-node-caption .v-icon {
	margin: 0 2px 0 -2px;
}
.#{$primaryStyleName}-node-caption span {
	padding: 0 1px;
}
.#{$primaryStyleName}-node-selected span {
	background: #57a7ed;
	color: #fff;
	padding: 1px 2px 0;
	display: inline-block;
	zoom: 1;
	margin: -1px -1px 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	
}
.#{$primaryStyleName}-node-children {
	padding-left: 16px;
}
.#{$primaryStyleName}{
	outline:none;	
}
.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{
	padding-left: 1px;
	padding-top: 0px;
	padding-bottom: 0px;
}
.#{$primaryStyleName}-node-focused span{
	border: 1px dotted black;	
}
/***************************************
 * Drag'n'drop styles
 ***************************************/
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top,
.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
	background-position: 2px 0;
}
.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
	background-position: 2px -53px;
}
.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
	background-position: 2px 50%;
}

}