/*
    Summary of classes:

    tab:                    <div> that encompasses a tab and its associated content. Example: The "Executive Branch" tab, and the content associated with it.
    content:                <div> that encompasses a tab's contents
    governor:               <section> under Executive Branch that contains all trees associated with the Governor. Takes up left half of Executive Branch content.
    statewide:              <section> that contains all trees associated with statewide elected officials. Takes up right half of Executive Branch content, but leaves some room at the bottom.
    exec-misc:              <section> that contains the Boards and Commissions rectangle. Takes up bottom slice of right half of Executive Branch content.
    legislative:            <section> that contains all trees associated with the Legislative Branch. Takes up top half of Legislative & Judicial Branches content.
    judicial:               <section> that contains all trees associated with the Judicial Branch. Takes up bottom half of Legislative & Judicial Branches content.
    regents:                <section> that contains all trees associated with Higher Education. Takes up all of Higher Education content.
    tree:                   <div> that defines a tree. A tree consists of a title item and all its descendants. There are several classes of the tree.
        two-column:         <div>.tree that organizes its <li>'s in two columns. The <li>'s flow left to right, top to bottom. The two columns are equidistant from the title item.
        two-column-right:   Similar to two-column, except that both columns are to the right of the title item. Items in right column are vertically offset from items in left column.
        single-descendant:  <div>.tree that has only one child item. It breaks if any more than one is added.
        multi-row:          <div>.tree that organizes its <li>'s in horizontal rows. Each row is encapsulated by a separate <ul>. All items in each row are proper descendants of all items in the row above.
    no-descendants:         <ul> of multi-row tree, for which lower rows' items are NOT proper descendants of this row's items. This <ul>'s items do not connect to the row below. A separate line is drawn from the row above.
    two-websites:           <li> that links to two websites rather than one. Expects two popup images, each with its own hyperlink. Images are displayed side by side.
    loose-relationship:     <li> for which item is only loosely associated with parent. Displays dashed line instead of solid line.
    rectangle:              Element that displays the item itself. Appears as a rectangle with rounded corners. Usually this is an <a> but it can also be a <div>.
        title:              .rectangle for the tree's title item. Appears mostly the same, but with larger font.

*/

figure#OrgChart {
    position: absolute;
    display: table; /* was display: none */
    box-sizing: border-box;
    border-collapse: separate; /* override lagov.css setting: "border-collapse: collapse" which causes tabs to act strange */
    width: 800px;
    height: 600px;
    z-index: 10;
    background-color: white;
    margin: 0;
    padding: 0;

    top: 30px;
	left: 0;
    
    padding-bottom: 555px;
}

figure#OrgChart *, figure#OrgChart *::before, figure#OrgChart *::after {
    box-sizing: border-box;
}

/* Begin Header Styling */
figure#OrgChart > header {
	display: table-caption;
	height: 30px;
	font-size: 16pt;
	text-align: center;
	background-color: white;
}
/* End Header Styling */

/* Begin Tab Styling */
figure#OrgChart > .tab-container {
    display: table-row;
    table-layout: fixed;
}

figure#OrgChart > .tab-container > .tab {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    width: 1%; /* This does not set the width to 1%; it triggers the table-layout: fixed property to activate, setting all widths equal */
    height: 100%;
    top: 0;
}

figure#OrgChart > .tab-container > .tab > .content {
    position: absolute;
    padding: 0;
    left: 0;
    display: block;
    z-index: 0;
    background-color: white;
    top: 76px;
    height: calc(100% - 77px);
    width: 100%;
}

figure#OrgChart > .tab-container > .tab > [type=radio] { /* Don't display radio buttons */
    display: none;
}

figure#OrgChart label {
    display: block;
    position: relative;
	color: #13396e;
    background-color: rgb(168, 186, 232); /* lightblue; fallback in case gradient fails */
    background-image: linear-gradient(aliceblue, rgb(168, 186, 232)); /* Gradient from (lightblue) to (75% towards white from lightblue) */
    font-weight: bold;
    font-size: 11pt;
	border-radius: 10px;
    top: 0;
    width: 200px;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    transition: 0.5s;
}

figure#OrgChart label:hover {
	cursor: pointer;
}

figure#OrgChart [type=radio]:checked + label {
	color: whitesmoke;
    background-color: #13369e;
    background-image: linear-gradient(rgb(168, 186, 232), #13369e); /* Gradient from (cyan) to (75% towards white from cyan) */
    transition: 0.5s;
}

