/* NOTE TO DEVELOPERS: If you need to add styles to this stylesheet, please place in appropriate section.  Also, please ensure that this file is formatted as below for readibilty purposes. Different editors seem to be reformatting the file. Thanks! -smp */

/* HTML */

.verticalDataTable .TableCellText{
	border: 1px solid #000;	
}
table.verticalDataTable{
	border-collapse: separate;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}


/*Styles for Header  */
#accountInfo{
	margin-top: 5px;
	margin-bottom: 10px;
}
.Date{
	float: right;
	margin:5px 10px 0px 0px;
}
.LeftNavMenu  { color:#000000; font-weight:bold;}

.ThreadText { var(--fs10); color:#FFFFFF; }

.vspacer10 {
	margin-top: 10px;
}
#accountDetail{
	width: 540px;	
}
#accountDetailHeader{
	width: 540px;
	clear:right; 
	margin-top: 20px;
}
.contentContainer{
	margin: 0;
	padding: 0;
	width: 400px;
}
.rewardsCenter{
	margin-top: 20px;	
}
.contentMain{
	font-size: var(--body-font-size);
}
.key{
	float: left;
	width: 200px;
	line-height: 20px;
}
.value{
	margin-left: 200px;
	padding-left: 10px;
	line-height: 20px;
	clear: right;
}
.controls
{
	margin-top: 30px;
}
	
/* dataTables */
.dataTable, .dataTableSmall, .dataTableMedium{
	border: 1px solid #000;
}
.dataTable{
	width: 100%;
}
.dataTable td, .dataTableMedium td{
	border: 1px solid #000;
}
.dataTableSmall{
	width: 300px;	
}
.dataTableMedium{
	width: 470px;
}
.dataTableLarge{
	width: 540px;
}
.dataTablePaymentHistory{
	width: 540px;
}

.dataTableCategories{
	/*background-color: #666;*/
	border: 1px solid #000;
}
.dataTableCell{
	border: 1px solid #000;	
}
.evenRow{
	background-color: #fff;
	border: 1px solid #000;
}
.oddRow{
	background-color: #ccc;
	border: 1px solid #000;
}

.evenCol{
	padding-left: 6px;
    padding-right: 6px;
}
.oddCol{
	padding-left: 6px;
    padding-right: 6px;
	background-color: #ccc;
	border: 1px solid #000;
}

/* Transaction Info Pop Up */
#moreTransactionPageContainer{
	/*height: 100%;*/
	padding-top: 20px;
	padding-bottom: 5px;
	/*text-align: center;*/
}

#transactionDescription{
	margin-top: 20px;
	font-size:12px
}
#moreTransactionPageContainer #footer{
	clear: both;
	margin-top: 20px;
	text-align: center;
}
#transactionPageTitle {
	font-size:12px;
	font-weight:bold;
}
#moreTransactionHeader {
	width: 405px;
	text-align: left;
}
#transactionInfo{
	border: 1px solid #000;
	width: 405px;
	text-align: left;
}
#transactionInfo .key{
	clear: both;
	float: left;
	width: 150px;
	padding-left:10px;
	line-height: 20px;
	font-weight: bold;
}
#transactionInfo .value{
	margin-left: 135px;
	padding-left: 12px;
	line-height: 20px;
	clear: right;
	font-size:11px;
}



/*Styles for forms */

.confirmation{
	clear: both;
	margin-top: 20px;
}
.requiredIndicator 
{
  color: #EE0000;
}
.headline
{
    font-size: var(--body-font-size);
    line-height: 200%;
    font-weight: bold;	
	margin-top: 20px;
    margin: 0px;
    background-color: #FFFFFF;
    color: #000000
}
.contentBold, .disclaimerBold{
	font-weight: bold;
}

/*Styles for Rewards */
#rewardsError{
	margin: 10px 0 50px 0px;	
}


/*Styles for Marketing*/
.sectionHeader{
	font-size: var(--fs14);
	font-weight: bold;
}
img.splash{
	margin: 20px 0 15px 0;
}

