/************************************************************************************************************

	DHTML Suite for Applications
	(C) www.dhtmlgoodies.com, November 2006

	CSS for the DHTMLSuite.paneSplitter class.
	
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland

************************************************************************************************************/

/* Set the <html> and <body> element to full size and overflow to hidden
This is important for the script
*/
html{	
	width:100%;	/* Full width and height */
	height:100%;
	margin:0px;	/* No space between browser edge and content */
	padding:0px;
	overflow:hidden;	/* Overflow: hide content, i.e. now scrollbars */
}
body{
	width:100%;	/* Full width and height */
	height:100%;
	margin:0px;	/* No space */
	padding:0px;	
	background-color:#c4dcfb;	/* General <body> background color, light blue */
}
.DHTMLSuite_paneContent{	/* Pane content div */
	overflow:auto;			/* IMPORTANT */
	position:relative;		/* IMPORTANT */
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
}

.DHTMLSuite_pane{	/* Main div for a pane */
	overflow:hidden;	/* Don't touch this one */
	
	background-color:#FFF;	/* White background color */	
	
	/* Pane borders - we only apply borders to the left and right side of the pane. The horzintal resize handler got a top and right border, so we don't need that on the pane.
	You can override the css for a pane at the bottom of this css file, example: by applying css to #DHTMLSuite_pane_west 
	*/
	border-left:1px solid #9cbdff;	/* Blue border - left */
	border-right:1px solid #9cbdff;	/* Blue border - right */
}
.DHTMLSuite_paneHeader{	/* Pane header div - the title bar of a pane */
	overflow:hidden; /* Don't touch this one */
	
	height:23px;
	line-height:22px;
	background-image:url(../images/pane-splitter/pane-splitter-header-bg.png);	/* Background image for the header - blue gradient. */
	background-repeat:repeat-x;	/* Repeat background-image along the x-axis */
}


.DHTMLSuite_paneContent .DHTMLSuite_paneContentInner{	/* A div inside .DHTMLSuite_paneContent. This is where the content is located. If you want to add some styling to the content of panes, this could be the place */
	padding:4px;	/* "Air" */
}

/* START CSS FOR THE NAVIGATION TABS AT THE BOTTOM OF PANES */


/* This is the css for the main div holding all the tabs */

.DHTMLSuite_paneTabs{	/* Div for the navigation tabs - this is the parent container for the tabs ( the bottom bar inside a pane ) */
	background-color:#c4dcfb;	/* Blue color */
	height:24px;
	line-height:24px;
	border-top:1px solid #9cbdff;	/* Dark blue top border */
	padding-left:3px;	/* Some "Air" before the first tab */
	padding-right:4px;	/* Some "Air" at the right */
	position:relative;
}

.DHTMLSuite_paneTabs div{	/* General rules for a tab */	
	/* Deprecated  display:block;					/* Block level element  */	
	position:relative;				/* Relative positioning since we have -1px on top - IMPORTANT!!! */
	margin-left:1px;				/* 1 pixel space between each tab */
	font-size:0.9em;				/* Font size: 12 pixels */
	line-height:120%;				/* Font size * 1.2 */
	padding-left:10px;				/* Left space inside tab - ps! Right space is added to the "a" tags below. */
	
	top:-1px;						/* -1px in order to cover the border above the tab - ( border is defined for .DHTMLSuite_paneTabs ) */
	overflow:hidden;				/* Hide overflowing content - eventual */
	font-weight:bold;				/* Bold font */
}

/* This <table> css is there to fit tabs into the width of the pane. If you don't want this features, just remove them or implement alternative rules for individual panes. Example:

#DHTMLSuite_pane_west .DHTMLSuite_paneTabs table{
	table-layout:auto;
	width:auto;
}

*/


