@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

*, html, body {
	font-family: 'Fjalla One', sans-serif;
	color: white;
	line-height: 1.3em;

	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}

html {
	background: black url("bg.jpg") top left;
	background-size: cover;
	background-attachment: fixed;
}

* {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

ul > li {
	margin-left: 2em;
}

th {
	text-align: left;
}

th, td {
	vertical-align: middle;
}

a {
	text-decoration: underline;
}

.warning {
	color: yellow;
}

.error {
	color: red;
}

.hidden {
	display: none;
}

/*** Main ***/

#main > footer a {
	color: #bbb;
}

#main > footer a:hover {
	color: #3885AB;
}

#main > footer {
	color: #bbb;
	clear: both;
	text-align: right;
	font-weight: bold;
	margin-top: 3em
}

#main > footer #by-line {
	margin-right: 1em;
}

#builder {
	width: 84em;
	margin: 0 auto;
}

#build-name-wrapper {
	text-align: center;
}

input#build-name {
	font-size: 3em;
	line-height: 1em;
	margin: 0.5em 0;
	padding: 0.5em 0;
	background: none !important;
	border: none !important;
	display: inline;
}


/*** Build Overview ***/

.overview-tree-title > div {
	-moz-transform: rotate(-90.0deg);
	-o-transform: rotate(-90.0deg);
	-webkit-transform: rotate(-90.0deg);
	filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
	transform: rotate(-90.0deg);
}

td.overview-tree-title {
	width: 1em;
}

#build-overview table {
	width: 100%;
}

#build-overview table td,
#build-overview table th {
	padding: 0.375em 0;
}

#build-overview .overview-tree-heading {
	text-align: center;
}

#build-overview .overview-tier-heading {
	padding-left: 1em;
}

.skill {
	-webkit-touch-callout: none;
	-webkit-user-select: none;/
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#build-overview .skill {
	margin: 0.5em 0.5em;
	padding: 0.25em 0.5em;
}

#build-overview .skill.availible {
	cursor: pointer;
}

#build-overview .skill.taken-basic,
#build-overview .skill.taken-aced {
	background: #3885AB;
}

#build-overview .skill.taken-aced {
	color: #fc901d;
}

#build-overview tr.new-tree {
	border-top: 3px #fff solid;
}

#build-overview tr:not(.new-tree) td {
	border-top: 1px #ddd solid;
}

#build-overview tr.new-tree td {
	padding-top: 0.5em;
}

#build-overview .overview-subtree-title {
	width: 6em;
	font-style: italic;
	text-decoration: underline;
	color: #ddd;
	cursor: pointer;
}

#build-overview .subtree-points {
	text-align: center;
}

/*** Skill Tree ***/

#current-subtree,
#build-overview {
	float: left;
	width: 60em;
	padding-left: 1.5em;
}

h1,
#current-subtree > heading,
#build-name {
	font-weight: bold;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	width: 100%;
	display: block;
}


h1#site-title {
	font-size: 1.25em;
	color: #bbb;
	line-height: 1em;
	margin-top: 1em;
	text-align: center;
}

.alert.big {
	font-size: 2em;
}

.alert {
	color: yellow;
	text-align: center;
	display: block;
	margin: 1em 0;
}

#current-subtree > table {
	margin: 0 auto;
}

#current-subtree .tree heading {
	font-weight: bold;
}

#current-subtree .tree > heading {
	display: block;
	font-size: 2em;
}

#current-subtree .subtree {
	display: table;
	width: 40em;
}

#current-subtree .tier {
	display: table-row;
}

#current-subtree .skill {
	display: table-cell;
	width: 19em;
	padding: 0.5em;
	margin: 0 auto;
}

.skill:not(.availible) {
	opacity: 0.666;
	cursor: not-allowed;
}

#current-subtree .skill.availible,
#current-subtree .skill.taken {
	opacity: 1;
	cursor: pointer;
}

#current-subtree .tier-number {
	font-weight: bold;
	padding-right: 2em;
	vertical-align: middle;
}

#current-subtree .skill:first-child:last-child {
	font-weight: normal;
	display: block;
}

#current-subtree .skill heading {
	display: block;
	text-align: center;
}

#current-subtree .basic,
#current-subtree .aced {
	padding: 0.5em;
	border: 0.125em solid #bbb;
	color: #bbb;
	overflow-y: hidden;
}

#current-subtree .basic.taken,
#current-subtree .aced.taken {
	border-color: #fc901d;
	color: #fff;
}

#current-subtree .availible > .aced.basic-needed {
	opacity: 0.666;
	cursor: auto;
}

#current-subtree .basic > .description,
#current-subtree .aced > .description {
	height: 5em;
}

#current-subtree .skill > heading {
	font-weight: bold;
}

#current-subtree .skill > .basic {
	background-color: #2C536D;
}

#current-subtree .skill > .aced {
	background-color: #3885AB;
}

#current-subtree .skill .cost {
	text-align: right;
	font-weight: bold
}

#current-subtree td.tier-number {
	text-align: center;
}

/*** Info Pane ***/

#info-pane {
	float: left;
	width: 17.5em;
	background: rgba(44, 83, 109, 0.925);
	padding: 1em;
	border: 0.125em #bbb solid;
}

#points.maxed {
	font-weight: bold;
}

#points-message {
	margin-left: 0.5em;
}

#trees-list {
	margin-top: 1em;
}

#trees-list > li > heading {
	color: #bbb;
}

#trees-list > li {
	margin-left: 0;
	margin-bottom: 0.5em;
}

#trees-list > li:last-child {
	margin-bottom: 0;
}

#build-overview-link {
	margin-bottom: 0.25em
}

#build-overview-link,
#trees-list .subtree-link,
#reset-build {
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
	width: 13em;
}

#build-overview-link:hover,
#build-overview-link.active:hover
#trees-list .subtree-link:hover,
#reset-build:hover {
	color: #fca64d;
}

#trees-list .points:before {
	content: "(";
}

#trees-list .points:after {
	content: ")";
}

.subtree-info.active *,
#build-overview-link.active {
	color: #fc901d;
}

#reset-build {
	font-size: 0.75em;
}