/****************************************************************************
 * CSS STRUCTURE
 *
 * #debug_panel									- wrapper for whole panel.
 *     .debug_inline_item h3 #debug_title		- 'Debug' label
 *     .debug_tab								- ID differs for each tab
 *         h4 .debug_tab_label					- clickable label, e.g. 'queries'
 *         .debug_tab_contents					- the box that appears containing the
 *												  tab's contents
 *	   (repeat .debug_tab block for each tab)
 *     .debug_inline_item #debug_allpages		- 'all pages' wrapper
 *			a									- link to 'all pages'
 *     .debug_inline_item #debug_js_error_msg	- JS error message text
 *     .debug_inline_item #debug_forced			- if $gForceDebug is set.
 *
 ****************************************************************************
 */

	
/* If using IE < 7, then hide the whole debug bar completely.  It is horribly
 * broken in old versions, and it is better that it is disabled than it is
 * visible in its current state.
 * We are unlikely to ever fix it to work in IE6, but if we find we need to, the
 * place to discuss it is in bug 3228 (which I have closed as WONTFIX).
 */
	#debug_old_ie {
		display: none;
	}

/****************************************************************************
 * RESET
 * Undo any styles that are intended for the page content but which may
 * affect the output of the debug bar inappropriately.
 ****************************************************************************
 */

/* Stop the font from being over-ridden. */
	#debug_panel,
	#debug_panel h3,
	#debug_panel h4 {
		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;;
	}

/* Use a fixed size for the debug bar, so it is not affected by project font
 * size settings, nor any user stylesheets (though text zooming still seems to
 * affect it for some reason).
 * We set a fixed size for the panel itself, which allows us to scale the contents
 * relative to this, using ems.
 */
	#debug_panel {
		font-size: 12px;
		line-height: 1.2;

	/* We also set the box-sizing to content-box, so that the layout isn't messed
	 * up by any frameworks that reset the whole page to border-box sizing.
	 */
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}

	#debug_panel * {
		line-height: 1.2;
	}

/* Make sure the 'debug' label doesn't get mangled by project-specific <h3>
 * settings.  We only include settings here that we don't otherwise need to
 * set ourselves, so we don't have any unnecessary rule duplication.
 */
	#debug_panel h3 {
		position: static;
		border: none;
		left: 0;
		top: 0;
		margin: 0;
	}

/* Ensure #debug_panel elements over-ride any custom font sizes that might be set
 * on particular element types.
 */
	#debug_panel li,
	#debug_panel p {
		font-size: 1em;
	}

	#debug_panel li {
		margin: 0;
	}

	#debug_panel ul,
	#debug_panel ol {
		margin: 1em 0;
	}

/****************************************************************************
 * PANEL
 ****************************************************************************
 */

/* Position and colour the panel. */
	#debug_panel {
	/* Fix the panel at the bottom of the page, so it doesn't move as the page
	 * scrolls.
	 */
		position: fixed;
		bottom: 0;

	/* Ensure the panel takes up the whole width of the page. */
		left: 0;
		width: 100%;

	/* Set a high z-index so that the bar is always above any page content
	 * (10 million should do!).
	 */
		z-index: 10000000;

	/* Set an appropriate height for the bar, based on contents.   To stop the
	 * bar from obscuring the actual page content, we also put a (slightly larger)
	 * bottom-margin on the body, below.
	 */
		height: 21px;

	/* Configure the default appearance of bar.  These colours will be modified to
	 * highlight errors that occur (see later rules).
	 */
		background-color: #E0E0FF;
		border-top: 1px solid #CCCCFF;

	/* Configure the default appearance of the bar's contents */
		color: #999999;
	}

/* Over-ride body margin, so the bar doesn't cover any of the page content.
 * The DebugBarEnabled class is set on the body element if the debug bar is
 * enabled.  If this margin causes problems for individual projects, e.g. due
 * to their layout requiring anything other than zero for the bottom margin,
 * then they can select using this class to adjust this to an appropriate value.
 */
	body.DebugBarEnabled {
		margin-bottom: 21px;
	}

/* Style the panel when closed */

	#debug_panel.debug_panel_closed {
	/* Set width to zero, which will hide the bar.  However the title will still
	 * be visible.
	 */
		width: 0;
	}

	.debug_panel_closed .debug_tab {
		display: none;
	}

	#debug_panel > * {
		float: left;
		margin-right: 0.25em;
	}

/****************************************************************************
 * INLINE PANEL ELEMENTS
 * Everything except the tabs.
 ****************************************************************************
 */

