﻿/* It's supposed to look like a tree diagram */
.tree, .tree .tree-list, .tree .tree-list-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}

    .tree, .tree .tree-list {
        display: table;
    }

        .tree .tree-list {
            width: 100%;
        }

        .tree .tree-list-item {
            display: table-cell;
            padding: .5em 0;
            vertical-align: top;
        }
            /* _________ */
            .tree .tree-list-item:before {
                outline: solid 1px #666;
                content: "";
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .tree .tree-list-item:first-child:before {
                left: 50%;
            }

            .tree .tree-list-item:last-child:before {
                right: 50%;
            }

        .tree code, .tree div:first-child {
     /*       border: solid .1em #666;
            border-radius: .2em;*/
            display: inline-block;
            margin: 0 .2em .5em;
            /*padding: .2em .5em;*/
            position: relative;
        }
        /* If the tree represents DOM structure */
        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .tree .tree-list:before,
            .tree code:before,
            .tree div:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }

        .tree .tree-list:before {
            top: -.5em;
        }

        .tree code:before,
        .tree div:before {
            top: -.55em;
        }

        /* The root node doesn't connect upwards */
        .tree > .tree-list-item {
            margin-top: 0;
        }

            .tree > .tree-list-item:before,
            .tree > .tree-list-item:after,
            .tree > .tree-list-item > code:before,
            .tree > .tree-list-item > div:before {
                outline: none;
            }
