.routing-table li { list-style-type: none; }

.routing-table .sub .pattern { background-color: lightblue; }
.routing-table .sub .level   { background-color: lightblue; }
.routing-table .pub .pattern { background-color: lightgreen; }
.routing-table .pub .level   { background-color: lightgreen; }

.routing-table .route {
    display: inline-block;
    height: 2em;
}

.routing-table .route .level { font-style: italic; line-height: 1em; padding: 0 0.5em; }
.routing-table .route .polarity { display: none; }
.routing-table .route .pattern { padding-right: 0.5em; }

.routing-table .route:before {
    content: " ";
    float: left;
}

.routing-table .pub:before {
    border-right: 0.6em solid lightgreen;
    border-top: 0.75em solid transparent;
    border-bottom: 0.75em solid transparent;
}

.routing-table .sub:before {
    border-left: 0.6em solid transparent;
    border-top: 0.75em solid lightblue;
    border-bottom: 0.75em solid lightblue;
}

.routing-table .route:after {
    content: " ";
    float: right;
}

.routing-table .pub:after {
    border-left: 0.6em solid lightgreen;
    border-top: 0.75em solid transparent;
    border-bottom: 0.75em solid transparent;
}

.routing-table .sub:after {
    border-right: 0.6em solid transparent;
    border-top: 0.75em solid lightblue;
    border-bottom: 0.75em solid lightblue;
}