body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	background-color: white;
 	margin: 0px;
}

.ek-combo {
	border: 1px solid #7F9DB9;
	background-color: white;
	width: 348px;
}
.ek-combo-disabled {
	border: 1px solid #C9C7BA;
	background-color: white;
	width: 348px;
}
.ek-combo-disabled-ff {
	border: 1px solid #7F9DB9;
	background-color: buttonface;
	width: 348px;
}

.ek-combo-trigger {
	border: none;
	background: url(../EKImage/Combo/combobut_xp.gif) no-repeat center;
	margin-top: 1px;
}

.ek-combo-trigger-ff {
	border: none;
	background: url(../EKImage/Combo/combobut_xp.gif) no-repeat right;
	margin: 1px;
	padding-left: 4px;
}

.ek-combo-trigger-disabled {
	border: none;
	background: url(../EKImage/Combo/combobut_xp_dis.gif) no-repeat center;
	margin-top: 1px;
}

.ek-combo-trigger-disabled-ff {
	border: none;
	background: url(../EKImage/Combo/combobut_xp_dis.gif) no-repeat right;
	margin: 1px;
	padding-left: 4px;
}

.ek-combo-trigger-over {
	background: url(../EKImage/Combo/combobut_xp_hl.gif) no-repeat center;
}

.ek-combo-trigger-over-ff {
	background: url(../EKImage/Combo/combobut_xp_hl.gif) no-repeat right;
}

.ek-combo-text {
	border: none; 
	margin: 0; 
	padding: 0 0 0 4px;
	height: 18px;
}

.ek-combo-text-ff {
	border: none;
	margin: 1px;
	padding-left: 3px;
}

.ek-combo-option-over {
	background: highlight;
}

.ek-combo-list-container {
	border: 1px solid black;
	overflow: auto;
}

.ek-combo-list {
	background: white;
	width: 100%;
}


/* Description:
 *   Hides all combobox elements of the current document.
 *   Useful if IE 6 or earlier is used and all input con-
 *   trols have to be disabled (box model error)
 *
 * Used for:
 * - Together with DIV-Element which overlays all input
 *   controls it's used to hide all comboboxes of the
 *   dialog, so the user can't trigger a request while
 *   another one is executed (error protection).
 *   It's applied to any dialog during the request pro-
 *   cessing phase in combination with IE 6 or earlier
 *   as browser
 */
body.hideComboboxes select{
	visibility:hidden;
}

/* Description:
 *   An element with this style appears half opaque and
 *   has a greyish background color. The style applies to
 *   the whole size of the element.
 *
 * Used for:
 * - The DIV-Element which is used in any dialog to over-
 *   lay all its input controls, so the user can't trig-
 *   ger a request while another one is executed (error
 *   protection)
 */
.disableInput {
    z-index: 1000;
    position: absolute;
    top:0;
    left:0;
    cursor: wait;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=50);
    background-color: #EEE;
    width: 100%;
    height: 100%;
    zoom: 1;
}


/* Description:
 *   For texts and hyperlinks which are integrated to the
 *   system's breadcrumb view
 *
 * Used for:
 * - Breadcrumb view at the top of the main screen
 *   (it displays the dialogs called as a sorted sequence)
 */
.easykatLight-breadcrumb img {
	vertical-align: middle;
}

.easykatLight-breadcrumb span {
	font-size: 9pt;
	color: rgb(140,140,140);
	padding-right: 5px;
	padding-left: 5px;
	vertical-align: middle;
}

.easykatLight-breadcrumb span a.treeNode {
	color: blue;
	text-decoration: none;
}

.easykatLight-breadcrumb span a.treeNode:visited {
	color: blue;
}

.easykatLight-breadcrumb span a.treeNode:hover {
	color: rgb(80,120,255);
}

.easykatLight-breadcrumb span a.dialogNode {
	color: blue;
	text-decoration: none;
}

.easykatLight-breadcrumb span a.dialogNode:visited {
	color: blue;
}

.easykatLight-breadcrumb span a.dialogNode:hover {
	color: rgb(80,120,255);
}


/* Description:
 *   For text labels which don't need a special handling
 *   like e.g. alignment, smaller or larger font-size as
 *   well as font-weight
 *
 * Used for:
 * - Label of all radio buttons, comboboxes and checkboxes
 *   of the expertsearch dialog (IDD_EXPERTSEARCH)
 * - All texts without hyperlink functionality of the main
 *   dialog (IDD_MAIN)
 * - All texts without hyperlink functionality and the ones
 *   which don't have to get displayed at reduced font-size
 *   of all tabs of the offer dialog (IDD_OFFER)
 */
.textNormal {
	font-size: 10pt;
	height: 16px;
}


/* Description:
 *   For edit fields in the offer dialog that set the width
 *   of the offer overview table's columns.
 *
 * Used for:
 * - All edit fields within the Layout tab of the offer
 *   dialog (IDD_OFFER), which allow to control the column
 *   widths of the offer's overview table
 */
.offerColumnWidthInfo {
	font-size: 8pt;
}


/* Description:
 *   For text labels near disabled input controls which
 *   should correspond with them. These labels have to
 *   get on with no special settings like e.g. alignment,
 *   font-weight or large resp. small font size
 *
 * Used for:
 * - All texts aside of disabled input controls without
*    hyperlink functionality and the ones which don't
*    have to get displayed at reduced font-size of all
 *   tabs of the offer dialog (IDD_OFFER)
 */
.textNormal_disabled{
	color: gray;
	height: 16px;
	font-size: 10pt;
}



/* Description:
 *   For combobox elements which don't need a special hand-
 *   ling like e.g. coloring or font-size
 *
 * Used for:
 * - Language and currency selection combobox as well as the
 *   combobox for the selection of the delivery period dura-
 *   tion (day / week / month) of the offer dialog's basic
 *   data tab (IDD_OFFER)
 * - Page layout and 'to attention' combobox of the offer
 *   dialog's layout tab (IDD_OFFER)
 * - Comboboxes associated with the edit fields for pricead-
 *   justment of the offer dialog's calculation tab 
 *   (IDD_OFFER)
 * - 'To attention' combobox of the offer dialog's client
 *   and sales tab (IDD_OFFER)
 * - Language selection combobox of the main dialog (IDD_MAIN)
 * - Currency selection combobox of the currency tab of the
 *   settings dialog (IDD_SETTINGS)
 * - 'To attention' combobox of the sales tab of the settings
 *   dialog (IDD_SETTINGS)
 */
.COMBO_NORMAL	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	text-align:right;
}


/* Description:
 *   Layout of a small confirm message element which pops
 *   up in certain situations and requests a decision by
 *   the user
 *
 * Used for:
 * - The overwrite confirmation question of the project-
 *   list dialog (IDD_PROJECTLIST_TABS) which pops up when
 *   a project list is loaded from an external file
 */
