/*
*	COMMON LAYOUT PANE FORMATTING
*/
.pane ,				/* outer pane class */
.ui-layout-pane {	/* inner pane class */
	background-color: #eee;
	border: 1px solid #777;
	padding: 0;/* alignment & padding is on the inner-divs */
	overflow: auto; /* will be auto-set to 'hidden' for any pane with a 'scrolling content div' */
}
.ui-layout-north{
	height:90px;
	z-index: 9999!important;
}
/*
*	OUTER-LAYOUT PANE FORMATTING
*/
.pane-north ,
.pane-south ,
.pane-west ,
.pane-east {
	overflow:		hidden;
}
.pane-north {
	border-bottom:	none;
	min-width: 1030px!important;
}
.pane-north .content ,
.pane-south .content {
	text-align: center;
}
.pane-south{
	border-top: #fff 1px solid;
	height: 220px;
}
.pane-center {
	/* show off the inner-layout inside the outer-center-pane*/
	/*background-color: #F6F6F6;*/
	background: #ebeff2;
	padding: 10px; /* for outer layout */
}

/* inner divs inside Outer East/West panes */
.header { 
	font-weight: bold;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: #ebeff2;
}
.content {
	padding:	0;
	position:	relative;
	overflow:	auto;
	/*background: #eee;*/
	background: #ebeff2;
}
/*
*	INNER-LAYOUT PANE FORMATTING
*/
#mainContent{
	z-index: 0!important;
}
#mainContent .ui-layout-pane {
	padding: 10px;
}
#mainContent .ui-layout-north ,
#mainContent .ui-layout-south {
	text-align: center;
}
#mainContent .ui-layout-center {
	padding: 0 !important; /* inner divs have padding */
}
#mainContent .ui-layout-content {
	padding: 0px;
}
/*
*	OUTER LAYOUT RESIZERS & TOGGLERS
*/

.resizer-west-open ,
.resizer-east-open {
	background-color: #999;
	opacity: 0.1;
	filter: alpha(opacity=10);
}
.resizer-west-open:hover ,
.resizer-east-open:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

/* IE6 * HACK - always show resizer graphics because IE6 cannot understand elem:hover */

* html .resizer-south		{ background: url(../img/resizable-s.gif) repeat-x center !important; }
* html .resizer-west-open	{ background: url(../img/resizable-w.gif) repeat-y center !important; }
* html .resizer-east-open	{ background: url(../img/resizable-e.gif) repeat-y center !important; }

* html .resizer-south ,
* html .resizer-west-open ,
* html .resizer-east-open {
	opacity: 0.1 !important;
	filter: alpha(opacity=10) !important;
}

/*
*	SIMPLE TOGGLER BUTTONS (used on Outer Layout North/South only)
*/
.toggler-south-closed 		{ background: url(image/toggle-up.png) no-repeat right top; z-index: 9999;}
.toggler-south-open   		{ background: url(image/toggle-dn.png) no-repeat right top; z-index: 9999;}

/*
*	extJS-STYLE RESIZER/SLIDER-BAR (CLOSED)
*/
.resizer-west-closed ,
.resizer-east-closed {
	/*background: #D1E6FC;*/
	border-top: 1px solid #777;
	border-bottom: 1px solid #777;
}
.resizer-west-closed:hover ,
.resizer-east-closed:hover {
	/*background: #D1E6FC;*/
}

/*
 *	extJS-STYLE TOGGLE & PIN BUTTONS
 *
 *	these 'extra buttons' are INSIDE the east/west panes
 */

/* CUSTOM pin/close buttons */
span.button-close {
	position:	absolute;
	top:		0;
	width: 		20px;
	height:		35px;
	z-index:	2;
	display:	block;
	cursor: 	pointer;
}
span.button-close-west	{ right:	 2px;top: 2px; }
span.button-close-east	{ right: 2px;top: 2px; }/* update 24-may-14*/

/* CUSTOM close-buttons */
span.button-close-west			{ background: url(image/go-lt-off.png) no-repeat 0 0; z-index: 9999;}
span.button-close-west:hover	{ background: url(image/go-lt-on.png)  no-repeat 0 0; z-index: 9999;}
span.button-close-east			{ background: url(image/go-rt-off.png) no-repeat 0 0; z-index: 9999;}
span.button-close-east:hover	{ background: url(image/go-rt-on.png)  no-repeat 0 0; z-index: 9999;}

/* STANDARD toggler-buttons - when the east/west panes are 'closed' */
.toggler-west-closed		{ background: url(image/go-rt-off.png) no-repeat 0 0; z-index: 9999;}
.toggler-west-closed:hover	{ background: url(image/go-rt-on.png)  no-repeat 0 0; z-index: 9999;}
.toggler-east-closed		{ background: url(image/go-lt-off.png) no-repeat 0 0; z-index: 9999;}
.toggler-east-closed:hover	{ background: url(image/go-lt-on.png)  no-repeat 0 0; z-index: 9999;}


/*
*	INNER LAYOUT RESIZERS & TOGGLERS
*
*	These styles target 'children of center pane', so only affect the Inner Layout
*	This layout has applyDefaultCSS=true, so use !important to override defaults 
*/

#mainContent .ui-layout-resizer-closed:hover	{ background: #FFEDCA !important; }
#mainContent .ui-layout-resizer-open:hover ,
#mainContent .ui-layout-resizer-dragging		{ background: #C4E1A4 !important; }
#mainContent .ui-layout-resizer-dragging-limit	{ background: #FF3300 !important; }

#mainContent .ui-layout-resizer-north ,
#mainContent .ui-layout-resizer-south		{ border-left:  1px solid #BBB !important;
											  border-right: 1px solid #BBB !important; }
#mainContent .ui-layout-resizer-north-closed{ border-top:   1px solid #BBB !important; }
#mainContent .ui-layout-resizer-south-closed{ border-bottom:1px solid #BBB !important; }
#mainContent .ui-layout-resizer-west-closed	{ border-left:  1px solid #BBB !important; }
#mainContent .ui-layout-resizer-east-closed	{ border-right: 1px solid #BBB !important; }

#mainContent .ui-layout-resizer:hover .ui-layout-toggler {
	opacity: 0.4;
	filter: alpha(opacity=40);
}
#mainContent .ui-layout-resizer:hover .ui-layout-toggler:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	background: #FD9 !important;
	border-color: #CB7 !important;
}

#mainContent .ui-layout-resizer-sliding {
	opacity: 0.3;
	filter: alpha(opacity=30);
}
#mainContent .ui-layout-resizer-sliding:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
#mainContent .ui-layout-resizer-sliding .ui-layout-toggler {
	display: none !important;
}
#mainContent .ui-layout-resizer-sliding:hover .ui-layout-toggler {
	display: block !important;
}