@font-face{
  font-family: 'komika';
  src: url('../fonts/komika.woff') format('woff');
}

@font-face{
  font-family: 'komika';
  src: url('../fonts/komika_bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face{
  font-family: 'komika';
  src: url('../fonts/komika_italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}


/**** YUI 2 Reset CSS ****/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}


/*** Framework ***/

/* consistent box model */

div, textarea, td, input[type="text"], input[type="password"]
{
box-sizing:border-box;
}

div
{
   position: relative;
}

td
{
   /* td should be position: fixed, or weird things happen with borders */
   vertical-align: top;
}

*:focus {outline: none;}

textarea { line-height: 150%; }

li {
list-style-position:inside;
}



/**************/


/****** Base ******/



body
{
   background-color:#060606;
   text-align: center;  /* ie */
   background-position: center 0px;
   color: #ddd;
   font-family: Open Sans, arial, helvetica, sans-serif;
   font-size: 85%;
   line-height: 170%;
}


h1,h2,h3
{
    font-family: pt serif, georgia, utopia, serif;
}

a, a:visited, a:link
{
  color: #facb76;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

input, textarea
{
   font-family: Open Sans, arial, helvetica, sans-serif;
}


label
{
   cursor: pointer;
}

textarea
{
   padding: 16px;
   background-color: #080808;
   border: solid 1px #1a1a1a;
   color: #ccc;
   width: 600px;
   height: 200px;
   resize: none;
}

input[type="submit"], input[type="button"]
{
   font-weight: bold;
   font-size: 100%;
   background-color: #888;
   color: #111;
   padding: 8px 36px 8px 36px;
   cursor: pointer;
   border-radius: 4px;
   border: 0;
}


select:focus, option:focus, input:focus
{
   outline: none;
   border: 0px;
}

.textflash
{
   color: #fff !important;
}

.clip
{
    overflow: hidden;
    line-height: 0px;
    display: block;
}

.decorated
{
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
}

.ftserif {
  font-family: pt serif, georgia, utopia, serif !important;
}



.rounded4
{
    border-radius: 4px;
}


.rounded8
{
    border-radius: 8px;
}

.rounded12
{
    border-radius: 12px;
}

.shadow
{
}


.wood {
    font-size: 110%;
    border: solid 1px #3d3d3d;
    border-color: #3d3d3d #272727 #272727 #3d3d3d;
    background-color: #111;
    border-radius: 4px;
    font-family: pt serif, georgia, utopia, serif;
    background-color: #312009;
    border: solid 1px #433119;
    border-color: #433119 #1E1406 #1E1406 #433119;
    color: #D7C5A6;
    text-shadow: #19150E -1px -1px 0px;
}



/********* Main Site Frame ********/



#backgroundgradient
{
   height: 500px;
   background-image: url(/assets_v20200725039/images/site/background.png);
   background-position: center 0px;
   width: 100%;
   position: fixed;
   top: 50px;
   z-index: -100;
   opacity: 0.1;
}


#mainpaneloutline
{
   width: 1024px;
   border: solid 1px #111;
   border-top-width: 0px;
   background-color: #080808;
   margin: 0px auto;
  border-radius: 0 0 12px 12px;
   padding-top: 52px;
}

#mainpanel
{
  background-color: #080808;
  padding: 0px;
  text-align: left;
  border-radius: 0 0 12px 12px;
}

#chrome
{
   height: 52px;
   background-color: #080808;
   border-bottom: solid 1px #1a1a1a;
   position: fixed;
   width: 100%;
   z-index: 1000;
}

#chrome #chromecontent {
   max-width: 1024px;
   min-width: 768px;
   margin: 0 auto;
   height: 100%;
   text-align: left;
}

#chrome a
{
  text-decoration: none;
}

#chrome a:hover
{
  text-decoration: underline;
}

body.fixed-header #chrome {
    position: absolute;
}



#lightboxshade {
   z-index: 1001;
   background-color: rgba(0,0,0,0.7);
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   position: fixed;
   display: none;
   cursor: default !important;
}

.confirmbox {
    display: none;
    z-index: 1002;
    position: fixed;
    left: 50%;
    margin-left: -180px;
    width: 360px;
    border: solid 2px #3d3d3d;
    background-color: #444;
    border-radius: 8px;
    top: 200px;
    color: #fff;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
      border: solid 2px #555;
    border-color: #555 #3d3d3d #3d3d3d #555;
    overflow:hidden;
}

.confirmbox .confirmbox-message {
   padding: 32px 20px;
   font-size: 110%;
}

.confirmbox .confirmbox-message b {
   margin: 0 2px;
}

.confirmbox .confirmbuttons {
   white-space: nowrap;
}

.confirmbox .confirmbutton {
   text-align: center;
   border: solid 1px #7e7e7e;
   padding: 8px 0;
   cursor: pointer;
   display: inline-block;
   background-color: #4a4a4a;
}

.confirmbox .confirmbutton:hover {
    background-color: #555;
}


.confirmbox .confirmbox-yes {
    font-weight: bold;
    width: 66%;
}

.confirmbox .confirmbox-no {
    width: 34%;
}


/** Chrome - Left Section **/


#chrome #logo
{
  position: absolute;
  top: 13px;
  left: 22px;
}

#chrome #logo img {
   width: 130px;
}

#chrome #tagline
{
  position: absolute;
  left: 170px;
  top: 14px;
  color: #e0bb71;
  font-style: italic;
  font-size: 120%;
}

#chrome #betatag
{
   font-size: 70%;
   color: #C2432E;
   margin-left: 8px;
   font-family: Open Sans, arial, arial, sans-serif;
}

#chrome #sitenav
{
   position:absolute;
   height: 100%;
   left: 176px;
   top: 0px;
   white-space: nowrap;
   vertical-align: top;
}

#chrome #sitenav a
{
   height: 100%;
   line-height: 340%;
   vertical-align: top;
   margin: 0px;
   padding: 0px 20px;
   display: inline-block;
   white-space: nowrap;
   color: #949494;
   font-size: 110%;
   font-weight: bold;
}

#chrome #sitenav a:hover
{
   text-decoration: none;
   color: #ccc;
}




/** Chrome - Right Section **/


#chrome #rightlinks
{
   position: absolute;
   right: 24px;
   top: 12px;
}


#chrome #loginmini
{
    position: relative;
    top: 8px;
    margin: 0px 8px;
    width: 20px;
}

#chrome #rightlinks #loginlink:hover
{
   text-decoration: none;
}

#chrome #username, #chrome #loginlink
{
   color: #d6d6d6;
   display: inline-block;
   padding: 4px 24px 4px 32px;
   position: relative;
   top: -2px;
   background-color: #222;
   border-radius: 4px;
}

#chrome #loginlink
{
   padding: 4px 32px 4px 32px;
}


#chrome #username:hover
{
   border-color: #383838;
   text-decoration: none;
}


#chrome a#mytable
{
   background-color: #322614;
   border: solid 1px;
   border-color:  #524126 #21190e #21190e #524126;
   color: #DED1B9;
   display: inline-block;
   padding: 2px 44px;
   font-weight: bold;
   margin-left: 24px;
   font-size: 100%;
   position: relative;
   top:-1px;
   left: 0px;
   text-transform: uppercase;
   background-image: url(/assets_v20200725039/images/site/wood_texture.png);
   border-radius: 4px;
}

#chrome a#mytable:hover
{
   color: #fff;
   text-decoration: none;
}

#chrome a.mytabledisabled:hover
{
   color: #DED1B9 !important;
   cursor: default;
}


#chrome #loginregisterlinks
{
   bottom: 12px;
}




/** Main Panel **/


#content
{
   padding: 0px 0px;
   margin: 0px;
}

.contentfortable
{
}


#footer
{
   margin-top: 0px;
   text-align: center;
   border-top: solid 1px #191919;
   color: #444;
   padding-bottom: 48px;
   padding-top: 16px;
}

#footer a, #footer a:visited, #footer a:link
{
   margin-left: 16px;
   color: #7e7e7e;
   font-size: 110%;
   display: inline-block;
   margin-top: 10px;
}

#footer.footerfortable
{
   height: 8px !important;
   padding: 0px !important;
   margin:0px !important;
   border: 0px !important;
}







/***************** Site Popup - Login *************/



#loginpopup
{
   position: absolute;
   z-index: 998;
   top: 40px;
   right: -16px;
   background-color: #3d3d3d;
   padding: 16px 16px 20px 16px;
   display: none;
   border: 0;
   width: 240px;
   box-shadow: 0 0 32px rgba(0,0,0,0.8);
   border-radius: 8px;
}

.loginlabel {
   font-weight: bold;
   margin-bottom: 2px;
}

.loginfield
{
   margin-bottom: 8px;
   background-color: #181818;
   color: #eee;
   border: 0;
   padding: 8px 4px 8px 12px;
   font-size: 120%;
   font-weight: bold;
   width: 100%;
   border-radius: 4px;

}

#loginsubmit
{
   margin-top:12px;
   font-weight: bold;
   font-size: 100%;
   background-color: #aaa;
   color: #111;
   border: 0;
   padding: 4px 32px;
   cursor: pointer;
}

#loginloading
{
   margin-left: 12px;
   color: #aaa;
   white-space: nowrap;
   display: inline-block;
   font-weight: bold;
}

#loginloadingspinner {
   display: none;
}

#loginloading a
{
   font-size: 80%;
   color: #aaa !important;
   margin: 0 !important;
   font-weight: normal;
}

#loginerror
{
   background-color: #933;
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 8px;
   display: none;
}





/***************** Site Popup - Profile *************/



#profilepopup
{
   position: absolute;
   z-index: 62000;
   top: 32px;
   right: 0px;
   background-color: #3d3d3d;
   display: none;
   border: solid 1px #444;
   border-color: #444 #272727 #272727 #444;

   width: 180px;

   border-radius: 4px;
}

#profilepopup a
{
   display: block;
   color: #ccc;
   border-bottom: solid 1px #505050;
   padding: 12px 12px 12px 16px;
   font-size: 120%;
   margin: 0px !important;
}

#profilepopup a.lite
{
   font-weight: normal;
}

#profilepopup a.logout
{
   font-style: italic;
   border: 0;
}

#profilepopup a:hover
{
   color: #fff;
   background-color: #444;
   text-decoration: none;
}



/********** Table Popup - Base **********/


.tablepopup
{
    border-radius: 8px;
    position: fixed;
    top: 80px;
    left: 50%;
    margin-left: -250px;
    z-index: 5000;
    display: none;

    width: 500px;
    background-color: #161616;
    line-height: 120%;
    font-size: 110%;
    color: #aaa;
    border: solid 1px #3d3d3d;
    overflow: hidden;
}

.tablepopupheader
{
   padding: 12px 0px;
   background-color: #3d3d3d;
   font-size: 120%;
   text-align: center;
   color: #ccc;
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;

   border-radius: 4px 4px 0 0;
;
}

.tablepopupheader .closebutton
{
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 90%;
   cursor: pointer;
   padding: 12px 20px;
   border-left: solid 1px #555;
   font-weight: normal;
   font-style: normal;
}

.tablepopupheader .closebutton:hover
{
   background-color: #373737;
   color: #eee;
}

.tablepopupcontent
{
   position: relative;
   width: 100%;
   overflow: auto;
   padding: 24px;
   height:auto;
}

.tablepopup input[type="text"], .tablepopup textarea, .tablepopup select
{
   background-color: #0a0a0a;
   color: #bbb;
   border: 0;
   border-bottom: solid 1px #282828;
   padding: 8px;
   font-size: 110%;
}

.tablepopup input[type="submit"], .tablepopup  input[type="button"]
{
   padding: 8px 36px 10px 36px;
}

.tablepopup select
{
  padding: 2px !important;
  font-size: 100%;
}


.tablepopup  .label
{
   font-weight: bold;
   margin-bottom: 8px;
}

.tablepopup .optionbutton
{

}

.tablepopup .hint
{
   font-size: 80%;
   margin-left: 12px;
   font-weight: normal;
}





/************************* Content Page *************************/


.contentpage
{
    min-height: 600px;
    color: #aaa;
}

.contentpagepadded
{
   margin: 0px auto;
   width: 860px;
   border-width: 0px 2px;
   padding: 24px 0px 36px;
   color: #aaa;
}

.contentpageframe
{
   margin: 0px auto;
   width: 800px;
   border-width: 0px 2px;
   padding: 24px 24px 20px 24px;
   background-color: #0a0a0a;
   color: #aaa;
}

.contentpage h1, .contenth1
{
   font: bold 200% pt serif, georgia, utopia, serif;
   color: #C2432E;
   margin-top: 8px;
   margin-bottom: 32px;
}

.contentpage h2, .contenth2
{
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
   font-size: 180%;
   color: #C2432E;
   margin-top: 8px;
   margin-bottom: 20px;
}

.contentpage h3, .contenth3
{
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
   font-size: 120%;
   color: #C2432E;
   margin-top: 32px;
   margin-bottom: 16px;
}


.contentpage table
{

}

.contentpage table th
{
    font-size: 70%;
    text-transform: uppercase;
    color: #5c5850;
    font-family: Open Sans, arial, arial, sans-serif;
    padding: 0px 24px 8px 8px;
}

.contentpage table td
{
    padding: 8px 24px 8px 8px;
    border-bottom: solid 1px #111;
}

.contentpage table th:first-child, #contentpage table td:first-child
{
    padding-left: 16px;
}

.contentpage .rule
{
    height: 1px;
    overflow: hidden;
    border-top: solid 1px #222;
    margin: 24px 0px;
}

.contentpage .section
{
   margin: 24px 0px;
   padding: 24px 0px;
   border-top: solid 2px #272727;
}



.contentpage input[type="text"]
{
   padding: 4px;
   border: 0;
   background-color: #222;
   color: #eee;
}






.clarifyemote {
  letter-spacing: 2px;
}


/************************************************/



/*********** dice *************/



