.credit-card-type {
  margin:0;
  li {
    display:inline-block;
    &.icon {
      width:30px;
      height:20px;
      text-indent:-999em;
      background-position:center;
      opacity:0.3;
      filter: alpha(opacity = 30);
      &.visa { background-image:url('/assets/credit_cards/visa_32.png');}
      &.master { background-image:url('/assets/credit_cards/mastercard_32.png');}
      &.diners_club { background-image:url('/assets/credit_cards/diners_club_32.png');}
      &.american_express { background-image:url('/assets/credit_cards/american_express_32.png');}
      &.not_valid { background-image:url('/assets/credit_cards/not_valid_32.png');}
      &.active { opacity:1; filter: alpha(opacity = 100); }
    }
    &.hint {
      display:none;
      margin-left:2px;
      color:#f00;
      font-size:90%;
      &.active { display:inline-block; }
    }
  }
}

.credit-card-form {
  label.cc-label {
    height:115px;
    padding:10px;
    &:hover { background:#f5f5f5; }
    &.active { background:#eee; box-shadow:inset 0 0 15px #ccc; border-color:#ccc; }
  }
  .cc-label {
    margin-bottom:10px;
    padding:10px 0;
    border-radius:5px;
    border:1px solid transparent;
    .cc-template {
      float:left;
      border-radius:5px;
      font-weight:bold;
      color:#fff;
      width:166px;
      height:117px;
      background:url(/assets/credit_cards/credit_card_bg.png);
      overflow:hidden;
      padding:0 5px 0 15px;
      .cc-number {
        padding:50px 0 10px 0;
        font-size:16px;
        letter-spacing:2px;
      }
      .cc-name {
        float:left;
        width:120px;
      }
      .cc-type {
        float:right;
        text-indent:-999em;
        span {
          display:block;
          width:30px;
          height:20px;
          background-position:center;
          &.visa { background-image:url('/assets/credit_cards/visa_32.png');}
          &.master { background-image:url('/assets/credit_cards/mastercard_32.png');}
          &.diners_club { background-image:url('/assets/credit_cards/diners_club_32.png');}
          &.american_express { background-image:url('/assets/credit_cards/american_express_32.png');}
        }
      }
    }
    .cc-details {
      padding-left:210px;
      p:last-child { margin:0; }
    }
  }
}