/*
AUTHOR:				Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration. 
DATE:				10/22/2009
DESCRIPTION:		Shared CSS classes for SBA Look-and-Feel. 
NOTES:				If the user has specified text-only, link in sba.textonly.css AFTER this file. 
INPUT:				None. 
OUTPUT:				Shared CSS classes for SBA Look-and-Feel. 
REVISION HISTORY:	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. 
*/

/* Layout and background */
html, body, td			{
						/* Was "Times New Roman", Times, Schoolbook, "New York", serif; */
						font-family:			Verdana, Arial, Helvetica, sans-serif;
						font-size:				10pt;
						}
html, body				{
						border:					0px;
						margin:					0px;
						padding:				0px;
						}
.normal					{font-size:				10pt;}	/* Essentially useless, now that "html, body" is same. */

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

/* Start of new SBA look-and-feel */

#DivWindow				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						margin:					0px;
						border:					0px;
						padding:				0px;
						overflow:				hidden;
						}
/* The margins are in top, right, bottom, left (clockwize from top, like a clock) order to conform to CSS conventions: */
#DivMarginT				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					10px;
						width:					1004px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						background-color:		#fff;
						}
#DivMarginR				{
						position:				absolute;
						top:					10px;
						left:					994px;
						height:					607px;
						width:					10px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						background-color:		#fff;
						}
#DivMarginB				{
						position:				absolute;
						top:					617px;
						left:					0px;
						height:					10px;
						width:					1004px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						background-color:		#fff;
						}
#DivMarginL				{
						position:				absolute;
						top:					10px;
						left:					0px;
						height:					607px;
						width:					10px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						background-color:		#fff;
						}
#DivEnvelope			{
						position:				absolute;
						top:					10px;
						left:					10px;
						height:					605px;
						width:					982px;
						background-color:		#fff;
						margin:					0px;
						border:					1px solid black;
						padding:				0px;
						}
/* The "regions" are in top-down order, then left-right order: */
#DivEnvelopeTop			{
						display:				inline-block;
						position:				relative;
						top:					0px;
						left:					0px;
						height:					77px;
						width:					100%;
						background-image:		url(/library/images/sbalookandfeel/background.magnum.png);
						background-repeat:		repeat-x;
						}
/* Entire DivSkipLinks has to be smaller font, not just links, otherwise space between links will offset it down. */
#DivSkipLinks			{
						position:				absolute;
						top:					-1;		/* Make room for font-size:9px (was 8px when top was 0). */
						left:					248px;	/*  0 + 196 + 2 + 50 fudge factor */
						z-index:				1;		/* Defined before SBALogo, so this puts it on top of SBALogo. */
						font-size:				9px;
						font-weight:			bold;
						letter-spacing:			0.25em;
						white-space:			nowrap;
						}
#DivSkipLinks a,#DivSkipLinks a:link,#DivSkipLinks a:visited
						{
						color:					#fff;
						text-decoration:		none;	/* overriding default behavior of "a" tag. */
						}
#DivSkipLinks a:focus,#DivSkipLinks a:hover,#DivSkipLinks a:active
						{
						color:					#ff0;
						text-decoration:		none;	/* overriding default behavior of "a" tag. */
						}
#DivSBALogo				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					77px;
						width:					196px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						}
#DivMainNav				{
						position:				absolute;
						top:					0px;
						left:					198px;	/*  0 + 196 + 2 */
						height:					77px;
						width:					784px;	/* 982 - 198 */
						margin:					0px;
						border:					0px;
						padding:				0px;
						overflow:				hidden;
						}
/* DivMainNavButton offsets buttons from the top of DivMainNav in graphics mode. */
#DivMainNavButtons		{
						position:				absolute;
						top:					11px;
						left:					0px;
						height:					66px;
						width:					100%;	/* 982 - 198 */
						margin:					0px;
						border:					0px;
						padding:				0px;
						overflow:				hidden;
						}

/* Turn main navigation hotlinks into "pseudo-buttons". MSIE versions in sba.msie6and7[.css3pie].css are different: */