.DHTMLSuite_paneTabs table{	/* All tabs are placed inside a table */
	table-layout:fixed;
	width:100%;
}
/* There is one <td> tag for each tab. The HTML for a tab looks like this: 

<TD>
	<DIV class="paneSplitterActiveTab">
		<A>Tab text</A>
		<SPAN></SPAN>	
	</DIV>
</TD>

The background of a tab is made out of two images. The left side of a tab is defined as background image for the DIV tag above. The right side is a background image for
the span tag. The span tag is absolute positioned at the right side of the div tag. 

*/
.DHTMLSuite_paneTabs td{
	text-align:center;	/* Center navigation tab text */
	text-overflow:ellipsis;
	white-space:nowrap;
}
	
.DHTMLSuite_paneTabs div{
	padding-right:5px;	/* So that text inside the div(in the <a> tag doesn't appear beneath the right side background image - background of the span tag */
}
.DHTMLSuite_paneTabs div a{	/* Text links inside a tab  - general css for the tabs*/
	display:block;					/* Important */
	clear:both;
	text-decoration:none;			/* no underline */
	position:relative;
	text-overflow:ellipsis;	/* To get dotted lines at the right side of the text when it overflows it's boundaries */
	overflow:hidden;
}

.DHTMLSuite_paneTabs .paneSplitterActiveTab{	/* Custom rules for active tabs */
	height:22px;
	padding-top:0px;					/* Padding-top - 1 pixel extra padding since we don't have border-top on active items */
	background-image:url(../images/pane-splitter/pane-splitter-tab-active-bg.png);	/* The left part of a tab background - this should be wide enough to fill a cover a tab - typically 200 - 300 pixels wide  */
	background-repeat:no-repeat;	/* IMPORTANT */
}

.DHTMLSuite_paneTabs .paneSplitterActiveTab a{	/* The <A> tag inside an active tab - A tab is a div with an a tag <div class="paneSplitterActiveTab"><a href="#" onclick="...">Tab title</a></div> */
	padding-right:10px;				/* Right space inside tab */	
	padding-top:4px;
	padding-bottom:4px;	
	height:22px;
}

.DHTMLSuite_paneTabs .paneSplitterInactiveTab{	/* Custom rule for inactive tabs */
	border-top:1px solid #9cbdff;	/* A border on top - same border top color as for .DHTMLSuite_paneTabs (see above) - it's the border on top of inactive tabs */
	background-image:url(../images/pane-splitter/pane-splitter-tab-inact-bg.png);	/* Left part of background image */
	background-repeat:no-repeat;	/* No background repeat */
	height:21px;	/* Height of inactive tabs - 1 pixel smaller than active tabs because of the top border - total height will be the same */
}

.DHTMLSuite_paneTabs .paneSplitterActiveTab a{	/* Tab text - active tabs */
	color:#006;							/* Dark blue color */
}
.DHTMLSuite_paneTabs .paneSplitterInactiveTab a{	/* Tab links - inactive tabs */
	color:#444;
	line-height:17px;					/* Height of tab */
	display:block;
	padding-right:10px;				/* Right space inside tab */
	padding-top:1px;	/* Space at top - 1 pixel smaller than for the active tabs (.DHTMLSuite_paneTabs .paneSplitterActiveTab a) */ 
	padding-bottom:3px;
	height:21px;
}

.DHTMLSuite_paneTabs span{	/* The span tag which holds the background image for the right side of a tab */
	position:absolute;
	right:0px;
	top:0px;
	height:22px;
	width:14px;
	display:block;
	background-repeat:no-repeat;	/* No background repeat */
	background-position:top right;	/* Position background image at the right of the <a> tag */	
}

.DHTMLSuite_paneTabs .paneSplitterInactiveTab span{	/* Background image inactive tab */
	background-image:url(../images/pane-splitter/pane-splitter-tab-inact-bg2.png);	/* Right part of background image */
}
.DHTMLSuite_paneTabs .paneSplitterActiveTab span{	/* Background image active tab */
	background-image:url(../images/pane-splitter/pane-splitter-tab-active-b2.png);	/* The right part of a tab background (No transparency since this part overlaps the left part - see div declaration above )*/
}

