/*********************************************************************
Legacy theme stylesheet
**********************************************************************/

/* Login Page */
#body_body_pnlMaint, #body_body_pnlBroadcasting, #body_body_pnlBulletin { }
#body_body_language_lnkChangeLang
{
	font-size: 1.5em;
}
#loggedOffLeftMenu
{
	padding: 10px;
	text-align: left;
}
.loggedOffMenuBackground
{
	width: 135px; /* override 15% */
	margin-right: 16px;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
}
.loggedOffMenu
{
	width: 135px; /* override 15% */
	margin-right: 16px; 
}
.majorLink /* larger links, such as "Switch to List View" or "Quick Transfer" in the "Display Account Summary" page */
{
	font-size: 1.25em;
	padding-bottom: .5em;
}

.textboxHint
{
    font-size: .6em;
    margin: .3em;
    padding: 0;
    width: 95%;
}

/* Header */
@media all and (min-width: 768px)
{
	.header.headerMobile
	{
		display: none;
		height: 0;
	}
	.header.headerDesktop
	{
		display: block;
		height: 95px;
	}
}
.siteMenu /* new-style menu normally in the header, with icons for chat/mail/logoff */
{ }
.siteSubMenu /* not displayed in this theme */
{ }
.unreadCount /* not displayed in this theme */
{ }
._helpexitContainer
{
	margin-right:auto;
	margin-left:auto;
	max-width: 1024px;
	padding: .1em 0;
}
._helpexit /* old-style menu normally just under the header, with links for contact us/help/exit */
{
	padding: .1em 0;
	text-align: right;
}
._helpexit > li
{
	display: inline;
}
._helpexit > li > a
{
	margin-left: .4em;
	margin-right: .4em;
}
._helpexit > li:after
{
	content: " |";
	color: black;
}
._helpexit > li:last-child:after
{
	content: none;
}

/* Common Notifications after login */
.systemMessage
{ }
.lastLogin, .emailChange
{
	font-size: .75em;
	line-height: 1.5em;
	padding: 0 .75em 0 .75em;
	text-align: left;
}

/* Page font & color */
.content
{
	padding-top: 1em;
	padding-bottom: 1em;
}

/* Menu style */
.showMobileBar /* on mobile, the hamburger "Show Menu" element */
{
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
}
.showMobileBar a:link, .showMobileBar a:active, .showMobileBar a:visited
{ }
.mobileMenuText
{
	font-size: 1.25em;
	padding: 5px;
	border-width: 3px;
	border-style: solid;
	margin-right: .3em;
}
.mobileMenuIcon:after /* menu text or image or hacked hamburger*/
{
	/*content: "\2261\2261";*/ /*Arial, Helvetica, and Roboto all have different glyphs */
	content: ""; /* http://www.alwaystwisted.com/post.php?s=2012-05-12-create-a-pure-css-menu-button */
	position: absolute;
	top: .1em;
	left: 0;
	width: .85em;
	height: .166em;
	border-top-width: .5em;
	border-top-style: double;
	border-bottom-width: .175em;
	border-bottom-style: solid;
}
.mobileMenuIcon
{
	font-size: 1.875em;
	line-height: .666em;
	vertical-align: top;
	position: relative;
	padding-right: .2em;
	width: .85em;
}
/* Change "Menu" In Branding: STR_MOBILE_MENU_TEXT */
.toggleState0 .mobileMenuText:before
{
	content: "Show ";
}
.toggleState1 .mobileMenuText:before
{
	content: "Hide ";
}

.nav /* nav is the class of the DIV surrounding the menu items, at ALL menu levels */
{
	padding-left: .5em;
	padding-right: .5em;
}
.menu /* menu is the class of the top-level menu UL */
{
	margin: 0;
	padding: 0;
}
.menu > li
{
	list-style: none;
	line-height: 1.5em;
	margin: .1em 0 .1em 0;
	padding: 0;
	font-size: 1.5em;
}
.menu > li > a
{
	line-height: 1em;
	padding-top: .2em;
	padding-bottom: .2em;
	margin: 0;
}
.menu > li > a.menuMobileExpander:before
{
	content: none; /* needed for centering */
}
.menu > li > a.menuMobileExpander:after
{
	content: "+";
}
.menu > li > a.menuMobileExpander.toggleState1:after {
	content: "-";
}

.subMenu /* subMenu is the class of the top-level menu UL */
{
	margin: 0;
	padding: 0;
}

.subMenu > li
{
	list-style: none;
	line-height: 1.5em;
	margin: .2em 0 0 0;
	padding: 0;
}
.subMenu > li > a
{
	line-height: 1em;
	padding-top: .2em;
	padding-bottom: .2em;
	border: .1em solid blue;
	overflow: hidden;
	text-overflow: ellipsis;
}
.subMenu > li > a.menuMobileExpander:before
{
	content: none; /* needed for centering */
}
.subMenu > li > a.menuMobileExpander:after
{
	content: "+";
}
.subMenu > li > a.menuMobileExpander.toggleState1:after
{
	content: "-";
}

.sectionMenu /* sectionMenu is the class of the top-level menu UL */
{
	margin: 0;
	padding: 0;
}

