/***************************************************************************************************\
	NAME:			EJSC Stylesheet
 ---------------------------------------------------------------------------------------------------
 	DESCRIPTION:	Contains all the styles for the eGraph component
\***************************************************************************************************/

	/* Global EJSC Styles */
		.graph_container, .graph_container *,
		.graph_menu, .graph_menu *,
		.graph_window, .graph_window *,
		.graph_about, .graph_about *,
		.zoom_selection, .zoom_selection *,
		.hint_marker, .hint_marker *,
		.hint_pointer, .hint_pointer *,
		.graph_progress, .graph_progress *,
		.graph_nodata, .graph_nodata *,
		.graph_error, .graph_error *,
		.graph_info, .graph_info *,
		.legend_container, .legend_container *,
		.legend_blocker, .legend_blocker *,
		.legend, .legend *,
		.key_grabber, .key_grabber *,
		.canvas_cover, .canvas_cover *,
		.clearboth, .clearboth *,
		.displaynone, .displaynone *
			{ font-family: Verdana; font-size: 10px; cursor: default; padding: 0px; margin: 0px; border: 0px; outline: none; }
			
	/* Graph Container */
		.graph_container { height: 100%; position: relative; }
		.graph_container * {  }
		.graph_container table { border-collapse: collapse; }
		
	/* Graph Title */
		.graph_container .graph_title_area { height: 20px; overflow: hidden; }
		.graph_container .graph_title_area .graph_title { height: 24px; line-height: 22px; font-weight: bold; font-size: 11px; margin-left: 6px; text-align: left; position: absolute; left: 0px; right: 0px; }
		.graph_container .graph_title_area .graph_data { height: 24px; line-height: 22px; width: 240px; float: right; text-align: right; margin-right: 6px; }
		.graph_container .graph_title_area .graph_data span { font-weight: normal; }
		.graph_container .graph_title_area .graph_data input { font-weight: normal; margin-right:5px; background-color: transparent; border: none; padding: 1px; width: 80px; }
		
	/* Graph Axis */
		.graph_container .y_axis { position: absolute; top: 20px; left: 0px; height: 300px; width: 80px; overflow: visible !important; }
		.graph_container .y_axis .y_axis_container { height: 100%; overflow: visible !important; position: relative; }
		.graph_container .y_axis .y_axis_container .y_axis_text { font-size: 12px; position: absolute; top: 0px; left: 0px; width: 20px; height: 100%; font-weight: bold; text-align: center; overflow: hidden; white-space: nowrap; }
		.graph_container .y_axis .y_axis_container .y_axis_text span { font-size: 12px; position: relative; font-weight: bold; text-align: center; overflow: hidden; white-space: nowrap; }
		.graph_container .y_axis .y_axis_container .y_axis_units { position: absolute; top: 0px; right: 0px; width: 60px; height: 100%; overflow: visible !important; }
.ejsc_y_axis_unit { position: absolute; top: 0px; left: 0px; white-space: nowrap; }
		.graph_container .x_axis { position: absolute; bottom: 0px; right: 0px; height: 50px; overflow: visible !important; }
		.graph_container .x_axis .x_axis_container { height: 100%; overflow: visible !important; position: relative; }
		.graph_container .x_axis .x_axis_container .x_axis_units { height: 20px; overflow: visible !important; }
