BODY {
   min-width: 990px; 	
   overflow-y:hidden;
   overflow-x:auto;

      
   font-family: tahoma, arial; font-size: 11px;
   
   scrollbar-face-color: #ececec;
   scrollbar-shadow-color: #A9A9A9;
   scrollbar-highlight-color: #A9A9A9;
   scrollbar-3dlight-color: #ececec;
   scrollbar-darkshadow-color: #ececec; 
   scrollbar-track-color: whitesmoke;
   scrollbar-arrow-color: dimgray;
   
   margin: 0px;
}

/* Overwritten in next button class def
button
{	
   height: 18px;
   color: #595959;
   background-color: #eeeeF3;
   background: url(../images/15pxLightButtonBGImage.png);
   font-family: tahoma, arial !important; font-size: 11px !important; 

   border: solid 1px #787EA6; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px;
   border-radius: 3px; 

   text-transform: capitalize;
   padding: 0 4px 0 4px; 
   margin: 0 2px 0 2px;
}
*/

button
{	
   /*position: relative;*/
   /*behavior: url(../script/pie.htc);*/
   
   height:20px;
   color: #363636; /* highlight: #0095DA ; */
   background-color: #F0F0F4;
   background-image:url(../images/bg_SilverButton.png);
   font-size:11px;
   
   border: 1px solid #B1B1B1;   
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   vertical-align:middle;
   padding: 0px 5px 0 5px;
   margin: 0 4px 2px 0;
}

button:hover
{	
    color: blue;
}

button.clsPrintUseBrowser /* class to indicate that the button is used for print to browser.  it is hidden initially */
{
	margin-left: 30px;
	display:none;	
}

DIV, TABLE, P {
   font-family: tahoma, arial;
	font-size: 11px;
}

FORM {
	margin: 0px 0px 0px 0px;
}

H4 {
	font-size: x-small;
	margin-bottom: .5mm;
}

IMG {
	cursor: hand;
}

input, select, textarea {
	behavior: url('scripts/common/inputerror.htc');
	
	background: #fdfdf4;
   font-size: 11px !important;
	border: 1px solid #7f9db9;
	margin: 0 3px 0 3px;
}

input, select {
	height: 20px;
}

INPUT.Numeric {
	behavior: url('scripts/common/inputerrornumericmask.htc');
	text-align: right;
}

INPUT.NumericRO {
	text-align: right;
	color: #777;
}

INPUT.NumStr {
	behavior: url('scripts/common/inputerrornumericmask.htc');
}

INPUT.ReadOnly {
	color: #777;
}

LI {
	margin-bottom: 1.5mm;
}

TEXTAREA {
	behavior: url('scripts/common/inputerror.htc');
	margin: 0px 0px 0px 1mm;
	overflow: auto;
}

TEXTAREA.ReadOnly {
	color: #777;
}

.clsCopyrightold {
	font-size: 7pt;
	position: absolute;
	/*top: expression(Math.max(body.scrollHeight - document.all.divCopyright.clientHeight - 1, body.clientHeight - this.clientHeight));*/
}

.clsCopyright {
   display: expression(document.all.divInitialStatus ? (document.all.divInitialStatus.style.display == 'none' ? '':'none') : '');
}

.clsCopyrightNew {
	font-size: 7pt;
	position: relative;
   display: expression(document.all.divFrame.currentStyle.display);
}

.clsMenu {
	position: absolute;
	width: auto;
	
	background: white url(../images/bg_contextMenu.png) repeat-y left;
	border: solid 1px black;
	visibility: hidden;
	padding: 0;
	z-index: 1000; /* make it really big so that it is not blocked by other widgets when displayed*/
}

.clsMenu A {
   width: 250px;
	color: black;
	background: transparent;
	border: 1px Solid transparent;
	text-decoration: none;
	padding: 2px 10px 3px 27px;
	margin: 1px;
	zoom: 1;
}

.clsMenu A:hover {
   width: 250px;
	color: Black;
	background: #f5f5dc;
	border: 1px Solid black;
	padding: 2px 10px 3px 27px;
	margin: 1px;
	zoom: 1;
}