/*Styles for Content*/
.label{
	font-weight: bold;	
}
.fieldGroup{
	margin-top: 10px;
}
.fieldGroup .fieldItem{
	padding-top: 5px;
}
.fieldSupplement{
	float: left;
	width: 200px;
	line-height: 1.4em;
	padding: 0;
	margin: 0;
}
.fieldLabel{
	font-weight: bold;	
}
.balanceTransfer .fieldItem, .creditLimitIncrease .fieldItem, .statementCopies .fieldItem{
	padding-top: 5px;	
}
.fieldItem{
	clear: right;
	padding-top: 20px; /* have to use padding for some mozilla-weirdness */
}
.fieldRadio{
	clear: left;
	float: left;
	width: 20px;
	margin-right: 3px;
}
.fieldRadioDescription{
	float: left;
	clear: right;
	padding-top: 2px;
	width: 90%;
}
fieldSet .fieldItem{
	padding-top: 5px;
	clear: left;
}
.sectionLabel{
	clear: both;
	margin-top: 20px;
	font-weight: bold;
}
.enroll fieldSet{
	margin-top: 10px;	
}


/* Styles for forms */
.balanceTransfer .fieldItem, .creditLimitIncrease .fieldItem,
.convenienceCheck .fieldItem, .orderAnnualAccountSummary .fieldItem, .statementCopies .fieldItem{
	clear: left;
	padding-top: 5px;	
}
.balanceTransfer .fieldLabel, .orderAnnualAccountSummary .fieldLabel,
.creditLimitIncrease .fieldLabel, .statementCopies .fieldLabel{
	font-weight: normal;	
}
.balanceTransfer .disclaimer{
	margin: 20px 0 20px 0;
}
.balanceTransfer form, .orderAnnualAccountSummary form,
.convenienceCheck form, .creditLimitIncrease form, .statementCopies form{
	border-top: 2px solid #000;
	padding-top: 20px;
}
.borderSpace {
	padding-top: 30px;
}
.borderLine{
	border-top: 2px solid #000;
	width: 417px;
	padding-top: 10px;
}
.orderAnnualAccountSummary .fieldGroup .fieldItem{
	padding:0px;
	margin: 0px;
}
.creditLimitIncrease .key, .balanceTransfer .key, 
.orderAnnualAccountSummary .key, .convenienceCheck .key, .statementCopies .key{
	width: 240px;
	padding-top: 2px;
	line-height: 1.2em;
}
.creditLimitIncrease .value, .balanceTransfer .value, 
.orderAnnualAccountSummary .value, .convenienceCheck .value,  .statementCopies .value{
	margin-left: 240px;
	font-weight: bold;
	padding-top: 2px;
	line-height: 1.2em;
	width: 145px;
}

/* Retrieve Login */
#retrieveLoginID{
	width: 390px;
}
#retrieveLoginID .BoxedText{
	height: 100%;
	display: block;
}
#retrieveLoginID .BoxedText fieldSet{
	border:1px solid #999999;
	padding: 5px 0px 0px 10px; 
    margin-top: 20px;
}
#retrieveLoginID .fieldItem{
	clear: left;	
}

/* Help Context */
.helpContextTitle{
	font-size: var(--body-font-size);	
}
.helpContextBody{
	font-size: var(--body-font-size);	
}

