body, table {
	background-color: black;
	color: white;
	font-family: verdana;
	font-size: 11px;
}

input, textarea, select, button {
	font-family: verdana;
	font-size: 11px;
	vertical-align: middle;
}

#outerWrapper {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#innerWrapper {
	border: solid 1px silver;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: row;
}

#links {
	overflow: auto;
}

#level {
	width: 191px;
	margin: 10px auto 0 auto;
}

#variance {
	width: 166px;
	margin: 10px auto 0 auto;
}

#variance input {
	width: 80px;
}

#links a {
	border: solid 1px silver;
	border-radius: 7px;
	display: block;
	float: left;
	padding: 6px;
	text-decoration: none;
	color: white;
	margin-bottom: 5px;
	margin-right: 5px;
	font-weight: bold;
	background: black;
}

#links a:hover {
	color: orange;
}

#input {
	float: left;
	width: 300px;
	min-height: 646px;
}
input[type=range] {accent-color: darkblue; }
progress {accent-color: darkblue;}

#output {
	float: right;
	width: 300px;
	border-left: solid 1px silver;
	position: relative;
	min-height: 646px;
}

.half {
	float: left;
	width: 50%;
}

.half .stat {
	overflow: auto;
	padding: 0 10px;
}

.half .stat input {
	width: 25px;
	float: right;
}

.half .stat label {
	line-height: 23px;
}

#stars {
	margin: 5px auto;
	width: 140px;
}

#commander {
	margin: 5px auto;
	text-align: center;
}

#divineCombo {
	text-align: center;
	margin-top: 5px;
	font-weight: bold;
}

#divineCombo span:hover {
	cursor: pointer;
	text-decoration: underline;
}

#divineCombo .type2 {
	color: #00c800;
}

#divineCombo .type3 {
	color: #0090f8;
}

#divineCombo .type4 {
	color: #f800f8;
}

#stars {
	overflow: auto;
}

.star {
	background-image: url(/imgs/layout/star.png);
	width: 15px;
	height: 14px;
	float: left;
}

.star.selected {
	background-image: url(/imgs/layout/star-selected.png);
}

#result .stat {
	float: left;
	width: 25%;
	margin: 5px 0;
}

#result .stat div {
	background-repeat: no-repeat;
	padding-left: 24px;
	height: 20px;
	line-height: 20px;
}

#result .stat #pAccuracy { background-image: url(/imgs/layout/accuracy.png); }
#result .stat #pDodge { background-image: url(/imgs/layout/dodge.png); }
#result .stat #pSpeed { background-image: url(/imgs/layout/speed.png); }
#result .stat #pElectron { background-image: url(/imgs/layout/electron.png); }
#result .stat #pAttack { background-image: url(/imgs/layout/attack.png); }
#result .stat #pStructure { background-image: url(/imgs/layout/structure.png); }
#result .stat #pShield { background-image: url(/imgs/layout/shield.png); }
#result .stat #pCritDamage { background-image: url(/imgs/layout/critdamage.png); }
#result .stat #pCritRate { background-image: url(/imgs/layout/critrate.png); }
#result .stat #pComboRate { background-image: url(/imgs/layout/comborate.png); }
#result .stat #pShieldRecovery { background-image: url(/imgs/layout/shieldrecovery.png); }
#result .stat #pExp { background-image: url(/imgs/layout/exp.png); }

#result {
	border: solid 1px #0073f2;
	border-radius: 10px;
	margin: 10px auto;
	width: 250px;
	clear: both;
	overflow: auto;
	padding: 5px;
	background-color: #000f30;
}

#qq {
	clear: both;
}

#growth {
	overflow: hidden;
	
}

#gems {
	clear: both;
	overflow: hidden;
	width: 252px;
	margin: 10px auto;
}

#gems .column {
	float: left;
	margin-right: 5px;
}

#gems .column .gem {
	width: 58px;
	height: 58px;
	margin-bottom: 5px;
}

#gems .column .gem img {
	margin: 9px;
	width: 40px;
	height: 40px;
}

#gems .column .red {
	background-image: url(/imgs/layout/ruby.png);
}

#gems .column .blue {
	background-image: url(/imgs/layout/sapphire.png);
}

#gems .column .green {
	background-image: url(/imgs/layout/emerald.png);
}

#gems .column .diamond {
	background-image: url(/imgs/layout/diamond.png);
}

#gemSelector {
	display: none;
	width: 180px;
	position: absolute;
	padding: 0 5px 5px 0;
	border: solid 1px silver;
	border-radius: 6px;
	background-color: black;
}

