@CHARSET "ISO-8859-1";

.commander {
	position: relative;
	float: left;
	width: var(--cmd-max-width);
	height: var(--cmd-max-height);
	
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
	
	margin: var(--margin-element);
	padding: var(--padding-element-inside);
	
	display: grid;
	grid-template-columns: var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade);
	grid-template-rows: var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade) var(--pic-small-brigade);
	grid-template-areas: "zoom pic pic option3 option2 option1"
		"flag pic pic not not not"
		"no2 name name name no1 cost"
		"info name name name no1 costval";
}
	
.commander> .inactive > .img {
	opacity: var(--opacity-disabled);
}

.commander>.commanderInfo {
	grid-area: info;
}

.commander>.commanderZoom {
	grid-area: zoom;
}

.commander>.commanderFlagButton {
	grid-area: flag;
}

.commander>.commanderName {	
	grid-area: name;

	text-transform: capitalize;
	font-size: var(--font-small);
	font-weight: var(--font-weight-bold);
	padding-top: var(--padding-name-top);
	text-align: center;
	line-height: 0.8;	
}

.commander>.commanderPic {
	grid-area: pic;
}

.commander>.commanderPic>.commanderPicImg {
	width: calc(2 * var(--pic-small-brigade));
}


.commander> .commanderOption {
	position: relative;
}

.commander> .commanderOption:hover:not(.tail) {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.commander>.option1 {
	grid-area: option1;
}

.commander>.option2 {
	grid-area: option2;
}

.commander>.option3 {
	grid-area: option3;
}

.commander>.option4 {
	grid-area: option4;
}


.commander>.commanderStats {
	font-size: var(--font-smaller);
	font-weight: var(--font-weight-bold);
	text-align: center;
}

.commander>.cost {
	grid-area: cost;
}

.commander>.costValue {
	grid-area: costval;
}

.commander>.brigadeFlag{
    grid-area: pic;
    position: absolute;
    left: var(--pic-small-brigade);
    bottom: 0;
}

.commander>.brigadeFlag>.brigadeFlagImg{
	width: calc(1.8 * var(--pic-small-brigade));
	height: calc(1 * var(--pic-small-brigade));
}

.commander>.commanderOption>.commanderOptionImg,
.commander>.commanderInfo>.commanderInfoImg,
.commander>.commanderZoom>.commanderZoomImg,
.commander>.commanderFlagButton>.commanderFlagButtonImg {
	width: var(--pic-small-brigade);
}

.commander>.commanderOption>.disabledImg{
	display: none;
	position: absolute;
	width: var(--pic-small-brigade);
	top: 0;
	left: 0;
}