.clsContextMenu {
	position: absolute;
	width: auto;
	
	background: white url(../images/bg_contextMenu.png) repeat-y left;
	border: solid 1px black;
	visibility: hidden;
	padding: 0;
	z-index: 1000; /* make it really big so that it is not blocked by other widgets when displayed*/
}

.clsContextMenuItem {
	color: black;
	background: transparent;
	border: 1px Solid transparent;
	padding: 2px 10px 3px 27px;
	margin: 1px;
}

.clsContextMenuItemOver {
	color: Black;
	background: #f5f5dc;
	border: 1px Solid black;
	padding: 2px 10px 3px 27px;
	margin: 1px;
}

.clsMenuBar {
	height: 40px;
	background: #077bd0 url(../images/bg_38pxMenubar.png);
	border-top: 1px solid #0056a7; border-bottom: 1px solid #0056a7;
	/*margin-bottom: 2mm;*/ /*StyleMod: Margin converted to pixels and moved below the simulated shadow (next class) */
}

.clsMenubar_simulatedShadow
{
   height: 3px;
   font-size: 1px;
   line-height: 1px;
   overflow: hidden;

   border: none;
  
   /* Ordered them this way to highlight the color shift, simulating the shadow. */
   border-top: solid 1px #AAA;
   background-color: #CCC;
   border-bottom: solid 1px #EEE;
   
   margin-bottom: 10px;
}

.clsMenuBar TD {
	color: White;
	padding: 0px 5px 0px 5px;
}

.clsMenuBar TD A {
   color: #fff;
   font-size: 13px;
   font-family: 'Trebuchet MS' !important;
   text-decoration: none;
}

.clsMenuBar TD A:hover {
	color: Moccasin;
}

.clsPageDivision {
	width: 100%;
	z-index: -1;
   margin: 6px 0 0 0;
}

/* ########## Start Container Styling ######################################## */

/*StyleMod: This is the main container. On the homepage it is implemented as a table. */
.clsDialog {
   background-color: #FFF;
   border: 1px solid #c0c0c0; /* was #ccc */
   margin: 0 0 5px 0;
}

/*StyleMod: To simulate the 1px inner white border (since the bg of the above clsDialog is white): */
.clsDialog th {
  padding: 1px;
}

.clsDialogCaption { /*StyleMod: Typography modifications */
	height: 40px;
	color: #015CAE;
	font-family: 'Trebuchet MS' !important;
	font-size: 18px;
	text-align: left;
	
	/*StyleMod: On the homepage, this is a table with no cellpadding or cellspacing set to zero, so we'll zero them out here: */
   border-spacing: 0px;
   border-collapse: collapse;
}

.clsDialogCaption th{
	font-weight: normal; 
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D4D7D7', EndColorStr='#FFFFFF', startY='0', finishY='100');
	vertical-align: top;
   padding: 6px 0 0 10px;	
}

.clsCaptionText
{
   color:#595959;
   font-family:Trebuchet MS;
   font-size:17px;
}

.clsDialogFooter {
	/*height: 36px;*/
	text-align: left;
	padding: 6px 2px 4px 0;
}

.clsDialogContent {
	/*border: 1px inset;*/
	padding: 0mm 0mm 0mm 0mm;
}

.clsDialogBorder {
/*
	top: 1ex;
	left: 1ex;
	width: 98%; height: 200;
	overflow-x: visible;
	padding: 0;
*/
   height: auto;
   overflow-y: scroll;
   margin: 0 6px;
	scrollbar-face-color: #D4D7D7;
	zoom: 1;
}

.clsDialogListItem { 
	border-bottom: 1px solid Black;
	cursor: hand;
}

.clsDialogSmallText {
	color: #444;
	font-size:11px; font-family: tahoma, arial; font-weight:normal;
	text-indent: 1mm;
	vertical-align:text-bottom;
}

.clsInputFieldLabel
{
    color: #444;
    font-size:11px; font-family: tahoma, arial; font-weight:bold;
    vertical-align: bottom;
    white-space: nowrap;
    /*text-align: right;*/
    padding: 3px 0 3px 8px;
}

