/*
AUTHOR:				Steve Seaquist, Trusted Mission Solutions, Inc., for the US Small Business Administration. 
DATE:				08/09/2011
DESCRIPTION:		Shared CSS classes for SBA Look-and-Feel *** USING STRICT MODE ***. 
NOTES:

	This file contains all styles used by the cf_sbalookandfeel custom tag. Even classes that are used solely by 
	cf_mainnav don't belong here. Restricting usage to the custom tag will make this file largely static in the future. 

	If the user has specified text-only, link in slaf.textonly.css AFTER this file. 

INPUT:				None. 
OUTPUT:				Shared CSS classes for SBA Look-and-Feel. 
REVISION HISTORY:	04/25/2013, SRS:	Added #DivSliderControl (for user complaints that not all of AppNav was visible). 
					01/12/2012, SRS:	Fixed ugly font-size:7pt in BotMost. (Set both font-size and line-height to 8pt.) 
					08/09/2011, SRS:	Original implementation. Cannibalized existing sba.css. 
*/

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

#DivWindow
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	}
/*
Classes relating to the "SBA Look-and-Feel menu", also known as the "question mark menu". In the custom tag, the menu's 
HTML is defined AFTER all of the other "regions", so that the elements will get a higher "stacking order" in addition to 
their z-index properties. This guarantees that the next 2 classes will float on top of other SBA Look-and-Feel regions: 
*/
#DivSlafMenuControl
	{/* This is the "control" (small box with a question mark in it), not the menu itself: */
	display:							block;
	position:							absolute;
	top:								0px;
	width:								11px; /* Determines right.  Looks better with a little 1-pixel overlap of the 1-pixel envelope */
	height:								11px; /* Determines bottom. Looks better with a little 1-pixel overlap of the 1-pixel envelope */
	left:								0px;
	background:							#059 url("/library/images/sbalookandfeel/SlafMenuControlQuestionMark.png")
										top left repeat;
	overflow:							hidden;
	z-index:							10;
	}
#DivSlafMenu
	{/* This is the menu itself: */
	position:							absolute;
	top:								3px;
	left:								3px;
	background-color:					#059;	/* Keep in sync with ".leftnav" background-color. */
	border:								1px solid black;
	padding:							10px;
	overflow:							hidden;
	white-space:						nowrap;
	z-index:							11;
	display:							none;	/* Not yet selected. Will add "inlineblock" class with jQuery to pop up. */
	}
/*
The DivMargin classes are defined in top, right, bottom, left (clockwize from top, like a clock) order to conform to CSS 
conventions. Also, within each class, if the top, right, bottom or left properties are given, they're in that order. 
*/
#DivMarginT
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	height:								10px;	/* Determines bottom. */
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					#fff;	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginR
	{
	position:							absolute;
	top:								10px;
	right:								0px;
	bottom:								10px;
	width:								10px;	/* Determines left. */
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					#fff;	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginB
	{
	position:							absolute;
	height:								10px;	/* Determines top. */
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					#fff;	/* For size verification only, remove when working to make transparent. */
	}
#DivMarginL
	{
	position:							absolute;
	top:								10px;
	width:								10px;	/* Determines right. */
	bottom:								10px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	background-color:					#fff;	/* For size verification only, remove when working to make transparent. */
	}
#DivEnvelope
	{
	position:							absolute;
	top:								10px;
	right:								10px;
	bottom:								10px;
	left:								10px;
	border:								1px solid black;
	margin:								0px;
	padding:							0px;
	}

/* The following are the visible "regions" in top-down order, then left-right order: */

#DivEnvelopeTop	/* Special container for DivSkipLinks, DivSBALogo, DivAppName and DivMainNav. Allows smoother background. */
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	height:								77px;	/* Determines bottom. */
	left:								0px;
	background-image:					url(/library/images/sbalookandfeel/background.magnum.png);
	background-repeat:					repeat-x;
	}
#DivSkipLinks
	{/* Entire DivSkipLinks has to be smaller font, not just links, otherwise space between links will offset it down. */
	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;	/* To override the default behavior of "a" tag. */
	}
#DivSkipLinks a:focus,#DivSkipLinks a:hover,#DivSkipLinks a:active
	{
	color:								#ff0;
	text-decoration:					none;	/* To override the default behavior of "a" tag. */
	}
#DivSBALogo
	{
	position:							absolute;
	top:								0px;
	width:								196px;	/* Determines right. */
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	}
#SBALogo								/* Graphics Mode. The height (currently 40) is still in HTML, for now. */
	{
	position:							absolute;
	top:								24px;
	border:								0px; 
	}
#SBALogo.Dev
	{
	left:								15px;	/* Based on the width of sba_logo.dev.png */
	}
#SBALogo.Test
	{
	left:								13px;	/* Based on the width of sba_logo.test.png */
	}
#SBALogo.Prod
	{
	left:								19px;	/* Based on the width of sba_logo.sba.png */
	}
#SBALogoInline							/* Text-Only Mode */
	{
	height:								100%;
	right:								20px;
	font-size:							36px;
	text-align:							left;
	padding:							11px 11px 11px 33px;
	}
#DivAppName
	{/* Positions 2 faint vertical lines to the left and right of DivAppNameText: */
	position:							absolute;
	top:								24px;
	width:								108px;	/* Determines right. */
	height:								40px;	/* Determines bottom. */
	left:								135px;
	border-top:							0px;
	border-right:						2px solid #b0c3d4;
	border-bottom:						0px;
	border-left:						2px solid #b0c3d4;
	margin:								0px;
	padding:							0px;
	color:								#344883;/* Matches darkest top bar of background.bluesteel.png. */
	/* 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;
	text-align:							center;
	}
#DivAppNameText
	{
	position:							absolute;
	top:								24px;
	width:								108px;	/* Determines right. */
	height:								auto;	/* Determines bottom. */
	left:								135px;
	margin:								0px;
	border:								0px;
	color:								#344883;/* Matches darkest top bar of background.bluesteel.png. */
	font-size:							11pt	!important;/* Important to override html, body, td, above. */
	font-weight:						bold;
	text-align:							center;
	}
