gw2t.css

/*
	Design: "Synchronicity" with Guild Wars 2 assets and motifs.
	Website: GW2Timer world boss timer and map guide.
	Measurements: minimum window size is 360x580, which is only enough for the
	clock and timers list (all of the right panel).
	CSS3: uses gradient, text-shadow, box-shadow modules.
	Version: see gw2t.js - 2014.04.18 created

	CREDITS:
	Game assets and map tiles are copyright 2012 ArenaNet, Inc.
	extracted using https://github.com/kytulendu/Gw2Browser
	PNGs are compressed using http://pnggauntlet.com
	CSS sprites generated with http://spritegen.website-performance.org
	Gradient generated with http://colorzilla.com/gradient-editor
	Design influenced by http://gw2stuff.com by WintrySnowman

	CONVENTIONS:
	Classes and IDs are lower camel case: exampleClass
	Classes of sprites are snake case prefixed by type: example_sprite_name
	CSS properties are ordered as: structure, content, style
	The first word is its "type", and three-letter abbreviations are "namespaces"
	Divisors of 360: 1, 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 18, 20, 24,
	30, 36, 40, 45, 60, 72, 90, 120, 180.
	four-values order: top, right, bottom, left;

	RESERVED TAGS:
	<ins> sprite images
	<var> generated or mutable text
	<dfn> map coordinates link
	<kbd> buttons clickable
	<samp> bar graphs and progress bars, use inner tag <s> for progress
	<aside> appended content

	TABLE OF CONTENTS (Ctrl+F "AtsignAtsignLetter" to jump to section)

	M - Map pane
	K - Clock pane
	B - Menu bar pane
	C - Chains page
	O - Options page
	U - Utility styles
	P - Color palette
*/

/* Reset styles
----------------------------------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,
caption,center,cite,code,dd,del,details,dfn,div,dl,dt,fieldset,figcaption,
figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,
label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,
sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video
{margin:0;padding:0;border:0;outline:0;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,
section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,
q{quotes:none}blockquote:after,blockquote:before,q:after,
q:before{content:"";content:none}ins{text-decoration:none}
del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* Structure (same order as browser view)
body > windowMain
{
	panelLeft[mapPane], panelRight[paneClock, plateMenu, paneContent]
}
----------------------------------------------------------------------------- */
@font-face {
	font-family: "Menomonia";
	src: url("https://d1h9a8s8eodvjz.cloudfront.net/fonts/menomonia/08-02-12/font/menomonia.woff") format("woff");
}
@keyframes aniPulsate { /* Used on elements with background linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.5)) */
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}
@keyframes aniSpin { /* Used on throbbers */
	100% { transform: rotate(360deg); }
}
@keyframes aniHighlight { /* Used on elements with :hover and gradient background, to mimic GW2's highlight of list elements */
	0% { background-size: 25% 25%; }
	100% { background-size: 100% 100%; }
}
@keyframes aniGlow {
	0% { box-shadow: 0px 0px 0px #e7e3bd; }
	100% { box-shadow: 0px 0px 16px #e7e3bd; }
}
@keyframes aniFlicker {
	0% { box-shadow: 0px 0px 0px #e7e3bd; }
	50% { box-shadow: 0px 0px 16px #e7e3bd; }
	100% { box-shadow: 0px 0px 0px #e7e3bd; }
}
@keyframes aniFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes aniFadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes aniFadeInPartial {
	0% { opacity: 0; }
	100% { opacity: 0.9; }
}
@keyframes aniFadeOutPartial {
	0% { opacity: 1; }
	100% { opacity: 0.1; }
}
@keyframes aniDisplayFadeIn {
	0% { display: none; opacity: 0; }
	1% { display: block; opacity: 0; }
	100% { display: block; opacity: 1; }
}


/* =============================================================================
 *  Leaflet.js map plugin
 * ========================================================================== */

.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
}
.leaflet-container {
	overflow: hidden;
	-ms-touch-action: none;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	-webkit-user-drag: none;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
}
/* map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container img {
	max-width: none !important;
}
/* stupid Android 2 doesn't understand "max-width: none" properly */
.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
}
.leaflet-tile-loaded {
	visibility: inherit;
}
.leaflet-zoom-box {
	width: 0;
	height: 0;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
}

.leaflet-tile-pane    { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane  { z-index: 5; }
.leaflet-marker-pane  { z-index: 6; }
.leaflet-popup-pane   { z-index: 7; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
}

/* control positioning */
.leaflet-control {
	position: relative;
	z-index: 7;
	pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
}
.leaflet-top {
	top: 0;
}
.leaflet-right {
	right: 0;
}
.leaflet-bottom {
	bottom: 0;
}
.leaflet-left {
	left: 0;
}
.leaflet-control {
	float: left;
	clear: both;
}
.leaflet-right .leaflet-control {
	float: right;
}
.leaflet-top .leaflet-control {
	margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
	margin-left: 10px;
}
.leaflet-right .leaflet-control {
	margin-right: 10px;
}

/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	     -o-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-tile-loaded,
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile,
.leaflet-touching .leaflet-zoom-animated {
	-webkit-transition: none;
	   -moz-transition: none;
	     -o-transition: none;
	        transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
}

/* visual tweaks */
.leaflet-container {
	background: #ddd;
	outline: 0;
}
.leaflet-container a {
	color: #0078A8;
}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
}

/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* general toolbar styles */
.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
}

/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px "Lucida Console", Monaco, monospace;
	text-indent: 1px;
}
.leaflet-control-zoom-out {
	font-size: 20px;
}

.leaflet-touch .leaflet-control-zoom-in {
	font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
	font-size: 24px;
}

/* layers control */
.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
}
.leaflet-control-layers label {
	display: block;
}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
}

/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
}
.leaflet-control-attribution a {
	text-decoration: none;
}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: content-box;
	     box-sizing: content-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
}

/* popup */
.leaflet-popup {
	position: absolute;
	text-align: center;
}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
}
.leaflet-popup-content p {
	margin: 18px 0;
}
.leaflet-popup-tip-container {
	margin: 0 auto;
	width: 40px;
	height: 20px;
	position: relative;
	overflow: hidden;
}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;
	margin: -10px auto 0;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
}

/* div icon */
.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
}


/* =============================================================================
 *  Top level content and cross used elements
 * ========================================================================== */

html, body {
	width: 100%;
	height: 100%;
	background: transparent;
}

body {
	position: relative;
	overflow: hidden;
}

b {
	font-weight: bold;
}
code, .cssMonospace {
	font-family: monospace;
}
ins {
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	background-repeat: no-repeat;
}
img {
	vertical-align: middle;
}

.jsScrollable { /* Apply to containers that shall have a scroll bar */
	position: relative;
	overflow: hidden;
}

.jsClip:hover { /* A clipboard button */
	border-radius: 16px;
	box-shadow: 0px 0px 5px white;
	background: url("img/ui/copy.png");
}
.jsClip:active {
	opacity: 0.5;
}

.jsSuspended { /* Apply to any element that should be temporarily unclickable */
	pointer-events: none;
	opacity: 0.4;
	text-decoration: line-through;
}
.jsSleeped {
	opacity: 0.01 !important;
	transition: opacity 0.4s !important;
}

.cntComposition ::selection {
	background: #66aaff;
}

#itemConsole {
	display: none;
}
#cslContent, #itemWarning {
	max-width: 62%;
	max-height: calc(100% - 72px);
	position: fixed; z-index: 10;
	top: 24px;
	left: 24px;
	font-family: Consolas, monospace;
	font-size: 16px;
	color: lime;
	text-shadow:
		0px 1px 1px #000,
		0px -1px 1px #000,
		1px 0px 1px #000,
		-1px 0px 1px #000;
}
#cslContent {
	padding: 4px 10px 4px 10px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid black;
	border-left: 8px solid rgba(0, 0, 0, 0.6);
	border-radius: 2px;
}
#itemWarning {
	background: #111;
	opacity: 0.3;
}
#cslButtons {
	position: absolute; z-index: 11;
	left: 8px;
	top: 8px;
}
#cslButtons kbd {
	top: 0px;
}
#cslClose {
	left: 0px;
}
#cslSelect {
	left: 32px;
}
#cslToggle {
	left: 64px;
}
#cslButtons kbd {
	opacity: 0.8;
}
#cslButtons kbd:hover {
	opacity: 1;
}
#cslContent a, #itemWarning a {
	color: limegreen;
	text-decoration: underline;
}
#cslContent a:hover, #itemWarning a:hover {
	color: greenyellow;
}
.cslModal { /* Container of HTML to be written in the console as messages */
	max-width: 360px;
}
.cslText {
	width: 100%;
	min-width: 360px;
	height: 180px;
}
.cslUrgent {
	padding: 16px;
	background-image: url("img/background/stripe.png");
	border-top: 4px solid rgba(255, 34, 0, 0.4);
	border-bottom: 4px solid rgba(255, 34, 0, 0.4);
}

#jsAuditFrame, #jsTTSAudio {
	display: none;
}

#windowMain {
	display: table;
	width: 100%; height: 100%;
	background: black;
}

.panelMain {
	display: table-cell;
	height: 100%;
}

/*
 * Style for qTip tooltip JS plugin by Craig Erskine.
 */
.cssTooltip, #qTip {
	padding: 4px 6px 4px 6px;
	border: 2px solid #111;
	border-radius: 2px;
	text-align: left;
	background-image: url("img/background/tooltip.png");
	background-size: cover;
	text-shadow: 0px 0px 2px black;
	box-shadow: 0px 0px 2px #555;
	opacity: 1;
}
#qTip {
	display: none;
	position: absolute; z-index: 1000;
	max-width: 720px;
	line-height: normal;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #eee;
	pointer-events: none;
}
#qTip dfn { /* Highlight color for emphasis text in tooltip */
	background: none;
	color: #ffcc77;
}
#qTip cite { /* Instructional text */
	font-family: Trebuchet MS, Menomonia;
	font-weight: normal;
	font-size: 17px;
}

/*
 * Item details tooltip.
 */
