.pane ,				/* outer pane class */
.ui-layout-pane {	/* inner pane class */
    background-color: #FFF;
    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' */
}


/*
*	OUTER-LAYOUT PANE FORMATTING
*/
.pane-north ,
.pane-south ,
.pane-west ,
.pane-east {
    overflow:		hidden;
}
.pane-north {
    border-bottom:	none;
}
.pane-north .content ,
.pane-south .content {
    text-align: center;
}
.pane-center {
    /* show off the inner-layout inside the outer-center-pane*/
    background-color: #F6F6F6;
    padding: 3px; /* for outer layout */
}

/* inner divs inside Outer East/West panes */
.header {
    /*background: #80ade5 url(80ade5_40x100_textures_04_highlight_hard_100.png) 0 50% repeat-x;*/
    border-bottom: 1px solid #777;
    font-weight: bold;
    text-align: center;
    padding: 2px 0 4px;
    position: relative;
    overflow: hidden;
}
.subhead ,
.footer {
    background: #d6d6d6 url(d6d6d6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
    padding: 3px 10px;
    font-size: 0.85em;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    bottom: 0px;
}
.subhead { border-bottom: 1px solid #777; }
.footer  { border-top: 1px solid #777; }
#mainContent .footer  { border-top: 1px solid #BBB; }
.content {
    padding:	10px;
    position:	relative;
    overflow:	auto;
}


/*
*	INNER-LAYOUT PANE FORMATTING
*/

#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: 10px;
}
#mainContent .ui-layout-center h3 {
    font-size: 1em;
    padding: 5px;
    margin: 0;
}

/*
*	NORTH PANE TOOLBAR & BUTTONS
*/

.

ul.toolbar {
    position:	relative;
    overflow:	hidden; /* required to CONTAINER 'floating li' in FF */
    height:		auto;
    margin:		0;
    padding:	2px;
    width:		100%;
    list-style:	none;
    text-align: left;
    background: #D6D6D6 url(d6d6d6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
    border-top: 1px solid #BBB;
}
ul.toolbar li {
    font-size: 0.9em;
    margin: 0;
    padding: 2px 7px;
    float: left;
    color: #000;
    border: 1px solid transparent;
    border-right-color: #BBB;
    cursor: pointer;
}
ul.toolbar li:hover {
    color: #005;
    background: #EEE url(eeeeee_40x100_textures_02_glass_90.png) 0 50% repeat-x;
    border-top-color: #BBB;
    border-bottom-color: #BBB;
}
ul.toolbar li.first:hover {
    border-left-color: #BBB;
}
ul.toolbar li span {
    /* icons in toolbar */
    width: 			15px;
    height:			15px;
    margin-left:	-3px;
    margin-right:	0.75ex;
    vertical-align:	middle;
    opacity:		0.6;
    filter:			alpha(opacity=60);
    display:		block;
    display:		inline-block;
}
ul.toolbar li:hover span {
    opacity: 1;
    filter: alpha(opacity=100);
}
li.button-toggle-north span	,
li.button-open-south span	{ background: url(go-up-on.gif) no-repeat center; }
li.button-close-south span	{ background: url(go-dn-on.gif) no-repeat center; }
li.button-pin-up span		{ background: url(pin-up-on.gif) no-repeat center; }
li.button-pin-down span		{ background: url(pin-dn-on.gif) no-repeat center; }

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

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

/* CUSTOM pin-buttons */
span.button-pin-up 		  		{ background: url(pin-up-off.gif) no-repeat center; }
span.button-pin-up:hover   		{ background: url(pin-up-on.gif)  no-repeat center; }
span.button-pin-down 	  		{ background: url(pin-dn-off.gif) no-repeat center; }
span.button-pin-down:hover 		{ background: url(pin-dn-on.gif)  no-repeat center; }

/* CUSTOM close-buttons */
span.button-close-west			{ background: url(go-lt-off.gif) no-repeat center; }
span.button-close-west:hover	{ background: url(go-lt-on.gif)  no-repeat center; }
span.button-close-east			{ background: url(go-rt-off.gif) no-repeat center; }
span.button-close-east:hover	{ background: url(go-rt-on.gif)  no-repeat center; }

/* STANDARD toggler-buttons - when the east/west panes are 'closed' */
.toggler-west-closed		{ background: url(go-rt-off.gif) no-repeat center; }
.toggler-west-closed:hover	{ background: url(go-rt-on.gif)  no-repeat center; }
.toggler-east-closed		{ background: url(go-lt-off.gif) no-repeat center; }
.toggler-east-closed:hover	{ background: url(go-lt-on.gif)  no-repeat center; }


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