body > *{ caret-color: transparent; } /* bug fix */
input{ caret-color: white !important; }

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body{
    width:100%; height:100%;
    padding:0; margin:0;
    cursor: url('https://worldhatred.com/img/cursor/cursor32x32.png'), auto !important;
}

body{
    background-color:#111;
    font: 12pt "lato",arial, verdana;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #F2DAC3;
    letter-spacing: 1px;
    line-height:25px;
    text-shadow: 2px 2px 0 #333;

    /* text-shadow: -1px -1px 0 #23201D, -1px -1px 0 #23201D, -1px 0 0 #23201D, -1px 1px 0 #23201D, -1px 1px 0 #23201D, -1px -1px 0 #23201D, -1px -1px 0 #23201D, -1px 0 0 #23201D, -1px 1px 0 #23201D, -1px 1px 0 #23201D, 0 -1px 0 #23201D, 0 -1px 0 #23201D, 0 1px 0 #23201D, 0 1px 0 #23201D, 1px -1px 0 #23201D, 1px -1px 0 #23201D, 1px 0 0 #23201D, 1px 1px 0 #23201D, 1px 1px 0 #23201D, 1px -1px 0 #23201D, 1px 0 0 #23201D, 1px 1px 0 #23201D, 1px 1px 0 #23201D, 1px -1px 0 #23201D;*/
}

