<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
/* TEMP 
***************************************************************************************************/
body{
  font-family:"open sans", sans-serif;
}
/**************************************************************************************************/

/*                                                                  88
                                                                    88
                                                                    88
 ,adPPYb,d8  ,adPPYba, 8b,dPPYba,   ,adPPYba, 8b,dPPYba, ,adPPYYba, 88
a8"    `Y88 a8P_____88 88P'   `"8a a8P_____88 88P'   "Y8 ""     `Y8 88
8b       88 8PP""""""" 88       88 8PP""""""" 88         ,adPPPPP88 88
"8a,   ,d88 "8b,   ,aa 88       88 "8b,   ,aa 88         88,    ,88 88
 `"YbbdP"Y8  `"Ybbd8"' 88       88  `"Ybbd8"' 88         `"8bbdP"Y8 88
 aa,    ,88
  "Y8bbd*/

#tps-org-chart{
  background:#e7b3fc; 
  padding:20px 20px 40px 20px;
  margin-bottom:2em;
}
figure ul,
figure ul li,
figure ul li a{
  position:relative;
}
figure ul{
  padding: 0;
  margin: 0;
  list-style: none;   
}
figure ul li{
  padding:10px 0;
}
figure ul li a{
  display: block;
  border: 4px solid;
  text-align: center;
  color:#fff;
  font-weight:bold;
  font-size: .8em;
  height: 80px;
  overflow: hidden;
}
figure ul li a:hover{
  color:#fff;
  text-decoration:none;
}
figure ul li a &gt; span{
  display:block;
  min-height:100%;
  padding-top:20px;
  overflow:hidden;
  transition:all ease .4s;
  text-shadow:rgba(0,0,0,0.5) 1px 1px 1px;
}
figure ul &gt; li a:hover &gt; span{
  background:#222;
}
figure small{
  display:block;
  font-weight:normal;
}


/* 
88                                   88
88                                   88
88                                   88
88  ,adPPYba, 8b       d8  ,adPPYba, 88 ,adPPYba,
88 a8P_____88 `8b     d8' a8P_____88 88 I8[    ""
88 8PP"""""""  `8b   d8'  8PP""""""" 88  `"Y8ba,
88 "8b,   ,aa   `8b,d8'   "8b,   ,aa 88 aa    ]8I
88  `"Ybbd8"'     "8"      `"Ybbd8"' 88 `"YbbdP"'  */

/* Level 1 
-------------------------------------------------*/
figure &gt; ul &gt; li &gt; div &gt; a{
  width:20%;
  margin:0 auto 15px auto;
}
figure &gt; ul &gt; li &gt; div:after{
  content:"";
  width:calc(50%);
  height:25px;
  margin:0 auto;
  position:absolute;
  border-left:4px solid;
  top:90px;
  left:calc(50% - 2px);
  display:block;
  z-index:0;
}

/* Level 2 
-------------------------------------------------*/
figure &gt; ul &gt; li &gt; ul:after{ /* horizontal line connecting boxes under head honcho (and vertical lines on the far left and right) */
  content:"";
  width:calc(100% - 30px - 248px + 4px);
  height:20px;
  margin:0 auto;
  position:absolute;
  border:4px solid;
  border-bottom:none;
  top:10px;
  left:calc(15px + 124px - 2px);
  display:block;
  z-index:0;
}
figure &gt; ul &gt; li &gt; ul &gt; li{
  z-index:1;
}
figure &gt; ul &gt; li &gt; ul &gt; li:first-of-type:before,
figure &gt; ul &gt; li &gt; ul &gt; li:last-of-type:before{ /* hiding vertical lines on the far left and right */
  border-left:transparent;
}
figure &gt; ul &gt; li &gt; ul &gt; li:before{ /* vertical lines connecting boxes to horizontal line under head honcho */
  content:"";
  border-left:4px solid;
  position:relative;
  display:block;
  min-height:20px;
  margin-left:calc(50% - 2px);
}

/* Level 3 
-------------------------------------------------*/
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul{ /* vertical line connecting boxes under a director (level 2) */
  border-left: 4px solid;
}
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{ /* horizontal line connect level 3 boxes to vertical line under director (level 2) */
  border-top: 4px solid;
  top:50px;
}
figure ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; a{ /* level 3 boxes and below... */
  right:-30px;
  top:-50px;
  width:calc(100% - 30px);
}

/* Level 4 
-------------------------------------------------*/
figure &gt; ul &gt; li ul &gt; li &gt; ul &gt; li &gt; ul{ /* vertical line connecting boxes under a level 3 box */
  border-left: 4px solid;
  right:-30px;
  top:-50px;
  width:calc(100% - 30px);
  padding-top: 10px;
}
figure ul &gt; li &gt; ul &gt; li &gt; ul &gt; li.tps-org-branch-end{ /* hiding the bottom section of the vertical line above */
  border-left: 4px solid #fff;
  right:4px;
  width:calc(100% + 4px);
}
figure ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{ /* horizontal line connect level 4 boxes to vertical line under level 3 box */
  border-top: 4px solid;
  top:50px;
}