.clsInputFieldLabelNoBottom
{
    color: #444;
    font-size:11px; font-family: tahoma, arial; font-weight:bold;
    vertical-align: middle;
    white-space: nowrap;
    padding: 3px 0 3px 8px;
}

.clsRegularLabel
{
    color: #444;
    font-size:11px; font-family: tahoma, arial; font-weight:bold;
    white-space: nowrap;
}
/* ########## End Container styling ########################################## */
/* ########## Start Sub-Container Styling #################################### */

/*StyleMod: This is the sub-container -Header- which is coded as TRs. Removed all definitions and moved color def to the next class. */
.clsSection {
}

/*StyleMod: This is the sub-container header itself (The TD in the above mentioned TR). Added new bgImage, modified borders. Mostly from ADV.*/
.clsSection TD {
	height: 24px;
   color: #444;
   background: #cadcfa;
	background: url(../images/24px_BlueContainerHeaderBG.png);
	font-family: Trebuchet MS !important; font-size: 14px !important; font-weight: normal !important;

   border: solid 1px #697d84;
  
   cursor: pointer;
   white-space: nowrap;
   padding: 0 0 0 9px;
   margin: 0 0 2px 0;

}
.clsSection TD DIV {
   font-family: Trebuchet MS !important; font-size: 14px !important; font-weight: normal !important;
}

.clsSection TD INPUT {
	margin-left: 0mm;
}

/* This is the expandable inner section that appear inside clsSection container bodies. To keep uniformity with the above, 
these are also applied to TRs, so all styling is applied in the next classes. */
.clsSubSection {
}

.clsSubSection TD {
   height: 20px;
   color: #444;
   background-color:#E7E7F0;
   border: solid 1px #C7C7D0;
   cursor: hand;
   padding: 1px 2px 0 7px;
}

.clsSubSection TD DIV {
   font-family: Trebuchet MS !important; font-size: 13px !important; font-weight: normal !important;
   padding:0px;
   margin:0px;
}

/*StyleMod: This is the tab body. It is coded as DIVs in Home.htm. Modified padding.*/
.clsSectionContent {
   /*
   background-color: #fafaff;
   border: solid 1px #697d84 !important;

   padding: 2px;
   margin: 10px;
   */
   padding: 10px; /*0mm 2mm 2mm 8mm;*/
   overflow-y: scroll;
}

.clsContainerBody { /* If this class is to be used as a header-less container (without the .clsSection TD, defined above), add the next modifier (standAlone) to it. */
   width: 100%; /* This will help TABLE elements inside Container Body classed DIVs have their 100% width cake and eat it too. */
   border:solid 1px #697d84; border-top:none;
   background:#F8F8Fd;
   overflow-y: auto;
   padding:2px 7px 7px 7px;
   margin:0 0 2px 0;
}

.standAlone {
   border-top: solid 1px;
   padding: 12px 14px;
   margin: 0 6px;
}

/* ########## End Sub-Container syling ##################################### */

/* ########## New Form Label Style ######################################### */
.clsLabelStyle {
   color:red;
}
/* ######################################################################### */

.clsStatus {
	background: White;
	border: 2mm ridge #007AC2;
	color: #007AC2;
	font-style: italic;
	left: expression(body.scrollLeft + (body.clientWidth / 2) - (this.clientWidth / 2));
	padding: 5mm;
	position: absolute;
	text-align: center;
	top: expression(body.scrollTop + (body.clientHeight / 2) - (this.clientHeight / 2));
}

.clsMenuAppCtl {
	background: #C8CC98;
	border-bottom: 1px outset Silver;
	border-left: 1px solid GhostWhite;
	border-right: 1px outset Silver;
	border-top: 1px solid GhostWhite;
	padding: 5px 15px 5px 15px;
	position: absolute;
	visibility: hidden;
	width: auto;
}

.clsMenuAppCtl A {
	color: black;
	text-decoration: none;
}

.clsMenuAppCtl A:hover {
	color: White;
	background-color: #C8CC98;
}

