/* Element Styles */

body { margin: 0; padding: 0; font-size: 12px; }
img { border: 0; }
form { margin: 0; padding: 0; }
textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.ui-spinner-input), .form-layout .input { border-width: 1px; border-style: solid; padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  }
h1 { font-weight: bold; font-size: 2em; display: inline; margin: 0; padding: 0; }
h2 { font-weight: bold; font-size: 1.8em; display: inline; margin: 0; padding: 0; }
h3 { font-weight: bold; font-size: 1.2em; display: inline; margin: 0; padding: 0; }
button, .button { line-height: 1.4em; }
button img, .button img { vertical-align: text-top; }
.placeholder { color: #AAA; } /* Only used for older versions of IE (IE9 and lower) to add the missing placeholder feature. */

/* Overrides from other stylesheets */

.ui-button-text-only .ui-button-text { padding: 0.3em 1.2em; }
.ui-spinner.ui-spinner-inside .ui-spinner-input { padding: 2px; }
.ui-password-meter { width: 12em; }
.data-table-container { overflow-x: auto; }
.data-table > thead > tr > th { vertical-align: bottom; }
.data-table > thead > tr > th > a { text-decoration: none; }
.data-table > thead > tr > th .dbt-sort-asc { background-image: url('/images/icons/icon_arrow_asc.gif'); }
.data-table > thead > tr > th .dbt-sort-desc { background-image: url('/images/icons/icon_arrow_desc.gif'); }
#cluetip-waitimage { background-image: url(/images/loading.gif); }

/* General */
.boolean-yes, .boolean-no { margin-left: 15px; }
.primary-admin { color: #00F; font-weight: bold; }
.api-user { color: #F00; font-weight: bold; }
.credit-card-images img { margin-right: 3px; }

.form-success { margin-left: 15px; }

.data-list .label { white-space: nowrap; }

.ui-corner-large-all, .ui-corner-large-top, .ui-corner-large-left, .ui-corner-large-tl { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-top-left-radius: 10px; border-top-left-radius: 10px; }
.ui-corner-large-all, .ui-corner-large-top, .ui-corner-large-right, .ui-corner-large-tr { -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; border-top-right-radius: 10px; }
.ui-corner-large-all, .ui-corner-large-bottom, .ui-corner-large-left, .ui-corner-large-bl { -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; }
.ui-corner-large-all, .ui-corner-large-bottom, .ui-corner-large-right, .ui-corner-large-br { -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }

.ui-border-all, .ui-border-top { border-top-width: 1px; border-top-style: solid; }
.ui-border-all, .ui-border-bottom { border-bottom-width: 1px; border-bottom-style: solid; }
.ui-border-all, .ui-border-left { border-left-width: 1px; border-left-style: solid; }
.ui-border-all, .ui-border-right { border-right-width: 1px; border-right-style: solid; }

/* Layout */

.content-body { padding: 10px; }
.page-header { white-space: nowrap; height: 180px; background-image: url('/images/header_gradient.png'); background-repeat: repeat-x; }
.page-header img { padding-left: 5%; }
.page-middle { height: 250px; }
.page-content-container, .page-menu-container { width: 90%; position: absolute; left: 5%; }
.page-content-container { top: 160px; }
.no-menu { top: 115px; }
.page-menu-container { top: 115px; }
.page-menu { border-width: 5px; border-style: solid; text-align: center; padding: 5px 10px; font-weight: bold; font-size: 1.2em; }
.page-menu a { text-decoration: none; }
.page-content { border-width: 5px; border-style: solid; padding: 5px 10px; min-height: 470px; }
.page-content-header { font-weight: bold; padding: 10px 20px; margin-bottom: 15px; min-height: 1em; }
.sub-menu { float: right; text-decoration: none; }
.page-footer { margin-top: 15px; text-align: center; }
.secondary-header { margin-bottom: 15px; padding: 5px 10px; }

/* Content Container Base */
.content-container { border-width: 1px; border-style: solid; }
.content-container > .header, .content-container > .header-clear { padding: 5px 10px 5px 20px; font-weight: bold; }
.content-container > .header-clear a { font-weight: normal; }
.content-container > .content { padding: 5px 10px; }
.content-container.half { width: 49%; }
.content-container.half.left { float: left; }
.content-container.half.right { float: right; }

/* Data Tables */
.data-table .total td { text-align: right; font-weight: bold; }
.data-table .currency, .data-table .number, .data-table .percent, .data-table .date { text-align: right; }
.data-table.no-border, .data-table.no-border td, .data-table.no-border th { border: 0; }
.data-table.no-color > thead > tr > th { color: inherit; background-color: inherit; font-weight: bold; }
.data-table.no-color > thead > tr > th > a { color: inherit; }
.data-table.no-color > thead > tr > th > a:hover { color: inherit; }

.edit-control { width: 100%; border-collapse: collapse; border: 0; }
.edit-control th { border: 0; padding: 3px; padding-right: 5px; text-align: right; vertical-align: top; }
.edit-control th a { text-decoration: none; white-space: nowrap; }
.edit-control td { border: 0; padding: 3px; vertical-align: top; }
.edit-control td pre { margin: 0; padding: 0; }
.edit-control .header { text-align: left; padding-top: 10px; font-size: 1.2em; }

.current-invoice-table .invoice-number { width: 150px; }
.current-invoice-table .invoice-date { width: 100px; }
.current-invoice-table .due-date { width: 100px; }
.current-invoice-table .amount { width: 80px; }
.current-invoice-table .discount { width: 80px; }
.current-invoice-table .status { width: 100px; }
.current-invoice-table .description { width: auto; white-space: normal; }
.current-invoice-table .amount-due { width: 80px; }
.current-invoice-table .payment-amount { width: 150px; }

.custom-field-value-table .column-1 { width: auto; white-space: normal; }

/* Pages/Sections */

/* Help */
.help-assistance { line-height: 1.5em; padding: 0 10px; text-align: center; text-decoration: none; font-weight: bold; font-size: .8em; }
.help-assistance a { white-space: nowrap; }
.help-assistance hr { border: 0; border-bottom-width: 1px; border-bottom-style: solid; }

/* Logon Page */
.logon-message { margin-left: .5em; font-weight: bold; font-size: 1.1em; }
.ui-auth-lookup-form label { display: block; }

/* Customer Profile Page */
.action { font-weight: bold; text-decoration: none; }
.action:hover, .action:active { text-decoration: none; }

/* Payments */
.payment-success { width: 90%; margin: auto; padding: 20px; }
.payment-methods { border-width: 1px; border-style: solid; padding: 10px; margin-bottom: 15px; }
.overpayment-message { text-align: right; }

/* Invoice Form */
.invoice-form-line-items td, .invoice-form-line-items th { vertical-align: middle; }
.invoice-form-line-items .line-item-amount { width: 1%; }
.invoice-form-line-items .line-item-description { width: 98%; }
.invoice-form-line-items .line-item-actions { width: 1%; }
.invoice-form-line-items tbody .item { padding: 0; }

/* Global Template */
.template-header-text { font-size: 1.8em; }
.template-header-right { float: right; font-weight: bold; margin: 0; }
.template-header-right > li > div, .template-header-right > li > .label { padding-bottom: 3px; }
.template-secondary-header { width: 100%; }
.template-secondary-header td { vertical-align: top; }
.template-secondary-header .logo { width: 1%; padding-right: 10px; }
.template-secondary-header .middle { width: auto; }
.template-secondary-header .right { width: 1%; white-space: nowrap; }
.template-date-time { float: right; font-weight: bold; }
.template-pay-now-link { float: right; margin: 10px 0; }

/* Invoice Template */
.invoice-template-table { border-collapse: collapse; width: 100%; }
.invoice-template-table td, .invoice-template-table th { padding: 2px; }
.invoice-template-table .column-1 { width: 100px; }
.invoice-template-table .column-2 { width: auto; }
.invoice-template-table .column-3 { width: 125px; }
.invoice-template-table tbody .column-3 { text-align: right; }
.invoice-template-table tfoot .total-label, .invoice-template-table tfoot .total  { text-align: right; font-weight: bold; }