@font-face {
    font-family: 'SWEuroRegular';
    src: url('../fonts/SWEuroRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: "Verdana";
	text-align: center;
	background-color: #181C1F;
	cursor: url(../images/cursor.png), auto;
}

a {
	color: white;
	cursor: url(../images/pointer.png), auto;
	text-decoration: none;
}

h1 {
	color: white;
	text-decoration: none;
}

p {
	color: white;
	text-decoration: none;
}

h3 {
	color: white;
}

.menu-container {
	display: flex;
	gap: 10px;
}

.menu-button {
	position: relative;
	display: inline-block;
}

.menu-button img {
	width: 60px;
	height: 60px;
	cursor: url(../images/pointer.png), auto;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color 0.3s, transform 0.2s;
}

.menu-button img:hover {
	border-color: #f1be55;
	transform: scale(1.1);
}

.menu-button:hover .dropdown,
.menu-button:focus-within .dropdown {
	visibility: visible;
	opacity: 1;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.dropdown {
	display: flex;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.3s ease-in-out;
}

.menu-button .dropdown img {
	width: 25px;
	height: 25px;
	border: 8px solid transparent;
	transition: transform 0.3s ease;
	margin: -2px 0px
}

.menu-button .dropdown img:hover {
	transform: scale(1.2);
}

.abilities {
	DISPLAY: none;
	justify-content: center;
	color: white;
	font-size: 0.8em;
}

table {
	width: 60%;
	border-collapse: separate;
	border-spacing: 10px;
	margin-top: 50px;
	margin-bottom: 50px;
}

caption {
	font-size: 2em;
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}

th {
	font-size: 1.3em;
	padding: 6px 0px;
	text-align: left;
	font-weight: bold;
}

#base-abilities td:nth-child(1),
#advanced-abilities td:nth-child(1) {
	width: 30px;
	text-align: left;
}

#base-abilities td:nth-child(2),
#advanced-abilities td:nth-child(2) {
	width: 100px;
	text-align: left;
	color: #f1be55;
}

#base-abilities td:nth-child(3),
#advanced-abilities td:nth-child(3) {
	width: 400px;
	text-align: left;
}

#base-abilities td:nth-child(4),
#advanced-abilities td:nth-child(4) {
	width: 30px;
	text-align: left;
}

#base-abilities td:nth-child(5),
#advanced-abilities td:nth-child(5) {
	width: 30px;
	text-align: left;
	color: #ffd700;
}

#base-abilities td:nth-child(6),
#advanced-abilities td:nth-child(6) {
	width: 30px;
	text-align: left;
	color: red;
}

#base-abilities td:nth-child(7),
#advanced-abilities td:nth-child(7) {
	width: 30px;
	text-align: left;
}

#base-abilities td:nth-child(8),
#advanced-abilities td:nth-child(8) {
	width: 30px;
	text-align: left;
}

#base-abilities td:nth-child(9),
#advanced-abilities td:nth-child(9) {
	width: 30px;
	text-align: left;
}

.banner {
	width: 100%;
	text-align: center;
	padding: -10px 0;
}


.tree-outer-wrapper {
	DISPLAY: none;
	MARGIN: 5px auto 20px;
	FONT-SIZE: 12px;
	WIDTH: 971px;
	FONT-FAMILY: Verdana;
	BACKGROUND: url(../images/bg.png) no-repeat 0px 0px;
	HEIGHT: 600px;
}

.tree-outer-wrapper .tree-header {
	TEXT-ALIGN: left;
	MARGIN-LEFT: 15px;
	PADDING-TOP: 15px;
}

.tree-header .skill-tree-title {
	TEXT-TRANSFORM: uppercase;
	FONT-SIZE: 16px;
	FONT-WEIGHT: bold;
	FONT-FAMILY: SWEuroRegular;
}

.tree-outer-wrapper .tree-inner-wrapper {}

.tree-inner-wrapper .tree-wrapper {
	MARGIN: 5px 3px 0px;
	WIDTH: 310px;
	DISPLAY: inline-block;
	BACKGROUND: url(../images/tree-bg-plain.png) no-repeat 0px 0px;
	FLOAT: left;
	HEIGHT: 490px
}