figure#OrgChart [type=radio]:checked ~ .content {
    z-index: 1;
}
/* End Tab Styling */

/* Begin Section Styling */
figure#OrgChart section {
    position: relative;
}

figure#OrgChart section.governor {
    height: 100%;
    width: 40%;
    float: left;
    padding: 15px;
}

figure#OrgChart section.statewide {
    height: 85%;
    width: 60%;
    float: right;
    padding: 15px;
}

figure#OrgChart section.exec-misc {
    float: right;
    height: 14%;
    width: 60%;
    padding: 20px;
}

figure#OrgChart section.legislative {
    float: left;
    height: 50%;
    width: 100%;
    padding: 15px;
}

figure#OrgChart section.judicial {
    float: left;
    height: 50%;
    width: 100%;
    padding: 15px;
}

figure#OrgChart section.regents {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    padding: 15px 0 15px 0;
}

figure#OrgChart section > header {
    position: relative;
    display: block;
    font-size: 10pt;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0 0 20px 0;
    top: 0;
    left: 0;
    font-weight: bold;
}

figure#OrgChart section.governor > .tree {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
/* End Section Styling */

/* Begin styling for text inside rectangles and tabs */
figure#OrgChart span {
    position: relative;
    display: block;
    width: 100%;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    line-height: 12px;
}

figure#OrgChart .title span {
    font-size: 115%;
    line-height: 120%;
    font-weight: 900;
}

figure#OrgChart label span {
    width: 100%;
    margin: 0 auto;
    line-height: 120%;
}
/* End styling for text inside rectangles */

/* Begin general styling for tree structure */
figure#OrgChart .tree {
    display: block;
    float: left;
    position: relative;
    margin: 0 10px 60px 10px;
}

figure#OrgChart ul {
    list-style-type: none;
    padding: 0;
    margin: -2px 0 -2px 0; /* -2px for top and bottom prevents borders from doubling up between ul rows */
}

figure#OrgChart li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}
/* End general styling for tree structure */

/* Begin styling for single-descendant and multi-row tree classes */
figure#OrgChart .tree.single-descendant {
    width: 120px;
}

figure#OrgChart .tree.multi-row {
    margin: 0;
    width: 100%;
    box-sizing: content-box;
}

figure#OrgChart .tree.multi-row::before {
    content: "";
    box-sizing: content-box;
    display: block;
    width: 0;
    border-left: 2px solid black;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
}

figure#OrgChart .single-descendant > ul, figure#OrgChart .multi-row > ul {
    position: relative;
    display: table;
    border-collapse: collapse;
    height: 80px;
    width: 100%;
    top: 100%;
}

figure#OrgChart .single-descendant > ul > li, figure#OrgChart .multi-row > ul > li {
    position: static;
    display: table-cell;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    min-width: 110px;
}

figure#OrgChart .single-descendant > ul > li.loose-relationship, figure#OrgChart .multi-row > ul > li.loose-relationship {
    border-left-style: dotted;
}

figure#OrgChart .single-descendant > ul::before, figure#OrgChart .multi-row > ul::before {
    content: "";
    display: table-cell;
    min-width: 60px;
}

figure#OrgChart .single-descendant > ul > li:last-of-type, figure#OrgChart .multi-row > ul > li:last-of-type {
    border-top: none;
    border-bottom: none;
    min-width: 60px;
}

figure#OrgChart .single-descendant > ul:last-of-type, figure#OrgChart .multi-row > ul:last-of-type,
figure#OrgChart .multi-row > ul.no-descendants {
    height: 40px;
}

figure#OrgChart .multi-row > ul.no-descendants {
    margin-bottom: 50px;
}

figure#OrgChart .single-descendant > ul:last-of-type > li, figure#OrgChart .multi-row > ul:last-of-type > li,
figure#OrgChart .multi-row > ul.no-descendants > li {
    border-bottom: none;
}

figure#OrgChart .single-descendant > ul:last-of-type > li .rectangle, figure#OrgChart .multi-row > ul:last-of-type > li > .rectangle,
figure#OrgChart .multi-row > ul.no-descendants > li > .rectangle {
    top: 100%;
}

figure#OrgChart .single-descendant > ul > li > .rectangle, figure#OrgChart .multi-row > ul > li > .rectangle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) translateX(-1px); /* Second translate is to account for non-zero border width. Use half of <li> border width. */
}

figure#OrgChart .multi-row .rectangle.title {
    position: absolute;
}