.mainnavexternalsys		{
						margin:					0px;
						padding:				.2em .4em .2em .4em;
						color:					#00f;
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						text-decoration:		none;
						/* No text-shadow because it makes blue-on-white text illegible. */
						/* Shadow property values are x-offset (h), y-offset (v), thickness and color, respectively. */
						border:					1px solid #000;
						-webkit-border-radius:	.7em;
						-moz-border-radius:		.7em;
						border-radius:			.7em;
						/* Shadow property values are x-offset (h), y-offset (v), thickness and color, respectively. */
						-webkit-box-shadow:		2px 2px 3px #999;
						-moz-box-shadow:		2px 2px 3px #999;
						box-shadow:				2px 2px 3px #999;
						background-color:		#fff;
						background-image:		-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc),color-stop(0.4, #aaa));
						background:				-moz-linear-gradient(#eee, #aaa, #ccc);
						background:				linear-gradient(#eee, #aaa, #ccc);
						}
.mainnavexternalsys:hover,
.mainnavexternalsys:focus
						{
						color:					#009;
						}
.mainnavsubmit
						{
						margin:					0px;
						padding:				.2em .4em .2em .4em;
						color:					#fff;
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						text-decoration:		none;
						/* Shadow property values are x-offset (h), y-offset (v), thickness and color, respectively. */
						text-shadow:			1px 1px 1px #000;
						border:					1px solid #000;
						-webkit-border-radius:	.7em;
						-moz-border-radius:		.7em;
						border-radius:			.7em;
						/* Shadow property values are x-offset (h), y-offset (v), thickness and color, respectively. */
						-webkit-box-shadow:		2px 2px 3px #999;
						-moz-box-shadow:		2px 2px 3px #999;
						box-shadow:				2px 2px 3px #999;
						background-color:		#0040ce;
						background:				-webkit-gradient(linear, left top, left bottom, from(#e8ede9), to(#0040ce),color-stop(0.4, #001b8c));/* should be blue,color-stop(0.4, #1b0b8c) */
						background:				-moz-linear-gradient(#e8ede9, #001b8c, #0040ce);
						background:				linear-gradient(#e8ede9, #001b8c, #0040ce);
						}
.mainnavsubmit:hover,
.mainnavsubmit:focus
						{
						color:					#ff0;
						background-color:		#40ce1c;
						background:				-webkit-gradient(linear, left top, left bottom, from(#ede9e8), to(#40ce1c),color-stop(0.4, #1b8c0b));
						background:				-moz-linear-gradient(#ede9e8, #1b8c0b, #40ce1c);
						background:				linear-gradient(#ede9e8, #1b8c0b, #40ce1c);
						}
.divmainnavsubmit
						{
						margin:					0px 0px 3px 0px;/* Buttons too squished together vertically. */
						display:				inline-block;
						border:					2px solid transparent;
						}
.divmainnavsubmithover	/* Can't use :hover because MSIE doesn't support :hover except on hotlinks. This uses jQuery instead. */
						{
						margin:					0px 0px 3px 0px;/* Buttons too squished together vertically. */
						display:				inline-block;
						border:					2px solid #40ce1c;
						}
#FrmMainNav				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						margin:					0px;
						border:					0px;
						padding:				0px;
						}
/* MainNav region's background: */
.headernav				{/* Normally, you should leave MainNav coloring to cf_mainnav, because it will handle TextOnly for you. */
						background-image:		url(/library/images/sbalookandfeel/background.magnum.png);
						background-repeat:		repeat-x;
						}
#DivReadyLight			{
						height:					22px;
						width:					60px;
						float:					right;
						padding:				3px;
						font-size:				12pt	!important;/* Important to override html, body, td, above. */
						text-align:				center;
						}
.ReadyLightLoading		{
						background-color:		#fff;
						}
.ReadyLightReady		{
						color:					#6c9;	/* Formerly #90d8a9 (= too light against bluesteel/magnum bg). */
						font-weight:			900;	/* Bolder than "bold" (700). 900 is essentially "boldest". */
					/*	text-shadow:			1px 1px 1px #000; -- Not supported on MSIE, too obtrusive on others. */
						}
#DivAppName				{
						position:				absolute;
						top:					24px;
						left:					135px;
						height:					40px;
						width:					108px;
						text-align:				center;
						margin:					0px;
						border:					0px;
						padding:				0px;
						border-left:			2px solid #b0c3d4;
						border-right:			2px solid #b0c3d4;
						/* Was 16px. 11pt is the smallest point size that puts "Electronic Lending" on 2 lines: */
						font-size:				11pt	!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						color:					#344883;/* Matches darkest top bar of background.bluesteel.png. */
						}
#DivAppNameText			{
						position:				absolute;
						top:					24px;
						left:					135px;
						height:					auto;
						width:					108px;
						text-align:				center;
						margin:					0px;
						border:					0px;
						font-size:				11pt	!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						color:					#344883;/* Matches darkest top bar of background.bluesteel.png. */
						}
#DivAppInfo				{
						position:				absolute;
						top:					79px;	/*  0 +  77 + 2 */
						left:					0px;
						height:					24px;
						width:					100%;
						background:				#fff;
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						font-weight:			normal;
						color:					#000;
						margin:					0px;
						border:					0px;
						padding:				0px;
						overflow:				hidden;
						}
#FrmAppInfo				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						margin:					0px;
						border:					0px;
						padding:				0px;
						}
/* AppInfo region's backgrounds: */
.inthead				{
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						font-weight:			normal;
						color:					#000;
						}
.infodata				{/* Used to be "td.infodata", but now it can be used with divs and spans as well as tds. */
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						color:					#000;
						height:					100%;
						}
div.infodata			{/* td class="infodata" doesn't need this for variable width, but div class="infodata" does: */
						display:				inline-block;
						/* 8pt usually = 11px for pixel counting. */
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						padding-top:			5px;/* 24px - 2px for 1px border - 11px font = 11. 11/2 = 5.5, so 5. */
						}
.infolabel				{/* Used to be "td.infolabel", but now it can be used with divs and spans as well as tds. */
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						font-weight:			normal;
						color:					#000;
						height:					100%;
						}
div.infolabel			{/* td class="infolabel" doesn't need this for variable width, but div class="infolabel" does: */
						display:				inline-block;
						/* 8pt usually = 11px for pixel counting. */
						font-size:				8pt		!important;/* Important to override html, body, td, above. */
						padding-top:			5px;/* 24px - 2px for 1px border - 11px font = 11. 11/2 = 5.5, so 5. */
						}
/* Resuming SBA look-and-feel regions: */
#DivAppNav				{
						position:				absolute;
						top:					105px;	/* 79 +  24 + 2 */
						left:					0px;
						height:					476px;	/* 605 - (105 + 24) */
						width:					196px;
						margin:					0px;
						border:					0px;
						padding:				0px;
						overflow:				auto;
						background-color:		#059;
						font-size:				9pt		!important;/* Important to override html, body, td, above. */
						}
#FrmAppNav				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						margin:					0px;
						border:					0px;
						padding:				0px;
						}
/* AppNav region's background. (Do not use "leftnavCopy"! Temporary style, should never have gotten widespread use!) */
.leftnav, .leftnavCopy	{
						color:					#cccccc;
						background-color:		#059;
						width:					196px;/* So that AppNavs in a frame know how wide the frame is. */
						}
.leftnav,		.leftnav td,
.leftnavCopy,	.leftnavCopy td
						{
						font-size:				9pt		!important;/* Important to override html, body, td, above. */
						}
.leftnavtitle			{
						font-size:				12pt	!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						color:					#fff;
						width:					100%;
						text-align:				center;
						}
/* Hotlink pseudo class order: ":link" and/or ":visited", then ":hover", then ":active". Not sure about ":focus". */
/* AppNav region's hotlinks: */
.menuitem				{
						color:					#fff;
						font-size:				9pt		!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						text-decoration:		none;
						}
.menuitem:hover,
.menuitem:focus			{
						color:					#ff0;
						text-decoration:		underline;
						}
/*
Menuitem_hi is for pre-highlighted menu items. Same as .menuitem, but with yellow font color. Same as .menuitem:hover, 
but without the underline. Usually used on the menu item that represents the current page. 
*/
.menuitem_hi			{
						color:					#ffc;
						font-size:				9pt		!important;/* Important to override html, body, td, above. */
						font-weight:			bold;
						text-decoration:		none;
						}
.menuitem:active		{
						color:					#ffc;
						}
/*
The new left-side naviation tree uses ONLY the classes defined in /library/css/sbatree.css. Therefore, the following 
classes are NO LONGER IN USE by SBA Look-and-Feel itself. They are provided for compatibility, in case they were 
being used outside the context of the left-side naviation tree. If there's ever a need to change the left-side 
navigation tree's appearance, however, edit the classes in /library/css/sbatree.css instead. 
*/
.navtreelink			{
						font-size:				9pt		!important;
						font-weight:			bold;
						color:					#fff;
						text-decoration:		none;
						}
.navtreelink:focus,
.navtreelink:hover		{
						color:					#ff0;
						text-decoration:		underline;
						}
.navtreelink:active		{
						color:					#ff0;
						}
#DivAppData				{
						position:				absolute;
						top:					105px;	/* 79 +  24 + 2 */
						left:					198px;	/*  0 + 196 + 2 */
						height:					476px;	/* 605 - (105 + 24) */
						width:					784px;	/* 982 - 198 */
						margin:					0px;
						border-top:				1px solid black;
						padding:				0px;
						overflow:				auto;
						background-color:		#fff;
						}
#FrmAppData				{
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						margin:					0px;
						border:					0px;
						padding:				0px;
						}
