Commit c5380765 authored by julien's avatar julien
Browse files

cross mark and trim

parent 76659db4
.paged-marks > div {
/* the offset is the location is the space between the crop mark and the page */
--offset: 2.11mm;
position: absolute;
background: transparent;
content: " ";
width: calc(var(--bleed) + 1px);
height: calc(var(--bleed) + 1px);
}
.paged_crop-tlv {
top: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
height: 10px;
}
.paged_crop-tlh {
left: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trv {
top: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
bottom: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
}
.paged_crop-blh {
left: calc(var(--offset) * -1);
bottom: 0;
border-top: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
bottom: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
bottom: 0;
right: calc(var(--offset) * -1);
border-top: 1px solid var(--cropmark-color);
}
\ No newline at end of file
.paged-marks > div {
/* the offset is the location is the space between the crop mark and the page */
--offset: 2.11mm;
position: absolute;
background: transparent;
content: " ";
width: calc(var(--bleed) + 1px);
height: calc(var(--bleed) + 1px);
}
.paged_crop-tlv {
top: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
height: 10px;
}
.paged_crop-tlh {
left: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trv {
top: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--offset) * -1);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
bottom: calc(var(--offset) * -1);
border-right: 1px solid var(--cropmark-color);
}
.paged_crop-blh {
left: calc(var(--offset) * -1);
bottom: 0;
border-top: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
bottom: calc(var(--offset) * -1);
right: 0;
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
bottom: 0;
right: calc(var(--offset) * -1);
border-top: 1px solid var(--cropmark-color);
}
\ No newline at end of file
:root {
--width: 100mm;
--height: 150mm;
--width: 210mm;
--height: 297mm;
--margin-top: 1.5cm;
--margin-right: 1cm;
--margin-bottom: 3cm;
--margin-left: 2cm;
--page-count: 0;
/* bleed and cropmarks */
/* amount of bleed */
--bleed: 20mm;
--bleed: 3mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
--offset: 2.11mm;
/* cropmarks lengh */
--crop-length: 3in;
/* override cropmarks */
--bleed: 6mm;
--cropmark-color: white;
--offset: 3mm;
--crop-length: 5mm;
--trim: 5mm;
/* --cross-color: black; */
}
@page {
size: 100mm 150mm;
size: 210mm 297mm;
margin: 0;
}
......@@ -29,10 +35,10 @@
overflow: hidden;
position: relative;
display: grid;
width: calc(var(--width) + var(--bleed) + var(--bleed));
height: calc(var(--height) + var(--bleed) + var(--bleed));
grid-template-columns: [bleed-left] var(--bleed) [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right) [bleed-left] var(--bleed);
grid-template-rows: [bleed-top] var(--bleed) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed);
width: calc(var(--width) + var(--bleed) + var(--bleed) + var(--trim) + var(--trim));
height: calc(var(--height) + var(--bleed) + var(--bleed) + var(--trim) + var(--trim));
grid-template-columns: [trim-left] var(--trim) [bleed-left] var(--bleed) [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right) [bleed-right] var(--bleed);
grid-template-rows: [trim-top] var(--trim) [bleed-top] var(--bleed) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed) [trim-bottom] var(--trim);
}
.pagedjs_page * {
......@@ -155,32 +161,17 @@
counter-reset: pages var(--page-count);
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left-corner,
.pagedjs_page .pagedjs_margin-bottom-right-corner,
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-bottom-left,
.pagedjs_page .pagedjs_margin-bottom-right,
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_margin-right-middle,
.pagedjs_margin-left-middle {
.pagedjs_page .pagedjs_margin-top-left-corner, .pagedjs_page .pagedjs_margin-top-right-corner, .pagedjs_page .pagedjs_margin-bottom-left-corner, .pagedjs_page .pagedjs_margin-bottom-right-corner, .pagedjs_page .pagedjs_margin-top-left, .pagedjs_page .pagedjs_margin-top-right, .pagedjs_page .pagedjs_margin-bottom-left, .pagedjs_page .pagedjs_margin-bottom-right, .pagedjs_page .pagedjs_margin-top-center, .pagedjs_page .pagedjs_margin-bottom-center, .pagedjs_page .pagedjs_margin-top-center, .pagedjs_page .pagedjs_margin-bottom-center, .pagedjs_margin-right-middle, .pagedjs_margin-left-middle {
display: flex;
align-items: center;
}
.pagedjs_margin-right-top,
.pagedjs_margin-left-top {
.pagedjs_margin-right-top, .pagedjs_margin-left-top {
display: flex;
align-items: flex-top;
}
.pagedjs_margin-right-bottom,
.pagedjs_margin-left-bottom {
.pagedjs_margin-right-bottom, .pagedjs_margin-left-bottom {
display: flex;
align-items: flex-end;
}
......@@ -222,28 +213,15 @@
}
*/
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left,
.pagedjs_page .pagedjs_margin-bottom-right-corner {
.pagedjs_page .pagedjs_margin-top-left, .pagedjs_page .pagedjs_margin-top-right-corner, .pagedjs_page .pagedjs_margin-bottom-left, .pagedjs_page .pagedjs_margin-bottom-right-corner {
text-align: left;
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-bottom-left-corner,
.pagedjs_page .pagedjs_margin-bottom-right {
.pagedjs_page .pagedjs_margin-top-left-corner, .pagedjs_page .pagedjs_margin-top-right, .pagedjs_page .pagedjs_margin-bottom-left-corner, .pagedjs_page .pagedjs_margin-bottom-right {
text-align: right;
}
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_page .pagedjs_margin-left-top,
.pagedjs_page .pagedjs_margin-left-middle,
.pagedjs_page .pagedjs_margin-left-bottom,
.pagedjs_page .pagedjs_margin-right-top,
.pagedjs_page .pagedjs_margin-right-middle,
.pagedjs_page .pagedjs_margin-right-bottom {
.pagedjs_page .pagedjs_margin-top-center, .pagedjs_page .pagedjs_margin-bottom-center, .pagedjs_page .pagedjs_margin-left-top, .pagedjs_page .pagedjs_margin-left-middle, .pagedjs_page .pagedjs_margin-left-bottom, .pagedjs_page .pagedjs_margin-right-top, .pagedjs_page .pagedjs_margin-right-middle, .pagedjs_page .pagedjs_margin-right-bottom {
text-align: center;
}
......@@ -251,10 +229,7 @@
width: 100%;
}
.pagedjs_pages .pagedjs_margin-left .pagedjs_margin-content::after,
.pagedjs_pages .pagedjs_margin-top .pagedjs_margin-content::after,
.pagedjs_pages .pagedjs_margin-right .pagedjs_margin-content::after,
.pagedjs_pages .pagedjs_margin-bottom .pagedjs_margin-content::after {
.pagedjs_pages .pagedjs_margin-left .pagedjs_margin-content::after, .pagedjs_pages .pagedjs_margin-top .pagedjs_margin-content::after, .pagedjs_pages .pagedjs_margin-right .pagedjs_margin-content::after, .pagedjs_pages .pagedjs_margin-bottom .pagedjs_margin-content::after {
display: block;
}
......@@ -270,8 +245,7 @@
initial-letter: unset;
}
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]>*::first-letter,
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]::first-letter {
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]>*::first-letter, .pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]::first-letter {
color: unset;
font-size: unset;
font-weight: unset;
......@@ -283,13 +257,11 @@
margin: unset;
}
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-to]:after,
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-to]::after {
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-to]:after, .pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-to]::after {
content: unset;
}
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]:before,
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]::before {
.pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]:before, .pagedjs_pages>.pagedjs_page>.pagedjs_area>div [data-split-from]::before {
content: unset;
}
......@@ -368,74 +340,133 @@ img {
/* crop marks are added to the page content as it wouldn't */
.paged-marks>div {
.paged-marks-crop>div {
/* the offset is the location is the space between the crop mark and the page */
position: absolute;
background: transparent;
content: " ";
}
.paged_crop-tlv {
left: calc(var(--bleed));
top: calc(var(--bleed) - var(--offset) - var(--crop-length));
left: calc(var(--bleed) + var(--trim));
top: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
height: var(--crop-length);
width: 1px;
}
.paged_crop-trv {
right: calc(var(--bleed));
top: calc(var(--bleed) - var(--offset) - var(--crop-length));
right: calc(var(--bleed) + var(--trim));
top: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-tlh {
left: calc(var(--bleed) - var(--offset) - var(--crop-length));
top: calc(var(--bleed));
left: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
top: calc(var(--bleed) + var(--trim));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-trh {
right: calc(var(--bleed) - var(--offset) - var(--crop-length));
top: calc(var(--bleed));
right: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
top: calc(var(--bleed) + var(--trim));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-blv {
left: calc(var(--bleed));
bottom: calc(var(--bleed) - var(--offset) - var(--crop-length));
left: calc(var(--bleed) + var(--trim));
bottom: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
height: var(--crop-length);
width: 1px;
}
.paged_crop-blh {
left: calc(var(--bleed) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed));
left: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed) + var(--trim));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.paged_crop-brv {
right: calc(var(--bleed));
bottom: calc(var(--bleed) - var(--offset) - var(--crop-length));
right: calc(var(--bleed) + var(--trim));
bottom: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.paged_crop-brh {
right: calc(var(--bleed) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed));
right: calc(var(--bleed) + var(--trim) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed) + var(--trim));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
\ No newline at end of file
}
/* crossmark */
/* add the cross mark as background image */
.paged-marks-cross div {
background: url(../img/Common_Registration_MarkClean.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 25px;
}
.paged-marks-cross div {
position: absolute;
display: block;
/* background: black; */
}
.paged_cross-top {
background: green;
width: calc( var(--width) + (var(--bleed) * 2) + (var(--trim) * 2));
height: calc(var(--trim) + var(--bleed));
left:0;
top: 0;
}
.paged_cross-bottom {
background: red;
width: calc( var(--width) + (var(--bleed) * 2) + (var(--trim) * 2));
height: calc(var(--trim) + var(--bleed));
left:0;
bottom: 0;
}
.paged_cross-right {
background: yellow;
height: calc( var(--height) + (var(--bleed) * 2) + (var(--trim) * 2));
width: calc(var(--trim) + var(--bleed));
left:0;
bottom: 0;
}
.paged_cross-left {
background: orange;
height: calc( var(--height) + (var(--bleed) * 2) + (var(--trim) * 2));
right: 0;
width: calc(var(--trim) + var(--bleed));
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32.537px" height="32.537px" viewBox="0.104 0.104 32.537 32.537" enable-background="new 0.104 0.104 32.537 32.537"
xml:space="preserve">
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M24.508,16.373
c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373z"/>
<path fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path d="M24.508,16.373c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="8.239" y1="16.373" x2="24.508" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="8.239" x2="16.373" y2="24.508"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32.537px" height="32.537px" viewBox="0.104 0.104 32.537 32.537" enable-background="new 0.104 0.104 32.537 32.537"
xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path fill="none" stroke="#FFFFFF" stroke-width="3.3893" stroke-miterlimit="10" d="M24.508,16.373
c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373z"/>
<path fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" d="M29.931,16.373
c0,7.489-6.068,13.56-13.558,13.56c-7.483,0-13.557-6.072-13.557-13.56c0-7.486,6.074-13.554,13.557-13.554
C23.862,2.819,29.931,8.887,29.931,16.373z"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="0.104" y1="16.373" x2="32.642" y2="16.373"/>
<line fill="none" stroke="#000000" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="0.104" x2="16.373" y2="32.642"/>
<path d="M24.508,16.373c0,4.496-3.638,8.135-8.135,8.135c-4.491,0-8.135-3.638-8.135-8.135c0-4.489,3.644-8.135,8.135-8.135
C20.869,8.239,24.508,11.884,24.508,16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="8.239" y1="16.373" x2="24.508" y2="16.373"/>
<line fill="none" stroke="#FFFFFF" stroke-width="0.6778" stroke-miterlimit="10" x1="16.373" y1="8.239" x2="16.373" y2="24.508"/>
</svg>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta lang="en-US">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<!-- <link href="css/interface.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/bleeds.css" rel="stylesheet"> -->
<style>
/* size can take calc in chromium */
:root {
}
@page {
size: calc(100mm + 1in) 400mm;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate nobis eligendi, fugiat pariatur fugit iste quos commodi voluptatibus. Perferendis totam natus alias delectus perspiciatis nulla quasi, blanditiis quaerat animi et?</p>
</body>
</html>
\ No newline at end of file
......@@ -18,17 +18,32 @@
<body>
<div class="pagedjs_pages">
<div class="pagedjs_page pagedjs_first_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
<div class="paged-marks">
<div class="paged_crop-tlv"></div>
<div class="paged_crop-tlh"></div>
<div class="paged_crop-blv"></div>
<div class="paged_crop-blh"></div>
<div class="paged_crop-trv"></div>
<div class="paged_crop-trh"></div>
<div class="paged_crop-brv"></div>
<div class="paged_crop-brh"></div>
</div>
<div class="paged-marks-crop">
<div class="paged_crop-tlv"></div>
<div class="paged_crop-tlh"></div>
<div class="paged_crop-blv"></div>
<div class="paged_crop-blh"></div>
<div class="paged_crop-trv"></div>
<div class="paged_crop-trh"></div>
<div class="paged_crop-brv"></div>
<div class="paged_crop-brh"></div>
</div>
<div class="paged-marks-cross">
<div class="paged_cross-top">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-bottom">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-left">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-right">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
</div>
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner">
<div class="pagedjs_margin-content"></div>
......@@ -103,7 +118,7 @@
</div>
</div>
</div>
<div class="pagedjs_page pagedjs_first_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
<div class="pagedjs_page pagedjs_left_page pagedjs_named_page pagedjs_cover_page" data-page-number="1">
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner">
<div class="pagedjs_margin-content"></div>
......
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta lang="en-US">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/interface.css" rel="stylesheet">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/main.css" rel="stylesheet">
</head>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<body>