#DivMainNav
	{
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								198px;	/*  0 + 196 + 2 */
	margin:								0px;
	border:								0px;
	padding:							0px;
	overflow:							hidden;
	}
#FrmMainNav
	{/* If MainNav is a frame, DivMainNav contains FrmMainNav. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	}
#DivAppInfo
	{
	position:							absolute;
	top:								79px;	/*  0 +  77 + 2 */
	right:								0px;
	height:								24px;	/* Determines bottom. */
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							hidden;
	color:								#000;
	line-height:						24px;	/* Middle-aligns text (but only text), because same as AppInfo height. */
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	font-weight:						normal;
	}
#FrmAppInfo
	{/* If AppInfo is a frame, DivAppInfo contains FrmAppInfo. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	}
#DivAppNav
	{
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	width:								196px;	/* Determines right. */
	bottom:								25px;
	left:								0px;
	overflow:							auto;
	border:								0px;
	margin:								0px;
	padding:							0px;
	background-color:					#059;
	font-size:							9pt		!important;/* Important to override html, body, td, above. */
	}
#DivAppNav.NoAppNavContents
	{
	display:							none;
	top:								0px;
	width:								0px;	/* Determines right. */
	bottom:								0px;
	left:								0px;
	overflow:							hidden;
	}
#DivSliderControl
	{/* Strict-Mode-Only feature. Doesn't exist in sbalookandfeel.quirks.css. */
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	width:								5px;
	bottom:								25px;
	left:								195px; /* Centered at 197 (between AppNav and AppData), and width is 5, so 197 - 2 */
	border:								0px;
	margin:								0px;
	padding:							0px;
	cursor:								e-resize;
	z-index:							3;
	}
#FrmAppNav
	{/* If AppInfo is a frame, DivAppInfo contains FrmAppInfo. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							auto;
	}
#DivAppData
	{
	position:							absolute;
	top:								105px;	/* 79 +  24 + 2 */
	right:								0px;
	bottom:								25px;
	left:								198px;	/*  0 + 196 + 2 */
	border-top:							1px solid black;
	border-bottom:						1px dashed gray;
	border-left:						1px solid black;
	margin:								0px;
	padding:							0px;
	background-color:					#fff;	/* Normally not needed, but AppData has maximize/minimize. */
	z-index:							9;		/* Same reason. AppData would otherwise not maximize over BotMost. */
	overflow:							auto;
	}
#DivAppData.NoAppNavContents
	{
	right:								0px;
	left:								0px;
	border-left:						0px;
	}
#FrmAppData
	{/* If AppData is a frame, DivAppData contains FrmAppData. This positions it in exactly the same place: */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	overflow:							auto;
	}
#DivBotMost
	{
	position:							absolute;
	height:								24px;	/* Determines top. */
	right:								0px;
	bottom:								0px;
	left:								0px;
	border:								0px;
	margin:								0px;
	padding:							0px;
	font-size:							8pt;
	line-height:						8pt;
	}

/* BotMost contents, begins. */

#botmostgovlinks
	{
	list-style-type:					none;
	margin:								0px;
	text-align:							center;
	}
#botmostgovlinks li
	{
	display:							inline;
	}
#botmostgovlinks li a
	{
	text-decoration:					none;
	}
#botmostgovlinks li
	{
	margin:								5px;
	}
#botmostgovlinks a:link, #botmostgovlinks a:visited, #botmostgovlinks a:active
	{
	color:								#00a0c6;
	}
#botmostsitelinks
	{
	list-style-type:					square;
	margin:								0px;
	text-align:							center;
	}
#botmostsitelinks li
	{
	display:							inline;
	}
#botmostsitelinks li a
	{
	text-decoration:					none;
	}
#botmostsitelinks li
	{
	margin:								2px;
	}
#botmostsitelinks a:link, #botmostsitelinks a:visited, #botmostsitelinks a:active
	{
	color:								#000;
	}
#DivLastModified
	{
	position:							absolute;
	top:								0px;
	left:								0px;
	width:								100%;
	text-align:							right;
	font-size:							8pt		!important;/* Important to override html, body, td, above. */
	line-height:						8pt;
	}
#SpanLastModifiedL
	{
	position:							absolute;
	top:								0px;
	left:								0px;
	text-align:							left;
	}
#SpanLastModifiedR
	{
	text-align:							right;
	}
#AppTimeout
	{
	color:								#000;
	font-weight:						normal;
	}
#AppTimeout.AppTimeoutDangerZone		/* In Strict Mode, #id.class doesn't necessarily override #id, so use important. */
	{
	color:								#900	!important;	/* #900 is brick red. */
	font-weight:						500		!important;	/* 700 (= "bold") is too heavy for a serif font. */
	}

/* BotMost contents, ends. */

#DivAppHidden
	{/* Only invisible region. Define for displayability, so that we can see it by overriding display property with JS: */
	display:							none;	/* Most important aspect of THIS class, so put it first! */
	position:							absolute;
	top:								0px;
	right:								0px;
	bottom:								0px;
	left:								0px;
	overflow:							auto;
	}

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

/*
Define print styles in case the user doesn't use our (better) Print function (MainNav button or SBA Look-and-Feel Menu 
item). The Print function 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. 

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. 
*/

@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;
		}
	}