/* GLOBAL STYLE SHEET */

/*************************************************************************************************
	IMPORT EXTERNAL STYLE SHEETS
**************************************************************************************************/		

	
/*************************************************************************************************
	"ZERO OUT" BROWSER STYLE FORMATTING
**************************************************************************************************/	
/* Eliminates differences in formatting by different browsers */
	body, h1, h2, h3, h4, h5, h6, p, ol ,ul, form, blockquote {
		padding: 0;
		margin: 0;
	}
	
	h1, h2, h3, h4, h5, h6, pre, code {
		font-size: 1em;
	}
	
	a {
		text-decoration: none;
	}
	
	a img {
		border: none;
	}
	
/*************************************************************************************************
	HTML
**************************************************************************************************/	
	html {
		margin: 0;
		padding: 0;
	}

/*************************************************************************************************
	BODY
**************************************************************************************************/		
	body {
		background-color: #657C95;
		color: #4b4c4a;
		font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
		font-size: 11px;
		height: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		width: 100%;      
	}

	/* //////////////////// */			
	/* PRINT MEDIA SETTINGS */
	/* //////////////////// */
		@media print{
			body {
				font-family: "Times New Roman", Times, serif; /* change to serif fonts for easier reading */
				font-size: 12pt; /* change to standard 12pt font size */
				color: #000000; /* change font color to black */
				background: #ffffff;  /* change background color to white */
			}	
		}

/*************************************************************************************************
	PARAGRAPH
**************************************************************************************************/		
	p { 
		margin-top: 20px;
		margin-bottom: 20px;
		line-height: 150%;
	}
	
/*************************************************************************************************
	DROP CAPS
**************************************************************************************************/	
	/* Effects paragraphs with "dropCap" class */	
		p.DropCap:first-letter {
			color:#6a812c;
			display:block;
			float: left;
			font-family: serif;
			font-weight: normal;
			font-size: 500%;
			line-height: 85%;
			margin-right: 5px;
			margin-top: 5px;
			padding-bottom: 5px;
			text-transform: uppercase;
		}

/*************************************************************************************************
	HEADLINES
**************************************************************************************************/		
	h1 {
		font-size: 125%;
		font-weight: bold;
		border-bottom: 1px solid #979797;
		padding:0; 
		padding-bottom: 5px;
		margin:0;
	
	}
		
	h2 {
		font-size: 115%;
		font-weight: bold;
		font-style: italic;
		color: #a0a0a0;
		padding:0; 
		padding-top: 5px;
		margin:0;
	}	
	
	
	
	/* //////////////////// */			
	/* PRINT MEDIA SETTINGS */
	/* //////////////////// */
	@media print{
		h1 {
			font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
		}
			
		h2 {
			font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
		}	
	}
		
/*************************************************************************************************
	LINKS
**************************************************************************************************/		
	a:link {
		color: blue;
		text-decoration: underline;
	}
	
	a:visited {
		color: purple;
		text-decoration: underline;
	}
	
	a:hover {
		text-decoration: underline;
	}
		
	a:active {
	
	}	
		
		
/*************************************************************************************************
	ORDERED & UNORDERED LISTS
**************************************************************************************************/		
	ol,ul {
		margin: 20px;
	}
	
	/* CUSTOM */
	ol.Custom,ul.Custom {
		margin: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	ul.Custom li{
		list-style: none;
		background-image: url(images/Bullets/DblArrow_Green.png);
		background-repeat: no-repeat;
		background-position: 0px 7px;   
		padding-left: 18px; /* Space between bullet and text */
		padding-top: 2px;
		padding-bottom: 3px;
		margin-bottom: 7px; /* Spacing between list items */
	}	
	
/*************************************************************************************************
	PAGE LOADER
**************************************************************************************************/		
	#PageLoader {
		z-index:1000;
		height:100%; 
		width:100%;
		display: block;
		position: absolute; 
		top: 0; 
		left:0;
	}	   
	
	#PageLoadingMsg {
		width: 250px;
		margin: auto;
		margin-top: 150px;
		text-align:center;
		background-color: #ffffff;
		background-image: url(images/ProcessingWheel.gif);
		background-position: 25px 15px;
		background-repeat: no-repeat;
		border:1px solid #333;
		padding: 25px;
	}
	
