/* 

CSS for MCU page components
(content specific to pages)

Nov 1, 2006 Vanguard Direct MPH

*/

/*Begin Colors used on the site 
color: #000099;  Blue
       #003399
color: #339933;  Green Hyperlink color


End Colors used on the site*/


div#modHomeBank {

	width: 178px;
	border: 1px solid #ccc;
	padding:0 ;
	margin: 0 0 0px 0;
}


h2#titleHomeBank {
	background: transparent url(../images/homeBanking/title_HomeBankingLogin.gif) top left no-repeat ;
	width: 178px;
	height: 25px;
}



div#homeBankingContent  {
	font: 10px Arial;
	margin: 8px 0px 0px 12px;

}

#homeBankingAccount_input {
	width: 150px;
}

#homeBankingPasswd_input {
	width: 95px;
	float: left;
	margin-right:11px;
}

img#homeBanking_button {
	margin:0 auto;
	padding:0 auto 4px 0;
}

div#modHomeBank a{
	color: #339933;
	text-decoration: underline;
	font: 10px Arial;
	position: relative;
	top: 5px;
	line-height:1.5;
}

div#modHomeBank a:hover {
	color: #0033FF;
}

div#homeBankingContent span#bankNotice1
{
	margin-top: 5px;
	display: block;	
	margin-bottom: 0px;
	color: #003399;
	font-size: 10px;
}

img#logoVeriSign {
	margin-top: 9px;
}

div#modTeaserFocus {
	background: transparent url(../images/teasers/bg_FutureFocus.jpg) top left no-repeat;
	/*height:109px; */
}

div#focusContent h2 {
	background: transparent url(../images/teasers/title_FutureFocus.jpg) top left no-repeat;
	height:28px;
	width:75px;
}

div#teaserYoungAdults {
	background: transparent url(../images/teasers/bg_YoungAdults.jpg) top left no-repeat;
	height:109px;
}

div#teaserYoungAdults div#teaserYoungAdultsContent h2 {
	background: transparent url(../images/teasers/title_YoungAdults.gif) top left no-repeat;
	height:37px;
	width:49px;
	margin-top:20px;
	margin-bottom:8px;
}

div#teaserHomeEquity {
	background: transparent url(../images/teasers/bg_EquityLOC.jpg) top left no-repeat;
}

div#teaserHomeEquity  div#teaserHomeEquityContent h2 {
	background: transparent url(../images/teasers/tag_EquityLOC.jpg) top left no-repeat;
	height:41px;
	width:74px;
}

div#teaserDreamHome {
	background: transparent url(../images/teasers/bg_DreamHome.jpg) top left no-repeat;
}

div#teaserDreamHome div#teaserDreamHomeContent h2 {
	background: transparent url(../images/teasers/title_DreamHome.jpg) top left no-repeat;
	height:41px;
	width:84px;	
}

div#teaserResourceCenter1 { /* small Ad as opposed to Gateway teaser with green title, and links */
	background: transparent url(../images/teasers/bg_ResourceCenter1.jpg) top left no-repeat;
}

div#teaserResourceCenter1 div#teaserResourceCenter1Content h2 {
	background: transparent url(../images/teasers/title_ResourceCenter1.gif) top left no-repeat;
	width:62px;
	height:33px;	
}

div#modEmailSignUp {
	width: 178px;
	border: 1px solid #ccc;
	border-left: none;
	margin-top: 10px ;
	padding: 0px 0px 5px 0px;
}
div#emailSignupContent {
	font: 10px Arial;
	margin: 10px 0px 0px 12px;
	padding: 0px 0px 10px 0px;

}
h2#titleEmailSignUp {
	background: transparent url(../images/title_EmailSignUp.jpg) top left no-repeat ;
	width: 178px;
	height: 25px;
}

h2#titleEmailSignUp span {
	display: none;
}

#emailSignup_input {
	width: 100px;
	float: left;

}
img#emailSignup_button {
	margin:0 auto;
	padding:0 auto 4px 0;
}

/* MIDDLE CONTENT AREA FOR HOMEPAGE */

/* 
home page Promo Display

*/

.contentslide  { color: #e5e5e5; background-color: #808080; margin: 0; padding: 2px 2px 0; width: 364px; height: 138px }

.contentslide img  { color: #e5e5e5; background-color: #808080; margin: 0; padding: 0 }
.contentslide .contentdiv { color: #e5e5e5; background-color: #808080; display: none }

.pagination    { color: #e5e5e5; background: #e5e5e5 url(images/bottomControl.gif) no-repeat; text-align: right; margin: 0; padding: 0 0 0px; border-top: 2px solid #ccc; width: 364px }

* html .pagination  { color: #e5e5e5; position: relative; top: -3px; width: 364px; w\idth: 364px }

.pagination a{
padding: 0 5px;
font: 10px Arial;
text-decoration: none; 
color: #000;

}

.pagination a:hover, .pagination a.selected { color: #fff; background-color: #606 }
/* end of Promo */

div#modWelcome {
	width: 500px;
	margin: 0;
	padding: 0px 0px 15px 0px;	
	background: transparent url(../images/border_GreyDot.gif) bottom left repeat-x;
}

h2#titleWelcome {
	background: transparent url(../images/icon_Exclaim.jpg) top left no-repeat;
	height: 25px;
	padding: 3px;
}

h2#titleWelcome span {
	text-transform: uppercase;
	font: bold 12px Arial;
	color: #003399;
	margin-left: 30px;
}
h2#titleWelcome span.bigRed {
	font: bold 16px Arial;
	color: #FF0000;
}
	

div#modWelcome p {
	margin: 0;
	padding: 0px;
}

div#modWelcome a {
	font-weight: bold;
}

div#modWelcome a:hover {
	color: #0033FF;
}

/* Life Events */

div#modLifeEvents {
	padding:0;
	margin:12px 0px 0px 0px;
	width: 370px;
}

div#modLifeEvents h3 { /* applies to all of the life events */
		height: 30px;
		float:left;
		padding:5px 6px 0px 34px;
		margin:0;
}

div#modLifeEvents span {
	margin-bottom:12px;
	display:block;
}

