/*
 * main.css
 *
 * What follows is the styling for specific pages and their elements
 * ==|== specificity ==========================================================
 */

.field-label {
  font-weight: bold;
  margin-bottom: 0;
}

/* Default Styles - Applied across all breakpoints unless specified otherwise */
.container { margin: 0 auto; }

/* masthead */
header[role="banner"] {
  background-color: #1c4094; /* for IE9 */
  background-image: linear-gradient(to bottom, #1c4094, #3257ad);
  border-bottom: #539732 solid 4px;
  color: #fff;
  height: 71px;
  display: inline-block;
  min-width:100%;
}

  .lt-ie9 header[role="banner"] {
    background-color: #1c4094;
  }

header[role="banner"] section {
  padding: 18px 0;
  position: relative;
}

header[role="banner"] h1 {
  height: 75px;
  left: 0;
  margin: 0;
  position: absolute;
  top: 14px;
  width: 85px;
}

header[role="banner"] p {
  margin: 5px 0 0 95px;
}
header[role="banner"] p + p {
  font-size: 12px;
  margin-top: 0;
}
header[role="banner"] p + p i {
  vertical-align: text-bottom;
}

header[role="banner"] a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
header[role="banner"] p a:hover { text-decoration: underline; }

header[role="banner"] nav li {
  float: left;
}

header[role="banner"] nav li a {
  border-right: #5B75B2 solid 1px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  padding: 5px;
}
header[role="banner"] nav li:first-child a {
  border-left: #5B75B2 solid 1px;
}

header[role="banner"] nav .active a {
  background-color: #5d9732 !important;
}
header[role="banner"] nav .active a {
  border-color: #5d9732 !important;
}

header[role="banner"] h2.ccp-logo {
  background: url("img/login-header.png") no-repeat;
  margin: 0;
  position: relative;
  top: 20px;
  left: 100px;
}

/* login page */
.row.login { margin-top: 10%; }

.login-panel {
  border: rgb(204, 204, 204) solid 1px;
  border-radius: 5px;
  padding-bottom: 55px;
  position: relative;
}

.login header {
  background-color: #1c4094;  /*for IE 9*/
  background-image: linear-gradient(to bottom, #1c4094, #3257ad);
  border-bottom: #539732 solid 4px;
  border-radius: 5px 5px 0 0;
  color: #fff;
  height: 71px;
}

.lt-ie9 .login header { background-color: #1c4094; }

.login header h1 {
  height: 75px;
  left: 40px;
  margin: 0;
  position: absolute;
  top: 14px;
  width: 85px;
}

.login header h2.ccp-logo {
  background: url("img/login-header.png") no-repeat;
  margin: 0;
  position: relative;
  top: 35px;
  left: 140px;
}

.login footer {
  border-top: 4px solid #1C4094;
}


/* main content */
div[role="main"] {
  margin-top: 50px;
  position: relative;
}

.session-data {
  font-size: 12px;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}
.session-data dt,
.session-data dd {
  display: inline;
}
.session-data dd:after {
  content: '\A';
  white-space: pre;
}

article h1 {
  font-size: 18px;
}

.account {
  padding: 20px 0 10px;
}

.account header h1 {
  margin: 0;
}

.account header h2 {
  color: #333;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}
.account header h2 a {
  border-right: #ccc solid 1px;
  margin-right: 7px;
  padding-right: 10px;
}

.account header h2 span {
  font-weight: bold;
}

.account header h2 + h3 {
  margin-top: 14px;
}
.account header h3 {
  font-size: 12px;
  font-weight: normal;
  margin: 0;
}

.account-details .field-group {
  box-sizing: border-box;
  margin: 0;
  padding: 3px 14px;
  font-size: 13px;
}
.account-details .field-label {
  text-align: left;
}
.account-details .fields {
  margin-left: 160px;
  text-align: right;
}

#more-details {
  border-top: rgb(204, 204, 204) solid 1px;
  margin-top: 30px;
}

#more-details + .rule {
  margin-left: -8px;
}

a[href="#more-details"] {
  background-color: rgb(249, 249, 249);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 5px;
  color: rgb(28, 64, 148) !important;
  display: block;
  margin: 0 1% -16px;
  padding: 5px 8px;
  text-decoration: none;
  width: 75px;
}


/* footer */
footer[role="contentinfo"] {
  margin-top: 40px;
}

footer[role="contentinfo"] .container {
  border-top: #1c4094 solid 3px;
  padding: 10px 0;
}

footer[role="contentinfo"] nav li {
  padding-right: 10px;
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* ==|== Backgrounds ========================================================== */
.bg-clip {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}
.gradient-secondary-light {
  background-color: rgb(245, 245, 245);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(245, 245, 245)), to(rgb(221, 221, 221)));
  background-image: -webkit-linear-gradient(top, rgb(245, 245, 245), rgb(221, 221, 221));
  background-image: -moz-linear-gradient(top, rgb(245, 245, 245), rgb(221, 221, 221));
  background-image: -ms-linear-gradient(top, rgb(245, 245, 245), rgb(221, 221, 221));
  background-image: -o-linear-gradient(top, rgb(245, 245, 245), rgb(221, 221, 221));
  background-image: linear-gradient(to bottom, rgb(245, 245, 245), rgb(221, 221, 221));
}

.no-shade { background-color: transparent !important; }
.shade { background-color: rgb(237, 237, 237); }


/* ==|== Sprites ========================================================== */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}
.ir br { display: none; }