.itmTooltip {
	max-width: 380px;
	line-height: 18px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 16px;
	font-weight: normal;
	color: white;
}
.itmName {
	font-family: Menomonia;
	font-size: 18px;
}
.itmIcon {
	width: 40px; height: 40px;
}
.itmIconMain {
	border-top: 1px solid #5f6569;
	border-left: 1px solid #605f5e;
	border-right: 1px solid #c8caca;
	border-bottom: 1px solid #c9caca;
	border-radius: 1px;
	margin-right: 6px;
}
.itmSlotIcon {
	width: 20px; height: 20px;
}
.itmAttr {
	color: #00ff00;
}
.itmBuff, .itmUpgrade {
	color: #5599ff;
}
.itmGrayed {
	color: #aaaaaa;
}
.itmText {
	color: white;
}
.itmColor_abilitytype { color: #ffcc77; }
.itmColor_flavor { color: #99eedd; }
.itmColor_reminder { color: #aaaaaa; }
.itmColor_warning { color: #ee0000; }
.itmConsumableLine {
	display: table;
}
.itmConsumableIcon {
	display: inline-block;
	vertical-align: top;
}
.itmConsumableDesc {
	display: table-cell;
	line-height: 16px;
}

/* 
 * Item short printout in console.
 */
.itmPreface {
	width: 100%;
	display: table;
	margin-bottom: 4px;
}
.itmPrefaceLeft, .itmPrefaceRight {
	display: inline-block;
}
.itmPrefaceRight {
	display: table-cell;
	padding-left: 8px;
	vertical-align: middle;
	text-align: right;
}
.itmPrefaceIcon {
	display: inline-block;
	border: 1px solid #2f2b29;
	outline: 1px solid #595859;
}
.itmPrefaceIcon:hover {
	border: 1px solid #ffcc77;
}
.itmPrefaceIconImage {
	width: 64px; height: 64px;
}
.itmPrefaceName {
	font-family: Menomonia;
	font-size: 24px;
}

/*
 * Achievement tooltips, also reuseable for other API information.
 */
.achWrap {
	display: table;
}
.achIcon {
	display: table-cell;
	vertical-align: top;
	margin-right: 8px;
	max-width: 128px; max-height: 128px;
}
.achText {
	display: table-cell;
	vertical-align: top;
}
.achName {
	color: #ffcc77;
}
.achRequirement {
	margin-top: 6px;
}
.achInstruction {
	margin-top: 6px;
	color: white;
}
.achDescription {
	margin-top: 6px;
	font-style: italic;
	color: #aaaaaa;
}
.achCount {
	margin-top: 6px;
}
.achTier {
	margin-top: 6px;
}
.achPoints {
	margin-top: 12px;
	font-family: Menomonia;
	font-size: 18px;
	color: #ffcc77;
	opacity: 0.6;
}

/*
 * Trading Post transactions listing.
 */
.trsListings {
	padding: 8px;
	overflow: hidden;
	font-family: Trebuchet MS, Menomonia;
	font-size: 17px;
	font-weight: bold;
	border: 2px solid rgba(0, 0, 0, 0.5);
}
.trsListings table {
	min-width: 320px;
	float: left;
	margin-right: 8px;
	text-align: right;
	text-shadow: none;
}
.trsListings tbody {
	background: rgba(0, 0, 0, 0.8);
}
.trsListings td {
	padding: 4px;
	color: #4f4e49;
}
.trsListings th {
	padding: 4px;
	color: #d3ad64;
}
.trsListings tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.1);
}
.trsListings tbody tr:hover {
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-image: linear-gradient(to right, rgba(161, 151, 123, 0.8) 0%, transparent 100%);
	animation: aniHighlight 0.4s;
}

/*
 * Item search bar.
 */
.itmSearchContainer {
	position: relative;
}
.itmSearchInline {
	display: inline-block;
}
.itmSearchResultContainer {
	position: absolute; z-index: 2;
	text-align: left;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	color: white;
}
.itmSearchResultScroll {
	width: 300px;
	max-height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px;
}
.itmSearchResultEntry {
	display: block;
	white-space: nowrap;
}
.itmSearchResultEntry img {
	width: 16px; height: 16px;
	margin-right: 8px;
}
.itmSearchResultEntry:hover img {
	width: 32px; height: 32px;
}
.itmSearchSelected img {
	width: 32px; height: 32px;
}
.itmSearchResultPrice {
	margin-left: 8px;
}
.itmSearchResultPrev {
	margin-right: 16px;
}
.itmSearchResultNext, .itmSearchResultPrev {
	font-size: 16px;
}
.itmSearchResultNext:hover, .itmSearchResultPrev:hover {
	color: red;
}

/*
 * Style for perfect-scrollbar JS plugin by Hyunje Alex Jun.
 */
.ps-container {
	overflow: hidden !important;
}
.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
	display: block;
}
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
	background-color: #999;
}
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
	background-color: #999;
}
.ps-container > .ps-scrollbar-x-rail {
	display: none;
	position: absolute;
	border-radius: 4px;
	opacity: 0;
	transition: background-color .2s linear, opacity .2s linear;
	top: 0px;
	height: 8px;
}
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
	position: absolute;
	background-color: #aaa;
	border-radius: 4px;
	transition: background-color .2s linear;
	bottom: 0;
	height: 8px;
}
.ps-container > .ps-scrollbar-y-rail {
	display: none;
	position: absolute;
	border-radius: 4px;
	opacity: 0;
	transition: background-color .2s linear, opacity .2s linear;
	right: 0px;
	width: 8px;
}
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
	position: absolute;
	background-color: #aaa;
	border-radius: 4px;
	transition: background-color .2s linear;
	right: 0;
	width: 8px;
}
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
	background-color: #999;
}
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
	background-color: #999;
}
.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
	opacity: 0.6;
}
.ps-container:hover > .ps-scrollbar-x-rail:hover {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
	background-color: #999;
}
.ps-container:hover > .ps-scrollbar-y-rail:hover {
	background-color: #eee;
	opacity: 0.9;
}
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
	background-color: #999;
}

/* Custom cursors
----------------------------------------------------------------------------- */

/* Non-interactive */
html, body,
#sectionChains_Timetable .chnTitle h1, input[type="text"].trdOutput {
	cursor: url("img/cursor/auto.cur"), auto;
}

/* Clickable */
.curClick, .jsClip, a, kbd, input, select, label, button,
.plateMenuButton, .btnWindow, .hudSelect, .itemContext li, .chnCheck:hover, .chnTitle time {
	cursor: url("img/cursor/pointer.cur"), pointer;
}

/* Toggleable */
.curToggle, .btnToggle, .btnVertical, .btnHorizontal,
.chnCategoryHeader, .chnTitle h1, .jsSection, .jsHelpCollapsible {
	cursor: url("img/cursor/toggle.cur"), pointer;
}

/* Zoomable */
.curZoom, dfn, .mapZoneLinks li, .mapZoneLinks dt, .chnDetails ol li span {
	cursor: url("img/cursor/zoom.cur"), pointer;
}

/* Draggable */
.curDrag, .leaflet-dragging .leaflet-container {
	cursor: url("img/cursor/move.cur"), move;
}
#itemAutoscroll {
	display: none;
	position: fixed; z-index: 100;
	width: 32px; height: 32px;
	pointer-events: none;
}

/* Help */
.curHelp, .cssHelp, .jsHelpTooltip, .chnDetails ol li ins {
	cursor: url("img/cursor/help.cur"), help;
}

/* Context menus
----------------------------------------------------------------------------- */
.itemContext {
	display: none;
	position: fixed; z-index: 1000;
	font-family: Trebuchet MS, Menomonia;
	font-size: 17px;
	line-height: 110%;
	color: white;
	text-shadow: 0px 0px 2px black;
}
.itemContext, .itemContextSubmenu:hover > ul {
	min-width: 150px;
	border: 2px solid #aaa;
	border-radius: 2px;
	background: rgba(33, 32, 33, 0.9);
	box-shadow: 0px 0px 3px #888;
}
.itemContextAutoWidth {
	min-width: auto !important;
}

.itemContext li {
	margin-bottom: 6px;
	padding: 2px 4px 2px 6px;
	background-repeat: repeat-y;
}
.itemContext li:last-child {
	margin-bottom: 0;
}
.itemContext li:hover {
	background-image: linear-gradient(to right, #7c7253 0%, transparent 100%);
	animation: aniHighlight 0.4s;
}
.itemContext kbd { /* The submenu icon */
	font-family: sans-serif;
	font-size: 80%;
	color: #ffeebb;
}
.itemContextSubmenu > ul {
	display: none;
}
.itemContextSubmenu:hover > ul {
	display: inline-block;
	position: absolute; z-index: 2;
	left: 50%;
	white-space: nowrap;
	animation: aniFadeInPartial 0.2s;
}
.mapContextSlots {
	max-height: 180px;
}

/* Compass Placer */
.mapContextCompassList img {
	width: 32px; height: 32px;
	border: 1px solid transparent;
}
.mapContextCompassList img:hover {
	border: 1px solid gold;
}
.mapContextCompassList img:active {
	opacity: 0.6;
}
.mapCompassCustom {
	display: block;
	margin-top: 4px;
}
.mapCompass {
	border: 1px solid orange;
	border-radius: 4px;
}

/* Composition container for default writing style
----------------------------------------------------------------------------- */
.cntComposition {
	width: auto; min-height: 36px;
	margin: 8px;
	margin-left: 0px;
	padding: 4px 8px 18px 12px;
	font-family: sans-serif;
	font-size: 12px;
	line-height: 150%;
	color: #eee;
	text-shadow: 0px 0px 2px black;
	background: linear-gradient(to right, rgba(17, 17, 17, 1) 0%, rgba(51, 51, 51, 0.6) 100%);
	border: 1px solid rgba(17, 17, 17, 0.5);
	border-bottom: 4px solid rgba(17, 17, 17, 0.9);
	border-radius: 2px;
}

.cntPopup, .hudPopup {
	display: block;
	position: absolute;
	margin: 0;
	padding: 10px 18px 10px 16px;
	background: rgba(0, 0, 0, 0.8);
	background-image: url("img/background/hud.png");
	border-top: 4px solid #111;
	border-bottom: 4px solid #111;
	border-radius: 2px;
	box-shadow: 0px 0px 2px #555;
	animation: aniDisplayFadeIn 0.2s;
}

.cntComposition input[type="text"], .cntComposition textarea, input[type="number"], .cssInputText {
	width: 90px;
	margin: 0;
	padding: 2px;
	overflow: hidden;
	border: 1px solid rgba(255, 238, 187, 0.2);
	background: url("img/background/stripe.png");
	font-family: sans-serif;
	color: #ffddcc;
	transition: border 0.2s;
}

.cntComposition input[type="text"]:hover, .cntComposition textarea:hover, input[type="number"]:hover, .cssInputText:hover {
	border: 1px solid rgba(255, 238, 187, 0.6);
}
input[type="text"].cssInputActive {
	background: linear-gradient(to right, #7c7253 0%, transparent 100%), url("img/background/stripe.png");
	color: #ddff77;
}
input[type="text"].cssInputFocused {
	border: 1px solid red;
}
input[type="text"].cssInputTextLine {
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
input[type="text"]:focus, textarea:focus, button:focus {
    border: 1px solid rgba(255, 238, 187, 0.8);
	outline: none;
}

.cntComposition fieldset {
	display: inline-block;
	padding: 4px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 238, 187, 0.2);
}
.cntComposition fieldset legend {
	font-weight: bold;
}
.cntComposition fieldset label:hover {
	background: rgba(255, 255, 255, 0.1);
}

.cntComposition label {
	display: block;
	clear: both;
	margin-bottom: 8px;
}

button, .cssButton {
	min-width: 24px; min-height: 24px;
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	vertical-align: middle;
	border: 1px solid rgba(255, 238, 187, 0.2);
	border-radius: 4px;
	background: linear-gradient(135deg, #111 0%, #222 50%, #000 51%, #222 100%);
	font-family: Trebuchet MS, Menomonia;
	color: #ddccaa;
	transition: border 0.2s;
	text-decoration: none;
	text-shadow:
		1px 1px 0px #000,
		-1px -1px 0px #000,
		1px -1px 0px #000,
		-1px 1px 0px #000,
		1px 1px 0px #000;
}
button:hover, .cssButton:hover {
	border: 1px solid rgba(255, 238, 187, 0.4);
	color: #ffeebb;
}
button:active, .cssButton:active, button.btnActive {
	background: #2d2619;
}
button img {
	width: 24px; height: 24px;
}

.cssCheckbox {
	display: inline-block;
	position: relative;
}
input[type="checkbox"] + .cssCheckboxImage {
	display: block;
	position: absolute;
	margin-top: -26px;
	margin-left: -6px;
	width: 24px; height: 24px;
	background-image: url("img/ui/uncheckbox.png");
}
input[type="checkbox"]:checked + .cssCheckboxImage {
	background-image: url("img/ui/checkbox.png");
}

.cntComposition hr {
	margin-top: 8px;
	margin-bottom: 4px;
}

.cntComposition h1, header.cntHeader {
	padding-top: 12px;
	margin-bottom: 8px;
	font-size: 22px;
}
header.cntHeader {
	font-variant: small-caps;
	text-decoration: none;
	letter-spacing: 2px;
	text-shadow: 0px 0px 2px #e4e0b3;
}
.cntComposition h2 {
	margin-top: 4px;
	margin-bottom: 2px;
	font-size: 18px;
}
.cntComposition h3 {
	margin-left: 12px;
	margin-bottom: 2px;
	font-size: 16px;
}
.cntComposition h1, .cntComposition h2, .cntComposition h3, header.cntHeader {
	font-family: Trebuchet MS, Menomonia;
	font-weight: bold;
	color: #e4e0b3;
}

.cntComposition p {
	margin-bottom: 16px;
}

.cntComposition a {
	color: #aaff55;
}
.cntComposition a:hover {
	color: #44dd44;
}
.cntComposition a:active {
	color: white;
}

.cntComposition dt {
	display: inline;
	font-weight: bold;
}

.cntComposition dd {
	margin-left: 12px;
}

dfn, .mapZoneLinks li, .mapZoneLinks dt {
	font-weight: bold;
	color: #ffcc77;
}
dfn:hover, .mapZoneLinks li:hover, .mapZoneLinks dt:hover {
	color: #ffdda6;
}
dfn:active, .mapZoneLinks li:active, .mapZoneLinks dt:active {
	color: white;
}

.cntIconExample {
	width: 24px; height: 24px;
}
.cntDivider {
	display: block;
	width: 100%; height: 2px;
	background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}
.cntOptionMini {
	display: inline-block;
	padding: 2px 4px 2px 4px;
	border: 1px solid gray;
}
.cntOptionMini label {
	display: inline;
}

.cntSearchContainer {
	display: block;
	position: relative;
	margin-top: 8px;
	margin-bottom: 8px;
	clear: both;
}
input[type="text"].cntSearch {
	display: block;
	width: 95%;
}
.cntSearchFiller {
	display: block;
	position: absolute;
	margin-top: 2px;
	margin-left: 4px;
	pointer-events: none;
}

.itemThrobber {
	display: block;
	width: 100%; height: 64px;
	text-align: center;
}
.itemThrobber em {
	display: inline-block;
	width: 64px; height: 64px;
	background: url("img/ui/throbber.png");
    animation: aniSpin 1s linear infinite;
}

.jsHelpTooltip, .jsHelpCollapsible {
	float: right;
	font-family: sans-serif;
	font-size: 12px;
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 2px;
	color: white;
	text-shadow: 0px 0px 2px #e4e0b3;
}
.jsHelpCollapsible:hover {
	color: #ddff77;
	text-decoration: underline;
}

textarea.jsCopyCode {
	width: 300px;
	font-family: monospace;
	color: #ddff77;
}


/* =============================================================================
 *  Left panel
 * ========================================================================== */
#panelMap, #panelApp {
	background: none;
}
#panelMap {
	background: linear-gradient(to right, #000 0%, #111 100%);
}

/* @@Map pane. z-index priority: Peripheral > Dashboard > Timeline
----------------------------------------------------------------------------- */
.mapPane {
	height: 100%;
	min-height: 220px;
}
#mapPane {
	background: url("img/background/space.jpg") repeat center;
}
#wvwPane {
	display: none;
	background: white;
}
#mapPane.mapPaneOff, #wvwPane.mapPaneOff {
	background: transparent;
}
#prjController, #itemProjector, #itemVignette, #mapContextToggleFloor, #wvwContextToggleFloor {
	display: none;
}

