body { 
	background: black; 
	color: #D3D3D3;
}
* {
	font-family: verdana;
	font-size: 11px;
}
div.chatContainer{
	width:90%;
	padding-left:5px;
	padding-top:5px;
}
div.chatLine{
	text-align:left;
	vertical-align:top;
}
span.chatName{
	text-align:center;
	vertical-align:top;
}
span.chatMsg{
	text-align:left;
	vertical-align:top;
}
span.PvMItemFind{
	color: #1E90FF;
}
.center{
	text-align:center;
}
div.popUpDivFull{
	background-color: black;
	width:40%;
	min-width:300px;
	min-height:250px;
	z-index:1010;
	position:absolute;
	margin: 0 auto;
	left: 0px;
	right: 0px;
	top:50px;
	border-style: solid;
	border-width: 2px;
	border-color:darkgreen;
	padding:0px 5px 10px 5px;
	border-radius:.75em;
}
div.popUpDivMin{
	background-color: black;
	//width:20%;
	min-width:100px;
	z-index:1010;
	position:absolute;
	margin: 0 auto;
	top:250px;
	border-style: solid;
	border-width: 2px;
	border-color:darkgreen;
	padding:0px 5px 10px 5px;
	border-radius:.75em;
}
div.closepopUpDiv{
	text-align:right;
	position:relative;
	right:0px;
	top:2px;
	padding-bottom:2px;
}
div.mask{
	position: fixed;
	top:0;
	left:0;
	right:0;
	background-color:black;
	/*min-width: 100%;*/
	min-height: 100%;
	z-index: 1009; /* some high enough value so it will render on top */
	opacity: .75;
	filter: alpha(opacity=75);
}
div.reply-block{
	padding:4px;
	border-style: solid;
	border-width: 1px;
	border-color:darkgreen;
}
div.flexStallDiv{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
}
div.stallDiv{
    background-color:#000d00;
    padding-left:4px;
    padding-right:4px;
    width:40%;
	min-width:300px;
	height:120px;
    border-style: solid;
	border-width: 1px;
	border-color:darkgreen;
	margin:15px;
	text-align:left;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-evenly;
	position:relative;
	cursor:pointer;

}
.helpTextTable{
    margin:10px;
    padding-left:10px; 
    width:90%;
    border-color:#2797cf;
    border-style:solid;
    border-width:1px;\"
}
a {
	color: red;
	cursor:pointer;
}
a:hover {
	text-decoration: none;
	text-transform: none;
	color: darkred;
}
.noUnderline{
	text-decoration: none;
}
a.mailTitle{
	color: #D3D3D3;
	cursor:pointer;
	text-decoration: none;
}
a.mailTitle:hover {
	color: #D3D3D3;
	cursor:pointer;
	text-decoration: none;
}
a.playerName {
	color: #CCFFFF;
	cursor:pointer;
	text-decoration: none;
}
a.playerName:hover {
	color: #336666;
	cursor:pointer;
	text-decoration: none;
}
courage{
	color: #D05860;
	font-weight:bold;
	font-size:inherit;
}
volition{
	color: #8028E0;
	font-weight:bold;
	font-size:inherit;
}
energy{
	color: #208820;
	font-weight:bold;
	font-size:inherit;
}
gold {
	color: gold;
	font-weight:bold;
	font-size:inherit;
}
ruby {
	color: #990000;
	font-weight: bold;
	font-size:inherit;
}
diamond {
	color: #99FFFF;
	font-weight: bold;
	font-size:inherit;
}
miss{
	color: #ff9999;
	font-weight: bold;
	font-style: italic;
	font-size:inherit;
}
damage{
	color: red;
	font-weight: bold;
	font-style: italic;
	font-size:inherit;
}
dodge{
	color: #00CCCC;
	font-style: italic;
	font-weight: bold;
	font-size:inherit;
}
dexterity{
	color: #F5F5F5;
	font-size:inherit;
}
strength{
	color: #A9A9A9;
	font-size:inherit;
}
quest{
    color: orange;
    font-weight:bold;
    font-style:italic
}
discovery{
	color: cyan;
	font-size:inherit;
}
special{
	color: #2797cf;
	font-size:inherit;
	font-weight:bold;
    font-style:italic
}
table.battle{
	border-collapse: collapse;
	margin-top:5px;
	margin-left:10px;
}
table.battle td{
	vertical-align: top;
}
table.battle tr{
	vertical-align: top;
}
table.battle td.attacker{
	font-size:inherit;
	padding-left:5px;
	color:white;
}
table.battle td.defender{
	font-size:inherit;
	padding-left:15px;
}
b{
 font-size:inherit;
}
h5 {
	font-size:14px;
	margin-bottom:7px;
	margin-top:7px;
}
h2 {
	font-size:13px;
	margin-bottom:3px;
	margin-top:3px;
}
sup{ 
	font-size: 80%;
	line-height:1;
}
.mineXP { 
	color:green;
}
.wild_selectable{
        border: 2px solid black;
        cursor: pointer;
}
.wild_locked{
        border: 2px solid black;
        cursor: not-allowed;
}
.wild_selectable > img:hover{
  -webkit-filter: brightness(120%);
}
table.wilderness_grid td{
    height:100px;
    width:100px;
}
fieldset#actionsFieldSet{
    border: 2px solid darkgreen;
    max-width: 400px;
}
div#fullWildDiv{
    max-width: 400px;
}

