/************************************************************************************************************ DHTML Suite for Applications (C) www.dhtmlgoodies.com, November 2006 CSS for the DHTMLSuite.paneSplitter class. www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ /* Set the and 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 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('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 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 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 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('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 tag inside an active tab - A tab is a div with an a tag

tag for each tab. The HTML for a tab looks like this:

Tab text