/**************************************************** * Fonts ****************************************************/ @font-face { font-family: Handwriting; src: url("fnt/JOURNAL.TTF") format("truetype"); } /**************************************************** * Page Style ****************************************************/ @page { /* Page Sizes */ size: A4 landscape; -ro-media-size: SRA4 landscape; bleed: 3mm; -ro-crop-size: trim; /* Page Layout */ margin: -3mm; padding: 0; /* Printer Marks */ marks: cross crop -ro-bleed; -ro-colorbar-left-top: gradient-tint; -ro-colorbar-right-top: progressive-color; -ro-colorbar-left-bottom: cmyk(100%, 0%, 0%, 0%) cmyk(75%, 0%, 0%, 0%) cmyk(50%, 0%, 0%, 0%) cmyk(25%, 0%, 0%, 0%) cmyk(0%, 100%, 0%, 0%) cmyk(0%, 75%, 0%, 0%) cmyk(0%, 50%, 0%, 0%) cmyk(0%, 25%, 0%, 0%); -ro-colorbar-right-bottom: cmyk(0%, 0%, 25%, 0%) cmyk(0%, 0%, 50%, 0%) cmyk(0%, 0%, 75%, 0%) cmyk(0%, 0%, 100%, 0%) cmyk(0%, 0%, 0%, 25%) cmyk(0%, 0%, 0%, 50%) cmyk(0%, 0%, 0%, 75%) cmyk(0%, 0%, 0%, 100%); } #page1, #page2 { width: 297mm; height: 210mm; padding: 3mm; } /**************************************************** * General Style ****************************************************/ html, body { font-family: sans-serif; margin: 0; padding: 0; hyphens: auto; hyphenate-before: 3; hyphenate-after: 3; } a { color: inherit; text-decoration: none; font-style: italic; } p, li, td { font-size: 3.5mm; line-height: 1.5; text-align: justify; color: inherit; margin: 0; } :-ro-matches(p, h1, h2, h3) + p { margin-top: 2mm; } h1 { font-family: Handwriting; font-weight: normal; font-size: 10mm; letter-spacing: 0.5mm; margin: 0; margin-top: -2mm; color: inherit; } /**************************************************** * Page Layout ****************************************************/ /* First Page */ #page1 { break-after: page; } /* First Fold */ #fold1top { position: absolute; top: 0mm; left: 0; margin: 0; padding: 6mm; padding-left: 9mm; padding-top: 9mm; width: 86mm; height: 56mm; background-color: -ro-spot("Pantone 4735 C", 1, cmyk(0%, 16%, 28%, 28%)); } #fold1top img { max-width: 100%; max-height: 100%; } #fold1bottom { position: absolute; top: 71mm; left: 0; margin: 0; padding: 6mm; padding-left: 9mm; padding-bottom: 9mm; width: 86mm; height: 130mm; color: cmyk(0%, 0%, 10%, 0%); background-color: -ro-spot("Pantone 404 C", 1, cmyk(0%, 5%, 15%, 59%)); } #fold1bottom h1 { margin-top: -4mm; } /* Second Fold */ #fold2 { position: absolute; top: 0mm; left: 101mm; margin: 0; padding: 0mm; width: 101mm; height: 216mm; background-image: url("img/hermitsrest.tif"); background-size: auto 100%; background-position: right center; text-align: center; color: white; } #fold2 h1 { font-family: Handwriting; font-weight: normal; font-size: 25mm; margin: 0; margin-top: 165mm; color: cmyk(0%, 15%, 60%, 20%); } #fold2 h2 { font-family: serif; font-weight: normal; font-size: 8mm; margin: 0; margin-bottom: 4mm; letter-spacing: 6mm; text-transform: uppercase; margin-left: 6mm; color: cmyk(5%, 5%, 5%, 5%); } /* Third Fold */ #fold3top { position: absolute; top: 0mm; left: 202mm; margin: 0; padding: 6mm; padding-right: 9mm; padding-top: 9mm; width: 86mm; height: 130mm; background-color: -ro-spot("Pantone 7507 C", 1, cmyk(0%, 13%, 37%, 4%)); } #fold3top h1 { margin-top: -4mm; } #fold3bottom { position: absolute; top: 145mm; left: 202mm; margin: 0; padding: 6mm; padding-right: 9mm; padding-bottom: 9mm; width: 86mm; height: 56mm; color: cmyk(0%, 0%, 60%, 80%); background-color: -ro-spot("Pantone 7521 C", 1, cmyk(0%, 19%, 42%, 22%)); } #fold3bottom img { max-width: 100%; max-height: 100%; } /* Second Page */ #page2 { color: cmyk(0%, 0%, 10%, 0%); background-color: -ro-spot("Pantone 404 C", 1, cmyk(0%, 5%, 15%, 59%)); } /* Second Page */ /* Spread over all Folds */ #spread { position: absolute; top: 0mm; left: 0mm; margin: 0; padding: 0mm; width: 303mm; height: 65mm; background-image: url("img/cedarridge.tif"); background-size: auto 198%; background-position: left center; background-repeat: no-repeat; } /* First Fold */ #fold4top { position: absolute; top: 65mm; left: 0mm; margin: 0; padding: 6mm; padding-left: 9mm; width: 187mm; height: 54mm; } #fold4top h1 { margin-top: -4mm; } #fold4bottom { position: absolute; top: 131mm; left: 0mm; margin: 0; padding: 6mm; padding-bottom: 9mm; padding-left: 9mm; width: 86mm; height: 70mm; color: cmyk(0%, 0%, 60%, 80%); background-color: -ro-spot("Pantone 7507 C", 1, cmyk(0%, 13%, 37%, 4%)); } #fold4bottom p { width: 89%; } /* Info Box between First and Second Fold */ #infoBox { position: absolute; left: 88mm; top: 123mm; width: 51mm; height: 51mm; padding: 3mm; color: cmyk(0%, 0%, 10%, 0%); background-color: -ro-spot("Pantone 4635 C", 1, cmyk(0%, 49%, 77%, 41%)); transform: rotate(-10deg); border: 1.5mm solid -ro-spot("Pantone 7507 C", 1, cmyk(0%, 13%, 37%, 4%)); border-radius: 30mm; } #infoBox h2 { font-family: Handwriting; font-weight: normal; font-size: 10mm; letter-spacing: 0.5mm; margin: 0; margin-top: 3.5mm; color: inherit; } #infoBox :-ro-matches(h2, p) { text-align: center !important; } #infoBox p { font-size: 3.5mm; margin: 1mm auto ; width: 83%; } #infoBox a { color: inherit; font-style: italic; } /* Second Fold */ #fold5bottom { position: absolute; top: 131mm; left: 101mm; margin: 0; padding: 6mm; padding-bottom: 9mm; width: 89mm; height: 70mm; background-image: url("img/cedarridge.tif"); background-size: auto 100%; background-position: top left 85%; } /* Third Fold */ #fold6top { position: absolute; top: 65mm; left: 202mm; margin: 0; padding: 6mm; padding-right: 9mm; width: 86mm; height: 84mm; color: cmyk(10%, 10%, 85%, 80%); background-color: -ro-spot("Pantone 4735 C", 1, cmyk(0%, 16%, 28%, 28%)); } #fold6top h1 { margin-top: -4mm; } #fold6bottom { position: absolute; top: 160mm; left: 202mm; margin: 0; padding: 6mm; padding-right: 9mm; padding-bottom: 6mm; width: 86mm; height: 39mm; color: cmyk(0%, 0%, 10%, 0%); } #fold6bottom h1 { font-size: 8mm; margin-top: -4mm; margin-bottom: 1mm; } #fold6bottom p { font-size: 3mm; margin: 1mm 0; line-height: 1.25; } #fold6bottom p:last-child { margin-bottom: 0; } /**************************************************** * Preferences ****************************************************/ @-ro-preferences { page-layout: 1 page; initial-zoom: fit-page; }