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; } .x-hidden { display: none !important; } .hidden { display: none; } b, strong, .bold { font-weight: bold; } #container { font: normal 13px/1.4em 'Open Sans', Sans-serif; margin: 0 auto; min-height: 1158px; position: relative; } .left-stripes { position: absolute; top: 0; right: 0; bottom: 0; width: 100px; background: url("../img/stripe-bottom.png") center bottom no-repeat, url("../img/stripe-bg.jpg") repeat; } .left-stripes .circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #415472; width: 30px; height: 30px; position: absolute; left: 33%; } .left-stripes .circle.c-upper { top: 440px; } .left-stripes .circle.c-lower { top: 690px; } .right-invoice { padding: 40px 130px 40px 30px; min-height: 1078px; } #memo .company-info { float: left; } #memo .company-info div { font-size: 28px; text-transform: uppercase; min-width: 20px; line-height: 1em; } #memo .company-info span { font-size: 12px; color: #858585; display: inline-block; min-width: 20px; } #memo .logo { float: right; margin-left: 15px; } #memo .logo img { width: 150px; height: 100px; } #memo:after { content: ''; display: block; clear: both; } #invoice-title-number { margin: 50px 0 20px 0; display: inline-block; float: right; } #invoice-title-number .title-top { font-size: 15px; margin-bottom: 5px; } #invoice-title-number .title-top span { display: inline-block; min-width: 20px; } #invoice-title-number .title-top #number { text-align: left; float: left; color: #858585; } #invoice-title-number .title-top:after { content: ''; display: block; clear: both; } #invoice-title-number #title { display: inline-block; background: #415472; color: white; font-size: 50px; padding: 7px; font-family: IRANSans, Serif; line-height: 1em; } #client-info { float: left; text-align: right; margin-top: 50px; min-width: 220px; } #client-info .client-name { font-weight: bold; font-size: 15px; text-transform: uppercase; margin: 7px 0; } #client-info > div { margin-bottom: 3px; min-width: 20px; } #client-info span { display: block; min-width: 20px; } #client-info > span { text-transform: uppercase; color: #858585; font-size: 15px; } table { table-layout: fixed; } table th, table td { vertical-align: top; word-break: keep-all; word-wrap: break-word; text-align: center !important; } #invoice-info { float: right; margin-top: 10px; } #invoice-info div { margin-bottom: 3px; } #invoice-info div span { display: inline-block; min-width: 20px; min-height: 18px; } #invoice-info div span:first-child { font-weight: bold; text-transform: uppercase; margin-right: 10px; } #invoice-info:after { content: ''; display: block; clear: both; } .currency { margin-top: 20px; text-align: left; color: #858585; font-style: italic; font-size: 12px; } .currency span { display: inline-block; min-width: 20px; } #items { margin-top: 10px; } #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 { font-family: Sanchez, Serif; font-size: 12px; text-transform: uppercase; padding: 5px 3px; text-align: right; background: #b0b4b3; color: white; } #items table th:nth-child(2) { width: 30%; text-align: left; } #items table th:last-child { text-align: right; } #items table td { padding: 10px 3px; text-align: right; border-bottom: 1px solid #ddd; } #items table td:first-child { text-align: left; } #items table td:nth-child(2) { text-align: left; } #sums { float: left; margin-top: 30px; } #sums table tr th, #sums table tr td { min-width: 100px; padding: 8px 3px; text-align: right !important; } #sums table tr th { padding-right: 25px; } #sums table tr.amount-total td { background: #415472; color: white; font-family: Sanchez, Serif; font-size: 35px; line-height: 1em; padding: 7px !important; } #sums table tr.due-amount th, #sums table tr.due-amount td { font-weight: bold; } #terms { margin-top: 60px; } #terms > span { font-weight: bold; display: inline-block; min-width: 20px; text-transform: uppercase; } #terms > div { min-height: 50px; min-width: 50px; } .payment-info { font-size: 12px; color: #858585; margin-top: 30px; } .payment-info div { min-width: 20px; } .payment-info div:first-child { font-weight: bold; } .ib_invoicebus_fineprint { text-align: left !important; padding-left: 130px !important; width: auto !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_p { direction: rtl!important; text-align: right!important; }