.d6small
{
   display: inline-block;
   overflow: hidden;
   width: 16px;
   height: 16px;
   position: relative;
   margin-left: 2px;
   vertical-align: text-bottom;
}

.d6small img
{
   position: relative;
   width: 96px;
}

.d6small.heropt
{
   margin-left: 0px;
}






/*********** Mini Sprites **********/


.mini
{
    position: absolute;
    width: 18px;
    height: 33px; /* account for border top */
}

.mini.minibig
{
   width: 34px;
   height: 48px;
}

.mini.minipreview {
   position: relative;
   margin: 16px auto 0 auto;
}

.mini.minipreview.minibig {
   margin-top: 6px;
}


.mini.inline
{
    position: relative;
    display: inline-block;
}

.miniinner
{
    position: relative;
    width: 16px;
    height: 32px;
    overflow: hidden;

    width: 18px;
    height: 36px;
    z-index: 1;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}

.mini.minibig .miniinner
{
    width:  32px;
    height: 48px;

    width:  36px;
    height: 54px;
}


.minitext
{
   color: #fff;
   text-align: center;
   width: 120px;
   font-size: 90%;
   z-index: 5000;
   padding: 0px;
   white-space: nowrap;
   line-height: 14px;

   left: -52px;
   bottom: 38px;

   position: absolute;

   text-shadow: 0 1px 5px rgba(0,0,0,0.95);
}

.mini.minibig .minitext {
   bottom: 50px;
   left: -42px;
}

.mini.minishort .minitext {
   bottom: 24px;
}


.minitext .minitexttag
{
   color: #bbb;
   font-size: 90%;
}

.minicolor
{
   position: absolute;
   left: 0px;
   top: 0px;
   background-color: #bbb;
   z-index: -1;
   height: 32px;
   width: 100%;
}

.mini.minibig .minicolor {
   height: 47px;
}

.miniinner img
{
}

#minihighlight
{
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   border-bottom: solid 2px #FFCC00;
}

.miniimg {
    z-index: 2;
    width: 100%;
}

.ministand
{
   position: absolute;
   bottom: -6px;
   left: -2px;
   z-index: 0;
   width: 22px;
   height: 11px;
   overflow: hidden;
   filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

.mini.minibig .ministand {
   left: 7px;
   width: 22px;
   transform: scale(1.4,1.0);
}


.ministand img
{
   position: relative;
   left: 0px;
   top:0px;
   width: 88px;
}

.miniselected {
}


.miniinner .minitint
{
   background-color: red;
   opacity: 0.1;   height: 100%;
   width: 100%;
   z-index: 1;
   position: absolute;
}

.mini .tagmarker
{
   position: absolute;
   bottom: 0px;
   right: 0px;
   background-color: #933;
   height: 2px;
   width: 3px;
   line-height: 0px;
   overflow: hidden;
   display: none;
   z-index: 1;
}

.mini .tagmarker.showmarker
{
    display: block !important;
}

.mini.minitemplate.minitemplateselected
{
    box-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

.mini.minitemplate
{
    width: 18px;
}

.mini.minitemplate.minibig
{
   width: 34px;
}

.minitemplate.inrow
{
    top: 10px;
}

.minitemplate.minibig.inrow
{
    top: 2px;
    -webkit-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
    margin-left: -8px;
    border-top-width:2px;
}

.minitemplate.minibig.inrow .ministand
{
   -webkit-transform: scale(1.5,1.0);
   -ms-transform: scale(1.5,1.0);
   transform: scale(1.5,1.0);
}






/************* Table Popup - Charsheet ************/





.handwritten
{
   font-family: komika, "comic sans ms", arial, sans-serif !important;
   color: #30291E !important;
}

#charsheetouter
{
  position: absolute;
  top: 60px;
  left: 44px;
  z-index: 5000;
  display: none;
  height: 600px;

  transition: all 250ms;
  opacity: 0.0;
  transform: scale(0.9);
}

#charsheetouter.full {
    opacity: 1.0;
    transform: scale(1.0);
}


.page-player #charsheetouter
{
   left: 280px;
   top: 20px;
}

#charsheetmain
{
  position: relative;
  width: 488px;
  box-shadow: 0px 0px 32px rgba(0,0,0,0.7);
  height: 640px;
}

.charsheetpage, .charsheetinnerpopupcontent {
    scrollbar-width: thin;
    scrollbar-color: #BCAC91 transparent;
}

.charsheetpage::-webkit-scrollbar-track, .charsheetinnerpopupcontent::-webkit-scrollbar-track {
    background: transparent;
}

.charsheetpage::-webkit-scrollbar-thumb, .charsheetinnerpopupcontent::-webkit-scrollbar-thumb {
    background-color: #BCAC91;
    border-radius: 8px;
}



#charsheetmetabuttons {
    position: absolute;
    top: 20px;
    left: 485px;
    width: 50px;
    color: #30291E;
    z-index: 1;
}

#charsheetmetabuttongradient {
    pointer-events: none;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    z-index: 2;
}

.charsheetmetabutton {
    display: block;
    height: 72px;
    text-align: center;
    background: #d4c19f;
    border: solid 1px #4c4029;
    border-radius: 0 6px 6px 0;
    font-family: pt serif, georgia, utopia, serif;
    font-size: 20px;
    line-height: 70px;
    font-weight: bold;
}

.charsheetmetabutton:hover {
    background-color: #e0d0b4;
}

#charsheetedit img {
    width: 24px;
    margin-top: 21px;
}

#charsheettoprow
{
  width: 476px;
  height: 12px;

  background-color: #E0D1B6;
  xbackground-image: url(/assets_v20200725039/images/app/charsheet_texture.png);

  position: absolute;
  top: 1px; /* prevent subtle gap on chrome zoomed in */

}

#charsheetbentcorner
{
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 12px solid transparent;
  border-left: 12px solid #B09D7B;
  z-index: 4001;
  position: absolute;
  left: 476px;
  top: 0px;
}

#charsheet
{
  background-color: #E0D1B6;
  xbackground-image: url(/assets_v20200725039/images/app/charsheet_texture.png);

  color: #30291E;

  position: absolute;
  top: 12px;
  z-index: 4001;
  height: 640px;
  width: 488px;
  line-height: 120%;
  font-size: 110%;
  font-family: pt serif, georgia, utopia, serif;

}

#charsheet.longer
{
   height: 664px;
}


#charsheetinner
{
  height: 100%;
  margin: 8px 16px 16px 16px;
  position: relative;
}



#charsheetshadow
{
  display: none;

  width: 488px;
  height: 648px;

  position: absolute;
  top: 8px;
  left: -8px;
  z-index: 4000;
  background-color: #000;
  opacity: 0.3;}

#charsheetshadow.longer
{
  height: 672px;
}



/***** Chrome *****/




#charsheet #charsheetchrome
{
    border-bottom: solid 1px #988667;
    padding-bottom: 8px;
    margin-bottom: 8px;
    left: 0px;
    position: relative;
    width: 388px;
    display: none;
}

#charsheet #charsheetchrome #charsheettitle
{
    font-family: pt serif, georgia, utopia, serif;
    font-size: 120%;
    font-weight: bold;
    letter-spacing: -1px;
    color: #4D4230 !important;
}

#charsheet #charsheetchrome #charsheetusername
{
   position: absolute;
   text-align: left;
   left: 160px;
   top: 4px;
   font-size: 80%;
   white-space: nowrap;
}

#charsheet #charsheetchrome #charsheetnextprev
{
   display: block;
   position: absolute;
   bottom: 8px;
   right: 4px;
   font-size: 150%;
}


.charsheetarrow
{
    margin: 0px 2px;
    display: inline-block;
   position: relative;
}


#charsheet .closebutton
{

   border: solid 1px #A89677;
   color: #72654D;

   position: absolute;
   top: 3px;
   right: 3px;
   font-size: 100%;
   padding: 8px 20px;
   font-weight: normal;
   font-style: normal;
   z-index: 100;
   border-radius: 6px;

   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;

}

#charsheet .closebutton:hover
{
   background-color: #F2ECE1;
}




/**** Namebox *****/



#charsheetnamebox
{
   position: relative;
   text-align: center;

   position: relative;
   top: 0px;
   left: 0px;

   padding: 16px 8px;
   margin: 0 12px 4px;

   border: solid 1px #BCA986;

   background-color: #f1e3ca;

   border-radius: 6px;

}

#charsheetnamebox #charsheetname
{
   font-size: 170%;
   font-weight: normal;
   display: inline-block;
   top: 3px;
   font-family: komika, "comic sans ms", arial, sans-serif;
}

#charsheetnamebox #charsheetrole
{
   font-size: 100%;
   margin-left: 20px;
   display: inline-block;

   font-family: komika, "comic sans ms", arial, sans-serif;
}

#charsheetnamebox #charsheetquote
{
   margin-top: 10px;
   font-size: 100%;
   font-weight:normal;

   font-family: komika, "comic sans ms", arial, sans-serif;
}


.charsheetsubheadicon {
    position: relative;
    margin-right: 0px;
    top: 1.5px;
    width: 10px;
}



/******* Counters *******/



.statcounter
{
    display: inline-block;
    display:block;
    border-left: solid 1px #C9BBA2;
    border: solid 1px #BCA986;
    width: 25%;
    width: 100%;
    padding: 8px 0px;
    background: #f1e3ca;

     border-radius: 6px;
;
}

.stathover:hover
{
   background-color: #F2ECE1 !important;
   background-image: none !important;
}


.charstatval
{
    font-family: "comic sans ms", arial, sans-serif;
    color: #30291E;

    text-align: center;
    font-size: 100%;
    margin-top: 2px;
    font-weight: bold;

}

.charstatlabel
{
    text-transform: uppercase;
    font-size: 70%;
    text-align: center;
    margin-top: 8px;
    font-weight: bold;
    border-top: solid 1px #d6c6a8;
    padding-top: 4px;
}


.table-charsheet-icon {
   display: inline-block;
   width: 16px;
   height: 16px;
   overflow: hidden;
   background-image: url(/assets_v20200725039/images/app/table_icons.png);
   background-size: 96px;
   margin-right: 0px;
   top: 3.5px;
   position: relative;
   margin-left: -3px;
   opacity: 0.9;
   scale: 0.8;
}

.table-charsheet-icon.icon-party-life {
   background-position: -32px;
}

.table-charsheet-icon.icon-party-power {
   background-position: -48px;
   margin-right: 1px;
}

.table-charsheet-icon.icon-party-power.big-icon {
    scale: 1.2;
    top: 1px;
}






/*********** ***********/



#charsheetlower
{
   position: relative;
}


.charsheetpage
{
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
   width: 100%;

   color: #655D4F;

   height: 516px;
   overflow-y: auto;
   overflow-x: hidden;

   padding-right: 12px;
   margin-top: 8px;

   border-radius: 6px;
}


#chargennamebox
{
   position: relative;
   text-align: center;
   display: none;

   font-weight: bold;
   position: relative;
   top: 0px;
   left: 0px;

   padding: 20px;

   border: solid 1px #BCA986;

   background: #f1e3ca;

   margin-bottom: 4px;

   border-radius: 6px;

}

#selectruleset
{
  text-align: center;
}



#chargenbuttons
{
   padding: 16px 0px 8px 0px;
   text-align: center;
   position: relative;
   display:none;

   width: 100%;
   position:absolute;
   bottom: 16px;

   border-top: solid 1px #BCA986;
}

.chargenbutton
{
   text-align: center;
   margin: 0px auto;
   font-size: 100%;
   padding: 12px 64px;
   white-space: nowrap;

   border: solid 1px #AD997D;
   border-bottom-width: 2px;
   background-color: #E0D1B6;

   background: #f1e3ca;

   display: inline-block;

   border-radius: 6px;
}

#editcharlinkX:hover
{
    text-decoration: underline;
}

#editcharlinksX
{
   position:absolute;
   bottom: 20px;
   text-align: center;
   width: 100%;
   border-top: solid 2px #BCA986;
   padding-top: 12px;
}



#editcharlinksX div
{
   text-align: center;
   margin: 0px auto;
   font-size: 75%;
   padding: 4px 16px;
   width: 150px;
   white-space: nowrap;

   border-radius: 6px;

   border: solid 1px #AD997D;
   border-bottom-width: 2px;
   background-color: #E0D1B6;

   display: inline-block;
}

#charblocks {
    margin-left: 12px;
    margin-right: 12px;
    padding-bottom: 20px;
}


#bottomlinks {
    margin: 20px 0px 20px 12px;
    text-align: center
}

#editcharlink {
    font-size: 100%;
    white-space: nowrap;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    padding: 12px 64px;
    border: solid 1px #AA9A7D;
    border-width: 1px 1px 2px 1px;
    border-radius: 6px;
    cursor: pointer;
    background: #f1e3ca;
}

#editcharlink:hover {
   background-color: #F2ECE1 !important;
   background-image: none !important;
}




/******* Main Statbox *******/



.statpagetextblock
{
    line-height: 170%;
    font-size: 100%;
    font-family: komika, "comic sans ms", arial, sans-serif;
    color: #30291E;
    background: #f1e3ca;

    padding: 16px;

    border: solid 1px #BCA986;
    border-radius: 6px;
}

.statpagetextblock a {
    color: #BD7700;
}


.statpagesubhead
{
   position: relative;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 75%;
   letter-spacing: 0px;
   padding: 2px;

   margin: 32px 0px 4px 0px;
   font-weight: bold;
   white-space: nowrap;
   display: inline-block;
   width: 100%;
}

#charblocks .statpagesubhead {
    border: 0;
    margin-left: 4px;
}

.blockeditlink
{
   margin-left: 8px;
    display: inline-block;
    width: 12px;
    top: 2px;
    position: relative;
}




/*****  traitlist  ****/



#traitlist_bas
{
   width: 100%;
}

.traitrow
{
   white-space: nowrap;
   margin-top: -1px;
   font-weight: bold;
}

.traitlist .trait
{
   position: relative;
   padding: 10px 12px 8px 12px;
   width: 100%;
   border: solid 1px #BCA986;
   border-radius: 6px;
   display: inline-block;
   background: #f1e3ca;
}