/*************************************************************************************************
	PAGE CONTENT
**************************************************************************************************/		
	/*
		Encapsulates all page content.  Used in conjunction with "PageLoader" to alternate between
		display of "page loading" message and loaded page content.
	*/
	PageContent {
		display: block;
	}
	
/*************************************************************************************************
	CONTAINER
**************************************************************************************************/		
	/*
		Encapsulates page elements like header, footer, etc.  Can be used to center a design and/or frame it. 
	*/
	#Container {
		background: white;
		position: relative;
		text-align: left;
		width: 850px;           
		margin-top: 5px;
		margin-right: auto;
		margin-bottom: 15px;
		margin-left: auto;
	}     
		
	/* //////////////////// */			
	/* PRINT MEDIA SETTINGS */
	/* //////////////////// */
		@media print{
			#Container {
				width: 100%;
				margin: 0;
				text-align: left;
				background: #ffffff;  /* change background color to white */
				border: 0;
			}			
		}
	
/*************************************************************************************************
	HEADER
**************************************************************************************************/	
	#Header {
		background:white;     
		margin: 0;
		padding: 0;
		overflow: hidden;   
	}
	
	#Header #Logo {
		float: left;
		padding: 10px;
	}
/* ShopCart Nav */	
	#Header #ShopCartNav {
		float: right;
		padding: 10px;
		padding-top: 5px;
	}

/* Colored Bars */	
	#ColoredBars {
		clear: both;   
		border-top: 5px solid #336699;
		background: #dddcdc;
		border-bottom: 5px solid #6ca05c;
		height: 1px;
		line-height: 1px;
		max-height: 1px;
		margin:0;
		padding:0;
		
	}