.tree-inner-wrapper .tree-wrapper-first {
	MARGIN-LEFT: 16px
}

.tree-inner-wrapper .tree-wrapper TABLE {
	MARGIN-TOP: 2px;
	WIDTH: 270px;
	BORDER-COLLAPSE: collapse;
	HEIGHT: 487px;
	MARGIN-LEFT: -5px
}

.tree-inner-wrapper .tree-wrapper TR.disabled .talent-icon {
	opacity: 0.6
}

.tree-inner-wrapper .tree-wrapper TD.connection-top .talent-icon {
	opacity: 0.6
}

.tree-inner-wrapper .tree-wrapper TD.connection-mid .talent-icon {
	opacity: 0.6
}

.tree-inner-wrapper .tree-wrapper TR.points-spent-row {}

.tree-inner-wrapper .tree-wrapper TR.points-spent-row TD {
	WIDTH: 150px;
	HEIGHT: 38px
}

.tree-inner-wrapper .tree-wrapper TR.points-spent-row .points-spent {
	TEXT-ALIGN: center;
	WIDTH: 28px;
	DISPLAY: inline-block;
	BACKGROUND: url(../images/tree-spent-bg.png) no-repeat 0px 0px;
	HEIGHT: 18px;
	COLOR: #fff;
	MARGIN-LEFT: -15px;
	FONT-SIZE: 12px;
	PADDING-TOP: 3px;
	LINE-HEIGHT: 12px
}

.tree-inner-wrapper .tree-wrapper TR.points-spent-row .tree-name {
	MARGIN-LEFT: 5px
}

.tree-inner-wrapper .tree-wrapper TD {
	WIDTH: 80px;
	HEIGHT: 64px
}

.tree-inner-wrapper .tree-wrapper TD.connection-bottom {
	BACKGROUND: url(../images/connection-bottom.png) no-repeat 25px 0px
}

.tree-inner-wrapper .tree-wrapper TD.connection-mid {
	BACKGROUND: url(../images/connection-mid.png) no-repeat 28px 0px
}

.tree-inner-wrapper .tree-wrapper TD.connection-bottom-active {
	BACKGROUND: url(../images/connection-bottom-active.png) no-repeat 25px 0px
}

.tree-inner-wrapper .tree-wrapper TD.connection-mid-active {
	BACKGROUND: url(../images/connection-mid-active.png) no-repeat 28px 0px
}

.tree-inner-wrapper .tree-wrapper TD .side-connection {
	POSITION: relative;
	MARGIN-TOP: -16px;
	WIDTH: 23px;
	DISPLAY: block;
	HEIGHT: 16px;
	MARGIN-LEFT: -23px
}

.tree-inner-wrapper .tree-wrapper TD .connection-left {
	BACKGROUND: url(../images/connection-left.png) no-repeat 0px 0px;
	LEFT: 11px
}

.tree-inner-wrapper .tree-wrapper TD .connection-right {
	BACKGROUND: url(../images/connection-right.png) no-repeat 0px 0px;
	LEFT: 78px
}

.tree-inner-wrapper .tree-wrapper TD .connection-left-active {
	BACKGROUND: url(../images/connection-left-active.png) no-repeat 0px 0px;
	LEFT: 11px
}

.tree-inner-wrapper .tree-wrapper TD .connection-right-active {
	BACKGROUND: url(../images/connection-right-active.png) no-repeat 0px 0px;
	LEFT: 78px
}

.tree-wrapper .talent-tooltip {
	BACKGROUND-COLOR: BLACK;
	Z-INDEX: 101;
	BORDER-BOTTOM: #1097d2 2px solid;
	BORDER-LEFT: #1097d2 2px solid;
	PADDING-BOTTOM: 8px;
	PADDING-LEFT: 8px;
	WIDTH: 250px;
	PADDING-RIGHT: 8px;
	DISPLAY: none;
	COLOR: #e4f7ff;
	FONT-SIZE: 11px;
	BORDER-TOP: #1097d2 2px solid;
	BORDER-RIGHT: #1097d2 2px solid;
	PADDING-TOP: 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 15px #1097d2;
	-webkit-box-shadow: 0px 0px 15px #1097d2;
	box-shadow: 0px 0px 15px #1097d2
}

