@font-face {
	font-family: "DIN 2014 Engschrift LT Pro";
	font-stretch: 100% 100%;
	src: 
		local("DIN 2014 Engschrift LT Pro"),
		url("din-2014-engschrift-lt-pro.ttf") format("truetype");
}
@font-face {
	font-family: "DIN Condensed VF";
	font-stretch: 100% 100%;
	src:
		local("DIN Condensed VF"),
		url("din-condensed-vf-regular") format ("truetype");
}


body{
	font-family: Arial;
	font-stretch: 50%;
	font-size: 14pt;
	margin: 0;
}

div h1, div h2, div h3 {
	font-family: "DIN 2014 Engschrift LT Pro";
}
th {
	font-family: "DIN Condensed VF";
}

div.wrapper {
	position : relative;
	width: 100%;
	background-color: #eeeeee;
	padding: 1em 0;
}

div.ruleset {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	background-color: white;
	min-width: 720px;
	width: 80%;
	text-align: left;
	padding: 1em;
	border: 1px solid #cccccc;
}

.logo {
	display:inline-block;
	margin-right: 2em;
	vertical-align: top;
}

.ruleset h1, .ruleset h2 {
	width: 100%;
	
}

.archetype {
	
}

h1 {
	font-size: 2.4em;
	border-bottom: 2px solid orangered;
	color: orangered;
}

h2 {
	font-size: 2em;
	color: orangered;
	border-bottom: 2px solid orangered;
}

h3 {
	color: orangered;
	font-weight: Bold;
	font-size: 1.6em;
	display: inline-block;
	width: 100%;
	border-bottom: 2px solid orangered;
	margin-bottom: 0.2em;
}


.keyword, .faction, .roster li {
	text-transform: uppercase;
	font-weight: bold;
}

.rule {
	font-weight: bold;
	text-transform: none;
}

.note {
	font-style: italic;
}

.tacop {
	font-weight: bold;
	font-style: italic;
}

.roster a, .rule a {
	color: black;
}

.faction {
	color: orangered;
}

.redcards {
	color: red;
}

.faction::after {
	content: url('fskull.png');
	display: inline-block;
	width: 19px;
	height: 19px;
}

.range, .icon {
	display: inline-block;
	vertical-align: middle;
}

.range.one {
	height: 19px;
	width: 22px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f1.png');
}

.range.two {
	height: 19px;
	width: 19px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f2.png');
}

.range.three {
	height: 19px;
	width: 19px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f3.png');
}

.range.six {
	height: 19px;
	width: 22px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f6.png');
}

.icon.apl {
	height: 32px;
	width: 32px;
	background-image: url('kt3-apl.png');
}
.icon.move {
	height: 32px;
	width: 32px;
	background-image: url('kt3-move.png');
}
.icon.save {
	height: 32px;
	width: 32px;
	background-image: url('kt3-save.png');
}
.icon.wounds {
	height: 32px;
	width: 32px;
	background-image: url('kt3-wounds.png');
}
.icon.hit {
	height: 32px;
	width: 32px;
	background-image: url('kt3-hit.png');
}
.icon.yes {
	height: 19px;
	width: 19px;
	background-image: url('kt3-greentriangle.png');
}
.icon.no {
	height: 19px;
	width: 19px;
	background-image: url('kt3-redrombus.png');
}
.icon.ranged {
	height: 32px;
	width: 32px;
	background-image: url('kt3-ranged.png');
}
.icon.melee {
	height: 32px;
	width: 32px;
	background-image: url('kt3-melee.png');
}

img.map {
	width: 100%;
	height:auto;
	border: 2px solid orangered;
}

.archetype {
	position: relative;
	display: inline-block;
	background-color: black;
	color: white;
	padding: 0.5em;
	font-weight: bold;
	min-width: 10em;
	text-align: center;
}

.orange {
	background-color: orangered;
}

.red {
	background-color: firebrick;
}

.blue {
	background-color: midnightblue;
}

.black {
	background-color: dimgray;
}

.white {
	background-color: white;
}

.datacard .whitetext {
	color: white;
}

.datacard .white {
	color: black;
}

.mono {
	font-family: monospace;
	font-stretch: 100%;
}

div.datasheet div {
	position: relative;
	display: inline-block;
}

table {

}

.columns2 {
	column-count: 2;
    column-gap: 1em;
	break-inside: avoid;
}

.columns3 {
	column-count: 3;
	column-gap: 1em;
	break-inside: avoid;
}

.equip-item {
	display: block;
	break-inside: avoid;
}

.rulecard, .ability {
	display: block;
	height: min-content;
	break-inside: avoid;
}

.stratploys h3, .firefightploys h3, .psypowers h3 {
	display: inline-block;
	width: 100%;
	background-color: black;
	border-bottom: none;
	color: white;
	padding: 0.2em;
}

.stratploys h3 {
	background-color: darkslategray;
}

.psypowers h3 {
	background-color: midnightblue;
}