/*************************************************************************************************
	HOME PAGE
**************************************************************************************************/		
	
	/* TOP BANNER */
		#HomePageBanner {
			background: #5781ae; /*#5781ae*/
			overflow: hidden;
			margin: 0;
			padding:0;
		}
		
		#HomePageBanner h2{
			color: white;
			padding:0;
			padding-top: 10px; 
			padding-bottom: 5px;  
			margin:0;
			margin-bottom: 15px;
		}
		
		#HomePageBanner .col1 {
			float: left;   
			width: 246px;  
			text-align: center;  
			margin: 0px;
			padding: 0px;
			overflow: hidden;
			/* display: inline; */
		}
		* html #HomePageBanner .col1 {
			margin-right: -3px;
		}
		
		#HomePageBanner .col2 {
			width: 604px;
			height: 208px;       
			overflow: hidden;
			margin: 0px;     
			padding: 0px;
			overflow: hidden;
			/*display: inline; */       
		}
		
		#HomePageBanner .HPBSpacer {
			display: block;
			margin-bottom: 10px;
			margin-left: 10px;
		}
		
		#HomePageBanner .BtmButton {
			margin-bottom: 0;
			margin-left: 10px;
			overflow: hidden;
		}
		
	
	/* MAIN */	
		#HP_Main {
			background-color: white;
			background-image: url(images/Backgrounds/VertGreyDot_780.gif);
			background-attachment: scroll;
			background-position: center;
			padding-top: 15px;
			margin: 0;
		}
		
	/* PERSONAL	*/
		#HP_Main #Personal {
			float: left;
			width: 425px;
			padding-bottom:15px;
		}
		
		/* IE 6/Older Fix */
		* html #HP_Main #Personal {
			margin-right: -3px;
		}     

		#HP_Main #Personal .inner{
			margin-right: 10px;
		}

		#HP_Main #Personal #FreeCalculators {
			margin-left: 15px;
		}
		
		#HP_Main #Personal #FreeCalculators .SalaryCalculatorInputModule {
			margin-top: 15px;  
			margin-bottom: 15px;  
		}
		
		#HP_Main #Personal #FreeCalculators .ExecutiveCalculatorInputModule {
			margin-top: 15px;  
			margin-bottom: 15px;  
		}
		
		#HP_Main #Personal #FreeCalculators .COLCalculatorInputModule {
			margin-top: 15px;  
			margin-bottom: 15px;  
		}
		
		#HP_Main #Personal #FreeCalculators .BannerAd {
			margin: 0;
			margin-top: 15px;  
			margin-bottom: 15px;  
			background-image: url(#VARIABLES.DirLevel#images/ERIDLCBkgrnd_401x79.gif); 
			width: 401px; 
			height: 79px; 
			padding: 0px 0px 0px 0px;  
			text-align: left; 
			overflow: hidden;
		}
		
	/* ERIDLC Banner Ad */	
		#HP_Main #Business  #BannerAd {
			background-image: url(/images/ERIDLCBkgrnd_389x79.gif); 
			height: 79px; 
			margin: 0; 
			margin-top: 15px;  
			margin-left: 14px;           
			margin-bottom: 15px;  
			overflow: hidden;
			padding: 0px 0px 0px 0px; 
			width: 389px; 
		}
		
		#HP_Main #Business  #BannerAd .inner{
			float: left; 
			margin-top: 35px; 
			margin-bottom: 5px; 
			margin-left: 145px;   
			margin-right: 5px;
		}
		/* IE 6- FIX */
			* html #HP_Main #Business  #BannerAd .inner{
				margin-left: 75px;   
			}
		
	/* BUSINESS */	
		#HP_Main #Business {
			float: left;
			width: 425px;
		}
		
		#HP_Main #Business .inner{
			margin-left: 10px;
			font-size: 95%;
		}
		
		#HP_Main #Business .content{
			margin-left: 15px;
			margin-top: 15px;  
			margin-bottom: 15px;  
		}
		
	/* COMMON TO PERSONAL & BUSINESS */
		#HP_Main h1{
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 20px; 
			color: #0A446B; 
			font-weight: bold;
			padding-left: 15px;
			border: 0;
			}
		
		#HP_Main h2{
			font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
			font-size: 13px; 
			font-weight: bold; 
			color: white;
			background: #94aecb;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-left: 15px;
			padding-right: 5px;
		}
		
		#HP_Main h3{
			font-family:Arial, Helvetica, sans-serif; 
			font-size:15px; 
			color: #0A446B; 
			font-weight:bold;
		}
		
/* Browse page styles */
	#BrowsePage h1{
		font-family: Arial, Helvetica, sans-serif; 
		font-size: 18px; 
		color: #0A446B; 
		font-weight: bold;
		border: 0;
		}
	
	#BrowsePage h2{
		font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
		font-size: 13px; 
		font-weight: bold; 
		color: #999999;
		padding: 5px 5px 5px 5px;
	}
	
	#BrowsePage h3{
		font-family:Arial, Helvetica, sans-serif; 
		font-size:15px; 
		color: #0A446B; 
		margin-top: 5px;
		font-weight:bold;
	}
		
/* Salary Resources */
	#SalarySurveyResources {
		font-size: 11px;
	} 
	
	/* IE 6- FIX */
	* html #SalarySurveyResources {
		zoom:1;
	} 
	
	#SalarySurveyResources td{
		font-size: 11px;
	} 
	
	#SalarySurveyResources h3{
		background: #ECECEC;
		padding: 2px;
	} 
	
	#SalarySurveyResources a{
		display: block;
		margin-bottom: 2px;
	}    

/*************************************************************************************************
	TOP NAV
**************************************************************************************************/	
	#Nav_Top {
		
	}
		
/*************************************************************************************************
	LEFT NAV
**************************************************************************************************/	
	#Nav_Left {
		float: left;
		margin: 0;
		padding: 0px;
		positon: relative;
		width: 150px;
	}
		
/*************************************************************************************************
	MAIN CONTENT
**************************************************************************************************/		
	#MainContent {
		background-color: #ffffff;
		display: block;
		height: auto;
		margin: 0;
		padding: 20px;
		overflow: hidden;
		width: auto;
	}	
		
	/* //////////////////// */			
	/* PRINT MEDIA SETTINGS */
	/* //////////////////// */
		@media print{
			#MainContent {
				width: 100%;
				background:#ffffff;
				margin: 0;
				padding: 0;
			}			
		}	
		