.clsMenuBarAppCtl {
	background: transparent;
	margin: 0mm;
}

.clsMenuBarAppCtl TD {
	color: White;
	padding: 0px 5px 0px 5px;
}

.clsMenuBarAppCtl TD A {
	color: White;
	text-decoration: none;
}

.clsMenuBarAppCtl TD A:hover {
	color: Moccasin;
}

/* indicate input validation error. It is added/removed in *.htc files */
.clsInputError {
	border: 1px solid red;
}

/* IE doesn't support changing of border color etc for select element.  
So we have to resort back to changing background color, but only for select element with the same class name */
select.clsInputError {
	background: red;
	color: white;
}

.clsTabError {
	display: none;
	width: 14px; height: 14px;
	font-size: 1px;
	background-image: url("../images/bullets_balls_red_001.gif"); /* to be replaced later with a different image */
	background-repeat: no-repeat;
	vertical-align: middle;
	padding: 0;
	margin: 8px 8px 0 0;
}

.clsSubSectionError {
	display: none;
	width: 14px; height: 14px;
	font-size: 1px;
	background-image: url("../images/bullets_balls_red_001.gif"); /* to be replaced later with a different image */
	background-repeat: no-repeat;
	vertical-align: baseline;
	padding: 0;
	margin: 5px 0 0 5px;
}

.clsSectionLabel {
   /* Used to display section labels in a read-only mode; note that default for display is none. 
      Also Used to display section labels for UI groups flush with the white background of the main container along with a .block or .inline class modifier. */
	display: none;
	width: 100%;
	color: #595959;
	background-color: transparent;
	border-bottom: 2px solid #5555AA;
	font-family: trebuchet ms; font-size: 16px;
	line-height: 18px;
	white-space: nowrap;
	margin: 4px 0 4px 0;
}

.block {
   display: block;
}

.inline {
   display: inline;
}


.clsMouseOver {/* applied to list items when mouse over for context menus.*/
	background-color: #ebebef; 
}

.clsTabHeader { /* used to define the tab header element, li. */
                
}

/*StyleMod: ulTabs is the name of the main tab group on home.htm */
#ulTabs{
   font-family: arial; font-size: 12px;
}

.clsOtherActions { /* placeholder now for more action items and will be used to hide in view all mode */
   /*
   height: 26px;
   color: #0095DA;
   color: #666666;
   background-color: #F3F3F3;
   font-size: 9pt;
   font-weight: bold;

   border: 0px solid #B1B1B1;   
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   margin: 0 3px 0 0;  
   */
   vertical-align: top;
   padding: 0 0 1px 0;
}

sub,
sup { /* from ADV, normalize.css code */
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: super;
    margin: 0 2px;
}
sup { /* from ADV, normalize.css code */
    top: -0.5em;
}
sub { /* from ADV, normalize.css code */
    bottom: -0.25em;
}

/* ############ BHOS Grid ##################################################### */

.clsTable { /* If the table is placed inside a #tableScroller, then add the following modifier (.scrollBody) to its class attribute. */
   background-color: white;
   font-size: 11px; font-family: Tahoma, Arial;
   border: solid 1px #829daa; border-collapse: collapse;
   table-layout: fixed;
   cursor: hand;
   margin: 8px;
}

.scrollBody {
   border-top:none; border-bottom:none;
   margin:0px;
}

.clsTable th, .clsTable thead th{
   height: 17px;
   color: #425d6a;
   background-color: #b9e4fd; background: url(../images/15pxLightBlueBGImage.png);
   font-family: Trebuchet MS, Tahoma, Arial; font-size: 12px;
   border: solid 1px #c9ebfd;
   text-align: left;
   white-space: nowrap;
   vertical-align: bottom;
   padding: 1px 6px 0px 6px;
}

.clsTable th span {
   white-space: nowrap;
}

.clsTable .clsWidthProppers th {
   height: 0; 
   border-color:none !important;
}

.clsTable td {
   width: auto;
   border: none; border-top: solid 1px #C4C4CC;
   vertical-align: top;
   padding: 4px 6px 4px 6px;
}

