1 body {

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

     3 }

     4 

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

     6 .tree, .tree ul, .tree li {

     7     list-style: none;

     8     margin: 0;

     9     padding: 0;

    10     position: relative;

    11 }

    12 

    13 .tree {

    14     margin: 0 0 1em;

    15     text-align: center;

    16 }

    17 .tree, .tree ul {

    18     display: table;

    19 }

    20 .tree ul {

    21   width: 100%;

    22 }

    23     .tree li {

    24         display: table-cell;

    25         padding: .5em 0;

    26         vertical-align: top;

    27     }

    28         /* _________ */

    29         .tree li:before {

    30             outline: solid 1px #666;

    31             content: "";

    32             left: 0;

    33             position: absolute;

    34             right: 0;

    35             top: 0;

    36         }

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

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

    39 

    40         .tree code, .tree span {

    41             border: solid .1em #666;

    42             border-radius: .2em;

    43             display: inline-block;

    44             margin: 0 .2em .5em;

    45             padding: .2em .5em;

    46             position: relative;

    47         }

    48         /* If the tree represents DOM structure */

    49         .tree code {

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

    51         }

    52 

    53             /* | */

    54             .tree ul:before,

    55             .tree code:before,

    56             .tree span:before {

    57                 outline: solid 1px #666;

    58                 content: "";

    59                 height: .5em;

    60                 left: 50%;

    61                 position: absolute;

    62             }

    63             .tree ul:before {

    64                 top: -.5em;

    65             }

    66             .tree code:before,

    67             .tree span:before {

    68                 top: -.55em;

    69             }

    70 

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

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

    73     .tree > li:before,

    74     .tree > li:after,

    75     .tree > li > code:before,

    76     .tree > li > span:before {

    77       outline: none;

    78     }

    79 

    80 

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

    82 .column {

    83   float: left;

    84   width: 40%;

    85   padding: 10px;

    86 }

    87 

    88 /* Clear floats after the columns */

    89 .row:after {

    90   content: "";

    91   display: table;

    92   clear: both;

    93 }