body {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.5em;
    -webkit-text-size-adjust: none;
}
#txt_name {
   margin-left:auto;
  margin-right:auto;
  display: block;
   border:4px solid blue;
  font-size: 30px;
  width:65vw;
  top: 50vh;
position: fixed;
  
}
#shopmenu {
  position:absolute;
  height:100vw;
  width: 100vw;
  bottom: 5vh;
 left:0;
  z-index:30000;
 
  border:1px solid blue;
  display: none;
}
#smtable {
  width:100vw;
}
.smtable {

  line-height: 0;

  border-collapse:collapse;
  position:relative;
}

.shopicon{
  width:20vw;
  line-height: 0;
margin-right:-4px;
float:left;
position:relative;
left:-1px;
}
.shopiconclicked{
  width:20vw;
  line-height: 0;
margin-right:-4px;
float:left;
position:relative;
left:-1px;

	filter: brightness(200%);

}
/* Structure */
#page {
    padding-top: 1.9em;
    margin: 0.5em;
}
#mid_panel {
    margin: 0;
}

/* Title */
#title {
    margin-top: -1.5em;
    padding: 1.0em 0.5em;
}
#title .label  {
    font-size: 0.65em;
    max-width: 25em;
    padding: 2.0em;
}

/* Side panels */
#tools_wrapper {
    position: static;
}

.tools {
    background-image: url("../img/text_bg.jpg");
    position: relative;
    width: auto;
}
#character_panel {
    display: none;
}


/*#tools_portrait{
    display:none;
    position:fixed;
    height:98vh;
    right:0.5vw;
        top:0.5vw;
            direction:rtl;
    z-index:-1;
    width:auto;
    
}*/
/*#tools_portrait{

position: fixed;
top: 3vh;
right: auto;
direction: rtl;
z-index: -1;
width: 100vw;

}*/