/* for close button on tabs (batur) */
.DHTMLSuite_paneTabs .paneSplitterInactiveTab span.closable{	/* Closable Background image inactive tab */
	background-image:url(../images/pane-splitter/pane-splitter-tab-inact-bg2-closable.png);	/* Right part of background image */
}

.DHTMLSuite_paneTabs .paneSplitterInactiveTab span.closableOver{	/* Closable Background image inactive tab for the over state */
	background-image:url(../images/pane-splitter/pane-splitter-tab-inact-bg2-closable-over.png);	/* Right part of background image */
}

.DHTMLSuite_paneTabs .paneSplitterActiveTab span.closable{	/* Closable Background image active tab */
	background-image:url(../images/pane-splitter/pane-splitter-tab-active-b2-closable.png);	/* The right part of a tab background (No transparency since this part overlaps the left part - see div declaration above )*/
}

.DHTMLSuite_paneTabs .paneSplitterActiveTab span.closableOver{	/* Closable Background image active tab for the over state */
	background-image:url(../images/pane-splitter/pane-splitter-tab-active-b2-closable-over.png);	/* The right part of a tab background (No transparency since this part overlaps the left part - see div declaration above )*/
}

/* end (batur) */

.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv{	/* Button container inside the header of a pane - parent element for the small buttons */
	padding:3px;
}

.DHTMLSuite_paneHeader .paneTitle{	/* Title of pane - at the left of the header bar */
	padding-left:4px; /* Text indentation */
}


.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv div,	/* General rules for the small buttons inside a pane header */
.DHTMLSuite_pane_collapsed_west .buttonDiv div,	/* Also small buttons inside the box for collapsed panes */
.DHTMLSuite_pane_collapsed_south .buttonDiv div,
.DHTMLSuite_pane_collapsed_east .buttonDiv div,
.DHTMLSuite_pane_collapsed_north .buttonDiv div
{	
	background-repeat:no-repeat;	/* No background repeat */
	width:15px;
	height:15px;
	background-position: center center;		
	cursor:pointer;	/* "Hand" as cursor */
	
}

.DHTMLSuite_pane_collapsed_west .buttonDiv div,	/* Also small buttons inside the box for collapsed panes */
.DHTMLSuite_pane_collapsed_south .buttonDiv div,
.DHTMLSuite_pane_collapsed_east .buttonDiv div,
.DHTMLSuite_pane_collapsed_north .buttonDiv div{
	margin:1px;
}


.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv div{
	float:right;	/* Float items to the right - the buttons should be right aligned inside it's parent container(.DHTMLSuite_paneHeader_buttonDiv) */
}

.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv .closeButton,.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv .closeButtonOver{	/* Close button */
	background-image: url(../images/pane-splitter/pane-splitter-close.gif); /* Close button image */
	padding:1px;	/* Same size as border for the over state */
}

.refreshButton, .refreshButtonOver{
	background-image: url(../images/pane-splitter/pane-splitter-refresh.gif); 
	padding:1px;	/* Same size as border for the over state */
}

.collapseButtonHorizontal, .collapseButtonHorizontalOver{	/* collapse button (west and east pane) */
	background-image: url(../images/pane-splitter/pane-splitter-collapse.gif); 
	padding:1px;	/* Same size as border for the over state */
}

.expandButtonHorizontal, .expandButtonHorizontalOver{	/* expand button (west and east pane) */
	background-image: url(../images/pane-splitter/pane-splitter-expand.gif); 
	padding:1px;	/* Same size as border for the over state */
}

.collapseButtonVertical,.collapseButtonVerticalOver{	/* collapse button (north and south pane) */
	background-image: url(../images/pane-splitter/pane-splitter-collapse-v.gif); 
	padding:1px;	/* Same size as border for the over state */
}

