/*
** Adapted from "CSS Family Tree" by Ilya Pestov at CodePen
** https://codepen.io/Pestov/pen/BLpgm
*/

.tree *
{
   margin:0px;
   padding:0px;
}

.tree ul
{
	padding-top:20px;
   position:relative;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	transition:all 0.5s;
}

/*
** "padding:inherit" is used to prevent subsequent nodes
** added to the tree from "drifting" to the right due to
** accumulated padding.
*/
.tree li
{
	float:left;
   text-align:center;
	list-style-type:none;
	position:relative;
	/*padding:20px 5px 0px 5px;*/
   padding: inherit; /* prevent nested drift */
   margin: inherit;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	transition:all 0.5s;
}

/* Connectors */

.tree li::before,
.tree li::after
{
	content:'';
	position:absolute;
   top:0;
   right:50%;
	border-top:2px solid #888;
	width:50%;
   height:20px;
}

.tree li::after
{
	right:auto;
   left:50%;
	border-left:2px solid #888;
}

/* Remove left-right connectors from elements without siblings */
.tree li:only-child::after,
.tree li:only-child::before
{
	display: none;
}

/* Remove space from the top of single children */
.tree li:only-child
{
   padding-top: 0px;
}

/* Remove left connector from first child and right connector from last child */
.tree li:first-child::before,
.tree li:last-child::after
{
	border: 0px none;
}

/* Add back the vertical connector to the last nodes */
.tree li:last-child::before
{
	border-right: 2px solid #888;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}

.tree li:first-child::after
{
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;
}

/* Downward connectors from parents */
.tree ul ul::before
{
	content:'';
	position:absolute;
   top:0;
   left:50%;
	border-left: 2px solid #888;
	width:0px;
   height:20px;
}

.tree li p
{
	border: 2px solid #888;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12pt;
	display: inline-block;
   width:225px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
   margin:0px 1ex;
}

.tree li p.common
{
   width:450px;
}

.tree li p.highlight
{
	background: #c8e4f8;
}

.tree ul.terminal
{
}

.tree li input
{
   width:28ex;
   font-size:11pt;
   text-align:center;
   border:thin solid lightgray;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.tree li.common input
{
   width:30ex;
}

@media print
{
   .tree li input
   {
      border:none;
   }
   
   .tree p.highlight input
   {
      background: #c8e4f8;
   }
}