*, *:before, *:after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
body {
	background-color: #22AC4D;
	color: #111;
}
.wrapper {
	background-color: #fefefe;
	margin: 0 auto;
	padding: 0.5em 1em 1.5em;
	width: 95%;
	max-width: 600px;
}
/* Hierarchy Table */
.wh-table-box {
	position: relative;
	margin: 1em 0;
	padding: 1.75em 0 0;
	width: 100%;
}
.wh-table {
	border: 1px #000 solid;
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: hidden;
	text-align: left;
}
.wh-row {
	position: relative;
	clear: both;
	width: 100%;
	overflow: hidden;
}
.wh-header-row .wh-cell {
	float: left;
	border-top: none;
}
.wh-header-row .wh-cell:nth-of-type(n+2) {
	border-left: 1px #000 solid;
}

.wh-cell {
	border-top: 1px #000 solid;
	position: relative;
	float: left;
	margin: 0;
	padding: 1.25em 0.5em;
	width: calc(100% / 3);
}
.wh-cell p {
	display: inline-block;
	margin: 0;
}
.sub {
	position: relative;
    float: left;
    clear: right;
    overflow: hidden;
    width: calc(100% * (2/3));
    border-left: 1px black solid;
}
.sub .wh-cell {
    width: 50%;
}
.sub .sub {
    width: 50%;
}
.sub .sub .wh-cell {
    width: 100%;
}

/** Table Editing */
.edit-mode-button {
	position: absolute;
	font-size: 0.75em;
	opacity: 0;
}
.edit-mode-button a {
	display: inline-block;
	padding: 0.25em;
	text-decoration: none;
}
.edit-mode .edit-mode-button {
	opacity: 1;
}

.table-button-box {
	position: absolute;
	top: 1px;
	left: 0;
	overflow: hidden;
}
.reset, .new, .print, .edit-term {
	float: left;
	position: static;
	margin-right: 3px;
}
.reset a, .new a, .print a, .edit-term a {
	display: inline-block;
	border: 1px darkgrey solid;
    padding: 2px;
	color: darkgrey;
	text-decoration: none;
}
.edit-term form {
	display: none;
}
.edit-term.active form {
	display: inline-block;
}
.edit-term input {
	max-width: 7em;
}
.edit-term.active a {
	display: none;
}

/* Edit Buttons */
.toggle-edit {
	position: absolute;
    top: 1px;
    right: 1px;
}
.toggle-edit a {
	display: inline-block;
	border: 1px red solid;
    padding: 2px;
	color: red;
	text-decoration: none;
}
.toggle-edit a:after {
	content: ' OFF';
}
.edit-mode .toggle-edit a {
	border: 1px green solid;
	color: green;
}
.edit-mode .toggle-edit a:after {
	content: ' ON';
}

.edit {
    top: 0em;
    right: 0em;
}
.edit a {
    background-color: #ccc;
}

/* Delete Buttons */
.delete {
    top: 0em;
    left: 0em;
}
.delete a {
    background-color: #ccc;
    color: red;
}

/* Add Bbuttons */
.add {
	bottom: 0;
	left: 0;
}
.add a {
	padding-left: 0.75em;
	background-color: lightgreen;
	color: white;
}
.add a:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 0.5em;
	height: 1.5em;
	line-height: 1.8em;
	text-align: center;
	content: '+';
}

/* Only relevant to header -- need to replace */
.wh-primary,
.wh-secondary,
.wh-tertiary {
	overflow: hidden;
}
.wh-secondary,
.wh-tertiary {
	border-left: 1px #000 solid;
}
.wh-primary {
	width: 100%;
}
.wh-secondary {
	width: calc(100% * (2/3) );
}
.wh-tertiary {
	width: 50%;
}
.wh-primary > .wh-cell {
	font-weight: 600;
}
.wh-secondary .wh-cell {
	width: 50%;
}
.wh-tertiary .wh-cell {
	width: 100%;
}

@media print {
	.wrapper,
	.wh-sample,
	.wh-table-box {
		width: 100%
		max-width: 100%
	}
	.body-content,
	.table-button-box {
		display: none;
	}
	.wh-table-box {
		margin: 0 auto;
        padding: 0;
	}
	.wh-row {
		page-break-inside: avoid;
	}
	.wh-cell {
		padding: 0.3em 0.4em!important;
	}
	h3 {
		margin: 0;
	}
	.edit-mode-button,
	.toggle-edit {
		display: none;
	}
}