.traitlist .trait .traitlabel
{
    white-space: nowrap;

    font-family: pt serif, georgia, utopia, serif;
    text-transform: uppercase;
    top: 2px;
}

.traitlist .trait .traitlabel.basetrait
{
   font-size: 95% !important;
   top: 0px;
}

.traitlist .trait .traitlabel.basetrait:first-letter
{
   font-size: 120% !important;
}

.traitlist .trait .traitvalue
{
    text-align: center;
    font-family: "comic sans ms", arial, sans-serif;
    color: #30291E;
    position: absolute;
    right: 1px;
    top: 0px;
    font-size: 150%;
    letter-spacing: -1px;
    border-left: solid 1px #C7BAA3;
    border-radius: 6px;
    width: 48px;
    height: 100%;
}

.traitlist .trait .customtrait
{
   font-family: komika, "comic sans ms", arial, sans-serif;
   color: #30291E;

   font-size: 110% !important;
   text-transform: none !important;
   top: -1px;
}

.traitlist .trait .traitlabel.customtrait
{
    font-family: komika, "comic sans ms", arial, sans-serif;
    top: 1px;
    font-size: 130% !important;
    margin-bottom: 4px;
    font-weight: normal;
}


.traitlist .trait .traitvalue .valpos
{
    position: relative;
    top: 32%;
}

.traitlist .traitrank.rankstar
{
   font-size: 80%;
}


.traitlist .traitpower
{
   display: inline-block;
   border: solid 1px #BCA986;
   border-radius: 6px;
   padding: 6px 4px 5px 4px;
   font-size: 70%;
   text-transform: uppercase;
   font-weight: normal;
   position: absolute;
   left: 184px;
}


.traitlist .traitpower img
{
    opacity: 0.8;}


#statlist
{
   font-size: 90%;
}


.traitlist .trait .traitdesc
{
    font-size: 70%;
    width: 80%;
    font-weight: normal;
    white-space: normal;
    overflow: hidden;

}

#traitlist_custom .traitdesc
{
    font-family: komika, "comic sans ms", arial, sans-serif;
    font-size: 80%;
}

#traitlist_custom .traitvalue {
    padding-right: 4px;
}



.traitlist .trait .traittooltip
{
    display: none;
    position: absolute;
    z-index: 10000;
    left: 0px;
    top: 34px;

    width: 225px;
    white-space: normal;
    background-color: #F2ECE1;
    border: solid 1px #BCA986;
    padding: 12px;
    font-size: 90%;
    font-weight: normal;
    font-family: Open Sans, arial, helvetica, sans-serif;

    border-radius: 6px;
;
}


.traitlist .trait .traittooltip:after, .traitlist .trait .traittooltip:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.traitlist .trait .traittooltip:after {
    border-color: rgba(240, 233, 219, 0);
    border-bottom-color: #F2ECE1;
    border-width: 5px;
    left: 50%;
    margin-left: -5px;
}
.traitlist .trait .traittooltip:before {
    border-color: rgba(187, 174, 151, 0);
    border-bottom-color: #BCA986;
    border-width: 6px;
    left: 50%;
    margin-left: -6px;
}


/****** Edit ******/


.chareditsubhead
{
    font-weight: bold;
    font-size: 80%;
    margin-top: 16px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.chareditsubhead .hint
{
    font-weight: normal;
    text-transform: none;
    margin-left: 24px;
    font-size: 90%;
    font-family: Open Sans, arial, helvetica, sans-serif;
}

/**** Inner popup *****/


#charsheet.has-modal #charsheet_top {
   opacity: 0.35;
   pointer-events: none;
}

#charsheet.has-modal #charsheetlower {
   opacity: 0.35;
   pointer-events: none;
}

#charsheet.has-modal #chargenbuttons {
   opacity: 0.35;
   pointer-events: none;
}


#charsheetpopups
{
   position: absolute;
   top: 0px;
   left: 0px;
}

.charsheetinnerpopup
{
   padding: 0px;
   width: 360px;
   background-color: #E9DBC4;
   border: solid 2px #aa936e;
   position: absolute;
   top: 76px;
   left: 48px;
   z-index: 1000;
   display: none;

   border-radius: 6px;

   box-shadow: 0 0 32px rgba(0,0,0,0.2);
   overflow: hidden;

}

.charsheetinnerpopupcontent
{
   padding: 16px;
   overflow: auto;
   height: 260px;
   font-family: Open Sans, arial, helvetica, sans-serif;
}


#charinfo-text {
   font-size: 90%;
   line-height: 150%;
   padding: 8px;
}

.charsheetinnerpopupcontent textarea
{
   width: 100%;

}


.charsheetinnerpopup input
{
   background-color: #F1E9DB;
   border: solid 1px #BAA788;
   padding: 4px 8px;
   width: 100%;
   font-size: 120%;
   color: #30291E;
   font-weight: normal;
   font-family: komika, "comic sans ms", arial, sans-serif}

#charsheet select
{
   background-color: #F1E9DB;
   border: solid 1px #BAA788;
   padding: 4px 8px;
   width: 100%;
   font-size: 110%;
   color: #30291E;
   font-weight: normal;
   font-family: komika, "comic sans ms", arial, sans-serif}

.charsheetinnerpopup .charsheetinnerpopupheader
{
   background-color: #625239;
   color: #DED3C0;
   padding: 12px 0px 12px;
   text-align: center;
   font-weight: bold;
   font-size: 110%;
}

.charsheetinnerpopupbuttons
{
   margin: 0;
   width: 100%;
   text-align: center;
}

.charsheetinnerpopupbuttons div
{
   display: inline-block;
   padding: 12px 8px;
   border: solid 0px #B39F7C;
   border-top: solid 1px #B39F7C;;
   width: 50%;
   text-align: center;
   font-size: 100%;
   background-color: #DECDAE;
}

.charsheetinnerpopupbuttons div:hover
{
   background-color: #ede3d0;
}

#chargenpopup #savemessagepos
{
    position: relative;
    margin: 24px 0 8px 0;
}

#chargenpopup #savemessage
{
   text-align: center;
   font-weight: bold;
   position: relative;

   display: none;
}

#chargenpopup #savemessage.with-spinner {
    left: -4px;
}

#chargenpopup #savemessage.with-spinner::before {
    content: '';
    height: 8px;
    width: 8px;
    position: relative;
    left: -6px;
    border: solid 4px rgba(0,0,0,0.2);
    border-right: solid 4px rgba(0,0,0,0.5);
    animation: saverotate 700ms linear infinite;
    display: inline-block;
    border-radius: 50%;
    top: 2px;
}

@keyframes saverotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}



.charsheetinnerpopup .hint
{
   margin-left: 12px;
   font-size: 80%;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

#charsheet textarea
{
    width: 100%;
    height: 124px;
    background-color: #EDE3D0;
    color: #3d3d3d;
    border: solid 1px #978366;
    padding: 12px;
    font-family: komika, "comic sans ms", arial, sans-serif;

    border-radius: 6px;
}

.chargenpopupsection {
   padding: 8px 0;
}

.charsheetinnerpopuprule
{
   border-top: solid 1px #978366;
   margin: 16px 0px;
}


#charsheet_popups
{
   position: absolute;
   top: 0px;
   left: 0px;
}

.onlybutton
{
   width: 100% !important;
}

.traitselectheader {
  font-weight: bold;
  font-size: 80%;
  margin-bottom: 2px;
  font-family: pt serif, georgia, utopia, serif;
}

.traitdetail
{
   font-size: 90%;
   padding: 8px;
   font-family: komika, "comic sans ms", arial, sans-serif;
   border: solid 1px #C8BAA2;
   height: 36px;
   border-radius: 0px 0px 6px 6px;
   overflow: hidden;


}

textarea.editchar-readonly {
   opacity: 0.75;
}

#editchar-popup textarea {
   font-size: 95%;
}

.chargenfieldlabel {

}


/**************************/






/********************* General *******************/

.general-body {
   margin: 0 auto;
   border: solid 1px #272727;
   border-width: 0 2px;
   background-color: #080808;
   width: 860px;
}

.general-body-content {
   margin: 0 auto;
   padding: 20px 40px 40px 40px;
   min-height: 400px;

}

.general-body h1 {
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
   font-size: 200%;
   color: #C24834;
   margin-top: 8px;
   margin-bottom: 24px;
}

.general-body input[type="text"] {
    font-size: 130%;
    font-weight: bold;
    padding: 8px 8px 8px 12px;
    width: 320px;
    border: 0;
    background-color: #222;
    color: #eee;
}


/*********************  Profile *********************/


#profilemain
{
   padding: 32px;
   color: #aaa;
   font-size: 110%;
}

#profiletop
{
   height: 172px;
}

#profiletop #topinfo td
{
   vertical-align: top;
   padding-top: 8px;
}

#profiletop #topinfo .toplabel
{
    padding-right: 16px;
    color: #bbb;
    font-size: 90%;
}

#profiletop #topinfo .topvalue
{
    color: #ccc;
    font-weight: bold;
    font-size: 105%;
}

#profiletop #metalinks
{
    position: absolute;
    right: 0px;
    top: 12px;
    text-align: right;
}

#profiletop #profileimg
{
    float: left;
    margin-right: 32px;
}

#profiletop #tablebutton
{
    font-size: 110%;
    font-weight: bold;
    padding: 6px 32px 8px 32px;
    border: 0;
    background-color: #382b1a;
    border-radius: 6px;
    font-family: pt serif, georgia, utopia, serif;
    color: #D7C5A6;
}

#profiletop a#tablebutton:hover
{
   text-decoration: none;
   color: #fff;
}

#profiletop #xp-tooltip
{
    position: absolute;
    display: none;
    z-index: 10;
    right: 20px;
    top: 0px;
    background-color: #3d3d3d;
    color: #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #000;
}

#profiletop #xp-tooltip #xp-content {
    padding: 24px;
}

#profiletop #xp-tooltip #xp-tooltip-close
{
    margin-top: 12px;
    text-align: center;
    font-weight: bold;
    border: solid 1px #7e7e7e;
    border-radius: 4px;
    padding: 8px;
}

#profiletop #xp-tooltip-link
{
   display: none;
   margin-left: 8px;
   color: #555;
}

#profileimg img
{
    border: solid 2px #111;
    border-radius: 8px;
}

#profiletop h1#username
{
    font-size: 200%;
    margin-bottom: 16px;
    padding-top: 8px;
    color: #C24834;
    font-weight: bold;
    font-family: pt serif, georgia, utopia, serif;
}

#username span {
    font-weight: normal;
}


#profilemsg
{
   color:#42A338;
   margin-left: 20px;
   font-size: 10pt;
   display: inline-block;
   line-height: 10pt;
}

#profilebottom
{
   height: 400px;
   padding: 16px;
   position: relative;
}

#profileinner_chars, #profileinner_followers
{
   height: 380px;
   margin: 16px;
   width: 680px;
   overflow: auto;
   padding: 0px;
   position:relative;
}

table#profilechars tr:hover
{
  background-color: #111;
}


table#profilechars td
{
  position: relative;
  padding: 8px 20px 8px 4px;
  border-bottom: solid 1px #1a1a1a;
  color: #ccc;
  white-space: nowrap;
}

table#profilechars td.charName
{
  font-weight: bold;
  font-style: italic;
}

table#profilechars td.charName span
{
  font-weight: normal;
  margin-left: 2px;
  font-size: 90%;
}

table#profilechars td.charMini
{
  width: 32px;
}


table#profilechars td.charMini .mini
{
  position: absolute;
  top: -8px;
}

table#profilechars td.charMini .mini.minibig
{
  transform: scale(0.7);
  left: -8px;
  top: -14px;
}




table#profilechars td.charName:hover
{
   text-decoration: none;
}

table#profilechars .openchar
{
   cursor: pointer;
}


.deletechar
{
    cursor: pointer;
}

table#profilechars td.charRole
{
  font-size: 90%;
}

#profiletabs
{
   border-bottom: solid 2px #1a1a1a;
   margin-top: 16px;
}

#profiletabs .tab
{
   background-color: #1a1a1a;
   display: inline-block;
   font-size: 115%;
   padding: 6px 36px;
   color: #bbb;
   font-family: pt serif, georgia, utopia, serif;
   margin-left: 1px;
   border-radius: 4px 4px 0px 0px;
}

.profiletabcontent
{
   display: none;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0px;
   left: 0px;
}

.profiletabselected
{
   background-color: #3d3d3d !important;
   color: #ddd !important;
}

#profileinner_about
{
   padding: 12px 24px;
   color: #aaa;
   line-height: 170%;
   height: 380px;
   width: 660px;
   overflow: auto;
   font-size: 105%;
}

#profileaboutouter
{
   height: 100%;
   width: 100%;
}

#profilestats
{
   background-color: #111;
   padding: 24px;
   height: 380px;
   position: absolute;
   right: 0px;
   border-radius: 8px;
   font-size: 105%;
}

#profilestats .label
{
   color: #777;
   padding-right: 12px;
   font-size: 90%;
}

#profilecontent_about
{
    margin-top: 16px;
}

#profilemessages
{
   height:100%;
   overflow: auto;
   width: 480px;
   margin: 16px auto 0px;
   padding: 0px 24px;
}

.profilemessage
{
    padding: 0px 12px 24px;
    margin-bottom: 20px;
    border-bottom: solid 1px #272727;
}

.profilemessageheader
{
   margin-bottom: 16px;
}

.profilemessagedate
{
   margin-left: 24px;
   color: #444;
}

#profilemessageform
{
   margin-bottom: 24px;
   padding-bottom:24px;
   border-bottom: solid 1px #3d3d3d;
}

#profilemessageform textarea
{
   width: 100%;
   height: 120px;
}

#profilemessageform .submit
{
   padding: 2px 32px;
   margin-top: 12px;
}

#profileinner_awards
{
    margin: 40px;
   height: 380px;
   width: 660px;
   overflow: auto;
}