div#modLifeEvents h3 a { /* applies to all of the life events */
	font-weight: bold;
	font-size:11px;
}

	/* each Life Event , its own Icon, and width.. (first in each row is thinner)  */
	div#modLifeEvents h3#school {
		background: transparent url(../images/icon_Education.jpg) top left no-repeat;
		width: 76px;
	}
	div#modLifeEvents h3#married{
		background: transparent url(../images/icon_Married.jpg) top left no-repeat;
		width: 86px;
	}
	
	div#modLifeEvents h3#retirement{
		background: transparent url(../images/icon_Retirement.jpg) top left no-repeat;
		width: 86px;
	}
	div#modLifeEvents h3#starting {
		background: transparent url(../images/icon_Starting.jpg) top left no-repeat;
		width: 76px;
	}	
	div#modLifeEvents h3#buyingHome{
		background: transparent url(../images/icon_BuyingHome.jpg) top left no-repeat;
		width: 86px;
	}	
	div#modLifeEvents h3#challenging{
		background: transparent url(../images/icon_Challenging.jpg) top left no-repeat;
		width: 86px;
		
	}	
	
	div#modLifeEvents h3#buyingCar {
		background: transparent url(../images/icon_BuyingCar.jpg) top left no-repeat;
		width: 76px;
	}	
	div#modLifeEvents h3#birth {
		background: transparent url(../images/icon_Birth.jpg) top left no-repeat;
		width: 86px;
	}	
	
		
	/* end of Life Events iconography... */
/* end of MIDDLE CONTENT AREA HOME PAGE */

/* RIGHT COLUMN HOME */

/* OUR RATES */
div#modOurRates {

}

h2#titleOurRates {
	background: transparent url(../images/title_OurRates.jpg) top left no-repeat ;
	width: 178px;
	height: 25px;
}

h2#titleOurRates span {
	display: none;
}

div#ourRatesContent  {
	margin: 8px 0px 0px 8px;	
}

div#ourRatesContent span {
	padding-bottom:3px;
	font: 11px Arial;
}
div#ourRatesContent h4 {
	width: 124px;
	float:left;
	font: 11px Arial;
	margin:0;
	padding:0;
	line-height:1.6;
	color:#000;
}

div#ourRatesContent h5 {
	width: 30px;
	float:left;
	font: 11px Arial;
	margin:0;
	padding:0;
	line-height:1.8;

}

div#ourRatesContent .rateLabel, div#ourRatesContent .rateLabel a, div#ourRatesContent .rateLabel a:visited, div#ourRatesContent .rateLabel a:hover {
	font-weight: bold;
	color: #003399;
	text-decoration:none;
}



/* END OF OUR RATES */


div#teaserBillPay {
	background: transparent url(../images/teasers/bg_BillPay.jpg) top left no-repeat;
	
}

div#teaserBillPayContent h2 {
	height:43px;
	width:69px;
	background: transparent url(../images/teasers/title_BillPay.jpg) top left no-repeat;
	
	
}


/* END OF RIGHT COLUMN HOME */


/* RESOURCES */

div#resourcesContentBlock {
	background: transparent url(../images/border_GreyDot.gif) bottom left repeat-x;
	padding-bottom: 16px;
}

div#pageMenu h2#titleResourcesMenu {
	background: transparent url(../images/resources/title_Nav.jpg) top left no-repeat ;
	width: 177px;
	height: 25px;
}


/* calc Teaser */
h2#titleTeaserCalc {
	background: transparent url(../images/teasers/title_Calculators.jpg) top left no-repeat ;
	width: 179px;
	height: 25px;
}

div#teaserCalcContent {
	background: transparent url(../images/teasers/bg_Calculators.jpg) top left no-repeat;
	height:130px;
}

div#teaserCalcContent h2 {
	background: transparent url(../images/teasers/tag_Calculators.jpg) top left no-repeat;
	width:83px;
	height:29px;
}

/* Guides  teaser*/
h2#titleTeaserGuides {
	background: transparent url(../images/teasers/title_Guides.jpg) top left no-repeat ;
	width: 179px;
	height: 23px;
	margin:0;
	padding:0;
}

div#teaserGuidesContent {
	background: transparent url(../images/teasers/bg_Guides.jpg) bottom left no-repeat;
}

div#teaserGuides div#teaserGuidesContent h2 {
	background: transparent url(../images/teasers/tag_Guides.jpg) top left no-repeat;
	width:67px;
	height:29px;
}



img#learnMoreYG {
	padding-top:10px;
}



div#teaserBrass {
	background: transparent url(../images/teasers/bg_BrassCU.jpg) top center no-repeat;

}
div#teaserBrassContent{
	padding-top:108px;
	padding-left:14px;
}

div#teaserBrassContent h2 {
	color:#003798;
	font:bold 12px Arial;
	padding:0;
	margin:0;
}

/* young Adults */
div#youngAdultsWelcome {
	position:relative;
	left:-6px;
}

/* end of Young Adults */

div#challengingBlock p{
	background: transparent url(../images/border_GreyDot.gif) bottom left repeat-x;
	padding-bottom: 16px;
}

h3#challengingSubHead {
	background: transparent url(../images/border_GreyDot.gif) bottom left repeat-x;
	margin:4px 0 0 0;
	padding-bottom:6px;
}

div#challengingBlock ul {
	list-style-type:none;
	margin:0;
	padding:.1em;
}

div#challengingBlock ul li {
	background:transparent url(../images/icon_bulletBlue.gif) center left no-repeat;
	padding:5px 0px 5px 0;
}

div#challengingBlock ul li a {
	margin-left:10px;
	font-weight:bold;
}

/* END OF RESOURCES */


/* RATES */

div#ratesBlock {
	padding-bottom:20px;
}
/* for understanding browsers */
.ratesGatewayContent {
	background: #EEF2F8;
	margin:0 0 20px 0;
	padding:0px 0px 10px 15px;
	min-height:365px; 
	height:auto;
}
/* for Internet Explorer */
/*\*/
* html .ratesGatewayContent {
height: 365px;
}
/**/
div#pageMenu h2#titleRatesMenu {
	background: transparent url(../images/rates/title_Nav.gif) top left no-repeat;
	height: 24px;
	width: 178px;
}