/* Default styling that affects all in-line bar elements. */
	.debug_inline_item {
	/* Set a larger horizontal margin than we use for tabs. */
		margin: 0 0.65em 0 0.35em;

	/* Set the height so the items fill the vertical bar space, and give appropriate
	 * padding to center them and ensure they line up with one-another, vertically.
	 * We also give horizontal padding, so that the text is not buffered up against
	 * the border in situations where a border is present.
	 */
		height: 21px;
		padding: 0.2em 0.5em 0 0.5em;

	/* Give the items a z-index - why?  Can't remember.
	 * TODO: Try removing this and see if it makes a difference.
	 * In order for a z-index to have any effect, we also need to set
	 * position:relative.
	 */
		z-index: 1000;
		position: relative;
	}

/* Style over-rides for the title element (the 'debug' label).  Needs the first
 * #debug_panel selector so that rules here have precedence over the standard rules
 * for h3 elements in the panel.
 */
	#debug_panel #debug_title {
	/* Move up slightly, so it doesn't shift when the bar is closed. */
		position: relative;
		top: -1px;
		padding-top: 4px;

	/* Set default colours.  These will be modified by JS to highlight any errors
	 * that occur.
	 */
		color: #333333;
		background-color: #CCCCFF;

	/* Over-ride the default horizontal margins for inline items, so that the box
	 * is up against the left edge of the page, and to give a larger space between
	 * the right side of the box and the first tab.
	 */
		margin-left: 0;
		margin-right: 0.7em;

	/* Set font styling.  We need to specify font-size, otherwise the default
	 * <h4> size will be used.  We also force the text to bold upper-case, because
	 * it looks better.
	 */
		font-size: 1em;
		font-weight: bold;
		text-transform: uppercase;
	}

	body.JSEnabled #debug_title {
	/* Set the cursor to display the hand pointer when over this element, as clicking
	 * it will open/close the entire panel.
	 */
		cursor: pointer;
	}

/* Style the error message which reports JavaScript errors. */
	#debug_js_error_msg {
		font-weight: bold;
		background-color: #FFFF00;
		border: 1px solid #FF0000;
		border-width: 0 1px;

	/* By default, hide the message.  It will be displayed if an error occurs. */
		display: none;
	}

/* Style over-rides for the debug_forced element (the note indicating that
 * $gForceDebug has been set when the user is not a techadmin user).
 */
	#debug_forced {
	/* Float this, so that it is always on the same place at the right edge of
	 * the bar.
	 */
		float: right;
	}

/****************************************************************************
 * TAB STRUCTURE
 ****************************************************************************
 */

/* The .debug_tab class is added to the wrapper div for each tab.
 * In practice, this is a wrapper for the tabs content, because the label itself
 * is removed from the flow using position: fixed, therefore we style it to ensure
 * the content is in the right place when it is visible.
 */
	.debug_tab {
	/* Default text colour: grey. */
		color: #999999;
	}

	#debug_panel .debug_tab_right {
		float: right;
	}

/* Style the tabs themselves, i.e. the clickable labels that show/hide the tab's
 * content.
 */
	.debug_tab_label {
	/* Undo the browser's default h4 stylings. */
		font-size: 1em;
		font-weight: normal;

	/* Position the label on the debug bar.  We use a fixed position to take it
	 * out of the document flow.  The exact horizontal position is determined
	 * manually for each tab, via separate rules, below.
	 */
		bottom: 0;
		display: block;
		float: left;

	/* Sort out margin and paddings to make the tabs sit right within the bar. */
		margin: 0;
		margin-top: 4px;
		padding: 0 0.5em 2px 0.5em;

	/* Set the border so that it is around three sides, fixing the tab to the bottom
	 * of the debug bar (it is flipped so that it affixes to the top when it is
	 * the current tab, via extra rules, below).
	 * We also round the corners of the tab for browsers that support it.
	 */
		border: 1px solid #B0B0B0;
		border-bottom: none;
		-moz-border-radius: 10px 10px 0 0;
		-khtml-border-radius: 10px 10px 0 0;
		-webkit-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;

	/* Set up the tab's font and background colour. */
		background-color: #CCCCCC;
		color: #FFFFFF;

	/* Change the mouse into a hand-cursor when over the tab, to indicate it can
	 * be clicked (to open/close the tab).
	 */
		cursor: pointer;
	}