#profileinner_awards tr {
   height: 30px;
}

#message
{
   padding: 24px;
   border: solid 1px #272727;
   margin: 24px 0px;
   width: 500px;
   height: 250px;
   overflow: auto;
}

.awardicon {
   width: 18px;
   height: 18px;
   display: inline-block;
   background-image: url(/assets_v20200725039/images/site/profile_treasures.png);
   margin-top: 3px;
   overflow: hidden;
   image-rendering: pixelated;
}

.awardtext {
  padding-left: 8px;
  font-size: 95%;
}



/********** Edit Profile **********/


#editprofile .field
{
   padding:8px;
   margin-bottom: 20px;
   background-color: #222;
   border: solid 1px #222;
   width: 200px;
   color: #ccc;
   border-radius: 4px;
}

#editprofile textarea
{
   padding: 16px;
   background-color: #181818;
   border: 0;
   border-radius: 8px;
   color: #ccc;
   width: 600px;
   height: 200px;
}

#editprofile .label
{
   margin-bottom: 4px;
   font-size: 100%;
   font-weight: bold;
   color: #bbb;
}

#editprofile .submit
{
   padding: 4px 32px;
   margin-top: 24px;
}

.label .hint
{
   margin-left: 16px;
   font-size: 75%;
   font-weight: normal;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

#editprofileouter
{
    padding: 0px 24px 36px;
}








/*************  Glow Button *************/



a.glowbutton
{
   padding: 12px 0px;
   font: bold 13pt/13pt Open Sans, arial, helvetica, sans-serif;

   left: 0px;
   text-decoration: none;
   display: block;
   width: 180px;
   vertical-align: middle;
   text-align: center;

   color: #3D2A08;
   background-color: #DE9F32;
   border: solid 1px #DE9F32;

   position: relative;

   border-radius: 4px;
}

.glowbutton .glow
{
    background-color: #EEAA35;
    height: 50%;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    line-height: 0px;
    overflow:hidden;
    z-index: 19;
}


.glowbuttontext
{
    position: relative;
    z-index: 20;
    color: #322208;
    top: 0px;
}

a.glowbutton:hover
{
    text-decoration: none;
}





/************* Home Page **************/



.homesection
{
    padding: 36px 48px 48px 48px;
    margin: 0px 0 0 0;
    font-size: 110%;
    background: #100e0b;
    color: #b0a490;
}

.contentpage .homesection table td {
    color: #b0a490;
    border-bottom: solid 1px #1b1815;
    padding: 12px 24px 12px 8px;
}

.contentpage .homesection h2 {
    font-variant: small-caps;
}


.fancy-border {
    border-image: url(/assets_v20200725039/images/site/fancy_border.png) 16 16 round;
    border-style: solid;
    border-width: 16px;
}

#tablelisting, #schedlisting {
   margin-top: 20px;
   font-size: 105%;
}

#tablelisting th, #tablelisting td
{
   white-space: nowrap;
}

a#editlistinglink, a#waitlistlink, a#editschedlink
{
    margin-left: 32px;

    font-weight: bold;
    font-size: 80%;
    color: #aaa;
    padding: 8px 16px;
    background-color: #221e17;
    border-radius: 4px;
    position: relative;
    top: -8px;
    color: #b0a490;
}

.followbutton
{
    background-color: #221e17;
    text-align: center;
    font-size: 80%;
    padding: 2px 12px;
    border-radius: 4px;
    cursor: pointer;
}

a#editlistinglink:hover, a#waitlistlink:hover, a#editschedlink
{
    text-decoration: none;
}

#opentablesubheader
{
   margin-top: 8px;
   padding-left: 4px;
   color: #bbb;
}

.home-games-posted {
    float: right;
    margin-right: 12px;
    margin-top: 10px;
    font-weight: normal;
    font-size: 100%;
}

.home-games-posted b {
    font-style: normal;
}


/************ Landing Page ****************/



body.page-registration #mainpaneloutline, body.page-registration #mainpanel {
    border: 0;
    background-color: transparent;
    padding: 0;
    width: 100%;
}

body.page-registration #lightboxshade {
    background-color: rgba(0,0,0,0.9);
}

.reg-section {
   font-size: 150%;
   text-align: center;
   color: #F5B64B;
   font-weight: bold;
   font-family: pt serif, georgia, utopia, serif;
   margin: 0;
   padding: 2.5em 0;
   min-width: 1024px;
   background-color: #141414;
}

h1.reg-header {
   margin: 1em 0 0;
   font-size: 150%;
   font-weight: bold;
   color: #ffdca2;
}


img.reg-hero {
    max-width: 860px;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
}

.reg-tagline {
  padding: 0 1.5em;
  margin: 1.5em 0;
  font-family: Open Sans, arial, helvetica, sans-serif;
  font-weight: normal;
  font-size: 110%;
  line-height: 100%;
  color: #d6ba95;
}

.tagline-bullet::before {
    content: '✔';
    margin-right: 8px;
    color: #cb8c40;
}

.tagline-bullet {
    margin: 0 16px;
}

.reg-screenshotlink {
   background-color: rgba(0,0,0,0.25);
   color: #fff;
   font-family: Open Sans, arial, helvetica, sans-serif;
   padding: 1em 2em;
   font-size: 150%;
   position: absolute;
   left: 2em;
   bottom: 0;
   color: #D2BDA0;
   cursor: pointer;
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;
}


.reg-bullets {
   background-color: #0e0e0e;
   color: #ccc;
   font-size: 120%;
   padding: 3em;
}

.reg-bullets h2 {
   margin: 0 0 0.75em 0;
   color: #e7c89f;
   font-size: 200%;
   font-weight: bold;
   font-variant: small-caps;
}

.reg-bullets-inner {
   width: 860px;
   margin: 0 auto;
}

.reg-list {
    margin-bottom: 3em;
    x-font-family: komika, "comic sans ms", arial, sans-serif;
    margin-left: .5em;
    font-size: 105%;
}

.reg-list-subhead {
    color: #a77b50;
    margin-top: -12px;
    margin-bottom: 24px;
    font-weight: bold;
}

.reg-list li {
   margin-bottom: 0.75em;
   list-style: none;
}

.reg-list li::before {
   content: '';
   display: inline-block;
   position: relative;
   margin-right: 12px;
   top: 2px;
   height: 20px;
   width: 20px;
   background: url(/assets_v20200725039/images/content/bullet_star.png);
   background-size: cover;
}

.reg-more {
   font-size: 180%;
   padding: 2em 0 3em 0;
   margin: 0;
}

.reg-more a {
    border-bottom: solid 1px #e5a332;
}
.reg-more a:hover {
    text-decoration: none;
}

.reg-more-link {
    margin-top: 1.5em;
    padding: 8px 24px;
    background-color: #222;
    border-radius: 6px;
    display: inline-block;
}


.reg-join {
    float: right;
    background-color: #3D2D1D;
    color: #dac8b3;
    padding: 1em;
    z-index: 1;
    margin-right: 0em;
    font-size: 110%;
    border-radius: 8px;
}

img.reg-pencil {
    position: absolute;
    right: 1em;
    top: 32px;
    transform: rotate(-2deg);
    display: none;
}

h2.regjoinheader {
    font-family: pt serif, georgia, utopia, serif;
    margin: 0.25em 0 0.75em;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    border-bottom: solid 1px #63513b;
    padding-bottom: 24px;
}

.regjoinlabel {
    margin: 1em 0 0.25em 0;
    font-weight: bold;
}

.regfield {
    border-radius: 4px;
    padding: 8px 8px 8px 12px;
    font-size: 120%;
    border: 0;
    width: 100%;
    background: #1f1811;
    color: #eee;
}

#reg-submit {
   color: #fff;
   width: 100%;
   margin-top: 1.5em;
   padding: 20px 0px;
   font-size: 15pt;
   font-weight: bold;
   text-align: center;
   font-family: Open Sans, arial, helvetica, sans-serif;
    background: rgb(184, 112, 39);
    border-radius: 8px;
    cursor: default;
    text-shadow: 0 0 12px rgba(0,0,0,0.4);
    border-top: solid 2px #c98949;
    border-bottom: solid 2px #6b3f14;
}

.regjoinerror {
    color: #fff;
    background-color: #933;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
}


#screenshot {
    max-width:100%;
    margin-top: 50px;

}
#screenshotouter
{
   width: 100%;
   position: fixed;
   z-index: 1002;
   display: none;
   text-align: center;
   pointer-events: none;
}



/******************** FORUM *****************/


#forumcontainer
{
  margin: 0px;
  min-height: 400px;
}

#forumcontainer h1
{
   color: #C2432E !important;
   margin-bottom: 24px;
}

#forumtable
{
   width:100%;
   padding: 0px;
   border-collapse: separate;
}

#forumleft
{
  width: 146px;
  vertical-align: top;
  border-right: solid 1px #1a1a1a;
  padding: 16px 0px 36px 32px;
}

#forumleft a
{
   display:block;
   margin-bottom: 4px;
   font-size: 120%;
   text-decoration: none;
}

#forumleft a:hover
{
   text-decoration: underline;
}

#forumleft h2
{
   color: #444;
   font-size: 70%;
   font-weight: bold;
   margin-top: 32px;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

.forumlefthr
{
   border-top: dotted 1px #3d3d3d;
   margin:22px 0px 22px 0px;
   height: 0px;
   width: 90%;
}

#forummiddle
{
  width: 1px;
  background-color: #0a0a0a;
}

#forumright
{
  vertical-align: top;
  position: relative;
  width: 600px;
  padding: 32px 64px 64px 48px;
  background-color: #0a0a0a;
}

#foruminner {
    min-height: 500px;
}

#forumtextarea
{
  padding: 12px;

  font-size: 120%;
  font-family:  Open Sans, arial, helvetica, sans-serif;
  line-height: 175%;

  width: 600px;
  height: 300px;
  background-color: #111;
  border: 0;
  border-radius: 8px;
  color: #bbb;
}

#forumcontainer #formbutton
{
   font-weight: bold;
}

#topictitleinput
{
    background-color: #111;
    border: 0;
    color: #eee;
    border-radius: 4px;
    font-weight: bold;
    padding: 8px 16px !important;
}

h1#threadtitle, h2.threadheader
{
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
   font-size: 250%;
   color: #4D4D77;
   margin-top: 8px;
}

#forumdescription
{
   margin-top:-16px;
   margin-bottom: 24px;
   color: #bbb;
}

#startthread
{
  position:absolute;
  right: 0px;
  margin-top: 10px;
  font-weight:bold;
  font-size:100%;
  padding: 8px 24px;
  background-color: #1f1c15;
  border-radius: 6px;
}

#startthread:hover {
    text-decoration: none;
}

#startthread.nosubline
{
    margin-top: 0;
}

.forumcomment
{
  font-size: 110%;
  font-family: Open Sans, arial, helvetica, sans-serif;
  color: #ccc;
  padding: 8px 0px 8px 0px;
  border-bottom: solid 1px #272727;
}

.forumcomment .commentbody
{
  font-size: 100%;
  font-family:  Open Sans, arial, helvetica, sans-serif;
  line-height: 1.8em;
  padding: 16px 0px 28px 0px;
  width: 600px;
  color: #bbb;
}

.forumcommentdate
{
  margin-left: 20px;
  color: #7e7e7e;
}

.forumcomment .commenttop
{
  margin-bottom: 10px;
  margin-top: 10px;
}

.forumbuttonhint
{
  color: #555;
  font-size: 90%;
  margin-left: 20px;
}

.forumbottommsg
{
    color: #bbb;
    text-align: center;
    font-weight: bold;
    padding: 30px;
}

.indexthreadstarter
{
  font-size: 90%;
  margin-left:10px;
}

td.indexthreadtitle
{
  white-space: nowrap;
  width: 400px;
}

td.indexthreadtitle a
{
  font-size: 110%;
  text-decoration: none;
  width: 100%;
  display:block;
}

td.indexthreadtitle a:hover
{
  text-decoration: underline;
}

.indexthread
{
  width: 100%;
}

.indexthread tr
{
   font-size: 110%;
}

.indexthread a:visited
{
  color: #897859;
}

tr.indexthreadrow td
{
  padding: 8px 0px 8px 0px;
  border-bottom: dotted 1px #2c2922;
  color: #aaa;
  font-size: 80%;
  white-space: nowrap;
}

.stickyrow td
{
  background-color: #16140F !important;
  color: #b4ab99 !important;
}


tr.indexthreadrow td a
{
  font-size: 130%;
}

.forumlabel
{
  font-weight: bold;
  color: #999;
  font-size: 120%;
  margin-bottom: 6px;
}

.postlinks
{
   margin-left: 22px;
}

.postlinks a, .postlinks a:visited
{
   font-size: 80%;
   color: #7e7e7e;
   margin-left: 16px;
}

.postlinks a:hover
{
  color: #c33;
}





/******************** Help ************************/


#helplayout td
{
   padding: 0px;
   border: 0px;
}

td#helpcontent
{
   padding: 24px 72px;
   width: auto;
   background-color: #ded1bb;
   color: #0D0B08;
   font-size: 120%;
   line-height: 150%;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

#helpcontent a {
    color: #b72828;
    text-decoration: none;
}

#helpcontent a:hover {
    text-decoration: underline;
}

#helpcontent h1
{
    text-align: center;
    font-size: 300%;
    margin-bottom: 40px;
    color: #B72828;
    font-variant: small-caps;
}

#helpcontent h2, #helpcontent h3
{
    color: #B72828;
    font-weight: bold;
    font-size: 240%;
    margin-bottom: 48px;
    letter-spacing: 0px;
    padding-top: 48px;
}

.shaderule {
    padding-top: 48px;
}

#helpcontent h2::before, #helpcontent .shaderule::before
{
    content: '';
    display: block;
    width: 122%;
    position: relative;
    top: -48px;
    margin-left: -11%;
    height: 30px;
    opacity: 0.25;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
    margin-top: -20px;
}

