/* HEADER */
#header {
	width: 622px;
	height: 69px;
	border-radius: 6px;
	margin: 20px 0 0 50px;
	z-index: 1;
	position: relative;
}

#header .title {
	margin: -1px 0px 0px 70px;
}

#header .subTitle {
	margin: -4px 0px 0px 70px;
}

#header .subTitleSM {
	margin: 0px 0px 0px 70px;
}

#header #icon {
	height: 98px;
	width: 98px;
	margin: -73px 0 0 -42px;
	background-color: blue;
	border: 1px solid black;
}

#header .question {
	top: 61px;
	left: 70px;
}

.nlbtn {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	position: absolute;
	width: 57px;
	height: 21px;
	font-size: 14px;
	padding: 3px;
}

#next {
	right: 16px;
	top: 82px;
}

#last {
	right: 87px;
	top: 82px;
}

/* USED IN */
.icon {
	height: 64px;
	width: 64px;
	background-size: 64px;
	float: left;
	margin-bottom: 7px;
	border: 1px solid black;
	position: relative;
}

.icon .question {
	bottom: 2px;
	right: 2px;
}

.comHolder {
	float: left;
	margin: 20px 0 10px 59px;
	width: 70px;
}

/* STATS AND BIO */
#info {
	position: absolute;
	height: 175px;
	width: 100%;
}

#bio {
	border-radius: 6px;
	float: left;
	min-height: 263px;
	left: 93px;
	margin: 40px 80px 0 140px;
	text-align: justify;
	width: 825px;
}

#bio .question {
	top: 13px;
	left: 11px;
}

#bio .subTitle {
	border-bottom: 1px solid #525252;
	color: #FF8A00;
}

/* COMPONENT TREE */

/* THE TREE */
.tree .icon {
	height: 68px;
	width: 68px;
	float: left;
	margin: 0px 0px 6px 27px;
	position: relative;
}

.tree img {
	border:none;
}

.icon.noRecipe {
	background-size: 100%;
	border: 1px solid black;
}

.tree .subTitle {
	color: #ffffff;
	float: left;
	width: 122px;
}

.tree .subTitleSM {
	float: left;
	width: 122px;
}

.noRecipe img {
	display:none;
}

.isRecipe {
	background-color: transparent;
	background-position: 13px 13px;
	background-repeat: no-repeat;
	background-size: 40px auto;
	border: none;
}

.isRecipe img {
	display:block;
	width: 68px;
	height: 68px;
}

/* THE DEV BLOG */
.theVideo {
	border-radius: 6px;
	margin: 28px 0;
	padding: 20px;
	width: 640px;
}

/* THE LORE IN DEPTH */


/* THE LORE */
#longBio {
	margin: 28px 0;
	width: 960px;
	border-radius: 6px;
}

/* The Component Tree Details */

.comp
{

}

.tree
{
	margin: auto;
}

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

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

/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after {
	content: '';
	position: absolute; top: 0px; right: 50%;
	border-top: 1px solid #000000;
	width: 50%; height: 20px;
}

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

/*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: 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;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
	border-right: 1px solid #000000;
	border-radius: 0px 5px 0px 0px;
}

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

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

.tree li a {
	border: 1px solid #000000;
	padding: 9px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	border-radius: 6px;
	min-height: 143px;
	width: 122px;
	background-color: #212121;
}

/*Time for some hover effects*/
.tree li a:hover, .tree li a:hover+ul li a {
	border: 1px solid #1A212B;
	background-color: #2A343F;
}

/*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:  #1A212B;
}


.statsTitle
{
	float: left;
	width: 200px;
}

#bio .subTitle {
	color: #FFFFFF !important;
	padding: 0px !important;
}

#bio .itemStats {
	color: white;
	font-family: 'magraregular', sans-serif;
	margin-bottom: 11px;
}