.ejsc_x_axis_unit { position: absolute; white-space: nowrap; text-align: center; }
		.graph_container .x_axis .x_axis_container .x_axis_text { font-size: 12px; height: 20px; line-height: 20px; font-weight: bold; text-align: center; overflow: hidden; white-space: nowrap; position: absolute; bottom: 0px; left: 0px; width: 100%; }
		.graph_container .axis_line { overflow: hidden; position: absolute; background-color: #cccccc; height: 1px; width: 1px; }
		.graph_container .axis_splitter { position: absolute; bottom: 0px; left: 0px; height: 50px; width: 80px; overflow: hidden; }
		.graph_container .axis_splitter .axis_splitter_size { height: 50px; width: 80px; }
		.graph_container .axis_splitter .axis_splitter_size div { background-image: url('images/options/button.jpg'); height: 24px; width: 24px; overflow: visible; margin: 12px; margin-left: 42px; }
		.graph_container .axis_splitter .axis_splitter_size .out { border: 1px solid #ffffff; background-position: 0px 0px; }
		.graph_container .axis_splitter .axis_splitter_size .over { border: 1px solid #999999; background-position: 0px -24px; }
		.graph_container .axis_splitter .axis_splitter_size .down { border: 1px solid #999999; background-position: 0px -48px; }
		.graph_container .axis_splitter .axis_splitter_size div div { height: 24px; width: 24px; margin: 0px; background-image: none; }
		.graph_container .axis_splitter .axis_splitter_size div div img { height: 19px; width: 19px; border: 0px; margin-top: 3px; margin-left: 3px; }
		
	/* Graph Menu */
		.graph_menu { width: 200px; position: absolute; border: 1px solid #999999; background-color: #ffffff; z-index: 17; background-image: url('images/options/menu.jpg'); background-position: 0px 0px; background-repeat: repeat-y; }
		.graph_menu .title { display: none; height: 16px; background-color: #dddddd; color: #000000; border-bottom: 1px solid #999999; background-image: url('images/options/title.jpg'); background-position: center center; background-repeat: repeat-x; font-weight: bold; text-align: center; line-height: 16px; }
		.graph_menu .out { margin: 1px; padding: 2px; line-height: 18px; height: 18px; border: 0px; background-color: transparent; }
		.graph_menu .over { margin: 1px; padding: 1px; line-height: 18px; height: 18px; border: 1px solid #bbbbbb; background-color: #f4f4f4; }
		.graph_menu .icon { width: 18px; height: 18px; float: left; margin-right: 4px; }
		.graph_menu .icon img { width: 16px; height: 16px; margin: 1px; border: 0px; }
		.graph_menu .caption { padding: 0px 3px; height: 18px; white-space: nowrap; overflow: hidden; font-family: Verdana; font-size: 10px; }
		.graph_menu .spacer { margin: 1px 3px; margin-left: 27px; background-color: #bbbbbb; height: 1px; overflow: hidden; }
		.graph_menu .disabled { margin: 1px; padding: 2px; line-height: 18px; height: 18px; border: 0px; background-color: transparent; }
		.graph_menu .disabled .caption { color: #cccccc; }
		.graph_menu .disabled img { alpha: .20; -moz-opacity: .20; -khtml-opacity: .20; opacity: .20; filter: alpha(opacity=20); }
		
	/* Graph Options Window */
		.graph_window { display: none; width: 320px; height: 195px; position: absolute; border: 1px solid #999999; background-color: #ffffff; z-index: 17; }
		.graph_window .title { height: 16px; background-color: #dddddd; color: #000000; border-bottom: 1px solid #999999; background-image: url('images/options/title.jpg'); background-position: center center; background-repeat: repeat-x; font-weight: bold; line-height: 16px; }
		.graph_window .title .close { height: 16px; width: 16px; float: right; }
		.graph_window .title .close div { height: 16px; width: 16px; overflow: hidden; background-image: url('images/window/close.gif'); background-repeat: no-repeat; }
		.graph_window .title .close .out { background-position: 0px 0px; }
		.graph_window .title .close .over { background-position: 0px -16px; }
		.graph_window .title .caption { line-height: 16px; font-weight: bold; padding-left: 3px; }
		.graph_window .title .grabber { width: 10px; float: left; height: 16px; background-image: url('images/window/grabber.gif'); background-position: top left; background-repeat: no-repeat; overflow: hidden; margin-right: 3px; }
		.graph_window .area { height: 127px; overflow: auto; }
		.graph_window .area div { padding: 2px 5px; line-height: 20px; }
		.graph_window .area .goptions { width: 100%; }
		.graph_window .area .goptions .caption { width: 100px; }
		.graph_window .area .goptions .data { text-align: right; }
		.graph_window .area .goptions .data .input { border: 1px solid #999999; padding: 1px; margin: 0px; color: #000000; width: 190px; }
		.graph_window .area .plots_list { padding: 2px 0px; margin-bottom: 5px; padding-bottom: 7px; border-bottom: 1px solid #999999; }
		.graph_window .area .plots_list select { float: right; border: 1px solid #999999; padding: 1px; margin: 0px; color: #000000; width: 190px; }
		.graph_window .area .plots_list option { padding: 1px; color: #000000; }
		.graph_window .area .plot_data { width: 100%; }
		.graph_window .area .plot_data td { padding: 2px 0px; }
		.graph_window .area .plot_data .caption { width: 100px; }
		.graph_window .area .plot_data .data { text-align: right; }
		.graph_window .area .plot_data .data input { border: 1px solid #999999; padding: 1px; margin: 0px; color: #000000; width: 190px; }
		.graph_window .area .plot_data .data .thecolor { width: 13px; margin: 2px; margin-right: 19px; text-align: center; }
		.graph_window .area .plot_data .data .color { width: 40px; margin: 2px; text-align: center; }
		.graph_window .area .plot_data .data .red { background-color: #ffdddd; }
		.graph_window .area .plot_data .data .green { background-color: #ddffdd; }
		.graph_window .area .plot_data .data .blue { background-color: #ddddff; margin-right: 0px;}
		.graph_window .area .plot_data .data .type { float: right; border: 1px solid #999999; padding: 1px; margin: 0px; color: #000000; width: 100px; }
		.graph_window .area .plot_data .data .type option { padding: 1px; color: #000000; }
		.graph_window .area .notes { padding: 5px; text-align: center; color: #999999; }
		.graph_window .buttons { padding: 0px 3px; height: 30px; border-bottom: 1px solid #999999; overflow: hidden; text-align: right; }
		.graph_window .buttons button { margin: 4px 1px; text-align: center; padding: 2px; border: 1px solid #999999; width: 60px; background-image: url('images/options/button.gif'); background-repeat: repeat-x; }
		.graph_window .buttons .out { background-position: 0px 0px; }
		.graph_window .buttons .over { background-position: 0px -18px; }
		.graph_window .buttons .down { background-position: 0px -36px; }
		.graph_window .tabs { height: 20px; background-image: url('images/window/tab.background.jpg'); background-repeat: repeat-x; }
		.graph_window .tabs .resize { display: none; height: 20px; width: 20px; float: right; background-image: url('images/window/resize.gif'); background-position: center center; background-repeat: no-repeat; }
		.graph_window .tabs .out { width: 46px; text-align: center; float: left; margin: 0px 1px; line-height: 16px; height: 16px; overflow: hidden; position: relative; top: -1px; border: 0px; padding: 2px; background-color: transparent; }
		.graph_window .tabs .over { width: 46px; text-align: center; float: left; margin: 0px 1px; line-height: 16px; height: 16px; overflow: hidden; position: relative; top: -1px; background-image: url('images/window/tab.over.gif'); background-position: center center; background-repeat: repeat-x; border: 1px solid #888888; padding: 1px; }
		.graph_window .tabs .selected { width: 46px; text-align: center; float: left; margin: 0px 1px; line-height: 16px; height: 16px; overflow: hidden; position: relative; top: -1px; background-image: url('images/window/tab.selected.gif'); background-position: center center; background-repeat: repeat-x; border: 1px solid #888888; border-top: 1px solid #ffffff; padding: 1px; }

	/* Graph Options Window */
		.graph_about { display: none; width: 320px; height: 155px; position: absolute; border: 1px solid #999999; background-color: #ffffff; z-index: 15; }
		.graph_about .text_area { height: 120px; padding: 5px; }
		.graph_about .text_area a { color: #0000cc; text-decoration: none; font-weight: bold; cursor: pointer; }
		.graph_about .text_area a:hover { color: #3333ff; text-decoration: none; font-weight: bold; cursor: pointer; }
		.graph_about .image { background-color: #dddddd; height: 100%; width: 60px; float: left; background-image: url('images/about/pie.chart.gif'); background-position: 5px 5px; background-repeat: no-repeat; margin-right: 5px; }
		.graph_about .ok_area { text-align: center; }
		.graph_about .ok_area button { background-image: url('images/about/button.background.jpg'); background-repeat: repeat-x; margin: 0px; padding: 2px; width: 60px; border: 1px solid #999999; background-color: #ffffff; }
		
	/* Canvas Area */
		.graph_container .canvas_area { position: absolute; top: 20px; right: 0px; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; overflow: hidden; }
		.graph_container .noborder { border-bottom: 1px transparent !important; border-left: 1px transparent !important; }
		.graph_container .canvas_area canvas { overflow: hidden; position: relative; top: 1px; left: -1px; display: block; visibility: visible; width: 400px; height: 300px; }
		.graph_container .canvas_area canvas * { antialias: true; display: block; visibility: visible; }
		
	/* Zoom Selection */
		.zoom_selection { position: absolute; background-color: #3a6ea5; alpha: .20; -moz-opacity: .20; -khtml-opacity: .20; opacity: .20; filter: alpha(opacity=20); z-index: 10; overflow: hidden; }
		
	/* Hint */
		.hint_marker { white-space: nowrap; font-family: Helvetica, sans-serif; font-size: 10px; display: none; position: absolute; top: 0px; left: 0px; alpha: .70; -moz-opacity: .70; -khtml-opacity: .70; opacity: .70; filter: alpha(opacity=70); z-index: 8; border: 1px solid #999999; background-color: #ffffff; padding: 3px; text-align: left; }
		.hint_marker * { font-family: Helvetica, sans-serif; font-size: 10px; }
		.hint_marker img.off { display: none; }
		.hint_marker img.out { display: block; position: absolute; top: 0px; right: 0px; width: 16px; height: 16px; background: url("images/window/close.gif") no-repeat 0px -16px; } 
		.hint_marker img.over { display: block; position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; background: url("images/window/close.gif") no-repeat 16px 0px; } 
		.hint_marker .label { font-weight: bold; font-size: 11px; }
		.hint_pointer { display: none; position: absolute; top: 0px; left: 0px; z-index: 9; height: 12px; width: 12px; overflow: hidden; }
		.hint_pointer div { height: 12px; width: 12px; overflow: hidden; }
		.hint_pointer .tl { background-image: url('images/hint/pointer_tl.gif'); }
		.hint_pointer .tr { background-image: url('images/hint/pointer_tr.gif'); }
		.hint_pointer .bl { background-image: url('images/hint/pointer_bl.gif'); }
		.hint_pointer .br { background-image: url('images/hint/pointer_br.gif'); }

/* JHM: 2007-04-18 - Added graph_info and modified all status styles to be variable width, no gradient background
                     and modified colors */
	/* Progress Bar */
		.graph_progress { display: none; position: absolute; top: 0px; right: 0px; width: 1px; height: 18px; background-color: #77B3D6; color: #3B5768; border: 1px solid #5A869F; line-height: 18px; text-align: center; padding: 0px 2px; }
		.graph_progress span { white-space: nowrap; }
		.graph_nodata { display: none; position: absolute; top: 0px; right: 0px; width: 1px; height: 18px; background-color: #FFFFFF; color: #000000; border: 1px solid #000000; line-height: 18px; text-align: center; padding: 0px 2px; }
		.graph_nodata span { white-space: nowrap; }
		.graph_error { display: none; position: absolute; top: 0px; right: 0px; width: 1px; height: 18px; background-color: #DA2424; color: #ffffff; border: 1px solid #000000; line-height: 18px; text-align: center; padding: 0px 2px; }
		.graph_error span { white-space: nowrap; }
		.graph_info { display: none; position: absolute; top: 0px; right: 0px; width: 1px; height: 18px; background-color: #FFFFE1; color: #000000; border: 1px solid #000000; line-height: 18px; text-align: center; padding: 0px 2px;}
		.graph_info span { white-space: nowrap; }

	/* Crosshairs */
		.x_crosshair { width: 1px; height: 1px; background-color: red; overflow: hidden !important; position: absolute; display: none; alpha: .50; -moz-opacity: .50; -khtml-opacity: .50; opacity: .50; filter: alpha(opacity=50); }
		.y_crosshair { width: 1px; height: 1px; background-color: red; overflow: hidden !important; position: absolute; display: none; alpha: .50; -moz-opacity: .50; -khtml-opacity: .50; opacity: .50; filter: alpha(opacity=50); }
	
	/* Legend */
		.legend_container { position: absolute; z-index: 16; cursor: crosshair; }
		.legend_blocker { position: absolute; top: 19px; right: 19px; height: 99px; width: 182px; z-index: 14; alpha: .0; -moz-opacity: .0; -khtml-opacity: .0; opacity: .0; filter: alpha(opacity=0); }
		.legend { position: absolute; top: 40px; right: 20px; height: 114px; width: 180px; background-color: #ffffff; border: 1px solid #aaaaaa; alpha: .90; -moz-opacity: .90; -khtml-opacity: .90; opacity: .90; filter: alpha(opacity=90); z-index: 14; overflow: hidden; }
		.legend * { alpha: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; filter: alpha(opacity=100); }
		.legend .caption { padding-left: 3px; background-color: #eeeeee; background-image: url('images/options/title.jpg'); background-position: center center; background-repeat: repeat-x; border-bottom: 1px solid #aaaaaa; height: 16px; line-height: 16px; font-weight: bold; text-align: left; overflow: hidden; }
		.legend .caption .close { height: 16px; width: 16px; float: right; }
		.legend .caption .close div { height: 16px; width: 16px; overflow: hidden; background-image: url('images/window/close.gif'); background-repeat: no-repeat; }
		.legend .caption .close .out { background-position: 0px 0px; }
		.legend .caption .close .over { background-position: 0px -16px; }
		.legend .caption .minimize { height: 16px; width: 16px; float: right; }
		.legend .caption .minimize div { height: 16px; width: 16px; overflow: hidden; background-image: url('images/window/minimize.gif'); background-repeat: no-repeat; }
		.legend .caption .minimize .out { background-position: 0px 0px; }
		.legend .caption .minimize .over { background-position: 0px -16px; }
		.legend .caption .maximize { display: none; height: 16px; width: 16px; float: right; }
		.legend .caption .maximize div { height: 16px; width: 16px; overflow: hidden; background-image: url('images/window/maximize.gif'); background-repeat: no-repeat; }
		.legend .caption .maximize .out { background-position: 0px 0px; }
		.legend .caption .maximize .over { background-position: 0px -16px; }
		.legend .caption .grabber { width: 10px; height: 16px; float: left; overflow: hidden; background-image: url('images/window/grabber.gif'); background-position: -3px -1px; background-repeat: no-repeat; }
		.legend .owner { background-image: url('images/window/tab.background.jpg'); background-position: center center; background-repeat: repeat-x; height: 14px; line-height: 14px; background-color: #f4f4f4; text-align: left; border-top: 1px solid #aaaaaa; overflow: hidden; padding: 0px 3px; }
		.legend .owner .icon { background-image: url('images/legend/chart.gif'); height: 14px; width: 14px; float: left; }
		.legend .data { height: 80px; padding: 0px; overflow: auto; padding: 1px; }
		.legend .data .hidden { display: none; }
		.legend .data .plot .out { display: block; height: 16px; line-height: 16px; background-image: none; text-decoration: none; background-color: #ffffff; padding: 2px 3px; margin: 0px; border: 0px; }
		.legend .data .plot .over { display: block; height: 16px; line-height: 16px; background-image: url('images/options/plot.gif'); background-position: center center; background-repeat: repeat-x; text-decoration: none; background-color: #eeeeee; padding: 1px 2px; margin: 0px; border: 1px solid #aaaaaa; }
		.legend .data .plot .icon { border: 0px; height: 16px; width: 16px; float: left; margin-right: 4px; }
		.legend .data .plot .icon img { height: 16px; width: 16px; border: 0px; }
		.legend .data .plot .plotcaption { line-height: 16px; text-decoration: none; background-image: none; border-bottom: 0px; font-weight: normal; text-align: left; overflow: hidden; height: 18px; white-space: nowrap; }
		.legend .data .plot .visibility { height: 16px; width: 16px; margin-left: 4px; float: right; overflow: hidden; }
		.legend .data .plot .visibility div { cursor: pointer; height: 16px; width: 16px; overflow: hidden; background-image: url('images/legend/visibility.gif'); background-repeat: no-repeat; }
		.legend .data .plot .visibility .on { background-position: 0px 0px; }
		.legend .data .plot .visibility .off { background-position: -16px 0px; }
		
		.legend .data .tree { height: auto; }
		.legend .data .tree .treeItems { margin-left: 32px; margin-right: 4px; }
		.legend .data .tree .hidden { display: none; }
		.legend .data .tree .treeItems .treeItem { height: 16px; line-height: 16px; overflow: hidden; white-space: nowrap; 
			text-decoration: none; display: block; cursor: pointer; }
		.legend .data .tree .treeItems .treeItem:hover { font-weight: bold; }
		
	/* Canvas Cover */
		.key_grabber{ position: absolute; top: 0px; left: 0px; height: 1px; width: 1px; overflow: hidden; display: block; }
		.canvas_cover { border: none; outline: none; cursor: crosshair; position: absolute; top: 20px; right: 0px; background-color: #3a6ea5; alpha: .0; -moz-opacity: .0; -khtml-opacity: .0; opacity: .0; filter: alpha(opacity=0); z-index: 11; }
		.canvas_cover:active { border: none; outline: none; }
		
	/* Console */
		#console { height: 100%; padding: 2px 4px; position: absolute; top: 0px; bottom: 0px; right: 0px; width: 400px; overflow: auto; border: 1px solid #000000; background-color: #cccccc; alpha: .40; -moz-opacity: .40; -khtml-opacity: .40; opacity: .40; filter: alpha(opacity=40); }
		
		.clearboth { clear: both; }
		.displaynone { display: none; }
		
/* JHM: 2008-01-11 - Added to correct issues with IE printing */		
@media print {
	.canvas_cover { display: none !important; }
}