/* 
TODO: remove all unused classes (ctrl-f across all files,
if it's not found, remove)
 */

.message {
background-color:rgba(255, 255, 255, 0.65);
padding:15px;
max-width:400px;
position:relative;
font-size:28px;
font-weight:900;
}
.OKButton {
padding:15px;
font-size:20px;
font-weight:900;
position:relative;
background-color:rgb(255, 95, 95);
cursor:pointer;
}
.button {
	border:2px solid;
}
.upgradeButton {
    border:2px solid;
    border-radius:8px;
    width:90%;
    margin-bottom:3px;
    padding:5px;
    min-width:247px;
    line-height:14px;
    cursor:pointer;
}
.buyButton:not(.nohover):hover, .buySpawnRate:hover, .upgradePointBox:hover , .button:not(.nohover):hover  {
background-color:yellow;
cursor:pointer;
}
.buyPlaceAmount {
width:196px;
position:relative;
height:34px;
}
.placeBuyCost {
position:absolute;
right:5px;
top:5px;
}
.placeBuyLabel {
position:absolute;
left:5px;
top:5px;
}
.upgradePoints {
right:10px;
top:7px;
color:teal;
position:absolute;
}
.buyButton {
width:100%;
height:45px;
position:relative;
}
.buyName {
font-size:14px;
position:absolute;
left:53px;
top:22px;
}
.icon {
position:absolute;
left:8px;
top:8px;
width:40px;
height:40px;
}
.costBox {
  position: absolute;
  top: 6px;
  right: 6px;
}
.goldIcon {
height: 18px;
  width: 11px;
  background-color: rgb(173, 161, 42);
  border-radius: 50%;

}
.upgradePointBox {
width:100%;
height:50px;
position:relative;
}
.buyIncreaseAmount {
  right: 6px;
  top: 23px;
  position: absolute;
  color: black;
}
.buyVal {
  left: 52px;
  top: 4px;
  position: absolute;
  color: black;
  font-size: 16px;
}
.buyCount {
    float:right;
    color:red;
    font-size:20px;
}

.buySpawnRate {
display:block;
width:90%;
height:50px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:rgb(255, 237, 190);
border:1px solid;
border-radius:15px;
}
.buttonContainer {
	width:100%;
	display:none;
}
.curUnitStatus {
border:1px solid;
height:100px;
width:90%;
margin-left:auto;
margin-right:auto;
position:relative;
}

div{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.progressNumbers {
    text-align:left;
    margin-right:20px;
    line-height:20px;
    margin-top:10px;
}
h3 {
    margin:0;
    display:inline-block;
    font-size:20px;
}
h2 {
    margin:0;
    font-size:30px;
    display:inline-block;
}
h4 {
    margin:0;
    display:inline-block;
    font-size:18px;
}
.f18 {
	font-size:18px;
}
.f20 {
	font-size:20px;
}
.f24 {
	font-size:24px;
}
div {
    display:inline-block;
}
.mainTab {
	width:13%;
	text-align:center;
    font-size:20px;
    font-weight:bold;
	height:25px;
    border:2px solid #000;
    border-radius:10px;
	cursor:pointer;
	margin-top:3px;
}
.mainTab:hover {
	background-color:rgb(194, 218, 194) !important;
}
.tab {
    height:24px;
    border:2px solid #000;
    border-bottom:0px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color: #ff0003;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    overflow:hidden;
    text-align:left;
    padding-left:5px;
    width:9%;
    margin-bottom:-4px;
}
#buySpace .tab:hover {
    text-align:center;
    width:auto;
    padding-right:5px;
}
.number {
    color:black;
  vertical-align: top;
}
.buyColumn {
    width:100%;
    vertical-align:top;
    height:431px;
	border:1px solid;
	position:relative
}
.flavorText {
    font-style:italic;
    margin-top:10px;
    font-size:11px;
    line-height:10px;
}
.optionsBox {
    border:2px solid;
    font-size:20px;
    cursor:pointer;
    margin-bottom:10px;
    padding:2px 15px;
}
.tooltipcontainer {
position:relative;
}
.tooltip{
position:absolute;
display:none;
}
.unitContainer {
width:40px;
height:50px;
position:absolute;
font-size:12px;
cursor:pointer;
}
.unitContainer:not(.nohover):hover {
background-color:yellow;
}

.unit {
	width:20px;
	height:20px;
}
.unitLeft {
border-radius:50%;
width:20px;
height:20px;
}
.unitLine0 {
top:32px;
}
.unitLine1 {
top:86px;
}
.unitLine2 {
top:139px;
}
.unitLine3 {
top:193px;
}
.unitLine4 {
top:247px;
}
.unitLine5 {
top:301px;
}

.soldier {
background-color:rgb(86, 56, 38);
}
.spear {
background-color:rgb(120, 137, 57);
}

.weapon {
width:15px;
height:20px;
vertical-align:top;
}
.weaponsoldier {
background-color:gray;
margin-top:8px;
height:3px;
width:100%
}

.weaponspear {
background-color:brown;
margin-left:8px;
height:100%;
width:2px;
}
.healthBarOuter {
	width:100%;
	background-color:blue;
	height:5px;
	position:relative;
}

.healthBarInner {
	width:100%;
	background-color:yellow;
	height:5px;
	position:absolute;
}
.count {
position:absolute;
top:46px;
left:13px;
}
.exitLine {
height:400px;
width:4px;
background-color:red;
position:absolute;
}

.mouseOverArea{
position:absolute;
height:446px;
width:300px;
top:-27px;
}

