.hint {
	POSITION: relative; DISPLAY: inline-block
}
.hint:before {
	Z-INDEX: 1000000; POSITION: absolute; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; opacity: 0; pointer-events: none
}
.hint:after {
	Z-INDEX: 1000000; POSITION: absolute; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; opacity: 0; pointer-events: none
}
.hint:hover:before {
	opacity: 1
}
.hint:hover:after {
	opacity: 1
}
.hint:before {
	Z-INDEX: 1000001; BORDER-BOTTOM: transparent 6px solid; POSITION: absolute; BORDER-LEFT: transparent 6px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: transparent 6px solid; CONTENT: ''; BORDER-RIGHT: transparent 6px solid
}
.hint:after {
	PADDING-BOTTOM: 8px; LINE-HEIGHT: 12px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; WHITE-SPACE: nowrap; BACKGROUND: #383838; COLOR: white; FONT-SIZE: 12px; CONTENT: attr(data-hint); PADDING-TOP: 8px; text-shadow: 0 -1px 0px black; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3)
}
.hint--top:before {
	BORDER-TOP-COLOR: #383838
}
.hint--bottom:before {
	BORDER-BOTTOM-COLOR: #383838
}
.hint--left:before {
	BORDER-LEFT-COLOR: #383838
}
.hint--right:before {
	BORDER-RIGHT-COLOR: #383838
}
.hint--top:before {
	MARGIN-BOTTOM: -12px
}
.hint--top:after {
	MARGIN-LEFT: -18px
}
.hint--top:before {
	BOTTOM: 100%; LEFT: 50%
}
.hint--top:after {
	BOTTOM: 100%; LEFT: 50%
}
.hint--top:hover:before {
	-webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px)
}
.hint--top:hover:after {
	-webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px)
}
.hint--bottom:before {
	MARGIN-TOP: -12px
}
.hint--bottom:after {
	MARGIN-LEFT: -18px
}
.hint--bottom:before {
	TOP: 100%; LEFT: 50%
}
.hint--bottom:after {
	TOP: 100%; LEFT: 50%
}
.hint--bottom:hover:before {
	-webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px)
}
.hint--bottom:hover:after {
	-webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px)
}
.hint--right:before {
	MARGIN-BOTTOM: -6px; MARGIN-LEFT: -12px
}
.hint--right:after {
	MARGIN-BOTTOM: -14px
}
.hint--right:before {
	BOTTOM: 50%; LEFT: 100%
}
.hint--right:after {
	BOTTOM: 50%; LEFT: 100%
}
.hint--right:hover:before {
	-webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px)
}
.hint--right:hover:after {
	-webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px)
}
.hint--left:before {
	MARGIN-BOTTOM: -6px; MARGIN-RIGHT: -12px
}
.hint--left:after {
	MARGIN-BOTTOM: -14px
}
.hint--left:before {
	BOTTOM: 50%; RIGHT: 100%
}
.hint--left:after {
	BOTTOM: 50%; RIGHT: 100%
}
.hint--left:hover:before {
	-webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px)
}
.hint--left:hover:after {
	-webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px)
}
.hint--error:after {
	BACKGROUND-COLOR: #b34e4d; text-shadow: 0 -1px 0px #5a2626
}
.hint--top.hint--error:before {
	BORDER-TOP-COLOR: #b34e4d
}
.hint--bottom.hint--error:before {
	BORDER-BOTTOM-COLOR: #b34e4d
}
.hint--left.hint--error:before {
	BORDER-LEFT-COLOR: #b34e4d
}
.hint--right.hint--error:before {
	BORDER-RIGHT-COLOR: #b34e4d
}
.hint--warning:after {
	BACKGROUND-COLOR: #c09854; text-shadow: 0 -1px 0px #6d5228
}
.hint--top.hint--warning:before {
	BORDER-TOP-COLOR: #c09854
}
.hint--bottom.hint--warning:before {
	BORDER-BOTTOM-COLOR: #c09854
}
.hint--left.hint--warning:before {
	BORDER-LEFT-COLOR: #c09854
}
.hint--right.hint--warning:before {
	BORDER-RIGHT-COLOR: #c09854
}
.hint--info:after {
	BACKGROUND-COLOR: #3986ac; text-shadow: 0 -1px 0px #193c4c
}
.hint--top.hint--info:before {
	BORDER-TOP-COLOR: #3986ac
}
.hint--bottom.hint--info:before {
	BORDER-BOTTOM-COLOR: #3986ac
}
.hint--left.hint--info:before {
	BORDER-LEFT-COLOR: #3986ac
}
.hint--right.hint--info:before {
	BORDER-RIGHT-COLOR: #3986ac
}
.hint--success:after {
	BACKGROUND-COLOR: #458746; text-shadow: 0 -1px 0px #1a331a
}
.hint--top.hint--success:before {
	BORDER-TOP-COLOR: #458746
}
.hint--bottom.hint--success:before {
	BORDER-BOTTOM-COLOR: #458746
}
.hint--left.hint--success:before {
	BORDER-LEFT-COLOR: #458746
}
.hint--right.hint--success:before {
	BORDER-RIGHT-COLOR: #458746
}
.hint--always:after {
	opacity: 1
}
.hint--always:before {
	opacity: 1
}
.hint--top.hint--always:after {
	-webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px)
}
.hint--top.hint--always:before {
	-webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px)
}
.hint--bottom.hint--always:after {
	-webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px)
}
.hint--bottom.hint--always:before {
	-webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px)
}
.hint--left.hint--always:after {
	-webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px)
}
.hint--left.hint--always:before {
	-webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px)
}
.hint--right.hint--always:after {
	-webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px)
}
.hint--right.hint--always:before {
	-webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px)
}