/*
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	{
						position:				absolute;
						top:					0px;
						left:					0px;
						}
#DivBotMost				{
						position:				absolute;
						top:					581px;	/* 105 + 476 */
						left:					0px;
						height:					24px;
						width:					982px;
						padding:				0px;
						font-size:				7pt		!important;/* Important to override html, body, td, above. */
						margin:					0px;
						border:					0px;
						padding:				0px;
						background-color:		#fff;
						}
/* BotMost's gov links, grabbed from http://www.sba.gov/idc/fragments/sba_temp_stylesheet/style.css and modified for SBA look-and-feel: */
ul#gov					{
						list-style-type:		none;
						margin:					0px;
						text-align:				center;
					/*	border-left: 2px solid #1F4F73;
						border-right: 2px solid #1F4F73; */
						}
ul#gov li				{display:				inline;}
ul#gov li a				{text-decoration:		none;}
ul#gov li a:hover		{}
#gov li					{
/* 404 Not Found:		background:				url(images/arrow.footer.gif) no-repeat 0 50%; */
						margin:					5px;
						}
#gov a:link, #gov a:visited, #gov a:active
						{
						color:					#00a0c6;
					/*	padding: 0 0 0 12px; */
						}
#gov a:hover			{}

/* BotMost's site links, grabbed from http://www.sba.gov/idc/fragments/sba_temp_stylesheet/style.css and modified for SBA look-and-feel: */
ul#site					{
						list-style-type:		square;
						margin:					0px;
					/*	padding:				0px 0px 8px 0px; */
						text-align:				center;
						}
