/*#region PANES */
.ui-layout-pane
{
    /* all 'panes' */ /* 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*/
}

/* Overflow visible and high z-index to support components with context menu to show outside the pane */
.ui-layout-pane-visible {
    z-index: 99999 !important;   
}

.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: #d6d9d6 !important;
}

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

.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);
}

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


/*#region TOGGLERS */

.ui-layout-toggler
{
    /* match pane-border */   
    background-color: #bdbbbb; 
    background-repeat: no-repeat;
    background-position: center; 
}

.ui-layout-toggler-west, .ui-layout-toggler-east
{
    width: 7px !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: center center;
    right: 0px;
    left: auto !important;
}
.RTL .ui-layout-toggler-north, .RTL .ui-layout-toggler-south
{    
    right: auto;
    left: 0px !important;
}

.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: #a3a2a2;
    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: #a3a2a2;
}

/* 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*/

/* style for all main headers in CMSDesk, Site manager and API examples because of User menu*/
.main-header {
    z-index: 3 !important;
    overflow: visible;
    background-color: #262524;
}