@CHARSET "UTF-8";

/* --------------------------------------------------------------------------------------------------------
 * TEXT STYLES 
 *
 * This file contains styles that affect more than one section of the web site.
 * Please search this file for a style that you can use.  If you cannot find the
 * style you need, check with Ron to see if a new style needs to be defined, and
 * how it can be made as generic as possible.
 *
 * Avoid putting layout-affecting styles into this file.
 * --------------------------------------------------------------------------------------------------------*/
 
/* --------------------------------------------------------------------------------------------------------
 * NOTE: if a text style is predominantly used in a form, you will probably find it
 * in the forms.css file.
 * Example: labelOpt, labelReq (label optional, label required)
 *          sortLinks, etc.
 * --------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------------------------------------------
 * COMMONLY USED TEXT STYLES
 * --------------------------------------------------------------------------------------------------------*/ 
 
/* --------------------------------------------------------------------------------------------------------
 * subtle
 * --------------------------------------------------------------------------------------------------------
 *		The opposite of the <strong> tag.
 */
 	.subtle {
	 	color: #c1a674;
 		}

	.subtle a,
	.subtle a:link a:active {
		color: #c1a674;
		}
	
	.subtle a:visited {
		color: #c1a674;
		}

	.subtle a:hover {
		color: #886f4b;
		}

 	.verySubtle {
	 	color: #d9d0ae;
 		}

	.verySubtle a,
	.verySubtle a:link a:active {
		color: #d9d0ae;
		}
	
	.verySubtle a:visited {
		color: #d9d0ae;
		}

	.verySubtle a:hover {
		color: #c1a674;
		}
		
	.subtle strong,
	.verySubtle strong {
		color: #886f4b;
		}
		
	h1 .subtle,
	h2 .subtle,
	h3 .subtle,
	h4 .subtle {
		font-weight: normal;
		color: #c1a674;
		}

/* --------------------------------------------------------------------------------------------------------
 * span.super
 * --------------------------------------------------------------------------------------------------------
 *		Use within a span of text to create superscript text such as 'sneak peek' or 'beta'.
 */
	span.super {
		padding-left: 2px;
		vertical-align: top;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		color: #007600;
		}

/* --------------------------------------------------------------------------------------------------------
 * span.quoteMark
 * --------------------------------------------------------------------------------------------------------
 *		Use this span to emphasize opening and closing quotation marks. 
 */
	span.quoteMark {
		font-size: 120%;
		padding-right: 1px;
		padding-left: 1px;
	}

/* --------------------------------------------------------------------------------------------------------
 * example
 * --------------------------------------------------------------------------------------------------------
 *		use this when text is an example of something, like "e.g.: Microsoft" 
 */
	.example {
	 	color: #886F4B;
	 	font-size: 9px;
	 	}

/* --------------------------------------------------------------------------------------------------------
 * dimmed
 * --------------------------------------------------------------------------------------------------------
 *		'disabled' or 'hint' text.
 */
	.dimmed {
	 	color: #c1a674;
		}

	select.dimmed {
	 	font-style: italic;
		}

	select.dimmed option {
	 	font-style: normal;
	 	color: black;
		}

	select option.dimmed {
	 	color: #c1a674;
		font-style: italic;
		}

	select option.note {
	 	color: #c1a674;
		font-style: italic;
		text-align: center;
		}

 
/* --------------------------------------------------------------------------------------------------------
 * requiredField
 * --------------------------------------------------------------------------------------------------------
 *		use this to decorate text that is indicating that a field is required
 *		for example "* Required" could have this applied. 
 *		Position up to the caller
 */
	.requiredField {
	 	color: #c1a674;
	 	font-size: 9px;
	 	}

/* --------------------------------------------------------------------------------------------------------
 * fieldNote
 * --------------------------------------------------------------------------------------------------------
 *		used to decorate text which comments on a field, assures the user something
 *		about the field, etc....   Position up to the caller
 */ 
	.fieldNote {
		color: #c1a674;
		font-size: 9px;
		}

/* --------------------------------------------------------------------------------------------------------
 * legalNote
 * --------------------------------------------------------------------------------------------------------
 *		used to style a paragraph containing legal text.
 */ 
	.legalNote {
		text-align: right;
		margin: 1em 0 1em 0;
		}
		

 
/* --------------------------------------------------------------------------------------------------------
 * aside
 * --------------------------------------------------------------------------------------------------------
 *		Apply to a paragraph containing text that should be floated to the right
 *		side of its container.
 */
	p.aside {
		display: inline;
		float: right;
		margin: 8px 10px 8px 10px;
		text-align: right;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		}
 
/* --------------------------------------------------------------------------------------------------------
 * errorMessage
 * --------------------------------------------------------------------------------------------------------
 *		always use this style on your error messages 
 */ 
	.errorMessage {
		color: #AA0000;
		font-weight: bold;
		}
		
/* --------------------------------------------------------------------------------------------------------
 * Completed Action Message
 * --------------------------------------------------------------------------------------------------------
 *		always use this style when a message at the top of the page displays a 
 *      successfully completed task 
 */ 
	.completedActionMessage,
	.doNextMessage {
		color: #886f4b;
		text-align: center;
	 	font-size: 1.2em;
		}

/* --------------------------------------------------------------------------------------------------------
 * errorMessage
 * --------------------------------------------------------------------------------------------------------
 *		always use this style on your error messages 
 */ 
	.verified {
		border: 0px #007600 dotted;
		border-width: 1px 0 1px 0;
		vertical-align: middle;
		color: #007600;
		font-size: 11px;
		}

/* --------------------------------------------------------------------------------------------------------
 * l1
 * --------------------------------------------------------------------------------------------------------
 *		l1 - link level 1 - larger, main links
 */ 
	.l1 {
		font-size: 100%;
		}
 
