/*#region PANES */
.ui-layout-pane
{
    /* all 'panes' */ /*background: #FFF; border: 1px solid #BBB;*/ /* DO NOT add scrolling (or padding) to 'panes' that have a content-div, 	   otherwise you may get double-scrollbars - on the pane AND on the content-div 	*/
    padding: 0px; /*10px;*/
    overflow: hidden; /*auto*/
}

.ui-layout-pane-center
{
    overflow: auto;
}

/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content
{
    padding: 10px;
    position: relative; /* contain floated or positioned elements */
    overflow: auto; /* add scrolling to content-div */
}

/*#endregion*/

/*#region RESIZERS */
.ui-layout-resizer
{
    background: #DDD;
    border: 1px solid #BBB;
    border-width: 0;
}

.ui-layout-resizer-drag
{
    /* REAL resizer while resize in progress */
}

.ui-layout-resizer-hover
{
    /* affects both open and closed states */
}

/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding
{
    display: none !important;
}

/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
		otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover, /* hover-color to 'resize' */ .ui-layout-resizer-dragging
{
    /* resizer beging 'dragging' */
    background: #C4E1A4;
}

.ui-layout-resizer-dragging
{
    /* CLONED resizer being dragged */
    border-left: 1px solid #BBB;
    border-right: 1px solid #BBB;
}

/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit
{
    /* CLONED resizer at min or max size-limit */
    background: #E1A4A4;
}

.ui-layout-resizer-closed-hover
{
    /* hover-color to 'slide open' */
    background: #EBD5AA;
}

.ui-layout-resizer-sliding
{
    /* resizer when pane is 'slid open' */
    opacity: .10;
    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-resizer-west, .ui-layout-resizer-east
{
    background: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/Resizer.png') repeat-y scroll left top transparent;
}

.ui-layout-resizer-west-hover, .ui-layout-resizer-east-hover
{
    background-color: black;
    filter: alpha(opacity:50);
}

.ui-layout-resizer-north, .ui-layout-resizer-south
{
    background: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Vertical/Resizer.png') repeat-x scroll left top transparent;
    border-bottom: 1px solid #8d8d8d;
}

.ui-layout-resizer-south
{
    border-top: 1px solid #8d8d8d;
}

/*#endregion*/


/*#region TOGGLERS */

.ui-layout-toggler
{
    /*border: 1px solid #BBB;*/ /* match pane-border */ /*background-color: #BBB;*/ /*border: 1px solid #8d8d8d;*/
    background-repeat: no-repeat;
    background-position: center;
    border-left: 1px solid #8D8D8D;
    border-right: 1px solid #8D8D8D;
}

.ui-layout-toggler-west, .ui-layout-toggler-east
{
    width: 5px !important;
}

.ui-layout-toggler-west-open
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/minimize.png');
}

.ui-layout-toggler-west-closed
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/maximize.png');
}

.ui-layout-toggler-east-open
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/maximize.png');
}

.ui-layout-toggler-east-closed
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Horizontal/minimize.png');
}

.ui-layout-toggler-north-open
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Vertical/minimize.png');
}
.ui-layout-toggler-north-closed
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Vertical/maximize.png');
}

.ui-layout-toggler-south-open
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Vertical/maximize.png');
}
.ui-layout-toggler-south-closed
{
    background-image: url('../../CMSPages/GetResource.ashx?image=Design/Controls/FrameResizer/Vertical/minimize.png');
}

.ui-layout-toggler-north, .ui-layout-toggler-south
{
    background-position: top center;
    right: 0px;
    left: auto !important;
}
.RTL .ui-layout-toggler-north, .RTL .ui-layout-toggler-south
{
    background-position: top center;
    right: auto;
    left: 0px !important;
}

.ui-layout-toggler-west, .ui-layout-toggler-east
{
    border: 1px solid #8D8D8D;
}

.ui-layout-resizer-hover .ui-layout-toggler
{
    opacity: .60;
    filter: alpha(opacity=60);
}
.ui-layout-toggler-west-hover, /* need when NOT resizable */ .ui-layout-resizer-west-hover .ui-layout-toggler-west-hover, .ui-layout-toggler-east-hover, /* need when NOT resizable */ .ui-layout-resizer-east-hover .ui-layout-toggler-east-hover
{
    /* need specificity when IS resizable */
    background-color: #FC6;
    opacity: 1.00;
    filter: alpha(opacity=100);
}

.ui-layout-toggler-north-hover, /* need when NOT resizable */ .ui-layout-resizer-north-hover .ui-layout-toggler-north-hover, .ui-layout-toggler-south-hover, /* need when NOT resizable */ .ui-layout-resizer-south-hover .ui-layout-toggler-south-hover
{
    /* need specificity when IS resizable */
    background-color: #FC6;
    opacity: 1.00;
    filter: alpha(opacity=100);
}

/* style the text INSIDE the togglers*/
.ui-layout-toggler .content
{
    color: #666;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}

/*#endregion*/