.tree-wrapper .talent-tooltip .title {
	DISPLAY: block;
	MARGIN-BOTTOM: 3px;
	COLOR: #f1be55;
	FONT-SIZE: 17px;
	FONT-WEIGHT: bold
}

.tree-wrapper .talent-tooltip .passive-label {
	DISPLAY: block;
	COLOR: #f1be55;
	FONT-WEIGHT: bold
}

.tree-wrapper .talent-tooltip .resource-wrapper {}

.tree-wrapper .talent-tooltip .resource-wrapper .label {
	COLOR: #f1be55;
	FONT-SIZE: 13px;
	FONT-WEIGHT: bold;
	MARGIN-RIGHT: 5px
}

.tree-wrapper .talent-tooltip .resource-wrapper .value {}

.tree-wrapper .talent-tooltip .cast-type-wrapper {}

.tree-wrapper .talent-tooltip .cast-type-wrapper .label {
	COLOR: #f1be55;
	FONT-WEIGHT: bold;
	MARGIN-RIGHT: 5px
}

.tree-wrapper .talent-tooltip .cast-type-wrapper .value {}

.tree-wrapper .talent-tooltip .cooldown-wrapper {}

.tree-wrapper .talent-tooltip .cooldown-wrapper .label {
	COLOR: #f1be55;
	FONT-WEIGHT: bold;
	MARGIN-RIGHT: 5px
}

.tree-wrapper .talent-tooltip .cooldown-wrapper .value {}

.tree-wrapper .talent-tooltip .rank-label {
	MARGIN-TOP: 10px;
	DISPLAY: block;
	COLOR: #fff
}

.tree-wrapper .talent-tooltip .next-rank {
	MARGIN-TOP: 10px;
	DISPLAY: block;
	COLOR: #fff
}

.tree-wrapper .talent-tooltip .ability-text {
	DISPLAY: block
}

.tree-wrapper .talent-tooltip .ability-text-first {
	DISPLAY: block
}

.tree-wrapper .talent-tooltip .click-add {
	MARGIN-TOP: 10px;
	DISPLAY: block;
	COLOR: #2f2
}

.tree-wrapper .talent-tooltip .click-remove {
	MARGIN-TOP: 10px;
	DISPLAY: block;
	COLOR: #f22
}

.tree-inner-wrapper .tree-wrapper .talent-icon {
	Z-INDEX: 100;
	POSITION: relative;
	WIDTH: 43px;
	HEIGHT: 43px;
	TOP: 12px;
	cursor: url(../images/pointer.png), auto;
	LEFT: 11px
}

.tree-inner-wrapper .tree-wrapper .talent-icon-hover {
	-moz-box-shadow: 0px 0px 15px #20A7E2;
	-webkit-box-shadow: 0px 0px 15px #1097d2;
	box-shadow: 0px 0px 15px #1097d2;
	cursor: url(../images/pointer.png), auto;
}

.tree-inner-wrapper .tree-wrapper .talent-icon .rank {
	POSITION: relative;
	TEXT-ALIGN: center;
	MARGIN: 0px auto;
	WIDTH: 29px;
	DISPLAY: block;
	BACKGROUND: url(../images/talent-rank-bg.png) no-repeat 0px 0px;
	HEIGHT: 14px;
	FONT-SIZE: 13px;
	TOP: 35px
}

.tree-inner-wrapper .tree-wrapper .full .talent-icon .rank {
	BACKGROUND: url(../images/talent-rank-full-bg.png) no-repeat 0px 0px;
	WIDTH: 16px
}

.tree-inner-wrapper .tree-wrapper .talent-icon .rank .current {
	POSITION: relative;
	BOTTOM: 1px;
	COLOR: #ccf;
	FONT-SIZE: 12px;
	MARGIN-RIGHT: 5px;
	-moz-text-shadow: 0px 0px 3px #FFF;
	-webkit-text-shadow: 0px 0px 3px #FFF;
	text-shadow: 0px 0px 3px #FFF
}