.expandButtonVertical,.expandButtonVerticalOver{	/* expand button (north and south pane)  */
	background-image: url(../images/pane-splitter/pane-splitter-expand-v.gif); 
	padding:1px;	/* Same size as border for the over state */
}
.DHTMLSuite_paneHeader .DHTMLSuite_paneHeader_buttonDiv .closeButtonOver,	
.collapseButtonHorizontalOver,
.expandButtonHorizontalOver,
.collapseButtonVerticalOver,
.refreshButtonOver,
.expandButtonVerticalOver{	/* Mouse over states - buttons */
	background-color:#FFF;
	border:1px solid #9cbdff;
	padding:0px;	/* No padding since we have a border */
}
	
.DHTMLSuite_paneSplitter_horizontal{	/* Horizontal splitter resize handle */
	background-image:url('../images/pane-splitter/pane-splitter-resize-hor.png');
	background-repeat:no-repeat;
	background-position: top center;
	border-top:1px solid #9cbdff;
	cursor:n-resize;
}

.DHTMLSuite_paneSplitter_horizontal_expInTitle{	/* Resize handler when expand collapse button is located inside title bar */
	background-image:url('../images/pane-splitter/pane-splitter-resize-hor2.png');
}


.DHTMLSuite_paneSplitter_horizontal_noresize{
	background-image:url('../images/pane-splitter/pane-splitter-resize-hor-nd.png');
	background-repeat:no-repeat;
	background-position: top center;
	border-top:1px solid #9cbdff;	
	cursor:default;
	z-index:1;

}
.DHTMLSuite_paneSplitter_vertical{	/* Vertical splitter resize handle */
	background-image:url('../images/pane-splitter/pane-splitter-resize-ver.png');
	background-repeat:no-repeat;
	background-position: left center;
	cursor:w-resize;
}
.DHTMLSuite_paneSplitter_vertical_expInTitle{
	background-image:url('../images/pane-splitter/pane-splitter-resize-ver2.png');
}

.DHTMLSuite_paneSplitter_vertical_noresize{	/* Vertical splitter resize handle */
	background-image:url('../images/pane-splitter/pane-splitter-resize-ver-nd.png');
	background-repeat:no-repeat;
	background-position: left center;
	cursor:default;
	z-index:1;
}


.DHTMLSuite_resizeButtonLeft,.DHTMLSuite_resizeButtonRight{
	background-position:center center;
	position:absolute;
	left:0px;
	top:50%;
	height:50px;
	margin-top:-25px;
	width:100%;
	background-repeat:no-repeat;
	cursor:pointer;
	opacity:0.5;
	filter:alpha(opacity=50);
}

.DHTMLSuite_collapseExpandOver{
	opacity:1;
	filter:null;
}

.DHTMLSuite_paneSplitter_vertical .DHTMLSuite_resizeButtonLeft{
	background-image:url('../images/pane-splitter/pane-splitter-coll-v-new.png');
}

.DHTMLSuite_paneSplitter_vertical .DHTMLSuite_resizeButtonRight{
	background-image:url('../images/pane-splitter/pane-splitter-coll-v-e-new.png');
}



.DHTMLSuite_resizeButtonUp,.DHTMLSuite_resizeButtonDown{
	background-position:center center;
	position:absolute;
	top:0px;
	left:50%;
	width:50px;
	margin-left:-25px;
	height:100%;
	background-repeat:no-repeat;
	cursor:pointer;
	opacity:0.5;
	filter:alpha(opacity=30);
}

.DHTMLSuite_collapseExpandOver{
	opacity:1;
	filter:null;
}

.DHTMLSuite_paneSplitter_horizontal .DHTMLSuite_resizeButtonUp{
	background-image:url('../images/pane-splitter/pane-splitter-coll-h-new.png');
}

.DHTMLSuite_paneSplitter_horizontal .DHTMLSuite_resizeButtonDown{
	background-image:url('../images/pane-splitter/pane-splitter-coll-h-s-new.png');
}



.DHTMLSuite_paneSplitter_onResize{	/* Resize handle - resize in progress */
	background-color:#AAA;	/* Just a gray background color - size is set automatically */
}

