:root {
  --text-color-online: #0a0;
  --text-color-offline: #aaa;
}

body {
  padding: 0;
  margin: 0;
}

.hidden {
  display: none;
}

li.online {
  color: var(--text-color-online);
}

li.offline {
  color: var(--text-color-offline);
}

ul.uniform {
  list-style-position: outside;
  margin-left: -23px;
}

#buddyList {
  border: 1px solid black;
  width: 128px;
  height: 175px;
  float: left;
  overflow: auto;
}

#buddyList ul {
  list-style-type: none;
  margin: 0;
  padding: 0.1em;
}

#menubutton {
  width: 75%;
}

#soundbutton {
  width: 20%;
  padding: 0;
}

div.itemSlot {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  border: 1px solid black;
  background-color: #CCC;
  float: left;
  padding: 1px;
  margin: 2px;
  text-align: right;
  color: #FFF;
  font-weight: bold;
  font-size: 10px;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

div.quickPickup div.itemSlot {
  cursor: url(/data/sprites/cursor/itempickupfromslot.png) 1 3, auto;
}

.equipment { position: relative; height: 200px; border: 1px solid black }
#head0 { position: absolute; top: 0px; left: 40px }
#lhand0 { position: absolute; top: 50px; left: 80px }
#rhand0 { position: absolute; top: 50px; left: 0px }
#finger0 { position: absolute; top: 90px; left: 0px }
#armor0 { position: absolute; top: 40px; left: 40px }
#cloak0 { position: absolute; top: 90px; left: 80px }
#legs0 { position: absolute; top: 80px; left: 40px }
#feet0 { position: absolute; top: 120px; left: 40px }
#pouch0 { position: absolute; top: 160px; left: 40px }

#chat {
  height: 190px;
  border: 1px solid #000;
  padding: 0.5em;
  overflow-y: scroll;
  word-wrap: break-word;
  display: block;
  color: #000;
  background-color: #FFF;
}

#zoneinfo {
  color: #FFF;
  background-color: #000;
}

#stats {
  border: 1px solid black;
  width: 128px;
  float: left;
  font-size: 0.8em;
  white-space: pre;
  padding: 0.1em;
}