/*div#aboveGridDiv{*/
/*	padding-top: 5px;*/
/*	padding-bottom: 5px;*/
/*	text-align: center;*/
/*	border: 2px solid darkgreen;*/
/*	margin-bottom: 5px;*/
/*	margin-left:auto;*/
/*	margin-right:auto;*/
/*	border-spacing:1px; */
/*	max-width: 300px;*/
/*}*/
[id^="mNotice"]{
	position:absolute;
	z-index: 1000;
	top: 5px;
	right: 0px;
	border-style: inset;
	border-width: 1px;
	border-color:#806517;
	padding:4px 25px 4px 10px;
	max-width: 400px;
	background-color: #806517;
	border-radius:1em;
	text-align:center;
}
[id^="eNotice"]{
	position:absolute;
	z-index: 1000;
	top: 5px;
	right: 0px;
	border-style: inset;
	border-width: 1px;
	border-color:darkgreen;
	padding:4px 25px 4px 10px;
	max-width: 400px;
	background-color: darkgreen;
	border-radius:1em;
	text-align:center;
}
.closeNotification{
	position:absolute;
	z-index: 1001;
	top: 4px;
	right: 8px;
}
div#inventoryActionDiv{
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	border: 2px solid darkgreen;
	margin-bottom: 5px;
	margin-left:auto;
	margin-right:auto;
	border-spacing:1px; 
}
#itemNavDiv{
	text-align: center;
	padding-bottom:10px;
}
#itemMainDiv{
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	border: 2px solid darkgreen;
	margin-bottom: 5px;
	margin-left:auto;
	margin-right:auto;
	border-spacing:1px; 
	min-height:300px;
}
#itemDetailDiv{
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid darkgreen;
	margin-bottom: 5px;
	margin-top: 5px;
	border-spacing:1px; 
	min-height:100px;
}
.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  text-decoration: none;
}
/*For Desktop/Wide Screen*/
@media screen and (min-width: 801px){
	.nav-div-left{
		display:block;
	}
	.nav-table-left{
		vertical-align: top;
		margin-left:2px;
		border-spacing:1px; 
		border-style: outset;
		border-width: 1px;
		border-color:darkgreen;
		width:150px;
	}
	.nav-table-header-left{
		vertical-align: top;
		background:green;
		font-weight:bold;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:4px;
		color:white;
	}
	.nav-table-content-left{
		vertical-align: top;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:3px;
		padding-top: 5px;
		position:relative;
		background-color:black;
	}
	.nav-icon-div{
		display:none;
	}
	.main-content-table{
		margin-left:2px;
		border-spacing:1px; 
		border-style: outset;
		border-width: 1px;
		border-color:darkgreen;
		min-width:600px; 
		max-width:800px;
		width:75%;
	}
	.main-content-header{
		background:green;
		font-weight:bold;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:4px;
		color:white;
		width:100%;
		vertical-align: top;
	}
	.main-content-content{
		vertical-align: top;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:3px;
		padding-top: 5px;
		position:relative;
	}
	.nav-links-list {
        	list-style: none;
		padding:0px;
    	}
    	.nav-links-list li:before {
	        content:" • ";
	        font-size:11px;
	        line-height:100%;
        }
	.nav-stats-div-desktop{
		display:block;
	}
	.nav-stats-div-mobile{
		display:none;
	}
	div.homeMedium{
		width:500px;
	}
	.page_intro{
		max-width:525px;
	}
	div#inventoryActionDiv{
		max-width:525px;
	}
	div.popUpDivMin{
		left: 450px;
	}
}
/*For Mobile*/
@media screen and (max-width: 800px) {
	html, body
	{
	  height: 100%;
	}
	body{
		margin:0px;
		padding:0px;
	}
	.nav-icon-div{
		position:absolute;
	}
	.nav-div-left{
		position:fixed;
		top:43px;
		display:none;
		z-index:1003;
		width:100%;
		height:100%;
		overflow: auto;
	}
	.nav-table-left{
		vertical-align: top;
		margin-left:2px;
		border-spacing:1px; 
		border-width: 1px;
		border-color:darkgreen;
		width:100%;
		height:100%;
	}
	.nav-table-header-left-tr{
		display:none;
	}
	.nav-info-div{
		display:none;
	}
	.nav-table-content-left{
		vertical-align: top;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:3px;
		padding-top: 5px;
		background-color:black;
	}
	.nav-stats-div-desktop{
		display:none;
	}
	.nav-stats-div-mobile{
		display:block;
		font-size:14px;
	}
	.nav-stats-div-mobile a.playerName {
		font-size:28px;
	}
	.nav-stats-div-mobile img{
		vertical-align:bottom;
		width:20px;
	}
	.nav-links-list {
        	list-style: none;
		padding-left:5px;
	}
    
	ul.nav-links-list > li{
		font-size:20px;
    	}
	ul.nav-links-list > li > a{
		font-size:20px;
		text-decoration: none;
	}
	.nav-links-list li:before {
	        content:" - ";
	        font-size:18px;
	        line-height:100%;
    	}
	.main-content-div{
		position:relative;
		z-index:999;
	}
	.main-content-table{
		width:100%;
		border-spacing:1px; 
		border-style: outset;
		border-width: 1px;
		border-color:darkgreen;
	}
	.main-content-header{
		height:40px;
		font-size:24px;
		text-align:center;
		vertical-align:middle;
		background:green;
		font-weight:bold;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:4px;
		color:white;
		width:100%;
	}
	.main-content-content{
		vertical-align: top;
		border-style: inset;
		border-width: 1px;
		border-color:darkgreen;
		padding:3px;
		padding-top: 5px;
		position:relative;
	}
	div.homeMedium{
		width:300px;
	}
	.page_intro{
		max-width:300px;
	}
	div.popUpDivMin{
		left: 0px;
		right: 0px;
	}
	div#inventoryActionDiv{
		max-width:300px;
	}
}

