1 @media print {

     2   @page { margin: 0; }

     3   body { margin: 1.6cm; }

     4 }

     5 

     6 

     7 body {

     8   font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;

     9 }

    10 

    11 /* It's supposed to look like a tree diagram */

    12 .tree, .tree ul, .tree li {

    13     list-style: none;

    14     margin: 0;

    15     padding: 0;

    16     position: relative;

    17 }

    18 

    19 .tree {

    20     margin: 0 0 1em;

    21     text-align: center;

    22 }

    23 .tree, .tree ul {

    24     display: table;

    25 }

    26 .tree ul {

    27   width: 100%;

    28 }

    29     .tree li {

    30         display: table-cell;

    31         padding: .5em 0;

    32         vertical-align: top;

    33     }

    34         /* _________ */

    35         .tree li:before {

    36             outline: solid 1px #666;

    37             content: "";

    38             left: 0;

    39             position: absolute;

    40             right: 0;

    41             top: 0;

    42         }

    43         .tree li:first-child:before {left: 50%;}

    44         .tree li:last-child:before {right: 50%;}

    45 

    46         .tree code, .tree span {

    47             border: solid .1em #666;

    48             border-radius: .2em;

    49             display: inline-block;

    50             margin: 0 .2em .5em;

    51             padding: .2em .5em;

    52             position: relative;

    53         }

    54         /* If the tree represents DOM structure */

    55         .tree code {

    56             font-family: monaco, Consolas, 'Lucida Console', monospace;

    57         }

    58 

    59             /* | */

    60             .tree ul:before,

    61             .tree code:before,

    62             .tree span:before {

    63                 outline: solid 1px #666;

    64                 content: "";

    65                 height: .5em;

    66                 left: 50%;

    67                 position: absolute;

    68             }

    69             .tree ul:before {

    70                 top: -.5em;

    71             }

    72             .tree code:before,

    73             .tree span:before {

    74                 top: -.55em;

    75             }

    76 

    77 /* The root node doesn't connect upwards */

    78 .tree > li {margin-top: 0;}

    79     .tree > li:before,

    80     .tree > li:after,

    81     .tree > li > code:before,

    82     .tree > li > span:before {

    83       outline: none;

    84     }

    85 

    86 

    87 /* Create two equal columns that floats next to each other */

    88 .column {

    89   float: left;

    90   width: 40%;

    91   padding: 10px;

    92 }

    93 

    94 /* Clear floats after the columns */

    95 .row:after {

    96   content: "";

    97   display: table;

    98   clear: both;

    99 }