/**************************************************************************** What: Style sheet for Hillier Nurseries ERP reports (invoices, quotes, etc) This CSS stylesheet provides the rules for controlling the format and layout rules of the reports output from Hillier's Priority ERP system, for subsequent processing by PrinceXML HTML=>PDF converter. When: 12-Jul-2011 Who: Mark Chitty, Thinkers Ltd on behalf of Hillier Nurseries Ltd ****************************************************************************/ /*Barcode Font Family Definition */ @font-face { font-family: eanbarcode; font-style: normal; font-weight: normal; src: url("Barcode3of9_0.ttf") } @font-face { font-family: eaobarcode; font-style: normal; font-weight: normal; src: url("EAN-13.ttf") } @font-face { font-family: eapbarcode; font-style: normal; font-weight: normal; src: url("EAN-13-new.ttf") } /* Document structure */ @page { size: A4; margin: 3cm 1cm 2.3cm 1cm; @top { content: flow(headerAllPages); vertical-align: top; margin-top: 0.5cm; } @bottom { content: flow(footerAllPages); vertical-align: bottom; margin-bottom: 0.5cm; } } #headerAllPages, #footerAllPages { display: none; } form:first-of-type #headerAllPages { display: block; flow: static(headerAllPages); } form:first-of-type #footerAllPages { display: block; flow: static(footerAllPages); } form:contains('Special instructions'), form:contains('Transport Request') { page-break-after: auto !important; page-break-inside: avoid; margin-bottom: 10em; } td { vertical-align: top; } table { border-collapse: collapse; } div:empty { display: none !important; } * { border: 0 solid #ccc; } p { margin: 0; } /* Typography */ body { font: 9pt Arial, sans-serif; } td#_prisubtotal font { font-weight: bold; } .smallText { font-size: 85%; } .fieldLabel, .fromLabel { font-weight: bold; } .fieldLabel { padding-right: 8pt; } font.noWrap { white-space: nowrap; } a { color: #000; text-decoration: none; } /* Footer */ #footer { background:url(img/footer-logos.png) right no-repeat; background-image-resolution:450dpi; border-top-width: 0.5pt; } #docId { margin-top: 5pt; color: #aaa; line-height: 1; font-size: 75%; padding: 2pt 3pt; border-width: 0.5pt; } .ftMain td { vertical-align: middle; font-size: 80%; padding-top: 3px; line-height: 1.7; } .pageNo::after { content: "Page " counter(page) " of " counter(pages); } #headerAllPages { counter-reset: page 1 pages 1; } /* Headers */ #docTitle { background:url(img/hillier-logo.png) right bottom no-repeat; background-image-resolution:300dpi; } .docHeader td { height: 2cm; vertical-align: bottom; padding-bottom: 0.2cm; } .docType { color: #666; font: 300% Arial; margin-left: -1pt; } .docSubTitle { color: #666; font: 150% Arial; display: block; } .docSubTitle i { color: #ccc; font: normal 80% Arial; display: inline-block; margin: 0 5pt; position: relative; top: -1.9pt; } #headerInfo, #delivery, #trolleys, #headerMore { width: 99.7%; border-width: 0.5pt; border-radius: 0.3cm; background: #f6f6f6; padding: 5pt 0; margin-bottom: 2em; } #trolleys table, table.receivedBy { margin: 2pt 7pt; } #headerInfo { display: none; } /* Hide it if it contains no text */ #headerInfo:contains('e') { display: table; } #headerDoc td:last-child { max-width: 130pt; } .deliverTo { margin: 0 8pt; } .hdr { padding: 0 8pt; display: table-cell; vertical-align: top; } .hdr:first-child { border-right-width: 0.5pt; } .hdr:last-child { border-left-width: 0.5pt; } .hdr tr:not(:last-child) td { padding-bottom: 2.5pt; } #headerPOs { padding: 0; } #headerPOs table { border: 0.5pt solid #ccc; } #headerPOs td { background: rgba(255,255,255,0.7); padding: 1px 3px; } #headerPOs td font { color: #000 !important; } #headerMore td { padding: 0 20pt; } #headerMore { margin: 0.8em 0 2.5em; font-size: 120%; line-height:1.3; text-align: center; background-color: #FDF5D9; border-color: #F1E5AE; border-radius: 0.1cm; color: #3D2E14; } /* Transport Request header - this report is written out to the page in 3 places - #headerTo, #headerDoc & #headerFrom. These rules reveal only the relevant columns in each of those header divs. */ .trqHeader td { display:none; } #headerTo .trqHeader td:nth-child(1), #headerTo .trqHeader td:nth-child(2), #headerDoc .trqHeader td:nth-child(3), #headerDoc .trqHeader td:nth-child(4), #headerFrom .trqHeader td:nth-child(5), #headerFrom .trqHeader td:nth-child(6) { display:table-cell; } /* Delivery address */ #delivery { border-color: #b0b9c9; background: #F2F3F9; } #delivery .sectHdr { display: block; padding-bottom: 0.2em; font-size: 133%; font-weight: bold; } td.receivedByBox { background: #fff; border: 1px solid #ccc; height: 7em; } td.receivedByLabel { vertical-align: middle; } table.receivedBy td { padding-bottom: 0.2em; } tr:not(:first-child) .deliveryNote { padding: 0.8em 0.3em 0.1em 0 !important; } tr:not(:first-child) .deliveryNote font { display: block !important; width:100%; background-color: #fafafa; border: 0.5pt solid #b0b9c9; padding:0.15em; border-radius: 0.1cm; } #delivery td { padding-right: 0.7em; } #delivery td:first-child:empty { padding-right: 0; } #delivery td[width="30%"] { width: auto; } #delivery td:nth-child(4) .fieldLabel { display: inline-block; margin: 0 -10em 0.2em 0; float: left; clear: left; } #delivery td:nth-child(4) .fieldValue { display: inline-block; margin: 0 0 0.2em 6em; white-space: nowrap; } #delivery .smallText { display: block; clear: left; margin-top: 0.2em; max-width: 22em; white-space: normal; } #delivery td:contains('minimum') { padding-top: 0.4em; font-size: 85%; } /* Shelves/trolleys and signature */ #trolleys td { border-width: 0.5pt; padding: 2pt; background: #fff; } #trolleys td[bgcolor='#fffffe'] { border-width: 0; background: #f6f6f6; } #trolleys td.sig font { font-size: 85%; } #trolleys td:first-child { font-weight: bold; } #trolleys thead td:first-child { border-width: 0 0.5pt 0.5pt 0; } #trolleys td[width="30%"] { border-width: 0 0.5pt; } #trolleys thead td[width="30%"] { border-top-width: 0.5pt; } #trolleys td:contains("Name") { border-bottom-width: 0.5pt; } #trolleys font:contains("Signature") { position: relative; top: -4pt; } #trolleys .miscExtras td { border: 0; background: transparent; font-size: 110%; } #trolleys .miscExtras font.fieldValue { font-weight: normal; } /* Packing list header colours */ #headerInfo:contains("pklHead Cream") { background-color: #ffc; color: #000; } #headerInfo:contains("pklHead Grey") { background-color: #eee; color: #000; } #headerInfo:contains("pklHead Yellow") { background-color: #ff0; color: #000; } #headerInfo:contains("pklHead Orange") { background-color: #fa2; color: #000; } #headerInfo:contains("pklHead White") { background-color: #fff; color: #000; } #headerInfo:contains("pklHead Pink") { background-color: #f4b; color: #fff; } #headerInfo:contains("pklHead Green") { background-color: #170; color: #fff; } #headerInfo:contains("pklHead Red") { background-color: #900; color: #fff; } #headerInfo:contains("pklHead Blue") { background-color: #038; color: #fff; } #headerInfo:contains("pklHead Purple") { background-color: #509; color: #fff; } #headerInfo:contains("stripe pklHead") { display:block; background-image: url(img/stripe-dark.png); } #headerInfo:contains("pklHead Pink") font, #headerInfo:contains("pklHead Green") font, #headerInfo:contains("pklHead Red") font, #headerInfo:contains("pklHead Blue") font, #headerInfo:contains("pklHead Purple") font { color: #fff; } /* Item list */ .list { margin-top: 1em; position: relative; } .list td { padding: 1pt 4pt; } .list td:first-child { padding-left: 0; } .list td:last-child, .list tr td:only-child { padding-right: 0; } .list thead td { border-bottom-width: 0.5pt; font-weight: bold; vertical-align: bottom; } .list table { border-bottom-width: 0.5pt; } .list td p { font-size: 80%; font-style: italic; background: transparent; margin: 0; } .list .plant-passport { font-size: 80%; font-style: italic; white-space: nowrap; } .list .barcode font { font-size: 80%; } .list .ean { font-family: eanbarcode; font-size: 100%; white-space: nowrap; line-height: 3cm } .list .eao { font-family: eanbarcode; font-size: 100%; white-space: nowrap; line-height: 3cm } .list .eap { font-family: eanbarcode; font-size: 100%; white-space: nowrap; line-height: 3cm } .list td[bgcolor='#fffffe'] { background: #fff; border-bottom: 0.5pt solid #fff; } .list td.unit { padding-left:0; } .list td.received { padding: 1px 0 0 10px; } .list td.received font { display: block; border-width: 0.5pt; padding: 1pt; font-size:75%; color:#bbb; text-align:center; } .numbered td:nth-child(2) { padding-left: 0; } .numbered td:first-child { background: #fff; border-bottom: 0.5pt solid #fff; padding: 0.5pt 3pt 1pt 0; } .numbered td:first-child font { font-size: 80%; color: #bbb; } .list tr:contains("Subtotal") td { font-weight: bold; background: #fff; border-width: 0.5pt 0; padding-top: 2pt; padding-bottom: 2pt; } .list tr:contains("Subtotal") td font { display: none; } .list tr:contains("Subtotal") td.subtotal font { display: block; font-size:120% !important; } .list td.marked font { display: inline-block; margin: 0 1px 0 -16px; padding-left:16px; background: url(img/star.png) no-repeat 0 -2px; background-image-resolution: 420dpi; } .numbered td.marked font { margin-left: -28px; padding-left: 28px; } .list td.marked font:after { content: "= marked"; font-size: 85%; padding: 3px 13px 0; position: absolute; top: 0; left: 35pt; display: block; background: #fff url(img/star.png) no-repeat 0 2px; background-image-resolution: 500dpi; } .list b.labelAs { display: inline-block; margin: 0 1px 0 -15px; padding-left:15px; background: url(img/tag.png) no-repeat 0 50%; background-image-resolution: 450dpi; } /* Item list section headers */ font.sectHdr { padding-right: 0; } font.sectHdr:contains("Delivery") { font-size: 100% !important; } .list td:first-child font.sectHdr { display: block; padding: 6pt 0 0.3pt 0; font-size: 125%; font-weight: bold; color: #000; border-bottom-width: 0.5pt; } .dlvItems td:first-child font.sectHdr { margin-right:3em; } .numbered td font.sectHdr { margin-left: 1em; } .numbered td:first-child font.sectHdr { margin-left: 0.75em; font-size: 125%; color: #000; border-bottom-width: 0.5pt; } .rsvConf td:first-child font.sectHdr { border-bottom-width:0; } .rsvOrdStat td:first-child font.sectHdr, .stockAvail td:first-child font.sectHdr { margin-right:3em; border-bottom-width:0; } /* Totals */ #total { float: right; margin: 0.66em 0 1em 0; width: 35%; } #total table { border-top-width: 0.5pt; border-bottom: 2pt double #bbb; } #total table td { padding: 2pt 1pt; } #total td:first-child { font-weight: bold; } #total tr:contains("Total due") { border-top-width: 0.5pt; } #total tr:first-child td { font-weight: bold; font-size: 120%; } #total tr:last-child td { font-weight: bold; font-size: 120%; border-top-width: 0.5pt; } /* VAT Summary */ #VAT { float: left; margin-top: 0.66em; padding: 7px; border-width: 1pt; display: none; } #VAT table { width: auto; } #VAT td { padding: 2px 1px 2px 1em; } #VAT td:first-child { padding-left: 1px; } #VAT thead td { font-weight: bold; border-bottom-width: 1pt; } #VAT td#_prisubtotal { border-width: 1px 0; } #VAT td#_prisubtotal font { font-size: 100%; } /* Reserve status & availability */ .rsvOrdStat p.date, .rsvConf p.date { font-style: normal; margin-top: 1em; line-height: 2em; font-size: 133%; background: #f8f8f8 url(img/cal.png) no-repeat 0 0; background-image-resolution:148dpi; } .rsvOrdStat span.cal, .rsvConf span.cal { display:inline-block; font-size: 94%; color:#666; padding:0 0.5em; position:relative; top:0.28em; margin-right:0.3em;} .list p.colln { font-style: normal; font-size: 100%; font-weight: bold; padding-top: 0.8em; border-bottom-width: 0.5pt; } .list p.colln span { font-size:90%; font-weight:normal; } .list .invoice p.colln { margin-right: -5px; } .list td.reserved:first-child font { position: relative; left: -13px; } .list td.reserved:first-child font:before { content: "R"; color: #050; font-size: 90%; letter-spacing: 5px; font-weight: bold; } .stockAvail caption { font-size: 200%; margin: 1.5em 0 0.5em 0; border-bottom: 2px solid #666; } /* Packing list */ .sectionQty thead td { border-bottom: 1px solid #ccc; font-weight: bold; vertical-align: bottom; } .sectionQty td { padding: 3px 2px; } .sectionQty { margin: 2em auto; border-top: 1px solid #ccc; border-bottom: 2px solid #ccc; } .sectionQty td font { font-size: 105%; } /* 14 day letter */ .letter14 td { padding-top: 1em; font-size: 113%; } .letter14 td.amount { text-align: center; font-weight: bold; font-size: 125%; } .letter14 .dearSir { padding-top: 3em; } /* Special instructions */ .instrHead { margin-top: 3em; background: #f4f4f4; border-radius: 10pt 10pt 0 0; } .instrHead td { vertical-align: bottom; padding-bottom: 1pt; } .instrHead .sectHdr .fieldValue { font-size: 133%; font-weight: bold; padding-right: 2em; } .instrOrd { font-size: 110%; border-width: 0.5pt 0; } .instrOrd td { padding: 1.5pt 0; } .instrOrd p { margin: 0; display: inline; } .instr.list { margin: 0; border-width: 0.5pt 0 1pt; } .specInstr thead td:first-child font { display:none; } .specInstr font b { font-size:110%; } /* Plant catalog */ .catalog tr { height: 1%; } .catalog tr.spacer { height: auto; background: #fff; } .catalog h1 { border-bottom: 2pt solid #ccc; margin: 0 0 -2pt 0; page-break-before: always; } .catalog h1:first-of-type { page-break-before: avoid; } .catalog tbody.genus { page-break-inside: avoid; } .catalog tbody.genus:first-of-type { page-break-inside: auto; } .catalog h2 { margin: 4.5pt 0 0 0; font-size: 125%; white-space: nowrap; } .catalog table.family td { z-index: 10; } .catalog #pageBody thead td { color: #aaa; font-size: 90%; text-align: center; border: 0; } .catalog #pageBody thead td font { display: none; } .catalog #pageBody thead td b { font-weight: normal; position: relative; top: 2.2em; z-index: -1; } .catalog .genusHdr { padding-left:0 } .catalog .sectHdr { border: 0; padding: 0; } .catalog .price { text-align: right; font-size: 133%; } .catalog .debug { font-size: 70%; color: #ccc; font-weight: normal; margin-left: 3em; display: inline-block; } .catalog .genusImg { width: 1%; vertical-align: top; padding: 0; } .catalog .genus img { margin: 7.5pt 5pt 0 0; border: 1pt solid #bbb; } .catalog .genus img[src*="generic"] { border: 1pt solid #eee; } .catalog .Shrub .itemPrice, .catalog .Tree .itemPrice, .catalog .Tree .height, .catalog .Hedge .maxSize, .catalog .Sundry .maxSize, .catalog .Sundry .height { display: none; } .catalog tbody, .catalog colgroup, .catalog table { border: 0; } .catalog .genusHdr, .catalog .colHdr, .catalog .price { vertical-align: bottom; border-bottom-width: 0.5pt; } .catalog table[rules="groups"], table.tree td.height, .catalog tbody:empty, .catalog td.plantImg { display: none; } /* Other stuff */ .ordHist { margin-top: 2em; } .ordHist caption { border-bottom: 1px solid #ccc; padding-bottom: 0.5pt; } #payableTo, #misc { clear: both; margin-top: 3em; float: left; } #payableTo, #misc .right { float: right; text-align: right; } #remarks { clear: both; margin-bottom: 2em; } #remarks .remarks td { padding-bottom: 0.3em; } #BD7 { padding-top: 1em; } .dlvItems .plant-passport, .rsvOrdStat .plant-passport, .stockAvail .plant-passport { display: none; } caption { text-align: left; padding-top: 1em; font-size:120%; font-weight: bold; } font.percent:after { content: '%'; } .GBP font:before { content: "\00A3"; } .EUR font:before { content: "\20AC"; } font.hideMe, td.hideMe font { display: none; } .cf:before, .cf:after { content:""; display:table; } /* Clearfix */ .cf:after { clear:both; } .cf { *zoom:1; } /* For IE 6/7 (trigger hasLayout) */ /*.dlvItems tr:contains("Delivery") font { color: #666; }*/