lineage.css

/* stylesheet for the random family tree generator */

body, div#intro {
    background:url('images/strange_bullseyes_ltgreen.png');
    background-attachment: fixed;
    background-color:#dfd;
    font-family: 'Open Sans', sans-serif;
}

body {
    overflow:auto;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

div#header {
    background:url('images/strange_bullseyes_green.png');
    background-attachment: fixed;
    background-color:#779959;
    border-top: 4px solid #5F0003;
    font-family: 'Quando', serif;
}

div#header, div#footer, div#content {
    width:100%;
    padding:5px 20px;
    box-sizing:border-box;
}

h1 {
    text-align:center;
    color:#efe;
}

#instructionsUi {
    padding:5px 10px;
    margin:5px;
}

#intro {
    text-align:left;
    border:2px solid #900;
    border-radius:5px;
    background-color: #dfd;
    padding:5px;
    margin:5px;
    box-sizing:border-box;
}

span.buttonInstruction {
    border:1px solid #900;
    border-radius:7px;
    background-color: #efe;
    padding:1px 4px;
    margin:2px;
    white-space:nowrap;
}

#intro a:link, #intro a:visited, 
#instructionsUi a:link, #instructionsUi a:visited, 
#footer a:link, #footer a:visited {
    text-decoration:none;
    color:#900;
}

#intro a:hover, #intro a:active,
#footer a:hover, #footer a:active {color:#f54242;}