#tools_portrait{
display:none;
position: relative;
  top: 15px;
  right: auto;

  z-index: -1;
 overflow: hidden;
  height: 96vw;
  width: 96vw;
}
/*.clothing{
  
  position: absolute;
display: inline-block;
  height:100vw;
  width:100vw;

    
}
.crotch20hoss{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width: 209vw;
left: -57vw;
top: -63vw;
}
.crotch40hoss{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width: 226vw;
left: -66vw;
top: -73vw;
}
.crotch60hoss{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width: 239vw;
left: -71vw;
top: -80vw;

}
.crotch80hoss{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width: 277vw;
left: -93.5vw;
top: -102vw;
}
.crotch100hoss{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width: 280vw;
left: -96.5vw;
top: -105.5vw;
}
.crotch20{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width:190vw;
left:-43vw;
  top:-56vw;
}
.crotch40{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width:200vw;
left:-48vw;
  top:-62vw;
}
.crotch60{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width:205vw;
left:-51vw;
  top:-65vw;
}
.crotch80{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width:210vw;
left:-53.5vw;
  top:-68vw;
}
.crotch100{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;
width:215vw;
left:-56.5vw;
  top:-70.5vw;
}
.hidden1slit{
  width: 549vw;
left: -231vw;
top: 6.5vw;
position: absolute;
display: inline-block;
}
.hidden2slit{
  width: 549vw;
left: -123vw;
top: 32.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden3slit{
  width: 549vw;
left: -23vw;
top: 58.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden4slit{
  width: 549vw;
left: -335vw;
top: 8.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden5slit{
  width: 549vw;
left: -439vw;
top: -44.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden1{
  width: 549vw;
left: -229vw;
top: 8.5vw;
position: absolute;
display: inline-block;
}
.hidden2{
  width: 549vw;
left: -120vw;
top: 8.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden3{
  width: 549vw;
left: -15vw;
top: 8.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden4{
  width: 549vw;
left: -335vw;
top: 8.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.hidden5{
  width: 549vw;
left: -444vw;
top: 8.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.xeyportsprite1{
width: 511vw;
left: 12vw;
top: -43.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.xeyportsprite2{
width: 511vw;
left: -87vw;
top: -43.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.xeyportsprite3{
width: 511vw;
left: -190vw;
top: -43.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.xeyportsprite4{
width: 511vw;
left: -292vw;
top: -43.5vw;
position: absolute;
display: inline-block;
}
.xeyportsprite5{
width: 511vw;
left: -394vw;
top: -43.5vw;
position: absolute;
display: inline-block;
    height: inherit;
}
.xeyportait4{
  filter: hue-rotate(143deg);
       width: inherit;
    position:absolute;
    display: inline-block;
width: 68vw;
top: -14vw;
left: 23vw;
}
.xeyportait4peek{
  filter: hue-rotate(143deg);
       width: inherit;
    position:absolute;
    display: inline-block;
width: 68vw;
left:16.4vw;
  top:4.5vw;
}
.xeyportait5{
  filter: hue-rotate(143deg);
     width: inherit;
    position:absolute;
    display: inline-block;
width: 68vw;
top: -14vw;
left: 23vw;
}
.crotch20lion{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;

}
.crotch40lion{
position: absolute;
width: 105vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -2vw -3vh;
    height: inherit;

}
.crotch60lion{
position: absolute;
width: 108vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -4vw -2vh;
}
.crotch80lion{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -7vw -4vh;
}
.crotch100lion{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -8vw -7vh;
}

.crotch20lynx{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;

}
.crotch40lynx{
position: absolute;
width: 105vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -4vw -1vh;
    height: inherit;

}
.crotch60lynx{
position: absolute;
width: 108vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -4vw -2vh;
}
.crotch80lynx{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -7vw -4vh;
}
.crotch100lynx{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -8vw -7vh;
}

.crotch20hyena{
    width: inherit;
    position:absolute;
    display: inline-block;
    height: inherit;

}
.crotch40hyena{
position: absolute;
width: 105vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -4vw -1vh;
    height: inherit;

}
.crotch60hyena{
position: absolute;
width: 108vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -4vw -2vh;
}
.crotch80hyena{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -7vw -4vh;
}
.crotch100hyena{
position: absolute;
width: 117vw;
left: -1vw;
top: 0.2vw;
height: 100vw;
overflow: hidden;
object-fit: cover;
object-position: -8vw -7vh;
}


.horsexeyport{
   filter: hue-rotate(143deg);
     width: inherit;
    position:absolute;
    display: inline-block;
  width:72vw;
left:25vw;
  top:-15vw;
}
.horsexeyportbig{
 filter: hue-rotate(143deg);
width: inherit;
position: absolute;
display: inline-block;
width: 72vw;
left: 25vw;
top: -28vw;
height: 130vw;
}
.horsexeyport5{
     width: inherit;
    position:absolute;
    display: inline-block;
  width:72vw;
left:25vw;
  top:-16vw;
}
.horsexeyportslit{
  filter: hue-rotate(143deg);
     width: inherit;
    position:absolute;
    display: inline-block;
  width:46vw;
left:36.4vw;
  top:-23.5vw;
  height:119vw;
}
.horsexeyport5slit{
     width: inherit;
    position:absolute;
    display: inline-block;
  width:90.4vw;
left:2.8vw;
  top:3.6vw;
}*/
#info_panel {
  top:1vh;
    display: none;
    overflow:unset;
    left:0;
    max-height: unset;
}
#tools_wrapper {
    display: block;
}

/* Main content */
#content_wrapper {
    width: auto;
    padding: 2.0em;
}
#content {
    font-size: 16px;
    line-height: 1.5em;
}

/* Toolbar and menu */
#toolbar {
    position: fixed;
    z-index: 300;
    left: 0;
    right: 0;
    top: 0;
    background: transparent url("../img/toolbar_bg.jpg") repeat-x top left;
    height: 36px;
    padding: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.75);
    box-shadow: 0 0 16px rgba(0,0,0,0.75);
}
#toolbar h1 {
    float: left;
    font-weight: normal;
    font-size: 22px;
    margin: 8px 0 0 0;
    padding: 0 10px;
    color: #fc6;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
