@CHARSET "ISO-8859-1";

.ship {
	position: relative;
	float: left;
	
	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);
	margin-right: calc(4 * var(--margin-element));
	margin-bottom: calc(4 * 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) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		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) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade);
	grid-template-areas: 
		"del pic pic pic pic pic pic pic pic pic pic pic pic pic pic"
		"no1 pic pic pic pic pic pic pic pic pic pic pic pic pic pic"
		"info pic pic pic pic pic pic pic pic pic pic pic pic pic pic"
		"zoom name name name name name name name name name hq hq space1 space1 shipFlag"
		"flag own own own own own own own own own hq hq space2 minelayer minesweeper"
		"no2 no class slow half full agil armour hull pts no12 no12 hqpts space totalpts"
		"card no classval slowval halfval fullval agilval armourval hullval ptsval no12 no12 hqptsval space totalptsval";
}

.fort {
	position: relative;
	float: left;

	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);
	margin-right: calc(4 * var(--margin-element));
	margin-bottom: calc(4 * 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) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade)
		var(--pic-small-brigade)  
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		var(--pic-small-brigade) 
		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) 
		var(--pic-small-brigade) 
		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-areas: 
		"del  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      w2   w2          w2 type w    w    w    w    range ap   ap   cnpts x    cntotalpts"
		"no1  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn1  cn1  cn1  cn1  cn1  cn1   cn1  cn1  cn1   cn1  cn1"
		"zoom no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn2  cn2  cn2  cn2  cn2  cn2   cn2  cn2  cn2   cn2  cn2"
		"no2  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn3  cn3  cn3  cn3  cn3  cn3   cn3  cn3  cn3   cn3  cn3"
		"no2  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn4  cn4  cn4  cn4  cn4  cn4   cn4  cn4  cn4   cn4  cn4"
		"no2  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn5  cn5  cn5  cn5  cn5  cn5   cn5  cn5  cn5   cn5  cn5"
		"no2  no4 cfg      cfg       cfg       cfg     cfg    cfg  cfg      a    a           a  cn6  cn6  cn6  cn6  cn6  cn6   cn6  cn6  cn6   cn6  cn6"
		"card no4 name     name      name      name    name   name name     name name        c  cn7  cn7  cn7  cn7  cn7  cn7   cn7  cn7  cn7   cn7  cn7"
		"flag no4 own      own       own       own     own    own  own      own  own         c  cn8  cn8  cn8  cn8  cn8  cn8   cn8  cn8  cn8   cn8  cn8"
		"no3  no4 class    cannon    armour    hull    pts    no5  hqpts    no6  totalpts    c  cn9  cn9  cn9  cn9  cn9  cn9   cn9  cn9  cn9   cn9  cn9"
		"info no4 classval cannonval armourval hullval ptsval no5  hqptsval no6  totalptsval c  cn10 cn10 cn10 cn10 cn10 cn10  cn10 cn10 cn10  cn10 cn10";
		
}

.unitDel {
	grid-area: del;
}

.unitZoom {
	grid-area: zoom;
}
.unitPic{
	grid-area: pic;
	width: calc(14 * var(--pic-small-brigade));
    height: calc(3 * var(--pic-small-brigade));
}
.unitFortConfigurator{
	grid-area: cfg;
	background: url(../../../img/unit/fort.png);
	background-size: 100% 100%;

	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) 
		var(--pic-small-brigade);
	grid-template-rows: 
		var(--pic-small-brigade) 
		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-areas: 
		"nw n1 n1 n  n2 n2 ne"
		"n3 n0 n0 n0 n0 n0 n4"
		"n3 n0 n0 n0 n0 n0 n4"	
		"w  n0 n0 n0 n0 n0 e"	
		"n5 n0 n0 n0 n0 n0 n6"
		"n5 n0 n0 n0 n0 n0 n6"	
		"sw n7 n7 s  n8 n8 se";

}

.unitArsenal,
.unitHq{
	grid-area: hq;
}

.unitPic>.unitPicImg {
	width: 100%;
    height: 100%;
}
.unitArsenal>.unitArsenalImg,
.unitHq>.unitHqImg {
	width: 100%;
}