.list ul {
    margin:3px 0 0 10px;
    padding:0;
    position:relative;
}
.list li {display:inline;list-style-type:none;}
.list li span {padding:2px 2px 2px 6px;}
.color1 {background-color:#fff;}
.color2 {background-color:#fcc;}
.color3 {background-color:#fc9;}
.color4 {background-color:#ff9;}
.color5 {background-color:#cf9;}
.color6 {background-color:#9f9;}
.color7 {background-color:#9fc;}
.color8 {background-color:#9ff;}
.color9 {background-color:#9cf;}
.color10 {background-color:#99f;}
.color11 {background-color:#c9f;}
.color12 {background-color:#f9f;}
.color13 {background-color:#f99;}

li.spouse:before {
    content: "=";
    position: absolute;
    left:-8px;
    top:4px;
    color:gray;
}

#lineageUi ul {
    padding:2px 4px;
    border: 1px dashed #cacaca;
}

#lineageUi ul#person-1 {
    border: 0;
}

div#footer {
    padding-top:20px;
    font-size:10px;
    text-align:right;
    font-weight: 300;
}

div#lineageUi li span {
    padding: 0 3px;
}

div#treeUi {
    width: 1000px;
}

div#nameTables table table {border: 2px solid #7ebb9c; border-radius:5px;background-color: #efe;}

div#nameTables table table table {background-color: white;}

div#nameTables table td, div#nameTables table table td {cursor:pointer;vertical-align:top;}
div#nameTables table table table td {cursor:default;}

div#nameTables table.nameList {border: 2px solid #7ebb9c; border-radius:5px;}
div#nameTables table.nameList th {background-color: white;}
div#nameTables table.nameList td {background-color: #efe;}

/* tree style from http://thecodeplayer.com/experiments/css3-family-tree-multiple-parents.html */

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

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

		.tree li {
			float: left; text-align: center;
			list-style-type: none;
			position: relative;
			padding: 20px 5px 0 5px;
	
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			transition: all 0.5s;
		}

		/*We will use ::before and ::after to draw the connectors*/

		.tree li::before, .tree li::after{
			content: '';
			position: absolute; top: 0; right: 50%;
			border-top: 1px solid #aaa;
			width: 50%; height: 45px;
			z-index: -1;
		}
		.tree li::after{
			right: auto; left: 50%;
			border-left: 1px solid #aaa;
		}

		/*We need to remove left-right connectors from elements without 
		any 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: 0;}

		/*Remove left connector from first child and 
		right connector from last child*/
		.tree li:first-child::before, .tree li:last-child::after{
			border: 0 none;
		}
		/*Adding back the vertical connector to the last nodes*/
		.tree li:last-child::before{
			border-right: 1px solid #aaa;
			border-radius: 0 5px 0 0;
			
			-webkit-transform: translateX(1px);
			-moz-transform: translateX(1px);
			transform: translateX(1px);
			
			-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{
			border-radius: 5px 0 0 0;
			-webkit-border-radius: 5px 0 0 0;
			-moz-border-radius: 5px 0 0 0;
		}

		/*Time to add downward connectors from parents*/
		.tree ul ul::before{
			content: '';
			position: absolute; top: -12px; left: 50%;
			border-left: 1px solid #aaa;
			width: 0; height: 32px;
			z-index: -1;
		}

		.tree li a{
			border: 1px solid #aaa;
			padding: 5px 10px;
			text-decoration: none;
			color: #444;
			font-size: 11px;
			display: inline-block;
			background: white;
	
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
	
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			transition: all 0.5s;
		}
		.tree li a+a {
			margin-left: 20px;
			position: relative;
		}
		.tree li a+a::before {
			content: '';
			position: absolute;
			border-top: 1px solid #aaa;
			top: 50%; left: -21px; 
			width: 20px;
		}

		/*Time for some hover effects*/
		/*We will apply the hover effect the the lineage of the element also*/
		.tree li a:hover, .tree li a:hover~ul li a {
			background: #c8e4f8!important; color: #000; border: 1px solid #94a0b4;
		}
		/*Connector styles on hover*/
		.tree li a:hover~ul li::after, 
		.tree li a:hover~ul li::before, 
		.tree li a:hover~ul::before, 
		.tree li a:hover~ul ul::before
		{
			border-color: #94a0b4;
		}

/* my additions to the tree style */

		/*Keep tree from wrapping using the obvious solution 
		  http://stackoverflow.com/questions/10395016/        */
		div.tree {white-space:nowrap;}
		div.tree li::before, div.tree li::after,
		div.tree li a+a::before {
		    display:inline-block;
		    white-space:nowrap;
		}

		/* color the tree like the list
		   also needed to make the hover background important above to override. */

		.tree li a.color1 {background-color:#fff;}
		.tree li a.color2 {background-color:#fcc;}
		.tree li a.color3 {background-color:#fc9;}
		.tree li a.color4 {background-color:#ff9;}
		.tree li a.color5 {background-color:#cf9;}
		.tree li a.color6 {background-color:#9f9;}
		.tree li a.color7 {background-color:#9fc;}
		.tree li a.color8 {background-color:#9ff;}
		.tree li a.color9 {background-color:#9cf;}
		.tree li a.color10 {background-color:#99f;}
		.tree li a.color11 {background-color:#c9f;}
		.tree li a.color12 {background-color:#f9f;}
		.tree li a.color13 {background-color:#f99;}

		.tree li a.male {border-radius: 0px;}
		.tree li a.female {border-radius: 13px;}

/* timeline style */

div#timeUi {
    position: relative;
}

div#timeUi hr {
    border-style: none;
    color:gray;
    background-color:gray;
}

div.time {
    margin: 2px 0;
    padding: 0 4px;
    overflow: visible;
    border: 1px dotted gray;
    opacity: 1;
    z-index: 5;
}

.time.color1 {background-color:#fff;}
.time.color2 {background-color:#fcc;}
.time.color3 {background-color:#fc9;}
.time.color4 {background-color:#ff9;}
.time.color5 {background-color:#cf9;}
.time.color6 {background-color:#9f9;}
.time.color7 {background-color:#9fc;}
.time.color8 {background-color:#9ff;}
.time.color9 {background-color:#9cf;}
.time.color10 {background-color:#99f;}
.time.color11 {background-color:#c9f;}
.time.color12 {background-color:#f9f;}
.time.color13 {background-color:#f99;}

.time.male {border-radius: 0px;}
.time.female {border-radius: 13px;}