/*
AUTHOR:				Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration. 
DATE:				08/04/2011
DESCRIPTION:		Shared CSS classes for SBA Look-and-Feel *** USING STRICT MODE ***. 
NOTES:				None. 
INPUT:				None. 
OUTPUT:				Shared CSS classes for SBA Look-and-Feel. 
REVISION HISTORY:	12/01/2015, SRS:	Added th1 as an override of default, now called Home Page Theme. 
					11/09/2015, SRS:	Reworked lots of stuff to be "themeable" and simpler because we no longer have 
										to support MSIE 8: Got rid of files for quirks mode, which we haven't generated 
										in over 4 years, to relieve that maintenance burden. 
					03/04/2015, SRS:	Made the color scheme considerably lighter, colors chosen by team consensus. 
					05/23/2014, SRS:	Made CenterThisInAppData a class, in addition to it's already being a special id. 
					04/24/2013, SRS:	Made .leftnav use right:0px instead of width:196px. This allows AppNavSlider.js to 
										adjust the frame width and automatically have framed document react to the change. 
					01/03/2013, SRS:	Made reqdlabel/reqddata more distinctive. Added fieldset.radio and legend.radio. 
					02/02/2012, SRS:	Added dem_warnmsg class. Removed right:0px from leftnav, because conflicts with also 
										specifying width:196px. (Don't want to give browser freedom to choose the wrong one.) 
					08/30/2011, SRS:	Darkened disableddata and viewdata somewhat and restored old border:1px outset #000. 
					08/10/2011, SRS:	Cannibalized sba.css to create sba.strict.css (strict mode only version). Moved all 
										cf_sbalookandfeel and cf_mainnav styles to sbalookandfeel.quirks/strict.css and 
										mainnav.quirks/strict.css, so that this file will affect the page less horribly 
										if mode doesn't get set correctly. Will do parallel maintenance of sba.quirks.css 
										and sba.strict.css till we switch over to strict mode permanently. 
					08/03/2011, SRS:	Fixed an extraneous semicolon that invalidated an !important declaration. 
					07/29/2011, SRS:	Defined new .mainnavexternalsys class for standard appearance of inter-system 
										main navigation buttons. 
					11/09/2010, SRS:	Now that CSS buttons are proven to work, made code more efficient. Added new 
										class br.tbl_row_spacer, because margin-bottom doesn't work with tbl_row. 
					10/04/2010, SRS:	Reinstated "3 color stop" gradient for buttons. First attempt (checkpoint). 
										Allowed them to be hotlinks in all browsers (not just MSIE). 
					09/17/2010, SRS:	Adjusted MainNav buttons' padding from 0.33em to 0.1em, which allows the 3rd row 
										to be visible and legible if the 2nd row wraps. MSIE is different (0.2em), but 
										MSIE differences are in the sba.msie6or7.css and sba.msie6or7.css3pie.css files. 
					07/20/2010, SRS:	Continuing "New Look-and-Feel", moved AppName to between SBALogo and MainNav. 
					10/23/2009 - 
					07/20/2010, SRS:	Original implementation. Cannibalized existing sba.css. Got rid of old styles 
										(from www.sba.gov's sba.css), which shouldn't be used anywhere in WebApps. If 
										any of them WERE in use, we can recover them later from check-in/check-out on a 
										case by case basis. Added "New Look-and-Feel". Took a checkpoint at 07/20/2010. 
*/

/* Global layout defaults: */
html, body, th, td
	{
	/* For serif,		we previously used:	"Times New Roman", Times, Schoolbook, "New York", serif; */
	/* For serif,		then we used:		Merriweather, "Times New Roman", serif; */
	/* For sans-serif,	we previously used:	Verdana, Arial, Helvetica, sans-serif; */
	/* For sans-serif,	then we used:		"Source Sans Pro", Helvetica, Arial, Verdana, sans-serif; */
	font-family:						"Source Sans Pro", Helvetica, Arial, Verdana, sans-serif;
	font-size:							10pt;
	}
html, body
	{
	background-color:					#fff;	/* Not inherited. But default is "transparent", which is just as good. */
	border:								0px;	/* Not inherited. We want body to have them. */
	margin:								0px;	/* Not inherited. We want body to have them. */
	padding:							0px;	/* Not inherited. We want body to have them. */
	}