div#savingsRatesGateway {
	width: 181px;
	float:left;
	margin:0 ;
	padding:0 ;
}

div#savingsRatesGateway div#savingsRatesPromo {
	width: 181px;
	height:189px;
	background: transparent url(../images/rates/bg_SavingsTop.jpg) top center no-repeat;
	margin:0 ;
	padding:0;
	text-align:center;
}



div#savingsRatesGateway  h2 {
	background: transparent url(../images/rates/bg_SavingsTitle.jpg) no-repeat;
	width: 181px;
	height:51px;
	margin:0;
	padding:0;
}


div.rateBox {
	position:relative;
	top:100px;
}
.rateBox h4 {
	font: bold 12px Arial;
	color: #003798;
	margin:0;
	padding:0;
}

.rateBox h3 {
	font: bold 30px Arial;
	color: #4CAB2E;
	margin:0;
	padding:0;
}

div#savingsRatesPromo h3 {
	position:relative;
	left:-10px;
}

.rateBox span {
	color: #003798;
	font: 12px Arial;
}



/* mortgages */
div#mortgageRatesGateway {
	width: 175px;
	float:left;
	margin:0 0 0 2px ;
	padding:0 ;
}

div#mortgageRatesGateway div#mortgageRatesPromo {
	width: 175px;
	height:189px;
	background: transparent url(../images/rates/bg_MortgageTop.jpg) top center no-repeat;
	margin:0 ;
	padding:0;
	text-align:center;
}

div#mortgageRatesGateway  h2 {
	background: transparent url(../images/rates/bg_MortgageTitle.jpg) no-repeat;
	width: 175px;
	height:51px;
	margin:0;
	padding:0;
}

div#mortgageRatesPromo h3 {
	position:relative;
	left:-11px;
}

div#mortgageRatesPromo .rateBox {
	position:relative;
	left:5px;
}
/* end of mortages Rates */


/* loans */
div#loansRatesGateway {
	width: 175px;
	
	float:left;
	margin:0 0 0 2px ;
	padding:0 ;
}

div#loansRatesGateway div#loansRatesPromo {
	width: 175px;
	height:189px;
	background: transparent url(../images/rates/bg_LoansTop.jpg) top center no-repeat;
	margin:0 ;
	padding:0;
	text-align:center;
}

div#loansRatesGateway  h2 {
	background: transparent url(../images/rates/bg_LoansTitle.jpg) no-repeat;
	width: 175px;
	height:51px;
	margin:0;
	padding:0;
}

div#loansRatesPromo h3 {
	position:relative;
	left:-15px;
}

div#loansRatesPromo .rateBox {
	position:relative;
	left:3px;
}

div#loansRatesContent .rateType {
	float:left;
	width: 120px;
	font: bold 11px Arial;
	color: #003798;
	margin:9px 0 9px 0;
	padding:0;	
}

div#loansRatesContent .rateAPR {
	float:left;
	width: 30px;
	font: bold 11px Arial;
	color: #003798;
	margin:9px 0 9px 0;
	padding:0;	
}

div#loansRatesContent .rateTerm {
	float:left;
	width: 120px;
	margin:0;
	padding:0;	
}

div#loansRatesContent .rateValue {
	float:left;
	width: 30px;
	margin:0;
	padding:0;	
}
/* end of Loans */



.subHead3 {
	font: bold 12px Arial;
	color: #003798;
	padding:12px 0px 9px 0px;
	margin:0;
	display:block;
}

.subHead2 {
	font: bold 11px Arial;
	color: #003798;
	padding:9px 0px 9px 0px;
	margin:0;
	display:block;
}

.subHead1 {
	font-weight: bold;
	color: #003798;
	/*
	padding:9px 0px 0px 0px;
	margin:0; */
	display:block;	
}

.subHead {
	font: bold 11px Arial;
	color: #003798;
	padding:9px 0px 0px 0px;
	margin:0;
}

.textFirstLine {
	margin-top:3px;
}

.textLastLine {
	margin-bottom:3px;
}

.ratesGatewayContent h5 {
	width:150px;
	margin:0 0 5px 0;
	position:relative;
	bottom: 5px;
}

.ratesGatewayContent h5 a {
	font-size:10px;
}

.goArrow {
	float:left;
}

div#loansRatesContent h5 {
	position:relative;
	top:122px;
}

div#savingsRatesContent h5 {
	position:relative;
	top:75px;
}

div#mortgageRatesContent h5 {
	position:relative;
	top:25px;
}
.ratesGatewayContent span {
	display:block;
}



/* Rates Tables, from J.A. */
a.ratesheader:link      {color:#000099;font-family:Arial;font-size:16px;text-decoration:none;}
a.ratesheader:visited   {color:#000099;font-family:Arial;font-size:16px;text-decoration:none;}
a.ratesheader:hover     {color:#000099;font-family:Arial;font-size:16px;text-decoration:none;}
a.ratesheader:active    {color:#000099;font-family:Arial;font-size:16px;text-decoration:none;}


table.rates {
	
	width: 500px;
	border: 1px solid #C9C9C9;
	border-spacing: 0px;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;

}
table.rates th {
	border: 1px solid #C9C9C9;
	padding: 3px;
	background-color: #00379B;
	font-size: 11px;
 	font-family: Arial;
 	color:#FFF;
	text-align: center;
}
table.rates td {
	border: 1px solid #C9C9C9;
	padding: 3px;
	font-size: 11px;
 	font-family: Arial;
 	color:#000;
	text-align: center;
}

table.rates_term {
	width: 500px;
	border: 1px solid #C9C9C9;
	border-spacing: 0px;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;

}
table.rates_term th {
	border: 1px solid #C9C9C9;
	padding: 3px;
	background-color: #00379B;
	font-size: 11px;
 	font-family: Arial;
 	color:#FFF;
	text-align: center;
}
table.rates_term td {
	border: 1px solid #C9C9C9;
	padding: 3px;
	font-size: 11px;
 	font-family: Arial;
 	color:#000;
	text-align: center;
}

table.copy {
	table-layout: fixed;
	width: 500px;
	border: 0px;
	margin-left: auto;
	margin-right: auto;
}

table.copy td {
	border: 0px;
	padding: 3px;
	font-size: 11px;
 	font-family: Arial;
 	color:#000;
	text-align: left;
}

/* end of J.A. rate tables.. */


/* HOME LOANS */

div#pageMenu h2#titleHomeLoansMenu {
	background: transparent url(../images/homeLoans/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}

p#mortgageSlogan {
	color:#000;
	font-weight:bold;
}

.exclaim {
	color: #003399;
	font-weight:bold;
}


div#homeLoansBlock{
	width: 340px;
	padding-bottom:14px;
}

div#homeLoansBlock ul {
	list-style-type: square;
}

div#homeLoansBlock li {
	margin-bottom: 12px;
}