.page_intro{
	text-align:center;
	padding-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div.newsContainer .first{
	width:130px;
	vertical-align:top;
}

div.newsStory{
	padding-left:5px;
}
div.homeSmall{
	width:200px;
}

div.homeSmall, div.homeMedium{
	display:inline-block;
	margin-top:5px;
	margin-bottom:5px;
	vertical-align:top;
}
table.standard{
	width:70%;
	border-collapse: collapse;
}
table.standard tr.header{
	vertical-align: top;
	background:green;
	font-weight:bold;
	border-style: inset;
	border-width: 1px;
	border-color:darkgreen;
	padding:4px;
	color:white;
}
table.standard th{
	padding-right:4px;
	padding-left:4px;
	text-align:left;
	white-space: nowrap;
}
table.standard th.center{
	text-align:center;
}
table.standard tr{
	vertical-align: top;
	border-style: solid;
	border-width: 1px;
	border-color:darkgreen;
	color: #D3D3D3;
	transition-property: background;
    transition-duration: .1s;
}
table.standard tr.hover:hover{
	background:#1a1a1a;
}
table.standard td.label{
	vertical-align: top;
	text-align:right;
	font-weight:bold;
	width:100px
}
table.standard tr > td{
	padding-left:4px;
	padding-right:4px;
}

.middle_content{
}
.area_heading{
	font-weight:bold;
	text-decoration: underline;
	padding-bottom:5px;
	text-align:center;
	min-height:15px;
}
th.quote{
	font-weight:bold;
	white-space: nowrap;
	text-align:left;
	vertical-align:text-top;
}

.inventory-container {
  display: flex;
  gap: 20px;
}
.inventory-wrapper {
  display: flex;
  flex-direction: row;
  height: 80vh;
  border: 1px solid darkgreen;
  margin: 5px;
}

/* LEFT SIDE: only as wide as it needs */
.inventory-left {
  flex: 0 0 auto; /* don't grow or shrink */
  padding: 5px;
  overflow-y: auto;
  border-right: 1px solid darkgreen;
}

/* RIGHT SIDE: fills the rest */
.inventory-right {
  flex: 1; /* grow to fill remaining width */
  padding: 10px;
  background-color: #111;
  position: sticky;
  top: 0;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.inventory-right img {
  max-width: 200px;   /* Still caps it nicely on desktop */
  height: auto;
  display: block;
  margin: 0 auto;
}

.tabs {
  margin-bottom: 10px;
}

.tabs button {
  background: none;
  border: none;
  color: #ccc;
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.tabs button.active {
  color: white;
  border-bottom: 2px solid green;
}

.item-panel {
  width: 35%;
}

.item-group {
  margin-bottom: 5px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a1a;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #333;
  border-radius: 5px;
}

.item.equipped {
  border: 2px solid #00cc66;
  background-color: #142f22;
}

.item img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.item-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-details {
  flex-grow: 1;
}

.item button {
  background-color: #006633;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.right-panel {
  width: 30%;
  background-color: #111;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #333;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.action-buttons button {
  flex: 1;
  background-color: #003322;
  color: white;
  border: 1px solid #00cc66;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.item-preview {
  text-align: center;
  padding: 10px;
}

.item-preview img {
  width: 100px;
  height: 100px;
}

.item-preview h2 {
  margin: 10px 0 5px;
}

.item-preview p {
  margin: 4px 0;
  color: #ccc;
}
.close-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, stroke 0.2s ease;
  z-index: 10;
}

.close-icon:hover svg {
  stroke: #66ff66;
  transform: scale(1.1);
}
.inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px;
  /*margin-bottom: 8px;*/
  transition: border 0.2s ease;
  max-width:250px;
}

.inventory-item.equipped {
  border: 2px solid #00cc66;
  background-color: #142f22;
}
.InvItemCategoryFS {
    border: 2px solid darkgreen;
    min-width: 35vh;
}
.item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-left img {
  width: 40px;
  height: 40px;
}

.item-text .item-name {
  font-weight: bold;
  color: #fff;
}

.item-text .item-effect {
  font-size: 0.9em;
  color: #bbb;
}

.item-action {
  background-color: #003322;
  color: #00ff99;
  border: 1px solid #00cc66;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.item-action:hover {
  background-color: #005544;
}
@media (max-width: 768px) {
  .inventory-wrapper {
    flex-direction: column-reverse;
    /*height: 90vh;  give the wrapper height for scroll management */
  }

  .inventory-left {
    flex: 1;
    overflow-y: auto;
    border-right: none;
    border-top: 1px solid #00cc00;
    padding: 10px;
  }

  .inventory-right {
    width: 100%;
    position: relative;
    top: auto;
    padding: 10px;
    border-bottom: 1px solid #00cc00;
    margin-bottom:5px;
    max-height: 40vh;  /* more space for item name + image + desc */
    overflow-y: auto;  /* enables scroll if content overflows */
    box-sizing: border-box;
  }

  .inventory-right img {
    max-width: 100%;
    max-height: 120px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }

  .inventory-item {
    font-size: 16px;
    padding: 8px;
  }

  .item-action {
    font-size: 16px;
    padding: 8px 12px;
  }
}