/*********************************************************
Unless specified otherwise, these should be arranged in alphabetical 
order within each block of CSS. 
**********************************************************/

/*
Defaults for the entire application. Note FONT-SIZE: is specified in 
pixels, as it seems to give the most consistent sizing of fonts across 
browsers. Also, this selector seems to have the *highest* priority. Once 
something is set here, it cannot be changed with any other selector. 
*/
	* {
		FONT-FAMILY: Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
	}
	
/*
Originally from layout.css, which was based on a design by Anne van 
Kesteren (http://AnnevanKesteren.nl), obtained from the site 
http://limpid.nl/lab/css/fixed/header-and-footer. 
*/
	/* Fixes the header and footer, when viewed on a screen */
	@media screen {
		BODY > DIV#footer {
			POSITION: fixed;
			Z-INDEX: 1; /* ensure content slides under footer */
		}
		BODY > DIV#header {
			POSITION: fixed;
			Z-INDEX: 1; /* ensure content slides under header */
		}
	}
	
	/* Suppresses 'outer' scrollbar in IE */
	* HTML BODY {
		OVERFLOW: hidden;
	}
	
	/* Required to make content scrollable in IE */
	* HTML DIV#content {
		HEIGHT: 100%
	}
	
	BODY {
		FONT-SIZE: 13px;
		MARGIN: 0px; 
		PADDING-LEFT: 0px; 
		PADDING-RIGHT: 0px;
	}
	
	/* Establishes 'height' of the header and footer for IE. It also sets 
	these values for all CSS-compliant browers, but that problem is 
	corrected in the next declaration. */ 
	HTML BODY {
		PADDING-BOTTOM: 57px; 
		PADDING-TOP: 108px;
	}

	/* Correct the incorrect values from the previous declaration for 
	CSS-compliant browsers. This is accomplished by using the 'child' 
	operator, which IE does not understand, and therefore ignores. */ 
	HTML > BODY {
		PADDING-BOTTOM: 40px; 
		PADDING-TOP: 125px;
	}
/*
Basic style which are a basis for everything else. 
*/	
	H1 {
		FONT-SIZE: 140%;
	}

	P {
		LINE-HEIGHT: 150%;
		MARGIN-BOTTOM: 10px;
	}

/* 
Formatting of <h1>, <img> and <p> elements of the class metaphorImg 
within <div id='content'>. Marketing pages have a photographic metaphor 
intended to help the user understand the basic concept of the 
application. Selectors with this class name govern the appearance of the 
image and the associated heading. 
*/
	H1.metaphorImg {
		POSITION: relative;
		TOP: -5px; /* use to get <img> and <h1> aligned properly */
		Z-INDEX: 0; /* ensures it slides under the header */
	}
	
	IMG.metaphorImg {
		FLOAT: left; 
		MARGIN-BOTTOM: 20px; 
		MARGIN-RIGHT: 20px; 
		WIDTH: 50%;
	}
	
	P.metaphorImg {
		LINE-HEIGHT: 150%;
		MARGIN-BOTTOM: 0px;
		MARGIN-TOP: 3%;
	}

/* 
The standard Intellog link style (in the content panel, at least), is to 
make the link appear a slightly lighter color (to create the effect of 
the link 'lighting up', and to have the cursor change to the pointer 
(ie. the hand). It makes clicking the link virtually irresistable. Also, 
the concept of a 'visited' link is eliminate as well. This is because 
simply looking at a report (like an ST1) has absolutely no bearing on 
whether you will want to look at the report again in the future. These 
classes are assigned by the the onMouseOverLnk() and onMouseOutLnk() 
functions found in Intellog.cs. Initially, it appears this is redundant 
to the a:hover syntax. However, links which don't have the href 
attribute populated (such as ones which trigger some JavaScript code) 
don't behave as normal links. 
*/ 
	.hoverLnk {
		CURSOR: pointer;
		PADDING: 0px;
	}
	
	.lnk {
		PADDING: 0px;
	}