h2#titleTeaserResources {
	background: transparent url(../images/teasers/title_ResourceCenter.gif) top left no-repeat ;
	width: 179px;
	height: 25px;
}

div#teaserResourcesContent {
	padding-bottom:11px;
}
div#teaserResourcesContent ul {
	list-style-type:none;
	margin:0;
	padding:.1em;
	position:relative;
}

li.specialBlue {
	background: transparent url(../images/icon_bulletBlue.gif) center left no-repeat;
	padding-left:8px;
	margin-left:8px;
	margin-top:6px;
}


h2#titleTeaserHomeLoanRates {
	background: transparent url(../images/teasers/title_HomeLoanRates.gif) top left no-repeat;
	width: 179px;
	height: 25px;	
}

div#teaserHomeLoanRatesContent {
	padding:11px 20px 30px 6px;
}

/* end of HOME LOANS */


/* checking and savings */

div#pageMenu h2#titleCheckingMenu {
	background: transparent url(../images/checkingSavings/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}

div#checkingBlock p {
	margin-top:12px;
	margin-left:0;
	padding:0;
	display: block;
	
}

h2#titleTeaserSavingsRates {
	background: transparent url(../images/teasers/title_SavingsRates.gif) top left no-repeat;
	width: 179px;
	height: 24px;	
}

div#teaserSavingsRatesContent {
	padding:6px 20px 30px 6px;
}

/* end of checking and savings */



/* HOME BANKING */



div#pageMenu h2#titleHomeBankingMenu {
	background: transparent url(../images/homeBanking/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}

div#homeBankingBlock {
	background: transparent url(../images/border_GreenDot.gif) left bottom repeat-x;
	padding-bottom: 12px;
}
div#homeBankingBlock h3 {
	margin-top:0;
}


img#enrollNow {
	margin-top:12px;
}

div#billPayPlug {
	float:left;
	width:193px;
	padding:0px 10px 20px 5px;
}

div#billPayPlug h3 {
	width:120px;
}

div#billPayPlug p {
	margin-top:12px;
	font:12px Arial;
	color: #000;
}

img#billPayDemo {
	margin-top:12px;
}

div#enrollHow {
	width:160px;
	height:259px;
	float:left;
	background: transparent url(../images/homeBanking/bg_enrollHowTo.gif) center center no-repeat;
	padding-top:12px;
}

div#enrollHow h3 {
	font:bold 12px Arial;
	color: #fff;
	margin: 6px 0 0 14px;
	padding:0;
}

div#enrollHow h4 {
	font: bold 11px Arial;
	color:#339933;
	margin: 12px 0 0px 10px;
}

div#enrollHow span {
	padding:0;
	margin: 0 0px 0px 10px;
	font: 11px Arial;
	display:block;
}

div#enrollHow ol {
	margin-top:2px;
	margin-bottom:3px;
}

div#enrollHow li {
	position:relative;
	left: -10px;
	margin:0 0px 4px 0px;
	font:11px Arial;
}

div#enrollHow strong {
	font:bold 11px Arial;
	color: #339933;
}

/* END OF HOME BANKING */

/* auto center and Auto Net  */


div#pageMenu h2#titleAutoCenterMenu {
	background: transparent url(../images/autoCenter/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
	margin:0;
	padding:0;
}
div#autoNetBlock {
	width:200px;
	float:left;
	margin:0;
	padding:0;	
}


div#autoNetImgs {
	float:left;
	width:170px;
	margin:0;
	padding:0;	
	margin-left:8px;
}


img#autoWoman {
	position:relative;
	left:202px;
	top:32px;
	z-index:2;
	margin:0;
	padding:0;
	height:167px;
	width:157px;
}

div#gatewayAutoBrands > img#autoWoman { /* to let FF not have to adjust image vertical placement as much as ie */
	position:relative;
	top:29px; 
	
}

div#gatewayAutoBrands {
	clear:left;
	width:362px;
	margin:0;
	padding:0;	
	position:relative;
	top:-88px;	
	
}

div#gatewayAutoBrandsTop {
	background: transparent url(../images/autoCenter/bg_dealerGatewayHeader.jpg) top center no-repeat; 
	height: 29px;
	weight: 362px;
	margin:0;
	padding:0;
}

div#gatewayAutoBrandsTop img#dealersTitle {
	position:relative;
	top:4px;
	left:8px;
	z-index:30;
}

div#gatewayAutoBrandsContent {
	width:346px;
	border-left: 3px solid #ccc;
	border-right:3px solid #ccc;
	margin:0;
	padding:5px;
	
	
}

div#gatewayAutoBrandsContent .dealerListLeft {
	width:180px;
	margin:0;
	padding:0;
	float:left;
}

div#gatewayAutoBrandsContent .dealerListRight{
	float:left;
	width:140px;
	margin:0 0 0 6px;
	padding:0;	
}

div#gatewayAutoBrandsContent ul {
	margin:0;
	padding:.1em;
	list-style-type:none;
	width:100%;
}

div#gatewayAutoBrandsBottom {
	background: transparent url(../images/autoCenter/bg_dealerGatewayBottom.gif) top center no-repeat;
	height: 12px;
	weight: 362px;
	margin:0;
	padding:0;
}

