html{
	padding:0px;
	margin: 0px;
	}

body{
	background: #242527;
	font-family: 'Alegreya Sans SC', sans-serif;
	color:gray;
	padding:0px;
	margin: 0px;
	text-align:center;
	}

.font-numbers{
font-family: 'Inconsolata', monospace;
font-family: 'Droid Sans Mono', monospace;
}

/* Page Layout */

#wholepage{
overflow:hidden;
width:100%;
height:100vh; 
margin:auto;
}

#blob_column_left{
width:325px;
border-right:1px solid #333333;
height:100vh; 
position:fixed;
top:0;
left:0;
z-index: 10000;
background: #242527;
}

#blob_column_mid{
height:100vh; 
width:100%;
position:fixed;
top:0;
left:0;
overflow-x: hidden;
}

#blob_column_right{
width:325px;
border-left:1px solid #333333;
height:100vh; 
position:fixed;
top:0;
right:0;
z-index: 10000;
background: #242527;
}



@media (max-width: 910px){
	#blob_column_mid_scrollcontainer{
	position:relative;
	height:100vh; 
	margin-left:0px;
	margin-right:0px;
	}

	#blob_column_mid_center{
	margin:auto;
	width:600px;
	}

	#blob_column_mid_inner{
	position:relative;
	width:590px;
	}  

	.goo{
	width:100%;
	border-collapse: collapse;
	margin-bottom:5px;
	border:1px solid gray;
	}

	#blob_column_left{
	display:none;
	}

	#blob_column_right{
	display:none;
	}

	#blob_popout{
	display:block;
	}

	#left-panal-open{visibility:visible;}
	#left-panal-close{visibility:visible;}
}

@media (max-width: 1280px) and (min-width: 911px){
	#blob_column_mid_scrollcontainer{
	position:relative;
	height:100vh; 
	margin-left:0px;
	margin-right:325px;
	}

	#blob_column_mid_center{
	margin:auto;
	width:600px;
	}

	#blob_column_mid_inner{
	position:relative;
	width:590px;
	}  

	.goo{
	width:100%;
	border-collapse: collapse;
	margin-bottom:5px;
	border:1px solid gray;
	}

	#blob_column_left{
	display:none;
	}

	#left-panal-open{visibility:hidden;}
	#left-panal-close{visibility:hidden;}
}

@media (max-width: 1439px) and (min-width: 1281px){
	#blob_column_mid_scrollcontainer{
	position:relative;
	height:100vh; 
	margin-left:325px;
	margin-right:325px;
	}

	#blob_column_mid_center{
	margin:auto;
	width:600px;
	}

	#blob_column_mid_inner{
	position:relative;
	width:590px;
	}  

	.goo{
	width:100%;
	border-collapse: collapse;
	margin-bottom:5px;
	border:1px solid gray;
	}

	#left-panal-open{visibility:hidden;}
	#left-panal-close{visibility:hidden;}

}

 @media (min-width: 1440px) {
	#blob_column_mid_scrollcontainer{
	position:relative;
	height:100vh; 
	margin-left:325px;
	margin-right:325px;
	}

	#blob_column_mid_center{
	margin:auto;
	width:800px;
	}

	#blob_column_mid_inner{
	position:relative;
	width:800px;
	}  

	.goo{
	width:49%;
	float:left;
	border-collapse: collapse;
	margin-bottom:5px;
	margin-right:1%;
	border:1px solid gray;
	}

	#left-panal-open{visibility:hidden;}
	#left-panal-close{visibility:hidden;}

}

/* End Page Layout */

/* Containers */

