<!--



body { 



background-color: #080809;
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;

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;




}

* {
  -webkit-tap-highlight-color: rgba(255, 215, 33, 0.15); /* soft gold glow */
}

input[type="image"] {
  -webkit-tap-highlight-color: rgba(255, 215, 33, 0.15); /* soft gold glow */
}

/* Mobile scaling */
@media (max-width: 600px) {
    }

/* Container centering */
.form-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color:transparent !important;
}

/* Input styling */
input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 16px 18px;
    font-size: 1.2rem;
    border: 2px solid #444;
    border-radius: 14px;
    background: rgba(0,0,0,0.4);
    color: #444;
    box-sizing: border-box;
    margin-bottom: 18px;
}

/* Input focus */
input:focus {
    outline: none;
    border-color: #8ecbff;
    box-shadow: 0 0 8px #8ecbff;
    background: rgba(44,44,44,0.8);
}



h1 {
font-family: georgia;
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 12pt;
color: #cbcbce;
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%);
}


.splash {
  cursor : pointer;
  position : fixed;
  top : 50%;
  left : 50%;
  height : 100%;
  width : 100%;
  transform : translate(-50%,-50%);    
  background-color: rgba(0,0,0,0.8);
  
  


background-size: 100%;


margin:auto;

  transition : all ease-in-out 600ms;
  
  background-image: linear-gradient(to bottom, rgba(44,44,44,0.8), rgba(0,0,0,1),rgba(0,0,0,1));

  z-index:100001;
}

.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.4s;
  animation-duration: 0.4s;
  -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;
}

.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.65;
  }
 
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}




.jackpott {
font-family:the2K12;

}



.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.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: #d4d4d4;
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: #fda199;
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/darkbggg2.png);

border-bottom: thin solid #262116;

//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:8px;
}

//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;
}

-->