h2#titleTeaserAutoLoanRates {
	background: transparent url(../images/teasers/title_AutoRates.gif) top left no-repeat;
	width: 178px;
	height: 24px;	
}

div#teaserAutoLoanRatesContent {
	padding:6px 20px 30px 6px;
}

div#teaserAutoLoanRatesContent h5 {
	color: #003399;
	font: 11px Arial;
	margin:0;
	padding:9px 0 0 0;
}

div#teaserAutoLoanRatesContent span {
	display:block;
}

/* end of Auto Net */

/* 	ABOUT SECTION */
div#pageMenu h2#titleAboutMenu {
	background: transparent url(../images/about/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
	margin:0;
	padding:0;
}

h2#titleSpotlight {
	background: transparent url(../images/about/title_Spotlight.gif) top left no-repeat ;
	width: 179px;
	height: 25px;
}


div#spotlightContent ul {
	list-style-type:none;
	margin:0;
	padding:.1em;
	position:relative;

}

div#aboutBlock {
	color:#000;
	width:370px;
	padding:0 0 20px 0;
	margin:0;
}

div#aboutBlock h4 {
	font:bold 12px Arial;
	display:block;
	padding:0;
	margin:8px 0 8px 0;
}
.aboutWrap {
	margin-right:140px;
}
div#spotlightContent {
	padding-bottom:40px;
}

div#spotlightContent h4.listHead { /* ul heading, ex: Spotlight on About page */
	font: bold 11px Arial;
	color: #003399;
	margin:12px 0 0 8px;
}
/* END OF ABOUT SECTION */

/* ATMs and Branches */
div#pageMenu h2#titleBranchesMenu {
	background: transparent url(../images/branches/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}

div#atmGateway {
	margin:8px;
}

/* end of ATMs and Branches */


/* CONTACT */

div#pageMenu h2#titleContactMenu {
	background: transparent url(../images/contact/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}

/* END OF CONTACT */

/* CAREERS */

div#pageMenu h2#titleCareersMenu {
	background: transparent url(../images/careers/title_Nav_careers.gif) top left no-repeat;
	width:178px;
	height:24px;
}

/* END OF CAREERS */

/* FAQ */

div#pageMenu h2#titleFAQs {
	background: transparent url(../images/ask/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}
/* End FAQ */


/* SiteMap */
div#pageMenu h2#titleSiteMap {
 background: transparent url(../images/sitemap/title_Nav_siteMap.gif) top left no-repeat;
 width:178px;
 height:24px;
}


/*MZ 20070201 Style1.css will be placed here*/

/* 
style1.css
Controls the style and positioning of Site-wide elements, mostly the master Template or Wrapper 
look here for such components as Header, Footer, Top and Left Navigation


*/

html {  /* do not edit; this defines the <html> tag...*/
  padding:0px;
  margin:0px;
}

body {  /* DO NOT EDIT ; defines the <body> */
  background-color: none;
  font-size: 11px;
  font-family: Arial;
  color:#000;  
  text-align:center;
  margin:0px 0 0 0 0;
  padding:5px;
}

/* some Default Elements like p, a, */
a {  /* default Link : color: green, no underline */
color: #339933;
background-color:transparent;
text-decoration: underline; 
padding:0;
}

a:hover { /* default Link HOver -> color Blue */
	color: #0033CC;
}
 
h1 {  
	font: bold 16px Arial;
	color: #003399;
	margin:0;
	padding:0;
}


h2 {
	margin:0;
	padding:0;
}
 
span {
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

p {
	margin: 0;
	padding: 0;
}

img {
	border:none;
	padding:0;
	margin:0;
}


/*  positioning-layers  */

#box {  /* this is the Main Box in which all content, except footer takes place */
width:758px;
height:auto;
margin: 0px auto;
margin-top:0px;
padding:.1em;
padding:0px;
text-align:left;
border: 1px solid #ccc;

background:none;
}

body >#box {  /* Firefox adjustment */
	 margin-top:7px;  
}

#left {   /* this is the Left Column that appears on most pages */
clear:left;
width:194px;
padding:0px 0px 10px 0px;
margin: 0px auto;
float:left;
background-color:#fff;
font:11px Arial;
}

#content, #contentWide , #contentWide2 {  /* content is the Middle column, where most page Content appears. contentWide is when this area spans two columns (so there is no #right )*/
padding:0px;
margin: 0px;
float:left;
background-color:#fff;
overflow: visible;
font:12px Arial;
}

#content { 
width:382px;
}

#contentWide {  /* see, it's Wider :) */
width:560px;
}

#content h3 {  /* all h3 tags within the middle section  */
	font:bold 12px Arial;
	color: #003798;
	margin:12px 0 0 0;
	padding:0;
}

#content p {
	margin-top:12px;
}


#right { /* the Right Column that appears on most pages */
width:182px;
padding:0px;
margin:0px;
float:left;
background-color:transparent;
font:11px Arial;
}

#right h4 { /* a heading for the right column */
	font:bold 11px Arial;
	color: #003798;
	margin:11px 0 0 0;
	padding:0;
}


#head {  /* Top Section of Site holds 3 levels of content, main "corporate" links, quick links on top; middle section is big banner; bottom level holds the main site links */
	width: inherit;
	height:148px;
	border:none;
	padding: 0;
	margin: 0;
}

#head #topStrip { /* top level of Head: */
	padding:0;
	margin:0;
	border:1px solid #e9e9e9;
	height:26px;
	background:transparent url(../images/bg_Grey.jpg) repeat-x; 
}

#head #navCorp { /* holds the "Corporate" links */
	width:388px;
	display: inline;
	float:left;
	padding: 0;
	margin: 0 0 0 8px;
	position:relative;
}

#navCorp .navimgs { /* positioning the Images within navCorp except Divider */
	padding:0px;
	margin:8px 0px 0px 0px;
	border:none;
	float:left;
}

#navCorp .navCorpDivider { /* navCorp divider is vertical line image; positioning to achieve equal spacing */
	float:left;
	margin:3px 5px 0px 5px;
}