::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: #333; }
::-webkit-scrollbar-thumb { border: 2px solid #555; border-radius: 100px; background: #666; }
::-webkit-scrollbar-thumb:hover { background: #777; }

img{ border:0; }
p{ padding:3px; margin:0; }
h1,h2,h3,h4,h5{ font-family: bully, serif; margin:0; color:#FFF;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.9));
    -webkit-text-stroke: 1px #000; /* width and color */
/*text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; */
}

/*
a:link, a:active, a:visited{color: #CF2900; text-decoration: none; font-weight:400; font: 18px bahnschrift; }
a:hover{color: #CC9900; text-decoration: underline; font-weight:400; }
*/
a:link, a:active, a:visited{color: #F49B16; text-decoration: none; font-weight:400; font: 17pt bahnschrift; }
a:hover{color: #DFD0A3; text-decoration: none; font-weight:400; }

@font-face {
    font-family: 'rise';
    src: url('../fonts/rise.eot');
    src: url('../fonts/rise.eot?#iefix') format('embedded-opentype'),
    url('../fonts/rise.woff') format('woff'),
    url('../fonts/rise.ttf') format('truetype'),
    url('../fonts/rise.svg#rise') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {  font-family: 'consola';  src: url('../fonts/consola.ttf');  }
@font-face {  font-family: 'bully';  src: url('../fonts/stopbullying.ttf');  }
@font-face {  font-family: 'bahnschrift';  src: url('../fonts/bahnschrift.ttf');  }
@font-face {  font-family: 'matrix';  src: url('../fonts/Matrix-MZ4P.ttf');  }
@font-face {  font-family: 'titan';  src: url('../fonts/TitanOne-Regular.ttf');  }

/* HOVER OVER CURSOR */
a, button, .panels, .buttons{ cursor: url('https://worldhatred.com/img/cursor/glove32x32-2.png'), auto !important; }

/* HOVER OVER CURSOR */
a, button, .panels, .buttons{ cursor: url('https://worldhatred.com/img/cursor/glove32x32-2.png'), auto !important; }



/* COLORS */
.fff{ color:#FFF;  }
.bfff{ color:#FFF; font-weight: bold; }
.gray{ color:#8D8881; }
.dgray{ color:#666; }
.purp{ color: #A682BF; }
.dpurp{ color: #734891; }
.red{ color: #CF2900; }
.lred{ color: #fc0000; }
.blue{ color: #3F89D4; }
.lblue{ color: #66CCFF; }
.orng{ color: #8F412E; }
.green{ color: #1E9400; }
.lgreen{ color: #32A615; }
.dgreen{ color: #1A8300; }
.yel{ color: #CC9900; }
.black{ color: #000; }
.lbrown{ color: #c5a87a; }


/* FONT PROPERTIES */
.squish{ letter-spacing: 0; }
/* SIZES */
.biggest{ font-size: 2rem; }
.bigger{ font-size: 16pt; }
.big{ font-size: 15pt; }
.norm{ font-size: 14px; }
/* FONTS */
.bully{ font-family: bully, serif; font-weight: lighter; }
.bahns{ font-family: bahnschrift, serif; }
.rise{ font-family: rise, serif; font-weight: bolder; }
.matrix{ font-family: matrix, serif; font-weight: bolder; font-size: 24pt; letter-spacing: 10px; margin: 15px; }
.titan{font-family: titan, serif; }
/* SHADOWS */
.shadow{ text-shadow: 0 0 75px #000, 0 0 8px #000; }
.shadow2{ text-shadow: 0 2px 2px #000; }
/* Bright White Shadow */
.bright{ filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 1)); }
/* Flip Images */
.flipper img{-webkit-transform: scaleX(-1);transform: scaleX(-1); }
/* Hide Stuff */
.hide{ display: none; }

.boldShadow{
    /*padding-left:5px;*/
    text-align: center; font-size:20pt; pointer-events: none;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.9));
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-family: bahnschrift, serif;
}

/*** ALIGNMENT ***/
.mid{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.left{ text-align: left; }
.centerByMargin{
    margin-left: auto;
    margin-right: auto;
}

/* TOOLTIPS */
.tooltip { position: relative; }
.thetip {
    position: absolute; display: none; top:0; left:0;
    white-space:nowrap;
    color:#FFF; background-color: #000;
    border: 2px solid #333; border-radius: 7px;
    padding: 4px; margin:4px;
    z-index: 99999;
    font-size: 24pt;
}


/*** GAME PANELS ***/
.offclick{ }
#login{ margin-top:25px; min-width:400px; max-width:100%;  display:none; }
#panel{ width: 95%; max-width:450px; display:none; }
#logout, #build, #build_store{ display:none; }
#panel, #login, #logout, #build{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 100;
    max-height:500px;
    text-align: center; padding: 0;
}
#panel, #logout, #build{
    background-color:#35302A; filter: alpha(opacity=90);
    -moz-box-shadow:inset 0 0 20px #222220;  -webkit-box-shadow:inset 0 0 20px #222220;  box-shadow:inset 0 0 20px #222220;
    border: 15px solid transparent; border-image: url(../img/panel-border.png) 20 round; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

#panel h3{ position: absolute; top:-35px; }
#panel_opts{
    position: absolute; top:-35px; right:5px;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.9));
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}


/*** LOGIN PAGE ***/
img#login-logo{ position: absolute; top: -150px;
    margin-left: auto; margin-right: auto; left: 0; right: 0;
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
#copyright{ position: absolute; bottom: -50px; margin-left: auto; margin-right: auto; left: 0; right: 0;}
.login-panel{ padding-top: 75px; width:100%; }
.the_login{ display:table-cell; width:300px; }
#news_feed{ display:table-cell; width:400px; }

/*** FLEX TABLES ***/
#table{
    margin:0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

}
/* Options: Display Settings */
.flex1{ position: relative; flex: 15%;  }
.flex2{ flex: 80%;  }
/* Options: Display Settings */
.flex3{ position: relative; flex: 40%; }
.flex4{ flex: 55%; text-align:left; }

/* News Posts */
.flex5{  flex: 99%; }



/*** OPTIONS ***/
#the_options{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#the_options div{ flex: 1 0 33%; }
#the_options span{ position: relative; bottom:15px; color:#999; display: block; }

.buttons { position: relative; display: inline-block; }
.buttons img{ width:70px; height:70px; }
.buttons img.image-hover {
    position: absolute; top: 0;right: 0;left: 0; bottom: 0;
    object-fit: contain;
    opacity: 0;
}
.buttons:hover img.image-hover { opacity: 1; }
.buttons:hover img.image-main { opacity: 0; }

#avatars {
    height:224px;
    overflow:auto;
}
#opts_account, #opts_avatar, #opts_display, #opts_support, #opts_sound, #opts_reset{ display: none; }
#opts_sound > div{
    display:flex; flex-direction: row; justify-content: center; align-items: center;
              }

/*  MADE WITH */
#sponsors{
    z-index:3;
    display: flex; position: absolute; top:35px; right: 25px;
    font-size: 12px; }
#sponsors div{ flex: 1; margin:5px; }
#sponsors span{ position: absolute; left:15px; top:-25px; }
#sponsors a:hover { margin:0; padding:0; outline:1px solid #CF2900; }
#sponsors a img{ vertical-align:bottom; width: 50px; height: 50px; /* Need this to clear white-space */ }


/*  PRELOADER */
#sponsors{
    z-index:3;
    display: flex; position: absolute; bottom:25px; right: 25px;
    font-size: 12px; }
#sponsors div{ flex: 1; margin:5px; }
#sponsors span{ position: absolute; left:15px; top:-25px; }
#sponsors a:hover { margin:0; padding:0; outline:1px solid #CF2900; }
#sponsors a img{ vertical-align:bottom; /* Need this to clear white-space */ }


/*  START INTERFACE */
#top-left, #top-right, #bottom-left, #bottom-center, #bottom-right{ position: absolute; z-index: 2; padding:0; margin:0; }
#top-left{ left: 25px; } #top-right{ right:0; } #bottom-left{ left:5px; bottom:5px;  } #bottom-right{ right:0; bottom:0; }
#bottom-center {
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, 0);
    display: inline-flex;
}
#top-left > div{
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    border: 1px solid #000;
    padding-left: 25px;
    padding-right: 5px;
    margin: 10px 10px;
    font-family: bully, serif;
    color: #fff;
}
#top-left > * { display: inline-block; }

#top-left > div > span:before { content: attr(data-value); visibility: visible; }


div#top-left img{
    position: absolute;
    left: -15px; top: -5px;
}
#bottom-left img, #bottom-right img{
    display: inline-block;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.8));
}
/* MAIN BUTTONS: Bottom Right */
.mmenu { position: relative; display: inline-block; }
.mmenu img.image-hover {
    position: absolute; object-fit: contain; top: 0;right: 0;left: 0; bottom: 0;
    opacity: 0; transition: opacity .2s; }
.mmenu:hover img.image-hover { opacity: 1; }


/*  GAME  CONSOLE */
#chat_box{
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    border: 1px solid #000;
    padding: 15px;
    margin: 10px 20px;
    font-family: bully, serif;
    color: #fff;
    width:200px; height: 60px;
}


/*** STORED DATA ***/
#foodGen, #woodGen, #goldGen, #stoneGen, #onTile{ position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/*** UNIT TRAINING COUNTDOWN ICON ***/
input[type="submit"], #queUnit, .selUnit {
    width: 100%;
    height: 100%;
    border: 0;
    padding:0;
    margin: 0;
    /*background: url("https://worldhatred.com/img/units/villager.png") no-repeat ;*/
    background-size: 50px 50px;
}
#queUnit, .selUnit{
    /*padding-left:5px;*/
    text-align: center; font-size:20pt; pointer-events: none;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.9));
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-family: bahnschrift, serif;
}

