/* This file consists of two parts. The first is a copy and paste of the styles from the
   HTML 5 Boilerplate project, modified to work within our framework - mainly just by making
   the styles only affect elements within an 'il' classed element.
   The second part contains our own styles specific to STEM presentations but not specific to
   any one exported model.
   This file will not change for different exports from the same version of STEM, but it may
   change if you install and export from a different version of STEM.
*/




/* ----------------------------------------
   ---------- HTML 5 Boilerplate ----------
   ---------------------------------------- */

/* I've included the original comments verbatim. */

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

.il article, .il aside, .il details, .il figcaption, .il figure, .il footer, .il header, .il hgroup, .il nav, .il section { display: block; }
.il audio, .il canvas, .il video { display: inline-block; *display: inline; *zoom: 1; }
.il audio:not([controls]) { display: none; }
.il [hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

.il html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

.il html, .il button, .il input, .il select, .il textarea { font-family: sans-serif; color: #222; }

.il body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

.il ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
.il ::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

/* But these conflict badly with a lot of site templates that set values without the .il base (and hence are less specific and ignored). Just hope browsers are consistent... */
/*
.il a { color: #00e; }
.il a:visited { color: #551a8b; }
.il a:hover { color: #06e; }
.il a:focus { outline: thin dotted; }
*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
/*
.il a:hover, .il a:active { outline: 0; }
*/

/* =============================================================================
   Typography
   ========================================================================== */

.il abbr[title] { border-bottom: 1px dotted; }

.il b, .il strong { font-weight: bold; }

.il blockquote { margin: 1em 40px; }

.il dfn { font-style: italic; }

.il hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

.il ins { background: #ff9; color: #000; text-decoration: none; }

.il mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
.il pre, .il code, .il kbd, .il samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
.il pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

.il q { quotes: none; }
.il q:before, .il q:after { content: ""; content: none; }

.il small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
.il sub, .il sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
.il sup { top: -0.5em; }
.il sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

.il ul, .il ol { margin: 1em 0; padding: 0 0 0 40px; }
.il dd { margin: 0 0 0 40px; }
.il nav ul, .il nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

.il img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

.il svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

.il figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

.il form { margin: 0; }
.il fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
.il label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

.il legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

.il button, .il input, .il select, .il textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

.il button, .il input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

.il button, .il input[type="button"], .il input[type="reset"], .il input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

.il button[disabled], .il input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

.il input[type="checkbox"], .il input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
.il input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
.il input[type="search"]::-webkit-search-decoration, .il input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

.il button::-moz-focus-inner, .il input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

.il textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
.il input:valid, .il textarea:valid {  }
.il input:invalid, .il textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

.il table { border-collapse: collapse; border-spacing: 0; }
.il td { vertical-align: top; }


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.il .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */




/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.il .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.il .ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.il .hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.il .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.il .visuallyhidden.focusable:active, .il .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.il .invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.il .clearfix:before, .il .clearfix:after { content: ""; display: table; }
.il .clearfix:after { clear: both; }
.il .clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  .il { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  .il a, .il a:visited { text-decoration: underline; }
  .il a[href]:after { content: " (" attr(href) ")"; }
  .il abbr[title]:after { content: " (" attr(title) ")"; }
  .il .ir a:after, .il a[href^="javascript:"]:after, .il a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  .il pre, .il blockquote { border: 1px solid #999; page-break-inside: avoid; }
  .il thead { display: table-header-group; } /* h5bp.com/t */
  .il tr, .il img { page-break-inside: avoid; }
  .il img { max-width: 100% !important; }
/*  @page { margin: 0.5cm; } */
  .il p, .il h2, .il h3 { orphans: 3; widows: 3; }
  .il h2, .il h3 { page-break-after: avoid; }
}











/* ---------------------------------
   ---------- STEM Styles ----------
   --------------------------------- */



#stem_presentation_holder
	{
	background-color: #CED8CF;
	font-size: 12pt;
	color: #000000;
	font-family: "Arial", "Helvetica", sans-serif;
	line-height: 1.5;
	}

.il h1
	{
	font-size: 24pt; 
	font-weight: bold;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	text-align: left;
	}

.il h2:not(.chart_major_title)
	{
	font-size: 18pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	}

/* Included in the boilerplate code above...
.il .hidden
	{
	display: none;
	}
*/

.message_box_inner
	{
	padding-left: 8px;
	display: block;
	position: fixed;
	z-index: 20000;
	background-color: #F5F5F5; /*#CED8CF;*/
	left: 40%;
	width: 20%;
	top: 15%;
	border: 1px solid #000000;
	box-shadow: 4px 4px #808080;
	text-align: left;
	}

.confirm_dialog_visible
	{
	display: block;
	}
	
.confirm_dialog_inner
	{
	padding-left: 8px;
	display: block;
	position: fixed;
	z-index: 20000;
	background-color: #F5F5F5; /*#CED8CF;*/
	left: 40%;
	width: 20%;
	top: 15%;
	border: 1px solid #000000;
	box-shadow: 4px 4px #808080;
	text-align: left;
	}

.save_dialog_hidden
	{
	display: none;
	}

.save_dialog_visible
	{
	display: block;
	}
	
.save_dialog_inner
	{
	padding-left: 8px;
	display: block;
	position: fixed;
	z-index: 10000;
	background-color: #F5F5F5; /*#CED8CF;*/
	left: 35%;
	width: 30%;
	top: 10%;
	border: 1px solid #000000;
	box-shadow: 4px 4px #808080;
	text-align: left;
	}

#save_dialog_name
	{
	width: 90%;
	}
	
#save_dialog_desc
	{
	width: 90%;
	}

.dialog_surround
	{
    z-index: 500;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: none repeat scroll 0% 0% rgba(20, 20, 20, 0.6);
	}
#confirm_dialog.dialog_surround
	{
	z-index:600;
	}
#message_box.dialog_surround
	{
	z-index:600;
	}
	
.load_dialog_hidden
	{
	display: none;
	}

.load_dialog_visible
	{
	display: block;
	}

.load_dialog_inner
	{
	padding-left: 8px;
	display: block;
	position: fixed;
	z-index: 10000;
	background-color: #F5F5F5; /*#CED8CF;*/
	left: 35%;
	width: 30%;
	top: 10%;
	border: 1px solid #000000;
	box-shadow: 4px 4px #808080;
	text-align: left;
	}

#load_dialog h3
	{
	font-size: 12pt;
	font-weight: bold;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	margin-bottom: 2px;
	}

#load_dialog_list_container
	{
	width: 100%;
	margin-bottom: 4px;
	}

.load_dialog_list
	{
	width: 45%;
	display: inline-block;
	vertical-align: top;
	}

.load_dialog_list .option_button_off
	{
	display: block;
	}

.load_dialog_list .option_button_on
	{
	display: block;
	}

.load_dialog_notice_hidden
	{
	display: none;
	}

.load_dialog_notice_shown
	{
	display: block;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	}

.dialog_button_container
	{
	padding-top: 6px;
	padding-bottom: 6px;
	}

.export_report_dialog_hidden
	{
	display: none;
	}

.export_report_dialog_visible
	{
	display: block;
	}
	
.export_report_dialog_inner
	{
	padding-left: 8px;
	display: block;
	position: fixed;
	z-index: 10000;
	background-color: #F5F5F5; /*#CED8CF;*/
	left: 35%;
	width: 30%;
	top: 10%;
	border: 1px solid #000000;
	box-shadow: 4px 4px #808080;
	text-align: left;
	}

#export_report_result_dialog ul
	{
	list-style-type:square;
	color: #6c806d;
	}

.hidden_results_container
	{
	display: none;
	}
				   
#contains_all
	{
	width: 100%;
	height: 100%;
	margin-right: 4px;
	position: relative;
	}

#tooltip
	{
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #FFF2BA;
	padding: 5px;
	opacity: 1.0;
	}

#tooltip h3, #tooltip div
	{
	margin: 0;
	color: #000000;
	background-color: #FFF2BA;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-weight: normal;
	font-size: 10px;
	}

.il_tooltip
	{
	display: block;
	position: absolute;
	max-width: 200px;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #FFF2BA;
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #000000;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-weight: normal;
	font-size: 14px;
	opacity: 0.7;
	}

.frontpage
	{
	background-color: #FFFFFF;
	width: 100%;
	min-height: 500px;
	text-align: left;
	position: relative;
	top: 0;
	z-index: 10;
	}

.frontpage_content
	{
	margin: 16px 16px 16px 16px;
	padding: 8px 8px 8px 8px;
	text-align: justify;
	}

#frontpage_dismiss_button
	{
	margin-left: 24px;
	}

.frontpage_textitem
	{
	padding-top: 6px;
	padding-bottom: 6px;
	}

#frontpage_item_1
	{
	text-align: left;
	font-size: 24pt;
	font-weight: bold;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	}

#frontpage_item_2
	{
	background-color: #F4F6F4;
	font-size: 15pt;
	font-weight: normal;
	font-style:italic;
	color: #6c806d;
	}

.button
	{
	background: transparent url(../img/button.png) 0 0 no-repeat;
	height: 30px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	}

.button .btn_content
	{
	background: transparent url(../img/button.png) right -30px repeat-x;
	height: 30px;
	margin-left: 8px;
	padding: 0 16px 0 16px;
	color: #FFFFFF;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	line-height: 28px;
	}
	
.compact_ui .button .btn_content
	{
	padding: 0 8px 0 8px;	/* Slightly narrower buttons makes it more likely that the load, save and run buttons will all fit into a given compact input panel's width. */
	}

.button .btn_right
	{
	background: transparent url(../img/button.png) right -60px no-repeat;
	width: 8px;
	height: 30px;
	position: absolute;
	top: 0px;
	right: -8px;
	}

.selected_tab_button
	{
	background-image: url(../img/button_highlight.png);
	}

.selected_tab_button .btn_content
	{
	background-image: url(../img/button_highlight.png);
	}

.selected_tab_button .btn_right
	{
	background-image: url(../img/button_highlight.png);
	}

.main_content
	{
	position: absolute;
	top: 0px;
	background-color: #FFFFFF;
	width: 100%;
	}
.main_content:not(.compact_ui)
	{
	display: none;
	}

#inputs_outer_wrapper:not(.compact_ui)
	{
	float: left;
	width: 100%;
	}
	
#inputs_outer_wrapper.compact_ui
	{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 35%;
	}

.inputs_container
	{
	text-align: left;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 4px;
	background: #F4F6F4 url(../img/fade_bottom.png) left bottom repeat-x;
	position: relative;
	z-index: 2;
	}
.inputs_container.compact_ui
	{
	background: transparent none;
	}

.inputs_tab_control
	{
	background-color: #e1e7e1;
	}

.inputs_panel
	{
	z-index: 1;
	}
	
.compact_ui .inputs_panel
	{
	overflow-x: auto;
	}
	
.inputs_panel label
	{
	font-size: 12pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	width: auto; /* This overrides restrictions on Implied Logic's own page template. It's probably not necessary for other sites... */
	float: none; /* This overrides restrictions on Implied Logic's own page template. It's probably not necessary for other sites... */
	}

.inputs_table
	{
	width: 100%;
	}

.inputs_table th
	{
	padding-left: 16px;
	background-color: #e1e7e1;
	font-size: 14pt;
	font-weight: normal;
	text-align: left;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	}
	
.inputs_table th:not(.grid_input)
	{
	background: transparent;
	}

.input_group_heading
	{
	font-size: 12pt;
	font-weight: bold;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	}

.results_tab_control
	{
	background-color: #e1e7e1;
	padding-left: 8px;
	}

.results_container:not(.compact_ui)
	{
	background-color: #FFFFFF;
	width: 100%;
	position: absolute;
	top: 50px;
	display: table;
	}

.results_container.compact_ui
	{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 65%;
	}

.single_input
	{
	background: transparent url(../img/help_icon_small.png) left top no-repeat;
	margin-top: 8px;
	margin-bottom: 16px;
	padding-left: 18px;
	}

.grid_input input
	{
	width: 10px;	/* This is modified by scripts to fit the table to the available width. */
	}

.grid_input, .grid_input th, .grid_input input
	{
	padding-right: 10px;
	text-align: right;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-size: 10px;
	font-weight: normal;
	}

.slider_horizontal
	{
	width: 272px;
	height: 16px;
	display: inline-block;
	}
.compact_ui .slider_horizontal
	{
	width: 136px;
	padding-top: 10px;
	}

.slider_horizontal_fallback
	{
	background: transparent url(../img/slider_background.png) no-repeat left top;
	}

.slider_handle
	{
	background: transparent url(../img/slider_handle.png) no-repeat left top;
	width: 16px;
	height: 16px;
	position: relative;
	}

.slider_spinbox
	{
	position: relative;
	left: 0px;
	top: 0px;
	width: 64px;
	height: 22px;
	display: inline-block;
	vertical-align: top;
	}

.radio_button_input input[type="radio"]
	{
	vertical-align: text-bottom;
	margin-right: 4px;
	}

.radio_button_input
	{
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin-right: 30px;
	text-align: left;
	display: inline-block;
	}

.latched_checkbox_input input[type="checkbox"]
	{
	vertical-align: text-bottom;
	margin-right: 4px;
	}

.latched_checkbox_input
	{
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin-right: 30px;
	text-align: left;
	display: inline-block;
	}

.option_button_on
	{
	background: transparent url(../img/option_button_on.png) 0 0 no-repeat;
	height: 20px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	}

.option_button_on .obtn_content
	{
	background: transparent url(../img/option_button_on.png) right -20px repeat-x;
	height: 20px;
	margin-left: 4px;
	padding: 0 8px 0 8px;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 10px;
	line-height: 18px;
	}

.option_button_on .obtn_right
	{
	background: transparent url(../img/option_button_on.png) right -40px no-repeat;
	width: 4px;
	height: 20px;
	position: absolute;
	top: 0px;
	right: -4px;
	}

.option_button_off
	{
	background: transparent url(../img/option_button_off.png) 0 0 no-repeat;
	height: 20px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	}

.option_button_off .obtn_content
	{
	background: transparent url(../img/option_button_off.png) right -20px repeat-x;
	height: 20px;
	margin-left: 4px;
	padding: 0 8px 0 8px;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 10px;
	line-height: 18px;
	}

.option_button_off .obtn_right
	{
	background: transparent url(../img/option_button_off.png) right -40px no-repeat;
	width: 4px;
	height: 20px;
	position: absolute;
	top: 0px;
	right: -4px;
	}
	
.option_button_on.with_tip .obtn_right
	{
	background: transparent url(../img/option_button_on_right_with_tip.png) right no-repeat;
	width: 16px;
	}
	
.option_button_off.with_tip .obtn_right
	{
	background: transparent url(../img/option_button_off_right_with_tip.png) right no-repeat;
	width: 16px;
	}

.results_column
	{
	display: inline-table;	/* This is the least bad option if for some reason scripts don't get to run to override it. */
	}
	
/* This class applies to results_panel and results_column elements that do not contain child results_panel or results_column objects (e.g. the divs that directly contain a list of charts). */
.innermost_chart_holder
	{
	padding-left: 2px;
	padding-right: 2px;
	}

.chart_container
	{
	display: block;
	position: relative; /* So child objects position and size themselves relative to this div rather than an ancestor. */
	margin-bottom: 50px;
	}
	
.grid_gap
	{
	display: block;
	position: relative;
	margin-bottom: 50px;
	}

.results_display_single_value
	{
	font-size: 10pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	}

.results_display_table
	{
	width: auto;
	table-layout: auto;
	border: 1px solid #6C806D;
	border-collapse: collapse;
	}

.results_display_table thead tr
	{
	background-color: #6C806D;
	}

.results_display_table tbody .even_row
	{
	background-color: #F4F6F4;
	}

.results_display_table tbody .odd_row
	{
	background-color: #CBDACB;
	}

.results_display_table thead th
	{
	border: 1px solid #6C806D;
	border-bottom-color: #FFFFFF;
	border-right-width: 0px;
	padding-right: 4px;
	color: #FFFFFF;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	text-align: right;
	}

.results_display_table thead th.first_column
	{
	text-align: left;
	}

.snapshot_table thead th
	{
	width: auto;
	border: 1px solid #6C806D;
	padding-right: 4px;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-align: right;
	}

.results_display_table tbody th
	{
	background-color: #6C806D;
	border: 1px solid #6C806D;
	border-top-color: #FFFFFF;
	border-bottom: 0px;
	width: 100px;
	padding-left: 8px;
	color: #FFFFFF;
	font-family: "Arial", "Helvetica", sans-serif;
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	}

.results_display_table thead td
	{
	border: 1px solid #6C806D;
	border-left-color: #FFFFFF;
	border-right-width: 0px;
	padding-right: 4px;
	color: #FFFFFF;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: right;
	}

.results_display_table tbody td
	{
	width: 70px;
	border: 1px solid #6C806D;
	padding-right: 4px;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-align: right;
	}

.snapshot_table tbody td
	{
	width: auto;
	}

.results_display_table .heading_column
	{
	width: auto;
	padding-left: 4px;
	text-align: left;
	}

.results_display_graph_data_source
	{
	display: none;
	}

.results_panel
	{
	position: relative;
	padding-bottom: 8px;
	}

.table_content
	{
	display: block;
	width: 100%;
	overflow-x: auto;
	}
	
.table_content h3
	{
	font-size: 12pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	margin-bottom: 2px;
	}

						   // TODO: Is this used now?
.chart_content
	{
	display: block;
	width: 90%;
	height: 480px;
	margin: 10px 10px 10px 10px;
	}

						   // TODO: Is this used now?
.chart_content h3
	{
	font-size: 12pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	margin-bottom: 2px;
	}

.chart_minor_title
	{
	font-size: 12pt;
	font-weight: normal;
	color: #6c806d;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	margin-bottom: 2px;
	}

.line_chart
	{
	display: block;
	width: 100%;
	min-height: 200px;
	}
.compact_ui .line_chart
	{
	height: 270px;
	}

.bar_chart
	{
	display: block;
	width: 100%;
	min-height: 200px;
	}
.compact_ui .bar_chart
	{
	height: 270px;
	}

.results_container:not(.compact_ui) .chart_canvas_div
	{
	width: 100%;
	min-height: 170px;
	display: block;
	}
.results_container.compact_ui .chart_canvas_div
	{
	margin-left: auto;
	margin-right: auto;
	height: 250px;
	display: block;
	}

.graph_data_source
	{
	display: none;
	}

.spinbox
	{
	position: relative;
	left: 0px;
	top: 0px;
	width: 64px;
	height: 22px;
	}

/* .il added here purely to make this definition equally specific to the boilerplate ones above - otherwise the .il input styles in the boilerplate override this one. */
.il .spinbox_text
	{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 48px;
	height: 16px;
	font-family: "tahoma", "Arial", "Helvetica", sans-serif;
	font-size: 10px;
	text-align: right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 2px;
	margin: 0px;
	}

.spinbox_plus
	{
	position: absolute;
	left: 54px;
	top: 0px;
	width: 11px;
	height: 11px;
	background-image: url('../img/spin_plus.png');
	padding: 0;
	margin: 0;
	border: 0;
	border: 1px solid #CAD1C9;
	}

.spinbox_minus
	{
	position: absolute;
	left: 54px;
	top: 11px;
	width: 11px;
	height: 11px;
	background-image: url('../img/spin_minus.png');
	padding: 0;
	margin: 0;
	border: 0;
	border: 1px solid #CAD1C9;
	}
	
.slice_drop
	{
	display: none;
	position: absolute;
	vertical-align: middle !important;
	}
	
.slice_box
	{
	display: none;
	position: absolute;
	border: 1px solid gray;
	}
	
.slice_indicator
	{
	position: absolute;
	top: 5px;
	left:90%;
	}

/* Elements with this class store settings - they're not meant to be displayed. */
.results_display_settings { display: none; }