/** http://weasyprint.org/samples/CSS21-print.css **/
@page {
    margin: 3cm 2cm;
    padding-left: 1.5cm;
    @top-center {
        content: "Introduction to CSS 2.1";
        width: 100%;
        vertical-align: bottom;
        border-bottom: .5pt solid;
        margin-bottom: .7cm;
    }
    @bottom-right {
        font-size: 80%;
        content: "Page " counter(page) " of " counter(pages);
    }
    @left-top {
        content: "W3C Recommendation"; font: .5cm/1.5 Fontin Sans;
        background: #005a9c; color: #fff; text-align: right;
        padding-right: 2em; height: 1.5em; width: 10cm;
        transform-origin: 100% 0;
        transform: rotate(-90deg);
    }
}
html, body { font: 12pt/1.25 Fontin, serif !important; -weasy-hyphens: auto }
body { text-align: justify; padding: 0 !important;
       background: none !important; }
hr.navbar { display: none }
h1 { page-break-before: auto !important; -weasy-bookmark-level: none;
     margin-top: 0 !important; }
h1, h2, h3, h4 { font-family: inherit !important }


/** http://www.princexml.com/howcome/2012/magic/prince8.html **/
@import url(http://fonts.googleapis.com/css?family=Crimson+Text:400,600italic,600,400italic);
@import url(http://www.princexml.com/fonts/league/index.css);

@page {
  size: a4 portrait;
  marks: crop cross;
  margin: 8mm 35mm 10mm 10mm;

  @right-top {
    content: flow(side);
    width: 2cm;
  }
}

@page :first {
  size: a4 landscape;
  margin: 16mm 16mm 0;
  background: url(blue-sky-m.jpg) #fff799;
  prince-background-image-resolution: 50dpi;
  background-position: -200px -5px;
  prince-bleed: 5px;
  @right-top { content: none; }
}


html, body, div, h1, h2, h3, h4, p, blockquote, ul, ol, li, pre { 
  margin: 0; padding: 0 }

li { margin-left: 1.5em }

html { 
  font: 13pt 'Crimson Text', serif;
  hyphens: auto;
  prince-text-replace: "'" "\2019"; 
}

#header {
  text-align: center;
  background: rgba(234, 245, 35, 0.4);
  padding: 1em;
  color: white;
  font-size: 1.3em;
  border-radius: 0.5em;
}

h1 { 
  font: 82pt 'League Gothic', sans-serif;
  padding: 3px 0 10px;
  border-bottom: thin solid;
}

p.ingress { 
  padding-top: 0.4em;
  margin-top: 0.4em;
  font-size: 1.3em;
}

h3 { 
  flow: static(side);
  transform: rotate(90deg); 
  font: 100pt 'Crimson Text', sans-serif;
  color: #576b84;
  color: #D68D45;
  color: #9eae67;
}

title { string-set: title content() }

div.points {
  margin: 1em 0 1em 0;
  padding: 1em 0.8em 1em 0.8em;
  -moz-column-width: 25em;
  -webkit-columns: 25em;
  columns: 25em;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.5em;
}

div.point {
  padding: 0.5em;
  counter-increment: point;
  break-inside: avoid;
}

h2 { 
  font: 3em 'League Gothic', serif;
  display: table-row;
}


h2:before { 
  content: counter(point);  /* browsers will see this */
  content: prince-script(mycounterstyle, counter(point))  ":"; /* only Prince will recognize this */
  color: #D68D45;
  text-align: right;
  padding: 0 0.3em 0.2em 0;
  display: table-cell;
}

.point p { display: table-row; text-align: justify }

.point img { float: right; width: 260px; margin: 0 0 0 0.8em }

.point:nth-child(even) { font-style: italic;  }

#transforms img { 
  float: left; width: 120px; 
  margin: 0 0.8em 0 0; 
}

.points p:before { content: ""; font-style: italic; display: table-cell; padding: 0 0.8em 0 0 }
p.kontakt { display: none }

#spanning div { columns: 2; margin: 0 2em 0 4em }

.spanner { 
  column-span: all; 
  background: rgba(234, 245, 35, 0.4); 
  font-size: 2em; 
  font-style: italic;  
  padding: 0.3em; 
  border-radius: 5px; 
  text-align: center;
}

#toc {
  padding: 1em 1em 0 5em;
  columns: 2;
}

#toc a { 
  display: block;
  text-decoration: none;
  color: black;
}

#toc a:after { 
  content: leader('.') target-counter(attr(href),page);
}

#noprince {
  text-align: center;
  margin: 1em;
  display: none;
}

@media screen {
  #noprince { display: block; background: white }
  #header { 
    background-image: url(blue-sky-m.jpg);
    background-size: 100%;
    color: black;
  }
  #prince8 { display: none }
  body { margin: 3em }
}