#gemSelector img {
	margin: 5px 0 0 5px;
	width: 40px;
	height: 40px;
}

#gems *, #gemSelector * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#commanderImage {
	text-align: center;
	margin: 5px;
}

#commanderImage img {
	width: 145px;
	height: 120px;
}

#skill {
	margin: 5px;
}

#combined {
	text-align: center;
	margin: 10px;
}


#prof {
	width: 176px;
	margin: 5px auto;
	background-color: #000f30;
	overflow: auto;
	padding: 5px;
	border: solid 1px #0073f2;
	border-radius: 10px;
}

#prof div {
	float: left;
	width: 40px;
	height: 40px;
	margin: 2px;
	position: relative;
}

#prof div img {
	position: absolute;
	bottom: 1px;
	right: 1px;
}

#prof-ballistic { background-image: url(/imgs/layout/effBallistic.png); }
#prof-directional { background-image: url(/imgs/layout/effDirectional.png); }
#prof-missile { background-image: url(/imgs/layout/effMissile.png); }
#prof-carrier { background-image: url(/imgs/layout/effShipBased.png); }
#prof-defend { background-image: url(/imgs/layout/effPlanetary.png); }
#prof-frigate { background-image: url(/imgs/layout/effFrigate.png); }
#prof-cruiser { background-image: url(/imgs/layout/effCruiser.png); }
#prof-battleship { background-image: url(/imgs/layout/effBattleship.png); }


#powered {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 5px;
}

#showHD {
	position: absolute;
	right: 5px;
	top: 5px;
}

#commanderQuality {
	font-weight: bold;
	text-align: center;
}

#commanderQuality.divine {
	color: #ffff00;
}

#commanderQuality.legend {
	color: #f800f8;
}

#commanderQuality.super {
	color: #0090f8;
}

#commanderQuality.spell {
	color: #00c800;
}

#command {
	margin: 0 auto;
	width: 255px;
	height: 63px;
	padding-bottom: 10px;
}

#command .type {
	width: 40px;
	float: left;
	height: 40px;
	padding-left: 45px;
	background-repeat: no-repeat;
	line-height: 40px;
}

#command #heading {
	text-align: center;
	padding-bottom: 10px;
}

#command .frigate {
	background-image: url(/imgs/layout/effFrigate.png);
}

#command .cruiser {
	background-image: url(/imgs/layout/effCruiser.png);
}

#command .battleship {
	background-image: url(/imgs/layout/effBattleship.png);
}

#link {
	width: 300px;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 5px;
}












#rate {
	text-align: center;
}

#rate.hide {
	display: none;
}

#chips {
	overflow: hidden;
	position: absolute;
	top: 390px;
	left: 45px;
	width: 220px;
	text-align: center;
}

.chip {
	background-image: url(/imgs/layout/chip-background.png);
	width: 58px;
	height: 58px;
	display: inline-block;
	/*float: left;*/
	margin: 3px 5px;
}

.chip img {
	margin: 9px;
}

#chipLevel div {
	color: white;
	border: solid 1px silver;
	float: left;
	width: 38px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: black;
}

#chipSelector.hidden, #chipLevel.hidden, #chipColor.hidden, #chipType.hidden {
	display: none;
}

#chipSelector {
	position: absolute;
	top: 400px;
	left: 45px;
	z-index: 10;
	border: solid 1px silver;
	padding: 5px;
	background-color: black;
	width: 322px;
}

#chipType img, #chipColor img, #chipLevel div {
	margin: 3px;
}




#commanderListWrapper {
	width: 603px;
	height: 646px;
	position: absolute;
	z-index: 5;
	display: none;
	background-color: black;
}

#commanderListWrapper #commanderList {
	height: 100%;
	width: 100%;
}

#commanderListWrapper iframe {
	width: 100%;
	height: 100%;
	border: solid 1px silver;
	border-radius: 10px;
}

#closeList {
	position: absolute;
	background-color: red;
	height: 20px;
	width: 20px;
	top: 10px;
	right: 24px;
	z-index: 15;
}


table#commanderList {
	color: white;
	width: 100%;
}

table#commanderList td, table#commanderList th {
	text-align: left;
}

table#commanderList td.number, table#commanderList th.number {
	text-align: right;
}

table#commanderList td.actions, table#commanderList th.actions {
	text-align: center;
	width: 128px;
}

table#commanderList th span:hover {
	color: orange;
	cursor: pointer;
}

/* Mobile fixes */
@media screen and (max-width: 767px) {
	#innerWrapper {
		border: solid 1px silver;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	#outerWrapper {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}