.tree-inner-wrapper .tree-wrapper .full .talent-icon .rank .current {
	COLOR: #333;
	FONT-WEIGHT: bold;
	MARGIN-RIGHT: 1px
}

.tree-inner-wrapper .tree-wrapper .talent-icon .rank .maximum {
	POSITION: relative;
	BOTTOM: 1px;
	COLOR: #000;
	FONT-SIZE: 12px
}

.tree-inner-wrapper .tree-wrapper .full .talent-icon .rank .maximum {
	DISPLAY: none
}

.tree-wrapper .highlight-overlay {
	POSITION: relative;
	WIDTH: 280px;
	LEFT: 5px;
	MARGIN-LEFT: -28px;
}

.tree-wrapper .highlight-overlay-1 {
	MARGIN-BOTTOM: -73px;
	BACKGROUND: url(../images/row-glow-1.png) no-repeat 0px 0px;
	HEIGHT: 73px;
	TOP: 397px
}

.tree-wrapper .highlight-overlay-2 {
	MARGIN-BOTTOM: -135px;
	BACKGROUND: url(../images/row-glow-2.png) no-repeat 0px 0px;
	HEIGHT: 135px;
	TOP: 333px
}

.tree-wrapper .highlight-overlay-3 {
	MARGIN-BOTTOM: -199px;
	BACKGROUND: url(../images/row-glow-3.png) no-repeat 0px 0px;
	HEIGHT: 199px;
	TOP: 270px
}

.tree-wrapper .highlight-overlay-4 {
	MARGIN-BOTTOM: -262px;
	BACKGROUND: url(../images/row-glow-4.png) no-repeat 0px 0px;
	HEIGHT: 262px;
	TOP: 206px
}

.tree-wrapper .highlight-overlay-5 {
	MARGIN-BOTTOM: -325px;
	BACKGROUND: url(../images/row-glow-5.png) no-repeat 0px 0px;
	HEIGHT: 325px;
	TOP: 143px
}

.tree-wrapper .highlight-overlay-6 {
	MARGIN-BOTTOM: -393px;
	BACKGROUND: url(../images/row-glow-6.png) no-repeat 0px 0px;
	HEIGHT: 393px;
	TOP: 75px
}

.tree-wrapper .highlight-overlay-7 {
	MARGIN-BOTTOM: -458px;
	BACKGROUND: url(../images/row-glow-7.png) no-repeat 0px 0px;
	HEIGHT: 458px;
	TOP: 10px
}

.tree-outer-wrapper .tree-footer {
	MARGIN: 5px 10px 0px 13px;
	WIDTH: 950px;
	BACKGROUND: url(../images/footer-bg.png) no-repeat 0px 0px;
	HEIGHT: 31px;
	COLOR: #fff
}

.tree-outer-wrapper .tree-footer .available-label {
	POSITION: relative;
	PADDING-BOTTOM: 0px;
	TEXT-TRANSFORM: uppercase;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	COLOR: #fad02a;
	MARGIN-LEFT: -150px;
	FONT-SIZE: 13px;
	TOP: 6px;
	FONT-WEIGHT: bold;
	PADDING-TOP: 0px;
	-moz-text-shadow: 0px 0px 3px #FAD02A;
	-webkit-text-shadow: 0px 0px 3px #FAD02A;
	text-shadow: 0px 0px 3px #FAD02A
}

.tree-outer-wrapper .tree-footer .available-number {
	POSITION: relative;
	TEXT-ALIGN: center;
	WIDTH: 28px;
	DISPLAY: inline-block;
	BACKGROUND: url(../images/points-available-bg.png) no-repeat 0px 0px;
	HEIGHT: 19px;
	COLOR: #fad02a;
	MARGIN-LEFT: -10px;
	FONT-SIZE: 12px;
	TOP: 5px;
	FONT-WEIGHT: bold;
	PADDING-TOP: 1px;
	-moz-text-shadow: 0px 0px 3px #FAD02A;
	-webkit-text-shadow: 0px 0px 3px #FAD02A;
	text-shadow: 0px 0px 3px #FAD02A
}

