/* Page Structure */
#heroTop {
	min-height: 580px;
}

#heroTop .heroLeft {
	float: left;
	width: 620px;
	margin-left: 80px;
}

#heroTop .heroRight {
	float: left;
	width: 380px;
	height: 100%;
	margin: 452px 0 0 15px;
}

.abil, #how, #lore, #stats, #advStats, #usage {
	float: left;
	position: relative;
	margin: 16px 0 0 0;
	width: 100%;
	border-radius: 6px;
}

/* ARTWORK */
#artwork {
	margin-left: 180px;
	position: absolute;
	top: 80px;
}

#missingArt {
	left: 50%;
	margin-left: -620px;
	position: absolute;
	top: 80px;
	display: none;
}

.heroWrapper {
	height: 974px;
	margin: 0 auto -960px;
	min-width: 1500px;
	overflow: hidden;
	position: relative;
	top: -300px;
}

#loading_indicator {
	height: 64px;
	width: 64px;
	position: absolute;
	top: 530px;
	right: 560px;
}

/* HEADER */
#header {
	width: 712px;
	height: 75px;
	position: relative;
	border-radius: 6px;
	margin: 28px 0 47px -72px;
}

#header .title {
	border-radius: 6px 6px 0 0;
	padding: 2px 0 3px 78px;
}

#header .subTitle {
	margin: 4px 0 0 80px;
	float: left;
}

#header .fontXXXS {
	float: right;
	margin: 7px 10px 0 0;
}

#header #icon {
	height: 66px;
	width: 66px;
	position: absolute;
	top: 3px;
	left: 3px;
	border: 1px solid black;
}

.nlbtn {
	position: absolute;
	top: 72px;
	width: 91px;
	height: 22px;
	overflow:hidden;
	padding: 3px;
}

/* ABILITIES */
.abil .theIcon {
	border: 1px solid #3A3A3A;
	border-radius: 3px;
	display: block;
	height: 55px;
	left: -70px;
	position: absolute;
	top: 23px;
	width: 55px;
	background-size: 100% auto;
}

.abil .theIcon.isSpotgLight:hover {
	border: 1px solid #00aee3;
	cursor: pointer;
}

.connection {
	background-color: #3A3A3A;
	height: 2px;
	width: 13px;
	position: absolute;
	top: 28px;
	left: 56px;
}

.theIcon.isSpotgLight:hover .connection {
	background-color: #00aee3;
}

.theHeader {
	border-radius: 6px 6px 0 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.key {
	float: left;
	position: relative;
	background-color: #121212;
	border-radius: 6px;
	margin: 6px 0 0 7px;
	text-align: center;
	height: 22px;
	width: 22px;
}

.theHeader .title {
	float: left;
	margin: 3px 0 3px 6px;
}

.theHeader .fontXXS {
	float: right;
	margin: 9px 10px 0 7px;
}

.theText {
	padding: 40px 10px 10px;
	min-height: 37px;
}

.switchView {
	width: 27px;
	height: 28px;
	background-image: url('/images/switch.png');
	margin: 7px 3px 0 0;
	float: right;
}

.switchView.simple {
	background-position: 0 0;
}

.switchView.simple:hover {
	background-position: 0 -28px;
}

.switchView.advanced {
	background-position: -27px 0;
}

.switchView.advanced:hover {
	background-position: -27px -28px;
}

.theText .simple span {
	color: #FFAA00;
}

/* BOTTOM ELEMENTS */
#heroBottom {
	margin-top: 34px;
}

#heroBottom .heroLeft {
	float: left;
	margin-left: 40px;
	width: 460px;
	height: 100%;
}

#heroBottom .heroRight {
	float: left;
	width: 580px;
	height: 100%;
	margin-left: 15px;
}

/* HERO ALT AVATARS */
#slider {
	margin: 114px auto 0;
	width: 90%;
}

#altHolder {
	height: 100px;
	width: 362px;
	position: absolute;
	right: 14px;
}

#altHolder .iconBorder {
	border-radius: 6px;
	padding: 5px;
	float: left;
	margin: 2px;
}

#altHolder .icon {
	background-size: 100%;
	float: left;
	width: 100%;
	height: 100%;
}

#altHolder .iconBorder.hoverMe:hover {
	opacity: 1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	cursor: pointer;
}

#altHolder .sm {
	width: 43px;
	height: 43px;
	opacity:0.5;
	margin-top: 44px;
	filter:alpha(opacity=30); /* For IE8 and earlier */
}

#altHolder .med {
	width: 60px;
	height: 60px;
	opacity:0.7;
	margin-top: 26px;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

#altHolder .lg {
	width: 86px;
	height: 86px;
}

/* STATS */
#heroBottom .heroLeft .theText .fontXXS {
	padding: 8px 0;
}

.bar {
	background-color: #121212;
	border-radius: 5px 5px 5px 5px;
	float: right;
	height: 24px;
	margin-bottom: 4px;
	padding: 2px;
	width: 320px;
}

.fill {
	background-color: #FFAA00;
	border-radius: 4px 4px 4px 4px;
	height: 100%;
	width: 0px;
}

.statCol {
	float: left;
	width: 50%;
}

/* HOW TO AND LORE */
#how .theText, #lore .theText {
	text-align: justify;
}

#lore .theHeader .title, #how .theHeader .title {
	margin: 4px 0 3px 11px;
}

/* SPOTgLight */
#spotHolder {
	display: none;
	position: fixed;
	width: 736px;
	height: 472px;
	top: 20%;
	left: 30%;
	margin: auto;
	z-index: 900;
}

#spotAbil {
	float: left;
	width: 70px;
}

#spotHolder .theIcon {
	display: block;
	float: left;
	border: 1px solid #3A3A3A;
	border-radius: 3px;
	height: 55px;
	width: 55px;
	background-size: 100% auto;
	cursor: pointer;
	position: relative;
	margin-top: 40px;
}

#spotHolder .theIcon:hover {
	border: 1px solid #00aee3;
}

#spotBorders {
	border-radius: 6px;
	width: 660px;
	height: 410px;
	padding: 2px;
	float: left;
}