/* ************************************** *
 * APUI (Allopass Payment User Interface) *
 * ************************************** */

.apui-frame-title {
    color: #3b3b3b;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.apui-frame-subtitle {
    color: #888888;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
}

/* The main title of the payment frame sometimes provides
 * information about the transaction status or about the 
 * current state of the payment process. These details can
 * be given using an icon before the title text.*/

.apui-frame-title.with-icon {
    line-height: 28px !important;
    text-align: left !important;
    padding-left: 40px;
    height: 32px;
}
.apui-frame-title.trx-accepted { background: url(../../../static/css/icons/trx-status-title.png) no-repeat 0px 0px; }
.apui-frame-title.trx-refused { background: url(../../../static/css/icons/trx-status-title.png) no-repeat 0px -32px; }
.apui-frame-title.trx-aborted { background: url(../../../static/css/icons/trx-status-title.png) no-repeat 0px -64px; }

.apui-frame-title.scr-favorite { background: url(../../../static/css/icons/scr-state-title.png) no-repeat 0px 0px; }
.apui-frame-title.scr-no-market { background: url(../../../static/css/icons/scr-state-title.png) no-repeat 0px -32px; }
.apui-frame-title.scr-timeout { background: url(../../../static/css/icons/scr-state-title.png) no-repeat 0px -64px; }

/* The block representing the transaction receipt */

.apui-trx-receipt {
    width: 380px;
    font-size: 11px;
    background: url(../../../static/css/images/receipt-trx-content.png) repeat-y 50% 50%;
    margin: 5px auto;
}

.apui-trx-receipt .rcp-content {
    background: url(../../../static/css/images/receipt-trx-empty.png) no-repeat 50% 0px;
    padding: 20px 20px 13px 20px;
}

.apui-trx-receipt.paid .rcp-content {
    background: url(../../../static/css/images/receipt-trx-paid.png) no-repeat 50% 0px;
}

.apui-trx-receipt .rcp-bottom {
    background: url(../../../static/css/images/receipt-trx-footer.png) no-repeat 50% bottom;
    padding-bottom: 7px;
}

.apui-trx-receipt td.rcp-label {
    text-align: left;
    color: #999999;
}

.apui-trx-receipt td.rcp-value {
    text-align: right;
    color: #333333;
}

/* Common actions on documents
 * like the transaction receipts (print, save, etc.) */

ul.apui-docu-tools {
    text-align: center;
    margin: 10px 0;
}

ul.apui-docu-tools li {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

ul.apui-docu-tools a { text-decoration: underline; color: #666666; }
ul.apui-docu-tools a:hover { text-decoration: none; color: #779a23; }


/* Represents a list of contextual questions
 * for helping the customer finding his way. */

.apui-contextual-questions {
    list-style: none !important;
    text-align: center;
    background-color: #f6f6f6;
    padding: 10px 0;
    margin: 10px auto 0px auto;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
}

.apui-contextual-questions li { margin-bottom: .3em; color: #666666; }
.apui-contextual-questions li a { text-decoration: underline; color: #666666; }
.apui-contextual-questions li a:hover { text-decoration: none; color: #779a23; }

/* Frames, forms, divs, etc. */

.apui-frame {
  width: 510px;
  margin: 0 auto;
}

.apui-form {
    margin-bottom: 1em;
}

/* The icon kit for any custom href. These
 * are organized by categories: time, documents, etc. */

.apui-icon {
    white-space: nowrap;
    background-repeat: no-repeat;
    outline: none;
    zoom: 1;
    overflow: hidden;
}

.apui-icon.small {
    font-size: 15px !important;
    line-height: 15px !important;
    padding-left: 20px;
}

.apui-icon.day { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat 0px 50%; }
.apui-icon.cal { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -32px 50%; }
.apui-icon.clock { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -63px 50%; }
.apui-icon.timing { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -96px 50%; }
.apui-icon.schedule { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -128px 50%; }
.apui-icon.timer { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -160px 50%; }
.apui-icon.alarm { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -192px 50%; }
.apui-icon.bell { background: url(../../../static/css/icons/time-symbols-999.png) no-repeat -224px 50%; }

.apui-icon.new-doc { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat 0px 50%; }
.apui-icon.duplicate { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat -32px 50%; }
.apui-icon.save { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat -63px 50%; }
.apui-icon.undo { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat -96px 50%; }
.apui-icon.redo { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat -128px 50%; }
.apui-icon.print { background: url(../../../static/css/icons/docu-symbols-999.png) no-repeat -160px 50%; }