.normal
	{/* For the most part, "normal" has become unnecessary cruft, now that "html, body, td" defaults to 10pt. */
	font-size:							10pt;
	}

/* ************************************************************************************************** */

/* SBA look-and-feel related: */

/* AppInfo region: */

.inthead
	{/* Intended for use with block containing .infolabel and .infodata blocks, but this wasn't enforced: */
	height:								24px;	/* Same as AppInfo region itself. */
	color:								#000;
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	font-weight:						normal;
	line-height:						24px;	/* Middle-aligns text (but only text), because same as AppInfo height. */
	}
.infodata
	{/* No guarantee that there's a containing block with .inthead, so color/font/line properties have to be repeated: */
	height:								24px;	/* Same as AppInfo region itself. */
	color:								#000;
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	line-height:						24px;	/* Middle-aligns text (but only text), because same as AppInfo height. */
	}
.infolabel
	{/* No guarantee that there's a containing block with .inthead, so color/font/line properties have to be repeated: */
	height:								24px;	/* Same as AppInfo region itself. */
	color:								#000;
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	font-weight:						normal;
	line-height:						24px;	/* Middle-aligns text (but only text), because same as AppInfo height. */
	}
div.infodata
	{/* Force divs with this class to be variable width: */
	display:							inline-block;
	}
div.infolabel
	{/* Force divs with this class to be variable width: */
	display:							inline-block;
	}

/* AppNav region: */

.leftnav				/* AppNav region's background. */
	{
	position:							absolute;/* Not relative, which chops off background when there's no more to image. */
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	min-width:							196px;
	background-color:					#acf;
	color:								#000;
	}
body.th1 .leftnav,		/* AppNav region's background if leftnav given in table or div under body. */
body.th1.leftnav		/* AppNav region's background if leftnav given in the body tag itself. */
	{/* th2 is OCIO Classic Theme */
	color:								#fff;
	background-color:					#0071bc;
	}
body.th2 .leftnav,		/* AppNav region's background if leftnav given in table or div under body. */
body.th2.leftnav		/* AppNav region's background if leftnav given in the body tag itself. */
	{/* th2 is OCIO Classic Theme */
	color:								#fff;
	background-color:					#7086a9;/* Was #059. Is now rgb(112,134,169) = bottommost, darkest pixel of gradient.gray.png. */
	}
body.th3 .leftnav,
body.th3.leftnav
	{/* th3 is Breast Cancer Awareness Month Pink */
	background-color:					#fac;
	}
body.th4 .leftnav,
body.th4.leftnav
	{/* th4 is Financial Green */
	background-color:					#afc;
	}
body.th5 .leftnav,
body.th5.leftnav
	{/* th5 is Sheri's Pale Blue */
	background-color:					#F0F7FF;
	}
body.th6 .leftnav,
body.th6.leftnav
	{/* th6 is Text-Only Black and White */
	background-color:					#fff;
	}

.leftnav,		.leftnav td
	{
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	}
.leftnavtitle
	{
	color:								#fff;
	font-size:							12pt	!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	width:								100%;
	text-align:							center;
	}
body.th1 .leftnavtitle,
body.th2 .leftnavtitle
	{/* th2 is OCIO Classic Theme. Not sure why this was needed. */
	color:								#fff;
	}

/* Hotlink pseudo class order: ":link" and/or ":visited", then ":hover", then ":active". Not sure about ":focus", but seems to be okay just after :hover. */

/* AppNav region's hotlinks: */

.menuitem
	{
	color:								#000;
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	text-decoration:					none;
	}
body.th1 .menuitem,
body.th2 .menuitem
	{/* th2 is OCIO Classic Theme */
	color:								#fff;
	}
.menuitem:hover,
.menuitem:focus
	{
	color:								#03f;
	text-decoration:					underline;
	}
body.th1 .menuitem:hover,
body.th1 .menuitem:focus,
body.th2 .menuitem:hover,
body.th2 .menuitem:focus
	{/* th2 is OCIO Classic Theme */
	color:								#ff0;
	}
