element where you may change * something like the font or the background of the invoice */ html, body { /* MOVE ALONG, NOTHING TO CHANGE HERE! */ } /** * IMPORTANT NOTICE: DON'T USE '!important' otherwise this may lead to broken print layout. * Some browsers may require '!important' in oder to work properly but be careful with it. */ .clearfix { display: block; clear: both; } .hidden { display: none; } b, strong, .bold { font-weight: bold; } #container { font: normal 15px/1.4em 'IM Fell English', Serif; margin: 0 auto; padding: 40px 60px; min-height: 1078px; position: relative; background: url("../img/cup-1st.png") center center no-repeat, url("../img/bg-1st.jpg") 0 0 repeat; } #memo .logo { float: left; margin-right: 20px; } #memo .logo img { width: 150px; height: 150px; } #memo .company-info { margin-top: 15px; float: right; text-align: right; } #memo .company-info > div:first-child { font-style: italic; font-size: 55px; line-height: 1em; margin-bottom: 5px; color: #6C3817; } #memo .company-info span { display: inline-block; min-width: 20px; font-size: 13px; } #memo:after { content: ''; display: block; clear: both; } #invoice-title-number { float: left; margin: 40px 0 15px 20px; } #invoice-title-number span { display: inline-block; min-width: 20px; } #invoice-title-number #title { font-size: 24px; margin-right: 15px; } #invoice-title-number #number { font-size: 16px; } #client-info { float: right; min-width: 220px; margin-top: -40px; margin-bottom:20px; } #client-info > div { margin-bottom: 3px; min-width: 20px; } #client-info .client-name { font-style: italic; font-size: 20px; margin: 12px 0; } #client-info span { display: block; min-width: 20px; } #client-info > span { font-size: 13px; } #invoice-info { float: left; margin-top: 0px; margin-left: 20px; } #invoice-info > div { float: left; } #invoice-info > div > span { display: block; min-width: 20px; min-height: 18px; margin-bottom: 3px; } #invoice-info > div:last-child { margin-left: 70px; text-align: right; } #invoice-info:after { content: ''; display: block; clear: both; } table { table-layout: fixed; } table th, table td { vertical-align: top; word-break: keep-all; word-wrap: break-word; } .line { -moz-background-size: 100% auto; -o-background-size: 100% auto; -webkit-background-size: 100% auto; background-size: 100% auto; width: 700px; height: 8px; background: url("../img/line-1st.png") no-repeat; display: block; } .line.line-bottom { position: absolute; bottom: 0; left: -700px; } .line-column { position: relative; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: none !important; overflow: visible; } #items { margin-top: 20px; } #items .first-cell, #items table th:first-child, #items table td:first-child { width: 18px; text-align: left; } #items table { border-collapse: separate; width: 100%; } #items table th { padding: 8px 2px; font-size: 13px; text-align: right; text-transform: uppercase; } #items table th:first-child { padding-left: 0 !important; } #items table th:nth-child(2) { width: 30%; text-align: left; } #items table th.line-total { text-align: right; padding-right: 0 !important; } #items table td { padding: 10px 2px; text-align: right; } #items table td:first-child { padding-left: 0 !important; } #items table td:nth-child(2) { text-align: left; } #items table td.line-total { padding-right: 0 !important; } #sums { float: right; margin-top: 15px; page-break-inside: avoid; } #sums table tr th, #sums table tr td { min-width: 70px; padding: 10px 0; text-align: right; } #sums table tr th { text-align: left; padding-right: 25px; } #sums table tr.amount-total th { text-transform: uppercase; } #sums table tr.amount-total th, #sums table tr.amount-total td { font-size: 18px; font-style: italic; color: #6C3817; } #sums table tr:last-child th { text-transform: uppercase; } #sums table tr:last-child th, #sums table tr:last-child td { font-size: 18px; font-style: italic; color: #6C3817; } #terms { margin: 30px 0 10px 0; font-size: 14px; max-width: 520px; page-break-inside: avoid; } #terms > span { font-style: italic; display: inline-block; min-width: 20px; } #terms > div { margin-top: 2px; min-height: 24px; min-width: 50px; } .payment-info { font-size: 12px; max-width: 520px; } .payment-info div { min-width: 20px; } .payment-info div:first-child { font-style: italic; } .beans { position: absolute; background: url("../img/beans-1st.png") 0 0 no-repeat; background-size: 100% auto; width: 150px; height: 170px; bottom: 50px; right: 60px; } .ib_invoicebus_fineprint { color: black !important; text-align: left !important; font-family: 'IM Fell English', Serif !important; left: 60px !important; } /** * If the printed invoice is not looking as expected you may tune up * the print styles (you can use !important to override styles) */ @media print { /* Here goes your print styles */ } /* Demo Template Overrides */ body { width: 650px !important; min-height: 847px !important; margin-top: 15px !important; margin-bottom: 20px !important; } #container { font-size: 14px; margin: 0 auto; padding: 20px 35px; min-height: 807px; position: relative; } /* Demo Template Overrides */ body { width: 630px !important; min-height: 847px !important; margin-top: 15px !important; margin-bottom: 20px !important; } .ib_invoice_commands_wrap .ib_invoice_commands .ib_default_button, .ib_how_to_link, .ib_top_separator, .ib_invoicebus_love { display: none !important; } .ib_invoice_commands_wrap { position: relative !important; } .ib_invoice_commands_wrap .ib_invoice_commands { padding: 5px 0 !important; width: 100% !important; text-align: center !important; } .ib_highlight_editable { float: none !important; } .ib_drop_zone { font-size: 11px !important; } .ib_row_commands { width: 77px !important; left: -77px !important; top: 4px !important; } .ib_row_commands .ib_commands { -moz-transform: scale(0.66); -o-transform: scale(0.66); -webkit-transform: scale(0.66); transform: scale(0.66); top: 1px !important; } .ib_bottom_row_commands { margin-top: 10px !important; } .ib_bottom_row_commands .ib_blue_link { font-size: 13px !important; } .ib_show_hide_columns ib-span ib-span{ font-size: 13px !important; } .ib_currency_position label, .ib_date_format label { font-size: 13px !important; } .line { width: 580px; } .line.line-bottom { left: -570px; } .ib_dragrow { background: #836F51 !important; border-color: #836F51 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; opacity: 0.35; color: black; } .beans { bottom: 10px; right: 30px; -moz-transform: scale(0.85); -o-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); } .ib_drop_zone { color: #6C3817; border-color: #6C3817; } #memo .logo img { width: 120px; height: 120px; } #memo .company-info > div:first-child { font-size: 50px; }