.ui-layout-pane {
    padding:  18px;
    overflow: auto;
}
.ui-layout-content {
    position: relative;
    overflow: auto;
}

.ui-layout-resizer {
    border-width: 0;
}

.ui-layout-resizer-sliding {    /* resizer when pane is 'slid open' */
    opacity: .10; /* show only a slight shadow */
    filter:  alpha(opacity=10);
}
.ui-layout-resizer-sliding-hover {  /* sliding resizer - hover */
    opacity: 1.00; /* on-hover, show the resizer-bar normally */
    filter:  alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover 
 * this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover  { border-bottom-width:  1px; }
.ui-layout-resizer-south-sliding-hover  { border-top-width:     1px; }
.ui-layout-resizer-west-sliding-hover   { border-right-width:   1px; }
.ui-layout-resizer-east-sliding-hover   { border-left-width:    1px; }

.ui-layout-toggler {
    color: gold;
}
.ui-layout-resizer-hover .ui-layout-toggler {
    opacity: .60;
    filter:  alpha(opacity=60);
}
.ui-layout-toggler-hover , /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
    opacity: 1.00;
    filter:  alpha(opacity=100);
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
    border-width: 0 1px; /* left/right borders */
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
    border-width: 1px 0; /* top/bottom borders */
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding  ui-layout-toggler {
    display: none;
}
.ui-layout-toggler .content {
    font-size:      18px;
    width:          100%;
}