<!--

html {
height:100%;
margin:0px;
background-size: cover;
background-repeat:repeat-y;

}

.fade-outtt {
  opacity: 0;
  transition: opacity 2.25s ease-out;
}

.hover-image { position: relative; display: inline-block;
}
.hover-image img { display: block;

}
.hover-popup { position: absolute;
  top: 195px;
  right: -29px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;  transition-delay: 0.7s;
  transform: translate(10px, -10px);
  pointer-events: none;
  z-index:9000;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 1.0),0px 0px 18px rgba(0, 0, 0, 1.0);
}
.hover-image:hover .hover-popup { opacity: 1.0; transform: translate(10px, -10px);
position:absolute;
}

.splotch {
    position: absolute;
 overflow: hidden;

  z-index:-1;
    width: 108px;
    height: 100px;
    /rotate:-5deg;
    
    background-color: rgba(0, 0, 0, 0);
    background-repeat:no-repeat;

}

.bubble {
    position: absolute;
    bottom: -50px;
  right:-30px;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise 5s infinite, wiggle 1s infinite;
  opacity: 30%;
}

.bubble1 {
    position: absolute;
    bottom: -50px;
    right:-40px;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise 6s infinite, wiggle 1.6s infinite;
   opacity: 18%;
}

.bubble2 {
    position: absolute;
    bottom: -50px;
    right:-50px;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise 4s infinite, wiggle 0.5s infinite;
   opacity: 12%;
}

.bubble3 {
    position: absolute;
    bottom: -50px;
    right:-60px;
    width: 7px;
    height: 7px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise 5s infinite, wiggle 1.4s infinite;
   opacity: 15%;
}

.bubble4 {
    position: absolute;
    bottom: -50px;
  right:-70px;
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise 6s infinite, wiggle 1.1s infinite;
   opacity: 13%;
}


.bubblee {
    position: relative;
    bottom: -500px;

    width: 17px;
    height: 22px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise2 12s infinite, wiggle 1s infinite;
    animation-delay: 2s;
  opacity: 3%;
}

.bubble11 {
    position: relative;
    bottom: -500px;
    
    width: 10px;
    height: 13px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise2 14s infinite, wiggle 1.6s infinite;
   opacity: 2%;
}

.bubble22 {
    position: relative;
   bottom: -500px;
    
    width: 18px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise2 12.5s infinite, wiggle 0.5s infinite;
    animation-delay: 1s;
   opacity: 4%;
}

.bubble33 {
    position: relative;
   bottom: -500px;
   
    width: 29px;
    height: 39px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise2 12.75s infinite, wiggle 0.4s infinite;
    animation-delay: 1.5s;
   opacity: 3%;
}

.bubble44 {
    position: relative;
    bottom: -500px;
  
    width: 24px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: rise2 12.25s infinite, wiggle 0.5s infinite;
    animation-delay: 2.4s;
   opacity: 2%;
}

@keyframes rise2 {
    0% {
        bottom: 70px;
        right:-85px;
        opacity: 0.02;
    }
    100% {
        bottom: 462px;
        right:-85px;
        opacity: 0.0;
    }
}