.cooldown{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    overflow:hidden;
    opacity:0;
}
.cooldown-half{
    width:50%; height:100%;
    overflow:hidden;
    position:relative;
    float:left;
}
.cooldown-half-rotator{
    position:absolute;
    width:200%; height:200%; top:-50%;
    background-color:rgba(6,6,6,0.5);
}
.cooldown-half-rotator-right{ transform-origin:left center; }
.cooldown-half-rotator-left{ right:0; transform-origin:right center; }

.unit_amount{
    position:absolute;
    bottom:0;
    right:0;
    z-index:3;
    color:#FFF;
    font: 12pt bahnschrift, Arial, sans-serif;
}

.hps_stats{
   display: none;
}

.hps_bar{
    border: 1px black solid;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: black;
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: 0;
}
.unit_hps{
    background-color: red;
    height: 100%;
}

.dmg_in, .dmg_out{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.train_amount{
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    color:#999;
    font: 12pt bahnschrift, Arial, sans-serif;
}
/*** END UNIT TRAINER TIME ***/

.ripple {
    width: 10px;
    height: 10px;
    background-color: transparent;
    position: fixed;
    border-radius: 50%;
    border: 1px solid #66CCFF;
}

@keyframes ripple-effect { to {transform:scale(15);opacity: 0.01;}  }

.tracks{

    position: absolute;
    z-index:2; display: block; left:0; top:0;

}

/* Node Images & Sprites*/
.sprite{ position: absolute; right:21px;}
div.node{
    content: "";
    display: inline-flex;
    clear: both;
    position: absolute;
    z-index:3;
    /*filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.8));*/
}
img.node-icon{
    display: block;
    position: absolute;
    width:auto;  height:auto;
    margin: 45px 0 0 45px;
    z-index:3;
    /*filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.8));*/
}
img.node-img{
    position: relative;
    left: 0; top:0;
    transform: scale(1);
    transition: transform 250ms linear;
    width:auto;  height:auto;
    margin: 0;
    z-index:3;
}
img.tooltip-icon{ vertical-align:top; }
img.icon{ vertical-align: middle; }

.clock{ position: absolute; bottom: -15px; left:2px; margin: auto }


/* Attacking */
.attacking{
    position: absolute;
    left: -50px;
    top: -100px;
    width: 200px;
    z-index: 3;
}
/* Building Level */
.circleLvl {
    position: absolute;
    left:0; top:0;
    z-index:3;
    border-radius: 50%;
    width: 20px; height: 20px;
    padding: 2px; margin: auto;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #333;
    color: #FFF;
    text-align: center; justify-content: center; align-items: center;
    font: 14pt bahnschrift, Arial, sans-serif;
}

/* Icons above buildings, building level, training timers, units, etc */
.node-icons{
    position: absolute;
    left:50%; top: -25px;
    transform: translate(-50%, 0);
    z-index:5;
    display: inline-flex;
}
.training-icon {
    position: relative;
    width: 35px; height: 35px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #CCC;
    color: #FFF;
    text-align: center; justify-content: center; align-items: center;
    font: 12pt bahnschrift, Arial, sans-serif; }
.training-icon img{ width:100%; height:100%; }
.training-icon span{ position: absolute; bottom: -2px; right: 0; }

.box, .box2{
    position: relative;
    width: 60px;height: 45px;
    background-color: black;
    /* overflow: hidden; */
    padding: 0; margin: 0 2px;
    border: 2px solid #C8BAA0;
    border-radius: 6px;
    display: inline-block;


}
.enemy{
     border-color: red;
}


/* PLAYER AVATAR. TOP RIGHT STUFF */
#player_avatar {
    position: absolute;
    top: 2px; right:2px;
    text-align: center;
    border: 3px solid #000;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index:3;
}

