ola4doc/sys/css/main.css

<style type="text/css">
@font-face {
  font-family: 'ola';
  src: url("fonts/ola/olasans-webfont.eot");
  src: url("fonts/ola/olasans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/ola/olasans-webfont.woff2") format("woff2"), url("fonts/ola/olasans-webfont.woff") format("woff"), url("fonts/ola/olasans-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 17, 2016 */
@font-face {
  font-family: 'vollkorn';
  src: url("fonts/volkorn/vollkorn-bold-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'vollkorn';
  src: url("fonts/volkorn/vollkorn-bolditalic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bolditalic-webfont.woff") format("woff");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'vollkorn';
  src: url("fonts/volkorn/vollkorn-italic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'vollkorn';
  src: url("fonts/volkorn/vollkorn-regular-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: 'vollkorn',sans-serif;
  max-width: 100%;
  height: 100%;
  margin: 30px 0;
  font-size: 14px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'ola',sans-serif;
  margin: 0; }

#main h1, #main h2 {
  border: 2px solid #000;
  padding: 5px;
  display: inline-block;
  position: absolute; }

#main h1 {
  padding: 5px 1rem;
  top: 100px;
  white-space: nowrap; }

#main h2 {
  top: 0;
  white-space: nowrap;
  padding: 5px 1rem;
  font-size: 1rem; }

p {
  font-size: 1.5em; }

ul {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  max-width: 100%; }

code {
  border: 1px solid #000;
  padding: 5px; }

header#header {
  width: 18%;
  min-width: 200px;
  position: fixed;
  padding: 0 1rem; }
  header#header h1 {
    font-size: 1rem;
    border-bottom: 2px solid #000;
    margin-bottom: 1em; }
  header#header #menu li p {
    margin-top: 0;
    margin-bottom: 0.2em;
    font-size: 1em; }
  header#header #menu li a {
    color: #000; }

div.user {
  position: relative;
  width: 55%;
  max-width: 800px;
  margin: 0 auto 5rem auto; }
  div.user header {
    min-height: 200px; }
  div.user .content {
    border: 2px solid #000;
    padding: 1rem;
    width: 100%;
    margin-bottom: 2rem; }
  div.user section.images ul {
    width: 105%; }
    div.user section.images ul li {
      line-height: 0;
      margin: 1rem 0;
      border: 2px solid #000; }
      div.user section.images ul li img {
        max-width: 100%;
        width: 100%; }
  div.user p img {
    border: none; }

@media print {
  @page {
    margin: 1cm;
    size: A4; }
  div.user {
    width: 17cm;
    margin-top: 2cm;
    page-break-after: always;
    max-width: 19cm; }
    div.user p, div.user code {
      page-break-inside: avoid; }
    div.user section.images ul li {
      page-break-inside: avoid;
      margin-top: 1cm; } }

</style>