@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

.tab-content h2 {
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0;
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0;
}
.tab-content h2:focus{
	outline: none;
	text-decoration: underline;
}
.nav-pills > li > a {
	padding: 5px 10px;
	border: none;
}
#schema-tabs {
	font-size: 12px;
	margin-bottom: 2em;
	padding-bottom: 1em;
}
#schema-tabs ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	width: 100%;
}
#schema-tabs ul, #schema-tabs li {
	display: block;
	float: left;
	position: relative;
}
#schema-tabs a, #schema-tabs .hoc-schema-box-lvl3 > span {
	display: table;
	padding: .5em;
	background-color: #fff;
	box-shadow: 0 0 0 1px #bbb;
	text-align: center;
	margin-top: 1em;
	position: relative;
	font-family: "Roboto Condensed";
	z-index: 2;
}
#schema-tabs a:hover, #schema-tabs a:focus {
	text-decoration: none;
	box-shadow: 0 0 0 1px #427A26;
	background-color: #e7e7e7;
	outline: none;
}
#schema-tabs a.active {
	color: #fff;
	background-color: #427A26;
	box-shadow: 0 0 0 1px #427A26;
}
#schema-tabs a.active:hover, #schema-tabs a.active:focus {
	background-color: #2d531a;
	box-shadow: 0 0 0 1px #2d531a;
	outline: none;
}
#schema-tabs a > span, #schema-tabs .hoc-schema-box-lvl3 > span > span {
	display: table-cell;
	vertical-align: middle;
}
#schema-tabs .hoc-schema-box-lvl1 > a, #schema-tabs .hoc-schema-box-lvl1-last > a {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
#schema-tabs .hoc-schema-box-lvl2 > a, #schema-tabs .hoc-schema-box-lvl2-first > a {
	width: calc(50% - 2em);
	margin-left: calc(50% + 2em);
}
#schema-tabs .hoc-schema-box-lvl3 {
	width: calc(100% / 7 - .25em);
	margin-right: .25em;
	margin-left: .25em;
}
#schema-tabs .hoc-schema-box-lvl2-last > ul {
	margin-top: 1em;
}
#schema-tabs .hoc-schema-box-lvl3 a, #schema-tabs .hoc-schema-box-lvl4, #schema-tabs .hoc-schema-box-lvl4 a, #schema-tabs .hoc-schema-box-lvl3 > span {
	width: 100%;
}


/* :before and :after section */
#schema-tabs ul:before, #schema-tabs ul:after, #schema-tabs li:before, #schema-tabs li:after, #schema-tabs a:before, #schema-tabs a:after, #schema-tabs li > span:before, #schema-tabs li > span:after {
	content: "";
	background-color: #427A26;
	position: absolute;
	z-index: 1;
}
.hoc-schema-box-lvl1:not(.hoc-schema-box-lvl1-last) > a:before {
	height: 1em;
	width: 1px;
	bottom: -1em;
	left: 50%;
}
#schema-tabs .hoc-schema-box-lvl2 > a:before {
	width: 1px;
	bottom: -1em;
	top: -1em;
	left: -2em;
}
#schema-tabs .hoc-schema-box-lvl2 > a:after {
	height: 1px;
	width: 2em;
	top: 50%;
	left: -2em;
}
#schema-tabs .hoc-schema-box-lvl2-last > ul:before {
	height: 1px;
	width: auto;
	top: 0;
	left: calc(100% / 14 + .25em);
	right: 50%;
}
#schema-tabs .hoc-schema-box-lvl3 > span:after {
	height: 1em;
	width: 1px;
	bottom: -1em;
	left: 50%;
}
#schema-tabs .hoc-schema-box-lvl3:last-child:before {
	height: 1px;
	top: 0;
	left: 0;
	right: 50%;
}
#schema-tabs .hoc-schema-box-lvl3 > span:before, #schema-tabs .hoc-schema-box-lvl4 > a:before {
	height: 1em;
	width: 1px;
	top: -1em;
	left: 50%;
}
#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4 a:after {
	height: 1px;
	top: -1em;
	left: -0.3em;
	right: -0.3em;
}
#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4:first-child a:after {
	left: 50%;
}
#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4:last-child a:after {
	right: 50%;
}