/*
The following classes work in conjunction with the .hoverLnk and .lnk 
classes identified above, and the onMouseOverLnk() onMouseOutLnk() 
JavaScript function to produced customized link behavior. The seemingly 
redudant declaration are to ensure the colors behave exactly as 
expected. 
*/	
	.blackClr, .blackClr:link, .blackClr:visited {
		COLOR: black;
	}

	.grayClr , .grayClr:link, .grayClr:visited {
		COLOR: gray;
	}

	.greenClr, .greenClr:link, .greenClr:visited   {
		COLOR: green;
	}
		
	.lightGreenClr, .lightGreenClr:link, .lightGreenClr:visited  {
		COLOR: #00C000;
	}

/*
Default formatting for <div id='content'>. Establish left and right 
padding between the content box and the text found within the content 
box. 
*/
	#content {
		MARGIN: 0px 0px 0px 0px; /* top right bottom left */
		PADDING-BOTTOM: 20px;
		PADDING-LEFT: 5%;
		PADDING-RIGHT: 5%;
		PADDING-TOP: 5px;
		OVERFLOW: auto;
	}
	/*
	Formatting of the paragraph elements within <div id='content'>. 150% of 
	normal line spacing, and a ten pixel space between paragraphs. 
	*/
/*
To get cross browser compatibility, the content div had to be eliminated 
completely from /php/outputPage.php, and replaced with readerIfrm, a 
frame dedicated to the display of PDF documents, which is formatted 
below. 
*/
	#readerIfrm {
		BORDER: 0px;
		POSITION: absolute;
		LEFT: 0px;
		TOP: 125px;
		WIDTH: 100%;
		OVERFLOW: auto;
	}

/*
Special formatting for text, used to get specific effects, and correct 
display anomolies. 
*/
	/* Make text bold, but scale it down, slightly, so it appears the same 
	size as the surrounding text. */ 
	SPAN.stress {
		FONT-WEIGHT: bold;
		FONT-SIZE: 90%;
	}

	/* Superscript and scale the text, such as would be used for registered
	trademark symbol on product pages */
	SPAN.superscript {
		VERTICAL-ALIGN: super;
		FONT-SIZE: 45%;
	}
/*
Other stuff, pending some better organization paradigm.
*/
.noScript {
	COLOR: red;
}

.noScript A, .noScript A:LINK , .noScript A:VISITED  {
	TEXT-DECORATION: underline;
	COLOR: blue;
}

#menuHeaderTcm {
	BACKGROUND-COLOR: transparent;
	BORDER: 0px;
}

/* see http://www.intellog.com/blog/?s=krakatoa for an explanation of the item below */
#krakatoaDiv {
	DISPLAY: none;
}

.hidden {
	BORDER: 0px;
	HEIGHT: 0px;
	VISIBILITY: hidden;
	WIDTH: 0px;
}

.bstp {
	BORDER-COLLAPSE: collapse;
	DISPLAY: block;
	FONT-SIZE: 11px; /* IE does not recognize x-small in this context */
	POSITION: absolute;
	WIDTH: auto;
	Z-INDEX: 1;
}

.applicationActionBstp {
	TOP: 4px;
	RIGHT: 10px;
}

.mainBstp {
	BOTTOM: 4px;
	RIGHT: 10px;
}

.bstp TD {
	BACKGROUND-COLOR: #EFEFEF;
	BORDER-BOTTOM: 1px solid #CCCCCC;
	BORDER-LEFT: 1px solid #F0F0F0;
	BORDER-RIGHT: 1px solid #CCCCCC;
	BORDER-TOP: 1px solid #F0F0F0;
	COLOR: gray;
	HEIGHT: 15px; /* must be set explicitly, otherwise onMouseOverMenuHeaderTcm() doesn't fire reliably */
	TEXT-ALIGN: center;
	VERTICAL-ALIGN: middle;
	WIDTH: 75px;
}

.bstp TD.selectedBtn {
	BACKGROUND-COLOR: #CCCCCC;
	BORDER-BOTTOM: 1px solid #CCCCCC;
	BORDER-LEFT: 1px solid #A0A0A0;
	BORDER-RIGHT: 1px solid #CCCCCC;
	BORDER-TOP: 1px solid #A0A0A0;
	COLOR: black;
	CURSOR: pointer;
}