/* Top side: Touch menu (visible on touch devices only) */
.tchMenu {
	position: absolute; z-index: 2;
	left: 16px;
}
.tchButton {
	display: block;
	width: 64px; height: 64px;
	margin-bottom: 16px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.6;
}
.tchTogglePanel {
	background-image: url("img/touch/toggle_panel.png");
}
.tchZoomIn {
	background-image: url("img/touch/zoom_in.png");
}
.tchZoomOut {
	background-image: url("img/touch/zoom_out.png");
}

/* Bottom side: Timeline */
#itemTimeline {
	display: none;
	position: absolute; z-index: 1;
	bottom: 48px;
	margin-left: 24px;
	width: calc(100% - 48px);
	white-space: nowrap;
	text-shadow:
		0px 1px 1px #000,
		0px -1px 1px #000,
		1px 0px 1px #000,
		-1px 0px 1px #000;
}
#tmlTitle {
	display: none;
	position: absolute;
	top: 4px;
	left: 32px;
	padding: 0px 4px 0px 4px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 17px;
	color: white;
	opacity: 0.6;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}
#itemTimeline .btnWindow {
	top: -32px;
}
#tmlCondense {
	left: 16px;
}
#tmlOpaque {
	left: 48px;
}
#tmlIndicator, #tmlBisector {
	display: block;
	width: 2px;
	position: absolute;
	opacity: 0.6;
	pointer-events: none;
}
#tmlIndicator {
	z-index: -1;
	height: calc(100% + 24px);
	top: -24px;
	background: lime;
	opacity: 0.9;
	box-shadow: -1px 2px 4px lime;
}
#tmlIndicatorTime {
	position: absolute;
	left: 6px;
	font-family: Trebuchet MS, Menomonia;
	font-weight: bold;
	font-size: 16px;
	color: lime;
}
#tmlBisector {
	height: 100%;
	top: auto; left: 50%;
	margin-left: -2px;
	background: transparent;
	border-left: 2px dashed rgba(255, 136, 68, 0.3);
}
.tmlOpaque {
	background: rgba(0, 0, 0, 0.6);
	transition: background 0.4s;
}
.tmlOpaqueNot {
	background: none;
	transition: background 0.4s;
}
.tmlLine { /* A whole line representing a chain of events */
	height: 24px;
	line-height: 22px;
	transition: height 0.2s;
}
.tmlLineSpecial {
	height: 50px;
	transition: height 0.2s;
}
.tmlLine:hover .tmlSegment {
	outline: 1px solid #ff8844;
}
.tmlLine:hover .tmlLineCollapse {
	opacity: 1;
}
.tmlSegment { /* A division of a line representing an event */
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
	background-image: url("img/background/hud.png");
	outline: 1px solid rgba(255, 136, 68, 0.2);
	transition: background 1s;
}
.tmlTimeslice:first-child .tmlSegmentContent { /* The first segment of a line */
	margin-left: 24px;
}
#tmlHeader .tmlSegment {
	outline: none;
	background: none;
}
#tmlHeader:hover .tmlSegment {
	outline: 1px solid rgba(255, 136, 68, 1);
}
.tmlSegmentContent {
	display: table;
	height: 100%;
	margin-left: 4px;
}
.tmlLineCollapsePadding {
	display: inline-block;
	width: 20px;
}
.tmlLineCollapse {
	position: absolute; z-index: 10;
	left: 0;
	width: 24px; height: 24px;
	transition: opacity 0.1s;
	background: url("img/ui/close.png");
	background-size: 24px 24px;
	opacity: 0.2;
}
.tmlSegmentName, .tmlSegmentSpecial {
	vertical-align: middle;
	font-family: Menomonia;
	font-size: 16px;
	color: #ccc;
}
.tmlSegmentSpecial {
	display: block;
	visibility: hidden;
}
.tmlSegmentNameBoss {
	font-weight: bold;
	color: #ffaa22;
}
.tmlSegmentCountdown {
	padding-left: 4px;
	vertical-align: middle;
	font-family: sans-serif;
	font-size: 14px;
	color: #bbcc77;
}
.tmlSegmentTimestamp {
	display: table-cell;
	vertical-align: middle;
	font-family: Trebuchet MS, Menomonia;
	font-size: 11px;
	color: #ddff77;
	opacity: 0.9;
}
.tmlSegmentTimestampCondensed {
	font-size: 14px;
}
.tmlSegmentTimestampFutureFar {
	color: #ccc;
}
.tmlSegmentActive, #tmlHeader .tmlTimestampActive {
	background: rgba(255, 136, 68, 0.2);
	background-image: url("img/background/hud.png");
	outline: 1px solid rgba(0, 0, 0, 0.2);
	transition: background 1s;
}
.tmlSegmentActive .tmlSegmentNameBoss {
	color: lime;
}
.tmlIcon {
	width: 24px; height: 24px;
	margin-right: 2px;
	transition: opacity 0.2s;
}
.tmlIcon:hover {
	outline: 1px solid rgba(255, 136, 68, 1);
}
.tmlSegmentActive .tmlIcon {
	border-top: 1px solid lime;
	border-left: 1px solid lime;
	box-shadow: 0px 0px 10px lime;
}
.tmlStripe {
	position: absolute;
	top: -16px;
	margin-left: -16px;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	color: #ffaa22;
	transform: rotate(-30deg);
	transform-origin: left;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
#itemTimeline:hover .tmlStripe, .tmlOpaque .tmlStripe {
	opacity: 1;
}
.tmlSegmentActive .tmlStripe {
	color: lime;
}

/* Top right corner: Dashboard */
#dsbContainer {
	padding: 4px 10px 4px 10px;
	margin-bottom: 8px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 16px;
	color: #888888;
	text-shadow: 0px 0px 4px black;
	background: rgba(0, 0, 0, 0.4);
	background-image: url("img/background/hud.png");
	border-left: 4px solid rgba(0, 0, 0, 0.4);
	border-radius: 2px;
}
#dsbToggle {
	top: 8px;
	left: 12px;
	background: none;
}
#dsbContainer a {
	color: rgba(255, 238, 187, 0.8);
	text-decoration: none;
}
#dsbContainer a:hover, #dsbContainer u:hover, .dsbTab:hover u {
	color: rgba(255, 238, 187, 1);
}
.dsbTab {
	display: none;
	width: 100%;
	padding: 0px 4px 0px 4px;
	margin: 4px 0px 0px 0px;
	line-height: normal;
	font-family: Trebuchet MS, Menomonia;
	color: rgba(255, 238, 187, 0.8);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
	border: 2px solid rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	transition: border 0.4s;
}
.dsbTabEnabled {
	display: block;
}
.dsbTab:hover {
	color: rgba(255, 238, 187, 1);
	background: #2d2619;
	border-top: 2px solid rgba(255, 238, 187, 0.4);
}
.dsbTabActive {
	border-top: 2px solid rgba(255, 238, 187, 0.4);
	background: #2d2619;
}
.dsbTab img {
	width: 24px; height: 24px;
}
.dsbSubcontainer {
	display: none;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	border-top: 2px solid black;
	border-right: 1px solid black;
	border-bottom: 2px solid black;
	border-left: 1px solid black;
}
.dsbToggleIcon {
	margin-left: -8px;
}
#dsbAnnouncement {
	display: none;
	font-size: 14px;
	margin-bottom: 8px;
}
#dsbCountdown {
	display: none;
	margin-bottom: 8px;
}
#dsbCountdown:before, #dsbCountdown:after {
	content: "";
	display: block;
	width: 100%; height: 1px;
	margin-bottom: 8px;
	background: linear-gradient(to right, transparent 0%, #333 100%);
}
.dsbCountdownEntry {
	margin-bottom: 4px;
}
.dsbCountdownSide1 {
	white-space: nowrap;
	font-size: 14px;
}
#dsbCountdown time {
	font-family: Consolas, monospace;
}
#dsbCountdown code {
	margin-right: 8px;
}
.dsbCountdownDate {
	opacity: 0.3;
	transition: opacity 0.2s;
}
#dsbContainer:hover .dsbCountdownDate {
	opacity: 1;
}
#dsbSaleHeader:active, #dsbPactHeader:active {
	opacity: 0.8;
}
#dsbSaleSide0, #dsbSaleSide1 {
	display: inline-block;
	vertical-align: top;
}
.dsbSaleEntry {
	position: relative;
	width: 320px;
	white-space: nowrap;
}
.dsbSaleName {
	color: white;
}
.dsbSaleIcon, .dsbPactIcon {
	width: 48px; height: 48px;
	border-radius: 4px;
}
.dsbSaleEntry:hover .dsbSaleIcon, .dsbPactEntry:hover .dsbPactIcon {
	width: 64px; height: 64px;
	opacity: 0.9;
	border-radius: 8px;
	box-shadow: 0px 0px 10px #44bbff;
}
.dsbSaleInfo, .dsbPactInfo {
	position: absolute;
	right: 16px;
	margin-top: -12px;
	font-size: 12px;
}
.dsbSalePriceMoney {
	display: none;
	color: #ffde9d;
}
.dsbSaleEntry:hover .dsbSalePriceMoney {
	display: inline;
}
.dsbSaleEntry:hover .dsbSalePriceCoin {
	display: none;
}
.dsbDiscount {
	display: none;
}
.dsbSaleEntry:hover .dsbDiscount {
	display: block;
	margin-top: 8px;
	margin-bottom: 8px;
	line-height: normal;
}
.dsbSalePriceCurrent {
	color: white;
}
.dsbSalePriceOld {
	text-decoration: line-through;
	color: #b3a082;
}
.dsbSalePercent {
	font-family: Trebuchet MS, Menomonia;
	font-weight: bold;
	color: #fcb84d;
}
.dsbSaleVideo {
	display: none;
}
.dsbSaleEntry:hover .dsbSaleVideo {
	display: inline;
}
.dsbSaleCountdown {
	margin-right: 8px;
	font-family: monospace;
	color: #ff4800;
}
.dsbSaleCountdownFar {
	color: #6a9bfd;
}

