body.st {

	background-image: url("../images/star-space-tile.jpg");

	background-repeat: repeat-y repeat-x;
	background-color: black;
	font-family: arial;
}

td {
	vertical-align: top;
	text-align: center;
	/*padding: 6px;*/
	font-size: 9pt;
	font-family: arial;
}

.orders {
	background-image: url("../images/orders.jpg");
	background-repeat: no-repeat;
	width: 565px;
	min-height: 500px;
	border: 6px solid #9999ff;
	/* light purple */
	background-color: black;
	color: white;
	padding: 40px 10px 10px 140px;
	display: none;
	position: absolute;
}

.dilemmas {
	background-image: url("../images/orders.jpg");
	background-repeat: no-repeat;
	width: 565px;
	min-height: 500px;
	border: 4px solid #cc6566;
	/* pink */
	background-color: black;
	color: white;
	padding: 40px 10px 10px 140px;
	display: none;
	position: absolute;
}

.cardViewer {
	/*background-image: url("../images/orders.jpg");
	background-repeat: no-repeat;*/
	width: 357px;
	height: 495px;
	border: 4px solid #d198cf;
	/* light purple-pink */
	background-color: black;
	color: black;
	padding: 0px 0px 0px 0px;
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 12pt;
}

.full {
	width: 357px;
	height: 497px;
	border-radius: 12pt;
}

#handContainer {
	position: absolute;
	bottom: 24px;
}


#mainContainer {
	padding-top: 36px;

	width: 98vw;
	/*Making the container a flexbox*/
	display: flex;
	/*Making equal spaced divs*/
	justify-content: space-between;
}

.mainBox {
	width: 20%;
}

.groupViewer {
	padding: 6px 6px 6px 6px;
	max-width: 500px;
	min-height: 100px;
	border: 4px solid #fe9900;
	background-color: black;
	color: white;
	display: none;
	font-size: 12px;
	position: absolute;
	top: 100px;
	left: 20px;
}

div.mission {
	border: solid 1px #500000;
	padding: 10px;
}

.mission {
	background-image: url("../images/red_trans.png");
	background-repeat: repeat-y repeat-x;
}

div.personnel {
	padding: 10px;
	min-height: 136px;
}

.personnel {
	background-image: url("../images/blue_trans.png");
	background-repeat: repeat-y repeat-x;
}


span.list {
	color: #9999ff;
	font-weight: bold;
}

span.listOrange {
	color: #ff9900;
	font-weight: bold;
	font-size: 12pt;
}

span.listPink {
	color: #ca98cb;
}

span.listRed {
	color: red;
}

td.list {
	text-align: right;
	color: #9999ff;
	font-weight: bold;
	width: 50%;
}

td.listStopped {
	text-align: right;
	color: red;
	font-weight: bold;
	width: 50%;
}

th.list {
	text-align: center;
}

button {
	font-size: 9pt;
}

/* stopped card */
.red {
	border: 1px solid red;
}

.thumbCross {
	width: 82px;
	height: 60px;
}

.thumb {
	/* smaller */
	width: 60px;
	height: 82px;
	text-align: top;
}

.outer {
	position: relative;
	margin: 0px auto;
	width: 100px;
	height: 110px;
}

.innerCard {
	position: absolute;
	top: 9px;
	left: 20px;
	border: none;
}

.innerCross {
	position: absolute;
	top: 36px;
	left: 8px;
	border: none;
}

.innerDilemma {
	position: absolute;
	top: 20px;
	left: 31px;
	border: none;
}

.innerShipPersonnel {
	position: absolute;
	top: 20px;
	left: 32px;
	border: none;
}

/* rotate 180 */
td.oppenent,
td.thumb {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* rotate another 180 */
.oppenent .full {
	width: 357px;
	height: 497px;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.summary {
	background-color: #400000;
	color: #ffffff;
	height: 36px;
}

.turn {
	background-color: #3828bf;
	color: #ffffff;
	font-size: 13pt;
	vertical-align: middle;
}

.hand {
	/*
	background-image: url("green_trans.png");
	background-repeat: repeat-y repeat-x;
	*/
}

.bigButton {
	font-size: 16pt;
}