.clsTable td img {
   width: auto; height: 15px; 
   border: none;
   margin: 0;
}

#tableScroller {
   overflow-y: scroll;
   border-bottom: solid 1px #829daa; border-top:none;
   margin: 0 8px;
}

.clsGridControls {
   background-color: #C4C4CC;
   padding: 2px 4px 2px 8px;
}

.clsGridControlButton {
   width: 20px; height: 18px;
   margin: 0;
}

/* ######## End BHOS Grid ##################################################### */
 
.clsRequiredFieldIndicator
{
    color: #D22;
}

.clsExpandCollapse
{
   float:right; 
   white-space:nowrap; 
   padding: 0 8px 5px 0;
}

.clsBHOSButton {
   height:20px;
   color: #363636; 
   background-color: #F0F0F4;
   background-image:url("../Images/bg_SilverButton.png");
   font-size:11px;
   
   border: 1px solid #B1B1B1;   
   border-radius: 5px;

   vertical-align:middle;
   padding: 0px 5px 0 5px;
   margin: 0 4px 2px 0;
}

.clsButtonBox {
   text-align: right;
   margin: 0 1px 3px 0;
}

.clsButtonBox_NoMargin {
   text-align: right;
}

.clsNotFoundMessage {
   color: #595959;
   font-family: tahoma, arial; font-size:12px; font-weight:bold; font-style: italic;
}

.clsCommentIcon {
	width: 16px; height: 14px;
	font-size: 1px;
	background-image: url("../images/exist.gif"); /* to be replaced later with a different image */
	background-repeat: no-repeat;
	vertical-align: middle;
	padding: 0;
	margin: 8px 8px 0 0;
}

/* ######## Collateralizer Widget ############################################# */

.clsCollateralizerCanvas {
   height: 433px;
   background-color: white;
   border: solid 1px #444;
   margin: 5px;
}

.clsCollat_Headers {
   color:#595959;
   font-family:Trebuchet MS; font-size:18px;
   text-align: center;
}

.clsCollat_Headers .left {
   width: 32%; 
   float: left;
   padding: 4px 0 8px 10px; 
}

.clsCollat_Headers .center {
   width: 32%; 
   padding: 4px 0 8px 0; 
}

.clsCollat_Headers .right {
   width: 32%;
   float: right;
   padding: 4px 16px 8px 0;
}

.clsCollateralizerInnerCanvas {
   position: absolute;
   left: 15px;
   top: 66px;
   width: 600px;
   height: 390px;
   overflow-y: auto; 
}

/* Clear: Fixed. Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

.clsCommentHistory
{
   margin-left: 8px;
   padding-left: 4px;
   border:1px solid #7f9db9;   
   word-wrap: break-word;
   width:526px;
}

.clsMyComment 
{
   width:526px;
   height:88px;
}

/* ############ Menubar ############ */
#mainNav
{
  height: 38px;
  float: left;
  margin: 0px;
  padding: 0px 14px;
}

#mainNav li
{
   float: left;
   padding: 0 1px 0 1px;
}

#mainNav li.selected
{
   background: #2c91dc url(../images/bg_38pxMenubarHighlight.png);
   /* 
     Now that the parent bg isn't a filter anymore, we'll just user an image here as well, and get 
     better image quality. Trade-off is a costly http request, so we might change this later.

   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c91dc', endColorstr='#1767b3',GradientType=0 );
   */
   border-left: 1px solid #61ace9;
   border-right: 1px solid #61ace9;
   padding: 0;
}

#mainNav a
{
   color: #fff;
   font-family: 'Trebuchet MS', 'Arial', sans-serif; font-size: 13px;
   border: none;
   text-decoration: none;
   outline: none;
   line-height: 38px;
   padding: 0 18px 0 18px;
}

#mainNav a.home
{
   background: url(../images/home_icon.png) no-repeat 50% 50%;
   border: none;
   text-decoration: none;
   outline: none;
   line-height: 38px;
   white-space: nowrap;
   padding: 0 18px 0 18px;
}