/*************************************************************************************************
	BOTTOM NAV
**************************************************************************************************/			
	#Nav_Bottom {
		background-color: #6a812c;
		margin: 0; 
		padding: 15px; 
		overflow: hidden;
		color: #fff;
		width: auto;
		text-align: center;
	}	
	
	#Nav_Bottom a {
		color: #fff;
		text-decoration: none;
	}	
	
	#Nav_Bottom a:visited {

	}
	
	#Nav_Bottom a:hover {
		text-decoration: underline;
	}
		
	#Nav_Bottom a:active {
	
	}
		
		

/*************************************************************************************************
	FOOTER
**************************************************************************************************/		
	#Footer {
		border-top: solid 1px #808080;
		background: white;
		margin: 0px;
		margin-top: 20px;
		padding: 10px;
		overflow: hidden;
		text-align: center;
		font-size: 11px;
	}
	
	#Footer p{
		margin: 0;
		padding: 0;
		padding-bottom: 5px;
		
	}
	
	#Footer .Legal{
		margin-top: 10px;
	}
	
	#Footer .Copyright{
		font-size: 11px;
		color: #5A5A5A;
	}
	
	
/*************************************************************************************************
	CSS-Based Drop-Shadows 
**************************************************************************************************/	

	/* EXAMPLE USAGE:
	
		<div id="ShadowContainer">
	        <div class="Shadow1">
	            <div class="Shadow2">
	                <div class="Shadow3">
	                    <div class="ShadowContent">
	                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	                    </div>
	                </div>
	            </div>
	        </div>
    	</div>
	
	*/

	#ShadowContainer {
		position: relative;
		float: left;
		left: 3px;
		top: 3px;
		margin-right: 3px;
		margin-bottom: 3px;
	}
	
	#ShadowContainer .Shadow2,
	#ShadowContainer .Shadow3,
	#ShadowContainer .ShadowContent {
		position: relative;
		left: -1px;
		top: -1px;
	}
	
	#ShadowContainer .Shadow1 {
		background: #F1F0F1;
	}
	
	#ShadowContainer .Shadow2 {
		background: #DBDADB;
	}
	
	#ShadowContainer .Shadow3 {
		background: #B8B6B8;
	}
	
	#ShadowContainer .ShadowContent {
		background: #ffffff;
		border: 1px solid #848284;
		padding: 10px;
		width: auto;
	}
		
/*************************************************************************************************
	CSS-Based Drop-Shadows for TEXT
**************************************************************************************************/			
	/* EXAMPLE USAGE:
	
		<span class="DropShadowText">Drop-Shadowed Headline<span>Drop-Shadowed Headline</span></span> 	
	
	*/
	/* Drop Shadowed Text */
		.DropShadowText { 
			left: 1px;
			position: relative; 
			top: 1px; 
			color: #cecdcd;
		} 
	
	/* Text */
		.DropShadowText span { 
			color: #333;
			left: -2px;
			position: absolute; 
			top: -2px; 
		} 

	
/*************************************************************************************************
	CSS Float Clearing Solution
**************************************************************************************************/
			
	.clear-both, .clear-left, .clear-right {
		height: 1px;
	}
	
	.clear-left:after,
	.clear-right:after,
	.clear-both:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		visibility: hidden;
	}
	.clear-left,
	.clear-right,
	.clear-both {
		min-height: 1px;
	}
	
	* html 
	.clear-left,
	.clear-right,
	.clear-both {
		height: 1px;
	}
	
	.clear-both {
    	clear: both;
    }
    
    .clear-left {
   	 	clear: left;
    }
    
    .clear-right {
    	clear: right;
    }
	