ul#site li				{display:				inline;}
ul#site li a			{text-decoration:		none;}
ul#site li a:hover		{}
#site li				{
/* 404 Not Found:		background:				url(images/sitefootbullet.png) no-repeat 0 50%; */
						margin:					2px;
						}
#site a:link, #site a:visited, #site a:active
						{
						color:					#000;
					/*	padding:				0px 0px 0px 15px; */
						}
#site a:hover			{}
#DivLastModified		{
						position:				absolute;
						top:					0px;
						left:					0px;
						width:					100%;
						text-align:				right;
						font-size:				7pt		!important;/* Important to override html, body, td, above. */
						}
#SpanLastModifiedL		{
						position:				absolute;
						top:					0px;
						left:					0px;
						text-align:				left;
						}
#SpanLastModifiedR		{
						text-align:				right;
						}
/* Old class, but still used at the bottom of many ELend pages. */
.footlinks				{
						font-size:				x-small;
						font-weight:			normal;
						color:					#333;
						}

/* Resuming SBA look-and-feel regions: */
#DivSlafMenuControl		{
						display:				block;
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					11px; /* Looks better with a little 1-pixel overlap of the 1-pixel envelope */
						width:					11px; /* Looks better with a little 1-pixel overlap of the 1-pixel envelope */
					/* 	background comment:		#5a92ab = keep in sync with ".leftnav" background, above. */
						background:				#059 url("/library/images/sbalookandfeel/SlafMenuControlQuestionMark.png")
												top left repeat;
						overflow:				hidden;
						z-index:				10;
						}