.sectionMenu > li
{
	list-style: none;
	line-height: 1.5em;
	margin: .2em 0 0 0;
	padding: 0;
	font-size: .75em;
}
.sectionMenu > li > a
{
	line-height: 1em;
	padding-top: .2em;
	padding-bottom: .2em;
	overflow: hidden;
	text-overflow: ellipsis;
}


.moduleErrorMessage
{
	border-width: 1px;
	border-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
}
.errorMessage, .moduleErrorMessage
{
	padding: .25em;
	padding-left: 24px; /* make room for the icon, plus some extra space */
	vertical-align: middle;
	position: relative;
}
.errorMessage:before, .moduleErrorMessage:before
{
	position: absolute;
	content: url('/Content/gifs/error.png')'\00a0';
	left: 2px;
	top: 40%; /* graceful fallback */
	top: calc(50% - 5px); /* 5px LOOKS like it centers, because image is bottom-heavy */
	width: 20px;
	height: 19px;
	margin-top: -.25em;
	vertical-align: middle;
}
.contentModule > .confirmationMessage
{
	padding: .25em;
	border-width: 2px;
	border-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
}
.displayMessage
{
	padding: .25em;
	padding-left: 24px;
	vertical-align: middle;
}
.displayMessage:before
{
	position: absolute;
	content: url('/Content/gifs/ok.png')'\00a0';
	left: 2px;
	top: 40%; /* graceful fallback */
	top: calc(50% - 6px); /* 6px LOOKS like it centers */
	width: 20px;
	height: 19px;
	margin-top: -.25em;
	vertical-align: middle;
}
.overviewMessage
{
	font-size: .75em;
	padding: .5em;
	margin: 1em;
	border-width: 1px;
	border-style: solid;
}
.importantMessage
{
	font-size: 1em;
	padding: .5em;
	border-width: 1px;
	border-style: solid;
	word-break: break-word;
}
.importantMessageIcon
{
	height: 1.25em;
	line-height: 1.25em;
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.importantMessageIcon.toggleState0
{
	height: 1.25em;
	opacity: 1;
}
.importantMessageIcon.toggleState1
{
	height: 0;
	opacity: 0;
}


/* Modules */
.moduleHeader
{
	padding: .5em;
	border-width: 1px;
	border-style: solid;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.moduleHeaderLink
{
	text-align: right;
	padding: 0 .5em .5em .5em;
	margin-top: -.5em;
	font-size: .8em;
	line-height: 1.5em;
	border-style: solid;
	border-width: 1px;
	border-top-width: 0px;
}
.moduleMessage, .moduleBody, .moduleFooter
{
	padding: .25em;
	padding-top: .75em;
	border-width: 1px;
	border-style: solid;
	border-top-width: 0;
	word-wrap: break-word;
}
.moduleMessage, .moduleBody
{
	border-bottom-width: 0;
}
.moduleFooter
{
	font-size: .7em;
	text-align: right;
	padding: .5em;
	font-style: italic;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


/* Sections */
.sectionHeader
{
	padding: .5em;
	border-width: 1px;
	border-style: solid;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.sectionHeaderLink
{
	text-align: right;
	padding: 0 .5em .5em .5em;
	margin-top: -.5em;
	font-size: .8em;
	line-height: 1.5em;
	border-style: solid;
	border-width: 1px;
	border-top-width: 0px;
}
.infoIconHeaderLink
{
	display: inline;
	float: right;
	font-size: 1.25em;
}
.sectionMessage,
.sectionBody,
.sectionFooter
{
	padding-top: .75em;
	padding-left: .25em;
	padding-right: .25em;
	border-width: 1px;
	border-style: solid;
	border-top-width: 0;
	word-wrap: break-word;
}
.sectionMessage,
.sectionBody
{
	border-bottom-width: 0;
}
.sectionBody > .sectionHeader,
.sectionMessage > .sectionHeader
{
	padding: 0;
	border-width: 0;
	background-color: transparent;
}
.sectionFooter
{
	border-top-width: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.contentLoading
{
	font-style: italic;
}
.contentLoading img
{
	width: 40px;
	vertical-align: middle;
}


/* Tables */
.refreshingTable
{
	background-image: url('/Content/gifs/loading_snake.gif');
	background-repeat: no-repeat no-repeat;
	background-position: center center;
}

.colJustifyAlertsNoticesFooters
{
	font-size: .9333em;
}

.formTable td.formSectionHeader
{
	padding-top: 1em;
}
.formHint, .formTable td.formHint
{
	font-size: .75em;
	font-style: italic;
	padding-bottom: 1em;
}
.infoMessage, td.infoMessage
{
	padding-top: .75em;
	padding-bottom: .75em;
	font-style: italic;
	line-height: 1.2em;
}


/* Tiles */
.tileHeader
{
	margin-bottom: .25em;
	cursor: pointer;

	margin-left: 0;
	margin-right: 0;
	padding-left: .5em;
	padding-right: .5em;
}
.tileHeader:hover
{
	margin-left: .5em;
	margin-right: .5em;
	padding-left: 0;
	padding-right: 0;
}
.tileMessage { }
.tileHeaderTable td
{
	vertical-align: middle;
	padding: .35em;
}
.tileHeaderExpandCell
{
	width: 1em;
	font-size: 2em;
	text-align: center;
	border-right: 2px white solid;
}
.tileHeaderTitleCell
{
	word-wrap: break-word;
	font-size: 1.5em;
	line-height: 1.1em;
}

.tile
{
	margin-bottom: .25em;
	cursor: pointer;

	margin-left: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.tile:hover
{
	margin-left: 1.5em;
	margin-right: 1.5em;
	padding-left: .5em;
	padding-right: .5em;
}
.tileTable
{
	width: 100%;
}
.tileTable td
{
	padding-top: .3em;
	padding-right: .5em;
	padding-bottom: .3em;
	padding-left: .5em;
	font-size: 1em;
}
span.tileLabel
{
	font-size: 1.25em;
}
/* if you change the font size of a td, it will mess up alignment on hover in Chrome */
/* if you add a span to the td and change the font size, alignment won't break */
span.tileBalanceCell
{
	font-size: 1.1em;
}
span.tileBalanceCell, div.tileHeader td.colJustifyTileValue
{
	white-space: nowrap;
}
.tileDropDown
{
	width: 80%;
	font-size: 1em;
	border-width: .125em;
	border-style: solid;
	border-radius: 0;
}

.refreshingTile
{
	background-image: url('/Content/gifs/loading_snake.gif');
	background-repeat: no-repeat no-repeat;
	background-position: center 3em;
	background-repeat: no-repeat repeat;
}

/* Tile Animation */
/* States:
	 1. PreIntro
	 2. PostIntro
	 3. PreOutro
	 4. PostOutro
	 Tile & Table have a base state and start as "base + PreIntro". Then they animate to "base + PostIntro". After "base + PostOutro", "PostOutro" will be removed and only "base" will remain..
*/
.tileListPreIntro
{
	height: 0;
	overflow: hidden;
	position: static;
	visibility: visible;
}
.tileListPostIntro
{
	height: auto;
	position: static;
	visibility: visible;
	overflow: visible;
}
.tileListPreOutro
{
	height: auto;
	position: static;
	visibility: visible;
}
.tileListPostOutro
{
	height: 0;
	overflow: hidden;
	position: static;
	visibility: visible;
}

.tilePreIntro
{
	margin-left: 2em;
	margin-right: 2em;
	padding-left: 0;
	padding-right: 0;
}
.tilePostIntro
{
	margin-left: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.tilePreOutro
{
	margin-left: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.tilePostOutro
{
	margin-left: 2em;
	margin-right: 2em;
	padding-left: 0;
	padding-right: 0;
}

.printTile
{
	border-collapse: separate;
	padding: .5em 0;
	border-top: 3px solid rgb(237, 237, 237);
	border-bottom: 3px solid rgb(237, 237, 237);
	font-size: .9em;
}
.printTileLabel
{
	font-weight: bold;
}
.printTileValue {}


/* specific element stylings */
	table#wit270_BillPayAlerts .formValueColumn,
	table#wit316_AccountAlerts .formValueColumn,
	table#wit408_GeneralAlerts .formValueColumn,
	table#wit412_TransferAlerts .formValueColumn
	{
		text-align: right;
	}
#wxm376_PaymentCalendar
{
	background-color: rgb(224, 224, 224);
	border: 1px solid rgb(224, 224, 224);
}
#wxm376_PaymentCalendar_NavHeader td
{
	padding: .25em;
	color: rgb(51, 51, 51);
	font-weight: bold;
}
#wxm376_PaymentCalendar_DayHeader td
{
	padding: .25em;
	color: rgb(51, 51, 51);
	text-align: center;
	font-weight: bold;
}
.wxm376_PaymentCalendar_Days td
{
	height: 8em;
	font-size: .8em;
	vertical-align: top;
	border: 1px solid rgb(192, 192, 192);
	border-right-width: 0;
	border-bottom-width: 0;
}
.wxm376_PaymentCalendar_Days td:last-child
{
	border-right-width: 1px;
}
.wxm376_PaymentCalendar_Days:last-child td
{
	border-bottom-width: 1px;
}
.wxm376_PaymentCalendar_DateDefault
{
	background-color: white;
}
.wxm376_PaymentCalendar_DatePaymentAccountName a:link,
.wxm376_PaymentCalendar_DatePaymentAccountName a:active,
.wxm376_PaymentCalendar_DatePaymentAccountName a:visited
{
	text-decoration: none;
	color: black;
}
.wxm376_PaymentCalendar_DatePaymentAccountName a, .wxm376_PaymentCalendar_DatePaymentAccountAmount a
{
	font-weight: bold;
}
.wxm376_PaymentCalendar_DatePayment
{
	font-size: .8em;
}
.wxm376_PaymentCalendar_DatePayment:hover
{
	background-color: rgb(224, 224, 224);
}
.wxm376_PaymentCalendar_DatePaymentInfo.pop-info
{
	width: 340px;
	position: absolute;
	z-index: 1;
	padding: 20px;
	background-color: white;
	border-style: solid;
	border-width: 3px;
	border-color: rgb(224, 224, 224);
	border-radius: 20px;
}
.wxm376_PaymentCalendar_DatePaymentInfo.pop-info>div
{
	padding: .25em;
}
.wxm376_PaymentCalendar_DatePaymentInfo.pop-info>div:nth-child(odd)
{
	background-color: rgb(244, 244, 244);
}
#HistorySearch
{
	font-size: .75em;
}
#wit272_AlertHistoryDetail_Subject
{
	margin-top: 2em;
}
#wit272_AlertHistoryDetail_Message
{
	margin-top: 1em;
}

/* The following pages use tiles for style/layout, but shouldn't indicate that they are interactive tiles */
/* wld035, wld039, wbp169, wld554, wbp556, wld558, RichAccountHistory */
.noninteractiveContentTile .tileHeader, .noninteractiveContentTile .tile
{
	cursor: inherit;
}
.noninteractiveContentTile .tileHeaderTitleCell
{
	font-size: 1em;
	height: 2em;
}
.noninteractiveContentTile .tileHeaderTitleCell .tileDropDown
{
	font-size: 1em;
	min-width: inherit;
	/* if dropdown is too long and wraps to its own line: */
	margin-top: .1em;
	margin-bottom: .1em;
}
.noninteractiveContentTile .tileHeader:hover
{
	margin-left: 0;
	margin-right: 0;
	padding-left: .5em;
	padding-right: .5em;
}
.noninteractiveContentTile .tile:hover
{
	margin-left: 1em;
	margin-right: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
#wld035_BillPaymentTilePaymentLimits,
#wld039_BillPaymentTilePaymentLimits,
#wbp169_BillPaymentTilePaymentLimits,
#wld554_BillPaymentTilePaymentLimits,
#wbp556_BillPaymentTilePaymentLimits,
#wld558_BillPaymentTilePaymentLimits
{
	text-align: right;
}
.wld554_BillPaymentTilePaymentLimits td:first-child,
.wbp556_BillPaymentTilePaymentLimits td:first-child
{
	/* copied from .minWidthShrunkColumn */
	width: 1px;
	white-space: nowrap;
}
#QuickTransferModule .moduleFormTable select.dropdown,
#RichQuickTransferModule .moduleFormTable select.dropdown,
#BankingQuickTransferModule .moduleFormTable select.dropdown,
#ModuleEStatements .moduleFormTable select.dropdown,
.paymentTileTable .paymentFieldValue select.dropdown,
#ComposeMessage_Table select.dropdown
{
	width: 100%;
}
#AccountActionLinksPadding .twoColumn > li
{
	display: none;
}
#AccountActionLinksPadding .twoColumn > li#RAH_ExportTransactions,
#AccountActionLinksPadding .twoColumn > li#RAH_PendingTransactions
{
	display: list-item;
}

#waa390_ManageA2AAccounts th, #waa390_ManageA2AAccounts td
{
	word-break: break-word;
}


/* Adverts */
#BrandingAdvertTable
{
	width: 100%;
	border-width: 0;
	padding: 0;
	margin: 0;
}
#BrandingAdvertTable > tbody > tr > td
{
	text-align: center;
}
iframe.AdvertStyle /* copied from legacy */
{
	width:416px;
	height:238px;
	border:0 none;
}
iframe.MarketAdvertStyle, iframe.XSellAdvertStyle
{
	width: 160px;
	height: 300px;
	display: block;
	margin: 0 auto;
	border: none;
	overflow: hidden;
}
.advertSpecialOffer
{
	text-align: center;
}


/* Footer */
.footer
{
	text-align: center;
	border-top-width: 1em;
	border-top-style: solid;
	padding-top: .5em;
	padding-bottom: 1em;
}
.aboutLinks li
{
	display: inline;
}
.aboutLinks li a
{
	margin-left: .4em;
	margin-right: .4em;
}
.aboutLinks li:after
{
	content: " |";
	color: rgb(114, 194, 100);
}
.aboutLinks li:last-child:after
{
	content: none;
}
#footerOtherLinks
{
	text-align: center;
}
.cuInfo
{
	text-align: center;
	margin-top: 1em;
}
.cuInfo > div
{
	margin-top: .3em;
}
.cuName
{
	font-weight: bold;
}
.disclaimer
{
	display: inline-block;
}
.disclaimer > div
{
	width: 60%;
	display: inline-table;
	vertical-align: top;
}
.disclaimer:after
{
	content: url('/Content/gifs/ncualogo_disclaimer.png') url('/Content/gifs/ehllogo_disclaimer.png');
}
.copyright
{
	font-size: .7em;
	text-align: right;
	padding-top: 1em;
	padding-bottom: 1em;
}
.siteBestViewed
{
	font-size: .7em;
	text-align: left;
	padding-top: 1em;
	padding-bottom: 1em;
}


.sessionTimeoutDialog
{
	border: none !important;
	background-color: transparent;
}
#sm-countdown-dialog
{
	min-height: 0 !important;
	background-color: transparent;
	overflow: visible;
}
#sm-countdown-dialog > .contentSection > .sectionFooter
{
	display: none;
}
.sessionTimeoutDialog > .ui-dialog-content
{
    padding: 0;
}
.sessionTimeoutDialog > .ui-dialog-buttonpane
{
	margin: 0;
	border: 1px solid rgb(189, 202, 216);
	border-top-width: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.timeoutCountMinutes, .timeoutCountSeconds
{
	font-weight: bold;
	color: red;
}

#wld033_SS_Message_Alert > .contentPadding > .contentGroupSpacer,
#wld033_SS_Personal_Security > .contentPadding > .contentGroupSpacer,
#wld033_SS_Statement_MemberReq > .contentPadding > .contentGroupSpacer
{
	height: 1em;
	padding: .25em; /* match .contentSpacer */
}
#wld033_SS_Message_Alert + .contentSpacer,
#wld033_SS_Personal_Security + .contentSpacer
{
	height: 1em;
}

.showOnMobile div.formValueColumn select.dropdown,
.showOnMobile #RAHS_AccountHistorySearch #Mobile_Description,
.showOnMobile #wbp017_PaymentHistorySearchByDetails select.dropdown,
.showOnMobile #wem146_ResearchPaymentRequest select#purpose,
#wit317_AddCheckDraftAlertsGroup select.dropdown,
.showOnMobile #wit532_ACHStopPayment #Mobile_OriginatingCompany,
.showOnMobile #wit503_ACHTransferIn input.longText,
.showOnMobile #wit505_ACHTransferOut input.longText,
.showOnMobile #wit536_CreditCardBalanceTransfer input.longText,
.showOnMobile #wit481_DomesticWire input.longText,
.showOnMobile #wit489_InternationalWire input.longText,
.showOnMobile #wit501_AdditionalMemberAdd input.longText, .showOnMobile #wit501_AdditionalMemberDelete input.longText,
.showOnMobile #wit413_ScheduleReminder input.longText,
.showOnMobile#IAEditQuestions_Mobile select.dropdown, .showOnMobile#IAEditQuestions_Mobile input.longText
{
	width: 100%;
}
.showOnMobile #whb195_StatementReprint div.formValueColumn select#Mobile_month, .showOnMobile #whb195_StatementReprint div.formValueColumn select#Mobile_year,
.showOnMobile #whb196_LoanApplication div.formValueColumn select#SSACCTNO,
.showOnMobile #wit194_CheckReorder div.formValueColumn select.dropdown,
.showOnMobile #whb211_CheckReorderHarland select#Mobile_SelectedAccountId
{
	width: auto;
}

.showOnMobile #wbp020_MerchantAccountDetail .formValueColumn,
.showOnMobile #wbp022_NewMerchant .formValueColumn,
.showOnMobile #wbp023_NewMerchant .formValueColumn,
.showOnMobile #wit313_UserPreferences .formValueColumn,
.showOnMobile #wit549_UserPreferences .formValueColumn,
.showOnMobile #wit550_UserPreferences .formValueColumn,
.showOnMobile #whb425_SearchAccountHistory .formValueColumn,
.showOnMobile #whb060_SearchByTransferDetails .formValueColumn,
.showOnMobile #whb060_SearchByConfirmationNumber .formValueColumn,
.showOnMobile #waa398_ScheduleA2ATransfer .formValueColumn,
.showOnMobile #wit094_AccountDetails .formValueColumn,
.showOnMobile #RAHS_AccountHistorySearch .formValueColumn,
.showOnMobile #whb057_TransferDetail .formValueColumn,
.showOnMobile #wbp012_PaymentDetail .formValueColumn,
.showOnMobile #wbp017_PaymentHistorySearchByDetails .formValueColumn,
.showOnMobile #ChangePassword_Mobile .formValueColumn,
.showOnMobile #wem146_ResearchPaymentRequest .formValueColumn,
.showOnMobile #wit293_AccountDetails .formValueColumn,
.showOnMobile #waa392_AddA2AAccount_AccountDetails .formValueColumn,
.showOnMobile #wit532_ACHStopPayment .formValueColumn,
.showOnMobile #wit503_ACHTransferIn .formValueColumn,
.showOnMobile #wit505_ACHTransferOut .formValueColumn,
.showOnMobile #wit534_CertificateDepositApp .formValueColumn,
.showOnMobile #wit190_CheckStopPay .formValueColumn,
.showOnMobile #wit536_CreditCardBalanceTransfer .formValueColumn,
.showOnMobile #wit481_DomesticWire .formValueColumn,
.showOnMobile #wit489_InternationalWire .formValueColumn,
.showOnMobile #whb195_StatementReprint .formValueColumn,
.showOnMobile #whb196_LoanApplication .formValueColumn,
.showOnMobile #wit194_CheckReorder .formValueColumn,
.showOnMobile #whb211_CheckReorderHarland .formValueColumn,
.showOnMobile #wit193_CheckCopy .formValueColumn,
.showOnMobile #wit537_CrossMemberAccess .formValueColumn,
.showOnMobile #wit413_ScheduleReminder .formValueColumn
{
	text-align: right;
}
.showOnMobile #wbp020_MerchantAccountDetail .formLabelColumn input[type="checkbox"],
.showOnMobile #wbp022_NewMerchant .formLabelColumn input[type="checkbox"],
.showOnMobile #wbp023_NewMerchant .formLabelColumn input[type="checkbox"],
.showOnMobile #wit313_Preferences .formLabelColumn input[type="checkbox"],
.showOnMobile #wit549_UserPreferences .formLabelColumn input[type="checkbox"],
.showOnMobile #wit550_UserPreferences .formLabelColumn input[type="checkbox"],
.showOnMobile #whb425_SearchAccountHistory .formLabelColumn input[type="checkbox"],
.showOnMobile #wit094_AccountDetails .formLabelColumn input[type="checkbox"],
.showOnMobile #wit293_AccountDetails .formLabelColumn input[type="checkbox"]
{
	float: right;
}
.showOnMobile #wem146_ResearchPaymentRequest textarea.largeArea,
.showOnMobile #wit532_ACHStopPayment  #Mobile_OriginatingCompany,
.showOnMobile #wit503_ACHTransferIn input.longText, .showOnMobile #wit503_ACHTransferIn textarea.largeArea,
.showOnMobile #wit505_ACHTransferOut input.longText, .showOnMobile #wit505_ACHTransferOut textarea.largeArea,
.showOnMobile #wit536_CreditCardBalanceTransfer input.longText, .showOnMobile #wit536_CreditCardBalanceTransfer textarea.largeArea,
.showOnMobile #wit481_DomesticWire input.longText, .showOnMobile #wit481_DomesticWire textarea.largeArea,
.showOnMobile #wit489_InternationalWire input.longText, .showOnMobile #wit489_InternationalWire textarea.largeArea,
.showOnMobile #wit501_AdditionalMemberAdd input.longText, .showOnMobile #wit501_AdditionalMemberDelete input.longText,
.showOnMobile #wit537_CrossMemberAccess textarea.largeArea,
.showOnMobile #wit413_ScheduleReminder input.longText, .showOnMobile #wit413_ScheduleReminder textarea.largeArea,
.showOnMobile#IAEditQuestions_Mobile input.longText
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#waa391_AddAccount .formValueColumn.showOnMobile img
{
	padding-top: 1em;
}
.showOnMobile div#wit536_CreditCardBalanceTransfer_PromoCode
{
	padding-top: 0;
}
@media only screen and (max-width: 380px)
{
	#waa391_AddAccount .formValueColumn.showOnMobile img
	{
		width: 100%;
	}
}
/* Preferences */
fieldset.preferences#wit313_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn,
fieldset.preferences#wit549_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn
{
	width: auto;
	white-space: normal;
}
fieldset.preferences#wit313_UserPreferences_OverviewModules ul,
fieldset.preferences#wit549_UserPreferences_OverviewModules ul,
fieldset.preferences#wit550_UserPreferences_OverviewModules ul
{
	margin: 0;
	padding: 0;
}
fieldset.preferences#wit313_UserPreferences_OverviewModules li,
fieldset.preferences#wit549_UserPreferences_OverviewModules li,
fieldset.preferences#wit550_UserPreferences_OverviewModules li
{
	list-style: none;
	float: left;
	width: 100%;
	display: inline-block;
	margin: .25em 0;
}

.showOnMobile #wit313_Preferences_OverviewAccountPages td
{
	padding-top: 1em;
}
#wit313_Preferences_OverviewAccountPages #overviewAccountsMessage,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsMessage,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsMessage,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsMessage
{
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
#wit313_Preferences_OverviewAccountPages #overviewAccountsList,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList
{
	width: 100%;
	display: inline-block;
	margin-right: 2em;
	padding: 0;
	vertical-align: top;
}
#wit313_Preferences_OverviewAccountPages #overviewAccountsList li,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li
{
	margin: .25em 0;
	list-style: none;
}
#wit313_Preferences_OverviewAccountPages #overviewAccountsList li select.dropdown,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown
{
	font-size: 1em;
	width: 100%;
}


/* Personal Information */
.showOnMobile #wit091_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit315_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit479_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit552_UpdatePersonalInformation .formValueColumn
{
	text-align: right;
}
.showOnMobile #wit091_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit315_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit479_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit552_UpdatePersonalInformation input[type="email"]
{
	width: 80%;
}

/* Responsive design sizes */
@media all and (min-width: 0px)
{
	body
	{
	}
}
@media all and (min-width: 300px)
{
	body
	{
	}
}
@media all and (min-width: 768px)
{
	body
	{
	}
}

/* VB Minimum Desktop Width is 1024px */
@media only screen and (min-width: 1024px)
{
	#HLMFmasterMainContent .sectionHeader { text-align: left; }
	._helpexit
	{
		font-size: .75em;
	}
	.nav
	{
        position: relative; /* so that .subMenu can position relative to .menu, ditto .sectionMenu to .subMenu */
		padding-left: 0;
		padding-right: 0;
        overflow: visible; /* desktop .subMenu needs to be drawn at top:100% of .menu, and so on */
	}
	.nav.toggleState0, .nav.toggleState1
	{
		height: auto;
	}
	.menu
	{
		padding-left: .5em;
		border-width: 0 0 1px 0;
		border-style: solid;
	}
	.menu > li
	{
        width: auto;
		font-size: 1em;
        vertical-align: middle;
		line-height: normal;
		margin-right: .3em;
        margin-bottom: -1px;
	}
    .menu > li.invisibleParent
    {
        margin: 0;
    }
	.menu > li > a,
	.subMenu > li > a,
	.sectionMenu > li > a
	{
		display: inline-block;
		padding: .625em;
		float: none;
		vertical-align: baseline;
	}
	.menu > li > a:before,
	.subMenu > li > a:before,
	.sectionMenu > li > a:before
	{
		content: none;
	}
	.menu > li > a, .menu > li > a.menuMobileExpandable,
	.subMenu > li > a, .subMenu > li > a.menuMobileExpandable,
	.sectionMenu > li > a, .sectionMenu > li > a.menuMobileExpandable
	{
		width: auto;
	}
	.menu > li > a.menuMobileExpander,
	.subMenu > li > a.menuMobileExpander,
	.sectionMenu > li > a.menuMobileExpander
	{
		display: none;
	}

	.menu > li > a
	{
		margin-bottom: -1px;
		min-width: 150px;
		padding: .5em .1em .5em .1em;
		text-align: center;
		line-height: normal;
		border-width: 1px;
		border-style: solid;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.menu > li > .nav
	{
		width: 100%;
        width: calc(100% - .5em);
		position: absolute;
		z-index: 2;
        top: 100%;
        left: 0;
		padding-left: .5em;
		padding-right: 0;
	}
	.menu .nav
	{
		line-height: normal;
	}

	/* only show subMenu if parent menu is selected */
	.menu > li.selected > .nav
	{
		display: block;
	}
	.menu > li.selected > .nav > .subMenu
	{
		display: inline;
		width: 100%;
		font-size: .8em; /* undo .menu li font-size: 1.25em */
		text-align: left;
	}
	.menu > li.selected > .nav > .subMenu > li
	{
		display: inline;
	}
	.subMenu > li
	{
		width: auto;
	    margin: .2em .3em 0 0;
	}
	.subMenu > li > a
	{
        height: 1em;
		border: none;
		padding: 0;
		vertical-align: middle;
        overflow: visible;
	}
	.subMenu > li > a.menuMobileExpandable
	{
		float: none;
		margin-right: 0;
	}
	.subMenu li:after
	{
		content: " |";
	}
	.subMenu li:last-child:after
	{
		content: none;
	}
	.subMenu > li > a:after {
		content: none;
	}
	.subMenu > li > .nav /* .nav has .5em padding-left, but our font size is .8 of .nav so we need ~1.25em to balance */
	{
		width: 100%;
		width: calc(100% - .5em);
		position: absolute;
		z-index: 2;
		top: 100%;
		right: 0;
		padding-right: .5em;
		padding-left: 0;
    }
    .sectionMenu
    {
		text-align: right;
	}

	/* only show sectionMenu if parent subMenu is selected */
	.menu > li.selected > .nav > .subMenu > li.selected > .nav
	{
		display: block;
	}
	.menu > li.selected > .nav > .subMenu > li.selected > .nav > .sectionMenu
	{
		display: block;
	}
	.sectionMenu > li
	{
		width: auto;
		display: inline;
		font-size: 1em; /* override the above shrink, for both links and vertical bars */
		margin: .2em .3em 0 0;
	}
	.sectionMenu > li > a
	{
        height: 1em;
		border: none;
		padding: 0;
		vertical-align: middle;
        overflow: visible;
	}
	.sectionMenu li:after
	{
		content: " |";
	}
	.sectionMenu li:last-child:after
	{
		content: none;
	}

	.content.paddingMenuLogin
	{
		padding-top: 0;
		padding-bottom: 0;
		background-color: transparent;
	}
	.content.paddingMenuLevel0, /* Level0 if the current page doesn't show up in any menu */
	.content.paddingMenuLevel1
	{
		padding-top: 1em;
	}
	#EmptyMasterContent > .content.paddingMenuLevel0, /* on login pages, don't add padding */
	#EmptyMasterContent > .content.paddingMenuLevel1
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	.content, .content.paddingMenuLevel3
	{
		padding-top: 2em;
	}
	.content.paddingMenuLevel2
	{
		padding-top: 3em;
	}

	.content.contentNoPadding
	{
		padding-top: 0;
		padding-bottom: 0;
	}

	.tileHeader
	{
		margin-left: 0;
		margin-right: .5em;
		padding-left: 0;
		padding-right: 0;
	}
	.tileHeader:hover
	{
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: .5em;
	}
	.tileHeaderTable
	{
		width: 100%;
	}
	.tile
	{
		display: block;
		margin-left: 2em;
		margin-right: 1em;
		padding-left: 0;
		padding-right: 0;
	}
	.tile:hover
	{
		margin-left: 2em;
		margin-right: 0;
		padding-left: 0;
		padding-right: 1em;
	}
	.tileTable
	{
		width: 100%;
	}
	/* States:
		 1. PreIntro
		 2. PostIntro
		 3. PreOutro
		 4. PostOutro
		 Tile & Table have a base state and start as "base + PreIntro". Then they animate to "base + PostIntro". After "base + PostOutro", "PostOutro" will be removed and only "base" will remain..
	*/
	.tileListPreIntro
	{
		height: 0;
		/*padding-left: 20px;*/
		overflow: hidden;
		position: static;
		visibility: visible;
	}
	.tileListPostIntro
	{
		height: auto;
		/*padding-left: 30px;*/
		position: static;
		visibility: visible;
		overflow: visible;
	}
	.tileListPreOutro
	{
		height: auto;
		/*padding-left: 30px;*/
		position: static;
		visibility: visible;
	}
	.tileListPostOutro
	{
		height: 0;
		/*padding-left: 20px;*/
		overflow: hidden;
		position: static;
		visibility: visible;
	}

	.tilePreIntro
	{
		margin-left: 1em;
		margin-right: 1em;
		padding-left: 1em;
		padding-right: 0;
	}
	.tilePostIntro
	{
		margin-left: 2em;
		margin-right: 1em;
		padding-left: 0;
		padding-right: 0;
	}
	.tilePreOutro
	{
		margin-left: 2em;
		margin-right: 1em;
		padding-left: 0;
		padding-right: 0;
	}
	.tilePostOutro
	{
		margin-left: 1em;
		margin-right: 1em;
		padding-left: 1em;
		padding-right: 0;
	}

	/* specific element stylings */
	.noninteractiveContentTile .tileHeader
	{
		margin-right: 0;
	}
	.noninteractiveContentTile .tileHeader:hover
	{
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.noninteractiveContentTile .tile:hover
	{
		margin-left: 2em;
		margin-right: 1em;
		padding-left: 0;
		padding-right: 0;
	}
	#AccountHistoryTile.tile, #AccountHistoryTile.tile:hover
	{
		margin-left: 1em;
		margin-right: 1em;
		padding-left: 0;
		padding-right: 0;
	}
	#ChangePasswordGroup.contentGroup100,
	#ChangeUserIdGroup.contentGroup100
	{
		width: 50%;
		margin-left: 25%;
		margin-right: 25%;
	}
	#wh_hbbp001_HelpGroup.contentGroup100, #wh_se005_AboutSecurityGroup.contentGroup100, #wh_se007_AboutSecurityGroup.contentGroup100,
	#wh_se008_GettingStartedGroup.contentGroup100, #wh_se009_GettingStartedGroup.contentGroup100, #wh_se010_GettingStartedGroup.contentGroup100,
	#wh_se011_GettingStartedGroup.contentGroup100, #wh_se012_GettingStartedGroup.contentGroup100, #wh_se013_ContactUsGroup,
	#whb195_StatementReprintGroup.contentGroup100,
	#whb262_EStatementSelectAccountGroup.contentGroup100
	{
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
	}
	#wh_se006_FAQGroup.contentGroup100
	{
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
	}
	#wit313_Preferences td
	{
		padding-top: .2em;
		padding-bottom: .2em;
	}
	#wit313_Preferences_OverviewAccountPages .formLabelColumn
	{
		vertical-align: text-top;
	}
	#wit313_Preferences_OverviewAccountPages .formValueColumn ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#wit313_Preferences_OverviewAccountPages .formValueColumn li
	{
		margin-top: .25em;
	}
	#AccountActionLinksPadding .twoColumn > li
	{
		display: list-item;
	}

	/* Make right-hand 50% column line up vertically with left, since left-hand has a title at the top */
	#wld554_BillPayPaymentsHistoryGroup
	{
		margin-top: 1.875em; /* 1.25 line height + .5 padding (1.25 + .5*1.25 = 1.875) */
	}

	/* Preferences */
	fieldset.preferences#wit313_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn,
	fieldset.preferences#wit549_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn
	{
		width: 1px;
		white-space: nowrap;
	}
	fieldset.preferences#wit313_UserPreferences_OverviewModules li,
	fieldset.preferences#wit549_UserPreferences_OverviewModules li,
	fieldset.preferences#wit550_UserPreferences_OverviewModules li
	{
		list-style: none;
		width: 40%;
	}
	#wit313_Preferences_OverviewAccountPages #overviewAccountsMessage,
	fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsMessage,
	fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsMessage,
	fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsMessage
	{
		width: 30%;
	}
	#wit313_Preferences_OverviewAccountPages #overviewAccountsList,
	fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList,
	fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList,
	fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList
	{
		width: 30%;
		margin-top: 0;
	}
	.paymentTileTable .paymentFieldValue select.dropdown,
	#wit313_Preferences_OverviewAccountPages #overviewAccountsList li select.dropdown,
	fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
	fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
	fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
	#QuickTransferModule .moduleFormTable select.dropdown,
	#ModuleEStatements .moduleFormTable select.dropdown,
	#ComposeMessage_Table select.dropdown,
	#wit317_AddCheckDraftAlertsGroup select.dropdown
	{
		width: auto;
	}
	.dropdown250 {
		width: 250px !important;
	}
	.loggedOffMenu > a
	{
		padding-left: 1em;
	}
	.loggedOffMenu > a > img
	{
		border: 0;
		width: 117px;
		height: 35px;
	}
}

@media only print
{
	.showMobileBar, .systemMessage, ._helpexit, .nav, .siteMenuContainer, .aboutLinks
	{
		display: none;
	}

	hr /* hr elements aren't printed because they are considered background, so reduce it to 0 and draw a border, since borders are printed */
	{
		height: 0;
		border: 2px solid rgb(237, 237, 237);
	}

	/* http://stackoverflow.com/a/34379688 */
	.altcolor tr:nth-child(even), .altcolor tr:nth-child(even) td
	{
		background-color: unset;
		box-shadow: inset 0 0 0 2000px white;
	}
	.altcolor tr:nth-child(odd), .altcolor tr:nth-child(odd) td
	{
		background-color: unset;
		box-shadow: inset 0 0 0 2000px rgb(233, 233, 233);
	}

	/* hide specific elements */
	#AccountActionLinksPadding
	{
		display: none;
	}


}
.material-icons {
	display: none;
}