/*************************************************************************************************
	CALL-OUT BOX
**************************************************************************************************/	
		/* EXAMPLE USAGE:
		
		Class Options:	
			
			FlatBottom: 	Removes rounded rectangle bottom from footer and replaces with flat border (default is rounded-rectangle bottom)
			
			Small: 			Changes width to 185 pixels (default is 300 pixels)
			
		<div class="CallOutBox FlatBottom Small">
			<div class="Header">
				Call-Out Box Headline
			</div>
			<div class="Content">
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
				invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
				duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor 
				sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
				invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			</div>
			<div class="Footer"></div>
		</div>
	
		*/
		
		
		div.CallOutBox {
			width: 300px;
			margin-bottom: 20px;
		}
		
		div.CallOutBox .Header {
			background: url(images/CallOutBoxes/Green_RndRec_300.png);
			background-repeat: no-repeat;
			background-position: left top;
			font-size: 125%;
			font-weight: bold;
			padding: 10px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		
		div.CallOutBox .Content {
			background-color: #ffffff;
			border-top: #83c146 1px solid;
			border-right: #83c146 1px solid;
			border-left: #83c146 1px solid;
			font-size: 90%;
			padding-top: 10px;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 0px;
		}
		
		div.CallOutBox .Footer {
			background: url(images/CallOutBoxes/Green_RndRec_300.png);
			background-repeat: no-repeat;
			background-position: left bottom;
			height: 10px;
		}
		
	
	/* FlatBottom */
		div.CallOutBox.FlatBottom .Footer {
			border-bottom: #83c146 1px solid;
			background: #ffffff;
			height: 0;
		}
		
		div.CallOutBox.FlatBottom .Content {
			padding-bottom: 10px;
		}
		
	
	/* Small */
		div.CallOutBox .Small {
			width: 185px;
		}
		
		div.CallOutBox.Small .Header {
			background: url(images/CallOutBoxes/Green_RndRec_185.png);
		}
		
		div.CallOutBox.Small .Footer {
			background: url(images/CallOutBoxes/Green_RndRec_185.png);
			background-repeat: no-repeat;
			background-position: left bottom;
		}
	

	
		
/*************************************************************************************************
	IMAGE SPRITES
**************************************************************************************************/	
	/* 
		A method of using a master image made up of smaller images that are used for presentation within a site, and displaying these images as needed by positioning them via the background-position property (x/y coordinates).
	
		Sprites reduce the number of files that are requested and downloaded by site visitors, resulting in noticeable decreases in Page-Loading times, Bandwidth usage, and Server loads.
		
		EXAMPLE USAGE:
			IMAGE:
			<img class="PICS Plus" src="#VARIABLES.DirLevel#1pix.gif" alt="" />

			HREF:
			<a href="##" class="ICON Plus"></a> 

			LIST:
			<ul>
				<li class="BULLET Plus">List Item 1</li>
				<li class="BULLET PlusSml">List Item 2</li>
				<li class="BULLET Minus">List Item 3</li>
			</ul>

			DIV:
			<div class="ICON Plus"></div>

	*/	
	/* IMAGE */
		.IMAGE {background-color: #FFF; background-image: url(images/Sprites/icons.png); background-repeat: no-repeat; display: block;}
	
	/* LINK */
		.LINK {background-color: transparent; background-image: url(images/Sprites/icons.png); background-repeat: no-repeat;}
		a.LINK {padding-left: 20px;}
	
	/* BULLET */
		.BULLET {list-style: none; background-image: url(images/Sprites/icons.png); padding-bottom: 10px;}
	
	
	/* Plus Sign */ .Plus {background-position: 0px 0px;} .IMAGE.Plus {width: 13px; height: 13px; line-height: 13px; overflow: hidden;} li.Plus {background-position: 0px 3px; padding-left: 20px;}
	/* Plus Sign - Small */ .PlusSml {background-position: 0px -50px;} .IMAGE.PlusSml {width: 9px; height: 9px; line-height: 9px; overflow: hidden;} li.PlusSml {background-position: 4px -45px; padding-left: 20px;}
	/* Minus Sign */ .Minus {background-position: 0px -100px;} .IMAGE.Minus {width: 13px; height: 13px; line-height: 13px; overflow: hidden;} li.Minus {background-position: 0px -97px; padding-left: 20px;}
	/* Minus Sign - Small */ .MinusSml {width: 9px; height: 9px; background-position: 0px -150px;}
	
	/* Text Size - Large */ .TxtSize-Larger {background-position: 0px 0px;} .IMAGE.Plus {width: 13px; height: 13px; line-height: 13px; overflow: hidden;} li.Plus {background-position: 0px 3px; padding-left: 20px;}

/*************************************************************************************************
	BUTTON
**************************************************************************************************/
	/* EXAMPLE USAGE
		<a class="button" href="JavaScript: submit();" onclick="JavaScript: this.blur();"><span>Create Salary Report</span></a>
	*/
		
	/*///////////////////////////////////////
	 GREEN BUTTON W/BLUE ARROW                        
	///////////////////////////////////////*/	
		/* REGULAR */
			a.button {
			    background: transparent url(images/Buttons/Green_BlueArrow_Right.gif) no-repeat top right;
			    color: #fff; /* Button Text Color */
			    display: block;
			    float: left;
			    font: bold 12px arial, sans-serif;
			    height: 24px; /* button height */
			    margin-right: 6px;
			    padding-right: 18px; /* sliding doors padding */
			    text-decoration: none;
			}
			
			a.button span {
			    background: transparent url(images/Buttons/Green_BlueArrow_Left.gif) no-repeat top left;
			    display: block;
			    line-height: 14px;
			    padding: 5px 0 5px 28px;      
			} 
			
			a.button:visited {
				color: #fff; /* Button Text Color - Active */
				text-decoration: none;
			}
		
		/* HOVER */
			a.button:hover {
				background-position: 100% -24px; /* - button height */
				text-decoration: none;
			}
			
			a.button:hover span {
				background-position: 0 -24px; /* - button height */
			} 	
			
		/* ACTIVE */
			a.button:active {
			    background-position: 100% -48px; /* - (2 x button height) */
			    color: #fff; /* Button Text Color - Active */
			    outline: none; /* hide dotted outline in Firefox */
     
			}
			   
			a.button:active span {
			    background-position: 0 -48px; /* - (2 x button height) */
			    padding: 6px 0 4px 28px; /* push text down 1px */
			} 	
			
			
	/*///////////////////////////////////////
	 WHITE BUTTON W/WHITE ARROW ON HOME PAGE                        
	///////////////////////////////////////*/
		/* REGULAR */
			#HomePageBanner a.button {
			    background: transparent url(images/Buttons/White_WhiteArrow_Right.gif) no-repeat top right;
			    color: #49793a; /* Button Text Color */
			    display: block;
			    float: left;
			    font: bold 12px arial, sans-serif;
			    height: 24px; /* button height */
				width: 215px;  
			    margin-right: 6px;
			    padding-right: 18px; /* sliding doors padding */
			    text-decoration: none;
				text-align: left;
			}
			
			#HomePageBanner a.button span {
			    background: transparent url(images/Buttons/White_WhiteArrow_Left.gif) no-repeat top left;
			    display: block;
			    line-height: 14px;
			    padding: 5px 0 5px 28px;   
				white-space: nowrap;   
			} 
			
		/* HOVER */
			#HomePageBanner a.button:hover {
				background-position: 100% -24px; /* - button height */
			}
			
			#HomePageBanner a.button:hover span {
				background-position: 0 -24px; /* - button height */
			} 	
			
		/* ACTIVE */
			#HomePageBanner a.button:active {
			    background-position: 100% -48px; /* - (2 x button height) */
			    color: #49793a; /* Button Text Color - Active */
			    outline: none; /* hide dotted outline in Firefox */
			}
			   
			#HomePageBanner a.button:active span {
			    background-position: 0 -48px; /* - (2 x button height) */
			    padding: 6px 0 4px 28px; /* push text down 1px */
			} 
			