body.th3 .menuitem:hover,
body.th3 .menuitem:focus
	{/* th3 is Breast Cancer Awareness Month Pink */
	color:								#900;
	}
body.th4 .menuitem:hover,
body.th4 .menuitem:focus
	{/* th4 is Financial Green */
	color:								#090;
	}
body.th5 .menuitem:focus,
body.th5 .menuitem:hover
	{/* th5 is Sheri's Pale Blue */
	color:								#004080;
	}
/*
Menuitem_hi is for pre-highlighted menu items. Same as .menuitem:active. Usually used on the menu item that 
represents the current page (as if it were somehow pre-selected). 
*/
.menuitem_hi
	{
	color:								#090;
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	text-decoration:					none;
	}
.menuitem:active
	{
	color:								#090;
	}
body.th1 .menuitem_hi,
body.th1 .menuitem:active,
body.th2 .menuitem_hi,
body.th2 .menuitem:active
	{/* th2 is OCIO Classic Theme */
	color:								#ffc;
	}
body.th3 .menuitem_hi,
body.th3 .menuitem:active
	{/* th3 is Breast Cancer Awareness Month Pink */
	color:								#f00;
	}
body.th4 .menuitem_hi,
body.th4 .menuitem:active
	{/* th4 is Financial Green */
	color:								#0f0;
	}
body.th5 .menuitem_hi,
body.th5 .menuitem:active
	{/* th5 is Sheri's Pale Blue */
	color:								#0f0;
	}

/*
If you define <div id="CenterThisInAppData"> directly under the body tag in a frame, or directly under #DivAppData when 
AppData is inline, SBA Look-and-feel will automatically center it for you, both horizontally and vertically. Generally 
this sort of thing is done on "Welcome" pages. It can be any block element, actually, not necessarily a div. The main 
restriction is this: There can't be any intervening positioned element between it and the parent body/#DivAppData tag. 
See also /library/javascripts/sbalookandfeel/sbalookandfeel.js (function name: SlafCenterInAppData). 
*/
#CenterThisInAppData,.CenterThisInAppData
	{
	position:							absolute;
	top:								0px;
	left:								0px;
	}

/* End of SBA look-and-feel related classes. */

/* ************************************************************************************************** */

article, aside, footer, header, nav, section
	{/* Presupport prototyping. Don't use new HTML 5 tags yet, because we may want them to be inline or inline-block: */
	display:							block;
	}

/* Utility classes usable by all divs: */

.pad0									{padding:					0px;}
.pad1									{padding:					1px;}
.pad2									{padding:					2px;}
.pad3									{padding:					3px;}
.pad4									{padding:					4px;}
.pad5									{padding:					5px;}
.pad6									{padding:					6px;}
.pad7									{padding:					7px;}
.pad8									{padding:					8px;}
.pad9									{padding:					9px;}
.pad10									{padding:					10px;}
.pad15									{padding:					15px;}
.pad20									{padding:					20px;}

/* Top of Page Titles (as opposed to window titles): */
.title1,legend
	{/* Large, bold and gold. Used in top of page titles and fieldset legends. */
	font-weight:						bold;
	font-size:							12pt	!important;/* Important to override html, body, td, above. */;
	color:								#844f00;
	}
.mandtitle
	{/* Top of page title with blue background. Used in tons of places, including ELend. */
	background-color:					#cce6ff;
	font-size:							10pt;
	font-weight:						bold;
	padding:							3px;
	text-align:							center;
	}

/*
Utility classes to make divs and tables appear side-by-side. This works for MSIE 6 and 7 because cf_sbalookandfeel 
adds conditional markup to change them to "inline" in MSIE 6 and 7. The same technique is also used for all of the 
form-element-enclosing "SBA Look-and-Feel Form Element Highlighting Classes" (manddata, optdata, etc): 
*/
.fullwidth								{width:						100%;}
.inlineblock							{display:					inline-block;}
.inlinetable							{display:					inline-table;}
.nowrap									{white-space:				nowrap;}

/* "SBA Look-and-Feel Form Element Classes": */

fieldset
	{
	margin-top:							10px;
	}
