/**************************************************/
/*                    WebFonts                    */
/**************************************************/

@font-face {
font-family:'Arimo_Regular';
src: url('../fonts/Arimo_Regular.eot');
src: url('../fonts/Arimo_Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Arimo_Regular.woff2') format('woff2'),
url('../fonts/Arimo_Regular.woff') format('woff'),
url('../fonts/Arimo_Regular.svg#Arimo_Regular') format('svg');
}

/**************************************************/
/*                     Layout                     */
/**************************************************/
body {
 background:url("../images/Bg.png") repeat-x #ffffff ;
}

/*Contains all elements within the body*/
.wrapper {
	
	/*-webkit-box-shadow:0px 0px 10px 0px #000000;
	box-shadow:0px 0px 10px 0px #000000;*/
	/*background: #fff;*/
	max-width:1255px;
	padding: 0px !important;
	
}

/*Contain all data area items other than Transactions on Account Page*/
main > .grid {
	padding-top:16px; 
	padding-bottom: 10px;
	margin: 0 auto;

	
	
	
}
main {margin-bottom:0px;padding: 0px 1em;border: 1px solid #dfdfdf; background: #fff;
box-shadow: 0px 0px 10px 0px #dfdfdf;
-webkit-box-shadow: 0px 0px 10px 0px #dfdfdf;	margin-top:124px;
 }
/*Contains the Utility Navigation, Banner, and Primary Navigation*/
header {padding: 0px 1em;
	height:141px;
	margin-bottom:0px;

}
[role="banner"]{
	margin-bottom: 0px;
}
/*Banner*/
header div.grid__unit ~ div.grid__unit:nth-child(2) {
    float:none !important;
	
}

/*Define Logo Here*/
.bank-branding {
	background: url('../images/logo.png') center 50px no-repeat;
	height:184px;
	width:100%; 
}

/*Used around data areas*/
.content--block, #table--transactions, .checkfree-widget-container{
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #CCCCCC;background:#fff;background:#f1f1f1 \9;padding:10px 10px 10px 15px; margin:10px; padding-bottom:20px \9;
}
div[data-bind*="hasFinishedProcessing"], #tranLegend {
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;border:none;background:transparent;  padding:0px 0px 0px 0px; margin:0px; padding-bottom:0px \9;	
}
#transfer .content--block, #download .content--block, div.dropdown  .content--block{
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #CCCCCC;background:#ffffff; background:#f1f1f1 \9;-webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none; padding:26px 10px 10px 15px; margin:10px; padding-bottom:20px \9;
}
#table--transactions tbody tr:nth-child(odd), .table--trans-recent tbody tr:nth-child(odd), #scheduled-transfers .table--underlined tbody tr:nth-child(odd), #stopPaymentList .table--underlined tbody tr:nth-child(odd), .table--underlined tbody tr:nth-child(odd) { background:#f1f8ff; color:#013767;}

#table--transactions tbody tr:nth-child(even), .table--trans-recent tbody tr:nth-child(even), #scheduled-transfers .table--underlined tbody tr:nth-child(even), #stopPaymentList .table--underlined tbody tr:nth-child(even), .table--underlined tbody tr:nth-child(even) { background:#ffffff;color:#013767;}

table.table--underlined.content--block {
        margin: 6px 0px ;
}
thead th, td {
 padding: 0px 2px;
 font-size: 1rem;
 }
div.dropdown  .content--block {
	padding:10px;
}
.checkfree-widget-container {
	margin:0px;
	padding: 10px 0px 5px 0px;
}

/*Advertisement*/
.ad-container iframe{
	display:none;
}
.ad-container {
	/*width:100%;
	height:222px;
	background-image:url('slide_popmoney.jpg');
	background-repeat:no-repeat;
	background-size:contain;*/
}

/**************************************************/
/*                     Font                       */
/**************************************************/
/*Fonts should only be defined as pixels on the html element. Other elements should use REM units.*/
html {
	font-size:14px;
}
body {
	font-family:   'Arimo_Regular', sans-serif;
	font-size:1rem;
}

/*Link colors. To target data section only add main in front of the selector*/
a {
	color:#cc3333; 
	
} 
a:visited {
	color:#0254a4;text-decoration:none;
}
a:hover, a:active {
	color:#559dbf;text-decoration:underline;
}
p {
    color:#013767;
}
a.btn--acctCreate {
	font-size:1rem; background:#f2f2f2; padding:4px;
	color:#013767;
}

/*Negative Account Balance*/
.neg--balance {
	color:#7c7c40;
}

