#bottomBar{
	background-color:#394743;
	height:50px;
	width:100vw;
	position:fixed;
	bottom:0;
	left:0;
	border-top:1px solid black;
	xbox-shadow: 0px 2px 0px #000,
				0px 0px 4px #000;
}


#tabContainer{
	xborder:1px solid white;
	position:fixed;
	bottom:0;
	width:100vw;
	xheight:5vh;
	xcolor:white;
	xpadding:5px;
	margin-bottom:5px;
	text-align:center;
	z-index:5;	
	
		
	display: flex;
	xjustify-content: center; /* align horizontal */
	xalign-items: center; /* align vertical */
}


	
.bottomTab{
	width:30vw;
	height:35px;
	border:1px solid black;
	xborder-radius:5px;
	xfloat:left;
	xmargin-right:5px;
	margin:5px;
	padding-top:2px;
	text-align:center;
	background-color:#394743;
	box-shadow: 2px 2px 4px #000000;
	
	background-color: #138630;
	border-bottom: 5px solid #0d5920;
	border-radius: 5px;
	color: #000;
}



.bottomTab:active{
	background-color:#0d5920;
	xtransition: transform 0.05s; 
	xtransform: translateY(3px);
	
	transform: translate(0px,3px);
	-webkit-transform: translate(0px,3px);
	border-bottom: 1px solid;
}

.tabIcon{
	height:25px;	
	filter: drop-shadow(0px 0px 3px  rgba(0, 0, 0, 1.0));
}

#tabContent{
	xborder:1px solid white;	
	border-top:1px solid #333333;
	visibility:hidden;
	width:100vw;
	height:32%;
	background-color: rgba(0,0,0,0.5);
	xbackground-color: rgba(246, 226, 176,0.5);
	xbackground-color:#8f6a1b;
	xbackground-image:url('pics/texture/stone.png');
	background-image:url('pics/texture/stone_loop_big_dark1.png');
	xbackground-repeat:no-repeat;
	xbackground-size:contain;
	color:white;
	xpadding:2px;
	position:relative;
	xtext-align:center;
}



#closeTab{
	xborder:1px solid grey;
	xborder-radius:4px;
	padding-left:8px;
	padding-right:8px;
	position:absolute;
	top:0;
	right:0;
	margin-right:5px;
	visibility:hidden;
	font-size:15px;
	font-family: Consolas,monaco,monospace; 
	font-weight:bold;
	xbackground-color: rgba(0,0,0,0.3);
	z-index:1;
	box-shadow: 0px 2px 4px #000,
				0px 0px 4px #000;
	
	background-color: #d92626;
	border-bottom: 5px solid #ad1f1f;
	border-radius: 5px;
	color: #FFF;
}

#closeTab:active{
	transform: translate(0px,3px);
	-webkit-transform: translate(0px,3px);
	border-bottom: 1px solid;
	background-color: #6c1313;
}


.tabContentPage{
	visibility:hidden;
	position:absolute;
	xbackground-color: rgba(0,0,0,0.3);
	padding:5px;
	border-radius:5px;
	width:100%;
	height:100%;
	overflow-y:scroll;
	xborder-top:2px solid black;
	xborder-bottom:2px solid black;
}



.upgradeItemDarkOverlay{
	xborder:1px solid cyan;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	border-radius:5px;
}


.upgradeItem{
	border: 1px solid black;
	border-radius:5px;
	height:60px;
	width:100%;
	margin-bottom:13px;
	color:grey;
	font-size:13px;
	color:#e6f9ff;		
	font-weight:bold;
	padding:2px;
	background-color: rgba(246, 226, 176,1.0);
	box-shadow: 2px 2px 4px #000000;
	position:relative;
	
}

.upgradeItemLeft{
	xborder: 1px solid red;
	width:10%;
	height:100%;
	float:left;
	margin-right:5px;
	
}

.upgradeItemRight{
	xborder: 1px solid green;
	xclear:left;
	float:left;
	height:100%;
	width:50%;
}


.itemIcon{
	xborder: 1px solid grey;
	xfloat:left;
	filter: drop-shadow(0px 0px 3px  rgba(0, 0, 0, 1.0));
	
}

.itemName{
	xborder:1px solid grey;
	float:left;
	margin-right:5px;
}

.animate{
	xtransition: all 0.05s;
	x-webkit-transition: all 0.05s;
}

.itemBuyButton{	
	xborder:1px solid black;
	height:100%;
	width:30%;
	padding:1px;
	display:inline-block;
	text-align:center;
	border-bottom: 5px solid;	
	border-radius: 5px;
	font-size: 12px;
	line-height: 130%;
	color: #FFF;
	position:relative;	
	z-index:2;
	
	background-color: #3498DB;
	border-color:#124a6d;	
}

.itemBuyButton:active{
	transform: translate(0px,3px);
	-webkit-transform: translate(0px,3px);
	border-bottom: 0px solid;
	background-color: #2283c3;
}

.shrink-on-click { transition: transform 0.02s ease-in-out; }
.shrink-on-click:active { transform: scale(0.95); }

/* locked and unlocked buy buttons: unlocked light blue, locked dark blue) */
.locked{
	background-color: #0b2c41;
	border-color:#071e2c;	
	color: #d9d9d9;
}

.locked:active{
	background-color: #0b2c41;	
}

.yellowText{
	color:#fbf137;
}





.itemLevelCon{
	xborder:1px solid grey;
	xfloat:left;
	xcolor:lime;
	color:#66ff66
	
}

.totalDmgCon{
	xborder:1px solid grey;
	xclear:both;
	clear:right;
	color:#ff9933;
}

.itemDesc{
	xborder:1px solid grey;
	font-size:12px;
	color:#999999;
	float:left;
	xclear: both;
}