/** The split gutters */

.gutter-horizontal {
    width: 3px;
    cursor: col-resize;
    height: 100%;
    border-style: none;
}

.gutter-vertical {
    height: 3px;
    cursor: ns-resize;
    border-style: none;
    text-align: center;
}

.gutter.but {
    font-size: 10px;
    position: relative;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
}

.gutter.but:hover {
    background: #CCCCD5;
    color: #FFFFFF;
}

.gutter.but.closed {
    background: #888;
    color: #FFFFFF;
}

.gutter.but.closed:hover {
    background: #FFFFFF;
    color: #000;
}

.gutter.but.horizontal {
    margin-left: -2px;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.gutter.but.horizontal:after {
    content: '▶';
}

.gutter.but.horizontal.closed:after {
    content: '◀';
}

.gutter.but.horizontal.first:after {
    content: '◀';
}

.gutter.but.horizontal.first.closed:after {
    content: '▶';
}

.gutter.but.vertical {
    padding-left: 2em;
    padding-right: 2em;
    bottom: 12px;
    line-height: 0;
    height: 6px;
}

.gutter.but.vertical.first:after {
    content: '▲';
}

.gutter.but.vertical.first.closed {
    bottom: 6px;
}

.gutter.but.vertical.first.closed:after {
    content: '▼';
}

.gutter.but.vertical.last:after {
    content: "▼";
}

.gutter.but.vertical.last.closed {
    bottom: 12px;
}

.gutter.but.vertical.last.closed:after {
    content: '▲';
}