/*****************************************************************************
*  Project	: eConfig Configurator GUI (ECG) 
*  Creation Date: 2005-06-07
*  Company	: Hewlett Packard, Inc.
*  Source : http://econfgui-prod.bbndirht.external.hp.com/eConfigureWeb/resources/css/gui-style.css
*  Copyright	: Copyright (c) 2005, Hewlett Packard, Inc.
*  
*  Revision History
*  2005-06-07 - JNY - @00001 - added file comment header
*  2005-06-07 - JNY - @00002 - TD226 - 
*             Component pricing should be right justified
*  2005-06-21 - JQN - @00003 - reformatting and adding comments
*  2005-08-22 - JNY - @00004 - Add.lead time
*  2005-10-14 - JGD - @00005 - Modify errorMessage style to make font weight bold and color red
*  2005-11-4  - ANL - @00006 - Change pricebar default bgcolor to cover table-cell color lost caused by set visibility=hidden in IE.
*  2005-11-9  - ANL - @TD65 - fix additional grey line cuts through text
*  2006-06-06 - JNY - @00007 - QC176 multi level nesting
**************************************************************************/

/*****************************************************************************
 * General Page Elements
 * - these styles are not tied to any particular content section
 ****************************************************************************/

body, td, th, caption {
    font-family: Arial, Verdana, Helvetica, Sans-serif;
    font-size: 12px;
}

.bold {
    font-weight: bold;
}

.small {
    font-size: 11px;
}

.smallbold {
    font-size: 11px; font-weight: bold;
}

.errorMessage {
    /* @00005 */
    font-weight: bold; color: red;
}

span.indicatorFlags {
    color: #0000ff
}

.commButton {
    border-right: #CC0000 2px solid;
    border-top: #FF9899 2px solid;
    border-left: #FF9899 2px solid;
    border-bottom: #CC0000 2px solid;
    font-size: 11px;
    font-weight: bold;
    color: white;
    font-family: Arial, Verdana, Helvetica, Sans-serif;
    background-color: #FF0000;
    text-align: center;
    padding-right: 0px;
    margin-right: 0px;
}

.primButton {
    border-right: #000000 2px solid;
    border-top: #999999 2px solid;
    border-left: #999999 2px solid;
    border-bottom: #000000 2px solid;
    font-size: 11px;
    font-weight: bold;
    color: white;
    font-family: Arial, Verdana, Helvetica, Sans-serif;
    background-color: #333333;
    text-align: center;
    padding-right: 0px;
    margin-right: 0px;
}

.secButton {
    border-right: #333333 2px solid;
    border-top: #CCCCCC 2px solid;
    border-left: #CCCCCC 2px solid;
    border-bottom: #333333 2px solid;
    font-size: 11px;
    font-weight: bold;
    color: white;
    font-family: Arial, Verdana, Helvetica, Sans-serif;
    background-color: #666666;
    text-align: center;
    padding-right: 0px;
    margin-right: 0px;
}

/*****************************************************************************
 * Templates
 * - these styles apply to the hidden template definitions
 ****************************************************************************/
/*
table.templates {
    width: 600px;
    border-collapse: collapse;
    border-width: 0px;
}

table.templates td { 
    padding: 2px;
}
*/

/*****************************************************************************
 * Top Info
 * - these styles apply to top info section (static price bar)
 ****************************************************************************/

table.topInfo {
    width: 100%;
	/* @00006 */
    /*background-color: #6699cc;*/
	
	background-color:  #36639b;	
    border-collapse: collapse;
}

table.topInfo tr {
    color: #e6e6e6;
	background-color:#dae4ef; /* Pale Blue */
}

table.topInfo tr.priceInfo {
   color: #FFFFFF;
   background-color: #36639b; /*Dark blue */
}


table.topInfo tr.priceInfo td .bold {
	font-weight: bold;
	font-size: 14pt;
}

table.topInfo tr.priceInfo td #totalPrice {
	font-weight: bold;
	font-size: 14pt;
	color: #FFFF80;
}

table.topInfo tr.priceInfo td {
    padding: 0px;
}

/*****************************************************************************
 * Product Info
 * - these styles apply to product info section
 ****************************************************************************/

table.productInfo {
    width: 100%;
    border: 3px solid #36639b;
    border-collapse: collapse;
}

table.productInfo thead {
    color: #FFFFFF;
    background-color: #36639b;
    font-weight: bold;
}

table.productInfo tfoot {
    color: black;
    background-color: #E7E7E7;
}

table.linkNavigation {
    background-color: #E7E7E7 ;
}

table.linkNavigation thead tr {
    height: 2px; color: #000000;
    background-color: #FFFFFF;
}

table.linkNavigation thead tr + tr {
    height: 2px; background-color: #36639b;
}

/*****************************************************************************
 * Configurator - General
 * - these styles apply to configurator content (cstics, cstic values, etc)
 ****************************************************************************/

table.configurator {
    width: 100%;
    border-collapse: collapse;
    border-width: 0px;
}

table.configContent {
    width: 100%;
}

table.configContentNoScroll {
    width: 100%;
}

table#fixedPriceBox {
    background-color: #E7E7E7;
    border: solid 1px #36639b;
    top: 4px;
    left: 250px;
    visibility: hidden;
}

table.configurator td {
    padding: 2px;
}

a.productInfoToggle img {
    color: white;
    background-color:
    white; border: none;
}

a.csticToggle img {
    color: white;
    background-color: white;
    border: none;
}