.bg4 {background-color:#000000;}
.bg6 {background-color:#999999;}
.bg7 {background-color:#cccccc;}
.bg8 {background-color:#cccccc; border-color: #cccccc;}

.bg99 { font-size:11px;color: #000000; background-color:#FFFFFF;}


 .f1 {font-size:10px;color: #000000;}
a.f1:hover {font-size:10px;color: #cc0000;}
 .f2 {font-size:11px;color: #000000;}
 .f3 {font-size:12px;color: #000000;}
 .f4 {font-size:11px;color: #000000;font-weight:bold;}
 .f5 {font-size:9px;color: #000000;}
a.f5:hover {font-size:9px;color: #cc0000;}
 .f6 {font-size:12px;color: #000000;font-weight:bold;}
 .f7 {font-size: 8px;color: #cccccc;}
 .f8 {font-size:12px;color: Red;}


.BoxedHeader  { font-size: var(--body-font-size); color:#FFFFFF; font-weight:bold;}

.BoxedText    { font-size: var(--body-font-size); color:#000000;}

.BoxedTextBold    { font-weight:bold; font-size: var(--body-font-size); color:#000000;}
 
.PageText     { 
	
	font-size: var(--body-font-size); 
	color:#000000; 
	font-weight:normal;
}

.PageTextLarge { font-size: var(--fs14); color:#000000; font-weight:normal;}

.boldText	{ FONT-WEIGHT: bold;}

.PageTextBoldItalic { font-size: var(--body-font-size); font-weight:bold; font-style:italic; color:#000000; } 

.PageTextItalic { font-size: var(--body-font-size); font-style:italic; color:#000000; } 

.PageTextUnderline { font-size: var(--body-font-size); color:#000000; font-weight:normal; text-decoration: underline;}   
 
.TableHeader  { font-size: var(--body-font-size); color:#FFFFFF; font-weight:bold;}

.Date  { font-size: var(--body-font-size); color:#000000; font-weight: bold;  }

.TableCellHeader  { font-size: var(--body-font-size); color:#FFFFFF; font-weight: bold; }

.TableCellText  { font-size: var(--body-font-size); color:#000000; }

.TableBorder { border-color: black; border-width: thin; }

table.TableBorderDarkGrey {border: 1px solid #999;}
 
ul.TextListBlack  {list-style:square; color:#000000;}
  
 
.PageTextSmall { 
	/* */
	font-size: var(--fs11); 
	/*color:#000000; */
	font-weight:normal;
}  /* By Arshad */              

/*.TableHeaderSmall     {  font-size: var(--fs11); color:#FFFFFF; font-weight:normal;} */  /* By Arshad */
.TableHeaderSmall {
	 
	font-size: var(--fs11); 
	/*color:#FFFFFF; */
	font-weight:normal;
}

.TableHeaderSmallBold {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ffffff;
}

a.LinkWhite:link,a.LinkWhite:active,a.LinkWhite:visited { color:#FFFFFF; }   /* By Arshad */  

.errortext,
.stdmsg {
	font-size: var(--body-font-size);
}

.errortext {
	color: #EE0000;
}

.stdmsg {
	color: blue;
}

.transMessageText{
	font-size: 13px; color: red;
}

/*Styles for Alerts*/
div#viewAlertsContainer{
	width: 420px;
	margin-top: 20px;
}
div#alertsContainerWide{
	width: 520px;
	margin-top: 20px;
}
div.indentBoxContent{
	width: 385px;
	margin-left: 20px;
}
 
.inactiveText     { color:#999999; }              
.activeText     { color:#FFFFFF; }              

/*Styles for Payment*/
#makePaymentContainer{
	width: 350px;
	margin-top: 20px;
}
#paymentHistoryContainer{
	width: 350px;
	margin-top: 20px;
}
#viewPaymentAccounts{
	width: 475px;
	margin-top: 20px;
}

div.boxHeader
{
    padding-left: 10px;
    padding-right: 10px;
    
    font-size: var(--body-font-size);
    line-height: 200%;
    font-weight: bold;	
    margin: 0px;
    background-color: #800000;
    color: #FFFFFF
}


div.innerBoxHeader
{
    padding-left: 10px;
    padding-right: 10px;
    
    font-size: var(--body-font-size);
    line-height: 150%;
    font-weight: bold;	
    margin: 0px;
    background-color: #800000;
    color: #FFFFFF
}
div.boxContent
{
    padding: 10px 10px 10px 10px;
    font-size: var(--body-font-size);
    
    font-weight: normal;
	margin: 0px;
	background-color: #FFFFFF;
	text-align: left;
	color: #000000      
}
/*
div.confirmboxContent
{
    padding: 10px 10px 10px 10px;
    font-size: var(--body-font-size);
    
    font-weight: normal;
	margin: 0px;
	text-align: left;
	color: #000000      
}
*/
div.contentElement
{
	padding-top: 3px; 
}
div.basicElement
{
  padding-top: 20px;
  clear: both;
}
div.basicSubElement
{
  padding-top: 10px;
  clear: both;
}
div.boxFooter
{
	padding-top: 40px;
}
div.footerDesclaimer
{
	padding-top: 20px;
	
	font-size: var(--body-font-size);
	color:#000000;
	font-weight:normal;
}
div.bordered
{
  border: black 1px solid;
}

div.partnerTagLine
{
  font-weight: bold;
  font-size: var(--fs20);
}

.contentBold
{
	font-weight: bold;
}
.disclaimer {
	font-size: 10px;
	line-height: 135%;
	color: #969696;
}

/* Styles for Enroll online Statements*/
div#viewOnlineStatementsContainer{
	width: 480px;
	margin-top: 20px;
}

/* Styles for FAQs */
a.faqs{color:blue; text-decoration:underline;font-weight:bold;}
a.faqs:link:active{color:blue; text-decoration:underline;}
a.faqs:link:visited{color:blue; text-decoration:underline;}
a.faqs:hover{ color:red; text-decoration:underline;}

/*Styles for Footer*/

.Footer { font-size: var(--fs11); color:#FFFFFF;}
 

/*note: we also use LeftNavRollover found in about.css */


 .f01 {font-size:12px;color: red;font-weight:bold;}
 .black12px, .helpContextTitle {color:#000000; font-size:12px; font-weight:bold;}
 .black12px1, .helpContextBody {color:#000000; font-size:12px; font-weight:normal;}
 .black10px {color:#000000; font-size:10px; font-weight:normal;}
 .cc000012px {color:#cc0000; font-size:12px; font-weight:normal;}
 /*Addition for  error page*/
.Header1  { font-size: var(--fs18); color:#FFFFFF; font-weight:bold;}



/* GLOBAL NAV */

span.globalnav { font-size:11px; color:#ffffff; color:#ffffff; text-decoration:none; }

a.personalglobalnav { color:#ffffff; text-decoration:none; }

a.personalglobalnav:hover { color:#ffcc33; text-decoration:none; }

a.businessglobalnav { color:#ffffff; text-decoration:none; }

a.businessglobalnav:hover { color:#ffcc33; text-decoration:none; }

a.instgovtglobalnav { color:#ffffff; text-decoration:none; }

a.instgovtglobalnav:hover { color:#ffcc33; text-decoration:none; }

a.aboutglobalnav { color:#ffffff; text-decoration:none; }

a.aboutglobalnav:hover { color:#ffcc33; text-decoration:none; }



/* BREADCRUMBS */

.breadcrumbs { font-size: var(--fs10); color:#FFFFFF; }

a.breadcrumbs { text-decoration: none; }



/* SECTION HEADERS */

.psectionheader { font-size: var(--fs20); color:#FFCC33; }

.bsectionheader { font-size: var(--fs20); color:#009966; }

.isectionheader { font-size: var(--fs20); color:#993399; }

.asectionheader { font-size: var(--fs20); color:#0099CC; }


/* PIPER JAFFRAY HEADERS */


.pjpsectionheader { font-size: var(--fs20); color:#CC6600; }

.pjbsectionheader { font-size: var(--fs20); color:#003333; }

.pjisectionheader { font-size: var(--fs20); color:#663366; }

.pjasectionheader { font-size: var(--fs20); color:#006699; }


/* PIPER JAFFRAY CONTENT SUBHEADERS */

.pjacontentsubheader { font-size: var(--fs14); color:#006699;  font-weight:bold; }



/* LEFT NAV */

.relatedlinks { font-size:12px; color:#ffffff; font-weight:bold; }
.leftnavdiv { text-indent:-12px; margin-left:12px; }

	/*  Vertical Flyout Menus */
	#menu {
	width: 180px; /* set width of menu */
	background: #ccc;
	}
	
	#menu ul { /* remove bullets and list indents */
	list-style: none;
	margin: 0;
	padding: 0;
	background: #666;
	}
	
	/* style, color and size links and headings to suit */
	#menu a, #menu h2 {
	font-weight: bold;
	font-size: var(--fs11);
	
	display: block;
	margin: 0px;
	padding: 2px 3px 3px 3px;
	}
	
	#menu h2 {
	color: #fff;
	background: #000;
	text-transform: uppercase;
	}
	
	#menu a {
	color: #000;
	background: #ccc;
	}
	
	#menu a:hover {
	color: #990000;
	}

    .red { 
    color: #FF0000;
	font-weight: bold;
	font-size: var(--fs11);
	margin: 0px; 
	padding: 0px;  
    }
    
	.boxed{
	border-top:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
	}
	.boxed li{
	border-bottom: 1px solid #666;
	}

	/*  Positioning the Pop out */

	#menu li {
	 /* make the list elements a containing block for the nested lists */
	 position: relative;
	 z-index: 11;
	 }
	
	#menu ul ul ul {
	 position: absolute;
	 top: 0;
	 left: 100%; /* to position them to the right of their containing block */
	 width: 168px; /* width is based on the containing block */
	}
	
	/* Hiding and revealing */
	div#menu ul ul ul,
	div#menu ul ul li:hover ul ul
	{display: none;}
	
	div#menu ul ul li:hover ul,
	div#menu ul ul ul li:hover ul
	{display: block;}


/* CONTENT COPY */

.contentsubheader { font-size: var(--fs14); color:#003399;  font-weight:bold; }
a.contentsubheader { text-decoration:underline; }

.contentsubheaderdiv { margin-bottom:3px; }

.contentcopy { font-size:11px; color:#000000; }

a.contentcopy { color:#003399; text-decoration:underline; }

.contentcopybold { font-size:12px; color:#000000; font-weight:bold; }
a.contentcopybold { color:#003399; text-decoration:underline; }

.contentsubcopy	{ font-size:10px; color:#000000; }

a.contentsubcopy { color:#003399; text-decoration:underline; }




/* MARKETS AT A GLANCE */

.marketscopy { font-size:10px; color:#000000; }

.marketsheader { font-size:10px; color:#ffffff; }

.marketssymbol { font-size:11px; color:#000000; font-weight:bold; }
.marketslookup	{ font-size:10px; color:#000000; }

a.marketslookup	{ text-decoration:underline; }

.marketsinput { margin-top:-1px; margin-bottom:0px;}

.cursor_link{
	cursor: pointer;
}

/* ACCOUNT TEXT LINKS */

#accounttextlinks { line-height:140%; }



/* FOOTER */

.footer { font-size:11px; color:#ffffff; }

a.footer { color:#ffffff; text-decoration:none; }
.disclaimer 
{ font-size:10px; color:#666666;  }
.disclaimerBold 
{ font-size:12px; color:#000000;  font-weight: bold;}
a.disclaimer { color:#003399; text-decoration:underline; }


.cursor_help{
	cursor: help;
}

/*==================================================================================================
  FAQ page
==================================================================================================*/
/*
div.faqQuestionGroup
{
  font-size: 13px;
  font-weight: bold;
  padding-top: 20px;
}
*/
div.faqQuestionGroupColorRed
{
  font-size: 13px;
  font-weight: bold;
  padding-top: 20px;
  color: red;
}

/*
div.faqQuestions
{
  font-family: var(--usb-circular, var(--usb-fallback));	
  font-size: var(--fs11);
  font-weight: bold;
  padding-top: 3px;
}

div.faqAnswers
{
  	
  font-size: var(--body-font-size);
  font-weight: normal;
  padding-top: 3px;
}

div.backToTopLink
{
  	
  font-size: var(--fs11);
  font-weight: normal;
  color: blue;
  padding-top: 0px;
  text-align: left;
}
*/
a.faqLinks
{
  color: blue;
}

div.basicElementSmallPadding
{
  padding-top: 10px;
  clear: both;
}

div.basicElementVerySmallPadding
{
  padding-top: 3px;
  clear: both;
}

div.faqAndTncHeader
{
  font-size: var(--fs11);
  font-weight: bold;
}

/*
	pagination page links
*/
a.paginationLinks
{
	font-size:11px;
	font-weight: normal;
}


.sp_reward_summary
{
display:none
}