/*
  ,ad88PPP88ba,                                         88 88
 d8"  .ama.a "8a                                        88 ""
d8'  ,8P"88"  88                                        88
88  .8P  8P   88 88,dPYba,,adPYba,   ,adPPYba,  ,adPPYb,88 88 ,adPPYYba,
88  88   8'   8P 88P'   "88"    "8a a8P_____88 a8"    `Y88 88 ""     `Y8
88  8B ,d8 ,ad8' 88      88      88 8PP""""""" 8b       88 88 ,adPPPPP88
"8a "88P"888P"   88      88      88 "8b,   ,aa "8a,   ,d88 88 88,    ,88
 `Y8aaaaaaaad8P  88      88      88  `"Ybbd8"'  `"8bbdP"Y8 88 `"8bbdP"Y8
    """""""""
*/
@media all and (max-width: 1200px){
  figure &gt; ul &gt; li &gt; div &gt; a{
    width:100%;
    margin:0 auto;
  }
  figure &gt; ul &gt; li &gt; ul{ /* vertical line under head honcho (level 1) */
    border-left: 4px solid;
  }
  figure &gt; ul &gt; li &gt; ul &gt; li{ /* horizontal line connecting level 2 boxes to vertical line under head honcho (level 1) */
    border-top: 4px solid;
    top:50px;
  }
  figure &gt; ul &gt; li &gt; div:after,
  figure &gt; ul &gt; li &gt; ul:after,
  figure &gt; ul &gt; li &gt; ul &gt; li:first-of-type:before,
  figure &gt; ul &gt; li &gt; ul &gt; li:last-of-type:before,
  figure &gt; ul &gt; li &gt; ul &gt; li:before{
    display: none;
  }
  figure &gt; ul &gt; li &gt; ul &gt; li.col-lg-2{
    padding-right:0;
    padding-left:30px;
  }
  figure &gt; ul &gt; li &gt; ul &gt; li &gt; a,
  figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul{
    top:-50px;
  }
  figure ul &gt; li &gt; ul &gt; li.tps-org-branch-end:last-of-type{ /* hiding the bottom section of the vertical line above */
    border-left: 4px solid #fff;
    right:4px;
    width:calc(100% + 4px);
  }

}

/*                     88
                       88
                       88
 ,adPPYba,  ,adPPYba,  88  ,adPPYba,  8b,dPPYba, ,adPPYba,
a8"     "" a8"     "8a 88 a8"     "8a 88P'   "Y8 I8[    ""
8b         8b       d8 88 8b       d8 88          `"Y8ba,
"8a,   ,aa "8a,   ,a8" 88 "8a,   ,a8" 88         aa    ]8I
 `"Ybbd8"'  `"YbbdP"'  88  `"YbbdP"'  88         `"YbbdP"'  */

/* Line color 
-------------------------------------------------*/
figure ul li a,
figure &gt; ul &gt; li &gt; ul,
figure &gt; ul &gt; li &gt; ul:after,
figure &gt; ul &gt; li &gt; div:after,
figure &gt; ul &gt; li &gt; ul &gt; li,
figure &gt; ul &gt; li &gt; ul &gt; li:before,
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul,              
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li,         
figure &gt; ul &gt; li ul &gt; li &gt; ul &gt; li &gt; ul,      
figure ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li{ 
  border-color: #ed2f88;
}

/* Background color 
-------------------------------------------------*/
#tps-org-chart,
figure ul &gt; li &gt; ul &gt; li &gt; ul &gt; li.tps-org-branch-end{
  background: #e7b3fc;
}
/* Box colors by column 
-------------------------------------------------*/
figure ul li a{ background:#858587;} /* level 1 and default box color */
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(1) a{  background:#00a6de; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(1) a:hover{ color:#00a6de; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(2) a{  background:#66d43d; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(2) a:hover{ color:#66d43d; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(3) a{  background:#f7a30a; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(3) a:hover{ color:#f7a30a; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(4) a{  background:#8c42ad; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(4) a:hover{ color:#bf75df; }/* 3 steps lighter */
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(5) a{  background:#de5433; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(5) a:hover{ color:#ef6544; }/* 1 step lighter */
/*figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(6) a{  background:#00b0ab; }
figure &gt; ul &gt; li &gt; ul &gt; li:nth-of-type(6) a:hover{ color:#00b0ab; }*/

/* Darken each level 
-------------------------------------------------*/
figure &gt; ul &gt; li &gt; ul &gt; li &gt; a &gt; span{
  background:rgba(0,0,0,0);
}
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; a &gt; span{
  background:rgba(0,0,0,0.2);
}
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; a &gt; span{
  background:rgba(0,0,0,0.4);
}
figure &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; ul &gt; li &gt; a &gt; span{
  background:rgba(0,0,0,0.6);
}
</pre></body></html>