src/UIHandler/BrowserGUI/main.css

/* ************************************** OFFICIAL PART ******************************************** */
/* ================================================================================================= */
/* The page blocks */
/*-----------------*/
/*
	<MAIN_HOLDER> : This is the main holder of full page. All other blocks are inside.
		<HEADER></HEADER> : This is the header logo, title and the right "Print" button
		<PRINT_SUBTITLE></PRINT_SUBTITLE> : Its working only on printed pages show the full path of the main data block
		<MAIN_BLOCK> : This is the main data block

			<HBOX> ... </HBOX> : Horizontal HBOX: like table cells

			or

			<TABPAGE> : TABPAGE block with horizontal tab menu
				<TABS_MENU></TABS_MENU> : horozontal tab menu
				<TABS_DATA>...</TABS_DATA> : TAB data display block
			</TABPAGE>

			or

			<TABLE class=VERT> : TABPAGE block with vertical tab menu
				<TD class=MENU><VERT_MENU></VERT_MENU></TD> : vertical tab menu
				<TD class=DATA><VERT_DATA>...</VERT_DATA></TD> : TAB data display block
			</TABLE>

		</MAIN_BLOCK>
	</MAIN_HOLDER>
*/
/* ================================================================================================= */
/* COMMON SETTINGS */
/*-----------------*/
/* HTML: Its effects on the all HTML page, except the box-sizing items */
HTML {
	MARGIN: 0px;
	PADDING: 0px;
	FONT-FAMILY: arial, helvetica, verdana, lucida, sans-serif;
	FONT-SIZE: 12px;
	FONT-WEIGHT: normal;
	LINE-HEIGHT: normal;
	COLOR: #666666;
	BACKGROUND-COLOR: #FFFFFF;
	HEIGHT: 100%;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* BODY: It effects on all BODY elements */
BODY {
	MARGIN: 0px;
	PADDING: 0px;
	PADDING-right: 10px;
	BACKGROUND: none transparent scroll repeat 0% 0%;
	HEIGHT: 100%;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* This indicates some print settings - now nothing */
@media print {
 body {
 }
}

/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
	img:-moz-broken{
	-moz-force-broken-image-icon:1;
	}
}

/* ------------------------------------------------------------------- */
/* BASE TAGS { */

/* IMG: common settings for all image elements */
IMG {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* P: common settings for all paragraph elements */
P {
	MARGIN: 0px;
	PADDING: 0px;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* FORM: common settings for all form elements */
FORM {
	MARGIN: 0px;
	PADDING: 0px;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* LABEL: common settings for all LABEL elements */
LABEL {
	MARGIN: 0px;
	PADDING: 0px;
	TEXT-ALIGN: left;
	FONT-WEIGHT: bold;
	FONT-SIZE: 13px;
	HEIGHT: 18px;
	LINE-HEIGHT: 18px;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* INPUT: common settings for all INPUT elements */
INPUT {
	MARGIN: 0px;
	PADDING: 0px;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
	BACKGROUND-COLOR: #FFFFFF;
}

/* SELECT: common settings for all SELECT elements */
SELECT {
	MARGIN: 1px;
	PADDING: 0px;
	PADDING-TOP: 2px;
	PADDING-BOTTOM: 2px;
	BORDER: #666666 1px solid;
	COLOR: #000000;
	BACKGROUND-COLOR: #FFFFFF;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* TEXTAREA: common settings for all TEXTAREA elements */
TEXTAREA {
	COLOR: #666666;
	BACKGROUND-COLOR: #FFFFFF;
	line-height:18px;
	HEIGHT: 100%;
	WIDTH: 100%;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* BUTTON: common settings for all BUTTON elements */
BUTTON {
	MARGIN: 0px;
	MARGIN-RIGHT: 10px;
	PADDING: 0px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	FONT-SIZE: 13px;
	COLOR: #F0F0F0;
	FLOAT: left;
	OVERFLOW: hidden;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: baseline;
	white-space:nowrap;
	DISPLAY: inline-block;
	LINE-HEIGHT: 28px;
	HEIGHT: 28px;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* BUTTON IMG: common settings for all Images on BUTTON elements */
BUTTON IMG {
	MARGIN: 0px;
	PADDING: 0px;
	MARGIN-LEFT: 10px;
	BORDER: 0;
	TEXT-ALIGN: right;
	VERTICAL-ALIGN: text-bottom;
}

/* UL: common settings for all Unnumbered List items */
UL {
	MARGIN: 0px;
	PADDING: 0px;
	LIST-STYLE-TYPE: none;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* LI: common settings for all List elements */
LI {
	MARGIN: 0px;
	PADDING: 0px;
	LIST-STYLE-IMAGE: none! important;
	FLOAT: left;
	TEXT-INDENT: 0px;
	DISPLAY: inline-block;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* DIV: common settings for all DIV blocks */
DIV {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	TEXT-ALIGN: left;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* This indicates some print settings on DIV blocks */
@media print {
 DIV {
	border: 0 !important;
	width: 100%;
	margin: 0;
	float: none;
 }
}

/* SPAN: common settings for all SPAN items */
SPAN {
	FONT-SIZE: 12px;
}


/* A: common settings for all ANCHOR items */
A:link {
	COLOR: #F0F0F0;
	TEXT-DECORATION: none;
}

A:hover {
	TEXT-DECORATION: underline;
}

A:visited {
	TEXT-DECORATION: none;
}

/* HR: common settings for all Horisontal Rule items */
HR {
	BACKGROUND-COLOR: #b3b3b3;
}

/* TABLE: common settings for all TABLE */
TABLE {
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* TD: common settings for all TABLE cells */
TD {
	MARGIN: 0px;
	PADDING: 3px;
	BACKGROUND-COLOR: #FFFFFF;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: middle;
	BORDER-left: #eaeaea 1px solid;
	BORDER-right: #eaeaea 1px dashed;
	BORDER-top: #eaeaea 1px dashed;
	BORDER-BOTTOM: #eaeaea 1px solid;
	box-sizing: border-box;         /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-ms-box-sizing: border-box;     /* IE 8 */
}

/* This indicates some print settings on TABLE blocks */
@media print {
 TABLE {
	border: 0 !important;
	width: 100%;
	margin: 0;
	float: none;
 }
}

/* This indicates some print settings on TABLE cell blocks */
@media print {
 TD {
	border: 0 !important;
	margin: 0;
	float: none;
 }
}

/* } BASE TAGS */

DIV.custom-context-menu {
	float: none;
	display: block;
	z-index: 1000;
	position: absolute;
	background-color: #C0C0C0;
	border: 1px solid black;
	padding: 2px;
}

/* Each of the items in the list */
DIV.custom-context-menu  LI {
	float: none;
	display: block;
	padding: 8px 12px;
	cursor: pointer;
	list-style-type: none;
	transition: all .3s ease;
}

DIV.custom-context-menu LI:hover {
	background-color: #DDEEFF;
}
/* ================================================================================================= */
/* PAGE HOLDER { */
/*--------------*/
/* This is the page holder of full page. All other blocks are inside and its always 100%. */
DIV.page_holder {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	WIDTH: 100%;
}

/* This indicates some print settings on page_holder: now nothing */
@media print {
	DIV.page_holder {
	WIDTH: 100%;
	}
}
/* } PAGE HOLDER */

/* ================================================================================================= */
/* MAIN HOLDER { */
/*--------------*/
/* This is the main holder of full page. All other blocks are inside. */
DIV.main_holder {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	WIDTH: 100%;
}

/* This indicates some print settings on main_holder: specify fix width for example */
@media print {
	DIV.main_holder {
	WIDTH: 100%;
/*    WIDTH: 16cm; */
	}
}
/* } MAIN HOLDER */

/* ================================================================================================= */
/* HEADER { */
/* This is the header logo, title and the right "Print" button */
/*----------*/
DIV.header {
	PADDING-LEFT: 8px;
	PADDING-TOP: 6px;
	PADDING-BOTTOM: 6px;
	POSITION: relative;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
	white-space:nowrap;
	WIDTH: 100%;
}

/* Header TABLE  { */
/*-----------------*/
DIV.header TABLE.header {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	width: 100%;
	table-layout: fixed;
}

/* Header TABLE cells  */
/*---------------------*/
/* Header: logo cell */
DIV.header TABLE.header TD.logo {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	WIDTH: 50px;
}
/* Header: title cell */
DIV.header TABLE.header TD.title {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
}
/* Header: "Print" button cell */
DIV.header TABLE.header TD.print {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	VERTICAL-ALIGN: top;
	TEXT-ALIGN: right;
}

/* Header Link styles  */
/*----------------------*/
/* Title header link */
DIV.header A {
	DISPLAY: inline-block;
	COLOR: #00285f;
	FONT-SIZE: 18px;
	FONT-WEIGHT: bold;
}
/* Logo image link */
DIV.header A.logo IMG.logoImage {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0px;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
}
/* "Print" button link */
DIV.header A.print {
	COLOR: #666666;
	MARGIN: 0px;
	PADDING: 0px;
	FONT-SIZE: 13px;
	border: 0;
}

/* Maximize button holder */
DIV.full_size {
	MARGIN-LEFT: 10px;
	PADDING: 0px;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
	WIDTH: 24px;
	HEIGHT: 16px;
	display: none;
	FLOAT: right;
}

/* Restore button holder */
DIV.orig_size {
	MARGIN-LEFT: 10px;
	PADDING: 0px;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: top;
	WIDTH: 24px;
	HEIGHT: 16px;
	display: none;
	FLOAT: right;
}

/* print | full | restore menu LIst */
UL.print_button, UL.print_button LI {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	HEIGHT: 16px;
	LINE-HEIGHT: 16px;
 }

/* print | full | restore LIst element */
UL.print_button LI {
	MARGIN-RIGHT: 5px;
}

UL.print_button LI A IMG:hover {
	opacity:0.5;
}


/* PRINT Block */
DIV.print {
	TEXT-ALIGN: right;
	FLOAT: right;
}

/* This indicates some print settings on HEADER: no print the "Print" button */
@media print {
	DIV.print {
	display: none;
	}
}

/* } HEADER */

/* ================================================================================================= */
/* PRINT_SUBTITLE { */
/*------------------*/
/* Its working only on printed pages show the full path of the main data block */
DIV.print_subtitle {
	PADDING-LEFT: 6px;
	PADDING-TOP: 6px;
	PADDING-BOTTOM: 6px;
	POSITION: relative;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: middle;
	WIDTH: 100%;
	DISPLAY: none;
}

/* Printed subtitle paragraph */
DIV.print_subtitle P {
	LINE-HEIGHT: 20px;
	COLOR: #666666;
	FONT-SIZE: 14px;
	FONT-WEIGHT: bold;
}

/* This indicates some print settings: show only on printed pages */
@media print {
	DIV.print_subtitle {
	display: block;
	}
}

/* } PRINT_SUBTITLE */

/* ================================================================================================= */
/* MAIN BLOCK { */
/*--------------*/
/* This is the main data block
 <DIV.MAIN_HOLDER> =  <DIV.HEADER>
	<DIV.MAIN_BLOCK>
 */
DIV.main_block {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	WIDTH: 100%;
}
/* } MAIN BLOCK */


/* ================================================================================================= */
/* HBOX Block { */
/*-------------*/
/* Horizontal HBOX: like table cells */
DIV.hbox_hor {
	PADDING: 3px;
	FLOAT: left;
	display: table-cell;
}

/* Vertical HBOX: like table, with full available width */
DIV.hbox_vert {
	PADDING: 3px;
	clear:both;
	overflow: hidden;
	display: table;
	width: 100%;
}

/* Its the controll block (status and button bar) in some cases */
DIV #hbox_UIHandler_widgetId_2{
	width: 99%;
}

/* Chart and Distibutionchart HBOX: fix width */
/* ------------------------------------------ */
DIV.hbox_chart, DIV.hbox_distributionchart {
	MARGIN-TOP: 2px;
	MARGIN-BOTTOM: 2px;
	PADDING-left: 2px;
	PADDING-right: 2px;
	TEXT-ALIGN: center;
	vertical-align: top;
	FLOAT: left;
	display: table-cell;
	height: 400px;
	width: 100%;
}

/* Chart and Distibutionchart HBOX: Loading IMAGE style */
DIV.hbox_chart IMG, DIV.hbox_distributionchart IMG {
	MARGIN: 0;
	MARGIN-TOP: 150px;
	PADDING: 0;
	BORDER: 0;
	width: 100px;
	height: 100px;
}

/* DISTRIBUTIONCHART INTERVALLIMITS item */
select.intervallimits {
	VISIBILITY: hidden;
	overflow: hidden;
	WIDTH: 0px;
	HEIGHT: 0px;
}

/* Label Title in HBOX vertical: full available width */
/* -------------------------------------------------- */
DIV.label_title {
	MARGIN-TOP: 3px;
	MARGIN-bottom: 3px;
	PADDING: 3px;
	PADDING-left: 5px;
	BORDER-bottom: #eaeaea 1px solid;
	TEXT-ALIGN: left;
	clear:both;
	width: 100%;
	height: 34px;
	LINE-HEIGHT: 34px;
	VERTICAL-ALIGN: middle;
	overflow: hidden;
}

/* Label on HBOX horizontal own text width */
/* --------------------------------------- */
DIV.label {
	PADDING-RIGHT: 8px;
	TEXT-ALIGN: right;
	VERTICAL-ALIGN: middle;
	FLOAT: left;
	height: 22px;
	LINE-HEIGHT: 22px;
	overflow: hidden;
	DISPLAY: table-cell;
}
/* disabled label */
DIV.label_disabled {
	COLOR: #666666;
}

/* Updatable LABEL */
input.label_textbox {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	TEXT-ALIGN: left;
	FONT-WEIGHT: bold;
	HEIGHT: 18px;
	LINE-HEIGHT: 18px;
	COLOR: #666666;
	BACKGROUND-COLOR: #FFFFFF;
	WIDTH: 100%;
}

/* TEXTBOX on a HBOX block */
/* ----------------------- */
DIV.textbox_holder {
	BORDER: 0;
	TEXT-ALIGN: left;
}
/* Input on a TEXTBOX_HOLDER */
DIV.textbox_holder > input {
	WIDTH: 100%;
}

/* Read only input | textarea data */
.textbox_read {
	MARGIN: 0px;
	PADDING: 3px;
	BORDER: #666666 1px solid;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	BACKGROUND-COLOR: #eaeaea;
	COLOR: #666666;
}

/* Updatable input | textarea data */
.textbox_editable{
	MARGIN: 0px;
	PADDING: 3px;
	BORDER: #666666 1px solid;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	BACKGROUND-COLOR: #FFFFFF;
	COLOR: #000000;
}


/* BUTTON -------------------------------- */
/* --------------------------------------- */
/* Button block */
DIV.button {
	PADDING-TOP: 2px;
	PADDING-BOTTOM: 10px;
	PADDING-RIGHT: 10px;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: center;
	HEIGHT: 32px;
	OVERFLOW: hidden;
	FLOAT: left;
}

/* Button horizontal block */
DIV.button_hor {
	DISPLAY: table-cell;
}

/* This indicates some print settings - no print */
@media print {
 DIV.button {
	DISPLAY: none;
 }
}

/* Button on a horizontal button block */
DIV.button_hor BUTTON {
	WIDTH: 100%;
}

/* Button on a vertical tree */
TABLE.tree_vert TD BUTTON {
	WIDTH: 100%;
}

/* Blue | Grey Button SPAN */
SPAN.blueButton, SPAN.greyButton {
}

/* Blue | Grey BUTTON */
SPAN.blueButton BUTTON {
	BACKGROUND-COLOR: #144981;
	BACKGROUND: url(button_blue_back.png) repeat top left;
	BORDER-LEFT: #8D8D8D 1px solid;
	BORDER-RIGHT: #777777 1px solid;
	BORDER-TOP: #BFBFBF 1px solid;
	BORDER-BOTTOM: #000000 1px solid;
}
SPAN.greyButton BUTTON {
	BACKGROUND-COLOR: #68737E;
	BACKGROUND: url(button_grey_back.png) repeat left top;
	BORDER-LEFT: #808080 1px solid;
	BORDER-RIGHT: #7C7C7C 1px solid;
	BORDER-TOP: #8A8A8A 1px solid;
	BORDER-BOTTOM: #646464 1px solid;
}
SPAN.blueButton BUTTON, SPAN.greyButton BUTTON {
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
}

SPAN.blueButton BUTTON:hover {
	BACKGROUND-COLOR: #0469A9;
	BACKGROUND: url(button_blue_back.png) repeat top left;
}
SPAN.greyButton:hover BUTTON {
	BACKGROUND-COLOR: #657885;
	BACKGROUND: url(button_grey_back.png) repeat top left;
}
SPAN.blueButton BUTTON:hover, SPAN.greyButton:hover BUTTON {
	BACKGROUND-POSITION: left -31px;
	CURSOR: pointer;
}

/* } HBOX Block */


/* ================================================================================================= */
/* TABPAGE Block { */
/*-----------------*/

/* TABPAGE block: full width */
DIV.tabpage {
	PADDING: 3px;
	BORDER: #eaeaea 1px dotted;
	BACKGROUND-COLOR: #FFFFFF;
	WIDTH: 100%;
}

/* } TABPAGE Block */


/* ================================================================================================= */
/* TABS_MENU Block { */
/*------------------*/

/* TAB MENU BLOCK: horozontal tab menu */
DIV.tabs_menu {
	MARGIN-TOP: 0px;
	MARGIN-BOTTOM: 0px;
	PADDING-LEFT: 5px;
	LEFT: 0px;
	clear:both;
}

/* This indicates some print settings: no print on menu */
@media print {
	DIV.tabs_menu {
	display: none;
	}
}

/* horozontal tab menu LIst */
UL.tabs_menu {
	HEIGHT: 34px;
	LINE-HEIGHT: 34px;
	BORDER-BOTTOM: #666 1px solid;
	width: 100%;
}

/* horozontal tab menu LIst element */
UL.tabs_menu LI {
	MARGIN-RIGHT: 2px;
	MARGIN-TOP: 2px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	HEIGHT: 32px;
	LINE-HEIGHT: 32px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: #666 1px solid;
	BORDER-TOP: #666 1px solid;
	BORDER-BOTTOM: #666 1px solid;
}

/* selected horozontal tab menu LIst element */
UL.tabs_menu LI.tabpage_selected{
	BORDER-BOTTOM: #FFFFFF 1px solid;
}

/* horozontal tab menu LIst element LINK */
UL.tabs_menu A {
	MARGIN-TOP: 2px;
	MARGIN-LEFT: 2px;
	MARGIN-RIGHT: 2px;
	MARGIN-BOTTOM: 2px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 0px;
	PADDING-BOTTOM: 0px;
	DISPLAY: inline-block;
	TEXT-TRANSFORM: none;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	COLOR: #333;
	BACKGROUND: url(blue_back.png) repeat top left;
	BACKGROUND-COLOR: #C3C9D5;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: top;
	TEXT-DECORATION: none;
	LINE-HEIGHT: 26px;
	HEIGHT: 26px;
}
UL.tabs_menu LI A:active, UL.tabs_menu LI A:visited, UL.tabs_menu LI A:focus {
	TEXT-DECORATION: none;
}
UL.tabs_menu A:hover {
	BACKGROUND-COLOR: #4E648E;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -31px;
	COLOR: #fff;
	TEXT-DECORATION: none;
}

/* horozontal tab selected menu LIst element LINK */
UL.tabs_menu LI.tabpage_selected A{
	BACKGROUND-COLOR: #F2F2F2;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -62px;
	COLOR: #000;
	TEXT-DECORATION: none;
}
UL.tabs_menu LI.tabpage_selected A:hover{
	BACKGROUND-COLOR: #4E648E;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -31px ;
	COLOR: #fff;
	TEXT-DECORATION: none;
}

/* horozontal tab disabled menu LIst element */
UL.tabs_menu LI.menu_disabled {
	MARGIN: 0px;
	MARGIN-RIGHT: 2px;
	MARGIN-TOP: 2px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	PADDING-TOP: 0px;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: #969696 1px solid;
	BORDER-RIGHT: #969696 1px solid;
	BORDER-TOP: #969696 1px solid;
	BORDER-BOTTOM: 0px;
	BORDER-BOTTOM: #969696 1px solid;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
}

/* horozontal tab disabled menu LIst element SPAN */
UL.tabs_menu LI.menu_disabled SPAN {
	MARGIN: 0px;
	MARGIN-TOP: 2px;
	MARGIN-LEFT: 2px;
	MARGIN-RIGHT: 2px;
	MARGIN-BOTTOM: 2px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 0px;
	PADDING-BOTTOM: 0px;
	DISPLAY: inline-block;
	TEXT-TRANSFORM: none;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	BACKGROUND-COLOR: #eaeaea;
	COLOR: #666666;
	TEXT-ALIGN: center;
	vertical-align:top;
	TEXT-DECORATION: none;
	LINE-HEIGHT: 26px;
	HEIGHT: 26px;
}
/* } TABS_MENU Block */


/* ================================================================================================= */
/* HIDETABS_MENU Block { */
/*------------------*/
/* HIDDEN TAB MENU BLOCK: horozontal tab menu */
DIV.hidetabs_menu, UL.hidetabs_menu, UL.hidetabs_menu LI, UL.hidetabs_menu LI:hover, UL.hidetabs_menu LI.tabpage_selected, UL.hidetabs_menu LI.tabpage_selected:hover {
	VISIBILITY: hidden;
	overflow: hidden;
	WIDTH: 0px;
	HEIGHT: 0px;
}

UL.hidetabs_menu UL A, UL.hidetabs_menu A:hover, UL.hidetabs_menu LI.tabpage_selected A, UL.hidetabs_menu LI.tabpage_selected A:hover {
	VISIBILITY: hidden;
	MARGIN: 0px;
	PADDING: 0px;
	DISPLAY: inline-block;
	TEXT-DECORATION: none;
}

/* } HIDETABS_MENU Block */


/* ================================================================================================= */
/* TABS_DATA Block { */
/*------------------*/

/* TAB data display block */
DIV.tabs_data {
	LEFT: 0px;
	FONT-SIZE: 13px;
	PADDING-LEFT: 5px;
	PADDING-TOP: 5px;
	clear:both;
}

/* If have a tree table on TAB data display block, its width the full available */
DIV.tabs_data > TABLE.tree {
	width: 100%;
}

/* } TABS_DATA Block */


/* ================================================================================================= */
/* TABLE VERT Block { */
/*--------------------*/
/* TABPAGE block with vertical tab menu */
TABLE.vert {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	BORDER-COLLAPSE: collapse;
	BACKGROUND-COLOR: #FFFFFF;
	width: 100%;
	table-layout: fixed;
}

/* TABPAGE block with vertical tab menu table cell */
TABLE.vert TD {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER: 0;
	VERTICAL-ALIGN: top;
	TEXT-ALIGN: left;
}

/* vertical tab menu cell */
TABLE.vert TD.menu {
	width: 10%;
}

/* vertical tab data cell */
TABLE.vert TD.data {
	clear:both;
	width: 90%;
}

/* This indicates some print settings - menu not printing */
@media print {
	TABLE.vert TD.menu {
	width: 2%;
	}
	TABLE.vert TD.data {
	width: 98%;
	}
}

/* } TABLE VERT Block */

/* ================================================================================================= */
/* VERT_MENU Block { */
/*------------------*/

/* vertical menu block */
DIV.vert_menu {
	LEFT: 0px;
	PADDING-right: 0px;
	PADDING-LEFT: 0px;
	PADDING-TOP: 5px;
	BORDER: 0;
	FONT-SIZE: 13px;
	overflow: hidden;
	FLOAT: left;
	white-space:nowrap;
	height: 100%;
	width: 100%;
}

/* This indicates some print settings - menu not printing */
@media print {
	DIV.vert_menu {
	display: none;
	}
}

/* vertical menu list */
DIV.vert_menu UL {
	height: 100%;
	width: 100%;
}

/* vertical menu list item */
DIV.vert_menu UL LI {
	MARGIN-BOTTOM: 6px;
	PADDING-LEFT: 2px;
	PADDING-TOP: 2px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	width: 100%;
	HEIGHT: 31px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: 0px;
	BORDER-TOP: #666 1px solid;
	BORDER-BOTTOM: #666 1px solid;
}

/* selected vertical menu list item */
DIV.vert_menu UL LI.tabpage_selected {
}

/* vertical menu list item link */
DIV.vert_menu UL LI A {
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	DISPLAY: inline-block;
	TEXT-TRANSFORM: none;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	BACKGROUND: url(blue_back.png) repeat top left;
	BACKGROUND-COLOR: #C3C9D5;
	COLOR: #333;
	TEXT-ALIGN: left;
	vertical-align:top;
	TEXT-DECORATION: none;
	width: 100%;
	LINE-HEIGHT: 25px;
	HEIGHT: 25px;
}
DIV.vert_menu UL LI A:hover {
	BACKGROUND-COLOR: #4E648E;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -31px;
	COLOR: #fff;
	TEXT-DECORATION: none;
}

/* selected vertical menu list item link */
DIV.vert_menu UL LI.tabpage_selected A{
	BACKGROUND-COLOR: #F2F2F2;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -62px;
	COLOR: #000;
	TEXT-DECORATION: none;
}
DIV.vert_menu UL LI.tabpage_selected A:hover{
	BACKGROUND-COLOR: #4E648E;
	BACKGROUND: url("blue_back.png") repeat;
	BACKGROUND-POSITION: left -31px ;
	COLOR: #fff;
	TEXT-DECORATION: none;
}

DIV.vert_menu UL LI.A:active, DIV.vert_menu UL LI.A:visited, DIV.vert_menu UL LI.A:focus {
	TEXT-DECORATION: none;
}

/* disabled vertical menu list item link */
UL.vert_menu LI.menu_disabled {
	MARGIN: 0px;
	MARGIN-BOTTOM: 6px;
	PADDING-LEFT: 2px;
	PADDING-RIGHT: 0px;
	PADDING-TOP: 2px;
	PADDING-BOTTOM: 0px;
	FLOAT: left;
	BORDER-LEFT: #969696 1px solid;
	BORDER-RIGHT: 0px;
	BORDER-TOP: #969696 1px solid;
	BORDER-BOTTOM: #969696 1px solid;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	width: 100%;
	HEIGHT: 28px;
}

/* disabled vertical menu list item link SPAN */
UL.vert_menu LI.menu_disabled SPAN {
	MARGIN: 0px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 0px;
	PADDING-BOTTOM: 0px;
	DISPLAY: inline-block;
	TEXT-TRANSFORM: none;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	BACKGROUND-COLOR: #eaeaea;
	COLOR: #666666;
	TEXT-ALIGN: left;
	vertical-align:top;
	TEXT-DECORATION: none;
	width: 100%;
	LINE-HEIGHT: 25px;
	HEIGHT: 25px;
}

/* } VERT_MENU Block */


/* ================================================================================================= */
/* VERT_DATA Block { */
/*-------------------*/

/* Vertical TAB data block */
DIV.vert_data {
	LEFT: 0px;
	PADDING: 5px 3px 0px 5px;
	BORDER-LEFT: #666 1px solid;
	BORDER-right: #666 1px solid;
	BORDER-top: #666 1px solid;
	BORDER-BOTTOM: #666 1px solid;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	FLOAT: left;
	width: 100%;
}

/* } VERT_DATA Block */


/* ================================================================================================= */
/* TREE Block { */
/*-------------*/

/* Tree elements with flex handling in horizontal hbox: next element on the right side - this is the flex holder */
DIV.hbox_td {
	PADDING: 3px;
	BORDER: 0;
	TEXT-ALIGN: left;
	FLOAT: left;
	display: table-cell;
}

/* Horizontal Tree table inside a "hbox_td" */
TABLE.tree_hor {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER-COLLAPSE: collapse;
	BORDER: #666 1px solid;
	float:left;
	table-layout: fixed;
}

/* Horizontal Tree table inside a "hbox_td" cell item */
TABLE.tree_hor TD {
	MARGIN: 0px;
	PADDING: 3px;
	BORDER-COLLAPSE: collapse;
	BORDER: #eaeaea 1px solid;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: middle; }

/* Tree elements with flex handling in vertical hbox: next element under the previous element */
TABLE.tree_vert {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER-COLLAPSE: collapse;
	BORDER: #666 1px solid;
	table-layout: fixed;
	width: 100%;
}

/* Vertical Tree table cell item */
TABLE.tree_vert TD {
	MARGIN: 0px;
	PADDING: 3px;
	BORDER-COLLAPSE: collapse;
	BORDER: #eaeaea 1px solid;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: middle;
}

/* Tree elements without flex handling */
TABLE.tree {
	MARGIN: 0px;
	PADDING: 0px;
	BORDER-COLLAPSE: collapse;
	BORDER: #666 1px solid;
	table-layout: fixed;
}

/* Tree without flex on a vertical HBOX, TABPAGE, MAIN_BLOCK */
DIV.hbox_vert > TABLE.tree, DIV.tabpage > TABLE.tree, DIV.main_block > TABLE.tree {
	width: 100%;
}

/* Tree without flex on a horizontal HBOX, TABPAGE, MAIN_BLOCK */
DIV.hbox_hor > TABLE.tree {
	float:left;
}

/* Tree cell without flex */
TABLE.tree TD {
	MARGIN: 0px;
	PADDING: 3px;
	BORDER-COLLAPSE: collapse;
	BORDER: #eaeaea 1px solid;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: middle;
}

/* } TREE Block */

/* ================================================================================================= */
/* TREECELL DATA Block { */
/*-----------------------*/

/* INPUT treecol */
/* ------------- */
input.treecol {
	MARGIN: 0px;
	PADDING: 3px;
	FONT-SIZE: 13px;
	BORDER: #666666 1px solid;
	BACKGROUND-COLOR:#EAEFF5;
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: middle;
	overflow: hidden;
	WIDTH: 100%;
}

/* INPUT on a table, HBOX horizontal, TEXTBOX_HOLDER */
td > input, DIV.hbox_hor > input {
	WIDTH: 100%;
}

/* ------------------------------------------------------------------------------------------------- */
/* LED Block { */
/*-------------*/

/* INPUT led with text */
input.led_text {
	MARGIN: 0px;
	PADDING: 0px;
	PADDING-left: 3px;
	PADDING-right: 3px;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	BORDER: none;
	width: 100%;
}

/* LED styles */
DIV.led_blue {
	BACKGROUND: #FFFFFF url(led_blue_16x16.png) no-repeat 3px 3px;
}
DIV.led_black {
	BACKGROUND: #FFFFFF url(led_black_16x16.png) no-repeat 3px 3px;
}
DIV.led_red {
	BACKGROUND: #FFFFFF url(led_red_16x16.png) no-repeat 3px 3px;
}
DIV.led_green {
	BACKGROUND: #FFFFFF url(led_green_16x16.png) no-repeat 3px 3px;
}
DIV.led_yellow {
	BACKGROUND: #FFFFFF url(led_yellow_16x16.png) no-repeat 3px 3px;
}
DIV.led_blue IMG, DIV.led_black IMG, DIV.led_red IMG, DIV.led_green IMG, DIV.led_yellow IMG {
	DISPLAY: none;
}
DIV.led_blue, DIV.led_black, DIV.led_red, DIV.led_green, DIV.led_yellow {
	MARGIN: 1px;
	MARGIN-left: 3px;
	MARGIN-right: 3px;
	PADDING: 1px 1px 2px 22px;
	DISPLAY: block;
	VERTICAL-ALIGN: middle;
	TEXT-ALIGN: left;
	COLOR: #000000;
	BORDER: #F0F0F0 1px solid;
}

/* This indicates some print settings - display led images on printed page */
@media print {
	DIV.led_blue, DIV.led_black, DIV.led_red, DIV.led_green, DIV.led_yellow {
	PADDING: 3px 3px 2px 2px;
	BACKGROUND:0;
	}

	DIV.led_blue IMG, DIV.led_black IMG, DIV.led_red IMG, DIV.led_green IMG, DIV.led_yellow IMG {
	DISPLAY: inline;
	}
}
/* } LED Block */

/* ------------------------------------------------------------------------------------------------- */
/* NUMERICAL WIDGET Block { */
/* ------------------------ */
/* Up | Down button SPAN */
SPAN.upButton, SPAN.downButton {
}

/* Up | Down button SPAN Link */
SPAN.upButton A {
	BACKGROUND: url(uparrow.png) no-repeat top left;
}
SPAN.downButton A {
	BACKGROUND: url(downarrow.png) no-repeat top left;
}
SPAN.upButton A, SPAN.downButton A {
	BACKGROUND-COLOR: #144981;
	BACKGROUND: url(uparrow.png) no-repeat top left;
	BORDER-LEFT: #8D8D8D 1px none;
	BORDER-RIGHT: #777777 1px none;
	BORDER-TOP: #BFBFBF 0px none;
	BORDER-BOTTOM: #000000 0px none;
	text-indent:-9999px;
	margin:0px; padding:0px;
}
SPAN.upButton A:hover {
	BACKGROUND: url(uparrow_light.png) no-repeat top left;
}
SPAN.downButton A:hover {
	BACKGROUND: url(downarrow_light.png) no-repeat top left;
}
SPAN.upButton A:hover, SPAN.downButton a:hover {
	BACKGROUND-COLOR: #0469A9;
	CURSOR: pointer;
	TEXT-DECORATION: none;
}

/* Up | Down button SPAN Readonly Link */
SPAN.upButtonReadOnly A {
	BACKGROUND: url(uparrow_light.png) no-repeat top left;
}
SPAN.downButtonReadOnly A {
	BACKGROUND: url(downarrow_light.png) no-repeat top left;
}
SPAN.upButtonReadOnly A, SPAN.downButtonReadOnly A {
	BACKGROUND-COLOR: #144981;
	BORDER-LEFT: #8D8D8D 1px none;
	BORDER-RIGHT: #777777 1px none;
	BORDER-TOP: #BFBFBF 0px none;
	BORDER-BOTTOM: #000000 0px none;
	margin:0px; padding:0px;
}
SPAN.downButtonReadOnly A:hover, SPAN.upButtonReadOnly A:hover {
	TEXT-DECORATION: none;
}

/* NUMERICAL WIDGET Up/down cell */
TD.small {
	PADDING-LEFT: 1px;
	PADDING-RIGHT: 1px;
	PADDING-TOP: 1px;
	PADDING-BOTTOM: 1px;
	BORDER: 0px none;
}

/* NUMERICAL WIDGET spiner cell */
TD.noborder {
	BORDER: 0px none;
}

/* } NUMERICAL WIDGET Block */

/* } TREECELL DATA Block */

/* ================================================================================================= */
/* TOOLS { */
/*---------*/

/* ------------------------------------------------------------------------------------------------- */
/* COLAPSE Block { */
/*-----------------*/

/* Collapse Up: Hide horizontal menu items block */
DIV.expand_collapse_up {
	BACKGROUND: url(image_expandcollapseup.png) no-repeat top left;
	WIDTH: 10px;
	HEIGHT: 7px;
	cursor:pointer;
}
/* Collapse Up: hover item */
DIV.expand_collapse_up A:hover {
	BACKGROUND: url(image_expandcollapseup_light.png) no-repeat top left;
}

/* Collapse Down: Show horizontal menu items block */
DIV.expand_collapse_down {
	BACKGROUND: url(image_expandcollapsedown.png) no-repeat top left;
	WIDTH: 10px;
	HEIGHT: 7px;
	cursor:pointer;
}
/* Collapse Down: hover item */
DIV.expand_collapse_down A:hover {
	BACKGROUND: url(image_expandcollapsedown_light.png) no-repeat top left;
}

/* Collapse Left: Hide vertical menu items block */
DIV.expand_collapse_left {
	BACKGROUND: url(image_expandcollapseleft.png) no-repeat top left;
	WIDTH: 7px;
	HEIGHT: 10px;
	cursor:pointer;
}
/* Collapse Left: hover item */
DIV.expand_collapse_left A:hover {
	BACKGROUND: url(image_expandcollapseleft_light.png) no-repeat top left;
}

/* Collapse Right: Show horizontal menu items block */
DIV.expand_collapse_right {
	BACKGROUND: url(image_expandcollapseright.png) no-repeat top left;
	WIDTH: 7px;
	HEIGHT: 10px;
	cursor:pointer;
}
/* Collapse Left: hover item */
DIV.expand_collapse_right A:hover {
	BACKGROUND: url(image_expandcollapseright_light.png) no-repeat top left;
}

/* Collapse Data: collapsed data block */
DIV.expand_collapse_data {
	display: block;
}

/* This indicates print settings: no print collapse toolbox */
@media print {
 DIV.expand_collapse_up, DIV.expand_collapse_down, DIV.expand_collapse_left, DIV.expand_collapse_right, DIV.expand_collapse_data {
	display: none;
 }
}

/* } COLAPSE Block */

/* ------------------------------------------------------------------------------------------------- */
/* FIXED POSITION BOX Block { */
/*----------------------------*/
/* top left BOX */
DIV.fixed_box_top_left
{
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: #666 1px solid;
	BORDER-TOP:  0px;
	BORDER-BOTTOM: #666 1px solid;
	WIDTH: 100%;
}

/* top right BOX */
DIV.fixed_box_top_rigt
{
	position: fixed;
	top: 0px;
	right: 0px;
	padding: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: #666 1px solid;
	BORDER-TOP:  0px;
	BORDER-BOTTOM: #666 1px solid;
	WIDTH: 100%;
}

/* bottom left BOX */
DIV.fixed_box_bottom_left
{
	position: fixed;
	left: 0px;
	bottom: 0px;
	padding: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: #666 1px solid;
	BORDER-TOP: #666 1px solid;
	BORDER-BOTTOM:  0px;
	WIDTH: 100%;
}

/* bottom right BOX */
DIV.fixed_box_bottom_right
{
	position: fixed;
	bottom: 0px;
	right: 0px;
	padding: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	BORDER-LEFT: #666 1px solid;
	BORDER-RIGHT: #666 1px solid;
	BORDER-TOP: #666 1px solid;
	BORDER-BOTTOM: 0px;
	WIDTH: 100%;
}

/* } FIXED POSITION BOX Block */


.distributionchart_value
{
	display: none;
	VISIBILITY: hidden;
	overflow: hidden;
	WIDTH: 0px;
	HEIGHT: 0px;
	MARGIN: 0px;
	PADDING: 0px;
	/*DISPLAY: inline-block;*/
	TEXT-DECORATION: none;
}


/* ------------------------------------------------------------------------------------------------- */
/* Disconnect Notification Block { */
/*---------------------------------*/

#error_msg_panel {
	PADDING: 10px;
	border-bottom: 2px solid #AAAAAA;
	border-top: 2px solid #AAAAAA;
	bottom: 0;
	position: fixed;
	text-align: center;
	VERTICAL-ALIGN: middle;
	DISPLAY: block;
	background: none repeat scroll 0 0 #EEEEEE;
	width: 99%;
}

#error_msg_panel IMG {
	MARGIN: 0px;
	PADDING: 0px;
	MARGIN-RIGHT: 10px;
	TEXT-ALIGN: left;
	VERTICAL-ALIGN: middle;
}

#error_msg_panel P {
	MARGIN: 0px;
	PADDING: 0px;
	VERTICAL-ALIGN: middle;
	text-align: center;
	height: 22px;
	line-height: 22px;
}

/* } Disconnect Notification Block */


/* } TOOLS */