#dsbPactMenu {
	width: 100%;
	margin-bottom: 4px;
	border-bottom: 2px solid black;
	text-align: center;
	font-family: Trebuchet MS, Menomonia;
}
.dsbPactPriceKarma {
	color: white;
}
.dsbPactEntry {
	position: relative;
}
.dsbPactEntry:hover .dsbPactName {
	display: inline-block;
	line-height: 64px;
	text-decoration: underline;
}
.dsbPactVendor {
	color: #aaa;
}
.dsbPactItem {
	white-space: nowrap;
}
.dsbPactEntry:hover .dsbPactVendor {
	color: #ee55cc;
}
#dsbPactNote {
	margin-top: 32px;
	margin-left: 4px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 14px;
	line-height: normal;
	color: #aaaaaa;
}

#dsbDaily {
	text-align: center;
}
#dsbDailyTitle {
	font-family: Trebuchet MS, Menomonia;
}
.dlyBox {
	display: none;
}

#dsbStory {
	display: none;
	width: auto;
	margin-top: 4px;
	border-top: 1px solid #dd9900;
	background: rgba(229, 158, 36, 0.1);
	border-bottom: 1px solid #dd9900;
}
#dsbStoryTitle {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #dd9900;
}
#dsbStoryTitle a {
	color: #dd9900;
}
#dsbStory .chnBar {
	width: auto;
	line-height: 100%;
	background: rgba(26, 17, 9, 0.4);
}
#dsbStory .chnDetails ol li {
	overflow: visible;
}

/* Bottom left corner: Coordinates bar */
.mapCoordinatesBar {
	position: absolute; z-index: 9;
	bottom: 12px; left: 12px;
}
.mapCoordinatesBar input[type="text"] {
	display: inline-block;
	width: 90px;
	height: 16px;
	padding: 3px 6px 3px 6px;
	margin-left: 12px;
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	color: #ddff77;
	text-shadow:
		0px 1px 1px #000,
		0px -1px 1px #000,
		1px 0px 1px #000,
		-1px 0px 1px #000;
}
.mapContextSlot {
	width: 180px;
}
.mapCoordinatesBar input::selection {
	background: #66aaff;
}
#mapCoordinatesName, #wvwCoordinatesName {
	width: 145px; 
}
#mapCoordinatesToggle, #wvwCoordinatesToggle {
	position: absolute;
	top: auto;
	bottom: 8px;
	left: -4px;
}
.mapTime {
	display: none;
	pointer-events: none;
}

/* Right side: Misc links */
.hudPeripheral {
	z-index: 3;
	width: auto; /* Should be just wide enough to fit the HUD buttons */
	text-align: right;
	visibility: hidden;
	opacity: 1;
	transition: opacity 0.4s;
}
.hudPeripheralNorth {
	position: absolute; z-index: 11;
	height: 32px;
	overflow: hidden;
	top: 4px; right: 12px;
}
.hudPeripheralActive {
	height: auto;
	overflow: visible;
	min-width: 580px; /* This becomes the maximum width of the HUD popup divs */
}
.hudPeripheralSouth {
	position: absolute; z-index: 10;
	bottom: 4px; right: 12px;
}
#itemLogo {
	margin-right: 2px;
}
.hudLinks { /* Links on the map pane */
	font-family: Menomonia;
	font-size: 18px;
	color: #ffeebb;
}
.hudLinks img {
	width: 32px; height: 32px;
}
.hudLinks a, .hudLinks em {
	text-decoration: none;
	color: #ffeebb;
	opacity: 0.6;
}
.hudLinks a:hover {
	color: #ddff77;
	opacity: 0.9;
}
#wvwLogContainer, #lboText {
	display: none; /* To be displayed when loaded by JavaScript */
}

/* Map HUD */
.hudItem {
	display: inline-block;
	margin-left: 0px; /* This squeezes the HUD buttons closer */
	text-align: left;
}
.hudSelect {
	display: block;
	height: 32px;
}
.hudButtonContainer {
	display: inline-block;
	position: relative;
	width: 32px; height: 32px;
}
.hudButton {
	position: absolute;
	opacity: 0.6;
	transition: opacity 0.1s;
	background: rgba(0, 0, 0, 0.01);
}
.hudTitle {
	display: inline-block;
	margin: 4px 4px 0px -2px;
	vertical-align: top;
	font-family: Menomonia;
	font-size: 16px;
	color: #ffeebb;
	opacity: 0.8;
	text-shadow:
		0px 1px 1px #000,
		0px -1px 1px #000,
		1px 0px 1px #000,
		-1px 0px 1px #000;
}
.hudPeripheral:hover .hudButton {
	opacity: 0.8;
}
.hudItem:hover .hudButton {
	transform: scale(1.125, 1.125); /* 32px becomes 36px */
	opacity: 1;
}
.hudItem:hover .hudTitle {
	text-decoration: underline;
	opacity: 1;
}
.hudPopup {
	display: none;
	right: 0px;
}
.hudItemActive .hudPopup {
	display: block;
}
.hudItem:hover .hudPopupWide {
	left: 0px;
	text-align: center;
}
.hudPopup label {
	margin-bottom: 4px;
}
.hudPopup label img {
	width: 24px; height: 24px;
	margin-right: 4px;
}
.hudArrow {
	display: none;
	position: absolute; z-index: 3;
	margin-left: 4px;
	margin-top: 22px;
	width: 0; height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid rgba(17, 17, 17, 0.9);
}
.hudItemActive .hudArrow {
	display: block;
}
.hudHelp {
	width: auto;
	font-size: 15px;
}
.hudHelp ul {
	margin-bottom: 8px;
}
.hudHelpColumn {
	display: inline-block;
	margin-left: 8px;
	vertical-align: top;
}
.hudHelpScroll {
	max-height: 360px;
}
.hudHelpMode {
	position: relative;
}
.hudHelpModePreview {
	width: 180px;
	margin-right: 16px;
	border: 2px solid black;
	border-bottom: 4px solid black;
	border-radius: 4px;
	box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.5);
}
#hudHelpModePreviewLast {
	margin-right: 0px;
}
.hudHelpModePreview:hover {
	border: 2px solid #222;
	animation: aniFlicker 1s ease infinite;
}
.hudHelpModeName {
	position: absolute;
	margin-left: 6px;
	font-family: Menomonia;
	font-style: italic;
	text-shadow:
		0px 1px 1px #000,
		0px -1px 1px #000,
		1px 0px 1px #000,
		-1px 0px 1px #000;
	pointer-events: none;
}
.hudHelpDivider {
	margin-bottom: 4px;
}

.mapGPS { /* Only shown in overlay mode */
	display: none;
}

#itemDisplayButton, #mapDisplayButton, #wvwDisplayButton, #accDisplayButton {
	position: absolute; z-index: 11;
	top: calc(50% - 16px);
	left: auto;
	right: 0;
	width: 32px; height: 32px;
}
#itemDisplayButton {
	left: auto;
	right: auto;
	margin-left: -16px;
}

/* Alarm options */
#mapAlarmSide1 {
	margin-left: 4px;
	padding-left: 8px;
	border-left: 1px solid gray;
}
#chnAlarm #mapAlarmPopup {
	display: none;
}
#chnAlarm:hover #mapAlarmPopup {
	display: block;
	width: 540px;
	position: absolute;
	right: 0;
	margin: 0;
	padding: 8px;
	text-align: left;
}
#mapAlarmChain, #mapAlarmBoss {
	width: 140px;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
#mapAlarmBoss {
	padding-left: 8px;
	margin-left: 4px;
	border-left: 1px solid gray;
}
#mapAlarmOther {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid gray;
	margin-bottom: 4px;
	padding-bottom: 8px;
	text-align: left;
}
#mapAlarmStopwatchUp, #mapAlarmStopwatchDown {
	width: 100%;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid gray;
	text-align: left;
}
#mapAlarmPopup fieldset {
	min-width: 120px;
	margin: 0;
	border: none;
}
#optChainsToggle {
	position: absolute;
	right: 16px;
}
#opt_int_volAlarm, #optMute, #optRestoreAllChains {
	width: 100%;
	margin-bottom: 4px;
}

#itemStopwatch {
	position: fixed; z-index: 9; /* z-index behind the console */
	top: 24px;
	left: 24px;
	font-family: Consolas, monospace;
	color: white;
	text-shadow:
		1px 1px 4px #000,
		-1px -1px 4px #000,
		1px -1px 4px #000,
		-1px 1px 4px #000,
		1px 1px 4px #000;
	pointer-events: none;
}
#watToggle {
	display: none;
	z-index: 9;
	top: 12px;
	left: 12px;
	position: fixed;
}
.watButtons {
	float: right;
	margin-left: 16px;
	font-family: monospace;
	font-size: 24px;
}
#watCustom {
	width: 64px;
}
.watButtons kbd {
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 2px;
}
.watButtons kbd:hover {
	border: 1px solid #ffcc77;
}
.watButtons kbd:active {
	border: 1px solid white;
}
#watStart, #watTimerStart {
	color: #66ff66;
}
#watStop, #watTimerStop {
	color: #cc3322;
}
#watLap {
	color: #ffcc77;
}