/*
@media (max-width: 1259px) {
  #popout-left{visibility:none; display:none;}
  #popout-right{visibility:none; display:none;}
  #content-main{width:600px;}
 }

 @media (min-width: 1260px) {
  #popout-left{visibility:visible;}
  #popout-right{visibility:visible;}
  .hide-wide{visibility:hidden;display:none;}
  #content-main{width:600px;}
 }

 @media (min-width: 1440px) {
  #popout-left{visibility:visible;}
  #popout-right{visibility:visible;}
  .hide-wide{visibility:hidden;display:none;}
  #content-main{width:600px;}
 }

@media (min-width: 1920px) {
  #popout-left{visibility:visible;}
  #popout-right{visibility:visible;}
  .hide-wide{visibility:hidden;display:none;}
  #content-main{width:600px;}
 }

#popout-right{
position:fixed;
top:0;
right:0;
width:325px;
border-left:1px solid #333333;
height:100%;
z-index: 10000;
background: #242527;
}

#popout-left{
text-align:left;
position:fixed;
top:0;
left:0;
width:325px;
border-right:1px solid #333333;
height:100%;
z-index: 10000;
background: #242527;
}

*/

#content-main{
margin:auto;
border:1px solid white;
height:100vh; 
}

#content-left{
text-align:center;
}

#content-right{
text-align:center;
}

#content-main-top{
height:220px;
}

#content-progress{
position:relative;
z-index:9999;
}

.content-section{
margin-top:15px;
}



/* PROGRESS BAR STRUCTURE */

progress[value]  {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Get rid of default border in Firefox. */
  border: none;  
  background: gray;
 }

#shrink_bar{
position: relative;
z-index:-10;
width: 100%;;
height: 15px;
color: green; /* IE */
}

#level_bar{
position: relative;
z-index:10;
width: 100%;
height: 25px;
color: green; /* IE */
}

#bloblets_bar{
position: relative;
z-index:10;
width: 120px;
height: 25px;
color: #f78eb9; /* IE */
}

.clickstorm_bar{
position: relative;
z-index:10;
width: 90%;
height: 25px;
color: #f78eb9; /* IE */
}

/* Chrome Safari*/
#level_bar::-webkit-progress-value { background: green; }
#bloblets_bar::-webkit-progress-value{
    background-color: #f78eb9;	
}

/* Firefox */
#level_bar::-moz-progress-bar { background: green; }
#bloblets_bar::-moz-progress-bar{
   background-color: #f78eb9;
}

/* END PROGRESS BAR STRUCTURE */

/* Progress bars */

/* Standard Css */

.none{padding:0;margin:0;}
.font-1 {font-size:28px;}
.font-2 {font-size:24px;}
.font-3 {font-size:20px;}
.font-4 {font-size:16px;}
.font-5 {font-size:12px;}

.font-bold{ font-weight:bold;}
.font-acenter { text-align:center;}
.font-aleft { text-align:left;}
.font-aright { text-align:right;}

#bloblevel{
text-align:center;
font-size:18px;
position:absolute;
width:600px;
top:150px;
z-index:9999;
}

#attackprogress{
text-align:center;
font-size:18px;
width:100%;
height:20px;
z-index:9999;
}

.fleft{float:left;}
.fright{float:right;}

.pad20 { padding:20px; }
.pad5 { padding:5px; }
.pad2 { padding:2px; }
.pad0 {padding:0;margin:0;}
.padr10{ padding-right:10px;}