#helpcontent h2 .d6small {
    top: -5px;
}

#helpcontent .leadin .d6small {
    top: -3px;
}

#helpcontent .chatexamplemsg .d6small {
    top: -2px;
}

#helpcontent .para .d6small {
    top: -2px;
}


td#helpsidebar
{
   padding-top: 24px;
   width: 220px;
   background-color: #302615;
}


#helplayout #helpsidebar a
{
   display: block;
   margin: 0 2px;
   font-weight: bold;
   font-size: 120%;
   padding: 2px 2px 8px 20px;
}

#helplayout #helpsidebar .helpsublinks {
   margin: 0px 0 24px 0;
}

#helplayout #helpsidebar a.sublink
{
   display: block;
   font-weight: normal;
   font-size: 105%;
   line-height: 150%;
   margin: 0;
   padding: 0px 4px 0px 30px;
}


td#helpcontent b
{
   margin: 0px 2px;
   white-space: nowrap;
}


#helpcontent .keyword
{
   background-color: #3B2C1C;
   padding: 0px 8px;
   display: inline-block;
   margin: 0px 4px;
}


td#helpcontent p, td#helpcontent .para
{
   margin: 24px 0px;
   font-family: Open Sans, arial, helvetica, sans-serif;
}




td#helpcontent .rule
{
   margin: 32px 0px;
}

.helpsection
{
   margin-bottom: 72px;
   border-topX: dotted 1px #5C4730;
}

.helpsection .anchor {
   padding-top: 30px;
   margin-top: -30px;
   height: 0;
   overflow: hidden;

}

#helplayout .rule
{
   border-top: dotted 1px #5C4730;
}

.helplist
{
   margin: 16px;
   margin-bottom: 0px;
}

.helpcommand
{
   background-color: #19150F;
   padding: 8px 24px;
   color: #bbb;
   font-family: monospace;
   margin: 8px 0px;
   width: 300px;
}

.chatcommands {
    border: solid 12px #201c16;
}

#helplayout .chatcommands td
{
   font-size: 90%;
   padding-right: 16px;
   vertical-align: middle;
}



#helplayout .chatcommands td.cmdname {
    color: #CFB490;
    padding-left: 20px;
    background-color: #201C16;
    border-top: solid 1px #4F3B24;
}

#helplayout .chatcommands td.cmdexample
{
    background-color: #201C16;
    padding: 6px 24px 6px 16px;
    font-weight: normal;
    border-top: solid 1px #4F3B24;
    color: #D0BF9F;
}

#helplayout .chatcommands tr:first-child td.cmdexample {
   border: 0;
}

.cmdexample:first-child {
    border: 0;
}

.cmdexample b
{
   margin: 0px;
   color: #DCA747;
}

b.leadin
{
   margin: 0px 8px 0px 0px !important;
   color: #18120B !important;
   background: none !important;
   font-style: italic;
}

b.leadin::before {
    content: '\0227B';
    position: absolute;
    left: -20px;
    color: #B72828;
    font-style: normal;
}

.helplist li {
  margin-top: 12px;

}

.helpsectioncontent {
   padding: 0 0px;
}



#helpcontent .helpexample
{
    position: relative;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    background-color: #e9dfd0;
    color: #3A2A0D;
    padding: 20px 24px 24px 36px;
    border-left: dotted 8px #ded1bb;
    font-family: komika, "comic sans ms", arial, sans-serif;
    margin-bottom: 48px;
    border-radius: 8px;
}



#helpcontent .examplechat
{
    background-color: #201C16;
    color: #D5BD99;
    font-size: 90%;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
}

#helpcontent .helpexample .exampleheader {
   font-size: 120%;
    margin-bottom: 12px;
}

.examplechat .chatexampleauthor {
   color: #CCA16A;
}

.examplechat .chatexamplemsg {
   position: absolute;
   left: 92px;
}

.examplechat .chatexampleauthor.ooc {
   color: #918778;
   font-size: 90%;
}

.examplechat .chatexamplemsg.ooc {
   color: #918778;
   font-size: 90%;
}


.helpexample .traitexampleval {
    position: absolute;
    left: 120px;
    font-weight: bold;
    scale: 1.1;
    letter-spacing: -1px;
}

.helpexample .traitexamplehint {
    font-size: 80%;
    position: absolute;
    left: 155px;
}

.helpexample h4 {
  color: #996508;
  font-weight: normal;
  margin-top: 24px;
}

.helpexample h4:first-child {
  margin-top: 0px;
}



.helpsidebarlinks
{
    width: 232px;
}

body.fixed-header .helpsidebarlinks {
    position: relative;
}


.nextpagelink {
    font-family: pt serif, georgia, utopia, serif;
    text-align: center;
    font-size: 150%;
    margin: 48px 0px 48px 0px;
    font-weight: bold;
}


#helpcontent ul {
  list-style-type: disc;
  margin-left: 20px;
}

#helpcontent ul li {
  list-style-position: initial;
}





/*** Search ***/

#search-page {
    min-height: 400px;
}

#search-page h2 {
    font-size: 100%;
    margin: 36px 0 12px 0;
    font-weight: bold;
}

#search-page-inner {
    width: 400px;
    margin: 0 auto;
    margin-top: 48px;
    padding-bottom: 64px;
}

#search-page h1 {
   font-family: pt serif, georgia, utopia, serif;
   font-weight: bold;
   font-size: 200%;
   color: #C24834;
   margin-top: 8px;
   margin-bottom: 24px;
}

.search-result {
    font-size: 110%;
    margin-bottom: 4px;
    position: relative;
}

.search-result .result-detail {
    position: absolute;
    left: 140px;
    color: #bbb;
    font-size: 90%;
}

.result-detail.result-topic {
    position: relative;
    left: 0;
    margin-left: 12px;
}

#search-page input[type="text"] {
    font-size: 120%;
    font-weight: bold;
    padding: 8px;
    border-radius: 4px;
    border: 0;
    background-color: #222;
    color: #eee;
    margin-right: 8px;
}



/*** CHATLOGS ***/


a.chatlog-action {
    color: #555;
    font-size: 90%;
}

a.chatlog-action:hover {
    color: #aaa;
}



@media only screen and (min-width: 1400px) and (min-height: 950px)
{
    .page-table #mainpaneloutline
    {
        transform: scale(1.2);
        transform-origin: 50% 0;
    }

    .page-table #mainpanel
    {
        margin-top: -10px;
    }
}

@media only screen and (min-width: 1400px) and (min-height: 1000px)
{
    .page-table #mainpaneloutline
    {
        transform: scale(1.3);
        transform-origin: 50% 0;
    }

    .page-table #mainpanel
    {
        margin-top: -10px;
    }
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) and (min-height: 950px)
{
    .page-table #mainpaneloutline
    {
        transform: scale(1.2);
        transform-origin: 50% 0;
    }

    .page-table #mainpanel
    {
        margin-top: -10px;
    }
}



input[type="text"]
{
    border-radius: 4px;
}


.numeral
{
   font-family: Open Sans, arial, helvetica, sans-serif;
}



/********** Viewport Popup - Base **********/


#popups {
    top: -40px;
    z-index: 1000;
}

#popups.for-tablepopup {
    z-index: 1002;
    top: 0px;
}



.viewportpopup
{
    top: 180px;
    left: 100px;
    display:none;
    z-index: 2000;
    color: #C6B49A;
    position: absolute;

    box-shadow: -8px 8px 32px rgba(0,0,0,0.6);
}

.viewportpopup-scroll {
   overflow-y: scroll;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: #7C6A4F transparent;
}

.viewportpopup-scroll::-webkit-scrollbar-track  {
    background: transparent;
}

.viewportpopup-scroll::-webkit-scrollbar-thumb {
    background-color: #7C6A4F;
    border-radius: 8px;
}


.viewportpopup img
{
   position: absolute;
}

.viewportpopup p
{
   color: #C6B49A;
   margin: 8px 0px;
}

.viewportpopup .viewportpopupinner
{
   position: relative;
   top: 0px;
   width: 360px;
}

.viewportpopup .viewportpopupheader
{
   border: 0;
   background-color: #2C200F;
   color: #BCAC96;
   text-align: center;
   padding: 8px;
   width: 100%;
   font-weight: bold;
   font-family: pt serif, georgia, utopia, serif;
   font-size: 130%;
   display: block;
   border-radius: 4px 4px 0 0;
;
}

.viewportpopup .viewportpopupheader .closebutton
{
   position: absolute;
   display: block;
   right: 0px;
   top: 0px;
   padding: 8px 20px;
   font-style: normal;
   z-index: 2001;
   font-size: 80%;
   border-left: solid 1px #3a3022;
   font-weight: bold;
}


.viewportpopup .viewportpopupcontent
{
   width: 100%;
   height: 168px;
   background-color: #43331D;
   padding: 8px 24px 16px 24px;
   display: block;
   border: solid 2px #3B2D18;
   border-width: 0px 2px 0px 2px;
}

.viewportpopup .viewportpopupbutton
{
   background-color: #4D3C22;
   color: #C6B49A;
   border: solid 1px #624F32;
   text-align: center;
   padding: 8px;
   width: 100%;
   cursor: pointer;
   font-weight: bold;
   border-radius: 4px;
}

.viewportpopup .viewportpopupbutton.button-left {
   border-radius: 4px 0 0 4px;
}

.viewportpopup .viewportpopupbutton.button-right {
   border-radius: 0 4px 4px 0;
}


.viewportpopup .viewportpopupbutton:hover
{
   border-color: #6E5A3C;
   background-color:  #594527;
}



.viewportpopup select
{
   width: 240px;
   padding: 4px 4px 4px 8px;
   font-size: 110%;
   background-color: #342714;
   color: #CEC1AE;
   border: solid 1px #4D3C23;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

.viewportpopup input[type="text"]
{
   background-color: #342714;
   color: #DFD1BD;
   border: solid 1px #4D3C23;
   padding: 4px 4px 4px 8px;
}

.viewportpopup option[disabled]
{
   color: #69512F;
}

.viewportpopup td
{
   vertical-align: middle;
   height: 36px;
}

.viewportpopup .statentry
{
   background-color: #342714;
   color: #CEC1AE;
   border: solid 1px #4D3C23;
   text-align: center;
   padding: 3px 0px 3px 0px;
   width: 32px;
   display: inline-block;
   font-family: Open Sans, arial, helvetica, sans-serif;
   font-weight: bold;
   font-size: 120%;
   border-radius: 4px;
}

.viewportpopup .statadjustbuttons
{
   display: inline-block;
   margin-left: 8px;
}

.viewportpopup .statadjustbutton
{
   font-family: verdana;
  display: inline-block;
  width: 28px;
  height: 20px;
  line-height: 130%;
  position: relative;
  top: -2px;
  text-align: center;
  background-color: #4D3C22;
  border: solid 1px;
  border-color: #695536 #4D3C22 #382C1A #4D3C22;
  margin: 0px 2px 0px 0px !important;
  font-weight: bold;
  border-radius: 2px;
}

.viewportpopup .statadjustbutton:hover
{
   color: #fff;
   text-decoration: none;
}



.viewportpopup .advancedoption
{
    color: #4D6473;
}




/*************  Table Bar **************/



#tablebar
{
    position: relative;


    text-align: center;
    border-top: solid 1px #533D18;
    border-bottom: solid 1px #2E210B;
    margin: 8px;
    padding: 6px 0px 6px;
    font-size: 105%;
    line-height: 175%;
    border-radius: 4px;

    text-shadow: -1px -1px 1px #231A09;
    color: #9D8760;

    border-radius: 0 0 4px 4px;
    margin: 0 8px;
    border-top: 0;
    width: 1006px;

    }



#tablebar.bottom
{
    position: relative;
    text-align: center;
    border-top: solid 1px #111;
    background-color: #1a1a1a;
    margin-bottom: 8px;

    margin: 8px 8px 0px 8px;
    border-radius: 8px;
    border-top-color: #282828;
    border-bottom-color: #080808;

    padding: 10px 0px 8px;
    color: #888;
    text-shadow: 1px 1px 1px #30230C;
    font-size: 100%;
    border-right: solid 2px #111;
    border-left: solid 2px #111;
}

#tablebar a
{
   color: #BCAA88;
}

#tablebar a:hover
{
   color: #F3E8D4;
   text-decoration: none;
}


#tablebar .tablebar-item
{
   padding: 0px 16px;
   border-left: solid 1px #554018;
   border-right: solid 1px #2F220A;
   margin-left: -4px;
   display: inline-block;

   border-left: 0;
   border-right: 0;

}

#tablebar .tablebar-item:first-child {
    border-left: 0;
}

#tablebar .tablebar-item:last-child {
    border-right: 0;
}


#tablebar #numFollowers, #tablebar #log-count, #tablebar #forum-count
{
   color: #B5A381;
   margin-left: 2px;
   font-family: Open Sans, arial, helvetica, sans-serif;
   font-size: 110%;
}

#tablebar #hidetop-button
{
    display: none;

    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 80%;
    line-height: 2em;
    color: #907A50;
    border-radius: 2px;
    cursor: pointer;
    padding: 1px 12px;
    border: solid 1px #6C5A37;
    border-color: #6C5A37 #392F1D #392F1D #6C5A37;
    background-color: #554525;
    text-shadow: none;
}

#tablebar #hidetop-button.lower
{
   top: 20px;
}

#tablebar #hidetop-button:hover
{
    border-color: #AC9361;
    color: #AC9361;
}

#tablebar #hidetop-button.lower:hover
{
    border-color: #AC9361;
    color: #AC9361;
}

#tablebar .tablebar-gm-name
{
    font-weight: bold;
    font-size: 120%;
}

#tablebar .gmstat {
  margin-left: 16px;
  margin-right: 2px;

}


/*************  Table View **************/


table#gamelayout
{
  margin: 0px 8px;
  margin-top: 8px;
  width: 1006px;
}

.table-lobby table#gamelayout {
    margin-top: 8px;
}