/* Display options */
#mapDisplayNotes {
	display: block;
	width: 120px;
	margin-top: 8px;
}
.wvwOptionsSide2 {
	padding-left: 8px;
	margin-left: 4px;
	border-left: 1px solid gray;
}
.mapDisplaySide1 {
	padding-left: 8px;
	margin-left: 4px;
	border-left: 1px solid gray;
	padding-right: 8px;
	margin-right: 4px;
	border-right: 1px solid gray;
}
.mapDisplayCompletion {
	margin-bottom: 8px;
	border-bottom: 1px solid gray;
}
.mapDisplayCompletion label {
	margin: 0;
	padding: 0;
}
.mapDisplayCompletionSub {
	padding-top: 4px;
	padding-bottom: 4px;
	border-top: 1px solid gray;
}

/* Map zones list */
.mapZones:hover .mapZonesPopup {
	min-width: 180px;
	max-width: 580px;
	padding: 0px 8px 0px 8px;
}
.mapZoneList {
	border-spacing: 12px;
}
.mapZoneList aside {
	display: table-cell;
}
.mapZoneList ul, .mapZoneList h2 {
	min-width: 120px;
	max-width: 140px;
}
.mapZoneList h2 {
	font-size: 16px;
}
.mapZoneList ul {
	margin-bottom: 16px;
}
#mapSearch {
	width: calc(100% - 20px);
	margin-left: 8px;
	margin-top: 8px;
}
.mapSearchResults {
	margin-top: 8px;
}

/* Marker classes
----------------------------------------------------------------------------- */
.mapOverview, .mapSec, .mapNick {
	font-family: Menomonia;
	text-align: center;
	color: white;
	text-shadow:
		1px 1px 1px #000,
		-1px -1px 1px #000,
		1px -1px 1px #000,
		-1px 1px 1px #000,
		1px 1px 1px #000;
}
.mapOverview {
	font-size: 12px;
	line-height: 110%;
}
.mapSec {
	font-size: 0px;
	font-style: italic;
}
.mapNick {
	font-size: 0px;
	line-height: 90%;
}

.mapSecIn, .mapNickIn, .mapOverviewIn {
	display: table-cell;
	vertical-align: middle;
}

.mapOverview img {
	width: 16px; height: 16px;
}
.mapOverviewName {
	display: block;
	font-size: 16px;
	color: #ddbb76;
}
.mapOverviewLevel {
	display: block;
	font-size: 14px;
	color: #aaa;
}
.mapOverview:hover .mapOverviewName {
	font-size: 18px;
	color: #44dd44;
}

.mapLoc {
	font-family: Menomonia;
	font-size: 20px;
	line-height: 110%;
	color: white;
	text-shadow:
		0px 0px 2px black,
		1px 1px 1px black;
}
.mapLoc img {
	display: block;
	margin-top: 2px;
	margin-bottom: 2px;
	border: 1px solid rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	box-shadow: 0px 0px 2px black;
}
.mapWp, .mapPoi, .mapEvent {
	font-family: Menomonia;
	font-weight: bold;
	font-size: 18px;
	line-height: 110%;
	text-shadow:
		0px 0px 2px black,
		1px 1px 1px black;
}
.mapWp {
	color: #ffcc77;
}
.mapPoi, .mapEvent {
	color: white;
}
.mapTip {
	font-family: Trebuchet MS, Menomonia;
	font-weight: normal;
	font-size: 17px;
}


/* =============================================================================
 *  Right panel
 *  Panes (the clock, menu, content pane) are fixed height and are manually
 *  calculated and absolutely positioned (pinned) to fit as so:
 *  Clock(360px) + Menu(48px) + Content(fit to bottom). If relatively positioned
 *  the map pane would be pushed down by how tall the panes on the right are.
 * ========================================================================== */
#panelApp {
	width: 361px; /* 1px extra compensating for the border-left */
}

.paneApp {
	z-index: 1;
	right: 0px; /* This allows the app panel to completely fill the overlay window */
	border-left: 1px solid #444;
	box-shadow: -5px 0px 5px #223;
}

/* Board (only visible in simple mode)
----------------------------------------------------------------------------- */
#paneSimple {
	display: none;
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 32px;
	font-family: Menomonia;
	color: #ffeebb;
	text-shadow:
		1px 1px 0px #000,
		-1px -1px 0px #000,
		1px -1px 0px #000,
		-1px 1px 0px #000,
		1px 1px 0px #000;
	opacity: 0.8;
}
#itemSimpleTime {
	font-family: sans-serif;
}
#itemSimpleCurrentSD, #itemSimpleCurrentHC {
	font-weight: bold;
	color: #ff8844;
}
#itemSimpleNextSD, #itemSimpleNextHC {
	color: #ff8844;
	opacity: 0.5;
}

#iconSimpleHome {
	margin-bottom: 6px;
	width: 24px; height: 24px;
}

/* @@Klock
----------------------------------------------------------------------------- */
.clkSizeRegular {
	position: absolute;
	width: 360px; height: 360px;
}

#paneClockCanvas {
	pointer-events: none;
}

#paneClock {
	top: 0px;
}

#paneClockWall {
	background: #333;
	background: radial-gradient(ellipse at center, #4c4c4c 0%, #444444 50%, #131313 100%);
}

.paneClockBackground {
	right: 1px;
	width: 358px; /* To avoid bleeding left edge */
	background: url('img/background/globe.jpg') no-repeat center;
	filter: blur(1px);
	opacity: 0;
}
.clkHalloween .paneClockBackground {
	background: url('img/background/globe_halloween.png') no-repeat center;
}
.clkWintersday .paneClockBackground {
	background: url('img/background/globe_wintersday.png') no-repeat center;
}
.paneClockFace {
	background: url("img/background/face.png") no-repeat center;
	background-size: 100% 100%;
}
.clkHalloween .paneClockFace {
	opacity: 0.7;
}
.clkWintersday .paneClockFace {
	opacity: 0.8;
}

.iconHC {
	width: 48px; height: 48px;
	border-radius: 12px;
}
.iconSD {
	width: 64px; height: 64px;
	border-radius: 12px;
}
#paneClockIcons img {
	position: absolute;
	border: 1px solid black;
	box-shadow: 0px 0px 10px black;
	transition: opacity 0.2s;
}
#paneClockIcons img.clkIconCurrent {
	border: 1px solid lime;
	box-shadow: 0px 0px 10px lime;
}
#paneClockIcons img.clkIconNext {
	border: 1px solid green;
	box-shadow: 0px 0px 10px green;
}
#paneClockIcons img:hover {
	border: 1px solid #ffcc77;
	box-shadow: 0px 0px 10px red;
}
#clkIconSD0 {
	top: 4px; left: 148px;
}
#clkIconSD1 {
	top: 148px; left: 290px;
}
#clkIconSD2 {
	top: 290px; left: 148px;
}
#clkIconSD3 {
	top: 148px; left: 4px;
}
#clkIconHC0 {
	top: 12px; left: 212px;
}
#clkIconHC1 {
	top: 212px; left: 298px;
}
#clkIconHC2 {
	top: 298px; left: 100px;
}
#clkIconHC3 {
	top: 100px; left: 12px;
}

#clkWaypoint0 {
	top: 52px; left: 164px;
}
#clkWaypoint1 {
	top: 164px; left: 274px;
}
#clkWaypoint2 {
	top: 274px; left: 164px;
}
#clkWaypoint3 {
	top: 164px; left: 52px;
}
#clkWaypoints .cssWaypoint {
	position: absolute;
	width: 32px; height: 32px;
	background-size: 32px 32px;
}
.clkHalloween .cssWaypoint {
	background-image: url('img/map/halloween.png');
}
.clkWintersday .cssWaypoint {
	background-image: url('img/map/wintersday.png');
}
.cssWaypoint {
	width: 24px; height: 24px;
	background-image: url("img/map/waypoint.png");
	background-size: 24px 24px;
}
.clkWaypointDaily {
	background-image: url("img/ui/daily.png");
	background-size: 32px 32px;
}
.cssWaypoint:hover {
	border-radius: 16px;
	box-shadow: 0px 0px 5px white;
	background-image: url("img/ui/copy.png");
	background-size: 24px 24px;
}
#clkWaypoints .cssWaypoint:hover {
    background-image: url("img/ui/copy.png");
}
.cssWaypoint:active {
	opacity: 0.5;
}

#itemClock { /* The clock */
	position: absolute;
	top: 70px; left: 70px;
	width: 220px; height: 220px;
	stroke: #111;
	stroke-linecap: round;
	fill: none;
	/*fill: #eef;*/
}
#clkCircumference { /* Clock circumference */
	stroke-width: 2px;
}
#clkQuadrant { /* Quadrant slice of the clock */
	stroke-width: 1px;
	stroke: chartreuse ;
	fill: lime;
	opacity: 0.2;
}
#clkTicks { /* Hour separator lines */
	stroke-width: 1px;
	stroke-linecap: square;
	opacity: 0.2;
}
#clkMarkers {
	stroke-width: 1px;
}
#clkHourHand {
	stroke-linecap: square;
	stroke-width: 3px;
	stroke: black;
	opacity: 0.2;
}
#clkMinuteHand {
	stroke-linecap: square;
	stroke-width: 2px;
	stroke: white;
	opacity: 0.6;
}
#clkSecondHand {
	stroke-linecap: square;
	stroke-width: 1px;
	stroke: #feffef;
	opacity: 0.6;
} 
#clkHours, #clkHoursPrime {
	font-family: Trebuchet MS, Menomonia;
	font-size: 5pt;
	font-weight: bold;
	text-anchor: middle;
	stroke: none;
	fill: black;
	opacity: 0.3;
}
#clkHoursPrime {
	font-size: 6pt;
	opacity: 1;
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
}
#clkAxle {
	stroke-width: 1px;
	stroke: white;
	fill: white;
	opacity: 0.8;
}

.itemTimeDigital {
	position: absolute;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #eee;
	text-shadow:
		1px 1px 0px #333,
		-1px -1px 0px #333,
		1px -1px 0px #333,
		-1px 1px 0px #333,
		1px 1px 0px #333;
}
#itemTimeLocal {
	right: 10px; bottom: 10px;
}
#itemTimeDaytime {
	left: 10px; bottom: 10px;
}
#itemTimeDaytime img {
	width: 18px; height: 18px;
}
#itemTimeDayIcon {
	font-weight: normal;
}
#itemLanguage, #itemHome {
	display: table;
	position: absolute; z-index: 9;
	width: 32px; height: 32px;
	top: 4px;
	right: 12px;
	text-align: center;
	border: 1px solid #444;
	background: rgba(0, 0, 0, 0.2);
}
#itemHome {
	display: none;
	position: fixed;
	right: 48px;
}
#itemLanguageButton, #itemHomeButton {
	display: table-cell;
	vertical-align: middle;
	font-family: Trebuchet MS, Menomonia;
	font-size: 18px;
	color: #eee;
}
#itemHomeButton {
	vertical-align: bottom;
}
#itemLanguage ins {
	width: 64px;
	padding-bottom: 2px;
	opacity: 0.9;
}
#itemLanguage:hover ins {
	opacity: 1;
}
#itemLanguagePopup {
	display: none;
	position: absolute;
	top: 32px;
	right: 0px;
	padding: 4px 2px 4px 2px;
	text-align: left;
}
#itemLanguagePopup a {
	display: block;
	padding: 0px 16px 0px 16px;
	line-height: 150%;
	text-decoration: none;
	white-space: nowrap;
	font-family: Trebuchet MS, Menomonia;
	font-size: 16px;
	color: #eee;
	text-shadow:
		1px 1px 0px #000,
		-1px -1px 0px #000,
		1px -1px 0px #000,
		-1px 1px 0px #000,
		1px 1px 0px #000;
}
#itemLanguagePopup a:hover {
	color: #ddff77;
	background: #333;
}
#itemLanguagePopup a sub {
	font-size: 10px;
}
#itemLanguage:hover #itemLanguagePopup { /* Popup when hovered over language button */
	display: block;
}