/* Change the tab's appearance when the mouse goes over it. */
	.debug_tab_label:hover {
		border-color: #6666FF;
		background-color: #CCCCFF;
		color: #6666FF;
	}

	.debug_tab_contents {
	/* Set the tab's size when open (i.e. when the contents are visible).
	 * 50% height means that it will cover half the browser window, vertically.
	 * The width of 30% is a fairly arbitrary default width, which should be
	 * overwritten by individual tabs, based on the space required for their
	 * content.
	 * If the contents are larger than the available size, scroll-bars will appear.
	 */
		width: 30%;
		height: 50%;
		overflow: auto;

		position: fixed;
		bottom: 21px;
		margin-bottom: 1px;

	/* No margin wanted at the top. */
		margin-top: 0;

	/* Control the appearance of the content within the tab.  Give it a white
	 * background with a grey border, and add some padding so the content doesn't
	 * go right up to the border.
	 */
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		padding: 0.2em 0.5em;

	/* Format the content using a fixed-width font.
	 * Note that we use a font-size of 0.81em, rather than 0.8em, as it prevents odd
	 * bits of white-space appearing - most notably in the profile tab - in Firefox
	 * and possibly other browsers, too (presumably due to sub-pixel rounding
	 * issues).
	 */
		font-family: 'Courier New', Courier, 'Nimbus Mono L', monospace;
		font-size: 0.81em;

	/* Hide the contents by default.  They will be displayed again when the tab is
	 * selected.
	 */
		display: none;
	}

	.debug_tab_right .debug_tab_contents {
		right: 0;
	}

/* Positioning of individual tabs.  Unfortunately, we seem to need to set these
 * manually at the moment - ideally the floating would handle it for us.
 * TODO: See if we can avoid this.
 * We also set the widths to be appropriate for the content.
 */

	#debug_querylog .debug_tab_contents {
		width: 75em;
	}

	#debug_profilerlog .debug_tab_contents {
		width: 42.5em;
	}

	#debug_output .debug_tab_contents {
		width: 40em;
	}

	#debug_errorlog .debug_tab_contents {
		width: 40em;
	}

	#debug_tools .debug_tab_contents {
		width: 11em;
		height: 12.5em;
	}

	#debug_impersonation .debug_tab_contents {
		width: 20em;
		height: 15em;
	}

/****************************************************************************
 * TAB CONTENT - SELECTED TAB
 * The currently selected tab has the .debug_current_tab class applied to
 * its wrapper.  The following rules style the selected tab appropriately.
 ****************************************************************************
 */

/* Flip the tab label so that it is attached to the top of the bar instead of the
 * bottom.
 */
	.debug_current_tab .debug_tab_label {
	/* Change the border colour to highlight the selected tab.  This also has the
	 * effect of re-enabling the bottom border, which is required in order to invert
	 * the tab.
	 */
		border: 1px solid #B0B0B0;

	/* Disable the top border so that the tab is inverted (previously the bottom
	 * border was disabled) and flip the the curved corners so they are at
	 * the bottom instead of the top.
	 */
		border-top: none;
		-moz-border-radius: 0 0 10px 10px;
		-khtml-border-radius: 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px;
		border-radius: 0 0 10px 10px;

	/* Change the margin/padding settings so that the tab is attached to the top,
	 * rather than the bottom, of the bar.
	 */
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 0.1em;
	}

/* When the tab is selected, its contents are visible. */
	.debug_current_tab .debug_tab_contents {
	/* Show the tab contents (previously hidden) */
		display: block;
	}

/* We add some styling to the tab itself, which affects the way it surrounds the
 * contents.
 */
	.debug_current_tab {
	/* Change the background color to white, so that the small border (created
	 * by the margin on the tab contents) is white, rather than transparent.
	 * TODO: This method no longer works under the current style.  Should try and
	 *		 find a way of adding this border back, ideally.
	 */
		xbackground-color: #FFFFFF;
	}

/****************************************************************************
 * TAB CONTENT - HIGHLIGHTED TABS
 ****************************************************************************
 */

/* If new (unread) output is available, colour the tab. */
	.debug_tab_notify .debug_tab_label {
		border-color: #009900;
		border-width: 2px;
		background-color: #CCFFCC;
		color: #009900;
	}

	.debug_tab_notify .debug_tab_label:hover {
		background-color: #FFFFCC;
	}