table#gamelayout td#leftpanel
{
   width: 550px;
}

table#gamelayout td#midmargin
{
  width: 8px;
}

table#gamelayout td#rightpanel
{

}



td#leftpanel div, td#leftpanel img, td#leftpanel span, .noselect
{
   user-select: none;
}




#musiccontainer
{
    height: 0px;
    width: 0px;
    overflow: hidden;
}



/** Logged Out **/


#tableshade
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 899;
}

#tableshadeinner
{
   position: relative;
    opacity: 0.5;;
    background-color: #000;
    height: 100%;
    width: 100%;
}

#loggedoutpopup
{
   position: absolute;
   background-color: #3d3d3d;
   color: #bbb;
   padding: 24px 32px 32px 32px;
   top: 80px;
   left: 300px;
   text-align: center;
   z-index: 6100;
   width: 400px;
   font-size: 110%;
   border-radius: 8px;
}

#loggedoutpopup h2
{
   margin-bottom: 16px;
}

a.loggedoutoption
{
   padding: 16px 0px;
   text-align: center;
   background-color: #5f5f5f;
   font-size: 120%;
   margin-bottom: 8px;
   display: block;
   color: #ccc;
   font-weight: bold;

   border-radius: 8px;
}

a.loggedoutoption:hover
{
   text-decoration: none;
   background-color: #666;
}






/**************  Table - Chat *************/



#chatouter
{
    z-index: 1;
}

#chatcontentouter
{
}

#chatservermessage
{
   position: absolute;
   bottom: 80px;
   left: 0px;
   padding: 16px;
   background-color: #3d3d3d;
   color: #fff;
   font-weight: bold;
   text-align: left;
   display: none;
   z-index: 10;
   width: 100%;
   text-align: center;
   cursor: pointer;
}


#chattabsouter
{
   background-color: #282828;
   border: solid 2px #2C2C2C;
   border-width: 0px 2px;
   height: 38px;

   border-radius: 8px 8px 0 0;
}


#chattabs
{
   margin-left: 2px;
   width: 100%;
   position: absolute;
   bottom: 0px;
}

.chattab
{
   x-font-family: pt serif, georgia, utopia, serif;
   text-align: center;
   background-color: #333;
   color: #ccc;
   font-size: 100%;
   padding: 4px 0px 5px 0px;
   display: inline-block;
   cursor: pointer;
   border: 0px;
   border-top: solid 1px #3F3F3F;
   border-bottom-x: solid 1px #272727;
   width: 124px;
   white-space: nowrap;
   border-radius: 6px 6px 0 0;
   margin-bottom: 1px;
   user-select: none;
}

.chattab.tabselected
{
   background-color: #484848;
   border-color: #616161;
   border-bottom-x: solid 1px #444;
   margin-bottom: 0px;
}

#chattabtalk {
    width: 184px;
}

.chatpagecontainer
{
    display: none;
    font-family: Open Sans, arial, helvetica, sans-serif;
    font-size: 100%;
    line-height: 150%;
    overflow: hidden;
    height: 540px;
}

.chatpagecontainer.fade, #chatpagetalk.fade {
   opacity: 0.2;
}

.chatpagetext
{
   color: #bbb;
   overflow: auto;
   height: 448px;
   position:relative;
}

.chatpagetext, #chatpagetalk {
    scrollbar-width: thin;
    scrollbar-color: #242424 transparent;
}

.chatpagetext::-webkit-scrollbar-track, #chatpagetalk::-webkit-scrollbar-track  {
    background: transparent;
}

.chatpagetext::-webkit-scrollbar-thumb, #chatpagetalk::-webkit-scrollbar-thumb {
    background-color: #242424;
    border-radius: 8px;
}



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

.chatpagetext li
{
   margin-bottom: 8px;
}

.chatpagetext h2
{
   font-size: 120%;
   font-weight: bold;
   margin-bottom: 16px;
   margin-top: 32px;
}




/** Info Tab **/


#chatpageinfo #infocontainer
{
   height: 540px;
   overflow-y: auto;
   overflow-x: hidden;
   line-height: 1.75em;
   font-size: 100%;
}

#infogmtext {
    padding: 24px;
    width: 440px;
}


#infotabloadbuffer
{
   display: none;
}

.infotabtoparea
{
    background-color: #1a1a1a;
    text-align: center;
    font-size: 110%;
}

#infotabtopareagm {
    padding: 12px 0;
}

.tableinfosubheader {
    font-weight:bold;
    font-size: 160%;
    margin-bottom: 24px;
    margin-top: 12px;
    font-family: pt serif, georgia, utopia, serif;
    padding-top: 24px;
    border-top: solid 1px #3d3d3d;
}

.tableinfosubheader:first-child {
   border: 0;
   padding-top: 0;
   margin-top: 0;
}


.infobuttons {
    background-color: #222;
    text-align: center;
    padding: 8px 0;
}

.infobuttons a {
    color: #aaa;
    margin-left: 28px;
    font-size: 90%;
}

.infobuttons a:first-child {
    margin-left: 0;
}



/** Players Tab **/


#chatpageplayers
{
   font-size: 120%;
   height: 100%;
   overflow: auto;
}

#chattabplayers #numvisitors
{
   font-family: Open Sans, arial, helvetica, sans-serif;
   color: #aaa;
   margin-left: 8px;
   line-height: 100%;
}

#inviteouter
{
   display: none;
   position: absolute;
   top:0px;
   width: 100%;
   z-index: 1000;
   padding: 16px;
   background-color: #1a1a1a;
   border-bottom: solid 1px #3d3d3d;
   text-align: center;
   font-size: 120%;
   font-family: Open Sans, arial, helvetica, sans-serif;
}

#shareurl
{
   width: 90%;
   margin: 0px auto;
   padding: 8px 8px 8px 12px;
   color: #ddd;
   font-size: 90%;
   background-color: #080808;
   border-radius: 4px;
}

#sharebutton
{
   width: 90%;
   margin: 0px auto;
   padding: 8px 8px 8px 12px;
   color: #000;
   font-size: 90%;
   background-color: #888;
   border-radius: 4px;
}


#shareclose
{
   margin: 24px auto 8px;
   padding: 4px 0px;
   width: 160px;
   background-color: #3d3d3d;
   color: #fff;
   font-size: 80%;
   text-align: center;
   border-radius: 4px;
}

#chatpageplayers #sharelink b
{

}

#chatpageplayers #playerlistinner
{
    overflow: auto;
    height: 100%;
    position: relative;
    width: 100%;
}

#chatpageplayers a#lockparty
{
    position: absolute;
    right: 4px;
    font-weight: normal;
    font-size: 90%;
}

#chatpageplayers .playerlistheader
{
   font-weight: bold;
   padding-bottom: 4px;
   border-bottom: solid 1px #3d3d3d;
   margin-bottom: 16px;
   color: #bbb;
}

#chatpageplayers .playerlistsection td
{
   font-size: 90%;
   padding: 2px 16px 2px 0px;
}

#chatpageplayers .playerlistsection td.charname
{
   font-weight: bold;
   font-style: italic;
}






/** Chat Tab **/



#chatpagetalk
{
   border-top: solid 2px #111;
   height: 540px;

   position:relative;
   padding-bottom: 12px;
   padding-top: 8px;

   z-index: 2;
   overflow-y: auto;
}

#chatpagetalkgradient {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(8,8,8,0.75) 0%,rgba(8,8,8,0) 100%);
    z-index: 5;
    pointer-events: none;
}

#chatpagetalk.dark {
    opacity: 0.5;
}

#chatcontent
{
    background-color: #111;
    height: 540px;
    font-size: 90%;
    border: solid 1px #272727;
    border-bottom: 0px;
    border-top: 0px;

}

#chatpagetalkmessages
{
   display: none;
   padding-bottom: 12px;
}

#chatinput
{
    height: 83px;
    background-color: #040404;
    color: #E9BA15;
    color: #aaa;
    overflow: auto;
    padding: 16px;
    padding-bottom: 4px;
    font-family: Open Sans, arial, helvetica, sans-serif;
    font-size: 120% !important;
    line-height: 125%;
    width: 100%;
    border: solid 2px #111;
    border-color: #111 #272727 #272727 #1a1a1a;
    border-top: 0px;
    position: relative;

    border-radius: 0 0 8px 8px;
}

.chatinputflash
{
    border-color: #eee;
}


#chatinput.gmonly
{
   background-color: #111;
}

#chatsubmitbutton
{
   display: none;
   background-color: #3d3d3d;
   padding: 6px 32px 5px 32px;
   z-index: 2000;
   font-size: 90%;

   position: absolute;
   bottom: 5px;
   right: 2px;

   line-height: 16px;
   white-space: nowrap;

   border:solid 1px;
   border-color: #555 #111 #111 #555;
   color: #aaa;

   border-radius: 4px 0px 6px 0px;
}

#chatsubmitbutton:hover
{
   color: #fff;
}

.chatcontinue
{
    margin-left: 8px;
    font-size: 80%;
    color: #7e7e7e;
}


.chatmessage
{
   width: 100%;
   padding: 0px;
   line-height: 150%;
}

.chatmessage .chatmessageindent
{
   width: 12px;
}

.chatmessage.chatmessagechar
{
   margin: 1px 0px;
   margin-top: 4px;
}

.chatmessage.samechar
{
   margin-top: 2px;
}

.chatmessage .midmargin
{
    width: 8px;
}


.chatdividerouter
{
   width: 100%;
   padding: 16px 0;
}

.chatdivider
{
   border-top: solid 1px #333;
   height: 0;
}

#chatauthorstrip {
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0,0,0,0.1);
   height: 100%;
   width: 100px;
   z-index: 1;
}




.chatmessage .msgauthor
{
   white-space: nowrap;
   color: #7e7e7e;
   font-family: Open Sans, arial, tahoma, sans-serif;
   font-size: 100%;
   width: 112px;
   overflow: hidden;
   display: inline-block;
   padding: 2px 12px 0px 16px;
   vertical-align: top;
}


.chatmessage .msgauthor.alias
{
   color: #997D57;
   font-family: Open Sans, arial, tahoma, sans-serif;
   font-size: 105%;
   font-style: italic;
   font-weight: bold;
   width: 50px;
   width: 90px;
}

.chatmessage .msgauthor.alias
{
   padding-right: 4px;

}


.chatmessage .msgauthor.alias.aliasgm
{
   color: #988161;
}

.chatmessage .msgauthor.alias.aliasnpc
{
   color: #988161;
}

.chatmessage .msgauthor.oocgm
{
   color: #888;
   font-weight: bold;
}

.chatmessage .msgauthor.longname
{
   font-size: 80%;
}



.chatmessage .msgbody
{
   color: #bbb;
   font-family: Open Sans, arial, arial, sans-serif;
   padding: 2px 16px 0px 0px;
   font-size: 105%;
   display: inline-block;
   max-width: 350px;
   vertical-align: top;
}

.chatmessage .msgbody a {
    white-space: nowrap;
}

.chatmessage .msgbody.gmtalk
{
}

.chatmessage .arrow {
    font-style:normal;
    margin-right: 0px;
    top: 0px;
    position:relative;
}

.chatmessage .dice {
   top: -1px;
   display: inline-block;
   white-space: nowrap;
}

.chatmessage .dice-plus {
   margin: 0px 2px 0px 4px;
   display: inline-block;
   position: relative;
   top: 1px;
   font-style: normal;
   font-family: times;
}

.chatmessage .msgbody.bubble.gmtalk {
  line-height: 140%;
  background-color: #524638;
  color: #C3B4A2;
  text-shadow: -1px 1px 3px rgba(0,0,0,0.5);
  padding: 8px 16px;
}

.chatmessage .privateprefix
{
   color: #496f46;
   font-size: 80%;
   margin-right: 8px;
}

.chatmessage .msgbody.aliased
{
   font-family: komika, pt serif, georgia, utopia, serif;
   font-size: 120%;
   color: #A5947B;
}




.chatmessage .msgbody.bubble
{
   background-color: #372F26;
   padding: 4px 16px 6px 16px;
   color: #AA9B87;
   font-size: 130%;
   border-radius: 4px;
}

.chatmessage .msgbody.think
{
   font-style: italic;
   font-weight: normal;
}

.chatmessage .msgbody.aliasedmeta
{
   color: #8A7D6A;
   font-family: Open Sans, arial, arial, sans-serif;
   font-size: 100%;
}

.chatmessage .msgbody.emote
{
   font-style: italic;
   font-weight: normal;
}

.chatmessage .msgbody.emote.aliased
{
   font-style: normal;
}

.chatmessage .msgbody.whisper
{
   font-size: 100%;
   font-weight: normal;
   color: #7e7e7e;
}

.chatmessage .msgbody .emotesigil
{
   opacity: 0.75;
   letter-spacing: 1px;
   white-space: nowrap;
}

.chatmessage .msgbody.whisper.aliased
{
   color: #94826a;
}

.chatmessage .highlight
{
   color: #6DAF92;
}

.chatmessage .inlineemote
{
   font-style: normal;
   font-size: 90%;
   white-space: nowrap;
}


.chatmessage .talkbubblerel
{
   position: relative;
   height: 0px;
   width: 0px;
}

.chatmessage .talkbubblepointer
{
    border-top: 4px solid transparent;
    border-right: 20px solid #372F26;
    border-bottom: 4px solid transparent;
    position: relative;
    top: 9px;
}

.chatmessage .talkbubblepointer.gmbubble
{
    border-right-color: #524638;
}


.chatmessage .talkbubblethink
{
    position: relative;
    top: 9px;
}

.chatmessage .talkbubblethink.gmbubble
{
    color: #524638;
}

.chatmessage .talkbubblethink span
{
   color: #372F26;
   position: absolute;
   left: 0px;
   letter-spacing: -2px;
   font-size: 280%;
   white-space: nowrap;
   line-height: 0px;
}

.chatmessage .talkbubblemargin
{
    display: inline-block;
    width: 20px;
    vertical-align: top;
}




