body{ background:#333; color:#CCC;}
#menu li{list-style:none; display:inline-block; position: relative;}
#menu a{ 
	color:#666; 
	font: bold 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	padding:5px 5px;
	text-decoration:none; 
	text-transform:uppercase;
}
#menu a:hover, a:hover{ color:#888;}

#menu li ul{ background: #191919; display: none; position: absolute; left: 0; padding: 5px; width: 100%; top: 20px; z-index: 5; }
#menu li ul li{ display: block;}

#menu li:hover ul{ display: block;} 

	#leftColumn{float:left;}
	#rightColumn{ border:1px solid #000; background:#000; float:left; min-height:200px; margin-left:20px; padding:15px;}
	#Column3{float:left;margin-left:20px;}


h1, h2, h3{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

table{ border-top: 1px solid #C1DAFF; border-left: 1px solid #C1DAFF;}
table td{ font-size:14px; padding:5px 8px;}
table td a { color: #CCC;}
table form{ height:10px;}

.tableDlc td{ max-width: 300px;}

thead {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #EEE;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	background: #005C1F;
}

tr.mostRecent td{ color: #EEE;}

td {
	border-right: 1px solid #C1DAFF;
	border-bottom: 1px solid #C1DAFF;
}

td.noBorderR{ border-right: none;}

td img{ display: inline-block; width: 45px;}
td.boxart img{ width: 70px;}
.blocBoxart{ display: inline-block; height: 45px; overflow: hidden;}
.blocBoxart img{ margin-top: -10px; }

a{ color:#000; text-decoration:none; }

.sideFeed{ float: right; }
.colRight{ float: right; }
.colRight .sideFeed{ float: none; }

.sideFeed td{ max-width: 200px;}

.clear{ clear: both;}
.clearLeft{ clear: left;}

.blocTimeline{ float: left; margin-bottom: 60px; width: 760px; padding: 0 20px;}
.blocTimeline.large { width: 97%;}

.yellow, .tableAch td.yellow{ color: #E5F230;}
.orange, .tableAch td.orange{ color: #EA932E;}

.tableAch td{ color: #BBB;}

.tableGoal td{ background: #000; color: #4f6224;}
.tableGoal tr.mostRecent td{ color: #EEE;}
.tableGoal tr.completed td{ color: #999;}

.tableGoal tr.plat360 td{ background: #272525; color: #4f6224;}
.tableGoal tr.completed.plat360 td{ color: #999;}
.tableGoal tr.mostRecent.plat360 td{ color: #6F9C08;}

/* Smash Stats */

.tableSmash table{ border: 0;}
.tableSmash table td{ border: 0; font-size:15px; padding:6px 8px;}

.tableSmash table td.smashPointTd{ padding:4px 8px;}
.tableSmash table tr:first-child td.smashPointTd{ padding-top: 6px}

.smashPointBar{ background: #BBB; height: 18px; width: 200px;}
.pointBarP{ background: #cd8f1d; height: 100%; }

/* Galaxy Map ------------------------------------------------- */

.mapContainer{ font-family: 'Arial'; position: relative; }
.mapContainerInt{ display: flex; flex-wrap: wrap; position: relative; margin: auto; width: 1050px; }
.mapContainerInt.mapZoom9, .mapContainerInt.mapZoom6, .mapContainerInt.mapZoom3{ width: 1025px; }
.mapContainerInt.mapZoom8, .mapContainerInt.mapZoom5, .mapContainerInt.mapZoom2{ width: 810px; }

.managerMenu{ position: absolute; left: 70px; }

.managerMenuInt { 
	background: #000;
	border: 1px solid #FFF;
	display: none; 
	padding: 5px;
	width: 250px; 
	position: absolute;
    z-index: 1;
}
.managerMenu .subMenu:hover .managerMenuInt{ display: block; }

.managerMenuInt a{ color: #FFF; display: block; }
.managerMenuInt a:hover{ text-decoration: underline; }

.button1{ 
	background: #000;
	color: #FFF;
	cursor: pointer;
	display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 10px 0;
    padding: 0 20px;
    min-width: 120px;
    outline: 1px solid #BBB;

    font: 18px Arial;
    text-align: center;
    position: relative;
}

.button1.small{ 
	font-size: 16px;
	height: 25px;
	padding: 0;
	min-width: 100px;
}

.button1.btInvestigate{ display: none; }

.mapBlock{ 
	background: #000;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 50px;
    height: 50px;
    outline: 1px solid #BBB;

    font-size: 14px;
    text-align: center;
    position: relative;
}

.mapBlock.mapBlockCenter{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.mapContainerInt.mapZoom9 .mapBlock, .mapContainerInt.mapZoom6 .mapBlock, .mapContainerInt.mapZoom3 .mapBlock
{ font-size: 8px; width: 25px; height: 25px; }
.mapContainerInt.mapZoom8 .mapBlock, .mapContainerInt.mapZoom5 .mapBlock, .mapContainerInt.mapZoom2 .mapBlock
{ font-size: 0; width: 10px; height: 10px; }

.mapObject{
	background: #333;
	display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid #BBB;

	height: 98%;
	width: 98%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.mapContainerInt.mapZoom8 .mapObject{ width: 94%; height: 94%; }

.mapPlayer{
	background: #FFF;
	border-radius: 100%;

	height: 10px;
	width: 10px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.mapStruct{
	background: #999;
}

.btNav{
	position: absolute;
	left: 0; top: 0;
}

.btNav .mapBlock{
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	width: 50px;
    height: 50px;
}
.btNav .mapBlock:hover{ color: #888; }
.btNav .mapBlock.btDezoom{ padding-bottom: 10px; height: 40px; }

.btNav .mapBlock.active{ background: #3c8b3c; }

.currentDay{
	position: absolute;
	left: 0;
	top: 100px;
}

.btNav.menuAction{
	top: 170px;
}

.btNav.menuAction .mapBlock{
	width: auto;
	padding: 0 15px;
	font: 20px 'Arial';
}

.btNav.menuAction ul{
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.btNav.menuAction ul ul{
	padding-left: 30px;
}


.resultBlock{
	background: #111;
	border: 2px solid #FFF;
	padding: 10px 20px;
	max-width: 500px;
	min-width: 300px;
	margin: 0 auto;
	
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
}

.resultBlock h3{
    color: #3c8b3c;
    font-size: 21px;
    margin: 0 0 20px;
    text-align: center;
}

.resultBlock h4{ font-size: 18px; margin: 18px 0; }
.resultBlock h5{ font-size: 15px; margin: 12px 0; }


/* Toggle menu ------------------------------------------------- */

.toggleMenu{ list-style: none; }

.blocDescr{
	background: #000;
	border: 1px solid #BBB;
	color: #FFF;
	padding: 15px;
	max-width: 60%;
}

.blocToggle{ display: none; }

.blocToggle.active{ display: block; }

.blocToggle .button1{
	font-size: 16px;
}

/* radio */
.toggleMenu input[type="radio"]{
	position: absolute;
	visibility: hidden;
}

.toggleMenu input[type="radio"]:checked+label{
	background: #3c8b3c;
}

/* QB Game Board ------------------------------------------------- */

.gameBoard{ max-width: 80%; }

.gameBoard td{
	background: #a1aab9;
	height: 180px;
    width: 120px;
}

.gameBoard tr:nth-child(odd) td:nth-child(even){ background: #333449; }
.gameBoard tr:nth-child(even) td:nth-child(odd){ background: #333449; }

/* Box List */
.boxListItem{
	display: flex;
	align-items: center;
	gap: 20px;
    margin-bottom: 10px;
}

.boxListItem a{
	background: #000;
	border: 1px solid #cccccc;
	color: #45e945;
	display: block;
	padding: 5px 8px;
	transition: all 0.3s;
}

.boxListItem a:hover{
	border: 1px solid #45e945;
}

.boxListItem a.disabled{
	background: #1e1e1e;
	border: 1px solid #000;
	color: #555855;
}

/* Card List ------------------------------------------------- */

.cardList{ 
	display: flex;
	flex-wrap: wrap;
    gap: 20px;
}

.cardList.cardListMatch{
	justify-content: space-between;
	flex-wrap: nowrap;
}

.cardItem{
	background: #6f7681 top center;
	background-image: url(DATA/CARD/1.jpg);
	background-size: cover;
	border: 2px solid #4b515a;
	color: #DDD;
	margin-bottom: 25px;
	height: 350px;
    width: 250px;
    min-width: 250px;
    position: relative;
    transition: margin 0.5s;
}

.cardItem.cardItemP1.activeClash{ margin-left: 31%; }
.cardItem.cardItemP2.activeClash{ margin-right: 31%; }

.cardItem.destroyed{ background-blend-mode: luminosity; }
.cardItem.hidden, .hidden{ display: none; }

.cardName{
    font-size: 42px;
    font-family: fantasy;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cardCost, .cardDmg{
    background: #56bced;
    border: 2px solid #72ffff;
    border-radius: 100%;
    color: #FFF;
    font: 40px/40px monospace;
    height: 40px;
    width: 40px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
}

.cardCost.withDmg{
	color: #df1d1d;
}

.cardDmg{
	background: #e5af18;
    border-color: #fddf74;
	left: auto;
	right: 0;
}

.cardPerk{
    font-family: sans-serif;
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
}

/* Deck */
.containerDeck{
	display: flex;
	justify-content: space-between;
}

.cardItem.cardSmall{
	height: 210px;
	width: 150px;
	min-width: 150px;
}

.cardItem.cardSmall .cardName{
	font-size: 22px;
}

.cardItem.cardShard .cardName{
	font-size: 18px;
    letter-spacing: 2px;
    top: 0;
    bottom: auto;
}

.cardItem.cardSmall .cardCost, .cardItem.cardSmall .cardDmg{
	font: 30px/30px monospace;
    height: 30px;
    width: 30px;
}


/* Card Shard */
.cardItem.cardSmall.cardShard{
	background-size: 150%;
	height: 100px;
	width: 100px;
	min-width: 100px;
}

.cardPerk.shardQty{
	font-size: 18px;
}


/* Bar Chart */

.chart {
  display: table;
  table-layout: fixed;
  width: 100%;
  /*max-width: 720px;*/
  padding: 0;
  height: 225px;
  margin: 0 auto;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 2%, rgba(0, 0, 0, 0) 2%);
  background-size: 100% 50px;
  background-position: left top;
}
.chart li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.chart span.bar {
  margin: 0 0.5em;
  display: block;
  background: rgba(209, 236, 250, 0.75);
  animation: draw 1s ease-in-out;
  position: relative;
  max-height: 100%;
}
.chart span.bar:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 5px 1px 0;
  display: block;
  text-align: center;
  content: attr(title);
  word-wrap: break-word;
}
.chart span.bar:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 5px 2px 0;
  display: block;
  text-align: center;
  content: attr(rel);
  word-wrap: break-word;
}

.chart span.bar div{
	height: 100%;
	overflow: hidden;
}

.chart span.img{
	display: block;
	position: relative;
	height: 45px;
}