@keyframes rise {
    0% {
        bottom: -50px;
        opacity: 0;
    }
    100% {
        bottom: 478px;
        opacity: 0.4;
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
}


@keyframes bglighteffects {
    0% {
        opacity:100%;
    }

    6% {
        opacity:97%;
    }
     12% {
        opacity:95%;
    }
     18% {
        opacity:96%;
    }
   
    24% {
        opacity:100%;
    }
   
   
    30% {
        opacity:97%;
    }
     36% {
        opacity:94%;
    }
     43% {
        opacity:97%;
    }
   
    50% {
        opacity:100%;
    }


 56% {
        opacity:97%;
    }
     63% {
        opacity:95%;
    }
     69% {
        opacity:96%;
    }
   
    75% {
        opacity:99%;
    }


 82% {
        opacity:97%;
    }
     88% {
        opacity:95%;
    }
     94% {
        opacity:98%;
    }
   
    100% {
        opacity:99%;
    }

   
   }


@keyframes swim {
            0% {
                transform: translate(20vw, 4vh) scaleX(-1.02) scaleY(1.00);
            }
            10% {
                transform: translate(20px, 10px) scaleX(1.03) scaleY(1.04);
            }
            15% {
                transform: translate(40px, -5px) scaleX(1.08) scaleY(1.03);
                opacity:85%;
            }
             20% {
                transform: translate(43px, -6px) scaleX(1.05) scaleY(1.06);
            }

            30% {
                transform: translate(60px, 15px) scaleX(1.01) scaleY(1.02);
            }
            38% {
                transform: translate(80px, 0) scaleX(1) scaleY(1.04);
            }
            50% {
                transform: translate(100px, 10px) scaleX(1.02) scaleY(1.03);
            }
            51% {
                transform: translate(100px, 10px) scaleX(-1.04);
            }
            60% {
                transform: translate(20vw, -3vh) scaleX(-1.02);
                opacity:95%;
            }
             62% {
                transform: translate(-20vw, 4vh) scaleX(-1.02) scaleY(1.05);
            }
            65% {
                transform: translate(25vw, 5vh) scaleX(-1.07);
            }
            67% {
                transform: translate(60vw, 4vh) scaleX(-1.08) scaleY(1.00);
                opacity:100%;
            }

74% {
                transform: translate(60vw, 3vh) scaleX(-1.07);
            }

            85% {
                transform: translate(40vw, 0vh) scaleX(1.03);
            }
            88% {
                transform: translate(20vw, 0) scaleX(1.01);
                opacity:90%;
            }
            100% {
                transform: translate(0, 10vh) scaleX(1);
            }
        }
        
        
        @keyframes swim2 {
            0% {
                transform: translate(20vw, 4vh) scaleX(1.01);
            }
            5% {
                transform: translate(20px, 1vh) scaleX(1.03);
                opacity:100%;
            }
            18% {
                transform: translate(40px, -1vh) scaleX(1.17);
            }
             23% {
                transform: translate(73px, -1.2vh) scaleX(1.04);
            }

            32% {
                transform: translate(60px, 150px) scaleX(0.2);
            }
            38% {
                transform: translate(80px, 0) scaleX(-1);
            }
            48% {
                transform: translate(72px, 100px) scaleX(-0.5);
            }
            50% {
                transform: translate(100px, 150px) scaleX(1.03);
                opacity:90%;
            }
            51% {
                transform: translate(3vw, -1.5vh) scaleX(1.02);
            }
             65% {
                transform: translate(-2vw, 2vh) scaleX(1.05);
                opacity:100%;
            }
            75% {
                transform: translate(12vw, 2vh) scaleX(1.04);
            }
            87% {
                transform: translate(11vw, 2.5vh) scaleX(-1.18);
            }

88% {
                transform: translate(10vw, 0.5vh) scaleX(0.7);
            }

            89% {
                transform: translate(4vw, 0.4vh) scaleX(1.03);
            }
            98% {
                transform: translate(2vw, 0.2) scaleX(0.57);
            }
            100% {
                transform: translate(0, 2vh) scaleX(1);
            }
        }
        
         @keyframes swim3 {
            0% {
                transform: translate(2vw, 2vh) scaleX(1.04);
                opacity:95%;
            }
            100% {
                transform: translate(-2vw, -1vh) scaleX(0.75);
                opacity:90%;
            }
            }
            
            
             @keyframes swim4 {
            0% {
                transform: translate(2vw, 1vh) scaleX(1.04);
                opacity:100%;
            }
             20% {
                transform: translate(-1vw, -1vh) scaleX(1.00);
            }
            70% {
                transform: translate(4vw, 4vh) scaleX(1.07);
                opacity:92%;
            }
            100% {
                transform: translate(-4vw, -1.5vh) scaleX(0.8);
            }
            }
            
            
            
            @keyframes swim5 {
    0% {
        transform: translate(10vw, 2vh) scaleX(-1.02) scaleY(1.00);
    }
    20% {
        transform: translate(10px, 5px) scaleX(1.03) scaleY(1.14);
        opacity:90%;
    }
    40% {
        transform: translate(20px, -2px) scaleX(1.08) scaleY(1.03);
    }
    60% {
        transform: translate(30px, 7px) scaleX(1.05) scaleY(1.06);
        opacity:95%;
    }
    80% {
        transform: translate(40px, 3px) scaleX(1.11) scaleY(1.02);
    }
    100% {
        transform: translate(50px, 5px) scaleX(1) scaleY(1.04);
    }
}

@keyframes swim6 {
    0% {
        transform: translate(30vw, 6vh) scaleX(-1.02) scaleY(1.00);
    }
    10% {
        transform: translate(30px, 15px) scaleX(1.03) scaleY(1.04);
        opacity:90%;
    }
    20% {
        transform: translate(60px, -10px) scaleX(1.08) scaleY(1.03);
    }
    30% {
        transform: translate(90px, 20px) scaleX(1.15) scaleY(1.06);
    }
    40% {
        transform: translate(120px, 10px) scaleX(1.01) scaleY(1.02);
    }
    50% {
        transform: translate(150px, 15px) scaleX(1) scaleY(1.04);
        opacity:75%;
    }
    60% {
        transform: translate(180px, 5px) scaleX(1.02) scaleY(1.13);
    }
    70% {
        transform: translate(210px, 10px) scaleX(-1.04);
        opacity:80%;
    }
    80% {
        transform: translate(240px, -5px) scaleX(-1.02);
        opacity:100%;
    }
    90% {
        transform: translate(270px, 0) scaleX(-1.02) scaleY(1.05);
        
       opacity:85%;
    }
    100% {
        transform: translate(300px, 5px) scaleX(-1.07);
    }
}

@keyframes swim7 {
    0% {
        transform: translate(20vw, 4vh) scaleX(-1.02) scaleY(1.00);
    }
    10% {
        transform: translate(20px, 10px) scaleX(1.03) scaleY(1.04);
    }
    20% {
        transform: translate(40px, -5px) scaleX(1.08) scaleY(1.03);
    }
    30% {
        transform: translate(60px, 15px) scaleX(1.05) scaleY(1.06);
        
    }
    40% {
        transform: translate(80px, -10px) scaleX(1.01) scaleY(1.02);
    }
    50% {
        transform: translate(100px, 20px) scaleX(1) scaleY(1.04);
        opacity:95%;
    }
    60% {
        transform: translate(120px, -15px) scaleX(1.02) scaleY(1.03);
    }
    70% {
        transform: translate(140px, 25px) scaleX(-1.04);
        
    }
    80% {
        transform: translate(160px, -20px) scaleX(-1.02);
        opacity:85%;
    }
    90% {
        transform: translate(180px, 30px) scaleX(-1.02) scaleY(1.05);
    }
    100% {
        transform: translate(200px, -25px) scaleX(-0.66);
    }
}



body { 
/* background-color: #080809; */
background-color: #151C22;
transform: scaleY(1.00);
transform-origin:top;
filter: contrast(94%)saturate(78%)brightness(95%)hue-rotate(3deg);
background-image:url('https://valorquest.net/valorquest/images/tinybgtreecity.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
  height: auto; /* Let content define height */
margin:0px;

 font-family: Georgia, serif;

  /* Preferred modern approach */
  font-variant-numeric: lining-nums;

  /* Fallback for browsers that don’t support font-variant-numeric */
  font-feature-settings: "lnum" 1;

  /* Extra fallback: some browsers need vendor prefixes */
  -moz-font-feature-settings: "lnum" 1;
  -webkit-font-feature-settings: "lnum" 1;

overscroll-behavior-y: contain;

}

* {
  -webkit-tap-highlight-color: rgba(255, 215, 33, 0.15); /* soft gold glow */
}



@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(0.2,0.2);
     opacity:100%;
    }
    
        30% {
        transform: scale(0.25,0.25);
         opacity:100%;
    }

    99% {
        transform: scale(20,20);
         opacity:0%;
    }
     100% {
        transform: scale(0,0);
        opacity:0%;
    }
}