.tree-outer-wrapper .tree-footer .available-bar-wrapper {
	POSITION: relative;
	MARGIN: 0px 3px;
	text-align: left;
	MARGIN-LEFT: 0px;
	WIDTH: 410px;
	DISPLAY: inline-block;
	HEIGHT: 15px;
	TOP: 8px
}

.tree-outer-wrapper .tree-footer .available-bar {
	BACKGROUND: url(../images/available-bar.png) repeat-x 0px 0px;
	HEIGHT: 15px
}

.tree-outer-wrapper .tree-footer .reset-button {
	POSITION: relative;
	TEXT-INDENT: -9999px;
	WIDTH: 52px;
	DISPLAY: inline-block;
	BACKGROUND: url(../images/reset.png) no-repeat 0px 0px;
	FLOAT: right;
	HEIGHT: 18px;
	TOP: 7px;
	CURSOR: pointer;
	MARGIN-RIGHT: 2px
}

.tree-outer-wrapper .tree-footer .reset-button:hover {
	BACKGROUND: url(../images/reset-hover.png) no-repeat 0px 0px;
	cursor: url(../images/pointer.png), auto;
}

.tree-outer-wrapper .tree-footer .save-button {
	POSITION: relative;
	TEXT-INDENT: -9999px;
	WIDTH: 52px;
	DISPLAY: inline-block;
	BACKGROUND: url(../images/save.png) no-repeat 0px 0px;
	FLOAT: right;
	HEIGHT: 18px;
	TOP: 7px;
	CURSOR: pointer;
	MARGIN-RIGHT: 7px
}

.tree-outer-wrapper .tree-footer .save-button:hover {
	BACKGROUND: url(../images/save-hover.png) no-repeat 0px 0px;
	cursor: url(../images/pointer.png), auto;
}

.glow-font {
	COLOR: #000;
	FONT-WEIGHT: bold;
	-moz-text-shadow: 0px 0px 4px #31c9ee;
	-webkit-text-shadow: 0px 0px 4px #31c9ee;
	text-shadow: 0px 0px 4px #31c9ee
}

.selection-wrapper TABLE TD {
	TEXT-ALIGN: center;
	WIDTH: 200px
}

.selection-wrapper TABLE TD.spacer {
	WIDTH: 100px
}

.selection-wrapper TABLE TD.icon-spacer {
	WIDTH: 60px
}

.selection-wrapper .class-label {
	MARGIN: 10px 0px 5px;
	DISPLAY: block;
	COLOR: #bbd;
	-moz-text-shadow: 0px 0px 20px #FEE;
	-webkit-text-shadow: 0px 0px 20px #FEE;
	text-shadow: 0px 0px 20px #FEE
}

.selection-wrapper TABLE {
	MARGIN: 0px auto;
	WIDTH: 930px;
	BORDER-COLLAPSE: collapse
}

.selection-wrapper .first .class-label {
	MARGIN-TOP: 0px
}

.selection-wrapper TABLE A {
	COLOR: #000;
	TEXT-DECORATION: none
}

#tree-save-wrapper {
	BACKGROUND-COLOR: BLACK;
	Z-INDEX: 100;
	BORDER-BOTTOM: #1097d2 2px solid;
	BORDER-LEFT: #1097d2 2px solid;
	PADDING-BOTTOM: 20px;
	PADDING-LEFT: 20px;
	WIDTH: 800px;
	PADDING-RIGHT: 20px;
	DISPLAY: none;
	COLOR: #e4f7ff;
	FONT-SIZE: 11px;
	BORDER-TOP: #1097d2 2px solid;
	BORDER-RIGHT: #1097d2 2px solid;
	PADDING-TOP: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 15px #1097d2;
	-webkit-box-shadow: 0px 0px 15px #1097d2;
	box-shadow: 0px 0px 15px #1097d2
}

#tree-save-wrapper .intro {
	DISPLAY: block;
	MARGIN-BOTTOM: 5px;
	COLOR: #f1be55;
	FONT-SIZE: 15px;
	FONT-WEIGHT: bold
}

#tree-save-wrapper .value {
	COLOR: #e4f7ff
}

#save-overlay {
	BACKGROUND-COLOR: #000;
	DISPLAY: none
}