.arrow {
position:absolute;
height:400px;
width:65px;
background-color:rgba(128, 128, 128, 0.34);
display:none;
}
.innerArrow {
margin-top:177px;
margin-left:22px;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
}
.spawnManualAmount {
position:absolute;
color:purple;
top:23px;
left:12px;
font-size:14px;
}
.spawnAutoAmount {
position:absolute;
top:28px;
left:57px;
font-size:14px;

}
.unitSpawnBox {
position:relative;
width:150px;
}
.enemyUnitSpawnBox {
position:absolute;
width:150px;
}
.statusLabel {
position:absolute;
font-size:14px;
}
.bigNumber {
color:black;
font-size:14px;
}
.progressBar {
height:15px;
margin-top:3px;
}
.unitScreen {
text-align:center;
width:100%;
margin-top:10px;
}
.displayLeft {
position:relative;
float:left;
margin-left:10px;
border:1px solid;
padding:4px;
width:100px;
height:20px;
}
.displayRight {
position:relative;
float:right;
margin-right:10px;
border:1px solid;
padding:4px;
width:100px;
height:20px;
}
.unitUpgradeContainer {
width:90%;
margin-top:20px;
background-color:rgb(255, 229, 161);
border:1px solid;
padding:10px 0px;
cursor:pointer;
position:relative;
text-align:center;
}
.unitUpgradeContainer:hover {
	background-color:yellow;
}
.unitProgress {
left:10px;
top:6px;
width:120px;
height:12px;
background-color:gray;
padding:4px 0px;
position:absolute;
}
.spawnContainer {
width:100%;
position:relative;
height:40px;
margin-top:5px;
}
.spawnLabel {
position:relative;
left:331px;
top:5px;
}
.placeTimer {
position:absolute;
top:23px;
left:9px;
font-size:14px;
}
.placeAmount {
position:absolute;
top:0px;
left:132px;
font-size:21px;
color:black;
}
.placeProgresInner {
width:100%;
position:absolute;
height:12px;
background-color:rgb(0, 255, 129);
}
.upArrow {
    width: 15px;
    height: 15px;
	left:130px;
	top:-10px;
    border-top: 4px solid #94FFFB;
    border-left: 4px solid rgba(32, 179, 0, 1);
	position:absolute;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.clickMe {
position:relative;
top:2px;
left:3px;
color:blue;
font-size:20px;
border:2px solid blue;
padding:0px 10px;
}
.backButton {
position:absolute;
top:10px;
left:10px;
width:45px;
height:25px;
border:3px solid black;
cursor:pointer;
}
.backArrow {
    width: 15px;
    height: 15px;
	left:03px;
	top:2px;
    border-bottom: 4px solid #6B0000;
    border-left: 4px solid rgba(152, 0, 127, 1);
	position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.ui-slider { 
position: relative; 
text-align: left; 
background-color:rgb(181, 181, 181);
border-radius:5px;
height: 15px;
width:80%;
}
.ui-slider .ui-slider-handle { 
position: absolute;
z-index: 2; 
width: 10px; 
height: 26px;
background-color:#404040;
border-radius:5px;
top:-5px;
}
.map {
	position:relative;
	width:50px;
	height:35px;
	padding-top:15px;
	margin-left:151px;
	margin-top:80px;
	background-color:white;
	vertical-align:top;
	text-align:center;
	border-radius:15px;
	cursor:pointer;
}
.map:hover {
	background-color:yellow;
}
.mapInfo {
	top:20px;
	width:130px;
	left:212px;
	height:180px;
	background-color:#B4B1FF;
	position:absolute;
	border-radius:15px;
	padding-top:10px;
	display:none;
	border:2px solid;
}
.mapSpace {
	position:absolute;
	width:50px;
	height:35px;
	padding-top:15px;
	background-color:white;
	vertical-align:top;
	text-align:center;
	border-radius:15px;
	cursor:pointer;
}

.mapInfoField {
	font-size:10px;
	color:rgb(102, 102, 102);
	display:block;
	margin-left:12px;
}
.infoNum {
	color:black;
}

.timerReady {
    width: 42px;
    font-size: 10px;
    background-color: yellow;
    margin-top: 8px;
    padding: 3px;
    border-radius: 10px;
}

.timerContainer {
    position:absolute;
}
.timer {
	color:black;
	font-size:12px;
}
.spell {
    width: 102px;
    height: 32px;
    margin-top: 5px;
    padding-top: 15px;
    background-color: #181852;
    color: #E2E2E2;
    font-size: 10px;
    vertical-align: top;
    margin-left: 7px;
    margin-right: 4px;
    text-align: center;
    border: 2px solid white;
	cursor:pointer;
	position:relative;
}
.hyperVisible
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.placeButton {
    width: 200px;
    background-color: #DFFFAC;
    border: 1px solid;
    height: 45px;
    position: relative;
	text-align:left;
	cursor:pointer;
	margin-left:5px;
	margin-right:5px;
	vertical-align:top
}
.placeButton:hover {
	background-color:#B5E864;
}
.spawnDiv {
	width:100%;
	background-color:#DFFFAC;
	border-bottom:1px solid;
	height:30px;
	position:relative;
	margin-top: -5px;
}
.spawnListPic {
	position:absolute;
	top:0px;
	left:35px;
}
.listPic {
	position:absolute;
	top:0px;
	left:159px;
	border:2px solid;
	top:2px;
	background-color:#A9FF00;
	cursor:pointer;
}
.listPic:hover {
	background-color:#E68B4A;
}
.constructionBar {
    width: 100%;
    background-color: rgba(128, 128, 128, 0.82);
    height: 26px;
    top: 2px;
    position: absolute;
    left: 0px;
	display:none;
}
.spellCost {
	position:absolute;
	right:5px;
	bottom:5px;
}
.hotkeyNum {
  position:absolute;
  left:5px;
  top:5px;
}