#head #navJumpers {  /* holds the 2 inputs allowing for Quick access :: search, and option list */
	background: inherit;
	float:left;
	width:354px;
	margin:0 ;
	padding:3px 0 0 0;
	
}

#head #navJumpers #searchTerm_input {  /* input Field for Search */
	font: 600 11px Arial;
	width:100px;
	margin:0;
	padding:0;
	border-top: 2px solid #999;
	border-left: 2px solid #999;	
	float:left;
}

img#searchButton {  /* Button for Search */
	/*margin:1px 0 0 0px;*/
	padding:0;
	float:left;	
	padding-right: 0px;
	
}

#quickLink
{
	padding-right: 0px;
	border-top: #999 2px solid;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px 0px 0px 6px;
	font: 600 11px Arial;
	border-left: #999 2px solid;
	width: 184px;
	padding-top: 0px;
}

#head div#logo { /* the entire second, or middle Row of Head. the Character/rotating Diversity Images are aligned Right */
	clear:left;
	background: transparent url(../images/bg_Header5.jpg) right top no-repeat; /* default Diversity Photo rotates via Javascript*/
	width: 758px;
	height:77px;
	padding:0;
	margin: 0 0 0 0;
	float:left;
	border-top:1px solid #ccc;
}

#head div#logologo { /* holds the logo and tagline, which have a grey background */
	background: transparent url(../images/bg_Header_bg.jpg) left top repeat-x;
	width:373px;
	height:77px;
	margin:0;
	padding:0;

}

#head div#logo h1 { /* by using background image for Tagline, we have Text, readable by browser, to pick up the keywords, in the html */
	background: transparent url(../images/logo_MCU_tagline.gif) top left no-repeat ;
	height:30px;
	width: 190px;
	position:relative;
	left:26px;
	top:24px;
	float:left;
}

img#logoMCU { /* Logo is an image, which links back to home */
	position:relative;
	left:20px;
	top:11px;
	float:left;
}


#head div#logo h1 span { 
	display:none;  /* the texttagline */
}



/* MAIN "PRODUCT" NAVIGATION ('BLUE BAR') */

div#navProds { 
	background: transparent url(../images/navProds/bg_navProds.gif) repeat-x; /* sliver repeats, includes shadow */
	width:758px;
	height:40px;  
	margin:0 auto;
	padding:0;
	
}

/* set the width of each li, image */
#nav li#about {
	width:63px; 
}
#nav li#join {
	width:54px;
}
#nav li#homeBanking {
	width:80px;	
}
#nav li#checking {
	width:106px;
	
}
#nav li#homeLoans {
	width:64px;
	
}
#nav li#autoCenter {
	width:67px;	
}
#nav li#creditCards{
	width:112px;
}
#nav li#rates{
	width:38px;
}
#nav li#resources{
	width:90px;
}

#nav li#ask {
	width: 84px;
}



#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	  /*width: 10em;  for Opera, but causes probs in IE*/
}

#nav li { /* all list items */
	float: left;
	 width: 10em;   /*width needed or else Opera goes nuts */
	z-index:100;

}

#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	z-index:100;
}

#nav li li a {
	display: block;
	text-decoration:none;
	font-weight: normal;
	background: #e5e5e5;
	color:#000;
	padding: 5px 20px 8px 10px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	text-align: left; 
	height: auto;
	margin: 0;
	width: 7em;
	position: relative;
}
#nav li li a:hover, #nav #last li a:hover {	
	background-color: #003399;
	color: #fff;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

/* Fix for IE 7 'sticking' bug */

 #nav li:hover, #nav li.hover, #nav li li:hover ul{
    position: static;
}
/* end of IE 7 'sticking' bug */


/* END OF MAIN "PRODUCT" NAVIGATION ('BLUE BAR') */


/* Footer is not contained within the #box, it sits below it */
#foot {  /* the entire foot regiion */
	width:760px;
	margin: 0px auto;
	padding: 0 auto;
	text-align:left;

}

#footTop {  /* the top row of the Footer */

	height: 23px;
	padding: 2px;
	background: transparent url(../images/bg_Footer1.jpg) top left repeat-x ;
}

#footTop h6 { /* content on top row is done as h6 */
	margin:0px auto;
	padding:4px;
	float:left;
	
}
#footTop a {
	color: #fff;
	font: 10px Arial;
	text-decoration:none;
}
#footTop #privacy { /* the privacy info is in a h6 with id 'privacy' */
	position:relative;
	left:488px;
}

#footBottom {  /* bottom row of Footer */
	margin:4px auto;
	padding:0 auto;
}
#footBottom h5 { /* content in bottom footer is in form of h5 */
	color: #666;
	font: 10px Arial;
	margin:0 auto;
}

#footBottom h5#ncua {  /* this segment has the NCUA logo, and then text flushed to the right of logo */
	background: transparent url(../images/icon_NCUA.jpg) top left no-repeat;
	width: 350px;
	padding-left:70px;
	float:left;
	margin-top:6px;
}

#footBottom h5#eqalLender { /* the right hand portion of bottom has Equal Lender it is positioned over to the right */
	background: transparent url(../images/icon_EqualLender.jpg) top left no-repeat;
	width: 260px;
	height:70px;
	padding-left:42px;
	padding-top:10px;
	float:left;
	position:relative;
	left:54px;
}


/* Sub Nav : Menus  left hand of each page can go up to 3 levels deep*/
div#pageMenu { /* div holds the menu div */
	width: 177px;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	padding:0 ;
	margin: 0 ;
}

div#navContent ul { /* the first level list */
	list-style-type:none;
	margin:0;
	padding:.1em;
}

div#navContent ul li { /* first level's list items */
	background: transparent url(../images/navLeft/bg_leftnav2.jpg) left center no-repeat ;
	border-top:1px solid #7C7C7C;
	padding: 6px 0px 6px 20px;
}



div#navContent ul li.subMenu { /* rule for if a first level list item Does contain a sub menu, AND that sub menu is showing */
	 background: transparent url(../images/navLeft/bg_leftnav2.jpg) 0px 4px no-repeat ; 
	padding-bottom:0;
	padding-top:6px;
	margin:0;
}