/* @@Bar primary menu for switching pages
----------------------------------------------------------------------------- */
#clkToggle {
	left: 164px;
}

#plateMenu {
	position: absolute; z-index: 2;
	top: 360px;
	width: 360px; height: 48px;
	background: linear-gradient(to bottom, #555 0%, #222 50%, #000 51%, #222 100%);
}
#plateMenu:hover .plateMenuButton {
	opacity: 0.5;
}
#plateMenu .plateMenuButton:hover {
	box-shadow: 0px 0px 10px #e7e3bd;
	opacity: 1;
}
.plateMenuButton {
	display: table;
	float: left;
	width: 25%; height: 100%;
	text-align: center;
	transition: opacity 0.2s, box-shadow 0.2s;
}
.plateMenuButton:active {
	background: linear-gradient(135deg, rgba(255, 238, 187, 0.2) 0%, transparent 100%);
	background-size: 400% 400%;
	animation: aniPulsate 1s;
}
#plateMenu ins { /* Button image */
	margin-top: 8px;
	border-radius: 50%;
}
#plateMenu ins:before {
	content: "";
	display: block;
	width: 32px; height: 32px;
	background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
	border-radius: 50%;
}
#plateMenu_Help { display: none; } /* This plate is hidden from the menu bar */
.mnu {
	width: 32px; height: 32px;
	background-image: url("img/ui/menu.png");
}
.mnu_account { background-position: 0 0; }
.mnu_achievements { background-position: -32px 0; }
.mnu_alarm { background-position: -64px 0; }
.mnu_ascended { background-position: -96px 0; }
.mnu_audit { background-position: -128px 0; }
.mnu_bank { background-position: -160px 0; }
.mnu_bought { background-position: -192px 0; }
.mnu_build { background-position: -224px 0; }
.mnu_buying { background-position: -256px 0; }
.mnu_carriers { background-position: -288px 0; }
.mnu_catalog { background-position: -320px 0; }
.mnu_cats { background-position: -352px 0; }
.mnu_chains { background-position: -384px 0; }
.mnu_champions { background-position: -416px 0; }
.mnu_characters { background-position: -448px 0; }
.mnu_checklist { background-position: -480px 0; }
.mnu_cleanup { background-position: -512px 0; }
.mnu_crafting { background-position: -544px 0; }
.mnu_directory { background-position: -576px 0; }
.mnu_display { background-position: -608px 0; }
.mnu_dungeons { background-position: -640px 0; }
.mnu_dyes { background-position: -672px 0; }
.mnu_edit { background-position: -704px 0; }
.mnu_finishers { background-position: -736px 0; }
.mnu_forum { background-position: -768px 0; }
.mnu_gem { background-position: -800px 0; }
.mnu_gliders { background-position: -832px 0; }
.mnu_gps { background-position: -864px 0; }
.mnu_guilds { background-position: -896px 0; }
.mnu_help { background-position: -928px 0; }
.mnu_hero { background-position: -960px 0; }
.mnu_info { background-position: -992px 0; }
.mnu_inventory { background-position: -1024px 0; }
.mnu_lab { background-position: -1056px 0; }
.mnu_leave { background-position: -1088px 0; }
.mnu_manager { background-position: -1120px 0; }
.mnu_map { background-position: -1152px 0; }
.mnu_masteries { background-position: -1184px 0; }
.mnu_materials { background-position: -1216px 0; }
.mnu_minis { background-position: -1248px 0; }
.mnu_museum { background-position: -1280px 0; }
.mnu_nodes { background-position: -1312px 0; }
.mnu_options { background-position: -1344px 0; }
.mnu_outfits { background-position: -1376px 0; }
.mnu_pact { background-position: -1408px 0; }
.mnu_possessions { background-position: -1440px 0; }
.mnu_pvp { background-position: -1472px 0; }
.mnu_raids { background-position: -1504px 0; }
.mnu_recipes { background-position: -1536px 0; }
.mnu_sab { background-position: -1568px 0; }
.mnu_selling { background-position: -1600px 0; }
.mnu_sold { background-position: -1632px 0; }
.mnu_story { background-position: -1664px 0; }
.mnu_events { background-position: -1696px 0; }
.mnu_trading { background-position: -1728px 0; }
.mnu_vault { background-position: -1760px 0; }
.mnu_wardrobe { background-position: -1792px 0; }
.mnu_wvw { background-position: -1824px 0; }
.mnu_zone { background-position: -1856px 0; }

#plateMenu var { /* Button subtitle */
	display: table-cell;
	position: absolute;
	bottom: 0;
	width: 25%;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: white;
	text-shadow: 0px 0px 1px #e4e0b3;
	opacity: 0.4;
	pointer-events: none;
}
#plateMenu:hover var, #plateMenu .plateMenuButtonActive var {
	color: #ffeeaa;
	opacity: 0.8;
}

/* @@Beam sub-navigation menu generated by JS for a page's sections
----------------------------------------------------------------------------- */
.plateBeamIcon { /* Clickable icon, its src is duplicated from an img tag in a header */
	display: inline-block;
	width: 32px; height: 32px;
	margin: 0 1px 0 1px;
}
.plateBeamIcon:hover {
	box-shadow: 0px 0px 4px #e4e0b3;
}
.plateBeamIcon:active {
	opacity: 0.6;
}
.plateBeamIconActive {
	padding-left: 4px;
	padding-right: 4px;
	background: black;
}
.plateBeamIconCollapse {
	position: fixed; z-index: 1;
	margin-top: 8px;
	margin-left: 320px;
}

header.jsSection {
	margin-top: 8px;
	font-family: Menomonia;
	font-size: 20px;
	color: #e4e0b3;
}
header.jsSection:hover, header.jsSection:hover {
	color: white;
	background-image: linear-gradient(to right, #7c7253 0%, transparent 100%);
	background-repeat: repeat-y;
	animation: aniHighlight 0.4s;
	border-radius: 1px;
}
header.jsSection span img { /* Each header must have inside it an img tag as icon */
	width: 32px; height: 32px;
	margin-right: 12px;
}
header.jsSection sup {
	float: right;
	font-family: monospace;
	font-size: 12px;
	vertical-align: super;
}
.jsSectionDone {
	display: inline-block;
	padding: 0px 10px 0px 4px;
	margin-top: 8px;
	margin-bottom: 16px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 16px;
	text-shadow: 0px 0px 2px #e4e0b3;
	border-left: 2px solid white;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
}
.jsSectionDone:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* =============================================================================
 *  Bottom right content subpanel; the contents are "plated" and requires
 *  JavaScript to toggle their display based on what menu icon was clicked.
 * ========================================================================== */
#paneContent {
	position: absolute; z-index: 2;
	bottom: 0px;
	width: 360px; height: auto;
	top: 408px;
	color: #eee;
	text-shadow: 0px 0px 2px black;
	background: linear-gradient(115deg, #444 0%, #222 50%, #000 51%, #222 100%);
}

#paneContent article {
	width: 360px; height: 100%;
}

#paneContent article {
	display: none;
}

/* @@Directory plate
----------------------------------------------------------------------------- */
#plateDirectory {
	position: fixed; z-index: 13;
	top: 0;
	background: linear-gradient(115deg, #111 0%, #222 50%, #000 51%, #222 100%);
}
#dirContent {
	width: 360px;
	padding-bottom: 32px;
}
#dirSearch {
	margin-left: 14px;
}
.dirHeader {
	margin-left: 12px;
	font-family: Menomonia;
	font-size: 22px;
	color: #999;
	transition: color 0.2s;
	border-bottom: 1px solid #444;
}
.dirHeaderPrimary {
	padding-top: 8px;
}
.dirGroup {
	position: relative;
}
.dirGroup:hover .dirHeaderSecondary {
	color: #ffeebb;
}
.dirHeaderIcon {
	margin-right: 6px;
}
.dirHeaderName {
	vertical-align: middle;
}
.dirList {
	margin-top: 8px;
	margin-bottom: 24px;
	margin-left: 36px;
}
.dirList li {
	padding: 4px 0 4px 16px;
	font-family: Trebuchet MS, Menomonia;
	font-size: 16px;
	color: #eee;
}
.dirList li:hover {
	background-image: linear-gradient(to right, #7c7253 0%, transparent 100%);
	background-repeat: repeat-y;
	animation: aniHighlight 0.4s;
}
#dirHeaderClock {
	font-family: Trebuchet MS, Menomonia;
}

/* @@Chains plate
----------------------------------------------------------------------------- */
#chnProgressBar {
	position: absolute; z-index: 2;
	margin-top: 1px;
	width: 360px; height: 1px;
	pointer-events: none;
}
#chnProgress0, #chnProgress1 {
	display: block;
	float: left;
	width: 100%; height: 100%;
	background: none;
	box-shadow: 0px 0px 4px #444;
}
#chnProgress1 {
	right: 0;
	box-shadow: 0px 0px 4px #444;
	background: linear-gradient(to left, transparent 0%, white 100%);
}

#chnToggle {
	top: 16px;
	left: 32px;
}

#chnAlarm {
	display: none; /* Only shown for modes where the map is disabled */
	position: absolute; z-index: 12;
	right: 0;
	padding: 7px 4px 6px 0px;
	opacity: 0.5;
}
#chnAlarm:hover {
	opacity: 1;
}
#optAlarmSpeaker, #optChainsIcon {
	width: 24px; height: 24px;
}
#optAlarmIcon {
	width: 16px; height: 16px;
}

.chnCategoryHeader {
	display: block;
	width: auto; height: 32px;
	margin-bottom: 4px;
	padding: 0px 12px 0px 4px;
	background: linear-gradient(to bottom, rgba(34, 34, 34, 0.6) 0%, #383838 100%);
	border: 1px solid #111;
	border-bottom: 2px solid rgba(0, 0, 0, 0.4);
	border-top-left-radius: 50%;
}
.chnCategoryHeader:hover {
	background: linear-gradient(to bottom, #222 0%, transparent 100%);
}
.chnCategoryHeader:active {
	background: linear-gradient(to top, rgba(34, 34, 34, 0.6) 0%, #383838 100%);
}
.chnCategoryHeaderFirst {
	background: linear-gradient(to bottom, #222 0%, #383838 100%);
}
.chnCategoryHeader ins {
	width: 32px; height: 32px;
	margin-top: 2px;
	float: left;
	background-image: url("img/ui/categories.png");
}
.chnCategoryHeaderFirst .chnCategoryName {
	visibility: hidden;
}
.chnCategoryHeaderFirst:hover .chnCategoryName {
	visibility: visible;
}
.chn_drytop { background-position: 0 0; }
.chn_legacy { background-position: -32px 0; }
.chn_scheduled { background-position: -64px 0; }
.chn_special { background-position: -96px 0; }
.chn_temple { background-position: -128px 0; }
.chn_timetable { background-position: -160px 0; }
.chnCategoryName { /* Hidden header for each chain categories */
	display: inline-block;
	margin: 8px 0px 0px 8px;
	font-family: Menomonia;
	font-style: italic;
	font-size: 18px;
	color: #aaa;
	text-shadow: 0px 0px 8px black;
}
.chnCategoryHeader:hover .chnCategoryName {
	color: white;
}
.chnCategoryHeader kbd { /* The collapse/expand category button */
	margin-top: 8px;
	float: right;
	font-family: monospace;
	font-size: 16px;
	color: #999;
	text-shadow: 0px 0px 2px black;
}

#plateChains section {
	margin-bottom: 12px;
	font-family: Trebuchet MS, Menomonia;
	text-shadow:
		1px 1px 0px #000,
		-1px -1px 0px #000,
		1px -1px 0px #000,
		-1px 1px 0px #000,
		1px 1px 0px #000;
}

#itemDryTopClip {
	position: absolute;
	left: 148px;
}
.chnDryTopWaypoint {
	width: 32px; height: 32px;
	background: url("img/map/waypoint.png");
	background-size: 32px 32px;
	opacity: 0.9;
}
#mapDryTopClip0, #mapDryTopClip1 {
	width: 32px; height: 16px;
	padding: 2px;
	background: rgba(179, 84, 71, 0.5);
	border: 2px dotted rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	font-family: Menomonia;
	font-weight: bold;
	color: white;
	opacity: 0.5;
}
#mapDryTopClip0:hover, #mapDryTopClip1:hover {
	opacity: 1;
}
#mapDryTopTimer, .mapDryTopTimestamp {
	font-family: Trebuchet MS, Menomonia;
}

