@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .page-user.logged-in .main-container {
        background: url(https://www.buildinggreen.com/sites/default/files/guidance/user-bg_sm1.png);
    }
}

@media only screen and (min-width: 1200px) {
    .page-user.logged-in .main-container {
        background: url(https://www.buildinggreen.com/sites/default/files/guidance/user-bg_lg1.png);
    }
}

.page-user-cards .main-container,
.page-user-addressbook-billing-create .main-container,
.page-user-addressbook-billing-edit .main-container,
.page-user-addressbook-billing-delete .main-container,
.page-user-profile-public .main-container,
.page-user-cancel .main-container {
  background-image: none !important;
  padding-top: 2em;
}

@media only screen and (min-width: 992px) {
  .page-user-cards .main-container form,
  .page-user-addressbook-billing-create .main-container form,
  .page-user-addressbook-billing-edit .main-container form {
    width: 80%;
  }
}

@media only screen and (min-width: 1200px) {
  .page-user-cards .main-container form,
  .page-user-addressbook-billing-create .main-container form,
  .page-user-addressbook-billing-create .main-container form {
    width: 60%;
  }
}

.form-item-credit-card-owner,
.form-item-commerce-customer-address-und-0-thoroughfare,
.form-item-commerce-customer-address-und-0-premise,
.form-item-commerce-customer-address-und-0-country {
  max-width: 36em;
}

.form-item-credit-card-type,
.form-item-credit-card-number {
  max-width: 20em;
}

#edit-credit-card-exp-month,
#edit-credit-card-exp-year {
  width: 4em;
  display: inline-block;
}

.form-item-credit-card-exp-month label {
  display: block;
}

#edit-credit-card-code {
  width: 4em;
}


@media only screen and (min-width: 768px) {
  .page-user.logged-in .main-container {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-top: -15px;
  } 
}

.account-status {
    background-color: #fff;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid #655F70;
}

.account-status .btn {  /* needs SASS */
  border-radius: 0; /* needs SASS */
  text-align: left;
}

.scotch-container {
  margin-bottom: -2em;
}

.tab-content, #scotch-panel { min-height: 1000px; }

#ceu-numbers, #quiz-results {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd; 
  padding: 1em 1em 1.5em; 
}

#continuing-education .nav-tabs {
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
}

#continuing-education .nav-tabs > li {
  border-bottom: none;
}

#continuing-education .nav-tabs li a {
  background-color: #E7E6E9;
  color: #230f5a; /* needs SASS */
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

#continuing-education .nav-tabs li.active a {
  background-color: #fff;
  color: #222; /* needs SASS */
}

@media only screen and (min-width: 0) and (max-width: 767px) {
    .user-sidebar {
      border-bottom-right-radius: 12px; /* kludge because I can't make BG color full-height */
      background-image:-webkit-linear-gradient(left, #f4f4f4 0%, #e7e6e9 100%);
      background-image:-o-linear-gradient(left, #f4f4f4 0%, #e7e6e9 100%);
      background-image:linear-gradient(to right, #f4f4f4 0%, #e7e6e9 100%);
    }
    .user-sidebar h3 {
        font-size: 16px;
        text-transform: uppercase;
        margin-bottom: 0.25em;
    }
    .menu-simple {
        font-family: source-sans-pro, sans-serif;
    }
    .menu-simple li {
        line-height: 1.4em;
    }
    .account-status {
        margin: 10px -5px;
    }
}

@media only screen and (min-width: 768px) {
  .account-status {
    margin-top: 1em;
  }
  .user-sidebar h3 {
      font-size: 18px;
      text-transform: uppercase;
  }

  .user-sidebar ul {
      margin: 0; 
      padding: 0;
      list-style-type: none;
      border: 1px solid #655F70;
  }

  .user-sidebar ul li a {
      text-decoration: none !important;
      color: #39306D; 
      padding: 0.5em;
      background-color: #fff;
      display:block;
      border-bottom: 1px solid #655F70;
  }

  .user-sidebar ul li:last-child a {
      border-bottom: none;
  }
   
  .user-sidebar ul li a:visited {
      color: #39306D;
  }
   
  .user-sidebar ul li a:hover {
      color: white;
      background-color: #230f5a;
  }

  .user-sidebar ul li.active a {
      color: white;
      background-image: -webkit-linear-gradient(top,#6D6984 0%,#a3a0b3 100%);
      background-image: -o-linear-gradient(top,#6D6984 0%,#a3a0b3 100%);
      background-image: linear-gradient(to bottom,#6d6984 0%,#a3a0b3 100%);
  }
}

.menu-simple {
    list-style-type: none;
    padding-left: 0;
}
/*html,*/
body.page-user {
  overflow-x: hidden; /* Prevent scroll on narrow devices. Commented HTML because of tooltipster interaction */
}

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}

header .toggle-panel { display: none; }
header ul { display: block; }

@media only screen and (min-width : 769px) {
  /* Closes the Panel on window resize from small to large. */
  /* Important tags aren't always bad otherwise you can close with JS on resize. */
  .scotch-panel-canvas {
    -o-transform: translate3d(0px, 0px, 0px) !important;
    -ms-transform: translate3d(0px, 0px, 0px) !important;
    -moz-transform: translate3d(0px, 0px, 0px) !important;
    -webkit-transform: translate3d(0px, 0px, 0px) !important;
    transform: translate3d(0px, 0px, 0px) !important;
  }
}

@media only screen and (max-width : 768px) {
  header .toggle-panel { display: block; }
  header ul { display: none; }
}

#user-toggle {
  border: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-left: -30px;
  padding: 4px 8px 4px 6px;
}

#user-toggle.dormant {
  color: white;
  background-color: #D36340; /* $brand-warning */
}

#user-toggle.dormant::before {
  content: "\00AB\00A0\00A0"; /* Unicode hex for » and   */
}

#user-toggle.open {
  color: #333139; /* $gray-darker */
  background-color: #C0BCC5; /* light-bg */
}

#user-toggle.open::before {
  content: "\00D7\00A0\00A0"; /* Unicode hex for × and   */
}

.page-user h1 {
  display: block !important;
}

#user-profile-form h4 { /* KLUDGE BECAUSE WE CAN'T FIX THIS ON PRODUCTION YET */
    text-transform: none;
    font-size: 20px;
    line-height: 22px;
    margin-top: 11px;
    color: #230f5a; /* should be brand-primary */
}

#user-profile-form .tab-content h4 {
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  margin-top: 1.5em;
  color: #230f5a; /* should be brand-primary */
}

#user-profile-form .form-group:last-child {
  margin-bottom: 15px;
}

#user-profile-form .form-actions {
  margin-top: 1em;
}

/* Address book spacing */

.field-name-commerce-customer-address {
  margin-top: 1em;
}

.view-commerce-addressbook-defaults {
  display: inline-block;
  margin-top: 1em;
  padding: 0 10px 10px;
  border: 1px solid #E7E6E9; /* should be gray-lighter */
  background-color: #e6f2d9; /* should be success-light */
}

.view-commerce-addressbook-defaults .field-name-commerce-customer-address {
  font-weight: 600;
  font-size: 110%;
}

.views-field-commerce-order-better-balance {
  white-space: nowrap; /* makes order history form look better */
}

#user-toggle-wrapper{
  z-index: 2;
}

#user-toggle-wrapper.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    z-index: 10000;
}