#DivSlafMenu			{
						display:				none;
						position:				absolute;
						top:					3px;
						left:					3px;
						background-color:		#059;/* keep in sync with ".leftnav" background, above. */
						border:					1px solid black;
						padding:				10px;
						overflow:				hidden;
						white-space:			nowrap;
						z-index:				11;
						}
#DivAppHidden			{
						display:				none;
						position:				absolute;
						top:					0px;
						left:					0px;
						height:					100%;
						width:					100%;
						overflow:				hidden;	/* When changing display to "", also change overflow to "visible". */
						}
#DivHighlightCursor		{
						opacity:				0.0;/* invisible */
						display:				none;/* because MSIE needs it in addition to opacity 0 */
						position:				absolute;
						top:					0;
						left:					0;
						height:					64;
						width:					64;
						background-image:		url(/library/images/sbalookandfeel/cursor_lo.gif);
						}
#AppTimeout				{
						color:					#000;
						font-weight:			normal;
						}
.AppTimeoutDangerZone	{
						/* Must use "!important" to override #AppTimeout, because ids have higher cascading priority. */
						color:					#900	!important;	/* #900 is brick red. */
						font-weight:			500		!important;	/* 700 (= "bold") is too heavy for a serif font. */
						}
/* Presupport prototyping. Don't use new HTML 5 tags yet, because we may want them to be inline or inline-block: */
article, aside, footer, header, nav, section
						{display:				block;}

/* Utility classes usable by all divs: */
.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;}

/* End of new SBA look-and-feel */

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

/* Top of Page Titles (as opposed to window titles): */
.title1					{/* Top of page title with gold letters. */
						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 work 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): 
*/
.inlineblock			{display:				inline-block;}
.inlinetable			{display:				inline-table;}

/* "SBA Look-and-Feel Form Element Classes": */
.formlabel				{
						margin-top:				5px;
						padding-top:			5px;/* Aligns pretty well with form element in manddata, optdate, etc, box. */
						text-align:				right;
						width:					33%;
						font-size:				10pt;
						}
.formdata				{
						margin-left:			5px;
						margin-top:				5px;
						font-size:				10pt;
						}
.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			{
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						font-weight:			normal;
						}
.disableddata			{
						background-color:		#e7e7e7;
						border:					0px outset #fff;/* Was 1px outset #000; */
						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;
						}
.manddata				{
						background-color:		#cce6ff;
						border:					1px outset #000;
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						padding:				0.25em;
						}
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 outset #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;			/* Used to be c50, but no one liked "burnt orange". */
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						font-style:				italic;
						font-weight:			bold;
						}
.reqddata				{
						background-color:		#009;
						border:					1px outset #000;
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						padding:				0.25em;
						}
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
						{
						background-color:		#e7e7e7;
						border:					0px outset #fff;/* Was 1px outset #000; */
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						padding:				0.25em;
						}
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. (They don't need to be in sba.msie6and7.css just yet.) 
The really BIG problem with hiddenlinks is that they DON'T WORK IN MSIE. The opacity tricks aren't working. Already 
tried and failed: visibility:hidden keeps the user from tabbing to the link, so they never pick up visibility:visible. 
Also, CSS3's color:transparent won't work until MSIE 9. Next thing worth trying: Check out how jQuery does fadeOut(), 
fadeIn(), fadeTo(), etc, in the case of MSIE. 
*/
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 last 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: 
*/
.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. */

/* Top of page error message and commentary styles: */
.errormsg				{
						color:					#900;
						font-size:				10pt	!important;/* Important to override html, body, td, above. */
						}
.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:	#ffc;}
.AlternatingRowBGC4Hover			{background-color:	#cff;	!important;}
.AlternatingRowBGC4NoForm0			{background-color:	#fff;}
.AlternatingRowBGC4NoForm1			{background-color:	#ddd;}

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

/*
"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;
									}
	}