/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--
	tpo_standard.css 

	Standard typographic settings for HTML tags
	plus a standard set of element format classes.
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--*/

/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	HTML STANDARD STYLES
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/

/* Define common attributes for H1 to H3 tags */
h1, h2, h3
{
	color:#385370;
	text-align:left;
	margin:0px;
	padding-top:1.0em;
	padding-bottom:5px;
}

h1 { font-size:2em; }
h2 { font-size:1.75em; }
h3 {font-size:1.3em; font-style:italic; }


/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	ASSORTED DIV STYLES
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/
/* standardized spacing - use to provide consistent spacing between 
sections on a page. I created these to fix the hodgepodge of 
spacing distances and methods we have now */

/* Relative spacing based on parent container font size. */
.VerticalSpace_EM
{
	height:3em;
	margin:0;
	padding:0;
}

/* Fixed spacing */
.VerticalSpace_PX
{
	height:30px;
	margin:0;
	padding:0;
}


/* Place below a group of floating DIV
containers to ensure that the items following
the floats line up correctly. */
.clear
{
	line-height:0;
	height:0;
	clear: both;
}

/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	PRIMARY COLOR Horizontal Rules.
	Create the rule using a DIV. Example:
	<div class="hr_red"></div>
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/
.hr_red
{
	font-size:4px;
	background:#F00;
	border:thin;
	padding:3px;
	margin-top:2.5em;
	margin-bottom:10px;
}

.hr_green
{
	font-size:4px;
	background:#0F0;
	border:thin;
	padding:3px;
	margin-top:2.5em;
	margin-bottom:10px;
}

.hr_blue
{
	font-size:4px;
	background:#00F;
	border:thin;
	padding:3px;
	margin-top:2.5em;
	margin-bottom:10px;
}

.hr_yellow
{
	font-size:4px;
	border:thin;
	padding:3px;
	margin-top:2.5em;
	margin-bottom:10px;
	background-color: #FFA940;
}


/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	LIST STYLES
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/
.bulletList ul
{
	margin-top:1.5em;
	margin-bottom:1.5em;
}

.bulletList li
{
	line-height:1.4em;
}

/* Default unordered list style. */
ul
{
	margin:0.5em 2em 2em 2em;
	padding:0.5em 1em;
}

li
{
	margin-bottom:0.5em;
}

/* Default definition list style. In my pages, this is 
	most commonly used to create a list of links. 
	The dt (term) tag contains the anchor and the 
	dd (definition) tag contains the description of
	the link. */
dl
{
	color:#000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size:0.9em;
}

/* Item TERM */
dt
{
	font-size:1.2em;
	font-weight:bold; 
}

/* Item HYPERLINK */
dt a
{
	font-size:1.2em;
	font-weight:bold; 
}

dt a:hover
{
	font-size:1.2em;
	font-weight:bold; 
}


/* Item DEFINITION/DESCRIPTION */
dd
{ margin-bottom:1em; }


/*---*//*---*//*---*//*--#/
IMG Element -- Set default padding and margins. 
Create alignment classes to save some typing.
/*---*//*---*//*---*//*--*/

img
{
	margin:5px;
	padding:5px;
}

img .Center { text-align:center; }

img .Left { text-align:left; }

img .Right { text-align:right; }

/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	IMAGE TAG STYLES
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/

.ImgCenter, .ImageCentered
{
	text-align:center;
}

.ImgLeft
{
	text-align:left;
	float:left;
}

.ImgRight
{
	text-align:right;
	float:right;
}

/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	CONTENT STYLES
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/

/* Image and Figure Caption Text */
.ImageAndFigureNotes
{
	text-align:center;
	font-size:14px; 
	font-style:italic;
	margin-bottom:0.2em;
}

/*-------------------------------------------
	Highlight Text
/*------------------------------------------*/
.Highlight_S, .Highlight_M, .Highlight_L
{
	/*color:#CA8E35;*/
	color:#CE7200;
	text-align:center;
	font-weight: normal;
	font-family: "Comic Sans MS", cursive;
	margin-top: 1.5em;
	margin-bottom:5px;
	padding:2px;
}
.Highlight_L { font-size:2em; }
.Highlight_M { font-size:1.75em; }
.Highlight_S { font-size:1.3em; }

/*-------------------------------------------
	Assorted Headings
/*------------------------------------------*/

/*	Heading common parameters */
.Heading_S, .Heading_M, .Heading_L
{
	text-align:center;
	font-weight:bold;
	margin-top:1.5em;
	margin-bottom:5px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.Heading_L 
{ 
	font-size:2em; 
	color:#BE3D16;
}

.Heading_M 
{
	font-size:1.75em;
	color: #95405E;
}

.Heading_S 
{
	font-size:1.3em;
	color: #4D6388;
}


/*-------------------------------------------
	Billboard - A tinted box with heading.
	Makes a good text flyout on a page. 
	Also works well as a floating block
	of text.
/*------------------------------------------*/
.Billboard
{
	width:70%;
	font-size:0.9em;
	text-align:left;
	color: #006;
	padding:0;
	border: 2px solid #006;
	margin: 2.5em auto;
	background-color: #FBFBFF;
}

/* 
Billboard title - appears at the top of the 
box. Size and margins are based on the base
font size in Billboard.
*/
.Billboard .Title
{
	font-size:1.5em;
	font-weight:bold;
	text-align:center;
	border-bottom:3px dotted #C1D2FF;
	padding: 1em 10px 1em 10px;
	margin: 0px 0px 1.2em 0px;
	color: #356A6A;
}

/* Bulleted list style for the billboard */
.Billboard ul
{
	font-size:1.0em;
	font-style:italic;
	margin:0.5em 2em 2em 2em;
	padding:0.5em 3em;	
}

.Billboard li
{
	margin-bottom:0.5em;
}

/*-------------------------------------------
	Action Box
	
	A billboard variation. A centered box
	with borders and strong text styles.
	Use for short flyout and action segments
	on a page such as "Contact Us" info.
	
/*------------------------------------------*/
.ActionBox
{
	width:70%;
	text-align:center;
	color: #006;
	padding:1em;
	border: 2px solid #CA8E35;
	margin: 2.5em auto;
	background-color: #FBFBFF;
}

/* ActionBox title line */
.ActionBox .Title
{
	font-family: "Comic Sans MS", cursive;
	font-size:1.7em;
	font-weight:bold;
	text-align:center;
	color: #000;
	margin-bottom:0.5em;
}


/* Standard paragraph text */
.ActionBox p
{
	text-align:center;
	font-size:1.4em;
	color: #95405E;
}


/* Anchors */
.ActionBox a
{
	text-align:center;
	font-weight:bold;
	font-size:1.0em;
}


/*=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-
	Spry Style Overloads - Enhance, suppliment or
	override various Spry component styles.
=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=-*/
.tooltipContent
{
	background-color: #FFFFCC;
	font-size:1.2em;
	font-weight:bold; 
	color:#009; 
	padding:20px; 
	border:double;
}