:root
{
    --organigram-column-width: var(--webpage-column-width);
}

#PostContent.Organigram
{
    width: var(--organigram-column-width);
    margin-left: auto;
    margin-right: auto;
}

#PostContent #OrganigramTable
{
    border-collapse: separate;
    min-width: 100%;
}

#PostContent #OrganigramTable td
{
    padding: calc(0.5 * var(--post-font-size));
    height: calc(2 * var(--post-font-size));
}

#PostContent #OrganigramTable td.ToHide
{
    padding: 0px;
}

#PostContent #OrganigramTable .OrganigramCellButton
{
    width: 100%;
    height: 100%;
    background: none;
    background-color: var(--nav-background-colour);
    outline: none;
    color: var(--text-colour);
    font-size: var(--post-font-size);
    border: 1px solid var(--text-colour);
    border-radius: calc(0.5 * var(--post-font-size));
    padding-top: calc(1 * var(--post-font-size));
    padding-bottom: calc(1 * var(--post-font-size));
    transition: opacity 0.5s ease;
    font-family: var(--post-font-family);
}

#PostContent #OrganigramTable .OrganigramCellButton header
{
    font-weight: bold;
    color: var(--accent-colour);
    text-transform: uppercase;
}

#PostContent #OrganigramTable.ChildHighlightingInProgress .OrganigramCellButton
{
    opacity: 0.25;
}

#PostContent #OrganigramTable .OrganigramCellButton:not(.ToHide):hover
{
    background-color: var(--text-colour);
    color: var(--background-colour);
    cursor: pointer;
}

#PostContent #OrganigramTable .OrganigramCellButton.ToHide
{
    opacity: 0;
    padding: 0px;
}

#PostContent #OrganigramTable.ChildHighlightingInProgress .OrganigramCellButton:not(.ToHide).ChildHighlighted
{
    opacity: 1;
}