.subBstp TD.selectedBtn {
	BORDER-LEFT: 0px;
	BORDER-RIGHT: 0px;
	BORDER-TOP: 0px;
}

.subBstp TD {
	BORDER-LEFT: 0px;
	BORDER-RIGHT: 0px;
	BORDER-TOP: 0px;
	PADDING-LEFT: 5px;
	TEXT-ALIGN: left;
	WIDTH: 150px;
}

.subBstp {
	DISPLAY: none;
}

#logoImg {
	LEFT: 10px;
	POSITION: absolute; 
	BOTTOM: 12px; 
}

DIV#footer {
	BACKGROUND-IMAGE: url(/image/footer.png);
	BACKGROUND-REPEAT: no-repeat;
	BOTTOM: 0px;
	COLOR: black;
	HEIGHT: 40px;
	LEFT: 0px; 
	POSITION: absolute;
	WIDTH: 100%;
}

DIV#header {
	BACKGROUND-ATTACHMENT: fixed;
	BACKGROUND-IMAGE: url(/image/header.png);
	BACKGROUND-REPEAT: no-repeat;
	COLOR: black;
	HEIGHT: 125px;
	LEFT: 0px; 
	POSITION: absolute; 
	TOP: 0px; 
	WIDTH: 100%;
}

#productNameImg {
	BOTTOM: 20%; 
	LEFT: 180px;
	HEIGHT: 20%;
	POSITION: absolute; 
}

#poweredByImg {
	LEFT: 5px;
	POSITION: absolute; 
	TOP: 2px; 
	BORDER-STYLE: none;
	HEIGHT: 90%;
}

#breadCrumbDiv {
	LEFT: 100px;
	POSITION: absolute; 
	TOP: 1px;
}
	
#breadCrumbDiv TABLE {
	COLOR: silver;
	FONT-SIZE: 9px;
}

#breadCrumbDiv TD {
	COLOR: silver;
}

#breadCrumbDiv TD.currentCell {
	COLOR: black;
	CURSOR: pointer;
}

#breadCrumbDiv A:HOVER {
	CURSOR: pointer;
	COLOR: black;
}

A.termNm {
	BORDER-BOTTOM: dotted 1px; 
	COLOR: gray;
	CURSOR: pointer;
	PADDING-BOTTOM: 0px;
	TEXT-DECORATION: none;
}

DIV#content UL {
	MARGIN-BOTTOM: 7px;
	MARGIN-LEFT: 5%;
	MARGIN-RIGHT: 5%;
}

/*
from menu.css
*/
A {
	PADDING: 2px; /* padding around ALL links */
	TEXT-DECORATION: none; /* blinking and all that jazz */
}

A:LINK, A:VISITED {
	COLOR: #999;	
}

#inputDiv TABLE {
	FONT-SIZE: 12px;
	WIDTH: 100%;
}

#inputDiv TABLE TD {
	VERTICAL-ALIGN: top;
}

#inputDiv TABLE TD.labelCell {
	COLOR: green;
	TEXT-ALIGN: right;
	WIDTH: 33%;
}

INPUT.cbx {
	MARGIN-LEFT: 0px;
	*MARGIN-LEFT: -4px; /* hack to deal with IE inconsistency */
}

INPUT.tbx {
	WIDTH: 350px;
	FONT-SIZE: 12px;
}

/* necessary to hardcode this because... */
DIV.txt P {
	MARGIN-TOP: 0px;
}

TEXTAREA.txa {
	HEIGHT: 150px;
	VERTICAL-ALIGN: top;
	WIDTH: 350px;
	FONT-SIZE: 12px;
}

FORM TABLE INPUT.OpenID {
	WIDTH: 40%;
	BACKGROUND: #FFFFFF url('/image/openid-icon-small.gif') no-repeat scroll 0pt 50%; 
	PADDING-LEFT: 18px;
}

.greenLight {
	MARGIN: 0px;
	PADDING: 0px;
}

IMG.greenLight {
	CURSOR: pointer;
}

IMG.feedImg {
	BORDER-WIDTH: 0px;
	POSITION: relative;
	TOP: 1px;
}