div#navContent ul li.subMenu ul {  /* the displayed second level */
	margin-top:6px;
}

div#navContent li#first {  /* first item in list don't give border top */
	border-top:none;
}
div#navContent ul li a { /* first level Links */
	color:#000;
	font-size:12px;
	text-decoration:none;
	display:block;
	width:100%; /* so that when 2 lines, doesn't change number of words on line One, on hover (bold) */
}
div#navContent  a:hover {
	font-weight:800;
	width:100%;
}
div#navContent .selPage { /* the page that is presently displaying */
	font-weight:bold;
}

/* second level of Left Nav */
div#navContent ul li ul {
	background:white;
	margin:0;
	margin-left:-20px;
	padding:.1em;

}

div#navContent ul li li {
	border:none;
	background:none;
	padding: 2px 0 2px 20px;	
}

div#navContent ul li li a { /* second level links are 11px */
	color:#000;
	font-size:11px;
	text-decoration:none;
	display:block;
}


div#navContent ul li.firstSub { /* the first item in a displayed sub list */
	background:transparent url(../images/navLeft/bg_subFirst.jpg) top left no-repeat;
	border-top:1px solid #ccc;
	margin-left:-1px;
}

div#navContent ul li.lastSub { /* the last item in a displayed sub list */
	background:transparent url(../images/navLeft/bg_subLast.jpg) bottom left no-repeat;
}

/* Third level of Nav  */
div#navContent ul li li li { 
	background:transparent url(../images/icon_bulletGreen.gif) center left no-repeat;
	margin-left:20px;
}

div#navContent ul li li ul {
	position:relative;
	top:-4px;
}
div#navContent ul li li li a {
	margin-left:-8px;
}

/* end of sub sub */


/* end of Sub Nav : Menus */

/* universal Classes */

.goArrow {
	text-align: center;
	margin-right:3px;
	
}

.alignArrow {
	font:12px Arial;
    position:absolute;
    z-index:2;
}

.contentBlock {
	width: 350px;
	margin: 0;
	padding: 0px 0px 12px 5px;
	}

	
.noShow {
	display:none;
}

img.hero {
	margin-bottom:12px;
}
h2.sectionTitle {
	font: bold 28px Arial;
	color: #000099;
	margin:0;
}


/* the Promotional Teasers that appear in Left or Right Columns */
div.teaser {
	width:179px;
	border: 1px solid #ccc;
	border-right: none;
	padding:0 0 0px 0 ;
	margin: 0px 0 10px 0px ;
	position:relative;
	left:3px;
	clear:both;
}

div.teaserLeft {
	width:179px;
	border: 1px solid #ccc;
	border-left: none;
	padding:0 0 0px 0 ;
	margin: 10px 0 0px 0px ;
	clear:both;
}



div.teaserContent {
	margin: 4px 0px 0px 0px;
	padding-bottom:4px;
	font:10px Arial;
	color: #000;
	
}

/* testing  these styles aren't deployed */

div.teaser_ {
	width:179px;
	border: 1px solid #ccc;
	border-right: none;
	padding:0 0 5px 0 ;
	margin: 0px 0 10px 0px ;
	position:relative;
	left:3px;
	float:left;
	clear:both;	
	display:inline;
}


div.teaserLeft_ {
	width:179px;
	border: 1px solid #ccc; 
	border-left: none;
	padding:0 0 5px 0 ;
	margin: 10px 0 0px 0px ;
	float:left;
	clear:both;
}

* html .teaserLeft_ {
	/*height: 125px;*/
}

div.teaserPersons { /* left column of teaser that contains Image, usually of a Person */
	float:left;
	width:87px;
	margin:0;
	padding:0;
}


div.teaserContent_ { /* the right column of teaser that contains the text */
	float:left;
	
	width:90px;
	height:inherit;
	margin:5px 0px 0px 0px;
	
}

div.teaserContentOneCol {  /* when there is no left col person image, like Brass CU */
	height:inherit;
	margin:5px 0px 0px 14px;
}

div.teaserContentOneCol h2 { /* brass cu style */
	color:#003798;
	font:bold 12px Arial;
	padding:0;
	margin:0;
}


div.teaserContent_ h2 {  /* hide the h2 for screen; only show the title image */
	display:none;
}

div.teaserContent_ p, div.teaserContentOneCol p {
	margin:0px 4px 4px 0px;
	padding:0;
	font:10px Arial;
}

/* end of testing */

.button_learnMore {
	padding-top: 4px;
}


/* re. Form Inputs */

.formText {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
}

.formSelect {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	
}

/* Custom styles created by Vlad Orlik & Michael Zaretsky */

/* MZ new styles */
div#bold
{
	font-weight: bold;
}

div.bold
{
	font-weight: bold;
}

/* VO*/
h2.header01 {
 font: bold 16px Arial;
 color: #000099;
 margin:0;
}

/* VO*/
h2.header02 {
 font: bold 20px Arial;
 color: #000099;
 margin:0;
}

/* VO*/
.smtext {
 font: 10px Arial;
}
/* VO*/ /* for all tables*/
table {
		
	font:12px Arial;
}
/* VO*/
.ref {
 font: 12px Arial;
}

/* VO*/
.btn
{
 font-family: Arial;
 border-right: black 1px solid; 
 border-bottom: black 1px solid;
 font-weight: bold;
 color: white;
 background-color: #339933;
}

/*MZ */
#contentWide2 {  /* see, it's Wider :) */
width:700px;
}


/* some Default Elements like p, a, */
a.titlelink:link {  /* default Link : color: green, no underline */
color: #003399;
background-color:transparent;
text-decoration:none;
padding:0;
}

a.titlelink:active {  /* default Link : color: green, no underline */
color: #003399;
background-color:transparent;
text-decoration:none;
padding:0;
}

a.titlelink:visited {  /* default Link : color: green, no underline */
color: #003399;
background-color:transparent;
text-decoration:none;
padding:0;
}

a.titlelink:hover {  /* default Link : color: green, no underline */
color: #003399;
background-color:transparent;
text-decoration:underline;
padding:0;
}



/* End Custom styles created by Vlad Orlik & Michael Zaretsky */


