@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
/* ------------ STARTING BASE CSS RULES ----------------------------------------------- */

   
body {background: #1b1b1b; margin: 0; padding: 0; width: 100vw; height: 100vh;color: #ffffff;  font-size: 12pt; font-family: "Open Sans", sans-serif; font-weight: 400; position: relative; overflow: hidden;}



button {border: 0px; padding: 0; margin: 0; font-size: 12.5pt; } /* Change both font sizes if the base font size needs to be altered. */

p,ul,ol,li {line-height: 1.3em;}
ul ul {list-style-type: circle; margin: 5px 0;}
strong, b {font-weight: 700;}
i {font-style: italic;}



section {box-sizing: border-box;}
section:after {line-height: 0;} /*This was causing a 1px white space issue between 2 dark colors.  fix for core. */
div {box-sizing: border-box;}
img {max-width: 100%; height: auto;}

h1 {font-size: calc(16pt + 2.0vw); color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height:1.2em; margin: 10px 0 10px; text-transform: none;  }
h2 {font-size: calc(16pt + 1.8vw); color: #ffffff; font-family: 'Metal Mania', cursive; font-weight: 300; line-height:1.1em; margin: 10px 0; text-transform: none; letter-spacing: 2.5px;}
h3 {font-size: calc(16pt + .7vw); color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0; text-transform: none;}
h4 {font-size: calc(14pt + .6vw); color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}
h5 {font-size: calc(14pt + .5vw); color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}
h6 {font-size: calc(14pt + .4vw); color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}

p {margin: 1em 0;}
a, a:link, a:visited {color: #802640; transition: all 0.3s;}
a:hover, a:focus {color: #536441;}

/* Button Colors */
div.button {background: #802640; line-height: 1.2em; padding: 5px 10px; border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1;  display: inline-block; transition: all 0.3s; cursor: pointer; }
div.button:hover {background-color: #536441; }


a.button {background: #802640; border:1px solid #802640; color: #ffffff; font-size: 1em; font-weight: 600; padding: 14px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;}
a.button:hover {background-color: #536441; border-color: #536441; color: #ffffff; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

.inner {width: 100%; max-width: 1475px; box-sizing: border-box; padding: 10px 2%; margin: 0 auto;}
.imagewrapper {line-height: 0px;}

.noshow {display: none !important;}

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

::-webkit-scrollbar {width: 10px; height: 5px; background: rgba(0,0,0,0);}
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9);}
::-webkit-scrollbar-thumb {border-radius: 2px;  -webkit-box-shadow: inset 0 0 2px #1c1c1c; background: #c4ad03; }
/*  -------------- END OF BASE RULES ---------------------------------------------------  */

.bottom-border-silver {
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc); 
    border-image-slice: 1; 
}

.login.button {background: transparent; line-height: 1.2em; padding: 5px 10px; border: 1px solid; border-image: linear-gradient(to right,#9e9029, #fff976, #dcdcdc););  border-image-slice: 1;  display: inline-block; transition: all 0.3s;  cursor: pointer;}
.login.button:hover {background-color: #c4ad03; }

.keychain.button {background: transparent; line-height: 1.2em; padding: 5px 10px; border: 1px solid; border-image: linear-gradient(to right,#9e9029, #fff976, #dcdcdc););  border-image-slice: 1;  display: inline-block; transition: all 0.3s;  cursor: pointer;}
.keychain.button:hover {background-color: #c4ad03; }



#modalClickBlocker {background: transparent; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;z-index: 999; opacity: 1}
#modal {background: rgba(0,0,0,.9); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); height: calc(100% - 40px); padding: 40px; opacity: 1; display: flex; justify-content: space-around; align-items: center; z-index: 1000; transition: all .7s;  box-sizing: border-box;}
#modal .contentbox {min-width: 600px; max-width: 90%;padding: 15px 20px; background: transparent; font-size: 12pt; transition: all .5s;}
#modal .closemodal.button {position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; justify-content: space-around; align-items: center; transition: all 0.3s; border-radius: 4px; background: rgba(255,0,0,.5); color: #ffffff; cursor: ponter !important;}
#modal .closemodal.button:hover {background-color: red; cursor: pointer;}
#modalClickBlocker.hidden {opacity: 0 !important; width: 0; height: 0; overflow: hidden; z-index: -101;}
#modal.hidden {opacity: 0 !important; width: 0; height: 0; overflow: hidden; z-index: -100; }
#modal.hidden .contentbox {font-size: 0; min-width: 0;}



#modal .contentbox .titlebox {font-family: 'Metal Mania', cursive; font-size: 32px; width: 100%; margin: -15px 0 20px; padding: 20px ; text-align: center;}

#modal .contentbox .titlebox.yellow {    
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #c4ad03 30%, #c4ad03 70%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#c4ad03 30%,#c4ad03 70%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#c4ad03 30%,#c4ad03 70%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}

#modal .contentbox .titlebox.red {    
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #bc2528 30%, #bc2528 70%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#bc2528 30%,#bc2528 70%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#bc2528 30%,#bc2528 70%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}

#modal .contentbox .titlebox.green {  margin: 0;  width: 100%; padding: 20px 0;
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(left,  #000000 0%, #1d921f 30%, #1d921f 70%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #000000 0%,#1d921f 30%,#1d921f 70%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #000000 0%,#1d921f 30%,#1d921f 70%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}


#modal .contentbox .textbox {margin-bottom: 20px;}
#modal .contentbox .getkeychain {display: flex; justify-content: flex-start; align-items: center; font-size: 32px; font-weight: 600;}
#modal .contentbox .getkeychain span { margin-left: 15px; }

#modal .contentbox input {font-size: 16px; padding: 5px; box-sizing: border-box; font-weight: 700; margin-right: 10px;}
#modal .contentbox a {color: #c4ad03; text-decoration: none; font-weight: 700;}
#modal .contentbox a:hover {text-decoration: none; color: #ffffff;}
#modal .contentbox .note {margin-top: 20px; color: #c4ad03; font-weight: 700;  }





#tooltip {transition: all 0.3s;}
#bodyunderlay {width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: -1;}
#main {padding: 1px;}



#menubar {height: 50px; width: 100%; padding: 5px 10px; position: relative; background: transparent; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
/*#menubar .control.exit {justify-self: flex-start;}*/
#menubar h2 {font-size: 32px; line-height: 0; margin: 0 20px 0 0; }
#menubar #accountname {background: #1b1b1b; line-height: 1.2em; padding: 5px 10px; border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1;  display: inline-block; transition: all 0.3s; cursor: pointer; }

#content {height: calc(100vh - 60px); width: 100vw;display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; position: relative;} 





#content .topside {background: #1b1b1b; width: 100%; position: absolute; top: 0; transform: translateY(calc(0px - 100% - 60px)); left: 0; height: calc(100vh - 50px - 20px); width: calc(100% - 400px - 40px);  margin: 10px;  border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1; transition: all 1s; linerheight: 0; box-sizing: border-box;}
#content .topside.show {transform: translateY(0);}
#content .topside .inner {max-width: 100%; width: 100%; height: 100%; padding: 0; margin: 0;line-height: 0; box-sizing: border-box; overflow: hidden; position: relative;}





#content .leftside {position: absolute; transform: translateX(calc(0px - 100% - 22px)); left: 0; width: calc(100% - 400px - 40px);  margin: 10px;  border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1; transition: all 1s;}
#content .leftside.show {transform: translateX(0);}
#content .leftside .inner {padding: 10px; max-width: 100%;}


#content .rightside {position: absolute; right: 0; transform: translateX(calc(100% + 22px)) ;width: 400px; margin: 10px;  border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1; transition: all 1s;}
#content .rightside.show {transform: translateX(0);}
#content .rightside .inner {padding: 10px; max-width: 100%;}
#content .rightside .titlebar {background: #1b1b1b; color: #c4ad03; padding: 5px 10px; font-weight: 700; text-align: center; text-transform: uppercase; border-bottom: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1;}

#content .rightside .gamerow {display: flex; justify-content: flex-start; align-items: center; font-size: 14px;}
#content .rightside .gamerow .hash {display: inline-block; color: orange;margin-right: 15px; font-weight: bold;}
#content .rightside .gamerow .ign {display: inline-block; color: yellow;margin-right: 15px;}
#content .rightside .gamerow .joingame {background: white; color: #1b1b1b; display: inline-block; padding: 3px 12px;; border-radius: 20px; text-transform: uppercase; font-size: 12px; transition: all 0.3s; cursor: pointer;}
#content .rightside .gamerow .joingame:hover {background: green; color: white;}


#content .devconsole {position: absolute; right: 0; transform: translateX(calc(100% + 22px)) ;width: 400px; margin: 10px;  border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1; transition: all 1s;}
#content .devconsole.show {transform: translateX(0);}
#content .devconsole .inner {padding: 10px; max-width: 100%;}
#content .devconsole .titlebar {background: #1b1b1b; color: #c4ad03; padding: 5px 10px; font-weight: 700; text-align: center; text-transform: uppercase; border-bottom: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1;}




#content .bottomside {position: absolute; transform: translateY(calc(100% + 44px)); bottom: 0; width: calc(100% - 22px);  margin: 10px;  border: 1px solid; border-image: linear-gradient(to right, #dcdcdc, #404040, #dcdcdc);  border-image-slice: 1; overflow: hidden; transition: all 1s; box-sizing: border-box;}
#content .bottomside.show {transform: translateY(0); }
#content .bottomside .controlbar {width: 100%; height: 40px; padding: 0 5px;background: rgba(0,0,0,.7); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#content .bottomside .controlbar .setting {width: 32px; height: 32px; margin: 0 5px; background: #000000; color: #404040; border: 1px solid #404040; font-size: 18px; display: flex; justify-content: space-around; align-items: center; transition: all 0.3s; border-radius: 5px;cursor: pointer;}
#content .bottomside .controlbar .setting i {display: inline-block line-height: 0;}
#content .bottomside .controlbar .setting.active {border-color: #ffffff; background: rgba(0,255,0,1); color: #000000;}
#content .bottomside .controlbar .setting:hover {background: rgba(255,255,0,1); color: #000000;}

#content .bottomside .inner {padding: 10px; max-width: 100%;  height: 360px; overflow-y: scroll; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; transition: all 1s; }
#content .bottomside.show.expand .inner {height: calc(100vh - 120px);}


#content .inner > h2 {width: 100%; text-align: center;}
#content .seasonbox {margin-top: 20px; width: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#content .seasonbox .centerbox {min-width: 400px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#content .seasonbox .centerbox .imagewrapper {display: inline-block; margin-right: 20px;}
#content .seasonbox .centerbox .title {display: inline-block; font-family: 'Metal Mania', cursive; font-size: 28px; letter-spacing: 1.5px;}
#content .seasonbox .centerbox .title span { font-family: 'Open Sans', sans-serif; font-weight: 700; color: #c4ad03;}




/* Map Tiles */
#content .topside .inner .layer.base {max-width: 100%; width: 100%; height: 100%; padding: 0; margin: 0;line-height: 0; box-sizing: border-box; position: relative;}
#content .topside .inner .layer.base .tile {position: relative;}
/*#content .topside .inner .layer.base .tile:after {content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(80,0,0,0); transition: all 0.2s;}
#content .topside .inner .layer.base .tile:hover:after {background-color: rgba(80,0,0,.4)}*/
#content .topside .inner .layer.base .tile.G {background: green url("/img/tiles/grass.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.M {background: tan url("/img/tiles/mountain.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.Sand {background: tan url("/img/tiles/sand.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.Water {background: darkblue url("/img/tiles/water.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.River {background: darkblue url("/img/tiles/water.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.Forest {background: darkgreen url("/img/tiles/forest.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.Fire {background: red url("/img/tiles/fire.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.LavaRed {background: darkred url("/img/tiles/lavared.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.LavaBlue {background: darkblue url("/img/tiles/lavablue.jpg") no-repeat center center; background-size: cover;}
#content .topside .inner .layer.base .tile.LavaGreen {background: darkblue url("/img/tiles/lavagreen.jpg") no-repeat center center; background-size: cover;}




#content .topside .inner .layer.hero {max-width: 100%; width: 100%; height: 100%; padding: 0; margin: 0;line-height: 0; box-sizing: border-box; position: absolute; top: 0; left: 0;}
#content .topside .inner .layer.hero .tile.human {background: transparent; }

#content .topside .inner .layer.hero .tile.human .troopcard {margin: 0; border: 0px;}
/*#content .topside .inner .layer.hero .tile.hero .imagewrapper > .locked {display: none;}
#content .topside .inner .layer.hero .tile.hero .imagewrapper > .underlay {display: none;}*/

#content .topside .inner .layer.hero .tile.human .overlay {position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; text-align: center; font-size: 10px;}
#content .topside .inner .layer.hero .tile.human .overlay .xval {width: 50%; text-align:center; line-height: 1em;}
#content .topside .inner .layer.hero .tile.human .overlay .yval {width: 50%; text-align:center; line-height: 1em;}