.easykatLight-confirmMessageDialog {
	font-size: 10pt;
	position: absolute;
	top: 350px;
	left: 400px;
	border: 2px solid blue;
	background-color: rgb(209,220,249);
	width: 350px;
	z-index: 2000;
}

.easykatLight-confirmMessageDialog #messageTextCell {
	padding: 5px;
	vertical-align: top;
	text-align: center;
}

.easykatLight-confirmMessageDialog #yesButton {
	padding-left: 8px;
	padding-right: 8px;
}

.easykatLight-confirmMessageDialog #yesButtonCell {
	text-align: center;
	height: 35px;
}

.easykatLight-confirmMessageDialog #noButton {
	padding-left: 8px;
	padding-right: 8px;
}

.easykatLight-confirmMessageDialog #noButtonCell {
	text-align: center;
	height: 35px;
}


/* Description:
 *   For text labels with small font-size
 *
 * Used for:
 * - Label of all checkboxes used to control the product
 *   informations which should get printed in the offer
 *   document. These checkboxes are located at the bottom
 *   of the layout tab of the offer dialog (IDD_OFFER)
 * - Label of the checkbox which controls the printing of
 *   the notice for the overall price adjustment in the
 *   calculation tab of the offer dialog (IDD_OFFER)
 */
.easykatLight-smallText {
	font-size: 9pt;
}

/* Description:
 *   For text labels with small font-size which should
 *   appear as disabled
 *
 * Used for:
 * - Label of some checkboxes which control the product
 *   informations which should get printed in the offer
 *   document. These checkboxes are located at the bottom
 *   of the layout tab of the offer dialog (IDD_OFFER)
 */
.easykatLight-smallText_disabled {
	color: gray;
	font-size: 9pt;
}


/* Description:
 *   For displaying a text label in bold
 *
 * Used for:
 * - Label for the overall price and the position price
 *   information after the price adjustments were calcu-
 *   lated. Located at the calculation tab of the offer
 *   dialog (IDD_OFFER)
 */
.easykatLight-boldText {
	font-weight: bold;
	font-size: 10pt;
}


/* Description:
 *   Sets the layout for multiline text areas
 *
 * Used for:
 * - All multiline text areas of the offer dialog
 *   (IDD_OFFER)
 */
.easykatLight-textarea {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10pt;
}


/* Description:
 *   For text fields which content needs to be aligned to
 *   the right
 * 
 * Used for:
 * - Input field for quantity and calculation price within
 *   the calculation table of the offer dialog's calcula-
 *   tion tab (IDD_OFFER)
 * - Input field for the date of delivery of the basic da-
 *   ta tab of the offer dialog (IDD_OFFER)
 * - All priceadjustment input fields of the calculation
 *   tab of the offer dialog (IDD_OFFER)
 */
.easykatLight-rightAlignTextField {
	text-align:right;
}

/* Description:
 *   Lets a text field appear disabled (if no data can get
 *   entered)
 *
 * Used for:
 * - Input fields 'delivery period' and 'date of delivery'
 *   of the offer dialog's basic data tab (IDD_OFFER).
 * - Input field 'to attention' of the offer dialog's lay-
 *   out tab (IDD_OFFER)
 * - All input fields of the sales tab of the offer dialog
 *   (IDD_OFFER), if the system is used as client side
 *   system (EXTERN mode)
 */
.easykatLight-disabledTextField {
	background-color: rgb(215, 215, 215);
	border: 1px solid rgb(127, 157, 185);
	height: 18px;
}

/*
 * Description:
 *   Lets a text field appear disabled (if no data can get
 *   entered) with right alignment
 *
 * Used for:
 * - Text fields displaying the overall price and the po-
 *   sition price before and after the price adjustments
 *   have been applied. Located at the calculation tab of
 *   the offer dialog (IDD_OFFER)
 */
.easykatLight-disabledTextfield_rightAlign {
	background-color: rgb(215, 215, 215);
	border: 1px solid rgb(127, 157, 185);
	text-align:right;
}


/* Description:
 *   Layout for the HTML elements which are responsible
 *   for displaying the system's critical error messages
 *   as well as the standard notices.
 *   The message texts are located at a table which con-
 *   sists of only one row and one cell. This table is em-
 *   bedded into a DIV element (SYSTEMNOTICE_CONTAINER)
 *   within the main dialog (IDD_MAIN) which is created
 *   using JavaScript when the first message has to be
 *   displayed
 *
 * Used for:
 * - All critical error messages returned by the system
 *   in any dialog
 * - All standard notices returned by the system in any
 *   dialog
 */
/* Standard notices */
.easykatStandard-popupNoticeContainer {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	background-color: transparent;
	position: absolute;
	width: 300px;
	height: 100px;
	top: 325px;
	left: 450px;
	z-index: 10001;
}

.easykatStandard-popupNotice {
	width: 100%;
	height: 100%;
	background-color: rgb(209,220,249);
	border: 2px solid blue;
	font-size: 10pt;
	font-weight: bold;
}

.easykatStandard-popupNotice td {
	vertical-align: center;
	text-align: center;
	padding: 3px;
	color: black;
}

/* Critical errors */
.easykatStandard-popupErrorContainer {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	background-color: transparent;
	position: absolute;
	width: 300px;
	height: 200px;
	top: 325px;
	left: 450px;
	z-index: 10001;
}

.easykatStandard-popupError {
	width: 100%;
	height: 100%;
	background-color: white;
	border: 1px solid red;
	font-size: 10pt;
	font-weight: bold;
}

.easykatStandard-popupError td {
	vertical-align: top;
	text-align: center;
	padding: 3px;
	color: red;
}


/* Description:
 *   Layout for the HTML elements which are responsible
 *   for displaying a popup used to provided files for
 *   download to the user in a reliable way (keep the
 *   popup blockers away).
 *   The popup consists of a DIV element with an under-
 *   lying IFrame which provides combobox overlay for
 *   IE 6 and earlier. Within the DIV two smaller DIVs
 *   are located. The first one is used to display a
 *   button to start the download and the other one
 *   provides a small closing hint
 *
 * Used for:
 * - All downloads provided by all dialogs of the
 *   system (currently used in IDD_PROJECTLIST_TABS,
 *   IDD_FAVORITELIST, IDD_CONFIG, IDD_OFFER)
 */
.easykatStandard-downloadPopupContainer {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	background-color: rgb(209,220,249);
	position: absolute;
	width: 300px;
	height: 100px;
	top: 325px;
	left: 450px;
	border: 2px solid blue;
	padding: 3px;
	z-index: 10001;
}

.easykatStandard-downloadPopupButton {
	padding-top: 38px;
	height: 51px;
	text-align: center;
}

.easykatStandard-downloadPopupCloseLink {
	font-size: 7pt;
	height: 11px;
	float: right;
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}


/* Description:
 *   For non-critical error notices the user can correct
 *   himself easily
 *
 * Used for:
 * - Filter error message displayed within the product ta-
 *   ble of the products tab of the product dialog
 *   (IDD_PRODUCT) if the filter criteria is too strong to
 *   find any product
 */
