.TouchSplitter.h-ts>div{height: 100%;width: 42%;width: calc(50% - .5em);}
.TouchSplitter.v-ts>div{width: 100%;height: 42%;height: calc(50% - .5em);}
.TouchSplitter>div {
  display: block;
  margin:0;
  padding:0;
  float:left;}
  .TouchSplitter.h-ts>div.splitter-bar {width:1em; cursor:col-resize}
  .TouchSplitter.v-ts>div.splitter-bar {height:1em;cursor:row-resize}
  .TouchSplitter>div.splitter-bar.dock>div {
    width:1em;
    height:1em;
    background-repeat: no-repeat;
    background-position: center;}
.TouchSplitter,
.TouchSplitter>div,
.TouchSplitter>div.splitter-bar>div{
  position:relative;
  margin:0;
  padding:0;
  <!--
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -->
}

.TouchSplitter>div.test-calc{width:10px; width:calc(10px + 10px);}
.TouchSplitter>div.test-em{width:1em;}

.TouchSplitter>div.splitter-bar>div{
  width:100%;
  height:1em;
  position:relative;
  background-color:rgba(0,0,0,0.4);
  -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);

}
.TouchSplitter.h-ts>div.splitter-bar>div{margin-top: -.5em; top:50%;}
.TouchSplitter.v-ts>div.splitter-bar>div{margin-left: -.5em; left:50%;}

.TouchSplitter > .splitter-bar {
  border-left: 1px solid silver;
  border-right: 1px solid silver;
  background-image: -webkit-linear-gradient(right, #ffffff 0%, #e0e0e0 100%);
  background-image: linear-gradient(to right, #ffffff 0%, #e0e0e0 100%);
  background-repeat: repeat-x;

}