.formlabel
	{
	margin-top:							5px;
	padding-top:						10px;/* Aligns pretty well with formdata padding-top after manddata, optdate, etc. */
	padding-right:						5px;
	text-align:							right;
	width:								262px;/* MSIE doesn't like 33%! MSIE 1024x768 AppData is 786: 786/3 = 262. */
	font-size:							10pt;
	}
.formdata
	{
	margin-left:						5px;
	margin-top:							5px;
	padding-top:						5px;
	font-size:							10pt;
	}
/*
The following (formdatadata and formdatalabel) were INTENDED to be used to nest a "tbl" div in .formdata to arrange form 
elements side-by-side (for example: first name, middle initial, last name). But the sba.msie.css implementation of tbl_cell 
(using float: and display:) messes up royally in MSIE if you do this. Turning on AutoAlignTbls="Yes" fixes the problem for 
visible divs, but messes up show-and-hide, which also uses the display: property. So if you need to arrange form elements 
side-by-side in formdata, it's easier to use class="inlineblock nowrap" on the formdata div. 
*/
.formdatadata,.formdatalabel,.formdatalabel label
	{
	font-size:							8pt	!important;
	}
.formdatadata,.formdatalabel
	{
	margin-right:						3px;
	}
.formerr
	{
	margin-left:						5px;
	margin-top:							5px;
	padding-top:						5px;/* Aligns pretty well with formdata's manddata, optdate, etc, box. */
	color:								#900;
	font-size:							10pt;
	font-weight:						bold;
	}
.formetc
	{
	margin-left:						5px;
	margin-top:							5px;
	padding-top:						5px;/* Aligns pretty well with formdata's manddata, optdate, etc, box. */
	font-size:							10pt;
	}
/*
Append disableddata or disabledlabel to the END of a class specification (example, class="manddata disableddata") 
to mark the form element disabled (read only) while still retaining its mand/opt class info. You can then remove the 
disableddata or disabledlabel and it reverts back to mand/opt display. (Appending and removing class names from a 
class attribute is very easy to do using jQuery, which is now an intrinsic feature of SBA Look-and-Feel. But these 
classes are useful even if you have to manipulate the class attribute the old-fashioned way.) Note that disableddata 
is identical to viewdata, and that disabledlabel must contain font-weight: normal to override the font-weight: bold in 
mandlabel. 
*/
/* *************** "Disabled (by JavaScript):" *************** */
.disabledlabel, table.disabledlabel > tr > td, table.disabledlabel > tbody > tr > td
	{
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	font-weight:						normal;
	}
.disableddata /* disableddata normally an override of manddata, optdata or viewdata, so no td selectors, like them. */
	{
	background-color:					#ccc;/* Slightly darker than AlternatingRowBGC4NoForm1. */
	border:								1px solid #ccc;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	padding:							2px;
	}
div.disableddata
	{display:							inline-block;}
table.disableddata
	{display:							inline-table;}
/* *************** "Mandatory for the application, but doesn't prevent the form from being submitted:" *************** */
.mandlabel,
table.mandlabel         > tr > td,
table.mandlabel > tbody > tr > td
	{
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	}
.mandlabel:before
	{
	content:							"* ";
	color:								#900;
	}
.mandlabel1,
table.mandlabel1         > tr > td,
table.mandlabel1 > tbody > tr > td
	{
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	}
	.mandlabel1:before
	{
	content:							"* ";
	color:								#ffffff;
	}
.manddata
	{
	background-color:					#cce6ff;
	border:								1px solid #acf;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	padding:							2px;
	}
body.th3 .mandlabel:before
	{/* th3 is Breast Cancer Awareness Month Pink */
	color:								#900;
	}
body.th3 .manddata
	{/* th3 is Breast Cancer Awareness Month Pink */
	background-color:					#fac;
	}
body.th4 .mandlabel:before
	{/* th4 is Financial Green */
	color:								#090;
	}
body.th4 .manddata
	{/* th4 is Financial Green */
	background-color:					#afc;
	}
body.th5 .mandlabel:before
	{/* th5 is Sheri's Pale Blue */
	color:								#009;
	}
body.th5 .manddata
	{/* th5 is Sheri's Pale Blue */
	border:								1px solid #F0F7FF;
	}