.btn-green{ border:1px solid #2ECC40; color: #2ECC40;}
.btn-green:hover{ cursor:pointer;}
.btn-red{ border:1px solid #FF4136; color: #FF4136;}
.btn-red:hover{ cursor:not-allowed;}
.btn-gray{ border: 1px solid gray; color :gray;}
.btn-gray:hover{ cursor:pointer;}
.btn-yellow{ border: 1px solid #FFDC00;; color :#FFDC00;;}
.btn-yellow:hover{ cursor:pointer;}

.orange{color:#FF851B;}
.red{color:#FF4136;}
.green{color:#2ECC40;}
.blue{color:#0074D9;}
.yellow{color:#FFDC00;}
.white{color:white;}
.purple{color:#85144b;}

.black{color:#111111;}
.brown{color:#8B4513;}
.navy{color:#00293D;}
.olive{color:#3D9970;}

.bgorange{background:#FF851B; color:white;}
.bggreen{background:#2ECC40; color:white;}
.bgblue{background:#0074D9; color:white;}
.bgyellow{background:#FFDC00; color:black;}
.bgwhite{background:white; color:black;}
.bgpurple{background:#B10DC9; color:white;}
.bgblack{background:#111111; color:white;}
.bgbrown{background:#8B4513; color:white;}
.bgnavy{background:#001f3f; color:white;}
.bgolive{background:#3D9970; color:white;}

.w30 {width:30px;}
.w40 {width:40px;}
.w50 {width:50px;}
.w55 {width:55px;}
.w60 {width:60px;}
.w70 {width:70px;}
.w80 {width:80px;}
.w100 {width:100px;}
.w120 {width:120px;}
.w150 {width:150px;}

.image_disabled { opacity: 0.2; filter: alpha(opacity:20); }
.image_gray  { border: 2px solid #333333; }
.image_gray  { border: 2px solid gray; }
.image_green { border: 2px solid gray; background:green;}
.image_greenborder { border: 2px solid #2ECC40;}



* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

.notselectable {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.clone{
position:relative;
color:white;
z-index:-50;
width:100px;
text-align:center;
pointer-events: none;
-ms-user-select: none; /* IE 10+ */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

.btn-close{
border:1px solid #333333;
padding: 4px 8px 4px 8px;
color:gray;
float:right;
}

.btn-close:hover{
cursor:pointer;
color:white;
}

#popout-bottom{
border:0px solid gray;
position:fixed;
left:50%;
bottom:20px;
margin-left:-205px;
width:400px;
padding:5px;
}

#popout-bottom:hover{
cursor:pointer;
}

.popout-title{
font-size:22px;
line-height:32px;
}

.popout-text{
font-size:16px;
}

.popout-img-left{
float:left;
padding-left:25px;
}

.popout-img-right{
float:right;
padding-right:25px;
}

.mut_button{
border:1px solid #333333; 
margin:5px;
padding:10px;
height:50px;
position:relative;
}

.mut_cost{
float:right;
border:1px solid #333333;
position:absolute;
bottom:0;
right:0;
width:20px;
padding:4px;
color:white;
}

.btn-mut{
width:80%;
}

.hide_20{visibility:hidden;}

.attack_button{
border:1px solid #333333;
}

.attack_button_green{
border:1px solid green;
}

.blob_attack_target{
}

.blob_attack_target:hover{
cursor:pointer;
}

#left-panal-open{
position:fixed;
top:0;
left:0;
border-right:1px solid gray;
border-bottom:1px solid gray;
}

#left-panal-open:hover{
background:black;
cursor:pointer;
}

#left-panal-close{
position:fixed;
top:0;
left:0px;
border-right:1px solid gray;
border-bottom:1px solid gray;
visibility:hidden;
}

#left-panal-close:hover{
background:black;
cursor:pointer;
}

#right-panal-open{
position:fixed;
top:0;
right:0;
border-left:1px solid gray;
border-bottom:1px solid gray;
}

#right-panal-open:hover{
background:black;
cursor:pointer;
}

#right-panal-close{
position:fixed;
top:0;
right:325px;
border-left:1px solid gray;
border-bottom:1px solid gray;
visibility:hidden;
}

#right-panal-close:hover{
background:black;
cursor:pointer;
}

a:link {color: white;text-decoration:none;}
a:visited {color: white;text-decoration:none;}
a:hover {color: white;text-decoration:none;}
a:active {color: white;text-decoration:none;}

a:link .blue{color: green;text-decoration:none;}
a:visited .blue {color: green;text-decoration:none;}
a:hover .blue {color: green;text-decoration:none;}
a:active .blue {color: green;text-decoration:none;}


#level_bar{
position: relative;
z-index:10;
}

#colwrap {
	position: relative;
	width: 100%;
	color:white;
	margin-top:-28px;
	z-index:50;
	margin-bottom:35px;
}

.colwrap {
	position: relative;
	width: 100%;
	color:white;
	margin-top:-28px;
	z-index:50;
	margin-bottom:0px;
}

#col1 {
	width: 48%;
	float: left;
	text-align:right;
	z-index:50;
}

#col2 {
	width: 4%;
	float: left;
	text-align:center;
}

#col3 {
	width: 48%;
	float: left;
	text-align:left;
}

.b1111{border:1px solid gray;}
.b1011{border-top:1px solid gray;border-bottom:1px solid gray;border-left:1px solid gray;}
.b1010{border-top:1px solid gray;border-bottom:1px solid gray;}
.b1110{border-top:1px solid gray;border-bottom:1px solid gray;border-right:1px solid gray;}
.b1000{border-top:1px solid gray;}


/* Shrink Toggle */

a.toggler {
    background: #2ECC40;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 1px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: #FF4136;
    border-right-width: 2px;
    border-left-width: 15px;
}

a.togglerLogs {
    background: #2ECC40;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 1px;
    text-decoration: none;
    transition: all .5s ease;
}

a.togglerLogs.off {
    background: #FF4136;
    border-right-width: 2px;
    border-left-width: 15px;
}

/* Goo */

.goo_up{
float:left; 
width:25px; 
height:25px;
margin-right:3px;
}

.goo_up:hover{
cursor:pointer;
}

/* HOVER STYLES */
div.pop-up {
  display: none;
  text-align: left;
  position: absolute;
  margin-top: -175px;
  width: 140px;
  padding: 0px 3px;
  background: #565656;
  color: #fff;
  border: 1px solid gray;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
}

div.clear {
  clear: both;
}

#blob_charts{
width:100%;

}

/* Clickstorm START*/

.cst{
width:25%;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
padding-top:10px;
}

.csm{
border-left:1px solid #333333;
border-right:1px solid #333333;
font-size:20px;
padding-bottom:10px;
}

.csb{
border-bottom:1px solid #333333;
border-left:1px solid #333333; 
border-right:1px solid #333333;
}

#cs_upgrade0:hover{cursor:pointer;}
#cs_upgrade1:hover{cursor:pointer;}
#cs_upgrade2:hover{cursor:pointer;}
#cs_upgrade3:hover{cursor:pointer;}



/* Clickstorm END */

#modal-inner{ 
width:800px;
height:570px;
margin:auto;
margin-top:-350px;
top:50%;
position:relative;
background: #242527;
z-index:99999;
border:2px solid white;
}


#modalBlank-inner{ 
width:1000px;
height:570px;
margin:auto;
margin-top:-350px;
top:50%;
position:relative;
background: #242527;
z-index:99999;
border:2px solid white;
overflow-y:auto;
overflow-x:hidden;
}

#modalBlank{ 
width:100%;
height:100%;
z-index:9999999;
position:fixed;
margin:auto;
background:black;
background: rgb(0,0,0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
top:0;
left:0;
overflow:auto;
}

#modal{ 
width:100%;
height:100%;
z-index:9999999;
position:fixed;
margin:auto;
background:black;
background: rgb(0,0,0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
top:0;
left:0;
}

#modal2{ 
width:100%;
height:100%;
z-index:999999999999;
position:fixed;
margin:auto;
background:black;
background: rgb(0,0,0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
top:0;
left:0;
}

#modal-inner2{ 
width:800px;
height:150px;
margin:auto;
margin-top:-350px;
top:50%;
position:relative;
background: #242527;
z-index:99999;
border:2px solid white;
}

.mar-lr5{
margin-left:5px;
margin-right:5px;
}

.hoverpointer:hover{
cursor:pointer;
}

.cs_boost_button{
width:80px;
height:80px; 
border:1px solid #333333;
margin:auto;
line-height:40px;
}

.cs_boost_buttonxxx:hover{
border:1px solid white;
cursor:pointer;
}

.greenActive{
border:1px solid green;
font-weight:bold;
}

.grayInactive{
border:1px solid #333333;
}

.font12 {font-size:12px;}
.font14 {font-size:14px;}
.font16 {font-size:16px;}




.XXXmutation-box{
border:1px solid #333333;
float:left;
width:100px;
padding:5px;
}

.XXXmutation-box-title{
color:white;
}

.XXXmutation-box-body{
font-size:12px;
}

.XXXmutation-box-button{
color:white;
margin-top:5px;
}

.muttable{
border:1px solid#333333;
margin:10px;
border-collapse:collapse;
width:100%;
}

.muttable tr{
border-right:1px solid #333333;
border-bottom:1px solid #333333;
}

.muttable td{
border-right:1px solid #333333;
height:40px;
}

.mutCol0{
color:gray;
text-align:center;
padding:5px;
font-size:14px;
width:50px;
}

.mutCol1{
color:gray;
text-align:left;
padding:5px;
font-size:14px;
}

.mutCol2{
text-align:center;
padding:5px;
font-size:16px;
width:80px;
}

.mutCol3{
text-align:center;
padding:5px;
font-size:16px;
width:80px;
}

.mutCol4{
text-align:center;
font-size:14px;
}

.mutCol5{
color:gray;
text-align:center;
padding:5px;
font-size:12px;
}

table.tabevo {
width:100%;
border:1px solid #333;
border-collapse:collapse;
}

.tabevo td {
border:1px solid #333;
}

.a-box-container{
width:25%;
color:#333;
}

.a-box{
border:1px solid #333; 
height:70px; 
text-align:center;
}

.a-box-top{
padding-top:10px;
font-size:14px;
}

.a-box-bottom{
font-size:28px;
}





/* tiny, accessible-ish CSS tooltip */

:root{
  --vtip-bg: rgba(18,18,22,.96);
  --vtip-fg: #fff;
  --vtip-br: 8px;
  --vtip-px: 10px;
  --vtip-py: 8px;
  --vtip-border: 1px solid rgba(255,255,255,.15);
  --vtip-maxw: 260px;
  --vtip-z: 100000;
}

.vtip {
  position: absolute;
  background: var(--vtip-bg);
  color: var(--vtip-fg);
  border: var(--vtip-border);
  border-radius: var(--vtip-br);
  padding: var(--vtip-py) var(--vtip-px);
  max-width: var(--vtip-maxw);
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: var(--vtip-z);
  font-size: 12px;
  line-height: 1.25;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .12s ease, transform .12s ease;
}

.vtip.show { opacity: 1; }
.vtip::after{
  content:"";
  position:absolute;
  width:0;height:0;border:7px solid transparent;
}
.vtip[data-pos="top"]::after{ top:100%; left:50%; transform:translateX(-50%); border-top-color: var(--vtip-bg); }
.vtip[data-pos="bottom"]::after{ bottom:100%; left:50%; transform:translateX(-50%); border-bottom-color: var(--vtip-bg); }
.vtip[data-pos="left"]::after{ left:100%; top:50%; transform:translateY(-50%); border-left-color: var(--vtip-bg); }
.vtip[data-pos="right"]::after{ right:100%; top:50%; transform:translateY(-50%); border-right-color: var(--vtip-bg); }

/* keep any HTML templates hidden */
.tooltip-template { display:none !important; }

.scroll_container { overflow: auto; }

/* WebKit */
.scroll_container::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll_container::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255,255,255,.25); }
.scroll_container:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4); }
.scroll_container::-webkit-scrollbar-track { background: transparent; }

/* Firefox */
.scroll_container { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; }

/* fallback popout style */
#popout-bottom { position: relative; z-index: 9999; }
.popout-fallback {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 14px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 180ms ease;
}
.popout-fallback.hide { opacity: 0; }
.popout-fallback img { vertical-align: middle; }



#mcbi{
height:160px;
line-height:150px;
}

#blob-clone{
z-index:5;
}

.btn-blob {
  position: relative;
  cursor: pointer;
  margin: 0px auto;
  text-align: center;
}

/* TABS */




@media (max-width: 910px){
	ul.tabs2 li{
		background: none;	
		display: inline-block;
		padding: 9px 9px;
		cursor: pointer;
		}
}

@media (max-width: 1280px) and (min-width: 911px){
	ul.tabs2 li{
		background: none;	
		display: inline-block;
		padding: 9px 9px;
		cursor: pointer;
		}
}

@media (max-width: 1439px) and (min-width: 1281px){

ul.tabs2 li{
	background: none;	
	display: inline-block;
	padding: 9px 13px;
	cursor: pointer;
	}

#blobtab2icon{
	display:none;
	}

}

 @media (min-width: 1440px) {

	ul.tabs2 li{
	background: none;	
	display: inline-block;
	padding: 9px 13px;
	cursor: pointer;
	}

 #blobtab2icon{
	display:none;
	}
}