/* 	Join SECTION */
div#pageMenu h2#titleJoinMenu {
	background: transparent url(../images/join/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
	margin:0;
	padding:0;
}

/* Credit Cards */

div#pageMenu h2#titleCreditCardsMenu {
	background: transparent url(../images/creditCards/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}


/* ONLY FOR PROMO*/

/* this was added to what Vanguard calls "pages.css" */

div#pageMenu h2#titleNewsMenu {
	background: transparent url(../images/news/title_Nav.gif) top left no-repeat;
	width:178px;
	height:24px;
}
h2#titleTeaserMemberInfo {
	background: transparent url(../images/teasers/title_MemberInfo.gif) top left no-repeat ;
	width: 179px;
	height: 25px;
}

h2#titleTeaserNews{
	background: transparent url(../images/teasers/title_mcuNews.gif) top left no-repeat ;
	width: 179px;
	height: 24px;
}

h2#titleTeaserPromotions{
	background: transparent url(../images/teasers/title_Promotions.gif) top left no-repeat ;
	
	height: 24px;
}

div#newsPromoMain {
	height:300px;
	background: transparent url(../images/news/bg_Gateway.jpg) top left no-repeat;
	
}

img#newsGatewayText {
	float:left;
	width:178px;
	margin-left:177px;
}


div#newsWelcomeGateway {
	margin:0;
	padding:0;
	width:320px;
	min-height:140px; 
	height:auto;
	
}

div#newsWelcomeGateway ul {
	list-style-type:none;
	margin:0;
	margin-left:28px;
	padding:.1em;
}

div#newsWelcomeGateway ul li {
	background:transparent url(../images/icon_bulletGreen.gif) center left no-repeat;
	padding:5px 0px 5px 0;
}

div#newsWelcomeGateway ul li a {
	margin-left:10px;
	font-weight:bold;
}

div#promoMain{
	border:1px solid #ccc;
	padding:0;
	padding-bottom:10px;
	margin:12px 0 12px 0;
	width:543px;
	min-height:360px;
	height:auto;

}

div.promoLeft {
	float:left;
	width:199px;
	margin:0;
	padding:0;
}

div.promoContent {
	float:left;
	margin:0 0 10px 0;
	padding:0;
}

div.promoDescribe {
	margin-left:10px;
	width:325px;
	margin-top:10px;
}
div.promoDescribe h3 {
	margin:0;
	padding:0;
	font:bold 16px Arial;
	color: #000099;
}
div#promoGetStarted {
	width:200px;
	float:left;
}

div#promoGetStarted img {
	float:left;
}

div#promoAutoRateTable {
	width:160px;
	height:80px;
	border:1px solid #000099;
	margin:10px 0 0 10px;
	padding:0 0 8px 0;
	background:transparent url(../images/promo/autoloan-apr.gif) 120px 40px no-repeat;
	text-align:center;
	float:left;
	display:inline;
}

div#promoAutoRateTable h4 {
	width:160px;
	height:20px;
	background:#003399;
	color:#fff;
	font:bold 14px Arial;
	text-transform:uppercase;
	margin:0;
	padding:0;
}

div#promoAutoRateTable span {
	width:160px;
	text-align:center;
	color:#003399;
	font:bold 11px Arial;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
div#promoAutoRateTable h6 {
	clear:left;
	font:bold 48px Arial;
	position:relative;
	left:-9px;
	margin:0;
	padding:0;
}

div#moreOptions {
	width:155px;
	float:left;
	margin:10px 0 0 10px;
	display:inline;
}
div#moreOptions h2{
	font:bold 12px Arial;
	color:#000099;
	text-transform:uppercase;
}

div#moreOptions ul {
	list-style-type: square;
	position:relative;
	left:-20px;
	top:-15px;
	font:bold 12px Arial;
	color:#000;
}

.promoApply {
	margin-left:100px;
	clear:left;
}
.promoApply a {
	font:12px Arial;
	color:#003399;
	display:block;
	margin-top:8px;
}

/* end of what VGD "pages.css" */


/* additions to what VGD calls "style1.css" */

.teaserLeft ul {
	list-style-type:none;
	margin:0;
	padding:.1em;
	position:relative;
	margin-bottom:10px;
}

.teaserLeft ul li {
	background: transparent url(../images/icon_bulletBlue.gif) center left no-repeat;
	padding-left:8px;
	margin-left:8px;
	margin-top:6px;
}

/* end of VGD "style1.css" additions */
/* END ONLY FOR PROMO*/

div#gatewayAutoBrandsContent {
	width:346px;
	border-left: 3px solid #ccc;
	border-right:3px solid #ccc;
	margin:0;
	padding:5px;
	
	
}

div#gatewayAutoBrandsContent .dealerListLeft1 {
	width:112px;
	margin:0;
	padding:0;
	float:left;
}

div#gatewayAutoBrandsContent .dealerListCenter1{
	float:left;
	width:112px;
	margin:0 0 0 4px;
	padding:0;	
}


div#gatewayAutoBrandsContent .dealerListRight1{
	float:left;
	width:112px;
	margin:0 0 0 4px;
	padding:0;	
}

.DealerDetailTitle
{
	font-weight: bold;
	color: #000099;
}

div.dealerListDetailsLeft {
	width:270px;
	margin:0;
	padding:0;
	float:left;
}

div.dealerListDetailsRight{
	float:left;
	width:270px;
	margin:0 0 0 6px;
	padding:0;	
}

.dealerListHeader 
{
 font: bold 20px Arial;
 color: #000099;
 margin:0;

 
}

#quickLinkCars {  /* the Select / Combo Box for Quick Link "Find info about..." */
	font:600 11px Arial;
	width:180px; 
	margin:0 0 0 4px;
	padding:0;
	border-top: 2px solid #999;
	border-left: 2px solid #999;

}

a.selectednewspromo
{
	color: #0033ff;
	text-decoration: none;
}

li.selectednewspromo
{
	border-right: #339933 1px solid;
	border-top: #339933 1px solid;
	border-left: #339933 1px solid;
	border-bottom: #339933 1px solid;
	list-style-type: none;
}