div.logerror { color: #F00 }
div.logprivmsg { color: #444 }
div.logclient { color: #888}
div.logerror { color: #F00 }
div.loginformation { color: #ffc800}
div.lognegative { color: #f00}
div.lognormal { color: #000}
div.logpositive { color: #0f0}
div.loggroup { color: #633d8b }
div.logemote { color: #633d8b }
div.logresponse { color: #006400 }
div.logscene_setting { color: #572002 }
div.logsignificant_negative { color: #ff8f8f }
div.logsignificant_positive { color: #4169e1 }
div.logtutorial { color: #ac00ac }
div.logsupport { color: #ff7200 }

span.logtimestamp {
  font-size: 8pt;
  color: gray;
}

span.logh {
  color: #00F
}

span.logi {
  text-decoration: underline
}

div.logcolL {
  float: left;
  min-width: 2.5em;
  height: 100%;
  white-space: pre;
}

div.logcolR {
  height: 100%;
  overflow-y: auto;
}

.actionmenu {
}

.actionmenu button {
  min-width: 5em;
  width: 100%
}

#leftColumn {
  float: left;
  width: 130px
}

#minimap {
  border: 1px solid black;
  float: left
}

#gamewindow {
  float: left
}

#rightColumn {
  float: left;
  width: 130px
}

#equipmentborder {
  float: left;
  width: 130px
}

#bag { border: 1px solid black; width: 120px; padding: 2px; float: left }
#keyring { border: 1px solid black; width: 80px; padding: 2px; float: left }
#portfolio { border: 1px solid black; width: 80px; padding: 2px; float: left }

#chatinput {
  width: 98%
}

.inventorypopup {
  border: 1px solid black;
  background-color: #FFF;
  padding: 2px;
  float: left
}

.inventorypopup_2 {
  width: 80px;
}

.inventorypopup_3 {
  width: 120px;
}

.inventorypopup_5 {
  width: 200px;
}

.popupdiv, .windowdiv {
  x-border: 1px solid #000;
  background-color: #FFF;
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
}

.popuptitle, .windowtitlebar {
  padding: 3px;
  border-bottom: 1px solid #777;
  border: 1px solid #000000;
}

.popuptitleclose, .windowtitleclose {
  float: right;
  border: 1px solid #000000;
  height: 100%;
  width: 1.1em;
  text-align: center;
}

.popuptitleclose:hover, .windowtitleclose:hover {
  background-color: #ffffff2a;
}

.quantityselectorvalue {
  width: 4em;
}

.unselectable {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.background {
  background: url(/data/gui/panelwood003.jpg);
  color: #FFF;
}

.inlineblock {
  display: inline-block;
  vertical-align: top;
}

.menugroup {
  color: #000;
  background: #FFF;
  text-align: center;
}

.horizontalgroup {
  display: flex;
  align-items: center;
}

.verticalgroup {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.tavellogtabpanel {
}

.tlog_hlayout {
  width: 40em;
  height: 25em;
}

.tlog_rpane {
  float: top;
  height: 100%;
  margin-left: 15em;
  overflow-y: auto;
}

.travellogitems {
  float: left;
  width: 15em;
  margin-top: 1em;
}

.travellogdetails {
  float: left;
  margin-top: 1em;
}

.travellogdescription {
  font-style: italic;
}

.imageviewer h3 {
	margin: 0;
}

#portfolio {
	display: none;
}

#client {
	display: none;
}

#loginpopup {
	left: 15vw;
	width: 70vw;
	top: 30vh;
	height: 20vh;
	line-height: 10vh;
	position: absolute;
	z-index: 1000000;
	color: #000;
	text-align: center;
	padding: 1em
}

.shopsign {
  min-width: 35em;
  max-width: 40em;
  height: 23em;
  overflow-y: auto;
}

.shopcaption {
}

.shoplist {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.shoprow {
  width: 100%;
  height: 3em;
}

.shopcol {
  float: left;
  border-style: solid;
  border-width: 1px;
  height: 100%;
}

.shopcolr {
  flex: 1;
}

.bestiary {
  min-width: 35em;
  height: 23em;
  overflow-y: scroll;
}

.progressbar {
	border: 1px solid #005;
	line-height: 5Vh;
}

.progressbarvalue {
	width: 100%;
	background-color: #00A;
	animation-duration: 600s;
	animation-name: progressbar;
	animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
	animation-iteration-count: infinite;
}

@keyframes progressbar {
	from {
		width: 0
	}

	to {
		width: 100%;
	}
}

.dialogcontents {
  padding: 9px;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}

.dialogbuttons {
  margin-left: auto;
  margin-right: 0px;
}

.checksetting {
  margin-left: 0px;
  margin-right: auto;
}

.vgroupcol {
  margin-bottom:auto;
  margin-top:0px;
}

.vgroupcolr {
  margin-bottom: auto;
  margin-top: 0px;
  padding-left: 15px;
}

.btnleft {
  margin-right: 5px;
}

.tally {
  font-family: Tally;
}

@font-face {
  font-family: Amaranth;
  src: url("/data/font/Amaranth-Regular.ttf");
}
@font-face {
  font-family: Amaranth;
  src: url("/data/font/Amaranth-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: Amaranth;
  src: url("/data/font/Amaranth-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: Amaranth;
  src: url("/data/font/Amaranth-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: Black Chancery;
  src: url("/data/font/BlackChancery.ttf");
}

@font-face {
  font-family: Carlito;
  src: url("/data/font/Carlito-Regular.ttf");
}
@font-face {
  font-family: Carlito;
  src: url("/data/font/Carlito-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: Carlito;
  src: url("/data/font/Carlito-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: Carlito;
  src: url("/data/font/Carlito-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: Tally;
  src: url("/data/font/Tally.ttf");
}