h1 {
    font-size: 20px;
    margin-bottom: 16px;
}

h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 16px 0 8px 0;
}

p {
    margin-bottom: 8px;
}

ul {
    margin-bottom: 8px;
}

#tree1 {
    background-color: #ccc;
    padding: 8px 16px;
    margin-bottom: 16px;

    &.block-style {
        background-color: #fafafa;
    }
}

#nav {
    margin: 16px 0;

    .next {
        float: right;
    }
}

.jqtree-tree .jqtree-loading > div .jqtree-title:after {
    content: url(spinner.gif);
    margin-left: 8px;
}

#tree1.jqtree-loading:after {
    content: url(spinner.gif);
}

pre {
    background-color: #333;
}

#scroll-container {
    height: 200px;
    overflow-y: scroll;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 16px;
}

.block-style {
    ul.jqtree-tree {
        margin-left: 0;

        ul.jqtree_common {
            margin-left: 2em;
        }

        .jqtree-element {
            margin-bottom: 8px;
            background-color: #ddd;
            padding: 8px;

            .jqtree-title {
                margin-left: 0;
            }
        }

        li.jqtree-selected {
            > .jqtree-element,
            > .jqtree-element:hover {
                background: #97bdd6;
                text-shadow: none;
            }
        }
    }
}