.container{
	width: 600px;
	margin: 0 auto;
	margin-top:20px;
}
ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
	border:0px solid red;
}
ul.tabs2{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li{
	background: none;	
	display: inline-block;
	padding: 9px 12px;
	cursor: pointer;
	}

ul.tabs li.current{
	background: #ededed;
	background: gray;
	color: #222;
	}
ul.tabs2 li.current{
	background: #ededed;
	background: gray;
	color: #222;
	}
.tab-content{
	display: none;
	/*background: #ededed;*/
	padding: 15px;
}
.tab2-content{
	display: none;
	/*background: #ededed;*/
	padding: 0px;
}

.tab-content.current{
	display: inherit;
}

.tab2-content.current{
	display: inherit;
}

.tab-link{
color: white;
}
.tab-link2{
color: #333333;
}




.droplets_tr_1{
text-align:center;
width:30px;
border-top:1px solid gray;
border-bottom:1px solid gray;
border-left:1px solid gray;
text-align:center;
font-size:20px;
padding:5px;
}
.droplets_tr_2{
border-top:1px solid gray;
border-bottom:1px solid gray;
width:130px;
}
.droplets_tr_3{
text-align:center;
border-top:1px solid gray;
border-bottom:1px solid gray;
width:40px;
}
.droplets_tr_4{
text-align:center;
border-top:1px solid gray;
border-bottom:1px solid gray; 
width:60px;
}
.droplets_tr_5{
text-align:center;
border-top:1px solid gray;
border-bottom:1px solid gray; 
width:50px;
}
.droplets_tr_6{
text-align:center;
border-top:1px solid gray;
border-bottom:1px solid gray;
width:50px;
}
.droplets_tr_7{
text-align:center;
border-top:1px solid gray;
border-bottom:1px solid gray;
width:50px;
}
.droplets_tr_8{
border-top:1px solid gray;
border-bottom:1px solid gray;
border-right:1px solid gray;
text-align:center;
}


/* === tiny utilities (safe to reuse anywhere) === */
.vis-hidden { visibility: hidden; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.z-9999     { z-index: 9999; }
.z-neg      { z-index: -999999; }
.mb5        { margin-bottom: 5px; }
.mt10       { margin-top: 10px; }
.mt5        { margin-top: 5px; }
.m0         { margin: 0; }
.p0         { padding: 0; }
.pr10       { padding-right: 10px; }
.m-auto     { margin: auto; }

.w25p { width: 25%; }
.w33p { width: 33%; }
.w55p { width: 55%; }
.w100p{ width: 100%; }
.w160 { width: 160px; }
.w180 { width: 180px; }

.clear { clear: both; } /* (keeps your existing div.clear too) */
.b1-dark { border: 1px solid #333; } /* when you need #333 instead of gray */

/* tables */
.table-full { width: 100%; border-collapse: collapse; }

/* small text helpers used a lot in Goo cards */
.upgrade_title { font-weight: bold; line-height: 30px; font-size: 22px; }
.goo-count     { line-height: 32px; font-size: 32px; }
.tiny-label    { padding: 0; margin: 0; line-height: 10px; font-size: 10px; }
.metric-22     { padding: 0; margin: 0; line-height: 22px; font-size: 22px; }

/* common button stack in top corners */
.btn-stack {
  text-align: center;
  margin-top: 10px;
  width: 100px;
  float: right;
}

/* shrink tiles */
.shrink-tile { width: 25%; float: left; }
.tile-card   { border: 1px solid gray; margin: 2%; padding: 0 2% 1%; }

/* lightning moved out of inline */
#lightning {
  position: absolute;
  z-index: -999999;
  text-align: center;
  width: 100%;
  margin: auto;
  visibility: hidden;
  border: 0;
}