@CHARSET "ISO-8859-1";

.rosterLevels {
	grid-area: roster_levels;
}

.levelSingle {
	display: grid;
	grid-template-columns: 80px 1000px auto;
	grid-template-rows: 150px;
	grid-template-areas: "level_ps level_units level_additional_units";
	margin-top: 10px;
}

.levelSingleShort {
	display: grid;
	grid-template-columns: 80px 800px auto;
	grid-template-rows: 150px;
	grid-template-areas: "level_ps level_units level_additional_units";
	margin-top: 10px;
}

.rotate {
	height: 40px;
	width: 120px;
	text-align: center;
	transform: rotate(-90deg);
	transform-origin: 50% 150%;
	font-weight: 800;
}

.levelDouble {
	display: grid;
	grid-template-columns: 80px 1000px auto;
	grid-template-rows: 150px 150px;
	grid-template-areas: "level_ps level_units level_additional_units"
		"level_ps level_unitsdouble level_additional_unitsdouble";
	margin-top: 10px;
}

.levelDoubleShort {
	display: grid;
	grid-template-columns: 80px 800px auto;
	grid-template-rows: 150px 150px;
	grid-template-areas: "level_ps level_units level_additional_units"
		"level_ps level_unitsdouble level_additional_unitsdouble";
	margin-top: 10px;
}

.levelTriple {
	display: grid;
	grid-template-columns: 80px 1000px auto;
	grid-template-rows: 150px 150px 150px;
	grid-template-areas: "level_ps level_units level_additional_units"
		"level_ps level_unitsdouble level_additional_unitsdouble"
		"level_ps level_unitstriple level_additional_unitstriple";
	margin-top: 10px;
}

.levelTripleShort {
	display: grid;
	grid-template-columns: 80px 800px auto;
	grid-template-rows: 150px 150px 150px;
	grid-template-areas: "level_ps level_units level_additional_units"
		"level_ps level_unitsdouble level_additional_unitsdouble"
		"level_ps level_unitstriple level_additional_unitstriple";
	margin-top: 10px;
}

.levelPsSingle {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 150px;
	width: 40px;
}

.levelPsSingleShort {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 150px;
	width: 40px;
}

.levelPsDouble {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 300px;
	width: 40px;
}

.levelPsDoubleShort {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 300px;
	width: 40px;
}

.levelPsTriple {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 450px;
	width: 40px;
}

.levelPsTripleShort {
	grid-area: level_ps;
	justify-self: center;
	align-self: center;
	margin: 5px;
	padding: 5px;
	font-size: 130%;
	font-style: italic;
	font-weight: bold;
	border-top: 2px solid #576680;
	border-right: 2px solid #576680;
	height: 450px;
	width: 40px;
}

.levelPsSingle:hover {
	box-shadow: inset 0px 0px 5px 5px #986F12;
	transition: all 0.5s ease;
}

.levelPsDouble:hover {
	box-shadow: inset 0px 0px 5px 5px #986F12;
	transition: all 0.5s ease;
}

.levelPsTriple:hover {
	box-shadow: inset 0px 0px 5px 5px #986F12;
	transition: all 0.5s ease;
}

.levelUnits {
	grid-area: level_units;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	grid-template-rows: auto;
	grid-template-areas: "unit1 unit2 unit3 unit4 unit5 unit6 unit7 unit8";
	grid-column-gap: 0px;
	grid-row-gap: 10px;
	padding-left: 10px;
}

.levelUnitsLong {
	grid-area: level_units;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit1 unit2 unit3 unit4 unit5 unit6 unit7 unit8 unit9 unit10 unit11 unit12";
	grid-column-gap: 0px;
	grid-row-gap: 10px;
	padding-left: 10px;
}

.levelUnitsDouble {
	grid-area: level_unitsdouble;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit9 unit10 unit11 unit12 unit13 unit14 unit15 unit16";
	grid-row-gap: 10px;
	padding-left: 10px;
}

.levelUnitsTriple {
	grid-area: level_unitstriple;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit17 unit18 unit19 unit20 unit21 unit22 unit23 unit24";
	grid-row-gap: 10px;
	padding-left: 10px;
}

.levelAdditionalUnits {
	grid-area: level_additional_units;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	grid-template-rows: auto;
	grid-template-areas: "unit1 unit2 unit3 unit4 unit5 unit6 unit7 unit8";
	grid-row-gap: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid #576680;
}

.levelAdditionalUnitsDouble {
	grid-area: level_additional_unitsdouble;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit9 unit10 unit11 unit12 unit13 unit14 unit15 unit16";
	grid-row-gap: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid #576680;
}

.levelAdditionalUnitsDoubleShort {
	grid-area: level_additional_unitsdouble;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit9 unit10 unit11 unit12 unit13 unit14 unit15 unit16";
	grid-row-gap: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid #576680;
}

.levelAdditionalUnitsTriple {
	grid-area: level_additional_unitstriple;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit17 unit18 unit19 unit20 unit21 unit22 unit23 unit24";
	grid-row-gap: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid #576680;
}

.levelAdditionalUnitsTripleShort {
	grid-area: level_additional_unitstriple;
	justify-self: left;
	height: 150px;
	display: inline-grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto
		auto auto;
	grid-template-rows: auto;
	grid-template-areas:
		"unit17 unit18 unit19 unit20 unit21 unit22 unit23 unit24";
	grid-row-gap: 10px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid #576680;
}