/*Action Buttons*/
.btn--default {
color:#fff;
background-color: #d13f27;
  background-image: -webkit-linear-gradient(top, #d13f27, #861618); 
  background-image:         linear-gradient(to bottom, #d13f27, #861618); 
}
.btn--default:hover {
	background-color:#d13f27;
	color:#FFFFFF;
}
.btn--link {
color:#ee3124; background: #f2f2f2; margin:4px;  border: 1px solid #dbdbdb ;}
.btn--link:hover {
	color:#0154a4;  background: #ffffff;border: 1px solid #dbdbdb ;
}
.btn--primary, a.btn--primary {
	background:#0254a4;
	color:#ffffff;
}
.btn--primary:hover, a.btn--primary:hover {
	background:#559dbf;
	color:#ffffff;
}
.btn--thead, .header--non-sortable, .table--underlined th {
	color:#ffffff;
}

/*Alerts*/
.badge {
	background:#f2f2f2;
	color:#013767;
}

/*MFA*/
.mfa-divider {
	background:#dfdfdf;
}
.mfa-divider:before {
	background:#ffffff;
}

/*Data Tables*/
.text--plain {
	color:#013767;
}
.slat {
	border-color:#dfdfdf;
}
.slat+.slat{ border-top:1px solid #dfdfdf ; }
.table--underlined>thead>tr>th, .table--underlined>tbody>tr>th, .table--underlined>tbody>tr>td {
	border-bottom:1px solid #dfdfdf;
}
.table--underlined>thead tr:last-child th {
	border-bottom-width:2px;
}
.table--underlined>tbody tr:last-child td, .table--underlined .no-border {
	border-bottom-width:0;
}
.table--underlined>tfoot td {
	border-top:1px solid #dfdfdf;
}
thead th {
	background: #013767;
}
.arrow {
	border-color:#dfdfdf;
}
.arrow--top-right:after {
	border-bottom-color:#dfdfdf;
}

/*OPTIONAL FONTS*/
/*Data Area Header Dropdown - Account page*/
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a {
	font-size:.85rem;
	font-weight:normal; color:#333333;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a:hover {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li {
	padding:0px 0px 0px 5px;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover {
	background-color:#F2F2F2;
	color:#697a84;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover a{
	color:#86153a;
}
input, select {

}
h1, h2, h3, .h1, .h2, .h3 {
	
}
h4, h5, h6, .h4, .h5, .h6 {

}
h1, .h1 {
	font-size:1.71rem; color:#013767;font-weight:normal;
}
h2, .h2 {
font-size:1.43rem; color:#0154a4;font-weight:normal;}
h3, .h3 {
	font-size:1.28rem; color:ee3124;font-weight:normal; text-transform:uppercase; letter-spacing: 2px;
}
h4, .h4 {
	font-size:1.14rem;color:#0154a4;
}
h5, .h5 {
	font-size:1rem;
}
h6, .h6 {
	font-size:.86rem;
}

/*Various alerts messages */
.alert--error {
	background:#fbeae9;
	border-color:#f7d6d3;
	color:#ad3123;
}
.alert--info {
	background:#d9edf7;
	border-color:#bce8f1;
	color:#2e6a87;
}
.alert--success {
	background:#dff0d8;
	border-color:#d6e9c6;
	color:#3a703c;
}
.alert--warning {
	background:#fffdd5;
	border-color:#ffe89e;
	color:#8c6b33;
}
.text--error {
	color:#ad3123;
}
.text--info {
	color:#333333;
}
.text--muted {
	color:#999;
}
.text--success {
	color:#3a703c;
}
.text--warning {
	color:#8c6b33;
}

/**************************************************/
/*            Utility Navigation                  */
/**************************************************/
/*Position of Utility Section*/
header div.grid:nth-child(1)  div.grid__unit:nth-child(1) {

}

/*Welcome Message*/
.message--welcome {
padding-top:5px;
}
.message--welcome p {
	font-size:.93rem;color:#86a9cc;
}

/*Utility Navigation Buttons*/
.nav--utility {

}
.nav--utility li {

}
.nav--utility a{
color:#86a9cc; font-family: 'Arimo_Regular',sans-serif ;

}
.nav--utility a:hover {
 color:#013767; 
}

/**************************************************/
/*            Primary Navigation                  */
/**************************************************/
/*Primary Navigation Positioning*/
header div.grid__unit ~ div.grid__unit:nth-child(3) {
    position:absolute;
	top:183px;
	width:100%;
}

/*Navigation Buttons*/
.nav--primary li {

}
.nav--primary li a{
	font-size:1.0rem;
	padding:15px 13px !important;
	color:#ffffff;
	transition:all 0.2s ease;
	border-bottom: 2px solid #013767 ; font-weight:bold;
	
}
.nav--primary li.is--selected a{ 
border-bottom:2px solid #cc3333 ; text-decoration:none;
 }
.nav--primary li a:hover {
border-bottom:2px solid #cc3333 ;text-decoration:none;}
.nav--primary a {
color:#ffffff;

}

/**************************************************/
/*            Account Navigation                  */
/**************************************************/
.nav--account {

}
.nav--account li a {
	background:#013767; color:#fff; letter-spacing:2px;
}
.nav--account li a:hover {
	background:#ee3124;
}
.nav--account li.is--selected a {
	background:#ee3124;
}

/**************************************************/
/*                   Footer                       */
/**************************************************/
.page--footer {
 background:#edf3f9;
  height:200px; box-shadow: 0px 0px 10px 0px #dfdfdf;
-webkit-box-shadow: 0px 0px 10px 0px #dfdfdf;
  
}
footer nav{
background:#edf3f9 ; padding :10px 0;
}
footer p {
color:#0254a4; 
padding: 25px 0 0 0;
}
footer a {
    color:#0254a4 !important;
    /*border-right:1px solid #CDD2D5;*/
	font-family:  'Arimo_Regular',Sans-serif;
	font-size:0.9rem;
	font-weight:normal; text-decoration:none;
	line-height: 12px !important; 
	text-transform:uppercase;
}
footer a:hover {
   text-decoration:underline;
    
}
footer  li:last-child a { border-right:none;}


/**************************************************/
/*                Media Queries                   */
/**************************************************/
@media screen and (min-width: 600px) and (max-width: 800px) {
	html {
		font-size:13px;
	}
	.nav--utility a{
		font-size:.9rem;
	}
	header div.grid__unit ~ div.grid__unit:nth-child(3) {
		width:100%;
	}
	.nav--primary li a{
		padding:14px 12px !important;
	}
	/*Primary Navigation Positioning*/
  header div.grid__unit ~ div.grid__unit:nth-child(3) {
    top:185px;
    }
}

@media screen and (max-width: 599px) {
	[role="banner"] {
		padding :0px;
	}
	.grid__unit{
		/*padding-left:0px;*/
		
	}
	html {
		font-size:12px;
	}
	body {
		/*background:url("light-line.png") no-repeat scroll center center transparent;*/
	}
	header {
		background-color:#f6f6f7; padding :0px 1em;
	}
	#utilitySection, .message--welcome {
		float:none !important;
	}
	.message--welcome  {
		background-color:#0154a4; padding: 10px 6px;
	}
	.message--welcome p {
		color:#fff;
	}
	.message--welcome p:nth-child(1){
		float:left;
		padding-left:10px;
	}
	/*Add "mobile" logo here*/
	.bank-branding {
		background: transparent url('../images/logo.png') center 39px  no-repeat;
		/*height:136px;
		width: 204px;*/
	}

	.wrapper {
		min-width:90%;
		padding:0px;
	}
	main {
		padding:10px;
	}
	.nav--menu {
		margin-top:115px;
		/*margin-right:69px;*/
	}
	.nav--utility {
		float:right !important;
	}
	.nav--utility a{
		font-size:0.9rem;
		padding:0px 6px;
	}
		header div.grid__unit ~ div.grid__unit:nth-child(3) {
		position:inherit;
		top:inherit;
		left:inherit;
		width:100%;
		padding-left:0px;
	}
	.nav--primary li:nth-child(1) {
		border-top: 1px solid #f2f2f2;
	}
	.nav--primary li {
		border-bottom: 1px solid #f2f2f2;
		background:#013767;
		text-align:center;
	}
	.nav--primary li a{
		background:;
		padding:0px !important;
		margin:0px !important; border-bottom: none !important;
		color:#fff;
		border-top:0px ;
	}
	.nav--primary li.is--selected a{
		border:none;background-color:#0154a4;border-bottom: none !important;
		color:#fff;	
		border-top:none ;
	}
	.nav--primary li:hover {
		background-color:#0154a4;
		color:#fff;	border-top:none ;
	}
	
	.nav--primary a {
		line-height: 46px;
		color:#ffffff;
		font-family: 'Arimo_Regular',Sans-serif;
	}
}
@media screen and (max-width: 430px) {
	.nav--utility a{
		font-size:.92rem;
	}
}
@media screen and (max-width: 360px) {
	.bank-branding {background-size:98%;}
}