.datacard {
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
	top: 1em;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.ruleset .datacard{
	margin-top: 0;
}

.datacard-wrapper {
	
}

.killgrade {
	border: none;
	border-collapse: collapse;
	width: 90%;
}

.killgrade td {
	width: 13%;
	background: white;
	color: black;
	text-align: center;
}

.killgrade th {
	background: dimgray;
	color: white;
}

.killgrade .orange {
	background: orangered;
}


.killgrade .black {
	background: black;
	color: white;
}

.killgrade .vertical {
	writing-mode: vertical-rl;
	transform: rotate (180deg);
}

.toc a {
	text-transform: uppercase;
	color: orangered;
}
.toc a:link, .toc a:local-link, .toc a:visited {
	color: orangered;
}

.dataslate-wrapper {
	position: relative;
	padding: 0;
	border: 2px solid black;
	border-top: none;
	background: black;
	border-bottom: 1px solid gainsboro;
}

.datacard-wrapper table {
	width: 100%;
}

.dataslate {
	border: none;
	
	border-collapse: collapse;
	position: relative;
	min-width: 600px;
}

.card {
	display: inline-block;
	min-width: 30%;
	max-width: 25em;
	margin: 0 1em;
	padding: 1em 0;
	
}

.cards div {
	vertical-align: top;
}

.card .header {
	width: 100%;
	border: 2px solid black;
	background-color: black;
	border-radius: 1em 1em 0 0;
	color: white;
	font-size: 24pt;
	font-weight: bold;
	padding: 0.5em 0;
	text-align: center;
}
.card .archetype {
	border-left: 2px solid black;
	border-right: 2px solid black;
	display: block;
	padding: 0.5em 0;
	width: 100%;
}

.card .archetype img {
	position: absolute;
	top: -3em;
	left: 1em;
}

.card .description {
	border-left: 2px solid black;
	border-right: 2px solid black;
	padding: 1em 0;
	width: 100%;
	background: whitesmoke;
	height: 30em;
}

.card h2 {
	background: orangered;
	color: white;
	padding: 0 1em;
}

.card h2, .card h3, .card p, .card ul {
	margin: 0.1em 1em;
	width: auto;
	display: block;
}

.card .action {
	border: 2px solid orangered;
	margin: 0.5em 1em;
	width: auto;
	height: auto;
}

.card .footer {
	border: 2px solid black;
	border-top: none;
	min-height: 3em;
	width: 100%;
	border-radius: 0 0 1em 1em;
	background: whitesmoke;
}

.dataslate th:first-child {
	padding: 0.5em 0.5em 0.5em 0;
}

.dataslate td, .dataslate th {
	padding: 0.5em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "DIN 2014 Engschrift LT Pro";
	font-size: 14pt;
	background-color: black;
	color: white;
	border-left: 6px solid gainsboro;
}



.dataslate th {
	width: 50%;
	border-left: none;
	text-align: left;
	font-size: 20pt;
}



.dataslate .title {
	padding-left: 1em;
	padding-right: 0.2em;
	border-bottom: 2px solid orangered;
}


.dataslate th, .dataslate tr:nth-child(even) td {
	font-size: 24pt;
}

.dataslate tr:nth-child(even) th.small {
	font-size: 14pt;
	text-decoration: none;
}

.weapons-wrapper {
	background-color: gainsboro;
	padding: 0 1em 0 1em;
}

.weapons {
	border: none;
	border-collapse: collapse;
	position: relative;
	width: 100%;
}

.weapons th {
	border-bottom: orangered;
	font-family: "DIN Condensed VF";
}

.weapons td {
	padding: 0.5em;
	background-color: none;
	font-weight: bold;
	font-stretch: 50%;
	font-size: 16pt;
}

.weapons td.melee {
	background-image: url('kt3-melee.png');
	background-position: center;
	background-repeat: no-repeat;
}
.weapons td.ranged {
	background-image: url('kt3-ranged.png');
	background-position: center;
	background-repeat: no-repeat;
}

.weapons tr:first-child td {
	
	font-size: 16pt;
	border-bottom: 2px solid orangered;
}

.weapons tr:nth-child(even) td, .weapons tr:nth-child(even) th {
	background-color: gainsboro;
}

.weapons tr:last-child td, .weapons tr:last-child th {
	border-bottom: 2px solid orangered;
}
.weapons tr.separator td {
	border-top: 2px solid orangered;
}

.abilities-wrapper {
	background-color: gainsboro;
	padding: 0 1em 0 1em;
}

.abilities td, .abilities th {
	width: 50%;
	padding: 0.5em;
	vertical-align: top;
}

.abilities .weapons td, .abilities .weapons th {
	width: auto;
}

.abilities td{
	background-color: gainsboro;
}

.ability {
	padding-top: 1em;
	font-family: arial;
	font-stretch: 50%;
	font-size: 16pt;
	font-weight: normal;
	break-inside: avoid;
}

.unique-action, .generic-box {
	border: none;
	border-collapse: collapse;
	width: 100%;
	font-size: 14pt;
}

.unique-action {
	border: 2px solid orangered;
	border-collapse: collapse;
}

table.unique-action {
	margin-bottom: 1em;
}

.unique-action th {
	background-color: orangered;
	color: white;
	text-align: left;
	padding: 0.5em;
	text-transform: uppercase;
}

.unique-action td {
	padding: 0.5em;
}

.generic-box th {
	color: white;
	text-align: left;
	padding: 0.5em;
	text-transform: uppercase;
}

.equipment h3, .equupment th {
	width: 100%;
	border: 2px solid black;
	padding: 0.1em;
}

.unique-action th:last-child, .generic-box th:last-child {
	text-align: right;
}


.abilities .ability:first-child {
	padding-top: 0;
}

.keywords {
	border: 2px solid black;
	padding: 1em;
	background-color: black;
	color: white;
	font-family: arial;
	font-stretch: 50%;
	font-size: 16pt;
	font-weight: bold;
	
}

.map-thumb {
	height: auto;
}

.itd-landscape {
	width: 29em;
}

.itd-portrait {
	width: 25em;
}

.itdx2-landscape {
	width: 58em;
}

.itdx2-portrait {
	width: 50em;
}

.open-landscape {
	width: 30em;
}

.open-portrait {
	width: 22em;
}

.openx2-landscape {
	width: 60em;
}

.openx2-portrait {
	width: 44em;
}

.combo-portrait {
	width: 47em;
}

.combo-landscape {
	width: 57em;
}

.phonescreen-size {
	width: 40em;
}