body.th5 .mandlabel:before
	{/* th6 is Text-Only Black and White Theme */
	color:								#ccc;
	}
body.th6 .manddata
	{/* th6 is Text-Only Black and White Theme */
	background-color:					#ccc;
	border:								1px solid #ccc;
	}
div.manddata
	{display:							inline-block;}
table.manddata
	{display:							inline-table;}
/* *************** "Optional:" *************** */
.optlabel,
table.optlabel         > tr > td,
table.optlabel > tbody > tr > td
	{
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	}
.optdata
	{
	background-color:					#fff;
	border:								0px solid #fff;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	padding:							3px;/* 3px makes up for 0px border, prevents jumping when disableddata added. */
	}
div.optdata
	{display:							inline-block;}
table.optdata
	{display:							inline-table;}
/* *************** "Required, usually because of a NOT NULL column, prevents the form from being submitted:" *************** */
.reqdlabel,
table.reqdlabel         > tr > td,
table.reqdlabel > tbody > tr > td
	{
	color:								#009;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	font-style:							italic;
	font-weight:						bold;
	}
.reqddata
	{
	background-color:					#009;
	border:								1px solid #000;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	padding:							2px;
	}
div.reqddata
	{display:							inline-block;}
table.reqddata
	{display:							inline-table;}
/* *************** "Read-Only:" *************** */
.viewlabel,
table.viewlabel         > tr > td,
table.viewlabel > tbody > tr > td
	{
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	}
.viewdata,
table.viewdata         > tr > td,
table.viewdata > tbody > tr > td
	{/* Unlike manddata, optdata and reqddata, viewdata is often put on naked text, so we need to do the td selectors too. */
	background-color:					#ccc;/* Slightly darker than AlternatingRowBGC4NoForm1. */
	border:								1px solid #ccc;
	font-size:							10pt	!important;/* Important to override html, body, td, above. */
	padding:							2px;
	}
div.viewdata
	{display:							inline-block;}
table.viewdata
	{display:							inline-table;}

/* *************** SHOW AND HIDE STYLES *************** */
/*
Just as disabledlabel and disableddata are appended to the end of a class specification (by HiGrpDisable using jQuery), 
so too is hide appended by HiGrpHide. See /library/javascripts/jquery/HiGrpUtils.js. 
*/
.hide									{display:					none	!important;}
/*
A hiddenlink is different. It's SUPPOSED to be invisible until hovered-over or focused. It's okay to use MSIE-only 
properties because they don't interfere with non-MSIE browsers. Note that CSS3's color:transparent doesn't work in 
Firefox, but that's okay, because it's defined as equivalent to rgba(0,0,0,0), which is to say, it has opacity:0. 
*/
a.hiddenlink,a.hiddenlink:link,a.hiddenlink:visited
	{
	opacity:							0;	/* All browsers except MSIE (number from 0.0 to 1.0). */
	-ms-filter:							"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* MSIE 5-7 (percent) */
	filter:								alpha(opacity=0); /* MSIE 8+ (percent), must come after -ms-filter. */
	}
a.hiddenlink:focus,a.hiddenlink:hover,a.hiddenlink:active
	{
	opacity:							1;	/* All browsers except MSIE (number from 0.0 to 1.0). */
	-ms-filter:							"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* MSIE 5-7 (percent) */
	filter:								alpha(opacity=100); /* MSIE 8+ (percent), must come after -ms-filter. */
	}
/*
The next 2 show/hide classes are old and probably no longer in use. They were used to hide/show text without using 
display:none, which messed up table alignment in some browsers. In that sense, they're sort-of similar to visibility, 
except that they can only be used against body's default background, they will still print, and they can be seen, 
if desired, by selecting the text. Also, if the text you're hiding is an anchor, consider a.hiddenlink instead. 
*/
.fonthide								{color:						white;}	/* Hides text by making it the same as body's background-color. */
.fontshow								{color:						black;}	/* Shows text by reverting to body's default text color. */

/*
The following are intended to be used on fieldset/legend tags that delimit a tbl_row containing radio buttons. They assure 
that the fieldset/legend don't appear on the screen to sighted users. 
*/