#toolbar .nav {
    float: right;
    margin: 0;
}
#toolbar .nav a {
    font-size: 16px;
    line-height: 20px;
    color: white;
    padding: 4px 16px;
    float: right;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    -webkit-border-radius: 6px;
    background-image: -webkit-gradient(linear, left top, left bottom,
                                       from(#C00), color-stop(0.45, #a00),
                                       color-stop(0.55, #900), to(#900));
    border: 2px solid #600;
}
#menu {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    font-size: 16px;
    background-image: url("../img/tools_bg.jpg");
    z-index: 200;
    list-style-type: none;
    padding: 10px 0 0 0;
    margin: 0;
    opacity: 0.95;
    -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.75);
    box-shadow: 0 0 16px rgba(0,0,0,0.75);
}
#menu li {
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
#menu li:last-child {
    border-bottom: none;
}
#menu a {
    display: block;
    padding: 10px 20px;
}

/*
@media (max-width: 900px) {
   CSS that should be displayed if width is equal to or less than 800px goes here 
  :root {
    --sca: 3;
    --vw66: 97vw;
    --vw33: 33vw;
    --vw11: 32vw;
  }

  #shopmenu {
    position:fixed;
    height: 100vw ;
    width: var(--vw66);
    bottom: 10vh;
    background: #c2b3da;
    z-index: inherit;
    left:-1vw;
    border:4px solid blue;
    display:none;
    border-collapse:collapse;
    margin:1em auto;
    background-image:url("../img/shopantonfull.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position: right;
    background-size:200% 100%;
  }
  #shopclose{
    float:right;
    font-size: 48px;
    position:absolute;
    z-index: 101;
  }
  #shopdesc{
    z-index: inherit;
    position:absolute;
    float:right;
    top:75vw;
    right:47.5vw;
    width:calc( 13vw * var(--sca) );
    background-image:url("../img/fancybox.png");
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    background-size:100% 100%;
    padding:calc( 1vw * var(--sca) );
    background-color:aliceblue;
    color:darkblue;
    font-family:Source Sans Variable;
    font-size: calc( 1vw * var(--sca) );
    line-height: calc( 1.5vw * var(--sca) );

  }
  #shopdetail{

    position:absolute;
    float:right;
    top:3vw;
    right:38vw;
    width:calc( 14vw * var(--sca) );
    color:#595651;
    background-image: url("../img/Word_Bubble_Tan.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: calc( 1vw * var(--sca) );
    font-family: Gadugi;
    font-size:calc( 1vw * var(--sca) );
    line-height: calc( 1.4vw * var(--sca) );

  }
  .smtableholder{
    line-height: 0;

    border-collapse:collapse

  }
  .shoppic{
    display: inline-block;
    position: absolute;
    width: inherit;
    height: inherit;
    float: right;
     z-index: 70;
      background-image:url("../img/shopantonfull.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position: right;
    background-size:200% 100%;
     
     
     
  }
  #smtable{
    position:absolute;
    float:left;
    width:var(--vw66);
    display:block;
    z-index: 10;
    line-height: 0;
    background-image:url("../img/shopantonfull.png");
        background-size:contain;
    background-repeat:no-repeat;
    background-position: left;
    background-size:200% 100%;
    
    

  }
  #shopbuy{
    display: inline-block;
    position: absolute;
    width: calc( 14vw * var(--sca) );
    height: calc( 5vw * var(--sca) );
    float: right;
    bottom:4vw;
    right:1vw;

  }
  .smtable {

    line-height: 0;

    border-collapse:collapse;
    position:relative;
    
    
    
    
  }
  .smtablea {
    display:inline-block;
    line-height: 0;

  }
  .smtable:hover {
    background-color: rgba(153,136,119,0.2);
    cursor: pointer;

  }
  .shopicon{
    width:var(--vw11);
    line-height: 0;

  }

  .shoptxt{
    font-size: 20px;
    bottom:-6px;
    position:absolute;
    color:blue;
  }
  #smpic{
   

  }
  .shoppicselect{
 background-position: left;
 z-index: 1;
  }






}*/