/*************************************************************************************************
	HIGHTLIGHT IMAGE HOVER EFFECT
**************************************************************************************************/				
	/* EXAMPLE USAGE   
		<a class="ToggleOpacity" href="http://www.mysite.com"><img src="button.gif"/></a>
	*/
	
	/* 100% to 50% Opacity */     
		.ToggleOpacity100to50 img {
			filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
			-moz-opacity: 1;
		}
		
		.ToggleOpacity100to50:hover img {
			filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
			-moz-opacity: 0.5;
		}
	
	/* 50% to 100% Opacity */
		.ToggleOpacity50to100 img {
			filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
			-moz-opacity: 0.5;
		}
		
		.ToggleOpacity50to100:hover img {
			filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
			-moz-opacity: 1;
		}
		
	/* 100% to 75% Opacity */     
		.ToggleOpacity100to75 img{
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
		-moz-opacity: 1;
		}
		
		.ToggleOpacity100to75:hover img{
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);
		-moz-opacity: 0.75;
		}
		
		
/*************************************************************************************************
	OPACITY
**************************************************************************************************/			
		
		.Opacity50 {
			opacity: .5;
			filter: alpha(opacity=50);
			-moz-opacity: .5;
		}
		
/*************************************************************************************************
	TEXT
**************************************************************************************************/			
	/* Highlight */
		.highlight {background-color: yellow;}		
		
		
	/* Legacy */
		.largest {font-size: 125%}
		.larger { font-size: 115%}
		.large {font-size: 110%}
		.Default {font-size: 11px;}
		.small {font-size: 11px;}
		.smaller {font-size: 85%}
		.smallest {font-size: 75%}
		
		.headline-largest {font-size: 125%}
		.headline-larger { font-size: 115%}
		.headline-large {font-size: 110%}
		.headline-Default {font-size: 100%}
		.headline-small {font-size: 95%}
		.headline-smaller {font-size: 85%}
		.headline-smallest {font-size: 75%}


