:root
{
	--highlight-color:             white;
    --background-color:              #163141;
    --page-container-color:          black;
    --page-container-alternate-color: rgb(99, 117, 128);
    --default-text-color:             rgb(225, 229, 235);
    --weak-text-color:                rgb(120, 120, 120);
    --title-color:                    var(--highlight-color);
    --sub-title-color:                var(--highlight-color);
    --content-width:                  45rem;
}
*
{
    padding: 0;
    margin: 0;
}

body
{
    font: normal .80em arial, sans-serif;
    line-height: 1.15;

}


table {
    font-size:14px;
    border-collapse: collapse; 
    width:100%;
}

.closelinks {
    margin: 5px;
}

.itemtooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .itemtooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .itemtooltip:hover .tooltiptext {
    visibility: visible;
  }

.td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.aligncenter {
    text-align:center;
}

.itemname {
    width:20%;
}
.expanded {
    width:90%;
}
.monstername {
    width:25% !important;
}

.img64 {
    max-height:64px;
    max-width:64px;
}

.list table td {
    width: 10%;
    height: 64px;
    padding: 5px;
    vertical-align: middle;
}


.monsterinfo td, .monsterinfo th {
    vertical-align: middle;
    padding: 0.58rem .30rem;
    vertical-align: middle;
    border-top: 1px solid #ffbc03;
}

h1
{
    padding-top: 0em;
    padding-left: 0;
    padding-right: 0;
	padding-bottom: 0.5em;
    font-family: 'Title';
    /*text-transform: uppercase;*/
    font-size: 1.5em;
}

h2
{
    padding-left: 0;
    padding-right: 0;
	padding-bottom: 1em;
    font-family: 'Title';
    font-size: 1.2em;
}


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.page_content
{
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    /*background-color: var(--page-container-color);*/
    padding-top: 2em;
    padding-bottom: 1em;
}

.header
{
    max-width: 55em;
	padding-left: 0em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0em;
    vertical-align: middle;
}


.header_title
{
    font-family: 'Header';
    font-size: 2.5em;
    text-transform: uppercase;
    display: inline-block;
    text-align: bottom;
	line-height: 0;
	padding-bottom: 2em;
}

.header_title a
{
    text-decoration: none;
}

.header_links
{
    display: inline-block;
    margin-top: 0em;
    vertical-align: bottom;
    padding-left: 4em;
    text-align: right;
    float: right;
}

.header_link
{
	vertical-align: middle;
    font-family: 'HeaderLink';
    font-size: 1.2em;
    text-decoration: none;
    margin-left:0.5em;
    margin-right:0.5em;
	line-height: 0;
    text-align: right;
}

.header_link:hover
{
    border-bottom: 2px solid;
}

.footer
{
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
	padding-right: 0;
    padding-bottom: 40em;
    text-align: right;
    border-top: var(--page-container-color) 1px solid;
}

.image_container
{
    /*background-color: #1e1e1e;*/
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    margin-top: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.separator
{
    display: none;
    position: relative;
    max-width: 70rem;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: -1px;
}


@media only screen and (max-width: 49rem)
{
    .page_content
    {
        padding-left: 2em;
        padding-right: 2em;
    }
}
/* 
.hide {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

@media screen and (max-width: 600px) {
    .hidePhone {
      visibility: hidden;
      clear: both;
      float: left;
      margin: 10px auto 5px 20px;
      width: 28%;
      display: none;
    }
  } */