.sprite,
.sprite-icon {
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
}
.sprite-icon {
  display: inline-block; /* see inline-block helper for ie7 fix */
  vertical-align: middle;
}

.logo-large {
  background-position: 0 -193px;
  height: 45px;
  width: 160px;
}


/* ==|== Box Model ========================================================== */
.border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:  border-box; }
.lt-ie8 .border-box, /* border-box polyfill https://github.com/Schepp/box-sizing-polyfill */
.lt-ie8 input[type="checkbox"],
  /*.lt-ie8 input[type="radio"] { behavior: url(/gxl/css/boxsizing.htc); }*/

.box-collapse {
  border:  none !important;
  margin:  0 !important;
  padding:  0 !important;
}
.box-b-collapse {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.box-l-collapse {
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.box-r-collapse {
  border-right: none !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.box-t-collapse {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ==|== Borders ========================================================== */
.border-none { border:  none !important; }
.border-b-none { border-bottom: none !important; }
.border-l-none { border-left: none !important; }
.border-r-none { border-right: none !important; }
.border-t-none { border-top: none !important; }

.rule { border-bottom: rgb(204, 204, 204) solid 1px; }
.rule-dashed { border-bottom: rgb(204, 204, 204) dashed 1px; }
.rule-dotted { border-bottom: rgb(204, 204, 204) dotted 1px; }

hr.rule,
hr.rule-dashed,
hr.rule-dotted { border-top: none; }

.rule-primary {
  border-color: rgb(28, 64, 148);
  border-width: 2px;
}
.rule-secondary {
  border-color: rgb(93, 151, 50);
  border-width: 2px;
}


/* ==|== Margins ========================================================== */
.mar-none { margin: 0; }
.mar-divide { margin: .5em; }
.mar-default { margin: 1em; }
.mar-double { margin: 2em; }

.mar-b-none { margin-bottom: 0; }
.mar-l-none { margin-left: 0; }
.mar-r-none { margin-right: 0; }
.mar-t-none { margin-top: 0; }

.mar-b-divide { margin-bottom: .5em; }
.mar-l-divide { margin-left: .5em; }
.mar-r-divide { margin-right: .5em; }
.mar-t-divide { margin-top: .5em; }

.mar-b-default { margin-bottom: 1em; }
.mar-l-default { margin-left: 1em; }
.mar-r-default { margin-right: 1em; }
.mar-t-default { margin-top: 1em; }

.mar-b-double { margin-bottom: 2em; }
.mar-l-double { margin-left: 2em; }
.mar-r-double { margin-right: 2em; }
.mar-t-double { margin-top: 2em; }


/* ==|== Padding ========================================================== */
.pad-none { padding: 0; }
.pad-divide { padding: .5em; }
.pad-default { padding: 1em; }
.pad-double { padding: 2em; }

.pad-b-none { padding-bottom: 0 !important; }
.pad-l-none { padding-left: 0 !important; }
.pad-r-none { padding-right: 0 !important; }
.pad-t-none { padding-top: 0 !important; }

.pad-b-divide { padding-bottom: .5em; }
.pad-l-divide { padding-left: .5em; }
.pad-r-divide { padding-right: .5em; }
.pad-t-divide { padding-top: .5em; }

.pad-b-default { padding-bottom: 1em ; }
.pad-l-default { padding-left: 1em; }
.pad-r-default { padding-right: 1em; }
.pad-t-default { padding-top: 1em; }

.pad-b-double { padding-bottom: 2em; }
.pad-l-double { padding-left: 2em; }
.pad-r-double { padding-right: 2em; }
.pad-t-double { padding-top: 2em; }

.gutter {
  padding-left: 20px;
  padding-right: 20px;
}

.leading {
  padding-bottom: 7px;
  padding-top: 7px;
}


/* ==|== Display / Visibility ========================================================== */
.block { display: block; }
.inline { display: inline; }

.inline-block,
.inline-list li,
.inline-list dt,
.inline-list dd { display: inline-block; }

.lt-ie8 .inline-block,
.lt-ie8 .inline-list li,
.inline-list dt,
.inline-list dd,
.lt-ie8 .sprite-icon {
  display: inline;
  zoom: 1;
}

.hide { display: none; }
.hide-visually { /* Hide only visually, but have it available for screenreaders */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.hide-visually.focusable:active,
.hide-visually.focusable:focus { /* Extends the .hide-visually class to allow the element to be focusable when navigated to via the keyboard */
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible { visibility: hidden; }


/* ==|== Floats ========================================================== */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after { clear: both; }
.lt-ie9 .clearfix { zoom: 1; }

.clearfix-br {
  clear: both;
  height: 0;
}

.float-l { float: left; }
.float-r { float: right !important; }


/* ==|== Fonts / Text ========================================================== */
.font-sz-big { font-size: 16px; }
.font-sz-default { font-size: 14px; }
.font-sz-small { font-size: 12px; }

.nowrap { white-space: nowrap; }

.text-lite { color: rgb(153, 153, 153) !important; }
.text-primary { color: rgb(28, 64, 148) !important; }
.text-secondary { color: rgb(34, 34, 34) !important; }
.text-success { color: rgb(93, 151, 50) !important; }
.text-warning { color: rgb(200, 138, 55) !important; }
.text-caution { color: rgb(215, 185, 38) !important; }
.text-critical,
.text-error { color: rgb(185,74,72) !important; }

.text-normal {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}
.text-em { font-style: italic; }
.text-strong { font-weight: bold; }
.text-underline { text-decoration: underline !important; }
.text-underline-none { text-decoration: none; }
.text-uppercase { text-transform: uppercase; }


/* ==|== Positioning / Alignment ========================================================== */
.pos-absolute { position: absolute; }
.pos-fixed { position: fixed; }
.pos-relative { position: relative; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right, table td.text-right { text-align: right; }
.text-center, table td.text-center { text-align: center; }

.valign-bottom { vertical-align: bottom; }
.valign-middle { vertical-align: middle; }
.valign-top { vertical-align: top; }


/* ==|== Miscellaneous ========================================================== */
.cursor-help { cursor: help; }
.cursor-pointer { cursor: pointer; }
.placeholder { color: #aaa; }

.break-word { word-wrap: break-word; overflow-wrap: break-word; }

ul.no-marker,
.no-marker ul { list-style-type: none; }

.no-outline { outline: none !important}

#profile-container legend { line-height: 33px; }

#transaction-search-results { margin-top: 4em; }

.fields .row-fluid .grid12.text-right i {
  position: relative;
  top: -11px;
  height: 32px;
}

.form-horizontal input.block {
  display: block;
}

.rba-failure {
	padding-top: 30px;
}

table th a {
	text-decoration: none;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* login page */
.login-panel .grid10.quick-links {
  border-left: 1px solid #BEBFBF;
  padding-left: 30px;
  margin-left: 0;
}

.login-panel .quick-links a.big-link {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.login-panel .quick-links a:visited {
  color: rgb(28, 64, 148);
}

.login-panel .quick-links a:hover {
  color: rgb(93,151,50);
}

/* Phone Numbers */

.phone-numbers .field-label {
  margin-top: 34px;
}

.phone-numbers table th  {
  color: #666666;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

.phone-numbers table tbody tr td label.checkbox {
  margin: 4px 3px 0 0;
  padding-left: 0;
}

.phone-numbers table tbody tr td input[type="checkbox"]{
  float: none;
  margin: 0;
}

.open label[for="profile-phone"] {
  margin-top: 34px;
}

a[data-role="additional"]:visited {
  color: #1C0494;
}

/*--TOGGLER--*/
[data-role="toggler"] { cursor: pointer; }

/* =============================================================================
   jQuery UI helpers
   ========================================================================== */
.ui-icon.inline-block {
  display: inline-block !important;
  margin-bottom: -3px;
}

.ui-state-error *:first-child,
.ui-state-highlight *:first-child { margin-top: 0; }

.ui-state-error *:last-child,
.ui-state-highlight *:last-child { margin-bottom: 0; }
/* fix for IE due to lack of support for :last-child */
.lt-ie9 .ui-state-error,
.lt-ie9 .ui-state-highlight {
  /* attempts to offset the default element margin */
  padding-bottom: .1em;
  padding-top: 11px;
}


/* =============================================================================
   Media Queries - Breakpoints @ 1200px | 980px | 768px | 480px
   ========================================================================== */

/* ==|== 480px - Phone Landscape ============================================ *//*
@media only screen and (max-width: 480px) {
  *//* placeholder *//*
}

*//* ==|== 768px - Phone Landscape | Tablet Portrait ========================== *//*
@media only screen and (max-width: 768px) {
  *//* placeholder *//*
}

*//* ==|== 768px - Tablet Portrait | Desktop Landscape ======================== *//*
@media only screen and (min-width: 768px) and (max-width: 980px) {
  *//* display changes *//*
  header[role="banner"] nav li i {
    display: block;
  }

  *//* content *//*
  header[role="banner"] nav li a {
    height: 71px;
    width: 155px;
  }
}*/

/* ==|== 980px - Tablet Landscape | Desktop ================================= */
@media only screen and (max-width: 980px) {

  /* display changes */
  header[role="banner"] nav li i {
    display: block;
    height: 40px;
  }

  /* content */
  header[role="banner"] nav li a {
    height: 71px;
    width: 117px;
    padding-top: 0;
  }

  .login-panel .grid12 {
    padding-right: 15px;
  }

  #profile-container .form-horizontal .field-label {
    width: 140px;
  }

  #profile-container .form-horizontal .fields {
    margin-left: 160px;
  }

  .login header h2.ccp-logo {
    top: 38px;
    left: 135px;
  }

  .account-details .field-group {
    padding: 3px 7px;
  }
  .account-details .field-label {
    font-size: 12px;
    width: 150px;
  }

  .account-details .fields {
    margin-left: 150px;
  }

  .quick-links p a {
    word-break: break-all;
  }
}

/* ==|== 980px - Desktop ==================================================== */
@media only screen and (min-width: 980px) {
  /* display changes */
  header[role="banner"] nav li i {
    display: block;
    height: 40px;
  }

  /* content */
  header[role="banner"] nav li a {
    height: 71px;
    width: 117px;
    padding-top: 0;
  }

  .login-panel .grid12 {
    padding-right: 15px;
  }

  .quick-links p a {
    word-break: break-all;
  }

  #profile-container .form-horizontal .field-label {
    width: 140px;
  }

  #profile-container .form-horizontal .fields {
    margin-left: 160px;
  }

  .login header h2.ccp-logo {
    top: 38px;
    left: 135px;
  }

  .account-details .field-group {
    padding: 3px 7px;
  }
  .account-details .field-label {
    font-size: 12px;
    width: 150px;
  }

  .account-details .fields {
    margin-left: 150px;
  }
}


/* ==|== 1200px - Desktop Widescreen ======================================== */
@media only screen and (min-width: 1200px) {
  /* content */
  header[role="banner"] nav li a {
    font-size: 14px;
    padding-top: 0;
    width: 154px;
  }

  .login-panel .grid12 {
    padding-right: 30px;
  }

  .account-details .field-label {
    width: 165px;
  }

  .account-details .fields {
    margin-left: 180px;
  }

  .quick-links p a {
    word-break: normal;
  }

  .login header h2.ccp-logo {
    top: 35px;
    left: 140px;
  }

}