/*************************************************************************************************
	EXPAND/CONTRACT CONTAINER
**************************************************************************************************/	
	div.ExpandContractContainer .TitleBar{
		font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; 
		font-size: 13px; 
		font-weight: bold; 
		color: white;
		background: #94aecb;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 15px;
		padding-right: 5px;
	}	
	
	div.ExpandContractContainer .Content{
		background: white;
	}	
	div.ExpandContractContainer .PlusMinusSign{
		position: relative;
		top: 1px;
	}	
	
		
		
/*************************************************************************************************
	TABLES
**************************************************************************************************/				
	/* Table Borders */
		.Dashed_Default { border: black; border-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

/*************************************************************************************************
	PRINT MEDIA
**************************************************************************************************/					
	@media print{
		/* Hide Unwanted Page Areas */
			#PageLoader, #Nav_Top, #Nav_Left, #Nav_Bottom, #Footer {
				display: none;
			}
	}
	   
/*********************************************************************
	POPUP 
***********************************************************************/
	#popupContent {
		padding-left: 15px;
		padding-bottom: 30px;
		background-color: #ffffff;
		text-align: left;
	}	   
	
	/*************************************************************************************************
	POP-UP WINDOW
**************************************************************************************************/			  
		
	.PopUpWindow {
		background: #F1F1F1; /* light grey */
		margin-top: 5px;
		margin-bottom: 20px;   
		color: #808080; /* dark grey */
		padding: 0;
		text-align: left;
		border: 1px solid #3d5b7a; /* dark blue */
	}
	
	div.PopUpWindow .Header {
		background: #3d5b7a; /* blue */
		padding: 3px;
		
	}
	
	div.PopUpWindow .Headline {
		float: left;
		text-align: left;
		color: #ffffff;
		font-weight: bold;
	}
	
	div.PopUpWindow .Controls {
		float: right;
	}
	
	div.PopUpWindow div.Controls .Btn_Exit{
		background-image: url(images/WindowControls/btn_win_x.gif);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		width: 11px;
		height: 11px; 
	}
	
	div.PopUpWindow div.Controls div.Btn_Exit span{
		margin:auto;
		top: -4px;
		color: #FFFFFF; /* white */
		position: relative;
	}
	
	
	div.PopUpWindow .Inner {
		color: #383838;
		padding: 3px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 11px;
		text-align: left;
	}