Template:Tree chart/start

<style> /* treechart core */ .treechart { border-collapse: separate; border-spacing: 0; margin: 0.4em 0; text-align: center; } .treechart td { width: 48px; height: 48px; vertical-align: middle; position: relative; padding: 0; }

/* visual pieces (draw with borders) */ .tc-piece { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; position: relative; } .tc-empty { /* blank cell */ } .tc-horiz { border-top: 4px solid #333; } .tc-vert { border-left: 4px solid #333; } .tc-down { border-left: 4px solid #333; border-bottom: 4px solid #333; } /* 'y' look */ .tc-plus { border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; border-bottom: 4px solid #333; border-radius: 3px; } .tc-dot::after { content: ""; width: 6px; height: 6px; display: block; border-radius: 50%; background: #333; margin: 18px auto 0; } .tc-lcorner { border-top:4px solid #333; border-right:4px solid transparent; border-left:4px solid #333; border-bottom:0; transform-origin: center; } .tc-rcorner { border-top:4px solid #333; border-left:4px solid #333; } .tc-vertline { border-left:4px solid #333; } .tc-text { padding:4px; font-size: 95%; white-space:nowrap; }

/* label styling */ .tc-label { display:inline-block; padding:2px 6px; border-radius:4px; background:#f7f7f7; border:1px solid #ddd; font-size:90%; } </style>

<tbody>