/* A bar containing the chain icon, title, time, and events */
.chnBar, .chnSlot {
	width: auto;
	margin-bottom: 4px;
	padding-left: 8px;
	border: 1px solid #111;
	border-top: 1px solid #222;
	background: url("img/background/hud.png"), linear-gradient(to right, #222 0%, transparent 100%);
	transition: opacity 0.2s;
}

.chnFaded {
	opacity: 0.4;
}

.chnTitle {
	display: table;
	color: #ffaa22;
}
.chnTitle img {
	width: 32px; height: 32px;
	border-radius: 2px;
	vertical-align: top;
}

.chnCheck, .chnChecked {
	display: inline-block;
	margin-left: -32px;
	width: 32px; height: 32px;
	opacity: 0.6;
}
.chnCheck {
	background: url("img/ui/check.png") no-repeat center;
}
.chnCheck:hover, .chnChecked {
	background: url("img/ui/checkover.png") no-repeat center;
}
.chnCheck:hover {
	opacity: 1;
}

.chnCheck:hover + h1 {
	color: #ddff77;
}
.chnTitle h1 {
	display: table-cell;
	width: 192px; /* This pushes the time to the right */
	padding-left: 8px;
	vertical-align: middle;
}
.chnTitle h1:hover {
	color: #eee;
}

.chnTitle time {
	display: table-cell;
	width: 92px;
	vertical-align: middle;
	text-align: right;
}
.chnTitle time sup {
	font-size: 14px;
	opacity: 0.6;
}

.chnTitle aside {
	display: table-cell;
	vertical-align: middle;
}

.chnTitle img.chnDaily {
	display: none;
	width: 32px; height: 32px;
	opacity: 0.8;
}

.chnDetails ol {
	margin-top: 8px;
	margin-bottom: 8px;
}
.chnDetails ol li { /* Contains the event icon and event name */
	display: block;
	margin-bottom: 4px;
	white-space: nowrap;
	font-size: 15px;
}
.chnDetails ol li ins { /* Orange event icon */
	width: 16px; height: 16px;
	background-image: url("img/event/events.png");
}
.chnDetails ol li ins:hover {
	box-shadow: 0px 0px 4px #ee7924;
}
.evt_boss { background-position: 0 0; }
.evt_boss_red { background-position: -16px 0; }
.evt_cog { background-position: -32px 0; }
.evt_cog_red { background-position: -48px 0; }
.evt_collect { background-position: -64px 0; }
.evt_collect_red { background-position: -80px 0; }
.evt_cross { background-position: -96px 0; }
.evt_fist { background-position: -112px 0; }
.evt_flag { background-position: -128px 0; }
.evt_flag_red { background-position: -144px 0; }
.evt_release { background-position: -160px 0; }
.evt_shield { background-position: -176px 0; }
.evt_shield_red { background-position: -192px 0; }
.evt_skull_red { background-position: -208px 0; }
.evt_special { background-position: -224px 0; }
.evt_star { background-position: -240px 0; }
.evt_star_red { background-position: -256px 0; }
.evt_swords { background-position: -272px 0; }
.evt_swords_red { background-position: -288px 0; }
.evt_wrench { background-position: -304px 0; }

.chnDetails ol li span { /* Event name */
	margin-left: 4px;
	vertical-align: middle;
}
.chnSubstep {
	margin-left: 12px;
}

.chnWaypoint {
	width: 72px; height: 12px;
	border: 1px dashed #555;
	border-radius: 4px;
	background: none;
	font-family: monospace;
	font-size: 12px;
	color: #888;
	opacity: 0.6;
}
.chnWaypoint:hover {
	background: rgba(0, 0, 0, 0.3);
	opacity: 0.9;
}
.chnDetailsExtra { /* Small gray texts bottom right of a chain bar */
	margin-bottom: 8px;
	text-align: right;
	font-family: monospace;
	font-size: 12px;
	color: #999;
}
.chnDetailsExtra ins { /* Little icons such as chain rewards */
	margin-left: 2px;
	border-radius: 4px;
	opacity: 0.5;
}
.chnDelete { /* Button to hide the chain */
	display: inline-block;
	float: right;
	width: 24px; height: 24px;
	vertical-align: middle;
	margin: 0px 6px 0px 6px;
	background: url("img/ui/close.png");
	background-size: 24px 24px;
	opacity: 0.4;
}
.chnDelete:hover {
	opacity: 0.8;
}

/* JavaScript added classes */
.chnBarPrevious {
	background: url("img/background/hud.png"), linear-gradient(to right, #111 0%, rgba(38, 19, 6, 0.8) 100%);
}
.chnBarCurrent {
	background: url("img/background/hud.png"), linear-gradient(to right, #111 0%, rgba(105, 53, 16, 0.8) 100%);
}
.chnBarReset {
	background: url("img/background/hud.png"), linear-gradient(to right, #111 0%, rgba(102, 59, 127, 0.8) 100%);
}
.chnBarHover {
	background: url("img/background/hud.png"), linear-gradient(to right, #111 0%, rgba(102, 170, 255, 0.8) 100%);
}

.chnTitleCurrent, .chnSlot h1.chnTitleCurrent {
	color: #ffaa22;
	opacity: 1;
}
.chnTitleFuture, .chnSlot h1.chnTitleFuture {
	color: #ffaa22;
	opacity: 0.5;
}
.chnTitleFutureFar, .chnSlot h1 {
	color: #aaa;
	opacity: 1;
}

.chnTimeCurrent {
	color: #bbcc77;
	opacity: 1;
}
.chnTimeFuture {
	color: #bbcc77;
	opacity: 0.9;
}
.chnTimeFutureFar, .chnSlot time {
	color: #ccc;
	opacity: 1;
}
.chnTimeSubscribed, .chnSlot time.chnTimeSubscribed {
	color: #ddff77;
}
.chnTimeSubscribed:after {
	content: "*";
}

.chnTimeCurrent:hover, .chnTimeFuture:hover, .chnTimeFutureFar:hover,
.chnSlot time:hover, .chnDelete:hover {
	color: white;
}

.chnEvents li { /* Default style for event name (past/inactive events) */
	color: #bbb;
	opacity: 0.5;
}
.chnEvents li.chnEventCurrent {
	color: #ff8844;
	opacity: 1;
}
.chnEvents li.chnEventFuture {
	color: #ff8844;
	opacity: 0.5;
}
.chnEvents li:hover {
	color: #ffcc77;
}

/* @@Options page
----------------------------------------------------------------------------- */
.optFieldsets fieldset {
	margin-right: 8px;
	vertical-align: top;
}
.optFollowFieldset {
	width: 90%;
}

.optButtons {
	margin-top: 8px;
}
.optButtons button {
	width: 270px;
	margin-bottom: 4px;
}

#optTimestamps time {
	color: #bbcc77;
}

input[type="number"] {
	width: 48px;
	margin-right: 4px;
	text-align: right;
}

input[type="range"] {
	display: inline;
	width: 100%;
	padding: 0;
}
input[type="range"].optSlider {
	width: 140px;
}

label, input {
	vertical-align: middle;
}
label:hover {
	color: #ddff77;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

/* =============================================================================
 *  Account panel
 * ========================================================================== */
#panelAccount {
	display: none;
	overflow: hidden;
	position: relative;
	background: radial-gradient(ellipse at center, #333 0%, #222 50%, #111 100%);
}
#accContent, #accAppendix, #itmContext {
	display: none;
}

/* =============================================================================
 *  @@Utility styles
 * ========================================================================== */
.mapLegendLine {
	display: inline-block;
	width: 64px; height: 2px;
	margin: auto 12px 5px 6px;
}

.btnUncheck {
	background: url("img/ui/uncheck.png") center no-repeat, linear-gradient(135deg, #111 0%, #222 50%, #000 51%, #222 100%);
	width: 64px; height: 32px;
}
.btnUncheck:active {
	background: url("img/ui/uncheck.png") center no-repeat, #2d2619;
}
.btnDefault {
	background: url("img/ui/default.png") center no-repeat, linear-gradient(135deg, #111 0%, #222 50%, #000 51%, #222 100%);
	width: 32px; height: 32px;
}
.btnDefault:active {
	background: url("img/ui/default.png") center no-repeat, #2d2619;
}
.btnDisplay {
	margin-top: 8px;
	margin-bottom: 8px;
	width: 220px; height: 28px;
	background: url("img/map/display_hide.png") center no-repeat, linear-gradient(135deg, #111 0%, #222 50%, #000 51%, #222 100%);
}
.btnDisplay:active {
	background: url("img/map/display_hide.png") center no-repeat, #2d2619;
}
.btnTab {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.btnSwap { /* Container div for the two swap up and botn buttons */
	display: inline-block;
	width: 20px; height: 24px;
	margin-left: 2px;
	vertical-align: top;
}
.btnSwapUp, .btnSwapDown {
	display: block;
	min-width: 18px; min-height: 12px;
	font-size: 8px;
}
.btnSwapUp {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.btnSwapDown {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.btnContainer {
	position: absolute; z-index: 11;
}
.btnWindow {
	position: absolute; z-index: 11;
	top: -16px;
	left: -16px;
	width: 32px; height: 32px;
	opacity: 0.6;
	transition: opacity 0.1s, box-shadow 0.2s;
	box-shadow: inset 0 0 4px 4px rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}
.btnWindow:hover {
	opacity: 0.8;
	box-shadow: inset 0 0 4px 4px rgba(255, 255, 255, 0.6);
}
.btnWindow:active {
	opacity: 0.4;
}
.btnClose {
	background: url("img/ui/close.png"), rgba(0, 0, 0, 0.01);
}
.btnToggle {
	background: url("img/ui/toggle.png"), rgba(0, 0, 0, 0.01);
}
.btnVertical {
	background: url("img/ui/switch.png"), rgba(0, 0, 0, 0.01);
}
.btnHorizontal {
	background: url("img/ui/switch.png"), rgba(0, 0, 0, 0.01);
	transform: rotate(90deg);
}
.btnCopy {
	background: url("img/ui/copy.png"), rgba(0, 0, 0, 0.01);
}
.btnOpaque {
	background: url("img/ui/opaque.png"), rgba(0, 0, 0, 0.01);
}
.btnStats {
	background: url("img/ui/stats.png"), rgba(0, 0, 0, 0.01);
}

.cssStats samp { /* A bar graph */
	vertical-align: middle;
	display: inline-block;
	width: 96px; height: 12px;
	border: 1px solid rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 1px black;
}
.cssStats samp s { /* The inner progress of the bar graph */
	display: block;
	height: 100%;
	background: url("img/background/bargraph.png"), linear-gradient(to bottom, #fff392 0%, #eadf86 50%, #807a49 100%);
	box-shadow: 0px 0px 2px #eadf86;
	border-radius: 1px;
}

.cssInline {
	display: inline-block !important;
}
.cssHidden {
	display: none !important;
}
.css24 {
	width: 24px; height: 24px;
}
.css16 {
	width: 16px; height: 16px;
}
.cssCopyText {
	position: fixed;
	top: -9999px;
}
.cssHelp {
	border-bottom: 1px dotted white;
}
.cssFadedLess {
	opacity: 0.5;
}
.cssFaded {
	opacity: 0.3;
}
.cssFadedMore {
	opacity: 0.1;
}
.cssBlur {
	-webkit-filter: blur(1px);
	filter: blur(1px);
}
.cssLeft {
	float: left;
}
.cssRight {
	float: right;
}
.cssCenter {
	text-align: center;
	vertical-align: middle;
}
.cssIndent {
	margin-left: 16px;
}
.cssHorizontalScroll {
	white-space: nowrap;
	overflow-x: auto;
}
.cssBullet li {
	margin-left: 16px;
	list-style-type: disc;
}
.cssColumn {
	display: inline-block;
	vertical-align: top;
}
.cssCarpet {
	position: absolute; z-index: 19;
	bottom: 0;
	left: 0;
	width: 100%; height: 32px;
	background: linear-gradient(to bottom, transparent 0%, rgba(15, 15, 15, 0.5) 100%);
	pointer-events: none;
}
.cssSpin {
    animation: aniSpin 1s linear infinite;
}
.cssGameText {
	font-family: Trebuchet MS, Menomonia;
}
.cssGameTitle {
	font-family: Menomonia;
}
dfn.cssHighlight {
	color: #ffff00;
}
.cssLimitExceed {
	color: #ff2200;
}
.cssLimitWithin {
	color: #44dd44;
}
.cssLimitEqual {
	color: white;
}
.cssState {
	display: inline-block;
	width: 8px; height: 8px;
	margin-bottom: 2px;
	vertical-align: middle;
}
.cssStateActive {
	background: #00ff00;
}
.cssStateInactive {
	background: #7f807f;
}
.cssStateWaiting {
	background: #ffa500;
}
input[type="text"]::placeholder {
	color: #bbbbbb;
}
input[type="text"].cssSearchNone {
	color: red !important;
}
.cssFadeIn {
	animation: aniFadeIn 0.2s;
}

copper {
	color: #bb6622;
}
silver {
	color: #aaaaaa;
}
gold {
	color: #ddbb44;
}
money {
	color: #ffde9d;
}
karma {
	color: #ee55cc;
}
laurel {
	color: #44dd44;
}
gem {
	color: #66aaff;
}

.s16 {
	width: 16px; height: 16px;
	background-image: url("img/ui/sixteen.png");
}
/* Currency sprites will always have these names. Background will change if a new currency is added */
.s16_copper { background-position: 0 0; }
.s16_gold { background-position: -16px 0; }
.s16_silver { background-position: -32px 0; }
.s16_karma { background-position: -48px 0; }
.s16_laurel { background-position: -64px 0; }
.s16_gem { background-position: -80px 0; }
.s16_dungeon_ac { background-position: -96px 0; }
.s16_dungeon_arah { background-position: -112px 0; }
.s16_fotm_relic { background-position: -128px 0; }
.s16_dungeon_cm { background-position: -144px 0; }
.s16_dungeon_se { background-position: -160px 0; }
.s16_dungeon_ta { background-position: -176px 0; }
.s16_dungeon_hotw { background-position: -192px 0; }
.s16_dungeon_cof { background-position: -208px 0; }
.s16_dungeon_coe { background-position: -224px 0; }
.s16_badge { background-position: -240px 0; }
.s16_commendation { background-position: -256px 0; }
.s16_transmutation { background-position: -272px 0; }
.s16_map_vb { background-position: -288px 0; }
.s16_map_td { background-position: -304px 0; }
.s16_map_ab { background-position: -320px 0; }
.s16_spirit { background-position: -336px 0; }
.s16_fotm_pristine { background-position: -352px 0; }
.s16_map_dt { background-position: -368px 0; }
.s16_skirmish { background-position: -384px 0; }
.s16_map_sw { background-position: -400px 0; }
.s16_magnetite { background-position: -416px 0; }
.s16_provisioner { background-position: -432px 0; }
.s16_league { background-position: -448px 0; }
.s16_proof { background-position: -464px 0; }
.s16_magic { background-position: -480px 0; }
.s16_glory { background-position: -496px 0; }
.s16_contract { background-position: -512px 0; }
.s16_mosaic { background-position: -528px 0; }
.s16_testimony { background-position: -544px 0; }
.s16_key_ab { background-position: -560px 0; }
.s16_key_ds { background-position: -576px 0; }
.s16_gaeting { background-position: -592px 0; }
.s16_key_sw { background-position: -608px 0; }
.s16_key_vb { background-position: -624px 0; }
.s16_key_td { background-position: -640px 0; }
.s16_key_dt { background-position: -656px 0; }
.s16_trader { background-position: -672px 0; }
.s16_volatile { background-position: -688px 0; }
/* End of currencies sprites */
.s16_achievement { background-position: -704px 0; }
.s16_bauble { background-position: -720px 0; }
.s16_blticket { background-position: -736px 0; }
.s16_bubble { background-position: -752px 0; }
.s16_bullet { background-position: -768px 0; }
.s16_cob { background-position: -784px 0; }
.s16_contract { background-position: -800px 0; }
.s16_craft { background-position: -816px 0; }
.s16_dragonite { background-position: -832px 0; }
.s16_ecto { background-position: -848px 0; }
.s16_info { background-position: -864px 0; }
.s16_language { background-position: -880px 0; }
.s16_loot { background-position: -944px 0; }
.s16_map_bf { background-position: -960px 0; }
.s16_map_bs { background-position: -976px 0; }
.s16_map_di { background-position: -992px 0; }
.s16_map_dm { background-position: -1008px 0; }
.s16_map_ds { background-position: -1024px 0; }
.s16_map_eb { background-position: -1040px 0; }
.s16_map_ld { background-position: -1056px 0; }
.s16_map_sl { background-position: -1072px 0; }
.s16_mastery { background-position: -1088px 0; }
.s16_matrix { background-position: -1104px 0; }
.s16_money { background-position: -1120px 0; }
.s16_monument { background-position: -1136px 0; }
.s16_mosaic { background-position: -1152px 0; }
.s16_mysticcoin { background-position: -1168px 0; }
.s16_pvp { background-position: -1184px 0; }
.s16_starting { background-position: -1200px 0; }
.s16_testimony { background-position: -1216px 0; }
.s16_token { background-position: -1232px 0; }
.s16_view { background-position: -1248px 0; }
.s16_wiki { background-position: -1264px 0; }
.s16_youtube { background-position: -1280px 0; }

coppercoin, silvercoin, goldcoin, gemunit, karmaunit, laurelunit {
	display: inline-block;
	width: 16px; height: 16px;
	vertical-align: middle;
	background-image: url("img/ui/sixteen.png");
}
coppercoin, silvercoin, goldcoin {
	margin-bottom: -12px;
}
coppercoin {
	background-position: 0 0;
}
silvercoin {
	background-position: -32px 0;
}
goldcoin {
	background-position: -16px 0;
}
gemunit {
	background-position: -80px 0;
}
karmaunit {
	background-position: -48px 0;
}
laurelunit {
	background-position: -64px 0;
}

.rarity_Junk { color: #aaaaaa !important; /* gray */ }
.rarity_Basic { color: #ffffff !important; /* white */ }
.rarity_Fine { color: #5599ff !important; /* blue */ }
.rarity_Masterwork { color: #33cc11 !important; /* green */ }
.rarity_Rare { color: #ffdd22 !important; /* yellow */ }
.rarity_Exotic { color: #ffaa00 !important; /* orange */ }
.rarity_Ascended { color: #ff4488 !important; /* magenta */ }
.rarity_Legendary { color: #9933ff !important; /* violet */ }


/* =============================================================================
 *  Adjustments based on browser size.
 * ========================================================================== */
@media (max-height: 800px) {



}

/* =============================================================================
 *  @@Palette color derived from GW2 user interface.
 *  This is for reference.
 * ========================================================================== */
#paletteText {
	color: #ff5544; /* Red WvW team */
	color: #cc3322; /* Red time */
	color: #ff4800; /* Red gem store warning */
	color: #ff2200; /* Red chat warning */
	color: #ee3333; /* Red chat team name */
	color: #ff4444; /* Red tooltip warning */
	color: #ff66ee; /* Pink chat whisper name */
	color: #ff99ee; /* Pink chat whisper */
	color: #ee55cc; /* Pink karma */
	color: #ee6655; /* Salmon chat map name */
	color: #ffddcc; /* Salmon chat map */
	color: #ff8844; /* Orange event name in panel */
	color: #ff7700; /* Orange population */
	color: #dd8800; /* Orange AP */
	color: #fcb84d; /* Orange gem store notes */
	color: #ee9911; /* Orange WvW points */
	color: #eebb44; /* Gold WvW subtitle */
	color: #ffbb44; /* Gold guild chat name */
	color: #ffcc77; /* Gold highlight/notice/waypoint */
	color: #fdc84e; /* Gold gem store note */
	color: #ffeebb; /* Cream window and UI title */
	color: #ffeeaa; /* Cream guild chat and item count */
	color: #ddccaa; /* Cream WvW server name */
	color: #ffffbb; /* Yellow subheader */
	color: #ffaa22; /* Yellow orange chain title in event panel */
	color: #ffff00; /* Yellow chat squad name and game notices */
	color: #ffff66; /* Yellow chat squad */
	color: #eecc55; /* Yellow population */
	color: #aaaaaa; /* Gray tooltip */
	color: #88ff88; /* Green WvW team */
	color: #44dd44; /* Green laurel */
	color: #009900; /* Green attributes */
	color: #bbcc77; /* Green time */
	color: #44dd44; /* Green story title */
	color: #ddff77; /* Green bright chat notice */
	color: #88ff88; /* Green chat say name */
	color: #99dd88; /* Green population */
	color: #66ff66; /* Green lime story chapter */
	color: #aaff55; /* Green lime electric story */
	color: #66ccff; /* Blue WvW team */
	color: #44bbff; /* Blue chat party name */
	color: #bbddff; /* Blue chat party */
	color: #66aaff; /* Blue gem price */
	color: #6a9bfd; /* Blue gem store note */
	color: #99eedd; /* Blue light tooltip */
	color: #cc77ff; /* Purple daily */
	color: #bbbbbb; /* Gray in labels and descriptions */
	color: #888888; /* Gray chat time timestamp */
}

#paletteBackground {
	color: #d19600; /* Gold experience progress bar */
	color: #2d2619; /* Brown selection hover */
	color: #ee7924; /* Orange event progress bar */
	color: #bfd47a; /* Green event progress bar */
	color: #eadf86; /* Cream crafting progress bar */
	color: #e4e0b3; /* Cream menu icons top left corner */
}