/****************************************************************************
 * TAB CONTENT - FORM ELEMENTS
 * Currently only relevant to the impersonation tab, but would apply for any
 * tab that includes form elements.
 ****************************************************************************
 */

	#debug_panel form {
		margin: 0;
		padding: 0;
	}

	#debug_panel input,
	#debug_panel select,
	#debug_panel textarea,
	#debug_panel label {
		height: auto;
		min-height: 0;
		width: auto;
		min-width: 0;
		line-height: inherit;
		text-align: left;
		white-space: normal;
		font-size: inherit;

		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
	}

	#debug_panel label {
		font-weight: normal;
	}

	#debug_panel input[type="text"],
	#debug_panel input[type="password"],
	#debug_panel select {
		font-size: 0.9em;
		border: 1px solid #7F9DB9;
		padding: 0.25em 0.15em;

		-moz-border-radius: 0;
		-khtml-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		-moz-box-shadow: none;
		-khtml-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	#debug_panel input[type="submit"],
	#debug_panel input[type="button"],
	#debug_panel input[type="reset"],
	#debug_panel button {
		margin: 0;
	}

/****************************************************************************
 * TAB CONTENTS - QUERY LOG
 ****************************************************************************
 */

/* The note displayed at the top of the output detailing how many queries
 * were run.
 */
	.debug_query_note {
		font-weight: bold;
	}

/* Style the list of queries to optimise the use of white-space. */
	#debug_querylog ol {
		padding: 0 0 0 3em;
	}
	#debug_querylog li {
		margin-top: 0.5em;
		font-size: 0.9em;

		word-wrap: break-word;
		overflow-wrap: break-word;
	}

/* Style the different query types, so it is easier to spot the ones that
 * change data.
 */

	#debug_querylog .debug_query_insert,
	#debug_querylog .debug_query_update,
	#debug_querylog .debug_query_delete {
		color: #394499;
	}

/* Style the redirection notice, so it stands out. */

	.debug_query_redirection {
		display: block;

		margin: 0;
		margin-top: 3em;

		padding: 0.2em 0.5em;

		border: 1px solid #666666;
		border-width: 1px 0;

		font-size: 1.1em;
		font-weight: bold;
		color: #666666;
	}

/* The query filter input box, which is added to the page dynamically, via JS. */
	#debug_panel #debug_query_filter {
	/* Ensure box doesn't scroll with tab, and is always positioned on the right
	 * of the page.
	 * The tab's width (not including padding) is 75em, but so we position it using
	 * an appropriate left-margin.  We can't use float:right for fixed elements
	 * or specific left/right positions, as these are relative to the entire page,
	 * not the containing element.
	 * Note that our font-size means we need to divide the values we want by 0.9
	 * to get the correct value we need.  We also subtract an additional 2em to
	 * account for the scroll-bar, which will normally be present.
	 * Input box width = 7.5em / 0.9 = 8.333
	 * Left margin     = (75em - 7.5em - 2em) / 0.9 = 72.778
	 */
		position: fixed;
		width: 8.333em;
		margin-left: 72.778em;
	}

	.debug_filter_highlight {
		background-color: #FFFF00;
	}

/****************************************************************************
 * TAB CONTENTS - PROFILER OUTPUT
 ****************************************************************************
 */

	#debug_profilerlog .debug_tab_contents {
		white-space: pre;
		padding: 0;
	}

	#debug_profilerlog .debug_tab_contents ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#debug_profilerlog .MDBProfilerLogEntry:hover {
		color: #333399;
	}

	#debug_profilerlog .MDBProfiler_Time {
		cursor: pointer;
	}

	.MDBProfiler_Offset {
		padding: 0 0.85em;

	/* Compensate for single space character before element. */
		margin-left: -0.5em;
		margin-right: -0.7em;
	}

	.MDBProfiler_Diff {
		padding: 0 1.4em;

	/* Compensate for single space character before element. */
		margin-left: -1em;
	}

/* Colouring for different gap sizes. */

	.MDBProfiler_NoDiff .MDBProfiler_Time {
		background-color: #F0F0F0;
	}

	.MDBProfiler_TinyDiff .MDBProfiler_Time {
		background-color: #FFE0E0;
	}

	.MDBProfiler_SmallDiff .MDBProfiler_Time {
		background-color: #FFC0C0;
	}

	.MDBProfiler_MediumDiff .MDBProfiler_Time {
		background-color: #FFA0A0;
		color: #E0E0E0;
	}

	.MDBProfiler_BigDiff .MDBProfiler_Time {
		background-color: #FF8080;
		color: #E0E0E0;
	}

	.MDBProfiler_HugeDiff .MDBProfiler_Time {
		background-color: #FF6060;
		color: #FFFFFF;
	}

	.MDBProfiler_MassiveDiff .MDBProfiler_Time {
		background-color: #FF0000;
		color: #FFFF00;
	}

/****************************************************************************
 * TAB CONTENTS - DEBUGGING OUTPUT
 ****************************************************************************
 */