a.csticGroupToggle img {
    color: white;
    background-color: #36639b;
	/*background-color: white;*/
    border: none;
}



/*****************************************************************************
 * Configurator - CsticGroup
 * - these styles apply to csticGroups
 * - need to be explicitly named because IE does not support E > F notation, CSS 2.1
 ****************************************************************************/
 /* @00007 */
table.csticGroup {
    width: 100%;
    border-collapse: collapse;
    /* (Modified by Senthil) No Border */
    border: solid 2px #36639b;
}
/* @00007 */
thead.csticGroup {
    color: #FFFFFF;
    background-color: #36639b;
    border: solid 2px #36639b;
    font-weight: bold;
}

.csticGroupLabel {
	width: 186px;
    text-align: left;
    /*width: 236px;*/
    /*color: #FFFFFF; */
    /* background-color: #36639b; */
}

.headingFieldHidden {
    color: #FFFFFF;
    /*background-color: #36639b;*/
    width: 1px;
    /*visibility: hidden;*/
    display: none;
}

.headingAvail {
    width: 120px;
    color: #FFFFFF;
    /*background-color: #36639b;*/
    text-align: center;
}

.headingEol {
    width: 120px;
    color: #FFFFFF;
    /*background-color: #36639b;*/
    text-align: center;
}

.headingPrice {
	width: 170px;
    /*width: 120px;*/
    color: #FFFFFF;
    /*background-color: #0166FE;*/
    text-align: right;
}

.headingLeadTime {
    width: 120px;
    color: #FFFFFF;
    /*background-color: #0166FE;*/
    text-align: center;
}

.csticGroupToggle {
	width: 5px;
    text-align: left;
    /*width: 15px;
    text-align: right;*/
}

/*****************************************************************************
 * Configurator - Subconfigurations
 * - these styles apply to subconfigurations
 * - need to be explicitly named because IE does not support E > F notation, CSS 2.1
 ****************************************************************************/
/*@00007*/
table.subConfiguration {
    width: 100%;
    border: solid 2px #CCCCCC;
    /*border-width: 0px;*/
    border-collapse: collapse;
    /*background-color: #CCCCCC;*/
    table-layout: fixed;
}
/*@00007*/
thead.subConfiguration {
    color: #000000;
    background-color: #CCCCCC;
    font-weight: bold;
    border-width: 0px;
}

/*****************************************************************************
 * Configurator - Cstics
 * - these styles apply to cstics
 * - it is ok use decendant notation here as there are no tables inside
 ****************************************************************************/

table.cstic {
    border-collapse: collapse;
    /* (Modified by Senthil) No Border */
    /* @00007 */
    border: solid 2px #E7E7E7;
    background-color: #FFFFFF;
    table-layout: fixed;
    width: 100%;
}

table.cstic thead {
    color: #000000;
    background-color: #E7E7E7;
    font-weight: bold;
    border-width: 0px;
}

table.cstic tbody {
    color: #000000;
    background-color: #FFFFFF;
    font-weight: normal;
    border-width: 0px;
}

/* (Modified by Senthil) Gray Line eliminated */
table.cstic  td {
    /* border-bottom: solid 1.5px #e7e7e7 */
}

/* @TD65 - Additional grey line eliminated */
table.cstic  tbody  td {
    border-style: none
}

/* (Modified by Senthil) Gray Line eliminated */
/* @00007 */
table.cstic  tr.csticValue  td {
    /*border-bottom: solid 1.5px #e7e7e7*/
    border-style: none
}


/*****************************************************************************
 * Cstic Values
 * - these tyles apply to 
 ****************************************************************************/
 
/* (Modified by Senthil) Gray Line eliminated */
.csticValue {
	display:table-row; 
    /* border-bottom: solid 1.5px #e7e7e7 */
}

.csticValueHidden {
    display:none
}

.csticValueFieldHidden {
    width: 5px;
	/*width: 0px;
    visibility: collapse;*/
}

.csticValueInputCol {
	width: 25px;
    /*width: 25px;*/
}
.csticValueInput {
	text-align: center;
}

.csticValueLabelCol {
    width: 180px;
}
.csticValueLabel {
	text-align: left;
}

.csticValuePriceCol {
    width: 110px;
}
.csticValuePrice {
	width: 10px;
    text-align: right;
}

.csticValueAvailCol {
    width: 110px;
}
.csticValueAvail {
    text-align: center;
}

.csticValueEolCol {
    width: 110px;
}
.csticValueEol {
    text-align: center;
}

.csticValueLeadTimeCol {
    width: 110px;
}
.csticValueLeadTime {
    text-align: left;
}

.csticValueInfoCol {
    width: 10px;
}
.csticValueInfo {
}

/*****************************************************************************
 * BOM values
 * 
 ****************************************************************************/
.bomHeaderValue {
 
    font-weight: bold;
    color: white;
    background-color: #36639b;
    text-align: left;
}
.bomOddRowValue {

    background-color: #E7E7E7;
    text-align: left;
}

.bomLabelValue {
 
    font-weight: bold;
    text-align: left;
} 
   
.bomTableValue {
 
    width: 100%;
   /* border: solid 1px; */
   /*  bordercolor: #0166FE; */
    
}

.bomCellValue {
 
  /*  border: solid 2px; */
  /*  bordercolor: black; */
}


/*****************************************************************************
 * BOM Table
 * 
 ****************************************************************************/

table.bom {
    
    /*border: solid 2px #0166FE;*/
    border-collapse: collapse;
    width: 100%;
}