figure#OrgChart .multi-row > ul.no-descendants::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    border-left: 2px solid black;
    height: 88px; /* Magic number: ul height (40px) + ul margin-bottom (50px) - 2px */
    left: 50%;
    transform: translateX(-50%);
}
/* End styling for single-descendant and multi-row tree classes */

/* Begin styling for two-column tree class */
figure#OrgChart .two-column {
    width: 240px;
}

figure#OrgChart .two-column > ul > li {
    width: 50%;
}

figure#OrgChart .two-column > ul > li {
    float: left;
    height: 56px;
    border-bottom: 2px solid black;
}

figure#OrgChart .two-column > ul > li.loose-relationship {
    border-bottom-style: dotted;
}

figure#OrgChart .two-column > ul > li:nth-of-type(odd) {
    border-right: 2px solid black;
    margin-right: -1px;
}

figure#OrgChart .two-column > ul > li:nth-of-type(even) {
    border-left: 2px solid black;
    margin-left: -1px;
}

figure#OrgChart .two-column > ul > li:nth-of-type(-n+2) { /* Make first two li's shorter than the rest */
    height: 46px;
}

figure#OrgChart .two-column > ul > li > .rectangle {
    top: 100%;
    transform: translate(0, -50%);
}

figure#OrgChart .two-column li:nth-of-type(odd) .rectangle {
    float: left;
}

figure#OrgChart .two-column li:nth-of-type(even) .rectangle {
    float: right;
}
/* End styling for two-column tree class */

/* Begin styling for two-column-right tree class */
figure#OrgChart .two-column-right > ul {
    display: block;
    top: 100%;
}

figure#OrgChart .two-column-right > ul > li {
    display: block;
    height: 35px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
}

figure#OrgChart .two-column-right > ul > li:first-of-type {
    height: 66px;
}

figure#OrgChart .two-column-right > ul > li:nth-of-type(even) {
    width: 230px;
}

figure#OrgChart .two-column-right > ul > li:nth-of-type(odd) {
    width: 120px;
}

figure#OrgChart .two-column-right > ul > li > .rectangle {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -50%);
}
/* End styling for two-column-right tree class */

/* Begin general styling for rectangle */
figure#OrgChart .rectangle {
    display: block;
    position: relative;

    border: 1px solid gray;
    height: 45px;
    width: 105px;
    font-size: 7.5pt;
    font-weight: bold;
    color: #132E60;
    text-decoration: none;
    background-color: #FAFAFC;

    padding: 5px;

    border-radius: 10px;
    box-shadow: 3px 3px 4px 0 #909090;
    border-collapse: separate; /* Without this line, IE 9 doesn't render box-shadow for .rectangle's inside an element with "border-collapse: collapse" */
    z-index: 100;
}

figure#OrgChart .rectangle.title {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

figure#OrgChart .rectangle img {
    display: none;
    width: 110px;
    border: 2px solid transparent;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
}

figure#OrgChart .rectangle:hover img {
    display: block;
}

figure#OrgChart .rectangle:hover {
    background-color: #FEEDC1; /*#FFDB58;*/
}

figure#OrgChart .rectangle:active {
    box-shadow: none;
}

figure#OrgChart a:hover img {
    border: 2px solid gray;
}

figure#OrgChart .two-websites a {
    visibility: hidden;
}

figure#OrgChart .two-websites .rectangle:hover a {
    visibility: visible;
}

figure#OrgChart .two-websites img {
    width: 56%;
}

figure#OrgChart .two-websites a:nth-of-type(1) img {
    transform: translate(-103%, -50%);
}

figure#OrgChart .two-websites a:nth-of-type(2) img {
    transform: translate(3%, -50%);
}
/* End general styling for rectangle */

/* Begin styling for nested tree */
figure#OrgChart .multi-row > ul > li > .tree {
    visibility: hidden;
    position: absolute;
    top: 100%;
    margin-left: 0;
}

figure#OrgChart .multi-row > ul > li > .two-column > ul > li:nth-of-type(-n+2) { /* Make first two li's shorter than the rest */
    height: 66px;
}


figure#OrgChart .multi-row > ul > li > .two-column {
    transform: translateX(-50%) translateX(-1px); /* Second translate is to account for non-zero border width. Use half of <li> border width. */
}

figure#OrgChart .multi-row > ul > li > .rectangle:hover ~ .tree, figure#OrgChart .multi-row > ul > li > .tree:hover {
    visibility: visible;
}
/* End styling for nested tree */