#chatinvitelink
{
   font-size: 90%;
   margin-left: 12px;
}


#standalonechatlog
{
    border-radius: 8px;
    border: solid 2px #1a1a1a;
    font-size: 90%;  /* to match chatcontent panel */
}


#followlink
{
    font-weight: bold;
}

#followlink.following
{
   font-style: italic;
}


/** Chat Input **/


#chatinput.inputalias
{
   color: #8A7D6A !important;
   font-family: komika, pt serif, georgia, utopia, serif !important;
   font-size: 100%;
   x-font-weight: bold;
   background-color: #151412;
   border-top: solid 1px #111 !important;
}


.chatinputflash
{
   border: solid 1px #444 !important;
}

#chatinputoverlaypos
{
   height: 4px;
   position: relative;
   line-height: 0px;
}

#chatinputoverlay
{
   position: absolute;
   top: 0px;
   right: 0px;
}

.chatlink
{
   border: solid 1px #1a1a1a;
   border-color: #3d3d3d #272727 #272727 #272727;
   color: #949494;
   font-size: 100%;
   background-color: #272727;
   height: 33px;
   position: relative;
   top: 0px;
   display: inline-block;
   line-height: 230%;
   text-align: center;
   background-color: #272727;
   border-radius: 4px;
   margin-left: -1px;
}

.chatlink:hover
{
   text-decoration: none;
   filter: brightness(120%);
}

#chatcontrols::selection, #chatcontrols *::selection {
    background:transparent;
}


#chatmodelink
{
   width: 201px;
   padding-right: 4px;
   white-space: nowrap;
}

.chatbuttonicon
{
   overflow: hidden;
   width: 18px;
   position: relative;
   margin-right: 4px;
   top: 0px;
   display: inline-block;
   vertical-align: middle;
}

.chatbuttonicon img
{
   position: relative;
   left: 0px;
   width: 36px;
}

.chatlink.toggleon
{
   color: #fff !important;
}

.chatlink.toggleongm
{
   background-color: #8C5004;
   color: #fff !important;
   background-image: none;
   border-color: #AE6A14 #6A3F07 #6A3F07 #AE6A14;
}


#chatcontrols
{
   height: 36px;
   background-color: #1a1a1a;
}

#chatcontrolsinner
{
   color: #757575;
   text-align: center;
   text-align: left;
   margin-left: 3px;
   top: 2px;
   white-space: nowrap;
}

#chatfix
{
   display: none;
   position: absolute;
   bottom: 4px;
   right: 2px;
   z-index: 2000;
   padding: 4px 16px 6px;
   line-height: 100%;
   white-space: nowrap;
   background-color: #363;
   color: #fff;
   font-weight: bold;
   font-size: 70%;
   font-family: Open Sans, arial, helvetica, sans-serif;
}


#chatturnbutton
{
    width: 156px;
}

#chathelplink.light {
  color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,1.0);
}

#chatturnbutton.turnflash
{
    border-color: #7e7e7e;
}

#chatturnbutton.active
{
    background-color: #265321;
    color: #ADD4A8;
    font-weight: bold;
    border-color: #4B8145 #1F3B1C #1F3B1C #1F3B1C;
}


#chatturnbutton #turncontrols
{
  display: inline-block;
  padding-right: 4px;
  top: 0px;
}

#chatturnbutton #turndonelabel
{
   top: 1px;
   display: none;
}


#chatturnlabel
{
   margin-right: 4px;
   margin-left: -4px;
   margin-top: 1px;
   font-size: 90%
}

#chatturnvalue
{
   font-style: italic;
   color: #ccc;
   font-size: 90%;
}

#chatturnvalue.turnnone
{
   color: #7e7e7e;
}



#chatturndone
{
    display: inline-block;
    margin-left: 4px;
    border: solid 1px #272727;
    background-color: #272727;
    top: 1px;
    padding: 2px 8px 2px 8px;
    white-space: nowrap;
    width: 60px;
    color: #444;
    font-size: 80%;
    text-align: center;
    border-radius: 4px;
}

#chatturndone.active
{
    background-color: #265321;
    color: #ADD4A8;
    border-color: #4B8145 #1F3B1C #1F3B1C #4B8145;
}




#diceselect
{
    display: none;

    position: absolute;
    z-index: 6100;
    bottom: 34px;
    right: 0px;

    background-color: #111;
    border: solid 2px #3d3d3d;
    color: #aaa;

    border-radius: 8px;
}


.alpha3
{
   opacity: 0.3;}



/*********** Turn Selection ************/


#turnselect
{
    display: none;
    position: absolute;
    z-index: 6100;
    bottom: 8px;
    right: 56px;
    width: 220px;
    left: auto;
    top: auto;
}

.turnselectoption
{
   padding: 12px 2px 12px 12px;
   white-space: nowrap;
   font-size: 100%;
   position: relative;
   border-bottom: solid 1px #272727;
}

#turnselect.active .turnselectoption:hover
{
   background-color: #272727;
   color: #fff;
}

.turnselectdivider
{
   overflow: hidden;
   height: 0px;
   border-top: solid 1px #3d3d3d;
}

.turnselectdone
{
   position: absolute;
   right: 12px;
   color: green;
   font-size: 70%;
}

#turnselectheader
{
   margin-bottom: 8px;
   background-color: #1a1a1a;
   font-size: 70%;
   text-transform: uppercase;
   font-family: Open Sans, arial, arial, sans-serif;
   padding: 2px 12px;
   color: #888;
   border-radius: 4px 4px 0 0;
}



/******* Quick Help popup *******/



.tablepopup.chatcontrolpopup {
   position: absolute;
}


#quickhelppopup, #dicehelppopup
{
   width: 250px;
   right: 8px;
   bottom: 8px;
   top: auto;
   left: auto;
}

#quickhelppopup p
{
   margin-top: 16px;
   line-height: 150%;
}

.quickhelpcommand
{
   font-family: Open Sans, arial, helvetica, sans-serif;
   margin-top: 8px;
   line-height: 150%;
   font-size: 100%;
}

.quickhelpcommand b
{
   color: #eee;
}

.quickhelptable td
{
    white-space: nowrap;
    padding: 4px 8px 4px 0px;
    margin: 0px;
    line-height: 16px;
    font-size: 90%;
}


.quickhelpheader
{
   font-weight: bold;
   margin: 24px 0px 16px 0px;
   color: #AA8E63;
    border-bottom: solid 1px #3d3d3d;
    padding-bottom: 4px;
}

.quickhelpsubheader
{
   font-weight: bold;
   margin: 16px 0px 4px 0px;
   color: #AA8E63;
   border-bottom: solid 0.5px #3d3d3d;
    padding-bottom: 4px;
}


/******* Edit Table Popup *******/


#edittablepopup textarea#edittable-info
{
   height: 200px !important;
   padding: 16px;
   font-size: 90%;
}




/*********** Table - Left Side ************/




#tablebanner
{
   background-color: #30271d;
   height: 100px;
   height: 60px;
   background-size: cover;

   border-radius: 8px 8px 0 0;
}

#tablebanner.custombanner
{
   background-color: #272727 !important;
   border: solid 2px #251f16;
   border-bottom: 0;
}

#tablebannergradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
}

#tablebannertext
{
   position:absolute;
   top:0px;
   left: 0px;
   text-align: center;
   width: 100%;
   font-weight: bold;
   font-variant: small-caps;
   font-size: 160%;
   height: 100%;
   line-height: 260%;
   color: #eee;
   opacity: 0.8;
   overflow: hidden;
   white-space: nowrap;
   text-shadow: 0 0 20px rgba(0,0,0,0.9);
}

#viewportloading
{
   position: absolute;
   z-index: 3000;
   font-size: 250%;
   top: 100px;
   color: #fff;
   font-weight: bold;
   width: 100%;
   line-height: 200%;
   font-family: pt serif, georgia, utopia, serif;
   opacity: 0.3;
}
#viewportloading .spinner
{
    margin-left: -50px;
    left: 50%;
    position: absolute;

  height: 100px;
  width: 100px;
  animation: rotation .6s infinite linear;
  border-left: 16px solid rgba(255,255,255, .25);
  border-right: 16px solid rgba(255,255,255, .25);
  border-bottom: 16px solid rgba(255,255,255, .25);
  border-top: 16px solid rgba(255,255,255, .9);
  border-radius: 100%;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


/** Viewport Ribbon **/



#viewportribbon
{
   height: 36px;
   position: relative;
   text-align: center;
   box-shadow: 0 0px 16px rgba(0,0,0,0.1);
}

#viewportribbon_scene
{
   height: 100%;
   background-color: #362512;
   border-bottom: solid 1px #342410;
   position: absolute;
   width: 100%;
   top: 0px;
}

#viewportribbon_scene_text
{
   font-family: pt serif, georgia, utopia, serif;
   color: #c2b3a2;;
   font-size: 120%;
   display: inline-block;
   position:relative;
   top: 6px;
   text-align: center;
   margin: 0px auto;
}

#viewportribbon_scene_leftpad
{
   display: none;
   width: 28px;
}

#viewportribbon_scene_edit
{
   font-size: 70%;
   margin-left: 8px;
   color: #947F63;
   position: relative;
   top: 4px;
   display: none;
}

#viewportribbon_mode
{
   background-color: #743516;
   height: 100%;
   z-index: 3010;
   display: none;

   position: absolute;
   width: 100%;
   top: 0px;
}

#viewportribbon_mode_text
{
   position: relative;
   top: 5px;
   color: #fff;
   text-align: center;
   width: 100%;
   font-size: 100%;
   font-weight: bold;
}



/** Mini Detail **/


#viewportribbon_ministatus
{
   background-color: #21180E;
   z-index: 3001;
   display: none;
   position: absolute;
   width: 100%;
   bottom: 0px;
   padding: 0px;
   white-space: nowrap;
}

#viewportribbon_ministatus_text
{
   position: relative;
   color: #D4C9B8;
   text-align: left;
   width: 100%;
   font-size: 100%;
   margin: 0px;
}

#viewportribbon_ministatus #minidetailname
{
   color: #D4C9B8;
   font-style: italic;
   width:  132px;
   display: inline-block;
   text-align: center;
}

#viewportribbon_ministatus a
{
   color: #DAB174;
   display: inline-block;
   padding: 12px 16px 12px 16px;
   text-align: center;
   border-left: solid 1px #2E271C;
}

#viewportribbon_ministatus a:hover
{
   text-decoration: none;
   background-color: #1B130B;
   color: #D8B076;
}


#hitmenu
{
   position: absolute;
   bottom: 42px;
   right: 48px;

   display: none;
   z-index: 2100;

   background-color: #251F16;
   border: solid 1px #2E271C;
}

#hitmenu .hitmenuoption
{
    padding: 4px 4px 4px 12px;
    min-width: 120px;
    display: block;
    color: #BB9358;
    border-bottom: solid 1px #2E271C;
}

#hitmenu .hitmenuoption:hover
{
    background-color: #2C251A;
    color: #D8B076;
}


/******** Viewport *********/

#viewport
{
   background-color: #312513;
   height: 334px;
   overflow: hidden;
   border-top: 0px;
   z-index: 1;
   border: solid 1px #312513;
   border-width: 0 1px;
}

#viewport > div, #viewport img
{
   position: absolute;
}

#viewport.blur {
   filter: blur(1px);
   opacity: 0.5;
   pointer-events: none;
}

#viewport #screenimg
{
   top:  -25px;
   right: 0px;
   z-index: 800;
   width: 110px;
}

#tableimg
{
   width: 100%;
   height: 100%;
   background-image: url(/assets_v20200725039/images/app/tabletop.png);
   background-size: 100% auto;
}

#tablegradient
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
   opacity: 0.5;
   pointer-events: none;
}

#charsheettop
{
   bottom: 0px;
   right: 20px;
   width: 120px;
   display: none;
   border-bottom: 0px;
   z-index: 1900;
   box-shadow: 0px 2px 16px rgba(0,0,0,0.1);
   opacity: 0.7;
}

#charsheettop:hover
{
   xbox-shadow: 0 0 12px rgba(255,255,255 ,0.25);
   opacity: 0.8;
}


#viewport .tablepointer
{
   color: #fff;
   z-index: 1900;
   font-size: 120%;
   font-weight:bold;
   margin-left: 0px;
   margin-top: -10px;
   width: 1px;

   cursor: default;
}


#viewport #minidragarea
{
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 320px;
}


#viewport #activeminislayer
{
    top: 4px;
    left: 0px;
    z-index: 1200;
}

#viewport #activeminislayer #activeminis
{
    position: relative;
}

#viewport #activeminislayer #activeminis.mat-edit
{
    opacity: 0.25;
    pointer-events: none;
}


#viewport #clutterfar
{
   top: 0px;
   left: 0px;
   z-index: 800;
   width: 125px;
   filter: brightness(90%);
}

.cursorcrosshair
{
   cursor: crosshair !important;
}

#tablemenu.viewportmenupopup
{
   left: 0px;
   bottom: 48px;
}

.menu-icon {
   scale: 2.5;
   position: relative;
   display: inline-block;
   top: -2px;
   margin-left: -2px;
}

#viewportmenu
{
}

.viewportmenupopup
{
    margin: 0px;
    width: 160px;
    display:none;
    z-index: 2000;
    border: solid 1px #433322;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
    background-color: #2c2013;
}

.viewportmenupopupinner
{
    position: relative;
}


.viewportmenupopup .innerbutton
{
    text-align: left;
    margin: 0px;
    color: #C6B49A;
    width: 100%;
    padding: 8px;
    padding-left: 20px;
    font-size: 100%;
    border-bottom: solid 1px #433322;
}

.viewportmenupopup .innerbutton:hover
{
   background-color: #1f170e;
}

#tablemenulink
{
    font-family: pt serif, georgia, utopia, serif;
    bottom: 0px;
    left: 0px;
    height: 48px;
    width: 60px;
    text-align: center;
    vertical-align: center;
    line-height: 41px;
    background-color: transparent;
    color: #B5966A;
    font-weight: bold;
    font-size: 105%;
    display: none;
    z-index: 1900;
    text-shadow: 0 0 8px rgba(0,0,0,0.25);
    opacity: 0.5;
}