/* --------------------------------------------------------------------------------------------------------
 * l2
 * --------------------------------------------------------------------------------------------------------
 *		l2 - link level 2 - a smaller, secondary link
 */ 
	.l2 {
		font-size: 80%;
		color: blue;
		}

/* --------------------------------------------------------------------------------------------------------
 * secondaryLink
 * --------------------------------------------------------------------------------------------------------
 *		This style is used for the secondary links on the site.
 *		It should be used for anchors and related text.
 */
	.secondaryLink {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		}

/* --------------------------------------------------------------------------------------------------------
 * arrows
 * --------------------------------------------------------------------------------------------------------
 *		This style is used for text arrows used throughout the site.
 */
	.textArrow {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.2em;
		}

/* --------------------------------------------------------------------------------------------------------
 * keepTogether
 * --------------------------------------------------------------------------------------------------------
 *		this style is used on a span to keep its contents from wrapping.  Obviously,
 *      it should be used judiciously.
 */ 
	.keepTogether {
		white-space: nowrap;
		}

/*
  * SECTION HEADER
  *
  * The page header should consist of the following code:
  *
  *		<div class="sectionHeader">
  *			<h1>My Section Header</h1>
  *			<p class="aside">text to the side of the header</p>
  *			<p class="aside">more text to the side of the header</p>
  *		</div>
  *		<p class="My section header sub-text">
  */
	div.sectionHeader {
		clear: both;
		float: left;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 8px;
		padding: 0;
		border-bottom: thin #886f4b solid;
		line-height: 22px;
		vertical-align: bottom;
		}

	div.sectionHeader h1,
	div.sectionHeader h2,
	div.sectionHeader h3,
	div.sectionHeader h4,
	div.sectionHeader h5,
	div.sectionHeader h6,
	div.sectionHeader p {
		float: left;
		padding: 0;
		margin: 0;
		line-height: 22px;
		}

	div.sectionHeader p.aside,
	div.sectionHeader p.leftAside {
		display: inline;
		margin: 0px 8px 0 16px;
		padding: 0px;
		vertical-align: baseline;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		line-height: 22px;
		vertical-align: bottom;
		color: #c1a674;
	}

	div.sectionHeader p.aside {
		text-align: right;
		float: right;
		}

	div.sectionHeader p.leftAside {
		text-align: left;
		float: left;
		}

	p.sectionSubHeader {
		clear: both;
		text-align: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		margin-top: 0em;
		margin-left: 10pt;
		padding-top: 0.2em;
		padding-bottom: 1em;
		}

 /*
  * SUB-HEADER
  *
  * This section describes a subsidiary header on a page.  You only need to use the sub-header
  * wrapper div when you want to put an aside to the header... otherwise simply use <h2>, etc.
  *
  * The page sub-header should consist of the following code:
  *
  *		<div class="subHeader">
  *			<h2>My Sub-Header</h2>
  *			<p class="aside">text to the side of the header</p>
  *			<p class="aside">more text to the side of the header</p>
  *		</div>
  *		<p class="My section header sub-text">
  */
	div.subHeader {
		clear: both;
		float: left;
		width: 100%;
		margin-top: 16pt;
		margin-bottom: 6pt;
		padding: 0;
		line-height: 22px;
		}

	div.subHeader h1,
	div.subHeader h2,
	div.subHeader h3,
	div.subHeader h4,
	div.subHeader h5,
	div.subHeader h6,
	div.subHeader p {
		width: auto;
		float: left;
		margin: 0;
		padding: 0;
		line-height: 22px;
	}
 
	div.subHeader p.aside,
	div.subHeader p.leftAside {
		display: inline;
		margin: 0px 10pt 0 10pt;
		padding: 0px;
		vertical-align: bottom;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9pt;
		line-height: 22px;
		font-weight: normal;
		}

	div.subHeader p.aside {
		text-align: right;
		float: right;
		}

	div.subHeader p.leftAside {
		text-align: left;
		float: left;
		}

	p.subSubHeader {
		clear: both;
		text-align: left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		margin-top: 0em;
		margin-left: 10pt;
		padding-top: 0.2em;
		padding-bottom: 1em;
		}

/* --------------------------------------------------------------------------------------------------------
 * TABLES
 * --------------------------------------------------------------------------------------------------------*/
 
 	tr.spacer {
 		height: 1em;
 		}

	/* --------------------------------------------------------------------------------
	 * STYLED TABLE
	 * --------------------------------------------------------------------------------*/

		table.styled {
			padding: 10px 0px 5px 0px;
			margin: 10px 5px 10px 5px;
			padding-left: 0px;
			border: 1px solid #D9D9D9;
			border-collapse: collapse;
			width: 100%;
			}
	
		table.styled tr td {
			padding: 7px 10px 0px 10px;
			border: 0px;
			font-size: 11px; 
			color: #000000;
			border-left: 1px solid #D9D9D9;
			}

		table.styled th {
			padding: 8px 10px 5px 10px;
			white-space: nowrap;
			font-size: 12px; 
			color: #263F55; 
			font-weight: bold;
			background-color: #AAD5E1;
			border-left: 1px solid #D9D9D9;
			}
		   
		table.styled th a,
		table.styled th a:visited,
		table.styled th a:link,
		table.styled th a:active {
			color: #263F55;
			font-weight: bold;
			text-decoration: none;
			}
		
		table.styled th a:hover {
			text-decoration: underline;
			background-color: transparent;
			}	
		
		table.styled tr.shaded {
			background-color: #D1E7FA;
			border-bottom: 1px solid #BFDFE8;
			}

/* --------------------------------------------------------------------------------
 * END TEXT STYLES
 * --------------------------------------------------------------------------------*/