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

.#{$primaryStyleName}-horizontal,
.#{$primaryStyleName}-vertical {
	overflow: hidden;
}

.#{$primaryStyleName}-hsplitter,
.#{$primaryStyleName}-hsplitter-locked {
	width: 6px;
}

.#{$primaryStyleName}-hsplitter div,
.#{$primaryStyleName}-hsplitter-locked div {
	width: 6px;
	position: absolute;
	top: 0;
	bottom: 0;
	background: #ccd2d0 url(img/bg_hor.png);
	border: 1px solid #b6bbbc;
	margin: 0 -1px;
}

.#{$primaryStyleName}-vsplitter,
.#{$primaryStyleName}-vsplitter-locked {
	height: 6px;
}

.#{$primaryStyleName}-vsplitter div,
.#{$primaryStyleName}-vsplitter-locked div {
	height: 6px;
	background: #ccd2d0 url(img/bg_ver.png);
	border: 1px solid #b6bbbc;
	margin: -1px 0;
}


/* Rounded style */
.#{$primaryStyleName}-hsplitter-rounded div,
.#{$primaryStyleName}-vsplitter-rounded div,
.#{$primaryStyleName}-hsplitter-rounded-locked div,
.#{$primaryStyleName}-vsplitter-rounded-locked div {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.#{$primaryStyleName}-hsplitter-rounded div,
.#{$primaryStyleName}-hsplitter-rounded-locked div {
	top: 4px;
	bottom: 4px;
}
.#{$primaryStyleName}-vsplitter-rounded div,
.#{$primaryStyleName}-vsplitter-rounded-locked div {
	margin: -1px 4px;
}


/* Small style */
.#{$primaryStyleName}-hsplitter-small,
.#{$primaryStyleName}-vsplitter-small,
.#{$primaryStyleName}-hsplitter-small-locked,
.#{$primaryStyleName}-vsplitter-small-locked {
	background: #b6bbbc;
}
.#{$primaryStyleName}-hsplitter-small,
.#{$primaryStyleName}-hsplitter-small-locked {
	width: 1px;
}
.#{$primaryStyleName}-vsplitter-small,
.#{$primaryStyleName}-vsplitter-small-locked {
	height: 1px;
}
.#{$primaryStyleName}-hsplitter-small div,
.#{$primaryStyleName}-hsplitter-small-locked div {
	border: none;
	background: transparent;
	width: 5px;
	margin: 0 0 0 -2px;
}
.#{$primaryStyleName}-vsplitter-small div,
.#{$primaryStyleName}-vsplitter-small-locked div {
	border: none;
	background: transparent;
	height: 5px;
	margin: -2px 0 0 0;
}

}