#mainNav a.home
{
   background: url(../images/home_icon.png) no-repeat 50% 50%;
   border: none;
   outline: none;
}

/* ####################################################################################### */
/* #### Start NAV.CSS #################################################################### */

/* ############# Menus ############# */

ul.mainNavMenu
{
   position: absolute; width: 610px;
   background-color: #f0f9fd;
   border: 1px solid #bad3e6;
   border-top-width: 0;
   display: none;
   list-style: none;
   margin: 0 0 0 -1px;
   padding: 8px 10px 0px 10px;
   z-index: 999;
}

ul.mainNavMenu li
{
   height: 100%;
   float:none !important;
   padding: 0;
}

ul.mainNavMenu li div { width:100%;}

ul.mainNavMenu li div a
{
   color: #595959 !important;
   font-family: 'Trebuchet MS', 'Arial', sans-serif; font-size: 13px;
   line-height: 18px !important;
   border: solid 1px #f0f9fd !important;
   text-decoration: none;
   outline: none;
   display: block;
   white-space: nowrap;
   padding: 0px 4px 1px 4px !important;
   margin-bottom: 1px !important;
}

ul.mainNavMenu li div a:hover
{
   background-color: #deeefc;
   border: solid 1px #bad3e6 !important;
}

ul.mainNavMenu li div a.inactive
{
   color: #c0c0c0 !important;
}

ul.mainNavMenu li div a.inactive:hover
{
   color: #c0c0c0 !important;
   background-color: transparent;
   border: solid 1px transparent !important;
}
/* ############ Top Nav ############ */

ul.clsTopNavArea
{
   background: none;
   font-family: Arial; font-size: 11px; font-weight: bold;
   display: block;
	list-style: none;
	float: right;
   clear: right;
   margin: 0 4px 2px 0;
   padding: 0;
}
   
ul.clsTopNavArea .clsTopNavItem
{
  position: relative;
  color: #6e6e6e !important;
  background: url(../images/divider.gif) no-repeat 0 50%;
  float: left;
  padding: 2px 14px;
  zoom: 1;
}

ul.clsTopNavArea li.first-child /* first and last child pseudo selectors not supported by IE8 with HTML4 transitional doctype */
{
   background: none;
}

.topNavMenuHeader
{
   cursor: hand;
}

.topNavMenuHeader_highlighted
{
   background-color: #EEEEF6 !important;
   z-index: 1;
}

ul.topNavMenu
{
   position: absolute; top: 17px; right: 0px;
   width: 180px;
   background: #EEEEF6;
   text-align: left;
   list-style: none;
   cursor: default;
   display: none;
   padding: 8px 0 3px 8px;
   margin: 0;
}

ul.topNavMenu li div {
   font-family: Trebuchet MS, Arial; font-size: 12px; font-weight: normal;
   
   white-space: nowrap;
   padding: 0 8px 0 0;
}

ul.topNavMenu li div a
{
   color: #595959;
   border: solid 1px #EEEEF6;
   text-decoration: none;
   outline: none;
   display: block;
   padding: 1px 4px 0 4px;
}

ul.topNavMenu li div a:hover
{
   background: #f9fafc;
   border: solid 1px #d4d7d7;
}

/* ######### Column Support ######### */

.menuColumn
{
   font-size: 100%;
   float: left;
}

.verticalDivider
{
   width:1px; height:94%;
   background-color:#BAD4E5;
   float:left;
   margin: 6px 0 0 10px;
}

/* #### End NAV.CSS ###################################################################### */
/* ####################################################################################### */

@media print {
   .clsContainerBody { /* If this class is to be used as a header-less container (without the .clsSection TD, defined above), add the next modifier (standAlone) to it. */
      width: 100%; /* This will help TABLE elements inside Container Body classed DIVs have their 100% width cake and eat it too. */
      border:solid 1px #697d84; border-top:none;
      background:#F8F8Fd;
      overflow-y: visible;
      padding:2px 7px 7px 7px;
      margin:0 0 2px 0;
   }
   .clsSectionContent {
      overflow-y: visible;
   }
}

@import url("ProductLogo.css");