*,*:before,*:after {
	box-sizing: border-box;
}

html,body {
	background:black;
	color:white;
}

#wrap {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	overflow: hidden;
}

#board {
	height: 100%;
	width: 100%;
}

.disabled .orb {
	opacity: 0.6;
}

.highlight-salt .symbol-salt .orb-fill,
.highlight-air .symbol-air .orb-fill,
.highlight-fire .symbol-fire .orb-fill,
.highlight-water .symbol-water .orb-fill,
.highlight-earth .symbol-earth .orb-fill,
.highlight-mercury .symbol-mercury .orb-fill,
.highlight-lead .symbol-lead .orb-fill,
.highlight-tin .symbol-tin .orb-fill,
.highlight-iron .symbol-iron .orb-fill,
.highlight-copper .symbol-copper .orb-fill,
.highlight-silver .symbol-silver .orb-fill,
.highlight-gold .symbol-gold .orb-fill,
.highlight-vitae .symbol-vitae .orb-fill,
.highlight-mors .symbol-mors .orb-fill {
	stroke: yellow;
	stroke-width: 7px;
}

.orb.disabled .orb-glow,
.orb.disabled .orb-shadow,
.orb.disabled:hover .orb-glow,
.orb.disabled:hover .orb-shadow {
	opacity: 0;
}

.orb {
	cursor: pointer;
}

.orb.disabled {
	cursor: default;
	opacity: 0.6;
}

.orb-glow,
.orb-shadow {
	transition: opacity linear 0.1s;
}

.orb.selected .orb-glow,
.orb:hover .orb-glow  {
	opacity: 1;
}

.orb.selected .orb-shadow,
.orb:hover .orb-shadow {
	opacity: 0;
}