fieldset.radio
	{
	position:							relative;
	border:								0px;
	margin:								0px;
	padding:							0px;
	}

legend.radio
	{
	position:							absolute;
	left:								-9999px; /* far offscreen so won't mess up sighted users */
	}

/*
Top of page error message and commentary styles. These are displayed by /library/cfincludes/dsp_errmsg.cfm, hence "dem_" 
namespace prefixes. Note that it's quite normal for none of these messages to be present, or just one of them, or two, or 
all three. They're displayed independently. Where Commentary and ErrMsg exist, they usually represent text from the act 
page, such as "you forgot to enter this required field", upon return to the dsp page to let the user correct the problem.
Outer divs use align="center" to align the inner divs, not text-align, because divs aren't text. This bleeds through to the 
text of the inner divs in strict mode, so we counteract by text-align here. Inner divs also require class="inlineblock". 
*/
.dem_positioning						/* Outer divs that position the boxes relative to each other. */
	{
	margin-bottom:						5px;
	}
.dem_servermsg
	{
	border:								3px double #009;
	padding:							2px;
	color:								#009;	/* dark blue */
	font-style:							italic;	/* Redundant feedback for the color-blind. */
	font-weight:						bold;
	text-align:							left;
	}
.dem_commentary
	{
	border:								3px double #090;
	padding:							2px;
	color:								#090;	/* dark green */
	font-weight:						bold;	/* dsp_errmsg prefixes "Commentary: " for the color-blind to distinguish. */
	text-align:							left;
	}
.dem_warnmsg
	{
	border:								3px double #c50;
	padding:							2px;
	color:								#c50;	/* burnt orange */
	font-weight:						bold;	/* dsp_errmsg prefixes "Warning(s): " for the color-blind to distinguish. */
	text-align:							left;
	}
.dem_errmsg
	{/* Div uses class="inlineblock" as well because CSS inclusion sequence already handles the MSIE case. */
	border:								3px double #900;
	padding:							2px;
	color:								#900;	/* dark red */
	font-weight:						bold;
	text-align:							left;
	}
.dem_servermsg li, .dem_commentary li, .dem_warnmsg li, .dem_errmsg li
	{
	list-style-position:				inside;
	/* By adding a slight spacer at the top of every li tag, users more easily distinguish multi-line li from another li: */
	margin-top:							3px;
	}

/* Next 2 were never used by dsp_errmsg. Use elsewhere to match .dem_errmsg's color[/weight]. Keep in sync! */
.errormsg
	{
	color:								#900;
	}
.errmsg
	{
	color:								#900;
	font-weight:						bold;
	}
.textmsg
	{
	font-style:							normal;
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	}

/*
The following classes remain in effect until the window.onload handlers run. Used to show or hide things while the page 
is loading. The window.onload handler that removes these classes is in sbalookandfeel.js, so pages that reside in frames 
(and therefore don't automatically pick up sbalookandfeel.js) must manually include sbalookandfeelframe.js to use these 
classes. See also sba.noscript.css: 
*/

.rte									{visibility:				hidden;}

.HideUntilAllFullyLoadedBlock			{display: none				!important;}
.HideUntilAllFullyLoadedInline			{display: none				!important;}
.HideUntilAllFullyLoadedInlBlk			{display: none				!important;}
.HideUntilAllFullyLoadedInlTbl			{display: none				!important;}
.HideUntilAllFullyLoadedTblRow			{display: none				!important;}
.HideUntilAllFullyLoadedTblRowGrp		{display: none				!important;}
.ShowUntilAllFullyLoadedBlock			{display: block				!important;}
.ShowUntilAllFullyLoadedInline			{display: inline			!important;}
.ShowUntilAllFullyLoadedInlBlk			{display: inline-block		!important;}
.ShowUntilAllFullyLoadedInlTbl			{display: inline-table		!important;}
.ShowUntilAllFullyLoadedTblRow			{display: table-row			!important;}
.ShowUntilAllFullyLoadedTblRowGrp		{display: table-row-group	!important;}

/* Fine grain control of what gets hidden: (See also sba.noscript.css.) */