/* Ipad and Up */
@media (min-width: 768px) {
	#schema-tabs .hoc-schema-box-lvl3 > span {
		height: 80px;
	}
	#schema-tabs .hoc-schema-box-lvl4 a {
		height: 100px;
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4 {
		width: calc(100% / 5 - .25em - 1px);
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4:not(:last-child):not(:first-child) {
		width: calc(100% / 5 - .5em);
	}
	#schema-tabs .hoc-schema-box-lvl4:not(:last-child) {
		margin-right: .25em;
	}
	#schema-tabs .hoc-schema-box-lvl4:not(:first-child) {
		margin-left: .25em;
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child {
		width: calc(100% / 7 * 5 - 1em - 1px);
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child > span {
		margin-left: auto;
		margin-right: auto;
		width: auto;
		min-width: 100px;
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4 a {
		width: 100%;
	}
	#schema-tabs .hoc-schema-box-lvl2-last > ul ul {
		margin-top: 1em;
	}
}
/* Mobile */
@media (max-width: 767px) {
	#schema-tabs .hoc-schema-box-lvl1, #schema-tabs .hoc-schema-box-lvl2, #schema-tabs .hoc-schema-box-lvl3, #schema-tabs .hoc-schema-box-lvl4{
		width: 100%;
	}
	#schema-tabs .hoc-schema-box-lvl1 > a{
		width: 100%;
	}
	#schema-tabs .hoc-schema-box-lvl2 > a{
		width: 60%;
    margin: 1em 45px 0 calc(25% + 1em);
	}
	#schema-tabs .hoc-schema-box-lvl2-last > a{
		margin-bottom: 1em;
	}
	#schema-tabs .hoc-schema-box-lvl3 a, #schema-tabs .hoc-schema-box-lvl3 > span{
		margin-top: 1em;
    margin-left: 1em;
    width: 60%;
	}
	#schema-tabs .hoc-schema-box-lvl3:first-child > span{
		margin-top: 0;
	}
	#schema-tabs .hoc-schema-box-lvl3 > span > span > br{
		display: none;
	}
	#schema-tabs .hoc-schema-box-lvl4 a{
		margin-left: 8em;
	}
	#schema-tabs .hoc-schema-box-lvl3 a, #schema-tabs .hoc-schema-box-lvl3 span{
		height: auto;
	}
	#schema-tabs .hoc-schema-box-lvl3{
		margin-bottom: 1em;
		margin-left: 0;
		margin-right: 0;
	}
	
	/* :before and :after section */
	#schema-tabs .hoc-schema-box-lvl1:not(.hoc-schema-box-lvl1-last) > a:before{
		left: 25%;
	}
	#schema-tabs .hoc-schema-box-lvl2 > a:before, #schema-tabs .hoc-schema-box-lvl2 > a:after {
		left: -1em;
	}
	#schema-tabs .hoc-schema-box-lvl2 > a:after {
		width: 1em;
	}
	#schema-tabs .hoc-schema-box-lvl2-last > ul:before{
    top: -1em;
    height: 1px;
    width: 25%;
		left: 0;
	}
	#schema-tabs .hoc-schema-box-lvl3:not(:last-child) > span:before{
		display: none;
	}
	#schema-tabs .hoc-schema-box-lvl4 > a:before, #schema-tabs .hoc-schema-box-lvl3:last-child > span:before{
		left: -1em;
    bottom: 50%;
    height: auto;
    top: -150%;
	}
	#schema-tabs .hoc-schema-box-lvl3:last-child:before{
		display: none;
	}
	#schema-tabs .hoc-schema-box-lvl3:not(:last-child):before{
		left: 0;
		top: -1em;
		bottom: -1em;
		width: 1px;
	}
	#schema-tabs .hoc-schema-box-lvl4:first-child > a:before{
		top: -1em;
	}
	#schema-tabs .hoc-schema-box-lvl3 > span:after, #schema-tabs .hoc-schema-box-lvl4 > a:after, #schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4 a:after, #schema-tabs .hoc-schema-box-lvl3:last-child .hoc-schema-box-lvl4:first-child a:after{
		left: -1em;
    top: 50%;
    right: auto;
    height: 1px;
    width: 1em;
	}
}