.easykatStandard-errorNoticeText {
	color: red;
	font-size: 10pt;
	font-weight: bold;
}


/* Description:
 *   For all text labels of the configuration dialog which
 *   should be small but still easy to see
 *
 * Used for:
 * - Label of the three information text fields above the
 *   tabs of the configuration dialog (IDD_CONFIG) which
 *   display the current price and typecode of the running
 *   configuration as well as the article number, if the
 *   process has been started from a certain product
 */
.textCfgSmallBold {
	font-size: 8pt;
	font-weight: bold;
}

/* Description:
 *   For text fields of the configuration dialog which
 *   should present a lot of text within a single line
 *
 * Used for:
 * - The two info textfields above the tabs of the confi-
 *   guration dialog (IDD_CONFIG) displaying the current
 *   typecode and aricle number of running configuration
 */
.cfgTypecodeArtnrInfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

/* Description:
 *   For text fields of the configuration dialog which
 *   should present a lot of text within a single line
 *   and need right alignment
 *
 *Used for:
 * - The info textfield above the tabs of the configura-
 *   tion dialog (IDD_CONFIG) displaying the current
 *   price of running configuration
 */
.cfgPriceInfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	text-align:right;
}


/* Description:
 *   For the version dialog's simple tables
 *
 * Used for:
 * - The two tables of the version dialog
 */
.easykatLight-versionTable td	{
	border: none;
	font-size: 9pt;
	height: 20px;
}


/* Description:
 *   For the different element types appearing in the con-
 *   figuration table and their layout demands
 *
 * Used for:
 * - The different control types and display modes (dis-
 *   played, hidden, crossed out) necessary for presenting
 *   the configuration objects, attributes and values
 *   within the configuration dialog (IDD_CONFIG)
 */
/*
CFG_CELL						// allgemeiner Stil für Tabellenzelle mit Kontrolle
CFG_TEXT						// allgemeiner Stil für Tabellenzellen des Info-Typs (ersetzen alle anderen Zellen ausser dem Marker)
CFG_BUTTON						// normaler Stil für Button
CFG_RADIOBUTTON					// normaler Stil für eigentliche Radiobutton-Kontrolle (und nur diese, zug. Text siehe unten)
CFG_RADIOBUTTON_LABEL			// normaler Stil für Text neben normaler Radiobutton-Kontrolle
CFG_RADIOBUTTON_LABEL_DISABLED	// Stil für Text neben disabled Radiobutton-Kontrolle
CFG_RADIOBUTTON_LABEL_INVALID	// Stil für Text neben ungültiger Radiobutton-Kontrolle, d.h. 'unsichtbarer' Eintrag in Kontrolle vom D-Typ
CFG_CHECK						// normaler Stil für eigentliche Checkbox-Kontrolle (und nur diese, zug. Text siehe unten)
CFG_CHECK_LABEL					// normaler Stil für Text neben normaler Checkbox-Kontrolle
CFG_CHECK_LABEL_DISABLED		// Stil für Text neben disabled Checkbox-Kontrolle
CFG_CHECK_LABEL_INVALID			// Stil für Text neben ungültiger Checkbox-Kontrolle, d.h. 'unsichtbarer' Eintrag in Kontrolle vom D-Typ
CFG_LABEL						// normaler Stil für Spalte mit Merkmalsnamen
CFG_LABEL_DISABLED				// Stil für Spalte mit Merkmalsnamen, wenn Merkmal komplett disabled
CFG_MINMAX						// normaler Stil für Minimum-/Maximum-Spalte
CFG_MINMAX_DISABLED				// Stil für Minimum-/Maximum-Spalte, wenn Merkmal komplett disabled
CFG_UNIT						// normaler Stil für Einheiten-Spalte
CFG_UNIT_DISABLED				// Stil für Einheiten-Spalte, wenn Merkmal komplett disabled
CFG_EDIT						// normaler Stil für Edit-Kontrolle
CFG_EDIT_DISABLED				// Stil für disabled Edit-Kontrolle
CFG_COMBO						// normaler Stil für Combobox-Kontrolle
CFG_COMBO_DISABLED				// Stil für Combobox-Kontrolle, wenn Merkmal komplett disabled
CFG_COMBO_OPTION_DISABLED		// Stil für disabled Eintrag in Combobox-Liste
CFG_COMBO_OPTION_INVALID		// Stil für ungültigen Eintrag in Combobox-Liste, d.h. 'unsichtbarer' Eintrag in Kontrolle vom D-Typ
CFG_MARKER						// Stil für Tabellenzelle mit dem Pfeil (Marker)
CFG_INFO						// Stil für Tabellenzelle mit dem Info-Dokument
CFG_EDITOK						// Stil für letzte Tabellenzelle mit Häkchen zum Bestätigen von Änderungen in Edit-Kontrollen
*/

.CFG_CELL	{
	width:385px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
	text-align: left;
}

.CFG_TEXT	{
	width:708px;
}

.CFG_BUTTON {
	width: 100px;
}

.CFG_RADIOBUTTON {
}

.CFG_RADIOBUTTON_LABEL {
}