.HideIfJavaScriptOffBlock				{display: block				!important;}
.HideIfJavaScriptOffInline				{display: inline			!important;}
.HideIfJavaScriptOffInlBlk				{display: inline-block		!important;}
.HideIfJavaScriptOffInlTbl				{display: inline-table		!important;}
.HideIfJavaScriptOffTblCell				{display: table-cell		!important;}
.HideIfJavaScriptOffTblRow				{display: table-row			!important;}
.HideIfJavaScriptOffTblRowGrp			{display: table-row-group	!important;}
.HideIfJavaScriptOnBlock				{display: none				!important;}
.HideIfJavaScriptOnInline				{display: none				!important;}
.HideIfJavaScriptOnInlBlk				{display: none				!important;}
.HideIfJavaScriptOnInlTbl				{display: none				!important;}
.HideIfJavaScriptOnTblCell				{display: none				!important;}
.HideIfJavaScriptOnTblRow				{display: none				!important;}
.HideIfJavaScriptOnTblRowGrp			{display: none				!important;}

/* Fine grain control of what gets displayed: (See also sba.noscript.css.) */

.ShowIfJavaScriptOffBlock				{display: none				!important;}
.ShowIfJavaScriptOffInline				{display: none				!important;}
.ShowIfJavaScriptOffInlBlk				{display: none				!important;}
.ShowIfJavaScriptOffInlTbl				{display: none				!important;}
.ShowIfJavaScriptOffTblCell				{display: none				!important;}
.ShowIfJavaScriptOffTblRow				{display: none				!important;}
.ShowIfJavaScriptOffTblRowGrp			{display: none				!important;}
.ShowIfJavaScriptOnBlock				{display: block				!important;}
.ShowIfJavaScriptOnInline				{display: inline			!important;}
.ShowIfJavaScriptOnInlBlk				{display: inline-block		!important;}
.ShowIfJavaScriptOnInlTbl				{display: inline-table		!important;}
.ShowIfJavaScriptOnTblCell				{display: table-cell		!important;}
.ShowIfJavaScriptOnTblRow				{display: table-row			!important;}
.ShowIfJavaScriptOnTblRowGrp			{display: table-row-group	!important;}