/* Increase the size of the debug output.  For some reason, it is smaller than
 * in the other panels!
 */
	#debug_output_contents {
		font-size: 1.2em;
	}

/* Position the 'clear' button correctly. */
	#btnClearDebug {
	/* Set default button clearance. */
		margin: 0.25em;

	/* Set a fixed position, so the button doesn't scroll with the tab contents. */
		position: fixed;

	/* Move the 'clear' button to the right of the panel.  We can't use float: right
	 * as this doesn't work with fixed positioning.  This means that there is a bit
	 * of unwanted white-space if the scrollbar is not present.
	 * TODO: Can we improve this?
	 */
		margin-left: 33.5em !important;
	}

/* When new lines are output via the JavaScript Debug() function, they are wrapped
 * in a dbgOutputRow class.  We style this so that there is a bit of white-space
 * between lines.
 */
	.dbgOutputRow {
		margin: 0.5em 0;
	}

/****************************************************************************
 * TAB CONTENTS - PHP ERRORS
 ****************************************************************************
 */

	#debug_errorlog .debug_tab_contents b {
		color: #CC0000;
	}

	#debug_errorlog .debug_tab_contents .debug_error_filedetails b {
		color: #999999;
	}

	#debug_errorlog .debug_tab_contents .debug_error_filedetails {
		padding-left: 3em;
	}

/* Style the list of errors to optimise the use of white-space. */
	#debug_errorlog ul {
		padding: 0;
	}
	#debug_errorlog li {
		margin-top: 0.5em;
		list-style: none;
	}

/****************************************************************************
 * TAB CONTENTS - TOOLS
 ****************************************************************************
 */

	#debug_tools .debug_tab_contents {
		padding: 0;
		font-size: 1em;
	}

	#debug_tools .debug_tab_contents * {
		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
	}

	#debug_tools ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#debug_tools li {
		border-bottom: 1px solid #CCCCCC;
		text-align: center;

	/* Not required by default, but projects may set a padding/margin for <li>
	 * elements, and we don't want that.
	 */
		margin: 0;
		padding: 0;
	}

	#debug_tools li:last-child {
		border-bottom: none;
	}

	#debug_tools a {
		display: block;
		padding: 0.4em;
	}

	#debug_tools li:hover {
		background-color: #FFFFC0;
	}

/****************************************************************************
 * TAB CONTENTS - IMPERSONATION
 ****************************************************************************
 */

	#debug_impersonation form {
		margin-top: 1em;
		padding-top: 1em;
		border-top: 1px solid #CCCCCC;
	}

	#debug_impersonation .debug_tab_contents * {
		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
	}

	#debug_impersonation_stop {
		display: block;
		text-align: center;
		margin-top: 0.5em;
	}

	#debug_impersonation label {
		float: left;
	}

	#debug_impersonation input[type="text"] {
		clear: left;
		margin-top: 2em;
		margin-left: 1em;
	}

/****************************************************************************
 * ERROR OUTPUT
 ****************************************************************************
 */

/* A general style used to highlight various error conditions.  Specific
 * errors have additional styling, below.
 */
	#debug_panel .debug_error {
		color: #CC0000 !important;
	}

/* If a JavaScript error occurs, the .debug_js_error class is added to the
 * #debug_panel wrapper, and we can use this to style the various contents
 * appropriately.
 */

/* Change colours for the panel itself.
 * We need to include the #debug_panel selector, otherwise the earlier, more
 * specific rules, take precedence.
 */
	#debug_panel.debug_js_error {
		background-color: #FFE0E0;
		color: #FF0000;
		border-color: #FF0000;
	}

/* Change colours for the panel title (the 'debug' label)
 * We need to include the #debug_panel selector, otherwise the earlier, more
 * specific rules, take precedence.
 */
	#debug_panel.debug_js_error #debug_title {
		background-color: #FF6060;
		color: #FFFFFF;
	}

/* Ensure the error message is actually displayed. */
	.debug_js_error #debug_js_error_msg {
		display: block;
	}

/* The .debug_tab_errors class is set for a tab if it contains any errors.
 * If this happens, we need to style the tab appropriately so these errors
 * are highlighted.
 */

/* Change the default colours for the tab label. */
	.debug_tab_errors .debug_tab_label {
		border-color: #CC0000;
		background-color: #FFE0E0;
		color: #CC0000;
	}

/* Change the rollover colours for the tab label. */
	.debug_tab_errors .debug_tab_label:hover {
		border-color: #FF0000;
		background-color: #FFFFFF;
		color: #FF0000;
	}