.CFG_RADIOBUTTON_LABEL_DISABLED	
{
	color: rgb(128,128,128);
	/* text-decoration: line-through; */
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_RADIOBUTTON_LABEL_INVALID	
{
	color: rgb(128,128,128);
	text-decoration: line-through;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_CHECK {
}

.CFG_CHECK_LABEL {
}

.CFG_CHECK_LABEL_DISABLED
{
	color: rgb(128,128,128);
	/* text-decoration: line-through; */
	padding-bottom: 4px;
	padding-top: 4px;

}

.CFG_CHECK_LABEL_INVALID
{
	color: rgb(128,128,128);
	text-decoration: line-through;
	padding-bottom: 4px;
	padding-top: 4px;

}

.CFG_LABEL	{
	width:250px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_LABEL_DISABLED	{
	width:250px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_MINMAX {
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_MINMAX_DISABLED {
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_UNIT	{
	width:25px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_UNIT_DISABLED	{
	width:25px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_EDIT	{
	width:350px;
}

.CFG_EDIT_DISABLED	{
	width:350px;
}

.CFG_COMBO	{
	width:350px;
}

.CFG_COMBO_DISABLED	{
	width:350px;
}

.CFG_COMBO_OPTION_DISABLED	
{
	color: RGB(192,192,192);
	background-color: RGB(232,232,232);

}

.CFG_COMBO_OPTION_INVALID
{
	color: RGB(192,192,192);
	background-color: RGB(232,232,232);

}

.CFG_COMBO-rows {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

.CFG_MARKER	{
	width:28px;
	/* border-bottom: 1px solid buttonshadow;*/
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_INFO	{
	width:28px;
	cursor:pointer;
	text-align:left;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

.CFG_EDITOK	{
	width:20px;
	border-bottom: 1px solid buttonshadow;
	padding-bottom: 4px;
	padding-top: 4px;
}

/* Description:
 *   Providing the layout for the table displayed above
 *   the tab view of most dialogs which cells simulate
 *   buttons with icons to provide the functions supported
 *   by the system for the current dialog
 *
 * Used for:
 * - The table above the dialog's tab view which provides
 *   the functions currently supported as simulated but-
 *   tons with icons. Used for the following dialogs:
 *   Configuration (IDD_CONFIG), summary of the configura-
 *   tion (IDD_CFGSUMMARY), details (IDD_DETAILS), docu-
 *   ments (IDD_DOCUMENTS), expert search (IDD_EXPERT-
 *   SEARCH), searchresult (IDD_SEARCHRESULT), favorite
 *   list (IDD_FAVORITELIST), offer (IDD_OFFER), products
 *   (IDD_PRODUCT), product comparison (IDD_COMPARE_PRO-
 *   DUCTS), project list (IDD_PROJECTLIST_TABS), settings
 *   (IDD_SETTINGS)
 */
.easyKatLight_controlButtonTable {
	font-size: 10pt;
	height: 27px;
	background-image: url(../EKImage/Button/menu_whole_blue.gif);
	background-repeat: no-repeat;
	border: none;
	width: 100%;
}

/* Description:
 *   For texts which should appear as hyperlinks and look
 *   like buttons with icons while arranged in a table
 *
 * Used for:
 * - The table cells (which should represent buttons to
 *   click on) of the table displayed above the tab view of
 *   most dialogs which provide functions currently availa-
 *   ble. Used for the following dialogs:
 *   Configuration (IDD_CONFIG), summary of the configura-
 *   tion (IDD_CFGSUMMARY), details (IDD_DETAILS), docu-
 *   ments (IDD_DOCUMENTS), expert search (IDD_EXPERT-
 *   SEARCH), searchresult (IDD_SEARCHRESULT), favorite
 *   list (IDD_FAVORITELIST), offer (IDD_OFFER), products
 *   (IDD_PRODUCT), product comparison (IDD_COMPARE_PRO-
 *   DUCTS), project list (IDD_PROJECTLIST_TABS), settings
 *   (IDD_SETTINGS)
 */
.easyKatLight_controlButton {
	border: none;
	color: blue;
	background-color: transparent;
	text-decoration: none;
	padding-left: 22px;
	cursor:pointer;
	background-repeat: no-repeat;
	background-position: left center;
}

/* Description:
 *   For texts which should appear as disabled buttons with
 *   corresponding icons while arranged in a table
 *
 * Used for:
 * - The table cells (which should represent buttons to
 *   click on) of the table displayed above the tab view of
 *   most dialogs which inform the user about functions
 *   which are supported, but currently locked due to cer-
 *   tain reasons. Used for the following dialogs:
 *   Configuration (IDD_CONFIG), summary of the configura-
 *   tion (IDD_CFGSUMMARY), details (IDD_DETAILS), docu-
 *   ments (IDD_DOCUMENTS), expert search (IDD_EXPERT-
 *   SEARCH), searchresult (IDD_SEARCHRESULT), favorite
 *   list (IDD_FAVORITELIST), offer (IDD_OFFER), product 
 *   comparison (IDD_COMPARE_PRODUCTS), project list
 *   (IDD_PROJECTLIST_TABS), settings (IDD_SETTINGS)
 */
.easykatLight-controlButtonDisabled {
	padding-left: 22px;
	color: gray;
	background-position: left center;
	background-repeat: no-repeat;
	text-decoration: none;
}


/* Description:
 *   Padding between the product table columns of the pro-
 *   duct tab of the product dialog (IDD_PRODUCT)
 *
 * Used for:
 * - As additional CSS class of the product dialog's 
 *   product table if the user hasn't set the widths of
 *   all columns explicitly (WRAP or NOWRAP is used)
 */
.easykatLight-productTablePadding td {
	padding-left: 3px;
	padding-right: 7px;
}


/* Description:
 *   Makes images opaque
 *
 * Used for:
 * - The pictures (first column) of the product groups
 *   table of the product dialog's product groups tab
 *   (IDD_PRODUCT) if the mouse is positioned over an
 *   image
 */
.easykatStandard-opaqueImage {
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}


/* Description:
 *   Layout of a complex structure forming an expandable
 *   and collapsible tree which can contain different
 *   style information for each level
 *
 * Used for:
 * - Tree on the left of the main dialog (IDD_MAIN) con-
 *   taining all product groups of the system
 */
.menutree-node-lvl0 {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: rgb(0, 104, 181);
	text-decoration: none;
	background-image: url(../EKImage/MenutreeClosed_blueStyle.png);
	padding-left:16px;
	margin-left: 11px;
	border-top: 0px solid white;
	background-color: white;
	background-repeat: no-repeat;
	background-position: 0px left;
	height: 18px;
	cursor: pointer;
}

.menutree-node-lvl0-closed {
	font-weight: normal;
	background-image: url(../EKImage/MenutreeClosed_blueStyle.png);
	color: rgb(0, 104, 181);
	background-color: white;
}

.menutree-node-lvl0-opened {
	text-decoration: none;
	color: rgb(0, 104, 181);
	font-weight: bold;
	background-color: white;
	background-image: url(../EKImage/MenutreeOpened_blueStyle.png);
}

.menutree-node-lvl0-focused {
	text-decoration: underline;
	font-weight: bold;
	color: rgb(0, 104, 181);
	background-color: white;
	background-image: url(../EKImage/MenutreeOpened_blueStyle.png);
}

.menutree-node-lvl0:visited {
}

/*.menutree-node-lvl0:hover {
	color: rgb(168,21,37);
	font-weight: bold;
	background-image: url(../EKImage/MenutreeOpened_blueStyle.png);
	cursor: pointer;
}*/


/* Description:
 *   Layout of a complex structure which makes it possible
 *   to create multiple named tabs which share a certain
 *   area of the screen below them. The content displayed
 *   changes after a certain tab was clicked. If there are
 *   more tabs than can be arranged in one horizontal row,
 *   an icon appears at the left and the right of the tab
 *   view which enables scrolling of the tabs
 *
 * Used for:
 * - The tab control of the following dialogs:
 *   Products (IDD_PRODUCT), product comparison (IDD_COM-
 *   PARE_PRODUCTS), configuration (IDD_CONFIG), favorite
 *   list (IDD_FAVORITELIST), offer (IDD_OFFER), project
 *   list (IDD_PROJECTLIST_TABS), settings (IDD_SETTINGS)
 */
div.tabBox {}

div.easykatLight-tab-area {
  padding: 0px 0px 4px 0px;
}

a.easykatLight-tab-tab {
  	background-color: 		rgb(209,220,249);
	font-size: 75%;
 	/*border: 				1px solid rgb(209,220,249)*/;
 	/*border-left:			1px solid white; */
 	/*border-top:				1px solid white;*/
 	/*border-right:			2px inset buttonShadow;*/
  	/*border-bottom: 1px solid white;*/
   -moz-border-radius: .75em .75em 0em 0em;
  	border-radius-topleft: .75em;
  	border-radius-topright: .75em;
  	padding: 				2px 2.75em 2px 1em;
  	text-decoration: 		none;
  	top: 					3px;
  	z-index: 				100;
	background-image:		url(../EKImage/tab_blueStyle.gif);
	background-position:	100%;
	background-repeat:		no-repeat; 
  	margin-right:			0px;
}

a.easykatLight-tab-tab, a.easykatLight-tab-tab:visited {
  	color: buttonText;
}

a.easykatLight-tab-tab:hover {
	/*font-weight: bold;*/
	/*color: red;*/
/* border-top: 2px solid red; */
}

a.easykatLight-tab-tab-active {
	padding-bottom: 4px;
  	top: 1px;
  	z-index: 102;
	border-top: 2px solid white;
}

a.easykatLight-tab-tab-active, a.easykatLight-tab-tab-active:hover, a.easykatLight-tab-tab-active:visited {
	font-weight: bold;
  	background-color: rgb(209,220,249);
  	color: rgb(0, 104, 181);
}

div.easykatLight-tab-panel {
  	background-color: white;
 	border-left  : 1px solid rgb(209,220,249);
	border-right : 1px solid rgb(209,220,249);
	border-bottom: 1px solid rgb(209,220,249);
 	border-top   : 1px solid white;
  	
 	/*-moz-border-radius: 0em .5em .5em 0em;
  	border-radius-topright: .5em;
  	border-radius-bottomright: .5em;
  	*/
  	padding: .5em;
}


/* Description:
 *   For the creation of colored boxes used to design the
 *   background of a certain area. It's easily possible to
 *   overlay them with other elements.
 *
 * Used for:
 * - Allocation of the background color for all tabs of the
 *   following dialogs:
 *   Products (IDD_PRODUCT), product comparison (IDD_COM-
 *   PARE_PRODUCTS), configuration (IDD_CONFIG), favorite
 *   list (IDD_FAVORITELIST), offer (IDD_OFFER), project
 *   list (IDD_PROJECTLIST_TABS), settings (IDD_SETTINGS)
 */
.easykatLight-border {
	background-color: rgb(209,220,249);
	z-index:-10;
	font-size: 1pt;
}


/* Description:
 *   Creates a colored border around a table
 *
 * Used for:
 * - Framing of the three tables of the searchresult dialog 
 *   (IDD_SEARCHRRESULT)
 */
.easykatLight-tableBorder {
	border: 1px solid rgb(209,220,249);
}


/* Desription:
 *   Lets a common text appear as a hyperlink
 *
 * Used for:
 * - The labels 'Configure' and 'Details'of the overview
 *   tab of the product dialog (IDD_PRODUCT)
 * - The link cells to open the different kinds of docu-
 *   ments within the document table of the documents
 *   dialog (IDD_DOCUMENTS)
 * - All labels of the action icons of the product group
 *   table of the product dialog's product group tab
 *   (IDD_PRODUCT)
 * - All labels of the action icons of the product table
 *   of the product dialog's products tab (IDD_PRODUCTS)
 * - All entries the tables of the searchresult dialog
 *   (IDD_SEARCHRESULT) contain except the columns 'short
 *   text' and 'document' (if empty) of the products table
 * - The label texts for the action icons 'Favorite list',
 *   'Shopping cart' and 'Settings' of the main dialog 
 *   (IDD_MAIN)
 */
.easykatLight-linkText {
	color: blue;
	font-size: 10pt;
	text-decoration: none;
	cursor:pointer;
	border: none;
}


/* Description:
 *   Lets a common image appear as a hyperlink
 *
 * Used for:
 * - Gear image at the right upper corner of the oveview
 *   tab of the product dialog (IDD_PRODUCT)
 * - Icons with the labels 'Configure' and 'Details' of
 *   the overview tab of the product dialog (IDD_PRODUCT)
 * - The image column and the column containing the action
 *   icons of the product group table of the product dia-
 *   log's product group tab (IDD_PRODUCT)
 * - All action icons within the product comparison table
 *   of the product comparison dialog (IDD_COMPARE_PRODUCTS)
 * - The image column, the column with the great gear icon
 *   (used to indicate a configurable product) and all ac-
 *   tion icons of the product table of the product dia-
 *   log's product tab (IDD_PRODUCT)
 * - The filter reset icon placed within the filter combo-
 *   box table (down right) in the upper part of the pro-
 *   duct dialog's product tab (IDD_PRODUCT)
 * - All action icons within the products table of the
 *   searchresult dialog (IDD_SEARCHRESULT)
 * - Icons with the labels 'Favorite list', 'Settings' and
 *   'Shopping cart' as well as the two search icons of
 *   the main dialog (IDD_MAIN)
 * - All refresh icons (checkmark) of the calculation tab
 *   of the offer dialog (IDD_OFFER)
 */
.easykatLight-linkImage {
	cursor: pointer;
}

.easykatLight-linkImage:hover {
	cursor: pointer;
}


/* Description:
 *   Layout of texts which ask the user to wait for a
 *   certain process to complete
 *  
 * Used for:
 * - Message 'Please wait' which is displayed while the
 *   product table of the product dialog's product tab
 *   is loading (IDD_PRODUCT)
 */
.easykatLight-waitMessage {
	color: blue;
	text-align: right;
	font-size: 11pt;
	font-weight: bold;
}


/* Description:
 *   Defines the look of boxes which pop up and overlay a
 *   part of the screen to give the user a short informa-
 *   tion about a certain event
 * Used for:
 * - Message ‘Added to shoppingcart’ of the following dia-
 *   logs:
 *   Summary of the configuration (IDD_CFGSUMMARY), pro-
 *   duct comparison (IDD_COMPARE_PRODUCTS), configuration
 *   (IDD_CONFIG), products (IDD_PRODUCT), search result
 *   (IDD_SEARCHRESULT)
 * - Message ‘Added to favoritelist’ of the following dia-
 *   logs:
 *   Summary of the configuration (IDD_CFGSUMMARY), pro-
 *   ducts (IDD_PRODUCT) search result (IDD_SEARCHRESULT)
 * - Message ‘PDF generation in progress’ of the offer
 *   dialog (IDD_OFFER), the product dialog (IDD_PRODUCT)
 *   and the summary of the configuration (IDD_CFGSUMMARY)
 * - Message ’Saved data successfully’ of the settings
 *   dialog (IDD_SETTINGS)
 */
.easykatLight-popupNotice {
	border: 2px solid blue;
	background-color: rgb(209,220,249);
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	vertical-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}


/* Description:
 *   Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side). It also provides the ability to se-
 *   lect one or multiple rows, but this style isn't used
 *   for tables which need this feature.
 *
 * Used for:
 * - Product group table of the product dialog's product
 *   group tab (IDD_PRODUCT)
 * - Product table of the product dialog's products tab
 *   (IDD_PRODUCT)
 */
 
.easykatLight-table {
	font-size: 10pt;
	/*background-color: transparent;*/
	/*border: 1px solid rgb(209,220,249);*/
	/*border-collapse: collapse;*/
}
	
.easykatLight-table td.header, .easykatLight-table td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface;
	padding-left: 3px;
	padding-right: 3px;
	text-align:center;
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-tableheader-az-sorted {
	/*background-image: url(../gfx/a-z.gif);*/
	font-size: 10pt;
	font-weight: bold;
}
	
.easykatLight-tableheader-za-sorted {
	/*background-image: url(../gfx/z-a.gif);*/
	background-color: buttonface; 
	font-size: 10pt;
	font-weight: bold;
}

.easykatLight-table tr {
	background-color: white;
	vertical-align: middle;
	color: black;
}

.easykatLight-table td {
	font-size: 10pt;
	padding-left: 3px;
	padding-right: 3px;
	text-align:center;
	border-left: 1px solid rgb(238,238,238);
}

.easykatLight-table tr.altrow {
	background-color: rgb(245,245,245);
}

.easykatLight-table tr.selected {
	background-color: rgb(209,220,249);
}

.easykatLight-table tr:hover, .easykatLight-table tr.hilite {
	/*background-color: rgb(209,220,249);
	color: highlighttext;*/
}

/*
.easykatLight-table-cell {
	background-color: white;
	color: black;
}

.easykatLight-table-altcell {
	background-color: buttonface;
	color: black;
}

.easykatLight-table-cell-highlight {
	background-color: highlight;
	color: highlighttext;
}

.easykatLight-table-cell:hover, easykatLight-table-cell-hover {
	background-color: highlight;
	color: highlighttext;
}
*/


/* Description:
 *   Sets layout and size of a popup box which overlays a
 *   part of the screen to display detailed product infor-
 *   mation to the user
 *
 * Used for:
 * - The popup box which gets displayed after the user
 *   clicked on the blue 'Info' action icon of a certain
 *   product within the product table of the product dia-
 *   log's product tab (IDD_PRODUCT). The box holds de-
 *   tailed information about the product which opened it
 */
.easykatLight-productInfo {
	position : absolute;
	top : 268px;
	left : 210px;
	width : 746px;
	height : 426px;
	overflow : auto;
	border : 1px solid rgb(209,220,249);
	padding: 7px 5px 5px 7px;
	background-color : white;
}


/* Description:
 *   Layout of the special easykat table used to present
 *   all elements of a configuration. The table can con-
 *   tain fixed rows (at the top as a header) and columns
 *   (at the left side) and provides the ability to select
 *   one or multiple rows, too. But none of these features
 *   is used here
 *
 * Used for:
 * - Table of the configuration dialog's configuration tab
 *   (IDD_CONFIG) with the whole data of a configuration
 */
.easykatLight-configTable {
	overflow: auto;
	padding-left: 5px;
}

.easykatLight-configTable table{
	font-size: 10pt;
	background-color: rgb(209,220,249);
	/*border: 1px solid rgb(209,220,249);*/
	/*border-collapse: collapse;*/
}
	
.easykatLight-configTable table td.header, .easykatLight-configTable table td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface; 
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-configTableheader-az-sorted table {
	/*background-image: url(../gfx/a-z.gif);*/
	font-size: 10pt;
	font-weight: bold;
}
	
.easykatLight-configTableheader-za-sorted table {
	/*background-image: url(../gfx/z-a.gif);*/
	background-color: buttonface; 
	font-size: 10pt;
	font-weight: bold;
}

.easykatLight-configTable table tr {
	background-color: rgb(209,220,249);
	vertical-align: middle;
	color: black;
}

.easykatLight-configTable table td {
	font-size: 10pt;
}


/* Description:
 *   For a simple, small table which contains the preview
 *   image of an external configuration
 *
 * Used for:
 * - The table which integrates the preview image of an
 *   external configuration to the main dialog (IDD_MAIN)
 *   by overlaying the links below the product group tree
 */
.cfgPreviewTable {
	font-size: 10pt;
	border: none;
}

.cfgPreviewTable td {
	padding: 0px;
	margin: 0px;
	border: none;
	background-color: white;
}


/* Description:
 *   Layout for table cells containing the names of de-
 *   tails groups as a kind of subheadline within a large
 *   details table
 *
 * Used for:
 * - Table cells containing the names of the details
 *   groups within the details table of the following dia-
 *   logs:
 *   details (IDD_DETAILS), products (IDD_PRODUCT, pro-
 *   ducts tab), project list (IDD_PROJECTLIST)
 * - Error message table cell of the details table of the
 *   following dialogs:
 *   details (IDD_DETAILS), products (IDD_PRODUCT, pro-
 *   ducts tab), project list (IDD_PROJECTLIST)
 */
.easykatLight-detailsTableHeader {
	font-size: 10pt;
	font-weight: bold;
	color: blue;
}


/* Description:
 *   Defines the layout and size of a details table, if
 *   it's displayed as a popup box which overlays a part
 *   of the screen. Exact allocation of the style names
 *   to the components of the popup box:
 *      - FrameDIV = the <DIV> realizing the 10px border
 *                   around the contentDIV
 *      - ButtonDIV = the <DIV> realizing the fixed button
 *                    column at the top
 *      - TableDIV = the <DIV> containing the table con-
 *                   tent except the button
 *      - ContentDIV = the <DIV> containing the button and
 *                     the table content
 *      - detailsTable = the layout of the table data it-
 *                       self
 */
.easykatLight-popupDetailsTable_FrameDIV {
	border-left: 10px solid white;
	border-right: 10px solid white;
	position: absolute;
	left: 55px;
	width: 600px;
	height: 345px;
	z-index: 20000;
}

.easykatLight-popupDetailsTable_ButtonDIV {
	background-color: rgb(242,242,242);
	height: 20px;
	width: 100%;
}

.easykatLight-popupDetailsTable_TableDIV {
	height: 322px;
	overflow: auto;
	background-color: white;
}

.easykatLight-popupDetailsTable_ContentDIV {
	border: 1px solid rgb(155,193,236);
	width: 600px;
	height: 345px;
	overflow: auto;
	background-color: white;
}

.easykatLight-popupDetailsTable {
	font-size: 9pt;
	border-collapse: collapse;
	width: 97%;
}

.easykatLight-popupDetailsTable tr {
	background-color: white;
	height: 18px;
	color: black;
}

.easykatLight-popupDetailsTable tr.altrow {
	background-color: rgb(242,242,242);
}


/* Description:
 *   Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side) and provides the ability to select one
 *   or multiple rows, too. This style is optimized for
 *   the usage of the table's row selection feature and is
 *   is chosen whenever it's needed
 *
 * Used for:
 * - Table containing the entries of the favorite list of
 *   the favorite list dialog (IDD_FAVORITELIST)
 * - Calculation table of the offer dialog's calculation
 *   tab (IDD_OFFER) with the content of the project list
 * - Table with the content of the project list located at
 *   the project list dialog (IDD_PROJECTLIST)
 * - Table with the system currencies as well as their
 *   convert factors located at the settings dialog
 *   (IDD_SETTINGS)
 */
.easykatLight-selectableRowTable {
	font-size: 10pt;
	/*background-color: transparent;*/
	/*border: 1px solid rgb(209,220,249);*/
	/*border-collapse: collapse;*/
}
	
.easykatLight-selectableRowTable td.header, .easykatLight-selectableRowTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface; 
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-selectableRowTable-az-sorted {
	/*background-image: url(../gfx/a-z.gif);*/
	font-size: 10pt;
	font-weight: bold;
}
	
.easykatLight-selectableRowTable-za-sorted {
	/*background-image: url(../gfx/z-a.gif);*/
	background-color: buttonface; 
	font-size: 10pt;
	font-weight: bold;
}

.easykatLight-selectableRowTable tr {
	background-color: white;
	vertical-align: middle;
	color: black;
}

.easykatLight-selectableRowTable tr.altrow {
	background-color: rgb(242,242,242);
}

.easykatLight-selectableRowTable tr.selected {
	background-color: rgb(209,220,249);
}

.easykatLight-selectableRowTable td {
	font-size: 10pt;
}


/* Description:
 *   Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side) and provides the ability to select one
 *   or multiple rows, too. This style is chosen for ta-
 *   bles representing bills of material
 *
 * Used for:
 * - Table representing the bill of material of a current-
 *   ly running configuration. It's located at the bill of
 *   material-tab of the configuration dialog (IDD_CONFIG)
 */
.easykatLight-matlistTable {
	font-size: 10pt;
}
	
.easykatLight-matlistTable td.header, .easykatLight-matlistTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface; 
	height: 22px;
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-matlistTable tr {
	background-color: white;
	vertical-align: middle;
	color: black;
}

.easykatLight-matlistTable td {
	font-size: 10pt;
	padding-left: 3px;
	padding-right: 3px;
}

.easykatLight-matlistTable td.priceData {
	text-align: right;
}

.easykatLight-matlistTable td.subStructurePrice {
	color: rgb(150,150,150);
	font-style: italic;
}

.easykatLight-matlistTable td.quantityData {
	text-align: right;
}

.easykatLight-matlistTable tr.altrow {
	background-color: rgb(242,242,242);
}


/* Description:
 *   For boxes which only consist of a colored border with
 *   a title at the upper left corner. They are usually
 *   used to divide all elements displayed into groups
 *
 * Used for:
 * - Labeled framing of partitions of the expertsearch
 *   dialog (IDD_EXPERTSEARCH)
 * - Labeled framing of partitions of some tabs of the of-
 *   fer dialog (IDD_OFFER)
 */
.easykatLight-Groupbox {
	border: 1px solid rgb(170,170,170);
}

.easykatLight-Groupbox legend {
	color: black;
	font-size: 10pt;
}


/* Description:
 *   Layout of the two tables which provide the summary of
 *   a completed configuration
 *
 * Used for:
 * - The first style 'easykatLight-cfgSummaryHeaderTable'
 *   is used for the upper table of the configuration sum-
 *   mary view which displays some general data of the
 *   configuration. The other style called 'easykatLight-
 *   cfgSummaryBodyTable' is used for the lower table
 *   which informs about details of the configuration like
 *   e.g. the selected attribute values. The view of the
 *   configuration summary is presented as a separate dia-
 *   log called configuration summary dialog (IDD_CFGSUM-
 *   MARY) but it can also be accessed using the blue 'In-
 *   fo' icon the project list table of the project list
 *   dialog (IDD_PROJECTLIST) offers for each entry
 */
.easykatLight-cfgSummaryHeaderTable {
	font-size: 10pt;
	background-color: white;
	/*border: 1px solid rgb(209,220,249);
	border-collapse: collapse;*/
}

.easykatLight-cfgSummaryHeaderTable td {
	padding-right: 3px;
}

.easykatLight-cfgSummaryBodyTable {
	font-size: 10pt;
	background-color: white;
	border: 1px solid rgb(209,220,249);
	/*border-collapse: collapse;*/
}
	
.easykatLight-cfgSummaryBodyTable td.header, .easykatLight-cfgSummaryBodyTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface; 
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-cfgSummaryBodyTable tr {
	background-color: white;
	vertical-align: middle;
	color: black;
}

.easykatLight-cfgSummaryBodyTable-bold {
	font-weight: bold;
	/*color: blue;*/
}

.easykatLight-cfgSummaryBodyTable tr.altrow {
	background-color: rgb(242,242,242);
}

.easykatLight-cfgSummaryBodyTable td {
	font-size: 10pt;
	padding-right: 3px;
	padding-left: 3px;
}


/* Description:
 *   Layout of the table used to present all different
 *   product attributes as search parameters of the ex-
 *   pertsearch dialog (IDD_EXPERTSEARCH) to the user
 *
 * Used for:
 * - The table of the expertsearch dialog (IDD_EXPERT-
 *   SEARCH) which offers all different product attributes
 *   of the chosen search area as search parameters to the
 *   user
 */
.easykatLight-searchAttribTable {
	background-color: transparent;
	font-size: 11pt;
}


/* Description:
 *   Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side) and provides the ability to select one
 *   or multiple rows, too. This style is chosen for ta-
 *   tables which inform the user about all files availa-
 *   ble concerning a certain product or product group.
 *   It's also used for the table presenting the details
 *   of a certain product in a separate dialog. Only the
 *   table's row fixing feature is necessary for these use
 *   cases
 *
 * Used for:
 * - Table containing the files available for a certain
 *   product group. Located at the documents tab of the
 *   product dialog (IDD_PRODUCT)
 * - Table of the details dialog (IDD_DETAILS) which pre-
 *   sents all details of a certain product to the user
 * - Table of the documents dialog (IDD_DOCUMENTS) which
 *   presents the files available for a certain product
 *   to the user
 */
.easykatLight-DocumentsTable {
	font-size: 10pt;
	background-color: white;
	/*border: 1px solid rgb(209,220,249);*/
	/*border-collapse: collapse;*/
}
	
.easykatLight-DocumentsTable td.header, .easykatLight-DocumentsTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface;
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-DocumentsTableheader-az-sorted {
	/*background-image: url(../gfx/a-z.gif);*/
	font-size: 10pt;
	font-weight: bold;
}
	
.easykatLight-DocumentsTableheader-za-sorted {
	/*background-image: url(../gfx/z-a.gif);*/
	background-color: buttonface; 
	font-size: 10pt;
	font-weight: bold;
}

.easykatLight-DocumentsTable tr {
	background-color: white;
	height: 20px;
	vertical-align: middle;
	color: black;
}

.easykatLight-DocumentsTable tr.altrow {
	background-color: rgb(242,242,242);
}

.easykatLight-DocumentsTable tr:hover, .easykatLight-DocumentsTable tr.hilite {
	/*background-color: rgb(209,220,249);
	color: highlighttext;*/
}

.easykatLight-DocumentsTable td {
	font-size: 10pt;
	vertical-align: top;
}


/* Description:
 *   Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side) and provides the ability to select one
 *   or multiple rows, too. This style is chosen for the
 *   table which opposes products to each other on the
 *   base of their attributes. Only the row fixing feature
 *   is necessary for this use case
 *
 * Used for:
 * - Table of the product comparison dialog (IDD_COM-
 *   PARE_PRODUCTS) which provides the comparison of cer-
 *   tain products to each other on the base of their at-
 *   tributes
 */
.easykatLight-ProductCompareTable {
	font-size: 10pt;
	background-color: white;
	text-align: center;
	border: 1px solid black;
	border-collapse: collapse;
}
	
.easykatLight-ProductCompareTable td.header, .easykatLight-ProductCompareTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	color: blue;
	background-color: buttonface; 
	
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-right: 1px solid buttonshadow;
	border-bottom: 1px solid buttonshadow; 
}

.easykatLight-ProductCompareTable tr {
	background-color: white;
	height: 20px;
	vertical-align: middle;
	color: black;
}

.easykatLight-ProductCompareTable tr.altrow {
	background-color: rgb(242,242,242);
}

.easykatLight-ProductCompareTable tr.selected {
	background-color: rgb(209,220,249);
}

.easykatLight-ProductCompareTable td {
	font-size: 10pt;
	border: 1px solid black;
}


/* Description:
 *   Makes table cells invisible, so the user doesn't
 *   notice them anymore
 *
 * Used for:
 * - First column of the favorite list table of the favo-
 *   rite list dialog (IDD_FAVORITELIST)
 * - First and eighth column of the calculation table of
 *   the offer dialog's calculation tab (IDD_OFFER)
 */
.easykatLight-hiddenTableCell
{
	background-color: rgb(209,220,249);
}


/* Description:
 *   Layout of tables containing hyperlinks with icons
 *   in front of them, so the rows appear as buttons
 *
 * Used for:
 * - The table providing the action icons and their hyper-
 *   link labels for a certain column of the product
 *   groups table of the product dialog's product groups
 *   tab (IDD_PRODUCT)
 * - The table providing the action icons and their hyper-
 *   link labels for a certain column of the product table
 *   of the product dialog's products tab (IDD_PRODUCT)
 * - The table providing the action icons and their hyper-
 *   link labels for a certain column of the products ta-
 *   ble of the searchresult dialog (IDD_SEARCHRESULT)
 */
.easykatLight-linkColumnTable {
	background-color: transparent;
	width: 124px;
}

.easykatLight-linkColumnTable tr {
	background-color: transparent;
}

.easykatLight-linkColumnTable td {
	padding-right: 3px;
	padding-left: 0px;
	white-space: nowrap;
	vertical-align: middle;
}


/* Description:
 *   Layout of table cells providing action icons without
 *   labels to the user whereat all icons are stored with-
 *   in a separate table
 *
 * Used for:
 * - The cells of the last row of the product comparison
 *   dialog's product comparison table (IDD_COMPARE_PRO-
 *   DUCTS) which provides nameless action icons to the
 *   user which are stored within a separate table
 */
.easykatLight-productCompareActionTable {
	background-color: rgb(220,233,250);
}

.easykatLight-productCompareActionTable td {
	background-color: rgb(220,233,250);
	border: none;
}


/* Description:
 *    Layout of a special easykat table which can contain
 *   fixed rows (at the top as a header) and columns (at
 *   the left side) and provides the ability to select one
 *   or multiple rows, too. This style is chosen for all
 *   tables providing results of a search process to the
 *   user
 *
 * Used for:
 * - All tables of the searchresult dialog (IDD_SEARCH-
 *  RESULT)
 */
.easykatLight-searchResultTable {
	border: none;
}

.easykatLight-searchResultTable td.header, .easykatLight-searchResultTable td.rowheader {
	font-size: 10pt;
	font-weight: bold;
	background-color: buttonface; 
	border: none;
}

.easykatLight-searchResultTable-az-sorted {
	/*background-image: url(../gfx/a-z.gif);*/
	font-size: 10pt;
	font-weight: bold;
}
	
.easykatLight-searchResultTable-za-sorted {
	/*background-image: url(../gfx/z-a.gif);*/
	background-color: buttonface; 
	font-size: 10pt;
	font-weight: bold;
}

.easykatLight-searchResultTable tr {
	vertical-align: middle;
	color: black;
}

.easykatLight-searchResultTable tr.altrow {
	background-color: rgb(242,242,242);
}

.easykatLight-searchResultTable tr.selected {
	background-color: rgb(209,220,249);
}

.easykatLight-searchResultTable td {
	font-size: 10pt;
	border: none;
}


/* Description:
 *   For tables containing just short label texts and mul-
 *   tiple comboboxes which should be arranged in a fixed
 *   scheme
 *
 * Used for:
 * - The product filter table above the product table
 *   of the product dialog's products tab (IDD_PRODUCT)
 *   which provides the filter for the products presented
 *   in the table below on the base of their attributes.
 *   Each cell of this filter table consists only of a la-
 *   bel and a pair of comboboxes
 *   The first style called 'easykatLight-comboboxTable'
 *   is used to set the layout and arrangement of the fil-
 *   ter table cells of which each is containing a pair of
 *   comboboxes. The second style called 'easykatLight-
 *   comboboxInnerTable' is used to arrange the pair of
 *   comboboxes which is stored within a separate table
 *   correctly side by side 
 */
.easykatLight-comboboxTable {
	font-size: 10pt;
	background-color: rgb(209,220,249);
	table-layout: fixed;
	overflow: hidden;
}

.easykatLight-comboboxTable tr {
	background-color: rgb(209,220,249);
}

.easykatLight-comboboxTable td {
	background-color: rgb(209,220,249);
	vertical-align: top;
}

.easykatLight-comboboxInnerTable {
	font-size: 10pt;
	background-color: rgb(209,220,249);
	table-layout: fixed;
}

.easykatLight-comboboxInnerTable td {
	padding: 3px 5px 3px 5px;
}


/* Description:
 *   For links which lead the user to a certain node of
 *   the tree on the left side of the screen containing
 *   the catalog's product groups
 *
 * Used for:
 * - Links inside of HTML files written by the moderator
 *   of the catalog to let the user navigate to a certain
 *   node of the product groups tree easily
 */
.easykat-navigateLink {
	/*text-decoration: none;*/
	color: black;
}