/*
"AlternatingRowBGC" (alternating row background-color) classes are used for search results where you want to 
alternate the background-color of rows or groups of rows. Traditionally, we have used "white" and. "silver" 
But if the rows contain form elements, we can't use "silver", because it looks too close to viewdata, above. 
To keep manddata, optdata and viewdata distinguishable in rows that can contain form elements, we currently 
use #ffffcc (nondithering light yellow) instead. 

The purpose of using 0 and 1, rather than 1 and 2, is so that you can use them with the output of "x mod 2". 
For example, to alternate row backgrounds one at a time: 
	<tr class="AlternatingRowBGC4NoForm#Evaluate(GetLoans.CurrentRow mod 2)#"> ... </tr>
To alternate row backgrounds in groups of 3, for example, we can use integer division ("\") and modulo together: 
	<tr class="AlternatingRowBGC4NoForm#Evaluate(((GetLoans.CurrentRow - 1) \ 3) mod 2)#"> ... </tr>
That expression results in white being first. If you want the color to be first, "1 - expression" switches them: 
	<tr class="AlternatingRowBGC4NoForm#Evaluate(1 - (((GetLoans.CurrentRow - 1) \ 3) mod 2))#"> ... </tr>

Use these classes, not hard-coded colors, so that we can globally change the look-and-feel of search results 
without having to modify every search. 
*/
.AlternatingRowBGC4Form0				{background-color:			#fff;}
.AlternatingRowBGC4Form1				{background-color:			#ff9;}
.AlternatingRowBGC4Hover				{background-color:			#9ff	!important;}
.AlternatingRowBGC4NoForm0				{background-color:			#fff;}
.AlternatingRowBGC4NoForm1				{background-color:			#ddd;}

/* SortableTables.js defaults: */
td.sortdata								{font-weight:				normal;}
td.sortkey								{font-weight:				bold;}


/*
Ellipsis classes, used with tables to limit the width of some table columns while still hinting at their contents. 

If a browser doesn't support max-width or text-overflow:ellipsis, these classes do nothing. (In other words, no harm done.) 
But when they work, they constrain the column width and display "..." at the point where text truncates. You should also 
make the full text available as a tooltip with a title attribute. The result is a nicer table, with no loss of information. 

For columns that sometimes contain LOTS of text, the white-space:nowrap might prove burdensome in browsers that don't 
support max-width. In that case, try constraining width to a specific pixel width using td width="((pixelwidth))". 
*/

.ellipsis,.ellipsis05em,.ellipsis10em,.ellipsis15em,.ellipsis20em,.ellipsis25em,.ellipsis30em,.ellipsis35em,.ellipsis40em
	{
	overflow:							hidden;/* Overflow cannot be "visible". (Precondition for text-overflow.) */
	text-overflow:						ellipsis;
	white-space:						nowrap;/* (Another precondition for text-overflow.) */
	}
.ellipsis05em							{max-width:					05em;}
.ellipsis10em							{max-width:					10em;}
.ellipsis15em							{max-width:					15em;}
.ellipsis20em							{max-width:					20em;}
.ellipsis25em							{max-width:					25em;}
.ellipsis30em							{max-width:					30em;}
.ellipsis35em							{max-width:					35em;}
.ellipsis40em							{max-width:					40em;}
/* For other max-widths, use class="ellipsis" style="max-width: ((whatever));". */


/*
"Tbl" classes are primarily to replace tables that are used solely for layout, and we don't want screen readers for the 
blind to think that the contents are truly tabular data. In other words, they're for Section 508 compliant positioning. 

Example usage: 
	<div class="tbl">
		<div class="tbl_row">
			<div class="tbl_cell">		pseudo table cell </div>
			<div class="tbl_cell">		pseudo table cell </div>
			<div class="tbl_cell">		pseudo table cell </div>
		</div>
		<br class="tbl_row_spacer" /><!-- Optional, crossbrowser way to get consistent spacing between rows. -->
		<div class="tbl_row">
			<div class="tbl_cell">&nbsp;</div><!-- column spacer example -->
			<div class="tbl_cell">		pseudo table cell </div>
			<div class="tbl_cell">		pseudo table cell </div>
		</div>
	</div>

Note that there's NO WAY that tbl_cell can possibly ever support rowspan or colspan. So don't think of these classes as 
a way to render truly tabular data. They just make divs render like tables. Also, MSIE 6 and 7 don't support the display 
properties table, table-row and table-cell, so most of what makes this work in MSIE can be found in sba.msie6and7.css 
and sba.msie6and7.css3pie.css. 
*/
.tbl									{display:					table;		}
br.tbl_row_spacer						{line-height:				0.5em;		}
.tbl_row								{display:					table-row;	}
.tbl_cell								{display:					table-cell;	vertical-align:	top;}

/*
Define print styles in case the user doesn't use our (better) Print function in MainNav or SBA Look-and-Feel Menu 
(also known as the question-mark menu). Since they have the same specificity as the styles above, we have to mark 
everything "!important" or else the override might not happen in some browsers. 

The Print function in MainNav or the SBA Look-and-Feel Menu is better because it prints embedded URLs, which make for 
easier debugging when there's a problem. But more importantly, if AppData is a frame, the Print function doesn't 
truncate its contents. 
*/
@media print
	{
	#DivWindow,#DivEnvelope
		{
		height:							auto	!important;
		width:							100%	!important;
		border:							0px		!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	#DivMarginT,#DivMarginR,#DivMarginB,#DivMarginL,#DivSBALogo,#DivMainNav,#DivAppName,#DivAppNav,#DivBotMost
		{display:						none	!important;}
	#DivAppInfo
		{
		top:							0px		!important;
		left:							0px		!important;
		width:							100%	!important;
		overflow:						visible	!important;
		}
	#FrmAppInfo
		{
		top:							0px		!important;
		left:							0px		!important;
		width:							100%	!important;
		}
	#DivAppData
		{
		top:							24px	!important;
		left:							0px		!important;
		height:							auto	!important;
		width:							100%	!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	#FrmAppData
		{
		top:							24px	!important;
		left:							0px		!important;
		height:							auto	!important;
		width:							100%	!important;
		position:						static	!important;
		overflow:						visible	!important;
		}
	}