/* PANES IN COLLAPSED STATE */
.DHTMLSuite_pane_collapsed_west,.DHTMLSuite_pane_collapsed_east{	/* Pane in collapsed state */
	background-color:#c4dcfb;
	z-index:15000;
	width:14px;
	padding-bottom:1px;
	
}
.DHTMLSuite_pane_collapsed_west{
	padding-left:4px;
	left:0px;
}
.DHTMLSuite_pane_collapsed_east{
	padding-right:3px;
}
.DHTMLSuite_pane_collapsed_south,.DHTMLSuite_pane_collapsed_north{	/* Pane in collapsed state */
	background-color:#c4dcfb;
	z-index:16000;
	padding-left:3px;
	padding-right:3px;
	height:14px;

}

/* CSS for the panes in collapsed state */
.DHTMLSuite_pane_collapsed_west{
	/* No border here because border is added to the left ot the center pane */
}
.DHTMLSuite_pane_collapsed_south{
	padding-bottom:2px;	
}
.DHTMLSuite_pane_collapsed_east{
	/* No border here because border is added to the right ot the center pane */
}
.DHTMLSuite_pane_collapsed_north{
	padding-top:2px;

	border-bottom:1px solid #9cbdff;	/* Blue border */
}

/* .DHTMLSuite_pane_collapsedInner is the class name of the rectangular div for panes in collapsed state - the one with the border and the expand button  */
.DHTMLSuite_pane_collapsed_west .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_east .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_south .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_north .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_west .DHTMLSuite_pane_collapsedInnerOver,
.DHTMLSuite_pane_collapsed_east .DHTMLSuite_pane_collapsedInnerOver,
.DHTMLSuite_pane_collapsed_south .DHTMLSuite_pane_collapsedInnerOver,
.DHTMLSuite_pane_collapsed_north .DHTMLSuite_pane_collapsedInnerOver
{
	border:1px solid #9cbdff;	/* Blue border */
	
	
}
/* Custom rules for west and east collapsed panes */
.DHTMLSuite_pane_collapsed_west .DHTMLSuite_pane_collapsedInner, 
.DHTMLSuite_pane_collapsed_east .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_west .DHTMLSuite_pane_collapsedInnerOver, 
.DHTMLSuite_pane_collapsed_east .DHTMLSuite_pane_collapsedInnerOver
{
	width:12px;	/* Width */
	float:none;
} 

/* Custom rules for north and south collapsed panes */
.DHTMLSuite_pane_collapsed_north .DHTMLSuite_pane_collapsedInner, 
.DHTMLSuite_pane_collapsed_south .DHTMLSuite_pane_collapsedInner,
.DHTMLSuite_pane_collapsed_north .DHTMLSuite_pane_collapsedInnerOver, 
.DHTMLSuite_pane_collapsed_south .DHTMLSuite_pane_collapsedInnerOver
{
	height:12px;	
	margin-right:6px;
} 

.DHTMLSuite_pane_collapsedInnerOver{	/* Mouse over effect - panes in collapsed state */
	background-color:#d2e3fc;	/* Lighter blue background color */
	cursor:pointer;	/* "Hand as a cursor */
}

/**** CUSTOM CSS FOR THE PANES - USER SPECIFIC - Usually, this part will be empty, and you will instead implement these rules in some other included css files */


/** Custom css for each pane */
#DHTMLSuite_pane_north{	/* Custom css for the north pane */
	background-color:#c4dcfb;	/* Light blue background color */
	border-left:0px;
}
#DHTMLSuite_pane_west{	/* Custom css for the west pane */

}
#DHTMLSuite_pane_east{	/* Custom css for the east pane */

}
#DHTMLSuite_pane_south{	/* Custom css for the south pane */
	border-left:0px;
}
#DHTMLSuite_pane_center{	/* Custom css for the center pane */

}

#DHTMLSuite_pane_south .DHTMLSuite_paneContent{	/* Css for pane content - the inner div where the content of a pane is located */
	font-size:0.9em;	/* I want a smaller font for the CONTENT in the "south" pane */
}

