@font-face { font-family: 'Open Sans'; src: url('opensans.ttf') format('truetype'); } @media print { body { -webkit-print-color-adjust: exact; } .sheet { width: 100%; page-break-after: always; } #topbar { display: none; } } @media screen { body { background-color: #EEE; padding-top: 3.9em; } .sheet { width: 210mm; height: 297mm; background-color: white; margin: 10mm auto; box-shadow: 0 1mm 1mm #CCC; padding: 20mm; } #topbar { position: fixed; top: 0; left: 0; right: 0; height: 4em; background-color: #009688; z-index: 100; box-shadow: 0 .1em .1em #AAA; } #topbar > button { float: right; background-color: transparent; color: white; padding: .4em; z-index: 100; border: none; cursor: pointer; font-size: 1.15em; height: 100%; padding: 0 1em; } #topbar > button:hover { background-color: rgba(1, 1, 1, 0.2); } } * { font-family: 'Open Sans'; } body { position: relative; margin: 0; width: 100%; z-index: -2; } .sheet { position: relative; overflow: hidden; box-sizing: padding-box; /* page-break-after: always;*/ } /* Widgets */ .htk-grid { border-collapse: collapse; width: 100%; margin: 0 auto; padding: 0; } .htk-grid > thead > tr { border-bottom: 1px solid #333; height: 10mm; } .htk-grid > thead th { text-align: left; font-weight: normal; } .htk-grid tr { height: 2em; } .htk-grid > thead th, .htk-grid td { padding-left: 3mm; } .htk-grid .cell-spin { text-align: right; }