#tablemenulink:hover
{
    background-color: rgba(255,255,255,0.025);
    opacity: 1.0;
}

.viewportmenupopup .innerbutton:last-child {
   border: 0;
}





/** Join Banner **/


#joinbanner
{
   font-family: pt serif, georgia, utopia, serif;
   background-color: #21180E;
   color: #CEC1AE;
   bottom: 0px;
   margin: 0px;
   padding: 16px 0px;
   text-align: center;
   z-index: 3000;
   width: 100%;
   display: none;
}

#joinbannerlabel
{
    color: #8B7A61;
    font-weight: bold;
    font-size: 120%;
    margin-right: 8px;
}

#joinbutton
{
   font-weight: bold;
   font-size: 110%;
   line-height: 34px;
   background-color: #E7B446;
   border: solid 1px #F1BC4B;
   border-color: #FBCF70 #966D13 #966D13 #966D13;
   padding: 1px 20px;
   margin-left: 0px;
   font-family: pt serif, georgia, utopia, serif;
   color: #4A3C0A;
   text-shadow: none;
}

#joincharselect
{
   font-weight: bold;
   width: 220px;
   padding: 8px 8px 8px 12px;
   font-weight: bold;
   font-size: 120%;
   background-color: #3a2e20;
   color: #CEC1AE;
   border-radius: 4px;
   border: 0;
   font-family: pt serif, georgia, utopia, serif;
   margin-right: 4px;
}

#joincharselect:focus, option:focus
{
   outline: none;
}

#joinbannerclose
{
   margin-left: 24px;
   color: #897354;
   font-size: 100%;
   font-weight: bold;
   display: inline-block;
   padding: 1px 12px;
   border-radius: 4px;
   background-color: #3a2e20;
}


#joinminlink
{
   font-family: pt serif, georgia, utopia, serif;
   position: absolute;
   bottom: 0px;
   left: 12px;
   padding: 4px 20px;
   background-color: #211a12;
   color: #ab9d8a;
   font-size: 100%;
   z-index: 3000;
   display: none;
   border-radius: 4px 4px 0 0;
}


#joinminlink:hover
{
   color: #ccc;
}


/*************** Party Panel **************/



#partyouter
{
   height: 268px;
   border: solid 2px #1f1a12;
   border-top: solid 2px #2d2215;
   border-radius: 0 0 8px 8px;
   overflow: hidden;
}

#partyemptymsg
{
    margin: 24px;
    width: 92%;
    padding: 64px;
    text-align: center;
    border: solid 1px #282828;
    position: absolute;
    top: 0px;
    color: #7e7e7e;
}

#party
{
   width: 100%;
   border-collapse: separate;
   border-spacing: 0px;
   font-size: 110%;
   background-color: #2c2013;
   height: 100%;
}

#party tr
{

}

#party td
{
     height: 38px;
     vertical-align: middle;
     position: static;
     padding-left:16px;
     border-bottom: solid 0.5px #3f3122;
     font-size: 115%;
     color: #83745e;
     overflow: hidden;
     text-shadow: 0 0 6px rgba(0,0,0,0.5);
}

#party td.lights
{
     width: 68px;
}

#party td.party-username {
   font-size: 65%;
   color: rgb(114, 92, 64);
   width: 100px;
   padding-left: 24px;
}

#party td.name
{
     width: 264px;
     font-weight: bold;
     font-style: italic;
     font-size: 100%;
     white-space: nowrap;
     color: #c5ae92;
}

.partynamefade
{
   opacity: 0.3;
}

#party td.nameempty
{
     width: 264px;
}

#party .slotlabel {
   color: #5f4e3c;
   font-size: 75%;
   text-shadow: none;
}

.username-name {
   font-weight: bold;
}

.username-typing {
   display: none;
   height: 20px;
   background-color: #433423;
   padding: 0 12px;
   border-radius: 16px;
   line-height: 17px;
   top: -1px;
}

.username-typing span {
  width: 8px;
  height: 8px;
  background-color: #94816d;
  border-radius: 50%;
  display: inline-block;
  animation: typingDot 1.2s infinite ease-in-out;
  margin: 0 1px;
  top: 2px;
  position: relative;
}


.talklightgm .username-typing {
   background-color: #894c1f;
}

.talklightgm .username-typing span {
   background-color: #c0a487;
}



.username-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.username-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

.party-username.talklighton .username-typing {
   display: inline-block;
}

.party-username.talklighton .username-name {
   display: none;
}


@keyframes typingDot {
  0%, 80%, 100% {
    transform: scale(0.75);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}



#party
{
   table-layout: auto;
}

table#party td.playerhp
{
   width: 80px;
   white-space: nowrap;
   font-family: Open Sans, arial, helvetica, sans-serif;
   color: #e46a30;
   padding-left: 0;
   text-align: center;

}

table#party td.playermp
{
   width: 80px;
   white-space: nowrap;
   font-family: Open Sans, arial, helvetica, sans-serif;
   color: #CDAD4C;
   padding-left: 0;
   text-align: center;
}

.hpdead
{
   color: #c33 !important;
}

#party td.playerclass
{
   width: 144px;
}

#party .playerclassval
{
   white-space: nowrap;
   color: #949494;
   font-size: 80%;
   position: relative;
   top: 1px;
}

#party .partystatlabel {
   font-size: 110%;
   margin-right: 6px;
   color: #7e6341;
   font-family: Open Sans, arial, arial, sans-serif;
   text-transform: uppercase;
   font-weight: bold;
}

#party td.slotlink:hover 
{
   background-color: #1f170e;
}

#party td.slotlink:hover .partystatlabel
{
   filter: brightness(110%);
}

#party .rolejoiner {
   font-weight: normal;
   margin-left: 6px;
   margin-right: 4px;
   font-size:80%;
}

#party .namerole {
   font-weight: normal;
   font-size: 90%;
}

#party .statmax {
   font-size: 70%;
   margin-left: 4px;
   color: #725a3e;
   font-weight: bold;
}

.turnmarker
{
   background-color: 181818;
   border: solid 1px transparent;
   color: #444;
   font-size: 70%;
   padding: 3px 7px;
   line-height: 100%;
   right: 38px;
   top: 9px;
   z-index: 3000;
   position: absolute;
   font-style: normal;
   font-family: Open Sans, arial, helvetica, sans-serif;
   text-transform: uppercase;
   cursor: default;
   white-space: nowrap;

   border: solid 1px #272727;
}

.turnmarkeron
{
   background-color: #824F0D !important;
   border-color: #5A3608;
   color: #ccc !important;
}

.turnmarkeronme
{
   background-color: #151 !important;
   border-color: #030;
   color: #aca !important;
}

.turnmarker.done
{
   color: #aaa;
   border-color: transparent;
   font-style: italic;
}



.table-icon {
   display: inline-block;
   width: 18px;
   height: 18px;
   overflow: hidden;
   background-image: url(/assets_v20200725039/images/app/table_icons.png);
   background-size: 112px;
   margin-right: -2px;
   margin-left: 2px;
   top: 3px;
   position: relative;
   opacity: 0.5;
}

.table-icon.icon-party-life {
   background-position: 0px;
}

.table-icon.icon-party-power {
   background-position: -18px;
   scale: 0.97;
}

.table-icon.icon-party-gm {
   background-position: -72px;
   width: 36px;
   margin-right: 0px;
   opacity: 0.2;
}



/************ Battlemat ***********/


img#matoverlay
{
   position: absolute;
   top: 0px;
   left: 0px;
   display:none;
   z-index:1000;
   height: 500px;
   width: 546px;
}

#mat
{
    top: 4px;
    left: 0px;

    position: absolute;
    z-index: 200;
}

#mattiles {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.2));
}

#matinner
{
   position: relative;
}

#north
{
   top: 86px;
   left: 392px;
   display: none;
}

#north.largemat
{
   top: 74px;
   left: 412px;
}

.mattile
{
    position: absolute;
    z-index: 201;
    height: 35px;
    width: 41px;
    overflow: hidden;
    background-image: url(/assets_v20200725039/images/app/mat_tile.png);
    background-size: 2500px 64px;
}

.mattile .decalimage {
   width: 2500px;
}

.mattile_DEL img
{
    position: relative;
    left: 0px;
}


/****** Battlemat Edit *************/

#battlematedit
{
   position: absolute;
   right: 0px;
   bottom: 0px;
   width: 100%;
   z-index: 2100;
   display: none;
}

#battlematedit-inner
{
   position: relative;
   background-color: #47361E;
}

#battlematedit-content
{
   height: 38px;
   border-top: solid 1px #251B0E;
}


#battlematedit-slots
{
   display: inline-block;
   margin-top: 4px;
   margin-left: 12px;
}

#battlematedit-slots .mattile {
  width: 42px;
  height: 30px;
  display: inline-block;
  position: relative;
  margin-left: 2px;
  scale: 0.9;
}

#battlematedit-slots .mattile.selectedtile
{
   z-index: 300;
   filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
   scale: 1.1;
}


#battlematedit-links
{
   display: inline-block;
   font-size: 80%;
   margin-left: 24px;
   top: -10px;
}


.battlematedit-link {
     margin-left: 14px;
     white-space: nowrap;
     display: inline-block;
     top: -1px;
     background-color: #3a2d1d;
     padding: 2px 8px;
     margin-left: 2px;
     border-radius: 3px;
     color: #c9bbab;
     font-size: 90%;
}


#battlematedit-done
{
   float: right;
   height: 80%;
    padding: 6px 20px;
    text-align: center;
    color: #DBD0C1;
    font-size: 90%;
    background-color: #211A12;

   margin-right: 4px;
   top: 4px;
   line-height: 140%;
   border-radius: 4px;

   color: #B5A896;
}

#battlematedit-done:hover
{
   background-color: #2C2010;
   color: #BEAF99;
}


#battlemattile-content {
    height: 350px;
}

#battlemattile-tiles {
   height: 100%;
   padding-left: 20px;
   padding-right: 12px;
   padding-bottom: 24px;
}

#battlemattile-tiles .mattile {
  position: relative;
  width: 42px;
  height: 32px;
  display: inline-block;
  margin: 0;
}

#battlemattile-tiles .tilesetlink {
  top: -16px;
  position: relative;
  font-size: 90%;
  margin-left: 12px;
}

#battlemattile-tiles .tilesetlink:hover {
    text-decoration: underline;
}

/********** Viewport Popup - Minigen **********/


#minipopup, #minieditpopup {
   top: 180px;
}

#minipopupcontent .mini
{
   border: solid 1px transparent;
}

#miniselect
{
   position: relative;
   height: 64px;
   border: solid 1px #372916;
   border-bottom: solid 1px #554226;
   background-color: #4D3C22;
   overflow: hidden;
   width: 100%;
}

#miniselectminis
{
   top: 4px;
}


#miniselect .miniselectarrow
{
   height: 100%;
   width: 18px;
   position: absolute;
   z-index: 2000;
   top: 0px;
   background-color: #372916;
   border: solid 1px;
   border-color: #3E2E19 #2E2213 #2E2213 #3E2E19;
   display: block;
   display: none;
}

#miniselect .miniselectarrow div
{
   position: relative;
   top: 10px;
   left: 3px;
}

#selectedministatouter
{
   width: 100%;
   padding: 4px 16px;
   text-align: center;
   font-size: 90%;
   position: relative;
   margin: 0px 0px 8px;
}

#minicontent {
   height: 170px;
}

#selectedministat
{
   font-size: 90%;
   white-space: nowrap;
   overflow: hidden;
}

#selectedtemplatename
{
   font-size: 120%;
   font-weight: bold;
}

#selectedtemplatestats
{
   font-size: 90%;
   margin-left: 16px;
}

a#selectedtemplateedit
{
   margin-left: 16px;
   font-size: 90%;
}


#miniqty
{
   margin: 0px 8px;
}

#miniqtylabel
{
   margin-right: 2px;
   position: relative;
   top: -2.5px;
}


#minipagestats
{
   display: none;
   position: absolute;
   top: 0px;
}

#colorselect
{
   display: none;
   width: 300px;
  border-radius: 4px;
  z-index: 2900;
  position: absolute;
  top: 20px;
  right: 28px;
  width: 208px;
  background-color: #4D3C22;
  border: 1px solid rgb(48, 35, 18);
}

.colorblock
{
   height: 21px;
   width: 26px;
   display: inline-block;
   overflow: hidden;
   border: solid 0.5px #272727;
   border-radius: 20px;
}

#colorselect .selectedblock
{
   border-color: #fff !important;
}


#ministyles
{
    margin-left: 12px;

    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    padding: 8px;
    padding-right: 12px;
}

.ministyledivider
{
    margin: 16px 8px 8px 0px;
    padding: 0px;
    border-bottom: solid 1px #6A563B;
    font-size: 90%;
}

#ministyle-content {
    height: 290px;
}

#ministylepreviewpos {
   width: 64px;
  height: 64px;
  position: relative;
  background-color: #4D3C22;
  border-top: solid 1px #372A18;
  border-bottom: solid 1px #5B482A;
  border-radius: 4px;
}

.ministyleactionbutton {
   font-size: 100%;
   display:inline-block;
   background-color: #4D3C22;
   border: solid 1px;
   border-color: #695536 #382C1A #382C1A #382C1A;
   padding: 4px 0px;
   width: 64px;
   line-height: 18px;
   border-radius: 4px;
   margin-bottom: 1px;
}


.ministyleactionbutton:hover {
    background-color: #544226;
}


#chatlogcast td {
   font-size: 110%;
   border-bottom: solid 1px #1a1a1a;
   padding: 4px 20px 4px 8px;
}

#chatlogcast th
{
  font-size: 70%;
  color: #7e7e7e;
  font-family: Open Sans, arial, arial, sans-serif;
  text-transform: uppercase;
  padding-left: 8px;
}