#player_avatar img {
    width: 100%;
    height: auto;
}
#player_name{
    position: absolute;
    top: 10px; right: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    border: 1px solid #000;
    padding: 2px 25px 2px 15px;
    white-space: nowrap;
    font-size: 12px;
    font-family: bully, serif;
    color: #fff;
    z-index:2;
}
img#icn_options, img#icn_logout{
    position: absolute;
    top:75px;right:75px;
    z-index: 5;
    width:35px; height:35px;
    display: inline-block;
    -webkit-filter: drop-shadow(2px 2px 0 black)
    drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black)
    drop-shadow(-2px -2px 0 black);
}
img#icn_options{ top:45px;right:70px; }
img#icn_logout{ top:70px;right:50px; }
/* END PLAYER AVATAR. TOP RIGHT STUFF */


/* Unit Movements */
.maze{  width: 100%; height:100%; position: absolute;z-index:30;left:0;top:0; pointer-events: none; }
.walker{
    overflow: visible;
    width:51px;height:62px;
    position: absolute;
    z-index:30;
    margin:725px 0 0 1685px;
    /* OLD CSS; WHEN ANIMATED SPRITES DIDN'T EXIST
    overflow: hidden;
    border:2px solid #e5dac5;
    border-radius:12px;
    width:51px;height:62px;
    position: absolute;
    z-index:30;
    margin:775px 0 0 1700px;
    background-image: url('/img/units/villager.png');
     */
}
.totalPercentage{
    position: absolute;
    top: 10px; left: 0;
    z-index: 35;
}



/*****************************
 MOBILE CONVERSION
*****************************/

@media screen and (max-width: 760px) {

    #player_name{ display: none; }
    #sponsors{ display: none; }
    #news_feed{ display: none; }
}

@media screen and (max-width: 1250px) {
    #sponsors{ display: none; }
}