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; } .separator { height: 15px; } .separator.less { height: 10px !important; } #container { font: normal 14px/1.4em 'PT Sans', Sans-serif; margin: 0 auto; padding: 50px 65px; min-height: 1058px; position: relative; } #memo { min-height: 100px; } #memo .logo { float: left; margin-right: 20px; } #memo .logo img { width: 150px; height: 100px; } #memo .company-info { float: left; margin-top: 8px; max-width: 515px; } #memo .company-info span { color: #888; display: inline-block; min-width: 15px; } #memo .company-info > span:first-child { color: black; font-weight: bold; font-size: 28px; line-height: 1em; } #memo:after { content: ''; display: block; clear: both; } #invoice-info { float: left; margin-top: 50px; } #invoice-info > div { float: left; } #invoice-info > div > span { display: block; min-width: 100px; min-height: 18px; margin-bottom: 3px; } #invoice-info > div:last-child { margin-left: 10px; } #invoice-info:after { content: ''; display: block; clear: both; } #client-info { float: right; margin-top: 9px; margin-right: 30px; min-width: 220px; } #client-info > div { margin-bottom: 3px; } #client-info span { display: block; } #client-info .client-name { font-weight: bold; } #invoice-title-number { float: left; margin: 60px 0 10px 0; } #invoice-title-number span { display: inline-block; min-width: 15px; line-height: 1em; } #invoice-title-number #title { font-size: 50px; color: #396E00; } #invoice-title-number #number { font-size: 22px; } table { table-layout: fixed; } table th, table td { vertical-align: top; word-break: keep-all; word-wrap: break-word; } #items { margin-top: 40px; } #items .first-cell, #items table th:first-child, #items table td:first-child { width: 18px; text-align: right; } #items table { border-collapse: separate; width: 100%; } #items table th span:empty, #items table td span:empty { display: inline-block; } #items table th { font-weight: bold; padding: 10px; text-align: right; border-bottom: 2px solid #898989; } #items table th:nth-child(2) { width: 30%; text-align: left; } #items table th:last-child { text-align: right; } #items table td { border-bottom: 1px solid #C4C4C4; padding: 10px; text-align: right; } #items table td:first-child { text-align: left; } #items table td:nth-child(2) { text-align: left; } #sums { float: right; margin-top: 10px; page-break-inside: avoid; } #sums table tr th, #sums table tr td { min-width: 100px; padding: 10px; text-align: right; } #sums table tr th { text-align: left; padding-right: 25px; } #sums table tr.amount-total th { text-transform: uppercase; color: #396E00; } #sums table tr.amount-total th, #sums table tr.amount-total td { font-weight: bold; font-size: 16px; border-top: 2px solid #898989; } #sums table tr:last-child th { text-transform: uppercase; color: #396E00; } #sums table tr:last-child th, #sums table tr:last-child td { font-size: 16px; font-weight: bold; } #terms { margin-top: 80px; page-break-inside: avoid; } #terms > span { font-weight: bold; } #terms > div { color: #396E00; font-size: 16px; min-height: 70px; width: 100%; max-width: 500px; } .payment-info { color: #888; font-size: 12px; margin-top: 20px; width: 100%; max-width: 440px; } .payment-info div { display: inline-block; min-width: 15px; } .bottom-circles { width: 310px; height: 215px; -moz-background-size: 384px auto; -o-background-size: 384px auto; -webkit-background-size: 384px auto; background-size: 384px auto; position: absolute; bottom: 0; right: 0; overflow: hidden; } .bottom-circles section { position: relative; } .bottom-circles section div { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; position: absolute; } .bottom-circles section > div:first-child { background: #396E00; left: 3px; width: 125px; height: 125px; top: 117px; } .bottom-circles section > div:first-child > div { background: #88C213; width: 60px; height: 60px; top: 32px; left: 32px; position: relative; } .bottom-circles section > div:last-child { background: #396E00; right: -65px; width: 280px; height: 280px; } .bottom-circles section > div:last-child > div { background: #88C213; top: 24px; left: 24px; width: 230px; height: 230px; } .bottom-circles section > div:last-child > div > div { background: #396E00; top: 58px; left: 58px; width: 115px; height: 115px; } .bottom-circles section > div:last-child > div > div > div { background: #FFF; top: 12px; left: 12px; width: 90px; height: 90px; } .show-mobile { display: none !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 */ .ib_invoicebus_fineprint { text-align: left; text-indent: 65px; } }