.cardcontainer img {
	animation: zoominoutsinglefeatured 8s forwards;
}



.splash {
  width: 100%;      /* full viewport width */
  height: 100%;     /* full viewport height */
  cursor: pointer;
  position: fixed;   /* lock to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;         /* cover all edges */
  background-color: rgba(0,0,0,0.0); /* semi-transparent overlay */

   text-align:center;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.9),rgba(0,0,0,0.9),rgba(0,0,0,0.9),rgba(0,0,0,0.9),rgba(0,0,0,0));
  z-index: 9999;     /* make sure it sits on top of other content */
    transition : all ease-in-out 1500ms;
}




.hidden {
  transition : 0.5s;
  height: 100%;
  display : none;
}

.splash-header {
  height : 90%;
  color : white;
  font-family : consolas;
  font-size : 30px;
  display : flex;
  justify-content: center;
  align-items : center;
}



.btn {
/*   border : none; */
/*   padding : 10px; */
/*   position : fixed; */
  z-index : 10001;
  left : 50%;
  transform : translateX(-50%);
}



@font-face {
    font-family: 'disco_blingregular';
    src: url('discoblingregular-mjgj.woff2') format('woff2'),
         url('discoblingregular-mjgj.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lilyupc';
    src: url('lilyupc.woff2') format('woff2'),
         url('lilyupc.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

.animate {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animatesl {
  -webkit-animation-duration: 1.0s;
  animation-duration: 1.0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animatemon {
  -webkit-animation-duration: 1.0s;
  animation-duration: 1.0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animateslx {
  -webkit-animation-duration: 6.5s;
  animation-duration: 6.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.one {

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}


.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}





@keyframes fadeInm {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}


.fadeInm {
  -webkit-animation-name: fadeInm;
  animation-name: fadeInm;
}








@keyframes spinFade {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes spinFade {
  0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 1; }
}


@-moz-keyframes spinFade {
  0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 1; }
}


@-ms-keyframes spinFade {
  0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 1; }
}


 @-o-keyframes spinFade {
  0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 1; }
}


@keyframes spinFade {
  0% { opacity: 0; }
    50% { opacity: 0; }
  100% { opacity: 1; }
}



.text {
        position:relative;
        line-height:2em;
        overflow:hidden;
    }
    .fadingEffect {
        position:absolute;
        top:0; bottom:0; right:0;
        width:100%;
        background:#000000;
        -moz-animation: showHide 7s ease-in normal; /* Firefox */
          -edge-animation: showHide 7s ease-in normal; /* Firefox */
        -webkit-animation: showHide 7s ease-in normal; /* Safari and Chrome */
        -ms-animation: showHide 7s ease-in normal; /* IE10 */
        -o-animation: showHide 7s ease-in normal; /* Opera */
        animation: showHide 7s ease-in normal;
        animation-iteration-count:1;
  animation-fill-mode: forwards;

    }
    @-webkit-keyframes showHide { /* Chrome, Safari */
        0% {width:100%}
        10% {width:85%}
          20% {width:60%}
        40% {width:20%}
        60% {width:0%;}
        100% {width:0%;}
    }
    @-moz-keyframes showHide { /* FF */
        0% {width:100%}
        10% {width:85%}
         20% {width:60%}
        40% {width:20%}
        60% {width:0%;}
        100% {width:0%;}
    }
    @-ms-keyframes showHide { /* IE10 */
        0% {width:100%}
        10% {width:85%}
         20% {width:60%}
        40% {width:20%}
        60% {width:0%;}
        100% {width:0%;}
    }
    @-o-keyframes showHide { /* Opera */
        0% {width:100%}
        10% {width:85%}
         20% {width:60%}
        40% {width:20%}
        60% {width:0%;}
        100% {width:0%;}
    }
    @keyframes showHide {
           0% {width:100%}
           10% {width:85%}
            20% {width:60%}
        40% {width:20%}
        60% {width:0%;}
        100% {width:0%;}
    }

button {
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
font-size: 10pt;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 1px rgb(0 0 0 / 85%), 1px 1px 2px rgb(254 254 253 / 15%);
 text-decoration: underline;
}

button.left {
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
font-size: 12pt;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 1px rgb(0 0 0 / 85%), 1px 1px 2px rgb(254 254 253 / 15%);
 text-decoration: underline;
}



button.leftuc {
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #fd6159;
font-size: 12pt;
background-image: linear-gradient(to top, rgba(33,11,11,0.9), rgba(92,22,22,0.1),rgba(22,22,22,0.2),rgba(22,22,22,0.2),rgba(22,92,22,0.1),  rgba(11,33,11,0.8) );
 
text-shadow: 1px 1px 6px rgb(0 0 0 / 70%), 1px 1px 1px rgb(0 0 0 / 85%), 1px 1px 2px rgb(0 0 0 / 15%);

 text-decoration: underline;
}


button.leftu {
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #d69f50;
font-size: 12pt;
background-image: linear-gradient(to top, rgba(33,11,11,0.9), rgba(92,22,22,0.1),rgba(22,22,22,0.2),rgba(22,22,22,0.2),rgba(22,92,22,0.1),  rgba(11,33,11,0.8) );
 
text-shadow: 1px 1px 6px rgb(0 0 0 / 70%), 1px 1px 1px rgb(0 0 0 / 85%), 1px 1px 2px rgb(0 0 0 / 15%);

 text-decoration: underline;
}

button.admin {
  background: none;
  border: none;
  padding: 0;
 
  cursor: pointer;
  font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #ff3333;
font-size: 12pt;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 1px rgb(0 0 0 / 85%), 1px 1px 2px rgb(254 254 253 / 15%);
 text-decoration: underline;
}

.button:hover{background-color:transparent; color: #ffbc6e;}
.button:focus{background-color:transparent; color: #ffbc6e;}
.button:focus{border:0px solid #080809; border-color: #080809; border: none; color: #e3bc6e;}
.button:active{border:0px solid #080809; border-color: #080809; border: none;color: #c39c4e;}


 

.fishes
	{
		position:relative;
		top: 0px;
		left: 0px;
		z-index: 2;
		
	}
	.fish
	{
		position:relative;
		top: 0px;
		left: 0px;
		z-index: 999;
	}

A:link { 
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
background-color: transparent;

}

A:visited {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
background-color: transparent;

}

A:hover {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
background-color: transparent;

}

A:active {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
color: #c39c4e;
background-color: transparent;
}

.eqfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 14pt;
color: #fefefe;
line-height: 1.4;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}


.mainfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 12pt;
color: #eeeeee;
line-height: 1.4;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}


.mainfontbigger {
font-family: georgia;
font-style: normal;
font-variant: normal;
/font-weight: 400;
font-size: 13pt;
color: #eeeeee;
line-height: 1.3;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.greytfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 11pt;
color: #aaaaaa;
line-height: 1.4;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}


.bmainfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 13pt;
color: #edd0a7;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}




.narrow {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 11pt;
color: #edd0a7;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}


.smallfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 10pt;
color: #edd0a7;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}



.smallfontt {
font-family: georgia narrow, georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 10pt;
color: #168015;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}


.bigfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 13pt;
color: #fcfcfc;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.bbigfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 18pt;
color: #eeeeee;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.health {

font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #fd6159;
background-color: transparent;

}
.healthmob {

font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #fbb369;
background-color: transparent;

}

.health2 {

font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #fd6159;
background-color: transparent;

}

.health3 {

font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #fd6159;
background-color: transparent;

}

.bolded {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 13pt;
color: #c49b4e;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.sta2 {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #6b99ec;
background-color: transparent;

}

.stamina {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #6b99ec;
background-color: transparent;

}

.valor {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #f3f2f2;
background-color: transparent;

}

.gold {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #cbb369;
background-color: transparent;
}


.name {

font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 16pt;
color: #fefefe;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}



.level {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 12pt;
color: #d3ac6e;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.title {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 16pt;
color: #c39c4e;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}



.smallgold {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 9pt;
color: #bfb490;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.subtitle {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 12pt;
color: #c39c4e;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.blanktitle {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 14pt;
color: #c39c4e;
background-color: transparent;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
}

.bigformxxx {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 14pt;
color: #111111;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
//background-color: #111111;
//border: 1px solid #686868;
}

.bbigfont {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 700;
font-size: 13pt;
color: #c39c4e;
text-shadow: 1px 1px 2px rgb(128 128 128 / 30%), 1px 1px 2px rgb(0 0 0 / 25%), 1px 1px 2px rgb(254 254 253 / 15%);
background-color: transparent;
}



.tdbg {

background: url(https://valorquest.net/valorquest/images/darkbg.png);
border: 1px solid #5d5940;

}

.tdbgg {

background: url(https://valorquest.net/valorquest/images/darkbg.png);
border: 1px none #7e776b;

}

.tdbga {

background: url(https://valorquest.net/valorquest/images/darkbg.png);
border: 1px none #7e776b;

}

.nobreak {
white-space:nowrap;
}

.dform {
display: inline;
}

.formatts {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 10pt;
//color: #080809;
//background-color: #eeeeee;
width: 180px;
}

//input:focus,hover {
      background-color: #e8e8e8;
      border-color: #c39c4e;
      border-width: 2px;
}

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#82ff82;
}
	
.LV_invalid {
    color:#ff8282;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 2px solid #82ff82;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 2px solid #ff8282;
}


.sr-only {
  position: absolute;
  top: -30em;
}



table.sortable th {
  font-weight: bold;
  border-bottom: thin solid #888;
  position: relative;
}



table.sortable th:nth-child(5) {
  //width: 10em;
}

table.sortable th button {
  position: absolute;
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;

  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort="descending"] span::after {
content: url(https://valorquest.net/valorquest/images/downarrow.png);
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: url(https://valorquest.net/valorquest/images/uparrow.png);
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
content: url(https://valorquest.net/valorquest/images/botharrows.png);
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: left;
}





/* Focus and hover styling */

table.sortable th button:focus,
table.sortable th button:hover {
  //padding: 2px;
 /// border: 2px solid currentcolor;
  background-color: #080809;
}

tr.ranks:focus,
tr.ranks:hover {
 // padding: 2px;
 /// border: 2px solid currentcolor;
  background-color: #282828;
  padding:4px;
}

//table.sortable tbody tr:nth-child(odd) {
   //background-color: #111111;
//}

table.sortable tbody tr:nth-child(odd) {
   //background-color: #111111;
}

table.sortable th button:focus span,
table.sortable th button:hover span {
 // right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: url(https://valorquest.net/valorquest/images/botharrows.png);
  //color: currentcolor;
  font-size: 100%;
  top: 0;
}




* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

input[type="text"],
input[type="email"],
input[type="password"],

textarea {
  background-color: white;
  color: black;
}



-->