.unitName {
	grid-area: name;

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

.unitOwnName{
    grid-area: own;
    display: flex;
}

.unitOwnNameInput{
    text-align: center;
	font-size: var(--font-06);
	font-weight: var(--font-weight-bold);
    background-color: transparent;
    outline: none;
    border: 0.1vw solid transparent;
    border-bottom: var(--border);
    width: var(--point-input-width);
	margin: 0 auto;
    margin-bottom: var(--div-own-name-padding-bottom);
}

.unitFlagButton {
    grid-area: flag;
}

.unitShipCardButton {
    grid-area: card;
}

.unitFlag{
    position: absolute;
}
.unitFlag.shipFlag{
	grid-area: pic;
	right: calc(1 * var(--pic-small-brigade));
    bottom: 0;
}
.unitFlag.fortFlag{
	grid-area: cfg;
    right: calc(2.5 * var(--pic-small-brigade));
    bottom: calc(2.9 * var(--pic-small-brigade));
}
.unitFlagImg{
	width: calc(2 * var(--pic-small-brigade));
	height: calc(1.2 * var(--pic-small-brigade));
}

.unitShipCommanderFlagButton {
    grid-area: shipFlag;
}

.unitMinelayerButton {
    grid-area: minelayer;
}

.unitMinesweeperButton {
    grid-area: minesweeper;
}

.shipOption>.inactive {
    opacity: var(--opacity-disabled);
}

.unitInfo {
	grid-area: info;
}

.unitDel>.unitDelImg,
.unitFlagButton>.unitFlagButtonImg,
.unitShipCardButton>.unitShipCardButtonImg,
.unitInfo>.unitInfoImg,
.unitZoom>.unitZoomImg,
.unitClass>.unitClassImg,
.unitCannon>.unitCannonImg,
.unitAgility>.unitAgilityImg,
.unitCannon>.unitCannonImg,
.unitArmour>.unitArmourImg,
.unitSlow>.unitSlowImg,
.unitHalf>.unitHalfImg,
.unitFull>.unitFullImg,
.unitHull>.unitHullImg,
.unitPts>.unitPtsImg,
.unitHqPts>.unitHqPtsImg,
.unitTotalPts>.unitTotalPtsImg,
.cannonRange>.cannonRangeImg,
.cannonAp>.cannonApImg,
.cannonPts>.cannonPtsImg,
.cannonTotalPts>.cannonTotalPtsImg,
.cannonPic>.cannonPicImg,
.cannonAdd>.cannonAddImg,
.cannonDel>.cannonDelImg,
.unitShipCommanderFlagButtonImg,
.unitMinelayerButtonImg,
.unitMinesweeperButtonImg{
	width: var(--pic-small-brigade);
}

.unitFlagButton:hover,
.unitShipCardButton:hover,
.unitDel:hover,
.unitInfo:hover,
.unitZoom:hover,
.unitShipCommanderFlagButton:hover,
.unitMinelayerButton:hover,
.unitMinesweeperButton:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.unitArsenal:hover,
.unitHq:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.unitClass {
	grid-area: class;
}
.unitCannon{
	grid-area: cannon;
}
.unitAgility {
	grid-area: agil;
}
.unitArmour {
	grid-area: armour;
}
.unitSlow {
	grid-area: slow;
}
.unitHalf {
	grid-area: half;
}
.unitFull {
	grid-area: full;
}
.unitHull {
	grid-area: hull;
}
.unitPts {
	grid-area: pts;
}
.unitHqPts {
	grid-area: hqpts;
}
.unitTotalPts {
	grid-area: totalpts;
}

.unitClassVal{
	grid-area: classval;
}
.unitCannonVal{
	grid-area: cannonval;
}
.unitAgilityVal{
	grid-area: agilval;
}
.unitArmourVal{
	grid-area: armourval;
}
.unitSlowVal{
	grid-area: slowval;
}
.unitHalfVal{
	grid-area: halfval;
}
.unitFullVal{
	grid-area: fullval;
}
.unitHullVal{
	grid-area: hullval;
}
.unitPtsVal{
	grid-area: ptsval;
}
.unitHqPtsVal{
	grid-area: hqptsval;
}
.unitTotalPtsVal{
	grid-area: totalptsval;
}

.unitClassVal,
.unitCannonVal,
.unitAgilityVal,
.unitArmourVal,
.unitSlowVal,
.unitHalfVal,
.unitFullVal,
.unitHullVal,
.unitPtsVal,
.unitHqPtsVal,
.unitTotalPtsVal,
.cannonCount,
.cannonRangeVal,
.cannonApVal,
.cannonPtsVal,
.cannonTotalPtsVal{
	font-size: var(--font-06);
	font-weight: var(--font-weight-bold);
	text-align: center;
	padding-top:var(--padding-element-inside);
}

.unitTemplate>.unitDel,
.unitTemplate>.unitFlagButton,
.unitTemplate>.unitShipCardButton,
.unitTemplate>.unitInfo,
.unitTemplate>.unitZoom,
.unitTemplate>.unitHq,
.unitTemplate>.unitArsenal,
.unitTemplate>.unitShipCommanderFlagButton,
.unitTemplate>.unitMinelayerButton,
.unitTemplate>.unitMinesweeperButton {
	display: none;
}

.unit> .inactive > .img,
.unitTemplate> .inactive > .img {
	opacity: var(--opacity-disabled);
}

.unit-drop-hover{
}

.unit-drop-active{
	z-index: 10;
	transform: scale(1.05, 1.05);
	box-shadow: none;
	border-left: var(--border-left-drop);
	border-top: var(--border-top-drop);
	border-bottom: var(--border-bottom-drop);
	border-right: var(--border-right-drop);
}

.ship.zoomActive{
	position: fixed;
    top: var(--zoom-ship-top);
	left: var(--zoom-ship-left);    
	padding: var(--padding-flex);
	box-shadow: unset;
}

.cardActive{
	position: fixed;
    top: var(--card-ship-top);
	left: var(--card-ship-left);    
	padding: var(--padding-flex);
	box-shadow: unset;
}
.unitCardImg{
	width: var(--card-width );
}

.fort.zoomActive{
	position: fixed;
    top: var(--zoom-fort-top);
	left: var(--zoom-fort-left);    
	padding: var(--padding-flex);
	box-shadow: unset;
}